130 lines
3.8 KiB
Vue
130 lines
3.8 KiB
Vue
<template>
|
|
<el-dialog v-model="dialogVisible" :title="dialogTitle"
|
|
v-bind="dialogSmall">
|
|
<div>
|
|
<el-form :model="formContent" ref="dialogFormRef" :rules="rules">
|
|
<el-form-item label="字典类型" :label-width="100">
|
|
<el-input :value="dictTypeName" disabled/>
|
|
</el-form-item>
|
|
<el-form-item label="名称" :label-width="100" prop="name">
|
|
<el-input v-model="formContent.name" placeholder="请输入" autocomplete="off"/>
|
|
</el-form-item>
|
|
<el-form-item label="编码" :label-width="100" prop="code">
|
|
<el-input v-model="formContent.code" placeholder="请输入" autocomplete="off"/>
|
|
</el-form-item>
|
|
<el-form-item label="值" :label-width="100" prop="dictValue">
|
|
<el-input v-model="formContent.dictValue" placeholder="请输入" autocomplete="off"/>
|
|
</el-form-item>
|
|
<el-form-item label="显示排序" :label-width="100">
|
|
<el-input-number v-model="formContent.sort"/>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
<template #footer>
|
|
<div class="dialog-footer">
|
|
<el-button @click="close()">取消</el-button>
|
|
<el-button type="primary" @click="save()">
|
|
保存
|
|
</el-button>
|
|
</div>
|
|
</template>
|
|
</el-dialog>
|
|
</template>
|
|
<script lang="tsx" setup>
|
|
import {dialogSmall} from "@/utils/elementBind";
|
|
import {addDictData, updateDictData} from "@/api/system/dictionary/dictData";
|
|
import {Dict} from "@/api/system/dictionary/interface";
|
|
import {FormItemRule} from "element-plus";
|
|
import type {Ref} from "vue";
|
|
|
|
const rules: Ref<Record<string, Array<FormItemRule>>> = ref({
|
|
name: [{required: true, message: '类型名称必填！', trigger: 'blur'}],
|
|
code: [{required: true, message: '类型编码必填！', trigger: 'blur'}],
|
|
dictValue: [{required: true, message: '类型值必填！', trigger: 'blur'}],
|
|
})
|
|
|
|
const dialogFormRef = ref()
|
|
const {dialogVisible, titleType, formContent, dictTypeName} = useMetaInfo();
|
|
|
|
function useMetaInfo() {
|
|
const dialogVisible = ref(false)
|
|
const titleType = ref('add')
|
|
const dictTypeName = ref('')
|
|
|
|
const formContent = ref<Dict.ResDictData>({
|
|
id: "",
|
|
typeId: "",
|
|
name: "",
|
|
code: "",
|
|
value: "",
|
|
dictValue: "",
|
|
sort: 100,
|
|
state: 1,
|
|
})
|
|
|
|
return {dialogVisible, titleType, formContent, dictTypeName};
|
|
}
|
|
|
|
let dialogTitle = computed(() => {
|
|
return titleType.value === 'add' ? '新增字典类型' : '编辑字典类型'
|
|
})
|
|
|
|
const resetFormContent = () => {
|
|
formContent.value = {
|
|
id: "",
|
|
typeId: "",
|
|
name: "",
|
|
code: "",
|
|
value: "",
|
|
sort: 100,
|
|
state: 1,
|
|
}
|
|
}
|
|
|
|
const close = () => {
|
|
dialogVisible.value = false
|
|
resetFormContent()
|
|
dialogFormRef.value?.resetFields()
|
|
}
|
|
const open = (sign: string, typeId: string, name: string, data: Dict.ResDictData) => {
|
|
resetFormContent()
|
|
|
|
titleType.value = sign
|
|
formContent.value.typeId = typeId
|
|
dictTypeName.value = name
|
|
dialogVisible.value = true
|
|
if (data.id) {
|
|
formContent.value = {...data}
|
|
formContent.value.dictValue = data.value
|
|
}
|
|
}
|
|
|
|
const save = () => {
|
|
try {
|
|
dialogFormRef.value?.validate(async (valid: boolean) => {
|
|
if (valid) {
|
|
formContent.value.value = formContent.value.dictValue
|
|
console.log(formContent.value)
|
|
if (formContent.value.id) {
|
|
await updateDictData(formContent.value)
|
|
} else {
|
|
await addDictData(formContent.value)
|
|
}
|
|
ElMessage.success({message: `${dialogTitle.value}成功！`})
|
|
close()
|
|
await props.refreshTable!()
|
|
} else {
|
|
ElMessage.error('表单验证失败！')
|
|
}
|
|
})
|
|
} catch (err) {
|
|
console.error('验证过程中出现错误', err)
|
|
}
|
|
}
|
|
|
|
// 对外映射
|
|
defineExpose({open})
|
|
const props = defineProps<{
|
|
refreshTable: (() => Promise<void>) | undefined;
|
|
}>()
|
|
</script> |