|
@@ -0,0 +1,459 @@
|
|
|
+<template>
|
|
|
+ <div class="container">
|
|
|
+ <el-header class="bg-blue" style="width: 1210px;margin:0 auto;">
|
|
|
+ <!-- <el-image :src="logo" style="width: 50px; height: 50px" fit="fill" />-->
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="8">
|
|
|
+ <div class="title text-shadow text-white text-left " style="font-size: 26px;overflow: hidden;text-overflow: ellipsis;width: 100%;height:60px;">{{ partInfo.full_name }} {{ partInfo.part_name }}</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <div class="content_title" data-aos="zoom-in-up">{{ titleData.board_title }}</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8" >
|
|
|
+ <div class="time text-right" style="font-size: 26px">{{ currentTime }}</div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-header>
|
|
|
+ <div class="floor-container" :style="{height:floorContainerHeight+'px' }">
|
|
|
+
|
|
|
+ <div class="tpl-box" :style="tplBoxStyle">
|
|
|
+ <draggable v-model="templateArray" :options="tplOptions" class="tpl-list">
|
|
|
+ <div v-for="item in templateArray" :class="'item-' + item.tpl_id" class="tpl-item">
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="24/item.tpl_id" v-for="size in item.tpl_id" :key="size" class="grid-content" :class="'bg-purple-'+size"></el-col>
|
|
|
+ </el-row>
|
|
|
+ <span class="text-tpl">{{ templates[item.tpl_id].title }}</span>
|
|
|
+ </div>
|
|
|
+ </draggable>
|
|
|
+ <el-button type="primary" @click="handleSaveFloor" class="save-btn">保存发布</el-button>
|
|
|
+ <div class="tpl-btns">
|
|
|
+ <div class="btn-item" @click="tplBoxShow = !tplBoxShow">
|
|
|
+ <i v-if="tplBoxShow" class="el-icon-d-arrow-left"></i>
|
|
|
+ <i v-else class="el-icon-d-arrow-right"></i>
|
|
|
+ </div>
|
|
|
+ <div style="border-top: 1px dashed #ccc;margin: 2px 0"></div>
|
|
|
+ <el-tooltip class="item" effect="dark" content="快捷保存" placement="right">
|
|
|
+ <div class="btn-item" @click="handleSaveFloor">
|
|
|
+ <i class="el-icon-upload"></i>
|
|
|
+ </div>
|
|
|
+ </el-tooltip>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="draggable-box floor">
|
|
|
+ <div class="floor-body">
|
|
|
+ <draggable v-model="floorList" :options="floorOptions" class="floor-list">
|
|
|
+ <div v-for="(item, index) in floorList" :class="'item-' + item.tpl_id" class="floor-item">
|
|
|
+ <component
|
|
|
+ :is="templates[item.tpl_id]"
|
|
|
+ :data="JSON.parse(JSON.stringify(item))"
|
|
|
+ is-edit
|
|
|
+ @edit-block="(...props) => { handleEditBlock(index, ...props) }"
|
|
|
+ @edit-title="(...props) => { handleEditTitle(index, ...props) }"
|
|
|
+ @edit-tags="(...props) => { handleEditTags(index, ...props) }"
|
|
|
+ ></component>
|
|
|
+ <div class="panel-handle">
|
|
|
+ <span class="icon-handle handle-move"><svg-icon icon-class="drag"/></span>
|
|
|
+ <span class="icon-handle handle-setting" @click="() => { handleModule(index, JSON.parse(JSON.stringify(item))) }"><svg-icon icon-class="setting"/></span>
|
|
|
+ <span class="icon-handle handle-delete" @click="floorList.splice(index, 1)"><svg-icon icon-class="delete"/></span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </draggable>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <board-item-setting
|
|
|
+ :default-data="boardItemConfig"
|
|
|
+ :show="settingShow"
|
|
|
+ :board-items="boardItems"
|
|
|
+ @close="settingShow=false"
|
|
|
+ @confirm="handleBoardItemSet"
|
|
|
+ ></board-item-setting>
|
|
|
+
|
|
|
+ <board-module-setting
|
|
|
+ :default-data="boardModuleConfig"
|
|
|
+ :show="moduleSettingShow"
|
|
|
+ @close="moduleSettingShow=false"
|
|
|
+ @confirm="handleBoardModuleSet"
|
|
|
+ >
|
|
|
+
|
|
|
+ </board-module-setting>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import Vue from 'vue'
|
|
|
+ import draggable from 'vuedraggable'
|
|
|
+ import templates, { templateArray } from './templates'
|
|
|
+ import VueLazyload from 'vue-lazyload'
|
|
|
+ import BoardItemSetting from "./templates/board-item-setting";
|
|
|
+ import BoardModuleSetting from "./templates/board-module-setting";
|
|
|
+ import * as API_BoardTitle from '@/api/ncs_board_title'
|
|
|
+ import * as API_BoardItem from '@/api/ncs_board_item'
|
|
|
+ Vue.use(VueLazyload)
|
|
|
+ import moment from 'moment'
|
|
|
+ require('moment/locale/zh-cn')
|
|
|
+ export default {
|
|
|
+ name: "screen-designer",
|
|
|
+ components: {BoardModuleSetting, BoardItemSetting, draggable },
|
|
|
+ data(){
|
|
|
+ return{
|
|
|
+ currentTime: '',
|
|
|
+ templates,
|
|
|
+ templateArray,
|
|
|
+ boardItemConfig:{},
|
|
|
+ boardModuleConfig:{},
|
|
|
+ settingShow:false,
|
|
|
+ moduleSettingShow:false,
|
|
|
+ //看板标题
|
|
|
+ titleData:{},
|
|
|
+ //标题id
|
|
|
+ titleId:this.$route.params.id,
|
|
|
+ /** 模板列表 */
|
|
|
+ tplList: [],
|
|
|
+ /** 模板配置 */
|
|
|
+ tplOptions: {
|
|
|
+ group: { name: 'tplGroup', pull: 'clone', put: false },
|
|
|
+ sort: false
|
|
|
+ },
|
|
|
+ tplBoxShow:true,
|
|
|
+ /** 楼层列表 */
|
|
|
+ floorList: [],
|
|
|
+ /** 楼层配置 */
|
|
|
+ floorOptions: {
|
|
|
+ animation: 150,
|
|
|
+ group: { name: 'tplGroup', put: true },
|
|
|
+ sort: true,
|
|
|
+ handle: '.handle-move'
|
|
|
+ },
|
|
|
+ boardItems:[{
|
|
|
+ area_content: "2,5,7",
|
|
|
+ area_content_style: "color:green;",
|
|
|
+ area_label: "今日出院",
|
|
|
+ area_label_style: "color:red;",
|
|
|
+ area_size: 1,
|
|
|
+ his_board_title_keyval: "1",
|
|
|
+ his_keyval: "1",
|
|
|
+ his_part_keyval: "1"
|
|
|
+ }]
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ // 楼层模板盒子样式
|
|
|
+ tplBoxStyle() {
|
|
|
+ const { sidebar } = this.$store.getters
|
|
|
+ let left = (sidebar.opened ? 210 : 60)
|
|
|
+ left = this.tplBoxShow ? left : left - 300
|
|
|
+ return {
|
|
|
+ left: left + 'px'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ floorContainerHeight() {
|
|
|
+ return this.mainAreaHeight-60
|
|
|
+ },
|
|
|
+ partInfo() {
|
|
|
+ return this.$store.getters.organization
|
|
|
+ }
|
|
|
+ },
|
|
|
+ beforeRouteUpdate(to, from, next) {
|
|
|
+ this.titleId = to.params.id
|
|
|
+ next()
|
|
|
+ },
|
|
|
+ activated() {
|
|
|
+ this.titleId = this.$route.params.id
|
|
|
+ },
|
|
|
+ async mounted(){
|
|
|
+ this.boardItems = await API_BoardItem.getPartList(this.$store.getters.partId)
|
|
|
+ moment.locale()
|
|
|
+ this.currentTime = moment().format('YYYY-MM-DD HH:mm:ss dddd')
|
|
|
+ this.getBoardTitle()
|
|
|
+
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ /** 保存发布 */
|
|
|
+ handleSaveFloor() {
|
|
|
+ this.titleData.content_config= JSON.stringify(this.floorList)
|
|
|
+ API_BoardTitle.update(this.titleData.id, this.titleData).then(() => this.$message.success('保存发布成功!'))
|
|
|
+ },
|
|
|
+
|
|
|
+ handleBoardItemSet(settingData){
|
|
|
+ console.log(settingData)
|
|
|
+ const { index, target, columnIndex } = this.editOptions
|
|
|
+ const blockData = {...settingData}
|
|
|
+ target.columnList[columnIndex]=blockData
|
|
|
+ this.$set(this.floorList, index, target)
|
|
|
+ },
|
|
|
+ handleBoardModuleSet(settingData){
|
|
|
+ const { index, blockdata } = this.editOptions
|
|
|
+ const moduleSetting = {...settingData}
|
|
|
+ blockdata.moduleStyle=moduleSetting
|
|
|
+ this.$set(this.floorList, index, blockdata)
|
|
|
+ },
|
|
|
+
|
|
|
+ /** 编辑楼层区块 */
|
|
|
+ handleEditBlock(index, target, columnIndex) {
|
|
|
+
|
|
|
+ const blockData = target.columnList[columnIndex]
|
|
|
+
|
|
|
+ this.settingShow=true
|
|
|
+ this.boardItemConfig = {...blockData}
|
|
|
+ // const block = target.columnList[columnIndex].blockList[blockIndex]
|
|
|
+ // const type = block.block_type
|
|
|
+ this.editOptions = { index, target, columnIndex }
|
|
|
+ // const blockData = JSON.parse(JSON.stringify(block))
|
|
|
+ // if (type === 'IMAGE') {
|
|
|
+ // this.defaultImageData = blockData.block_value ? [{
|
|
|
+ // url: blockData.block_value,
|
|
|
+ // opt: blockData.block_opt
|
|
|
+ // }] : null
|
|
|
+ // this.dialogImageShow = true
|
|
|
+ // } else if (type === 'GOODS') {
|
|
|
+ // // 填充默认数据
|
|
|
+ // // this.defaultGoodsData = blockData.block_value ? [blockData.block_value.goods_id] : []
|
|
|
+ // // this.dialogGoodsShow = true
|
|
|
+ // } else if (type === 'BRAND') {
|
|
|
+ // console.log('品牌模块')
|
|
|
+ // }
|
|
|
+ },
|
|
|
+
|
|
|
+ handleModule(index,blockdata){
|
|
|
+ this.boardModuleConfig = {...blockdata.moduleStyle}
|
|
|
+ this.editOptions = { index, blockdata }
|
|
|
+ this.moduleSettingShow=true
|
|
|
+ console.log(index,blockdata)
|
|
|
+ },
|
|
|
+
|
|
|
+ /** 编辑楼层标题 */
|
|
|
+ handleEditTitle(index, target, columnIndex) {
|
|
|
+ this.editOptions = { index, target, columnIndex }
|
|
|
+ const column = target.columnList[columnIndex]
|
|
|
+ const columnData = JSON.parse(JSON.stringify(column))
|
|
|
+ this.defaultTitleData = {
|
|
|
+ text: column.title,
|
|
|
+ start_color: column.titleColors[0],
|
|
|
+ end_color: column.titleColors[1]
|
|
|
+ }
|
|
|
+ this.dialogTitleShow = true
|
|
|
+ },
|
|
|
+ /** 编辑楼层标签 */
|
|
|
+ handleEditTags(index, target, columnIndex) {
|
|
|
+ this.editOptions = { index, target, columnIndex }
|
|
|
+ const column = target.columnList[columnIndex]
|
|
|
+ const columnData = JSON.parse(JSON.stringify(column))
|
|
|
+ this.defaultTagsData = columnData.tagList
|
|
|
+ this.dialogTagsShow = true
|
|
|
+ },
|
|
|
+ getBoardTitle(){
|
|
|
+ API_BoardTitle.get(this.titleId,{}).then(
|
|
|
+ res=>{
|
|
|
+ console.log('res',res)
|
|
|
+ this.titleData={...res}
|
|
|
+ if(res.content_config!==null&&res.content_config!==''){
|
|
|
+ this.floorList=JSON.parse(res.content_config)
|
|
|
+ this.floorList.forEach(item=>{
|
|
|
+ item.columnList.forEach(col=>{
|
|
|
+ if(col.boardItemHisKeyVal!==''){
|
|
|
+ console.log('col', this.boardItems)
|
|
|
+ const boardItem = this.boardItems.filter(p=>p.his_keyval===col.boardItemHisKeyVal)[0]
|
|
|
+ console.log('boardItem',boardItem)
|
|
|
+ if(boardItem!==null&&boardItem!==undefined){
|
|
|
+ col.content=boardItem.area_content
|
|
|
+ col.label=boardItem.area_label
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ }else{
|
|
|
+ this.floorList=[]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ).catch(error=>{
|
|
|
+ this.$message.error(error.message)
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped type="text/scss">
|
|
|
+ .container {
|
|
|
+ min-width: 1366px;
|
|
|
+ }
|
|
|
+ .floor-container {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ background-color: #E5E7EA;
|
|
|
+ padding: 10px;
|
|
|
+ }
|
|
|
+ .draggable-box {
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ flex-direction: column;
|
|
|
+ width: 80%;
|
|
|
+
|
|
|
+ }
|
|
|
+ .draggable-box .floor {
|
|
|
+ width: 1210px + 50px;
|
|
|
+ flex-shrink: 0;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .tpl-list {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ overflow: hidden;
|
|
|
+ width: 100%;
|
|
|
+ background-color: #fff;
|
|
|
+ }
|
|
|
+ .tpl-item {
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-bottom: 2px solid #D9E0E7;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ /*&.item-1 .img-tpl {*/
|
|
|
+ /* background: url("../../../assets/pc-tpl-01.png") no-repeat;*/
|
|
|
+ /* background-size: 100%;*/
|
|
|
+ /*}*/
|
|
|
+ /*&.item-2 .img-tpl {*/
|
|
|
+ /* background: url("../../../assets/pc-tpl-02.png") no-repeat;*/
|
|
|
+ /* background-size: 100%;*/
|
|
|
+ /*}*/
|
|
|
+ /*&.item-3 .img-tpl {*/
|
|
|
+ /* background: url("../../../assets/pc-tpl-03.png") no-repeat;*/
|
|
|
+ /* background-size: 100%;*/
|
|
|
+ /*}*/
|
|
|
+ /*&.item-4 .img-tpl {*/
|
|
|
+ /* background: url("../../../assets/pc-tpl-04.png") no-repeat;*/
|
|
|
+ /* background-size: 100%;*/
|
|
|
+ /*}*/
|
|
|
+ }
|
|
|
+ .img-tpl {
|
|
|
+ width: 100%;
|
|
|
+ min-height: 150px;
|
|
|
+ }
|
|
|
+ .text-tpl {
|
|
|
+ text-align: center;
|
|
|
+ margin: 5px 0;
|
|
|
+ color: #ACB0B9;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+ .floor-body {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ overflow-y: scroll;
|
|
|
+ }
|
|
|
+ .floor-list {
|
|
|
+ background-color: #E5E7EA;
|
|
|
+ min-width: 75%;
|
|
|
+ min-height: 500px;
|
|
|
+ }
|
|
|
+ .floor-item {
|
|
|
+ position: relative;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .floor-item .panel-handle {
|
|
|
+ display: none;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ right: -25px;
|
|
|
+
|
|
|
+ }
|
|
|
+ .floor-item .panel-handle .icon-handle {
|
|
|
+ display: block;
|
|
|
+ cursor: pointer;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .floor-item .panel-handle .svg-icon {
|
|
|
+ width: 25px;
|
|
|
+ height: 25px;
|
|
|
+ background-color: #fff;
|
|
|
+ }
|
|
|
+ .floor-item:hover .panel-handle{
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ .floor-item:first-child .floor-layout {
|
|
|
+ margin-top: 0;
|
|
|
+ }
|
|
|
+ .tpl-box {
|
|
|
+ position: fixed;
|
|
|
+ top: 20%;
|
|
|
+ left: 180px;
|
|
|
+ z-index: 99;
|
|
|
+ width: 300px;
|
|
|
+ margin-top: (-500px - 32px + 84px) / 2;
|
|
|
+ border-top: 10px solid #fff;
|
|
|
+ box-shadow: 4px 5px 20px 0 rgba(0,0,0,.6);
|
|
|
+ transition: all ease .3s;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tpl-box .tpl-list {
|
|
|
+ height: 300px;
|
|
|
+ overflow-y: scroll;
|
|
|
+ }
|
|
|
+ .tpl-box .save-btn {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ .tpl-box .tpl-btns {
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ right: -25px;
|
|
|
+ margin-top: -35px;
|
|
|
+ width: 25px;
|
|
|
+ height: 70px;
|
|
|
+ background-color: #fff;
|
|
|
+ text-align: center;
|
|
|
+ padding: 5px 0;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .tpl-box .tpl-btns .btn-item {
|
|
|
+ cursor: pointer;
|
|
|
+ padding: 5px 0;
|
|
|
+
|
|
|
+ }
|
|
|
+ .tpl-box .tpl-btns .btn-item + .btn-item {
|
|
|
+ margin-top: 8px;
|
|
|
+ }
|
|
|
+ .tpl-box .tpl-btns .btn-item:hover {
|
|
|
+ background-color: #46A0FC;
|
|
|
+ color: #fff
|
|
|
+ }
|
|
|
+ .bg-blue {
|
|
|
+ background-color: #0081ff;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+ /deep/ .el-header{
|
|
|
+ line-height: 60px;
|
|
|
+ }
|
|
|
+ .content_title{font-size: 26px}
|
|
|
+ .grid-content {
|
|
|
+ border-radius: 4px;
|
|
|
+ min-height: 36px;
|
|
|
+ }
|
|
|
+ .el-col {
|
|
|
+ border-radius: 4px;
|
|
|
+ }
|
|
|
+ .bg-purple-1 {
|
|
|
+ background: #99a9bf;
|
|
|
+ }
|
|
|
+ .bg-purple-2 {
|
|
|
+ background: #d3dce6;
|
|
|
+ }
|
|
|
+ .bg-purple-3 {
|
|
|
+ background: #e5e9f2;
|
|
|
+ }
|
|
|
+</style>
|