字典数据前后端接口编写、调试

frontend/src/views/system/dictionary/dictData/components/dataPopup.vue

@@ -1,6 +1,130 @@
 <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="dictTypeCode" 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, dictTypeCode} = useMetaInfo();
+
+function useMetaInfo() {
+  const dialogVisible = ref(false)
+  const titleType = ref('add')
+  const dictTypeCode = ref('')
+
+  const formContent = ref<Dict.ResDictData>({
+    id: "",
+    typeId: "",
+    name: "",
+    code: "",
+    value: "",
+    dictValue: "",
+    sort: 100,
+    state: 1,
+  })
+
+  return {dialogVisible, titleType, formContent, dictTypeCode};
+}
+
+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, code: string, data: Dict.ResDictData) => {
+  resetFormContent()
+
+  titleType.value = sign
+  formContent.value.typeId = typeId
+  dictTypeCode.value = code
+  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>