agilebuilder-ui 1.0.70 → 1.0.71-temp8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agilebuilder-ui",
-  "version": "1.0.70",
+  "version": "1.0.71temp8",
   "type": "module",
   "private": false,
   "main": "./lib/super-ui.js",
@@ -19,6 +19,7 @@
     "path-to-regexp": "6.2.1",
     "sortablejs": "^1.15.0",
     "tinymce": "5.8.2",
+    "compressorjs": "1.2.1",
     "uuid": "^9.0.1"
   },
   "devDependencies": {
@@ -33,6 +34,7 @@
     "vue": "3.3.4",
     "vue-i18n": "^9.5.0",
     "vue-router": "^4.2.5",
-    "vuex": "^4.1.0"
+    "vuex": "^4.1.0",
+    "axios": "^1.5.1"
   }
 }

package/packages/department-tree/src/department-tree.vue

@@ -1,16 +1,28 @@
 <template>
 	<div>
+		
+		<DepartmentMobileTree
+			v-if="isMobile"
+			ref="inlineDeparmentTree"
+			:department-info="departmentInfo"
+			:multiple="multiple"
+			:search-field="searchField"
+			:select-department-info="selectDepartmentInfo"
+			:separator="separator"
+			@close="result"
+		/>
 		<el-dialog
-				:close-on-click-modal="false"
-				:title="myTitle"
-				:width="multiple ? '920px' : '509px'"
-				append-to-body
-				class="user-tree"
-				model-value
-				@close="$emit('close')"
-				@closed="$emit('closed')"
-				@open="$emit('open')"
-				@opend="$emit('opend')"
+			v-else
+			:close-on-click-modal="false"
+			:title="myTitle"
+			:width="multiple ? '920px' : '509px'"
+			append-to-body
+			class="user-tree"
+			model-value
+			@close="$emit('close')"
+			@closed="$emit('closed')"
+			@open="$emit('open')"
+			@opend="$emit('opend')"
 		>
 			<inline-department-tree
 					ref="inlineDeparmentTree"
@@ -40,11 +52,14 @@
 <script>
 import {$emit} from '../../utils/gogocodeTransfer'
 import InlineDepartmentTree from '../../department-tree-inline/src/department-tree-inline.vue'
+import DepartmentMobileTree from '../../department-tree-mobile/src/department-tree-app.vue'
+import {isMobileBrowser} from '../../../src/utils/common-util'
 
 export default {
 	name: 'DepartmentTree',
 	components: {
 		InlineDepartmentTree,
+		DepartmentMobileTree
 	},
 	props: {
 		// 是否是多选树，默认是true
@@ -93,12 +108,15 @@ export default {
 		},
 	},
 	data() {
+    	const isMobile = isMobileBrowser()
+		console.log('部门树---isMobile=', isMobile)
 		let myTitle = this.$t('imatrixUIMessage.pleaseSelectDepartment')
 		if (this.title) {
 			myTitle = this.title
 		}
 		return {
 			myTitle,
+			isMobile
 		}
 	},
 	methods: {

package/packages/department-tree-mobile/src/department-tree-app.vue

@@ -1,5 +1,5 @@
 <template>
-    <el-drawer v-model="isShowForm" direction="btt" size="100%" class="organization-tree">
+    <el-drawer v-model="isShowForm" :close-on-click-modal="false" :close-on-press-escape="false" direction="btt" size="100%" class="organization-tree" @close="closeTree()">
     <template #header>
         <div style="text-align: center;">
             {{$t('imatrixUIMessage.pleaseSelect')}}
@@ -48,10 +48,10 @@ const props = defineProps<{
 		}
 	}>()
 	const emits = defineEmits(['close'])
-	let isShowForm = ref(false)
-	function showTree() {
-		isShowForm.value = true
-	}
+	let isShowForm = ref(true)
+	// function showTree() {
+	// 	isShowForm.value = true
+	// }
 	function closeTree(selectNodeInfo) {
 		emits('close', selectNodeInfo)
 		isShowForm.value = false
@@ -59,7 +59,7 @@ const props = defineProps<{
 	function selectDepartment() {
 		// this.$refs.inlineDeparmentTree.selectDepartment()
 	}
-	defineExpose({showTree})
+	// defineExpose({showTree})
 </script>
 <style>
 .organization-tree, .organization-tree .el-checkbox__label,.organization-tree .el-breadcrumb__inner,.organization-tree .el-tree {

package/packages/department-user-tree/src/department-user-tree.vue

@@ -1,7 +1,7 @@
 <template>
 	<div>
 		<department-user-multi-tree
-				v-if="multiple"
+				v-if="!isMobile && multiple"
 				:department-info="departmentInfo"
 				:height="height"
 				:is-need-virtual-user="isNeedVirtualUser"
@@ -16,7 +16,7 @@
 				@opendDialog="opendDialog"
 		/>
 		<department-user-single-tree
-				v-if="!multiple"
+				v-if="!isMobile && !multiple"
 				:department-info="departmentInfo"
 				:is-need-virtual-user="isNeedVirtualUser"
 				:title="title"
@@ -26,6 +26,14 @@
 				@openDialog="openDialog"
 				@opendDialog="opendDialog"
 		/>
+		<DepartmentUserMobileTree
+			v-if="isMobile"
+			:department-info="departmentInfo"
+			:search-field="searchField"
+			:select-user-info="selectUserInfo"
+			:separator="separator"
+			@close="closeDialog"
+		/>
 	</div>
 </template>
 
@@ -33,12 +41,15 @@
 import {$emit} from '../../utils/gogocodeTransfer'
 import DepartmentUserSingleTree from './department-user-single-tree.vue'
 import DepartmentUserMultiTree from './department-user-multiple-tree.vue'
+import DepartmentUserMobileTree from '../../department-user-tree-mobile/src/department-user-tree-app.vue'
+import {isMobileBrowser} from '../../../src/utils/common-util'
 
 export default {
 	name: 'DepartmentUserTree',
 	components: {
 		DepartmentUserSingleTree,
 		DepartmentUserMultiTree,
+		DepartmentUserMobileTree
 	},
 	props: {
 		// 是否是多选树，默认是true
@@ -88,12 +99,15 @@ export default {
 		}
 	},
 	data() {
+    	const isMobile = isMobileBrowser()
+		console.log('部门人员树---isMobile=', isMobile)
 		let myTitle = this.$t('imatrixUIMessage.pleaseSelectPersonnel')
 		if (this.title) {
 			myTitle = this.title
 		}
 		return {
 			myTitle,
+			isMobile
 		}
 	},
 	methods: {

package/packages/department-user-tree-mobile/src/department-user-tree-app.vue

@@ -1,5 +1,5 @@
 <template>
-    <el-drawer v-model="isShowForm" direction="btt" size="100%" class="organization-tree">
+    <el-drawer v-model="isShowForm" direction="btt" size="100%" class="organization-tree" @close="closeTree()">
     <template #header>
         <div style="text-align: center;">
             {{$t('imatrixUIMessage.pleaseSelect')}}
@@ -47,10 +47,10 @@ const props = defineProps<{
 		}
 	}>()
 	const emits = defineEmits(['close'])
-	let isShowForm = ref(false)
-	function showTree() {
-		isShowForm.value = true
-	}
+	let isShowForm = ref(true)
+	// function showTree() {
+	// 	isShowForm.value = true
+	// }
 	function closeTree(selectNodeInfo) {
 		emits('close', selectNodeInfo)
 		isShowForm.value = false
@@ -58,7 +58,7 @@ const props = defineProps<{
 	function selectDepartment() {
 		// this.$refs.inlineDeparmentTree.selectDepartment()
 	}
-	defineExpose({showTree})
+	// defineExpose({showTree})
 </script>
 <style>
 .organization-tree, .organization-tree .el-checkbox__label,.organization-tree .el-breadcrumb__inner,.organization-tree .el-tree {

package/packages/fs-upload-new/src/file-upload-mobile/file-upload-app.vue

@@ -0,0 +1,410 @@
+<template>
+  <div>
+    <q-uploader
+      :url="defaultAction"
+      label="Upload"
+      field-name="file"
+      :with-credentials="true"
+      :multiple="multiple"
+    >
+      <template v-slot:header>
+        <div class="row no-wrap items-center q-pa-sm q-gutter-xs">
+          <q-btn
+            v-if="newFiles.length > 0"
+            icon="clear_all"
+            round
+            dense
+            flat
+          />
+          <q-btn
+            v-if="fileList.length > 0"
+            icon="done_all"
+            round
+            dense
+            flat
+          />
+          <q-spinner
+            v-if="isUploading && !disable"
+            class="q-uploader__spinner"
+          />
+          <q-btn
+            v-if="!disable"
+            type="a"
+            icon="add_box"
+            round
+            dense
+            flat
+            @click="pickFiles"
+          />
+          <q-btn
+            v-if="!disable"
+            icon="cloud_upload"
+            round
+            dense
+            flat
+            @click="uploadFiles"
+          />
+          <q-btn
+            v-if="showClose"
+            icon="close"
+            round
+            dense
+            flat
+            @click="$emit('close')"
+          >
+            <q-tooltip>Close</q-tooltip>
+          </q-btn>
+        </div>
+      </template>
+      <template v-slot:list>
+        <q-list separator>
+          <q-item
+            v-for="(tempFile,index) in newFiles"
+            :key="index"
+            active
+            active-class="bg-teal-1 text-grey-8"
+          >
+            <q-item-section>
+              <q-item-label class="full-width ellipsis">
+                {{ tempFile.name }}
+              </q-item-label>
+            </q-item-section>
+
+            <q-item-section
+              v-if="isImg(tempFile)"
+              thumbnail
+            >
+              <img :src="tempFile.base64Path">
+            </q-item-section>
+
+            <q-item-section
+              v-if="!disable"
+              side
+            >
+              <q-btn
+                size="12px"
+                color="red"
+                flat
+                dense
+                round
+                icon="delete"
+                @click.native="removeFile(index,true,tempFile.name)"
+              />
+            </q-item-section>
+          </q-item>
+        </q-list>
+        <q-list separator>
+          <q-item
+            v-for="(myFile,index) in fileList"
+            :key="myFile.serverPath"
+          >
+            <q-item-section>
+              <q-item-label class="full-width ellipsis">
+                {{ myFile.name }}
+              </q-item-label>
+            </q-item-section>
+
+            <q-item-section
+              v-if="isImg(myFile)"
+              thumbnail
+            >
+              <img :src="imgSrc+'&showName='+ encodeURI(myFile.name) + '&serverPath=' + myFile.serverPath">
+            </q-item-section>
+
+            <q-item-section
+              top
+              side
+            >
+              <div
+                class="q-col-gutter-xs row items-start"
+              >
+                <div class="col">
+                  <q-btn
+                    size="12px"
+                    flat
+                    dense
+                    round
+                    icon="download"
+                    @click.native="downloadFile(myFile)"
+                  />
+                </div>
+                <div
+                  v-if="!disable"
+                  class="col"
+                >
+                  <q-btn
+                    size="12px"
+                    color="red"
+                    flat
+                    dense
+                    round
+                    icon="delete"
+                    @click.native="removeFile(index,false,myFile.name)"
+                  />
+                </div>
+              </div>
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </template>
+    </q-uploader>
+  </div>
+</template>
+
+<script>
+import Vue from 'vue'
+import {
+  getToken
+} from '../../../src/utils/auth.js' // 获得token
+export default {
+  name: 'FileUploadApp',
+  props: {
+    systemCode: {
+      type: String,
+      default: null
+    },
+    multiple: {
+      type: Boolean,
+      default: false
+    },
+    // 已上传文件列表
+    fileResult: {
+      type: Array,
+      default: null
+    },
+    showClose: {
+      type: Boolean,
+      default: true
+    },
+    // 是否禁止编辑，为true只能下载，不能删除和上传
+    disable: {
+      type: Boolean,
+      default: false
+    },
+    // 文件大小限制，单位是M
+    limitFileSize: {
+      type: Number,
+      default: null
+    },
+    beforeUpload: {
+      type: Function,
+      default: null
+    },
+    beforeRemove: {
+      type: Function,
+      default: null
+    },
+    // 组件id，在表单或列表中应该唯一，一般传字段名即可
+    componentId: {
+      type: String,
+      default: function () {
+        return 'file-upload'
+      }
+    },
+    // 组件名称，一般是字段label
+    componentName: {
+      type: String,
+      default: function () {
+        return 'file-upload'
+      }
+    },
+    options: {
+      type: Object,
+      default: null
+    },
+    // 列表编码。选择文件后，回填列表文件集合使用。
+    listCode: {
+      type: String,
+      default: null
+    }
+  },
+  data () {
+    let fileList = []
+    if (this.fileResult) {
+      fileList = JSON.parse(JSON.stringify(this.fileResult))
+    }
+    const defaultAction = Vue.prototype.baseAPI + '/component/super-form/uploads'
+    const token = getToken()
+    let baseURL
+    if (this.options) {
+      baseURL = this.options.backendUrl
+    }
+    if (!baseURL) {
+      baseURL = Vue.prototype.baseURL
+    }
+    const imgSrc = baseURL + '/common/super-form/downloads?jwt=' + token
+    return {
+      defaultAction,
+      fileList,
+      imgSrc,
+      newFiles: [],
+      isUploading: false, // 是否正在上传
+      baseURL
+    }
+  },
+  watch: {
+    fileResult (val) {
+      this.fileList = JSON.parse(JSON.stringify(val))
+    }
+  },
+  methods: {
+    addFile (files) {
+      if (this.multiple) {
+        this.newFiles = this.newFiles.concat(files)
+      } else {
+        if (files && files.length > 0) {
+          this.newFiles = files
+        } else {
+          this.newFiles = []
+        }
+      }
+      this.$emit('pickup-file', this.newFiles)
+    },
+    isImg (file) {
+      const fileName = file.name
+      if (fileName) {
+        return fileName.indexOf('jpg') !== -1 || fileName.indexOf('JPG') !== -1 || fileName.indexOf('png') !== -1 || fileName.indexOf('PNG') !== -1
+      }
+      return false
+    },
+    removeFile (index, isTemp, fileName) {
+      if (!isTemp) {
+        // 表示是已经上传了的文件
+        const rmFile = JSON.parse(JSON.stringify(this.fileList[index]))
+        this.fileList.splice(index, 1)
+        this.$emit('remove', { rmFiles: [rmFile], serverFiles: this.fileList })
+      } else {
+        // 表示是新添加，还未上传的文件
+        const rmFile = JSON.parse(JSON.stringify(this.newFiles[index]))
+        this.newFiles.splice(index, 1)
+        this.$emit('remove', { rmFiles: [rmFile], serverFiles: this.fileList, newFiles: this.newFiles })
+        // console.log('---点击了删除文件按钮，发送postmessage给手机端---')
+        const message = {
+          type: 'removeFiles',
+          files: [fileName],
+          componentId: this.componentId,
+          componentName: this.componentName
+        }
+        window.parent.postMessage(JSON.stringify(message), '*')
+      }
+    },
+    downloadFile (file) {
+      this.$emit('download', file)
+    },
+    // 表示点击了选择文件按钮
+    pickFiles () {
+      // console.log('---点击了选择文件按钮---')
+      const message = {
+        type: 'pickFiles',
+        multiple: this.multiple,
+        componentId: this.componentId,
+        componentName: this.componentName,
+        systemCode: this.systemCode,
+        token: getToken(),
+        listCode: this.listCode
+      }
+      window.parent.postMessage(JSON.stringify(message), '*')
+    },
+    // 表示点击了上传按钮
+    uploadFiles () {
+      // console.log('---点击了上传按钮---this.newFiles=', this.newFiles)
+      if (this.newFiles && this.newFiles.length > 0) {
+        this.isUploading = true
+        // const message = {
+        //   type: 'uploadFiles',
+        //   systemCode: this.systemCode,
+        //   token: getToken(),
+        //   limitFileSize: this.limitFileSize,
+        //   componentId: this.componentId,
+        //   componentName: this.componentName
+        // }
+        let isCanUpload = true
+        if (this.beforeUpload && typeof (this.beforeUpload) === 'function') {
+          for (let i = 0; i < this.newFiles.length; i++) {
+            const file = this.newFiles[i]
+            const isMobile = true
+            // eslint-disable-next-line no-useless-call
+            isCanUpload = this.beforeUpload.call(this, file, isMobile)
+            if (isCanUpload !== undefined && isCanUpload === false) {
+              break
+            }
+          }
+        }
+        if (!isCanUpload) {
+        // 不能提交文件
+          return
+        }
+        // window.parent.postMessage(JSON.stringify(message), '*')
+        this.uploadFileSuccess(this.newFiles)
+      } else {
+        this.$emit('uploadend', this.fileList)
+      }
+    },
+    cleareQueuedFiles () {
+      // console.log('---cleareQueuedFiles---')
+      this.newFiles = []
+      // console.log('---点击了清空临时文件按钮，发送postmessage给手机端---')
+      const message = {
+        type: 'clearFiles',
+        componentId: this.componentId,
+        componentName: this.componentName
+      }
+      window.parent.postMessage(JSON.stringify(message), '*')
+    },
+    clearUploadedFiles () {
+      // console.log('---clearUploadedFiles---')
+      this.fileList = []
+    },
+    pickFileDone (data) {
+      this.appFileDone(data)
+    },
+    uploadFileDone (data) {
+      // 表示文件上传到服务器成功
+      this.appFileDone(data)
+    },
+    appFileDone (data) {
+      const files = data.files
+      let myFiles = files
+      if (files && typeof files === 'string') {
+        myFiles = JSON.parse(files)
+      }
+      if (myFiles && !Array.isArray(myFiles)) {
+        myFiles = [myFiles]
+      }
+      if (data.type === 'pickFileDone') {
+        // 选择文件完成
+        console.log('appFileDone11111----myFiles=', JSON.stringify(myFiles))
+        this.addFile(myFiles)
+      } else {
+        // 表示文件上传到服务器成功
+        console.log('appFileDone22222----myFiles=', JSON.stringify(myFiles))
+        this.uploadFileSuccess(myFiles)
+      }
+    },
+    uploadFileSuccess (files) {
+      this.isUploading = false
+      // 表示文件上传到服务器成功
+      if (files) {
+        // files:[{name:'',serverPath:''},{name:'',serverPath:''}]
+        if (this.multiple) {
+          this.$set(this, 'fileList', this.fileList.concat(files))
+        } else {
+          // 单选时将已选文件移除，然后再替换为新上传的文件
+          const rmFiles = JSON.parse(JSON.stringify(this.fileList))
+          this.fileResult[0] = files
+          this.$set(this, 'fileList', files)
+          this.$emit('remove', { rmFiles, serverFiles: this.fileList })
+        }
+      }
+      console.log('uploadFileSuccess111111----this.fileList=', JSON.stringify(this.fileList))
+      this.$set(this, 'newFiles', [])
+      this.$set(this, 'isUploading', false)
+      this.$emit('uploadend', this.fileList)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>