接口联调

.env.development

@@ -2,11 +2,12 @@
 ENV = 'development'
 
 # 测试地址 API接口
-VUE_APP_BASE_API = 'https://zplma-b.caimei365.com'
-# VUE_APP_BASE_API = 'http://192.168.2.68:8012'
+# VUE_APP_BASE_API = 'https://zplma-b.caimei365.com'
+VUE_APP_BASE_API = 'http://192.168.2.68:8012'
 
 # 文件上传 API接口地址
-VUE_APP_UPLOAD_API='https://zplma-b.caimei365.com'
+# VUE_APP_UPLOAD_API='https://zplma-b.caimei365.com'
+VUE_APP_UPLOAD_API='http://192.168.2.68:8012'
 
 # 二维码生成链接location
 VUE_APP_BASE_SERVER = 'https://www-b.caimei365.com'

src/api/auth.js

@@ -44,3 +44,39 @@ export function auditAuth(data) {
     data
   })
 }
+
+// 机构用户列表
+export function getAuthUserList(params) {
+  return request({
+    url: '/club/user/list',
+    method: 'get',
+    params
+  })
+}
+
+// 机构生成邀请码
+export function makeGenerate(data) {
+  return request({
+    url: '/club/user/code/generate',
+    method: 'post',
+    data
+  })
+}
+
+// 更新邀请码
+export function updateGenerate(data) {
+  return request({
+    url: '/club/user/code/update',
+    method: 'post',
+    data
+  })
+}
+
+// 解绑邀请码
+export function unbindGenerate(data) {
+  return request({
+    url: '/club/user/code/unbind',
+    method: 'post',
+    data
+  })
+}

src/api/doc.js

@@ -1,9 +1,170 @@
 import request from '@/utils/request'
 
-// 获取审核资料列表
-export function getReviewDocList(params) {
+// ################################################
+
+// 资料库文章列表
+export function getArticleList(params) {
+  return request({
+    url: '/data/article/list',
+    method: 'get',
+    params
+  })
+}
+
+// 资料库保存文章
+export function saveArticle(data) {
+  return request({
+    url: '/data/article/save',
+    method: 'post',
+    data
+  })
+}
+
+// 根据文章id获取数据
+export function getArticleDeatil(params) {
+  return request({
+    url: '/data/article/form/data',
+    method: 'get',
+    params
+  })
+}
+
+// 根据文章id删除文章
+export function removeArticle(data) {
+  return request({
+    url: '/data/article/delete',
+    method: 'post',
+    data
+  })
+}
+
+// 修改文章上线状态
+export function changeArticleStatus(data) {
+  return request({
+    url: '/data/article/update/status',
+    method: 'post',
+    data
+  })
+}
+
+// ################################################
+
+// 获取图片列表
+export function getImageList(params) {
+  return request({
+    url: '/data/image/list',
+    method: 'get',
+    params
+  })
+}
+
+// 资料库保存图片
+export function saveImage(data) {
+  return request({
+    url: '/data/image/save',
+    method: 'post',
+    data
+  })
+}
+
+// 根据图片id获取数据
+export function getImageDetail(params) {
+  return request({
+    url: '/data/image/form/data',
+    method: 'get',
+    params
+  })
+}
+
+// 根据图片id删除图片
+export function removeImage(data) {
+  return request({
+    url: '/data/image/delete',
+    method: 'post',
+    data
+  })
+}
+
+// 修改图片上线状态
+export function changeImageStatus(data) {
+  return request({
+    url: '/data/image/update/status',
+    method: 'post',
+    data
+  })
+}
+// ################################################
+
+// 获取视频列表
+export function getVideoList(params) {
+  return request({
+    url: '/data/video/list',
+    method: 'get',
+    params
+  })
+}
+
+// 资料库保存视频
+export function saveVideo(data) {
+  return request({
+    url: '/data/video/save',
+    method: 'post',
+    data
+  })
+}
+
+// 删除视频
+export function removeVideo(data) {
+  return request({
+    url: '/data/video/delete',
+    method: 'post',
+    data
+  })
+}
+
+// 修改视频上线状态
+export function changeVideoStatus(data) {
+  return request({
+    url: '/data/video/update/status',
+    method: 'post',
+    data
+  })
+}
+
+// ################################################
+
+// 获取文件列表
+export function getFileList(params) {
+  return request({
+    url: '/data/file/list',
+    method: 'get',
+    params
+  })
+}
+
+// 资料库保存文件
+export function saveFile(data) {
+  return request({
+    url: '/data/file/save',
+    method: 'post',
+    data
+  })
+}
+
+// 删除文件
+export function removeFile(data) {
+  return request({
+    url: '/data/file/delete',
+    method: 'post',
+    data
+  })
+}
+
+// 修改文件上线状态
+export function changeFileStatus(data) {
   return request({
-    url: '/review/doc/list',
-    method: 'get'
+    url: '/data/file/update/status',
+    method: 'post',
+    data
   })
 }

src/api/docReview.js

@@ -0,0 +1,47 @@
+import request from '@/utils/request'
+
+// 资料库文章列表
+export function getArticleList(params) {
+  return request({
+    url: '/data/article/list',
+    method: 'get',
+    params
+  })
+}
+
+// 审核文章
+export function auditArticle(data) {
+  return request({
+    url: '/data/article/audit',
+    method: 'post',
+    data
+  })
+}
+
+// 审核图片
+export function auditImage(data) {
+  return request({
+    url: '/data/image/audit',
+    method: 'post',
+    data
+  })
+}
+
+// 审核视频
+export function auditVideo(data) {
+  return request({
+    url: '/data/video/audit',
+    method: 'post',
+    data
+  })
+}
+
+// 审核文件
+export function auditfile(data) {
+  return request({
+    url: '/data/file/audit',
+    method: 'post',
+    data
+  })
+}
+

src/components/Tinymce/index.vue

@@ -177,6 +177,7 @@ export default {
               failFun('上传结果: ' + xhr.responseText)
               return
             }
+            console.log(result.location)
             succFun(result.location)
           }
           formData = new FormData()

src/layout/components/TagsView/index.vue

@@ -225,9 +225,11 @@ export default {
         margin-right: 15px;
       }
       &.active {
-        background-color: #42b983;
+        // background-color: #42b983;
+        background-color: #409eff;
         color: #fff;
-        border-color: #42b983;
+        // border-color: #42b983;
+        border-color: #409eff;
         &::before {
           content: '';
           background: #fff;

src/router/modules/review.js

@@ -47,6 +47,7 @@ const reviewRoutes = [
     component: Layout,
     alwaysShow: true,
     name: 'ReviewDoc',
+    redirect: '/review/doc/list',
     meta: { title: '资料审核管理', icon: 'el-icon-s-check', roles: ['admin'], noCache: true },
     children: [
       {

src/styles/index.scss

@@ -255,3 +255,23 @@ aside {
     padding-bottom: 0;
   }
 }
+.video-upload-box {
+  .upload-demo {
+    ul {
+      position: absolute;
+      width: 100%;
+      left: 0;
+    }
+  }
+}
+
+.file-upload-box {
+  .hidden {
+    .el-upload {
+      display: none;
+    }
+  }
+  ul {
+    margin-top: -3px;
+  }
+}

src/views/authentic/auth/index.vue

@@ -229,7 +229,7 @@ export default {
         this.list = list
         this.total = total
         // 获取审核未通过的列表
-        this.checkAuditFailedList(list)
+        // this.checkAuditFailedList(list)
       }).catch(err => {
         console.log(err)
         return this.$message.error('授权列表信息获取失败')

src/views/authentic/authuser/index.vue

@@ -148,7 +148,7 @@ export default {
         this.list = list
         this.total = total
         // 获取审核未通过的列表
-        this.checkAuditFailedList(list)
+        // this.checkAuditFailedList(list)
       }).catch(err => {
         console.log(err)
         return this.$message.error('授权列表信息获取失败')

src/views/authentic/authuser/userList.vue

@@ -4,7 +4,7 @@
     <div class="filter-container">
       <span>手机号:</span>
       <el-input
-        v-model="listQuery.InvitationCode"
+        v-model="listQuery.mobile"
         placeholder="手机号"
         style="width: 200px"
         class="filter-item"
@@ -25,7 +25,7 @@
         <el-option label="已过期" :value="1" />
       </el-select>
       <el-button type="primary" icon="el-icon-search" @click="getList">查询</el-button>
-      <el-button v-if="userIdentity === 2 || proxyInfo!==null" icon="el-icon-thumb" type="primary">生成邀请码</el-button>
+      <el-button icon="el-icon-thumb" type="primary" @click="handleMakeGenerate">生成邀请码</el-button>
     </div>
     <!-- 搜索区域END -->
     <!-- 表格区域 -->
@@ -49,35 +49,52 @@
       </el-table-column>
       <el-table-column label="添加时间" width="200px" align="center">
         <template slot-scope="{row}">
-          <span v-if="row.status!==2">{{ row.createTime | formatTime }}</span>
+          <span>{{ row.addTime | formatTime }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="微信昵称" align="center">
+        <template slot-scope="{row}">
+          <span v-if="row.nickName">{{ row.nickName }}</span>
+          <span v-else>—</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="手机号" width="140" align="center">
+        <template slot-scope="{row}">
+          <span v-if="row.mobile">{{ row.mobile }}</span>
+          <span v-else>—</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="openID" width="140" align="center">
+        <template slot-scope="{row}">
+          <span v-if="row.openid">{{ row.openid }}</span>
           <span v-else>—</span>
         </template>
       </el-table-column>
-      <el-table-column label="微信昵称" prop="nickName" align="center" />
-      <el-table-column label="手机号" width="140" prop="mobile" align="center" />
-      <el-table-column label="openID" prop="openid" align="center" />
       <el-table-column label="绑定时间" width="200px" align="center">
         <template slot-scope="{row}">
-          <span v-if="row.status!==1">{{ row.bindTime | formatTime }}</span>
+          <span v-if="row.bindTime">{{ row.bindTime | formatTime }}</span>
           <span v-else>—</span>
         </template>
       </el-table-column>
       <el-table-column label="操作" width="200px" align="center">
         <template slot-scope="{row}">
-          <el-button v-if="row.status === 1" type="danger" size="mini" style="margin-right:5px">解绑邀请码</el-button>
-          <el-button v-else type="primary" size="mini" style="margin-right:5px">更新邀请码</el-button>
+          <el-button v-if="row.status === 1" type="danger" size="mini" style="margin-right:5px" @click="handleUnbindGenerate(row)">解绑邀请码</el-button>
+          <el-button v-else type="primary" size="mini" style="margin-right:5px" @click="handleUpdateGenerate(row)">更新邀请码</el-button>
         </template>
       </el-table-column>
     </el-table>
     <!-- 表格区域END -->
+    <pagination v-show="total>0" :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize" @pagination="getList(listQuery)" />
   </div>
 </template>
 
 <script>
-import Mock from 'mockjs'
+import Pagination from '@/components/Pagination' // secondary package based on el-pagination
 import { formatDate } from '@/utils'
 import { mapGetters } from 'vuex'
+import { getAuthUserList, makeGenerate, unbindGenerate, updateGenerate } from '@/api/auth'
 export default {
+  components: { Pagination },
   filters: {
     formatTime(time) {
       if (!time) {
@@ -88,46 +105,84 @@ export default {
   },
   data() {
     return {
+      total: 0,
+      authId: '', // 机构id
       listLoading: false,
       listQuery: {
+        authId: '', // 机构id
+        mobile: '', // 手机号
+        status: '', // 邀请码状态
         pageNum: 0, // 页码
-        pageSize: 20, // 分页大小
-        invitationCode: '', // 供应商类型
-        status: '' // 审核状态
+        pageSize: 10 // 分页大小
       },
       list: [],
       srcList: []
     }
   },
   computed: {
-    ...mapGetters(['authUserId', 'userIdentity', 'proxyInfo'])
+    ...mapGetters(['authUserId'])
   },
   created() {
+    this.authId = this.$route.query.id
     this.getList()
   },
   methods: {
     // 获取列表数据
     getList() {
-      const count = 10
-      const list = []
-
-      for (let i = 0; i < count; i++) {
-        list.push(Mock.mock({
-          invitationCode: '@string("number",6)',
-          nickName: '@ctitle(4,10)',
-          status: '@natural(0,2)',
-          mobile: '@string("number",11)',
-          openid: '@string(30)',
-          createTime: '@date("yy-MM-dd hh:mm:ss")',
-          bindTime: '@date("yy-MM-dd hh:mm:ss")'
-        }))
-      }
-      this.list = list
-      this.initPreviewList(list)
+      this.listLoading = true
+      this.listQuery.authId = this.authId
+      getAuthUserList(this.listQuery)
+        .then(res => {
+          if (res.code !== 0) return
+          this.list = res.data.list
+          this.total = res.data.total
+          console.log(res)
+        })
+        .finally(() => {
+          this.listLoading = false
+        })
+    },
+    // 生成邀请码
+    handleMakeGenerate() {
+      makeGenerate({ authId: this.authId })
+        .then(res => {
+          console.log(res)
+          if (res.code !== 0) return
+          this.$message({
+            type: 'success',
+            message: res.data,
+            duration: 500
+          })
+          this.getList()
+        })
+    },
+    // 更新邀请码
+    handleUpdateGenerate(row) {
+      updateGenerate({ clubUserId: row.clubUserId })
+        .then(res => {
+          if (res.code !== 0) return
+          console.log(res)
+          this.$message({
+            type: 'success',
+            message: res.data,
+            duration: 500
+          })
+          this.getList()
+        })
     },
-    // 初始化预览图片列表
-    initPreviewList(list) {
-      list.forEach(item => this.srcList.push(item.articleCover))
+    // 解绑邀请码
+    handleUnbindGenerate(row) {
+      unbindGenerate({ clubUserId: row.clubUserId })
+        .then(res => {
+          if (res.code !== 0) return
+          console.log(res)
+          this.$message({
+            type: 'success',
+            message: res.data,
+            duration: 500
+          })
+          this.getList()
+        })
     }
   }
 }

src/views/authentic/components/uploadFile.vue

@@ -17,7 +17,7 @@
     >
       <el-button slot="trigger" size="mini" type="primary">选取文件</el-button>
       <!-- <el-button style="margin-left: 10px;" size="mini" type="success" @click="uploadFile">上传</el-button> -->
-      <div slot="tip" class="el-upload__tip">只能上传.doc/.ppt/.pdf文件，建议大小在10M内</div>
+      <div slot="tip" class="el-upload__tip">{{ tipTitle }}</div>
     </el-upload>
   </div>
 </template>
@@ -37,6 +37,10 @@ export default {
     brandId: {
       type: [Number, String],
       default: 0
+    },
+    tipTitle: {
+      type: String,
+      default: '只能上传.doc/.ppt/.pdf文件，建议大小在10M内'
     }
   },
 

src/views/authentic/doc/articleEdit.vue

@@ -1,16 +1,17 @@
 <template>
   <div v-loading="isLoading" class="app-container">
     <div class="form">
-      <el-form label-width="120px">
-        <el-form-item label="标题：">
-          <el-input placeholder="请输入文章标题" maxlength="50" show-word-limit />
+      <el-form ref="formRef" label-width="120px" :model="formData" :rules="formRules">
+        <el-form-item label="标题：" prop="articleTitle">
+          <el-input v-model="formData.articleTitle" placeholder="请输入文章标题" maxlength="50" show-word-limit />
         </el-form-item>
-        <el-form-item label="头图：">
-          <upload-image tip-title="128px * 128px" />
-          <el-input class="hiddenInput" />
+        <el-form-item label="头图：" prop="articleImage">
+          <upload-image tip-title="128px * 128px" :file-list="imagelist" @success="handleSussces" @error="handleError" />
+          <el-input v-model="formData.articleImage" class="hiddenInput" />
         </el-form-item>
-        <el-form-item label="文章内容：">
-          <tinymce v-model="content" :token="token" :action="action" :height="300" />
+        <el-form-item label="文章内容：" prop="articleContent">
+          <tinymce v-model="formData.articleContent" :token="token" :action="action" :height="300" />
+          <el-input v-model="formData.articleContent" class="hiddenInput" />
         </el-form-item>
       </el-form>
     </div>
@@ -22,21 +23,45 @@
 </template>
 
 <script>
+import { mapGetters } from 'vuex'
 import UploadImage from '../components/uploadImage'
 import Tinymce from '@/components/Tinymce'
 import { getToken } from '@/utils/auth'
+import { saveArticle, getArticleDeatil } from '@/api/doc'
 export default {
   components: { UploadImage, Tinymce },
   data() {
     return {
+      editType: 0, // 编辑模式 1：添加文章  2：修改文章
+      formData: {
+        articleId: '', // 文章id
+        authUserId: '', // 用户id
+        articleTitle: '', // 文章标题
+        articleImage: '', // 文章封面
+        articleContent: '' // 文章内容
+      },
+      formRules: {
+        articleTitle: [
+          { required: true, message: '文章标题不能为空', trigger: 'blur' },
+          { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
+        ],
+        articleImage: [{ required: true, message: '文章必须上传封面', trigger: 'change' }],
+        articleContent: [{ required: true, message: '文章内容不能为空', trigger: 'change' }]
+      },
       isLoading: true,
       token: '',
       action: process.env.VUE_APP_UPLOAD_API + '/upload/image',
-      content: ''
+      imagelist: []
     }
   },
+  computed: {
+    ...mapGetters(['authUserId'])
+  },
   created() {
     this.token = getToken()
+    this.formData.articleId = this.$route.query.articleId || ''
+    this.editType = this.formData.articleId ? 2 : 1
+    this.initFormData()
   },
   mounted() {
     setTimeout(() => {
@@ -44,8 +69,49 @@ export default {
     }, 500)
   },
   methods: {
-    submit() {}
-
+    // 保存文章
+    submit() {
+      this.formData.authUserId = this.authUserId
+      this.$refs.formRef.validate(valid => {
+        if (!valid) return
+        this.isLoading = true
+        saveArticle(this.formData).then(res => {
+          console.log(res)
+          if (res.code !== 0) return
+          this.$message.success(res.data)
+          // 如果保存文章成功就要关闭当前页面
+          this.$store.dispatch('tagsView/delView', this.$route)
+          this.$router.back()
+        }).finally(() => {
+          this.isLoading = false
+        })
+      })
+    },
+    initFormData() {
+      if (!this.formData.articleId) return
+      getArticleDeatil({ articleId: this.formData.articleId }).then(res => {
+        for (const key in this.formData) {
+          if (Object.hasOwnProperty.call(this.formData, key)) {
+            this.formData[key] = res.data[key]
+          }
+        }
+        this.imagelist = [{ name: '文章封面', url: this.formData.articleImage }]
+        console.log(res)
+      })
+    },
+    // 封面图片上传成功
+    handleSussces(res) {
+      console.log(res)
+      if (!res.data) {
+        this.imagelist = []
+        return
+      }
+      this.formData.articleImage = res.data
+    },
+    // 封面图片上传失败
+    handleError() {
+      this.imagelist = []
+    }
   }
 }
 </script>

src/views/authentic/doc/articleList.vue

@@ -12,7 +12,7 @@
       />
       <span>审核状态:</span>
       <el-select
-        v-model="listQuery.lowerAuditStatus"
+        v-model="listQuery.auditStatus"
         placeholder="审核状态"
         clearable
         style="width: 200px"
@@ -39,7 +39,12 @@
         <el-option label="未上线" :value="0" />
       </el-select>
       <el-button type="primary" icon="el-icon-search" @click="getList">查询</el-button>
-      <el-button v-if="userIdentity === 2 || proxyInfo!==null" icon="el-icon-edit" type="primary">添加文章</el-button>
+      <el-button
+        v-if="userIdentity === 2 || proxyInfo !== null"
+        icon="el-icon-edit"
+        type="primary"
+        @click="$_navigationTo(`/doc/article-edit`)"
+      >添加文章</el-button>
     </div>
     <!-- 搜索区域END -->
     <!-- 表格区域 -->
@@ -58,28 +63,55 @@
         <template slot-scope="{ row }">
           <el-image
             style="width: 50px; height: 50px"
-            :src="row.articleCover"
+            :src="row.articleImage"
             :preview-src-list="srcList"
           /></template>
       </el-table-column>
       <el-table-column label="审核状态" width="180px" align="center">
         <template slot-scope="{ row }">
-          <el-tag v-if="row.auditStatus === 0" size="small" type="danger">审核未通过</el-tag>
-          <el-tag v-if="row.auditStatus === 1" size="small" type="success">审核通过</el-tag>
           <el-tag v-if="row.auditStatus === 2" size="small" type="warning">待审核</el-tag>
+          <el-tag v-if="row.auditStatus === 1" size="small" type="success">审核通过</el-tag>
+          <!-- 未通过原因展示 -->
+          <template v-if="row.auditStatus === 0">
+            <!-- <span class="status danger">审核未通过&nbsp;</span> -->
+            <el-popover
+              placement="top-start"
+              title="审核说明"
+              width="400"
+              trigger="hover"
+              :content="row.invalidReason"
+            >
+              <el-tag slot="reference" size="small" type="danger" class="reason">
+                <span>审核未通过</span>
+                <span class="el-icon-question status danger " />
+              </el-tag>
+            </el-popover>
+            <!-- 未通过原因展示END -->
+          </template>
         </template>
       </el-table-column>
       <el-table-column label="上线状态" width="180px" align="center">
-        <template slot-scope="{row}">
+        <template slot-scope="{ row }">
           <!-- 只有审核通过了才能操作上下线 auditStatus ：审核状态 -->
           <template v-if="row.auditStatus === 1">
             <template v-if="row.status === 0">
               <span style="margin-right:10px;" class="status danger">已下线</span>
-              <el-button v-if="userIdentity===2 || proxyInfo!==null" type="primary" size="mini" @click="handleChangeStatus(row)">上线</el-button>
+              <el-button
+                v-if="userIdentity === 2 || proxyInfo !== null"
+                type="primary"
+                size="mini"
+                @click="handleChangeStatus(row)"
+              >上线</el-button>
             </template>
             <template v-else>
               <span style="margin-right:10px;" class="status success ">已上线</span>
-              <el-button v-if="userIdentity===2 || proxyInfo!==null" type="info" size="mini" plain @click="handleChangeStatus(row)">下线</el-button>
+              <el-button
+                v-if="userIdentity === 2 || proxyInfo !== null"
+                type="info"
+                size="mini"
+                plain
+                @click="handleChangeStatus(row)"
+              >下线</el-button>
             </template>
           </template>
           <template v-else>
@@ -88,28 +120,42 @@
           </template>
         </template>
       </el-table-column>
-      <el-table-column label="审核时间" width="240px" align="center">
-        <template slot-scope="{row}">
-          <span v-if="row.auditStatus!==2">{{ row.auditTime | formatTime }}</span>
-          <span v-else>—</span>
+      <el-table-column label="创建时间" width="240px" align="center">
+        <template slot-scope="{ row }">
+          {{ row.createTime | formatTime }}
         </template>
       </el-table-column>
       <el-table-column label="操作" width="240px" align="center">
-        <template>
-          <el-button type="primary" size="mini" style="margin-right:5px" icon="el-icon-edit" @click="$_navigationTo(`/doc/article-edit`)">编辑</el-button>
-          <el-button type="danger" size="mini" style="margin-right:5px" icon="el-icon-s-check">删除</el-button>
+        <template slot-scope="{ row }">
+          <el-button
+            type="primary"
+            size="mini"
+            style="margin-right:5px"
+            icon="el-icon-edit"
+            @click="$_navigationTo(`/doc/article-edit?articleId=${row.articleId}`)"
+          >编辑</el-button>
+          <el-button
+            type="danger"
+            size="mini"
+            style="margin-right:5px"
+            icon="el-icon-s-check"
+            @click="handleRemoveArticle(row)"
+          >删除</el-button>
         </template>
       </el-table-column>
     </el-table>
     <!-- 表格区域END -->
+    <pagination v-show="total>0" :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize" @pagination="getList(listQuery)" />
   </div>
 </template>
 
 <script>
-import Mock from 'mockjs'
+import Pagination from '@/components/Pagination' // secondary package based on el-pagination
 import { formatDate } from '@/utils'
 import { mapGetters } from 'vuex'
+import { changeArticleStatus, getArticleList, removeArticle } from '@/api/doc'
 export default {
+  components: { Pagination },
   filters: {
     formatTime(time) {
       if (!time) {
@@ -121,12 +167,15 @@ export default {
   data() {
     return {
       listLoading: false,
+      total: 0,
       listQuery: {
-        pageNum: 0, // 页码
-        pageSize: 20, // 分页大小
-        articleTitle: '', // 供应商类型
-        lowerAuditStatus: '', // 审核状态
-        status: ''
+        authUserId: '', // 机构id
+        auditStatus: '', // 审核状态
+        articleTitle: '', // 文章标题
+        listType: 1, // 列表类型：1文章列表，2文章审核列表
+        pageNum: 1, // 页码
+        pageSize: 10, // 分页大小
+        status: '' // 文章状态：0已下线，1已上线，2待上线
       },
       list: [],
       srcList: []
@@ -141,26 +190,65 @@ export default {
   methods: {
     // 获取列表数据
     getList() {
-      const count = 10
-      const list = []
-
-      for (let i = 0; i < count; i++) {
-        list.push(Mock.mock({
-          articleId: '@natural',
-          articleTitle: '@ctitle(20,30)',
-          articleCover: '@image("100x100")',
-          auditStatus: '@natural(0,2)',
-          auditTime: '@date("yy-MM-dd hh:mm:ss")',
-          auditBy: '@cname(2,6)',
-          status: '@natural(0,1)'
-        }))
-      }
-      this.list = list
-      this.initPreviewList(list)
+      this.listLoading = true
+      this.listQuery.authUserId = this.authUserId
+      getArticleList(this.listQuery)
+        .then(res => {
+          if (res.code !== 0) return
+          this.list = res.data.list
+          console.log(res)
+          this.total = res.data.total
+        })
+        .finally(() => {
+          this.listLoading = false
+        })
     },
     // 初始化预览图片列表
     initPreviewList(list) {
       list.forEach(item => this.srcList.push(item.articleCover))
+    },
+    // 删除文章
+    async handleRemoveArticle(row) {
+      const text = await this.$confirm('确认删除该文章吗？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).catch(() => {
+        this.$message.info('已取消操作')
+      })
+      if (text !== 'confirm') return
+      removeArticle({ articleId: row.articleId })
+        .then(res => {
+          if (res.code !== 0) return
+          this.$message.success(res.data)
+          this.getList(this.listQuery)
+        })
+    },
+    // 状态改变
+    handleChangeStatus(item) {
+      this.listLoading = true
+      // const params = {
+      //   authId: item.authId,
+      //   status: item.status ? 1 : 0
+      // }
+      console.log(item)
+      const params = {
+        articleId: item.articleId,
+        status: item.status === 1 ? 0 : 1
+      }
+      changeArticleStatus(params).then(res => {
+        // this.$message.success(res.data)
+        this.$message({
+          message: res.data,
+          duration: 500,
+          type: 'success'
+        })
+        this.getList()
+      }).catch(err => {
+        console.log(err)
+      }).finally(() => {
+        this.listLoading = false
+      })
     }
   }
 }
@@ -188,7 +276,7 @@ export default {
 .el-table .cell {
   overflow: visible;
 }
-.el-badge{
+.el-badge {
   margin: 0 6px;
 }
 </style>

src/views/authentic/doc/fileList.vue

@@ -4,7 +4,7 @@
     <div class="filter-container">
       <span>文件标题:</span>
       <el-input
-        v-model="listQuery.articleTitle"
+        v-model="listQuery.fileTitle"
         placeholder="文件标题"
         style="width: 200px"
         class="filter-item"
@@ -12,7 +12,7 @@
       />
       <span>审核状态:</span>
       <el-select
-        v-model="listQuery.lowerAuditStatus"
+        v-model="listQuery.auditStatus"
         placeholder="审核状态"
         clearable
         style="width: 200px"
@@ -53,12 +53,28 @@
       cell-class-name="table-cell"
     >
       <el-table-column label="序号" type="index" width="80" align="center" />
-      <el-table-column label="文件标题" prop="articleTitle" align="center" />
+      <el-table-column label="文件标题" prop="fileTitle" align="center" />
       <el-table-column label="审核状态" width="180px" align="center">
         <template slot-scope="{ row }">
-          <el-tag v-if="row.auditStatus === 0" size="small" type="danger">审核未通过</el-tag>
-          <el-tag v-if="row.auditStatus === 1" size="small" type="success">审核通过</el-tag>
           <el-tag v-if="row.auditStatus === 2" size="small" type="warning">待审核</el-tag>
+          <el-tag v-if="row.auditStatus === 1" size="small" type="success">审核通过</el-tag>
+          <!-- 未通过原因展示 -->
+          <template v-if="row.auditStatus === 0">
+            <!-- <span class="status danger">审核未通过&nbsp;</span> -->
+            <el-popover
+              placement="top-start"
+              title="审核说明"
+              width="400"
+              trigger="hover"
+              :content="row.invalidReason"
+            >
+              <el-tag slot="reference" size="small" type="danger" class="reason">
+                <span>审核未通过</span>
+                <span class="el-icon-question status danger " />
+              </el-tag>
+            </el-popover>
+            <!-- 未通过原因展示END -->
+          </template>
         </template>
       </el-table-column>
       <el-table-column label="上线状态" width="180px" align="center">
@@ -80,50 +96,57 @@
           </template>
         </template>
       </el-table-column>
-      <el-table-column label="审核时间" width="240px" align="center">
+      <el-table-column label="创建时间" width="240px" align="center">
         <template slot-scope="{row}">
-          <span v-if="row.auditStatus!==2">{{ row.auditTime | formatTime }}</span>
-          <span v-else>—</span>
+          {{ row.createTime | formatTime }}
         </template>
       </el-table-column>
       <el-table-column label="操作" width="240px" align="center">
-        <template>
-          <el-button type="primary" size="mini" style="margin-right:5px" icon="el-icon-edit" @click="handleShowDialog('edit')">编辑</el-button>
-          <el-button type="danger" size="mini" style="margin-right:5px" icon="el-icon-s-check">删除</el-button>
+        <template slot-scope="{row}">
+          <el-button type="primary" size="mini" style="margin-right:5px" icon="el-icon-edit" @click="handleShowDialog('edit',row)">编辑</el-button>
+          <el-button type="danger" size="mini" style="margin-right:5px" icon="el-icon-s-check" @click="handleRemoveFile(row)">删除</el-button>
         </template>
       </el-table-column>
     </el-table>
     <!-- 表格区域END -->
+    <pagination v-show="total>0" :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize" @pagination="getList(listQuery)" />
     <!-- 视频预览对话框 -->
     <el-dialog
       :title="dialogTitle"
       :visible.sync="dialogVisible"
       width="40%"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
       @closed="dialogColosed"
     >
       <el-form ref="formRef" :model="dialogData" label-width="110px" :rules="dialogFormRules">
-        <el-form-item label="标题：" prop="title">
-          <el-input v-model="dialogData.title" maxlength="50" show-word-limit />
+        <el-form-item label="标题：" prop="fileTitle">
+          <el-input v-model="dialogData.fileTitle" maxlength="50" show-word-limit />
         </el-form-item>
-        <el-form-item label="文件链接：" prop="url">
-          <div class="clearfix">
-            <el-input v-model="dialogData.url" style="width:80%" class="fl" />
+        <el-form-item label="上传文件：" prop="fileUrl" style="margin-bottom:0">
+          <div class="file-upload-box">
+            <!-- 上传文件组件 -->
             <el-upload
-              style="width:18%"
-              class="upload-demo fr"
-              accept=".mp4"
+              ref="uploadFileRef"
+              accept=".pdf"
+              :class="{hidden:hasFile}"
+              :auto-upload="false"
               :headers="headers"
               :action="action"
+              :on-success="fileUploadSuccess"
+              :on-change="fileUploadChange"
+              :on-remove="fileUploadRemove"
+              :file-list="fileList"
             >
-              <el-button type="primary" style="width:100%">上传文件</el-button>
+              <el-button size="mini" type="primary" style="width:100%">上传文件</el-button>
             </el-upload>
+            <el-input v-model="dialogData.fileUrl" type="hidden" class="hiddenInput" />
           </div>
-          <span style="color:#999;font-size:12px">如果没有链接，可以点击右侧的上传文件，文件只支持pdf</span>
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button @click="dialogVisible = false">取 消</el-button>
-        <el-button type="primary" @click="handleAuditStatus">提 交</el-button>
+        <el-button type="primary" :loading="submitLoading" @click="handleSave">提 交</el-button>
       </div>
     </el-dialog>
     <!-- 视频预览对话框END -->
@@ -131,11 +154,13 @@
 </template>
 
 <script>
-import Mock from 'mockjs'
+import Pagination from '@/components/Pagination' // secondary package based on el-pagination
 import { formatDate } from '@/utils'
 import { mapGetters } from 'vuex'
 import { getToken } from '@/utils/auth'
+import { changeFileStatus, getFileList, removeFile, saveFile } from '@/api/doc'
 export default {
+  components: { Pagination },
   filters: {
     formatTime(time) {
       if (!time) {
@@ -147,22 +172,32 @@ export default {
   data() {
     return {
       listLoading: false,
+      submitLoading: false,
+      total: 0,
       dialogVisible: false,
       dialogTitle: '添加文件',
+      hasFile: false,
+      uploadFileUrl: '',
+      chooseNewFile: false,
       listQuery: {
-        pageNum: 0, // 页码
-        pageSize: 20, // 分页大小
-        articleTitle: '', // 供应商类型
-        lowerAuditStatus: '', // 审核状态
-        status: ''
+        authUserId: '', // 供应商用户id
+        listType: 1, // 列表类型：1视频列表，2视频审核列表
+        fileTitle: '', // 文件标题
+        auditStatus: '', // 审核状态：0审核未通过，1审核通过，2待审核
+        status: '', // 视频状态：0已下线，1已上线，2待上线
+        pageNum: 1, // 页码
+        pageSize: 10 // 分页大小
       },
+      fileList: [],
       dialogData: {
-        title: '',
-        url: ''
+        authUserId: '',
+        fileTitle: '',
+        fileId: '',
+        fileUrl: ''
       },
       dialogFormRules: {
-        title: [{ required: true, message: '标题不能为空', trigger: 'blur' }],
-        url: [{ required: true, message: '链接不能为空', trigger: 'blur' }]
+        fileTitle: [{ required: true, message: '标题不能为空', trigger: 'blur' }],
+        fileUrl: [{ required: true, message: '链接不能为空', trigger: 'change' }]
       },
       list: [],
       srcList: []
@@ -176,7 +211,7 @@ export default {
       }
     },
     action() {
-      return `${process.env.VUE_APP_UPLOAD_API}/upload/image`
+      return `${process.env.VUE_APP_UPLOAD_API}/upload/file`
     }
   },
   created() {
@@ -185,35 +220,138 @@ export default {
   methods: {
     // 获取列表数据
     getList() {
-      const count = 10
-      const list = []
-
-      for (let i = 0; i < count; i++) {
-        list.push(Mock.mock({
-          articleId: '@natural',
-          articleTitle: '@ctitle(20,30)',
-          articleCover: '@image("100x100")',
-          auditStatus: '@natural(0,2)',
-          auditTime: '@date("yy-MM-dd hh:mm:ss")',
-          auditBy: '@cname(2,6)',
-          status: '@natural(0,1)'
-        }))
-      }
-      this.list = list
-      this.initPreviewList(list)
+      this.listLoading = true
+      this.listQuery.authUserId = this.authUserId
+      getFileList(this.listQuery)
+        .then(res => {
+          if (res.code !== 0) return
+          this.list = res.data.list
+          this.total = res.data.total
+          console.log(res)
+        })
+        .finally(() => {
+          this.listLoading = false
+        })
     },
-    // 初始化预览图片列表
-    initPreviewList(list) {
-      list.forEach(item => this.srcList.push(item.articleCover))
+    handleSave() {
+      // 对标题字段进行规则校验
+      console.log(this.dialogData)
+      this.$refs.formRef.validateField('fileTitle', (error) => {
+        if (!error) {
+          this.submitLoading = true;
+          (this.hasFile && !this.chooseNewFile) ? this.save() : this.$refs.uploadFileRef.submit()
+        }
+      })
     },
-    handleAuditStatus() {
+    save() {
+      this.$refs.formRef.validate(valide => {
+        if (!valide) return
+        this.dialogData.authUserId = this.authUserId
+        if (this.uploadFileUrl) {
+          this.dialogData.fileUrl = this.uploadFileUrl
+        }
+        console.log('保存')
+        saveFile(this.dialogData)
+          .then(res => {
+            console.log(res)
+            if (res.code !== 0) return
+            this.dialogVisible = false
+            this.getList()
+            this.$message({
+              type: 'success',
+              message: res.data,
+              duration: 500
+            })
+          }).finally(() => {
+            this.submitLoading = false
+          })
+      })
     },
-    handleShowDialog() {
-      this.dialogVisible = true
+    async handleRemoveFile(row) {
+      const text = await this.$confirm('视频删除后不可恢复，确认删除该视频吗？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).catch(() => {
+        this.$message.info('已取消操作')
+      })
+      if (text !== 'confirm') return
+      removeFile({ fileId: row.fileId })
+        .then(res => {
+          if (res.code !== 0) return
+          this.$message.success(res.data)
+          this.getList()
+        })
     },
-    dialogColosed(type) {
+    handleShowDialog(type, row) {
       this.dialogTitle = type === 'add' ? '添加文件' : '修改文件'
-      this.$refs.formRef.resetFields()
+      this.$refs?.formRef?.resetFields()
+      this.dialogVisible = true
+      this.setDialogData(row)
+    },
+    // 设置表单初始值
+    setDialogData(row) {
+      if (!row) return
+      for (const key in this.dialogData) {
+        if (Object.hasOwnProperty.call(this.dialogData, key)) {
+          this.dialogData[key] = row[key]
+        }
+      }
+      if (this.dialogData.fileUrl) {
+        this.fileList.push({ name: `删除当前文件后可上传新文件`, url: row.fileUrl })
+        this.hasFile = true
+      }
+    },
+    dialogColosed() {
+      this.dialogData.authUserId = ''
+      this.dialogData.fileTitle = ''
+      this.dialogData.fileId = ''
+      this.dialogData.fileUrl = ''
+      this.fileList = []
+      this.hasFile = false
+      this.uploadFileUrl = ''
+      this.chooseNewFile = false
+    },
+    fileUploadSuccess(response) {
+      // this.dialogData.fileUrl = response.fileUrl
+      this.uploadFileUrl = response.fileUrl
+      this.save()
+      console.log(response)
+    },
+    fileUploadChange(file, fileList) {
+      this.hasFile = fileList.length > 0
+      this.dialogData.fileUrl = '-'
+      this.chooseNewFile = true
+    },
+    fileUploadRemove(file, fileList) {
+      this.dialogData.fileUrl = ''
+      this.hasFile = fileList.length > 0
+    },
+    // 状态改变
+    handleChangeStatus(item) {
+      this.listLoading = true
+      // const params = {
+      //   authId: item.authId,
+      //   status: item.status ? 1 : 0
+      // }
+      console.log(item)
+      const params = {
+        fileId: item.fileId,
+        status: item.status === 1 ? 0 : 1
+      }
+      changeFileStatus(params).then(res => {
+        // this.$message.success(res.data)
+        this.$message({
+          message: res.data,
+          duration: 500,
+          type: 'success'
+        })
+        this.getList()
+      }).catch(err => {
+        console.log(err)
+      }).finally(() => {
+        this.listLoading = false
+      })
     }
   }
 }

src/views/authentic/doc/imageEdit.vue

@@ -2,10 +2,10 @@
   <div class="app-container">
     <div class="form">
       <el-form ref="formRef" :model="formData" :rules="formRules" label-width="70px">
-        <el-form-item label="标题：" prop="title">
-          <el-input v-model="formData.title" placeholder="图片列表标题" maxlength="50" show-word-limit />
+        <el-form-item label="标题：" prop="imageTitle">
+          <el-input v-model="formData.imageTitle" placeholder="图片列表标题" maxlength="50" show-word-limit />
         </el-form-item>
-        <el-form-item label="图片：" prop="imgUrl">
+        <el-form-item label="图片：" prop="imageFlag">
           <el-upload
             class="upload-control"
             :class="{hidden:count === 8}"
@@ -22,7 +22,7 @@
             <i class="el-icon-picture-outline" />
             <div slot="tip" class="el-upload__tip" style="color:#999"><span style="color:red">*</span>最多只能上传8张图片</div>
           </el-upload>
-          <el-input v-model="formData.imgUrl" class="hiddenInput" />
+          <el-input v-model="formData.imageFlag" class="hiddenInput" />
         </el-form-item>
       </el-form>
       <div class="submit-btn">
@@ -35,27 +35,32 @@
 
 <script>
 import { getToken } from '@/utils/auth'
+import { mapGetters } from 'vuex'
+import { getImageDetail, saveImage } from '@/api/doc'
 export default {
   data() {
     return {
-      imageList: [],
-      count: 0,
+      count: 0, // 图片个数
+      imageId: '', // 图片列表id
+      imageList: [], // 回显图片列表
+      imageArr: [], // 上传的图片列表
       formData: {
-        title: '',
-        imgUrl: ''
+        imageTitle: '', // 图片标题
+        imageFlag: '' // 是否上传图片的标识 不为空则代表上传过图片
       },
       formRules: {
-        title: [
+        imageTitle: [
           { required: true, message: '标题不能为空', trigger: 'blur' },
           { max: 50, message: '标题不能超过50个字符', trigger: 'blur' }
         ],
-        imgUrl: [
+        imageFlag: [
           { required: true, message: '图片列表不能为空', trigger: 'change' }
         ]
       }
     }
   },
   computed: {
+    ...mapGetters(['authUserId']),
     headers() {
       return {
         'X-Token': getToken()
@@ -67,16 +72,69 @@ export default {
   },
   watch: {
     count(nVal, oVal) {
-      this.formData.imgUrl = (nVal > 0 ? 'has image' : '')
+      this.formData.imageFlag = (nVal > 0 ? 'has image' : '')
     }
   },
+  created() {
+    this.imageId = this.$route.query.imageId || ''
+    this.initFormData()
+  },
   methods: {
-    submit() {},
+    submit() {
+      // 请求参数
+      const params = {
+        imageId: this.imageId,
+        authUserId: this.authUserId,
+        imageTitle: this.formData.imageTitle,
+        imageArr: this.imageArr
+      }
+      // 校验表单数据
+      this.$refs.formRef.validate(valid => {
+        if (!valid) return
+        this.isLoading = true
+        // 保存
+        saveImage(params).then(res => {
+          console.log(res)
+          if (res.code !== 0) return
+          this.$message.success(res.data)
+          // 如果保存文章成功就要关闭当前页面
+          this.$store.dispatch('tagsView/delView', this.$route)
+          this.$router.back()
+        }).finally(() => {
+          this.isLoading = false
+        })
+      })
+    },
+    // 初始化表单数据
+    initFormData() {
+      if (!this.imageId) return
+      getImageDetail({ imageId: this.imageId }).then(res => {
+        console.log(res)
+        const { imageTitle, imageList } = res.data
+        this.formData.imageTitle = imageTitle
+        this.imageArr = imageList
+        this.count = imageList.length
+        for (let i = 0; i < this.count; i++) {
+          this.imageList.push({ name: '', url: imageList[i] })
+        }
+        console.log(this.imageList)
+      })
+    },
+    // 图片上传成功的回调
     handleUploadSuccess(response, file, fileList) {
       this.count = fileList.length
+      this.imageArr.push(response.data)
     },
+    // 移除图片的回调
     handleRemove(file, fileList) {
+      const removeUrl = this.searchFileUrl(this.imageList, file)
+      const pop = this.imageArr.indexOf(removeUrl)
+      this.imageArr.splice(pop, 1)
       this.count = fileList.length
+    },
+    // 根据图片id获取图片
+    searchFileUrl(fileList = [], file) {
+      return fileList.filter(v => v.uid === file.uid)[0]?.url
     }
   }
 }

src/views/authentic/doc/imageList.vue

@@ -4,7 +4,7 @@
     <div class="filter-container">
       <span>文章标题:</span>
       <el-input
-        v-model="listQuery.articleTitle"
+        v-model="listQuery.imageTitle"
         placeholder="图片标题"
         style="width: 200px"
         class="filter-item"
@@ -12,7 +12,7 @@
       />
       <span>审核状态:</span>
       <el-select
-        v-model="listQuery.lowerAuditStatus"
+        v-model="listQuery.auditStatus"
         placeholder="审核状态"
         clearable
         style="width: 200px"
@@ -39,7 +39,12 @@
         <el-option label="未上线" :value="0" />
       </el-select>
       <el-button type="primary" icon="el-icon-search" @click="getList">查询</el-button>
-      <el-button v-if="userIdentity === 2 || proxyInfo!==null" icon="el-icon-edit" type="primary">添加图片</el-button>
+      <el-button
+        v-if="userIdentity === 2 || proxyInfo!==null"
+        icon="el-icon-edit"
+        type="primary"
+        @click="$_navigationTo(`/doc/image-edit`)"
+      >添加图片</el-button>
     </div>
     <!-- 搜索区域END -->
     <!-- 表格区域 -->
@@ -53,12 +58,28 @@
       cell-class-name="table-cell"
     >
       <el-table-column label="序号" type="index" width="80" align="center" />
-      <el-table-column label="图片标题" prop="articleTitle" align="center" />
+      <el-table-column label="图片标题" prop="imageTitle" align="center" />
       <el-table-column label="审核状态" width="180px" align="center">
         <template slot-scope="{ row }">
-          <el-tag v-if="row.auditStatus === 0" size="small" type="danger">审核未通过</el-tag>
-          <el-tag v-if="row.auditStatus === 1" size="small" type="success">审核通过</el-tag>
           <el-tag v-if="row.auditStatus === 2" size="small" type="warning">待审核</el-tag>
+          <el-tag v-if="row.auditStatus === 1" size="small" type="success">审核通过</el-tag>
+          <!-- 未通过原因展示 -->
+          <template v-if="row.auditStatus === 0">
+            <!-- <span class="status danger">审核未通过&nbsp;</span> -->
+            <el-popover
+              placement="top-start"
+              title="审核说明"
+              width="400"
+              trigger="hover"
+              :content="row.invalidReason"
+            >
+              <el-tag slot="reference" size="small" type="danger" class="reason">
+                <span>审核未通过</span>
+                <span class="el-icon-question status danger " />
+              </el-tag>
+            </el-popover>
+            <!-- 未通过原因展示END -->
+          </template>
         </template>
       </el-table-column>
       <el-table-column label="上线状态" width="180px" align="center">
@@ -80,28 +101,30 @@
           </template>
         </template>
       </el-table-column>
-      <el-table-column label="审核时间" width="240px" align="center">
+      <el-table-column label="创建时间" width="240px" align="center">
         <template slot-scope="{row}">
-          <span v-if="row.auditStatus!==2">{{ row.auditTime | formatTime }}</span>
-          <span v-else>—</span>
+          {{ row.createTime | formatTime }}
         </template>
       </el-table-column>
       <el-table-column label="操作" width="240px" align="center">
-        <template>
-          <el-button type="primary" size="mini" style="margin-right:5px" icon="el-icon-edit" @click="$_navigationTo(`/doc/image-edit`)">编辑</el-button>
-          <el-button type="danger" size="mini" style="margin-right:5px" icon="el-icon-s-check">删除</el-button>
+        <template slot-scope="{row}">
+          <el-button type="primary" size="mini" style="margin-right:5px" icon="el-icon-edit" @click="$_navigationTo(`/doc/image-edit?imageId=${row.imageId}`)">编辑</el-button>
+          <el-button type="danger" size="mini" style="margin-right:5px" icon="el-icon-s-check" @click="handleRemoveImage(row)">删除</el-button>
         </template>
       </el-table-column>
     </el-table>
+    <pagination v-show="total>0" :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize" @pagination="getList(listQuery)" />
     <!-- 表格区域END -->
   </div>
 </template>
 
 <script>
-import Mock from 'mockjs'
+import Pagination from '@/components/Pagination' // secondary package based on el-pagination
 import { formatDate } from '@/utils'
 import { mapGetters } from 'vuex'
+import { changeImageStatus, getImageList, removeImage } from '@/api/doc'
 export default {
+  components: { Pagination },
   filters: {
     formatTime(time) {
       if (!time) {
@@ -113,12 +136,15 @@ export default {
   data() {
     return {
       listLoading: false,
+      total: 0,
       listQuery: {
-        pageNum: 0, // 页码
-        pageSize: 20, // 分页大小
-        articleTitle: '', // 供应商类型
-        lowerAuditStatus: '', // 审核状态
-        status: ''
+        authUserId: '', // 机构id
+        auditStatus: '', // 审核状态
+        imageTitle: '', // 文章标题
+        listType: 1, // 列表类型：1文章列表，2文章审核列表
+        pageNum: 1, // 页码
+        pageSize: 10, // 分页大小
+        status: '' // 文章状态：0已下线，1已上线，2待上线
       },
       list: [],
       srcList: []
@@ -133,26 +159,65 @@ export default {
   methods: {
     // 获取列表数据
     getList() {
-      const count = 10
-      const list = []
-
-      for (let i = 0; i < count; i++) {
-        list.push(Mock.mock({
-          articleId: '@natural',
-          articleTitle: '@ctitle(20,30)',
-          articleCover: '@image("100x100")',
-          auditStatus: '@natural(0,2)',
-          auditTime: '@date("yy-MM-dd hh:mm:ss")',
-          auditBy: '@cname(2,6)',
-          status: '@natural(0,1)'
-        }))
-      }
-      this.list = list
-      this.initPreviewList(list)
+      this.listLoading = true
+      this.listQuery.authUserId = this.authUserId
+      getImageList(this.listQuery)
+        .then(res => {
+          console.log(res)
+          if (res.code !== 0) return
+          this.list = res.data.list
+          this.total = res.data.total
+        })
+        .finally(() => {
+          this.listLoading = false
+        })
     },
     // 初始化预览图片列表
     initPreviewList(list) {
       list.forEach(item => this.srcList.push(item.articleCover))
+    },
+    // 删除图片
+    async handleRemoveImage(row) {
+      const text = await this.$confirm('确认删除该图片吗？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).catch(() => {
+        this.$message.info('已取消操作')
+      })
+      if (text !== 'confirm') return
+      removeImage({ imageId: row.imageId })
+        .then(res => {
+          if (res.code !== 0) return
+          this.$message.success(res.data)
+          this.getList(this.listQuery)
+        })
+    },
+    // 状态改变
+    handleChangeStatus(item) {
+      this.listLoading = true
+      // const params = {
+      //   authId: item.authId,
+      //   status: item.status ? 1 : 0
+      // }
+      console.log(item)
+      const params = {
+        imageId: item.imageId,
+        status: item.status === 1 ? 0 : 1
+      }
+      changeImageStatus(params).then(res => {
+        // this.$message.success(res.data)
+        this.$message({
+          message: res.data,
+          duration: 500,
+          type: 'success'
+        })
+        this.getList()
+      }).catch(err => {
+        console.log(err)
+      }).finally(() => {
+        this.listLoading = false
+      })
     }
   }
 }

src/views/authentic/doc/videoList.vue

@@ -4,7 +4,7 @@
     <div class="filter-container">
       <span>视频标题:</span>
       <el-input
-        v-model="listQuery.articleTitle"
+        v-model="listQuery.videoTitle"
         placeholder="视频标题"
         style="width: 200px"
         class="filter-item"
@@ -12,7 +12,7 @@
       />
       <span>审核状态:</span>
       <el-select
-        v-model="listQuery.lowerAuditStatus"
+        v-model="listQuery.auditStatus"
         placeholder="审核状态"
         clearable
         style="width: 200px"
@@ -53,12 +53,28 @@
       cell-class-name="table-cell"
     >
       <el-table-column label="序号" type="index" width="80" align="center" />
-      <el-table-column label="视频标题" prop="articleTitle" align="center" />
+      <el-table-column label="视频标题" prop="videoTitle" align="center" />
       <el-table-column label="审核状态" width="180px" align="center">
         <template slot-scope="{ row }">
-          <el-tag v-if="row.auditStatus === 0" size="small" type="danger">审核未通过</el-tag>
-          <el-tag v-if="row.auditStatus === 1" size="small" type="success">审核通过</el-tag>
           <el-tag v-if="row.auditStatus === 2" size="small" type="warning">待审核</el-tag>
+          <el-tag v-if="row.auditStatus === 1" size="small" type="success">审核通过</el-tag>
+          <!-- 未通过原因展示 -->
+          <template v-if="row.auditStatus === 0">
+            <!-- <span class="status danger">审核未通过&nbsp;</span> -->
+            <el-popover
+              placement="top-start"
+              title="审核说明"
+              width="400"
+              trigger="hover"
+              :content="row.invalidReason"
+            >
+              <el-tag slot="reference" size="small" type="danger" class="reason">
+                <span>审核未通过</span>
+                <span class="el-icon-question status danger " />
+              </el-tag>
+            </el-popover>
+            <!-- 未通过原因展示END -->
+          </template>
         </template>
       </el-table-column>
       <el-table-column label="上线状态" width="180px" align="center">
@@ -80,42 +96,51 @@
           </template>
         </template>
       </el-table-column>
-      <el-table-column label="审核时间" width="240px" align="center">
+      <el-table-column label="创建时间" width="240px" align="center">
         <template slot-scope="{row}">
-          <span v-if="row.auditStatus!==2">{{ row.auditTime | formatTime }}</span>
-          <span v-else>—</span>
+          {{ row.createTime | formatTime }}
         </template>
       </el-table-column>
       <el-table-column label="操作" width="240px" align="center">
-        <template>
-          <el-button type="primary" size="mini" style="margin-right:5px" icon="el-icon-edit" @click="handleShowDialog('edit')">编辑</el-button>
-          <el-button type="danger" size="mini" style="margin-right:5px" icon="el-icon-s-check">删除</el-button>
+        <template slot-scope="{row}">
+          <el-button type="primary" size="mini" style="margin-right:5px" icon="el-icon-edit" @click="handleShowDialog('edit',row)">编辑</el-button>
+          <el-button type="danger" size="mini" style="margin-right:5px" icon="el-icon-s-check" @click="handleRemoveVideo(row)">删除</el-button>
         </template>
       </el-table-column>
     </el-table>
     <!-- 表格区域END -->
+    <pagination v-show="total>0" :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize" @pagination="getList(listQuery)" />
     <!-- 视频预览对话框 -->
     <el-dialog
       :title="dialogTitle"
       :visible.sync="dialogVisible"
       width="40%"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
       @closed="dialogColosed"
     >
       <el-form ref="formRef" :model="dialogData" label-width="110px" :rules="dialogFormRules">
-        <el-form-item label="标题：" prop="title">
-          <el-input v-model="dialogData.title" maxlength="50" show-word-limit />
+        <el-form-item label="标题：" prop="videoTitle">
+          <el-input v-model="dialogData.videoTitle" maxlength="50" show-word-limit />
         </el-form-item>
-        <el-form-item label="视频链接：" prop="url">
-          <div class="clearfix">
-            <el-input v-model="dialogData.url" style="width:80%" class="fl" />
+        <el-form-item ref="formVideoUrlRef" label="视频链接：" prop="videoUrl">
+          <div class="clearfix video-upload-box" :class="{hasBottom:hasVideo}">
+            <el-input v-model="dialogData.videoUrl" style="width:80%" class="fl" :disabled="hasVideo" />
             <el-upload
-              style="width:18%"
+              ref="uploadRef"
               class="upload-demo fr"
               accept=".mp4"
+              :limit="1"
+              :auto-upload="false"
+              :show-file-list="true"
               :headers="headers"
               :action="action"
+              :file-list="fileList"
+              :on-success="handleUploadSuccess"
+              :on-change="handleUploadChange"
+              :on-remove="handleFileRemove"
             >
-              <el-button type="primary" style="width:100%">上传视频</el-button>
+              <el-button :disabled="hasVideo" type="primary" style="width:100%">选择视频</el-button>
             </el-upload>
           </div>
           <span style="color:#999;font-size:12px">如果没有链接，可以点击右侧的上传视频，视频大小不能超过<i style="color:red">*50MB*</i></span>
@@ -123,7 +148,7 @@
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button @click="dialogVisible = false">取 消</el-button>
-        <el-button type="primary" @click="handleAuditStatus">提 交</el-button>
+        <el-button type="primary" :loading="submitLoading" @click="handleSubmit">提 交</el-button>
       </div>
     </el-dialog>
     <!-- 视频预览对话框END -->
@@ -131,11 +156,13 @@
 </template>
 
 <script>
-import Mock from 'mockjs'
+import Pagination from '@/components/Pagination' // secondary package based on el-pagination
 import { formatDate } from '@/utils'
 import { mapGetters } from 'vuex'
 import { getToken } from '@/utils/auth'
+import { changeVideoStatus, getVideoList, removeVideo, saveVideo } from '@/api/doc'
 export default {
+  components: { Pagination },
   filters: {
     formatTime(time) {
       if (!time) {
@@ -147,25 +174,34 @@ export default {
   data() {
     return {
       listLoading: false,
+      submitLoading: false,
       dialogVisible: false,
       dialogTitle: '添加视频',
+      total: 0,
+      hasVideo: false,
+      chooseNewVideo: false,
+      fileList: [],
+      uploadVideoUrl: '',
       listQuery: {
-        pageNum: 0, // 页码
-        pageSize: 20, // 分页大小
-        articleTitle: '', // 供应商类型
-        lowerAuditStatus: '', // 审核状态
-        status: ''
+        authUserId: '', // 供应商用户id
+        listType: 1, // 列表类型：1视频列表，2视频审核列表
+        videoTitle: '', // 供应商类型
+        auditStatus: '', // 审核状态：0审核未通过，1审核通过，2待审核
+        status: '', // 视频状态：0已下线，1已上线，2待上线
+        pageNum: 1, // 页码
+        pageSize: 10 // 分页大小
       },
       dialogData: {
-        title: '',
-        url: ''
+        videoId: '',
+        authUserId: '',
+        videoTitle: '',
+        videoUrl: ''
       },
       dialogFormRules: {
-        title: [{ required: true, message: '标题不能为空', trigger: 'blur' }],
-        url: [{ required: true, message: '链接不能为空', trigger: 'blur' }]
+        videoTitle: [{ required: true, message: '标题不能为空', trigger: 'blur' }],
+        videoUrl: [{ required: true, message: '链接不能为空', trigger: ['change', 'blur'] }]
       },
-      list: [],
-      srcList: []
+      list: []
     }
   },
   computed: {
@@ -176,7 +212,7 @@ export default {
       }
     },
     action() {
-      return `${process.env.VUE_APP_UPLOAD_API}/upload/image`
+      return `${process.env.VUE_APP_UPLOAD_API}/upload/file`
     }
   },
   created() {
@@ -185,35 +221,157 @@ export default {
   methods: {
     // 获取列表数据
     getList() {
-      const count = 10
-      const list = []
-
-      for (let i = 0; i < count; i++) {
-        list.push(Mock.mock({
-          articleId: '@natural',
-          articleTitle: '@ctitle(20,30)',
-          articleCover: '@image("100x100")',
-          auditStatus: '@natural(0,2)',
-          auditTime: '@date("yy-MM-dd hh:mm:ss")',
-          auditBy: '@cname(2,6)',
-          status: '@natural(0,1)'
-        }))
-      }
-      this.list = list
-      this.initPreviewList(list)
+      this.listLoading = true
+      this.listQuery.authUserId = this.authUserId
+      getVideoList(this.listQuery)
+        .then(res => {
+          if (res.code !== 0) return
+          this.list = res.data.list
+          this.total = res.data.total
+          console.log(res)
+        })
+        .finally(() => {
+          this.listLoading = false
+        })
     },
     // 初始化预览图片列表
     initPreviewList(list) {
       list.forEach(item => this.srcList.push(item.articleCover))
     },
-    handleAuditStatus() {
+    // 提交
+    handleSubmit() {
+      // 对标题字段进行规则校验
+      this.$refs.formRef.validateField('videoTitle', (error) => {
+        if (!error) {
+          /**
+           * 保存判定
+           * 1：videoUrl 为空  选择了视频
+           * 2：videoUrl 不为空 选择了视频
+           * 3：videoUrl 不为空  未选择视频
+           *  */
+          this.submitLoading = true;
+          (this.dialogData.videoUrl && (!this.hasVideo || (this.hasVideo && !this.chooseNewVideo))) ? this.save() : this.$refs.uploadRef.submit()
+        }
+      })
     },
-    handleShowDialog() {
-      this.dialogVisible = true
+    // 保存视频
+    save() {
+      this.$refs.formRef.validate(valide => {
+        if (!valide) return
+        this.dialogData.authUserId = this.authUserId
+        if (this.uploadVideoUrl) {
+          this.dialogData.videoUrl = this.uploadVideoUrl
+        }
+        console.log('保存')
+        saveVideo(this.dialogData)
+          .then(res => {
+            console.log(res)
+            if (res.code !== 0) return
+            this.dialogVisible = false
+            this.getList()
+            this.$message({
+              type: 'success',
+              message: res.data,
+              duration: 500
+            })
+          }).finally(() => {
+            this.submitLoading = false
+          })
+      })
+    },
+    // 设置表单初始值
+    setDialogData(row) {
+      if (!row) return
+      console.log(row)
+      for (const key in this.dialogData) {
+        if (Object.hasOwnProperty.call(this.dialogData, key)) {
+          this.dialogData[key] = row[key]
+        }
+      }
+      if (this.dialogData.videoUrl) {
+        this.fileList.push({ name: `删除当前视频后可上传新视频`, url: row.videoUrl })
+        this.hasVideo = true
+      }
+    },
+    // 删除视频
+    async handleRemoveVideo(row) {
+      const text = await this.$confirm('视频删除后不可恢复，确认删除该视频吗？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).catch(() => {
+        this.$message.info('已取消操作')
+      })
+      if (text !== 'confirm') return
+      removeVideo({ videoId: row.videoId })
+        .then(res => {
+          if (res.code !== 0) return
+          this.$message.success(res.data)
+          this.getList()
+        })
     },
-    dialogColosed(type) {
+    // 显示对话框
+    handleShowDialog(type, row) {
       this.dialogTitle = type === 'add' ? '添加视频' : '修改视频'
-      this.$refs.formRef.resetFields()
+      this.setDialogData(row)
+      this.dialogVisible = true
+      this.$refs?.formRef?.clearValidate()
+    },
+    // 对话框关闭的回调
+    dialogColosed() {
+      this.fileList = []
+      this.hasVideo = false
+      this.dialogData.videoId = ''
+      this.dialogData.authUserId = ''
+      this.dialogData.videoTitle = ''
+      this.dialogData.videoUrl = ''
+      this.chooseNewVideo = false
+      this.uploadVideoUrl = ''
+    },
+    // 视频上传成功
+    handleUploadSuccess(response, file, fileList) {
+      console.log(response)
+      // this.dialogData.videoUrl = response.fileUrl
+      this.uploadVideoUrl = response.fileUrl
+      this.save()
+    },
+    // 选添加文件、上传成功和上传失败时都会被调用
+    handleUploadChange(file, fileList) {
+      console.log(file)
+      this.chooseNewVideo = true
+      this.hasVideo = fileList.length > 0
+      this.dialogData.videoUrl = '-'
+    },
+    // 移除视频
+    handleFileRemove(file, fileList) {
+      this.hasVideo = fileList.length > 0
+      this.dialogData.videoUrl = ''
+    },
+    // 状态改变
+    handleChangeStatus(item) {
+      this.listLoading = true
+      // const params = {
+      //   authId: item.authId,
+      //   status: item.status ? 1 : 0
+      // }
+      console.log(item)
+      const params = {
+        videoId: item.videoId,
+        status: item.status === 1 ? 0 : 1
+      }
+      changeVideoStatus(params).then(res => {
+        // this.$message.success(res.data)
+        this.$message({
+          message: res.data,
+          duration: 500,
+          type: 'success'
+        })
+        this.getList()
+      }).catch(err => {
+        console.log(err)
+      }).finally(() => {
+        this.listLoading = false
+      })
     }
   }
 }
@@ -244,4 +402,7 @@ export default {
 .el-badge{
   margin: 0 6px;
 }
+.hasBottom{
+  padding-bottom: 40px;
+}
 </style>

src/views/authentic/feedback/index.vue

@@ -117,7 +117,7 @@ export default {
       listLoading: false,
       listQuery: {
         pageNum: 0, // 页码
-        pageSize: 20, // 分页大小
+        pageSize: 10, // 分页大小
         articleTitle: '', // 供应商类型
         lowerAuditStatus: '', // 审核状态
         status: ''

src/views/authentic/product/index.vue

@@ -195,7 +195,7 @@ export default {
         const { total, list } = res.data
         this.total = total
         this.list = list
-        this.checkAuditFailedList(list)
+        // this.checkAuditFailedList(list)
       }).finally(() => {
         this.listLoading = false
       })

src/views/authentic/proxy/proxy.vue

@@ -1,3 +1,6 @@
+<template>
+  <div />
+</template>
 <script>
 import { mapGetters } from 'vuex'
 export default {

src/views/authentic/review/auth/index.vue

@@ -119,7 +119,7 @@ export default {
         linkMan: '', // 联系人
         mobile: '', // 手机号
         pageNum: 0, // 页码
-        pageSize: 20, // 分页大小
+        pageSize: 10, // 分页大小
         shopName: '', // 供应商名称
         shopType: '', // 供应商类型
         lowerAuditStatus: ''

src/views/authentic/review/doc/articleDetail.vue

@@ -1,19 +1,107 @@
 <template>
   <div class="app-container">
-    <div v-html="innerHtml" />
+    <el-form ref="formRef" :model="formData" :rules="formRules" class="detail" label-width="100px">
+      <el-form-item label="文章标题：">{{ articleTitle }}</el-form-item>
+      <el-form-item label="文章封面：">
+        <el-image style="width:200px;height:200px" :src="articleImage" :preview-src-list="srcList" />
+      </el-form-item>
+      <el-form-item label="文章内容：">
+        <div class="iframe" v-html="articleContent" />
+        <!-- <iframe width="375" height="667" :src="previewSrc" frameborder="1" /> -->
+      </el-form-item>
+      <el-form-item label="审核状态：">
+        <el-radio-group v-model="formData.auditStatus">
+          <el-radio :label="1">通过</el-radio>
+          <el-radio :label="0">不通过</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item v-if="formData.auditStatus!==1" prop="invalidReason" label="原因：">
+        <el-input v-model="formData.invalidReason" type="textarea" placeholder="请说明原因" />
+      </el-form-item>
+      <el-form-item label="">
+        <el-button type="info" @click="$_back">返回</el-button>
+        <el-button type="primary" @click="submit">提交</el-button>
+      </el-form-item>
+    </el-form>
   </div>
 </template>
 
 <script>
+import { getArticleDeatil } from '@/api/doc'
+import { auditArticle } from '@/api/docReview'
+import { mapGetters } from 'vuex'
 export default {
   data() {
     return {
-      innerHtml: '<h2>我是文章标题</h2>'
+      articleContent: '',
+      articleTitle: '',
+      articleImage: '',
+      srcList: [],
+      previewSrc: '',
+      formData: {
+        articleId: '', // 文章id
+        auditStatus: 1, // 审核状态
+        invalidReason: '', // 不同过原因
+        auditBy: '' // 审核人
+      },
+      formRules: {
+        invalidReason: { required: true, message: '不通过原因不能为空', tigger: 'blur' }
+      }
+    }
+  },
+  computed: {
+    ...mapGetters(['authUserId'])
+  },
+  created() {
+    this.formData.articleId = this.$route.query.articleId
+    this.getDetail()
+  },
+  methods: {
+    getDetail() {
+      getArticleDeatil({ articleId: this.formData.articleId })
+        .then(res => {
+          console.log(res)
+          if (res.code !== 0) return
+          this.articleContent = res.data.articleContent
+          this.articleTitle = res.data.articleTitle
+          this.articleImage = res.data.articleImage
+          this.srcList.push(this.articleImage)
+        })
+    },
+    submit() {
+      this.$refs.formRef.validate(valide => {
+        if (!valide) return
+        this.formData.auditBy = this.authUserId
+        auditArticle(this.formData)
+          .then(res => {
+            console.log(res)
+            if (res.code !== 0) return
+            this.$message({
+              message: res.data,
+              type: 'success',
+              duration: 1000
+            })
+            // 如果保存文章成功就要关闭当前页面
+            this.$store.dispatch('tagsView/delView', this.$route)
+            this.$router.back()
+          })
+      })
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-
+.iframe{
+  height: 600px;
+  overflow: scroll;
+  border: 1px solid #999;
+}
+.detail{
+  width: 1000px;
+  margin: 30px auto;
+}
+.el-button{
+  width: 120px;
+}
 </style>

src/views/authentic/review/doc/articleList.vue

@@ -12,7 +12,7 @@
       />
       <span>审核状态:</span>
       <el-select
-        v-model="listQuery.lowerAuditStatus"
+        v-model="listQuery.auditStatus"
         placeholder="审核状态"
         clearable
         style="width: 200px"
@@ -21,8 +21,8 @@
       >
         <el-option label="全部" value="" />
         <el-option label="待审核" :value="2" />
-        <el-option label="审核通过" :value="0" />
-        <el-option label="审核未通过" :value="1" />
+        <el-option label="审核通过" :value="1" />
+        <el-option label="审核未通过" :value="0" />
       </el-select>
       <el-button type="primary" icon="el-icon-search" @click="getList">查询</el-button>
     </div>
@@ -43,50 +43,71 @@
         <template slot-scope="{ row }">
           <el-image
             style="width: 50px; height: 50px"
-            :src="row.articleCover"
-            :preview-src-list="srcList"
+            :src="row.articleImage"
           /></template>
       </el-table-column>
       <el-table-column label="审核状态" width="150px" align="center">
         <template slot-scope="{ row }">
-          <el-tag v-if="row.articleAuditStatus === 0" size="small" type="danger">审核未通过</el-tag>
-          <el-tag v-if="row.articleAuditStatus === 1" size="small" type="success">审核通过</el-tag>
-          <el-tag v-if="row.articleAuditStatus === 2" size="small" type="warning">待审核</el-tag>
+          <el-tag v-if="row.auditStatus === 2" size="small" type="warning">待审核</el-tag>
+          <el-tag v-if="row.auditStatus === 1" size="small" type="success">审核通过</el-tag>
+          <!-- 未通过原因展示 -->
+          <template v-if="row.auditStatus === 0">
+            <!-- <span class="status danger">审核未通过&nbsp;</span> -->
+            <el-popover
+              placement="top-start"
+              title="审核说明"
+              width="400"
+              trigger="hover"
+              :content="row.invalidReason"
+            >
+              <el-tag slot="reference" size="small" type="danger" class="reason">
+                <span>审核未通过</span>
+                <span class="el-icon-question status danger " />
+              </el-tag>
+            </el-popover>
+            <!-- 未通过原因展示END -->
+          </template>
         </template>
       </el-table-column>
       <el-table-column label="审核时间" width="250px" align="center">
         <template slot-scope="{row}">
-          <span v-if="row.articleAuditStatus!==2">{{ row.auditTime | formatTime }}</span>
+          <span v-if="row.auditStatus!==2">{{ row.auditTime | formatTime }}</span>
           <span v-else>—</span>
         </template>
       </el-table-column>
 
       <el-table-column label="审核人" align="center" width="200px">
         <template slot-scope="{row}">
-          <span v-if="row.articleAuditStatus!==2">{{ row.auditBy }}</span>
+          <span v-if="row.auditStatus!==2">{{ row.auditBy }}</span>
           <span v-else>—</span>
         </template>
       </el-table-column>
       <el-table-column label="操作" width="150px" align="center">
         <template slot-scope="{row}">
           <el-button
-            type="warning"
+            v-if="row.auditStatus===2"
+            type="primary"
             size="mini"
             style="margin-right:5px"
             icon="el-icon-s-check"
             @click="$_navigationTo(`/review/doc/article/detail?articleId=${row.articleId}`)"
           >审核</el-button>
+          <span v-else class="status success el-icon-check">&nbsp;已审核</span>
         </template>
       </el-table-column>
     </el-table>
     <!-- 表格区域END -->
+    <!-- 页码 -->
+    <pagination v-show="total > 0" :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize" @pagination="getList(listQuery)" />
   </div>
 </template>
 
 <script>
-import Mock from 'mockjs'
+import Pagination from '@/components/Pagination'
 import { formatDate } from '@/utils'
+import { getArticleList } from '@/api/doc'
 export default {
+  components: { Pagination },
   filters: {
     formatTime(time) {
       if (!time) {
@@ -98,37 +119,37 @@ export default {
   data() {
     return {
       listLoading: false,
+      total: 0,
       listQuery: {
-        pageNum: 0, // 页码
-        pageSize: 20, // 分页大小
-        articleTitle: '', // 供应商类型
-        lowerAuditStatus: '' // 审核状态
+        authUserId: '', // 机构id
+        auditStatus: '', // 审核状态
+        articleTitle: '', // 文章标题
+        listType: 2, // 列表类型：1文章列表，2文章审核列表
+        pageNum: 1, // 页码
+        pageSize: 10, // 分页大小
+        status: '' // 文章状态：0已下线，1已上线，2待上线
       },
-      list: [],
-      srcList: []
+      list: []
     }
   },
   created() {
+    this.listQuery.authUserId = this.$route.query.authUserId
     this.getList()
   },
   methods: {
     // 获取列表数据
     getList() {
-      const count = 10
-      const list = []
-
-      for (let i = 0; i < count; i++) {
-        list.push(Mock.mock({
-          articleId: '@natural',
-          articleTitle: '@ctitle(5,10)', // 供应商名称
-          articleCover: '@image("100x100")',
-          articleAuditStatus: '@natural(0,2)', // 审核状态
-          auditTime: '@date("yy-MM-dd hh:mm:ss")',
-          auditBy: '@cname(2,6)'
-        }))
-      }
-      this.list = list
-      this.initPreviewList(list)
+      this.listLoading = true
+      getArticleList(this.listQuery)
+        .then(res => {
+          if (res.code !== 0) return
+          this.list = res.data.list
+          this.total = res.data.total
+          console.log(res)
+        })
+        .finally(() => {
+          this.listLoading = false
+        })
     },
     // 初始化预览图片列表
     initPreviewList(list) {

src/views/authentic/review/doc/fileList.vue

@@ -12,7 +12,7 @@
       />
       <span>审核状态:</span>
       <el-select
-        v-model="listQuery.lowerAuditStatus"
+        v-model="listQuery.auditStatus"
         placeholder="审核状态"
         clearable
         style="width: 200px"
@@ -21,8 +21,8 @@
       >
         <el-option label="全部" value="" />
         <el-option label="待审核" :value="2" />
-        <el-option label="审核通过" :value="0" />
-        <el-option label="审核未通过" :value="1" />
+        <el-option label="审核通过" :value="1" />
+        <el-option label="审核未通过" :value="0" />
       </el-select>
       <el-button type="primary" icon="el-icon-search" @click="getList">查询</el-button>
     </div>
@@ -41,37 +41,57 @@
       <el-table-column label="文件名称" prop="fileTitle" align="center" />
       <el-table-column label="审核状态" width="150px" align="center">
         <template slot-scope="{ row }">
-          <el-tag v-if="row.fileAuditStatus === 0" size="small" type="danger">审核未通过</el-tag>
-          <el-tag v-if="row.fileAuditStatus === 1" size="small" type="success">审核通过</el-tag>
-          <el-tag v-if="row.fileAuditStatus === 2" size="small" type="warning">待审核</el-tag>
+          <el-tag v-if="row.auditStatus === 2" size="small" type="warning">待审核</el-tag>
+          <el-tag v-if="row.auditStatus === 1" size="small" type="success">审核通过</el-tag>
+          <!-- 未通过原因展示 -->
+          <template v-if="row.auditStatus === 0">
+            <!-- <span class="status danger">审核未通过&nbsp;</span> -->
+            <el-popover
+              placement="top-start"
+              title="审核说明"
+              width="400"
+              trigger="hover"
+              :content="row.invalidReason"
+            >
+              <el-tag slot="reference" size="small" type="danger" class="reason">
+                <span>审核未通过</span>
+                <span class="el-icon-question status danger " />
+              </el-tag>
+            </el-popover>
+            <!-- 未通过原因展示END -->
+          </template>
         </template>
       </el-table-column>
       <el-table-column label="审核时间" width="250px" align="center">
         <template slot-scope="{row}">
-          <span v-if="row.fileAuditStatus!==2">{{ row.auditTime | formatTime }}</span>
+          <span v-if="row.auditStatus!==2">{{ row.auditTime | formatTime }}</span>
           <span v-else>—</span>
         </template>
       </el-table-column>
 
       <el-table-column label="审核人" align="center" width="200px">
         <template slot-scope="{row}">
-          <span v-if="row.fileAuditStatus!==2">{{ row.auditBy }}</span>
+          <span v-if="row.auditStatus!==2">{{ row.auditBy }}</span>
           <span v-else>—</span>
         </template>
       </el-table-column>
       <el-table-column label="操作" width="150px" align="center">
         <template slot-scope="{row}">
           <el-button
-            type="warning"
+            v-if="row.auditStatus===2"
+            type="primary"
             size="mini"
             style="margin-right:5px"
             icon="el-icon-s-check"
             @click="handleShowDialog(row)"
           >审核</el-button>
+          <span v-else class="status success el-icon-check">&nbsp;已审核</span>
         </template>
       </el-table-column>
     </el-table>
     <!-- 表格区域END -->
+    <!-- 页码 -->
+    <pagination v-show="total > 0" :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize" @pagination="getList(listQuery)" />
     <!-- 视频预览对话框 -->
     <el-dialog
       title="视频审核"
@@ -107,10 +127,14 @@
 </template>
 
 <script>
+import Pagination from '@/components/Pagination'
 import openWindow from '@/utils/open-window'
-import Mock from 'mockjs'
 import { formatDate } from '@/utils'
+import { getFileList } from '@/api/doc'
+import { auditfile } from '@/api/docReview'
+import { mapGetters } from 'vuex'
 export default {
+  components: { Pagination },
   filters: {
     formatTime(time) {
       if (!time) {
@@ -123,68 +147,89 @@ export default {
     return {
       dialogVisible: false,
       listLoading: false,
+      total: 0,
       listQuery: {
-        pageNum: 0, // 页码
-        pageSize: 20, // 分页大小
-        fileTitle: '', // 供应商类型
-        lowerAuditStatus: '' // 审核状态
+        authUserId: '', // 机构id
+        auditStatus: '', // 审核状态
+        fileTitle: '', // 文件标题
+        listType: 2, // 列表类型
+        pageNum: 1, // 页码
+        pageSize: 10, // 分页大小
+        status: '' // 文章状态：0已下线，1已上线，2待上线
       },
       list: [],
       current: {
-        currentfileUrl: 'https://element.eleme.io',
-        fileName: '文件预览'
+        currentfileUrl: '',
+        fileName: ''
       },
       dialogData: {
-        auditStatus: 1,
-        invalidReason: ''
+        fileId: '', // 文章id
+        auditStatus: 1, // 审核状态
+        invalidReason: '', // 不同过原因
+        auditBy: '' // 审核人
       },
       dialogFormRules: {
-        invalidReason: {
-          required: true,
-          message: '不通过原因不能为空',
-          tigger: 'blur'
-        }
+        invalidReason: { required: true, message: '不通过原因不能为空', tigger: 'blur' }
       }
     }
   },
+  computed: {
+    ...mapGetters(['authUserId'])
+  },
   created() {
+    this.listQuery.authUserId = this.$route.query.authUserId
     this.getList()
   },
   methods: {
     // 获取列表数据
     getList() {
-      const count = 10
-      const list = []
-
-      for (let i = 0; i < count; i++) {
-        list.push(Mock.mock({
-          fileId: '@natural',
-          fileTitle: '@ctitle(5,10)', // 供应商名称
-          fileAuditStatus: '@natural(0,2)', // 审核状态
-          auditTime: '@date("yy-MM-dd hh:mm:ss")',
-          auditBy: '@cname(2,6)'
-        }))
-      }
-      this.list = list
+      this.listLoading = true
+      getFileList(this.listQuery)
+        .then(res => {
+          if (res.code !== 0) return
+          this.list = res.data.list
+          this.total = res.data.total
+          console.log(res)
+        })
+        .finally(() => {
+          this.listLoading = false
+        })
     },
-    handleShowDialog({ url, fileName }) {
-      // this.current.currentfileUrl = url
-      // this.current.fileName = fileName
+    handleShowDialog(row) {
+      console.log(row)
+      this.current.currentfileUrl = row.fileUrl
+      this.current.fileName = row.fileTitle
+      this.dialogData.fileId = row.fileId
       this.dialogVisible = true
     },
     dialogColosed() {
       this.currentfileUrl = ''
+      this.current.currentfileUrl = ''
+      this.current.fileName = ''
       this.dialogData.auditStatus = 1
+      this.dialogData.fileId = ''
     },
     handleAuditStatus() {
       this.$refs.formRef.validate(valid => {
         if (valid) {
-          console.log(valid)
+          this.dialogData.auditBy = this.authUserId
+          auditfile(this.dialogData)
+            .then(res => {
+              console.log(res)
+              if (res.code !== 0) return
+              this.$message({
+                message: res.data,
+                type: 'success',
+                duration: 1000
+              })
+              this.dialogVisible = false
+              this.getList()
+            })
         }
       })
     },
+    // 小窗口浏览pdf文件
     handlePreviewFile() {
-      console.log(this.current)
       openWindow(this.current.currentfileUrl, this.current.fileName, 1200, 600)
     }
   }

src/views/authentic/review/doc/imageDetail.vue

@@ -3,11 +3,11 @@
     <div class="detail">
       <el-form ref="formRef" label-width="120px" :model="formData" :rules="formRules">
         <el-form-item label="标题：">
-          {{ title }}
+          {{ imageTitle }}
         </el-form-item>
         <el-form-item label="图片：">
-          <template v-for="(item,index) in srcList">
-            <el-image :key="index" style="width: 150px; height: 150px" :src="item" :preview-src-list="srcList" />
+          <template v-for="(item,index) in imageList">
+            <el-image :key="index" style="width: 150px; height: 150px" :src="item" :preview-src-list="imageList" />
           </template>
         </el-form-item>
         <el-form-item label="审核状态：">
@@ -29,33 +29,61 @@
 </template>
 
 <script>
+import { getImageDetail } from '@/api/doc'
+import { auditImage } from '@/api/docReview'
+import { mapGetters } from 'vuex'
 export default {
   data() {
     return {
-      srcList: [
-        'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
-        'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
-        'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
-        'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
-        'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
-        'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
-        'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
-        'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg'
-      ],
-      title: '专业线贵妇级除皱产品--希腊YELLOW ROSE黄玫瑰弹力除皱精华和玻尿酸花瓣保湿水',
+      imageList: [],
+      imageTitle: '专业线贵妇级除皱产品--希腊YELLOW ROSE黄玫瑰弹力除皱精华和玻尿酸花瓣保湿水',
       formData: {
-        auditStatus: 1,
-        invalidReason: ''
+        imageId: '', // 文章id
+        auditStatus: 1, // 审核状态
+        invalidReason: '', // 不同过原因
+        auditBy: '' // 审核人
       },
       formRules: {
         invalidReason: { required: true, message: '不通过原因不能为空', tigger: 'blur' }
       }
     }
   },
+  computed: {
+    ...mapGetters(['authUserId'])
+  },
   created() {
+    this.formData.imageId = this.$route.query.imageId
+    this.getDetail()
   },
   methods: {
-    submit() {}
+    submit() {
+      this.$refs.formRef.validate(valide => {
+        if (!valide) return
+        this.formData.auditBy = this.authUserId
+        auditImage(this.formData)
+          .then(res => {
+            console.log(res)
+            if (res.code !== 0) return
+            this.$message({
+              message: res.data,
+              type: 'success',
+              duration: 1000
+            })
+            // 如果保存文章成功就要关闭当前页面
+            this.$store.dispatch('tagsView/delView', this.$route)
+            this.$router.back()
+          })
+      })
+    },
+    getDetail() {
+      getImageDetail({ imageId: this.formData.imageId })
+        .then(res => {
+          console.log(res)
+          if (res.code !== 0) return
+          this.imageList = res.data.imageList
+          this.imageTitle = res.data.imageTitle
+        })
+    }
   }
 }
 </script>

src/views/authentic/review/doc/imageList.vue

@@ -12,7 +12,7 @@
       />
       <span>审核状态:</span>
       <el-select
-        v-model="listQuery.lowerAuditStatus"
+        v-model="listQuery.auditStatus"
         placeholder="审核状态"
         clearable
         style="width: 200px"
@@ -21,8 +21,8 @@
       >
         <el-option label="全部" value="" />
         <el-option label="待审核" :value="2" />
-        <el-option label="审核通过" :value="0" />
-        <el-option label="审核未通过" :value="1" />
+        <el-option label="审核通过" :value="1" />
+        <el-option label="审核未通过" :value="0" />
       </el-select>
       <el-button type="primary" icon="el-icon-search" @click="getList">查询</el-button>
     </div>
@@ -41,44 +41,66 @@
       <el-table-column label="图片标题" prop="imageTitle" align="center" />
       <el-table-column label="审核状态" width="150px" align="center">
         <template slot-scope="{ row }">
-          <el-tag v-if="row.imageAuditStatus === 0" size="small" type="danger">审核未通过</el-tag>
-          <el-tag v-if="row.imageAuditStatus === 1" size="small" type="success">审核通过</el-tag>
-          <el-tag v-if="row.imageAuditStatus === 2" size="small" type="warning">待审核</el-tag>
+          <el-tag v-if="row.auditStatus === 2" size="small" type="warning">待审核</el-tag>
+          <el-tag v-if="row.auditStatus === 1" size="small" type="success">审核通过</el-tag>
+          <!-- 未通过原因展示 -->
+          <template v-if="row.auditStatus === 0">
+            <!-- <span class="status danger">审核未通过&nbsp;</span> -->
+            <el-popover
+              placement="top-start"
+              title="审核说明"
+              width="400"
+              trigger="hover"
+              :content="row.invalidReason"
+            >
+              <el-tag slot="reference" size="small" type="danger" class="reason">
+                <span>审核未通过</span>
+                <span class="el-icon-question status danger " />
+              </el-tag>
+            </el-popover>
+            <!-- 未通过原因展示END -->
+          </template>
         </template>
       </el-table-column>
       <el-table-column label="审核时间" width="250px" align="center">
         <template slot-scope="{row}">
-          <span v-if="row.imageAuditStatus!==2">{{ row.auditTime | formatTime }}</span>
+          <span v-if="row.auditStatus!==2">{{ row.auditTime | formatTime }}</span>
           <span v-else>—</span>
         </template>
       </el-table-column>
 
       <el-table-column label="审核人" align="center" width="200px">
         <template slot-scope="{row}">
-          <span v-if="row.imageAuditStatus!==2">{{ row.auditBy }}</span>
+          <span v-if="row.auditStatus!==2">{{ row.auditBy }}</span>
           <span v-else>—</span>
         </template>
       </el-table-column>
       <el-table-column label="操作" width="150px" align="center">
         <template slot-scope="{row}">
           <el-button
-            type="warning"
+            v-if="row.auditStatus===2"
+            type="primary"
             size="mini"
             style="margin-right:5px"
             icon="el-icon-s-check"
             @click="$_navigationTo(`/review/doc/image/detail?imageId=${row.imageId}`)"
           >审核</el-button>
+          <span v-else class="status success el-icon-check">&nbsp;已审核</span>
         </template>
       </el-table-column>
     </el-table>
     <!-- 表格区域END -->
+    <!-- 页码 -->
+    <pagination v-show="total > 0" :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize" @pagination="getList(listQuery)" />
   </div>
 </template>
 
 <script>
-import Mock from 'mockjs'
+import Pagination from '@/components/Pagination'
 import { formatDate } from '@/utils'
+import { getImageList } from '@/api/doc'
 export default {
+  components: { Pagination },
   filters: {
     formatTime(time) {
       if (!time) {
@@ -90,34 +112,37 @@ export default {
   data() {
     return {
       listLoading: false,
+      total: 0,
       listQuery: {
-        pageNum: 0, // 页码
-        pageSize: 20, // 分页大小
-        imageTitle: '', // 供应商类型
-        lowerAuditStatus: '' // 审核状态
+        authUserId: '', // 机构id
+        auditStatus: '', // 审核状态
+        imageTitle: '', // 图片标题
+        listType: 2, // 列表类型
+        pageNum: 1, // 页码
+        pageSize: 10, // 分页大小
+        status: '' // 文章状态：0已下线，1已上线，2待上线
       },
       list: []
     }
   },
   created() {
+    this.listQuery.authUserId = this.$route.query.authUserId
     this.getList()
   },
   methods: {
     // 获取列表数据
     getList() {
-      const count = 10
-      const list = []
-
-      for (let i = 0; i < count; i++) {
-        list.push(Mock.mock({
-          imageId: '@natural',
-          imageTitle: '@ctitle(5,10)', // 供应商名称
-          imageAuditStatus: '@natural(0,2)', // 审核状态
-          auditTime: '@date("yy-MM-dd hh:mm:ss")',
-          auditBy: '@cname(2,6)'
-        }))
-      }
-      this.list = list
+      this.listLoading = true
+      getImageList(this.listQuery)
+        .then(res => {
+          if (res.code !== 0) return
+          this.list = res.data.list
+          this.total = res.data.total
+          console.log(res)
+        })
+        .finally(() => {
+          this.listLoading = false
+        })
     }
   }
 }

src/views/authentic/review/doc/index.vue

@@ -83,7 +83,7 @@
       </el-table-column>
       <el-table-column label="待审核" width="460px" align="center">
         <template slot-scope="{ row }">
-          <el-badge :hidden="row.lowerAuditStatus === 1" :value="row.waitAuditArticleNum" :max="99">
+          <el-badge :hidden="row.articleWaitNum === 0" :value="row.articleWaitNum" :max="99">
             <el-button
               type="primary"
               icon="el-icon-tickets"
@@ -91,7 +91,7 @@
               @click="$_navigationTo(`/review/doc/article?authUserId=${row.authUserId}`)"
             >文章</el-button>
           </el-badge>
-          <el-badge :hidden="row.lowerAuditStatus === 1" :value="row.waitAuditimageNum" :max="99">
+          <el-badge :hidden="row.imageWaitNum === 0" :value="row.imageWaitNum" :max="99">
             <el-button
               type="primary"
               icon="el-icon-picture-outline"
@@ -99,7 +99,7 @@
               @click="$_navigationTo(`/review/doc/image?authUserId=${row.authUserId}`)"
             >图片</el-button>
           </el-badge>
-          <el-badge :hidden="row.lowerAuditStatus === 1" :value="row.waitAuditVideoNum" :max="99">
+          <el-badge :hidden="row.videoWaitNum === 0" :value="row.videoWaitNum" :max="99">
             <el-button
               type="primary"
               icon="el-icon-video-camera"
@@ -107,7 +107,7 @@
               @click="$_navigationTo(`/review/doc/video?authUserId=${row.authUserId}`)"
             >视频</el-button>
           </el-badge>
-          <el-badge :hidden="row.lowerAuditStatus === 1" :value="row.waitAuditfileNum" :max="99">
+          <el-badge :hidden="row.fileWaitNum === 0" :value="row.fileWaitNum" :max="99">
             <el-button
               type="primary"
               icon="el-icon-document-copy"
@@ -119,23 +119,30 @@
       </el-table-column>
     </el-table>
     <!-- 表格区域END -->
+    <!-- 页码 -->
+    <pagination v-show="total > 0" :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize" @pagination="getList(listQuery)" />
   </div>
 </template>
 
 <script>
-import Mock from 'mockjs'
+import Pagination from '@/components/Pagination'
+import { fetchSupplierList } from '@/api/supplier'
 export default {
+  components: { Pagination },
   data() {
     return {
       listLoading: false,
+      total: 0,
       listQuery: {
+        listType: 3,
+        brandId: '', // 品牌id
         linkMan: '', // 联系人
         mobile: '', // 手机号
         pageNum: 0, // 页码
-        pageSize: 20, // 分页大小
+        pageSize: 10, // 分页大小
         shopName: '', // 供应商名称
         shopType: '', // 供应商类型
-        lowerAuditStatus: '' // 审核状态
+        lowerAuditStatus: ''
       },
       list: []
     }
@@ -145,24 +152,16 @@ export default {
   },
   methods: {
     getList() {
-      const count = 10
-      const list = []
-
-      for (let i = 0; i < count; i++) {
-        list.push(Mock.mock({
-          authUserId: '@natural',
-          name: '@ctitle(5,10)', // 供应商名称
-          shopType: '@natural(1,2)', // 供应商类型
-          mobile: "@string('number',11)", // 手机号
-          linkMan: '@cname(2,6)', // 联系人
-          lowerAuditStatus: '@natural(0,1)', // 审核状态
-          waitAuditArticleNum: '@natural(0,200)', // 待审核文章条数
-          waitAuditimageNum: '@natural(0,200)', // 待审核图片条数
-          waitAuditVideoNum: '@natural(0,200)', // 待审核视频条数
-          waitAuditfileNum: '@natural(0,200)' // 待审核文件条数
-        }))
-      }
-      this.list = list
+      this.listLoading = true
+      fetchSupplierList(this.listQuery)
+        .then(res => {
+          if (res.code !== 0) return
+          this.list = res.data.list
+          this.total = res.data.total
+        })
+        .finally(() => {
+          this.listLoading = false
+        })
     }
   }
 }

src/views/authentic/review/doc/videoList.vue

@@ -12,7 +12,7 @@
       />
       <span>审核状态:</span>
       <el-select
-        v-model="listQuery.lowerAuditStatus"
+        v-model="listQuery.auditStatus"
         placeholder="审核状态"
         clearable
         style="width: 200px"
@@ -21,8 +21,8 @@
       >
         <el-option label="全部" value="" />
         <el-option label="待审核" :value="2" />
-        <el-option label="审核通过" :value="0" />
-        <el-option label="审核未通过" :value="1" />
+        <el-option label="审核通过" :value="1" />
+        <el-option label="审核未通过" :value="0" />
       </el-select>
       <el-button type="primary" icon="el-icon-search" @click="getList">查询</el-button>
     </div>
@@ -41,37 +41,57 @@
       <el-table-column label="视频名称" prop="videoTitle" align="center" />
       <el-table-column label="审核状态" width="150px" align="center">
         <template slot-scope="{ row }">
-          <el-tag v-if="row.videoAuditStatus === 0" size="small" type="danger">审核未通过</el-tag>
-          <el-tag v-if="row.videoAuditStatus === 1" size="small" type="success">审核通过</el-tag>
-          <el-tag v-if="row.videoAuditStatus === 2" size="small" type="warning">待审核</el-tag>
+          <el-tag v-if="row.auditStatus === 2" size="small" type="warning">待审核</el-tag>
+          <el-tag v-if="row.auditStatus === 1" size="small" type="success">审核通过</el-tag>
+          <!-- 未通过原因展示 -->
+          <template v-if="row.auditStatus === 0">
+            <!-- <span class="status danger">审核未通过&nbsp;</span> -->
+            <el-popover
+              placement="top-start"
+              title="审核说明"
+              width="400"
+              trigger="hover"
+              :content="row.invalidReason"
+            >
+              <el-tag slot="reference" size="small" type="danger" class="reason">
+                <span>审核未通过</span>
+                <span class="el-icon-question status danger " />
+              </el-tag>
+            </el-popover>
+            <!-- 未通过原因展示END -->
+          </template>
         </template>
       </el-table-column>
       <el-table-column label="审核时间" width="250px" align="center">
         <template slot-scope="{row}">
-          <span v-if="row.videoAuditStatus!==2">{{ row.auditTime | formatTime }}</span>
+          <span v-if="row.auditStatus!==2">{{ row.auditTime | formatTime }}</span>
           <span v-else>—</span>
         </template>
       </el-table-column>
 
       <el-table-column label="审核人" align="center" width="200px">
         <template slot-scope="{row}">
-          <span v-if="row.videoAuditStatus!==2">{{ row.auditBy }}</span>
+          <span v-if="row.auditStatus!==2">{{ row.auditBy }}</span>
           <span v-else>—</span>
         </template>
       </el-table-column>
       <el-table-column label="操作" width="150px" align="center">
         <template slot-scope="{row}">
           <el-button
-            type="warning"
+            v-if="row.auditStatus===2"
+            type="primary"
             size="mini"
             style="margin-right:5px"
             icon="el-icon-s-check"
             @click="handleShowDialog(row)"
           >审核</el-button>
+          <span v-else class="status success el-icon-check">&nbsp;已审核</span>
         </template>
       </el-table-column>
     </el-table>
     <!-- 表格区域END -->
+    <!-- 页码 -->
+    <pagination v-show="total > 0" :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize" @pagination="getList(listQuery)" />
     <!-- 视频预览对话框 -->
     <el-dialog
       title="视频审核"
@@ -108,9 +128,13 @@
 </template>
 
 <script>
-import Mock from 'mockjs'
+import Pagination from '@/components/Pagination'
 import { formatDate } from '@/utils'
+import { getVideoList } from '@/api/doc'
+import { auditVideo } from '@/api/docReview'
+import { mapGetters } from 'vuex'
 export default {
+  components: { Pagination },
   filters: {
     formatTime(time) {
       if (!time) {
@@ -123,17 +147,23 @@ export default {
     return {
       dialogVisible: false,
       listLoading: false,
+      total: 0,
       listQuery: {
-        pageNum: 0, // 页码
-        pageSize: 20, // 分页大小
-        videoTitle: '', // 供应商类型
-        lowerAuditStatus: '' // 审核状态
+        authUserId: '', // 机构id
+        auditStatus: '', // 审核状态
+        videoTitle: '', // 视频标题
+        listType: 2, // 列表类型
+        pageNum: 1, // 页码
+        pageSize: 10, // 分页大小
+        status: '' // 文章状态：0已下线，1已上线，2待上线
       },
       list: [],
       currentVideoUrl: '',
       dialogData: {
-        auditStatus: 1,
-        invalidReason: ''
+        videoId: '', // 文章id
+        auditStatus: 1, // 审核状态
+        invalidReason: '', // 不同过原因
+        auditBy: '' // 审核人
       },
       dialogFormRules: {
         invalidReason: {
@@ -144,38 +174,60 @@ export default {
       }
     }
   },
+  computed: {
+    ...mapGetters(['authUserId'])
+  },
   created() {
+    this.listQuery.authUserId = this.$route.query.authUserId
     this.getList()
   },
   methods: {
     // 获取列表数据
     getList() {
-      const count = 10
-      const list = []
-
-      for (let i = 0; i < count; i++) {
-        list.push(Mock.mock({
-          videoId: '@natural',
-          videoTitle: '@ctitle(5,10)', // 供应商名称
-          videoAuditStatus: '@natural(0,2)', // 审核状态
-          auditTime: '@date("yy-MM-dd hh:mm:ss")',
-          auditBy: '@cname(2,6)'
-        }))
-      }
-      this.list = list
+      this.listLoading = true
+      getVideoList(this.listQuery)
+        .then(res => {
+          if (res.code !== 0) return
+          this.list = res.data.list
+          this.total = res.data.total
+          console.log(res)
+        })
+        .finally(() => {
+          this.listLoading = false
+        })
     },
-    handleShowDialog({ url }) {
-      this.currentVideoUrl = url
+    // 显示审核对话框
+    handleShowDialog(row) {
+      console.log(row)
+      this.currentVideoUrl = row.videoUrl
+      this.dialogData.videoId = row.videoId
       this.dialogVisible = true
     },
+    // 审核框关闭事件
     dialogColosed() {
       this.currentVideoUrl = ''
       this.dialogData.auditStatus = 1
+      this.dialogData.videoId = ''
+      this.$refs.formRef.clearValidate()
     },
+    // 审核
     handleAuditStatus() {
       this.$refs.formRef.validate(valid => {
         if (valid) {
           console.log(valid)
+          this.dialogData.auditBy = this.authUserId
+          auditVideo(this.dialogData)
+            .then(res => {
+              console.log(res)
+              if (res.code !== 0) return
+              this.$message({
+                message: res.data,
+                type: 'success',
+                duration: 1000
+              })
+              this.dialogVisible = false
+              this.getList()
+            })
         }
       })
     }

src/views/authentic/supplier/add.vue

@@ -76,16 +76,16 @@
           <el-input v-model="formData1.securityLink" placeholder="请输入官网认证链接" />
         </el-form-item>
       </template>
-      <el-form-item label="公众号二维码:" prop="ewmUrl">
+      <el-form-item label="公众号二维码:" prop="qrCodeImage">
         <upload-image
           ref="uploadImageRef1"
           :file-list="ewmUrl"
           tip-title="128px*128px"
-          @success="imageUploadSuccess1"
-          @error="imageUploadFaild1"
-          @remove="imageRemove1"
+          @success="wxImageUploadSuccess"
+          @error="wxImageUploadFaild"
+          @remove="wxImageUploadRemove"
         />
-        <el-input v-model="formData1.ewmUrl" type="hidden" class="hiddenInput" />
+        <el-input v-model="formData1.qrCodeImage" type="hidden" class="hiddenInput" />
       </el-form-item>
       <el-form-item label="供应商状态:">
         <el-select v-model="formData1.shopStatus" placeholder="请选择供应商状态" style="width: 100%">
@@ -246,7 +246,7 @@ export default {
         securityLink: '', // 官网认证链接
         shopStatus: 1, // 供应商状态,
         shopInfo: '',
-        ewmUrl: '' // 微信公众号二维码
+        qrCodeImage: '' // 微信公众号二维码
       },
       // 表单2
       formData2: {
@@ -279,8 +279,8 @@ export default {
         statementContent: { required: true, message: '声明内容不能为空', tigger: 'change' }, // 声明内容
         statementFileId: { required: true, message: '声明文件不能为空', tigger: 'change', type: 'number' }, // 声明文件id
         statementImage: { required: true, message: '声明图片不能为空', tigger: 'change' }, // 声明图片
-        statementLink: { required: true, message: '声明链接不能为空', tigger: 'change' }, // 声明链接
-        ewmUrl: { required: true, message: '微信公众号二维码不能为空', tigger: 'change' }
+        statementLink: { required: true, message: '声明链接不能为空', tigger: 'change' } // 声明链接
+        // ewmUrl: { required: true, message: '微信公众号二维码不能为空', tigger: 'change' }
       },
       // 上传的文件列表
       fileList1: [],
@@ -347,7 +347,8 @@ export default {
         shopName: '',
         shopStatus: '',
         shopType: '',
-        shopInfo: []
+        shopInfo: [],
+        qrCodeImage: ''
       }
       // 品牌方
       if (this.selectedShopType === 1) {
@@ -401,6 +402,7 @@ export default {
       const selectBrand = this.brandList.filter(item => item.id === id)[0]
       // 选择品牌方
       if (this.formData1.shopType === 1) {
+        this.fileList1 = []
         this.formData1.shopName = selectBrand.name
         this.formData1.brandAuthLogo = selectBrand.authLogo
         this.formData1.brandId = selectBrand.id
@@ -570,6 +572,17 @@ export default {
       this.formData2.statementImage = ''
       console.log('删除图片')
     },
+    // 微信二维码上传
+    wxImageUploadSuccess(data) {
+      this.formData1.qrCodeImage = data.data
+    },
+    wxImageUploadFaild(err) {
+      this.$message.error('图片上传失败')
+      console.log(err)
+    },
+    wxImageUploadRemove() {
+      this.formData1.qrCodeImage = ''
+    },
     // 重置表单1
     resetFormData1(shopType) {
       this.formData1 = {
@@ -583,7 +596,7 @@ export default {
         securityLink: '', // 官网认证链接
         shopStatus: 1, // 供应商状态,
         shopInfo: [],
-        ewmUrl: ''
+        qrCodeImage: ''
       }
       this.fileList1 = []
       this.fileList2 = []

src/views/authentic/supplier/edit.vue

@@ -81,6 +81,18 @@
         </el-form-item>
       </template>
 
+      <el-form-item label="公众号二维码:" prop="qrCodeImage">
+        <upload-image
+          ref="uploadImageRef1"
+          :file-list="ewmUrl"
+          tip-title="128px*128px"
+          @success="wxImageUploadSuccess"
+          @error="wxImageUploadFaild"
+          @remove="wxImageUploadRemove"
+        />
+        <el-input v-model="formData1.qrCodeImage" type="hidden" class="hiddenInput" />
+      </el-form-item>
+
       <el-form-item label="供应商状态:">
         <el-select v-model="formData1.shopStatus" placeholder="请选择供应商状态" style="width: 100%" @change="handleShopStatusChange">
           <el-option label="启用" :value="1" />
@@ -243,7 +255,8 @@ export default {
         brandAuthLogo: '', // 品牌logo
         securityLink: '', // 官网认证链接
         shopStatus: 1, // 供应商状态,
-        shopInfo: ''
+        shopInfo: '',
+        qrCodeImage: '' // 公众号二维码
       },
       // 表单2
       formData2: {
@@ -282,7 +295,8 @@ export default {
       fileList1: [],
       fileList2: [],
       fileList3: [],
-      fileList4: [] // 文件
+      fileList4: [], // 文件
+      ewmUrl: []
     }
   },
   computed: {
@@ -355,6 +369,10 @@ export default {
         })
         this.supplierBrands = data.shopInfo
       }
+      // 如果存在公众号二维码
+      if (this.formData1.qrCodeImage) {
+        this.ewmUrl = [{ name: '', url: this.formData1.qrCodeImage }]
+      }
     },
     // 提交保存
     submit() {
@@ -390,7 +408,8 @@ export default {
         shopName: '',
         shopStatus: '',
         shopType: '',
-        shopInfo: []
+        shopInfo: [],
+        qrCodeImage: ''
       }
       // 品牌方
       if (this.selectedShopType === 1) {
@@ -631,6 +650,17 @@ export default {
       this.formData2.statementImage = ''
       console.log('删除图片')
     },
+    // 微信二维码上传
+    wxImageUploadSuccess(data) {
+      this.formData1.qrCodeImage = data.data
+    },
+    wxImageUploadFaild(err) {
+      this.$message.error('图片上传失败')
+      console.log(err)
+    },
+    wxImageUploadRemove() {
+      this.formData1.qrCodeImage = ''
+    },
     // 重置表单1
     resetFormData1(shopType) {
       this.formData1 = {

src/views/authentic/supplier/index.vue

@@ -112,7 +112,7 @@ export default {
         linkMan: '', // 联系人
         mobile: '', // 手机号
         pageNum: 0, // 页码
-        pageSize: 20, // 分页大小
+        pageSize: 10, // 分页大小
         shopName: '', // 供应商名称
         shopType: ''// 供应商类型
       },