vue+mongoose+koa列表展示-用户添加和编辑共用一个组件

小灰灰 2023-01-15 02:18 89阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70][]

commonManagement/index.vue:

<template>
      <div class="commonManagement">
        <el-card>
          <div style="margin-bottom: 10px">
            <el-input
              v-model="searchName"
              clearable
              placeholder="输入果树名称搜索"
              style="width: 200px; margin-right: 10px"
            />
            <el-button
              type="success"
              icon="el-icon-search"
              @click="searchTree(searchName)"
              >搜索</el-button
            >
            <el-button
              type="warning"
              icon="el-icon-refresh-left"
              @click="searchName = ''"
              >重置</el-button
            >
            <el-button
              @click="handleAdd()"
              sizi="mini"
              type="primary"
              icon="el-icon-plus"
              >新增</el-button
            >
            <el-button
              @click="getTreeList()"
              sizi="mini"
              icon="el-icon-refresh"
              style="float: right"
              >刷新</el-button
            >
          </div>
          <el-table :data="tableData" border v-loading="isLoading">
            <el-table-column
              label="果树名称"
              prop="name"
              align="center"
              width="150px"
            ></el-table-column>
            <el-table-column
              label="时期"
              prop="time"
              align="center"
              width="200px"
            ></el-table-column>
            <el-table-column
              label="技术措施"
              prop="technicalMeasures"
              align="center"
            ></el-table-column>
            <el-table-column
              label="目的"
              prop="objective"
              align="center"
            ></el-table-column>
            <el-table-column label="操作" align="center" width="200px">
              <template slot-scope="scope">
                <el-button size="mini" @click="showEditDialog(scope.row)">
                  <i class="el-icon-edit" /> 编辑
                </el-button>
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.row)"
                >
                  <i class="el-icon-delete" /> 删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
        <CommonManagementDialog
          :treeDialog="treeDialog"
          :formData="formData"
          @addTree="addTree"
          @editTree="editTree"
        ></CommonManagementDialog>
      </div>
    </template>
    
    <script>
    import CommonManagementDialog from "./commonManagementDialog.vue";
    import {
      addTree,
      getTreeList,
      editTree,
      deleteTree,
      searchTree,
    } from "@/api/commonManagement/index";
    export default {
      name: "commonManagement",
      components: { CommonManagementDialog },
      data() {
        return {
          searchName: "",
          isLoading: false,
          treeDialog: {
            show: false,
            title: "",
          },
          formData: {},
          tableData: [
            {
              _id: "",
              name: "桃树",
              time: "9月下旬-10月上旬",
              technicalMeasures:
                "基肥农家肥1500-2000 kg/亩或商品有机肥400-500 kg/亩+过磷酸钙30 kg/亩",
              objective: "打好基础",
            },
          ],
        };
      },
      props: {},
      created() {},
      mounted() {
        this.getTreeList();
      },
      computed: {},
      methods: {
        //获取果树列表
        async getTreeList() {
          this.isLoading = true;
          let { data } = await getTreeList();
          this.tableData = data;
          this.isLoading = false;
        },
    
        //打开新增果树窗口
        handleAdd() {
          this.treeDialog = {
            show: true,
            title: "新增果树",
            option: "add",
          };
          this.formData = {
            name: "",
            time: "",
            technicalMeasures: "",
            objective: "",
          };
        },
        //打开编辑果树窗口
        showEditDialog(row) {
          this.treeDialog = {
            show: true,
            title: "编辑果树",
            option: "edit",
          };
          this.formData = {
            _id: row._id,
            name: row.name,
            time: row.time,
            technicalMeasures: row.technicalMeasures,
            objective: row.objective,
          };
        },
        //新增果树
        async addTree() {
          await addTree(this.formData);
          this.treeDialog.show = false;
          this.$notify({
            title: "成功",
            message: "新增果树成功！",
            type: "success",
          });
          this.getTreeList();
        },
        //编辑果树
        async editTree() {
          await editTree(this.formData, this.formData._id);
          this.treeDialog.show = false;
          this.$notify({
            title: "成功",
            message: "编辑果树成功！",
            type: "success",
          });
          this.getTreeList();
        },
        //删除果树
        handleDelete(row) {
          this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(async () => {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              await deleteTree(row._id);
              this.getTreeList();
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "已取消删除",
              });
            });
        },
        //根据果树名查询
        async searchTree(searchName) {
          this.isLoading = true;
          let { data } = await searchTree({
            searchName,
          });
          this.tableData = data;
          this.isLoading = false;
        },
      },
      watch: {},
    };
    </script>
    
    <style lang="scss" scoped>
    .commonManagement {
      padding: 10px;
    }
    </style>

commonManagementDialog.vue:

<template>
      <div class="commonManagementDialog">
        <el-dialog
          :title="treeDialog.title"
          width="45%"
          :visible.sync="treeDialog.show"
        >
          <el-form
            ref="ref_form_commonManage"
            :model="formData"
            :rules="rules"
            label-width="100px"
          >
            <el-form-item label="果树名称" prop="name">
              <el-input
                v-model="formData.name"
                autocomplete="off"
                style="width: 90%"
              ></el-input>
            </el-form-item>
            <el-form-item label="时期" prop="time">
              <el-input
                v-model="formData.time"
                autocomplete="off"
                style="width: 90%"
              ></el-input>
            </el-form-item>
            <el-form-item label="技术措施" prop="technicalMeasures">
              <el-input
                v-model="formData.technicalMeasures"
                autocomplete="off"
                style="width: 90%"
              ></el-input>
            </el-form-item>
            <el-form-item label="目的" prop="objective">
              <el-input
                v-model="formData.objective"
                type="textarea"
                :rows="2"
                autocomplete="off"
                style="width: 90%"
              ></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="treeDialog.show = false">取 消</el-button>
            <el-button
              v-if="treeDialog.option == 'add'"
              @click="addTree('ref_form_commonManage')"
              type="primary"
              >确 定</el-button
            >
            <el-button
              v-if="treeDialog.option == 'edit'"
              @click="editTree('ref_form_commonManage')"
              type="primary"
              >确 定</el-button
            >
          </div>
        </el-dialog>
      </div>
    </template>
    
    <script>
    export default {
      name: "",
      components: {},
      props: ["treeDialog", "formData"],
      data() {
        return {
          rules: {
            name: [{ required: true, message: "请输入果树名称", trigger: "blur" }],
          },
        };
      },
      created() {},
      mounted() {},
      computed: {},
      methods: {
        addTree(formName) {
          this.$refs[formName].validate((valid) => {
            if (valid) {
              this.$emit("addTree");
            } else {
              console.log("error submit!!");
              return false;
            }
          });
        },
        editTree(formName) {
          this.$refs[formName].validate((valid) => {
            if (valid) {
              this.$emit("editTree");
            } else {
              console.log("error submit!!");
              return false;
            }
          });
        },
      },
      watch: {},
    };
    </script>

@/api/commonManagement/index.js：

import request from '@/utils/request'
    //  获取果树列表
    export function getTreeList() {
        return request({
            url: '/api/commonManagement/treeList',
            method: 'get'
        })
    }
    
    //  新增果树
    export function addTree(data) {
        return request({
            url: '/api/commonManagement/addTree',
            method: 'post',
            data
        })
    }
    
    //  编辑果树
    export function editTree(data, _id) {
        return request({
            url: `/api/commonManagement/editTree/${_id}`,
            method: 'post',
            data
        })
    }
    
    //  删除果树
    export function deleteTree(_id) {
        return request({
            url: `/api/commonManagement/deleteTree/${_id}`,
            method: 'get'
        })
    }
    
    //  根据关键字查询
    export function searchTree(data) {
        return request({
            url: `/api/commonManagement/searchTree`,
            method: 'post',
            data
        })
    }

后台：

routes/commonManagement.js

models/CommonManagement.js:

const mongoose = require("../db");
    
    const Schema = mongoose.Schema;
    //精细管理
    const commonManagementSchema = new Schema({
        name: {
            type: String,
            required: true
        },
        time: {
            type: String,
        },
        technicalMeasures: {
            type: String,
        },
        //目的
        objective: {
            type: String,
        },
        date: {
            type: Date,
            default: Date.now
        }
    
    })
    
    module.exports = CommonManagement = mongoose.model("CommonManagement", commonManagementSchema,
        "common_management")

再在app.js中引入

const commonManagement = require('./routes/commonManagement')
    
    
    
    app.use(commonManagement.routes(), commonManagement.allowedMethods())

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70]: /images/20221022/0abc10e6072a48f1ae0d28ecdf5731e0.png