canrd-outside / order-erp-front · Files

<template>
  <div>
    <BasicTable @register="registerTable" :bordered="true" @field-value-change="handleFieldValueChange">
      <template #headerTop>
        <a-alert type="info" show-icon>
          <template #message>
            <template v-if="checkedKeys.length > 0">
              <span>已选中{{ checkedKeys.length }}条记录(可跨页)</span>
              <a-button
                :style="{ borderRadius: '5px 5px 5px 5px' }"
                type="link"
                @click="handleClearChoose"
                size="small"
                >清空</a-button
              >
            </template>
            <template v-else>
              <span>未选中任何订单</span>
            </template>
          </template>
        </a-alert>
      </template>
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'picUrl'">
          <img :z-index="100000" :width="50" :height="50" :src="record?.picUrl" />
        </template>
        <template v-if="column.key === 'action'">
          <TableAction 
            :actions="createActions(record)" 
            :dropDownActions="createDropActions(record)" 
           />
        </template>
        <!-- <template v-if="column.key === 'relationValue'">
          <a-input
            v-if="record.settingValue === 'A01'"
            v-model:value="record.settingValue"
            :max-length="50"
          />
          <span v-else style="color: red">
            {{ record.settingValue }}
          </span>
        </template> -->
      </template>
      <template #toolbar>

        <a-button
          type="primary"
          @click="handleExport"
          v-if="role == ROLE.ADMIN || role == ROLE.FINANCE"
          :style="{ borderRadius: '5px 5px 5px 5px' }"
          >导出</a-button
        >
        <a-button
          type="primary"
          @click="handleAllProjectNoQuery"
          style="margin-left: 8px;position: fixed;right: 29%;top: 107.5px;"
        >全选</a-button>
      </template>
    </BasicTable>
    <!-- <BasicModal
      title="拒绝原因"
      width="30%"
      @register="registerModal"
      @visible-change="handleClose"
      @ok="handleOk"
      wrapClassName="approve-modal"
    >
      <div className="pa-8">
        <a-textarea :rows="6" placeholder="请输入拒绝原因" v-model:value="message" />
      </div>
    </BasicModal> -->
    <CheckDetail @register="checkModalRegister" :onGoFormDetail="handleGoFormDetail" />
    <FinanceEdit @register="registerFinanceEdit" @success="handleSuccess" />
    <HistoryDetail @register="registerHistoryDetail" />
  </div>
</template>
<script setup lang="ts">
  import { BasicTable, useTable, TableAction } from '/@/components/Table';
  import { getPackageProfit, setPackStatus, setCommissionStatus } from '@/api/project/invoice';
  import { searchFormSchema, COLUMNS, allProjectNoOptions } from './data';
  import { BasicModal, useModal } from '/@/components/Modal';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { onMounted, ref, computed, h } from 'vue';
  import { Modal } from 'ant-design-vue';
  import { useDrawer } from '/@/components/Drawer';
  import FinanceEdit from './FinanceEdit.vue';
  import CheckDetail from './CheckDetail.vue';
  import HistoryDetail from './HistoryDetail.vue';
  import axios from 'axios';
  import { FilePptOutlined } from '@ant-design/icons-vue';
  import { useOrderStoreWithOut } from '/@/store/modules/order';
  import { useUserStoreWithOut } from '/@/store/modules/user';
  import { RoleEnum } from '/@/enums/roleEnum';
  import { ROLE } from '../../../type.d';

  const { createMessage } = useMessage();
  const { error } = createMessage;
  const message = ref();
  const checkedKeys = ref<string[]>([]);
  // Define arrays to store collected data from selected rows
  const orderIds = ref<number[]>([]);
  const projectNo = ref<string[]>([]);
  const customerCode = ref<string[]>([]);
  const innerNo = ref<string[]>([]);
  const productionDepartment = ref<string[]>([]);
  const detailProjectNoKeys = ref<string[]>([]);
  const orderStore = useOrderStoreWithOut();
  const [checkModalRegister, { openDrawer: openCheckDetailDrawer }] = useDrawer();
  const [registerFinanceEdit, { openDrawer: openFinanceEdit }] = useDrawer();
  const [registerHistoryDetail, { openDrawer: openHistoryDetail }] = useDrawer();
  const userStore = useUserStoreWithOut();
  const user = userStore.getUserInfo;
  const role = computed(() => {
    return user?.roleSmallVO?.code;
  });
  const handleOk = (record) => {
    // 修改父组件的状态
    closeModal();
  };
  const handleClose = (visible: boolean) => {
    if (!visible) {
      message.value = '';
    }
  };
  const [registerTable, { reload, getSelectRowKeys, getDataSource, setSelectedRowKeys, setProps, getForm }] = useTable({
    title: '',
    api: getPackageProfit,
    bordered: true,
    columns: COLUMNS,
    clickToRowSelect: false,
    formConfig: {
      labelWidth: 120,
      schemas: searchFormSchema,
      autoSubmitOnEnter: true,
      resetFunc: async () => {
        localStorage.removeItem('isAllSelected');
      },
    },
    // 处理查询参数，确保项目号数组正确传递
    handleSearchInfoFn: (searchInfo) => {
      // 获取表单实例
      const formInstance = getForm();
      if (formInstance) {
        const formValues = formInstance.getFieldsValue();
        
        // 强制覆盖searchInfo，确保使用表单中的值
        if (formValues.projectNo && formValues.projectNo.length > 0) {
          // 确保传递的是数组而不是Proxy对象，并去重
          const projectNoArray = [...new Set(formValues.projectNo)];
          // 强制覆盖，不使用原始值
          searchInfo = {
            ...searchInfo,
            projectNo: projectNoArray
          };
        } else {
          // 如果表单中没有项目号，清空查询条件
          searchInfo = {
            ...searchInfo,
            projectNo: []
          };
        }
      }
      
      return searchInfo;
    },
    rowKey: (record) => record.orderId,
    // Add custom row props to prevent selection when clicking rows
    customRow: () => {
      return {
        onClick: (e) => {
          // Prevent row selection when clicking anywhere except checkboxes
          if (!e.target.closest('.ant-checkbox-wrapper')) {
            e.stopPropagation();
          }
        },
      };
    },
    rowSelection: {
      type: 'checkbox',
      selectedRowKeys: checkedKeys as any,
      onSelect: onSelect,
      onSelectAll: onSelectAll,
      checkStrictly: true,
    },
    useSearchForm: true,
    showTableSetting: true,
    showIndexColumn: false,
    tableSetting: {
      setting: false,
    },
    actionColumn: {
      width: 260,
      title: 'Action',
      dataIndex: 'action',
    },
  });

  function createActions(record: any): any[] {
    if (!record.editable) {
      return [
        {
          label: '财务编辑',
          onClick: handleFinanceEdit.bind(null, record),
        },
        // {
        //   label: '编辑',
        //   onClick: handleEdit.bind(null, record),
        // },
        // {
        //   label: '删除',
        //   popConfirm: {
        //     title: '确认删除？',
        //     confirm: handleDelete.bind(null, record),
        //   },
        // },
        {
          label: '申请权限',
          // popConfirm: {
          //   title: '确认申请？',
          //   confirm: handleFalse.bind(null, record),
          // },
          onClick: handleFalse.bind(null, record),
        },
        ...(role.value === ROLE.ADMIN ? [
          {
            label: '审核通过',
            onClick: () => {
              // 如果状态为未完成(-1)，则不响应
              if (record.packStatus === -1) {
                createMessage.warning('请先完成财务编辑');
                return;
              }
              else{
                showAuditOptions(record);
              }
            },
          },
        ] : []),
      ];
    }
    return [
      {
        label: '保存',
        onClick: handleSave.bind(null, record),
      },
      {
        label: '取消',
        popConfirm: {
          title: '是否取消编辑',
          confirm: handleCancel.bind(null, record),
        },
      },
    ];
  }

  function createDropActions(record: any) {
    if (!record.editable) {
      const actions = [
        {
          label: '历史记录',
          onClick: handleHistoryDetail.bind(null, record),
        },
      ];
      return actions;
    }
  }

  function handleFinanceEdit(record) {
    openFinanceEdit(true, {
      data: record,
    });
  }

  function handleFalse(record, e) {
    openCheckDetailDrawer(true, record);
    e?.stopPropagation();
    return false;
  }
  function handleSuccess() {
    setTimeout(() => {
      reload();
    }, 50);
  }
  // async function handleFalse(record: any) {
  //   console.log(record);
  //   // openModal(true, { record });
  // }

  async function handleSave(record) {
    await saveConfig({ id: record.id, relationValue: record.relationValue });
    handleCancel(record);
    reload();
  }
  function handleEdit(record: any) {
    // if (record.settingValue == 'A01') {
    //   error('请勿连续点击生成按钮,需要等待三秒再点击生成');
    // } else {
    record.onEdit?.(true);
    // }
  }

  function handleCancel(record) {
    record.onEdit?.(false, false);
  }

  // async function handleDelete(record) {
  //   await deleteConfig({ ids: [record.id] });
  //   reload();
  // }
  
  async function handleStatus(record, status) {
    try {
      // 检查必要参数是否存在
      if (!record.orderId) {
        createMessage.error('缺少必要的参数：orderId');
        return;
      }
      
      // 根据不同的状态调用不同的接口
      if (status === 'approved') {
        await setPackStatus({ 
          orderId: record.orderId,
          packStatus: 1  // 已发放状态
        });
        createMessage.success('设置为已发放成功！');
      } else if (status === 'sentButNotPaid') {
        await setPackStatus({ 
          orderId: record.orderId,
          packStatus: 2  // 应发但不发状态
        });
        createMessage.success('设置为应发但不发成功！');
      } else {
        // 默认已发放
        await setPackStatus({ 
          orderId: record.orderId,
          packStatus: 1  // 默认已发放状态
        });
        createMessage.success('状态更新成功！');
      }
      
      reload();
    } catch (error) {
      console.error('Error updating status:', error);
      createMessage.error('状态更新失败：' + (error.message || '未知错误'));
    }
  }

  // 显示审核选项
  function showAuditOptions(record) {
    // 检查当前状态
    const isReviewed = record.packStatus === 1; // 已发放状态
    const isSentButNotPaid = record.packStatus === 2; // 应发但不发状态
    const hasCommission = record.copyCommission; // 是否有提成配置
    
    // 使用 Modal 显示选项
    Modal.confirm({
      title: '选择审核结果',
      content: h('div', [
        h('div', { style: 'margin-top: 16px;' }, [
          // 已发放按钮
          h('button', {
            style: isReviewed 
              ? 'margin-right: 8px; padding: 4px 8px; color: #666; background-color: #f5f5f5; border-radius: 2px; cursor: not-allowed; border: 1px solid #d9d9d9;' 
              : 'margin-right: 8px; padding: 4px 8px; color: white; background-color: #40a9ff; border-radius: 2px; cursor: pointer;',
            disabled: isReviewed, // 如果已发放则禁用
            onClick: () => {
              if (!isReviewed) {
                if (hasCommission) {
                  Modal.destroyAll();
                  handleStatus(record, 'approved'); // 已发放
                } else {
                  createMessage.error('请先在系统中配置包装提成金额');
                }
              }
            }
          }, isReviewed ? '已发放' : '已发放'),
          // 应发但不发按钮
          h('button', {
            style: (isReviewed || isSentButNotPaid)
              ? 'margin-right: 8px; padding: 4px 8px; color: #666; background-color: #f5f5f5; border-radius: 2px; cursor: not-allowed; border: 1px solid #d9d9d9;' 
              : 'margin-right: 8px; padding: 4px 8px; color: white; background-color: #40a9ff; border-radius: 2px; cursor: pointer;',
            disabled: isReviewed || isSentButNotPaid, // 如果已发放或应发但不发则禁用
            onClick: () => {
              if (!isReviewed && !isSentButNotPaid) {
                if (hasCommission) {
                  Modal.destroyAll();
                  handleStatus(record, 'sentButNotPaid'); // 应发但不发
                } else {
                  createMessage.error('请先在系统中配置包装提成金额');
                }
              }
            }
          }, (isReviewed || isSentButNotPaid) ? '应发但不发' : '应发但不发'),
        ])
      ]),
      onCancel: () => {
        Modal.destroyAll();
      }
    });
  }
  
  function handleHistoryDetail(record) {
    openHistoryDetail(true, {
      data: record,
    });
  }
  
  function handleGoFormDetail() {
    // Add your logic for form detail navigation
  }

  onMounted(async () => {
    await orderStore.getDict();
  });

  function handleClearChoose() {
    checkedKeys.value = [];
    // Clear all collected data arrays
    orderIds.value = [];
    projectNo.value = [];
    customerCode.value = [];
    innerNo.value = [];
    productionDepartment.value = [];
    detailProjectNoKeys.value = []; // Add this line
  }

  function handleExport() {
    // Get current search parameters from the form
    const values = getForm().getFieldsValue();
    
    // Create export parameters based on whether orderIds are selected
    let exportParams;
    
    // If orderIds are selected, only use those and ignore search params
    if (orderIds.value.length > 0) {
      exportParams = {
        orderIds: orderIds.value
      };
    } 
    // Otherwise use the search parameters
    else {
      exportParams = {
        ...values,
        projectNo: values.projectNo || undefined,
        customerCode: values.customerCode || undefined,
        innerNo: values.innerNo || undefined,
        productionDepartment: values.productionDepartment || undefined
      };
    }
    
    
    const token = userStore.getToken;
    axios
      .post(
        '/basic-api/order/cost/businessProfitDetail/exportExcel',
        exportParams,
        {
          headers: {
            Authorization: `${token}`, // 去掉引号
          },
          responseType: 'blob', // 设置响应类型为 'blob'
        },
      )
      .then((response) => {
        // 创建一个 Blob 对象来保存二进制数据
        const blob = new Blob([response.data], { type: 'application/zip' });
        const getFormattedDate = (): string => {
          const date = new Date();

          const year = date.getFullYear();
          const month = String(date.getMonth() + 1).padStart(2, '0');
          const day = String(date.getDate()).padStart(2, '0');

          const hours = String(date.getHours()).padStart(2, '0');
          const minutes = String(date.getMinutes()).padStart(2, '0');
          const seconds = String(date.getSeconds()).padStart(2, '0');

          return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
        };
        const date = getFormattedDate();
        // 创建一个链接元素用于下载
        const link = document.createElement('a');
        link.href = window.URL.createObjectURL(blob);
        link.download = `业务利润分析表${date}.xlsx`; // 你可以为文件命名
        document.body.appendChild(link);
        link.click(); // 自动点击链接，触发下载
        document.body.removeChild(link); // 下载完成后移除链接
      })
      .catch((error) => {
        console.error(error);
      });
    handleClearChoose();
    reload();
  }
  async function onSelect(record, selected: boolean, _selectedRows, nativeEvent) {
    // Only process selection if it's coming from a checkbox click or programmatically
    // This checks if the event is from clicking the row - then we ignore it
    if (nativeEvent && nativeEvent.target && !nativeEvent.target.closest('.ant-checkbox-wrapper')) {
      return;
    }
    
    const rowKey = record.orderId;
    if (selected) {
      checkedKeys.value = [...checkedKeys.value, rowKey];

      // Add data from the selected row to the corresponding arrays
      if (record.orderId !== undefined && !orderIds.value.includes(record.orderId)) {
        orderIds.value.push(record.orderId);
      }
      
      if (record.projectNo !== undefined && !projectNo.value.includes(record.projectNo)) {
        projectNo.value.push(record.projectNo);
      }
      
      if (record.customerCode !== undefined && !customerCode.value.includes(record.customerCode)) {
        customerCode.value.push(record.customerCode);
      }
      
      if (record.innerNo !== undefined && !innerNo.value.includes(record.innerNo)) {
        innerNo.value.push(record.innerNo);
      }
      
      if (record.productionDepartment !== undefined && !productionDepartment.value.includes(record.productionDepartment)) {
        productionDepartment.value.push(record.productionDepartment);
      }
      
      if (record.detailProjectNoKey !== undefined && !detailProjectNoKeys.value.includes(record.detailProjectNoKey)) {
        detailProjectNoKeys.value.push(record.detailProjectNoKey);
      }
    } else {
      checkedKeys.value = checkedKeys.value.filter((key) => key !== rowKey);

      // Remove data from the deselected row from the corresponding arrays
      if (record.orderId !== undefined) {
        orderIds.value = orderIds.value.filter(id => id !== record.orderId);
      }
      
      if (record.projectNo !== undefined) {
        projectNo.value = projectNo.value.filter(no => no !== record.projectNo);
      }
      
      if (record.customerCode !== undefined) {
        customerCode.value = customerCode.value.filter(code => code !== record.customerCode);
      }
      
      if (record.innerNo !== undefined) {
        innerNo.value = innerNo.value.filter(no => no !== record.innerNo);
      }
      
      if (record.productionDepartment !== undefined) {
        productionDepartment.value = productionDepartment.value.filter(dept => dept !== record.productionDepartment);
      }
    }
    setSelectedRowKeys(checkedKeys.value as any);
  }

  function onSelectAll(selected: boolean, selectedRows: any[]) {
    if (selected) {
      // First clear all previous selections to avoid duplicates
      checkedKeys.value = [];
      orderIds.value = [];
      projectNo.value = [];
      customerCode.value = [];
      innerNo.value = [];
      productionDepartment.value = [];
      
      // Add all selected rows
      selectedRows.forEach((row) => {
        const rowKey = row.orderId;
        checkedKeys.value.push(rowKey);

        // Add data from each selected row to the corresponding arrays
        if (row.orderId !== undefined) {
          orderIds.value.push(row.orderId);
        }
        
        if (row.projectNo !== undefined) {
          projectNo.value.push(row.projectNo);
        }
        
        if (row.customerCode !== undefined) {
          customerCode.value.push(row.customerCode);
        }
        
        if (row.innerNo !== undefined) {
          innerNo.value.push(row.innerNo);
        }
        
        if (row.productionDepartment !== undefined) {
          productionDepartment.value.push(row.productionDepartment);
        }
      });
    } else {
      // Clear all selections when deselecting all
      checkedKeys.value = [];
      orderIds.value = [];
      projectNo.value = [];
      customerCode.value = [];
      innerNo.value = [];
      productionDepartment.value = [];
    }
    setSelectedRowKeys(checkedKeys.value as any);
  }

  function handleAllProjectNoQuery() {
    // 检查是否有项目号选项
    if (!allProjectNoOptions.value || allProjectNoOptions.value.length === 0) {
      createMessage.warn('没有可查询的项目号！');
      return;
    }
    
    // 获取所有项目号的value值
    const allProjectNos = allProjectNoOptions.value.map(item => {
      // 处理不同的数据结构
      if (typeof item === 'string') {
        return item;
      } else if (item && typeof item === 'object' && 'value' in item) {
        return item.value;
      } else if (item && typeof item === 'object' && 'label' in item) {
        return item.label;
      }
      return item;
    }).filter(Boolean); // 过滤掉空值
    
    if (allProjectNos.length === 0) {
      createMessage.warn('没有有效的项目号！');
      return;
    }
    
    try {
      // 提示用户全选成功
      createMessage.success(`已全选 ${allProjectNos.length} 个项目号`);
      
      // 获取表单实例并设置表单值，将项目号填入搜索框
      const formInstance = getForm();
      if (formInstance && formInstance.setFieldsValue) {
        formInstance.setFieldsValue({
          projectNo: allProjectNos
        });
      }
      
      // 将allProjectNoOptions更新为已勾选的项目号数组，这样用户取消勾选时数组会同步更新
      allProjectNoOptions.value = allProjectNos.map(projectNo => ({
        label: projectNo,
        value: projectNo
      }));
      
      // 标记为全选状态
      localStorage.setItem('isAllSelected', 'true');
    } catch (error) {
      console.error('全选失败:', error);
      createMessage.error('全选失败，请检查网络连接！');
    }
  }

  const handleSetCommissionStatusSingle = async (record) => {
    if(record.copyCommission){
      try {
        await setCommissionStatus({ orderId: record.orderId });
        createMessage.success('设置成功');
        reload();
      } catch (e) {
        createMessage.error('设置失败');
      }
    }else{
      error('请先在系统中配置包装提成金额');
    }
  };

  // 监听表单字段变化
  function handleFieldValueChange(field: string, value: any) {
    // 如果是项目号字段变化且处于全选状态，同步更新查询条件
    if (field === 'projectNo' && localStorage.getItem('isAllSelected') === 'true') {
      // 确保value是数组格式，并去重
      const projectNoArray = Array.isArray(value) ? [...new Set(value)] : [];
      
      // 强制重新加载表格，使用新的查询条件
      reload({
        searchInfo: {
          projectNo: projectNoArray
        }
      });
      
      // 同时更新detailProjectNoKeys数组
      detailProjectNoKeys.value = projectNoArray;
    }
  }
</script>
<style></style>