jcxt_qd/src/components/jc/jcobj.vue

<template>

	<div style="width: 100%">

		<el-card class="box-card">
			<div slot="header" class="clearfix">
				<el-breadcrumb separator-class="el-icon-arrow-right">
					<el-breadcrumb-item>首页</el-breadcrumb-item>
					<el-breadcrumb-item>监测模型</el-breadcrumb-item>
					<el-breadcrumb-item>模型配置</el-breadcrumb-item>

				</el-breadcrumb>
			</div>
			<!-- 头部搜索栏 -->
			<el-row :gutter="50" style="margin-right: 0px;">
				<el-form style="display: flex; flex-direction: row;" size="mini">
					<el-form-item label="行业" class="select">
						<el-select v-model="queryInfo.type_id" clearable>
							<el-option v-for="item in field" :key="item.value" :label="item.label" :value="item.value">
							</el-option>
						</el-select>
					</el-form-item>

					<!-- 查询 -->
					<el-button style="height: 28px;margin-left: 10px;" type="success" size="mini" @click="searchData()">查询</el-button>
					<!-- 重置 -->
					<el-button style="height: 28px;margin-left: 5px;" type="success" size="mini" @click="reset()">重置</el-button>
				</el-form>
			</el-row>
			<!--  头部钮区域-->
			<el-row :gutter="90" style="margin-right: 0px;">
				<div style="display: flex;flex-direction: row;float: right;">
					<el-button type="primary" size="small" plain icon="el-icon-plus" @click="add()">新增</el-button>
					<el-button type="primary" size="small" plain icon="el-icon-delete" @click="delmodel()">删除</el-button>
				</div>
			</el-row>
			<!--  表格数据区域-->
			<el-table ref="multipleModelTable" :data="tableData" border stripe highlight-current-row style="width: 100%"
				:row-style="rowStyle" :cell-style="cellStyle" @selection-change="handleSelectionChange">
				<el-table-column type="selection" width="50" align="center"></el-table-column>
				<el-table-column label="序号" width="50px" align="center">
					<template slot-scope="scope">
						{{ scope.$index+1 }}
					</template>
				</el-table-column>

				<el-table-column :key="table.label" v-for="table in tableHeader" :label="table.label" :prop="table.prop"
					align="center" :width="table.width" :fixed="table.fixed" />

				<el-table-column label="操作" align="center" fixed="right">
					<!-- 操作按钮区域的作用域插槽 -->
					<template slot-scope="scope">
						<el-button style="margin: 5px auto;" type="success" size="small" @click="getmodelDetail(scope.row.id)">配置模型</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:current-page="queryInfo.pageNum" :page-sizes="[10, 20, 30, 40]" :page-size="queryInfo.pageSize"
				layout="total, sizes, prev, pager, next, jumper" :total="total">
			</el-pagination>

			<!-- 配置模型对话框-->
		<el-dialog title="查看" :visible.sync="readDialogVisible" width="30%" :close-on-click-modal="false"
			class="dialogItem">

			<el-form v-if="readDialogVisible" :model="modelForm" label-width="100px">
				<el-form-item label="模型名称:" prop="name" class="labelItem">
					<el-input v-model="modelForm.name"></el-input>
				</el-form-item>
				<el-form-item label="适用行业:" prop="modelForm.type_id" class="labelItem">
					<el-select v-model="modelForm.type_id">
					<el-option v-for="item in field" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
				</el-form-item>
				<el-form-item label="检测对象:" prop="productText" width="70px" class="labelItem">
				<el-input type="textarea" v-model="productText" autosize @focus="choseMonitoringTargetShow = true"></el-input>
				</el-form-item>
				<el-form-item label="检测项:" prop="pesticidesText" class="labelItem">
					<el-input v-model="pesticidesText" type="textarea" autosize @focus="choseProbePacketsShow = true" ></el-input>
				</el-form-item>
			
				<div class="footer">
						<el-button  @click="readDialogVisible = false">取 消</el-button>
						<el-button type="primary" @click="onSubmit(modelForm.id)">提 交</el-button>
				</div>
			</el-form>

			<!-- 修改检测对象 -->
		<el-dialog title="修改检测对象" :visible.sync="choseMonitoringTargetShow" width="30%" :close-on-click-modal="false"
			@open="choseMonitoringTarget()" class="dialogItem" append-to-body>
			<el-input style="width: 200px;" placeholder="请选择检测对象" v-model="monitorText" clearable>
			</el-input>
			<el-tree node-key="id" class="filter-tree" ref="tree" :check-strictly="true" :data="monitoringTargetList" show-checkbox
				:props="defaultProps" :filter-node-method="filterNode" @check="currentChecked">
			</el-tree>
			<div class="footer">
				<el-button type="success" size="small" @click="choseMonitor(id)">确定</el-button>
			</div>
		</el-dialog>

				<!-- 修改检测项 -->
		<el-dialog title="修改检测项" :visible.sync="choseProbePacketsShow" width="40%" :close-on-click-modal="false"
			@open="choseProbePackets()" class="dialogItem" append-to-body>
			<el-input style="width: 200px;" placeholder="请选择检测包" v-model="queryInfo1.keyword" @input="searchData1()"
				clearable>
			</el-input>
			<!--  表格数据区域-->
			<el-table ref="multipleTable" :data="pesticidesList" row-key="id" @selection-change="handleSelectionChange"
				border stripe highlight-current-row style="width: 100%">
				<el-table-column type="selection" :reserve-selection="true" width="50" align="center"></el-table-column>
				<el-table-column label="序号" width="50px" align="center">
					<template slot-scope="scope">
						{{ scope.$index+1 }}
					</template>
				</el-table-column>
				<!-- 		<el-table-column :key="table.prop" v-for="table in tableHeader" :label="table.label"
					:prop="table.prop" align="center" :width="table.width" :fixed="table.fixed" /> -->
				<el-table-column label="检测项目">
					<template slot-scope="scope">
						<span style="margin-left: 10px">{{ scope.row.name }}({{ scope.row.enname }})</span>
						<!-- <span style="margin-left: 10px">{{ scope.row.eaname }}</span> -->
					</template>
				</el-table-column>
				<el-table-column label="检测标准" width="130px" align="center">
					<template slot-scope="scope">
						GB2763-2021
					</template>
				</el-table-column>
			</el-table>
			<div class="footer">
				<!--    分页器区域-->
				<el-pagination @size-change="handleSizeChange1" @current-change="handleCurrentChange1"
					:current-page="queryInfo1.pageNum" :page-sizes="[10, 15, 20]" :page-size="queryInfo1.pageSize"
					layout="total, sizes, prev, pager, next, jumper" :total="total1" background />
				<el-button type="success" size="small" @click="choseProbe()">提交</el-button>
			</div>
		</el-dialog>

			
		</el-dialog>
		
		</el-card>
	</div>

</template>

<script>
	export default {
		name: '',
		data() {
			return {
				currentPage: 1,
				total: 0,
				total1:0,
				readDialogVisible: false,
				modelForm: {
					id:'',
					name: '',
					type_id: '',
					pesticides:[],
					product:[]
				},
				// 存检测项和检测对象字符串
				productText:'',
				pesticidesText:'',
				pesticides:[],
				product:[],
				cellStyle: {
					padding: 2 + 'px'
				},
				rowStyle: {
					height: 35 + 'px'
				},
				field: [{
					value: 1,
					label: '种植业'
				}, {
					value: 2,
					label: '畜牧业'
				}, {
					value: 3,
					label: '渔业'
				}, {
					value: 4,
					label: '其他'
				}],

				// 选择检测对象对话框
				choseMonitoringTargetShow: false,
				defaultProps: {
					label: 'name',
					children: 'children'
				},
				count: 1,
				monitoringTargetList: [],
				monitorText: '',
				// 选择检测包对话框
				choseProbePacketsShow: false,
				queryInfo1: {
					pageNum: 1,
					pageSize: 10,
					keyword: ''
				},
				// 检测包表格数据
				pesticidesList: [],
				multipleSelection: null,
				pesticides:[],

				tableHeader: [{
						label: '模型名称',
						prop: 'name',
						// fixed: 'left'
					},
					{
						label: '行业',
						prop: 'type',
						// fixed: 'left'
					},
					{
						label: '创建时间',
						prop: 'creattime',
					},

				],
				// 数据表格数据
				tableData: [],
				delarry:[],
				// 批量删除选中数据
				multipleSelection1: null,
				queryInfo: {
					pageSize:10,
					pageNum:1,
					type_id:""
				},
				// 任务状态选项
				taskstatus: [{
					value: '选项1',
					label: '全部'
				}, {
					value: '选项2',
					label: '未发布'
				}, {
					value: '选项3',
					label: '已发布'
				}, {
					value: '选项4',
					label: '已废止'
				}, {
					value: '选项5',
					label: '执行中'
				}, {
					value: '选项6',
					label: '已结束，未完成'
				}, {
					value: '选项7',
					label: '已结束，已完成'
				}],
				// 日期选择器快捷选项
				pickerOptions: {
					disabledDate(time) {
						return time.getTime() > Date.now();
					},
					shortcuts: [{
						text: '今天',
						onClick(picker) {
							picker.$emit('pick', new Date());
						}
					}, {
						text: '昨天',
						onClick(picker) {
							const date = new Date();
							date.setTime(date.getTime() - 3600 * 1000 * 24);
							picker.$emit('pick', date);
						}
					}, {
						text: '一周前',
						onClick(picker) {
							const date = new Date();
							date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
							picker.$emit('pick', date);
						}
					}]
				},
			}
		},

		mounted: function() {
			// this.getmodelList()
		},
		created(){
			this.getmodelList()
		},
		
		watch: {
			monitorText(val) {
				this.$refs.tree.filter(val);
			}
		},
		
		methods: {
			handleSizeChange(val) {
				this.queryInfo.pageSize = val;
				console.log(`每页 ${val} 条`);
			
			},
			handleCurrentChange(val) {
				this.queryInfo.pageNum = val;
				console.log(`当前页: ${val}`);
				this.getmodelList()
			},
			// 新增模型
			add() {
				this.$router.push({
					path: '/jc/modelSet',
				})
			},
			async delmodel(){
				console.log(this.multipleSelection)
		
				var that = this;
				const length = this.multipleSelection.length;
				console.log(length)
				console.log(this.multipleSelection)
				for (let i = 0; i < length; i++) {
					console.log(this.multipleSelection[i])
					this.delarry.push(this.multipleSelection[i]);
				}
				console.log(this.multipleSelection)
				const result = await this.$http.post('delModel', {
					delarr: that.delarry,
				})
				if (result.data.code == 0) {
					this.$message({
						type: 'success',
						message: '删除成功!'
					});
					this.delarry=[]
					that.getmodelList()
				} else {
					this.$message({
						type: 'error',
						message: '该模型已被绑定，不可删除!'
					});
				}

				this.$refs.multipleModelTable.clearSelection();
			},

			// 查询
			searchData(){
				this.queryInfo.pageNum=1
				this.getmodelList()
			},
			// 重置
			reset(){
				this.queryInfo.type_id=''
				this.getmodelList()
			},
			// 获取模型列表
			async getmodelList() {
				const {
					data: res
				} = await this.$http.post(
					"getModelList", this.queryInfo
				);
				console.log(res)
				for (let i = 0; i < res.data.rows.length; i++) {
				if (res.data.rows[i].type_id == '1') {
					res.data.rows[i].type = '种植业'
				} else if (res.data.rows[i].type_id == '2') {
					res.data.rows[i].type = '畜牧业'
				} else if (res.data.rows[i].type_id == '3') {
					res.data.rows[i].type = '渔业'
				}else{
					res.data.rows[i].type = '其他'
				}
				}
				this.tableData = res.data.rows
				this.total = res.data.total
			},
			// 查看列表详情
			async getmodelDetail(id) {
				console.log(id)
				const {
					data: res
				} = await this.$http.post(
					"getModeldetail", {id:id}
				);
				if(res.code==0){
					this.modelForm.id = res.data.name.id
					this.modelForm.name = res.data.name.name
					this.modelForm.type_id = res.data.name.type_id
					this.modelForm.product=res.data.product
					this.modelForm.pesticides=res.data.pesticides
					console.log(res.data.product.map(el=>el.product_name).join(','))
					this.productText = res.data.product.map(el=>el.product_name).join(',')
					this.pesticidesText = res.data.pesticides.map(el=>el.test_name).join(',')
					console.log(this.modelForm.pesticides)
					console.log(this.modelForm.product)
				}
			    console.log(this.modelForm)
				this.readDialogVisible = true
			},

			
				/** 修复当用户在大于1的分页进行数据搜索没有返回值的问题 */
			setPageNum() {
				this.queryInfo1.pageNum = 1
				this.choseProbePackets()
			},
			/** 监听每页显示多少数据的改变 */
			handleSizeChange1(newSize) {
				this.queryInfo1.pageSize = newSize
				this.choseProbePackets()
			},

			/** 监听页码的改变 */
			handleCurrentChange1(newPage) {
				this.queryInfo1.pageNum = newPage
				this.choseProbePackets()
			},

			// 过滤树形结构关键字
			filterNode(value, data) {
				if (!value) return true;
				return data.name.indexOf(value) !== -1;
			},

			// 选择检测对象
			async choseMonitoringTarget() {
				const result = await this.$http.post('getProductList', {
					type_id: this.modelForm.type_id
				})
				console.log(this.modelForm.type_id)
				// 判断业务逻辑
				if (result.data.code == 0) {
					this.monitoringTargetList = result.data.data
				}
			},

			// 获取检测包
			async choseProbePackets() {
				const result = await this.$http.post('getPesticidesList', this.queryInfo1)
				// 判断业务逻辑
				if (result.data.code == 0) {
					this.pesticidesList = result.data.data.rows
					this.total1 = result.data.data.total
				}
			},
			// 搜索检测项
			async searchData1() {
				this.queryInfo1.pageNum = 1
				this.choseProbePackets()
			},

			// 选中检测对象
			choseMonitor() {
				var that = this
				console.log(this.$refs.tree.getCheckedNodes());
				let res = this.$refs.tree.getCheckedNodes()
				that.productText = res.map(el => el.name).join(', ')
				that.modelForm.product = this.$refs.tree.getCheckedNodes()
				that.choseMonitoringTargetShow=false
			},
			setSelectedRow() {
				// 设置当前页已选项
				this.hander = true
				this.pesticidesList.forEach(item => {
					if (this.list.includes(item[this.uniqueKey])) {
						this.$refs.multipleTable.toggleRowSelection(item, true)
					}
				})
				this.hander = false
			},
			// 提交选中检测包
			choseProbe() {
				let that = this
				// console.log(that.orgs)
				that.pesticidesText = that.multipleSelection.map(el => el.name).join(', ')
				console.log(that.pesticides_name)
				that.modelForm.pesticides=that.multipleSelection
				console.log(that.modelForm.pesticides)
				// that.form.pesticides = that.multipleSelection
				// for(let i=0;i<that.multipleSelection.length;i++){
				// 	that.form.main_unit.push(that.multipleSelection[i].name)
				// }
				that.choseProbePacketsShow = false
			},
				// 批量勾选
			handleSelectionChange(val) {
				this.multipleSelection = val
				console.log(this.multipleSelection)
				if (this.hander) return false
				// this.setSelectRows() // 处理选中的方法
			},

			// 提交模型表单
			async onSubmit(id) {

				console.log(this.modelForm)
				const result = await this.$http.post('DoEditModelInfo', this.modelForm)
				// 判断业务逻辑
				if (result.data.code == 0) {
						this.$message({
							type: 'success',
							message: '提交成功!'
						});
					this.readDialogVisible = false
					this.getmodelList()
				}
				
			},
			

		},
	}
</script>

<style lang="less" scoped>
	.el-table {
		align-items: center;
		margin-top: 25px;
	}

	/deep/ .el-col {
		padding-right: 0 !important;
	}

	/deep/ .el-radio-group label {
		width: 180px;
		margin-right: 10px;
	}

	.el-pagination {
		margin-top: 25px;
	}

	// .el-cascader {
	// 	width: 290px;
	// }

	.el-select {
		width: 210px;
		height: 100%;
	}

	.select {
		display: flex;
		flex-direction: row;
		margin-left: 10px;
	}

	.dialogItem /deep/ .el-dialog__body {
		padding: 15px 12px 0;
		color: #606266;
		font-size: 14px;
		word-break: break-all;
	}

		.labelItem /deep/ .el-form-item__label {
		// width: 80px;
		text-align: center;
		vertical-align: middle;
		float: left;
		font-size: 13px;
		color: #606266;
		// line-height: 40px;
		padding: 0 2px 0 0;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}

	.el-form-item {
		margin-bottom: 8px;
		padding-left: 18px;
	}

	.labelItem /deep/ .el-form-item__label {
		// width: 80px;
		text-align: center;
		vertical-align: middle;
		float: left;
		font-size: 13px;
		color: #606266;
		// line-height: 40px;
		padding: 0 2px 0 0;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}

		.footer {
		padding: 5px 0;
		border-top: 1px solid #e5e5e5;
		text-align: center;
	}

	// .el-form-item__content{
	// 	margin-left: 0;
	// }
</style>