#封装dialog小案例
提示：这是我工作中封装的代码，很使用，需要的可以拿去，
在我们的代码中往往会出现点击按钮出现弹窗进行操作，那么我们就需要对dialog进行一个二次封装。
下边是大概的一个样式。
##对组件进行二次封装
<template>
<el-dialog
title="客户账号查询"
:visible.sync="dialogVisible"
:append-to-body="true"
:close-on-click-modal="false"
width="900px"
@close="closeClick"
>
// :inline="true" 这个是是否行内模式 label-position="right" 提示的内容在右侧显示
//
<div class="filter_assert_account_comp">
<el-form
v-if="this.dialogQuery && dialogQuery.length > 0"
ref="ruleForm"
:inline="true"
label-position="right"
class="ruleForm"
style="margin-bottom: 10px"
>
<el-row>
<el-col v-for="item in this.dialogQuery" :key="item.label" :span="10">
<el-form-item :label="item.label">
//本身queryParams是一个对象，我们需要知道的是通过对象才能够去作为接口的传参
<el-input v-model="queryParams[item.value]" clearable />
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item>
//:loading="searchLoading" 是否加载中状态 type="primary"
<el-button icon="el-icon-search" :loading="searchLoading" type="primary" @click="queryAcct">查询</el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>
<tableList
ref="table"
:options="options"
:pagination="dialogPageInfo"
:header-data="dialogColumns"
:table-data="tableData"
:select-one="true"
@requestList="dialogDoPage"
@rowClick="getRowClick"
@handleSelectionChange="handleSelectionChange"
@handleRowSelect="handleRowSelect"
/>
</div>
<div v-if="isMultiSelect" slot="footer" class="dialog-footer" style="padding-top: 0px;margin-top: -16px;">
<el-button type="primary" @click="getMulRows()">确 定</el-button>
<el-button @click="closeClick()">取 消</el-button>
</div>
</el-dialog>
</template>
<script>
import TableList from '@/components/TableList'
import CommonApi from '@api/modules/smartTransactionList'
export default {
// name: "corpCustTabDialog",
components: {
TableList
},
props: {
isRowClick: {
type: Boolean,
default: true
},
dialogVisible: {
type: Boolean,
default: false
},
showObj: {
type: Object
},
position: {
type: [String, Number]
},
isMultiSelect: {
type: Boolean,
default: false
},
// 表格配置项
options: {
type: Object,
default: () => {
return {
multiSelect: false, // boolean 是否多选
isindex: false, // boolean 是否展示序列号
stripe: true, // boolean 斑马纹
border: true, // boolean 纵向边框
size: 'medium', // String medium / small / mini table尺寸
fit: true, // 自动撑开
pagination: true // 是否有分页
}
}
},
// 分页配置项
dialogPageInfo: {
type: Object,
default: () => {
return {
page: 1,
sizes: [10, 20, 30],
size: 10,
total: 0
}
}
},
// 表格数据
dialogTableData: {
type: Array,
default: () => {
return []
}
}
},
data() {
return {
searchLoading: false,
corpCustTabDialog: this.dialogVisible,
dialogQuery: [
{ label: '客户账号: ', value: 'counterpartyAcctNo' },
{ label: '客户名称: ', value: 'counterpartyName' }
],
queryParams: {
acctState: '01'
},
api: CommonApi.selectRosterPageInfo,
dialogColumns: [
{
prop: 'counterpartyAcctNo',
'label': '客户账号'
}, {
prop: 'counterpartyName',
'label': '客户名称'
}, {
prop: 'counterpartyAcctBankNo',
'label': '开户行行号'
}, {
prop: 'counterpartyAcctBankName',
'label': '开户行行名'
}],
tableData: this.dialogTableData,
multipleSelections: [],
selectItem: [],
multipleList: []
}
},
mounted() {
if (this.dialogQuery && this.dialogQuery.length > 0) {
this.dialogQuery.forEach(item => {
this.$set(this.queryParams, item.value, '')
})
}
this.dialogDoPage()
},
methods: {
dialogDoPage() {
this.searchLoading = true
const param = { dto: { ...this.queryParams }, size: this.dialogPageInfo.size, page: this.dialogPageInfo.page }
this.api(param).then(({ code, data }) => {
console.log(0)
if (code === 200) {
console.log(1)
if (Array.isArray(data)) {
this.tableData = data
console.log(2)
} else {
this.tableData = data.records
this.dialogPageInfo.total = data.total
console.log(3)
}
this.setCheckedRows()
}
}).finally(() => {
this.searchLoading = false
})
},
queryAcct() {
this.dialogPageInfo.page = 1
this.dialogDoPage()
},
getRowClick(row) {
if (this.isRowClick) {
this.closeClick(row)
}
},
// 多选
getMulRows() {
const list = []
this.multipleList.forEach(item => {
if (item.rows) {
list.push(...item.rows)
}
})
this.closeClick(list)
},
closeClick(row) {
// position: 有多个的弹框需要展示的时候 用position 区分
this.$emit('closeHandler', row, this.position)
},
handleSelectionChange(row) {
this.multipleSelections = row
},
handleRowSelect(row) {
let index, object
this.multipleList.forEach((item, i) => {
if (item.page === this.dialogPageInfo.page) {
index = i
object = item
return
}
})
if (object) {
object.rows = [...row]
this.multipleList[index].rows = [...new Set(object.rows)]
} else {
const params = { 'page': this.dialogPageInfo.page, 'rows': [...row] }
this.multipleList.push(params)
this.multipleList = [...new Set(this.multipleList)]
}
},
setCheckedRows() {
this.selectItem = []
if (this.tableData.length === 0 || this.multipleList.length === 0) return
const index = this.multipleList.find(item => {
return item.page === this.dialogPageInfo.page
})
if (!index) return
this.tableData.forEach(item => {
index.rows.forEach(mItem => {
if (item.pkId === mItem.pkId) {
this.selectItem.push(item)
}
})
})
if (this.selectItem.length > 0) {
this.$nextTick(() => {
this.selectItem.forEach(item => {
this.$refs.table.toggleRowSelection(item)
})
})
}
}
}
}
</script>
<style scoped>
</style>
02父组件进行使用子组件
//父组件使用
<el-button slot="append" icon="el-icon-search" @click="endorseeAccClick" />
<counterparty-dialog :dialog-visible="couRateVisible" :position="position" @closeHandler="closeHandler" />
