refactor: 系统管理页面重构和ts类型声明优化

Former-commit-id: 40263bbb072596ada41ef33d9170841e7e66cd01

src/views/system/dict/components/DictItem.vue

@@ -1,3 +1,188 @@
+<script lang="ts">
+export default {
+  name: 'dictItem',
+};
+</script>
+
+<script setup lang="ts">
+import { onMounted, reactive, ref, toRefs, watch } from 'vue';
+import { ElForm, ElMessage, ElMessageBox } from 'element-plus';
+import {
+  DictItem,
+  DictItemFormData,
+  DictItemQueryParam,
+} from '@/types/api/system/dict';
+
+import { Dialog } from '@/types/common';
+import {
+  listPageDictItems,
+  getDictItemData,
+  addDictItem,
+  updateDictItem,
+  deleteDictItems,
+} from '@/api/system/dict';
+import { Search, Plus, Edit, Refresh, Delete } from '@element-plus/icons-vue';
+
+const props = defineProps({
+  typeCode: {
+    type: String,
+    default: () => {
+      return '';
+    },
+  },
+  typeName: {
+    type: String,
+    default: () => {
+      return '';
+    },
+  },
+});
+
+watch(
+  () => props.typeCode,
+  (value) => {
+    state.queryParams.typeCode = value;
+    state.formData.typeCode = value;
+    handleQuery();
+  }
+);
+
+const queryFormRef = ref(ElForm);
+const dataFormRef = ref(ElForm);
+
+const state = reactive({
+  loading: true,
+  // 选中ID数组
+  ids: [] as number[],
+  // 非单个禁用
+  single: true,
+  // 非多个禁用
+  multiple: true,
+  total: 0,
+  queryParams: { pageNum: 1, pageSize: 10 } as DictItemQueryParam,
+  dictItemList: [] as DictItem[],
+  dialog: { visible: false } as Dialog,
+  formData: {
+    typeCode: props.typeCode,
+    typeName: props.typeName,
+    status: 1,
+    sort: 1,
+  } as DictItemFormData,
+  rules: {
+    name: [{ required: true, message: '请输入字典项名称', trigger: 'blur' }],
+    value: [{ required: true, message: '请输入字典项值', trigger: 'blur' }],
+  },
+  localDictCode: props.typeCode,
+  localDictName: props.typeName,
+});
+
+const {
+  loading,
+  multiple,
+  queryParams,
+  dictItemList,
+  dialog,
+  formData,
+  rules,
+  total,
+} = toRefs(state);
+
+function handleQuery() {
+  if (state.queryParams.typeCode) {
+    state.loading = true;
+    listPageDictItems(state.queryParams).then(({ data }) => {
+      state.dictItemList = data.list;
+      state.total = data.total;
+      state.loading = false;
+    });
+  } else {
+    state.dictItemList = [];
+    state.total = 0;
+    state.queryParams.pageNum = 1;
+    state.loading = false;
+  }
+}
+
+function resetQuery() {
+  queryFormRef.value.resetFields();
+  handleQuery();
+}
+
+function handleSelectionChange(selection: any) {
+  state.ids = selection.map((item: any) => item.id);
+  state.single = selection.length !== 1;
+  state.multiple = !selection.length;
+}
+
+function handleAdd() {
+  if (!state.formData.typeCode) {
+    ElMessage.warning('请选择字典类型后添加数据项');
+    return;
+  }
+  state.dialog = {
+    title: '添加字典数据项',
+    visible: true,
+  };
+}
+
+function handleUpdate(row: any) {
+  state.dialog = {
+    title: '修改字典数据项',
+    visible: true,
+  };
+  const id = row.id || state.ids;
+  getDictItemData(id).then(({ data }) => {
+    state.formData = data;
+  });
+}
+
+function submitForm() {
+  dataFormRef.value.validate((isValid: boolean) => {
+    if (isValid) {
+      if (state.formData.id) {
+        updateDictItem(state.formData.id, state.formData).then(() => {
+          ElMessage.success('修改成功');
+          cancel();
+          handleQuery();
+        });
+      } else {
+        addDictItem(state.formData).then(() => {
+          ElMessage.success('新增成功');
+          cancel();
+          handleQuery();
+        });
+      }
+    }
+  });
+}
+
+function cancel() {
+  state.dialog.visible = false;
+  state.formData.id = undefined;
+  dataFormRef.value.resetFields();
+}
+
+function handleDelete(row: any) {
+  const ids = [row.id || state.ids].join(',');
+  ElMessageBox.confirm('确认删除已选中的数据项?', '警告', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+  })
+    .then(() => {
+      deleteDictItems(ids).then(() => {
+        ElMessage.success('删除成功');
+        handleQuery();
+      });
+    })
+    .catch(() => ElMessage.info('已取消删除'));
+}
+
+onMounted(() => {
+  handleQuery();
+});
+</script>
+
 <template>
   <div class="app-container">
     <!-- 搜索表单 -->
@@ -86,12 +271,15 @@
         :rules="rules"
         label-width="100px"
       >
-        <el-form-item label="字典名称"> </el-form-item>
-        <el-form-item label="字典项名称" prop="name">
-          <el-input v-model="formData.name" placeholder="请输入字典项名称" />
+        <el-form-item label="字典类型名称">{{ typeName }}</el-form-item>
+        <el-form-item label="数据项名称" prop="name">
+          <el-input
+            v-model="formData.name"
+            placeholder="请输入字典数据项名称"
+          />
         </el-form-item>
-        <el-form-item label="字典项值" prop="value">
-          <el-input v-model="formData.value" placeholder="请输入字典项值" />
+        <el-form-item label="数据项值" prop="value">
+          <el-input v-model="formData.value" placeholder="请输入字典数据项值" />
         </el-form-item>
         <el-form-item label="排序" prop="sort">
           <el-input-number
@@ -120,181 +308,3 @@
     </el-dialog>
   </div>
 </template>
-
-<script setup lang="ts">
-import { onMounted, reactive, ref, toRefs, watch } from 'vue';
-import { ElForm, ElMessage, ElMessageBox } from 'element-plus';
-import {
-  Dialog,
-  DictItem,
-  DictItemFormData,
-  DictItemQueryParam
-} from '@/types';
-import {
-  listDictItemPages,
-  getDictItemDetail,
-  addDictItem,
-  updateDictItem,
-  deleteDictItem
-} from '@/api/system/dict';
-import { Search, Plus, Edit, Refresh, Delete } from '@element-plus/icons-vue';
-
-const props = defineProps({
-  dictCode: {
-    type: String,
-    default: () => {
-      return '';
-    }
-  },
-  dictName: {
-    type: String,
-    default: () => {
-      return '';
-    }
-  }
-});
-
-watch(
-  () => props.dictCode,
-  value => {
-    state.queryParams.dictCode = value;
-    state.formData.dictCode = value;
-    handleQuery();
-  }
-);
-
-const queryFormRef = ref(ElForm);
-const dataFormRef = ref(ElForm);
-
-const state = reactive({
-  loading: true,
-  // 选中ID数组
-  ids: [] as number[],
-  // 非单个禁用
-  single: true,
-  // 非多个禁用
-  multiple: true,
-  total: 0,
-  queryParams: { pageNum: 1, pageSize: 10 } as DictItemQueryParam,
-  dictItemList: [] as DictItem[],
-  dialog: { visible: false } as Dialog,
-  formData: {
-    dictCode: props.dictCode,
-    dictName: props.dictName,
-    status: 1,
-    sort: 1
-  } as DictItemFormData,
-  rules: {
-    name: [{ required: true, message: '请输入字典项名称', trigger: 'blur' }],
-    value: [{ required: true, message: '请输入字典项值', trigger: 'blur' }]
-  },
-  localDictCode: props.dictCode,
-  localDictName: props.dictName
-});
-
-const {
-  loading,
-  multiple,
-  queryParams,
-  dictItemList,
-  dialog,
-  formData,
-  rules,
-  total
-} = toRefs(state);
-
-function handleQuery() {
-  if (state.queryParams.dictCode) {
-    state.loading = true;
-    listDictItemPages(state.queryParams).then(({ data }) => {
-      state.dictItemList = data.list;
-      state.total = data.total;
-      state.loading = false;
-    });
-  } else {
-    state.dictItemList = [];
-    state.total = 0;
-    state.queryParams.pageNum = 1;
-    state.loading = false;
-  }
-}
-
-function resetQuery() {
-  queryFormRef.value.resetFields();
-  handleQuery();
-}
-
-function handleSelectionChange(selection: any) {
-  state.ids = selection.map((item: any) => item.id);
-  state.single = selection.length !== 1;
-  state.multiple = !selection.length;
-}
-
-function handleAdd() {
-  if (!state.formData.dictCode) {
-    ElMessage.warning('请选择字典后添加数据项');
-    return;
-  }
-  state.dialog = {
-    title: '添加字典项',
-    visible: true
-  };
-}
-
-function handleUpdate(row: any) {
-  state.dialog = {
-    title: '修改字典项',
-    visible: true
-  };
-  const id = row.id || state.ids;
-  getDictItemDetail(id).then(({ data }) => {
-    state.formData = data;
-  });
-}
-
-function submitForm() {
-  dataFormRef.value.validate((isValid: boolean) => {
-    if (isValid) {
-      if (state.formData.id) {
-        updateDictItem(state.formData.id, state.formData).then(() => {
-          ElMessage.success('修改成功');
-          cancel();
-          handleQuery();
-        });
-      } else {
-        addDictItem(state.formData).then(() => {
-          ElMessage.success('新增成功');
-          cancel();
-          handleQuery();
-        });
-      }
-    }
-  });
-}
-
-function cancel() {
-  state.dialog.visible = false;
-  state.formData.id = undefined;
-  dataFormRef.value.resetFields();
-}
-
-function handleDelete(row: any) {
-  const ids = [row.id || state.ids].join(',');
-  ElMessageBox.confirm('确认删除已选中的数据项?', '警告', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning'
-  })
-    .then(() => {
-      deleteDictItem(ids).then(() => {
-        ElMessage.success('删除成功');
-        handleQuery();
-      });
-    })
-    .catch(() => ElMessage.info('已取消删除'));
-}
-
-onMounted(() => {
-  handleQuery();
-});
-</script>