feat: 企业微信审批-货物直发申请模块.初稿

src/assets/css/element-hack.scss

@@ -3,3 +3,8 @@
   padding-right: 14px;
   padding-left: 14px;
 }
+.el-table .cell,
+.el-form-item,
+.el-form-item__content {
+  overflow: visible;
+}

src/pages/wecom-approval/index.vue

@@ -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>

src/route.ts

@@ -25,6 +25,11 @@ const router = createRouter({
       path: '/payment-record',
       component: () => import('@/pages/payment-record/index.vue'),
     },
+    {
+      name: 'wecomApproval',
+      path: '/wecom-approval/:id',
+      component: () => import('@/pages/wecom-approval/index.vue'),
+    },
     {
       path: '/:pathMatch(.*)*',
       name: 'pageNotFound',