index.vue 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426
  1. <!--自查管理-->
  2. <template>
  3. <div class="app-container selfInspectionManagement">
  4. <div class="selfInspectionManagement-page" v-if="pageType == 1">
  5. <div class="title-box">
  6. <el-form :model="queryParams" class="form-box" ref="queryForm" :inline="true" label-width="80px">
  7. <div class="form-button-max-big-box">
  8. <div class="form-button-big-box" style="margin-left:10px;">
  9. <div :class="queryParams.manageStatus=='-1'?'checkDiv':''" @click="topLeftClickType('-1')">
  10. <p class="text-p">全部</p>
  11. <p class="el-icon-check icon-p" v-if="queryParams.manageStatus=='-1'"></p>
  12. </div>
  13. <div :class="queryParams.manageStatus==0?'checkDiv':''" @click="topLeftClickType(0)">
  14. <p class="text-p">待检查</p>
  15. <p class="el-icon-check icon-p" v-if="queryParams.manageStatus==0"></p>
  16. </div>
  17. <div :class="queryParams.manageStatus==1?'checkDiv':''" @click="topLeftClickType(1)">
  18. <p class="text-p">检查中</p>
  19. <p class="el-icon-check icon-p" v-if="queryParams.manageStatus==1"></p>
  20. </div>
  21. <div :class="queryParams.manageStatus==2?'checkDiv':''" @click="topLeftClickType(2)">
  22. <p class="text-p">已检查</p>
  23. <p class="el-icon-check icon-p" v-if="queryParams.manageStatus==2"></p>
  24. </div>
  25. </div>
  26. </div>
  27. <el-form-item label="关键字" prop="searchValue">
  28. <el-input
  29. maxLength="30"
  30. v-model="queryParams.searchValue"
  31. placeholder="计划标题/实验室/房间号/检查者"
  32. clearable
  33. style="width: 250px"
  34. />
  35. </el-form-item>
  36. <el-form-item label="学院" prop="deptId" label-width="50px">
  37. <el-select v-model="queryParams.deptId" clearable placeholder="请选择学院" style="width: 150px">
  38. <el-option
  39. v-for="item in deptSelectList"
  40. :key="item.deptId"
  41. :label="item.deptName"
  42. :value="item.deptId">
  43. </el-option>
  44. </el-select>
  45. </el-form-item>
  46. <el-form-item label="检查时间" prop="dateRange" style="margin-left:10px;" label-width="70px">
  47. <el-date-picker
  48. :clearable="false"
  49. v-model="dateRange"
  50. size="small"
  51. style="width: 240px"
  52. value-format="yyyy-MM-dd"
  53. type="daterange"
  54. range-separator="-"
  55. start-placeholder="开始日期"
  56. end-placeholder="结束日期"
  57. ></el-date-picker>
  58. </el-form-item>
  59. <el-form-item>
  60. <p class="inquire-button-one" @click="handleQuery" style="margin-right:10px;">查询</p>
  61. <p class="reset-button-one" @click="resetQuery">重置</p>
  62. </el-form-item>
  63. <!--与我相关-->
  64. <div class="form-button-max-big-box-me">
  65. <div class="form-button-big-box-me">
  66. <div :class="queryParams.myRelated==1?'checkDiv-me':''" style="width:100px;" @click="topRightClickType">
  67. <p class="text-p-me">与我相关</p>
  68. <p class="el-icon-check icon-p-me" v-if="queryParams.myRelated==1"></p>
  69. </div>
  70. </div>
  71. </div>
  72. </el-form>
  73. </div>
  74. <div class="content-box">
  75. <el-table border :data="tableList" ref="multipleTable" @sort-change="sortChange">
  76. <el-table-column label="序号" align="center" type="index" width="60" fixed/>
  77. <el-table-column label="计划标题" align="center" prop="title" show-overflow-tooltip width="250" fixed/>
  78. <el-table-column label="实验室" align="center" prop="subjectName" show-overflow-tooltip width="220" fixed>
  79. <template slot-scope="scope">{{scope.row.roomNumber?scope.row.subjectName+'-'+scope.row.roomNumber:scope.row.subjectName}}</template>
  80. </el-table-column>
  81. <el-table-column label="学院" align="center" prop="collegeName" show-overflow-tooltip width="150"/>
  82. <el-table-column label="检查状态" align="center" prop="manageStatus" show-overflow-tooltip width="90">
  83. <template slot-scope="scope">
  84. <p :class="scope.row.manageStatus==0?'manageStatus-color-1':(scope.row.manageStatus==1?'manageStatus-color-2':(scope.row.manageStatus==2?'manageStatus-color-3':''))">
  85. {{scope.row.manageStatus==0?'待检查':(scope.row.manageStatus==1?'检查中':(scope.row.manageStatus==2?'已检查':''))}}
  86. </p>
  87. </template>
  88. </el-table-column>
  89. <el-table-column label="检查者" align="center" prop="checkUser" show-overflow-tooltip width="100"/>
  90. <el-table-column label="检查结果" align="center" prop="checkResult" show-overflow-tooltip width="80">
  91. <template slot-scope="scope">
  92. <p>{{scope.row.checkResult==0?'不符合':(scope.row.checkResult==1?'符合':'')}}</p>
  93. </template>
  94. </el-table-column>
  95. <el-table-column label="隐患数" align="center" prop="dangerNum" show-overflow-tooltip width="80"/>
  96. <el-table-column label="整改进度" align="center" prop="rectifySchedule" show-overflow-tooltip width="200"/>
  97. <el-table-column label="计划周期" align="center" prop="startTime" show-overflow-tooltip width="270">
  98. <template slot-scope="scope">
  99. <p>{{scope.row.cycleStartTime}} 至 {{scope.row.cycleEndTime}}<span style="color:#EE0606;margin-left:15px;" v-if="scope.row.isOverdue==1">已逾期</span></p>
  100. </template>
  101. </el-table-column>
  102. <el-table-column label="检查时间" sortable="custom" align="center" prop="checkTime" show-overflow-tooltip width="157"/>
  103. <el-table-column label="操作" align="center" prop="deptName" width="280">
  104. <template slot-scope="scope">
  105. <div class="table-button-box">
  106. <p class="table-button-null"></p>
  107. <p class="table-button-p" v-hasPermi="['safety:checkManage_1:query']"
  108. v-show="scope.row.manageStatus==0||scope.row.manageStatus==2" @click="goAddPage(3,scope.row.id)">详情</p>
  109. <p class="table-button-p" v-hasPermiAnd="['safety:checkManage_1:query','safety:checkManage_1:edit']"
  110. v-show="scope.row.manageStatus==1 && scope.row.isCheck==1 && scope.row.isSelfData==1" @click="goAddPage(2,scope.row.id)">编辑</p>
  111. <p class="table-button-p" v-hasPermiAnd="['safety:checkManage_1:query','safety:checkManage_1:edit']"
  112. v-show="scope.row.manageStatus==0 && scope.row.isCheck==1 && scope.row.isSelfData==1" @click="goAddPage(2,scope.row.id)">开始检查</p>
  113. <p class="table-button-p" v-hasPermiAnd="['safety:checkManage_1:query','safety:checkManage_1:edit']"
  114. style="color:#999" v-show="scope.row.manageStatus==0 && scope.row.isCheck==0 && scope.row.isSelfData==1">开始检查</p>
  115. <p class="table-button-p" v-show="scope.row.isEndProcess==1 && scope.row.checkResult==0" @click="lookDocumentButton(1,scope.row)">整改报告</p>
  116. <p class="table-button-p" v-show="scope.row.isAttachment == 1" @click="lookDocumentListButton(1,scope.row)">查看附件</p>
  117. <p class="table-button-null"></p>
  118. </div>
  119. </template>
  120. </el-table-column>
  121. </el-table>
  122. <pagination :page-sizes="[20, 30, 40, 50]"
  123. v-show="total>0"
  124. :total="total"
  125. :page.sync="queryParams.pageNum"
  126. :limit.sync="queryParams.pageSize"
  127. @pagination="getList"
  128. />
  129. </div>
  130. </div>
  131. <addPage v-if="pageType==2" :propsAddData="propsAddData"></addPage>
  132. <infoPage v-if="pageType==3" :propsInfoData="propsInfoData"></infoPage>
  133. <lookDocumentDataDialog v-if="lookDocumentType" :propsLookDocumentData="propsLookDocumentData"></lookDocumentDataDialog>
  134. <lookDocumentListDialog v-if="lookDocumentListType" :propsLookDocumentListData="propsLookDocumentListData"></lookDocumentListDialog>
  135. </div>
  136. </template>
  137. <script>
  138. import { listDepartments } from "@/api/system/dept";
  139. import { checkManageList,getFindByCheckPlanId } from '@/api/safetyCheck/index'
  140. import addPage from '@/views/safetyCheck/components/addPage/addPage.vue'
  141. import infoPage from '@/views/safetyCheck/components/infoPage/infoPage.vue'
  142. import lookDocumentDataDialog from '@/components/lookDocumentDialog/lookDocumentDataDialog.vue'
  143. import lookDocumentListDialog from '@/components/lookDocumentDialog/lookDocumentListDialog.vue'
  144. export default {
  145. name: 'index',
  146. components: {
  147. addPage,
  148. infoPage,
  149. lookDocumentDataDialog,
  150. lookDocumentListDialog
  151. },
  152. data(){
  153. return{
  154. //子组件数据
  155. lookDocumentType:false,
  156. propsLookDocumentData:{},
  157. lookDocumentListType:false,
  158. propsLookDocumentListData:{},
  159. propsAddData:{},
  160. propsInfoData:{},
  161. //学院列表
  162. deptSelectList:[],
  163. pageType:1,
  164. queryParams:{
  165. pageNum:1,
  166. pageSize:20,
  167. checkType:2,
  168. manageStatus:'-1',
  169. checkTimeSort:0,
  170. searchValue:"",
  171. deptId:"",
  172. myRelated:1,
  173. },
  174. dateRange:[],
  175. tableList:[],
  176. total:0,
  177. }
  178. },
  179. created(){
  180. if(this.$route.query.id){
  181. this.goAddPage(2,this.$route.query.id);
  182. }
  183. },
  184. mounted(){
  185. this.listDepartments();
  186. this.getList();
  187. },
  188. methods:{
  189. //与我相关按钮
  190. topRightClickType(){
  191. this.$set(this.queryParams,'myRelated',this.queryParams.myRelated==1?0:1);
  192. this.handleQuery();
  193. },
  194. //开始检查
  195. goAddPage(type,id){
  196. if(this.pageType != type){
  197. if(type == 1){
  198. //返回
  199. this.$set(this,'pageType',type);
  200. }else if(type == 2){
  201. //开始检查/编辑
  202. this.$set(this,'propsAddData',{
  203. id:id,
  204. title:'实验室自查',
  205. });
  206. this.$set(this,'pageType',type);
  207. }else if(type == 3){
  208. //详情
  209. this.$set(this,'propsInfoData',{id:id});
  210. this.$set(this,'pageType',type);
  211. }else if(type == 4){
  212. //返回并刷新
  213. this.getList();
  214. this.$set(this,'pageType',1);
  215. }
  216. }
  217. },
  218. //时间排序方法
  219. sortChange(val){
  220. if(val.prop == 'checkTime'){
  221. this.$set(this.queryParams,'checkTimeSort',val.order=='ascending'?'1':(val.order=='descending'?'2':"0"));
  222. this.handleQuery();
  223. }
  224. },
  225. //范围选择
  226. topLeftClickType(type){
  227. if(this.queryParams.manageStatus != type){
  228. this.$set(this.queryParams,'manageStatus',type);
  229. this.handleQuery();
  230. }
  231. },
  232. //获取数据列表
  233. getList(){
  234. let obj = JSON.parse(JSON.stringify(this.queryParams))
  235. if(this.dateRange[0]){
  236. obj.startTime = this.dateRange[0];
  237. }else{
  238. obj.startTime = "";
  239. }
  240. if(this.dateRange[1]){
  241. obj.endTime = this.dateRange[1];
  242. }else{
  243. obj.endTime = "";
  244. }
  245. checkManageList(obj).then(response => {
  246. this.total = response.data.total;
  247. this.tableList = response.data.records;
  248. });
  249. },
  250. /** 搜索按钮操作 */
  251. handleQuery() {
  252. this.$set(this.queryParams,'pageNum',1);
  253. this.getList();
  254. },
  255. /** 重置按钮操作 */
  256. resetQuery() {
  257. this.$set(this,'dateRange',[]);
  258. this.$set(this,'queryParams',{
  259. pageNum:1,
  260. pageSize:20,
  261. checkType:2,
  262. manageStatus:'-1',
  263. checkTimeSort:0,
  264. searchValue:"",
  265. deptId:"",
  266. myRelated:1,
  267. });
  268. this.handleQuery();
  269. },
  270. //查看单个文档
  271. lookDocumentButton(type,row){
  272. if(type==1){
  273. this.$set(this,'propsLookDocumentData',{
  274. title:"整改报告",
  275. type:1,
  276. id:row.id,
  277. name:row.title
  278. });
  279. this.$set(this,'lookDocumentType',true);
  280. }else{
  281. this.$set(this,'lookDocumentType',false);
  282. }
  283. },
  284. //查看多个文档
  285. lookDocumentListButton(type,row){
  286. if(type==1){
  287. getFindByCheckPlanId({checkPlanId:row.checkPlanId}).then(response => {
  288. let list = [];
  289. for(let i=0;i<response.data.length;i++){
  290. let obj = {
  291. name:response.data[i].fileName,
  292. url:response.data[i].fileUrl,
  293. }
  294. list.push(obj);
  295. }
  296. this.$set(this,'propsLookDocumentListData',{
  297. title:"查看附件",
  298. list:list
  299. });
  300. this.$set(this,'lookDocumentListType',true);
  301. });
  302. }else{
  303. this.$set(this,'lookDocumentListType',false);
  304. }
  305. },
  306. //获取学院列表
  307. listDepartments(){
  308. listDepartments().then(response => {
  309. this.deptSelectList = response.data;
  310. });
  311. },
  312. },
  313. }
  314. </script>
  315. <style scoped lang="scss">
  316. ::v-deep .el-table__body-wrapper{
  317. padding-bottom: 8px;
  318. }
  319. ::v-deep .el-table__fixed{
  320. margin-top:-1px;
  321. margin-left:-1px;
  322. height:calc(100% - 8px)!important;
  323. }
  324. ::v-deep .el-table__fixed-body-wrapper{
  325. height: calc(100% - 48px);
  326. overflow-y: auto;
  327. }
  328. .selfInspectionManagement{
  329. flex: 1;
  330. display: flex !important;
  331. flex-direction: column;
  332. overflow: hidden;
  333. .selfInspectionManagement-page{
  334. flex: 1;
  335. display: flex !important;
  336. flex-direction: column;
  337. overflow: hidden;
  338. .title-box{
  339. padding-top:20px;
  340. border-bottom:1px solid #dedede;
  341. .form-button-max-big-box{
  342. display: inline-block;
  343. .form-button-big-box{
  344. display: flex;
  345. div{
  346. position: relative;
  347. height:40px;
  348. width:80px;
  349. line-height: 40px;
  350. text-align: center;
  351. color:#999;
  352. font-size:14px;
  353. border:1px solid #999;
  354. border-radius:4px;
  355. margin-left:10px;
  356. font-weight:500;
  357. cursor: pointer;
  358. .icon-p{
  359. width:15px;
  360. height:15px;
  361. line-height:15px;
  362. text-align: center;
  363. position: absolute;
  364. right:0;
  365. bottom:0;
  366. color:#fff;
  367. background: #0183fa;
  368. border-top-left-radius:4px;
  369. }
  370. }
  371. .checkDiv{
  372. color:#0183FA;
  373. border:1px solid #0183FA;
  374. }
  375. }
  376. }
  377. .form-button-max-big-box-me{
  378. display: inline-block;
  379. .form-button-big-box-me{
  380. display: flex;
  381. div{
  382. position: relative;
  383. height:40px;
  384. width:80px;
  385. line-height: 40px;
  386. text-align: center;
  387. color:#999;
  388. font-size:14px;
  389. border:1px solid #999;
  390. border-radius:4px;
  391. margin-left:10px;
  392. font-weight:500;
  393. cursor: pointer;
  394. .icon-p-me{
  395. width:15px;
  396. height:15px;
  397. line-height:15px;
  398. text-align: center;
  399. position: absolute;
  400. right:0;
  401. bottom:0;
  402. color:#fff;
  403. background: #0183fa;
  404. border-top-left-radius:4px;
  405. }
  406. }
  407. .checkDiv-me{
  408. color:#0183FA!important;
  409. border:1px solid #0183FA!important;
  410. }
  411. }
  412. }
  413. }
  414. .content-box{
  415. flex: 1;
  416. display: flex;
  417. flex-direction: column;
  418. padding:20px;
  419. overflow: hidden;
  420. }
  421. }
  422. }
  423. </style>