ClientApps/pqs-9100_client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改字典数据为弹窗、表单验证

Browse Source
This commit is contained in:
caozehui
2024-10-29 09:23:43 +08:00
parent eeeb2fc62f
commit ff892d9e24
3 changed files with 130 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
frontend/src/routers/modules/staticRouter.ts
View File

@@ -116,20 +116,6 @@ export const staticRouter: RouteRecordRaw[] = [
component: () => import("@/components/ErrorMessage/404.vue"),
},
],
},
{
path: "/system/dict-data/:code/:id(\\d+)",
name: "dictData",
component: () => import("@/views/system/dict/data.vue"),
meta: {
title: "字典数据",
icon: "List",
isLink: "",
isHide: false,
isFull: false,
isAffix: false,
isKeepAlive: false,
},
}
],
},

92
frontend/src/views/system/dict/data.vue
View File

@@ -1,4 +1,6 @@
<template>
<el-dialog class='table-box' v-model='dialogVisible1' top='114px'
:style="{ height: height, maxHeight: height, overflow: 'hidden' }" :title='title1' :width='width' :modal='false'>
<div class="table-box">
<ProTable :columns="columns" :data="data">
<template #tableHeader="scope">
@@ -17,24 +19,24 @@
</template>
</ProTable>
</div>
<el-dialog v-model="dialogVisible" :title="dialogType === '新增' ? '新增字典数据' : '编辑字典数据'" v-bind="dialogSmall">
</el-dialog>
<el-dialog v-model="dialogVisible2" :title="dialogType2 === '新增' ? '新增字典数据' : '编辑字典数据'" v-bind="dialogSmall">
<div>
<el-form :model="dialogForm">
<el-form :model="dialogForm" ref="dialogFormRef" :rules="rules">
<el-form-item label="字典类型编码" :label-width="100">
<el-input :value="route.params.code" disabled />
</el-form-item>
<el-form-item label="编码" :label-width="100">
<el-input v-model="dialogForm.code" placeholder="请输入" autocomplete="off" />
</el-form-item>
<el-form-item label="名称" :label-width="100">
<el-form-item label="名称" :label-width="100" prop="name">
<el-input v-model="dialogForm.name" placeholder="请输入" autocomplete="off" />
</el-form-item>
<el-form-item label="值" :label-width="100">
<el-form-item label="编码" :label-width="100" prop="code">
<el-input v-model="dialogForm.code" placeholder="请输入" autocomplete="off" />
</el-form-item>
<el-form-item label="值" :label-width="100" prop="value">
<el-input v-model="dialogForm.value" placeholder="请输入" autocomplete="off" />
</el-form-item>
<el-form-item label="显示排序" :label-width="100">
<el-input-number v-model="dialogForm.sort"/>
<el-input-number v-model="dialogForm.sort" />
</el-form-item>
</el-form>
</div>
@@ -60,7 +62,9 @@ import { useDictStore } from '@/stores/modules/dict'
import { useHandleData } from '@/hooks/useHandleData'
import { useDownload } from '@/hooks/useDownload'
import { dictDataList } from '@/api/system/dict/dictExample'
import { FormItemRule } from 'element-plus'
import {
getDictDataList,
updateDictData,
addDictData,
batchAddDictData,
@@ -74,6 +78,10 @@ const dictStore = useDictStore()
const data = dictDataList
const proTable = ref<ProTableInstance>()
const dictTypeId = ref('')
const dialogVisible1 = ref(false)
const title1 = ref('')
const dialogFormRef = ref()
const columns = reactive<ColumnProps<Dict.ResDictData>[]>([
{ type: 'selection', fixed: 'left', width: 70 },
@@ -102,7 +110,7 @@ const columns = reactive<ColumnProps<Dict.ResDictData>[]>([
{
prop: 'level',
label: '事件等级',
width: 150,
width: 120,
render: scope => {
return (
<>
@@ -152,27 +160,54 @@ const columns = reactive<ColumnProps<Dict.ResDictData>[]>([
width: 330
},
])
const rules: Ref<Record<string, Array<FormItemRule>>> = ref({
name: [{ required: true, message: '类型名称必填！', trigger: 'blur' }],
code: [{ required: true, message: '类型编码必填！', trigger: 'blur' }],
value: [{ required: true, message: '类型值必填！', trigger: 'blur' }],
})
const { dialogVisible, dialogType, dialogForm } = useCount();
const { dialogVisible2, dialogType2, dialogForm } = useCount();
function useCount() {
const dialogVisible = ref(false)
const dialogType = ref('新增')
const dialogVisible2 = ref(false)
const dialogType2 = ref('新增')
const dialogForm = ref({
id: "",
name: "",
code: "",
value: "",
sort:100,
sort: 100,
})
return { dialogVisible, dialogType, dialogForm };
return { dialogVisible2, dialogType2, dialogForm };
}
const props = defineProps({
width: {
type: String,
default: '800px',
},
height: {
type: String,
default: '744px',
},
})
const open = (textTitle: string, id: string) => {
dialogVisible1.value = true
title1.value = textTitle
dictTypeId.value = id
// getDictDataList({ dictTypeId: id }).then(res => {
// data.value = res.data
// }
}
defineExpose({ open })
// 打开 drawer(新增、查看、编辑)
const openDrawer = (title: string, row: Partial<Dict.ResDictType> = {}) => {
dialogVisible.value = true
dialogType.value = title
dialogVisible2.value = true
dialogType2.value = title
if (title === '编辑') {
row && (dialogForm.value = row as { id: string; name: string; code: string; value: string; sort: number; state: number; });
}
@@ -211,26 +246,37 @@ const handleDelete = async (params: Dict.ResDictType) => {
}
const close = () => {
dialogVisible.value = false
dialogVisible2.value = false
//清空dialogForm中的值
dialogForm.value = {
id: "",
name: "",
code: "",
value: "",
sort:100
sort: 100
}
dialogFormRef.value?.resetFields()
}
const save = async () => {
if (dialogType.value === '新增') {
const save = () => {
try {
dialogFormRef.value?.validate(async (valid: boolean) => {
if (valid) {
let params = JSON.stringify(dialogForm.value)
console.log(params)
if (dialogType2.value === '新增') {
await useHandleData(addDictData, dialogForm.value, '新增字典数据')
} else {
await useHandleData(updateDictData, dialogForm.value, '编辑字典数据')
}
close()
proTable.value?.getTableList()
} else {
ElMessage.error('表单验证失败！')
}
})
} catch (err) {
console.error('验证过程中出现错误', err)
}
}
</script>
<style lang="scss" scoped></style>

45
frontend/src/views/system/dict/index.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="table-box">
<div class="table-box" ref='popupBaseView'>
<ProTable :columns="columns" :data="data">
<template #tableHeader="scope">
<el-button type="primary" :icon="CirclePlus" @click="openDrawer('新增')">新增</el-button>
@@ -20,11 +20,11 @@
<el-dialog v-model="dialogVisible" :title="dialogType === '新增' ? '新增字典类型' : '编辑字典类型'" v-bind="dialogSmall">
<div>
<el-form :model="dialogForm">
<el-form-item label="类型名称" :label-width="100">
<el-form :model="dialogForm" ref="dialogFormRef" :rules="rules">
<el-form-item label="类型名称" :label-width="100" prop="name">
<el-input v-model="dialogForm.name" placeholder="请输入" autocomplete="off" />
</el-form-item>
<el-form-item label="类型编码" :label-width="100">
<el-form-item label="类型编码" :label-width="100" prop="code">
<el-input v-model="dialogForm.code" placeholder="请输入" autocomplete="off" />
</el-form-item>
<el-form-item label="显示排序" :label-width="100">
@@ -44,20 +44,23 @@
</div>
</template>
</el-dialog>
<Data :width='viewWidth' :height='viewHeight' ref='openView' />
</template>
<script setup lang="tsx" name="dict">
import { CirclePlus, Delete, EditPen, Download, View } from '@element-plus/icons-vue'
import { Dict } from '@/api/system/dict/interface'
import { ProTableInstance, ColumnProps } from '@/components/ProTable/interface'
import Data from '@/views/system/dict/data.vue'
// import ImportExcel from '@/components/ImportExcel/index.vue'
import { dialogSmall } from '@/utils/elementBind'
import { useDictStore } from '@/stores/modules/dict'
import { useHandleData } from '@/hooks/useHandleData'
import { useViewSize } from '@/hooks/useViewSize'
// import { useAuthButtons } from '@/hooks/useAuthButtons'
import { useDownload } from '@/hooks/useDownload'
import { useRouter } from 'vue-router'
import { dictTypeList } from '@/api/system/dict/dictExample'
import { FormItemRule } from 'element-plus'
import {
getDictTypeList,
addDictType,
@@ -69,10 +72,12 @@ import {
const dictStore = useDictStore()
// const BUTTONS = useAuthButtons()
const router = useRouter()
const data = dictTypeList
const { popupBaseView, viewWidth, viewHeight } = useViewSize()
const proTable = ref<ProTableInstance>()
const openView = ref()
const dialogFormRef = ref()
const columns = reactive<ColumnProps<Dict.ResDictType>[]>([
{ type: 'selection', fixed: 'left', width: 70 },
@@ -134,6 +139,11 @@ const columns = reactive<ColumnProps<Dict.ResDictType>[]>([
},
])
const rules: Ref<Record<string, Array<FormItemRule>>> = ref({
name: [{ required: true, message: '类型名称必填！', trigger: 'blur' }],
code: [{ required: true, message: '类型编码必填！', trigger: 'blur' }]
})
const { dialogVisible, dialogType, dialogForm } = useCount();
function useCount() {
const dialogVisible = ref(false)
@@ -143,7 +153,7 @@ function useCount() {
id: "",
name: "",
code: "",
sort:100,
sort: 100,
remark: ""
})
@@ -181,7 +191,7 @@ const handleDelete = async (params: Dict.ResDictType) => {
//查看字典类型包含的字典数据
const toDictData = (row: Dict.ResDictType) => {
router.push({ name: 'dictData', params: { id: row.id, code: row.code } })
openView.value.open('字典数据', row.id)
}
const close = () => {
@@ -191,12 +201,18 @@ const close = () => {
id: "",
name: "",
code: "",
sort:100,
sort: 100,
remark: ""
}
dialogFormRef.value?.resetFields()
}
const save =async () => {
const save = () => {
try {
dialogFormRef.value?.validate(async (valid: boolean) => {
if (valid) {
let params = JSON.stringify(dialogForm.value)
console.log(params)
if (dialogType.value === '新增') {
await useHandleData(addDictType, dialogForm.value, '新增字典类型')
} else {
@@ -204,7 +220,12 @@ const save =async () => {
}
close()
proTable.value?.getTableList()
} else {
ElMessage.error('表单验证失败！')
}
})
} catch (err) {
console.error('验证过程中出现错误', err)
}
}
</script>
<style lang="scss" scoped></style>