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
| <template>
| <div class="productionRreport-container">
| <div class="filter-card">
| <CommonSearch :show-add="false" :amount-view="false" placeholder="请输入关键词" @searchClick="onFilterSearch">
| <template slot="leftButton">
| <el-button size="small" type="primary" @click="exportBtnClick">导出</el-button>
| </template>
| </CommonSearch>
| </div>
| <div class="body-card">
| <div class="list-view">
| <TableCommonView ref="tableListRef" v-loading="loading" :table-list="tableList" @selTableCol="selTableCol">
| </TableCommonView>
| </div>
| <!-- <div class="btn-pager">
| <PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" />
| </div> -->
| </div>
| </div>
| </template>
|
| <script>
| import pageMixin from "@/components/makepager/pager/mixin/pageMixin"
| export default {
| name: "productionReport",
| props: {},
| components: {},
| mixins: [pageMixin],
| computed: {},
| data() {
| return {
| loading: false,
| tableList: {},
| tableColumn: [
| { label: "车间", prop: "name", default: true },
| { label: "机组", prop: "member_name" },
| { label: "Ⅱ度", prop: "client_level" },
| { label: "清洁", prop: "next_visit_time" },
| { label: "洁净", prop: "detail_address" },
| { label: "最大纤度", prop: "client_status" },
| { label: "最小纤度", prop: "contact_name" },
| { label: "平均纤度", prop: "contact_phone" },
| { label: "公量纤度", prop: "client_level" },
| { label: "最大偏差", prop: "next_visit_time" },
| { label: "纤度偏差", prop: "detail_address" },
| { label: "日产量", prop: "client_status" },
| { label: "等级", prop: "contact_name" },
| { label: "综合等级", prop: "contact_phone" }
| ],
| showCol: [
| "车间",
| "机组",
| "Ⅱ度",
| "清洁",
| "洁净",
| "最大纤度",
| "最小纤度",
| "平均纤度",
| "公量纤度",
| "最大偏差",
| "纤度偏差",
| "日产量",
| "等级",
| "综合等级"
| ]
| }
| },
| created() {
| this.setTable()
| },
| methods: {
| setTable() {
| this.tableList = {
| selectIndex: true,
| tableInfomation: [],
| allcol: [],
| showcol: this.showCol,
| tableColumn: this.setColumnVisible(this.showCol)
| }
| this.tableList.allcol = this.tableList.tableColumn.filter((ele) => !ele.default).map((ele) => ele.label)
| this.searchOptions = []
| for (let i = 0; i < this.tableList.tableColumn.length; i++) {
| const label = this.tableList.tableColumn[i].label
| const value = this.tableList.tableColumn[i].prop
| this.searchOptions.push({ value: value, label: label })
| }
| },
| setColumnVisible(showCol) {
| return this.tableColumn.map((ele) => {
| return {
| ...ele,
| isShowColumn: showCol.includes(ele.label)
| }
| })
| },
| selTableCol(val) {
| this.showcol = val
| this.tableList.tableColumn = this.setColumnVisible(val)
| },
| // 搜索
| onFilterSearch(searchText) {
| console.log(searchText)
| },
| // 导出
| exportBtnClick() {}
| }
| }
| </script>
|
| <!-- Add "scoped" attribute to limit CSS to this component only -->
| <style lang="scss" scoped>
| .productionRreport-container {
| height: 100%;
| .filter-card {
| margin: 20px 30px;
| height: 80px;
| display: flex;
| align-items: center;
| padding: 0 20px 0 20px;
| border-radius: 12px;
| background-color: #fff;
| }
| .body-card {
| margin: 0 30px;
| background-color: #fff;
| padding: 10px 15px;
| height: calc(100% - 180px);
| }
| }
| </style>
|
|
