settle-vue3/src/views/InvoiceSales/batchImportYunlong/index.vue

<script setup lang="ts">
import { ref, reactive } from "vue";
import { execlUpload as ExcelUpload } from "/@/components/execlUpload";
import { columns, initialColumns, getPropertyAsLabel, convertInvoiceTitle, convertInvoiceTitleData, mockData, statusOptions  } from "./columns";
import { useCompany } from "/@/hooks/core/useCompany";
import { httpList } from "/@/api/parameter/finance";
import { useResponseHandle } from "/@/hooks";
import { ElMessage } from "element-plus";
import { isValidHeader, isImportDataValid  } from "./validator"
import { invoiceTypeList, useTypeOptions } from "/@/utils/status"
import { utils, writeFile } from "xlsx";

import InvoiceTitle from "./InvoiceTitle.vue"
import ProcessModal from "./ProcessModal.vue"

const emit = defineEmits(["onSuccess"]);

const tableData = ref([]);
const { currentCompany } = useCompany();
const responseHandle = useResponseHandle();

const state = reactive({  visible: false, loading: false })


const sellerInvoiceTitle = ref<Record<string, string>>({});
const purchaserInvoiceTitle = ref<Record<string, string>>({});

const setSellerInvoiceTitle = handleInvoiceTitle.bind(null, true);
const setPurchaserInvoiceTitle = handleInvoiceTitle.bind(null, false);

function handleInvoiceTitle(_isSeller: boolean, invoiceTitle: Record<string, string>) {
  if (!invoiceTitle) { return _isSeller ? (sellerInvoiceTitle.value = {}) : (purchaserInvoiceTitle.value = {})}
  if (_isSeller) {
    //支持的开票方式
    const { invoiceType, denomination: _denomination } = invoiceTitle;
    const chunks = invoiceType.split(",");
    sellerInvoiceTitle.value = convertInvoiceTitleData(convertInvoiceTitle(invoiceTitle))
  } else {
    purchaserInvoiceTitle.value = convertInvoiceTitleData(convertInvoiceTitle(invoiceTitle));
  }
}

const importHeader = ref([])
const initialHeader = initialColumns.slice(0, 7).map(({ label }) => label)

function onUploadSuccess({ results, header }){
  if(!isValidHeader(initialHeader, header)){ return }
  const list = []
  for(const index in results){
    const result = results[index]
    const item: Record<string, any> = {}
    Object.keys(result).forEach(label => {
      const property = getPropertyAsLabel(label)
      const value = String(result[label]).trim()
      item[property] = value
    })
    list.push({...item, rawIndex: Number(index) + 1, status: 0 })
  }
  list.sort((a, b) => a.group - b.group)
  if(isImportDataValid(list)) tableData.value = list
  console.log(tableData.value)
}


const handleProcess = () => state.visible = true 
const clearData = () => tableData.value = []

async function setTitle(companyNo, isSeller = true) {
  state.loading = true
  const { code, data, message } = await httpList({ companyNo });
  state.loading = false
  if(code === 0){
    console.log(data.list)
    isSeller ? setSellerInvoiceTitle(data.list[0]) : setPurchaserInvoiceTitle(data.list[0])
  } else {
    ElMessage.warning(message)
  }
}

async function initialData(){
  await (currentCompany.value.companyNo && setTitle(currentCompany.value.companyNo))
  await setTitle('GS2404151642335170', false)
}

function handleUpdateGroup(groupData){
  const { status, remark, group } = groupData
  tableData.value.forEach((item: any) => {
    if(item.group != group) return

    // 之前已经该过状态,不能改到成功状态去
    if(item.status == 3 && status != 0) return

    item.remark = remark; 
    item.status = status
  })
}


function handleUpdateSequenceNo(sequenceData){
  const { status, remark, sequenceNo } = sequenceData
  tableData.value.forEach((item: any) => {
    if(item.sequenceNo == sequenceNo){ item.remark = remark; item.status = status; }
  })
}

function download(){
  const data = tableData.value.map((item: any, index) => ({
    '序号': Number(index) + 1,
    '分组': item.group,
    '发票类型':  item.invtype,
    '电子邮箱': item.email,
    '订单编号': item.sequenceNo,
    '订单平台类型': item.platform_type,
    '开票金额': item.inv_fee,
    '平台采购PO': item.poCode,
    '状态': statusOptions.find(({ value }) => value == item.status)?.label,
    '备注': item.remark
  }))

  const workBook = utils.book_new();
  const workSheet = utils.json_to_sheet(data);
  utils.book_append_sheet(workBook, workSheet, "sheet");
  writeFile(workBook, `批量导入数据.xlsx`, { bookType: "xlsx" });
}

initialData()
</script>

<template>
  <div 
    class="flex flex-col bg-white justify-start items-start" 
    style="height:calc(100vh - 48px);width: 100%"
    v-loading="state.loading"
  >
    <div class="flex w-full">
      <ElForm label-width="120px" style="width:100%">
        <ElRow>
          <ElCol :span="12">
            <ElFormItem label="销售方公司抬头">
              <div class="flex flex-col w-full">
                <ElInput 
                  :modelValue="(sellerInvoiceTitle || {}).invoice_title" 
                  class="mb-[10px]" 
                  disabled 
                />
                <InvoiceTitle :detail="sellerInvoiceTitle || {}" />
              </div>
            </ElFormItem>
          </ElCol>

          <ElCol :span="12">
            <ElFormItem label="购买方公司抬头">
              <div class="flex flex-col w-full">
                <ElInput
                  :modelValue="(purchaserInvoiceTitle || {}).invoice_title" 
                  class="mb-[10px]" 
                  disabled
                />
                <InvoiceTitle :detail="purchaserInvoiceTitle || {}" />
              </div>
            </ElFormItem>
          </ElCol>
        </ElRow>
      </ElForm>
    </div>

    <ExcelUpload 
      v-if="tableData.length === 0" 
      style="height:auto !important" 
      @onSuccess="onUploadSuccess" 
    />

    <ElTag class="mb-[10px]">
      {{ tableData.length }} / 300
    </ElTag>
    
    <ElTable
      stripe
      border
      size="small"
      :data="tableData"
      max-height="500px"
      style="width: 100%"
    >
      <ElTableColumn v-for="(column, index) in columns" v-bind="column" :key="index" show-overflow-tooltip>
        <template #header>
          <span v-if="!column?.required">{{ column.label }}</span>
          <p v-else>
            <span style="color: #f56c6c; font-size: 14px">* </span>
            {{ column.label }}
          </p>
        </template>


        <template #="{ row }">
          <ElTag v-if="column.prop === 'status'" :type="statusOptions.find(({ value }) => value === row.status)?.type || ''">
            {{ statusOptions.find(({ value }) => value === row.status)?.label || '--' }}
          </ElTag>
          <span v-else>{{ row[column.prop] }}</span>
        </template>
      </ElTableColumn>
    </ElTable>
    
    <div class="w-full flex justify-end" v-if="tableData.length !== 0" style="padding: 10px 0 0 0">
      <ElButton  @click="clearData">取消</ElButton>
      
      <ElButton 
        type="primary" 
        :loading="state.loading"
        @click="handleProcess"
        >批量创建</ElButton>
    </div>

    <ProcessModal
      :data="tableData"
      v-model:visible="state.visible"
      :companyNo="currentCompany.companyNo"
      :sellerInvoiceTitle="sellerInvoiceTitle"
      :purchaserInvoiceTitle="purchaserInvoiceTitle"
      @updateGroup="handleUpdateGroup"
      @updateSequenceNo="handleUpdateSequenceNo"
      @download="download"
      @refresh="clearData"
    />
  </div>
</template>

<style lang="scss" scoped>
:deep(.el-upload-list__item) { display: none !important; }
</style>