up

src/components/Options/index.vue

@@ -1,15 +1,11 @@
 <!-- 档位配置 插件 -->
 <template>
   <el-table-column :label="`选项${index + 1}：`" v-for="(item, index) in posNum" :key="item" class="m-t-20"
-    :prop="`gearValue[${index}]`" :rules="ruleValidate.gearValue" align="center" prop="options">
+    :prop="`gearValue[${index}]`" :rules="ruleValidate" align="center" prop="options">
-    <el-input
+    <el-input :min="0" :formatter="value => `${value}`.replace(/([0-9]+\.[0-9]{2})[0-9]*/, '$1')" placeholder="请填写"
-      :min="0"
+      :disabled="isSee" class="w-200" v-model="form.value.options[index]" />
-      :formatter="value => `${value}`.replace(/([0-9]+\.[0-9]{2})[0-9]*/, '$1')"
+    <v-image v-if="!isSee && posNum < maxPosLen" :src="addImg" class="img-btn" @click="changePos(index, 'add')" />
-      placeholder="请填写" :disabled="isSee" class="w-200"
+    <v-image v-if="!isSee && posNum > 1" :src="delImg" @click="changePos(index, 'del')" class="img-btn" />
-      v-model="form.value.options[index]"
-    />
-    <v-image v-if="!isSee&&posNum<maxPosLen" :src="addImg" class="img-btn" @click="changePos(index,'add')"/>
-    <v-image v-if="!isSee&&posNum>1" :src="delImg" @click="changePos(index,'del')" class="img-btn"/>
   </el-table-column>
 </template>
 
@@ -18,114 +14,112 @@
 import addImg from '@/assets/images/add-icon.png'
 import delImg from '@/assets/images/del-icon.png'
 export default {
-    props: {
+  props: {
-        enumData: {
+    enumData: {
-            type: Object,
+      type: Object,
-            default: null
+      default: null
-        },
-        isSee: {
-            type: Boolean,
-            default: false
-        },
-        // label宽度
-        configWidth: {
-            type: Number,
-            default: 120
-        }
     },
-    data() {
+    isSee: {
-        return {
+      type: Boolean,
-            addImg: addImg,
+      default: false
-            delImg: delImg,
-            maxPosLen: 20, // 最多20档
-            posNum: 1, // 当前档位数量
-            formData: {
-                gearValue: [null] // null:为了不让显示默认1
-            },
-            ruleValidate: {
-                gearValue: [
-                    { required: true, message: '请填写档位值' }
-                ]
-            }
-        }
     },
-
+    // label宽度
-    methods: {
+    configWidth: {
-        // 提交的校验
+      type: Number,
-        handleValidate() {
+      default: 120
-            return new Promise((resolve, reject) => {
-                this.$refs.formPosition.validate((valid) => {
-                    if (valid) {
-                        // 数据转换为接口所需要的形式
-                        let obj = {};
-                        if (this.formData.gearValue) {
-                            if (this.formData.gearValue.length[0] === null) {
-                                obj.gearValue = null;
-                            } else {
-                                obj.gearValue = this.formData.gearValue.join();
-                            }
-                        } else {
-                            obj.gearValue = null;
-                        }
-                        resolve(obj)
-                    }
-                })
-            })
-        },
-
-        // 增删档位
-        changePos(idx, actType) {
-            if (actType === 'add') {
-                if (this.formData.gearValue.length < 20) {
-                    this.posNum++;
-                    this.formData.gearValue.splice(idx + 1, 0, null);
-                }
-            } else {
-                this.formData.gearValue.splice(idx, 1);
-                this.posNum--;
-            }
-        },
-
-        // 初始化(在父组件中调用)
-        initData(obj) {
-            if (obj.gearValue) {
-                if (obj.gearValue instanceof Array) {
-                    this.formData.gearValue = obj.gearValue;
-                } else if (typeof obj.gearValue === 'string') {
-                    let arr = [];
-                    if (obj.gearValue.indexOf(';') !== -1) {
-                        // 多个-接口传回来的（接口返回的是;分割）
-                        arr = obj.gearValue.split(';');
-                    } else {
-                        // 多个-正在编辑中 / 只有一个
-                        arr = obj.gearValue.split(',');
-                    }
-                    this.formData.gearValue = arr.map(item => {
-                        return Number(item);
-                    })
-                }
-            } else {
-                this.formData.gearValue = [null];
-            }
-            this.posNum = this.formData.gearValue.length;
-        },
-
-        // 重置表单(在父组件中调用)
-        resetForm() {
-            this.$refs.formPosition.resetFields();
-            this.formData.gearValue = [null];
-        }
     }
+  },
+  data() {
+    return {
+      addImg: addImg,
+      delImg: delImg,
+      maxPosLen: 20, // 最多20档
+      posNum: 1, // 当前档位数量
+      formData: {
+        gearValue: [null] // null:为了不让显示默认1
+      },
+      ruleValidate: {
+        required: true, message: '请填写选项'
+      }
+    }
+  },
+
+  methods: {
+    // 提交的校验
+    handleValidate() {
+      return new Promise((resolve, reject) => {
+        this.$refs.formPosition.validate((valid) => {
+          if (valid) {
+            // 数据转换为接口所需要的形式
+            let obj = {};
+            if (this.formData.gearValue) {
+              if (this.formData.gearValue.length[0] === null) {
+                obj.gearValue = null;
+              } else {
+                obj.gearValue = this.formData.gearValue.join();
+              }
+            } else {
+              obj.gearValue = null;
+            }
+            resolve(obj)
+          }
+        })
+      })
+    },
+
+    // 增删档位
+    changePos(idx, actType) {
+      if (actType === 'add') {
+        if (this.formData.gearValue.length < 20) {
+          this.posNum++;
+          this.formData.gearValue.splice(idx + 1, 0, null);
+        }
+      } else {
+        this.formData.gearValue.splice(idx, 1);
+        this.posNum--;
+      }
+    },
+
+    // 初始化(在父组件中调用)
+    initData(obj) {
+      if (obj.gearValue) {
+        if (obj.gearValue instanceof Array) {
+          this.formData.gearValue = obj.gearValue;
+        } else if (typeof obj.gearValue === 'string') {
+          let arr = [];
+          if (obj.gearValue.indexOf(';') !== -1) {
+            // 多个-接口传回来的（接口返回的是;分割）
+            arr = obj.gearValue.split(';');
+          } else {
+            // 多个-正在编辑中 / 只有一个
+            arr = obj.gearValue.split(',');
+          }
+          this.formData.gearValue = arr.map(item => {
+            return Number(item);
+          })
+        }
+      } else {
+        this.formData.gearValue = [null];
+      }
+      this.posNum = this.formData.gearValue.length;
+    },
+
+    // 重置表单(在父组件中调用)
+    resetForm() {
+      this.$refs.formPosition.resetFields();
+      this.formData.gearValue = [null];
+    }
+  }
 }
 </script>
 
 <style scoped>
 .img-btn {
-    display: inline-block;
+  display: inline-block;
-    vertical-align: middle;
+  vertical-align: middle;
-    margin-left: 10px;
+  margin-left: 10px;
-    width: 20px;
+  width: 20px;
-    cursor: pointer;
+  cursor: pointer;
 }
 </style>