imatrix-ui 2.8.21-dw → 2.8.21

package/packages/remove-user/src/remove-user.vue

@@ -0,0 +1,195 @@
+<template>
+  <div>
+    <el-dialog
+      class="user-tree"
+      visible
+      :title="$t('departmentUserTreeInline.removeUser')"
+      append-to-body
+      :close-on-click-modal="false"
+      :width="width"
+      @open="$emit('open')"
+      @opend="$emit('opend')"
+      @close="$emit('close')"
+      @closed="$emit('closed')"
+    >
+      <div style="margin-bottom:10px">
+        <el-button type="danger" size="mini" icon="el-icon-delete" @click="removeAllUser()">
+          {{ $t('imatrixUIPublicModel.clear') }}
+        </el-button>
+      </div>
+
+      <el-table
+        ref="removeUserGrid"
+        :data="users"
+        row-key="id"
+        border
+        :height="height"
+      >
+        <el-table-column
+          :label="$t('departmentUserTreeInline.name')"
+          prop="name"
+        />
+        <el-table-column
+          :label="$t('departmentUserTreeInline.department')"
+          prop="mainDepartmentName"
+        />
+        <el-table-column
+          v-if="containBranch"
+          :label="$t('departmentUserTreeInline.branch')"
+          prop="subCompanyName"
+        />
+        <el-table-column :label="$t('imatrixUIPublicModel.edit')" align="center" width="60px">
+          <template slot-scope="scope">
+            <div>
+              <el-button type="danger" size="mini" icon="el-icon-delete" circle @click="removeUser(scope.$index)" />
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div slot="footer" class="dialog-footer">
+        <el-button size="small" @click="$emit('close')">
+          {{ $t('imatrixUIPublicModel.cancel') }}
+        </el-button>
+        <el-button size="small" type="primary" @click="confirmSelectUser">
+          {{ $t('imatrixUIPublicModel.sure') }}
+        </el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<style>
+</style>
+<script>
+import removeUserService from './remove-user-service'
+export default {
+  name: 'RemoveUser',
+  components: {
+  },
+  props: {
+    // 多选用户树时，已选择用户id或登录名集合，多个之间以逗号隔开
+    selectUserInfo: {
+      type: [String, Number],
+      default: null
+    },
+    // 移除用户时，用户属性名称：id、loginName、email、telephone，默认是loginName
+    searchField: {
+      type: String,
+      default: 'loginName'
+    },
+    // 弹框的宽度
+    width: {
+      type: String,
+      default: '30%'
+    },
+    // 弹框的高度
+    height: {
+      type: String,
+      default: '300px'
+    },
+    // 多选树时结果之间的分隔符，默认是逗号分隔
+    separator: {
+      type: String,
+      default: ','
+    }
+  },
+  data() {
+    return {
+      users: [],
+      originalUsers: [], // 原来选择的用户集合
+      containBranch: false, // 是否包含分支
+      tenantNodeId: -1 // 公司节点的id
+    }
+  },
+  created() {
+    if (this.selectUserInfo) {
+      if (this.selectUserInfo === '所有用户') {
+        // 表示已选择所有用户
+        this.users.push(this.packageAllUser())
+      } else if (this.selectUserInfo === '所有工作组人员') {
+        this.users.push(this.packageAllWgUser())
+      } else {
+        // 表示不是选择的所有用户
+        this.getSelectUsers(this.searchField, this.selectUserInfo, this.separator).then(users => {
+          this.originalUsers = users
+          this.users = users
+        })
+      }
+    }
+  },
+  methods: {
+    ...removeUserService,
+    confirmSelectUser() {
+      const searchFieldValues = []
+      const retainSelectUsers = {
+        userIds: [],
+        loginNames: [],
+        emails: [],
+        telephones: [],
+        users: [],
+        userNames: []
+      }
+      for (var i = 0; i < this.users.length; i++) {
+        var user = this.users[i]
+        retainSelectUsers.userIds.push(user.id)
+        retainSelectUsers.loginNames.push(user.loginName)
+        if (user.email && user.email !== '') {
+          retainSelectUsers.emails.push(user.email)
+        }
+        if (user.telephone && user.telephone !== '') {
+          retainSelectUsers.telephones.push(user.telephone)
+        }
+        retainSelectUsers.users.push(user)
+        var name = user.name
+        if (this.containBranch && user.subCompanyName) {
+          // 如果包含分支机构，则拼接分支机构名称
+          name = name + '（' + user.subCompanyName + '）'
+        }
+        retainSelectUsers.userNames.push(name)
+        // 将用于查询的字段的值存到数组中，获得移除的元素时使用
+        searchFieldValues.push(user[this.searchField])
+      }
+      const removeItems = this.getRemoveItems(this.originalUsers, searchFieldValues, this.searchField)
+      this.$emit('close', retainSelectUsers, removeItems)
+    },
+    // 部门人员树选中了组织结构树的根节点
+    packageAllUser() {
+      // 表示集合中不存在该用户，则封装该用户
+      var allUser = {
+        id: this.tenantNodeId,
+        name: '所有用户'
+      }
+      return allUser
+    },
+    // 工作组人员树选中了组织结构树的根节点
+    packageAllWgUser() {
+      // 表示集合中不存在该用户，则封装该用户
+      var allUser = {
+        id: this.tenantNodeId,
+        name: '所有工作组人员'
+      }
+      return allUser
+    },
+    // 移除用户
+    removeUser(index) {
+      this.users.splice(index, 1)
+    },
+    // 清空用户
+    removeAllUser() {
+      this.users = []
+    },
+    // 获得移除的元素集合
+    getRemoveItems(allValues, retainValues, searchField) {
+      if (retainValues === undefined || retainValues.length === 0) {
+        // 表示没有保留任何一条记录，即移除了所有元素
+        return allValues
+      }
+      if (allValues) {
+        // 根据id筛选出
+        return allValues.filter(item => retainValues.indexOf(item[searchField]) === -1)
+      }
+      return []
+    }
+
+  }
+}
+</script>

package/packages/remove-workgroup/index.js

@@ -0,0 +1,6 @@
+import RemoveWorkgroup from './src/remove-workgroup.vue'
+RemoveWorkgroup.install = function(Vue) {
+  Vue.component(RemoveWorkgroup.name, RemoveWorkgroup)
+}
+
+export default RemoveWorkgroup

package/packages/remove-workgroup/src/remove-workgroup-service.js

@@ -0,0 +1,20 @@
+import Vue from 'vue'
+const removeUserService = {
+  // 根据指定工作组信息获得工作组集合
+  getSelectWgs(searchField, selectWgInfo, separator) {
+    return new Promise((resolve, reject) => {
+      if (!searchField) {
+        resolve([])
+      } else if (!selectWgInfo) {
+        resolve([])
+      } else {
+        this.$http.get(Vue.prototype.baseAPI + '/component/organization-trees/select-workgroups?searchField=' + searchField + '&selectWorkgroupInfo=' + selectWgInfo + '&separator=' + separator).then(workgroups => {
+          resolve(workgroups)
+        }).catch(error => {
+          reject(error)
+        })
+      }
+    })
+  }
+}
+export default removeUserService

package/packages/remove-workgroup/src/remove-workgroup.vue

@@ -0,0 +1,159 @@
+<template>
+  <div>
+    <el-dialog
+      class="user-tree"
+      visible
+      :title="$t('workgroupTree.removeWorkgroup')"
+      append-to-body
+      :close-on-click-modal="false"
+      :width="width"
+      @open="$emit('open')"
+      @opend="$emit('opend')"
+      @close="$emit('close')"
+      @closed="$emit('closed')"
+    >
+      <div style="margin-bottom:10px">
+        <el-button type="danger" size="mini" icon="el-icon-delete" @click="removeAllWg()">
+          {{ $t('imatrixUIPublicModel.clear') }}
+        </el-button>
+      </div>
+
+      <el-table
+        ref="removeWgGrid"
+        :data="workgroups"
+        row-key="id"
+        border
+        :height="height"
+      >
+        <el-table-column
+          :label="$t('workgroupTree.name')"
+          prop="name"
+        />
+        <el-table-column
+          :label="$t('workgroupTree.code')"
+          prop="code"
+        />
+        <el-table-column :label="$t('imatrixUIPublicModel.edit')" align="center" width="60px">
+          <template slot-scope="scope">
+            <div>
+              <el-button type="danger" size="mini" icon="el-icon-delete" circle @click="removeWg(scope.$index)" />
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div slot="footer" class="dialog-footer">
+        <el-button size="small" @click="$emit('close')">
+          {{ $t('imatrixUIPublicModel.cancel') }}
+        </el-button>
+        <el-button size="small" type="primary" @click="confirmSelectWg">
+          {{ $t('imatrixUIPublicModel.sure') }}
+        </el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<style>
+</style>
+<script>
+import removeWorkgroupService from './remove-workgroup-service'
+export default {
+  name: 'RemoveWorkgroup',
+  components: {
+  },
+  props: {
+    // 多选工作组树时，已选择工作组id或工作组名称或编码集合，多个之间以逗号隔开
+    selectWorkgroupInfo: {
+      type: [String, Number],
+      default: null
+    },
+    // 移除工作组时，工作组属性名称：id、name、code，默认是id
+    searchField: {
+      type: String,
+      default: 'id'
+    },
+    // 弹框的宽度
+    width: {
+      type: String,
+      default: '30%'
+    },
+    // 弹框的高度
+    height: {
+      type: String,
+      default: '300px'
+    },
+    // 多选树时结果之间的分隔符，默认是逗号分隔
+    separator: {
+      type: String,
+      default: ','
+    }
+  },
+  data() {
+    return {
+      workgroups: [],
+      originalWgs: [], // 原来选择的工作组集合
+      tenantNodeId: -1 // 公司节点的id
+    }
+  },
+  created() {
+    if (this.selectWorkgroupInfo) {
+      this.getSelectWgs(this.searchField, this.selectWorkgroupInfo, this.separator).then(workgroups => {
+        this.originalWgs = workgroups
+        this.workgroups = workgroups
+      })
+    }
+  },
+  methods: {
+    ...removeWorkgroupService,
+    confirmSelectWg() {
+      const searchFieldValues = []
+      var retainSelectWgs = {
+        ids: [],
+        names: [],
+        codes: [],
+        workgroups: []
+      }
+      for (var i = 0; i < this.workgroups.length; i++) {
+        var workgroup = this.workgroups[i]
+        retainSelectWgs.ids.push(workgroup.id)
+        retainSelectWgs.codes.push(workgroup.code)
+        retainSelectWgs.workgroups.push(workgroup)
+        retainSelectWgs.names.push(workgroup.name)
+        // 将用于查询的字段的值存到数组中，获得移除的元素时使用
+        searchFieldValues.push(workgroup[this.searchField])
+      }
+      const removeItems = this.getRemoveItems(this.originalWgs, searchFieldValues, this.searchField)
+      this.$emit('close', retainSelectWgs, removeItems)
+    },
+    // 选中了组织结构树的根节点
+    packageAllWg() {
+      // 表示集合中不存在该用户，则封装该用户
+      var allDept = {
+        id: this.tenantNodeId,
+        name: '所有工作组'
+      }
+      return allDept
+    },
+    // 移除用户
+    removeWg(index) {
+      this.workgroups.splice(index, 1)
+    },
+    // 清空用户
+    removeAllWg() {
+      this.workgroups = []
+    },
+    // 获得移除的元素集合
+    getRemoveItems(allValues, retainValues, searchField) {
+      if (retainValues === undefined || retainValues.length === 0) {
+        // 表示没有保留任何一条记录，即移除了所有元素
+        return allValues
+      }
+      if (allValues) {
+        // 根据id筛选出
+        return allValues.filter(item => retainValues.indexOf(item[searchField]) === -1)
+      }
+      return []
+    }
+
+  }
+}
+</script>

package/packages/rich-editor/index.js

@@ -0,0 +1,7 @@
+import RichEditor from './index.vue'
+
+RichEditor.install = function(Vue) {
+  Vue.component(RichEditor.name, RichEditor)
+}
+
+export default RichEditor

package/packages/rich-editor/index.vue

@@ -0,0 +1,278 @@
+<template>
+  <div :style="{maxHeight: maxHeight+'px'}">
+    <Editor
+      v-if="!disabled"
+      v-model="contentValue"
+      :init="init"
+      :disabled="disabled"
+    />
+    <div v-else>
+      <div :id="viewerId" :style="{maxHeight: maxHeight+'px'}" style="overflow: auto;border: 1px solid #DCDFE6;padding: 2px;" />
+      <el-tooltip :content="$t('imatrixUIPublicModel.fullScreen')" class="item" effect="dark" placement="top">
+        <em
+          class="el-icon-full-screen"
+          style="z-index: 1;right: 20px;position: absolute;top:2px"
+          @click="fullScreenContent"
+        />
+      </el-tooltip>
+      <el-image
+        ref="previewImg"
+        :src="srcList[0]"
+        :preview-src-list="srcList"
+        style="display: none;width: 100px; height: 100px"
+      />
+    </div>
+    <el-dialog
+      :visible.sync="dialogVisible"
+      :title="title"
+      destroy-on-close
+      append-to-body
+      fullscreen
+    >
+      <div :id="fullscreenViewerId" />
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+
+import { getLanguageWithLocale } from '../../src/utils/util'
+// 引入tinymce编辑器
+import Editor from '@tinymce/tinymce-vue'
+// 引入node_modules里的tinymce相关文件文件
+import tinymce from 'tinymce/tinymce.min.js' // tinymce默认hidden，不引入则不显示编辑器
+import 'tinymce/themes/silver' // 编辑器主题，不引入则报错
+import 'tinymce/icons/default' // 引入编辑器图标icon，不引入则不显示对应图标
+
+// 引入编辑器插件
+import 'tinymce/plugins/advlist' // 高级列表
+import 'tinymce/plugins/directionality' // 文字方向
+import 'tinymce/plugins/fullscreen' // 全屏
+import 'tinymce/plugins/hr' // 水平分割线
+import 'tinymce/plugins/image' // 插入编辑图片
+import 'tinymce/plugins/link' // 超链接
+import 'tinymce/plugins/lists' // 列表插件
+import 'tinymce/plugins/paste' // 粘贴插件
+import 'tinymce/plugins/preview'// 预览
+import 'tinymce/plugins/print'// 打印
+import 'tinymce/plugins/quickbars' // 快速工具栏
+import 'tinymce/plugins/save' // 保存
+import 'tinymce/plugins/searchreplace' // 查找替换
+// import 'tinymce/plugins/spellchecker'  //拼写检查，暂未加入汉化，不建议使用
+// import 'tinymce/plugins/tabfocus' // 切入切出，按tab键切出编辑器，切入页面其他输入框中
+import 'tinymce/plugins/table' // 表格
+// import 'tinymce/plugins/template' // 内容模板
+import 'tinymce/plugins/textcolor' // 文字颜色
+// import 'tinymce/plugins/textpattern' // 快速排版
+// import 'tinymce/plugins/toc' // 目录生成器
+// import 'tinymce/plugins/visualblocks' // 显示元素范围
+// import 'tinymce/plugins/visualchars' // 显示不可见字符
+import 'tinymce/plugins/wordcount' // 字数统计
+// 样式
+// import 'tinymce/skins/content/default/content.min.css'
+import 'tinymce/skins/ui/oxide/skin.min.css'
+import 'tinymce/skins/ui/oxide/content.min.css'
+// 主题
+import 'tinymce/themes/silver'
+// skin_url: '/tinymce/skins/ui/oxide-dark',//皮肤：暗色
+import Vue from 'vue'
+export default {
+  name: 'RichEditor',
+  components: {
+    Editor
+  },
+  props: {
+    entity: {
+      type: Object,
+      default: null
+    },
+    prop: {
+      type: String,
+      default: null
+    },
+    value: {
+      type: String,
+      default: ''
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    options: {
+      type: Object,
+      default: null
+    },
+    title: {
+      type: String,
+      default: ''
+    },
+    plugins: {
+      type: [String, Array],
+      default: 'paste print preview searchreplace directionality fullscreen image link table hr  advlist lists wordcount  '
+    },
+    toolbar: {
+      type: [String, Array],
+      default: ' undo redo | formatselect fontsizeselect bold italic strikethrough underline hr forecolor backcolor | image |  ' +
+      '  lineheight   bullist numlist table | print fullscreen  preview  '
+    }
+  },
+  data() {
+    const _that = this
+    if (getLanguageWithLocale() === 'zh_CN') {
+      require('./langs/zh-Hans.js')
+    }
+    let maxHeight = '400'
+    if (this.options && this.options.maxHeight) {
+      maxHeight = this.options.maxHeight
+    }
+    return {
+      maxHeight,
+      init: {
+        height: maxHeight,
+        language: 'zh-Hans', // 语言类型
+        plugins: this.plugins, // 插件配置
+        toolbar: this.toolbar, // 工具栏配置，设为false则隐藏
+        menubar: false, // 菜单栏配置，设为false则隐藏，不配置则默认显示全部菜单，也可自定义配置--查看 http://tinymce.ax-z.cn/configure/editor-appearance.php --搜索“自定义菜单”
+        fontsize_formats: '12px 14px 16px 18px 20px 22px 24px 28px 32px 36px 48px 56px 72px', // 字体大小
+        font_formats: '微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;', // 字体样式
+        // 自带默认字体：'Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings,zapf dingbats'
+        lineheight_formats: '0.5 0.8 1 1.2 1.5 1.75 2 2.5 3 4 5', // 行高配置，也可配置成"12px 14px 16px 20px"这种形式
+        placeholder: '在这里输入文字',
+        branding: false, // tiny技术支持信息是否显示
+        resize: false, // 编辑器宽高是否可变，false-否,true-高可变，'both'-宽高均可，注意引号
+        // statusbar: false,  //最下方的元素路径和字数统计那一栏是否显示
+        elementpath: false, // 元素路径是否显示
+        // image_caption: true,
+        // relative_urls: false,  //false: tinymce将不再自动将文件路径由绝对转为相对
+        // convert_urls: false,  //false: tinymce将不再自动处理文件路径
+        // file_picker_callback: () => {
+        //   alert(11)
+        // },
+        image_description: false,
+        content_style: 'img {width:400px;height:300px}', // 直接自定义可编辑区域的css样式
+        // content_css: '/tinycontent.css',  //以css文件方式自定义可编辑区域的css样式，css文件需自己创建并引入
+        // images_upload_url: '/apib/api-upload/uploadimg',  //后端处理程序的url，建议直接自定义上传函数image_upload_handler，这个就可以不用了
+        // images_upload_base_path: '/demo',  //相对基本路径--关于图片上传建议查看--http://tinymce.ax-z.cn/general/upload-images.php
+        paste_data_images: true, // 图片是否可粘贴'
+        urlconverter_callback: (url, node, onSave, name) => {
+          if (node === 'img' && url.startsWith('blob:')) {
+            console.log('urlconverter_callback ....')
+            tinymce.activeEditor && tinymce.activeEditor.uploadImages()
+            return url
+          }
+          return url
+        },
+        images_upload_handler: (blobInfo, success, failure, progress) => {
+          let file
+          if (blobInfo.blob() instanceof File) {
+            console.log('images_upload_handler .File')
+            file = blobInfo.blob()
+          } else {
+            console.log('images_upload_handler .base64')
+            file = _that.base64ToFile(blobInfo.base64(), 'a.png')
+          }
+          const params = new FormData()
+          params.append('file', file)
+          const config = {
+            headers: {
+              'Content-Type': 'multipart/form-data'
+            }
+          }
+          _that.$http.post('/common/fs-upload/rich-editor-image', params, config).then(res => {
+            console.log(res)
+            success(res.url)
+          }).catch(() => {
+            failure('上传出错，服务器开小差了呢')
+          })
+        }
+
+      },
+      contentValue: this.value,
+      markValue: '',
+      srcList: [],
+      psrcList: [],
+      viewerId: 'aglie_rich_editor_' + (new Date()).getTime(),
+      dialogVisible: false,
+      fullscreenViewerId: 'editor_viewer_' + (new Date()).getTime(),
+      ImageComponent: null
+    }
+  },
+  watch: {
+    value: {
+      deep: true,
+      handler(newValue, oldValue) {
+        this.contentValue = newValue
+        this.entity[this.prop] = newValue
+      }
+    },
+    contentValue: {
+      deep: true,
+      handler(newValue, oldValue) {
+        this.$emit('input', newValue)
+        this.entity[this.prop] = newValue
+      }
+    },
+    disabled: {
+      deep: true,
+      handler(newValue, oldValue) {
+        if (newValue) {
+          this.initViewer()
+        }
+      }
+    }
+  },
+  created() {
+  },
+  mounted() {
+    if (this.disabled) {
+      this.initViewer()
+    } else {
+      tinymce.init(this.init)
+    }
+  },
+  methods: {
+    showImage($event) {
+      console.log(this.$refs.previewImg)
+      this.srcList = [$event.target.currentSrc]
+      this.$refs.previewImg.showViewer = true
+    },
+    fullScreenContent() {
+      this.dialogVisible = true
+      this.$nextTick(() => {
+        // 必须得再new一个，  不然会导致表单里显示。弹框不显示，弹框显示，表单不显示内容
+        const viewContent = new this.ImageComponent().$mount()
+        document.getElementById(this.fullscreenViewerId).appendChild(viewContent.$el)
+      })
+    },
+    initViewer() {
+      const that = this
+      let m = this.value.replaceAll('<img', '<img @click="showImage" ')
+      m = '<div> ' + m + ' </div> '
+      this.ImageComponent = Vue.extend({
+        methods: {
+          showImage($event) {
+            console.log($event)
+            that.showImage($event)
+          }
+        },
+        template: m
+      })
+      const viewContent = new this.ImageComponent().$mount()
+      this.$nextTick(() => {
+        document.getElementById(this.viewerId).appendChild(viewContent.$el)
+      })
+    },
+    base64ToFile(data, filename) {
+      var bstr = atob(data)
+      var n = bstr.length
+      var u8arr = new Uint8Array(n)
+      filename = new Date().getTime() + '-' + Math.floor((Math.random() * 10000)) + '.png'
+      while (n--) {
+        u8arr[n] = bstr.charCodeAt(n)
+      }
+      return new File([u8arr], filename, { type: 'image/png' })
+    }
+  }
+}
+</script>
+