1.html

<table class="table table-hover">
    <thead>
      <tr>
		<th style="width: 50px;" id="cts">
		<div class="checkbox d-inline">
		     <input type="checkbox" name="fhcheckbox" id="zcheckbox">
		     <label  style="max-height: 12px;" for="zcheckbox" class="cr"></label>
		     </div>
				</th>
		<th style="width: 50px;">NO</th>
		<th>名稱</th>
		<th>許可權標識</th>
		<th>備註</th>
		<th>操作</th>
		</tr>
       </thead>
	<tbody>
		<!-- 開始迴圈 -->	
		<template v-for="(data,index) in varList">
		<tr>
			<td><div class="checkbox d-inline"><input type="checkbox" v-bind:id="'zcheckbox'+index" name='ids' v-bind:value="data.FHBUTTON_ID"<label  style="max-height: 12px;" v-bind:for="'zcheckbox'+index" class="cr"></label></div>
			</td>
			<td scope="row">{{page.showCount*(page.currentPage-1)+index+1}}</td>
			<td>{{data.NAME}}</td>
			<td>{{data.SHIRO_KEY}}</td>
			<td>{{data.BZ}}</td>
			<td>
				<a v-show="edit" title="修改" v-on:click="goEdit(data.FHBUTTON_ID);" style="cursor:pointer;"><i class="feather icon-edit-2"></i></a>
				<a v-show="del" title="刪除" v-on:click="goDel(data.FHBUTTON_ID);" style="cursor:pointer;"><i class="feather icon-x"></i></a>
			</td>
		</tr>
		</template>
		<tr v-show="varList.length==0">
			<td colspan="10">沒有相關資料</td>
		</tr>
	</tbody>
   </table>
 

2.js程式碼

var vm = new Vue({
	el: '#app',
	
	data:{
		varList: [],	//list
		page: [],		//分頁類
		pd: []			//map
    },
    
	methods: {
		
        //初始執行
        init() {
        	//複選框控制全選,全不選 
    		$('#zcheckbox').click(function(){
	    		 if($(this).is(':checked')){
	    			 $("input[name='ids']").click();
	    		 }else{
	    			 $("input[name='ids']").attr("checked", false);
	    		 }
    		});
    		this.getList();
        },
        
        //獲取列表
        getList: function(){
        	this.loading = true;
        	$.ajax({
        		xhrFields: {
                    withCredentials: true
                },
        		type: "POST",
        		url: httpurl+'fhbutton/list?showCount='+this.showCount+'&currentPage='+this.currentPage,
        		data: {KEYWORDS:this.pd.KEYWORDS,tm:new Date().getTime()},
        		dataType:"json",
        		success: function(data){
        		 if("success" == data.result){
        			 vm.varList = data.varList;
        			 vm.page = data.page;
        			 vm.pd = data.pd;
        			 vm.hasButton();
        			 vm.loading = false;
        			 $("input[name='ids']").attr("checked", false);
        		 }else if ("exception" == data.result){
                 	showException("按鈕模組",data.exception);//顯示異常
                 }
        		}
        	}).done().fail(function(){
                swal("登入失效!", "請求伺服器無響應，稍後再試", "warning");
                setTimeout(function () {
                	window.location.href = "../../login.html";
                }, 2000);
            });
        }
 
		
	},
	
	mounted(){
        this.init();
    }
})
 

3.後臺程式碼

package org.fh.controller.system;

import java.util.HashMap;
import java.util.List;
import java.util.Map;

import org.apache.shiro.authz.annotation.RequiresPermissions;
import org.fh.controller.base.BaseController;
import org.fh.entity.Page;
import org.fh.entity.PageData;
import org.fh.service.system.FHlogService;
import org.fh.service.system.FhButtonService;
import org.fh.util.Jurisdiction;
import org.fh.util.Tools;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

/**
 * 說明：按鈕管理處理類
 * 作者：FH Admin
 * from：fhadmin.cn
 */
@Controller
@RequestMapping("/fhbutton")
public class FhbuttonController extends BaseController {
	
	@Autowired
	private FhButtonService fhButtonService;
	@Autowired
    private FHlogService FHLOG;
	
	/**列表
	 * @param page
	 * @throws Exception
	 */
	@RequestMapping(value="/list", produces="application/json;charset=UTF-8")
	@RequiresPermissions("fhbutton:list")
	@ResponseBody
	public Object list(Page page) throws Exception{
		Map<String,Object> map = new HashMap<String,Object>();
		String errInfo = "success";
		PageData pd = new PageData();
		pd = this.getPageData();
		String KEYWORDS = pd.getString("KEYWORDS");				//關鍵詞檢索條件
		if(Tools.notEmpty(KEYWORDS)){
			pd.put("KEYWORDS", KEYWORDS.trim());
		}
		page.setPd(pd);
		List<PageData>	varList = fhButtonService.list(page);	//列出Fhbutton列表
		map.put("varList", varList);
		map.put("page", page);
		map.put("pd", pd);
		map.put("result", errInfo);
		return map;
	}

}
 

 ​-----------------------------------------------------------------自定義表單
28. 定義模版：拖拽左側表單元素到右側區域，編輯表單元素，儲存表單模版
29. 表單模版：編輯維護表單模版，複製表單模版，修改模版型別，預覽表單模版
30. 我的表單：選擇表單模版，編輯表單規則，是否上傳圖片、附件、開啟富文字、掛靠流程開關等
31. 表單資料：從我的表單進去可增刪改查表單資料，修改表單規則
32. 掛靠記錄：記錄表單資料和流程例項ID關聯記錄，可刪除