index.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311
  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.buttonType==1?'checkDiv':''" @click="topLeftClickType(1)">
  10. <p class="text-p">全部</p>
  11. <p class="el-icon-check icon-p" v-if="queryParams.buttonType==1"></p>
  12. </div>
  13. <div :class="queryParams.buttonType==2?'checkDiv':''" @click="topLeftClickType(2)">
  14. <p class="text-p">待检查</p>
  15. <p class="el-icon-check icon-p" v-if="queryParams.buttonType==2"></p>
  16. </div>
  17. <div :class="queryParams.buttonType==3?'checkDiv':''" @click="topLeftClickType(3)">
  18. <p class="text-p">检查中</p>
  19. <p class="el-icon-check icon-p" v-if="queryParams.buttonType==3"></p>
  20. </div>
  21. <div :class="queryParams.buttonType==4?'checkDiv':''" @click="topLeftClickType(4)">
  22. <p class="text-p">已检查</p>
  23. <p class="el-icon-check icon-p" v-if="queryParams.buttonType==4"></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="data1" label-width="50px">
  37. <el-select v-model="queryParams.data1" clearable placeholder="请选择学院" style="width: 150px">
  38. <el-option
  39. v-for="item in optionsOne"
  40. :key="item.key"
  41. :label="item.label"
  42. :value="item.key">
  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. <div class="form-button-max-big-box">
  64. <div class="form-button-big-box">
  65. <div :class="queryParams.isSelf==1?'checkDiv':''" style="width:100px;" @click="topRightClickType">
  66. <p class="text-p">本人发起</p>
  67. <p class="el-icon-check icon-p" v-if="queryParams.isSelf==1"></p>
  68. </div>
  69. </div>
  70. </div>
  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 width="250"/>
  77. <el-table-column label="实验室" align="center" prop="subjectName" show-overflow-tooltip width="220"/>
  78. <el-table-column label="学院" align="center" prop="collegeName" show-overflow-tooltip width="150"/>
  79. <el-table-column label="检查状态" align="center" prop="manageStatus" show-overflow-tooltip width="90">
  80. <template slot-scope="scope">
  81. <p :class="scope.row.manageStatus==0?'manageStatus-color-1':(scope.row.manageStatus==1?'manageStatus-color-2':(scope.row.manageStatus==2?'manageStatus-color-3':''))">{{scope.row.manageStatus==0?'待检查':(scope.row.manageStatus==1?'检查中':(scope.row.manageStatus==2?'已检查':''))}}</p>
  82. </template>
  83. </el-table-column>
  84. <el-table-column label="检查者" align="center" prop="checkUser" show-overflow-tooltip width="100"/>
  85. <el-table-column label="检查结果" align="center" prop="checkResult" show-overflow-tooltip width="80">
  86. <template slot-scope="scope">
  87. <p>{{scope.row.checkResult==0?'不符合':(scope.row.checkResult==1?'符合':'')}}</p>
  88. </template>
  89. </el-table-column>
  90. <el-table-column label="隐患数" align="center" prop="dangerNum" show-overflow-tooltip width="80"/>
  91. <el-table-column label="整改进度" align="center" prop="rectifySchedule" show-overflow-tooltip width="200"/>
  92. <el-table-column label="计划周期" align="center" prop="startTime" show-overflow-tooltip width="270">
  93. <template slot-scope="scope">
  94. <p>{{scope.row.cycleStartTime}}至{{scope.row.cycleEndTime}}<span style="color:#EE0606;margin-left:15px;" v-if="scope.row.isOverdue==1">已逾期</span></p>
  95. </template>
  96. </el-table-column>
  97. <el-table-column label="检查时间" sortable="custom" align="center" prop="checkTime" show-overflow-tooltip width="157"/>
  98. <el-table-column label="操作" align="center" prop="deptName" width="230">
  99. <template slot-scope="scope">
  100. <div class="table-button-box">
  101. <p class="table-button-null"></p>
  102. <p class="table-button-p" v-if="scope.row.manageStatus!=0" @click="goAddPage(3)">详情</p>
  103. <p class="table-button-p" v-if="scope.row.manageStatus==0">编辑</p>
  104. <p class="table-button-p" v-if="scope.row.manageStatus==0" @click="goAddPage(2)">开始检查</p>
  105. <p class="table-button-p" v-if="scope.row.manageStatus==2" @click="lookDocumentButton(1,scope.row)">整改报告</p>
  106. <p class="table-button-p" v-if="scope.row.isAttachment == 1" @click="lookDocumentListButton(1,scope.row)">查看附件</p>
  107. <p class="table-button-null"></p>
  108. </div>
  109. </template>
  110. </el-table-column>
  111. </el-table>
  112. <pagination :page-sizes="[20, 30, 40, 50]"
  113. v-show="total>0"
  114. :total="total"
  115. :page.sync="queryParams.pageNum"
  116. :limit.sync="queryParams.pageSize"
  117. @pagination="getList"
  118. />
  119. </div>
  120. </div>
  121. <addPage v-if="pageType==2"></addPage>
  122. <infoPage v-if="pageType==3"></infoPage>
  123. <lookDocumentDialog v-if="lookDocumentType" :propsLookDocumentData="propsLookDocumentData"></lookDocumentDialog>
  124. <lookDocumentListDialog v-if="lookDocumentListType" :propsLookDocumentListData="propsLookDocumentListData"></lookDocumentListDialog>
  125. </div>
  126. </template>
  127. <script>
  128. import { findByCheckPlanId } from '@/api/safetyCheck/index'
  129. import addPage from './addPage.vue'
  130. import infoPage from '@/views/safetyCheck/components/infoPage/infoPage.vue'
  131. import lookDocumentDialog from '@/components/lookDocumentDialog/lookDocumentDialog.vue'
  132. import lookDocumentListDialog from '@/components/lookDocumentDialog/lookDocumentListDialog.vue'
  133. export default {
  134. name: 'index',
  135. components: {
  136. addPage,
  137. infoPage,
  138. lookDocumentDialog,
  139. lookDocumentListDialog
  140. },
  141. data(){
  142. return{
  143. //子组件数据
  144. lookDocumentType:false,
  145. propsLookDocumentData:{},
  146. lookDocumentListType:false,
  147. propsLookDocumentListData:{},
  148. pageType:1,
  149. queryParams:{
  150. pageNum:1,
  151. pageSize:20,
  152. buttonType:1,
  153. isSelf:0,
  154. timeType:0,
  155. searchValue:"",
  156. data1:""
  157. },
  158. dateRange:[],
  159. tableList:[{}],
  160. total:0,
  161. optionsOne:[{key:1,label:"校级"},{key:2,label:"院级"}],
  162. optionsTwo:[{key:1,label:"启用"},{key:0,label:"停用"}],
  163. }
  164. },
  165. created(){
  166. },
  167. mounted(){
  168. },
  169. methods:{
  170. //开始检查
  171. goAddPage(type){
  172. this.$set(this,'pageType',type);
  173. },
  174. //时间排序方法
  175. sortChange(val){
  176. //ascending 上 descending 下 null 无
  177. console.log('val',val.order)
  178. this.$set(this.queryParams,'timeType',val.order=='ascending'?1:(val.order=='descending'?2:''));
  179. },
  180. //范围选择
  181. topLeftClickType(type){
  182. if(this.queryParams.buttonType != type){
  183. this.$set(this.queryParams,'buttonType',type);
  184. this.getList();
  185. }
  186. },
  187. topRightClickType(){
  188. this.$set(this.queryParams,'isSelf',this.queryParams.isSelf==1?0:1);
  189. },
  190. //获取数据列表
  191. getList(){
  192. // this.queryParamsData = JSON.parse(JSON.stringify(this.queryParams));
  193. // this.queryParamsData.type = 'RFID_RECOGNIZER';
  194. // listHardware(this.queryParamsData).then(response => {
  195. // this.total = response.total;
  196. // this.tableList = response.rows;
  197. // });
  198. },
  199. /** 搜索按钮操作 */
  200. handleQuery() {
  201. this.$set(this.queryParams,'pageNum',1);
  202. this.getList();
  203. },
  204. /** 重置按钮操作 */
  205. resetQuery() {
  206. this.$set(this,'dateRange',[]);
  207. this.$set(this,'queryParams',{
  208. pageNum:1,
  209. pageSize:20,
  210. buttonType:1,
  211. timeType:0,
  212. isSelf:0,
  213. searchValue:"",
  214. data1:""
  215. });
  216. this.handleQuery();
  217. },
  218. //查看单个文档
  219. lookDocumentButton(type,row){
  220. if(type==1){
  221. this.$set(this,'propsLookDocumentData',{
  222. title:"整改报告",
  223. name:row.name,
  224. url:row.url
  225. });
  226. this.$set(this,'lookDocumentType',true);
  227. }else{
  228. this.$set(this,'lookDocumentType',false);
  229. }
  230. },
  231. //查看多个文档
  232. lookDocumentListButton(type,row){
  233. if(type==1){
  234. this.$set(this,'propsLookDocumentListData',{
  235. title:"查看附件",
  236. list:row.list
  237. });
  238. this.$set(this,'lookDocumentListType',true);
  239. }else{
  240. this.$set(this,'lookDocumentListType',false);
  241. }
  242. },
  243. },
  244. }
  245. </script>
  246. <style scoped lang="scss">
  247. .selfInspectionManagement{
  248. flex: 1;
  249. display: flex !important;
  250. flex-direction: column;
  251. overflow: hidden;
  252. .selfInspectionManagement-page{
  253. flex: 1;
  254. display: flex !important;
  255. flex-direction: column;
  256. overflow: hidden;
  257. .title-box{
  258. padding-top:20px;
  259. border-bottom:1px solid #dedede;
  260. .form-button-max-big-box{
  261. display: inline-block;
  262. .form-button-big-box{
  263. display: flex;
  264. div{
  265. position: relative;
  266. height:40px;
  267. width:80px;
  268. line-height: 40px;
  269. text-align: center;
  270. color:#999;
  271. font-size:14px;
  272. border:1px solid #999;
  273. border-radius:4px;
  274. margin-left:10px;
  275. font-weight:500;
  276. cursor: pointer;
  277. .icon-p{
  278. width:15px;
  279. height:15px;
  280. line-height:15px;
  281. text-align: center;
  282. position: absolute;
  283. right:0;
  284. bottom:0;
  285. color:#fff;
  286. background: #0183fa;
  287. border-top-left-radius:4px;
  288. }
  289. }
  290. .checkDiv{
  291. color:#0183FA;
  292. border:1px solid #0183FA;
  293. }
  294. }
  295. }
  296. }
  297. .content-box{
  298. flex: 1;
  299. display: flex;
  300. flex-direction: column;
  301. padding:20px;
  302. overflow: hidden;
  303. }
  304. }
  305. }
  306. </style>