|
|
|
@ -1,175 +1,74 @@ |
|
|
|
<template> |
|
|
|
|
|
|
|
<div class="app-container theme_main"> |
|
|
|
<el-tabs v-model="activeIndex" @tab-click="tabHandleClick"> |
|
|
|
<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_red" @click="uploadEdit">上传</el-button> |
|
|
|
<el-button round class="el_button_red" @click="upload()">上传</el-button> |
|
|
|
</div> |
|
|
|
<div style="position:relative"> |
|
|
|
<!-- 主题库list --> |
|
|
|
<ThemeGalleryList |
|
|
|
ref="ThemeGalleryList" |
|
|
|
:is-multi-selected="isMultiSelected" |
|
|
|
:mulit-text="mulitText" |
|
|
|
:show-item-info="showItemInfo" |
|
|
|
/> |
|
|
|
<div> |
|
|
|
<el-tabs v-if="showItemInfo" v-model="themeItemActive" class="theme_item_tab" @tab-click="tabItemClick"> |
|
|
|
<el-tab-pane label="竖屏" name="1" /> |
|
|
|
<el-tab-pane label="横屏" name="2" /> |
|
|
|
<el-tab-pane label="我的画册" name="3" /> |
|
|
|
</el-tabs> |
|
|
|
<div class="material_btn"> |
|
|
|
<!-- @click="uploadListVisible=true" --> |
|
|
|
<el-button round type="primary" @click="uploadListVisible=true">上传历史</el-button> |
|
|
|
<el-button round @click="multiSelectBtn">{{ mulitText }}</el-button> |
|
|
|
</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-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-input v-model="classifyForm.name" style="width: 360px;" /> |
|
|
|
<el-input v-model="classifyForm.class_name" style="width: 360px;" /> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item v-else label="类别名称" prop="selectName"> |
|
|
|
<el-select v-model="classifyForm.selectName" placeholder="请选择" style="width: 360px;" @change="selectName"> |
|
|
|
<el-option |
|
|
|
v-for="item in nameOptions" |
|
|
|
:key="item.value" |
|
|
|
:label="item.label" |
|
|
|
:value="item.value" |
|
|
|
/> |
|
|
|
<el-form-item v-else label="类别名称" prop="class_name"> |
|
|
|
<el-select v-model="classifyForm.class_name" placeholder="请选择" 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="agency"> |
|
|
|
<el-select v-model="classifyForm.agency" multiple placeholder="请选择" style="width: 360px;"> |
|
|
|
<el-option |
|
|
|
v-for="item in options" |
|
|
|
:key="item.value" |
|
|
|
:label="item.label" |
|
|
|
:value="item.value" |
|
|
|
/> |
|
|
|
<el-form-item label="所属机构" prop="is_all_name"> |
|
|
|
<el-select v-model="classifyForm.is_all_name" style="width: 360px;" @change="selectorganization" value-key="name"> |
|
|
|
<el-option v-for="item in options" :key="item.key" :label="item.name" :value="item" /> |
|
|
|
</el-select> |
|
|
|
</el-form-item> |
|
|
|
</el-form> |
|
|
|
<div slot="footer" class="dialog-footer"> |
|
|
|
<el-button type="primary" round @click="submitForm('classifyForm')">新增</el-button> |
|
|
|
<el-button type="primary" round @click="submitForm('classifyForm')">保存</el-button> |
|
|
|
<el-button round @click="resetForm('classifyForm')">关闭</el-button> |
|
|
|
</div> |
|
|
|
</el-dialog> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 平台技术人员-上传 --> |
|
|
|
<el-dialog |
|
|
|
append-to-body |
|
|
|
:show-close="false" |
|
|
|
:visible.sync="uploadDialogVisible" |
|
|
|
:title="uploadTitle" |
|
|
|
class="upload_layer" |
|
|
|
> |
|
|
|
<el-form ref="classifyForm" :model="classifyForm" :rules="rules" size="small" label-width="80px"> |
|
|
|
<el-form-item label="类别名称" prop="selectNameList"> |
|
|
|
<el-checkbox-group v-model="classifyForm.selectNameList"> |
|
|
|
<el-checkbox v-for="item in nameOptions" :key="item.value" :label="item.label">{{ item.label }}</el-checkbox> |
|
|
|
</el-checkbox-group> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="设备方向" prop="direction"> |
|
|
|
<el-radio-group v-model="classifyForm.direction"> |
|
|
|
<el-radio :label="0">横屏</el-radio> |
|
|
|
<el-radio :label="1">竖屏</el-radio> |
|
|
|
</el-radio-group> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="文件名称"> |
|
|
|
<el-input v-model="classifyForm.name" style="width:336px" /> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="上传内容" prop="file"> |
|
|
|
<el-upload action="#" list-type="picture-card" :auto-upload="false"> |
|
|
|
<img src="@/assets/images/t-sc.png" alt /> |
|
|
|
<div slot="file" slot-scope="{file}"> |
|
|
|
<img class="el-upload-list__item-thumbnail" :src="file.url" alt /> |
|
|
|
</div> |
|
|
|
</el-upload> |
|
|
|
</el-form-item> |
|
|
|
</el-form> |
|
|
|
<div slot="footer" class="dialog-footer"> |
|
|
|
<el-button type="primary" round @click="submitForm('classifyForm')">新增</el-button> |
|
|
|
<el-button round @click="resetForm('classifyForm')">关闭</el-button> |
|
|
|
</div> |
|
|
|
</el-dialog> |
|
|
|
|
|
|
|
<!-- 上传历史layer --> |
|
|
|
<div class="upload_layer"> |
|
|
|
<el-dialog |
|
|
|
title="上传历史" |
|
|
|
:close-on-click-modal="false" |
|
|
|
:visible.sync="uploadListVisible" |
|
|
|
height="384px" |
|
|
|
> |
|
|
|
<el-form ref="form" :model="form" label-width="80px" class="query_history"> |
|
|
|
<el-form-item label="文件名称"> |
|
|
|
<el-input v-model="form.name" style="width:200px" /> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="时间"> |
|
|
|
<el-date-picker |
|
|
|
v-model="form.date" |
|
|
|
type="daterange" |
|
|
|
range-separator="至" |
|
|
|
start-placeholder="开始日期" |
|
|
|
end-placeholder="结束日期" |
|
|
|
/> |
|
|
|
</el-form-item> |
|
|
|
</el-form> |
|
|
|
<el-table :data="uploadData" :header-cell-style="{ color: '#333' }"> |
|
|
|
<el-table-column align="center" prop="name" label="文件名称" /> |
|
|
|
<el-table-column align="center" prop="cover" label="发布内容"> |
|
|
|
<template slot-scope="scope"> |
|
|
|
<div> |
|
|
|
<img width="48px" height="64px" size="medium" :src="scope.row.cover" /> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column align="center" prop="type" label="类别名称" /> |
|
|
|
<el-table-column align="center" prop="direction" label="设备方向"> |
|
|
|
<template slot-scope="scope"> |
|
|
|
{{ scope.row.direction ? "竖屏" : "横屏" }} |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column align="center" prop="agency" label="所属机构" /> |
|
|
|
<el-table-column align="center" prop="date" label="上传时间" width="150" /> |
|
|
|
<el-table-column align="center" prop="publisher" label="发布人" /> |
|
|
|
<el-table-column align="center" prop="handle" label="操作"> |
|
|
|
<template slot-scope="scope"> |
|
|
|
<el-button |
|
|
|
type="primary" |
|
|
|
class="edit_btn" |
|
|
|
@click="uploadEdit(scope.$index, scope.row)" |
|
|
|
>编辑</el-button> |
|
|
|
<el-button |
|
|
|
type="primary" |
|
|
|
:class="['start_btn', { stop_btn: scope.row.enabled }]" |
|
|
|
@click="isStopHandle(scope.$index, scope.row)" |
|
|
|
>{{ scope.row.enabled ? "停止" : "恢复" }}</el-button> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
</el-table> |
|
|
|
</el-dialog> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import { reqHeaderList, reqAddOrEdit } from "@/api/theme/theme.js"; |
|
|
|
import ThemeGalleryList from '../components/ThemeGalleryList.vue' |
|
|
|
export default { |
|
|
|
name: 'ThemeGallery', |
|
|
|
components: { ThemeGalleryList }, |
|
|
|
data() { |
|
|
|
data () { |
|
|
|
return { |
|
|
|
orga_id: '133221333123111', // 机构ID |
|
|
|
mulitText: '多选', |
|
|
|
isMultiSelected: false, |
|
|
|
showItemInfo: true, |
|
|
|
uploadListVisible: false, |
|
|
|
themeItemActive: '1', |
|
|
|
addDialogVisible: false, |
|
|
|
layerTitle: '新增', |
|
|
|
uploadDialogVisible: false, |
|
|
|
@ -180,68 +79,68 @@ export default { |
|
|
|
date: null |
|
|
|
}, |
|
|
|
classifyForm: { |
|
|
|
name: null, |
|
|
|
agency: null, |
|
|
|
class_name: '', |
|
|
|
is_all_name: '', |
|
|
|
is_all: false, |
|
|
|
id: '', |
|
|
|
orga_ids: ["133221333123111"], |
|
|
|
selectName: null, |
|
|
|
direction: null, |
|
|
|
selectNameList: [] |
|
|
|
}, |
|
|
|
options: [ |
|
|
|
{ |
|
|
|
value: '选项1', |
|
|
|
label: '全部' |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: '选项2', |
|
|
|
label: '武汉图书馆' |
|
|
|
} |
|
|
|
], |
|
|
|
nameOptions: [ |
|
|
|
{ |
|
|
|
value: '选项1', |
|
|
|
label: '为你推荐', |
|
|
|
checked: false |
|
|
|
key: true, |
|
|
|
name: '全部' |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: '选项2', |
|
|
|
label: '人工智能', |
|
|
|
checked: true |
|
|
|
key: false, |
|
|
|
name: '武汉图书馆' |
|
|
|
} |
|
|
|
], |
|
|
|
|
|
|
|
rules: { |
|
|
|
name: [{ required: true, message: '请输入类别名称', trigger: 'blur' }], |
|
|
|
// name: [{ required: true, message: '请输入类别名称', trigger: 'blur' }], |
|
|
|
selectName: [ |
|
|
|
{ required: true, message: '请选择类别名称', trigger: 'change' } |
|
|
|
], |
|
|
|
selectNameList: [ |
|
|
|
{ required: true, message: '请选择类别名称', trigger: 'change' } |
|
|
|
], |
|
|
|
agency: [ |
|
|
|
is_all: [ |
|
|
|
{ required: true, message: '请选择所属机构', trigger: 'change' } |
|
|
|
], |
|
|
|
direction: [ |
|
|
|
{ required: true, message: '请选择设备方向', trigger: 'change' } |
|
|
|
] |
|
|
|
}, |
|
|
|
uploadData: [ |
|
|
|
{ |
|
|
|
name: '图片1', |
|
|
|
cover: require('@/assets/images/background.jpg'), |
|
|
|
type: '为你推荐', |
|
|
|
direction: 0, |
|
|
|
agency: '全部', |
|
|
|
date: '2022-1-1 15：00', |
|
|
|
publisher: '张三', |
|
|
|
enabled: false |
|
|
|
} |
|
|
|
] |
|
|
|
|
|
|
|
// 导航栏的lsit |
|
|
|
tabItem: [], |
|
|
|
activeIndex: 0, |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
mounted () { |
|
|
|
this.getHeaderList() |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
getHeaderList () { |
|
|
|
const { orga_id } = this |
|
|
|
reqHeaderList(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() { |
|
|
|
multiSelectBtn () { |
|
|
|
this.isMultiSelected = !this.isMultiSelected |
|
|
|
if (this.isMultiSelected) { |
|
|
|
this.mulitText = '取消' |
|
|
|
@ -250,57 +149,101 @@ export default { |
|
|
|
} |
|
|
|
}, |
|
|
|
// 上传历史-停用/恢复 |
|
|
|
isStopHandle(index, row) { |
|
|
|
isStopHandle (index, row) { |
|
|
|
row.enabled = !row.enabled |
|
|
|
}, |
|
|
|
addEdit(index) { |
|
|
|
addEdit (index) { |
|
|
|
this.addDialogVisible = true |
|
|
|
index ? this.layerTitle = '编辑' : this.layerTitle = '新增' |
|
|
|
index ? this.isAddEdit = 1 : this.isAddEdit = 0 |
|
|
|
// if (index) { |
|
|
|
// this.layerTitle = '编辑' |
|
|
|
// this.isAddEdit = 1 |
|
|
|
// // this.classifyForm.selectName = 0 |
|
|
|
// } else { |
|
|
|
// this.layerTitle = '新增' |
|
|
|
// this.isAddEdit = 0 |
|
|
|
// } |
|
|
|
}, |
|
|
|
uploadEdit(index, row) { |
|
|
|
this.uploadDialogVisible = true |
|
|
|
if (row) { |
|
|
|
console.log(row.type) |
|
|
|
this.uploadTitle = '编辑' |
|
|
|
this.classifyForm.name = row.name |
|
|
|
this.classifyForm.direction = row.direction |
|
|
|
this.classifyForm.selectNameList.push(row.type) |
|
|
|
// 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 == '武汉图书馆' |
|
|
|
} |
|
|
|
|
|
|
|
} else { |
|
|
|
this.uploadTitle = '上传' |
|
|
|
this.layerTitle = '新增' |
|
|
|
this.isAddEdit = 0 |
|
|
|
this.classifyForm.id = null |
|
|
|
this.classifyForm.class_name = '' |
|
|
|
this.classifyForm.is_all_name = '' |
|
|
|
} |
|
|
|
|
|
|
|
}, |
|
|
|
selectName(vId) { |
|
|
|
let obj = {} |
|
|
|
obj = this.nameOptions.find((item) => { |
|
|
|
return item.value === vId |
|
|
|
}) |
|
|
|
this.classifyForm.selectName = obj.value |
|
|
|
// 上传 |
|
|
|
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) { |
|
|
|
submitForm (formName) { |
|
|
|
this.$refs[formName].validate((valid) => { |
|
|
|
if (valid) { |
|
|
|
alert('submit!') |
|
|
|
const params = { |
|
|
|
class_name: this.classifyForm.class_name, |
|
|
|
is_all: this.classifyForm.is_all, |
|
|
|
id: this.classifyForm.id, |
|
|
|
orga_ids: ["133221333123111"], |
|
|
|
} |
|
|
|
reqAddOrEdit(params).then(res => { |
|
|
|
if (res.code == 200) { |
|
|
|
this.$message({ |
|
|
|
type: 'success', |
|
|
|
message: this.classifyForm.id ? '编辑成功' : '新增成功' |
|
|
|
}) |
|
|
|
this.addDialogVisible = false |
|
|
|
this.getHeaderList() |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
}) |
|
|
|
} else { |
|
|
|
console.log('error submit!!') |
|
|
|
return false |
|
|
|
} |
|
|
|
}) |
|
|
|
}, |
|
|
|
resetForm(formName) { |
|
|
|
resetForm (formName) { |
|
|
|
this.addDialogVisible = false |
|
|
|
this.uploadDialogVisible = false |
|
|
|
this.$refs[formName].resetFields() |
|
|
|
} |
|
|
|
}, |
|
|
|
// 所属机构 |
|
|
|
selectorganization (selVal) { |
|
|
|
this.classifyForm.is_all = selVal.key |
|
|
|
this.classifyForm.is_all_name = selVal.name |
|
|
|
}, |
|
|
|
// tabClick |
|
|
|
|
|
|
|
tabItemClick (tab, event) { |
|
|
|
console.log(this.themeItemActive) |
|
|
|
console.log(tab, event) |
|
|
|
}, |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
@ -310,27 +253,27 @@ export default { |
|
|
|
position: relative; |
|
|
|
padding: 0; |
|
|
|
background: none; |
|
|
|
::v-deep .el-tabs{ |
|
|
|
::v-deep .el-tabs { |
|
|
|
height: 55px; |
|
|
|
padding: 0 24px; |
|
|
|
margin-bottom: 24px; |
|
|
|
line-height: 55px; |
|
|
|
background: #fff; |
|
|
|
} |
|
|
|
::v-deep .el-tabs__nav-wrap::after{ |
|
|
|
::v-deep .el-tabs__nav-wrap::after { |
|
|
|
display: none; |
|
|
|
} |
|
|
|
::v-deep .el-tabs__active-bar{ |
|
|
|
::v-deep .el-tabs__active-bar { |
|
|
|
display: none; |
|
|
|
} |
|
|
|
::v-deep .theme_item_tab{ |
|
|
|
::v-deep .theme_item_tab { |
|
|
|
margin-bottom: 0; |
|
|
|
.el-tabs__header{ |
|
|
|
.el-tabs__header { |
|
|
|
margin-bottom: 0; |
|
|
|
border-bottom: 1px solid #eee; |
|
|
|
} |
|
|
|
} |
|
|
|
::v-deep .theme_img{ |
|
|
|
::v-deep .theme_img { |
|
|
|
align-content: flex-start; |
|
|
|
height: calc(100vh - 246px); |
|
|
|
padding: 18px 24px 0 24px; |
|
|
|
@ -341,23 +284,23 @@ export default { |
|
|
|
top: 93px; |
|
|
|
} |
|
|
|
} |
|
|
|
.upload_layer{ |
|
|
|
.query_history{ |
|
|
|
.upload_layer { |
|
|
|
.query_history { |
|
|
|
display: flex; |
|
|
|
} |
|
|
|
::v-deep .el-dialog__body { |
|
|
|
.el-form-item__label{ |
|
|
|
.el-form-item__label { |
|
|
|
height: 30px; |
|
|
|
line-height: 30px; |
|
|
|
} |
|
|
|
.el-input__inner{ |
|
|
|
.el-input__inner { |
|
|
|
height: 30px; |
|
|
|
line-height: 30px; |
|
|
|
} |
|
|
|
.el-range-separator{ |
|
|
|
.el-range-separator { |
|
|
|
line-height: 26px; |
|
|
|
} |
|
|
|
.el-checkbox__label{ |
|
|
|
.el-checkbox__label { |
|
|
|
line-height: 30px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
xudanya
3 years ago