dvcp_v2_webapp/project/xumu/AppAuthManage/authList.vue

<script>
const columns = [
  {label: "序号", type: "index"},
  {label: "账号", prop: "userName"},
  {label: "姓名", prop: "name"},
  {label: "角色", prop: "roleName"},
  {label: "所属端", prop: "type", dict: "roleType", width: 120, align: 'center'},
  {label: "状态", prop: "authStatus", dict: "authStatus", width: 120, align: 'center'},
  {label: "审核状态", prop: "auditStatus", dict: "auditStatus", width: 120, align: 'center'},
]
export default {
  name: "authList",
  props: {
    instance: Function,
    dict: Object,
    permissions: Function
  },
  data() {
    return {
      columns,
      tableData: [],
      page: {pageNum: 1, pageSize: 10, total: 0},
      search: {name: ""},
      dialog: false,
      form: {}
    }
  },
  watch: {
    search: {
      deep: true,
      handler() {
        this.page.pageNum = 1
        this.getTableData()
      }
    }
  },
  methods: {
    getTableData() {
      this.instance.post("/api/user/auth/page", null, {
        params: {...this.page, ...this.search}
      }).then(res => {
        if (res?.data) {
          this.tableData = res.data?.records.map(e => ({...e, permit: `${e.authStatus}` + e.auditStatus}))
          this.page.total = res.data.total
        }
      })
    },
    getNeedCerts(type) {
      return this.$parent.certificates.filter(e => !e.permit || e.permit.includes(type))
    },
    handleConfirm() {
      this.$refs.form.validate().then(() => {
        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("提交成功!")
            this.getTableData()
          }
        })
      })
    },
    handleUploadPics(row = {}) {
      let {id, type, remark, picture = "{}"} = row
      picture = JSON.parse(picture)
      this.form = {id, type, remark, ...picture}
      this.dialog = true
    }
  },
  created() {
    this.dict.load("roleType", "authStatus", "auditStatus")
    this.getTableData()
  }
}
</script>

<template>
  <ai-page class="authList" title="认证审核">
    <ai-search-bar>
      <template #left>
        <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
                  @change="page.pageNum=1, getTableData()" @getList="getTableData"/>
      </template>
    </ai-search-bar>
    <ai-table :tableData="tableData" :colConfigs="columns" :dict="dict" @getList="getTableData"
              :total="page.total" :current.sync="page.pageNum" :size.sync="page.pageSize">
      <el-table-column slot="options" label="操作" fixed="right" align="center">
        <template slot-scope="{row}">
          <div class="table-options">
            <el-button type="text" v-if="'12'.includes(row.permit)"
                       @click="$router.push({query:{id:row.id},hash:'#add'})">查看
            </el-button>
            <el-button class="deleteBtn" type="text" v-if="'11'.includes(row.permit)"
                       @click="$router.push({query:{id:row.id},hash:'#add'})">审核
            </el-button>
            <el-button type="text" v-if="'00|13'.includes(row.permit)"
                       @click="handleUploadPics(row)">认证材料
            </el-button>
          </div>
        </template>
      </el-table-column>
    </ai-table>
    <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" :instance="instance"/>
        </el-form-item>
        <el-form-item class="row" label="备注说明" prop="remark">
          <el-input type="textarea" :rows="2" v-model="form.remark" placeholder="备注说明具体情况"/>
        </el-form-item>
      </el-form>
    </ai-dialog>
  </ai-page>
</template>

<style scoped lang="scss">
.authList {
  height: 100%;

  .deleteBtn {
    color: $errorColor;
  }
}
</style>