diantou/src_product/iam/audit/dataMarket/data-table-picker.vue

<template>
  <div>
    <a-modal
      :body-style="bodyStyle"
      :title="title"
      :destroy-on-close="true"
      :visible="visible"
      :width="modalWidth"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <!-- 列表 -->
      <SdTable
        ref="SJMXDataTable"
        :row-key="(record, index) => index"
        :columns="columns"
        :pagination="false"
        :data-source="dataList"
        :row-selection="{
          getCheckboxProps() {
            return {}
          },
          selectedRowKeys: selectedRowKeys,
          onChange: onSelectChange,
        }"
      >
      </SdTable> </a-modal
  ></div>
</template>

<script>
import components from './_import-components/data-table-picker-import'
import SdTable from '@/common/components/sd-table.vue'
import apis from './data-market'
export default {
  name: 'DataTablePicker',
  metaInfo: {
    title: 'DataTablePicker',
  },
  components: {
    ...components,
    SdTable,
  },
  props: {
    title: {
      type: String,
      default: '数据表选择器',
    },
    // 弹出窗宽度
    modalWidth: {
      type: String,
      default: '1200px',
    },
    // 弹出窗显示参数
    visible: {
      type: Boolean,
      default: false,
    },
    classData: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      columns: [
        {
          title: '序号',
          dataIndex: 'sortNum',
          key: 'sortNum',
          customRender: (text, record, index) => `${index + 1}`,
          width: '80px',
        },
        {
          title: '表中文名称',
          dataIndex: 'tableNameCN',
        },
        {
          title: '表英文名称',
          dataIndex: 'tableNameEN',
        },
        {
          title: '所属分类',
          dataIndex: 'classifyName',
        },
      ],
      dataList: [],
      selectedRowKeys: [],
      selectedRows: [],
      bodyStyle: {
        minHeight: '700px',
      },
    }
  },
  watch: {
    classData: {
      handler(val) {
        this.dataList = []
        this.getDataList()
      },
      deep: true,
    },
  },

  created() {
    this.getDataList()
  },

  methods: {
    getDataList() {
      this.dataList = []
      const ids = this.classData.map((item) => item.id)
      // 获取全部信息
      const datas = []
      for (let i = 0; i < ids.length; i++) {
        apis.findOutsideAll(ids[i]).then((data) => {
          if (data.length > 0) {
            datas.push(...data)
            this.dataList = datas
          }
        })
      }
    },
    handleOk(e) {
      this.$parent.showSelectTable = !this.$parent.showSelectTable
      this.$emit('listMxSelected', this.selectedRowKeys, this.selectedRows)
    },
    handleCancel(e) {
      this.$parent.showSelectTable = !this.$parent.showSelectTable
    },
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
</style>