123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287 |
- <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>
|