smartpark-front/src/page/itemManagement/applicationExamine/index.vue

<template>
	<basic-container class="content">
		<div class="content-top">
			<el-form
				:inline="true"
				:model="queryForm"
				class="serch_form"
			>
				<el-form-item label="物品大类">
					<el-select
						class="search_select"
						v-model="queryForm.bigClass"
						placeholder="请选择物品大类"
						clearable
						filterable
					>
						<el-option
							v-for="item in typeList"
							:key="item.dictValue"
							:label="item.dictKey"
							:value="item.dictValue">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="物品品牌">
					<el-select
						class="search_select"
						v-model="queryForm.brand"
						placeholder="请选择物品品牌"
						clearable
						filterable
					>
						<el-option
							v-for="item in brandList"
							:key="item.dictValue"
							:label="item.dictKey"
							:value="item.dictValue">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item
					class="search_input"
					label="物品名称"
				>
					<el-input
						v-model="queryForm.name"
						placeholder="请输入物品名称"
					/>
				</el-form-item>
				<el-form-item>
					<el-button class="search_button" @click="handleSearch">
            <i class="el-icon-search"></i>
          </el-button>
				</el-form-item>
			</el-form>
			<div>
				<el-button v-if="multipleSelection.length != 0" class="register" @click="batchDeletion">批量删除</el-button>
			</div>
		</div>
		<div class="content-main">
			<el-table
				:data="tableData"
				stripe
				border
				style="width: 100%"
				:header-cell-style="{'text-align':'center'}"
				:cell-style="{'text-align':'center'}"
				@selection-change="handleSelectionChange">
				<el-table-column
					type="selection"
					width="55">
				</el-table-column>
				<el-table-column
					type="index"
					label="序号"
      				width="70">
				</el-table-column>
				<el-table-column
					prop="bigClass"
					label="物品大类">
				</el-table-column>
				<el-table-column
					prop="name"
					label="物品名称">
				</el-table-column>
				<el-table-column
					prop="code"
					label="物品编号">
				</el-table-column>
				<el-table-column
					prop="brand"
					label="品牌">
				</el-table-column>
				<el-table-column
					prop="model"
					label="型号">
				</el-table-column>
				<el-table-column
					prop="standard"
					label="规格">
				</el-table-column>
				<el-table-column
					prop="applyName"
					label="申领人">
				</el-table-column>
				<el-table-column
					prop="applyTime"
					label="申领时间"
					width="150">
				</el-table-column>
				<el-table-column
					prop="applyNum"
					label="申领数量">
				</el-table-column>
				<el-table-column
					prop="unit"
					label="单位">
				</el-table-column>
				<el-table-column
					prop="status"
					label="状态">
					<template slot-scope="scope">
						<div class="status-box-wrapper">
							<div
								class="status-box"
								:class="scope.row.status == '0' ? 'blue' : (scope.row.status == '1' ? 'green' : (scope.row.status == '2' ? 'red' : 'grey'))"
							>
								{{ scope.row.status == '0' ? '待审核' : (scope.row.status == '1' ? '待领取' : (scope.row.status == '2' ? '已驳回' : '已领取')) }}
							</div>
						</div>
					</template>
				</el-table-column>
				<el-table-column
					prop="remarks"
					label="备注">
				</el-table-column>
				<el-table-column
					prop="address"
					label="操作"
					width="150"
					align="center"
				>
					<template slot-scope="scope">
						<el-popover
							placement="bottom"
							width="150"
							trigger="hover">
							<div class="more-box">
								<div
									class="item"
									@click="handleOperation('view', scope.row)">查看</div>
								<div
									class="item"
									@click="handleOperation('delete', scope.row)">删除</div>
								<div
									v-if="scope.row.status == '0'"
									class="item"
									@click="handleOperation('examine', scope.row)">审核</div>
								<div
									v-if="scope.row.status == '1'"
									class="item"
									@click="handleOperation('receive', scope.row)">领取</div>
							</div>
							<div class="more" slot="reference">更多</div>
						</el-popover>
					</template>
				</el-table-column>
			</el-table>
			<div class="el_pagination">
				<!-- <div
					style="
						width: 100%;
						height: 100%;
						position: absolute;
						background: rgba(255,255,255,.9);
						z-index: 9;
						position: absolute;
						top: 0;
						left: 0;
					"
					v-show="loading"
				></div> -->
				<el-pagination
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="currentPage"
					:page-sizes="[6, 10, 20, 50, 100]"
					:page-size="pageSize"
					layout="total, sizes, prev, pager, next, jumper"
					:total="total"
				>
				</el-pagination>
			</div>
		</div>
		<el-dialog
			:title="registerTitle"
			:append-to-body="true"
			:visible.sync="registerDialogVisible"
			width="50%"
			:before-close="registerHandleClose">
			<el-form
				class="registerForm"
				:model="registerForm"
				label-width="80px"
				ref="registerForm"
			>
				<el-col :span="8" v-if="dialogFormType == 'examine'">
					<el-form-item label="物品大类" prop="type">
						<el-select
							v-model="registerForm.type"
							placeholder="请选择物品大类"
							disabled
						>
							<el-option
								v-for="item in typeList"
								:key="item.dictValue"
								:label="item.dictKey"
								:value="item.dictValue">
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="物品名称" prop="name">
						<el-input
							v-model="registerForm.name"
							disabled
						/>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item
						label="物品编号"
						prop="code"
					>
						<el-input
							v-model="registerForm.code"
							placeholder="请输入物品编号"
							disabled
						/>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item
						label="品牌"
						prop="brand"
					>
						<el-select
							class="search_select"
							v-model="registerForm.brand"
							placeholder="请选择物品品牌"
							disabled
						>
							<el-option
								v-for="item in brandList"
								:key="item.dictValue"
								:label="item.dictKey"
								:value="item.dictValue">
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item
						label="型号"
						prop="model"
					>
						<el-input
							v-model="registerForm.model"
							placeholder="请输入型号"
							disabled
						/>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="规格" prop="standard">
						<el-input
							v-model="registerForm.standard"
							placeholder="请输入规格"
							disabled
						/>
					</el-form-item>
				</el-col>
				<el-col :span="8" v-if="dialogFormType == 'examine'">
					<el-form-item
						label="货位"
						prop="allocation"
					>
						<el-select
							v-model="registerForm.allocation"
							placeholder="请选择货位"
							disabled
						>
							<el-option
								v-for="item in goodsAllocationList"
								:key="item.value"
								:label="item.label"
								:value="item.value">
							</el-option>
						</el-select>
					</el-form-item>	
				</el-col>
				<el-col :span="8" v-if="dialogFormType == 'examine'">
					<el-form-item label="库存" prop="num">
						<el-input v-model="registerForm.num"
							disabled
						/>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="申领数量" prop="applyNum">
						<el-input v-model="registerForm.applyNum"
							disabled
						/>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="单位" prop="unit">
						<el-input v-model="registerForm.unit"
							disabled
						/>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="申请时间" prop="applyTime">
						<el-date-picker
							v-model="registerForm.applyTime"
							type="datetime"
							placeholder="选择日期时间"
							disabled>
						</el-date-picker>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="备注" prop="name">
						<el-input v-model="registerForm.name"
							disabled
						/>
					</el-form-item>
				</el-col>
                <div
					v-if="dialogFormType != 'view'"
					style="width: 100%; display: flex; flex-direction: column;"
				>
					<el-col :span="24">
						<div class="form-title">{{ dialogFormType == 'examine' ? '审核结果' : '申领结果' }}</div>
					</el-col>
					<el-form
						class="registerForm"
						:model="applyForm"
						label-width="80px"
						:rules="rules"
						ref="applyForm"
					>
						<el-col :span="8" v-if="dialogFormType == 'examine'">
							<el-form-item label="审核意见" prop="status">
								<el-select
									v-model="applyForm.status"
									placeholder="请选择审核意见"
								>
									<el-option
										v-for="item in examineTypeList"
										:key="item.value"
										:label="item.label"
										:value="item.value">
									</el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="8" v-if="dialogFormType == 'receive'">
							<el-form-item label="实际领取" prop="actNum">
								<el-input
									v-model="applyForm.actNum"
									placeholder="请输入实际领取"
								/>
							</el-form-item>
						</el-col>
						<el-col :span="16">
							<el-form-item label="备注" prop="approveRemarks">
								<el-input
									v-model="applyForm.approveRemarks"
									placeholder="请输入备注"
								/>
							</el-form-item>
						</el-col>
						<el-col :span="8" v-if="dialogFormType == 'receive'">
							<el-form-item label="领取时间" prop="actTime">
								<el-date-picker
									v-model="applyForm.actTime"
									value-format="yyyy-MM-dd HH:mm:ss"
									type="datetime"
									placeholder="选择日期时间">
								</el-date-picker>
							</el-form-item>
						</el-col>
					</el-form>
				</div>
			</el-form>
			<div class="dialog-footer">
				<el-button v-if="dialogFormType != 'view'" @click="registerHandleClick('cancel')">取 消</el-button>
				<el-button type="primary" @click="registerHandleClick('confirm')">确 定</el-button>
			</div>
		</el-dialog>
		
	</basic-container>
</template>

<script>
	import { findPage, detail, remove } from "@/api/itemManagement/applicationExamine";
	import { goodsApplySave } from "@/api/itemManagement/itemList";
	import {getDictionary} from '@/api/system/dictbiz'
	export default {
		data() {
			return {
				queryForm: {
					type: '',
					brand: '',
					name: ''
				},
				typeList: [
					{
						value: '1',
						label: '类型1'
					},
					{
						value: '2',
						label: '类型2'
					},
					{
						value: '3',
						label: '类型3'
					}
				],
				brandList: [
					{
						value: '1',
						label: '品牌1'
					},
					{
						value: '2',
						label: '品牌2'
					},
					{
						value: '3',
						label: '品牌3'
					}
				],
                examineTypeList: [
                    {
						value: '1',
						label: '通过'
					},
					{
						value: '2',
						label: '不通过'
					}
                ],
				goodsAllocationList: [
					{
						label: '货位1',
						value: '1',
					},
					{
						label: '货位2',
						value: '2',
					},
					{
						label: '货位3',
						value: '3',
					},
				],
				tableData: [],
				multipleSelection: [],
				currentPage: 1,
				pageSize: 10,
				total: 0,
				registerDialogVisible: false,
				dialogFormType: '',
				dialogFormDisabled: false,
				registerForm: {
					bigClass: '',
					name: '',
					code: '',
					brand: '',
					model: '',
					standard: '',
					price: '',
					allocation: '',
					num: '',
					inNum: '',
					unit: '',
					useTo: '',
					inDate: '',
					applyNum: '',
					remarks: '',
				},
				applyForm: {
					status: '',
					approveRemarks: '',
					actNum: '',
					actTime: '',
				},
				rules: {
					status: [
						{ required: true, message: '请选择状态', trigger: 'blur' },
					],
					actTime: [
						{ required: true, message: '请选择状态', trigger: 'blur' },
					],
					actNum: [
						{ 
							validator: (rule, value, callback) => {
								if (!value) {
									return callback(new Error('请输入申请数量'));
								}
								if (!/^\d+$/.test(value)) {
									return callback(new Error('请输入有效的整数'));
								}
								callback();
							},
							required: true, 
							trigger: 'blur'
						}
					],
				},
				drawer: false,
				activeNames: []
			}
		},
		computed: {
			registerTitle() {
				if(this.dialogFormType == 'view') {
					return '查看详情'
				} else if(this.dialogFormType == 'examine') {
					return '申领审核'
				} else if(this.dialogFormType == 'receive') {
					return '领取确认'
                }
			}
		},
		mounted() {
			this.init()
		},
		methods: {
			// init
			init() {
				this.findPage()
				this.selectDict()
			},
			// 字典
			async selectDict() {
				await getDictionary({code: 'big_class'}).then(res => {
					this.typeList = res.data.data.filter(item => item.parentId != '0')
				})
				await getDictionary({code: 'brand'}).then(res => {
					this.brandList = res.data.data.filter(item => item.parentId != '0')
				})
			},
			// 查询列表数据
			findPage() {
				let params = {
					...this.queryForm,
					current: this.currentPage,
					size: this.pageSize
				}
				findPage(params).then(res => {
					this.tableData = res.data.data.records
					this.total = res.data.data.total
				})
			},
			// 点击搜索按钮
			handleSearch() {
				this.currentPage = 1
				this.findPage()
			},
			// 表格选择变化
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
			// 批量删除
			batchDeletion() {
				this.$confirm('确认批量删除删除所选数据?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					let ids = []
					this.multipleSelection.forEach(item => {
						ids.push(item.id)
					})
					remove({ids: ids.join(',')}).then(res => {
						this.$message({
							message: '删除成功',
							type: 'success'
						})
						this.findPage()
					}).catch(err => {
						this.$message({
							type: 'error',
							message: '删除失败!'
						})
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					})
				})
			},
			// 查看弹窗表单详情
			detail(id) {
				detail({id}).then(res => {
					console.log(res)
					this.registerForm = res.data.data
				})
			},
			// 表格更多选项点击
			handleOperation(type, row) {
				this.dialogFormType = type
				if(type == 'view') {
					this.registerDialogVisible = true
					this.dialogFormDisabled = true
					this.detail(row.id)
				} else if(type == 'examine') {
					this.registerDialogVisible = true
					this.detail(row.id)
				} else if(type == 'receive') {
					this.registerDialogVisible = true
					this.detail(row.id)
				} else if(type == 'delete') {
					this.$confirm('确认删除该条数据?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						remove({ids: row.id}).then(res => {
							this.$message({
								message: '删除成功',
								type: 'success'
							})
							this.findPage()
						}).catch(err => {
							this.$message({
								type: 'error',
								message: '删除失败!'
							})
						})
					}).catch(() => {
						this.$message({
							type: 'info',
							message: '已取消删除'
						})
					})
				}
			},
			registerHandleClick(type) {
				if(type == 'confirm') {
					if(this.dialogFormType == 'examine') {
						const fieldsToValidate = ['status']
						this.$refs.applyForm.validate((valid) => {
							if (valid) {
								let params = {
									id: this.registerForm.id,
									status: this.applyForm.status,
									approveRemarks: this.applyForm.approveRemarks,
								}
								if(this.applyForm.status == 2) {
									params.code = this.registerForm.code
									params.applyNum = this.registerForm.applyNum
								}
								goodsApplySave(params).then(res => {
									this.$message({
										message: this.applyForm.status == 1 ? '审核通过' : '审核不通过',
										type: 'success'
									});
									this.registerHandleClose()
									this.currentPage = 1
									this.pageSize = 10
									this.findPage()
								}).catch(error => {
									this.$message({
										message: '审核失败',
										type: 'error'
									});
								})
							} else {
								return false;
							}
						}, fieldsToValidate);
					} else if(this.dialogFormType == 'receive') {
						const fieldsToValidate = ['actNum', 'actTime']
						this.$refs.applyForm.validate((valid) => {
							if (valid) {
								let params = {
									id: this.registerForm.id,
									actNum: this.applyForm.actNum,
									actTime: this.applyForm.actTime,
									status: '3',
									approveRemarks: this.applyForm.approveRemarks,
								}
								goodsApplySave(params).then(res => {
									this.$message({
										message: '领取成功',
										type: 'success'
									});
									this.registerHandleClose()
									this.currentPage = 1
									this.pageSize = 10
									this.findPage()
								}).catch(error => {
									this.$message({
										message: '审核失败',
										type: 'error'
									});
								})
							} else {
								return false;
							}
						}, fieldsToValidate);
					}
				} else {
					this.registerHandleClose()
				}
			},
			// 弹窗关闭
			registerHandleClose() {
				this.registerDialogVisible = false
				this.resetForm()
				this.dialogFormDisabled = false
				this.applyForm = {
					status: '',
					approveRemarks: '',
					actNum: '',
					actTime: '',
				}
			},
			// 重置表单
			resetForm() {
				this.$refs['applyForm'].resetFields();
			},
			// 分页
			handleSizeChange(val) {
				this.currentPage = 1
				this.pageSize = val
				this.findPage()
			},
			handleCurrentChange(val) {
				this.currentPage = val
				this.findPage()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		height: 100%;
    background-color: white;
		padding: 20px !important;
		.content-top{
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
			.register{
				height: 40px;
			}
			.serch_form {
				// display: flex;
				// margin-bottom: 30px;
				.el-form-item{
					// padding: 0 10px;
					margin-right: 20px !important;
				}
				.search_select {
					// width: 138px;
					height: 40px;
				}
				.search_input {
					// width: 238px;
					height: 40px;
				}
				/deep/.el-input__inner {
					border-radius: 0;
				}
				.search_button {
					width: 50px;
					height: 40px;
					border-radius: 0;
					display: flex;
					justify-content: center;
					align-items: center;
					margin-left: 6px;
					.el-icon-search {
						font-size: 19px;
						color: #c9c9c9;
					}
				}
			}
		}
		.content-main{
			.more{
				cursor: pointer;
			}
			.el_pagination {
				display: flex;
				justify-content: end;
				margin-top: 20px;
			}
		}
	}
	.more-box{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		.item{
			width: 100%;
			padding: 5px 0;
			text-align: center;
			cursor: pointer;
		}
	}
	.registerForm{
		display: flex;
		flex-wrap: wrap;
		.el-select{
			width: 100%;
		}
	}
	.dialog-footer{
		height: 40px;
		display: flex;
		justify-content: flex-end;
	}
	.message{
		// padding: 0 20px;
		margin: 0 20px 0px 20px;
		display: flex;
		flex-direction: column;
		border: 1px solid #D1D1D1;
		.box{
			margin: 0 20px 0px 20px;
		}
		.title{
			height: 40px;
			background: #FFFFFF;
			border-radius: 0px 0px 0px 0px;
			display: flex;
			align-items: center;
			margin: 0 20px 0px 20px;
		}
		.item{
			display: flex;
			align-items: center;
			margin-bottom: 10px;
			.label{
				width: 80px;
				text-align: end;
				margin-right: 10px;
			}
		}
	}
	.history{
		// padding: 0 20px;
		margin: 0 20px 20px 20px;
		display: flex;
		flex-direction: column;
		border: 1px solid #D1D1D1;
		border-top: none;
		.title{
			height: 40px;
			background: #FFFFFF;
			border-radius: 0px 0px 0px 0px;
			display: flex;
			align-items: center;
			margin: 0 20px 0px 20px;
		}
		.el-collapse{
			margin: 0 20px;
			border: none !important;
			margin-bottom: 20px;
		}
	}
	.title-text{
		margin: 0 20px;
	}
	.name-time{
		// width: 327px;
		height: 40px;
		background: #F9F9F9;
		display: flex;
		align-items: center;
		padding: 0 20px;
		.time{
			margin-left: 30px;
		}
	}
    .form-title{
        // width: 100%;
        height: 40px;
        background: #F9F9F9;
        border-radius: 0px 0px 0px 0px;
        border: 1px solid #D1D1D1;
        display: flex;
        align-items: center;
        padding: 0 20px;
        margin-bottom: 20px;
    }
	.status-box-wrapper{
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.status-box{
		width: 62px;
		height: 25px;
	}
	.blue{
		background: rgba(43, 142, 229, 0.2);
		color: #2B8EE5;
	}
	.green{
		background: rgba(30, 185, 76, 0.2);
		color: #1EB94C;
	}
	.red{
		background: rgba(225, 75, 51, 0.2);
		color: #E14B33;
	}
	.grey{
		background: rgba(151, 151, 151, 0.2);
		color: #333333;
	}
</style>