先上效果图
目前支持：多选，文本模糊搜索，日期，时间，筛选列，筛选项展示
三个文件
1.popover.vue //所有列公用一个弹窗
2.index.vue //table 代码主文件
3.filterContent.vue //处理不同类型代码逻辑
代码部分：
1.index.vue
1 <template>
2 <div>
3 <!-- 列筛选 -->
4 <div v-if="showColumnFilter" class="column-filter">
5 <el-popover placement="bottom" trigger="click">
6 <div>
7 <el-checkbox
8 label="全选"
9 v-model="checkAll"
10 @change="onColumnCheckAll"
11 >
12 全选</el-checkbox
13 >
14 <el-checkbox-group v-model="checkedColumns">
15 <el-checkbox
16 v-for="(item, index) in allColumnFilter"
17 :key="'column-filter-' + index + '-' + item"
18 :disabled="requiredColumns.includes(item)"
19 :label="item"
20 >{{ item }}
21 </el-checkbox>
22 </el-checkbox-group>
23 </div>
24 <el-link slot="reference" :underline="false"
25 >筛选项<i class="el-icon-arrow-down el-icon--right"></i
26 ></el-link>
27 </el-popover>
28 <div class="option-con">
29 <slot name="options"></slot>
30 </div>
31 </div>
32
33 <!-- 条件筛选 -->
34 <div v-if="showFilterInfo && filterInfo.length > 0" class="filter-info">
35 <div class="title">筛选条件:</div>
36 <div class="filters">
37 <span class="item" v-for="item in filterInfo" :key="item.prop"
38 >{{ `${item.label}:${item.value}` }}
39 <i @click="onFilterDelete(item)" class="el-icon-circle-close"></i>
40 </span>
41 </div>
42 <div class="options">展开</div>
43 </div>
44
45 <!-- Table列表 -->
46 <div class="table-con">
47 <el-table
48 ref="listTable"
49 v-loading="loading"
50 :data="data"
51 tooltip-effect="dark"
52 :header-cell-style="{
53 textAlign: 'left',
54 background: '#f2f7ff',
55 color: '#32425e',
56 height: '40px',
57 padding: '0',
58 }"
59 :cell-style="{ 'text-align': 'left', width: '100%', padding: '0' }"
60 :row-style="{ height: '30px' }"
61 @sort-change="$emit('sort-change', $event)"
62 @selection-change="$emit('selection-change', $event)"
63 lazy
64 :load="load"
65 :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
66 row-key="id"
67 >
68 <el-table-column
69 v-if="selectable"
70 type="selection"
71 width="55"
72 ></el-table-column>
73 <template v-for="(column, index) in columns">
74 <el-table-column
75 v-if="checkedColumns.includes(column.label)"
76 show-overflow-tooltip
77 :prop="column.prop"
78 :label="column.label"
79 :key="index + '-' + column.name"
80 :width="column.width || 0"
81 :sortable="column.sortable ? 'custom' : false"
82 >
83 <!-- Header -->
84 <template slot="header">
85 <span>{{ column.label }}</span>
86 <span
87 class="img-filter"
88 v-if="column.filterable"
89 @click.stop="(e) => onFilterClick(e, column)"
90 ></span>
91 </template>
92 <template slot-scope="scope">
93 <template v-if="column.link">
94 <template v-if="scope.row[column.prop]=='-'">
95 {{ scope.row[column.prop] }}
96 </template>
97 <el-link
98 v-else
99 :underline="false"
100 @click="column.click(scope.row)"
101 type="primary"
102 >{{ scope.row[column.prop] | formatData(column) }}</el-link
103 >
104 </template>
105 <template v-else>
106 {{ scope.row[column.prop] | formatData(column) }}
107 </template>
108 </template>
109 </el-table-column>
110 </template>
111 <slot></slot>
112 </el-table>
113 </div>
114
115 <!-- 分页信息 -->
116 <div class="page-con" v-if="paging">
117 <el-pagination
118 background
119 @size-change="$emit('size-change', $event)"
120 @current-change="$emit('current-change', $event)"
121 :current-page="page"
122 :page-sizes="pageSizeArr"
123 :page-size="pageSize"
124 layout="total, sizes, prev, pager, next, jumper"
125 :total="total"
126 >
127 </el-pagination>
128 </div>
129
130 <!-- 筛选弹出框 -->
131 <filter-popover ref="popoverDom">
132 <div class="table-pop-filter-con">
133 <div class="body">
134 <!-- 筛选项 -->
135 <filter-content
136 v-if="currentColumn"
137 :data="initFilterValue"
138 :type="currentColumn.type"
139 :options="options"
140 :defaultOptions="defaultOptions"
141 @valueChange="onValueChange"
142 ></filter-content>
143 </div>
144 <div class="footer">
145 <el-button size="mini" @click="resetFilter">重置</el-button>
146 <el-button type="primary" size="mini" @click="confirmFilter"
147 >筛选</el-button
148 >
149 </div>
150 </div>
151 </filter-popover>
152 </div>
153 </template>
154
155 <script>
156 import FilterPopover from "./popover.vue";
157 import FilterContent from "./filterContent.vue";
158
159 const userTypes = ["current-project-user", "project-user", "user"];
160 export default {
161 name: "FilterTable",
162 components: {
163 FilterContent,
164 FilterPopover,
165 },
166 filters: {
167 formatData(val, column) {
168 if (["select"].includes(column.type)) {
169 //val 可能是数组
170 let tmpVal = Array.isArray(val) ? val : [val];
171 // console.log(tmpVal,'tmpVal');
172 let arrayLabel =
173 column.options
174 ?.filter((item) => tmpVal.includes(item.value))
175 .map((item) => item.label) || [];
176
177 if (arrayLabel.length > 0) {
178 return arrayLabel.join(",");
179 } else {
180 return "-";
181 }
182 } else {
183 return val;
184 }
185 },
186 },
187 props: {
188 /**显示所有过滤条件 */
189 showFilterInfo: {
190 type: Boolean,
191 default: false,
192 },
193 /**显示筛选列 */
194 showColumnFilter: {
195 type: Boolean,
196 default: true,
197 },
198 /**是否可以复选 */
199 selectable: {
200 type: Boolean,
201 default: false,
202 },
203 /**加载数据状态 */
204 loading: {
205 type: Boolean,
206 default: false,
207 },
208 /**table 数据 */
209 data: {
210 type: Array,
211 required: true,
212 default: [],
213 },
214 /**table 列 */
215 columns: {
216 type: Array,
217 required: true,
218 default: [],
219 },
220 /**分页信息 */
221 paging: {
222 type: Boolean,
223 default: true,
224 },
225 total: {
226 type: Number,
227 default: undefined,
228 },
229 page: {
230 type: Number,
231 default: 1,
232 },
233 pageSize: {
234 type: Number,
235 default: 10,
236 },
237 pageSizeArr: {
238 type: Array,
239 default: () => {
240 return [10, 20, 30, 40];
241 },
242 },
243 load: {
244 type: Function,
245 default: () => {},
246 },
247 },
248 watch: {
249 checkedColumns() {
250 if (this.columns.length == this.checkedColumns.length) {
251 this.checkAll = true;
252 } else {
253 this.checkAll = false;
254 }
255 },
256 },
257 data() {
258 return {
259 columnsList: this.columns,
260 currentColumn: null,
261 changeValue: null,
262 initFilterValue: null,
263 filterData: {},
264 defaultOptions: null,
265 checkedColumns: [],
266 checkAll: false,
267 };
268 },
269
270 mounted() {
271 this.checkedColumns = this.columns
272 .filter((item) => item.required || !item.hide)
273 .map((item) => item.label);
274 },
275 computed: {
276 allColumnFilter() {
277 let result = [];
278 result = this.columns.map((item) => item.label);
279 return result;
280 },
281
282 requiredColumns() {
283 let result = [];
284 result = this.columns
285 .filter((item) => item.required)
286 .map((item) => item.label);
287 return result;
288 },
289
290 options() {
291 if (this.currentColumn) {
292 return this.currentColumn.options?.map((item) => item.label);
293 } else {
294 return [];
295 }
296 },
297 isSelect() {
298 return ["select"].includes(this.currentColumn.type);
299 },
300 isUserType() {
301 //current-project-user：当前项目下用户，project-user:所有项目用户，user:所有用户
302 return userTypes.includes(this.currentColumn.type);
303 },
304 isDateOrTime() {
305 return ["date", "datetime"].includes(this.currentColumn.type);
306 },
307 filterInfo() {
308 if (!this.showFilterInfo) {
309 return;
310 }
311 let result = []; //{name:'',value:'',prop:''}
312 for (const key in this.filterData) {
313 if (Object.hasOwnProperty.call(this.filterData, key)) {
314 const value = this.filterData[key];
315 const column = this.columns.find((item) => item.prop == key);
316 if (value && column) {
317 let showValue = value;
318
319 if (Array.isArray(value)) {
320 //去options 内匹配
321
322 if (userTypes.includes(column.type)) {
323 const valueMap = value.map((item) => item.label);
324 showValue = valueMap.join("/");
325 } else {
326 const valueMap = column.options
327 .filter((item) => value.includes(item.value))
328 .map((item) => item.label);
329 showValue = valueMap.join("/");
330 }
331 }
332 result.push({
333 label: column.label,
334 prop: column.prop,
335 queryprop: column.queryprop ? column.queryprop : undefined,
336 value: showValue,
337 });
338 }
339 }
340 }
341 return result;
342 },
343 },
344 methods: {
345 onColumnCheckAll(val) {
346 if (val) {
347 this.checkedColumns = this.allColumnFilter.map((item) => item);
348 } else {
349 //去掉必填都显示
350 let defaultCheckedColumns = this.columns
351 .filter((item) => item.required)
352 .map((item) => item.label);
353 this.checkedColumns = defaultCheckedColumns;
354 }
355 },
356 onLinkClick(row) {
357 console.log(row, "click");
358 },
359 onFilterDelete(item) {
360 let filterData = { ...this.filterData };
361 filterData[item.prop] = undefined;
362 if (item.queryprop) {
363 filterData[item.queryprop] = undefined;
364 }
365 this.filterData = filterData;
366 this.$emit("confirmFilter", filterData);
367 },
368 onFilterClick(e, column) {
369 this.currentColumn = column;
370 this.initFilterValue = this.getInitFilterValue();
371 this.$refs.popoverDom.popBy(e.target);
372 },
373 resetFilter() {
374 let filterData = { ...this.filterData };
375 filterData[this.currentColumn.prop] = undefined;
376 if (this.currentColumn.queryprop) {
377 filterData[this.currentColumn.queryprop] = undefined;
378 }
379 this.filterData = filterData;
380 this.defaultOptions = [];
381 this.initFilterValue = undefined;
382 console.log(filterData, "reset filterData");
383 this.$emit("confirmFilter", filterData);
384 this.$refs.popoverDom.close();
385 },
386 onPopoverHide() {},
387 onValueChange(data) {
388 //临时数据
389 this.changeValue = data;
390 },
391 //获取弹出框显示默认值
392 getInitFilterValue() {
393 const value = this.filterData[this.currentColumn.prop];
394 if (this.isUserType) {
395 if (value?.length > 0) {
396 this.defaultOptions = value;
397 return this.defaultOptions.map((item) => item.label);
398 }
399 } else if (this.isSelect) {
400 return this.currentColumn.options
401 ?.filter((option) => value?.includes(option.value))
402 .map((item) => item.label);
403 } else {
404 return value;
405 }
406 },
407 //获取emit 真实值
408 getEmitValue() {
409 if (this.isSelect) {
410 return this.currentColumn.options
411 ?.filter((option) => this.changeValue.includes(option.label))
412 .map((item) => item.value);
413 } else {
414 return this.changeValue;
415 }
416 },
417 //筛选确定
418 confirmFilter() {
419 let emitValue = this.getEmitValue();
420 let filterData = { ...this.filterData };
421 filterData[this.currentColumn.prop] = emitValue; // 如果是数组实际对应的是[value,value]
422 this.filterData = filterData;
423 this.initFilterValue = emitValue;
424 this.$emit("confirmFilter", filterData);
425 this.$refs.popoverDom.close();
426 },
427 },
428 };
429 </script>
430
431 <style scoped lang="scss">
432 .column-filter {
433 padding-bottom: 10px;
434 display: flex;
435 align-items: center;
436 & > .option-con {
437 flex: 1;
438 text-align: right;
439 }
440 }
441 .filter-info {
442 background-color: #dbe1f6;
443 padding: 10px;
444 color: #435ebe;
445 font-size: 14px;
446 display: flex;
447 margin-bottom: 10px;
448 border-radius: 8px;
449 & > .title {
450 flex: 0 0 auto;
451 font-weight: bold;
452 padding-top: 5px;
453 }
454 & > .filters {
455 flex: 1;
456 padding: 0 10px;
457 & > .item {
458 font-weight: normal;
459 margin: 5px;
460 display: inline-block;
461 line-height: 20px;
462
463 & > i {
464 display: inline-block;
465 cursor: pointer;
466 }
467 }
468 }
469 & > .options {
470 flex: 0 0 auto;
471 padding-top: 5px;
472 }
473 }
474 .table-con {
475 & .img-filter {
476 display: inline-block;
477 width: 24px;
478 height: 24px;
479 background: url("~@/assets/img/search.png") no-repeat center center / 15px
480 auto;
481 vertical-align: middle;
482 box-sizing: border-box;
483 cursor: pointer;
484 position: absolute;
485 margin-left: 13px;
486 }
487 & ::v-deep .sort-caret {
488 left: 4px;
489 }
490 & ::v-deep .is-sortable {
491 & .img-filter {
492 height: 34px;
493 }
494 }
495 }
496 .page-con {
497 text-align: right;
498 margin-top: 10px;
499 }
500 .el-checkbox-group {
501 max-height: 600px;
502 overflow: auto;
503 }
504 </style>
View Code
2.filterContent.vue
1 <template>
2 <div>
3 <div v-if="type == 'text'">
4 <el-input
5 v-model="keyword"
6 size="small"
7 prefix-icon="el-input__icon el-icon-search"
8 placeholder="搜索关键词"
9 @change="onValueChange"
10 ></el-input>
11 </div>
12 <div v-if="type == 'select'">
13 <el-input
14 v-model="keyword"
15 size="small"
16 prefix-icon="el-input__icon el-icon-search"
17 type="text"
18 placeholder="搜索关键词"
19 />
20 <div class="select-box">
21 <el-checkbox-group v-model="arrayValue" @change="onValueChange">
22 <el-checkbox
23 v-for="(item, index) in optionList"
24 :key="index"
25 :label="item"
26 >{{ item }}
27 </el-checkbox>
28 </el-checkbox-group>
29 <div class="no-data" v-if="optionList.length == 0">暂无数据</div>
30 </div>
31 </div>
32 <div v-if="['date', 'datetime'].includes(type)">
33 <el-date-picker
34 v-model="arrayValue"
35 @change="onValueChange"
36 :type="type == 'date' ? 'daterange' : 'datetimerange'"
37 :value-format="type == 'date' ? 'yyyy-MM-dd' : 'yyyy-MM-dd HH:mm:ss'"
38 range-separator="至"
39 :start-placeholder="type == 'date' ? '开始日期' : '开始时间'"
40 :end-placeholder="type == 'date' ? '结束日期' : '结束时间'"
41 >
42 </el-date-picker>
43 </div>
44 <div v-if="isUserType">
45 <el-input
46 v-model="keyword"
47 size="small"
48 prefix-icon="el-input__icon el-icon-search"
49 type="text"
50 placeholder="搜索关键词"
51 @input="onUserKeywordChange"
52 oninput="if(value.length>11)value=value.slice(0,100)"
53 />
54 <div v-loading="optionsLoading" class="select-box">
55 <el-checkbox-group v-model="arrayValue" @change="onValueChange">
56 <el-checkbox
57 v-for="(item, index) in optionList"
58 :key="index"
59 :label="item"
60 >{{ item }}
61 </el-checkbox>
62 </el-checkbox-group>
63 <div class="no-data" v-if="optionList.length == 0">暂无数据</div>
64 </div>
65 </div>
66 <div v-if="type == 'progress'">
67 <el-progress
68 :text-inside="true"
69 :stroke-width="15"
70 :percentage="50"
71 status="exception"
72 ></el-progress>
73 </div>
74 </div>
75 </template>
76
77 <script>
78 import { memberApi } from "@/api/projectMember";
79 import { mapGetters } from "vuex";
80
81 export default {
82 name: "filterContent",
83 props: {
84 type: {
85 type: String,
86 default: undefined,
87 require: true,
88 },
89 options: {
90 type: Array,
91 default: () => [],
92 },
93 defaultOptions: {
94 type: Array,
95 default: () => [],
96 },
97 data: {
98 type: String | Array,
99 default: null,
100 },
101 },
102 data() {
103 return {
104 keyword: "",
105 arrayValue: [],
106 cacheUsers: [],
107 userList: [],
108 allUsers: [],
109 loading: false,
110 optionsLoading: false,
111 };
112 },
113 mounted() {},
114 watch: {
115 data: {
116 immediate: true,
117 handler() {
118 if (this.isArrayValue) {
119 this.keyword = "";
120 this.arrayValue = this.data || [];
121 } else {
122 this.keyword = this.data;
123 }
124 },
125 },
126 type: {
127 immediate: true,
128 handler() {
129 if (this.isUserType) {
130 this.getUser("GW");
131 }
132 },
133 },
134 defaultOptions: {
135 immediate: true,
136 deep: true,
137 handler(val) {
138 if (this.isUserType) {
139 this.cacheUsers = val || [];
140 }
141 },
142 },
143 },
144 computed: {
145 ...mapGetters(["currentProject"]),
146 isArrayValue() {
147 return (
148 ["select", "date", "datetime"].includes(this.type) || this.isUserType
149 );
150 },
151 isUserType() {
152 //current-project-user：当前项目下用户，project-user:所有项目用户，user:所有用户
153 return ["current-project-user", "project-user", "user"].includes(
154 this.type
155 );
156 },
157 optionList() {
158 let result = [];
159 if (this.isUserType) {
160 let userList = [];
161 this.cacheUsers.forEach((user) => {
162 if (!userList.some((obj) => obj.value == user.value)) {
163 userList.push(user);
164 }
165 });
166 this.userList.forEach((user) => {
167 if (!userList.some((obj) => obj.value == user.value)) {
168 userList.push({ label: user.label, value: user.value });
169 }
170 });
171 this.allUsers = userList;
172 result = userList.map((item) => item.label);
173 } else {
174 result = this.options.filter(
175 (item) => item.toLowerCase().indexOf(this.keyword.toLowerCase()) > -1
176 );
177 }
178 return result;
179 },
180 },
181 methods: {
182 onUserKeywordChange() {
183 this.getUser(this.keyword);
184 },
185 getUser(val) {
186 let keyword =
187 val !== null && val !== "" && val !== undefined ? val : "GW";
188
189 this.optionsLoading = true;
190 let queryMethod = memberApi.findUser;
191 let queryData = keyword;
192 if (this.type == "current-project-user") {
193 //判断是否当前项目有值
194 if (this.currentProject) {
195 queryData = {
196 keyword: keyword,
197 pageNo: 1,
198 pageSize: 9999,
199 projectIds: ["43400"],
200 };
201 queryMethod = memberApi.getMemberList;
202 } else {
203 queryMethod = memberApi.findUser;
204 }
205 }
206 if (this.type == "project-user") {
207 queryMethod = memberApi.findUser;
208 }
209 if (this.type == "user") {
210 queryMethod = memberApi.searchEmployee;
211 }
212
213 queryMethod(queryData)
214 .then((res) => {
215 let list = res.data.list || res.data;
216 this.userList = list?.map((item) => {
217 return {
218 label: `${item.nickName}(${item.userName})`,
219 value: item.userName,
220 };
221 });
222 })
223 .finally(() => {
224 this.optionsLoading = false;
225 });
226 },
227 onValueChange() {
228 let result = this.keyword;
229 if (this.isArrayValue) {
230 //加入缓存用户
231 //如果选择框内有去掉的，则从缓存列表里去掉
232 if (this.isUserType) {
233 let cacheUsers = [];
234 this.cacheUsers.forEach((item) => {
235 if (this.arrayValue.some((obj) => obj == item.label)) {
236 cacheUsers.push({ ...item });
237 }
238 });
239
240 let selectCacheUsers = this.userList.filter((item) =>
241 this.arrayValue.includes(item.label)
242 );
243 selectCacheUsers.forEach((item) => {
244 if (!cacheUsers.some((user) => user.label == item.label)) {
245 cacheUsers.push({ ...item });
246 }
247 });
248 this.cacheUsers = cacheUsers;
249 //最终值
250 result = cacheUsers.map((item) => item);
251 } else {
252 result = this.arrayValue;
253 }
254 }
255 this.$emit("valueChange", result);
256 },
257 },
258 };
259 </script>
260
261 <style lang="scss" scoped>
262 .select-box {
263 border: 1px solid #dcdfe6;
264 border-radius: 4px;
265 padding: 10px;
266 margin-top: 10px;
267 max-height: 280px;
268 overflow: auto;
269 max-width: 400px;
270 & .el-checkbox {
271 display: block;
272 margin-top: 5px;
273 }
274 }
275 .no-data {
276 text-align: "center";
277 color: "#909399";
278 }
279 </style>>
View Code
3.popover.vue
1 <script>
2 /**
3 * 重写Popover 解决循环导致生成多个popover实例
4 */
5 import { Popover } from "element-ui";
6 export default {
7 name: "filterPopover",
8 extends: Popover,
9 methods: {
10 popBy(el) {
11 this.close();
12 this.doDestroy(true);
13 this.$nextTick(() => {
14 this.referenceElm = this.$refs.reference = el;
15 this.showPopper = true;
16 this.$emit("input", true);
17 });
18 },
19 close() {
20 this.showPopper = false;
21 this.$emit("input", false);
22 },
23 },
24 };
25 </script>
View Code
页面调用代码
1 <template>
2 <div class="body-con">
3 <filter-table
4 :show-filter-info="true"
5 :loading="loading"
6 :data="dataList"
7 :columns="columnList"
8 :paging="true"
9 :total="total"
10 :page="filterModel.pageNo"
11 :page-size="filterModel.size"
12 @confirmFilter="onConfirmFilter"
13 @sort-change="onSortChange"
14 @current-change="onCurrentChange"
15 @size-change="onSizeChange"
16 @load-tree = "load"
17 >
18 <el-table-column label="操作" width="160px">
19 <template slot-scope="scope">
20 <el-link class="option-link" :underline="false" size="mini"
21 >完成{{ scope.row.No }}
22 </el-link>
23 <el-link class="option-link" :underline="false" size="mini"
24 >编辑{{ scope.row.No }}
25 </el-link>
26 <el-link class="option-link" :underline="false" size="mini"
27 >分解{{ scope.row.No }}
28 </el-link>
29 <el-link class="option-link" :underline="false" size="mini"
30 >删除{{ scope.row.No }}
31 </el-link>
32 </template>
33 </el-table-column>
34 </filter-table>
35 </div>
36 </template>
37
38 <script>
39 import FilterTable from "@/components/FilterTable/index copy.vue";
40 import { taskApi } from "@/api/pmTask";
41 import { mapGetters } from "vuex";
42 import { load } from "jszip/lib/object";
43 const columnList = [
44 // { label: "序号", prop: "sortNo", type: "text" },
45 {
46 label: "编号",
47 prop: "missionNo",
48 type: "text",
49 sortable: true,
50 filterable: true,
51 },
52 {
53 label: "标题",
54 prop: "missionTitle",
55 type: "text",
56 sortable: true,
57 filterable: true,
58 },
59 {
60 label: "类型",
61 prop: "type",
62 type: "select",
63 sortable: true,
64 filterable: true,
65 options: [
66 { label: "A", value: 1 },
67 { label: "B", value: 2 },
68 ],
69 },
70 {
71 label: "状态",
72 prop: "status",
73 type: "select",
74 sortable: true,
75 filterable: true,
76 options: [
77 { label: "已完成", value: "1" },
78 { label: "未完成", value: "2" }
79 ],
80 },
81 {
82 label: "负责人",
83 prop: "dutyPeopleInfo",
84 queryprop: "dutyPeopleNos",
85 type: "current-project-user",
86 width: "140px",
87 sortable: true,
88 filterable: true,
89 options: [],
90 },
91 {
92 label: "发布人",
93 prop: "publisherInfo",
94 queryprop: "publisherNos",
95 type: "project-user",
96 width: "140px",
97 sortable: true,
98 filterable: true,
99 options: [],
100 },
101 {
102 label: "计划完成时间",
103 prop: "planEndDate",
104 type: "date",
105 width: "150px",
106 sortable: true,
107 filterable: true,
108 },
109
110 {
111 label: "实际完成时间",
112 prop: "dateEnd",
113 type: "date",
114 width: "150px",
115 sortable: true,
116 filterable: true,
117 },
118
119 {
120 label: "进度",
121 prop: "process",
122 type: "text",
123 },
124
125 {
126 label: "负责人",
127 prop: "publisherNo",
128 type: "user",
129 sortable: true,
130 filterable: true,
131 },
132 ];
133
134 export default {
135 name: "pmTask",
136 components: {
137 FilterTable,
138 },
139 data() {
140 return {
141 loading: false,
142 dataList: [],
143 total: undefined,
144 columnList: columnList,
145 searchData: {
146 publisherNos: undefined,
147 dutyPeopleNos: undefined,
148 },
149 filterModel: {
150 missionNo: undefined,
151 missionTitle: undefined,
152 types: undefined,
153 queryType: 1,
154 // types:[],
155 pageNo: 1,
156 pageSize: 10,
157 sort: undefined,
158 },
159 };
160 },
161 computed: {
162 ...mapGetters(["currentProject"]),
163 },
164 mounted() {
165 //模拟异步数据
166
167 // this.getProjectList();
168 // this.getTypeList();
169 // this.getStateList();
170
171 this.getList();
172 },
173 methods: {
174 projectClick(row) {
175 console.log(row, "可以点击列");
176 },
177 getProjectList() {
178 getAlmProjectList().then((res) => {
179 const projectArray = res.data.map((item) => {
180 return {
181 value: item.Project,
182 label: item.Project,
183 };
184 });
185 const projectColumn = this.columnList.find(
186 (item) => item.prop == "Project"
187 );
188 projectColumn.options = projectArray;
189 projectColumn.click = this.projectClick;
190 });
191 },
192
193 getList() {
194 this.loading = true;
195 const searchData = this.searchData;
196 this.filterModel.missionNo = searchData.missionNo || undefined;
197 this.filterModel.missionTitle = searchData.missionTitle || undefined;
198 this.filterModel.types = searchData.type || undefined;
199 this.filterModel.status = searchData.state || undefined;
200 this.filterModel.dutyPeopleNos = searchData.dutyPeopleNos || undefined;
201 this.filterModel.publisherNos = searchData.publisherNos || undefined;
202
203 this.filterModel.planEndDate = searchData.planEndDate || undefined;
204 this.filterModel.dateEnd = searchData.dateEnd || undefined;
205
206 // this.filterModel.projectIds = ['14707'].join(',') || undefined;
207
208 taskApi
209 .getTaskList(this.filterModel)
210 .then((res) => {
211 console.log(res, "code");
212 if (res.code == 200) {
213 let list = res.data.list;
214 list?.forEach((item) => {
215 if(item.hasChildren){
216 item.children = []
217 }
218 item.dutyPeopleInfo = item.liables
219 .map((item) => `${item.name}(${item.jobNo})`)
220 .join(",");
221 item.publisherInfo = `${item.publisher}(${item.publisherNo})`;
222 });
223 console.log(list);
224 this.dataList = list;
225 this.total = res.data.total;
226 // this.filterModel.pageNo = res.data.page;
227 }
228 })
229 .finally((_) => {
230 this.loading = false;
231 });
232 },
233
234 onCurrentChange(val) {
235 this.filterModel.pageNo = val;
236 this.getList();
237 },
238 onSizeChange(val) {
239 this.filterModel.size = val;
240 this.getList();
241 },
242 onSortChange(column) {
243 console.log(column, "排序变化");
244 if (column.order == null) {
245 this.filterModel.sort = null;
246 } else {
247 this.filterModel.sort = {};
248 this.filterModel.sort.prop = column.prop;
249 this.filterModel.sort.order =
250 column.order === "ascending" ? true : false;
251 }
252
253 this.getList();
254 },
255 onConfirmFilter(data) {
256 console.log(data, "回调筛选条件");
257 //处理各种人的数据
258
259 //处理需要转义的人员属性名
260 this.columnList.filter((column) => {
261 if (
262 ["user", "project-user", "current-project-user"].includes(
263 column.type
264 ) &&
265 column.queryprop
266 ) {
267 if (data[column.prop]) {
268 data[column.queryprop] = data[column.prop].map(
269 (item) => item.value
270 );
271 }
272 }
273 });
274
275 this.searchData = data;
276 console.log({...data}, "回调处理后条件");
277 this.filterModel.pageNo = 1;
278 this.getList();
279 },
280 load(tree,treeNode,resolve){
281 console.log(tree);
282 taskApi.getTaskChildrenById(tree.id).then((result) => {
283 console.log(result);
284 resolve(result.data);
285 }).catch((err) => {
286
287 });
288 }
289 },
290 };
291 </script>
View Code
标签：el,封装,column,true,value,label,item,table,type From： https://www.cnblogs.com/cuiguoliang/p/17853242.html