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

package/src/components/CreatePage.vue

@@ -0,0 +1,348 @@
+<template>
+  <div>
+    <!-- 设置筛选 -->
+    <epx-search-filter
+      :meta="$meta"
+      :fields="searchFields"
+      :showFilter="false"
+      :key="$configs.keywords"
+      @search="search"
+    ></epx-search-filter>
+    <div class="page-container">
+      <template v-if="!templateList"></template>
+      <ul class="component-list" v-else-if="templateList.length>0">
+        <li class="component-item" @click="createBasePage">
+          <div class="base-page">
+            <i class="el-icon-circle-plus-outline"></i>
+            <p>从空白页面创建</p>
+          </div>
+        </li>
+        <template v-for="component in templateList" :key="component.ID">
+          <li class="component-item" v-if="component.CODE!=='base-page'" @click="template=component;createPageVisible=true">
+            <div class="component-image" :style="component.PICTURE ? { backgroundImage: `url(${$util.getFileUrl(component.PICTURE)})` }: {}">
+                <div class="no-image" v-if="!component.PICTURE">
+                <i class="el-icon-picture-outline"></i>
+                <p>暂无缩略图</p>
+              </div>
+            </div>
+            <!-- 组件详细信息 -->
+            <div class="component-content">
+              <p class="component-name">{{component.TITLE}}</p>
+              <p class="component-desc__item">
+                {{component.REMARK || '暂无描述'}}
+              </p>
+            </div>
+          </li>
+        </template>
+      </ul>
+      <div v-else class="no-data">
+        <i class="epx-icon-kong"></i>
+        <p>暂无模板</p>
+      </div>
+    </div>
+    <el-dialog
+      width="500px"
+      title="填写页面信息"
+      v-model="createPageVisible"
+    >
+      <epx-table-form v-if="fieldsConfigs.length>0" class="form-content" ref="form" metaId="FM_PAGE_CONFIG" :fieldsConfigs="fieldsConfigs" v-model="form" :column="1"></epx-table-form>
+      <div class="button-group">
+        <el-button type="primary" @click="createPage(false)">保存</el-button>
+        <el-button type="primary" @click="createPage(true)">保存并配置</el-button>
+        <el-button @click="createPageVisible=false">返回</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import component from '@epxing/core/src/mixins/component'
+import { evalWith } from '@epxing/utils/src/eval-with'
+import { createDashboardConfig } from '@epxing/dashboard/src/design-target'
+export default {
+  name: 'epx-create-page',
+  mixins: [component],
+  data () {
+    return {
+      templateList: null,
+      template: null,
+      searchScopeParams: [],
+      searchKeyParams: {},
+      createPageVisible: false,
+      form: {},
+      fieldsConfigs: []
+    }
+  },
+  computed: {
+    searchFields () {
+      const { searchFields = [] } = this.$configs
+      return searchFields
+    },
+    scopeParams () {
+      const { scopeParams: configScopeParams = [] } = this.$configs
+      const { scopeParams: queryScopeParams = [] } = this.$query
+      // 格式化scopeParams
+      const _scopeParams = this.$_.cloneDeep([...configScopeParams, ...queryScopeParams, ...this.searchScopeParams])
+      const that = this
+      for (const scopeKey in _scopeParams) {
+        const scope = _scopeParams[scopeKey]
+        if (!scope) continue
+        let values = scope.values
+        if (/\$\[(.+)\]/.test(values)) {
+          values = values.replace(/\$\[(.+)\]/, (match, key) => {
+            try {
+              return evalWith(`that.$query.${key}`, { that }) || evalWith(`that.$tab.${key}`, { that }) || evalWith(`that.${key}`, { that }) || ''
+            } catch (error) {
+              return scope.values
+            }
+          })
+        }
+        if (/#\{(.+)\}/.test(values)) {
+          values = values.replace(/#\{(.+)\}/, (match, key) => {
+            try {
+              return evalWith(`that.$query.${key}`, { that }) || evalWith(`that.$tab.${key}`, { that }) || ''
+            } catch (error) {
+              return scope.values
+            }
+          })
+        }
+        scope.values = values
+      }
+      return _scopeParams
+    }
+  },
+  methods: {
+    search (params) {
+      this.searchScopeParams = params
+      this.getData()
+    },
+    initComponent () {
+      this.getData()
+    },
+    getData () {
+      const params = {
+        entityId: 'FM_PAGE',
+        'scope.TYPE': '02',
+        columnFieldNames: this.$meta.getAllFields().join('#,') + '#',
+        ...this.searchKeyParams
+      }
+      if (this.scopeParams) params.scopeParams = JSON.stringify(this.scopeParams)
+
+      this.$http.list(params)
+        .then(data => {
+          this.templateList = data.entitys
+        })
+    },
+    getPageFieldConfigs () {
+      const fields = ['CODE', 'TITLE', 'FLAG', 'META_ID', 'TERMINAL']
+      this.$FieldFactory.createFields({
+        metaId: 'FM_PAGE_CONFIG',
+        pageType: 'ADD',
+        fields: fields
+      })
+        .then(data => {
+          this.fieldsConfigs = data
+        })
+    },
+    createBasePage () {
+      const template = this.templateList.find(item => item.CODE === 'base-page')
+      this.template = template
+      this.createPageVisible = true
+    },
+    createPage (toVisual) {
+      const form = this.$refs.form
+      // 获取表单数据
+      form.validate((valid, err) => {
+        if (!valid) {
+          for (const key in err) {
+            const errMessgae = err[key][0]
+            this.$message.error(errMessgae.message)
+            return
+          }
+        } else {
+          const params = {
+            entityId: 'FM_PAGE_CONFIG',
+            'bean.CLIENT': this.CLIENT,
+            'bean.SYSTEM': this.SYSTEM,
+            'bean.APP': this.APP,
+            'bean.PAGE_ID': this.template.ID
+          }
+          const formData = form.model.data
+          for (const key in formData) {
+            if (!key.includes('#')) params[`bean.${key}`] = formData[key]
+          }
+          if (this.template.CODE === 'dashboard') {
+            try {
+              const raw = this.template.CONTENT
+              const config = raw ? (typeof raw === 'string' ? JSON.parse(raw) : raw) : {}
+              const next = createDashboardConfig(config, config.designTarget)
+              if (!(next.items || []).length) delete next.designTarget
+              params['bean.CONTENT'] = JSON.stringify(next)
+            } catch (e) {
+              this.$message.error('看板模板配置无法解析，请检查模板')
+              return
+            }
+          }
+          if (this.isRequesting) return
+          this.isRequesting = true
+          this.$http.save(params)
+            .then(data => {
+              this.$message.success('保存成功')
+              this.createPageVisible = false
+              if (toVisual) {
+                if (this.template.CODE === 'dashboard') {
+                  this.$router.push({ name: 'Config', params: { client: this.$route.params.client || this.appConfig['CLIENT|CODE'], system: this.$route.params.system || this.appConfig['SYSTEM|CODE'], mode: 'dashboard', configId: data } })
+                  this.isRequesting = false
+                  return
+                }
+                this.goPage({
+                  component: 'page-designer',
+                  metaId: 'FM_PAGE_CONFIG',
+                  type: 'replace',
+                  params: {
+                    entityId: formData.META_ID,
+                    title: formData.TITLE,
+                    id: data
+                  }
+                })
+              } else {
+                this.backPage()
+              }
+              this.isRequesting = false
+            })
+            .catch(err => {
+              this.$message.error(err.message)
+              this.isRequesting = false
+            })
+        }
+      })
+    }
+  },
+  created () {
+    this.getPageFieldConfigs()
+    this.$event.on('search-keyword', (searchKeyParams) => {
+      if (searchKeyParams) {
+        this.searchKeyParams = searchKeyParams
+        this.getData()
+      }
+    })
+  }
+
+}
+</script>
+
+<style lang="scss" scoped>
+.component-list {
+  flex: 1;
+  display: flex;
+  flex-wrap: wrap;
+  position: relative;
+  margin: 0 -10px;
+  overflow: auto;
+}
+.component-item {
+  width: calc(25% - 20px);
+  min-width: 250px;
+  margin: 10px;
+  position: relative;
+  overflow: hidden;
+  cursor: pointer;
+  &.is-select {
+    &::after {
+      pointer-events: none;
+      content: '';
+      display: block;
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: calc(100% - 1px);
+      height: calc(100% - 1px);
+      border: 1px solid;
+      @include border_color_primary(.6);
+    }
+    .select-icon {
+      display: block;
+    }
+  }
+  &:hover {
+    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.2);
+    .component-operate {
+      display: flex;
+    }
+  }
+}
+.base-page {
+  width: 100%;
+  height: 100%;
+  background: var(--epx-bg-card);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  @include font_color_primary;
+  font-size: var(--epx-font-size-l);
+  >i {
+    font-size: 40px;
+    margin-bottom: 10px;
+  }
+
+}
+.component-image {
+  width: 100%;
+  height: 140px;
+  background: #E2E4E8;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: cover;
+  overflow: hidden;
+  position: relative;
+}
+
+.no-image {
+  text-align: center;
+  color: var(--epx-text-secondary);
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin-top: -32px;
+  margin-left: -34px;
+  >i {
+    font-size: 36px;
+    margin-bottom: 8px;
+  }
+}
+.component-content {
+  background: var(--epx-bg-card);
+  overflow: hidden;
+  padding: 10px 20px;
+}
+
+.component-name {
+  margin: 4px 0;
+  font-size: var(--epx-font-size-l);
+  line-height: 1;
+}
+
+.component-desc__item {
+  color: var(--epx-text);
+  font-size: var(--epx-font-size-s);
+  line-height: 24px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  height: 48px;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+.no-data {
+  text-align: center;
+  color: var(--epx-text-secondary);
+  >i {
+    font-size: 100px;
+  }
+}
+.button-group {
+  text-align: center;
+  margin-top: 10px;
+}
+</style>

package/src/components/DashboardCreate.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="dashboard-create">
+    <p class="dashboard-create__hint">填写看板信息，进入设计页面后选择 PC 端或移动端。</p>
+    <div :inert="creation.moduleId ? '' : undefined">
+      <epx-table-form v-if="fields.length" ref="form" meta-id="FM_MODULE" :fieldsConfigs="fields" :column="1" v-model="form"></epx-table-form>
+    </div>
+    <p v-if="creation.moduleId" class="dashboard-create__hint">菜单已创建；重试将继续打开这张看板。</p>
+    <div class="dashboard-create__buttons">
+      <el-button type="primary" :loading="saving" :disabled="!fields.length" @click="create">{{ creation.moduleId ? '重试并进入设计' : '创建并进入设计' }}</el-button>
+      <el-button :disabled="saving" @click="backPage">取消</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { createDashboardMenu } from './dashboard-create'
+
+export default {
+  name: 'epx-dashboard-create',
+  data () {
+    return { fields: [], form: {}, defaults: {}, creation: { moduleId: null, pageId: null }, saving: false }
+  },
+  created () {
+    Promise.all([
+      this.$FieldFactory.createFields({ metaId: 'FM_MODULE', pageType: 'ADD', fields: ['NAME', 'MODULE_CODE', 'META'] }),
+      this.$http.$post({ entityId: 'FM_MODULE', action: 'getDefault' })
+    ])
+      .then(([fields, result]) => {
+        this.defaults = result.data || {}
+        this.form = { ...this.defaults }
+        this.fields = fields
+      })
+      .catch(e => this.$message.error(e.message || '加载看板表单失败'))
+  },
+  methods: {
+    async create () {
+      if (this.saving) return
+      this.saving = true
+      try {
+        const valid = await new Promise(resolve => this.$refs.form.validate(resolve))
+        if (!valid) return
+        const data = this.$refs.form.model.data
+        const values = {
+          'bean.CLIENT': this.CLIENT,
+          'bean.SYSTEM': this.SYSTEM,
+          'bean.SERVICE_ID': this.$query.serviceId,
+          'bean.MODULE_TYPE': 'data',
+          'bean.TERMINAL': 'auto',
+          'bean.UP_ID': this.$query.defaultValue?.UP_ID || 'root'
+        }
+        for (const key in this.defaults) if (!key.includes('#') && !('bean.' + key in values)) values['bean.' + key] = this.defaults[key]
+        for (const key of ['NAME', 'MODULE_CODE', 'META']) if (data[key] !== undefined) values['bean.' + key] = data[key]
+        const pageId = await createDashboardMenu(this.$http, this.creation, values)
+        this.$store.commit('DELETE_PAGE', { pageId })
+        const route = { name: 'Config', params: { mode: 'dashboard', client: this.$route.params.client || this.appConfig['CLIENT|CODE'], system: this.$route.params.system || this.appConfig['SYSTEM|CODE'], configId: pageId } }
+        // 与已有页面设计入口一致，在新窗口设计，弹窗关闭的历史回退不会覆盖设计路由。
+        this.$util.openWindow(this.$router.resolve(route).href)
+        this.backPage()
+      } catch (e) {
+        this.$message.error(e.message || '创建看板失败，请重试')
+      } finally { this.saving = false }
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.dashboard-create {
+  padding: 12px;
+  &__hint { color: var(--epx-text-secondary, #909399); font-size: 13px; line-height: 1.6; }
+  &__buttons { margin-top: 24px; text-align: right; }
+}
+</style>

package/src/components/DataLog.vue

@@ -0,0 +1,181 @@
+<template>
+  <div :class="['container', {'is-fold': isFold }]">
+    <div class="data-log__header">
+      <p :class="['epx-add-form-item__header', `epx-add-form-item__header--${$configs.formTitleStyle}`]">
+        <span class="epx-add-form-item__title">{{$component.title}}</span>
+        <span class="epx-add-form-item__title-operate fr">
+          <el-button :class="['data-log__viewall-btn', { 'is-all': showAll }]" type="primary" link @click="showAll=!showAll" v-if="operateType==='update' && modifyFields.length>0">查看详情<i class="el-icon-arrow-down"></i></el-button>
+          <i :class="['epx-add-form-item__title-foldicon', 'el-icon-caret-top']" @click="isFold = !isFold"></i>
+        </span>
+      </p>
+    </div>
+    <div class="data-log__content">
+      <table border="1" class="data-log__table">
+        <thead>
+        <tr class="data-log__row data_log__table-header">
+          <th class="data-log__cell">字段名称</th>
+          <template v-if="operateType==='update'">
+            <th class="data-log__cell">修改前</th>
+            <th class="data-log__cell">修改后</th>
+          </template>
+          <th v-if="operateType==='add'">新增数据</th>
+          <th v-if="operateType==='delete'">删除数据</th>
+        </tr>
+        </thead>
+        <tbody>
+        <tr v-for="field in showFields" :key="field.name" class="data-log__row">
+          <td class="data-log__cell">{{field.attriLabel}}</td>
+          <td class="data-log__cell" v-if="operateType!=='add'">{{ beforeContent(field) }}</td>
+          <td :class="['data-log__cell', {'data-log__cell--update': (operateType==='update' && afterData[field.attriName] && afterData[field.attriName]!==beforeData[field.attriName])}]" v-if="operateType!=='delete'" >{{afterContent(field)}}</td>
+        </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+
+<script>
+import component from '@epxing/core/src/mixins/component'
+export default {
+  name: 'epx-data-log',
+  mixins: [component],
+  props: {
+    formData: Object
+  },
+  data () {
+    return {
+      fields: [],
+      isFold: false,
+      showAll: false
+    }
+  },
+  computed: {
+    beforeData () {
+      const { COTENT_BAFORE } = this.formData
+      const beforeData = JSON.parse(COTENT_BAFORE || '{}')
+      return beforeData.data || {}
+    },
+    afterData () {
+      const { CONTENT } = this.formData
+      const afterData = JSON.parse(CONTENT || '{}')
+      return afterData.data || {}
+    },
+    beforeContent () {
+      return field => {
+        const { attriName, dataType } = field
+        const isObjectOrOption = ['treeList', 'object', 'multiobject', 'user', 'dept', 'list', 'switch', 'multiList', 'radio', 'multibox'].includes(dataType)
+        if (this.beforeData[attriName + '#'] && isObjectOrOption) {
+          return `${this.beforeData[attriName + '#']}：${this.beforeData[attriName]}`
+        }
+        return this.beforeData[attriName]
+      }
+    },
+    afterContent () {
+      return field => {
+        const { attriName, dataType } = field
+        const isObjectOrOption = ['treeList', 'object', 'multiobject', 'user', 'dept', 'list', 'switch', 'multiList', 'radio', 'multibox'].includes(dataType)
+        if (attriName in this.afterData) {
+          if (this.afterData[attriName + '#'] && isObjectOrOption) {
+            return `${this.afterData[attriName + '#']}：${this.afterData[attriName]}`
+          }
+          return this.afterData[attriName]
+        } else {
+          return this.beforeContent(field)
+        }
+      }
+    },
+    operateType () {
+      const { OPERATE_TYPE } = this.formData
+      return OPERATE_TYPE
+    },
+    modifyFields () {
+      const modifyFields = this.fields.filter(item => this.operateType !== 'update' || (this.afterData[item.attriName] && this.afterData[item.attriName] !== this.beforeData[item.attriName]))
+      return modifyFields
+    },
+    showFields () {
+      const modifyFields = this.fields.filter(item => this.operateType !== 'update' || (this.afterData[item.attriName] && this.afterData[item.attriName] !== this.beforeData[item.attriName]))
+      const unModifyFields = this.fields.filter(item => this.operateType === 'update' && (!this.afterData[item.attriName] || this.afterData[item.attriName] === this.beforeData[item.attriName]))
+      if (this.showAll || modifyFields.length === 0) {
+        return [...modifyFields, ...unModifyFields]
+      }
+      return modifyFields
+    }
+  },
+  methods: {
+    getEntityMeta () {
+      const { META } = this.formData
+      this.$store.dispatch({
+        type: 'ADD_META',
+        metaId: META
+      }).then(meta => {
+        const { keyNames = [], keyType = '' } = meta
+        this.fields = meta.getAllFieldConfigs().filter(item => !(keyNames.includes(item.attriName) && keyType !== 'derive'))
+      })
+    }
+  },
+  created () {
+    this.getEntityMeta()
+  }
+
+}
+</script>
+
+<style lang="scss" scoped>
+.container {
+  &.is-fold {
+
+      :deep(.epx-add-form-item__title-foldicon) {
+        transform: rotate(180deg);
+      }
+
+    .data-log__content  {
+      height: 0;
+      padding: 0 20px;
+      overflow: hidden;
+    }
+  }
+}
+.data-log__viewall-btn {
+  i {
+    margin-left: 4px;
+    transition: all .3s;
+  }
+  &.is-all {
+    i {
+      transform: rotate(180deg);
+    }
+  }
+}
+.data-log__content {
+  background: var(--epx-bg-card);
+  padding: 20px;
+  transition: all .3s;
+}
+.data-log__table {
+  width: 100%;
+  border-collapse: collapse;
+  border: 0;
+}
+.data-log__table, .data-log__row, .data-log__cell {
+  border-color: var(--epx-border);
+}
+.data_log__table-header {
+  background: var(--epx-bg);
+  th {
+    padding: 16px;
+    text-align: left;
+  }
+}
+.data-log__cell {
+  padding: 16px;
+  line-height:16px;
+  text-align: left;
+  word-break: break-all;
+  &:first-child {
+    white-space: nowrap;
+  }
+}
+.data-log__cell--update {
+  color: #C83C3C
+}
+</style>