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

package/src/components/ComponentList.vue

@@ -0,0 +1,526 @@
+<template>
+  <div class="container" v-infinite-scroll="getData" :infinite-scroll-distance="100" >
+    <div class="component-nav">
+      <div class="filter">
+        <epx-search-filter
+          :fields="searchFields"
+          :showFilter="$configs.showFilter"
+          :filterFields="$configs.filterFields"
+          :keywords="$configs.keywords"
+          @search="search"
+        ></epx-search-filter>
+      </div>
+    </div>
+    <div :style="{position: 'relative'}">
+      <el-button :class="['layout-button', {'layout-button__list': layout==='list' }]" type="primary" link icon="epx-icon-menu" @click="layout=layout==='list'? 'card': 'list'">{{layout==='list'?'卡片布局': '列表布局'}}</el-button>
+      <epx-entity-list :comp-configs="$configs" v-if="layout==='list'"> </epx-entity-list>
+      <div class="component-container"  v-else>
+        <div class="list-operates" v-if="$configs.operateFlag && checkRightOperates.length > 0">
+          <div class="button-group">
+            <el-button size="default" v-for="operate in operates" :key="operate.text" :type="buttonUi(operate.ui)" @click="$handler(operate, null)">{{operate.text}}</el-button>
+            <el-dropdown v-if="moreOperates.length>0" class="more-table-operates" trigger="click">
+              <el-button size="default">
+                <i class="el-icon-more"></i>
+              </el-button>
+              <template v-slot:dropdown><el-dropdown-menu>
+                <el-dropdown-item v-for="operate in moreOperates" :key="operate.text" @click="$handler(operate, null)">{{operate.text}}</el-dropdown-item>
+              </el-dropdown-menu></template>
+            </el-dropdown>
+          </div>
+            <span >总共{{total}}条数据</span>
+        </div>
+        <ul class="component-list">
+          <li :class="['component-item', {'is-select': isSelect(component)}]" v-for="component in componentList" @click="viewEntity({},component)" :key="component.ID">
+            <div class="component-image" :style="component.PICTURE ? { backgroundImage: `url(${$util.getFileUrl(component.PICTURE)})` }: {}">
+              <div class="no-image" v-if="!component.PICTURE">
+                <i class="el-icon-picture-outline"></i>
+                <p>暂无缩略图</p>
+              </div>
+            </div>
+            <!-- 组件详细信息 -->
+            <div class="component-content">
+              <div class="component-info">
+                <p class="component-name">{{component.TITLE}}</p>
+                <p class="component-desc__item" v-for="fieldConfig in listFields" :key="fieldConfig.attriName">
+                  <label for="">{{fieldConfig.attriLabel}}</label>：
+                  {{component[fieldConfig.attriName + '#'] || component[fieldConfig.attriName]}}
+                </p>
+              </div>
+              <div class="component-operate" @click.stop  v-if="component.SYSTEM === SYSTEM || appConfig['SYSTEM|CODE']==='epxing-frame-manage'">
+                <el-button class="component-operate__item" type="primary" link @click="selectComp(component)">{{isSelect(component)? this.$t('cancel') : '选中'}}</el-button>
+                <el-button
+                  v-for="operate in unfoldColumnOperates(component)"
+                  class="component-operate__item"
+                  :key="operate.text"
+                  type="primary" link
+                  size="small"
+                  @click="$handler(operate, component)"
+                >
+                  <i v-if="operate.iconCls" :class="operate.iconCls"></i>
+                  {{operate.text}}
+                </el-button>
+                <el-dropdown class="component-operate__item" v-if="foldColumnOperates(component).length>0" trigger="click" @visible-change="show => (activeDropDown = show ? component.ID : '')">
+                  <span :class="['dropdown-link', { active: activeDropDown === component.ID }]">
+                    <i class="el-icon-more"></i>
+                  </span>
+                  <template v-slot:dropdown><el-dropdown-menu>
+                    <el-dropdown-item v-for="operate in foldColumnOperates(component)" :key="operate.text" @click="$handler(operate, component)" :icon="operate.iconCls">
+                      {{operate.text}}
+                    </el-dropdown-item>
+                  </el-dropdown-menu></template>
+                </el-dropdown>
+              </div>
+            </div>
+            <div class="select-icon">
+              <div class="select-triangle"></div>
+              <i class="el-icon-check"></i>
+            </div>
+          </li>
+          <li class="load">
+            <p v-if="componentList.length<total">加载中...</p>
+            <p v-if="componentList.length>=total">没有更多了</p>
+          </li>
+        </ul>
+      </div>
+    </div>
+
+  </div>
+
+</template>
+
+<script>
+import component from '@epxing/core/src/mixins/component'
+import { evalWith } from '@epxing/utils/src/eval-with'
+
+export default {
+  name: 'epx-component-list',
+  mixins: [component],
+  addPage: 'entity-add-page',
+  editPage: 'entity-edit-page',
+  detailPage: 'entity-detail-page',
+  addPageFlag: 'v_add',
+  detailPageFlag: 'v_add',
+  editPageFlag: 'v_add',
+  detailFlag: true,
+  pageFlag: true, // 是否需要分页
+  pageSize: 20, // 每页记录数
+  operateEllipsis: 1,
+  operateFlag: true,
+  operateColumnFlag: true, // 是否显示操作列
+  operateColumnLocked: false,
+  operateColumnEllipsis: 2, // Boolean/ Number,
+  data () {
+    return {
+      typeList: [],
+      componentType: '',
+      searchScopeParams: [],
+      componentList: [],
+      listFields: [],
+      selection: [],
+      activeDropDown: null,
+      currentPage: 1,
+      total: '',
+      searchKeyParams: {},
+      layout: 'card'
+    }
+  },
+  computed: {
+    searchFields () {
+      const { searchFields = [] } = this.$configs
+      return searchFields
+    },
+    isSelect () {
+      return comp => {
+        return this.selection.some(item => item.ID === comp.ID)
+      }
+    },
+    buttonUi () {
+      return ui => (ui === 'blue' || ui === 'soft-blue') ? 'primary' : ui
+    },
+    checkRightOperates () {
+      const { operates = [] } = this.$configs
+      return operates.filter(item => this.$checkOperateRight(item))
+    },
+    operates () {
+      const { operateEllipsis = 1 } = this.$configs
+      let showOperateLength = 0
+      if (operateEllipsis === false) return this.checkRightOperates
+      if (operateEllipsis !== true) {
+        showOperateLength = operateEllipsis
+      }
+      const cOperates = [...this.checkRightOperates]
+      if (cOperates.length > showOperateLength) {
+        cOperates.length = showOperateLength
+      }
+      return cOperates
+    },
+    moreOperates () {
+      const { operateEllipsis = 1 } = this.$configs
+      let showOperateLength = 0
+      if (operateEllipsis === false) return []
+      if (operateEllipsis !== true) {
+        showOperateLength = operateEllipsis
+      }
+      const cOperates = [...this.checkRightOperates]
+      if (cOperates.length > showOperateLength) {
+        cOperates.splice(0, showOperateLength)
+        return cOperates
+      }
+      return []
+    },
+    foldColumnOperates () {
+      return data => {
+        const { operateColumnEllipsis = true, columnOperates = [] } = this.$configs
+        const terminal = this.$isMobile ? 'mobile' : 'pc'
+        const showColumnOperates = columnOperates.filter(item => this.$checkOperateRight(item) && (!item.showCondition || item.showCondition.length === 0 || this.$util.runExpByScope.call(this, item.showCondition, data)) && (!item.terminal || item.terminal === 'all' || item.terminal === terminal))
+        let showOperatesLength = 0
+        if (operateColumnEllipsis === false) return []
+        if (operateColumnEllipsis !== true) {
+          showOperatesLength = operateColumnEllipsis
+        }
+        if (showColumnOperates.length > showOperatesLength) {
+          const foldButtons = [...showColumnOperates]
+          foldButtons.splice(0, showOperatesLength)
+          return foldButtons
+        } else {
+          return []
+        }
+      }
+    },
+    unfoldColumnOperates () {
+      return data => {
+        const { operateColumnEllipsis = true, columnOperates = [] } = this.$configs
+        const terminal = this.$isMobile ? 'mobile' : 'pc'
+        const showColumnOperates = columnOperates.filter(item => this.$checkOperateRight(item) && (!item.showCondition || item.showCondition.length === 0 || this.$util.runExpByScope.call(this, item.showCondition, data)) && (!item.terminal || item.terminal === 'all' || item.terminal === terminal))
+        let showOperatesLength = 0
+        if (operateColumnEllipsis === false) return showColumnOperates
+        if (operateColumnEllipsis !== true) {
+          showOperatesLength = operateColumnEllipsis
+        }
+        const unfoldButtons = [...showColumnOperates]
+        if (unfoldButtons.length > showOperatesLength) unfoldButtons.length = showOperatesLength
+
+        return unfoldButtons
+      }
+    },
+    scopeParams () {
+      const { scopeParams: configScopeParams = [] } = this.$configs
+      const { scopeParams: queryScopeParams = [] } = this.$query
+      // 格式化scopeParams
+      const _scopeParams = this.$_.cloneDeep([...configScopeParams, ...queryScopeParams, ...this.searchScopeParams])
+      const that = this
+      for (const scopeKey in _scopeParams) {
+        const scope = _scopeParams[scopeKey]
+        if (!scope) continue
+        let values = scope.values
+        if (/\$\[(.+)\]/.test(values)) {
+          values = values.replace(/\$\[(.+)\]/, (match, key) => {
+            try {
+              return evalWith(`that.$query.${key}`, { that }) || evalWith(`that.$tab.${key}`, { that }) || evalWith(`that.${key}`, { that }) || ''
+            } catch (error) {
+              return scope.values
+            }
+          })
+        }
+        if (/#\{(.+)\}/.test(values)) {
+          values = values.replace(/#\{(.+)\}/, (match, key) => {
+            try {
+              return evalWith(`that.$query.${key}`, { that }) || evalWith(`that.$tab.${key}`, { that }) || ''
+            } catch (error) {
+              return scope.values
+            }
+          })
+        }
+        scope.values = values
+      }
+      return _scopeParams
+    }
+  },
+  methods: {
+    getComponentType () {
+      this.$http.getCodes({
+        key: 'COMPONENT_TYPE'
+      })
+        .then(data => {
+          this.typeList = data
+        })
+    },
+    getFields () {
+      const { listFields, fieldConfigs = {} } = this.$configs
+      this.$FieldFactory.createFields({
+        defaultFieldConfigs: fieldConfigs,
+        fields: listFields,
+        meta: this.$meta
+      })
+        .then(data => {
+          this.listFields = [...data]
+          this.getData()
+        })
+    },
+    getData () {
+      // eslint-disable-next-line camelcase
+      let { pageFlag, pageSize, orderFields, order_field: orderField = [], order_mode: orderMode = [] } = this.$configs
+      if (orderFields && orderFields.length > 0) {
+        orderField = orderFields.map(item => item.attriName || item)
+        orderMode = orderFields.map(item => item.sort || 'asc')
+      }
+      const params = {
+        entityId: this.$metaId,
+        columnFieldNames: this.$meta.getAllFields().join('#,'),
+        ...this.searchKeyParams,
+        order_field: orderField.join(','),
+        order_mode: orderMode.join(',')
+      }
+
+      if (this.componentType) {
+        params['scope.COMPONENT_TYPE'] = this.componentType
+      }
+      if (pageFlag) {
+        params.page = this.currentPage
+        params.limit = pageSize
+      }
+      if (this.scopeParams) params.scopeParams = JSON.stringify(this.scopeParams)
+      this.currentPage += 1
+      this.$http.list(params)
+        .then(data => {
+          this.componentList = [...this.componentList, ...data.entitys]
+          this.total = data.total
+        })
+    },
+    search (params) {
+      this.currentPage = 1
+      this.searchScopeParams = params
+      this.componentList = []
+      this.getData()
+    },
+    changeType (type) {
+      this.componentType = type.code
+      this.currentPage = 1
+      this.componentList = []
+      this.getData()
+    },
+    selectComp (comp) {
+      const index = this.selection.findIndex(item => item.ID === comp.ID)
+      if (index !== -1) {
+        this.selection.splice(index, 1)
+      } else {
+        this.selection.push(comp)
+      }
+    },
+    viewEntity (config, item) {
+      const { detailPageId, detailPage, detailFlag, openMode } = this.$configs
+      if (!detailFlag) return
+      let key = 'ID'
+      if (this.$meta) {
+        key = this.$meta.getKey()
+      }
+      const query = {
+        metaId: this.$metaId,
+        component: detailPage,
+        pageId: detailPageId,
+        pageType: 'DETAIL',
+        id: item[key],
+        openType: openMode
+      }
+      if (this.$isMobile) delete query.openType
+      this.$createPage({
+        ...query
+      })
+    },
+    $refesh () {
+      this.reloadData()
+    },
+    reloadData () {
+      this.currentPage = 1
+      this.componentList = []
+      this.getData()
+    }
+  },
+  created () {
+    this.getComponentType()
+    this.getFields()
+    this.$event.on('search-keyword', (searchKeyParams) => {
+      if (searchKeyParams) {
+        this.searchKeyParams = searchKeyParams
+        this.currentPage = 1
+        this.componentList = []
+        this.getData()
+      }
+    })
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.container {
+  height: 100%;
+  overflow: auto;
+}
+
+.menu {
+  border-right: 0;
+}
+
+.list-operates {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: var(--epx-bg-card);
+  padding: 16px 12px;
+}
+.more-table-operates {
+  margin-left: 10px;
+}
+.component-list {
+  flex: 1;
+  display: flex;
+  flex-wrap: wrap;
+  position: relative;
+  width: calc(100% + 20px);
+  left: -10px;
+  overflow: auto;
+}
+.component-item {
+  width: calc(25% - 20px);
+  min-width: 250px;
+  height: 320px;
+  margin: 10px;
+  position: relative;
+  &.is-select {
+    &::after {
+      pointer-events: none;
+      content: '';
+      display: block;
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: calc(100% - 1px);
+      height: calc(100% - 1px);
+      border: 1px solid;
+      @include border_color_primary(.6);
+    }
+    .select-icon {
+      display: block;
+    }
+  }
+  &:hover {
+    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.2);
+    .component-operate {
+      display: flex;
+    }
+  }
+}
+.component-image {
+  width: 100%;
+  height: 150px;
+  background: #E2E4E8;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+  position: relative;
+}
+
+.no-image {
+  text-align: center;
+  color: var(--epx-text-secondary);
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin-top: -32px;
+  margin-left: -34px;
+  >i {
+    font-size: 36px;
+    margin-bottom: 8px;
+  }
+}
+.component-content {
+  background: var(--epx-bg-card);
+  height: calc(100% - 150px);
+}
+.component-info {
+  padding: 0 14px;
+  overflow: hidden;
+  height: calc(100% - 40px);
+}
+.component-name {
+  margin: 12px 0 8px;
+  font-size: var(--epx-font-size-l);
+  line-height: 1;
+}
+
+.component-desc__item {
+  line-height: 24px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  &:last-child {
+    white-space: pre-line;
+    height: 48px;
+    display: -webkit-box;
+   -webkit-box-orient: vertical;
+   -webkit-line-clamp: 2;
+  }
+  >label {
+    width: 60px;
+    display: inline-block;
+    text-align-last: justify;
+    color: var(--epx-text);
+  }
+}
+.component-operate {
+  display: none;
+  height: 40px;
+  align-items: center;
+}
+.component-operate__item {
+  flex: 1;
+  font-size: var(--epx-font-size-base);
+  border-right: 1px solid var(--epx-border);
+  padding: 0;
+  margin-left: 0;
+  text-align: center;
+  &:last-child {
+    border-right: 0;
+    // color: #C83C3C;
+    // &:hover {
+    //   color: #C83C3C;
+    // }
+  }
+}
+.dropdown-link {
+  cursor: pointer;
+}
+.select-icon {
+  display: none;
+  position: absolute;
+  right: 0;
+  top: 0;
+  .el-icon-check {
+    position: absolute;
+    color: #fff;
+    top: 5px;
+    right: 4px;
+  }
+}
+.select-triangle {
+  width: 0;
+  height: 0;
+  border-top: 40px solid;
+  @include border_color_primary(1,top);
+  border-left: 40px solid transparent;
+}
+.load {
+  width: 100%;
+  text-align: center;
+  color: var(--epx-text);
+  padding: 10px 0;
+}
+.layout-button {
+  position: absolute;
+  right: 120px;
+  top: 15px;
+}
+.layout-button__list {
+  // right:
+}
+</style>