diff --git a/src/api/product/category.js b/src/api/product/category.js
index 19ff711..aea97c7 100644
--- a/src/api/product/category.js
+++ b/src/api/product/category.js
@@ -1,4 +1,3 @@
-import { instance } from '../request/http'
 /**
  * 品类相关接口
  */
@@ -21,7 +20,7 @@
   })
 }
 
-// 品类更新
+// 品类详情
 export function detail(data) {
   return request({
     url: `/categoryInfo/detail`,

diff --git a/src/api/product/category.js b/src/api/product/category.js
index 19ff711..aea97c7 100644
--- a/src/api/product/category.js
+++ b/src/api/product/category.js
@@ -1,4 +1,3 @@
-import { instance } from '../request/http'
 /**
  * 品类相关接口
  */
@@ -21,7 +20,7 @@
   })
 }
 
-// 品类更新
+// 品类详情
 export function detail(data) {
   return request({
     url: `/categoryInfo/detail`,
diff --git a/src/components/mycomponent/dialog/categoryAddDialog.vue b/src/components/mycomponent/dialog/categoryAddDialog.vue
index 4e547d4..c47e73c 100644
--- a/src/components/mycomponent/dialog/categoryAddDialog.vue
+++ b/src/components/mycomponent/dialog/categoryAddDialog.vue
@@ -8,19 +8,20 @@
     @close="close"
   >
     <div class="categoryDialog">
-      <div class="content">
-        <div class="inputContent">
-          <div class="inputbox">
-            <red-star />
-            <input-vue
-              v-model="categoryInfo.categoryCode"
-              title="编号"
-              class="inputWidth"
-            />
-          </div>
-          <div class="inputbox">
-            <red-star />
-            <input-vue title="上级品类" class="inputWidth">
+      <el-form ref="dataForm" :rules="rules" :model="categoryInfo" class="inputContent" label-position="right" label-width="100px">
+        <el-row :gutter="10">
+          <el-col :span="12">
+            <el-form-item label="编号" prop="categoryCode">
+              <el-input v-model="categoryInfo.categoryCode" placeholder="必填" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="名称" prop="categoryName">
+              <el-input v-model="categoryInfo.categoryName" placeholder="必填" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="上级品类" prop="pCategoryCode">
               <el-select
                 v-model="categoryInfo.pCategoryCode"
                 filterable
@@ -28,38 +29,20 @@
                 style="width: 100%"
               >
                 <el-option
+                  label="无"
+                  value=""
+                />
+                <el-option
                   v-for="item in categoryList"
                   :key="item.categoryCode"
                   :label="item.categoryName"
                   :value="item.categoryCode"
                 />
               </el-select>
-            </input-vue>
-          </div>
-          <div class="inputbox">
-            <red-star />
-            <input-vue title="备注" class="inputWidth">
-              <el-input
-                v-model="categoryInfo.remark"
-                type="textarea"
-                :rows="3"
-                placeholder="请输入内容"
-              />
-            </input-vue>
-          </div>
-        </div>
-        <div class="inputContent">
-          <div class="inputbox">
-            <red-star />
-            <input-vue
-              v-model="categoryInfo.categoryName"
-              title="名称"
-              class="inputWidth"
-            />
-          </div>
-          <div class="inputbox">
-            <red-star />
-            <input-vue title="资质要求" class="inputWidth">
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="资质要求" prop="qualifyIds">
               <el-select
                 v-model="categoryInfo.qualifyIds"
                 filterable
@@ -74,43 +57,49 @@
                   :value="item.id"
                 />
               </el-select>
-            </input-vue>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="备注" prop="remark">
+              <el-input
+                v-model="categoryInfo.remark"
+                type="textarea"
+                :rows="3"
+                placeholder="请输入内容"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <div class="AddContent">
+          <div class="addBtn">
+            <el-button type="primary" @click="pushAry">
+              添加产品参数
+            </el-button>
           </div>
-        </div>
-      </div>
-      <div class="AddContent">
-        <div class="addBtn">
-          <el-button type="primary" @click="pushAry">
-            添加产品参数
-          </el-button>
-        </div>
-        <div v-for=" (item,index) in categoryInfo.productParams" :key="index">
-          <div class="addItem">
-            <div class="devName item">
-              <red-star />
-              <input-vue v-model="item.paramName" title="名称" class="inputWidth" />
-            </div>
-            <div class="number item">
-              <red-star />
-              <input-vue title="排序" class="inputWidth">
-                <input-number v-model="item.paramOrder" />
-              </input-vue>
-            </div>
-            <div class="isRequire item">
-              <input-vue title="" class="inputWidth">
+          <div style="padding: 15px 20px">
+            <div v-for=" (item,index) of categoryInfo.productParams" :key="index" class="addItem">
+              <el-form-item label="名称" :prop="`productParams[${index}].paramName`" :rules="{required: true, message: `请输入名称`, trigger: ['change','blur']}" label-width="60px">
+                <el-input v-model="item.paramName" placeholder="必填" />
+              </el-form-item>
+              <el-form-item label="排序" :prop="`productParams[${index}].paramOrder`" :rules="{required: true, message: `请输入排序`, trigger: ['change','blur']}" label-width="60px">
+                <el-input-number v-model="item.paramOrder" :min="0" :max="9999" />
+              </el-form-item>
+              <div class="isRequire item" style="height:40px;margin-left: 20px">
                 <el-checkbox v-model="item.paramRequire" true-label="1" false-label="0">
                   必填
                 </el-checkbox>
-              </input-vue>
-            </div>
-            <div class="delete item">
-              <el-button type="primary" @click="removeAry(index)">
-                删除
-              </el-button>
+              </div>
+              <div class="delete item" style="margin-left: 15px">
+                <el-button type="primary" @click="removeAry(index)">
+                  删除
+                </el-button>
+              </div>
             </div>
           </div>
         </div>
-      </div>
+      </el-form>
+    </div>
+    <div slot="footer" class="dialog-footer">
       <div class="btnBox">
         <el-button type="primary" class="save" @click="save">
           保存
@@ -124,32 +113,23 @@
 </template>
 
 <script>
-import dialogHeader from './dialogHeader.vue'
-import inputVue from '../input/inputVue.vue'
-import InputNumber from '../input/inputNumber.vue'
-import RedStar from '../redStar.vue'
-import { Message } from 'element-ui'
 import { C_add, C_list, C_update, detail } from '../../../api/product/category'
 import { getCertification } from '../../../api/systemNew/systemNew'
 
 export default {
-  components: {
-    inputVue,
-    InputNumber,
-    RedStar
-  },
   props: {
     isShowInfo: {
       type: Boolean,
       default: true
     },
-    dataInfo: {
-      type: Object
-    },
-    title: ''
+    title: {
+      type: String,
+      default: ''
+    }
   },
   data() {
     return {
+      dialogType: '', // add新增，update
       // 品类信息
       categoryInfo: {
         categoryCode: '',
@@ -161,36 +141,19 @@
           {
             paramName: '',
             paramOrder: 0,
-            paramRequire: false
+            paramRequire: '0'
           }
         ]
       },
-      categoryList: [],
-      // 资质列表
-      certificationList: []
-    }
-  },
-  watch: {
-    dataInfo: {
-      handler(vla) {
-        if (vla !== '') {
-          // 编辑操作
-          if (!vla.id) return
-          detail({ id: vla.id }).then(res => {
-            this.categoryInfo.id = res.data.id
-            this.categoryInfo.categoryCode = res.data.categoryCode
-            this.categoryInfo.categoryName = res.data.categoryName
-            this.categoryInfo.pCategoryCode = res.data.pCategoryCode
-            this.categoryInfo.remark = res.data.remark
-            this.categoryInfo.qualifyIds = res.data.qualifyIds
-            this.categoryInfo.productParams = res.data.productParams
-          })
-        } else {
-          this.resetData()
-        }
+      rules: {
+        categoryCode: [{ required: true, message: '此项不能为空', trigger: ['blur', 'change'] }],
+        categoryName: [{ required: true, message: '此项不能为空', trigger: ['blur', 'change'] }],
+        pCategoryCode: [{ required: false, message: '此项不能为空', trigger: ['blur', 'change'] }],
+        qualifyIds: [{ type: 'array', required: true, message: '此项不能为空', trigger: ['blur', 'change'] }],
+        productParams: [{ required: true, message: '此项不能为空', trigger: ['blur', 'change'] }]
       },
-      deep: true,
-      immediate: true
+      categoryList: [], // 品类列表
+      certificationList: [] // 资质列表
     }
   },
   mounted() {
@@ -203,42 +166,73 @@
     })
   },
   methods: {
-    close() {
-      this.$emit('close')
-      // 重置数据
-      // this.resetData()
-    },
-    save() {
-      if (this.title == '品类新增') {
-        C_add(this.categoryInfo).then(res => {
-          if (res.code === 200) {
-            this.$message({
-              message: '保存成功',
-              type: 'success'
-            })
-
-            this.close()
-            // 保存后刷新数据
-            this.$emit('refresh')
-          }
+    initDialog(dialogType, row) {
+      this.dialogType = dialogType
+      if (dialogType === 'add') {
+        this.resetData()
+        this.$nextTick(() => {
+          this.$refs['dataForm'].clearValidate()
         })
       } else {
-        // this.categoryInfo.productParams = this.dealAry(this.categoryInfo.productParams)
-        console.log(this.categoryInfo.productParams)
-        debugger
-        C_update(this.categoryInfo).then(res => {
-          if (res.code === 200) {
-            this.$message({
-              message: '更新成功',
-              type: 'success'
+        if (!row.id) return
+        detail({ id: row.id }).then(res => {
+          this.categoryInfo = {
+            id: res.data.id,
+            categoryCode: res.data.categoryCode,
+            categoryName: res.data.categoryName,
+            pCategoryCode: res.data.pCategoryCode,
+            remark: res.data.remark,
+            qualifyIds: res.data.qualifyIds,
+            productParams: res.data.productParams.map(item => {
+              return {
+                paramName: item.paramName,
+                paramOrder: item.paramOrder,
+                paramRequire: item.paramRequire
+              }
             })
-            this.close()
-            // 保存后刷新数据
-            this.$emit('refresh')
           }
         })
       }
     },
+    close() {
+      this.$emit('close')
+      this.resetData()
+    },
+    save() {
+      this.$refs['dataForm'].validate((valid) => {
+        console.log(this.deptForm)
+        if (valid) {
+          if (this.title === '品类新增') {
+            C_add(this.categoryInfo).then(res => {
+              if (res.code === 200) {
+                this.$message({
+                  message: '保存成功',
+                  type: 'success'
+                })
+
+                this.close()
+                // 保存后刷新数据
+                this.$emit('refresh')
+              }
+            })
+          } else {
+            // this.categoryInfo.productParams = this.dealAry(this.categoryInfo.productParams)
+            console.log(this.categoryInfo.productParams)
+            C_update(this.categoryInfo).then(res => {
+              if (res.code === 200) {
+                this.$message({
+                  message: '更新成功',
+                  type: 'success'
+                })
+                this.close()
+                // 保存后刷新数据
+                this.$emit('refresh')
+              }
+            })
+          }
+        }
+      })
+    },
     resetData() {
       this.categoryInfo = {
         categoryCode: '',
@@ -250,7 +244,7 @@
           {
             paramName: '',
             paramOrder: 0,
-            paramRequire: false
+            paramRequire: '0'
           }
         ]
       }
@@ -264,7 +258,7 @@
       this.categoryInfo.productParams.push({
         paramName: '',
         paramOrder: 0,
-        paramRequire: false
+        paramRequire: '0'
       })
     }
   }
@@ -308,7 +302,7 @@
 
     .addItem {
       display: flex;
-
+      align-items: flex-start;
       .item {
         padding-right: 10px;
         display: flex;

diff --git a/src/api/product/category.js b/src/api/product/category.js
index 19ff711..aea97c7 100644
--- a/src/api/product/category.js
+++ b/src/api/product/category.js
@@ -1,4 +1,3 @@
-import { instance } from '../request/http'
 /**
  * 品类相关接口
  */
@@ -21,7 +20,7 @@
   })
 }
 
-// 品类更新
+// 品类详情
 export function detail(data) {
   return request({
     url: `/categoryInfo/detail`,
diff --git a/src/components/mycomponent/dialog/categoryAddDialog.vue b/src/components/mycomponent/dialog/categoryAddDialog.vue
index 4e547d4..c47e73c 100644
--- a/src/components/mycomponent/dialog/categoryAddDialog.vue
+++ b/src/components/mycomponent/dialog/categoryAddDialog.vue
@@ -8,19 +8,20 @@
     @close="close"
   >
     <div class="categoryDialog">
-      <div class="content">
-        <div class="inputContent">
-          <div class="inputbox">
-            <red-star />
-            <input-vue
-              v-model="categoryInfo.categoryCode"
-              title="编号"
-              class="inputWidth"
-            />
-          </div>
-          <div class="inputbox">
-            <red-star />
-            <input-vue title="上级品类" class="inputWidth">
+      <el-form ref="dataForm" :rules="rules" :model="categoryInfo" class="inputContent" label-position="right" label-width="100px">
+        <el-row :gutter="10">
+          <el-col :span="12">
+            <el-form-item label="编号" prop="categoryCode">
+              <el-input v-model="categoryInfo.categoryCode" placeholder="必填" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="名称" prop="categoryName">
+              <el-input v-model="categoryInfo.categoryName" placeholder="必填" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="上级品类" prop="pCategoryCode">
               <el-select
                 v-model="categoryInfo.pCategoryCode"
                 filterable
@@ -28,38 +29,20 @@
                 style="width: 100%"
               >
                 <el-option
+                  label="无"
+                  value=""
+                />
+                <el-option
                   v-for="item in categoryList"
                   :key="item.categoryCode"
                   :label="item.categoryName"
                   :value="item.categoryCode"
                 />
               </el-select>
-            </input-vue>
-          </div>
-          <div class="inputbox">
-            <red-star />
-            <input-vue title="备注" class="inputWidth">
-              <el-input
-                v-model="categoryInfo.remark"
-                type="textarea"
-                :rows="3"
-                placeholder="请输入内容"
-              />
-            </input-vue>
-          </div>
-        </div>
-        <div class="inputContent">
-          <div class="inputbox">
-            <red-star />
-            <input-vue
-              v-model="categoryInfo.categoryName"
-              title="名称"
-              class="inputWidth"
-            />
-          </div>
-          <div class="inputbox">
-            <red-star />
-            <input-vue title="资质要求" class="inputWidth">
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="资质要求" prop="qualifyIds">
               <el-select
                 v-model="categoryInfo.qualifyIds"
                 filterable
@@ -74,43 +57,49 @@
                   :value="item.id"
                 />
               </el-select>
-            </input-vue>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="备注" prop="remark">
+              <el-input
+                v-model="categoryInfo.remark"
+                type="textarea"
+                :rows="3"
+                placeholder="请输入内容"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <div class="AddContent">
+          <div class="addBtn">
+            <el-button type="primary" @click="pushAry">
+              添加产品参数
+            </el-button>
           </div>
-        </div>
-      </div>
-      <div class="AddContent">
-        <div class="addBtn">
-          <el-button type="primary" @click="pushAry">
-            添加产品参数
-          </el-button>
-        </div>
-        <div v-for=" (item,index) in categoryInfo.productParams" :key="index">
-          <div class="addItem">
-            <div class="devName item">
-              <red-star />
-              <input-vue v-model="item.paramName" title="名称" class="inputWidth" />
-            </div>
-            <div class="number item">
-              <red-star />
-              <input-vue title="排序" class="inputWidth">
-                <input-number v-model="item.paramOrder" />
-              </input-vue>
-            </div>
-            <div class="isRequire item">
-              <input-vue title="" class="inputWidth">
+          <div style="padding: 15px 20px">
+            <div v-for=" (item,index) of categoryInfo.productParams" :key="index" class="addItem">
+              <el-form-item label="名称" :prop="`productParams[${index}].paramName`" :rules="{required: true, message: `请输入名称`, trigger: ['change','blur']}" label-width="60px">
+                <el-input v-model="item.paramName" placeholder="必填" />
+              </el-form-item>
+              <el-form-item label="排序" :prop="`productParams[${index}].paramOrder`" :rules="{required: true, message: `请输入排序`, trigger: ['change','blur']}" label-width="60px">
+                <el-input-number v-model="item.paramOrder" :min="0" :max="9999" />
+              </el-form-item>
+              <div class="isRequire item" style="height:40px;margin-left: 20px">
                 <el-checkbox v-model="item.paramRequire" true-label="1" false-label="0">
                   必填
                 </el-checkbox>
-              </input-vue>
-            </div>
-            <div class="delete item">
-              <el-button type="primary" @click="removeAry(index)">
-                删除
-              </el-button>
+              </div>
+              <div class="delete item" style="margin-left: 15px">
+                <el-button type="primary" @click="removeAry(index)">
+                  删除
+                </el-button>
+              </div>
             </div>
           </div>
         </div>
-      </div>
+      </el-form>
+    </div>
+    <div slot="footer" class="dialog-footer">
       <div class="btnBox">
         <el-button type="primary" class="save" @click="save">
           保存
@@ -124,32 +113,23 @@
 </template>
 
 <script>
-import dialogHeader from './dialogHeader.vue'
-import inputVue from '../input/inputVue.vue'
-import InputNumber from '../input/inputNumber.vue'
-import RedStar from '../redStar.vue'
-import { Message } from 'element-ui'
 import { C_add, C_list, C_update, detail } from '../../../api/product/category'
 import { getCertification } from '../../../api/systemNew/systemNew'
 
 export default {
-  components: {
-    inputVue,
-    InputNumber,
-    RedStar
-  },
   props: {
     isShowInfo: {
       type: Boolean,
       default: true
     },
-    dataInfo: {
-      type: Object
-    },
-    title: ''
+    title: {
+      type: String,
+      default: ''
+    }
   },
   data() {
     return {
+      dialogType: '', // add新增，update
       // 品类信息
       categoryInfo: {
         categoryCode: '',
@@ -161,36 +141,19 @@
           {
             paramName: '',
             paramOrder: 0,
-            paramRequire: false
+            paramRequire: '0'
           }
         ]
       },
-      categoryList: [],
-      // 资质列表
-      certificationList: []
-    }
-  },
-  watch: {
-    dataInfo: {
-      handler(vla) {
-        if (vla !== '') {
-          // 编辑操作
-          if (!vla.id) return
-          detail({ id: vla.id }).then(res => {
-            this.categoryInfo.id = res.data.id
-            this.categoryInfo.categoryCode = res.data.categoryCode
-            this.categoryInfo.categoryName = res.data.categoryName
-            this.categoryInfo.pCategoryCode = res.data.pCategoryCode
-            this.categoryInfo.remark = res.data.remark
-            this.categoryInfo.qualifyIds = res.data.qualifyIds
-            this.categoryInfo.productParams = res.data.productParams
-          })
-        } else {
-          this.resetData()
-        }
+      rules: {
+        categoryCode: [{ required: true, message: '此项不能为空', trigger: ['blur', 'change'] }],
+        categoryName: [{ required: true, message: '此项不能为空', trigger: ['blur', 'change'] }],
+        pCategoryCode: [{ required: false, message: '此项不能为空', trigger: ['blur', 'change'] }],
+        qualifyIds: [{ type: 'array', required: true, message: '此项不能为空', trigger: ['blur', 'change'] }],
+        productParams: [{ required: true, message: '此项不能为空', trigger: ['blur', 'change'] }]
       },
-      deep: true,
-      immediate: true
+      categoryList: [], // 品类列表
+      certificationList: [] // 资质列表
     }
   },
   mounted() {
@@ -203,42 +166,73 @@
     })
   },
   methods: {
-    close() {
-      this.$emit('close')
-      // 重置数据
-      // this.resetData()
-    },
-    save() {
-      if (this.title == '品类新增') {
-        C_add(this.categoryInfo).then(res => {
-          if (res.code === 200) {
-            this.$message({
-              message: '保存成功',
-              type: 'success'
-            })
-
-            this.close()
-            // 保存后刷新数据
-            this.$emit('refresh')
-          }
+    initDialog(dialogType, row) {
+      this.dialogType = dialogType
+      if (dialogType === 'add') {
+        this.resetData()
+        this.$nextTick(() => {
+          this.$refs['dataForm'].clearValidate()
         })
       } else {
-        // this.categoryInfo.productParams = this.dealAry(this.categoryInfo.productParams)
-        console.log(this.categoryInfo.productParams)
-        debugger
-        C_update(this.categoryInfo).then(res => {
-          if (res.code === 200) {
-            this.$message({
-              message: '更新成功',
-              type: 'success'
+        if (!row.id) return
+        detail({ id: row.id }).then(res => {
+          this.categoryInfo = {
+            id: res.data.id,
+            categoryCode: res.data.categoryCode,
+            categoryName: res.data.categoryName,
+            pCategoryCode: res.data.pCategoryCode,
+            remark: res.data.remark,
+            qualifyIds: res.data.qualifyIds,
+            productParams: res.data.productParams.map(item => {
+              return {
+                paramName: item.paramName,
+                paramOrder: item.paramOrder,
+                paramRequire: item.paramRequire
+              }
             })
-            this.close()
-            // 保存后刷新数据
-            this.$emit('refresh')
           }
         })
       }
     },
+    close() {
+      this.$emit('close')
+      this.resetData()
+    },
+    save() {
+      this.$refs['dataForm'].validate((valid) => {
+        console.log(this.deptForm)
+        if (valid) {
+          if (this.title === '品类新增') {
+            C_add(this.categoryInfo).then(res => {
+              if (res.code === 200) {
+                this.$message({
+                  message: '保存成功',
+                  type: 'success'
+                })
+
+                this.close()
+                // 保存后刷新数据
+                this.$emit('refresh')
+              }
+            })
+          } else {
+            // this.categoryInfo.productParams = this.dealAry(this.categoryInfo.productParams)
+            console.log(this.categoryInfo.productParams)
+            C_update(this.categoryInfo).then(res => {
+              if (res.code === 200) {
+                this.$message({
+                  message: '更新成功',
+                  type: 'success'
+                })
+                this.close()
+                // 保存后刷新数据
+                this.$emit('refresh')
+              }
+            })
+          }
+        }
+      })
+    },
     resetData() {
       this.categoryInfo = {
         categoryCode: '',
@@ -250,7 +244,7 @@
           {
             paramName: '',
             paramOrder: 0,
-            paramRequire: false
+            paramRequire: '0'
           }
         ]
       }
@@ -264,7 +258,7 @@
       this.categoryInfo.productParams.push({
         paramName: '',
         paramOrder: 0,
-        paramRequire: false
+        paramRequire: '0'
       })
     }
   }
@@ -308,7 +302,7 @@
 
     .addItem {
       display: flex;
-
+      align-items: flex-start;
       .item {
         padding-right: 10px;
         display: flex;
diff --git a/src/components/mycomponent/dialog/categoryInfoDialog.vue b/src/components/mycomponent/dialog/categoryInfoDialog.vue
index be10d16..08a9d09 100644
--- a/src/components/mycomponent/dialog/categoryInfoDialog.vue
+++ b/src/components/mycomponent/dialog/categoryInfoDialog.vue
@@ -1,115 +1,94 @@
 <!--品类详情弹窗-->
 <template>
-  <el-dialog title="详情" width="920px" :visible.sync="isShowInfo" append-to-body @close="close">
-    <div class="contanier" v-if="dataInfo">
-      <div class="box">
-        <!--        <div class="item">-->
-        <!--          <div class="title">序号</div>-->
-        <!--          <div class="content"> {{ dataInfo.id }}</div>-->
-        <!--        </div>-->
-        <div class="item">
-          <div class="title">
-            编号
+  <el-dialog title="品类详情" width="920px" :visible.sync="isShowInfo" append-to-body @close="close">
+    <div v-if="form" class="contanier">
+      <el-descriptions class="margin-top" title="" :column="2" border>
+        <el-descriptions-item label="编号">
+          {{ form.categoryCode }}
+        </el-descriptions-item>
+        <el-descriptions-item label="名称">
+          {{ form.categoryName }}
+        </el-descriptions-item>
+        <el-descriptions-item label="父级品类">
+          {{ form.pCategoryName || '无' }}
+        </el-descriptions-item>
+        <el-descriptions-item label="资质要求">
+          {{ form.qualifyStr }}
+        </el-descriptions-item>
+        <el-descriptions-item label="备注" :span="2">
+          {{ form.remark }}
+        </el-descriptions-item>
+        <el-descriptions-item label="产品参数" :span="2">
+          <div v-for="(param,index) of form.productParams" class="param-line">
+            <span>参数{{ index+1 }}：</span>
+            <span class="param-name">参数名称:</span><span class="param-value">{{ param.paramName }}</span>
+            <span class="param-name">排序:</span><span class="param-value">{{ param.paramOrder }}</span>
+            <span class="param-name">必填:</span><span class="param-value">{{ param.paramRequire?'是':'否' }}</span>
           </div>
-          <div class="content">
-            {{ dataInfo.categoryCode }}
-          </div>
-        </div>
-      </div>
-      <div class="box">
-        <div class="item">
-          <div class="title">
-            品类名称
-          </div>
-          <div class="content">
-            {{ dataInfo.categoryName }}
-          </div>
-        </div>
-        <div class="item">
-          <div class="title">
-            创建时间
-          </div>
-          <div class="content">
-            {{ dataInfo.createTime }}
-          </div>
-        </div>
-      </div>
-      <div class="box">
-        <div class="item">
-          <div class="title">
-            ids
-          </div>
-          <div class="content">
-            {{ dataInfo.ids }}
-          </div>
-        </div>
-        <div class="item">
-          <div class="title">
-            父级品类编号
-          </div>
-          <div class="content">
-            {{ dataInfo.pCategoryCode }}
-          </div>
-        </div>
-      </div>
-      <div class="box">
-        <div class="item">
-          <div class="title">
-            父级品类名称
-          </div>
-          <div class="content">
-            {{ dataInfo.pCategoryName }}
-          </div>
-        </div>
-        <div class="item">
-          <div class="title">
-            供应商id
-          </div>
-          <div class="content">
-            {{ dataInfo.qualifyIds }}
-          </div>
-        </div>
-      </div>
-      <div class="box">
-        <div class="item">
-          <div class="title">
-            供应商名称
-          </div>
-          <div class="content">
-            {{ dataInfo.qualifyStr }}
-          </div>
-        </div>
-        <div class="item">
-          <div class="title">
-            更新时间
-          </div>
-          <div class="content">
-            {{ dataInfo.updateTime }}
-          </div>
-        </div>
-      </div>
-      <div class="box">
-        <div class="item">
-          <div class="title">
-            备注
-          </div>
-          <div class="content">
-            {{ dataInfo.remark }}
-          </div>
-        </div>
-      </div>
+        </el-descriptions-item>
+      </el-descriptions>
     </div>
   </el-dialog>
 </template>
 
 <script>
-import { infoDialog } from '../../../utils/myUtils/mixins/infoDialog' // 抽离porp 和 methods
+import { detail } from '@/api/product/category'
+
 export default {
-  mixins: [infoDialog]
+  props: {
+    isShowInfo: {
+      type: Boolean,
+      default: true
+    },
+    dataInfo: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    }
+  },
+  data() {
+    return {
+      form: {
+        categoryCode: '',
+        categoryName: '',
+        pCategoryName: '',
+        remark: '',
+        qualifyStr: '',
+        productParams: [
+          {
+            paramName: '',
+            paramOrder: 0,
+            paramRequire: '0'
+          }
+        ]
+      }
+    }
+  },
+  methods: {
+    initDialog(id) {
+      detail({ id }).then(res => {
+        this.form = res.data
+      })
+    },
+    close() {
+      this.$emit('close')
+    }
+  }
 }
 </script>
 
 <style lang="scss" scoped>
 @import '../../../assets/css/infoDialog.scss';
+.param-line{
+  line-height: 1.8;
+  .param-name{
+    margin-left: 10px;
+  }
+  .param-value{
+    font-weight: bold;
+    margin-left: 5px;
+  }
+}
 
 </style>

diff --git a/src/api/product/category.js b/src/api/product/category.js
index 19ff711..aea97c7 100644
--- a/src/api/product/category.js
+++ b/src/api/product/category.js
@@ -1,4 +1,3 @@
-import { instance } from '../request/http'
 /**
  * 品类相关接口
  */
@@ -21,7 +20,7 @@
   })
 }
 
-// 品类更新
+// 品类详情
 export function detail(data) {
   return request({
     url: `/categoryInfo/detail`,
diff --git a/src/components/mycomponent/dialog/categoryAddDialog.vue b/src/components/mycomponent/dialog/categoryAddDialog.vue
index 4e547d4..c47e73c 100644
--- a/src/components/mycomponent/dialog/categoryAddDialog.vue
+++ b/src/components/mycomponent/dialog/categoryAddDialog.vue
@@ -8,19 +8,20 @@
     @close="close"
   >
     <div class="categoryDialog">
-      <div class="content">
-        <div class="inputContent">
-          <div class="inputbox">
-            <red-star />
-            <input-vue
-              v-model="categoryInfo.categoryCode"
-              title="编号"
-              class="inputWidth"
-            />
-          </div>
-          <div class="inputbox">
-            <red-star />
-            <input-vue title="上级品类" class="inputWidth">
+      <el-form ref="dataForm" :rules="rules" :model="categoryInfo" class="inputContent" label-position="right" label-width="100px">
+        <el-row :gutter="10">
+          <el-col :span="12">
+            <el-form-item label="编号" prop="categoryCode">
+              <el-input v-model="categoryInfo.categoryCode" placeholder="必填" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="名称" prop="categoryName">
+              <el-input v-model="categoryInfo.categoryName" placeholder="必填" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="上级品类" prop="pCategoryCode">
               <el-select
                 v-model="categoryInfo.pCategoryCode"
                 filterable
@@ -28,38 +29,20 @@
                 style="width: 100%"
               >
                 <el-option
+                  label="无"
+                  value=""
+                />
+                <el-option
                   v-for="item in categoryList"
                   :key="item.categoryCode"
                   :label="item.categoryName"
                   :value="item.categoryCode"
                 />
               </el-select>
-            </input-vue>
-          </div>
-          <div class="inputbox">
-            <red-star />
-            <input-vue title="备注" class="inputWidth">
-              <el-input
-                v-model="categoryInfo.remark"
-                type="textarea"
-                :rows="3"
-                placeholder="请输入内容"
-              />
-            </input-vue>
-          </div>
-        </div>
-        <div class="inputContent">
-          <div class="inputbox">
-            <red-star />
-            <input-vue
-              v-model="categoryInfo.categoryName"
-              title="名称"
-              class="inputWidth"
-            />
-          </div>
-          <div class="inputbox">
-            <red-star />
-            <input-vue title="资质要求" class="inputWidth">
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="资质要求" prop="qualifyIds">
               <el-select
                 v-model="categoryInfo.qualifyIds"
                 filterable
@@ -74,43 +57,49 @@
                   :value="item.id"
                 />
               </el-select>
-            </input-vue>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="备注" prop="remark">
+              <el-input
+                v-model="categoryInfo.remark"
+                type="textarea"
+                :rows="3"
+                placeholder="请输入内容"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <div class="AddContent">
+          <div class="addBtn">
+            <el-button type="primary" @click="pushAry">
+              添加产品参数
+            </el-button>
           </div>
-        </div>
-      </div>
-      <div class="AddContent">
-        <div class="addBtn">
-          <el-button type="primary" @click="pushAry">
-            添加产品参数
-          </el-button>
-        </div>
-        <div v-for=" (item,index) in categoryInfo.productParams" :key="index">
-          <div class="addItem">
-            <div class="devName item">
-              <red-star />
-              <input-vue v-model="item.paramName" title="名称" class="inputWidth" />
-            </div>
-            <div class="number item">
-              <red-star />
-              <input-vue title="排序" class="inputWidth">
-                <input-number v-model="item.paramOrder" />
-              </input-vue>
-            </div>
-            <div class="isRequire item">
-              <input-vue title="" class="inputWidth">
+          <div style="padding: 15px 20px">
+            <div v-for=" (item,index) of categoryInfo.productParams" :key="index" class="addItem">
+              <el-form-item label="名称" :prop="`productParams[${index}].paramName`" :rules="{required: true, message: `请输入名称`, trigger: ['change','blur']}" label-width="60px">
+                <el-input v-model="item.paramName" placeholder="必填" />
+              </el-form-item>
+              <el-form-item label="排序" :prop="`productParams[${index}].paramOrder`" :rules="{required: true, message: `请输入排序`, trigger: ['change','blur']}" label-width="60px">
+                <el-input-number v-model="item.paramOrder" :min="0" :max="9999" />
+              </el-form-item>
+              <div class="isRequire item" style="height:40px;margin-left: 20px">
                 <el-checkbox v-model="item.paramRequire" true-label="1" false-label="0">
                   必填
                 </el-checkbox>
-              </input-vue>
-            </div>
-            <div class="delete item">
-              <el-button type="primary" @click="removeAry(index)">
-                删除
-              </el-button>
+              </div>
+              <div class="delete item" style="margin-left: 15px">
+                <el-button type="primary" @click="removeAry(index)">
+                  删除
+                </el-button>
+              </div>
             </div>
           </div>
         </div>
-      </div>
+      </el-form>
+    </div>
+    <div slot="footer" class="dialog-footer">
       <div class="btnBox">
         <el-button type="primary" class="save" @click="save">
           保存
@@ -124,32 +113,23 @@
 </template>
 
 <script>
-import dialogHeader from './dialogHeader.vue'
-import inputVue from '../input/inputVue.vue'
-import InputNumber from '../input/inputNumber.vue'
-import RedStar from '../redStar.vue'
-import { Message } from 'element-ui'
 import { C_add, C_list, C_update, detail } from '../../../api/product/category'
 import { getCertification } from '../../../api/systemNew/systemNew'
 
 export default {
-  components: {
-    inputVue,
-    InputNumber,
-    RedStar
-  },
   props: {
     isShowInfo: {
       type: Boolean,
       default: true
     },
-    dataInfo: {
-      type: Object
-    },
-    title: ''
+    title: {
+      type: String,
+      default: ''
+    }
   },
   data() {
     return {
+      dialogType: '', // add新增，update
       // 品类信息
       categoryInfo: {
         categoryCode: '',
@@ -161,36 +141,19 @@
           {
             paramName: '',
             paramOrder: 0,
-            paramRequire: false
+            paramRequire: '0'
           }
         ]
       },
-      categoryList: [],
-      // 资质列表
-      certificationList: []
-    }
-  },
-  watch: {
-    dataInfo: {
-      handler(vla) {
-        if (vla !== '') {
-          // 编辑操作
-          if (!vla.id) return
-          detail({ id: vla.id }).then(res => {
-            this.categoryInfo.id = res.data.id
-            this.categoryInfo.categoryCode = res.data.categoryCode
-            this.categoryInfo.categoryName = res.data.categoryName
-            this.categoryInfo.pCategoryCode = res.data.pCategoryCode
-            this.categoryInfo.remark = res.data.remark
-            this.categoryInfo.qualifyIds = res.data.qualifyIds
-            this.categoryInfo.productParams = res.data.productParams
-          })
-        } else {
-          this.resetData()
-        }
+      rules: {
+        categoryCode: [{ required: true, message: '此项不能为空', trigger: ['blur', 'change'] }],
+        categoryName: [{ required: true, message: '此项不能为空', trigger: ['blur', 'change'] }],
+        pCategoryCode: [{ required: false, message: '此项不能为空', trigger: ['blur', 'change'] }],
+        qualifyIds: [{ type: 'array', required: true, message: '此项不能为空', trigger: ['blur', 'change'] }],
+        productParams: [{ required: true, message: '此项不能为空', trigger: ['blur', 'change'] }]
       },
-      deep: true,
-      immediate: true
+      categoryList: [], // 品类列表
+      certificationList: [] // 资质列表
     }
   },
   mounted() {
@@ -203,42 +166,73 @@
     })
   },
   methods: {
-    close() {
-      this.$emit('close')
-      // 重置数据
-      // this.resetData()
-    },
-    save() {
-      if (this.title == '品类新增') {
-        C_add(this.categoryInfo).then(res => {
-          if (res.code === 200) {
-            this.$message({
-              message: '保存成功',
-              type: 'success'
-            })
-
-            this.close()
-            // 保存后刷新数据
-            this.$emit('refresh')
-          }
+    initDialog(dialogType, row) {
+      this.dialogType = dialogType
+      if (dialogType === 'add') {
+        this.resetData()
+        this.$nextTick(() => {
+          this.$refs['dataForm'].clearValidate()
         })
       } else {
-        // this.categoryInfo.productParams = this.dealAry(this.categoryInfo.productParams)
-        console.log(this.categoryInfo.productParams)
-        debugger
-        C_update(this.categoryInfo).then(res => {
-          if (res.code === 200) {
-            this.$message({
-              message: '更新成功',
-              type: 'success'
+        if (!row.id) return
+        detail({ id: row.id }).then(res => {
+          this.categoryInfo = {
+            id: res.data.id,
+            categoryCode: res.data.categoryCode,
+            categoryName: res.data.categoryName,
+            pCategoryCode: res.data.pCategoryCode,
+            remark: res.data.remark,
+            qualifyIds: res.data.qualifyIds,
+            productParams: res.data.productParams.map(item => {
+              return {
+                paramName: item.paramName,
+                paramOrder: item.paramOrder,
+                paramRequire: item.paramRequire
+              }
             })
-            this.close()
-            // 保存后刷新数据
-            this.$emit('refresh')
           }
         })
       }
     },
+    close() {
+      this.$emit('close')
+      this.resetData()
+    },
+    save() {
+      this.$refs['dataForm'].validate((valid) => {
+        console.log(this.deptForm)
+        if (valid) {
+          if (this.title === '品类新增') {
+            C_add(this.categoryInfo).then(res => {
+              if (res.code === 200) {
+                this.$message({
+                  message: '保存成功',
+                  type: 'success'
+                })
+
+                this.close()
+                // 保存后刷新数据
+                this.$emit('refresh')
+              }
+            })
+          } else {
+            // this.categoryInfo.productParams = this.dealAry(this.categoryInfo.productParams)
+            console.log(this.categoryInfo.productParams)
+            C_update(this.categoryInfo).then(res => {
+              if (res.code === 200) {
+                this.$message({
+                  message: '更新成功',
+                  type: 'success'
+                })
+                this.close()
+                // 保存后刷新数据
+                this.$emit('refresh')
+              }
+            })
+          }
+        }
+      })
+    },
     resetData() {
       this.categoryInfo = {
         categoryCode: '',
@@ -250,7 +244,7 @@
           {
             paramName: '',
             paramOrder: 0,
-            paramRequire: false
+            paramRequire: '0'
           }
         ]
       }
@@ -264,7 +258,7 @@
       this.categoryInfo.productParams.push({
         paramName: '',
         paramOrder: 0,
-        paramRequire: false
+        paramRequire: '0'
       })
     }
   }
@@ -308,7 +302,7 @@
 
     .addItem {
       display: flex;
-
+      align-items: flex-start;
       .item {
         padding-right: 10px;
         display: flex;
diff --git a/src/components/mycomponent/dialog/categoryInfoDialog.vue b/src/components/mycomponent/dialog/categoryInfoDialog.vue
index be10d16..08a9d09 100644
--- a/src/components/mycomponent/dialog/categoryInfoDialog.vue
+++ b/src/components/mycomponent/dialog/categoryInfoDialog.vue
@@ -1,115 +1,94 @@
 <!--品类详情弹窗-->
 <template>
-  <el-dialog title="详情" width="920px" :visible.sync="isShowInfo" append-to-body @close="close">
-    <div class="contanier" v-if="dataInfo">
-      <div class="box">
-        <!--        <div class="item">-->
-        <!--          <div class="title">序号</div>-->
-        <!--          <div class="content"> {{ dataInfo.id }}</div>-->
-        <!--        </div>-->
-        <div class="item">
-          <div class="title">
-            编号
+  <el-dialog title="品类详情" width="920px" :visible.sync="isShowInfo" append-to-body @close="close">
+    <div v-if="form" class="contanier">
+      <el-descriptions class="margin-top" title="" :column="2" border>
+        <el-descriptions-item label="编号">
+          {{ form.categoryCode }}
+        </el-descriptions-item>
+        <el-descriptions-item label="名称">
+          {{ form.categoryName }}
+        </el-descriptions-item>
+        <el-descriptions-item label="父级品类">
+          {{ form.pCategoryName || '无' }}
+        </el-descriptions-item>
+        <el-descriptions-item label="资质要求">
+          {{ form.qualifyStr }}
+        </el-descriptions-item>
+        <el-descriptions-item label="备注" :span="2">
+          {{ form.remark }}
+        </el-descriptions-item>
+        <el-descriptions-item label="产品参数" :span="2">
+          <div v-for="(param,index) of form.productParams" class="param-line">
+            <span>参数{{ index+1 }}：</span>
+            <span class="param-name">参数名称:</span><span class="param-value">{{ param.paramName }}</span>
+            <span class="param-name">排序:</span><span class="param-value">{{ param.paramOrder }}</span>
+            <span class="param-name">必填:</span><span class="param-value">{{ param.paramRequire?'是':'否' }}</span>
           </div>
-          <div class="content">
-            {{ dataInfo.categoryCode }}
-          </div>
-        </div>
-      </div>
-      <div class="box">
-        <div class="item">
-          <div class="title">
-            品类名称
-          </div>
-          <div class="content">
-            {{ dataInfo.categoryName }}
-          </div>
-        </div>
-        <div class="item">
-          <div class="title">
-            创建时间
-          </div>
-          <div class="content">
-            {{ dataInfo.createTime }}
-          </div>
-        </div>
-      </div>
-      <div class="box">
-        <div class="item">
-          <div class="title">
-            ids
-          </div>
-          <div class="content">
-            {{ dataInfo.ids }}
-          </div>
-        </div>
-        <div class="item">
-          <div class="title">
-            父级品类编号
-          </div>
-          <div class="content">
-            {{ dataInfo.pCategoryCode }}
-          </div>
-        </div>
-      </div>
-      <div class="box">
-        <div class="item">
-          <div class="title">
-            父级品类名称
-          </div>
-          <div class="content">
-            {{ dataInfo.pCategoryName }}
-          </div>
-        </div>
-        <div class="item">
-          <div class="title">
-            供应商id
-          </div>
-          <div class="content">
-            {{ dataInfo.qualifyIds }}
-          </div>
-        </div>
-      </div>
-      <div class="box">
-        <div class="item">
-          <div class="title">
-            供应商名称
-          </div>
-          <div class="content">
-            {{ dataInfo.qualifyStr }}
-          </div>
-        </div>
-        <div class="item">
-          <div class="title">
-            更新时间
-          </div>
-          <div class="content">
-            {{ dataInfo.updateTime }}
-          </div>
-        </div>
-      </div>
-      <div class="box">
-        <div class="item">
-          <div class="title">
-            备注
-          </div>
-          <div class="content">
-            {{ dataInfo.remark }}
-          </div>
-        </div>
-      </div>
+        </el-descriptions-item>
+      </el-descriptions>
     </div>
   </el-dialog>
 </template>
 
 <script>
-import { infoDialog } from '../../../utils/myUtils/mixins/infoDialog' // 抽离porp 和 methods
+import { detail } from '@/api/product/category'
+
 export default {
-  mixins: [infoDialog]
+  props: {
+    isShowInfo: {
+      type: Boolean,
+      default: true
+    },
+    dataInfo: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    }
+  },
+  data() {
+    return {
+      form: {
+        categoryCode: '',
+        categoryName: '',
+        pCategoryName: '',
+        remark: '',
+        qualifyStr: '',
+        productParams: [
+          {
+            paramName: '',
+            paramOrder: 0,
+            paramRequire: '0'
+          }
+        ]
+      }
+    }
+  },
+  methods: {
+    initDialog(id) {
+      detail({ id }).then(res => {
+        this.form = res.data
+      })
+    },
+    close() {
+      this.$emit('close')
+    }
+  }
 }
 </script>
 
 <style lang="scss" scoped>
 @import '../../../assets/css/infoDialog.scss';
+.param-line{
+  line-height: 1.8;
+  .param-name{
+    margin-left: 10px;
+  }
+  .param-value{
+    font-weight: bold;
+    margin-left: 5px;
+  }
+}
 
 </style>
diff --git a/src/components/mycomponent/groupPage.vue b/src/components/mycomponent/groupPage.vue
index aa62667..666edc1 100644
--- a/src/components/mycomponent/groupPage.vue
+++ b/src/components/mycomponent/groupPage.vue
@@ -3,10 +3,16 @@
   <div class="footer">
     <div>共{{ total }}页记录 第{{ offset }}/{{ total }}页</div>
     <div>
-      <el-pagination :current-page.sync="offset" background layout="  prev, pager, next,sizes, jumper"
-                     :page-size="limit" :total="count" @size-change="changeSize" @current-change="changeOffset"
-                     ref="compontentPage">
-      </el-pagination>
+      <el-pagination
+        ref="compontentPage"
+        :current-page.sync="offset"
+        background
+        layout="  prev, pager, next,sizes, jumper"
+        :page-size="limit"
+        :total="count"
+        @size-change="changeSize"
+        @current-change="changeOffset"
+      />
     </div>
     <!-- <div>页码</div> -->
   </div>
@@ -14,39 +20,50 @@
 
 <script>
 export default {
-  data() {
-    return {}
-  },
-  props: {
-    total: {
-      // 总页数
-      type: Number,
-      default: 1,
-    },
-    offset: {
-      // 当前页
-      type: Number,
-      default: 1,
-    },
-    count: {
-      // 总条数
-      type: Number,
-      default: 10,
-    },
-    limit: {
-      // 当前页条数
-      type: Number,
-      default: 10,
-    },
-    isFristPage: {
-      type: Boolean,
-      default: false,
-    }
-  },
   model: {
     prop: 'isFristPage',
     event: 'changeFristPage'
   },
+  props: {
+    // 总页数
+    total: {
+      type: Number,
+      default: 1
+    },
+    // 当前页
+    offset: {
+      type: Number,
+      default: 1
+    },
+    // 总条数
+    count: {
+      type: Number,
+      default: 10
+    },
+    // 当前页条数
+    limit: {
+      type: Number,
+      default: 10
+    },
+    // 是否为第一页
+    isFristPage: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {}
+  },
+  watch: {
+    isFristPage(current) {
+      if (current) {
+        console.log(current)
+        // 分页组件跳转到第一页
+        this.$refs.compontentPage.handleCurrentChange(1)
+        this.$emit('changeFristPage', false)
+      }
+    }
+  },
   methods: {
     // 当前条数改变时触发
     changeSize(res) {
@@ -61,24 +78,12 @@
       //   }
 
       // 发送每页条数数量
-      this.$emit("setLimit", res);
+      this.$emit('setLimit', res)
     },
     // 当前页码改变时触发
     changeOffset(index) {
       // console.log(index,"currentPage");
-      this.$emit("setOffset", index);
-    },
-  },
-  watch: {
-    isFristPage(current) {
-
-      if (current) {
-        console.log(current);
-        // 分页组件跳转到第一页
-        this.$refs.compontentPage.handleCurrentChange(1)
-        this.$emit('changeFristPage', false)
-      }
-
+      this.$emit('setOffset', index)
     }
   }
 }

diff --git a/src/api/product/category.js b/src/api/product/category.js
index 19ff711..aea97c7 100644
--- a/src/api/product/category.js
+++ b/src/api/product/category.js
@@ -1,4 +1,3 @@
-import { instance } from '../request/http'
 /**
  * 品类相关接口
  */
@@ -21,7 +20,7 @@
   })
 }
 
-// 品类更新
+// 品类详情
 export function detail(data) {
   return request({
     url: `/categoryInfo/detail`,
diff --git a/src/components/mycomponent/dialog/categoryAddDialog.vue b/src/components/mycomponent/dialog/categoryAddDialog.vue
index 4e547d4..c47e73c 100644
--- a/src/components/mycomponent/dialog/categoryAddDialog.vue
+++ b/src/components/mycomponent/dialog/categoryAddDialog.vue
@@ -8,19 +8,20 @@
     @close="close"
   >
     <div class="categoryDialog">
-      <div class="content">
-        <div class="inputContent">
-          <div class="inputbox">
-            <red-star />
-            <input-vue
-              v-model="categoryInfo.categoryCode"
-              title="编号"
-              class="inputWidth"
-            />
-          </div>
-          <div class="inputbox">
-            <red-star />
-            <input-vue title="上级品类" class="inputWidth">
+      <el-form ref="dataForm" :rules="rules" :model="categoryInfo" class="inputContent" label-position="right" label-width="100px">
+        <el-row :gutter="10">
+          <el-col :span="12">
+            <el-form-item label="编号" prop="categoryCode">
+              <el-input v-model="categoryInfo.categoryCode" placeholder="必填" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="名称" prop="categoryName">
+              <el-input v-model="categoryInfo.categoryName" placeholder="必填" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="上级品类" prop="pCategoryCode">
               <el-select
                 v-model="categoryInfo.pCategoryCode"
                 filterable
@@ -28,38 +29,20 @@
                 style="width: 100%"
               >
                 <el-option
+                  label="无"
+                  value=""
+                />
+                <el-option
                   v-for="item in categoryList"
                   :key="item.categoryCode"
                   :label="item.categoryName"
                   :value="item.categoryCode"
                 />
               </el-select>
-            </input-vue>
-          </div>
-          <div class="inputbox">
-            <red-star />
-            <input-vue title="备注" class="inputWidth">
-              <el-input
-                v-model="categoryInfo.remark"
-                type="textarea"
-                :rows="3"
-                placeholder="请输入内容"
-              />
-            </input-vue>
-          </div>
-        </div>
-        <div class="inputContent">
-          <div class="inputbox">
-            <red-star />
-            <input-vue
-              v-model="categoryInfo.categoryName"
-              title="名称"
-              class="inputWidth"
-            />
-          </div>
-          <div class="inputbox">
-            <red-star />
-            <input-vue title="资质要求" class="inputWidth">
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="资质要求" prop="qualifyIds">
               <el-select
                 v-model="categoryInfo.qualifyIds"
                 filterable
@@ -74,43 +57,49 @@
                   :value="item.id"
                 />
               </el-select>
-            </input-vue>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="备注" prop="remark">
+              <el-input
+                v-model="categoryInfo.remark"
+                type="textarea"
+                :rows="3"
+                placeholder="请输入内容"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <div class="AddContent">
+          <div class="addBtn">
+            <el-button type="primary" @click="pushAry">
+              添加产品参数
+            </el-button>
           </div>
-        </div>
-      </div>
-      <div class="AddContent">
-        <div class="addBtn">
-          <el-button type="primary" @click="pushAry">
-            添加产品参数
-          </el-button>
-        </div>
-        <div v-for=" (item,index) in categoryInfo.productParams" :key="index">
-          <div class="addItem">
-            <div class="devName item">
-              <red-star />
-              <input-vue v-model="item.paramName" title="名称" class="inputWidth" />
-            </div>
-            <div class="number item">
-              <red-star />
-              <input-vue title="排序" class="inputWidth">
-                <input-number v-model="item.paramOrder" />
-              </input-vue>
-            </div>
-            <div class="isRequire item">
-              <input-vue title="" class="inputWidth">
+          <div style="padding: 15px 20px">
+            <div v-for=" (item,index) of categoryInfo.productParams" :key="index" class="addItem">
+              <el-form-item label="名称" :prop="`productParams[${index}].paramName`" :rules="{required: true, message: `请输入名称`, trigger: ['change','blur']}" label-width="60px">
+                <el-input v-model="item.paramName" placeholder="必填" />
+              </el-form-item>
+              <el-form-item label="排序" :prop="`productParams[${index}].paramOrder`" :rules="{required: true, message: `请输入排序`, trigger: ['change','blur']}" label-width="60px">
+                <el-input-number v-model="item.paramOrder" :min="0" :max="9999" />
+              </el-form-item>
+              <div class="isRequire item" style="height:40px;margin-left: 20px">
                 <el-checkbox v-model="item.paramRequire" true-label="1" false-label="0">
                   必填
                 </el-checkbox>
-              </input-vue>
-            </div>
-            <div class="delete item">
-              <el-button type="primary" @click="removeAry(index)">
-                删除
-              </el-button>
+              </div>
+              <div class="delete item" style="margin-left: 15px">
+                <el-button type="primary" @click="removeAry(index)">
+                  删除
+                </el-button>
+              </div>
             </div>
           </div>
         </div>
-      </div>
+      </el-form>
+    </div>
+    <div slot="footer" class="dialog-footer">
       <div class="btnBox">
         <el-button type="primary" class="save" @click="save">
           保存
@@ -124,32 +113,23 @@
 </template>
 
 <script>
-import dialogHeader from './dialogHeader.vue'
-import inputVue from '../input/inputVue.vue'
-import InputNumber from '../input/inputNumber.vue'
-import RedStar from '../redStar.vue'
-import { Message } from 'element-ui'
 import { C_add, C_list, C_update, detail } from '../../../api/product/category'
 import { getCertification } from '../../../api/systemNew/systemNew'
 
 export default {
-  components: {
-    inputVue,
-    InputNumber,
-    RedStar
-  },
   props: {
     isShowInfo: {
       type: Boolean,
       default: true
     },
-    dataInfo: {
-      type: Object
-    },
-    title: ''
+    title: {
+      type: String,
+      default: ''
+    }
   },
   data() {
     return {
+      dialogType: '', // add新增，update
       // 品类信息
       categoryInfo: {
         categoryCode: '',
@@ -161,36 +141,19 @@
           {
             paramName: '',
             paramOrder: 0,
-            paramRequire: false
+            paramRequire: '0'
           }
         ]
       },
-      categoryList: [],
-      // 资质列表
-      certificationList: []
-    }
-  },
-  watch: {
-    dataInfo: {
-      handler(vla) {
-        if (vla !== '') {
-          // 编辑操作
-          if (!vla.id) return
-          detail({ id: vla.id }).then(res => {
-            this.categoryInfo.id = res.data.id
-            this.categoryInfo.categoryCode = res.data.categoryCode
-            this.categoryInfo.categoryName = res.data.categoryName
-            this.categoryInfo.pCategoryCode = res.data.pCategoryCode
-            this.categoryInfo.remark = res.data.remark
-            this.categoryInfo.qualifyIds = res.data.qualifyIds
-            this.categoryInfo.productParams = res.data.productParams
-          })
-        } else {
-          this.resetData()
-        }
+      rules: {
+        categoryCode: [{ required: true, message: '此项不能为空', trigger: ['blur', 'change'] }],
+        categoryName: [{ required: true, message: '此项不能为空', trigger: ['blur', 'change'] }],
+        pCategoryCode: [{ required: false, message: '此项不能为空', trigger: ['blur', 'change'] }],
+        qualifyIds: [{ type: 'array', required: true, message: '此项不能为空', trigger: ['blur', 'change'] }],
+        productParams: [{ required: true, message: '此项不能为空', trigger: ['blur', 'change'] }]
       },
-      deep: true,
-      immediate: true
+      categoryList: [], // 品类列表
+      certificationList: [] // 资质列表
     }
   },
   mounted() {
@@ -203,42 +166,73 @@
     })
   },
   methods: {
-    close() {
-      this.$emit('close')
-      // 重置数据
-      // this.resetData()
-    },
-    save() {
-      if (this.title == '品类新增') {
-        C_add(this.categoryInfo).then(res => {
-          if (res.code === 200) {
-            this.$message({
-              message: '保存成功',
-              type: 'success'
-            })
-
-            this.close()
-            // 保存后刷新数据
-            this.$emit('refresh')
-          }
+    initDialog(dialogType, row) {
+      this.dialogType = dialogType
+      if (dialogType === 'add') {
+        this.resetData()
+        this.$nextTick(() => {
+          this.$refs['dataForm'].clearValidate()
         })
       } else {
-        // this.categoryInfo.productParams = this.dealAry(this.categoryInfo.productParams)
-        console.log(this.categoryInfo.productParams)
-        debugger
-        C_update(this.categoryInfo).then(res => {
-          if (res.code === 200) {
-            this.$message({
-              message: '更新成功',
-              type: 'success'
+        if (!row.id) return
+        detail({ id: row.id }).then(res => {
+          this.categoryInfo = {
+            id: res.data.id,
+            categoryCode: res.data.categoryCode,
+            categoryName: res.data.categoryName,
+            pCategoryCode: res.data.pCategoryCode,
+            remark: res.data.remark,
+            qualifyIds: res.data.qualifyIds,
+            productParams: res.data.productParams.map(item => {
+              return {
+                paramName: item.paramName,
+                paramOrder: item.paramOrder,
+                paramRequire: item.paramRequire
+              }
             })
-            this.close()
-            // 保存后刷新数据
-            this.$emit('refresh')
           }
         })
       }
     },
+    close() {
+      this.$emit('close')
+      this.resetData()
+    },
+    save() {
+      this.$refs['dataForm'].validate((valid) => {
+        console.log(this.deptForm)
+        if (valid) {
+          if (this.title === '品类新增') {
+            C_add(this.categoryInfo).then(res => {
+              if (res.code === 200) {
+                this.$message({
+                  message: '保存成功',
+                  type: 'success'
+                })
+
+                this.close()
+                // 保存后刷新数据
+                this.$emit('refresh')
+              }
+            })
+          } else {
+            // this.categoryInfo.productParams = this.dealAry(this.categoryInfo.productParams)
+            console.log(this.categoryInfo.productParams)
+            C_update(this.categoryInfo).then(res => {
+              if (res.code === 200) {
+                this.$message({
+                  message: '更新成功',
+                  type: 'success'
+                })
+                this.close()
+                // 保存后刷新数据
+                this.$emit('refresh')
+              }
+            })
+          }
+        }
+      })
+    },
     resetData() {
       this.categoryInfo = {
         categoryCode: '',
@@ -250,7 +244,7 @@
           {
             paramName: '',
             paramOrder: 0,
-            paramRequire: false
+            paramRequire: '0'
           }
         ]
       }
@@ -264,7 +258,7 @@
       this.categoryInfo.productParams.push({
         paramName: '',
         paramOrder: 0,
-        paramRequire: false
+        paramRequire: '0'
       })
     }
   }
@@ -308,7 +302,7 @@
 
     .addItem {
       display: flex;
-
+      align-items: flex-start;
       .item {
         padding-right: 10px;
         display: flex;
diff --git a/src/components/mycomponent/dialog/categoryInfoDialog.vue b/src/components/mycomponent/dialog/categoryInfoDialog.vue
index be10d16..08a9d09 100644
--- a/src/components/mycomponent/dialog/categoryInfoDialog.vue
+++ b/src/components/mycomponent/dialog/categoryInfoDialog.vue
@@ -1,115 +1,94 @@
 <!--品类详情弹窗-->
 <template>
-  <el-dialog title="详情" width="920px" :visible.sync="isShowInfo" append-to-body @close="close">
-    <div class="contanier" v-if="dataInfo">
-      <div class="box">
-        <!--        <div class="item">-->
-        <!--          <div class="title">序号</div>-->
-        <!--          <div class="content"> {{ dataInfo.id }}</div>-->
-        <!--        </div>-->
-        <div class="item">
-          <div class="title">
-            编号
+  <el-dialog title="品类详情" width="920px" :visible.sync="isShowInfo" append-to-body @close="close">
+    <div v-if="form" class="contanier">
+      <el-descriptions class="margin-top" title="" :column="2" border>
+        <el-descriptions-item label="编号">
+          {{ form.categoryCode }}
+        </el-descriptions-item>
+        <el-descriptions-item label="名称">
+          {{ form.categoryName }}
+        </el-descriptions-item>
+        <el-descriptions-item label="父级品类">
+          {{ form.pCategoryName || '无' }}
+        </el-descriptions-item>
+        <el-descriptions-item label="资质要求">
+          {{ form.qualifyStr }}
+        </el-descriptions-item>
+        <el-descriptions-item label="备注" :span="2">
+          {{ form.remark }}
+        </el-descriptions-item>
+        <el-descriptions-item label="产品参数" :span="2">
+          <div v-for="(param,index) of form.productParams" class="param-line">
+            <span>参数{{ index+1 }}：</span>
+            <span class="param-name">参数名称:</span><span class="param-value">{{ param.paramName }}</span>
+            <span class="param-name">排序:</span><span class="param-value">{{ param.paramOrder }}</span>
+            <span class="param-name">必填:</span><span class="param-value">{{ param.paramRequire?'是':'否' }}</span>
           </div>
-          <div class="content">
-            {{ dataInfo.categoryCode }}
-          </div>
-        </div>
-      </div>
-      <div class="box">
-        <div class="item">
-          <div class="title">
-            品类名称
-          </div>
-          <div class="content">
-            {{ dataInfo.categoryName }}
-          </div>
-        </div>
-        <div class="item">
-          <div class="title">
-            创建时间
-          </div>
-          <div class="content">
-            {{ dataInfo.createTime }}
-          </div>
-        </div>
-      </div>
-      <div class="box">
-        <div class="item">
-          <div class="title">
-            ids
-          </div>
-          <div class="content">
-            {{ dataInfo.ids }}
-          </div>
-        </div>
-        <div class="item">
-          <div class="title">
-            父级品类编号
-          </div>
-          <div class="content">
-            {{ dataInfo.pCategoryCode }}
-          </div>
-        </div>
-      </div>
-      <div class="box">
-        <div class="item">
-          <div class="title">
-            父级品类名称
-          </div>
-          <div class="content">
-            {{ dataInfo.pCategoryName }}
-          </div>
-        </div>
-        <div class="item">
-          <div class="title">
-            供应商id
-          </div>
-          <div class="content">
-            {{ dataInfo.qualifyIds }}
-          </div>
-        </div>
-      </div>
-      <div class="box">
-        <div class="item">
-          <div class="title">
-            供应商名称
-          </div>
-          <div class="content">
-            {{ dataInfo.qualifyStr }}
-          </div>
-        </div>
-        <div class="item">
-          <div class="title">
-            更新时间
-          </div>
-          <div class="content">
-            {{ dataInfo.updateTime }}
-          </div>
-        </div>
-      </div>
-      <div class="box">
-        <div class="item">
-          <div class="title">
-            备注
-          </div>
-          <div class="content">
-            {{ dataInfo.remark }}
-          </div>
-        </div>
-      </div>
+        </el-descriptions-item>
+      </el-descriptions>
     </div>
   </el-dialog>
 </template>
 
 <script>
-import { infoDialog } from '../../../utils/myUtils/mixins/infoDialog' // 抽离porp 和 methods
+import { detail } from '@/api/product/category'
+
 export default {
-  mixins: [infoDialog]
+  props: {
+    isShowInfo: {
+      type: Boolean,
+      default: true
+    },
+    dataInfo: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    }
+  },
+  data() {
+    return {
+      form: {
+        categoryCode: '',
+        categoryName: '',
+        pCategoryName: '',
+        remark: '',
+        qualifyStr: '',
+        productParams: [
+          {
+            paramName: '',
+            paramOrder: 0,
+            paramRequire: '0'
+          }
+        ]
+      }
+    }
+  },
+  methods: {
+    initDialog(id) {
+      detail({ id }).then(res => {
+        this.form = res.data
+      })
+    },
+    close() {
+      this.$emit('close')
+    }
+  }
 }
 </script>
 
 <style lang="scss" scoped>
 @import '../../../assets/css/infoDialog.scss';
+.param-line{
+  line-height: 1.8;
+  .param-name{
+    margin-left: 10px;
+  }
+  .param-value{
+    font-weight: bold;
+    margin-left: 5px;
+  }
+}
 
 </style>
diff --git a/src/components/mycomponent/groupPage.vue b/src/components/mycomponent/groupPage.vue
index aa62667..666edc1 100644
--- a/src/components/mycomponent/groupPage.vue
+++ b/src/components/mycomponent/groupPage.vue
@@ -3,10 +3,16 @@
   <div class="footer">
     <div>共{{ total }}页记录 第{{ offset }}/{{ total }}页</div>
     <div>
-      <el-pagination :current-page.sync="offset" background layout="  prev, pager, next,sizes, jumper"
-                     :page-size="limit" :total="count" @size-change="changeSize" @current-change="changeOffset"
-                     ref="compontentPage">
-      </el-pagination>
+      <el-pagination
+        ref="compontentPage"
+        :current-page.sync="offset"
+        background
+        layout="  prev, pager, next,sizes, jumper"
+        :page-size="limit"
+        :total="count"
+        @size-change="changeSize"
+        @current-change="changeOffset"
+      />
     </div>
     <!-- <div>页码</div> -->
   </div>
@@ -14,39 +20,50 @@
 
 <script>
 export default {
-  data() {
-    return {}
-  },
-  props: {
-    total: {
-      // 总页数
-      type: Number,
-      default: 1,
-    },
-    offset: {
-      // 当前页
-      type: Number,
-      default: 1,
-    },
-    count: {
-      // 总条数
-      type: Number,
-      default: 10,
-    },
-    limit: {
-      // 当前页条数
-      type: Number,
-      default: 10,
-    },
-    isFristPage: {
-      type: Boolean,
-      default: false,
-    }
-  },
   model: {
     prop: 'isFristPage',
     event: 'changeFristPage'
   },
+  props: {
+    // 总页数
+    total: {
+      type: Number,
+      default: 1
+    },
+    // 当前页
+    offset: {
+      type: Number,
+      default: 1
+    },
+    // 总条数
+    count: {
+      type: Number,
+      default: 10
+    },
+    // 当前页条数
+    limit: {
+      type: Number,
+      default: 10
+    },
+    // 是否为第一页
+    isFristPage: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {}
+  },
+  watch: {
+    isFristPage(current) {
+      if (current) {
+        console.log(current)
+        // 分页组件跳转到第一页
+        this.$refs.compontentPage.handleCurrentChange(1)
+        this.$emit('changeFristPage', false)
+      }
+    }
+  },
   methods: {
     // 当前条数改变时触发
     changeSize(res) {
@@ -61,24 +78,12 @@
       //   }
 
       // 发送每页条数数量
-      this.$emit("setLimit", res);
+      this.$emit('setLimit', res)
     },
     // 当前页码改变时触发
     changeOffset(index) {
       // console.log(index,"currentPage");
-      this.$emit("setOffset", index);
-    },
-  },
-  watch: {
-    isFristPage(current) {
-
-      if (current) {
-        console.log(current);
-        // 分页组件跳转到第一页
-        this.$refs.compontentPage.handleCurrentChange(1)
-        this.$emit('changeFristPage', false)
-      }
-
+      this.$emit('setOffset', index)
     }
   }
 }
diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
index 4bf0d0d..1dcd8f6 100644
--- a/src/layout/components/AppMain.vue
+++ b/src/layout/components/AppMain.vue
@@ -33,6 +33,7 @@
   /*50 = navbar  */
   /*min-height: calc(100vh - 50px);*/
   position: relative;
+  padding-top: 10px;
   /*height: 100%;*/
   /*min-width:1525px;*/
   /*min-width: 1625px;*/

diff --git a/src/api/product/category.js b/src/api/product/category.js
index 19ff711..aea97c7 100644
--- a/src/api/product/category.js
+++ b/src/api/product/category.js
@@ -1,4 +1,3 @@
-import { instance } from '../request/http'
 /**
  * 品类相关接口
  */
@@ -21,7 +20,7 @@
   })
 }
 
-// 品类更新
+// 品类详情
 export function detail(data) {
   return request({
     url: `/categoryInfo/detail`,
diff --git a/src/components/mycomponent/dialog/categoryAddDialog.vue b/src/components/mycomponent/dialog/categoryAddDialog.vue
index 4e547d4..c47e73c 100644
--- a/src/components/mycomponent/dialog/categoryAddDialog.vue
+++ b/src/components/mycomponent/dialog/categoryAddDialog.vue
@@ -8,19 +8,20 @@
     @close="close"
   >
     <div class="categoryDialog">
-      <div class="content">
-        <div class="inputContent">
-          <div class="inputbox">
-            <red-star />
-            <input-vue
-              v-model="categoryInfo.categoryCode"
-              title="编号"
-              class="inputWidth"
-            />
-          </div>
-          <div class="inputbox">
-            <red-star />
-            <input-vue title="上级品类" class="inputWidth">
+      <el-form ref="dataForm" :rules="rules" :model="categoryInfo" class="inputContent" label-position="right" label-width="100px">
+        <el-row :gutter="10">
+          <el-col :span="12">
+            <el-form-item label="编号" prop="categoryCode">
+              <el-input v-model="categoryInfo.categoryCode" placeholder="必填" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="名称" prop="categoryName">
+              <el-input v-model="categoryInfo.categoryName" placeholder="必填" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="上级品类" prop="pCategoryCode">
               <el-select
                 v-model="categoryInfo.pCategoryCode"
                 filterable
@@ -28,38 +29,20 @@
                 style="width: 100%"
               >
                 <el-option
+                  label="无"
+                  value=""
+                />
+                <el-option
                   v-for="item in categoryList"
                   :key="item.categoryCode"
                   :label="item.categoryName"
                   :value="item.categoryCode"
                 />
               </el-select>
-            </input-vue>
-          </div>
-          <div class="inputbox">
-            <red-star />
-            <input-vue title="备注" class="inputWidth">
-              <el-input
-                v-model="categoryInfo.remark"
-                type="textarea"
-                :rows="3"
-                placeholder="请输入内容"
-              />
-            </input-vue>
-          </div>
-        </div>
-        <div class="inputContent">
-          <div class="inputbox">
-            <red-star />
-            <input-vue
-              v-model="categoryInfo.categoryName"
-              title="名称"
-              class="inputWidth"
-            />
-          </div>
-          <div class="inputbox">
-            <red-star />
-            <input-vue title="资质要求" class="inputWidth">
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="资质要求" prop="qualifyIds">
               <el-select
                 v-model="categoryInfo.qualifyIds"
                 filterable
@@ -74,43 +57,49 @@
                   :value="item.id"
                 />
               </el-select>
-            </input-vue>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="备注" prop="remark">
+              <el-input
+                v-model="categoryInfo.remark"
+                type="textarea"
+                :rows="3"
+                placeholder="请输入内容"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <div class="AddContent">
+          <div class="addBtn">
+            <el-button type="primary" @click="pushAry">
+              添加产品参数
+            </el-button>
           </div>
-        </div>
-      </div>
-      <div class="AddContent">
-        <div class="addBtn">
-          <el-button type="primary" @click="pushAry">
-            添加产品参数
-          </el-button>
-        </div>
-        <div v-for=" (item,index) in categoryInfo.productParams" :key="index">
-          <div class="addItem">
-            <div class="devName item">
-              <red-star />
-              <input-vue v-model="item.paramName" title="名称" class="inputWidth" />
-            </div>
-            <div class="number item">
-              <red-star />
-              <input-vue title="排序" class="inputWidth">
-                <input-number v-model="item.paramOrder" />
-              </input-vue>
-            </div>
-            <div class="isRequire item">
-              <input-vue title="" class="inputWidth">
+          <div style="padding: 15px 20px">
+            <div v-for=" (item,index) of categoryInfo.productParams" :key="index" class="addItem">
+              <el-form-item label="名称" :prop="`productParams[${index}].paramName`" :rules="{required: true, message: `请输入名称`, trigger: ['change','blur']}" label-width="60px">
+                <el-input v-model="item.paramName" placeholder="必填" />
+              </el-form-item>
+              <el-form-item label="排序" :prop="`productParams[${index}].paramOrder`" :rules="{required: true, message: `请输入排序`, trigger: ['change','blur']}" label-width="60px">
+                <el-input-number v-model="item.paramOrder" :min="0" :max="9999" />
+              </el-form-item>
+              <div class="isRequire item" style="height:40px;margin-left: 20px">
                 <el-checkbox v-model="item.paramRequire" true-label="1" false-label="0">
                   必填
                 </el-checkbox>
-              </input-vue>
-            </div>
-            <div class="delete item">
-              <el-button type="primary" @click="removeAry(index)">
-                删除
-              </el-button>
+              </div>
+              <div class="delete item" style="margin-left: 15px">
+                <el-button type="primary" @click="removeAry(index)">
+                  删除
+                </el-button>
+              </div>
             </div>
           </div>
         </div>
-      </div>
+      </el-form>
+    </div>
+    <div slot="footer" class="dialog-footer">
       <div class="btnBox">
         <el-button type="primary" class="save" @click="save">
           保存
@@ -124,32 +113,23 @@
 </template>
 
 <script>
-import dialogHeader from './dialogHeader.vue'
-import inputVue from '../input/inputVue.vue'
-import InputNumber from '../input/inputNumber.vue'
-import RedStar from '../redStar.vue'
-import { Message } from 'element-ui'
 import { C_add, C_list, C_update, detail } from '../../../api/product/category'
 import { getCertification } from '../../../api/systemNew/systemNew'
 
 export default {
-  components: {
-    inputVue,
-    InputNumber,
-    RedStar
-  },
   props: {
     isShowInfo: {
       type: Boolean,
       default: true
     },
-    dataInfo: {
-      type: Object
-    },
-    title: ''
+    title: {
+      type: String,
+      default: ''
+    }
   },
   data() {
     return {
+      dialogType: '', // add新增，update
       // 品类信息
       categoryInfo: {
         categoryCode: '',
@@ -161,36 +141,19 @@
           {
             paramName: '',
             paramOrder: 0,
-            paramRequire: false
+            paramRequire: '0'
           }
         ]
       },
-      categoryList: [],
-      // 资质列表
-      certificationList: []
-    }
-  },
-  watch: {
-    dataInfo: {
-      handler(vla) {
-        if (vla !== '') {
-          // 编辑操作
-          if (!vla.id) return
-          detail({ id: vla.id }).then(res => {
-            this.categoryInfo.id = res.data.id
-            this.categoryInfo.categoryCode = res.data.categoryCode
-            this.categoryInfo.categoryName = res.data.categoryName
-            this.categoryInfo.pCategoryCode = res.data.pCategoryCode
-            this.categoryInfo.remark = res.data.remark
-            this.categoryInfo.qualifyIds = res.data.qualifyIds
-            this.categoryInfo.productParams = res.data.productParams
-          })
-        } else {
-          this.resetData()
-        }
+      rules: {
+        categoryCode: [{ required: true, message: '此项不能为空', trigger: ['blur', 'change'] }],
+        categoryName: [{ required: true, message: '此项不能为空', trigger: ['blur', 'change'] }],
+        pCategoryCode: [{ required: false, message: '此项不能为空', trigger: ['blur', 'change'] }],
+        qualifyIds: [{ type: 'array', required: true, message: '此项不能为空', trigger: ['blur', 'change'] }],
+        productParams: [{ required: true, message: '此项不能为空', trigger: ['blur', 'change'] }]
       },
-      deep: true,
-      immediate: true
+      categoryList: [], // 品类列表
+      certificationList: [] // 资质列表
     }
   },
   mounted() {
@@ -203,42 +166,73 @@
     })
   },
   methods: {
-    close() {
-      this.$emit('close')
-      // 重置数据
-      // this.resetData()
-    },
-    save() {
-      if (this.title == '品类新增') {
-        C_add(this.categoryInfo).then(res => {
-          if (res.code === 200) {
-            this.$message({
-              message: '保存成功',
-              type: 'success'
-            })
-
-            this.close()
-            // 保存后刷新数据
-            this.$emit('refresh')
-          }
+    initDialog(dialogType, row) {
+      this.dialogType = dialogType
+      if (dialogType === 'add') {
+        this.resetData()
+        this.$nextTick(() => {
+          this.$refs['dataForm'].clearValidate()
         })
       } else {
-        // this.categoryInfo.productParams = this.dealAry(this.categoryInfo.productParams)
-        console.log(this.categoryInfo.productParams)
-        debugger
-        C_update(this.categoryInfo).then(res => {
-          if (res.code === 200) {
-            this.$message({
-              message: '更新成功',
-              type: 'success'
+        if (!row.id) return
+        detail({ id: row.id }).then(res => {
+          this.categoryInfo = {
+            id: res.data.id,
+            categoryCode: res.data.categoryCode,
+            categoryName: res.data.categoryName,
+            pCategoryCode: res.data.pCategoryCode,
+            remark: res.data.remark,
+            qualifyIds: res.data.qualifyIds,
+            productParams: res.data.productParams.map(item => {
+              return {
+                paramName: item.paramName,
+                paramOrder: item.paramOrder,
+                paramRequire: item.paramRequire
+              }
             })
-            this.close()
-            // 保存后刷新数据
-            this.$emit('refresh')
           }
         })
       }
     },
+    close() {
+      this.$emit('close')
+      this.resetData()
+    },
+    save() {
+      this.$refs['dataForm'].validate((valid) => {
+        console.log(this.deptForm)
+        if (valid) {
+          if (this.title === '品类新增') {
+            C_add(this.categoryInfo).then(res => {
+              if (res.code === 200) {
+                this.$message({
+                  message: '保存成功',
+                  type: 'success'
+                })
+
+                this.close()
+                // 保存后刷新数据
+                this.$emit('refresh')
+              }
+            })
+          } else {
+            // this.categoryInfo.productParams = this.dealAry(this.categoryInfo.productParams)
+            console.log(this.categoryInfo.productParams)
+            C_update(this.categoryInfo).then(res => {
+              if (res.code === 200) {
+                this.$message({
+                  message: '更新成功',
+                  type: 'success'
+                })
+                this.close()
+                // 保存后刷新数据
+                this.$emit('refresh')
+              }
+            })
+          }
+        }
+      })
+    },
     resetData() {
       this.categoryInfo = {
         categoryCode: '',
@@ -250,7 +244,7 @@
           {
             paramName: '',
             paramOrder: 0,
-            paramRequire: false
+            paramRequire: '0'
           }
         ]
       }
@@ -264,7 +258,7 @@
       this.categoryInfo.productParams.push({
         paramName: '',
         paramOrder: 0,
-        paramRequire: false
+        paramRequire: '0'
       })
     }
   }
@@ -308,7 +302,7 @@
 
     .addItem {
       display: flex;
-
+      align-items: flex-start;
       .item {
         padding-right: 10px;
         display: flex;
diff --git a/src/components/mycomponent/dialog/categoryInfoDialog.vue b/src/components/mycomponent/dialog/categoryInfoDialog.vue
index be10d16..08a9d09 100644
--- a/src/components/mycomponent/dialog/categoryInfoDialog.vue
+++ b/src/components/mycomponent/dialog/categoryInfoDialog.vue
@@ -1,115 +1,94 @@
 <!--品类详情弹窗-->
 <template>
-  <el-dialog title="详情" width="920px" :visible.sync="isShowInfo" append-to-body @close="close">
-    <div class="contanier" v-if="dataInfo">
-      <div class="box">
-        <!--        <div class="item">-->
-        <!--          <div class="title">序号</div>-->
-        <!--          <div class="content"> {{ dataInfo.id }}</div>-->
-        <!--        </div>-->
-        <div class="item">
-          <div class="title">
-            编号
+  <el-dialog title="品类详情" width="920px" :visible.sync="isShowInfo" append-to-body @close="close">
+    <div v-if="form" class="contanier">
+      <el-descriptions class="margin-top" title="" :column="2" border>
+        <el-descriptions-item label="编号">
+          {{ form.categoryCode }}
+        </el-descriptions-item>
+        <el-descriptions-item label="名称">
+          {{ form.categoryName }}
+        </el-descriptions-item>
+        <el-descriptions-item label="父级品类">
+          {{ form.pCategoryName || '无' }}
+        </el-descriptions-item>
+        <el-descriptions-item label="资质要求">
+          {{ form.qualifyStr }}
+        </el-descriptions-item>
+        <el-descriptions-item label="备注" :span="2">
+          {{ form.remark }}
+        </el-descriptions-item>
+        <el-descriptions-item label="产品参数" :span="2">
+          <div v-for="(param,index) of form.productParams" class="param-line">
+            <span>参数{{ index+1 }}：</span>
+            <span class="param-name">参数名称:</span><span class="param-value">{{ param.paramName }}</span>
+            <span class="param-name">排序:</span><span class="param-value">{{ param.paramOrder }}</span>
+            <span class="param-name">必填:</span><span class="param-value">{{ param.paramRequire?'是':'否' }}</span>
           </div>
-          <div class="content">
-            {{ dataInfo.categoryCode }}
-          </div>
-        </div>
-      </div>
-      <div class="box">
-        <div class="item">
-          <div class="title">
-            品类名称
-          </div>
-          <div class="content">
-            {{ dataInfo.categoryName }}
-          </div>
-        </div>
-        <div class="item">
-          <div class="title">
-            创建时间
-          </div>
-          <div class="content">
-            {{ dataInfo.createTime }}
-          </div>
-        </div>
-      </div>
-      <div class="box">
-        <div class="item">
-          <div class="title">
-            ids
-          </div>
-          <div class="content">
-            {{ dataInfo.ids }}
-          </div>
-        </div>
-        <div class="item">
-          <div class="title">
-            父级品类编号
-          </div>
-          <div class="content">
-            {{ dataInfo.pCategoryCode }}
-          </div>
-        </div>
-      </div>
-      <div class="box">
-        <div class="item">
-          <div class="title">
-            父级品类名称
-          </div>
-          <div class="content">
-            {{ dataInfo.pCategoryName }}
-          </div>
-        </div>
-        <div class="item">
-          <div class="title">
-            供应商id
-          </div>
-          <div class="content">
-            {{ dataInfo.qualifyIds }}
-          </div>
-        </div>
-      </div>
-      <div class="box">
-        <div class="item">
-          <div class="title">
-            供应商名称
-          </div>
-          <div class="content">
-            {{ dataInfo.qualifyStr }}
-          </div>
-        </div>
-        <div class="item">
-          <div class="title">
-            更新时间
-          </div>
-          <div class="content">
-            {{ dataInfo.updateTime }}
-          </div>
-        </div>
-      </div>
-      <div class="box">
-        <div class="item">
-          <div class="title">
-            备注
-          </div>
-          <div class="content">
-            {{ dataInfo.remark }}
-          </div>
-        </div>
-      </div>
+        </el-descriptions-item>
+      </el-descriptions>
     </div>
   </el-dialog>
 </template>
 
 <script>
-import { infoDialog } from '../../../utils/myUtils/mixins/infoDialog' // 抽离porp 和 methods
+import { detail } from '@/api/product/category'
+
 export default {
-  mixins: [infoDialog]
+  props: {
+    isShowInfo: {
+      type: Boolean,
+      default: true
+    },
+    dataInfo: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    }
+  },
+  data() {
+    return {
+      form: {
+        categoryCode: '',
+        categoryName: '',
+        pCategoryName: '',
+        remark: '',
+        qualifyStr: '',
+        productParams: [
+          {
+            paramName: '',
+            paramOrder: 0,
+            paramRequire: '0'
+          }
+        ]
+      }
+    }
+  },
+  methods: {
+    initDialog(id) {
+      detail({ id }).then(res => {
+        this.form = res.data
+      })
+    },
+    close() {
+      this.$emit('close')
+    }
+  }
 }
 </script>
 
 <style lang="scss" scoped>
 @import '../../../assets/css/infoDialog.scss';
+.param-line{
+  line-height: 1.8;
+  .param-name{
+    margin-left: 10px;
+  }
+  .param-value{
+    font-weight: bold;
+    margin-left: 5px;
+  }
+}
 
 </style>
diff --git a/src/components/mycomponent/groupPage.vue b/src/components/mycomponent/groupPage.vue
index aa62667..666edc1 100644
--- a/src/components/mycomponent/groupPage.vue
+++ b/src/components/mycomponent/groupPage.vue
@@ -3,10 +3,16 @@
   <div class="footer">
     <div>共{{ total }}页记录 第{{ offset }}/{{ total }}页</div>
     <div>
-      <el-pagination :current-page.sync="offset" background layout="  prev, pager, next,sizes, jumper"
-                     :page-size="limit" :total="count" @size-change="changeSize" @current-change="changeOffset"
-                     ref="compontentPage">
-      </el-pagination>
+      <el-pagination
+        ref="compontentPage"
+        :current-page.sync="offset"
+        background
+        layout="  prev, pager, next,sizes, jumper"
+        :page-size="limit"
+        :total="count"
+        @size-change="changeSize"
+        @current-change="changeOffset"
+      />
     </div>
     <!-- <div>页码</div> -->
   </div>
@@ -14,39 +20,50 @@
 
 <script>
 export default {
-  data() {
-    return {}
-  },
-  props: {
-    total: {
-      // 总页数
-      type: Number,
-      default: 1,
-    },
-    offset: {
-      // 当前页
-      type: Number,
-      default: 1,
-    },
-    count: {
-      // 总条数
-      type: Number,
-      default: 10,
-    },
-    limit: {
-      // 当前页条数
-      type: Number,
-      default: 10,
-    },
-    isFristPage: {
-      type: Boolean,
-      default: false,
-    }
-  },
   model: {
     prop: 'isFristPage',
     event: 'changeFristPage'
   },
+  props: {
+    // 总页数
+    total: {
+      type: Number,
+      default: 1
+    },
+    // 当前页
+    offset: {
+      type: Number,
+      default: 1
+    },
+    // 总条数
+    count: {
+      type: Number,
+      default: 10
+    },
+    // 当前页条数
+    limit: {
+      type: Number,
+      default: 10
+    },
+    // 是否为第一页
+    isFristPage: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {}
+  },
+  watch: {
+    isFristPage(current) {
+      if (current) {
+        console.log(current)
+        // 分页组件跳转到第一页
+        this.$refs.compontentPage.handleCurrentChange(1)
+        this.$emit('changeFristPage', false)
+      }
+    }
+  },
   methods: {
     // 当前条数改变时触发
     changeSize(res) {
@@ -61,24 +78,12 @@
       //   }
 
       // 发送每页条数数量
-      this.$emit("setLimit", res);
+      this.$emit('setLimit', res)
     },
     // 当前页码改变时触发
     changeOffset(index) {
       // console.log(index,"currentPage");
-      this.$emit("setOffset", index);
-    },
-  },
-  watch: {
-    isFristPage(current) {
-
-      if (current) {
-        console.log(current);
-        // 分页组件跳转到第一页
-        this.$refs.compontentPage.handleCurrentChange(1)
-        this.$emit('changeFristPage', false)
-      }
-
+      this.$emit('setOffset', index)
     }
   }
 }
diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
index 4bf0d0d..1dcd8f6 100644
--- a/src/layout/components/AppMain.vue
+++ b/src/layout/components/AppMain.vue
@@ -33,6 +33,7 @@
   /*50 = navbar  */
   /*min-height: calc(100vh - 50px);*/
   position: relative;
+  padding-top: 10px;
   /*height: 100%;*/
   /*min-width:1525px;*/
   /*min-width: 1625px;*/
diff --git a/src/utils/myUtils/mixins/listPage.js b/src/utils/myUtils/mixins/listPage.js
index a9f21e5..07f3141 100644
--- a/src/utils/myUtils/mixins/listPage.js
+++ b/src/utils/myUtils/mixins/listPage.js
@@ -75,6 +75,9 @@
       this.isShowInfo = true
       // 改变当前行的数据
       this.rowInfo = row
+      if (this.$refs.detail) {
+        this.$refs.detail.initDialog(row.id)
+      }
     }
   }
 }

diff --git a/src/api/product/category.js b/src/api/product/category.js
index 19ff711..aea97c7 100644
--- a/src/api/product/category.js
+++ b/src/api/product/category.js
@@ -1,4 +1,3 @@
-import { instance } from '../request/http'
 /**
  * 品类相关接口
  */
@@ -21,7 +20,7 @@
   })
 }
 
-// 品类更新
+// 品类详情
 export function detail(data) {
   return request({
     url: `/categoryInfo/detail`,
diff --git a/src/components/mycomponent/dialog/categoryAddDialog.vue b/src/components/mycomponent/dialog/categoryAddDialog.vue
index 4e547d4..c47e73c 100644
--- a/src/components/mycomponent/dialog/categoryAddDialog.vue
+++ b/src/components/mycomponent/dialog/categoryAddDialog.vue
@@ -8,19 +8,20 @@
     @close="close"
   >
     <div class="categoryDialog">
-      <div class="content">
-        <div class="inputContent">
-          <div class="inputbox">
-            <red-star />
-            <input-vue
-              v-model="categoryInfo.categoryCode"
-              title="编号"
-              class="inputWidth"
-            />
-          </div>
-          <div class="inputbox">
-            <red-star />
-            <input-vue title="上级品类" class="inputWidth">
+      <el-form ref="dataForm" :rules="rules" :model="categoryInfo" class="inputContent" label-position="right" label-width="100px">
+        <el-row :gutter="10">
+          <el-col :span="12">
+            <el-form-item label="编号" prop="categoryCode">
+              <el-input v-model="categoryInfo.categoryCode" placeholder="必填" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="名称" prop="categoryName">
+              <el-input v-model="categoryInfo.categoryName" placeholder="必填" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="上级品类" prop="pCategoryCode">
               <el-select
                 v-model="categoryInfo.pCategoryCode"
                 filterable
@@ -28,38 +29,20 @@
                 style="width: 100%"
               >
                 <el-option
+                  label="无"
+                  value=""
+                />
+                <el-option
                   v-for="item in categoryList"
                   :key="item.categoryCode"
                   :label="item.categoryName"
                   :value="item.categoryCode"
                 />
               </el-select>
-            </input-vue>
-          </div>
-          <div class="inputbox">
-            <red-star />
-            <input-vue title="备注" class="inputWidth">
-              <el-input
-                v-model="categoryInfo.remark"
-                type="textarea"
-                :rows="3"
-                placeholder="请输入内容"
-              />
-            </input-vue>
-          </div>
-        </div>
-        <div class="inputContent">
-          <div class="inputbox">
-            <red-star />
-            <input-vue
-              v-model="categoryInfo.categoryName"
-              title="名称"
-              class="inputWidth"
-            />
-          </div>
-          <div class="inputbox">
-            <red-star />
-            <input-vue title="资质要求" class="inputWidth">
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="资质要求" prop="qualifyIds">
               <el-select
                 v-model="categoryInfo.qualifyIds"
                 filterable
@@ -74,43 +57,49 @@
                   :value="item.id"
                 />
               </el-select>
-            </input-vue>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="备注" prop="remark">
+              <el-input
+                v-model="categoryInfo.remark"
+                type="textarea"
+                :rows="3"
+                placeholder="请输入内容"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <div class="AddContent">
+          <div class="addBtn">
+            <el-button type="primary" @click="pushAry">
+              添加产品参数
+            </el-button>
           </div>
-        </div>
-      </div>
-      <div class="AddContent">
-        <div class="addBtn">
-          <el-button type="primary" @click="pushAry">
-            添加产品参数
-          </el-button>
-        </div>
-        <div v-for=" (item,index) in categoryInfo.productParams" :key="index">
-          <div class="addItem">
-            <div class="devName item">
-              <red-star />
-              <input-vue v-model="item.paramName" title="名称" class="inputWidth" />
-            </div>
-            <div class="number item">
-              <red-star />
-              <input-vue title="排序" class="inputWidth">
-                <input-number v-model="item.paramOrder" />
-              </input-vue>
-            </div>
-            <div class="isRequire item">
-              <input-vue title="" class="inputWidth">
+          <div style="padding: 15px 20px">
+            <div v-for=" (item,index) of categoryInfo.productParams" :key="index" class="addItem">
+              <el-form-item label="名称" :prop="`productParams[${index}].paramName`" :rules="{required: true, message: `请输入名称`, trigger: ['change','blur']}" label-width="60px">
+                <el-input v-model="item.paramName" placeholder="必填" />
+              </el-form-item>
+              <el-form-item label="排序" :prop="`productParams[${index}].paramOrder`" :rules="{required: true, message: `请输入排序`, trigger: ['change','blur']}" label-width="60px">
+                <el-input-number v-model="item.paramOrder" :min="0" :max="9999" />
+              </el-form-item>
+              <div class="isRequire item" style="height:40px;margin-left: 20px">
                 <el-checkbox v-model="item.paramRequire" true-label="1" false-label="0">
                   必填
                 </el-checkbox>
-              </input-vue>
-            </div>
-            <div class="delete item">
-              <el-button type="primary" @click="removeAry(index)">
-                删除
-              </el-button>
+              </div>
+              <div class="delete item" style="margin-left: 15px">
+                <el-button type="primary" @click="removeAry(index)">
+                  删除
+                </el-button>
+              </div>
             </div>
           </div>
         </div>
-      </div>
+      </el-form>
+    </div>
+    <div slot="footer" class="dialog-footer">
       <div class="btnBox">
         <el-button type="primary" class="save" @click="save">
           保存
@@ -124,32 +113,23 @@
 </template>
 
 <script>
-import dialogHeader from './dialogHeader.vue'
-import inputVue from '../input/inputVue.vue'
-import InputNumber from '../input/inputNumber.vue'
-import RedStar from '../redStar.vue'
-import { Message } from 'element-ui'
 import { C_add, C_list, C_update, detail } from '../../../api/product/category'
 import { getCertification } from '../../../api/systemNew/systemNew'
 
 export default {
-  components: {
-    inputVue,
-    InputNumber,
-    RedStar
-  },
   props: {
     isShowInfo: {
       type: Boolean,
       default: true
     },
-    dataInfo: {
-      type: Object
-    },
-    title: ''
+    title: {
+      type: String,
+      default: ''
+    }
   },
   data() {
     return {
+      dialogType: '', // add新增，update
       // 品类信息
       categoryInfo: {
         categoryCode: '',
@@ -161,36 +141,19 @@
           {
             paramName: '',
             paramOrder: 0,
-            paramRequire: false
+            paramRequire: '0'
           }
         ]
       },
-      categoryList: [],
-      // 资质列表
-      certificationList: []
-    }
-  },
-  watch: {
-    dataInfo: {
-      handler(vla) {
-        if (vla !== '') {
-          // 编辑操作
-          if (!vla.id) return
-          detail({ id: vla.id }).then(res => {
-            this.categoryInfo.id = res.data.id
-            this.categoryInfo.categoryCode = res.data.categoryCode
-            this.categoryInfo.categoryName = res.data.categoryName
-            this.categoryInfo.pCategoryCode = res.data.pCategoryCode
-            this.categoryInfo.remark = res.data.remark
-            this.categoryInfo.qualifyIds = res.data.qualifyIds
-            this.categoryInfo.productParams = res.data.productParams
-          })
-        } else {
-          this.resetData()
-        }
+      rules: {
+        categoryCode: [{ required: true, message: '此项不能为空', trigger: ['blur', 'change'] }],
+        categoryName: [{ required: true, message: '此项不能为空', trigger: ['blur', 'change'] }],
+        pCategoryCode: [{ required: false, message: '此项不能为空', trigger: ['blur', 'change'] }],
+        qualifyIds: [{ type: 'array', required: true, message: '此项不能为空', trigger: ['blur', 'change'] }],
+        productParams: [{ required: true, message: '此项不能为空', trigger: ['blur', 'change'] }]
       },
-      deep: true,
-      immediate: true
+      categoryList: [], // 品类列表
+      certificationList: [] // 资质列表
     }
   },
   mounted() {
@@ -203,42 +166,73 @@
     })
   },
   methods: {
-    close() {
-      this.$emit('close')
-      // 重置数据
-      // this.resetData()
-    },
-    save() {
-      if (this.title == '品类新增') {
-        C_add(this.categoryInfo).then(res => {
-          if (res.code === 200) {
-            this.$message({
-              message: '保存成功',
-              type: 'success'
-            })
-
-            this.close()
-            // 保存后刷新数据
-            this.$emit('refresh')
-          }
+    initDialog(dialogType, row) {
+      this.dialogType = dialogType
+      if (dialogType === 'add') {
+        this.resetData()
+        this.$nextTick(() => {
+          this.$refs['dataForm'].clearValidate()
         })
       } else {
-        // this.categoryInfo.productParams = this.dealAry(this.categoryInfo.productParams)
-        console.log(this.categoryInfo.productParams)
-        debugger
-        C_update(this.categoryInfo).then(res => {
-          if (res.code === 200) {
-            this.$message({
-              message: '更新成功',
-              type: 'success'
+        if (!row.id) return
+        detail({ id: row.id }).then(res => {
+          this.categoryInfo = {
+            id: res.data.id,
+            categoryCode: res.data.categoryCode,
+            categoryName: res.data.categoryName,
+            pCategoryCode: res.data.pCategoryCode,
+            remark: res.data.remark,
+            qualifyIds: res.data.qualifyIds,
+            productParams: res.data.productParams.map(item => {
+              return {
+                paramName: item.paramName,
+                paramOrder: item.paramOrder,
+                paramRequire: item.paramRequire
+              }
             })
-            this.close()
-            // 保存后刷新数据
-            this.$emit('refresh')
           }
         })
       }
     },
+    close() {
+      this.$emit('close')
+      this.resetData()
+    },
+    save() {
+      this.$refs['dataForm'].validate((valid) => {
+        console.log(this.deptForm)
+        if (valid) {
+          if (this.title === '品类新增') {
+            C_add(this.categoryInfo).then(res => {
+              if (res.code === 200) {
+                this.$message({
+                  message: '保存成功',
+                  type: 'success'
+                })
+
+                this.close()
+                // 保存后刷新数据
+                this.$emit('refresh')
+              }
+            })
+          } else {
+            // this.categoryInfo.productParams = this.dealAry(this.categoryInfo.productParams)
+            console.log(this.categoryInfo.productParams)
+            C_update(this.categoryInfo).then(res => {
+              if (res.code === 200) {
+                this.$message({
+                  message: '更新成功',
+                  type: 'success'
+                })
+                this.close()
+                // 保存后刷新数据
+                this.$emit('refresh')
+              }
+            })
+          }
+        }
+      })
+    },
     resetData() {
       this.categoryInfo = {
         categoryCode: '',
@@ -250,7 +244,7 @@
           {
             paramName: '',
             paramOrder: 0,
-            paramRequire: false
+            paramRequire: '0'
           }
         ]
       }
@@ -264,7 +258,7 @@
       this.categoryInfo.productParams.push({
         paramName: '',
         paramOrder: 0,
-        paramRequire: false
+        paramRequire: '0'
       })
     }
   }
@@ -308,7 +302,7 @@
 
     .addItem {
       display: flex;
-
+      align-items: flex-start;
       .item {
         padding-right: 10px;
         display: flex;
diff --git a/src/components/mycomponent/dialog/categoryInfoDialog.vue b/src/components/mycomponent/dialog/categoryInfoDialog.vue
index be10d16..08a9d09 100644
--- a/src/components/mycomponent/dialog/categoryInfoDialog.vue
+++ b/src/components/mycomponent/dialog/categoryInfoDialog.vue
@@ -1,115 +1,94 @@
 <!--品类详情弹窗-->
 <template>
-  <el-dialog title="详情" width="920px" :visible.sync="isShowInfo" append-to-body @close="close">
-    <div class="contanier" v-if="dataInfo">
-      <div class="box">
-        <!--        <div class="item">-->
-        <!--          <div class="title">序号</div>-->
-        <!--          <div class="content"> {{ dataInfo.id }}</div>-->
-        <!--        </div>-->
-        <div class="item">
-          <div class="title">
-            编号
+  <el-dialog title="品类详情" width="920px" :visible.sync="isShowInfo" append-to-body @close="close">
+    <div v-if="form" class="contanier">
+      <el-descriptions class="margin-top" title="" :column="2" border>
+        <el-descriptions-item label="编号">
+          {{ form.categoryCode }}
+        </el-descriptions-item>
+        <el-descriptions-item label="名称">
+          {{ form.categoryName }}
+        </el-descriptions-item>
+        <el-descriptions-item label="父级品类">
+          {{ form.pCategoryName || '无' }}
+        </el-descriptions-item>
+        <el-descriptions-item label="资质要求">
+          {{ form.qualifyStr }}
+        </el-descriptions-item>
+        <el-descriptions-item label="备注" :span="2">
+          {{ form.remark }}
+        </el-descriptions-item>
+        <el-descriptions-item label="产品参数" :span="2">
+          <div v-for="(param,index) of form.productParams" class="param-line">
+            <span>参数{{ index+1 }}：</span>
+            <span class="param-name">参数名称:</span><span class="param-value">{{ param.paramName }}</span>
+            <span class="param-name">排序:</span><span class="param-value">{{ param.paramOrder }}</span>
+            <span class="param-name">必填:</span><span class="param-value">{{ param.paramRequire?'是':'否' }}</span>
           </div>
-          <div class="content">
-            {{ dataInfo.categoryCode }}
-          </div>
-        </div>
-      </div>
-      <div class="box">
-        <div class="item">
-          <div class="title">
-            品类名称
-          </div>
-          <div class="content">
-            {{ dataInfo.categoryName }}
-          </div>
-        </div>
-        <div class="item">
-          <div class="title">
-            创建时间
-          </div>
-          <div class="content">
-            {{ dataInfo.createTime }}
-          </div>
-        </div>
-      </div>
-      <div class="box">
-        <div class="item">
-          <div class="title">
-            ids
-          </div>
-          <div class="content">
-            {{ dataInfo.ids }}
-          </div>
-        </div>
-        <div class="item">
-          <div class="title">
-            父级品类编号
-          </div>
-          <div class="content">
-            {{ dataInfo.pCategoryCode }}
-          </div>
-        </div>
-      </div>
-      <div class="box">
-        <div class="item">
-          <div class="title">
-            父级品类名称
-          </div>
-          <div class="content">
-            {{ dataInfo.pCategoryName }}
-          </div>
-        </div>
-        <div class="item">
-          <div class="title">
-            供应商id
-          </div>
-          <div class="content">
-            {{ dataInfo.qualifyIds }}
-          </div>
-        </div>
-      </div>
-      <div class="box">
-        <div class="item">
-          <div class="title">
-            供应商名称
-          </div>
-          <div class="content">
-            {{ dataInfo.qualifyStr }}
-          </div>
-        </div>
-        <div class="item">
-          <div class="title">
-            更新时间
-          </div>
-          <div class="content">
-            {{ dataInfo.updateTime }}
-          </div>
-        </div>
-      </div>
-      <div class="box">
-        <div class="item">
-          <div class="title">
-            备注
-          </div>
-          <div class="content">
-            {{ dataInfo.remark }}
-          </div>
-        </div>
-      </div>
+        </el-descriptions-item>
+      </el-descriptions>
     </div>
   </el-dialog>
 </template>
 
 <script>
-import { infoDialog } from '../../../utils/myUtils/mixins/infoDialog' // 抽离porp 和 methods
+import { detail } from '@/api/product/category'
+
 export default {
-  mixins: [infoDialog]
+  props: {
+    isShowInfo: {
+      type: Boolean,
+      default: true
+    },
+    dataInfo: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    }
+  },
+  data() {
+    return {
+      form: {
+        categoryCode: '',
+        categoryName: '',
+        pCategoryName: '',
+        remark: '',
+        qualifyStr: '',
+        productParams: [
+          {
+            paramName: '',
+            paramOrder: 0,
+            paramRequire: '0'
+          }
+        ]
+      }
+    }
+  },
+  methods: {
+    initDialog(id) {
+      detail({ id }).then(res => {
+        this.form = res.data
+      })
+    },
+    close() {
+      this.$emit('close')
+    }
+  }
 }
 </script>
 
 <style lang="scss" scoped>
 @import '../../../assets/css/infoDialog.scss';
+.param-line{
+  line-height: 1.8;
+  .param-name{
+    margin-left: 10px;
+  }
+  .param-value{
+    font-weight: bold;
+    margin-left: 5px;
+  }
+}
 
 </style>
diff --git a/src/components/mycomponent/groupPage.vue b/src/components/mycomponent/groupPage.vue
index aa62667..666edc1 100644
--- a/src/components/mycomponent/groupPage.vue
+++ b/src/components/mycomponent/groupPage.vue
@@ -3,10 +3,16 @@
   <div class="footer">
     <div>共{{ total }}页记录 第{{ offset }}/{{ total }}页</div>
     <div>
-      <el-pagination :current-page.sync="offset" background layout="  prev, pager, next,sizes, jumper"
-                     :page-size="limit" :total="count" @size-change="changeSize" @current-change="changeOffset"
-                     ref="compontentPage">
-      </el-pagination>
+      <el-pagination
+        ref="compontentPage"
+        :current-page.sync="offset"
+        background
+        layout="  prev, pager, next,sizes, jumper"
+        :page-size="limit"
+        :total="count"
+        @size-change="changeSize"
+        @current-change="changeOffset"
+      />
     </div>
     <!-- <div>页码</div> -->
   </div>
@@ -14,39 +20,50 @@
 
 <script>
 export default {
-  data() {
-    return {}
-  },
-  props: {
-    total: {
-      // 总页数
-      type: Number,
-      default: 1,
-    },
-    offset: {
-      // 当前页
-      type: Number,
-      default: 1,
-    },
-    count: {
-      // 总条数
-      type: Number,
-      default: 10,
-    },
-    limit: {
-      // 当前页条数
-      type: Number,
-      default: 10,
-    },
-    isFristPage: {
-      type: Boolean,
-      default: false,
-    }
-  },
   model: {
     prop: 'isFristPage',
     event: 'changeFristPage'
   },
+  props: {
+    // 总页数
+    total: {
+      type: Number,
+      default: 1
+    },
+    // 当前页
+    offset: {
+      type: Number,
+      default: 1
+    },
+    // 总条数
+    count: {
+      type: Number,
+      default: 10
+    },
+    // 当前页条数
+    limit: {
+      type: Number,
+      default: 10
+    },
+    // 是否为第一页
+    isFristPage: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {}
+  },
+  watch: {
+    isFristPage(current) {
+      if (current) {
+        console.log(current)
+        // 分页组件跳转到第一页
+        this.$refs.compontentPage.handleCurrentChange(1)
+        this.$emit('changeFristPage', false)
+      }
+    }
+  },
   methods: {
     // 当前条数改变时触发
     changeSize(res) {
@@ -61,24 +78,12 @@
       //   }
 
       // 发送每页条数数量
-      this.$emit("setLimit", res);
+      this.$emit('setLimit', res)
     },
     // 当前页码改变时触发
     changeOffset(index) {
       // console.log(index,"currentPage");
-      this.$emit("setOffset", index);
-    },
-  },
-  watch: {
-    isFristPage(current) {
-
-      if (current) {
-        console.log(current);
-        // 分页组件跳转到第一页
-        this.$refs.compontentPage.handleCurrentChange(1)
-        this.$emit('changeFristPage', false)
-      }
-
+      this.$emit('setOffset', index)
     }
   }
 }
diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
index 4bf0d0d..1dcd8f6 100644
--- a/src/layout/components/AppMain.vue
+++ b/src/layout/components/AppMain.vue
@@ -33,6 +33,7 @@
   /*50 = navbar  */
   /*min-height: calc(100vh - 50px);*/
   position: relative;
+  padding-top: 10px;
   /*height: 100%;*/
   /*min-width:1525px;*/
   /*min-width: 1625px;*/
diff --git a/src/utils/myUtils/mixins/listPage.js b/src/utils/myUtils/mixins/listPage.js
index a9f21e5..07f3141 100644
--- a/src/utils/myUtils/mixins/listPage.js
+++ b/src/utils/myUtils/mixins/listPage.js
@@ -75,6 +75,9 @@
       this.isShowInfo = true
       // 改变当前行的数据
       this.rowInfo = row
+      if (this.$refs.detail) {
+        this.$refs.detail.initDialog(row.id)
+      }
     }
   }
 }
diff --git a/src/views/product/brandList.vue b/src/views/product/brandList.vue
index 21762ec..0bb517e 100644
--- a/src/views/product/brandList.vue
+++ b/src/views/product/brandList.vue
@@ -268,7 +268,7 @@
     }
   }
   .productFun {
-    margin: 0px 0px 30px;
+    margin: 0px 0px 20px;
     display: flex;
     justify-content: space-between;
     .productInput {
@@ -279,14 +279,6 @@
       }
     }
     .productBtn {
-      .btnItem {
-        margin-right: 10px;
-        border-radius: 5px;
-        // height: 32px;
-        // width: 84px;
-        font-size: 16px;
-      }
-
     }
   }
 

diff --git a/src/api/product/category.js b/src/api/product/category.js
index 19ff711..aea97c7 100644
--- a/src/api/product/category.js
+++ b/src/api/product/category.js
@@ -1,4 +1,3 @@
-import { instance } from '../request/http'
 /**
  * 品类相关接口
  */
@@ -21,7 +20,7 @@
   })
 }
 
-// 品类更新
+// 品类详情
 export function detail(data) {
   return request({
     url: `/categoryInfo/detail`,
diff --git a/src/components/mycomponent/dialog/categoryAddDialog.vue b/src/components/mycomponent/dialog/categoryAddDialog.vue
index 4e547d4..c47e73c 100644
--- a/src/components/mycomponent/dialog/categoryAddDialog.vue
+++ b/src/components/mycomponent/dialog/categoryAddDialog.vue
@@ -8,19 +8,20 @@
     @close="close"
   >
     <div class="categoryDialog">
-      <div class="content">
-        <div class="inputContent">
-          <div class="inputbox">
-            <red-star />
-            <input-vue
-              v-model="categoryInfo.categoryCode"
-              title="编号"
-              class="inputWidth"
-            />
-          </div>
-          <div class="inputbox">
-            <red-star />
-            <input-vue title="上级品类" class="inputWidth">
+      <el-form ref="dataForm" :rules="rules" :model="categoryInfo" class="inputContent" label-position="right" label-width="100px">
+        <el-row :gutter="10">
+          <el-col :span="12">
+            <el-form-item label="编号" prop="categoryCode">
+              <el-input v-model="categoryInfo.categoryCode" placeholder="必填" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="名称" prop="categoryName">
+              <el-input v-model="categoryInfo.categoryName" placeholder="必填" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="上级品类" prop="pCategoryCode">
               <el-select
                 v-model="categoryInfo.pCategoryCode"
                 filterable
@@ -28,38 +29,20 @@
                 style="width: 100%"
               >
                 <el-option
+                  label="无"
+                  value=""
+                />
+                <el-option
                   v-for="item in categoryList"
                   :key="item.categoryCode"
                   :label="item.categoryName"
                   :value="item.categoryCode"
                 />
               </el-select>
-            </input-vue>
-          </div>
-          <div class="inputbox">
-            <red-star />
-            <input-vue title="备注" class="inputWidth">
-              <el-input
-                v-model="categoryInfo.remark"
-                type="textarea"
-                :rows="3"
-                placeholder="请输入内容"
-              />
-            </input-vue>
-          </div>
-        </div>
-        <div class="inputContent">
-          <div class="inputbox">
-            <red-star />
-            <input-vue
-              v-model="categoryInfo.categoryName"
-              title="名称"
-              class="inputWidth"
-            />
-          </div>
-          <div class="inputbox">
-            <red-star />
-            <input-vue title="资质要求" class="inputWidth">
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="资质要求" prop="qualifyIds">
               <el-select
                 v-model="categoryInfo.qualifyIds"
                 filterable
@@ -74,43 +57,49 @@
                   :value="item.id"
                 />
               </el-select>
-            </input-vue>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="备注" prop="remark">
+              <el-input
+                v-model="categoryInfo.remark"
+                type="textarea"
+                :rows="3"
+                placeholder="请输入内容"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <div class="AddContent">
+          <div class="addBtn">
+            <el-button type="primary" @click="pushAry">
+              添加产品参数
+            </el-button>
           </div>
-        </div>
-      </div>
-      <div class="AddContent">
-        <div class="addBtn">
-          <el-button type="primary" @click="pushAry">
-            添加产品参数
-          </el-button>
-        </div>
-        <div v-for=" (item,index) in categoryInfo.productParams" :key="index">
-          <div class="addItem">
-            <div class="devName item">
-              <red-star />
-              <input-vue v-model="item.paramName" title="名称" class="inputWidth" />
-            </div>
-            <div class="number item">
-              <red-star />
-              <input-vue title="排序" class="inputWidth">
-                <input-number v-model="item.paramOrder" />
-              </input-vue>
-            </div>
-            <div class="isRequire item">
-              <input-vue title="" class="inputWidth">
+          <div style="padding: 15px 20px">
+            <div v-for=" (item,index) of categoryInfo.productParams" :key="index" class="addItem">
+              <el-form-item label="名称" :prop="`productParams[${index}].paramName`" :rules="{required: true, message: `请输入名称`, trigger: ['change','blur']}" label-width="60px">
+                <el-input v-model="item.paramName" placeholder="必填" />
+              </el-form-item>
+              <el-form-item label="排序" :prop="`productParams[${index}].paramOrder`" :rules="{required: true, message: `请输入排序`, trigger: ['change','blur']}" label-width="60px">
+                <el-input-number v-model="item.paramOrder" :min="0" :max="9999" />
+              </el-form-item>
+              <div class="isRequire item" style="height:40px;margin-left: 20px">
                 <el-checkbox v-model="item.paramRequire" true-label="1" false-label="0">
                   必填
                 </el-checkbox>
-              </input-vue>
-            </div>
-            <div class="delete item">
-              <el-button type="primary" @click="removeAry(index)">
-                删除
-              </el-button>
+              </div>
+              <div class="delete item" style="margin-left: 15px">
+                <el-button type="primary" @click="removeAry(index)">
+                  删除
+                </el-button>
+              </div>
             </div>
           </div>
         </div>
-      </div>
+      </el-form>
+    </div>
+    <div slot="footer" class="dialog-footer">
       <div class="btnBox">
         <el-button type="primary" class="save" @click="save">
           保存
@@ -124,32 +113,23 @@
 </template>
 
 <script>
-import dialogHeader from './dialogHeader.vue'
-import inputVue from '../input/inputVue.vue'
-import InputNumber from '../input/inputNumber.vue'
-import RedStar from '../redStar.vue'
-import { Message } from 'element-ui'
 import { C_add, C_list, C_update, detail } from '../../../api/product/category'
 import { getCertification } from '../../../api/systemNew/systemNew'
 
 export default {
-  components: {
-    inputVue,
-    InputNumber,
-    RedStar
-  },
   props: {
     isShowInfo: {
       type: Boolean,
       default: true
     },
-    dataInfo: {
-      type: Object
-    },
-    title: ''
+    title: {
+      type: String,
+      default: ''
+    }
   },
   data() {
     return {
+      dialogType: '', // add新增，update
       // 品类信息
       categoryInfo: {
         categoryCode: '',
@@ -161,36 +141,19 @@
           {
             paramName: '',
             paramOrder: 0,
-            paramRequire: false
+            paramRequire: '0'
           }
         ]
       },
-      categoryList: [],
-      // 资质列表
-      certificationList: []
-    }
-  },
-  watch: {
-    dataInfo: {
-      handler(vla) {
-        if (vla !== '') {
-          // 编辑操作
-          if (!vla.id) return
-          detail({ id: vla.id }).then(res => {
-            this.categoryInfo.id = res.data.id
-            this.categoryInfo.categoryCode = res.data.categoryCode
-            this.categoryInfo.categoryName = res.data.categoryName
-            this.categoryInfo.pCategoryCode = res.data.pCategoryCode
-            this.categoryInfo.remark = res.data.remark
-            this.categoryInfo.qualifyIds = res.data.qualifyIds
-            this.categoryInfo.productParams = res.data.productParams
-          })
-        } else {
-          this.resetData()
-        }
+      rules: {
+        categoryCode: [{ required: true, message: '此项不能为空', trigger: ['blur', 'change'] }],
+        categoryName: [{ required: true, message: '此项不能为空', trigger: ['blur', 'change'] }],
+        pCategoryCode: [{ required: false, message: '此项不能为空', trigger: ['blur', 'change'] }],
+        qualifyIds: [{ type: 'array', required: true, message: '此项不能为空', trigger: ['blur', 'change'] }],
+        productParams: [{ required: true, message: '此项不能为空', trigger: ['blur', 'change'] }]
       },
-      deep: true,
-      immediate: true
+      categoryList: [], // 品类列表
+      certificationList: [] // 资质列表
     }
   },
   mounted() {
@@ -203,42 +166,73 @@
     })
   },
   methods: {
-    close() {
-      this.$emit('close')
-      // 重置数据
-      // this.resetData()
-    },
-    save() {
-      if (this.title == '品类新增') {
-        C_add(this.categoryInfo).then(res => {
-          if (res.code === 200) {
-            this.$message({
-              message: '保存成功',
-              type: 'success'
-            })
-
-            this.close()
-            // 保存后刷新数据
-            this.$emit('refresh')
-          }
+    initDialog(dialogType, row) {
+      this.dialogType = dialogType
+      if (dialogType === 'add') {
+        this.resetData()
+        this.$nextTick(() => {
+          this.$refs['dataForm'].clearValidate()
         })
       } else {
-        // this.categoryInfo.productParams = this.dealAry(this.categoryInfo.productParams)
-        console.log(this.categoryInfo.productParams)
-        debugger
-        C_update(this.categoryInfo).then(res => {
-          if (res.code === 200) {
-            this.$message({
-              message: '更新成功',
-              type: 'success'
+        if (!row.id) return
+        detail({ id: row.id }).then(res => {
+          this.categoryInfo = {
+            id: res.data.id,
+            categoryCode: res.data.categoryCode,
+            categoryName: res.data.categoryName,
+            pCategoryCode: res.data.pCategoryCode,
+            remark: res.data.remark,
+            qualifyIds: res.data.qualifyIds,
+            productParams: res.data.productParams.map(item => {
+              return {
+                paramName: item.paramName,
+                paramOrder: item.paramOrder,
+                paramRequire: item.paramRequire
+              }
             })
-            this.close()
-            // 保存后刷新数据
-            this.$emit('refresh')
           }
         })
       }
     },
+    close() {
+      this.$emit('close')
+      this.resetData()
+    },
+    save() {
+      this.$refs['dataForm'].validate((valid) => {
+        console.log(this.deptForm)
+        if (valid) {
+          if (this.title === '品类新增') {
+            C_add(this.categoryInfo).then(res => {
+              if (res.code === 200) {
+                this.$message({
+                  message: '保存成功',
+                  type: 'success'
+                })
+
+                this.close()
+                // 保存后刷新数据
+                this.$emit('refresh')
+              }
+            })
+          } else {
+            // this.categoryInfo.productParams = this.dealAry(this.categoryInfo.productParams)
+            console.log(this.categoryInfo.productParams)
+            C_update(this.categoryInfo).then(res => {
+              if (res.code === 200) {
+                this.$message({
+                  message: '更新成功',
+                  type: 'success'
+                })
+                this.close()
+                // 保存后刷新数据
+                this.$emit('refresh')
+              }
+            })
+          }
+        }
+      })
+    },
     resetData() {
       this.categoryInfo = {
         categoryCode: '',
@@ -250,7 +244,7 @@
           {
             paramName: '',
             paramOrder: 0,
-            paramRequire: false
+            paramRequire: '0'
           }
         ]
       }
@@ -264,7 +258,7 @@
       this.categoryInfo.productParams.push({
         paramName: '',
         paramOrder: 0,
-        paramRequire: false
+        paramRequire: '0'
       })
     }
   }
@@ -308,7 +302,7 @@
 
     .addItem {
       display: flex;
-
+      align-items: flex-start;
       .item {
         padding-right: 10px;
         display: flex;
diff --git a/src/components/mycomponent/dialog/categoryInfoDialog.vue b/src/components/mycomponent/dialog/categoryInfoDialog.vue
index be10d16..08a9d09 100644
--- a/src/components/mycomponent/dialog/categoryInfoDialog.vue
+++ b/src/components/mycomponent/dialog/categoryInfoDialog.vue
@@ -1,115 +1,94 @@
 <!--品类详情弹窗-->
 <template>
-  <el-dialog title="详情" width="920px" :visible.sync="isShowInfo" append-to-body @close="close">
-    <div class="contanier" v-if="dataInfo">
-      <div class="box">
-        <!--        <div class="item">-->
-        <!--          <div class="title">序号</div>-->
-        <!--          <div class="content"> {{ dataInfo.id }}</div>-->
-        <!--        </div>-->
-        <div class="item">
-          <div class="title">
-            编号
+  <el-dialog title="品类详情" width="920px" :visible.sync="isShowInfo" append-to-body @close="close">
+    <div v-if="form" class="contanier">
+      <el-descriptions class="margin-top" title="" :column="2" border>
+        <el-descriptions-item label="编号">
+          {{ form.categoryCode }}
+        </el-descriptions-item>
+        <el-descriptions-item label="名称">
+          {{ form.categoryName }}
+        </el-descriptions-item>
+        <el-descriptions-item label="父级品类">
+          {{ form.pCategoryName || '无' }}
+        </el-descriptions-item>
+        <el-descriptions-item label="资质要求">
+          {{ form.qualifyStr }}
+        </el-descriptions-item>
+        <el-descriptions-item label="备注" :span="2">
+          {{ form.remark }}
+        </el-descriptions-item>
+        <el-descriptions-item label="产品参数" :span="2">
+          <div v-for="(param,index) of form.productParams" class="param-line">
+            <span>参数{{ index+1 }}：</span>
+            <span class="param-name">参数名称:</span><span class="param-value">{{ param.paramName }}</span>
+            <span class="param-name">排序:</span><span class="param-value">{{ param.paramOrder }}</span>
+            <span class="param-name">必填:</span><span class="param-value">{{ param.paramRequire?'是':'否' }}</span>
           </div>
-          <div class="content">
-            {{ dataInfo.categoryCode }}
-          </div>
-        </div>
-      </div>
-      <div class="box">
-        <div class="item">
-          <div class="title">
-            品类名称
-          </div>
-          <div class="content">
-            {{ dataInfo.categoryName }}
-          </div>
-        </div>
-        <div class="item">
-          <div class="title">
-            创建时间
-          </div>
-          <div class="content">
-            {{ dataInfo.createTime }}
-          </div>
-        </div>
-      </div>
-      <div class="box">
-        <div class="item">
-          <div class="title">
-            ids
-          </div>
-          <div class="content">
-            {{ dataInfo.ids }}
-          </div>
-        </div>
-        <div class="item">
-          <div class="title">
-            父级品类编号
-          </div>
-          <div class="content">
-            {{ dataInfo.pCategoryCode }}
-          </div>
-        </div>
-      </div>
-      <div class="box">
-        <div class="item">
-          <div class="title">
-            父级品类名称
-          </div>
-          <div class="content">
-            {{ dataInfo.pCategoryName }}
-          </div>
-        </div>
-        <div class="item">
-          <div class="title">
-            供应商id
-          </div>
-          <div class="content">
-            {{ dataInfo.qualifyIds }}
-          </div>
-        </div>
-      </div>
-      <div class="box">
-        <div class="item">
-          <div class="title">
-            供应商名称
-          </div>
-          <div class="content">
-            {{ dataInfo.qualifyStr }}
-          </div>
-        </div>
-        <div class="item">
-          <div class="title">
-            更新时间
-          </div>
-          <div class="content">
-            {{ dataInfo.updateTime }}
-          </div>
-        </div>
-      </div>
-      <div class="box">
-        <div class="item">
-          <div class="title">
-            备注
-          </div>
-          <div class="content">
-            {{ dataInfo.remark }}
-          </div>
-        </div>
-      </div>
+        </el-descriptions-item>
+      </el-descriptions>
     </div>
   </el-dialog>
 </template>
 
 <script>
-import { infoDialog } from '../../../utils/myUtils/mixins/infoDialog' // 抽离porp 和 methods
+import { detail } from '@/api/product/category'
+
 export default {
-  mixins: [infoDialog]
+  props: {
+    isShowInfo: {
+      type: Boolean,
+      default: true
+    },
+    dataInfo: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    }
+  },
+  data() {
+    return {
+      form: {
+        categoryCode: '',
+        categoryName: '',
+        pCategoryName: '',
+        remark: '',
+        qualifyStr: '',
+        productParams: [
+          {
+            paramName: '',
+            paramOrder: 0,
+            paramRequire: '0'
+          }
+        ]
+      }
+    }
+  },
+  methods: {
+    initDialog(id) {
+      detail({ id }).then(res => {
+        this.form = res.data
+      })
+    },
+    close() {
+      this.$emit('close')
+    }
+  }
 }
 </script>
 
 <style lang="scss" scoped>
 @import '../../../assets/css/infoDialog.scss';
+.param-line{
+  line-height: 1.8;
+  .param-name{
+    margin-left: 10px;
+  }
+  .param-value{
+    font-weight: bold;
+    margin-left: 5px;
+  }
+}
 
 </style>
diff --git a/src/components/mycomponent/groupPage.vue b/src/components/mycomponent/groupPage.vue
index aa62667..666edc1 100644
--- a/src/components/mycomponent/groupPage.vue
+++ b/src/components/mycomponent/groupPage.vue
@@ -3,10 +3,16 @@
   <div class="footer">
     <div>共{{ total }}页记录 第{{ offset }}/{{ total }}页</div>
     <div>
-      <el-pagination :current-page.sync="offset" background layout="  prev, pager, next,sizes, jumper"
-                     :page-size="limit" :total="count" @size-change="changeSize" @current-change="changeOffset"
-                     ref="compontentPage">
-      </el-pagination>
+      <el-pagination
+        ref="compontentPage"
+        :current-page.sync="offset"
+        background
+        layout="  prev, pager, next,sizes, jumper"
+        :page-size="limit"
+        :total="count"
+        @size-change="changeSize"
+        @current-change="changeOffset"
+      />
     </div>
     <!-- <div>页码</div> -->
   </div>
@@ -14,39 +20,50 @@
 
 <script>
 export default {
-  data() {
-    return {}
-  },
-  props: {
-    total: {
-      // 总页数
-      type: Number,
-      default: 1,
-    },
-    offset: {
-      // 当前页
-      type: Number,
-      default: 1,
-    },
-    count: {
-      // 总条数
-      type: Number,
-      default: 10,
-    },
-    limit: {
-      // 当前页条数
-      type: Number,
-      default: 10,
-    },
-    isFristPage: {
-      type: Boolean,
-      default: false,
-    }
-  },
   model: {
     prop: 'isFristPage',
     event: 'changeFristPage'
   },
+  props: {
+    // 总页数
+    total: {
+      type: Number,
+      default: 1
+    },
+    // 当前页
+    offset: {
+      type: Number,
+      default: 1
+    },
+    // 总条数
+    count: {
+      type: Number,
+      default: 10
+    },
+    // 当前页条数
+    limit: {
+      type: Number,
+      default: 10
+    },
+    // 是否为第一页
+    isFristPage: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {}
+  },
+  watch: {
+    isFristPage(current) {
+      if (current) {
+        console.log(current)
+        // 分页组件跳转到第一页
+        this.$refs.compontentPage.handleCurrentChange(1)
+        this.$emit('changeFristPage', false)
+      }
+    }
+  },
   methods: {
     // 当前条数改变时触发
     changeSize(res) {
@@ -61,24 +78,12 @@
       //   }
 
       // 发送每页条数数量
-      this.$emit("setLimit", res);
+      this.$emit('setLimit', res)
     },
     // 当前页码改变时触发
     changeOffset(index) {
       // console.log(index,"currentPage");
-      this.$emit("setOffset", index);
-    },
-  },
-  watch: {
-    isFristPage(current) {
-
-      if (current) {
-        console.log(current);
-        // 分页组件跳转到第一页
-        this.$refs.compontentPage.handleCurrentChange(1)
-        this.$emit('changeFristPage', false)
-      }
-
+      this.$emit('setOffset', index)
     }
   }
 }
diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
index 4bf0d0d..1dcd8f6 100644
--- a/src/layout/components/AppMain.vue
+++ b/src/layout/components/AppMain.vue
@@ -33,6 +33,7 @@
   /*50 = navbar  */
   /*min-height: calc(100vh - 50px);*/
   position: relative;
+  padding-top: 10px;
   /*height: 100%;*/
   /*min-width:1525px;*/
   /*min-width: 1625px;*/
diff --git a/src/utils/myUtils/mixins/listPage.js b/src/utils/myUtils/mixins/listPage.js
index a9f21e5..07f3141 100644
--- a/src/utils/myUtils/mixins/listPage.js
+++ b/src/utils/myUtils/mixins/listPage.js
@@ -75,6 +75,9 @@
       this.isShowInfo = true
       // 改变当前行的数据
       this.rowInfo = row
+      if (this.$refs.detail) {
+        this.$refs.detail.initDialog(row.id)
+      }
     }
   }
 }
diff --git a/src/views/product/brandList.vue b/src/views/product/brandList.vue
index 21762ec..0bb517e 100644
--- a/src/views/product/brandList.vue
+++ b/src/views/product/brandList.vue
@@ -268,7 +268,7 @@
     }
   }
   .productFun {
-    margin: 0px 0px 30px;
+    margin: 0px 0px 20px;
     display: flex;
     justify-content: space-between;
     .productInput {
@@ -279,14 +279,6 @@
       }
     }
     .productBtn {
-      .btnItem {
-        margin-right: 10px;
-        border-radius: 5px;
-        // height: 32px;
-        // width: 84px;
-        font-size: 16px;
-      }
-
     }
   }
 
diff --git a/src/views/product/categoryList.vue b/src/views/product/categoryList.vue
index d01ea1d..552f1ca 100644
--- a/src/views/product/categoryList.vue
+++ b/src/views/product/categoryList.vue
@@ -13,7 +13,7 @@
           />
         </div>
         名称
-        <div class="inputBox" style="width: 144px">
+        <div class="inputBox" style="width: 150px">
           <el-input
             v-model="selectInfo.categoryName"
             placeholder="请输入品类名称"
@@ -68,7 +68,7 @@
 
     <el-table
       ref="multipleTable"
-      :data="tableData"
+      :data="tableData.rows"
       :row-class-name="tableRowClassName"
       :header-cell-style="{
         'text-align': 'center',
@@ -79,7 +79,7 @@
       style="width: 100%"
     >
       <el-table-column type="selection" width="55" />
-      <el-table-column prop="index" label="序号" />
+      <!--      <el-table-column prop="index" label="序号" />-->
       <!-- <el-table-column prop="id" label="序号"> </el-table-column> -->
       <el-table-column prop="categoryCode" label="编号" />
       <el-table-column prop="categoryName" label="名称" />
@@ -117,7 +117,7 @@
     <group-page
       v-model="isFristPage"
       :limit="limit"
-      :total="total"
+      :total="tableData.total/limit"
       :offset="offset"
       :count="tableData.total"
       @setOffset="setOffset"
@@ -125,6 +125,7 @@
     />
     <!-- 新增弹框 -->
     <category-add-dialog
+      ref="addDialog"
       :title="title"
       :is-show-info="isShowAdd"
       :data-info="dataInfo"
@@ -133,6 +134,7 @@
     />
     <!-- 详情 -->
     <category-info-dialog
+      ref="detail"
       :is-show-info="isShowInfo"
       :data-info="rowInfo"
       @close="closeInfo"
@@ -185,16 +187,7 @@
     },
     addCategory() {
       this.isShowAdd = true
-      this.dataInfo = {
-        categoryCode: '',
-        categoryName: '',
-        pCategoryCode: '',
-        remark: '',
-        qualifyids: [],
-        productParams: [
-          { paramName: '', paramOrder: 1, paramRequire: 1 }
-        ]
-      }
+      this.$refs.addDialog.initDialog('add')
       this.title = '品类新增'
     },
     reset() {
@@ -208,7 +201,7 @@
       C_listPage(`limit=${limit}&offset=${offset}`, this.queryInfo).then(res => {
         if (res.code === 200) {
           // 得到相关数据
-          this.tableData = res.data.rows
+          this.tableData = res.data
         }
       })
     },
@@ -248,7 +241,7 @@
     compile(row) {
       this.isShowAdd = true
       this.title = '编辑'
-      this.dataInfo = row
+      this.$refs.addDialog.initDialog('update', row)
     },
     exportToExcel() {
       C_listPage('limit=1000000000&offset=1', {}).then((res) => {
@@ -286,11 +279,6 @@
     }
     .productBtn {
       .btnItem {
-        //margin-right: 10px;
-        border-radius: 5px;
-        // height: 32px;
-        // width: 84px;
-        font-size: 16px;
       }
 
     }

diff --git a/src/api/product/category.js b/src/api/product/category.js
index 19ff711..aea97c7 100644
--- a/src/api/product/category.js
+++ b/src/api/product/category.js
@@ -1,4 +1,3 @@
-import { instance } from '../request/http'
 /**
  * 品类相关接口
  */
@@ -21,7 +20,7 @@
   })
 }
 
-// 品类更新
+// 品类详情
 export function detail(data) {
   return request({
     url: `/categoryInfo/detail`,
diff --git a/src/components/mycomponent/dialog/categoryAddDialog.vue b/src/components/mycomponent/dialog/categoryAddDialog.vue
index 4e547d4..c47e73c 100644
--- a/src/components/mycomponent/dialog/categoryAddDialog.vue
+++ b/src/components/mycomponent/dialog/categoryAddDialog.vue
@@ -8,19 +8,20 @@
     @close="close"
   >
     <div class="categoryDialog">
-      <div class="content">
-        <div class="inputContent">
-          <div class="inputbox">
-            <red-star />
-            <input-vue
-              v-model="categoryInfo.categoryCode"
-              title="编号"
-              class="inputWidth"
-            />
-          </div>
-          <div class="inputbox">
-            <red-star />
-            <input-vue title="上级品类" class="inputWidth">
+      <el-form ref="dataForm" :rules="rules" :model="categoryInfo" class="inputContent" label-position="right" label-width="100px">
+        <el-row :gutter="10">
+          <el-col :span="12">
+            <el-form-item label="编号" prop="categoryCode">
+              <el-input v-model="categoryInfo.categoryCode" placeholder="必填" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="名称" prop="categoryName">
+              <el-input v-model="categoryInfo.categoryName" placeholder="必填" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="上级品类" prop="pCategoryCode">
               <el-select
                 v-model="categoryInfo.pCategoryCode"
                 filterable
@@ -28,38 +29,20 @@
                 style="width: 100%"
               >
                 <el-option
+                  label="无"
+                  value=""
+                />
+                <el-option
                   v-for="item in categoryList"
                   :key="item.categoryCode"
                   :label="item.categoryName"
                   :value="item.categoryCode"
                 />
               </el-select>
-            </input-vue>
-          </div>
-          <div class="inputbox">
-            <red-star />
-            <input-vue title="备注" class="inputWidth">
-              <el-input
-                v-model="categoryInfo.remark"
-                type="textarea"
-                :rows="3"
-                placeholder="请输入内容"
-              />
-            </input-vue>
-          </div>
-        </div>
-        <div class="inputContent">
-          <div class="inputbox">
-            <red-star />
-            <input-vue
-              v-model="categoryInfo.categoryName"
-              title="名称"
-              class="inputWidth"
-            />
-          </div>
-          <div class="inputbox">
-            <red-star />
-            <input-vue title="资质要求" class="inputWidth">
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="资质要求" prop="qualifyIds">
               <el-select
                 v-model="categoryInfo.qualifyIds"
                 filterable
@@ -74,43 +57,49 @@
                   :value="item.id"
                 />
               </el-select>
-            </input-vue>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="备注" prop="remark">
+              <el-input
+                v-model="categoryInfo.remark"
+                type="textarea"
+                :rows="3"
+                placeholder="请输入内容"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <div class="AddContent">
+          <div class="addBtn">
+            <el-button type="primary" @click="pushAry">
+              添加产品参数
+            </el-button>
           </div>
-        </div>
-      </div>
-      <div class="AddContent">
-        <div class="addBtn">
-          <el-button type="primary" @click="pushAry">
-            添加产品参数
-          </el-button>
-        </div>
-        <div v-for=" (item,index) in categoryInfo.productParams" :key="index">
-          <div class="addItem">
-            <div class="devName item">
-              <red-star />
-              <input-vue v-model="item.paramName" title="名称" class="inputWidth" />
-            </div>
-            <div class="number item">
-              <red-star />
-              <input-vue title="排序" class="inputWidth">
-                <input-number v-model="item.paramOrder" />
-              </input-vue>
-            </div>
-            <div class="isRequire item">
-              <input-vue title="" class="inputWidth">
+          <div style="padding: 15px 20px">
+            <div v-for=" (item,index) of categoryInfo.productParams" :key="index" class="addItem">
+              <el-form-item label="名称" :prop="`productParams[${index}].paramName`" :rules="{required: true, message: `请输入名称`, trigger: ['change','blur']}" label-width="60px">
+                <el-input v-model="item.paramName" placeholder="必填" />
+              </el-form-item>
+              <el-form-item label="排序" :prop="`productParams[${index}].paramOrder`" :rules="{required: true, message: `请输入排序`, trigger: ['change','blur']}" label-width="60px">
+                <el-input-number v-model="item.paramOrder" :min="0" :max="9999" />
+              </el-form-item>
+              <div class="isRequire item" style="height:40px;margin-left: 20px">
                 <el-checkbox v-model="item.paramRequire" true-label="1" false-label="0">
                   必填
                 </el-checkbox>
-              </input-vue>
-            </div>
-            <div class="delete item">
-              <el-button type="primary" @click="removeAry(index)">
-                删除
-              </el-button>
+              </div>
+              <div class="delete item" style="margin-left: 15px">
+                <el-button type="primary" @click="removeAry(index)">
+                  删除
+                </el-button>
+              </div>
             </div>
           </div>
         </div>
-      </div>
+      </el-form>
+    </div>
+    <div slot="footer" class="dialog-footer">
       <div class="btnBox">
         <el-button type="primary" class="save" @click="save">
           保存
@@ -124,32 +113,23 @@
 </template>
 
 <script>
-import dialogHeader from './dialogHeader.vue'
-import inputVue from '../input/inputVue.vue'
-import InputNumber from '../input/inputNumber.vue'
-import RedStar from '../redStar.vue'
-import { Message } from 'element-ui'
 import { C_add, C_list, C_update, detail } from '../../../api/product/category'
 import { getCertification } from '../../../api/systemNew/systemNew'
 
 export default {
-  components: {
-    inputVue,
-    InputNumber,
-    RedStar
-  },
   props: {
     isShowInfo: {
       type: Boolean,
       default: true
     },
-    dataInfo: {
-      type: Object
-    },
-    title: ''
+    title: {
+      type: String,
+      default: ''
+    }
   },
   data() {
     return {
+      dialogType: '', // add新增，update
       // 品类信息
       categoryInfo: {
         categoryCode: '',
@@ -161,36 +141,19 @@
           {
             paramName: '',
             paramOrder: 0,
-            paramRequire: false
+            paramRequire: '0'
           }
         ]
       },
-      categoryList: [],
-      // 资质列表
-      certificationList: []
-    }
-  },
-  watch: {
-    dataInfo: {
-      handler(vla) {
-        if (vla !== '') {
-          // 编辑操作
-          if (!vla.id) return
-          detail({ id: vla.id }).then(res => {
-            this.categoryInfo.id = res.data.id
-            this.categoryInfo.categoryCode = res.data.categoryCode
-            this.categoryInfo.categoryName = res.data.categoryName
-            this.categoryInfo.pCategoryCode = res.data.pCategoryCode
-            this.categoryInfo.remark = res.data.remark
-            this.categoryInfo.qualifyIds = res.data.qualifyIds
-            this.categoryInfo.productParams = res.data.productParams
-          })
-        } else {
-          this.resetData()
-        }
+      rules: {
+        categoryCode: [{ required: true, message: '此项不能为空', trigger: ['blur', 'change'] }],
+        categoryName: [{ required: true, message: '此项不能为空', trigger: ['blur', 'change'] }],
+        pCategoryCode: [{ required: false, message: '此项不能为空', trigger: ['blur', 'change'] }],
+        qualifyIds: [{ type: 'array', required: true, message: '此项不能为空', trigger: ['blur', 'change'] }],
+        productParams: [{ required: true, message: '此项不能为空', trigger: ['blur', 'change'] }]
       },
-      deep: true,
-      immediate: true
+      categoryList: [], // 品类列表
+      certificationList: [] // 资质列表
     }
   },
   mounted() {
@@ -203,42 +166,73 @@
     })
   },
   methods: {
-    close() {
-      this.$emit('close')
-      // 重置数据
-      // this.resetData()
-    },
-    save() {
-      if (this.title == '品类新增') {
-        C_add(this.categoryInfo).then(res => {
-          if (res.code === 200) {
-            this.$message({
-              message: '保存成功',
-              type: 'success'
-            })
-
-            this.close()
-            // 保存后刷新数据
-            this.$emit('refresh')
-          }
+    initDialog(dialogType, row) {
+      this.dialogType = dialogType
+      if (dialogType === 'add') {
+        this.resetData()
+        this.$nextTick(() => {
+          this.$refs['dataForm'].clearValidate()
         })
       } else {
-        // this.categoryInfo.productParams = this.dealAry(this.categoryInfo.productParams)
-        console.log(this.categoryInfo.productParams)
-        debugger
-        C_update(this.categoryInfo).then(res => {
-          if (res.code === 200) {
-            this.$message({
-              message: '更新成功',
-              type: 'success'
+        if (!row.id) return
+        detail({ id: row.id }).then(res => {
+          this.categoryInfo = {
+            id: res.data.id,
+            categoryCode: res.data.categoryCode,
+            categoryName: res.data.categoryName,
+            pCategoryCode: res.data.pCategoryCode,
+            remark: res.data.remark,
+            qualifyIds: res.data.qualifyIds,
+            productParams: res.data.productParams.map(item => {
+              return {
+                paramName: item.paramName,
+                paramOrder: item.paramOrder,
+                paramRequire: item.paramRequire
+              }
             })
-            this.close()
-            // 保存后刷新数据
-            this.$emit('refresh')
           }
         })
       }
     },
+    close() {
+      this.$emit('close')
+      this.resetData()
+    },
+    save() {
+      this.$refs['dataForm'].validate((valid) => {
+        console.log(this.deptForm)
+        if (valid) {
+          if (this.title === '品类新增') {
+            C_add(this.categoryInfo).then(res => {
+              if (res.code === 200) {
+                this.$message({
+                  message: '保存成功',
+                  type: 'success'
+                })
+
+                this.close()
+                // 保存后刷新数据
+                this.$emit('refresh')
+              }
+            })
+          } else {
+            // this.categoryInfo.productParams = this.dealAry(this.categoryInfo.productParams)
+            console.log(this.categoryInfo.productParams)
+            C_update(this.categoryInfo).then(res => {
+              if (res.code === 200) {
+                this.$message({
+                  message: '更新成功',
+                  type: 'success'
+                })
+                this.close()
+                // 保存后刷新数据
+                this.$emit('refresh')
+              }
+            })
+          }
+        }
+      })
+    },
     resetData() {
       this.categoryInfo = {
         categoryCode: '',
@@ -250,7 +244,7 @@
           {
             paramName: '',
             paramOrder: 0,
-            paramRequire: false
+            paramRequire: '0'
           }
         ]
       }
@@ -264,7 +258,7 @@
       this.categoryInfo.productParams.push({
         paramName: '',
         paramOrder: 0,
-        paramRequire: false
+        paramRequire: '0'
       })
     }
   }
@@ -308,7 +302,7 @@
 
     .addItem {
       display: flex;
-
+      align-items: flex-start;
       .item {
         padding-right: 10px;
         display: flex;
diff --git a/src/components/mycomponent/dialog/categoryInfoDialog.vue b/src/components/mycomponent/dialog/categoryInfoDialog.vue
index be10d16..08a9d09 100644
--- a/src/components/mycomponent/dialog/categoryInfoDialog.vue
+++ b/src/components/mycomponent/dialog/categoryInfoDialog.vue
@@ -1,115 +1,94 @@
 <!--品类详情弹窗-->
 <template>
-  <el-dialog title="详情" width="920px" :visible.sync="isShowInfo" append-to-body @close="close">
-    <div class="contanier" v-if="dataInfo">
-      <div class="box">
-        <!--        <div class="item">-->
-        <!--          <div class="title">序号</div>-->
-        <!--          <div class="content"> {{ dataInfo.id }}</div>-->
-        <!--        </div>-->
-        <div class="item">
-          <div class="title">
-            编号
+  <el-dialog title="品类详情" width="920px" :visible.sync="isShowInfo" append-to-body @close="close">
+    <div v-if="form" class="contanier">
+      <el-descriptions class="margin-top" title="" :column="2" border>
+        <el-descriptions-item label="编号">
+          {{ form.categoryCode }}
+        </el-descriptions-item>
+        <el-descriptions-item label="名称">
+          {{ form.categoryName }}
+        </el-descriptions-item>
+        <el-descriptions-item label="父级品类">
+          {{ form.pCategoryName || '无' }}
+        </el-descriptions-item>
+        <el-descriptions-item label="资质要求">
+          {{ form.qualifyStr }}
+        </el-descriptions-item>
+        <el-descriptions-item label="备注" :span="2">
+          {{ form.remark }}
+        </el-descriptions-item>
+        <el-descriptions-item label="产品参数" :span="2">
+          <div v-for="(param,index) of form.productParams" class="param-line">
+            <span>参数{{ index+1 }}：</span>
+            <span class="param-name">参数名称:</span><span class="param-value">{{ param.paramName }}</span>
+            <span class="param-name">排序:</span><span class="param-value">{{ param.paramOrder }}</span>
+            <span class="param-name">必填:</span><span class="param-value">{{ param.paramRequire?'是':'否' }}</span>
           </div>
-          <div class="content">
-            {{ dataInfo.categoryCode }}
-          </div>
-        </div>
-      </div>
-      <div class="box">
-        <div class="item">
-          <div class="title">
-            品类名称
-          </div>
-          <div class="content">
-            {{ dataInfo.categoryName }}
-          </div>
-        </div>
-        <div class="item">
-          <div class="title">
-            创建时间
-          </div>
-          <div class="content">
-            {{ dataInfo.createTime }}
-          </div>
-        </div>
-      </div>
-      <div class="box">
-        <div class="item">
-          <div class="title">
-            ids
-          </div>
-          <div class="content">
-            {{ dataInfo.ids }}
-          </div>
-        </div>
-        <div class="item">
-          <div class="title">
-            父级品类编号
-          </div>
-          <div class="content">
-            {{ dataInfo.pCategoryCode }}
-          </div>
-        </div>
-      </div>
-      <div class="box">
-        <div class="item">
-          <div class="title">
-            父级品类名称
-          </div>
-          <div class="content">
-            {{ dataInfo.pCategoryName }}
-          </div>
-        </div>
-        <div class="item">
-          <div class="title">
-            供应商id
-          </div>
-          <div class="content">
-            {{ dataInfo.qualifyIds }}
-          </div>
-        </div>
-      </div>
-      <div class="box">
-        <div class="item">
-          <div class="title">
-            供应商名称
-          </div>
-          <div class="content">
-            {{ dataInfo.qualifyStr }}
-          </div>
-        </div>
-        <div class="item">
-          <div class="title">
-            更新时间
-          </div>
-          <div class="content">
-            {{ dataInfo.updateTime }}
-          </div>
-        </div>
-      </div>
-      <div class="box">
-        <div class="item">
-          <div class="title">
-            备注
-          </div>
-          <div class="content">
-            {{ dataInfo.remark }}
-          </div>
-        </div>
-      </div>
+        </el-descriptions-item>
+      </el-descriptions>
     </div>
   </el-dialog>
 </template>
 
 <script>
-import { infoDialog } from '../../../utils/myUtils/mixins/infoDialog' // 抽离porp 和 methods
+import { detail } from '@/api/product/category'
+
 export default {
-  mixins: [infoDialog]
+  props: {
+    isShowInfo: {
+      type: Boolean,
+      default: true
+    },
+    dataInfo: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    }
+  },
+  data() {
+    return {
+      form: {
+        categoryCode: '',
+        categoryName: '',
+        pCategoryName: '',
+        remark: '',
+        qualifyStr: '',
+        productParams: [
+          {
+            paramName: '',
+            paramOrder: 0,
+            paramRequire: '0'
+          }
+        ]
+      }
+    }
+  },
+  methods: {
+    initDialog(id) {
+      detail({ id }).then(res => {
+        this.form = res.data
+      })
+    },
+    close() {
+      this.$emit('close')
+    }
+  }
 }
 </script>
 
 <style lang="scss" scoped>
 @import '../../../assets/css/infoDialog.scss';
+.param-line{
+  line-height: 1.8;
+  .param-name{
+    margin-left: 10px;
+  }
+  .param-value{
+    font-weight: bold;
+    margin-left: 5px;
+  }
+}
 
 </style>
diff --git a/src/components/mycomponent/groupPage.vue b/src/components/mycomponent/groupPage.vue
index aa62667..666edc1 100644
--- a/src/components/mycomponent/groupPage.vue
+++ b/src/components/mycomponent/groupPage.vue
@@ -3,10 +3,16 @@
   <div class="footer">
     <div>共{{ total }}页记录 第{{ offset }}/{{ total }}页</div>
     <div>
-      <el-pagination :current-page.sync="offset" background layout="  prev, pager, next,sizes, jumper"
-                     :page-size="limit" :total="count" @size-change="changeSize" @current-change="changeOffset"
-                     ref="compontentPage">
-      </el-pagination>
+      <el-pagination
+        ref="compontentPage"
+        :current-page.sync="offset"
+        background
+        layout="  prev, pager, next,sizes, jumper"
+        :page-size="limit"
+        :total="count"
+        @size-change="changeSize"
+        @current-change="changeOffset"
+      />
     </div>
     <!-- <div>页码</div> -->
   </div>
@@ -14,39 +20,50 @@
 
 <script>
 export default {
-  data() {
-    return {}
-  },
-  props: {
-    total: {
-      // 总页数
-      type: Number,
-      default: 1,
-    },
-    offset: {
-      // 当前页
-      type: Number,
-      default: 1,
-    },
-    count: {
-      // 总条数
-      type: Number,
-      default: 10,
-    },
-    limit: {
-      // 当前页条数
-      type: Number,
-      default: 10,
-    },
-    isFristPage: {
-      type: Boolean,
-      default: false,
-    }
-  },
   model: {
     prop: 'isFristPage',
     event: 'changeFristPage'
   },
+  props: {
+    // 总页数
+    total: {
+      type: Number,
+      default: 1
+    },
+    // 当前页
+    offset: {
+      type: Number,
+      default: 1
+    },
+    // 总条数
+    count: {
+      type: Number,
+      default: 10
+    },
+    // 当前页条数
+    limit: {
+      type: Number,
+      default: 10
+    },
+    // 是否为第一页
+    isFristPage: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {}
+  },
+  watch: {
+    isFristPage(current) {
+      if (current) {
+        console.log(current)
+        // 分页组件跳转到第一页
+        this.$refs.compontentPage.handleCurrentChange(1)
+        this.$emit('changeFristPage', false)
+      }
+    }
+  },
   methods: {
     // 当前条数改变时触发
     changeSize(res) {
@@ -61,24 +78,12 @@
       //   }
 
       // 发送每页条数数量
-      this.$emit("setLimit", res);
+      this.$emit('setLimit', res)
     },
     // 当前页码改变时触发
     changeOffset(index) {
       // console.log(index,"currentPage");
-      this.$emit("setOffset", index);
-    },
-  },
-  watch: {
-    isFristPage(current) {
-
-      if (current) {
-        console.log(current);
-        // 分页组件跳转到第一页
-        this.$refs.compontentPage.handleCurrentChange(1)
-        this.$emit('changeFristPage', false)
-      }
-
+      this.$emit('setOffset', index)
     }
   }
 }
diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
index 4bf0d0d..1dcd8f6 100644
--- a/src/layout/components/AppMain.vue
+++ b/src/layout/components/AppMain.vue
@@ -33,6 +33,7 @@
   /*50 = navbar  */
   /*min-height: calc(100vh - 50px);*/
   position: relative;
+  padding-top: 10px;
   /*height: 100%;*/
   /*min-width:1525px;*/
   /*min-width: 1625px;*/
diff --git a/src/utils/myUtils/mixins/listPage.js b/src/utils/myUtils/mixins/listPage.js
index a9f21e5..07f3141 100644
--- a/src/utils/myUtils/mixins/listPage.js
+++ b/src/utils/myUtils/mixins/listPage.js
@@ -75,6 +75,9 @@
       this.isShowInfo = true
       // 改变当前行的数据
       this.rowInfo = row
+      if (this.$refs.detail) {
+        this.$refs.detail.initDialog(row.id)
+      }
     }
   }
 }
diff --git a/src/views/product/brandList.vue b/src/views/product/brandList.vue
index 21762ec..0bb517e 100644
--- a/src/views/product/brandList.vue
+++ b/src/views/product/brandList.vue
@@ -268,7 +268,7 @@
     }
   }
   .productFun {
-    margin: 0px 0px 30px;
+    margin: 0px 0px 20px;
     display: flex;
     justify-content: space-between;
     .productInput {
@@ -279,14 +279,6 @@
       }
     }
     .productBtn {
-      .btnItem {
-        margin-right: 10px;
-        border-radius: 5px;
-        // height: 32px;
-        // width: 84px;
-        font-size: 16px;
-      }
-
     }
   }
 
diff --git a/src/views/product/categoryList.vue b/src/views/product/categoryList.vue
index d01ea1d..552f1ca 100644
--- a/src/views/product/categoryList.vue
+++ b/src/views/product/categoryList.vue
@@ -13,7 +13,7 @@
           />
         </div>
         名称
-        <div class="inputBox" style="width: 144px">
+        <div class="inputBox" style="width: 150px">
           <el-input
             v-model="selectInfo.categoryName"
             placeholder="请输入品类名称"
@@ -68,7 +68,7 @@
 
     <el-table
       ref="multipleTable"
-      :data="tableData"
+      :data="tableData.rows"
       :row-class-name="tableRowClassName"
       :header-cell-style="{
         'text-align': 'center',
@@ -79,7 +79,7 @@
       style="width: 100%"
     >
       <el-table-column type="selection" width="55" />
-      <el-table-column prop="index" label="序号" />
+      <!--      <el-table-column prop="index" label="序号" />-->
       <!-- <el-table-column prop="id" label="序号"> </el-table-column> -->
       <el-table-column prop="categoryCode" label="编号" />
       <el-table-column prop="categoryName" label="名称" />
@@ -117,7 +117,7 @@
     <group-page
       v-model="isFristPage"
       :limit="limit"
-      :total="total"
+      :total="tableData.total/limit"
       :offset="offset"
       :count="tableData.total"
       @setOffset="setOffset"
@@ -125,6 +125,7 @@
     />
     <!-- 新增弹框 -->
     <category-add-dialog
+      ref="addDialog"
       :title="title"
       :is-show-info="isShowAdd"
       :data-info="dataInfo"
@@ -133,6 +134,7 @@
     />
     <!-- 详情 -->
     <category-info-dialog
+      ref="detail"
       :is-show-info="isShowInfo"
       :data-info="rowInfo"
       @close="closeInfo"
@@ -185,16 +187,7 @@
     },
     addCategory() {
       this.isShowAdd = true
-      this.dataInfo = {
-        categoryCode: '',
-        categoryName: '',
-        pCategoryCode: '',
-        remark: '',
-        qualifyids: [],
-        productParams: [
-          { paramName: '', paramOrder: 1, paramRequire: 1 }
-        ]
-      }
+      this.$refs.addDialog.initDialog('add')
       this.title = '品类新增'
     },
     reset() {
@@ -208,7 +201,7 @@
       C_listPage(`limit=${limit}&offset=${offset}`, this.queryInfo).then(res => {
         if (res.code === 200) {
           // 得到相关数据
-          this.tableData = res.data.rows
+          this.tableData = res.data
         }
       })
     },
@@ -248,7 +241,7 @@
     compile(row) {
       this.isShowAdd = true
       this.title = '编辑'
-      this.dataInfo = row
+      this.$refs.addDialog.initDialog('update', row)
     },
     exportToExcel() {
       C_listPage('limit=1000000000&offset=1', {}).then((res) => {
@@ -286,11 +279,6 @@
     }
     .productBtn {
       .btnItem {
-        //margin-right: 10px;
-        border-radius: 5px;
-        // height: 32px;
-        // width: 84px;
-        font-size: 16px;
       }
 
     }
diff --git a/src/views/product/detailBrand.vue b/src/views/product/detailBrand.vue
index fe4189c..da686a8 100644
--- a/src/views/product/detailBrand.vue
+++ b/src/views/product/detailBrand.vue
@@ -1,6 +1,6 @@
 <!--品牌详情-->
 <template>
-  <el-dialog width="50%" title="品牌详情" :visible.sync="dialogFormVisible" top="10vh" append-to-body>
+  <el-dialog width="50%" title="品牌详情" :visible.sync="dialogFormVisible" append-to-body>
     <el-descriptions class="margin-top" title="" :column="2" border>
       <el-descriptions-item label="名称">
         {{ brandForm.brandName }}
@@ -17,7 +17,6 @@
       <el-descriptions-item label="性质">
         {{ brandForm.brandProperty }}
       </el-descriptions-item>
-      <el-descriptions-item label="" />
       <el-descriptions-item label="备注" :span="2">
         {{ brandForm.remark }}
       </el-descriptions-item>