fl-web-component 0.1.0

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

@@ -0,0 +1,502 @@
+<template>
+  <div class="tree-box-item-card">
+    <!-- @keyup.enter.native="queryPbs" -->
+    <!-- @clear="getTree" -->
+    <el-input
+      placeholder="请输入关键字搜索"
+      v-model="filterVal"
+      prefix-icon="el-icon-search"
+      clearable
+      maxlength="30"
+      class="input-with-pbs"
+    >
+      <!-- <i class="el-icon-search el-input__icon search-icon" slot="suffix" @click="queryPbs"> </i> -->
+    </el-input>
+
+    <!-- :render-content="renderContent" -->
+    <el-scrollbar class="scrollbar">
+      <el-tree 
+        v-if="treeEmptyText"
+        ref="tree" 
+        :data="treeData" 
+        show-checkbox 
+        node-key="id" 
+        :expand-on-click-node="false"
+        :current-node-key="currentKey" 
+        :props="defaultProps" 
+        @node-click="handleNodeClick" 
+        :highlight-current="true"
+        :default-expanded-keys="expanded" 
+        @check="handleCheckChange" 
+        :filter-node-method="filterNode"
+        :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
+                    v-if="data.icon"
+                    :class="data.icon"
+                    style="margin-right: 3px"
+                  />
+                  <i
+                    v-else-if="!node.isLeaf"
+                    :class="'el-icon-coin'"
+                    style="margin-right: 3px"
+                  /> -->
+                  <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";
+
+var projectId = null
+var timeout = null //防抖时间戳
+var checkedArr = []
+
+let selectedIds = []
+let allNodes = [];
+const NODE_TYPES = {
+  model: 10,
+  pbsGrp: 0,
+  innerGrp: 1,
+  annotation: 11,
+  viewer: 12,
+  drawing: 13,
+  major: 14,
+};
+
+export default {
+  name: 'PbsTree',
+  props: {
+    folderId: {
+      type: String,
+      default() {
+        return ''
+      }
+    },
+    projectId: {
+      type: String,
+      default() {
+        return ''
+      }
+    },
+    version: {
+      type: String,
+      default: ''
+    },
+    flag: {
+      type: Boolean,
+      default() {
+        return false
+      }
+    },
+    pbsVersion: {
+      type: Object,
+      default() {
+        return {}
+      }
+    }
+  },
+  components: {
+    TextOverTooltip
+  },
+  destroyed(){
+    this.resetData();
+  },
+  data() {
+    return {
+      defaultProps: {
+        label: 'groupName',
+        children: 'child',
+        // isLeaf: (data) => {
+        //   return !data.leaf
+        // },
+        disabled: (data) => {
+          return data.type !== 0;
+        }
+      },
+      treeData: [],
+      treeEmptyText: '',
+      currentKey: null,
+      expanded: [],
+      checkedArr: [],
+      node: '',
+      filterVal: '',
+    }
+  },
+  watch: {
+    // 监听节点名称变化，进行筛选
+    filterVal(val) {
+      if (val) {
+        this.$refs.tree.filter(val);
+      } else {
+        // 清空树形搜索，则刷新数据，以使树重回手风琴模式
+        this.$refs.tree.filter('');
+      }
+    },
+
+    // folderId(val) {
+    //   if (val) this.getTree()
+    // },
+    // projectId(val) {
+    //   if (val) this.getTree()
+    // },
+    // flag(val) {
+    //   if (val) this.getTree()
+    // },
+  },
+  created() {
+  },
+  methods: {
+    // // 搜索
+    // queryPbs() {
+    //   if (!this.filterVal.trim()) {
+    //     this.$message.warning('请输入位号')
+    //     return
+    //   }
+    //   modelApi.select(this.filterVal.trim(), this.projectId, this.folderId, this.version).then(res => {
+    //     this.$set(this, 'treeData', Object.freeze(res))
+    //     this.expanded = this.expandNodes(res)
+    //     if (res) {
+    //       this.$nextTick(() => {
+    //         this.$refs.tree.setCheckedNodes(res)
+    //       })
+    //     }
+    //   }).catch(err => {
+    //     this.treeData.splice(0)
+    //     this.$message.warning(err.msg)
+    //   })
+    // },
+    expandNodes(data) {
+      data.forEach(item => {
+        this.expanded.push(item.nodeId)
+        if (item.children) {
+          item.children.forEach(childrenItem => {
+            this.expanded.push(childrenItem.nodeId)
+            this.expandNodes(childrenItem.children)
+          })
+        }
+      })
+      return this.expanded
+    },
+    formatTree(data) {
+      if (data.type !== 0) {
+        data.disabled = true;
+      } else {
+        data.disabled = false;
+      }
+      if (data.child) {
+        data.child.forEach(childrenItem => {
+          this.formatTree(childrenItem)
+        })
+      }
+      return data
+    },
+    // 获取pbs节点
+    getPbsTree(params) {
+      this.treeEmptyText = '加载中...';
+
+      getOriginalPbsTree(params)
+      // getPbsTree(params)
+        .then((res) => {
+          // console.log('getOriginalPbsTree', res)
+          // res = this.formatTree(res)
+
+          if (res) {
+            this.treeData = [res];
+            this.allNodes = this.getAllNodes([res]);
+          }
+        }).catch(() => {
+          console.log('error')
+          this.treeData.splice(0)
+        }).finally(() => {
+          loadingClose()
+          this.treeEmptyText = '暂无数据';
+        })
+    },
+    getAllNodes(data) {
+      const allNodes = [];
+      data.forEach(node => {
+        allNodes.push(node);
+        if (node.child && node.child.length > 0) {
+          allNodes.push(...this.getAllNodes(node.child));
+        }
+      });
+      return allNodes;
+    },
+    handleNodeClick(data) {
+      this.node = data
+      if (data.type === NODE_TYPES.model) {
+        this.getModelIdsByNodeIds(projectId, data.objectId, 'PbsClick')
+      }
+      // if (data.nodeType === 'Pbs') {
+      // 这个有待考究  需不需要传版本数据 data里面没有版本数据的字段
+      // this.getModelIdsByNodeIds(projectId, data, 'PbsClick')
+      // }
+    },
+    // 选中节点
+    scrollTo(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.$nextTick(() => {
+          const ele = document.querySelector('.is-current')
+          setTimeout(() => {
+            if (ele) {
+              ele.scrollIntoView({
+                block: 'center',
+                behavior: 'instant'
+              })
+            }
+          }, 400)
+        })
+      } else {
+        this.$message({
+          type: 'warning',
+          message: '未关联Pbs节点'
+        })
+      }
+    },
+    //获取复选框选中得到的数据
+    handleCheckChange(data, node) {
+      // type 为0的是组节点 加载模型 10是模型 (定位) 14是专业
+      console.log(data, node)
+      const tree = this.$refs.tree;
+      console.log(tree.getNode(data))
+      const currentNode = tree.getNode(data)
+      const nodeData = currentNode.data;
+      if (currentNode.checked) {
+        this.selectAllChildren([nodeData])
+      } else {
+        this.invertChildrenSelection([nodeData])
+      }
+      // selectedIds = ['100']
+      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')
+      }
+      // clearTimeout(timeout)
+      // // 过滤一下数据
+      // const checkedKeys = tree.getCheckedKeys();
+      // console.log(checkedKeys)
+      // // this.filterCheckArr(data)
+      // timeout = setTimeout(() => {
+      //   this.getModelIdsByNodeIds(projectId, checkedKeys, 'checkChange')
+      //   checkedKeys.splice(0)
+      // }, 500)
+    },
+    filterCheckArr(data) {
+      if (data.children.length === 0) {
+        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])
+        }
+      }
+    },
+    // 获取当前选中的节点中所对应的模型信息集合
+    getModelIdsByNodeIds(projectId, nodes, type) {
+      // this.$emit('checkChange', 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))
+      //   // type === 'PbsClick' && this.$emit('PbsNodeClick', res, this.node)
+      //   this.$emit('PbsNodeClick', res, this.node)
+      // }).catch((err) => {
+      //   this.$message({
+      //     type: 'warning',
+      //     message: err.msg
+      //   })
+      // })
+    },
+    // 整合数据
+    formatterMsg(data) {
+      //整合数据以对象形式传递，{key:[]},key为titleName，[]是batchId去重后组成的数组
+      const batchIdObj = {}
+      for (let i = 0; i < data.length; i++) {
+        if (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
+            if (Object.keys(batchIdObj).includes(modelPiece)) {
+              !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
+              }
+            }
+          }
+        }
+      }
+      return batchIdObj
+    },
+    // 判断节点是否拥有子节点
+    hasChildren(data) {
+      return data.hasOwnProperty('child') && data.child.length > 0;
+    },
+    // 选中当前节点的所有子节点
+    selectAllChildren(items) {
+      const childIds = this.collectChildIdsRecursive(items);
+      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));
+    },
+    // 递归收集节点及其子节点的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;
+    },
+    search(val, searchData) {
+      const Reg = new RegExp(searchData, 'ig')
+      if (val || val === 0) {
+        const res = val.toString().replace(Reg, `<span>$&</span>`)
+        return res
+      }
+    },
+    /* 查询节点名 */
+    filterNode(value, data, node) {
+      // console.log(value);
+      // if (!value) return true;
+      // 返回：祖先节点、包含搜索结果的节点及其后代节点
+      // let parentNode = node.parent,
+      //   labels = [node.label],
+      //   level = 1;
+      // while (level < node.level) {
+      //   labels = [...labels, parentNode.label];
+      //   parentNode = parentNode.parent;
+      //   level++;
+      // }
+      // return labels.some((label) => label.indexOf(value) !== -1);
+      // 返回：祖先节点、包含搜索结果的节点
+      // 不区分大小写
+      if (!value) return true;
+      let nowVal = data[this.defaultProps.label].toUpperCase();
+      return nowVal.indexOf(value.toUpperCase()) !== -1;
+      // return node.label.indexOf(value) !== -1;    
+    },
+    resetData(){
+      selectedIds = [];
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+::v-deep .el-card__body {
+  height: 100%;
+  padding: 0;
+}
+
+::v-deep .el-tree {
+  margin-top: 10px;
+  height: 100%;
+  // color: #fff;
+  background: none;
+}
+
+::v-deep .el-tree__empty-text {
+  // color: #fff;
+  font-size: 12px;
+}
+
+::v-deep .el-tree-node__content:hover {
+  background: rgba(255, 255, 255, 0.7);
+  display: inline-block;
+  min-width: 100%;
+}
+
+::v-deep .el-tree-node:focus>.el-tree-node__content {
+  background: rgba(255, 255, 255, 0.7);
+  display: inline-block;
+  min-width: 100%;
+}
+
+.title {
+  font-size: 16px;
+}
+
+::v-deep .el-tree-node>.el-tree-node__children {
+  overflow: unset;
+}
+
+::v-deep .el-tree .is-disabled {
+  display: none;
+}
+
+::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-button--text {
+  font-size: 14px;
+  color: #2e3136;
+}
+
+::v-deep .el-tree-node > .el-tree-node__content {
+  height: 32px;
+  line-height: 32px;
+  display: inline-block;
+  min-width: 100%;
+}
+::v-deep .scrollbar{
+  height: calc(100% - 25px);
+}
+</style>

package/packages/components/model/components/proof-config.vue

@@ -0,0 +1,80 @@
+<template>
+  <div class="proof-config">
+    <ImportModel
+      ref="importModel"
+      :defaultParams="defaultParams"
+      @viewVersion="viewVersion"
+    />
+    <ProofHistory
+      ref="proofHistory"
+      @viewVersion="viewVersion"
+      :defaultParams="defaultParams"
+    />
+    <ProofProjectUser :defaultParams="defaultParams" />
+    <ProofRole :defaultParams="defaultParams" />
+    <ProofPublish
+      ref="proofPublish"
+      :defaultParams="defaultParams"
+      @getVersionList="getVersionList"
+      @publishVersion="publishVersion"
+    />
+  </div>
+</template>
+
+<script>
+import ImportModel from './import-model.vue';
+import ProofHistory from './proof-history.vue';
+import ProofProjectUser from './proof-project-user.vue';
+import ProofPublish from './proof-publish.vue';
+import ProofRole from './proof-role.vue';
+
+export default {
+  name: 'ProofConfig',
+  components: {
+    ImportModel,
+    ProofHistory,
+    ProofProjectUser,
+    ProofPublish,
+    ProofRole,
+  },
+  props: {
+    defaultParams: {
+      type: Object,
+      default() {
+        return {};
+      },
+    },
+  },
+  methods: {
+    viewVersion(item) {
+      this.$emit('viewVersion', item);
+    },
+    openImportModelDialog() {
+      this.$refs.importModel.triggerDialog();
+    },
+    ableImportModelBtn() {
+      this.$refs.importModel.ableBtn();
+    },
+    abledProofPublishBtn() {
+      this.$refs.proofPublish.ableBtn();
+    },
+    getVersionList() {
+      this.$refs.proofHistory.getList();
+    },
+    publishVersion() {
+      this.$emit('publishVersion', null);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+::v-deep.proof-config {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  & > div {
+    margin-right: 24px;
+  }
+}
+</style>

package/packages/components/model/components/proof-for-pc.vue

@@ -0,0 +1,123 @@
+<template>
+  <div>
+    <ProofPanel
+      ref="proofPanel"
+      :defaultParams="defaultParams"
+      @selectRow="handleClickProofList"
+      @clickSaveBtn="handleProofSavelBtn"
+    />
+  </div>
+</template>
+
+<script>
+import { setToken } from '@/utils/auth';
+import * as modelApi from '../api/index';
+import ProofPanel from './proof-panel.vue'
+export default {
+  data() {
+    return {
+      defaultParams: {
+        projectId: "",
+        stageId: "",
+        client: "",
+      }
+    };
+  },
+  components: {
+    ProofPanel
+  },
+  created() {
+    this.initDefaultParams();
+  },
+  mounted() {
+    this.getData();
+  },
+  methods: {
+    initDefaultParams() {
+      this.defaultParams.projectId = this.$route.query.projectId;
+      this.defaultParams.stageId = this.$route.query.stageId;
+      this.defaultParams.client = this.$route.query.client;
+      this.defaultParams.token = this.$route.query.token;
+      // this.defaultParams.toProjectId = this.$route.query.toProjectId;
+
+      if(this.defaultParams.token){
+        setToken(this.defaultParams.token);
+      }
+      this.getProofProjectId();
+    },
+    // 获取数据
+    getData() {
+      if (typeof qt !== "undefined") {
+        let that = this;
+        new that.QWebChannel(qt.webChannelTransport, channel => {
+          // 获取Qt注册的对象,设置到主窗口
+          window.webTransport = channel.objects.webTransport;
+          // 接收 C++ 发送的消息
+          webTransport.SendMessageToWeb.connect(message => {
+            that.dataLoading = true;
+            that.paraObj = JSON.parse(message);
+          });
+        });
+      } else {
+        console.error("初始化qwebchannel失败");
+      }
+    },
+    getProofProjectId(){
+      modelApi.getProofProjectId({
+        toProjectId: this.$route.query.projectId
+      }).then(res => {
+        if(res.code === 200){
+          if(res.data !== 0){
+              this.defaultParams.projectId = res.data;
+              this.$refs.proofPanel.init();
+          }else{
+            this.$message({ type: 'error', message: '校审项目不存在' })
+          }
+        }else{
+          this.$message({ type: 'error', message: res.msg })
+        }
+      }).catch(err => {
+        console.log(err)
+        // this.$message({ type: 'error', message: err.msg })
+      });
+    },
+    handleProofSavelBtn(data) {
+      const postData = {
+        ...data,
+        stageId: this.defaultParams.stageId
+      };
+      if (_.isEmpty(data.id)) {
+        postData.projectId = this.defaultParams.projectId;
+      }
+
+      this.$refs.proofPanel.saveForm(postData);
+    },
+    handleClickProofList(data) {
+      const { position } = data;
+      // const { cameraPosition, cameraTarget } = JSON.parse(position);
+
+      // 向客户端发送数据
+      if (typeof qt !== "undefined") {
+        new this.QWebChannel(qt.webChannelTransport, function(channel) {
+          // 获取Qt注册的对象,设置到主窗口
+          window.webTransport = channel.objects.webTransport;
+          webTransport.AcceptWebData(position);
+        });
+      } else {
+        console.error("初始化qwebchannel失败");
+      }
+      // // 视点
+      // this.animateCamera(
+      //   cameraPosition.x,
+      //   cameraPosition.y,
+      //   cameraPosition.z,
+      //   cameraTarget.x,
+      //   cameraTarget.y,
+      //   cameraTarget.z
+      // );
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>