jcxt_qd/src/components/jc/modelSet.vue

<template>
	<el-card class="box-card">
		<!-- <div slot="header" class="clearfix"> -->
		<el-breadcrumb separator-class="el-icon-arrow-right" style="margin-bottom: 30px;">
			<el-breadcrumb-item>首页</el-breadcrumb-item>
			<el-breadcrumb-item :to="{ path: '/jc/jcobj' }">模型列表</el-breadcrumb-item>
			<el-breadcrumb-item>新增模型</el-breadcrumb-item>
		</el-breadcrumb>

		<el-form :model="form" label-width="180px">
			<el-form-item label="模型名称" required>
				<el-input v-model="form.name" placeholder=""></el-input>
			</el-form-item>
			<el-form-item label="适用行业" required>
				<el-select v-model="form.type_id" clearable>
					<el-option v-for="item in field" :key="item.value" :label="item.label" :value="item.value"
						@change="choseType()">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="检测对象" required>
				<el-input type="textarea" v-model="form.product_name" @focus="choseMonitoringTargetShow = true"></el-input>
			</el-form-item>
			<el-form-item label="检测项" required>
				<el-input type="textarea" v-model="form.pesticides_name" @focus="choseProbePacketsShow = true"></el-input>
			</el-form-item>
			<div class="footer">
				<el-button type="success" @click="onSubmit()">提交</el-button>
			</div>
		</el-form>
		<!-- 选择检测对象 -->
		<el-dialog title="选择检测对象" :visible.sync="choseMonitoringTargetShow" width="30%" :close-on-click-modal="false"
			@open="choseMonitoringTarget()" class="dialogItem">
			<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()">确定</el-button>
			</div>
		</el-dialog>
		<!-- 选择检测包 -->
		<el-dialog title="选择检测包" :visible.sync="choseProbePacketsShow" width="40%" :close-on-click-modal="false"
			@open="choseProbePackets()" class="dialogItem">
			<el-input style="width: 200px; margin-bottom: 20px;" placeholder="输入检测包" v-model="queryInfo.keyword" @input="searchData()"
				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="handleSizeChange" @current-change="handleCurrentChange"
					:current-page="queryInfo.pageNum" :page-sizes="[10, 15, 20]" :page-size="queryInfo.pageSize"
					layout="total, sizes, prev, pager, next, jumper" :total="total" background />
				<el-button type="success" size="small" @click="choseProbe()">提交</el-button>
			</div>
		</el-dialog>
	</el-card>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					type_id: '',
					pesticides_name: '',
					product_name:''
				},
				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,
				queryInfo: {
					pageNum: 1,
					pageSize: 10,
					keyword: ''
				},
				// 表头
				// tableHeader: [
				// 	{
				// 		label: '检测项目',
				// 		prop: 'name',
				// 		// width: 40
				// 		// fixed: 'left'
				// 	}
				// ],
				// 总共多少条数据
				total: 0,
				probePacketstList: [],
				packetsText: '',
				// 检测包表格数据
				pesticidesList: [],
				multipleSelection: null,
				pesticides:[]
			}
		},
		watch: {
			monitorText(val) {
				this.$refs.tree.filter(val);
			}
		},
		methods: {
			/** 修复当用户在大于1的分页进行数据搜索没有返回值的问题 */
			setPageNum() {
				this.queryInfo.pageNum = 1
				this.choseProbePackets()
			},
			/** 监听每页显示多少数据的改变 */
			handleSizeChange(newSize) {
				this.queryInfo.pageSize = newSize
				this.choseProbePackets()
			},

			/** 监听页码的改变 */
			handleCurrentChange(newPage) {
				this.queryInfo.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.form.type_id
				})
				// 判断业务逻辑
				if (result.data.code == 0) {
					this.monitoringTargetList = result.data.data
				}
			},
			// 获取检测包
			async choseProbePackets() {
				const result = await this.$http.post('getPesticidesList', this.queryInfo)
				// 判断业务逻辑
				if (result.data.code == 0) {
					this.pesticidesList = result.data.data.rows
					this.total = result.data.data.total
				}
			},
			// 搜索检测项
			async searchData() {
				this.queryInfo.pageNum = 1
				this.choseProbePackets()
			},
			// 选中检测对象
			choseMonitor() {
				var that = this
				console.log(this.$refs.tree.getCheckedNodes());
				let res = this.$refs.tree.getCheckedNodes()
				that.form.product_name = res.map(el => el.name).join(', ')
				that.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.form.pesticides_name = that.multipleSelection.map(el => el.name).join(', ')
				that.pesticides=that.multipleSelection
				console.log(that.form.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() {
				delete this.form['pesticides_name']
				delete this.form['product_name']
				this.form['product'] = this.product
				this.form['pesticides'] = this.pesticides
				const result = await this.$http.post('saveModel', this.form)
				// 判断业务逻辑
				if (result.data.code == 0) {
						this.$message({
							type: 'success',
							message: '提交成功!'
						});
					this.$router.push('jcobj')	
				}
			},
			currentChecked(nodeObj, SelectedObj) {
				// console.log(SelectedObj)
				// console.log(SelectedObj.checkedKeys) // 这是选中的节点的key数组
				// console.log(SelectedObj.checkedNodes) // 这是选中的节点数组  
			}


		},
	}
</script>

<style lang="less" scoped>
	.el-form {
		width: 800px;
		margin: 0 auto;
	}

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

	.footer {
		padding: 10px;
		text-align: center;
	}

	.el-dialog__header {
		border-bottom: 1px solid #e5e5e5;
	}
	.el-tree-node {
	  .is-leaf + .el-checkbox .el-checkbox__inner {
	    display: inline-block;
	  }
	  .el-checkbox .el-checkbox__inner {
	    display: none;
	  }
	}
</style>