xuhuajiao
/
canvasScreen_admin
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

主题库-分类菜单

dev
xuhuajiao 3 years ago
parent
cad2638991
commit
1897beb2a5
3 changed files with 132 additions and 133 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 8
      src/api/theme/theme.js
  2. 240
      src/views/ThemeGallery/index.vue
  3. 17
      src/views/components/ThemeGalleryList.vue

8
src/api/theme/theme.js
View File

@ -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',

240
src/views/ThemeGallery/index.vue
View File

@ -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>

17
src/views/components/ThemeGalleryList.vue
View File

@ -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() {

Write Preview
Loading…
Cancel
Save