解决冲突

src/api/myfile/myfile.js

@@ -2,7 +2,7 @@ import request from "../../../src/utils/request"
 // 查询文档目录管理列表
 function get(data) {
     return request({
-        url: "/biz/dir/list",
+        url: "/biz/info/list",
         method: "get",
         params: data
     })

src/views/myfile/MyFile.vue

@@ -17,9 +17,10 @@
                     </div>
                 </div>
                 <!-- 方块点击盒子 -->
-                <div style="display: flex;justify-content: flex-start;align-items: center;flex-wrap: wrap;">
+                <div
+                    style="display: flex;justify-content: flex-start;align-items: flex-start;flex-wrap: wrap;height: 540px;">
+                    <!-- v-for盒子 -->
                     <div class="setBox" @click="changeFile">
-                        <!-- <p  @click="">...</p> -->
                         <el-dropdown trigger="click" class="selectChe">
                             <span class="el-dropdown-link">
                                 ...
@@ -35,6 +36,14 @@
                         <p>xxx文件</p>
                     </div>
                 </div>
+                <div>
+                    <p>
+                        <span style="margin-left: 10px;">5G/1T</span>
+                        <span style="margin-left: 10rem;font-size: 12px;color: blue;cursor: pointer;"
+                            @click="askApply">申请扩容</span>
+                    </p>
+                    <el-progress style="margin-left: 8px;" :percentage="50" />
+                </div>
             </div>
             <!-- 右侧大盒子 -->
             <div class="mesBox">
@@ -131,19 +140,66 @@
                 <!-- 展示文件夹盒子 -->
                 <div>
                     <!-- 文件夹 -->
-                    <div>
-                        <el-collapse v-model="folder" accordion >
+                    <div class="detailBox">
+                        <el-collapse v-model="folder" accordion class="collapse">
                             <el-collapse-item title="文件夹" name="1" class="custom-collapse-item">
-                               
+
                             </el-collapse-item>
                         </el-collapse>
                     </div>
                     <!-- 文件 -->
-                    <div>
-
+                    <div class="fileTable">
+                        <el-collapse v-model="files" accordion class="collapse">
+                            <el-collapse-item title="文件" name="2" class="custom-collapse-item">
+                                <el-table :data="fileList" style="width: 100%" @row-click="handleRowClick">
+                                    <el-table-column label="Image" width="100">
+                                        <template slot-scope="scope">
+                                            <!-- 插入固定图片 -->
+                                            <span>1</span>
+                                            <img :src="fileBox" alt=""/>
+                                        </template>
+                                    </el-table-column>
+                                    <el-table-column prop="date" label="Date" width="180" />
+                                    <el-table-column prop="name" label="Name" width="180" />
+                                    <el-table-column prop="address" label="Address" />
+                                </el-table>
+                                <div class="setCli" v-if="cliCC">
+                                    <template v-for="(item, index) in mouseCli">
+                                        <p @click="chooseSet(item, index)" class="chooseSet">
+                                            <img :src="item.img" alt="">
+                                            {{ item.name }}
+                                            <span v-if="item.name == '在线编辑' || item.name == '协作' ? true : false"
+                                                style="color: #7084B4;float: right;">></span>
+                                        </p>
+                                    </template>
+                                </div>
+                            </el-collapse-item>
+                        </el-collapse>
                     </div>
                 </div>
             </div>
+            <!-- 扩容弹窗 -->
+            <div>
+                <el-dialog v-model="askTo" header="扩容申请" width="30%">
+                    <el-form>
+                        <el-form-item label="新容量">
+                            <el-input-number v-model="askNum" :min="1" :max="10" />
+                        </el-form-item>
+                        <el-form-item label="申请理由">
+                            <el-input v-model="askTalk" maxlength="150" placeholder="请输入申请理由" show-word-limit
+                                type="textarea" />
+                        </el-form-item>
+                    </el-form>
+                    <template #footer>
+                        <span class="dialog-footer">
+                            <el-button @click="askTo = false">取消</el-button>
+                            <el-button type="primary" @click="sureAsk">
+                                确定
+                            </el-button>
+                        </span>
+                    </template>
+                </el-dialog>
+            </div>
         </div>
     </div>
 </template>
@@ -165,14 +221,47 @@ import blueLeft from '../../assets/images/blueLeft.png'
 import grayRight from "../../assets/images/grayRight.png"
 import sort from '../../assets/images/sort.png'
 import squre from '../../assets/images/squre.png'
-// import 'element-plus/packages/theme-chalk/src/index.scss'
+import addolder from '../../assets/images/addolder.png'
+import textbox from '../../assets/images/textbox.png'
+import goon from '../../assets/images/goon.png'
+import notePencil from '../../assets/images/notePencil.png'
+import togger from '../../assets/images/togger.png'
+import icc from '../../assets/images/icc.png'
+import history from '../../assets/images/history.png'
+import fileBox from '../../assets/images/fileBox.png'
 export default {
     setup() {
-        let folderList = ref([])
-        let fireList = ref([])
         let searchFire = ref('')
         let selectedIndex = ref(0)
-        let folder = ref("")
+        let folder = ref(['1'])
+        let files = ref(['2'])
+        let folderList = ref([])
+        let askTo = ref(false)
+        let askNum = ref(1)
+        let askTalk = ref('')
+        let cliCC = ref(false)
+        let fileList = ref([
+            {
+                date: '2016-05-03',
+                name: 'Tom',
+                address: 'No. 189, Grove St, Los Angeles',
+            },
+            {
+                date: '2016-05-02',
+                name: 'Tom',
+                address: 'No. 189, Grove St, Los Angeles',
+            },
+            {
+                date: '2016-05-04',
+                name: 'Tom',
+                address: 'No. 189, Grove St, Los Angeles',
+            },
+            {
+                date: '2016-05-01',
+                name: 'Tom',
+                address: 'No. 189, Grove St, Los Angeles',
+            },
+        ])
         let menuList = ref([
             {
                 name: "标签1",
@@ -223,6 +312,52 @@ export default {
                 name: "音频"
             }
         ])
+        let mouseCli = ref([
+            {
+                img: addolder,
+                name: "移动",
+            },
+            {
+                img: copy,
+                name: "复制",
+            },
+            {
+                img: clipboard,
+                name: "粘贴"
+            },
+            {
+                img: textbox,
+                name: "重命名"
+            },
+            {
+                img: goon,
+                name: "发送"
+            },
+            {
+                img: share,
+                name: "分享"
+            },
+            {
+                img: notePencil,
+                name: "在线编辑"
+            },
+            {
+                img: togger,
+                name: "协作"
+            },
+            {
+                img: icc,
+                name: "文字识别"
+            },
+            {
+                img: history,
+                name: "历史版本"
+            },
+            {
+                img: share,
+                name: "删除"
+            }
+        ])
         function getAll() {
             myfile.get().then(res => {
                 console.log(res, 'eee');
@@ -239,9 +374,28 @@ export default {
         function shotdown(row) {
             this.menuList = this.menuList.filter(item => item.name !== row.name)
         }
+        // 文件名表格每一行点击事件
+        function handleRowClick(row) {
+            cliCC.value = true
+        }
+        // 申请扩容
+        function askApply() {
+            this.askTo = true
+        }
+        function sureAsk() {
+            this.askTo = false
+        }
+        //mouse弹框
+        function chooseSet(row, num) {
+            if (row.name == '在线编辑' || row.name == '协作') {
+                cliCC.value = true
+            } else {
+                cliCC.value = false
+            }
+        }
         return {
             folderList,//文件夹的数据
-            fireList,//文件夹的数据
+            fileList,//文件夹的数据
             getAll,//拿到数据的方法
             searchFire,//搜索文件的model
             changeFile,//切换右侧视图的file
@@ -256,10 +410,29 @@ export default {
             squre,//视图切换
             sort,//排序
             folder,
+            files,
+            handleRowClick,
+            askApply,//申请扩容
+            askTo,
+            sureAsk,
+            askNum,
+            askTalk,
+            cliCC,
+            addolder,//图片↓
+            textbox,
+            goon,
+            notePencil,
+            togger,
+            icc,
+            history,
+            mouseCli,//文件点击弹框
+            chooseSet,
+            fileBox,
         }
     },
     created() {
         this.getAll();
+        // 监听鼠标左键点击事件
     },
 }
 </script>
@@ -386,7 +559,43 @@ p {
     align-items: center;
     background-color: #D9E0F0;
 }
-::deep .custom-collapse-item{
+
+::v-deep .el-collapse-item__header {
     height: 24px !important;
+    background-color: #EBEFF6 !important;
+}
+
+.detailBox {
+    width: 100%;
+    height: 270px;
+}
+
+::v-deep .el-dialog__header {
+    background-color: #ECEFF7;
+    margin-right: 0px;
+}
+
+.fileTable {
+    position: relative;
+}
+
+.setCli {
+    width: 156px;
+    height: 340px;
+    position: absolute;
+    top: -70px;
+    left: 300px;
+    background-color: white;
+    border: 1px solid gray;
+    border-radius: 4px;
+    z-index: 2;
+}
+
+.chooseSet:hover {
+    width: 100%;
+    height: 40px;
+    line-height: 40px;
+    background-color: #8693b2;
+    color: white;
 }
 </style>