|
|
|
@ -2,9 +2,9 @@ |
|
|
|
<div class="app-container theme_main"> |
|
|
|
<!-- 右上角btn --> |
|
|
|
<div class="home_publish_btn"> |
|
|
|
<el-button round class="el_button_green">新增</el-button> |
|
|
|
<el-button round type="primary">编辑</el-button> |
|
|
|
<el-button round class="el_button_red">上传</el-button> |
|
|
|
<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> |
|
|
|
</div> |
|
|
|
<div style="position:relative"> |
|
|
|
<!-- 主题库list --> |
|
|
|
@ -15,10 +15,146 @@ |
|
|
|
:show-item-info="showItemInfo" |
|
|
|
/> |
|
|
|
<div class="material_btn"> |
|
|
|
<el-button round type="primary">上传历史</el-button> |
|
|
|
<el-button round type="primary" @click="uploadListVisible=true">上传历史</el-button> |
|
|
|
<el-button round @click="multiSelectBtn">{{ mulitText }}</el-button> |
|
|
|
</div> |
|
|
|
</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-input v-model="classifyForm.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-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-select> |
|
|
|
</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> |
|
|
|
</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> |
|
|
|
@ -32,7 +168,73 @@ export default { |
|
|
|
return { |
|
|
|
mulitText: '多选', |
|
|
|
isMultiSelected: false, |
|
|
|
showItemInfo: true |
|
|
|
showItemInfo: true, |
|
|
|
uploadListVisible: false, |
|
|
|
addDialogVisible: false, |
|
|
|
layerTitle: '新增', |
|
|
|
uploadDialogVisible: false, |
|
|
|
uploadTitle: '上传', |
|
|
|
isAddEdit: 0, |
|
|
|
form: { |
|
|
|
name: null, |
|
|
|
date: null |
|
|
|
}, |
|
|
|
classifyForm: { |
|
|
|
name: null, |
|
|
|
agency: null, |
|
|
|
selectName: null, |
|
|
|
direction: null, |
|
|
|
selectNameList: [] |
|
|
|
}, |
|
|
|
options: [ |
|
|
|
{ |
|
|
|
value: '选项1', |
|
|
|
label: '全部' |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: '选项2', |
|
|
|
label: '武汉图书馆' |
|
|
|
} |
|
|
|
], |
|
|
|
nameOptions: [ |
|
|
|
{ |
|
|
|
value: '选项1', |
|
|
|
label: '为你推荐', |
|
|
|
checked: false |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: '选项2', |
|
|
|
label: '人工智能', |
|
|
|
checked: true |
|
|
|
} |
|
|
|
], |
|
|
|
rules: { |
|
|
|
name: [{ required: true, message: '请输入类别名称', trigger: 'blur' }], |
|
|
|
selectName: [ |
|
|
|
{ required: true, message: '请选择类别名称', trigger: 'change' } |
|
|
|
], |
|
|
|
selectNameList: [ |
|
|
|
{ required: true, message: '请选择类别名称', trigger: 'change' } |
|
|
|
], |
|
|
|
agency: [ |
|
|
|
{ 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 |
|
|
|
} |
|
|
|
] |
|
|
|
} |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
@ -46,7 +248,60 @@ export default { |
|
|
|
} else { |
|
|
|
this.mulitText = '多选' |
|
|
|
} |
|
|
|
}, |
|
|
|
// 上传历史-停用/恢复 |
|
|
|
isStopHandle(index, row) { |
|
|
|
row.enabled = !row.enabled |
|
|
|
}, |
|
|
|
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) |
|
|
|
} else { |
|
|
|
this.uploadTitle = '上传' |
|
|
|
} |
|
|
|
}, |
|
|
|
selectName(vId) { |
|
|
|
let obj = {} |
|
|
|
obj = this.nameOptions.find((item) => { |
|
|
|
return item.value === vId |
|
|
|
}) |
|
|
|
this.classifyForm.selectName = obj.value |
|
|
|
}, |
|
|
|
// 新增编辑 |
|
|
|
submitForm(formName) { |
|
|
|
this.$refs[formName].validate((valid) => { |
|
|
|
if (valid) { |
|
|
|
alert('submit!') |
|
|
|
} else { |
|
|
|
console.log('error submit!!') |
|
|
|
return false |
|
|
|
} |
|
|
|
}) |
|
|
|
}, |
|
|
|
resetForm(formName) { |
|
|
|
this.addDialogVisible = false |
|
|
|
this.uploadDialogVisible = false |
|
|
|
this.$refs[formName].resetFields() |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
@ -86,4 +341,25 @@ export default { |
|
|
|
top: 93px; |
|
|
|
} |
|
|
|
} |
|
|
|
.upload_layer{ |
|
|
|
.query_history{ |
|
|
|
display: flex; |
|
|
|
} |
|
|
|
::v-deep .el-dialog__body { |
|
|
|
.el-form-item__label{ |
|
|
|
height: 30px; |
|
|
|
line-height: 30px; |
|
|
|
} |
|
|
|
.el-input__inner{ |
|
|
|
height: 30px; |
|
|
|
line-height: 30px; |
|
|
|
} |
|
|
|
.el-range-separator{ |
|
|
|
line-height: 26px; |
|
|
|
} |
|
|
|
.el-checkbox__label{ |
|
|
|
line-height: 30px; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
