avue"/>
基于avue
基于avue-crud编辑窗体自定义弹出表格选择器用法
显示效果图如下所示：
<el-dialog title="选择农户" :visible.sync="showDialog_select_nh" dialogClickModal="false" append-to-bodystyle="width:130%;height:80%;"> <selectNhView ref="selectNhView" :zjddm="zjddm" :selected_row="selected_row_nh"></selectNhView></el-dialog>
column: [{label: "选择农户",prop: "nhdm",maxlength: 22,clearable: false,disabled: true,span: 12, type: 'input',append:'选择',appendClick:()=>{ var that=this;////if(that.form.nhdm && that.form.nhdm.length<=0) { that.showDialog_select_nh=true;setTimeout(function(){that.$refs.selectNhView.initForm();},200);} },props: {label: 'nhdm',value: 'nhdm'},mock:{type: 'word',min: 0,max: 22,},rules: [{required: true,message: '不能为空',trigger: 'blur',},],},
选中回传参数并关闭弹窗
//selected_row_nh(row){if(row!=null){this.form.suyqrdm=row.suyqrdm;this.form.shyqrdbxm=row.hzxm;this.form.shyqrdbzjlx=row.hzzjlx;this.form.shyqrdbzjhm=row.hzzjhm;this.form.dz=row.txdz;this.form.nhdm=row.nhdm;setTimeout(function(){this.form.nhdm=row.nhdm;},100);}this.showDialog_select_nh=false; },
弹窗表格select_nh.vue页面
<template><el-container><el-main><avue-crud ref="crud" :option="option" v-model="form" :data.sync="tableData" :search.sync="search":page.sync="page":before-open="beforeOpen":before-close="beforeClose"@search-change="searchChange"@refresh-change="refreshChange"@current-change="currentChange"@row-click="rowClick"@row-dblclick="row2Click"> </avue-crud> <el-row> <el-col :span="20">当前选中行: <span style="color:red;">{{selected_nhdm}}-{{selected_hzxm}}</span></el-col><el-col :span="4"> <el-button size="small" @click.native="selectClick" icon="el-icon-share">确定</el-button><el-button size="small" @click.native="closeClick" icon="el-icon-share">取消</el-button></el-col></el-row></el-main></el-container>
</template>
<script>
import * as api from "@/api/ajax";
//import * as build from "@/api/build";
//import pubSub from "pubsub-js";
//
export default {name:"select_nh",props:{zjddm:String,selected_row:null,},data() {return {id:'',tableData: [],page: {pageSize: 20,currentPage: 1,total: 0,layout: 'total, pager, prev, next, jumper',background: false,},search:{//fieldname:'',hzxm:'',hzzjhm:'',},option: {card:false,highlightCurrentRow:true,//title:'d_nh',//titleSize:'h3',//titleStyle:{ color: 'red'},searchMenuSpan:4,searchShow:true,searchLabelWidth: 100,border: true,stripe:false,showHeader:true,columnBtn:false,menu:false,dialogDirection: 'rtl',dialogType: 'drawer',index: false,selection:false, align:'center',menuType:'icon',menuAlign:'center',size: 'small',height: '100%',dateBtn:false,dateDefault: false,excelBtn: false,viewBtn:false,addBtn:false,editBtn:false,delBtn:false,filterBtn:false,detail: false,labelWidth: 160,submitText: '保存',//mockBtn:false,//printBtn:false,submitBtn: false,emptyBtn: false, column: [{label: "编号",prop: "id",maxlength: 32,display: false,hide: false,search: false,sortable: true,width:100,fixed:false,//type:'select',//dicData: dict_id, },{label: "要素代码",prop: "ysdm",maxlength: 6,display: false,hide: true,search: false,sortable: true,width:100,fixed:false,//type:'select',//dicData: dict_ysdm, },{label: "所有权人代码",prop: "suyqrdm",maxlength: 18,display: false,hide: true,search: false,sortable: true,width:100,fixed:false,//type:'select',//dicData: dict_suyqrdm, },{label: "户主姓名",prop: "hzxm",maxlength: 100,display: false,hide: false,search: true,sortable: true,width:200,fixed:false,//type:'select',//dicData: dict_hzxm, },{label: "户主证件类型",prop: "hzzjlx",maxlength: 2,display: false,hide: false,search: false,sortable: true,width:150,fixed:false,type:'select',dicData: dicts_zt.ZJLX, },{label: "户主证件号码",prop: "hzzjhm",maxlength: 30,display: false,hide: false,search: true,sortable: true,width:200,fixed:false,//type:'select',//dicData: dict_hzzjhm, },{label: "农户代码",prop: "nhdm",maxlength: 22,display: false,hide: false,search: false,sortable: true,width:180,fixed:false,//type:'select',//dicData: dict_nhdm, },{label: "户内成员数量",prop: "hncysl",maxlength: 32,display: false,hide: false,search: false,sortable: true,width:120,fixed:false,//type:'select',//dicData: dict_hncysl, },{label: "通讯地址",prop: "txdz",maxlength: 254,display: false,hide: false,search: false,sortable: true,width:180,fixed:false,//type:'select',//dicData: dict_txdz, },{label: "是否五保户",prop: "sfwbh",maxlength: 1,display: false,hide: true,search: false,sortable: true,width:100,fixed:false,//type:'select',//dicData: dict_sfwbh, },{label: "是否贫困户",prop: "sfpkh",maxlength: 1,display: false,hide: true,search: false,sortable: true,width:100,fixed:false,//type:'select',//dicData: dict_sfpkh, },{label: "数据来源",prop: "sjly",maxlength: 2,display: false,hide: true,search: false,sortable: true,width:100,fixed:false,//type:'select',//dicData: dict_sjly, },{label: "备注",prop: "bz",maxlength: 254,display: false,hide: true,search: false,sortable: true,width:100,fixed:false,//type:'select',//dicData: dict_bz, },{label: "业务流水号",prop: "ywlsh",maxlength: 50,display: false,hide: true,search: false,sortable: true,width:100,fixed:false,//type:'select',//dicData: dict_ywlsh, },{label: "创建时间",prop: "cjsj",maxlength: 8,display: false,hide: true,search: false,sortable: true,width:100,fixed:false,//type:'select',//dicData: dict_cjsj, },{label: "数据状态(1删除、0正常)",prop: "is_del",maxlength: 1,display: false,hide: true,search: false,sortable: true,width:100,fixed:false,//type:'select',//dicData: dict_is_del, },{label: "转入转出类型(转入,转出,互换)",prop: "zrzclx",maxlength: 50,display: false,hide: true,search: false,sortable: true,width:100,fixed:false,//type:'select',//dicData: dict_zrzclx, },{label: "删除原因",prop: "del_yy",maxlength: 255,display: false,hide: true,search: false,sortable: true,width:100,fixed:false,//type:'select',//dicData: dict_del_yy, },{label: "更新时间",prop: "update_time",maxlength: 8,display: false,hide: true,search: false,sortable: true,width:100,fixed:false,//type:'select',//dicData: dict_update_time, },{label: "关联外键（组代码+户主姓名)",prop: "r_key",maxlength: 255,display: false,hide: true,search: false,sortable: true,width:100,fixed:false,//type:'select',//dicData: dict_r_key, },{label: "关联调查的农户代码",prop: "r_nhdm",maxlength: 255,display: false,hide: true,search: false,sortable: true,width:100,fixed:false,//type:'select',//dicData: dict_r_nhdm, },],group: [{label: '调查农户',collapse:true,arrow:false,prop: 'd_nh',icon: 'el-icon-edit-outline',column: [ {label: "户主姓名",prop: "hzxm",maxlength: 100,clearable: false,disabled: false,span: 12, type: 'input',//dicData:dict_hzxm//append:'生成',//appendClick:()=>{//},mock:{type: 'word',min: 0,max: 100,},rules: [{required: true,message: '不能为空',trigger: 'blur',},],},{label: "户主证件类型",prop: "hzzjlx",maxlength: 2,clearable: false,disabled: false,span: 12, type: 'select',dicData:dicts_zt.ZJLX,//append:'生成',//appendClick:()=>{//},mock:{type: 'word',min: 0,max: 2,},rules: [{required: true,message: '不能为空',trigger: 'blur',},],},{label: "户主证件号码",prop: "hzzjhm",maxlength: 30,clearable: false,disabled: false,span: 12, type: 'input',//dicData:dict_hzzjhm//append:'生成',//appendClick:()=>{//},mock:{type: 'word',min: 0,max: 30,},rules: [{required: true,message: '不能为空',trigger: 'blur',},],},{label: "通讯地址",prop: "txdz",maxlength: 254,clearable: false,disabled: false,span: 12, type: 'input',//dicData:dict_txdz//append:'生成',//appendClick:()=>{//},mock:{type: 'word',min: 0,max: 254,},rules: [{required: true,message: '不能为空',trigger: 'blur',},],},{label: "户内成员数量",prop: "hncysl",maxlength: 32,clearable: false,disabled: false,span: 12, type: 'number',precision: 0,rules: [{required: true,message: '不能为空',trigger: 'blur',},],},{label: "数据来源",prop: "sjly",maxlength: 2,clearable: false,disabled: false,span: 12, type: 'select',dicData:dicts_zt.SJLY,//append:'生成',//appendClick:()=>{//},mock:{type: 'word',min: 0,max: 2,},rules: [{required: true,message: '不能为空',trigger: 'blur',},],},{label: "是否五保户",prop: "sfwbh",maxlength: 1,clearable: false,disabled: false,span: 12, type: 'select',dicData:dicts_zt.SF,//append:'生成',//appendClick:()=>{//},mock:{type: 'word',min: 0,max: 1,},rules: [{required: false,message: '不能为空',trigger: 'blur',},],},{label: "是否贫困户",prop: "sfpkh",maxlength: 1,clearable: false,disabled: false,span: 12, type: 'select',dicData:dicts_zt.SF,//append:'生成',//appendClick:()=>{//},mock:{type: 'word',min: 0,max: 1,},rules: [{required: false,message: '不能为空',trigger: 'blur',},],},{label: "备注",prop: "bz",maxlength: 254,clearable: false,disabled: false,span: 12, type: 'input',//dicData:dict_bz//append:'生成',//appendClick:()=>{//},mock:{type: 'word',min: 0,max: 254,},rules: [{required: false,message: '不能为空',trigger: 'blur',},],},{label: "农户代码",prop: "nhdm",maxlength: 22,clearable: false,disabled: true,span: 12, type: 'input',//dicData:dict_nhdm//append:'生成',//appendClick:()=>{//},mock:{type: 'word',min: 0,max: 22,},rules: [{required: false,message: '不能为空',trigger: 'blur',},],},{label: "所有权人代码",prop: "suyqrdm",maxlength: 18,clearable: false,disabled: true,span: 12, type: 'input',//dicData:dict_suyqrdm//append:'生成',//appendClick:()=>{//},mock:{type: 'word',min: 0,max: 18,},rules: [{required: true,message: '不能为空',trigger: 'blur',},],},{label: "编号",prop: "id",maxlength: 32,clearable: false,disabled: true,span: 12, type: 'number',precision: 0,rules: [{required: false,message: '不能为空',trigger: 'blur',},],},{label: "要素代码",prop: "ysdm",maxlength: 6,clearable: false,disabled: true,span: 12, type: 'input',//dicData:dict_ysdm//append:'生成',//appendClick:()=>{//},mock:{type: 'word',min: 0,max: 6,},rules: [{required: true,message: '不能为空',trigger: 'blur',},],},],},{label: '附加信息',collapse:true,arrow:false,prop: 'd_nh_fj_info',icon: 'el-icon-edit-outline',column: [{label: "业务流水号",prop: "ywlsh",maxlength: 50,clearable: false,disabled: true,span: 12, type: 'input',//dicData:dict_ywlsh//append:'生成',//appendClick:()=>{//},mock:{type: 'word',min: 0,max: 50,},rules: [{required: false,message: '不能为空',trigger: 'blur',},],},{label: "创建时间",prop: "cjsj",maxlength: 8,clearable: false,disabled: false,span: 12, type: 'datetime',format:'yyyy-MM-dd hh:mm:ss',valueFormat:'yyyy-MM-dd hh:mm:ss',mock:{type:'datetime',format:'yyyy-MM-dd hh:mm:ss',now:true,},rules: [{required: false,message: '不能为空',trigger: 'blur',},],},{label: "删除状态",prop: "is_del",maxlength: 1,clearable: false,disabled: false,span: 12, type: 'select',dicData:dicts_zt.SF,//append:'生成',//appendClick:()=>{//},mock:{type: 'word',min: 0,max: 1,},rules: [{required: false,message: '不能为空',trigger: 'blur',},],},{label: "转入转出类型",prop: "zrzclx",maxlength: 50,clearable: false,disabled: true,span: 12, type: 'input',//dicData:dict_zrzclx//append:'生成',//appendClick:()=>{//},mock:{type: 'word',min: 0,max: 50,},rules: [{required: false,message: '不能为空',trigger: 'blur',},],},{label: "删除原因",prop: "del_yy",maxlength: 255,clearable: false,disabled: false,span: 12, type: 'input',//dicData:dict_del_yy//append:'生成',//appendClick:()=>{//},mock:{type: 'word',min: 0,max: 255,},rules: [{required: false,message: '不能为空',trigger: 'blur',},],},{label: "更新时间",prop: "update_time",maxlength: 8,clearable: false,disabled: false,span: 12, type: 'datetime',format:'yyyy-MM-dd hh:mm:ss',valueFormat:'yyyy-MM-dd hh:mm:ss',mock:{type:'datetime',format:'yyyy-MM-dd hh:mm:ss',now:true,},rules: [{required: false,message: '不能为空',trigger: 'blur',},],},{label: "关联外键",prop: "r_key",maxlength: 255,clearable: false,disabled: true,span: 12, type: 'input',//dicData:dict_r_key//append:'生成',//appendClick:()=>{//},mock:{type: 'word',min: 0,max: 255,},rules: [{required: false,message: '不能为空',trigger: 'blur',},],},{label: "关联调查的农户代码",prop: "r_nhdm",maxlength: 255,clearable: false,disabled: true,span: 12, type: 'input',//dicData:dict_r_nhdm//append:'生成',//appendClick:()=>{//},mock:{type: 'word',min: 0,max: 255,},rules: [{required: false,message: '不能为空',trigger: 'blur',},],},],},],},form: {id: 0, ysdm: "", suyqrdm: "", hzxm: "", hzzjlx: "", hzzjhm: "", txdz: "", hncysl: 0, sfwbh: "", sfpkh: "", sjly: "", bz: "", nhdm: "", ywlsh: "", cjsj: null, is_del: "", zrzclx: "", del_yy: "", update_time: null, r_key: "", r_nhdm: "", },selected_row_nh:null,selected_nhdm:'',selected_hzxm:'',}}, methods: { goBack() {this.$router.go(-1);},init() { this.initTablePage();},async initTablePage(){var that = this;//var t_suyqrdm=api.GetSubStr(that.zjddm,0,18);that.form.suyqrdm=t_suyqrdm; //debugger;var sql = "select * from d_nh where nhdm like '" + t_suyqrdm+"%' " ;sql+=" and hzxm like '%"+that.search.hzxm+"%'";sql+=" and hzzjhm like '%"+that.search.hzzjhm+"%'";var r=await api.getDataPage_sql_tb(sql,that.page.pageSize,that.page.currentPage); if (r.data.success && r.data.data && r.data.data.rows.length > 0) {that.tableData = r.data.data.rows;that.page.total = r.data.data.total;}else{that.tableData=[];that.page.total=0;}},//initForm(){var that=this;//that.init();//this.selected_nhdm="";this.selected_hzxm="";},shareClick(){},searchChange(params, done) {this.init();done();//this.$message.success(JSON.stringify(params));},refreshChange(val) {this.init();},currentChange(val) {this.page.currentPage = valthis.init();},beforeOpen(done,type){var that = this;//var t_suyqrdm=api.GetSubStr(that.zjddm,0,18);that.form.suyqrdm=t_suyqrdm;that.form.ysdm="221020";that.form.hzzjlx="01";that.form.sfwbh="0";that.form.sfpkh="0";that.form.sjly="08";that.form.is_del="0";//var t_xzqdm=api.GetSubStr(that.zjddm,0,12);api.getXzqNameFull(t_xzqdm,function(fullName){that.form.txdz=fullName;});//done();},beforeClose(done,type){done();},//=====================================rowClick(row){this.selected_row_nh=row;//this.selected_nhdm=row.nhdm;this.selected_hzxm=row.hzxm;////this.$refs.crud.setCurrentRow(row);//this.$refs.crud.toggleSelection([row]);//this.$refs.crud.refreshTable();},row2Click(row){this.selected_row_nh=row;//this.selected_nhdm=row.nhdm;this.selected_hzxm=row.hzxm;//if(this.selected_row){this.selected_row(this.selected_row_nh);}//this.$refs.crud.setCurrentRow(row);},selectClick(){if(this.selected_row_nh==null){this.$message("请先选择一个农户");return;}if(this.selected_row){this.selected_row(this.selected_row_nh);}},closeClick(){this.selected_row(null);},//======================================},
}
</script>更多推荐
基于avue
发布评论