feature: 审核详情页UI完成

fe/app/op-management/src/main.js

-import { createApp } from 'vue';
-import App from './App.vue';
-import router from './router';
-import store from './store';
-import ElementPlus from 'element-plus';
+import { createApp } from "vue";
+import App from "./App.vue";
+import router from "./router";
+import store from "./store";
+import ElementPlus from "element-plus";
+import { ElMessage } from "element-plus";
 
 // import './assets/styles/index.scss';
-import 'element-plus/lib/theme-chalk/index.css';
-import 'dayjs/locale/zh-cn';
-import locale from 'element-plus/lib/locale/lang/zh-cn';
+import "element-plus/lib/theme-chalk/index.css";
+import "dayjs/locale/zh-cn";
+import locale from "element-plus/lib/locale/lang/zh-cn";
+
+createApp().config.globalProperties.$message = ElMessage;
 
 createApp(App)
   .use(router)
   .use(store)
   .use(ElementPlus, { locale })
-  .mount('#app');
+  .mount("#app");

fe/app/op-management/src/pages/Enterprise/Audit/index.css

@@ -5,5 +5,13 @@
   margin: 20px 0;
 }
 .audit .audit_area {
-  margin-bottom: 20px;
+  margin: 20px 0;
+}
+.audit .button_area {
+  margin-top: 20px;
+  display: flex;
+  justify-content: center;
+}
+.mgtb20 {
+  margin: 20px 0;
 }

fe/app/op-management/src/pages/Enterprise/Audit/index.less

@@ -4,6 +4,14 @@
     margin: 20px 0;
   }
   .audit_area{
-    margin-bottom: 20px;
+    margin: 20px 0;
+  }
+  .button_area{
+    margin-top: 20px;
+    display: flex;
+    justify-content: center;
   }
+}
+.mgtb20{
+  margin: 20px 0;
 }
\ No newline at end of file

fe/app/op-management/src/pages/Enterprise/Audit/index.vue

@@ -64,7 +64,10 @@
 
     <el-card class="submit_area">
       <h4 style="margin-bottom:20px;">提交信息</h4>
-      <el-table :data="submitList">
+      <el-table
+        :data="submitList"
+        border
+      >
         <el-table-column
           align="center"
           label="提交类型"
@@ -83,13 +86,68 @@
       </el-table>
     </el-card>
 
-    <el-card class="audit_area">
-      <h4 style="margin-bottom:20px;">审核区域</h4>
+    <el-card class="history_area">
+      <h4 style="margin-bottom:20px;">提交历史</h4>
 
+      <el-table
+        :data="historyList"
+        border
+      >
+        <el-table-column
+          align="center"
+          label="提交审核时间"
+          prop="subDate"
+        ></el-table-column>
+        <el-table-column
+          align="center"
+          label="提交人"
+          prop="author"
+        ></el-table-column>
+        <el-table-column
+          align="center"
+          label="审核时间"
+          prop="auditDate"
+        ></el-table-column>
+        <el-table-column
+          align="center"
+          label="审核人"
+          prop="auditer"
+        ></el-table-column>
+        <el-table-column
+          align="center"
+          label="审核状态"
+          prop="status"
+        ></el-table-column>
+        <el-table-column
+          align="center"
+          label="审核意见"
+          prop="address"
+        ></el-table-column>
+      </el-table>
     </el-card>
 
-    <el-card class="history_area">
-      <h4 style="margin-bottom:20px;">提交历史</h4>
+    <el-card
+      class="audit_area"
+      v-if="pageStatus === 'AUDIT'"
+    >
+      <h4 style="margin-bottom:20px;">审核区域</h4>
+      <h5 class="mgtb20">审核意见</h5>
+      <textarea
+        style="width:100%;border-radius:10px;padding:10px"
+        placeholder="请输入审核意见"
+        id=""
+        v-model="opinionArea"
+        rows="5"
+        @input="opinionChange"
+      ></textarea>
+      <h5 class="mgtb20">审核结果</h5>
+      <div class="button_area">
+        <el-button type="primary">通过</el-button>
+        <el-button
+          type="danger"
+          @click="auditRefuse"
+        >拒绝</el-button>
+      </div>
     </el-card>
   </div>
 </template>
@@ -98,28 +156,73 @@
 
 <script>
 export default {
+  beforeRouteEnter (to, from, next) {
+    to.params.pageStatus && to.params.auditId
+      ? next()
+      : next({ name: "Certification" });
+  },
+
+  created () {
+    const { pageStatus, auditId } = this.$route.params;
+    this.pageStatus = pageStatus;
+    this.auditId = auditId;
+    console.log(this.pageStatus, this.auditId);
+  },
+
   data () {
     return {
+      pageStatus: null, // 哪个按钮进入
+      auditId: null, // 传入的企业id
+
+      // 审核-企业信息
       messageList: [
         {
           status: 1,
           id: 1221,
-          name: '一点资讯',
+          name: "一点资讯",
           code: 1221,
-          picture: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2F1812.img.pp.sohu.com.cn%2Fimages%2Fblog%2F2009%2F11%2F18%2F18%2F8%2F125b6560a6ag214.jpg&refer=http%3A%2F%2F1812.img.pp.sohu.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1624586640&t=b27aa012d8ca07eb9ab800ea43c5b218',
-          userName: '蒙文昊',
+          picture:
+            "https://gimg2.baidu.com/image_search/src=http%3A%2F%2F1812.img.pp.sohu.com.cn%2Fimages%2Fblog%2F2009%2F11%2F18%2F18%2F8%2F125b6560a6ag214.jpg&refer=http%3A%2F%2F1812.img.pp.sohu.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1624586640&t=b27aa012d8ca07eb9ab800ea43c5b218",
+          userName: "蒙文昊",
           idNumber: 1232131,
-          idPicture: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2F2c.zol-img.com.cn%2Fproduct%2F124_500x2000%2F748%2FceZOdKgDAFsq2.jpg&refer=http%3A%2F%2F2c.zol-img.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1624586640&t=a1036d947c1c60f17b178a52d1f8c3f7'
+          idPicture:
+            "https://gimg2.baidu.com/image_search/src=http%3A%2F%2F2c.zol-img.com.cn%2Fproduct%2F124_500x2000%2F748%2FceZOdKgDAFsq2.jpg&refer=http%3A%2F%2F2c.zol-img.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1624586640&t=a1036d947c1c60f17b178a52d1f8c3f7"
         }
       ],
+
+      // 审核-提交信息
       submitList: [
         {
           type: 1,
-          date: '2021-05-26',
+          date: "2021-05-26",
           account: 492148618
         }
-      ]
+      ],
+
+      // 审核-提交历史
+      historyList: [
+        {
+          subDate: "2021-05-26",
+          author: "蒙文昊",
+          auditDate: "2021-05-26",
+          auditer: "蒙文昊",
+          status: 1,
+          address: "请求通过,可以提交审核"
+        }
+      ],
+
+      // 审核-审核意见
+      opinionArea: ""
     };
+  },
+
+  methods: {
+    opinionChange () { },
+
+    // 审核-拒绝审核
+    auditRefuse () {
+      if (this.opinionArea === "") return this.$message.error('请填写拒绝原因');
+    }
   }
 };
 </script>

fe/app/op-management/src/pages/Enterprise/Certification/index.vue

@@ -140,17 +140,17 @@
             <el-button
               size="mini"
               type="primary"
-              @click="goAuditPage(scope.row)"
+              @click="goAuditPage('AUDIT',scope.row.id)"
             >审核</el-button>
             <el-button
               size="mini"
               type="success"
-              @click="handleClick(scope.row)"
+              @click="goAuditPage('EDIT',scope.row.id)"
             >修改提交</el-button>
             <el-button
               size="mini"
               type="warning"
-              @click="handleClick(scope.row)"
+              @click="goAuditPage('DETAIL',scope.row.id)"
             >查看详情</el-button>
           </template>
         </el-table-column>
@@ -202,26 +202,27 @@ export default {
     };
   },
 
-  created () {
-  },
+  created () { },
 
   methods: {
     // 获取商户认证检查信息
 
-
     // 重置表单
     resetForm (formName) {
       this.$refs[formName].resetFields();
     },
 
     // 跳转到审核页面
-    goAuditPage (params) {
-      this.$router.push({ name: "Audit", params });
-    },
-
-    // 点击跳转页面
-    handleClick (params) {
-      console.log(params.id);
+    goAuditPage (pageStatus, auditId) {
+      this.$router.push(
+        {
+          name: "Audit",
+          params: {
+            pageStatus,
+            auditId
+          }
+        }
+      );
     }
   }
 };

fe/app/op-management/src/router/index.js

@@ -14,7 +14,7 @@ const routes = [
   },
   {
     path: '/enterprise/certification',
-    name: 'Enterprise',
+    name: 'Certification',
     component: () => import(/* webpackChunkName: "enterprise" */ '../pages/Enterprise/Certification')
   },
   {

fe/app/op-management/src/utils/request.js

@@ -80,7 +80,7 @@ instance.interceptors.response.use(
       return Promise.reject({ code, msg });
     }
     if (data.message) {
-      Message({
+      ElMessage({
         message: data.reason,
         type: "info",
         showClose: true