sinosoft-common-tablepro v1.5.8
安装和引入
安装
// npm
npm install sinosoft-common-tablepro
// yarn
yarn add sinosoft-common-tablepro
引入
该组件依赖 element-plus,需要自行引入
// 引入element-plus import ElementPlus from 'element-plus' import 'element-plus/lib/theme-chalk/index.css' // 引入中文语言包 import 'dayjs/locale/zh-cn' import locale from 'element-plus/lib/locale/lang/zh-cn' app.use(ElementPlus, { locale })
// 引入vue-pro-table
import commonProTable from 'sinosoft-common-tablepro'
app.use(commonProTable)
表格配置
border 表格是否有边框。布尔值,默认为 false
columns 属性的配置,是一个数组
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
label | 对应 el-table-column 的 label | string | - | - |
type | 对应 el-table-column 的 type | string | selection/index/expand | - |
prop | 对应 el-table-column 的 prop | string | - | - |
width | 对应 el-table-column 的 width | string,number | - | - |
minWidth | 对应 el-table-column 的 min-width | string,number | - | - |
align | 对应 el-table-column 的 align | string | left/center/right | left |
fixed | 对应 el-table-column 的 fixed | string, boolean | true, left, right | - |
sortable | 对应 el-table-column 的 sortable | boolean | false/true | false |
filters | 对应 el-table-column 的 filters | Array{ text, value } | - | - |
tdSlot | 单元格要自定义内容时,可以通过此属性配置一个插槽名称,并且是作用域插槽,可以接收 scope 数据 | string | - | - |
labelSlot | 表头要自定义内容时,可以通过此属性配置一个插槽名称,并且是作用域插槽,可以接收 scope 数据 | string | - | - |
row-key 属性配置
对应 el-table 的 row-key,默认值是'id'
搜索配置
search 属性的配置,是一个对象
如果不想显示搜索表单,可以不配置 search 或者 search 设置为 false
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
labelWidth | label 文字长度 | string | - | - |
inputWidth | 表单项长度 | string | - | - |
fields | 表单字段列表,包含 text,select,radio,checkbox,datetime 等类型,所有字段类型配置见下表 | Array{字段类型} | - | - |
- fields 列表的字段类型配置
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
type | 字段类型 | string | text,textarea,select,radio,radio-button,checkbox,checkbox-button,number,date,daterange,datetime,datetimerange | text |
label | label 文本 | string | - | - |
name | 搜索时的提交的参数名称 | string | - | - |
style | 额外的样式 | object | - | - |
defaultValue | 默认值 | - | - | |
options | 当 type 是 select,radio,radio-button,checkbox,checkbox-button 时的枚举选项 | Array{name, value} | - | - |
filterable | 当 type 是 select 时,下拉框是否支持模糊搜索 | boolean | true, false | false |
multiple | 当 type 是 select 时,下拉框是否支持多选 | boolean | true, false | false |
transform | 搜索前对表单数据进行转换,比如表单数据是数组,但是搜索的时候需要传递字符串。它是一个函数,默认参数是字段的 value,需要返回转换后的结果 | function(value) | - | - |
trueNames | 当 type 是 daterange,datetimerange 时,开始时间和结束时间是在一个数组里面,但是搜索时可能需要两个字段,这时就需要把开始时间和结束时间分别赋值给两个字段,这两个字段的名称就是通过 trueNames 配置,它是一个数组,例如:trueNames: 'startTime', 'endTime' | Arraystring | ||
min | 当 type 是 number 时的最小值 | number | - | - |
max | 当 type 是 number 时的最大值 | number | - | - |
分页配置
pagination 属性的配置,是一个对象
如果不想显示分页,将 pagination 设置为 false
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
layout | 组件布局 | string | total, sizes, prev, pager, next, jumper | total, sizes, prev, pager, next, jumper |
pageSize | 每页显示条目个数 | number | - | 10 |
pageSizes | 每页显示个数选择器的选项设置 | Arraynumber | - | 10, 20, 30, 40, 50, 100 |
标题栏配置
表格上方有一个标题栏,标题栏左侧显示一个标题,右侧是一个可自定义的工具栏
hide-title-bar
是否隐藏标题栏,布尔值
title
表格标题
用法
<template>
<sinosoft-common-tablepro
ref="proTable"
class="proTable"
:search="state.search"
:advanced="state.advanced"
:tableConfig="state.table"
@getTableData="getTableData"
>
<template #headerSlot>
<div>
<SinosoftCommonButton
width="97px"
height="42px"
@handleClick="(code: any) => {
handleCheck(code, row)
}"
>
Load
</SinosoftCommonButton>
</div>
</template>
<template #bodySlot>
<div style="padding-bottom: 20px">
<el-tag
:type="'warning'"
style="
display: flex;
justify-content: flex-start;
align-items: center;
height: 40px;
"
>
<el-icon size="16px">
<Warning />
</el-icon>
<span style="font-size: 18px; color: #000000">
AM(9:00-12:00) Lunch Break(12:00-14:00) PM(14:00-17:30)
</span>
</el-tag>
</div>
</template>
<!-- 用户状态 -->
<template #userStatusHeader>
<div>
<p>top</p>
<p>bottom</p>
</div>
</template>
<!-- 用户状态 -->
<template #userStatus="{ row }">
<span>{{ row.userStatus }}</span>
</template>
<!-- 角色状态 -->
<template #roleStatus="{ row }">
<el-tag :type="+row.roleStatus === 1 ? '' : 'info'">
{{ row.roleStatus === 1 ? '在线' : '下线' }}
</el-tag>
</template>
<!-- 表格操作栏 -->
<template #userOperations="{ row }">
<SinosoftCommonButton
plain
color="#A26628"
borderColor="transparent"
style="margin-right: 10px"
@handleClick="(code: any) => {
handleCheck(code, row)
}"
>
Check
</SinosoftCommonButton>
<sinosoft-common-button
plain
color="#A26628"
borderColor="transparent"
style="margin-right: 10px"
@handleClick="(code: any) => {
handlePublish(code, row)
}"
>
Publish
</sinosoft-common-button>
<el-popover
placement="bottom"
title=""
:width="200"
trigger="click"
content=""
>
<template #reference>
<el-icon style="margin-left: 10px">
<MoreFilled />
</el-icon>
</template>
<span>
<sinosoft-common-button
plain
color="#A26628"
borderColor="transparent"
@handleClick="(code: any) => {
handleOffline(code, row)
}"
>
Offline
</sinosoft-common-button>
</span>
</el-popover>
</template>
<template #roleOperations="{ row }">
<sinosoft-common-button
plain
color="#A26628"
borderColor="transparent"
style="margin-right: 10px"
@handleClick="(code: any) => {
handleEdit(code, row)
}"
>
Edit
</sinosoft-common-button>
<sinosoft-common-button
plain
color="#A26628"
borderColor="transparent"
@handleClick="(code: any) => {
handleDelete(code, row)
}"
>
Delete
</sinosoft-common-button>
<!-- <el-button size="small" @click="handleEdit(row)">编辑</el-button>
<el-button size="small" @click="handleDelete(row)">删除</el-button> -->
</template>
</sinosoft-common-tablepro>
</template>
<script lang="ts" setup>
import { reactive, ref, computed, watch } from 'vue'
import sinosoftCommonTablepro from '../package/ProTable.vue'
// import sinosoftCommonTablepro from "sinosoft-common-tablepro";
// import "../../node_modules/sinosoft-common-tablepro/style.css";
// import sinosoftCommonButton from 'sinosoft-common-button'
// import '../../node_modules/sinosoft-common-button/style.css'
import searchButton from '../config/search-button'
import resetButton from '../config/reset-button'
import advancedButton from '../config/advanced-button'
import confirmButton from '../config/confirm-button'
import cancelButton from '../config/cancel-button'
const proTable: any = ref(null)
// console.log(proTable)
const sortTime = (a: any, b: any) => {
const [dayA, monthA, yearA] = a.createTime.split('/')
const [dayB, monthB, yearB] = b.createTime.split('/')
const dateA = new Date(+yearA, +monthA - 1, +dayA)
const dateB = new Date(+yearB, +monthB - 1, +dayB)
return dateA.getTime() - dateB.getTime() // 升序排列
}
const disabledDate = (time: any) => {
// let Y = time.getFullYear();
// let M =
// time.getMonth() + 1 < 10
// ? "0" + (time.getMonth() + 1)
// : time.getMonth() + 1;
// let D = time.getDate() < 10 ? "0" + time.getDate() : time.getDate();
// let date = D + "/" + M + "/" + Y;
// return !state.meetingDate_list.includes(date);
// 禁止选择今天以后的时间
// return time.getTime() > Date.now()
// 禁止选择今天以前的时间
return time.getTime() < Date.now() - 8.64e7
}
const startDisabledDate = (time: any) => {
// let Y = time.getFullYear();
// let M =
// time.getMonth() + 1 < 10
// ? "0" + (time.getMonth() + 1)
// : time.getMonth() + 1;
// let D = time.getDate() < 10 ? "0" + time.getDate() : time.getDate();
// let date = D + "/" + M + "/" + Y;
// return !state.meetingDate_list.includes(date);
// 禁止选择今天以后的时间
// return time.getTime() > Date.now()
// 禁止选择今天以前的时间
// return time.getTime() < Date.now() - 8.64e7
}
const endDisabledDate = (time: any) => {
// let Y = time.getFullYear();
// let M =
// time.getMonth() + 1 < 10
// ? "0" + (time.getMonth() + 1)
// : time.getMonth() + 1;
// let D = time.getDate() < 10 ? "0" + time.getDate() : time.getDate();
// let date = D + "/" + M + "/" + Y;
// return !state.meetingDate_list.includes(date);
// 禁止选择今天以后的时间
// return time.getTime() > Date.now()
// 禁止选择今天以前的时间
// return time.getTime() < Date.now() - 8.64e7
}
const state: any = reactive({
init: false,
search: {
// 标题
title: 'Sinosoft Common Table',
// 标题icon
icon: false,
// icon样式
iconStyle: {},
// 标签宽度
labelWidth: '',
// 输入框宽度
inputWidth: '240px',
// 标签位置 left || top || right
labelPosition: 'top',
// 自定义样式
style: {},
// 搜索条件
fields: [
{
type: 'text',
label: 'User Code',
name: 'englishName',
placeholder: 'Please enter',
maxlength: 10,
style: {},
clearable: true,
},
// {
// type: "text",
// label: "User Name",
// name: "name",
// placeholder: "Please enter",
// style: {},
// clearable: false,
// defaultValue: "",
// },
{
type: 'select',
label: 'User Status',
name: 'user',
placeholder: 'Please select',
// defaultValue: 1,
options: [
{
name: 'all',
code: 0,
},
{
name: 'online',
code: 1,
},
{
name: 'offline',
code: 2,
},
],
style: {},
clearable: true,
onChange: (val: string) => {
console.log(val)
},
},
{
type: 'daterange',
label: 'daterange',
name: 'daterange',
trueNames: ['startTime', 'endTime'],
// defaultValue: [new Date(2010, 9, 1), new Date(2010, 10, 1)],
startPlaceholder: 'DD/MM/YYYY',
endPlaceholder: 'DD/MM/YYYY',
rangeSeparator: 'to',
disabledDate: disabledDate,
// editable: true,
style: {},
},
// {
// type: "date",
// label: "date",
// name: "date",
// Placeholder: "DD/MM/YYYY",
// disabledDate: disabledDate,
// // editable: true,
// style: {},
// },
],
// 搜索按钮
btns: [
{
btnCode: '',
name: 'Search',
...searchButton,
style: {},
class: 'searchInput',
fn: (code: any) => {
console.log(code)
proTable.value.handleSearch()
},
},
{
btnCode: '',
name: 'Reset',
...resetButton,
style: {
'margin-left': '4px',
},
class: 'resetInput',
fn: (code: any) => {
console.log(code)
proTable.value.handleReset()
},
},
// {
// btnCode: "",
// name: "Refresh",
// ...refreshButton,
// style: {
// "margin-left": "4px",
// },
// class: "refreshInput",
// fn: (code: any) => {
// console.log(code);
// proTable.value.refresh();
// },
// },
{
btnCode: '', // 可不传
name: 'Advanced', // 名称
...advancedButton,
style: {
'margin-left': '4px',
},
class: 'advancedInput',
fn: (code: any) => {
console.log(code)
proTable.value.dialogVisible = true
},
},
],
},
searchModel: {},
// advanced: {},
advanced: {
// 对话框宽度
dialogWidth: '900px',
// 对话框标题
dialogTitle: 'Advanced Search',
// 标题样式
titleStyle: {},
// 查询条件展示
showCondition: true,
// 标签宽度
labelWidth: '100%',
// 输入框宽度
inputWidth: '100%',
// 标签位置 left || top || right
labelPosition: 'top',
// 自定义样式
style: {},
// 搜索条件
fields: [
// {
// span: 24,
// offset: 0,
// type: 'title',
// name: 'Client Information',
// },
{
span: 12,
offset: 0,
type: 'text',
label: 'Client Name',
name: 'englishName',
placeholder: 'English Name',
maxlength: 10,
style: {},
closable: true,
},
{
span: 12,
offset: 0,
type: 'text',
label: '',
name: 'chineseName',
placeholder: 'Chinese Name',
maxlength: 10,
style: {},
closable: false,
},
{
span: 8,
offset: 0,
type: 'tel',
label: 'Contact Number',
name: 'contactNumber',
placeholder: 'Please enter contact number',
areaCode: {
name: 'contactNumberAreaCode',
width: '50px',
placeholder: ' ',
defaultValue: '156',
options: [
{
name: '+156',
code: '156',
},
{
name: '+157',
code: '157',
},
{
name: '+158',
code: '158',
},
{
name: '+159',
code: '159',
},
],
style: {},
closable: false,
},
onChange: (val: string) => {
console.log(val)
},
},
{
span: 8,
offset: 0,
type: 'text',
label: 'Email',
name: 'email',
placeholder: 'Please enter client email',
style: {},
closable: false,
},
{
span: 8,
offset: 0,
type: 'select',
label: 'Preferred Language',
name: 'preferredLanguage',
placeholder: 'Please select language',
options: [
{
name: 'Simplified Chinese',
code: '0',
},
{
name: 'Simplified Chinese',
code: '1',
},
{
name: 'English',
code: '2',
},
],
style: {},
clearable: false,
closable: false,
onChange: (val: string) => {
console.log(val)
},
},
{
span: 8,
offset: 0,
type: 'text',
label: 'Client HKID',
name: 'clientHKID',
placeholder: 'Please enter client HKID',
style: {},
closable: false,
},
{
span: 16,
offset: 0,
type: 'radio2',
label: 'ls existing client?',
name: 'lsExistingClient?',
style: {
width: '300px',
},
options: [
{
name: 'Yes',
code: 'Y',
},
{
name: 'No',
code: 'N',
},
],
closable: false,
},
{
span: 24,
offset: 0,
type: 'title',
name: 'Appointment Infomation',
},
{
span: 8,
offset: 0,
type: 'text',
label: 'Appointment No.',
name: 'appointmentNo',
placeholder: "Please enter agent's name",
style: {},
closable: false,
},
{
span: 8,
offset: 0,
type: 'select',
label: 'Appointment Status',
name: 'appointmentStatus',
placeholder: 'Please select status',
options: [
{
name: 'all',
code: '0',
},
{
name: 'active',
code: '1',
},
{
name: 'inactive',
code: '2',
},
],
style: {},
closable: false,
onChange: (val: string) => {
console.log(val)
},
},
{
span: 8,
offset: 0,
type: 'select',
label: 'Appointment Location',
name: 'appointmentLocation',
placeholder: 'Please select location',
options: [
{
name: 'all',
code: '0',
},
{
name: 'active',
code: '1',
},
{
name: 'inactive',
code: '2',
},
],
style: {},
closable: false,
onChange: (val: string) => {
console.log(val)
},
},
{
span: 24,
offset: 0,
type: 'daterange2',
label: 'Appointment Date',
name: 'appointmentDate',
trueNames: ['startTime', 'endTime'],
defaultValue: [new Date(2012, 9, 1), new Date(2012, 10, 1)],
startPlaceholder: 'DD/MM/YYYY',
endPlaceholder: 'DD/MM/YYYY',
rangeSeparator: 'to',
style: {
// width: "320px",
},
closable: false,
onChangeStartTime: (val: string) => {
console.log(val)
},
onChangeEndTime: (val: string) => {
console.log(val)
},
},
{
span: 12,
offset: 0,
type: 'text',
label: 'Appointment Created by',
name: 'appointmentCreatedBy',
placeholder: 'Please enter name',
style: {},
closable: false,
},
{
span: 12,
offset: 0,
type: 'radio',
label: 'Unassigned Appointment?',
name: 'unassignedAppointment',
style: {
width: '300px',
},
options: [
{
name: 'Yes',
code: 'Y',
},
{
name: 'No',
code: 'N',
},
],
closable: false,
onChange: (val: string) => {
console.log(val)
},
},
{
span: 12,
offset: 0,
type: 'text',
label: 'Assigned ASC',
name: 'assignedASC',
placeholder: 'Please enter name',
style: {},
closable: false,
},
{
span: 12,
offset: 0,
type: 'text',
label: 'Intermediary lD',
name: 'intermediarylD',
placeholder: "Please enter intermediary's lD",
style: {},
closable: false,
},
{
span: 24,
offset: 0,
type: 'title',
name: 'Application Infomation',
},
{
span: 12,
offset: 0,
type: 'text',
label: 'Application no.',
name: 'applicationNo',
placeholder: 'Please enter application no.',
style: {},
closable: false,
},
{
span: 12,
offset: 0,
type: 'text',
label: 'Client ID',
name: 'clientID',
placeholder: 'Please enter client ID',
style: {},
closable: false,
},
{
span: 24,
offset: 0,
type: 'daterange2',
label: 'Application Date',
name: 'applicationDate',
// trueNames: ['startTime', 'endTime'],
startPlaceholder: 'DD/MM/YYYY',
endPlaceholder: 'DD/MM/YYYY',
rangeSeparator: 'to',
startDisabledDate: startDisabledDate,
endDisabledDate: endDisabledDate,
style: {},
closable: false,
},
{
span: 12,
offset: 0,
type: 'select',
label: 'Source of Business',
name: 'sourceOfBusiness',
placeholder: 'Please select business',
options: [
{
name: 'all',
code: '0',
},
{
name: 'active',
code: '1',
},
{
name: 'inactive',
code: '2',
},
],
style: {},
closable: false,
onChange: (val: string) => {
console.log(val)
},
},
{
span: 12,
offset: 0,
type: 'placeholder',
},
{
span: 24,
offset: 0,
type: 'title',
name: 'Other',
},
{
span: 24,
offset: 0,
type: 'checkbox',
label: 'checkbox',
name: 'checkbox',
style: {},
options: [
{
name: 'Option A',
code: '0',
},
{
name: 'Option B',
code: '1',
},
{
name: 'Option C',
code: '2',
},
{
name: 'Option D',
code: '3',
},
],
closable: false,
},
{
span: 8,
offset: 0,
type: 'week',
label: 'week',
name: 'week',
format: '[Week] ww',
valueFormat: '[Week] ww',
placeholder: 'Pick a week',
disabledDate: disabledDate,
style: {},
closable: false,
},
{
span: 8,
offset: 0,
type: 'month',
label: 'month',
name: 'month',
format: 'MM/YYYY',
valueFormat: 'MM/YYYY',
placeholder: 'Pick a month',
disabledDate: disabledDate,
style: {},
closable: false,
},
{
span: 8,
offset: 0,
type: 'year',
label: 'year',
name: 'year',
format: 'YYYY',
valueFormat: 'YYYY',
placeholder: 'Pick a year',
disabledDate: disabledDate,
style: {},
closable: false,
},
{
span: 6,
offset: 0,
type: 'date',
label: 'date',
name: 'date',
placeholder: 'DD/MM/YYYY',
disabledDate: disabledDate,
style: {},
closable: false,
},
{
span: 6,
offset: 0,
type: 'datetime',
label: 'datetime',
name: 'datetime',
placeholder: 'DD/MM/YYYY HH:mm:ss',
rangeSeparator: 'to',
disabledDate: disabledDate,
style: {},
closable: false,
},
{
span: 12,
offset: 0,
type: 'daterange',
label: 'daterange',
name: 'daterange',
// trueNames: ['startTime', 'endTime'],
startPlaceholder: 'DD/MM/YYYY',
endPlaceholder: 'DD/MM/YYYY',
rangeSeparator: 'to',
disabledDate: disabledDate,
style: {
width: '200px',
},
closable: false,
},
{
span: 12,
offset: 0,
type: 'datetimerange',
label: 'datetimerange',
name: 'datetimerange',
// trueNames: ['startTime', 'endTime'],
startPlaceholder: 'DD/MM/YYYY',
endPlaceholder: 'DD/MM/YYYY',
rangeSeparator: 'to',
disabledDate: disabledDate,
style: {
width: '200px',
},
closable: false,
},
],
// 按钮
btns: [
{
btnCode: '',
name: 'Cancel',
...cancelButton,
style: {
position: 'absolute',
left: '20px',
},
fn: () => {
proTable.value.dialogVisible = false
},
},
{
btnCode: '',
name: 'Reset all',
...resetButton,
style: {},
class: 'resetInput',
fn: (code: any) => {
console.log(code)
proTable.value.handleReset()
proTable.value.dialogVisible = false
},
},
{
btnCode: '',
name: 'Search',
...confirmButton,
style: {},
fn: (code: any) => {
console.log(code)
proTable.value.handleSearch()
proTable.value.dialogVisible = false
},
},
],
},
advancedModel: {},
table: [
// table 1
{
// isShow: false,
// table 指向名称
ref: 'user',
// table 名称
title: 'New Appointment',
titleStyle: {
color: '#666',
},
// title 位置 left || right
titlePosition: 'right',
// 最大高度
maxHeight: '500px',
// th 样式
headerRowStyle: {},
headerCellStyle: {
// height: '300px',
},
// header多选显示 true || false
showAllCheck: true,
// td 样式
cellStyle: {},
// 是否为斑马纹 table
stripe: false,
// 是否要高亮当前行
highLightCurrentRow: false,
// 是否隐藏表格顶部按钮
hideTitleBar: false,
// 加载
loading: false,
pageNum: 1,
pageSize: 20,
tableData: [],
emptyText: 'No Data',
total: 0,
rowClick: (row: any, column: any, event: any) => {
console.log(row, column, event)
},
cellClick: (row: any, column: any, cell: any, event: any) => {
console.log(row, column, cell, event)
},
// table 顶部按钮
toolbar: [
{
btnCode: '',
name: 'Create',
plain: false,
primary: false,
info: false,
text: false,
link: false,
loading: false,
loadingColor: '',
Width: '',
height: '',
circle: '',
color: '',
bgColor: '',
borderColor: '',
borderStyle: '',
borderWidth: '',
icon: '',
size: '',
fontSize: '',
fontWeight: 0,
style: {},
fn: (code: any) => {
console.log(code)
handleAdd()
},
},
],
// 表格列配置
columns: [
{
label: '全选',
type: 'selection',
},
// { label: "序号", prop: "index", width: 100, align: "center" },
{
label: 'userCode',
prop: 'code',
align: 'center',
// width: 300,
sortable: true,
},
{
label: 'userName userName userName userName userName userName',
prop: 'name',
align: 'center',
width: 200,
sortable: true,
// "sort-Method": sortText,
},
{
label: 'userStatus',
prop: 'userStatus',
labelSlot: 'userStatusHeader',
align: 'center',
width: 200,
sortable: true,
wrap: false,
},
{
label: 'createTime',
prop: 'createTime',
align: 'center',
width: 200,
sortable: true,
sortMethod: sortTime,
},
{
label: 'updateTime',
prop: 'updateTime',
align: 'left',
width: 200,
sortable: true,
sortMethod: sortTime,
},
{
label: 'Action',
fixed: 'right',
width: 300,
align: 'center',
tdSlot: 'userOperations',
},
],
// 分页配置
paginationConfig: {
// 是否展示
show: true,
// layout: 'total, prev, pager, next, sizes',
layout: 'prev, pager, next',
pageSize: 5,
pageSizes: [5, 10, 20, 50],
background: true,
// 自定义样式
style: {},
// 位置
position: 'left', // left || right
// totalText: computed(() => {
// return `Showing 1-10 items of ${state.table[0].total} results`
// }),
totalText: '',
},
// rowKey: {
// type: String,
// default: "id",
// },
tree: {
type: Object,
default: () => ({}),
},
select: (selection: object, row: object) => {
console.log(selection, row)
proTable.value?.$refs.user[0].clearSelection()
proTable.value?.$refs.user[0].toggleRowSelection(row, undefined)
},
// 选择
handleSelectionChange: (selection: object) => {
console.log(selection)
},
sortMethod: '',
handleSortChange: (val: any) => {
console.log(val)
// if (val.column) {
// getUser({
// pageNum: state.table[0].pageNum,
// searchModel: state.searchModel,
// prop: val.prop, // 排序列name 对应columns prop
// order: val.order, // 排序规则 ascending升序 descending降序 null原始顺序
// });
// }
},
// handleClearSelection: (arr: object) => {
// console.log(arr);
// },
// handleToggleRowSelection: (arr: object) => {
// console.log(arr);
// },
handleCurrentChange: (pageNum: number) => {
state.table[0].pageNum = pageNum
getUser({
pageNum: pageNum,
searchModel: state.searchModel,
})
},
handleSizeChange: (value: number) => {
console.log(value)
state.table[0].pageNum = 1
state.table[0].pageSize = value
getUser({
pageNum: 1,
searchModel: state.searchModel,
})
},
},
// table 2
{
isShow: true,
ref: 'role',
title: 'Role list',
maxHeight: '500px',
headerCellStyle: {},
showAllCheck: true,
cellStyle: {},
stripe: false,
highLightCurrentRow: false,
hideTitleBar: false,
loading: false,
pageNum: 1,
pageSize: 5,
tableData: [],
emptyText: 'No Data',
total: 0,
toolbar: [
{
btnCode: '',
name: 'upload',
plain: false,
primary: false,
info: false,
text: false,
link: false,
loading: false,
loadingColor: '',
Width: '',
height: '',
circle: '',
color: '',
bgColor: '',
borderColor: '',
borderStyle: '',
borderWidth: '',
icon: '',
size: '',
fontSize: '',
fontWeight: 0,
style: {},
fn: (code: any) => {
console.log(code)
handleUpload()
},
},
{
btnCode: '',
name: 'download',
plain: false,
primary: false,
info: false,
text: false,
link: false,
loading: false,
loadingColor: '',
Width: '',
height: '',
circle: '',
color: '',
bgColor: '',
borderColor: '',
borderStyle: '',
borderWidth: '',
icon: '',
size: '',
fontSize: '',
fontWeight: 0,
style: {
'margin-left': '4px',
},
fn: (code: any) => {
console.log(code)
handleDownload()
},
},
],
// 表格列配置
columns: [
{
label: '全选',
type: 'selection',
},
{
label: 'order',
prop: 'index',
width: 100,
align: 'center',
fixed: 'left',
sortable: true,
},
{
label: 'roleCode',
prop: 'code',
align: 'center',
sortable: true,
},
{
label: 'roleName',
prop: 'name',
align: 'center',
sortable: true,
},
{
label: 'roleStatus',
prop: 'roleStatus',
tdSlot: 'roleStatus',
align: 'center',
sortable: true,
},
{
label: 'createTime',
prop: 'createTime',
align: 'center',
sortable: true,
},
{
label: 'updateTime',
prop: 'updateTime',
align: 'center',
sortable: true,
},
{
label: 'Action',
fixed: 'right',
width: 240,
align: 'center',
tdSlot: 'roleOperations',
},
],
// 分页配置
paginationConfig: {
show: true,
// layout: 'total, prev, pager, next, sizes',
layout: 'total, prev, pager, next, sizes',
pageSize: 5, // 每页条数
pageSizes: [5, 10, 20, 50],
background: false,
style: {},
position: 'right', // left || right
totalText: computed(() => {
return `Showing 1-10 items of ${state.table[1].total} results`
}),
},
// rowKey: {
// type: String,
// default: "id",
// },
tree: {
type: Object,
default: () => ({}),
},
handleSelectionChange: (arr: any) => {
console.log(arr)
},
handleSortChange: (val: any) => {
console.log(val)
if (val.column) {
getRole({
pageNum: state.table[1].pageNum,
searchModel: state.searchModel,
prop: val.prop, // 排序列name 对应columns prop
order: val.order, // 排序规则 ascending升序 descending降序 null原始顺序
})
}
},
handleCurrentChange: (pageNum: number) => {
state.table[1].pageNum = pageNum
getRole({
pageNum: pageNum,
searchModel: state.searchModel,
})
},
handleSizeChange(value: number) {
console.log(value)
state.table[1].pageNum = 1
state.table[1].pageSize = value
getRole({
pageNum: 1,
searchModel: state.searchModel,
})
},
},
],
})
// watch(
// () => state.searchModel,
// (newValue) => {
// console.log(newValue);
// },
// { deep: true }
// );
// 模拟请求api接口
const getUserList = (params: any) => {
let pageNum = params.pageNum
let pageSize = params.pageSize
let list: any = reactive([])
for (let i = (pageNum - 1) * pageSize; i < pageNum * pageSize; i++) {
let idx = i
list.push({
id: idx,
index: idx,
// code: 'userCode -- ' + idx,
// name: 'userName -- ' + idx,
code: '1qwdqwdqwdqwdklqwkdl;qwkld;qkwl;dkq;lwkdl;qwkld;qkwldkqklwhdjkqhwjkdhqjkwhdjkqwhdjkhqwjkdhqkjwhdqwhdkj',
name: '2222222222222222222222222222',
userStatus: idx % 2 === 0 ? 1 : 2,
createTime: idx + 1 + '/09/2023',
})
}
return new Promise((resolve) =>
setTimeout(
() =>
resolve({
data: list,
total: 200,
}),
1000
)
)
}
// 模拟请求api接口
const getRoleList = (params: any) => {
let pageNum = params.pageNum
let pageSize = params.pageSize
let list: any = reactive([])
for (let i = (pageNum - 1) * pageSize; i < pageNum * pageSize; i++) {
let idx = i
list.push({
id: idx,
index: idx,
code: 'roleCode -- ' + idx,
name: 'roleName -- ' + idx,
roleStatus: idx % 2 === 0 ? 2 : 1,
createTime: '2023/09/' + (idx + 1),
})
}
return new Promise((resolve) =>
setTimeout(
() =>
resolve({
data: list,
total: 100,
}),
2000
)
)
}
// 请求
const getUser = async (params: any) => {
state.table[0].loading = true
state.table[0].pageNum = params.pageNum
let res: any = await getUserList({
pageNum: params.pageNum,
pageSize: state.table[0].pageSize,
...params.searchModel,
})
state.table[0].loading = false
state.table[0].tableData = res.data
state.table[0].total = res.total
}
const getRole = async (params: any) => {
state.table[1].loading = true
state.table[1].pageNum = params.pageNum
let res: any = await getRoleList({
pageNum: params.pageNum,
pageSize: state.table[1].pageSize,
...params.searchModel,
})
state.table[1].loading = false
state.table[1].tableData = res.data
state.table[1].total = res.total
}
const getTableData = async (params: any) => {
state.searchModel = params.searchModel
state.advancedModel = params.advancedModel
if (state.init) {
state.init = false
} else {
getUser(params)
getRole(params)
}
}
// 新增
const handleAdd = () => {}
// 查看
const handleCheck = (code: any, row: any) => {
console.log(code, row)
}
// 编辑
const handleEdit = (code: any, row: any) => {
console.log(code, row)
}
// 删除
const handleDelete = (code: any, row: any) => {
console.log(code, row)
}
// 发布
const handlePublish = (code: any, row: any) => {
console.log(code, row)
}
// 下线
const handleOffline = (code: any, row: any) => {
console.log(code, row)
}
// 上传
const handleUpload = () => {
proTable.value?.$refs.role[0].clearSort()
}
// 下载
const handleDownload = () => {
proTable.value?.$refs.role[0].clearSelection()
}
</script>
15 days ago
22 days ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
7 months ago
7 months ago
5 months ago
7 months ago
5 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
7 months ago
7 months ago
7 months ago
8 months ago
8 months ago
9 months ago
10 months ago
12 months ago
12 months ago