jszjdy-regulatory-app/pages/key_safety/management_list.vue

211 lines
4.6 KiB
Vue

<template>
<view class="container">
<view>
<view class="searcher">
<view>
<u-search
v-model="searchForm.keyword"
placeholder="请输入关键字"
shape="round"
bg-color="#f7f7f8"
action-text="搜索"
@search="fnResetPaging"
@custom="fnResetPaging"
/>
</view>
</view>
<view class="info_mainer">
<view v-if="list.length > 0">
<u-list @scrolltolower="scrolltolower">
<u-list-item
v-for="item in list"
:key="item.CORPINFO_CERTIFIED_PERSONNEL_ID"
class="wrap"
>
<view
@click="
$u.route({
url: '/pages/key_safety/details',
params: {
SAFEOPERATIONMANAGEMENT_ID:
item.SAFEOPERATIONMANAGEMENT_ID,
},
})
"
>
<view class="tit">
<view class="u-line-2">{{ item.CORP_NAME }}</view>
<view>
<image src="../../static/png/right.png" style="width: 16px;height: 16px;"/>
</view>
</view>
<view class="text">
<text>作业类型:</text>
{{ item.OPERATION_TYPE }}
</view>
<view class="text">
<text>作业内容:</text>
{{ item.OPERATION_CONTENT }}
</view>
<view class="text">
<text>作业时间:</text>
{{ item.OPERATION_TIME }} 至 {{ item.OPERATION_TIME_END }}
</view>
</view>
</u-list-item>
</u-list>
</view>
<empty v-else />
</view>
</view>
</view>
</template>
<script>
import { getAppSafeOperationManagementList } from "@/api";
export default {
data() {
return {
list: [],
pageSize: 10,
currentPage: 1,
totalPage: 0,
searchForm: {
keyword: "",
},
CORPINFO_ID: "",
};
},
onLoad(query) {
this.CORPINFO_ID = query.CORPINFO_ID;
this.fnGetData();
},
methods: {
async fnGetData() {
const resData = await getAppSafeOperationManagementList({
showCount: this.pageSize,
currentPage: this.currentPage,
KEYWORDS: this.searchForm.keyword,
CORPINFO_ID: this.CORPINFO_ID,
});
this.list = [...this.list, ...resData.varList];
this.totalPage = resData.page.totalPage;
},
fnResetPaging() {
this.list = [];
this.currentPage = 1;
this.fnGetData();
},
scrolltolower() {
this.currentPage++;
if (this.totalPage >= this.currentPage) this.fnGetData();
},
},
};
</script>
<style scoped lang="scss">
.fcg {
color: #489b27;
font-weight: normal;
}
.fcr {
color: #ff0000;
font-weight: normal;
}
.container {
width: 100%;
height: calc(100vh - 45px);
background: #fafafa;
.tabs {
width: 100%;
background: #ffffff;
border-bottom: 1px solid #eeeeee;
}
.searcher {
width: 100%;
background: #ffffff;
padding: 20upx;
box-sizing: border-box;
margin-top: 20upx;
border-bottom: 1px solid #eeeeee;
.mainer {
width: 100%;
display: flex;
justify-content: space-between;
margin-top: 20upx;
align-items: center;
font-size: 28upx;
.area {
width: 40%;
background: #f7f7f8;
border-radius: 4upx;
height: 60upx;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 10upx;
.name {
width: 90%;
}
}
.radio_main {
width: 60%;
padding-left: 10upx;
}
}
}
.info_mainer {
width: 100%;
margin-top: 20upx;
.wrap {
width: 100%;
background: #ffffff;
margin-bottom: 20upx;
padding: 20upx;
line-height: 2;
box-sizing: border-box;
.info_main {
width: 100%;
display: flex;
flex-wrap: wrap;
.list {
width: 50%;
display: flex;
.lable {
color: #999999;
margin-right: 10upx;
}
}
}
.tit {
font-weight: bold;
display: flex;
justify-content: space-between;
align-items: center;
}
.text text {
color: #999999;
margin-right: 10upx;
}
}
}
}
</style>