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

import { defineComponent, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';
import { useAlertService } from '@/shared/alert/alert.service';
import buildPaginationQuery from '@/shared/sort/sorts';
import axios from 'axios';

export default defineComponent({
  compatConfig: { MODE: 3 },
  name: 'Stock',
  setup() {
    const { t: t$ } = useI18n();
    const alertService = useAlertService();
    const router = useRouter();

    const isFetching = ref(false);
    const stocks = ref([]);
    const statusDicts = ref([]);
    const stock = ref({
      id: null,
      number: '',
      name: '',
      property: '',
      remark: '',
      status: '1',
      sortNo: 0,
      version: 0,
    });
    const removeId = ref(null);
    const deleteDialog = ref(null);
    const showFilter = ref(false);
    const propOrder = ref('id');
    const reverse = ref(false);

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

    // 过滤参数
    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 handleFilter = () => {
      showFilter.value = !showFilter.value;
      page.value = 1; // 重置页码
      handleSyncList();
    };

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

    const handleSyncList = async () => {
      isFetching.value = true;
      try {
        const [stocksRes, statusDictsRes] = await Promise.all([
          axios.get(
            `api/stocks?${buildPaginationQuery({
              page: page.value - 1,
              size: itemsPerPage.value,
              sort: sort(),
            })}`,
            {
              params: Object.fromEntries([
                ...Object.keys(stock.value).map(key => [`${key}[name]`, '']),
                ...(showFilter.value
                  ? Object.entries(filterParams.value)
                      .filter(([, filterParam]) => filterParam.value !== null && filterParam.value !== '')
                      .flatMap(([key, filterParam]) => [
                        [`${key}[op]`, filterParam.op],
                        [`${key}[value]`, filterParam.value],
                      ])
                  : []),
              ]),
            },
          ),
          axios.get('api/dicts', {
            params: {
              number: { name: '' },
              name: { name: '' },
              parentNumber: { op: '=', value: 'StatusType' },
              status: { op: '=', value: '1' },
            },
          }),
        ]);
        stocks.value = stocksRes.data;
        statusDicts.value = statusDictsRes.data;
        totalItems.value = stocksRes.headers['x-total-count'] || stocksRes.data.length;
      } catch (e) {
        alertService.showHttpError(e);
      } finally {
        isFetching.value = false;
      }
    };

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

    const prepareDelete = row => {
      removeId.value = row.id;
      stock.value = { ...row };
      deleteDialog.value.show();
    };

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

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

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

    handleSyncList();

    return {
      stocks,
      stock,
      isFetching,
      showFilter,
      filterParams,
      page,
      itemsPerPage,
      totalItems,
      propOrder,
      reverse,
      handleSyncList,
      handleFilter,
      handlePageChange,
      handlePageSizeChange,
      prepareDelete,
      deleteStock,
      operatorSelect,
      changeOrder,
      statusDicts,
    };
  },
});