leaser_front/src/views/setting/system/contract-settings/contract-terms.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>
    <contractNumberFormDrawer
      v-model:visible="showModal"
      :record="currentTermInfo"
      :is-edit="isEdit"
      @submitted="getTermsSettingListData"
    />
  </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 {
    getTermsSettingList,
    getTermsSettingFromId,
    disableTermsSetting,
    delTermsSetting,
  } from '@/api/setting';
  import { TermSettingItem } from '@/types/setting';
  import { UserStatus } from '@/types/comm';
  import contractNumberFormDrawer from './drawer/contract-terms-form-drawer.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<TermSettingItem[]>([]);
  const showModal = ref<boolean>(false);
  const isEdit = ref<boolean>(false);
  const currentTermInfo = ref<any>(null);
  // 列配置
  const columns: TableColumnData[] = [
    {
      title: '条款名称',
      dataIndex: 'name',
      key: 'name',
      width: 120,
      ellipsis: true,
    },
    {
      title: '条款类别',
      dataIndex: 'type',
      key: 'type',
      ellipsis: true,
      render: ({ record }) => record.type || '-',
    },
    {
      title: '条款项',
      dataIndex: 'feeStr',
      key: 'feeStr',
      render: ({ record }) => record.feeStr || '-',
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      slotName: 'status',
    },
    {
      title: '操作',
      key: 'operate',
      slotName: 'operate',
      width: 200,
    },
  ];
  // 获取列表数据
  const getTermsSettingListData = async () => {
    const params = {
      page: current.value,
      page_size: pageSize.value,
    };
    setLoading(true);
    const { code, data } = await getTermsSettingList(params);
    if (code === 200 && data) {
      const { contractTermsSetting, page } = data;
      contractNumbeList.value = Array.isArray(contractTermsSetting)
        ? contractTermsSetting
        : [];
      setData(contractNumbeList.value);
      if (page?.total) setTotal(page?.total);
    }
    setLoading(false);
  };

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