291 lines
8.0 KiB
Vue
291 lines
8.0 KiB
Vue
|
<template>
|
|||
|
|
<div class="settingChunk">
|
|||
|
|
<div class="leftAll">
|
|||
|
|
<div class="search">
|
|||
|
|
<el-input
|
|||
|
|
placeholder="搜索"
|
|||
|
|
prefix-icon="el-icon-search"
|
|||
|
|
v-model="searchValue"
|
|||
|
|
>
|
|||
|
|
</el-input>
|
|||
|
|
</div>
|
|||
|
|
<div class="checkBoxList">
|
|||
|
|
<!-- 字段-->
|
|||
|
|
<template v-if="showFiledFlag">
|
|||
|
|
<el-checkbox-group v-model="pickList" @change="checkBoxChangeHandle">
|
|||
|
|
<template v-for="(item,index) in allBtnList">
|
|||
|
|
<div class="checkBoxItem" :key="item.id" v-if="item.name.includes(searchValue)">
|
|||
|
|
<el-checkbox :label="item.id">{{ item.name }}</el-checkbox>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
</el-checkbox-group>
|
|||
|
|
</template>
|
|||
|
|
<!-- 按钮类型-->
|
|||
|
|
<template v-else>
|
|||
|
|
<el-checkbox-group v-model="pickList" @change="changeBtnBoxHandle">
|
|||
|
|
<template v-for="(item,index) in allFiledList">
|
|||
|
|
<div class="checkBoxItem" :key="item.buttonType" v-if="item.buttonName.includes(searchValue)">
|
|||
|
|
<el-checkbox :label="item.buttonType">{{ item.buttonName }}</el-checkbox>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
</el-checkbox-group>
|
|||
|
|
</template>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="rightAdd">
|
|||
|
|
<div class="pickTitle">已选择（{{ pickShowList.length }}）</div>
|
|||
|
|
<div class="showCheckBoxList">
|
|||
|
|
<draggable v-model="pickShowList">
|
|||
|
|
<template v-if="showFiledFlag">
|
|||
|
|
<div class="showCheckBoxItem" v-for="(item,index) in pickShowList" :key="item.viewFiled">
|
|||
|
|
<div class="name">{{ item.name }}</div>
|
|||
|
|
<div class="btn" @click="deleShowList(item,index)">x</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
<template v-else>
|
|||
|
|
<div class="showCheckBoxItem" v-for="(item,index) in pickShowList" :key="item.buttonType">
|
|||
|
|
<div class="name">{{ item.buttonName }}</div>
|
|||
|
|
<div class="btn" @click="deleBtnShowList(item,index)">x</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
</draggable>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import draggable from 'vuedraggable'
|
|||
|
|
import { authApi } from '@/api/apis/auth'
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
name: 'settingChunk',
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
searchValue: '',//搜索值
|
|||
|
|
allBtnList: [],//所有选项
|
|||
|
|
allFiledList: [
|
|||
|
|
{
|
|||
|
|
buttonName: '新建',
|
|||
|
|
buttonValue: 'new',
|
|||
|
|
buttonType: '1'
|
|||
|
|
}, {
|
|||
|
|
buttonName: '重置',
|
|||
|
|
buttonValue: 'resize',
|
|||
|
|
buttonType: '2'
|
|||
|
|
}, {
|
|||
|
|
buttonName: '查询',
|
|||
|
|
buttonValue: 'search',
|
|||
|
|
buttonType: '3'
|
|||
|
|
}, {
|
|||
|
|
buttonName: '修改',
|
|||
|
|
buttonValue: 'edit',
|
|||
|
|
buttonType: '4'
|
|||
|
|
}, {
|
|||
|
|
buttonName: '删除',
|
|||
|
|
buttonValue: 'dele',
|
|||
|
|
buttonType: '5'
|
|||
|
|
}, {
|
|||
|
|
buttonName: '查看',
|
|||
|
|
buttonValue: 'view',
|
|||
|
|
buttonType: '6'
|
|||
|
|
}, {
|
|||
|
|
buttonName: '下发',
|
|||
|
|
buttonValue: 'send',
|
|||
|
|
buttonType: '7'
|
|||
|
|
}
|
|||
|
|
],//所有按钮
|
|||
|
|
//key字段【'待选字段'，‘选中字段’，viewType】
|
|||
|
|
dist: {
|
|||
|
|
'查询': ['queryFiled', 'dbQueryFiled', 1],
|
|||
|
|
'列表': ['listFiled', 'dbListFiled', 2],
|
|||
|
|
'新增': ['addFiled', 'dbAddFiled', 3],
|
|||
|
|
'修改': ['editFiled', 'dbEditFiled', 4],
|
|||
|
|
'查看': ['showFiled', 'dbShowFiled', 5]
|
|||
|
|
},
|
|||
|
|
pickDist: {},//多选框字典
|
|||
|
|
pickList: [],//用于绑定选中的多选框
|
|||
|
|
pickShowList: [],//用于展示选中的多选框
|
|||
|
|
thisKey: '',//当前key
|
|||
|
|
showFiledFlag: true//判断当前是字段还是按钮
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
//显示字段获取
|
|||
|
|
async getAllBtn(key) {
|
|||
|
|
this.showFiledFlag = true
|
|||
|
|
this.thisKey = key
|
|||
|
|
//重置数据
|
|||
|
|
this.pickShowList = []
|
|||
|
|
this.pickList = []
|
|||
|
|
this.searchValue = ''
|
|||
|
|
this.allBtnList = []
|
|||
|
|
this.pickDist = {}
|
|||
|
|
|
|||
|
|
//有就走字段逻辑 没有则走按钮逻辑
|
|||
|
|
if (this.dist[key]) {
|
|||
|
|
this.openLoading('detail')
|
|||
|
|
const res = await authApi('mdmModuleService', '', 'queryMdmViewField', '', {
|
|||
|
|
id: this.$route.query.id
|
|||
|
|
})
|
|||
|
|
let tempArr = this.dist[key]
|
|||
|
|
res.attribute[tempArr[0]].forEach(item => {
|
|||
|
|
this.$set(this.pickDist, item.id, item.name)
|
|||
|
|
})
|
|||
|
|
this.allBtnList = res.attribute[tempArr[0]]
|
|||
|
|
res.attribute[tempArr[1]].forEach(item => {
|
|||
|
|
this.pickList.push(item.viewFiled)
|
|||
|
|
this.checkBoxChangeHandle()
|
|||
|
|
})
|
|||
|
|
} else {
|
|||
|
|
this.showFiledFlag = false
|
|||
|
|
const res = await authApi('mdmModuleService', '', 'queryMdmViewButton', '', {
|
|||
|
|
mdmId: this.$route.query.id
|
|||
|
|
})
|
|||
|
|
res.attribute.forEach(item => {
|
|||
|
|
this.pickList.push(item.buttonType)
|
|||
|
|
})
|
|||
|
|
this.changeBtnBoxHandle()
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
//当多选框改变时
|
|||
|
|
checkBoxChangeHandle() {
|
|||
|
|
let tempList = []
|
|||
|
|
this.pickShowList = []
|
|||
|
|
//这边需要将选中的list通过dist变成一个可用的结构
|
|||
|
|
this.pickList.forEach(item => {
|
|||
|
|
this.pickShowList.push({
|
|||
|
|
name: this.pickDist[item],
|
|||
|
|
viewFiled: item
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
//当按钮多选改变时
|
|||
|
|
changeBtnBoxHandle() {
|
|||
|
|
this.pickShowList = []
|
|||
|
|
this.pickList.forEach(item => {
|
|||
|
|
let obj = this.allFiledList[item - 1]
|
|||
|
|
this.pickShowList.push(obj)
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
//选择栏目删除按钮
|
|||
|
|
deleShowList(item, index) {
|
|||
|
|
this.pickShowList.splice(index, 1)
|
|||
|
|
//这里是为了让右边选中box同步修改
|
|||
|
|
let tempArr = []
|
|||
|
|
this.pickShowList.forEach((item) => {
|
|||
|
|
tempArr.push(item.viewFiled)
|
|||
|
|
})
|
|||
|
|
this.pickList = tempArr
|
|||
|
|
},
|
|||
|
|
//删除按钮
|
|||
|
|
deleBtnShowList(item, index) {
|
|||
|
|
this.pickShowList.splice(index, 1)
|
|||
|
|
let tempArr = []
|
|||
|
|
this.pickShowList.forEach((item) => {
|
|||
|
|
tempArr.push(item.buttonType)
|
|||
|
|
})
|
|||
|
|
this.pickList = tempArr
|
|||
|
|
},
|
|||
|
|
//保存方法
|
|||
|
|
async saveHandle() {
|
|||
|
|
//首先需要判断是字段设置还是按钮
|
|||
|
|
if (this.showFiledFlag) {
|
|||
|
|
//字段
|
|||
|
|
let keyArr = this.dist[this.thisKey]
|
|||
|
|
let params = {
|
|||
|
|
mdmId: this.$route.query.id,
|
|||
|
|
viewType: keyArr[2]
|
|||
|
|
}
|
|||
|
|
params[keyArr[1]] = this.pickShowList
|
|||
|
|
this.openLoading("submit")
|
|||
|
|
const res = await authApi('mdmModuleService', '', 'saveOrUpdateMdmViewField', '', params)
|
|||
|
|
this.$vmNews('保存成功！', 'success')
|
|||
|
|
this.$emit('saveSuccessEmit')
|
|||
|
|
} else {
|
|||
|
|
//按钮
|
|||
|
|
let params = {
|
|||
|
|
mdmId: this.$route.query.id,
|
|||
|
|
dbButtonFiled: this.pickShowList
|
|||
|
|
}
|
|||
|
|
this.openLoading("submit")
|
|||
|
|
const res = await authApi('mdmModuleService', '', 'saveOrUpdateMdmViewButton', '', params)
|
|||
|
|
this.$vmNews('保存成功！', 'success')
|
|||
|
|
this.$emit('saveSuccessEmit')
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
},
|
|||
|
|
components: {
|
|||
|
|
draggable
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<style scoped lang="scss">
|
|||
|
|
.settingChunk {
|
|||
|
|
display: flex;
|
|||
|
|
height: 80vh;
|
|||
|
|
|
|||
|
|
.leftAll {
|
|||
|
|
flex: 1;
|
|||
|
|
padding: 0 20px;
|
|||
|
|
border-right: 1px solid #EBEBEB;
|
|||
|
|
|
|||
|
|
.search {
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.checkBoxList {
|
|||
|
|
height: 70vh;
|
|||
|
|
overflow: auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.checkBoxItem {
|
|||
|
|
margin: 20px 0 16px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.rightAdd {
|
|||
|
|
flex: 1;
|
|||
|
|
padding: 0 20px;
|
|||
|
|
|
|||
|
|
.pickTitle {
|
|||
|
|
|
|||
|
|
font-family: PingFangSC, PingFang SC;
|
|||
|
|
font-weight: 400;
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: #333333;
|
|||
|
|
line-height: 20px;
|
|||
|
|
text-align: left;
|
|||
|
|
font-style: normal;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.showCheckBoxList {
|
|||
|
|
height: 70vh;
|
|||
|
|
overflow: auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.showCheckBoxItem {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
margin: 10px 0 10px;
|
|||
|
|
padding: 15px 10px;
|
|||
|
|
background: #F8F8F8;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
cursor: move; /* 将指针换成拖动样式 */
|
|||
|
|
user-select: none; /* 禁止选择文字 */
|
|||
|
|
.btn {
|
|||
|
|
color: grey;
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|