index.vue 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436
  1. <!--自查任务-->
  2. <template>
  3. <div class="app-container selfInspectionTask">
  4. <div class="selfInspectionTask-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.checkStatus==0?'checkDiv':''" @click="topLeftClickType(0)">
  10. <p class="text-p">全部</p>
  11. <p class="el-icon-check icon-p" v-if="queryParams.checkStatus==0"></p>
  12. </div>
  13. <div :class="queryParams.checkStatus==1?'checkDiv':''" @click="topLeftClickType(1)">
  14. <p class="text-p">未开始</p>
  15. <p class="el-icon-check icon-p" v-if="queryParams.checkStatus==1"></p>
  16. </div>
  17. <div :class="queryParams.checkStatus==2?'checkDiv':''" @click="topLeftClickType(2)">
  18. <p class="text-p">进行中</p>
  19. <p class="el-icon-check icon-p" v-if="queryParams.checkStatus==2"></p>
  20. </div>
  21. <div :class="queryParams.checkStatus==3?'checkDiv':''" @click="topLeftClickType(3)">
  22. <p class="text-p">已结束</p>
  23. <p class="el-icon-check icon-p" v-if="queryParams.checkStatus==3"></p>
  24. </div>
  25. </div>
  26. </div>
  27. <!--与我相关-->
  28. <div class="form-button-max-big-box-me">
  29. <div class="form-button-big-box-me">
  30. <div :class="queryParams.myRelated==1?'checkDiv-me':''" @click="topRightClickType">
  31. <p class="text-p-me">与我有关{{correlationNum}}</p>
  32. <p class="el-icon-check icon-p-me" v-if="queryParams.myRelated==1"></p>
  33. </div>
  34. </div>
  35. </div>
  36. <el-form-item label="关键字" prop="searchValue">
  37. <el-input
  38. maxLength="30"
  39. v-model="queryParams.searchValue"
  40. placeholder="计划标题/创建人"
  41. clearable
  42. style="width: 200px"
  43. />
  44. </el-form-item>
  45. <el-form-item label="检查周期" prop="dateRange" style="margin-left:10px;" label-width="70px">
  46. <el-date-picker
  47. :clearable="false"
  48. v-model="dateRange"
  49. size="small"
  50. style="width: 240px"
  51. value-format="yyyy-MM-dd"
  52. type="daterange"
  53. range-separator="-"
  54. start-placeholder="开始日期"
  55. end-placeholder="结束日期"
  56. ></el-date-picker>
  57. </el-form-item>
  58. <el-form-item>
  59. <p class="inquire-button-one" @click="handleQuery" style="margin-right:10px;">查询</p>
  60. <p class="reset-button-one" @click="resetQuery">重置</p>
  61. </el-form-item>
  62. <el-form-item style="float: right;" v-hasPermi="['security:checkPlan_1:add']">
  63. <el-col :span="1.5">
  64. <p class="inquire-button-one"
  65. style="width:130px;"
  66. @click="addDialogOpen(1)"
  67. ><i class="el-icon-plus"></i> 创建自查任务</p>
  68. </el-col>
  69. </el-form-item>
  70. </el-form>
  71. </div>
  72. <div class="content-box">
  73. <el-table border :data="tableList" ref="multipleTable" @sort-change="sortChange">
  74. <el-table-column label="序号" align="center" type="index" width="60" />
  75. <el-table-column label="计划标题" align="center" prop="title" show-overflow-tooltip/>
  76. <el-table-column label="检查范围" align="center" prop="checkRange" show-overflow-tooltip width="120">
  77. <template slot-scope="scope">
  78. <p>{{scope.row.checkRange==1?'全校':(scope.row.checkRange==2?'学院':(scope.row.checkRange==3?'实验室':''))}}</p>
  79. </template>
  80. </el-table-column>
  81. <el-table-column label="任务周期" align="center" prop="cycleStartTime" show-overflow-tooltip width="260">
  82. <template slot-scope="scope">
  83. <p>{{scope.row.cycleStartTime}} 至 {{scope.row.cycleEndTime}}<span style="color:#EE0606;margin-left:15px;" v-if="scope.row.isOverdue==1">已逾期</span></p>
  84. </template>
  85. </el-table-column>
  86. <el-table-column label="状态" align="center" prop="checkStatus" show-overflow-tooltip width="80">
  87. <template slot-scope="scope">
  88. <p :class="scope.row.checkStatus==1?'checkStatus-color-1':(scope.row.checkStatus==2?'checkStatus-color-2':(scope.row.checkStatus==3?'checkStatus-color-3':''))">{{scope.row.checkStatus==1?'未开始':(scope.row.checkStatus==2?'进行中':(scope.row.checkStatus==3?'已结束':''))}}</p>
  89. </template>
  90. </el-table-column>
  91. <el-table-column label="检查进度" align="center" prop="checkSchedule" show-overflow-tooltip width="210"/>
  92. <el-table-column label="创建人" align="center" prop="createName" show-overflow-tooltip width="130"/>
  93. <el-table-column label="创建时间" sortable="custom" align="center" prop="createTime" show-overflow-tooltip width="157"/>
  94. <el-table-column label="操作" align="center" prop="deptName" width="280">
  95. <template slot-scope="scope">
  96. <div class="table-button-box">
  97. <p class="table-button-null"></p>
  98. <p class="table-button-p" v-hasPermi="['security:checkPlan_1:query']"
  99. v-show="scope.row.checkStatus!=1" @click="addDialogOpen(3,scope.row)">详情</p>
  100. <p class="table-button-p" v-hasPermiAnd="['security:checkPlan_1:query','security:checkPlan_1:edit']"
  101. v-show="scope.row.checkStatus==1&&scope.row.isSelfData == 1" @click="addDialogOpen(2,scope.row)">编辑</p>
  102. <p class="table-button-p" v-hasPermi="['security:checkManage_3:list']"
  103. @click="goPage(2,scope.row)">自查管理</p>
  104. <p class="table-button-p" v-hasPermi="['security:checkPlan_1:remove']"
  105. v-show="scope.row.checkStatus==1&&scope.row.isSelfData == 1" @click="deleteObj(scope.row)">删除</p>
  106. <p class="table-button-p" v-show="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. <list-page v-if="pageType == 2" :propsListPageData="propsListPageData"></list-page>
  122. <add-dialog v-if="addDialogType" :addDialogData="addDialogData"></add-dialog>
  123. <lookDocumentListDialog v-if="lookDocumentListType" :propsLookDocumentListData="propsLookDocumentListData"></lookDocumentListDialog>
  124. </div>
  125. </template>
  126. <script>
  127. import addDialog from './addDialog.vue'
  128. import listPage from './listPage.vue'
  129. import lookDocumentListDialog from '@/components/lookDocumentDialog/lookDocumentListDialog.vue'
  130. import { checkPlanList,checkPlanDelete,getFindByCheckPlanId } from '@/api/safetyCheck/index'
  131. export default {
  132. name: 'index',
  133. components: {
  134. addDialog,
  135. listPage,
  136. lookDocumentListDialog
  137. },
  138. data(){
  139. return{
  140. //子组件数据
  141. lookDocumentListType:false,
  142. propsLookDocumentListData:{},
  143. propsListPageData:{},
  144. addDialogType:false,
  145. addDialogData:{},
  146. pageType:1,
  147. queryParams:{
  148. pageNum:1,
  149. pageSize:20,
  150. checkStatus:0,
  151. createTimeSort:0,
  152. searchValue:"",
  153. checkType:2,
  154. myRelated:1,
  155. },
  156. dateRange:[],
  157. tableList:[],
  158. total:0,
  159. correlationNum:'',
  160. }
  161. },
  162. created(){
  163. },
  164. mounted(){
  165. this.getList();
  166. },
  167. methods:{
  168. //获取相关数量
  169. getCorrelationNum(){
  170. checkPlanList({
  171. pageNum:1,
  172. pageSize:20,
  173. createTimeSort:0,
  174. checkType:2,
  175. myRelated:1,
  176. checkStatus:this.queryParams.checkStatus,
  177. searchValue:this.queryParams.searchValue,
  178. cycleStartTime:this.dateRange[0]?this.dateRange[0]:'',
  179. cycleEndTime:this.dateRange[1]?this.dateRange[1]:'',
  180. }).then(response => {
  181. this.$set(this,'correlationNum',response.data.total>999?' 999+':(response.data.total<1?'':' '+response.data.total));
  182. });
  183. },
  184. //与我相关按钮
  185. topRightClickType(){
  186. this.$set(this.queryParams,'myRelated',this.queryParams.myRelated==1?0:1);
  187. this.handleQuery();
  188. },
  189. //切换页面
  190. goPage(type,data){
  191. if(this.pageType != type){
  192. if(type == 2){
  193. this.$set(this,'propsListPageData',data);
  194. this.$set(this,'pageType',type);
  195. }else if(type == 1){
  196. this.$set(this,'pageType',type);
  197. }else if(type == 3){
  198. this.$set(this,'pageType',1);
  199. this.getList();
  200. }
  201. }
  202. },
  203. //弹窗开启
  204. addDialogOpen(type,data){
  205. if(type==1){
  206. this.$set(this,'addDialogData',{
  207. title:"创建自查任务",
  208. lookInfoType:false,
  209. addType:true,
  210. })
  211. this.$set(this,'addDialogType',true);
  212. }else if(type==2){
  213. this.$set(this,'addDialogData',{
  214. title:"编辑自查任务",
  215. id:data.id,
  216. lookInfoType:false,
  217. addType:false,
  218. })
  219. this.$set(this,'addDialogType',true);
  220. }else if(type==3){
  221. this.$set(this,'addDialogData',{
  222. title:"自查任务详情",
  223. id:data.id,
  224. lookInfoType:true,
  225. addType:false,
  226. })
  227. this.$set(this,'addDialogType',true);
  228. }else if(type==4){
  229. this.$set(this,'addDialogType',false);
  230. }else if(type == 5){
  231. this.$set(this,'addDialogType',false);
  232. this.getList();
  233. }
  234. },
  235. //范围选择
  236. topLeftClickType(type){
  237. if(this.queryParams.checkStatus != type){
  238. this.$set(this.queryParams,'checkStatus',type);
  239. this.handleQuery();
  240. }
  241. },
  242. //时间排序方法
  243. sortChange(val){
  244. if(val.prop == 'createTime'){
  245. this.$set(this.queryParams,'createTimeSort',val.order=='ascending'?'1':(val.order=='descending'?'2':'0'));
  246. this.handleQuery();
  247. }
  248. },
  249. //获取数据列表
  250. getList(){
  251. let obj = JSON.parse(JSON.stringify(this.queryParams))
  252. if(this.dateRange[0]){
  253. obj.cycleStartTime = this.dateRange[0];
  254. }else{
  255. obj.cycleStartTime = "";
  256. }
  257. if(this.dateRange[1]){
  258. obj.cycleEndTime = this.dateRange[1];
  259. }else{
  260. obj.cycleEndTime = "";
  261. }
  262. this.getCorrelationNum();
  263. checkPlanList(obj).then(response => {
  264. this.total = response.data.total;
  265. this.tableList = response.data.records;
  266. });
  267. },
  268. /** 搜索按钮操作 */
  269. handleQuery() {
  270. this.$set(this.queryParams,'pageNum',1);
  271. this.getList();
  272. },
  273. /** 重置按钮操作 */
  274. resetQuery() {
  275. this.$set(this,'dateRange',[]);
  276. this.$set(this,'queryParams',{
  277. pageNum:1,
  278. pageSize:20,
  279. checkStatus:0,
  280. createTimeSort:0,
  281. searchValue:"",
  282. checkType:2,
  283. myRelated:1,
  284. });
  285. this.handleQuery();
  286. },
  287. //删除
  288. deleteObj(obj){
  289. let self = this;
  290. this.$confirm('是否确认删除?', "警告", {
  291. confirmButtonText: "确定",
  292. cancelButtonText: "取消",
  293. type: "warning"
  294. }).then(function() {
  295. checkPlanDelete({id:obj.id,checkType:obj.checkType}).then(response => {
  296. self.msgSuccess(response.msg)
  297. self.getList();
  298. })
  299. }).then(() => {
  300. }).catch(() => {});
  301. },
  302. //查看多个文档
  303. lookDocumentListButton(type,row){
  304. if(type==1){
  305. getFindByCheckPlanId({checkPlanId:row.id}).then(response => {
  306. let list = [];
  307. for(let i=0;i<response.data.length;i++){
  308. let obj = {
  309. name:response.data[i].fileName,
  310. url:response.data[i].fileUrl,
  311. }
  312. list.push(obj);
  313. }
  314. this.$set(this,'propsLookDocumentListData',{
  315. title:"查看附件",
  316. list:list
  317. });
  318. this.$set(this,'lookDocumentListType',true);
  319. });
  320. }else{
  321. this.$set(this,'lookDocumentListType',false);
  322. }
  323. },
  324. }
  325. }
  326. </script>
  327. <style scoped lang="scss">
  328. .selfInspectionTask{
  329. flex: 1;
  330. display: flex !important;
  331. flex-direction: column;
  332. overflow: hidden;
  333. .selfInspectionTask-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:130px;
  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. .checkStatus-color-1{
  421. color:#0183FA;
  422. }
  423. .checkStatus-color-2{
  424. color:#EE0606;
  425. }
  426. .checkStatus-color-3{
  427. color:#23B303;
  428. }
  429. }
  430. }
  431. }
  432. </style>