<template> <view class="content"> <view class="search card"> <u--input prefixIcon="search" placeholder="请输入关键字" border="surround" v-model="KEYWORDS" clearable shape="circle" ></u--input> <view class="bth-mini ml-10"> <u-button type="success" text="确定" @click="resetList"></u-button> </view> </view> <u-popup :show="popupShow" @close="popupShow = false" mode="right" :customStyle="{width:'85vw'}"> <view class="card"> <view class="pl-10 pr-10"> <u--form labelPosition="left"> <u-form-item label="清单名称" borderBottom> <u--input inputAlign="right" placeholder="请输入清单名称" border="none" v-model="KEYWORDS" clearable ></u--input> </u-form-item> <u-form-item label="检查部门" borderBottom> <u--text :text="DEPTNAME || '请选择'" @click="showTree"></u--text> <tki-tree ref="tkitree" :range="deptRange" rangeKey="name" selectParent @confirm="confirmTree"/> </u-form-item> <u-form-item label="检查人" borderBottom> <u--text :text="USER_NAME || '请选择'" @click="userShow = true"></u--text> <u-picker :show="userShow" :columns="userList" keyName="USERNAME" @cancel="userShow = false" @confirm="pickerConfirm($event,'user')"></u-picker> </u-form-item> <u-form-item label="清单类型" borderBottom> <u--text :text="TYPE_NAME || '请选择'" @click="typeShow = true"></u--text> <u-picker :show="typeShow" :columns="typeList" keyName="NAME" @cancel="typeShow = false" @confirm="pickerConfirm($event,'type')"></u-picker> </u-form-item> <u-form-item label="排查周期" borderBottom> <u--text :text="PERIOD_NAME || '请选择'" @click="periodShow = true"></u--text> <u-picker :show="periodShow" :columns="periodList" keyName="NAME" @cancel="periodShow = false" @confirm="pickerConfirm($event,'period')"></u-picker> </u-form-item> <u-form-item label="开始时间" borderBottom> <u--text :text="startDate || '请选择'" @click="startDateShow = true"></u--text> <u-datetime-picker :show="startDateShow" mode="date" :value="Number(new Date())" @cancel="startDateShow = false" @confirm="startDateConfirm"></u-datetime-picker> </u-form-item> <u-form-item label="结束时间" borderBottom> <u--text :text="endDate || '请选择'" @click="endDateShow = true"></u--text> <u-datetime-picker :show="endDateShow" mode="date" :value="Number(new Date())" @cancel="endDateShow = false" @confirm="endDateConfirm"></u-datetime-picker> </u-form-item> </u--form> </view> <view class="mt-10 flex-between"> <view class="flex1"> <u-button type="info" text="重置" @click="reset"></u-button> </view> <view class="ml-10 flex1"> <u-button type="primary" text="查询" @click="resetList"></u-button> </view> </view> </view> </u-popup> <u-list @scrolltolower="scrolltolower" v-if="list.length > 0"> <u-list-item v-for="(item, index) in list" :key="index"> <view> <view class="flex-between main-title"> <text>清单名称:{{ item.NAME }}</text> </view> <view class="flex-between mt-10 subtitle"> <text>清单类型:{{ item.TYPENAME }}</text> <text>排查周期:{{ item.PERIODNAME }}</text> </view> <view class="flex-between mt-10 subtitle"> <text>部门:{{ item.DEPARTMENT_NAME }}</text> </view> <view class="flex-between mt-10 subtitle"> <text>岗位:{{ item.POST_NAME }}</text> <text>人员:{{ item.USER_NAME }}</text> </view> <view class="flex-between mt-10 subtitle"> <text>检查次数:{{ item.count }}</text> <text>超期未检查次数:{{ item.OVERTIMENUM }}</text> </view> <view class="flex-end mt-10 see_btn"> <u-button type="primary" text="查看" size="mini" @click="fnNavigatorDetail(item.LISTMANAGER_ID)"></u-button> </view> </view> </u-list-item> </u-list> <empty v-else></empty> <fab-button type="search" @click="popupShow = true"/> </view> </template> <script> import { getInspectionReportListManageList, getDept, getDeptUser, getCorpDept, getCheckCycle, getListType, getInspectedDepartment } from "../../../api"; import FabButton from "@/components/fab_button/index.vue"; export default { components: {FabButton}, data() { return { CORPINFO_ID: '', KEYWORDS: '', pageSize: 10, currentPage: 1, totalPage: 0, list: [], popupShow: false, DEPT: '', DEPTNAME: '', deptRange: [], userList: [], userShow: false, USER_NAME: '', USER_ID: '', typeList: [], typeShow: false, TYPE_NAME: '', TYPE_ID: '', periodList: [], periodShow: false, PERIOD_NAME: '', PERIOD_ID: '', startDateShow: false, startDate: '', endDateShow: false, endDate: '', } }, onLoad(event) { this.CORPINFO_ID = event.CORPINFO_ID; this.resetList() this.getDept() this.fnGetCheckCycle() this.fnGetListType() }, methods: { async getDept() { let resData = await getInspectedDepartment({'CORPINFO_ID': this.CORPINFO_ID}); this.deptRange = JSON.parse(resData.zTreeNodes) }, async fnGetDeptUser(detpId) { let resData = await getDeptUser({'DEPARTMENT_ID': detpId}); this.$set(this.userList, 0, resData.userList) }, async fnGetCheckCycle() { let resData = await getCheckCycle(); this.$set(this.periodList, 0, resData.list) }, async fnGetListType() { let resData = await getListType(); this.$set(this.typeList, 0, resData.list) }, async getData() { this.popupShow = false let resData = await getInspectionReportListManageList({ CORPINFO_ID: this.CORPINFO_ID, SELECT_CORPINFO_ID: this.CORPINFO_ID, KEYWORDS: this.KEYWORDS, DEPARTMENT_ID: this.DEPT, USER_ID: this.USER_ID, TYPE: this.TYPE_ID, PERIOD: this.PERIOD_ID, STARTTIME: this.startDate, ENDTIME: this.endDate, showCount: this.pageSize, currentPage: this.currentPage, }); this.list = [...this.list, ...resData.varList]; this.totalPage = resData.page.totalPage; }, resetList() { this.pageSize = 10 this.currentPage = 1 this.list = [] this.getData() }, fnNavigatorDetail(LISTMANAGER_ID) { uni.$u.route({ url: '/pages/branch-self-report/index/inspection-records-detail-list', params: { LISTMANAGER_ID, CORPINFO_ID: this.CORPINFO_ID, } }) }, scrolltolower() { this.currentPage++; if (this.totalPage >= this.currentPage) this.getData(); }, showTree() { this.$refs.tkitree._show() }, confirmTree(e) { this.DEPT = e[0].id this.DEPTNAME = e[0].name this.fnGetDeptUser(e[0].id) }, pickerConfirm(e, type) { if (type === 'user') { this.USER_ID = e.value[0].USER_ID this.USER_NAME = e.value[0].USERNAME this.userShow = false; } if (type === 'type') { this.TYPE_ID = e.value[0].BIANMA this.TYPE_NAME = e.value[0].NAME this.typeShow = false; } if (type === 'period') { this.PERIOD_ID = e.value[0].BIANMA this.PERIOD_NAME = e.value[0].NAME this.periodShow = false; } }, startDateConfirm(e) { this.startDate = uni.$u.timeFormat(e.value, 'yyyy-mm-dd') this.startDateShow = false }, endDateConfirm(e) { this.endDate = uni.$u.timeFormat(e.value, 'yyyy-mm-dd') this.endDateShow = false }, reset() { this.popupShow = false this.KEYWORDS = '' this.DEPT = '' this.DEPTNAME = '' this.USER_ID = '' this.USER_NAME = '' this.TYPE_ID = '' this.TYPE_NAME = '' this.PERIOD_ID = '' this.PERIOD_NAME = '' this.startDate = '' this.endDate = '' this.resetList() } } } </script> <style scoped lang="scss"> .search { display: flex; .ml-10 { margin-left: 10rpx; } .bth-mini { width: 100rpx; } } .see_btn { width: 100rpx; float: right; } </style>