zenglf
2023-09-18 92ff846fb659c62037a32b1d8c15eae9df9d9b54
src/views/eam/repairOrderFinishedReport/modules/JSelectSparePartModal.vue
¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,335 @@
<template>
  <!--支持全屏缩放-->
  <a-modal
    :visible='visible'
    :title='title'
    switchFullscreen
    @ok="handleOk"
    @cancel="handleCancel"
    style='top:50px'
    cancelText='关闭'
    :width='1250'
  >
    <a-card :bordered='false'>
      <div class='table-page-search-wrapper'>
        <a-form
          layout='inline'
          @keyup.enter.native='searchQuery'
        >
          <a-row :gutter='24'>
            <a-col
              :md='8'
              :sm='6'
            >
              <a-form-item label='出库单编号'>
                <a-input
                  placeholder='请输入出库单编号'
                  v-model='queryParam.num'
                />
              </a-form-item>
            </a-col>
            <a-col :md='3'>
              <span
                style='float: left;overflow: hidden;'
                class='table-page-search-submitButtons'
              >
                <a-button
                  type='primary'
                  @click='searchQuery'
                  icon='search'
                >查询</a-button>
                <a-button
                  @click='searchReset'
                  icon='reload'
                  style='margin-left: 10px'
                >重置</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <a-table
        ref='table'
        size='middle'
        rowKey='id'
        bordered
        :columns='columns'
        :dataSource='dataSource'
        :pagination='ipagination'
        :customRow="clickThenCheck"
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange,type:type}"
        :loading='loading'
        @change='handleTableChange'
        :scroll="{ x: 'calc(980px)', y: 900 }"
      >
      </a-table>
    </a-card>
  </a-modal>
</template>
<script>
import { filterObj } from '@/utils/util'
import { getAction } from '@/api/manage'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
export default {
  name: 'JSelectSparePartModal',
  mixins: [JeecgListMixin],
  components: {},
  props: {},
  data() {
    return {
      queryParam: {},
      type: "radio",
      columns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
          width: 50
        },
        {
          title: '单据号',
          align: 'center',
          dataIndex: 'num'
        },
        // {
        //   title: '仓库',
        //   align: 'center',
        //   dataIndex: 'warehouseId_dictText'
        // },
        // {
        //   title: '出库部门',
        //   align: 'center',
        //   dataIndex: 'departId_dictText'
        // },
        // {
        //   title: '出库人',
        //   align: 'center',
        //   dataIndex: 'outboundPerson_dictText'
        // },
        {
          title: '备件编码',
          align: 'center',
          dataIndex: 'spareNum'
        },
        {
          title: '备件名称',
          align: 'center',
          dataIndex: 'spareName'
        },
        {
          title: '制造商',
          align: 'center',
          dataIndex: 'constructorName'
        },
        {
          title: '规格',
          align: 'center',
          dataIndex: 'specification'
        },
        {
          title: '型号',
          align: 'center',
          dataIndex: 'model'
        },
        {
          title: '主单位',
          align: 'center',
          dataIndex: 'mainUnitName'
        },
        {
          title: '主数量',
          align: 'center',
          dataIndex: 'mainQuantity'
        },
      ],
      selectedRowKeys: [],
      oldSelectRows: [],
      dataSource: [],
      selectionRows: [],
      title: '根据查询结果选择备件信息',
      ipagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['5', '10', '30', '50', '100'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' å…±' + total + '条'
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },
      isorter: {
        column: 'num',
        order: 'desc'
      },
      visible: false,
      loading: false,
      url: {
        list: '/eam/repairOrder/materialSpareList'
        // list:'/spare/sparePartOutbound/list',
      }
    }
  },
  computed: {
    rowSelection() {
      return {
        type: 'checkbox',
        onChange: (selectedRowKeys, selectedRows) => {
          this.selectedRowKeys = selectedRowKeys
          this.onSelectChange(selectedRows)
        },
        getCheckboxProps: record => ({
          props: {
            disabled: record.distable
          }
        }),
        selectedRowKeys: this.selectedRowKeys
      }
    }
  },
  methods: {
    list() {
      this.selectedRowKeys = [];
      this.selectedRowRecord = [];
      this.visible = true;
      this.loadData(1);
    },
    handleOk() {
      const that = this;
      // è§¦å‘表单验证
      if (that.selectedRowKeys.length > 0) {
        if (that.selectedRowRecord.id != null && that.selectedRowRecord.id != "") {
          that.$emit('sendSparePartRecord', { record: that.selectedRowRecord });
          that.close();
        } else {
          that.$message.error("请选择备件信息!")
        }
      } else {
        that.$message.error("请选择备件信息!")
      }
    },
    clickThenCheck(record) {
      return {
        on: {
          click: (e) => {
            this.selectedRowRecord = record;
            this.onSelectChange(record.id.split(","), [record]);
          }
        }
      };
    },
    handleCancel() {
      this.close();
    },
    // async loadData(arg) {
    //   if (arg === 1) {
    //     this.ipagination.current = 1
    //   }
    //   let that = this
    //   this.loading = true
    //   let params = this.getQueryParams()//查询条件
    //   await getAction(this.url.list, params).then((res) => {
    //     if (res.success) {
    //       for (let i = 0; i < res.result.records.length; i++) {
    //         if (that.oldSelectRows.indexOf(res.result.records[i].id) > -1) {
    //           res.result.records[i].distable = true
    //         } else {
    //           res.result.records[i].distable = false
    //         }
    //       }
    //       this.dataSource = res.result.records
    //       this.ipagination.total = res.result.total
    //     }
    //     if (res.code === 510) {
    //       this.$message.warning(res.message)
    //     }
    //     this.loading = false
    //   })
    // },
    showModals(oldSelectRows) {
      this.oldSelectRows = oldSelectRows
      this.visible = true
      this.loadData(1)
    },
    getQueryParams() {
      let param = Object.assign({}, this.queryParam, this.isorter)
      param.field = this.getQueryField()
      param.pageNo = this.ipagination.current
      param.pageSize = this.ipagination.pageSize
      return filterObj(param)
    },
    //查询条件处理
    getQueryField() {
      let str = 'id,'
      for (let a = 0; a < this.columns.length; a++) {
        str += ',' + this.columns[a].dataIndex
      }
      return str
    },
    searchReset(num) {
      let that = this
      this.queryParam = []
      if (num !== 0) {
        that.loadData(1)
      }
      that.selectborrowIds = []
    },
    close() {
      this.queryParam = {};
      this.$emit('close');
      this.visible = false;
    },
    handleTableChange(pagination, filters, sorter) {
      //TODO ç­›é€‰
      if (Object.keys(sorter).length > 0) {
        this.isorter.column = sorter.field
        this.isorter.order = 'ascend' === sorter.order ? 'asc' : 'desc'
      }
      this.ipagination = pagination
      this.loadData()
    },
    handleSubmit() {
      this.$bus.$emit('selectionRows', this.selectionRows)
      this.searchReset(0)
      this.close()
    },
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys;
      this.selectedRowRecord = selectedRows[0];
    },
    searchQuery() {
      this.loadData(1)
    },
  }
}
</script>
<style scoped>
.ant-table-tbody .ant-table-row td {
  padding-top: 10px;
  padding-bottom: 10px;
}
#components-layout-demo-custom-trigger .trigger {
  font-size: 18px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color 0.3s;
}
</style>