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

package/src/components/ReportList.vue

@@ -0,0 +1,647 @@
+
+<script>
+// @jsx-vue3（T30 JSX 批：Vue3 JSX 语法，@vue/babel-plugin-jsx 编译）
+
+import ListVue from '@epxing/components/src/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' },
+        { icon: 'epx-icon-ciyun', text: '词云', type: '2', chartType: 'wordcloud' },
+        { icon: 'epx-icon-leidatu', text: '雷达图', type: '2', chartType: 'radar' }
+      ]
+    }
+  },
+  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="primary" link
+                            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" onVisibleChange={ show => (this.activeDropDown = show ? item.ID : '')} v-slots={{
+                          dropdown: () => (<el-dropdown-menu>
+                            {
+                              this.foldColumnOperates.map(operate => (
+                                <el-dropdown-item v-for="operate in foldColumnOperates" key={operate.text} onClick={this.$handler.bind(this, operate, item)} icon={operate.iconCls}>
+                                  {operate.text}
+                                </el-dropdown-item>
+                              ))
+                            }
+                          </el-dropdown-menu>)
+                        }}>
+                          <span class={['dropdown-link', { active: this.activeDropDown === item.ID }]}>
+                            <i class="el-icon-more"></i>
+                          </span>
+                        </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}
+                  onSizeChange={this.sizeChange}
+                  onCurrentChange={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);
+    }
+  }
+
+    :deep(.el-table__header-wrapper-copy),
+    :deep(.el-table__fixed-header-wrapper-copy) {
+      .caret-wrapper {
+        opacity: 0;
+      }
+    }
+    :deep(.operate-column__cell) {
+      .cell {
+        display: flex;
+        align-items: center;
+        line-height:30px;
+        .el-table__placeholder {
+          flex-shrink: 0;
+        }
+      }
+    }
+
+}
+.search-container {
+  display: flex;
+  align-items: center;
+}
+.search-simple {
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+}
+
+.list-table {
+  background: var(--epx-bg-card);
+  // padding:0 12px;
+   // 无边框
+  &.no-border {
+    border: 0;
+    border-top: dashed 1px var(--epx-border);
+    &::after {
+      display: none
+    }
+
+      :deep(th.is-leaf),
+      :deep(td) {
+       border-right: 0
+      }
+
+  }
+}
+.is-label {
+  @include font_color_primary;
+  cursor: pointer;
+}
+.list-operates {
+  background: var(--epx-bg-card);
+  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 var(--epx-border);
+    }
+  }
+}
+
+.el-dropdown-link {
+  cursor: pointer;
+  float: left;
+  width: 30px;
+  height: 30px;
+  border-radius: var(--epx-radius-base);
+  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: var(--epx-font-size-base);
+}
+.pagination {
+  background: transparent;
+  padding: $paddingSize 0;
+
+    :deep(.el-pagination) {
+      .el-select  {
+        margin-left: 24px;
+      }
+      .number, button {
+        background: transparent;
+      }
+      .el-pagination__total {
+        float: right;
+      }
+    }
+
+}
+.field__photo {
+
+    :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: var(--epx-font-size-l);
+  line-height: 36px;
+  white-space: pre-wrap;
+  background: var(--epx-bg-card);
+  &::after {
+    content: '';
+    position: absolute;
+    left: -24px;
+    bottom: 0;
+    width: calc(100% + 48px);
+    height: 1px;
+    background: var(--epx-border);
+  }
+  .form-title-fold__icon {
+    @include font_color_primary;
+    font-size: var(--epx-font-size-xl);
+    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: var(--epx-font-size-base);
+  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: var(--epx-text-secondary);
+  >i {
+    font-size: 100px;
+  }
+}
+.report-card__item {
+  box-sizing: border-box;
+  width: calc(25% - 20px);
+  margin: 10px;
+  height: 148px;
+  background: var(--epx-bg-card);
+  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: var(--epx-font-size-base);
+  line-height: 40px;
+  color: var(--epx-text);
+  i {
+    margin-right: 4px;
+  }
+}
+.report-card__content {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: var(--epx-text);
+  font-size: var(--epx-font-size-l);
+  line-height: 24px;
+}
+.component-operate {
+  height: 40px;
+}
+.component-operate__inner {
+  display: none;
+  height: 100%;
+  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;
+}
+.field-setting__btn {
+  display: inline;
+  margin-left: 24px;
+  cursor: pointer;
+  i {
+    margin-right: 4px
+  }
+}
+.field-setting {
+
+}
+.field-setting__drawer {
+
+    :deep(.el-drawer__body) {
+      display: flex;
+      flex-direction: column;
+    }
+
+  .field-setting__content {
+    flex: 1;
+    overflow: auto;
+  }
+}
+.field-setting__header{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 46px;
+  padding: 0 16px;
+  border-bottom: 1px solid var(--epx-border);
+  >span {
+    font-size: var(--epx-font-size-l);
+    font-weight: 600px;
+    border-left: 4px solid;
+    @include border_color_primary;
+    padding-left:6px;
+    line-height: 1;
+
+      :deep(.el-checkbox) {
+        margin-left: 20px;
+      }
+
+  }
+  >i {
+    font-size: var(--epx-font-size-l);
+    cursor: pointer;
+  }
+}
+.field-setting__operate {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 40px;
+  padding: 0 16px;
+  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
+
+    :deep(.el-button) {
+      color: #EE4949;
+      i {
+        margin-right: 4px;
+      }
+    }
+
+}
+.setting-field__checkboxgroup {
+  font-size: var(--epx-font-size-base);
+}
+.field-setting__item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  cursor: pointer;
+  padding:  0 24px;
+  height: 40px;
+  >span {
+    color: var(--epx-text);
+    >i {
+      margin-right: 4px;
+    }
+  }
+   &:hover {
+    @include bg_color_primary(.1);
+    >i {
+      display: inline;
+    }
+    }
+  >i {
+    color :#EE4949;
+    display: none;
+
+  }
+}
+.field-setting__footer {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 50px;
+  border-top: 1px solid var(--epx-border);
+  box-sizing: border-box;
+  padding: 0 16px;
+
+    :deep(.el-button) {
+      width: 100%;
+    }
+
+}
+.add-field {
+  max-height: 480px;
+  overflow: auto;
+}
+.field-meta {
+  padding: 12px 0;
+  border-bottom: 1px dashed var(--epx-border);
+  &:last-child {
+    border: 0;
+  }
+}
+.field-meta__header {
+  line-height: 24px;
+  margin-bottom: 12px;
+  > span {
+    border-left: 4px solid;
+    @include border_color_primary;
+    font-size: var(--epx-font-size-l);
+    font-weight: 600px;
+    padding-left: 6px;
+    padding-right: 10px;
+  }
+}
+.field-meta__content {
+  line-height: 24px;
+}
+.add-field-dialog {
+
+    :deep(.el-dialog__footer) {
+      padding-bottom: 10px;
+      text-align: center;
+      border-top: 1px solid var(--epx-border);
+    }
+
+}
+</style>