615 lines
16 KiB
Vue
615 lines
16 KiB
Vue
<template>
|
|
<div class="displayInfo" v-loading="mainLoading">
|
|
<div class="typeSetting">
|
|
<div class="btn">
|
|
<div class="title">显示类型</div>
|
|
<div class="chunk">
|
|
<el-button
|
|
v-if="!editFlag"
|
|
icon="el-icon-edit"
|
|
type="primary"
|
|
@click="editFlag=true"
|
|
>编辑
|
|
</el-button>
|
|
<el-button
|
|
v-if="editFlag"
|
|
icon="el-icon-close"
|
|
@click="getRuleForm"
|
|
:loading="saveLoading"
|
|
>取消
|
|
</el-button>
|
|
<el-button
|
|
v-if="editFlag"
|
|
icon="el-icon-first-aid-kit"
|
|
type="primary"
|
|
@click="saveHandle"
|
|
:loading="saveLoading"
|
|
>保存
|
|
</el-button>
|
|
</div>
|
|
</div>
|
|
<template v-if="!editFlag">
|
|
<div class="radio" style="margin-bottom: 20px">
|
|
<el-radio-group v-model="displayType" :disabled="true">
|
|
<el-radio label="1">树形</el-radio>
|
|
<el-radio label="2">列表</el-radio>
|
|
</el-radio-group>
|
|
</div>
|
|
<div class="form" v-if="displayType == 1">
|
|
<baseNewForm
|
|
ref="optionForm"
|
|
:spanNumber="24"
|
|
:isFunBtn="false"
|
|
:formRow="formRow"
|
|
:ruleForm="ruleForm"
|
|
:labelPosition="'right'"
|
|
labelWidth="100px"
|
|
@onSubmit="onSubmit"
|
|
:lookFlag="true"
|
|
>
|
|
</baseNewForm>
|
|
</div>
|
|
</template>
|
|
<template v-else>
|
|
<div class="radio" style="margin-bottom: 20px">
|
|
<el-radio-group v-model="displayType">
|
|
<el-radio label="1">树形</el-radio>
|
|
<el-radio label="2">列表</el-radio>
|
|
</el-radio-group>
|
|
</div>
|
|
<div class="form" v-if="displayType == 1">
|
|
<baseNewForm
|
|
ref="optionForm"
|
|
:spanNumber="24"
|
|
:isFunBtn="false"
|
|
:formRow="formRow"
|
|
:ruleForm="ruleForm"
|
|
:labelPosition="'right'"
|
|
labelWidth="100px"
|
|
@onSubmit="onSubmit"
|
|
>
|
|
</baseNewForm>
|
|
</div>
|
|
</template>
|
|
|
|
</div>
|
|
<div class="main">
|
|
<div class="content">
|
|
<div class="showItem">
|
|
<div class="itemTitle">查询</div>
|
|
<div class="setting">
|
|
<div class="settingBox" @click="settingHandle('查询')">
|
|
<div class="img">
|
|
<img src="./images/设置.png" alt="">
|
|
</div>
|
|
<div class="value">设置</div>
|
|
</div>
|
|
</div>
|
|
<div class="showCheckBoxList">
|
|
<div class="showCheckBoxItem" v-for="(item,index) in dbQueryFiled" :key="index">
|
|
<div class="name">{{ item.viewName }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="showItem">
|
|
<div class="itemTitle">列表</div>
|
|
<div class="setting">
|
|
<div class="settingBox" @click="settingHandle('列表')">
|
|
<div class="img">
|
|
<img src="./images/设置.png" alt="">
|
|
</div>
|
|
<div class="value">设置</div>
|
|
</div>
|
|
</div>
|
|
<div class="showCheckBoxList">
|
|
<div class="showCheckBoxItem" v-for="(item,index) in dbListFiled" :key="index">
|
|
<div class="name">{{ item.viewName }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="showItem">
|
|
<div class="itemTitle">新增</div>
|
|
<div class="setting">
|
|
<div class="settingBox" @click="settingHandle('新增')">
|
|
<div class="img">
|
|
<img src="./images/设置.png" alt="">
|
|
</div>
|
|
<div class="value">设置</div>
|
|
</div>
|
|
</div>
|
|
<div class="showCheckBoxList">
|
|
<div class="showCheckBoxItem" v-for="(item,index) in dbAddFiled" :key="index">
|
|
<div class="name">{{ item.viewName }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="showItem">
|
|
<div class="itemTitle">修改</div>
|
|
<div class="setting">
|
|
<div class="settingBox" @click="settingHandle('修改')">
|
|
<div class="img">
|
|
<img src="./images/设置.png" alt="">
|
|
</div>
|
|
<div class="value">设置</div>
|
|
</div>
|
|
</div>
|
|
<div class="showCheckBoxList">
|
|
<div class="showCheckBoxItem" v-for="(item,index) in dbEditFiled" :key="index">
|
|
<div class="name">{{ item.viewName }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="showItem">
|
|
<div class="itemTitle">查看</div>
|
|
<div class="setting">
|
|
<div class="settingBox" @click="settingHandle('查看')">
|
|
<div class="img">
|
|
<img src="./images/设置.png" alt="">
|
|
</div>
|
|
<div class="value">设置</div>
|
|
</div>
|
|
</div>
|
|
<div class="showCheckBoxList">
|
|
<div class="showCheckBoxItem" v-for="(item,index) in dbShowFiled" :key="index">
|
|
<div class="name">{{ item.viewName }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="showItem">
|
|
<div class="itemTitle">按钮</div>
|
|
<div class="setting">
|
|
<div class="settingBox" @click="settingHandle('按钮')">
|
|
<div class="img">
|
|
<img src="./images/设置.png" alt="">
|
|
</div>
|
|
<div class="value">设置</div>
|
|
</div>
|
|
</div>
|
|
<div class="showCheckBoxList">
|
|
<div class="showCheckBoxItem" v-for="(item,index) in btnShowList" :key="index">
|
|
<div class="name">{{ item.name }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- -->
|
|
<base-right-dialog
|
|
ref="mainTableAddtDialog"
|
|
:footerShow="true"
|
|
:dialogVisible.sync="mainTableDialogShow"
|
|
:title="activeTitle + '设置'"
|
|
:submitShow="true"
|
|
:size="'50%'"
|
|
@handleConfirmClick="mainTableSaveHandle"
|
|
@handleClose="mainTableDialogShow=false"
|
|
>
|
|
<div class="mainTable">
|
|
<settingChunk ref="settingChunk" @saveSuccessEmit="saveSuccessEmit"></settingChunk>
|
|
</div>
|
|
</base-right-dialog>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import settingChunk from '@/views/masterDataOptions/displayInfo/settingChunk.vue'
|
|
import baseNewForm from '@/views/intergrationTask/compoments/baseNewForm'
|
|
import { getApiModuleApi } from '@/api/apiChunks/index.js'
|
|
import baseRightDialog from '@/components/base/baseRightDialog/index.vue'
|
|
import { authApi } from '@/api/apis/auth'
|
|
|
|
export default {
|
|
name: 'index.vue',
|
|
data() {
|
|
return {
|
|
formRow: [
|
|
{
|
|
elCol: [
|
|
{
|
|
type: 'select',
|
|
title: '显示字段',
|
|
id: 'viewFiled',
|
|
row: 6,
|
|
disabled: false,
|
|
required: true,
|
|
fontSize: 16,
|
|
options: []
|
|
},
|
|
{
|
|
type: 'select',
|
|
title: '上级id字段',
|
|
id: 'upIdFiled',
|
|
row: 6,
|
|
disabled: false,
|
|
required: true,
|
|
fontSize: 16,
|
|
options: []
|
|
}
|
|
]
|
|
}
|
|
],
|
|
ruleForm: {},
|
|
ainLoading: false,
|
|
displayType: '1',//显示类型
|
|
saveLoading: false,//保存loading
|
|
activeTitle: '',//当前选中的key名用于右弹窗
|
|
mainTableDialogShow: false,
|
|
mainLoading: false,
|
|
'dbQueryFiled': [],//查询
|
|
'dbAddFiled': [],//新增
|
|
'dbEditFiled': [],//修改
|
|
'dbShowFiled': [],//查看
|
|
'dbListFiled': [],//列表
|
|
btnShowList: [],//已选中的按钮
|
|
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'
|
|
},
|
|
{
|
|
buttonName: '查看数据格式',
|
|
buttonValue: 'viewData',
|
|
buttonType: '8'
|
|
}
|
|
],//所有按钮
|
|
dist: {
|
|
'查询': ['queryFiled', 'dbQueryFiled', 1],
|
|
'列表': ['listFiled', 'dbListFiled', 2],
|
|
'新增': ['addFiled', 'dbAddFiled', 3],
|
|
'修改': ['editFiled', 'dbEditFiled', 4],
|
|
'查看': ['showFiled', 'dbShowFiled', 5]
|
|
},//字典
|
|
editFlag: false
|
|
}
|
|
},
|
|
methods: {
|
|
async initSelect() {
|
|
const res = await getApiModuleApi({
|
|
tl: 'mdmModuleService',
|
|
as: '',
|
|
dj: 'queryMdmMainDBField'
|
|
}, {
|
|
mdmId: this.$route.query.id
|
|
})
|
|
if (res.status === '200') {
|
|
this.formRow[0].elCol[1].options = []
|
|
this.formRow[0].elCol[0].options = []
|
|
res.attribute.forEach(item => {
|
|
this.formRow[0].elCol[1].options.push({
|
|
label: item.chName,
|
|
id: item.enName
|
|
})
|
|
this.formRow[0].elCol[0].options.push({
|
|
label: item.chName,
|
|
id: item.enName
|
|
})
|
|
})
|
|
}
|
|
},
|
|
//设置保存成功
|
|
saveSuccessEmit() {
|
|
this.mainTableDialogShow = false
|
|
this.getAllField()
|
|
},
|
|
//验证通过
|
|
async onSubmit() {
|
|
if (this.ruleForm.id) {
|
|
this.openLoading('submit')
|
|
const res = await authApi('mdmModuleService', '', 'updateMdmView', '', {
|
|
...this.ruleForm,
|
|
mdmId: this.$route.query.id,
|
|
viewName: this.displayType
|
|
})
|
|
this.$vmNews('保存成功', 'success')
|
|
this.editFlag = false
|
|
this.getRuleForm()
|
|
} else {
|
|
this.openLoading('submit')
|
|
const res = await authApi('mdmModuleService', '', 'saveMdmView', '', {
|
|
...this.ruleForm,
|
|
mdmId: this.$route.query.id,
|
|
viewName: this.displayType
|
|
|
|
})
|
|
this.$vmNews('保存成功', 'success')
|
|
this.editFlag = false
|
|
this.getRuleForm()
|
|
}
|
|
|
|
},
|
|
//获取类型
|
|
async getRuleForm() {
|
|
this.ruleForm = {}
|
|
const res = await authApi('mdmModuleService', '', 'queryMdmView', '', {
|
|
mdmId: this.$route.query.id
|
|
})
|
|
console.log(res.attribute, 'res.attribute', res)
|
|
this.ruleForm = res.attribute ? res.attribute : {}
|
|
this.displayType = this.ruleForm.viewName ? this.ruleForm.viewName : '1'
|
|
this.editFlag = false
|
|
},
|
|
//保存
|
|
saveHandle() {
|
|
if (this.displayType === '1') {
|
|
this.$refs.optionForm.submitForm()
|
|
} else {
|
|
this.onSubmit()
|
|
}
|
|
},
|
|
//点击设置
|
|
settingHandle(key) {
|
|
if (!this.ruleForm.id) {
|
|
this.$vmNews('请先添加显示类型后再配置按钮')
|
|
return
|
|
}
|
|
this.activeTitle = key
|
|
this.mainTableDialogShow = true
|
|
this.$nextTick(() => {
|
|
this.$refs.settingChunk.getAllBtn(key)
|
|
})
|
|
},
|
|
//右弹窗点击保存
|
|
mainTableSaveHandle() {
|
|
this.$refs.settingChunk.saveHandle()
|
|
},
|
|
//获取所有字段
|
|
async getAllField() {
|
|
//字段相关
|
|
const res = await authApi('mdmModuleService', '', 'queryMdmViewField', '', {
|
|
id: this.$route.query.id
|
|
})
|
|
console.log(res, 'res')
|
|
this.dbQueryFiled = res.attribute.dbQueryFiled
|
|
this.dbListFiled = res.attribute.dbListFiled
|
|
this.dbAddFiled = res.attribute.dbAddFiled
|
|
this.dbEditFiled = res.attribute.dbEditFiled
|
|
this.dbShowFiled = res.attribute.dbShowFiled
|
|
//按钮相关
|
|
const res2 = await authApi('mdmModuleService', '', 'queryMdmViewButton', '', {
|
|
mdmId: this.$route.query.id
|
|
})
|
|
res2.attribute.forEach(item => {
|
|
item.name = this.allFiledList[item.buttonType - 1].buttonName
|
|
})
|
|
this.btnShowList = res2.attribute
|
|
}
|
|
},
|
|
components: {
|
|
baseRightDialog,
|
|
baseNewForm,
|
|
settingChunk
|
|
},
|
|
created() {
|
|
//获取显示类型和显示字段
|
|
this.getRuleForm()
|
|
//获取下啦
|
|
this.initSelect()
|
|
//获取所有显示字段
|
|
this.getAllField()
|
|
this.$emit('flashActive', 2)
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
::v-deep .el-form-item__content {
|
|
margin: 0 !important;
|
|
}
|
|
|
|
::v-deep .el-menu-item {
|
|
padding: 0 35px;
|
|
}
|
|
|
|
::v-deep .el-transfer-panel {
|
|
width: 25vw;
|
|
height: 60vh;
|
|
}
|
|
|
|
::v-deep .el-button {
|
|
border-radius: 4px;
|
|
}
|
|
|
|
::v-deep .el-transfer-panel__list {
|
|
height: 50vh;
|
|
}
|
|
|
|
::v-deep .el-transfer-panel__body {
|
|
height: 50vh;
|
|
}
|
|
|
|
.displayInfo {
|
|
background-color: #f5f5f5;
|
|
position: relative;
|
|
margin-left: 5px;
|
|
width: 99.5%;
|
|
|
|
> .btn {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
|
|
> .chunk {
|
|
margin-left: 10px;
|
|
}
|
|
}
|
|
|
|
.typeSetting {
|
|
background-color: #fff;
|
|
padding: 20px 10px 0px;
|
|
padding-bottom: 20px;
|
|
margin-bottom: 10px;
|
|
border-radius: 16px;
|
|
width: 100%;
|
|
|
|
> .btn {
|
|
padding-top: 10px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
.title {
|
|
font-weight: 600;
|
|
margin-left: 20px;
|
|
margin-bottom: 20px;
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 600;
|
|
font-size: 18px;
|
|
color: #333333;
|
|
line-height: 25px;
|
|
text-align: left;
|
|
font-style: normal;
|
|
}
|
|
}
|
|
|
|
> .title {
|
|
font-weight: 600;
|
|
margin-left: 20px;
|
|
margin-bottom: 20px;
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 600;
|
|
font-size: 18px;
|
|
color: #333333;
|
|
line-height: 25px;
|
|
text-align: left;
|
|
font-style: normal;
|
|
}
|
|
|
|
> .radio {
|
|
margin: 10px 20px;
|
|
}
|
|
|
|
> .tabIndex {
|
|
margin-top: 10px;
|
|
}
|
|
}
|
|
|
|
.main {
|
|
border-radius: 16px;
|
|
background-color: #fff;
|
|
padding: 15px 10px;
|
|
width: 100%;
|
|
overflow: auto;
|
|
|
|
.content {
|
|
margin-top: 1vh;
|
|
display: flex;
|
|
align-items: center;
|
|
width: 2000px;
|
|
|
|
.showItem {
|
|
flex: 1;
|
|
margin-left: 15px;
|
|
height: 55vh;
|
|
background: #FFFFFF;
|
|
border-radius: 8px;
|
|
border: 1px solid #EBEBEB;
|
|
padding: 14px 20px;
|
|
position: relative;
|
|
|
|
.itemTitle {
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 500;
|
|
font-size: 16px;
|
|
color: #333333;
|
|
line-height: 22px;
|
|
font-style: normal;
|
|
text-align: center;
|
|
padding-bottom: 20px;
|
|
border-bottom: 1px #ebebeb solid;
|
|
}
|
|
|
|
.setting {
|
|
width: 100%;
|
|
height: 15vh;
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
border-radius: 8px;
|
|
display: none;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background-color: rgba(0, 0, 0, .6);
|
|
|
|
.settingBox {
|
|
cursor: pointer;
|
|
|
|
.img {
|
|
width: 5vh;
|
|
height: 5vh;
|
|
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.value {
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 600;
|
|
font-size: 16px;
|
|
color: #FFFFFF;
|
|
line-height: 22px;
|
|
text-align: center;
|
|
font-style: normal;
|
|
}
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
.setting {
|
|
display: flex !important;
|
|
}
|
|
}
|
|
|
|
.showCheckBoxList {
|
|
height: 90%;
|
|
overflow: auto;
|
|
}
|
|
|
|
.showCheckBoxItem {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin: 16px 0 16px;
|
|
border-radius: 4px;
|
|
font-size: 14px;
|
|
|
|
|
|
.btn {
|
|
color: grey;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
</style>
|