index.vue 33 KB

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