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

package/src/components/JsPanel.vue

@@ -0,0 +1,111 @@
+<template>
+  <div class="container">
+    <textarea class="editor" ref="textarea" name="" id="" cols="30" rows="3" v-model="content"></textarea>
+  </div>
+</template>
+
+<script>
+/* eslint-disable no-unused-expressions */
+export default {
+  name: 'epx-js-panel',
+  props: {
+    value: String
+  },
+  data () {
+    return {
+      content: ' /* 可在此定义页面JS事件 */'
+    }
+  },
+  watch: {
+    value: {
+      handler (v) {
+        if (this.content !== v) {
+          this.content = v || '/* 可在此定义页面JS事件 */'
+          if (this.editor) this.editor.setValue(this.content)
+        }
+      },
+      immediate: true
+    },
+    content (v) {
+      this.$emit('change', v)
+    }
+  },
+  methods: {
+    editorInit () {
+      require.ensure([], () => {
+        const CodeMirror = require('codemirror')
+        globalThis.codemirror = CodeMirror
+        require('codemirror/addon/hint/show-hint.js')
+        require('codemirror/addon/hint/javascript-hint.js')
+        require('codemirror/lib/codemirror.css')
+        require('codemirror/addon/hint/show-hint.css')
+        require('codemirror/addon/edit/matchbrackets.js')
+        require('codemirror/addon/edit/closebrackets.js')
+        require('codemirror/addon/fold/foldgutter.js')
+        require('codemirror/addon/fold/foldgutter.css')
+        require('codemirror/addon/fold/foldcode.js')
+        require('codemirror/addon/fold/brace-fold.js')
+        require('codemirror/mode/javascript/javascript.js')
+
+        this.editor = CodeMirror.fromTextArea(this.$refs.textarea, {
+          mode: { name: 'javascript', globalVars: true },
+          lineNumbers: true,
+          foldGutter: true,
+          gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
+          autofocus: true,
+          showCursorWhenSelecting: true,
+          matchBrackets: {
+            afterCursor: false
+          },
+          autoCloseBrackets: true,
+          extraKeys: { Ctrl: 'autocomplete' },
+          inputStyle: 'contenteditable',
+          hintOptions: { completeSingle: false, closeOnUnfocus: false }
+        })
+        // this.editor.on('change', (editor, change) => { // 任意键触发autocomplete
+        //   if (change.origin === '+input') {
+        //     const text = change.text[0]
+        //     if (/\w+/.test(text)) {
+        //       setTimeout(function () { editor.execCommand('autocomplete') }, 200)
+        //     }
+        //   }
+        // })
+        this.editor.on('blur', (editor) => {
+          this.content = editor.getValue()
+        })
+        this.editor.showHint()
+        if (this.content) {
+          this.editor.setValue(this.content)
+        }
+      }, (err) => {
+        console.error(err)
+      }, 'codemirror')
+    }
+  },
+  created () {
+    this.editorInit()
+  },
+  beforeUnmount () {
+    this.editor.closeHint()
+    this.editor.toTextArea()
+    this.editor = null
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.container {
+  width: 100%;
+  height: 100%;
+
+    :deep(.CodeMirror) {
+      height: 100%;
+    }
+
+}
+</style>
+<style>
+.CodeMirror-hints,.CodeMirror-lint-tooltip {
+  z-index: 3000!important;
+}
+</style>

package/src/components/LanguageImportPage.vue

@@ -0,0 +1,601 @@
+<template>
+  <div class="container base-page">
+    <epx-header title="多语言导入" :style="{margin: '0 0 10px'}"></epx-header>
+    <div class="import-container">
+      <el-card class="box-card">
+        <el-steps class="steps" :active="stepIndex" align-center>
+          <el-step title="上传数据文件"></el-step>
+          <el-step title="匹配导入字段"></el-step>
+          <el-step title="导入完成"></el-step>
+        </el-steps>
+        <!-- 第一步 -->
+        <div v-if="stepIndex===1" class="step1">
+          <el-upload
+            class="upload"
+            drag
+            action="#"
+            :limit="1"
+            :on-exceed="handleExceed"
+            accept=".xlsx,.xls,.csv,.pdf"
+            :http-request="upload"
+            :file-list="fileList"
+            :on-remove="handleRemove"
+            >
+            <i class="el-icon-upload"></i>
+            <div class="el-upload__text">
+              <div>将文件拖到此处，或<em>点击上传</em></div>
+              <div class="el-upload__tip">仅支持excel,可在下方选择字段生成数据文件模板</div>
+            </div>
+          </el-upload>
+          <div class="operate">
+            <el-button type="primary" @click="uploadExcel" :loading="isRequesting">下一步</el-button>
+          </div>
+        </div>
+        <!-- 第二步 -->
+        <div v-if="stepIndex===2" class="step2">
+          <div class="opera">
+            <span>导入数据匹配<span style="font-size:12px;color: var(--epx-text-secondary)">（提示：请选择系统字段与导入的数据列相匹配）</span></span>
+            <span class="auto-match" @click="autoMatch">自动匹配字段</span>
+          </div>
+          <table class="match-table">
+            <thead>
+            <tr>
+              <th>字号</th>
+              <th>可导入数据列</th>
+              <th>系统匹配字段</th>
+              <th>操作</th>
+            </tr>
+            </thead>
+            <tbody>
+            <tr v-for="(item,index) in dataList" :key="index" >
+              <td>{{index+1}}</td>
+              <td>{{item}}</td>
+              <td v-if="selectList[index]">
+                <el-popover
+                  width="220"
+                  trigger="click"
+                  ref="popover"
+                >
+                  <div :style="{height: '200px',overflow: 'auto'}">
+                    <el-tree ref="tree" :data="languageList" accordion expand-on-click-node @node-click="data=>selectMatch(index, data)">
+                      <template v-slot="{  data }"><span class="custom-tree-node">{{ data.text }}</span></template>
+                    </el-tree>
+                  </div>
+                  <template v-slot:reference><el-input :style="{width: '220px'}" readonly :model-value="selectList[index].text" placeholder="请选择" suffix-icon="el-icon-arrow-down"></el-input></template>
+                </el-popover>
+              </td>
+              <td class="clear-match" @click="clearMatch(index)"> 清空</td>
+            </tr>
+            </tbody>
+          </table>
+          <div class="operate">
+            <el-button type="primary" @click="excelToSystem" :loading="isRequesting">下一步</el-button>
+            <el-button @click="backUp">返回</el-button>
+          </div>
+        </div>
+        <!-- 第三步 -->
+        <div v-if="stepIndex===3" class="step4" style="text-align:center">
+          <div class="over">数据导入完成</div>
+          <div>共导入<span class="count">{{length}}</span>条数据</div>
+          <div class="operate">
+            <el-button type="primary"  @click="backPage">返回数据列表</el-button>
+          </div>
+        </div>
+      </el-card>
+    </div>
+  </div>
+</template>
+
+<script>
+import component from '@epxing/core/src/mixins/component'
+import { evalWith } from '@epxing/utils/src/eval-with'
+export default {
+  name: 'epx-language-import-page',
+  mixins: [component],
+  data () {
+    return {
+      stepIndex: 1,
+      fileList: [],
+      importMode: 'add',
+      dataList: [],
+      selectList: [],
+      optionList: [],
+      requiredList: [],
+      titleList: [],
+      invalidList: [],
+      errorLength: '',
+      validList: [],
+      total: 0,
+      dataStatus: 'invalid',
+      length: 0,
+      currentPage1: 1,
+      currentPage2: 1,
+      pageSize1: 10,
+      pageSize2: 10,
+      requiredCheckFlag: true,
+      isRequesting: false,
+      loadingInvalidData: false,
+      loadingValidData: false
+    }
+  },
+  computed: {
+    languageList () {
+      const { LANGUAGES: languages = '', 'LANGUAGES#': languageNames = '' } = this.clientConfig
+      // 获取当前语言
+      if (!languages) return []
+      const languageIdList = languages.split(',')
+      const languageNameList = languageNames.split(',')
+      const languageList = languageIdList.map((item, index) => ({ id: item, text: languageNameList[index] }))
+      return languageList
+    }
+  },
+  methods: {
+    getDefaultValue () {
+      const { fields = [] } = this.$configs
+      const defaultValue = {}
+      fields.forEach(item => {
+        if (typeof item === 'object' && item.value) {
+          // eslint-disable-next-line
+          const _this = this
+          const value = item.value.replace(/\$\[(.+)\]/, (match, key) => {
+            try {
+              return evalWith(`_this.${key}`, { _this }) || evalWith(`_this.$query.${key}`, { _this }) || evalWith(`_this.$tab.${key}`, { _this }) || evalWith(`_this.$route.query.${key}`, { _this }) || ''
+            } catch (error) {
+              return item.value
+            }
+          })
+          defaultValue[item.attriName] = value
+        }
+      })
+      return defaultValue
+    },
+    handleExceed (files, fileList) {
+      this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件，可删除后重新上传`)
+    },
+    upload ({ file }) {
+      this.fileList = [file]
+    },
+    uploadExcel () {
+      if (this.fileList.length === 0) {
+        this.$message.error('请先选择文件')
+        return
+      }
+      const file = this.fileList[0]
+      if (this.isRequesting === true) return
+      this.isRequesting = true
+      this.$http.$request({
+        action: 'languageImport',
+        entityId: this.$metaId,
+        UPLOAD_FILE_FIELD: 'importfile',
+        importfile: file,
+        uploadExcelFlag: '1'
+      }, {
+        method: 'post',
+        requestType: 'formData'
+      })
+        .then(data => {
+          const { file, header } = data
+          this.fileId = file.data.ID
+          this.isRequesting = false
+          header.forEach(item => {
+            if (item) {
+              this.dataList.push(item)
+            }
+          })
+          this.autoMatch()
+          // 第二步
+          this.stepIndex = 2
+        })
+        .catch(err => {
+          this.isRequesting = false
+          this.$message(err.message || '处理失败')
+        })
+    },
+    backUp () {
+      if (this.stepIndex === 2) {
+        this.stepIndex = 1
+        this.dataList = []
+      } else if (this.stepIndex === 3) {
+        this.stepIndex = 2
+        this.titleList = []
+      }
+    },
+    autoMatch () {
+      for (const index in this.dataList) {
+        const text = this.dataList[index]
+        const selectItem = { text: '', value: '' }
+        for (let i = 0; i < this.optionList.length; i++) {
+          const item = this.optionList[i]
+          if (item.text === text && item.children.length === 0) {
+            selectItem.value = item.value
+            selectItem.text = item.text
+          }
+          // else {
+          //   const option = this.optionList.find(option => option.text === item)
+          //   if (option) {
+          //     selectItem.value = option.value
+          //     selectItem.text = option.text
+          //   }
+          // }
+        }
+        this.selectList[index] = selectItem
+      }
+    },
+    selectMatch (index, data) {
+      this.selectList[index] = data
+      const popoverList = this.$refs.popover
+      popoverList.forEach(popover => {
+        popover.doClose()
+      })
+    },
+    clearMatch (index) {
+      this.selectList[index] = { value: '', text: '' }
+    },
+    excelToSystem () {
+      this.fieldMate = ''
+      this.columnString = ''
+      this.columnStringExp = ''
+      for (const i in this.selectList) {
+        const select = this.selectList[i]
+        if (select.id) {
+          this.fieldMate += select.id + ':' + i + ','
+          this.columnString += select.id + '#,'
+          this.columnStringExp += select.id + ','
+          this.titleList.push({
+            text: this.dataList[i],
+            value: select.id
+          })
+        }
+      }
+      this.isRequesting = true
+      this.$http.$request({
+        action: 'languageImport',
+        entityId: this.$metaId,
+        fileId: this.fileId,
+        fieldMate: this.fieldMate.substring(0, this.fieldMate.length - 1),
+        queryMeta: this.$query.entityId,
+        queryAttribute: this.$query.attributeId
+      })
+        .then(data => {
+          this.isRequesting = false
+          this.stepIndex = 3
+          this.length = data.total
+        })
+        .catch(err => {
+          this.isRequesting = false
+          this.$message(err.message || '处理失败')
+        })
+    },
+    getInvalidData (limit, currentPage) {
+      this.loadingInvalidData = true
+      this.$http.$request({
+        action: 'entityImport',
+        entityId: this.$metaId,
+        importModel: this.importMode,
+        fileId: this.fileId,
+        // 无效数据
+        validataType: 0,
+        showFlag: '1',
+        columnFieldNames: 'DATA_ERROR,' + this.columnString,
+        page: currentPage,
+        limit: limit,
+        requiredCheckFlag: this.requiredCheckFlag
+      })
+        .then(data => {
+          this.invalidList = data.entitys
+          this.errorLength = data.total
+          this.loadingInvalidData = false
+        })
+        .catch(err => {
+          this.loadingInvalidData = false
+          this.$message(err.message || '处理失败')
+        })
+    },
+    getValidData (limit, currentPage) {
+      this.loadingValidData = true
+      this.$http.$request({
+        action: 'entityImport',
+        entityId: this.$metaId,
+        importModel: this.importMode,
+        fileId: this.fileId,
+        // 有效数据
+        validataType: 1,
+        showFlag: '1',
+        columnFieldNames: this.columnString.substring(0, this.columnString.length - 1),
+        limit: limit,
+        page: currentPage,
+        requiredCheckFlag: this.requiredCheckFlag
+      })
+        .then(data => {
+          this.validList = data.entitys
+          this.total = data.total
+          this.loadingValidData = false
+        })
+        .catch(err => {
+          this.loadingValidData = false
+          this.$message(err.message || '处理失败')
+        })
+    },
+    columnStyle ({ row, column, rowIndex, columnIndex }) {
+      if (columnIndex === 1) { // 第三第四列的背景色就改变了2和3都是列数的下标
+        return 'color:red;'
+      }
+    },
+    headeRowClass ({ row, column, rowIndex, columnIndex }) {
+      // 表头的背景颜色
+      if (rowIndex === 0) {
+        return 'background:var(--epx-border)'
+      }
+    },
+    handleSizeChange1 (val) {
+      this.pageSize1 = val
+      this.getInvalidData(val, 1)
+    },
+    handleCurrentChange1 (val) {
+      this.currentPage1 = val
+      this.getInvalidData(this.pageSize1, val)
+    },
+    handleSizeChange2 (val) {
+      this.pageSize2 = val
+      this.getValidData(val, 1)
+    },
+    handleCurrentChange2 (val) {
+      this.currentPage2 = val
+      this.getValidData(this.pageSize2, val)
+    },
+    // 数据正确，导入全部数据
+    autoImportData (value) {
+      const loading = this.$loading({
+        lock: true,
+        text: '正在导入数据，请稍后...',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      })
+      this.$http.$request({
+        action: 'entityImport',
+        entityId: this.$metaId,
+        importModel: this.importMode,
+        // 必填检查
+        fileId: this.fileId,
+        fieldMate: this.fieldMate.substring(0, this.fieldMate.length - 1),
+        columnFieldNames: this.columnString.substring(0, this.columnString.length - 1),
+        importMethod: '1',
+        showFlag: '0',
+        validataType: 1,
+        requiredCheckFlag: this.requiredCheckFlag
+
+      })
+        .then(data => {
+          loading.close()
+          this.stepIndex = 4
+          this.length = this.total
+        })
+        .catch(err => {
+          loading.close()
+          this.$message(err.message || '处理失败')
+        })
+    },
+    // 导出无效数据
+    exportErrorData () {
+      const loading = this.$loading({
+        lock: true,
+        text: '正在导出数据，请稍后...',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      })
+      this.$http.$request({
+        action: 'entityImport',
+        entityId: this.$metaId,
+        // 必填检查
+        // requiredCheckFlag: this.radio === '1' ? 'true' : 'false',
+        fileId: this.fileId,
+        exportErrorData: '1',
+        columnFieldNames: 'DATA_ERROR,' + this.columnStringExp
+      }, {
+        responseType: 'blob',
+        onDownloadProgress: function (progressEvent) {
+          // 对原生进度事件的处理
+        }
+      })
+        .then(({ blob, filename }) => {
+          const objectUrl = URL.createObjectURL(blob)
+          var a = document.createElement('a')
+          document.body.appendChild(a)
+          a.href = objectUrl
+          a.download = filename || this.$moment().format('YYYYMMDDHHmmss') + '.xlsx'
+          a.click()
+          window.URL.revokeObjectURL(objectUrl)
+          document.body.removeChild(a)
+          loading.close()
+          this.$message.success('已下载文件到本地')
+        })
+        .catch(err => {
+          loading.close()
+          this.$message.error(err.message)
+        })
+    },
+    // 只导入有效数据
+    importValidData (value) {
+      const loading = this.$loading({
+        lock: true,
+        text: '正在导入数据，请稍后...',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      })
+      this.$http.$request({
+        action: 'entityImport',
+        entityId: this.$metaId,
+        importModel: this.importMode,
+        // 必填检查
+        // requiredCheckFlag: this.radio === '1' ? 'true' : 'false',
+        fileId: this.fileId,
+        fieldMate: this.fieldMate.substring(0, this.fieldMate.length - 1),
+        columnFieldNames: this.columnString.substring(0, this.columnString.length - 1),
+        importMethod: '1',
+        validataType: 0,
+        showFlag: '0',
+        errorIds: this.errorLength,
+        requiredCheckFlag: this.requiredCheckFlag
+      })
+        .then(data => {
+          loading.close()
+          this.stepIndex = 4
+          this.length = this.total
+        })
+        .catch(err => {
+          loading.close()
+          this.$message(err.message || '处理失败')
+        })
+    },
+    async getOptionList () {
+      const metaKeyType = this.$meta.getKeyType()
+      const metaKeyName = this.$meta.getKey()
+      const attriNames = this.$meta.attriNames || []
+      const attributes = this.$meta.attributes || {}
+      const optionList = []
+      for (const key in attriNames) {
+        const attriName = attriNames[key]
+        const attribute = attributes[attriName] || {}
+        const item = {
+          value: attribute.name,
+          text: attribute.label,
+          children: []
+        }
+        if (attribute.relatedEntity) {
+          item.children = []
+          // 获取关联对象的主键
+          try {
+            const meta = await this.$store.dispatch({
+              type: 'ADD_META',
+              metaId: attribute.relatedEntity
+            })
+            const fields = meta.getAllFieldConfigs()
+            item.children = fields.map(field => ({ value: attribute.name + '|' + field.attriName, text: field.attriLabel }))
+          } catch (err) {
+            console.error(err)
+          }
+        }
+        optionList.push(item)
+        if (attribute.isRequired === '1') {
+          if (attribute.name !== metaKeyName || !(metaKeyType !== 'assigned' || attribute.dataType === 'derive')) {
+            this.requiredList.push(item)
+          }
+        }
+      }
+      this.optionList = optionList
+    },
+    handleRemove (file, fileList) {
+      this.fileList = fileList
+    }
+  },
+  created () {
+    this.getOptionList()
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.steps {
+  margin-top: 110px;
+  margin-bottom: 30px;
+  width: 80%;
+  margin-left: 10%;
+  margin-right: 10%;
+
+    :deep(.el-step__icon.is-text) {
+      border:1.5px solid;
+    }
+    :deep(.el-step__title.is-finish) {
+      @include font_color_primary;
+    }
+    :deep(.el-step__head.is-finish) {
+      @include font_color_primary;
+    }
+    :deep(.el-step__head.is-process) {
+      color: var(--epx-text-secondary);
+      border-color: var(--epx-text-secondary);
+    }
+    :deep(.el-step__title.is-process) {
+      color: var(--epx-text-secondary);
+      border-color: var(--epx-text-secondary);
+      font-weight: normal;
+    }
+
+}
+.upload {
+  text-align: center;
+
+    :deep(.el-upload__tip) {
+      color: var(--epx-text-secondary);
+      opacity: 0.85;
+    }
+    :deep(.el-upload-dragger) {
+      border:none;
+      height: auto;
+    }
+    :deep(.el-button) {
+
+    }
+
+}
+.operate {
+  text-align:center;
+  margin-bottom:30px;
+  margin-top: 40px;
+  height: 36px;
+}
+.step2, .step3, .step4{
+  width: 70%;
+  margin-left: 15%;
+  margin-right:15%;
+}
+.line{
+  height: 1px;
+  width: 100%;
+  background-color: var(--epx-border);
+  margin: 20px 0;
+}
+
+ .opera{
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 20px;
+}
+.auto-match{
+  @inlcude font_color_primary;
+  cursor: pointer;
+}
+.match-table{
+  width: 100%;
+   th{
+     background-color: var(--epx-border);
+     height: 40px;
+     text-align: left;
+     padding:0 10px;
+   }
+   td{
+    border-bottom: 1px solid var(--epx-border);
+    text-align: left;
+    height: 40px;
+    padding:6px 10px;
+  }
+  tr:hover{
+    background-color: #dfff001a;
+  }
+}
+.clear-match {
+  cursor: pointer;
+}
+
+.over{
+  font-size: 24px;
+  margin-bottom: 10px;
+  margin-top: 10px;
+}
+.count{
+  @include font_color_primary;
+}
+.required-check-flag{
+  margin-top: 16px;
+}
+</style>