cannotListPage.vue 8.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276
  1. <!--暂无法整改隐患-->
  2. <template>
  3. <div class="cannotListPage">
  4. <div class="title-box">
  5. <el-form :model="queryParams" class="form-box" ref="queryForm" :inline="true" label-width="80px">
  6. <div class="form-button-max-big-box">
  7. <div class="form-button-big-box" style="margin-left:10px;">
  8. <div :class="queryParams.hazardType==1?'checkDiv':''" @click="topLeftClickType(1)">
  9. <p class="text-p">校院巡查</p>
  10. </div>
  11. <div :class="queryParams.hazardType==2?'checkDiv':''" @click="topLeftClickType(2)">
  12. <p class="text-p">实验室自查</p>
  13. </div>
  14. </div>
  15. </div>
  16. <el-form-item label="关键字" prop="searchValue">
  17. <el-input
  18. maxLength="30"
  19. v-model="queryParams.searchValue"
  20. placeholder="计划标题/实验室/房间号"
  21. clearable
  22. style="width: 200px"
  23. />
  24. </el-form-item>
  25. <el-form-item label="处置时间" prop="dateRange" style="margin-left:10px;" label-width="70px">
  26. <el-date-picker
  27. :clearable="false"
  28. v-model="dateRange"
  29. size="small"
  30. style="width: 240px"
  31. value-format="yyyy-MM-dd"
  32. type="daterange"
  33. range-separator="-"
  34. start-placeholder="开始日期"
  35. end-placeholder="结束日期"
  36. ></el-date-picker>
  37. </el-form-item>
  38. <el-form-item>
  39. <p class="inquire-button-one" @click="handleQuery" style="margin-right:10px;">查询</p>
  40. <p class="reset-button-one" @click="resetQuery">重置</p>
  41. </el-form-item>
  42. <!--与我相关-->
  43. <div class="form-button-max-big-box-me">
  44. <div class="form-button-big-box-me">
  45. <div :class="queryParams.myRelated==1?'checkDiv-me':''" style="width:100px;" @click="topRightClickType">
  46. <p class="text-p-me">与我相关</p>
  47. <p class="el-icon-check icon-p-me" v-if="queryParams.myRelated==1"></p>
  48. </div>
  49. </div>
  50. </div>
  51. </el-form>
  52. </div>
  53. <div class="content-box">
  54. <el-table border :data="tableList" ref="multipleTable" @sort-change="sortChange">
  55. <el-table-column label="序号" align="center" type="index" width="60" />
  56. <el-table-column label="计划标题" align="center" prop="title" show-overflow-tooltip/>
  57. <el-table-column label="检查类型" align="center" prop="deptName" show-overflow-tooltip width="180">
  58. <template slot-scope="scope">
  59. {{scope.row.hazardType == 1?'校院巡查':(scope.row.hazardType == 2?'实验室自查':'')}}
  60. </template>
  61. </el-table-column>
  62. <el-table-column label="实验室" align="center" prop="subRoom" show-overflow-tooltip width="240"/>
  63. <el-table-column label="检查时间" sortable align="center" prop="checkTime" show-overflow-tooltip width="160"/>
  64. <el-table-column label="处理人" align="center" prop="rectifyName" show-overflow-tooltip width="90"/>
  65. <el-table-column label="原因描述" align="center" prop="rectifyMeasure" show-overflow-tooltip width="435"/>
  66. <el-table-column label="操作" align="center" width="80">
  67. <template slot-scope="scope">
  68. <div class="table-button-box">
  69. <p class="table-button-null"></p>
  70. <p class="table-button-p" v-hasPermi="['safety:rectifyHazard:query']"
  71. @click="addDialogOpen(true,scope.row)">详情</p>
  72. <p class="table-button-null"></p>
  73. </div>
  74. </template>
  75. </el-table-column>
  76. </el-table>
  77. <pagination :page-sizes="[20, 30, 40, 50]"
  78. v-show="total>0"
  79. :total="total"
  80. :page.sync="queryParams.pageNum"
  81. :limit.sync="queryParams.pageSize"
  82. @pagination="getList"
  83. />
  84. </div>
  85. <infoDialog v-if="infoDialogType" :propsInfoDialogData="propsInfoDialogData"></infoDialog>
  86. </div>
  87. </template>
  88. <script>
  89. import { unableRectifyList } from '@/api/safetyCheck/index'
  90. import infoDialog from '@/views/safetyCheck/components/infoDialog/infoDialog.vue'
  91. export default {
  92. name: 'cannotListPage',
  93. components: {
  94. infoDialog
  95. },
  96. data(){
  97. return{
  98. propsInfoDialogData:{},
  99. infoDialogType:false,
  100. queryParams:{
  101. pageNum:1,
  102. pageSize:20,
  103. rectifyStatus:4,
  104. hazardType:1,
  105. searchValue:"",
  106. checkTimeOrder:"",
  107. myRelated:1,
  108. },
  109. dateRange:[],
  110. tableList:[],
  111. total:0,
  112. }
  113. },
  114. created(){},
  115. mounted(){
  116. this.getList();
  117. },
  118. methods:{
  119. //与我相关按钮
  120. topRightClickType(){
  121. this.$set(this.queryParams,'myRelated',this.queryParams.myRelated==1?0:1);
  122. this.handleQuery();
  123. },
  124. //开关详情页面
  125. addDialogOpen(type,data){
  126. if(this.infoDialogType != type){
  127. if(type){
  128. let obj = {
  129. id:data.id
  130. }
  131. this.$set(this,'propsInfoDialogData',obj);
  132. this.$set(this,'infoDialogType',type);
  133. }else{
  134. this.getList();
  135. this.$set(this,'infoDialogType',type);
  136. }
  137. }
  138. },
  139. //范围选择
  140. topLeftClickType(type){
  141. if(this.queryParams.hazardType != type){
  142. this.$set(this.queryParams,'hazardType',type);
  143. this.handleQuery();
  144. }
  145. },
  146. //时间排序方法
  147. sortChange(val){
  148. if(val.prop == 'checkTime'){
  149. this.$set(this.queryParams,'checkTimeOrder',val.order=='ascending'?'1':(val.order=='descending'?'2':''));
  150. this.$set(this.queryParams,'zgTimeOrder','');
  151. this.$set(this.queryParams,'zgTermOrder','');
  152. this.handleQuery();
  153. }
  154. },
  155. //获取数据列表
  156. getList(){
  157. let obj = JSON.parse(JSON.stringify(this.queryParams))
  158. if(this.dateRange[0]){
  159. obj.beginTime = this.dateRange[0];
  160. }else{
  161. obj.beginTime = "";
  162. }
  163. if(this.dateRange[1]){
  164. obj.endTime = this.dateRange[1];
  165. }else{
  166. obj.endTime = "";
  167. }
  168. unableRectifyList(obj).then(response => {
  169. this.total = response.data.total;
  170. this.tableList = response.data.records;
  171. });
  172. },
  173. /** 搜索按钮操作 */
  174. handleQuery() {
  175. this.$set(this.queryParams,'pageNum',1);
  176. this.getList();
  177. },
  178. /** 重置按钮操作 */
  179. resetQuery() {
  180. this.$set(this,'dateRange',[]);
  181. this.$set(this,'queryParams',{
  182. pageNum:1,
  183. pageSize:20,
  184. rectifyStatus:4,
  185. hazardType:1,
  186. searchValue:"",
  187. checkTimeOrder:"",
  188. myRelated:1,
  189. });
  190. this.handleQuery();
  191. },
  192. },
  193. }
  194. </script>
  195. <style scoped lang="scss">
  196. .cannotListPage{
  197. flex: 1;
  198. display: flex !important;
  199. flex-direction: column;
  200. overflow: hidden;
  201. .title-box{
  202. padding-top:20px;
  203. .form-button-max-big-box{
  204. display: inline-block;
  205. .form-button-big-box{
  206. display: flex;
  207. div{
  208. position: relative;
  209. height:40px;
  210. width:100px;
  211. line-height: 40px;
  212. text-align: center;
  213. color:#0045AF;
  214. font-size:14px;
  215. border:1px solid #0045AF;
  216. border-radius:4px;
  217. margin-left:10px;
  218. font-weight:500;
  219. cursor: pointer;
  220. }
  221. .checkDiv{
  222. color:#fff;
  223. background-color:#0045AF;
  224. border:1px solid #0045AF;
  225. }
  226. }
  227. }
  228. .form-button-max-big-box-me{
  229. display: inline-block;
  230. .form-button-big-box-me{
  231. display: flex;
  232. div{
  233. position: relative;
  234. height:40px;
  235. width:80px;
  236. line-height: 40px;
  237. text-align: center;
  238. color:#999;
  239. font-size:14px;
  240. border:1px solid #999;
  241. border-radius:4px;
  242. margin-left:10px;
  243. font-weight:500;
  244. cursor: pointer;
  245. .icon-p-me{
  246. width:15px;
  247. height:15px;
  248. line-height:15px;
  249. text-align: center;
  250. position: absolute;
  251. right:0;
  252. bottom:0;
  253. color:#fff;
  254. background: #0183fa;
  255. border-top-left-radius:4px;
  256. }
  257. }
  258. .checkDiv-me{
  259. color:#0183FA!important;
  260. border:1px solid #0183FA!important;
  261. }
  262. }
  263. }
  264. }
  265. .content-box{
  266. flex: 1;
  267. display: flex;
  268. flex-direction: column;
  269. padding:0 20px 20px;
  270. overflow: hidden;
  271. }
  272. }
  273. </style>