443 lines
12 KiB
Vue
443 lines
12 KiB
Vue
|
<template>
|
||
|
|
<div class="displayInfo">
|
||
|
|
<div class="btn">
|
||
|
|
<div class="chunk">
|
||
|
|
<el-button
|
||
|
|
icon="el-icon-back"
|
||
|
|
@click="
|
||
|
|
$router.replace({ path: '/integrationOption/masterDataOptions' })
|
||
|
|
"
|
||
|
|
>返回
|
||
|
|
</el-button
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
<div class="chunk">
|
||
|
|
<el-button
|
||
|
|
icon="el-icon-first-aid-kit"
|
||
|
|
type="primary"
|
||
|
|
@click="saveHandle"
|
||
|
|
:loading="saveLoading"
|
||
|
|
>保存
|
||
|
|
</el-button
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="main" v-loading="mainLoading">
|
||
|
|
<div class="title">显示类型</div>
|
||
|
|
<div class="radio">
|
||
|
|
<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="'left'"
|
||
|
|
labelWidth="80px"
|
||
|
|
@onSubmit="onSubmit">
|
||
|
|
</baseNewForm>
|
||
|
|
</div>
|
||
|
|
<div class="tabIndex">
|
||
|
|
<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
|
||
|
|
<el-menu-item index="1">查询</el-menu-item>
|
||
|
|
<el-menu-item index="2">列表</el-menu-item>
|
||
|
|
<el-menu-item index="3">新增</el-menu-item>
|
||
|
|
<el-menu-item index="4">修改</el-menu-item>
|
||
|
|
<el-menu-item index="5">查看</el-menu-item>
|
||
|
|
</el-menu>
|
||
|
|
</div>
|
||
|
|
<div class="content">
|
||
|
|
<el-transfer
|
||
|
|
style="text-align: left; display: inline-block;"
|
||
|
|
v-model="contentFormArr"
|
||
|
|
filterable
|
||
|
|
:titles="['全部字段', '显示字段']"
|
||
|
|
target-order="push"
|
||
|
|
@change="handleChange"
|
||
|
|
@right-check-change="rightCheckChange"
|
||
|
|
:props="propsKey"
|
||
|
|
:data="data">
|
||
|
|
<span slot-scope="{ option }">{{ option.name }}</span>
|
||
|
|
</el-transfer>
|
||
|
|
<div class="buttonList">
|
||
|
|
<div class="upBtn">
|
||
|
|
<el-button type="primary" icon="el-icon-top" @click="upHanlde"
|
||
|
|
:disabled="rightActived.length !== 1"></el-button>
|
||
|
|
</div>
|
||
|
|
<div class="downBtn">
|
||
|
|
<el-button type="primary" icon="el-icon-bottom" @click="downHanlde"
|
||
|
|
:disabled="rightActived.length !==1"></el-button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
import baseNewForm from "@/views/intergrationTask/compoments/baseNewForm";
|
||
|
|
import {getApiModuleApi} from "@/api/apiChunks/index.js";
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: "index.vue",
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
mainLoading:false,
|
||
|
|
saveLoading:false,
|
||
|
|
id: "",
|
||
|
|
propsKey: {
|
||
|
|
key: "id",
|
||
|
|
label: "name",
|
||
|
|
disabled: "disabled"
|
||
|
|
},
|
||
|
|
displayType: "1",
|
||
|
|
formRow: [
|
||
|
|
{
|
||
|
|
elCol: [
|
||
|
|
{
|
||
|
|
type: "select",
|
||
|
|
title: "显示字段",
|
||
|
|
id: "viewFiled",
|
||
|
|
row: 12,
|
||
|
|
disabled: false,
|
||
|
|
required: true,
|
||
|
|
fontSize: 16,
|
||
|
|
options: [],
|
||
|
|
},
|
||
|
|
{
|
||
|
|
type: "select",
|
||
|
|
title: "上级id字段",
|
||
|
|
id: "upIdFiled",
|
||
|
|
row: 12,
|
||
|
|
disabled: false,
|
||
|
|
required: true,
|
||
|
|
fontSize: 16,
|
||
|
|
options: [],
|
||
|
|
},
|
||
|
|
]
|
||
|
|
}
|
||
|
|
],
|
||
|
|
ruleForm: {},
|
||
|
|
activeIndex: "1",
|
||
|
|
contentFormArr: [],
|
||
|
|
data: [],
|
||
|
|
rightActived: [],
|
||
|
|
addFiled: [],
|
||
|
|
dbAddFiled: [],
|
||
|
|
editFiled: [],
|
||
|
|
dbEditFiled: [],
|
||
|
|
showFiled: [],
|
||
|
|
dbShowFiled: [],
|
||
|
|
queryFiled: [],
|
||
|
|
dbQueryFiled: [],
|
||
|
|
listFiled: [],
|
||
|
|
dbListFiled: [],
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
async init() {
|
||
|
|
this.mainLoading = true
|
||
|
|
this.activeIndex = "1"
|
||
|
|
const res = await getApiModuleApi({
|
||
|
|
tl: "mdmService",
|
||
|
|
as: "mdmService",
|
||
|
|
dj: "queryMdmModuleView",
|
||
|
|
}, {
|
||
|
|
id: this.$route.query.id
|
||
|
|
})
|
||
|
|
this.mainLoading = false
|
||
|
|
this.addFiled = res.attribute.addFiled
|
||
|
|
this.dbAddFiled = res.attribute.dbAddFiled
|
||
|
|
this.initDispose(this.addFiled, this.dbAddFiled)
|
||
|
|
this.editFiled = res.attribute.editFiled
|
||
|
|
this.dbEditFiled = res.attribute.dbEditFiled
|
||
|
|
this.initDispose(this.editFiled, this.dbEditFiled)
|
||
|
|
this.showFiled = res.attribute.showFiled
|
||
|
|
this.dbShowFiled = res.attribute.dbShowFiled
|
||
|
|
this.initDispose(this.showFiled, this.dbShowFiled)
|
||
|
|
this.queryFiled = res.attribute.queryFiled
|
||
|
|
this.dbQueryFiled = res.attribute.dbQueryFiled
|
||
|
|
this.initDispose(this.queryFiled, this.dbQueryFiled)
|
||
|
|
this.listFiled = res.attribute.listFiled
|
||
|
|
this.dbListFiled = res.attribute.dbListFiled
|
||
|
|
this.initDispose(this.listFiled, this.dbListFiled)
|
||
|
|
this.data = this.queryFiled
|
||
|
|
this.contentFormArr = []
|
||
|
|
this.dbQueryFiled.forEach(item => {
|
||
|
|
this.contentFormArr.push(item.id)
|
||
|
|
})
|
||
|
|
|
||
|
|
this.id = res.attribute.mdmModuleViewEntity.id
|
||
|
|
if (!res.attribute.mdmModuleViewEntity.viewName) return
|
||
|
|
this.displayType = res.attribute.mdmModuleViewEntity.viewName
|
||
|
|
this.ruleForm = {
|
||
|
|
viewFiled: res.attribute.mdmModuleViewEntity.viewFiled,
|
||
|
|
upIdFiled: res.attribute.mdmModuleViewEntity.upIdFiled,
|
||
|
|
}
|
||
|
|
|
||
|
|
},
|
||
|
|
async initSelect() {
|
||
|
|
const res = await getApiModuleApi({
|
||
|
|
tl: "mdmService",
|
||
|
|
as: "mdmService",
|
||
|
|
dj: "queryMdmModuleServerMainFiled"
|
||
|
|
}, {
|
||
|
|
mdmId: this.$route.query.id
|
||
|
|
})
|
||
|
|
console.log(res, 'select')
|
||
|
|
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,
|
||
|
|
})
|
||
|
|
})
|
||
|
|
}
|
||
|
|
},
|
||
|
|
async saveHandle() {
|
||
|
|
if (this.displayType === '1') {
|
||
|
|
this.$refs.optionForm.submitForm()
|
||
|
|
} else {
|
||
|
|
this.saveLoading = true
|
||
|
|
let params = {
|
||
|
|
id: this.$route.query.id,
|
||
|
|
mdmModuleViewEntity: {
|
||
|
|
id: this.id,
|
||
|
|
viewName: this.displayType
|
||
|
|
},
|
||
|
|
addFiled: this.dbAddFiled,
|
||
|
|
editFiled: this.dbEditFiled,
|
||
|
|
showFiled: this.dbShowFiled,
|
||
|
|
queryFiled: this.dbQueryFiled,
|
||
|
|
listFiled: this.dbListFiled,
|
||
|
|
}
|
||
|
|
const res = await getApiModuleApi({
|
||
|
|
tl: "mdmService",
|
||
|
|
as: "mdmService",
|
||
|
|
dj: "doSaveMdmModuleView",
|
||
|
|
}, params)
|
||
|
|
if (res.status === '200') {
|
||
|
|
this.$vmNews("保存成功！", "success")
|
||
|
|
this.init()
|
||
|
|
this.$store.dispatch("GenerateRoutes")
|
||
|
|
}
|
||
|
|
this.saveLoading = false
|
||
|
|
}
|
||
|
|
|
||
|
|
},
|
||
|
|
//验证通过
|
||
|
|
async onSubmit() {
|
||
|
|
if (this.ruleForm.viewFiled === this.ruleForm.upIdFiled) {
|
||
|
|
this.$vmNews("显示字段与上级id字段不能相同", "warning")
|
||
|
|
return
|
||
|
|
}
|
||
|
|
this.saveLoading = true
|
||
|
|
let params = {
|
||
|
|
id: this.$route.query.id,
|
||
|
|
mdmModuleViewEntity: {
|
||
|
|
id: this.id,
|
||
|
|
viewName: this.displayType,
|
||
|
|
...this.ruleForm
|
||
|
|
},
|
||
|
|
addFiled: this.dbAddFiled,
|
||
|
|
editFiled: this.dbEditFiled,
|
||
|
|
showFiled: this.dbShowFiled,
|
||
|
|
queryFiled: this.dbQueryFiled,
|
||
|
|
listFiled: this.dbListFiled,
|
||
|
|
}
|
||
|
|
const res = await getApiModuleApi({
|
||
|
|
tl: "mdmService",
|
||
|
|
as: "mdmService",
|
||
|
|
dj: "doSaveMdmModuleView",
|
||
|
|
}, params)
|
||
|
|
if (res.status === '200') {
|
||
|
|
this.$vmNews("保存成功！", "success")
|
||
|
|
this.$store.dispatch("GenerateRoutes")
|
||
|
|
this.init()
|
||
|
|
}
|
||
|
|
this.saveLoading = false
|
||
|
|
},
|
||
|
|
handleSelect(key, keyPath) {
|
||
|
|
this.activeIndex = key
|
||
|
|
this.rightActived = []
|
||
|
|
let tempObj = {
|
||
|
|
1: ['queryFiled', 'dbQueryFiled'],
|
||
|
|
2: ['listFiled', 'dbListFiled'],
|
||
|
|
3: ['addFiled', 'dbAddFiled'],
|
||
|
|
4: ['editFiled', 'dbEditFiled'],
|
||
|
|
5: ['showFiled', 'dbShowFiled']
|
||
|
|
}
|
||
|
|
this.data = this[tempObj[key][0]]
|
||
|
|
this.contentFormArr = []
|
||
|
|
this[tempObj[key][1]].forEach(item => {
|
||
|
|
this.contentFormArr.push(item.id)
|
||
|
|
})
|
||
|
|
},
|
||
|
|
handleChange(value, direction, movedKeys) {
|
||
|
|
let tempObj = {
|
||
|
|
1: ['queryFiled', 'dbQueryFiled'],
|
||
|
|
2: ['listFiled', 'dbListFiled'],
|
||
|
|
3: ['addFiled', 'dbAddFiled'],
|
||
|
|
4: ['editFiled', 'dbEditFiled'],
|
||
|
|
5: ['showFiled', 'dbShowFiled']
|
||
|
|
}
|
||
|
|
this.disposeDataArr(value)
|
||
|
|
this.rightActived = []
|
||
|
|
},
|
||
|
|
initDispose(arr1, arr2) {
|
||
|
|
arr2.forEach(item => {
|
||
|
|
arr1.some(ele => {
|
||
|
|
if (item.viewFiled === ele.id) {
|
||
|
|
item.id = ele.id
|
||
|
|
item.name = ele.name
|
||
|
|
return true
|
||
|
|
}
|
||
|
|
return false
|
||
|
|
})
|
||
|
|
})
|
||
|
|
},
|
||
|
|
rightCheckChange(arr) {
|
||
|
|
this.rightActived = arr
|
||
|
|
},
|
||
|
|
// 向上方法
|
||
|
|
upHanlde() {
|
||
|
|
const index = this.contentFormArr.findIndex(ele => {
|
||
|
|
return this.rightActived[0] === ele
|
||
|
|
})
|
||
|
|
if (index === 0) {
|
||
|
|
this.$vmNews("排序为1时无法向上")
|
||
|
|
return
|
||
|
|
}
|
||
|
|
const tempDele = this.contentFormArr.splice(index, 1)
|
||
|
|
this.contentFormArr.splice(index - 1, 0, tempDele[0])
|
||
|
|
this.disposeDataArr(this.contentFormArr)
|
||
|
|
},
|
||
|
|
// 向下方法
|
||
|
|
downHanlde() {
|
||
|
|
const index = this.contentFormArr.findIndex(ele => {
|
||
|
|
return this.rightActived[0] === ele
|
||
|
|
})
|
||
|
|
if (index === this.contentFormArr.length - 1) {
|
||
|
|
this.$vmNews("末尾排序无法向下排序")
|
||
|
|
return
|
||
|
|
}
|
||
|
|
const tempDele = this.contentFormArr.splice(index, 1)
|
||
|
|
this.contentFormArr.splice(index + 1, 0, tempDele[0])
|
||
|
|
this.disposeDataArr(this.contentFormArr)
|
||
|
|
},
|
||
|
|
disposeDataArr(arr) {
|
||
|
|
let tempObj = {
|
||
|
|
1: ['queryFiled', 'dbQueryFiled'],
|
||
|
|
2: ['listFiled', 'dbListFiled'],
|
||
|
|
3: ['addFiled', 'dbAddFiled'],
|
||
|
|
4: ['editFiled', 'dbEditFiled'],
|
||
|
|
5: ['showFiled', 'dbShowFiled']
|
||
|
|
}
|
||
|
|
this[tempObj[this.activeIndex][1]] = []
|
||
|
|
arr.forEach((idNum, index) => {
|
||
|
|
this.data.some(item => {
|
||
|
|
if (item.id === idNum) {
|
||
|
|
this[tempObj[this.activeIndex][1]].push({...item, sort: index})
|
||
|
|
return true
|
||
|
|
} else {
|
||
|
|
return false
|
||
|
|
}
|
||
|
|
})
|
||
|
|
})
|
||
|
|
}
|
||
|
|
},
|
||
|
|
components: {
|
||
|
|
baseNewForm
|
||
|
|
},
|
||
|
|
created() {
|
||
|
|
this.init()
|
||
|
|
this.initSelect()
|
||
|
|
this.$emit("flashActive", 2)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
::v-deep .el-menu-item {
|
||
|
|
padding: 0 35px;
|
||
|
|
}
|
||
|
|
|
||
|
|
::v-deep .el-transfer-panel {
|
||
|
|
width: 25vw;
|
||
|
|
height: 60vh;
|
||
|
|
}
|
||
|
|
|
||
|
|
::v-deep .el-button {
|
||
|
|
border-radius: 16px;
|
||
|
|
}
|
||
|
|
|
||
|
|
::v-deep .el-transfer-panel__list {
|
||
|
|
height: 50vh;
|
||
|
|
}
|
||
|
|
::v-deep .el-transfer-panel__body {
|
||
|
|
height: 50vh;
|
||
|
|
}
|
||
|
|
|
||
|
|
.displayInfo {
|
||
|
|
background-color: #fbfbfb;
|
||
|
|
width: 100%;
|
||
|
|
position: relative;
|
||
|
|
|
||
|
|
> .btn {
|
||
|
|
display: flex;
|
||
|
|
justify-content: flex-end;
|
||
|
|
|
||
|
|
> .chunk {
|
||
|
|
margin-left: 10px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
> .main {
|
||
|
|
background-color: #fff;
|
||
|
|
border-right: 8px;
|
||
|
|
height: 85vh;
|
||
|
|
overflow: auto;
|
||
|
|
margin-top: 10px;
|
||
|
|
padding: 0px 15px;
|
||
|
|
|
||
|
|
> .title {
|
||
|
|
font-weight: 600;
|
||
|
|
margin: 15px 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
> .radio {
|
||
|
|
margin: 15px 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
> .tabIndex {
|
||
|
|
margin-top: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
> .content {
|
||
|
|
margin-top: 30px;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
|
||
|
|
.buttonList {
|
||
|
|
margin-left: 50px;
|
||
|
|
|
||
|
|
.downBtn {
|
||
|
|
margin-top: 30px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
</style>
|