<template>
<el-main>
<h1>数据字典</h1>
<div style="overflow:hidden">
<div style="float:right">
<el-button type="primary" size="small" @click="showDialog('add')">新增字典</el-button>
</div>
</div>
<!-- 表格 -->
<el-table v-loading="loading" :data="tableData" border style="width: 100%;margin-top:15px">
<el-table-column prop="id" label="字典ID" width="70" />
<el-table-column prop="dic_name" label="字典名称" width="180" />
<el-table-column prop="dic_field" label="对应字段" width="180" />
<el-table-column prop="dic_data" label="字典项">
<template slot-scope="{ row }">{{ dic_data_string(row) }} </template>
</el-table-column>
<el-table-column label="操作" width="150" fixed="right">
<template slot-scope="{ row }">
<el-button type="primary" size="mini" @click="showDialog('edit', row)">编辑</el-button>
<el-button type="danger" size="mini" @click="deleteBtn(row.id)">删除</el-button>
</template>
</el-table-column>
</el-table>
<!-- 添加/修改字典 -->
<el-dialog :title="title" :close-on-click-modal="false" :visible.sync="dialogFormVisible" width="35%" @close="dialogClosed">
<el-form ref="form" :model="form" label-width="100px" :rules="rules">
<el-form-item label="字典名称" prop="dic_name">
<el-input v-model="form.dic_name" />
</el-form-item>
<el-form-item label="对应字段" prop="dic_field">
<el-input v-model="form.dic_field" />
</el-form-item>
<el-form-item label="字典项" prop="son">
<el-row v-for="item in form.dic_data" :key="item.key" style="margin-top:10px">
<el-col :span="6" style="margin-right:15px">
<el-input
v-model="item.data_id"
placeholder="序号"
type="number"
onkeypress="return( /[\d]/.test(String.fromCharCode(event.keyCode) ) )"
/>
</el-col>
<el-col :span="12" style="margin-right:15px">
<el-input v-model="item.data_name" placeholder="名称" />
</el-col>
<el-button type="danger" size="small" @click.prevent="removeDomain(item)">删除</el-button>
</el-row>
</el-form-item>
<el-form-item>
<el-button type="success" size="small" @click="addDictionaries">新增</el-button>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="closeDialog">取 消</el-button>
<el-button type="primary" @click="submit">确 定</el-button>
</div>
</el-dialog>
</el-main>
</template>
<script>
import { dictList, addDict, editDict, deleteDict } from '@/api/dictionaries'
import { cloneDeep } from 'lodash'
export default {
name: 'Dictionaries',
data() {
return {
loading: false,
tableData: [],
dialogFormVisible: false,
title: '新增字典',
addEdit: false,
form: {
dic_data: [{data_id: '', data_name: '', }]
},
rules: {
dic_name: [{ required: true, message: '请输入数值', trigger: 'blur' }],
dic_field: [{ required: true, message: '请输入数值', trigger: 'blur' }],
},
}
},
computed: {
dic_data_string() {
return function(data) {
return data.dic_data
.map((dic) => {
return `${dic.data_id}:${dic.data_name}`
})
.join(' ')
}
},
},
created() {
this.getDictList()
},
methods: {
// 获取字典数据
async getDictList() {
this.loading = true
try {
const { code, message, data } = await dictList()
if (code !== 200) return this.$message.fail(message)
this.tableData = data
this.loading = false
} catch (err) {
throw new Error(err)
}
},
// 显示编辑/添加弹框
showDialog(type, row = { dic_data: []}) {
this.addEdit = type === 'edit'
this.dialogFormVisible = true
this.form = cloneDeep(row)
type === 'edit' ? (this.title = '编辑字典') : (this.title = '新增字典')
},
// 删除字典项
removeDomain(val) {
const index = this.form.dic_data.findIndex(item => item.data_id === val.data_id)
this.form.dic_data.splice(index, 1)
},
// 新增字典项
addDictionaries() {
this.form.dic_data.push({
dic_id: this.form.id,
id: 0,
data_id: '',
data_name: '',
})
},
// 关闭弹窗
closeDialog() {
this.dialogFormVisible = false
},
dialogClosed() {
this.$refs.form.resetFields()
},
// 提交修改/新增数据
async submit() {
this.loading = true
const flag = this.addEdit === false
const { dic_data, ...editForm } = this.form
const params = {
son: dic_data,
...editForm
}
try {
const { code, data, message } = await (flag
? addDict({ update_json: JSON.stringify(params) })
: editDict({ update_json: JSON.stringify(params) }))
if (code !== 200) return this.$message.fail(message)
this.loading = false
this.$message.success(message)
this.closeDialog()
this.getDictList()
} catch (err) {
throw new Error(err.message)
// eslint-disable-next-line no-unreachable
this.loading = false
}
},
deleteBtn(id) {
this.$confirm('此操作将永久删除该字典, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
})
.then(async () => {
this.loading = true
const { code, message, data } = await deleteDict({ id })
this.$message({
type: 'success',
message: '删除成功!',
})
this.loading = false
this.getDictList()
})
.catch(() => {
this.loading = false
this.$message({
type: 'info',
message: '已取消删除',
})
})
},
},
}
</script>
【vue 】dic_data 数据字典
于 2021-01-25 20:48:12 首次发布