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
| <script setup>
| import {onMounted, reactive, ref, watch} from "vue";
| import {useI18n} from "vue-i18n";
| import request from "@/utils/request";
| import {ElMessage} from "element-plus";
| import {Minus, Plus, Search} from "@element-plus/icons-vue";
| import {changeFilterEvent, filterChanged} from "@/hook";
| const { t } = useI18n()
|
| // 接收父组件传递过来的流程卡号（processId）
| let props = defineProps({
| processId:null,
| patchState:null,
| technologyNumber:null
| });
|
| 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: 'ComputeDetail',
| 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: 'seq',width: 70, title: '序号',filters:[{ data: '' }],},
| {field: 'width',width: 150,title: t('order.width'),filters:[{ data: '' }],slots: { filter: 'num1_filter' },filterMethod:filterChanged},
| {field: 'height',width: 150,title: t('order.height'),filters:[{ data: '' }],slots: { filter: 'num1_filter' },filterMethod:filterChanged},
| {field: 'quantity',width: 150, title: t('order.quantity'),filters:[{ data: '' }],slots: { filter: 'num1_filter' },filterMethod:filterChanged},
| {field: 'building_number',width: 150, title: t('order.buildingNumber'),filters:[{ data: '' }],slots: { filter: 'num1_filter' },filterMethod:filterChanged},
| {field: 'shape',width: 150, title: t('order.shape'),filters:[{ data: '' }],slots: { filter: 'num1_filter' },filterMethod:filterChanged},
| {field: 'area',width: 150, title: t('order.grossArea'),filters:[{ data: '' }],slots: { filter: 'num1_filter' },filterMethod:filterChanged},
| {field: 'icon',width: 150, title: '印标',filters:[{ data: '' }],slots: { filter: 'num1_filter' },filterMethod:filterChanged},
| ],//表头参数
| data:null,//表格数据
| toolbarConfig: {
| buttons: [],
| zoom: true,
| custom: true
| },
| })
|
|
|
|
|
| watch(
| ()=> [props.processId,props.technologyNumber],
| ([newValue, oldValue])=> {
| if (props.processId!=null){
| selectComputeDetail()
|
| }
| });
|
|
|
| const selectComputeDetail = () => {
| if (props.processId!=null || props.processId!=""){
| request.post(`/glassOptimize/selectComputeDetail/${props.processId}/${props.technologyNumber}/${props.patchState}`).then((res) => {
| if(Number(res.code) === 200){
| xGrid.value.loadData(res.data.data)
| }else{
| ElMessage.warning(res.msg)
| }
| })
| }
| }
| </script>
|
| <template>
| <div style="width: 100%;height: 100%">
| <span>流程卡详情</span>
| <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>
| :deep(.vxe-tools--operate){
| height: 20px;
| margin-top: -20px;
| }
| </style>
|
|
