epx-frame 3.5.0-shpgy.1

package/src/frame/packages/category-list/CategoryList.vue

@@ -0,0 +1,854 @@
+<script>
+import EntityListVue from '../entity-list'
+export default {
+  name: 'epx-category-list',
+  extends: EntityListVue,
+  treeExpandMore: true,
+  data () {
+    return {
+      treeMeta: {},
+      categoryTreeData: [],
+      expandCategoryTreeKeys: [],
+      categoryKeyword: '',
+      clickcategoryItem: null,
+      clickCategoryAllItems: [],
+      fold: false
+    }
+  },
+  computed: {
+    checkRightCategoryOperates () {
+      const { treeMetaId } = this.$configs
+      const addPage = 'entity-add-page'
+      const editPage = 'entity-edit-page'
+      const openMode = '2'
+      const {
+        treeOperates = [
+          {
+            text: '新增节点',
+            handler: 'addCategoryEntity',
+            ui: 'primary',
+            num: 0,
+            openMode: '2',
+            component: addPage,
+            metaId: treeMetaId,
+            params: {}
+          },
+          {
+            text: '编辑',
+            handler: 'goPage',
+            num: 1,
+            openMode,
+            component: editPage,
+            metaId: treeMetaId,
+            pageType: 'EDIT',
+            params: {
+              id: '#[id]'
+            }
+          },
+          {
+            text: '删除',
+            ui: 'primary',
+            handler: 'commonAction',
+            action: 'removeMulti',
+            metaId: treeMetaId,
+            num: 'n',
+            confirmMsg: '确认删除？',
+            successMsg: '删除成功',
+            params: {
+              ids: '#[id]'
+            }
+          }
+        ]
+      } = this.$configs
+      return treeOperates.filter(item => this.$checkOperateRight(item, this.treeMetaId))
+    },
+    checkRightCategoryColumnOperates () {
+      const { treeMetaId } = this.$configs
+      const addPage = 'entity-add-page'
+      const editPage = 'entity-edit-page'
+      const openMode = '2'
+      const {
+        treeColumnOperates = [
+          {
+            text: '新增节点',
+            handler: 'addCategoryEntity',
+            ui: 'primary',
+            num: 0,
+            openMode,
+            component: addPage,
+            metaId: treeMetaId,
+            params: {}
+          },
+          {
+            text: '新增同级节点',
+            handler: 'addCategorySiblingEntity',
+            ui: 'primary',
+            metaId: treeMetaId,
+            component: 'entity-add-page'
+          },
+          {
+            text: '编辑',
+            handler: 'goPage',
+            num: 1,
+            openMode,
+            component: editPage,
+            metaId: treeMetaId,
+            pageType: 'EDIT',
+            params: {
+              id: '#[id]'
+            }
+          },
+          {
+            text: '删除',
+            ui: 'primary',
+            handler: 'commonAction',
+            action: 'removeMulti',
+            metaId: treeMetaId,
+            num: 'n',
+            confirmMsg: '确认删除？',
+            successMsg: '删除成功',
+            params: {
+              ids: '#[id]'
+            }
+          }
+        ]
+      } = this.$configs
+      return treeColumnOperates.filter(item => this.$checkOperateRight(item, this.treeMetaId))
+    },
+    scopeParams () {
+      const { scopeParams: configScopeParams = [], linkTreeFields = [] } = this.$configs
+      const { scopeParams: queryScopeParams = [] } = this.$query
+      const scopeParams = []
+      if (typeof configScopeParams === 'object' && !Array.isArray(configScopeParams)) {
+        Object.entries(configScopeParams).forEach(([key, value]) => {
+          scopeParams.push({
+            field: key,
+            ...value
+          })
+        })
+      } else {
+        scopeParams.push(...configScopeParams)
+      }
+      if (typeof queryScopeParams === 'object' && !Array.isArray(queryScopeParams)) {
+        Object.entries(queryScopeParams).forEach(([key, value]) => {
+          scopeParams.push({
+            field: key,
+            ...value
+          })
+        })
+      } else {
+        scopeParams.push(...queryScopeParams)
+      }
+
+      // 格式化scopeParams
+      const _scopeParams = this.$_.cloneDeep([...scopeParams, ...this.searchScopeParams])
+      if (this.clickcategoryItem) {
+        const linkTreeField = linkTreeFields[0]
+        _scopeParams.push({ field: linkTreeField, values: this.clickcategoryItem.id })
+      }
+      // eslint-disable-next-line no-unused-vars
+      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 {
+              // eslint-disable-next-line no-eval
+              return eval(`that.$query.${key}`) || eval(`that.$tab.${key}`) || eval(`that.${key}`) || ''
+            } catch (error) {
+              return scope.values
+            }
+          })
+        }
+        if (/#\{(.+)\}/.test(values)) {
+          values = values.replace(/#\{(.+)\}/, (match, key) => {
+            try {
+              // eslint-disable-next-line no-eval
+              return eval(`that.$query.${key}`) || eval(`that.$tab.${key}`) || ''
+            } catch (error) {
+              return scope.values
+            }
+          })
+        }
+        scope.values = values
+      }
+      return _scopeParams
+    }
+  },
+  methods: {
+    $refesh () {
+      this.getCategoryTreeData()
+      this.reloadData()
+    },
+    /**
+     * 重新加载数据
+     */
+    reloadData () {
+      this.getCategoryTreeData()
+      this.getData(null, data => {
+        // 如果selection里没有 旧删除
+        const existSelection = []
+        const dataMap = {}
+        data.forEach(dataItem => {
+          dataMap[dataItem[this.$metaKey]] = dataItem
+        })
+        this.selectionIds.forEach(item => {
+          if (dataMap[item[this.$metaKey]]) existSelection.push(item[this.$metaKey])
+        })
+        if (!this.$_.isEqual(this.selectionIds, existSelection)) {
+          this.selectionIds = existSelection
+        }
+      })
+    },
+    getCategoryMeta () {
+      const { treeMetaId } = this.$configs
+
+      this.$store.dispatch({
+        type: 'ADD_META',
+        metaId: treeMetaId
+      })
+        .then(data => {
+          this.treeMeta = data
+          this.getCategoryTreeData(1)
+        })
+    },
+    getExpandCategoryKeys (arr, level, current = 1) {
+      const keys = []
+      arr.forEach(item => {
+        if (!item.leaf) {
+          keys.push(item.id)
+        }
+        if (item.children && current < level) {
+          const childrenKeys = this.getExpandCategoryKeys(item.children, level, current + 1)
+          keys.push(...childrenKeys)
+        }
+      })
+      return keys
+    },
+    getCategoryTreeData (first) {
+      const { treeOrderFields = ['ORDER_NUM'], treeNodeExpand, treeMetaId } = this.$configs
+      const { attributes = {}, id } = this.treeMeta || {}
+      const keywords = [...new Set([...this.treeMeta.keyNames, this.treeMeta.label])]
+      let upField = 'UP_ID'
+      const field = Object.values(attributes).find(item => item.relatedEntity === id)
+      if (field) upField = field.name
+      this.$http.$post({
+        action: 'getTree',
+        entityId: treeMetaId,
+        up_field: upField,
+        keywordFields: keywords.join(','),
+        keywordValue: this.categoryKeyword,
+        node: 'root',
+        order_field: treeOrderFields.map(item => item.attriName || item).join(','),
+        order_mode: treeOrderFields.map(item => item.sort || 'asc').join(',')
+      })
+        .then(data => {
+          this.categoryTreeData = [{ id: 'all', title: '全部', children: [...data] }]
+          if (first) {
+            if (treeNodeExpand === 'first') {
+              this.expandCategoryTreeKeys = [this.categoryTreeData[0].id]
+            } else if (treeNodeExpand === 'level1') {
+              this.expandCategoryTreeKeys = this.getExpandCategoryKeys(this.categoryTreeData, '2')
+            } else if (treeNodeExpand === 'level2') {
+              this.expandCategoryTreeKeys = this.getExpandCategoryKeys(this.categoryTreeData, '3')
+            } else if (treeNodeExpand === 'all') {
+              this.expandCategoryTreeKeys = this.getExpandCategoryKeys(this.categoryTreeData)
+            }
+          }
+        })
+    },
+    expandNode (node) {
+      if (this.$configs.treeExpandMore === false) {
+        let parentNode = {}
+        if (node.parent) {
+          parentNode = this.deepList(node.parent, this.categoryTreeData)
+        } else {
+          parentNode = this.categoryTreeData[0]
+        }
+        this.expandCategoryTreeKeys = this.expandCategoryTreeKeys.filter(item => !parentNode.children.find(child => child.id === item))
+      }
+      this.expandCategoryTreeKeys = [...new Set([...this.expandCategoryTreeKeys, node.id])]
+    },
+    collapseNode (node) {
+      const index = this.expandCategoryTreeKeys.findIndex(item => item === node.id)
+      if (index !== -1) {
+        this.expandCategoryTreeKeys.splice(index, 1)
+      }
+    },
+    categoryTreeClick (item) {
+      if (item.id === 'all') {
+        this.clickcategoryItem = null
+        this.clickCategoryAllItems = []
+      } else {
+        this.clickcategoryItem = { id: item.ID, ...item }
+        const parentNodes = this.getAllLevel(this.clickcategoryItem.parent, [this.clickcategoryItem])
+        parentNodes.unshift({ id: 'all', title: '全部' })
+        this.clickCategoryAllItems = parentNodes
+      }
+    },
+    getAllLevel (parent, arr = []) {
+      const parentNode = this.deepList(parent, this.categoryTreeData)
+      if (parentNode) {
+        arr.unshift(parentNode)
+        if (parentNode.parent) {
+          const parentArr = this.getAllLevel(parentNode.parent, arr)
+          if (parentArr) return parentArr
+        }
+      }
+      return arr
+    },
+    deepList (parent, arr) {
+      let main = null
+      try {
+        (function poll (arr, leval) {
+          for (let i = 0; i < arr.length; i++) {
+            if (arr[i].id === parent) {
+              main = arr[i]
+              throw Error
+            } else if (arr[i].id !== parent && arr[i].children && arr[i].children.length > 0) {
+              poll(arr[i].children, leval + 1)
+            }
+          }
+        })(arr, 0)
+      } catch (err) {}
+      return main
+    },
+    addCategoryEntity (operate = {}, select, isSibling) {
+      this.showPopover = null
+      console.log(select)
+      console.log(this.clickcategoryItem)
+      const { attributes = {}, id: treeMetaId } = this.treeMeta || {}
+      const { detailPageFlag } = this.$configs
+      const { pageId, component = 'entity-add-page', metaId = this.$metaId } = operate || {}
+      let upField = 'UP_ID'
+      const field = Object.values(attributes).find(item => item.relatedEntity === treeMetaId)
+      if (field) upField = field.name
+      const defaultValue = {}
+      let id = null
+      let text = null
+      if (this.clickcategoryItem) {
+        id = this.clickcategoryItem.id
+        text = this.clickcategoryItem.text
+      }
+
+      if (select && typeof select === 'object') {
+        id = select.id
+        text = select.text
+      }
+      defaultValue[upField] = id
+      defaultValue[upField + '#'] = text
+
+      this.goPage({
+        metaId,
+        flag: detailPageFlag,
+        openMode: '2',
+        pageId,
+        component: component,
+        pageType: 'ADD',
+        params: {
+          defaultValue,
+          ...this.$formatParams(operate.params)
+        },
+        callback: () => {
+          this.getCategoryTreeData()
+        }
+
+      })
+    },
+    editCategoryEntity (operate, item) {
+      const { detailPageFlag } = this.$configs
+      const { pageId, component = 'entity-add-page' } = operate || {}
+      const { id } = item || this.clickItem || {}
+      if (!id) {
+        this.$message.error('请选择一个记录')
+        return
+      }
+      this.$emit('createPage', {
+        metaId: this.$metaId,
+        flag: detailPageFlag,
+        component,
+        pageId,
+        pageType: 'EDIT',
+        id: id,
+        callback: () => {
+          this.getCategoryTreeData()
+        }
+      })
+    },
+    addCategorySiblingEntity (operate, data) {
+      if (data.parent) {
+        const obj = this.deepList(data.parent, this.categoryTreeData) || {}
+
+        this.addCategoryEntity(operate, obj)
+      } else {
+        this.addCategoryEntity(operate, data)
+      }
+    },
+    allowDrop (draggingNode, dropNode, type) {
+      if (dropNode.data.id === 'all' && type !== 'inner') {
+        return false
+      }
+      return true
+    },
+    drop (node, current, type, event) {
+      const { treeMetaId } = this.$configs
+      // 获取当前节点结束后的父节点
+      let parentId = ''
+      let modules = []
+      if (type === 'after' || type === 'before') {
+        parentId = current.data.parent || 'root'
+      } else if (type === 'inner') {
+        parentId = current.data.id || current.data.ID
+      }
+      if (parentId === 'root') {
+        modules = this.categoryTreeData[0].children
+      } else {
+        const parentNode = this.deepList(parentId, this.categoryTreeData) || this.categoryTreeData[0]
+        modules = [...parentNode.children]
+      }
+
+      // 获取其父节点的所有子节点
+      const str = modules.reduce((str, item, index) => (str += (item.id || item.ID) + ':' + index + ','), '')
+      // 递归获取id为parentId的节点
+      this.$http.$post({
+        action: 'moveTree',
+        entityId: treeMetaId,
+        id: node.data.id || node.data.ID,
+        selfAttriName: 'ID',
+        newParentId: parentId,
+        orderString: str,
+        orderAtrriName: 'ORDER_NUM'
+      })
+        .then(data => {
+          this.getCategoryTreeData()
+        })
+    },
+    renderCategory () {
+      return (
+        <div class={['category']}>
+          <div class="category-inner">
+            <div class="category-title">{this.treeMeta.name}</div>
+            <div class="category-search__container">
+              <el-input vModel={this.categoryKeyword} placeholder="按关键词搜索" size="medium" clearable onChange={this.getCategoryTreeData}></el-input>
+              <el-dropdown>
+                <span class="operate-icon">
+                  <i class="el-icon-setting"></i>
+                </span>
+                <el-dropdown-menu slot="dropdown">
+                  {
+                    this.checkRightCategoryOperates.map(operate => (
+                      <el-dropdown-item key={operate.text} nativeOnClick={this.$handler.bind(this, operate, this.clickcategoryItem)}>{operate.text}</el-dropdown-item>
+                    ))
+                  }
+                </el-dropdown-menu>
+              </el-dropdown>
+            </div>
+            <el-tree
+              class="tree"
+              data={this.categoryTreeData}
+              node-key="id"
+              props={{ label: 'title', children: 'children' }}
+              default-expanded-keys={this.expandCategoryTreeKeys}
+              draggable={true}
+              accordion={this.$configs.treeExpandMore === false}
+              onNode-click={this.categoryTreeClick}
+              onNode-expand={this.expandNode}
+              onNode-collapse={this.collapseNode}
+              onNode-drop={this.drop}
+              allow-drag={node => node.data.id !== 'all'}
+              allow-drop={this.allowDrop}
+              scopedSlots={{
+                default: ({ node, data }) => (
+                  <span class={['tree-node']} slot="reference" >
+                    <i class={data.children.length > 0 ? 'el-icon-folder' : 'el-icon-document'}></i>
+                    <el-tooltip class="item" effect="dark" content={data.title} placement="top" open-delay={1000}>
+                      <span class="tree-node__name">{ data.title}</span>
+                    </el-tooltip>
+                    {
+                      data.id !== 'all' && (
+                        <el-dropdown class="tree-node-operate">
+                          <span class="node-operate-icon">
+                            <i class="el-icon-setting"></i>
+                          </span>
+                          <el-dropdown-menu slot="dropdown">
+                            {
+                              this.checkRightCategoryColumnOperates.map(operate => (
+                                <el-dropdown-item key={operate.text} nativeOnClick={this.$handler.bind(this, operate, data)}>{operate.text}</el-dropdown-item>
+                              ))
+                            }
+                          </el-dropdown-menu>
+                        </el-dropdown>
+                      )
+                    }
+                  </span>
+                )
+              }}
+            >
+            </el-tree>
+          </div>
+        </div>
+      )
+    }
+  },
+  created () {
+    this.getCategoryMeta()
+  },
+  render () {
+    return (
+      <div class="container">
+        <div class={['category-container', { fold: this.fold }]}>
+          { this.renderCategory() }
+          <div class="fold-btn">
+            <i class={this.fold ? 'el-icon-s-unfold' : 'el-icon-s-fold'} onClick={() => (this.fold = !this.fold)}></i>
+          </div>
+        </div>
+        <div ref="list" class={['list-container', { fold: this.isFold }]} style={this.$component.style}>
+          {
+            this.clickcategoryItem && (
+              <div class="category-list__title">
+                <span>
+                  {
+                    this.clickCategoryAllItems.map((item, index) => (
+                      <span key={item.id}>
+                        <font class="category-list__name" onClick={this.categoryTreeClick.bind(this, item)}>{item.title}</font>
+                        {index < this.clickCategoryAllItems.length - 1 && <font> / </font>}
+                      </span>
+                    ))
+                  }
+                </span>
+              </div>
+            )
+          }
+          {
+            this.renderComponents.map(componentFn => componentFn())
+          }
+        </div>
+
+      </div>
+    )
+  }
+}
+</script>
+
+<style scoped lang="scss">
+$paddingSize: 16px;
+.container {
+  display: flex;
+  height: 100%;
+}
+.category-container {
+  max-height: 100%;
+  overflow: auto;
+  margin-right: 10px;
+  position: relative;
+  &.fold {
+    width: 20px;
+    .category {
+      width: 0;
+    }
+     .fold-btn {
+      right: 0;
+    }
+  }
+}
+.fold-btn {
+  position: absolute;
+  right: 8px;
+  top: 10px;
+  width: 20px;
+  height: 30px;
+  font-size: 18px;
+  line-height: 30px;
+  text-align: center;
+  color: #888;
+  cursor: pointer;
+}
+.category {
+  width: 304px;
+  overflow: hidden;
+  transition: all .3s ;
+}
+.category-inner {
+  width: 280px;
+  padding: 12px;
+  background: #fff;
+}
+.category-title {
+  font-size: 18px;
+  margin-bottom: 12px;
+  font-weight: 600;
+}
+.category-search__container {
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+
+}
+.operate-icon {
+  font-size: 16px;
+  margin-left: 8px;
+  cursor: pointer;
+}
+
+.tree {
+  &::v-deep {
+    .el-tree-node.is-current {
+      >.el-tree-node__content {
+        background: #F5F7FA;
+      }
+    }
+    .el-tree-node__content {
+      height: 32px;
+    }
+  }
+}
+.tree-node {
+  flex: 1;
+  overflow: hidden;
+  line-height: 32px;
+  display: flex;
+  align-items: center;
+  &:hover {
+    .node-operate-icon {
+      display: inline
+    }
+  }
+}
+.tree-node__name {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.tree-node-operate {
+  float: right;
+  margin-right: 6px;
+}
+.node-operate-icon {
+  color: #999;
+  display: none;
+}
+.tree-node >i{
+  @include font_color_primary;
+  margin-right: 8px;
+  font-size: 16px;
+}
+.category-list__title {
+  background: #fff;
+  height: 48px;
+  line-height: 48px;
+  padding: 0 12px;
+  border-bottom: 1px solid #e3e3e3;
+  >span {
+    padding: 0 10px;
+    border-left: 4px solid;
+    @include border_color_primary;
+    font-size: 18px;
+    color: #222;
+    line-height: 1;
+  }
+}
+.category-list__name {
+  cursor: pointer;
+  &:hover {
+    @include font_color_primary;
+  }
+}
+/***列表 */
+.list-container {
+  flex: 1;
+  overflow: auto;
+  &.fold {
+    .list-operates {
+      display: none;
+    }
+    .list-table {
+      display: none;
+    }
+    .form-title-fold__icon {
+      transform: rotate(180deg);
+    }
+  }
+  &::v-deep {
+    .el-table__header-wrapper-copy, .el-table__fixed-header-wrapper-copy {
+      .caret-wrapper {
+        opacity: 0;
+      }
+    }
+    .operate-column__cell {
+      .cell {
+        display: flex;
+        align-items: center;
+        .el-table__placeholder {
+          flex-shrink: 0;
+        }
+      }
+    }
+  }
+}
+.search-simple {
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+}
+
+.list-table {
+  background: #fff;
+  // padding:0 12px;
+   // 无边框
+  &.no-border {
+    border: 0;
+    border-top: dashed 1px #e3e3e3;
+    &::after {
+      display: none
+    }
+    ::v-deep {
+      th.is-leaf, td {
+       border-right: 0
+      }
+    }
+  }
+}
+.is-label {
+  @include font_color_primary;
+  cursor: pointer;
+}
+.list-operates {
+  background: #fff;
+  padding: $paddingSize 12px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.more-table-operates {
+  margin-left: 10px
+}
+.column-operates {
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+  button {
+    padding: 4px 0;
+  }
+  button:not(:last-child) {
+    &::after {
+      content: '';
+      position: relative;
+      right: -6px;
+      top:0 ;
+      height: 14px;
+      border-right:  1px solid #e3e3e3;
+    }
+  }
+}
+
+.el-dropdown-link {
+  cursor: pointer;
+  float: left;
+  width: 30px;
+  height: 30px;
+  border-radius: 4px;
+  text-align: center;
+  line-height: 30px;
+  overflow: hidden;
+   border: 0;
+  outline: none;
+  margin-left: 6px;
+  &.active {
+    @include bg_color_primary( 0.1);
+  }
+}
+
+.operate-icon {
+  margin-right: 4px;
+}
+
+.column-operate-btn {
+  font-size: 16px;
+}
+.pagination {
+  background: #fff;
+  padding: $paddingSize 0;
+  ::v-deep{
+    .el-select  {
+      margin-left: 24px;
+    }
+    .el-pagination__total {
+      float: right;
+    }
+  }
+}
+.field__photo {
+  &::v-deep {
+    .el-avatar {
+      width: 32px;
+      height: 32px;
+      line-height: 32px;
+      display: block;
+      >img {
+        width: 100%
+      }
+    }
+  }
+}
+.form-title {
+  padding: 6px 24px;
+  position: relative;
+  overflow: hidden;
+  font-size: 18px;
+  line-height: 36px;
+  white-space: pre-wrap;
+  background: #fff;
+  &::after {
+    content: '';
+    position: absolute;
+    left: -24px;
+    bottom: 0;
+    width: calc(100% + 48px);
+    height: 1px;
+    background: #e3e3e3;
+  }
+  .form-title-fold__icon {
+    @include font_color_primary;
+    font-size: 20px;
+    cursor: pointer;
+    transition: all .5s;
+    line-height: 36px;
+    margin-left: 10px;
+  }
+}
+
+.form-tilte__simple {
+  margin-bottom: -20px;
+  padding: 6px 12px 0;
+  &::after {
+    display: none;
+  }
+  .form-title-border {
+    border: 0;
+    padding-left: 0;
+  }
+  .form-title__operate {
+    display: none;
+  }
+  .form-title-fold__icon {
+    display: none;
+  }
+}
+.form-title-border{
+  border-left: 3px solid;
+  @include border_color_primary;
+  padding-left: 6px;
+}
+
+.form-title-edit {
+  font-size: 16px;
+  line-height: 36px;
+  cursor: pointer;
+  @include font_color_primary;
+  i {
+    margin-right: 4px;
+  }
+}
+</style>