基于avue-crud编辑窗体自定义弹出表格选择器用法
基于avue-crud编辑窗体自定义弹出表格选择器用法显示效果图如下所示：<el-dialog title="选择农户":visible.sync="showDialog_select_nh"dialogClickModal="false"append-to-bodystyle="width:130%;height:80%;"><s
·
基于avue-crud编辑窗体自定义弹出表格选择器用法
显示效果图如下所示：
<el-dialog title="选择农户"
:visible.sync="showDialog_select_nh"
dialogClickModal="false"
append-to-body
style="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 = val
this.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>
前往低代码交流专区
更多推荐
1
0- 0
已为社区贡献5条内容
所有评论(0)