|
|
@@ -1,78 +1,54 @@
|
|
|
<template>
|
|
|
<div class="layout-container">
|
|
|
<div class="panel" ref="panel1">
|
|
|
- <div
|
|
|
- class="parent hc-excel-table-form"
|
|
|
- id="parent"
|
|
|
- @click="parentClick($event)"
|
|
|
- ></div>
|
|
|
+ <div class="parent hc-excel-table-form" id="parent" @click="parentClick($event)"></div>
|
|
|
</div>
|
|
|
<div class="splitter"></div>
|
|
|
<div class="panel" ref="panel2">
|
|
|
<div style="margin-bottom: 20px; text-align: right">
|
|
|
<el-button @click="goBack">返回上一级</el-button>
|
|
|
- <el-button type="primary" @click="saveInfo" :loading="saveLoaing"
|
|
|
- >保存</el-button
|
|
|
- >
|
|
|
+ <el-button type="primary" @click="saveInfo" :loading="saveLoaing">保存</el-button>
|
|
|
</div>
|
|
|
- <template v-if="listArr.length>0">
|
|
|
- <div class="right_box" v-for="(eleItem,index) in listArr" :key="index">
|
|
|
-
|
|
|
- <div>
|
|
|
- <span>选择表单</span>
|
|
|
- <el-select
|
|
|
- v-model="eleItem.initTabId"
|
|
|
- placeholder="请选择"
|
|
|
- style="width: 65%; margin-left: 10px"
|
|
|
- @change="changeform($event,index)"
|
|
|
- >
|
|
|
- <el-option
|
|
|
- v-for="item in formoptions"
|
|
|
- :key="item.initTabId"
|
|
|
- :label="item.tabName"
|
|
|
- :value="item.initTabId"
|
|
|
- >
|
|
|
- </el-option>
|
|
|
- </el-select>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <span>选择元素</span>
|
|
|
- <el-select
|
|
|
- v-model="eleItem.elementId"
|
|
|
- placeholder="请选择"
|
|
|
- style="width: 65%; margin-left: 10px; margin-top: 15px"
|
|
|
- @change="changeEle($event,index)"
|
|
|
- filterable
|
|
|
- >
|
|
|
- <el-option
|
|
|
- v-for="item in eleOptions"
|
|
|
- :key="item.id"
|
|
|
- :label="item.eName"
|
|
|
- :value="item.id"
|
|
|
- >
|
|
|
- </el-option>
|
|
|
- </el-select>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="martop10 replace_box">
|
|
|
- <div style="width: 100%; height: 100%; overflow-y: auto">
|
|
|
- <el-row class="mb-4">
|
|
|
- <div class="form_text">
|
|
|
- <div>表单名称:{{ eleItem.tabName }}</div>
|
|
|
- <div>元素字段:{{ eleItem.elementName }}</div>
|
|
|
- </div>
|
|
|
- </el-row>
|
|
|
- <div class="martop20">
|
|
|
- <el-button type="primary" size="small" @click="addList(index)">新增元素</el-button>
|
|
|
- <el-button type="danger" size="small" v-if="index>0" @click="delList(index,eleItem)">删除元素</el-button>
|
|
|
- </div>
|
|
|
-
|
|
|
+ <template v-if="listArr.length > 0">
|
|
|
+ <div class="right_box" v-for="(eleItem, index) in listArr" :key="index">
|
|
|
+
|
|
|
+ <div>
|
|
|
+ <span>选择表单</span>
|
|
|
+ <el-select v-model="eleItem.initTabId" placeholder="请选择" style="width: 65%; margin-left: 10px"
|
|
|
+ @change="changeform($event, index)">
|
|
|
+ <el-option v-for="item in formoptions" :key="item.initTabId" :label="item.tabName"
|
|
|
+ :value="item.initTabId">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <span>选择元素</span>
|
|
|
+ <el-select v-model="eleItem.elementId" placeholder="请选择"
|
|
|
+ style="width: 65%; margin-left: 10px; margin-top: 15px" @change="changeEle($event, index)" filterable>
|
|
|
+ <el-option v-for="item in eleOptions" :key="item.id" :label="item.eName" :value="item.id">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="martop10 replace_box">
|
|
|
+ <div style="width: 100%; height: 100%; overflow-y: auto">
|
|
|
+ <el-row class="mb-4">
|
|
|
+ <div class="form_text">
|
|
|
+ <div>表单名称:{{ eleItem.tabName }}</div>
|
|
|
+ <div>元素字段:{{ eleItem.elementName }}</div>
|
|
|
</div>
|
|
|
+ </el-row>
|
|
|
+ <div class="martop20">
|
|
|
+ <el-button type="primary" size="small" @click="addList(index)">新增元素</el-button>
|
|
|
+ <el-button type="danger" size="small" v-if="index > 0" @click="delList(index, eleItem)">删除元素</el-button>
|
|
|
</div>
|
|
|
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
</template>
|
|
|
- <el-empty description="暂无数据" v-else ></el-empty>
|
|
|
+ <el-empty description="暂无数据" v-else></el-empty>
|
|
|
|
|
|
|
|
|
</div>
|
|
|
@@ -119,8 +95,8 @@ export default {
|
|
|
},
|
|
|
linkedData: [], //已经绑定的数组
|
|
|
listArr: [
|
|
|
- {}
|
|
|
-],
|
|
|
+ {}
|
|
|
+ ],
|
|
|
};
|
|
|
},
|
|
|
watch: {
|
|
|
@@ -153,24 +129,24 @@ export default {
|
|
|
template: res.data,
|
|
|
methods: {
|
|
|
|
|
|
- contextmenuClick() {},
|
|
|
- getInformation() {},
|
|
|
- formUploadSuccess() {},
|
|
|
- formUploadExceed() {},
|
|
|
- formUploadLoading() {},
|
|
|
- delTableFormFile() {},
|
|
|
- formUploadError() {},
|
|
|
- uploadprogress() {},
|
|
|
- formRemoteMethod() {},
|
|
|
- getRegularExpression() {},
|
|
|
- checkboxGroupChange() {},
|
|
|
- formRemoteChange() {},
|
|
|
- dateKeydown() {},
|
|
|
- keyupShiftUp() {},
|
|
|
- keyupShiftDown() {},
|
|
|
- keyupShiftLeft() {},
|
|
|
- keyupShiftRight() {},
|
|
|
- inputLeftClick() {},
|
|
|
+ contextmenuClick() { },
|
|
|
+ getInformation() { },
|
|
|
+ formUploadSuccess() { },
|
|
|
+ formUploadExceed() { },
|
|
|
+ formUploadLoading() { },
|
|
|
+ delTableFormFile() { },
|
|
|
+ formUploadError() { },
|
|
|
+ uploadprogress() { },
|
|
|
+ formRemoteMethod() { },
|
|
|
+ getRegularExpression() { },
|
|
|
+ checkboxGroupChange() { },
|
|
|
+ formRemoteChange() { },
|
|
|
+ dateKeydown() { },
|
|
|
+ keyupShiftUp() { },
|
|
|
+ keyupShiftDown() { },
|
|
|
+ keyupShiftLeft() { },
|
|
|
+ keyupShiftRight() { },
|
|
|
+ inputLeftClick() { },
|
|
|
},
|
|
|
});
|
|
|
var component = new MyComponent().$mount();
|
|
|
@@ -232,11 +208,11 @@ export default {
|
|
|
});
|
|
|
}
|
|
|
this.clickKeyname = target.getAttribute("keyname") || target1.getAttribute("keyname");
|
|
|
- this.$set(this.curItem, "htmlKeyName", this.clickKeyname);
|
|
|
- this.listArr.forEach((ele)=>{
|
|
|
- ele.htmlKeyName= this.clickKeyname
|
|
|
+ this.$set(this.curItem, "htmlKeyName", this.clickKeyname);
|
|
|
+ this.listArr.forEach((ele) => {
|
|
|
+ ele.htmlKeyName = this.clickKeyname
|
|
|
|
|
|
- })
|
|
|
+ })
|
|
|
await this.getInfoDEtail();
|
|
|
|
|
|
|
|
|
@@ -286,25 +262,27 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
//选择表单获
|
|
|
- changeform(val,index) {
|
|
|
+ changeform(val, index) {
|
|
|
this.getEleList(val);
|
|
|
this.formoptions.forEach((ele) => {
|
|
|
if (ele.initTabId === val) {
|
|
|
-
|
|
|
-
|
|
|
- this.listArr[index].trialTabId= ele.pkeyId
|
|
|
- this.listArr[index].trialTabName= ele.initTableName
|
|
|
- this.listArr[index].tabName= ele.tabName
|
|
|
+ // this.listArr[index].trialTabId= ele.pkeyId
|
|
|
+ // this.listArr[index].trialTabName= ele.initTableName
|
|
|
+ // this.listArr[index].tabName= ele.tabName
|
|
|
+ this.$set(this.listArr[index], "trialTabId", ele.pkeyId)
|
|
|
+ this.$set(this.listArr[index], "trialTabName", ele.initTableName)
|
|
|
+ this.$set(this.listArr[index], "tabName", ele.tabName)
|
|
|
+ this.$set(this.listArr[index], "elementId", null)
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
- changeEle(val,index) {
|
|
|
+ changeEle(val, index) {
|
|
|
this.eleOptions.forEach((ele) => {
|
|
|
if (ele.id === val) {
|
|
|
-
|
|
|
-
|
|
|
- this.listArr[index].elementName= ele.eName
|
|
|
- this.listArr[index].elementId= ele.id
|
|
|
+ // console.log(ele, "ele");
|
|
|
+ // this.listArr[index].elementName = ele.eName
|
|
|
+ this.$set(this.listArr[index], "elementName", ele.eName)
|
|
|
+ this.$set(this.listArr[index], "elementId", ele.id)
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
@@ -327,22 +305,22 @@ export default {
|
|
|
keyName: this.clickKeyname,
|
|
|
});
|
|
|
if (res.code === 200) {
|
|
|
- this.listArr = res.data.length>0?res.data:[{}]
|
|
|
- this.listArr.forEach((ele)=>{
|
|
|
- ele.htmlKeyName= this.clickKeyname
|
|
|
+ this.listArr = res.data.length > 0 ? res.data : [{}]
|
|
|
+ this.listArr.forEach((ele) => {
|
|
|
+ ele.htmlKeyName = this.clickKeyname
|
|
|
|
|
|
- })
|
|
|
- this.formoptions.forEach((ele)=>{
|
|
|
- this.listArr.forEach(async(eleItem,eleIndex)=>{
|
|
|
- if(ele.pkeyId===eleItem.trialTabId){
|
|
|
- eleItem.initTabId=ele.initTabId
|
|
|
- await this.getEleList(ele.initTabId)
|
|
|
- this.changeEle(eleItem.elementId,eleIndex)
|
|
|
+ })
|
|
|
+ this.formoptions.forEach((ele) => {
|
|
|
+ this.listArr.forEach(async (eleItem, eleIndex) => {
|
|
|
+ if (ele.pkeyId === eleItem.trialTabId) {
|
|
|
+ eleItem.initTabId = ele.initTabId
|
|
|
+ await this.getEleList(ele.initTabId)
|
|
|
+ this.changeEle(eleItem.elementId, eleIndex)
|
|
|
|
|
|
|
|
|
- }
|
|
|
+ }
|
|
|
|
|
|
- })
|
|
|
+ })
|
|
|
})
|
|
|
|
|
|
|
|
|
@@ -350,9 +328,9 @@ export default {
|
|
|
|
|
|
|
|
|
} else {
|
|
|
- this.listArr = [{}]
|
|
|
+ this.listArr = [{}]
|
|
|
|
|
|
- }
|
|
|
+ }
|
|
|
},
|
|
|
|
|
|
//映射数据保存
|
|
|
@@ -363,14 +341,14 @@ export default {
|
|
|
this.$message.warning("请进行数据映射配置");
|
|
|
return;
|
|
|
}
|
|
|
- const isValid = this.listArr.every(item =>
|
|
|
- item.elementId && item.initTabId
|
|
|
- );
|
|
|
-
|
|
|
- if (!isValid) {
|
|
|
- this.$message.warning("请确保选择了所有表单和元素字段!");
|
|
|
- return;
|
|
|
- }
|
|
|
+ const isValid = this.listArr.every(item =>
|
|
|
+ item.elementId && item.initTabId
|
|
|
+ );
|
|
|
+
|
|
|
+ if (!isValid) {
|
|
|
+ this.$message.warning("请确保选择了所有表单和元素字段!");
|
|
|
+ return;
|
|
|
+ }
|
|
|
this.saveLoaing = true;
|
|
|
const { data: res } = await saveLinkDetail({
|
|
|
classId: this.classId,
|
|
|
@@ -386,27 +364,27 @@ export default {
|
|
|
await this.getLinkedData();
|
|
|
await this.getExcelHtmlCol(this.classId, this.linkedData); //获取excel模板
|
|
|
this.clickArr = [];
|
|
|
- this.curItem={}
|
|
|
+ this.curItem = {}
|
|
|
}
|
|
|
},
|
|
|
- addList(index){
|
|
|
- const currentItem = this.listArr[index];
|
|
|
- if (!currentItem.elementId || !currentItem.initTabId) {
|
|
|
- this.$message({
|
|
|
- type: "warning",
|
|
|
- message: "请选择元素和表单",
|
|
|
- });
|
|
|
- return; // 不满足条件则不添加
|
|
|
- }
|
|
|
- this.listArr.splice(index + 1, 0, {
|
|
|
- htmlKeyName: this.clickKeyname
|
|
|
+ addList(index) {
|
|
|
+ const currentItem = this.listArr[index];
|
|
|
+ if (!currentItem.elementId || !currentItem.initTabId) {
|
|
|
+ this.$message({
|
|
|
+ type: "warning",
|
|
|
+ message: "请选择元素和表单",
|
|
|
+ });
|
|
|
+ return; // 不满足条件则不添加
|
|
|
+ }
|
|
|
+ this.listArr.splice(index + 1, 0, {
|
|
|
+ htmlKeyName: this.clickKeyname
|
|
|
,
|
|
|
|
|
|
- tabName: '',
|
|
|
- elementName: ''
|
|
|
- });
|
|
|
+ tabName: '',
|
|
|
+ elementName: ''
|
|
|
+ });
|
|
|
},
|
|
|
- delList(index, item) {
|
|
|
+ delList(index, item) {
|
|
|
if (!item.id) {
|
|
|
this.listArr.splice(index, 1);
|
|
|
return;
|
|
|
@@ -438,7 +416,7 @@ export default {
|
|
|
this.$message.info('已取消删除');
|
|
|
});
|
|
|
}
|
|
|
-}
|
|
|
+ }
|
|
|
},
|
|
|
async created() {
|
|
|
this.classId = this.$route.query.classId;
|
|
|
@@ -481,9 +459,9 @@ export default {
|
|
|
}
|
|
|
|
|
|
.gutter {
|
|
|
- background-color: #eee;
|
|
|
- background-repeat: no-repeat;
|
|
|
- background-position: 50%;
|
|
|
+ background-color: #eee;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-position: 50%;
|
|
|
}
|
|
|
|
|
|
#parent ::v-deep .oldlace-bg {
|
|
|
@@ -492,12 +470,13 @@ export default {
|
|
|
</style>
|
|
|
<style>
|
|
|
.gutter-horizontal {
|
|
|
- background-image: url('/img/split.png') !important;
|
|
|
- cursor: col-resize;
|
|
|
- background-repeat: no-repeat;
|
|
|
- background-position: center;
|
|
|
+ background-image: url('/img/split.png') !important;
|
|
|
+ cursor: col-resize;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-position: center;
|
|
|
}
|
|
|
-.right_box{
|
|
|
+
|
|
|
+.right_box {
|
|
|
margin-bottom: 15px;
|
|
|
}
|
|
|
</style>
|