imatrix-ui 0.0.15 → 0.1.1-up

package/components/super-grid/view-image-dialog.vue

@@ -0,0 +1,173 @@
+<template>
+  <el-dialog
+    :append-to-body="true"
+    :show-close="true"
+    :title="$t('imatrixUIPublicModel.preview')"
+    :model-value="true"
+    @close="$emit('close')"
+  >
+    <template v-slot:title>
+      <span
+        >{{ $t('imatrixUIPublicModel.preview') }}
+        <!-- <i v-if="downloadable" class="el-icon-download" style="padding-left:5px;cursor:pointer;color:#409EFF" @click="downloadFile()" /> -->
+        <el-icon style="padding-left: 5px; cursor: pointer; color: #f56c6c"
+          ><el-icon-delete
+        /></el-icon>
+      </span>
+    </template>
+    <el-carousel :interval="5000" arrow="always" @change="changeFile">
+      <el-carousel-item
+        v-for="item in fileList"
+        :key="item.serverName"
+        style="background-color: #eee"
+      >
+        <el-image
+          v-if="item.isImg"
+          :src="item.src"
+          :preview-src-list="[item.src]"
+        />
+        <div v-else style="text-align: center; margin-top: 50px">
+          <div style="font-size: 18px">
+            {{ item.showName }}
+          </div>
+          <div style="padding-top: 10px">
+            {{ $t('superGrid.previewTitleWhenNotImg') }}
+          </div>
+          <div style="padding-top: 10px">
+            <el-button type="primary" size="small" @click="preview()">
+              {{ $t('fsUpload.preview') }}
+            </el-button>
+          </div>
+        </div>
+      </el-carousel-item>
+    </el-carousel>
+  </el-dialog>
+</template>
+
+<script>
+import { Delete as ElIconDelete } from '@element-plus/icons'
+import { $on, $off, $once, $emit } from '../utils/gogocodeTransfer'
+import * as Vue from 'vue'
+import { isPlateSys, getSystemFrontendUrl } from '../../src/utils/common-util'
+import { getToken } from '../../src/utils/auth'
+export default {
+  components: {
+    ElIconDelete,
+  },
+  name: 'ViewImageDialog',
+  props: {
+    fileList: {
+      type: Array,
+      default: function () {
+        return []
+      },
+    },
+    downloadable: {
+      type: Boolean,
+      default: function () {
+        return true
+      },
+    },
+    deleteable: {
+      type: Boolean,
+      default: function () {
+        return false
+      },
+    },
+  },
+  data() {
+    const token = getToken()
+    let previewUrl =
+      window.$vueApp.config.globalProperties.baseURL +
+      '/common/fs-upload/preview?jwt=' +
+      token
+    if (isPlateSys(window.$vueApp.config.globalProperties.systemCode)) {
+      previewUrl =
+        window.$vueApp.config.globalProperties.baseAPI +
+        '/component/fs-upload/preview?jwt=' +
+        token
+    }
+    return {
+      showName: null,
+      serverName: null,
+      file: null,
+      previewUrl,
+    }
+  },
+  methods: {
+    changeFile(currentIndex, origIndex) {
+      const file = this.fileList[currentIndex]
+      this.file = file
+      this.showName = file.showName
+      this.serverName = file.serverName
+    },
+    downloadFile() {
+      if (!this.showName) {
+        const file = this.fileList[0]
+        this.showName = file.showName
+        this.serverName = file.serverName
+      }
+      const token = getToken()
+      let url =
+        window.$vueApp.config.globalProperties.baseURL +
+        '/common/super-form/downloads?jwt=' +
+        token
+      if (isPlateSys(window.$vueApp.config.globalProperties.systemCode)) {
+        url =
+          window.$vueApp.config.globalProperties.baseAPI +
+          '/component/super-form/downloads?jwt=' +
+          token
+      }
+      window.location.href =
+        url +
+        '&showName=' +
+        encodeURI(this.showName) +
+        '&serverPath=' +
+        this.serverName
+    },
+    preview() {
+      if (!this.showName) {
+        const file = this.fileList[0]
+        this.showName = file.showName
+        this.serverName = file.serverName
+      }
+      if (window.$vueApp.config.globalProperties.customPreviewUrl) {
+        window.open(
+          getSystemFrontendUrl(
+            window.$vueApp.config.globalProperties.portalUrl
+          ) +
+            '/#/file-service/preview?serverPath=' +
+            this.serverName +
+            '&showName=' +
+            encodeURI(this.showName),
+          this.showName
+        )
+      } else {
+        window.open(
+          this.previewUrl +
+            '&showName=' +
+            encodeURI(this.showName) +
+            '&serverPath=' +
+            this.serverName
+        )
+      }
+    },
+    deleteFile() {
+      let index
+      if (this.fileList && this.fileList.length > 0) {
+        if (!this.showName) {
+          const file = this.fileList[0]
+          this.showName = file.showName
+          this.serverName = file.serverName
+        }
+        const serverName = this.serverName
+        index = this.fileList.findIndex(function (item) {
+          return item.serverName === serverName
+        })
+      }
+      $emit(this, 'delete', this.fileList, index)
+    },
+  },
+  emits: ['close', 'delete'],
+}
+</script>

package/components/utils/gogocodeTransfer.js

@@ -0,0 +1,59 @@
+const eventRegistryMap = new WeakMap()
+function getRegistry(instance) {
+  let events = eventRegistryMap.get(instance)
+  if (!events) {
+    eventRegistryMap.set(instance, (events = Object.create(null)))
+  }
+  return events
+}
+export function $on(instance, event, fn) {
+  if (Array.isArray(event)) {
+    event.forEach((e) => $on(instance, e, fn))
+  } else {
+    const events = getRegistry(instance)
+    ;(events[event] || (events[event] = [])).push(fn)
+  }
+  return instance
+}
+export function $once(instance, event, fn) {
+  const wrapped = (...args) => {
+    $off(instance, event, wrapped)
+    fn.call(instance, ...args)
+  }
+  wrapped.fn = fn
+  $on(instance, event, wrapped)
+  return instance
+}
+export function $off(instance, event, fn) {
+  const vm = instance
+  // all
+  if (!event) {
+    eventRegistryMap.set(instance, Object.create(null))
+    return vm
+  }
+  // array of events
+  if (Array.isArray(event)) {
+    event.forEach((e) => $off(instance, e, fn))
+    return vm
+  }
+  // specific event
+  const events = getRegistry(instance)
+  const cbs = events[event]
+  if (!cbs) {
+    return vm
+  }
+  if (!fn) {
+    events[event] = undefined
+    return vm
+  }
+  events[event] = cbs.filter((cb) => !(cb === fn || cb.fn === fn))
+  return vm
+}
+export function $emit(instance, event, ...args) {
+  instance && instance.$emit && instance.$emit(event, ...args)
+  const cbs = getRegistry(instance)[event]
+  if (cbs) {
+    cbs.map((cb) => cb.apply(instance, args))
+  }
+  return instance
+}

package/components/utils/utils.js

@@ -0,0 +1,180 @@
+import { getI18n } from '../../src/utils/util'
+import * as Vue from 'vue'
+const utils = {
+  getSearchUserFields() {
+    const i18n = getI18n()
+    return [
+      {
+        value: 'name',
+        label: i18n.t('departmentUserTree.searchFieldUserName'),
+      },
+      {
+        value: 'loginName',
+        label: i18n.t('departmentUserTree.searchFieldLoginName'),
+      },
+      { value: 'email', label: i18n.t('departmentUserTree.searchFieldEmail') },
+      {
+        value: 'telephone',
+        label: i18n.t('departmentUserTree.searchFieldTelephone'),
+      },
+      {
+        value: 'jobNumber',
+        label: i18n.t('departmentUserTree.searchFieldJobNumber'),
+      },
+      {
+        value: 'honorificName',
+        label: i18n.t('departmentUserTree.searchFieldHonorificName'),
+      },
+    ]
+  },
+  removeRow(arr, row) {
+    var length = arr.length
+    for (var i = 0; i < length; i++) {
+      if (arr[i].id === row.id) {
+        if (i === 0) {
+          arr.shift() // 删除并返回数组的第一个元素
+          return arr
+        } else if (i === length - 1) {
+          arr.pop() // 删除并返回数组的最后一个元素
+          return arr
+        } else {
+          arr.splice(i, 1) // 删除下标为i的元素
+          return arr
+        }
+      }
+    }
+    return arr
+  },
+  storeSeachValue(localStorage, searchStoreKey, searchValue) {
+    // localStorage.removeItem(searchStoreKey)
+    if (searchValue && searchValue !== '') {
+      // 查询条件不为空
+      var searchValues = localStorage.getObject(searchStoreKey)
+      if (searchValues && searchValues.length > 0) {
+        // 表示缓存中已有部门查询条件，则追加该查询条件
+        var containsResult = searchValues.filter(this.createFilter(searchValue))
+        if (containsResult.length === 0) {
+          // 如果不包含相同的查询条件，则添加，如果包含则不需要再添加
+          const searchValueObj = { value: searchValue }
+          searchValues.push(searchValueObj)
+          localStorage.setObject(searchStoreKey, searchValues)
+        }
+      } else {
+        var searchValuesArr = []
+        const searchValueObj = { value: searchValue }
+        searchValuesArr.push(searchValueObj)
+        localStorage.setObject(searchStoreKey, searchValuesArr)
+      }
+      this.restaurants = localStorage.getObject(searchStoreKey)
+    }
+  },
+  createFilter(queryString) {
+    return (restaurant) => {
+      return (
+        restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
+      )
+    }
+  },
+  handleSelectUtil(item, localStorage) {
+    this.storeSeachValue(localStorage, this.searchStoreKey, this.filterText)
+    this.search(item.value)
+  },
+  analysisLabelTag(labelTag, row, contextParam, additionalParam) {
+    let returnStr = ''
+    if (labelTag) {
+      let tags
+      if (labelTag !== '' && typeof labelTag === 'string') {
+        tags = labelTag.split('-#-#')
+      } else if (typeof labelTag === 'object') {
+        tags = labelTag
+      }
+      if (tags && tags.length > 0) {
+        for (var i = 0; i < tags.length; i++) {
+          let tag = tags[i]
+          if (tag.indexOf('obj.') !== -1) {
+            tag = tag.replace('${obj.', '').replace('}', '')
+            if (row) {
+              let originalValue = row[tag]
+              if (this.childIsObjectProp(tag)) {
+                originalValue = this.childObjectPropOriginalValue(row, tag)
+              }
+              returnStr += originalValue
+            }
+          } else if (tag.indexOf('request.') !== -1) {
+            tag = tag.replace('${request.', '').replace('}', '')
+            if (additionalParam) {
+              const originalValue = additionalParam[tag]
+              if (originalValue) {
+                returnStr += originalValue
+              }
+            }
+          } else if (tag.indexOf('input.') !== -1) {
+            tag = tag.replace('${input.', '').replace('}', '')
+            returnStr += tag
+          } else if (tag.indexOf('context.') !== -1) {
+            tag = tag.replace('${context.', '').replace('}', '')
+            if (contextParam) {
+              const originalValue = contextParam[tag]
+              if (originalValue) {
+                returnStr += originalValue
+              }
+            }
+          }
+        }
+      }
+    }
+    return returnStr
+  },
+  childIsObjectProp(prop) {
+    if (prop.indexOf('.') > 0) {
+      return true
+    } else {
+      return false
+    }
+  },
+  childObjectPropOriginalValue(row, prop) {
+    try {
+      let objValue = row
+      const props = prop.split('.')
+      props.forEach((subProp) => {
+        if (objValue) {
+          objValue = objValue[subProp]
+        } else {
+          objValue = ''
+          throw objValue
+        }
+      })
+      return objValue
+    } catch (e) {
+      return ''
+    }
+  },
+  // 根据指定用户信息获得用户集合
+  getSelectUsers(searchField, selectUserInfo, separator) {
+    return new Promise((resolve, reject) => {
+      if (!searchField) {
+        resolve([])
+      } else if (!selectUserInfo) {
+        resolve([])
+      } else {
+        this.$http
+          .get(
+            window.$vueApp.config.globalProperties.baseAPI +
+              '/component/organization-trees/select-users?searchField=' +
+              searchField +
+              '&selectUserInfo=' +
+              selectUserInfo +
+              '&separator=' +
+              separator
+          )
+          .then((users) => {
+            resolve(users)
+          })
+          .catch((error) => {
+            reject(error)
+          })
+      }
+    })
+  },
+}
+export default utils

package/components/utils/value-set.js

@@ -0,0 +1,98 @@
+/* eslint-disable no-undef */
+import * as Vue from 'vue'
+/**
+ * 封装值设置为枚举 或 bean方式时的值为'key-value'键值对信息
+ */
+export function packageEnumAndBeanColumnValueSets(columns, listCode) {
+  return new Promise((resolve, reject) => {
+    const valueSetColumnsInfo = {
+      listCode: listCode,
+      valueSetMetas: [],
+    }
+    const valueSetColumnIndexs = []
+    for (let i = 0; i < columns.length; i++) {
+      const column = columns[i]
+      const prop = column.prop ? column.prop : column.label
+      const columnValueSet = packageEnumAndBeanColumnValueSet(column)
+      let titleValueSet = null
+      const titleValueSetJson = column.titleValueSet
+      if (titleValueSetJson) {
+        titleValueSet = packageEnumAndBeanColumnValueSet(
+          JSON.parse(titleValueSetJson)
+        )
+      }
+      if (columnValueSet || titleValueSet) {
+        const valueSetMeta = {
+          prop: prop,
+        }
+        if (columnValueSet) {
+          // 字段的值设置
+          valueSetMeta.valueSet = columnValueSet
+        }
+        if (titleValueSet) {
+          valueSetMeta.titleValueSet = titleValueSet
+        }
+        valueSetColumnsInfo.valueSetMetas.push(valueSetMeta)
+        valueSetColumnIndexs.push(i)
+      }
+    }
+    if (valueSetColumnsInfo.valueSetMetas.length > 0) {
+      window.$vueApp.config.globalProperties.$http
+        .post(
+          window.$vueApp.config.globalProperties.baseURL +
+            '/common/super-grids/value-sets',
+          valueSetColumnsInfo
+        )
+        .then((columnValueSets) => {
+          valueSetColumnIndexs.forEach((columnIndex) => {
+            let valueSetMap
+            const prop = columns[columnIndex].prop
+              ? columns[columnIndex].prop
+              : columns[columnIndex].label
+            for (const prop1 in columnValueSets) {
+              if (prop === prop1) {
+                valueSetMap = columnValueSets[prop]
+                break
+              }
+            }
+            if (valueSetMap) {
+              if (valueSetMap.valueSet) {
+                columns[columnIndex].valueSet = valueSetMap.valueSet
+              }
+              if (valueSetMap.titleValueSet) {
+                columns[columnIndex].titleValueSetValue =
+                  valueSetMap.titleValueSet
+              }
+            }
+          })
+          resolve(columns)
+        })
+        .catch((error) => {
+          reject(error)
+        })
+    } else {
+      resolve(columns)
+    }
+  })
+}
+
+function packageEnumAndBeanColumnValueSet(valueSetInfo) {
+  /**
+   * 枚举类型值设置前缀
+   */
+  const ENUM_NAME_PREFIX = 'enumname:'
+  /**
+   * bean形式值设置前缀
+   */
+  const BEAN_NAME_PREFIX = 'beanname:'
+  const enumName = valueSetInfo.enumName
+  const beanName = valueSetInfo.beanName
+  if (enumName && enumName !== '') {
+    if (valueSetInfo.remoteEnum === true) {
+      // 需要远程获得枚举值
+      return ENUM_NAME_PREFIX + enumName
+    }
+  } else if (beanName && beanName !== '') {
+    return BEAN_NAME_PREFIX + beanName
+  }
+}

package/components/z-test-utton/index.vue

@@ -0,0 +1,82 @@
+<template>
+  <button class="muk-btn" :class="[size, type]">
+    <!-- 定义插槽用于让用户自定义按钮你们的内容 -->
+    <slot></slot>
+  </button>
+  <el-button type="primary"></el-button>
+</template>
+
+<script>
+export default {
+  name: 'MukButton',
+}
+</script>
+
+<script setup>
+/**
+ * 接收传过来的值
+ *
+ * @param size 定义按钮的大小 可选值为 'large' | 'middle' | 'small' | 'mini'
+ * @param type 定义按钮的类型 默认不填
+ */
+defineProps({
+  size: {
+    type: String,
+    default: 'middle',
+  },
+  type: {
+    type: String,
+    default: 'default',
+  },
+})
+</script>
+
+<style lang="scss" scoped>
+.muk-btn {
+  appearance: none;
+  border: none;
+  outline: none;
+  background: #fff;
+  text-align: center;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  cursor: pointer;
+}
+.large {
+  width: 240px;
+  height: 50px;
+  font-size: 16px;
+}
+.moddle {
+  width: 180px;
+  height: 50px;
+  font-size: 16px;
+}
+.small {
+  width: 100px;
+  height: 32px;
+}
+.mini {
+  width: 60px;
+  height: 32px;
+}
+.default {
+  border-color: #e4e4e4;
+  color: #666;
+}
+.primary {
+  border-color: skyblue;
+  background: skyblue;
+  color: #fff;
+}
+.plain {
+  border-color: skyblue;
+  color: skyblue;
+  background: lighten(skyblue, 50%);
+}
+.gray {
+  border-color: #ccc;
+  background: #ccc;
+  color: #fff;
+}
+</style>

package/package.json

@@ -1,40 +1,29 @@
-{
-  "name": "imatrix-ui",
-  "version": "0.0.15",
-  "description": "前端组件库：表格、表单、组织结构树等",
-  "main": "lib/super-ui.umd.min.js",
-  "private": false,
-  "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "lib": "vue-cli-service build --target lib --name super-ui --dest lib packages/index.js",
-    "lint": "vue-cli-service lint",
-    "test:e2e": "vue-cli-service test:e2e",
-    "test:unit": "vue-cli-service test:unit"
-  },
-  "dependencies": {
-    "element-ui": "^2.4.5",
-    "sessionstorage": "^0.1.0",
-    "vue": "^2.5.22",
-    "vue-router": "^3.0.1",
-    "vuex": "^3.0.1"
-  },
-  "devDependencies": {
-    "@vue/cli-plugin-babel": "^3.1.1",
-    "@vue/cli-plugin-e2e-cypress": "^3.1.1",
-    "@vue/cli-plugin-eslint": "^3.1.1",
-    "@vue/cli-plugin-unit-mocha": "^3.1.1",
-    "@vue/cli-service": "^3.1.1",
-    "@vue/eslint-config-standard": "^4.0.0",
-    "@vue/test-utils": "^1.0.0-beta.20",
-    "babel-cli": "^6.26.0",
-    "babel-eslint": "^10.0.1",
-    "chai": "^4.1.2",
-    "eslint": "^5.8.0",
-    "eslint-plugin-vue": "^5.0.0",
-    "node-sass": "^4.9.0",
-    "sass-loader": "^7.1.0",
-    "vue-cli-plugin-element": "^1.0.1",
-    "vue-template-compiler": "^2.5.21"
-  }
-}
+{
+  "name": "imatrix-ui",
+  "version": "0.1.1-up",
+  "type": "module",
+  "scripts": {
+    "lib": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@tinymce/tinymce-vue": "5",
+    "async-validator": "^4.2.5",
+    "element-plus": "^2.4.1",
+    "js-cookie": "^3.0.5",
+    "sortablejs": "^1.15.0",
+    "tinymce": "^6.7.1"
+  },
+  "devDependencies": {
+    "@element-plus/icons": "^0.0.11",
+    "@vitejs/plugin-vue": "^4.2.3",
+    "element-plus": "^2.4.1",
+    "nprogress": "^0.2.0",
+    "sass": "^1.69.4",
+    "vite": "^4.4.5",
+    "vue": "^3.3.4",
+    "vue-i18n": "^9.5.0",
+    "vue-router": "^4.2.5",
+    "vuex": "^4.1.0"
+  }
+}

package/public/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + Vue</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>

package/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>