修改数据来源

src/views/setting/dictionary/list/popupDetailEdit.vue

@@ -1,126 +1,142 @@
-<template>
-    <el-dialog width="600px" v-model.trim='dialogVisible' :title='title'>
-        <el-scrollbar>
-            <el-form :inline='false' :model='form' label-width='auto' class="form-one" :rules='rules' ref='formRef'>
-                <el-form-item label='名称:' class='top' prop='name'>
-                    <el-input maxlength="32" show-word-limit v-model.trim='form.name' placeholder='请输入名称'></el-input>
-                </el-form-item>
-                <el-form-item label='计算值:' class='top'>
-                    <el-input maxlength="32" show-word-limit v-model.trim='form.value' placeholder="请输入计算值"></el-input>
-                </el-form-item>
-                <el-form-item class='top' label='对应算法:' prop='algoDescribe' v-if='form.openDescribe == 1'>
-                    <el-input maxlength="32" show-word-limit v-model.trim='form.algoDescribe'
-                        placeholder='请输入数字'></el-input>
-                </el-form-item>
-                <el-form-item class='top' label='编码:' prop='code'>
-                    <el-input maxlength="32" show-word-limit v-model.trim='form.code'></el-input>
-                </el-form-item>
-                <el-form-item label='排序:' prop='sort' class='top'>
-                    <el-input maxlength="32" show-word-limit-number v-model.trim='form.sort' :min='0' />
-                </el-form-item>
-                <el-form-item v-if='form.openLevel === 1' label='事件等级:'>
-                    <el-select v-model.trim='form.level' placeholder='选择开启等级'>
-                        <el-option v-for='item in EventOpenLevel' :key='item.value' :label='item.label'
-                            :value='item.value'>
-                        </el-option>
-                    </el-select>
-                </el-form-item>
-            </el-form>
-        </el-scrollbar>
-
-        <template #footer>
-            <span class='dialog-footer'>
-                <el-button @click='dialogVisible = false'>取消</el-button>
-                <el-button type='primary' @click='submit'>确认</el-button>
-            </span>
-        </template>
-    </el-dialog>
-</template>
-<script lang='ts' setup>
-import { ref, inject } from 'vue'
-import { reactive } from 'vue'
-import TableStore from '@/utils/tableStore'
-import { ElMessage } from 'element-plus'
-import { add, update } from '@/api/user-boot/role'
-import { useAdminInfo } from '@/stores/adminInfo'
-import { dictDataAdd, dictDataUpdate } from '@/api/system-boot/dicData'
-
-defineOptions({
-    name: 'diction/list/detail/popupDetailEdit'
-})
-const adminInfo = useAdminInfo()
-const tableStore = inject('tableStore') as TableStore
-const formRef = ref()
-// do not use same name with ref
-const form = reactive({
-    algoDescribe: '',
-    code: '',
-    level: 0,
-    name: '',
-    value: '',
-    sort: 100,
-    typeId: '',
-    openLevel: 0,
-    openDescribe: 0,
-    typeName: '',
-    id: ''
-})
-const EventOpenLevel = [
-    { value: 0, label: '普通' },
-    { value: 1, label: '中等' },
-    { value: 2, label: '严重' }
-]
-const rules = {
-    algoDescribe: [
-        { required: false, message: '对应算法不能为空', trigger: 'blur' },
-        {
-            pattern: /^\d+$|^\d+[.]?\d+$/,
-            message: '请您数字对应算法',
-            trigger: 'blur'
-        }
-    ],
-    name: [
-        { required: true, message: '名称不能为空', trigger: 'blur' }
-    ],
-    code: [
-        { required: true, message: '编码不能为空', trigger: 'blur' }
-    ],
-    sort: [
-        { required: true, message: '排序不能为空', trigger: 'blur' }
-    ]
-}
-const dialogVisible = ref(false)
-const title = ref('新增')
-const open = (text: string, data: anyObj) => {
-    dialogVisible.value = true
-    if (text === '编辑') {
-        for (let key in form) {
-            form[key] = data[key] === '/' ? '' : data[key]
-        }
-    } else if (text === '新增') {
-        for (let key in form) {
-            form[key] = ''
-        }
-        form.level = 0
-        form.sort = 100
-        form.typeId = data.typeId
-        form.openLevel = data.openLevel
-        form.typeName = data.typeName
-        form.openDescribe = data.openDescribe
-    }
-    title.value = form.typeName + text
-}
-const submit = async () => {
-    await formRef.value.validate()
-    if (form.id) {
-        await dictDataUpdate(form)
-    } else {
-        await dictDataAdd(form)
-    }
-    ElMessage.success('保存成功')
-    tableStore.index()
-    dialogVisible.value = false
-}
-
-defineExpose({ open })
-</script>
+<template>
+    <el-dialog width="600px" v-model.trim="dialogVisible" :title="title">
+        <el-scrollbar>
+            <el-form :inline="false" :model="form" label-width="auto" class="form-one" :rules="rules" ref="formRef">
+                <el-form-item label="名称:" class="top" prop="name">
+                    <el-input
+                        maxlength="32"
+                        show-word-limit
+                        v-model.trim="form.name"
+                        placeholder="请输入名称"
+                    ></el-input>
+                </el-form-item>
+                <el-form-item label="计算值:" class="top">
+                    <el-input
+                        maxlength="32"
+                        show-word-limit
+                        v-model.trim="form.value"
+                        placeholder="请输入计算值"
+                    ></el-input>
+                </el-form-item>
+                <el-form-item class="top" label="对应算法:" prop="algoDescribe" v-if="form.openDescribe == 1">
+                    <el-input
+                        maxlength="32"
+                        show-word-limit
+                        v-model.trim="form.algoDescribe"
+                        placeholder="请输入数字"
+                    ></el-input>
+                </el-form-item>
+                <el-form-item class="top" label="编码:" prop="code">
+                    <el-input
+                        maxlength="32"
+                        show-word-limit
+                        v-model.trim="form.code"
+                        placeholder="请输入编码"
+                    ></el-input>
+                </el-form-item>
+                <el-form-item label="排序:" prop="sort" class="top">
+                    <el-input maxlength="32" show-word-limit-number v-model.trim="form.sort" :min="0" />
+                </el-form-item>
+                <el-form-item v-if="form.openLevel === 1" label="事件等级:">
+                    <el-select v-model.trim="form.level" placeholder="选择开启等级">
+                        <el-option
+                            v-for="item in EventOpenLevel"
+                            :key="item.value"
+                            :label="item.label"
+                            :value="item.value"
+                        ></el-option>
+                    </el-select>
+                </el-form-item>
+            </el-form>
+        </el-scrollbar>
+
+        <template #footer>
+            <span class="dialog-footer">
+                <el-button @click="dialogVisible = false">取消</el-button>
+                <el-button type="primary" @click="submit">确认</el-button>
+            </span>
+        </template>
+    </el-dialog>
+</template>
+<script lang="ts" setup>
+import { ref, inject } from 'vue'
+import { reactive } from 'vue'
+import TableStore from '@/utils/tableStore'
+import { ElMessage } from 'element-plus'
+import { add, update } from '@/api/user-boot/role'
+import { useAdminInfo } from '@/stores/adminInfo'
+import { dictDataAdd, dictDataUpdate } from '@/api/system-boot/dicData'
+
+defineOptions({
+    name: 'diction/list/detail/popupDetailEdit'
+})
+const adminInfo = useAdminInfo()
+const tableStore = inject('tableStore') as TableStore
+const formRef = ref()
+// do not use same name with ref
+const form = reactive({
+    algoDescribe: '',
+    code: '',
+    level: 0,
+    name: '',
+    value: '',
+    sort: 100,
+    typeId: '',
+    openLevel: 0,
+    openDescribe: 0,
+    typeName: '',
+    id: ''
+})
+const EventOpenLevel = [
+    { value: 0, label: '普通' },
+    { value: 1, label: '中等' },
+    { value: 2, label: '严重' }
+]
+const rules = {
+    algoDescribe: [
+        { required: false, message: '请输入对应算法', trigger: 'blur' },
+        {
+            pattern: /^\d+$|^\d+[.]?\d+$/,
+            message: '请您数字对应算法',
+            trigger: 'blur'
+        }
+    ],
+    name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
+    code: [{ required: true, message: '请输入编码', trigger: 'blur' }],
+    sort: [{ required: true, message: '请输入排序', trigger: 'blur' }]
+}
+const dialogVisible = ref(false)
+const title = ref('新增')
+const open = (text: string, data: anyObj) => {
+    dialogVisible.value = true
+    if (text === '编辑') {
+        for (let key in form) {
+            form[key] = data[key] === '/' ? '' : data[key]
+        }
+    } else if (text === '新增') {
+        for (let key in form) {
+            form[key] = ''
+        }
+        form.level = 0
+        form.sort = 100
+        form.typeId = data.typeId
+        form.openLevel = data.openLevel
+        form.typeName = data.typeName
+        form.openDescribe = data.openDescribe
+    }
+    title.value = form.typeName + text
+}
+const submit = async () => {
+    await formRef.value.validate()
+    if (form.id) {
+        await dictDataUpdate(form)
+    } else {
+        await dictDataAdd(form)
+    }
+    ElMessage.success('保存成功')
+    tableStore.index()
+    dialogVisible.value = false
+}
+
+defineExpose({ open })
+</script>

src/views/setting/dictionary/list/popupEdit.vue

@@ -1,110 +1,111 @@
-<template>
-    <el-dialog width='600px' v-model.trim='dialogVisible' :title='title'>
-        <el-scrollbar>
-            <el-form :inline='false' :model='form' label-width='auto' class="form-one" :rules='rules' ref='formRef'>
-                <el-form-item label='名称' prop='name'>
-                    <el-input maxlength="32" show-word-limit v-model.trim='form.name' placeholder="请输入字典名称"></el-input>
-                </el-form-item>
-                <el-form-item label='编码' class='top' prop='code'>
-                    <el-input maxlength="32" show-word-limit v-model.trim='form.code' placeholder="请输入字典编码"></el-input>
-                </el-form-item>
-
-                <el-form-item label='排序' class='top' prop='sort'>
-                    <el-input maxlength="32" show-word-limit-number v-model.trim="form.sort" :min="0" />
-                </el-form-item>
-                <el-form-item label='开启等级' class='top'>
-                    <el-select v-model.trim='form.openLevel' placeholder='选择开启等级'>
-                        <el-option v-for='item in OpenLevel' :key='item.value' :label='item.label' :value='item.value'>
-                        </el-option>
-                    </el-select>
-                </el-form-item>
-                <el-form-item label='开启算法' class='top'>
-                    <el-select v-model.trim='form.openDescribe' placeholder='选择开启算法'>
-                        <el-option v-for='item in OpenDescribe' :key='item.value' :label='item.label'
-                            :value='item.value'>
-                        </el-option>
-                    </el-select>
-                </el-form-item>
-                <el-form-item label='字典描述' class='top'>
-                    <el-input maxlength="300" show-word-limit v-model.trim='form.remark' placeholder='请输入字典描述'
-                        type='textarea' :rows='2'></el-input>
-                </el-form-item>
-            </el-form>
-        </el-scrollbar>
-
-        <template #footer>
-            <span class='dialog-footer'>
-                <el-button @click='dialogVisible = false'>取消</el-button>
-                <el-button type='primary' @click='submit'>确认</el-button>
-            </span>
-        </template>
-    </el-dialog>
-</template>
-<script lang='ts' setup>
-import { ref, inject } from 'vue'
-import { reactive } from 'vue'
-import TableStore from '@/utils/tableStore'
-import { ElMessage } from 'element-plus'
-import { useAdminInfo } from '@/stores/adminInfo'
-import { dictTypeAdd, dictTypeUpdate } from '@/api/system-boot/dictType'
-
-const adminInfo = useAdminInfo()
-const tableStore = inject('tableStore') as TableStore
-const OpenLevel = [
-    { value: 0, label: '不开启' },
-    { value: 1, label: '开启' }
-]
-const OpenDescribe = [
-    { value: 0, label: '不开启' },
-    { value: 1, label: '开启' }
-]
-const formRef = ref()
-const form = reactive({
-    openLevel: 0,
-    openDescribe: 0,
-    remark: '',
-    name: '',
-    code: '',
-    sort: 100,
-    id: ''
-})
-const rules = {
-    name: [{ required: true, message: '不能为空', trigger: 'blur' }],
-    sort: [{ required: true, message: '不能为空', trigger: 'blur' }],
-    code: [{ required: true, message: '不能为空', trigger: 'blur' }]
-}
-const dialogVisible = ref(false)
-const title = ref('新增字典类型')
-const open = (text: string, data?: anyObj) => {
-    title.value = text
-    dialogVisible.value = true
-    if (data) {
-        for (let key in form) {
-            form[key] = data[key]
-        }
-    } else {
-        for (let key in form) {
-            form[key] = ''
-        }
-        form.openLevel = 0
-        form.openDescribe = 0
-        form.sort = 100
-    }
-}
-const submit = async () => {
-    formRef.value.validate(async (valid: boolean) => {
-        if (valid) {
-            if (form.id) {
-                await dictTypeUpdate(form)
-            } else {
-                await dictTypeAdd(form)
-            }
-            ElMessage.success('保存成功')
-            tableStore.index()
-            dialogVisible.value = false
-        }
-    })
-}
-
-defineExpose({ open })
-</script>
+<template>
+    <el-dialog width='600px' v-model.trim='dialogVisible' :title='title'>
+        <el-scrollbar>
+            <el-form :inline='false' :model='form' label-width='auto' class="form-one" :rules='rules' ref='formRef'>
+                <el-form-item label='名称' prop='name'>
+                    <el-input maxlength="32" show-word-limit v-model.trim='form.name' placeholder="请输入字典名称"></el-input>
+                </el-form-item>
+                <el-form-item label='编码' class='top' prop='code'>
+                    <el-input maxlength="32" show-word-limit v-model.trim='form.code' placeholder="请输入字典编码"></el-input>
+                </el-form-item>
+
+                <el-form-item label='排序' class='top' prop='sort'>
+                    <el-input maxlength="32" show-word-limit-number v-model.trim="form.sort" :min="0" />
+                </el-form-item>
+                <el-form-item label='开启等级' class='top'>
+                    <el-select v-model.trim='form.openLevel' placeholder='选择开启等级'>
+                        <el-option v-for='item in OpenLevel' :key='item.value' :label='item.label' :value='item.value'>
+                        </el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label='开启算法' class='top'>
+                    <el-select v-model.trim='form.openDescribe' placeholder='选择开启算法'>
+                        <el-option v-for='item in OpenDescribe' :key='item.value' :label='item.label'
+                            :value='item.value'>
+                        </el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label='字典描述' class='top'>
+                    <el-input maxlength="300" show-word-limit v-model.trim='form.remark' placeholder='请输入字典描述'
+                        type='textarea' :rows='2'></el-input>
+                </el-form-item>
+            </el-form>
+        </el-scrollbar>
+
+        <template #footer>
+            <span class='dialog-footer'>
+                <el-button @click='dialogVisible = false'>取消</el-button>
+                <el-button type='primary' @click='submit'>确认</el-button>
+            </span>
+        </template>
+    </el-dialog>
+</template>
+<script lang='ts' setup>
+import { ref, inject } from 'vue'
+import { reactive } from 'vue'
+import TableStore from '@/utils/tableStore'
+import { ElMessage } from 'element-plus'
+import { useAdminInfo } from '@/stores/adminInfo'
+import { dictTypeAdd, dictTypeUpdate } from '@/api/system-boot/dictType'
+
+const adminInfo = useAdminInfo()
+const tableStore = inject('tableStore') as TableStore
+const OpenLevel = [
+    { value: 0, label: '不开启' },
+    { value: 1, label: '开启' }
+]
+const OpenDescribe = [
+    { value: 0, label: '不开启' },
+    { value: 1, label: '开启' }
+]
+const formRef = ref()
+const form = reactive({
+    openLevel: 0,
+    openDescribe: 0,
+    remark: '',
+    name: '',
+    code: '',
+    sort: 100,
+    id: ''
+})
+const rules = {
+    name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
+    sort: [{ required: true, message: '请输入排序', trigger: 'blur' }],
+    code: [{ required: true, message: '请输入编码', trigger: 'blur' }]
+}
+const dialogVisible = ref(false)
+const title = ref('新增字典类型')
+const open = (text: string, data?: anyObj) => {
+    formRef.value?.resetFields()
+    title.value = text
+    dialogVisible.value = true
+    if (data) {
+        for (let key in form) {
+            form[key] = data[key]
+        }
+    } else {
+        for (let key in form) {
+            form[key] = ''
+        }
+        form.openLevel = 0
+        form.openDescribe = 0
+        form.sort = 100
+    }
+}
+const submit = async () => {
+    formRef.value.validate(async (valid: boolean) => {
+        if (valid) {
+            if (form.id) {
+                await dictTypeUpdate(form)
+            } else {
+                await dictTypeAdd(form)
+            }
+            ElMessage.success('保存成功')
+            tableStore.index()
+            dialogVisible.value = false
+        }
+    })
+}
+
+defineExpose({ open })
+</script>

src/views/setting/dictionary/tree/popupForm.vue

@@ -1,19 +1,41 @@
 <template>
     <el-dialog class="cn-operate-dialog" width="500px" v-model.trim="dialogVisible" :title="title">
         <el-scrollbar>
-            <el-form :inline="false" :model="form" label-width="120px" :rules="rules">
+            <el-form :inline="false" :model="form" ref="formRef" label-width="120px" :rules="rules">
                 <el-form-item label="字典名称:" prop="name">
-                    <el-input maxlength="32" show-word-limit v-model.trim="form.name" placeholder="请输入字典名称"></el-input>
-                </el-form-item>
-                <el-form-item label="序号:" prop="sort" class="top">
-                    <el-input maxlength="32" show-word-limit v-model.trim="form.sort" placeholder="请输入序号"></el-input>
+                    <el-input
+                        maxlength="32"
+                        show-word-limit
+                        v-model.trim="form.name"
+                        placeholder="请输入字典名称"
+                    ></el-input>
                 </el-form-item>
+
                 <el-form-item label="编码:" prop="code" class="top">
-                    <el-input maxlength="32" show-word-limit v-model.trim="form.code" placeholder="请输入字典编码"></el-input>
+                    <el-input
+                        maxlength="32"
+                        show-word-limit
+                        v-model.trim="form.code"
+                        placeholder="请输入字典编码"
+                    ></el-input>
+                </el-form-item>
+                <el-form-item label="排序:" prop="sort" class="top">
+                    <el-input
+                        maxlength="32"
+                        show-word-limit
+                        v-model.number="form.sort"
+                        placeholder="请输入排序"
+                    ></el-input>
                 </el-form-item>
                 <el-form-item label="描述:" class="top">
-                    <el-input maxlength="32" :autosize="{ minRows: 2, maxRows: 4 }" type="textarea" show-word-limit v-model.trim="form.remark"
-                        placeholder="请输入字典描述"></el-input>
+                    <el-input
+                        maxlength="32"
+                        :autosize="{ minRows: 2, maxRows: 4 }"
+                        type="textarea"
+                        show-word-limit
+                        v-model.trim="form.remark"
+                        placeholder="请输入字典描述"
+                    ></el-input>
                 </el-form-item>
             </el-form>
         </el-scrollbar>
@@ -46,14 +68,16 @@ const form = reactive({
     pid: 0,
     id: ''
 })
+const formRef = ref()
 const rules = {
-    name: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
-    sort: [{ required: true, message: '排序不能为空', trigger: 'blur' }],
-    code: [{ required: true, message: '编码不能为空', trigger: 'blur' }]
+    name: [{ required: true, message: '请选择名称', trigger: 'blur' }],
+    sort: [{ required: true, message: '请选择排序', trigger: 'blur' }],
+    code: [{ required: true, message: '请选择编码', trigger: 'blur' }]
 }
 const dialogVisible = ref(false)
 const title = ref('新增菜单')
 const open = (text: string, data?: anyObj) => {
+    formRef.value?.resetFields()
     title.value = text
     dialogVisible.value = true
     if (data) {
@@ -70,14 +94,18 @@ const open = (text: string, data?: anyObj) => {
     }
 }
 const submit = async () => {
-    if (form.id) {
-        await dicUpdate(form)
-    } else {
-        await dicAdd(form)
-    }
-    ElMessage.success('保存成功')
-    tableStore.index()
-    dialogVisible.value = false
+    formRef.value.validate(async (valid: any) => {
+        if (valid) {
+            if (form.id) {
+                await dicUpdate(form)
+            } else {
+                await dicAdd(form)
+            }
+            ElMessage.success('保存成功')
+            tableStore.index()
+            dialogVisible.value = false
+        }
+    })
 }
 
 defineExpose({ open })