saber/src/views/manager/projectinfo/independent.vue

<template>
  <div style="height: 100%" class="flexStar">
    <div class="boxswai" style="width: 26%; padding-left: 0px">
      <div class="boxnei" style="display: flex; flex-direction: column">
        <h3>引用元素表</h3>
        <div style="overflow: auto; flex: 1">
          <avue-tree
            :option="treeOption"
            :data="treeData"
            @node-click="nodeClick"
          ></avue-tree>
        </div>
      </div>
    </div>
    <div
      class="boxswai"
      style="width: 74%; padding-left: 0px; padding-right: 0px"
    >
      <div class="boxnei">
        <div
          class="marleft10"
          style="height: 100%; display: flex; flex-direction: column"
        >
          <div class="martop20" v-if="true" style="flex: 1">
            <avue-crud
              :data="loadData"
              :option="loadOption"
              v-model="obj"
              ref="crud"
              @selection-change="selectionChange"
            >qingb
              <template slot="menuRight">
                            <el-button
                              type="primary"
                              size="small"
                              plain
                              @click="quteEle"
                            >引用元素表单库
                            </el-button>
                      
                          <el-button
                            size="small"
                            type="danger"
                            plain
                            
                            @click="handleDelete"
                          >删除表单
                          </el-button>
              </template>
                <template slot-scope="{type,size,row}" slot="menu">
                      <el-button  :size="size" :type="type" @click="Associationlist(row)">关联清表</el-button>
                      <el-button  :size="size" :type="type" @click="rightClick(
                          row.pkeyId,
                          row.excelId,
                          row.id,
                          row.initTableName
                        )">编辑元素</el-button>
                      <el-button  :size="size" :type="type" @click="adjustExcel(row.pkeyId,row.excelId)">调整表单</el-button>
                      <el-button  :size="size" :type="type" @click="handleEditFormula(row)">编辑公式</el-button>
                      
                </template>
            </avue-crud>
          </div>
        </div>
      </div>
    </div>
    <Qute ref="Qute"> </Qute>
    <Relation ref="Relation" :GLExcelFrom="GLExcelFrom"/>
    <!-- 编辑元素 -->
       <!-- 编辑元素 -->
    <el-dialog
      title="　"
      :visible.sync="editElementVisible"
      fullscreen
      append-to-body
      class="full-dialog"
    >
      <EditElement
        :pkeyId="editElementQuery.pkeyId"
        :excelId="editElementQuery.excelId"
        :id="editElementQuery.id"
        :initTableName="editElementQuery.initTableName"
        :pid="editElementQuery.pid"
        :wbsid="editElementQuery.wbsid"
        :nodeid="editElementQuery.nodeid"
        @hideDialog="editElementVisible = false"
        v-if="editElementVisible"
      ></EditElement>
    </el-dialog>
      <!-- 调整表单模板 -->
    <div v-if="excelHtml" class="excelHtml">
      <dynamicExcel
        @remove="removeExcel"
        v-if="excelHtml"
        :pkeyId="GLExcelFrom.id"
      />
    </div>
<!-- 元素公式 -->
    <el-dialog
      title="元素公式"
      :visible.sync="editEleFormulaVisible"
      width="800px"
      append-to-body
      :close-on-click-modal="false"
    >
      <div class="flex mg-b-10">
        <el-input
          v-model="formulaInput"
          placeholder="请输入名称"
          size="samll"
          clearable
          @clear="searchFormulaName"
        ></el-input>
        <el-button type="info" class="mg-l-10" @click="searchFormulaName"
          >搜索</el-button
        >
      </div>
      <el-table
        :data="editEleListFilter"
        border
        style="width: 100%"
        height="400px"
      >
        <el-table-column align="center" prop="eName" label="字段信息">
        </el-table-column>
        <el-table-column align="center" label="操作" width="200">
          <template slot-scope="scope">
            <el-link
              :type="scope.row.isSaveFormula == 1 ? 'warning' : 'primary'"
              @click="toFormulaEdit(scope.row)"
              >公式配置</el-link
            >
            <!-- <el-link
              class="mg-l-10"
              type="danger"
              @click="delEleRowHandle(scope.$index,editEleListFilter)"
            >删除</el-link> -->
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
      <!-- 公式 -->
    <el-dialog
      title="元素公式"
      :visible.sync="formulaCompVisible"
      fullscreen
      append-to-body
      class="full-dialog"
    >
      <FormulaEdit
        :wbsid="id"
        :nodeid="curTreeData.id"
        :eleid="formulaCurRow.id"
        :projectid="projectid"
        @hideDialog="formulaCompVisible = false"
        v-if="formulaCompVisible"
      ></FormulaEdit>
    </el-dialog>
  </div>
</template>

<script>
import {
  detailExcel,
  excelType,
  tabLazytree,
  wbstree,
  getWbsTypeList,
} from "@/api/exctab/excelmodel";
import {
  updateBatchNodeTableInfo,
  selectByNodeTable,
  selectFormElements,
} from "@/api/manager/wbstree";
import {
  getList,
  tabLazytreeAll,
  saveLinkTab,
  getExcelHtml,
} from "@/api/exctab/excelmodel"
import {
  getDetail,} from "@/api/manager/wbsprivate";
import Qute from "./qutediaolog/qute.vue";//引入元素库
import Relation from './qutediaolog/relation.vue'//关联清表
import EditElement from "@/views/manager/projectinfo/editElement/editElement.vue";//编辑元素
import dynamicExcel from "./treeTemplate/dynamicExcel.vue";
import FormulaEdit from "@/views/formula/edit.vue";

export default {
   components: { dynamicExcel, EditElement, Qute,Relation,FormulaEdit },
  computed:{
     ids () {
      let ids = [];
      this.selectionList.forEach(ele => {
        ids.push(ele.id);
      });
      return ids.join(",");
    }
  },
  data() {
    return {
      dialogVisible: false,
      obj: {},
      treeData: [
        {
          value: 0,
          label: "一级部门",
          children: [
            {
              value: 1,
              label: "一级部门1",
            },
          ],
        },
      ],
      treeOption: {
        defaultExpandAll: true,
        filter: false,
        addBtn: false,
        formOption: {
          labelWidth: 100,
          column: [
            {
              label: "自定义项",
              prop: "test",
            },
          ],
        },
        props: {
          labelText: "标题",
          label: "label",
          value: "value",
          children: "children",
        },
      },
      loadData: [],
      loadData1: [
        {
          tableName: "张三",
          formatTableType: "男",
        },
      ],
      loadData2: [
        {
          tableName: "李四2",
          formatTableType: "女",
        },
      ],
      loadOption: {
        height: "auto",
        calcHeight: 30,
        tip: false,
        searchShow: false,
        searchMenuSpan: 6,
        border: true,
        index: true,
        viewBtn: false,
        selection: true,
        editBtn: false,
        delBtn: false,
        addBtn: false,
        menu: true,
        menuWidth:300,

        dialogClickModal: false,
        column: [
          {
            label: "表单名称",
            prop: "tableName",

            editDisplay: false,
            addDisplay: false,
          },
          {
            label: "元素表类型",
            prop: "formatTableType",
            // search: true,
            rules: [
              {
                required: true,
                message: "请输入名称",
                trigger: "blur",
              },
            ],
          },

          {
            label: "元素总量",
            prop: "elementTotal",

            editDisplay: false,
            addDisplay: false,
            rules: [
              {
                message: "请输入表数量",
                trigger: "blur",
              },
            ],
          },
          {
            label: "所书方",
            prop: "formatOwner",

            editDisplay: false,
            addDisplay: false,
            rules: [
              {
                message: "请输入表数量",
                trigger: "blur",
              },
            ],
          },
          {
            label: "填报率",
            prop: "fillRate",

            editDisplay: false,
            addDisplay: false,
            rules: [
              {
                message: "请输入表数量",
                trigger: "blur",
              },
            ],
          },
        ],
      },
      selectionList:[],
      GLExcelFrom: {
          id: "",
          name: "",
          search: "", //搜素框舒服的值
          ids: "",
          excelId: "",
          initTableName: "",
      },
      //编辑元素弹窗
      editElementVisible: false, //编辑元素弹框
      editElementQuery: {
        pkeyId: "",
        excelId: "",
        id: "",
        initTableName: "",
        pid: "",
        wbsid: "",
        nodeid: "",
      }, //
      excelHtml:false,//调整表单
      curEleTable: {},//编辑元素公式
      editEleFormulaVisible: false,//元素公式
      formulaInput: "",
      editEleListFilter: [],
      editEleListAll: [],
      formulaCurRow: {}, //当前元素
      formulaCompVisible:false,
        //#region公式
      id: "",
      curTreeData: {},
      projectid:''


    };
  },
  created() {
    this.loadData = this.loadData1;
  },
  methods: {
    nodeClick(data) {
      if (data.value == 0) {
        this.loadData = this.loadData1;
      } else if (data.value == 1) {
        this.loadData = this.loadData2;
      }
      this.$message.success(JSON.stringify(data));
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    //引用元素表单库
    quteEle(){
      this.$refs.Qute.show()
    },
    handleDelete () {
      if (this.selectionList.length === 0) {
        this.$message.warning("请选择至少一条数据");
        return;
      }
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          // return remove(this.ids);
          console.log(this.ids,'this.ids删除');
        })
        .then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          this.$refs.crud.toggleSelection();
        });
    },
    selectionChange (list) {
    this.selectionList = list;
    },
    selectionClear () {
      this.selectionList = [];
      this.$refs.crud.toggleSelection();
    },
    //关联清表
     Associationlist(row) {
       console.log('关联清表');
       this.$refs.Relation.show()
      this.GLExcelFrom.name = row.modeId;
   
      this.GLExcelFrom.id = row.pkeyId;
      this.GLExcelFrom.excelId =row.excelId;
      this.GLExcelFrom.ids = row.id;
      this.GLExcelFrom.initTableName =row.initTableName;
      this.GLExcelFrom.excelId=row.excelId
    },
       //#region 编辑元素
    async rightClick(pkeyId, excelId, id, initTableName) {
      // await this.getExcelHtml2(pkeyId);
      // console.log('编辑元素');
      // this.editElementQuery.pkeyId = pkeyId;
      // this.editElementQuery.excelId = excelId;
      // this.editElementQuery.id = id;
      // this.editElementQuery.initTableName = initTableName;
      // this.editElementQuery.pid = this.$route.query.pid;
      // this.editElementQuery.wbsid = this.$route.query.wbsid;
      // this.editElementQuery.nodeid = this.curTreeData.id;

      this.editElementVisible = true;
    },
    async getExcelHtml2(pkeyId) {
      const { data: res } = await getExcelHtml({ pkeyId });
      console.log(res);
      if (res.code === 200) {
        localStorage.setItem("editElement", res.data);
      }
    },
      //#region 调整表单
    adjustExcel(pkeyId, excelId) {
      this.excelHtml=true
      // console.log('调整表单');
      // //调整表单
      // this.GLExcelFrom.id = pkeyId;
      // this.getExcelHtml(pkeyId);
    },
    handleEditFormula(row) {
      console.log('公式');
      this.curEleTable = row;
      selectFormElements(this.curEleTable.id).then((res) => {
        this.editEleListFilter = res.data.data;
        this.editEleListAll = [].concat(this.editEleListFilter);
      });
      this.editEleFormulaVisible = true;
    },
    //搜索 筛选
    searchFormulaName() {
      this.editEleListFilter = this.editEleListAll.filter((ele) => {
        return ele.eName.indexOf(this.formulaInput) > -1;
      });
    },
   async getExcelHtml(pkeyId) {
      const { data: res } = await getExcelHtml({ pkeyId });
      console.log(res);
      if (res.code === 200) {
        localStorage.setItem("excelHtml", res.data);
        this.adjustmentExcel = res.data;
        this.excelHtml = true;
      }
    },
    removeExcel() {
      this.excelHtml = false;
    },
        //跳转到公式配置页面
    toFormulaEdit(row) {
      // this.$router.push({
      //   path: '/formula/edit',
      //   query: {
      //     wbsid: this.id,
      //     eleid: row.id,
      //     nodeid:this.curTreeData.id,
      //     projectid:this.projectid
      //   }
      // });

      this.formulaCurRow = row;
      this.formulaCompVisible = true;
    },
    // getNodeDetail(data, node) {
    //   let parentName = "";
    //   if (node.parent.data) {
    //     parentName = node.parent.data.title;
    //   }
    //   this.curTreeData = data;
    //   this.curTreeNode = node;
    //   this.curTreeData.parentName = parentName;
    //   getDetail(data.id, this.id, this.projectid).then((res) => {
    //     res.data.data.parentName = parentName;
    //     this.tableData = [res.data.data];
    //     this.nodeDetail = Object.assign({}, res.data.data);
    //   });
    //   this.updateNodeTable();

    //   //获取节点展开路径
    //   this.getExpandedKeys(node);
    // },

  },

  mounted() {
    // this.heightss = this.$refs.rulesss.clientHeight
  },
};
</script>

<style scoped lang="scss">
//调整表单样式
.excelHtml {
  position: absolute;
  z-index: 999999;
  top: 50px;
  left: 0px;
  width: 100%;
  height: 100%;
}
.marleft10 {
  margin-left: 10px;
}
/deep/.el-tree-node__expand-icon {
  font-size: 16px;
}
.colorblue {
  color: rgb(0, 82, 217);
}

.treecontent /deep/.el-scrollbar {
  height: 100%;
}

.el-scrollbar {
  height: 100%;
}

.rightHeader {
  display: flex;
  justify-content: flex-start;
  align-items: top;
  font-size: 14px;
  background-color: #fff;

  .excelname {
    box-sizing: border-box;
    min-width: 200px;
    height: 28px;
    border: 1px solid rgb(220, 220, 220);
    padding: 0 10px;
    border-radius: 3px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

.dialogModel {
  .dialogBox {
    .middle {
      display: flex;

      .left {
        border: 1px solid rgb(220, 220, 220);
        border-radius: 3px;
        height: 500px;
        width: 49%;

        .select {
          box-sizing: border-box;
          display: flex;
          justify-content: center;
          padding: 5px 0;
          border-bottom: 1px solid #e0e0e0;
        }
        .leftscroll {
          height: 450px;
          overflow-y: scroll;
        }
      }

      .right {
        height: auto;
        height: 60px;
        max-height: 500px;
        margin-left: 2%;
        // height: 500px;
        border-radius: 3px;
        td {
          box-sizing: border-box;
          padding: 5px 10px;
          height: 30px;
          line-height: 30px;
        }
      }
    }
  }

  .btbox {
    margin-top: 20px;
    display: flex;
    justify-content: center;
  }
}

.rightBox {
  flex: 1;
}

.boxswai {
  height: 100%;
  box-sizing: border-box;
  padding-bottom: 10px;
}
</style>