feat: 条码术语查询【100%】

src/axios/module/search.js

@@ -2,7 +2,6 @@ import {
 	POST
 } from "../fetch.js"
 
-
 const Prefix = process.env.NODE_ENV === 'development' ? '/gs1' : '';
 
 // 条码查询—GLN查询/境外码查询
@@ -20,9 +19,20 @@ const searchInternal = (params = {}) => {
 	return POST(`${Prefix}/office/codeSearch/api/domesticCode`, params)
 }
 
+// 条码查询—自行车企业代码公告查询
+const searchBike = (params = {}) => {
+	return POST(`${Prefix}/office/bikefirm/api/getBikeFirm`, params)
+}
+
+// 条码查询—术语查询
+const searchGlossary = (params = {}) => {
+	return POST(`${Prefix}/office/glossary/api/terminology`, params)
+}
 
 export default {
 	searchGln,
 	searchGetList,
-	searchInternal
+	searchInternal,
+	searchBike,
+	searchGlossary,
 }

src/views/Search/glossary.vue

@@ -3,32 +3,43 @@
     <div class="title">条码术语查询</div>
     <div class="body">
       <div style="padding-top:20px">
-        <el-form label-position="left" label-width="180px" :model="search">
-          <el-form-item label="境外商品条码信息查询：">
+        <el-form label-position="left" label-width="120px" :model="search">
+          <el-form-item label="选择搜索范围：">
+            <el-select class="w240" v-model="type" placeholder="请选择">
+              <el-option
+                  v-for="item in options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+              </el-option>
+            </el-select>
+          </el-form-item>
+
+          <el-form-item label="术语搜索：">
             <el-input
-              v-model="search.code"
-              placeholder="请输入正确的境外商品条码！"
-              class="w240"
+                v-model="search.code"
+                class="w240"
             ></el-input>
           </el-form-item>
 
           <el-form-item label="验证码：">
             <div class="y-center">
               <el-input
-                v-model="search.validate"
-                placeholder="请输入验证码"
-                class="w160"
+                  v-model="captcha"
+                  placeholder="请输入验证码"
+                  class="w160"
               ></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="handleSearch"
-                >查询</el-button
+                  style="margin-left:40px"
+                  type="primary"
+                  @click="handleSearch"
+              >查询
+              </el-button
               >
             </div>
           </el-form-item>
@@ -38,73 +49,69 @@
           <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="titleEn" label="英文标题" width="130">
+                </el-table-column>
+                <el-table-column prop="titleCn" width="110" label="中文标题">
+                </el-table-column>
+                <el-table-column prop="content" label="解释">
+                </el-table-column>
+                <el-table-column prop="keyword" label="关键字" width="160"></el-table-column>
+              </el-table>
             </template>
-            <span v-else>您输入的商品条码格式不正确，请确认后重试。</span>
+            <span class="error-msg" v-else>{{errorMsg}}</span>
           </div>
         </div>
       </div>
     </div>
-    <div class="notice">
-      <div class="title">友情提示</div>
-      <div class="content-wrapper">
-        <img src="./img/query-external-barcode.png" align="right" alt="" />
-        <p>
-          1、目前，国际物品编码组织（GS1）已将690至697之间的前缀码分配给中国物品编码中心使用，通常以这些前缀码开始的厂商识别代码都是由中国物品编码中心负责分配和管理的；以其他前缀码开始的则由境外GS1成员组织负责，一般称为"境外条码"，以下为您提供了境外商品条码信息的查询工具，请根据提示进行相关查询。欲了解GS1分配的前缀码，请点击：了解更多
-          >>
-        </p>
-        <p>
-          2、本查询仅适用于中华人民共和国境外注册的商品条码信息。
-        </p>
-      </div>
-    </div>
   </div>
 </template>
 
 <script>
+import validation from "@/views/Search/validation";
+
 export default {
+  mixins: [validation],
   data() {
     return {
-      search: { code: "", validate: "" },
+      type: '',
+      options: [
+        {label: '中文标题', value: '1'},
+        {label: '英文标题', value: '2'},
+        {label: '关键字', value: '3'},
+        {label: '术语解释', value: '4'},
+      ],
+      search: {code: "",},
       searchCodeShow: "",
       showResult: false,
       result: null,
     };
   },
   methods: {
-    handleSearch() {
+    async handleSearch() {
+      const params = {
+        keyword: this.search.code,
+        type: this.type,
+        uuid: this.uuid,
+        captcha: this.captcha,
+      };
       this.searchCodeShow = this.search.code;
       this.showResult = true;
-      if (this.search.code === "1") {
-        this.result = {};
+      const searchGlnRes = await this.$api.search.searchGlossary(params);
+      const {returnCode, data} = searchGlnRes;
+      if (returnCode === "0") {
+        this.result = data;
+      } else {
+        this.errorMsg =
+            searchGlnRes.returnMsg ||
+            "没有符合条件的记录！";
+        this.result = null;
       }
     },
   },
 };
 </script>
-
-<style lang="scss">
-.search-content {
-  .validate-code {
-    display: inline-block;
-    width: 70px;
-    height: 40px;
-    margin-left: 11px;
-    > img {
-      width: 100%;
-      height: 100%;
-    }
-  }
-
-  .w160 {
-    width: 160px;
-  }
-
-  .w240 {
-    width: 240px;
-  }
-}
-</style>