feat: 企业认证管理页UI完成

fe/app/op-management/src/components/PageHeader/config.js

@@ -9,6 +9,10 @@ const headerConfig = {
     {
       path: '/about',
       name: '关于'
+    },
+    {
+      path: '/enterprise/certification',
+      name: '企业认证管理'
     }
   ],
   // miscellaneous: {

fe/app/op-management/src/components/PageHeader/index.vue

@@ -4,7 +4,7 @@
     <el-menu
       class="el-menu-demo"
       mode="horizontal"
-      router=true
+      router
       @select="handleSelect"
       background-color="#545c64"
       text-color="#fff"
@@ -20,6 +20,12 @@
         {{ item.name }}
         <!-- <router-link :to="item.path" class="menu-router">{{ item.name }}</router-link> -->
       </el-menu-item>
+
+      <el-button
+        type="primary"
+        class="setUp"
+        @click="goEstablish"
+      >企业信息提交</el-button>
     </el-menu>
   </div>
 </template>
@@ -30,7 +36,7 @@ const { menuItems } = headerConfig;
 
 export default {
   name: "PageHeader",
-  data() {
+  data () {
     return {
       menuItems,
       activeMenu: "",
@@ -38,17 +44,28 @@ export default {
     };
   },
   methods: {
-    handleSelect(path) {
+    handleSelect (path) {
       this.activeMenu = path;
     },
+
+    // 跳转到企业信息提交
+    goEstablish () {
+      this.$router.push({ name: 'Establish' })
+    }
   },
 };
 </script>
 
 <style lang="less">
-  .menu-router {
-    display: inline-block;
-    line-height: 60px;
-    width: 100%;
-  }
+.menu-router {
+  display: inline-block;
+  line-height: 60px;
+  width: 100%;
+  position: relative;
+}
+.setUp {
+  position: absolute;
+  right: 0;
+  transform: translate(-50%, 25%);
+}
 </style>

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

+.audit {
+  padding: 50px;
+}
+.audit .submit_area {
+  margin: 20px 0;
+}
+.audit .audit_area {
+  margin-bottom: 20px;
+}

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

+.audit{
+  padding: 50px;
+  .submit_area{
+    margin: 20px 0;
+  }
+  .audit_area{
+    margin-bottom: 20px;
+  }
+}
\ No newline at end of file

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

+<template>
+  <div class="audit">
+    <el-card class="message_area">
+      <h4 style="margin-bottom:20px;">企业信息</h4>
+      <el-table
+        border
+        :data="messageList"
+      >
+        <el-table-column
+          align="center"
+          label="审核状态"
+          prop="status"
+        ></el-table-column>
+        <el-table-column
+          align="center"
+          label="企业ID"
+          prop="id"
+        ></el-table-column>
+        <el-table-column
+          align="center"
+          label="企业注册名称"
+          prop="name"
+        ></el-table-column>
+        <el-table-column
+          align="center"
+          label="注册码"
+          prop="code"
+        ></el-table-column>
+        <el-table-column
+          align="center"
+          label="企业营业执照照片"
+          prop="picture"
+        >
+          <template #default="scope">
+            <el-image
+              fit="fill"
+              :src="scope.row.picture"
+            ></el-image>
+          </template>
+        </el-table-column>
+        <el-table-column
+          align="center"
+          label="法人或经营者姓名"
+          prop="userName"
+        ></el-table-column>
+        <el-table-column
+          align="center"
+          label="法人或经营者身份证号"
+          prop="idNumber"
+        ></el-table-column>
+        <el-table-column
+          align="center"
+          label="身份证照片"
+        >
+          <template #default="scope">
+            <el-image
+              :src="scope.row.idPicture"
+              fit="fill"
+            ></el-image>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
+
+    <el-card class="submit_area">
+      <h4 style="margin-bottom:20px;">提交信息</h4>
+      <el-table :data="submitList">
+        <el-table-column
+          align="center"
+          label="提交类型"
+          prop="type"
+        ></el-table-column>
+        <el-table-column
+          align="center"
+          label="提交时间"
+          prop="date"
+        ></el-table-column>
+        <el-table-column
+          align="center"
+          label="提交人账号"
+          prop="account"
+        ></el-table-column>
+      </el-table>
+    </el-card>
+
+    <el-card class="audit_area">
+      <h4 style="margin-bottom:20px;">审核区域</h4>
+
+    </el-card>
+
+    <el-card class="history_area">
+      <h4 style="margin-bottom:20px;">提交历史</h4>
+    </el-card>
+  </div>
+</template>
+
+<style lang="less" src="./index.less"></style>
+
+<script>
+export default {
+  data () {
+    return {
+      messageList: [
+        {
+          status: 1,
+          id: 1221,
+          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: '蒙文昊',
+          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'
+        }
+      ],
+      submitList: [
+        {
+          type: 1,
+          date: '2021-05-26',
+          account: 492148618
+        }
+      ]
+    };
+  }
+};
+</script>

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

+.enterprise_card {
+  padding: 50px;
+}
+.enterprise_card .enterprise_form {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+.enterprise_card .enterprise_form .formItem {
+  display: flex;
+  justify-content: space-between;
+}
+.enterprise_card .enterprise_form .formButton {
+  display: flex;
+  justify-content: flex-end;
+}
+.enterprise_card .enterprise_form .formButton .inquire {
+  margin-right: 10px;
+}

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

+.enterprise_card{
+  padding: 50px;
+  .enterprise_form{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    .formItem{
+      display: flex;
+      justify-content: space-between;
+    }
+    .formButton{
+      display: flex;
+      justify-content: flex-end;
+      .inquire{
+        margin-right: 10px;
+      }
+    }
+  }
+}
\ No newline at end of file

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

+<template>
+  <div>
+    <el-card class="enterprise_card">
+      <!-- 企业认证筛选 -->
+      <el-form
+        ref="enterpriseForm"
+        class="enterprise_form"
+        :model="enterpriseForm"
+        inline
+      >
+        <!-- 查询信息区域 -->
+        <div class="formItem">
+          <el-form-item
+            label="企业注册名称："
+            prop="name"
+          >
+            <el-input v-model="enterpriseForm.name"></el-input>
+          </el-form-item>
+          <el-form-item
+            label="注册码："
+            prop="code"
+          >
+            <el-input v-model="enterpriseForm.code"></el-input>
+          </el-form-item>
+          <el-form-item
+            label="法人或经营者姓名："
+            prop="userName"
+          >
+            <el-input v-model="enterpriseForm.userName"></el-input>
+          </el-form-item>
+          <el-form-item
+            label="审核状态："
+            prop="statusValue"
+          >
+            <el-select
+              placeholder="请选择审核状态"
+              v-model="enterpriseForm.statusValue"
+            >
+              <el-option
+                v-for="item in enterpriseForm.statusOptions"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item
+            label="提交类型："
+            prop="typeValue"
+          >
+            <el-select
+              v-model="enterpriseForm.typeValue"
+              placeholder="请选择提交类型"
+            >
+              <el-option
+                v-for="item in enterpriseForm.typeOptions"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item
+            label="提交人账号："
+            prop="number"
+          >
+            <el-input
+              type="number"
+              v-model="enterpriseForm.number"
+            ></el-input>
+          </el-form-item>
+        </div>
+        <!-- 按钮区域 -->
+        <div class="formButton">
+          <el-form-item>
+            <el-button
+              type="primary"
+              class="inquire"
+            >查询</el-button>
+          </el-form-item>
+          <el-form-item>
+            <el-button @click="resetForm('enterpriseForm')">重置</el-button>
+          </el-form-item>
+        </div>
+      </el-form>
+
+      <!-- 展示列表 -->
+      <el-table
+        stripe
+        style="width:100%"
+        :data="enterpriseList"
+        border
+      >
+        <el-table-column
+          label="ID"
+          prop="id"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          label="审核状态"
+          prop="status"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          label="企业注册名称"
+          prop="name"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          label="注册码"
+          prop="code"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          label="法人或经营者姓名"
+          prop="userName"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          label="提交日期"
+          prop="date"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          label="提交类型"
+          prop="type"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          label="提交人账号"
+          prop="number"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          label="操作"
+          width="280"
+          align="center"
+        >
+          <template #default="scope">
+            <el-button
+              size="mini"
+              type="primary"
+              @click="goAuditPage(scope.row)"
+            >审核</el-button>
+            <el-button
+              size="mini"
+              type="success"
+              @click="handleClick(scope.row)"
+            >修改提交</el-button>
+            <el-button
+              size="mini"
+              type="warning"
+              @click="handleClick(scope.row)"
+            >查看详情</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
+  </div>
+</template>
+
+<style lang="less" src="./index.less"></style>
+
+<script>
+export default {
+  data () {
+    return {
+      // 表单数据
+      enterpriseForm: {
+        name: "",
+        code: "",
+        userName: "",
+        status: "",
+        type: "",
+        number: "",
+        statusOptions: [
+          { value: 1, label: "待审核" },
+          { value: 2, label: "通过" },
+          { value: 3, label: "拒绝" }
+        ],
+        statusValue: "",
+        typeOptions: [
+          { value: 1, label: "生活圈c端" },
+          { value: 2, label: "销售端b端" },
+          { value: 3, label: "内部代提交" }
+        ]
+      },
+
+      // 表格信息
+      enterpriseList: [
+        {
+          id: 1,
+          status: 1,
+          code: 1,
+          name: "一点资讯",
+          userName: "蒙文昊",
+          date: "2021-05-24",
+          type: 1,
+          number: 18147683288
+        }
+      ]
+    };
+  },
+
+  created () {
+  },
+
+  methods: {
+    // 获取商户认证检查信息
+
+
+    // 重置表单
+    resetForm (formName) {
+      this.$refs[formName].resetFields();
+    },
+
+    // 跳转到审核页面
+    goAuditPage (params) {
+      this.$router.push({ name: "Audit", params });
+    },
+
+    // 点击跳转页面
+    handleClick (params) {
+      console.log(params.id);
+    }
+  }
+};
+</script>

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

+.establish {
+  padding: 50px;
+}

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

+.establish{
+  padding: 50px;
+}
\ No newline at end of file

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

+<template>
+  <div class="establish">
+    <el-form
+      :rules="establish_rules"
+      label-width="240px"
+      ref="establish_form"
+      :model="establishForm"
+    >
+      <el-form-item
+        label="营业执照："
+        :rules="[
+          { required: true, message: '请上传营业执照', trigger: 'change' }
+        ]"
+      >
+        <el-upload
+          action=""
+          ref="licenseChange"
+          multiple
+          show-file-list
+          :limit="4"
+          :auto-upload="false"
+          :http-request="onLicenseUpload"
+          :file-list="establishForm.licenseList"
+          :on-change="onLicenseChange"
+          :on-remove="onLicenseRemove"
+        >
+          <el-button
+            size="small"
+            type="primary"
+          >点击上传</el-button>
+        </el-upload>
+      </el-form-item>
+
+      <el-form-item
+        label="企业注册名称："
+        prop="registeredName"
+        :rules="[{ required: true, message: '请输入企业注册名称' }]"
+      >
+        <el-input v-model="establishForm.registeredName"></el-input>
+      </el-form-item>
+
+      <el-form-item
+        label="统一社会信用代码（注册码）："
+        prop="registrationCode"
+        :rules="[
+          { required: true, message: '请输入统一社会信用代码（注册码）' }
+        ]"
+      >
+        <el-input v-model="establishForm.registrationCode"></el-input>
+      </el-form-item>
+      <el-form-item
+        label="经营者（法人）身份证照片："
+        :rules="[{ required: true, message: '请上传经营者（法人）身份证照片' }]"
+      >
+        <el-upload
+          action=""
+          ref="licenseChange"
+          multiple
+          show-file-list
+          :limit="4"
+          :auto-upload="false"
+          :http-request="onLicenseUpload"
+          :file-list="establishForm.licenseList"
+          :on-change="onLicenseChange"
+        >
+          <el-button
+            size="small"
+            type="primary"
+          >点击上传</el-button>
+        </el-upload>
+      </el-form-item>
+
+      <el-form-item
+        label="经营者（法人）姓名："
+        prop="legalName"
+        :rules="[{ required: true, message: '请输入经营者（法人）姓名' }]"
+      >
+        <el-input v-model="establishForm.legalName"></el-input>
+      </el-form-item>
+
+      <el-form-item
+        label="经营者（法人）身份证号："
+        prop="idcardNumber"
+        :rules="[
+          { required: true, message: '请输入经营者（法人）身份证号' },
+          { type: 'number', message: '身份证号必须为数字' }
+        ]"
+      >
+        <el-input v-model.number="establishForm.idcardNumber"></el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="handelCancel('establish_form')">取消</el-button>
+        <el-button
+          @click="handelSubmit('establish_form')"
+          type="primary"
+        >提交审核</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<style lang="less" src="./index.less"></style>
+
+<script>
+export default {
+  data () {
+    return {
+      // 表单输入项
+      establishForm: {
+        licenseList: [],// 营业执照
+        registeredName: "", // 注册名称
+        registrationCode: "", // 注册码
+        idcardPhoto: [], // 身份证照片
+        legalName: "", // 法人姓名
+        idcardNumber: "" // 法人身份证号
+      },
+
+      // 表单校验规则
+      establish_rules: {
+        legal_name: [
+          {
+            required: true,
+            message: "请输入经营者（法人）姓名",
+            trigger: "blur"
+          }
+        ],
+        idcard_number: [
+          {
+            required: true,
+            message: "请输入经营者（法人）身份证号",
+            trigger: "blur"
+          }
+        ]
+      }
+    };
+  },
+
+  methods: {
+    // 上传执照更改
+    onLicenseUpload (file) {
+      console.log("file:", file);
+    },
+
+    // 执照列表更改时
+    onLicenseChange (file, fileList) {
+      console.log('file:', file);
+      console.log('fileList:', fileList);
+      this.establishForm.licenseList = fileList
+      console.log('licenseList', this.establishForm.licenseList);
+    },
+
+    // 取消选择执照
+    onLicenseRemove (file, fileList) {
+      console.log('file', file);
+      console.log('fileList', fileList);
+      this.establishForm.licenseList = fileList
+      console.log('licenseList', this.establishForm.licenseList);
+    },
+
+    // 取消创建表单
+    handelCancel () {
+      this.$router.go(-1);
+    },
+
+    // 提交表单
+    handelSubmit (formName) {
+      this.$refs[formName].validate(valid => {
+        console.log(valid);
+      });
+    }
+  }
+};
+</script>

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

@@ -12,6 +12,21 @@ const routes = [
     name: 'About',
     component: () => import(/* webpackChunkName: "about" */ '../pages/About'),
   },
+  {
+    path: '/enterprise/certification',
+    name: 'Enterprise',
+    component: () => import(/* webpackChunkName: "enterprise" */ '../pages/Enterprise/Certification')
+  },
+  {
+    path: '/enterprise/audit',
+    name: 'Audit',
+    component: () => import(/* webpackChunkName: "enterprise" */ '../pages/Enterprise/Audit')
+  },
+  {
+    path: '/enterprise/establish',
+    name: 'Establish',
+    component: () => import(/* webpackChunkName: "enterprise" */ '../pages/Enterprise/Establish')
+  }
 ];
 
 const router = createRouter({

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

 /**
  * axios封装
  */
-import axios from 'axios';
-import { ElMessage } from 'element-plus';
-import { setToken, formatDate } from '/@/libs/utils';
-import { APP_URI } from '../config/app.config';
-import config from '/@/config';
-import router from '/@/router';
-import md5 from 'js-md5';
+import axios from "axios";
+import { ElMessage } from "element-plus";
+// import { APP_URI } from "../config/app.config";
 
 /**
  * show error tip
  * @param mgs
  */
-const showErrorMessage = (mgs) => {
+const showErrorMessage = mgs => {
   ElMessage({
     message: mgs,
-    type: 'error',
+    type: "error",
     showClose: true
   });
 };
@@ -25,7 +21,7 @@ const showErrorMessage = (mgs) => {
  * default axios config
  */
 export const defaultConfig = {
-  baseURL: APP_URI,
+  // baseURL: APP_URI,
   timeout: 10000
   // baseURL: '/',
 };
@@ -34,8 +30,8 @@ export const defaultConfig = {
  * default params
  * @returns {}
  */
-const getDefaultParams = () => {};
-const getDefaultHeaders = () => {};
+const getDefaultParams = () => { };
+const getDefaultHeaders = () => { };
 
 /**
  * axios instance
@@ -50,18 +46,18 @@ instance.interceptors.request.use(
   function (config) {
     // network error
     if (navigator.onLine !== undefined && navigator.onLine === false) {
-      return Promise.reject({ message: '网络未链接', code: -1 });
+      return Promise.reject({ message: "网络未链接", code: -1 });
     }
 
     /**
      * merge headers
      */
-    config.headers = {...getDefaultHeaders(), ...config.headers}
+    config.headers = { ...getDefaultHeaders(), ...config.headers };
 
     /**
      * merge params
-    */
-    config.params = { ...getDefaultParams(), ...config.params }
+     */
+    config.params = { ...getDefaultParams(), ...config.params };
 
     return config;
   },
@@ -79,21 +75,21 @@ instance.interceptors.response.use(
     const { data = {} } = response;
     const code = data.code ?? -1;
     if (code !== 0) {
-      const msg = data.reason || '未定义错误';
+      const msg = data.reason || "未定义错误";
       showErrorMessage(data.reason);
       return Promise.reject({ code, msg });
     }
     if (data.message) {
       Message({
         message: data.reason,
-        type: 'info',
+        type: "info",
         showClose: true
       });
     }
     return data;
   },
   function (error) {
-    if (!(error.code && error.code === -1)) error.message = '接口请求错误';
+    if (!(error.code && error.code === -1)) error.message = "接口请求错误";
     showErrorMessage(error.message);
     return Promise.reject(error);
   }
@@ -107,7 +103,7 @@ instance.interceptors.response.use(
 export const get = (url, params) => {
   return instance.request({
     url,
-    method: 'get',
+    method: "get",
     params
   });
 };
@@ -120,7 +116,7 @@ export const get = (url, params) => {
 export const post = (url, data) => {
   return instance.request({
     url,
-    method: 'post',
+    method: "post",
     data
   });
 };