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