增加字典数据界面

src/views/manage/dict/dictData/index.vue

@@ -0,0 +1,731 @@
+<script setup lang="tsx">
+import { Form, message } from 'ant-design-vue';
+import type { Key } from 'ant-design-vue/es/_util/type';
+import { useTable, useTableOperate } from '@/hooks/common/table';
+import { SimpleScrollbar } from '~/packages/materials/src';
+import { useI18n } from "vue-i18n";
+import { SyncOutlined, SearchOutlined, ProfileOutlined, CloseOutlined, ExportOutlined, FormOutlined, DeleteOutlined } from '@ant-design/icons-vue';
+import { enableStatusOptions } from '@/constants/business';
+import { saveAs } from 'file-saver';
+import useDictStore from '@/store/modules/dict';
+
+
+import Modal from 'ant-design-vue/es/modal/Modal';
+import { useRouter, useRoute } from 'vue-router';
+
+const router = useRouter();
+const route = useRoute();
+
+const { parseDataDict, getDict } = useDictStore();
+
+
+const { t } = useI18n();
+
+const i18n = useI18n();
+// 获取当前语言设置
+const currentLocale = computed(() => {
+  return i18n.locale.value;
+});
+
+const wrapperEl = shallowRef<HTMLElement | null>(null);
+const { height: wrapperElHeight } = useElementSize(wrapperEl);
+
+const zh = currentLocale.value === 'zh_CN';
+
+
+
+/**标签类型数据固定项 */
+const tagTypeOptions = ref([
+  { value: '', label: zh ? '普通文本' : 'Plain text' },
+  { value: 'default', label: zh ? '默认（default）' : 'Default' },
+  { value: 'blue ', label: zh ? '蓝色（blue）' : 'Blue' },
+  { value: 'cyan', label: zh ? '青色（cyan）' : 'Cyan' },
+  { value: 'gold', label: zh ? '金色（gold）' : 'Gold' },
+  { value: 'green', label: zh ? '绿色（green）' : 'Green' },
+  { value: 'lime', label: zh ? '亮绿（lime）' : 'Lime' },
+  { value: 'magenta', label: zh ? '紫红（magenta）' : 'Magenta' },
+  { value: 'orange', label: zh ? '橘黄（orange）' : 'Orange' },
+  { value: 'pink', label: zh ? '粉色（pink）' : 'Pink' },
+  { value: 'purple', label: zh ? '紫色（purple）' : 'Purple' },
+  { value: 'red', label: zh ? '红色（red）' : 'Red' },
+  { value: 'yellow', label: zh ? '黄色（yellow）' : 'Yellow' },
+  { value: 'geekblue', label: zh ? '深蓝（geekblue）' : 'Geekblue' },
+  { value: 'volcano', label: zh ? '棕色（volcano）' : 'Volcano' },
+  { value: 'processing', label: zh ? '进行（processing）' : 'Processing' },
+  { value: 'warning', label: zh ? '警告（warning）' : 'Warning' },
+  { value: 'error', label: zh ? '错误（error）' : 'Error' },
+  { value: 'success', label: zh ? '成功（success）' : 'Success' },
+]);
+
+// 获取地址栏参数
+const dictId = route.params && (route.query.dictId as string);
+
+/**对话框对象信息状态 */
+let modalState: any = reactive({
+  openByView: false,
+  openByEdit: false,
+  title: '字典数据',
+  from: {
+    dictCode: undefined,
+    dictLabel: '',
+    dictSort: 0,
+    dictType: 'sys_oper_type',
+    dictValue: '',
+    tagClass: '',
+    tagType: '',
+    remark: '',
+    status: '0',
+    createTime: 0,
+    createBy: undefined,
+  },
+  confirmLoading: false,
+});
+
+
+/**字典数据 */
+let dict: {
+  /**数据状态 */
+  sysNormalDisable: any[];
+  /**字典名称 */
+  sysDictType: any[];
+} = reactive({
+  sysNormalDisable: [],
+  sysDictType: [],
+});
+
+const scrollConfig = computed(() => {
+  return {
+    y: wrapperElHeight.value - 72,
+    x: 1000
+  };
+});
+
+const { columns, data, loading, getData, mobilePagination, searchParams, resetSearchParams } = useTable({
+  apiFn: doGetdictDataList,
+  apiParams: {
+    pageNum: 1,
+    pageSize: 10,
+    dictType: '',
+    dictLabel: '',
+    status: ''
+  },
+  rowKey: 'dictCode',
+  columns: () => [
+    {
+      title: t('page.manage.dict.dictData.dictCode'),
+      key: 'dictCode',
+      dataIndex: 'dictCode',
+      align: 'center',
+      width: 100,
+    },
+    {
+      title: t('page.manage.dict.dictData.dictLabel'),
+      key: 'dictLabel',
+      dataIndex: 'dictLabel',
+      align: 'center',
+      width: 200,
+    },
+    {
+      title: t('page.manage.dict.dictData.dictValue'),
+      key: 'dictValue',
+      dataIndex: 'dictValue',
+      align: 'center',
+      width: 200,
+    },
+    {
+      title: t('page.manage.dict.dictData.dictSort'),
+      dataIndex: 'dictSort',
+      key: 'dictSort',
+      align: 'center',
+      width: 100,
+    },
+    {
+      title: t('page.manage.dict.dictData.status'),
+      dataIndex: 'status',
+      key: 'status',
+      align: 'center',
+      width: 100,
+    },
+    {
+      title: t('page.manage.dict.dictData.createTime'),
+      dataIndex: 'createTime',
+      key: 'createTime',
+      align: 'center',
+      width: 150,
+    },
+    {
+      title: t('common.operate'),
+      key: 'dictCode',
+      align: 'center',
+      width: 200,
+    },
+  ]
+});
+
+const {
+  operateType,
+  checkedRowKeys,
+  onDeleted
+  // closeDrawer
+} = useTableOperate(data, { getData, idKey: 'dictCode' });
+
+
+
+async function handleBatchDelete() {
+  Modal.confirm({
+    title: t('common.tipTitle'),
+    content: t('page.manage.dict.dictData.delTip', { txt: checkedRowKeys.value.join(',') }),
+    async onOk() {
+
+      const { error } = await delData(checkedRowKeys.value.join(','));
+      if (!error) {
+        onDeleted();
+        // 取消勾选
+        if (checkedRowKeys.value.length > 0) {
+          checkedRowKeys.value = [];
+        }
+      }
+    }
+  })
+}
+
+/**表格多选 */
+function handleUserSelectChange(selectedRowKeys: Key[], selectedRows: any[]) {
+  checkedRowKeys.value = selectedRowKeys as number[];
+}
+
+function fnQueryReset() {
+  if (dictId && dictId !== '0') {
+    searchParams.value = Object.assign(searchParams, {
+      dictLabel: '',
+      status: undefined,
+      pageNum: 1,
+      pageSize: 10,
+    });
+  } else {
+    searchParams.value = Object.assign(searchParams, {
+      dictType: '',
+      dictLabel: '',
+      status: undefined,
+      pageNum: 1,
+      pageSize: 10,
+    });
+  }
+  resetSearchParams();
+}
+
+async function fnRecordView(dictCode: number) {
+  operateType.value = 'view';
+  if (modalState.confirmLoading) return;
+  const hide = message.loading('Waiting...', 0);
+  modalState.confirmLoading = true;
+  doGetDataInfo(dictCode).then(res => {
+    modalState.confirmLoading = false;
+    hide();
+    if (!res.error) {
+      modalState.from = Object.assign(modalState.from, res.data);
+      modalState.openByView = true;
+      modalState.title = t('page.manage.task.viewJob');
+    }
+  });
+}
+
+
+
+/**
+ * 对话框弹出关闭执行函数
+ * 进行表达规则校验
+ */
+function fnModalCancel() {
+  modalState.openByEdit = false;
+  modalState.openByView = false;
+}
+
+
+
+
+
+
+
+
+
+/**列表导出 */
+function fnExportList() {
+  Modal.confirm({
+    title: t('common.tipTitle'),
+    content: t('common.exportTip'),
+    onOk() {
+      const key = 'exportJobLog';
+      message.loading({ content: t('common.loading'), key });
+      exportData(toRaw(searchParams)).then(res => {
+        if (!res.error) {
+          message.success({
+            content: t('common.exportOk'),
+            key,
+            duration: 2,
+          });
+          saveAs(res.data, `DictData_${Date.now()}.xlsx`);
+        }
+      });
+    },
+  });
+}
+
+
+
+/**关闭跳转 */
+function fnClose(this: any) {
+  router.back(); // 返回到上一个页面
+}
+
+/**对话框内表单属性和校验规则 */
+const modalStateFrom = Form.useForm(
+  modalState.from,
+  reactive({
+    dictLabel: [
+      {
+        required: true,
+        min: 1,
+        max: 50,
+        message: t('page.manage.dict.dictData.dictLabelPleac'),
+      },
+    ],
+    dictValue: [
+      {
+        required: true,
+        min: 1,
+        max: 50,
+        message: t('page.manage.dict.dictData.dictValuePleac'),
+      },
+    ],
+  })
+);
+
+/**新增修改界面 */
+function fnModalVisibleByEdit(dictCode?: string | number, record?: any) {
+  if (!dictCode) {
+    modalStateFrom.resetFields();
+    modalState.from.dictType = searchParams.dictType;
+    modalState.title = t('page.manage.dict.dictData.addInfo');
+    modalState.openByEdit = true;
+  } else {
+    if (modalState.confirmLoading) return;
+    const hide = message.loading(t('common.loading'), 0);
+    modalState.confirmLoading = true;
+    doGetDataInfo(dictCode).then(res => {
+      modalState.confirmLoading = false;
+      hide();
+      if (!res.error) {
+        modalState.from = Object.assign(modalState.from, res.data);
+        modalState.title = t('page.manage.dict.dictData.editInfo');
+        modalState.openByEdit = true;
+      }
+    });
+  }
+}
+
+
+/**
+ * 对话框弹出确认执行函数
+ * 进行表达规则校验
+ */
+function fnModalOk() {
+  modalStateFrom
+    .validate()
+    .then(() => {
+      modalState.confirmLoading = true;
+      const from = toRaw(modalState.from);
+      const dictData = from.dictCode ? updateData(from) : addData(from);
+      const key = 'dictData';
+      message.loading({ content: t('common.loading'), key });
+      dictData
+        .then(res => {
+          if (!res.error) {
+            message.success({
+              content: t('common.msgSuccess', { msg: modalState.title }),
+              key,
+              duration: 2,
+            });
+            modalState.openByEdit = false;
+            modalStateFrom.resetFields();
+            getData();
+          }
+        })
+        .finally(() => {
+          modalState.confirmLoading = false;
+        });
+    })
+    .catch(e => {
+      message.error(t('common.errorFields', { num: e.errorFields.length }), 2);
+    });
+}
+
+
+/**
+ * 字典删除
+ * @param dictCode 字典代码
+ */
+function fnRecordDelete(dictCode: string = '0') {
+  if (dictCode === '0') {
+    dictCode = checkedRowKeys.value.join(',');
+  }
+  Modal.confirm({
+    title: t('common.tipTitle'),
+    content: t('page.manage.dict.dictData.delTip', { txt: dictCode }),
+    onOk() {
+      const key = 'delData';
+      message.loading({ content: t('common.loading'), key });
+      delData(dictCode).then(res => {
+        if (!res.error) {
+          message.success({
+            content: t('page.manage.dict.dictData.delOk'),
+            key,
+            duration: 2,
+          });
+          getData();
+        }
+      });
+    },
+  });
+}
+
+
+onMounted(() => {
+  // 初始字典数据
+  Promise.allSettled([
+    getDict('sys_normal_disable'),
+  ]).then((resArr: any) => {
+    if (resArr[0].status === 'fulfilled') {
+      dict.sysNormalDisable = resArr[0].value;
+    }
+  });
+
+  // 指定任务id数据列表
+  if (dictId && dictId !== '0') {
+    doGetDataInfo(dictId).then(res => {
+      if (!res.error) {
+        searchParams.dictType = res.data.dictType;
+        getData();
+      }
+    });
+  } else {
+    getData();
+  }
+})
+
+
+
+</script>
+
+<template>
+  <SimpleScrollbar>
+    <div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
+      <!-- 搜索框 -->
+      <ACard :title="$t('common.search')" :bordered="false" class="card-wrapper">
+        <AForm :model="searchParams" :label-width="80">
+          <ARow :gutter="[16, 16]" wrap>
+
+
+            <a-col :lg="6" :md="12" :xs="24" v-if="dictId !== '0'">
+              <a-form-item :label="t('page.manage.dict.dictData.dictType')" name="dictType" class="m-0">
+                <a-input v-model:value="searchParams.dictType" :disabled="dictId !== '0'"
+                  :placeholder="t('common.inputPlease')"></a-input>
+              </a-form-item>
+            </a-col>
+
+            <a-col :lg="6" :md="12" :xs="24">
+              <a-form-item :label="t('page.manage.dict.dictData.dictLabel')" name="dictLabel" class="m-0">
+                <a-input v-model:value="searchParams.dictLabel" allow-clear
+                  :placeholder="t('common.inputPlease')"></a-input>
+              </a-form-item>
+            </a-col>
+
+            <ACol :lg="6" :md="12" :xs="24">
+              <AFormItem :label="$t('page.manage.user.status')" name="status" class="m-0">
+                <ASelect v-model:value="searchParams.status" :placeholder="$t('page.manage.user.form.status')"
+                  allow-clear>
+                  <ASelectOption v-for="option in enableStatusOptions" :key="option.value" :value="option.value">
+                    {{ $t(option.label) }}
+                  </ASelectOption>
+                </ASelect>
+              </AFormItem>
+            </ACol>
+
+
+            <ACol :lg="6" :md="12" :xs="24">
+              <AFormItem class="m-0">
+                <div class="w-full flex-y-center justify-end gap-8px">
+                  <a-space :size="8">
+                    <a-button @click="fnQueryReset">
+                      <template #icon>
+                        <SyncOutlined />
+                      </template>
+                      {{ $t('common.reset') }}
+                    </a-button>
+                    <AButton type="primary" ghost @click="getData">
+                      <template #icon>
+                        <SearchOutlined />
+                      </template>
+                      {{ $t('common.search') }}
+                    </AButton>
+                  </a-space>
+
+                </div>
+              </AFormItem>
+            </ACol>
+          </ARow>
+        </AForm>
+      </ACard>
+
+      <ACard title="Dictionary Data" :bordered="false" :body-style="{ flex: 1, overflow: 'hidden' }"
+        class="flex-col-stretch sm:flex-1-hidden card-wrapper">
+        <template #extra>
+          <div class="flex flex-wrap justify-end gap-x-12px gap-y-8px lt-sm:(w-200px py-12px)">
+            <slot name="prefix"></slot>
+            <slot name="default">
+
+              <a-button type="default" size="small" @click.prevent="fnClose()">
+                <template #icon>
+                  <CloseOutlined />
+                </template>
+                {{ t('common.close') }}
+              </a-button>
+
+              <AButton size="small" ghost type="primary" @click="fnModalVisibleByEdit()">
+                <div class="flex-y-center gap-8px">
+                  <icon-ic-round-plus class="text-icon" />
+                  <span>{{ $t('common.add') }}</span>
+                </div>
+              </AButton>
+
+
+              <AButton size="small" danger :disabled="checkedRowKeys.length <= 0" @click="handleBatchDelete()">
+                <div class="flex-y-center gap-8px">
+                  <icon-ic-round-delete class="text-icon" />
+                  <span>{{ $t('common.batchDelete') }}</span>
+                </div>
+              </AButton>
+
+              <AButton size="small" type="primary" @click="fnExportList">
+                <template #icon>
+                  <ExportOutlined />
+                </template>
+                <span>{{ $t('common.export') }}</span>
+              </AButton>
+
+              <AButton size="small" @click="getData">
+                <div class="flex-y-center gap-8px">
+                  <icon-mdi-refresh class="text-icon" />
+                  <span>{{ $t('common.refresh') }}</span>
+                </div>
+              </AButton>
+
+            </slot>
+
+            <slot name="suffix"></slot>
+          </div>
+        </template>
+
+
+        <ATable ref="wrapperEl" row-key="dictCode" :columns="columns" :data-source="data" :loading="loading"
+          :row-selection="{
+            selectedRowKeys: checkedRowKeys,
+            onChange: handleUserSelectChange,
+          }" size="small" :pagination="mobilePagination" :scroll="scrollConfig" class="h-full">
+          <template #bodyCell="{ column, record }">
+
+            <template v-if="column.key === 'status'">
+              <DictTag :options="dict.sysNormalDisable" :value="record.status" />
+            </template>
+
+            <template v-if="column.key === 'dictCode'">
+              <a-space :size="8" align="center">
+                <a-tooltip>
+
+                  <template #title>{{ t('common.view') }}</template>
+                  <a-button type="link" @click.prevent="fnRecordView(record.dictCode)">
+                    <template #icon>
+                      <ProfileOutlined />
+                    </template>
+                  </a-button>
+                </a-tooltip>
+
+                <a-tooltip>
+                  <template #title>{{ t('common.edit') }}</template>
+                  <a-button type="link" @click.prevent="fnModalVisibleByEdit(record.dictCode, record)">
+                    <template #icon>
+                      <FormOutlined />
+                    </template>
+                  </a-button>
+                </a-tooltip>
+
+                <a-tooltip>
+                  <template #title>{{ t('common.delete') }}</template>
+                  <a-button type="link" @click.prevent="fnRecordDelete(record.dictCode)">
+                    <template #icon>
+                      <DeleteOutlined />
+                    </template>
+                  </a-button>
+                </a-tooltip>
+
+              </a-space>
+            </template>
+
+          </template>
+        </ATable>
+
+
+
+        <!-- <taskOperateDrawer v-model:visible="drawerVisible" :dept-tree-data="deptTreeData" :operate-type="operateType"
+          :row-data="editingData" @submitted="getData" /> -->
+
+
+
+
+        <!-- 详情框 -->
+        <a-modal :width="800" v-model:open="modalState.openByView" :title="modalState.title" @cancel="fnModalCancel">
+          <a-form layout="horizontal" :label-col="{ span: 6 }" :label-wrap="true">
+            <a-row>
+              <a-col :lg="12" :md="12" :xs="24">
+                <a-form-item :label="t('page.manage.dict.dictData.dictType')" name="dictType">
+                  {{
+                    dict.sysDictType.find(
+                      item => item.value === modalState.from.dictType
+                    )?.label
+                  }}
+                </a-form-item>
+              </a-col>
+              <a-col :lg="12" :md="12" :xs="24">
+                <a-form-item :label="t('page.manage.dict.dictData.createTime')" name="createTime">
+                  <span v-if="+modalState.from.createTime > 0">
+                    {{ modalState.from.createTime }}
+                  </span>
+                </a-form-item>
+              </a-col>
+            </a-row>
+            <a-row>
+              <a-col :lg="12" :md="12" :xs="24">
+                <a-form-item :label="t('page.manage.dict.dictData.dictCode')" name="dictCode">
+                  {{ modalState.from.dictCode }}
+                </a-form-item>
+              </a-col>
+              <a-col :lg="12" :md="12" :xs="24">
+                <a-form-item :label="t('page.manage.dict.dictData.status')" name="status">
+                  <DictTag :options="dict.sysNormalDisable" :value="modalState.from.status" />
+                </a-form-item>
+              </a-col>
+            </a-row>
+            <a-row>
+              <a-col :lg="12" :md="12" :xs="24">
+                <a-form-item :label="t('page.manage.dict.dictData.dictLabel')" name="dictLabel">
+                  {{ modalState.from.dictLabel }}
+                </a-form-item>
+              </a-col>
+              <a-col :lg="12" :md="12" :xs="24">
+                <a-form-item :label="t('page.manage.dict.dictData.dictValue')" name="dictValue">
+                  {{ modalState.from.dictValue }}
+                </a-form-item>
+              </a-col>
+            </a-row>
+            <a-row>
+              <a-col :lg="12" :md="12" :xs="24">
+                <a-form-item :label="t('page.manage.dict.dictData.tagType')" name="tagType">
+                  <DictTag :options="tagTypeOptions" :value="modalState.from.tagType" />
+                </a-form-item>
+              </a-col>
+              <a-col :lg="12" :md="12" :xs="24">
+                <a-form-item :label="t('page.manage.dict.dictData.tagClass')" name="tagClass">
+                  {{ modalState.from.tagClass }}
+                </a-form-item>
+              </a-col>
+            </a-row>
+            <a-row>
+              <a-col :lg="12" :md="12" :xs="24">
+                <a-form-item :label="t('page.manage.dict.dictData.tagTypeShow')" name="tagType">
+                  <DictTag :options="parseDataDict(modalState.from)" :value="modalState.from.dictValue" />
+                </a-form-item>
+              </a-col>
+              <a-col :lg="12" :md="12" :xs="24">
+                <a-form-item :label="t('page.manage.dict.dictData.dictSort')" name="dictSort">
+                  {{ modalState.from.dictSort }}
+                </a-form-item>
+              </a-col>
+            </a-row>
+            <a-form-item :label="t('page.manage.dict.dictData.remark')" name="remark" :label-col="{ span: 3 }"
+              :label-wrap="true">
+              <a-textarea v-model:value="modalState.from.remark" :auto-size="{ minRows: 2, maxRows: 6 }"
+                :disabled="true" />
+            </a-form-item>
+          </a-form>
+          <template #footer>
+            <a-button key="cancel" @click="fnModalCancel">
+              {{ t('common.close') }}
+            </a-button>
+          </template>
+        </a-modal>
+
+
+        <!--新增修改框 -->
+        <a-modal :width="800" :destroyOnClose="true" :keyboard="false" :mask-closable="false"
+          v-model:open="modalState.openByEdit" :title="modalState.title" :confirm-loading="modalState.confirmLoading"
+          @ok="fnModalOk" @cancel="fnModalCancel">
+          <a-form layout="horizontal" :label-col="{ span: 6 }" :label-wrap="true">
+            <a-row>
+              <a-col :lg="12" :md="12" :xs="24">
+                <a-form-item :label="t('page.manage.dict.dictData.dictType')" name="dictType">
+                  <a-select v-model:value="modalState.from.dictType" default-value="sys_oper_type"
+                    :placeholder="t('common.selectPlease')" :options="dict.sysDictType" :disabled="true">
+                  </a-select>
+                </a-form-item>
+              </a-col>
+              <a-col :lg="12" :md="12" :xs="24">
+                <a-form-item :label="t('page.manage.dict.dictData.dictSort')" name="dictSort">
+                  <a-input-number v-model:value="modalState.from.dictSort" :min="0" :max="65535"
+                    :placeholder="t('common.inputPlease')"></a-input-number>
+                </a-form-item>
+              </a-col>
+            </a-row>
+
+            <a-row>
+              <a-col :lg="12" :md="12" :xs="24">
+                <a-form-item :label="t('page.manage.dict.dictData.dictLabel')" name="dictLabel"
+                  v-bind="modalStateFrom.validateInfos.dictLabel">
+                  <a-input v-model:value="modalState.from.dictLabel" allow-clear
+                    :placeholder="t('page.manage.dict.dictData.dictLabelPleac')"></a-input>
+                </a-form-item>
+              </a-col>
+              <a-col :lg="12" :md="12" :xs="24">
+                <a-form-item :label="t('page.manage.dict.dictData.dictValue')" name="dictValue"
+                  v-bind="modalStateFrom.validateInfos.dictValue">
+                  <a-input v-model:value="modalState.from.dictValue" allow-clear
+                    :placeholder="t('page.manage.dict.dictData.dictValuePleac')"></a-input>
+                </a-form-item>
+              </a-col>
+            </a-row>
+
+            <a-row>
+              <a-col :lg="12" :md="12" :xs="24">
+                <a-form-item :label="t('page.manage.dict.dictData.status')" name="status">
+                  <a-select v-model:value="modalState.from.status" default-value="0"
+                    :placeholder="t('common.selectPlease')" :options="dict.sysNormalDisable">
+                  </a-select>
+                </a-form-item>
+              </a-col>
+
+            </a-row>
+
+            <a-form-item :label="t('page.manage.dict.dictData.remark')" name="remark" :label-col="{ span: 3 }"
+              :label-wrap="true">
+              <a-textarea v-model:value="modalState.from.remark" :auto-size="{ minRows: 4, maxRows: 6 }"
+                :maxlength="450" :show-count="true" />
+            </a-form-item>
+          </a-form>
+        </a-modal>
+      </ACard>
+
+
+    </div>
+  </SimpleScrollbar>
+</template>
+
+<style scoped></style>

src/views/manage/dict/index.vue

@@ -6,7 +6,14 @@ import { $t } from '@/locales';
 import { enableStatusRecord } from '@/constants/business';
 import DictOperateDrawer from './modules/dict-operate-drawer.vue';
 import DictSearch from './modules/dict-search.vue';
+import { useRouter, useRoute } from 'vue-router';
+import { useI18n } from "vue-i18n";
+const { t } = useI18n();
 
+
+const router = useRouter();
+const route = useRoute();
+const routePath = route.path;
 const wrapperEl = shallowRef<HTMLElement | null>(null);
 const { height: wrapperElHeight } = useElementSize(wrapperEl);
 
@@ -45,11 +52,11 @@ const { columns, columnChecks, data, loading, getData, mobilePagination, searchP
       dataIndex: 'status',
       title: '状态',
       align: 'center',
-      customRender: ({ record }) => {
+      customRender: ({ record }: any) => {
         if (record.status === null) {
           return null;
         }
-        const tagMap: Record<Api.Common.EnableStatus, string> = {
+        const tagMap: any = {
           '0': 'success',
           '1': 'warning'
         };
@@ -74,20 +81,23 @@ const { columns, columnChecks, data, loading, getData, mobilePagination, searchP
       title: '操作',
       align: 'center',
       width: 200,
-      customRender: ({ record }) => (
+      customRender: ({ record }: any) => (
         <div class="flex justify-around gap-8px">
           {isShowBtn('system:dict:edit') && (
             <Button size="small" onClick={() => edit(record.dictId)}>
-              编辑
+              {t('common.edit')}
             </Button>
           )}
           {isShowBtn('system:dict:remove') && (
             <Popconfirm onConfirm={() => handleDelete(record.dictId)} title="确认删除吗？">
               <Button danger size="small">
-                删除
+              {$t('common.delete')}
               </Button>
             </Popconfirm>
           )}
+          <Button size="small" onClick={() => fnDataView(record.dictId)} >
+          {$t('route.manage_dictData')}
+          </Button>
         </div>
       )
     }
@@ -101,6 +111,10 @@ async function handleBatchDelete() {
   const { error } = await doDeleteDict(checkedRowKeys.value.join(','));
   if (!error) {
     onBatchDeleted();
+    // 取消勾选
+    if (checkedRowKeys.value.length > 0) {
+      checkedRowKeys.value = [];
+    }
   }
 }
 
@@ -118,47 +132,30 @@ function edit(id: number) {
 function handleDictSelectChange(selectedRowKeys: Key[]) {
   checkedRowKeys.value = selectedRowKeys as number[];
 }
+
+
+/**跳转字典数据页面 */
+function fnDataView(dictId: string | number = '0') {
+  router.push(`${routePath}/dictData?dictId=${dictId}`);
+}
+
 </script>
 
 <template>
   <div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
     <DictSearch v-model:model="searchParams" @reset="resetSearchParams" @search="getData" />
-    <ACard
-      title="字典列表"
-      :bordered="false"
-      :body-style="{ flex: 1, overflow: 'hidden' }"
-      class="flex-col-stretch sm:flex-1-hidden card-wrapper"
-    >
+    <ACard title="字典列表" :bordered="false" :body-style="{ flex: 1, overflow: 'hidden' }"
+      class="flex-col-stretch sm:flex-1-hidden card-wrapper">
       <template #extra>
-        <TableHeaderOperation
-          v-model:columns="columnChecks"
-          :disabled-delete="checkedRowKeys.length === 0"
-          :loading="loading"
-          :show-delete="true"
-          table-type="dict"
-          @add="handleAdd"
-          @delete="handleBatchDelete"
-          @refresh="getData"
-        />
+        <TableHeaderOperation v-model:columns="columnChecks" :disabled-delete="checkedRowKeys.length === 0"
+          :loading="loading" :show-delete="true" :show-view="true" table-type="dict" @add="handleAdd" @delete="handleBatchDelete"
+          @refresh="getData" @view="fnDataView"/>
       </template>
-      <ATable
-        ref="wrapperEl"
-        :columns="columns"
-        :data-source="data"
-        :loading="loading"
-        :row-selection="{ selectedRowKeys: checkedRowKeys, onChange: handleDictSelectChange }"
-        row-key="dictId"
-        size="small"
-        :pagination="mobilePagination"
-        :scroll="scrollConfig"
-        class="h-full"
-      />
-      <DictOperateDrawer
-        v-model:visible="drawerVisible"
-        :operate-type="operateType"
-        :row-data="editingData"
-        @submitted="getData"
-      />
+      <ATable ref="wrapperEl" :columns="columns" :data-source="data" :loading="loading"
+        :row-selection="{ selectedRowKeys: checkedRowKeys, onChange: handleDictSelectChange }" row-key="dictId"
+        size="small" :pagination="mobilePagination" :scroll="scrollConfig" class="h-full" />
+      <DictOperateDrawer v-model:visible="drawerVisible" :operate-type="operateType" :row-data="editingData"
+        @submitted="getData" />
     </ACard>
   </div>
 </template>