[Feat 0000] 为区队添加单独的字典配置页面

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

@@ -0,0 +1,134 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+  <BasicTable @register="registerTable" :rowClassName="getRowClassName">
+    <template #tableTitle>
+      <a-button type="primary" @click="handleCreate"> 新增</a-button>
+    </template>
+    <template #bodyCell="{ column, record }">
+      <template v-if="column.dataIndex === 'action'">
+        <TableAction :actions="getTableAction(record)" />
+      </template>
+    </template>
+  </BasicTable>
+  <DictItemModal @register="registerModal" @success="reload" :dictId="dictId" />
+</template>
+<script lang="ts" setup>
+  import { onMounted, ref, unref } from 'vue';
+  import { BasicTable, useTable, TableAction } from '/@/components/Table';
+  import { useModal } from '/@/components/Modal';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import DictItemModal from './DictItemModal.vue';
+  import { dictItemColumns, dictItemSearchFormSchema } from '../dict.data';
+  import { itemList, deleteItem } from '../dict.api';
+  import { ColEx } from '/@/components/Form/src/types';
+
+  const { prefixCls } = useDesign('row-invalid');
+  const dictId = ref('');
+  //字典配置model
+  const [registerModal, { openModal }] = useModal();
+  // 自适应列配置
+  const adaptiveColProps: Partial<ColEx> = {
+    xs: 24, // <576px
+    sm: 24, // ≥576px
+    md: 24, // ≥768px
+    lg: 10, // ≥992px
+    xl: 10, // ≥1200px
+    xxl: 6, // ≥1600px
+  };
+  const [registerTable, { reload, setProps }] = useTable({
+    //需要配置rowKey，否则会有警告
+    rowKey: 'dictId',
+    api: itemList,
+    columns: dictItemColumns,
+    formConfig: {
+      baseColProps: adaptiveColProps,
+      labelAlign: 'left',
+      // labelCol: {
+      //   offset: 1,
+      //   xs: 24,
+      //   sm: 24,
+      //   md: 24,
+      //   lg: 9,
+      //   xl: 7,
+      //   xxl: 4,
+      // },
+      schemas: dictItemSearchFormSchema,
+      autoSubmitOnEnter: true,
+    },
+    striped: true,
+    useSearchForm: true,
+    bordered: true,
+    showIndexColumn: false,
+    canResize: false,
+    immediate: false,
+    actionColumn: {
+      width: 100,
+      title: '操作',
+      dataIndex: 'action',
+      //slots: { customRender: 'action' },
+      fixed: undefined,
+    },
+  });
+
+  /**
+   * 新增
+   */
+  function handleCreate() {
+    openModal(true, {
+      isUpdate: false,
+    });
+  }
+
+  /**
+   * 编辑
+   */
+  function handleEdit(record) {
+    openModal(true, {
+      record,
+      isUpdate: true,
+    });
+  }
+
+  /**
+   * 删除
+   */
+  async function handleDelete(record) {
+    await deleteItem({ id: record.id }, reload);
+  }
+
+  /**
+   * 操作栏
+   */
+  function getTableAction(record) {
+    return [
+      {
+        label: '编辑',
+        onClick: handleEdit.bind(null, record),
+      },
+      {
+        label: '删除',
+        popConfirm: {
+          title: '是否确认删除',
+          confirm: handleDelete.bind(null, record),
+        },
+      },
+    ];
+  }
+  function getRowClassName(record) {
+    return record.status == 0 ? prefixCls : '';
+  }
+
+  onMounted(() => {
+    dictId.value = '1826791852479107073';
+    setProps({ searchInfo: { dictId: unref(dictId) } });
+    reload();
+  });
+</script>
+<style scoped lang="less">
+  @prefix-cls: ~'@{namespace}-row-invalid';
+
+  :deep(.@{prefix-cls}) {
+    background: #f4f4f4;
+    color: #bababa;
+  }
+</style>