modelSet.vue 8.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287
  1. <template>
  2. <el-card class="box-card">
  3. <!-- <div slot="header" class="clearfix"> -->
  4. <el-breadcrumb separator-class="el-icon-arrow-right" style="margin-bottom: 30px;">
  5. <el-breadcrumb-item>首页</el-breadcrumb-item>
  6. <el-breadcrumb-item :to="{ path: '/jc/jcobj' }">模型列表</el-breadcrumb-item>
  7. <el-breadcrumb-item>新增模型</el-breadcrumb-item>
  8. </el-breadcrumb>
  9. <el-form :model="form" label-width="180px">
  10. <el-form-item label="模型名称" required>
  11. <el-input v-model="form.name" placeholder=""></el-input>
  12. </el-form-item>
  13. <el-form-item label="适用行业" required>
  14. <el-select v-model="form.type_id" clearable>
  15. <el-option v-for="item in field" :key="item.value" :label="item.label" :value="item.value"
  16. @change="choseType()">
  17. </el-option>
  18. </el-select>
  19. </el-form-item>
  20. <el-form-item label="检测对象" required>
  21. <el-input type="textarea" v-model="form.product_name" @focus="choseMonitoringTargetShow = true"></el-input>
  22. </el-form-item>
  23. <el-form-item label="检测项" required>
  24. <el-input type="textarea" v-model="form.pesticides_name" @focus="choseProbePacketsShow = true"></el-input>
  25. </el-form-item>
  26. <div class="footer">
  27. <el-button type="success" @click="onSubmit()">提交</el-button>
  28. </div>
  29. </el-form>
  30. <!-- 选择检测对象 -->
  31. <el-dialog title="选择检测对象" :visible.sync="choseMonitoringTargetShow" width="30%" :close-on-click-modal="false"
  32. @open="choseMonitoringTarget()" class="dialogItem">
  33. <el-input style="width: 200px;" placeholder="输入检测对象" v-model="monitorText" clearable>
  34. </el-input>
  35. <el-tree node-key="id" class="filter-tree" ref="tree" :check-strictly="true" :data="monitoringTargetList" show-checkbox
  36. :props="defaultProps" :filter-node-method="filterNode" @check="currentChecked">
  37. </el-tree>
  38. <div class="footer">
  39. <el-button type="success" size="small" @click="choseMonitor()">确定</el-button>
  40. </div>
  41. </el-dialog>
  42. <!-- 选择检测包 -->
  43. <el-dialog title="选择检测包" :visible.sync="choseProbePacketsShow" width="40%" :close-on-click-modal="false"
  44. @open="choseProbePackets()" class="dialogItem">
  45. <el-input style="width: 200px; margin-bottom: 20px;" placeholder="输入检测包" v-model="queryInfo.keyword" @input="searchData()"
  46. clearable>
  47. </el-input>
  48. <!-- 表格数据区域-->
  49. <el-table ref="multipleTable" :data="pesticidesList" row-key="id" @selection-change="handleSelectionChange"
  50. border stripe highlight-current-row style="width: 100%">
  51. <el-table-column type="selection" :reserve-selection="true" width="50" align="center"></el-table-column>
  52. <el-table-column label="序号" width="50px" align="center">
  53. <template slot-scope="scope">
  54. {{ scope.$index+1 }}
  55. </template>
  56. </el-table-column>
  57. <!-- <el-table-column :key="table.prop" v-for="table in tableHeader" :label="table.label"
  58. :prop="table.prop" align="center" :width="table.width" :fixed="table.fixed" /> -->
  59. <el-table-column label="检测项目">
  60. <template slot-scope="scope">
  61. <span style="margin-left: 10px">{{ scope.row.name }}({{ scope.row.enname }})</span>
  62. <!-- <span style="margin-left: 10px">{{ scope.row.eaname }}</span> -->
  63. </template>
  64. </el-table-column>
  65. <el-table-column label="检测标准" width="130px" align="center">
  66. <template slot-scope="scope">
  67. GB2763-2021
  68. </template>
  69. </el-table-column>
  70. </el-table>
  71. <div class="footer">
  72. <!-- 分页器区域-->
  73. <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
  74. :current-page="queryInfo.pageNum" :page-sizes="[10, 15, 20]" :page-size="queryInfo.pageSize"
  75. layout="total, sizes, prev, pager, next, jumper" :total="total" background />
  76. <el-button type="success" size="small" @click="choseProbe()">提交</el-button>
  77. </div>
  78. </el-dialog>
  79. </el-card>
  80. </template>
  81. <script>
  82. export default {
  83. data() {
  84. return {
  85. form: {
  86. type_id: '',
  87. pesticides_name: '',
  88. product_name:''
  89. },
  90. field: [{
  91. value: '1',
  92. label: '种植业'
  93. }, {
  94. value: '2',
  95. label: '畜牧业'
  96. }, {
  97. value: '3',
  98. label: '渔业'
  99. }, {
  100. value: '4',
  101. label: '其他'
  102. }],
  103. // 选择检测对象对话框
  104. choseMonitoringTargetShow: false,
  105. defaultProps: {
  106. label: 'name',
  107. children: 'children'
  108. },
  109. count: 1,
  110. monitoringTargetList: [],
  111. monitorText: '',
  112. // 选择检测包对话框
  113. choseProbePacketsShow: false,
  114. queryInfo: {
  115. pageNum: 1,
  116. pageSize: 10,
  117. keyword: ''
  118. },
  119. // 表头
  120. // tableHeader: [
  121. // {
  122. // label: '检测项目',
  123. // prop: 'name',
  124. // // width: 40
  125. // // fixed: 'left'
  126. // }
  127. // ],
  128. // 总共多少条数据
  129. total: 0,
  130. probePacketstList: [],
  131. packetsText: '',
  132. // 检测包表格数据
  133. pesticidesList: [],
  134. multipleSelection: null,
  135. pesticides:[]
  136. }
  137. },
  138. watch: {
  139. monitorText(val) {
  140. this.$refs.tree.filter(val);
  141. }
  142. },
  143. methods: {
  144. /** 修复当用户在大于1的分页进行数据搜索没有返回值的问题 */
  145. setPageNum() {
  146. this.queryInfo.pageNum = 1
  147. this.choseProbePackets()
  148. },
  149. /** 监听每页显示多少数据的改变 */
  150. handleSizeChange(newSize) {
  151. this.queryInfo.pageSize = newSize
  152. this.choseProbePackets()
  153. },
  154. /** 监听页码的改变 */
  155. handleCurrentChange(newPage) {
  156. this.queryInfo.pageNum = newPage
  157. this.choseProbePackets()
  158. },
  159. // 过滤树形结构关键字
  160. filterNode(value, data) {
  161. if (!value) return true;
  162. return data.name.indexOf(value) !== -1;
  163. },
  164. // 选择检测对象
  165. async choseMonitoringTarget() {
  166. const result = await this.$http.post('getProductList', {
  167. type_id: this.form.type_id
  168. })
  169. // 判断业务逻辑
  170. if (result.data.code == 0) {
  171. this.monitoringTargetList = result.data.data
  172. }
  173. },
  174. // 获取检测包
  175. async choseProbePackets() {
  176. const result = await this.$http.post('getPesticidesList', this.queryInfo)
  177. // 判断业务逻辑
  178. if (result.data.code == 0) {
  179. this.pesticidesList = result.data.data.rows
  180. this.total = result.data.data.total
  181. }
  182. },
  183. // 搜索检测项
  184. async searchData() {
  185. this.queryInfo.pageNum = 1
  186. this.choseProbePackets()
  187. },
  188. // 选中检测对象
  189. choseMonitor() {
  190. var that = this
  191. console.log(this.$refs.tree.getCheckedNodes());
  192. let res = this.$refs.tree.getCheckedNodes()
  193. that.form.product_name = res.map(el => el.name).join(', ')
  194. that.product = this.$refs.tree.getCheckedNodes()
  195. that.choseMonitoringTargetShow=false
  196. },
  197. setSelectedRow() {
  198. // 设置当前页已选项
  199. this.hander = true
  200. this.pesticidesList.forEach(item => {
  201. if (this.list.includes(item[this.uniqueKey])) {
  202. this.$refs.multipleTable.toggleRowSelection(item, true)
  203. }
  204. })
  205. this.hander = false
  206. },
  207. // 提交选中检测包
  208. choseProbe() {
  209. let that = this
  210. // console.log(that.orgs)
  211. that.form.pesticides_name = that.multipleSelection.map(el => el.name).join(', ')
  212. that.pesticides=that.multipleSelection
  213. console.log(that.form.pesticides)
  214. // that.form.pesticides = that.multipleSelection
  215. // for(let i=0;i<that.multipleSelection.length;i++){
  216. // that.form.main_unit.push(that.multipleSelection[i].name)
  217. // }
  218. that.choseProbePacketsShow = false
  219. },
  220. // 批量勾选
  221. handleSelectionChange(val) {
  222. this.multipleSelection = val
  223. console.log(this.multipleSelection)
  224. if (this.hander) return false
  225. // this.setSelectRows() // 处理选中的方法
  226. },
  227. // 提交模型表单
  228. async onSubmit() {
  229. delete this.form['pesticides_name']
  230. delete this.form['product_name']
  231. this.form['product'] = this.product
  232. this.form['pesticides'] = this.pesticides
  233. const result = await this.$http.post('saveModel', this.form)
  234. // 判断业务逻辑
  235. if (result.data.code == 0) {
  236. this.$message({
  237. type: 'success',
  238. message: '提交成功!'
  239. });
  240. this.$router.push('jcobj')
  241. }
  242. },
  243. currentChecked(nodeObj, SelectedObj) {
  244. // console.log(SelectedObj)
  245. // console.log(SelectedObj.checkedKeys) // 这是选中的节点的key数组
  246. // console.log(SelectedObj.checkedNodes) // 这是选中的节点数组
  247. }
  248. },
  249. }
  250. </script>
  251. <style lang="less" scoped>
  252. .el-form {
  253. width: 800px;
  254. margin: 0 auto;
  255. }
  256. .dialogItem /deep/ .el-dialog__body {
  257. padding: 15px 12px 0;
  258. color: #606266;
  259. font-size: 14px;
  260. word-break: break-all;
  261. }
  262. .footer {
  263. padding: 10px;
  264. text-align: center;
  265. }
  266. .el-dialog__header {
  267. border-bottom: 1px solid #e5e5e5;
  268. }
  269. .el-tree-node {
  270. .is-leaf + .el-checkbox .el-checkbox__inner {
  271. display: inline-block;
  272. }
  273. .el-checkbox .el-checkbox__inner {
  274. display: none;
  275. }
  276. }
  277. </style>