doway-coms 2.4.4 → 2.4.7

package/packages/BaseFileGroup/src/index.vue

@@ -0,0 +1,763 @@
+<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 }">
+                      <span>
+                        <a-icon type="folder-open" v-if="$refs.eisTreeView.isTreeExpandByRow(row)"  />
+                        <a-icon v-else type="folder" />
+                        <span>{{ row.name }}</span>
+                        <span @click="handleAddSubFolder(row)" v-if="edit===true">添加</span>
+                        <span @click="handleEditSubFolder(row)"  v-if="edit===true && row.id!=='sys_top_folder'">编辑</span>
+                      </span>
+                    </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">
+              {{ loopFileData.name }}
+              <div @click="removeAttach(loopFileData)"  v-if="edit===true">删除</div>
+              <div @click="downloadAttach(loopFileData)" v-if="loopFileData.attachType==='file' && allowDownload===true">下载</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 } 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
+  },
+  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,
+            attachFile:'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.union(tempRemoveRows,tempAddRows,tempUpdateRows)
+      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;
+}
+.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;
+    // height: 100px;
+    // margin-top: 4px;
+    // margin-right: 8px;
+    // margin-bottom: 4px;
+    // margin-left: 8px;
+    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;
+    //border-color: #9ad4dc;
+    min-width: 150px;
+    border-radius: 6px;
+    .card-view-icon {
+      float: left;
+      width: 64px;
+      height: 64px;
+    }
+    // .card-view-desc {
+    //   padding-left: 85px;
+    // }
+  }
+  .card-view-item:hover {
+    border: 1px solid #1269db;
+  }
+}
+</style>