jewpms/src/main/webapp/app/entities/dict/dict.component.ts

import { defineComponent, ref, computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { useAlertService } from '@/shared/alert/alert.service';
import axios from 'axios';
// @ts-ignore
import TreeTable from 'vue-table-with-tree-grid';
import buildPaginationQuery from '@/shared/sort/sorts';
import VueSelect from '@/shared/components/vue-select.vue';
import type { SelectOption } from '@/shared/components/vue-select.vue';
import JhiSortIndicator from '@/shared/sort/jhi-sort-indicator.vue';

export default defineComponent({
  compatConfig: { MODE: 3 },
  name: 'Dict',
  components: {
    TreeTable,
    VueSelect,
    JhiSortIndicator,
  },
  setup() {
    const { t: t$ } = useI18n();
    const alertService = useAlertService();

    const isFetching = ref(false);
    const dicts = ref([]);
    const statusDicts = ref([]);
    const showFilter = ref(false);
    const filterParams = ref({
      number: { op: '=', value: null },
      name: { op: '=', value: null },
      property: { op: '=', value: null },
      status: { op: '=', value: null },
    });

    const operatorSelect = [
      { value: '=', text: t$('entity.operator.equal') },
      { value: '>', text: t$('entity.operator.greaterThan') },
      { value: '<', text: t$('entity.operator.lessThan') },
      { value: '>=', text: t$('entity.operator.greaterOrEqual') },
      { value: '<=', text: t$('entity.operator.lessOrEqual') },
      { value: '!=', text: t$('entity.operator.notEqual') },
      { value: 'like', text: t$('entity.operator.like') },
      { value: 'not like', text: t$('entity.operator.notLike') },
    ];

    // 父级字典选项
    const numberOptions = ref<SelectOption[]>([]);
    const isLoadingNumberOptions = ref(false);

    const dict = ref({
      id: null,
      number: '',
      parentNumber: '',
      name: '',
      property: '',
      remark: '',
      status: '1',
      sortNo: 0,
      version: 0,
    });
    const removeId = ref(null);
    const deleteDialog = ref<any>(null);

    // 分页相关变量
    const page = ref(1);
    const itemsPerPage = ref(10);
    const totalItems = ref(0);
    const queryCount = ref(null);

    const columns = [
      {
        label: t$('jewpmsApp.dict.number'),
        prop: 'number',
      },
      {
        label: t$('jewpmsApp.dict.name'),
        prop: 'name',
      },
      {
        label: t$('jewpmsApp.dict.property'),
        prop: 'property',
      },
      {
        label: t$('jewpmsApp.dict.status'),
        prop: 'status',
        type: 'template',
        template: 'status',
      },
      {
        label: t$('jewpmsApp.dict.remark'),
        prop: 'remark',
      },
      {
        label: t$('jewpmsApp.dict.sortNo'),
        prop: 'sortNo',
      },
      {
        label: t$('entity.action.actions'),
        type: 'template',
        template: 'actions',
      },
    ];

    // 加载父级字典选项
    const loadNumberOptions = async (query = '') => {
      isLoadingNumberOptions.value = true;
      try {
        const params = {
          number: { name: '' },
          name: { name: '' },
          parentNumber: { op: 'IFNULL', value: '' },
          status: { op: '=', value: '1' },
        };
        //// 如果有查询条件，添加到请求参数中
        //if (query) {
        //  params['likeNumberName'] = query;
        //}
        const response = await axios.get('api/dicts', { params });
        numberOptions.value = response.data.map(item => ({
          label: `${item.number} - ${item.name}`,
          value: item.number,
        }));
      } catch (e) {
        alertService.showHttpError(e);
      } finally {
        isLoadingNumberOptions.value = false;
      }
    };

    const handleFilter = (toggleFilter = true) => {
      if (toggleFilter) {
        showFilter.value = !showFilter.value;
      }
      if (showFilter.value) {
        loadNumberOptions();
      }
      page.value = 1; // 重置页码
      handleSyncList();
    };

    const propOrder = ref('sortNo');
    const reverse = ref(false);

    const sort = () => {
      const result = [`${propOrder.value},${reverse.value ? 'desc' : 'asc'}`];
      if (propOrder.value !== 'id') {
        result.push('id');
      }
      return result;
    };

    const handlePageSizeChange = () => {
      page.value = 1; // 重置页码
      handleSyncList();
    };

    const changeOrder = (prop: string): void => {
      propOrder.value = prop;
      reverse.value = !reverse.value;
      handleSyncList();
    };

    const handleSyncList = async () => {
      isFetching.value = true;
      try {
        const params = Object.fromEntries([
          // 基础参数
          ...Object.keys(dict.value).flatMap(key => [
            [`${key}[name]`, ''],
            ...(key === 'parentNumber'
              ? [
                  [`${key}[op]`, 'IFNULL'],
                  [`${key}[value]`, ''],
                ]
              : []),
          ]),
          // 过滤参数
          ...(showFilter.value
            ? Object.entries(filterParams.value)
                .filter(([, filterParam]) => filterParam.value !== null && filterParam.value !== '')
                .flatMap(([key, filterParam]) => [
                  [`${key}[op]`, filterParam.op],
                  [`${key}[value]`, filterParam.value],
                ])
            : []),
        ]);
        // 获取分页数据
        const paginationQuery = {
          page: page.value - 1,
          size: itemsPerPage.value,
          sort: sort(),
        };
        // 获取状态字典列表
        const [dictsRes, statusDictsRes] = await Promise.all([
          axios.get(`api/dicts/tree?${buildPaginationQuery(paginationQuery)}`, {
            params: params,
          }),
          axios.get('api/dicts', {
            params: {
              number: { name: '' },
              name: { name: '' },
              parentNumber: { op: '=', value: 'StatusType' },
              status: { op: '=', value: '1' },
            },
          }),
        ]);

        dicts.value = dictsRes.data;
        statusDicts.value = statusDictsRes.data;
        // 从响应头中获取总条数，如果响应头中没有，则使用数据长度作为总条数
        const headerCount = dictsRes.headers['x-total-count'];
        totalItems.value = headerCount ? parseInt(headerCount, 10) : dicts.value ? dicts.value.length : 0;
      } catch (e) {
        alertService.showHttpError(e);
      } finally {
        isFetching.value = false;
      }
    };

    const handlePageChange = (newPage: number) => {
      page.value = newPage;
      handleSyncList();
    };

    const prepareDelete = (row: any) => {
      removeId.value = row.id;
      dict.value = { ...row };
      if (deleteDialog.value) {
        deleteDialog.value.show();
      }
    };

    const deleteDict = async () => {
      try {
        await axios.delete(`api/dicts/${removeId.value}`);
        alertService.showInfo(t$('jewpmsApp.dict.deleted'));
        removeId.value = null;
        handleSyncList();
        if (deleteDialog.value) {
          deleteDialog.value.hide();
        }
      } catch (e) {
        alertService.showHttpError(e);
      }
    };

    handleSyncList();

    return {
      isFetching,
      dicts,
      dict,
      removeId,
      deleteDialog,
      columns,
      page,
      itemsPerPage,
      totalItems,
      handleSyncList,
      handlePageChange,
      prepareDelete,
      deleteDict,
      showFilter,
      filterParams,
      handleFilter,
      statusDicts,
      // 新增返回属性
      numberOptions,
      isLoadingNumberOptions,
      loadNumberOptions,
      propOrder,
      reverse,
      changeOrder,
      operatorSelect,
      handlePageSizeChange,
    };
  },
});