@sunny-base/effects 0.0.1 → 0.0.3

package/i18n/components/ModuleI18nDialog.vue

@@ -0,0 +1,229 @@
+<template>
+  <div>
+    <el-row :getter="20">
+      <el-col :span="6">
+        <div style="overflow-y: auto;">
+          <resource-tree @currentChange="treeCurrentChange" />
+        </div>
+      </el-col>
+      <el-col :span="18">
+        <el-card
+          v-loading="loading"
+          style="padding: 10px;"
+        >
+          <el-tabs v-model="activeName">
+            <el-tab-pane label="菜单资源" name="first">
+              <el-table
+                :data="menuTable.data"
+                border
+              >
+                <el-table-column
+                  v-for="(item,index) in menuTable.conditions"
+                  :key="index"
+                  :label="item.label"
+                >
+                  <template slot-scope="scope">
+                    <span v-if="item.type === 'spanselect'">
+                      {{ filterSelect(scope.row[item.prop], item.optionlist) }}
+                    </span>
+                    <span v-else-if="item.type === 'input'">
+                      <el-input
+                        v-model="scope.row[item.prop]"
+                      />
+                    </span>
+                    <span v-else>{{ scope.row[item.prop] }}</span>
+                  </template>
+                </el-table-column>
+              </el-table>
+              <el-table
+                :data="resourceTable.data"
+                border
+              >
+                <el-table-column
+                  v-for="(item,index) in resourceTable.conditions"
+                  :key="index"
+                  :label="item.label"
+                >
+                  <template slot-scope="scope">
+                    <span v-if="item.type === 'spanselect'">
+                      {{ filterSelect(scope.row[item.prop], item.optionlist) }}
+                    </span>
+                    <span v-else-if="item.type === 'input'">
+                      <el-input
+                        v-model="scope.row[item.prop]"
+                      />
+                    </span>
+                    <span v-else>{{ scope.row[item.prop] }}</span>
+                  </template>
+                </el-table-column>
+              </el-table>
+            </el-tab-pane>
+            <el-tab-pane label="自定义资源" name="second">
+              <el-row v-loading="loading" style="margin-bottom: 10px;">
+                <el-button :disabled="!nodeData.id" @click="addRow">新增</el-button>
+              </el-row>
+              <el-table
+                :data="customTable.data"
+                border
+              >
+                <el-table-column
+                  v-for="(item,index) in customTable.conditions"
+                  :key="index"
+                  :label="item.label"
+                >
+                  <template slot-scope="scope">
+                    <span v-if="item.type === 'spanselect'">
+                      {{ filterSelect(scope.row[item.prop], item.optionlist) }}
+                    </span>
+                    <span v-else-if="item.type === 'input'">
+                      <el-input
+                        v-model="scope.row[item.prop]"
+                      />
+                    </span>
+                    <span v-else>{{ scope.row[item.prop] }}</span>
+                  </template>
+                </el-table-column>
+                <el-table-column width="55">
+                  <template slot-scope="scope">
+                    <el-button type="text" @click="delRow(scope)">删除</el-button>
+                  </template>
+                </el-table-column>
+              </el-table>
+            </el-tab-pane>
+          </el-tabs>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { queryI18nResource, saveI18nResource } from '@/api/i18nConfig'
+import { queryByXuhao } from '@/api/core'
+import { filterSelect } from '@/mixins/configurationFile/utils'
+import ResourceTree from './ResourceTree.vue'
+import selectOpts from '@/utils/select-options'
+export default {
+  components: {
+    ResourceTree
+  },
+  data() {
+    return {
+      nodeData: '',
+      menuTable: { // 菜单表格
+        data: [],
+        conditions: []
+      },
+      resourceTable: { // 资源表格
+        data: [],
+        conditions: []
+      },
+      customTable: { // 自定义表格
+        data: [],
+        conditions: []
+      },
+      langCol: [], // 语言列表
+      loading: false,
+      activeName: 'first',
+      selectOpts
+    }
+  },
+  methods: {
+    // 初始化
+    openInit() {
+      queryByXuhao({ cXuhao: 'LANG' }).then(res => {
+        const langCol = res.result.map((item) => {
+          return {
+            label: item.cName,
+            prop: item.cXuhao,
+            type: 'input',
+            show: true
+          }
+        })
+        const menuCol = [{
+          label: '菜单名',
+          prop: 'cKey',
+          show: true
+        }]
+        const resourceCol = [{
+          label: '资源ID',
+          prop: 'nResourceid',
+          show: true
+        }, {
+          label: '资源名称',
+          prop: 'cKey',
+          show: true
+        }, {
+          label: '资源类别',
+          prop: 'nType',
+          type: 'spanselect',
+          optionlist: selectOpts.i18nTypeOpts,
+          show: true
+        }]
+        const customCol = [{
+          label: 'KEY',
+          prop: 'cKey',
+          type: 'input',
+          show: true
+        }]
+        this.menuTable.conditions = [...menuCol, ...langCol]
+        this.resourceTable.conditions = [...resourceCol, ...langCol]
+        this.customTable.conditions = [...customCol, ...langCol]
+      })
+    },
+    // 树节点点击事件
+    treeCurrentChange(data) {
+      this.customTable.data = []
+      this.nodeData = data
+      this.loading = true
+      queryI18nResource({ authResMenu: { id: this.nodeData.id }}).then(res => {
+        this.menuTable.data = []
+        if (Object.keys(res.result).length !== 0) { // 排除点击基础系统
+          this.menuTable.data.push(res.result.mapMenu)
+          this.resourceTable.data = res.result.mapAll
+          this.customTable.data = res.result.customMapAll
+        }
+      }).finally(() => {
+        this.loading = false
+      })
+    },
+    // 自定义表格新增行
+    addRow() {
+      this.customTable.data.push({
+        nResourceid: this.nodeData.id
+      })
+    },
+    // 自定义表格删除行
+    delRow(scope) {
+      this.customTable.data.splice(scope.$index, 1)
+    },
+    saveAction() {
+      if (!this.nodeData.id) {
+        this.$store.dispatch('i18nConfig/closeDialog')
+        return false
+      }
+      const arr = this.customTable.data.map((item) => {
+        return {
+          ...item,
+          nResourceid: this.nodeData.id,
+          cResname: this.nodeData.cModname,
+          nType: 8
+        }
+      })
+      const jsonStr = {
+        authI18n: {
+          nResourceid: this.nodeData.id
+        },
+        mapMenu: this.menuTable.data[0],
+        mapAll: this.resourceTable.data,
+        customMapAll: arr
+      }
+      saveI18nResource(jsonStr).then(res => {
+        this.$message.success(res.message)
+        this.$store.dispatch('i18nConfig/closeDialog')
+      })
+    },
+    filterSelect
+  }
+}
+</script>

package/i18n/components/ResourceTree.vue

@@ -0,0 +1,132 @@
+<template>
+  <div v-loading="treeLoading" class="tree-content">
+    <el-tree
+      ref="treeInstance"
+      :data="treeData.list"
+      node-key="id"
+      highlight-current
+      lazy
+      draggable
+      :load="loadNode"
+      :expand-on-click-node="false"
+      :current-node-key="treeData.currentNode"
+      @node-click="nodeClick"
+    >
+      <span slot-scope="{ data }" class="custom-tree-node">
+        <i v-if="data.loading" class="el-icon-loading" /> <span>{{ data.id }} - {{ data.cModname }}</span>
+      </span>
+    </el-tree>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive } from 'vue'
+import { findMenuAll } from '@/api/resource'
+import { Message } from 'element-ui'
+// * 获取this指向
+const treeInstance = ref() // tree本身
+// 对外emit
+const emit = defineEmits(['currentChange'])
+const treeLoading = ref(false)
+// 树的相关响应式数据
+const treeData = reactive({
+  // 树形数据
+  list: [],
+  // 当前节点
+  currentNode: null
+})
+// 节点被点击
+const nodeClick = (data, node, item) => {
+  treeData.currentNode = data.id
+  emit('currentChange', data)
+}
+// 加载子节点
+const loadNode = async(node, resolve, reject) => {
+  if (node.level === 0) {
+    resolve(JSON.parse(process.env.VUE_APP_SYSTEM))
+  } else {
+    try {
+      const nParent = node.data // get parent
+      const data = await getChildrenNode(nParent)
+      resolve(data || [])
+    } catch {
+      resolve([])
+    }
+  }
+}
+// 更具id获取下级列表
+const getChildrenNode = (nParent) => {
+  return new Promise((resolve, reject) => {
+    const { id, cSystem } = nParent
+    const payload = {
+      authResMenu:
+      {
+        // 1.菜单 4超链接  5：弹窗  -1:everyone资源 6打开新窗口的外链
+        cType: '0,1,4,5,6',
+        nParkeyid: id,
+        cSystem
+      }
+    }
+    findMenuAll(payload).then(res => {
+      if (res.success) {
+        const result = res.result.map(it => {
+          return {
+            ...it,
+            isLeaf: it.cType !== '1', // 如果不是菜单，就没有下级
+            loading: false // 预设一个loading
+          }
+        })
+        resolve(result)
+      } else {
+        Message({
+          showClose: true,
+          message: `error:${res.message}`,
+          duration: 3500,
+          type: 'error'
+        })
+        reject(new Error('error'))
+      }
+    }).catch(err => {
+      reject(err)
+    })
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+.tree-content {
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+}
+
+:deep(.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content) {
+  background-color: #ECFDF5;
+  border-radius: 3px;
+  position: relative;
+  overflow: hidden;
+
+  &::before {
+    display: block;
+    content: " ";
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 100%;
+    width: 5px;
+    background-color: #10B981;
+    border-radius: 3px;
+  }
+}
+
+:deep(.el-tree__drop-indicator) {
+  height: 5px;
+  border-radius: 3px;
+}
+
+.custom-tree-node {
+  font-size: 14px;
+  color: #606266;
+  padding-right: 8px;
+}
+</style>

package/i18n/components/i18nExport.vue

@@ -0,0 +1,200 @@
+<template>
+  <div>
+    <el-row>
+      <el-form ref="ruleForm" :model="ruleForm" label-width="100px" :show-message="false">
+        <el-col :span="12">
+          <el-form-item label="资源类型" prop="nType" required>
+            <el-select v-model="ruleForm.nType">
+              <el-option label="菜单字段按钮" value="1" />
+              <el-option label="静态资源" value="5" />
+              <el-option label="kunkka翻译包" value="7" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col v-if="ruleForm.nType == 1 || ruleForm.nType == 5" :span="12">
+          <el-form-item label="系统" prop="cSystem" required>
+            <el-select v-model="ruleForm.cSystem">
+              <el-option
+                v-for="ss in selectOpts.systemOpts"
+                :key="ss.cKeynumb"
+                :label="ss.cKeyname"
+                :value="ss.cKeynumb"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <div v-if="ruleForm.nType == 5">
+          <el-col :span="24">
+            <el-divider content-position="left">GitLab代码仓库</el-divider>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="用户名" prop="userName" required>
+              <el-input v-model="ruleForm.userName" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="密码" prop="passWord" required>
+              <el-input v-model="ruleForm.passWord" show-password />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="项目" prop="projectId" required>
+              <el-select
+                v-model="ruleForm.projectId"
+                filterable
+                placeholder="请输入关键词"
+                :loading="loading"
+                style="width: 100%"
+                @focus="remoteMethod"
+                @change="projectCheck"
+              >
+                <el-option
+                  v-for="item in projectOptions"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="分支" prop="branchName" required>
+              <el-select
+                v-model="ruleForm.branchName"
+                filterable
+                style="width: 100%"
+              >
+                <el-option
+                  v-for="item in branchOptions"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="搜索路径" prop="searchPath" required>
+              <el-input v-model="ruleForm.searchPath" placeholder="举例：文件夹名/src/views" />
+            </el-form-item>
+          </el-col>
+        </div>
+      </el-form>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { exportI18n, findProjectList, findBranchList } from '@/api/i18nConfig'
+import selectOpts from '@/utils/select-options'
+import { FileSaverDoExport } from '@/utils/file-saver'
+
+export default {
+  data() {
+    return {
+      name: 'i18nConfig',
+      loading: false,
+      ruleForm: {},
+      projectOptions: [],
+      branchOptions: [],
+      selectOpts
+    }
+  },
+  methods: {
+    openInit() {
+      this.ruleForm = {}
+      this.$nextTick(() => {
+        this.$refs['ruleForm'].clearValidate()
+      })
+    },
+    submitForm() {
+      this.$refs['ruleForm'].validate((valid) => {
+        if (valid) {
+          this.loading = true
+          this.$emit('changeLoading', 'exportDialogModal', true)
+          var json
+          if (this.ruleForm.nType == 1) {
+            json = {
+              'nType': this.ruleForm.nType,
+              'authI18n': {
+                'cSystem': this.ruleForm.cSystem
+              }
+            }
+          } else if (this.ruleForm.nType == 5) {
+            json = {
+              'nType': this.ruleForm.nType,
+              'authI18n': {
+                'cSystem': this.ruleForm.cSystem
+              },
+              'gitLabDTO': {
+                'userName': this.ruleForm.userName,
+                'passWord': this.ruleForm.passWord,
+                'projectId': this.ruleForm.projectId,
+                'searchPath': this.ruleForm.searchPath,
+                'branchName': this.ruleForm.branchName
+              }
+            }
+          } else if (this.ruleForm.nType == 7) {
+            json = {
+              'nType': this.ruleForm.nType
+            }
+          }
+          exportI18n(json).then(res => {
+            const _this = this
+            const fileReader = new FileReader()
+            fileReader.onload = function() {
+              try {
+                const jsonData = JSON.parse(this.result)
+                if (jsonData.code) {
+                  _this.$message.error(jsonData.message)
+                }
+              } catch (err) {
+                const fileName = res.headers['content-disposition'].split('attachment;filename=')[1]
+                FileSaverDoExport(res.data, fileName)
+              }
+            }
+            fileReader.readAsText(res.data ? res.data : res)
+          }).finally(() => {
+            this.loading = false
+            this.$emit('changeLoading', 'exportDialogModal', false)
+            this.$store.dispatch('i18nConfig/closeDialog')
+          })
+        } else {
+          return false
+        }
+      })
+    },
+    remoteMethod() {
+      this.loading = true
+      findProjectList({
+        'userName': this.ruleForm.userName,
+        'passWord': this.ruleForm.passWord
+      }).then(res => {
+        this.projectOptions = res.result.map(el => {
+          return {
+            label: el.nameWithNamespace,
+            value: el.projectId
+          }
+        })
+      }).finally(() => {
+        this.loading = false
+      })
+    },
+    projectCheck() {
+      findBranchList({
+        'userName': this.ruleForm.userName,
+        'passWord': this.ruleForm.passWord,
+        'projectId': this.ruleForm.projectId
+      }).then(res => {
+        this.$set(this.ruleForm, 'branchName', '')
+        this.branchOptions = res.result.map(el => {
+          return {
+            label: el,
+            value: el
+          }
+        })
+      })
+    }
+  }
+}
+</script>

package/i18n/components/i18nImport.vue

@@ -0,0 +1,124 @@
+<template>
+  <div>
+    <el-row>
+      <el-form ref="ruleForm" :model="ruleForm" label-width="100px" :show-message="false">
+        <el-col :span="12">
+          <el-form-item label="资源类型" prop="nType" required>
+            <el-select v-model="ruleForm.nType">
+              <el-option label="菜单字段按钮" value="1" />
+              <el-option label="静态资源" value="5" />
+              <el-option label="kunkka翻译包" value="7" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col v-if="ruleForm.nType == 1 || ruleForm.nType == 5" :span="12">
+          <el-form-item label="系统" prop="cSystem" required>
+            <el-select v-model="ruleForm.cSystem">
+              <el-option
+                v-for="ss in selectOpts.systemOpts"
+                :key="ss.cKeynumb"
+                :label="ss.cKeyname"
+                :value="ss.cKeynumb"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="导入文件" required>
+            <el-upload
+              ref="upload"
+              class="upload-demo"
+              :action="url"
+              :http-request="uploadAction"
+              name="fileName"
+              :file-list="fileList"
+              :auto-upload="false"
+              :limit="1"
+              accept=".xlsx, .xls"
+            >
+              <el-button
+                slot="trigger"
+                :style="{padding:'5px 10px'}"
+                type="primary"
+              ><i class="icon-btn-small iconfont icon-excel" />选取文件</el-button>
+            </el-upload>
+            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
+          </el-form-item>
+        </el-col>
+      </el-form>
+    </el-row>
+  </div>
+
+</template>
+
+<script>
+import { importI18n } from '@/api/i18nConfig'
+import selectOpts from '@/utils/select-options'
+
+export default {
+  data() {
+    return {
+      name: 'i18nConfig',
+      ruleForm: {},
+      fileList: [], // 上传的文件列表
+      // 上传路径
+      url: process.env.VUE_APP_BASE_API + '/business/authI18n/importI18n',
+      loading: false,
+      selectOpts
+    }
+  },
+  methods: {
+    openInit() {
+      this.ruleForm = {}
+      this.visible = true
+    },
+    // 文件上传
+    uploadAction(data) {
+      this.$refs['ruleForm'].validate((valid) => {
+        if (valid) {
+          if (data.file.type !== 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') {
+            this.$message.error('文件类型错误')
+            return false
+          }
+          this.loading = true
+          this.$emit('changeLoading', 'importDialogModal', true)
+          var formData = new FormData()
+          formData.append('fileName', data.file)
+          formData.append('cWork', this.$store.getters.code)
+          formData.append('cSystem', this.ruleForm.cSystem)
+          formData.append('nType', this.ruleForm.nType)
+          importI18n(formData).then(res => {
+            this.$message.success(res.message)
+            this.visible = false
+          }).catch(() => {
+            this.$refs.upload.clearFiles()
+          }).finally(() => {
+            this.$emit('changeLoading', 'importDialogModal', false)
+            this.loading = false
+            this.$store.dispatch('i18nConfig/closeDialog')
+          })
+        } else {
+          return false
+        }
+      })
+    },
+    // 文件上传
+    upLoads() {
+      this.$refs.upload.submit()
+    }
+  }
+}
+
+</script>
+
+<style lang="scss">
+  .filedialog {
+    .el-dialog__body {
+      padding-top: 0;
+      padding-bottom: 10px;
+    }
+  }
+.el-upload__tip{
+  font-weight: 600;
+}
+</style>