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
| <template>
| <VolBox v-model="model" title="选择数据" :lazy="true" :height="530" :width="1100" :padding="10">
| <!-- 设置查询条件 -->
| <div style="padding-bottom: 10px">
| <span style="margin-right: 20px">请选择数据</span>
| <el-input placeholder="工单编号" style="width: 200px" v-model="jobID" />
| <el-button type="primary" plain style="margin-left: 10px" icon="Search" @click="search">搜索</el-button>
| </div>
| <!-- vol-table配置的这些属性见VolTable组件api文件 -->
| <vol-table ref="mytable" :loadKey="true" :columns="columns" :pagination="pagination" :pagination-hide="false"
| :max-height="380" :url="url" :index="true" :single="false" :defaultLoadPage="false"
| @loadBefore="loadTableBefore"></vol-table>
| <template #footer>
| <div>
| <el-button plain type="primary" @click="addRow">选择数据</el-button>
| <el-button @click="model = false">关闭</el-button>
| </div>
| </template>
| </VolBox>
| </template>
| <script>
| import VolBox from "@/components/basic/VolBox.vue";
| import VolTable from "@/components/basic/VolTable.vue";
| export default {
| components: {
| VolBox: VolBox,
| VolTable: VolTable,
| },
| data() {
| return {
| model: false,
| jobID: "",
| mes_headID:null,
| //从后台接口加载数据,这里的接口用的框架自带的查询，也可以自定义接口，见App_ExpertModelBody.vue中调用的后台getSelectorDemo方法
| url: "api/dt_mes_detail/getPageData",
| columns: [
| {
| field: "mes_detail_id",
| title: "工单明细ID",
| type: "guid",
| width: 110,
| hidden: true,
| readonly: true,
| require: true,
| align: "left",
| },
| {
| field: "jobID",
| title: "工单编号",
| type: "string",
| width: 110,
| align: "left",
| sort: true,
| },
| {
| field: "heatID",
| title: "炉代号",
| type: "string",
| width: 110,
| align: "left",
| },
| {
| field: "billetID",
| title: "钢坯号",
| type: "int",
| width: 110,
| require: true,
| align: "left",
| },
| {
| field: "SN",
| title: "车轮SN号",
| type: "string",
| width: 110,
| align: "left",
| },
| {
| field: "heatBatchID",
| title: "热处理批次",
| type: "string",
| width: 110,
| align: "left",
| },
| // {
| // field: "mes_headID",
| // title: "工单头表ID",
| // type: "guid",
| // width: 110,
| // align: "left",
| // },
| {
| field: "Status",
| title: "工单状态",
| type: "string",
| width: 110,
| align: "left",
| },
| {
| field: "FinishTime",
| title: "完成时间",
| type: "datetime",
| width: 150,
| align: "left",
| sort: true,
| },
| ],
| pagination: {},
| row: {}, //明细表选择的行
| };
| },
| methods: {
| open(row) {
| // this.row = row;
| this.model = true;
| //打开弹出框时，加载table数据
| this.$nextTick(() => {
| this.$refs.mytable.load();
| });
| },
| search() {
| this.$refs.mytable.load();
| },
| addRow() {
| var rows = this.$refs.mytable.getSelected();
| if (!rows || rows.length == 0) {
| return this.$Message.error("请选择行数据");
| }
|
| //回写明细表行数据，见文档子父组件调用与获取明细表行数据:http://v2.volcore.xyz/document/api
| this.$emit('parentCall', $parent => {
|
| //这里可以写个判断是否已经存在明细表，找到不存在的数据
| // rows = rows.filter(c => {
| // return !$parent.$refs.detail.rowData.some(r => { return r.xx == c.xx })
| // });
|
| //生成新的对象
| rows = rows.map(c => {
| return {
| jobID: c.jobID,
| heatID: c.heatID,
| billetID: c.billetID,
| SN: c.SN,
| heatBatchID:c.heatBatchID
| }
| })
|
| //可以清空明细表数据
| //$parent.$refs.detail.rowData.splice(0);
| //回写到明细表格
| $parent.$refs.detail.rowData.unshift(...rows);
| })
| this.model = false;
| },
| loadTableBefore(params) {
| //查询前，设置查询条件
| params.wheres = [
| { name: "jobID", value: this.jobID, displayType: "like" },
| { name: "mes_headID", value: this.mes_headID, displayType: "like" },
| ];
| return true;
| },
| },
| };
| </script>
|
|
