qnadmin/src/views/stock/Consume/consumeList.vue

<template>
	<ContainerQuery>
		<div slot="left">
			<el-button size="small" type="primary" @click="add_consume=true">
				消耗品调拨
			</el-button>
		</div>
		<div slot="more">
			<el-form inline size="small">
				<el-form-item>
					<el-input v-model="searchKey" style="width: 220px" placeholder="商品名称" clearable
						@keyup.enter.native="pageChange(1)" @clear="pageChange(1)">
						<el-button slot="append" @click="pageChange(1)">
							<i class="el-icon-search"></i>
						</el-button>
					</el-input>
				</el-form-item>
				<el-form-item>
					<el-input v-model="mobile" style="width: 220px" placeholder="调拨人手机号" clearable
						@keyup.enter.native="pageChange(1)" @clear="pageChange(1)">
						<el-button slot="append" @click="pageChange(1)">
							<i class="el-icon-search"></i>
						</el-button>
					</el-input>
				</el-form-item>
				<el-form-item>
					<el-input v-model="write_mobile" style="width: 220px" placeholder="核销人手机号" clearable
						@keyup.enter.native="pageChange(1)" @clear="pageChange(1)">
						<el-button slot="append" @click="pageChange(1)">
							<i class="el-icon-search"></i>
						</el-button>
					</el-input>
				</el-form-item>
			</el-form>
		</div>
		<!-- 切换类型-->
		<el-tabs v-model="state" type="card" @tab-click="selTopType">
			<el-tab-pane label="全部" name="All"></el-tab-pane>
			<el-tab-pane label="使用中" name="in"></el-tab-pane>
			<el-tab-pane label="已核销" name="out"></el-tab-pane>
		</el-tabs>
		<!--    表格-->
		<div class="table">
			<el-table :data="tableData" style="width: 100%" type="index">
				<el-table-column prop="goods" label="商品名" width="180">
					<template slot-scope="scope">
						{{ scope.row.name }}<br />
					</template>
				</el-table-column>
				<el-table-column prop="number" label="数量">
				</el-table-column>
				<el-table-column prop="createTime" label="出仓日期" min-width="150">
					<template slot-scope="scope">
						{{ $_common.formatDate(scope.row.createTime) }}
					</template>
				</el-table-column>
				<el-table-column prop="mobile" label="调拨人" min-width="100">
					<template slot-scope="scope">
						{{ scope.row.transferor }}<br />
						{{ scope.row.mobile }}
					</template>
				</el-table-column>
				<el-table-column prop="writeTime" label="核销日期" min-width="150">
					<template slot-scope="scope">
						{{ $_common.formatDate(scope.row.writeTime) }}
					</template>
				</el-table-column>
				<el-table-column prop="write_mobile" label="核销人" min-width="100">
					<template slot-scope="scope">
						{{ scope.row.write_off_person }}<br />
						{{ scope.row.write_mobile }}
					</template>
				</el-table-column>
				<el-table-column prop="status" label="状态" min-width="100">
					<template slot-scope="scope">
						<span v-if="scope.row.status==1" class='success-status'>使用中</span>
						<span v-if="scope.row.status==2" class='info-status'>已核销</span>
					</template>
				</el-table-column>
				<el-table-column label="操作" min-width="130" fixed="right" header->
					<template slot-scope="scope">
						<!-- <el-button type="text" @click="openEditModel(scope.row.id)">
							编辑
						</el-button> -->
						<el-button v-if="scope.row.status==1" type="text" @click="writeOff(scope.row.id)">
							核销
						</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<!--    分页查询-->
		<FooterPage :page-size="pageSize" :total-page.sync="total" :current-page.sync="page" @pageChange="pageChange"
			@sizeChange="sizeChange"></FooterPage>
		<AddConsume v-if="add_consume" :visible="add_consume" @close="add_consume = false"
			@confirm="addConfirm"></AddConsume>
	</ContainerQuery>
</template>
<script>
	import {
		ConsumeList,
		ConsumeWrite_off
	} from "@/api/Stock";
	import AddConsume from "./addConsume.vue";
	export default {
		name: "ConsumeList",
		components: {
			AddConsume,
		},
		data() {
			return {
				// 显示弹窗
				add_consume:false,
				state: "All",
				searchKey: '', //商品名称
				"mobile": "", //调拨人
				"write_mobile": "", //核销人
				searchPm: '', //1使用中2使用完 搜索条件
				total: 0,
				page: 1,
				pageSize: 10,
				tableData: [],
			};
		},
		created() {
			if (this.$route.query.id) {
				this.staffId = this.$route.query.id - 0;
				this.staffName = this.$route.query.name;
			}
			this.ConsumeList();
		},
		activated() {
			if (this.$_isInit()) return;
			if (this.$route.query.id) {
				this.staffId = this.$route.query.id - 0;
				this.staffName = this.$route.query.name;
			}
			this.ConsumeList();
		},
		methods: {
			// 添加完成
			addConfirm(res){
				this.ConsumeList();
				console.log(res);
			},
			// 切换类型
			selTopType(tag) {
				switch (this.state) {
					case "All": // 全部
						this.searchPm = '';
						break;
					case "in": // 使用中
						this.searchPm = 1;
						break;
					case "out": // 已核销
						this.searchPm = 2;
						break;
				}
				this.pageChange(1);
			},
			//  核销消耗品
			writeOff(id) {
				console.log(id);
				this.$confirm("你确定核销消耗品吗?", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning",
				}).then(async () => {
					const data = await ConsumeWrite_off({
						id: id
					});
					this.ConsumeList();
					this.$message({
						type: "success",
						message: "核销成功!",
					});
				});
			},
			async ConsumeList() {
				const {
					data,
					pageTotal
				} = await ConsumeList({
					name: this.searchKey, //商品名称
					status: this.searchPm, //1使用中2使用完 搜索条件
					mobile: this.mobile, //调拨人
					write_mobile: this.write_mobile, //核销人
					page: this.page,
					pageSize: this.pageSize,
				});
				this.tableData = data;
				this.total = pageTotal;
			},
			pageChange(page) {
				this.page = page;
				this.ConsumeList();
			},
			// 每页数据大小改变
			sizeChange(val) {
				this.pageSize = val;
				this.pageChange(1);
			},
		},
	};
</script>
<style></style>