|
|
@@ -0,0 +1,411 @@
|
|
|
+<template>
|
|
|
+ <div style="height: 100%" class="flexStar">
|
|
|
+ <div class="boxswai" style="width: 15%;">
|
|
|
+ <div class="boxnei" style="display: flex; flex-direction: column">
|
|
|
+ <el-menu :default-active="activeIndex" class="el-menu-vertical-demo" @select="selectMajorDataType">
|
|
|
+ <el-menu-item :index="item.dictKey" v-for="(item, index) in majorDataTypeList">
|
|
|
+ <i class="el-icon-s-opportunity"></i>
|
|
|
+ <span>{{ item.dictValue }}</span>
|
|
|
+ </el-menu-item>
|
|
|
+
|
|
|
+ </el-menu>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="boxswai" style="width: 30%; padding-left: 0px">
|
|
|
+ <div class="boxnei" style="display: flex; flex-direction: column">
|
|
|
+ <h3>引用元素表</h3>
|
|
|
+ <div style="overflow: auto; flex: 1;height:500px">
|
|
|
+ <div class="flex">
|
|
|
+ <el-input size="small" placeholder="请输入你想搜索的表单" clearable @clear="clearfiltertext"
|
|
|
+ v-model="filterText">
|
|
|
+ </el-input>
|
|
|
+ <el-button size="small" class="mg-l-10" @click="treeFilter">搜索</el-button>
|
|
|
+ </div>
|
|
|
+ <el-tree style="display: inline-block;min-width: 100%;" class="filter-tree" :data="treeData"
|
|
|
+ :default-expanded-keys="defaultExpanded" @node-click="getNodeDetail" :props="defaultProps"
|
|
|
+ :expand-on-click-node="false" highlight-current node-key="id" ref="tree" lazy :load="treeLoadNode"
|
|
|
+ v-show="!allTreeShow">
|
|
|
+ </el-tree>
|
|
|
+ <el-tree style="width: 100%" ref="treeall" v-loading="treeloading" :data="allTreeData"
|
|
|
+ :props="defaultProps" @node-click="getNodeDetail" node-key="id" :expand-on-click-node="false"
|
|
|
+ :filter-node-method="filterNode" v-show="allTreeShow">
|
|
|
+ </el-tree>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="boxswai" style="width: 55%; 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">
|
|
|
+ <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%"
|
|
|
+ >
|
|
|
+ <el-table-column align="center" prop="eName" label="字段信息">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column align="center" label="操作" width="200">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button
|
|
|
+ v-if="!scope.row.isFile"
|
|
|
+ type="primary"
|
|
|
+ size="small"
|
|
|
+ plain
|
|
|
+ @click="setFiledate(scope.row)"
|
|
|
+ >设置为文件日期
|
|
|
+ </el-button>
|
|
|
+ <el-button
|
|
|
+ v-else
|
|
|
+ type="danger"
|
|
|
+ size="small"
|
|
|
+ plain
|
|
|
+ @click="quitFiledate(scope.row)"
|
|
|
+ >取消
|
|
|
+ </el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+
|
|
|
+import { dictionary } from "@/api/manager/archivetree";
|
|
|
+import {tabTypeLazyTree} from "@/api/manager/wbsprivate";
|
|
|
+import {getTableElments} from "@/api/manager/wbstree";
|
|
|
+
|
|
|
+
|
|
|
+export default {
|
|
|
+
|
|
|
+
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ majorDataTypeList: [], //内业资料类型
|
|
|
+ activeIndex:'1',
|
|
|
+ projectid: '',
|
|
|
+ wbsid: '',
|
|
|
+ treeData: [],
|
|
|
+ allTreeData:[],
|
|
|
+ filterText: '',
|
|
|
+ defaultExpanded: '',
|
|
|
+ allTreeShow: false,
|
|
|
+ defaultProps: {
|
|
|
+ children: "children",
|
|
|
+ label: "title",
|
|
|
+ isLeaf: function (data) {
|
|
|
+ return !data.hasChildren;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ curData:{
|
|
|
+
|
|
|
+ },
|
|
|
+ majorDataType:{
|
|
|
+
|
|
|
+ },
|
|
|
+ formulaInput:'',//搜索元素字段
|
|
|
+ editEleListFilter:[],
|
|
|
+ editEleListAll:[]
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.projectid = this.$route.query.pid;
|
|
|
+ this.wbsid = this.$route.query.wbsid;
|
|
|
+ this.major_data_type()//内业资料类型
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ async major_data_type() {//内业资料类型
|
|
|
+ const { data: res } = await dictionary({ code: 'major_data_type' })
|
|
|
+ console.log(res);
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.majorDataTypeList = res.data
|
|
|
+ }
|
|
|
+ },
|
|
|
+ selectMajorDataType(item){
|
|
|
+ console.log(item,'item');
|
|
|
+ this.treeloading = true;
|
|
|
+ this.allTreeShow = false;
|
|
|
+ this.activeIndex=item
|
|
|
+ let parentId=''
|
|
|
+ if(this.curData.hasChildren){
|
|
|
+ parentId=this.curData.id
|
|
|
+ }else{
|
|
|
+ // parentId=this.curData.parentId
|
|
|
+ parentId=''
|
|
|
+ }
|
|
|
+ tabTypeLazyTree({parentId:parentId,projectId:this.projectid,pcurrent:1,size:1000,titleName:this.filterText,majorDataType:this.activeIndex}).then((res) => {
|
|
|
+ this.treeloading = false;
|
|
|
+ this.allTreeData = res.data.data.records;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ clearfiltertext() {
|
|
|
+ this.allTreeShow = false;
|
|
|
+ },
|
|
|
+ getNodeDetail(data,node) {
|
|
|
+ this.curData=data;
|
|
|
+ console.log(data,'data');
|
|
|
+ this.getTableElmentsData()
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ treeLoadNode(node, resolve) {
|
|
|
+ let parentId = 12345678910;
|
|
|
+ if (node.level != 0) {
|
|
|
+ parentId = node.data.id;
|
|
|
+ }
|
|
|
+ // 开启 “加载中” 动画
|
|
|
+ if (node.level == 0) this.loading = true
|
|
|
+ tabTypeLazyTree({
|
|
|
+ parentId, projectId: this.projectid, pcurrent: 1, size: 1000,majorDataType:this.activeIndex
|
|
|
+ }).then(res => {
|
|
|
+ // 请求接口，返回数据
|
|
|
+ let data = res.data.data.records;
|
|
|
+ this.loading = false
|
|
|
+ resolve(data);
|
|
|
+ })
|
|
|
+
|
|
|
+ },
|
|
|
+ filterNode(value, data) {
|
|
|
+ if (!value) return true;
|
|
|
+ return data.title.indexOf(value) !== -1;
|
|
|
+ },
|
|
|
+ //搜索树
|
|
|
+ treeFilter() {
|
|
|
+ console.log('搜索');
|
|
|
+ if (this.filterText) {
|
|
|
+ this.allTreeShow = true;
|
|
|
+ this.allTreeData=[]
|
|
|
+ if (!this.allTreeData.length) {
|
|
|
+ this.treeloading = true;
|
|
|
+
|
|
|
+ let parentId=''
|
|
|
+ if(this.curData.hasChildren){
|
|
|
+ parentId=this.curData.id
|
|
|
+ }else{
|
|
|
+ // parentId=this.curData.parentId
|
|
|
+ parentId=''
|
|
|
+ }
|
|
|
+ console.log(parentId,'parentId');
|
|
|
+ tabTypeLazyTree({parentId:parentId,projectId:this.projectid,pcurrent:1,size:1000,titleName:this.filterText,majorDataType:this.activeIndex}).then((res) => {
|
|
|
+ this.treeloading = false;
|
|
|
+ this.allTreeData = res.data.data.records;
|
|
|
+ });
|
|
|
+ this.$nextTick(() => {
|
|
|
+ console.log("过滤");
|
|
|
+ this.treeloading = false;
|
|
|
+ this.$refs.treeall.filter(this.filterText);
|
|
|
+ });
|
|
|
+
|
|
|
+ } else {
|
|
|
+ this.treeloading = false;
|
|
|
+ this.$refs.treeall.filter(this.filterText);
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.$message.warning('请先输入文字')
|
|
|
+ this.allTreeShow = false;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //搜索 筛选
|
|
|
+ searchFormulaName() {
|
|
|
+ this.editEleListFilter = this.editEleListAll.filter((ele) => {
|
|
|
+ return ele.eName.indexOf(this.formulaInput) > -1;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //获取元素列表
|
|
|
+
|
|
|
+ getTableElmentsData(){
|
|
|
+ getTableElments(this.curData.initTableId).then((res) => {
|
|
|
+ this.editEleListFilter = res.data.data;
|
|
|
+ this.editEleListAll = [].concat(this.editEleListFilter);
|
|
|
+ });
|
|
|
+
|
|
|
+ },
|
|
|
+ //设置为文件日期
|
|
|
+ setFiledate(row){
|
|
|
+ if(!row.isFile){
|
|
|
+ this.$set(row, "isFile", true);
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ //取消设置
|
|
|
+ quitFiledate(row){
|
|
|
+
|
|
|
+ if(row.isFile){
|
|
|
+ this.$set(row, "isFile", false);
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ 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;
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+/deep/.avue-crud__left {
|
|
|
+ width: 65%;
|
|
|
+}
|
|
|
+
|
|
|
+/deep/.el-input-group__append {
|
|
|
+ background-color: #ecf5ff;
|
|
|
+ color: #409EFF;
|
|
|
+}
|
|
|
+
|
|
|
+/deep/.el-input-group__append:hover {
|
|
|
+ background-color: #409EFF;
|
|
|
+ color: white;
|
|
|
+}
|
|
|
+
|
|
|
+/deep/.el-input-group__prepend:hover {
|
|
|
+ background-color: #409EFF;
|
|
|
+ color: white;
|
|
|
+}
|
|
|
+
|
|
|
+/deep/.el-input-group__append:active {
|
|
|
+ background-color: #9dc5ee;
|
|
|
+ color: white;
|
|
|
+}
|
|
|
+
|
|
|
+/deep/.el-input-group__prepend:active {
|
|
|
+ background-color: #9dc5ee;
|
|
|
+ color: white;
|
|
|
+}
|
|
|
+</style>
|
|
|
+
|
