1、用vue加饿了么UI制作模板页面

代码如下

<template>
  <div class="normal-container">
    <div class="search-form">
      <el-form :model="searchForm" label-width="100px">
        <el-row>
          <el-col :span="4" v-for="(item,index) in search">
            <el-form-item :label="item">
              <el-input
                placeholder="请输入"
                v-model="searchForm[index]"
                clearable>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <el-form-item>
              <el-button type="primary" class="search-btn" @click="getList(1)">搜索</el-button>
            </el-form-item>
          </el-col>
          <el-col :span="2" style="float:right">
            <el-button type="primary" class="search-btn" @click="addView()">新增</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <div class="content-container">
      <div class="mian-table">
        <!--        序号 日期 日用电量（kw·h） 日用水量（m³）-->
        <el-row>
          <el-table v-loading="loading" :data="list">
            <el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
            <el-table-column v-for="(item,index) in table" :prop="index" :label="item" align="center"
                             :show-overflow-tooltip="true"></el-table-column>
            <el-table-column label="操作" width="250" align="center">
              <template slot-scope="scope">
                <el-button @click="view(scope.row[tableKey])">修改</el-button>
                <el-button @click="del(scope.row[tableKey])">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            align='right'
            layout="total, prev, pager, next, jumper"
            @current-change="getList"
            :current-page.sync="searchForm.page"
            :page-size="searchForm.limit"
            :total="total">
          </el-pagination>
        </el-row>
      </div>
    </div>

    <el-dialog :title="dialog.title" :visible.sync="dialog.visible" class="dialog-layer">
      <el-form ref="form" :model="dialog.form" label-width="80px" style="text-align:center">
        <el-form-item v-for="(item,index) in table" :label="item">
          <el-input v-model="dialog.form[index]"></el-input>
        </el-form-item>
        <el-button type="primary" @click="save()">{{dialog.buttonName}}</el-button>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>

export default {
  name: 'VoiceBroadcastType',
  components: {
  },
  data() {
    return {
      urlData:{
        sysUcenterDict:{
          getTable:"/zhgd/dict/sysUcenterDict/getBeanMessage",
          getList:"/zhgd/dict/sysUcenterDict/getList",
          findForm:"/zhgd/dict/sysUcenterDict/getList",
          save:"/zhgd/dict/sysUcenterDict/add",
          del:"/zhgd/dict/sysUcenterDict/del",
        },
        voiceBroadcastType:{
          getTable:"/zhgd/dict/voiceBroadcastType/getBeanMessage",
          getList:"/zhgd/dict/voiceBroadcastType/getList",
          findForm:"/zhgd/dict/voiceBroadcastType/getList",
          save:"/zhgd/dict/voiceBroadcastType/add",
          del:"/zhgd/dict/voiceBroadcastType/del",
        },
        approvalSpecialType:{
          getTable:"/zhgd/dict/approvalSpecialType/getBeanMessage",
          getList:"/zhgd/dict/approvalSpecialType/getList",
          findForm:"/zhgd/dict/approvalSpecialType/getList",
          save:"/zhgd/dict/approvalSpecialType/add",
          del:"/zhgd/dict/approvalSpecialType/del",
        }
      },
      url:{},
      search:{},
      loading: true,
      table: {},
      tableKey:"id",
      list: [],
      total: 0,
      searchForm: {
        page: 1,
        limit: 15,
      },
      pickerOptions0: { // 选择今天以及今天之前的日期
        disabledDate(time) {
          return time.getTime() > Date.now() - 8.64e6;//如果没有后面的-8.64e6就是不可以选择今天的
        }
      },
      dialog: {
        buttonName: "修改",
        title: '',
        visible: false,
        form: {
        }
      },
    }
  },
  mounted() {
    this.initTableData();
    this.initSearchForm();
  },
  methods: {
    initSearchForm() {
      for (var key in this.search) {
        this.searchForm[key]="";
      }
    },
    initTableData() {
      this.getUrl();
      this.getTable();
      this.getList(1)
    },
    getUrl() {
      this.url=this.urlData[this.GetQueryString("table")];
    },
    getTable() {
      this.$http.get(this.url.getTable).then((res) => {
        if (res.data.success) {
          this.table = res.data.data.table;
          this.search=res.data.data.search;
          if(res.data.data.tableKey!==undefined){
            this.tableKey=res.data.data.tableKey
          }
          console.log(this.tableKey);
        } else {
          this.$message({showClose: true, message: res.data.msg, type: 'warning'});
        }
      });
    },
    getList(page) {
      this.loading = true;
      this.searchForm.page = page;
      this.$http.post(this.url.getList, this.searchForm).then((res) => {
        if (res.data.success) {
          this.total = res.data.count;
          this.list = res.data.data;
        } else {
          this.total = 0;
          this.list = [];
          this.$message({showClose: true, message: res.data.msg, type: 'warning'});
        }
        this.loading = false;
      });
    },
    view(id) {
      console.log(id)
      this.dialog.title = "详情";
      this.findForm(id);
    },
    findForm(id) {
      this.initFrom();
      var fromTable={};
      fromTable[this.tableKey]=id;
      this.$http.post(this.url.findForm, fromTable).then((res) => {
        if (res.data.success) {
          this.dialog.buttonName="修改";
          this.dialog.visible = true;
          this.dialog.form = res.data.data[0];
        } else {
          this.$message({showClose: true, message: res.data.msg, type: 'warning'});
        }
      });
    },
    initFrom() {
      for (var key in this.dialog.form) {
        this.dialog.form[key]="";
      }
    },
    addView(){
      this.initFrom();
      this.dialog.buttonName="保存";
      this.dialog.visible = true;
    },
    save() {
      this.$http.post(this.url.save, this.dialog.form).then((res) => {
        if (res.data.success) {
          this.dialog.visible = false;
          this.getList(1);
          this.$message({
            message: '保存成功',
            type: 'success'
          });
        } else {
          this.$message({showClose: true, message: res.data.msg, type: 'warning'});
        }
      });
    },
    del(id) {
      var fromTable={};
      fromTable[this.tableKey]=id;
      this.$http.delete(this.url.del, {body: fromTable}).then((res) => {
        if (res.data.success) {
          this.getList(1);
          this.$message({
            message: '删除成功',
            type: 'success'
          });
        } else {
          this.$message({showClose: true, message: res.data.msg, type: 'warning'});
        }
      });
    },
    //获取URL参数
    GetQueryString(name){
      var reg=new RegExp('(^|&)'+name+'=([^&]*)(&|$)');
      var result=window.location.search.substr(1).match(reg);
      return result ? decodeURIComponent(result[2]):null;
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
/* .el-date-editor.el-input, .el-date-editor.el-input__inner {
  width: 176px;
} */
</style>

2、编写模板页面初始化接口和查询、删除、保存接口

示例代码如下（这里只写了controller层作为示例）

@RestController
@RequestMapping("/zhgd/dict/attnBankCode")
public class AttnBankCodeRest {
    @Autowired
    private AttnBankCodeService attnBankCodeService;

    @GetMapping("/getBeanMessage")
    public Result<Map<String,Object>> getBeanMessage(){
        //初始化搜索字段
        Map<String,String> search=new HashMap<>();
        search.put("name","名称");
        //初始化表格字段和列名
        Map<String,String> table=new HashMap<>();
        table.put("code","主键编码");
        table.put("name","名称");
        table.put("orders","排序");
        //整合
        Map<String,Object> map=new HashMap<>();
        map.put("search",search);
        map.put("table",table);
        //指定表的主键，不写的话默认为“id”
        map.put("tableKey","code");
        return Result.createBySuccess(map);
    }

    @PostMapping("/getList")
    public Result<List<ZhgdDictAttnBankCode>> getList(@RequestBody ZhgdDictAttnBankCodeQuery zhgdDictAttnBankCodeQuery){
        return attnBankCodeService.list(zhgdDictAttnBankCodeQuery);
    }

    @PostMapping("/add")
    public Result add(@RequestBody ZhgdDictAttnBankCode zhgdDictAttnBankCode){
        if( zhgdDictAttnBankCode.getCode() == null
                || zhgdDictAttnBankCode.getName() == null
                || zhgdDictAttnBankCode.getOrders() == null ){
            return Result.createByError(400,"参数不完整");
        }
        attnBankCodeService.add(zhgdDictAttnBankCode);
        return Result.createBySuccess();
    }

    @DeleteMapping("/del")
    public Result del(@RequestBody ZhgdDictAttnBankCode zhgdDictAttnBankCode){
        if( zhgdDictAttnBankCode.getCode() == null || "".equals(zhgdDictAttnBankCode.getCode()) ){
            return Result.createByError(400,"参数不完整");
        }
        attnBankCodeService.del(zhgdDictAttnBankCode);
        return Result.createBySuccess();
    }
}

3、在模板页面的urlData中添加编写好的初始化接口和查询、删除、保存接口

添加示例可参考上图的模板页面代码或如下代码：

urlData:{
        //字典表名
        sysUcenterDict:{
		  //初始化接口
          getTable:"/zhgd/dict/sysUcenterDict/getBeanMessage",
		  //列表数据获取接口
          getList:"/zhgd/dict/sysUcenterDict/getList",
		  //查询接口
          findForm:"/zhgd/dict/sysUcenterDict/getList",
		  //保存接口
          save:"/zhgd/dict/sysUcenterDict/add",
		  //删除接口
          del:"/zhgd/dict/sysUcenterDict/del",
        },
        voiceBroadcastType:{
          getTable:"/zhgd/dict/voiceBroadcastType/getBeanMessage",
          getList:"/zhgd/dict/voiceBroadcastType/getList",
          findForm:"/zhgd/dict/voiceBroadcastType/getList",
          save:"/zhgd/dict/voiceBroadcastType/add",
          del:"/zhgd/dict/voiceBroadcastType/del",
        },
        approvalSpecialType:{
          getTable:"/zhgd/dict/approvalSpecialType/getBeanMessage",
          getList:"/zhgd/dict/approvalSpecialType/getList",
          findForm:"/zhgd/dict/approvalSpecialType/getList",
          save:"/zhgd/dict/approvalSpecialType/add",
          del:"/zhgd/dict/approvalSpecialType/del",
        }
      },

4、访问方式

当前模板页面的url 拼接上 ?model=”字典表名”