编辑元素页面修改

src/views/manager/projectinfo/editElement/editElement.vue

@@ -3,10 +3,10 @@
     style="height:100%;"
     ref="heights"
   >
-    <basic-container class="editElement" style="height:900px">
+    <basic-container class="editElement" >
       <div class="flex" style="position:fixed;left:30px;top:0;">
         <h2 class="mg-r-10">编辑元素</h2>
-        <el-link type="primary" @click="toBack">返回上一级</el-link>
+        <!-- <el-link type="primary" @click="toBack">返回上一级</el-link> -->
       </div>
       <div
         class="header"
@@ -31,6 +31,15 @@
           :span="7"
           style="position: fixed;right: 13px;"
         >
+        <div style="margin-bottom: 20px;float: right;padding-right: 25px">
+          <el-button @click="toBack">返回上一级</el-button>
+          <el-button type="warning" @click="adjustExcel">进入表单调整</el-button>
+          <el-button
+                type="primary"
+                :disabled="tag"
+                @click="saveReplace()"
+          >保存</el-button>
+        </div>
           <div v-show="AddNewElementField == '替换元素'">
             <!-- <div>
               <el-checkbox v-model="isMultiple" @change="multipleChange">多选模式</el-checkbox>
@@ -60,10 +69,10 @@
             </el-table>
 
             <el-select
-              style="width:300px;"
+              style="width:95%;"
               v-model="value"
               filterable
-              placeholder="请选择"
+              placeholder="输入元素名称搜索"
             >
               <el-option
                 v-for="item in options"
@@ -83,7 +92,7 @@
               v-model="names"
             >
             </el-input>
-            <div class="martop20">
+            <!-- <div class="martop20">
               <el-button
                 type="info"
                 @click="cancelReplace()"
@@ -93,15 +102,20 @@
                 :disabled="tag"
                 @click="saveReplace()"
               >保存</el-button>
+            </div> -->
+            <div class="martop20 replace_box" v-if="false">
+              <div>
+
+              </div>
             </div>
           </div>
-          <div
+          <!-- <div
             v-show="AddNewElementField ==''"
             style="width:160px;position: fixed;bottom: 50px; right:20px;"
           >
             <el-button type="info" @click="toBack">取消</el-button>
             <el-button type="primary">保存</el-button>
-          </div>
+          </div> -->
         </el-col>
       </el-row>
       <!-- 弹框 -->
@@ -353,6 +367,7 @@ export default {
   },
   created () {
     this.getElementInfoByTabId()
+    this.AddNewElementField = '替换元素'
   },
   methods: {
     takuangchangge (value) {//切换事件
@@ -621,7 +636,8 @@ export default {
        this.$refs.cascader.clearCheckedNodes()//调用方法无效
     },
     saveReplace () {//保存按钮
-      if (this.value) {
+    
+      if (this.value&& this.table.td&& this.table.tr) {
         this.tag = true
         this.submit({
           tabId: this.pkeyId,
@@ -633,7 +649,7 @@ export default {
       } else {
         this.$message({
           type: "error",
-          message: "请选择要替换的元素"
+          message: "请右键选择要替换的元素"
         })
       }
     },
@@ -762,6 +778,11 @@ export default {
       this.$emit('hideDialog')
 
     },
+    //调整表单
+    adjustExcel(){
+      this.$emit('hideDialog')
+      this.$emit('adjustExcel',this.pkeyId)
+    },
 
 
     eleDelete(index){
@@ -908,4 +929,25 @@ export default {
     height: calc(100vh - 60px);
   }
 }
+.replace_box{
+  border: 1px gray dashed;
+  width: 95%;
+  height: 500px;
+  position: relative;
+ 
+}
+.replace_box::after {
+				content: '未进行匹配的字段';
+				position: absolute;
+				right: 34%;
+				top: -15px;
+        background-color: white;
+				text-align: center;
+				font-size: 18px;
+				color: orange;
+        font-weight: 900;
+				
+		
+			}
+
 </style>

src/views/manager/projectinfo/tree.vue

@@ -1455,6 +1455,7 @@
         :initTableId="editElementQuery.initTableId"
         :nodeid="editElementQuery.nodeid"
         @hideDialog="editElementVisible = false"
+        @adjustExcel="adjustExcel"
         v-if="editElementVisible"
       ></EditElement>
     </el-dialog>

src/views/manager/projectinfo/treeTemplate/template/setInputTPT.vue

@@ -6,7 +6,7 @@
           元素坐标：
         </el-col>
         <el-col :span="18">
-            <avue-input v-model="htmlData.name" placeholder="请输入内容" :disabled='true' ></avue-input>
+          <avue-input v-model="htmlData.name" placeholder="请输入内容" :disabled='true'></avue-input>
         </el-col>
       </el-row>
       <el-row :span="24">
@@ -14,23 +14,13 @@
           文本格式：
         </el-col>
         <el-col :span="18">
-      <el-select
-        style="width:100%;"
-        v-model="from.type"
-        clearable
-        placeholder="请选择"
-      >
-        <el-option
-          v-for="item in kjtype"
-          :key="item.dictKey"
-          :label="item.dictValue"
-          :value="item.dictKey"
-        >
-        </el-option>
-      </el-select>
+          <el-select style="width:100%;" v-model="from.type" clearable placeholder="请选择">
+            <el-option v-for="item in kjtype" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey">
+            </el-option>
+          </el-select>
         </el-col>
       </el-row>
-      <el-row :span="24" v-if="from.type==='date'||from.type==='daterange'">
+      <!-- <el-row :span="24" v-if="from.type==='date'||from.type==='daterange'">
         <el-col :span="3.8" style="line-height: 40px">
           日期：
         </el-col>
@@ -136,26 +126,14 @@
               </el-option>
             </el-select>
         </el-col>
-      </el-row>
+      </el-row> -->
 
     </div>
     <!-- 添加框 -->
-    <div
-      style="border: 1px dotted rgb(187, 187, 187);box-sizing: border-box;padding: 0px 15px;"
-      class="martop20 marbottom10"
-      v-show="from.type=='select'||from.type=='radio'||from.type=='checkbox'"
-    >
-      <table
-        class="table"
-        width='100%'
-        border='1px'
-        cellpadding='2px'
-        bordercolor="#E5E5E5"
-      >
-        <thead
-          cellpadding='2px'
-          height='40px'
-        >
+    <div style="border: 1px dotted rgb(187, 187, 187);box-sizing: border-box;padding: 0px 15px;"
+      class="martop20 marbottom10" v-show="from.type == 'select' || from.type == 'radio' || from.type == 'checkbox'">
+      <table class="table" width='100%' border='1px' cellpadding='2px' bordercolor="#E5E5E5">
+        <thead cellpadding='2px' height='40px'>
           <tr>
             <th width='15%'>序号</th>
             <th width='65%'>默认值</th>
@@ -163,42 +141,25 @@
           </tr>
         </thead>
         <tbody height='36px'>
-          <tr
-            v-for="(item,key) in setInputTable"
-            :key="key"
-          >
-            <td align="center">{{key+1}}</td>
+          <tr v-for="(item, key) in setInputTable" :key="key">
+            <td align="center">{{ key + 1 }}</td>
             <td>
-              <el-input
-                v-model="setInputTable[key].dictValue"
-                size="mini"
-                placeholder="请输入内容"
-              ></el-input>
+              <el-input v-model="setInputTable[key].dictValue" size="mini" placeholder="请输入内容"></el-input>
             </td>
             <td align="center">
-              <el-link
-                type="warning"
-                @click="deleteTable(key)"
-              >删除</el-link>
+              <el-link type="warning" @click="deleteTable(key)">删除</el-link>
             </td>
           </tr>
         </tbody>
       </table>
       <div class="martop20 flexEnd marbottom10"><i
-          style="padding-bottom: 10px;color:rgb(10, 134, 217);font-size:24px;cursor: pointer;"
-          class="el-icon-circle-plus"
-          @click="addTable()"
-        ></i></div>
+          style="padding-bottom: 10px;color:rgb(10, 134, 217);font-size:24px;cursor: pointer;" class="el-icon-circle-plus"
+          @click="addTable()"></i></div>
     </div>
     <el-row style="text-align: center">
-      <el-button type="primary"
-                 size="small"
-                 icon="el-icon-circle-plus-outline"
-                 @click="saveType()">保存设置</el-button> &nbsp;&nbsp;
-      <el-button type="primary"
-                 size="small"
-                 icon="el-icon-circle-plus-outline"
-                 @click="saveType()">继续保存</el-button>
+      <el-button type="primary" size="small" icon="el-icon-circle-plus-outline" @click="saveType()">保存设置</el-button>
+      &nbsp;&nbsp;
+      <el-button type="primary" size="small" icon="el-icon-circle-plus-outline" @click="saveType()">继续保存</el-button>
     </el-row>
   </div>
 </template>
@@ -207,32 +168,32 @@ import { dictionary, saveInput, getColByTabId } from "@/api/manager/AdjustForm";
 import { getExcelHtml } from '@/api/exctab/excelmodel'
 export default {
   props: ['pkeyId', 'htmlData'],
-  computed:{
-    myHtmlData:function(){
+  computed: {
+    myHtmlData: function () {
       return this.htmlData;
     }
   },
-  watch:{
-    myHtmlData:function(newV){
+  watch: {
+    myHtmlData: function (newV) {
       //console.log(newV)
-      if(newV.type){
-        if(newV.type == 'checkbox'){
-          this.from.type ='checkbox';
+      if (newV.type) {
+        if (newV.type == 'checkbox') {
+          this.from.type = 'checkbox';
           this.setInputTable = newV.checkLabelDatas;
-        }else if(newV.type == 'radio'){
-          this.from.type ='radio';
+        } else if (newV.type == 'radio') {
+          this.from.type = 'radio';
           this.setInputTable = newV.radioDatas;
-        }else if(newV.type == 'select'){
-          this.from.type ='select';
+        } else if (newV.type == 'select') {
+          this.from.type = 'select';
           this.setInputTable = newV.selectDatas;
         }
-      }else{
-        this.from.type ='';
+      } else {
+        this.from.type = '';
         this.setInputTable = [];
       }
     }
   },
-  data () {
+  data() {
     return {
       elementName: [],
       kjtype: [],//框架类型
@@ -242,19 +203,19 @@ export default {
       },
       setInputTable: [],//数据体
       disabled: false,
-      checkDateList:[],
+      checkDateList: [],
       testvalue1: new Date(2000, 0, 0, 0, 22),
     }
   },
   methods: {
-    addTable () {//添加table表
+    addTable() {//添加table表
       this.setInputTable.push({ dictValue: '' })
     },
-    deleteTable (key) {//删除数据
+    deleteTable(key) {//删除数据
       this.setInputTable.splice(key, 1)
     },
-    saveType () {//保存设置按钮
-      if(this.htmlData.tr === '' || this.htmlData.td === ''){
+    saveType() {//保存设置按钮
+      if (this.htmlData.tr === '' || this.htmlData.td === '') {
         this.$message({
           type: "warning",
           message: "请先选择元素"
@@ -307,14 +268,14 @@ export default {
         });
       }
     },
-    async dictionary () {//获取文本类型接口
+    async dictionary() {//获取文本类型接口
       const { data: res } = await dictionary()
       console.log(res);
       if (res.code === 200) {
         this.kjtype = res.data
       }
     },
-    async saveInput (da) {//保存设置文本接口
+    async saveInput(da) {//保存设置文本接口
       const { data: res } = await saveInput(da)
       console.log(res);
       if (res.code == 200) {
@@ -330,8 +291,8 @@ export default {
     //     this.elementName = res.data
     //   }
     // },
-    async getExcelHtml () {
-      const { data: res } = await getExcelHtml({ pkeyId:this.pkeyId})
+    async getExcelHtml() {
+      const { data: res } = await getExcelHtml({ pkeyId: this.pkeyId })
       console.log(res);
       if (res.code === 200) {
         this.htmlData.name = ''
@@ -344,7 +305,7 @@ export default {
       }
     },
   },
-  created () {
+  created() {
     this.dictionary()  //获取文本类型接口
     // this.getColByTabId()
   },
@@ -358,7 +319,8 @@ export default {
   color: #101010;
   font-size: 14px;
 }
-.setInputcss{
+
+.setInputcss {
   width: 90%;
   height: 100%;
 }