addPage.vue 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610
  1. <template>
  2. <div class="inspectionManagement-addPage">
  3. <div class="title-max-box">
  4. <p class="title-p">{{addPageTitle}}</p>
  5. <p class="title-button add-button-one-90" @click="outButton">返回</p>
  6. <img class="position-img" v-if="addForm.checkRange == 1" src="@/assets/ZDimages/safetyCheck/icon_xyxc_qx.png">
  7. <img class="position-img" v-if="addForm.checkRange == 2" src="@/assets/ZDimages/safetyCheck/icon_xyxc_xy.png">
  8. <img class="position-img" v-if="addForm.checkRange == 3" src="@/assets/ZDimages/safetyCheck/icon_xyxc_sys.png">
  9. </div>
  10. <div class="content-max-box scrollbar-box">
  11. <el-form ref="addForm" :model="addForm" :rules="rules" label-width="82px">
  12. <div class="top-form-box">
  13. <div class="top-form-left-box">
  14. <el-form-item label="计划标题" prop="title">
  15. <el-input disabled v-model="addForm.title" placeholder="未填写" style="width: 690px"/>
  16. </el-form-item>
  17. <div style="display: flex">
  18. <el-form-item label="学院" prop="subjectName">
  19. <el-input disabled v-model="addForm.subjectName" placeholder="未填写" style="width: 300px"/>
  20. </el-form-item>
  21. <el-form-item label="实验室" prop="subjectName" label-width="110px">
  22. <el-input disabled v-model="addForm.subjectName" placeholder="未填写" style="width: 280px"/>
  23. </el-form-item>
  24. </div>
  25. <el-form-item label="检查要求" prop="checkDemand">
  26. <el-input disabled v-model="addForm.checkDemand" placeholder="未填写" style="width: 690px"/>
  27. </el-form-item>
  28. <el-form-item label="检查结果" prop="checkResult">
  29. <el-select v-model="addForm.checkResult" placeholder="请选择检查结果" style="width: 690px">
  30. <el-option :key="0" label="不符合" :value="0"></el-option>
  31. <el-option :key="1" label="符合" :value="1"></el-option>
  32. </el-select>
  33. </el-form-item>
  34. <el-form-item label="整改通知" prop="rectifyNotice" v-if="addForm.checkResult === 0">
  35. <el-radio-group v-model="addForm.rectifyNotice" style="margin-top:5px;">
  36. <el-radio :label="1">整改告知书</el-radio>
  37. <el-radio :label="2">整改通知书</el-radio>
  38. </el-radio-group>
  39. </el-form-item>
  40. </div>
  41. <div class="top-form-right-box">
  42. <el-form-item label="检查类型" prop="checkType">
  43. <p style="background-color: #f5f5f5;width:450px;padding:0 15px;line-height:40px;border-radius:4px;">{{addForm.checkType==1?'校院巡查':(addForm.checkType==2?'实验室自查':'')}}</p>
  44. </el-form-item>
  45. <el-form-item label="楼栋" prop="buildName">
  46. <el-input disabled v-model="addForm.buildName" placeholder="未填写" maxLength="10" style="width: 450px"/>
  47. </el-form-item>
  48. <el-form-item :label="addForm.checkType==1?'计划周期':(addForm.checkType==2?'任务周期':'')" prop="data9">
  49. <el-input disabled v-model="addForm.cycleStartTime+' 至 '+addForm.cycleEndTime" placeholder="未填写" maxLength="10" style="width: 450px"/>
  50. </el-form-item>
  51. <el-form-item label="整改期限" prop="rectifyDeadline" v-if="addForm.checkResult === 0">
  52. <el-date-picker
  53. style="width: 450px"
  54. v-model="addForm.rectifyDeadline"
  55. type="date"
  56. :picker-options="pickerOptions"
  57. :clearable="false"
  58. placeholder="选择整改期限">
  59. </el-date-picker>
  60. </el-form-item>
  61. </div>
  62. </div>
  63. <div class="bottom-form-box" v-if="addForm.checkResult === 0">
  64. <div class="bottom-form-title-box">
  65. <p>不符合项</p>
  66. <p>隐患数:{{addForm.checkHazardDtoList.length}}</p>
  67. </div>
  68. <div class="for-max-big-box" v-for="(item,index) in addForm.checkHazardDtoList" :key="index">
  69. <div class="for-title-box">
  70. <p class="for-title-p">第{{index+1}}隐患项</p>
  71. <div class="for-del-box">
  72. <p class="el-icon-delete"></p>
  73. <p @click="delCheckHazardDtoList(index)">删除此项</p>
  74. </div>
  75. <div class="for-button-box" @click="dataLookButton(item)">
  76. <p :class="item.lookType?'el-icon-arrow-up':'el-icon-arrow-down'"></p>
  77. <p>{{item.lookType?'收起':'展开'}}</p>
  78. </div>
  79. </div>
  80. <div class="for-big-box" v-if="item.lookType">
  81. <el-form-item label="隐患等级" :prop="'checkHazardDtoList.'+index+'.hazardLevel'" :rules="rules.hazardLevel" label-width="123px">
  82. <el-select v-model="item.hazardLevel" clearable placeholder="请选择隐患等级" style="width: 408px">
  83. <el-option :key="2" label="一般隐患" :value="2"></el-option>
  84. <el-option :key="1" label="重大隐患" :value="1"></el-option>
  85. <el-option :key="3" label="管理问题" :value="3"></el-option>
  86. </el-select>
  87. </el-form-item>
  88. <el-form-item label="检查项目" :prop="'checkHazardDtoList.'+index+'.hazardCheckPro'" :rules="rules.hazardCheckPro" label-width="123px">
  89. <el-cascader
  90. @change="(val)=>cascaderChange(val,index)"
  91. v-model="item.hazardCheckPro"
  92. style="width: 898px"
  93. placeholder="请选择检查项"
  94. :options="options"
  95. :props="{ checkStrictly: false, value: 'id', label: 'labelName',emitPath:false }"
  96. filterable></el-cascader>
  97. <p class="hazard-check-count-p" v-if="hazardCheckCount>0">此检查项在当前实验室累计出现 <span>{{hazardCheckCount}}</span> 次隐患</p>
  98. </el-form-item>
  99. <el-form-item label="检查要点" label-width="123px">
  100. <el-input
  101. style="width: 898px"
  102. type="textarea"
  103. :autosize="{ minRows: 6, maxRows: 6}"
  104. placeholder="请输入检查要点"
  105. resize="none"
  106. maxlength="100"
  107. show-word-limit
  108. v-model="item.hazardCheckPoint">
  109. </el-input>
  110. </el-form-item>
  111. <el-form-item label="隐患描述" :prop="'checkHazardDtoList.'+index+'.hazardDescribe'" :rules="rules.hazardDescribe" label-width="123px">
  112. <el-input
  113. style="width: 898px"
  114. type="textarea"
  115. :autosize="{ minRows: 4, maxRows: 4}"
  116. placeholder="请输入隐患描述"
  117. resize="none"
  118. maxlength="100"
  119. show-word-limit
  120. v-model="item.hazardDescribe">
  121. </el-input>
  122. </el-form-item>
  123. <el-form-item label="隐患照片" :prop="'checkHazardDtoList.'+index+'.uploadDtoList'" :rules="rules.uploadDtoList" label-width="123px">
  124. <div class="for-img-box" v-for="(img,imgIndex) in item.uploadDtoList" :key="imgIndex">
  125. <img class="for-img" :src="img.fileUrl" @click="lookImg(item.uploadDtoList,imgIndex)">
  126. <p class="for-del-button el-icon-circle-close" @click="delImg(index,imgIndex)"></p>
  127. </div>
  128. <el-upload
  129. style="display: inline-block;overflow: hidden"
  130. class="avatar-uploader"
  131. :action="uploadImgUrl"
  132. :show-file-list="false"
  133. :on-success="(res)=>handleAvatarSuccess(res,item)"
  134. :headers="headers"
  135. :before-upload="(res)=>beforeAvatarUpload(res,item)">
  136. <p class="el-icon-plus up-img-p" style="display: inline-block"></p>
  137. </el-upload>
  138. </el-form-item>
  139. <el-form-item label="" label-width="123px" style="margin-bottom:40px;">
  140. <p>支持jpg/png/bmp/gif格式,且不超过2M,最多上传5张</p>
  141. </el-form-item>
  142. </div>
  143. </div>
  144. <p class="add-bottom-button" @click="addObject">+新增隐患检查项</p>
  145. </div>
  146. </el-form>
  147. </div>
  148. <div class="bottom-button-max-box">
  149. <p></p>
  150. <p class="reset-button-one" @click="outButton">取消</p>
  151. <p class="add-button-two-90" @click="upDataButton(1)">保存</p>
  152. <p class="inquire-button-one" @click="upDataButton(2)">提交</p>
  153. </div>
  154. <lookImgDialog ref="lookImgDialog"></lookImgDialog>
  155. </div>
  156. </template>
  157. <script>
  158. import { getToken } from "@/utils/auth";
  159. import lookImgDialog from '@/components/lookImgDialog/lookImgDialog.vue'
  160. import { findCheckManage,checkOptionList,checkManageUpdate,countHazardNum } from '@/api/safetyCheck/index'
  161. export default {
  162. name: 'addPage',
  163. props:{
  164. propsAddData:{},
  165. },
  166. components: {
  167. lookImgDialog,
  168. },
  169. data(){
  170. return{
  171. uploadImgUrl: this.uploadUrl(), // 上传的图片服务器地址
  172. headers: {
  173. Authorization: "Bearer " + getToken(),
  174. },
  175. //期限时间
  176. pickerOptions: {
  177. disabledDate(time) {
  178. return time.getTime() < Date.now() - 8.64e7;//如果没有后面的-8.64e7就是不可以选择今天的
  179. }
  180. },
  181. addPageTitle:"",
  182. //新增-编辑
  183. options:[],
  184. addForm:{},
  185. //上传用名称保存
  186. upDataName:"",
  187. // 表单校验
  188. rules: {
  189. checkResult: [
  190. { required: true, message: "请选择检查结果", trigger: "blur" },
  191. ],
  192. rectifyNotice: [
  193. { required: true, message: "请选择整改通知", trigger: "blur" },
  194. ],
  195. rectifyDeadline: [
  196. { required: true, message: "请选择整改期限", trigger: "blur" },
  197. ],
  198. hazardLevel: [
  199. { required: true, message: "请选择隐患等级", trigger: "blur" },
  200. ],
  201. hazardCheckPro: [
  202. { required: true, message: "请选择检查项目", trigger: "blur" },
  203. ],
  204. hazardDescribe: [
  205. { required: true, message: "请输入隐患描述", trigger: "blur" },
  206. { required: true, message: "请输入隐患描述", validator: this.spaceJudgment, trigger: "blur" },
  207. ],
  208. uploadDtoList: [
  209. { required: true, message: "请上传隐患照片", trigger: "blur" },
  210. ],
  211. },
  212. //隐患发生次数
  213. hazardCheckCount:0,
  214. }
  215. },
  216. created(){
  217. this.$set(this,'addPageTitle',this.propsAddData.title);
  218. this.checkOptionList();
  219. this.findCheckManage();
  220. },
  221. mounted(){},
  222. methods:{
  223. //保存/提交按钮
  224. upDataButton(type){
  225. this.$refs["addForm"].validate(valid => {
  226. if (valid) {
  227. let obj = JSON.parse(JSON.stringify(this.addForm));
  228. if(obj.checkResult === 0){
  229. if(!obj.checkHazardDtoList[0]){
  230. this.msgError('请添加隐患检查项')
  231. return
  232. }
  233. for(let i=0;i<obj.checkHazardDtoList.length;i++){
  234. delete obj.checkHazardDtoList[i].lookType
  235. }
  236. obj.dangerNum = obj.checkHazardDtoList.length
  237. }else{
  238. obj.checkHazardDtoList = [];
  239. }
  240. obj.manageStatus = type
  241. checkManageUpdate(obj).then(response => {
  242. this.msgSuccess(response.msg);
  243. this.$parent.goAddPage(4);
  244. });
  245. }
  246. })
  247. },
  248. //查询详情
  249. findCheckManage(){
  250. findCheckManage({id:this.propsAddData.id}).then(response => {
  251. response.data.checkResult = response.data.checkResult === 0 || response.data.checkResult === 1?response.data.checkResult:"";
  252. response.data.rectifyNotice = response.data.rectifyNotice?response.data.rectifyNotice:"";
  253. response.data.rectifyDeadline = response.data.rectifyDeadline?response.data.rectifyDeadline:"";
  254. for(let i=0;i<response.data.checkHazardDtoList.length;i++){
  255. response.data.checkHazardDtoList[i].lookType = true;
  256. }
  257. this.$set(this,'addForm',response.data);
  258. });
  259. },
  260. //返回事件
  261. outButton(){
  262. this.$parent.goAddPage(1);
  263. },
  264. // 删除图片
  265. delImg(index,imgIndex){
  266. this.addForm.checkHazardDtoList[index].uploadDtoList.splice(imgIndex,1);
  267. },
  268. //收起/展开
  269. dataLookButton(item){
  270. item.lookType = !item.lookType
  271. },
  272. //新增检查
  273. addObject(){
  274. if(this.addForm.checkHazardDtoList.length<10){
  275. let obj = {
  276. hazardCheckCode:'',
  277. hazardCheckName:'',
  278. hazardCheckPoint:'',
  279. hazardCheckPro:'',
  280. hazardDescribe:'',
  281. hazardLevel:'',
  282. lookType:true,
  283. uploadDtoList:[],
  284. };
  285. this.addForm.checkHazardDtoList.push(obj);
  286. }
  287. },
  288. //删除检查项
  289. delCheckHazardDtoList(index){
  290. let self = this;
  291. this.$confirm('是否确认删除?', "警告", {
  292. confirmButtonText: "确定",
  293. cancelButtonText: "取消",
  294. type: "warning"
  295. }).then(function() {
  296. self.addForm.checkHazardDtoList.splice(index,1);
  297. }).then(() => {
  298. }).catch(() => {});
  299. },
  300. //检查项选中
  301. cascaderChange(val,index){
  302. let obj = this.getCascaderDataQuery(val,this.options);
  303. this.$set(this.addForm.checkHazardDtoList[index],'hazardCheckCode',obj.code);
  304. this.$set(this.addForm.checkHazardDtoList[index],'hazardCheckName',obj.name);
  305. countHazardNum({subId:this.addForm.subId, hazardCheckPro:val}).then( response => {
  306. this.$set(this,'hazardCheckCount',response.data);
  307. })
  308. },
  309. //查看图片
  310. lookImg(list,index){
  311. for(let i=0;i<list.length;i++){
  312. list[i].name = list[i].fileName;
  313. list[i].url = list[i].fileUrl;
  314. }
  315. this.$refs.lookImgDialog.lookImgDialogOpen(1,list,index);
  316. },
  317. /*==========上传相关==========*/
  318. handleAvatarSuccess(res,item) {
  319. if(item.uploadDtoList.length>4){
  320. this.msgError('最多只可上传5张')
  321. return
  322. }
  323. let suffixName= this.upDataName.split('.')[this.upDataName.split('.').length - 2]
  324. //判断文件名中是否有逗号和分号
  325. if(suffixName.indexOf(',')==-1 && suffixName.indexOf(';')==-1){
  326. }else{
  327. this.msgError('文件名里包含逗号或分号,请修改后重新上传!')
  328. return
  329. }
  330. let obj ={
  331. fileName:this.upDataName,
  332. fileUrl:res.data.url,
  333. fileType:2,
  334. source:2,
  335. };
  336. item.uploadDtoList.push(obj);
  337. this.$forceUpdate()
  338. },
  339. beforeAvatarUpload(file,item) {
  340. if(item.uploadDtoList.length>4){
  341. this.msgError('最多只可上传5张')
  342. return false
  343. }
  344. let type = false;
  345. if (file.type == 'image/png' || file.type == 'image/jpeg' || file.type == 'image/gif' || file.type == 'image/bmp') {
  346. if(file.size> 2000000){
  347. this.msgError('上传图片大小不能超过2M')
  348. return false
  349. }
  350. this.upDataName = file.name;
  351. type = true;
  352. }else{
  353. this.msgError('png/jpeg/gif格式')
  354. type = false;
  355. }
  356. return type;
  357. },
  358. //获取检查项
  359. checkOptionList(){
  360. checkOptionList().then( response => {
  361. this.$set(this,'options',response.data);
  362. this.getCascaderData(this.options);
  363. })
  364. },
  365. //联级选择器数据处理
  366. getCascaderData(list){
  367. let self = this;
  368. for(let i=0;i<list.length;i++){
  369. list[i].labelName = list[i].code? list[i].code +' '+ list[i].name:list[i].name
  370. if(list[i].level == 0 || list[i].level == 1 || list[i].level == 2){
  371. self.getCascaderData(list[i].children)
  372. }else{
  373. delete list[i].children
  374. }
  375. }
  376. },
  377. //联级选择器数据查询
  378. getCascaderDataQuery(text,list){
  379. let self = this;
  380. for(let i=0;i<list.length;i++){
  381. if(list[i].id == text){
  382. return list[i]
  383. }else{
  384. if(list[i].children){
  385. let obj = self.getCascaderDataQuery(text,list[i].children)
  386. if(obj){
  387. return obj
  388. }else{
  389. return false
  390. }
  391. }else{
  392. console.log('false = 2')
  393. return false
  394. }
  395. }
  396. }
  397. },
  398. }
  399. }
  400. </script>
  401. <style scoped lang="scss">
  402. .inspectionManagement-addPage{
  403. flex: 1;
  404. display: flex !important;
  405. flex-direction: column;
  406. overflow: hidden;
  407. *{
  408. font-weight:500;
  409. }
  410. .title-max-box{
  411. position: relative;
  412. height:90px;
  413. display: flex;
  414. border-bottom:1px solid #dedede;
  415. .title-p{
  416. flex:1;
  417. color:#0045AF;
  418. margin-left:64px;
  419. line-height:90px;
  420. font-size:16px;
  421. }
  422. .title-button{
  423. width:70px;
  424. margin:24px 31px;
  425. }
  426. .position-img{
  427. width:80px;
  428. height:80px;
  429. position: absolute;
  430. top:0;
  431. left:0;
  432. }
  433. }
  434. .content-max-box{
  435. flex:1;
  436. display: flex;
  437. flex-direction: column;
  438. .top-form-box{
  439. padding:40px 85px 20px;
  440. display: flex;
  441. .top-form-left-box{
  442. height:317px;
  443. width:770px;
  444. margin-right:90px;
  445. }
  446. .top-form-right-box{
  447. height:317px;
  448. width:534px;
  449. }
  450. }
  451. .bottom-form-box{
  452. .bottom-form-title-box{
  453. background: #F5F5F5;
  454. display: flex;
  455. margin-bottom:31px;
  456. p{
  457. font-size:16px;
  458. line-height:50px;
  459. }
  460. p:nth-child(1){
  461. color:#333;
  462. margin-left:30px;
  463. flex:1;
  464. }
  465. p:nth-child(2){
  466. color:#0183FA;
  467. margin-right:37px;
  468. }
  469. }
  470. .add-bottom-button{
  471. cursor: pointer;
  472. color:#0183FA;
  473. border-radius:4px;
  474. border:1px dashed #0183FA;
  475. width:800px;
  476. line-height:40px;
  477. text-align: center;
  478. font-size:14px;
  479. margin: 20px auto;
  480. }
  481. }
  482. }
  483. .for-max-big-box{
  484. border:1px solid #dedede;
  485. overflow: hidden;
  486. margin:0 81px;
  487. .for-title-box{
  488. display: flex;
  489. background: #F5F5F5;
  490. border-bottom:1px solid #dedede;
  491. line-height:50px;
  492. .for-title-p{
  493. color:#333333;
  494. font-size:16px;
  495. margin-left: 30px;
  496. flex:1;
  497. }
  498. .for-del-box{
  499. color:#0183FA;
  500. margin-left:46px;
  501. cursor: pointer;
  502. display: flex;
  503. p{
  504. font-size:14px;
  505. line-height:50px;
  506. margin-right:8px;
  507. }
  508. }
  509. .for-button-box{
  510. color:#0183FA;
  511. margin-left:46px;
  512. margin-right:43px;
  513. cursor: pointer;
  514. display: flex;
  515. p{
  516. font-size:14px;
  517. line-height:50px;
  518. margin-right:8px;
  519. }
  520. }
  521. }
  522. .for-big-box{
  523. height:540px;
  524. padding-top:27px;
  525. .up-img-p{
  526. height:80px;
  527. width:80px;
  528. line-height:80px;
  529. text-align: center;
  530. font-size:16px;
  531. border-radius:4px;
  532. border:1px dashed #E0E0E0;
  533. }
  534. .for-img-box{
  535. width:80px;
  536. height:80px;
  537. border-radius:4px;
  538. display: inline-block;
  539. overflow: hidden;
  540. margin-right:20px;
  541. position: relative;
  542. .for-img{
  543. width:80px;
  544. height:80px;
  545. display: inline-block;
  546. overflow: hidden;
  547. cursor: pointer;
  548. }
  549. .for-del-button{
  550. background: rgba(0,0,0,0.7);
  551. width:20px;
  552. height:20px;
  553. line-height: 20px;
  554. text-align: center;
  555. color:#fff;
  556. border-bottom-left-radius:4px;
  557. cursor: pointer;
  558. position: absolute;
  559. top:0;
  560. right:0;
  561. }
  562. }
  563. .hazard-check-count-p{
  564. display: inline-block;
  565. margin-left: 20px;
  566. font-size: 14px;
  567. line-height: 40px;
  568. span{
  569. color:#FF0000;
  570. }
  571. }
  572. }
  573. }
  574. .bottom-button-max-box{
  575. height:80px;
  576. display: flex;
  577. border-top:1px solid #dedede;
  578. p{
  579. margin-top:20px;
  580. }
  581. p:nth-child(1){
  582. flex:1;
  583. }
  584. p:nth-child(2){
  585. width:90px;
  586. margin-right:20px;
  587. }
  588. p:nth-child(3){
  589. width:90px;
  590. margin-right:20px;
  591. }
  592. p:nth-child(4){
  593. width:90px;
  594. margin-right:20px;
  595. }
  596. }
  597. }
  598. ::v-deep .is-disabled{
  599. .el-input__inner{
  600. background-color: #f5f5f5;
  601. color: #333;
  602. border-color: #f5f5f5;
  603. cursor:auto;
  604. }
  605. }
  606. </style>