Browse Source

fix: 商品规格部分显示问题修正

Sun 3 years ago
parent
commit
02feee57b8
2 changed files with 12 additions and 14 deletions
  1. 1 1
      src/views/business/goods/add.vue
  2. 11 13
      src/views/business/goods/components/spec.vue

+ 1 - 1
src/views/business/goods/add.vue

@@ -65,7 +65,7 @@
         </el-col>
         <el-col :span="23">
           <el-form-item label="采购价格:" prop="cost">
-            <el-input v-model.number="addData.cost" type="number" placeholder="请输入商品采购价格">
+            <el-input v-model="addData.cost" type="number" placeholder="请输入商品采购价格">
               <template slot="append">元</template>
             </el-input>
           </el-form-item>

+ 11 - 13
src/views/business/goods/components/spec.vue

@@ -17,12 +17,13 @@
           </el-col>
         </el-row>
         <el-row>
-          <el-form-item :prop="`specList.${index}.vals`" :rules="{ required: true, message: '请完善规格值', trigger: ['blur', 'change'] }">
+          <el-form-item :prop="`specList.${index}.vals`">
             <el-col :span="24">
               <el-tag v-for="(tag, index) in spec.vals" :key="index" closable style="margin-right: 10px" @close="spec.vals.splice(index, 1)">{{ tag }}</el-tag>
-              <el-input v-if="spec.editVals" v-model="specValTmp" ref="specedit" style="display: inline-block;width: 120px; margin-right: 10px" size="mini" @keyup.enter.native="checkSpecVal(spec, `specList.${index}.vals`)" />
-              <el-button v-if="!spec.edit&&!spec.editVals" type="text" style="margin-left: 10px" icon="el-icon-plus" size="small" @click="addSpec(spec)">添加规格值</el-button>
+              <el-input v-if="spec.editVals" v-model="specValTmp" v-focus style="display: inline-block;width: 120px; margin-right: 10px" size="mini" @keyup.enter.native="checkSpecVal(spec, `specList.${index}.vals`)" />
+              <el-button v-if="!spec.edit&&!spec.editVals" type="text" style="margin-left: 10px" icon="el-icon-plus" size="small" @click="spec.editVals = true">添加规格值</el-button>
               <el-button v-if="spec.editVals" type="text" @click="checkSpecVal(spec, `specList.${index}.vals`)">确认</el-button>
+              <el-button v-if="spec.editVals" type="text" @click="spec.editVals = false;specValTmp = ''">取消</el-button>
             </el-col>
           </el-form-item>
         </el-row>
@@ -121,6 +122,13 @@ export default {
       exchangeRules: [{ required: true, trigger: 'blur' }]
     }
   },
+  directives: {
+    focus: {
+      inserted: function (el) {
+        el.querySelector('input').focus()
+      }
+    }
+  },
   methods: {
     setSkuList(sku) {
       let specObj = {}
@@ -177,16 +185,6 @@ export default {
       spec.editVals = false
       this.$refs.spec.validateField([prop])
     },
-    addSpec(spec) {
-      spec.editVals = true
-      console.log(this.$refs.specedit)
-      setTimeout(() => {
-        console.log(this.$refs.specedit)
-        // if (this.$refs.specedit) {
-        //   this.$refs.edittmp.focus()
-        // }
-      }, 1000);
-    },
     checkSpecName(spec) {
       if (this.specList.filter(item => item.name === spec.name).length > 1) {
         this.$message.warning('规格名已存在')