feat(AppAuthManage): 新增认证审核功能

- 添加认证审核列表和详细页面组件
- 实现认证材料上传和审核功能
- 优化页面布局和样式
- 增加审核状态和备注说明功能

project/xumu/AppAuthManage/AppAuthManage.vue

@@ -1,7 +1,14 @@
 <script>
 import authAdd from "./authAdd.vue";
 import authList from "./authList.vue";
-
+const certificates = [
+  {label: "身份证(正面)", prop: "frontCard"},
+  {label: "身份证(反面)", prop: "reverseCard"},
+  {label: "营业执照", prop: "businessPic", permit: ["breed"]},
+  {label: "畜禽经营许可证", prop: "breedPic", permit: ["breed"]},
+  {label: "动物防疫条件许可证", prop: "prevention", permit: ["breed"]},
+  {label: "组织机构证明", prop: "orgPic", permit: ["bank", "insurance"]},
+]
 export default {
   name: "AppAuthManage",
   label: "认证审核",
@@ -16,6 +23,11 @@ export default {
       return hash == "#add" ? authAdd : authList
     }
   },
+  data(){
+    return {
+      certificates
+    }
+  }
 }
 </script>
 

project/xumu/AppAuthManage/authAdd.vue

@@ -1,41 +1,55 @@
 <script>
-import AiUploader from "dui/packages/basic/AiUploader.vue";
 
-const certificates = [
-  {label: "身份证(正面)", prop: "frontCard"},
-  {label: "身份证(反面)", prop: "reverseCard"},
-  {label: "营业执照", prop: "businessPic", permit: ["breed"]},
-  {label: "畜禽经营许可证", prop: "breedPic", permit: ["breed"]},
-  {label: "动物防疫条件许可证", prop: "prevention", permit: ["breed"]},
-  {label: "组织机构证明", prop: "orgPic", permit: ["bank", "insurance"]},
-]
 export default {
   name: "authAdd",
-  components: {AiUploader},
   props: {
     instance: Function,
-    permissions: Function
+    permissions: Function,
+    dict: Object
   },
   data() {
     return {
-      certificates,
       detail: {},
     }
   },
+  computed: {
+    isAuditing: v => v.detail.auditStatus == 1
+  },
   methods: {
+    back(params = {}) {
+      this.$router.push(params)
+    },
     getDetail() {
       const {id} = this.$route.query
       this.instance.post("/api/user/auth/page", null, {params: {id}}).then(res => {
-        if (res?.data) {
+        if (res?.data?.records) {
-          this.detail = res.data|| {}
+          const detail = res.data.records[0] || {}
+          let {picture = "{}"} = detail
+          picture = JSON.parse(picture)
+          this.detail = {...detail, ...picture}
         }
       })
     },
     getNeedCerts(type) {
-      return certificates.filter(e => !e.permit || e.permit.includes(type))
+      return this.$parent.certificates.filter(e => !e.permit || e.permit.includes(type))
     },
+    handleAudit(auditStatus) {
+      const auditLabels = {
+        2: "同意通过", 3: "驳回"
+      }
+      this.$confirm(`是否要${auditLabels[auditStatus]}认证?`).then(() => {
+        this.instance.post("/api/user/audit", null, {params:{
+            id: this.detail.id, auditStatus
+          }}).then(res => {
+          if (res?.code == 0) {
+            this.$confirm("是否要返回列表？","提交成功").then(() => this.back())
+          }
+        })
+      })
+    }
   },
   created() {
+    this.dict.load("auditStatus")
     this.getDetail()
   }
 }
@@ -43,16 +57,25 @@ export default {
 
 <template>
   <ai-page title="认证材料" class="authAdd" showBack content-string="detail">
-    <el-form size="small">
+    <el-form size="small" label-position="top" :model="detail" ref="detail">
       <ai-card title="认证材料">
         <div class="grid">
           <el-form-item v-for="(op,i) in getNeedCerts(detail.type)" :key="i" v-bind="op" :rules="{required:true,message:`请上传${op.label}`,trigger:'change'}">
-            <el-image v-model="detail[op.prop]" :preview-src-list="[detail[op.prop]]"/>
+            <el-image :src="detail[op.prop]" :preview-src-list="[detail[op.prop]]"/>
           </el-form-item>
         </div>
       </ai-card>
-      <ai-card title="审核意见"></ai-card>
+      <ai-card title="备注说明">
+        <div v-text="detail.remark"/>
+      </ai-card>
     </el-form>
+    <div slot="footer">
+      <template v-if="isAuditing">
+        <el-button type="primary" @click="handleAudit(2)">同意</el-button>
+        <el-button type="danger" @click="handleAudit(3)">拒绝</el-button>
+      </template>
+      <el-button @click="back">关闭</el-button>
+    </div>
   </ai-page>
 </template>
 

project/xumu/AppAuthManage/authList.vue

@@ -1,5 +1,7 @@
 <script>
 
+import AiSelect from "dui/packages/basic/AiSelect.vue";
+
 const columns = [
   {label: "序号", type: "index"},
   {label: "账号", prop: "userName"},
@@ -9,16 +11,9 @@ const columns = [
   {label: "状态", prop: "authStatus", dict: "authStatus", width: 120, align: 'center'},
   {label: "审核状态", prop: "auditStatus", dict: "auditStatus", width: 120, align: 'center'},
 ]
-const certificates = [
-  {label: "身份证(正面)", prop: "frontCard"},
-  {label: "身份证(反面)", prop: "reverseCard"},
-  {label: "营业执照", prop: "businessPic", permit: ["breed"]},
-  {label: "畜禽经营许可证", prop: "breedPic", permit: ["breed"]},
-  {label: "动物防疫条件许可证", prop: "prevention", permit: ["breed"]},
-  {label: "组织机构证明", prop: "orgPic", permit: ["bank", "insurance"]},
-]
 export default {
   name: "authList",
+  components: {AiSelect},
   props: {
     instance: Function,
     dict: Object,
@@ -46,11 +41,19 @@ export default {
       })
     },
     getNeedCerts(type) {
-      return certificates.filter(e => !e.permit || e.permit.includes(type))
+      return this.$parent.certificates.filter(e => !e.permit || e.permit.includes(type))
     },
     handleConfirm() {
       this.$refs.form.validate().then(() => {
-        this.instance.post("/api/user/auth/update", this.form).then(res => {
+        const {id, remark} = this.form, picture = {}
+        this.$parent.certificates.forEach(e => {
+          picture[e.prop] = this.form[e.prop]
+        })
+        this.instance.post("/api/user/savePicture", null, {
+          params: {
+            id, remark, picture: JSON.stringify(picture)
+          }
+        }).then(res => {
           if (res?.code == '0' && res?.data != 1) {
             this.dialog = false
             this.$message.success("提交成功!")
@@ -58,6 +61,12 @@ export default {
           }
         })
       })
+    },
+    handleUploadPics(row = {}) {
+      let {id, type, remark, picture = "{}"} = row
+      picture = JSON.parse(picture)
+      this.form = {id, type, remark, ...picture}
+      this.dialog = true
     }
   },
   created() {
@@ -71,7 +80,8 @@ export default {
   <ai-page class="authList" title="认证审核">
     <ai-search-bar>
       <template #left>
-        <el-button type="primary" icon="iconfont iconAdd" @click="$router.push({hash:'#add'})">添加</el-button>
+        <ai-select v-model="search.authStatus" dict="authStatus" placeholder="状态"/>
+        <ai-select v-model="search.auditStatus" dict="auditStatus" placeholder="审核状态"/>
       </template>
       <template #right>
         <el-input size="small" placeholder="搜索账号" v-model="search.name" clearable
@@ -90,16 +100,16 @@ export default {
                        @click="$router.push({query:{id:row.id},hash:'#add'})">审核
             </el-button>
             <el-button type="text" v-if="'00|13'.includes(row.permit)"
-                       @click="dialog=true,form=row">认证材料
+                       @click="handleUploadPics(row)">认证材料
             </el-button>
           </div>
         </template>
       </el-table-column>
     </ai-table>
-    <ai-dialog v-model="dialog" title="认证材料" width="60%" @close="form=[]" @confirm="handleConfirm">
+    <ai-dialog v-model="dialog" title="认证材料" width="60%" @close="form={}" @confirm="handleConfirm">
       <el-form class="grid c-3" :model="form" ref="form" label-width="160px">
         <el-form-item v-for="(op,i) in getNeedCerts(form.type)" :key="i" v-bind="op" :rules="{required:true,message:`请上传${op.label}`,trigger:'change'}">
-          <ai-uploader v-model="form[op.prop]" valueIsUrl :limit="1"/>
+          <ai-uploader v-model="form[op.prop]" valueIsUrl :limit="1" :instance="instance"/>
         </el-form-item>
         <el-form-item class="row" label="备注说明" prop="remark">
           <el-input type="textarea" :rows="2" v-model="form.remark" placeholder="备注说明具体情况"/>

ui/packages/layout/AiPage.vue

@@ -19,9 +19,12 @@ export default {
       <div v-if="$slots.left" class="left">
         <slot name="left"/>
       </div>
-      <div class="fill" :class="[contentString]">
+      <el-scrollbar class="fill" :class="[contentString,$slots.footer?'hasFooter':'']">
         <slot/>
-      </div>
+      </el-scrollbar>
+    </div>
+    <div class="footer" v-if="$slots.footer">
+      <slot name="footer"/>
     </div>
   </section>
 </template>
@@ -35,6 +38,7 @@ export default {
   padding: 0 20px;
   overflow: hidden;
   background: #f3f6f9;
+  position: relative;
 
   .main {
     display: flex;
@@ -43,6 +47,7 @@ export default {
     overflow: hidden;
     height: 100%;
 
+
     & > .fill {
       &.card {
         padding: 12px 16px 12px;
@@ -55,7 +60,35 @@ export default {
         margin-left: 50%;
         transform: translateX(-50%);
         max-width: 1200px;
+        overflow-y: auto;
+
+        :deep(.el-scrollbar__wrap) {
+          overflow-x: hidden;
+        }
       }
+
+      &.hasFooter {
+        padding-bottom: 64px;
+      }
+    }
+
+
+  }
+
+  .footer {
+    position: absolute;
+    bottom: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    left:0;
+    right:0;
+    height: 64px;
+    background: #F5F5F5;
+    box-shadow: 0 1px 0 0 #E5E5E5;
+
+    .el-button {
+      width: 92px;
     }
   }