选择元素修改

src/views/codeRule/LinkEle.vue

@@ -96,84 +96,89 @@
       <el-button type="primary" @click="handleConfirm" :style="{ background: 'rgb(37, 80, 162)', borderColor: 'rgb(37, 80, 162)' }">保存</el-button>
     </div>
 
-     <el-dialog
+    <div style="height: 100%;">
+       <el-drawer
         class="dialog-set"
-        :visible.sync="addDialogVisible"
-        width="80%"
-        append-to-body
-        close-on-click-modal="false"
-        >
-         <div slot="title" class="dialog-title">
-            <div>
-                <i class="el-icon-plus" ></i>
-                <span style="margin-left: 10px;">添加元素</span>
-            </div>
-          <div class="marginTop-10">根据表单选择回显的元素位置。根据条件判定后，自动将满足条件的数据回显到选择的元素位置</div>
+            :visible.sync="addDialogVisible"
+          width="80%"
+          height="80%"
+
+          append-to-body
+            direction="ttb"
+
+            >
+            <div slot="title" class="dialog-title">
+                <div>
+                    <i class="el-icon-plus" ></i>
+                    <span style="margin-left: 10px;">添加元素</span>
+                </div>
+              <div class="marginTop-10">根据表单选择回显的元素位置。根据条件判定后，自动将满足条件的数据回显到选择的元素位置</div>
 
-        </div>
-        <div class="condition-header1-title">
-          <span>选择表单</span>
-        </div>
-        <div class="condition-header1-table">
-              <el-table
-                :data="tableData"
-                height="250"
-                border
-                style="width: 100%">
-                <el-table-column
-                  prop="tableName"
-                  label="表单名称"
-                >
-                </el-table-column>
-                <el-table-column
-                  align="center"
-                  prop="tableType"
-                  :formatter="formatTableType"
-                  width="100"
-                  label="表单类型"
-                ></el-table-column>
-               <el-table-column
-                  width="150"
-                  label="操作"
-                >
-                  <template slot-scope="scope">
-                    <el-button
-                      v-if="!scope.row.isSelected"
-                      type="text"
-                      size="small"
-                      @click="handleRowSelect(scope.row)"
+            </div>
+            <div class="condition-header1-title">
+              <span>选择表单</span>
+            </div>
+            <div class="condition-header1-table">
+                  <el-table
+                    :data="tableData"
+                    height="250"
+                    border
+                    style="width: 100%">
+                    <el-table-column
+                      prop="tableName"
+                      label="表单名称"
                     >
-                      选择
-                    </el-button>
-                    <el-button
-                      v-else
-                      type="text"
-                      size="small"
-                      style="color: #F56C6C;"
-                      @click="handleCancelSelect(scope.row)"
+                    </el-table-column>
+                    <el-table-column
+                      align="center"
+                      prop="tableType"
+                      :formatter="formatTableType"
+                      width="100"
+                      label="表单类型"
+                    ></el-table-column>
+                  <el-table-column
+                      width="150"
+                      label="操作"
                     >
-                      取消选择
-                    </el-button>
-                  </template>
-                </el-table-column>
-              </el-table>
-        </div>
-        <div class="condition-header1-title" style="margin-top: 10px;">
-          <span>选择元素</span>
-        </div>
+                      <template slot-scope="scope">
+                        <el-button
+                          v-if="!scope.row.isSelected"
+                          type="text"
+                          size="small"
+                          @click="handleRowSelect(scope.row)"
+                        >
+                          选择
+                        </el-button>
+                        <el-button
+                          v-else
+                          type="text"
+                          size="small"
+                          style="color: #F56C6C;"
+                          @click="handleCancelSelect(scope.row)"
+                        >
+                          取消选择
+                        </el-button>
+                      </template>
+                    </el-table-column>
+                  </el-table>
+            </div>
+            <div class="condition-header1-title" style="margin-top: 10px;">
+              <span>选择元素</span>
+            </div>
 
-        <div class="condition-header1-html-box">
-          <check-ele-html 
-           :key="pkeyId"
-            :pkeyId="pkeyId"
-          ></check-ele-html>
-        </div>
-        <div slot="footer" class="dialog-footer">
-           
-       
-            <el-button type="primary" @click="confirmAdd" :style="{ background: 'rgb(37, 80, 162)', borderColor: 'rgb(37, 80, 162)' }">确认添加</el-button>
-        </div>
-    </el-dialog>  
+            <div class="condition-header1-html-box">
+              <check-ele-html 
+              :key="pkeyId"
+                :pkeyId="pkeyId"
+              ></check-ele-html>
+            </div>
+            <div class="dialog-footer">
+              
+          
+                <el-button type="primary" @click="confirmAdd" :style="{ background: 'rgb(37, 80, 162)', borderColor: 'rgb(37, 80, 162)' }">确认添加</el-button>
+            </div>
+        </el-drawer> 
+    </div>
   </el-dialog>
       
        
@@ -181,7 +186,7 @@
 
 <script>
 import { getDictionary } from "@/api/system/dict";
-import { selectByNodeTable   as findNodeTableByCondition1 } from "@/api/manager/wbstree";
+import { findNodeTableByCondition as selectByNodeTable} from "@/api/manager/wbsprivate";
 import checkEleHtml from "./checkEleHtml.vue";
 export default {
   name: 'ConditionsSet',
@@ -215,13 +220,15 @@ export default {
       ],
       tableTypelist: [],
       pkeyId: '', // 主键ID
+      id:'',
+      projectid:''
     
    
 
     }
   },
   methods: {
-    show(val,treeId) {
+    show(val,treeId,id,projectid) {
       this.getTableTypelist();
       this.visible = true
       if(val.length > 0&&val[0].name) {
@@ -233,6 +240,8 @@ export default {
           }
         })
         this.treeId = treeId
+        this.id = id
+        this.projectid = projectid
         
        
       }else{
@@ -251,7 +260,7 @@ export default {
       });
     },
     async getTableData(){
-        const { data: res } = await findNodeTableByCondition1( this.treeId);
+        const { data: res } = await selectByNodeTable( this.treeId,this.projectid, this.id);
           if (res.code === 200) {
             console.log(Array.isArray(res.data));
             if (Array.isArray(res.data)) {
@@ -299,19 +308,18 @@ export default {
         }
       }
       return cellValue;
-      //console.log(cellValue)
+    
     },
     handleRowSelect(row) {
       // 设置选中状态
      // 先取消其他行的选中状态
-     this.pkeyId = ''; // 清空主键ID
       this.tableData.forEach(item => {
         if(item !== row) {
           this.$set(item, 'isSelected', false)
         }
       })
       this.pkeyId = row.pkeyId; // 更新主键ID
-console.log(this.pkeyId,'this.pkeyId');
+
 
       // 设置当前行选中状态
       this.$set(row, 'isSelected', true)
@@ -319,6 +327,7 @@ console.log(this.pkeyId,'this.pkeyId');
     },
 
     handleCancelSelect(row) {
+      this.pkeyId = ''; // 清除主键ID
       // 取消选中状态
       this.$set(row, 'isSelected', false)
 
@@ -503,22 +512,41 @@ console.log(this.pkeyId,'this.pkeyId');
 }
 .condition-header1-html-box{
   // height: 600px;
-  border: 1px solid red;
+  // border: 1px solid red;
 }
 </style>
 <style lang="scss">
 .dialog-set {
 
 
-      .el-dialog__header{
+      .el-drawer__header{
         padding: 0px;
               background: rgb(37, 80, 162);
               font-family: 16px;
       
       }
-      .dialog-footer{
-        text-align: center;
-      }
+        // ...现有样式...
+  .el-drawer {
+    height: 95% !important; // 增加抽屉高度
+
+    .el-drawer__body {
+      height: calc(100% - 100px); // 减去头部和底部的高度
+      overflow-y: auto; // 添加滚动
+      padding: 20px;
+    }
+
+    
+    .dialog-footer {
+      position: absolute;
+      bottom: 0;
+      width: 100%;
+      padding: 10px 20px;
+      text-align: center;
+      background: white;
+      border-top: 1px solid #EBEEF5;
+    }
+  }
+      
       
 }
 

src/views/codeRule/checkEleHtml.vue

@@ -22,25 +22,29 @@ export default {
   props: ['pkeyId'],
   data() {
     return {
-
-      htmlData: {
-        name: '',
-        tr: '',
-        td: ''
-      },
-      type: {},
-  
-      checkList: [],
-      checkNameList: [],
-      isSignatureEdit: false,
-      isTimeElement: false,
-      timesTimeElement: {}
+      selectedElements: [] ,// 存储已选中的元素
+      exHtml:''
+    }
+  },
+  watch: {
+    pkeyId: {
+      immediate: true,
+      deep: true,
+      handler(newVal) {
+        if(newVal) {
+          this.exHtml = ''
+          this.getExcelHtml(newVal)// 重新初始化数据
+        
+        }else {
+          this.exHtml = ''
+           this.clearForm()
+        }
+      }
     }
   },
   mounted() {
-    this.cop()
-    this.type = this.option.column[0];
-    console.log(111);
+
+  
   },
 
 
@@ -48,16 +52,27 @@ export default {
 
     async getExcelHtml(pkeyId) {
       const {data: res} = await getExcelHtml({pkeyId})
-      console.log(res);
       if (res.code === 200) {
-        localStorage.setItem('excelHtml', res.data)
-        this.copss();
+        this.exHtml = res.data
+        this.cop();
       }
     },
+      // 新增清空表单方法
+  clearForm() {
+    const parentElement = document.getElementById('parent')
+    console.log(parentElement, 'parentElement');
+    
+    if(parentElement) {
+      // 清空父元素内容
+      parentElement.innerHTML = ''
+    }
+    // 清空已选中元素
+    this.clearAllSelected()
+  },
     async cop() {
       let _that = this
       var MyComponent = await Vue.extend({
-        template: localStorage.getItem('excelHtml'),
+        template: this.exHtml ,
         data() {
           return {
             formData: {},
@@ -69,7 +84,7 @@ export default {
           contextmenuClick(tr, td, x1, x2, y1, y2, event) {
           },
           getInformation(name, tr, td) {//鼠标右键事件
-            _that.getInformation(name, tr, td)
+            
           },
           formUploadSuccess() {
           },
@@ -108,174 +123,43 @@ export default {
       var component = new MyComponent().$mount()
       document.getElementById('parent').appendChild(component.$el);
     },
-    async copss() {
-      let _that = this
-      var MyComponent = await Vue.extend({
-        template: localStorage.getItem('excelHtml'),
-        data() {
-          return {
-            formData: {},
-            getTokenHeader: {},
-            dap_site_data: {}
-          }
-        },
-        methods: {
-          contextmenuClick(tr, td, x1, x2, y1, y2, event) {
-          },
-          getInformation(name, tr, td) {//鼠标右键事件
-            _that.getInformation(name, tr, td)
-          },
-          formUploadSuccess() {
-          },
-          formUploadExceed() {
-          },
-          formUploadLoading() {
-          },
-          delTableFormFile() {
-          },
-          formUploadError() {
-          },
-          uploadprogress() {
-          },
-          getRegularExpression() {
-          },
-          formRemoteMethod() {
-          },
-          checkboxGroupChange() {
-          },
-          formRemoteChange() {
-          },
-          dateKeydown() {
-          },
-          keyupShiftUp() {
-          },
-          keyupShiftDown() {
-          },
-          keyupShiftLeft() {
-          },
-          keyupShiftRight() {
-          },
-          inputLeftClick() {
-          },
-        }
-      })
-      var component = new MyComponent().$mount()
-      let na = document.getElementById('parent')
-      na.innerHTML = `<div
-        class='parent'
-        id='parent'
-      ></div>`
-      document.getElementById('parent').appendChild(component.$el);
-    },
-    domss() {
-      this.copss()
 
-    },
 
-    getInformation(name, tr, td) {//鼠标点击事件
-      if (!this.isTimeElement) {
-        let tdEle = null;
-        //获取TD元素
-        if (event.target.nodeName === "TD") {
-          tdEle = event.target
-        } else {
-          tdEle = this.getParentTD(event.target);
-        }
-        let moreObj = {};
-        if (tdEle) {
-          moreObj = this.getWidget(tdEle);
-        }
-        this.htmlData = Object.assign({
-          name,
-          tr,
-          td
-        }, moreObj)
-      } else {
-        this.$set(this.timesTimeElement, 'colName', name)
-      }
-    },
-    signatureEdit(data) {
-      this.isSignatureEdit = data
-    },
+
+ 
     //excel父节点点击检测
-    async parentClick(e) {
-      if (!this.isTimeElement) {
-        let target = e.target;
-        const {metaKey, ctrlKey} = e
-        let bgs = document.querySelectorAll("#parent .oldlace-bg")
-        //console.log(bgs)
-        for (let i = 0; i < bgs.length; i++) {
-          bgs[i].classList.remove("oldlace-bg");
-        }
-        //console.log(target.getAttribute('trindex'))
-        let tdEle = this.getParentTD(target);
-      
-    
-   
-        let target1
-        if (tdEle) {
-          let mydiv = tdEle.getElementsByTagName('div')
-          target1 = mydiv[0]
-        } else {
-          tdEle = target
-          let mydiv = tdEle.getElementsByTagName('div')
-          target = mydiv[0]
-        }
-        let keyname = ''
-        try {
-          keyname = target.getAttribute('keyname') || target1.getAttribute('keyname')
-          // eslint-disable-next-line no-empty
-        } catch {
-        }
+      async parentClick(e) {
+      let target = e.target;
+        const elementId = target.id;
+        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);
+
       
-        this.htmlData.keyname = keyname
-        if (target.getAttribute('trindex') !== null && target.getAttribute('tdindex') || target1.getAttribute('trindex') !== null && target1.getAttribute('tdindex')) {
-          let tdEle = this.getParentTD(target);
-          if (tdEle) {
-            //橙色背景
-            target.classList.add("oldlace-bg");
-            if (metaKey || ctrlKey) {
-              target.classList.add("select-td");
-              this.checkNameList.push(this.htmlData)
-              this.checkList.push({
-                tr: target.getAttribute('trindex') || target1.getAttribute('trindex'),
-                td: target.getAttribute('tdindex') || target1.getAttribute('tdindex'),
-              })
-            } else {
-              target.classList.remove("select-td");
-              this.checkList.forEach((ele, index) => {
-                if (ele.tr === target.getAttribute('trindex') || ele.tr === target1.getAttribute('trindex')) {
-                  this.checkList.splice(index, 1)
-                }
-              })
-              this.checkNameList.forEach((ele, index) => {
-                if (this.htmlData.tr === ele.tr) {
-                  this.checkNameList.splice(index, 1)
-                }
-              })
-            }
-          }
-        }
-      } else {
-        let target = e.target;
-        let tdEle = this.getParentTD(target);
-        let target1
-        if (tdEle) {
-          let mydiv = tdEle.getElementsByTagName('div')
-          target1 = mydiv[0]
-        } else {
-          tdEle = target
-          let mydiv = tdEle.getElementsByTagName('div')
-          target = mydiv[0]
-        }
-        let keyname = ''
-        try {
-          keyname = target.getAttribute('keyname') || target1.getAttribute('keyname')
-        } catch {}
-        this.$set(this.timesTimeElement, 'keyname', keyname)
-        console.log(this.timesTimeElement)
-      }
     },
+        // 清除所有选中状态的方法
+    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") {
@@ -288,92 +172,10 @@ export default {
     },
 
 
-    //获取控件信息
-    getWidget(tdEle) {
-      let selectElement = tdEle.querySelectorAll('.el-select');
-      let isMultiple = false
-      if (selectElement.length) {
-
-        // 遍历每个元素，检查是否包含 is-multiple 类名
-        selectElement.forEach(element => {
-          if (element.classList.contains('is-multiple')) {
-            isMultiple = true;
-          }
-        });
-        if (isMultiple) {
-          let options = selectElement[0].__vue__.options;
-          let selectDatas = [];
-          for (let i = 0; i < options.length; i++) {
-            selectDatas.push({
-              dictValue: options[i].label
-            });
-          }
-          return {
-            type: 'selectBox',
-            selectDatas
-          }
-        }
-      }
-      let checkLabels = tdEle.querySelectorAll('.el-checkbox-group span.el-checkbox__label');
-      //console.log(checkLabels)
-      if (checkLabels.length > 0) {
-        let checkLabelDatas = [];
-        for (let i = 0; i < checkLabels.length; i++) {
-          //console.dir(checkLabels[i])
-          checkLabelDatas.push({
-            dictValue: checkLabels[i].innerText
-          });
-        }
-        return {
-          type: 'checkbox',
-          checkLabelDatas
-        }
-      }
-
-      let radioLabels = tdEle.querySelectorAll('.el-radio .el-radio__label');
-      if (radioLabels.length > 0) {
-        let radioDatas = [];
-        for (let i = 0; i < radioLabels.length; i++) {
-          radioDatas.push({
-            dictValue: radioLabels[i].innerText
-          });
-        }
-        return {
-          type: 'radio',
-          radioDatas
-        }
-      }
-
-      let elSelect = tdEle.querySelectorAll('.el-select');
-      //console.dir(elSelect[0])
-      if (elSelect.length) {
-        let options = elSelect[0].__vue__.options;
-        let selectDatas = [];
-        for (let i = 0; i < options.length; i++) {
-          selectDatas.push({
-            dictValue: options[i].label
-          });
-        }
-        return {
-          type: 'select',
-          selectDatas
-        }
-
-      }
 
 
-      return {};
-    },
-    //是否为时间元素选择模式
-
   },
-  components: {
-
-  
 
- 
-   
-  }
 }
 </script>