epx-frame 3.5.0-shpgy.1

package/src/frame/components/ReportList.vue

@@ -0,0 +1,493 @@
+
+<script>
+import ListVue from '@/frame/packages/entity-list'
+export default {
+  name: 'epx-report-list-comp',
+  extends: ListVue,
+  data () {
+    return {
+      activeDropDown: null,
+      reportTypeList: [
+        { icon: 'epx-icon-tongjibiao', text: '统计表', type: '1', chartType: '' },
+        { icon: 'epx-icon-bingzhuangtu', text: '饼状图', type: '2', chartType: 'pie' },
+        { icon: 'epx-icon-huanxingtu', text: '空心饼状图', type: '2', chartType: 'circularPie' },
+        { icon: 'epx-icon-zhexiantu', text: '折线图', type: '2', chartType: 'line' },
+        { icon: 'epx-icon-zhuzhuangtu', text: '柱状图', type: '2', chartType: 'column' },
+        { icon: 'epx-icon-tiaoxingtu', text: '横向柱状图', type: '2', chartType: 'horiColumn' },
+        { icon: 'epx-icon-loudoutu', text: '漏斗图', type: '2', chartType: 'funnel' }
+      ]
+    }
+  },
+  methods: {
+    PAGE_COPY (config = {}, row) {
+      let item = null
+      if (row) {
+        item = row
+      } else {
+        if (this.selection.length > 1) {
+          this.$message.error('请不要选择多个记录')
+          return
+        }
+        if (this.selection.length === 0) {
+          this.$message.error('请选择一个记录')
+          return
+        }
+        item = this.selection[0]
+      }
+      this.$http.get({
+        entityId: this.$metaId,
+        id: item.ID
+      })
+        .then(data => {
+          if (data && data.data) {
+            const { addPage } = this.$configs
+            const { pageFlag = 'copy' } = config
+            const initData = { ...data.data }
+            const oldRecordId = data.data.ID
+            initData.ID = ''
+            initData['ID#'] = ''
+            const query = {
+              metaId: this.$metaId,
+              flag: pageFlag,
+              component: addPage,
+              pageType: 'ADD',
+              openType: '2',
+              oldRecordId,
+              initData,
+              callback: this.getData
+            }
+            this.$createPage({
+              ...query
+            })
+          }
+        })
+    },
+    viewReport (config, item) {
+      const { pageFlag: designPageFlag } = config
+      // const { designPageFlag } = this.pageConfig
+      let key = 'ID'
+      if (this.$meta) {
+        key = this.$meta.getKey()
+      }
+      const query = {
+        metaId: this.$metaId,
+        flag: designPageFlag,
+        chartType: item.CHART_TYPE,
+        reportType: item.TYPE,
+        reportId: item[key],
+        reportName: item.NAME,
+        staObject: item.OBJECT
+      }
+      // this.$store.commit(SET_ROUTER_QUERY, { reportId: query.reportId, staObject: query.staObject })
+      this.$createPage({
+        ...query
+      })
+    },
+    designReport (config, item) {
+      const { pageFlag: designPageFlag } = config
+      // const { designPageFlag } = this.pageConfig
+      let key = 'ID'
+      if (this.$meta) {
+        key = this.$meta.getKey()
+      }
+      const query = {
+        metaId: this.$metaId,
+        flag: designPageFlag,
+        chartType: item.CHART_TYPE,
+        reportType: item.TYPE,
+        reportId: item[key],
+        reportName: item.NAME,
+        staObject: item.OBJECT,
+        component: 'report-chart'
+      }
+      this.$createPage({
+        ...query
+      })
+    },
+    renderTable () {
+      const typeIcon = {}
+      this.reportTypeList.forEach(item => (typeIcon[item.chartType || item.type] = item.icon))
+      return (
+        <div class="report-container">
+          <ul class="report-card__list" v-loading={this.loading}>
+            <li class="report-card__item" onClick={this.goPage.bind(this, {
+              component: 'entity-add-page',
+              pageFlag: 'add',
+              openMode: '2',
+              params: {
+                callback: (entity) => {
+                  if (entity) {
+                    this.goPage({ component: 'report-design' }, entity)
+                  }
+                }
+              }
+            })}>
+              <div class="report-card__content">
+                <div class="report-create">
+                  <i class="el-icon-circle-plus-outline"></i>
+                  <p>创建报表</p>
+                </div>
+              </div>
+            </li>
+            {
+              this.data.map(item => (
+                <li class="report-card__item" onClick={this.goPage.bind(this, { component: 'report-design' }, item)}>
+                  <div class="report-card__header">
+                    <i class={typeIcon[item.CHART_TYPE || item.TYPE]}></i>
+                    {item['CHART_TYPE#'] || item['TYPE#']}
+                  </div>
+                  <div class="report-card__content">
+                    {item.NAME}
+                  </div>
+                  <div class="component-operate" onClick={e => e.stopPropagation()}>
+                    <div class="component-operate__inner">
+                      {
+                        this.unfoldColumnOperates.map(operate => (
+                          <el-button
+                            class="component-operate__item"
+                            key={operate.text}
+                            type="text"
+                            size="small"
+                            onClick={this.$handler.bind(this, operate, item)}
+                          >
+                            {operate.iconCls && <i class={operate.iconCls}></i>}
+                            {operate.text}
+                          </el-button>
+                        ))
+                      }
+                      {this.foldColumnOperates.length > 0 && (
+                        <el-dropdown class="component-operate__item" trigger="click" onVisible-change={ show => (this.activeDropDown = show ? item.ID : '')}>
+                          <span class={['dropdown-link', { active: this.activeDropDown === item.ID }]}>
+                            <i class="el-icon-more"></i>
+                          </span>
+                          <el-dropdown-menu slot="dropdown">
+                            {
+                              this.foldColumnOperates.map(operate => (
+                                <el-dropdown-item v-for="operate in foldColumnOperates" key={operate.text} nativeOnClick={this.$handler.bind(this, operate, item)} icon={operate.iconCls}>
+                                  {operate.text}
+                                </el-dropdown-item>
+                              ))
+                            }
+                          </el-dropdown-menu>
+                        </el-dropdown>
+                      )}
+                    </div>
+                  </div>
+                </li>
+              ))
+
+            }
+
+          </ul>
+          {
+            this.$configs.pageFlag && (
+              <div class="pagination">
+                <el-pagination
+                  currentPage={this.currentPage}
+                  pageSizes={[5, 10, 15, 20, 30, 50, 100, 200]}
+                  pageSize={this.pageSize}
+                  layout="prev, pager, next, jumper, sizes,total"
+                  total={this.total}
+                  onSize-change={this.sizeChange}
+                  onCurrent-change={this.currentChange}
+                >
+                </el-pagination>
+              </div>
+            )
+          }
+        </div>
+      )
+    }
+  }
+}
+</script>
+<style scoped lang="scss">
+$paddingSize: 16px;
+.list-container {
+  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: 14px;
+}
+.pagination {
+  background: transparent;
+  padding: $paddingSize 0;
+   &::v-deep{
+    .el-pagination {
+      .el-select  {
+        margin-left: 24px;
+      }
+      .number, button {
+        background: transparent;
+      }
+      .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: 16px;
+  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: 14px;
+  line-height: 36px;
+  cursor: pointer;
+  @include font_color_primary;
+  i {
+    margin-right: 4px;
+  }
+}
+</style>
+
+<style lang="scss" scoped>
+.report-container {
+  overflow-x: hidden;
+  min-height: 300px;
+}
+.report-card__list {
+  width: calc(100% + 20px);
+  display: flex;
+  flex-wrap: wrap;
+  margin: 0 -10px;
+  margin-bottom: -10px;
+}
+.no-data {
+  text-align: center;
+  color: #999;
+  >i {
+    font-size: 100px;
+  }
+}
+.report-card__item {
+  box-sizing: border-box;
+  width: calc(25% - 20px);
+  margin: 10px;
+  height: 148px;
+  background: #fff;
+  padding: 0 20px;
+  display: flex;
+  flex-direction: column;
+  cursor: pointer;
+  &:hover {
+    .component-operate__inner  {
+      display: flex;
+    }
+  }
+}
+.report-create {
+  @include font_color_primary;
+  text-align: center;
+  i {
+    font-size: 40px;
+    margin-bottom: 10px;
+  }
+}
+.report-card__header {
+  font-size: 14px;
+  line-height: 40px;
+  color: #666;
+  i {
+    margin-right: 4px;
+  }
+}
+.report-card__content {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #121212;
+  font-size: 16px;
+  line-height: 24px;
+}
+.component-operate {
+  height: 40px;
+}
+.component-operate__inner {
+  display: none;
+  height: 100%;
+  align-items: center;
+}
+.component-operate__item {
+  flex: 1;
+  font-size: 14px;
+  border-right: 1px solid #e3e3e3;
+  padding: 0;
+  margin-left: 0;
+  text-align: center;
+  &:last-child {
+    border-right: 0;
+    // color: #C83C3C;
+    // &:hover {
+    //   color: #C83C3C;
+    // }
+  }
+}
+.dropdown-link {
+  cursor: pointer;
+}
+</style>