编辑公式页面

src/views/formula/component/formulaTemplate.vue

@@ -0,0 +1,58 @@
+<template>
+  <div>
+    <div>{{template}}</div>
+    <div>{{formulainfo.example}}</div>
+    <div v-for="(item,index) in formulainfo.arguments" :key="index" class="mg-t-20">
+      <div>
+        <span>参数{{(index+1)}}({{formulainfo.template.args[index].m}})：</span>
+        <span>
+          <template v-if="(typeof item)=='object'">
+            元素
+          </template>
+          <template v-else>
+            <el-input v-model="formulainfo.arguments[index]" placeholder="请输入内容" style="width:200px"></el-input>
+          </template>
+        </span>
+        <el-link type="primary" @click="changeType('text')" class="mg-l-10">输入文本</el-link>
+        <el-link type="primary" @click="changeType('ele')" class="mg-l-10">选择元素</el-link>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "formulaTemplate",
+  props: {
+    formulainfo: {
+      type: Object,
+      default: function () {
+        return {};
+      }
+    },
+  },
+  data(){
+    return{
+      template:'',
+
+    }
+  },
+  mounted(){
+    this.template = this.formulainfo.template.ft;
+    //console.log(this.formulainfo.template)
+    this.formulainfo.template.args.forEach(element => {
+      //console.log(element)
+      this.template = this.template.replace(element.key,element.m)
+    });
+  },
+  methods:{
+    //切换选择的状态
+    changeType(){
+
+    }
+  }
+}
+</script>
+<style scoped lang="scss">
+  
+</style>

src/views/formula/edit.vue

@@ -31,13 +31,25 @@
     <div class="box-dashed">
       <div class="mg-b-20">函数公式</div>
       <div class="edit-text">
-        <span>默认A</span>
+        <span>
+          <formula-item 
+            v-for="(item,index) in resultFormula" :key="index" 
+            :item="item" @click="obj => equationClick(obj,index,'resultFormula')"
+          >
+          </formula-item>
+        </span>
         <span>=</span>
-        <span>元素B</span>
+        <span>
+          <formula-item 
+            v-for="(item,index) in processFormula" :key="index" 
+            :item="item" @click="obj => equationClick(obj,index,'processFormula')"
+          >
+          </formula-item>
+        </span>
       </div>
       <div class="flex jc-sb">
         <div></div>
-        <div><el-button type="info" size="small" @click="operationVisible = true">重置函数</el-button></div>
+        <div><el-button type="info" size="small" @click="operationEdit">重置函数</el-button></div>
       </div>
     </div>
     <div v-show="operationVisible" class="operation-box">
@@ -101,12 +113,12 @@
           </el-col>
         </el-row>
         <div class="text-align-c">
-          <el-button size="small" type="primary">保存</el-button>
+          <el-button size="small" @click="operationHandle" type="primary">保存</el-button>
           <el-button size="small" @click="operationVisible = false">取消</el-button>
         </div>
       </div>
     </div>
-    <div v-show="!operationVisible">
+    <div v-show="!operationVisible && !showFunDetail">
       <div class="box-dashed">
         <div class="mg-b-20">函数公式运算执行溯源</div>
         <div>
@@ -139,6 +151,61 @@
         <el-button type="primary">保存</el-button>
       </div>
     </div>
+    <div v-if="!operationVisible && showFunDetail">
+      <el-tabs v-model="actiFunIndex">
+        <el-tab-pane v-for="(item,index) in equationSelectEle.children" :key="item.name" :label="item.name" :name="index.toString()">
+          <formula-template :formulainfo="item">
+            
+          </formula-template>
+        </el-tab-pane>
+      </el-tabs>
+    </div>
+
+    <el-dialog title="选择元素" :visible.sync="chooseEleVisible" width="800px" append-to-body :close-on-click-modal="false">
+      <div>
+        <el-row :gutter="20">
+          <el-col :span="8">
+            <el-card shadow="never">
+              <el-scrollbar style="height: 460px">
+                <el-tree
+                  class="filter-tree"
+                  lazy
+                  :load="loadNode"
+                  @node-click="getNodeDetail"
+                  :props="defaultProps"
+                  :expand-on-click-node="false"
+                  highlight-current
+                  node-key="id"
+                  ref="tree"
+                >
+                </el-tree>
+              </el-scrollbar>
+            </el-card>
+          </el-col>
+          <el-col :span="16">
+            <el-select v-model="eleTableId" @change="getTableEle" placeholder="请选择元素表">
+              <el-option  v-for="item in eleTableList" :key="item.id" :label="item.tableName" :value="item.id"></el-option>
+            </el-select>
+            <div class="mg-t-10 mg-b-10 no-mb-col">
+              <el-scrollbar style="height: 210px">
+                <el-row>
+                  <el-col :span="6" v-for="item in eleList" :key="item.id">
+                    <div class="ele-box">
+                      <span>{{item.eName}}</span>
+                      <el-checkbox v-model="item.checked" @change="value => eleCheckHandle(value,item)"></el-checkbox>
+                    </div>
+                  </el-col>
+                </el-row>
+              </el-scrollbar>
+            </div>
+          </el-col>
+        </el-row>
+        <div class="text-align-c">
+          <el-button size="small" @click="chooseEleHandle" type="primary">保存</el-button>
+          <el-button size="small" @click="chooseEleVisible = false">取消</el-button>
+        </div>
+      </div>
+    </el-dialog>
   </basic-container>
 </template>
 
@@ -146,16 +213,20 @@
 import { getLazytree,selectByNodeTable,selectFormElements} from "@/api/manager/wbstree";
 import { getProjectList } from "@/api/manager/projectinfo";
 import { findContractByProjectId } from "@/api/manager/contractinfo";
+import { getDetail as getEleDeatil } from "@/api/manager/wbsformelement";
 import { getTypeMap } from "@/api/formula/formula";
 import {mapGetters} from "vuex";
 import formulaItem from "./component/formulaItem"
+import formulaTemplate from "./component/formulaTemplate"
 export default {
   components: {
-    formulaItem
+    formulaItem,
+    formulaTemplate
   },
   data() {
     return {
       wbsid: "", //从哪个wbs树过来的
+      eleid: "", //元素id
 
       isRetain: false, //是否保留小数
       retainNum: 2, //保留几位小数
@@ -173,7 +244,7 @@ export default {
         children: "children",
         label: "title",
         isLeaf: function (data) {
-          return !data.hasChildren;
+          return !data.hasChildren || (data.isExistForm==1);
         },
       },
       eleTableId:'',//选中的元素表id
@@ -182,6 +253,13 @@ export default {
       selectEleFormula:[],
       curSeleEleIndex:0,//公式文字里面选中的元素索引
 
+      resultFormula:[],//=等号左边的数组
+      processFormula:[],//=等号右边的数组
+      processType:'',//选中的元素在等号哪边
+      processSelectIndex:0,//选中的索引
+      actiFunIndex:0,//元素下挂载的计算式的索引
+      chooseEleVisible:false,//选择元素弹窗
+
       symbolReg:/(\+|-|\*|\/)（.+）/,
     };
   },
@@ -195,13 +273,33 @@ export default {
     //   })
     //   return text
     // }
+
+    //等式中选中的元素
+    equationSelectEle:function(){
+      if(this.processType){
+        return this[this.processType][this.processSelectIndex];
+      }else{  
+        return null;
+      }
+    },
+
+    //是否显示元素下挂载的计算式信息
+    showFunDetail:function(){
+      if(this.equationSelectEle && this.equationSelectEle.children && this.equationSelectEle.children.length>0){
+        return true;
+      }else{
+        return false;
+      }
+    }
   },
   created() {
     this.wbsid = this.$route.query.wbsid;
+    this.eleid = this.$route.query.eleid;
     this.init();
   },
   methods: {
     init() {
+      this.getEleDeatil();
       this.getProjectList();
       this.getTypeMap();
     },
@@ -234,10 +332,12 @@ export default {
       //console.log(indexPath,'indexPath')
       if(this.operationVisible){
         this.openerationSelect(index,indexPath)
+      }else{
+        this.equationSelect(index,indexPath)
       }
     },
 
-    //在选择元素模式下点选公式
+    //在选择元素模式下点选计算式
     openerationSelect(index,indexPath){
       if(indexPath[0]!='基础运算'){
         this.$message({
@@ -265,6 +365,11 @@ export default {
       }
     },
 
+    operationEdit(){
+      this.selectEleFormula= JSON.parse(JSON.stringify(this.processFormula));
+      this.operationVisible = true;
+    },
+
     eleAddFormula(){
       for (let i = 0; i < this.eleList.length; i++) {
         if (this.eleList[i].checked) {
@@ -283,7 +388,8 @@ export default {
           name:ele.eName,
           id:ele.id,
           selected:false,
-          tableElementKey:ele.tableElementKey
+          tableElementKey:ele.tableElementKey,
+          children:[],
         })
       }else if(ele.template && ele.example){
         //运算符号
@@ -343,6 +449,56 @@ export default {
       }
     },
 
+    //赋值给等号右边的数组
+    operationHandle(){
+      this.processFormula = JSON.parse(JSON.stringify(this.selectEleFormula));
+      this.operationVisible = false;
+    },
+
+    //点选等式中的元素
+    equationClick({selected,item},index,arrName){
+      if(selected){
+        this.resultFormula.forEach((ele)=>{
+          ele.selected = false;
+        })
+        this.processFormula.forEach((ele)=>{
+          ele.selected = false;
+        })
+        this.processSelectIndex = index;
+        this.processType = arrName;
+        item.selected = true;
+      }else{
+        this.processType = '';
+      }
+    },
+
+    //在等式模式下点选计算式
+    equationSelect(index,indexPath){
+      if(!this.equationSelectEle && this.equationSelectEle.type == 'Element'){
+        this.$message({
+          type: "warning",
+          message: "请先选中元素"
+        });
+        return;
+      }
+
+      let formulaindex = Number(indexPath[1].split('-')[1])-1;
+      let expression = this.formulaList[indexPath[0]][formulaindex];
+      if(expression.type ==1){
+        return;
+      }
+      //console.log(JSON.parse(expression.template));
+      let obj = Object.assign({}, expression);
+      obj.template = JSON.parse(obj.template);
+      obj.arguments = new Array(obj.template.args.length);
+      this.equationSelectEle.children.push(obj);
+    },
+
+    //选择元素
+    chooseEleHandle(){
+
+    },
+
     getNodeDetail(data) {
       selectByNodeTable(data.id).then((res)=>{
         if(res.data.data.length){
@@ -353,6 +509,20 @@ export default {
       })
     },
 
+    getEleDeatil(){
+      getEleDeatil(this.eleid).then((res)=>{
+        let ele = res.data.data;
+        this.resultFormula = [{
+          type:'Element',
+          name:ele.eName,
+          id:ele.id,
+          selected:false,
+          tableElementKey:ele.tableElementKey,
+          children:[],
+        }]
+      })
+    },
+
     getTableEle(tableId){
       selectFormElements(tableId).then((res)=>{
         this.eleList = res.data.data;

src/views/manager/wbsinfo/edit.vue

@@ -372,7 +372,7 @@
           </el-table-column>
           <el-table-column align="center" label="操作" width="200">
             <template slot-scope="scope">
-              <el-link type="primary" @click="toFormulaEdit">公式配置</el-link>
+              <el-link type="primary" @click="toFormulaEdit(scope.row)">公式配置</el-link>
               <el-link class="mg-l-10" type="danger" @click="delEleRowHandle(scope.$index,editEleList)">删除</el-link>
             </template>
           </el-table-column>
@@ -1156,11 +1156,12 @@
           }
       },
 
-      toFormulaEdit(){
+      toFormulaEdit(row){
         this.$router.push({
           path:'/formula/edit',
           query:{
             wbsid:this.id,
+            eleid:row.id
           }
         });
       },