crm_extend/src/pages/wecom-approval/index.vue

<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="redirectToCRM">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 style="font-weight: bold">{{ firstName }}</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>
              <div style="width: 100px; text-align: center">kg</div>
            </template>
          </el-input>
        </el-form-item>

        <el-form-item label="地址">
          <div class="addr-input-group">
            <div class="flex items-start">
              <el-input
                v-model="form.ATTN"
                placeholder="ATTN"
              ></el-input>
              <div class="addr-append">ATTN</div>
            </div>
            <div class="flex items-start">
              <el-input
                v-model="form.Phone"
                placeholder="Phone"
              ></el-input>
              <div class="addr-append">Phone</div>
            </div>
            <div class="flex items-stretch">
              <el-input
                v-model="form.Shipping_Unit_Building_Name"
                placeholder="Shipping Unit/Building Name"
                :autosize="{ minRows: 1 }"
                type="textarea"
              ></el-input>
              <div class="addr-append">Shipping Unit</div>
            </div>
            <div class="flex items-start">
              <el-input
                v-model="form.Shipping_Street"
                placeholder="Shipping Street"
              ></el-input>
              <div class="addr-append">Shipping Street</div>
            </div>
            <div class="flex items-start">
              <el-input
                v-model="form.Shipping_City"
                placeholder="Shipping City"
              ></el-input>
              <div class="addr-append">Shipping City</div>
            </div>
            <div class="flex items-start">
              <el-input
                v-model="form.Shipping_State"
                placeholder="Shipping state"
              ></el-input>
              <div class="addr-append">Shipping State</div>
            </div>
            <div class="flex items-start">
              <el-input
                v-model="form.Shipping_Code"
                placeholder="Shipping Code"
              ></el-input>
              <div class="addr-append">Shipping Code</div>
            </div>
            <div class="flex items-start">
              <el-input
                v-model="form.Shipping_Country"
                placeholder="Shipping Country"
              ></el-input>
              <div class="addr-append">Shipping Country</div>
            </div>
          </div>
        </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>
              <el-button
                style="margin: 8px 0 0 0"
                type="primary"
                size="small"
                @click="autoFillNumber"
              >
                Dispatch All
              </el-button>
            </div>
          </template>
          <el-table :data="form.goods">
            <el-table-column label="品名">
              <template #default="scope">
                <el-input
                  v-model="scope.row.name"
                  disabled
                ></el-input>
                <el-input
                  v-model="scope.row.desc"
                  type="textarea"
                  row="3"
                  disabled
                  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"
              :disabled="submited"
              :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 { computed, 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: '',
  ATTN: '',
  Phone: '',
  Shipping_Unit_Building_Name: '',
  Shipping_Street: '',
  Shipping_City: '',
  Shipping_State: '',
  Shipping_Code: '',
  Shipping_Country: '',
  comment: '',
  archer: '',
  price: [{ pa: '', pb: '' }],
  goods: [] as any[],
  files: [] as { file_id: string; name: string }[], // 附件
  useField: '',
})
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',
      },
    ],
  },
  {
    key: 'option-1723103324115',
    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[]
    Product_Details: any[]
  },
)

const resetGoods = function () {
  if (
    Array.isArray(soData.value.Pkg_details) &&
    soData.value.Pkg_details.length
  ) {
    form.value.useField = 'Pkg_details'
    form.value.goods = soData.value.Pkg_details.map((i: any) => {
      return {
        id: i.Product_Line_Id,
        name: i.Product?.name || '',
        desc: i.Description || '',
        quantity: i.Quantity || 0,
        number: '',
      }
    })
  } else if (Array.isArray(soData.value.Product_Details)) {
    form.value.useField = 'Product_Details'
    form.value.goods = soData.value.Product_Details.map((i: any) => {
      console.log('iii')
      return {
        id: i.id,
        name: i.product.name || '',
        desc: i.product_description || '',
        quantity: i.quantity || 0,
        number: '',
      }
    })
  } else {
    form.value.goods = []
  }
}

const autoFillNumber = function () {
  form.value.goods.forEach((i) => {
    i.number = i.quantity
  })
}

const firstName = ref('')
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
      if (d.Package_not_complate === true) {
        ElNotification({
          duration: 0,
          type: 'error',
          title: '出错啦!',
          message: 'Please confirm current package before a create a new one',
        })
        return false
      }
      firstName.value = (route.query.firstName as string) || ''
      form.value.creator_userid = (route.query.userName as string) || ''
      form.value.job_name = d.Contract_Title
      form.value.so_ref = d.Reference
      form.value.ATTN = d.ATTN || ''
      form.value.Phone = d.Phone || ''
      form.value.Shipping_Unit_Building_Name =
        d.Shipping_Unit_Building_Name || ''
      form.value.Shipping_Street = d.Shipping_Street || ''
      form.value.Shipping_City = d.Shipping_City || ''
      form.value.Shipping_State = d.Shipping_State || ''
      form.value.Shipping_Code = d.Shipping_Code || ''
      form.value.Shipping_Country = d.Shipping_Country || ''
    }
    resetGoods()
  })

const limitNumber = function (e: any, obj: any, key: string) {
  if (e) {
    obj[key] = Math.round(Number(e))
  }
}
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 approvalCount = computed(() => {
  return form.value.goods.reduce((t, i) => {
    t += Number(i.number)
    return t
  }, 0)
})
const checkForm = function (formEl: FormInstance | undefined) {
  if (approvalCount.value <= 0) {
    ElNotification({
      duration: 0,
      type: 'warning',
      title: '注意',
      message: '总发货数量不能为 0, 请修改发货数量。',
    })
    return
  }
  if (!formEl) return

  formEl.validate((valid, fields) => {
    if (valid) {
      form.value.Phone = form.value.Phone.replace(/[^0-9-+]/g, '')
      submit()
    } else {
      ElMessage.error('请检查表单必填项')
    }
  })
}
const submited = ref(false)
const submit = function () {
  // 接口
  const d: any = {
    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.ATTN ? `ATTN ${form.value.ATTN}; ` : '') +
              (form.value.Phone ? `Phone ${form.value.Phone}` : '') +
              '\n' +
              form.value.Shipping_Unit_Building_Name +
              ', ' +
              form.value.Shipping_Street +
              ', ' +
              form.value.Shipping_City +
              ', ' +
              form.value.Shipping_State +
              ', ' +
              form.value.Shipping_Code +
              ', ' +
              form.value.Shipping_Country
            )
              .trim()
              .replace('null', ''),
          },
        },
        {
          // 装箱备注
          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
          .filter((g) => g.number > 0)
          .map((g) => {
            if (g.number > g.quantity) {
              setTimeout(() => {
                ElNotification({
                  duration: 0,
                  type: 'warning',
                  title: '注意',
                  message: `${g.name} 发货数量${g.number}大于可发货数量${g.quantity}`,
                })
              }, 0)
            }
            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 }
        }),
      },
    })
  }
  d.sales_order_detail = soData.value
  d.origin_form = form.value
  console.log(d, 'form data')
  loading.value = true
  submited.value = true
  request
    .post('/Shipping_tracking/createShippingTracking', d)
    .then((res) => {
      const d = res.data
      console.log(d, 'create approval')
      if (d.result.code === 200 && d.code === 1) {
        ElNotification({
          duration: 0,
          type: 'success',
          title: '任务已成功处理',
          message: '本页面将自动跳转CRM',
        })
        setTimeout(() => {
          redirectToCRM()
        }, 3500)
      } else {
        ElNotification({
          duration: 0,
          type: 'error',
          title: '创建审核单出错!请联系管理员',
          message: d.result.message?.errmsg || d.msg || '',
        })
      }
    })
    .finally(() => {
      loading.value = false
    })
}
const redirectToCRM = () => {
  window.location.replace(import.meta.env.VITE_CRM_PATH)
}
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 12px;
  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 {
  padding: 12px 0 12px;
  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;
}
.addr-input-group {
  width: 100%;
  :deep(.el-input__wrapper),
  :deep(textarea) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    min-height: 34px !important;
  }

  .el-input,
  .el-textarea {
    margin-bottom: 10px;
    &:last-of-type {
      margin-bottom: 0;
    }
  }
  .addr-append {
    box-sizing: border-box;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    border: 1px solid #dfdfdf;
    border-left: none;
    margin-bottom: 10px;

    $width: 140px;
    width: $width;
    max-width: $width;
    min-width: $width;
    color: rgb(144, 147, 153);
    background-color: rgb(245, 247, 250);
    box-shadow:
      0 1px 0 0 var(--el-input-border-color) inset,
      0 -1px 0 0 var(--el-input-border-color) inset,
      -1px 0 0 0 var(--el-input-border-color) inset;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>