doway-coms 2.11.95 → 2.11.97

package/packages/BaseFileGroup/src/index.vue

@@ -1,778 +1,778 @@
-<template>
-  <div style="height:300px">
-    <splitpanes class="default-theme">
-      <pane>
-        <vxe-table :size="'mini'" :height="'100%'" show-overflow highlight-current-row highlight-hover-row
-          ref="eisTreeView" row-id="id" row-key @current-change="eisCurrentChange" border="inner" :show-header="false"
-          :data="fileGroupData" :tree-config="{
-            transform: true,
-            line: true,
-            rowField: 'id',
-            parentField: 'parentId',
-            expandRowKeys: ['sys_top_folder']
-          }">
-          <vxe-column title="菜单权限" tree-node>
-            <template #default="{ row }">
-              <div class="folder-header">
-                <div class="folder-content">
-                  <a-icon type="folder-open" v-if="$refs.eisTreeView.isTreeExpandByRow(row)" />
-                  <a-icon v-else type="folder" />
-                  <span class="folder-name">{{ row.name }}</span>
-                </div>
-                <div class="folder-actions" v-if="edit === true">
-                  <a-button size="small" type="primary" @click="handleAddSubFolder(row)">添加</a-button>
-                  <a-button size="small" type="default" @click="handleEditSubFolder(row)"
-                    v-if="row.id !== 'sys_top_folder'">编辑</a-button>
-                </div>
-              </div>
-            </template>
-          </vxe-column>
-        </vxe-table>
-        <!-- <a-tree :tree-data="fileGroupData" :selectedKeys="currentSelectKey" :replaceFields="{title:'name',key:'id'}" show-icon default-expand-all @select="handleFileGroupSelect">
-          <a-icon slot="fileGroup" type="folder" />
-          <template #title="{ name,id }">
-              <div>
-                  <span>{{ name }}</span>
-                  <span @click="handleAddSubFolder(id)" v-if="edit===true">添加</span>
-                  <span @click="handleEditSubFolder(id,name)"  v-if="edit===true && id!=='sys_top_folder'">编辑</span>
-              </div>
-          </template>
-        </a-tree> -->
-      </pane>
-      <pane>
-        <div class="card-view-items">
-          <div class="card-view-item" :style="{ width: itemWidth + 'px' }" v-for="loopFileData in currentFolderData"
-            @dblclick="panelFolderDblClick(loopFileData)" :key="loopFileData.id">
-            <div class="card-content">
-              <div class="card-name">{{ loopFileData.name }}</div>
-              <div class="card-actions">
-                <a-button class="download-btn" size="small" type="primary" @click="downloadAttach(loopFileData)"
-                  v-if="loopFileData.attachType === 'file' && allowDownload === true">下载</a-button>
-                <a-button class="delete-btn" size="small" type="danger" @click="removeAttach(loopFileData)"
-                  v-if="edit === true">删除</a-button>
-              </div>
-            </div>
-          </div>
-
-          <div class="card-view-item" :style="{ width: itemWidth + 'px' }"
-            v-if="edit === true && currentSelectKey.length > 0">
-            <a-upload class="avatar-uploader" :headers="uploadHeaders" :action="uploadData.picAction" :multiple="true"
-              :data="uploadData" @change="handleAvatarSuccess" :showUploadList="false"
-              :before-upload="beforeAvatarUpload">
-              <div style="border: 1px solid #d9d9d9; border-radius: 6px"
-                :style="{ width: width, height: height, lineHeight: height }">
-                <a-icon type="plus" class="avatar-uploader-icon" style="text-align: center"
-                  :style="{ width: width, height: height, lineHeight: height }" />
-              </div>
-            </a-upload>
-          </div>
-          <div class="card-view-item card-view-item-ghost" :style="{ width: itemWidth + 'px' }"></div>
-          <div class="card-view-item card-view-item-ghost" :style="{ width: itemWidth + 'px' }"></div>
-          <div class="card-view-item card-view-item-ghost" :style="{ width: itemWidth + 'px' }"></div>
-          <div class="card-view-item card-view-item-ghost" :style="{ width: itemWidth + 'px' }"></div>
-          <div class="card-view-item card-view-item-ghost" :style="{ width: itemWidth + 'px' }"></div>
-          <div class="card-view-item card-view-item-ghost" :style="{ width: itemWidth + 'px' }"></div>
-        </div>
-      </pane>
-    </splitpanes>
-    <VxeModal v-model="showEditFolder" transfer :height="200" :width="400" destroy-on-close :z-index="999" show-footer>
-      <template #title>
-        <span>文件夹修改</span>
-      </template>
-      <template #default>
-        <a-input v-model="currentEditFolderValue"></a-input>
-      </template>
-      <template #footer>
-        <vxe-button @click="showEditFolder = false">取消</vxe-button>
-        <vxe-button status="primary" @click="confirmEditFolder">确定</vxe-button>
-      </template>
-    </VxeModal>
-  </div>
-</template>
-
-<script>
-import { notification, Upload, Tree, Icon, Popconfirm, Input, Button } from "ant-design-vue";
-import { Checkbox, Modal } from "vxe-table";
-import { attachGetAttachUrlApi, attachSearchApi } from "../../utils/api";
-import XEUtils from 'xe-utils'
-import { Splitpanes, Pane } from 'splitpanes'
-import 'splitpanes/dist/splitpanes.css'
-
-export default {
-  name: "BaseFileGroup",
-  components: {
-    VxeCheckbox: Checkbox,
-    "a-upload": Upload,
-    VxeModal: Modal,
-    Splitpanes, Pane,
-    'a-tree': Tree,
-    'a-icon': Icon,
-    'a-popconfirm': Popconfirm,
-    'a-input': Input,
-    'a-button': Button
-  },
-  data() {
-    return {
-      showEditFolder: false,
-      currentEditInfo: {},
-      currentEditFolderValue: '',
-      currentSelectKey: [],
-      fileGroupData: [],
-      internalRows: [],
-      itemWidth: 200,
-      uploadData: {
-        picType: "",
-        picAction: "",
-        resId: "",
-      },
-      uploadHeaders: {
-        Authorization: null,
-      },
-    };
-  },
-  computed: {
-    currentFolderData() {
-      if (this.currentSelectKey.length === 0) {
-        return []
-      }
-      return this.internalRows.filter(p => p.parentId == this.currentSelectKey[0] && p.sysRowState !== 'delete')
-    }
-  },
-  props: {
-    isStyle: {
-      type: Boolean,
-      default: false,
-    },
-    showEmptyText: {
-      type: Boolean,
-      default: true,
-    },
-    picType: {
-      type: String,
-      default: "cust",
-    },
-    value: {
-      type: String,
-    },
-    resId: {
-      type: String,
-    },
-    dataName: {
-      type: String,
-    },
-    edit: {
-      // 列信息
-      type: Boolean,
-    },
-    allowDownload: {
-      // 列信息
-      type: Boolean,
-    },
-    limitSize: {
-      // 限制上传大小
-      type: Number,
-      default: 5,
-    },
-    limitType: {
-      // 限制上传类型
-      type: Array,
-      default: () => {
-        return [];
-      },
-    },
-    formRow: {
-      type: Object,
-      default: () => {
-        return {};
-      },
-    },
-    width: {
-      type: String,
-      default: "100px",
-    },
-    height: {
-      type: String,
-      default: "100px",
-    },
-    rows: {
-      // 表格数据
-      type: Array,
-      default: function () {
-        return [];
-      },
-    },
-    cols: {
-      // 表格列信息
-      type: Array,
-      default: function () {
-        return [];
-      },
-    },
-    formState: {
-      // 表格列信息
-      type: String,
-      default: "",
-    },
-  },
-  watch: {
-    rows: {
-      handler: function (newVal) {
-        //构造树型结构
-        this.buildTreeData(newVal)
-      },
-      deep: true,
-    },
-    resId: {
-      handler: function (newVal) {
-        this.uploadData.resId = newVal;
-      },
-    },
-  },
-  created() {
-  },
-  mounted() {
-    // 请求头加入token
-    this.uploadHeaders.Authorization = `Bearer ${this.$store.getters.token}`;
-
-    this.internalServiceUrl = attachGetAttachUrlApi();
-    this.uploadData.picType = this.picType;
-    this.uploadData.resId = this.resId;
-    this.uploadData.picAction = this.internalServiceUrl + "/UploadAttach";
-
-    this.buildTreeData(this.rows);
-  },
-  methods: {
-    buildTreeData(tempRows) {
-      this.internalRows = JSON.parse(JSON.stringify(tempRows))
-      let tempTopFolder = {
-        sysRowState: 'view',
-        parentId: null,
-        sort: 0,
-        attachType: 'folder',
-        name: '文件',
-        id: 'sys_top_folder',
-      }
-      this.internalRows.push(tempTopFolder)
-      XEUtils.arrayEach(this.internalRows, p => {
-        if (p.parentId || p.id === 'sys_top_folder') {
-          return
-        }
-        p.parentId = 'sys_top_folder'
-      })
-
-      //
-      this.fileGroupData = XEUtils.orderBy(XEUtils.filter(this.internalRows, p => p.attachType === 'folder'), p => p.sort)
-      console.debug('davistest', this.fileGroupData)
-      if (this.currentSelectKey.length === 0) {
-        this.$refs.eisTreeView.setCurrentRow(tempTopFolder)
-        this.currentSelectKey = [tempTopFolder.id]
-      }
-      // this.fileGroupData = XEUtils.toArrayTree(tempFoldRows,{strict:true,sortKey:'sort'})
-
-      // // this.internalRows.push(tempTopFolder)
-      // this.fileGroupData = [tempTopFolder]
-      // this.fileGroupData[0].children = XEUtils.toArrayTree(tempFoldRows,{strict:true,sortKey:'sort'})
-      //构造顶级虚拟父节点
-
-      // this.fileData = XEUtils.filter(tempRows,p=>p.attachType==='file')
-    },
-    handleAddSubFolder(rowInfo) {
-      //添加子项文件夹
-      this.currentEditInfo = XEUtils.find(this.internalRows, p => p.id === rowInfo.id)
-      this.currentEditInfo['operation'] = 'add'
-      this.showEditFolder = true
-    },
-    handleEditSubFolder(rowInfo) {
-      this.currentEditFolderValue = rowInfo.name
-      //添加子项文件夹
-      this.currentEditInfo = XEUtils.find(this.internalRows, p => p.id === rowInfo.id)
-      this.currentEditInfo['operation'] = 'edit'
-      this.showEditFolder = true
-    },
-    eisCurrentChange(scope) {
-      this.currentSelectKey = [scope.row.id]
-
-    },
-    confirmEditFolder() {
-
-      let tempRowInfo = this.$refs.eisTreeView.getRowById(this.currentEditInfo.id)
-      if (this.currentEditInfo.operation === 'add') {
-        //新增文件夹
-        let tempAddRowInfo = {
-          sysRowState: 'add',
-          parentId: this.currentEditInfo.id,
-          sort: tempRowInfo.children.length + 1,
-          attachType: 'folder',
-          children: [],
-          name: this.currentEditFolderValue,
-          id: this.$store.getters.newId() + "",
-        }
-        this.internalRows.push(tempAddRowInfo)
-        this.$refs.eisTreeView.insertAt(tempAddRowInfo, -1)
-      } else {
-        let tempInternalRowInfo = XEUtils.find(this.internalRows, p => p.id === this.currentEditInfo.id)
-        if (tempInternalRowInfo.sysRowState !== 'add') {
-          tempInternalRowInfo.sysRowState = 'update'
-        }
-        tempInternalRowInfo.name = this.currentEditFolderValue
-        //修改树节点名称
-        tempRowInfo.name = tempInternalRowInfo.name
-      }
-      this.showEditFolder = false
-      this.currentEditFolderValue = null
-    },
-    panelFolderDblClick(loopFileData) {
-      if (loopFileData.attachType === 'file') {
-        return
-      }
-
-      let tempParentRowInfo = this.$refs.eisTreeView.getRowById(loopFileData.parentId)
-      let tempExpandRows = []
-      if (tempParentRowInfo) {
-        tempExpandRows.push(tempParentRowInfo)
-      }
-      let tempRowInfo = this.$refs.eisTreeView.getRowById(loopFileData.id)
-      this.$refs.eisTreeView.setCurrentRow(tempRowInfo)
-
-      tempExpandRows.push(tempRowInfo)
-      this.$refs.eisTreeView.setTreeExpand(tempExpandRows, true)
-      this.currentSelectKey = [loopFileData.id]
-    },
-    handleFileGroupSelect(selectedKeys) {
-      if (selectedKeys.length === 0) {
-        return
-      }
-      this.currentSelectKey = selectedKeys
-    },
-    getCurrentToken() {
-      return this.$store.getters.token;
-    },
-    /**
-     * 获取附件信息
-     */
-    getAttachInfo(newRows) {
-      let attachIds = [];
-      for (let i = 0; i < newRows.length; i++) {
-        if (newRows[i].attach) {
-          continue;
-        }
-        attachIds.push(newRows[i].attachId);
-        newRows[i].attach = {
-          fileName: "",
-          contentType: "",
-          content: "",
-          name: "",
-          id: newRows[i].attachId,
-        };
-      }
-      if (attachIds.length == 0) {
-        this.internalRows = newRows;
-        return;
-      }
-      let postData = {
-        fields: "id,fileName,contentType,name,content,isDefault",
-        begin: 1,
-        size: 0,
-        exp: "id in (",
-      };
-      for (let i = 0; i < attachIds.length; i++) {
-        postData.exp = postData.exp + attachIds[i] + ",";
-      }
-      let vm = this;
-      postData.exp = postData.exp.substr(0, postData.exp.length - 1) + ")";
-      attachSearchApi(postData)
-        .then((responseData) => {
-          for (let i = 0; i < responseData.content.length; i++) {
-            for (let x = 0; x < newRows.length; x++) {
-              if (responseData.content[i].id === newRows[x].attachId) {
-                newRows[x].attach.fileName = responseData.content[i].fileName;
-                newRows[x].attach.name = responseData.content[i].name;
-                newRows[x].attach.content = responseData.content[i].content;
-                newRows[x].attach.contentType =
-                  responseData.content[i].contentType;
-                // newRows[x].attach.isDefault = false
-                break;
-              }
-            }
-          }
-          vm.internalRows = newRows;
-        })
-        .catch(() => { });
-    },
-    attachFileClick(attachFile) { },
-    handleAvatarSuccess(info) {
-      if (info.file.status == "done") {
-        if (info.file.response.code !== 200) {
-          alert(info.file.response.msg)
-          return
-        }
-        //添加文件数据
-        let addRow = {
-          attachId: info.file.response.content.id,
-          sysRowState: 'add',
-          parentId: this.currentSelectKey[0],
-          fileType: info.file.response.content.fileType,
-          sort: this.internalRows.length + 1,
-          attachType: 'file',
-          name: info.file.response.content.name,
-          id: this.$store.getters.newId() + "",
-        }
-        this.internalRows.push(addRow);
-        let tempField;
-        for (let i = 0; i < this.cols.length; i++) {
-          // 赋值关联字段数据
-          let tempValue = addRow;
-          tempField = this.cols[i].field;
-          if (this.cols[i].isAuto) {
-            tempValue[tempField] = this.$store.getters.newId() + "";
-            continue;
-          }
-          if (
-            this.cols[i].controlType === "text" &&
-            this.cols[i].linkValueField !== null &&
-            this.cols[i].linkValueField !== "" &&
-            this.cols[i].linkValueField !== undefined
-          ) {
-            tempValue[tempField] = this.formRow[this.cols[i].linkValueField];
-          }
-        }
-        //通知父组件
-        this.$emit(
-          "add",
-          this.dataName,
-          info.file.response.content
-        );
-        console.debug(this.internalRows)
-      }
-    },
-    beforeAvatarUpload(file) {
-      // const isPic = file.type === 'image/jpeg' || file.type === 'image/png'
-      if (file.size / 1024 / 1024 > this.limitSize) {
-        notification.error({
-          message: "错误",
-          description: "上传图片大小不能超过 " + this.limitSize + "MB!",
-        });
-      }
-      if (this.limitType.length > 0 && !this.limitType[file.type]) {
-        notification.error({
-          message: "错误",
-          description: "上传附件格式错误!",
-        });
-      }
-      return true;
-    },
-    handleRemove(file, fileList) {
-      // this.dialogVisible =  !this.dialogVisible
-      // alert(this.dialogVisible)
-      this.internalUrls = fileList;
-      this.$emit("remove", this.dataName, file.response.data);
-      // this.$emit('remove', this.dataName, file.response.data)
-    },
-    circleAttach(attachFile, internalRow) {
-      let vm = this;
-      //  if(internalRow.isDefault == true){
-      this.internalRows.forEach((element) => {
-        if (element.id !== internalRow.id) {
-          element.isDefault = false;
-        }
-      });
-      //  }
-    },
-    removeAttach(attachFile) {
-      //检查是否存在子项文件夹或者文件需要删除
-      let tempChild = XEUtils.find(this.internalRows, p => p.parentId == attachFile.id && p.sysRowState !== 'delete')
-      if (tempChild) {
-        notification.error({
-          message: "错误",
-          description: "存在子项文件夹或者文件，请先删除子项文件夹或者文件!",
-        });
-        return
-      }
-      // console.debug(attachFile)
-      for (let i = 0; i < this.internalRows.length; i++) {
-        if (this.internalRows[i].id === attachFile.id) {
-          if (this.internalRows[i].sysRowState === 'add') {
-            this.internalRows.splice(i, 1);
-          } else {
-            this.$set(this.internalRows[i], "sysRowState", 'delete');
-          }
-          break;
-        }
-      }
-      this.$emit("remove", attachFile.id);
-    },
-    downloadAttach(attachFile) {
-      window.open(
-        this.internalServiceUrl +
-        "/DownAttachFile/" +
-        attachFile.attachId +
-        `?accessToken=${this.$store.getters.token}`
-      );
-    },
-    getUpdateRows() {
-      //先获取删除数据，因为前台删除一个明细后又添加相同的明细后台会
-      //报唯一索引错误，因为后台也是先添加然后再是删除的会照成问题
-      //所有就要把删除的放在数组的第一个传递过去，这样后台就先删除然后再新增了
-      let tempRemoveRows = XEUtils.filter(this.internalRows, p => p.sysRowState === 'delete' && p.id !== 'sys_top_folder')
-      let tempAddRows = XEUtils.filter(this.internalRows, p => p.sysRowState === 'add' && p.id !== 'sys_top_folder')
-      let tempUpdateRows = XEUtils.filter(this.internalRows, p => p.sysRowState === 'update' && p.id !== 'sys_top_folder')
-      let tempRows = XEUtils.clone(XEUtils.union(tempRemoveRows, tempAddRows, tempUpdateRows), true)
-      XEUtils.arrayEach(tempRows, p => {
-        if (p.parentId === 'sys_top_folder') {
-          p.parentId = null
-        }
-      })
-      return tempRows
-    },
-    /**
-     * 查看附件
-     */
-    viewAttach(attachFile) {
-      if (attachFile.contentType === "application/pdf") {
-        this.dialogImageUrl = `${this.internalServiceUrl}/GetAttachFile/${attachFile.id}?accessToken=${this.$store.getters.token}`;
-        this.dialogViewType = attachFile.contentType;
-        this.dialogVisible = true;
-      } else if (attachFile.content === "image") {
-        this.dialogImageUrl = `${this.internalServiceUrl}/GetAttachFile/${attachFile.id}?accessToken=${this.$store.getters.token}`;
-        this.dialogViewType = attachFile.contentType;
-        this.dialogVisible = true;
-      }
-      this.currentFileTitle = attachFile.name
-    },
-    closePdf() {
-      this.isShowPdf = false;
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.file-card {
-  display: flex;
-  flex-flow: row wrap;
-  margin: 0 0 5px 5px;
-
-  .attach-wrapper {
-    .attach {
-      position: relative;
-      margin-right: 5px;
-
-      .attach-delete {
-        position: absolute;
-        top: -2px;
-        right: -4px;
-        opacity: 0;
-        font-size: 20px;
-        background-color: red;
-      }
-
-      .attach-delete:hover {
-        cursor: pointer;
-      }
-
-      .attach-download {
-        position: absolute;
-        bottom: 10px;
-        left: 4px;
-        opacity: 0;
-        font-size: 18px;
-        font-weight: bolder;
-        border: 1px solid #ccc;
-        border-radius: 50%;
-        border-color: transparent;
-        //background-color: rgb(255, 1, 1);
-        color: #000;
-      }
-
-      .attach-download:hover {
-        cursor: pointer;
-        color: rgb(189, 8, 8);
-      }
-
-      .attach-view {
-        position: absolute;
-        bottom: 10px;
-        right: 4px;
-        opacity: 0;
-        font-size: 18px;
-        font-weight: bolder;
-        border: 1px solid #ccc;
-        border-radius: 50%;
-        border-color: transparent;
-        //background-color: #666;
-        color: #000;
-      }
-
-      .attach-circle {
-        position: absolute;
-        // bottom: 10px;
-        top: 2px;
-        left: 4px;
-        opacity: 0;
-      }
-
-      .attach-view:hover {
-        cursor: pointer;
-        color: rgb(189, 8, 8);
-      }
-    }
-
-    .attach:hover>.attach-delete {
-      opacity: 0.8;
-    }
-
-    .attach:hover>.attach-download {
-      opacity: 0.7;
-    }
-
-    .attach:hover>.attach-view {
-      opacity: 0.7;
-    }
-
-    .attach:hover>.attach-circle {
-      opacity: 0.9;
-    }
-  }
-}
-
-.tree-node-icon {
-  width: 16px;
-  text-align: center;
-}
-
-.avatar-uploader .el-upload {
-  border: 1px solid #d9d9d9;
-
-  border-radius: 6px;
-  cursor: pointer;
-  position: relative;
-  overflow: hidden;
-}
-
-.avatar-uploader .el-upload:hover {
-  border-color: #409eff;
-}
-
-.avatar-uploader-icon {
-  font-size: 28px;
-  color: #8c939d;
-  // width: 178px;
-  // height: 178px;
-  line-height: 178px;
-  text-align: center;
-}
-
-.avatar {
-  // width: 178px;
-  // height: 178px;
-  display: block;
-}
-
-.el-upload-list__item is-success {
-  float: left;
-}
-
-.currentHeight {
-  display: flex;
-  align-items: center;
-}
-
-.folder-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  width: 100%;
-
-  .folder-content {
-    display: flex;
-    align-items: center;
-    gap: 4px;
-
-    .folder-name {
-      margin-left: 4px;
-    }
-  }
-
-  .folder-actions {
-    display: flex;
-    gap: 6px;
-  }
-}
-
-.card-view-items {
-  // margin-top: 100px;
-  // margin-left: 100px;
-  // margin-right: 100px;
-  display: flex;
-  flex-flow: row wrap;
-  justify-content: flex-start;
-  padding: 8px 8px 8px 8px;
-  overflow-y: auto;
-
-  .card-view-item-ghost {
-    visibility: hidden;
-    height: 0px !important;
-    min-height: 0px !important;
-    margin-top: 0px;
-    margin-bottom: 0px;
-    padding: 0px 0px 0px 0px;
-  }
-
-  .card-view-item {
-    cursor: pointer;
-    position: relative;
-    flex-grow: 1;
-    flex-shrink: 1;
-    flex-basis: auto;
-    border: 1px solid #9ad4dc;
-    margin-top: 4px;
-    margin-right: 8px;
-    margin-bottom: 4px;
-    margin-left: 8px;
-    padding: 8px 8px 8px 8px;
-    min-width: 150px;
-    min-height: 80px;
-    border-radius: 6px;
-
-    .card-content {
-      position: relative;
-      height: 100%;
-      display: flex;
-      flex-direction: column;
-
-      .card-name {
-        flex: 1;
-        word-wrap: break-word;
-        margin-bottom: 8px;
-      }
-
-      .card-actions {
-        position: absolute;
-        bottom: 4px;
-        left: 4px;
-        right: 4px;
-        display: flex;
-        justify-content: space-between;
-
-        .download-btn {
-          // 固定在左下角
-        }
-
-        .delete-btn {
-          // 固定在右下角
-        }
-      }
-    }
-
-    .card-view-icon {
-      float: left;
-      width: 64px;
-      height: 64px;
-    }
-  }
-
-  .card-view-item:hover {
-    border: 1px solid #1269db;
-  }
-}
-</style>
+<template>
+  <div style="height:300px">
+    <splitpanes class="default-theme">
+      <pane>
+        <vxe-table :size="'mini'" :height="'100%'" show-overflow highlight-current-row highlight-hover-row
+          ref="eisTreeView" row-id="id" row-key @current-change="eisCurrentChange" border="inner" :show-header="false"
+          :data="fileGroupData" :tree-config="{
+            transform: true,
+            line: true,
+            rowField: 'id',
+            parentField: 'parentId',
+            expandRowKeys: ['sys_top_folder']
+          }">
+          <vxe-column title="菜单权限" tree-node>
+            <template #default="{ row }">
+              <div class="folder-header">
+                <div class="folder-content">
+                  <a-icon type="folder-open" v-if="$refs.eisTreeView.isTreeExpandByRow(row)" />
+                  <a-icon v-else type="folder" />
+                  <span class="folder-name">{{ row.name }}</span>
+                </div>
+                <div class="folder-actions" v-if="edit === true">
+                  <a-button size="small" type="primary" @click="handleAddSubFolder(row)">添加</a-button>
+                  <a-button size="small" type="default" @click="handleEditSubFolder(row)"
+                    v-if="row.id !== 'sys_top_folder'">编辑</a-button>
+                </div>
+              </div>
+            </template>
+          </vxe-column>
+        </vxe-table>
+        <!-- <a-tree :tree-data="fileGroupData" :selectedKeys="currentSelectKey" :replaceFields="{title:'name',key:'id'}" show-icon default-expand-all @select="handleFileGroupSelect">
+          <a-icon slot="fileGroup" type="folder" />
+          <template #title="{ name,id }">
+              <div>
+                  <span>{{ name }}</span>
+                  <span @click="handleAddSubFolder(id)" v-if="edit===true">添加</span>
+                  <span @click="handleEditSubFolder(id,name)"  v-if="edit===true && id!=='sys_top_folder'">编辑</span>
+              </div>
+          </template>
+        </a-tree> -->
+      </pane>
+      <pane>
+        <div class="card-view-items">
+          <div class="card-view-item" :style="{ width: itemWidth + 'px' }" v-for="loopFileData in currentFolderData"
+            @dblclick="panelFolderDblClick(loopFileData)" :key="loopFileData.id">
+            <div class="card-content">
+              <div class="card-name">{{ loopFileData.name }}</div>
+              <div class="card-actions">
+                <a-button class="download-btn" size="small" type="primary" @click="downloadAttach(loopFileData)"
+                  v-if="loopFileData.attachType === 'file' && allowDownload === true">下载</a-button>
+                <a-button class="delete-btn" size="small" type="danger" @click="removeAttach(loopFileData)"
+                  v-if="edit === true">删除</a-button>
+              </div>
+            </div>
+          </div>
+
+          <div class="card-view-item" :style="{ width: itemWidth + 'px' }"
+            v-if="edit === true && currentSelectKey.length > 0">
+            <a-upload class="avatar-uploader" :headers="uploadHeaders" :action="uploadData.picAction" :multiple="true"
+              :data="uploadData" @change="handleAvatarSuccess" :showUploadList="false"
+              :before-upload="beforeAvatarUpload">
+              <div style="border: 1px solid #d9d9d9; border-radius: 6px"
+                :style="{ width: width, height: height, lineHeight: height }">
+                <a-icon type="plus" class="avatar-uploader-icon" style="text-align: center"
+                  :style="{ width: width, height: height, lineHeight: height }" />
+              </div>
+            </a-upload>
+          </div>
+          <div class="card-view-item card-view-item-ghost" :style="{ width: itemWidth + 'px' }"></div>
+          <div class="card-view-item card-view-item-ghost" :style="{ width: itemWidth + 'px' }"></div>
+          <div class="card-view-item card-view-item-ghost" :style="{ width: itemWidth + 'px' }"></div>
+          <div class="card-view-item card-view-item-ghost" :style="{ width: itemWidth + 'px' }"></div>
+          <div class="card-view-item card-view-item-ghost" :style="{ width: itemWidth + 'px' }"></div>
+          <div class="card-view-item card-view-item-ghost" :style="{ width: itemWidth + 'px' }"></div>
+        </div>
+      </pane>
+    </splitpanes>
+    <VxeModal v-model="showEditFolder" transfer :height="200" :width="400" destroy-on-close :z-index="999" show-footer>
+      <template #title>
+        <span>文件夹修改</span>
+      </template>
+      <template #default>
+        <a-input v-model="currentEditFolderValue"></a-input>
+      </template>
+      <template #footer>
+        <vxe-button @click="showEditFolder = false">取消</vxe-button>
+        <vxe-button status="primary" @click="confirmEditFolder">确定</vxe-button>
+      </template>
+    </VxeModal>
+  </div>
+</template>
+
+<script>
+import { notification, Upload, Tree, Icon, Popconfirm, Input, Button } from "ant-design-vue";
+import { Checkbox, Modal } from "vxe-table";
+import { attachGetAttachUrlApi, attachSearchApi } from "../../utils/api";
+import XEUtils from 'xe-utils'
+import { Splitpanes, Pane } from 'splitpanes'
+import 'splitpanes/dist/splitpanes.css'
+
+export default {
+  name: "BaseFileGroup",
+  components: {
+    VxeCheckbox: Checkbox,
+    "a-upload": Upload,
+    VxeModal: Modal,
+    Splitpanes, Pane,
+    'a-tree': Tree,
+    'a-icon': Icon,
+    'a-popconfirm': Popconfirm,
+    'a-input': Input,
+    'a-button': Button
+  },
+  data() {
+    return {
+      showEditFolder: false,
+      currentEditInfo: {},
+      currentEditFolderValue: '',
+      currentSelectKey: [],
+      fileGroupData: [],
+      internalRows: [],
+      itemWidth: 200,
+      uploadData: {
+        picType: "",
+        picAction: "",
+        resId: "",
+      },
+      uploadHeaders: {
+        Authorization: null,
+      },
+    };
+  },
+  computed: {
+    currentFolderData() {
+      if (this.currentSelectKey.length === 0) {
+        return []
+      }
+      return this.internalRows.filter(p => p.parentId == this.currentSelectKey[0] && p.sysRowState !== 'delete')
+    }
+  },
+  props: {
+    isStyle: {
+      type: Boolean,
+      default: false,
+    },
+    showEmptyText: {
+      type: Boolean,
+      default: true,
+    },
+    picType: {
+      type: String,
+      default: "cust",
+    },
+    value: {
+      type: String,
+    },
+    resId: {
+      type: String,
+    },
+    dataName: {
+      type: String,
+    },
+    edit: {
+      // 列信息
+      type: Boolean,
+    },
+    allowDownload: {
+      // 列信息
+      type: Boolean,
+    },
+    limitSize: {
+      // 限制上传大小
+      type: Number,
+      default: 5,
+    },
+    limitType: {
+      // 限制上传类型
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    formRow: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+    width: {
+      type: String,
+      default: "100px",
+    },
+    height: {
+      type: String,
+      default: "100px",
+    },
+    rows: {
+      // 表格数据
+      type: Array,
+      default: function () {
+        return [];
+      },
+    },
+    cols: {
+      // 表格列信息
+      type: Array,
+      default: function () {
+        return [];
+      },
+    },
+    formState: {
+      // 表格列信息
+      type: String,
+      default: "",
+    },
+  },
+  watch: {
+    rows: {
+      handler: function (newVal) {
+        //构造树型结构
+        this.buildTreeData(newVal)
+      },
+      deep: true,
+    },
+    resId: {
+      handler: function (newVal) {
+        this.uploadData.resId = newVal;
+      },
+    },
+  },
+  created() {
+  },
+  mounted() {
+    // 请求头加入token
+    this.uploadHeaders.Authorization = `Bearer ${this.$store.getters.token}`;
+
+    this.internalServiceUrl = attachGetAttachUrlApi();
+    this.uploadData.picType = this.picType;
+    this.uploadData.resId = this.resId;
+    this.uploadData.picAction = this.internalServiceUrl + "/UploadAttach";
+
+    this.buildTreeData(this.rows);
+  },
+  methods: {
+    buildTreeData(tempRows) {
+      this.internalRows = JSON.parse(JSON.stringify(tempRows))
+      let tempTopFolder = {
+        sysRowState: 'view',
+        parentId: null,
+        sort: 0,
+        attachType: 'folder',
+        name: '文件',
+        id: 'sys_top_folder',
+      }
+      this.internalRows.push(tempTopFolder)
+      XEUtils.arrayEach(this.internalRows, p => {
+        if (p.parentId || p.id === 'sys_top_folder') {
+          return
+        }
+        p.parentId = 'sys_top_folder'
+      })
+
+      //
+      this.fileGroupData = XEUtils.orderBy(XEUtils.filter(this.internalRows, p => p.attachType === 'folder'), p => p.sort)
+      console.debug('davistest', this.fileGroupData)
+      if (this.currentSelectKey.length === 0) {
+        this.$refs.eisTreeView.setCurrentRow(tempTopFolder)
+        this.currentSelectKey = [tempTopFolder.id]
+      }
+      // this.fileGroupData = XEUtils.toArrayTree(tempFoldRows,{strict:true,sortKey:'sort'})
+
+      // // this.internalRows.push(tempTopFolder)
+      // this.fileGroupData = [tempTopFolder]
+      // this.fileGroupData[0].children = XEUtils.toArrayTree(tempFoldRows,{strict:true,sortKey:'sort'})
+      //构造顶级虚拟父节点
+
+      // this.fileData = XEUtils.filter(tempRows,p=>p.attachType==='file')
+    },
+    handleAddSubFolder(rowInfo) {
+      //添加子项文件夹
+      this.currentEditInfo = XEUtils.find(this.internalRows, p => p.id === rowInfo.id)
+      this.currentEditInfo['operation'] = 'add'
+      this.showEditFolder = true
+    },
+    handleEditSubFolder(rowInfo) {
+      this.currentEditFolderValue = rowInfo.name
+      //添加子项文件夹
+      this.currentEditInfo = XEUtils.find(this.internalRows, p => p.id === rowInfo.id)
+      this.currentEditInfo['operation'] = 'edit'
+      this.showEditFolder = true
+    },
+    eisCurrentChange(scope) {
+      this.currentSelectKey = [scope.row.id]
+
+    },
+    confirmEditFolder() {
+
+      let tempRowInfo = this.$refs.eisTreeView.getRowById(this.currentEditInfo.id)
+      if (this.currentEditInfo.operation === 'add') {
+        //新增文件夹
+        let tempAddRowInfo = {
+          sysRowState: 'add',
+          parentId: this.currentEditInfo.id,
+          sort: tempRowInfo.children.length + 1,
+          attachType: 'folder',
+          children: [],
+          name: this.currentEditFolderValue,
+          id: this.$store.getters.newId() + "",
+        }
+        this.internalRows.push(tempAddRowInfo)
+        this.$refs.eisTreeView.insertAt(tempAddRowInfo, -1)
+      } else {
+        let tempInternalRowInfo = XEUtils.find(this.internalRows, p => p.id === this.currentEditInfo.id)
+        if (tempInternalRowInfo.sysRowState !== 'add') {
+          tempInternalRowInfo.sysRowState = 'update'
+        }
+        tempInternalRowInfo.name = this.currentEditFolderValue
+        //修改树节点名称
+        tempRowInfo.name = tempInternalRowInfo.name
+      }
+      this.showEditFolder = false
+      this.currentEditFolderValue = null
+    },
+    panelFolderDblClick(loopFileData) {
+      if (loopFileData.attachType === 'file') {
+        return
+      }
+
+      let tempParentRowInfo = this.$refs.eisTreeView.getRowById(loopFileData.parentId)
+      let tempExpandRows = []
+      if (tempParentRowInfo) {
+        tempExpandRows.push(tempParentRowInfo)
+      }
+      let tempRowInfo = this.$refs.eisTreeView.getRowById(loopFileData.id)
+      this.$refs.eisTreeView.setCurrentRow(tempRowInfo)
+
+      tempExpandRows.push(tempRowInfo)
+      this.$refs.eisTreeView.setTreeExpand(tempExpandRows, true)
+      this.currentSelectKey = [loopFileData.id]
+    },
+    handleFileGroupSelect(selectedKeys) {
+      if (selectedKeys.length === 0) {
+        return
+      }
+      this.currentSelectKey = selectedKeys
+    },
+    getCurrentToken() {
+      return this.$store.getters.token;
+    },
+    /**
+     * 获取附件信息
+     */
+    getAttachInfo(newRows) {
+      let attachIds = [];
+      for (let i = 0; i < newRows.length; i++) {
+        if (newRows[i].attach) {
+          continue;
+        }
+        attachIds.push(newRows[i].attachId);
+        newRows[i].attach = {
+          fileName: "",
+          contentType: "",
+          content: "",
+          name: "",
+          id: newRows[i].attachId,
+        };
+      }
+      if (attachIds.length == 0) {
+        this.internalRows = newRows;
+        return;
+      }
+      let postData = {
+        fields: "id,fileName,contentType,name,content,isDefault",
+        begin: 1,
+        size: 0,
+        exp: "id in (",
+      };
+      for (let i = 0; i < attachIds.length; i++) {
+        postData.exp = postData.exp + attachIds[i] + ",";
+      }
+      let vm = this;
+      postData.exp = postData.exp.substr(0, postData.exp.length - 1) + ")";
+      attachSearchApi(postData)
+        .then((responseData) => {
+          for (let i = 0; i < responseData.content.length; i++) {
+            for (let x = 0; x < newRows.length; x++) {
+              if (responseData.content[i].id === newRows[x].attachId) {
+                newRows[x].attach.fileName = responseData.content[i].fileName;
+                newRows[x].attach.name = responseData.content[i].name;
+                newRows[x].attach.content = responseData.content[i].content;
+                newRows[x].attach.contentType =
+                  responseData.content[i].contentType;
+                // newRows[x].attach.isDefault = false
+                break;
+              }
+            }
+          }
+          vm.internalRows = newRows;
+        })
+        .catch(() => { });
+    },
+    attachFileClick(attachFile) { },
+    handleAvatarSuccess(info) {
+      if (info.file.status == "done") {
+        if (info.file.response.code !== 200) {
+          alert(info.file.response.msg)
+          return
+        }
+        //添加文件数据
+        let addRow = {
+          attachId: info.file.response.content.id,
+          sysRowState: 'add',
+          parentId: this.currentSelectKey[0],
+          fileType: info.file.response.content.fileType,
+          sort: this.internalRows.length + 1,
+          attachType: 'file',
+          name: info.file.response.content.name,
+          id: this.$store.getters.newId() + "",
+        }
+        this.internalRows.push(addRow);
+        let tempField;
+        for (let i = 0; i < this.cols.length; i++) {
+          // 赋值关联字段数据
+          let tempValue = addRow;
+          tempField = this.cols[i].field;
+          if (this.cols[i].isAuto) {
+            tempValue[tempField] = this.$store.getters.newId() + "";
+            continue;
+          }
+          if (
+            this.cols[i].controlType === "text" &&
+            this.cols[i].linkValueField !== null &&
+            this.cols[i].linkValueField !== "" &&
+            this.cols[i].linkValueField !== undefined
+          ) {
+            tempValue[tempField] = this.formRow[this.cols[i].linkValueField];
+          }
+        }
+        //通知父组件
+        this.$emit(
+          "add",
+          this.dataName,
+          info.file.response.content
+        );
+        console.debug(this.internalRows)
+      }
+    },
+    beforeAvatarUpload(file) {
+      // const isPic = file.type === 'image/jpeg' || file.type === 'image/png'
+      if (file.size / 1024 / 1024 > this.limitSize) {
+        notification.error({
+          message: "错误",
+          description: "上传图片大小不能超过 " + this.limitSize + "MB!",
+        });
+      }
+      if (this.limitType.length > 0 && !this.limitType[file.type]) {
+        notification.error({
+          message: "错误",
+          description: "上传附件格式错误!",
+        });
+      }
+      return true;
+    },
+    handleRemove(file, fileList) {
+      // this.dialogVisible =  !this.dialogVisible
+      // alert(this.dialogVisible)
+      this.internalUrls = fileList;
+      this.$emit("remove", this.dataName, file.response.data);
+      // this.$emit('remove', this.dataName, file.response.data)
+    },
+    circleAttach(attachFile, internalRow) {
+      let vm = this;
+      //  if(internalRow.isDefault == true){
+      this.internalRows.forEach((element) => {
+        if (element.id !== internalRow.id) {
+          element.isDefault = false;
+        }
+      });
+      //  }
+    },
+    removeAttach(attachFile) {
+      //检查是否存在子项文件夹或者文件需要删除
+      let tempChild = XEUtils.find(this.internalRows, p => p.parentId == attachFile.id && p.sysRowState !== 'delete')
+      if (tempChild) {
+        notification.error({
+          message: "错误",
+          description: "存在子项文件夹或者文件，请先删除子项文件夹或者文件!",
+        });
+        return
+      }
+      // console.debug(attachFile)
+      for (let i = 0; i < this.internalRows.length; i++) {
+        if (this.internalRows[i].id === attachFile.id) {
+          if (this.internalRows[i].sysRowState === 'add') {
+            this.internalRows.splice(i, 1);
+          } else {
+            this.$set(this.internalRows[i], "sysRowState", 'delete');
+          }
+          break;
+        }
+      }
+      this.$emit("remove", attachFile.id);
+    },
+    downloadAttach(attachFile) {
+      window.open(
+        this.internalServiceUrl +
+        "/DownAttachFile/" +
+        attachFile.attachId +
+        `?accessToken=${this.$store.getters.token}`
+      );
+    },
+    getUpdateRows() {
+      //先获取删除数据，因为前台删除一个明细后又添加相同的明细后台会
+      //报唯一索引错误，因为后台也是先添加然后再是删除的会照成问题
+      //所有就要把删除的放在数组的第一个传递过去，这样后台就先删除然后再新增了
+      let tempRemoveRows = XEUtils.filter(this.internalRows, p => p.sysRowState === 'delete' && p.id !== 'sys_top_folder')
+      let tempAddRows = XEUtils.filter(this.internalRows, p => p.sysRowState === 'add' && p.id !== 'sys_top_folder')
+      let tempUpdateRows = XEUtils.filter(this.internalRows, p => p.sysRowState === 'update' && p.id !== 'sys_top_folder')
+      let tempRows = XEUtils.clone(XEUtils.union(tempRemoveRows, tempAddRows, tempUpdateRows), true)
+      XEUtils.arrayEach(tempRows, p => {
+        if (p.parentId === 'sys_top_folder') {
+          p.parentId = null
+        }
+      })
+      return tempRows
+    },
+    /**
+     * 查看附件
+     */
+    viewAttach(attachFile) {
+      if (attachFile.contentType === "application/pdf") {
+        this.dialogImageUrl = `${this.internalServiceUrl}/GetAttachFile/${attachFile.id}?accessToken=${this.$store.getters.token}`;
+        this.dialogViewType = attachFile.contentType;
+        this.dialogVisible = true;
+      } else if (attachFile.content === "image") {
+        this.dialogImageUrl = `${this.internalServiceUrl}/GetAttachFile/${attachFile.id}?accessToken=${this.$store.getters.token}`;
+        this.dialogViewType = attachFile.contentType;
+        this.dialogVisible = true;
+      }
+      this.currentFileTitle = attachFile.name
+    },
+    closePdf() {
+      this.isShowPdf = false;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.file-card {
+  display: flex;
+  flex-flow: row wrap;
+  margin: 0 0 5px 5px;
+
+  .attach-wrapper {
+    .attach {
+      position: relative;
+      margin-right: 5px;
+
+      .attach-delete {
+        position: absolute;
+        top: -2px;
+        right: -4px;
+        opacity: 0;
+        font-size: 20px;
+        background-color: red;
+      }
+
+      .attach-delete:hover {
+        cursor: pointer;
+      }
+
+      .attach-download {
+        position: absolute;
+        bottom: 10px;
+        left: 4px;
+        opacity: 0;
+        font-size: 18px;
+        font-weight: bolder;
+        border: 1px solid #ccc;
+        border-radius: 50%;
+        border-color: transparent;
+        //background-color: rgb(255, 1, 1);
+        color: #000;
+      }
+
+      .attach-download:hover {
+        cursor: pointer;
+        color: rgb(189, 8, 8);
+      }
+
+      .attach-view {
+        position: absolute;
+        bottom: 10px;
+        right: 4px;
+        opacity: 0;
+        font-size: 18px;
+        font-weight: bolder;
+        border: 1px solid #ccc;
+        border-radius: 50%;
+        border-color: transparent;
+        //background-color: #666;
+        color: #000;
+      }
+
+      .attach-circle {
+        position: absolute;
+        // bottom: 10px;
+        top: 2px;
+        left: 4px;
+        opacity: 0;
+      }
+
+      .attach-view:hover {
+        cursor: pointer;
+        color: rgb(189, 8, 8);
+      }
+    }
+
+    .attach:hover>.attach-delete {
+      opacity: 0.8;
+    }
+
+    .attach:hover>.attach-download {
+      opacity: 0.7;
+    }
+
+    .attach:hover>.attach-view {
+      opacity: 0.7;
+    }
+
+    .attach:hover>.attach-circle {
+      opacity: 0.9;
+    }
+  }
+}
+
+.tree-node-icon {
+  width: 16px;
+  text-align: center;
+}
+
+.avatar-uploader .el-upload {
+  border: 1px solid #d9d9d9;
+
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+}
+
+.avatar-uploader .el-upload:hover {
+  border-color: #409eff;
+}
+
+.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  // width: 178px;
+  // height: 178px;
+  line-height: 178px;
+  text-align: center;
+}
+
+.avatar {
+  // width: 178px;
+  // height: 178px;
+  display: block;
+}
+
+.el-upload-list__item is-success {
+  float: left;
+}
+
+.currentHeight {
+  display: flex;
+  align-items: center;
+}
+
+.folder-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+
+  .folder-content {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+
+    .folder-name {
+      margin-left: 4px;
+    }
+  }
+
+  .folder-actions {
+    display: flex;
+    gap: 6px;
+  }
+}
+
+.card-view-items {
+  // margin-top: 100px;
+  // margin-left: 100px;
+  // margin-right: 100px;
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: flex-start;
+  padding: 8px 8px 8px 8px;
+  overflow-y: auto;
+
+  .card-view-item-ghost {
+    visibility: hidden;
+    height: 0px !important;
+    min-height: 0px !important;
+    margin-top: 0px;
+    margin-bottom: 0px;
+    padding: 0px 0px 0px 0px;
+  }
+
+  .card-view-item {
+    cursor: pointer;
+    position: relative;
+    flex-grow: 1;
+    flex-shrink: 1;
+    flex-basis: auto;
+    border: 1px solid #9ad4dc;
+    margin-top: 4px;
+    margin-right: 8px;
+    margin-bottom: 4px;
+    margin-left: 8px;
+    padding: 8px 8px 8px 8px;
+    min-width: 150px;
+    min-height: 80px;
+    border-radius: 6px;
+
+    .card-content {
+      position: relative;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+
+      .card-name {
+        flex: 1;
+        word-wrap: break-word;
+        margin-bottom: 8px;
+      }
+
+      .card-actions {
+        position: absolute;
+        bottom: 4px;
+        left: 4px;
+        right: 4px;
+        display: flex;
+        justify-content: space-between;
+
+        .download-btn {
+          // 固定在左下角
+        }
+
+        .delete-btn {
+          // 固定在右下角
+        }
+      }
+    }
+
+    .card-view-icon {
+      float: left;
+      width: 64px;
+      height: 64px;
+    }
+  }
+
+  .card-view-item:hover {
+    border: 1px solid #1269db;
+  }
+}
+</style>