doway-coms 2.4.9 → 2.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "doway-coms",
-  "version": "2.4.9",
+  "version": "2.5.1",
   "description": "doway组件库",
   "author": "dowaysoft",
   "main": "packages/index.js",

package/packages/BaseFileGroup/src/index.vue

@@ -2,45 +2,35 @@
   <div style="height:300px">
     <splitpanes class="default-theme">
       <pane size="20">
-        <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>
-                    </template>
-                  </vxe-column>
-                  <vxe-column width="80px">
-                    <template #default="{ row }">
-                      <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>
+        <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>
+            </template>
+          </vxe-column>
+          <vxe-column width="80px">
+            <template #default="{ row }">
+              <span>
+                <span class="button" @click="handleAddSubFolder(row)" v-if="edit === true"><a-icon type="file-add" /></span>
+                {{ ' ' }}
+                <span class="button1" @click="handleEditSubFolder(row)"
+                  v-if="edit === true && row.id !== 'sys_top_folder'"><a-icon type="edit" /></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 }">
@@ -54,88 +44,54 @@
       </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 class="card-view-item" :style="{ width: itemWidth + 'px' }" v-for="loopFileData in currentFolderData"
+            @dblclick="panelFolderDblClick(loopFileData)" :key="loopFileData.id">
+            {{ loopFileData.name }}
+            <!-- <button  style="position: absolute; padding: 1px 2px; right:2px;bottom:2px"> -->
+              <div style="position: absolute; padding: 1px 2px; right:2px;bottom:2px" @click="removeAttach(loopFileData)" v-if="edit === true"><a-icon type="delete" /></div>
+            <!-- </button> -->
+            <div @click="downloadAttach(loopFileData)" v-if="loopFileData.attachType === 'file' && allowDownload === true">下载
             </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>
+
+          <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
-    >
+    <VxeModal v-model="showEditFolder" transfer :height="200" :width="400" destroy-on-close :z-index="999" show-footer>
       <template #title>
-        <span>文件夹修改</span>
+        <span>添加文件夹名称</span>
       </template>
       <template #default>
-          <a-input v-model="currentEditFolderValue"></a-input>
+        <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>
+        <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 { 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'
@@ -149,20 +105,20 @@ export default {
     "a-upload": Upload,
     VxeModal: Modal,
     Splitpanes, Pane,
-    'a-tree':Tree,
-    'a-icon':Icon,
-    'a-popconfirm':Popconfirm,
-    'a-input':Input
+    'a-tree': Tree,
+    'a-icon': Icon,
+    'a-popconfirm': Popconfirm,
+    'a-input': Input
   },
   data() {
     return {
-      showEditFolder:false,
-      currentEditInfo:{},
-      currentEditFolderValue:'',
-      currentSelectKey:[],
-      fileGroupData:[],
+      showEditFolder: false,
+      currentEditInfo: {},
+      currentEditFolderValue: '',
+      currentSelectKey: [],
+      fileGroupData: [],
       internalRows: [],
-      itemWidth:200,
+      itemWidth: 200,
       uploadData: {
         picType: "",
         picAction: "",
@@ -173,13 +129,13 @@ export default {
       },
     };
   },
-  computed:{
-     currentFolderData(){
-        if(this.currentSelectKey.length===0){
-          return []
-        }
-        return this.internalRows.filter(p=>p.parentId==this.currentSelectKey[0] && p.sysRowState!=='delete')
-     }
+  computed: {
+    currentFolderData() {
+      if (this.currentSelectKey.length === 0) {
+        return []
+      }
+      return this.internalRows.filter(p => p.parentId == this.currentSelectKey[0] && p.sysRowState !== 'delete')
+    }
   },
   props: {
     isStyle: {
@@ -285,108 +241,108 @@ export default {
     this.buildTreeData(this.rows);
   },
   methods: {
-    buildTreeData(tempRows){
-      this.internalRows =JSON.parse(JSON.stringify(tempRows))
+    buildTreeData(tempRows) {
+      this.internalRows = JSON.parse(JSON.stringify(tempRows))
       let tempTopFolder = {
-            sysRowState: 'view',
-            parentId: null,
-            sort:0,
-            attachType:'folder',
-            name:'文件',
-            id:'sys_top_folder',
+        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'
+      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.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
+    handleAddSubFolder(rowInfo) {
+      //添加子项文件夹
+      this.currentEditInfo = XEUtils.find(this.internalRows, p => p.id === rowInfo.id)
+      this.currentEditInfo['operation'] = 'add'
+      this.showEditFolder = true
     },
-    handleEditSubFolder(rowInfo){
+    handleEditSubFolder(rowInfo) {
       this.currentEditFolderValue = rowInfo.name
-        //添加子项文件夹
-        this.currentEditInfo =XEUtils.find(this.internalRows,p=>p.id===rowInfo.id)
-        this.currentEditInfo['operation'] = 'edit'
-        this.showEditFolder = true
+      //添加子项文件夹
+      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
+
+    },
+    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.showEditFolder = false
-        this.currentEditFolderValue =null
-    },  
-    panelFolderDblClick(loopFileData){
-        if(loopFileData.attachType==='file'){
-          return
+        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)
+      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]
+      tempExpandRows.push(tempRowInfo)
+      this.$refs.eisTreeView.setTreeExpand(tempExpandRows, true)
+      this.currentSelectKey = [loopFileData.id]
     },
-    handleFileGroupSelect(selectedKeys){
-      if(selectedKeys.length===0){
-          return
+    handleFileGroupSelect(selectedKeys) {
+      if (selectedKeys.length === 0) {
+        return
       }
       this.currentSelectKey = selectedKeys
-    },  
+    },
     getCurrentToken() {
       return this.$store.getters.token;
     },
@@ -440,52 +396,52 @@ export default {
           }
           vm.internalRows = newRows;
         })
-        .catch(() => {});
+        .catch(() => { });
     },
-    attachFileClick(attachFile) {},
+    attachFileClick(attachFile) { },
     handleAvatarSuccess(info) {
       if (info.file.status == "done") {
-        if(info.file.response.code!==200){
-            alert(info.file.response.msg)
-            return
+        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() + "",
+          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;
           }
-          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)
+          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) {
@@ -523,13 +479,13 @@ export default {
     },
     removeAttach(attachFile) {
       //检查是否存在子项文件夹或者文件需要删除
-      let tempChild =  XEUtils.find(this.internalRows,p=>p.parentId==attachFile.id && p.sysRowState!=='delete')
-      if(tempChild){
+      let tempChild = XEUtils.find(this.internalRows, p => p.parentId == attachFile.id && p.sysRowState !== 'delete')
+      if (tempChild) {
         notification.error({
           message: "错误",
           description: "存在子项文件夹或者文件，请先删除子项文件夹或者文件!",
         });
-          return
+        return
       }
       // console.debug(attachFile)
       for (let i = 0; i < this.internalRows.length; i++) {
@@ -547,23 +503,23 @@ export default {
     downloadAttach(attachFile) {
       window.open(
         this.internalServiceUrl +
-          "/DownAttachFile/" +
-          attachFile.attachId +
-          `?accessToken=${this.$store.getters.token}`
+        "/DownAttachFile/" +
+        attachFile.attachId +
+        `?accessToken=${this.$store.getters.token}`
       );
     },
-    getUpdateRows(){
+    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
-          }
+      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
     },
@@ -590,6 +546,47 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+
+.button {
+  display: inline-block;
+  padding: 1px 6px;
+  background-color: #4CAF50;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+}
+
+.button:hover {
+  background-color: #45a049;
+}
+
+.button:active {
+  background-color: #408E43;
+  transform: translateY(2px);
+}
+
+.button1 {
+  display: inline-block;
+  padding: 1px 6px;
+  background-color: #3a61b6;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+}
+
+.button1:hover {
+  background-color: #3a61b6;
+}
+
+.button1:active {
+  background-color: #3a61b6;
+  transform: translateY(2px);
+}
+
 .file-card {
   display: flex;
   flex-flow: row wrap;
@@ -660,23 +657,24 @@ export default {
       }
     }
 
-    .attach:hover > .attach-delete {
+    .attach:hover>.attach-delete {
       opacity: 0.8;
     }
 
-    .attach:hover > .attach-download {
+    .attach:hover>.attach-download {
       opacity: 0.7;
     }
 
-    .attach:hover > .attach-view {
+    .attach:hover>.attach-view {
       opacity: 0.7;
     }
 
-    .attach:hover > .attach-circle {
+    .attach:hover>.attach-circle {
       opacity: 0.9;
     }
   }
 }
+
 .tree-node-icon {
   width: 16px;
   text-align: center;
@@ -713,10 +711,12 @@ export default {
 .el-upload-list__item is-success {
   float: left;
 }
+
 .currentHeight {
   display: flex;
   align-items: center;
 }
+
 .card-view-items {
   // margin-top: 100px;
   // margin-left: 100px;
@@ -726,6 +726,7 @@ export default {
   justify-content: flex-start;
   padding: 8px 8px 8px 8px;
   overflow-y: auto;
+
   .card-view-item-ghost {
     visibility: hidden;
     height: 0px !important;
@@ -734,6 +735,7 @@ export default {
     margin-bottom: 0px;
     padding: 0px 0px 0px 0px;
   }
+
   .card-view-item {
     cursor: pointer;
     // height: 100px;
@@ -753,15 +755,19 @@ export default {
     //border-color: #9ad4dc;
     min-width: 150px;
     border-radius: 6px;
+    position: relative;
+
     .card-view-icon {
       float: left;
       width: 64px;
       height: 64px;
     }
+
     // .card-view-desc {
     //   padding-left: 85px;
     // }
   }
+
   .card-view-item:hover {
     border: 1px solid #1269db;
   }