| | |
| | | <template> |
| | | <a-card |
| | | :bordered="false" |
| | | title="线边库物料信息" |
| | | > |
| | | :bordered="false"> |
| | | <div class="table-page-search-wrapper"> |
| | | <a-form layout="inline" @keyup.enter.native="searchQuery"> |
| | | <a-row :gutter="24"> |
| | | <a-col :xl="6" :lg="7" :md="8" :sm="24"> |
| | | <a-col :xl="4" :lg="7" :md="8" :sm="24"> |
| | | <a-form-item label="物料编码"> |
| | | <j-input placeholder="请输入物料编码" v-model="queryParam.materialNumber"></j-input> |
| | | </a-form-item> |
| | |
| | | <j-input placeholder="请输入物料名称" v-model="queryParam.materialName"></j-input> |
| | | </a-form-item> |
| | | </a-col> |
| | | <a-col :xl="6" :lg="7" :md="8" :sm="24"> |
| | | <a-form-item label="物料型号"> |
| | | <j-input placeholder="请输入物料型号" v-model="queryParam.materialModel"></j-input> |
| | | <a-col :xl="4" :lg="7" :md="8" :sm="24"> |
| | | <a-form-item label="状态"> |
| | | <j-dict-select-tag placeholder="请选择状态" dictCode="dict_item_status" |
| | | v-model="queryParam.materialStatus"></j-dict-select-tag> |
| | | </a-form-item> |
| | | </a-col> |
| | | <a-col :xl="6" :lg="7" :md="8" :sm="24"> |
| | | <a-col :xl="4" :lg="7" :md="8" :sm="24"> |
| | | <a-form-item label="物料类型"> |
| | | <j-dict-select-tag placeholder="请输入物料类型" dictCode="material_category" v-model="queryParam.materialCategory"></j-dict-select-tag> |
| | | <j-dict-select-tag placeholder="请选择物料类型" dictCode="material_category" |
| | | v-model="queryParam.materialCategory"></j-dict-select-tag> |
| | | </a-form-item> |
| | | </a-col> |
| | | <a-col :xl="6" :lg="7" :md="8" :sm="24"> |
| | | <a-col :xl="2" :lg="7" :md="8" :sm="24"> |
| | | <a-form-item label="空类型"> |
| | | <a-switch v-model="queryParam.materialCategoryNull"></a-switch> |
| | | </a-form-item> |
| | | </a-col> |
| | | <a-col :xl="4" :lg="7" :md="8" :sm="24"> |
| | | <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons"> |
| | | <a-button type="primary" @click="searchQuery" icon="search">查询</a-button> |
| | | <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button> |
| | | <a-button type="info" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button> |
| | | </span> |
| | | </a-col> |
| | | </a-row> |
| | | </a-form> |
| | | </div> |
| | | <!-- <a-button @click="handleAdd" type="primary" icon="plus">新增物料信息-测试</a-button>--> |
| | | <a-spin :spinning="confirmLoading"> |
| | | <a-spin :spinning="loading"> |
| | | <div> |
| | | <!-- 主表单区域 --> |
| | | <a-table |
| | |
| | | size="middle" |
| | | bordered |
| | | rowKey="id" |
| | | :rowClassName="tableRowClass" |
| | | :columns="columns" |
| | | :dataSource="dataSource" |
| | | :pagination="ipagination" |
| | | :loading="loading" |
| | | :rowSelection="{ selectedRowKeys: selectedRowKeys, |
| | | onChange: onSelectChange, |
| | | type: 'radio'}" |
| | | :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange, type: 'radio'}" |
| | | :customRow="customTableRow" |
| | | @change="handleTableChange"> |
| | | <!--状态栏个性展示--> |
| | | <span |
| | | slot="status" |
| | | slot-scope="text,record" |
| | | > |
| | | <a-badge |
| | | v-if="record.materialStatus==='1'" |
| | | status="success" |
| | | /> |
| | | <span |
| | | v-if="record.materialStatus==='1'" |
| | | class="success" |
| | | >启用</span> |
| | | <a-badge |
| | | v-if="record.materialStatus==='0'" |
| | | status="error" |
| | | /> |
| | | <span |
| | | v-if="record.materialStatus==='0'" |
| | | class="error" |
| | | >禁用</span> |
| | | </span> |
| | | <span |
| | | slot="action" |
| | | slot-scope="text, record" |
| | | > |
| | | <a |
| | | href="javascript:;" |
| | | @click="handleEdit(record)" |
| | | >编辑</a> |
| | | |
| | | <a-divider type="vertical" /> |
| | | <a-dropdown> |
| | | <a class="ant-dropdown-link">更多 |
| | | <a-icon type="down" /> |
| | | </a> |
| | | <a-menu slot="overlay"> |
| | | <a-menu-item> |
| | | <a @click="handleDetail(record)">详情</a> |
| | | </a-menu-item> |
| | | <a-menu-item v-if="record.materialStatus === '1'"> |
| | | <a-popconfirm |
| | | title="确定禁用吗?" |
| | | @confirm="() => handleActive(record)" |
| | | > |
| | | <a>禁用</a> |
| | | </a-popconfirm> |
| | | </a-menu-item> |
| | | <a-menu-item v-else> |
| | | <a-popconfirm |
| | | title="确定启用吗?" |
| | | @confirm="() => handleActive(record)" |
| | | > |
| | | <a>启用</a> |
| | | </a-popconfirm> |
| | | </a-menu-item> |
| | | </a-menu> |
| | | </a-dropdown> |
| | | </span> |
| | | </a-table> |
| | | </div> |
| | | <!-- 子表单区域 --> |
| | | <a-tabs v-model="activeKey" @change="handleChangeTabs"> |
| | | <a-tab-pane tab="物料库存信息" :key="refKeys[0]" :forceRender="true"> |
| | | <div style="display: flex; align-items: center; margin-bottom: 10px;"> |
| | | <a-tag color="green" style="font-weight: bold;"> |
| | | 库存总量:{{ totalInventoryQuantity }} |
| | | </a-tag> |
| | | </div> |
| | | <j-vxe-table |
| | | keep-source |
| | | :ref="refKeys[0]" |
| | | :loading="lswMaterialInventoryTable.loading" |
| | | :columns="lswMaterialInventoryTable.columns" |
| | | :dataSource="lswMaterialInventoryTable.dataSource" |
| | | :maxHeight="300" |
| | | :rowNumber="true" |
| | | :rowSelection="true" |
| | | :toolbar="false" |
| | | /> |
| | | <a-tabs v-model="activeKey"> |
| | | <a-tab-pane tab="库存明细" key="lswMaterialInventory" :forceRender="true"> |
| | | <lsw-material-inventory-list ref="lswMaterialInventory" /> |
| | | </a-tab-pane> |
| | | </a-tabs> |
| | | </a-spin> |
| | |
| | | <script> |
| | | |
| | | import { getAction } from '@/api/manage' |
| | | import { JVxeTableModelMixin } from '@/mixins/JVxeTableModelMixin.js' |
| | | import { JVXETypes } from '@/components/jeecg/JVxeTable' |
| | | import { getRefPromise, VALIDATE_FAILED } from '@/components/jeecg/JVxeTable/utils/vxeUtils.js' |
| | | import { validateDuplicateValue } from '@/utils/util' |
| | | import JFormContainer from '@/components/jeecg/JFormContainer' |
| | | import { JeecgListMixin } from '@/mixins/JeecgListMixin' |
| | | import LswMaterialModal from '@views/lsw/modules/LswMaterialModal.vue' |
| | | import LswMaterialInventoryList from './LswMaterialInventoryList.vue' |
| | | |
| | | export default { |
| | | name: 'LswMaterialForm', |
| | | mixins: [JVxeTableModelMixin, JeecgListMixin], |
| | | name: 'LswMaterialView', |
| | | mixins: [JeecgListMixin], |
| | | components: { |
| | | LswMaterialModal, |
| | | JFormContainer |
| | | LswMaterialInventoryList |
| | | }, |
| | | data() { |
| | | return { |
| | |
| | | validatorRules: {}, |
| | | selectedRowKeys: [], // 初始化为空数组(单选时存储单个key) |
| | | selectedRowData: null, |
| | | refKeys: ['lswMaterialInventory'], |
| | | tableKeys: ['lswMaterialInventory'], |
| | | activeKey: 'lswMaterialInventory', |
| | | columns: [ |
| | | { |
| | |
| | | dataIndex: 'materialName' |
| | | }, |
| | | { |
| | | title: '物料型号', |
| | | title: '物料状态', |
| | | align: 'center', |
| | | dataIndex: 'materialModel' |
| | | scopedSlots: { |
| | | customRender: 'status' |
| | | }, |
| | | dataIndex: 'materialStatus' |
| | | }, |
| | | { |
| | | title: '物料类型', |
| | |
| | | dataIndex: 'materialCategory_dictText' |
| | | }, |
| | | { |
| | | title: '单位', |
| | | title: '基本计量单位', |
| | | align: 'center', |
| | | dataIndex: 'materialUnit' |
| | | }, |
| | | { |
| | | width: 150, |
| | | title: '操作', |
| | | dataIndex: 'action', |
| | | align: 'center', |
| | | scopedSlots: { customRender: 'action' } |
| | | } |
| | | ], |
| | | // 物料库存信息 |
| | | lswMaterialInventoryTable: { |
| | | loading: false, |
| | | dataSource: [], |
| | | columns: [ |
| | | { |
| | | title: '批次号', |
| | | key: 'batchNumber', |
| | | type: JVXETypes.input, |
| | | width: '200px', |
| | | placeholder: '请输入${title}', |
| | | defaultValue: '' |
| | | }, |
| | | { |
| | | title: '库存类型', |
| | | key: 'inventoryCategory', |
| | | type: JVXETypes.input, |
| | | width: '200px', |
| | | placeholder: '请输入${title}', |
| | | defaultValue: '' |
| | | }, |
| | | { |
| | | title: '数量', |
| | | key: 'quantity', |
| | | type: JVXETypes.input, |
| | | width: '200px', |
| | | placeholder: '请输入${title}', |
| | | defaultValue: '' |
| | | }, |
| | | { |
| | | title: '库存地', |
| | | key: 'warehouseName', |
| | | type: JVXETypes.input, |
| | | width: '200px', |
| | | placeholder: '请输入${title}', |
| | | defaultValue: '' |
| | | }, |
| | | { |
| | | title: '库存状态', |
| | | key: 'inventoryStatus', |
| | | type: JVXETypes.input, |
| | | width: '200px', |
| | | placeholder: '请输入${title}', |
| | | defaultValue: '' |
| | | } |
| | | ] |
| | | }, |
| | | url: { |
| | | //searchlikeQuery |
| | | list: '/lswmaterial/lswMaterial/list', |
| | | queryById: '/lswmaterial/lswMaterial/queryById', |
| | | lswMaterialInventory: { |
| | | list: '/lswmaterial/lswMaterial/queryLswMaterialInventoryByMainId' |
| | | } |
| | | list: '/lsw/lswMaterial/list', |
| | | edit: '/lsw/lswMaterial/edit', |
| | | active: '/lsw/lswMaterial/active', |
| | | inactive: '/lsw/lswMaterial/inactive', |
| | | queryById: '/lsw/lswMaterial/queryById', |
| | | } |
| | | } |
| | | }, |
| | |
| | | formDisabled() { |
| | | return this.disabled |
| | | }, |
| | | totalInventoryQuantity() { |
| | | if (!this.lswMaterialInventoryTable.dataSource || this.lswMaterialInventoryTable.dataSource.length === 0) { |
| | | return '0'; |
| | | } |
| | | return this.lswMaterialInventoryTable.dataSource.reduce((sum, item) => { |
| | | const quantity = Number(item.quantity) || 0; |
| | | return sum + quantity; |
| | | }, 0); |
| | | }, |
| | | }, |
| | | created() { |
| | | }, |
| | | methods: { |
| | | handleCustomAdd(){ |
| | | console.log('点击新增了') |
| | | }, |
| | | handleTableChange() { |
| | | console.log('test---->', this.selectedRowKeys[0]) |
| | | //禁用状态样式 |
| | | tableRowClass(record, index) { |
| | | if (record.warehouseStatus != '1') { |
| | | return 'frozenRowClass' |
| | | } |
| | | return '' |
| | | }, |
| | | async onSelectChange(selectedRowKeys) { |
| | | this.lswMaterialInventoryTable.loading = true |
| | | // 单选模式下,selectedRowKeys 是数组,但长度最多为1 |
| | | console.log('点击了---->') |
| | | this.selectedRowKeys = selectedRowKeys |
| | | this.lswMaterialInventoryTable.dataSource=[] |
| | | // 获取选中行的完整数据 |
| | | if (selectedRowKeys.length > 0) { |
| | | const selectedId = selectedRowKeys[0] // 选中行的id |
| | | const lswMaterialInventoryResult = await getAction(this.url.lswMaterialInventory.list, { 'id': selectedId }) |
| | | this.lswMaterialInventoryTable.dataSource = lswMaterialInventoryResult.result |
| | | this.lswMaterialInventoryTable.loading = false |
| | | if (selectedRowKeys.length === 1) { |
| | | //加载库存信息 |
| | | this.$refs.lswMaterialInventory.queryParam.materialId = this.selectedRowKeys[0] |
| | | this.$refs.lswMaterialInventory.loadData(1) |
| | | this.$refs.lswMaterialInventory.statisticsInventory(this.selectedRowKeys[0]) |
| | | }else { |
| | | //库存信息清空 |
| | | this.$refs.lswMaterialInventory.queryParam.materialId = 'null' |
| | | this.$refs.lswMaterialInventory.loadData(1) |
| | | this.$refs.lswMaterialInventory.statisticsInventory('null') |
| | | } |
| | | } |
| | | |
| | | }, |
| | | handleActive(record) { |
| | | let url = this.url.active; |
| | | if (record.materialStatus === '1') { |
| | | url = this.url.inactive |
| | | } |
| | | let that = this |
| | | getAction(url, { id: record.id }).then((res) => { |
| | | if (res.success) { |
| | | that.$message.success(res.message) |
| | | that.loadData() |
| | | } else { |
| | | that.$message.warning(res.message) |
| | | } |
| | | }) |
| | | }, |
| | | /** |
| | | * 自定义表格行 |
| | | * @param record 表格行信息 |
| | | * @returns {{style: {cursor: string}, on: {click: *}}} 样式对象与事件方法 |
| | | */ |
| | | customTableRow(record) { |
| | | return { |
| | | style: { |
| | | cursor: 'pointer' |
| | | }, |
| | | on: { |
| | | click: () => { |
| | | this.onSelectChange([record.id]) |
| | | } |
| | | } |
| | | } |
| | | }, |
| | | } |
| | | } |
| | | </script> |
| | | |
| | | <style scoped> |
| | | <style lang="less" scoped> |
| | | @import '~@assets/less/common.less'; |
| | | |
| | | .frozenRowClass { |
| | | color: #c9c9c9; |
| | | } |
| | | |
| | | .success { |
| | | color: green; |
| | | } |
| | | |
| | | .error { |
| | | color: red; |
| | | } |
| | | |
| | | .fontweight { |
| | | font-weight: bold; |
| | | } |
| | | |
| | | .ant-card-body .table-operator { |
| | | margin-bottom: 18px; |
| | | } |
| | | |
| | | .ant-table-tbody .ant-table-row td { |
| | | padding-top: 15px; |
| | | padding-bottom: 15px; |
| | | } |
| | | |
| | | .anty-row-operator button { |
| | | margin: 0 5px; |
| | | } |
| | | |
| | | /deep/ .ant-btn-danger { |
| | | background-color: #ffffff; |
| | | } |
| | | |
| | | .ant-modal-cust-warp { |
| | | height: 100%; |
| | | } |
| | | |
| | | .ant-modal-cust-warp .ant-modal-body { |
| | | height: calc(100% - 110px) !important; |
| | | overflow-y: auto; |
| | | } |
| | | |
| | | .ant-modal-cust-warp .ant-modal-content { |
| | | height: 90% !important; |
| | | overflow-y: hidden; |
| | | } |
| | | </style> |