From 1897beb2a5031cad8039ae58dbf2805e3dbcc6c1 Mon Sep 17 00:00:00 2001
From: xuhuajiao <13476289682@163.com>
Date: Wed, 30 Mar 2022 20:32:28 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=BB=E9=A2=98=E5=BA=93-=E5=88=86=E7=B1=BB?=
 =?UTF-8?q?=E8=8F=9C=E5=8D=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/theme/theme.js                    |   8 +-
 src/views/ThemeGallery/index.vue          | 240 +++++++++++-----------
 src/views/components/ThemeGalleryList.vue |  17 +-
 3 files changed, 132 insertions(+), 133 deletions(-)

diff --git a/src/api/theme/theme.js b/src/api/theme/theme.js
index e75d9f6..95b7c52 100644
--- a/src/api/theme/theme.js
+++ b/src/api/theme/theme.js
@@ -2,7 +2,7 @@
 import request from '@/utils/request'
 
 // 获取主题库列表
-export function reqThemeGallery(parameter) {
+export function FetchThemeGallery(parameter) {
   return request({
     url: 'api/material/getThemeLibrary',
     method: 'get',
@@ -11,7 +11,7 @@ export function reqThemeGallery(parameter) {
 }
 
 // 根据机构id查询主题列表
-export function reqHeaderList(parameter) {
+export function FetchThemeClassList(parameter) {
   return request({
     url: 'api/themeclass/get_theme_list',
     method: 'get',
@@ -19,8 +19,8 @@ export function reqHeaderList(parameter) {
   })
 }
 
-// 新增| 编辑
-export function reqAddOrEdit(parameter) {
+// 新增| 编辑 主题库分类菜单
+export function FetchAddOrEdit(parameter) {
   return request({
     url: 'api/themeclass/save',
     method: 'post',
diff --git a/src/views/ThemeGallery/index.vue b/src/views/ThemeGallery/index.vue
index f5e213a..a76c6c1 100644
--- a/src/views/ThemeGallery/index.vue
+++ b/src/views/ThemeGallery/index.vue
@@ -1,13 +1,13 @@
 <template>
 
   <div class="app-container theme_main">
-    <el-tabs v-model="activeIndex" @tab-click="tabHandleClick">
+    <el-tabs v-model="activeIndex" @tab-click="tabThemeClassifyClick">
       <el-tab-pane v-for="(item,index) in tabItem" :key="index" :label="item.class_name" :name="item.name" />
     </el-tabs>
     <!-- 右上角btn -->
     <div class="home_publish_btn">
-      <el-button round class="el_button_green" @click="addEdit(0)">新增</el-button>
-      <el-button round type="primary" @click="addEdit(1)">编辑</el-button>
+      <el-button round class="el_button_green" @click="addEditClassify(0)">新增</el-button>
+      <el-button round type="primary" @click="addEditClassify(1)">编辑</el-button>
       <el-button round class="el_button_red" @click="upload()">上传</el-button>
     </div>
     <div>
@@ -23,26 +23,47 @@
       </div>
     </div>
     <div style="position:relative">
-
       <!-- 主题库list -->
       <ThemeGalleryList ref="ThemeGalleryList" :is-multi-selected="isMultiSelected" :mulit-text="mulitText" :show-item-info="showItemInfo" />
     </div>
 
     <!-- 平台技术人员-新增/编辑分类 -->
     <div class="upload_layer">
-      <el-dialog append-to-body :show-close="false" :visible.sync="addDialogVisible" :title="layerTitle" width="620px">
-        <el-form ref="classifyForm" inline :model="classifyForm" :rules="rules" size="small" label-width="80px">
-          <el-form-item v-if="isAddEdit==0" label="类别名称" prop="name">
+      <el-dialog append-to-body :show-close="false" :visible.sync="addDialogVisible" :close-on-click-modal="false" :title="layerTitle" width="620px">
+        <el-form ref="classifyForm" inline :model="classifyForm" size="small" label-width="80px">
+          <el-form-item
+            v-if="isAddEdit==0"
+            label="类别名称"
+            prop="class_name"
+            :rules="[
+              { required: true, message: '请输入类别名称', trigger: 'blur' }
+            ]"
+          >
             <el-input v-model="classifyForm.class_name" style="width: 360px;" />
           </el-form-item>
-          <el-form-item v-else label="类别名称" prop="class_name">
-            <el-select v-model="classifyForm.class_name" placeholder="请选择" style="width: 360px;" @change="selectName">
+          <el-form-item
+            v-else
+            label="类别名称"
+            prop="class_name"
+            :rules="[
+              { required: true, message: '请选择类别名称', trigger: 'change' }
+            ]"
+          >
+            <el-select v-model="classifyForm.class_name" placeholder="请选择" value-key="class_name" style="width: 360px;" @change="selectName">
               <el-option v-for="item in tabItem" :key="item.id" :label="item.class_name" :value="item" />
             </el-select>
           </el-form-item>
-          <el-form-item label="所属机构" prop="is_all_name">
-            <el-select v-model="classifyForm.is_all_name" style="width: 360px;" value-key="name" @change="selectorganization">
-              <el-option v-for="item in options" :key="item.key" :label="item.name" :value="item" />
+          <el-form-item
+            label="所属机构"
+            prop="searchClassify"
+          >
+            <el-select v-model="searchClassify" multiple placeholder="请选择" style="width: 360px;" @change="changeSelect">
+              <el-option
+                v-for="item in organOptions"
+                :key="item.value"
+                :label="item.label"
+                :value="item.id"
+              />
             </el-select>
           </el-form-item>
         </el-form>
@@ -57,7 +78,7 @@
 </template>
 
 <script>
-import { reqHeaderList, reqAddOrEdit } from '@/api/theme/theme.js'
+import { FetchThemeClassList, FetchAddOrEdit } from '@/api/theme/theme.js'
 import ThemeGalleryList from '../components/ThemeGalleryList.vue'
 export default {
   name: 'ThemeGallery',
@@ -65,154 +86,125 @@ export default {
   data() {
     return {
       orga_id: '133221333123111', // 机构ID
+      classifyForm: { //  主题库分类菜单form
+        class_name: '',
+        is_all: false,
+        id: '',
+        orga_ids: []
+      },
+      searchClassify: [], // 机构选择多选操作
+      oldSearchClassify: [],
+      addDialogVisible: false,
+      layerTitle: '新增',
+      isAddEdit: 0, // 判断分类菜单是新增还是编辑
       mulitText: '多选',
       isMultiSelected: false,
       showItemInfo: true,
       themeItemActive: '1',
-      addDialogVisible: false,
-      layerTitle: '新增',
       uploadDialogVisible: false,
       uploadTitle: '上传',
-      isAddEdit: 0,
-      form: {
-        name: null,
-        date: null
-      },
-      classifyForm: {
-        class_name: '',
-        is_all_name: '',
-        is_all: false,
-        id: '',
-        orga_ids: ['133221333123111'],
-        selectName: null,
-        direction: null,
-        selectNameList: []
-      },
-      options: [
+      organOptions: [ // 机构list-data
         {
-          key: true,
-          name: '全部'
+          label: '全部',
+          value: 'ALL_SELECT',
+          id: 'ALL_SELECT'
         },
         {
-          key: false,
-          name: '武汉图书馆'
+          label: '武汉图书馆',
+          value: '01',
+          id: '133221333123111'
         }
       ],
-
-      rules: {
-        // name: [{ required: true, message: '请输入类别名称', trigger: 'blur' }],
-        selectName: [
-          { required: true, message: '请选择类别名称', trigger: 'change' }
-        ],
-        selectNameList: [
-          { required: true, message: '请选择类别名称', trigger: 'change' }
-        ],
-        is_all: [
-          { required: true, message: '请选择所属机构', trigger: 'change' }
-        ],
-        direction: [
-          { required: true, message: '请选择设备方向', trigger: 'change' }
-        ]
-      },
-
       // 导航栏的lsit
       tabItem: [],
       activeIndex: 0
-
     }
   },
   mounted() {
-    this.getHeaderList()
+    this.getThemeClassList()
   },
   methods: {
-    getHeaderList() {
+    // 根据机构id查询主题库分类列表
+    getThemeClassList() {
       const { orga_id } = this
-      reqHeaderList(orga_id).then(res => {
+      FetchThemeClassList(orga_id).then(res => {
         if (res.code == 200) {
           this.tabItem = res.data
         }
       })
     },
-    tabHandleClick(tab, event) {
-      console.log(tab.index)
-      this.activeIndex = tab.index
-    },
-    // 多选btn
-    multiSelectBtn() {
-      this.isMultiSelected = !this.isMultiSelected
-      if (this.isMultiSelected) {
-        this.mulitText = '取消'
-      } else {
-        this.mulitText = '多选'
+    // 机构选择 全选 / 多选
+    changeSelect(val) {
+      const allValues = []
+      // 保留所有值
+      for (const item of this.organOptions) {
+        allValues.push(item.id)
+      }
+      // 用来储存上一次的值，可以进行对比
+      const oldVal = this.oldSearchClassify.length === 1 ? this.oldSearchClassify[0] : []
+      // 若是全部选择
+      if (val.includes('ALL_SELECT')) this.searchClassify = allValues
+      // 取消全部选中 上次有 当前没有 表示取消全选
+      if (oldVal.includes('ALL_SELECT') && !val.includes('ALL_SELECT')) this.searchClassify = []
+      // 点击非全部选中 需要排除全部选中 以及 当前点击的选项
+      // 新老数据都有全部选中
+      if (oldVal.includes('ALL_SELECT') && val.includes('ALL_SELECT')) {
+        const index = val.indexOf('ALL_SELECT')
+        val.splice(index, 1) // 排除全选选项
+        this.searchClassify = val
       }
+      // 全选未选 但是其他选项全部选上 则全选选上 上次和当前 都没有全选
+      if (!oldVal.includes('ALL_SELECT') && !val.includes('ALL_SELECT')) {
+        if (val.length === allValues.length - 1) this.searchClassify = ['ALL_SELECT'].concat(val)
+      }
+      // 储存当前最后的结果 作为下次的老数据
+      this.oldSearchClassify[0] = this.searchClassify
     },
-    // 上传历史-停用/恢复
-    isStopHandle(index, row) {
-      row.enabled = !row.enabled
+    // 编辑分类 - 类型名称选择
+    selectName(vId) {
+      this.classifyForm.id = vId.id
+      this.classifyForm.class_name = vId.class_name
     },
-    addEdit(index) {
+    // 主题库分类菜单 - 新增 / 编辑
+    addEditClassify(index) {
       this.addDialogVisible = true
-      // index ? this.layerTitle = '编辑' : this.layerTitle = '新增'
-      // index ? this.isAddEdit = 1 : this.isAddEdit = 0
       if (index == 1) {
         this.layerTitle = '编辑'
         this.isAddEdit = 1
-        console.log(this.tabItem)
-        console.log(this.tabItem[this.activeIndex])
         this.classifyForm.class_name = this.tabItem[this.activeIndex].class_name
-        // this.tabItem.map(item => {
-        //   this.classifyForm.id = item.id
-        //   this.classifyForm.class_name = item.class_name
-        // })
-        console.log('`···············')
-        console.log(this.classifyForm.id)
-        console.log(this.classifyForm.class_name)
-        if (this.classifyForm.is_all) {
-          this.classifyForm.is_all_name == '全部'
-          this.classifyForm.orga_ids = []
-        } else {
-          this.classifyForm.is_all_name == '武汉图书馆'
-        }
+        this.classifyForm.id = this.tabItem[this.activeIndex].id
+        // if (this.classifyForm.is_all) {
+        //   this.classifyForm.is_all_name == '全部'
+        //   this.classifyForm.orga_ids = []
+        // } else {
+        //   this.classifyForm.is_all_name == '武汉图书馆'
+        // }
       } else {
         this.layerTitle = '新增'
         this.isAddEdit = 0
         this.classifyForm.id = null
         this.classifyForm.class_name = ''
-        this.classifyForm.is_all_name = ''
       }
     },
-    // 上传
-    upload() {
-      //  通知子组件发请求
-      this.$refs.ThemeGalleryList.saveMaterial()
-    },
-    selectName(vId) {
-      this.classifyForm.id = vId.id
-      this.classifyForm.class_name = vId.class_name
-      // let obj = {}
-      // obj = this.tabItem.find((item) => {
-      //   return item.class_name === vId
-      // })
-      // this.classifyForm.class_name = obj.class_name
-    },
     // 新增编辑
     submitForm(formName) {
+      this.classifyForm.is_all = !!this.searchClassify.includes('ALL_SELECT')
+      this.classifyForm.orga_ids = this.searchClassify.includes('ALL_SELECT') ? [] : this.searchClassify
       this.$refs[formName].validate((valid) => {
         if (valid) {
-          const params = {
-            class_name: this.classifyForm.class_name,
-            is_all: this.classifyForm.is_all,
-            id: this.classifyForm.id,
-            orga_ids: ['133221333123111']
+          if (this.searchClassify.length == 0) {
+            this.$message.error('请选择所属机构！')
+            return false
           }
-          reqAddOrEdit(params).then(res => {
+          FetchAddOrEdit(this.classifyForm).then(res => {
             if (res.code == 200) {
               this.$message({
                 type: 'success',
                 message: this.classifyForm.id ? '编辑成功' : '新增成功'
               })
               this.addDialogVisible = false
-              this.getHeaderList()
+              this.searchClassify = []
+              this.getThemeClassList()
             }
           })
         } else {
@@ -224,20 +216,36 @@ export default {
     resetForm(formName) {
       this.addDialogVisible = false
       this.uploadDialogVisible = false
+      this.searchClassify = []
       this.$refs[formName].resetFields()
     },
-    // 所属机构
-    selectorganization(selVal) {
-      this.classifyForm.is_all = selVal.key
-      this.classifyForm.is_all_name = selVal.name
+    // 主题分类菜单-操作
+    tabThemeClassifyClick(tab) {
+      this.activeIndex = tab.index
     },
     // tabClick
-
     tabItemClick(tab, event) {
       console.log(this.themeItemActive)
       console.log(tab, event)
+    },
+    // 多选btn
+    multiSelectBtn() {
+      this.isMultiSelected = !this.isMultiSelected
+      if (this.isMultiSelected) {
+        this.mulitText = '取消'
+      } else {
+        this.mulitText = '多选'
+      }
+    },
+    // 上传历史-停用/恢复
+    isStopHandle(index, row) {
+      row.enabled = !row.enabled
+    },
+    // 上传
+    upload() {
+      //  通知子组件发请求
+      this.$refs.ThemeGalleryList.saveMaterial()
     }
-
   }
 }
 </script>
diff --git a/src/views/components/ThemeGalleryList.vue b/src/views/components/ThemeGalleryList.vue
index a0a9b29..f4df37f 100644
--- a/src/views/components/ThemeGalleryList.vue
+++ b/src/views/components/ThemeGalleryList.vue
@@ -164,8 +164,8 @@
   </div>
 </template>
 <script>
-import { reqThemeGallery, reqHeaderList } from '@/api/theme/theme.js'
-import { saveMaterial } from '@/api/material/material'
+import { FetchThemeGallery } from '@/api/theme/theme.js'
+// import { saveMaterial } from '@/api/material/material'
 import Upload from './upload'
 import UploadCover from './upload_cover'
 export default {
@@ -337,13 +337,13 @@ export default {
   },
   mounted() {
     this.getThemeGallery()
-    this.getHeaderList()
   },
   methods: {
+
     // 获取主题库list
     getThemeGallery() {
       const params = this.queryInfo
-      reqThemeGallery(params).then(res => {
+      FetchThemeGallery(params).then(res => {
         console.log(res)
         if (res.code == 200) {
           this.themeGalleryList = res.data.content
@@ -352,14 +352,6 @@ export default {
         }
       })
     },
-    getHeaderList() {
-      const { orga_id } = this
-      reqHeaderList(orga_id).then(res => {
-        if (res.code == 200) {
-          this.tabItem = res.data
-        }
-      })
-    },
     clearCheckbox(label) {
       this.classifyForm.direction = label
       console.log(this.classifyForm.direction)
@@ -370,7 +362,6 @@ export default {
       val.forEach(item => {
         class_ids.push(item)
       })
-      // console.log(class_ids)
     },
     // 上传
     saveMaterial() {