@epxing/designer 0.0.0-stage → 5.3.0-beta.2

package/src/visual/config-page/ComponentLibraryDialog.vue

@@ -0,0 +1,262 @@
+<template>
+  <div class="component">
+    <div class="search-container">
+      <el-input class="search-input" v-model="search.searchKey" size="default" placeholder="请输入搜索内容"></el-input>
+      <el-select class="search-select" v-model="search.terminal"  size="default">
+        <el-option label="PC端" value="pc"></el-option>
+        <el-option label="移动端" value="move"></el-option>
+      </el-select>
+      <el-select class="search-select" v-model="search.level"  size="default">
+        <el-option label="通用" value="01"></el-option>
+        <el-option label="系统" value="03"></el-option>
+      </el-select>
+    </div>
+    <div class="search-filter">
+      <p class="search-filter__label">类型：</p>
+      <p class="search-filter-options">
+        <span :class="{active: search.componentType==='all'}" @click="search.componentType='all'">全部</span>
+        <span :class="{active: search.componentType==='common'}" @click="search.componentType='common'">常用</span>
+        <span v-for="option in componentTypeList" :key="option.code" :class="{active: search.componentType===option.code}" @click="search.componentType=option.code">{{option.name}}</span>
+      </p>
+    </div>
+    <div class="component-container">
+      <template v-if="componentList">
+        <ul class="component-list" v-if="componentList.length>0">
+          <li class="component-item" v-for="component in componentList" :key="component.ID" @click="$emit('click', component, search.componentType)">
+            <div class="component-item__preview" >
+              <img v-if="component.PICTURE" :src="$util.getFileUrl(component.PICTURE)" alt="" />
+              <div v-else class="no-image">
+                <i class="el-icon-picture-outline"></i>
+              </div>
+            </div>
+            <p class="component-item__title" >
+              <span>{{component.TITLE || component.NAME}}</span>
+              <el-tooltip v-if="component.STATUS === 'deprecated' " placement="top" :content="component.REMARK">
+                <i class="component__warning-icon el-icon-warning-outline" ></i>
+              </el-tooltip>
+              </p>
+          </li>
+        </ul>
+        <div class="no-data" v-else>
+          <i class="epx-icon-color-kong"></i>
+          <p>暂无数据</p>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+export default {
+  name: 'epx-visual-component-library-dialog',
+  props: {
+    initialTerminal: { type: String, default: 'pc' }
+  },
+  data () {
+    return {
+      search: {
+        searchKey: '',
+        terminal: this.initialTerminal,
+        level: '01',
+        componentType: 'common'
+      },
+      componentList: null
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'getCodeById'
+    ]),
+    componentTypeList () {
+      const code = this.getCodeById('COMPONENT_TYPE') || []
+      return [...code, { code: 'template', name: '模板组件' }]
+    }
+  },
+  watch: {
+    search: {
+      handler () {
+        this.getComponentList()
+      },
+      deep: true
+    },
+    'search.searchKey' (v) {
+      if (v) {
+        this.search.componentType = 'all'
+      }
+    }
+  },
+  methods: {
+    getComponentTypeList () {
+      const code = this.getCodeById('COMPONENT_TYPE')
+      if (!code || code.length === 0) {
+        this.$store.dispatch({
+          type: 'ADD_LIST',
+          key: 'COMPONENT_TYPE'
+        })
+      }
+    },
+    getComponentList () {
+      const { searchKey, terminal, level, componentType } = this.search
+      if (componentType === 'template') {
+        return this.getTemplateList()
+      }
+      const params = {
+        action: 'list',
+        entityId: 'FM_PAGE',
+        keywordFields: 'ID,TITLE,NAME',
+        keywordValue: searchKey,
+        'scope.TERMINAL#in': terminal,
+        'scope.LEVEL#in': level,
+        'scope.TYPE': '01',
+        'scope.IS_JOIN_LIBRARY#not_in': '0',
+        'scope.STATUS#not_in': 'abandon',
+        order_field: 'ORDER_NUM',
+        order_mode: 'asc'
+      }
+
+      if (componentType === 'common') {
+        params['scope.IS_FRE_USE'] = '1'
+      } else if (componentType !== 'all') {
+        params['scope.COMPONENT_TYPE'] = componentType
+      }
+      if (level === '03') {
+        params['scope.SYSTEM'] = this.SYSTEM
+      }
+      this.$http.$post(params)
+        .then(data => {
+          this.componentList = data.entitys
+        })
+    },
+    getTemplateList () {
+      const { searchKey, level } = this.search
+      let scopeParams = []
+      if (level === '01') {
+        scopeParams = [{ field: 'TYPE', values: '01' }, { field: 'LEVEL', values: '01' }]
+      } else {
+        scopeParams = [{ field: 'TYPE', values: '01' }, { field: 'LEVEL', values: '03' }, { field: 'SYSTEM', mode: 'equal', values: this.SYSTEM }]
+      }
+      this.loading = true
+      this.$http.$post({
+        action: 'list',
+        entityId: 'FM_TEMPLATE',
+        keywordFields: 'NAME',
+        keywordValue: searchKey,
+        scopeParams: JSON.stringify(scopeParams)
+      })
+        .then(data => {
+          this.componentList = data.entitys
+          this.loading = false
+        })
+        .catch(err => {
+          this.$message.error(err.message)
+          this.loading = false
+        })
+    }
+  },
+  created () {
+    this.getComponentTypeList()
+    this.getComponentList()
+  }
+
+}
+</script>
+
+<style lang="scss" scoped>
+.search-container {
+  display: flex;
+  align-items: center;
+  padding: 10px 0;
+}
+.search-input {
+  width: 240px;
+}
+.search-select {
+  width: 140px;
+  margin-left: 20px;
+}
+.search-filter {
+  display: flex;
+  padding: 10px 0;
+}
+.search-filter__label {
+  color: #121212;
+  flex-shrink: 0;
+}
+.search-filter-options {
+  flex: 1;
+  >span {
+    margin: 8px 12px;
+    color: #444;
+    cursor: pointer;
+    &.active, &:hover {
+      @include font_color_primary
+    }
+  }
+}
+.component-container {
+  height: 400px;
+}
+.component-list {
+  height: 100%;
+  overflow: auto;
+}
+.component-item {
+  width: calc(25% - 20px);
+  margin:  10px;
+  float: left;
+  cursor: pointer;
+  &:hover, &.active {
+    .component-item__preview{
+      padding: 0;
+      border: 1px solid;
+      @include border_color_primary;
+    }
+  }
+
+}
+.component-item__preview {
+  background: #E2E4E8;
+  border: 1px dashed transparent;
+  padding: 1px;
+  box-sizing: border-box;
+  transition: all .3s;
+  width: 100%;
+  height: 100px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  &>img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
+}
+.no-image {
+  font-size: 40px;
+  color: #999;
+}
+.component-item__title {
+  color: #666;
+  margin-top: 4px;
+  text-align: center;
+}
+.no-data {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  color: #666;
+  >i {
+    font-size: 100px;
+    line-height: 120px;
+  }
+}
+.component__warning-icon {
+  color: #E6A23C;
+  margin-left: 4px;
+}
+</style>