diff --git a/src/views/product/brandList.vue b/src/views/product/brandList.vue
index 60fcc6d..aea433c 100644
--- a/src/views/product/brandList.vue
+++ b/src/views/product/brandList.vue
@@ -42,7 +42,7 @@
           type="success"
           icon="el-icon-circle-plus-outline"
           class="btnItem bggreen"
-          @click="addCategory"
+          @click="addBrand"
           >新增</el-button
         >
         <el-button type="danger" icon="el-icon-delete-solid" class="btnItem bgred"
@@ -66,46 +66,42 @@
       style="width: 100%"
     >
       <el-table-column type="selection" width="55"> </el-table-column>
-      <el-table-column prop="index" label="序号"> </el-table-column>
-      <!-- <el-table-column prop="id" label="序号"> </el-table-column> -->
+      <el-table-column prop="index" width="75" label="序号"> </el-table-column>
       <el-table-column prop="brandCode" label="编号"> </el-table-column>
       <el-table-column prop="brandName" label="名称"> </el-table-column>
       <el-table-column prop="brandProperty" label="性质"> </el-table-column>
       <el-table-column prop="supplierStr" label="供应商"> </el-table-column>
       <el-table-column prop="categoryStr" label="品类"> </el-table-column>
-      <el-table-column prop="remark" label="备注"> </el-table-column>
+      <el-table-column prop="remark" width="400" label="备注"> </el-table-column>
       <el-table-column label="操作">
         <template slot-scope="scope">
-          <el-button @click="showInfo(scope.row)" type="text" size="small"
-            >详情</el-button
-          > 
-          <el-button @click="update(scope.row)" type="text" size="small"
-            >编辑</el-button
-          >
-          <el-button @click="Bdelete(scope.row)" type="text" size="small"
-            >删除</el-button
-          >
+          <el-button @click="detail(scope.row)" type="text" size="small">详情</el-button>
+          <el-button @click="update(scope.row)" type="text" size="small">编辑</el-button>
+          <el-button @click="Bdelete(scope.row)" type="text" size="small">删除</el-button>
           <!-- <el-button type="text" size="small">编辑</el-button> -->
         </template>
       </el-table-column>
     </el-table>
     <!-- 分页组件 -->
     <group-page :limit ="limit" :total="total" :offset="offset" :count="tableData.total" @setOffset="setOffset"  @setLimit ="setLimit" v-model="isFristPage" />
-  
+
     <!-- 新增弹框 -->
-    <elbrand-dialog :dataInfo="dataInfo" :title="dialogTitle" :isShowInfo="isShowAdd"  @close="closeAdd" @refresh="refresh"></elbrand-dialog>
+<!--    <elbrand-dialog :dataInfo="dataInfo" :title="dialogTitle" :isShowInfo="isShowAdd"  @close="closeAdd" @refresh="refresh"></elbrand-dialog>-->
+    <edit-brand v-show="isShowAdd" ref="editBrand" @refresh="refresh" />
     <!-- 详情dialog -->
-    <info-dialog   :isShowInfo="isShowInfo" @close="closeInfo"  :dataInfo="rowInfo"/>
+    <detail-brand v-show="isShowInfo" ref="detailBrand" />
   </div>
 </template>
-  
+
   <script>
 //组件
 
-import GroupPage from '../../components/mycomponent/groupPage.vue';
+import GroupPage from '../../components/mycomponent/groupPage.vue'
 //  element ui Dialog
 import ElbrandDialog from '../../components/mycomponent/dialog/ElbrandDialog.vue'
-import InfoDialog from "../../components/mycomponent/dialog/InfoDialog.vue";
+import InfoDialog from "../../components/mycomponent/dialog/InfoDialog.vue"
+import DetailBrand from '@/views/product/detailBrand'
+import EditBrand from "@/views/product/editBrand"
 
 //逻辑
 import { tableRowClassName } from "../../utils/myUtils/changeTableTr";
@@ -115,13 +111,15 @@
 export default {
   mixins:[listMixin,elDataDialog],  // 加入分页逻辑
   components: {
+    DetailBrand,
+    EditBrand,
     GroupPage,
     ElbrandDialog,
     InfoDialog
-}, 
+},
   data() {
     return {
-      // isShowInfo:false,  
+      // isShowInfo:false,
       isShowAdd: false, //显示新增,编辑
       dialogTitle:null,
       dataInfo:{}, // 新数据的chushixiang
@@ -130,7 +128,7 @@
       brandName:"",
       brandProperty:"",
       },
-      
+
     };
   },
   // mounted(){
@@ -140,13 +138,16 @@
   methods: {
     tableRowClassName: tableRowClassName,
     closeAdd() {
-      this.isShowAdd = false;
+      this.isShowAdd = false
     },
-    addCategory() {
-      this.isShowAdd = true;
-      this.dialogTitle= '新增品牌'
-      this.dataInfo = ''
-      // element ui dlalog
+    addBrand() {
+      this.isShowAdd = true
+      this.$refs.editBrand.initDialog('create')
+    },
+    // 编辑
+    update(row) {
+      this.isShowAdd = true
+      this.$refs.editBrand.initDialog('update', row)
     },
     // 重置
     reset(){
@@ -157,7 +158,10 @@
       }
       // this.queryInfo = {...this.selectInfo}   //重置搜索内容
     },
-  
+    detail(row) {
+      this.$refs.detailBrand.initDialog("detail", row)
+    },
+
     // 获取指定页面
     getListPage(limit,offset){
         listPage(`limit=${limit}&offset=${offset}`,this.queryInfo).then(res => {
@@ -165,10 +169,10 @@
       res.rows.forEach((item,index)=>{
         item.index =(index+1)+((offset-1)*10)
       })
-      this.tableData = res 
-      
+      this.tableData = res
+
      })
-     
+
     },
     // 删除
     Bdelete(row){
@@ -186,7 +190,7 @@
         }
       })
     },
-    
+
     // 批量删除
     BatchDelete(){
       //  得到选中行
@@ -205,14 +209,7 @@
         }
     })
     },
-    // 编辑
-    update(row){
-      this.isShowAdd = true;
-      this.dialogTitle= "详情编辑"
-      console.log(row);
-      this.dataInfo = row
-    },
-    // 
+    //
     exportToExcel(){
       listPage('limit=1000000000&offset=1', {}).then(res => {
         outToExcel(res.rows)
@@ -221,7 +218,7 @@
   }
 };
 </script>
-  
+
 <style lang="scss" scoped>
 .product_container {
   position: relative;
@@ -255,10 +252,9 @@
         // width: 84px;
         font-size: 16px;
       }
-    
+
     }
   }
-  
+
 }
 </style>
-  
\ No newline at end of file

diff --git a/src/views/product/brandList.vue b/src/views/product/brandList.vue
index 60fcc6d..aea433c 100644
--- a/src/views/product/brandList.vue
+++ b/src/views/product/brandList.vue
@@ -42,7 +42,7 @@
           type="success"
           icon="el-icon-circle-plus-outline"
           class="btnItem bggreen"
-          @click="addCategory"
+          @click="addBrand"
           >新增</el-button
         >
         <el-button type="danger" icon="el-icon-delete-solid" class="btnItem bgred"
@@ -66,46 +66,42 @@
       style="width: 100%"
     >
       <el-table-column type="selection" width="55"> </el-table-column>
-      <el-table-column prop="index" label="序号"> </el-table-column>
-      <!-- <el-table-column prop="id" label="序号"> </el-table-column> -->
+      <el-table-column prop="index" width="75" label="序号"> </el-table-column>
       <el-table-column prop="brandCode" label="编号"> </el-table-column>
       <el-table-column prop="brandName" label="名称"> </el-table-column>
       <el-table-column prop="brandProperty" label="性质"> </el-table-column>
       <el-table-column prop="supplierStr" label="供应商"> </el-table-column>
       <el-table-column prop="categoryStr" label="品类"> </el-table-column>
-      <el-table-column prop="remark" label="备注"> </el-table-column>
+      <el-table-column prop="remark" width="400" label="备注"> </el-table-column>
       <el-table-column label="操作">
         <template slot-scope="scope">
-          <el-button @click="showInfo(scope.row)" type="text" size="small"
-            >详情</el-button
-          > 
-          <el-button @click="update(scope.row)" type="text" size="small"
-            >编辑</el-button
-          >
-          <el-button @click="Bdelete(scope.row)" type="text" size="small"
-            >删除</el-button
-          >
+          <el-button @click="detail(scope.row)" type="text" size="small">详情</el-button>
+          <el-button @click="update(scope.row)" type="text" size="small">编辑</el-button>
+          <el-button @click="Bdelete(scope.row)" type="text" size="small">删除</el-button>
           <!-- <el-button type="text" size="small">编辑</el-button> -->
         </template>
       </el-table-column>
     </el-table>
     <!-- 分页组件 -->
     <group-page :limit ="limit" :total="total" :offset="offset" :count="tableData.total" @setOffset="setOffset"  @setLimit ="setLimit" v-model="isFristPage" />
-  
+
     <!-- 新增弹框 -->
-    <elbrand-dialog :dataInfo="dataInfo" :title="dialogTitle" :isShowInfo="isShowAdd"  @close="closeAdd" @refresh="refresh"></elbrand-dialog>
+<!--    <elbrand-dialog :dataInfo="dataInfo" :title="dialogTitle" :isShowInfo="isShowAdd"  @close="closeAdd" @refresh="refresh"></elbrand-dialog>-->
+    <edit-brand v-show="isShowAdd" ref="editBrand" @refresh="refresh" />
     <!-- 详情dialog -->
-    <info-dialog   :isShowInfo="isShowInfo" @close="closeInfo"  :dataInfo="rowInfo"/>
+    <detail-brand v-show="isShowInfo" ref="detailBrand" />
   </div>
 </template>
-  
+
   <script>
 //组件
 
-import GroupPage from '../../components/mycomponent/groupPage.vue';
+import GroupPage from '../../components/mycomponent/groupPage.vue'
 //  element ui Dialog
 import ElbrandDialog from '../../components/mycomponent/dialog/ElbrandDialog.vue'
-import InfoDialog from "../../components/mycomponent/dialog/InfoDialog.vue";
+import InfoDialog from "../../components/mycomponent/dialog/InfoDialog.vue"
+import DetailBrand from '@/views/product/detailBrand'
+import EditBrand from "@/views/product/editBrand"
 
 //逻辑
 import { tableRowClassName } from "../../utils/myUtils/changeTableTr";
@@ -115,13 +111,15 @@
 export default {
   mixins:[listMixin,elDataDialog],  // 加入分页逻辑
   components: {
+    DetailBrand,
+    EditBrand,
     GroupPage,
     ElbrandDialog,
     InfoDialog
-}, 
+},
   data() {
     return {
-      // isShowInfo:false,  
+      // isShowInfo:false,
       isShowAdd: false, //显示新增,编辑
       dialogTitle:null,
       dataInfo:{}, // 新数据的chushixiang
@@ -130,7 +128,7 @@
       brandName:"",
       brandProperty:"",
       },
-      
+
     };
   },
   // mounted(){
@@ -140,13 +138,16 @@
   methods: {
     tableRowClassName: tableRowClassName,
     closeAdd() {
-      this.isShowAdd = false;
+      this.isShowAdd = false
     },
-    addCategory() {
-      this.isShowAdd = true;
-      this.dialogTitle= '新增品牌'
-      this.dataInfo = ''
-      // element ui dlalog
+    addBrand() {
+      this.isShowAdd = true
+      this.$refs.editBrand.initDialog('create')
+    },
+    // 编辑
+    update(row) {
+      this.isShowAdd = true
+      this.$refs.editBrand.initDialog('update', row)
     },
     // 重置
     reset(){
@@ -157,7 +158,10 @@
       }
       // this.queryInfo = {...this.selectInfo}   //重置搜索内容
     },
-  
+    detail(row) {
+      this.$refs.detailBrand.initDialog("detail", row)
+    },
+
     // 获取指定页面
     getListPage(limit,offset){
         listPage(`limit=${limit}&offset=${offset}`,this.queryInfo).then(res => {
@@ -165,10 +169,10 @@
       res.rows.forEach((item,index)=>{
         item.index =(index+1)+((offset-1)*10)
       })
-      this.tableData = res 
-      
+      this.tableData = res
+
      })
-     
+
     },
     // 删除
     Bdelete(row){
@@ -186,7 +190,7 @@
         }
       })
     },
-    
+
     // 批量删除
     BatchDelete(){
       //  得到选中行
@@ -205,14 +209,7 @@
         }
     })
     },
-    // 编辑
-    update(row){
-      this.isShowAdd = true;
-      this.dialogTitle= "详情编辑"
-      console.log(row);
-      this.dataInfo = row
-    },
-    // 
+    //
     exportToExcel(){
       listPage('limit=1000000000&offset=1', {}).then(res => {
         outToExcel(res.rows)
@@ -221,7 +218,7 @@
   }
 };
 </script>
-  
+
 <style lang="scss" scoped>
 .product_container {
   position: relative;
@@ -255,10 +252,9 @@
         // width: 84px;
         font-size: 16px;
       }
-    
+
     }
   }
-  
+
 }
 </style>
-  
\ No newline at end of file
diff --git a/src/views/product/detailBrand.vue b/src/views/product/detailBrand.vue
new file mode 100644
index 0000000..2570c5b
--- /dev/null
+++ b/src/views/product/detailBrand.vue
@@ -0,0 +1,74 @@
+<template>
+  <el-dialog width="50%" title="品牌详情" :visible.sync="dialogFormVisible" top="10vh" append-to-body>
+    <el-descriptions class="margin-top" title="" :column="2" border>
+      <el-descriptions-item label="名称">
+        {{ brandForm.brandName }}
+      </el-descriptions-item>
+      <el-descriptions-item label="编号">
+        {{ brandForm.brandCode }}
+      </el-descriptions-item>
+      <el-descriptions-item label="供应商">
+        {{ brandForm.supplierStr }}
+      </el-descriptions-item>
+      <el-descriptions-item label="品类">
+        {{ brandForm.categoryStr }}
+      </el-descriptions-item>
+      <el-descriptions-item label="性质">
+        {{ brandForm.brandProperty }}
+      </el-descriptions-item>
+      <el-descriptions-item label="" />
+      <el-descriptions-item label="备注" :span="2">
+        {{ brandForm.remark }}
+      </el-descriptions-item>
+    </el-descriptions>
+  </el-dialog>
+</template>
+
+<script>
+
+export default {
+  name: 'DetailBrand',
+  components: {
+
+  },
+  data() {
+    return {
+      dialogFormVisible: false, // 对话框是否显示
+      dialogStatus: '', // 对话框类型：create,update,detail
+      brandForm: {
+        id: '',
+        brandName: '',
+        supplierStr: '',
+        categoryStr: '',
+        brandCode: '',
+        brandProperty: '',
+        remark: ''
+      } // 表单
+    }
+  },
+  methods: {
+    // 初始化对话框
+    initDialog: function(dialogStatus, row = null) {
+      this.dialogFormVisible = true
+      this.brandForm = {
+        id: row.id,
+        brandName: row.brandName,
+        brandCode: row.brandCode,
+        supplierStr: row.supplierStr,
+        categoryStr: row.categoryStr,
+        brandProperty: row.brandProperty,
+        remark: row.remark
+      }
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .el-select{
+    width: 100%;
+  }
+  .el-date-editor{
+    width: 100%;display: flex;
+  }
+</style>

diff --git a/src/views/product/brandList.vue b/src/views/product/brandList.vue
index 60fcc6d..aea433c 100644
--- a/src/views/product/brandList.vue
+++ b/src/views/product/brandList.vue
@@ -42,7 +42,7 @@
           type="success"
           icon="el-icon-circle-plus-outline"
           class="btnItem bggreen"
-          @click="addCategory"
+          @click="addBrand"
           >新增</el-button
         >
         <el-button type="danger" icon="el-icon-delete-solid" class="btnItem bgred"
@@ -66,46 +66,42 @@
       style="width: 100%"
     >
       <el-table-column type="selection" width="55"> </el-table-column>
-      <el-table-column prop="index" label="序号"> </el-table-column>
-      <!-- <el-table-column prop="id" label="序号"> </el-table-column> -->
+      <el-table-column prop="index" width="75" label="序号"> </el-table-column>
       <el-table-column prop="brandCode" label="编号"> </el-table-column>
       <el-table-column prop="brandName" label="名称"> </el-table-column>
       <el-table-column prop="brandProperty" label="性质"> </el-table-column>
       <el-table-column prop="supplierStr" label="供应商"> </el-table-column>
       <el-table-column prop="categoryStr" label="品类"> </el-table-column>
-      <el-table-column prop="remark" label="备注"> </el-table-column>
+      <el-table-column prop="remark" width="400" label="备注"> </el-table-column>
       <el-table-column label="操作">
         <template slot-scope="scope">
-          <el-button @click="showInfo(scope.row)" type="text" size="small"
-            >详情</el-button
-          > 
-          <el-button @click="update(scope.row)" type="text" size="small"
-            >编辑</el-button
-          >
-          <el-button @click="Bdelete(scope.row)" type="text" size="small"
-            >删除</el-button
-          >
+          <el-button @click="detail(scope.row)" type="text" size="small">详情</el-button>
+          <el-button @click="update(scope.row)" type="text" size="small">编辑</el-button>
+          <el-button @click="Bdelete(scope.row)" type="text" size="small">删除</el-button>
           <!-- <el-button type="text" size="small">编辑</el-button> -->
         </template>
       </el-table-column>
     </el-table>
     <!-- 分页组件 -->
     <group-page :limit ="limit" :total="total" :offset="offset" :count="tableData.total" @setOffset="setOffset"  @setLimit ="setLimit" v-model="isFristPage" />
-  
+
     <!-- 新增弹框 -->
-    <elbrand-dialog :dataInfo="dataInfo" :title="dialogTitle" :isShowInfo="isShowAdd"  @close="closeAdd" @refresh="refresh"></elbrand-dialog>
+<!--    <elbrand-dialog :dataInfo="dataInfo" :title="dialogTitle" :isShowInfo="isShowAdd"  @close="closeAdd" @refresh="refresh"></elbrand-dialog>-->
+    <edit-brand v-show="isShowAdd" ref="editBrand" @refresh="refresh" />
     <!-- 详情dialog -->
-    <info-dialog   :isShowInfo="isShowInfo" @close="closeInfo"  :dataInfo="rowInfo"/>
+    <detail-brand v-show="isShowInfo" ref="detailBrand" />
   </div>
 </template>
-  
+
   <script>
 //组件
 
-import GroupPage from '../../components/mycomponent/groupPage.vue';
+import GroupPage from '../../components/mycomponent/groupPage.vue'
 //  element ui Dialog
 import ElbrandDialog from '../../components/mycomponent/dialog/ElbrandDialog.vue'
-import InfoDialog from "../../components/mycomponent/dialog/InfoDialog.vue";
+import InfoDialog from "../../components/mycomponent/dialog/InfoDialog.vue"
+import DetailBrand from '@/views/product/detailBrand'
+import EditBrand from "@/views/product/editBrand"
 
 //逻辑
 import { tableRowClassName } from "../../utils/myUtils/changeTableTr";
@@ -115,13 +111,15 @@
 export default {
   mixins:[listMixin,elDataDialog],  // 加入分页逻辑
   components: {
+    DetailBrand,
+    EditBrand,
     GroupPage,
     ElbrandDialog,
     InfoDialog
-}, 
+},
   data() {
     return {
-      // isShowInfo:false,  
+      // isShowInfo:false,
       isShowAdd: false, //显示新增,编辑
       dialogTitle:null,
       dataInfo:{}, // 新数据的chushixiang
@@ -130,7 +128,7 @@
       brandName:"",
       brandProperty:"",
       },
-      
+
     };
   },
   // mounted(){
@@ -140,13 +138,16 @@
   methods: {
     tableRowClassName: tableRowClassName,
     closeAdd() {
-      this.isShowAdd = false;
+      this.isShowAdd = false
     },
-    addCategory() {
-      this.isShowAdd = true;
-      this.dialogTitle= '新增品牌'
-      this.dataInfo = ''
-      // element ui dlalog
+    addBrand() {
+      this.isShowAdd = true
+      this.$refs.editBrand.initDialog('create')
+    },
+    // 编辑
+    update(row) {
+      this.isShowAdd = true
+      this.$refs.editBrand.initDialog('update', row)
     },
     // 重置
     reset(){
@@ -157,7 +158,10 @@
       }
       // this.queryInfo = {...this.selectInfo}   //重置搜索内容
     },
-  
+    detail(row) {
+      this.$refs.detailBrand.initDialog("detail", row)
+    },
+
     // 获取指定页面
     getListPage(limit,offset){
         listPage(`limit=${limit}&offset=${offset}`,this.queryInfo).then(res => {
@@ -165,10 +169,10 @@
       res.rows.forEach((item,index)=>{
         item.index =(index+1)+((offset-1)*10)
       })
-      this.tableData = res 
-      
+      this.tableData = res
+
      })
-     
+
     },
     // 删除
     Bdelete(row){
@@ -186,7 +190,7 @@
         }
       })
     },
-    
+
     // 批量删除
     BatchDelete(){
       //  得到选中行
@@ -205,14 +209,7 @@
         }
     })
     },
-    // 编辑
-    update(row){
-      this.isShowAdd = true;
-      this.dialogTitle= "详情编辑"
-      console.log(row);
-      this.dataInfo = row
-    },
-    // 
+    //
     exportToExcel(){
       listPage('limit=1000000000&offset=1', {}).then(res => {
         outToExcel(res.rows)
@@ -221,7 +218,7 @@
   }
 };
 </script>
-  
+
 <style lang="scss" scoped>
 .product_container {
   position: relative;
@@ -255,10 +252,9 @@
         // width: 84px;
         font-size: 16px;
       }
-    
+
     }
   }
-  
+
 }
 </style>
-  
\ No newline at end of file
diff --git a/src/views/product/detailBrand.vue b/src/views/product/detailBrand.vue
new file mode 100644
index 0000000..2570c5b
--- /dev/null
+++ b/src/views/product/detailBrand.vue
@@ -0,0 +1,74 @@
+<template>
+  <el-dialog width="50%" title="品牌详情" :visible.sync="dialogFormVisible" top="10vh" append-to-body>
+    <el-descriptions class="margin-top" title="" :column="2" border>
+      <el-descriptions-item label="名称">
+        {{ brandForm.brandName }}
+      </el-descriptions-item>
+      <el-descriptions-item label="编号">
+        {{ brandForm.brandCode }}
+      </el-descriptions-item>
+      <el-descriptions-item label="供应商">
+        {{ brandForm.supplierStr }}
+      </el-descriptions-item>
+      <el-descriptions-item label="品类">
+        {{ brandForm.categoryStr }}
+      </el-descriptions-item>
+      <el-descriptions-item label="性质">
+        {{ brandForm.brandProperty }}
+      </el-descriptions-item>
+      <el-descriptions-item label="" />
+      <el-descriptions-item label="备注" :span="2">
+        {{ brandForm.remark }}
+      </el-descriptions-item>
+    </el-descriptions>
+  </el-dialog>
+</template>
+
+<script>
+
+export default {
+  name: 'DetailBrand',
+  components: {
+
+  },
+  data() {
+    return {
+      dialogFormVisible: false, // 对话框是否显示
+      dialogStatus: '', // 对话框类型：create,update,detail
+      brandForm: {
+        id: '',
+        brandName: '',
+        supplierStr: '',
+        categoryStr: '',
+        brandCode: '',
+        brandProperty: '',
+        remark: ''
+      } // 表单
+    }
+  },
+  methods: {
+    // 初始化对话框
+    initDialog: function(dialogStatus, row = null) {
+      this.dialogFormVisible = true
+      this.brandForm = {
+        id: row.id,
+        brandName: row.brandName,
+        brandCode: row.brandCode,
+        supplierStr: row.supplierStr,
+        categoryStr: row.categoryStr,
+        brandProperty: row.brandProperty,
+        remark: row.remark
+      }
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .el-select{
+    width: 100%;
+  }
+  .el-date-editor{
+    width: 100%;display: flex;
+  }
+</style>
diff --git a/src/views/product/editBrand.vue b/src/views/product/editBrand.vue
new file mode 100644
index 0000000..f874992
--- /dev/null
+++ b/src/views/product/editBrand.vue
@@ -0,0 +1,256 @@
+<template>
+  <el-dialog width="30%" :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :close-on-click-modal="false" append-to-body>
+    <el-form ref="dataForm" :rules="rules" :model="brandForm" label-well-code="right" label-width="100px">
+      <el-row :gutter="20">
+        <el-col :span="21">
+          <el-form-item label="编号" prop="brandCode">
+            <el-input v-model.trim="brandForm.brandCode" :disabled="isEditMode" type="text" placeholder="必填，请输入唯一编号" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="21">
+          <el-form-item label="名称" prop="brandName">
+            <el-input v-model.trim="brandForm.brandName" type="text" placeholder="必填，请输入品牌名称" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="21">
+          <el-form-item label="性质" prop="brandProperty">
+            <el-input v-model.trim="brandForm.brandProperty" type="text" placeholder="必填，请输入品牌性质" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="21">
+          <el-form-item label="供应商" prop="supplierIds">
+            <el-select v-model="brandForm.supplierIdsStr" filterable clearable allow-create placeholder="请选择供应商">
+              <el-option
+                v-for="item in supplierIdList"
+                :key="item.id"
+                :label="item.supplierName"
+                :value="item.id"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="21">
+          <el-form-item label="品类" prop="categoryIds">
+            <el-select v-model="brandForm.categoryIds" multiple clearable filterable allow-create default-first-option placeholder="请选择品类，可多选">
+              <el-option
+                v-for="item in categoryIdList"
+                :key="item.id"
+                :label="item.categoryName"
+                :value="item.id"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="21">
+          <el-form-item label="备注">
+            <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="brandForm.remark">
+            </el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <div v-show="!isDetailMode" slot="footer" class="dialog-footer">
+      <el-button type="primary" @click="saveData">
+        保存
+      </el-button>
+      <el-button @click="cancel">
+        取消
+      </el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { S_list } from '@/api/supplier/supplier'
+import { C_list } from '@/api/product/category'
+import { update, add } from '@/api/product/brand'
+
+export default {
+  name: 'EditBrand',
+  watch: {
+    'brandForm.supplierIdsStr'(newValue, oldValue) {
+      this.brandForm.supplierIds[0] = newValue
+    }
+  },
+  data() {
+    return {
+      dialogFormVisible: false, // 对话框是否显示
+      dialogStatus: '', // 对话框类型：create,update,detail
+      brandForm: {
+        id: '',
+        brandName: '',
+        brandCode: '',
+        brandProperty: '',
+        supplierIds: [],
+        categoryIds: [],
+        supplierIdsStr: '',
+        remark: ''
+      }, // 表单
+      textMap: {
+        update: '编辑',
+        create: '新增',
+        detail: '详情'
+      }, // 表头显示标题
+      supplierIdList: [], // 供应商列表
+      categoryIdList: [], // 品类列表
+      rules: {
+        brandCode: [{ required: true, message: '编号不能为空', trigger: ['blur', 'change'] }],
+        brandName: [{ required: true, message: '品牌名称不能为空', trigger: ['blur', 'change'] }],
+        brandProperty: [{ required: true, message: '品牌性质不能为空', trigger: ['blur', 'change'] }],
+        supplierIds: [{ required: true, message: '供应商不能为空', trigger: ['blur', 'change'] }],
+        categoryIds: [{ required: true, message: '所属品类不能为空', trigger: ['blur', 'change'] }]
+      }, // 前端校验规则
+      isEditMode: false, // 编辑模式
+      isDetailMode: false // 详情模式
+    }
+  },
+  mounted() {
+    this.fetchBrandSupplier()
+    this.fetchBrandCategories()
+  },
+  methods: {
+    // 初始化对话框
+    initDialog: function(dialogStatus, row = null) {
+      this.dialogStatus = dialogStatus
+      this.dialogFormVisible = true
+      if (dialogStatus === 'create') { // 如果是新增，清除验证
+        this.resetForm()
+        this.isEditMode = false
+        this.isDetailMode = false
+        this.$nextTick(() => {
+          this.$refs['dataForm'].clearValidate()
+        })
+      } else if (dialogStatus === 'update') { // 如果是修改，将row中数据填写到输入框中
+        this.brandForm = {
+          id: row.id,
+          brandName: row.brandName,
+          brandCode: row.brandCode,
+          brandProperty: row.brandProperty,
+          supplierIds: [],
+          categoryIds: [],
+          remark: row.remark
+        }
+        // 设置供应商 选中
+        if (row.suppliers.length > 0) {
+          this.brandForm.supplierIds.push(row.suppliers[0].supplierId)
+          this.brandForm.supplierIdsStr = row.suppliers[0].supplierId
+        }
+        // 设置所属品类 选中
+        if (row.categorys.length > 0) {
+          row.categorys.forEach(item => {
+            this.brandForm.categoryIds.push(item.categoryId)
+          })
+        }
+        this.isEditMode = true
+        this.isDetailMode = false
+      } else {
+        this.brandForm = {
+          id: row.id,
+          brandName: row.brandName,
+          brandCode: row.brandCode,
+          supplierStr: row.supplierStr,
+          categoryStr: row.categoryStr,
+          brandProperty: row.brandProperty,
+          remark: row.remark
+        }
+        this.isEditMode = false
+        this.isDetailMode = true
+      }
+    },
+    // 重置表单
+    resetForm() {
+      this.brandForm = {
+        id: '',
+        brandName: '',
+        brandCode: '',
+        brandProperty: '',
+        supplierIds: [],
+        supplierIdsStr: '',
+        categoryIds: [],
+        remark: ''
+      }
+    },
+    // 保存数据
+    saveData: function() {
+      if (this.dialogStatus === 'update') {
+        this.updateData()
+      } else if (this.dialogStatus === 'create') {
+        this.createData()
+      }
+    },
+    // 新增数据
+    createData: function() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          add(this.brandForm).then(response => {
+            if (response === 200) {
+              this.$confirm('新增成功，是否继续新增?', '提示', {
+                confirmButtonText: '是',
+                cancelButtonText: '否',
+                type: 'info'
+              }).then(() => {
+                this.resetForm()
+                this.$nextTick(() => {
+                  this.$refs['dataForm'].clearValidate()
+                })
+              }).catch(() => {
+                this.$emit('refresh')
+                this.dialogFormVisible = false
+              })
+            }
+          })
+        }
+      })
+    },
+    // 修改数据
+    updateData: function() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          update(this.brandForm).then(response => {
+            if (response === 200) {
+              this.$message.success('修改成功')
+              this.$emit('refresh')
+              this.dialogFormVisible = false
+            }
+          })
+        }
+      })
+    },
+    // 获取品牌供应商
+    fetchBrandSupplier() {
+      S_list().then(response => {
+        this.supplierIdList = response
+      })
+    },
+    // 获取品牌所属品类
+    fetchBrandCategories() {
+      C_list().then(response => {
+        this.categoryIdList = response
+      })
+    },
+    cancel: function() {
+      this.dialogFormVisible = false
+      this.$emit('refresh')
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .el-select{
+    width: 100%;
+  }
+  .el-date-editor{
+    width: 100%;
+  }
+</style>