canrd-outside / order-erp-front · Files

<template>
  <div>
    <BasicTable @register="registerTable" :bordered="true">
      <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
        >
      </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 } from '@/api/project/invoice';
  import { searchFormSchema, COLUMNS } from './data';
  import { BasicModal, useModal } from '/@/components/Modal';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { onMounted, ref, computed } from '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, setSelectedRowKeys }] = useTable({
    api: getPackageProfit,
    bordered: true,
    columns: COLUMNS,
    rowKey: 'id',
    formConfig: {
      labelWidth: 120,
      schemas: searchFormSchema,
      autoSubmitOnEnter: true,
    },
    rowKey: (record) => record.orderId,
    rowSelection: {
      type: 'checkbox',
      selectedRowKeys: checkedKeys as any,
      onSelect: onSelect,
      onSelectAll: onSelectAll,
    },
    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),
        },
        {
          label: '审核通过',
          popConfirm: {
            title: '确认审核？',
            confirm: () => {
              if (record.status === 0 && role.value === ROLE.ADMIN) {
                handleStatus(record, true);
              }
              return;
            },
          },
        },
      ];
    }
    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 {
      await setPackStatus({ orderId: record.orderId });
      reload();
    } catch (error) {
      console.error(error);
    }
  }
  
  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() {
    console.log('Selected data:', {
      orderIds: orderIds.value,
      projectNo: projectNo.value,
      customerCode: customerCode.value,
      innerNo: innerNo.value,
      productionDepartment: productionDepartment.value
    });
    if (checkedKeys.value.length <= 0) {
      createMessage.warn('请选择数据!');
      return;
    }
    const token = userStore.getToken;
    axios
      .post(
        '/basic-api/order/cost/businessProfitDetail/exportExcel',
        { 
          orderIds: orderIds.value,
          projectNo: projectNo.value,
          customerCode: customerCode.value,
          innerNo: innerNo.value,
          productionDepartment: productionDepartment.value
        },
        {
          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);
      });
    reload();
  }
  async function onSelect(record, selected: boolean) {
    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);
  }
</script>
<style></style>