leaser_front/src/views/setting/system/contract-settings/contract-file.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>
    <contractFileForm
      v-model:visible="showModal"
      :department-list-data="departmentListData"
      :is-edit="isEdit"
      @submitted="getWordSettingListData"
    />
  </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 {
    getWordSettingFromId,
    delWordSetting,
    getWordSettingList,
    disableWordSetting,
    getDepartmentList,
  } from '@/api/setting';
  import { ContractWordItem, DepartmentItem } from '@/types/setting';
  import { UserStatus } from '@/types/comm';
  import { camelToSnake } from '@/utils/caseConvert';
  // import contractNumberFormDrawer from './drawer/contract-number-form-drawer.vue';
  import contractFileForm from './modal/contract-file-form.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 contractWordList = ref<ContractWordItem[]>([]);
  const departmentListData = ref<DepartmentItem[]>([]);
  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: 'departmentName',
      key: 'departmentName',
      render: ({ record }) => record.departmentName || '-',
    },
    {
      title: '适用项目',
      dataIndex: 'projectName',
      key: 'projectName',
      render: ({ record }) => record.projectName || '-',
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      slotName: 'status',
    },
    {
      title: '操作',
      key: 'operate',
      slotName: 'operate',
      width: 200,
    },
  ];

  // 获取列表数据
  const getWordSettingListData = async () => {
    const params = {
      page: current.value,
      page_size: pageSize.value,
    };
    setLoading(true);
    const { code, data } = await getWordSettingList(params);
    if (code === 200 && data) {
      const { contractWordSetting, page } = data;
      contractWordList.value = Array.isArray(contractWordSetting)
        ? contractWordSetting
        : [];
      setData(contractWordList.value);
      if (page?.total) setTotal(page?.total);
    }
    setLoading(false);
  };
  // 部门列表
  const getDepartmentListData = async () => {
    try {
      const { code, data } = await getDepartmentList();
      if (code === 200) {
        departmentListData.value = data.departmentList;
      }
    } catch (error) {
      // console.error('获取部门列表失败:', error);
    }
  };
  // 分页事件处理
  const onPageChange = (page: number) => {
    setCurrent(page);
    current.value = page;
    getWordSettingListData();
  };
  const onPageSizeChange = (size: number) => {
    setPageSize(size);
    pageSize.value = size;
    getWordSettingListData();
  };
  const handleToggleStatus = async (id: number, currentStatus: UserStatus) => {
    try {
      const status: UserStatus = currentStatus === 1 ? 2 : 1;
      const param = { id, status };
      const { code, message } = await disableWordSetting(param);
      if (code === 200) {
        Message.success(message);
        getWordSettingListData();
      } else {
        Message.error(message);
      }
    } catch (error) {
      // 处理错误
    }
  };
  const handleDel = async (id: number) => {
    try {
      const { code, message } = await delWordSetting(id);
      if (code === 200) {
        Message.success(message);
        getWordSettingListData();
      } else {
        Message.error(message);
      }
    } catch (error) {
      // 处理错误
    }
  };
  const getWordSettingFromIdData = async (id: number) => {
    const { code, data } = await getWordSettingFromId(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 getWordSettingFromIdData(id);
    isEdit.value = true;
    // currentNumberInfo.value = info
    showModal.value = true;
  };
  // 初始化数据
  onMounted(() => {
    setColumns(columns);
    getWordSettingListData();
    getDepartmentListData();
  });
</script>