EMS_client/src/views/module_ems/cmmsSpotcheckContent/modules/CmmsSpotcheckContentModalAdd.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: 'CmmsSpotcheckContentModalAdd',
    components: {
        
    },
    props: {
      //表单禁用
      modelForm: {
        type: Object,
        default: function(){
            return {} // 使用工厂函数返回默认值
        }
      },
      dataList: {
        type: Array,
        default: function(){
            return [] // 使用工厂函数返回默认值
        }
      },
    },
    data () {
      return {
        title:'',
        width:1000,
        visible: false,
        /* 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:'点检项ID',
            align:"center",
            dataIndex: 'id'
          },
          {
            title:'点检项编号',
            align:"center",
            dataIndex: 'itemcode'
          },
          {
            title:'点检项名称',
            align:"center",
            dataIndex: 'itemname'
          },
          {
            title:'标准',
            align:"center",
            dataIndex: 'conditions',
          },
          {
            title:'备注',
            align:"center",
            dataIndex: 'remark'
          }
        ],
        dataSource: [],
        url: {
            getList: "/cmmsSpotcheckItem/cmmsSpotcheckItem/listbyequipmentid/{equipmentid}"
        },
      }
    },
    methods: {
      add () {
        this.visible = true;
        getAction(`/cmmsSpotcheckItem/cmmsSpotcheckItem/listbyequipmentid/${this.modelForm.equipmentid}`).then((res) => {
            this.dataSource = res.result
        })
      },
      // 将以选中的值重新在列表中选中
      selectList() {
        this.selectionRows = this.dataList
        this.selectedRowKeys = this.dataList.map((res) => {
            return res.id
        })
      },  
      close () {
        this.$emit('close');
        this.visible = false;
        this.onClearSelected()
        this.selectionRows = this.dataList
        this.selectedRowKeys = this.dataList.map((res) => {
            return res.id
        })
      },
      handleOk () {
        console.log(this.selectionRows)
        this.$emit('customEvent', this.selectionRows);
        this.visible = false;
      },
      submitCallback(){
        this.$emit('ok');
        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>