fl-web-component 0.1.1 → 1.0.0

package/packages/components/model/components/location-panel.vue

@@ -7,7 +7,7 @@
           <i class="el-icon-close"></i>
         </el-button>
       </div>
-      <el-form ref="form" :model="form"  :rules="rules" label-width="50px">
+      <el-form ref="form" :model="form" :rules="rules" label-width="50px">
         <el-form-item label="姓名" prop="userName">
           <el-input type="text" v-model="form.userName" maxlength="50" show-word-limit></el-input>
         </el-form-item>
@@ -31,10 +31,10 @@ export default {
       default() {
         return {
           left: 0,
-          top: 0
-        }
-      }
-    }
+          top: 0,
+        };
+      },
+    },
   },
   data() {
     return {
@@ -44,52 +44,48 @@ export default {
       },
       style: `position: fixed; top: ${this.position.top}px; left: ${this.position.left}px;`,
       rules: {
-        userName: [
-          { required: true, message: '请输入人员姓名', trigger: 'blur' },
-        ],
-        userCode: [
-          { required: true, message: '请输入人员编码', trigger: 'blur' },
-        ]
-      }
-    }
+        userName: [{ required: true, message: '请输入人员姓名', trigger: 'blur' }],
+        userCode: [{ required: true, message: '请输入人员编码', trigger: 'blur' }],
+      },
+    };
   },
   watch: {
     position(val) {
-      this.$refs.markPanel.$el.style.top = `${val.top}px`
-      this.$refs.markPanel.$el.style.left = `${val.left}px`
-    }
+      this.$refs.markPanel.$el.style.top = `${val.top}px`;
+      this.$refs.markPanel.$el.style.left = `${val.left}px`;
+    },
   },
   methods: {
     cancel() {
-      this.$emit('cancel')
+      this.$emit('cancel');
     },
     sure(data) {
       this.$refs['form'].validate((valid) => {
         if (valid) {
-          this.$emit('sureLocation', this.form)
+          this.$emit('sureLocation', this.form);
         } else {
-          return false
+          return false;
         }
-      })
+      });
     },
     resetForm() {
-      this.$refs['form'].resetFields()
-    }
-  }
-}
+      this.$refs['form'].resetFields();
+    },
+  },
+};
 </script>
 <style lang="scss" scoped>
-.mark-panel{
+.mark-panel {
   transition: all 1s;
 }
-::v-deep .el-card__header{
+::v-deep .el-card__header {
   padding: 10px 20px;
 }
-::v-deep .el-input__inner{
+::v-deep .el-input__inner {
   height: 30px;
   line-height: 30px;
 }
-::v-deep .icon-select .el-input__inner{
-  color: rgba(255,255, 255, 0);
+::v-deep .icon-select .el-input__inner {
+  color: rgba(255, 255, 255, 0);
 }
 </style>

package/packages/components/model/components/measure-type.vue

@@ -6,8 +6,8 @@
       :class="[active === item.id ? 'active' : 'unactive', 'btn-item']"
       @click="measureType(item.id)"
     >
-      <span class="span-txt">{{item.name}}</span>
-      <img :src="item.imgUrl" :alt="item.name" class="btn-bg">
+      <span class="span-txt">{{ item.name }}</span>
+      <img :src="item.imgUrl" :alt="item.name" class="btn-bg" />
     </div>
   </div>
 </template>
@@ -22,38 +22,38 @@ export default {
         { name: '面积测量', id: 'area', imgUrl: require('@/assets/area.png') },
         { name: '角度测量', id: 'angle', imgUrl: require('@/assets/angle.png') },
         // { name: '体积测量', id: 'volume', imgUrl: require('@/assets/area.png') }
-      ]
-    }
+      ],
+    };
   },
   methods: {
     measureType(type) {
-      this.$set(this, 'active', type)
-      this.$emit('measure', type)
-    }
-  }
-}
+      this.$set(this, 'active', type);
+      this.$emit('measure', type);
+    },
+  },
+};
 </script>
 <style scoped>
-.measure-type{
+.measure-type {
   height: 45px;
 }
-.btn-item{
+.btn-item {
   height: 45px;
   line-height: 45px;
   padding: 0 10px;
   cursor: pointer;
 }
-.btn-bg{
+.btn-bg {
   display: inline-block;
   vertical-align: middle;
 }
-.active{
+.active {
   background: rgba(255, 255, 255, 0.5);
 }
-.unactive{
+.unactive {
   color: #fff;
 }
-.span-txt{
+.span-txt {
   padding-right: 5px;
 }
 </style>

package/packages/components/model/components/pbs-tree.vue

@@ -15,38 +15,31 @@
 
     <!-- :render-content="renderContent" -->
     <el-scrollbar class="scrollbar">
-      <el-tree 
+      <el-tree
         v-if="treeEmptyText"
-        ref="tree" 
-        :data="treeData" 
-        show-checkbox 
-        node-key="id" 
+        ref="tree"
+        :data="treeData"
+        show-checkbox
+        node-key="id"
         :expand-on-click-node="false"
-        :current-node-key="currentKey" 
-        :props="defaultProps" 
-        @node-click="handleNodeClick" 
+        :current-node-key="currentKey"
+        :props="defaultProps"
+        @node-click="handleNodeClick"
         :highlight-current="true"
-        :default-expanded-keys="expanded" 
-        @check="handleCheckChange" 
+        :default-expanded-keys="expanded"
+        @check="handleCheckChange"
         :filter-node-method="filterNode"
-        :check-strictly="true" 
-        :empty-text=treeEmptyText
+        :check-strictly="true"
+        :empty-text="treeEmptyText"
       >
         <span class="custom-tree-node" slot-scope="{ node, data }">
-            <!-- 自定义节点名称 -->
-            <!-- :style="cssNodeLabel" -->
-            <text-over-tooltip
-              class="node-label"
-              :content="node.label"
-              :ref-name="node.id"
-            >
-              <template slot="tooltip-content">
-                <slot
-                  name="tree-node-label"
-                  v-bind="{ node, data }"
-                >
-                  <!-- 自定义节点图标 -->
-                  <!-- <i
+          <!-- 自定义节点名称 -->
+          <!-- :style="cssNodeLabel" -->
+          <text-over-tooltip class="node-label" :content="node.label" :ref-name="node.id">
+            <template slot="tooltip-content">
+              <slot name="tree-node-label" v-bind="{ node, data }">
+                <!-- 自定义节点图标 -->
+                <!-- <i
                     v-if="data.icon"
                     :class="data.icon"
                     style="margin-right: 3px"
@@ -56,27 +49,27 @@
                     :class="'el-icon-coin'"
                     style="margin-right: 3px"
                   /> -->
-                  <span v-html="search(node.label, filterVal)" />
-                </slot>
-              </template>
-            </text-over-tooltip>
-          </span>
+                <span v-html="search(node.label, filterVal)" />
+              </slot>
+            </template>
+          </text-over-tooltip>
+        </span>
       </el-tree>
       <el-empty v-else></el-empty>
     </el-scrollbar>
   </div>
 </template>
 <script>
-import { proofInit, getPbsTree, getOriginalPbsTree } from '../api/index'
-import { loading, loadingClose } from '../utils/index'
-import _ from 'lodash'
-import TextOverTooltip from "./TextOverTooltip/index.vue";
+import { proofInit, getPbsTree, getOriginalPbsTree } from '../api/index';
+import { loading, loadingClose } from '../utils/index';
+import _ from 'lodash';
+import TextOverTooltip from './TextOverTooltip/index.vue';
 
-var projectId = null
-var timeout = null //防抖时间戳
-var checkedArr = []
+var projectId = null;
+var timeout = null; //防抖时间戳
+var checkedArr = [];
 
-let selectedIds = []
+let selectedIds = [];
 let allNodes = [];
 const NODE_TYPES = {
   model: 10,
@@ -94,36 +87,36 @@ export default {
     folderId: {
       type: String,
       default() {
-        return ''
-      }
+        return '';
+      },
     },
     projectId: {
       type: String,
       default() {
-        return ''
-      }
+        return '';
+      },
     },
     version: {
       type: String,
-      default: ''
+      default: '',
     },
     flag: {
       type: Boolean,
       default() {
-        return false
-      }
+        return false;
+      },
     },
     pbsVersion: {
       type: Object,
       default() {
-        return {}
-      }
-    }
+        return {};
+      },
+    },
   },
   components: {
-    TextOverTooltip
+    TextOverTooltip,
   },
-  destroyed(){
+  destroyed() {
     this.resetData();
   },
   data() {
@@ -136,7 +129,7 @@ export default {
         // },
         disabled: (data) => {
           return data.type !== 0;
-        }
+        },
       },
       treeData: [],
       treeEmptyText: '',
@@ -145,7 +138,7 @@ export default {
       checkedArr: [],
       node: '',
       filterVal: '',
-    }
+    };
   },
   watch: {
     // 监听节点名称变化，进行筛选
@@ -168,8 +161,7 @@ export default {
     //   if (val) this.getTree()
     // },
   },
-  created() {
-  },
+  created() {},
   methods: {
     // // 搜索
     // queryPbs() {
@@ -191,16 +183,16 @@ export default {
     //   })
     // },
     expandNodes(data) {
-      data.forEach(item => {
-        this.expanded.push(item.nodeId)
+      data.forEach((item) => {
+        this.expanded.push(item.nodeId);
         if (item.children) {
-          item.children.forEach(childrenItem => {
-            this.expanded.push(childrenItem.nodeId)
-            this.expandNodes(childrenItem.children)
-          })
+          item.children.forEach((childrenItem) => {
+            this.expanded.push(childrenItem.nodeId);
+            this.expandNodes(childrenItem.children);
+          });
         }
-      })
-      return this.expanded
+      });
+      return this.expanded;
     },
     formatTree(data) {
       if (data.type !== 0) {
@@ -209,18 +201,18 @@ export default {
         data.disabled = false;
       }
       if (data.child) {
-        data.child.forEach(childrenItem => {
-          this.formatTree(childrenItem)
-        })
+        data.child.forEach((childrenItem) => {
+          this.formatTree(childrenItem);
+        });
       }
-      return data
+      return data;
     },
     // 获取pbs节点
     getPbsTree(params) {
       this.treeEmptyText = '加载中...';
 
       getOriginalPbsTree(params)
-      // getPbsTree(params)
+        // getPbsTree(params)
         .then((res) => {
           // console.log('getOriginalPbsTree', res)
           // res = this.formatTree(res)
@@ -229,17 +221,19 @@ export default {
             this.treeData = [res];
             this.allNodes = this.getAllNodes([res]);
           }
-        }).catch(() => {
-          console.log('error')
-          this.treeData.splice(0)
-        }).finally(() => {
-          loadingClose()
-          this.treeEmptyText = '暂无数据';
         })
+        .catch(() => {
+          console.log('error');
+          this.treeData.splice(0);
+        })
+        .finally(() => {
+          loadingClose();
+          this.treeEmptyText = '暂无数据';
+        });
     },
     getAllNodes(data) {
       const allNodes = [];
-      data.forEach(node => {
+      data.forEach((node) => {
         allNodes.push(node);
         if (node.child && node.child.length > 0) {
           allNodes.push(...this.getAllNodes(node.child));
@@ -248,9 +242,9 @@ export default {
       return allNodes;
     },
     handleNodeClick(data) {
-      this.node = data
+      this.node = data;
       if (data.type === NODE_TYPES.model) {
-        this.getModelIdsByNodeIds(projectId, data.objectId, 'PbsClick')
+        this.getModelIdsByNodeIds(projectId, data.objectId, 'PbsClick');
       }
       // if (data.nodeType === 'Pbs') {
       // 这个有待考究  需不需要传版本数据 data里面没有版本数据的字段
@@ -259,52 +253,51 @@ export default {
     },
     // 选中节点
     scrollTo(selectNodeId) {
-      const node = this.allNodes.find(item => item.objectId === selectNodeId)
-      
+      const node = this.allNodes.find((item) => item.objectId === selectNodeId);
 
       if (node?.id) {
-        this.$refs.tree.setCurrentKey(node.id)
-        this.expanded.push(node.id)
-        this.$set(this, 'currentKey', node.id)
+        this.$refs.tree.setCurrentKey(node.id);
+        this.expanded.push(node.id);
+        this.$set(this, 'currentKey', node.id);
         this.$nextTick(() => {
-          const ele = document.querySelector('.is-current')
+          const ele = document.querySelector('.is-current');
           setTimeout(() => {
             if (ele) {
               ele.scrollIntoView({
                 block: 'center',
-                behavior: 'instant'
-              })
+                behavior: 'instant',
+              });
             }
-          }, 400)
-        })
+          }, 400);
+        });
       } else {
         this.$message({
           type: 'warning',
-          message: '未关联Pbs节点'
-        })
+          message: '未关联Pbs节点',
+        });
       }
     },
     //获取复选框选中得到的数据
     handleCheckChange(data, node) {
       // type 为0的是组节点 加载模型 10是模型 (定位) 14是专业
-      console.log(data, node)
+      console.log(data, node);
       const tree = this.$refs.tree;
-      console.log(tree.getNode(data))
-      const currentNode = tree.getNode(data)
+      console.log(tree.getNode(data));
+      const currentNode = tree.getNode(data);
       const nodeData = currentNode.data;
       if (currentNode.checked) {
-        this.selectAllChildren([nodeData])
+        this.selectAllChildren([nodeData]);
       } else {
-        this.invertChildrenSelection([nodeData])
+        this.invertChildrenSelection([nodeData]);
       }
       // selectedIds = ['100']
-      console.log(selectedIds)
-      const checkedKeys = selectedIds.map(item => item.id)
-      tree.setCheckedKeys(checkedKeys)
+      console.log(selectedIds);
+      const checkedKeys = selectedIds.map((item) => item.id);
+      tree.setCheckedKeys(checkedKeys);
 
       if (data.type === NODE_TYPES.pbsGrp) {
-        const groupIds = selectedIds.map(item => item.objectId)
-        this.getModelIdsByNodeIds(projectId, groupIds, 'checkChange')
+        const groupIds = selectedIds.map((item) => item.objectId);
+        this.getModelIdsByNodeIds(projectId, groupIds, 'checkChange');
       }
       // clearTimeout(timeout)
       // // 过滤一下数据
@@ -318,18 +311,22 @@ export default {
     },
     filterCheckArr(data) {
       if (data.children.length === 0) {
-        checkedArr.push({ folderId: data.nodeFolderId, nodeId: data.nodeId, version: this.pbsVersion[data.nodeFolderId] })
+        checkedArr.push({
+          folderId: data.nodeFolderId,
+          nodeId: data.nodeId,
+          version: this.pbsVersion[data.nodeFolderId],
+        });
       } else {
         for (let index = 0; index < data.children.length; index++) {
-          this.filterCheckArr(data.children[index])
+          this.filterCheckArr(data.children[index]);
         }
       }
     },
     // 获取当前选中的节点中所对应的模型信息集合
     getModelIdsByNodeIds(projectId, nodes, type) {
       // this.$emit('checkChange', nodes)
-      type === 'checkChange' && this.$emit('checkChange', nodes)
-      type === 'PbsClick' && this.$emit('pbsNodeClick', nodes)
+      type === 'checkChange' && this.$emit('checkChange', nodes);
+      type === 'PbsClick' && this.$emit('pbsNodeClick', nodes);
 
       // PbsApi.getModelIdsByNodeIds(projectId, parmas).then(res => {
       //   // type === 'checkChange' && this.$emit('checkChange', this.formatterMsg(res))
@@ -345,29 +342,30 @@ export default {
     // 整合数据
     formatterMsg(data) {
       //整合数据以对象形式传递，{key:[]},key为titleName，[]是batchId去重后组成的数组
-      const batchIdObj = {}
+      const batchIdObj = {};
       for (let i = 0; i < data.length; i++) {
         if (data[i].batchIds) {
-          let batchIds = JSON.parse(data[i].batchIds)
+          let batchIds = JSON.parse(data[i].batchIds);
           for (let index = 0; index < batchIds.length; index++) {
-            const element = batchIds[index]
-            let modelPiece = element.titleName
+            const element = batchIds[index];
+            let modelPiece = element.titleName;
             if (Object.keys(batchIdObj).includes(modelPiece)) {
-              !batchIdObj[modelPiece].batchIds.find(item => item === element.batchId) && batchIdObj[modelPiece].batchIds.push(element.batchId)
+              !batchIdObj[modelPiece].batchIds.find((item) => item === element.batchId) &&
+                batchIdObj[modelPiece].batchIds.push(element.batchId);
             } else {
               batchIdObj[modelPiece] = {
                 folderId: '',
-                batchIds: []
-              }
-              if (!batchIdObj[modelPiece].batchIds.find(item => item === element.batchId)) {
-                batchIdObj[modelPiece].batchIds.push(element.batchId)
-                batchIdObj[modelPiece].folderId = data[i].groupId
+                batchIds: [],
+              };
+              if (!batchIdObj[modelPiece].batchIds.find((item) => item === element.batchId)) {
+                batchIdObj[modelPiece].batchIds.push(element.batchId);
+                batchIdObj[modelPiece].folderId = data[i].groupId;
               }
             }
           }
         }
       }
-      return batchIdObj
+      return batchIdObj;
     },
     // 判断节点是否拥有子节点
     hasChildren(data) {
@@ -376,27 +374,27 @@ export default {
     // 选中当前节点的所有子节点
     selectAllChildren(items) {
       const childIds = this.collectChildIdsRecursive(items);
-      selectedIds = _.uniqBy([...selectedIds, ...childIds], item => item.id);
+      selectedIds = _.uniqBy([...selectedIds, ...childIds], (item) => item.id);
     },
     // 取消选中当前节点的所有子节点
     invertChildrenSelection(items) {
       const childIds = this.collectChildIdsRecursive(items);
-      const ids = childIds.map(childItem => childItem.id)
-      selectedIds = selectedIds.filter(item => !ids.includes(item.id));
+      const ids = childIds.map((childItem) => childItem.id);
+      selectedIds = selectedIds.filter((item) => !ids.includes(item.id));
     },
     // 递归收集节点及其子节点的ID
     collectChildIdsRecursive(items, result = []) {
-        items.forEach(item => {
-            item.type === NODE_TYPES.pbsGrp && result.push({objectId: item.objectId, id: item.id});
-            if (this.hasChildren(item)) this.collectChildIdsRecursive(item.child, result);
-        });
-        return result;
+      items.forEach((item) => {
+        item.type === NODE_TYPES.pbsGrp && result.push({ objectId: item.objectId, id: item.id });
+        if (this.hasChildren(item)) this.collectChildIdsRecursive(item.child, result);
+      });
+      return result;
     },
     search(val, searchData) {
-      const Reg = new RegExp(searchData, 'ig')
+      const Reg = new RegExp(searchData, 'ig');
       if (val || val === 0) {
-        const res = val.toString().replace(Reg, `<span>$&</span>`)
-        return res
+        const res = val.toString().replace(Reg, `<span>$&</span>`);
+        return res;
       }
     },
     /* 查询节点名 */
@@ -418,13 +416,13 @@ export default {
       if (!value) return true;
       let nowVal = data[this.defaultProps.label].toUpperCase();
       return nowVal.indexOf(value.toUpperCase()) !== -1;
-      // return node.label.indexOf(value) !== -1;    
+      // return node.label.indexOf(value) !== -1;
     },
-    resetData(){
+    resetData() {
       selectedIds = [];
-    }
-  }
-}
+    },
+  },
+};
 </script>
 <style lang="scss" scoped>
 ::v-deep .el-card__body {
@@ -450,7 +448,7 @@ export default {
   min-width: 100%;
 }
 
-::v-deep .el-tree-node:focus>.el-tree-node__content {
+::v-deep .el-tree-node:focus > .el-tree-node__content {
   background: rgba(255, 255, 255, 0.7);
   display: inline-block;
   min-width: 100%;
@@ -460,7 +458,7 @@ export default {
   font-size: 16px;
 }
 
-::v-deep .el-tree-node>.el-tree-node__children {
+::v-deep .el-tree-node > .el-tree-node__children {
   overflow: unset;
 }
 
@@ -468,22 +466,19 @@ export default {
   display: none;
 }
 
-::v-deep .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
+::v-deep .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
   background: rgba(255, 255, 255, 0.7);
   display: inline-block;
   min-width: 100%;
 }
 
-::v-deep
-    .el-tree--highlight-current
-    .el-tree-node.is-current
-    > .el-tree-node__content,
-  .is-checked .el-tree-node__content {
-    color: #148ff3;
-    font-weight: bold;
-    display: inline-block;
-    min-width: 100%;
-  }
+::v-deep .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content,
+.is-checked .el-tree-node__content {
+  color: #148ff3;
+  font-weight: bold;
+  display: inline-block;
+  min-width: 100%;
+}
 
 ::v-deep .el-button--text {
   font-size: 14px;
@@ -496,7 +491,7 @@ export default {
   display: inline-block;
   min-width: 100%;
 }
-::v-deep .scrollbar{
+::v-deep .scrollbar {
   height: calc(100% - 25px);
 }
 </style>