添加产品基本信息品牌选择

src/views/mes/md/product/components/baseInfo.vue

 <!--产品基本信息-->
 <template>
   <div class="app-container">
-    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
+    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
       <el-row>
         <el-col :span="8">
           <el-form-item label="产品代号" prop="productNo">
@@ -10,47 +10,34 @@
         </el-col>
         <el-col :span="8">
           <el-form-item label="英文名称" prop="productEnglishName">
-            <el-input v-model="form.productEnglishName" placeholder="请输入英文名称" />
+            <el-input
+              v-model="form.productEnglishName"
+              placeholder="请输入英文名称"
+            />
           </el-form-item>
         </el-col>
         <el-col :span="8">
           <el-form-item label="计量单位" prop="unitOfMeasure">
-            <el-input v-model="form.unitOfMeasure" placeholder="请输入计量单位" />
+            <el-input
+              v-model="form.unitOfMeasure"
+              placeholder="请输入计量单位"
+            />
           </el-form-item>
         </el-col>
-      </el-row>
-      <el-row>
-        <el-col :span="12">
-          <el-form-item label="有效开始日期" prop="expirationDateStart">
-            <el-date-picker clearable
-                            v-model="form.expirationDateStart"
-                            type="date"
-                            value-format="yyyy-MM-dd"
-                            placeholder="请选择有效开始日期">
-            </el-date-picker>
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item label="有效结束日期" prop="expirationDateEnd">
-            <el-date-picker clearable
-                            v-model="form.expirationDateEnd"
-                            type="date"
-                            value-format="yyyy-MM-dd"
-                            placeholder="请选择有效结束日期">
-            </el-date-picker>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row>
+
         <el-col :span="8">
-          <el-form-item label="品牌id" prop="brandId">
-            <el-input v-model="form.brandId" placeholder="请输入品牌id" />
+          <el-form-item label="品牌" prop="brandId">
+            <el-input v-model="form.brandName" disabled placeholder="请选择品牌">
+              <el-button icon="el-icon-search" slot="append" @click="openBrandSelected"/>
+            </el-input>
+            <BrandSelect ref="BrandSelectRef" @onSelected="onBrandSelected" />
           </el-form-item>
         </el-col>
         <el-col :span="8">
           <el-form-item label="尺码组id" prop="sizeGroupId">
             <el-input v-model="form.sizeGroupId" placeholder="请输入尺码组id" />
           </el-form-item>
+
         </el-col>
         <el-col :span="8">
           <el-form-item label="版面" prop="layout">
@@ -64,18 +51,44 @@
             </el-select>
           </el-form-item>
         </el-col>
+
+        <el-col :span="12">
+          <el-form-item label="有效开始日期" prop="expirationDateStart">
+            <el-date-picker
+              clearable
+              v-model="form.expirationDateStart"
+              type="date"
+              value-format="yyyy-MM-dd"
+              placeholder="请选择有效开始日期"
+            >
+            </el-date-picker>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="有效结束日期" prop="expirationDateEnd">
+            <el-date-picker
+              clearable
+              v-model="form.expirationDateEnd"
+              type="date"
+              value-format="yyyy-MM-dd"
+              placeholder="请选择有效结束日期"
+            >
+            </el-date-picker>
+          </el-form-item>
+        </el-col>
       </el-row>
     </el-form>
   </div>
 </template>
 
 <script>
-import {getInfo} from "@/api/mes/md/baseInfo";
+import { getInfo } from "@/api/mes/md/baseInfo";
+import BrandSelect from '@/components/brandSelect/single.vue'
 
 export default {
   name: "BaseInfo",
-  dicts: ['product_layout'],
-  components: { },
+  dicts: ["product_layout"],
+  components: { BrandSelect },
   data() {
     return {
       // 遮罩层
@@ -100,42 +113,46 @@ export default {
       },
       // 表单参数
       form: {
-        itemId: '',
-        productNo: '',
-        productEnglishName: '',
-        unitOfMeasure: '',
-        expirationDateStart: '',
-        expirationDateEnd: '',
-        brandId: '',
-        sizeGroupId: '',
-        layout: '',
+        itemId: "",
+        productNo: "",
+        productEnglishName: "",
+        unitOfMeasure: "",
+        expirationDateStart: "",
+        expirationDateEnd: "",
+        brandId: "",
+        brandName: '',
+        sizeGroupId: "",
+        layout: "",
       },
       // 表单校验
       rules: {
         /*quantity: [
           { required: true, message: "物料使用比例不能为空", trigger: "blur" }
         ]*/
-      }
+      },
     };
   },
   props: {
     optType: undefined,
-    itemId: undefined
+    itemId: {
+      type: Number | undefined,
+      default: undefined
+    },
   },
   created() {
     this.getBaseInfo();
   },
   methods: {
     //获取基本信息表单数据
-    async getBaseInfoData(){
-      await this.submitForm()
-      return this.form
+    async getBaseInfoData() {
+      await this.submitForm();
+      return this.form;
     },
 
-    getBaseInfo(){
-      getInfo(this.itemId).then(res=>{
-        Object.assign(this.form,res.data)
-      })
+    getBaseInfo() {
+      getInfo(this.itemId).then((res) => {
+        Object.assign(this.form, res.data);
+      });
     },
 
     // 取消按钮
@@ -162,6 +179,15 @@ export default {
     async submitForm() {
       return await this.$refs["form"].validate();
     },
-  }
+    openBrandSelected() {
+      this.$refs['BrandSelectRef'].showFlag = true
+    },
+    onBrandSelected(row) {
+      if (row != undefined && row!=null) {
+        this.form.brandId = row.brandId
+        this.form.brandName = row.brandName
+      }
+    }
+  },
 };
 </script>