修改

src/views/system/goodsCategory/index.vue

@@ -1,88 +1,111 @@
 <template>
   <div class="app-container">
-    <el-form
+    <el-row :gutter="20">
-      :model="queryParams"
+      <!--部门数据-->
-      ref="queryForm"
+      <el-col :span="4" :xs="24">
-      size="small"
+        <!-- <div class="head-container">
-      :inline="true"
+          <el-input
-      v-show="showSearch"
+            v-model="goodsCategoryName"
-      label-width="100px"
+            placeholder="请输入区域名称"
-    >
+            clearable
-      <el-form-item label="商品分类名称" prop="goodsCategoryName">
+            size="small"
-        <el-input
+            prefix-icon="el-icon-search"
-          v-model="queryParams.goodsCategoryName"
+            style="margin-bottom: 20px"
-          placeholder="请输入商品分类名称"
+          />
-          clearable
+        </div> -->
-          @keyup.enter.native="handleQuery"
+        <div class="head-container" style="height: 580px; overflow-y: auto">
-        />
+          <el-tree
-      </el-form-item>
+            :data="deptOptions"
-      <el-form-item label="商品分类编码" prop="goodsCategoryCode">
+            :props="defaultProps"
-        <el-input
+            @node-click="handleNodeClick"
-          v-model="queryParams.goodsCategoryCode"
+            @node-expand="handleNodeClick"
-          placeholder="请输入商品分类编码"
+          ></el-tree>
-          clearable
+        </div>
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="显示顺序" prop="sort">
-        <el-input
-          v-model="queryParams.sort"
-          placeholder="请输入显示顺序"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item>
-        <el-button
-          type="primary"
-          icon="el-icon-search"
-          size="mini"
-          @click="handleQuery"
-          >搜索</el-button
-        >
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
-          >重置</el-button
-        >
-      </el-form-item>
-    </el-form>
-
-    <el-row :gutter="10" class="mb8">
-      <el-col :span="1.5">
-        <el-button
-          type="primary"
-          plain
-          icon="el-icon-plus"
-          size="mini"
-          @click="handleAdd"
-          v-hasPermi="['system:goodsCategory:add']"
-          >新增</el-button
-        >
       </el-col>
-      <el-col :span="1.5">
+      <!--用户数据-->
-        <el-button
+      <el-col :span="20" :xs="24">
-          type="success"
+        <el-form
-          plain
+          :model="queryParams"
-          icon="el-icon-edit"
+          ref="queryForm"
-          size="mini"
+          size="small"
-          :disabled="single"
+          :inline="true"
-          @click="handleUpdate"
+          v-show="showSearch"
-          v-hasPermi="['system:goodsCategory:edit']"
+          label-width="100px"
-          >修改</el-button
         >
-      </el-col>
+          <el-form-item label="商品分类名称" prop="goodsCategoryName">
-      <el-col :span="1.5">
+            <el-input
-        <el-button
+              v-model="queryParams.goodsCategoryName"
-          type="danger"
+              placeholder="请输入商品分类名称"
-          plain
+              clearable
-          icon="el-icon-delete"
+              @keyup.enter.native="handleQuery"
-          size="mini"
+            />
-          :disabled="multiple"
+          </el-form-item>
-          @click="handleDelete"
+          <el-form-item label="商品分类编码" prop="goodsCategoryCode">
-          v-hasPermi="['system:goodsCategory:remove']"
+            <el-input
-          >删除</el-button
+              v-model="queryParams.goodsCategoryCode"
-        >
+              placeholder="请输入商品分类编码"
-      </el-col>
+              clearable
-      <!-- <el-col :span="1.5">
+              @keyup.enter.native="handleQuery"
+            />
+          </el-form-item>
+          <el-form-item label="显示顺序" prop="sort">
+            <el-input
+              v-model="queryParams.sort"
+              placeholder="请输入显示顺序"
+              clearable
+              @keyup.enter.native="handleQuery"
+            />
+          </el-form-item>
+          <el-form-item>
+            <el-button
+              type="primary"
+              icon="el-icon-search"
+              size="mini"
+              @click="handleQuery"
+              >搜索</el-button
+            >
+            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
+              >重置</el-button
+            >
+          </el-form-item>
+        </el-form>
+        <el-row :gutter="10" class="mb8">
+          <el-col :span="1.5">
+            <el-button
+              type="primary"
+              plain
+              icon="el-icon-plus"
+              size="mini"
+              @click="handleAdd"
+              v-hasPermi="['system:goodsCategory:add']"
+              >新增</el-button
+            >
+          </el-col>
+          <el-col :span="1.5">
+            <el-button
+              type="success"
+              plain
+              icon="el-icon-edit"
+              size="mini"
+              :disabled="single"
+              @click="handleUpdate"
+              v-hasPermi="['system:goodsCategory:edit']"
+              >修改</el-button
+            >
+          </el-col>
+          <el-col :span="1.5">
+            <el-button
+              type="danger"
+              plain
+              icon="el-icon-delete"
+              size="mini"
+              :disabled="multiple"
+              @click="handleDelete"
+              v-hasPermi="['system:goodsCategory:remove']"
+              >删除</el-button
+            >
+          </el-col>
+          <!-- <el-col :span="1.5">
         <el-button
           type="warning"
           plain
@@ -93,74 +116,89 @@
           >导出</el-button
         >
       </el-col> -->
-      <right-toolbar
+          <right-toolbar
-        :showSearch.sync="showSearch"
+            :showSearch.sync="showSearch"
-        @queryTable="getList"
+            @queryTable="getList"
-      ></right-toolbar>
+          ></right-toolbar>
+        </el-row>
+
+        <el-table
+          v-loading="loading"
+          :data="goodsCategoryList"
+          @selection-change="handleSelectionChange"
+        >
+          <el-table-column type="selection" width="55" align="center" />
+          <el-table-column
+            :show-overflow-tooltip="true"
+            label="商品分类名称"
+            align="center"
+            prop="goodsCategoryName"
+          />
+          <el-table-column
+            label="商品分类编码"
+            align="center"
+            prop="goodsCategoryCode"
+          />
+          <!-- <el-table-column label="商品分类图片地址" align="center" prop="goodsCategoryPicture" /> -->
+          <el-table-column
+            label="分类概述"
+            align="center"
+            prop="categoryRemark"
+            :show-overflow-tooltip="true"
+          />
+          <el-table-column label="显示顺序" align="center" prop="sort" />
+          <el-table-column
+            label="操作"
+            align="center"
+            class-name="small-padding fixed-width"
+          >
+            <template slot-scope="scope">
+              <el-button
+                size="mini"
+                type="text"
+                icon="el-icon-edit"
+                @click="handleUpdate(scope.row)"
+                v-hasPermi="['system:goodsCategory:edit']"
+                >修改</el-button
+              >
+              <el-button
+                size="mini"
+                type="text"
+                icon="el-icon-delete"
+                @click="handleDelete(scope.row)"
+                v-hasPermi="['system:goodsCategory:remove']"
+                >删除</el-button
+              >
+            </template>
+          </el-table-column>
+        </el-table>
+
+        <pagination
+          v-show="total > 0"
+          :total="total"
+          :page.sync="queryParams.pageNum"
+          :limit.sync="queryParams.pageSize"
+          @pagination="getList"
+        />
+      </el-col>
     </el-row>
 
-    <el-table
-      v-loading="loading"
-      :data="goodsCategoryList"
-      @selection-change="handleSelectionChange"
-    >
-      <el-table-column type="selection" width="55" align="center" />
-      <el-table-column
-        :show-overflow-tooltip="true"
-        label="商品分类名称"
-        align="center"
-        prop="goodsCategoryName"
-      />
-      <el-table-column
-        label="商品分类编码"
-        align="center"
-        prop="goodsCategoryCode"
-      />
-      <!-- <el-table-column label="商品分类图片地址" align="center" prop="goodsCategoryPicture" /> -->
-      <el-table-column
-        label="分类概述"
-        align="center"
-        prop="categoryRemark"
-        :show-overflow-tooltip="true"
-      />
-      <el-table-column label="显示顺序" align="center" prop="sort" />
-      <el-table-column
-        label="操作"
-        align="center"
-        class-name="small-padding fixed-width"
-      >
-        <template slot-scope="scope">
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-edit"
-            @click="handleUpdate(scope.row)"
-            v-hasPermi="['system:goodsCategory:edit']"
-            >修改</el-button
-          >
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-delete"
-            @click="handleDelete(scope.row)"
-            v-hasPermi="['system:goodsCategory:remove']"
-            >删除</el-button
-          >
-        </template>
-      </el-table-column>
-    </el-table>
-
-    <pagination
-      v-show="total > 0"
-      :total="total"
-      :page.sync="queryParams.pageNum"
-      :limit.sync="queryParams.pageSize"
-      @pagination="getList"
-    />
-
     <!-- 添加或修改商品分类信息对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="120px">
+        <el-form-item
+          label="父级分类名称"
+          prop="parentName"
+          :required="true"
+          v-if="form.parentId"
+        >
+          <el-input
+            v-model="form.parentName"
+            placeholder="请输入商品分类名称"
+            maxlength="10"
+            disabled
+          />
+        </el-form-item>
         <el-form-item label="商品分类名称" prop="goodsCategoryName">
           <el-input
             v-model="form.goodsCategoryName"
@@ -215,6 +253,7 @@ import {
   updatePicture,
   addGoodsCategory,
   updateGoodsCategory,
+  getStationCategoryList,
 } from "@/api/system/goodsCategory";
 import stationAcatar from "../stationAvatar/index.vue";
 import baseurl from "@/api/baseurl";
@@ -252,6 +291,8 @@ export default {
         goodsCategoryPicture: null,
         categoryRemark: null,
         sort: null,
+        parentId: "",
+        parentName: "",
       },
       // 表单参数
       form: {},
@@ -273,14 +314,65 @@ export default {
           { required: true, message: "显示顺序不能为空", trigger: "blur" },
         ],
       },
+      // 树选项
+      deptOptions: undefined,
+      categoryLevel: null,
+      defaultProps: {
+        children: "children",
+        label: "goodsCategoryName",
+      },
     };
   },
+
+  watch: {},
+
   created() {
     this.baseurl = baseurl;
-    this.getList();
+    // this.getList();
+    this.info();
   },
   methods: {
+    // 节点单击事件
+    handleNodeClick(data) {
+      this.loading = true;
+      this.queryParams.parentId = data.id;
+      this.queryParams.parentName = data.goodsCategoryName;
+      this.categoryLevel = data.categoryLevel;
+      this.handleQuery();
+      getStationCategoryList(data.id).then((res) => {
+        res.data.forEach((e) => {
+          e.children = [
+            {
+              goodsCategoryName: "",
+            },
+          ];
+        });
+        this.loading = false;
+        data.children = res.data;
+      });
+    },
     /** 查询商品分类信息列表 */
+    info() {
+      this.loading = true;
+      getStationCategoryList(0).then((res) => {
+        res.data.forEach((e) => {
+          e.children = [
+            {
+              goodsCategoryName: "",
+            },
+          ];
+        });
+        var obj = [
+          {
+            goodsCategoryName: "商品分类名称",
+            children: res.data,
+            id: 0,
+          },
+        ];
+        this.deptOptions = obj;
+        this.loading = false;
+      });
+    },
     getList() {
       this.loading = true;
       listGoodsCategory(this.queryParams).then((response) => {
@@ -297,9 +389,7 @@ export default {
         obj.pictureUrlList.push(this.form.goodsCategoryPicture);
       }
       if (obj.pictureUrlList.length > 0) {
-        updatePicture(obj).then((res) => {
+        updatePicture(obj).then((res) => {});
-          console.log(res);
-        });
       }
       this.open = false;
       this.reset();
@@ -317,6 +407,8 @@ export default {
         createTime: null,
         updateBy: null,
         updateTime: null,
+        parentId: null,
+        parentName: null,
       };
       this.resetForm("form");
     },
@@ -341,6 +433,13 @@ export default {
       this.reset();
       this.open = true;
       this.title = "添加商品分类信息";
+      console.log(this.queryParams);
+      // if (this.queryParams.parentId != 0) {
+      this.form.parentId = this.queryParams.parentId;
+      // }
+      this.form.parentName = this.queryParams.parentName;
+      this.form.categoryLevel = this.categoryLevel;
+      console.log(this.form);
     },
     /** 修改按钮操作 */
     handleUpdate(row) {
@@ -356,8 +455,6 @@ export default {
     },
     /** 提交按钮 */
     submitForm() {
-      console.log(this.form);
-
       this.$refs["form"].validate((valid) => {
         if (valid) {
           if (this.form.id != null) {
@@ -367,19 +464,19 @@ export default {
                 obj.pictureUrlList.push(this.imgone);
               }
               if (obj.pictureUrlList.length > 0) {
-                updatePicture(obj).then((res) => {
+                updatePicture(obj).then((res) => {});
-                  console.log(res);
-                });
               }
               this.$modal.msgSuccess("修改成功");
               this.open = false;
               this.getList();
+              this.info();
             });
           } else {
             addGoodsCategory(this.form).then((response) => {
               this.$modal.msgSuccess("新增成功");
               this.open = false;
               this.getList();
+              this.info();
             });
           }
         }
@@ -389,7 +486,9 @@ export default {
     handleDelete(row) {
       const ids = row.id || this.ids;
       this.$modal
-        .confirm('是否确认删除商品分类信息编号为"' + ids + '"的数据项？')
+        .confirm(
+          '是否确认删除商品分类名称为"' + row.goodsCategoryName + '"的数据？'
+        )
         .then(function () {
           return delGoodsCategory(ids);
         })