数据字典样式改版

src/views/setting/dataDictionary/index.vue

@@ -1,43 +1,42 @@
 <template>
-  <!-- :exportList="exportList" -->
-	<zj-page-container direction="row">
-		 <div class="catalogue">
-			 <div class="title">类型名称</div>
-		     <zj-page-container>
-		         <zj-page-fill>
-		             <el-tree :data="typeList" :props="defaultProps" default-expand-all :highlight-current="true"
-		                 :expand-on-click-node="false" @node-click="handleNodeClick" current-node-key="ASSIST_UNIT"
-		                 node-key="dictType" ref="listTree"> 
-		             </el-tree>
-		         </zj-page-fill>
-		     </zj-page-container>
-		 </div>
-		 <template-page ref="pageRef" :getList="getList" :columnParsing="columnParsing" :optionsEvensGroup="optionsEvensGroup"
-		   :tableAttributes="tableAttributes" :tableEvents="tableEvents" :operationColumnWidth="160" :operation="operation()" :exportList="exportList">
-		   <!-- <AddDataDictionary :visible="visible" :item="item" @setVisible="bool => {
-		     visible = bool
-		     if (!bool && item) {
-		       item = null
-		     }
-		   }
-		     " @success="() => {
-		   $refs.pageRef.refreshList()
-		 }
-		   " /> -->
-		   <el-dialog title="" width="500px" custom-class="diy-dialog" append-to-body :modal="true" :visible.sync="formDialog"
-		     :show-close="true" :close-on-click-modal="false" :modal-append-to-body="false" :before-close="formCancel">
-		     <zj-form-container ref="formRef" :form-data="formData" :styleSwitch="false">
-		       <zj-form-module :title="formDialogTitles[formDialogType]" label-width="100px" :showPackUp="false"
-		         :form-data="formData" :form-items="formItems" :disabled="formDialogType==2">
-		       </zj-form-module>
-		     </zj-form-container>
-		     <div slot="footer" class="dialog-footer">
-		   			<el-button size="mini" @click="formCancel">取 消</el-button>
-		   			<el-button size="mini" type="primary" @click="formConfirm()">确定</el-button>
-		     </div>
-		   </el-dialog>
-		 </template-page>
-	</zj-page-container>
+	<zj-tab-page ref="tabPage" :defaultActives="[{ key: 'list', label: '列表页面', essential: true }]">
+		<template slot-scope="{activeKey, data}">
+			<div :style="{
+				width: '100%',
+				height: activeKey == 'list' ? '100%' : '0px',
+				overflow: 'hidden'
+			}">
+				<zj-page-container direction="row">
+					<div class="catalogue">
+						<div class="title">类型名称</div>
+						<zj-page-container>
+							<zj-page-fill>
+								<el-tree :data="typeList" :props="defaultProps" default-expand-all :highlight-current="true"
+									:expand-on-click-node="false" @node-click="handleNodeClick" current-node-key="ASSIST_UNIT"
+									node-key="dictType" ref="listTree">
+								</el-tree>
+							</zj-page-fill>
+						</zj-page-container>
+					</div>
+					<template-page ref="pageRef" :getList="getList" :columnParsing="columnParsing"
+						:optionsEvensGroup="optionsEvensGroup" :tableAttributes="tableAttributes" :tableEvents="tableEvents"
+						:operationColumnWidth="160" :operation="operation()" :exportList="exportList">
+					</template-page>
+				</zj-page-container>
+			</div>
+			<div v-if="~['add', 'detail'].indexOf(activeKey)" style="box-sizing: border-box;padding: 16px;">
+				<zj-form-container ref="formRef" :form-data="formData" :styleSwitch="false">
+					<zj-form-module :title="data.label" label-width="100px" :showPackUp="false" :form-data="formData"
+						:form-items="formItems" :disabled="formDialogType == 2">
+					</zj-form-module>
+				</zj-form-container>
+				<div slot="footer" class="dialog-footer">
+					<el-button size="mini" @click="data.removeTab()">取 消</el-button>
+					<el-button size="mini" type="primary" @click="formConfirm(data.removeTab)">确定</el-button>
+				</div>
+			</div>
+		</template>
+	</zj-tab-page>
 </template>
 
 <script>
@@ -48,284 +47,311 @@ import { required } from '@/components/template/rules_verify.js'
 import { commonTemplateDownload } from '@/api/common.js'
 import { getType, getDataDictionaryExport, getDataDictionary, add, edit, del, getDetail, listImport } from '@/api/dataDictionary.js'
 export default {
-  components: {
-    TemplatePage,
-    AddDataDictionary
-  },
-  mixins: [import_mixin],
-  data() {
-    return {
-      // 事件组合
-      optionsEvensGroup: [
-        [
-          [
-            {
-              name: '新增',
-              click: this.addData
-            }
-          ]
-        ],
-		[
-          [
-            {
-              name: '下载导入模板',
-              click: this.handleDownload
-            }
-          ],
-          [
-            {
-              name: '导入模板',
-              render: () => {
-                return this.importButton(listImport, '导入模板')
-              }
-            }
-          ],
-        ]
-      ],
-      // 表格属性
-      tableAttributes: {},
-      // 表格事件
-      tableEvents: {},
-      visible: false,
-      item: null,
-	  dictType: 'ASSIST_UNIT',
-	  dictTypeName: '辅材单位',
-	  typeList: [],
-	  defaultProps: {
-	    children: '',
-	    label: 'remark'
-	  },
-	  /** 表单变量 */
-	  formDialogType: 0,
-	  formDialogTitles: ["新增","编辑", "详情"],
-	  formDialog: false,
-	  formData: {
-	  	companyName: JSON.parse(localStorage.getItem('greemall_user')).companyName,
-		dictType: 'ASSIST_UNIT',
-		dictTypeName: '辅材单位',
-		dictValue: '',
-		status: 'ON',
-		sortNum: '',
-		remark: ''
-	  }
-    }
-  },
-  created() {
-  	this.getType()
-  },
-  computed: {
-	  formItems() {
-	      return [{
-	        md: 24,
-	        isShow: true,
-	        name: 'el-input',
-	        attributes: { placeholder: '请输入', disabled: true },
-	        formItemAttributes: {
-	          label: '所属商户',
-	          prop: 'companyName',
-	          rules: [...required]
-	        },
-	      }, {
-	        md: 24,
-	        isShow: true,
-	        name: 'el-input',
-	        attributes: { placeholder: '请输入', disabled: true },
-	        formItemAttributes: {
-	          label: '类型名称',
-	          prop: 'dictTypeName',
-	          rules: [...required]
-	        },
-	      }, {
-	        md: 24,
-	        isShow: true,
-	        name: 'el-input',
-	        attributes: { placeholder: '请输入' },
-	        formItemAttributes: {
-	          label: '字典值',
-	          prop: 'dictValue',
-	          rules: [...required]
-	        },
-	      }, {
-	        md: 24,
-	        isShow: true,
-	        name: 'slot-component',
-	        attributes: { },
-	        formItemAttributes: {
-	          label: '状态',
-	          prop: 'status',
-	          rules: [...required]
-	        },
-	    	render: (h, { props, onInput }) => {
-	    		var { value } = props
-	    		return (
-	    			<el-radio-group v-model={this.formData.status}>
-	    			    <el-radio disabled={this.formDialogType==2} label="ON">启用</el-radio>
-	    			    <el-radio disabled={this.formDialogType==2} label="OFF">禁用</el-radio>
-	    			</el-radio-group>
-	    		)
-	    	}
-		},{
-	        md: 24,
-	        isShow: true,
-	        name: 'el-input',
-	        attributes: { placeholder: '请输入' },
-	        formItemAttributes: {
-	          label: '排序',
-	          prop: 'sortNum',
-	          rules: []
-	        },
-		}, {
-        md: 24,
-        isShow: true,
-        name: 'el-input',
-        attributes: { placeholder: '请输入备注内容',type: "textarea", rows: 3 },
-        formItemAttributes: {
-          label: '备注',
-          prop: 'remark',
-          rules: []
-        }
-      }]
-	  }
-  },
-  methods: {
-    // 列表请求函数
-	getList(p) {
-	  try {
-	    var pam = JSON.parse(JSON.stringify(p))
-	    if (this.dictType) {
-	      pam.params.push({ "param": "a.dict_type", "compare": "=", "value": this.dictType })
-	    }
-	    return getDataDictionary(pam)
-	  } catch (error) {
-	    console.log(error)
-	  }
+	components: {
+		TemplatePage,
+		AddDataDictionary
 	},
-    // 列表导出函数
-    exportList: getDataDictionaryExport,
-	getType(){
-		getType().then(res => {
-			this.typeList = res.data
-		    this.$refs.pageRef.refreshList()
-		})
+	mixins: [import_mixin],
+	data() {
+		return {
+			// 事件组合
+			optionsEvensGroup: [
+				[
+					[
+						{
+							name: '新增',
+							click: this.addData
+						}
+					]
+				],
+				[
+					[
+						{
+							name: '下载导入模板',
+							click: this.handleDownload
+						}
+					],
+					[
+						{
+							name: '导入模板',
+							render: () => {
+								return this.importButton(listImport, '导入模板')
+							}
+						}
+					],
+				]
+			],
+			// 表格属性
+			tableAttributes: {},
+			// 表格事件
+			tableEvents: {},
+			visible: false,
+			item: null,
+			dictType: 'ASSIST_UNIT',
+			dictTypeName: '辅材单位',
+			typeList: [],
+			defaultProps: {
+				children: '',
+				label: 'remark'
+			},
+			/** 表单变量 */
+			formDialogType: 0,
+			formDialogTitles: ["新增", "编辑", "详情"],
+			formData: {
+				companyName: JSON.parse(localStorage.getItem('greemall_user')).companyName,
+				dictType: 'ASSIST_UNIT',
+				dictTypeName: '辅材单位',
+				dictValue: '',
+				status: 'ON',
+				sortNum: '',
+				remark: ''
+			}
+		}
 	},
-	handleNodeClick(e){
-		this.dictType = e.dictType
-		this.formData.dictType = e.dictType
-		this.formData.dictTypeName = e.remark
-		this.dictTypeName = e.remark
-		this.$refs.pageRef.refreshList()
+	created() {
+		this.getType()
 	},
-    // 表格列解析渲染数据更改
-    columnParsing(item, defaultData) {
-      return defaultData
-    },
-    operation() {
-      if (true) {
-        return (h, { row, index, column }) => {
-          return (
-            <div class="operation-btns">
-              {true ? (
-                <zj-button
-                  useLoading={false}
-                  parameter={[row]}
-                  buttonAttributes={{
-                    size: 'mini',
-                    type: 'primary'
-                  }}
-                  buttonEvents={{
-                    click: (...p) => {
-                      var [row] = p
-                      this.formData = row
-                      this.formDialogType = 1
-                      this.openForm()
-                    }
-                  }}
-                >
-                  编辑
-                </zj-button>
-              ) : null}
-              {true ? (
-                <el-popconfirm
-                  icon="el-icon-info"
-                  icon-color="red"
-                  title="这是一段内容确定删除吗？"
-                  onConfirm={() => {
-                    del({ id: row.sysDictId })
-                      .then(res => {
-                        this.$refs.pageRef.refreshList()
-                        this.$message({
-                          type: 'success',
-                          message: `删除成功!`
-                        })
-                      })
-                      .catch(err => {
-                        console.log(err)
-                      })
-                  }}
-                >
-                  <zj-button
-                    slot="reference"
-                    buttonAttributes={{
-                      size: 'mini',
-                      type: 'danger'
-                    }}
-                  >
-                    删除
-                  </zj-button>
-                </el-popconfirm>
-              ) : null}
-            </div>
-          )
-        }
-      }
-      return undefined
-    },
-	addData() {
-	  this.formDialogType = 0
-	  this.openForm()
+	computed: {
+		formItems() {
+			return [{
+				md: 24,
+				isShow: true,
+				name: 'el-input',
+				attributes: { placeholder: '请输入', disabled: true },
+				formItemAttributes: {
+					label: '所属商户',
+					prop: 'companyName',
+					rules: [...required]
+				},
+			}, {
+				md: 24,
+				isShow: true,
+				name: 'el-input',
+				attributes: { placeholder: '请输入', disabled: true },
+				formItemAttributes: {
+					label: '类型名称',
+					prop: 'dictTypeName',
+					rules: [...required]
+				},
+			}, {
+				md: 24,
+				isShow: true,
+				name: 'el-input',
+				attributes: { placeholder: '请输入' },
+				formItemAttributes: {
+					label: '字典值',
+					prop: 'dictValue',
+					rules: [...required]
+				},
+			}, {
+				md: 24,
+				isShow: true,
+				name: 'slot-component',
+				attributes: {},
+				formItemAttributes: {
+					label: '状态',
+					prop: 'status',
+					rules: [...required]
+				},
+				render: (h, { props, onInput }) => {
+					var { value } = props
+					return (
+						<el-radio-group v-model={this.formData.status}>
+							<el-radio disabled={this.formDialogType == 2} label="ON">启用</el-radio>
+							<el-radio disabled={this.formDialogType == 2} label="OFF">禁用</el-radio>
+						</el-radio-group>
+					)
+				}
+			}, {
+				md: 24,
+				isShow: true,
+				name: 'el-input',
+				attributes: { placeholder: '请输入' },
+				formItemAttributes: {
+					label: '排序',
+					prop: 'sortNum',
+					rules: []
+				},
+			}, {
+				md: 24,
+				isShow: true,
+				name: 'el-input',
+				attributes: { placeholder: '请输入备注内容', type: "textarea", rows: 3 },
+				formItemAttributes: {
+					label: '备注',
+					prop: 'remark',
+					rules: []
+				}
+			}]
+		}
 	},
-	openForm() {
-	  this.formDialog = true;
-	},
-	formCancel() {
-	  this.$refs.formRef.$refs.inlineForm.clearValidate()
-	  this.$data.formData = this.$options.data().formData
-	  this.formData.dictType = this.dictType
-	  this.formData.dictTypeName = this.dictTypeName
-	  this.formDialog = false
-	},
-	formConfirm() {
-	  this.$refs.formRef.validate((valid, invalidFields, errLabels) => {
-	    if (valid) {
-	      ([add, edit][this.formDialogType])(this.formData).then(res => {
-	        this.$message({ type: 'success', message: `${this.formDialogTitles[this.formDialogType]}成功!` })
-	        this.formCancel()
-	        this.$refs.pageRef.refreshList()
-	      })
-	    }
-	  })
-	},
-	// 下载导入模版
-	handleDownload() {
-		commonTemplateDownload({ name: '数据字典导入.xlsx' }, `${this.$route.meta.title}`).then(res => {
-		    this.$message({
-		        message: '下载成功',
-		        type: 'success'
-		    })
-		}).catch(err => {
-		    this.$message.error('下载失败')
-		})
-	},
-  }
+	methods: {
+		// 列表请求函数
+		getList(p) {
+			try {
+				var pam = JSON.parse(JSON.stringify(p))
+				if (this.dictType) {
+					pam.params.push({ "param": "a.dict_type", "compare": "=", "value": this.dictType })
+				}
+				return getDataDictionary(pam)
+			} catch (error) {
+				console.log(error)
+			}
+		},
+		// 列表导出函数
+		exportList: getDataDictionaryExport,
+		getType() {
+			getType().then(res => {
+				this.typeList = res.data
+				this.$refs.pageRef.refreshList()
+			})
+		},
+		handleNodeClick(e) {
+			this.dictType = e.dictType
+			this.formData.dictType = e.dictType
+			this.formData.dictTypeName = e.remark
+			this.dictTypeName = e.remark
+			this.$refs.pageRef.refreshList()
+		},
+		// 表格列解析渲染数据更改
+		columnParsing(item, defaultData) {
+			return defaultData
+		},
+		operation() {
+			if (true) {
+				return (h, { row, index, column }) => {
+					return (
+						<div class="operation-btns">
+							{true ? (
+								<zj-button
+									useLoading={false}
+									parameter={[row]}
+									buttonAttributes={{
+										size: 'mini',
+										type: 'primary'
+									}}
+									buttonEvents={{
+										click: (row) => {
+											this.$refs.tabPage.addTab({
+												// 对应显示的模块
+												activeKey: "detail",
+												// 唯一标识
+												key: "detail",
+												// 页签名称
+												label: "编辑",
+												// 打开时事件
+												triggerEvent: () => {
+													this.formCancel()
+													this.formDialogType = 1
+													this.$nextTick(() => {
+														this.formData = row
+													})
+												},
+												// 关闭时事件
+												closeEvent: () => {
+												}
+											})
+										}
+									}}
+								>
+									编辑
+								</zj-button>
+							) : null}
+							{true ? (
+								<el-popconfirm
+									icon="el-icon-info"
+									icon-color="red"
+									title="这是一段内容确定删除吗？"
+									onConfirm={() => {
+										del({ id: row.sysDictId })
+											.then(res => {
+												this.$refs.pageRef.refreshList()
+												this.$message({
+													type: 'success',
+													message: `删除成功!`
+												})
+											})
+											.catch(err => {
+												console.log(err)
+											})
+									}}
+								>
+									<zj-button
+										slot="reference"
+										buttonAttributes={{
+											size: 'mini',
+											type: 'danger'
+										}}
+									>
+										删除
+									</zj-button>
+								</el-popconfirm>
+							) : null}
+						</div>
+					)
+				}
+			}
+			return undefined
+		},
+		addData() {
+			this.$refs.tabPage.addTab({
+				// 对应显示的模块
+				activeKey: "add",
+				// 唯一标识
+				key: "add",
+				// 页签名称
+				label: "新增",
+				// 打开时事件
+				triggerEvent: () => {
+					this.formCancel()
+					this.formDialogType = 0
+				},
+				// 关闭时事件
+				closeEvent: () => {
+				}
+			})
+		},
+		formCancel() {
+			this.$refs?.formRef?.$refs?.inlineForm?.clearValidate();
+			this.$data.formData = this.$options.data().formData;
+			this.formData.dictType = this.dictType;
+			this.formData.dictTypeName = this.dictTypeName;
+		},
+		formConfirm(removeTab) {
+			this.$refs.formRef.validate((valid, invalidFields, errLabels) => {
+				if (valid) {
+					([add, edit][this.formDialogType])(this.formData).then(res => {
+						this.$message({
+							type: 'success',
+							message: this.formDialogTitles[this.formDialogType] + `成功!`
+						})
+						this.$refs.pageRef.refreshList();
+						removeTab('list')
+					})
+				}
+			})
+		},
+		// 下载导入模版
+		handleDownload() {
+			commonTemplateDownload({ name: '数据字典导入.xlsx' }, `${this.$route.meta.title}`).then(res => {
+				this.$message({
+					message: '下载成功',
+					type: 'success'
+				})
+			}).catch(err => {
+				this.$message.error('下载失败')
+			})
+		},
+	}
 }
 </script>
 
 <style lang="scss" scoped>
-	.title{
-		width: 120px;
-		margin: 24px 0 20px 20px;
-		padding-bottom: 10px;
-		border-bottom: 1px solid #cccccc;
-		font-weight: bold;
-	}
+.title {
+	width: 120px;
+	margin: 24px 0 20px 20px;
+	padding-bottom: 10px;
+	border-bottom: 1px solid #cccccc;
+	font-weight: bold;
+}
 </style>