imatrix-ui 2.8.21-dw → 2.8.21

package/packages/multipart-upload/src/multipart-upload-form.vue

@@ -0,0 +1,297 @@
+<!-- 文件上传 -->
+<template>
+  <div>
+    <template v-if="!disabled">
+      <el-input
+        ref="item"
+        :readonly="true"
+        :disabled="disabled"
+        :value="value"
+        :placeholder="$t('imatrixUIMessage.fileUpload')"
+      >
+        <el-button v-if="!disabled" slot="append" size="mini" icon="el-icon-upload2" @click="openAnnexUpload" />
+        <el-button slot="append" size="mini" icon="el-icon-zoom-in" @click="preview" />
+      </el-input>
+
+      <el-dialog
+        :title="$t('imatrixUIMessage.tips')"
+        :visible.sync="annexUploadFlag"
+        :append-to-body="true"
+        :show-close="true"
+        width="30%"
+      >
+        <el-upload
+          v-if="annexUploadFlag"
+          :action="defaultAction"
+          :accept="fileSetObj.accept?fileSetObj.accept:null"
+          :on-success="uploadOnSuccess"
+          :headers="headers"
+          :before-upload="handleBeforeUpload"
+          :with-credentials="true"
+          name="file"
+        >
+          <el-button>{{ $t('imatrixUIMessage.upload') }}</el-button>
+        </el-upload>
+      </el-dialog>
+      <el-dialog
+        :append-to-body="true"
+        :show-close="true"
+        :title="$t('imatrixUIPublicModel.previewImage')"
+        :visible.sync="showPreviewSingleImage"
+        @close="$emit('close')"
+      >
+        <span slot="title">{{ $t('imatrixUIPublicModel.previewImage') }}
+        <!-- <i v-if="downloadable" class="el-icon-download" style="padding-left:5px;cursor:pointer;color:#409EFF" @click="downloadFile()" /> -->
+        <!-- <i v-if="deleteable" class="el-icon-delete" style="padding-left:5px;cursor:pointer;color:#F56C6C" @click="deleteFile()" /> -->
+        </span>
+        <el-image v-if="previewImageInfo&&previewImageInfo.isImg" :preview-src-list="[previewImageInfo.src]" :src="previewImageInfo.src" />
+      </el-dialog>
+      <el-dialog
+        :append-to-body="true"
+        :show-close="true"
+        :title="$t('imatrixUIPublicModel.preview')"
+        :visible.sync="showPreviewMulti"
+        width="30%"
+        @close="$emit('close')"
+      >
+        <span slot="title">{{ $t('imatrixUIPublicModel.preview') }}
+        <!-- <i v-if="downloadable" class="el-icon-download" style="padding-left:5px;cursor:pointer;color:#409EFF" @click="downloadFile()" /> -->
+        <!-- <i v-if="deleteable" class="el-icon-delete" style="padding-left:5px;cursor:pointer;color:#F56C6C" @click="deleteFile()" /> -->
+        </span>
+        <el-table
+          :show-header="false"
+          :data="showFileList"
+        >
+          <el-table-column
+            width="300"
+            prop="showName"
+          />
+          <el-table-column align="right">
+            <template slot-scope="scope">
+              <el-tooltip :content="$t('imatrixUIPublicModel.preview')" class="item" effect="dark" placement="top">
+                <i class="el-icon-view" style="cursor:pointer;" @click="previewSingle(scope.row)" />
+              </el-tooltip>
+            </template>
+          </el-table-column>
+          <el-table-column v-if="!disabled">
+            <template slot-scope="scope">
+              <el-tooltip :content="$t('imatrixUIPublicModel.delete')" class="item" effect="dark" placement="top">
+                <i class="el-icon-delete" style="cursor:pointer;" @click="deleteRow(scope.$index)" />
+              </el-tooltip>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-dialog>
+    </template>
+    <template v-else>
+      <fs-preview :label="value" :file-list="showFileList" />
+    </template>
+  </div>
+</template>
+
+<script>
+
+import { getToken } from '../../../src/utils/auth'
+import { isImage } from '../../../src/utils/util'
+import { isPlateSys, getSystemFrontendUrl } from '../../../src/utils/common-util'
+import Vue from 'vue'
+import FsPreview from '../../fs-preview/src/fs-preview.vue'
+export default {
+  name: 'MultipartUploadForm',
+  components: {
+    FsPreview
+
+  },
+  props: {
+    value: {
+      type: String,
+      default: null
+    },
+    // name  ','分隔的名称 和serverPath
+    fileInfo: {
+      type: Object,
+      default: () => {
+        return {
+          name: null,
+          serverPath: null
+        }
+      }
+    },
+    fileSetObj: {
+      type: Object,
+      default: () => {
+        return { limitFileSize: 30, multiple: false, accept: null }
+      }
+    },
+    customViewUrl: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    uploadAble: {
+      type: Boolean,
+      default: true
+    },
+    deletaAble: {
+      type: Boolean,
+      default: true
+    },
+    // 文件详细消息
+    fileList: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    }
+
+  },
+  data() {
+    const headers = { Authorization: getToken() }
+    let defaultAction = Vue.prototype.baseURL + '/common/fs-upload'
+    if (isPlateSys(Vue.prototype.systemCode)) {
+      defaultAction = Vue.prototype.baseAPI + '/component/super-form/uploads'
+    }
+    return {
+      deleteUuids: [],
+      headers,
+      defaultAction,
+      annexUploadFlag: false,
+      showPreviewSingleImage: false,
+      showPreviewMulti: false,
+      lastFileName: null,
+      previewImageInfo: {},
+      showFileList: this.fileList
+    }
+  },
+  created() {
+
+  },
+  mounted() {
+    this.getFileList()
+  },
+  methods: {
+    openAnnexUpload() {
+      this.annexUploadFlag = true
+    },
+    handleBeforeUpload(file) {
+      let limitFileSize = this.fileSetObj.limitFileSize
+      if (limitFileSize === undefined) {
+        // 默认是30M
+        limitFileSize = 30
+      }
+      if (file.size > limitFileSize * 1024 * 1024) {
+        // 超过最大限制
+        this.$message({
+          type: 'warning',
+          message: this.$t('imatrixUIMessage.exceedFileSize', { fileSize: limitFileSize }),
+          showClose: true
+        })
+        // 返回false停止上传
+        return false
+      }
+    },
+    // 上传成功
+    uploadOnSuccess(response, file) {
+      if (response) {
+        this.$emit('upload-success', { showName: response.name, serverPath: response.serverPath })
+        if (this.fileSetObj.multiple) {
+          if (this.fileInfo.showName) {
+            const nameArr = this.fileInfo.showName.split(',')
+            const serverPathArr = this.fileInfo.serverPath.split(',')
+            nameArr.push(response.name)
+            serverPathArr.push(response.serverPath)
+            this.fileInfo.showName = nameArr.join(',')
+            this.fileInfo.serverPath = serverPathArr.join(',')
+          } else {
+            this.fileInfo.showName = response.name
+            this.fileInfo.serverPath = response.serverPath
+          }
+        } else {
+          this.fileInfo.showName = response.name
+          this.fileInfo.serverPath = response.serverPath
+        }
+      }
+      this.annexUploadFlag = false
+    },
+    preview() {
+      this.getFileList()
+      this.showPreviewMulti = true
+    },
+    previewSingle(file) {
+      if (isImage(file.showName)) {
+        this.previewImageInfo = file
+        this.showPreviewSingleImage = true
+      } else {
+        this.previewDoc(file)
+      }
+    },
+    getFileList() {
+      if (!this.customViewUrl) {
+        const nameArr = this.fileInfo.showName.split(',')
+        const serverPath = this.fileInfo.serverPath.split(',')
+        if (nameArr.length === 0 || serverPath.length === 0 || nameArr.length !== serverPath.length) {
+          return
+        }
+        const fileList = []
+        const url = Vue.prototype.baseURL + '/common/super-form/downloads?jwt=' + getToken()
+        for (let index = 0; index < nameArr.length; index++) {
+          const tempName = nameArr[index]
+          if (tempName && serverPath[index]) {
+            const standardFile = {
+              showName: tempName,
+              serverPath: serverPath[index],
+              src: url + '&showName=' + tempName + '&serverPath=' + serverPath[index]
+            }
+            if (isImage(tempName)) {
+              standardFile.isImg = true
+            } else {
+              standardFile.isImg = false
+            }
+            fileList.push(standardFile)
+          }
+        }
+        this.showFileList = fileList
+      } else {
+        this.showFileList = this.fileList
+      }
+    },
+    previewDoc(file) {
+      const token = getToken()
+      let previewUrl = Vue.prototype.baseURL + '/common/fs-upload/preview?jwt=' + token
+      if (isPlateSys(Vue.prototype.systemCode)) {
+        previewUrl = Vue.prototype.baseAPI + '/component/fs-upload/preview?jwt=' + token
+      }
+      if (Vue.prototype.customPreviewUrl) {
+        window.open(getSystemFrontendUrl(Vue.prototype.portalUrl) + '/#/file-service/preview?serverPath=' + file.serverPath +
+          '&showName=' + encodeURI(file.showName),
+        file.showName
+        )
+      } else {
+        window.open(previewUrl + '&showName=' + encodeURI(file.showName) + '&serverPath=' + file.serverPath)
+      }
+    },
+    deleteRow(index) {
+      const deleteFile = this.showFileList[index]
+      // this.fileList.splice(index, 1)
+      const nameArr = []
+      const pathArr = []
+      for (let i = 0; i < this.showFileList.length; i++) {
+        if (i !== index) {
+          nameArr.push(this.showFileList[i].showName)
+          pathArr.push(this.showFileList[i].serverPath)
+        }
+      }
+      this.fileInfo.showName = nameArr.join(',')
+      this.fileInfo.serverPath = pathArr.join(',')
+      this.getFileList()
+      this.$emit('delete-success', { deleteFile: deleteFile, all: this.showFileList })
+      this.$emit('delete', this.showFileList, index)
+    }
+  }
+}
+</script>
+
+<style scoped></style>

package/packages/multipart-upload/src/multipart-upload-list.vue

@@ -0,0 +1,378 @@
+<!-- 文件上传 -->
+<template>
+  <div>
+    <template v-if="!disabled">
+      <el-input
+        ref="item"
+        :readonly="true"
+        :disabled="disabled"
+        :value="value"
+        :placeholder="$t('imatrixUIMessage.fileUpload')"
+      >
+        <el-button v-if="!disabled" slot="append" size="mini" icon="el-icon-upload2" @click="openAnnexUpload" />
+      </el-input>
+
+      <el-dialog
+        :title="$t('imatrixUIMessage.tips')"
+        :visible.sync="annexUploadFlag"
+        :append-to-body="true"
+        :show-close="true"
+        width="40%"
+      >
+        <el-upload id="upload" :show-file-list="false" :auto-upload="false" :on-change="uploadFile" action>
+          <el-button size="small" type="primary">
+            选择文件
+          </el-button>
+          <span
+            slot="tip"
+            style="margin-left:12px"
+            class="el-upload__tip"
+          >
+            上传文件不能超过{{ fileSetObj.limitFileSize }}M
+            <span v-if="fileSetObj.accept">，并且只接受{{ fileSetObj.accept }}类型文件</span>
+          </span>
+        </el-upload>
+        <br>
+        <el-row v-for="(file, index) in uploadingFile" :key="index">
+          <el-tag
+            size="small form-list-file"
+          >
+            <span>
+              <i class="el-icon-paperclip" />
+              <span style="margin-left:6.5px">{{ file.name }}</span>
+            </span>
+
+            <el-tooltip content="取消上传" placement="right" effect="light">
+              <i
+                class="el-icon-close"
+                style="margin-left:8px"
+                @click="cancelUpload(file.serverName)"
+              />
+            </el-tooltip>
+          </el-tag>
+          <el-progress :percentage="file.uploadProgress" />
+        </el-row>
+        <div
+          style="line-height 30px;"
+        >
+          <el-row>
+            <el-col>
+              <el-tag
+                v-for="(file, index) in fileContent"
+                :key="index"
+                size="small form-list-file"
+              >
+                <span @click="preview(file.name, file.serverName)">
+                  <i class="el-icon-paperclip" />
+                  <span style="margin-left:6.5px">{{ file.name }}</span>
+                </span>
+                <el-tooltip content="移除已上传文件" placement="right" effect="light">
+                  <i
+                    class="el-icon-close"
+                    style="margin-left:8px"
+                    @click="handleOnRemove(index,file)"
+                  />
+                </el-tooltip>
+              </el-tag>
+            </el-col>
+          </el-row>
+        </div>
+      </el-dialog>
+      <el-dialog
+        :append-to-body="true"
+        :show-close="true"
+        :title="$t('imatrixUIPublicModel.previewImage')"
+        :visible.sync="showPreviewSingleImage"
+        @close="$emit('close')"
+      >
+        <span slot="title">{{ $t('imatrixUIPublicModel.previewImage') }}
+          <!-- <i v-if="downloadable" class="el-icon-download" style="padding-left:5px;cursor:pointer;color:#409EFF" @click="downloadFile()" /> -->
+          <!-- <i v-if="deleteable" class="el-icon-delete" style="padding-left:5px;cursor:pointer;color:#F56C6C" @click="deleteFile()" /> -->
+        </span>
+        <el-image :src="previewImageInfo.src" :preview-src-list="[previewImageInfo.src]" />
+      </el-dialog>
+      <el-dialog
+        :append-to-body="true"
+        :show-close="true"
+        :title="$t('imatrixUIPublicModel.preview')"
+        :visible.sync="showPreviewMulti"
+        width="30%"
+        @close="$emit('close')"
+      >
+        <span slot="title">{{ $t('imatrixUIPublicModel.preview') }}
+          <!-- <i v-if="downloadable" class="el-icon-download" style="padding-left:5px;cursor:pointer;color:#409EFF" @click="downloadFile()" /> -->
+          <!-- <i v-if="deleteable" class="el-icon-delete" style="padding-left:5px;cursor:pointer;color:#F56C6C" @click="deleteFile()" /> -->
+        </span>
+        <el-table
+          :show-header="false"
+          :data="showFileList"
+        >
+          <el-table-column
+            width="300"
+            prop="showName"
+          />
+          <el-table-column align="right">
+            <template slot-scope="scope">
+              <el-tooltip :content="$t('imatrixUIPublicModel.preview')" class="item" effect="dark" placement="top">
+                <i class="el-icon-view" style="cursor:pointer;" @click="previewSingle(scope.row)" />
+              </el-tooltip>
+            </template>
+          </el-table-column>
+          <el-table-column v-if="!disabled">
+            <template slot-scope="scope">
+              <el-tooltip :content="$t('imatrixUIPublicModel.delete')" class="item" effect="dark" placement="top">
+                <i class="el-icon-delete" style="cursor:pointer;" @click="deleteRow(scope.$index)" />
+              </el-tooltip>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-dialog>
+    </template>
+    <template v-else>
+      <fs-preview :label="value" :file-list="showFileList" />
+    </template>
+  </div>
+</template>
+
+<script>
+
+import { getToken } from '../../../src/utils/auth'
+import { isImage } from '../../../src/utils/util'
+import { isPlateSys, getSystemFrontendUrl } from '../../../src/utils/common-util'
+import Vue from 'vue'
+import FsPreview from '../../fs-preview/src/fs-preview.vue'
+export default {
+  name: 'MultipartUploadList',
+  components: {
+    FsPreview
+  },
+  props: {
+    value: {
+      type: String,
+      default: null
+    },
+    entity: {
+      type: Object,
+      default: null
+    },
+    fileSetObj: {
+      type: Object,
+      default: () => {
+        return { limitFileSize: 10, multiple: false, accept: null }
+      }
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    const headers = { Authorization: getToken() }
+    let defaultAction = Vue.prototype.baseURL + '/common/fs-upload'
+    if (isPlateSys(Vue.prototype.systemCode)) {
+      defaultAction = Vue.prototype.baseAPI + '/component/super-form/uploads'
+    }
+    return {
+      deleteUuids: [],
+      headers,
+      defaultAction,
+      annexUploadFlag: false,
+      showPreviewSingleImage: false,
+      showPreviewMulti: false,
+      lastFileName: null,
+      previewImageInfo: {},
+      showFileList: [],
+      // /
+      uploadingFile: [], // 正在上传的文件
+      cancelUploadFile: [],
+      fileContent: [],
+      chunkSize: 5 * 1024 * 1024// 定义5M为一片
+
+    }
+  },
+  created() {
+
+  },
+  mounted() {
+    if (!this.fileSetObj.limitFileSize) {
+      this.fileSetObj.limitFileSize = 10
+    }
+    const name = this.entity[this.fileSetObj.showNameData.dbName]
+    const serverName = this.entity[this.fileSetObj.serverNameData.dbName]
+    if (name && serverName) {
+      const nameArr = name.split(',')
+      const serverNameArr = serverName.split(',')
+      nameArr.forEach((element, index) => {
+        this.fileContent.push({ name: element, serverName: serverNameArr[index] })
+        const token = getToken()
+        let url = Vue.prototype.baseURL + '/common/super-form/downloads?jwt=' + token
+        if (isPlateSys(Vue.prototype.systemCode)) {
+          url = Vue.prototype.baseAPI + '/component/super-form/downloads?jwt=' + token
+        }
+        const src = url + '&showName=' + encodeURI(element) + '&serverPath=' + serverNameArr[index]
+        this.showFileList.push({ showName: element, serverPath: serverNameArr[index], src: src })
+      })
+    }
+  },
+  methods: {
+    openAnnexUpload() {
+      this.annexUploadFlag = true
+    },
+    // //////
+    async uploadFile(res) {
+      if (this.uploadingFile.length > 0 && !this.fileSetObj.multiple) {
+        this.$message({
+          showClose: true,
+          message: '文件单选，请勿同时上传多份文件!',
+          type: 'warning'
+        })
+        return
+      }
+      // 占位 ,防止分片初始化未完成又选择文件上传
+      const uploadTimestamp = Date.now()
+      this.uploadingFile.push({ name: res.raw.name, uploadProgress: 0, serverName: uploadTimestamp })
+      // 获取用户选择的文件
+      const file = res.raw
+      const fileSize = file.size
+      // 计算当前选择文件需要的分片数量
+      const chunkCount = Math.ceil(fileSize / this.chunkSize)
+      console.log('文件大小：', (file.size / 1024 / 1024) + 'Mb', '分片数：', chunkCount)
+      console.log('向后端请求本次分片上传初始化')
+      const requestData = { fileName: file.name, chunkCount: chunkCount }
+      // 向后端请求本次分片上传初始化
+
+      this.$http.post(Vue.prototype.baseURL + '/common/mutipart-upload/create', requestData).then(
+        async res => {
+          console.log(this.cancelUploadFile, 'sssssssssssss')
+          if (this.cancelUploadFile.indexOf(requestData.serverName) > 0) {
+            return
+          }
+          const currentUploadInex = this.uploadingFile.findIndex(item => item.serverName === uploadTimestamp)
+          const serverName = res.serverName
+          this.uploadingFile[currentUploadInex] = { uploadProgress: 0, name: file.name, serverName: serverName, folder: res.folder }
+          console.log(this.uploadingFile, 'uploadingFile')
+          const chunkNames = []
+          for (let i = 0; i < chunkCount; i++) {
+            // 分片开始位置
+            const start = i * this.chunkSize
+            // 分片结束位置
+            const end = Math.min(fileSize, start + this.chunkSize)
+            // 取文件指定范围内的byte，从而得到分片数据
+            const _chunkFile = file.slice(start, end)
+            console.log('开始上传第' + (i + 1) + '个分片' + ',共' + chunkCount + '个')
+            const formData = new FormData()
+            formData.append('folder', res.folder)
+            formData.append('serverName', serverName)
+            formData.append('file', _chunkFile)
+            if (this.cancelUploadFile.indexOf(serverName) > 0) {
+              break
+            } else {
+              await this.$http.post(Vue.prototype.baseURL + '/common/mutipart-upload/upload', formData).then(uploadPieceRes => {
+                chunkNames.push(uploadPieceRes.uploadName)
+                const uploadProgress = parseInt(((i + 1) / chunkCount) * 100)
+                this.uploadingFile[currentUploadInex].uploadProgress = (uploadProgress > 100 ? 100 : uploadProgress)
+                this.$set(this.uploadingFile, currentUploadInex, this.uploadingFile[currentUploadInex])
+                console.log('第' + (i + 1) + '个分片上传完成', this.uploadingFile)
+              })
+            }
+          }
+          if (this.cancelUploadFile.indexOf(serverName) < 0) {
+            // 请求后端合并文件
+            this.composeFile(file.name, chunkCount, fileSize, serverName, chunkNames, res.folder)
+          } else {
+            await this.$http.post(Vue.prototype.baseURL + '/common/mutipart-upload/remove-chunks', { serverName: serverName, folder: res.folder }).then(uploadPieceRes => {
+              console.log('取消上传，并移除已上传的文件碎片')
+            })
+          }
+        })
+    },
+    /**
+     * 请求后端合并文件
+     * @param serverName
+     * @param fileName
+    */
+    composeFile(fileName, chunkSize, fileSize, serverName, chunkNames, folder) {
+      const data = {
+        fileName: fileName, // 文件名称
+        chunkSize: chunkSize, // 分片数量
+        fileSize: fileSize, // 文件大小byte
+        serverName: serverName, // serverName
+        chunkNames: chunkNames, // 上传分片的编号
+        folder: folder
+      }
+      console.log(data, '开始请求后端合并文件')
+      this.$http.post(Vue.prototype.baseURL + '/common/mutipart-upload/merge', data).then(res => {
+        this.uploadingFile.splice(this.uploadingFile.findIndex(item => item.serverName === serverName), 1)
+        if (this.fileSetObj.multiple) {
+          this.fileContent.push({ name: fileName, serverName: serverName })
+          const currentShowName = this.entity[this.fileSetObj.showNameData.dbName]
+          if (currentShowName && currentShowName.length > 0) {
+            this.setEntityValue(currentShowName + ',' + fileName,
+              this.entity[this.fileSetObj.serverNameData.dbName] + ',' + serverName)
+          } else {
+            this.setEntityValue(fileName, serverName)
+          }
+        } else {
+          this.fileContent = [{ name: fileName, serverName: serverName }]
+          this.setEntityValue(fileName, serverName)
+        }
+        // this.$emit('sendFileObjToParent', res.data)// 传递给父组件请求结果
+        console.log('合并文件完成', res, this.entity)
+      })
+    },
+    setEntityValue(fileName, serverName) {
+      this.$set(this.entity, this.fileSetObj.showNameData.dbName, fileName)
+      this.$set(this.entity, this.fileSetObj.serverNameData.dbName, serverName)
+    },
+    cancelUpload(serverName) {
+      this.$set(this.entity, 'DOC_NAME', null)
+      this.$set(this.entity, 'DOC_PATH', null)
+      this.cancelUploadFile.push(serverName)
+      this.uploadingFile.splice(this.uploadingFile.findIndex(item => item.serverName === serverName), 1)
+    },
+    preview(name, serverName) {
+      if (isImage(name)) {
+        this.previewImageInfo = {
+          src: Vue.prototype.baseURL + '/common/super-form/downloads?jwt=' + getToken() + '&showName=' + name + '&serverPath=' + serverName
+        }
+        this.showPreviewSingleImage = true
+      } else {
+        this.previewDoc(name, serverName)
+      }
+    },
+    previewDoc(name, serverName) {
+      const token = getToken()
+      let previewUrl = Vue.prototype.baseURL + '/common/fs-upload/preview?jwt=' + token
+      if (isPlateSys(Vue.prototype.systemCode)) {
+        previewUrl = Vue.prototype.baseAPI + '/component/fs-upload/preview?jwt=' + token
+      }
+      if (Vue.prototype.customPreviewUrl) {
+        window.open(getSystemFrontendUrl(Vue.prototype.portalUrl) + '/#/file-service/preview?serverPath=' + serverName +
+          '&showName=' + encodeURI(name),
+        name
+        )
+      } else {
+        window.open(previewUrl + '&showName=' + encodeURI(name) + '&serverPath=' + serverName)
+      }
+    },
+    handleOnRemove(index) {
+      this.fileContent.splice(index, 1)
+      if (this.fileSetObj.multiple) {
+        const nameArr = []
+        const serverNameArr = []
+        this.fileContent.forEach(element => {
+          if (element.name && element.serverName) {
+            nameArr.push(element.name)
+            serverNameArr.push(element.serverName)
+          }
+        })
+        this.setEntityValue(nameArr.join(','), serverNameArr.join(','))
+      } else {
+        this.setEntityValue(null, null)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped></style>

package/packages/organization-input/index.js

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