oa_front/src/views/contract/index.vue

<template>
  <div v-if="columns?.length">
    <DynamicTable
      row-key="id"
      header-title="合同管理"
      title-tooltip=""
      :data-request="Api.contract.contractList"
      :columns="columns"
      bordered
      size="small"
    >
      <template #toolbar>
        <a-button
          type="primary"
          :disabled="!$auth('system:role:create')"
          @click="openEditModal({})"
        >
          新增
        </a-button>
      </template>
    </DynamicTable>
  </div>
</template>

<script setup lang="ts">
  import { useTable } from '@/components/core/dynamic-table';
  import { baseColumns, type TableColumnItem, type TableListItem } from './columns';
  import Api from '@/api/';
  import { useDictStore } from '@/store/modules/dict';
  import { onMounted, ref } from 'vue';
  import { DictEnum } from '@/enums/dictEnum';
  import { useFormModal } from '@/hooks/useModal';
  import { contractSchemas } from './formSchemas';
import { formatToDate } from '@/utils/dateUtil';
  defineOptions({
    name: 'Contract',
  });
  const [DynamicTable, dynamicTableInstance] = useTable();
  const [showModal] = useFormModal();
  const { getDictItemsByCode } = useDictStore();
  const contractTypes = ref<API.DictItemEntity[]>([]);

  const getContractTypes = async () => {
    contractTypes.value = await getDictItemsByCode(DictEnum.ContractType);
  };
  // contractList;
  let columns = ref<TableColumnItem[]>();
  onMounted(() => {
    getContractTypes().then((res) => {
      columns.value = [
        ...baseColumns({
          contractTypes: contractTypes.value,
        }),
        {
          title: '操作',
          maxWidth: 100,
          width: 100,
          minWidth:100,
          dataIndex: 'ACTION',
          hideInSearch: true,
          fixed: 'right',
          actions: ({ record }) => [ 
            {
              icon: 'ant-design:edit-outlined',
              tooltip: '编辑',
              auth: {
                perm: 'app:contract:update',
                effect: 'disable',
              },
              onClick: () => openEditModal(record),
            },
            {
              icon: 'ant-design:delete-outlined',
              color: 'red',
              tooltip: '删除此合同',
              auth: 'app:contract:delete',
              popConfirm: {
                title: '你确定要删除吗？',
                placement: 'left',
                onConfirm: () => delRowConfirm(record.id),
              },
            },
          ],
        },
      ];
    });
  });

  /**
   * @description 打开新增/编辑弹窗
   */
  const openEditModal = async (record: Partial<TableListItem>) => {
    const [formRef] = await showModal({
      modalProps: {
        title: `${record.id ? '编辑' : '新增'}合同`,
        width: '50%',
        onFinish: async (values) => {
          const params = {
            ...values,
            signingDate: formatToDate(values.signingDate),
            deliveryDeadline: formatToDate(values.deliveryDeadline),
          };
          if (record.id) {
            await Api.contract.contractUpdate({ id: record.id }, params);
          } else {
            await Api.contract.contractCreate(params);
          }
          dynamicTableInstance?.reload();
        },
      },
      formProps: {
        labelWidth: 100,
        schemas: contractSchemas(contractTypes.value),
      },
    });

    // 如果是编辑的话，需要获取角色详情
    if (record.id) {
      const info = await Api.contract.contractInfo({ id: record.id });
      formRef?.setFieldsValue({
        ...info,
      });
    }
  };
  function delRowConfirm(record) {}
</script>

<style lang="less" scoped></style>