yudao-dev/src/views/warehouse/part-material/warehouseRealtime/index.vue

<!--
 * @Author: zwq
 * @Date: 2023-11-03 16:37:06
 * @LastEditors: zwq
 * @LastEditTime: 2023-11-24 14:35:51
 * @Description:
-->
<template>
	<div class="app-container">
		<search-bar
			:formConfigs="formConfig"
			ref="searchBarForm"
			@headBtnClick="buttonClick" />
		<el-table
			:data="tableData"
			:header-cell-style="{
				background: '#F2F4F9',
				color: '#606266',
			}"
			border
			v-loading="dataListLoading"
			style="width: 100%"
			ref="dataList">
			<el-table-column type="expand">
				<template slot-scope="scope">
					<product :warehouse-id="scope.row.id"></product>
				</template>
			</el-table-column>
			<el-table-column prop="warehouseName" label="仓库名称" />
			<el-table-column prop="name" label="物品名称" />
			<el-table-column prop="code" label="物品编码" />
			<el-table-column prop="spec" label="物品规格" />
			<el-table-column prop="num" label="数量" />
			<el-table-column prop="operator" label="操作人" />
			<el-table-column prop="latestInTime" label="最新入库时间">
				<template v-slot="scope">
					<span>{{ parseTime(scope.row.latestInTime) }}</span>
				</template>
			</el-table-column>
			<el-table-column prop="latestOutTime" label="最新出库时间">
				<template v-slot="scope">
					<span>{{ parseTime(scope.row.latestOutTime) }}</span>
				</template>
			</el-table-column>
			<el-table-column label="操作" width="100">
				<template v-slot="scope">
					<el-button
						size="mini"
						type="text"
						@click="handleClick({ data:  scope.row, type: 'out' })"
						v-hasPermi="['part-material:warehouse-realtime:update']">
						出库
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		<pagination
			:limit.sync="listQuery.pageSize"
			:page.sync="listQuery.pageNo"
			:total="listQuery.total"
			@pagination="getDataList" />
		<!-- 对话框(添加 / 修改) -->
		<base-dialog
			:dialogTitle="addOrEditTitle"
			:dialogVisible="addOrUpdateVisible"
			@cancel="handleCancel"
			@confirm="handleConfirm"
			:before-close="handleCancel"
			width="40%">
			<add-or-update
				ref="addOrUpdate"
				@refreshDataList="successSubmit"></add-or-update>
		</base-dialog>
	</div>
</template>

<script>
import product from './product-mini';
import basicPage from '../../mixins/basic-page';
import { getListByType } from '@/api/warehouse/warehouseGoods';
import AddOrUpdate from './add-or-updata';
import { getWarehouseRealtimePage } from '@/api/warehouse/warehouseRealtime';
export default {
	mixins: [basicPage],
	data() {
		return {
			urlOptions: {
				getDataListURL: getWarehouseRealtimePage,
			},
			tableData: [],
			listQuery: {
				storageType: 4,
			},
			formConfig: [
				{
					type: 'select',
					label: '物品名称',
					selectOptions: [],
					param: 'goodsId',
					defaultSelect: '',
					filterable: true,
				},
				{
					type: 'input',
					label: '操作人',
					placeholder: '操作人',
					param: 'operator',
				},
				{
					type: 'datePicker',
					label: '最新入库时间',
					dateType: 'daterange',
					format: 'yyyy-MM-dd',
					valueFormat: 'timestamp',
					rangeSeparator: '-',
					startPlaceholder: '开始时间',
					endPlaceholder: '结束时间',
					param: 'searchTime',
				},
				{
					type: 'datePicker',
					label: '最新出库时间',
					dateType: 'daterange',
					format: 'yyyy-MM-dd',
					valueFormat: 'timestamp',
					rangeSeparator: '-',
					startPlaceholder: '开始时间',
					endPlaceholder: '结束时间',
					param: 'searchTime1',
				},
				{
					type: 'button',
					btnName: '查询',
					name: 'search',
					color: 'primary',
				},
				{
					type: 'separate',
				},
				{
					type: this.$auth.hasPermi('part-material:warehouse-realtime:create') ? 'button' : '',
					btnName: '入库',
					name: 'add',
					color: 'primary',
					plain: true,
				},
			],
		};
	},
	components: {
		product,
		AddOrUpdate,
	},
	created() {
		getListByType(this.listQuery.storageType).then((response) => {
			this.formConfig[0].selectOptions = response.data;
		});
	},
	methods: {
		buttonClick(val) {
			switch (val.btnName) {
				case 'search':
					this.listQuery.pageNo = 1;
					this.listQuery.pageSize = 10;
					this.listQuery.goodsId = val.goodsId;
					this.listQuery.operator = val.operator;
					this.listQuery.latestInTime = val.searchTime?val.searchTime:null;
					this.listQuery.latestOutTime = val.searchTime1?val.searchTime1:null;
					this.getDataList();
					break;
				case 'add':
					this.addOrEditTitle = '入库';
					this.addOrUpdateVisible = true;
					this.addOrUpdateHandle();
					break;
				default:
					console.log(val);
			}
		},
    otherMethods(val){
        this.addOrUpdateVisible = true;
        this.addOrEditTitle = "出库";
        this.$nextTick(() => {
          this.$refs.addOrUpdate.outWare(val.data);
        });
    }
	},
};
</script>
<style>
.app-container .el-table .el-table__cell {
	padding: 0;
	height: 35px;
}
</style>