2023.11.13 - 添加商品型号字段

src/views/commodity/commoditySystem/addCommodity.vue

@@ -42,23 +42,18 @@
           </div>
           <div class="rightCom">
             <el-form-item label="官方分类" prop="classifyId">
-              <el-cascader
-                v-model="form.classifyId" :options="classifyList" clearable :props="{
-                  checkStrictly: false,
-                  label: 'categoryName',
-                  value: 'id',
-                  children: 'childs'
-                }"
-                @change="handleChangeCascader"
-              />
+              <el-cascader v-model="form.classifyId" :options="classifyList" clearable :props="{
+                checkStrictly: false,
+                label: 'categoryName',
+                value: 'id',
+                children: 'childs'
+              }" @change="handleChangeCascader" />
             </el-form-item>
 
             <el-form-item label="商品分组" prop="shopGroupId">
               <el-select v-model="form.shopGroupId" placeholder="请选择商品分组" clearable>
-                <el-option
-                  v-for="(item, index) in groupList" :key="index" :label="item.groupName"
-                  :value="item.shopGroupId"
-                />
+                <el-option v-for="(item, index) in groupList" :key="index" :label="item.groupName"
+                  :value="item.shopGroupId" />
               </el-select>
             </el-form-item>
             <el-form-item label="品牌">
@@ -69,6 +64,9 @@
             <el-form-item class="form-item-long" label="供应商">
               <el-input v-model="form.supplierName" maxlength="20" show-word-limit placeholder="请输入供应商名称" />
             </el-form-item>
+            <el-form-item class="form-item-long" label="商品型号">
+              <el-input v-model.trim="form.productMarque" placeholder="请输入商品型号" />
+            </el-form-item>
             <el-form-item label="需要物流" prop="ifLogistics">
               <el-radio-group v-model="form.ifLogistics">
                 <el-radio :label="1">是</el-radio>
@@ -96,11 +94,8 @@
             </el-form-item>
             <el-form-item v-if="form.ifCredit" class="form-item-long" label="单笔最大抵扣" prop="creditLimit">
               <!-- <el-input v-model="form.creditLimit" type="number" placeholder="请输入单笔最大抵扣" /> -->
-              <el-input-number
-                v-model="form.creditLimit" :controls="false" :max="999999999" :min="0"
-                :precision="0"
-                placeholder="请输入单笔最大抵扣"
-              />
+              <el-input-number v-model="form.creditLimit" :controls="false" :max="999999999" :min="0" :precision="0"
+                placeholder="请输入单笔最大抵扣" />
               <p style="color: #cf0f0f; height: 25px; line-height: 25px;margin-top: 10px">限制一笔订单中该商品最多抵扣多少积分</p>
               <p style="color: #cf0f0f; height: 25px; line-height: 25px">( 注：1积分 = {{ integralProportion }}元 请输入整数 )</p>
             </el-form-item>
@@ -190,6 +185,7 @@ export default {
         shopGroupId: '', // 商品分组id
         classifyId: '', // 分类id
         sortId: '', // 排序值
+        productMarque: '', // 商品型号
         supplierName: '', // 供应商名称
         ifLogistics: '', // 是否需要物流 1-是 0-否
         shelveState: '', // 是否上架 1-上架 0-不上架
@@ -294,14 +290,14 @@ export default {
       dialogImageUrl: '',
       dialogVisible: false,
       rules: {
-        productName: [ { required: true, message: '请输入商品名称', trigger: 'blur' } ],
-        shopGroupId: [ { required: true, message: '请选择商品分组', trigger: 'change' } ],
-        classifyId: [ { required: true, message: '请选择商品分类', trigger: 'change' } ],
-        ifLogistics: [ { required: true, message: '请选择是否需要物流', trigger: 'change' } ],
-        shelveState: [ { required: true, message: '请选择是否上架', trigger: 'change' } ],
-        ifOversold: [ { required: true, message: '请选择是否允许超卖', trigger: 'change' } ],
-        ifCredit: [ { required: true, message: '请选择是否支持积分兑换', trigger: 'change' } ],
-        creditLimit: [ { required: true, message: '请输入单笔最大抵扣', trigger: 'blur' } ]
+        productName: [{ required: true, message: '请输入商品名称', trigger: 'blur' }],
+        shopGroupId: [{ required: true, message: '请选择商品分组', trigger: 'change' }],
+        classifyId: [{ required: true, message: '请选择商品分类', trigger: 'change' }],
+        ifLogistics: [{ required: true, message: '请选择是否需要物流', trigger: 'change' }],
+        shelveState: [{ required: true, message: '请选择是否上架', trigger: 'change' }],
+        ifOversold: [{ required: true, message: '请选择是否允许超卖', trigger: 'change' }],
+        ifCredit: [{ required: true, message: '请选择是否支持积分兑换', trigger: 'change' }],
+        creditLimit: [{ required: true, message: '请输入单笔最大抵扣', trigger: 'blur' }]
       },
       integralList: [],
       integralProportion: '' // 积分兑换金额比例
@@ -599,94 +595,94 @@ export default {
 @import url("../../../styles/elDialog.scss");
 
 .btnList {
-	float: right;
-	padding: 3px 0;
-	width: 100px;
-	height: 40px;
-	border-radius: 4px;
-	margin-right: 30px;
+  float: right;
+  padding: 3px 0;
+  width: 100px;
+  height: 40px;
+  border-radius: 4px;
+  margin-right: 30px;
 }
 
 .addTitle {
-	font-size: 20px;
-	color: #333333;
-	line-height: 50px;
+  font-size: 20px;
+  color: #333333;
+  line-height: 50px;
 }
 
 .stepsColor {
-	font-size: 20px;
-	line-height: 40px;
+  font-size: 20px;
+  line-height: 40px;
 
-	.one_class {
-		width: 40px;
-		background: #3a68f2;
-		border-radius: 50%;
-		color: #ffffff;
-		margin: 0 10px;
-	}
+  .one_class {
+    width: 40px;
+    background: #3a68f2;
+    border-radius: 50%;
+    color: #ffffff;
+    margin: 0 10px;
+  }
 
-	.two_class {
-		color: #3a68f2;
-	}
+  .two_class {
+    color: #3a68f2;
+  }
 
-	.line {
-		width: 230px;
-		height: 2px;
-		background: #e0e5eb;
-		margin: 0 20px;
-	}
+  .line {
+    width: 230px;
+    height: 2px;
+    background: #e0e5eb;
+    margin: 0 20px;
+  }
 
-	.t_class {
-		width: 40px;
-		background: #dddddd;
-		border-radius: 50%;
-		color: #333333;
-		margin: 0 10px;
-	}
+  .t_class {
+    width: 40px;
+    background: #dddddd;
+    border-radius: 50%;
+    color: #333333;
+    margin: 0 10px;
+  }
 
-	.w_class {
-		color: #666666;
-	}
+  .w_class {
+    color: #666666;
+  }
 }
 
 .common {
-	display: flex;
-	justify-content: center;
-	align-items: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 .addCom {
-	margin: 10px 0;
-	justify-content: space-around;
-	align-items: unset;
+  margin: 10px 0;
+  justify-content: space-around;
+  align-items: unset;
 
-	.el-form {
-		display: flex;
-		padding: 40px 0;
-	}
+  .el-form {
+    display: flex;
+    padding: 40px 0;
+  }
 
-	.leftCom {
-		width: 65%;
-		background: #ffffff;
-	}
+  .leftCom {
+    width: 65%;
+    background: #ffffff;
+  }
 
-	.rightCom {
-		width: 35%;
-		background: #ffffff;
-		margin-left: 80px;
-	}
+  .rightCom {
+    width: 35%;
+    background: #ffffff;
+    margin-left: 80px;
+  }
 }
 
 .centerCom {
-	width: 1660px;
-	background: #ffffff;
-	box-shadow: 0px 5px 20px 0px rgba(51, 51, 51, 0.15);
-	border-radius: 4px;
+  width: 1660px;
+  background: #ffffff;
+  box-shadow: 0px 5px 20px 0px rgba(51, 51, 51, 0.15);
+  border-radius: 4px;
 }
 </style>
 
 <style scoped>
 .form-item-long>>>.el-input {
-	width: 100%;
+  width: 100%;
 }
 </style>