save

package.json

@@ -27,7 +27,7 @@
     "iscroll": "^5.2.0",
     "js-cookie": "^2.2.0",
     "js-md5": "^0.7.3",
-    "jsencrypt": "^3.0.0-rc.1",
+    "jsencrypt": "^3.2.1",
     "jspdf": "^1.5.3",
     "node-sass": "^4.9.2",
     "pdfh5": "^1.3.9",

src/router/router.js

@@ -82,6 +82,8 @@ const plazaList = r => require.ensure([], () => r(require('../views/plaza/plaza-
 const activityMember = r => require.ensure([], () => r(require('../views/activitymanagement/activity-member.vue')), 'activity-member')
 
 const videoManage = r => require.ensure([], () => r(require('../views/shortvideo/video-manage.vue')), 'video-manage')
+const qualificationList = r => require.ensure([], () => r(require('../views/qualification/list.vue')), 'qualification')
+const qualificationDetail = r => require.ensure([], () => r(require('../views/qualification/detail.vue')), 'qualification')
 
 export default [{
     path: '/',
@@ -347,7 +349,14 @@ export default [{
             path: 'video-manage',
             component: videoManage,
         },
-
+        {
+          path: 'qualification-list',
+          component:qualificationList
+        },
+        {
+          path: 'qualification-detail',
+          component:qualificationDetail
+        },
       // {
       //   path: '/followup',
       //   name: 'followUp',

src/style/global.scss

 @import './common.scss';
+// color
+.c0D9078{
+  color:#0D9078;
+}
 //定位
 .relative{
     position: relative;
@@ -18,9 +22,19 @@
     display: flex;
     justify-content: flex-end;
 }
+.flex1{
+  flex: 1;
+}
 .textLeft{
     float: left;
 }
+.cp{
+  cursor: pointer;
+}
+.flex-c{
+  display: flex;
+  align-items: center;
+}
 .center{
     text-align: center;
 }

src/utils/mixins.js

 import fetch from '@/utils/fetch'
 import { getBaseUrl, getReportUrl, getWorkApi, getCmsUrl } from '@/utils/index'
 import { CryptoJS } from '@/plugins/aes'
-import 'jsencrypt'
+import JSEncrypt from 'jsencrypt'
 
 import { getPubKey } from '@/utils/account/accountApi';
 

src/utils/qualification/index.js

+import fetch from '../fetch';
+import { getBaseUrl, getSaasDomain, getSaasApiDomain } from '@/utils/index'
+let headers = {
+  'Content-Type': 'application/json;charset=UTF-8',
+  token: localStorage.getItem('storageToken'),
+};
+export const getCertifyList = (params) => {
+  return fetch({
+    headers,
+    url: getBaseUrl(`store/certify/list`),
+    method: 'post',
+    data:params,
+    description: '审核记录列表(批发和供应商)',
+  })
+};
+export const getCertifyHistory = (params) => {
+  return fetch({
+    headers,
+    url: getBaseUrl(`certify/certifyHistory`),
+    method: 'get',
+    data:params,
+    description: '查看审核历史',
+  })
+};
+export const getCertifyDetail = () => {
+  return fetch({
+    headers,
+    url: getBaseUrl(`store/certify/certifyDetail`),
+    method: 'get',
+    description: '获取认证申请的审核详情',
+  })
+};
+export const getRefuseTemplate = (type) => {
+  return fetch({
+    headers,
+    url: getBaseUrl(`store/cert/constant/refuse/template?type=${type}`),
+    method: 'get',
+    description: '获取错误模板',
+  })
+};
+export const postCertifyAudit = (params) => {
+  return fetch({
+    headers,
+    url: getBaseUrl(`store/certify/audit`),
+    method: 'post',
+    data:params,
+    description: '审核',
+  })
+};

src/views/qualification/components/historyDialog.vue

+<template>
+  <el-dialog
+    title="提示"
+    :visible.sync="hidden"
+    width="80%"
+    :before-close="handleClose"
+  >
+    <el-table :data="gridData">
+      <el-table-column property="date" label="审核时间"></el-table-column>
+      <el-table-column property="name" label="审核人"></el-table-column>
+      <el-table-column property="address" label="审核结果"></el-table-column>
+      <el-table-column property="address" label="失败原因" width="200">
+        <template class=""> </template>
+      </el-table-column>
+      <el-table-column property="address" label="操作">
+        <template>
+          <el-button
+            @click="goDetail(scope.row)"
+            class="c0D9078"
+            type="text"
+            size="small"
+            >查看详情</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="pagination">
+      <el-pagination
+        background
+        @size-change="handleSizeChange"
+        @current-change="handleNumChange"
+        :current-page="pageNo"
+        :page-sizes="[10, 30, 50, 100]"
+        :page-size="pageSize"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="total"
+      ></el-pagination>
+    </div>
+  </el-dialog>
+</template>
+<script>
+import { getCertifyHistory } from "@/utils/qualification";
+export default {
+  props: {
+    hidden: {
+      type: Boolean,
+      default: () => {
+        return false;
+      },
+    },
+    id: {
+      type: Number,
+      default: () => {
+        return 0;
+      },
+    },
+  },
+  data() {
+    return {
+      pageNo: 0,
+      pageSize: 10,
+      total: 100,
+      gridData: [],
+    };
+  },
+  created() {},
+  methods: {
+    init() {
+      const params = {
+        certificateInfoId: this.id,
+        pageNo: this.pageNo,
+        pageSize: this.pageSize,
+      };
+      getCertifyHistory(params).then((res) => {
+        this.gridData = res.data.contentList;
+      });
+    },
+    handleSizeChange(value) {
+      this.pageSize = value;
+      this.init();
+    },
+    handleNumChange(value) {
+      this.pageNo = value;
+    },
+    goDetail() {
+
+    },
+    show() {},
+    handleClose() {
+      this.pageSize = 10;
+      this.pageNo = 1;
+      this.gridData = [];
+      this.$emit("close");
+    },
+  },
+};
+</script>
+<style lang='less' scoped>
+</style>

src/views/qualification/components/refuseDialog.vue

+<template>
+  <el-dialog
+    title="拒绝原因"
+    :visible.sync="dialogVisible"
+    width="40%"
+    :before-close="handleClose"
+  >
+    <div class="refuse-dialog">
+      <el-radio
+        class="radio"
+        v-model="checkId"
+        v-for="item in list"
+        :key="item.id"
+        :label="item.id"
+        >{{ item.name }}</el-radio
+      >
+      <el-radio class="radio" v-model="checkId" :label="-1">手动输入</el-radio>
+      <el-input
+        v-if="checkId === -1"
+        type="textarea"
+        placeholder="请输入拒绝原因"
+        v-model="refuse"
+        maxlength="30"
+        show-word-limit
+      />
+    </div>
+    <div class="btn">
+      <el-button type="default" size="small" @click="handleClose"
+        >取消</el-button
+      >
+      <el-button type="primary" size="small" @click="confirm">确认</el-button>
+    </div>
+  </el-dialog>
+</template>
+<script>
+import { getRefuseTemplate } from "@/utils/qualification";
+
+export default {
+  props: {},
+  data() {
+    return {
+      dialogVisible: false,
+      checkId: -1,
+      refuse: "",
+      list: [],
+      type: "",
+      typeData: {
+        1: "公司信息",
+        2: "营业执照",
+        3: "上一年年度报告",
+        4: "委托人身份证照片",
+        5: "委托书",
+        6: "法人身份证照片",
+        7: "药品经营许可证",
+        8: "药品经营质量管理规范认证证书",
+        9: "食品经营许可证",
+        10: "医疗器械经营许可证",
+        11: "二级医疗器械经营备案凭证",
+        12: "事业单位法人证",
+      },
+    };
+  },
+  created() {},
+  methods: {
+    init() {
+      getRefuseTemplate(this.type).then((res) => {
+        console.log(res);
+        this.list = res.data || [];
+      });
+    },
+    show(type) {
+      console.log(type);
+      this.type = type;
+      this.init(type);
+      this.dialogVisible = true;
+    },
+    handleClose() {
+      this.list = [];
+      this.refuse = "";
+      this.checkId = -1;
+      this.dialogVisible = false;
+    },
+    confirm() {
+      const params = {
+        refuseTemplateNo: this.checkId,
+        infoType: this.type,
+        infoTypeName:this.typeData[this.type]
+      };
+      if (this.checkId === -1) {
+        params.refuseContent = this.refuse;
+      } else {
+        params.refuseContent = this.list.filter((v) => {
+          return v.id === this.checkId;
+        })[0].name;
+      }
+      this.handleClose();
+      this.$emit("confirm", params);
+    },
+  },
+};
+</script>
+<style lang='less' scoped>
+.refuse-dialog {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 20px;
+}
+.radio {
+  margin-bottom: 10px;
+}
+.btn {
+  text-align: right;
+}
+</style>

src/views/qualification/detail.vue

+<template>
+  <div class="qualification-detail" ref="qualificationDetail">
+    <bread-crumb :curmbFirst="curmbFirst"></bread-crumb>
+    <div class="qualification-content screenSet" id="screenSet">
+      <div class="head">
+        <div class="top space-between">
+          <div class="flex-c">
+            <div class="name">审核状态</div>
+            <div class="type" :class="typeState">{{ typeStateText }}</div>
+            <div class="history cp" @click="showHistoryDialog">
+              <i class="el-icon-document"></i>
+              查看审核历史
+            </div>
+          </div>
+          <div class="flex-c fs14">
+            <div class="mLR10">审核人：{{ detail.auditName }}</div>
+            <div>审核时间：{{ detail.auditTime }}</div>
+          </div>
+        </div>
+        <div class="hr"></div>
+        <div class="bottom" v-if="$route.query.source === 'ghs'">
+          <div>店铺名称：{{ detail.storeName }}</div>
+          <div>
+            管理员姓名：{{ detail.adminName }}
+            <span class="c0D9078 cp" @click="copyTxt">复制</span>
+          </div>
+          <div>管理员手机号：{{ detail.adminMobile }}</div>
+        </div>
+        <div class="bottom" v-if="$route.query.source === 'pf'">
+          <div>医生姓名：{{ detail.doctorName }}</div>
+          <div>
+            医生ID：{{ detail.doctorId }}
+            <span class="c0D9078 cp" @click="copyTxt">复制</span>
+          </div>
+          <div>申请时间：{{ detail.applyTime }}</div>
+        </div>
+      </div>
+    </div>
+    <div class="company" ref="company">
+      <div class="tit">
+        <div class="mr5">公司信息</div>
+        <div class="c0D9078 cp" @click="refuse(1)">
+          <i class="el-icon-edit-outline"></i>
+          拒绝原因
+        </div>
+      </div>
+      <div class="refuse-info">拒绝原因：{{ reasonRejection(1) }}</div>
+      <div class="info">
+        <div>
+          <div>企业类型：{{ detail.orgType }}</div>
+          <div>联系人：{{ detail.contactName }}</div>
+        </div>
+        <div>
+          <div>企业地区：{{ detail.areaStr }}</div>
+          <div>联系电话：{{ detail.contactPhone }}</div>
+        </div>
+        <div>详情地址：{{ detail.orgAddress }}</div>
+      </div>
+    </div>
+    <div class="business">
+      <div class="tit">
+        <div>工商信息</div>
+      </div>
+      <div class="refuse-info">拒绝原因：{{ reasonRejection(2) }}</div>
+      <div class="">
+        <div class="flex-c fs12">
+          <div class="mr5">营业执照</div>
+          <div class="c0D9078 cp" @click="refuse(2)">
+            <i class="el-icon-edit-outline"></i>拒绝原因
+          </div>
+        </div>
+        <div class="img">
+          <el-image
+            :src="detail.businessLicenseUrl"
+            :preview-src-list="[
+              'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+            ]"
+          />
+        </div>
+        <div class="space-between flex-c">
+          <div>企业名称：{{ detail.orgName }}</div>
+          <div>信用代码：{{ detail.creditCode }}</div>
+          <div>
+            有效日期：{{ detail.licenseValidDateBegin }} 至
+            {{ detail.licenseValidDateEnd }}
+          </div>
+        </div>
+      </div>
+      <el-divider></el-divider>
+      <div>
+        <div class="flex-c fs12">
+          <div class="mr5">上一年度报告</div>
+          <div class="c0D9078 cp" @click="refuse(3)">
+            <i class="el-icon-edit-outline"></i>拒绝原因
+          </div>
+        </div>
+        <div class="refuse-info">拒绝原因：{{ reasonRejection(3) }}</div>
+        <div class="img">
+          <el-image
+            src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
+            :preview-src-list="[
+              'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+            ]"
+          />
+        </div>
+        <div>有效日期：</div>
+      </div>
+      <el-divider></el-divider>
+      <div>
+        <div class="flex-c fs12">
+          <div class="mr5">委托人身份证照片</div>
+          <div class="c0D9078 cp" @click="refuse(4)">
+            <i class="el-icon-edit-outline"></i>拒绝原因
+          </div>
+        </div>
+        <div class="refuse-info">拒绝原因：{{ reasonRejection(4) }}</div>
+        <div class="img">
+          <el-image
+            :src="detail.assignorCertBackUrl"
+            :preview-src-list="[
+              'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+            ]"
+          />
+        </div>
+        <div class="img">
+          <el-image
+            :src="detail.assignorCertFrontUrl"
+            :preview-src-list="[
+              'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+            ]"
+          />
+        </div>
+        <div class="space-between flex-c">
+          <div>委托人姓名：{{ detail.assignorName }}</div>
+          <div>委托人身份证号：{{ detail.assignorCertNo }}</div>
+          <div>
+            委托人身份证有效日期：{{ detail.assignorValidDateBegin }}至{{
+              detail.assignorValidDateEnd
+            }}
+          </div>
+        </div>
+      </div>
+      <el-divider></el-divider>
+      <div>
+        <div class="flex-c fs12">
+          <div class="mr5">委托书</div>
+          <div class="c0D9078 cp" @click="refuse(5)">
+            <i class="el-icon-edit-outline"></i>拒绝原因
+          </div>
+        </div>
+        <div class="refuse-info">拒绝原因：{{ reasonRejection(5) }}</div>
+        <div class="img">
+          <el-image
+            :src="detail.assignorCertBackUrl"
+            :preview-src-list="[
+              'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+            ]"
+          />
+        </div>
+      </div>
+      <el-divider></el-divider>
+      <div>
+        <div class="flex-c fs12">
+          <div class="mr5">法人身份证照片</div>
+          <div class="c0D9078 cp" @click="refuse(6)">
+            <i class="el-icon-edit-outline"></i>拒绝原因
+          </div>
+        </div>
+        <div class="refuse-info">拒绝原因：{{ reasonRejection(6) }}</div>
+        <div class="img">
+          <el-image
+            :src="detail.legalCertBackUrl"
+            :preview-src-list="[
+              'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+            ]"
+          />
+        </div>
+        <div class="img">
+          <el-image
+            :src="detail.legalCertFrontUrl"
+            :preview-src-list="[
+              'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+            ]"
+          />
+        </div>
+        <div class="space-between flex-c">
+          <div>法人人姓名：{{ detail.legalName }}</div>
+          <div>法人身份证号：{{ detail.legalCertNo }}</div>
+          <div>
+            法人身份证有效日期：{{ detail.legalValidDateBegin }} 至
+            {{ detail.legalValidDateEnd }}
+          </div>
+        </div>
+      </div>
+      <div>
+        <div class="tit">
+          <div>资质信息</div>
+        </div>
+        <div class="flex-start">
+          <div class="">经营范围：</div>
+          <div class="flex1">{{ detail.bizScope }}</div>
+        </div>
+        <div v-for="item in 4" :key="item" class="item">
+          <div class="flex-c fs12">
+            <div class="mr5">药品经营许可证</div>
+            <div class="c0D9078 cp" @click="refuse(7)">
+              <i class="el-icon-edit-outline"></i>拒绝原因
+            </div>
+          </div>
+          <div class="refuse-info">拒绝原因：{{ reasonRejection(7) }}</div>
+          <div class="img">
+            <el-image
+              src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
+              :preview-src-list="[
+                'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+              ]"
+            />
+          </div>
+          <div>有效日期：沙发沙发沙发沙发</div>
+        </div>
+      </div>
+    </div>
+    <history-dialog :hidden="historyDialogHidden" @close="historyDialogClose" />
+    <refuse-dialog ref="refuseDialog" @confirm="refuseConfirm" />
+    <footer>
+      <el-button type="primary" size="small" @click="confirm"
+        >审核通过</el-button
+      >
+      <el-button type="default" size="small" @click="handleClose"
+        >审核不通过</el-button
+      >
+    </footer>
+  </div>
+</template>
+<script>
+import { openLoading, closeLoading } from "../../utils/utils";
+import BreadCrumb from "@/components/breadcrumb.vue";
+import historyDialog from "./components/historyDialog.vue";
+import refuseDialog from "./components/refuseDialog.vue";
+
+import { getCertifyDetail, postCertifyAudit } from "@/utils/qualification";
+import Footer from "../layout/footer.vue";
+export default {
+  components: {
+    BreadCrumb,
+    historyDialog,
+    refuseDialog,
+    Footer,
+  },
+  filters: {},
+  computed: {
+    typeState() {
+      const reviewType = ["tobe-reviewed", "success-reviewed", "no-reviewed"];
+
+      return reviewType[this.$route.query.status];
+    },
+    typeStateText() {
+      const reviewType = ["待审核", "审核成功", "审核不通过"];
+
+      return reviewType[this.$route.query.status];
+    },
+  },
+  filters: {
+  },
+  data() {
+    return {
+      curmbFirst: "批发资质详情",
+      historyDialogHidden: false,
+      detail: {},
+      certifyValidDtoList: [], //认证审核校验描述
+      certifyLicenseImgList: [], //认证图片list：资质信息类
+      certifyReportImgList: [], //认证图片list 年度报告类
+    };
+  },
+  created() {
+    this.init();
+  },
+  methods: {
+    init() {
+      getCertifyDetail(this.id).then((res) => {
+        const {
+          certifyValidDtoList = [],
+          certifyLicenseImgList = [],
+          certifyReportImgList = [],
+        } = res.data;
+        console.log(this.certifyValidDtoList);
+        this.certifyValidDtoList = certifyValidDtoList;
+        this.certifyLicenseImgList = certifyLicenseImgList;
+        this.certifyReportImgList = certifyReportImgList;
+        this.detail = res.data;
+      });
+    },
+    showHistoryDialog() {
+      this.historyDialogHidden = true;
+    },
+    historyDialogClose() {
+      this.historyDialogHidden = false;
+    },
+    reasonRejection(type) {
+     const value = this.certifyValidDtoList.filter(v => {
+       return v.infoType === type
+      })[0] || {};
+      return value.refuseContent || '' ;
+    },
+    // copy
+    copyTxt(text) {
+      var type = "text/plain";
+      var blob = new Blob([text], { type });
+      var data = [new ClipboardItem({ [type]: blob })];
+      navigator.clipboard.write(data).then(
+        () => {
+          /* success */
+          this.$message.success("复制成功");
+        },
+        () => {
+          /* failure */
+          this.$message.error("复制失败");
+        }
+      );
+    },
+    confirm() {
+      const params = {
+        certificateInfoId:1,
+        certifyStatus:3,
+        certifyValidDtoList:this.certifyValidDtoList
+      }
+      if(this.certifyValidDtoList.length) {
+        this.$confirm("部分内容你已经标记拒绝，不可通过审核，请返回查看", "确认通过审核吗？", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning",
+        })
+          .then(() => {
+            console.log(document.querySelector('#body-content').scrollTop);
+            console.log(this.$refs.company.scrollHeight,document.scrollTop);
+            document.querySelector('#body-content').scrollTop = this.$refs.company.scrollHeight
+          })
+          .catch(() => {});
+        return;
+      }
+       this.$confirm('', "确认通过审核吗？", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning",
+        })
+          .then(() => {
+            postCertifyAudit(params).then(res => {
+              console.log(res);
+              document.querySelector('#body-content').scrollTop = 0;
+              this.init();
+            })
+          })
+          .catch(() => {});
+    },
+    handleClose() {
+       const params = {
+        certificateInfoId:1,
+        certifyStatus:4,
+        certifyValidDtoList:this.certifyValidDtoList
+      }
+      if(this.certifyValidDtoList.length) {
+        this.$confirm('', "确认通过审核不通过吗？", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning",
+        })
+        .then(() => {
+          document.body.scrollTop = 0;
+        })
+        .catch(() => {});
+        return;
+      }
+      this.$confirm('未检测到有标记拒绝原因的项目，请返回查看', "确认通过审核不通过吗？", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+        })
+        .catch(() => {});
+    },
+    refuseConfirm(params) {
+      console.log(params);
+      this.certifyValidDtoList.push(params)
+    },
+    refuse(type) {
+      console.log(type);
+      this.$refs.refuseDialog.show(type);
+      switch (type) {
+        case 1:
+          break;
+      }
+    },
+  },
+};
+</script>
+<style lang="scss" scope>
+.hr {
+  background-color: #dcdfe6;
+  position: relative;
+  display: block;
+  height: 1px;
+  width: 100%;
+  margin: 10px 0;
+}
+.mr5 {
+  margin-right: 5px;
+}
+.qualification-detail {
+  .qualification-content {
+    background: #fff;
+    padding: 10px;
+    .head {
+      .top {
+        display: flex;
+        align-items: center;
+        .name {
+          font-weight: bold;
+          font-size: 16px;
+        }
+        .type {
+          border: 1px solid #ccc;
+          padding: 2px 5px;
+          font-size: 14px;
+          border-radius: 5px;
+          margin: 0 5px;
+          &.tobe-reviewed {
+            color: #fac94d;
+            border: 1px solid #fac94d;
+          }
+          &.success-reviewed {
+            color: #71d60a;
+            border: 1px solid #71d60a;
+          }
+          &.no-reviewed {
+            color: #e2292a;
+            border: 1px solid #e2292a;
+          }
+        }
+        .history {
+          color: #0d9078;
+          font-size: 12px;
+        }
+      }
+      .bottom {
+        display: flex;
+        justify-content: space-between;
+      }
+    }
+  }
+  .company {
+    background-color: #fff;
+    margin: 10px 30px;
+    padding: 20px;
+    .c0D9078 {
+      margin-left: 5px;
+      font-size: 12px;
+    }
+    .info {
+      display: flex;
+      justify-content: space-between;
+      flex-wrap: nowrap;
+      line-height: 40px;
+      div {
+      }
+    }
+  }
+  .business {
+    background-color: #fff;
+    margin: 10px 30px;
+    padding: 20px;
+    font-size: 12px;
+    .img {
+      width: 80px;
+      height: 150px;
+    }
+    .item {
+      margin-bottom: 10px;
+    }
+    .flex-c {
+      margin-bottom: 10px;
+    }
+    .flex-start {
+      margin-bottom: 20px;
+    }
+  }
+  .tit {
+    display: flex;
+    align-items: center;
+    position: relative;
+    font-size: 16px;
+    margin-bottom: 20px;
+    > :first-child {
+      font-weight: bold;
+    }
+    &::before {
+      content: "";
+      width: 2px;
+      height: 70%;
+      position: absolute;
+      left: -5px;
+      background-color: #0d9078;
+    }
+  }
+  footer {
+    position: fixed;
+    bottom: 0;
+    right: 0;
+    background-color: #fff;
+    width: calc(100% - 255px);
+    text-align: right;
+    padding: 10px 20px;
+  }
+  .refuse-info {
+    font-size: 12px;
+    color: #e54543;
+  }
+}
+</style>

src/views/qualification/list.vue

+<template>
+  <div class="qualification-list">
+    <bread-crumb :curmbFirst="curmbFirst"></bread-crumb>
+    <div class="qualification-content screenSet" id="screenSet">
+      <el-form
+        ref="searchForm"
+        :model="searchForm"
+        label-width="100px"
+        label-suffix=":"
+        :inline="true"
+      >
+        <template v-if="$route.query.source === 'ghs'">
+          <el-form-item label="店铺名称">
+            <el-input
+              v-model="searchForm.storeNameStr"
+              size="small"
+              style="width: 200px"
+              placeholder="请输入店铺名称，用‘、’隔开"
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="管理员姓名">
+            <el-input
+              v-model="searchForm.adminNameStr"
+              size="small"
+              style="width: 220px"
+              placeholder="请输入管理员姓名，用‘、’隔开"
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="管理员手机号">
+            <el-input
+              v-model="searchForm.adminMobileStr"
+              size="small"
+              style="width: 220px"
+              placeholder="亲输入管理员手机号，用‘、’隔开"
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="企业类型">
+            <el-select
+              v-model="searchForm.orgType"
+              placeholder="请选择"
+              size="small"
+              clearable
+            >
+              <el-option
+                v-for="(item, index) in orgList"
+                :key="index"
+                :label="item.name"
+                :value="item.id"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+        </template>
+        <template v-if="$route.query.source === 'pf'">
+          <el-form-item label="医生ID">
+            <el-input
+              v-model="searchForm.doctorIdStr"
+              size="small"
+              style="width: 200px"
+              placeholder="请输入医生ID，用‘、’隔开"
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="医生姓名">
+            <el-input
+              v-model="searchForm.doctorNameStr"
+              size="small"
+              style="width: 200px"
+              placeholder="请输入医生姓名，用‘、’隔开"
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="企业名称">
+            <el-input
+              v-model="searchForm.orgNameStr"
+              size="small"
+              style="width: 200px"
+              placeholder="亲输入企业名称，用‘、’隔开"
+            ></el-input>
+          </el-form-item>
+        </template>
+        <!-- <el-form-item label="审核状态">
+          <el-select
+            v-model="searchForm.status"
+            placeholder="请选择"
+            size="small"
+          >
+            <el-option
+              v-for="(item, index) in statusList"
+              :key="index"
+              :label="item.name"
+              :value="item.id"
+            ></el-option>
+          </el-select>
+        </el-form-item> -->
+      </el-form>
+      <div class="form-btn">
+        <el-button type="primary" size="small" @click="submitForm"
+          >查询</el-button
+        >
+        <el-button type="default" size="small" @click="resetForm"
+          >重制</el-button
+        >
+      </div>
+    </div>
+    <div class="table">
+      <div class="tab">
+        <span
+          :class="{ checked: item.id === searchForm.status }"
+          v-for="item in tabList"
+          :key="item.id"
+          @click="checkTab(item)"
+          >{{ item.name }}</span
+        >
+      </div>
+      <el-table
+        :data="tableData"
+        align="left"
+        class="item-table"
+        style="width: 100%; margin-top: 10px"
+      >
+        <el-table-column
+          prop="id"
+          label="申请ID"
+          min-width="100"
+          align="center"
+        >
+          <template slot-scope="scope">
+            <span>{{ scope.row.id }}</span>
+          </template>
+        </el-table-column>
+        <template v-if="$route.query.source === 'ghs'">
+          <el-table-column
+            prop="storeName"
+            label="店铺名称"
+            min-width="100"
+            align="center"
+            show-overflow-tooltip
+          >
+            <template slot-scope="scope">
+              <span>{{ scope.row.storeName }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column
+            prop="adminName"
+            label="管理员姓名"
+            min-width="100"
+            align="center"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="adminMobile"
+            label="管理员手机号"
+            min-width="100"
+            align="center"
+          >
+          </el-table-column>
+        </template>
+        <template v-if="$route.query.source === 'pf'">
+          <el-table-column
+            prop="storeName"
+            label="医生ID"
+            min-width="100"
+            align="center"
+            show-overflow-tooltip
+          >
+            <template slot-scope="scope">
+              <span>{{ scope.row.storeName }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column
+            prop="applyName"
+            label="医生姓名"
+            min-width="100"
+            align="center"
+          >
+          </el-table-column>
+        </template>
+        <el-table-column
+          prop="orgName"
+          label="企业姓名"
+          min-width="100"
+          align="center"
+        >
+        </el-table-column>
+        <el-table-column
+          prop="orgType"
+          label="企业类型"
+          min-width="120"
+          align="center"
+        >
+          <template slot-scope="scope">
+            <span>{{ scope.row.orgType }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="status"
+          label="审核状态"
+          min-width="120"
+          align="center"
+        >
+          <template slot-scope="scope">
+            <span :class="scope.row.status | typeState">{{
+              scope.row.status | examineType
+            }}</span>
+            <el-tooltip
+              class="item"
+              effect="dark"
+              content="Top Left 提示文字"
+              placement="top-start"
+            >
+              <i class="el-icon-warning-outline no-reviewed"></i>
+            </el-tooltip>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="applyTime"
+          label="申请时间"
+          width="120"
+          align="center"
+        >
+        </el-table-column>
+        <el-table-column
+          prop="auditName"
+          label="审核人"
+          width="120"
+          align="center"
+        >
+        </el-table-column>
+        <el-table-column
+          prop="auditTime"
+          label="审核时间"
+          width="120"
+          align="center"
+        >
+        </el-table-column>
+        <el-table-column
+          label="操作"
+          min-width="230"
+          align="center"
+          fixed="right"
+        >
+          <template slot-scope="scope">
+            <div class="operation">
+              <el-button @click="editDetail(scope.row)" type="text" size="small"
+                >审核</el-button
+              >
+              <el-button @click="lookDetail(scope.row)" type="text" size="small"
+                >查看详情</el-button
+              >
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="pagination">
+        <el-pagination
+          background
+          @size-change="handleSizeChange"
+          @current-change="handleNumChange"
+          :current-page="searchForm.pageNo"
+          :page-sizes="[10, 30, 50, 100]"
+          :page-size="searchForm.pageSize"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="totalRows"
+        ></el-pagination>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { openLoading, closeLoading } from "../../utils/utils";
+import BreadCrumb from "@/components/breadcrumb.vue";
+import { getCertifyList } from "@/utils/qualification";
+export default {
+  components: {
+    BreadCrumb,
+  },
+  filters: {
+    examineType(type) {
+      const obj = {
+        0: "待审核",
+        1: "审核通过",
+        2: "审核不通过",
+      };
+      return obj[type];
+    },
+    typeState(type) {
+      const reviewType = ["tobe-reviewed", "success-reviewed", "no-reviewed"];
+
+      return reviewType[type];
+    },
+  },
+  data() {
+    return {
+      curmbFirst: "首营资质审核",
+      tabList: [
+        { id: 0, name: "全部" },
+        { id: 2, name: "待审核" },
+        { id: 3, name: "审核成功" },
+        { id: 4, name: "审核失败" },
+        { id: 5, name: "作废" },
+      ],
+      searchForm: {
+        adminMobileStr: "",
+        adminNameStr: "",
+        doctorIdStr: "",
+        doctorNameStr: "",
+        orgNameStr: "",
+        orgType: "",
+        pageNo: 1,
+        pageSize: 10,
+        status: 0,
+        storeNameStr: "",
+      },
+      orgList: [
+        { id: 1, name: "医疗机构(非营利性)" },
+        { id: 2, name: "医疗机构(营利性)" },
+        { id: 3, name: "零售-单体药店" },
+        { id: 4, name: "零售-连锁药店" },
+      ],
+      tableData: [
+        {
+          id: 1,
+          storeName: "11",
+          storeType: 2,
+          storeStatus: 2,
+          count: 2,
+          createdTime: 2,
+          commissionType: 2,
+        },
+      ],
+      pageNo: 1,
+      pageSize: 10,
+      totalRows: 0,
+    };
+  },
+  created() {
+    this.init();
+  },
+  methods: {
+    init() {
+      const params = {
+        pageSize: this.pageSize,
+        pageNo: this.pageNo,
+        type: Number(this.$route.query.type || 1),
+        ...this.searchForm,
+      };
+      getCertifyList(params).then((res) => {
+        console.log(res);
+        const { contentList, total } = res.data;
+        this.tableData = contentList;
+        this.totalRows = total;
+      });
+    },
+    submitForm() {
+      this.init();
+    },
+    editDetail() {
+      this.$router.push({path:'/qualification-detail',query:{source:this.$route.query.source}})
+
+    },
+    lookDetail() {},
+    resetForm() {
+      (this.searchForm = {
+        adminMobileStr: "",
+        adminNameStr: "",
+        doctorIdStr: "",
+        doctorNameStr: "",
+        orgNameStr: "",
+        orgType: "",
+        pageNo: this.pageNo,
+        pageSize: this.pageSize,
+        status: this.searchForm.status,
+        storeNameStr: "",
+      }),
+        this.init();
+    },
+    handleSizeChange(value) {
+      this.pageSize = value;
+      this.pageNo = 1;
+      this.init();
+    },
+    handleNumChange(value) {
+      this.pageNo = value;
+      this.init();
+    },
+    checkTab(item) {
+      this.searchForm.status = item.id;
+      this.init();
+    },
+  },
+};
+</script>
+<style lang="scss" scope>
+.qualification-list {
+  .qualification-content {
+    background: #fff;
+    padding: 10px;
+  }
+  .form-btn {
+    text-align: right;
+  }
+  .table {
+    background-color: #fff;
+    margin: 10px 30px;
+    padding: 20px;
+    .tobe-reviewed {
+      color: #fac94d;
+    }
+    .success-reviewed {
+      color: #71d60a;
+    }
+    .no-reviewed {
+      color: #e2292a;
+    }
+    .tab {
+      span {
+        font-weight: bold;
+        font-size: 18px;
+        margin-right: 30px;
+        cursor: pointer;
+        &.checked {
+          color: #0d9078;
+        }
+      }
+    }
+    .operation {
+      span {
+        color: #0d9078;
+      }
+    }
+  }
+}
+</style>