EMS_client/src/views/module_cmms/inspectContent/modules/InspectContentModalAdd.vue

<template>
  <j-modal
  :title="title"
  :width="width"
  :visible="visible"
  @ok="handleOk"
  @cancel="handleCancel"
  cancelText="关闭">
    <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
      <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
      <a style="margin-left: 24px" @click="onClearSelected">清空</a>
    </div>
    <a-table
      ref="table"
      size="middle"
      :scroll="{x:true}"
      bordered
      rowKey="id"
      :columns="columns"
      :dataSource="dataSource"
      :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange, onSelect: onSelect}"
      :pagination="ipagination"
      @change="handleTableChange"
      class="j-table-force-nowrap">
    </a-table>
  </j-modal>
</template>

<script>
  import { httpAction, getAction } from '@/api/manage'
  import { mixinDevice } from '@/utils/mixin'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  
  export default {
    name: 'SpotcheckContentModalAdd',
    mixins:[JeecgListMixin, mixinDevice],
    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:'巡检标准ID',
          //   align:"center",
          //   dataIndex: 'id'
          // },
          {
            title:'巡检标准编号',
            align:"center",
            dataIndex: 'itemcode'
          },
          {
            title:'巡检标准名称',
            align:"center",
            dataIndex: 'itemname'
          },
          {
            title:'标准',
            align:"center",
            dataIndex: 'inspectionstandards',
          },
          {
            title:'备注',
            align:"center",
            dataIndex: 'remark'
          }
        ],
        dataSource: [],
        chooseData: [],
        url: {
          getList: "/cmmsInspectItem/cmmsInspectItem/getItemByEqId",
          itemList: "/cmmsInspectItem/cmmsInspectItem/list",
        },
      }
    },
    watch: {
      selectData: {
        handler(newV, oldV){
          console.log(newV, oldV)
          if(newV.length > 0){
            this.selectList()
          }
        },
      }
    },
    methods: {
      add(){
        this.visible = true;
        this.loadData()
      },
      loadData () {
        // console.log(this.type)
        var params = this.getQueryParams();//查询条件
        this.loading = true;
        if(this.type === '1'){
          params.eqid = this.equipmentId
          getAction(this.url.getList, params).then((res) => {
            if (res.success) {
              this.dataSource = res.result.records||res.result;
              if(res.result.total)
              {
                this.ipagination.total = res.result.total;
              }else{
                this.ipagination.total = 0;
              }
              // this.selectList()
            }else{
              this.$message.warning(res.message)
            }
          }).finally(() => {
            this.loading = false
          })
        } else {
          params.classification = this.type
          getAction(this.url.itemList, params).then((res) => {
            if (res.success) {
              this.dataSource = res.result.records||res.result;
              if(res.result.total)
              {
                this.ipagination.total = res.result.total;
              }else{
                this.ipagination.total = 0;
              }
              // this.selectList()
            }else{
              this.$message.warning(res.message)
            }
          }).finally(() => {
            this.loading = false
          })
        }
      },
      // 将以选中的值重新在列表中选中
      selectList() {
        this.chooseData = [...this.selectData]
        console.log('chooseData', this.chooseData)
        this.selectedRowKeys = this.chooseData.map((res) => {
          return res.id
        })
        console.log(this.selectedRowKeys)
      },
      close () {
        this.visible = false;
      },
      handleOk () {
        this.$emit('ok', this.chooseData);
        console.log(this.chooseData)
        this.visible = false;
      },
      handleCancel () {
        this.close()
      },
      onSelect(selectedRow, selected){
        // console.log(selectedRow, selected)
        if(selected){
          // 新增
          this.chooseData.push(selectedRow)
        } else {
          // 删除(过滤)
          var index = this.chooseData.findIndex(item => item.id === selectedRow.id)
          this.chooseData.splice(index, 1)
        }
      },
    }
  }
</script>