index.vue 32 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903
  1. <template>
  2. <div class="app-container startInspection" v-loading.fullscreen.lock="loading">
  3. <div class="title-max-box">
  4. <p class="title-p">开展检查</p>
  5. </div>
  6. <div class="content-max-box scrollbar-box">
  7. <el-form ref="addForm" :model="addForm" :rules="rules" label-width="82px">
  8. <div class="top-form-box">
  9. <div class="top-form-left-box">
  10. <el-form-item label="实验室" prop="subId">
  11. <el-select placeholder="搜索实验室或房间号" filterable remote reserve-keyword style="width: 500px"
  12. v-model="addForm.subId" @change="subChange" :remote-method="getSubList">
  13. <el-option
  14. v-for="item in subSelectList"
  15. :key="item.id"
  16. :label="item.name"
  17. :value="item.id">
  18. </el-option>
  19. </el-select>
  20. </el-form-item>
  21. <el-form-item label="楼栋" prop="buildId">
  22. <el-select v-model="addForm.buildId" placeholder="请选择学院"
  23. @change="buildingsChange" style="width: 500px">
  24. <el-option
  25. v-for="item in buildingsSelectList"
  26. :key="item.deptId"
  27. :label="item.deptName"
  28. :value="item.deptId">
  29. </el-option>
  30. </el-select>
  31. </el-form-item>
  32. <div style="display: flex" v-if="planType == 1">
  33. <el-form-item label="计划标题" prop="title">
  34. <el-input v-model="addForm.title" placeholder="请输入计划标题" maxLength="30" style="width: 500px"/>
  35. </el-form-item>
  36. <p class="inquire-button-one" @click="planButton(2)"
  37. style="font-size:14px;margin-left:20px;width:100px;" v-if="planList[0]">选择计划</p>
  38. </div>
  39. <div style="display: flex" v-if="planType == 2">
  40. <el-form-item label="计划" prop="id">
  41. <el-select v-model="addForm.id" placeholder="请选择计划"
  42. @change="planChange" style="width: 500px">
  43. <el-option
  44. v-for="item in planList"
  45. :key="item.id"
  46. :label="item.title"
  47. :value="item.id">
  48. </el-option>
  49. </el-select>
  50. </el-form-item>
  51. <p class="inquire-button-one" @click="planButton(1)"
  52. style="font-size:14px;margin-left:20px;width:100px;">自定义输入</p>
  53. </div>
  54. <el-form-item label="检查结果" prop="checkResult">
  55. <el-select v-model="addForm.checkResult" @change="checkResultChange" placeholder="请选择检查结果" style="width: 500px">
  56. <el-option :key="0" label="不符合" :value="0"></el-option>
  57. <el-option :key="1" label="符合" :value="1"></el-option>
  58. </el-select>
  59. </el-form-item>
  60. <el-form-item label="整改通知" prop="rectifyNotice" v-if="addForm.checkResult === 0">
  61. <el-radio-group v-model="addForm.rectifyNotice" style="margin-top:5px;">
  62. <el-radio :label="1">整改告知书</el-radio>
  63. <el-radio :label="2">整改通知书</el-radio>
  64. </el-radio-group>
  65. </el-form-item>
  66. </div>
  67. <div class="top-form-right-box">
  68. <el-form-item label="学院" prop="deptId">
  69. <el-select v-model="addForm.deptId" placeholder="请选择学院"
  70. @change="deptChange" style="width: 500px">
  71. <el-option
  72. v-for="item in deptSelectList"
  73. :key="item.deptId"
  74. :label="item.deptName"
  75. :value="item.deptId">
  76. </el-option>
  77. </el-select>
  78. </el-form-item>
  79. <el-form-item label="检查类型" prop="checkType">
  80. <el-select v-model="addForm.checkType" placeholder="请选择检查类型"
  81. :disabled="planType == 2" style="width: 500px">
  82. <el-option :key="1" label="校院巡查" :value="1"></el-option>
  83. <el-option :key="2" label="实验室自查" :value="2"></el-option>
  84. </el-select>
  85. </el-form-item>
  86. <el-form-item label="计划周期" prop="dateRange">
  87. <el-date-picker
  88. :disabled="planType == 2"
  89. :clearable="false"
  90. v-model="addForm.dateRange"
  91. size="small"
  92. style="width: 500px"
  93. value-format="yyyy-MM-dd"
  94. type="daterange"
  95. :picker-options="pickerOptions"
  96. range-separator="至"
  97. start-placeholder="开始日期"
  98. end-placeholder="结束日期"
  99. ></el-date-picker>
  100. </el-form-item>
  101. <el-form-item label="整改期限" prop="rectifyDeadline" v-if="addForm.checkResult === 0">
  102. <el-date-picker
  103. style="width: 500px"
  104. v-model="addForm.rectifyDeadline"
  105. type="date"
  106. value-format="yyyy-MM-dd"
  107. :picker-options="pickerOptions"
  108. :clearable="false"
  109. placeholder="请选择整改期限">
  110. </el-date-picker>
  111. </el-form-item>
  112. </div>
  113. </div>
  114. <div class="bottom-form-box" v-if="addForm.checkResult === 0">
  115. <div class="bottom-form-title-box">
  116. <p>不符合项</p>
  117. <p>隐患数:{{addForm.checkHazardDtoList.length}}</p>
  118. </div>
  119. <div class="for-max-big-box" v-for="(item,index) in addForm.checkHazardDtoList" :key="index">
  120. <div class="for-title-box">
  121. <p class="for-title-p">第{{index+1}}隐患项</p>
  122. <div class="for-del-box">
  123. <p class="el-icon-delete"></p>
  124. <p @click="delCheckHazardDtoList(index)">删除此项</p>
  125. </div>
  126. <div class="for-button-box" @click="dataLookButton(item)">
  127. <p :class="item.lookType?'el-icon-arrow-up':'el-icon-arrow-down'"></p>
  128. <p>{{item.lookType?'收起':'展开'}}</p>
  129. </div>
  130. </div>
  131. <div class="for-big-box" v-if="item.lookType">
  132. <el-form-item label="隐患等级" :prop="'checkHazardDtoList.'+index+'.hazardLevel'" :rules="rules.hazardLevel" label-width="123px">
  133. <el-select v-model="item.hazardLevel" clearable placeholder="请选择隐患等级" style="width: 408px">
  134. <el-option :key="2" label="一般隐患" :value="2"></el-option>
  135. <el-option :key="1" label="重大隐患" :value="1"></el-option>
  136. <el-option :key="3" label="管理问题" :value="3"></el-option>
  137. </el-select>
  138. </el-form-item>
  139. <el-form-item label="检查项目" :prop="'checkHazardDtoList.'+index+'.hazardCheckPro'" :rules="rules.hazardCheckPro" label-width="123px">
  140. <el-cascader
  141. @change="(val)=>cascaderChange(val,index)"
  142. v-model="item.hazardCheckPro"
  143. style="width: 898px"
  144. placeholder="请选择检查项"
  145. :options="options"
  146. :props="{ checkStrictly: false, value: 'id', label: 'labelName',emitPath:false }"
  147. filterable>
  148. <template slot-scope="{data}">
  149. <el-tooltip :content="data.labelName" v-if="data.labelName.length>22">
  150. <p style="max-width:300px;overflow: hidden;text-overflow:ellipsis;white-space:nowrap;">{{data.labelName}}</p>
  151. </el-tooltip>
  152. <p v-else style="max-width:300px;overflow: hidden;text-overflow:ellipsis;white-space:nowrap;">{{data.labelName}}</p>
  153. </template>
  154. </el-cascader>
  155. <p class="hazard-check-count-p" v-if="hazardCheckCount>0">此检查项在当前实验室累计出现 <span>{{hazardCheckCount}}</span> 次隐患</p>
  156. </el-form-item>
  157. <el-form-item label="检查要点" label-width="123px">
  158. <el-input
  159. style="width: 898px"
  160. type="textarea"
  161. :autosize="{ minRows: 6, maxRows: 6}"
  162. placeholder="未查到此项检查要点,可在此输入添加"
  163. resize="none"
  164. maxlength="300"
  165. show-word-limit
  166. v-model="item.hazardCheckPoint">
  167. </el-input>
  168. </el-form-item>
  169. <el-form-item label="隐患描述" :prop="'checkHazardDtoList.'+index+'.hazardDescribe'" :rules="rules.hazardDescribe" label-width="123px">
  170. <el-input
  171. style="width: 898px"
  172. type="textarea"
  173. :autosize="{ minRows: 4, maxRows: 4}"
  174. placeholder="请输入隐患描述"
  175. resize="none"
  176. maxlength="100"
  177. show-word-limit
  178. v-model="item.hazardDescribe">
  179. </el-input>
  180. </el-form-item>
  181. <el-form-item label="隐患照片" :prop="'checkHazardDtoList.'+index+'.uploadDtoList'" :rules="rules.uploadDtoList" label-width="123px">
  182. <div class="for-img-box" v-for="(img,imgIndex) in item.uploadDtoList" :key="imgIndex">
  183. <img class="for-img" :src="img.fileUrl" @click="lookImg(item.uploadDtoList,imgIndex)">
  184. <p class="for-del-button el-icon-circle-close" @click="delImg(index,imgIndex)"></p>
  185. </div>
  186. <el-upload
  187. v-if="item.uploadDtoList.length<5"
  188. style="display: inline-block;overflow: hidden"
  189. class="avatar-uploader"
  190. :action="uploadImgUrl"
  191. :show-file-list="false"
  192. :on-success="(res)=>handleAvatarSuccess(res,item)"
  193. :headers="headers"
  194. :before-upload="(res)=>beforeAvatarUpload(res,item)">
  195. <p class="el-icon-plus up-img-p" style="display: inline-block"></p>
  196. </el-upload>
  197. </el-form-item>
  198. <el-form-item label="" label-width="123px" style="margin-bottom:40px;">
  199. <p>支持jpg/png/bmp/gif格式,且不超过2M,最多上传5张</p>
  200. </el-form-item>
  201. </div>
  202. </div>
  203. <p class="add-bottom-button" @click="addObject">+新增隐患检查项</p>
  204. </div>
  205. </el-form>
  206. </div>
  207. <div class="bottom-button-max-box" v-hasPermi="['safety:checkManage_4:edit']">
  208. <p></p>
  209. <p class="add-button-two-90" @click="upDataButton(1)">保存</p>
  210. <p class="inquire-button-one" @click="upDataButton(2)">提交</p>
  211. </div>
  212. <lookImgDialog ref="lookImgDialog"></lookImgDialog>
  213. </div>
  214. </template>
  215. <script>
  216. import { getToken } from "@/utils/auth";
  217. import lookImgDialog from '@/components/lookImgDialog/lookImgDialog.vue'
  218. import { listDepartments,listbuildings } from "@/api/system/dept";
  219. import { buildBySubList,getCheckPlanBySubId,findCheckManage,checkOptionList,
  220. checkManageUpdate,checkManageAdd,countHazardNum } from "@/api/safetyCheck/index";
  221. export default {
  222. name: 'index',
  223. components: {
  224. lookImgDialog,
  225. },
  226. data(){
  227. return{
  228. loading:false,
  229. uploadImgUrl: this.uploadUrl(), // 上传的图片服务器地址
  230. headers: {
  231. Authorization: "Bearer " + getToken(),
  232. },
  233. //期限时间
  234. pickerOptions: {
  235. disabledDate(time) {
  236. return time.getTime() < Date.now() - 8.64e7;//如果没有后面的-8.64e7就是不可以选择今天的
  237. }
  238. },
  239. //学院列表
  240. deptSelectList:[],
  241. //楼栋列表
  242. buildingsSelectList:[],
  243. //实验室列表
  244. subSelectList:[],
  245. //楼栋列表
  246. options:[],
  247. addForm:{
  248. checkRange:3,
  249. id:"",
  250. subId:"",
  251. buildId:"",
  252. deptId:"",
  253. title:"",
  254. checkResult:"",
  255. rectifyNotice:"",
  256. checkType:"",
  257. dateRange:[],
  258. rectifyDeadline:"",
  259. checkHazardDtoList:[],
  260. },
  261. //检查项出现次数
  262. hazardCheckCount:0,
  263. //上传用名称保存
  264. upDataName:"",
  265. // 表单校验
  266. rules: {
  267. subId: [
  268. { required: true, message: "请选择实验室", trigger: "blur" },
  269. ],
  270. buildId: [
  271. { required: true, message: "请选择楼栋", trigger: "blur" },
  272. ],
  273. deptId: [
  274. { required: true, message: "请选择学院", trigger: "blur" },
  275. ],
  276. checkType: [
  277. { required: true, message: "请选择检查类型", trigger: "blur" },
  278. ],
  279. dateRange: [
  280. { required: true, message: "请选择计划周期", trigger: "blur" },
  281. ],
  282. title: [
  283. { required: true, message: "请输入计划标题", trigger: "blur" },
  284. { required: true, message: "请输入计划标题", validator: this.spaceJudgment, trigger: "blur" },
  285. ],
  286. id: [
  287. { required: true, message: "请选择计划", trigger: "blur" },
  288. ],
  289. checkResult: [
  290. { required: true, message: "请选择检查结果", trigger: "blur" },
  291. ],
  292. rectifyNotice: [
  293. { required: true, message: "请选择整改通知", trigger: "blur" },
  294. ],
  295. rectifyDeadline: [
  296. { required: true, message: "请选择整改期限", trigger: "blur" },
  297. ],
  298. hazardLevel: [
  299. { required: true, message: "请选择隐患等级", trigger: "blur" },
  300. ],
  301. hazardCheckPro: [
  302. { required: true, message: "请选择检查项目", trigger: "blur" },
  303. ],
  304. hazardDescribe: [
  305. { required: true, message: "请输入隐患描述", trigger: "blur" },
  306. { required: true, message: "请输入隐患描述", validator: this.spaceJudgment, trigger: "blur" },
  307. ],
  308. uploadDtoList: [
  309. { required: true, message: "请上传隐患照片", trigger: "blur" },
  310. ],
  311. },
  312. //自主输入与列表选择相关数据
  313. planList:[],
  314. planType:1,//1手动 2选择
  315. }
  316. },
  317. created(){
  318. },
  319. mounted(){
  320. this.checkOptionList();
  321. this.listDepartments();
  322. },
  323. methods:{
  324. //提交按钮
  325. upDataButton(type){
  326. this.$refs["addForm"].validate(valid => {
  327. if (valid) {
  328. let startTime = Date.parse(new Date(this.addForm.dateRange[0]));
  329. let currentTime = Date.parse(new Date);
  330. if(currentTime<startTime){
  331. this.msgError('当前时间不在计划周期内')
  332. return
  333. }
  334. if(this.planType == 1){
  335. //新计划
  336. let obj = JSON.parse(JSON.stringify(this.addForm));
  337. if(obj.checkResult === 0){
  338. if(!obj.checkHazardDtoList[0]){
  339. this.msgError('请添加隐患检查项')
  340. return
  341. }
  342. for(let i=0;i<obj.checkHazardDtoList.length;i++){
  343. delete obj.checkHazardDtoList[i].lookType
  344. }
  345. obj.dangerNum = obj.checkHazardDtoList.length
  346. }else{
  347. obj.checkHazardDtoList = [];
  348. }
  349. obj.manageStatus = type
  350. obj.cycleStartTime = obj.dateRange[0]
  351. obj.cycleEndTime = obj.dateRange[1]
  352. obj.subIds = obj.subId;
  353. delete obj.subId;
  354. delete obj.dateRange
  355. checkManageAdd(obj).then(response => {
  356. this.msgSuccess(response.msg);
  357. this.initializationAddData();
  358. });
  359. }if(this.planType == 2){
  360. //已有计划修改
  361. let obj = JSON.parse(JSON.stringify(this.addForm));
  362. if(obj.checkResult === 0){
  363. if(!obj.checkHazardDtoList[0]){
  364. this.msgError('请添加隐患检查项')
  365. return
  366. }
  367. for(let i=0;i<obj.checkHazardDtoList.length;i++){
  368. delete obj.checkHazardDtoList[i].lookType
  369. }
  370. obj.dangerNum = obj.checkHazardDtoList.length
  371. }else{
  372. obj.checkHazardDtoList = [];
  373. }
  374. obj.manageStatus = type
  375. obj.cycleStartTime = obj.dateRange[0]
  376. obj.cycleEndTime = obj.dateRange[1]
  377. delete obj.dateRange
  378. checkManageUpdate(obj).then(response => {
  379. this.msgSuccess(response.msg);
  380. this.initializationAddData();
  381. });
  382. }
  383. }
  384. })
  385. },
  386. // 删除图片
  387. delImg(index,imgIndex){
  388. this.addForm.checkHazardDtoList[index].uploadDtoList.splice(imgIndex,1);
  389. },
  390. //收起/展开
  391. dataLookButton(item){
  392. item.lookType = !item.lookType
  393. },
  394. //检查结果选中
  395. checkResultChange(val){
  396. if(val == 0){
  397. //不符合时如果没有检查项则写入一条
  398. if(!this.addForm.checkHazardDtoList[0]){
  399. this.addObject();
  400. }
  401. }
  402. },
  403. //新增检查
  404. addObject(){
  405. if(this.addForm.checkHazardDtoList.length<10){
  406. let obj = {
  407. hazardCheckCode:'',
  408. hazardCheckName:'',
  409. hazardCheckPoint:'',
  410. hazardCheckPro:'',
  411. hazardDescribe:'',
  412. hazardLevel:'',
  413. lookType:true,
  414. uploadDtoList:[],
  415. };
  416. this.addForm.checkHazardDtoList.push(obj);
  417. }
  418. },
  419. //查看图片
  420. lookImg(list,index){
  421. for(let i=0;i<list.length;i++){
  422. list[i].name = list[i].fileName;
  423. list[i].url = list[i].fileUrl;
  424. }
  425. this.$refs.lookImgDialog.lookImgDialogOpen(1,list,index);
  426. },
  427. /*==========上传相关==========*/
  428. handleAvatarSuccess(res,item) {
  429. this.$set(this,'loading',false);
  430. if(item.uploadDtoList.length>4){
  431. this.msgError('最多只可上传5张')
  432. return
  433. }
  434. let suffixName= this.upDataName.split('.')[this.upDataName.split('.').length - 2]
  435. //判断文件名中是否有逗号和分号
  436. if(suffixName.indexOf(',')==-1 && suffixName.indexOf(';')==-1){
  437. }else{
  438. this.msgError('文件名里包含逗号或分号,请修改后重新上传!')
  439. return
  440. }
  441. let obj ={
  442. fileName:this.upDataName,
  443. fileUrl:res.data.url,
  444. fileType:2,
  445. source:2,
  446. };
  447. item.uploadDtoList.push(obj);
  448. this.$forceUpdate()
  449. },
  450. beforeAvatarUpload(file,item) {
  451. if(item.uploadDtoList.length>4){
  452. this.msgError('最多只可上传5张')
  453. return false
  454. }
  455. let type = false;
  456. if (file.type == 'image/png' || file.type == 'image/jpeg' || file.type == 'image/gif' || file.type == 'image/bmp') {
  457. if(file.size> 2100000){
  458. this.msgError('上传图片大小不能超过2M')
  459. return false
  460. }
  461. this.$set(this,'loading',true);
  462. this.upDataName = file.name;
  463. type = true;
  464. }else{
  465. this.msgError('仅支持jpg/png/bmp/gif格式')
  466. type = false;
  467. }
  468. return type;
  469. },
  470. //获取检查项
  471. checkOptionList(){
  472. checkOptionList().then( response => {
  473. this.$set(this,'options',response.data);
  474. this.getCascaderData(this.options);
  475. })
  476. },
  477. //联级选择器数据处理
  478. getCascaderData(list){
  479. let self = this;
  480. for(let i=0;i<list.length;i++){
  481. list[i].labelName = list[i].code? list[i].code +' '+ list[i].name:list[i].name
  482. if(list[i].level == 0 || list[i].level == 1 || list[i].level == 2){
  483. if(list[i].children){
  484. if(list[i].children[0]){
  485. self.getCascaderData(list[i].children)
  486. if(list[i].children){
  487. if(!list[i].children[0]){
  488. list.splice(i,1)
  489. i--
  490. }
  491. }else{
  492. list.splice(i,1)
  493. i--
  494. }
  495. }else{
  496. list.splice(i,1)
  497. i--
  498. }
  499. }else{
  500. list.splice(i,1)
  501. i--
  502. }
  503. }else{
  504. delete list[i].children
  505. }
  506. }
  507. },
  508. //获取学院列表
  509. listDepartments(){
  510. listDepartments().then(response => {
  511. this.deptSelectList = response.data;
  512. });
  513. },
  514. //根据学院id查询楼栋列表
  515. listbuildings(id){
  516. listbuildings(id).then(response => {
  517. this.buildingsSelectList = response.data;
  518. });
  519. },
  520. //根据楼栋id查询实验室列表
  521. buildBySubList(data,type){
  522. let obj = type == 1?{buildId:data}:{searchValue:data}
  523. buildBySubList(obj).then(response => {
  524. this.subSelectList = response.data;
  525. });
  526. },
  527. //选择学院触发
  528. deptChange(val){
  529. this.$set(this.addForm,'buildId','');
  530. this.$set(this.addForm,'subId','');
  531. this.$set(this,'subSelectList',[]);
  532. this.initializationAddFormData();
  533. this.$set(this,'planType',1);
  534. this.$set(this,'planList',[]);
  535. this.listbuildings(val);
  536. },
  537. //选择楼栋触发
  538. buildingsChange(val){
  539. this.$set(this,'subId','');
  540. this.initializationAddFormData();
  541. this.$set(this,'planType',1);
  542. this.$set(this,'planList',[]);
  543. this.buildBySubList(val,1);
  544. },
  545. //选择实验室触发
  546. subChange(val){
  547. let self = this;
  548. for(let i=0;i<self.subSelectList.length;i++){
  549. if(self.subSelectList[i].id == val){
  550. this.$set(this.addForm,'deptId',self.subSelectList[i].deptId);
  551. this.$set(this.addForm,'buildId',self.subSelectList[i].buildId);
  552. this.listbuildings(self.subSelectList[i].deptId);
  553. this.getCheckPlanBySubId(val);
  554. return
  555. }
  556. }
  557. },
  558. //实验室搜索
  559. getSubList(val){
  560. this.$set(this.addForm,'deptId','');
  561. this.$set(this.addForm,'buildId','');
  562. this.$set(this,'buildingsSelectList',[]);
  563. this.$set(this.addForm,'subId','');
  564. this.$set(this,'subSelectList',[]);
  565. this.initializationAddFormData();
  566. this.$set(this,'planType',1);
  567. this.$set(this,'planList',[]);
  568. this.buildBySubList(val,2);
  569. },
  570. //根据实验室ID查询计划任务
  571. getCheckPlanBySubId(id){
  572. getCheckPlanBySubId({subId:id}).then(response => {
  573. this.initializationAddFormData();
  574. this.$set(this,'planType',response.data[0]?2:1);
  575. this.$set(this,'planList',response.data);
  576. });
  577. },
  578. //计划列表选中
  579. planChange(val){
  580. let self = this;
  581. for(let i=0;i<self.planList.length;i++){
  582. if(self.planList[i].id == val){
  583. self.findCheckManage(self.planList[i].id);
  584. return
  585. }
  586. }
  587. },
  588. //状态切换按钮
  589. planButton(type){
  590. this.initializationAddFormData();
  591. this.$set(this,'planType',type);
  592. },
  593. //查询详情
  594. findCheckManage(id){
  595. findCheckManage({id:id}).then(response => {
  596. response.data.checkResult = response.data.checkResult === 0 || response.data.checkResult === 1?response.data.checkResult:"";
  597. response.data.rectifyNotice = response.data.rectifyNotice?response.data.rectifyNotice:"";
  598. response.data.rectifyDeadline = response.data.rectifyDeadline?response.data.rectifyDeadline:"";
  599. response.data.dateRange = [response.data.cycleStartTime,response.data.cycleEndTime];
  600. for(let i=0;i<response.data.checkHazardDtoList.length;i++){
  601. response.data.checkHazardDtoList[i].lookType = true;
  602. }
  603. this.listbuildings(response.data.deptId);
  604. this.buildBySubList(response.data.buildId,1);
  605. this.$set(this,'addForm',{
  606. id:response.data.id,
  607. checkPlanId:response.data.checkPlanId,
  608. title:response.data.title,
  609. subId:response.data.subId,
  610. buildId:response.data.buildId,
  611. checkResult:response.data.checkResult,
  612. rectifyNotice:response.data.rectifyNotice,
  613. deptId:response.data.deptId,
  614. checkType:response.data.checkType,
  615. dateRange:response.data.dateRange,
  616. rectifyDeadline:response.data.rectifyDeadline,
  617. checkHazardDtoList:response.data.checkHazardDtoList,
  618. });
  619. });
  620. },
  621. //初始化数据
  622. initializationAddFormData(){
  623. this.$set(this.addForm,'id','');
  624. this.$set(this.addForm,'checkPlanId','');
  625. this.$set(this.addForm,'title','');
  626. this.$set(this.addForm,'checkRange',3);
  627. this.$set(this.addForm,'checkType','');
  628. this.$set(this.addForm,'dateRange',[]);
  629. this.$set(this.addForm,'checkResult','');
  630. this.$set(this.addForm,'rectifyNotice','');
  631. this.$set(this.addForm,'rectifyDeadline','');
  632. this.$set(this.addForm,'checkHazardDtoList',[]);
  633. },
  634. initializationAddData(){
  635. this.$set(this,'addForm',{
  636. checkRange:3,
  637. id:"",
  638. checkPlanId:"",
  639. subId:"",
  640. buildId:"",
  641. deptId:"",
  642. title:"",
  643. checkResult:"",
  644. rectifyNotice:"",
  645. checkType:"",
  646. dateRange:[],
  647. rectifyDeadline:"",
  648. checkHazardDtoList:[],
  649. });
  650. this.$set(this,'planType',1);
  651. this.$set(this,'planList',[]);
  652. },
  653. //删除检查项
  654. delCheckHazardDtoList(index){
  655. let self = this;
  656. this.$confirm('是否确认删除?', "警告", {
  657. confirmButtonText: "确定",
  658. cancelButtonText: "取消",
  659. type: "warning"
  660. }).then(function() {
  661. self.addForm.checkHazardDtoList.splice(index,1);
  662. }).then(() => {
  663. }).catch(() => {});
  664. },
  665. //检查项选中
  666. cascaderChange(val,index){
  667. let obj = this.getCascaderDataQuery(val,this.options);
  668. if(!obj){
  669. this.$set(this.addForm.checkHazardDtoList[index],'hazardCheckPro','');
  670. this.msgError('未找到相关项目')
  671. return
  672. }
  673. this.$set(this.addForm.checkHazardDtoList[index],'hazardCheckCode',obj.code);
  674. this.$set(this.addForm.checkHazardDtoList[index],'hazardCheckName',obj.name);
  675. this.$set(this.addForm.checkHazardDtoList[index],'hazardCheckPoint',obj.mainPoint);
  676. countHazardNum({subId:this.addForm.subId, hazardCheckPro:val}).then( response => {
  677. this.$set(this,'hazardCheckCount',response.data);
  678. })
  679. },
  680. //联级选择器数据查询
  681. getCascaderDataQuery(text,list){
  682. let self = this;
  683. for(let i=0;i<list.length;i++){
  684. if(list[i].id == text){
  685. return list[i]
  686. }else{
  687. if(list[i].children){
  688. let obj = self.getCascaderDataQuery(text,list[i].children)
  689. if(obj){
  690. return obj
  691. }
  692. }
  693. }
  694. }
  695. },
  696. }
  697. }
  698. </script>
  699. <style scoped lang="scss">
  700. .startInspection{
  701. flex: 1;
  702. display: flex !important;
  703. flex-direction: column;
  704. overflow: hidden;
  705. *{
  706. font-weight:500;
  707. }
  708. img{
  709. user-drag: none;
  710. }
  711. ::v-deep .el-range-editor--small .el-range-separator{
  712. line-height:32px;
  713. }
  714. .title-max-box{
  715. position: relative;
  716. height:90px;
  717. display: flex;
  718. border-bottom:1px solid #dedede;
  719. .title-p{
  720. flex:1;
  721. color:#0045AF;
  722. margin-left:64px;
  723. line-height:90px;
  724. font-size:16px;
  725. }
  726. .title-button{
  727. width:70px;
  728. margin:24px 31px;
  729. }
  730. .position-img{
  731. width:80px;
  732. height:80px;
  733. position: absolute;
  734. top:0;
  735. left:0;
  736. }
  737. }
  738. .content-max-box{
  739. flex:1;
  740. display: flex;
  741. flex-direction: column;
  742. .top-form-box{
  743. padding:40px 85px 20px;
  744. display: flex;
  745. .top-form-left-box{
  746. flex:1;
  747. height:310px;
  748. }
  749. .top-form-right-box{
  750. height:310px;
  751. }
  752. }
  753. .bottom-form-box{
  754. .bottom-form-title-box{
  755. background: #F5F5F5;
  756. display: flex;
  757. margin-bottom:31px;
  758. p{
  759. font-size:16px;
  760. line-height:50px;
  761. }
  762. p:nth-child(1){
  763. color:#333;
  764. margin-left:30px;
  765. flex:1;
  766. }
  767. p:nth-child(2){
  768. color:#0183FA;
  769. margin-right:37px;
  770. }
  771. }
  772. .add-bottom-button{
  773. cursor: pointer;
  774. color:#0183FA;
  775. border-radius:4px;
  776. border:1px dashed #0183FA;
  777. width:800px;
  778. line-height:40px;
  779. text-align: center;
  780. font-size:14px;
  781. margin: 20px auto;
  782. }
  783. }
  784. }
  785. .for-max-big-box{
  786. border:1px solid #dedede;
  787. overflow: hidden;
  788. margin:0 81px;
  789. .for-title-box{
  790. display: flex;
  791. background: #F5F5F5;
  792. border-bottom:1px solid #dedede;
  793. line-height:50px;
  794. .for-title-p{
  795. color:#333333;
  796. font-size:16px;
  797. margin-left: 30px;
  798. flex:1;
  799. }
  800. .for-del-box{
  801. color:#0183FA;
  802. margin-left:46px;
  803. cursor: pointer;
  804. display: flex;
  805. p{
  806. font-size:14px;
  807. line-height:50px;
  808. margin-right:8px;
  809. }
  810. }
  811. .for-button-box{
  812. color:#0183FA;
  813. margin-left:46px;
  814. margin-right:43px;
  815. cursor: pointer;
  816. display: flex;
  817. p{
  818. font-size:14px;
  819. line-height:50px;
  820. margin-right:8px;
  821. }
  822. }
  823. }
  824. .for-big-box{
  825. height:540px;
  826. padding-top:27px;
  827. .up-img-p{
  828. height:80px;
  829. width:80px;
  830. line-height:80px;
  831. text-align: center;
  832. font-size:16px;
  833. border-radius:4px;
  834. border:1px dashed #E0E0E0;
  835. }
  836. .for-img-box{
  837. width:80px;
  838. height:80px;
  839. border-radius:4px;
  840. display: inline-block;
  841. overflow: hidden;
  842. margin-right:20px;
  843. position: relative;
  844. .for-img{
  845. width:80px;
  846. height:80px;
  847. display: inline-block;
  848. overflow: hidden;
  849. }
  850. .for-del-button{
  851. background: rgba(0,0,0,0.7);
  852. width:20px;
  853. height:20px;
  854. line-height: 20px;
  855. text-align: center;
  856. color:#fff;
  857. border-bottom-left-radius:4px;
  858. cursor: pointer;
  859. position: absolute;
  860. top:0;
  861. right:0;
  862. }
  863. }
  864. .hazard-check-count-p{
  865. display: inline-block;
  866. margin-left: 20px;
  867. font-size: 14px;
  868. line-height: 40px;
  869. span{
  870. color:#FF0000;
  871. }
  872. }
  873. }
  874. }
  875. .bottom-button-max-box{
  876. height:80px;
  877. display: flex;
  878. border-top:1px solid #dedede;
  879. p{
  880. margin-top:20px;
  881. }
  882. p:nth-child(1){
  883. flex:1;
  884. }
  885. p:nth-child(2){
  886. width:90px;
  887. margin-right:20px;
  888. }
  889. p:nth-child(3){
  890. width:90px;
  891. margin-right:20px;
  892. }
  893. p:nth-child(4){
  894. width:90px;
  895. margin-right:20px;
  896. }
  897. }
  898. }
  899. </style>