feat(create-order): 添加上传发票功能

- 新增上传发票弹窗和相关组件
- 实现发票信息填写和上传功能
- 添加公司关联搜索功能
- 优化发票信息展示和操作

Signed-off-by: tangshizhe <48740614+tangshizhe@users.noreply.github.com>

src/api/modules/index.js

@@ -153,3 +153,11 @@ export function ajaxEditOrderContract(data) {
     data,
   })
 }
+
+export function ajaxGetCompanyAssociation(data) {
+  return request({
+    url: '/jypay/user/company/association',
+    method: 'post',
+    data: qs.stringify(data)
+  })
+}

src/views/create-order/components/order-detail-submodule/InvoiceInfo.vue

@@ -34,6 +34,7 @@
             <div class="invoice-info-action">
               <span class="column-cell" @click="getInvoiceInfo(row.row)">查看开票二维码</span>
               <span class="column-cell" v-if="showAgainBtn(row.row)" @click="againInvoce(row.row)">重新开票</span>
+              <span class="column-cell" v-if="showEditBtn()" @click="editInvoice(row.row)">编辑发票</span>
             </div>
           </template>
           <template v-slot:invoice_money="{ row }">
@@ -132,12 +133,26 @@ export default {
        * 4. 行政
        * 5. 财务
        */
-      // item.userIdentity
+      // this.orderDetail.userIdentity
       // 按钮展示权限：发票状态为已开具或开票失败时，且管理后台用户群组为“财务”时才展示，否则不展示；
       const status = item.invoice_status === 1 || item.invoice_status === -1
-      const root = Array.isArray(this.orderDetail.userIdentity) && this.orderDetail.userIdentity.includes(5)
+      const root = Array.isArray(this.orderDetail?.userIdentity) && this.orderDetail?.userIdentity.includes(5)
       return status && root
     },
+    showEditBtn() {
+      /**
+       * 1. 超级管理员
+       * 2. 销管
+       * 3. 客服
+       * 4. 行政
+       * 5. 财务
+       */
+      // this.orderDetail.userIdentity
+      // 线下开票
+      const applybillStatus = this.orderDetail.orderData?.applybill_status === 2
+      const root = Array.isArray(this.orderDetail?.userIdentity) && this.orderDetail?.userIdentity.includes(5)
+      return applybillStatus && root
+    },
     backInvoiceStatus(val) {
       if (val == -2) {
           return '已冲红'
@@ -168,6 +183,11 @@ export default {
       const path = `${domain}/jy_mobile/invoice/Invoicing?type=Replace&${params}&finance=1`
       window.open(path, '_blank')
     },
+    editInvoice(item) {
+      const { code_url } = item
+      const URLS = new URL(code_url)
+      const domain = URLS.origin;
+    },
     getInvoiceDetailInfo(item) {
       this.selectInvoice = item;
       this.$refs.invoiceDetailRef.codeShow = true;

src/views/create-order/components/order-detail-submodule/OrderActions.vue

@@ -18,6 +18,9 @@
       <div class="order-action-item" v-if="isAdminPage && checkActionPower['协议归档']">
         <div class="order-action-text" @click="doActionByPower('协议归档')">协议归档</div>
       </div>
+      <div class="order-action-item" v-if="isAdminPage">
+        <div class="order-action-text" @click="doActionByPower('上传发票')">上传发票</div>
+      </div>
       <div class="order-action-item" v-if="isAdminPage && newActionList.length > 0">
         <div class="order-action-text" v-if="newActionList.length === 1" @click="doActionByPower(newActionList[0])">newActionList[0]</div>
         <el-dropdown size="medium" trigger="click" @command="doActionByPower" v-else>
@@ -157,7 +160,8 @@
     <b-collect ref="batchModel" :selectData="[orDetails]" :bookLevel="orDetails?.filterData?.level" @onChange="doRefresh('回款信息')"></b-collect>
     <!-- 盖章记录弹窗-->
     <sealDialog ref="sealDialogRef" :new-api="true" @refresh="doRefresh('盖章记录')" />
-
+    <!-- 上传发票弹框 -->
+     <uploadInvoiceModule ref="uploadInvoiceRef"></uploadInvoiceModule>
   </div>
 </template>
 
@@ -176,6 +180,7 @@ import SealDialog from "@/views/order/components/sealDialog.vue";
 import CreateOrder from '../create.vue'
 import newSetOrderInfo from '../newSetOrderInfo.vue'
 import newDetailModel from '../newDetailModel.vue'
+import uploadInvoiceModule from '../uploadInvoiceModule.vue';
 import { signUnitOptions } from '@/views/create-order/data/index.js'
 
 export default {
@@ -186,6 +191,7 @@ export default {
     EditOrder,
     newSetOrderInfo,
     newDetailModel,
+    uploadInvoiceModule,
     bCollect,
     dModel,
     iInvoice,
@@ -500,6 +506,7 @@ export default {
         '盖章': [2, 4],
         '线下开发票': [5],
         '导入发票': [5],
+        '上传发票': [5],
         '录入线下发票链接/物流信息': [5],
       }
 
@@ -735,6 +742,10 @@ export default {
           }
           break
         }
+        case '上传发票': {
+          this.$refs.uploadInvoiceRef.uploadDialogVisible = true
+          break
+        }
         case '线下开发票': {
           this.$refs.backRef.iShow = true
           break

src/views/create-order/components/order-detail-submodule/OrderDetailCardProductList.vue

@@ -5,7 +5,7 @@
         v-for="(product, index) in productData"
         :key="product.id"
         :title="setProductTitle(product, index)"
-        :subtitle="product.auto !== 1 ? '该产品暂不支持系统自动开通权限，请联系运维开通': ''"
+        :subtitle="product.auto !== 1 && orderData.is_backstage_order === 1 ? '该产品暂不支持系统自动开通权限，请联系运维开通': ''"
         >
         <div class="order-detail-product-content">
           <div class="grouped-items">

src/views/create-order/components/uploadInvoiceContent.vue

@@ -0,0 +1,559 @@
+<template>
+  <div class="upload-invoice-content">
+    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px" class="demo-ruleForm">
+      <el-form-item label="上传发票" prop="addressUrl">
+        <b-upload 
+          :newApi="true" 
+          action="/jyOrderManager/order/upload" 
+          ref="uploadRef2" 
+          @fileData="invoiceFile" 
+          @onRemove="invoiceFile('')" 
+          :placeholdered="'请上传发票'"
+          :accepted="'.doc,.pdf,.docx,.rar,.zip,.jpg,.png,.jpeg'"
+          :formated="['doc', 'pdf', 'docx', 'rar', 'zip', 'jpg', 'png', 'jpeg']" :multipled="false">
+        </b-upload>
+      </el-form-item>
+      <el-form-item label="发票号码" prop="invoice_number">
+        <el-input v-model="ruleForm.invoice_number" placeholder="请输入发票号码"></el-input>
+      </el-form-item>
+      <el-form-item label="开票日期" required>
+        <el-col :span="11">
+          <el-form-item prop="billing_time">
+            <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.billing_time" style="width: 100%;"></el-date-picker>
+          </el-form-item>
+        </el-col>
+      </el-form-item>
+      <el-form-item label="开票金额合计" prop="allMoney">
+        <el-input v-model="ruleForm.allMoney"></el-input>
+      </el-form-item>
+      <el-form-item label="该笔订单开票金额" prop="money">
+        <el-input v-model="ruleForm.money"></el-input>
+      </el-form-item>
+      <el-form-item label="开票主体" prop="signing_subject">
+        <el-select v-model="ruleForm.signing_subject" placeholder="请选择开票主体">
+          <el-option label="北京剑鱼信息技术有限公司" value="1"></el-option>
+          <el-option label="北京拓普" value="2"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="发票类型" prop="type">
+        <el-radio-group v-model="ruleForm.type">
+          <el-radio label="电子普通发票"></el-radio>
+          <el-radio label="电子专用发票"></el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="发票内容" prop="content">
+        <el-select v-model="ruleForm.content" placeholder="请选择发票内容">
+          <el-option label="技术服务费" value="1"></el-option>
+          <el-option label="会员费" value="2"></el-option>
+          <el-option label="招投标数据服务" value="3"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="发票抬头" prop="invoiceHeader">
+        <el-radio-group v-model="ruleForm.invoiceHeader">
+          <el-radio label="个人"></el-radio>
+          <el-radio label="单位"></el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <div class="company_show_module">
+        <div v-show="isAssociateShow" class="associate-ent-group">
+          <div
+            v-for="(item, i) in searchList"
+            :key="i"
+            class="associate-ent-item"
+            @click="selectEnt(item)"
+            v-html="highlightText(item.name, ruleForm.company)"
+          ></div>
+        </div>
+        <el-form-item label="公司名称" prop="company">
+          <el-input 
+            type="textarea"
+            v-model="ruleForm.company"
+            @input="entOnChange('input')"
+            @blur="entOnChange('blur')"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="单位税号" prop="dutyparagraph">
+          <el-input v-model="ruleForm.dutyparagraph" placeholder="请输入纳税人识别号"></el-input>
+        </el-form-item>
+        <el-form-item label="单位地址" prop="unitAddress">
+          <el-input v-model="ruleForm.unitAddress" placeholder="请输入单位地址"></el-input>
+        </el-form-item>
+        <el-form-item label="电话号码" prop="tel">
+          <el-input v-model="ruleForm.tel" placeholder="请输入单位地址"></el-input>
+        </el-form-item>
+        <el-form-item label="开户银行" prop="bank">
+          <el-input v-model="ruleForm.bank" placeholder="请输入开户银行"></el-input>
+        </el-form-item>
+        <el-form-item label="银行账号" prop="bankCode">
+          <el-input v-model="ruleForm.bankCode" placeholder="请输入银行账号"></el-input>
+        </el-form-item>
+      </div>
+      <div
+        v-show="!showDesc"
+        class="j-content-nocolor"
+        @click="showDesc = !showDesc"
+      >
+        <div class="showMore">
+          <div class="line" style="margin-right: 12px" />
+          <span class="showMore-text">开票备注</span>
+          <div class="ic-drop" />
+          <div class="line" style="margin-left: 8px" />
+        </div>
+      </div>
+      <div v-show="showDesc" class="j-content">
+        <el-form-item
+          v-if="showModule.desc"
+          prop="desc"
+          label="开票备注"
+        >
+          <el-input
+            v-model="ruleForm.desc" 
+            type="textarea"
+            placeholder="此部分内容会展示在发票“备注”上，请按照贵司财务要求进行填写"
+            maxlength="200"
+            rows="3"
+            autosize
+            @focus="infoCheckMap.desc = ''"
+          ></el-input>
+        </el-form-item>
+      </div>
+      <el-form-item label="联系电话" prop="phone">
+        <el-input v-model="ruleForm.phone" placeholder="请输入银行账号"></el-input>
+      </el-form-item>
+      <el-form-item label="电子邮箱" prop="email">
+        <el-input v-model="ruleForm.email" placeholder="请输入银行账号"></el-input>
+      </el-form-item>
+      <!-- <el-form-item >
+        <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
+        <el-button @click="resetForm('ruleForm')">重置</el-button>
+      </el-form-item> -->
+    </el-form>
+    
+  </div>
+</template>
+
+<script>
+import bUpload from '@/components/uploadFile.vue'
+import { ajaxGetCompanyAssociation } from '@/api/modules/'
+export default {
+  name: "uploadInvoiceContent",
+  components: { bUpload },
+  data() {
+    return {
+      invoiceInfo: {
+        fileUrl: ''
+      },
+      searchList: [],
+      isAssociateShow: false,
+      showDesc: false,
+      ruleForm: {
+        addressUrl: '',
+        invoice_number: '',
+        billing_time: '',
+        allMoney: 0,
+        money: 0,
+        signing_subject: '',
+        type: '',
+        content: '',
+        invoiceHeader: '',
+        company: '',
+        dutyparagraph: '',
+        unitAddress: '',
+        tel: '',
+        bank: '',
+        bankCode: '',
+        desc: '',
+        phone: '',
+        email: '',
+      },
+      showModule: {
+        company: false,
+        dutyparagraph: false,
+        bankCode: false,
+        bank: false,
+        tel: false,
+        unitAddress: false,
+        desc: false,
+        name: false,
+        phone: true,
+        deliveryAddress: false,
+        email: false
+      },
+      infoCheckMap: {
+        company: '',
+        dutyparagraph: '',
+        unitAddress: '',
+        phone: '',
+        bank: '',
+        bankCode: '',
+        desc: '',
+        tel: '',
+        email: '',
+        deliveryAddress: '',
+        name: ''
+      },
+      rules: {
+        addressUrl: [
+          { required: true, message: '请上传发票', trigger: 'blur' },
+        ],
+        invoice_number: [
+          { required: true, message: '请输入发票号码', trigger: 'blur' }
+        ],
+        billing_time: [
+          { type: 'date', required: true, message: '请选择开票时间', trigger: 'change' }
+        ],
+        allMoney: [
+          { required: true, message: '请输入开票金额合计', trigger: 'blur' }
+        ],
+        money: [
+          { required: true, message: '请输入该笔订单开票金额', trigger: 'blur' } 
+        ],
+        signing_subject: [
+          { required: true, message: '请选择开票主体', trigger: 'change' }
+        ],
+        type: [
+          { required: true, message: '请选择发票类型', trigger: 'change' } 
+        ],
+        content: [
+          { required: true, message: '请选择发票内容', trigger: 'change' } 
+        ],
+        invoiceHeader: [
+          { required: true, message: '请选择发票抬头', trigger: 'change' }
+        ],
+        company: [
+          { required: true, message: '请输入公司名称', trigger: 'blur' }
+        ],
+        dutyparagraph: [
+          { required: true, message: '纳税人识别号为必填项', trigger: 'blur' } 
+        ],
+        phone: [
+          { required: true, message: '请输入联系电话', trigger: 'blur' } 
+        ],
+        email: [
+          { required: true, message: '请输入电子邮箱', trigger: 'blur' }  
+        ]
+
+      }
+    }
+  },
+  methods: {
+    invoiceFile(val) {
+      this.invoiceInfo.fileUrl = val
+    },
+    entOnChange(type) {
+      if (type === 'blur') {
+        this.getCheckMap('company')
+        setTimeout(() => {
+          this.isAssociateShow = false
+          this.searchList = []
+        }, 300)
+      } else {
+        clearTimeout(this.isAssociateUpTime)
+        this.isAssociateUpTime = setTimeout(() => {
+          this.ajaxEntList(this.ruleForm.company)
+        }, 200)
+      }
+    },
+    ajaxEntList(str) {
+      if (str.length <= 2) {
+        this.isAssociateShow = false
+        return
+      }
+      ajaxGetCompanyAssociation({
+        name: str,
+        typ: 'ent',
+        num: 10
+      }).then((res) => {
+        const { error_code: code, data } = res
+        if (code === 0) {
+          const result = data?.list || []
+          if (Array.isArray(result) && result.length) {
+            this.isAssociateShow = true
+            this.searchList = result
+          }
+        }
+      })
+    },
+    checkDutyparagraph() {
+      if (
+        this.ruleForm.dutyparagraph.trim().length === 18 ||
+        this.ruleForm.dutyparagraph.trim().length === 15 ||
+        this.ruleForm.dutyparagraph.trim().length === 20
+      ) {
+        return true
+      }
+      return false
+    },
+    selectEnt(item) {
+      console.log('item', item)
+      this.ruleForm.company = item.name ? item.name : ''
+      this.ruleForm.dutyparagraph = item.taxCode ? item.taxCode : ''
+      this.isAssociateShow = false
+      this.searchList = []
+      if (this.checkVerify('company')) {
+        this.infoCheckMap.company = ''
+      } else {
+        this.getCheckMap('company')
+      }
+      if (this.checkVerify('dutyparagraph')) {
+        this.infoCheckMap.dutyparagraph = ''
+      } else {
+        this.getCheckMap('dutyparagraph')
+      }
+    },
+    submitForm(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          alert('submit!');
+        } else {
+          console.log('error submit!!');
+          return false;
+        }
+      });
+    },
+    resetForm(formName) {
+      this.$refs[formName].resetFields();
+    },
+    getCheckMap(type) {
+      switch (type) {
+        case 'name': {
+          this.infoCheckMap.name =
+            this.ruleForm.name === '' ? '收件人为必填项' : ''
+          if (this.infoCheckMap.name === '' && !this.checkName) {
+            this.infoCheckMap.name = '请输入正确格式的收件人'
+          }
+          break
+        }
+        case 'tel': {
+          if (this.requireds.tel) {
+            this.infoCheckMap.tel =
+              this.ruleForm.tel === '' ? '电话号码为必填项' : ''
+          }
+          if (
+            this.ruleForm.tel &&
+            this.infoCheckMap.tel === '' &&
+            !this.checkPhone(this.ruleForm.tel)
+          ) {
+            this.infoCheckMap.tel = '电话号码格式不正确'
+          }
+          break
+        }
+        case 'phone': {
+          this.infoCheckMap.phone =
+            this.ruleForm.phone === '' ? '联系电话为必填项' : ''
+          if (
+            this.infoCheckMap.phone === '' &&
+            !this.checkPhone(this.ruleForm.phone)
+          ) {
+            this.infoCheckMap.phone = '联系电话格式不正确'
+          }
+          break
+        }
+        case 'email': {
+          this.infoCheckMap.email =
+            this.ruleForm.email === '' ? '邮箱为必填项' : ''
+          if (this.infoCheckMap.email === '' && !this.checkEmail) {
+            this.infoCheckMap.email = '请输入正确格式的邮箱'
+          }
+          break
+        }
+        case 'company': {
+          this.infoCheckMap.company =
+            this.ruleForm.company === '' ? '公司名称为必填项' : ''
+          if (this.infoCheckMap.company === '' && !this.checkEntName) {
+            this.infoCheckMap.company = '请输入正确格式的公司名称'
+            if (this.ruleForm.company.length < 2) {
+              this.infoCheckMap.company = '公司名称至少输入2个字'
+            }
+            if (this.ruleForm.company.length > 50) {
+              this.infoCheckMap.company = '公司名称最多输入50个字'
+            }
+          }
+          break
+        }
+        case 'dutyparagraph': {
+          this.infoCheckMap.dutyparagraph =
+            this.ruleForm.dutyparagraph === '' ? '纳税人识别号为必填项' : ''
+          if (
+            this.infoCheckMap.dutyparagraph === '' &&
+            !this.checkDutyparagraph
+          ) {
+            this.infoCheckMap.dutyparagraph = '请输入正确格式的纳税人识别号'
+          }
+          break
+        }
+        case 'bankCode': {
+          if (this.requireds.bankCode) {
+            this.infoCheckMap.bankCode =
+              this.ruleForm.bankCode === '' ? '银行账号为必填项' : ''
+          }
+          if (this.ruleForm.bankCode && !this.checkBankcode) {
+            this.infoCheckMap.bankCode = '请输入正确格式的银行账号'
+          }
+          break
+        }
+        case 'bank': {
+          if (this.requireds.bank) {
+            this.infoCheckMap.bank =
+              this.ruleForm.bank === '' ? '开户银行为必填项' : ''
+          }
+          break
+        }
+        case 'unitAddress': {
+          if (this.requireds.unitAddress) {
+            this.infoCheckMap.unitAddress =
+              this.ruleForm.unitAddress === '' ? '单位地址为必填项' : ''
+          }
+          break
+        }
+        case 'deliveryAddress': {
+          if (this.requireds.deliveryAddress) {
+            this.infoCheckMap.deliveryAddress =
+              this.ruleForm.deliveryAddress === '' ? '收件地址为必填项' : ''
+          }
+          break
+        }
+      }
+    },
+    checkVerify(type) {
+      switch (type) {
+        case 'name': {
+          if (
+            (this.ruleForm.name === '' || !this.checkName) &&
+            this.showModule.name
+          ) {
+            return false
+          } else {
+            return true
+          }
+        }
+        case 'tel': {
+          if (this.showModule.tel) {
+            if (
+              !this.requireds.tel &&
+              !this.checkPhone(this.ruleForm.tel) &&
+              this.ruleForm.tel
+            ) {
+              return false
+            } else if (
+              (this.ruleForm.tel === '' || !this.checkPhone(this.ruleForm.tel)) &&
+              this.requireds.tel
+            ) {
+              return false
+            } else {
+              return true
+            }
+          } else {
+            return true
+          }
+        }
+        case 'phone': {
+          if (
+            this.ruleForm.phone === '' ||
+            (!this.checkPhone(this.ruleForm.phone) && this.showModule.phone)
+          ) {
+            return false
+          } else {
+            return true
+          }
+        }
+        case 'email': {
+          if (
+            (this.ruleForm.email === '' || !this.checkEmail) &&
+            this.showModule.email
+          ) {
+            return false
+          } else {
+            return true
+          }
+        }
+        case 'company': {
+          if (
+            this.ruleForm.company === '' &&
+            !this.checkEntName &&
+            this.showModule.company
+          ) {
+            return false
+          } else if (
+            this.ruleForm.company.length < 2 &&
+            this.showModule.company
+          ) {
+            return false
+          } else if (
+            this.ruleForm.company.length > 50 &&
+            this.showModule.company
+          ) {
+            return false
+          } else {
+            return true
+          }
+        }
+        case 'dutyparagraph': {
+          if (
+            (this.ruleForm.dutyparagraph === '' || !this.checkDutyparagraph) &&
+            this.showModule.dutyparagraph
+          ) {
+            return false
+          } else {
+            return true
+          }
+        }
+        case 'bankCode': {
+          if (this.showModule.bankCode) {
+            if (
+              !this.requireds.bankCode &&
+              !this.checkBankcode &&
+              this.ruleForm.bankCode
+            ) {
+              return false
+            } else if (
+              (this.ruleForm.bankCode === '' || !this.checkBankcode) &&
+              this.requireds.bankCode
+            ) {
+              return false
+            } else {
+              return true
+            }
+          } else {
+            return true
+          }
+        }
+        case 'bank': {
+          if (
+            this.requireds.bank &&
+            this.ruleForm.bank === '' &&
+            this.showModule.bank
+          ) {
+            return false
+          } else {
+            return true
+          }
+        }
+        case 'unitAddress': {
+          if (
+            this.requireds.unitAddress &&
+            this.ruleForm.unitAddress === '' &&
+            this.showModule.unitAddress
+          ) {
+            return false
+          } else {
+            return true
+          }
+        }
+        case 'deliveryAddress': {
+          if (
+            this.requireds.deliveryAddress &&
+            this.ruleForm.deliveryAddress === '' &&
+            this.showModule.deliveryAddress
+          ) {
+            return false
+          } else {
+            return true
+          }
+        }
+      }
+    },
+  },
+}
+</script>
+<style lang="scss" scoped></style>

src/views/create-order/components/uploadInvoiceModule.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="uploadInvoiceModule">
+    <Dialog
+      ref="uploadInvoiceDialog"
+      customClass="upload-invoice-dialog"
+      title="上传发票"
+      :visible.sync="uploadDialogVisible"
+      confirm-button-text="确定"
+      @confirm="uploadSubmit"
+      @cancel="uploadCancel"
+      center
+      width="60%"
+    >
+      <uploadInvoiceContent ref="uploadInvoiceContentRef"></uploadInvoiceContent>
+    </Dialog>
+  </div>
+</template>
+
+<script>
+import Dialog from '@/components/Dialog'
+import uploadInvoiceContent from './uploadInvoiceContent.vue';
+export default {
+  name: "uploadInvoiceModule",
+  components: {
+    Dialog,
+    uploadInvoiceContent
+  },
+  props: {
+    
+  },
+  data() {
+    return {
+      uploadDialogVisible: false,
+    }
+  },
+  methods: {
+    uploadSubmit() {
+      this.$refs.uploadInvoiceContentRef.submitForm('ruleForm')
+    },
+    uploadCancel() {
+      this.uploadDialogVisible = false;
+      this.$refs.uploadInvoiceContentRef.resetForm('ruleForm') 
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped></style>