简单使用VUE

 

首页代码

<template>
  <div class="index">
    <el-form :inline="true" :model="formInline" class="index-form">
      <el-form-item label="机构编码">
        <el-input v-model="formInline.bankId" placeholder="请输入机构编码"></el-input>
      </el-form-item>
      <el-form-item label="机构类型">
        <el-select v-model="formInline.bankName" placeholder="请选择机构类型">
          <el-option label="银行" value="银行"></el-option>
          <el-option label="公司" value="公司"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">查询</el-button>
        <el-button @click="addBox"> <i class="el-icon-plus"></i> 添加</el-button>
      </el-form-item>
    </el-form>
    <el-table class="index-table" :data="tableData" border style="width: 50%">
      <el-table-column prop="bankId" label="机构编码"> </el-table-column>
      <el-table-column prop="bankName" label="机构名称"> </el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button @click="updateBox(scope.row)" type="text" size="small"
            >编辑</el-button
          >
          <el-button type="text" size="small" @click="del(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="index-page"
      :page-sizes="[3, 5, 10, 20]"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-size="count"
      layout="total, sizes, prev, pager, next, jumper"
      :total="sumCount">
    </el-pagination>
    <add @addData="addData" v-if="addShow" @close="closeAdd"></add>
    <update @updateData="updateData" v-if="updateShow" @close="closeUpdate" :updateDatas="updateDatas"></update>
  </div>
</template>

VUE引用部分

<script>
import add from '../components/add.vue'
import update from '../components/update.vue'
export default {
  name: "Index",
  components: {
    add,
    update
  },
  data() {
    return {
      tableData: [],
      formInline: {
          bankId: '',
          bankName: ''
      },
      count: 10,
      sumCount: 0,
      pageNum: 1,
      addShow: false,
      updateShow: false,
      updateDatas: []
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    async getData() {
      let obj = {
        bankId: this.formInline.bankId,
        bankName: this.formInline.bankName,
        pageNum: this.pageNum,
        count: this.count
      }
      const res = await this.$getAPI.getBankList(obj);
      this.tableData = res.data;
      this.sumCount = res.sumCount
      console.log(res);
    },
    // 查询
    search() {
      this.pageNum = 1;
      this.getData()
    },
    // 条数改变触发
    handleSizeChange(data) {
      this.count = data;
      this.getData()
    },
    // 页数改变触发
    handleCurrentChange(data) {
      this.pageNum = data;
      this.getData()
    },
    del (data) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.delData(data)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
    // 删除
    async delData(data) {
      let bankId = data.bankId;
      let res = await this.$getAPI.delBankList({bankId})
      if (res.code === 1) {
        this.$message({
        type: 'success',
        message: '删除成功!'
      });
      this.getData()
      }
      console.log(res)
    },
    async addData(data) {
      let res = await this.$getAPI.addBankList(data)
      console.log(res)
    },
    addBox() {
      this.addShow = true;
    },
    closeAdd() {
      this.addShow = false;
    },
    async updateData (data) {
      await this.$getAPI.upBankList(data)
      this.updateShow = false
    },
    updateBox(data) {
      this.updateDatas = data;
      this.updateShow = true;
    },
    closeUpdate() {
      this.updateShow = false
    }
  },
};
</script>

<style lang="less" scoped>
.index {
  &-table, &-form, &-page {
    width: 50%;
    margin: 0 auto;
  }
}
</style>

调用接口

import { get, post } from './request'
export default {
    getBankList: params => get('/nodeApi/getBankList', params), //获取数据
    delBankList: params => get('/nodeApi/delBankList', params), //删除数据
    addBankList: params => post('/nodeApi/addBankList', params), //添加数据
    upBankList: params => get('/nodeApi/upBankList', params), //修改数据
}

添加部分

<template>
  <el-dialog title="增加机构信息" :visible="true" @close="close">
    <el-form :model="form">
      <el-form-item label="机构编码">
        <el-input v-model="form.bankId" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="机构名称">
        <el-input v-model="form.bankName" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="addSubmit"
        >确 定</el-button
      >
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: "add",
  props: ['show'],
  data() {
      return {
          form: {
              bankId: '',
              bankName: ''
          },
      }
  },
  methods: {
      addSubmit() {
          this.$emit('addData', this.form)
      },
      close() {
          this.$emit('close', true)
      }
  }
};
</script>

<style>
</style>

更新部分

<template>
  <el-dialog title="修改机构信息" :visible="true" @close="close">
    <el-form :model="form">
      <el-form-item label="机构编码">
        {{form.bankId}}
      </el-form-item>
      <el-form-item label="机构名称">
        <el-input v-model="form.bankName" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="updateSubmit"
        >确 定</el-button
      >
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: "update",
  props: ['updateDatas'],
  data() {
      return {
          form: {
              bankId: '',
              bankName: ''
          },
      }
  },
  mounted() {
    this.form = this.updateDatas;
  },
  methods: {
      updateSubmit() {
          this.$emit('updateData', this.form)
      },
      close() {
          this.$emit('close', true)
      }
  }
};
</script>

<style>
</style>