样式调整

src/App.vue

@@ -27,3 +27,76 @@
     }
   }
 </script>
+<style>
+#app .theme-picker {
+  display: none;
+}
+
+.el-form-item {
+  width: 100%;
+  margin-right: 0px;
+  /* margin-bottom: 10px; */
+}
+.el-form--label-top {
+  background-color: #fff;
+  padding: 10px;
+  margin-bottom: 15px;
+}
+
+.el-form--label-top .el-form-item__label {
+  padding: 0;
+  line-height: 26px;
+}
+
+
+.el-card__body{
+  background-color: #f3f3f4;
+}
+.el-tabs--border-card{
+  border:none;
+  box-shadow:none;
+}
+.el-tabs--border-card>.el-tabs__header{
+  background-color: #f3f3f4;
+}
+.el-tabs--border-card>.el-tabs__header .el-tabs__item {
+  font-weight: 600;
+}
+.el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active {
+  color: #555555;
+  border-radius: 4px 4px 0 0;
+  font-weight: 600;
+}
+.el-tabs--border-card>.el-tabs__header .el-tabs__item:not(.is-disabled):hover {
+    color: #555555;
+}
+.app-container {
+  background-color: #f3f3f4;
+}
+.border-card {
+  padding: 15px;background-color: #fff;
+}
+.editButton{
+  background-color: #23c6c8 !important;
+  border-color: #23c6c8 !important;
+}
+.mb8 {
+    margin-bottom: 8px;
+}
+.el-button--primary {
+    color: #FFF;
+    background-color: #11A983;
+    border-color: #11A983;
+}
+.el-button--primary:focus, .el-button--primary:hover {
+    background: #41ba9c;
+    border-color: #41ba9c;
+    color: #FFF;
+}
+.editText{
+  color:#11A983
+}
+.deleteText{
+  color:#fd0e0e
+}
+</style>

src/views/goodsManage/brand.vue

@@ -1,125 +1,170 @@
 <template>
-  <div class="app-container calendar-list-container">
+  <div class="app-container">
 
-    <!-- 查询和其他操作 -->
-    <div class="filter-container">
-      <el-input clearable class="filter-item" style="width: 200px;" placeholder="请输入品牌商ID" v-model="listQuery.id">
-      </el-input>
-      <el-input clearable class="filter-item" style="width: 200px;" placeholder="请输入品牌商名称" v-model="listQuery.name">
-      </el-input>
-      <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleQuery">查找</el-button>
-      <el-button class="filter-item" icon="el-icon-refresh" @click="resetQuery">重置</el-button>
-      <el-button class="filter-item" type="primary" icon="el-icon-plus" @click="handleCreate">添加</el-button>
-      <el-button class="filter-item" v-waves icon="el-icon-download" @click="handleDownload"
-        :loading="downloadLoading">导出</el-button>
-    </div>
+    <!-- 查询区域 -->
+    <el-form :model="listQuery" size="small" :inline="true" label-position="top">
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="品牌商 ID">
+            <el-input clearable placeholder="请输入品牌商 ID" v-model="listQuery.id"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="品牌商名称">
+            <el-input clearable placeholder="请输入品牌商名称" v-model="listQuery.name"></el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="搜索">
+            <el-button style="width: 100%;" type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="重置">
+            <el-button style="width: 100%;" icon="el-icon-refresh" type="primary" @click="resetQuery">重置</el-button>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+
+    <!-- 操作按钮 -->
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button type="primary" class="editButton" size="small" icon="el-icon-plus" @click="handleCreate">添加</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="warning" icon="el-icon-download" size="small" @click="handleDownload" :loading="downloadLoading">导出</el-button>
+      </el-col>
+    </el-row>
 
     <!-- 查询结果 -->
-    <el-table size="small" :data="list" v-loading="listLoading" element-loading-text="正在查询中。。。" border fit
-      highlight-current-row>
+    <div class="border-card">
+      <el-table height="450" size="small" :data="list" v-loading="listLoading" element-loading-text="正在查询中。。。" border fit
+        highlight-current-row>
 
-      <el-table-column type="index" label="序号" header-align="center" align="center">
-      </el-table-column>
+        <el-table-column type="index" label="序号" header-align="center" align="center">
+        </el-table-column>
 
-      <el-table-column align="center" width="150px" label="品牌商ID" prop="id">
-      </el-table-column>
+        <el-table-column align="center" width="150px" label="品牌商 ID" prop="id">
+        </el-table-column>
 
-      <el-table-column align="center" min-width="100px" label="品牌商名称" prop="name">
-      </el-table-column>
+        <el-table-column align="center" min-width="100px" label="品牌商名称" prop="name">
+        </el-table-column>
 
-      <el-table-column align="center" min-width="300px" label="介绍" prop="simpleDesc">
-      </el-table-column>
+        <el-table-column align="center" min-width="300px" label="介绍" prop="simpleDesc">
+        </el-table-column>
 
-      <el-table-column align="center" min-width="50px" label="底价" prop="floorPrice">
-      </el-table-column>
+        <el-table-column align="center" min-width="50px" label="底价" prop="floorPrice">
+        </el-table-column>
 
-      <el-table-column align="center" min-width="100px" label="是否显示" prop="isShow">
-        <template slot-scope="scope">
-          <el-tag :type="scope.row.isShow ? 'success' : 'error'">{{ scope.row.isShow ? '可显示' : '不显示' }}</el-tag>
-        </template>
-      </el-table-column>
+        <el-table-column align="center" min-width="100px" label="是否显示" prop="isShow">
+          <template slot-scope="scope">
+            <el-tag :type="scope.row.isShow ? 'success' : 'error'">{{ scope.row.isShow ? '可显示' : '不显示' }}</el-tag>
+          </template>
+        </el-table-column>
 
-      <el-table-column align="center" min-width="100px" label="是否新上" prop="isNew" :formatter="judgeIsnew">
-      </el-table-column>
+        <el-table-column align="center" min-width="100px" label="是否新上" prop="isNew" :formatter="judgeIsnew">
+        </el-table-column>
 
-      <el-table-column align="center" label="操作" width="250" class-name="small-padding fixed-width">
-        <template slot-scope="scope">
-          <el-button type="primary" size="small" @click="handleUpdate(scope.row)">编辑</el-button>
-          <el-button type="danger" size="small" @click="handleDelete(scope.row)">删除</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
+        <el-table-column align="center" label="操作" width="240px" class-name="small-padding fixed-width">
+          <template slot-scope="scope">
+            <el-button type="text" icon="el-icon-edit" class="editText" size="small" @click="handleUpdate(scope.row)">编辑</el-button>
+            <el-button type="text" icon="el-icon-delete" class="deleteText" size="small" @click="handleDelete(scope.row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
 
-    <!-- 分页 -->
-    <div class="pagination-container">
-      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
-        :current-page="listQuery.page" :page-sizes="[10, 20, 30, 50]" :page-size="listQuery.limit"
-        layout="total, sizes, prev, pager, next, jumper" :total="total">
-      </el-pagination>
+      <!-- 分页 -->
+      <div class="pagination-container">
+        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
+          :current-page="listQuery.page" :page-sizes="[10, 20, 30, 50]" :page-size="listQuery.limit"
+          layout="total, sizes, prev, pager, next, jumper" :total="total">
+        </el-pagination>
+      </div>
     </div>
 
     <!-- 添加或修改对话框 -->
-    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" width="600px">
-      <el-form :rules="rules" ref="dataForm" :model="dataForm" status-icon label-position="left" label-width="100px">
+    <el-dialog :close-on-click-modal="false" :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" width="70%">
+      <el-form :rules="rules" ref="dataForm" :model="dataForm" status-icon label-position="top"
+        style='margin: 0 50px;'>
+
         <el-form-item label="品牌商名称" prop="name">
-          <el-input v-model="dataForm.name"></el-input>
+          <el-input v-model="dataForm.name" placeholder="请输入品牌商名称"></el-input>
         </el-form-item>
+
         <el-form-item label="介绍" prop="simpleDesc">
-          <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" placeholder="请输入"
+          <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" placeholder="请输入介绍"
             v-model="dataForm.simpleDesc">
           </el-input>
         </el-form-item>
-        <el-form-item label="品牌商图片" style="display: block !important; margin-left: 10px">
-          <el-tooltip content="建议图片规格：375*145 图片宽度扩大两倍，高度等比例扩大" placement="top-start">
-            <el-upload class="avatar-uploader" :action="fileImgUrl" :show-file-list="false"
-              :on-success="handleBrandSuccess" :before-upload="beforeBrandUpload">
-              <img v-if="dataForm.picUrl" :src="dataForm.picUrl" class="avatar">
-              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
-            </el-upload>
-          </el-tooltip>
-        </el-form-item>
-        <el-form-item label="宣传图片" style="display: block !important; margin-left: 10px">
-          <el-tooltip content="建议图片规格：375*145 图片宽度扩大两倍，高度等比例扩大" placement="top-start">
-            <el-upload class="avatar-uploader" :action="fileImgUrl" :show-file-list="false"
-              :on-success="handlePublicitySuccess" :before-upload="beforePublicityUpload">
-              <img v-if="dataForm.listPicUrl" :src="dataForm.listPicUrl" class="avatar">
-              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
-            </el-upload>
-          </el-tooltip>
-        </el-form-item>
-        <el-form-item label="APP宣传图片" style="display: block !important; margin-left: 10px">
-          <el-tooltip content="建议图片规格：375*145 图片宽度扩大两倍，高度等比例扩大" placement="top-start">
-            <el-upload class="avatar-uploader" :action="fileImgUrl" :show-file-list="false"
-              :on-success="handleAppcitySuccess" :before-upload="beforeAppcityUpload">
-              <img v-if="dataForm.appListPicUrl" :src="dataForm.appListPicUrl" class="avatar">
-              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
-            </el-upload>
-          </el-tooltip>
-        </el-form-item>
 
+        <el-row :gutter="20">
+          <el-col :span="8">
+            <el-form-item label="品牌商图片" style="display: block !important;">
+              <el-tooltip content="建议图片规格：375*145 图片宽度扩大两倍，高度等比例扩大" placement="top-start">
+                <el-upload class="avatar-uploader" :action="fileImgUrl" :show-file-list="false"
+                  :on-success="handleBrandSuccess" :before-upload="beforeBrandUpload">
+                  <img v-if="dataForm.picUrl" :src="dataForm.picUrl" class="avatar">
+                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+                </el-upload>
+              </el-tooltip>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="宣传图片" style="display: block !important;">
+              <el-tooltip content="建议图片规格：375*145 图片宽度扩大两倍，高度等比例扩大" placement="top-start">
+                <el-upload class="avatar-uploader" :action="fileImgUrl" :show-file-list="false"
+                  :on-success="handlePublicitySuccess" :before-upload="beforePublicityUpload">
+                  <img v-if="dataForm.listPicUrl" :src="dataForm.listPicUrl" class="avatar">
+                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+                </el-upload>
+              </el-tooltip>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="APP 宣传图片" style="display: block !important;">
+              <el-tooltip content="建议图片规格：375*145 图片宽度扩大两倍，高度等比例扩大" placement="top-start">
+                <el-upload class="avatar-uploader" :action="fileImgUrl" :show-file-list="false"
+                  :on-success="handleAppcitySuccess" :before-upload="beforeAppcityUpload">
+                  <img v-if="dataForm.appListPicUrl" :src="dataForm.appListPicUrl" class="avatar">
+                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+                </el-upload>
+              </el-tooltip>
+            </el-form-item>
+          </el-col>
+        </el-row>
 
-        <el-form-item label="底价" prop="floorPrice">
-          <el-input v-model="dataForm.floorPrice"></el-input>
-        </el-form-item>
-        <el-form-item label="是否显示" prop="isShow">
-          <el-select v-model="dataForm.isShow" placeholder="请选择" style="width: 100%;">
-            <el-option label="显示" :value="true">
-            </el-option>
-            <el-option label="不显示" :value="false">
-            </el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item label="是否新上" prop="isNew">
-          <el-select v-model="dataForm.isNew" placeholder="请选择" style="width: 100%;">
-            <el-option label="新上" :value="true">
-            </el-option>
-            <el-option label="不是新上" :value="false">
-            </el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item label="新上宣传图片" prop="newPicUrl" v-if="dataForm.isNew === 'true'">
-          <el-input v-model="dataForm.newPicUrl"></el-input>
-          <el-upload action="#" list-type="picture" :show-file-list="false" :limit="1" :http-request="uploadNewPicUrl">
+        <el-row :gutter="20">
+          <el-col :span="8">
+            <el-form-item label="底价" prop="floorPrice">
+              <el-input v-model="dataForm.floorPrice" placeholder="请输入底价"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="是否显示" prop="isShow">
+              <el-select v-model="dataForm.isShow" placeholder="请选择" style="width: 100%;">
+                <el-option label="显示" :value="true"></el-option>
+                <el-option label="不显示" :value="false"></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="是否新上" prop="isNew">
+              <el-select v-model="dataForm.isNew" placeholder="请选择" style="width: 100%;">
+                <el-option label="新上" :value="true"></el-option>
+                <el-option label="不是新上" :value="false"></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-form-item label="新上宣传图片" prop="newPicUrl" v-if="dataForm.isNew === true">
+          <el-input v-model="dataForm.newPicUrl" placeholder="请输入新上宣传图片地址" style="width: 80%;"></el-input>
+          <el-upload action="#" list-type="picture" :show-file-list="false" :limit="1" :http-request="uploadNewPicUrl"
+            style="display: inline-block;">
             <el-button size="small" type="primary">点击上传</el-button>
           </el-upload>
         </el-form-item>
@@ -135,6 +180,18 @@
 </template>
 
 <style>
+.border-card {
+  background: #fff;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  padding: 20px;
+  margin-bottom: 20px;
+}
+
+.mb8 {
+  margin-bottom: 8px;
+}
+
 .avatar-uploader .el-upload {
   border: 1px dashed #d9d9d9;
   border-radius: 6px;
@@ -162,16 +219,13 @@
   display: block;
 }
 
-.imgspefi {
-  color: #F00;
-  vertical-align: top;
-  line-height: 50px;
-  margin-left: 20px;
-}
-
 .avatar-uploader {
   display: inline-block;
 }
+
+.editButton {
+  margin-bottom: 10px;
+}
 </style>
 
 <script>
@@ -212,7 +266,7 @@ export default {
         create: '创建'
       },
       rules: {
-        name: [{ required: true, message: '类目名称不能为空', trigger: 'blur' }]
+        name: [{ required: true, message: '品牌商名称不能为空', trigger: 'blur' }]
       },
       downloadLoading: false,
       fileImgUrl: this.upLoadUrl,
@@ -379,64 +433,47 @@ export default {
     handleDownload() {
       this.downloadLoading = true
       import('@/vendor/Export2Excel').then(excel => {
-        const tHeader = ['品牌商ID', '品牌商名称', '介绍', '低价', '是否显示', '品牌商图片', '宣传图片', 'APP宣传图片', '是否新上', '新上宣传图片']
+        const tHeader = ['品牌商 ID', '品牌商名称', '介绍', '低价', '是否显示', '品牌商图片', '宣传图片', 'APP 宣传图片', '是否新上', '新上宣传图片']
         const filterVal = ['id', 'name', 'simpleDesc', 'floorPrice', 'isShow', 'picUrl', 'listPicUrl', 'appListPicUrl', 'isNew', 'newPicUrl']
         excel.export_json_to_excel2(tHeader, this.list, filterVal, '品牌商信息')
         this.downloadLoading = false
       })
     },
 
-    //图片上传开始
-    //品牌商图片
+    // 图片上传开始
+    // 品牌商图片
     handleBrandSuccess(res, file) {
       this.dataForm.picUrl = res.data.url;
     },
     beforeBrandUpload(file) {
-      const isJPG = file.type === 'image/jpeg'
       const isLt2M = file.size / 1024 / 1024 < 2
-
-      // if (!isJPG) {
-      //   this.$message.error('上传头像图片只能是 JPG 格式!')
-      // }
       if (!isLt2M) {
         this.$message.error('上传头像图片大小不能超过 2MB!')
       }
       return isLt2M
     },
-    //宣传图片
+    // 宣传图片
     handlePublicitySuccess(res, file) {
       this.dataForm.listPicUrl = res.data.url;
     },
     beforePublicityUpload(file) {
-      const isJPG = file.type === 'image/jpeg'
       const isLt2M = file.size / 1024 / 1024 < 2
-
-      // if (!isJPG) {
-      //   this.$message.error('上传头像图片只能是 JPG 格式!')
-      // }
       if (!isLt2M) {
         this.$message.error('上传头像图片大小不能超过 2MB!')
       }
       return isLt2M
     },
-    //APP宣传图片
+    // APP 宣传图片
     handleAppcitySuccess(res, file) {
       this.dataForm.appListPicUrl = res.data.url;
     },
     beforeAppcityUpload(file) {
-      const isJPG = file.type === 'image/jpeg'
       const isLt2M = file.size / 1024 / 1024 < 2
-
-      // if (!isJPG) {
-      //   this.$message.error('上传头像图片只能是 JPG 格式!')
-      // }
       if (!isLt2M) {
         this.$message.error('上传头像图片大小不能超过 2MB!')
       }
       return isLt2M
     }
-
-
   }
 }
 </script>

src/views/goodsManage/goodsList.vue

@@ -1,48 +1,81 @@
 <template>
-    <div class="app-container calendar-list-container">
-
-        <!-- 查询和其他操作 -->
-        <div class="filter-container">
-            <el-input clearable class="filter-item" style="width: 200px;" placeholder="商品名称"
-                v-model="listQuery.productName"></el-input>
-            <el-input clearable class="filter-item" style="width: 200px;" placeholder="商品简称"
-                v-model="listQuery.productShortForm"></el-input>
-
-            <!-- <treeselect class="filter-item" default-expand-all v-model="listQuery.categoryId" :options="categoryOptions"
-                :normalizer="normalizer" placeholder="商品类别" style="width: 200px" /> -->
-                 <el-cascader
-                 clearable
-                 class="filter-item"
-                 placeholder="商品类别"
-                 style="width: 200px"
-                  v-model="listQuery.categoryId"
-                  :options="categoryOptions"
-                  :props="{
-                    label: 'categoryName',
-                    value: 'id',
-                    emitPath: false,
-                    checkStrictly: true
-                  }"
-                />
-            <el-select class="filter-item" style="width: 200px" v-model="listQuery.brandId" filterable placeholder="品牌">
-                <el-option v-for="item in brandOptions" :key="item.value" :label="item.label" :value="item.value">
-                </el-option>
-            </el-select>
-            <el-select v-model="listQuery.status" clearable placeholder="状态" class="filter-item" style="width: 200px;">
-                <el-option :key="item.type" v-for="item in goodsStatusList" :label="item.name" :value="item.type">
-                </el-option>
-            </el-select>
+    <div class="app-container">
+        <el-form :model="listQuery" size="small" :inline="true" label-position="top">
+            <el-row :gutter="20">
+                <el-col :span="6">
+                    <el-form-item label="商品名称">
+                        <el-input clearable placeholder="商品名称" v-model="listQuery.productName"></el-input>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                    <el-form-item label="商品简称">
+                        <el-input clearable placeholder="商品简称" v-model="listQuery.productShortForm"></el-input>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                    <el-form-item label="商品类别">
+                        <el-cascader clearable placeholder="商品类别" style="width: 100%" v-model="listQuery.categoryId"
+                            :options="categoryOptions" :props="{
+                                label: 'categoryName',
+                                value: 'id',
+                                emitPath: false,
+                                checkStrictly: true
+                            }" />
+                    </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                    <el-form-item label="品牌">
+                        <el-select v-model="listQuery.brandId" filterable placeholder="品牌" style="width: 100%">
+                            <el-option v-for="item in brandOptions" :key="item.value" :label="item.label"
+                                :value="item.value">
+                            </el-option>
+                        </el-select>
+                    </el-form-item>
+                </el-col>
+            </el-row>
 
-            <el-button class="filter-item" type="primary" v-waves icon="el-icon-search"
-                @click="handleQuery">查找</el-button>
-                <el-button class="filter-item" icon="el-icon-refresh" @click="resetQuery">重置</el-button>
-            <el-button class="filter-item" type="primary" @click="handleAdd" icon="el-icon-plus">添加</el-button>
-            <el-button class="filter-item" type="info" @click="handleImport" icon="el-icon-upload2">导入</el-button>
-            <el-button class="filter-item" v-waves icon="el-icon-download" @click="handleDownLoad">导出</el-button>
-        </div>
+            <el-row :gutter="20">
+                <el-col :span="6">
+                    <el-form-item label="状态">
+                        <el-select v-model="listQuery.status" clearable placeholder="状态" style="width: 100%">
+                            <el-option :key="item.type" v-for="item in goodsStatusList" :label="item.name"
+                                :value="item.type">
+                            </el-option>
+                        </el-select>
+                    </el-form-item>
+                </el-col>
+            </el-row>
 
-        <!-- 查询结果 -->
-        <el-table size="small" :data="list" v-loading="listLoading" element-loading-text="正在查询中。。。" border fit
+            <el-row :gutter="20">
+                <el-col :span="6">
+                    <el-form-item label="搜索">
+                        <el-button style="width: 100%;" type="primary" icon="el-icon-search"
+                            @click="handleQuery">搜索</el-button>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                    <el-form-item label="重置">
+                        <el-button style="width: 100%;" icon="el-icon-refresh" type="primary"
+                            @click="resetQuery">重置</el-button>
+                    </el-form-item>
+                </el-col>
+            </el-row>
+        </el-form>
+        <el-row :gutter="10" class="mb8">
+            <el-col :span="1.5">
+                <el-button type="primary" class="editButton" size="small" icon="el-icon-plus"
+                    @click="handleAdd">添加</el-button>
+            </el-col>
+            <el-col :span="1.5">
+                <el-button type="info" icon="el-icon-upload2" size="small" @click="handleImport">导入</el-button>
+            </el-col>
+            <el-col :span="1.5">
+                <el-button type="warning" icon="el-icon-download" size="small" @click="handleDownLoad">导出</el-button>
+            </el-col>
+        </el-row>
+        <div class="border-card">
+             <!-- 查询结果 -->
+        <el-table height="450" size="small" :data="list" v-loading="listLoading" element-loading-text="正在查询中。。。" border fit
             highlight-current-row>
             <el-table-column type="index" label="序号" header-align="center" align="center">
             </el-table-column>
@@ -69,8 +102,8 @@
             </el-table-column>
             <el-table-column align="center" label="操作" width="240px" class-name="small-padding fixed-width">
                 <template slot-scope="scope">
-                    <el-button type="primary" size="small" @click="handleUpdate(scope.row)">编辑</el-button>
-                    <el-button type="danger" size="small" @click="handleDelete(scope.row.id)">删除</el-button>
+                    <el-button type="text" icon="el-icon-edit" class="editText" size="small" @click="handleUpdate(scope.row)">编辑</el-button>
+                    <el-button type="text" icon="el-icon-delete" class="deleteText" size="small" @click="handleDelete(scope.row.id)">删除</el-button>
                 </template>
             </el-table-column>
         </el-table>
@@ -82,6 +115,8 @@
                 layout="total, sizes, prev, pager, next, jumper" :total="total">
             </el-pagination>
         </div>
+        </div>
+       
         <!-- 添加或修改对话框 -->
         <el-dialog :close-on-click-modal="false" :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible"
             width="70%">
@@ -101,25 +136,21 @@
 
 
                         <el-form-item label="商品类别" prop="categoryId">
-                            <el-cascader
-                            placeholder="请选择商品类别"
-                            style="width: 100%;"
-                            v-model="dataForm.categoryId"
-                            :options="categoryOptions"
-                            :props="{
-                                label: 'categoryName',
-                                value: 'id',
-                                emitPath: false,
-                                checkStrictly: true
-                            }"
-                            />
+                            <el-cascader placeholder="请选择商品类别" style="width: 100%;" v-model="dataForm.categoryId"
+                                :options="categoryOptions" :props="{
+                                    label: 'categoryName',
+                                    value: 'id',
+                                    emitPath: false,
+                                    checkStrictly: true
+                                }" />
                             <!-- <treeselect default-expand-all v-model="dataForm.categoryId" :options="categoryOptions"
                                 :normalizer="normalizer" placeholder="请选择商品类别" /> -->
                         </el-form-item>
 
                         <el-form-item label="品牌" prop="brandId">
                             <el-select style="width: 100%" v-model="dataForm.brandId" filterable placeholder="请选择品牌">
-                                <el-option v-for="item in brandOptions" :key="item.value" :label="item.label" :value="item.value">
+                                <el-option v-for="item in brandOptions" :key="item.value" :label="item.label"
+                                    :value="item.value">
                                 </el-option>
                             </el-select>
                         </el-form-item>
@@ -167,7 +198,8 @@
                             </el-select>
                         </el-form-item>
                         <el-form-item label="茶叶系列">
-                            <el-select v-model="dataForm.teaSeries" filterable placeholder="请选择茶叶系列" style="width: 100%">
+                            <el-select v-model="dataForm.teaSeries" filterable placeholder="请选择茶叶系列"
+                                style="width: 100%">
                                 <el-option :key="item.dictLabel" v-for="item in tea_series" :label="item.dictLabel"
                                     :value="item.dictLabel">
                                 </el-option>
@@ -176,8 +208,8 @@
                         <el-form-item label="包装形式">
                             <el-select v-model="dataForm.teaPackageFormat" multiple filterable placeholder="请选择包装形式"
                                 style="width: 100%">
-                                <el-option :key="item.dictLabel" v-for="item in tea_package_format" :label="item.dictLabel"
-                                    :value="item.dictLabel">
+                                <el-option :key="item.dictLabel" v-for="item in tea_package_format"
+                                    :label="item.dictLabel" :value="item.dictLabel">
                                 </el-option>
                             </el-select>
                         </el-form-item>
@@ -186,11 +218,13 @@
                         </el-form-item>
                         <el-form-item label="采摘季节">
                             <el-radio-group v-model="dataForm.teaGetSeason">
-                                <el-radio v-for="item in tea_get_season" :key="item.dictLabel" :label="item.dictLabel"></el-radio>
+                                <el-radio v-for="item in tea_get_season" :key="item.dictLabel"
+                                    :label="item.dictLabel"></el-radio>
                             </el-radio-group>
                         </el-form-item>
                         <el-form-item label="保质期">
-                            <el-input placeholder="数值" v-model="dataForm.teaGuaranteeNumber" onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')" class="input-with-select">
+                            <el-input placeholder="数值" v-model="dataForm.teaGuaranteeNumber"
+                                onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')" class="input-with-select">
                                 <el-select style="width: 100px;" v-model="dataForm.teaGuaranteeUnit" slot="prepend"
                                     placeholder="请选择">
                                     <el-option label="年" value="年"></el-option>
@@ -204,18 +238,21 @@
                                 placeholder="选择日期" value-format="yyyy-MM-dd"></el-date-picker>
                         </el-form-item>
                         <el-form-item label="年份">
-                            <el-input v-model="dataForm.teaAgingYear" onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')" placeholder="请输入年份"></el-input>
+                            <el-input v-model="dataForm.teaAgingYear" onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')"
+                                placeholder="请输入年份"></el-input>
                         </el-form-item>
                         <el-form-item label="溯源信息" prop="teaFiles">
-                            <el-upload :limit="1" :action="fileImgUrl" :file-list="dataForm.files" :on-success="handleFileSuccess"
-                                :before-upload="beforeUploadFile" :on-remove="handleRemoveFile">
+                            <el-upload :limit="1" :action="fileImgUrl" :file-list="dataForm.files"
+                                :on-success="handleFileSuccess" :before-upload="beforeUploadFile"
+                                :on-remove="handleRemoveFile">
                                 <el-button size="small" type="primary">点击上传</el-button>
                             </el-upload>
                             <span style="color: #F56C6C;">备注：如有机认证、质检报告等</span>
                         </el-form-item>
                         <el-form-item label="存储要求">
                             <el-checkbox-group v-model="dataForm.teaStorageRequire">
-                                <el-checkbox v-for="item in tea_storage_require" :key="item.dictLabel" :label="item.dictLabel" name="type"></el-checkbox>
+                                <el-checkbox v-for="item in tea_storage_require" :key="item.dictLabel"
+                                    :label="item.dictLabel" name="type"></el-checkbox>
                             </el-checkbox-group>
                         </el-form-item>
                     </el-tab-pane>
@@ -230,18 +267,21 @@
         </el-dialog>
         <!-- 商品导入对话框 -->
         <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
-        <el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers" :action="upload.url" :disabled="upload.isUploading" :on-progress="handleFileUploadProgress" :on-success="handleProductTemplate" :auto-upload="false" drag>
-            <i class="el-icon-upload"></i>
-            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
-            <div class="el-upload__tip text-center" slot="tip">
-            <span>仅允许导入xls、xlsx格式文件。</span>
-            <el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline" @click="importTemplate">下载模板</el-link>
+            <el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers" :action="upload.url"
+                :disabled="upload.isUploading" :on-progress="handleFileUploadProgress"
+                :on-success="handleProductTemplate" :auto-upload="false" drag>
+                <i class="el-icon-upload"></i>
+                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+                <div class="el-upload__tip text-center" slot="tip">
+                    <span>仅允许导入xls、xlsx格式文件。</span>
+                    <el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline"
+                        @click="importTemplate">下载模板</el-link>
+                </div>
+            </el-upload>
+            <div slot="footer" class="dialog-footer">
+                <el-button type="primary" @click="submitFileForm">确 定</el-button>
+                <el-button @click="upload.open = false">取 消</el-button>
             </div>
-        </el-upload>
-        <div slot="footer" class="dialog-footer">
-            <el-button type="primary" @click="submitFileForm">确 定</el-button>
-            <el-button @click="upload.open = false">取 消</el-button>
-        </div>
         </el-dialog>
 
     </div>
@@ -275,12 +315,12 @@ export default {
                 // 上传的地址
                 url: process.env.BASE_API + "/product/import"
             },
-            tea_type:[],
-            tea_level:[],
-            tea_series:[],
-            tea_package_format:[],
-            tea_get_season:[],
-            tea_storage_require:[],
+            tea_type: [],
+            tea_level: [],
+            tea_series: [],
+            tea_package_format: [],
+            tea_get_season: [],
+            tea_storage_require: [],
             // 树选项
             categoryOptions: [],
             activeName: 'first',
@@ -394,31 +434,31 @@ export default {
     },
     methods: {
         /** 导入按钮操作 */
-    handleImport() {
-      this.upload.title = "商品导入";
-      this.upload.open = true;
-    },
-    /** 下载模板操作 */
-    importTemplate() {
-        window.location.href = process.env.BASE_API + '/product/down/productTemplate';
-    },
-    // 文件上传中处理
-    handleFileUploadProgress(event, file, fileList) {
-      this.upload.isUploading = true;
-    },
-    // 文件上传成功处理
-    handleProductTemplate(response, file, fileList) {
-      this.upload.open = false;
-      this.upload.isUploading = false;
-      this.$refs.upload.clearFiles();
-      this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.data + "</div>", "导入结果", { dangerouslyUseHTMLString: true });
-      this.getList();
-    },
-    // 提交上传文件
-    submitFileForm() {
-      this.$refs.upload.submit();
-    },
-        handleDownLoad(){
+        handleImport() {
+            this.upload.title = "商品导入";
+            this.upload.open = true;
+        },
+        /** 下载模板操作 */
+        importTemplate() {
+            window.location.href = process.env.BASE_API + '/product/down/productTemplate';
+        },
+        // 文件上传中处理
+        handleFileUploadProgress(event, file, fileList) {
+            this.upload.isUploading = true;
+        },
+        // 文件上传成功处理
+        handleProductTemplate(response, file, fileList) {
+            this.upload.open = false;
+            this.upload.isUploading = false;
+            this.$refs.upload.clearFiles();
+            this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.data + "</div>", "导入结果", { dangerouslyUseHTMLString: true });
+            this.getList();
+        },
+        // 提交上传文件
+        submitFileForm() {
+            this.$refs.upload.submit();
+        },
+        handleDownLoad() {
             window.location.href = process.env.BASE_API + '/product/export?productName=' + this.listQuery.productName + '&productShortForm=' + this.listQuery.productShortForm;
         },
         getListCategory() {
@@ -440,7 +480,7 @@ export default {
         handleClick(tab, event) {
             console.log(tab, event);
         },
-        getDictType(){
+        getDictType() {
             //茶叶品牌tea_type
             dataTypeList({ dictType: 'tea_type' }).then(response => {
                 this.tea_type = response.data.data;
@@ -493,12 +533,12 @@ export default {
             for (let i in fileList) {
                 let response = fileList[i].response;
                 if (response.errno && response.errno != "0") {
-                this.$message.error("该文件上传失败,已被移除,请重新上传!");
-                // 上传失败移除该 file 对象
-                fileList.splice(i, 1);
+                    this.$message.error("该文件上传失败,已被移除,请重新上传!");
+                    // 上传失败移除该 file 对象
+                    fileList.splice(i, 1);
                 } else {
-                let id = fileList[i].response.data.id;
-                teaFiles.push(id);
+                    let id = fileList[i].response.data.id;
+                    teaFiles.push(id);
                 }
             }
             this.dataForm.teaFiles = teaFiles.join(",");
@@ -629,7 +669,7 @@ export default {
                     this.dataForm.files.push({
                         name: name,
                         url: url,
-                        response: { error: "0", data: { url: url,id:id } },
+                        response: { error: "0", data: { url: url, id: id } },
                     });
                 }
             }

src/views/goodsManage/goodsTypeList.vue

@@ -1,28 +1,59 @@
 <template>
-    <div class="app-container">
-       <!-- 查询和其他操作 -->
-       <div class="filter-container">
-        <el-input
-        class="filter-item" style="width: 200px;"
-            v-model="listQuery.categoryCode"
-            placeholder="请输入商品类别编号"
-            clearable
-            @keyup.enter.native="handleQuery"
-          />
-          <el-input
-          class="filter-item" style="width: 200px;"
-            v-model="listQuery.categoryName"
-            placeholder="请输入商品类别名称"
-            clearable
-            @keyup.enter.native="handleQuery"
-          />   
-          <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleQuery">查找</el-button>
-          <el-button class="filter-item" icon="el-icon-refresh" @click="resetQuery">重置</el-button>
-          <el-button class="filter-item" type="primary" icon="el-icon-plus" @click="handleAdd">添加</el-button>
-          <el-button class="filter-item" v-waves icon="el-icon-download" @click="handleDownLoad">导出</el-button>
-          <el-button class="filter-item" type="info" icon="el-icon-sort" @click="toggleExpandAll">展开/折叠</el-button>
+  <div class="app-container">
+    <!-- 查询区域 -->
+    <el-form :model="listQuery" size="small" :inline="true" label-position="top">
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="商品类别编号">
+            <el-input
+              clearable
+              placeholder="请输入商品类别编号"
+              v-model="listQuery.categoryCode"
+              @keyup.enter.native="handleQuery"
+            ></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="商品类别名称">
+            <el-input
+              clearable
+              placeholder="请输入商品类别名称"
+              v-model="listQuery.categoryName"
+              @keyup.enter.native="handleQuery"
+            ></el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
 
-        </div>
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="搜索">
+            <el-button style="width: 100%;" type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="重置">
+            <el-button style="width: 100%;" icon="el-icon-refresh" type="primary" @click="resetQuery">重置</el-button>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+
+    <!-- 操作按钮 -->
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button type="primary" class="editButton" size="small" icon="el-icon-plus" @click="handleAdd">添加</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="warning" icon="el-icon-download" size="small" @click="handleDownLoad">导出</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="info" icon="el-icon-sort" size="small" @click="toggleExpandAll">展开/折叠</el-button>
+      </el-col>
+    </el-row>
+
+    <!-- 查询结果 -->
+    <div class="border-card">
       <el-table
         v-if="refreshTable"
         v-loading="loading"
@@ -32,287 +63,314 @@
         :default-expand-all="isExpandAll"
         :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
       >
-      <!-- :default-expand-all="isExpandAll" -->
         <el-table-column prop="categoryCode" label="商品类别编号" align="center"></el-table-column>
         <el-table-column prop="categoryName" label="商品类别名称" min-width="180px"></el-table-column>
-        <!-- <el-table-column prop="parentId" label="备注" align="center"></el-table-column> -->
-        <el-table-column label="创建时间" align="center" prop="createDate">
-        </el-table-column>
-        <el-table-column label="操作" align="center" min-width="110px">
+        <el-table-column label="创建时间" align="center" prop="createDate"></el-table-column>
+        <el-table-column label="操作" align="center" min-width="240px" class-name="small-padding fixed-width">
           <template slot-scope="scope">
             <el-button
+              type="text"
+              icon="el-icon-edit"
+              class="editText"
               size="small"
-              type="primary"
               @click="handleUpdate(scope.row)"
             >编辑</el-button>
             <el-button
+              type="text"
+              icon="el-icon-plus"
+              class="plusText"
               size="small"
-              type="success"
               @click="handleAdd(scope.row)"
             >添加</el-button>
             <el-button
               v-if="!scope.row.children"
+              type="text"
+              icon="el-icon-delete"
+              class="deleteText"
               size="small"
-              type="danger"
               @click="handleDelete(scope.row)"
             >删除</el-button>
           </template>
         </el-table-column>
       </el-table>
-  
-      <!-- 添加或修改商品类别对话框 -->
-      <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
-        <el-form ref="form" :model="form" :rules="rules" label-width="150px">
-          <el-row>
-            <el-col :span="24" v-if="isShowParent">
-              
-              <el-form-item label="上级商品类别名称" prop="parentId">
-                 <el-cascader
-                 style="width: 100%;"
-                  v-model="form.parentId"
-                  :options="deptList"
-                  :props="{
-                    label: 'categoryName',
-                    value: 'id',
-                    emitPath: false,
-                    checkStrictly: true
-                  }"
-                />
-                <!-- <treeselect v-model="form.parentId" @select="departTreeSelected" :options="deptOptions" :normalizer="normalizer" placeholder="选择上级类别" /> -->
-              </el-form-item>
-            </el-col>
-          </el-row>
-          <el-row>
-            <el-col :span="24" v-if="isShowParent">
-              <el-form-item label="上级商品类别编号" prop="categoryParentCode">
-                <el-input v-model="form.categoryParentCode" readonly />
-              </el-form-item>
-            </el-col>
-          </el-row>
-          <el-row>
-            <el-col :span="24">
-              <el-form-item label="商品类别名称" prop="categoryName">
-                <el-input v-model="form.categoryName" placeholder="请输入商品类别名称" />
-              </el-form-item>
-            </el-col>
-          </el-row>
-          <el-row>
-            <el-col :span="24">
-              <el-form-item label="商品类别编号" prop="categoryCode">
-                <el-input v-model="form.categoryCode" placeholder="请输入商品类别编号" />
-              </el-form-item>
-            </el-col>
-          </el-row>
-        </el-form>
-        <div slot="footer" class="dialog-footer">
-          <el-button @click="cancel">取 消</el-button>
-          <el-button type="primary" @click="submitForm">确 定</el-button>
-        </div>
-      </el-dialog>
     </div>
-  </template>
-  
-  <script>
-  import { listDept, getDept, delDept, addDept, updateDept, } from "@/api/goodsTypeList";
-  import Treeselect from "@riophae/vue-treeselect";
-  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
-  import waves from "@/directive/waves"; // 水波纹指令
-  export default {
-    components: { Treeselect },
-    directives: { waves },
-    data() {
+
+    <!-- 添加或修改商品类别对话框 -->
+    <el-dialog :close-on-click-modal="false" :title="title" :visible.sync="open" width="70%" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="150px" style='margin: 0 50px;'>
+        <el-row :gutter="20">
+          <el-col :span="12" v-if="isShowParent">
+            <el-form-item label="上级商品类别名称" prop="parentId">
+              <el-cascader
+                style="width: 100%;"
+                v-model="form.parentId"
+                :options="deptList"
+                :props="{
+                  label: 'categoryName',
+                  value: 'id',
+                  emitPath: false,
+                  checkStrictly: true
+                }"
+                placeholder="请选择上级类别"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12" v-if="isShowParent">
+            <el-form-item label="上级商品类别编号" prop="categoryParentCode">
+              <el-input v-model="form.categoryParentCode" readonly placeholder="上级类别编号" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="商品类别名称" prop="categoryName">
+              <el-input v-model="form.categoryName" placeholder="请输入商品类别名称" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="商品类别编号" prop="categoryCode">
+              <el-input v-model="form.categoryCode" placeholder="请输入商品类别编号" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="cancel">取消</el-button>
+        <el-button type="primary" @click="submitForm">确定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { listDept, getDept, delDept, addDept, updateDept } from "@/api/goodsTypeList";
+import Treeselect from "@riophae/vue-treeselect";
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+import waves from "@/directive/waves"; // 水波纹指令
+
+export default {
+  components: { Treeselect },
+  directives: { waves },
+  data() {
+    return {
+      isShowParent: false,
+      downloadLoading: false,
+      // 遮罩层
+      loading: true,
+      // 表格树数据
+      deptList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 是否展开，默认全部展开
+      isExpandAll: true,
+      // 重新渲染表格状态
+      refreshTable: true,
+      // 查询参数
+      listQuery: {
+        categoryCode: undefined,
+        categoryName: undefined
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+        parentId: [
+          { required: true, message: "上级商品类别不能为空", trigger: "blur" }
+        ],
+        categoryParentCode: [
+          { required: true, message: "上级商品类别编号不能为空", trigger: "blur" }
+        ],
+        categoryName: [
+          { required: true, message: "商品类别名称不能为空", trigger: "blur" }
+        ],
+        categoryCode: [
+          { required: true, message: "商品类别编号不能为空", trigger: "blur" }
+        ]
+      }
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    // 选中树形选项
+    departTreeSelected(node, instanceId) {
+      console.log(node, instanceId);
+      this.form.categoryParentCode = node.categoryCode;
+    },
+    handleDownLoad() {
+      window.location.href = process.env.BASE_API + '/product-category/export/category';
+    },
+    /** 查询商品类别列表 */
+    getList() {
+      this.loading = true;
+      listDept(this.listQuery).then(response => {
+        this.deptList = this.handleTree(response.data.data, 'id');
+        console.log(this.deptList);
+        this.loading = false;
+      });
+    },
+    /** 转换商品类别数据结构 */
+    normalizer(node) {
+      if (node.children && !node.children.length) {
+        delete node.children;
+      }
       return {
-        isShowParent:false,
-        downloadLoading: false,
-        // 遮罩层
-        loading: true,
-        // 表格树数据
-        deptList: [],
-        // 商品类别树选项
-        // deptOptions: [],
-        // 弹出层标题
-        title: "",
-        // 是否显示弹出层
-        open: false,
-        // 是否展开，默认全部展开
-        isExpandAll: true,
-        // 重新渲染表格状态
-        refreshTable: true,
-        // 查询参数
-        listQuery: {
-          categoryCode: undefined,
-          categoryName: undefined,
-        },
-        // 表单参数
-        form: {},
-        // 表单校验
-        rules: {
-          parentId: [
-            { required: true, message: "上级商品类别不能为空", trigger: "blur" }
-          ],
-          categoryParentCode: [
-            { required: true, message: "上级商品类别编号不能为空", trigger: "blur" }
-          ],
-          categoryName: [
-            { required: true, message: "商品类别名称不能为空", trigger: "blur" }
-          ],
-          categoryCode: [
-            { required: true, message: "商品类别编号不能为空", trigger: "blur" },
-            // { min: 10, max: 10, message: "商品类别编号必须为10位", trigger: "blur" },
-            // { pattern: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{10,}$/, message: "商品类别编号必须为10位字母加数字", trigger: "blur" }
-          ]
-        }
+        id: node.id,
+        label: node.categoryName,
+        children: node.children
+      };
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        id: undefined,
+        parentId: undefined,
+        categoryParentCode: undefined,
+        categoryName: undefined,
+        categoryCode: undefined
       };
+      this.resetForm("form");
     },
-    created() {
+    /** 搜索按钮操作 */
+    handleQuery() {
       this.getList();
     },
-    methods: {
-      //选中树形选项
-      departTreeSelected(node,instanceId){
-        console.log(node,instanceId);
-        this.form.categoryParentCode = node.categoryCode;
-      },
-      handleDownLoad(){
-            window.location.href = process.env.BASE_API + '/product-category/export/category';
-        },
-      /** 查询商品类别列表 */
-      getList() {
-        this.loading = true;
-        listDept(this.listQuery).then(response => {
-          this.deptList = this.handleTree(response.data.data,'id');
-          console.log(this.deptList);
-          this.loading = false;
-        });
-      },
-      /** 转换商品类别数据结构 */
-      normalizer(node) {
-        if (node.children && !node.children.length) {
-          delete node.children;
-        }
-        return {
-          id: node.id,
-          label: node.categoryName,
-          children: node.children
-        };
-      },
-      // 取消按钮
-      cancel() {
-        this.open = false;
-        this.reset();
-      },
-      // 表单重置
-      reset() {
-        this.form = {
-          id: undefined,
-          parentId: undefined,
-          categoryParentCode:undefined,
-          categoryName: undefined,
-          categoryCode: undefined,
-        };
-        this.resetForm("form");
-      },
-      /** 搜索按钮操作 */
-      handleQuery() {
-        this.getList();
-      },
-      /** 重置按钮操作 */
-      resetQuery() {
-        this.listQuery = {
-          categoryCode: undefined,
-          categoryName: undefined,
-        };
-        this.handleQuery();
-      },
-      /** 新增按钮操作 */
-      handleAdd(row) {
-        this.reset();
-        this.isShowParent = false;
-        if (row.id) {
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.listQuery = {
+        categoryCode: undefined,
+        categoryName: undefined
+      };
+      this.handleQuery();
+    },
+    /** 新增按钮操作 */
+    handleAdd(row) {
+      this.reset();
+      this.isShowParent = false;
+      if (row && row.id) {
+        this.isShowParent = true;
+        this.form.parentId = row.id;
+        this.form.categoryParentCode = row.categoryCode;
+      }
+      this.open = true;
+      this.title = "添加商品类别";
+    },
+    /** 展开/折叠操作 */
+    toggleExpandAll() {
+      this.refreshTable = false;
+      this.isExpandAll = !this.isExpandAll;
+      this.$nextTick(() => {
+        this.refreshTable = true;
+      });
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      this.isShowParent = false;
+      getDept({ id: row.id }).then(response => {
+        let data = response.data.data;
+        this.form = data;
+        if (data.parentId) {
           this.isShowParent = true;
-          this.form.parentId = row.id;
-          this.form.categoryParentCode = row.categoryCode;
         }
         this.open = true;
-        this.title = "添加商品类别";
-        // listDept().then(response => {
-        //   this.deptOptions = this.handleTree(response.data.data, "id");
-        // });
-      },
-      /** 展开/折叠操作 */
-      toggleExpandAll() {
-        this.refreshTable = false;
-        this.isExpandAll = !this.isExpandAll;
-        this.$nextTick(() => {
-          this.refreshTable = true;
-        });
-      },
-      /** 修改按钮操作 */
-      handleUpdate(row) {
-        this.reset();
-        this.isShowParent = false;
-        getDept({id:row.id}).then(response => {
-          let data = response.data.data;
-          this.form = data;
-          if (data.parentId) {
-            this.isShowParent = true;
-          }
-          this.open = true;
-          this.title = "修改商品类别";
-        });
-
-      },
-      /** 提交按钮 */
-      submitForm: function() {
-        this.$refs["form"].validate(valid => {
-          if (valid) {
-            if (this.form.id != undefined) {
-              updateDept(this.form).then(response => {
-                this.$notify({
-                            title: '成功',
-                            message: '修改成功',
-                            type: 'success',
-                            duration: 2000
-                        })
-                this.open = false;
-                this.getList();
+        this.title = "修改商品类别";
+      });
+    },
+    /** 提交按钮 */
+    submitForm: function() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          if (this.form.id != undefined) {
+            updateDept(this.form).then(response => {
+              this.$notify({
+                title: '成功',
+                message: '修改成功',
+                type: 'success',
+                duration: 2000
               });
-            } else {
-              addDept(this.form).then(response => {
-                this.$notify({
-                            title: '成功',
-                            message: '新增成功',
-                            type: 'success',
-                            duration: 2000
-                        })
-                this.open = false;
-                this.getList();
+              this.open = false;
+              this.getList();
+            });
+          } else {
+            addDept(this.form).then(response => {
+              this.$notify({
+                title: '成功',
+                message: '新增成功',
+                type: 'success',
+                duration: 2000
               });
-            }
+              this.open = false;
+              this.getList();
+            });
           }
+        }
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      console.log(row);
+      this.$confirm('是否确认删除名称为"' + row.categoryName + '"的数据项？', "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      })
+      .then(() => {
+        return delDept({ id: row.id });
+      })
+      .then(() => {
+        this.getList();
+        this.$notify({
+          title: '成功',
+          message: '删除成功',
+          type: 'success',
+          duration: 2000
         });
-      },
-      /** 删除按钮操作 */
-      handleDelete(row) {
-        console.log(row);
-        this.$confirm('是否确认删除名称为"' + row.categoryName + '"的数据项？', "提示", {
-                confirmButtonText: "确定",
-                cancelButtonText: "取消",
-                type: "warning",
-            })
-        .then(function() {
-          return delDept({id:row.id});
-        }).then(() => {
-          this.getList();
-          this.$notify({
-                            title: '成功',
-                            message: '删除成功',
-                            type: 'success',
-                            duration: 2000
-                        })
-        }).catch(() => {});
-      }
+      })
+      .catch(() => {});
     }
-  };
-  </script>
-  
+  }
+};
+</script>
+
+<style>
+.border-card {
+  background: #fff;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  padding: 20px;
+  margin-bottom: 20px;
+}
+
+.mb8 {
+  margin-bottom: 8px;
+}
+
+.editButton {
+  margin-bottom: 10px;
+}
+
+.editText {
+  color: #409EFF;
+  margin: 0 5px;
+}
+
+.plusText {
+  color: #23c6c8;
+  margin: 0 5px;
+}
+
+.deleteText {
+  color: #F56C6C;
+  margin: 0 5px;
+}
+</style>