vue2+JS+VueX+elment-ui 解构分层 实现增删改查

页面：

<template>
  <div class="bigBox">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>设备管理</el-breadcrumb-item>
      <el-breadcrumb-item>设备入库</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row> </el-row>
    <h2>入库记录</h2>

    <el-row :gutter="24">
      <el-col :span="3">
        <div class="grid-content bg-purple">
          <el-button
            type="text"
            @click="handleAdd"
            icon="el-icon-plus"
            style="padding: 12px; background-color: #3f3f65; color: white"
            >添加设备</el-button
          >
        </div>
      </el-col>

      <el-col :span="6">
        <el-input placeholder="请输入名称" v-model="input"></el-input>
      </el-col>

      <el-col :span="7">
        <el-date-picker
          type="daterange"
          range-separator="-"
          start-placeholder="入库起始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </el-col>

      <el-col :span="2">
        <el-button
          type="primary"
          class="chaXun"
          style="background-color: #3f3f65"
          v-model="input"
          @click="chaGetFacility(input)"
          >查询</el-button
        >
      </el-col>

      <el-col :span="4">
        <el-button
          type="primary"
          style="background-color: white; color: #3f3f65; border-color: #3f3f65"
        >
          导出Excel<i class="el-icon--right"></i>
        </el-button>
      </el-col>
    </el-row>

    <div class="from color">
      <el-table
        :data="gettersFacilityList"
        tooltip-effect="dark"
        style="width: 100%"
      >
        <el-table-column type="selection" width="55"></el-table-column>

        <el-table-column
          label="分类"
          width="120"
          header-align="center"
          align="center"
        >
          <template slot-scope="scope">{{ scope.row.className }}</template>
        </el-table-column>

        <el-table-column
          label="名称"
          width="120"
          header-align="center"
          align="center"
        >
          <template slot-scope="scope">{{ scope.row.facilityName }}</template>
        </el-table-column>

        <el-table-column
          label="编码"
          show-overflow-tooltip
          width="110"
          header-align="center"
          align="center"
        >
          <template slot-scope="scope">{{
            scope.row.facilityEncoding
          }}</template>
        </el-table-column>

        <el-table-column
          label="单价（元）"
          show-overflow-tooltip
          width="110"
          header-align="center"
          align="center"
        >
          <template slot-scope="scope">{{ scope.row.facilityPrice }}</template>
        </el-table-column>

        <el-table-column
          label="数量"
          show-overflow-tooltip
          width="110"
          header-align="center"
          align="center"
        >
          <template slot-scope="scope">{{ scope.row.facilityAmount }}</template>
        </el-table-column>

        <el-table-column
          label="规格"
          show-overflow-tooltip
          width="110"
          header-align="center"
          align="center"
        >
          <template slot-scope="scope">{{
            scope.row.facilitySpecification
          }}</template>
        </el-table-column>

        <el-table-column
          label="存放地点"
          show-overflow-tooltip
          width="110"
          header-align="center"
          align="center"
        >
          <template slot-scope="scope">{{ scope.row.storageSite }}</template>
        </el-table-column>

        <el-table-column
          label="是否唯一"
          show-overflow-tooltip
          width="110"
          header-align="center"
          align="center"
        >
          <template slot-scope="scope">{{ scope.row.facilitySole }}</template>
        </el-table-column>

        <el-table-column
          label="入库时间"
          show-overflow-tooltip
          width="110"
          header-align="center"
          align="center"
        >
          <template slot-scope="scope">{{ scope.row.facilityTime }}</template>
        </el-table-column>

        <el-table-column
          label="操作"
          show-overflow-tooltip
          header-align="center"
          align="center"
          width="220"
          fixed="right"
        >
          <template slot-scope="scope">
            <el-tooltip
              class="item"
              effect="dark"
              content="编辑信息"
              placement="top"
            >
              <el-button
                btn-id="id"
                @click="
                  dialogFormVisibleFacility1 = true;
                  showFacilityUpdate(scope.row);
                "
                type="primary"
                icon="el-icon-edit"
                circle
              ></el-button>
            </el-tooltip>

            <el-button
              type="danger"
              icon="el-icon-delete"
              @click="facilityDelete(scope.row.id)"
              circle
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-pagination
      background
      layout="prev, pager, next"
      :total="limit"
      class="pag"
    >
    </el-pagination>

    <!-- 添加选项模态框 -->
    <el-dialog title="新增设备" :visible.sync="dialogFormVisible">
      <el-form :model="addForm" class="detailsLi" ref="addForm">
        <el-form-item>
          <span>请选择分类:</span>
          <el-select
            style="width: 150px"
            center
            v-model="addForm.classId"
            prop="classId"
          >
            <span v-for="item in getFacilityClassList">
              <el-option :label="item.className" :value="item.id"></el-option>
            </span>
          </el-select>
        </el-form-item>

        <el-form-item prop=" facilityName">
          <span>设备名称:</span>
          <el-input
            placeholder="设备名称"
            style="width: 150px"
            v-model="addForm.facilityName"
            autocomplete="off"
          ></el-input>
        </el-form-item>

        <el-form-item prop="facilityEncoding">
          <span>编码:</span>
          <el-input
            placeholder="编码"
            style="width: 150px"
            v-model="addForm.facilityEncoding"
            autocomplete="off"
          ></el-input>
        </el-form-item>

        <el-form-item prop="facilityPrice">
          <span>单价:</span>
          <el-input
            placeholder="单价"
            style="width: 150px"
            v-model="addForm.facilityPrice"
            autocomplete="off"
          ></el-input>
        </el-form-item>

        <el-form-item prop="facilityAmount">
          <span>数量:</span>
          <el-input
            placeholder="数量"
            style="width: 150px"
            v-model="addForm.facilityAmount"
            autocomplete="off"
          ></el-input>
        </el-form-item>

        <el-form-item prop="facilitySpecification">
          <span>规格:</span>
          <el-input
            placeholder="规格"
            style="width: 150px"
            v-model="addForm.facilitySpecification"
            autocomplete="off"
          ></el-input>
        </el-form-item>

        <el-form-item>
          <span>存放地点:</span>
          <el-select
            style="width: 150px; margin: 10px"
            center
            prop="storageSiteId"
            v-model="addForm.storageSiteId"
          >
            <span v-for="item in getStorageSiteList">
              <el-option :label="item.storageSite" :value="item.id"></el-option
            ></span>
          </el-select>
        </el-form-item>

        <el-form-item prop="facilitySole">
          <span>是否唯一:</span>
          <el-checkbox
            label="是"
            v-model="addForm.facilitySole"
            value="1"
          ></el-checkbox>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="qxAddModel">取 消</el-button>
        <el-button
          type="primary"
          @click="
            dialogFormVisible = false;
            postfacilityAdd();
          "
          >确 定</el-button
        >
      </div>
    </el-dialog>

    <!-- 修改选项模态框 -->
    <el-dialog title="修改信息" :visible.sync="dialogFormVisibleFacility1">
      <el-form :model="modifyForm" class="detailsLi" ref="editFormRef">
        <el-form-item>
          <span>请选择分类:</span>
          <el-select
            style="width: 150px"
            center
            v-model="modifyForm.className"
            prop="classId"
          >
            <span v-for="item in getFacilityClassList">
              <el-option :label="item.className" :value="item.id"></el-option>
            </span>
          </el-select>
        </el-form-item>

        <el-form-item prop=" facilityName">
          <span>设备名称:</span>
          <el-input
            placeholder="设备名称"
            style="width: 150px"
            v-model="modifyForm.facilityName"
            autocomplete="off"
          ></el-input>
        </el-form-item>

        <el-form-item prop="facilityEncoding">
          <span>编码:</span>
          <el-input
            placeholder="编码"
            style="width: 150px"
            v-model="modifyForm.facilityEncoding"
            autocomplete="off"
          ></el-input>
        </el-form-item>

        <el-form-item prop="facilityPrice">
          <span>单价:</span>
          <el-input
            placeholder="单价"
            style="width: 150px"
            v-model="modifyForm.facilityPrice"
            autocomplete="off"
          ></el-input>
        </el-form-item>

        <el-form-item prop="facilityAmount">
          <span>数量:</span>
          <el-input
            placeholder="数量"
            style="width: 150px"
            v-model="modifyForm.facilityAmount"
            autocomplete="off"
          ></el-input>
        </el-form-item>

        <el-form-item prop="facilitySpecification">
          <span>规格:</span>
          <el-input
            placeholder="规格"
            style="width: 150px"
            v-model="modifyForm.facilitySpecification"
            autocomplete="off"
          ></el-input>
        </el-form-item>

        <el-form-item>
          <span>存放地点:</span>
          <el-select
            style="width: 150px; margin: 10px"
            center
            prop="storageSiteId"
            v-model="modifyForm.storageSiteId"
            autocomplete="off"
          >
            <span v-for="item in getStorageSiteList">
              <el-option :label="item.storageSite" :value="item.id"></el-option
            ></span>
          </el-select>
        </el-form-item>

        <el-form-item prop="facilitySole">
          <span>是否唯一:</span>
          <el-checkbox
            label="是"
            v-model="modifyForm.facilitySole"
            value="1"
          ></el-checkbox>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisibleFacility1 = false">取 消</el-button>
        <el-button
          type="primary"
          @click="
            dialogFormVisibleFacility1 = false;
            facilityUpdate(modifyForm);
          "
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
// import seriveFacility from "./../../serive/seriveFacility";
//引入vuex插件，{mapState,mapActions,mapGetters,mapMutaion}里面是4个参数
//mapActions相当于把store文件里面暴露的actions对象里面的方法引入进来
import { facilityClass } from "@/api/apiFacility";
import { mapGetters, mapActions } from "vuex";
import seriveFacility from "./../../serive/seriveFacility";
export default {
  name: "Facility",
  data() {
    return {
      dialogFormVisible: false,
      dialogFormVisibleFacility1: false,
      formLabelWidth: "120px",
      limit: 25,
      page: 1,
      //添加设备参数集合
      addForm: {
        classId: "",
        facilityAmount: "",
        facilityEncoding: "",
        facilityName: "",
        facilityPrice: "",
        facilitySole: "",
        facilitySpecification: "",
        facilityTime: "",
        id: "",
        storageSiteId: "",
      },
      //修改设备参数集合
      modifyForm: {
        classId: "",
        facilityAmount: "",
        facilityEncoding: "",
        facilityName: "",
        facilityPrice: "",
        facilitySole: "",
        facilitySpecification: "",
        facilityTime: "",
        id: "",
        storageSiteId: "",
      },
      //查询参数
      input: "",
    };
  },

  computed: {
    ...mapGetters([
      "gettersFacilityList",
    ]),
  },

  //页面加载的时候调用methods{}里面async getfacilityList(){}方法
  created() {
    this.getfacilityList({
      limit: this.limit,
      page: this.page,
      name: this.input,
    });
  },

  methods: {
    ...mapActions([
      "getfacilityList"
    ]),
    handleAdd() {
      // 添加模态框
      this.storageSite();
      this.facilityClass().then((res) => {
        this.dialogFormVisible = true;
      });
    },
    // 设备删除
    async facilityDelete(id) {
      console.log(id);
      let result = await seriveFacility.facilityDelete(id).then((res) => {
        console.log(res.data);
        if (res.data.code == 200) {
          this.$message.success("删除成功!");
          this.getfacilityList({
            limit: this.limit,
            page: this.page,
          });
        } else {
          this.$message.error("删除失败！");
        }
      });
      return result;
    },
    qxAddModel() {
      this.dialogFormVisible = false;
      this.$refs["addForm"].resetFields();
    },
    //设备添加
    async postfacilityAdd() {
      console.log(this.addForm, "设备添加");
      let result = await seriveFacility
        .facilityAdd(this.addForm)
        .then((res) => {
          console.log(res.data);
          if (res.data.code == 200) {
            this.$message.success("添加成功!");
            this.getfacilityList({
              limit: this.limit,
              page: this.page,
              name: this.input,
            });
            this.$refs["addForm"].resetFields();
          } else {
            this.$message.error("添加失败！");
            dialogFormVisible = false;
          }
        });
      return result;
    },

    //设备修改之展示
    async showFacilityUpdate(row) {
      this.$message.success("展示成功！");
      console.log(row);
      this.modifyForm.classId = row.classId;
      this.modifyForm.facilityAmount = row.facilityAmount;
      this.modifyForm.facilityEncoding = row.facilityEncoding;
      this.modifyForm.facilityName = row.facilityName;
      this.modifyForm.facilityPrice = row.facilityPrice;
      this.modifyForm.facilitySole = row.facilitySole;
      this.modifyForm.facilitySpecification = row.facilitySpecification;
      this.modifyForm.facilityTime = row.facilityTime;
      this.modifyForm.id = row.id;
      this.modifyForm.storageSiteId = row.storageSiteId;
    },

    //设备修改之修改
    async facilityUpdate(modifyForm) {
      console.log(modifyForm);
      let result = await seriveFacility
        .facilityUpdate(modifyForm)
        .then((res) => {
          console.log(res.data);
        });
      this.getfacilityList({
        limit: this.limit,
        page: this.page,
        name: this.input,
      });
      return result;
    },

    //查询
    async chaGetFacility() {
      console.log(this.input, this.limit, this.page);
      this.getfacilityList({
        limit: this.limit,
        page: this.page,
        name: this.input,
      });
    },
  },
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
}

.bigBox {
  margin: 29px;
  border-radius: 10px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 30px;
  min-height: 600px;
}

h2 {
  padding: 10px 0;
}

.from {
  padding: 10px 0;
}

.tu1 {
  width: 100px;
  height: 50px;
}

.shouSuo {
  width: 300px;
  height: 50px;
}

.tu2 {
  width: 50px;
  height: 50px;
}

.el-row {
  margin-bottom: 20px;
}

.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
}

.el-icon-upload2 {
  height: 50px;
  width: 50px;
  font-size: 30px;
  cursor: pointer;
}

.el-icon-download {
  height: 50px;
  width: 50px;
  font-size: 30px;
  cursor: pointer;
}

.pag {
  float: right;
}

.detailsLi {
  list-style-type: none;
}
</style>

 store文件：

//设备添加
import seriveFacility from "./../serive/seriveFacility";

export default {
  //state装载所有的状态的 在vuex中这就是数据 用于页面读取的
  state: {
	//facilityList:[]数据集合
	facilityList:[]
  },

  getters: {
    gettersFacilityList(state){
     return [...state.facilityList];
    }
  },

  //mutations专门用来修改状态值的方法集合，用来修改state值数据的 不支持异步函数
  mutations: {
    //data是commit("addPost",result.data)中的result.data  state是vuex中的state
    // addPost(state,data){
    //   console.log(data);
    //   state.facilityList = data.data;

    // },

    setFacilityList(state,data){
      console.log(data);
      state.facilityList=data.data;
    }
  },

  //专门用来调用mutations然后修改状态 支持异步
  actions: {
    //设备添加 异步操作 commit提交 {params, facilityName}参数集合
    // async postfacilityAdd({ commit }, { params, facilityName }) {
    //   let result = await seriveFacility.facilityAdd(params, facilityName);
    //   //addPost是方法 result.data是传过去的参数
	  // commit("addPost",result.data)
    //   return result;
    // },

     //数据删除
    
    //数据渲染
    async getfacilityList({commit},{limit,page,name}){
      seriveFacility.getfacilityList(limit,page,name).then(res=>{
        console.log(res.data)
        // this.facilityList=res.data;
        //res.data就是seriveFacility.getfacilityList()传过来的数据
        commit("setFacilityList",res.data)
      })
    },
    //修改之数据展示
    
  },
};

serive文件：

//设备添加
import Axios from "./../utils/axios";
import api from "./../api/index";

//数据渲染 发起Axios请求
function getfacilityList(limit,page,name) {
  //api.apiFacility.facilityPage这里返回的是路由
  console.log(limit,page,name);
  //用Axios的post方法向api.apiFacility.facilityPage地址发起请求
  return Axios.post(api.apiFacility.facilityPage,{
    limit,page,name
  });
}

//添加 发起Axios请求
function facilityAdd(addForm) {
  //apiFacility文件里面的facilityAdd方法 Swagger调试里面该接口的请求方式是什么，这里的Axios请求就是什么方式
  return Axios.post(api.apiFacility.facilityAdd, addForm);
}

//删除 发起Axios请求
function facilityDelete(id) {
  console.log("serive中删除的id-"+id);
  return Axios.delete(api.apiFacility.facilityDelete+"?id="+id,{
    headers:{
      "Content-Type":"application/x-www-form-urlencoded;charset=UTF-8"
    }
  }
  );
}

//数据存放地点
function storageSite(){
  return Axios.get(api.apiFacility.storageSite);
}

//修改
function facilityUpdate(modifyForm){
return Axios.post(api.apiFacility.facilityUpdate,modifyForm);
}

export default {
  facilityAdd,
  getfacilityList,
  facilityDelete,
  facilityUpdate,
  storageSite,
};

utils文件：

import axios from 'axios'


const BASE_URL = "/api";
//通过create方法创建一个Axios实例
const Server = axios.create({
    baseURL: BASE_URL,
    timeout: 10000
})
Server.defaults.headers.post["Content-Type"] = "application/json;charset=utf-8";
Server.interceptors.request.use(config => {
    if (localStorage.getItem("token")) {
        config.headers['token'] = localStorage.getItem("token");
    }
    console.log("loading显示");
    return config
}, err => {
    return Promise.reject(err);
})

Server.interceptors.response.use(config => {
    return config;
}, err => {
    return Promise.reject(err);
})

export default Server;