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

package/src/base/data-check/DataCheck.vue

@@ -0,0 +1,261 @@
+<template>
+  <div class="container">
+    <el-button type="primary" size="default" @click="refreshData"  class="refersh-btn">刷新</el-button>
+    <el-tabs type="card" v-model="activeTab">
+      <el-tab-pane name="rule" label="按检查规则">
+        <el-card class="data-check__card" shadow="never">
+          <template v-slot:header><div class="clearfix">
+            <span><i class="epx-icon-ai61"></i>自定义规则检查</span>
+          </div></template>
+          <ul class="data-check__list data-check__list--custom" v-loading="customLoading">
+            <li class="data-check__item" v-for="item in customCheckList" :key="item.id" @click="viewDetail(item, 'custom')">
+              <p class="data-check__num">{{item.errorNum}}</p>
+              <p class="data-check__name">{{item.name}}</p>
+            </li>
+          </ul>
+        </el-card>
+        <el-card class="data-check__card" shadow="never">
+          <template v-slot:header><div class="clearfix card-hearder">
+            <span><i class="epx-icon-check"></i>字段规则检查</span>
+            <el-switch
+              v-model="openFlag">
+            </el-switch>
+          </div></template>
+          <ul v-if="openFlag" class="data-check__list data-check__list--base" v-loading="baseLoading">
+            <li class="data-check__item" v-for="item in baseCheckList" :key="item.id" @click="viewDetail(item, 'base')">
+              <p class="data-check__num">{{item.errorNum}}</p>
+              <p class="data-check__name">{{item.name}}</p>
+            </li>
+          </ul>
+        </el-card>
+        <el-card class="data-check__card" shadow="never">
+          <template v-slot:header><div class="clearfix card-hearder">
+            <span><i class="el-icon-warning"></i>关联数据检查</span>
+            <el-switch
+              v-model="openLinkFlag" @change="changeOpenLinkFlag">
+            </el-switch>
+          </div></template>
+          <ul v-if="openLinkFlag" class="data-check__list data-check__list--link">
+            <li class="data-check__item" v-for="item in linkCheckList" :key="item.id" @click="viewDetail(item, 'link')">
+              <p class="data-check__num">{{item.errorNum}}</p>
+              <p class="data-check__name">{{item.name}}</p>
+            </li>
+             <li class="data-check__item" v-if="linkLoading" v-loading="linkLoading"></li>
+          </ul>
+        </el-card>
+      </el-tab-pane>
+      <el-tab-pane name="list" label="按数据记录" lazy>
+        <epx-base-data-check-list :dataCheckId="dataCheckId" :metaId="$metaId" :meta="$meta" :scopeParams="$configs.scopeParams"></epx-base-data-check-list>
+      </el-tab-pane>
+    </el-tabs>
+
+  </div>
+</template>
+
+<script>
+import { component } from '@epxing/core/src/mixins'
+export default {
+  name: 'epx-base-data-check',
+  mixins: [component],
+  data () {
+    return {
+      activeTab: 'rule',
+      baseCheckList: [],
+      linkCheckList: [],
+      customCheckList: [],
+      baseLoading: false,
+      linkLoading: false,
+      customLoading: false,
+      dataCheckId: '',
+      openFlag: false,
+      openLinkFlag: false,
+      firstLinkOpen: true
+    }
+  },
+  methods: {
+    changeOpenLinkFlag (v) {
+      if (v) {
+        if (this.firstLinkOpen) {
+          this.firstLinkOpen = false
+          this.getLinkCheckData()
+        }
+      }
+    },
+    $refesh () {
+      this.getCheckData(true)
+    },
+    refreshData () {
+      this.getCheckData()
+    },
+    getCheckData (refesh) {
+      let { params = {}, scopeParams = [] } = this.$query
+      const { scopeParams: configScopeParams = [] } = this.$configs
+      if (configScopeParams) {
+        scopeParams = JSON.stringify([...scopeParams, ...configScopeParams])
+      }
+      this.baseLoading = true
+      this.customLoading = true
+      this.$http.$post({
+        action: 'dataCheck',
+        entityId: this.$metaId,
+        type: 'base',
+        refreshFlag: refesh ? '0' : '',
+        ...params,
+        scopeParams
+      })
+        .then(data => {
+          this.dataCheckId = data.dataCheckId
+          this.baseCheckList = data.item
+          this.baseLoading = false
+          if (this.openLinkFlag) {
+            this.getLinkCheckData(refesh)
+          }
+          this.getCustomCheckData()
+        })
+        .catch(err => {
+          this.$message.error(err.message)
+        })
+    },
+    getLinkCheckData (refesh) {
+      // 获取关联标识
+      const linkCheckList = []
+      const linkOrder = {}
+      const { relatedEntitys = [] } = this.$meta
+      let requestNum = relatedEntitys.length - 1
+      if (relatedEntitys.length > 0) {
+        this.linkLoading = true
+      }
+      relatedEntitys.forEach((related, index) => {
+        linkOrder[related.flag] = index
+        this.$http.$post({
+          action: 'dataCheck',
+          entityId: this.$metaId,
+          type: 'link',
+          linkFlag: related.flag,
+          dataCheckId: this.dataCheckId,
+          refreshFlag: refesh ? '0' : ''
+
+        })
+          .then(data => {
+            if (data.errorNum && data.errorNum > 0) {
+              linkCheckList.push(data)
+            }
+            this.linkCheckList = linkCheckList.sort((item, nextItem) => linkOrder[item.linkFlag] - linkOrder[nextItem.linkFlag])
+          })
+          .finally(() => {
+            requestNum--
+            if (requestNum === 0) {
+              this.linkLoading = false
+            }
+          })
+      })
+    },
+    getCustomCheckData () {
+      this.customLoading = true
+      this.$http.$post({
+        action: 'dataCheck',
+        entityId: this.$metaId,
+        type: 'custom',
+        dataCheckId: this.dataCheckId
+      })
+        .then(data => {
+          this.customCheckList = data.item
+        })
+        .finally(() => {
+          this.customLoading = false
+        })
+    },
+    viewDetail (item, checkType) {
+      this.goPage({
+        component: 'base-data-check-list-page',
+        metaId: this.$metaId,
+        params: {
+          checkType,
+          itemId: item.id,
+          dataCheckId: this.dataCheckId,
+          linkFlag: item.linkFlag
+        }
+      })
+    }
+  },
+  mounted () {
+    this.getCheckData()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.container {
+
+    :deep(.el-tabs__header) {
+      background: var(--epx-bg-card);
+    }
+
+}
+.refersh-btn {
+  margin-bottom: 10px;
+}
+.data-check__card {
+  margin-bottom: 20px;
+
+    :deep(.el-card__header) {
+      font-weight: bold;
+      font-size: var(--epx-font-size-l);
+      i {
+        @include font_color_primary;
+        margin-right: 10px;;
+      }
+    }
+    :deep(.el-card__body) {
+      padding: 10px;
+      min-height: 50px;
+    }
+
+}
+.data-check__list {
+  display: flex;
+  flex-wrap: wrap;
+}
+.data-check__item {
+  width: calc(20% - 20px);
+  margin: 10px;
+  height: 124px;
+  background: #FFF7EF;
+  border-radius: var(--epx-radius-base);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  font-size: var(--epx-font-size-l);
+  color: #444444;
+  cursor: pointer;
+}
+.data-check__num {
+  font-weight: bold;
+  font-size: 32px;
+  color: #FF8000;
+  line-height: 48px;
+}
+.data-check__list--link {
+  .data-check__item {
+    background: #FFF3F3;
+  }
+  .data-check__num {
+    color: #FF4242;
+  }
+}
+.data-check__list--custom {
+  min-height: 100px;
+  .data-check__item {
+    background: #F2F9FF;
+  }
+  .data-check__num {
+    color: #0874E7;
+  }
+}
+.card-hearder{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+</style>

package/src/base/data-check/DataCheckList.vue

@@ -0,0 +1,327 @@
+<template>
+  <div class="container">
+    <div class="operates">
+      <el-button type="primary" size="default" @click="exportFn">导出</el-button>
+       <div class="epx-entity-list__search-simple fr">
+        <epx-search-keyword v-model="searchKeyParams" :meta="$meta" :metaId="$metaId"></epx-search-keyword>
+        <span>
+            <el-button :style="{ marginLeft: '8px' }" type="primary" link @click="filterDrawer = true"><i class="epx-icon-filter" ></i>{{searchScopeParams.length > 0 ? `（${validScopeLength}）` : ''}}</el-button>
+            <el-button class="epx-entity-list__search-simple__clear" :style="{ display: searchScopeParams.length > 0 ? 'inline' : 'none' }" type="primary" link @click="searchScopeParams = []"><i class="epx-icon-clear"></i></el-button>
+            <epx-scope-drawer v-model:visible="filterDrawer" :metaId="$metaId" ref="filterDrawer" v-model="searchScopeParams" show-common />
+        </span>
+        </div>
+    </div>
+    <div class="table-container">
+      <el-table
+        ref="table"
+        :data="checkList"
+        border
+        :cell-style="cellStyleFn"
+        :header-cell-style="{ background: 'rgba(0,0,0,0.02)', color: '#121212' }"
+        style="width: 100%"
+        :height="$component.flex ? '100%' : ''"
+        v-loading="loading"
+      >
+        <el-table-column fixed="left" label="操作" width="100">
+          <template v-slot="scope">
+            <el-button @click="viewDetail(scope)" type="primary" link size="small"
+              >查看</el-button
+            >
+          </template>
+        </el-table-column>
+        <el-table-column
+          v-for="field in labelFields"
+          :key="field.attriName"
+          :prop="field.attriName + '#'"
+          :label="field.attriLabel"
+          width="180"
+        >
+        </el-table-column>
+        <el-table-column
+          v-for="field in busiKeyFields"
+          :key="field.attriName"
+          :prop="field.attriName + '#'"
+          :label="field.attriLabel"
+          width="180"
+        >
+        </el-table-column>
+        <el-table-column prop="ERROR_TEXT" label="数据质量检测结果" width="180">
+        </el-table-column>
+        <el-table-column
+          v-for="field in listFields"
+          :key="field.attriName"
+          :prop="field.attriName + '#'"
+          :label="field.attriLabel"
+          width="180"
+        >
+        </el-table-column>
+      </el-table>
+  </div>
+    <el-pagination
+      class="pagination"
+      :currentPage="currentPage"
+      :pageSizes="[5, 10, 15, 20, 30, 50, 100, 200]"
+      :pageSize="pageSize"
+      layout="prev, pager, next, jumper, sizes,total"
+      :total="total"
+      @size-change="sizeChange"
+      @current-change="currentChange"
+    >
+    </el-pagination>
+  </div>
+</template>
+
+<script>
+import { component } from '@epxing/core/src/mixins'
+export default {
+  name: 'epx-base-data-check-list',
+  mixins: [component],
+  props: {
+    dataCheckId: String,
+    metaId: String,
+    meta: Object,
+    scopeParams: Object
+  },
+  data () {
+    return {
+      currentPage: 1,
+      pageSize: 20,
+      listFields: [],
+      checkList: [],
+      total: 0,
+      loading: false,
+      searchScopeParams: [],
+      searchKeyParams: {},
+      filterDrawer: false
+    }
+  },
+  computed: {
+    validScopeLength () {
+      let length = 0
+      this.searchScopeParams.forEach(item => {
+        if (item.values) {
+          length++
+        } else if (!item.values && (item.mode === 'is_null' || item.mode === 'not_null')) {
+          length++
+        }
+      })
+      return length
+    }
+  },
+  watch: {
+    searchKeyParams (v) {
+      this.currentPage = 1
+      this.getData()
+    },
+    searchScopeParams () {
+      this.currentPage = 1
+      this.getData()
+    }
+  },
+  methods: {
+    $refesh () {
+      this.getData()
+    },
+    initComponent () {
+      const { checkType } = this.$query
+      if (checkType === 'link') {
+        this.getLinkFields()
+      } else {
+        this.getFields()
+      }
+    },
+    currentChange (current) {
+      this.getData(current)
+    },
+    sizeChange (size) {
+      this.currentPage = 1
+      this.pageSize = size
+      this.getData()
+    },
+    async getLinkFields () {
+      // 数据质量问题、外部标签、业务主键、关联对象字段
+      const labelFields = []
+      const busiKeyFields = []
+      const { linkFlag } = this.$query
+      const meta = this.$meta
+      const relation = meta.getRelationByFlag(linkFlag)
+      const metaId = relation.entityA
+      const linkMeta = await this.$store.dispatch({
+        type: 'ADD_META',
+        metaId: metaId
+      })
+      const fields = meta.getAllFieldConfigs()
+      fields.forEach((field) => {
+        if (field.attribute.isLabel === '1') {
+          labelFields.push(field)
+        } else if (field.attribute.busiKey === '1') {
+          busiKeyFields.push(field)
+        }
+      })
+      const linkFields = linkMeta.getAllFieldConfigs()
+      this.listFields = linkFields
+        .filter((field) => {
+          return (
+            !meta.keyNames.includes(field.attriName) &&
+            field.attribute.id !== relation.linkAttri
+          )
+        })
+        .map((item) => {
+          return {
+            ...item,
+            attriName: linkFlag.toUpperCase() + '|' + item.attriName
+          }
+        })
+      this.labelFields = labelFields
+      this.busiKeyFields = busiKeyFields
+      this.getData()
+    },
+    getFields () {
+      // 字段： 外部标签、业务主键、质量检查结果、其他字段
+      const meta = this.$meta
+      const fields = meta.getAllFieldConfigs()
+      const labelFields = []
+      const busiKeyFields = []
+      this.listFields = fields.filter((field) => {
+        if (field.attribute.isLabel === '1') {
+          labelFields.push(field)
+          return false
+        } else if (field.attribute.busiKey === '1') {
+          busiKeyFields.push(field)
+          return false
+        }
+        return !meta.keyNames.includes(field.attriName)
+      })
+      this.labelFields = labelFields
+      this.busiKeyFields = busiKeyFields
+      this.getData()
+    },
+    getData (current) {
+      const { checkType, linkFlag, scopeParams } = this.$query
+      if (current) this.currentPage = current
+      const allScopeParams = [...this.searchScopeParams]
+      if (scopeParams) allScopeParams.push(...scopeParams)
+      if (this.scopeParams) allScopeParams.push(...this.scopeParams)
+      this.loading = true
+      this.$http
+        .$post({
+          action: 'dataCheck',
+          entityId: this.metaId || this.$metaId,
+          type: checkType === 'link' ? 'linkList' : 'baseList',
+          dataCheckId: this.dataCheckId || this.$query.dataCheckId,
+          linkFlag,
+          itemId: this.$query.itemId,
+          columnFieldNames:
+            [...this.labelFields, ...this.busiKeyFields, ...this.listFields]
+              .map((item) => item.attriName)
+              .join('#,') + '#',
+          page: this.currentPage,
+          limit: this.pageSize,
+          scopeParams: JSON.stringify(allScopeParams),
+          ...this.searchKeyParams
+        })
+        .then((data) => {
+          this.checkList = data.entitys
+          this.total = data.total
+          this.loading = false
+          this.$nextTick(() => {
+            this.$refs.table.doLayout()
+          })
+        })
+        .catch((err) => {
+          this.$message.error(err.message)
+          this.loading = false
+        })
+    },
+    cellStyleFn ({ row, column }) {
+      if (
+        column.property &&
+        row.ERROR_FIELD.split(',').includes(column.property.replace('#', ''))
+      ) {
+        return { background: '#FFDFDF', color: '#E53131' }
+      }
+    },
+    exportFn () {
+      const { checkType, linkFlag } = this.$query
+      const loading = this.$loading({
+        lock: true,
+        text: '正在加载中',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      })
+      this.$http
+        .$post(
+          {
+            action: 'dataCheck',
+            entityId: this.metaId || this.$metaId,
+            export: '1',
+            type: checkType === 'link' ? 'linkList' : 'baseList',
+            dataCheckId: this.dataCheckId || this.$query.dataCheckId,
+            linkFlag,
+            itemId: this.$query.itemId,
+            columnFieldNames: [
+              ...this.labelFields,
+              ...this.busiKeyFields,
+              'ERROR_TEXT',
+              ...this.listFields
+            ]
+              .map((item) => item.attriName || item)
+              .join('#,') + '#'
+          },
+          {
+            responseType: 'blob'
+          }
+        )
+        .then(({ blob, filename }) => {
+          var a = document.createElement('a')
+          document.body.appendChild(a)
+          const objectUrl = URL.createObjectURL(blob)
+          a.href = objectUrl
+          a.download = filename
+          a.click()
+          window.URL.revokeObjectURL(objectUrl)
+          document.body.removeChild(a)
+          loading.close()
+        })
+        .catch((err) => {
+          loading.close()
+          this.$message.error(err.message)
+        })
+    },
+    viewDetail (scope) {
+      this.goPage({
+        component: 'base-data-check-detail-page',
+        metaId: this.$metaId,
+        params: {
+          id: scope.row.ID,
+          itemId: this.$query.itemId,
+          dataCheckId: this.dataCheckId || this.$query.dataCheckId
+        }
+      })
+    }
+  },
+  mounted () {}
+}
+</script>
+
+<style lang="scss" scoped>
+.container {
+  height: calc(100% - 20px);
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+}
+.operates {
+  padding-left: 10px;
+  padding-bottom: 20px;
+  flex-shrink: 0;
+}
+.table-container {
+  flex:1;
+  overflow: hidden;
+}
+
+.pagination {
+  flex-shrink: 0;
+}
+</style>