accout-vue3-ui/src/components/ReconciliationForm/src/cpns/batch-mode.vue

<script setup lang="ts">
import { ref, unref } from "vue";
import { ElTable } from "element-plus";
import { useAsync } from "/@/hooks/core/useAsync";
import { httpBatch } from "/@/api/purchase/orderRecord";
import { selectOptions as _selectOptions } from "../_options";
import { ElMessage } from "element-plus";

import {
  send_status_list,
  cg_order_source_options,
  cg_order_type_options
} from "/@/utils/status";

const emit = defineEmits(["selection"]);
const props = defineProps<{
  supplierNo?: string;
  companyNo?: string;
}>();

const tableRef = ref<InstanceType<typeof ElTable>>(null);
const sourceText = ref("");

const {
  data: tableData,
  loading,
  run
} = useAsync({
  success: _data => {}
});

const $space = " ";
const $wrap = "\n";
function replaceTextWrapAndSpace(text = "") {
  if (!text) return "";
  let _text = text;
  const hasSpace = _text.includes($space);
  const hasWrap = _text.includes($wrap);
  if (hasSpace) _text = _text.split($space).join("");
  if (hasWrap) _text = _text.split($wrap).join("");
  return _text;
}

function handleEnter() {
  const text = replaceTextWrapAndSpace(sourceText.value);
  /* 去掉回车和空格 **/
  if (text.length === 0) {
    ElMessage.warning("不能解析空文本");
    sourceText.value = text;
    return;
  }

  /* 统一替换字符 **/
  const parserText = text.replace(/[，。；、; .]/g, ",");
  const cgdNoArr = parserText.split(",");
  sourceText.value = "";

  run(
    httpBatch({
      size: 100,
      cgdNoArr,
      companyNo: props.companyNo,
      supplierNo: props.supplierNo
    })
  );
}

function onSubmit() {
  emit("selection", unref(tableData));
}
</script>

<template>
  <ElInput
    :rows="4"
    v-model="sourceText"
    style="margin-bottom: 10px"
    placeholder="输入采购单编码(小于100条)，系统支持的分割符为逗号(,)、句号(.)、分号(;)、顿号(、)，回车后开始解析。"
    type="textarea"
    @keydown.enter="handleEnter"
  />
  <ElTable
    ref="tableRef"
    size="small"
    :data="tableData"
    v-loading="loading"
    max-height="580px"
  >
    <el-table-column type="index" width="50" label="序号" />
    <ElTableColumn label="采购单编码" prop="sequenceNo" width="150" />
    <ElTableColumn label="采购主单编码" prop="cxCode" width="150" />
    <ElTableColumn label="采购单信息">
      <ElTableColumn
        label="供货商"
        prop="supplierName"
        width="160"
        show-overflow-tooltip
      />
      <ElTableColumn
        label="发货状态"
        prop="sendStatus"
        width="90"
        show-overflow-tooltip
      >
        <template #default="{ row }">
          <ElTag>{{
            send_status_list.find(s => s.value === String(row.sendStatus))
              ?.label
          }}</ElTag>
        </template>
      </ElTableColumn>
      <ElTableColumn
        label="业务公司"
        prop="companyName"
        width="180"
        show-overflow-tooltip
      />
      <ElTableColumn
        label="订单来源"
        prop="cgdSource"
        width="100"
        show-overflow-tooltip
      >
        <template #default="{ row }">
          <ElTag>
            {{
              cg_order_source_options.find(
                t => t.value === String(row.cgdSource)
              )?.label
            }}
          </ElTag>
        </template>
      </ElTableColumn>
      <ElTableColumn
        label="总货款"
        prop="totalPrice"
        width="80"
        show-overflow-tooltip
      />
    </ElTableColumn>
    <ElTableColumn label="商品信息">
      <ElTableColumn
        label="商品编码"
        prop="goodNo"
        width="150"
        show-overflow-tooltip
      />
      <ElTableColumn
        label="商品名称"
        prop="goodName"
        width="180"
        show-overflow-tooltip
      />
      <ElTableColumn
        label="商品来源"
        prop="cgdType"
        width="90"
        show-overflow-tooltip
      >
        <template #="{ row }">
          <ElTag>
            {{
              cg_order_type_options.find(t => t.value === String(row.cgdType))
                ?.label
            }}
          </ElTag>
        </template>
      </ElTableColumn>
      <ElTableColumn
        label="商品数量"
        prop="goodNum"
        width="90"
        show-overflow-tooltip
      />
    </ElTableColumn>
    <ElTableColumn
      label="采购员"
      prop="ownerName"
      width="75"
      show-overflow-tooltip
    />
  </ElTable>

  <div flex w-full justify-end mt-2>
    <ElButton type="primary" @click="onSubmit">保存</ElButton>
  </div>
</template>

<style lang="scss" scoped>
::v-deep(.el-select-v2__wrapper) {
  box-shadow: 0 0 0 1px var(--el-input-border-color, var(--el-border-color))
    inset !important;
}

::v-deep(.el-input__wrapper) {
  // box-shadow: none !important;
  box-shadow: 0 0 0 1px var(--el-input-border-color, var(--el-border-color))
    inset !important;
}
</style>