feat: 新增文档推荐列表

src/views/docRecommend/list.vue

@@ -0,0 +1,244 @@
+<template>
+  <div class="doc-recommend-list" v-loading="loading">
+    <el-form :inline="true" :model="formInline" class="demo-form-inline">
+      <el-form-item label="文档推荐区域">
+        <el-select v-model="formInline.module" placeholder="文档推荐区域">
+          <el-option v-for="option in formOptions.moduleOptions" :key="option" :label="option" :value="option"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="分类名称" v-show="canSelectDocClass">
+        <el-select v-model="formInline.docClass" placeholder="分类名称">
+          <el-option v-for="option in formOptions.docClassOptions" :key="option" :label="option" :value="option"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="onSubmit">查询</el-button>
+      </el-form-item>
+    </el-form>
+
+    <h2>正在展示中的文档：</h2>
+    <el-table
+        :data="topTable"
+        tooltip-effect="dark"
+        style="width: 100%"
+        border
+    >
+      <el-table-column
+          prop="xx"
+          label=""
+          width="55">
+      </el-table-column>
+      <el-table-column label="文档名称" width="300">
+        <template slot-scope="scope">
+          <el-popover trigger="click" placement="top" width="400">
+            <p>{{ scope.row.docSummary }}</p>
+            <div slot="reference" class="name-wrapper">
+              <span>{{ scope.row.docName }}</span>
+            </div>
+          </el-popover>
+        </template>
+      </el-table-column>
+      <el-table-column
+          prop="viewTimes"
+          label="浏览量"
+          width="80">
+      </el-table-column>
+      <el-table-column
+          prop="uploadDate"
+          label="上传时间"
+          width="200">
+      </el-table-column>
+      <el-table-column
+          prop="docTags"
+          label="文档标签"
+          width="200">
+      </el-table-column>
+      <el-table-column
+          prop="docFileType"
+          label="文档类型"
+          width="50">
+      </el-table-column>
+      <el-table-column
+          prop="docPageSize"
+          label="页数"
+          width="80">
+      </el-table-column>
+      <el-table-column
+          prop="docId"
+          label="id"
+      >
+      </el-table-column>
+    </el-table>
+
+
+    <h2 style="margin-top: 20px">可选择的其他文档：</h2>
+
+    <el-table
+        :data="moreTable"
+        tooltip-effect="dark"
+        style="width: 100%"
+        height="500"
+        border
+        @selection-change="handleSelectionChangeOfMore">
+      <el-table-column
+          fixed
+          type="selection"
+          width="55">
+      </el-table-column>
+      <el-table-column label="文档名称" width="300">
+        <template slot="header">
+          <el-button type="primary" @click="doTranUpdate">保存</el-button>
+        </template>
+        <template slot-scope="scope">
+          <el-popover trigger="click" placement="top" width="400">
+            <p>{{ scope.row.docSummary }}</p>
+            <div slot="reference" class="name-wrapper">
+              <span>{{ scope.row.docName }}</span>
+            </div>
+          </el-popover>
+        </template>
+      </el-table-column>
+      <el-table-column
+          prop="viewTimes"
+          label="浏览量"
+          width="80">
+      </el-table-column>
+      <el-table-column
+          prop="uploadDate"
+          label="上传时间"
+          width="200">
+      </el-table-column>
+      <el-table-column
+          prop="docTags"
+          label="文档标签"
+          width="200">
+      </el-table-column>
+      <el-table-column
+          prop="docFileType"
+          label="文档类型"
+          width="50">
+      </el-table-column>
+
+      <el-table-column
+          prop="docPageSize"
+          label="页数"
+          width="80">
+      </el-table-column>
+      <el-table-column
+          prop="docId"
+          label="id"
+      >
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'list',
+  data () {
+    return {
+      topTable: [],
+      moreTable: [],
+      multipleSelectionTop: [],
+      multipleSelectionMore: [],
+      formInline: {
+        module: '',
+        docClass: '',
+      },
+      formOptions: {
+        moduleOptions: [],
+        docClassOptions: []
+      },
+      loading: false
+    }
+  },
+  computed: {
+    canSelectDocClass () {
+      const skipModules = ['文库首页-会员免费文档', '文库首页-精选推荐']
+      if (skipModules.includes(this.formInline.module)) {
+        return false
+      }
+      return true
+    }
+  },
+  created() {
+    this.doGetQuery()
+  },
+  methods: {
+    doGetQuery () {
+      if (this.loading) {
+        return
+      }
+      this.loading = true
+      this.$request('/docRecommend/docScreen').success((res) => {
+        this.loading = false
+        if (res.status === 'success' && res.data) {
+          this.formOptions.docClassOptions = res.data.docClass
+          this.formOptions.moduleOptions = res.data.docRegion
+
+          this.formInline.module = this.formOptions.moduleOptions[0]
+          this.formInline.docClass = this.formOptions.docClassOptions[0]
+        }
+
+        this.onSubmit()
+      }).get()
+    },
+    doTranUpdate () {
+      if (this.loading) {
+        return
+      }
+      this.loading = true
+      const params = Object.assign({
+        docIds: this.multipleSelectionMore.map(v => v.docId).join(',')
+      }, this.getQueryParams())
+      this.$request('/docRecommend/update').data(params).success((res) => {
+        if (res.status === 'success') {
+          this.loading = false
+          this.onSubmit()
+        } else {
+          this.loading = false
+        }
+      }).post()
+    },
+    doLoad (query) {
+      if (this.loading) {
+        return
+      }
+      this.loading = true
+      this.$request('/docRecommend/list').data(query).success((res) => {
+        this.loading = false
+        if (res.status === 'success' && res.data) {
+          this.topTable = res.data.list || []
+          this.moreTable = res.data.selectList || []
+        }
+      }).get()
+    },
+    getQueryParams () {
+      const result = {
+        module: this.formInline.module
+      }
+      if (this.canSelectDocClass) {
+        result.docClass = this.formInline.docClass
+      }
+      return result
+    },
+    onSubmit() {
+      this.multipleSelectionMore = []
+      this.doLoad(this.getQueryParams())
+    },
+    handleSelectionChangeOfTop(val) {
+      this.multipleSelectionTop = val
+    },
+    handleSelectionChangeOfMore(val) {
+      this.multipleSelectionMore = val
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.doc-recommend-list {
+  //
+}
+</style>