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

Former-commit-id: 40263bbb072596ada41ef33d9170841e7e66cd01
2022-06-15 00:48:17 +08:00
parent 928ba2dbd8
commit 321b584f9f
116 changed files with 1692 additions and 1485 deletions
--- a/src/views/system/dict/components/DictItem.vue
+++ b/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>
--- a/src/views/system/dict/components/DictType.vue
+++ b/src/views/system/dict/components/DictType.vue
@@ -1,7 +1,6 @@
-<!-- setup 无法设置组件名称，组件名称keepAlive必须 -->
 <script lang="ts">
 export default {
-  name: 'dict'
+  name: 'dictType',
 };
 </script>

@@ -132,15 +131,21 @@ export default {
 <script setup lang="ts">
 import { onMounted, reactive, ref, toRefs } from 'vue';
 import {
-  listDictPages,
-  getDictFormDetail,
-  addDict,
-  updateDict,
-  deleteDict
+  listPageDictTypes,
+  getDictFormData,
+  addDictType,
+  updateDictType,
+  deleteDictTypes,
 } from '@/api/system/dict';
 import { Search, Plus, Edit, Refresh, Delete } from '@element-plus/icons-vue';
 import { ElForm, ElMessage, ElMessageBox } from 'element-plus';
-import { Dialog, Dict, DictFormData, DictQueryParam } from '@/types';
+
+import { Dialog } from '@/types/common';
+import {
+  Dict,
+  DictFormTypeData,
+  DictQueryParam,
+} from '@/types/api/system/dict';

 const queryFormRef = ref(ElForm);
 const dataFormRef = ref(ElForm);
@@ -157,18 +162,18 @@ const state = reactive({
  multiple: true,
  queryParams: {
    pageNum: 1,
-    pageSize: 10
+    pageSize: 10,
  } as DictQueryParam,
  dictList: [] as Dict[],
  total: 0,
  dialog: { visible: false } as Dialog,
  formData: {
-    status: 1
-  } as DictFormData,
+    status: 1,
+  } as DictFormTypeData,
  rules: {
    name: [{ required: true, message: '请输入字典名称', trigger: 'blur' }],
-    code: [{ required: true, message: '请输入字典编码', trigger: 'blur' }]
-  }
+    code: [{ required: true, message: '请输入字典编码', trigger: 'blur' }],
+  },
 });

 const { total, dialog, loading, dictList, formData, rules, queryParams } =
@@ -177,7 +182,7 @@ const { total, dialog, loading, dictList, formData, rules, queryParams } =
 function handleQuery() {
  emit('dictClick', null);
  state.loading = true;
-  listDictPages(state.queryParams).then(({ data }) => {
+  listPageDictTypes(state.queryParams).then(({ data }) => {
    state.dictList = data.list;
    state.total = data.total;
    state.loading = false;
@@ -198,17 +203,17 @@ function handleSelectionChange(selection: any) {
 function handleAdd() {
  state.dialog = {
    title: '添加字典',
-    visible: true
+    visible: true,
  };
 }

 function handleUpdate(row: any) {
  state.dialog = {
    title: '修改字典',
-    visible: true
+    visible: true,
  };
  const id = row.id || state.ids;
-  getDictFormDetail(id).then(({ data }) => {
+  getDictFormData(id).then(({ data }) => {
    state.formData = data;
  });
 }
@@ -217,13 +222,13 @@ function submitForm() {
  dataFormRef.value.validate((isValid: boolean) => {
    if (isValid) {
      if (state.formData.id) {
-        updateDict(state.formData.id, state.formData).then(() => {
+        updateDictType(state.formData.id, state.formData).then(() => {
          ElMessage.success('修改成功');
          cancel();
          handleQuery();
        });
      } else {
-        addDict(state.formData).then(() => {
+        addDictType(state.formData).then(() => {
          ElMessage.success('新增成功');
          cancel();
          handleQuery();
@@ -244,10 +249,10 @@ function handleDelete(row: any) {
  ElMessageBox.confirm('确认删除已选中的数据项?', '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
-    type: 'warning'
+    type: 'warning',
  })
    .then(() => {
-      deleteDict(ids).then(() => {
+      deleteDictTypes(ids).then(() => {
        ElMessage.success('删除成功');
        handleQuery();
      });
--- a/src/views/system/dict/index.vue
+++ b/src/views/system/dict/index.vue
@@ -1,56 +1,55 @@
+<script setup lang="ts">
+import SvgIcon from '@/components/SvgIcon/index.vue';
+import DictType from './components/DictType.vue';
+import DictItem from './components/DictItem.vue';
+
+import { reactive, toRefs } from 'vue';
+
+const state = reactive({
+  typeCode: '',
+  typeName: '',
+});
+
+const { typeCode, typeName } = toRefs(state);
+
+const handleDictTypeClick = (row: any) => {
+  if (row) {
+    state.typeName = row.name;
+    state.typeCode = row.code;
+  } else {
+    state.typeName = '';
+    state.typeCode = '';
+  }
+};
+</script>
+
 <template>
  <div class="app-container">
    <el-row :gutter="10">
      <el-col :span="12" :xs="24">
        <el-card class="box-card">
          <template #header>
-            <svg-icon color="#333" icon-class="education" />
-            字典列表
+            <svg-icon icon-class="dict" />
+            字典类型
          </template>
-          <!-- 字典列表子组件 -->
-          <dict @dictClick="handleDictClick" />
+          <dict-type @dictClick="handleDictTypeClick" />
        </el-card>
      </el-col>

      <el-col :span="12" :xs="24">
        <el-card class="box-card">
          <template #header>
-            <svg-icon color="#333" icon-class="dict" />
+            <svg-icon icon-class="dict_item" />
            <span style="margin: 0 5px">字典数据项</span>
-            <el-tag type="success" v-if="dictCode" size="small">{{
-              dictName
+            <el-tag type="success" v-if="typeCode" size="small">{{
+              typeName
            }}</el-tag>
            <el-tag type="warning" v-else size="small">未选择字典</el-tag>
          </template>
          <!-- 字典项组件 -->
-          <dict-item :dictName="dictName" :dictCode="dictCode" />
+          <dict-item :typeName="typeName" :typeCode="typeCode" />
        </el-card>
      </el-col>
    </el-row>
  </div>
 </template>
-
-<script setup lang="ts">
-import SvgIcon from '@/components/SvgIcon/index.vue';
-import Dict from './components/Dict.vue';
-import DictItem from './components/DictItem.vue';
-
-import { reactive, toRefs } from 'vue';
-
-const state = reactive({
-  dictCode: '',
-  dictName: '' // 字典名称，用于字典项组件回显
-});
-
-const { dictCode, dictName } = toRefs(state);
-
-const handleDictClick = (dictRow: any) => {
-  if (dictRow) {
-    state.dictName = dictRow.name;
-    state.dictCode = dictRow.code;
-  } else {
-    state.dictName = '';
-    state.dictCode = '';
-  }
-};
-</script>