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
| <script setup>
| import {onMounted, reactive, ref} from "vue";
| import {useI18n} from "vue-i18n";
| import request from "@/utils/request";
| import {ElMessage} from "element-plus";
| import {hiprint} from "vue-plugin-hiprint";
| const { t } = useI18n()
|
| const xGrid = ref()
|
| const gridOptions = reactive({
| height:'100%',
| loading: false,
| border: "full",//表格加边框
| keepSource: true,//保持源数据
| align: 'center',//文字居中
| stripe:true,//斑马纹
| rowConfig: {isCurrent: true, isHover: true,height: 30, useKey: true},//鼠标移动或选择高亮
| id: 'ProjectList',
| scrollX:{enabled: true},
| scrollY:{ enabled: true ,gt:0},//开启虚拟滚动
| showOverflow:true,
| columnConfig: {
| resizable: true,
| useKey: true
| },
| filterConfig: { //筛选配置项
| remote: true
| },
| customConfig: {
| storage: true
| },
| editConfig: {
| trigger: 'click',
| mode: 'row',
| showStatus: true
| },
| columns:[
| {type:'expand',fixed:"left",slots: { content:'content' },width: 50},
| {field: 'id',width: 150, title: 'ID',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
| {field: 'project_no',width: 150, title: '工程号',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
| {field: 'project_name',width: 150, title: '项目名称',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
| {field: 'glass_type',width: 150, title: '膜系',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
| {field: 'glass_thickness',width: 150, title: '厚度',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
| {field: 'type',width: 150, title: '类型',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
| {field: 'state',width: 150, title: '状态',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
| {field: 'glass_total',width: 150, title: t('order.quantity'),filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
| {field: 'glass_total_area',width: 150, title: t('order.grossArea'),filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
| {field: 'process_qty',width: 150, title: '流程数量',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
| {field: 'process_cards',width: 150, title: '流程卡号',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
|
| ],//表头参数
| data:null,//表格数据
| toolbarConfig: {
| buttons: [
| ],
| import: false,
| // export: true,
| // print: true,
| zoom: true,
| custom: true
| },
|
| })
|
| onMounted(async () => {
| getProject();
| })
|
| const getProject = ()=>{
| request.post(`/glassOptimize/getProjectList`).then((res) => {
| if(res.code==200){
| xGrid.value.loadData(res.data.data)
| }else{
| ElMessage.warning(res.msg)
| }
| })
| }
| </script>
|
| <template>
| <div style="width: 100%;height: 100%">
| <h1>工程列表</h1>
| <vxe-grid
| size="small"
| @filter-change="filterChanged"
| height="100%"
| class="mytable-scrollbar"
| ref="xGrid"
| v-bind="gridOptions"
| v-on="gridEvents"
| >
|
| <template #num2_filter="{ column, $panel }">
| <div>
| <div v-for="(option, index) in column.filters" :key="index">
| <vxe-select v-model="option.data" :placeholder="$t('processCard.pleaseSelect')" @change="changeFilterEvent($event, option, $panel)">
| <vxe-option value="0" :label="$t('basicData.unchecked')"></vxe-option>
| <vxe-option value="1" :label="$t('basicData.selected')"></vxe-option>
| </vxe-select>
| </div>
| </div>
| </template>
|
| <template #num1_filter="{ column, $panel }">
| <div>
| <div v-for="(option, index) in column.filters" :key="index">
| <input
|
| type="type"
| v-model="option.data"
| @keyup.enter.native="$panel.confirmFilter()"
| @input="changeFilterEvent($event, option, $panel)"/>
| </div>
| </div>
| </template>
| </vxe-grid>
| </div>
| </template>
|
| <style scoped>
|
| </style>
|
|
