| | |
| | | <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> |