EMS_client/src/views/module_cmms/inspectLine/modules/InspectLineModalAdd.vue

<template>
  <j-modal
  :title="title"
  :width="width"
  :visible="visible"
  @ok="handleOk"
  @cancel="handleCancel"
  cancelText="关闭">
    <a-table
      ref="table"
      size="middle"
      :scroll="{x:true}"
      bordered
      rowKey="id"
      :columns="columns"
      :dataSource="dataSource"
      :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
      :pagination="false"
      class="j-table-force-nowrap">
    </a-table>
  </j-modal>
</template>

<script>
  import { httpAction, getAction } from '@/api/manage'
  
  export default {
    name: 'InspectLineModalAdd',
    components: {
        
    },
    props: {
      //表单禁用
      equipmentId: {
        type: String,
        default: ''
      },
      selectData: {
        type: Array,
        default: function(){
          return [] // 使用工厂函数返回默认值
        }
      },
    },
    data () {
      return {
        title:'',
        width: 1000,
        visible: false,
        type: '',
        /* table选中keys*/
        selectedRowKeys: [],
        /* table选中records*/
        selectionRows: [],
        columns: [
          // {
          //   title: '',
          //   dataIndex: '',
          //   key:'rowIndex',
          //   width:60,
          //   align:"center",
          //   customRender:function (t,r,index) {
          //     return parseInt(index)+1;
          //   }
          // },
          {
            title:'巡检点编号',
            align:"center",
            dataIndex: 'contentcode'
          },
          {
            title:'巡检点名称',
            align:"center",
            dataIndex: 'contentname'
          },
          {
            title:'备注',
            align:"center",
            dataIndex: 'remark'
          },
        ],
        dataSource: [],
        url: {
          getList: "/cmmsInspectItem/cmmsInspectItem/getItemByEqId",
          spotList: "/cmmsInspectSpot/cmmsInspectSpot/listDetails",
        },
      }
    },
    methods: {
      add () {
        this.visible = true;
        //  {status: '0'}
        getAction(this.url.spotList).then((res) => {
          this.dataSource = res.result.records
        })
        this.selectList()
      },
      // 将以选中的值重新在列表中选中
      selectList() {
        this.selectionRows = this.selectData
        console.log(this.selectData)
        this.selectedRowKeys = this.selectData.map((res) => {
          return res.id
        })
      },
      close () {
        this.$emit('close');
        this.visible = false;
        this.onClearSelected()
        this.selectionRows = this.selectData
        this.selectedRowKeys = this.selectData.map((res) => {
          return res.id
        })
        this.dataSource = []
      },
      handleOk () {
        console.log(this.selectionRows)
        this.$emit('ok', this.selectionRows);
        this.visible = false;
      },
      handleCancel () {
        this.close()
      },
      onSelectChange(selectedRowKeys, selectionRows) {
        this.selectedRowKeys = selectedRowKeys;
        this.selectionRows = selectionRows;
        console.log(this.selectedRowKeys,this.selectionRows)
      },
      onClearSelected() {
        this.selectedRowKeys = [];
        this.selectionRows = [];
      },
    }
  }
</script>