#页面优化

zhou zhou

5 天以前 6877c9caa25162e570a3e2a99a5b2ce3ef88368b

 rsf-design/src/views/system/dict-type/index.vue

@@ -12,7 +12,9 @@
      <ArtTableHeader v-model:columns="columnChecks" :loading="loading" @refresh="refreshData">
        <template #left>
          <ElSpace wrap>
            <ElButton v-auth="'add'" @click="showDialog('add')" v-ripple>{{ t('pages.system.dictType.buttons.add') }}</ElButton>
            <ElButton v-auth="'add'" @click="showDialog('add')" v-ripple>{{
              t('pages.system.dictType.buttons.add')
            }}</ElButton>
            <ElButton
              v-auth="'delete'"
              type="danger"
@@ -21,6 +23,15 @@
              v-ripple
            >
              {{ t('common.actions.batchDelete') }}
            </ElButton>
            <ElButton
              v-auth="'query'"
              :loading="exportLoading"
              :disabled="loading || exportLoading"
              @click="handleExport"
              v-ripple
            >
              {{ t('common.actions.export') }}
            </ElButton>
          </ElSpace>
        </template>
@@ -47,6 +58,11 @@
        :loading="detailLoading"
        :detail-data="detailData"
      />

      <DictDataPanel
        v-model:visible="dictDataPanelVisible"
        :dict-type-data="currentManagedDictTypeData"
      />
    </ElCard>
  </div>
</template>
@@ -54,16 +70,20 @@
<script setup>
  import { useI18n } from 'vue-i18n'
  import { ElMessage } from 'element-plus'
  import { useUserStore } from '@/store/modules/user'
  import { useAuth } from '@/hooks/core/useAuth'
  import { useTable } from '@/hooks/core/useTable'
  import { useCrudPage } from '@/views/system/common/useCrudPage'
  import { guardRequestWithMessage } from '@/utils/sys/requestGuard'
  import {
    fetchDeleteDictType,
    fetchDictTypePage,
    fetchExportDictTypeReport,
    fetchGetDictTypeDetail,
    fetchSaveDictType,
    fetchUpdateDictType
  } from '@/api/system-manage'
  import DictDataPanel from './modules/dict-data-panel.vue'
  import DictTypeDialog from './modules/dict-type-dialog.vue'
  import DictTypeDetailDrawer from './modules/dict-type-detail-drawer.vue'
  import { createDictTypeTableColumns } from './dictTypeTable.columns'
@@ -81,10 +101,14 @@

  const { t } = useI18n()
  const { hasAuth } = useAuth()
  const userStore = useUserStore()
  const searchForm = ref(createDictTypeSearchState())
  const detailDrawerVisible = ref(false)
  const detailLoading = ref(false)
  const detailData = ref({})
  const dictDataPanelVisible = ref(false)
  const currentManagedDictTypeData = ref(buildDictTypeDialogModel())
  const exportLoading = ref(false)
  let handleDeleteAction = null

  const searchItems = computed(() => [
@@ -116,6 +140,24 @@
      }
    },
    {
      label: t('pages.system.dictType.table.description'),
      key: 'description',
      type: 'input',
      props: {
        clearable: true,
        placeholder: '请输入字典描述'
      }
    },
    {
      label: t('table.memo'),
      key: 'memo',
      type: 'input',
      props: {
        clearable: true,
        placeholder: '请输入备注'
      }
    },
    {
      label: t('table.status'),
      key: 'status',
      type: 'select',
@@ -125,6 +167,26 @@
          { label: t('common.status.normal'), value: 1 },
          { label: t('common.status.frozen'), value: 0 }
        ]
      }
    },
    {
      label: '开始日期',
      key: 'timeStart',
      type: 'date',
      props: {
        clearable: true,
        valueFormat: 'YYYY-MM-DD',
        type: 'date'
      }
    },
    {
      label: '结束日期',
      key: 'timeEnd',
      type: 'date',
      props: {
        clearable: true,
        valueFormat: 'YYYY-MM-DD',
        type: 'date'
      }
    }
  ])
@@ -153,6 +215,11 @@
    }
  }

  function openDictDataPanel(row) {
    currentManagedDictTypeData.value = buildDictTypeDialogModel(row)
    dictDataPanelVisible.value = true
  }

  const {
    columns,
    columnChecks,
@@ -178,6 +245,9 @@
          handleView: openDetail,
          handleEdit: openEditDialog,
          handleDelete: hasAuth('delete') ? (row) => handleDeleteAction?.(row) : null,
          handleManageData: hasAuth('system:dictData:list')
            ? (row) => openDictDataPanel(row)
            : null,
          t
        })
    },
@@ -216,6 +286,44 @@
  })
  handleDeleteAction = handleDelete

  async function handleExport() {
    exportLoading.value = true
    try {
      const response = await guardRequestWithMessage(
        fetchExportDictTypeReport(buildDictTypeSearchParams(searchForm.value), {
          headers: {
            Authorization: userStore.accessToken || ''
          }
        }),
        null,
        {
          timeoutMessage: '数据字典导出超时，已停止等待'
        }
      )
      if (!response) {
        return
      }
      if (!response.ok) {
        throw new Error(`导出失败，状态码：${response.status}`)
      }

      const blob = await response.blob()
      const downloadUrl = window.URL.createObjectURL(blob)
      const link = document.createElement('a')
      link.href = downloadUrl
      link.download = 'dict-type.xlsx'
      document.body.appendChild(link)
      link.click()
      link.remove()
      window.URL.revokeObjectURL(downloadUrl)
      ElMessage.success('导出成功')
    } catch (error) {
      ElMessage.error(error?.message || '导出失败')
    } finally {
      exportLoading.value = false
    }
  }

  function handleSearch(params) {
    replaceSearchParams(buildDictTypeSearchParams(params))
    getData()