Vue+Element 仿飞书表格||甘特图表格 ,搜索、筛选、字段管理、卡片管理功能

一、效果图

注明：此表格是表头自定义多类型筛选的升级版

1. 涉及到的组件代码会以链接的形式贴出来
2. 涉及到的Scss变量、样式、接口方法，请自行调试
3. 列表的表头及每列数据均由后端返回
4. 列表当中数据的状态颜色、tag标签均可配置
5. 效果仅针对记录当前项目功能效果的实现
6. Zn开头的组件为全局加载,请自行引入加载
7. 列表无数据或无权限时prop传入图片路径及提示语即可,(此处可优化)
8. 表格第一列序号与复选框hover切换

二、页面示例代码

<template>
  <div class="workOrder-container">
    <zn-query-form>
      <zn-query-form-left-panel>
        <zn-views-tabs :options="viewsTabsOptions" @upTable="getHeader" />
      </zn-query-form-left-panel>
      <zn-query-form-right-panel>
        <!-- 搜索 -->
        <zn-search-btn @up-Search="upSearch" />
        <!-- 筛选 -->
        <zn-screen-btn
          ref="ZnScreenBtn"
          :mark="mark"
          :views_id="queryForm.views_id"
          :options="managementOptions"
          @upTable="fetchData"
        />
        <!-- 字段管理 -->
        <zn-field-management-btn
          ref="ZnFieldManagementBtn"
          v-if="viewsType == 'table'"
          :mark="mark"
          :views_id="queryForm.views_id"
          :options="managementOptions"
          @upTable="upTableData"
        />
        <!-- 卡片管理 -->
        <zn-card-management-btn
          ref="ZnCardManagementBtn"
          v-if="viewsType == 'gallery'"
          :mark="mark"
          :views_id="queryForm.views_id"
          :options="managementOptions"
          @upCard="upCardData"
        />
        <!-- 导出全部 -->
        <el-button
          type="primary"
          size="medium"
          plain
          @click="reportAll"
          v-permissions="{
            permission: ['workOrder:workOrder:allWorkOrder:export'],
          }"
        >
          <zn-icon :iconName="'emport'" />
          导出
        </el-button>
        <el-button
          class="el-add"
          type="primary"
          size="medium"
          @click="addWorkOrder"
          v-permissions="{ permission: ['workOrder:allWorkOrder:add'] }"
        >
          <zn-icon :iconName="'callcenter-add'" />
          新建工单
        </el-button>
      </zn-query-form-right-panel>
    </zn-query-form>
    <!-- 相册试图页面 -->
    <div
      v-if="viewsType === 'gallery'"
      class="content-view album-view"
      v-infinite-scroll="loadMore"
      :infinite-scroll-immediate="false"
    >
      <zn-filter-album
        ref="filterAlbum"
        :albumData="tableList"
        :finallyColumns="finallyColumns"
        :deatilsPath="deatilsPath"
        :indexColumn="indexColumn"
        @fetch-data="fetchData"
      />
    </div>
    <!-- 表格试图页面 -->
    <div class="content-view table-view" v-else>
      <zn-filter-table
        v-if="viewsType == 'table'"
        ref="filterTable"
        :class="total === 0 ? 'table-view-empty' : ''"
        :multiple="true"
        :tableData="tableList"
        :finallyColumns="finallyColumns"
        :deatilsPath="deatilsPath"
        @selectList="getSelect"
        @fetch-data="fetchData"
        :defaultPageImgUrl="
          require('@/assets/images/default_page/pic-currency.png')
        "
        :defaultPageTips="'暂无数据'"
      >
        <el-button type="text" size="medium" @click="reportPart">
          <zn-icon :iconName="'emport'" />
          <span>导出选中</span>
        </el-button>
      </zn-filter-table>
      <zn-pagination
        v-show="total > 0"
        :page.sync="queryForm.page"
        :limit.sync="queryForm.listRows"
        @pagination="fetchData"
        :total="total"
        :algin="'right'"
        class="table-pagination"
      />
    </div>
    <add-work-order
      :modalToBody="false"
      :configData="configData"
      ref="addWorkOrder"
    />
  </div>
</template>

<script>
import addWorkOrder from './components/addWorkOrder'
import {
  getList,
  getWorkOrderConfig,
  exportAllExcel,
  exportSelectExcel,
} from '@/api/workOrder'
import { getTableHeader, viewsTabs, filters } from '@/api/index'
export default {
  name: 'WorkOrder',
  props: {},
  components: {
    addWorkOrder,
  },
  data() {
    return {
      mark: 'WorkOrderList',
      configData: null,
      viewsType: '', //当前页面显示视图类型
      total: 0,
      tableList: [],
      viewsTabsOptions: [], // viewsTabs数据
      managementOptions: {}, // 字段、卡片管理数据
      listLoading: false,
      queryForm: {
        page: 1,
        listRows: 10,
        keywords: '',
        views_id: '', //当前页面显示视图ID
      },
      deatilsPath: '/workOrder/workOrderDetail', //表格当前行跳转路径
      columns: [], //筛选条件中的数据
      checkList: [], //筛选条件中选中的数据
      moreList: [], //表格复选多选中的数据
      indexColumn: '', // 相册视图标题字段
    }
  },
  computed: {
    finallyColumns() {
      if (this.checkList.length > 0) {
        return this.columns.filter((item) =>
          this.checkList.includes(item.label)
        )
      }
    },
  },
  watch: {},
  created() {
    this.getConfigData()
    this.getViewsTabs()
  },
  mounted() {},
  methods: {
    // 获取工单配置参数
    getConfigData() {
      getWorkOrderConfig().then((res) => {
        this.configData = res.data
      })
    },
    addWorkOrder() {
      this.$refs['addWorkOrder'].show()
    },
    // 顶栏左侧viewsTabs
    getViewsTabs() {
      viewsTabs({ mark: this.mark }).then((res) => {
        this.viewsTabsOptions = res.data
        if (res.code == 200 && res.data.length > 0) {
          this.queryForm.views_id = res.data[0].id // 更新当前页面显示视图ID
          this.viewsType = res.data[0].type // 更新当前页面显示视图类型
          this.getFilters() //回显筛选
          this.getHeader()
          if (res.data[0].type === 'table') {
            this.fetchData()
          } else {
            this.fetchAlbumData()
          }
        }
      })
    },
    // 获取已保存的筛选规则
    getFilters() {
      filters({ mark: this.mark, views_id: this.queryForm.views_id }).then(
        (res) => {
          if (this.$refs.ZnScreenBtn) {
            this.$refs.ZnScreenBtn.form.filters = res.data.filters
          }
        }
      )
    },
    // 顶栏右侧字段管理、卡片管理
    async getHeader(obj) {
      getTableHeader({
        mark: this.mark,
        views_id: obj ? obj.id : this.queryForm.views_id,
      }).then((res) => {
        this.managementOptions = res.data //字段管理、卡片管理
        this.columns = res.data.fields //table列(未经卡片管理、字段管理筛选的数据)
        this.indexColumn = res.data.options.indexColumn
        if (obj) {
          this.queryForm.views_id = obj.id // 更新当前页面显示视图ID
          this.viewsType = obj.type // 更新当前页面显示视图类型
          this.getFilters() //回显筛选
          // 更新数据
          if (obj.type === 'table') {
            this.fetchData()
          } else {
            this.tableList = []
            this.queryForm.page = 1
            this.loadMore()
          }
        }
        this.managementOptions.fields.map((item) => {
          if (item.isShow == true) {
            this.checkList.push(item.label)
          }
        })
      })
    },
    // 请求table数据
    async fetchData() {
      this.listLoading = true
      const {
        data: { data, total },
      } = await getList(this.queryForm)
      this.tableList = data
      this.total = total
      this.listLoading = false
    },
    // 请求album数据
    async fetchAlbumData() {
      this.listLoading = true
      const {
        data: { data, total, last_page },
      } = await getList(this.queryForm)
      this.tableList = this.tableList.concat(data)
      if (this.queryForm.page >= last_page + 1) {
        this.queryForm.page = last_page + 1
      } else {
        this.queryForm.page = this.queryForm.page + 1
      }
      this.total = total
      this.listLoading = false
    },
    // 更新搜索字段,更新table数据
    upSearch(val) {
      this.tableList = []
      this.queryForm.page = 1
      this.queryForm.keywords = val
      if (this.viewsType === 'table') {
        this.fetchData()
      } else {
        this.loadMore()
      }
    },
    // 获取多选选中的table数据(需求未出,功能暂留)
    getSelect(list) {
      this.moreList = list
    },
    // 卡片管理子组件条件返回,更新表格视图
    upTableData(columns, checkList) {
      this.columns = columns //所有表头
      this.checkList = checkList //对应表头
    },
    // 卡片管理子组件条件返回,更新表格视图
    upCardData(columns, checkList, showLabel) {
      this.columns = columns //所有表头
      this.checkList = checkList //对应表头
      this.showLabel = showLabel //卡片视图中是否显示label
    },
    // 无线加载
    loadMore() {
      this.queryForm.listRows = 6
      this.fetchAlbumData()
    },
    // 导出选中
    reportPart() {
      exportSelectExcel({
        views_id: this.queryForm.views_id,
        ids: this.moreList.map((item) => item.id).join(','),
      }).then((res) => {
        if (res.code === 200) {
          this.$download(res.data)
        }
      })
    },
    // 导出全部
    reportAll() {
      exportAllExcel({
        views_id: this.queryForm.views_id,
        keywords: this.queryForm.keywords,
      }).then((res) => {
        if (res.code === 200) {
          this.$download(res.data)
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.workOrder-container {
  height: calc(100vh - 60px - 50px - 16px * 2);
  ::v-deep .add-workorder-drawer {
    position: absolute;
  }
  .el-add {
    margin-right: 0 !important;
  }
  .content-view {
    height: calc(100% - 55px);
    &.album-view {
      overflow-x: hidden;
      overflow-y: auto;
      padding: 0 16px 16px;
    }
    &.table-view {
      position: relative;
    }
    // 分页样式
    .filter-table {
      height: calc(100% - 69px);
      padding-bottom: 0;
      &.table-view-empty {
        height: 100%;
      }
      ::v-deep .el-table {
        height: 100%;
        .el-table__body-wrapper {
          height: calc(100% - 48px);
          overflow: auto;
        }
      }
    }
  }
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355

总结

1. 功能很强，但是也有局限性，适用于瀑布流开发模式
2. 页面调用的这个层级其实还可以再封装一层

感言

其实我很愿意分享一些我做的东西出来 ， 能帮到人即可 ， 但是目前这篇文章只能有空了再更新吧 ，身处目前这个公司让我的心情极其糟糕，现在满脑子都是离职，等有空了再更新吧，代码我会逐步的放出来，先溜