feat: 详情和变更记录

src/views/Search/check.vue

@@ -28,7 +28,7 @@
                   v-model="search.result"
                   class="w40"
               ></el-input>
-              <a href="/Knowledge" style="margin-left: 20px"
+              <a href="/Knowledge/article?id=301" style="margin-left: 20px"
                  target="_blank" class="hover">检验码计算方法</a>
             </div>
           </el-form-item>

src/views/Search/internal.vue

@@ -47,14 +47,15 @@
                   ></el-input>
 
                   <div class="validate-code">
-                    <img :src="captchaPath" @click="getCaptcha()" 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>
             </el-form>
@@ -79,7 +80,7 @@
             <el-form-item label="验证码：">
               <el-button type="primary" class="w240" @click="handleVerification">
                 <div style="diplay: flex; align-item: center">
-                  <img style="height: 14px" src="./img/guard.png" alt="" />
+                  <img style="height: 14px" src="./img/guard.png" alt=""/>
                   点击此处进行验证
                 </div>
               </el-button>
@@ -106,32 +107,32 @@
                 style="width: 100%"
             >
               <el-table-column prop="_source.code" label="厂商识别代码" width="180">
-                <template slot-scope="scope">
-                  <span type="text" class="hover" size="small">{{
-                      scope.row.id
-                    }}</span>
-                </template>
               </el-table-column>
               <el-table-column prop="_source.firm_name" label="厂商名称" width="180">
               </el-table-column>
-              <el-table-column prop="status" label="状态"></el-table-column>
-              <el-table-column label="详细">
-                <template>
+              <el-table-column label="状态">
+                <template slot-scope="scope">
+                  <el-tag size="medium" effect="dark" v-if="scope.row._source.logout_flag==='0'">有效</el-tag>
+                  <el-tag size="medium" effect="dark" v-else type="info">已注销</el-tag>
+                </template>
+              </el-table-column>
+              <el-table-column label="详情">
+                <template slot-scope="scope">
                   <span
                       type="text"
                       class="hover pointer"
-                      @click="handleCheck()"
+                      @click="handleCheckDetail(scope.row._source)"
                       size="small"
                   >详情</span
                   >
                 </template>
               </el-table-column>
-              <el-table-column label="查看">
-                <template>
+              <el-table-column label="变更记录">
+                <template slot-scope="scope">
                   <span
                       type="text"
                       class="hover pointer"
-                      @click="handleCheck()"
+                      @click="handleCheckChange(scope.row._source)"
                       size="small"
                   >查看</span
                   >
@@ -152,38 +153,16 @@
                 header-cell-class-name="search-table-hc"
                 style="width: 100%"
             >
-              <el-table-column prop="_source.code" label="厂商识别代码" width="180">
+              <el-table-column prop="_source.code" label="商品条码" width="180">
                 <template slot-scope="scope">
                   <span type="text" class="hover" size="small">{{
                       scope.row.id
                     }}</span>
                 </template>
               </el-table-column>
-              <el-table-column prop="_source.firm_name" label="厂商名称" width="180">
+              <el-table-column prop="_source.firm_name" label="商品名称" width="180">
               </el-table-column>
               <el-table-column prop="status" label="状态"></el-table-column>
-              <el-table-column label="详细">
-                <template>
-                  <span
-                      type="text"
-                      class="hover pointer"
-                      @click="handleCheck()"
-                      size="small"
-                  >详情</span
-                  >
-                </template>
-              </el-table-column>
-              <el-table-column label="查看">
-                <template>
-                  <span
-                      type="text"
-                      class="hover pointer"
-                      @click="handleCheck()"
-                      size="small"
-                  >查看</span
-                  >
-                </template>
-              </el-table-column>
             </el-table>
           </template>
           <span style="color: rgb(255, 59, 48)" v-else>{{ errorMsg }}</span>
@@ -220,19 +199,77 @@
     </div>
 
     <Vcode :show="isShowVcode" @success="onSuccess" @close="onClose"/>
+    <el-dialog
+        title="企业信息"
+        :visible.sync="detailDialogVisible"
+        top="25vh"
+        width="60%">
+      <div class="i_company_detail">
+        <div class="company_name">{{ companyDetail.firm_name }}</div>
+        <div class="c_content-wrapper">
+          <div class="company_detail-row">
+            <span class="cdr-label">厂商识别代码</span>
+            <span class="cdr-value">
+            {{ companyDetail.code }}
+          </span>
+          </div>
+          <div class="company_detail-row">
+            <span class="cdr-label">厂商名称</span>
+            <span class="cdr-value">
+            {{ companyDetail.firm_name }}
+          </span>
+          </div>
+          <div class="company_detail-row">
+            <span class="cdr-label">状态</span>
+            <span class="cdr-value">
+            {{ companyDetail.logout_flag === '0' ? '有效' : '已注销' }}
+          </span>
+          </div>
+        </div>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="detailDialogVisible = false">关闭</el-button>
+      </span>
+    </el-dialog>
+
+    <el-dialog
+        title="变更记录"
+        :visible.sync="changeDialogVisible"
+        top="25vh"
+        width="60%">
+      <div class="i_company_detail">
+        <div class="company_name">厂商变更信息</div>
+        <div class="c_content-wrapper">
+          <div class="company_detail-row">
+            <span class="cdr-th w33">变更日期</span>
+            <span class="cdr-th w33">变更前</span>
+            <span class="cdr-th w33">变更后</span>
+          </div>
+          <div class="company_detail-row" v-for="(item,i) in changeDetail" :key="i">
+            <span class="cdr-value w33">{{ item.changeDate }}</span>
+            <span class="cdr-value w33">{{ item.before }}</span>
+            <span class="cdr-value w33">{{ item.after }}</span>
+          </div>
+        </div>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="changeDialogVisible = false">关闭</el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 
 <script>
 import Vcode from "vue-puzzle-vcode";
 import validation from "@/views/Search/validation";
+import moment from "moment";
 
 const CODE = '1';
 const NAME = '2';
 const ADDRESS = '3';
 
 export default {
-  mixins:[validation],
+  mixins: [validation],
   data() {
     return {
       CODE,
@@ -251,21 +288,37 @@ export default {
         code: "",
       },
       result: null,
-      resultType:'company',
+      resultType: 'company',
       searchCodeShow: "",
       errorMsg: "",
       showResult: false,
+      companyDetail: {
+        code: '12312514124',
+        firm_name: '水电费昂肥肥安抚',
+        logout_flag: '0',
+      },
+      detailDialogVisible: false,
+      changeDetail: [
+        {
+          changeDate: '2021-12-11',
+          before: '公司名称AAAAA',
+          after: '公司名称BBBBB',
+        }
+      ],
+      changeDialogVisible: true,
     };
   },
   components: {
     Vcode,
   },
   created() {
-    if(this.$route.query.infoType){
-      if(this.$route.query.infoType === 'product'){
+    // console.log(moment('2021-12-26T14:00:00.000Z').format('YYYY-MM-DD HH:mm:ss'))
+    console.log(moment('2021-12-26T14:00:00.000Z'))
+    if (this.$route.query.infoType) {
+      if (this.$route.query.infoType === 'product') {
         this.activeName = 'second'
         this.productSearch.code = this.$route.query.keyword
-      }else if(this.$route.query.infoType === 'company'){
+      } else if (this.$route.query.infoType === 'company') {
         this.activeName = 'first'
         this.company = this.$route.query.type
         this.companySearch.name = this.$route.query.keyword
@@ -289,16 +342,26 @@ export default {
       this.isVerificationPass = true;
     },
     // 查看按钮
-    handleCheck(row) {
+    handleCheckDetail(row) {
       console.log(row);
+      const localeTime = new Date(moment(row.login_date).format('YYYY-MM-DD HH:mm:ss')).getTime()
+      const endTime = Math.floor(new Date().getTime() / 1000) - localeTime / 1000;
+      const day = endTime / 60 / 60 / 24;
+      if (day > 15) {
+        alert('该企业的详细信息将在注册15日后公布！')
+      } else {
+        this.companyDetail = row
+        this.detailDialogVisible = true
+      }
     },
-    // 详情按钮
-    handleDetail(row) {
+    // 查看变更详情
+    handleCheckChange(row) {
       console.log(row);
+      this.changeDialogVisible = true
     },
     async handleSearchCompany() {
       this.showResult = true;
-      this.resultType= 'company'
+      this.resultType = 'company'
       if (this.company === CODE) {
         this.searchCodeShow = this.companySearch.code;
       } else if (this.company === NAME) {
@@ -309,7 +372,7 @@ export default {
       const params = {type: this.company, uuid: this.uuid, code: this.searchCodeShow, captcha: this.captcha,};
       const searchGlnRes = await this.$api.search.searchInternal(params);
       const {returnCode, data} = searchGlnRes;
-      if (returnCode === "0"||returnCode === 0) {
+      if (returnCode === "0" || returnCode === 0) {
         this.result = data.hits.hits;
       } else {
         this.errorMsg =
@@ -321,19 +384,22 @@ export default {
     },
 
     async handleSearchProduct() {
-      this.showResult = true;
-      this.resultType= 'product'
-      const params = {uuid: this.uuid, keyword: this.productSearch.code, captcha: this.captcha,};
-      const searchGlnRes = await this.$api.search.searchInternalProduct(params);
-      if (returnCode === "0") {
-        this.result = [data.hits.hits];
-      } else {
-        this.errorMsg =
-            searchGlnRes.returnMsg ||
-            "没有符合条件的记录！";
-        this.result = null;
+      window.open(`http://search.anccnet.com/searchResult2.aspx?keyword=${this.productSearch.code}`, '_blank')
     }
-    },
+
+    //   this.showResult = true;
+    //   this.resultType = 'product'
+    //   const params = {uuid: this.uuid, keyword: this.productSearch.code, captcha: this.captcha,};
+    //   const searchGlnRes = await this.$api.search.searchInternalProduct(params);
+    //   if (returnCode === "0") {
+    //     this.result = [data.hits.hits];
+    //   } else {
+    //     this.errorMsg =
+    //         searchGlnRes.returnMsg ||
+    //         "没有符合条件的记录！";
+    //     this.result = null;
+    //   }
+    // },
   },
 };
 </script>
@@ -347,4 +413,67 @@ export default {
   background: url("./img/guard.png") center no-repeat;
   background-size: 14px 14px;
 }
+
+.i_company_detail {
+  width: 100%;
+  background-color: rgba(13, 110, 253, 0.1);
+  border: 1px solid rgba(13, 110, 253, 0.8);
+  padding: 0 14px 24px;
+
+  .company_name {
+    font-size: 22px;
+    font-weight: bold;
+    text-align: center;
+    line-height: 46px;
+    color: #F26335;
+  }
+
+  .c_content-wrapper {
+    border: 1px solid rgba(13, 110, 253, 0.4);
+    border-radius: 3px;
+  }
+
+  .company_detail-row {
+    height: 30px;
+    line-height: 30px;
+
+    & + .company_detail-row {
+      border-top: 1px solid white;
+    }
+
+    > span {
+      display: inline-block;
+      padding-left: 6px;
+    }
+
+    .cdr-th.w33 {
+      width: 33.33%;
+      font-weight: bold;
+      text-align: center;
+
+      & + .cdr-th.w33 {
+        border-left: 1px solid white;
+      }
+
+    }
+
+    .cdr-label {
+      width: 24%;
+      border-right: 1px solid white;
+    }
+
+    .cdr-value {
+      width: 76%;
+    }
+
+    .cdr-value.w33 {
+      width: 33.33%;
+      text-align: center;
+
+      & + .cdr-value.w33 {
+        border-left: 1px solid white;
+      }
+    }
+  }
+}
 </style>