vue另外一种写法

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