leaser_front/src/views/setting/system/contract-settings/contract-number.vue

<template>
  <a-card title="合同编号设置">
    <template #extra>
      <a-button type="primary" @click="handleAddContractNumber"
        ><icon-plus />新增</a-button
      >
    </template>
    <DataTable
      :data="renderData"
      :columns="projectColumn"
      :loading="loading"
      :total="total"
      :current="current"
      :page-size="pageSize"
      pagination
      @page-change="onPageChange"
      @page-size-change="onPageSizeChange"
    >
      <template #realname="{ record }">
        <span>{{ record.realname }}</span>
        <icon-idcard v-if="record.isManager === 1" />
      </template>
      <template #status="{ record }">
        <a-tag :color="record.status == 1 ? 'green' : 'red'">
          {{ record.status == 1 ? $t('enable') : $t('disable') }}</a-tag
        >
      </template>
      <template #operate="{ record }">
        <a-space>
          <a-button type="primary" @click="handleEditContractNumber(record.id)">
            {{ $t('edit') }}</a-button
          >
          <a-popover trigger="click" position="bottom">
            <a-button>{{ $t('more') }}</a-button>
            <template #content>
              <a-space direction="vertical">
                <a-button @click="handleToggleStatus(record.id, record.status)">
                  {{ record.status == 1 ? $t('disable') : $t('enable') }}
                </a-button>
                <a-button status="danger" @click="handleDel(record.id)">
                  {{ $t('delete') }}
                </a-button>
              </a-space>
            </template>
          </a-popover>
        </a-space>
      </template>
    </DataTable>
    <contractNumberFormModal
      v-model:visible="showModal"
      :record="currentNumberInfo"
      :is-edit="isEdit"
      @submitted="getCodeSettingListData"
    />
  </a-card>
</template>

<script lang="ts" setup>
  import { ref, onMounted } from 'vue';
  import type { TableColumnData } from '@arco-design/web-vue';
  import { Message } from '@arco-design/web-vue';
  import useDataTable from '@/composables/useDataTable';
  import {
    getCodeSettingList,
    getCodeSettingFromId,
    disableCodeSetting,
    delCodeSetting,
  } from '@/api/setting';
  import { ContractTermInfo, UserStatus } from '@/types/setting';
  import { camelToSnake } from '@/utils/caseConvert';
  import contractNumberFormModal from './modal/contract-number-form-modal.vue';

  const {
    data: renderData,
    columns: projectColumn,
    loading,
    total,
    current,
    pageSize,
    setData,
    setColumns,
    setLoading,
    setTotal,
    setCurrent,
    setPageSize,
  } = useDataTable({
    initialPage: 1,
    initialPageSize: 10,
    pageSizeOptions: [10, 20, 50, 100],
  });

  const contractNumbeList = ref<ContractTermInfo[]>([]);
  const showModal = ref<boolean>(false);
  const isEdit = ref<boolean>(false);
  const currentNumberInfo = ref<any>(null);
  // 列配置
  const columns: TableColumnData[] = [
    {
      title: '编号名称',
      dataIndex: 'name',
      key: 'name',
      width: 120,
      ellipsis: true,
    },
    {
      title: '编号预览',
      dataIndex: 'code',
      key: 'code',
      width: 250,
      ellipsis: true,
      // slotName: 'code',
    },
    {
      title: '创建合同模板关联',
      dataIndex: 'contractSettingStr',
      key: 'contractSettingStr',
      render: ({ record }) => record.contractSettingStr || '-',
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      slotName: 'status',
    },
    {
      title: '操作',
      key: 'operate',
      slotName: 'operate',
      width: 200,
    },
  ];

  // 获取列表数据
  const getCodeSettingListData = async () => {
    const params = {
      page: current.value,
      page_size: pageSize.value,
    };
    setLoading(true);
    const { code, data } = await getCodeSettingList(params);
    if (code === 200 && data) {
      const { contractCodeSetting, page } = data;
      contractNumbeList.value = Array.isArray(contractCodeSetting)
        ? contractCodeSetting
        : [];
      setData(contractNumbeList.value);
      if (page?.total) setTotal(page?.total);
    }
    setLoading(false);
  };

  // 分页事件处理
  const onPageChange = (page: number) => {
    setCurrent(page);
    current.value = page;
    getCodeSettingListData();
  };
  const onPageSizeChange = (size: number) => {
    setPageSize(size);
    pageSize.value = size;
    getCodeSettingListData();
  };
  const handleToggleStatus = async (id: number, currentStatus: UserStatus) => {
    try {
      const status: UserStatus = currentStatus === 1 ? 2 : 1;
      const param = { id, status };
      const { code, message } = await disableCodeSetting(param);
      if (code === 200) {
        Message.success(message);
        getCodeSettingListData();
      } else {
        Message.error(message);
      }
    } catch (error) {
      // 处理错误
    }
  };
  const handleDel = async (id: number) => {
    try {
      const { code, message } = await delCodeSetting(id);
      if (code === 200) {
        Message.success(message);
        getCodeSettingListData();
      } else {
        Message.error(message);
      }
    } catch (error) {
      // 处理错误
    }
  };
  const getCodeSettingFromIdData = async (id: number) => {
    const { code, data } = await getCodeSettingFromId(id);
    if (code === 200 && data) {
      const { contractCodeSetting } = data;
      currentNumberInfo.value = contractCodeSetting || null;
      currentNumberInfo.value.arrange = camelToSnake(
        currentNumberInfo.value.arrange
      );
    }
  };
  const handleAddContractNumber = () => {
    currentNumberInfo.value = null;
    isEdit.value = false;
    showModal.value = true;
  };
  const handleEditContractNumber = async (id: number) => {
    await getCodeSettingFromIdData(id);
    isEdit.value = true;
    // currentNumberInfo.value = info
    showModal.value = true;
  };
  // 初始化数据
  onMounted(() => {
    setColumns(columns);
    getCodeSettingListData();
  });
</script>