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

package/src/views/i18n/I18nTranslationList.vue

@@ -0,0 +1,195 @@
+<script>
+import EntityList from '@epxing/components/src/entity-list'
+import workbenchText from './i18n-workbench-text'
+
+export default {
+  name: 'epx-i18n-translation-list',
+  extends: EntityList,
+  pageFlag: true,
+  pageSize: 20,
+  type: 'table',
+  operateFlag: false,
+  searchFlag: false,
+  totalFlag: false,
+  multiSelectColumnFlag: false,
+  serialColumnFlag: true,
+  operateColumnFlag: true,
+  operateColumnPosition: 'end',
+  operateColumnWidth: 90,
+  columnOperates: [{ text: 'save' }],
+  sortable: false,
+  border: true,
+  stripe: true,
+  fixedTable: true,
+  style: {
+    height: '100%'
+  },
+  props: {
+    localeCode: {
+      type: String,
+      default: ''
+    },
+    resourceTypes: {
+      type: Array,
+      default: () => []
+    },
+    translationStatus: {
+      type: String,
+      default: ''
+    },
+    keyword: {
+      type: String,
+      default: ''
+    }
+  },
+  data () {
+    return {
+      renderComponents: [this.renderList],
+      listFields: [
+        { attriName: 'resourceType', attriLabel: workbenchText(this, 'resource type', '资源类型'), width: 116, state: 'DETAIL', sortable: false },
+        { attriName: 'resourceKey', attriLabel: workbenchText(this, 'resource key / context', '资源标识 / 上下文'), width: 260, state: 'DETAIL', sortable: false },
+        { attriName: 'sourceText', attriLabel: workbenchText(this, 'default language source (read-only)', '默认语言原文（只读）'), width: 240, state: 'DETAIL', sortable: false },
+        { attriName: 'value', attriLabel: workbenchText(this, 'target language translation', '目标语言译文'), width: 300, state: 'DETAIL', sortable: false, showTooltip: false },
+        { attriName: 'translationStatus', attriLabel: workbenchText(this, 'translation status', '翻译状态'), width: 120, align: 'center', state: 'DETAIL', sortable: false },
+        { attriName: 'updatedAt', attriLabel: workbenchText(this, 'translation updated at', '译文更新时间'), width: 170, state: 'DETAIL', sortable: false }
+      ],
+      initField: true,
+      requestSerial: 0
+    }
+  },
+  methods: {
+    initComponent () {
+      this.listType = 'table'
+      this.pageSize = Number(this.$configs.pageSize) || 20
+      this.getData()
+    },
+    reload (resetPage = false) {
+      if (resetPage) this.currentPage = 1
+      this.getData()
+    },
+    getData (current) {
+      if (!this.localeCode) {
+        this.requestSerial += 1
+        this.loading = false
+        this.data = []
+        this.total = 0
+        this.$emit('loaded', { total: 0 })
+        return
+      }
+      const requestSerial = ++this.requestSerial
+      this.loading = true
+      const targetPage = current && (typeof current === 'string' || typeof current === 'number')
+        ? Number(current)
+        : this.currentPage
+      this.$http.$request({
+        action: 'searchTranslations',
+        entityId: 'FM_I18N_RESOURCE',
+        localeCode: this.localeCode,
+        resourceTypes: this.resourceTypes.join(','),
+        translationStatus: this.translationStatus,
+        keyword: this.keyword,
+        currentPage: targetPage,
+        rowsPerPage: this.pageSize
+      }, {
+        method: 'post'
+      })
+        .then(result => {
+          if (requestSerial !== this.requestSerial) return
+          this.currentPage = targetPage
+          this.data = (result.entitys || []).map(item => ({ ...item, saving: false }))
+          this.total = Number(result.total) || 0
+          this.$emit('loaded', { total: this.total })
+          this.initData = true
+          this.$nextTick(() => {
+            if (this.$refs.table) this.$refs.table.doLayout()
+          })
+        })
+        .catch(error => {
+          if (requestSerial === this.requestSerial) this.$message.error(error.message || this.text('failed to query translation resources', '查询翻译资源失败'))
+        })
+        .finally(() => {
+          if (requestSerial === this.requestSerial) this.loading = false
+        })
+    },
+    renderField (field) {
+      return {
+        default: ({ row }) => {
+          if (field.attriName === 'resourceType') {
+            return <span>{this.resourceTypeLabel(row.resourceType)}</span>
+          }
+          if (field.attriName === 'value') {
+            return (
+              <el-input
+                class="i18n-translation-list__value"
+                vModel={row.value}
+                type="textarea"
+                rows={2}
+                resize="vertical"
+                maxlength="10000"
+                show-word-limit
+                placeholder={this.text('please enter a translation', '请输入译文')}
+              />
+            )
+          }
+          if (field.attriName === 'translationStatus') {
+            return (
+              <el-tag type={this.translationStatusType(row.translationStatus)} size="small">
+                {this.translationStatusLabel(row.translationStatus)}
+              </el-tag>
+            )
+          }
+          return <span>{row[field.attriName]}</span>
+        }
+      }
+    },
+    renderColumnOperates () {
+      return {
+        default: ({ row }) => (
+          <div class="epx-entity-list__column-operates">
+            <el-button
+              class="epx-entity-list__column-operate"
+              type="primary" link
+              size="small"
+              loading={row.saving}
+              onClick={() => this.$emit('save', row)}
+            >{this.text('save', '保存')}</el-button>
+          </div>
+        )
+      }
+    },
+    viewEntity () {},
+    clickCell () {},
+    text (key, zhText) {
+      return workbenchText(this, key, zhText)
+    },
+    resourceTypeLabel (value) {
+      return {
+        ENTITY: this.text('object name', '对象名称'),
+        FIELD: this.text('field name', '字段名称'),
+        CODE_TABLE: this.text('code table name', '码表名称'),
+        CODE_ITEM: this.text('code item name', '码项名称'),
+        MENU: this.text('menu title', '菜单标题'),
+        PAGE: this.text('page configuration text', '页面配置文案'),
+        FORM_REPORT: this.text('form report', '表单报表'),
+        WORKFLOW: this.text('workflow text', '业务流程文案'),
+        LOGIC: this.text('logic orchestration text', '逻辑编排文案'),
+        APP: this.text('application text', '应用文案'),
+        MESSAGE_TEMPLATE: this.text('message template', '消息模板'),
+        UI_MESSAGE: this.text('page message', '页面文案')
+      }[value] || value
+    },
+    translationStatusLabel (value) {
+      return { MISSING: this.text('missing', '缺失'), STALE: this.text('source updated', '原文已更新'), TRANSLATED: this.text('translated', '已翻译') }[value] || value
+    },
+    translationStatusType (value) {
+      return { MISSING: 'danger', STALE: 'warning', TRANSLATED: 'success' }[value] || 'info'
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.i18n-translation-list__value {
+  width: 100%;
+}
+</style>

package/src/views/i18n/i18n-workbench-text.js

@@ -0,0 +1,7 @@
+export default function workbenchText (vm, key, zhText) {
+  const translated = vm && typeof vm.$t === 'function' ? vm.$t(key) : key
+  if (translated !== key) return translated
+  const i18nVm = vm && vm.$i18n && vm.$i18n._vm
+  const locale = i18nVm ? i18nVm.locale : 'zh-CN'
+  return /^zh(?:-|_|$)/i.test(locale) ? zhText : key
+}

package/src/views/layout/CardList.vue

@@ -0,0 +1,122 @@
+<template>
+<div>
+  <epx-card-o :title="title" :icon="icon">
+    <ul class="list">
+      <li class="item" v-for="item in list" :key="item.ID">
+        <p class="fl">{{item[listFields[0].attriName || listFields[0]]}}</p>
+        <p class="fr">{{item[listFields[listFields.length-1].attriName || listFields[listFields.length-1]]}}</p>
+      </li>
+    </ul>
+    <p class="more">查看更多</p>
+  </epx-card-o>
+</div>
+</template>
+
+<script>
+import Container from '@epxing/core/src/Container'
+import Config from '@epxing/utils/src/Config'
+// 默认配置
+class PageConfig extends Config {
+  constructor (props) {
+    super(props)
+    super.set(props)
+    this.listConfigs = {
+      queryParams: {}, // 查询参数
+      pageSize: 10
+    }
+  }
+}
+
+export default {
+  extends: Container,
+  name: 'epx-layout-card-list',
+  data () {
+    return {
+      list: []
+    }
+  },
+  computed: {
+    listConfigs () {
+      const { listConfigs = {} } = this.pageConfig
+      return listConfigs
+    },
+    title () {
+      const { title } = this.pageConfig
+      return title
+    },
+    icon () {
+      const { icon } = this.pageConfig
+      return icon
+    },
+    listFields () {
+      const { listFields = [] } = this.listConfigs
+      return listFields
+    }
+  },
+  methods: {
+    getList () {
+      const { queryParams = {}, pageSize = 10, listFields = [] } = this.listConfigs
+      const fields = listFields.map(item => (item.attriName || item))
+      this.$http.list({
+        entityId: this.metaId,
+        page: 1,
+        limit: pageSize,
+        columnFieldNames: fields.join('#,'),
+        ...this.formatParams(queryParams)
+      })
+        .then(data => {
+          this.list = data.entitys
+        })
+    }
+  },
+  created () {
+    const { config = {} } = this.page || {}
+    this.pageConfig = new PageConfig(config)
+    this.getList()
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.item {
+  cursor: pointer;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 4px 10px;
+  &:hover {
+    @include font_color_primary;
+  }
+  p:first-child {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  p:last-child {
+    flex-shrink: 0;
+  }
+}
+.more {
+  margin-top: 10px;
+  line-height: 40px;
+  text-align: center;
+  cursor: pointer;
+  position: relative;
+  &::after {
+    display: block;
+    content: '';
+    position: absolute;
+    top: 0;
+    width: 200%;
+    left: -50%;
+    height: 1px;
+    background: var(--epx-border);
+  }
+}
+@media screen and (min-width: 992px) {
+  .more {
+    padding-top: 16px;
+    line-height: 1;
+  }
+}
+</style>

package/src/views/layout/Grid.vue

@@ -0,0 +1,176 @@
+<template>
+  <epx-card-o :title="title">
+    <div class="epx-layout-grid" :style="gridStyle">
+      <div v-for="item in items" :key="item.key" class="epx-layout-grid__card">
+        <span class="epx-layout-grid__icon" :style="{ background: item.iconBackground }">
+          <img v-if="item.image" :src="item.image" alt="" />
+          <i v-else :class="item.icon || 'epx-icon-app'" :style="[item.iconStyle, { fontSize: iconSize }]" aria-hidden="true"></i>
+        </span>
+        <div class="epx-layout-grid__content">
+          <p v-if="item.title" class="epx-layout-grid__title">{{ item.title }}</p>
+          <p v-if="item.desc" class="epx-layout-grid__desc">{{ item.desc }}</p>
+        </div>
+      </div>
+    </div>
+  </epx-card-o>
+</template>
+
+<script>
+import Container from '@epxing/core/src/Container'
+import Config from '@epxing/utils/src/Config'
+// 默认配置
+class PageConfig extends Config {
+  constructor (props) {
+    super(props)
+    super.set(props)
+  }
+}
+export default {
+  name: 'epx-layout-grid',
+  extends: Container,
+  data () {
+    return {
+      gridList: null
+    }
+  },
+  computed: {
+    column () {
+      const { column = 4 } = this.layout
+      return column
+    },
+    mcolumn () {
+      const { mcolumn = 3 } = this.layout
+      return mcolumn
+    },
+    gridStyle () {
+      return {
+        '--grid-columns': Math.max(1, Math.floor(Number(this.column) || 4)),
+        '--grid-mobile-columns': Math.max(1, Math.floor(Number(this.mcolumn) || 3))
+      }
+    },
+    iconSize () {
+      const size = this.layout.iconSize ?? 28
+      return /^\d+(\.\d+)?$/.test(String(size)) ? `${size}px` : size
+    },
+    items () {
+      if (this.gridList) {
+        return this.gridList.map(item => ({
+          key: item.ID,
+          title: item[this.gridItem.title],
+          desc: item[this.gridItem.desc],
+          image: item[this.gridItem.icon] ? this.getFileUrl(item[this.gridItem.icon]) : null
+        }))
+      }
+      return (this.layout.children || []).map(item => ({ ...item, key: item.ID || item.title }))
+    },
+    title () {
+      const { title } = this.pageConfig
+      return title
+    },
+    layout () {
+      const { layout = {} } = this.pageConfig
+      return layout
+    },
+    gridItem () {
+      const { gridItem = {} } = this.layout
+      return gridItem
+    },
+    getFileUrl () {
+      return id => {
+        return this.$util.getFileUrl(id)
+      }
+    }
+  },
+  methods: {
+    loadData (params) {
+      this.$http.list({
+        ...params
+      })
+        .then(data => {
+          this.gridList = [...data.entitys]
+        })
+    }
+  },
+  created () {
+    const { config = {} } = this.page || {}
+    this.pageConfig = new PageConfig(config)
+    if (this.layout.load) {
+      this.loadData(this.layout.load)
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.epx-layout-grid {
+  display: grid;
+  grid-template-columns: repeat(var(--grid-columns, 4), minmax(0, 1fr));
+  gap: 20px;
+  &__card {
+    display: flex;
+    align-items: center;
+    min-width: 0;
+    padding: 20px;
+    border-radius: var(--epx-radius-base);
+    background: var(--epx-bg-card);
+    box-sizing: border-box;
+  }
+  &__icon {
+    display: flex;
+    flex: 0 0 50px;
+    align-items: center;
+    justify-content: center;
+    width: 50px;
+    height: 50px;
+    margin-right: 10px;
+    border-radius: 50%;
+    @include bg_color_primary;
+    color: #fff;
+    img {
+      width: 50px;
+      height: 50px;
+      object-fit: contain;
+    }
+  }
+  &__content {
+    min-width: 0;
+  }
+  &__title {
+    margin: 0 0 4px;
+    font-size: var(--epx-font-size-l);
+    line-height: 1;
+    color: var(--epx-text);
+    overflow-wrap: anywhere;
+  }
+  &__desc {
+    margin: 0;
+    font-size: var(--epx-font-size-s);
+    line-height: 20px;
+    color: var(--epx-text-secondary);
+    overflow-wrap: anywhere;
+  }
+}
+@media screen and (max-width: 991px) {
+  .epx-layout-grid {
+    grid-template-columns: repeat(var(--grid-mobile-columns, 3), minmax(0, 1fr));
+    gap: 0;
+    &__card {
+      flex-direction: column;
+      padding: 16px 24px;
+      border-radius: 0;
+      border-right: 1px solid var(--epx-border);
+      border-bottom: 1px solid var(--epx-border);
+      background: none;
+      text-align: center;
+    }
+    &__icon {
+      flex-basis: auto;
+      margin: 0 0 9px;
+    }
+    &__title {
+      font-size: 13px;
+      line-height: 16px;
+    }
+  }
+}
+</style>

package/src/views/match/AddTargetField.vue

@@ -0,0 +1,136 @@
+<script>
+// @jsx-vue3（T30 JSX 批：Vue3 JSX 语法，@vue/babel-plugin-jsx 编译）
+
+export default {
+  name: 'epx-match-add-target-field',
+  data () {
+    return {
+      selection: [],
+      viewAllFieldList: [],
+      filterText: ''
+    }
+  },
+  watch: {
+    filterText (v) {
+      this.$refs.tree.filter(v)
+    }
+  },
+  methods: {
+    getViewFields () {
+      this.$http.get({
+        action: 'getEntityMetaView',
+        entityId: 'FM_ENTITY_VIEW',
+        metaId: this.$query.targetEntity,
+        relationSort: '2'
+      })
+        .then(data => {
+          const { selectedField = [] } = this.$query
+          if (data) {
+            this.defaultExpandKeys = [data[0].code]
+            data[0].isMain = true
+            const formatData = (arr, parentText, parent) => {
+              arr.forEach((item, index) => {
+                item.disabled = item.type === 'meta'
+                if (parentText) item.linkText = parentText + '/' + item.text
+                if (parent) item.parentField = parent
+                if (selectedField.includes(item.id)) {
+                  item.disabled = true
+                }
+                if (item.children) formatData(item.children, !item.isMain ? item.linkText || item.text : '', !item.isMain ? item.id : '')
+              })
+            }
+            formatData(data)
+            // data.isMain = true
+            // data.disabled = true
+            // data.children.forEach(item => {
+            //   if (item.relationMeta) {
+            //     item.children = item.relationMeta.children.map(child => ({ ...child, linkCode: item.relationMeta.linkFlag.toUpperCase() + '|' + child.code, linkText: item.text + '/' + child.text, parentField: item.id }))
+            //   }
+            // })
+            this.viewAllFieldList = data
+          }
+        })
+    },
+    chooseField (config, row) {
+      const params = {
+        action: 'batchAddTargetField',
+        entityId: this.$query.entityMeta,
+        entityMatchId: this.$query.parentId,
+        targetFields: JSON.stringify(this.selection)
+      }
+      this.$http.$post(params)
+        .then(() => {
+          this.$message.success('添加成功')
+          this.backPage()
+        })
+    },
+    checkFieldChange (data, isChecked) {
+      const index = this.selection.findIndex(item => item.code === (data.linkCode || data.code))
+      if (isChecked) {
+        if (index === -1) {
+          this.selection.push({ id: data.parentField || data.id, code: data.linkCode || data.code, name: data.linkText || data.text })
+        }
+      } else {
+        if (index !== -1) {
+          this.selection.splice(index, 1)
+        }
+      }
+    },
+    filterNode (value, data) {
+      if (!value) return true
+      return data.text && data.text.indexOf(value) !== -1
+    }
+  },
+  created () {
+    this.getViewFields()
+  },
+  render () {
+    return (
+      <div>
+        <el-input suffix-icon="el-icon-search" size="default" placeholder="请输入字段名称筛选" v-model={this.filterText}></el-input>
+        <el-tree
+          ref="tree"
+          class="field-tree"
+          node-key="code"
+          show-checkbox
+          default-expanded-keys={this.defaultExpandKeys}
+          data={this.viewAllFieldList}
+          render-after-expand={true}
+          auto-expand-parent={false}
+          check-strictly={true}
+          filter-node-method={this.filterNode}
+          props={this.treeProps}
+          onCheckChange={this.checkFieldChange}
+          v-slots={{
+            default: ({ node, data }) => (
+              <span class="field-tree__node" >
+                {data.text}
+              </span>
+            )
+          }}
+        >
+        </el-tree>
+        <div class="operates">
+          <el-button size="default" onClick={this.backPage}>返回</el-button>
+          <el-button size="default" type="primary" onClick={this.chooseField}>提交</el-button>
+        </div>
+      </div>
+    )
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.field-tree {
+  height: 400px;
+  overflow: auto;
+
+    :deep(.el-tree-node__content) {
+      height: 48px;
+    }
+
+}
+.operates {
+  text-align: center;
+}
+</style>