fix bug

src/views/resource/component/xtable.vue

@@ -2,31 +2,40 @@
   <div>
     <div class="flex flex-center flex-justify-between">
       <div v-for="header in headers" :key="header.id" class="mt-20 full-width">
-        <div class="padding border-bottom light-purple-bg">
+        <div
+          v-if="header.label !== '操作'"
+          class="padding-top padding-bottom border-bottom"
+          :style="`min-width:` + header.width + `px`"
+        >
+          {{ header.label }}{{ header.width }}
+        </div>
+        <div v-else class="border-bottom menu flex flex-center">
           {{ header.label }}{{ header.width }}
         </div>
       </div>
     </div>
     <div class="full-width">
       <div
-          v-for="row in data"
-          :key="row.id"
-          class="flex flex-center row pointer"
-          @click="rowClick(row)"
+        v-for="row in data"
+        :key="row.id"
+        class="flex flex-center row pointer"
+        @click="rowClick(row)"
       >
         <div
-            v-for="(prop, cell) in headers"
-            :key="prop.id"
-            class="flex-child-average"
+          v-for="(prop, cell) in headers"
+          :key="prop.id"
+          class="flex-child-average flex"
         >
-          <div v-if="prop.label === '操作'" class=" nowrap">
+          <div
+            v-if="prop.label === '操作'"
+            class="nowrap menu flex flex-center"
+          >
             <el-button type="primary" size="small" text>查看</el-button>
             <el-button type="primary" size="small" text>归档</el-button>
-            <el-button type="primary" size="small" text>删除</el-button>
             <el-button type="primary" size="small" text>重命名</el-button>
           </div>
-          <div v-else>
-            <slot name="row" :index="cell" :row="row" :ele="prop"/>
+          <div v-else class="row" :style="`min-width:` + prop.width + `px`">
+            <slot name="row" class="row" :index="cell" :row="row" :ele="prop" />
           </div>
         </div>
       </div>
@@ -76,18 +85,24 @@ export default {
 
 <style lang="scss" scoped>
 .row {
-  padding: 10px;
   margin: 1px;
+  min-height: 40px;
 }
 
 .row:hover {
-  padding: 10px;
+  min-height: 40px;
   margin: 1px;
   background-color: #eeeeee;
 }
 
 .cell {
-  height: 45px;
+  min-height: 40px;
   border-bottom: #dcdfe6 solid 1px;
 }
+
+.menu {
+  width: 280px;
+  height: 45px;
+  background-color: wheat;
+}
 </style>

src/views/resource/index.vue

@@ -5,20 +5,20 @@
         <div class="flex flex-center">
           <span class="mr-10 nowrap">项目阶段</span>
           <el-select
-              v-model="folderInfo.stageId"
-              remote
-              filterable
-              clearable
-              placeholder="筛选项目阶段"
-              :remote-method="remoteMethod"
-              style="width: 100%"
-              @change="folderResult"
+            v-model="folderInfo.stageId"
+            remote
+            filterable
+            clearable
+            placeholder="筛选项目阶段"
+            :remote-method="remoteMethod"
+            style="width: 100%"
+            @change="folderResult"
           >
             <el-option
-                v-for="item in stage"
-                :key="item.id"
-                :label="item.name"
-                :value="item.id"
+              v-for="item in stage"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
             >
             </el-option>
           </el-select>
@@ -30,19 +30,27 @@
       <div v-if="top">
         <div class="full-width flex flex-center flex-justify-between">
           <div class="full-width flex flex-justify-start flex-align-center">
-            <base-button title="新建文件夹" icon="Plus" @click="showDialog(1)"/>
-            <base-button title="批量授权" icon="User"/>
+            <base-button
+              title="新建文件夹"
+              icon="Plus"
+              @click="showDialog(1)"
+            />
+            <base-button title="批量授权" icon="User" />
           </div>
-          <el-button round icon="el-icon-search"/>
+          <el-button round icon="el-icon-search" />
         </div>
         <el-breadcrumb
-            separator-icon="ArrowRight"
-            class="mt-20 main-color pointer"
+          separator-icon="ArrowRight"
+          class="mt-20 main-color pointer"
         >
           <el-breadcrumb-item> 提示说明</el-breadcrumb-item>
         </el-breadcrumb>
         <xtable :data="data" :option="option" @row-click="top = !top">
-          <template #row="{ row, ele }"> {{ row[ele.prop] }}</template>
+          <template #row="{ row, ele }">
+            <div class="flex light-blue-bg">
+              {{ row[ele.prop] }}
+            </div>
+          </template>
         </xtable>
       </div>
       <!--      下级目录-->
@@ -53,23 +61,22 @@
             <el-button type="primary" plain>新建文件夹</el-button>
             <el-button type="primary" plain>批量授权</el-button>
           </div>
-          <el-button round icon="el-icon-search"/>
+          <el-button round icon="el-icon-search" />
         </div>
         <el-breadcrumb
-            separator-icon="ArrowRight"
-            class="mt-20 main-color pointer"
+          separator-icon="ArrowRight"
+          class="mt-20 main-color pointer"
         >
           <el-breadcrumb-item @click="top = true"
-          >返回上一层
-          </el-breadcrumb-item
-          >
+            >返回上一层
+          </el-breadcrumb-item>
           <el-breadcrumb-item>全部文件</el-breadcrumb-item>
           <el-breadcrumb-item>归档1</el-breadcrumb-item>
         </el-breadcrumb>
         <xtable :data="data" :option="option">
           <template #row="{ index, row, ele }">
             <div v-if="index === 0" class="light-purple-bg flex flex-center">
-              <img src="@/assets/svg/folder/edit.svg" style="width: 40px"/>
+              <img src="@/assets/svg/folder/edit.svg" style="width: 40px" />
               <div>
                 {{ row[ele.prop] }}
               </div>
@@ -80,10 +87,12 @@
       </div>
     </el-card>
 
-    <el-dialog v-model="show" :title="title"
-               :width="width"
-    >
-      <floder v-if="showType === 1" :info="folderInfo" @close="colseDialog"></floder>
+    <el-dialog v-model="show" :title="title" :width="width">
+      <floder
+        v-if="showType === 1"
+        :info="folderInfo"
+        @close="colseDialog"
+      ></floder>
     </el-dialog>
   </div>
 </template>
@@ -99,7 +108,7 @@ meta: { 'show': false }
 import tipsCustom from '@/components/tips-custom/index.vue'
 import xtable from '@/views/resource/component/xtable.vue'
 import floder from '@/views/resource/component/floder.vue'
-import baseButton from "@/components/base-button.vue";
+import baseButton from '@/components/base-button.vue'
 
 export default {
   components: {
@@ -116,14 +125,14 @@ export default {
       width: 380,
       title: '新建文件夹',
       top: true,
-      data: [],
+      data: [{ title: '@2' }, { title: '@3333', status: '555' }],
       option: {
         column: [
           {
             label: '名称',
             prop: 'title',
             display: false,
-            width: 170
+            width: 270
           },
           {
             label: '状态',
@@ -150,7 +159,7 @@ export default {
       },
       page: {
         current: 1,
-        size: 10,
+        size: 10
       },
       total: ''
     }
@@ -170,7 +179,7 @@ export default {
     },
     getFolderList() {
       const data = {
-        stageId: this.folderInfo.stageId,
+        stageId: this.folderInfo.stageId
       }
       this.$api.project.folderList(Object.assign(data, this.page)).then(res => {
         if (res.code === 200) {
@@ -183,18 +192,19 @@ export default {
      * 获取项目阶段
      */
     getStage() {
-      this.$api.project.includeStage({projectId: this.folderInfo.projectId}).then(res => {
-        if (res.code === 200) {
-          this.stage = res.data
-        }
-      })
+      this.$api.project
+        .includeStage({ projectId: this.folderInfo.projectId })
+        .then(res => {
+          if (res.code === 200) {
+            this.stage = res.data
+          }
+        })
     },
     folderResult(res) {
       this.stageId = res
       this.getFolderList()
     }
-  },
-
+  }
 }
 </script>