sinosoft-common-tablepro v2.0.2

安装和引入

安装

// 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 属性的配置，是一个数组

• row-key 属性配置

  对应 el-table 的 row-key，默认值是'id'

搜索配置

• search 属性的配置，是一个对象

  如果不想显示搜索表单，可以不配置 search 或者 search 设置为 false

• fields 列表的字段类型配置

分页配置

• pagination 属性的配置，是一个对象

  如果不想显示分页，将 pagination 设置为 false

标题栏配置

表格上方有一个标题栏，标题栏左侧显示一个标题，右侧是一个可自定义的工具栏

• 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>