RT_SY/src/pages/symanger/farmThing/plant.vue

<template>
	<div>
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item>农事管理</el-breadcrumb-item>
			<el-breadcrumb-item>种植</el-breadcrumb-item>
		</el-breadcrumb>
		<div class="search-box">
			<div class="filter-box">
				<el-select size="small" v-model="base" clearable @change="selChange" placeholder="请选择基地名称">
					<el-option
						v-for="item in FieldCascader"
						:label="item.farmname"
						:value="item.farmname"
						:key="item.id"
					></el-option>
				</el-select>
				<el-select size="small" v-model="pickcode" clearable  @change="selChange" placeholder="请选择采收状态">
					<el-option label="已采收" value="1"></el-option>
					<el-option label="未采收" value="0"></el-option>
				</el-select>
			</div>
			<el-button type="primary" size="mini" @click="plantAdd">新增</el-button>
		</div>
		<template v-if="fieldsList.length">
			<el-row :gutter="10">
				<el-col
					:xs="24"
					:sm="24"
					:md="12"
					:lg="6"
					:xl="6"
					v-for="item in fieldsList"
					:key="item.backcode"
				>
					<el-card class="box-card">
						<img
							class="tag"
							v-if="item.pickcode == '1'"
							src="@/assets/images/sy/farmThing/picked.png"
						/>
						<div class="img-box">
							<img src="@/assets/images/sy/farmThing/plant.png" />
						</div>
						<div class="detail">
							<p class="borderLine">种植基地 : {{ item.farm }}</p>
							<p class="borderLine">种植地块 : {{ item.land }}</p>
							<p class="borderLine">
								采收状态 : {{ item.pickcode == 1 ? '已采收' : '未采收' }}
							</p>
							<p class="borderLine">类别 : {{ item.planttype }}</p>
							<p class="borderLine">名称 : {{ item.plantname }}</p>
							<p class="borderLine">批次 : {{ item.batch }}</p>
							<p class="borderLine">
								种植时间 : {{ (item.uptime * 1000) | formatTime }}
							</p>
						</div>
						<div class="btns">
							<a
								:class="{ bg: itemId == item.id && btnindex == 1 ? true : false }"
								@click="plantEdit(item)"
								>编辑</a
							>
							<a
								:class="{ bg: itemId == item.id && btnindex == 2 ? true : false }"
								@click="plantDelet(item.id, item.backcode)"
								>删除</a
							>
						</div>
					</el-card>
				</el-col>
			</el-row>
		</template>
		<template v-else>
			<!-- 暂无数据 -->
			<div class="expertDiagnosis_referral_units_not" >
				<img
					:src="zanwu"
					alt
					class="expertDiagnosis_referral_units_notImg"
				/>
			</div>
		</template>
		<el-pagination
			v-if="fieldsList.length"
			background
			layout="prev, pager, next"
			:total="totalNum"
			:page-size="8"
			:current-page="page"
			@current-change="changePage"
		></el-pagination>
		<!-- 新增弹框 -->
		<el-dialog
			title="新增"
			:visible.sync="farmThingAddDialogVisible"
			width="30%"
			@close="AddDialogClosed"
		>
			<el-form
				ref="addFormRef"
				:model="addForm"
				label-width="90px"
				:rules="addFormRules"
			>
				<el-form-item label="所属地块 : " prop="pro_cascader">
					<el-cascader
						v-model="addForm.pro_cascader"
						:options="FieldCascader"
						:props="{
							expandTrigger: 'hover',
							label: 'farmname',
							value: 'farmname'
						}"
					></el-cascader>
				</el-form-item>
				<el-form-item label="产品类别 : " prop="pro_type">
					<el-input v-model="addForm.pro_type"></el-input>
				</el-form-item>
				<el-form-item label="产品名称 : " prop="pro_name">
					<el-input v-model="addForm.pro_name"></el-input>
				</el-form-item>
				<el-form-item label="批次名称 : " prop="batch_name">
					<el-input v-model="addForm.batch_name"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="farmThingAddDialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="addSubm">确认</el-button>
			</span>
		</el-dialog>
		<!-- 编辑地块弹框 -->
		<el-dialog
			title="编辑"
			:visible.sync="farmThingEditDialogVisible"
			width="30%"
			@close="EditDialogClosed"
		>
			<el-form
				ref="editFormRef"
				:model="editForm"
				label-width="90px"
				:rules="addFormRules"
			>
				<el-form-item label="所属地块 : " prop="pro_cascader">
					<el-cascader
						disabled
						v-model="editForm.pro_cascader"
						:options="FieldCascader"
						:props="{
							expandTrigger: 'hover',
							label: 'farmname',
							value: 'farmname'
						}"
					></el-cascader>
				</el-form-item>
				<el-form-item label="产品类别 : " prop="pro_type">
					<el-input v-model="editForm.pro_type"></el-input>
				</el-form-item>
				<el-form-item label="产品名称 : " prop="pro_name">
					<el-input v-model="editForm.pro_name"></el-input>
				</el-form-item>
				<el-form-item label="批次名称 : " prop="batch_name">
					<el-input v-model="editForm.batch_name"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="farmThingEditDialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="editSubm">确认</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
export default {
	data() {
		return {
			zanwu: require('@/assets/images/expertDiagnosis/zanwu.png'),
			itemId: '',
			btnindex: '',
			page: 1,
			totalNum: null,
			base: '',
			pickcode: '',
			farmThingAddDialogVisible: false,
			farmThingEditDialogVisible: false,
			fieldsList: [],

			bases: [
				{ value: '1', label: '基地一' },
				{ value: '2', label: '基地二' },
				{ value: '3', label: '基地三' },
				{ value: '4', label: '基地四' }
			],
			fields: [
				{ value: '1', label: '地块一' },
				{ value: '2', label: '地块二' },
				{ value: '3', label: '地块三' },
				{ value: '4', label: '地块四' }
			],
			usefor: [
				{ value: '1', label: '种植' },
				{ value: '2', label: '种植' },
				{ value: '3', label: '种植' },
				{ value: '4', label: '种植' }
			],
			addForm: {
				pro_name: '',
				batch_name: '', //批次名称
				pro_type: '',
				pro_cascader: []
			},
			editForm: {
				pro_name: '',
				batch_name: '', //批次名称
				pro_type: '',
				pro_cascader: []
			},
			addFormRules: {
				pro_name: [
					{ required: true, message: '请填写产品名称', trigger: 'blur' }
				],
				pro_type: [
					{ required: true, message: '请填写产品类别', trigger: 'blur' }
				],
				batch_name: [
					{ required: true, message: '请填写批次名称', trigger: 'blur' }
				],
				pro_cascader: [
					{ required: true, message: '请选择地块', trigger: 'change' }
				]
			},
			FieldCascader: []
		}
	},
	mounted() {
		this.getAllFieldsCascader()
		this.getplant()
	},
	methods: {
		getAllFieldsCascader() {
			this.$axios({
				method: 'POST',
				url: '/api/all_base'
			}).then((res) => {
				if (res.data.data.length > 0) {
					this.FieldCascader = res.data.data
				}else{
					this.FieldCascader = []
				}
			})
		},
		getplant() {
			this.$axios({
				method: 'POST',
				url: '/api/plant_info',
				data: this.qs.stringify({
					page: this.page,
					farmname: this.base,
					pickcode: this.pickcode
				})
			}).then((res) => {
				this.totalNum = res.data.counts
				this.fieldsList = res.data.data
			})
		},
		selChange(){
			this.page=1
			this.getplant()
		},
		plantAdd() {
			this.farmThingAddDialogVisible = true
		},
		plantEdit(item) {
			if (item.pickcode == '0') {
				//未采收
				this.editForm.pro_name = item.plantname
				this.editForm.batch_name = item.batch
				this.editForm.pro_type = item.planttype
				this.editForm.pro_cascader = [item.farm, item.land]
				this.itemId = item.id
				this.btnindex = 1
				this.farmThingEditDialogVisible = true
			} else {
				this.$message.warning('此地块已采收，禁止编辑！')
			}
		},
		plantDelet(id, backcode) {
			this.itemId = id
			this.btnindex = 2
			this.$confirm('确定要删除此作物么?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					this.$axios({
						method: 'POST',
						url: '/api/del_plant',
						data: this.qs.stringify({
							backcode: backcode
						})
					}).then((res) => {
						if (res.data == 1) {
							this.$message({
								type: 'success',
								message: '删除成功!'
							})
							this.getplant()
						}
					})
				})
				.catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					})
				})
		},
		AddDialogClosed() {
			this.$refs.addFormRef.resetFields()
		},
		EditDialogClosed() {
			this.$refs.editFormRef.resetFields()
		},
		addSubm() {
			this.$refs.addFormRef.validate((valid) => {
				if (!valid) return
				let farm = this.addForm.pro_cascader[0]
				let land = this.addForm.pro_cascader[1]
				this.$axios({
					method: 'POST',
					url: '/api/add_plant',
					data: this.qs.stringify({
						farm: farm,
						land: land,
						planttype: this.addForm.pro_type,
						batch: this.addForm.batch_name,
						plantname: this.addForm.pro_name
					})
				}).then((res) => {
					if (res.data == 1) {
						this.getplant()
					} else {
						this.$message.error(res.data)
					}
					this.farmThingAddDialogVisible = false
				})
			})
		},
		editSubm() {
			this.$refs.editFormRef.validate((valid) => {
				if (!valid) return
				this.$axios({
					method: 'POST',
					url: '/api/edit_plant',
					data: this.qs.stringify({
						id: this.itemId,
						planttype: this.editForm.pro_type,
						batch: this.editForm.batch_name,
						plantname: this.editForm.pro_name
					})
				}).then((res) => {
					if (res.data.message == '') {
						this.getplant()
					} else {
						this.$message.warning(res.data.message)
					}
				})
				this.farmThingEditDialogVisible = false
			})
		},
		changePage(val) {
			this.page = val
			this.getplant()
		}
	}
}
</script>

<style lang='less' scoped>
.search-box {
	display: flex;
	justify-content: space-between;
	margin-bottom: 10px;
	.el-input {
		width: 200px;
	}
}
.el-card {
	/deep/.el-card__body {
		position: relative;
	}
	.tag {
		position: absolute;
		top: 0;
		right: 20px;
	}
	text-align: center;
	color: #555;
	font-size: 13px;
	.borderLine {
		border: #eee;
		border-radius: 5px;
		-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
		padding: 8px 0;
		margin: 10px 0;
	}
	.btns {
		display: flex;
		width: 180px;
		border-radius: 30px;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
		margin: 20px auto 0;
		a.bg {
			background: #17bb89;
			color: #fff;
		}
		a {
			width: 50%;
			height: 30px;
			line-height: 30px;
			cursor: pointer;
			&:first-child {
				border-top-left-radius: 30px;
				border-bottom-left-radius: 30px;
			}
			&:last-child {
				border-top-right-radius: 30px;
				border-bottom-right-radius: 30px;
			}
		}
		a:hover {
			background: #14a478;
			color: #fff;
		}
	}
}
.el-cascader {
	width: 100%;
}
// 暂无数据
.expertDiagnosis_referral_units_not {
	width: 272px;
	margin: 0 auto;
}
</style>