发票管理

src/views/personalCenter/components/OrderList.vue

@@ -3,9 +3,9 @@
     <div class="common-title-box">
       <h2>订单管理</h2>
       <div class="btn-box">
-        <!-- <el-button type="primary" size="small" @click="handInvoice"
+        <el-button type="primary" size="small" @click="handInvoice"
           >申请发票</el-button
-        > -->
+        >
       </div>
     </div>
     <el-table
@@ -18,13 +18,13 @@
       :row-key="getRowKey"
       ref="table"
     >
-      <!-- <el-table-column
+      <el-table-column
         type="selection"
         width="40"
         fixed
         :reserve-selection="true"
       >
-      </el-table-column> -->
+      </el-table-column>
       <el-table-column
         type="index"
         label="#"
@@ -159,7 +159,7 @@
           <span>￥{{ scope.row.refund_amount | cutMoneyFiter }}</span>
         </template>
       </el-table-column>
-      <!-- <el-table-column prop="invoice_status" label="发票状态" width="112">
+      <el-table-column prop="invoice_status" label="发票状态" width="112">
         <template slot-scope="scope">
           <div class="status-box">
             <span
@@ -175,7 +175,7 @@
             >
           </div>
         </template>
-      </el-table-column> -->
+      </el-table-column>
       <el-table-column prop="status" label="操作" width="140" fixed="right">
         <template slot-scope="scope">
           <template
@@ -282,14 +282,34 @@
             <el-radio :label="1">企业</el-radio>
           </el-radio-group>
         </el-form-item>
-        <el-form-item label="抬头名称" prop="buyer_info_mc">
+        <el-form-item
+          label="抬头名称"
+          prop="buyer_info_mc"
+          v-if="invoiceForm.invoice_object === 0"
+        >
           <el-input
             v-model="invoiceForm.buyer_info_mc"
             placeholder="必填"
             @blur="handleTrim('invoiceForm', 'buyer_info_mc')"
           ></el-input>
         </el-form-item>
-        <template v-if="invoiceForm.invoice_object === 1">
+
+        <template v-else>
+          <el-form-item label="抬头名称" prop="buyer_info_mc">
+            <el-autocomplete
+              v-model="invoiceForm.buyer_info_mc"
+              :fetch-suggestions="querySearch"
+              placeholder="必填"
+              @select="handleSelect"
+              @blur="handleTrim('invoiceForm', 'buyer_info_mc')"
+            >
+            </el-autocomplete>
+            <!-- <el-input
+              v-model="invoiceForm.buyer_info_mc"
+              placeholder="必填"
+              @blur="handleTrim('invoiceForm', 'buyer_info_mc')"
+            ></el-input> -->
+          </el-form-item>
           <el-form-item label="单位税号" prop="buyer_info_sh">
             <el-input
               v-model="invoiceForm.buyer_info_sh"
@@ -507,6 +527,7 @@ export default {
       disabled: false,
       invoiceLoading: false,
       messageSuccess: null,
+      options: [],
     };
   },
   //计算属性 类似于data概念
@@ -788,6 +809,53 @@ export default {
 
       this.$router.push({ path: "/peraonal?type=invoice" });
     },
+    async querySearch(queryString, cb) {
+      let queryStrings =
+        queryString && queryString.trim() ? queryString.trim() : "";
+      if (!queryStrings || (queryStrings && queryStrings.length < 2)) {
+        cb([]);
+        return;
+      }
+      let MethodName =
+        "/ShopServer/Client/OrderManager/QueryEnterpriseInfoList";
+
+      await getLogin(MethodName, {
+        name: queryStrings,
+      })
+        .then((res) => {
+          if (res.status === 1) {
+            let options = [];
+            res.enterprise_info_list.forEach((item) => {
+              options.push({
+                value: item.name,
+                label: item.credit_no,
+              });
+            });
+            this.options = options;
+          }
+        })
+        .catch(() => {});
+      const results = this.options.filter((item) =>
+        item.value.toLowerCase().includes(queryString.toLowerCase())
+      );
+      cb(results);
+      // 调用回调函数返回建议列表的数据，这里的results已经是过滤后的结果了。
+    },
+    handleSelect(item) {
+      // console.log("选中的项:", item); // 处理选中项的逻辑，例如设置到某个变量中显示或进行其他操作。
+      if (item) {
+        this.invoiceForm.buyer_info_sh = item.label;
+        this.invoiceForm.buyer_info_mc = item.value;
+      }
+    },
+    fetchData(str) {
+      // 示例方法，实际应用中应该调用API获取数据并更新this.options。
+      // 模拟异步请求数据，实际应用中应该是调用API获取数据并更新this.options。
+      // this.options = [
+      //   { value: "1", label: "选项1" },
+      //   { value: "2", label: "选项2" },
+      // ]; // 示例数据更新到options中。
+    },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {
@@ -912,6 +980,9 @@ export default {
 :deep .el-form-item {
   margin-bottom: 10px;
 }
+:deep .el-autocomplete {
+  width: 100%;
+}
 .invoice-dialog {
   :deep .el-dialog__body {
     padding: 0 20px;

src/views/personalCenter/index.vue

@@ -99,11 +99,11 @@ export default {
           label: "订单管理",
           type: "order",
         },
-        // {
-        //   icon: "invoice",
-        //   label: "发票管理",
-        //   type: "invoice",
-        // },
+        {
+          icon: "invoice",
+          label: "发票管理",
+          type: "invoice",
+        },
         {
           icon: "setting",
           label: "个人设置",