1、实现一个前端父组件调用子组件的方法例子

2、仓库服务仓库信息crud实现
2022-03-22 17:40:08 +08:00 · 2022-03-22 17:40:08 +08:00 · 99b0eee9d4
parent fcd49fcc1c
commit 99b0eee9d4
7 changed files with 357 additions and 23 deletions
--- a/ruoyi-ui/src/api/mall/ware/ware-info.js
+++ b/ruoyi-ui/src/api/mall/ware/ware-info.js
@ -0,0 +1,48 @@
+import request from '@/utils/request'
+
+//获取仓库信息列表
+export function getWareInfoList(parms) {
+  return request({
+    url: '/mall-ware/ware/wareinfo/list',
+    method: 'get',
+    params: parms
+  })
+}
+
+//删除仓库信息
+export function delWareInfo(ids) {
+  return request({
+    url: '/mall-ware/ware/wareinfo/delete',
+    method: 'delete',
+    data: ids
+  })
+}
+
+//获取仓库信息详情
+export function getWareInfo(id) {
+  return request({
+    url: `/mall-ware/ware/wareinfo/info/${id}`,
+    method: 'get',
+  })
+}
+
+//保存仓库信息
+export function saveWareInfo(data) {
+  return request({
+    url: `/mall-ware/ware/wareinfo/save`,
+    method: 'post',
+    data: data,
+  })
+}
+
+//修改仓库信息
+export function editWareInfo(data) {
+  return request({
+    url: `/mall-ware/ware/wareinfo/update`,
+    method: 'put',
+    data: data,
+  })
+}
+
+
+
--- a/ruoyi-ui/src/views/mall/product/maintain/spu.vue
+++ b/ruoyi-ui/src/views/mall/product/maintain/spu.vue
@ -29,7 +29,7 @@
        </el-form>
      </el-col>
      <el-col :span="24">
-        <spuinfo :catId="catId"></spuinfo>
+        <spuinfo :catId="catId" ref="spuInfo"></spuinfo>
      </el-col>
    </el-row>
  </div>
@ -75,6 +75,9 @@ export default {
      // this.catelogPath= []
      this.$bus.$emit('clearCategoryCascader', [])
      this.$bus.$emit('clearBrandSelect', [])
+
+      //调用子组件重置方法
+      this.$refs.spuInfo.rest()
    },


--- a/ruoyi-ui/src/views/mall/product/maintain/spuinfo.vue
+++ b/ruoyi-ui/src/views/mall/product/maintain/spuinfo.vue
@ -138,6 +138,12 @@ export default {

    },

+    //重置值
+    rest() {
+      this.pageIndex = 1;
+      this.getDataList();
+    },
+

  },

--- a/ruoyi-ui/src/views/mall/ware/wareinfo/wareinfo-add-or-update.vue
+++ b/ruoyi-ui/src/views/mall/ware/wareinfo/wareinfo-add-or-update.vue
@ -0,0 +1,90 @@
+<template>
+  <el-dialog
+    width="500px"
+    :title="!dataForm.id ? '新增' : '修改'"
+    :close-on-click-modal="false"
+    :visible.sync="visible">
+    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()"
+             label-width="80px">
+      <el-form-item label="仓库名" prop="name">
+        <el-input v-model="dataForm.name" placeholder="仓库名"></el-input>
+      </el-form-item>
+      <el-form-item label="仓库地址" prop="address">
+        <el-input v-model="dataForm.address" placeholder="仓库地址"></el-input>
+      </el-form-item>
+      <el-form-item label="区域编码" prop="areacode">
+        <el-input v-model="dataForm.areacode" placeholder="区域编码"></el-input>
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">取消</el-button>
+      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import {editWareInfo, getWareInfo, saveWareInfo} from "@/api/mall/ware/ware-info";
+
+export default {
+  name: "Ware-info-add-update",
+  data() {
+    return {
+      visible: false,
+      dataForm: {
+        name: '',
+        address: '',
+        areacode: ''
+      },
+      dataRule: {
+        name: [
+          {required: true, message: '仓库名不能为空', trigger: 'blur'}
+        ],
+        address: [
+          {required: true, message: '仓库地址不能为空', trigger: 'blur'}
+        ],
+        areacode: [
+          {required: true, message: '区域编码不能为空', trigger: 'blur'}
+        ]
+      }
+    }
+  },
+
+  methods: {
+    init(id) {
+      this.dataForm.id = id
+      this.visible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].resetFields()
+        if (this.dataForm.id) {
+          getWareInfo(this.dataForm.id).then(res => {
+            this.dataForm = res.wareInfo
+          })
+        }
+      })
+    },
+
+    // 表单提交
+    dataFormSubmit() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          if (!this.dataForm.id) {
+            saveWareInfo(this.dataForm).then(res => {
+              this.$modal.notifySuccess("添加成功")
+              this.visible = false
+              this.$emit('refreshDataList')
+            })
+          } else {
+            editWareInfo(this.dataForm).then(res => {
+              this.$modal.notifySuccess("修改成功")
+              this.visible = false
+              this.$emit('refreshDataList')
+            })
+          }
+        }
+      })
+    },
+
+  }
+}
+</script>
--- a/ruoyi-ui/src/views/mall/ware/wareinfo/wareinfo.vue
+++ b/ruoyi-ui/src/views/mall/ware/wareinfo/wareinfo.vue
@ -0,0 +1,173 @@
+<template>
+  <div class="app-container">
+    <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+      <el-form-item>
+        <el-input v-model="dataForm.key" placeholder="请输入仓库名、仓库地址、区域编码等" clearable style="width: 300px"></el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-button-group>
+          <el-button @click="getDataList()" size="mini">查询</el-button>
+          <el-button type="primary" @click="addOrUpdateHandle()" size="mini">新增</el-button>
+          <el-button type="danger" @click="deleteHandle()"
+                     :disabled="dataListSelections.length <= 0" size="mini">批量删除
+          </el-button>
+          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+        </el-button-group>
+      </el-form-item>
+    </el-form>
+    <el-table
+      :data="dataList"
+      border
+      v-loading="dataListLoading"
+      @selection-change="selectionChangeHandle"
+      style="width: 100%;">
+      <el-table-column
+        type="selection"
+        header-align="center"
+        align="center"
+        width="50">
+      </el-table-column>
+
+      <el-table-column
+        prop="name"
+        header-align="center"
+        align="center"
+        :show-overflow-tooltip="true"
+        label="仓库名">
+      </el-table-column>
+      <el-table-column
+        prop="address"
+        header-align="center"
+        align="center"
+        :show-overflow-tooltip="true"
+        label="仓库地址">
+      </el-table-column>
+      <el-table-column
+        prop="areacode"
+        header-align="center"
+        align="center"
+        :show-overflow-tooltip="true"
+        label="区域编码">
+      </el-table-column>
+      <el-table-column
+        fixed="right"
+        header-align="center"
+        align="center"
+        width="150"
+        label="操作">
+        <template slot-scope="scope">
+          <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">修改</el-button>
+          <el-button type="text" size="small" @click="deleteHandle(scope.row.id)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      @size-change="sizeChangeHandle"
+      @current-change="currentChangeHandle"
+      :current-page="pageIndex"
+      :page-sizes="[10, 20, 50, 100]"
+      :page-size="pageSize"
+      :total="totalPage"
+      layout="total, sizes, prev, pager, next, jumper">
+    </el-pagination>
+    <!-- 弹窗, 新增 / 修改 -->
+    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
+  </div>
+</template>
+
+<script>
+import AddOrUpdate from './wareinfo-add-or-update'
+import {delWareInfo, getWareInfoList} from "@/api/mall/ware/ware-info";
+
+export default {
+  name: "Ware-info",
+  data() {
+    return {
+      dataForm: {
+        key: ''
+      },
+      dataList: [],
+      pageIndex: 1,
+      pageSize: 10,
+      totalPage: 0,
+      dataListLoading: false,
+      dataListSelections: [],
+      addOrUpdateVisible: false
+    }
+  },
+  components: {
+    AddOrUpdate
+  },
+  created() {
+    this.getDataList()
+  },
+  methods: {
+    // 获取数据列表
+    getDataList() {
+      this.dataListLoading = true
+
+      let params = {
+        'page': this.pageIndex,
+        'limit': this.pageSize,
+        'key': this.dataForm.key
+      }
+      getWareInfoList(params).then(res => {
+        this.dataList = res.page.list
+        this.totalPage = res.page.totalCount
+        this.dataListLoading = false
+      })
+    },
+
+    // 每页数
+    sizeChangeHandle(val) {
+      this.pageSize = val
+      this.pageIndex = 1
+      this.getDataList()
+    },
+
+    // 当前页
+    currentChangeHandle(val) {
+      this.pageIndex = val
+      this.getDataList()
+    },
+
+    // 多选
+    selectionChangeHandle(val) {
+      this.dataListSelections = val
+    },
+
+    // 新增 / 修改
+    addOrUpdateHandle(id) {
+      this.addOrUpdateVisible = true
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.init(id)
+      })
+    },
+
+    // 删除
+    deleteHandle(id) {
+      var ids = id ? [id] : this.dataListSelections.map(item => {
+        return item.id
+      })
+      this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        delWareInfo(ids).then(res => {
+          this.$modal.notifySuccess("删除成功")
+          this.getDataList()
+        })
+      })
+    },
+
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.dataForm = {}
+      this.pageIndex = 1;
+      this.getDataList();
+    },
+
+  }
+}
+</script>
--- a/xjs-business/xjs-project-mall/mall-ware/src/main/java/com/xjs/mall/ware/controller/WareInfoController.java
+++ b/xjs-business/xjs-project-mall/mall-ware/src/main/java/com/xjs/mall/ware/controller/WareInfoController.java
@ -4,6 +4,8 @@ import com.xjs.mall.ware.entity.WareInfoEntity;
 import com.xjs.mall.ware.service.WareInfoService;
 import com.xjs.utils.PageUtils;
 import com.xjs.mall.other.R;
+import io.swagger.annotations.Api;
+import io.swagger.annotations.ApiOperation;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.web.bind.annotation.*;

@ -11,16 +13,16 @@ import java.util.Arrays;
 import java.util.Map;


-
 /**
 * 仓库信息
 *
 * @author xiejs
 * @email 1294405880@qq.com
- * @date 2022-03-15 09:56:19
+ * @since 2022-03-15 09:56:19
 */
@RestController
@RequestMapping("ware/wareinfo")
+@Api(tags = "商城-仓库-仓库信息")
 public class WareInfoController {
    @Autowired
    private WareInfoService wareInfoService;
@ -28,8 +30,9 @@ public class WareInfoController {
    /**
     * 列表
     */
-    @RequestMapping("/list")
-    public R list(@RequestParam Map<String, Object> params){
+    @GetMapping("/list")
+    @ApiOperation("列表")
+    public R list(@RequestParam Map<String, Object> params) {
        PageUtils page = wareInfoService.queryPage(params);

        return R.ok().put("page", page);
@ -39,9 +42,10 @@ public class WareInfoController {
    /**
     * 信息
     */
-    @RequestMapping("/info/{id}")
-    public R info(@PathVariable("id") Long id){
-		WareInfoEntity wareInfo = wareInfoService.getById(id);
+    @GetMapping("/info/{id}")
+    @ApiOperation("信息")
+    public R info(@PathVariable("id") Long id) {
+        WareInfoEntity wareInfo = wareInfoService.getById(id);

        return R.ok().put("wareInfo", wareInfo);
    }
@ -49,9 +53,10 @@ public class WareInfoController {
    /**
     * 保存
     */
-    @RequestMapping("/save")
-    public R save(@RequestBody WareInfoEntity wareInfo){
-		wareInfoService.save(wareInfo);
+    @PostMapping("/save")
+    @ApiOperation("保存")
+    public R save(@RequestBody WareInfoEntity wareInfo) {
+        wareInfoService.save(wareInfo);

        return R.ok();
    }
@ -59,9 +64,10 @@ public class WareInfoController {
    /**
     * 修改
     */
-    @RequestMapping("/update")
-    public R update(@RequestBody WareInfoEntity wareInfo){
-		wareInfoService.updateById(wareInfo);
+    @PutMapping("/update")
+    @ApiOperation("修改")
+    public R update(@RequestBody WareInfoEntity wareInfo) {
+        wareInfoService.updateById(wareInfo);

        return R.ok();
    }
@ -69,9 +75,10 @@ public class WareInfoController {
    /**
     * 删除
     */
-    @RequestMapping("/delete")
-    public R delete(@RequestBody Long[] ids){
-		wareInfoService.removeByIds(Arrays.asList(ids));
+    @DeleteMapping("/delete")
+    @ApiOperation("删除")
+    public R delete(@RequestBody Long[] ids) {
+        wareInfoService.removeByIds(Arrays.asList(ids));

        return R.ok();
    }
--- a/xjs-business/xjs-project-mall/mall-ware/src/main/java/com/xjs/mall/ware/service/impl/WareInfoServiceImpl.java
+++ b/xjs-business/xjs-project-mall/mall-ware/src/main/java/com/xjs/mall/ware/service/impl/WareInfoServiceImpl.java
@ -1,8 +1,9 @@
 package com.xjs.mall.ware.service.impl;

-import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
+import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
 import com.baomidou.mybatisplus.core.metadata.IPage;
 import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
+import com.ruoyi.common.core.utils.StringUtils;
 import com.xjs.mall.ware.dao.WareInfoDao;
 import com.xjs.mall.ware.entity.WareInfoEntity;
 import com.xjs.mall.ware.service.WareInfoService;
@ -18,12 +19,18 @@ public class WareInfoServiceImpl extends ServiceImpl<WareInfoDao, WareInfoEntity

    @Override
    public PageUtils queryPage(Map<String, Object> params) {
-        IPage<WareInfoEntity> page = this.page(
-                new Query<WareInfoEntity>().getPage(params),
-                new QueryWrapper<WareInfoEntity>()
-        );
+        String key = (String) params.get(Query.KEY_NAME);
+
+        LambdaQueryWrapper<WareInfoEntity> wrapper = new LambdaQueryWrapper<>();
+        if (StringUtils.isNotEmpty(key)) {
+            wrapper.like(WareInfoEntity::getName, key).or()
+                    .like(WareInfoEntity::getAddress, key).or()
+                    .eq(WareInfoEntity::getAreacode, key);
+        }
+
+        IPage<WareInfoEntity> page = this.page(new Query<WareInfoEntity>().getPage(params), wrapper);

        return new PageUtils(page);
    }

-}
+}