feat: cargo consolidation request.初稿

src/components/print.vue

@@ -0,0 +1,384 @@
+<template>
+  <div class="flex flex-col items-stretch w-[24cm] max-w-[24cm]">
+    <div class="flex justify-between">
+      <div class="mb-2">
+        <el-tooltip
+          content="其实二维码在提交SO后就会自动刷新, 除非你点了右边的Clean QR Code"
+        >
+          <el-button
+            class="custom-button"
+            @click="reGenerateQrCode"
+          >
+            Generate QR Code
+          </el-button>
+        </el-tooltip>
+        <el-tooltip content="除非你不想打印二维码">
+          <el-button @click="qrcodeVisible = false">Clean QR Code</el-button>
+        </el-tooltip>
+      </div>
+      <div>
+        <el-button
+          type="danger"
+          @click="clean"
+        >
+          Clean Input Job
+        </el-button>
+        <el-tooltip content="确认下面的预览内容没问题再点打印">
+          <el-button
+            class="custom-button"
+            :loading="printing"
+            @click="onBtnPrint"
+          >
+            Print Page
+          </el-button>
+        </el-tooltip>
+      </div>
+    </div>
+    <div class="">
+      <el-form inline>
+        <el-form-item
+          v-if="scene === 'SO'"
+          label="QR Code Content"
+          class="text-left w-[100%]"
+        >
+          <div
+            class="el-input el-input__wrapper el-input__inner cursor-not-allowed hover:cursor-not-allowed"
+          >
+            {{ selectedContent.map((i) => i.Reference).join(';') }}
+          </div>
+        </el-form-item>
+
+        <el-form-item
+          label="Total Page"
+          style="width: 20%"
+          prop="total"
+        >
+          <el-input
+            v-model.number="total"
+            :type="'number'"
+          ></el-input>
+        </el-form-item>
+        <el-form-item
+          label="Text direction"
+          style="width: 15%"
+          prop="rotated"
+        >
+          <el-switch v-model="rotated"></el-switch>
+        </el-form-item>
+        <el-form-item
+          label="Page width(CM)"
+          style="width: 20%"
+          prop="pageWidth"
+        >
+          <el-input
+            v-model.number="pageWidth"
+            :type="'number'"
+          ></el-input>
+        </el-form-item>
+        <el-form-item
+          label="Page Height(CM)"
+          style="width: 20%"
+          prop="pageHeight"
+        >
+          <el-input
+            v-model.number="pageHeight"
+            :type="'number'"
+          ></el-input>
+        </el-form-item>
+
+        <el-form-item
+          label="Font Size"
+          style="width: 50%"
+        >
+          <el-slider
+            v-model="pdfFontSize"
+            :step="1"
+          ></el-slider>
+        </el-form-item>
+        <el-form-item
+          style="width: 100%"
+          label="箱唛"
+        >
+          <el-input
+            v-model="mai"
+            type="textarea"
+          ></el-input>
+        </el-form-item>
+        <div class="flex gap-1">
+          <div
+            v-for="(item, index) in logoList"
+            :key="item"
+            class="w-[60px] h-[60px] bg-contain bg-center bg-no-repeat cursor-pointer"
+            :style="{ backgroundImage: `url(${item})` }"
+            @click="selectlogo(index)"
+          ></div>
+        </div>
+      </el-form>
+    </div>
+    <br />
+    <div class="flex flex-wrap">
+      <div
+        v-for="i in total"
+        :key="i"
+        :style="{
+          width: `${pageWidth}cm`,
+          height: `${pageHeight}cm`,
+        }"
+        class="pdf-wrap relative border border-solid border-gray-200 mb-2 mr-2"
+      >
+        <div
+          :id="`pdfItem-${i}`"
+          :ref="(el) => setElement(el, i)"
+          class="pdf-area w-[100%] h-[100%] relative text-center p-4 flex flex-col items-stretch justify-center"
+          :class="{}"
+          :style="{
+            width: rotated ? `${pageHeight}cm` : `${pageWidth}cm`,
+            height: rotated ? `${pageWidth}cm` : `${pageHeight}cm`,
+            transformOrigin: 'top left',
+            transform: rotated ? 'rotate(90deg)' : '',
+            right: rotated ? `-${pageWidth}cm` : '',
+          }"
+        >
+          <!-- bottom: rotated ? `-${(i - 1) * (pageWidth - pageHeight)}cm` : '', -->
+          <div
+            class="mai font-medium break-all mb-4"
+            :style="{
+              fontSize: `${pdfFontSize}pt`,
+            }"
+            @dblclick="ElMessage.info('hello')"
+          >
+            {{ mai }}
+          </div>
+
+          <div class="flex justify-center">
+            <div class="font-medium text-5xl">{{ i }} / {{ total }}</div>
+          </div>
+          <div class="flex gap-1 absolute bottom-4 left-4">
+            <div
+              v-for="item in selectedLogo"
+              :key="item"
+              class="w-[90px] h-[90px] bg-contain bg-center bg-no-repeat"
+              :style="{ backgroundImage: `url(${item})` }"
+            ></div>
+          </div>
+          <div
+            v-show="qrcodeVisible"
+            class="qrcode absolute bottom-4 right-4 w-[110px] h-[110px] border border-solid border-gray-400"
+          >
+            <img
+              v-show="qrcodeURL.length"
+              style="width: 100%; height: auto"
+              :src="qrcodeURL"
+              alt="qr-code"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<!-- todo 后续so search如果有更新, 引用这个组件. -->
+<script setup lang="ts">
+import {
+  defineComponent,
+  defineProps,
+  nextTick,
+  ref,
+  watch,
+  computed,
+} from 'vue'
+import {
+  ElMessage,
+  ElInput,
+  ElButton,
+  ElForm,
+  ElFormItem,
+  ElSlider,
+  ElTooltip,
+  ElSwitch,
+} from 'element-plus'
+import jspdf from 'jspdf'
+import qrcode from 'qrcode'
+import html2canvas from 'html2canvas'
+import debounce from 'lodash.debounce'
+defineComponent({
+  name: 'ComponentPrint',
+})
+const { content = [], scene = 'SO' } = defineProps<{
+  content: any[]
+  scene?: string
+}>()
+let selectedContent = ref([] as any[])
+const mai = ref('')
+watch(
+  () => content,
+  () => {
+    selectedContent.value = content.slice()
+    if (scene === 'SO') {
+      mai.value = selectedContent.value
+        .map((c: any) => `${c.Reference}_${c.Contract_Title}`)
+        .join('; ')
+    } else if (scene === 'QC') {
+      mai.value = selectedContent.value.join('')
+    }
+    if (mai.value.length) {
+      nextTick(() => {
+        reGenerateQrCode()
+      })
+    }
+  },
+  { deep: true, immediate: true },
+)
+
+const clean = () => {
+  mai.value = ''
+  selectedContent.value = []
+}
+let qrcodeVisible = ref(false)
+let qrcodeURL = ref('')
+async function reGenerateQrCode() {
+  await qrcode.toDataURL(
+    mai.value,
+    { errorCorrectionLevel: 'H' },
+    function (err: any, url: any) {
+      qrcodeURL.value = url
+    },
+  )
+  qrcodeVisible.value = true
+}
+
+const pdfList = ref({} as any)
+const setElement = (el: any, index: number) => {
+  pdfList.value[`${index}`] = el
+}
+const getLogoPath = (path: string) => {
+  return new URL(path, import.meta.url).href
+}
+
+const logoList = ref([] as any[])
+
+async function getLogoList() {
+  (
+    [
+      getLogoPath('/assets/label/heavy.png'),
+      getLogoPath('/assets/label/keep_dry.png'),
+      getLogoPath('/assets/label/place_up.png'),
+      getLogoPath('/assets/label/care.png'),
+      getLogoPath('/assets/label/glass.png'),
+    ] as string[]
+  ).forEach((i: string, index: number) => {
+    fetch(i)
+      .then((res) => res.blob())
+      .then((blob) => (logoList.value[index] = URL.createObjectURL(blob)))
+  })
+}
+getLogoList()
+
+const selectlogo = (index: number) => {
+  const i = selectedLogoIndex.value.indexOf(index)
+  if (i > -1) {
+    selectedLogoIndex.value.splice(i, 1)
+  } else {
+    selectedLogoIndex.value.push(index)
+  }
+}
+let selectedLogoIndex = ref([] as number[])
+let selectedLogo = computed(() =>
+  logoList.value.filter((i: any, index: number) =>
+    selectedLogoIndex.value.includes(index),
+  ),
+)
+
+let total = ref(1 as number)
+let pdfFontSize = ref(32)
+let pageWidth = ref(20) // 目标pdf的页宽
+let pageHeight = ref(10) // 目标pdf的页高
+/**
+ * 宽大于等于高
+ */
+let orientation = computed(() => pageWidth.value >= pageHeight.value)
+let rotated = ref(false)
+let pdf: any = null
+let printing = ref(false)
+const reGeneratePDF = debounce(function () {
+  printing.value = true
+  pdf = null
+  pdf = new jspdf({
+    orientation: orientation.value ? 'l' : 'p',
+    unit: 'cm',
+    format: [pageWidth.value, pageHeight.value],
+  })
+  const pool = []
+  for (const key in pdfList.value) {
+    if (Object.prototype.hasOwnProperty.call(pdfList.value, key)) {
+      pool.push(generatePDF(pdfList.value[key], key))
+    }
+  }
+  Promise.all(pool).then(() => {
+    printing.value = false
+  })
+}, 300)
+
+watch(
+  [
+    total,
+    mai,
+    pdfFontSize,
+    pageWidth,
+    pageHeight,
+    qrcodeVisible,
+    rotated,
+    selectedLogo,
+  ],
+  () => {
+    nextTick(() => reGeneratePDF())
+  },
+)
+async function onBtnPrint() {
+  let fileName = ''
+  switch (scene) {
+    case 'QC':
+      fileName = ''
+      break
+    default:
+      fileName = selectedContent.value.map((i: any) => i.Reference).join('_')
+  }
+  window.open(
+    // @ts-ignore 照着jspdf文档搬的...ts报错
+    pdf.output('bloburl', {
+      fileName,
+    }),
+  )
+}
+function generatePDF(pdfItem: HTMLElement, key: string) {
+  return html2canvas(pdfItem, {
+    allowTaint: true,
+    useCORS: true,
+    backgroundColor: '#fff', // 一定要设背景颜色，否则有的浏览器就会变花，比如Edge
+    scale: 3, // 缩放倍率调整清晰度
+  }).then((canvas) => {
+    const width = canvas.width
+    const height = canvas.height
+    const image = new Image()
+    const target = document.createElement('canvas')
+    target.height = height
+    target.width = width
+    image.onload = function () {
+      const ctx = target.getContext('2d')
+      ctx?.drawImage(image, 0, 0)
+      if (Number(key) > 1) pdf.addPage()
+      pdf.addImage(
+        target.toDataURL('image/jpeg', 1.0),
+        'JPEG',
+        0,
+        0,
+        pageWidth.value,
+        pageHeight.value,
+      )
+    }
+    image.src = canvas.toDataURL('image/jpeg', 1.0)
+  })
+}
+</script>
+
+<style scoped></style>

src/pages/cargo-consolidation-request/index.vue

@@ -0,0 +1,989 @@
+<template>
+  <div class="w-[100vw] bg-white">
+    <div
+      v-loading="loading"
+      class="p-4 pt-2 w-[100%] max-w-[1900px] min-h-[100vh] mx-auto shadow"
+    >
+      <div class="text-xl text-slate-700">Cargo Consolidation Request</div>
+
+      <el-form
+        style="width: 100%"
+        inline
+        :loading="loading"
+        @submit.prevent="getList"
+      >
+        <el-form-item label="Voyage Date Range">
+          <el-date-picker
+            v-model="dateRange"
+            type="daterange"
+            unlink-panels
+            clearable
+            start-placeholder="Start date"
+            end-placeholder="End date"
+            :shortcuts="dateShortcuts"
+            :disabled-date="pickerOptions"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-tooltip content="时间范围最好不要选太大, 不然数据太多会卡">
+            <el-button @click="getList">Search</el-button>
+          </el-tooltip>
+        </el-form-item>
+      </el-form>
+
+      <el-tabs v-model="currentTab">
+        <el-tab-pane
+          v-for="tab in tabs"
+          :key="tab.value"
+          :label="tab.label"
+          :name="tab.value"
+        ></el-tab-pane>
+      </el-tabs>
+      <el-table
+        border
+        :data="list"
+        highlight-current-row
+        style="width: 100%"
+        max-height="330"
+        @row-click="($e) => getSubList($e)"
+      >
+        <el-table-column
+          prop="Name"
+          label="Voyage Name"
+        />
+        <el-table-column
+          prop="Port_From"
+          label="Port From"
+          width="100"
+        />
+        <el-table-column
+          label="Port To"
+          prop="Port_To"
+          width="100"
+        />
+        <el-table-column
+          prop="ETD"
+          label="ETD"
+          width="100"
+        />
+        <el-table-column
+          prop="ETA"
+          label="ETA"
+          width="100"
+        />
+        <el-table-column
+          prop="Cut_Off_Date"
+          label="Cut Off"
+          width="120"
+        />
+        <!-- <el-table-column
+          label="Owner"
+          width="100"
+        >
+          <template #default="scope">
+            {{ scope.row.Owner.name }}
+          </template>
+        </el-table-column> -->
+        <el-table-column
+          prop="Status"
+          label="Status"
+          width="100"
+        />
+        <el-table-column
+          label="Last Modify Time"
+          width="180"
+        >
+          <template #default="scope">
+            {{ dayjs(scope.row.Modified_Time).format('YYYY-MM-DD HH:mm:ss') }}
+          </template>
+        </el-table-column>
+      </el-table>
+      <div
+        v-show="currentRow.Name?.length"
+        class="flex mt-8"
+      >
+        <div class="flex items-center mr-4">
+          current clicked Voyage name:&nbsp;
+          <div class="text-red-700 font-bold">
+            {{ currentRow.Name }}
+          </div>
+        </div>
+        <el-button
+          v-if="currentTab === 'my_request'"
+          size="small"
+          @click="openBulkProductDialog"
+        >
+          Submit Bulk Production Request
+        </el-button>
+        <el-button
+          v-if="currentTab === 'my_request'"
+          size="small"
+          @click="openSampleDialog"
+        >
+          Submit Sample Request
+        </el-button>
+        <el-button
+          v-if="currentTab === 'my_request'"
+          :disabled="subList.length < 1"
+          size="small"
+          type="danger"
+          @click="resetSubList"
+        >
+          放弃下方表格改动
+        </el-button>
+        <el-button
+          size="small"
+          :disabled="subList.length < 1"
+          @click="exportSubTable"
+        >
+          Export Excel File
+        </el-button>
+        <el-button
+          v-if="currentTab === 'my_request'"
+          :disabled="subList.length < 1"
+          size="small"
+          type="primary"
+          @click="commit"
+        >
+          Commit
+        </el-button>
+      </div>
+      <el-table
+        class="mt-4"
+        :data="subList"
+        style="width: 100%"
+        :row-style="calcRowStyle"
+        :empty-text="
+          currentRow.Name?.length
+            ? '暂无数据'
+            : '请点击voyage表格其中一行以查询相应记录'
+        "
+        border
+      >
+        <el-table-column
+          fixed
+          label="CRM批次记录 (Batch Record)"
+          width="250"
+        >
+          <template #default="scope">
+            <el-select
+              v-model="scope.row.batchRecord"
+              :remote-method="debounce(search, 1500)"
+              remote
+              style="width: 100%"
+              :loading="loading2"
+              filterable
+              clearable
+              :disabled="scope.row.disableFlag"
+              @change="($e) => onBatchRecordChange($e, scope.$index)"
+            >
+              <el-option
+                v-for="option in batchListOption.concat(qcList) as any[]"
+                :key="option.id"
+                :value="option.id"
+                :label="
+                  option.Name +
+                  (option.Reference ? ` - ${option.Reference}` : '')
+                "
+              ></el-option>
+            </el-select>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="Sample"
+          width="80"
+          fixed
+        >
+          <template #default="scope">
+            <el-checkbox
+              v-model="scope.row.Sample"
+              :disabled="scope.row.disableFlag"
+            ></el-checkbox>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="箱数(Carton)"
+          width="115"
+        >
+          <template #default="scope">
+            <el-input
+              v-model="scope.row.Carton"
+              :disabled="scope.row.disableFlag"
+            ></el-input>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="唛头 (Marks & Nos)"
+          width="220"
+        >
+          <template #default="scope">
+            <el-input
+              v-model="scope.row.Marks_Nos"
+              :disabled="scope.row.disableFlag"
+            ></el-input>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="货物名称 (Description of Goods)"
+          width="180"
+        >
+          <template #default="scope">
+            <el-input
+              v-model="scope.row.Description_of_Goods"
+              :disabled="scope.row.disableFlag"
+            ></el-input>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="货物材质 (Material goods)"
+          width="250"
+        >
+          <template #default="scope">
+            <el-select
+              v-model="scope.row.Material_of_Goods"
+              multiple
+              :disabled="scope.row.disableFlag"
+            >
+              <el-option
+                v-for="i in goodMaterialOption"
+                :key="i"
+                :value="i"
+                :label="i"
+              ></el-option>
+            </el-select>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="数量(Qty)"
+          width="110"
+        >
+          <template #default="scope">
+            <el-input
+              v-model="scope.row.Quantity"
+              :disabled="scope.row.disableFlag"
+            ></el-input>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="单价(澳币/AUD) (Unit Price)"
+          width="220"
+        >
+          <template #default="scope">
+            <el-input
+              v-model="scope.row.Unit_Price"
+              :disabled="scope.row.disableFlag"
+            ></el-input>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="重量(KG)(Weight)"
+          width="100"
+        >
+          <template #default="scope">
+            <el-input
+              v-model="scope.row.Weight"
+              :disabled="scope.row.disableFlag"
+            ></el-input>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="体积 m&sup3;(Cube)"
+          width="150"
+        >
+          <template #default="scope">
+            <el-input
+              v-model="scope.row.Cube"
+              :disabled="scope.row.disableFlag"
+            ></el-input>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="总离岸价 (澳币/AUD)(Total FOB)"
+          width="250"
+        >
+          <template #default="scope">
+            <el-input
+              v-model="scope.row.Total_FOB"
+              :disabled="scope.row.disableFlag"
+            ></el-input>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="User_Notes"
+          width="250"
+        >
+          <template #default="scope">
+            <el-input
+              v-model="scope.row.User_Notes"
+              :rows="2"
+              type="textarea"
+              :disabled="scope.row.disableFlag"
+            ></el-input>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="负责人(Owner)"
+          fixed="right"
+          width="140"
+        >
+          <template #default="scope">
+            <el-input
+              v-model="scope.row.Requester.name"
+              disabled
+            ></el-input>
+          </template>
+        </el-table-column>
+        <el-table-column
+          v-if="currentTab === 'my_request'"
+          fixed="right"
+          label="更新时间"
+          width="180"
+        >
+          <template #default="scope">
+            <div v-if="scope.row.id">
+              {{
+                dayjs(scope.row.update_time || new Date()).format(
+                  'YYYY-MM-DD HH:mm:ss',
+                )
+              }}
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column
+          fixed="right"
+          label="action"
+          width="100"
+        >
+          <template #default="scope">
+            <el-button
+              v-if="currentTab === 'my_request'"
+              type="danger"
+              size="small"
+              link
+              @click="() => onDeleteRow(scope.row, scope.$index)"
+            >
+              删除
+            </el-button>
+            <el-button
+              size="small"
+              link
+              type="primary"
+              @click="print(scope.row)"
+            >
+              打印
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-dialog
+        v-model="show"
+        :title="(isBlukDialog ? 'Bulk Product' : 'Sample') + ' Request'"
+        :close-on-click-modal="false"
+        :close-on-press-escape="false"
+        width="600px"
+        :before-close="close"
+      >
+        <el-form
+          ref="formRef"
+          :model="form"
+          @submit.prevent
+        >
+          <el-form-item
+            v-if="isBlukDialog"
+            label="Batch Record"
+            prop="batchRecord"
+            :rules="{ required: true, message: '必填项' }"
+          >
+            <!-- <el-select
+              v-model="form.batchRecord"
+              @change="($e) => onBatchRecordChange($e)"
+            >
+              <el-option
+                v-for="o in batchListOption"
+                :key="o.id"
+                :label="o.name"
+                :value="o.id"
+              ></el-option>
+            </el-select> -->
+            <el-select
+              v-model="form.batchRecord"
+              :remote-method="debounce(search, 1500)"
+              remote
+              style="width: 100%"
+              :loading="loading2"
+              filterable
+              clearable
+              @change="($e) => onBatchRecordChange($e, -1)"
+            >
+              <el-option
+                v-for="option in qcList"
+                :key="option.id"
+                :value="option.id"
+                :label="option.Name + ` - ${option.Reference}`"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item
+            label="User Notes"
+            prop="User_Notes"
+            :rules="{ required: true, message: '必填项' }"
+          >
+            <el-input v-model="form.User_Notes"></el-input>
+          </el-form-item>
+
+          <div class="flex justify-center">
+            <el-button
+              type="primary"
+              @click="addNewSubList(formRef)"
+            >
+              submit
+            </el-button>
+          </div>
+        </el-form>
+      </el-dialog>
+      <el-drawer
+        v-model:model-value="printDrawerVisible"
+        :size="'1050px'"
+        :title="'打印唛 (注意先写完唛内容和宽高最后再调页数, 不然可能会很卡)'"
+        :close-on-click-modal="false"
+        :close-on-press-escape="false"
+      >
+        <comp-print
+          v-if="printDrawerVisible"
+          :content="[currentPrintRow.Marks_Nos || '']"
+          :scene="'QC'"
+        />
+      </el-drawer>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { defineComponent, ref, watch, computed } from 'vue'
+import {
+  ElButton,
+  ElForm,
+  ElFormItem,
+  ElInput,
+  ElTabs,
+  ElTabPane,
+  ElTable,
+  ElTableColumn,
+  ElDatePicker,
+  ElTooltip,
+  ElSelect,
+  ElOption,
+  ElDialog,
+  ElCheckbox,
+  ElMessage,
+  ElNotification,
+  ElDrawer,
+} from 'element-plus'
+import type { FormInstance } from 'element-plus'
+import cloneDeep from 'lodash.clonedeep'
+import dayjs from 'dayjs'
+import * as XLSX from 'xlsx'
+import request from '@/utils/axios'
+import debounce from 'lodash.debounce'
+import compPrint from '@/components/print.vue'
+// import { useRouter } from 'vue-router'
+// const $router = useRouter()
+// $router.push('/so-search')
+defineComponent({
+  name: 'ComponentCargoConsolidationRequest',
+})
+
+const currentUser = ref('')
+const currentUserName = ref('')
+let show = ref(false) // 新增货物对话框
+let loading = ref(false)
+let list = ref([] as any[])
+let currentTab = ref('avaliable')
+let tabs = [
+  {
+    label: 'Avaliable',
+    value: 'avaliable',
+  },
+  {
+    label: 'Voyage Closed',
+    value: 'voyage_closed',
+  },
+  {
+    label: 'My Request',
+    value: 'my_request',
+  },
+]
+let dateRange = ref([] as any[])
+const generateDateRange = (days = 7) => {
+  const today = new Date()
+  const endDate = new Date()
+  endDate.setDate(today.getDate() + days)
+  return [today, endDate].sort()
+}
+// 用来限定日期选择器不让它选太大的时间范围.
+const pickerOptions = computed(() => {
+  return (time: Date) => {
+    if (!dateRange.value || dateRange.value.length !== 2) {
+      return false // 如果没有选择范围，则不禁用任何日期
+    }
+    const start = dateRange.value[0].getTime()
+    const end = dateRange.value[1].getTime()
+    const current = time.getTime()
+    const maxRange = 14 * 24 * 60 * 60 * 1000 // 14天的毫秒数
+
+    if (current < start) {
+      //如果当前日期小于开始日期，不禁用，因为用户可能要修改开始日期。
+      return false
+    }
+
+    if (end - start > maxRange) {
+      //如果用户选中的日期超过14天，则禁用超出范围的日期
+      if (current > start + maxRange) {
+        return true
+      } else {
+        return false
+      }
+    }
+    if (current > start + maxRange) {
+      //如果当前日期大于开始日期加14天，则禁用。
+      return true
+    }
+    return false
+  }
+})
+
+const dateShortcuts = ref([
+  {
+    text: 'Next 3 days',
+    value: generateDateRange(3),
+  },
+  {
+    text: 'Last 3 days',
+    value: generateDateRange(-3),
+  },
+  {
+    text: 'Next week',
+    value: generateDateRange(7),
+  },
+  {
+    text: 'Last week',
+    value: generateDateRange(-7),
+  },
+] as any[])
+
+dateRange.value = generateDateRange(-14) // todo 提交前改为-7
+
+const clearSubList = () => {
+  subList.value = []
+  subListBackup = []
+}
+watch(currentTab, () => {
+  getList()
+  clearSubList()
+  currentRow.value = {}
+})
+
+let getList = () => {
+  loading.value = true
+  zoho.CRM.API.coql({
+    select_query:
+      'select Name,Port_From,Port_To,ETD,ETA,Cut_Off_Date,Owner,Status,Modified_Time from Sea_Freight_Table' +
+      " where Modified_Time between '" +
+      `${dateRange.value.map((i) => dayjs(i).format('YYYY-MM-DDTHH:mm:ssZ')).join("' and '")}` +
+      "'",
+  })
+    .then((res: any) => {
+      console.log(res, 'res get list')
+      if (Array.isArray(res.data) && res.data.length) {
+        list.value = res.data.filter((i: any) => {
+          let condition = true
+          switch (currentTab.value) {
+            case 'avaliable':
+              condition = i.Status && i.Status === '可用'
+              break
+            case 'voyage_closed':
+              condition = i.Status && i.Status === '关闭'
+              break
+            // case 'my_request':
+            // condition = i.Owner?.id && i.Owner.id === currentUser.value
+          }
+          return condition
+        })
+      } else if (res.status === 204) {
+        ElMessage.info(res.statusText || 'zoho api return:' + res.status)
+        list.value = []
+        currentRow.value = {}
+        clearSubList()
+      }
+    })
+    .finally(() => (loading.value = false))
+}
+
+let currentRow = ref({} as any)
+let subList = ref([] as any[])
+let subListBackup: any[] = []
+/**
+ *  用来增加新行的数据模版
+ */
+const newLineTemplate = {
+  addFlag: true,
+  deleteFlag: false,
+  batchRecord: '',
+  disableFlag: false,
+  // 提交表单前删掉以上字段
+  // id: '',
+  Sample: false,
+  Batch_Record: {
+    name: '',
+    id: '',
+  } as any,
+  Parent_Id: {
+    name: '',
+    id: '',
+  } as any,
+  Carton: '',
+  Marks_Nos: '',
+  Description_of_Goods: '',
+  Material_of_Goods: [],
+  Quantity: '',
+  Unit_Price: '',
+  Weight: '',
+  Cube: '',
+  Total_FOB: '',
+  Requester: { name: '', id: '' } as any,
+  User_Notes: '',
+}
+// 用在弹窗里面给批次记录做候选项
+let batchListOption = computed(() =>
+  subListBackup
+    .filter(
+      (i) =>
+        i.Batch_Record && i.Batch_Record.name && i.Batch_Record.name.length,
+    )
+    .map((i) => {
+      return {
+        Name: i.Batch_Record.name || '',
+        id: i.Batch_Record.id || '',
+      }
+    })
+    // ai生成的去重逻辑.
+    .filter(
+      (item, index, self) =>
+        index ===
+        self.findIndex((t) => t.Name === item.Name && t.id === item.id),
+    ),
+)
+
+let getSubList = (e: any = {}) => {
+  if (e.id) currentRow.value = e
+  loading.value = true
+  zoho.CRM.API.searchRecord({
+    Entity: 'Sea_Freight_Details',
+
+    Type: 'criteria',
+    Query: `(Parent_Id:equals:${currentRow.value.id})`,
+    delay: false,
+  })
+    .then((res: any) => {
+      if (Array.isArray(res.data) && res.data.length) {
+        // 过滤 Requester.id === 当前用户id
+        subListBackup = res.data
+          .filter(
+            (i: any) =>
+              i.Parent_Id.id === currentRow.value.id &&
+              (currentTab.value === 'my_request'
+                ? i.Requester.id === currentUser.value
+                : true),
+          )
+          .map((i: any) => ({
+            ...i,
+            Sample: i.Sample || false,
+            batchRecord: i.Batch_Record?.id || '',
+            // disableFlag: currentUser.value !== i.Requester.id, // 同上判断.
+            disableFlag: false,
+            addFlag: false,
+            deleteFlag: false,
+          }))
+        subList.value = cloneDeep(subListBackup)
+        if (subList.value.length) {
+          newLineTemplate.Parent_Id = cloneDeep(subList.value[0].Parent_Id)
+        } else {
+          newLineTemplate.Parent_Id = { id: currentRow.value.id }
+          newLineTemplate.Requester = {
+            id: currentUser.value,
+            name: currentUserName.value,
+          }
+        }
+      }
+    })
+    .finally(() => (loading.value = false))
+}
+
+const resetSubList = () => {
+  subList.value = cloneDeep(subListBackup)
+}
+
+const goodMaterialOption = ref([
+  'Cotton 棉',
+  'Iron 铁',
+  'Neoprene 潜水料',
+  'Paper 纸质',
+  'Plastic 塑料',
+  'Polyester Fibre 聚酯纤维',
+  'PU 聚氨酯',
+  'PVC 聚氯乙烯',
+  'Velvet 天鹅绒',
+  'Zinc alloy 锌合金',
+])
+
+let formRef = ref<FormInstance>()
+let form = ref({} as any)
+let isBlukDialog = ref(false)
+
+const openBulkProductDialog = () => {
+  form.value = cloneDeep(newLineTemplate)
+  isBlukDialog.value = true
+  show.value = true
+}
+const openSampleDialog = () => {
+  form.value = cloneDeep(newLineTemplate)
+  form.value.Sample = true
+  form.value.Requester = { id: currentUser.value, name: currentUserName.value }
+  isBlukDialog.value = false
+  show.value = true
+}
+const close = (done = {} as any) => {
+  if (formRef.value && typeof formRef.value.clearValidate === 'function') {
+    formRef.value.clearValidate()
+  }
+  if (typeof done === 'function') done()
+}
+
+const addNewSubList = (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  formEl.validate((valid: boolean) => {
+    if (!valid) return
+    subList.value.push(cloneDeep(form.value))
+    show.value = false
+    isBlukDialog.value = false
+    form.value = {}
+  })
+}
+const onDeleteRow = (row: any, index: number) => {
+  row.deleteFlag = true
+  ElNotification({
+    type: 'warning',
+    title: '已标记删除',
+    duration: 3000,
+    message: '点 提交 按钮后会正式删除. 误操作请点击 放弃改动.',
+  })
+}
+
+const onBatchRecordChange = ($e: string, line = -1) => {
+  const temp = qcList.value.filter((i) => i.id === $e)
+  let result: any = {}
+  if (temp.length) {
+    result = cloneDeep(temp[0])
+  }
+
+  if (line > -1) {
+    // 主页面数据编辑
+    subList.value[line].Batch_Record = { id: result.id, name: result.Name }
+    if (result.Owner) {
+      subList.value[line].Requester = {
+        name: result.Owner.name,
+        id: result.Owner.id,
+      }
+    }
+  } else {
+    form.value.Requester = {
+      name: result.Owner.name,
+      id: result.Owner.id,
+    }
+    form.value.Batch_Record = { id: result.id, name: result.Name }
+  }
+}
+// 给子表格加红绿背景. 颜色用的tailwind的 red green
+const calcRowStyle = ($e: any) => {
+  const result = {} as any
+  if ($e.row.addFlag) result['background-color'] = 'rgb(187, 247, 208)'
+  if ($e.row.deleteFlag) result['background-color'] = 'rgb(254, 202, 202)'
+  return result
+}
+
+const commit = () => {
+  const result = cloneDeep(subList.value)
+    .filter((i) => !i.deleteFlag)
+    .map((i) => {
+      return {
+        id: i.id,
+        Sample: i.Sample || false,
+        Batch_Record: i.batchRecord
+          ? {
+              name: i.Batch_Record.name,
+              id: i.Batch_Record.id,
+            }
+          : '',
+        Parent_Id: {
+          name: i.Parent_Id.name,
+          id: i.Parent_Id.id || '',
+        },
+        Material_of_Goods: i.Material_of_Goods,
+        Requester: {
+          name: i.Requester.name,
+          id: i.Requester.id || '',
+        },
+        Sales_Person: i.Requester.name || '',
+        Carton: i.Carton || '',
+        Marks_Nos: i.Marks_Nos || '',
+        Description_of_Goods: i.Description_of_Goods || '',
+        Quantity: i.Quantity || '',
+        Unit_Price: i.Unit_Price || '',
+        Weight: i.Weight || '',
+        Cube: i.Cube || '',
+        Total_FOB: i.Total_FOB || '',
+        User_Notes: i.User_Notes || '',
+      }
+    })
+  loading.value = true
+  request
+    .post('/sea_freight/updateSeaFreightData', {
+      id: newLineTemplate.Parent_Id.id,
+      Sea_Freight_array: result,
+    })
+    .then((res) => {
+      if (res.data.code === 1) {
+        ElNotification({
+          title: '保存成功',
+          message: '正在刷新数据',
+          duration: 3000,
+        })
+        getSubList(currentRow.value)
+      } else {
+        ElMessage.error('保存出错')
+        loading.value = false
+      }
+    })
+    .catch((e) => {
+      console.log(e, 'commit error')
+      loading.value = false
+    })
+}
+let printDrawerVisible = ref(false)
+let currentPrintRow = ref({} as any)
+const print = (row: any) => {
+  currentPrintRow.value = row
+  printDrawerVisible.value = true
+}
+const exportSubTable = () => {
+  const headers = [
+    'id',
+    'CRM批次记录 (Batch Record)',
+    'Sample',
+    '箱数(Carton)',
+    '唛头 (Marks & Nos)',
+    '货物名称 (Description of Goods)',
+    '货物材质 (Material goods)',
+    '数量(Qty)',
+    '单价(澳币/AUD) (Unit Price)',
+    '重量(KG)(Weight)',
+    '体积 m³(Cube)',
+    '总离岸价 (澳币/AUD)(Total FOB)',
+    'User_Notes',
+    '负责人(Owner)',
+  ]
+  // console.log(subList.value, 'subList.value')
+  const data: any[] = subList.value.map((i) => {
+    return {
+      id: i.id,
+      'CRM批次记录 (Batch Record)': i.Batch_Record?.name || '',
+      Sample: i.Sample ? 'true' : '',
+      '箱数(Carton)': i.Carton || '',
+      '唛头 (Marks & Nos)': i.Marks_Nos || '',
+      '货物名称 (Description of Goods)': i.Description_of_Goods || '',
+      '货物材质 (Material goods)': i.Material_of_Goods,
+      '数量(Qty)': i.Quantity || '',
+      '单价(澳币/AUD) (Unit Price)': i.Unit_Price || '',
+      '重量(KG)(Weight)': i.Weight || '',
+      '体积 m³(Cube)': i.Cube || '',
+      '总离岸价 (澳币/AUD)(Total FOB)': i.Total_FOB || '',
+      User_Notes: i.User_Notes || '',
+      '负责人(Owner)': i.Requester.name || '',
+    }
+  })
+  if (data.length === 0) {
+    throw new Error('Invalid data: Data array is empty.')
+  }
+
+  const worksheetData = []
+  if (headers && headers.length > 0) {
+    worksheetData.push(headers)
+  } else {
+    worksheetData.push(Object.keys(data[0]))
+  }
+  data.forEach((row) => {
+    worksheetData.push(Object.values(row))
+  })
+  const wb = XLSX.utils.book_new()
+  let ws = XLSX.utils.aoa_to_sheet(worksheetData)
+
+  ws['!cols'] = [
+    { wpx: 120 },
+    { wpx: 450 },
+    { wpx: 80 },
+    { wpx: 80 },
+    { wpx: 80 },
+    { wpx: 120 },
+    { wpx: 100 },
+    { wpx: 80 },
+    { wpx: 80 },
+    { wpx: 80 },
+    { wpx: 80 },
+    { wpx: 80 },
+    { wpx: 350 },
+    { wpx: 100 },
+  ]
+
+  XLSX.utils.book_append_sheet(wb, ws, 'Sheet1')
+  XLSX.writeFile(wb, 'test.xlsx')
+}
+
+let qcList = ref([] as any[])
+let loading2 = ref(false)
+
+const search = (keyword: string) => {
+  if (keyword.length < 2) return
+
+  loading2.value = true
+  zoho.CRM.API.searchRecord({
+    Entity: 'QC_Record',
+    Type: 'criteria',
+    Query: `(Reference:in:${keyword})or(Reference:starts_with:${keyword})or(Purchase_Order.name:in:${keyword})or(Purchase_Order.name:starts_with:${keyword})`,
+    delay: false,
+  })
+    .then((res: any) => {
+      if (Array.isArray(res.data) && res.data.length) {
+        qcList.value = res.data
+      } else {
+        qcList.value = []
+        ElMessage.warning('No Data Found')
+      }
+    })
+    .finally(() => (loading2.value = false))
+}
+
+// @ts-ignore
+const zoho = window.ZOHO
+zoho.embeddedApp.on('PageLoad', function () {
+  zoho.CRM.CONFIG.getCurrentUser().then(function (data: any) {
+    if (Array.isArray(data.users) && data.users.length) {
+      const user = data.users[0]
+      currentUser.value = user.id
+      currentUserName.value = user.full_name || ''
+      getList()
+    }
+  })
+})
+
+zoho.embeddedApp.init()
+</script>

src/route.ts

@@ -115,6 +115,11 @@ const router = createRouter({
       path: '/so-search',
       component: () => import('@/pages/so-search/index.vue'),
     },
+    {
+      name: 'cargoConsolidationRequest',
+      path: '/cargo-consolidation-request',
+      component: () => import('@/pages/cargo-consolidation-request/index.vue'),
+    },
     {
       path: '/:pathMatch(.*)*',
       name: 'pageNotFound',