“linengliang”
2023-09-14 c887bb7836b82573c0bc7d11b8dd46b4d7e522e1
src/views/eam/modules/predictiveWorkOrder/select/ActualMaterialSelect.vue
@@ -1,230 +1,292 @@
<template>
  <!--支持全屏缩放-->
  <a-modal
    :title="title"
    :width="1000"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭"
    :visible='visible'
    :title='title'
    switchFullscreen
    @ok='handleSubmit'
    @cancel='close'
    style='top:50px'
    cancelText='关闭'
    :width='1250'
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <!-- 查询区域 -->
        <div class="table-page-search-wrapper">
          <a-form
            layout="inline"
            @keyup.enter.native="searchQuery"
          >
            <a-row :gutter="24">
              <a-col
                :md="6"
                :sm="8"
              >
                <a-form-item label="物料编码">
                  <j-input
                    placeholder="请输入物料编码"
                    v-model="queryParam.num"
                  ></j-input>
                </a-form-item>
              </a-col>
              <a-col
                :md="6"
                :sm="8"
              >
                <a-form-item label="物料名称">
                  <j-input
                    placeholder="请输入物料名称"
                    v-model="queryParam.name"
                  ></j-input>
                </a-form-item>
              </a-col>
              <a-col
                :md="6"
                :sm="8"
    <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"
                  type='primary'
                  @click='searchQuery'
                  icon='search'
                >查询</a-button>
                <a-button
                  @click="searchReset"
                  icon="reload"
                  style="margin-left:8px;"
                  @click='searchReset'
                  icon='reload'
                  style='margin-left: 10px'
                >重置</a-button>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :span="24">
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <a-table
        ref='table'
        size='middle'
        rowKey='id'
        bordered
        :columns='columns'
        :dataSource='dataSource'
        :pagination='ipagination'
        :rowSelection='rowSelection'
        :loading='loading'
        @change='handleTableChange'
        :scroll="{ x: 'calc(980px)', y: 900 }"
      >
              </a-col>
            </a-row>
          </a-form>
        </div>
        <div style="margin-top:8px;">
          <a-table
            ref="table"
            bordered
            size="middle"
            rowKey="id"
            :columns="columns"
            :dataSource="dataSource"
            :pagination="ipagination"
            :loading="loading"
            :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange, type: 'radio'}"
            @change="handleTableChange"
            :customRow="clickThenCheck"
          >
          </a-table>
        </div>
      </a-form>
    </a-spin>
      </a-table>
    </a-card>
  </a-modal>
</template>
<script>
import pick from 'lodash.pick'
import { httpAction, getAction } from '@/api/manage'
import { filterObj } from '@/utils/util'
import { getAction } from '@/api/manage'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import JInput from '@/components/jeecg/JInput'
export default {
  name: "MaterialSelectTable",
  name: 'JSelectSparePartModal',
  mixins: [JeecgListMixin],
  components: {
    JInput
  },
  components: {},
  props: {},
  data() {
    return {
      title: "操作",
      visible: false,
      model: {},
      confirmLoading: false,
      form: this.$form.createForm(this),
      queryParam: {},
      columns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 50,
          align: 'center',
          customRender: function (t, r, index) {
          customRender: function(t, r, index) {
            return parseInt(index) + 1
          }
          },
          width: 50
        },
        {
          title: '物料编号',
          title: '单据号',
          align: 'center',
          dataIndex: 'num',
          sorter: true,
          dataIndex: 'num'
        },
        {
          title: '物料名称',
          title: '备件编码',
          align: 'center',
          dataIndex: 'name',
          sorter: true,
          dataIndex: 'spareNum'
        },
        {
          title: '物料规格',
          title: '备件名称',
          align: 'center',
          dataIndex: 'specification',
          sorter: true,
          dataIndex: 'spareName'
        },
        {
          title: '物料型号',
          title: '制造商',
          align: 'center',
          dataIndex: 'model',
          sorter: true,
          dataIndex: 'constructorName'
        },
        {
          title: '单位',
          title: '规格',
          align: 'center',
          dataIndex: 'unitId_dictText',
          sorter: true,
          dataIndex: 'specification'
        },
        {
          title: '型号',
          align: 'center',
          dataIndex: 'model'
        },
        {
          title: '主单位',
          align: 'center',
          dataIndex: 'mainUnitName'
        },
        {
          title: '主数量',
          align: 'center',
          dataIndex: 'mainQuantity'
        },
        {
          title: '可用数量',
          align: 'center',
          dataIndex: 'availableQuantity'
        },
      ],
      url: {
        list: "/base/material/list",
      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
      },
      index: '',
      isorter: {
        column: 'num',
        order: 'desc'
      },
      visible: false,
      loading: false,
      url: {
        list: '/eam/repairOrder/materialSpareList'
        // list:'/spare/sparePartOutbound/list',
      }
    }
  },
  methods: {
    searchQuery() {
      this.loadData(1);
    },
    list(index) {
      this.visible = true;
      this.index = index;
      this.loadData(1);
    },
    clickThenCheck(record) {
  computed: {
    rowSelection() {
      return {
        on: {
          click: (e) => {
            this.selectedRowRecord = record;
            this.onSelectChange(record.id.split(","), [record]);
        type: 'checkbox',
        onChange: (selectedRowKeys, selectedRows) => {
          this.selectedRowKeys = selectedRowKeys
          this.onSelectChange(selectedRows)
        },
        getCheckboxProps: record => ({
          props: {
            disabled: record.distable
          }
        }
      };
    },
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys;
      this.selectedRowRecord = selectedRows[0];
    },
    close() {
      this.queryParam = {};
      this.$emit('close');
      this.visible = false;
      this.selectedRowKeys = [];
    },
    handleOk() {
      const that = this;
      // 触发表单验证
      if (that.selectedRowKeys.length > 0) {
        if (that.selectedRowRecord.id != null && that.selectedRowRecord.id != "") {
          that.$emit('sendMaterialRecord', { index: this.index, record: that.selectedRowRecord });
          that.close();
        } else {
          that.$message.error("请选择物料!")
        }
      } else {
        that.$message.error("请选择物料!")
        }),
        selectedRowKeys: this.selectedRowKeys
      }
    }
  },
  methods: {
    async loadData(arg) {
      if (arg === 1) {
        this.ipagination.current = 1
      }
      const that = this
      //this.loading = true
      this.queryParam.status = '1'
      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
      })
    },
    handleCancel() {
      this.close();
    showModals(oldSelectRows) {
      this.selectionRows = []
      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.selectedRowKeys = []
      this.selectionRows = []
      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() {
      if(this.selectionRows.length==0){
        this.$message.warn("请选择备件");
         return false;
      }
      this.$emit('getSelectRows', this.selectionRows)
      this.close()
    },
    onSelectChange(selectionRows) {
      this.selectionRows = selectionRows
    },
    searchQuery() {
      this.loadData(1)
    },
  }
}
</script>
<style>
@import '~@assets/less/common.less';
.frozenRowClass {
  color: #c9c9c9;
<style scoped>
.ant-table-tbody .ant-table-row td {
  padding-top: 10px;
  padding-bottom: 10px;
}
.fontweight {
  font-weight: bold;
}
.fontweightfrozen {
  font-weight: bold;
  color: #c9c9c9;
}
.success {
  color: green;
}
.error {
  color: red;
#components-layout-demo-custom-trigger .trigger {
  font-size: 18px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color 0.3s;
}
</style>