686 lines
17 KiB
Vue
686 lines
17 KiB
Vue
<template>
|
||
<view class="container">
|
||
<!-- Tab切换 -->
|
||
<view class="tab-container">
|
||
<view class="tab-item" :class="{ active: activeTab === 'all' }" @click="switchTab('all')">
|
||
<text>全部报工</text>
|
||
</view>
|
||
<view class="tab-item" :class="{ active: activeTab === 'my' }" @click="switchTab('my')">
|
||
<text>我的报工</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 卡片列表 -->
|
||
<view class="card-list-container">
|
||
<scroll-view scroll-y class="card-scroll" @scrolltolower="loadMore" refresher-enabled
|
||
:refresher-triggered="refreshing" @refresherrefresh="onRefresh" :style="{ height: scrollHeight + 'px' }">
|
||
<view class="card-list">
|
||
<ReportCard v-for="(item, index) in projectReportList" :key="item.reportId" :item="item"
|
||
:show-avatar="activeTab === 'all'" @card-click="handleCardClick"></ReportCard>
|
||
<view v-if="!loading && projectReportList.length === 0" class="empty-state">
|
||
<image src="/static/images/empty_lable.png" class="empty-image"></image>
|
||
<text class="empty-text">暂无报工数据</text>
|
||
</view>
|
||
</view>
|
||
<u-loadmore v-if="total > 0" :status="loadMoreStatus" @loadmore="loadMore"></u-loadmore>
|
||
</scroll-view>
|
||
</view>
|
||
|
||
<view class="fab-button" @click="handleAdd">
|
||
<u-icon name="plus" color="#fff" size="30"></u-icon>
|
||
</view>
|
||
|
||
<uni-popup ref="popup" type="bottom" :mask-click="false">
|
||
<view class="form-popup-content">
|
||
<view class="popup-header">
|
||
<text class="popup-title">{{ title }}</text>
|
||
<u-icon name="close" @click="cancel" size="40"></u-icon>
|
||
</view>
|
||
<scroll-view scroll-y class="form-content">
|
||
<view class="form-container">
|
||
<view class="form-item">
|
||
<view class="form-label">工作地点</view>
|
||
<view class="location-row">
|
||
<u-input v-model="form.workPlace" placeholder="系统自动获取中" :disabled="!locationCanEdit"></u-input>
|
||
</view>
|
||
<view v-if="form.locationText" class="location-tip">已自动获取当前位置，无需手动填写</view>
|
||
</view>
|
||
<view class="form-item">
|
||
<view class="form-label">是否出差</view>
|
||
<u-radio-group v-model="form.isTrip">
|
||
<u-radio :name="1" label="是"></u-radio>
|
||
<u-radio :name="0" label="否"></u-radio>
|
||
</u-radio-group>
|
||
</view>
|
||
<view v-if="form.isTrip === 1" class="form-item">
|
||
<view class="form-label">国内/国外</view>
|
||
<u-radio-group v-model="form.workType">
|
||
<u-radio :name="0" label="国内"></u-radio>
|
||
<u-radio :name="1" label="国外"></u-radio>
|
||
</u-radio-group>
|
||
</view>
|
||
<view class="form-item">
|
||
<view class="form-label">请选择项目</view>
|
||
<oa-project-select v-model="form.projectId" placeholder="请选择项目"></oa-project-select>
|
||
</view>
|
||
<view class="form-item">
|
||
<view class="form-label">报工内容</view>
|
||
<Quill v-model="form.content" placeholder="请输入报工内容" :height="200"></Quill>
|
||
</view>
|
||
<view class="form-item">
|
||
<view class="form-label">备注</view>
|
||
<u-input v-model="form.remark" placeholder="请输入备注"></u-input>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
<view class="popup-footer">
|
||
<u-button type="primary" @click="submitForm" :loading="buttonLoading">确定</u-button>
|
||
<u-button @click="cancel">取消</u-button>
|
||
</view>
|
||
</view>
|
||
</uni-popup>
|
||
|
||
<ReportDetail ref="reportDetail" :detail="reportDetail"></ReportDetail>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
listProjectReport,
|
||
addProjectReport,
|
||
getProjectReport
|
||
} from '@/api/oa/projectReport'
|
||
import {
|
||
listProject
|
||
} from '@/api/oa/project'
|
||
import {
|
||
listDept
|
||
} from '@/api/oa/dept'
|
||
import {
|
||
getCityByLocation
|
||
} from '@/api/fad/location'
|
||
import ReportCard from '@/components/ReportCard/index.vue'
|
||
import ReportDetail from '@/components/ReportDetail/index.vue'
|
||
import {
|
||
mapState
|
||
} from 'vuex'
|
||
|
||
export default {
|
||
components: {
|
||
ReportCard,
|
||
ReportDetail
|
||
},
|
||
computed: {
|
||
...mapState('user', ['selfInfo'])
|
||
},
|
||
data() {
|
||
return {
|
||
activeTab: 'all',
|
||
scrollHeight: 0,
|
||
buttonLoading: false,
|
||
locationLoading: false,
|
||
locationCanEdit: false,
|
||
cachedLocation: {
|
||
city: '',
|
||
latitude: null,
|
||
longitude: null,
|
||
locationText: ''
|
||
},
|
||
loading: true,
|
||
total: 0,
|
||
projectReportList: [],
|
||
title: '',
|
||
projectList: [],
|
||
deptList: [],
|
||
form: {},
|
||
loadMoreStatus: 'loadmore',
|
||
refreshing: false,
|
||
reportDetail: {},
|
||
queryParams: {
|
||
pageNum: 1,
|
||
pageSize: 10
|
||
},
|
||
rules: {
|
||
workPlace: [{
|
||
required: true,
|
||
message: '工作地点不能为空',
|
||
trigger: 'blur'
|
||
}],
|
||
projectId: [{
|
||
required: true,
|
||
message: '项目不能为空',
|
||
trigger: 'blur'
|
||
}],
|
||
content: [{
|
||
required: true,
|
||
message: '报工内容不能为空',
|
||
trigger: 'blur'
|
||
}],
|
||
isTrip: [{
|
||
required: true,
|
||
message: '请选择是否出差',
|
||
trigger: 'change'
|
||
}],
|
||
workType: [{
|
||
required: true,
|
||
message: '请选择出差地点',
|
||
trigger: 'change',
|
||
validator: (rule, value, callback) => {
|
||
if (this.form.isTrip === 1 && !value && value !== 0) callback(new Error('请选择出差地点'));
|
||
else callback();
|
||
}
|
||
}]
|
||
}
|
||
}
|
||
},
|
||
onLoad() {
|
||
this.calculateScrollHeight();
|
||
this.checkLocationPermissionAndInit();
|
||
},
|
||
onReady() {
|
||
this.calculateScrollHeight();
|
||
},
|
||
methods: {
|
||
calculateScrollHeight() {
|
||
const systemInfo = uni.getSystemInfoSync();
|
||
this.scrollHeight = systemInfo.windowHeight - 100 - 40 + 80;
|
||
},
|
||
switchTab(tab) {
|
||
if (this.activeTab === tab) return;
|
||
this.activeTab = tab;
|
||
this.queryParams.pageNum = 1;
|
||
this.projectReportList = [];
|
||
this.getList();
|
||
},
|
||
onRefresh() {
|
||
this.refreshing = true;
|
||
this.queryParams.pageNum = 1;
|
||
this.getList().finally(() => {
|
||
this.refreshing = false;
|
||
});
|
||
},
|
||
checkLocationPermissionAndInit() {
|
||
if (typeof uni.getSetting !== 'function') {
|
||
this.getList();
|
||
this.getCurrentLocation(true);
|
||
return;
|
||
}
|
||
uni.getSetting({
|
||
success: (settingRes) => {
|
||
const auth = settingRes.authSetting || {};
|
||
if (auth['scope.userLocation']) {
|
||
this.getList();
|
||
this.getCurrentLocation(true);
|
||
return;
|
||
}
|
||
uni.showModal({
|
||
title: '需要定位权限',
|
||
content: '报工页面必须先开启定位权限才能进入。',
|
||
confirmText: '去设置',
|
||
cancelText: '返回',
|
||
success: (res) => {
|
||
if (res.confirm && typeof uni.openSetting === 'function') {
|
||
uni.openSetting({
|
||
success: (openRes) => {
|
||
if (openRes.authSetting && openRes.authSetting['scope.userLocation']) {
|
||
this.getList();
|
||
this.getCurrentLocation(true);
|
||
} else {
|
||
uni.navigateBack();
|
||
}
|
||
},
|
||
fail: () => uni.navigateBack()
|
||
});
|
||
} else {
|
||
uni.navigateBack();
|
||
}
|
||
}
|
||
});
|
||
},
|
||
fail: () => {
|
||
uni.navigateBack();
|
||
}
|
||
});
|
||
},
|
||
getProjectList() {
|
||
listProject({
|
||
pageNum: 1,
|
||
pageSize: 9999
|
||
}).then(res => {
|
||
const rawData = res.rows || [];
|
||
this.projectList = rawData.map(item => ({
|
||
value: item.projectId,
|
||
text: item.projectName || '未命名项目',
|
||
projectId: item.projectId,
|
||
projectName: item.projectName || '未命名项目',
|
||
projectNum: item.projectNum,
|
||
projectCode: item.projectCode
|
||
}));
|
||
}).catch(() => {});
|
||
},
|
||
getDeptList() {
|
||
listDept().then(res => {
|
||
this.deptList = res.data || [];
|
||
}).catch(() => {});
|
||
},
|
||
getList() {
|
||
return new Promise((resolve, reject) => {
|
||
this.loading = true;
|
||
const params = {
|
||
...this.queryParams
|
||
};
|
||
if (this.activeTab === 'my') {
|
||
const oaId = uni.getStorageSync('oaId');
|
||
if (oaId) params.userId = oaId;
|
||
}
|
||
listProjectReport(params).then(response => {
|
||
this.projectReportList = this.queryParams.pageNum === 1 ? (response.rows || []) : [...this
|
||
.projectReportList, ...(response.rows || [])
|
||
];
|
||
this.total = response.total || 0;
|
||
this.loading = false;
|
||
if (this.queryParams.pageNum > 1) this.loadMoreStatus = 'loadmore';
|
||
this.getProjectList();
|
||
resolve(response);
|
||
}).catch(err => {
|
||
this.loading = false;
|
||
this.loadMoreStatus = 'loadmore';
|
||
uni.showToast({
|
||
title: '获取数据失败',
|
||
icon: 'none'
|
||
});
|
||
reject(err);
|
||
});
|
||
});
|
||
},
|
||
handleAdd() {
|
||
this.reset();
|
||
this.title = '添加项目报工';
|
||
if (this.cachedLocation.city) {
|
||
this.form.city = this.cachedLocation.city;
|
||
this.form.latitude = this.cachedLocation.latitude;
|
||
this.form.longitude = this.cachedLocation.longitude;
|
||
this.form.locationText = this.cachedLocation.locationText;
|
||
this.form.workPlace = this.cachedLocation.city;
|
||
this.locationCanEdit = false;
|
||
} else {
|
||
this.locationCanEdit = true;
|
||
}
|
||
this.$refs.popup.open();
|
||
},
|
||
handleCardClick(item) {
|
||
this.getReportDetail(item.reportId);
|
||
},
|
||
getReportDetail(reportId) {
|
||
this.$refs.reportDetail.open();
|
||
getProjectReport(reportId).then(response => {
|
||
this.reportDetail = response.data || response || {};
|
||
}).catch(() => {
|
||
uni.showToast({
|
||
title: '获取详情失败',
|
||
icon: 'none'
|
||
});
|
||
this.$refs.reportDetail.close();
|
||
});
|
||
},
|
||
submitForm() {
|
||
if (!this.form.workPlace) {
|
||
uni.showToast({
|
||
title: '工作地点不能为空',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
if (this.form.isTrip === undefined) {
|
||
uni.showToast({
|
||
title: '请选择是否出差',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
if (this.form.isTrip === 1 && this.form.workType === undefined) {
|
||
uni.showToast({
|
||
title: '请选择出差地点',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
if (!this.form.projectId) {
|
||
uni.showToast({
|
||
title: '项目不能为空',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
if (!this.form.content) {
|
||
uni.showToast({
|
||
title: '报工内容不能为空',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
this.buttonLoading = true;
|
||
const selectedProject = this.projectList.find(p => p.value === this.form.projectId);
|
||
const submitData = {
|
||
...this.form,
|
||
projectName: selectedProject?.projectName || '',
|
||
projectNum: selectedProject?.projectNum || '',
|
||
projectCode: selectedProject?.projectCode || null,
|
||
locationText: this.form.locationText || ''
|
||
};
|
||
addProjectReport(submitData).then(() => {
|
||
this.buttonLoading = false;
|
||
uni.showToast({
|
||
title: '新增成功',
|
||
icon: 'success'
|
||
});
|
||
this.$refs.popup.close();
|
||
this.getList();
|
||
}).catch(() => {
|
||
this.buttonLoading = false;
|
||
uni.showToast({
|
||
title: '新增失败',
|
||
icon: 'none'
|
||
});
|
||
});
|
||
},
|
||
cancel() {
|
||
this.$refs.popup.close();
|
||
this.reset();
|
||
},
|
||
getCurrentLocation(silent = false) {
|
||
if (this.cachedLocation.city && this.cachedLocation.latitude && this.cachedLocation.longitude) return Promise
|
||
.resolve(this.cachedLocation);
|
||
if (this.locationLoading) return Promise.resolve(null);
|
||
this.locationLoading = true;
|
||
if (typeof uni.authorize !== 'function') return this.requestLocation(silent);
|
||
uni.authorize({
|
||
scope: 'scope.userLocation',
|
||
success: () => {
|
||
this.requestLocation(silent);
|
||
},
|
||
fail: () => {
|
||
this.locationLoading = false;
|
||
this.locationCanEdit = true;
|
||
if (!silent) {
|
||
uni.showModal({
|
||
title: '需要定位权限',
|
||
content: '请先授权定位权限后再获取当前位置。',
|
||
confirmText: '去设置',
|
||
cancelText: '取消',
|
||
success: (res) => {
|
||
if (res.confirm && typeof uni.openSetting === 'function') {
|
||
uni.openSetting({
|
||
success: () => {
|
||
this.requestLocation(silent);
|
||
}
|
||
});
|
||
}
|
||
}
|
||
});
|
||
}
|
||
}
|
||
});
|
||
},
|
||
requestLocation(silent = false) {
|
||
console.log('准备获取定位')
|
||
if (typeof uni.getLocation !== 'function') {
|
||
this.locationLoading = false;
|
||
this.locationCanEdit = true;
|
||
return Promise.resolve(null);
|
||
}
|
||
return new Promise((resolve) => {
|
||
uni.getLocation({
|
||
type: 'wgs84',
|
||
isHighAccuracy: true,
|
||
highAccuracyExpireTime: 3000,
|
||
success: (res) => {
|
||
console.log('获取当前定位')
|
||
this.locationLoading = false;
|
||
this.locationCanEdit = false;
|
||
this.form.latitude = res.latitude;
|
||
this.form.longitude = res.longitude;
|
||
this.form.locationText = `纬度：${res.latitude}, 经度：${res.longitude}`;
|
||
this.form.workPlace = this.form.locationText;
|
||
this.fetchCityByLocation(res.latitude, res.longitude, silent).then(resolve);
|
||
},
|
||
fail: (err) => {
|
||
this.locationLoading = false;
|
||
this.locationCanEdit = true;
|
||
console.error('获取位置失败:', err);
|
||
if (!silent) uni.showToast({
|
||
title: '获取位置失败',
|
||
icon: 'none'
|
||
});
|
||
resolve(null);
|
||
}
|
||
});
|
||
});
|
||
},
|
||
fetchCityByLocation(latitude, longitude, silent = false) {
|
||
return getCityByLocation(latitude, longitude).then(res => {
|
||
const city = res?.msg || res?.data || '';
|
||
console.log(res?.msg || res?.data || '')
|
||
if (city) {
|
||
this.cachedLocation = {
|
||
city,
|
||
latitude,
|
||
longitude,
|
||
locationText: `城市：${city}`
|
||
};
|
||
this.form.city = city;
|
||
this.form.workPlace = `城市：${city}`;
|
||
this.form.locationText = `城市：${city}`;
|
||
this.locationCanEdit = false;
|
||
return city;
|
||
}
|
||
console.log('允许编辑')
|
||
this.locationCanEdit = true;
|
||
if (!silent) {
|
||
this.form.workPlace = `纬度：${latitude}, 经度：${longitude}`;
|
||
this.form.locationText = this.form.workPlace;
|
||
uni.showToast({
|
||
title: '已获取定位，但未识别到城市',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
return '';
|
||
}).catch(() => {
|
||
this.locationCanEdit = true;
|
||
if (!silent) {
|
||
this.form.workPlace = `纬度：${latitude}, 经度：${longitude}`;
|
||
this.form.locationText = this.form.workPlace;
|
||
uni.showToast({
|
||
title: '城市解析失败',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
return '';
|
||
});
|
||
},
|
||
reset() {
|
||
this.form = {
|
||
workPlace: '',
|
||
locationText: '',
|
||
city: '',
|
||
latitude: null,
|
||
longitude: null,
|
||
projectId: null,
|
||
content: '',
|
||
remark: '',
|
||
isTrip: undefined,
|
||
workType: undefined
|
||
};
|
||
this.locationCanEdit = false;
|
||
},
|
||
loadMore() {
|
||
if (this.projectReportList.length >= this.total) {
|
||
this.loadMoreStatus = 'nomore';
|
||
return;
|
||
}
|
||
this.queryParams.pageNum++;
|
||
this.loadMoreStatus = 'loading';
|
||
this.getList();
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.container {
|
||
background-color: #f5f5f5;
|
||
height: 100vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.tab-container {
|
||
display: flex;
|
||
background-color: #fff;
|
||
padding: 0 20rpx;
|
||
border-bottom: 1rpx solid #e9ecef;
|
||
|
||
.tab-item {
|
||
flex: 1;
|
||
height: 80rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 28rpx;
|
||
color: #666;
|
||
position: relative;
|
||
|
||
&.active {
|
||
color: #007bff;
|
||
font-weight: 500;
|
||
|
||
&::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 60rpx;
|
||
height: 4rpx;
|
||
background-color: #007bff;
|
||
border-radius: 2rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.card-list-container {
|
||
flex: 1;
|
||
padding: 20rpx;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.card-scroll {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.empty-state {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 100rpx 0;
|
||
|
||
.empty-image {
|
||
width: 200rpx;
|
||
height: 200rpx;
|
||
margin-bottom: 30rpx;
|
||
opacity: 0.6;
|
||
}
|
||
|
||
.empty-text {
|
||
font-size: 28rpx;
|
||
color: #999;
|
||
}
|
||
}
|
||
|
||
.form-popup-content {
|
||
background-color: #fff;
|
||
border-radius: 20rpx 20rpx 0 0;
|
||
overflow: hidden;
|
||
width: 100%;
|
||
max-height: 80vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
box-sizing: border-box;
|
||
|
||
.popup-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 30rpx;
|
||
border-bottom: 1rpx solid #e9ecef;
|
||
|
||
.popup-title {
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
|
||
.form-content {
|
||
padding: 30rpx;
|
||
flex: 1;
|
||
overflow-y: auto;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.form-container {
|
||
box-sizing: border-box;
|
||
|
||
.form-item {
|
||
margin-bottom: 40rpx;
|
||
box-sizing: border-box;
|
||
|
||
.form-label {
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
margin-bottom: 20rpx;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.location-row {
|
||
display: flex;
|
||
gap: 16rpx;
|
||
align-items: center;
|
||
}
|
||
|
||
.location-tip {
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
margin-top: 12rpx;
|
||
line-height: 1.4;
|
||
}
|
||
}
|
||
}
|
||
|
||
.popup-footer {
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 20rpx;
|
||
padding: 30rpx;
|
||
border-top: 1rpx solid #e9ecef;
|
||
}
|
||
}
|
||
|
||
.fab-button {
|
||
position: fixed;
|
||
bottom: 20rpx;
|
||
right: 20rpx;
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
border-radius: 50%;
|
||
background-color: #007bff;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
|
||
padding: 20rpx;
|
||
z-index: 999;
|
||
}
|
||
</style> |