feat: 缩短码查询【100%】

src/views/Search/shortcode.vue

@@ -4,45 +4,9 @@
     <div class="body">
       <el-tabs v-model="activeName" class="tab-no-bottom">
         <el-tab-pane label="查询产品信息" name="first">
-            <el-form label-position="left"
-                     label-width="180px"
-                     style="margin-top:20px"
-                     :model="productSearch">
-              <el-form-item label="缩短码查询：">
-                <el-input
-                    v-model="productSearch.code"
-                    placeholder="请输入正确的8位商品条码！"
-                    class="w240"
-                >
-                </el-input>
-              </el-form-item>
-
-              <el-form-item label="验证码：">
-                <div class="y-center">
-                  <el-input
-                      v-model="productSearch.validate"
-                      placeholder="请输入验证码"
-                      class="w160"
-                  ></el-input>
-
-                  <div class="validate-code">
-                    <img src="../../assets/image/validate.jpg" alt="" />
-                  </div>
-
-                  <el-button
-                      style="margin-left:40px"
-                      type="primary"
-                      @click="handleSearchProduct"
-                  >查询</el-button
-                  >
-                </div>
-              </el-form-item>
-            </el-form>
-        </el-tab-pane>
-
-        <el-tab-pane label="查询厂商信息" name="second">
           <div style="padding-top:20px">
             <el-radio-group v-model="company">
+              <el-radio :label="CODE">EAN/UCC-8缩短码</el-radio>
               <el-radio :label="NAME">根据厂商名称查询</el-radio>
               <el-radio :label="ADDRESS">根据厂商地址查询</el-radio>
             </el-radio-group>
@@ -55,6 +19,12 @@
             >
               <el-form-item label="缩短码查询：">
                 <el-input
+                    v-show="company === CODE"
+                    v-model="companySearch.code"
+                    placeholder="请输入正确的8位商品条码！"
+                    class="w240"
+                ></el-input>
+                <el-input
                     v-show="company === NAME"
                     v-model="companySearch.name"
                     placeholder="请输入正确的厂商名称！"
@@ -71,20 +41,21 @@
               <el-form-item label="验证码：">
                 <div class="y-center">
                   <el-input
-                      v-model="companySearch.validate"
+                      v-model="captcha"
                       placeholder="请输入验证码"
-                      class="w160"
+                      class="w240"
                   ></el-input>
 
                   <div class="validate-code">
-                    <img src="../../assets/image/validate.jpg" alt="" />
+                    <img :src="captchaPath" @click="getCaptcha()" alt=""/>
                   </div>
 
                   <el-button
                       style="margin-left:40px"
                       type="primary"
                       @click="handleSearchCompany"
-                  >查询</el-button
+                  >查询
+                  </el-button
                   >
                 </div>
               </el-form-item>
@@ -96,19 +67,29 @@
         <div class="result-box-title">查询 {{ searchCodeShow }} 结果</div>
         <div class="result-box-body">
           <template v-if="result">
-            <div class="title">商品信息</div>
-            <div class="product-info"></div>
-            <div class="title">企业信息</div>
-            <div class="company-info"></div>
+            <el-table
+                :data="result"
+                header-cell-class-name="search-table-hc"
+                style="width: 100%"
+            >
+              <el-table-column prop="shortCode" label="缩短码">
+              </el-table-column>
+              <el-table-column prop="produceName" label="商品名称">
+              </el-table-column>
+              <el-table-column prop="brandName" label="商标"></el-table-column>
+              <el-table-column prop="produceStyle" label=规格></el-table-column>
+              <el-table-column prop="producePack" label="包装"></el-table-column>
+              <el-table-column prop="firmName" label="厂商名称"></el-table-column>
+            </el-table>
           </template>
-          <span v-else>没有符合条件的记录！</span>
+          <span style="color: #FF3B30" v-else>{{ errorMsg }}</span>
         </div>
       </div>
     </div>
     <div class="notice">
       <div class="title">友情提示</div>
       <div class="content-wrapper">
-        <img src="./img/query-short-code.png" align="right" alt="" />
+        <img src="./img/query-short-code.png" align="right" alt=""/>
         <p>
           1、缩短码是由7位商品代码和1位校验码构成的8位数字的条码，只有当标准码尺寸超过总印刷面积的25％时，才允许申报。请根据下列提示进行相关查询。
         </p>
@@ -118,11 +99,16 @@
 </template>
 
 <script>
+import validation from "@/views/Search/validation";
+
+const CODE = 0;
 const NAME = 1;
 const ADDRESS = 2;
 export default {
+  mixins: [validation],
   data() {
     return {
+      CODE,
       NAME,
       ADDRESS,
       activeName: "first",
@@ -130,46 +116,41 @@ export default {
       companySearch: {
         validate: "",
         code: "",
+        name: "",
         address: "",
       },
-      productSearch: {
-        code: "",
-        validate: ""
-      },
       searchCodeShow: "",
       showResult: false,
       result: null,
     };
   },
   methods: {
-    handleSearchProduct() {
-      this.searchCodeShow = this.productSearch.code;
-      if (this.productSearch.code === "1") {
-        this.result = {};
-      }else{
-        this.result = null;
-      }
+    async handleSearchCompany() {
       this.showResult = true;
-    },
-    handleSearchCompany() {
-      if (this.company === NAME) {
-        this.searchCodeShow = this.companySearch.code;
-        if (this.companySearch.code === '1') {
-          this.result = [
-            {id: '6912614', name: '北京阿里巴巴食品有限公司', 状态: "已注销"},
-            {id: '6912614', name: '北京阿里巴巴食品有限公司', 状态: "已注销"},
-            {id: '6912614', name: '北京阿里巴巴食品有限公司', 状态: "已注销"},
-            {id: '6912614', name: '北京阿里巴巴食品有限公司', 状态: "已注销"},
-            {id: '6912614', name: '北京阿里巴巴食品有限公司', 状态: "已注销"},
-            {id: '6912614', name: '北京阿里巴巴食品有限公司', 状态: "已注销"},
-            {id: '6912614', name: '北京阿里巴巴食品有限公司', 状态: "已注销"},
-            {id: '6912614', name: '北京阿里巴巴食品有限公司', 状态: "已注销"},
-          ]
-        }
+      const params = {
+        shortCode: "",
+        firmName: "",
+        registerAddress: "",
+        uuid: this.uuid,
+        captcha: this.captcha,
+      };
+      if (this.company === CODE) {
+        params.shortCode = this.companySearch.code;
+      } else if (this.company === NAME) {
+        params.firmName = this.companySearch.name;
       } else {
-        this.searchCodeShow = this.companySearch.address;
+        params.registerAddress = this.companySearch.address;
+      }
+      const searchGlnRes = await this.$api.search.searchGetList(params);
+      const {returnCode, data} = searchGlnRes;
+      if (returnCode === "0") {
+        this.result = data;
+      } else {
+        this.errorMsg =
+            searchGlnRes.returnMsg ||
+            "没有符合条件的记录！";
+        this.result = null;
       }
-      this.showResult = true;
     },
   },
 };
@@ -182,6 +163,8 @@ export default {
     width: 70px;
     height: 40px;
     margin-left: 11px;
+    overflow: hidden;
+
     > img {
       width: 100%;
       height: 100%;