<!-- -->
<template>
<div class="xxx">
<!-- <a-range-picker
:placeholder="['Start month', 'End month']"
format="YYYY-MM"
:value="value"
:mode="mode2"
:open="open_"
@panelChange="handlePanelChange2"
@change="handleChange"
/> -->
<br/>
<p-QueryCard :eventPool="eventPool" :formDataList="QueryCardConfig.formDataList" :tableConfig="tableConfig" :config="QueryCardConfig.config" :queryBtnList="QueryCardConfig.queryBtnList">
<template v-slot:titleIcon>标题图标插槽</template>
<template v-slot:table>dddddddd</template>
<span slot="esContent" slot-scope="{data}">
<!-- {{data.text}}--{{data}} -->
{{data.text}}
</span>
<template slot="title" slot-scope="{data}">{{data}}</template>
<template slot="footer" slot-scope="{data}">{{data}}</template>
</p-QueryCard>
</div>
</template>
<script>
import Pbutton from './component1/test.vue'
export default {
name: 'index',
components: {},
props: {
// handA: {
// type: String,
// required: true,
// default: '100'
// }
},
data() {
// 这里存放数据
return {
mode1: 'time',
mode2: ['month', 'month'],
value: [],
open_:true,
QueryCardConfig:{
config:{
/**
* 整个组件的最外层设置 包括 外围样式 等
*/
PageCardConfig: {
// 表示是否显示外围边框
isCardBorder: true,
// 头部下的边框
isHeadBottomBorder: true,
// card-body 的样式 class
bodyClass: "",
// card-body 的样式 style
bodyStyle: {
width: "100%",
display: "flex",
"justify-content": "center",
"align-items": "center",
"margin-top":"10px",
},
// 表示是否显示阴影 always 表示一直显示 hover 表示鼠标移动上面时显示 never 表示不显示
shadow: "never",
style: { margin: "10px", width: "95%" },
},
/**
* 顶部标题设置
*/
headerConfig:{
show:true,
// 是否显示查询条件的分割线
isDefaultHeadBottomBorder: false,
// title:{
// icon:'', // bars
// label:'这是标题',
// labelClass:'',
// labelStyle:{ color: '#000000','font-size':'20px'},
// },
// backBtn:{
// show:true,
// icon:'left',
// btnType:'',
// label:'返回'
// }
},
// xs <576px sm ≥576px md ≥768px lg ≥992px xl ≥1200px xxl ≥1600px
layouttDefault:{ rowNum: 1, columnNum: 4, rowGap: "1px",rowHeight:'50px', coliumnGap: "10px", labelCol: { xs: 12, sm: 12, md: 10, lg: 10, xl:10, xxl:10 }, wrapperCol: { xs: 12, sm: 12, md: 12, lg: 12, xl:12, xxl:12}},
layouttOther:{
labelCol: { xs: 12, sm: 12, md: 10, lg: 10, xl:10, xxl:10 },
wrapperCol: { xs: 12, sm: 12, md: 12, lg: 12, xl:12, xxl:12}
}
},
queryBtnList:[{btnKey:'cloudDownload',label:'下载',icon:'cloud-download',btnType:'',disabled:false}],
formDataList:[
{ enName:'userName1', cnName:'用户名1', type:'input',value:'默认值1',numRowsOccupied: 1, numColumnOccupied: 1 ,formItemAttr:{},itemAttr:{},},
{ enName:'userName2', cnName:'用户名2', type:'select',value:'',optionList:[{label:'测试1',value:'1'},{label:'测试2',value:'2'},{label:'测试3',value:'3'},],numRowsOccupied: 1, numColumnOccupied: 1 ,formItemAttr:{},itemAttr:{},isChangeEvent:true},
{ enName:'userName3', cnName:'选择月份', type:'rangePicker',value:[],numRowsOccupied: 1, numColumnOccupied: 1 ,formItemAttr:{},itemAttr:{format:'YYYY-MM',mode:['month', 'month']},},
{ enName:'userName4', cnName:'选择日期', type:'rangePicker',value:[],numRowsOccupied: 1, numColumnOccupied: 1 ,formItemAttr:{},itemAttr:{},},
{ enName:'userName5', cnName:'用户名5', type:'input',value:'',numRowsOccupied: 1, numColumnOccupied: 1 ,formItemAttr:{},itemAttr:{},},
{ enName:'userName6', cnName:'用户名6', type:'input',value:'',numRowsOccupied: 1, numColumnOccupied: 1 ,formItemAttr:{},itemAttr:{},},
{ enName:'userName7', cnName:'用户名7', type:'custom',value:'userName7', componentName:'Pbutton', componentItem:Pbutton,numRowsOccupied: 1, numColumnOccupied: 1 ,formItemAttr:{},itemAttr:{},},
{ enName:'userName8', cnName:'用户名8', type:'input',value:'',numRowsOccupied: 1, numColumnOccupied: 1 ,formItemAttr:{},itemAttr:{},},
{ enName:'userName9', cnName:'用户名9', type:'input',value:'',numRowsOccupied: 1, numColumnOccupied: 1 ,formItemAttr:{},itemAttr:{},},
{ enName:'userName10',cnName:'用户名10',type:'input',value:'',numRowsOccupied: 1, numColumnOccupied: 1 ,formItemAttr:{},itemAttr:{},},
{ enName:'userName11',cnName:'用户名11',type:'input',value:'',numRowsOccupied: 1, numColumnOccupied: 1 ,formItemAttr:{},itemAttr:{},},
{ enName:'userName12',cnName:'用户名12',type:'input',value:'',numRowsOccupied: 1, numColumnOccupied: 1 ,formItemAttr:{},itemAttr:{},},
]
},
tableConfig:{
showTableFooter:false,
showTableHeader:true,
otherAttr:{
scroll:{ y: 300}
},
// pagination:false,
columns:[
{
title: '合同编号',
align: 'center',
width: 230,
dataIndex: 'agreeNo',
},
{
title: '合同名称',
dataIndex: 'agreeName',
scopedSlots: { customRender: 'esContent' },
align: 'center',
width: 140
},
{
title: '生效状态',
dataIndex: 'effectiveStatus',
align: 'center',
width: 110,
},
{
title: '渠道名称',
align: 'center',
dataIndex: 'channelName',
scopedSlots: { customRender: 'esContent1' },
// width: 150,
},
{
title: '客户类型',
align: 'center',
// width: 100,
dataIndex: 'channelType',
scopedSlots: { customRender: 'channelType' },
},
{
title: '到期时间',
dataIndex: 'agreeExpireTime',
align: 'center',
// width: 150
},
{
title: '是否标准合同',
dataIndex: 'agreeProcess',
key: 'agreeProcess',
align: 'center',
scopedSlots: {customRender: 'agreeProcess'},
// width: 120
},
{
title: '合同类型',
align: 'center',
// width: 100,
dataIndex: 'agreeType',
scopedSlots: { customRender: 'agreeType' },
},
{
title: '签约状态',
dataIndex: 'status',
align: 'center',
scopedSlots: { customRender: 'status' },
// width: 140
},
{
title: '操作',
dataIndex: 'action',
scopedSlots: { customRender: 'action' },
align: 'center',
width: 180,
fixed: 'right'
}
],
data:[
{agreeNo:' 1',agreeName:'合同名称 1'},
{agreeNo:' 2',agreeName:'合同名称 2'},
{agreeNo:' 3',agreeName:'合同名称 3'},
{agreeNo:' 4',agreeName:'合同名称 4'},
{agreeNo:' 5',agreeName:'合同名称 5'},
{agreeNo:' 6',agreeName:'合同名称 6'},
{agreeNo:' 7',agreeName:'合同名称 7'},
{agreeNo:' 8',agreeName:'合同名称 8'},
{agreeNo:' 9',agreeName:'合同名称 9'},
{agreeNo:'10',agreeName:'合同名称10'},
{agreeNo:'11',agreeName:'合同名称11'},
{agreeNo:'12',agreeName:'合同名称12'},
{agreeNo:'13',agreeName:'合同名称13'},
{agreeNo:'14',agreeName:'合同名称14'},
{agreeNo:'15',agreeName:'合同名称15'},
{agreeNo:'16',agreeName:'合同名称16'},
{agreeNo:'17',agreeName:'合同名称17'},
{agreeNo:'18',agreeName:'合同名称18'},
{agreeNo:'19',agreeName:'合同名称19'},
{agreeNo:'20',agreeName:'合同名称20'},
{agreeNo:'21',agreeName:'合同名称21'},
],
}
};
},
// 监听属性 类似于data概念
computed: {},
// 监控data中的数据变化
watch: {},
// 生命周期 - 创建完成（可以访问当前this实例）
created() {},
// 生命周期 - 挂载完成（可以访问DOM元素）
mounted() {},
// 方法集合
methods: {
eventPool(type,data){
console.log('eventPool项变化事件===>',type,data);
},
handleOpenChange1(open) {
if (open) {
this.mode1 = 'time';
}
},
handleChange(value) {
this.value = value;
},
handlePanelChange1(value, mode) {
this.mode1 = mode;
},
handlePanelChange2(value, mode) {
this.value = value;
this.mode2 = [mode[0] === 'date' ? 'month' : mode[0], mode[1] === 'date' ? 'month' : mode[1]];
this.open_ = false
},
},
}
</script>
<style lang='less' scoped>
</style>