zfire-newmall-admin/src/views/setting/dataDictionary/index.vue

<template>
	<zj-tab-page ref="tabPage" :defaultActives="[{ key: 'list', label: $route.meta.title+'-列表', 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>
import TemplatePage from '@/components/template/template-page-1.vue'
import AddDataDictionary from './addDataDictionary.vue'
import import_mixin from '@/components/template/import_mixin.js'
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: ["新增", "编辑", "详情"],
			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)
			}
		},
		// 列表导出函数
		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;
}
</style>