修复bug

1

src/views/pms/product/components/ProductAttrDetail.vue

@@ -81,7 +81,7 @@
         </el-card>
         <el-table
           style="width: 100%; margin-top: 20px"
-          :data="value.skuStockList"
+          :data="skuStockList"
           border
         >
           <el-table-column
@@ -329,16 +329,28 @@ export default {
         }
       },
     },
+    skuStockList() {
+
+
+      // if (this.value&&this.value.skuStockList[0]&&this.value.skuStockList[0].productId){
+      //   console.log('调用')
+
+      // };
+
+      return this.value.skuStockList;
+    },
   },
-  created() {
-    this.getProductAttrCateList();
+  created() {},
+  mounted() {
+    console.log(this.value.skuStockList)
+    this.handleEditCreated();
   },
   watch: {
     productId: function (newValue) {
-      if (!this.isEdit) return;
-      if (this.hasEditCreated) return;
-      if (newValue === undefined || newValue == null || newValue === 0) return;
-      this.handleEditCreated();
+      // if (!this.isEdit) return;
+        if (this.hasEditCreated) return;
+        if(!newValue) return
+        this.handleEditCreated();
     },
   },
   methods: {
@@ -363,6 +375,7 @@ export default {
       });
     },
     getProductAttrList(type, cid) {
+      console.log("getProductAttrList", "调用");
       let param = { pageNum: 1, pageSize: 100, type: type };
       fetchProductAttrList(cid, param).then((response) => {
         let list = response.data.list;
@@ -721,14 +734,13 @@ export default {
       this.$emit("prevStep");
     },
     handleNext() {
-      console.log(this.skuStockList, this.value.skuStockList);
       if (
         !this.value.skuStockList ||
         this.value.skuStockList.length <= 0 ||
-        !this.value.skuStockList[0].price ||
-        !this.value.skuStockList[0].stock ||
-        !this.value.skuStockList[0].lowStock ||
-        !this.value.skuStockList[0].skuCode
+        !(this.value.skuStockList[0].price+'') ||
+        !(this.value.skuStockList[0].stock+'' )||
+        !(this.value.skuStockList[0].lowStock+'') ||
+        !(this.value.skuStockList[0].skuCode+'')
       ) {
         this.$message.error("请编辑商品规格");
         return;

src/views/pms/product/components/ProductDetail.vue

@@ -15,7 +15,7 @@
     >
     </product-info-detail>
     <product-sale-detail
-      v-show="showStatus[1]"
+      v-if="showStatus[1]"
       v-model="productParam"
       :is-edit="isEdit"
       @nextStep="nextStep"
@@ -23,7 +23,7 @@
     >
     </product-sale-detail>
     <product-attr-detail
-      v-show="showStatus[2]"
+      v-if="showStatus[2]"
       v-model="productParam"
       :is-edit="isEdit"
       @nextStep="nextStep"
@@ -31,7 +31,7 @@
     >
     </product-attr-detail>
     <product-relation-detail
-      v-show="showStatus[3]"
+      v-if="showStatus[3]"
       v-model="productParam"
       :is-edit="isEdit"
       @prevStep="prevStep"

src/views/pms/product/components/ProductInfoDetail.vue

@@ -1,11 +1,19 @@
 <template>
   <div style="margin-top: 50px">
-    <el-form :model="value" :rules="rules" ref="productInfoForm" label-width="120px" style="width: 600px" size="small">
+    <el-form
+      :model="value"
+      :rules="rules"
+      ref="productInfoForm"
+      label-width="120px"
+      style="width: 600px"
+      size="small"
+    >
       <el-form-item label="商品分类：" prop="productCategoryId">
         <el-cascader
-        :disabled="!isEdit"
+          :disabled="!isEdit"
           v-model="selectProductCateValue"
-          :options="productCateOptions">
+          :options="productCateOptions"
+        >
         </el-cascader>
       </el-form-item>
       <el-form-item label="商品名称：" prop="name">
@@ -19,12 +27,14 @@
           v-model="value.brandId"
           @change="handleBrandChange"
           :disabled="!isEdit"
-          placeholder="请选择品牌">
+          placeholder="请选择品牌"
+        >
           <el-option
             v-for="item in brandOptions"
             :key="item.value"
             :label="item.label"
-            :value="item.value">
+            :value="item.value"
+          >
           </el-option>
         </el-select>
       </el-form-item>
@@ -34,173 +44,257 @@
           v-model="value.description"
           :disabled="!isEdit"
           type="textarea"
-          placeholder="请输入内容"></el-input>
+          placeholder="请输入内容"
+        ></el-input>
       </el-form-item>
       <el-form-item label="商品货号：">
         <el-input v-model="value.productSn" :disabled="!isEdit"></el-input>
       </el-form-item>
       <el-form-item label="商品售价：">
-        <el-input v-model="value.price" :disabled="!isEdit"></el-input>
+        <el-input-number
+          v-model="value.price"
+          :disabled="!isEdit"
+          autocomplete="off"
+          controls-position="right"
+          class="number-input"
+          type="number"
+        ></el-input-number>
       </el-form-item>
       <el-form-item label="市场价：">
-        <el-input v-model="value.originalPrice" :disabled="!isEdit"></el-input>
+        <el-input-number
+          v-model="value.originalPrice"
+          type="number"
+          autocomplete="off"
+          controls-position="right"
+          class="number-input"
+          :disabled="!isEdit"
+        ></el-input-number>
       </el-form-item>
       <el-form-item label="商品库存：">
-        <el-input v-model="value.stock" :disabled="!isEdit"></el-input>
+        <el-input-number
+          v-model="value.stock"
+          type="number"
+          autocomplete="off"
+          controls-position="right"
+          class="number-input"
+          :disabled="!isEdit"
+        ></el-input-number>
       </el-form-item>
       <el-form-item label="计量单位：">
-        <el-input v-model="value.unit" :disabled="!isEdit"></el-input>
+        <el-input-number
+          v-model="value.unit"
+          :disabled="!isEdit"
+        ></el-input-number>
       </el-form-item>
       <el-form-item label="商品重量：">
-        <el-input v-model="value.weight" style="width: 300px" :disabled="!isEdit"></el-input>
+        <el-input-number
+          v-model="value.weight"
+          type="number"
+          autocomplete="off"
+          controls-position="right"
+          class="number-input"
+          style="width: 300px"
+          :disabled="!isEdit"
+        ></el-input-number>
         <span style="margin-left: 20px">克</span>
       </el-form-item>
       <el-form-item label="排序">
-        <el-input v-model="value.sort" :disabled="!isEdit"></el-input>
+        <el-input-number
+          v-model="value.sort"
+          :disabled="!isEdit"
+        ></el-input-number>
       </el-form-item>
       <el-form-item style="text-align: center">
-        <el-button type="primary" size="medium" @click="handleNext('productInfoForm')">下一步，填写商品促销</el-button>
+        <el-button
+          type="primary"
+          size="medium"
+          @click="handleNext('productInfoForm')"
+          >下一步，填写商品促销</el-button
+        >
       </el-form-item>
     </el-form>
   </div>
 </template>
 
 <script>
-  import {fetchListWithChildren} from '@/api/productCate'
-  import {fetchList as fetchBrandList} from '@/api/brand'
-  import {getProduct} from '@/api/product';
+import { fetchListWithChildren } from "@/api/productCate";
+import { fetchList as fetchBrandList } from "@/api/brand";
+import { getProduct } from "@/api/product";
 
-  export default {
-    name: "ProductInfoDetail",
-    props: {
-      value: Object,
-      isEdit: {
-        type: Boolean,
-        default: false
-      }
+export default {
+  name: "ProductInfoDetail",
+  props: {
+    value: Object,
+    isEdit: {
+      type: Boolean,
+      default: false,
     },
-    data() {
-      return {
-        hasEditCreated:false,
-        //选中商品分类的值
-        selectProductCateValue: [],
-        productCateOptions: [],
-        brandOptions: [],
-        rules: {
-          name: [
-            {required: true, message: '请输入商品名称', trigger: 'blur'},
-            {min: 2, max: 140, message: '长度在 2 到 140 个字符', trigger: 'blur'}
-          ],
-          subTitle: [{required: true, message: '请输入商品副标题', trigger: 'blur'}],
-          productCategoryId: [{required: true, message: '请选择商品分类', trigger: 'blur'}],
-          brandId: [{required: true, message: '请选择商品品牌', trigger: 'blur'}],
-          description: [{required: true, message: '请输入商品介绍', trigger: 'blur'}],
-          requiredProp: [{required: true, message: '该项为必填项', trigger: 'blur'}]
-        }
-      };
+  },
+  data() {
+    return {
+      hasEditCreated: false,
+      //选中商品分类的值
+      selectProductCateValue: [],
+      productCateOptions: [],
+      brandOptions: [],
+      rules: {
+        name: [
+          { required: true, message: "请输入商品名称", trigger: "blur" },
+          {
+            min: 2,
+            max: 140,
+            message: "长度在 2 到 140 个字符",
+            trigger: "blur",
+          },
+        ],
+        subTitle: [
+          { required: true, message: "请输入商品副标题", trigger: "blur" },
+        ],
+        productCategoryId: [
+          { required: true, message: "请选择商品分类", trigger: "blur" },
+        ],
+        brandId: [
+          { required: true, message: "请选择商品品牌", trigger: "blur" },
+        ],
+        description: [
+          { required: true, message: "请输入商品介绍", trigger: "blur" },
+        ],
+        requiredProp: [
+          { required: true, message: "该项为必填项", trigger: "blur" },
+        ],
+      },
+    };
+  },
+  created() {
+    this.getProductCateList();
+    this.getBrandList();
+  },
+  computed: {
+    //商品的编号
+    productId() {
+      return this.value.id;
     },
-    created() {
-      this.getProductCateList();
-      this.getBrandList();
+  },
+  watch: {
+    productId: function (newValue) {
+      console.log("productId", newValue, this.isEdit);
+      // if(!this.isEdit)return;
+      if (this.hasEditCreated) return;
+      if (newValue === undefined || newValue == null || newValue === 0) return;
+      this.handleEditCreated();
     },
-    computed:{
-      //商品的编号
-      productId(){
-        return this.value.id;
+    selectProductCateValue: function (newValue) {
+      console.log(newValue, "newValue");
+      if (newValue != null && newValue.length === 2) {
+        this.value.productCategoryId = newValue[1];
+        this.value.productCategoryName = this.getCateNameById(
+          this.value.productCategoryId
+        );
+      } else {
+        this.value.productCategoryId = null;
+        this.value.productCategoryName = null;
       }
     },
-    watch: {
-      productId:function(newValue){
-        console.log('productId',newValue,this.isEdit)
-        // if(!this.isEdit)return;
-        if(this.hasEditCreated)return;
-        if(newValue===undefined||newValue==null||newValue===0)return;
-        this.handleEditCreated();
-      },
-      selectProductCateValue: function (newValue) {
-        console.log(newValue,'newValue')
-        if (newValue != null && newValue.length === 2) {
-          this.value.productCategoryId = newValue[1];
-          this.value.productCategoryName= this.getCateNameById(this.value.productCategoryId);
-        } else {
-          this.value.productCategoryId = null;
-          this.value.productCategoryName=null;
-        }
+  },
+  methods: {
+    //处理编辑逻辑
+    handleEditCreated() {
+      if (this.value.productCategoryId != null) {
+        this.selectProductCateValue.push(this.value.cateParentId);
+        this.selectProductCateValue.push(this.value.productCategoryId);
       }
+      this.hasEditCreated = true;
     },
-    methods: {
-      //处理编辑逻辑
-      handleEditCreated(){
-        if(this.value.productCategoryId!=null){
-          this.selectProductCateValue.push(this.value.cateParentId);
-          this.selectProductCateValue.push(this.value.productCategoryId);
-        }
-        this.hasEditCreated=true;
-      },
-      getProductCateList() {
-        console.log('获取商品分类')
-        fetchListWithChildren().then(response => {
-          let list = response.data;
-          this.productCateOptions = [];
-          for (let i = 0; i < list.length; i++) {
-            let children = [];
-            if (list[i].children != null && list[i].children.length > 0) {
-              for (let j = 0; j < list[i].children.length; j++) {
-                children.push({label: list[i].children[j].name, value: list[i].children[j].id});
-              }
-            }
-            this.productCateOptions.push({label: list[i].name, value: list[i].id, children: children});
-          }
-        });
-      },
-      getBrandList() {
-        fetchBrandList({pageNum: 1, pageSize: 100}).then(response => {
-          this.brandOptions = [];
-          let brandList = response.data.list;
-          for (let i = 0; i < brandList.length; i++) {
-            this.brandOptions.push({label: brandList[i].name, value: brandList[i].id});
-          }
-        });
-      },
-      getCateNameById(id){
-        let name=null;
-        for(let i=0;i<this.productCateOptions.length;i++){
-          for(let j=0;j<this.productCateOptions[i].children.length;j++){
-            if(this.productCateOptions[i].children[j].value===id){
-              name=this.productCateOptions[i].children[j].label;
-              return name;
+    getProductCateList() {
+      console.log("获取商品分类");
+      fetchListWithChildren().then((response) => {
+        let list = response.data;
+        this.productCateOptions = [];
+        for (let i = 0; i < list.length; i++) {
+          let children = [];
+          if (list[i].children != null && list[i].children.length > 0) {
+            for (let j = 0; j < list[i].children.length; j++) {
+              children.push({
+                label: list[i].children[j].name,
+                value: list[i].children[j].id,
+              });
             }
           }
+          this.productCateOptions.push({
+            label: list[i].name,
+            value: list[i].id,
+            children: children,
+          });
         }
-        return name;
-      },
-      handleNext(formName){
-        this.$refs[formName].validate((valid) => {
-          if (valid) {
-            this.$emit('nextStep');
-          } else {
-            this.$message({
-              message: '验证失败',
-              type: 'error',
-              duration:1000
-            });
-            return false;
-          }
-        });
-      },
-      handleBrandChange(val) {
-        let brandName = '';
-        for (let i = 0; i < this.brandOptions.length; i++) {
-          if (this.brandOptions[i].value === val) {
-            brandName = this.brandOptions[i].label;
-            break;
+      });
+    },
+    getBrandList() {
+      fetchBrandList({ pageNum: 1, pageSize: 100 }).then((response) => {
+        this.brandOptions = [];
+        let brandList = response.data.list;
+        for (let i = 0; i < brandList.length; i++) {
+          this.brandOptions.push({
+            label: brandList[i].name,
+            value: brandList[i].id,
+          });
+        }
+      });
+    },
+    getCateNameById(id) {
+      let name = null;
+      for (let i = 0; i < this.productCateOptions.length; i++) {
+        for (let j = 0; j < this.productCateOptions[i].children.length; j++) {
+          if (this.productCateOptions[i].children[j].value === id) {
+            name = this.productCateOptions[i].children[j].label;
+            return name;
           }
         }
-        this.value.brandName = brandName;
       }
-    }
-  }
+      return name;
+    },
+    handleNext(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          this.$emit("nextStep");
+        } else {
+          this.$message({
+            message: "验证失败",
+            type: "error",
+            duration: 1000,
+          });
+          return false;
+        }
+      });
+    },
+    handleBrandChange(val) {
+      let brandName = "";
+      for (let i = 0; i < this.brandOptions.length; i++) {
+        if (this.brandOptions[i].value === val) {
+          brandName = this.brandOptions[i].label;
+          break;
+        }
+      }
+      this.value.brandName = brandName;
+    },
+  },
+};
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+}
+
+input[type="number"] {
+  -moz-appearance: textfield;
+}
+
+.number-input {
+  /deep/ .el-input__inner {
+    text-align: left;
+  }
+
+  width: 100%;
+}
 </style>