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
| <template>
| <j-modal
| :title="title"
| :width="width"
| :visible="visible"
| switchFullscreen
| @ok="handleOk"
| :okButtonProps="{ class:{'jee-hidden': disableSubmit} }"
| @cancel="handleCancel"
| cancelText="关闭">
|
| <j-vxe-table
| ref="editableDetailTable"
| :rowNumber="true"
| :rowSelection="false"
| :bordered="false"
| :alwaysEdit="true"
| :toolbar="false"
| keep-source
| :height="300"
| :loading="detail.loading"
| :dataSource="detail.dataSource"
| :columns="equipmentColumns"
| style="margin-top: 8px;" />
|
| </j-modal>
|
| </template>
|
| <script>
|
| import { JVxeTableModelMixin } from '@/mixins/JVxeTableModelMixin.js'
| import { JVXETypes } from '@/components/jeecg/JVxeTable'
| import { getAction, postAction } from '../../../../api/manage'
|
| export default {
| name: 'EamMajorPartialRepairDetailModal',
| mixins: [JVxeTableModelMixin],
| data() {
| return {
| title: '',
| width: 1200,
| visible: false,
| disableSubmit: false,
| equipmentOptions: [],
| detail: {
| loading: false,
| dataSource: []
| },
| url: {
| queryDetailList: '/eam/eamMajorPartialRepairDetail/list',
| fillResult: '/eam/eamMajorPartialRepair/fillResult'
| }
| }
| },
| computed: {
| equipmentColumns() {
| return [
| {
| title: '设备',
| key: 'equipmentId_dictText',
| type: JVXETypes.normal,
| width: '25%',
| align: 'center'
| },
| {
| title: '单价',
| key: 'unitPrice',
| type: JVXETypes.normal,
| width: '10%',
| align: 'center'
| },
| {
| title: '维修结果',
| key: 'repairResult',
| type: JVXETypes.textarea,
| width: '30%',
| align: 'center',
| validateRules: [{ required: true, message: '维修结果不能为空！' }]
| },
| {
| title: '维修描述',
| key: 'repairDescription',
| type: JVXETypes.textarea,
| width: '30%',
| align: 'center',
| validateRules: [{ required: true, message: '维修描述不能为空！' }]
| }
| ];
| }
| },
| methods: {
| open(record) {
| this.visible = true
| getAction(this.url.queryDetailList, { repairId: record.id }).then((res) => {
| if (res.success) {
| if (res.result.total) {
| this.detail.dataSource = res.result.records
| }
| }
| })
| },
| close() {
| this.$emit('close')
| this.visible = false
| },
| async handleOk() {
| // 👇 触发表格校验
| const errMap = await this.$refs.editableDetailTable.validateTable();
|
| if (errMap) {
| return;
| }
|
| // 校验通过，获取表格数据
| const tableData = this.$refs.editableDetailTable.getTableData();
|
| postAction(this.url.fillResult, tableData).then((res) => {
| if (res.success) {
| this.$message.success(res.message)
| // 👇 提交成功后关闭弹窗
| this.submitCallback();
| } else {
| this.$message.warning(res.message)
| }
| })
| },
| submitCallback() {
| this.$emit('ok')
| this.visible = false
| },
| handleCancel() {
| this.close()
| }
| }
| }
| </script>
|
|
