私有树编辑元素已完成

src/api/exctab/editelement.js

@@ -0,0 +1,45 @@
+import request from '@/router/axios';
+
+//获取excel字段信息
+export const getElementInfoByTabId = (params) => {
+    return request({
+        url: '/api/blade-manager/linkdatainfo/getElementInfoByTabId',
+        method: 'get',
+        params
+    })
+}
+
+//新增修改
+export const submit = (data) => {
+    return request({
+        url: '/api/blade-manager/linkdatainfo/submit',
+        method: 'post',
+        data
+    })
+}
+
+//删除元素
+export const remove = (data) => {
+    return request({
+        url: '/api/blade-manager/linkdatainfo/remove',
+        method: 'post',
+        data
+    })
+}
+
+//数据类型字典
+export const dictionarydataType = () => {
+    return request({
+        url: '/api/blade-system/dict/dictionary?code=data_type',
+        method: 'get',
+    })
+}
+
+//添加新元素
+export const submitBatch = (data) => {
+    return request({
+        url: '/api/blade-manager/wbsFormElement/submitBatch   ',
+        method: 'post',
+        data
+    })
+}

src/api/exctab/excelmodel.js

@@ -2,13 +2,14 @@ import request from '@/router/axios';
 
 //分页获取清表
 export const getList = (params) => {
-        return request({
-            url: '/api/blade-manager/exceltab/list',
-            method: 'get',
-            params
-        })
-    }
-    // 关联清表树all
+    return request({
+        url: '/api/blade-manager/exceltab/list',
+        method: 'get',
+        params
+    })
+}
+
+// 关联清表树all
 export const tabLazytreeAll = (params) => {
     return request({
         url: '/api/blade-manager/exceltab/tab-lazytree-all',

src/router/views/index.js

@@ -149,15 +149,25 @@ export default [{
         component: Layout,
         redirect: '/project/tree',
         children: [{
-            path: 'tree',
-            name: '私有WBS',
-            meta: {
-                i18n: 'privateTree'
+                path: 'tree',
+                name: '私有WBS',
+                meta: {
+                    i18n: 'privateTree'
+                },
+                component: () =>
+                    import ( /* webpackChunkName: "views" */ '@/views/manager/projectinfo/tree')
             },
-            component: () =>
-                import ( /* webpackChunkName: "views" */ '@/views/manager/projectinfo/tree')
-        }]
-    },{
+            {
+                path: 'editElement',
+                name: '编辑元素',
+                meta: {
+                    i18n: 'editElement'
+                },
+                component: () =>
+                    import ( /* webpackChunkName: "views" */ '@/views/manager/projectinfo/editElement/editElement')
+            }
+        ]
+    }, {
         path: '/formula',
         component: Layout,
         redirect: '/formula/edit',

src/views/exctab/excelmodel/excelmodel.vue

@@ -1,8 +1,11 @@
 <template>
   <div>
-    <el-row class="box">
+    <el-row
+      class="box"
+      :gutter="20"
+    >
       <!-- 左侧树结构 -->
-      <el-col :span="5">
+      <el-col :span="6">
         <div class="box">
           <el-scrollbar>
             <basic-container>
@@ -31,7 +34,7 @@
                     <i
                       class="el-icon-edit marleft10"
                       @click.stop="editExcel(data)"
-                      v-if="data.fileType!=3"
+                      v-if="data.fileType!=1"
                     ></i>
                     <!-- 删除 -->
                     <i
@@ -48,7 +51,7 @@
       </el-col>
       <!-- 右侧 -->
       <el-col
-        :span="19"
+        :span="18"
         class="box"
       >
         <el-scrollbar>
@@ -131,7 +134,7 @@
 
     <!-- 弹出框 -->
     <el-dialog
-      title="新增编辑"
+      :title="dialogTapType"
       class="dialogModel"
       :visible.sync="dialogTap"
       width="800px"
@@ -316,6 +319,7 @@ export default {
       //#endregion
 
       //#region   弹框
+      dialogTapType: '',
       dialogTap: false,
       option2: {
         filter: false,
@@ -533,6 +537,7 @@ export default {
       }
     },
     async editExcel (data) {//编辑
+      this.dialogTapType = '编辑'
       console.log(data);
       if (data.fileType != 3 && data.hasChildren) {
         this.wbsmiddle = false
@@ -550,6 +555,7 @@ export default {
       }
     },
     async addExcel (data) {//添加
+      this.dialogTapType = '新增'
       console.log(data);
       if (data.fileType != 3 && data.hasChildren) {
         this.wbsmiddle = false
@@ -698,7 +704,7 @@ export default {
   created () {
     this.excelType()//清表类型
     this.tabLazytree(0, this.$route.params.id)//获取清表树
-  }
+  },
 }
 </script>
 

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

@@ -0,0 +1,459 @@
+<template>
+  <basic-container class="editElement">
+    <div class="header">
+      提示：鼠标右键功能：更换匹配元素字段、新增元素字段、删除匹配元素字段、公式配置&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp 红色：代表匹配不成功、蓝色代表推荐匹配元素字段、绿色代表匹配成功
+    </div>
+    <el-row
+      :gutter="20"
+      class="martop20"
+    >
+      <el-col :span="16">
+        <div
+          class='parent'
+          id='parent'
+        >
+        </div>
+
+      </el-col>
+      <el-col
+        :span="8"
+        v-show="AddNewElementField == '替换元素'"
+      >
+        <el-select
+          style="width:400px;"
+          v-model="value"
+          filterable
+          placeholder="请选择"
+        >
+          <el-option
+            v-for="item in options"
+            :key="item.id"
+            :label="item.eName"
+            :value="item.id"
+          >
+          </el-option>
+        </el-select>
+        <div class="tihuan">替换为：</div>
+        <el-input
+          :disabled="true"
+          type="textarea"
+          :rows="4"
+          placeholder="请输入内容"
+          v-model="value"
+        >
+        </el-input>
+        <div class="martop20">
+          <el-button
+            type="info"
+            @click="cancelReplace()"
+          >取消</el-button>
+          <el-button
+            type="primary"
+            :disabled="tag"
+            @click="saveReplace()"
+          >保存</el-button>
+        </div>
+      </el-col>
+    </el-row>
+    <!-- 弹框 -->
+    <div
+      @mouseout="mouseout22"
+      @mousemove="mousemove22"
+      v-if="cascaderPanel"
+    >
+      <el-cascader-panel
+        :style="{width:'360px',position: 'absolute',top:top+'px',left:left+'px','background-color':'#fff',margin:'40px',}"
+        :props="{ expandTrigger: 'hover' }"
+        :options="options2"
+        @change="takuangchangge"
+      ></el-cascader-panel>
+    </div>
+
+    <el-dialog
+      title="添加新元素字段"
+      :visible="AddNewElementField=='新增元素'"
+      width="60%"
+      :before-close="handleClose"
+      :modal-append-to-body="false"
+      style="z-index: 999999;"
+    >
+      <div>
+        <i
+          @click="addyuansu"
+          class="el-icon-circle-plus marbottom10"
+          style="color:red; font-size:24px; float: right;cursor: pointer;"
+        ></i>
+        <el-table
+          :data="tableData"
+          height="250"
+          border
+          style="width: 100%"
+        >
+          <el-table-column
+            prop="date"
+            label="清表元素名称"
+          >
+            <template slot-scope="scope">
+              <el-input
+                v-model="scope.row.eName"
+                placeholder="请输入内容"
+              ></el-input>
+            </template>
+          </el-table-column>
+          <el-table-column
+            prop="date"
+            label="元素数据类型"
+          >
+            <template slot-scope="scope">
+              <el-select
+                v-model="scope.row.eType"
+                placeholder="请选择"
+              >
+                <el-option
+                  v-for="item in dataType"
+                  :key="item.dictKey"
+                  :label="item.dictValue"
+                  :value="item.dictKey"
+                >
+                </el-option>
+              </el-select>
+            </template>
+          </el-table-column>
+          <!-- <el-table-column
+            prop="date"
+            label="长度"
+            align="center"
+          >
+            <template slot-scope="scope">
+              <el-input
+                v-model="scope.row.date"
+                placeholder="请输入内容"
+              ></el-input>
+            </template>
+          </el-table-column> -->
+          <el-table-column
+            prop="date"
+            align="center"
+            width="120"
+            label="操作"
+          >
+            <template slot-scope="scope">
+              <el-button
+                type="danger"
+                size="mini"
+                @click="deleteziduan(scope.$index)"
+              >删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <span
+        slot="footer"
+        class="dialog-footer"
+      >
+        <el-button @click="handleClose()">取 消</el-button>
+        <el-button
+          type="primary"
+          :disabled="tableData.length===0"
+          @click="pushNewElementField()"
+        >确 定</el-button>
+      </span>
+    </el-dialog>
+  </basic-container>
+</template>
+
+<script>
+import { getExcelHtml } from '@/api/exctab/excelmodel'
+import { getElementInfoByTabId, submit, dictionarydataType, submitBatch } from '@/api/exctab/editelement'
+import Vue from 'vue'
+export default {
+  data () {
+    return {
+      dataType: [],//数据类型
+      tag: false,
+      table: {
+
+      },//table表鼠标右键事件
+      AddNewElementField: '',
+      setTimeout: '',
+      top: 0,
+      left: 0,
+      cascaderPanel: false,
+      options: [],
+      value: '',
+      tableData: [],//table表
+      options2: [{
+        value: '编辑元素字段',
+        label: '编辑元素字段',
+        children: [{
+          value: '替换元素',
+          label: '替换元素'
+        }, {
+          value: '新增元素',
+          label: '新增元素'
+        }, {
+          value: '删除文本信息',
+          label: '删除文本信息'
+        }]
+      }, {
+        value: '公式配置',
+        label: '公式配置',
+      }],
+    }
+  },
+  mounted () {
+    this.cop()
+  },
+  created () {
+    this.getElementInfoByTabId()
+  },
+  methods: {
+    takuangchangge (value) {//切换事件
+      if (value[value.length - 1] == '替换元素') {
+        this.AddNewElementField = '替换元素'
+        this.cascaderPanel = false
+        clearTimeout(this.setTimeout)
+      } else if (value[value.length - 1] == '新增元素') {
+        if (this.dataType.length == 0) {
+          this.dictionarydataType()
+        }
+        this.tableData = []
+        this.AddNewElementField = '新增元素'//打开新增元素弹框
+        this.cascaderPanel = false
+        clearTimeout(this.setTimeout)
+      } else if (value[value.length - 1] == '删除文本信息') {
+        this.deleteelement()
+        this.cascaderPanel = false
+        clearTimeout(this.setTimeout)
+      } else if (value[value.length - 1] == '公式配置') {
+        this.cascaderPanel = false
+        clearTimeout(this.setTimeout)
+      }
+    },
+    mouseout22 () {//鼠标移出事件
+      clearTimeout(this.setTimeout)
+      this.setTimeout = setTimeout(() => {
+        this.cascaderPanel = false
+      }, 500)
+    },
+    mousemove22 () {//鼠标移入事件
+      clearTimeout(this.setTimeout)
+      this.setTimeout = setTimeout(() => {
+        this.cascaderPanel = true
+      }, 500)
+    },
+    RightClick2 (tr, td, x1, x2, y1, y2) {
+      // console.log(window.event.clientX, window.event.clientY);
+      this.table = {
+        tr,
+        td
+      }
+      this.top = window.event.clientY - 80
+      this.left = window.event.clientX - 300
+      // console.log(tr, td, x1, x2, y1, y2);
+      this.cascaderPanel = true
+      clearTimeout(this.setTimeout)
+      this.setTimeout = setTimeout(() => {
+        this.cascaderPanel = false
+      }, 3000)
+    },
+    deleteelement () {//删除元素提示
+      let _that = this
+      this.$confirm('确认删除该元素？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        _that.submit({
+          name: '/',
+          tabId: this.$route.query.pkeyId,
+          tdIndex: this.table.td,
+          trIndex: this.table.tr,
+        })
+      }).catch(() => {
+        _that.$message({
+          type: 'info',
+          message: '已取消删除'
+        });
+      });
+    },
+    async cop () {
+      let _that = this
+      var MyComponent = await Vue.extend({
+        template: localStorage.getItem('editElement'),
+        methods: {
+          RightClick (tr, td, x1, x2, y1, y2) {//鼠标右键事件
+            _that.RightClick2(tr, td, x1, x2, y1, y2)
+          },
+        }
+      })
+      var component = new MyComponent().$mount()
+      let na = document.getElementById('parent')
+      document.getElementById('parent').appendChild(component.$el);
+    },
+    async copss () {
+      var MyComponent = await Vue.extend({
+        template: localStorage.getItem('editElement')
+      })
+      var component = new MyComponent().$mount()
+      let na = document.getElementById('parent')
+      na.innerHTML = `<div
+        class='parent'
+        id='parent'
+      ></div>`
+      document.getElementById('parent').appendChild(component.$el);
+    },
+    async dictionarydataType () {
+      const { data: res } = await dictionarydataType()
+      console.log(res);
+      if (res.code == 200) {
+        this.dataType = res.data
+      }
+    },
+    //#region 左侧替换元素
+    cancelReplace () {//替换元素取消按钮
+      this.AddNewElementField = ''
+    },
+    saveReplace () {//保存按钮
+      if (this.value) {
+        this.tag = true
+        this.submit({
+          id: this.value,
+          tabId: this.$route.query.pkeyId,
+          tdIndex: this.table.td,
+          trIndex: this.table.tr,
+        })
+      } else {
+        this.$message({
+          type: "error",
+          message: "请选择要替换的元素"
+        })
+      }
+    },
+    async getElementInfoByTabId () {//获取字段信息
+      const { data: res } = await getElementInfoByTabId({ tabId: this.$route.query.id })
+      console.log(res);
+      if (res.code === 200) {
+        this.options = res.data
+      }
+    },
+    async submit (da) {//保存替换元素
+      const { data: res } = await submit(da)
+      console.log(res);
+      if (res.code == 200) {
+        const { data: res } = await getExcelHtml({ excelId: this.$route.query.excelId })
+        console.log(res);
+        if (res.code === 200) {
+          this.tag = false
+          this.value = ''
+          this.options = []
+          localStorage.setItem('editElement', res.data)
+          this.getElementInfoByTabId()
+          this.copss()
+        }
+      }
+    },
+    //#endregion
+
+    //#region 弹框事件
+    handleClose () {
+      this.tableData = []
+      this.AddNewElementField = ''
+    },
+    addyuansu () {//新增元素
+      this.tableData.unshift({ eName: '', eType: '' })
+    },
+    deleteziduan (key) {//删除新增元素弹框字段
+      this.tableData.splice(key, 1)
+    },
+    pushNewElementField () {//确定添加按钮
+      if (this.tableData) {
+        let tag = true
+        this.tableData.forEach(val => {
+          if (!val | !val | !val) {
+            tag = false
+          }
+        })
+        if (tag) {
+          this.submitBatch({
+            initTableName: this.$route.query.initTableName,
+            id: this.$route.query.id,
+            listData: this.tableData,
+          })
+        } else {
+          this.$message({
+            type: 'eroor',
+            message: '请填写所有字段'
+          });
+        }
+      }
+    },
+    async submitBatch (da) {
+      const { data: res } = await submitBatch(da)
+      console.log(res);
+      if (res.code == 200) {
+
+      }
+    }
+    //#endregion
+  },
+  watch: {
+    'options' () {
+      if (this.options) {
+        this.options2 = [{
+          value: '编辑元素字段',
+          label: '编辑元素字段',
+          children: [{
+            value: '替换元素',
+            label: '替换元素'
+          }, {
+            value: '新增元素',
+            label: '新增元素'
+          }, {
+            value: '删除文本信息',
+            label: '删除文本信息'
+          }]
+        }, {
+          value: '公式配置',
+          label: '公式配置',
+        }]
+      } else {
+        this.options2 = [{
+          value: '编辑元素字段',
+          label: '编辑元素字段',
+          children: [{
+            value: '新增元素',
+            label: '新增元素'
+          }, {
+            value: '删除文本信息',
+            label: '删除文本信息'
+          }]
+        }, {
+          value: '公式配置',
+          label: '公式配置',
+        }]
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.editElement {
+  .header {
+    color: rgb(240, 114, 10);
+  }
+  .tihuan {
+    margin-top: 15px;
+    margin-bottom: 10px;
+    font-family: SourceHanSansSC;
+    font-weight: 400;
+    font-size: 14px;
+    color: rgb(16, 16, 16);
+    font-style: normal;
+    letter-spacing: 0px;
+    line-height: 20px;
+    text-decoration: none;
+  }
+}
+</style>

src/views/manager/projectinfo/tree.vue

@@ -182,7 +182,7 @@
             ></el-table-column>
           </el-table>
           <p>
-            <span>当前已创建的元素表</span>
+            <span>当前项目信息表</span>
             <el-button
               @click="showFormElement"
               type="text"
@@ -208,7 +208,7 @@
             <el-table-column
               align="center"
               prop="elementTotal"
-              label="元素总量"
+              label="字段总量"
             ></el-table-column>
             <el-table-column
               align="center"
@@ -279,7 +279,7 @@
               <template slot-scope="scope">
                 <el-link
                   type="primary"
-                  @contextmenu.prevent.native="rightClick()"
+                  @click="rightClick(scope.row.pkeyId,scope.row.excelId,scope.row.id,scope.row.initTableName,)"
                 >编辑元素</el-link>
                 <el-link
                   class="mg-l-10"
@@ -598,7 +598,7 @@
           <el-table-column
             align="center"
             prop="eName"
-            label="元素名称"
+            label="字段名称"
           >
             <template slot-scope="scope">
               <el-input
@@ -769,7 +769,7 @@
         <el-table-column
           align="center"
           prop="eName"
-          label="元素名称"
+          label="字段信息"
         >
         </el-table-column>
         <el-table-column
@@ -833,7 +833,7 @@
         <el-table-column
           align="center"
           prop="eName"
-          label="元素名称"
+          label="字段信息"
         >
           <template slot-scope="scope">
             <el-input
@@ -1009,7 +1009,7 @@
         <el-table-column
           align="center"
           prop="eName"
-          label="元素名称"
+          label="字段信息"
         >
         </el-table-column>
         <el-table-column
@@ -2204,8 +2204,24 @@ export default {
     //#endregion
 
     //#region 编辑元素
-    rightClick () {
-      console.log('sss');
+    async rightClick (pkeyId, excelId, id, initTableName) {
+      await this.getExcelHtml2(excelId)
+      this.$router.push({
+        path: '/project/editElement',
+        query: {
+          pkeyId: pkeyId,
+          excelId: excelId,
+          id: id,
+          initTableName
+        }
+      })
+    },
+    async getExcelHtml2 (excelId) {
+      const { data: res } = await getExcelHtml({ excelId })
+      console.log(res);
+      if (res.code === 200) {
+        localStorage.setItem('editElement', res.data)
+      }
     },
     //#endregion
   },

src/views/manager/projectinfo/treeTemplate/dynamicExcel.vue

@@ -32,10 +32,14 @@
     </div>
     <div class="excelBox">
       <div
+        style="width:60%;"
         class='parent'
         id='parent'
       ></div>
-      <div class="excelRight">
+      <div
+        class="excelRight"
+        style="width:30%;margin-left:6%;"
+      >
         <setInputTPT
           v-if="setUptype===0"
           :pkeyId='pkeyId'
@@ -55,7 +59,7 @@ import electronicSignature from './template/electronicSignature.vue'
 import setFormula from './template/setFormula.vue'
 import editDefault from './template/editDefault.vue'
 import Vue from 'vue'
-import dictVue from '../../../system/dict.vue'
+// import dictVue from '../../../system/dict.vue'
 export default {
   props: ['pkeyId'],
   data () {

vue.config.js

@@ -27,9 +27,9 @@ module.exports = {
             '/api': {
                 //本地服务接口地址
                 // target: 'http://localhost',
-                target: 'http://192.168.4.6',
+                // target: 'http://192.168.4.6',
                 // target: 'http://47.110.251.215:8090',
-                // target: 'http://192.168.4.44',
+                target: 'http://192.168.4.12',
                 //远程演示服务地址,可用于直接启动项目
                 //target: 'https://saber.bladex.vip/api',
                 ws: true,