up

src/components/scTable/index.vue

@@ -43,6 +43,7 @@
 		},
 		props: {
 			apiObj: { type: Object, default: () => {} },
+			params: { type: Object, default: () => {} },
 			data: { type: Object, default: () => {} },
 			rowKey: { type: String, default: "" },
 			column: { type: Object, default: () => {} },
@@ -56,6 +57,10 @@
 			data(){
 				this.tableData = this.data;
 				this.total = this.tableData.length;
+			},
+			apiObj(){
+				this.tableParams = this.params;
+				this.refresh();
 			}
 		},
 		data() {
@@ -68,7 +73,7 @@
 				currentPage: 1,
 				loading: false,
 				tableHeight:'100%',
-				tableParams: {},
+				tableParams: this.params,
 				userColumn: []
 			}
 		},

src/views/setting/dic/dic.vue

@@ -14,7 +14,7 @@
 				</el-form-item>
 			</el-col>
 			<el-col :span="12">
-				<el-form-item label="上级字典" prop="parentId">
+				<el-form-item label="父路径" prop="parentId">
 					<el-cascader v-model="form.parentId" :options="dic" :props="dicProps" :show-all-levels="false" clearable></el-cascader>
 				</el-form-item>
 			</el-col>

src/views/setting/dic/index.vue

@@ -6,7 +6,7 @@
 					<el-input placeholder="输入关键字进行过滤" v-model="dicFilterText" clearable></el-input>
 				</el-header>
 				<el-main class="nopadding">
-					<el-tree ref="dic" node-key="id" :data="dicList" :props="dicProps" :current-node-key="''" :highlight-current="true" :expand-on-click-node="false" :filter-node-method="dicFilterNode" @node-click="dicClick">
+					<el-tree ref="dic" node-key="id" :data="dicList" :props="dicProps" :highlight-current="true" :expand-on-click-node="false" :filter-node-method="dicFilterNode" @node-click="dicClick">
 						<template #default="{node, data}">
 							<span class="custom-tree-node">
 								<span class="label">{{ node.label }}</span>
@@ -27,14 +27,19 @@
 		<el-container class="is-vertical">
 			<el-header>
 				<div class="left-panel">
-					<el-button type="primary" icon="el-icon-plus"></el-button>
+					<el-button type="primary" icon="el-icon-plus" @click="addInfo"></el-button>
 					<el-button type="danger" plain icon="el-icon-delete" disabled></el-button>
 				</div>
 			</el-header>
 			<el-main class="nopadding">
-				<scTable ref="table" :apiObj="listApi" stripe :paginationLayout="'prev, pager, next'">
+				<scTable ref="table" :apiObj="listApi" :params="listApiParams" stripe :paginationLayout="'prev, pager, next'">
 					<el-table-column type="selection" width="50"></el-table-column>
 					<el-table-column label="#" type="index" width="50"></el-table-column>
+					<el-table-column label="" width="50">
+						<template #default>
+							<el-tag type="info" style="cursor: move;"><i class="el-icon-d-caret"></i></el-tag>
+						</template>
+					</el-table-column>
 					<el-table-column label="名称" prop="name" width="150"></el-table-column>
 					<el-table-column label="键值" prop="key" width="150"></el-table-column>
 					<el-table-column label="是否有效" prop="yx" width="100">
@@ -56,15 +61,25 @@
 		</template>
 	</el-dialog>
 
+	<el-dialog :title="titleMap[listMode]" v-model="listDialogVisible" :width="600" destroy-on-close>
+		<list-dialog ref="listDialog" :mode="listMode" :params="listDialogParams"></list-dialog>
+		<template #footer>
+			<el-button @click="listDialogVisible=false" >取 消</el-button>
+			<el-button type="primary" @click="saveList()" :loading="isListSaveing">保 存</el-button>
+		</template>
+	</el-dialog>
+
 </template>
 
 <script>
 	import dicDialog from './dic'
+	import listDialog from './list'
 
 	export default {
 		name: 'dic',
 		components: {
-			dicDialog
+			dicDialog,
+			listDialog
 		},
 		data() {
 			return {
@@ -82,8 +97,12 @@
 				dicProps: {
 					label: 'name'
 				},
-				nowDic: null,
+				listApi: null,
-				listApi: this.$API.dic.info,
+				listApiParams: {},
+				listDialogVisible: false,
+				listDialogParams: {},
+				isListSaveing: false,
+				listMode: 'add',
 			}
 		},
 		watch: {
@@ -100,6 +119,17 @@
 				var res = await this.$API.dic.list.get();
 				this.showDicloading = false;
 				this.dicList = res.data;
+				//获取第一个节点,设置选中 & 加载明细列表
+				var firstNode = this.dicList[0];
+				if(firstNode){
+					this.$nextTick(() => {
+						this.$refs.dic.setCurrentKey(firstNode.id)
+					})
+					this.listApiParams = {
+						code: firstNode.code
+					}
+					this.listApi = this.$API.dic.info;
+				}
 			},
 			//树过滤
 			dicFilterNode(value, data){
@@ -117,10 +147,10 @@
 				this.dicMode = 'edit';
 				this.dicDialogVisible = true;
 				this.$nextTick(() => {
-					//这里应该再次根据ID查询详情接口
 					this.$refs.dicDialog.setData(data)
 				})
 			},
+			//保存数据
 			saveDic(){
 				this.$refs.dicDialog.submit(async (formData) => {
 					this.isDicSaveing = true;
@@ -129,12 +159,30 @@
 					if(res.code == 200){
 						//这里选择刷新整个表格 OR 插入/编辑现有表格数据
 						if(this.dicMode == 'add'){
-							var demoID = (Math.random() * (500 - 400 + 1) | 0) + 400;
+							formData.id = (Math.random() * (500 - 400 + 1) | 0) + 400;
-							formData.id = demoID;
+							if(this.dicList.length > 0){
-							this.dicList.push(formData);
+								this.$refs.table.upData({
+									code: formData.code
+								})
+							}else{
+								this.listApiParams = {
+									code: formData.code
+								}
+								this.listApi = this.$API.dic.info;
+							}
+							this.$refs.dic.append(formData, formData.parentId[0])
+							this.$refs.dic.setCurrentKey(formData.id)
 						}
 						if(this.dicMode == 'edit'){
-							//
+							var editNode = this.$refs.dic.getNode(formData.id);
+							//判断是否移动？
+							var editNodeParentId =  editNode.level==1?undefined:editNode.parent.data.id
+							if(editNodeParentId != formData.parentId){
+								var obj = editNode.data;
+								this.$refs.dic.remove(formData.id)
+								this.$refs.dic.append(obj, formData.parentId[0])
+							}
+							Object.assign(editNode.data, formData)
 						}
 						this.dicDialogVisible = false;
 						this.$message.success("操作成功")
@@ -145,11 +193,9 @@
 			},
 			//树点击事件
 			dicClick(data){
-				this.nowDic = data;
+				this.$refs.table.upData({
-				var params = {
 					code: data.code
-				}
+				})
-				this.$refs.table.upData(params)
 			},
 			//删除树
 			dicDel(node, data){
@@ -158,18 +204,37 @@
 				}).then(() => {
 					this.showDicloading = true;
 
-					//这里应该改为异步请求接口
+					//删除节点是否为高亮当前 是的话 设置第一个节点高亮
-					const parent = node.parent;
+					var dicCurrentKey = this.$refs.dic.getCurrentKey();
-					const children = parent.data.children || parent.data;
+					this.$refs.dic.remove(data.id)
-					const index = children.findIndex(d => d.id === data.id);
+					if(dicCurrentKey == data.id){
-					children.splice(index, 1);
+						var firstNode = this.dicList[0];
-					this.dicList = [...this.dicList]
+						if(firstNode){
+							this.$refs.dic.setCurrentKey(firstNode.id);
+							this.$refs.table.upData({
+								code: firstNode.code
+							})
+						}else{
+							this.listApi = null;
+							this.$refs.table.tableData = []
+						}
+					}
 
 					this.showDicloading = false;
 					this.$message.success("操作成功")
 				}).catch(() => {
 
 				})
+			},
+			//添加明细
+			addInfo(){
+				var dicCurrentKey = this.$refs.dic.getCurrentKey();
+				this.listDialogParams = {code: dicCurrentKey};
+				this.listDialogVisible = true;
+			},
+			//保存明细
+			saveList(){
+
 			}
 		}
 	}
@@ -177,7 +242,7 @@
 
 <style scoped>
 	.custom-tree-node {display: flex;flex: 1;align-items: center;justify-content: space-between;font-size: 14px;padding-right: 24px;height:100%;}
-	.custom-tree-node .code {font-size: 12px;color: #409eff;background: #ecf5ff;padding: 2px 5px;border-radius: 3px;}
+	.custom-tree-node .code {font-size: 12px;color: #999;}
 	.custom-tree-node .do {display: none;}
 	.custom-tree-node .do i {margin-left:5px;color: #999;padding:5px;}
 	.custom-tree-node .do i:hover {color: #333;}

src/views/setting/dic/list.vue

@@ -0,0 +1,21 @@
+<template>
+	LIST
+	{{params}}
+</template>
+
+<script>
+	export default {
+		props: {
+			mode: { type: String, default: "add" },
+			params: { type: Object, default: () => {} }
+		},
+		data() {
+			return {
+
+			}
+		}
+	}
+</script>
+
+<style>
+</style>