schoolListPage.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334
  1. <!--校院巡查隐患-->
  2. <template>
  3. <div class="schoolListPage">
  4. <div class="schoolListPage-page" v-if="minPageType == 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.rectifyStatus==''?'checkDiv':''" @click="topLeftClickType('')">
  10. <p class="text-p">全部</p>
  11. <p class="el-icon-check icon-p" v-if="queryParams.rectifyStatus==''"></p>
  12. </div>
  13. <div :class="queryParams.rectifyStatus==2?'checkDiv':''" @click="topLeftClickType(2)">
  14. <p class="text-p">待整改</p>
  15. <p class="el-icon-check icon-p" v-if="queryParams.rectifyStatus==2"></p>
  16. </div>
  17. <div :class="queryParams.rectifyStatus==3?'checkDiv':''" @click="topLeftClickType(3)">
  18. <p class="text-p">待复核</p>
  19. <p class="el-icon-check icon-p" v-if="queryParams.rectifyStatus==3"></p>
  20. </div>
  21. <div :class="queryParams.rectifyStatus==1?'checkDiv':''" @click="topLeftClickType(1)">
  22. <p class="text-p">已完成</p>
  23. <p class="el-icon-check icon-p" v-if="queryParams.rectifyStatus==1"></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: 200px"
  34. />
  35. </el-form-item>
  36. <el-form-item label="整改时间" prop="dateRange" style="margin-left:10px;" label-width="70px">
  37. <el-date-picker
  38. :clearable="false"
  39. v-model="dateRange"
  40. size="small"
  41. style="width: 240px"
  42. value-format="yyyy-MM-dd"
  43. type="daterange"
  44. range-separator="-"
  45. start-placeholder="开始日期"
  46. end-placeholder="结束日期"
  47. ></el-date-picker>
  48. </el-form-item>
  49. <el-form-item label="审核状态" prop="examineResult">
  50. <el-select v-model="queryParams.examineResult" placeholder="请选择" style="width: 160px">
  51. <el-option
  52. v-for="item in options"
  53. :key="item.value"
  54. :label="item.label"
  55. :value="item.value">
  56. </el-option>
  57. </el-select>
  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. <el-form-item style="float: right;">
  64. <el-col :span="1.5">
  65. <p class="inquire-button-one"
  66. style="width:90px;"
  67. @click="goPage(2)"
  68. >批量审核</p>
  69. </el-col>
  70. </el-form-item>
  71. </el-form>
  72. </div>
  73. <div class="content-box">
  74. <el-table border :data="tableList" ref="multipleTable" @sort-change="sortChange">
  75. <el-table-column label="序号" align="center" type="index" width="60" />
  76. <el-table-column label="计划标题" align="center" prop="title" show-overflow-tooltip/>
  77. <el-table-column label="隐患描述" align="center" prop="hazardDescribe" show-overflow-tooltip width="220"/>
  78. <el-table-column label="实验室" align="center" prop="subRoom" show-overflow-tooltip width="170"/>
  79. <el-table-column label="检查时间" sortable="custom" align="center" prop="checkTime" show-overflow-tooltip width="160"/>
  80. <el-table-column label="整改人" align="center" prop="rectifyName" show-overflow-tooltip width="90"/>
  81. <el-table-column label="整改期限" sortable="custom" align="center" prop="rectifyDeadline" show-overflow-tooltip width="180">
  82. <template slot-scope="scope">
  83. <p>{{scope.row.rectifyDeadline}}<span v-if="scope.row.overdueStatus==1" style="margin-left:10px;color:#EE0606;">已逾期</span></p>
  84. </template>
  85. </el-table-column>
  86. <el-table-column label="整改状态" align="center" prop="rectifyStatus" show-overflow-tooltip width="110">
  87. <template slot-scope="scope">
  88. <p :class="scope.row.rectifyStatus==1?'rectifyStatusColorA':(scope.row.rectifyStatus==2||scope.row.rectifyStatus==3?'rectifyStatusColorB':'')">{{scope.row.rectifyStatus==1?'已完成':(scope.row.rectifyStatus==2?'待整改':(scope.row.rectifyStatus==3?'待复核':''))}}</p>
  89. </template>
  90. </el-table-column>
  91. <el-table-column label="整改时间" sortable="custom" align="center" prop="rectifyTime" show-overflow-tooltip width="170"/>
  92. <el-table-column label="审核状态" align="center" prop="examineResult" show-overflow-tooltip width="80">
  93. <template slot-scope="scope">
  94. {{scope.row.examineResult == 1?'已通过':(scope.row.examineResult == 0?'已驳回':(scope.row.examineResult == 2?'待审核':''))}}
  95. </template>
  96. </el-table-column>
  97. <el-table-column label="操作" align="center" width="80">
  98. <template slot-scope="scope">
  99. <div class="table-button-box">
  100. <p class="table-button-null"></p>
  101. <p class="table-button-p" @click="addDialogOpen(true,scope.row)">详情</p>
  102. <p class="table-button-null"></p>
  103. </div>
  104. </template>
  105. </el-table-column>
  106. </el-table>
  107. <pagination :page-sizes="[20, 30, 40, 50]"
  108. v-show="total>0"
  109. :total="total"
  110. :page.sync="queryParams.pageNum"
  111. :limit.sync="queryParams.pageSize"
  112. @pagination="getList"
  113. />
  114. </div>
  115. </div>
  116. <batchAudit v-if="minPageType == 2" :propsBatchAuditData="propsBatchAuditData"></batchAudit>
  117. <infoDialog v-if="infoDialogType" :propsInfoDialogData="propsInfoDialogData"></infoDialog>
  118. </div>
  119. </template>
  120. <script>
  121. import { checkHazardList } from '@/api/safetyCheck/index'
  122. import batchAudit from './batchAudit.vue'
  123. import infoDialog from '@/views/safetyCheck/components/infoDialog/infoDialog.vue'
  124. export default {
  125. name: 'schoolListPage',
  126. components: {
  127. batchAudit,
  128. infoDialog
  129. },
  130. data(){
  131. return{
  132. //子组件参数
  133. propsBatchAuditData:{},
  134. propsInfoDialogData:{},
  135. minPageType:1,
  136. infoDialogType:false,
  137. options:[
  138. {value:"2",label:"待审核"},
  139. {value:"1",label:"已通过"},
  140. {value:"0",label:"已驳回"},
  141. ],
  142. queryParams:{
  143. pageNum:1,
  144. pageSize:20,
  145. hazardType:1,
  146. rectifyStatus:"",
  147. examineResult:"",
  148. searchValue:"",
  149. checkTimeOrder:"",
  150. zgTimeOrder:"",
  151. zgTermOrder:""
  152. },
  153. dateRange:[],
  154. tableList:[],
  155. total:0,
  156. }
  157. },
  158. created(){},
  159. mounted(){
  160. this.getList();
  161. },
  162. methods:{
  163. //开关详情页面
  164. addDialogOpen(type,data){
  165. if(this.infoDialogType != type){
  166. if(type){
  167. let obj = {
  168. id:data.id
  169. }
  170. this.$set(this,'propsInfoDialogData',obj);
  171. this.$set(this,'infoDialogType',type);
  172. }else{
  173. this.getList();
  174. this.$set(this,'infoDialogType',type);
  175. }
  176. }
  177. },
  178. //页面切换
  179. goPage(type){
  180. if(this.minPageType != type){
  181. if(type == 1){
  182. //返回
  183. this.$set(this,'minPageType',type);
  184. }else if(type == 2){
  185. //批量审核
  186. this.$set(this,'propsBatchAuditData',{hazardType:1,});
  187. this.$set(this,'minPageType',type);
  188. }else if(type == 3){
  189. //返回并刷新
  190. this.getList();
  191. this.$set(this,'minPageType',1);
  192. }
  193. }
  194. },
  195. //范围选择
  196. topLeftClickType(type){
  197. if(this.queryParams.rectifyStatus != type){
  198. this.$set(this.queryParams,'rectifyStatus',type);
  199. this.getList();
  200. }
  201. },
  202. //时间排序方法
  203. sortChange(val){
  204. if(val.prop == 'checkTime'){
  205. this.$set(this.queryParams,'checkTimeOrder',val.order=='ascending'?'1':(val.order=='descending'?'2':''));
  206. this.$set(this.queryParams,'zgTimeOrder','');
  207. this.$set(this.queryParams,'zgTermOrder','');
  208. this.handleQuery();
  209. }else if(val.prop == 'rectifyTime'){
  210. this.$set(this.queryParams,'zgTimeOrder',val.order=='ascending'?'1':(val.order=='descending'?'2':''));
  211. this.$set(this.queryParams,'checkTimeOrder','');
  212. this.$set(this.queryParams,'zgTermOrder','');
  213. this.handleQuery();
  214. }else if(val.prop == 'rectifyDeadline'){
  215. this.$set(this.queryParams,'zgTermOrder',val.order=='ascending'?'1':(val.order=='descending'?'2':''));
  216. this.$set(this.queryParams,'checkTimeOrder','');
  217. this.$set(this.queryParams,'zgTimeOrder','');
  218. this.handleQuery();
  219. }
  220. },
  221. //获取数据列表
  222. getList(){
  223. let obj = JSON.parse(JSON.stringify(this.queryParams))
  224. if(this.dateRange[0]){
  225. obj.beginTime = this.dateRange[0];
  226. }else{
  227. obj.beginTime = "";
  228. }
  229. if(this.dateRange[1]){
  230. obj.endTime = this.dateRange[1];
  231. }else{
  232. obj.endTime = "";
  233. }
  234. checkHazardList(obj).then(response => {
  235. this.total = response.data.total;
  236. this.tableList = response.data.records;
  237. });
  238. },
  239. /** 搜索按钮操作 */
  240. handleQuery() {
  241. this.$set(this.queryParams,'pageNum',1);
  242. this.getList();
  243. },
  244. /** 重置按钮操作 */
  245. resetQuery() {
  246. this.$set(this,'dateRange',[]);
  247. this.$set(this,'queryParams',{
  248. pageNum:1,
  249. pageSize:20,
  250. hazardType:1,
  251. rectifyStatus:"",
  252. examineResult:"",
  253. searchValue:"",
  254. checkTimeOrder:"",
  255. zgTimeOrder:"",
  256. zgTermOrder:""
  257. });
  258. this.handleQuery();
  259. },
  260. },
  261. }
  262. </script>
  263. <style scoped lang="scss">
  264. .schoolListPage{
  265. flex: 1;
  266. display: flex !important;
  267. flex-direction: column;
  268. overflow: hidden;
  269. .schoolListPage-page{
  270. flex: 1;
  271. display: flex !important;
  272. flex-direction: column;
  273. overflow: hidden;
  274. .title-box{
  275. padding-top:20px;
  276. .form-button-max-big-box{
  277. display: inline-block;
  278. .form-button-big-box{
  279. display: flex;
  280. div{
  281. position: relative;
  282. height:40px;
  283. width:80px;
  284. line-height: 40px;
  285. text-align: center;
  286. color:#999;
  287. font-size:14px;
  288. border:1px solid #999;
  289. border-radius:4px;
  290. margin-left:10px;
  291. font-weight:500;
  292. cursor: pointer;
  293. .icon-p{
  294. width:15px;
  295. height:15px;
  296. line-height:15px;
  297. text-align: center;
  298. position: absolute;
  299. right:0;
  300. bottom:0;
  301. color:#fff;
  302. background: #0183fa;
  303. border-top-left-radius:4px;
  304. }
  305. }
  306. .checkDiv{
  307. color:#0183FA;
  308. border:1px solid #0183FA;
  309. }
  310. }
  311. }
  312. }
  313. .content-box{
  314. flex: 1;
  315. display: flex;
  316. flex-direction: column;
  317. padding:0 20px 20px;
  318. overflow: hidden;
  319. .rectifyStatusColorA{
  320. color:#23B303;
  321. }
  322. .rectifyStatusColorB{
  323. color:#0183FA;
  324. }
  325. .rectifyStatusColorC{
  326. color:#EE0606;
  327. }
  328. }
  329. }
  330. }
  331. </style>