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

package/src/components/DataLogTimeline.vue

@@ -0,0 +1,202 @@
+<template>
+  <div class="timeline-container">
+    <div class="timeline-header">
+      <span>记录名称：{{ logInfo.LABEL }}</span>
+      <span>业务数据ID：{{ logInfo.ENTITY_ID }}</span>
+    </div>
+    <div class="timeline-content">
+      <el-timeline class="timeline">
+        <el-timeline-item :class="['timeline-item', 'timeline-item'+ '--' + item.OPERATE_TYPE, { 'is-active': item.ID===logInfo.ID  }]" :timestamp="item.OPERATE_TIME" placement="top" v-for="item in dataList" :key="item.ID">
+         <div class="timeline-item__content">
+            <p>{{ item['OPERATE_TYPE#'] }}</p>
+            <p>操作人：{{ item.USER_NAME }}</p>
+            <el-button v-if="item.ID!==logInfo.ID" class="timeline-item__operate" type="primary" link @click="viewDetail(item)">查看详情</el-button>
+         </div>
+         <i v-if="item.ID===logInfo.ID" class="timeline-item__current-icon el-icon-caret-left"></i>
+        </el-timeline-item>
+      </el-timeline>
+    </div>
+  </div>
+</template>
+<script>
+import { component } from '@epxing/core/src/mixins'
+export default {
+  mixins: [component],
+  name: 'epx-data-log-timeline',
+  data () {
+    return {
+      logInfo: {},
+      dataList: []
+    }
+  },
+  methods: {
+    getLog () {
+      this.$http.get({
+        entityId: this.$metaId,
+        id: this.$query.id
+      })
+        .then(data => {
+          this.logInfo = data.data
+          this.getDataList()
+        })
+    },
+    getDataList () {
+      this.$http.list({
+        entityId: this.$metaId,
+        'scope.ENTITY_ID': this.logInfo.ENTITY_ID,
+        columnFieldNames: 'ID#,ENTITY_ID#,OPERATE_TIME#,OPERATE_TYPE#,USER_ID#,USER_NAME#',
+        limit: 200,
+        order_field: 'OPERATE_TIME',
+        order_mode: 'DESC'
+      })
+        .then(data => {
+          this.dataList = data.entitys
+        })
+    },
+    viewDetail (item) {
+      this.goPage({
+        metaId: this.$metaId,
+        pageId: this.$pageId,
+        component: 'entity-add-page',
+        pageType: 'DETAIL',
+        params: {
+          id: item.ID
+        }
+      })
+    }
+  },
+  created () {
+    this.getLog()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.timeline-container {
+  padding: 10px;
+  background: var(--epx-bg-card);
+}
+.timeline-header {
+  color: #444444;
+  padding: 10px;
+  >span {
+    margin-right: 40px;
+  }
+}
+.timeline {
+  padding-left: 180px;
+  padding-top: 60px;
+
+    :deep(.el-timeline-item__timestamp) {
+      position: absolute;
+      left: -12px;
+      transform: translateX(-100%);
+      color: var(--epx-text);
+      padding-top: 2px;
+    }
+    :deep(.el-timeline-item__content) {
+      transform: translateY(calc(-50% + 6px))
+    }
+
+}
+.timeline-item.is-active {
+
+    :deep(.el-timeline-item__node) {
+      left: -6px;
+      top: -6px;
+      width: 20px;
+      height: 20px;
+      background: var(--epx-bg-card);
+      border-width: 1px;
+      border-style: solid;
+      &::before {
+        content: '';
+        display: block;
+        position: absolute;
+        left:4px;
+        top: 4px;
+        width: 12px;
+        height: 12px;
+        border-radius: 50%;
+      }
+    }
+
+}
+.timeline-item__content {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  box-sizing: border-box;
+  width: 240px;
+  height: 88px;
+  padding: 8px 16px;
+  border-radius: var(--epx-radius-base);
+  > p {
+    color: #444444;
+    line-height: 22px;
+    margin-bottom: 2px;
+    &:first-child {
+      font-size: var(--epx-font-size-l);
+      font-weight: 600;
+      color: var(--epx-text);
+      line-height: 24px;
+      margin-bottom: 4px;
+    }
+  }
+}
+.timeline-item__operate {
+  padding: 0;
+}
+.timeline-item--update {
+  .timeline-item__content {
+    background: rgba(232,150,0,0.08);
+  }
+
+    :deep(.el-timeline-item__node) {
+      background: #E89600;
+      border-color: #E89600;
+      &::before {
+        background: #E89600;
+      }
+    }
+
+}
+.timeline-item--add {
+  .timeline-item__content {
+    background: rgba(18,176,51,0.08);
+  }
+
+    :deep(.el-timeline-item__node) {
+      background: #12B033;
+      border-color: #12B033;
+      &::before {
+        background: #12B033;
+      }
+    }
+
+}
+
+.timeline-item--delete {
+  .timeline-item__content {
+    background: rgba(231,58,58,0.08);
+  }
+
+    :deep(.el-timeline-item__node) {
+      background: #E73A3A;
+      border-color: #E73A3A;
+      &::before {
+        background: #E73A3A;
+      }
+    }
+
+}
+.timeline-item__current-icon {
+  position: absolute;
+  top: 50%;
+  left: 240px;
+  @include font_color_primary;
+  font-size: 24px;
+  margin-top: -12px;
+}
+</style>

package/src/components/DataSnapshot.vue

@@ -0,0 +1,264 @@
+<template>
+  <div>
+    <ul class="snapshot-list">
+      <li class="snapshot-item" @click="createSnapshot('1')">
+        <div class="snapshot-item__img">
+          <img src="@/assets/images/snapshot-realtime.png" alt="">
+        </div>
+        <div class="snapshot-item__text">
+          <p class="snapshot-item__title">实时快照</p>
+          <p class="snapshot-item__content">将系统中的当前数据进行一个备份，实时快照数据一旦生成，就不能重新生成，也不能被修改</p>
+        </div>
+      </li>
+      <li class="snapshot-item" @click="createSnapshot('2')">
+        <div class="snapshot-item__img">
+          <img src="@/assets/images/snapshot-history.png" alt="">
+        </div>
+        <div class="snapshot-item__text">
+          <p class="snapshot-item__title">历史回溯</p>
+          <p class="snapshot-item__content">根据数据的变化过程记录或数据日志记录，将数据回溯到指定时间点的状态。通过历史回溯产生的快照，可以重新反复生成</p>
+        </div>
+      </li>
+      <li class="snapshot-item" @click="createSnapshot('3')">
+        <div class="snapshot-item__img">
+          <img src="@/assets/images/snapshot-manual.png" alt="">
+        </div>
+        <div class="snapshot-item__text">
+          <p class="snapshot-item__title">手动快照</p>
+          <p class="snapshot-item__content">手动导入某个时间点数据</p>
+        </div>
+      </li>
+    </ul>
+    <el-dialog ref="dialog" title="填写快照信息" width="480px" v-model="showFormDialog" append-to-body>
+      <div class="dialog-body">
+        <div class="dialog-form__item">
+          <label>快照名称：</label>
+          <el-input
+            placeholder="请输入内容"
+            v-model="name">
+          </el-input>
+        </div>
+        <div class="dialog-form__item">
+          <label>快照数据时间：</label>
+          <el-date-picker
+            v-model="date"
+            type="date"
+            value-format="YYYY-MM-DD"
+            @change="changeDate"
+            placeholder="选择日期">
+          </el-date-picker>
+        </div>
+        <div class="dialog-form__item">
+          <label>备注说明：</label>
+          <el-input
+            type="textarea"
+            :rows="3"
+            placeholder="请输入内容"
+            v-model="remark">
+          </el-input>
+        </div>
+      </div>
+      <template v-slot:footer><div class="dialog-footer">
+        <el-button type="primary" @click="setSnapshot">生成快照</el-button>
+        <el-button @click="showFormDialog = false">取 消</el-button>
+      </div></template>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import component from '@epxing/core/src/mixins/component'
+export default {
+  name: 'epx-data-snapshot',
+  mixins: [component],
+  data () {
+    return {
+      showFormDialog: false,
+      mode: '',
+      name: '',
+      date: '',
+      remark: ''
+    }
+  },
+  methods: {
+    createSnapshot (mode) {
+      this.mode = mode
+      if (mode === '1') {
+        this.$confirm('确定要生成当前时间的快照数据吗?', this.$t('hint'), {
+          confirmButtonText: '生成快照',
+          cancelButtonText: this.$t('cancel'),
+          type: 'warning'
+        }).then(() => {
+          this.setSnapshot()
+        }).catch(() => {})
+      } else {
+        this.showFormDialog = true
+      }
+    },
+    changeDate () {
+      if (this.mode === '2') {
+        this.name = this.$moment(this.date).format('YYYY年MM月DD') + '历史回溯快照'
+      }
+    },
+    setSnapshot () {
+      const { id, code, schemeId, schemeCode } = this.$query
+      const params = {
+        action: 'snapshot',
+        entityId: 'FM_DATA_SNAPSHOT',
+        schemeCode: schemeCode || code,
+        mode: this.mode
+      }
+      if (schemeId || id) {
+        params.schemeId = schemeId || id
+      }
+      if (this.mode !== '1') {
+        if (!this.date) {
+          this.$message.error('请选择快照数据时间')
+          return
+        }
+        params.name = this.name
+        params.date = this.date
+        params.remark = this.remark
+      }
+      this.loading = this.$loading({
+        lock: true,
+        text: '快照数据生成中，请耐心等待...',
+        spinner: 'el-icon-loading'
+      })
+      this.$http.save(params, {
+        domainContext: this.appConfig['SYSTEM|DOMAIN|CONTEXT']
+      })
+        .then((requestId) => {
+          this.timer = setInterval(async () => {
+            const result = await this.getResult(requestId)
+            if (result === 'END') {
+              this.showFormDialog = false
+              this.date = ''
+              this.name = ''
+              this.remark = ''
+              this.loading.close()
+              this.backPage()
+              clearInterval(this.timer)
+            } else if (result === 'ERROR') {
+              this.loading.close()
+              this.isRequesting = false
+              this.$message.error('创建数据快照失败')
+              clearInterval(this.timer)
+            }
+          }, 2000)
+        })
+        .catch(err => {
+          this.loading.close()
+          this.isRequesting = false
+          this.$message.error(err.message)
+        })
+    },
+    getResult (requestId) {
+      return this.$http.get({
+        entityId: 'FM_DATA_SNAPSHOT',
+        id: requestId
+      })
+        .then(data => {
+          return data.data.STATUS
+        })
+    }
+  },
+  beforeUnmount () {
+    if (this.timer) clearInterval(this.timer)
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.snapshot-list {
+  display: flex;
+}
+.snapshot-item {
+  width: 266px;
+  margin: 20px;
+  height: 350px;
+  background: var(--epx-bg);
+  border-radius: var(--epx-radius-base);
+  cursor: pointer;
+  &:hover {
+    box-shadow: 0px 10px 16px -4px rgba(0,0,0,0.15);
+    .snapshot-item__text {
+      justify-content: flex-start;
+    }
+    .snapshot-item__img {
+      height: 180px;
+    }
+    .snapshot-item__content  {
+      display: block;
+    }
+  }
+  &:nth-child(2) {
+    .snapshot-item__img {
+      background: linear-gradient(360deg, #FAF6F1 0%, #FBE9D4 100%);
+    }
+  }
+  &:nth-child(3) {
+    .snapshot-item__img {
+      background: linear-gradient(360deg, #EBF8F0 0%, #CAECD6 100%);
+    }
+  }
+}
+.snapshot-item__img {
+  transition: all .5s;
+  height: 246px;
+  background: linear-gradient(360deg, #F4FAFF 0%, #DBEAFA 100%);
+  border-radius: 4px 4px 0px 0px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  >img {
+    width: 160px;
+  }
+}
+.snapshot-item__text {
+  transition: all .5s;
+  height: calc(100% - 246px);
+  box-sizing: border-box;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+}
+.snapshot-item__title {
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--epx-text);
+  line-height: 24px;
+}
+.snapshot-item__content {
+  margin-top: 10px;
+  display: none;
+  font-size: var(--epx-font-size-base);
+  font-weight: 400;
+  color: var(--epx-text);
+  line-height: 22px;
+}
+.dialog-body {
+
+}
+.dialog-form__item {
+  display: flex;
+  align-items: center;
+  margin: 10px 0;
+  label {
+    width: 140px;
+    text-align: right;
+  }
+
+    :deep(.el-input),
+    :deep(.el-textarea) {
+      width: 260px;
+    }
+
+}
+.dialog-footer {
+  text-align: center;
+}
+</style>

package/src/components/DataSnapshotList.vue

@@ -0,0 +1,79 @@
+<script>
+import EntityList from '@epxing/components/src/entity-list'
+import { evalWith } from '@epxing/utils/src/eval-with'
+export default {
+  name: 'epx-data-snapshot-list',
+  extends: EntityList,
+  methods: {
+    viewEntity (config, item) {
+      // 获取方案对应的列表页面
+      const { 'SCHEME|PAGE': schemePage, 'SCHEME|ENTITY': schemeEntity } = item
+      const { detailFlag, openMode, detailPageParams = {} } = this.$configs
+      const { params: detailParams = {}, openMode: detailOpenMode = openMode } = config
+      if (!detailFlag) return
+      let key = 'ID'
+      if (this.$meta) {
+        key = this.$meta.getKey()
+      }
+      const _params = { ...detailPageParams, ...detailParams }
+      const formatParams = {}
+      if (!item) {
+        if (this.selection.length > 1) {
+          this.$message.error(this.$t('Do not select multiple records'))
+          return
+        }
+        if (this.selection.length === 0) {
+          this.$message.error(this.$t('please select a record'))
+          return
+        }
+        item = this.selection[0]
+      }
+      if (!_params.id) {
+        _params.id = `#[${this.$metaKey}]`
+      }
+      const that = this
+      // 格式化params
+      for (const key in _params) {
+        let value = _params[key]
+        if (/\$\[(.+)\]/.test(_params[key])) {
+          try {
+            const valueKey = _params[key].replace(/\$\[(.+)\]/, (match, key) => key)
+            value = evalWith(`that.${valueKey}`, { that }) || evalWith(`that.$query.${valueKey}`, { that }) || ''
+          } catch (err) {
+            value = ''
+          }
+        }
+        if (/#\[(.+)\]/.test(_params[key])) {
+          value = _params[key].replace(/#\[(.+)\]/, (match, key) => {
+            const values = item[key]
+            return values
+          })
+        }
+        formatParams[key] = value
+      }
+      const query = {
+        metaId: schemeEntity,
+        component: 'entity-list-page',
+        pageId: schemePage,
+        pageType: 'DETAIL',
+        id: item[key],
+        openType: detailOpenMode,
+        scopeParams: [{
+          field: 'SNAPSHOT',
+          values: item[key]
+        }],
+        mode: item.MODE,
+        ...formatParams
+      }
+      if (this.$isMobile) delete query.openType
+      this.$createPage({
+        ...query
+      })
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>

package/src/components/DataSyncInit.vue

@@ -0,0 +1,97 @@
+<template>
+<div class="relation">
+  <div class="relation-item">
+    <span class="label">同步方式：</span>
+    <span>从{{syncInfo['ENTITY_MATCH|SOURCE_ENTITY#']}}同步到{{syncInfo['ENTITY_MATCH|TARGET_ENTITY#']}}</span>
+  </div>
+  <div class="relation-item">
+    <span class="label">同步模式：</span>
+    <el-radio-group v-model="syncMode">
+      <el-radio label="APPEND" value="APPEND">仅新增</el-radio>
+      <el-radio label="UPDATE" value="UPDATE">仅更新</el-radio>
+      <el-radio label="APPEND_UPDATE" value="APPEND_UPDATE">新增/编辑</el-radio>
+      <el-radio label="REPLACE" value="REPLACE">替换</el-radio>
+    </el-radio-group>
+  </div>
+  <div class="relation-item">
+    <span class="label">同步范围：</span>
+    <div>
+      <p>
+        <span v-for="(item, index) in scopeParams" :key="item.field">
+          <font class="scope-text__item" :style="{ background: '#E6F6FF', padding: '4px' }">{{item.text}}</font>
+          <font v-if="index !== scopeParams.length - 1" :style="{ margin: '0 6px' }">{{item.link === 'or' ? '或者' : '并且'}}</font>
+        </span>
+      </p>
+        <el-button type="primary" link @click="scopeDrawer = !scopeDrawer">设置同步范围</el-button>
+        <epx-scope-drawer v-model:visible="scopeDrawer" :metaId="syncInfo.ENTITY" v-model="scopeParams" />
+    </div>
+  </div>
+  <div class="button-group">
+    <el-button type="primary" @click="submit" :loading="loading">确定</el-button>
+    <el-button @click="backPage">取消</el-button>
+  </div>
+</div>
+</template>
+<script>
+import component from '@epxing/core/src/mixins/component'
+export default {
+  name: 'epx-data-sync-init',
+  mixins: [component],
+  data () {
+    return {
+      syncMode: 'APPEND',
+      scopeParams: [],
+      scopeDrawer: false,
+      syncInfo: {},
+      loading: false
+    }
+  },
+  methods: {
+    getSyncInfo () {
+      this.$http.get({
+        entityId: 'FM_ENTITY_SYNC',
+        id: this.$query.id,
+        link: 'entity_match'
+      })
+        .then(data => {
+          this.syncInfo = data.data
+        })
+    },
+    submit () {
+      this.loading = true
+      this.$http.save({
+        action: 'initDataByScheme',
+        entityId: 'FM_ENTITY_SYNC',
+        id: this.$query.id,
+        syncMode: this.syncMode,
+        sourceDataScope: JSON.stringify(this.scopeParams)
+      })
+        .then(() => {
+          this.backPage()
+        })
+        .catch(err => {
+          this.$message.error(err.message)
+          this.loading = false
+        })
+    }
+  },
+  created () {
+    this.getSyncInfo()
+  }
+}
+
+</script>
+<style scoped lang="scss">
+.relation-item {
+  display: flex;
+  align-items: center;
+  margin: 10px 0;
+}
+.label {
+  margin-right: 6 px;
+}
+.button-group {
+  margin-top: 40px;
+  text-align: center;
+}
+</style>