<script>
import CommLayout from '@/components/CommLayout'
import CommSearching from '@/components/CommTable/components/Searching.vue'
import CommTable from '@/components/CommTable/index.vue'
export default {
name: 'TableSelector',
components: { CommLayout, CommSearching, CommTable },
data() {
return {
visible: false,
dialog: {
title: '表格选择器',
width: '720px',
tag: '',
description: ''
},
btn: {
okBtn: {
text: '确 定',
show: true,
icon: 'el-icon-check',
type: 'primary'
},
cancleBtn: {
text: '取 消',
show: false,
icon: 'el-icon-close',
type: 'default'
}
},
searchParam: {},
searchOptions: [],
tableOption: {
showIdx: true, // --是否显示序列号
selection: true, // --是否可以多选
defaultOrderField: "F_CreateDate", // --默认排序列
pagination: {
pageSize: 20,
currentPage: 1,
records: 0,
orderField: "F_CreateDate",
orderType: "descend",
},
columns: []
},
currentRow: null,
multipleSelection: [],
list: []
}
},
destroyed() {
document.body.removeChild(this.$el);
},
updated() {
if (!this.visible) {
this.$destroy();
}
},
render(h) {
if (!this.visible) {
return null;
}
return this.renderMain()
},
methods: {
renderTitleIcon() {
return <i
style="font-size: 18px; margin-left: 10px"
class="bi bi-pencil-square"
/>
},
/** 渲染头部 */
renderDialogTitle() {
const { dialog, btn } = this
return (
<el-row type="flex" justify="space-between" align="middle">
<el-row type="flex" justify="start" align="middle">
{this.renderTitleIcon()}
<b class="edit-title">{dialog.title}</b>
{dialog.tag && <i class="text-tag" style="font-size: 12px"> [{dialog.tag}]</i>}
</el-row>
<div class="dlg-btn-group">
{btn.cancleBtn.show && <el-button
size="small"
icon={btn.cancleBtn.icon}
type={btn.cancleBtn.type}
on-click={e => this.onCancle(e)}
>{btn.cancleBtn.text}</el-button>
}
{btn.okBtn.show && <el-button
size="small"
icon={btn.okBtn.icon}
type={btn.okBtn.type}
on-click={e => this.onOK(e)}
>{btn.okBtn.text}</el-button>
}
<el-button
type="close"
icon="bi bi-x-lg"
size="small"
on-click={this.onClose}
/>
</div>
</el-row>)
},
/** 渲染脚部 */
renderDialogFooter() {
return null
},
/** 主渲染 */
renderMain() {
const { visible, dialog } = this
const dialogClass = `comm-dialog`
return (
<div id="order-files-box">
<el-dialog
class={dialogClass}
ref="orderFilesDialog"
visible={visible}
show-close={false}
close-on-click-modal={false}
close-on-press-escape={false}
width={dialog.width}
before-close={this.onCancle}
destroy-on-close
v-el-drag-dialog
>
<template slot="title">
{this.renderDialogTitle()}
</template>
{this.renderBody()}
<template slot="footer">
{this.renderDialogFooter()}
</template>
</el-dialog>
</div>
)
},
/** 渲染主体 */
renderBody() {
const { searchOptions, tableOption } = this
return (<CommLayout >
<template slot="header">
<CommSearching
options={searchOptions}
itemWidth="320px"
labelWidth="60px"
actionSize="mini"
on-searching={this.onSearchBtnClick}
>
</CommSearching>
</template>
<div class="page-content">
<CommTable
ref="List_Table"
list={this.list}
columns={tableOption.columns}
defaultSortProp={tableOption.defaultOrderField}
width="100%"
height="400"
style="flex: 1"
showIdx={tableOption.showIdx}
selection={tableOption.selection}
on-sort-change={this.onTableSortChange}
on-row-click={this.onTableRowClick}
on-row-dblclick={this.onTableRowDblClick}
on-selection-change={this.onTableSelectionChange}
/>
</div>
<template slot="footer">
<el-row class="pagination-bar" type="flex" justify="end" align="middle">
<el-pagination
on-size-change={this.onPaginationSizeChange}
on-current-change={this.onPaginationCurrentChange}
current-page={tableOption.pagination.currentPage}
page-sizes={[20, 40, 60, 100, 500]}
page-size={tableOption.pagination.pageSize}
layout="total, sizes, prev, pager, next"
total={tableOption.pagination.records}
>
</el-pagination>
</el-row>
</template>
</CommLayout>)
},
/** 搜索按钮事件 */
onSearchBtnClick(params) {
this.searchParam = params
this.handleSearching();
},
/** 数据加载事件 */
handleSearching() {
this.currentRow = null
this.multipleSelection = []
if (this.$refs.List_Table) {
this.$refs.List_Table.RunTableMethod('setCurrentRow', null)
}
this.$loading.Open("数据加载中...");
this.tableOption.getList(this.searchParam, this.tableOption.pagination).then(res => {
this.$loading.Close();
if (res.code === 200) {
this.tableOption.pagination.currentPage = res.data.page;
this.tableOption.pagination.records = res.data.records;
this.list = [...res.data.rows];
} else {
this.$message.error(res.info);
}
})
},
/** 表格行点击事件 */
onTableRowClick(row) {
this.currentRow = row;
},
/** 表格行双击事件 */
onTableRowDblClick(row) {
this.currentRow = row;
if (!this.tableOption.selection) {
this.onOK()
}
},
/** 表格排序事件 */
onTableSortChange({ order, prop }) {
this.tableOption.pagination.orderField = prop;
this.tableOption.pagination.currentPage = 1;
this.tableOption.pagination.orderType =
order.toString() === "descending" ? "descend" : "ascend ";
this.handleSearching();
},
/** 表格多选改变事件 */
onTableSelectionChange(val) {
this.multipleSelection = val;
},
/** 每页显示数量改变事件 */
onPaginationSizeChange(val) {
this.tableOption.pagination.pageSize = val;
this.handleSearching();
},
/** 当前页改变事件 */
onPaginationCurrentChange(val) {
this.tableOption.pagination.currentPage = val;
this.handleSearching();
},
Options({ dialog, okBtn, cancleBtn, tableOption, searchOptions }) {
console.log('-- searchOptions --', searchOptions)
this.dialog.title = dialog?.title || "CommDialog"
this.dialog.width = dialog?.width || "960px"
this.dialog.tag = dialog?.tag || ""
this.btn.okBtn.text = okBtn?.text || '确 定'
this.btn.okBtn.show = okBtn?.show || false
this.btn.okBtn.icon = okBtn?.icon || 'el-icon-check'
this.btn.okBtn.type = okBtn?.type || 'primary'
this.btn.cancleBtn.text = cancleBtn?.text || '取 消'
this.btn.cancleBtn.show = cancleBtn?.show || false
this.btn.cancleBtn.icon = cancleBtn?.icon || 'el-icon-close'
this.btn.cancleBtn.type = cancleBtn?.type || 'default'
this.searchOptions = [...searchOptions]
this.tableOption = {
showIdx: true,
selection: tableOption.selection, // --是否可以多选
defaultOrderField: tableOption.defaultOrderField, // --默认排序列
pagination: {
pageSize: 20,
currentPage: 1,
records: 0,
orderField: tableOption.pagination.orderField,
orderType: "descend",
},
columns: [...tableOption.columns],
getList: tableOption.getList
}
},
/** 通用打开方法 */
Open(onOkCallback, onCancleCallback, onDialogClosed) {
this.visible = true;
this.onOkCallback = onOkCallback
this.onCancleCallback = onCancleCallback
this.onDialogClosed = onDialogClosed
this.$nextTick(() => this.handleSearching())
},
onOK() {
if (typeof this.onOkCallback === 'function') {
this.onOkCallback({ singleSelection: this.currentRow, multipleSelection: this.multipleSelection }, this.onClose)
} else {
this.onCancle()
}
},
onClose() {
if (typeof this.onDialogClosed === 'function') {
this.onDialogClosed()
}
this.visible = false;
},
onCancle() {
if (typeof this.onCancleCallback === 'function') {
this.onCancleCallback(this.onClose)
} else {
this.onClose()
}
}
}
}
</script>
<style lang="scss">
.comm-dialog {
height: 100% !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
background: rgba(13, 10, 49, 0.75) !important;
&.spec {
.el-dialog {
align-self: flex-start !important;
margin-top: 25vh !important;
}
}
.el-dialog {
max-height: 95% !important;
min-height: 200px !important;
max-width: 95% !important;
min-width: 540px !important;
display: flex;
flex-direction: column;
position: relative !important;
margin: 0 auto !important;
background-color: #fafafb !important;
.dlg-btn-group {
box-sizing: border-box;
height: 100%;
overflow: hidden;
.el-button {
margin: 0 !important;
border-width: 1px !important;
}
}
.el-dialog__body {
padding: 15px;
color: #606266;
font-size: 14px;
word-break: break-all;
flex: 1;
height: 99% !important;
overflow-y: scroll;
position: relative !important;
transition: all 0.3s linear !important;
}
.el-dialog__footer {
padding: 10px 20px;
text-align: right;
-webkit-box-sizing: border-box;
box-sizing: border-box;
background: #f7f7f7;
}
}
}
.confirm-icon {
width: 120px;
height: 60px;
line-height: 60px;
text-align: center;
}
.confirm-description {
flex: 1;
box-sizing: border-box;
padding: 10px;
color: #fb8c00;
font-size: 18px;
font-weight: bold;
}
.input-content {
width: 100%;
.notice-desc {
color: #fb8c00;
font-size: 14px;
font-weight: 600;
margin-top: 0 !important;
}
.input-box {
border: 1px solid #f0f0f0;
width: 100%;
box-sizing: border-box;
padding: 10px;
margin-top: 10px;
background-color: #fff;
.input-item {
display: inline-flex;
display: -webkit-inline-flex;
align-items: center;
padding: 5px 10px;
line-height: 18px;
width: 100%;
.el-divider--horizontal {
display: block;
height: 1px;
width: 100%;
margin: 10px 0;
.el-divider__text {
position: absolute;
background-color: #ffffff;
padding: 0 20px;
font-weight: 400;
color: #ff5252;
font-size: 12px;
}
}
.item-name {
padding: 0 10px !important;
color: #333;
font-size: 12px;
line-height: 12px;
text-align: center;
word-wrap: break-word;
word-break: normal;
width: 100px;
box-sizing: border-box;
&.required::before {
content: "*";
color: #ff5252;
position: relative;
font-size: 26px;
margin: 0 3px;
left: 0px;
top: 6px;
}
}
.item-comp {
flex: 1;
.radio-group {
width: auto !important;
.radio-button {
box-sizing: border-box;
padding: 0px 8px;
line-height: 15px;
height: 30px;
font-size: 14px;
margin: 2px 3px;
border-radius: 15px;
cursor: pointer;
color: #ccc;
font-size: 14px;
transition: all 0.3s linear;
min-width: 60px;
display: inline-flex;
display: -webkit-inline-flex;
justify-content: center;
align-items: center;
border-bottom: 1px solid #f0f0f0;
&::before {
content: "✘";
}
&.small {
padding: 0px 8px;
line-height: 15px;
height: 30px;
font-size: 14px;
border-radius: 15px;
}
&.mini {
padding: 0px 5px;
line-height: 14px;
height: 24px;
font-size: 12px;
}
&:hover {
color: #000;
border-bottom: 1px solid #000;
}
&.radio-current {
color: #03a9f4;
border-bottom: 1px solid #03a9f4;
&::before {
content: "✔";
}
}
}
}
}
}
}
}
</style>
vue另外一种写法
最新推荐文章于 2024-08-23 14:49:37 发布