epx-frame 3.5.0-shpgy.1

package/src/frame/components/PageChart.vue

@@ -0,0 +1,306 @@
+<template>
+  <div class="container">
+    <organization-chart :class="['org-chart', 'l2r']" :datasource="{name: page.title, editable: false, children: pageList}" :pan="true" :zoom="true">
+      <template slot-scope="{ nodeData }">
+        <div class="org-node" title="nodeData.name">
+          <div class="org-node__title">
+            <span>{{nodeData.name}}</span>
+          </div>
+          <div class="org-node__operate">
+            <!-- <i class="el-icon-arrow-right" @click="openPageList"></i> -->
+            <i class="el-icon-edit-outline" v-if="nodeData.editable!==false" @click="openEditDrawer(nodeData)"></i>
+          </div>
+        </div>
+      </template>
+    </organization-chart>
+  </div>
+</template>
+
+<script>
+import OrganizationChart from 'vue-orgchart-direction'
+import 'vue-orgchart-direction/dist/orgchart.css'
+export default {
+  name: 'epx-page-chart',
+  components: { OrganizationChart },
+  props: {
+    page: {
+      type: Object,
+      default () {
+        return {}
+      }
+    },
+    selectComponentList: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    componentList: {
+      type: Array,
+      default () {
+        return []
+      }
+    }
+  },
+  data () {
+    return {
+      pageList: []
+    }
+  },
+  watch: {
+    selectComponentList: {
+      handler (v) {
+
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    getComponentsConfigs (selectComponentList, upId) {
+      selectComponentList.forEach(item => {
+        // 获取组件所属
+        item.component = this.componentMap[item.contentType]
+        const id = upId ? upId + '-' + item.id : item.id
+        item.compId = id
+        const { itemConfigs = {} } = this.pageConfigs
+        const configs = itemConfigs[id] || {}
+        item.configs = { ...(item.configs || {}), ...configs }
+        if (item.items) this.getComponentsConfigs(item.items, id)
+      })
+    },
+    getComponentMap () {
+      if (this.componentMap) return
+      const componentMap = {}
+      this.componentList.forEach(item => {
+        componentMap[item.CODE] = item
+      })
+      this.componentMap = componentMap
+    },
+    getPage () {
+      const comp = this.$parent.$parent.$children[1]
+      if (comp) {
+        const configComp = comp.$children[2]
+        if (configComp) {
+          this.configComp = configComp
+          this.getPageTree(this.selectComponentList)
+          if (this.pageList.length > 0) {
+            this.$http.getLabel({
+              entityId: 'FM_PAGE_CONFIG',
+              id: this.pageList.map(item => item.id).join(',')
+            })
+              .then(data => {
+                const labels = data.label.split(',')
+                labels.forEach((label, index) => {
+                  this.pageList.splice(index, 1, { ...this.pageList[index], name: label })
+                })
+              })
+          }
+        }
+      }
+    },
+    getPageTree (componentList) {
+      componentList.forEach(item => {
+        const comp = this.configComp.$refs[`config-item-${item.compId}`]
+        const configOptions = comp.$children[0].configOptions || []
+        configOptions.forEach(option => {
+          if (option.type === 'object' && option.object === 'FM_PAGE_CONFIG') {
+            const pageId = item.configs[option.key]
+            if (pageId) {
+              // 获取页面信息
+              this.pageList.push({
+                id: pageId,
+                option,
+                component: item
+              })
+            }
+          } else if (option.type === 'operates') {
+            const operates = item.configs[option.key] || []
+            operates.forEach(operate => {
+              if (operate.pageId) {
+                this.pageList.push({
+                  id: operate.pageId,
+                  option,
+                  component: item
+                })
+              }
+            })
+          } else if (option.type && option.type.includes('field')) {
+            const fields = item.configs[option.key] || []
+            fields.forEach(field => {
+              if (typeof field === 'object') {
+                if (field.detailPageId) {
+                  this.pageList.push({
+                    id: field.addPageId,
+                    option,
+                    component: item
+                  })
+                }
+                if (field.addPageId) {
+                  this.pageList.push({
+                    id: field.addPageId,
+                    option,
+                    component: item
+                  })
+                }
+              }
+            })
+          }
+        })
+        if (item.items) {
+          this.getPageTree(item.items)
+        }
+      })
+    },
+    openEditDrawer (node) {
+      this.$createPage({
+        metaId: 'FM_PAGE_CONFIG',
+        flag: 'v_visual_page_config',
+        component: 'visual-config',
+        id: node.id,
+        title: node.name,
+        pageType: 'EDIT'
+      })
+    }
+  },
+  created () {
+    const { config = {} } = this.page
+    this.pageConfigs = config
+    this.getComponentMap()
+    this.getComponentsConfigs(this.selectComponentList)
+    this.getPage()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.container {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  &::v-deep {
+    .org-chart__drawer {
+      .el-drawer__body {
+        height: 100%;
+        padding-bottom: 50px;
+        box-sizing: border-box;
+      }
+    }
+    .orgchart-container {
+      box-sizing: border-box;
+      height: 100%;
+      overflow: hidden;
+      background: #fff;
+      .node {
+        width: 160px;
+      }
+      .node:hover {
+        background: none;
+      }
+      .downLine {
+        width: 1px;
+         background: #ccc;
+       }
+
+       .leftLine, .topLine {
+        border-width: 1px;
+        border-color: #ccc;
+      }
+      .rightLine {
+         border-right: 1px solid transparent;
+       }
+       .orgchart {
+         background-image:linear-gradient(90deg,rgba(180,0,0,.1) 10%,transparent 0),linear-gradient(rgba(180,0,0,.1) 10%,transparent 0);
+       }
+    }
+  }
+}
+.org-chart.l2r {
+  position: relative;
+  &::v-deep {
+    .orgchart {
+      position: absolute;
+      left: 0;
+      top: 0;
+      transform: rotate(-90deg) rotateY(180deg);
+      transform-origin: left top;
+    }
+    .node {
+      width:50px;
+      height: 130px;
+    }
+  }
+  .org-node {
+    width: 130px;
+    transform: rotate(-90deg) translate(-20px,-40px) rotateY(180deg);
+    transform-origin: bottom center;
+  }
+}
+.org-node {
+  padding: 0 16px;
+  position: relative;
+  &:hover {
+    .org-node__title {
+       box-shadow: 2px 2px 5px 5px rgba(0,0,0,.2) ;
+    }
+    .org-node__operate {
+      display: flex;
+    }
+  }
+}
+.org-node__title {
+    cursor: pointer;
+    @include bg_color_primary;
+    color: #fff;
+    border: 1px solid;
+    @include border_color_primary;
+    font-size: 13px;
+    height: 40px;
+    line-height: 38px;
+    padding-top: 0;
+    padding-bottom: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    border-radius: 4px;
+}
+.org-node__operate {
+  position: absolute;
+  right:  -12px;
+  top: 0;
+  top: -50%;
+  color: #bbbec4;
+  display: none;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 80px;
+  i {
+    display: block;
+    font-size: 20px;
+    padding: 2px 0;
+    cursor: pointer;
+  }
+}
+.button-group {
+    position: absolute;
+    height: 50px;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 3;
+    background: #fff;
+    box-shadow: 0 -2px 16px rgba(0 ,0 ,0 , .1);
+    text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  .button {
+    margin: 0 16x;
+  }
+
+}
+.drawer-body {
+  height: 100%;
+  overflow: auto;
+}
+</style>

package/src/frame/components/PageSwipes.vue

@@ -0,0 +1,179 @@
+<template>
+  <!-- <el-tabs :style="$component.style" class="tabs" v-model="activeName" :type="type" @tab-click="handleClick">
+    <el-tab-pane v-for="component in components" :key="component.id" :label="componentLabel(component)" :name="component.id" lazy >
+      <component
+        class="component"
+        :ref="component.id"
+        v-bind="$attrs"
+        :is="'epx-' + component.contentType"
+        :id="getComponentId(component)"
+        :title="component.title"
+        :contentType="component.contentType"
+        :comp-configs="component.configs"
+        :items="component.items"
+      />
+    </el-tab-pane>
+  </el-tabs> -->
+  <van-swipe class="my-swipe" :autoplay="0" indicator-color="white">
+    <van-swipe-item>1</van-swipe-item>
+    <van-swipe-item>2</van-swipe-item>
+    <van-swipe-item>3</van-swipe-item>
+    <van-swipe-item>4</van-swipe-item>
+  </van-swipe>
+</template>
+
+<script>
+import component from '@/utils/mixins/component'
+export default {
+  name: 'epx-page-swipes',
+  mixins: [component],
+  items: [],
+  style: {
+    'margin-bottom': '0'
+  },
+  data () {
+    return {
+      activeName: '',
+      counts: {}
+    }
+  },
+  computed: {
+    type () {
+      const { type = (this.$isMobile ? '' : 'card') } = this.$configs
+      return type === 'card' ? 'card' : ''
+    },
+    components () {
+      const { items = [] } = this.$component
+      return items
+    },
+    getComponentId () {
+      return component => {
+        if (!this.isPage) {
+          const { id } = this.$component
+          return id + '-' + component.id
+        }
+        return component.id
+      }
+    },
+    componentLabel () {
+      return component => {
+        const count = this.counts[component.id]
+        if (count !== undefined) {
+          return `${component.title}(${count || 0})`
+        }
+        return component.title
+      }
+    }
+  },
+  methods: {
+    handleClick () {
+
+    },
+    beforeInitComponent () {
+      if (this.$isMobile) {
+        this.$component.style = { margin: 0, ...this.$component.style }
+      }
+    }
+  },
+  created () {
+    // 获取标签页内列表数量
+    const { tabIndex = 1 } = this.$query
+    if (this.components.length > 0) {
+      const firstItem = this.components[tabIndex - 1]
+      this.activeName = firstItem.id
+      // 获取标签页数量
+      // 格式化参数
+
+      this.components.forEach(component => {
+        if (component.tabCount) {
+          const scopeParams = this.$_.cloneDeep(component.countScopeParams || [])
+
+          // eslint-disable-next-line no-unused-vars
+          const that = this
+          for (const scopeKey in scopeParams) {
+            const scope = scopeParams[scopeKey]
+            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}`) || ''
+                } catch (error) {
+                  return scope.values
+                }
+              })
+            }
+            scope.values = values
+          }
+          const params = component.countParams || {}
+          this.$http.getCount({
+            entityId: this.$metaId,
+            scopeParams: JSON.stringify(scopeParams),
+            ...params
+          })
+            .then(data => {
+              if (data.total || data.total === 0) {
+                this.$set(this.counts, component.id, data.total || 0)
+              } else {
+                this.$set(this.counts, component.id, data)
+              }
+            })
+        }
+      })
+    }
+  },
+  watch: {
+    activeName () {
+      this.$nextTick(() => {
+        // this.components.forEach(component => {
+        //   let instance = this.$refs[component.id]
+        //   if (instance && instance[0]) {
+        //     instance = instance[0]
+        //     instance.$on('listData', params => {
+        //       // 根据id获取子组件
+        //       if (!this.counts[component.id]) {
+        //         this.$set(this.counts, component.id, params.total)
+        //       }
+        //     })
+        //   }
+        // })
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.tabs {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  &::v-deep {
+    .el-tabs__header {
+      background: #fff;
+      margin: 0;
+    }
+    >.el-tabs__content {
+      flex: 1;
+      overflow: hidden;
+      >.el-tab-pane {
+        height: 100%;
+        overflow: auto;
+        margin-left: -9px;
+        // margin-top: -10px;
+      }
+    }
+    .el-tabs__item.is-bottom:nth-child(2), .el-tabs__item.is-top:nth-child(2),  .el-tabs__item.is-bottom:nth-child(2), .el-tabs__item.is-top:nth-child(2) {
+      padding: 0 20px;
+    }
+  }
+  .component {
+    &::v-deep {
+      &:not(.layout):not(.base-page)  {
+        margin: 0 10px;
+      }
+    }
+  }
+}
+
+</style>

package/src/frame/components/PersonFormItem.vue

@@ -0,0 +1,92 @@
+<script>
+import AddFormItemVue from '@/frame/packages/add-form-item'
+export default {
+  name: 'epx-person-form-item',
+  extends: AddFormItemVue,
+  methods: {
+    unBind (fieldConfigs) {
+      this.$confirm('确认解绑?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.$http.$post({
+          action: 'unBind',
+          entityId: 'FM_USER',
+          provider: fieldConfigs.attriName === 'WECHAT_OPEN_ID' ? 'wechat' : fieldConfigs.attriName === 'QY_WECHAT_ID' ? 'wechatMP' : fieldConfigs.attriName === 'DING_TALK_ID' ? 'dingtalk' : 'qq'
+
+        })
+          .then(data => {
+            this.$message.success('解绑成功')
+            if (this.form) {
+              this.form.$refesh()
+            }
+          })
+          .catch(err => {
+            this.$message.error(err.message)
+          })
+      })
+    },
+    renderForm () {
+      if (this.fieldsConfigs.length > 0) {
+        return (
+          <epx-table-form class="form-content" ref="form" metaId={this.$metaId} fieldsConfigs={this.fieldsConfigs} vModel={this.data} column={this.column} labelAlign={this.$configs.labelAlign}
+            scopedSlots={{
+              default: ({ showLabel, fieldConfigs, metaId, ruleMetaId }) => {
+                return fieldConfigs.attriName === 'WECHAT_OPEN_ID' || fieldConfigs.attriName === 'QY_WECHAT_ID' || fieldConfigs.attriName === 'DING_TALK_ID' || fieldConfigs.attriName === 'QQ_OPEN_ID' ? (
+                  <epx-table-form-item
+                    show-label={showLabel}
+                    label={fieldConfigs.attriLabel}
+                    metaId={metaId}
+                    ruleMetaId={ruleMetaId}
+                    fieldConfigs={fieldConfigs}
+                    rules={[{
+                      required: fieldConfigs.isRequired === '1' && fieldConfigs.state !== 'SEARCH',
+                      message: `${fieldConfigs.attriLabel}不能为空`
+                    }]}
+                  >
+                    <van-field
+                      vModel={this.data[fieldConfigs.attriName]}
+                      label={fieldConfigs.attriLabel}
+                      readonly={true}
+                      rows="1"
+                      autosize
+                      type="input"
+                      scopedSlots={{
+                        button: () => {
+                          if (this.data[fieldConfigs.attriName]) {
+                            return <el-button size="small" type="primary" onClick={this.unBind.bind(this, fieldConfigs)}>解绑</el-button>
+                          }
+                        }
+                      }}
+                    />
+                  </epx-table-form-item>
+                ) : (
+                  <epx-table-form-item
+                    show-label={showLabel}
+                    label={fieldConfigs.attriLabel}
+                    metaId={metaId}
+                    ruleMetaId={ruleMetaId}
+                    fieldConfigs={fieldConfigs}
+                    rules={[{
+                      required: fieldConfigs.isRequired === '1' && fieldConfigs.state !== 'SEARCH',
+                      message: `${fieldConfigs.attriLabel}不能为空`
+                    }]}
+                  >
+                  </epx-table-form-item>
+                )
+              }
+            }}
+          >
+          </epx-table-form>
+        )
+      }
+    }
+  }
+
+}
+</script>
+
+<style>
+
+</style>