fl-web-component 0.1.0

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

@@ -0,0 +1,249 @@
+<template>
+  <div class="box-card" style="height: calc(100vh - 134px)">
+    <div class="box-title">
+      <span class="box-title-desc">属性</span>
+      <i class="el-icon-close box-title-close" style="cursor: pointer" @click="$emit('rightOperation', 'property')" />
+    </div>
+
+    <el-scrollbar>
+      <el-card class="" ref="card" id='box-card'>
+        <el-collapse class="property-box" v-model="activeNames">
+          <el-collapse-item name="基本信息">
+            <template slot="title">
+              <div class="title-content">
+                <span>基本信息</span>
+              </div>
+            </template>
+            <div v-if="propDataLength">
+              <div v-for="(value, name, index) in propData" :key="index" class="text item info-item">
+                <p class="property-key" :title="name">{{ name }}</p>
+                <p class="property-value" :title="value">{{ value }}</p>
+              </div>
+            </div>
+            <el-empty v-else :image-size="50" description="暂无数据"></el-empty>
+          </el-collapse-item>
+        </el-collapse>
+      </el-card>
+    </el-scrollbar>
+  </div>
+</template>
+<script>
+import * as modelApi from '../api/index'
+export default {
+  name: 'Details',
+  // props: {
+  //   id: {
+  //     type: String,
+  //     default() {
+  //       return null
+  //     }
+  //   },
+  //   projectId: {
+  //     type: String,
+  //     default() {
+  //       return ''
+  //     }
+  //   },
+  //   folderId: {
+  //     type: String,
+  //     default() {
+  //       return ''
+  //     }
+  //   },
+  // },
+  data() {
+    return {
+      basicData: [],
+      propData: {},
+      docData: [],
+      otherData: [],
+      activeNames: ['基本信息'],
+    }
+  },
+  computed: {
+    propDataLength() {
+      return Object.keys(this.propData).length
+    }
+  },
+  methods: {
+    // 通过entityId获取图元的属性 图元的id 项目的id
+    getModelProperty({propertyGroup, modelId}) {
+      const property = propertyGroup[modelId]
+      this.$set(this, 'propData', property ? property : {})
+      // modelApi.getModelProperty(params).then(res => {
+      //   // if(this.lodash.isEmpty(res)) {
+      //   //   this.$message({type: 'warning', message: '暂无属性数据'})
+      //   //   return
+      //   // }
+      //   console.log(res)
+      //   // this.$set(this, 'basicData', res['basic'] ? res['basic']: [])
+      //   this.$set(this, 'propData', res ? res: {})
+      //   // this.$set(this, 'docData', res['doc'] ? res['doc'] : [])
+      // }).catch((err) => {
+      //   // this.basicData.splice(0)
+      //   // this.propData.splice(0)
+      //   // this.docData.splice(0)
+      //   // this.$message({type: 'error', message: err.msg})
+      // })  
+    },
+    // 清空属性信息
+    resetProperties() {
+      // this.basicData.splice(0)
+      this.propData = {}
+      // this.docData.splice(0)
+    },
+    // 预览
+    handleView(data) {
+      const url = data.split(',')[0]
+      window.open(url)
+      // window.open('http://view.officeapps.live.com/op/view.aspx?src='+ url)
+    }
+  },
+  destroyed() {
+    window.onresize = null
+  }
+}
+</script>
+<style lang="scss" scoped>
+.box-title{
+  font-size: 16px;
+  // color: #fff;
+}
+.details-box{
+  // position: fixed;
+  // height: calc(100% - 200px);
+  width: 300px;
+  padding: 30px 20px;
+  // right: 76px;
+  // top: 100px;
+  border: none;
+  background: #1e1e1e99;
+  border-radius: 10px;
+  box-sizing: border-box;
+  z-index: 10;
+}
+.box-card{
+  padding-top: 0;
+  padding-bottom: 0;
+  background: #fff;
+  width: 300px;
+  .box-title{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 52px;
+    line-height: 52px;
+    padding-left: 8px;
+    padding-right: 8px;
+    border-bottom: 1px solid #dfdfdf;
+    .box-title-desc{
+      font-size: 14px;
+      font-weight: bold;
+    }
+    .box-title-close{
+      font-size: 24px;
+    }
+  }
+}
+#box-card{
+  border-bottom: none;
+}
+::v-deep .el-card__body{
+  height: 100%;
+  overflow: auto;
+  padding: 0;
+}
+.title{
+  font-size: 16px;
+}
+::v-deep .el-collapse-item__content{
+  padding-bottom: 0px;
+}
+.text{
+  font-size: 12px;
+  // color: #fff;
+}
+.item{
+  padding: 5px;
+  span{
+    word-break: break-all
+  }
+}
+.info-item{
+  display: grid;
+  grid-template-columns: 55% 45%
+}
+.property-box{
+  margin-bottom: 10px;
+  .title-content{
+    padding-left: 10px;
+  }
+}
+.property-title{
+  line-height: 24px;
+  font-size: 14px;
+  // color: #fff;
+  border-bottom: 1px solid #fff;
+  margin-bottom: 10px;
+}
+.empty-tips{
+  // color: #fff;
+  text-align: center;
+}
+::v-deep .has-gutter{
+  background: rgba(44, 76, 124, 0.2);
+}
+::v-deep .el-collapse{
+  border-top: none;
+}
+::v-deep .el-collapse-item__header{
+  height: 36px;
+  line-height: 36px;
+  background: #F4F7FA;
+  // color: #fff;
+  font-size: 14px;
+}
+::v-deep .el-collapse-item__wrap{
+  padding: 0 10px;
+  border-bottom: none;
+  // background: rgba(30, 30, 30, 0.6);
+}
+::v-deep .el-collapse-item__arrow{
+ margin: 0 20px 0 auto;
+}
+.collapse-img{
+  display: inline-block;
+  vertical-align: middle;
+  margin-right: 10px;
+}
+.doc-item{
+  display: flex;
+  flex-direction: row;
+}
+.doc-name{
+  flex: 1;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+.view-doc{
+  width: 40px;
+  text-align: center;
+  color: #3AFDFF;
+  cursor: pointer;
+}
+.property-key,.property-value{
+  word-wrap: break-word;
+  word-break: break-all;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow:ellipsis;
+  margin: 0;
+}
+.property-value{
+  text-indent: 5px;
+}
+::v-deep .el-scrollbar{
+  height: calc(100% - 53px);
+}
+</style>