|
@@ -1,46 +1,118 @@
|
|
|
<template>
|
|
|
- <m-dialog :title="`${itemData ? '编辑' : '新增'}字典`" ref="dialog">
|
|
|
- <m-form :items="formItems" v-model="formValues"></m-form>
|
|
|
+ <m-dialog :title="`${itemData ? '编辑' : '新增'}字典`" ref="dialog" @sure="onSure">
|
|
|
+ <m-form ref="form" :items="formItems" v-model="formValues" v-loading="loading">
|
|
|
+ <template #dictTitle>
|
|
|
+ <el-tag>{{ formValues.dictTitle }}</el-tag>
|
|
|
+ </template>
|
|
|
+ <template #dictCode>
|
|
|
+ <el-tag>{{ formValues.dictCode }}</el-tag>
|
|
|
+ </template>
|
|
|
+ <el-form-item label="字典配置">
|
|
|
+ <m-table
|
|
|
+ shadow="never"
|
|
|
+ clearHeader
|
|
|
+ :headers="headers"
|
|
|
+ :items="formValues.items"
|
|
|
+ >
|
|
|
+ <template #dictTitle="{ $index }">
|
|
|
+ <el-form-item :prop="`items.${$index}.dictTitle`" :rules="{ required: true, trigger: 'blur' }">
|
|
|
+ <el-input placeholder="字典项名称" v-model="formValues.items[$index].dictTitle"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </template>
|
|
|
+ <template #dictValue="{ $index }">
|
|
|
+ <el-form-item :prop="`items.${$index}.dictValue`" :rules="{ required: true, trigger: 'blur' }">
|
|
|
+ <el-input placeholder="字典项值" v-model="formValues.items[$index].dictValue"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </template>
|
|
|
+ <template #dictColor="{ $index }">
|
|
|
+ <el-form-item :prop="`items.${$index}.dictColor`" :rules="{ required: true, trigger: 'blur' }">
|
|
|
+ <el-input placeholder="色值" v-model="formValues.items[$index].dictColor"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </template>
|
|
|
+ <template #actions="{ $index }">
|
|
|
+ <m-button v-if="formValues.items.length > 1" text type="danger" size="small" @click="onRemove($index)">移除</m-button>
|
|
|
+ </template>
|
|
|
+ <div class="text-center pt-3">
|
|
|
+ <m-button icon="el-icon-plus" size="small" type="orange" @click="onAdd">添加一项</m-button>
|
|
|
+ </div>
|
|
|
+ </m-table>
|
|
|
+ </el-form-item>
|
|
|
+ </m-form>
|
|
|
</m-dialog>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import {
|
|
|
+ getDictionariesDetails
|
|
|
+} from '@/api/system'
|
|
|
export default {
|
|
|
name: 'dictionariesEdit',
|
|
|
data () {
|
|
|
return {
|
|
|
+ loading: false,
|
|
|
itemData: null,
|
|
|
- formItems: [
|
|
|
+ headers: [
|
|
|
+ { label: '字典项名称', prop: 'dictTitle' },
|
|
|
+ { label: '字典项值', prop: 'dictValue' },
|
|
|
+ { label: '色值', prop: 'dictColor' },
|
|
|
+ { label: '操作', prop: 'actions' }
|
|
|
+ ],
|
|
|
+ formValues: {}
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ formItems () {
|
|
|
+ return [
|
|
|
{
|
|
|
label: '字典名称',
|
|
|
- prop: 'name',
|
|
|
- type: 'input',
|
|
|
- options: {
|
|
|
- placeholder: '请输入字典名称'
|
|
|
- },
|
|
|
- rules: [
|
|
|
- { required: true, message: '请输入字典名称', trigger: 'blur' }
|
|
|
- ]
|
|
|
- },
|
|
|
- {
|
|
|
- label: '字典类型',
|
|
|
- prop: 'type',
|
|
|
- type: 'input',
|
|
|
- options: {
|
|
|
- placeholder: '请输入字典类型'
|
|
|
- },
|
|
|
- rules: [
|
|
|
- { required: true, message: '请输入字典类型', trigger: 'blur' }
|
|
|
- ]
|
|
|
+ prop: 'dictTitle'
|
|
|
}
|
|
|
- ],
|
|
|
- formValues: {}
|
|
|
+ ]
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
- open (item) {
|
|
|
+ async open (item) {
|
|
|
this.itemData = item ?? null
|
|
|
+ this.formValues = {
|
|
|
+ dictTitle: item?.dictTitle ?? null,
|
|
|
+ items: [
|
|
|
+ { dictTitle: null, dictValue: null, dictColor: null }
|
|
|
+ ]
|
|
|
+ }
|
|
|
this.$refs.dialog.open()
|
|
|
+ if (!item) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.loading = true
|
|
|
+ try {
|
|
|
+ const { data } = await getDictionariesDetails({
|
|
|
+ dictCode: item.dictValue
|
|
|
+ })
|
|
|
+ this.formValues.items = data.map(e => ({
|
|
|
+ dictTitle: e.dictTitle,
|
|
|
+ dictValue: e.dictValue,
|
|
|
+ dictColor: null
|
|
|
+ }))
|
|
|
+ } catch (error) {
|
|
|
+ this.$message.error(error)
|
|
|
+ } finally {
|
|
|
+ this.loading = false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onAdd () {
|
|
|
+ this.formValues.items.push({
|
|
|
+ dictTitle: null,
|
|
|
+ dictValue: null,
|
|
|
+ dictColor: null
|
|
|
+ })
|
|
|
+ },
|
|
|
+ onRemove (index) {
|
|
|
+ this.formValues.items.splice(index, 1)
|
|
|
+ },
|
|
|
+ onSure () {
|
|
|
+ this.$refs.form.validate(valid => {
|
|
|
+ console.log(valid)
|
|
|
+ })
|
|
|
}
|
|
|
}
|
|
|
}
|