index.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348
  1. <template>
  2. <div class="app-container rectificationReport">
  3. <div class="rectificationReport-page" v-if="pageType == 1">
  4. <div class="title-box">
  5. <el-form :model="queryParams" class="form-box" ref="queryForm" :inline="true" label-width="80px">
  6. <!--与我相关-->
  7. <div class="form-button-max-big-box-me" style="margin-left:10px;">
  8. <div class="form-button-big-box-me">
  9. <div :class="queryParams.myRelated==1?'checkDiv-me':''" @click="topRightClickType">
  10. <p class="text-p-me">与我有关{{correlationNum}}</p>
  11. <p class="el-icon-check icon-p-me" v-if="queryParams.myRelated==1"></p>
  12. </div>
  13. </div>
  14. </div>
  15. <el-form-item label="关键字" prop="searchValue">
  16. <el-input
  17. maxLength="30"
  18. v-model="queryParams.searchValue"
  19. placeholder="计划任务/实验室/房间号"
  20. clearable
  21. style="width: 200px"
  22. />
  23. </el-form-item>
  24. <el-form-item label="学院" prop="deptId" label-width="50px">
  25. <el-select v-model="queryParams.deptId" clearable placeholder="学院" style="width: 150px">
  26. <el-option
  27. v-for="item in deptSelectList"
  28. :key="item.deptId"
  29. :label="item.deptName"
  30. :value="item.deptId">
  31. </el-option>
  32. </el-select>
  33. </el-form-item>
  34. <el-form-item label="检查时间" prop="dateRange" style="margin-left:10px;" label-width="70px">
  35. <el-date-picker
  36. :clearable="false"
  37. v-model="dateRange"
  38. size="small"
  39. style="width: 240px"
  40. value-format="yyyy-MM-dd"
  41. type="daterange"
  42. range-separator="-"
  43. start-placeholder="开始日期"
  44. end-placeholder="结束日期"
  45. ></el-date-picker>
  46. </el-form-item>
  47. <el-form-item>
  48. <p class="inquire-button-one" @click="handleQuery" style="margin-right:10px;">查询</p>
  49. <p class="reset-button-one" @click="resetQuery">重置</p>
  50. </el-form-item>
  51. <el-form-item style="float: right;" v-hasPermi="['safety:checkRectify:export']">
  52. <el-col :span="1.5">
  53. <p class="inquire-button-one"
  54. style="width:100px;"
  55. @click="allDownload"
  56. >批量下载</p>
  57. </el-col>
  58. </el-form-item>
  59. </el-form>
  60. </div>
  61. <div class="content-box">
  62. <el-table border :data="tableList" ref="multipleTable" @selection-change="handleSelectionChange" :row-key="getRowKeys">
  63. <el-table-column type="selection" width="50" align="center" :reserve-selection="true"/>
  64. <el-table-column label="序号" align="center" type="index" width="50" />
  65. <el-table-column label="计划任务" align="center" prop="title" show-overflow-tooltip/>
  66. <el-table-column label="学院" align="center" prop="collegeName" show-overflow-tooltip width="160"/>
  67. <el-table-column label="实验室" align="center" prop="subjectName" show-overflow-tooltip width="160"/>
  68. <el-table-column label="房间号" align="center" prop="roomNumber" show-overflow-tooltip width="80"/>
  69. <el-table-column label="楼栋" align="center" prop="buildName" show-overflow-tooltip width="100"/>
  70. <el-table-column label="隐患数" align="center" prop="hazardCount" show-overflow-tooltip width="80"/>
  71. <el-table-column label="计划周期" align="center" prop="cycleTime" show-overflow-tooltip width="200"/>
  72. <el-table-column label="检查者" align="center" prop="checkUser" show-overflow-tooltip width="80"/>
  73. <el-table-column label="检查时间" align="center" prop="checkTime" show-overflow-tooltip width="120"/>
  74. <el-table-column label="操作" align="center" prop="deptName" width="200">
  75. <template slot-scope="scope">
  76. <div class="table-button-box">
  77. <p class="table-button-null"></p>
  78. <p class="table-button-p" @click="goPage(2,scope.row)">检查详情</p>
  79. <p class="table-button-p" @click="lookDocumentButton(1,scope.row)">查看</p>
  80. <p class="table-button-p" @click="downloadButton(scope.row)">下载</p>
  81. <p class="table-button-null"></p>
  82. </div>
  83. </template>
  84. </el-table-column>
  85. </el-table>
  86. <pagination :page-sizes="[20, 30, 40, 50]"
  87. v-show="total>0"
  88. :total="total"
  89. :page.sync="queryParams.pageNum"
  90. :limit.sync="queryParams.pageSize"
  91. @pagination="getList"
  92. />
  93. </div>
  94. </div>
  95. <listPage v-if="pageType == 2" :propsListPageData="propsListPageData"></listPage>
  96. <lookDocumentDataDialog v-if="lookDocumentType" :propsLookDocumentData="propsLookDocumentData"></lookDocumentDataDialog>
  97. </div>
  98. </template>
  99. <script>
  100. import { listDepartments } from "@/api/system/dept";
  101. import { checkRectifyList,genReport,genReportZip } from '@/api/safetyCheck/index'
  102. import listPage from './listPage.vue'
  103. import lookDocumentDataDialog from '@/components/lookDocumentDialog/lookDocumentDataDialog.vue'
  104. export default {
  105. name: 'index',
  106. components: {
  107. listPage,
  108. lookDocumentDataDialog
  109. },
  110. data(){
  111. return{
  112. //子组件数据
  113. lookDocumentType:false,
  114. propsLookDocumentData:{},
  115. propsListPageData:{},
  116. pageType:1,
  117. deptSelectList:[],
  118. queryParams:{
  119. pageNum:1,
  120. pageSize:20,
  121. deptId:'',
  122. searchValue:'',
  123. myRelated:1,
  124. },
  125. dateRange:[],
  126. tableList:[],
  127. total:0,
  128. selectedNum:0,
  129. ids:[],
  130. correlationNum:'',
  131. }
  132. },
  133. created(){
  134. },
  135. mounted(){
  136. this.listDepartments();
  137. this.getList();
  138. },
  139. methods:{
  140. //获取相关数量
  141. getCorrelationNum(){
  142. checkRectifyList({
  143. pageNum:1,
  144. pageSize:20,
  145. myRelated:1,
  146. deptId:this.queryParams.deptId,
  147. searchValue:this.queryParams.searchValue,
  148. beginTime:this.dateRange[0]?this.dateRange[0]:'',
  149. endTime:this.dateRange[1]?this.dateRange[1]:'',
  150. }).then(response => {
  151. this.$set(this,'correlationNum',response.data.total>999?' 999+':(response.data.total<1?'':' '+response.data.total));
  152. });
  153. },
  154. //与我相关按钮
  155. topRightClickType(){
  156. this.$set(this.queryParams,'myRelated',this.queryParams.myRelated==1?0:1);
  157. this.handleQuery();
  158. },
  159. // 批量下载
  160. allDownload(){
  161. let self = this;
  162. if(!this.ids[0]){
  163. this.msgError('请先勾选数据')
  164. return
  165. }
  166. this.$confirm('是否批量下载?', "警告", {
  167. confirmButtonText: "确定",
  168. cancelButtonText: "取消",
  169. type: "warning"
  170. }).then(function() {
  171. let text = self.ids+'';
  172. self.download('/zd-security/checkRectify/genReport/zip/'+text, {}, '批量报告下载.zip')
  173. }).then(() => {
  174. }).catch(() => {});
  175. },
  176. // 单个下载按钮
  177. downloadButton(row){
  178. this.download('/zd-security/checkRectify/genReport/'+row.id, {}, row.title+'(整改报告).docx')
  179. },
  180. //开关详情页面
  181. goPage(type,data){
  182. if(this.pageType != type){
  183. if(type == 2){
  184. this.$set(this.propsListPageData,'id',data.id);
  185. }
  186. this.$set(this,'pageType',type);
  187. }
  188. },
  189. //查看单个文档
  190. lookDocumentButton(type,row){
  191. if(type==1){
  192. this.$set(this,'propsLookDocumentData',{
  193. title:"整改报告",
  194. type:1,
  195. id:row.id,
  196. name:row.title
  197. });
  198. this.$set(this,'lookDocumentType',true);
  199. }else{
  200. this.$set(this,'lookDocumentType',false);
  201. }
  202. },
  203. //获取数据列表
  204. getList(){
  205. let obj = JSON.parse(JSON.stringify(this.queryParams))
  206. if(this.dateRange[0]){
  207. obj.beginTime = this.dateRange[0]
  208. }else{
  209. obj.beginTime = ""
  210. }
  211. if(this.dateRange[1]){
  212. obj.endTime = this.dateRange[1]
  213. }else{
  214. obj.endTime = ""
  215. }
  216. this.getCorrelationNum();
  217. checkRectifyList(obj).then(response => {
  218. this.total = response.data.total;
  219. this.tableList = response.data.records;
  220. });
  221. },
  222. /** 搜索按钮操作 */
  223. handleQuery() {
  224. this.$set(this.queryParams,'pageNum',1);
  225. this.getList();
  226. },
  227. /** 重置按钮操作 */
  228. resetQuery() {
  229. this.$set(this,'dateRange',[]);
  230. this.$set(this,'queryParams',{
  231. pageNum:1,
  232. pageSize:20,
  233. deptId:'',
  234. searchValue:'',
  235. myRelated:1,
  236. });
  237. this.handleQuery();
  238. },
  239. /*===记录勾选数据===
  240. 需要再el-table 添加 :row-key="getRowKeys"
  241. 需要在selection 添加 :reserve-selection="true"
  242. */
  243. getRowKeys(row) {
  244. return row.id
  245. },
  246. // 多选框选中数据
  247. handleSelectionChange(selection) {
  248. this.selectedNum = selection.length;
  249. this.ids = selection.map(item => item.id)
  250. },
  251. //获取学院列表
  252. listDepartments(){
  253. listDepartments().then(response => {
  254. this.deptSelectList = response.data;
  255. });
  256. },
  257. },
  258. }
  259. </script>
  260. <style scoped lang="scss">
  261. .rectificationReport{
  262. flex: 1;
  263. display: flex !important;
  264. flex-direction: column;
  265. overflow: hidden;
  266. .rectificationReport-page{
  267. flex: 1;
  268. display: flex !important;
  269. flex-direction: column;
  270. overflow: hidden;
  271. .title-box{
  272. padding-top:20px;
  273. .form-button-max-big-box{
  274. display: inline-block;
  275. .form-button-big-box{
  276. display: flex;
  277. div{
  278. position: relative;
  279. height:40px;
  280. width:100px;
  281. line-height: 40px;
  282. text-align: center;
  283. color:#0045AF;
  284. font-size:14px;
  285. border:1px solid #0045AF;
  286. border-radius:4px;
  287. margin-left:10px;
  288. font-weight:500;
  289. cursor: pointer;
  290. }
  291. .checkDiv{
  292. color:#fff;
  293. background-color:#0045AF;
  294. border:1px solid #0045AF;
  295. }
  296. }
  297. }
  298. .form-button-max-big-box-me{
  299. display: inline-block;
  300. .form-button-big-box-me{
  301. display: flex;
  302. div{
  303. position: relative;
  304. height:40px;
  305. width:130px;
  306. line-height: 40px;
  307. text-align: center;
  308. color:#999;
  309. font-size:14px;
  310. border:1px solid #999;
  311. border-radius:4px;
  312. margin-left:10px;
  313. font-weight:500;
  314. cursor: pointer;
  315. .icon-p-me{
  316. width:15px;
  317. height:15px;
  318. line-height:15px;
  319. text-align: center;
  320. position: absolute;
  321. right:0;
  322. bottom:0;
  323. color:#fff;
  324. background: #0183fa;
  325. border-top-left-radius:4px;
  326. }
  327. }
  328. .checkDiv-me{
  329. color:#0183FA!important;
  330. border:1px solid #0183FA!important;
  331. }
  332. }
  333. }
  334. }
  335. .content-box{
  336. flex: 1;
  337. display: flex;
  338. flex-direction: column;
  339. padding:0 20px 20px;
  340. overflow: hidden;
  341. }
  342. }
  343. }
  344. </style>