addTaskJcObject.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437
  1. <template>
  2. <div style="width: 100%">
  3. <el-breadcrumb separator-class="el-icon-arrow-right">
  4. <el-breadcrumb-item>首页</el-breadcrumb-item>
  5. <el-breadcrumb-item>监测任务</el-breadcrumb-item>
  6. <el-breadcrumb-item>添加任务</el-breadcrumb-item>
  7. </el-breadcrumb>
  8. <div class="title">添加任务</div>
  9. <el-form :model="form" label-width="100px">
  10. <el-form-item prop="main_unit" label="抽样机构" required>
  11. <el-input v-model="form.main_unit" @focus="getOrganizationsShow1 = true"></el-input>
  12. </el-form-item>
  13. <el-form-item prop="check_unit" label="检测机构" required>
  14. <el-input v-model="form.check_unit" @focus="getOrganizationsShow2 = true"></el-input>
  15. </el-form-item>
  16. <el-form-item prop="sample_address" label="地区" >
  17. <el-cascader :options="region" v-model="sample_address"
  18. @change="handleChange" clearable>
  19. </el-cascader>
  20. </el-form-item>
  21. <!-- <el-form-item prop="sample_address" label="地区" >
  22. <el-cascader :options="options" :props="props" v-model="sample_address" clearable ></el-cascader>
  23. </el-form-item> -->
  24. <!-- 底部按钮 -->
  25. <el-form-item>
  26. <el-button type="success" @click="onSubmit()">保存</el-button>
  27. <el-button @click="reBack">返回</el-button>
  28. </el-form-item>
  29. </el-form>
  30. <!-- 抽样机构 -->
  31. <!-- 选择抽样机构对话框 -->
  32. <template scope-slot="scope">
  33. <el-dialog title="机构选择" :visible.sync="getOrganizationsShow1" width="50%" :close-on-click-modal="false" @open="getOrganizations1()" class="dialogItem">
  34. <el-form v-if="getOrganizationsShow1" :model="getOrganizationsForm1">
  35. <!-- 表格数据区域-->
  36. <el-table ref="multipleTable" :data="testList" row-key="id" @selection-change="handleSelectionChange1"
  37. border stripe highlight-current-row style="width: 100%">
  38. <el-table-column type="selection" :reserve-selection="true" width="50"></el-table-column>
  39. <el-table-column label="序号" width="50px">
  40. <template slot-scope="scope">
  41. {{ scope.$index+1 }}
  42. </template>
  43. </el-table-column>
  44. <el-table-column :key="table.prop" v-for="table in tableHeader" :label="table.label"
  45. :prop="table.prop" align="center" :width="table.width" :fixed="table.fixed" />
  46. </el-table>
  47. <div class="footer">
  48. <!--抽样机构分页器区域-->
  49. <el-pagination @size-change="handleSizeChange1" @current-change="handleCurrentChange1"
  50. :current-page="queryInfo1.pageNum" :page-sizes="[1,10, 15, 20]" :page-size="queryInfo1.pageSize"
  51. layout="total, sizes, prev, pager, next, jumper" :total="total" background />
  52. <el-button type="success" @click="choseTest1()">提交</el-button>
  53. </div>
  54. </el-form>
  55. </el-dialog>
  56. </template>
  57. <!-- 检测机构 -->
  58. <!-- 选择检测机构对话框 -->
  59. <el-dialog title="机构选择" :visible.sync="getOrganizationsShow2" width="50%" :close-on-click-modal="false" @open="getOrganizations2()" class="dialogItem">
  60. <el-form v-if="getOrganizationsShow2" :model="getOrganizationsForm2">
  61. <!-- 表格数据区域-->
  62. <el-table ref="multipleTable" :data="testList2" row-key="id" @selection-change="handleSelectionChange2"
  63. border stripe highlight-current-row style="width: 100%" >
  64. <el-table-column type="selection" :reserve-selection="true" width="50"></el-table-column>
  65. <el-table-column label="序号" width="50px">
  66. <template slot-scope="scope">
  67. {{ scope.$index+1 }}
  68. </template>
  69. </el-table-column>
  70. <el-table-column :key="table.prop" v-for="table in tableHeader" :label="table.label"
  71. :prop="table.prop" align="center" :width="table.width" :fixed="table.fixed" />
  72. </el-table>
  73. <div class="footer">
  74. <!--检测机构分页器区域-->
  75. <el-pagination @size-change="handleSizeChange2" @current-change="handleCurrentChange2"
  76. :current-page="queryInfo2.pageNum" :page-sizes="[1,10, 15, 20]" :page-size="queryInfo2.pageSize"
  77. layout="total, sizes, prev, pager, next, jumper" :total="total2" background />
  78. <el-button type="success" @click="choseTest2()">提交</el-button>
  79. </div>
  80. </el-form>
  81. </el-dialog>
  82. <!-- 地区表格区域 -->
  83. <el-table ref="multipleTable" :data="regionList" row-key="id" @selection-change="handleSelectionChange3"
  84. border stripe highlight-current-row style="width: 100%">
  85. <el-table-column type="selection" :reserve-selection="true" width="50"></el-table-column>
  86. <el-table-column label="序号" width="50px">
  87. <template slot-scope="scope">
  88. {{ scope.$index+1 }}
  89. </template>
  90. </el-table-column>
  91. <el-table-column :key="table.prop" v-for="table in tableHeader3" :label="table.label"
  92. :prop="table.prop" align="center" :width="table.width" :fixed="table.fixed" />
  93. </el-table>
  94. </div>
  95. </template>
  96. <script>
  97. import {
  98. regionData,
  99. CodeToText,
  100. regionDataPlus,
  101. } from 'element-china-area-data'
  102. const rymc = window.sessionStorage.getItem('rymc')
  103. const token = window.sessionStorage.getItem('token')
  104. export default {
  105. data() {
  106. return {
  107. // 地区单选
  108. props: { multiple: true },
  109. CodeToText:'',
  110. form: {
  111. // name:'',
  112. bear_unit: '',
  113. report_unit: '',
  114. sample_number: '',
  115. // sample_address: '',
  116. uploadtime: '',
  117. groupname:'',
  118. properties:'',
  119. main_unit:[],
  120. check_unit:[],
  121. sample_org_id:'',
  122. check_org_id:''
  123. },
  124. currentRow: null,
  125. currentRow2: null,
  126. //组别名称
  127. // group: [
  128. // {
  129. // value: '2',
  130. // label: '县级监管单位'
  131. // }, {
  132. // value: '3',
  133. // label: '市级监管单位'
  134. // },{
  135. // value: '4',
  136. // label: '省级监管单位'
  137. // }],
  138. //机构性质
  139. // field: [{
  140. // value: '1',
  141. // label: '政府部门'
  142. // }, {
  143. // value: '2',
  144. // label: '事业单位'
  145. // }, {
  146. // value: '3',
  147. // label: '企业'
  148. // }],
  149. // 抽样地区
  150. // region: regionData,
  151. region: regionData[11].children,
  152. sample_address:[],
  153. // 机构地域表格数据
  154. underTask: [],
  155. underTasktotal: 0,
  156. // 抽检分离选项
  157. divideOptions: [{
  158. id: 0,
  159. name: '否'
  160. },
  161. {
  162. id: 1,
  163. name: '是'
  164. }
  165. ],
  166. // myHeaders: {
  167. // Authorization: 'bearer'+ token//上传文件添加token
  168. // },
  169. // 优先级选项
  170. priority: [{
  171. value: '0',
  172. label: '一般'
  173. }, {
  174. value: '1',
  175. label: '紧急'
  176. }, {
  177. value: '2',
  178. label: '特急'
  179. }],
  180. // 批次选项
  181. batch: [{
  182. label: '一季度'
  183. }, {
  184. label: '二季度'
  185. }, {
  186. label: '三季度'
  187. }, {
  188. label: '四季度'
  189. }],
  190. // 弹出抽样机构弹窗
  191. getOrganizationsShow1: false,
  192. // 查询抽样机构请求参数
  193. queryInfo1: {
  194. pageNum: 1,
  195. pageSize: 10,
  196. name:'',
  197. sample_org_id:''
  198. },
  199. // 弹出检测机构弹窗
  200. getOrganizationsShow2: false,
  201. // 查询检测机构请求参数
  202. queryInfo2: {
  203. pageNum: 1,
  204. pageSize: 10,
  205. // keyWord: '',
  206. groupname:'检测机构',
  207. },
  208. //抽样机构列表
  209. testList: [],
  210. // 检测机构列表
  211. testList2: [],
  212. // 表头
  213. tableHeader: [{
  214. label: '单位名称',
  215. prop: 'name',
  216. width: 300
  217. // fixed: 'left'
  218. },
  219. {
  220. label: '机构类型',
  221. prop: 'properties',
  222. width:150
  223. // fixed: 'left'
  224. }, {
  225. label: '组别名称',
  226. prop: 'groupname',
  227. width: 300
  228. // fixed: 'left'
  229. }
  230. ],
  231. // 总共多少条数据
  232. total: 0,
  233. total2: 0,
  234. // table表格多选选项
  235. // multipleSelection: null,
  236. getOrganizationsForm1: {},
  237. getOrganizationsForm2: {},
  238. // 选中的牵头单位
  239. orgs: [],
  240. orgs2: [],
  241. // 上传成功文件列表
  242. fileList: []
  243. }
  244. },
  245. created:function(){
  246. this.sample_org_id = this.id
  247. this.task_id= this.$route.params.task_id
  248. console.log(this.task_id)
  249. this.postTaskProfile()
  250. },
  251. mounted() {
  252. let that = this
  253. },
  254. methods: {
  255. // 添加任务step2
  256. async postTaskProfile() {
  257. const result = await this.$http.post('postTaskProfile', {
  258. task_id: this.task_id,
  259. sample_org_id:this.sample_org_id,
  260. check_org_id:this.check_org_id,
  261. sample_address:this.sample_address
  262. })
  263. this.sample_org_id = result.data.rows.id
  264. this.check_org_id = result.data.rows.id
  265. console.log(this.sample_org_id)
  266. },
  267. //搜索
  268. // async search(){
  269. // this.queryInfo1.pageNum = 1
  270. // this.getOrganizations()
  271. // },
  272. //搜索
  273. // async search2(){
  274. // this.queryInfo2.pageNum = 1
  275. // this.getOrganizations()
  276. // },
  277. // 获取选择抽样地区
  278. handleChange() {
  279. var that = this
  280. var loc = "";
  281. for (let i = 0; i < this.sample_address.length; i++) {
  282. loc += CodeToText[this.sample_address[i]];
  283. }
  284. that.form.sample_address = loc
  285. // console.log(loc)
  286. },
  287. //保存
  288. async onSubmit() {
  289. this.form['token'] = token
  290. this.form['groupname'] = this.groupname
  291. this.form['orgs'] = this.orgs
  292. this.form['releaser'] = window.sessionStorage.getItem('rymc')
  293. this.form['task_class'] = '例行监测'
  294. this.form['ispublic'] = 0
  295. this.form['sample_org_id'] = this.sample_org_id
  296. this.form['check_org_id'] = this.check_org_id
  297. this.form['task_id'] = this.task_id
  298. const result = await this.$http.post('postTaskProfile', this.form)
  299. // 判断业务逻辑
  300. if (result.data.code == 0) {
  301. this.$router.push('routineMonitor')
  302. } else {
  303. this.$message({
  304. type: 'error',
  305. message: result.data.message
  306. })
  307. }
  308. },
  309. reBack() {
  310. this.$router.push('addTask')
  311. },
  312. // 获取抽样机构列表
  313. async getOrganizations1() {
  314. this.queryInfo1['token'] = token
  315. const result = await this.$http.post('getOrganizations', this.queryInfo1)
  316. this.testList = result.data.data.rows
  317. this.total = result.data.data.total
  318. this.sample_org_id = result.data.rows.id
  319. console.log(result.data.data.rows.id)
  320. },
  321. // 获取检测机构列表
  322. async getOrganizations2() {
  323. this.queryInfo2['token'] = token
  324. const result = await this.$http.post('getOrganizations', this.queryInfo2)
  325. this.testList2 = result.data.data.rows
  326. this.total2 = result.data.data.total
  327. // this.check_org_id = result.data.rows.id
  328. },
  329. /** 修复当用户在大于1的分页进行数据搜索没有返回值的问题 */
  330. setPageNum() {
  331. this.queryInfo.pageNum = 1
  332. this.getOrganizations1()
  333. },
  334. setSelectedRow() {
  335. // 设置当前页已选项
  336. this.hander = true
  337. this.testList.forEach(item => {
  338. if (this.list.includes(item[this.uniqueKey])) {
  339. this.$refs.multipleTable.toggleRowSelection(item, true)
  340. }
  341. })
  342. this.hander = false
  343. },
  344. //抽样机构页码
  345. /** 监听每页显示多少数据的改变 */
  346. handleSizeChange1(newSize) {
  347. this.queryInfo1.pageSize = newSize
  348. this.getOrganizations1()
  349. },
  350. /** 监听页码的改变 */
  351. handleCurrentChange1(newPage) {
  352. this.queryInfo1.pageNum = newPage
  353. this.getOrganizations1()
  354. },
  355. //检测机构页码
  356. /** 监听每页显示多少数据的改变 */
  357. handleSizeChange2(newSize) {
  358. this.queryInfo2.pageSize = newSize
  359. this.getOrganizations2()
  360. },
  361. /** 监听页码的改变 */
  362. handleCurrentChange2(newPage) {
  363. this.queryInfo2.pageNum = newPage
  364. this.getOrganizations2()
  365. },
  366. //选中抽样(单选)
  367. handleSelectionChange1(val) {
  368. this.currentRow = val;
  369. console.log(this.currentRow)
  370. console.log(this.currentRow[0].name)
  371. this.sample_org_id = this.currentRow[0].id
  372. console.log(this.sample_org_id)
  373. },
  374. //选中检测(单选)
  375. handleSelectionChange2(val) {
  376. this.currentRow2 = val;
  377. this.check_org_id = this.currentRow2[0].id
  378. console.log(this.currentRow2)
  379. console.log(this.currentRow2[0].name)
  380. console.log(this.check_org_id)
  381. },
  382. // 抽样单位提交
  383. async choseTest1() {
  384. let that = this
  385. that.form.main_unit = that.currentRow[0].name
  386. that.getOrganizationsShow1 = false
  387. that.form.sample_org_id = that.currentRow[0].id
  388. console.log(that.form.sample_org_id)
  389. },
  390. // 检测单位提交
  391. choseTest2() {
  392. let that = this
  393. that.form.check_unit = that.currentRow2[0].name
  394. that.form.check_org_id = that.currentRow2[0].id
  395. that.getOrganizationsShow2 = false
  396. console.log(that.form.check_org_id)
  397. },
  398. }
  399. }
  400. </script>
  401. <style lang="less" scoped>
  402. .title {
  403. margin-left: 50%;
  404. margin-bottom: 20px;
  405. }
  406. .el-form {
  407. width: 800px;
  408. margin: 0 auto;
  409. }
  410. .footer {
  411. margin-top: 5px;
  412. display: flex;
  413. flex-direction: row;
  414. justify-content: space-between;
  415. }
  416. </style>