index.vue 31 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876
  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" clearable 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" 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" clearable 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="100"
  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">
  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. if(this.planType == 1){
  329. //新计划
  330. let obj = JSON.parse(JSON.stringify(this.addForm));
  331. if(obj.checkResult === 0){
  332. if(!obj.checkHazardDtoList[0]){
  333. this.msgError('请添加隐患检查项')
  334. return
  335. }
  336. for(let i=0;i<obj.checkHazardDtoList.length;i++){
  337. delete obj.checkHazardDtoList[i].lookType
  338. }
  339. obj.dangerNum = obj.checkHazardDtoList.length
  340. }else{
  341. obj.checkHazardDtoList = [];
  342. }
  343. obj.manageStatus = type
  344. obj.cycleStartTime = obj.dateRange[0]
  345. obj.cycleEndTime = obj.dateRange[1]
  346. obj.subIds = obj.subId;
  347. delete obj.subId;
  348. delete obj.dateRange
  349. checkManageAdd(obj).then(response => {
  350. this.msgSuccess(response.msg);
  351. this.initializationAddData();
  352. });
  353. }if(this.planType == 2){
  354. //已有计划修改
  355. let obj = JSON.parse(JSON.stringify(this.addForm));
  356. if(obj.checkResult === 0){
  357. if(!obj.checkHazardDtoList[0]){
  358. this.msgError('请添加隐患检查项')
  359. return
  360. }
  361. for(let i=0;i<obj.checkHazardDtoList.length;i++){
  362. delete obj.checkHazardDtoList[i].lookType
  363. }
  364. obj.dangerNum = obj.checkHazardDtoList.length
  365. }else{
  366. obj.checkHazardDtoList = [];
  367. }
  368. obj.manageStatus = type
  369. obj.cycleStartTime = obj.dateRange[0]
  370. obj.cycleEndTime = obj.dateRange[1]
  371. delete obj.dateRange
  372. checkManageUpdate(obj).then(response => {
  373. this.msgSuccess(response.msg);
  374. this.initializationAddData();
  375. });
  376. }
  377. }
  378. })
  379. },
  380. // 删除图片
  381. delImg(index,imgIndex){
  382. this.addForm.checkHazardDtoList[index].uploadDtoList.splice(imgIndex,1);
  383. },
  384. //收起/展开
  385. dataLookButton(item){
  386. item.lookType = !item.lookType
  387. },
  388. //新增检查
  389. addObject(){
  390. if(this.addForm.checkHazardDtoList.length<10){
  391. let obj = {
  392. hazardCheckCode:'',
  393. hazardCheckName:'',
  394. hazardCheckPoint:'',
  395. hazardCheckPro:'',
  396. hazardDescribe:'',
  397. hazardLevel:'',
  398. lookType:true,
  399. uploadDtoList:[],
  400. };
  401. this.addForm.checkHazardDtoList.push(obj);
  402. }
  403. },
  404. //查看图片
  405. lookImg(list,index){
  406. for(let i=0;i<list.length;i++){
  407. list[i].name = list[i].fileName;
  408. list[i].url = list[i].fileUrl;
  409. }
  410. this.$refs.lookImgDialog.lookImgDialogOpen(1,list,index);
  411. },
  412. /*==========上传相关==========*/
  413. handleAvatarSuccess(res,item) {
  414. this.$set(this,'loading',false);
  415. if(item.uploadDtoList.length>4){
  416. this.msgError('最多只可上传5张')
  417. return
  418. }
  419. let suffixName= this.upDataName.split('.')[this.upDataName.split('.').length - 2]
  420. //判断文件名中是否有逗号和分号
  421. if(suffixName.indexOf(',')==-1 && suffixName.indexOf(';')==-1){
  422. }else{
  423. this.msgError('文件名里包含逗号或分号,请修改后重新上传!')
  424. return
  425. }
  426. let obj ={
  427. fileName:this.upDataName,
  428. fileUrl:res.data.url,
  429. fileType:2,
  430. source:2,
  431. };
  432. item.uploadDtoList.push(obj);
  433. this.$forceUpdate()
  434. },
  435. beforeAvatarUpload(file,item) {
  436. if(item.uploadDtoList.length>4){
  437. this.msgError('最多只可上传5张')
  438. return false
  439. }
  440. let type = false;
  441. if (file.type == 'image/png' || file.type == 'image/jpeg' || file.type == 'image/gif' || file.type == 'image/bmp') {
  442. if(file.size> 2100000){
  443. this.msgError('上传图片大小不能超过2M')
  444. return false
  445. }
  446. this.$set(this,'loading',true);
  447. this.upDataName = file.name;
  448. type = true;
  449. }else{
  450. this.msgError('仅支持jpg/png/bmp/gif格式')
  451. type = false;
  452. }
  453. return type;
  454. },
  455. //获取检查项
  456. checkOptionList(){
  457. checkOptionList().then( response => {
  458. this.$set(this,'options',response.data);
  459. this.getCascaderData(this.options);
  460. })
  461. },
  462. //联级选择器数据处理
  463. getCascaderData(list){
  464. let self = this;
  465. for(let i=0;i<list.length;i++){
  466. list[i].labelName = list[i].code? list[i].code +' '+ list[i].name:list[i].name
  467. if(list[i].level == 0 || list[i].level == 1 || list[i].level == 2){
  468. if(list[i].children){
  469. if(list[i].children[0]){
  470. self.getCascaderData(list[i].children)
  471. }else{
  472. list.splice(i,1)
  473. i--
  474. }
  475. }else{
  476. list.splice(i,1)
  477. i--
  478. }
  479. }else{
  480. delete list[i].children
  481. }
  482. }
  483. },
  484. //获取学院列表
  485. listDepartments(){
  486. listDepartments().then(response => {
  487. this.deptSelectList = response.data;
  488. });
  489. },
  490. //根据学院id查询楼栋列表
  491. listbuildings(id){
  492. listbuildings(id).then(response => {
  493. this.buildingsSelectList = response.data;
  494. });
  495. },
  496. //根据楼栋id查询实验室列表
  497. buildBySubList(data,type){
  498. let obj = type == 1?{buildId:data}:{name:data}
  499. buildBySubList(obj).then(response => {
  500. this.subSelectList = response.data;
  501. });
  502. },
  503. //选择学院触发
  504. deptChange(val){
  505. this.$set(this.addForm,'buildId','');
  506. this.$set(this.addForm,'subId','');
  507. this.$set(this,'subSelectList',[]);
  508. this.initializationAddFormData();
  509. this.$set(this,'planType',1);
  510. this.$set(this,'planList',[]);
  511. this.listbuildings(val);
  512. },
  513. //选择楼栋触发
  514. buildingsChange(val){
  515. this.$set(this,'subId','');
  516. this.initializationAddFormData();
  517. this.$set(this,'planType',1);
  518. this.$set(this,'planList',[]);
  519. this.buildBySubList(val,1);
  520. },
  521. //选择实验室触发
  522. subChange(val){
  523. let self = this;
  524. for(let i=0;i<self.subSelectList.length;i++){
  525. if(self.subSelectList[i].id == val){
  526. this.$set(this.addForm,'deptId',self.subSelectList[i].deptId);
  527. this.$set(this.addForm,'buildId',self.subSelectList[i].buildId);
  528. this.listbuildings(self.subSelectList[i].deptId);
  529. this.getCheckPlanBySubId(val);
  530. return
  531. }
  532. }
  533. },
  534. //实验室搜索
  535. getSubList(val){
  536. this.$set(this.addForm,'deptId','');
  537. this.$set(this.addForm,'buildId','');
  538. this.$set(this,'buildingsSelectList',[]);
  539. this.$set(this.addForm,'subId','');
  540. this.$set(this,'subSelectList',[]);
  541. this.initializationAddFormData();
  542. this.$set(this,'planType',1);
  543. this.$set(this,'planList',[]);
  544. this.buildBySubList(val,2);
  545. },
  546. //根据实验室ID查询计划任务
  547. getCheckPlanBySubId(id){
  548. getCheckPlanBySubId({subId:id}).then(response => {
  549. this.initializationAddFormData();
  550. this.$set(this,'planType',response.data[0]?2:1);
  551. this.$set(this,'planList',response.data);
  552. });
  553. },
  554. //计划列表选中
  555. planChange(val){
  556. let self = this;
  557. for(let i=0;i<self.planList.length;i++){
  558. if(self.planList[i].id == val){
  559. this.$set(this.addForm,'id',self.planList[i].id);
  560. self.findCheckManage(self.planList[i].id);
  561. return
  562. }
  563. }
  564. },
  565. //状态切换按钮
  566. planButton(type){
  567. this.initializationAddFormData();
  568. this.$set(this,'planType',type);
  569. },
  570. //查询详情
  571. findCheckManage(id){
  572. findCheckManage({id:id}).then(response => {
  573. response.data.checkResult = response.data.checkResult === 0 || response.data.checkResult === 1?response.data.checkResult:"";
  574. response.data.rectifyNotice = response.data.rectifyNotice?response.data.rectifyNotice:"";
  575. response.data.rectifyDeadline = response.data.rectifyDeadline?response.data.rectifyDeadline:"";
  576. response.data.dateRange = [response.data.cycleStartTime,response.data.cycleEndTime];
  577. for(let i=0;i<response.data.checkHazardDtoList.length;i++){
  578. response.data.checkHazardDtoList[i].lookType = true;
  579. }
  580. this.listbuildings(response.data.deptId);
  581. this.buildBySubList(response.data.buildId,1);
  582. this.$set(this,'addForm',{
  583. id:response.data.id,
  584. title:response.data.title,
  585. subId:response.data.subId,
  586. buildId:response.data.buildId,
  587. checkResult:response.data.checkResult,
  588. rectifyNotice:response.data.rectifyNotice,
  589. deptId:response.data.deptId,
  590. checkType:response.data.checkType,
  591. dateRange:response.data.dateRange,
  592. rectifyDeadline:response.data.rectifyDeadline,
  593. checkHazardDtoList:response.data.checkHazardDtoList,
  594. });
  595. });
  596. },
  597. //初始化数据
  598. initializationAddFormData(){
  599. this.$set(this.addForm,'id','');
  600. this.$set(this.addForm,'title','');
  601. this.$set(this.addForm,'checkRange',3);
  602. this.$set(this.addForm,'checkType','');
  603. this.$set(this.addForm,'dateRange',[]);
  604. this.$set(this.addForm,'checkResult','');
  605. this.$set(this.addForm,'rectifyNotice','');
  606. this.$set(this.addForm,'rectifyDeadline','');
  607. this.$set(this.addForm,'checkHazardDtoList',[]);
  608. },
  609. initializationAddData(){
  610. this.$set(this,'addForm',{
  611. checkRange:3,
  612. id:"",
  613. subId:"",
  614. buildId:"",
  615. deptId:"",
  616. title:"",
  617. checkResult:"",
  618. rectifyNotice:"",
  619. checkType:"",
  620. dateRange:[],
  621. rectifyDeadline:"",
  622. checkHazardDtoList:[],
  623. });
  624. this.$set(this,'planType',1);
  625. this.$set(this,'planList',[]);
  626. },
  627. //删除检查项
  628. delCheckHazardDtoList(index){
  629. let self = this;
  630. this.$confirm('是否确认删除?', "警告", {
  631. confirmButtonText: "确定",
  632. cancelButtonText: "取消",
  633. type: "warning"
  634. }).then(function() {
  635. self.addForm.checkHazardDtoList.splice(index,1);
  636. }).then(() => {
  637. }).catch(() => {});
  638. },
  639. //检查项选中
  640. cascaderChange(val,index){
  641. let obj = this.getCascaderDataQuery(val,this.options);
  642. if(!obj){
  643. this.$set(this.addForm.checkHazardDtoList[index],'hazardCheckPro','');
  644. this.msgError('未找到相关项目')
  645. return
  646. }
  647. this.$set(this.addForm.checkHazardDtoList[index],'hazardCheckCode',obj.code);
  648. this.$set(this.addForm.checkHazardDtoList[index],'hazardCheckName',obj.name);
  649. countHazardNum({subId:this.addForm.subId, hazardCheckPro:val}).then( response => {
  650. this.$set(this,'hazardCheckCount',response.data);
  651. })
  652. },
  653. //联级选择器数据查询
  654. getCascaderDataQuery(text,list){
  655. let self = this;
  656. for(let i=0;i<list.length;i++){
  657. if(list[i].id == text){
  658. return list[i]
  659. }else{
  660. if(list[i].children){
  661. let obj = self.getCascaderDataQuery(text,list[i].children)
  662. if(obj){
  663. return obj
  664. }
  665. }
  666. }
  667. }
  668. },
  669. }
  670. }
  671. </script>
  672. <style scoped lang="scss">
  673. .startInspection{
  674. flex: 1;
  675. display: flex !important;
  676. flex-direction: column;
  677. overflow: hidden;
  678. *{
  679. font-weight:500;
  680. }
  681. img{
  682. user-drag: none;
  683. }
  684. ::v-deep .el-range-editor--small .el-range-separator{
  685. line-height:32px;
  686. }
  687. .title-max-box{
  688. position: relative;
  689. height:90px;
  690. display: flex;
  691. border-bottom:1px solid #dedede;
  692. .title-p{
  693. flex:1;
  694. color:#0045AF;
  695. margin-left:64px;
  696. line-height:90px;
  697. font-size:16px;
  698. }
  699. .title-button{
  700. width:70px;
  701. margin:24px 31px;
  702. }
  703. .position-img{
  704. width:80px;
  705. height:80px;
  706. position: absolute;
  707. top:0;
  708. left:0;
  709. }
  710. }
  711. .content-max-box{
  712. flex:1;
  713. display: flex;
  714. flex-direction: column;
  715. .top-form-box{
  716. padding:40px 85px 20px;
  717. display: flex;
  718. .top-form-left-box{
  719. flex:1;
  720. height:310px;
  721. }
  722. .top-form-right-box{
  723. height:310px;
  724. }
  725. }
  726. .bottom-form-box{
  727. .bottom-form-title-box{
  728. background: #F5F5F5;
  729. display: flex;
  730. margin-bottom:31px;
  731. p{
  732. font-size:16px;
  733. line-height:50px;
  734. }
  735. p:nth-child(1){
  736. color:#333;
  737. margin-left:30px;
  738. flex:1;
  739. }
  740. p:nth-child(2){
  741. color:#0183FA;
  742. margin-right:37px;
  743. }
  744. }
  745. .add-bottom-button{
  746. cursor: pointer;
  747. color:#0183FA;
  748. border-radius:4px;
  749. border:1px dashed #0183FA;
  750. width:800px;
  751. line-height:40px;
  752. text-align: center;
  753. font-size:14px;
  754. margin: 20px auto;
  755. }
  756. }
  757. }
  758. .for-max-big-box{
  759. border:1px solid #dedede;
  760. overflow: hidden;
  761. margin:0 81px;
  762. .for-title-box{
  763. display: flex;
  764. background: #F5F5F5;
  765. border-bottom:1px solid #dedede;
  766. line-height:50px;
  767. .for-title-p{
  768. color:#333333;
  769. font-size:16px;
  770. margin-left: 30px;
  771. flex:1;
  772. }
  773. .for-del-box{
  774. color:#0183FA;
  775. margin-left:46px;
  776. cursor: pointer;
  777. display: flex;
  778. p{
  779. font-size:14px;
  780. line-height:50px;
  781. margin-right:8px;
  782. }
  783. }
  784. .for-button-box{
  785. color:#0183FA;
  786. margin-left:46px;
  787. margin-right:43px;
  788. cursor: pointer;
  789. display: flex;
  790. p{
  791. font-size:14px;
  792. line-height:50px;
  793. margin-right:8px;
  794. }
  795. }
  796. }
  797. .for-big-box{
  798. height:540px;
  799. padding-top:27px;
  800. .up-img-p{
  801. height:80px;
  802. width:80px;
  803. line-height:80px;
  804. text-align: center;
  805. font-size:16px;
  806. border-radius:4px;
  807. border:1px dashed #E0E0E0;
  808. }
  809. .for-img-box{
  810. width:80px;
  811. height:80px;
  812. border-radius:4px;
  813. display: inline-block;
  814. overflow: hidden;
  815. margin-right:20px;
  816. position: relative;
  817. .for-img{
  818. width:80px;
  819. height:80px;
  820. display: inline-block;
  821. overflow: hidden;
  822. }
  823. .for-del-button{
  824. background: rgba(0,0,0,0.7);
  825. width:20px;
  826. height:20px;
  827. line-height: 20px;
  828. text-align: center;
  829. color:#fff;
  830. border-bottom-left-radius:4px;
  831. cursor: pointer;
  832. position: absolute;
  833. top:0;
  834. right:0;
  835. }
  836. }
  837. .hazard-check-count-p{
  838. display: inline-block;
  839. margin-left: 20px;
  840. font-size: 14px;
  841. line-height: 40px;
  842. span{
  843. color:#FF0000;
  844. }
  845. }
  846. }
  847. }
  848. .bottom-button-max-box{
  849. height:80px;
  850. display: flex;
  851. border-top:1px solid #dedede;
  852. p{
  853. margin-top:20px;
  854. }
  855. p:nth-child(1){
  856. flex:1;
  857. }
  858. p:nth-child(2){
  859. width:90px;
  860. margin-right:20px;
  861. }
  862. p:nth-child(3){
  863. width:90px;
  864. margin-right:20px;
  865. }
  866. p:nth-child(4){
  867. width:90px;
  868. margin-right:20px;
  869. }
  870. }
  871. }
  872. </style>