表单选择元素修改

src/views/formula/component/table-form-write.vue

@@ -1,19 +1,233 @@
 <template>
-  <div>66666</div>
+  <div class="excelHtnl">
+
+    <div
+      class="excelBox hc-excel-table-form"
+      style="margin-top:40px;height: 100%;"
+      @click="parentClick($event)"
+    >
+      <div style="width:100%;height: 100%;overflow: scroll;" class='parent' id='parent'></div>
+      
+    </div>
+  </div>
 </template>
 
 <script>
+
+import Vue from 'vue'
+import {getExcelHtml} from '@/api/exctab/excelmodel'
+
+
 export default {
-  name: "table-form-write",
-  props: {
+  props: ['pkeyId','initTableName'],
+  data() {
+    return {
+      selectedElements: [] ,// 存储已选中的元素
+      exHtml:'',
+      currentComponent: null
+    }
+  },
+  watch: {
+    pkeyId: {
+      immediate: true,
+      deep: true,
+      handler(newVal) {
+        console.log(newVal,'newVal');
+        
+        if(newVal) {
+          this.exHtml = ''
+          this.getExcelHtml(newVal)// 重新初始化数据
+        
+        }else {
+          this.exHtml = ''
+           this.clearForm()
+        }
+      }
+    }
+  },
+  mounted() {
+
   
   },
+
+
   methods: {
 
-  }
+    async getExcelHtml(pkeyId) {
+        // 先清除旧内容
+  this.clearForm();
+      const {data: res} = await getExcelHtml({pkeyId})
+      if (res.code === 200) {
+        this.exHtml = res.data
+        this.cop();
+      }
+    },
+      // 新增清空表单方法
+  clearForm() {
+    const parentElement = document.getElementById('parent')
+
+    
+    if(parentElement) {
+      // 清空父元素内容
+      parentElement.innerHTML = ''
+    }
+    // 清空已选中元素
+    this.clearAllSelected()
+  },
+    async cop() {
+      let _that = this
+      var MyComponent = await Vue.extend({
+        template: this.exHtml ,
+        data() {
+          return {
+            formData: {},
+            getTokenHeader: {},
+            dap_site_data: {}
+          }
+        },
+        methods: {
+          contextmenuClick(tr, td, x1, x2, y1, y2, event) {
+          },
+          getInformation(name, tr, td) {//鼠标右键事件
+            
+          },
+          formUploadSuccess() {
+          },
+          formUploadExceed() {
+          },
+          formUploadLoading() {
+          },
+          delTableFormFile() {
+          },
+          formUploadError() {
+          },
+          uploadprogress() {
+          },
+          formRemoteMethod() {
+          },
+          getRegularExpression() {
+          },
+          checkboxGroupChange() {
+          },
+          formRemoteChange() {
+          },
+          dateKeydown() {
+          },
+          keyupShiftUp() {
+          },
+          keyupShiftDown() {
+          },
+          keyupShiftLeft() {
+          },
+          keyupShiftRight() {
+          },
+          inputLeftClick() {
+          },
+        }
+      })
+      var component = new MyComponent().$mount()
+      document.getElementById('parent').appendChild(component.$el);
+    },
+
+
+
+ 
+    //excel父节点点击检测
+      async parentClick(e) {
+      let target = e.target;
+        // const elementId = target.id;
+        const elementId = this.initTableName+':'+target.id.split('__')[0]; 
+        const keyName = target.placeholder;
+        // 判断元素是否已选中
+        const index = this.selectedElements.findIndex(item => item.elementId === elementId);
+        if (index === -1) {
+          // 添加选中效果
+          target.style.backgroundColor = '#ffa500'; // 橙色背景
+          this.selectedElements.push({elementId, keyName}); // 存储选中元素的id和keyName
+        } else {  
+          // 取消选中效果
+          target.style.backgroundColor = ''; // 恢复默认背景
+          this.selectedElements.splice(index, 1);
+        }
+        
+        // 触发选中元素变化事件
+        this.$emit('element-selected', this.selectedElements);
+
+      
+    },
+        // 清除所有选中状态的方法
+    clearAllSelected() {
+      this.selectedElements.forEach(item => {
+        const element = document.getElementById(item.elementId);
+        if (element) {
+          element.style.backgroundColor = '';
+        }
+      });
+      this.selectedElements = [];
+    },
+
+    getParentTD(ele) {
+      let targetParent = ele.parentNode;
+      while (targetParent.nodeName !== "TD") {
+        if (targetParent.id == 'parent') {
+          return null;
+        }
+        targetParent = targetParent.parentNode;
+      }
+      return targetParent;
+    },
+
+
+
+
+  },
+
 }
 </script>
 
-<style scoped lang="scss">
+<style lang="scss" scoped>
+.excelHtnl {
+  margin: 0 0 0 10px;
+  background-color: #fff;
+  box-sizing: border-box;
+  padding: 0 20px 100px 20px;
+  height: 100%;
+}
+
+// 设置图片样式
+.hc-upload-table-form {
+  position: relative;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.hc-upload-table-form .el-upload {
+  position: relative;
+  flex: 1;
+  height: 100%;
+  color: #ccc;
+}
+.hc-upload-table-form .el-upload .hc-table-form-icon {
+  font-size: 24px;
+  font-weight: 100;
+}
+.hc-upload-table-form .el-upload .hc-table-form-img {
+  width: 100%;
+  height: 100%;
+}
+
+.excelBox {
+  ::v-deep .oldlace-bg {
+    background-color: oldlace;
+  }
+  ::v-deep .select-td {
+    border-width: 4px;
+    border-color: #E6A23C;
+    border-style: solid;
+  }
+}
 </style>
-    
+
+
+

src/views/formula/edit.vue

@@ -128,15 +128,7 @@
                       <el-option v-if="paramDataList.length" label="选择节点参数2" value="选择节点参数"></el-option>
                       <el-option  v-for="item in eleTableList" :key="item.id" :label="item.tableName" :value="(item.pkeyId!==null&&item.pkeyId!==-1)?item.pkeyId:item.id"></el-option>
                     </el-select>
-                    <!-- 搜索元素下拉框 -->
-                    <!-- <el-select v-model="input3" filterable clearable placeholder="搜索元素字段"  @change="getInput" style="width:45%">
-                      <el-option
-                        v-for="item in eleList1"
-                        :key="item.id"
-                        :label="item.eName"
-                        :value="item.eName">
-                      </el-option>
-                    </el-select> -->
+
                      <div class="text-align-c">
                       <el-button size="small" @click="canceloperationVisible ">取消</el-button>
                       <el-button size="small" @click="operationHandle" type="primary">保存</el-button>
@@ -144,19 +136,9 @@
                   </div>
            
                 <div class="mg-t-10 no-mb-col flex1" >
-                  <el-scrollbar style="height: 350px">
-                    <!-- <el-row v-loading="eleListable"  v-if="eleList.length>0">
-                      <el-col :span="6" v-for="item in eleList" :key="item.id" >
-                        <div class="ele-box">
-                          <span v-if="item.k">{{item.name}}</span>
-                          <span v-else>{{item.eName}}</span>
-                          <el-checkbox v-model="item.checked" @change="value => eleChang(value,item)"></el-checkbox>
-                        </div>
-                        
-                      </el-col>
-                    </el-row> -->
-                    <!-- <el-row v-else style="text-align: center;line-height: 328px;border:1px solid #bbb">暂无数据</el-row> -->
-                     777
+                  <el-scrollbar style="height: 450px">
+        
+                     <tableFormWrite :pkeyId="eleTableId" @element-selected="handleElementSelected" :initTableName="initTableName"></tableFormWrite>
                   </el-scrollbar>
                 </div>
          
@@ -618,7 +600,7 @@ export default {
       isDataChange:false,//是否数据自变
       dataForm:'',
       remark:'',//备注
-
+      initTableName:'',//初始表名
 
     };
   },
@@ -1857,6 +1839,16 @@ console.log(remark,'remark');
 
     getTableEle(tableId){
       console.log("getTableEle",tableId);
+      this.initTableName=''
+
+      
+      this.eleTableList.forEach((item)=>{
+        if(item.pkeyId===tableId){
+          this.initTableName=item.initTableName
+        }
+        
+      })
+
       this.input3=''
       if(tableId === '选择节点参数'){
         this.eleList = this.paramDataList;
@@ -2047,6 +2039,10 @@ console.log(remark,'remark');
           resolve();
         })
       })
+    },
+    handleElementSelected(val){
+      console.log(val,'选中的元素');
+      
     }
   },
 };