eims-master.git

<script setup lang="ts">
import type { Recordable } from '@vben/types';
 
import { computed, onMounted, ref } from 'vue';
 
import { useAccess } from '@vben/access';
import { Page, useVbenDrawer, useVbenModal, type VbenFormProps } from '@vben/common-ui';
import { $t } from '@vben/locales';
import { useUserStore } from '@vben/stores';
import { addFullName, getPopupContainer, getVxePopupContainer } from '@vben/utils';
 
import { Modal, Popconfirm, Space } from 'ant-design-vue';
 
import { useVbenVxeGrid, vxeCheckboxChecked, type VxeGridProps, vxeSortEvent } from '#/adapter/vxe-table';
import { delFixture, fixtureExport, listFixture } from '#/api/eims/fixture';
import { getDeptTree, userList } from '#/api/system/user';
import { commonDownloadExcel } from '#/utils/file/download';
import fixtureBorrowDrawer from '#/views/eims/fixture-borrow/fixture-borrow-drawer.vue';
 
import { columns, querySchema } from './data';
import fixtureDrawer from './fixture-drawer.vue';
import fixtureBorrowListDrawer from './fixture-borrow-list-drawer.vue';
import fixtureImportModal from './fixture-import-modal.vue';
import FixtureTypeTree from './fixture-type-tree.vue';
 
const userStore = useUserStore();
const userId = userStore.userInfo?.userId;
 
// 左边工具类型
const selectTypeId = ref<string[]>([]);
defineExpose({
  tableSelect
});
 
const formOptions: VbenFormProps = {
  commonConfig: {
    labelWidth: 80,
    componentProps: {
      allowClear: true
    }
  },
  collapsed: true,
  schema: querySchema(),
  wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
  handleReset: async () => {
    selectTypeId.value = [];
    // eslint-disable-next-line no-use-before-define
    const { formApi, reload } = tableApi;
    await formApi.resetForm();
    const formValues = formApi.form.values;
    formApi.setLatestSubmissionValues(formValues);
    await reload(formValues);
  },
  // 日期选择格式化
  fieldMappingTime: [
    ['purchaseDate', ['params[beginPurchaseDate]', 'params[endPurchaseDate]'], ['YYYY-MM-DD', 'YYYY-MM-DD']],
    ['deployDate', ['params[beginDeployDate]', 'params[endDeployDate]'], ['YYYY-MM-DD', 'YYYY-MM-DD']]
  ]
};
 
const gridOptions: VxeGridProps = {
  checkboxConfig: {
    // 高亮
    highlight: true,
    // 翻页时保留选中状态
    reserve: true
    // 点击行选中
    // trigger: 'row'
  },
  columns,
  height: 'auto',
  keepSource: true,
  pagerConfig: {},
  proxyConfig: {
    ajax: {
      query: async ({ page }, formValues = {}) => {
        // 部门树选择处理
        if (selectTypeId.value.length === 1) {
          formValues.fixtureType = selectTypeId.value[0];
        } else {
          Reflect.deleteProperty(formValues, 'fixtureType');
        }
        return await listFixture({
          pageNum: page.currentPage,
          pageSize: page.pageSize,
          ...formValues
        });
      }
    }
  },
  rowConfig: {
    isHover: true,
    keyField: 'fixtureId'
  },
  sortConfig: {
    // 远程排序
    remote: true,
    // 支持多字段排序 默认关闭
    multiple: true
  },
  id: 'eims-fixture-index'
};
 
const [BasicTable, tableApi] = useVbenVxeGrid({
  formOptions,
  gridOptions,
  gridEvents: {
    sortChange: (sortParams) => vxeSortEvent(tableApi, sortParams),
    cellClick: (e: any) => {
      const { row } = e;
      handleBorroeList(row)
    }
  }
});
 
const [FixtureDrawer, fixtureDrawerApi] = useVbenDrawer({
  connectedComponent: fixtureDrawer
});
const [FixtureBorrowListDrawer, fixtureBorrowListDrawerApi] = useVbenDrawer({
  connectedComponent: fixtureBorrowListDrawer,
  placement: 'left'
});
 
const [FixtureBorrowDrawer, fixtureBorrowDrawerApi] = useVbenDrawer({
  connectedComponent: fixtureBorrowDrawer
});
 
/**
 * 导入
 */
const [FixtureImportModal, fixtureImportModalApi] = useVbenModal({
  connectedComponent: fixtureImportModal
});
 
function handleImport() {
  fixtureImportModalApi.open();
}
 
function handleAdd() {
  fixtureDrawerApi.setData({});
  fixtureDrawerApi.open();
}
 
async function handleBorroeList(record: Recordable<any>) {
  fixtureBorrowListDrawerApi.setData({ fixtureId: record.id });
  fixtureBorrowListDrawerApi.open();
}
 
async function handleEdit(record: Recordable<any>) {
  fixtureDrawerApi.setData({ id: record.id });
  fixtureDrawerApi.open();
}
 
async function handleDelete(row: Recordable<any>) {
  await delFixture(row.id);
  await tableApi.query();
}
 
function handleMultiDelete() {
  const rows = tableApi.grid.getCheckboxRecords();
  const ids = rows.map((row: any) => row.id);
  Modal.confirm({
    title: '提示',
    okType: 'danger',
    content: `确认删除选中的${ids.length}条记录吗？`,
    onOk: async () => {
      await delFixture(ids);
      await tableApi.query();
    }
  });
}
function handleBorrow(row: Recordable<any>, status: string) {
  if (userId === null || userId === undefined || userId === '') {
    Modal.error({
      content: '获取用户信息失败，请重新登录后重试！',
      title: '提示'
    });
    return false;
  }
  // 工具台账借用状态TODO fixture_borrow_status 0-空闲 1-借出
  if (status === '0') {
    // 空闲时借出，新增一条借出数据
    fixtureBorrowDrawerApi.setData({ status, borrowUser: userId, fixtureId: row.id, fixtureName: row.fixtureName, fixturePage: true });
    fixtureBorrowDrawerApi.open();
  } else if (status === '1') {
    // 借出时归还，更新借出数据
    fixtureBorrowDrawerApi.setData({ id: row.curBorrowId });
    fixtureBorrowDrawerApi.open();
  }
}
function handleDownloadExcel() {
  commonDownloadExcel(fixtureExport, '工具台账', tableApi.formApi.form.values, {
    fieldMappingTime: formOptions.fieldMappingTime
  });
}
 
/**
 * 初始化部门选择
 */
async function setupDeptSelect() {
  // updateSchema
  const deptTree = await getDeptTree();
  // 选中后显示在输入框的值 即父节点 / 子节点
  addFullName(deptTree, 'label', ' / ');
  tableApi.formApi.updateSchema([
    {
      componentProps: (formModel) => ({
        class: 'w-full',
        fieldNames: {
          key: 'id',
          value: 'id',
          children: 'children'
        },
        getPopupContainer,
        async onSelect(deptId: number | string) {
          /** 根据部门ID加载用户 */
          await setupUserOptions(deptId);
          /** 变化后需要重新选择用户 */
          formModel.inventoryUser = undefined;
        },
        placeholder: '请选择',
        showSearch: true,
        treeData: deptTree,
        treeDefaultExpandAll: true,
        treeLine: { showLeafIcon: false },
        // 筛选的字段
        treeNodeFilterProp: 'label',
        // 选中后显示在输入框的值
        treeNodeLabelProp: 'fullName'
      }),
      fieldName: 'borrowDept'
    }
  ]);
}
 
/**
 * 用户的加载
 */
async function setupUserOptions(deptId: any) {
  const params = { deptId };
  const userPageResult = await userList({
    pageNum: 1,
    pageSize: 500,
    ...params
  });
  const options = userPageResult.rows.map((item) => ({
    label: item.nickName || item.userName,
    value: item.userId
  }));
  // 筛选
  const filterOption = (input: string, option: any) => {
    return option.label.toLowerCase().includes(input.toLowerCase());
  };
 
  const placeholder = options.length > 0 ? '请选择' : '该部门下暂无用户';
  tableApi.formApi.updateSchema([
    {
      componentProps: { options, placeholder, filterOption },
      fieldName: 'borrowUser'
    }
  ]);
}
 
onMounted(async () => {
  await setupDeptSelect();
});
 
const { hasAccessByRoles } = useAccess();
const isSuperAdmin = computed(() => hasAccessByRoles(['superadmin']));
/**
 * 只有借用用户和管理员可以点击归还
 */
function isBorrowUser(row: any) {
  return isSuperAdmin.value || row?.borrowUser === userId;
}
 
function isBorrow(row: any) {
  // TODO 对应字典状态fixture_borrow_status 0-空闲 1-借出
  return row.borrowStatus === '0' || row.borrowStatus === null;
}
 
function isReturn(row: any) {
  // TODO 对应字典状态fixture_borrow_status 0-空闲 1-借出
  return row.borrowStatus === '1';
}
 
// 选中数据
function tableSelect() {
  return tableApi.grid.getCheckboxRecords();
}
</script>
 
<template>
  <Page :auto-content-height="true">
    <div class="flex h-full gap-[8px]">
      <FixtureTypeTree v-model:select-type-id="selectTypeId" class="w-[260px]" @reload="() => tableApi.reload()" @select="() => tableApi.reload()" />
      <BasicTable class="flex-1 overflow-hidden" table-title="工具列表">
        <template #toolbar-tools>
          <Space>
            <a-button v-access:code="['eims:fixture:export']" @click="handleDownloadExcel">
              {{ $t('pages.common.export') }}
            </a-button>
            <a-button v-access:code="['eims:fixture:import']" @click="handleImport">
              {{ $t('pages.common.import') }}
            </a-button>
            <a-button
              :disabled="!vxeCheckboxChecked(tableApi)"
              danger
              type="primary"
              v-access:code="['eims:fixture:remove']"
              @click="handleMultiDelete"
            >
              {{ $t('pages.common.delete') }}
            </a-button>
            <a-button type="primary" v-access:code="['eims:fixture:add']" @click="handleAdd">
              {{ $t('pages.common.add') }}
            </a-button>
          </Space>
        </template>
 
        <template #action="{ row }">
          <Space>
            <ghost-button v-access:code="['eims:fixture:edit']" @click.stop="handleEdit(row)">
              {{ $t('pages.common.edit') }}
            </ghost-button>
            <ghost-button v-if="isBorrow(row)" class="btn-success" v-access:code="['eims:fixture:borrow']" @click="handleBorrow(row, '0')">
              借用
            </ghost-button>
            <ghost-button v-else-if="isReturn(row) && isBorrowUser(row)" v-access:code="['eims:fixture:borrow']" @click="handleBorrow(row, '1')">
              归还
            </ghost-button>
            <Popconfirm :get-popup-container="getVxePopupContainer" placement="left" title="确认删除？" @confirm="handleDelete(row)">
              <ghost-button danger v-access:code="['eims:fixture:remove']" @click.stop="">
                {{ $t('pages.common.delete') }}
              </ghost-button>
            </Popconfirm>
          </Space>
        </template>
      </BasicTable>
    </div>
    <FixtureDrawer @reload="tableApi.query()" />
    <!--工具借出归还操作-->
    <FixtureBorrowDrawer @reload="tableApi.query()" />
    <!--查看工具借出归还记录-->
    <FixtureBorrowListDrawer />
    <FixtureImportModal @reload="tableApi.query()" />
  </Page>
</template>