修改证书查询界面

tanghaolin

2025-02-20 83d5f40aa0562a7b931c95b37ee2c3b033a4a1fd

 src/views/EecLabel.vue

@@ -6,11 +6,11 @@
      <div class="flag-search-content">
         <el-card class="w100 h100" shadow="never">
            <el-form
               style="height: 56px; flex-shrink: 0"
               style="height: 56px; flex-shrink: 0; display: flex"
               :model="state.m_formData"
               ref="ruleFormRef"
               :inline="true"
               label-width="100px"
               label-width="80px"
               class="demo-ruleForm"
            >
               <el-form-item label="产品类型" prop="ProductType">
@@ -84,7 +84,7 @@
                           </svg>
                           详细</span
                        >
                        <span class="table-detail-span" @click="clickDetailCertifcate(scope.row)"
                        <span class="table-detail-span" @click="clickDetailCertifcate(scope.row)" v-if="false"
                           ><svg
                              t="1739500034021"
                              class="detail-icon"
@@ -148,34 +148,65 @@
         </el-card>
      </div>
      <el-dialog v-model="dialogVisible" title="详细" width="500" align-center>
         <el-form :model="state.m_detailDialogInfo" label-width="120px" size="small">
            <el-form-item label="" label-width="0px">
               <div class="w-full flex justify-center">
                  <img :src="state.m_detailDialogInfo.PhysicalPicturePath" style="height: 200px" />
               </div>
            </el-form-item>
            <el-form-item label="产品类型" prop="ModelType">
               <span>{{ state.m_detailDialogInfo.ModelType }}</span>
            </el-form-item>
            <el-form-item label="产品型号" prop="Model">
               <span>{{ state.m_detailDialogInfo.Model }}</span>
            </el-form-item>
            <el-form-item label="生产厂商" prop="CompanyName">
               <span>{{ state.m_detailDialogInfo.CompanyName }}</span>
            </el-form-item>
            <el-form-item label="能效等级" prop="EnergyEfficiencyClass">
               <span>{{ state.m_detailDialogInfo.EnergyEfficiencyClass }}</span>
            </el-form-item>
            <el-form-item label="备案号" prop="RecordNumber">
               <span class="detail-text">{{ state.m_detailDialogInfo.CompanyName }}</span>
            </el-form-item>
            <el-form-item label="备案时间" prop="RecordTime">
               <span>{{ state.m_detailDialogInfo.RecordTime }}</span>
            </el-form-item>
            <el-form-item label="依据国家标准" prop="RecordNumber">
               <span></span>
            </el-form-item>
         </el-form>
         <div v-loading="dialogLoading">
            <!-- 泵产品显示 -->
            <el-form v-if="isPumpProduct" :model="state.m_detailDialogInfo" label-width="120px" size="small">
               <el-form-item label="产品类型" prop="ModelType">
                  <span>{{ state.m_detailDialogInfo.ModelType }}</span>
               </el-form-item>
               <el-form-item label="产品型号" prop="Model">
                  <span>{{ state.m_detailDialogInfo.Model }}</span>
               </el-form-item>
               <el-form-item label="生产厂商" prop="CompanyName">
                  <span>{{ state.m_detailDialogInfo.CompanyName }}</span>
               </el-form-item>
               <el-form-item label="能效等级" prop="EnergyEfficiencyClass">
                  <span>{{ state.m_detailDialogInfo.EnergyEfficiencyClass }}</span>
               </el-form-item>
               <el-form-item label="备案号" prop="RecordNumber">
                  <span class="detail-text">{{ state.m_detailDialogInfo.CompanyName }}</span>
               </el-form-item>
               <el-form-item label="备案时间" prop="RecordTime">
                  <span>{{ state.m_detailDialogInfo.RecordTime }}</span>
               </el-form-item>
               <el-form-item label="依据国家标准" prop="RecordNumber">
                  <span></span>
               </el-form-item>
            </el-form>
            <!-- 其他产品显示 -->
            <el-form v-if="!isPumpProduct" :model="state.m_OtherDetailInfo" label-width="120px" size="small">
               <el-form-item label="产品类型" prop="ModelType">
                  <span>{{ state.m_OtherDetailInfo.ModelType }}</span>
               </el-form-item>
               <el-form-item label="产品型号" prop="Model">
                  <span>{{ state.m_OtherDetailInfo.Model }}</span>
               </el-form-item>
               <el-form-item label="生产厂商" prop="CompanyName">
                  <span>{{ state.m_OtherDetailInfo.CompanyName }}</span>
               </el-form-item>
               <el-form-item label="能效等级" prop="EnergyEfficiencyClass">
                  <span>{{ state.m_OtherDetailInfo.EnergyEfficiencyClass }}</span>
               </el-form-item>
               <el-form-item label="备案号" prop="RecordNumber">
                  <span class="detail-text">{{ state.m_OtherDetailInfo.RecordNumber }}</span>
               </el-form-item>
               <el-form-item label="公告时间" prop="AnnouncementTime">
                  <span>{{ state.m_OtherDetailInfo.AnnouncementTime }}</span>
               </el-form-item>
               <el-form-item label="依据国家标准" prop="Standard">
                  <span>{{ state.m_OtherDetailInfo.Standard }}</span>
               </el-form-item>
               <el-form-item label="备案信息" prop="RecordNumber">
                  <div style="padding-left: 30px; background-color: rgb(243 250 255)">
                     <el-form label-width="200px" >
                        <el-form-item v-for="(item, index) in state.m_OtherDetailInfo.List" :key="index" :label="item.name" prop="Standard">
                           <span>{{ item.value }}</span>
                        </el-form-item>
                     </el-form>
                  </div>
               </el-form-item>
            </el-form>
         </div>
         <template #footer>
            <div class="dialog-footer">
               <el-button type="primary" @click="dialogVisible = false"> 确定 </el-button>
@@ -204,11 +235,12 @@
import { ElMessage, ElTable, ElTableColumn, ElPagination, ElForm, ElFormItem, ElDialog } from 'element-plus';
import { useRoute, useRouter } from 'vue-router';
import axios from 'axios';
import { el } from 'element-plus/es/locale';
const route = useRoute();
const router = useRouter();
const dialogVisible = ref(false);
const dialogVisibleCertifcate = ref(false);
const isPumpProduct = ref(true);
const dialogLoading = ref(false);
let state = reactive({
   m_formData: {
      ProductModel: '',
@@ -232,6 +264,17 @@
      EnergyEfficiencyClass: '',
      RecordTime: '',
      RecordNumber: '',
   },
   m_OtherDetailInfo: {
      ModelType: '',
      Model: '',
      CompanyName: '',
      RecordNumber: '',
      EnergyEfficiencyClass: '',
      AnnouncementTime: '',
      Standard: '',
      List: '',
      RecordTime: '',
   },
   typeSelect: 1,
   // 分类选项
@@ -269,6 +312,20 @@
      .then((res) => {
         state.m_PageLoading = false;
         let result = res.data;
         result.sort((a: any, b: any) => {
            const aPrefix = a.Model.slice(0, 3);
            const bPrefix = b.Model.slice(0, 3);
            const aContainsDP = aPrefix.includes('DP') || aPrefix.includes('DRL');
            const bContainsDP = bPrefix.includes('DP') || bPrefix.includes('DRL');

            if (aContainsDP && !bContainsDP) {
               return -1;
            } else if (!aContainsDP && bContainsDP) {
               return 1;
            } else {
               return 0;
            }
         });
         let arr = [];
         result.forEach((item: any, index: number) => {
            let node = {
@@ -295,6 +352,7 @@
         state.m_PageLoading = false;
      });
};
// 筛选查询数据
const filterProduct = () => {
   state.filterProductData = state.allEecProduct.filter((item) => {
      return item.Type === state.m_formData.ProductType;
@@ -327,14 +385,100 @@
const changeProductType = () => {
   initData();
};
const clickDetail = (row: any) => {
   dialogVisible.value = true;
const clickDetail = async (row: any) => {
   if (row.Id.includes('Pupm')) {
      isPumpProduct.value = true;
   } else {
      isPumpProduct.value = false;
      getProductDetail(row.Model);
   }
   state.m_detailDialogInfo = row;
   dialogVisible.value = true;

   // 找到当前点击的产品
   // const currentProduct = state.m_dispTableData.find((item) => item.id === row.id);
   // if (currentProduct) {
   //    // 保存产品信息到localStorage
   //    localStorage.setItem('currentProduct', JSON.stringify(currentProduct));
   // }
   // router.push(`/product/${currentProduct.Id}`);
};
const clickDetailCertifcate = (row: any) => {
   state.m_detailDialogInfo = row;
   dialogVisibleCertifcate.value = true;
};

const getProductDetail = async (productModel) => {
   dialogLoading.value = true;
   const productRegistrationList = () => {
      return new Promise((reslvoe, reject) => {
         axios({
            url: 'https://www.energylabel.com.cn/admin-api/gateway/productRegistration/productRegistrationList',
            method: 'post',
            data: {
               mark: 854,
               productType: '',
               productModel: productModel,
               registrationNumber: '',
               producerName: '',
               current: 1,
               pageSize: 10,
               isOld: 0,
            },
         })
            .then((res) => {
               let result = res.data.data;
               if (!result.list.length) {
                  reslvoe([]);
               }
               reslvoe(result.list);
            })
            .catch((err) => {});
      });
   };

   const listData = await productRegistrationList();
   const firstProduct = listData[0];

   const detailResponse = () => {
      return new Promise((reslvoe, reject) => {
         axios({
            url: 'https://www.energylabel.com.cn/admin-api/gateway/productRegistration/productDetailById',
            method: 'post',
            data: {
               productId: firstProduct.id,
               productTypeCode: firstProduct.productTypeCode,
               mark: 854,
               isSign: 'true',
               isOld: 0,
            },
         })
            .then((res) => {
               let result = res.data.data;
               if (!result.list.length) {
                  reslvoe([]);
               }
               reslvoe(result);
            })
            .catch((err) => {});
      });
   };

   const detailData = await detailResponse();
   dialogLoading.value = false;
   state.m_OtherDetailInfo = {
      ModelType: detailData.productType,
      Model: detailData.productModel,
      CompanyName: detailData.producerName,
      RecordNumber: detailData.registrationNumber,
      EnergyEfficiencyClass: detailData.nxLever,
      AnnouncementTime: detailData.announcementTime,
      Standard: detailData.standard,
      List: detailData.list,
      RecordTime: '',
   };
};

const resertForm = () => {
   state.m_formData.ProductModel = '';
   state.m_formData.ProductType = 1;
@@ -397,7 +541,7 @@
}

.w-180-px {
   width: 180px;
   width: 10rem;
}

.table-detail-span {
@@ -437,6 +581,9 @@
      background-color: #196dd9;
   }
}
:deep(.el-form--inline .el-form-item) {
   margin-right: 0.75rem;
}
:deep(.el-card) {
   width: 100%;
}