|
|
@@ -0,0 +1,1147 @@
|
|
|
+<template>
|
|
|
+ <div class="page-wecom-approval">
|
|
|
+ <div
|
|
|
+ v-if="loading"
|
|
|
+ v-loading="true"
|
|
|
+ style="
|
|
|
+ width: 100vw;
|
|
|
+ height: 100vh;
|
|
|
+ z-index: 999;
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ "
|
|
|
+ class=""
|
|
|
+ element-loading-text="Loading..."
|
|
|
+ element-loading-background="rgba(0, 0, 0, 0.3)"
|
|
|
+ ></div>
|
|
|
+ <div class="main-content">
|
|
|
+ <div
|
|
|
+ class="flex"
|
|
|
+ style="max-width: 800px; margin: 0 auto"
|
|
|
+ >
|
|
|
+ <div class="logo-area">
|
|
|
+ <img
|
|
|
+ :src="getLogoPath()"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="page-title">货物运输申请</div>
|
|
|
+ <!-- <el-button @click="submit">test</el-button> -->
|
|
|
+ </div>
|
|
|
+ <el-form
|
|
|
+ ref="mainForm"
|
|
|
+ style="max-width: 800px; margin: 0 auto"
|
|
|
+ :model="form"
|
|
|
+ :rules="rules"
|
|
|
+ label-width="150px"
|
|
|
+ label-position="left"
|
|
|
+ >
|
|
|
+ <el-form-item
|
|
|
+ label="申请人"
|
|
|
+ prop="name"
|
|
|
+ >
|
|
|
+ <el-input
|
|
|
+ v-model="form.creator_userid"
|
|
|
+ disabled
|
|
|
+ style="display: none"
|
|
|
+ ></el-input>
|
|
|
+ <div class="">{{ form.creator_userid }}</div>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ prop="so_ref"
|
|
|
+ label="SO Reference"
|
|
|
+ >
|
|
|
+ <el-input
|
|
|
+ v-model="form.so_ref"
|
|
|
+ style="display: none"
|
|
|
+ disabled
|
|
|
+ ></el-input>
|
|
|
+ <div class="">{{ form.so_ref }}</div>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ prop="job_name"
|
|
|
+ label="Job Name"
|
|
|
+ >
|
|
|
+ <el-input
|
|
|
+ v-model="form.job_name"
|
|
|
+ style="display: none"
|
|
|
+ disabled
|
|
|
+ ></el-input>
|
|
|
+ <div class="">{{ form.job_name }}</div>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item
|
|
|
+ prop="location"
|
|
|
+ label="Location"
|
|
|
+ >
|
|
|
+ <el-radio-group v-model="form.location">
|
|
|
+ <el-radio
|
|
|
+ v-for="item in locationList"
|
|
|
+ :key="item.key"
|
|
|
+ :label="item.value[0].text"
|
|
|
+ :value="item.key"
|
|
|
+ ></el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ prop="yunshu"
|
|
|
+ label="运输方式"
|
|
|
+ >
|
|
|
+ <el-radio-group v-model="form.yunshu">
|
|
|
+ <el-radio
|
|
|
+ v-for="item in yunshuList"
|
|
|
+ :key="item.key"
|
|
|
+ :label="item.value[0].text"
|
|
|
+ :value="item.key"
|
|
|
+ ></el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ v-if="form.yunshu === 'option-1718767952637'"
|
|
|
+ label="Cbm"
|
|
|
+ prop="cbm"
|
|
|
+ >
|
|
|
+ <el-input
|
|
|
+ v-model="form.cbm"
|
|
|
+ placeholder="如选择海运，请填写方数"
|
|
|
+ type="number"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item
|
|
|
+ prop="huoyun"
|
|
|
+ label="货运方式"
|
|
|
+ >
|
|
|
+ <el-radio-group v-model="form.huoyun">
|
|
|
+ <el-radio
|
|
|
+ v-for="item in huoyunList"
|
|
|
+ :key="item.key"
|
|
|
+ :label="item.value[0].text"
|
|
|
+ :value="item.key"
|
|
|
+ ></el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ v-if="form.huoyun === 'option-1718768018003'"
|
|
|
+ label="货代名称"
|
|
|
+ prop="huodai"
|
|
|
+ >
|
|
|
+ <el-select v-model="form.huodai">
|
|
|
+ <el-option
|
|
|
+ v-for="item in huodaiList"
|
|
|
+ :key="item.key"
|
|
|
+ :label="item.value[0].text"
|
|
|
+ :value="item.key"
|
|
|
+ ></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item
|
|
|
+ prop="trans"
|
|
|
+ label="中转方式"
|
|
|
+ >
|
|
|
+ <el-radio-group v-model="form.trans">
|
|
|
+ <el-radio
|
|
|
+ v-for="item in transList"
|
|
|
+ :key="item.key"
|
|
|
+ :label="item.value[0].text"
|
|
|
+ :value="item.key"
|
|
|
+ ></el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item
|
|
|
+ prop="number"
|
|
|
+ label="箱数"
|
|
|
+ >
|
|
|
+ <el-input v-model="form.number"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item
|
|
|
+ prop="weight"
|
|
|
+ label="重量"
|
|
|
+ >
|
|
|
+ <el-input v-model="form.weight">
|
|
|
+ <template #append>kg</template>
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item
|
|
|
+ prop="addr"
|
|
|
+ label="地址"
|
|
|
+ >
|
|
|
+ <el-input
|
|
|
+ v-model="form.addr"
|
|
|
+ placeholder="如选直送客户，寄送地址请附在此处"
|
|
|
+ type="textarea"
|
|
|
+ :rows="4"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item
|
|
|
+ prop="comment"
|
|
|
+ label="装箱备注"
|
|
|
+ >
|
|
|
+ <el-input
|
|
|
+ v-model="form.comment"
|
|
|
+ placeholder="任何补充，请在此处填写"
|
|
|
+ type="textarea"
|
|
|
+ :rows="3"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ prop="file"
|
|
|
+ label="附件"
|
|
|
+ >
|
|
|
+ <div>
|
|
|
+ <label for="fileInput">
|
|
|
+ <el-tooltip
|
|
|
+ :content="'企业微信限制了传\'图片\'最大只能上传10MB, 传\'文件\'类型最大只能上传20MB, 上传数量上限为6. 企微可能随时会调整, 建议别传太大的文件.'"
|
|
|
+ >
|
|
|
+ <div class="el-button el-button-primary">添加附件</div>
|
|
|
+ </el-tooltip>
|
|
|
+ </label>
|
|
|
+ <br />
|
|
|
+ <div style="color: #999">
|
|
|
+ Artwork/Agreement/合同/其他附件, 请Attach
|
|
|
+ </div>
|
|
|
+ <div class="">
|
|
|
+ <div
|
|
|
+ v-for="(file, i) in form.files"
|
|
|
+ :key="i"
|
|
|
+ class="flex"
|
|
|
+ >
|
|
|
+ <div style="color: #333; margin-right: 24px">
|
|
|
+ {{ file.name }}
|
|
|
+ </div>
|
|
|
+ <el-button
|
|
|
+ size="small"
|
|
|
+ type="danger"
|
|
|
+ @click="deleteFile(i)"
|
|
|
+ >
|
|
|
+ Delete
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="价格">
|
|
|
+ <el-table :data="form.price">
|
|
|
+ <el-table-column
|
|
|
+ label="货代价格"
|
|
|
+ prop=""
|
|
|
+ >
|
|
|
+ <template #default="scope">
|
|
|
+ <el-input
|
|
|
+ v-model="scope.row.pa"
|
|
|
+ placeholder="请填写我们支付给货代总金额或者每公斤单价"
|
|
|
+ ></el-input>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ width="220"
|
|
|
+ label="发票单价(AUD/USD)"
|
|
|
+ prop=""
|
|
|
+ >
|
|
|
+ <template #default="scope">
|
|
|
+ <el-input
|
|
|
+ v-model="scope.row.pb"
|
|
|
+ placeholder="请填写申报发票上的单价"
|
|
|
+ ></el-input>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <el-table-column
|
|
|
+ width="100"
|
|
|
+ label="操作"
|
|
|
+ >
|
|
|
+ <template #default="scope">
|
|
|
+ <el-button
|
|
|
+ type="danger"
|
|
|
+ size="small"
|
|
|
+ @click="deletePriceRow(scope.row, scope.$index)"
|
|
|
+ >
|
|
|
+ Delete
|
|
|
+ </el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <el-button
|
|
|
+ size="small"
|
|
|
+ @click="addPriceRow"
|
|
|
+ >
|
|
|
+ Add row
|
|
|
+ </el-button>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <br />
|
|
|
+
|
|
|
+ <el-form-item>
|
|
|
+ <template #label>
|
|
|
+ <div>
|
|
|
+ <div class="">货物</div>
|
|
|
+ <el-button
|
|
|
+ type="danger"
|
|
|
+ size="small"
|
|
|
+ @click="resetGoods"
|
|
|
+ >
|
|
|
+ Reset
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <el-table :data="form.goods">
|
|
|
+ <el-table-column label="品名">
|
|
|
+ <template #default="scope">
|
|
|
+ <el-input v-model="scope.row.name"></el-input>
|
|
|
+ <el-input
|
|
|
+ v-model="scope.row.desc"
|
|
|
+ type="textarea"
|
|
|
+ row="3"
|
|
|
+ style="margin-top: 8px"
|
|
|
+ ></el-input>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <el-table-column
|
|
|
+ width="120"
|
|
|
+ label="剩余数量"
|
|
|
+ prop="quantity"
|
|
|
+ >
|
|
|
+ <template #default="scope">
|
|
|
+ <el-input
|
|
|
+ v-model="scope.row.quantity"
|
|
|
+ type="number"
|
|
|
+ disabled
|
|
|
+ min="0"
|
|
|
+ ></el-input>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <el-table-column
|
|
|
+ width="120"
|
|
|
+ label="发货数量"
|
|
|
+ prop="number"
|
|
|
+ >
|
|
|
+ <template #default="scope">
|
|
|
+ <el-form-item
|
|
|
+ label=""
|
|
|
+ label-width="0"
|
|
|
+ :prop="'goods.' + scope.$index + '.number'"
|
|
|
+ :rules="{
|
|
|
+ required: true,
|
|
|
+ message: '必填项',
|
|
|
+ trigger: ['blur', 'change'],
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <el-input
|
|
|
+ v-model="scope.row.number"
|
|
|
+ type="number"
|
|
|
+ min="0"
|
|
|
+ @change="(e) => limitNumber(e, scope.row, 'number')"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <el-table-column
|
|
|
+ label="操作"
|
|
|
+ width="100"
|
|
|
+ >
|
|
|
+ <template #default="scope">
|
|
|
+ <el-button
|
|
|
+ type="danger"
|
|
|
+ size="small"
|
|
|
+ @click="deleteGoodRow(scope.row, scope.$index)"
|
|
|
+ >
|
|
|
+ Delete
|
|
|
+ </el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item>
|
|
|
+ <div class="flex">
|
|
|
+ <el-button
|
|
|
+ size="large"
|
|
|
+ type="primary"
|
|
|
+ :loading="loading"
|
|
|
+ @click="checkForm(mainForm)"
|
|
|
+ >
|
|
|
+ 提交
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <div class="copyright">
|
|
|
+ Copyright of Promocollection - Version 1.0 Released on 01/07/2024
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <input
|
|
|
+ id="fileInput"
|
|
|
+ type="file"
|
|
|
+ multiple
|
|
|
+ style="display: none"
|
|
|
+ @change="processFile"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script lang="ts">
|
|
|
+export default defineComponent({
|
|
|
+ name: 'WecomApproval',
|
|
|
+})
|
|
|
+</script>
|
|
|
+<script lang="ts" setup>
|
|
|
+import { defineComponent, ref } from 'vue'
|
|
|
+import { useRoute } from 'vue-router'
|
|
|
+import {
|
|
|
+ ElButton,
|
|
|
+ ElForm,
|
|
|
+ ElFormItem,
|
|
|
+ ElInput,
|
|
|
+ ElRadio,
|
|
|
+ ElRadioGroup,
|
|
|
+ ElTable,
|
|
|
+ ElTableColumn,
|
|
|
+ ElSelect,
|
|
|
+ ElOption,
|
|
|
+ ElMessage,
|
|
|
+ ElTooltip,
|
|
|
+ ElNotification,
|
|
|
+} from 'element-plus'
|
|
|
+import type { FormRules, FormInstance } from 'element-plus'
|
|
|
+import request from '@/utils/axios'
|
|
|
+
|
|
|
+const loading = ref(false)
|
|
|
+
|
|
|
+const mainForm = ref<FormInstance>()
|
|
|
+const form = ref({
|
|
|
+ creator_userid: '',
|
|
|
+ so_ref: '',
|
|
|
+ job_name: '',
|
|
|
+ location: '',
|
|
|
+ yunshu: '',
|
|
|
+ cbm: '',
|
|
|
+ huoyun: '',
|
|
|
+ huodai: '',
|
|
|
+ trans: '',
|
|
|
+ number: '',
|
|
|
+ weight: '',
|
|
|
+ addr: '',
|
|
|
+ comment: '',
|
|
|
+ archer: '',
|
|
|
+ price: [{ pa: '', pb: '' }],
|
|
|
+ goods: [] as any[],
|
|
|
+ files: [
|
|
|
+ // {
|
|
|
+ // file_id:
|
|
|
+ // '3ZEDMgSxc5WGR-sUbCIfGANv6ew8itx-KGdvpU2r7m-FUF3UO-Ycv-kOo3NUSbN0G',
|
|
|
+ // name: 'cat.jpg',
|
|
|
+ // },
|
|
|
+ ] as { file_id: string; name: string }[], // 附件
|
|
|
+})
|
|
|
+const rules = ref<FormRules>({
|
|
|
+ creator_userid: [{ required: true, message: '必填项', trigger: 'blur' }],
|
|
|
+ so_ref: [{ required: true, message: '必填项', trigger: 'blur' }],
|
|
|
+ job_name: [{ required: true, message: '必填项', trigger: 'blur' }],
|
|
|
+ location: [{ required: true, message: '必填项', trigger: 'blur' }],
|
|
|
+ yunshu: [{ required: true, message: '必填项', trigger: 'blur' }],
|
|
|
+ cbm: [{ required: true, message: '必填项', trigger: 'blur' }],
|
|
|
+ huoyun: [{ required: true, message: '必填项', trigger: 'blur' }],
|
|
|
+ huodai: [{ required: true, message: '必填项', trigger: 'blur' }],
|
|
|
+ trans: [{ required: true, message: '必填项', trigger: 'blur' }],
|
|
|
+})
|
|
|
+const locationList = [
|
|
|
+ {
|
|
|
+ key: 'option-1718767763003',
|
|
|
+ value: [
|
|
|
+ {
|
|
|
+ text: 'AU',
|
|
|
+ lang: 'zh_CN',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: 'option-1718767763004',
|
|
|
+ value: [
|
|
|
+ {
|
|
|
+ text: 'NZ',
|
|
|
+ lang: 'zh_CN',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: 'option-1718767776803',
|
|
|
+ value: [
|
|
|
+ {
|
|
|
+ text: 'Other（请在地址栏填写其他国家）',
|
|
|
+ lang: 'zh_CN',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+]
|
|
|
+const yunshuList = [
|
|
|
+ {
|
|
|
+ key: 'option-1718767905143',
|
|
|
+ value: [
|
|
|
+ {
|
|
|
+ text: '其他空运',
|
|
|
+ lang: 'zh_CN',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: 'option-1718767938758',
|
|
|
+ value: [
|
|
|
+ {
|
|
|
+ text: 'DHL空运',
|
|
|
+ lang: 'zh_CN',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: 'option-1718767944843',
|
|
|
+ value: [
|
|
|
+ {
|
|
|
+ text: 'TNT空运',
|
|
|
+ lang: 'zh_CN',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: 'option-1718767905144',
|
|
|
+ value: [
|
|
|
+ {
|
|
|
+ text: 'FedEx空运',
|
|
|
+ lang: 'zh_CN',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: 'option-1718767952637',
|
|
|
+ value: [
|
|
|
+ {
|
|
|
+ text: '海运',
|
|
|
+ lang: 'zh_CN',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+]
|
|
|
+const huoyunList = [
|
|
|
+ {
|
|
|
+ key: 'option-1718767971282',
|
|
|
+ value: [
|
|
|
+ {
|
|
|
+ text: '自送AUE',
|
|
|
+ lang: 'zh_CN',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: 'option-1718767971283',
|
|
|
+ value: [
|
|
|
+ {
|
|
|
+ text: '自送浚捷',
|
|
|
+ lang: 'zh_CN',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: 'option-1718768010827',
|
|
|
+ value: [
|
|
|
+ {
|
|
|
+ text: 'Logistics直发客户',
|
|
|
+ lang: 'zh_CN',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: 'option-1718768018003',
|
|
|
+ value: [
|
|
|
+ {
|
|
|
+ text: '货代',
|
|
|
+ lang: 'zh_CN',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+]
|
|
|
+const huodaiList = [
|
|
|
+ {
|
|
|
+ key: 'option-1718768061055',
|
|
|
+ value: [
|
|
|
+ {
|
|
|
+ text: '腾信',
|
|
|
+ lang: 'zh_CN',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: 'option-1718768061056',
|
|
|
+ value: [
|
|
|
+ {
|
|
|
+ text: 'BWW',
|
|
|
+ lang: 'zh_CN',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: 'option-1718768085759',
|
|
|
+ value: [
|
|
|
+ {
|
|
|
+ text: '天汇',
|
|
|
+ lang: 'zh_CN',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: 'option-1718768093097',
|
|
|
+ value: [
|
|
|
+ {
|
|
|
+ text: '耀辉',
|
|
|
+ lang: 'zh_CN',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: 'option-1718768107857',
|
|
|
+ value: [
|
|
|
+ {
|
|
|
+ text: '聂先生',
|
|
|
+ lang: 'zh_CN',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: 'option-1718768114817',
|
|
|
+ value: [
|
|
|
+ {
|
|
|
+ text: '项先生',
|
|
|
+ lang: 'zh_CN',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: 'option-1718768125847',
|
|
|
+ value: [
|
|
|
+ {
|
|
|
+ text: '鑫发',
|
|
|
+ lang: 'zh_CN',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: 'option-1718768131503',
|
|
|
+ value: [
|
|
|
+ {
|
|
|
+ text: '茗佳',
|
|
|
+ lang: 'zh_CN',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+]
|
|
|
+
|
|
|
+const transList = [
|
|
|
+ {
|
|
|
+ key: 'option-1718768200256',
|
|
|
+ value: [
|
|
|
+ {
|
|
|
+ text: '直送NZ',
|
|
|
+ lang: 'zh_CN',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: 'option-1718768200257',
|
|
|
+ value: [
|
|
|
+ {
|
|
|
+ text: '直送客户',
|
|
|
+ lang: 'zh_CN',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: 'option-1718768224239',
|
|
|
+ value: [
|
|
|
+ {
|
|
|
+ text: 'to AUWH',
|
|
|
+ lang: 'zh_CN',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+]
|
|
|
+const addPriceRow = () =>
|
|
|
+ form.value.price.push({
|
|
|
+ pa: '',
|
|
|
+ pb: '',
|
|
|
+ })
|
|
|
+
|
|
|
+const deletePriceRow = function (row: any, index: number) {
|
|
|
+ form.value.price.splice(index, 1)
|
|
|
+}
|
|
|
+const deleteGoodRow = function (row: any, index: number) {
|
|
|
+ form.value.goods.splice(index, 1)
|
|
|
+}
|
|
|
+const deleteFile = function (index: number) {
|
|
|
+ form.value.files.splice(index, 1)
|
|
|
+}
|
|
|
+
|
|
|
+const route = useRoute()
|
|
|
+const soData = ref(
|
|
|
+ {} as {
|
|
|
+ Contract_Title: string
|
|
|
+ Reference: string
|
|
|
+ Pkg_details: any[]
|
|
|
+ Ordered_Items: any[]
|
|
|
+ },
|
|
|
+)
|
|
|
+
|
|
|
+const resetGoods = function () {
|
|
|
+ if (Array.isArray(soData.value.Pkg_details)) {
|
|
|
+ form.value.goods = soData.value.Pkg_details.map((i: any) => {
|
|
|
+ return {
|
|
|
+ name: i.Product?.name || '',
|
|
|
+ desc: i.Description || '',
|
|
|
+ quantity: i.Quantity || '',
|
|
|
+ number: '',
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } else if (Array.isArray(soData.value.Ordered_Items)) {
|
|
|
+ form.value.goods = soData.value.Ordered_Items.map((i: any) => {
|
|
|
+ return {
|
|
|
+ name: i.product || '',
|
|
|
+ desc: i.description || '',
|
|
|
+ quantity: i.quantity || '',
|
|
|
+ number: '',
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ form.value.goods = []
|
|
|
+ }
|
|
|
+}
|
|
|
+request
|
|
|
+ .post('/common/getSalesOrdersData', {
|
|
|
+ id: route.params.id,
|
|
|
+ })
|
|
|
+ .then((res) => {
|
|
|
+ const d = res.data.result
|
|
|
+ if (res.status === 200 && res.data.code === 1) {
|
|
|
+ soData.value = d
|
|
|
+ form.value.creator_userid = (route.query.userName as string) || ''
|
|
|
+ form.value.job_name = d.Contract_Title
|
|
|
+ form.value.so_ref = d.Reference
|
|
|
+ form.value.addr = (
|
|
|
+ (d.ATTN ? `ATTN ${d.ATTN}; ` : '') +
|
|
|
+ (d.Phone ? `Phone ${d.Phone}` : '') +
|
|
|
+ '\n' +
|
|
|
+ d.Shipping_Unit_Building_Name +
|
|
|
+ ', ' +
|
|
|
+ d.Shipping_Street +
|
|
|
+ ', ' +
|
|
|
+ d.Shipping_City +
|
|
|
+ ', ' +
|
|
|
+ d.Shipping_State +
|
|
|
+ ', ' +
|
|
|
+ d.Shipping_Code +
|
|
|
+ ', ' +
|
|
|
+ d.Shipping_Country
|
|
|
+ ).trim()
|
|
|
+ }
|
|
|
+ resetGoods()
|
|
|
+ })
|
|
|
+
|
|
|
+const limitNumber = function (e: any, obj: any, key: string) {
|
|
|
+ if (e) {
|
|
|
+ obj[key] = Math.round(Number(e))
|
|
|
+ } else {
|
|
|
+ obj[key] = 1
|
|
|
+ }
|
|
|
+}
|
|
|
+const resetFileInput = function () {
|
|
|
+ const input = document.getElementById('fileInput') as HTMLInputElement
|
|
|
+ if (input) {
|
|
|
+ input.value = ''
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+const processFile = async function (event: any) {
|
|
|
+ if (loading.value) {
|
|
|
+ console.log('重复 change')
|
|
|
+ // 如果正在上传, 无视重复选择文件动作
|
|
|
+ resetFileInput()
|
|
|
+ return
|
|
|
+ }
|
|
|
+ const files = event.target.files || event.dataTransfer.files
|
|
|
+ loading.value = true
|
|
|
+
|
|
|
+ Promise.all(
|
|
|
+ Array.from(files).map((file: any) => {
|
|
|
+ const fileForm = new FormData()
|
|
|
+ fileForm.append('file', file)
|
|
|
+ return request
|
|
|
+ .post('/Shipping_tracking/uploadStraightFile', fileForm, {
|
|
|
+ headers: {
|
|
|
+ 'Content-Type': 'multipart/form-data',
|
|
|
+ },
|
|
|
+ })
|
|
|
+ .then((res) => {
|
|
|
+ const d = res.data
|
|
|
+ if (![1, 200].includes(d.result.code)) {
|
|
|
+ ElMessage.error(d.result?.message?.errmsg || 'error')
|
|
|
+ } else {
|
|
|
+ ElMessage.success(file.name + '上传成功')
|
|
|
+ form.value.files.push({
|
|
|
+ file_id: d.result.message.media_id || '',
|
|
|
+ name: file.name,
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }),
|
|
|
+ ).finally(() => {
|
|
|
+ loading.value = false
|
|
|
+ // 处理上传完文件, 重置文件输入框内容
|
|
|
+ resetFileInput()
|
|
|
+ })
|
|
|
+}
|
|
|
+const checkForm = function (formEl: FormInstance | undefined) {
|
|
|
+ if (!formEl) return
|
|
|
+
|
|
|
+ formEl.validate((valid, fields) => {
|
|
|
+ if (valid) {
|
|
|
+ submit()
|
|
|
+ } else {
|
|
|
+ ElMessage.error('请检查表单必填项')
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+const submit = function () {
|
|
|
+ // 接口
|
|
|
+ const d = {
|
|
|
+ creator_userid: form.value.creator_userid,
|
|
|
+ template_id: '3TmmDAekrafuPCvjxB9TqYwrmk5uj6XGoxseaD1J', // 申请模版 的id
|
|
|
+ use_template_approver: 1, // 使用此模板在管理后台设置的审批流程
|
|
|
+ apply_data: {
|
|
|
+ contents: [
|
|
|
+ {
|
|
|
+ control: 'Text',
|
|
|
+ id: 'Text-1718767851650',
|
|
|
+ value: {
|
|
|
+ text: form.value.so_ref,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ control: 'Text',
|
|
|
+ id: 'Text-1718767876049',
|
|
|
+ value: {
|
|
|
+ text: form.value.job_name,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ control: 'Selector',
|
|
|
+ id: 'Selector-1718767763003',
|
|
|
+ value: {
|
|
|
+ selector: {
|
|
|
+ type: 'single',
|
|
|
+ options: [
|
|
|
+ {
|
|
|
+ key: form.value.location,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ // 运输方式
|
|
|
+ control: 'Selector',
|
|
|
+ id: 'Selector-1718767905142',
|
|
|
+ value: {
|
|
|
+ selector: {
|
|
|
+ type: 'single',
|
|
|
+ options: [
|
|
|
+ {
|
|
|
+ key: form.value.yunshu,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ // 货运
|
|
|
+ control: 'Selector',
|
|
|
+ id: 'Selector-1718767971281',
|
|
|
+ value: {
|
|
|
+ selector: {
|
|
|
+ type: 'single',
|
|
|
+ options: [
|
|
|
+ {
|
|
|
+ key: form.value.huoyun,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ // 中转
|
|
|
+ control: 'Selector',
|
|
|
+ id: 'Selector-1718768200256',
|
|
|
+ value: {
|
|
|
+ selector: {
|
|
|
+ type: 'single',
|
|
|
+ options: [
|
|
|
+ {
|
|
|
+ key: form.value.trans,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ control: 'Number',
|
|
|
+ id: 'Number-1718768439507',
|
|
|
+ value: {
|
|
|
+ new_number: form.value.number,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ control: 'Number',
|
|
|
+ id: 'Number-1718768458174',
|
|
|
+ value: {
|
|
|
+ new_number: form.value.weight,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ // 地址
|
|
|
+ control: 'Textarea',
|
|
|
+ id: 'Textarea-1718769752197',
|
|
|
+ value: {
|
|
|
+ text: form.value.addr,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ // 装箱备注
|
|
|
+ control: 'Textarea',
|
|
|
+ id: 'Textarea-1718769807829',
|
|
|
+ value: {
|
|
|
+ text: form.value.comment,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ] as any[],
|
|
|
+ },
|
|
|
+ summary_list: [
|
|
|
+ {
|
|
|
+ summary_info: [
|
|
|
+ {
|
|
|
+ text: locationList.filter((i) => i.key === form.value.location)[0]
|
|
|
+ .value[0].text,
|
|
|
+ lang: 'zh_CN',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ summary_info: [
|
|
|
+ {
|
|
|
+ text: form.value.so_ref,
|
|
|
+ lang: 'zh_CN',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ summary_info: [
|
|
|
+ {
|
|
|
+ text: form.value.job_name,
|
|
|
+ lang: 'zh_CN',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ }
|
|
|
+
|
|
|
+ if (form.value.yunshu === 'option-1718767952637') {
|
|
|
+ d.apply_data.contents.push({
|
|
|
+ control: 'Number',
|
|
|
+ id: 'Number-1718768530132',
|
|
|
+ value: {
|
|
|
+ new_number: form.value.cbm,
|
|
|
+ },
|
|
|
+ })
|
|
|
+ }
|
|
|
+ if (form.value.huoyun === 'option-1718768018003') {
|
|
|
+ d.apply_data.contents.push({
|
|
|
+ control: 'Selector',
|
|
|
+ id: 'Selector-1718768061055',
|
|
|
+ value: {
|
|
|
+ selector: {
|
|
|
+ type: 'single',
|
|
|
+ options: [
|
|
|
+ {
|
|
|
+ key: form.value.huodai,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ },
|
|
|
+ })
|
|
|
+ }
|
|
|
+ if (form.value.price.length) {
|
|
|
+ // 价格数据
|
|
|
+ d.apply_data.contents.push({
|
|
|
+ control: 'Table',
|
|
|
+ id: 'Table-1718768730236',
|
|
|
+ value: {
|
|
|
+ children: form.value.price.map((p) => {
|
|
|
+ return {
|
|
|
+ list: [
|
|
|
+ {
|
|
|
+ control: 'Text',
|
|
|
+ id: 'Text-1718769352473',
|
|
|
+ value: {
|
|
|
+ text: p.pa,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ control: 'Text',
|
|
|
+ id: 'Text-1718769658148',
|
|
|
+ value: {
|
|
|
+ text: p.pb,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ }
|
|
|
+ }),
|
|
|
+ },
|
|
|
+ })
|
|
|
+ }
|
|
|
+ if (form.value.goods.length) {
|
|
|
+ // 货物数据
|
|
|
+ d.apply_data.contents.push({
|
|
|
+ control: 'Table',
|
|
|
+ id: 'Table-1718950612643',
|
|
|
+ value: {
|
|
|
+ children: form.value.goods.map((g) => {
|
|
|
+ return {
|
|
|
+ list: [
|
|
|
+ {
|
|
|
+ control: 'Text',
|
|
|
+ id: 'Text-1718950641228',
|
|
|
+ value: {
|
|
|
+ text: g.name,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ control: 'Textarea',
|
|
|
+ id: 'Textarea-1718950654801',
|
|
|
+ value: {
|
|
|
+ text: g.desc,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ control: 'Number',
|
|
|
+ id: 'Number-1718950666260',
|
|
|
+ value: {
|
|
|
+ new_number: g.number,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ }
|
|
|
+ }),
|
|
|
+ },
|
|
|
+ })
|
|
|
+ }
|
|
|
+ if (form.value.files.length) {
|
|
|
+ // 附件
|
|
|
+ d.apply_data.contents.push({
|
|
|
+ control: 'File',
|
|
|
+ id: 'File-1718769828663',
|
|
|
+ value: {
|
|
|
+ files: form.value.files.map((i) => {
|
|
|
+ return { file_id: i.file_id }
|
|
|
+ }),
|
|
|
+ },
|
|
|
+ })
|
|
|
+ }
|
|
|
+ console.log(d, 'form data')
|
|
|
+ loading.value = true
|
|
|
+ request
|
|
|
+ .post('/Shipping_tracking/createShippingTracking', d)
|
|
|
+ .then((res) => {
|
|
|
+ const d = res.data
|
|
|
+ console.log(d, 'create approval')
|
|
|
+ if (d.result.code === 200) {
|
|
|
+ ElNotification({
|
|
|
+ duration: 0,
|
|
|
+ type: 'success',
|
|
|
+ title: '任务已成功处理',
|
|
|
+ message: '本页面将自动关闭',
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ ElNotification({
|
|
|
+ duration: 0,
|
|
|
+ type: 'error',
|
|
|
+ title: '创建审核单出错!',
|
|
|
+ message: d.result.message.errmsg || '',
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .finally(() => {
|
|
|
+ loading.value = false
|
|
|
+ })
|
|
|
+}
|
|
|
+const getLogoPath = function () {
|
|
|
+ return new URL('/assets/logo@2x.png', import.meta.url).href
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+input[type='number'] {
|
|
|
+ -moz-appearance: textfield;
|
|
|
+ appearance: textfield;
|
|
|
+ &:hover {
|
|
|
+ -moz-appearance: textfield;
|
|
|
+ appearance: textfield;
|
|
|
+ &::-webkit-inner-spin-button,
|
|
|
+ &::-webkit-outer-spin-button {
|
|
|
+ -webkit-appearance: none;
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &::-webkit-inner-spin-button,
|
|
|
+ &::-webkit-outer-spin-button {
|
|
|
+ -webkit-appearance: none;
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.main-content {
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 12px 40px;
|
|
|
+ width: 1000px;
|
|
|
+ min-width: 1000px;
|
|
|
+ min-height: 100vh;
|
|
|
+ margin: 0 auto;
|
|
|
+ box-shadow:
|
|
|
+ 0 0 0 1px rgba(255, 255, 255, 0.4) inset,
|
|
|
+ 0 0.5em 1em rgba(0, 0, 0, 0.6);
|
|
|
+}
|
|
|
+.logo-area {
|
|
|
+ img {
|
|
|
+ position: relative;
|
|
|
+ left: -16px;
|
|
|
+ height: 60px;
|
|
|
+ }
|
|
|
+}
|
|
|
+.page-title {
|
|
|
+ font-size: 24px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #222;
|
|
|
+}
|
|
|
+.copyright {
|
|
|
+ position: absoloute;
|
|
|
+ text-align: right;
|
|
|
+ color: #ccc;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 16px;
|
|
|
+ right: 16px;
|
|
|
+}
|
|
|
+</style>
|
