春风项目四线(合箱线、总装线)
hdy
2024-01-19 4b683971b61d7090ab1ec9316f781dcb25bf4683
提交 | 用户 | 时间
fd2207 1 <template>
2   <div>
3     <el-dialog
4       v-bind="$attrs"
5       :close-on-click-modal="false"
6       :modal-append-to-body="false"
7       v-on="$listeners"
8       @open="onOpen"
9       @close="onClose"
10     >
11       <el-row :gutter="0">
12         <el-form
13           ref="elForm"
14           :model="formData"
15           :rules="rules"
16           size="small"
17           label-width="100px"
18         >
19           <el-col :span="24">
20             <el-form-item
21               label="选项名"
22               prop="label"
23             >
24               <el-input
25                 v-model="formData.label"
26                 placeholder="请输入选项名"
27                 clearable
28               />
29             </el-form-item>
30           </el-col>
31           <el-col :span="24">
32             <el-form-item
33               label="选项值"
34               prop="value"
35             >
36               <el-input
37                 v-model="formData.value"
38                 placeholder="请输入选项值"
39                 clearable
40               >
41                 <el-select
42                   slot="append"
43                   v-model="dataType"
44                   :style="{width: '100px'}"
45                 >
46                   <el-option
47                     v-for="(item, index) in dataTypeOptions"
48                     :key="index"
49                     :label="item.label"
50                     :value="item.value"
51                     :disabled="item.disabled"
52                   />
53                 </el-select>
54               </el-input>
55             </el-form-item>
56           </el-col>
57         </el-form>
58       </el-row>
59       <div slot="footer">
60         <el-button
61           type="primary"
62           @click="handleConfirm"
63         >
64           确定
65         </el-button>
66         <el-button @click="close">
67           取消
68         </el-button>
69       </div>
70     </el-dialog>
71   </div>
72 </template>
73 <script>
74 import { isNumberStr } from '@/utils/index'
75
76 export default {
77   components: {},
78   inheritAttrs: false,
79   props: [],
80   data() {
81     return {
82       id: 100,
83       formData: {
84         label: undefined,
85         value: undefined
86       },
87       rules: {
88         label: [
89           {
90             required: true,
91             message: '请输入选项名',
92             trigger: 'blur'
93           }
94         ],
95         value: [
96           {
97             required: true,
98             message: '请输入选项值',
99             trigger: 'blur'
100           }
101         ]
102       },
103       dataType: 'string',
104       dataTypeOptions: [
105         {
106           label: '字符串',
107           value: 'string'
108         },
109         {
110           label: '数字',
111           value: 'number'
112         }
113       ]
114     }
115   },
116   computed: {},
117   watch: {
118     // eslint-disable-next-line func-names
119     'formData.value': function (val) {
120       this.dataType = isNumberStr(val) ? 'number' : 'string'
121     }
122   },
123   created() {},
124   mounted() {},
125   methods: {
126     onOpen() {
127       this.formData = {
128         label: undefined,
129         value: undefined
130       }
131     },
132     onClose() {},
133     close() {
134       this.$emit('update:visible', false)
135     },
136     handleConfirm() {
137       this.$refs.elForm.validate(valid => {
138         if (!valid) return
139         if (this.dataType === 'number') {
140           this.formData.value = parseFloat(this.formData.value)
141         }
142         this.formData.id = this.id++
143         this.$emit('commit', this.formData)
144         this.close()
145       })
146     }
147   }
148 }
149 </script>