feat(uploadInvoiceContent): 优化发票上传组件功能和样式

- 为输入框添加默认值和占位符
- 更新发票类型和发票抬头的选项
- 优化公司名称搜索功能
- 添加发票上传逻辑
- 优化表单验证规则
- 调整组件样式和布局

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

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

@@ -24,10 +24,10 @@
         </el-col>
       </el-form-item>
       <el-form-item label="开票金额合计" prop="allMoney">
-        <el-input v-model="ruleForm.allMoney"></el-input>
+        <el-input v-model="ruleForm.allMoney" placeholder="请输入开票金额合计"></el-input>
       </el-form-item>
       <el-form-item label="该笔订单开票金额" prop="money">
-        <el-input v-model="ruleForm.money"></el-input>
+        <el-input v-model="ruleForm.money" placeholder="请输入该笔订单开票金额"></el-input>
       </el-form-item>
       <el-form-item label="开票主体" prop="signing_subject">
         <el-select v-model="ruleForm.signing_subject" placeholder="请选择开票主体">
@@ -35,10 +35,9 @@
           <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-form-item label="发票类型" prop="invoice_variety">
+        <el-radio-group @change="invoiceTypeChange" v-model="ruleForm.invoice_variety">
+          <el-radio v-for="item in typelist" :key="item.value" :label="item.value">{{ item.text }}</el-radio>
         </el-radio-group>
       </el-form-item>
       <el-form-item label="发票内容" prop="content">
@@ -50,12 +49,11 @@
       </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 v-for="item in invoiceHeaderList" :key="item.value" :label="item.value">{{ item.text }}</el-radio>
         </el-radio-group>
       </el-form-item>
-      <div class="company_show_module">
-        <div v-show="isAssociateShow" class="associate-ent-group">
+      <div v-if="showCompnayModule" class="company_show_module">
+        <div class="associate-ent-group">
           <div
             v-for="(item, i) in searchList"
             :key="i"
@@ -65,9 +63,9 @@
           ></div>
         </div>
         <el-form-item label="公司名称" prop="company">
-          <el-input 
-            type="textarea"
+          <el-input
             v-model="ruleForm.company"
+            placeholder="请输入公司名称"
             @input="entOnChange('input')"
             @blur="entOnChange('blur')"
           ></el-input>
@@ -88,7 +86,7 @@
           <el-input v-model="ruleForm.bankCode" placeholder="请输入银行账号"></el-input>
         </el-form-item>
       </div>
-      <div
+      <!-- <div
         v-show="!showDesc"
         class="j-content-nocolor"
         @click="showDesc = !showDesc"
@@ -99,10 +97,9 @@
           <div class="ic-drop" />
           <div class="line" style="margin-left: 8px" />
         </div>
-      </div>
-      <div v-show="showDesc" class="j-content">
+      </div> -->
+      <div class="j-content">
         <el-form-item
-          v-if="showModule.desc"
           prop="desc"
           label="开票备注"
         >
@@ -110,9 +107,6 @@
             v-model="ruleForm.desc" 
             type="textarea"
             placeholder="此部分内容会展示在发票“备注”上，请按照贵司财务要求进行填写"
-            maxlength="200"
-            rows="3"
-            autosize
             @focus="infoCheckMap.desc = ''"
           ></el-input>
         </el-form-item>
@@ -134,28 +128,37 @@
 
 <script>
 import bUpload from '@/components/uploadFile.vue'
-import { ajaxGetCompanyAssociation } from '@/api/modules/'
+import { replaceKeyword } from '../hooks/utils'
+import { ajaxGetCompanyAssociation, ajaxUploadInvoice } from '@/api/modules/'
 export default {
   name: "uploadInvoiceContent",
   components: { bUpload },
   data() {
     return {
-      invoiceInfo: {
-        fileUrl: ''
-      },
+      typelist: [
+        { text: '电子普通发票', value: '1' },
+        { text: '电子专用发票', value: '2' }
+        // { text: '纸质普通发票', value: '3' },
+        // { text: '纸质专用发票', value: '4' }
+      ],
+      invoiceHeaderList: [
+        { text: '个人', value: '1' },
+        { text: '单位', value: '2' }
+      ],
       searchList: [],
       isAssociateShow: false,
       showDesc: false,
       ruleForm: {
         addressUrl: '',
+        fileUrl: '',
         invoice_number: '',
         billing_time: '',
-        allMoney: 0,
-        money: 0,
+        allMoney: '',
+        money: '',
         signing_subject: '',
-        type: '',
-        content: '',
-        invoiceHeader: '',
+        invoice_variety: '1',
+        invoice_content: '',
+        invoiceHeader: '2',
         company: '',
         dutyparagraph: '',
         unitAddress: '',
@@ -211,10 +214,10 @@ export default {
         signing_subject: [
           { required: true, message: '请选择开票主体', trigger: 'change' }
         ],
-        type: [
+        invoice_variety: [
           { required: true, message: '请选择发票类型', trigger: 'change' } 
         ],
-        content: [
+        invoice_content: [
           { required: true, message: '请选择发票内容', trigger: 'change' } 
         ],
         invoiceHeader: [
@@ -236,9 +239,14 @@ export default {
       }
     }
   },
+  computed: {
+    showCompnayModule() {
+      return this.ruleForm.invoiceHeader === '2'
+    }
+  },
   methods: {
     invoiceFile(val) {
-      this.invoiceInfo.fileUrl = val
+      this.ruleForm.addressUrl = val
     },
     entOnChange(type) {
       if (type === 'blur') {
@@ -274,6 +282,25 @@ export default {
         }
       })
     },
+    highlightText(value, keyStr) {
+      return replaceKeyword(
+        value,
+        keyStr,
+        `<span class="highlight-text">${keyStr}</span>`
+      )
+    },
+    invoiceTypeChange(val) {
+      console.log('val', val)
+      if (val === '2') {
+        this.ruleForm.invoiceHeader = '2'
+        this.invoiceHeaderList = [{ text: '单位', value: '2' }]
+      } else {
+        this.invoiceHeaderList = [
+          { text: '个人', value: '1' },
+          { text: '单位', value: '2' }
+        ]
+      }
+    },
     checkDutyparagraph() {
       if (
         this.ruleForm.dutyparagraph.trim().length === 18 ||
@@ -302,15 +329,49 @@ export default {
       }
     },
     submitForm(formName) {
+
       this.$refs[formName].validate((valid) => {
         if (valid) {
-          alert('submit!');
+          this.setUploadAjax()
         } else {
           console.log('error submit!!');
           return false;
         }
       });
     },
+    async setUploadAjax() {
+      const { id } = this.$route.params;
+      console.log('id', id)
+      const { fileUrl, invoice_number, billing_time, allMoney, money, signing_subject, invoice_variety, invoice_content, invoiceHeader, desc, phone, email} = this.ruleForm;
+      const paramsEnt = {
+        ...this.ruleForm,
+        addressUrl: this.ruleForm.fileUrl,
+      }
+      const paramsPerson = {
+        orderCode: id,
+        addressUrl: fileUrl,
+        invoice_number,
+        billing_time,
+        allMoney: Number(allMoney),
+        money:  Number(money),
+        signing_subject,
+        invoice_variety,
+        invoice_content,
+        invoiceHeader,
+        desc,
+        phone,
+        email
+      }
+      const params = invoiceHeader === '1' ? paramsPerson : paramsEnt;
+      const { error_code: code, data } = await ajaxUploadInvoice(params);
+      console.log('code', code, data)
+      if(code === 0) {
+        this.$message({
+          type: 'success',
+          message: '上传成功'
+        })
+      }
+    },
     resetForm(formName) {
       this.$refs[formName].resetFields();
     },
@@ -415,6 +476,14 @@ export default {
         }
       }
     },
+    checkPhone(val) {
+      // 手机号：13/14/15/16/17/18/19开头 + 9位数字（共11位）
+      // 固定电话：区号（3-4位） + - + 号码（7-8位） + 可选分机号（1-4位）
+      // 400电话（共10位）：400开头 + 7位数字 或 400-xxx-xxxx 格式
+      return /^(1[3-9|])\d{9}$|^0\d{2,3}-?\d{7,8}(-\d{1,4})?$|^400[016-9]\d{6}$|^400-[016-9]\d{2}-\d{4}$/.test(
+        val
+      )
+    },
     checkVerify(type) {
       switch (type) {
         case 'name': {
@@ -556,4 +625,57 @@ export default {
   },
 }
 </script>
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.upload-invoice-content {
+  .company_show_module {
+    position: relative;
+  }
+  .associate-ent-group {
+    position: absolute;
+    top: 45px;
+    left: 150px;
+    width: 70%;
+    max-height: 200px;
+    z-index: 99;
+    background: #ffffff;
+    -webkit-box-shadow: 0px 4px 16px rgba(8, 31, 38, 0.08);
+    box-shadow: 0px 4px 16px rgba(8, 31, 38, 0.08);
+    border-radius: 4px;
+    padding-left: 16px;
+    overflow-y: scroll;
+  }
+
+  .associate-ent-group .associate-ent-item {
+    // font-family: PingFang SC;
+    font-style: normal;
+    font-weight: 500;
+    font-size: 14px;
+    line-height: 20px;
+    color: #171826;
+    padding: 8px 16px;
+    padding-left: 0;
+    border-bottom: 0.5px solid rgba(0, 0, 0, 0.05);
+    cursor: pointer;
+  }
+
+  .associate-ent-group .associate-ent-item:last-child {
+    border-bottom-color: transparent;
+  }
+
+  .highlight-text {
+    color: #2cb7ca !important;
+  }
+  ::v-deep {
+    .ivu-input-default {
+      height: 40px;
+      line-height: 40px;
+    }
+    .find-btn {
+      height: 40px;
+      line-height: 40px;
+      top: -40px!important;
+    }
+  }
+
+}
+</style>