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
| <template>
| <a-modal
| :title="title"
| :width="800"
| :ok="false"
| :visible="visible"
| :confirm-loading="confirmLoading"
| :okButtonProps="{ props: { disabled: disableSubmit } }"
| @ok="handleSubmit"
| @cancel="handleCancel"
| cancelText="关闭"
| >
| <a-spin :spinning="confirmLoading">
| <a-form :form="form">
| <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="车型">
| <a-input placeholder="请输入车型" v-decorator="['modelName', validatorRules.modelName]"></a-input>
| </a-form-item>
| <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="编码">
| <a-input placeholder="请输入编码" v-decorator="['modelCode', validatorRules.modelCode]" :disabled="condition"></a-input>
| </a-form-item>
| <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="储油量">
| <a-input-number placeholder="请输入储油量" v-decorator="['oilCapacity', validatorRules.oilCapacity]" style="width: 100%"></a-input-number>
| </a-form-item>
| </a-form>
| </a-spin>
| </a-modal>
|
| </template>
|
| <script>
| import pick from 'lodash.pick'
| import { postAction, putAction } from '@tievd/cube-block/lib/api/manage'
| import {validateTxtSpec} from "@/utils/util";
|
| export default {
| name: 'SysCarModelModal',
|
| data() {
| return {
| form: this.$form.createForm(this),
| title: '操作',
| visible: false,
| condition: true,
| confirmLoading: false,
| drawerWidth: 700,
| disableSubmit: false,
| model: {},
| validatorRules: {
| modelName: {
| rules: [{ required: true, message: '车型不能为空' }, {required: true, validator: validateTxtSpec}, {min: 1, max: 100, message: '车型需在1到100个字符之间'}]
| },
| modelCode: {
| rules: [{ required: true, message: '编码不能为空' }]
| },
| oilCapacity: {
| rules: [{ required: true, message: '储油量不能为空' }, { type: 'number', min: 1, max: 9999,message: '只能输入数字且范围1到9999之间' }]
| },
| },
| labelCol: {
| xs: { span: 24 },
| sm: { span: 5 }
| },
| wrapperCol: {
| xs: { span: 24 },
| sm: { span: 16 }
| },
| }
| },
|
| methods: {
| validateTxtSpec,
| // 根据屏幕变化,设置抽屉尺寸
| resetScreenSize() {
| let screenWidth = document.body.clientWidth
| if (screenWidth < 500) {
| this.drawerWidth = screenWidth
| } else {
| this.drawerWidth = 700
| }
| },
| add() {
| this.edit({})
| },
| edit(record) {
| this.resetScreenSize() // 调用此方法,根据屏幕宽度自适应调整抽屉的宽度
| this.form.resetFields()
| // if (record.id !== undefined) {
| // // 新增编辑的特殊操作写在这里
| // }
| this.visible = true
| this.model = Object.assign({}, record)
| this.$nextTick(() => {
| this.form.setFieldsValue(
| pick(this.model, 'modelName', 'modelCode', 'oilCapacity')
| )
| })
| },
| close() {
| this.$emit('close')
| this.visible = false
| this.disableSubmit = false
| this.model = {}
| },
| handleSubmit() {
| // 触发表单验证
| this.form.validateFields(async (err, values) => {
| if (!err) {
| try {
| this.confirmLoading = true
| let formData = Object.assign(this.model, values)
| let res = null
| if (!this.model.id) {
| // 新增
| res = await postAction('/jyz/sysCarModel/add', formData)
| } else {
| // 编辑
| res = await putAction('/jyz/sysCarModel/edit', formData)
| }
| if (res.success) {
| this.$message.success(res.message)
| this.$emit('ok')
| }
| } catch (err) {
| console.log(err)
| } finally {
| this.confirmLoading = false
| this.close()
| }
| }
| })
| },
| handleCancel() {
| this.close()
| },
| }
| }
| </script>
|
| <style scoped lang="less"></style>
|
|
