初步完工

new_backstage/src/pages/content/collection/index.vue

@@ -10,7 +10,11 @@
     <div class="tablecon flexcon">
       <!-- 新增tab栏的按钮 -->
       <div class="addTab">
-        <el-button type="primary" style="width: 100%" @click="isShow = true" v-if="limitsEdit"
+        <el-button
+          type="primary"
+          style="width: 100%"
+          @click="isShow = true"
+          v-if="limitsEdit"
           >新增模块</el-button
         >
       </div>
@@ -55,9 +59,17 @@
               @keydown.enter.native="getList"
               placeholder="请输入关键字"
             ></el-input>
+            <!-- 后面加的排序 -->
+            <span>标题：</span>
+            <el-select v-model="search.sortType" placeholder="请选择">
+              <el-option label="发布时间" value="time"></el-option>
+              <el-option label="点赞次数" value="vote"></el-option>
+              <el-option label="投票次数" value="like"></el-option>
+            </el-select>
+
             <el-button @click="getList" type="primary">查询</el-button>
             <el-button
-              @click="(search.date = ''), (search.inputKey = ''), getList()"
+              @click="(search.date = ''), (search.inputKey = ''),(search.sortType = 'time'), getList()"
               >重置</el-button
             >
           </div>
@@ -112,7 +124,7 @@
       >
         <el-form-item label="模块名称：">
           <el-input
-            :disabled='isShowId===1||isShowId===2||isShowId===3'
+            :disabled="isShowId === 1 || isShowId === 2 || isShowId === 3"
             v-model="ruleForm.name"
             maxlength="10"
             show-word-limit
@@ -138,22 +150,24 @@
             >视频</el-radio
           >
         </el-form-item>
-        <el-form-item label="投票功能：">
-          <el-switch
-            v-model="ruleForm.isVote"
-            :active-value="1"
-            :inactive-value="0"
-          >
-          </el-switch>
-        </el-form-item>
-        <el-form-item label="投票数量：" v-if="ruleForm.isVote === 1">
-          <el-input
-            @input="changeInput"
-            style="width: 300px"
-            v-model.number="ruleForm.voteCount"
-          ></el-input>
-          &ensp;票/用户
-        </el-form-item>
+        <div class="row">
+          <el-form-item label="投票功能：">
+            <el-switch
+              v-model="ruleForm.isVote"
+              :active-value="1"
+              :inactive-value="0"
+            >
+            </el-switch>
+          </el-form-item>
+          <el-form-item label="投票数量：" v-if="ruleForm.isVote === 1">
+            <el-input
+              @input="changeInput"
+              style="width: 300px"
+              v-model.number="ruleForm.voteCount"
+            ></el-input>
+            &ensp;票/用户
+          </el-form-item>
+        </div>
         <el-form-item label="点赞功能：">
           <el-switch
             v-model="ruleForm.isLike"
@@ -190,7 +204,7 @@ export default {
   components: { LeftTab },
   data() {
     return {
-      limitsEdit:true,
+      limitsEdit: true,
       type: "goods",
       showApplyDetail: false,
       alDetail: {},
@@ -198,6 +212,7 @@ export default {
         inputKey: "",
         date: "",
         state: "",
+        sortType:'time'
       },
       status: "all",
       menu: [],
@@ -299,10 +314,11 @@ export default {
     },
 
     getList() {
-      let { inputKey, date } = this.search;
+      let { inputKey, date,sortType } = this.search;
       getList(
         this.type,
         {
+          sortType,
           date: date,
           pageNum: this.page.pageNum,
           pageSize: this.page.size,
@@ -310,6 +326,7 @@ export default {
           status: this.status == "all" ? "" : this.status,
           type: this.subMenu,
           goodsModuleId: this.goodsModuleId,
+
         },
         (data) => {
           this.list = data.data;
@@ -355,7 +372,7 @@ export default {
     },
   },
   mounted() {
-    // this.getList();
+    this.getList();
   },
   created() {
     // 调用获取tab列表方法
@@ -364,9 +381,9 @@ export default {
     else this.goodsModuleId = 1;
     this.getTabList();
     //获取自定义模块的权限
-    let temp = localStorage.getItem('XJ_limits_ZDY')
-    temp =JSON.parse(temp)
-    this.limitsEdit=temp[0].authority
+    let temp = localStorage.getItem("XJ_limits_ZDY");
+    temp = JSON.parse(temp);
+    this.limitsEdit = temp[0].authority;
   },
 };
 </script>
@@ -383,5 +400,8 @@ export default {
       top: 0px;
     }
   }
+  .row {
+    display: flex;
+  }
 }
 </style>

new_backstage/src/pages/content/interaction/index.vue

@@ -1,11 +1,26 @@
 <template>
   <div>
     <main-top>
-      <div slot="con" v-if="activeSub['新增']">
+      <div slot="con" v-if="activeSub['新增']" class="row">
+          <el-button v-if="subMenu==='questionGroup'" @click="download">下载模板</el-button>
+          <!-- 批量导入 -->
+          <el-upload
+            v-if="subMenu==='questionGroup'"
+            accept= '.xlsx,.xls'
+            style="margin:0 20px"
+            class="upload-demo"
+            :action="$serverName+'cms/questionGroup/uploadExcel'"
+            :headers="{ token }"
+            :before-upload="beforethumbUpload"
+            :on-success="upload_thumb_success"
+            multiple
+          >
+            <el-button type="primary">批量导入</el-button>
+          </el-upload>
         <el-button
           v-if="
             $route.params.type == 'questionGroup' ||
-              $route.params.type == 'sensitive'
+            $route.params.type == 'sensitive'
           "
           @click="addData()"
           type="primary"
@@ -39,7 +54,7 @@
                 end-placeholder="结束日期"
               >
               </el-date-picker>
-              <span>{{keyObj[$route.params.type]}}：</span>
+              <span>{{ keyObj[$route.params.type] }}：</span>
               <el-input
                 class="elInput paddingmore"
                 :maxlength="25"
@@ -51,7 +66,7 @@
             </template>
 
             <template v-else>
-              <span>{{keyObj[$route.params.type]}}：</span>
+              <span>{{ keyObj[$route.params.type] }}：</span>
               <el-input
                 class="elInput paddingmore"
                 :maxlength="25"
@@ -93,40 +108,48 @@
             @submit="submit"
             :tableData="list"
           >
-            <template slot-scope="{data}" slot="record">
-              <el-button @click="applyDetail(data,'questionGroup')" type="text">审核详情</el-button>
+            <template slot-scope="{ data }" slot="record">
+              <el-button @click="applyDetail(data, 'questionGroup')" type="text"
+                >审核详情</el-button
+              >
             </template>
-
           </vtable>
         </div>
       </div>
     </div>
 
-    <vdialog :show="showApplyDetail" @close="showApplyDetail=false" :tableData="alDetail"></vdialog>
-    <sensitivedialog :show="showSensitiveDetail" @close="getList(),showSensitiveDetail=false" :form="sensitiveWord"/>
-
-
+    <vdialog
+      :show="showApplyDetail"
+      @close="showApplyDetail = false"
+      :tableData="alDetail"
+    ></vdialog>
+    <sensitivedialog
+      :show="showSensitiveDetail"
+      @close="getList(), (showSensitiveDetail = false)"
+      :form="sensitiveWord"
+    />
   </div>
 </template>
 
 <script>
-
-import {raw,menu,menuStr} from "./data";
+import { raw, menu, menuStr } from "./data";
 import { getList } from "@/configue/api";
 
 import { mapGetters } from "vuex";
 import sensitivedialog from "./componets/sensitive.vue";
 
 export default {
-  components:{sensitivedialog},
+  name:'DATI6666',
+  components: { sensitivedialog },
   data() {
     return {
-      showApplyDetail:false,
-      showSensitiveDetail:false,
-      sensitiveWord:{
-        name:''
+      token: window.localStorage.getItem("token"),
+      showApplyDetail: false,
+      showSensitiveDetail: false,
+      sensitiveWord: {
+        name: "",
       },
-      alDetail:{},
+      alDetail: {},
       search: {
         inputKey: "",
         date: "",
@@ -139,25 +162,55 @@ export default {
         size: 25,
         pageNum: 1,
       },
-      keyObj:{
-        'comment':'留言内容',
-        'barrage':'弹幕内容',
-        'questionGroup':'题组标题',
-        'sensitive':'敏感词',
-      }
+      keyObj: {
+        comment: "留言内容",
+        barrage: "弹幕内容",
+        questionGroup: "题组标题",
+        sensitive: "敏感词",
+      },
     };
   },
-  
+
   methods: {
-    addData(){
-      if (this.$route.params.type == 'questionGroup') {
-        this.goto({ id: 'none',status: 0 })
-      }
-      else{
-        this.showSensitiveDetail = true
-        this.sensitiveWord= {
-            name:''
-          }
+    // 点击下载模板
+    download() {
+      window.open("template.xlsx");
+    },
+    // 点击导入模板
+    beforethumbUpload(file) {
+      // console.log(998, file);
+      // 限制图片大小和格式
+      const sizeOk = file.size / 1024 / 1024 < 5
+      const typeOk =file.name.includes('.xls')||file.name.includes('.xlsx')
+
+      return new Promise((resolve, reject) => {
+        if (!typeOk) {
+          this.$message.error('文件格式有误！')
+          reject(file)
+        } else if (!sizeOk) {
+          this.$message.error('大小超过5M！')
+          reject(file)
+        } else if (file.name.length > 32) {
+          this.$message.error('文件名不能超过32个字！')
+          reject(file)
+        } else resolve(file)
+
+      })
+    },
+    upload_thumb_success(res) {
+      if(res.code===0) {
+      this.$message.success('导入成功')
+      this.getList()
+      }else this.$message.error('文件书写格式错误！')
+    },
+    addData() {
+      if (this.$route.params.type == "questionGroup") {
+        this.goto({ id: "none", status: 0 });
+      } else {
+        this.showSensitiveDetail = true;
+        this.sensitiveWord = {
+          name: "",
+        };
       }
     },
     selectStatus(item) {
@@ -168,7 +221,7 @@ export default {
         params: { ...this.$route.params, type: data },
       });
     },
-    
+
     getList() {
       let { inputKey, date } = this.search;
       getList(
@@ -178,18 +231,18 @@ export default {
           pageNum: this.page.pageNum,
           pageSize: this.page.size,
           searchKey: inputKey,
-          status: this.status == "all" ? "" : this.status
+          status: this.status == "all" ? "" : this.status,
         },
         (data) => {
           this.list = data.data;
         }
       );
-    }
+    },
   },
   computed: {
     ...mapGetters({
       activeMenu: "activeMenu",
-      activeSub:"activeSub"
+      activeSub: "activeSub",
     }),
     subMenu() {
       return this.$route.params.type;
@@ -199,21 +252,21 @@ export default {
     },
   },
   watch: {
-    subMenu:{
-      deep:true,
-      immediate:true,
-      handler:function (newVal) {
-        this.getAuth(this.activeMenu,menuStr[newVal])
+    subMenu: {
+      deep: true,
+      immediate: true,
+      handler: function (newVal) {
+        this.getAuth(this.activeMenu, menuStr[newVal]);
         this.getList();
-      }
+      },
+    },
+    activeMenu: {
+      deep: true,
+      immediate: true,
+      handler: function (newVal) {
+        this.getAuth(newVal, menuStr[this.subMenu]);
+      },
     },
-    activeMenu:{
-      deep:true,
-      immediate:true,
-      handler:function (newVal) {
-        this.getAuth(newVal,menuStr[this.subMenu])
-      }
-    }
   },
   mounted() {
     this.getList();
@@ -221,4 +274,11 @@ export default {
 };
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.row{
+  display: flex;
+  /deep/.el-upload-list{
+    display: none !important;
+  }
+}
+</style>