Merge branch 'master' of https://gitee.com/hdka/im-uniapp
This commit is contained in:
@@ -190,7 +190,6 @@ export default {
|
||||
this.loading = true;
|
||||
this.saveLoginInfo();
|
||||
let data = {};
|
||||
|
||||
data = await businessLogin({
|
||||
phoneNumber: this.loginInfo.phoneNumber,
|
||||
email: this.loginInfo.email,
|
||||
@@ -217,11 +216,71 @@ export default {
|
||||
this.$store.dispatch("contact/getSentFriendApplications");
|
||||
this.$store.dispatch("contact/getRecvGroupApplications");
|
||||
this.$store.dispatch("contact/getSentGroupApplications");
|
||||
// 登录成功后，绑定deviceId与imId
|
||||
// 获取设备cid，调用云函数
|
||||
// const cid = uni.getStorageSync('cid');
|
||||
// uniCloud.callFunction({
|
||||
// name: 'bindingIm',
|
||||
// data: {
|
||||
// deviceId: cid,
|
||||
// imId: userID
|
||||
// },
|
||||
// success: (res) => {
|
||||
// if (res.result.code === 200) {
|
||||
// uni.showToast({
|
||||
// title: res.result.msg,
|
||||
// icon: 'success'
|
||||
// });
|
||||
// } else {
|
||||
// uni.showToast({
|
||||
// title: res.result.msg,
|
||||
// icon: 'none'
|
||||
// });
|
||||
// }
|
||||
// },
|
||||
// fail: (err) => {
|
||||
// uni.showToast({
|
||||
// title: '云函数调用失败',
|
||||
// icon: 'none'
|
||||
// });
|
||||
// console.error(err);
|
||||
// }
|
||||
// });
|
||||
uni.switchTab({
|
||||
url: "/pages/conversation/conversationList/index",
|
||||
});
|
||||
await getSMSCodeFromOa(this.loginInfo.phoneNumber);
|
||||
await loginOaByPhone(this.loginInfo.phoneNumber)
|
||||
await getSMSCodeFromOa(this.loginInfo.phoneNumber);
|
||||
const info = await loginOaByPhone(this.loginInfo.phoneNumber)
|
||||
// console.log('用户信息', info)
|
||||
// const oaUserId = info.userInfo.userId;
|
||||
|
||||
// uniCloud.callFunction({
|
||||
// name: 'binding',
|
||||
// data: {
|
||||
// oaId: oaUserId,
|
||||
// deviceId: cid
|
||||
// },
|
||||
// success: (res) => {
|
||||
// if (res.result.code === 200) {
|
||||
// uni.showToast({
|
||||
// title: res.result.msg,
|
||||
// icon: 'success'
|
||||
// });
|
||||
// } else {
|
||||
// uni.showToast({
|
||||
// title: res.result.msg,
|
||||
// icon: 'none'
|
||||
// });
|
||||
// }
|
||||
// },
|
||||
// fail: (err) => {
|
||||
// uni.showToast({
|
||||
// title: '云函数调用失败',
|
||||
// icon: 'none'
|
||||
// });
|
||||
// console.error(err);
|
||||
// }
|
||||
// });
|
||||
this.loginInfo.password = "";
|
||||
|
||||
this.loading = false;
|
||||
|
||||
@@ -73,6 +73,16 @@ export default {
|
||||
},
|
||||
{
|
||||
idx: 4,
|
||||
title: "应用更新",
|
||||
icon: require("static/images/profile_menu_about.png"),
|
||||
},
|
||||
{
|
||||
idx: 5,
|
||||
title: '测试推送',
|
||||
icon: require("static/images/profile_menu_about.png")
|
||||
},
|
||||
{
|
||||
idx: 6,
|
||||
title: "退出登录",
|
||||
icon: require("static/images/profile_menu_logout.png"),
|
||||
},
|
||||
@@ -137,6 +147,21 @@ export default {
|
||||
});
|
||||
break;
|
||||
case 4:
|
||||
this.showUpdateOptions();
|
||||
break;
|
||||
case 5:
|
||||
uni.createPushMessage({
|
||||
content: '今天还没有报工哦',
|
||||
title: "报工提醒",
|
||||
success() {
|
||||
console.log('推送成功')
|
||||
},
|
||||
fail() {
|
||||
console.log("推送失败")
|
||||
}
|
||||
});
|
||||
break;
|
||||
case 6:
|
||||
uni.showModal({
|
||||
title: "提示",
|
||||
content: "确定要退出当前账号吗？",
|
||||
@@ -158,6 +183,41 @@ export default {
|
||||
url: `/pages/common/userOrGroupQrCode/index`,
|
||||
});
|
||||
},
|
||||
showUpdateOptions() {
|
||||
const ignoredVersion = uni.$updateManager.getIgnoredVersion();
|
||||
let content = '选择更新操作：';
|
||||
if (ignoredVersion) {
|
||||
content += `\n当前忽略版本：${ignoredVersion}`;
|
||||
}
|
||||
|
||||
uni.showActionSheet({
|
||||
itemList: ['检查更新', '清除忽略版本', '取消'],
|
||||
success: (res) => {
|
||||
switch (res.tapIndex) {
|
||||
case 0:
|
||||
// 检查更新（强制检查）
|
||||
uni.$updateManager.checkUpdate(true);
|
||||
break;
|
||||
case 1:
|
||||
// 清除忽略版本
|
||||
uni.showModal({
|
||||
title: '确认操作',
|
||||
content: '确定要清除忽略的版本设置吗？清除后将重新提示所有版本更新。',
|
||||
success: (modalRes) => {
|
||||
if (modalRes.confirm) {
|
||||
uni.$updateManager.clearIgnoredVersion();
|
||||
uni.showToast({title: '已清除忽略版本设置'});
|
||||
}
|
||||
}
|
||||
});
|
||||
break;
|
||||
case 2:
|
||||
// 取消
|
||||
break;
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -3,38 +3,53 @@
|
||||
<!-- 操作说明 -->
|
||||
<view class="operation-tip">
|
||||
<u-icon name="info-circle" color="#007bff" size="16"></u-icon>
|
||||
<text class="tip-text">点击对应的行可以查看详情</text>
|
||||
<text class="tip-text">点击对应的卡片可以查看详情</text>
|
||||
</view>
|
||||
|
||||
<!-- 新增按钮 -->
|
||||
<view class="add-button-container">
|
||||
<u-button
|
||||
type="primary"
|
||||
@click="showAddForm"
|
||||
:custom-style="{ borderRadius: '50rpx', height: '80rpx' }"
|
||||
>
|
||||
<u-icon name="plus" color="#fff" size="20" style="margin-right: 10rpx;"></u-icon>
|
||||
新增汇报
|
||||
</u-button>
|
||||
</view>
|
||||
|
||||
<!-- 数据列表 -->
|
||||
<view class="table-wrapper">
|
||||
<scroll-view scroll-x class="table-scroll">
|
||||
<view class="table-container">
|
||||
<view class="table-header">
|
||||
<view class="header-cell">汇报标题</view>
|
||||
<view class="header-cell">最近汇报时间</view>
|
||||
<view class="header-cell">汇报日期</view>
|
||||
<view class="header-cell">汇报人</view>
|
||||
<view class="header-cell">涉及项目</view>
|
||||
<view class="header-cell">备注</view>
|
||||
<view class="masonry-list">
|
||||
<view
|
||||
v-for="(item, index) in reportSummaryList"
|
||||
:key="item.summaryId"
|
||||
class="masonry-card"
|
||||
@click="handleRowClick(item)"
|
||||
>
|
||||
<view class="card-title">{{ item.reportTitle || '-' }}</view>
|
||||
<view class="card-info">
|
||||
<view class="info-row">
|
||||
<text class="label">最近汇报时间：</text>
|
||||
<text>{{ formatDate(item.lastUpdateTime) }}</text>
|
||||
</view>
|
||||
<view class="table-body">
|
||||
<view
|
||||
v-for="(item, index) in reportSummaryList"
|
||||
:key="item.summaryId"
|
||||
class="table-row"
|
||||
@click="handleRowClick(item)"
|
||||
>
|
||||
<view class="table-cell">{{ item.reportTitle || '-' }}</view>
|
||||
<view class="table-cell">{{ formatDate(item.lastUpdateTime) }}</view>
|
||||
<view class="table-cell">{{ formatDate(item.reportDate) }}</view>
|
||||
<view class="table-cell">{{ item.reporter || '-' }}</view>
|
||||
<view class="table-cell">{{ item.projectName || '-' }}</view>
|
||||
<view class="table-cell">{{ item.remark || '-' }}</view>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="label">汇报日期：</text>
|
||||
<text>{{ formatDate(item.reportDate) }}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="label">汇报人：</text>
|
||||
<text>{{ item.reporter || '-' }}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="label">涉及项目：</text>
|
||||
<text>{{ item.projectName || '-' }}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="label">备注：</text>
|
||||
<text>{{ item.remark || '-' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 分页 -->
|
||||
@@ -44,13 +59,75 @@
|
||||
@loadmore="loadMore"
|
||||
></u-loadmore>
|
||||
|
||||
<!-- 新增表单弹窗 -->
|
||||
<uni-popup ref="formPopup" type="bottom" :mask-click="false">
|
||||
<view class="form-popup-content">
|
||||
<view class="popup-header">
|
||||
<text class="popup-title">新增汇报</text>
|
||||
<u-icon name="close" size="20" @click="closeForm"></u-icon>
|
||||
</view>
|
||||
|
||||
<view class="form-content">
|
||||
<u-form :model="form" ref="uForm" :rules="rules">
|
||||
<u-form-item label="汇报标题" prop="reportTitle">
|
||||
<u-input
|
||||
v-model="form.reportTitle"
|
||||
placeholder="请输入汇报标题"
|
||||
:border="true"
|
||||
/>
|
||||
</u-form-item>
|
||||
|
||||
<u-form-item label="汇报日期" prop="reportDate">
|
||||
<uni-datetime-picker
|
||||
v-model="form.reportDate"
|
||||
type="datetime"
|
||||
:clear-icon="true"
|
||||
placeholder="请选择汇报日期"
|
||||
@change="onDateChange"
|
||||
/>
|
||||
</u-form-item>
|
||||
|
||||
<u-form-item label="汇报人" prop="reporter">
|
||||
<u-input
|
||||
v-model="form.reporter"
|
||||
placeholder="请输入汇报人"
|
||||
:border="true"
|
||||
/>
|
||||
</u-form-item>
|
||||
|
||||
<u-form-item label="涉及项目" prop="projectId">
|
||||
<uni-data-select
|
||||
v-model="form.projectId"
|
||||
:localdata="projectList"
|
||||
placeholder="请选择涉及项目"
|
||||
@change="handleProjectChange"
|
||||
/>
|
||||
</u-form-item>
|
||||
|
||||
<u-form-item label="备注" prop="remark">
|
||||
<u-textarea
|
||||
v-model="form.remark"
|
||||
placeholder="请输入内容"
|
||||
:height="120"
|
||||
:border="true"
|
||||
/>
|
||||
</u-form-item>
|
||||
</u-form>
|
||||
</view>
|
||||
|
||||
<view class="popup-footer">
|
||||
<u-button @click="closeForm" :custom-style="{ flex: 1 }">取消</u-button>
|
||||
<u-button type="primary" @click="submitForm" :custom-style="{ flex: 1 }">确定</u-button>
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listProject } from '@/api/oa/project'
|
||||
import { listReportSummary } from '@/api/oa/reportSummary'
|
||||
import { listReportSummary, addReportSummary } from '@/api/oa/reportSummary'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
@@ -68,7 +145,43 @@ export default {
|
||||
projectId: undefined,
|
||||
type: 1
|
||||
},
|
||||
loadMoreStatus: 'loadmore'
|
||||
loadMoreStatus: 'loadmore',
|
||||
// 表单数据
|
||||
form: {
|
||||
reportTitle: '',
|
||||
reportDate: '',
|
||||
reporter: '',
|
||||
projectId: '',
|
||||
remark: '',
|
||||
type: 1
|
||||
},
|
||||
// 表单验证规则
|
||||
rules: {
|
||||
reportTitle: {
|
||||
type: 'string',
|
||||
required: true,
|
||||
message: '请输入汇报标题',
|
||||
trigger: ['blur', 'change']
|
||||
},
|
||||
reportDate: {
|
||||
type: 'string',
|
||||
required: true,
|
||||
message: '请选择汇报日期',
|
||||
trigger: ['blur', 'change']
|
||||
},
|
||||
reporter: {
|
||||
type: 'string',
|
||||
required: true,
|
||||
message: '请输入汇报人',
|
||||
trigger: ['blur', 'change']
|
||||
},
|
||||
projectId: {
|
||||
type: 'string',
|
||||
required: true,
|
||||
message: '请选择涉及项目',
|
||||
trigger: ['blur', 'change']
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
@@ -84,6 +197,9 @@ export default {
|
||||
this.loading = false;
|
||||
this.selectedIds = [];
|
||||
this.selectAll = false;
|
||||
if (this.reportSummaryList.length <= this.total) {
|
||||
this.loadMoreStatus = 'nomore';
|
||||
}
|
||||
}).catch(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
@@ -144,14 +260,77 @@ export default {
|
||||
// 项目选择变化处理
|
||||
handleProjectChange(value) {
|
||||
this.form.projectId = value;
|
||||
// 根据选择的项目ID获取项目名称
|
||||
const selectedProject = this.projectList.find(item => item.projectId === value);
|
||||
if (selectedProject) {
|
||||
this.selectedProjectName = selectedProject.projectName;
|
||||
},
|
||||
|
||||
// 日期选择变化处理
|
||||
onDateChange(value) {
|
||||
this.form.reportDate = value;
|
||||
},
|
||||
|
||||
// 显示新增表单
|
||||
showAddForm() {
|
||||
this.resetForm();
|
||||
this.$refs.formPopup.open();
|
||||
},
|
||||
|
||||
// 关闭表单
|
||||
closeForm() {
|
||||
this.$refs.formPopup.close();
|
||||
this.resetForm();
|
||||
},
|
||||
|
||||
// 重置表单
|
||||
resetForm() {
|
||||
this.form = {
|
||||
reportTitle: '',
|
||||
reportDate: '',
|
||||
reporter: '',
|
||||
projectId: '',
|
||||
remark: '',
|
||||
type: 1
|
||||
};
|
||||
// 清除验证状态
|
||||
if (this.$refs.uForm) {
|
||||
this.$refs.uForm.clearValidate();
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
// 提交表单
|
||||
submitForm() {
|
||||
this.$refs.uForm.validate().then(valid => {
|
||||
if (valid) {
|
||||
this.submitData();
|
||||
}
|
||||
}).catch(errors => {
|
||||
console.log('表单验证失败:', errors);
|
||||
});
|
||||
},
|
||||
|
||||
// 提交数据
|
||||
submitData() {
|
||||
uni.showLoading({
|
||||
title: '提交中...'
|
||||
});
|
||||
|
||||
addReportSummary(this.form).then(response => {
|
||||
uni.hideLoading();
|
||||
uni.showToast({
|
||||
title: '添加成功',
|
||||
icon: 'success'
|
||||
});
|
||||
this.closeForm();
|
||||
// 刷新列表
|
||||
this.queryParams.pageNum = 1;
|
||||
this.getList();
|
||||
}).catch(error => {
|
||||
uni.hideLoading();
|
||||
uni.showToast({
|
||||
title: '添加失败',
|
||||
icon: 'none'
|
||||
});
|
||||
console.error('添加汇报失败:', error);
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -180,62 +359,48 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.table-wrapper {
|
||||
background-color: #fff;
|
||||
border-radius: 10rpx;
|
||||
overflow: hidden;
|
||||
.add-button-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.table-scroll {
|
||||
width: 100%;
|
||||
.masonry-list {
|
||||
column-count: 2;
|
||||
column-gap: 24rpx;
|
||||
padding: 10rpx 0;
|
||||
}
|
||||
|
||||
.table-container {
|
||||
min-width: 1200rpx; // 设置最小宽度，确保表格内容不会被压缩
|
||||
.table-header {
|
||||
display: flex;
|
||||
background-color: #f8f9fa;
|
||||
border-bottom: 1rpx solid #e9ecef;
|
||||
.header-cell {
|
||||
width: 200rpx; // 固定列宽
|
||||
padding: 20rpx 10rpx;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
font-size: 28rpx;
|
||||
flex-shrink: 0; // 防止列被压缩
|
||||
&.checkbox {
|
||||
width: 100rpx; // 复选框列宽度
|
||||
}
|
||||
}
|
||||
.masonry-card {
|
||||
width: calc(100%% - 18rpx);
|
||||
margin-bottom: 24rpx;
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.06);
|
||||
display: inline-block;
|
||||
break-inside: avoid;
|
||||
padding: 32rpx 24rpx;
|
||||
cursor: pointer;
|
||||
transition: box-shadow 0.2s;
|
||||
&:active {
|
||||
box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.10);
|
||||
background: #f8f9fa;
|
||||
}
|
||||
.table-body {
|
||||
.table-row {
|
||||
.card-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
margin-bottom: 16rpx;
|
||||
color: #007bff;
|
||||
}
|
||||
.card-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8rpx;
|
||||
.info-row {
|
||||
display: flex;
|
||||
border-bottom: 1rpx solid #e9ecef;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
|
||||
&:hover {
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: #e9ecef;
|
||||
}
|
||||
.table-cell {
|
||||
width: 200rpx; // 固定列宽
|
||||
padding: 20rpx 10rpx;
|
||||
text-align: center;
|
||||
font-size: 26rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0; // 防止列被压缩
|
||||
word-break: break-all; // 长文本换行
|
||||
&.checkbox {
|
||||
width: 100rpx; // 复选框列宽度
|
||||
}
|
||||
.label {
|
||||
color: #888;
|
||||
min-width: 120rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -22,69 +22,49 @@
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<view class="action-buttons">
|
||||
<u-button type="primary" @click="handleAdd" size="medium">新增</u-button>
|
||||
<u-button type="error" @click="handleDelete" size="medium" :disabled="!selectedIds.length">删除</u-button>
|
||||
</view>
|
||||
|
||||
|
||||
<!-- 数据列表 -->
|
||||
<view class="table-wrapper">
|
||||
<scroll-view scroll-x class="table-scroll">
|
||||
<view class="table-container">
|
||||
<view class="table-header">
|
||||
<view class="header-cell checkbox">
|
||||
<u-checkbox v-model="selectAll" @change="handleSelectAll"></u-checkbox>
|
||||
<view class="list-wrapper">
|
||||
<u-swipe-action>
|
||||
<u-swipe-action-item
|
||||
v-for="(item, index) in reportDetailList"
|
||||
:key="item.detailId"
|
||||
:options="[{text: '删除', style: {background: '#ff4d4f', color: '#fff'}}]"
|
||||
@click="handleDelete(item)"
|
||||
>
|
||||
<view class="detail-list-item">
|
||||
<view class="item-row">
|
||||
<text class="item-label">设备编号：</text>
|
||||
<text class="item-value">{{ item.deviceCode || '-' }}</text>
|
||||
</view>
|
||||
<view class="header-cell">设备编号</view>
|
||||
<view class="header-cell">设备类别</view>
|
||||
<view class="header-cell">汇报详情内容</view>
|
||||
<view class="header-cell">图片概况</view>
|
||||
<view class="header-cell">备注</view>
|
||||
<view class="header-cell">操作</view>
|
||||
</view>
|
||||
|
||||
<u-checkbox-group v-model="selectedIds" @change="handleSelectionChange">
|
||||
<view class="table-body">
|
||||
<view
|
||||
v-for="(item, index) in reportDetailList"
|
||||
:key="item.detailId"
|
||||
class="table-row"
|
||||
>
|
||||
<view class="table-cell checkbox">
|
||||
<u-checkbox
|
||||
:name="item.detailId"
|
||||
:value="item.detailId"
|
||||
></u-checkbox>
|
||||
</view>
|
||||
<view class="table-cell">{{ item.deviceCode || '-' }}</view>
|
||||
<view class="table-cell">{{ item.category || '-' }}</view>
|
||||
<view class="table-cell content-cell">
|
||||
<text class="content-text">{{ item.reportDetail || '-' }}</text>
|
||||
</view>
|
||||
<view class="table-cell">
|
||||
<u-image
|
||||
v-if="item.ossIds"
|
||||
:src="item.ossIds.split(',')[0]"
|
||||
width="60rpx"
|
||||
height="60rpx"
|
||||
@click="handleImageDetail(item)"
|
||||
></u-image>
|
||||
<text v-else>-</text>
|
||||
</view>
|
||||
<view class="table-cell">{{ item.remark || '-' }}</view>
|
||||
<view class="table-cell">
|
||||
<u-button
|
||||
type="error"
|
||||
size="mini"
|
||||
@click="handleDelete(item)"
|
||||
>删除</u-button>
|
||||
</view>
|
||||
<view class="item-row">
|
||||
<text class="item-label">设备类别：</text>
|
||||
<text class="item-value">{{ item.category || '-' }}</text>
|
||||
</view>
|
||||
<view class="item-row">
|
||||
<text class="item-label">汇报详情内容：</text>
|
||||
<text class="item-value">{{ item.reportDetail || '-' }}</text>
|
||||
</view>
|
||||
<view class="item-row">
|
||||
<text class="item-label">图片概况：</text>
|
||||
<view v-if="item.ossIds">
|
||||
<u-image
|
||||
:src="item.ossIds.split(',')[0]"
|
||||
width="60rpx"
|
||||
height="60rpx"
|
||||
@click.stop="handleImageDetail(item)"
|
||||
></u-image>
|
||||
</view>
|
||||
<text v-else>-</text>
|
||||
</view>
|
||||
</u-checkbox-group>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view class="item-row">
|
||||
<text class="item-label">备注：</text>
|
||||
<text class="item-value">{{ item.remark || '-' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</u-swipe-action-item>
|
||||
</u-swipe-action>
|
||||
</view>
|
||||
|
||||
<!-- 分页 -->
|
||||
@@ -94,6 +74,13 @@
|
||||
@loadmore="loadMore"
|
||||
></u-loadmore>
|
||||
|
||||
<!-- 新增圆形按钮 -->
|
||||
<view class="add-button-wrapper">
|
||||
<view class="add-button" @click="handleAdd">
|
||||
<u-icon name="plus" color="#fff" size="40"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 新增弹窗 -->
|
||||
<uni-popup ref="formPopup" type="bottom" :mask-click="false">
|
||||
<view class="form-popup">
|
||||
@@ -269,6 +256,9 @@ export default {
|
||||
this.reportDetailList = response.rows || [];
|
||||
this.total = response.total || 0;
|
||||
this.loading = false;
|
||||
if (this.reportDetailList.length >= this.total) {
|
||||
this.loadMoreStatus = 'nomore';
|
||||
}
|
||||
// 重置选中状态
|
||||
this.selectedIds = [];
|
||||
this.selectAll = false;
|
||||
@@ -450,7 +440,8 @@ export default {
|
||||
this.reportDetailList = [...this.reportDetailList, ...newData];
|
||||
this.total = response.total || 0;
|
||||
|
||||
if (newData.length < this.queryParams.pageSize) {
|
||||
// 判断是否还有更多数据：当前获取的数据总数 >= 总数据量
|
||||
if (this.reportDetailList.length >= this.total) {
|
||||
this.loadMoreStatus = 'nomore';
|
||||
} else {
|
||||
this.loadMoreStatus = 'loadmore';
|
||||
@@ -549,76 +540,32 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
gap: 20rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.table-wrapper {
|
||||
background-color: #fff;
|
||||
|
||||
.list-wrapper {
|
||||
background: #fff;
|
||||
border-radius: 10rpx;
|
||||
overflow: hidden;
|
||||
padding: 10rpx 0;
|
||||
}
|
||||
|
||||
.table-scroll {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.table-container {
|
||||
min-width: 1400rpx; // 设置最小宽度，确保表格内容不会被压缩
|
||||
.table-header {
|
||||
.detail-list-item {
|
||||
padding: 32rpx 24rpx;
|
||||
background: #fff;
|
||||
border-radius: 12rpx;
|
||||
margin-bottom: 16rpx;
|
||||
border: 1rpx solid #e9ecef;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
|
||||
.item-row {
|
||||
display: flex;
|
||||
background-color: #f8f9fa;
|
||||
border-bottom: 1rpx solid #e9ecef;
|
||||
|
||||
.header-cell {
|
||||
width: 200rpx; // 固定列宽
|
||||
padding: 20rpx 10rpx;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
font-size: 28rpx;
|
||||
flex-shrink: 0; // 防止列被压缩
|
||||
|
||||
&.checkbox {
|
||||
width: 100rpx; // 复选框列宽度
|
||||
}
|
||||
align-items: center;
|
||||
margin-bottom: 8rpx;
|
||||
.item-label {
|
||||
color: #888;
|
||||
min-width: 140rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.table-body {
|
||||
.table-row {
|
||||
display: flex;
|
||||
border-bottom: 1rpx solid #e9ecef;
|
||||
|
||||
&:hover {
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
.table-cell {
|
||||
width: 200rpx; // 固定列宽
|
||||
padding: 20rpx 10rpx;
|
||||
text-align: center;
|
||||
font-size: 26rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0; // 防止列被压缩
|
||||
word-break: break-all; // 长文本换行
|
||||
|
||||
&.checkbox {
|
||||
width: 100rpx; // 复选框列宽度
|
||||
}
|
||||
|
||||
&.content-cell {
|
||||
.content-text {
|
||||
max-width: 180rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
.item-value {
|
||||
color: #333;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -696,4 +643,28 @@ export default {
|
||||
text-overflow: ellipsis;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.add-button-wrapper {
|
||||
position: fixed;
|
||||
bottom: 40rpx;
|
||||
right: 40rpx;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.add-button {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
background: linear-gradient(135deg, #007bff, #0056b3);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 4rpx 16rpx rgba(0, 123, 255, 0.3);
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.95);
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 123, 255, 0.4);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -14,6 +14,10 @@
|
||||
<image class="entry-icon" src="/static/images/shigong.png" mode="aspectFit" />
|
||||
<text class="entry-text">施工进度</text>
|
||||
</view>
|
||||
<view class="entry-item" @click="goTask">
|
||||
<image class="entry-icon" src="/static/images/task.png" mode="aspectFit"></image>
|
||||
<text class="entry-text">任务中心</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
@@ -35,7 +39,12 @@ export default {
|
||||
uni.navigateTo({
|
||||
url: '/pages/workbench/construction/construction'
|
||||
});
|
||||
}
|
||||
},
|
||||
goTask() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/workbench/task/task'
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -1,55 +1,58 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<!-- 数据列表 -->
|
||||
<view class="table-wrapper">
|
||||
<scroll-view scroll-x class="table-scroll">
|
||||
<view class="table-container">
|
||||
<view class="table-header">
|
||||
<view class="header-cell">项目代号</view>
|
||||
<view class="header-cell">项目名称</view>
|
||||
<view class="header-cell">项目编号</view>
|
||||
<view class="header-cell">经办人</view>
|
||||
<view class="header-cell">工作地点</view>
|
||||
<view class="header-cell">国内/国外</view>
|
||||
<view class="header-cell">报工时间</view>
|
||||
</view>
|
||||
|
||||
<view class="table-body">
|
||||
<view
|
||||
v-for="(item, index) in projectReportList"
|
||||
:key="item.reportId"
|
||||
class="table-row"
|
||||
>
|
||||
<view class="table-cell">
|
||||
<u-tag v-if="!item.projectCode" type="error" text="无"></u-tag>
|
||||
<u-tag v-else :text="item.projectCode"></u-tag>
|
||||
</view>
|
||||
<view class="table-cell">
|
||||
<text v-if="item.prePay > 0">⭐</text>
|
||||
<text>{{ item.projectName }}</text>
|
||||
</view>
|
||||
<view class="table-cell">{{ item.projectNum }}</view>
|
||||
<view class="table-cell">
|
||||
<text>{{ item.nickName }}</text>
|
||||
<text v-if="item.deptName">({{ item.deptName }})</text>
|
||||
</view>
|
||||
<view class="table-cell">{{ item.workPlace }}</view>
|
||||
<view class="table-cell">
|
||||
<u-tag :type="item.workType === 0 ? 'primary' : 'warning'" :text="item.workType === 0 ? '国内' : '国外'"></u-tag>
|
||||
</view>
|
||||
<view class="table-cell">{{ formatDate(item.createTime) }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<!-- 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>
|
||||
|
||||
<!-- 分页 -->
|
||||
<u-loadmore
|
||||
v-if="total > 0"
|
||||
:status="loadMoreStatus"
|
||||
@loadmore="loadMore"
|
||||
></u-loadmore>
|
||||
<!-- 卡片列表 -->
|
||||
<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">
|
||||
@@ -119,24 +122,44 @@
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
|
||||
<!-- 报工详情弹窗 -->
|
||||
<ReportDetail
|
||||
ref="reportDetail"
|
||||
:detail="reportDetail"
|
||||
></ReportDetail>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listProjectReport, addProjectReport } from '@/api/oa/projectReport'
|
||||
import { listProjectReport, addProjectReport, getProjectReport } from '@/api/oa/projectReport'
|
||||
import { listProject } from '@/api/oa/project'
|
||||
import { listDept } from '@/api/oa/dept'
|
||||
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 {
|
||||
// 当前激活的tab
|
||||
activeTab: 'all',
|
||||
// 滚动区域高度
|
||||
scrollHeight: 0,
|
||||
// 按钮loading
|
||||
buttonLoading: false,
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 项目报工表格数据
|
||||
// 项目报工列表数据
|
||||
projectReportList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
@@ -149,6 +172,10 @@ export default {
|
||||
form: {},
|
||||
// 加载更多状态
|
||||
loadMoreStatus: 'loadmore',
|
||||
// 下拉刷新状态
|
||||
refreshing: false,
|
||||
// 报工详情数据
|
||||
reportDetail: {},
|
||||
// 分页参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
@@ -186,14 +213,40 @@ export default {
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.calculateScrollHeight();
|
||||
this.getList();
|
||||
},
|
||||
onReady() {
|
||||
// 页面渲染完成后重新计算高度
|
||||
this.calculateScrollHeight();
|
||||
},
|
||||
methods: {
|
||||
// 格式化日期
|
||||
formatDate(date) {
|
||||
if (!date) return '';
|
||||
const d = new Date(date);
|
||||
return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
|
||||
// 计算滚动区域高度
|
||||
calculateScrollHeight() {
|
||||
const systemInfo = uni.getSystemInfoSync();
|
||||
const tabHeight = 100; // tab高度
|
||||
const containerPadding = 40; // 容器padding
|
||||
// 悬浮按钮是固定定位，不需要预留空间，让卡片列表到达底部
|
||||
// 我也不知道为什么要 + 80, 不然滚动高度下面一大片空白，这个不太好调试
|
||||
this.scrollHeight = systemInfo.windowHeight - tabHeight - containerPadding + 80;
|
||||
},
|
||||
|
||||
// 切换tab
|
||||
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;
|
||||
});
|
||||
},
|
||||
|
||||
// 获取项目列表
|
||||
@@ -235,19 +288,49 @@ export default {
|
||||
|
||||
// 查询项目报工列表
|
||||
getList() {
|
||||
this.loading = true;
|
||||
listProjectReport(this.queryParams).then(response => {
|
||||
this.projectReportList = response.rows || [];
|
||||
this.total = response.total || 0;
|
||||
this.loading = false;
|
||||
this.getProjectList();
|
||||
// this.getDeptList();
|
||||
}).catch(err => {
|
||||
console.error('获取报工列表失败:', err);
|
||||
this.loading = false;
|
||||
uni.showToast({
|
||||
title: '获取数据失败',
|
||||
icon: 'none'
|
||||
return new Promise((resolve, reject) => {
|
||||
this.loading = true;
|
||||
|
||||
// 根据当前tab设置查询参数
|
||||
const params = {
|
||||
...this.queryParams
|
||||
};
|
||||
|
||||
// 如果是我的报工，添加用户ID过滤
|
||||
if (this.activeTab === 'my') {
|
||||
// 使用当前登录用户的ID
|
||||
const oaId = uni.getStorageSync('oaId');
|
||||
if (oaId) {
|
||||
params.userId = oaId;
|
||||
}
|
||||
}
|
||||
|
||||
listProjectReport(params).then(response => {
|
||||
if (this.queryParams.pageNum === 1) {
|
||||
this.projectReportList = response.rows || [];
|
||||
} else {
|
||||
this.projectReportList = [...this.projectReportList, ...(response.rows || [])];
|
||||
}
|
||||
this.total = response.total || 0;
|
||||
this.loading = false;
|
||||
|
||||
// 更新加载更多状态
|
||||
if (this.queryParams.pageNum > 1) {
|
||||
this.loadMoreStatus = 'loadmore';
|
||||
}
|
||||
|
||||
this.getProjectList();
|
||||
// this.getDeptList();
|
||||
resolve(response);
|
||||
}).catch(err => {
|
||||
console.error('获取报工列表失败:', err);
|
||||
this.loading = false;
|
||||
this.loadMoreStatus = 'loadmore';
|
||||
uni.showToast({
|
||||
title: '获取数据失败',
|
||||
icon: 'none'
|
||||
});
|
||||
reject(err);
|
||||
});
|
||||
});
|
||||
},
|
||||
@@ -259,6 +342,32 @@ export default {
|
||||
this.$refs.popup.open();
|
||||
},
|
||||
|
||||
// 卡片点击事件
|
||||
handleCardClick(item) {
|
||||
console.log('点击了报工卡片:', item);
|
||||
// 获取报工详情
|
||||
this.getReportDetail(item.reportId);
|
||||
},
|
||||
|
||||
// 获取报工详情
|
||||
getReportDetail(reportId) {
|
||||
// 先打开弹窗显示加载状态
|
||||
this.$refs.reportDetail.open();
|
||||
|
||||
getProjectReport(reportId).then(response => {
|
||||
// 根据API返回的数据结构处理
|
||||
this.reportDetail = response.data || response || {};
|
||||
}).catch(err => {
|
||||
console.error('获取报工详情失败:', err);
|
||||
uni.showToast({
|
||||
title: '获取详情失败',
|
||||
icon: 'none'
|
||||
});
|
||||
// 关闭弹窗
|
||||
this.$refs.reportDetail.close();
|
||||
});
|
||||
},
|
||||
|
||||
// 提交表单
|
||||
submitForm() {
|
||||
// 手动验证表单
|
||||
@@ -361,18 +470,7 @@ export default {
|
||||
this.queryParams.pageNum++;
|
||||
this.loadMoreStatus = 'loading';
|
||||
|
||||
listProjectReport(this.queryParams).then(response => {
|
||||
const newData = response.rows || [];
|
||||
this.projectReportList = [...this.projectReportList, ...newData];
|
||||
this.loadMoreStatus = 'loadmore';
|
||||
}).catch(err => {
|
||||
console.error('加载更多失败:', err);
|
||||
this.loadMoreStatus = 'loadmore';
|
||||
uni.showToast({
|
||||
title: '加载失败',
|
||||
icon: 'none'
|
||||
});
|
||||
});
|
||||
this.getList();
|
||||
},
|
||||
|
||||
// 项目选择变化处理
|
||||
@@ -391,61 +489,75 @@ export default {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
padding: 20rpx;
|
||||
background-color: #f5f5f5;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.table-wrapper {
|
||||
background-color: #fff;
|
||||
border-radius: 10rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.table-scroll {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.table-container {
|
||||
min-width: 1400rpx; // 设置最小宽度，确保表格内容不会被压缩
|
||||
}
|
||||
|
||||
.table-header {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
background-color: #f8f9fa;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.tab-container {
|
||||
display: flex;
|
||||
background-color: #fff;
|
||||
padding: 0 20rpx;
|
||||
border-bottom: 1rpx solid #e9ecef;
|
||||
|
||||
.header-cell {
|
||||
width: 200rpx; // 固定列宽
|
||||
padding: 20rpx 10rpx;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
.tab-item {
|
||||
flex: 1;
|
||||
height: 80rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 28rpx;
|
||||
flex-shrink: 0; // 防止列被压缩
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table-body {
|
||||
.table-row {
|
||||
display: flex;
|
||||
border-bottom: 1rpx solid #e9ecef;
|
||||
|
||||
&:hover {
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
.table-cell {
|
||||
width: 200rpx; // 固定列宽
|
||||
padding: 20rpx 10rpx;
|
||||
text-align: center;
|
||||
font-size: 26rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
flex-shrink: 0; // 防止列被压缩
|
||||
word-break: break-all; // 长文本换行
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -512,5 +624,6 @@ export default {
|
||||
justify-content: center;
|
||||
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
|
||||
padding: 20rpx;
|
||||
z-index: 999;
|
||||
}
|
||||
</style>
|
||||
|
||||
390
pages/workbench/task/components/TaskList.vue
Normal file
390
pages/workbench/task/components/TaskList.vue
Normal file
@@ -0,0 +1,390 @@
|
||||
<template>
|
||||
<view class="task-list-container">
|
||||
<!-- 任务列表 -->
|
||||
<view class="task-list">
|
||||
<uni-swipe-action>
|
||||
<uni-swipe-action-item
|
||||
v-for="(task, index) in taskList"
|
||||
:key="task.taskId"
|
||||
:right-options="getSwipeOptions(task)"
|
||||
@click="handleSwipeClick($event, index)"
|
||||
>
|
||||
<view
|
||||
class="task-item"
|
||||
@click="handleTaskClick(task)"
|
||||
>
|
||||
<!-- 任务完成checkbox -->
|
||||
<view v-if="config.showCheckbox && task.status === 0" class="task-checkbox">
|
||||
<view v-if="task.state === 0" class="checkbox-container" @click.stop="handleTaskComplete(task)">
|
||||
<view
|
||||
class="custom-checkbox"
|
||||
:class="{ 'checked': checkboxStates[task.taskId] }"
|
||||
>
|
||||
<uni-icons
|
||||
v-if="checkboxStates[task.taskId]"
|
||||
type="checkmarkempty"
|
||||
size="16"
|
||||
color="#fff"
|
||||
></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else-if="task.state === 1" class="checkbox-container">
|
||||
<uni-icons type="checkmarkempty" size="20" color="#999"></uni-icons>
|
||||
</view>
|
||||
<view v-else-if="task.state === 2" class="checkbox-container">
|
||||
<uni-icons type="checkmarkempty" size="20" color="#52c41a"></uni-icons>
|
||||
</view>
|
||||
<view v-else class="checkbox-container">
|
||||
<view class="custom-checkbox disabled">
|
||||
<uni-icons type="checkmarkempty" size="16" color="#999"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 任务内容 -->
|
||||
<view class="task-content">
|
||||
<view class="task-title" :class="{ 'single-line': isSingleLine(task.taskTitle) }">{{ task.taskTitle || '未命名任务' }}</view>
|
||||
<view class="task-status" :class="getStatusClass(task.state)">
|
||||
{{ getStatusText(task.state) }}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 置顶标识 -->
|
||||
<view v-if="task.ownRank === 1" class="top-badge">
|
||||
<uni-icons type="arrow-up" size="12" color="#ff9500"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
</uni-swipe-action-item>
|
||||
</uni-swipe-action>
|
||||
</view>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<view v-if="taskList.length === 0 && !loading" class="empty-state">
|
||||
<u-empty :text="config.emptyText || '暂无任务'" mode="list"></u-empty>
|
||||
</view>
|
||||
|
||||
<!-- 加载更多 -->
|
||||
<u-load-more
|
||||
:status="loadMoreStatus"
|
||||
@loadmore="$emit('loadMore')"
|
||||
></u-load-more>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'TaskList',
|
||||
props: {
|
||||
// 任务列表数据
|
||||
taskList: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
// 加载状态
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 加载更多状态
|
||||
loadMoreStatus: {
|
||||
type: String,
|
||||
default: 'more' // more, loading, noMore
|
||||
},
|
||||
// 配置对象
|
||||
config: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
showCheckbox: true, // 是否显示checkbox
|
||||
canComplete: true, // 是否可以完成任务
|
||||
canDelete: true, // 是否可以删除任务
|
||||
canTop: true, // 是否可以置顶任务
|
||||
emptyText: '暂无任务', // 空状态文本
|
||||
detailPage: '/pages/workbench/task/reportTaskDetail' // 详情页面路径
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
checkboxStates: {} // 存储checkbox的状态
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 获取左划操作选项
|
||||
getSwipeOptions(task) {
|
||||
const options = []
|
||||
// 置顶功能
|
||||
if (this.config.canTop) {
|
||||
if (task.ownRank === 1) {
|
||||
// 已置顶，显示取消置顶
|
||||
options.push({
|
||||
text: '取消置顶',
|
||||
style: {
|
||||
backgroundColor: '#999',
|
||||
color: '#fff'
|
||||
}
|
||||
})
|
||||
} else {
|
||||
// 未置顶，显示置顶
|
||||
options.push({
|
||||
text: '置顶',
|
||||
style: {
|
||||
backgroundColor: '#ff9500',
|
||||
color: '#fff'
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 删除功能
|
||||
if (this.config.canDelete) {
|
||||
options.push({
|
||||
text: '删除',
|
||||
style: {
|
||||
backgroundColor: '#ff4757',
|
||||
color: '#fff'
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
return options
|
||||
},
|
||||
|
||||
// 处理左划操作点击
|
||||
handleSwipeClick(e, index) {
|
||||
const { content, position } = e
|
||||
|
||||
if (!content) {
|
||||
console.error('Invalid swipe event:', e)
|
||||
return
|
||||
}
|
||||
|
||||
const task = this.taskList[index]
|
||||
if (!task) {
|
||||
console.error('Task not found at index:', index)
|
||||
return
|
||||
}
|
||||
|
||||
if (content.text === '置顶') {
|
||||
this.$emit('setTaskTop', task, 1)
|
||||
} else if (content.text === '取消置顶') {
|
||||
this.$emit('setTaskTop', task, 0)
|
||||
} else if (content.text === '删除') {
|
||||
this.$emit('deleteTask', task)
|
||||
}
|
||||
},
|
||||
|
||||
// 处理任务完成
|
||||
handleTaskComplete(task) {
|
||||
if (!this.config.canComplete) return
|
||||
|
||||
console.log('handleTaskComplete called, task:', task)
|
||||
console.log('task.status:', task.status, 'task.state:', task.state)
|
||||
|
||||
// 只有单任务（status为0）且状态为0（进行中）的任务才能完成
|
||||
if (task.status !== 0 || task.state !== 0) {
|
||||
console.log('Task cannot be completed, status:', task.status, 'state:', task.state)
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '该任务当前状态无法完成',
|
||||
showCancel: false
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
// 先设置checkbox为选中状态
|
||||
this.$set(this.checkboxStates, task.taskId, true)
|
||||
|
||||
console.log('Showing confirmation modal')
|
||||
uni.showModal({
|
||||
title: '确认完成',
|
||||
content: `确定要将任务"${task.taskTitle}"标记为完成吗？`,
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
this.$emit('completeTask', task)
|
||||
// 清除checkbox状态
|
||||
this.$set(this.checkboxStates, task.taskId, false)
|
||||
} else {
|
||||
// 用户取消，重置checkbox状态为false
|
||||
console.log('用户取消，重置checkbox状态')
|
||||
this.$set(this.checkboxStates, task.taskId, false)
|
||||
console.log('checkbox状态已重置:', this.checkboxStates[task.taskId])
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 跳转到任务详情页面
|
||||
handleTaskClick(task) {
|
||||
this.$emit('taskClick', task)
|
||||
},
|
||||
|
||||
// 获取状态文本
|
||||
getStatusText(state) {
|
||||
const statusMap = {
|
||||
15: '申请延期',
|
||||
0: '进行中',
|
||||
1: '完成等待评分',
|
||||
2: '完成'
|
||||
}
|
||||
return statusMap[state] || '未知状态'
|
||||
},
|
||||
|
||||
// 获取状态样式类
|
||||
getStatusClass(state) {
|
||||
const classMap = {
|
||||
15: 'status-pending',
|
||||
0: 'status-processing',
|
||||
1: 'status-waiting',
|
||||
2: 'status-completed'
|
||||
}
|
||||
return classMap[state] || 'status-unknown'
|
||||
},
|
||||
|
||||
// 判断是否为单行文字
|
||||
isSingleLine(text) {
|
||||
if (!text) return true
|
||||
// 估算文字长度，假设每个中文字符约等于2个英文字符
|
||||
const estimatedLength = text.replace(/[\u4e00-\u9fa5]/g, 'aa').length
|
||||
// 如果估算长度小于等于20个字符，认为是单行
|
||||
return estimatedLength <= 20
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.task-list-container {
|
||||
min-height: 100vh;
|
||||
background-color: #f5f5f5;
|
||||
padding-bottom: 120rpx;
|
||||
}
|
||||
|
||||
.task-list {
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
.task-item {
|
||||
box-sizing: border-box;
|
||||
padding: 24rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.task-checkbox {
|
||||
margin-right: 20rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.checkbox-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.custom-checkbox {
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
border: 2rpx solid #ddd;
|
||||
border-radius: 6rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #fff;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&.checked {
|
||||
background-color: #ff9500;
|
||||
border-color: #ff9500;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
background-color: #f5f5f5;
|
||||
border-color: #ddd;
|
||||
}
|
||||
}
|
||||
|
||||
.task-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.task-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
flex: 1;
|
||||
margin-right: 20rpx;
|
||||
line-height: 1.4;
|
||||
height: 88rpx; /* 固定高度 */
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
/* 单行文字时垂直居中 */
|
||||
&.single-line {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
-webkit-line-clamp: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.task-status {
|
||||
padding: 8rpx 16rpx;
|
||||
border-radius: 20rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
box-shadow: 0 1rpx 3rpx rgba(0, 0, 0, 0.1);
|
||||
|
||||
&.status-pending {
|
||||
background-color: #fff2e8;
|
||||
color: #fa8c16;
|
||||
}
|
||||
|
||||
&.status-processing {
|
||||
background-color: #e6f7ff;
|
||||
color: #1890ff;
|
||||
}
|
||||
|
||||
&.status-waiting {
|
||||
background-color: #fff7e6;
|
||||
color: #fa8c16;
|
||||
}
|
||||
|
||||
&.status-completed {
|
||||
background-color: #f6ffed;
|
||||
color: #52c41a;
|
||||
}
|
||||
}
|
||||
|
||||
.top-badge {
|
||||
position: absolute;
|
||||
top: 8rpx;
|
||||
right: 8rpx;
|
||||
background-color: #fff8e6;
|
||||
border: 1rpx solid #ff9500;
|
||||
border-radius: 50%;
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 2rpx 6rpx rgba(255, 149, 0, 0.2);
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
padding: 100rpx 20rpx;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
1211
pages/workbench/task/create.vue
Normal file
1211
pages/workbench/task/create.vue
Normal file
File diff suppressed because it is too large
Load Diff
654
pages/workbench/task/reportTaskDetail.vue
Normal file
654
pages/workbench/task/reportTaskDetail.vue
Normal file
@@ -0,0 +1,654 @@
|
||||
<template>
|
||||
<view class="detail-container">
|
||||
<view v-if="loading" class="loading"><u-loading mode="circle" text="加载中..." /></view>
|
||||
<view v-else-if="taskDetail">
|
||||
<!-- 任务标题 -->
|
||||
<view class="title">{{ taskDetail.taskTitle }}</view>
|
||||
|
||||
<!-- 基本信息 -->
|
||||
<view class="section-title">基本信息</view>
|
||||
<view class="info-grid">
|
||||
<view class="info-item">
|
||||
<text class="label">任务状态：</text>
|
||||
<text class="value status-tag" :class="getStatusClass(taskDetail.state)">
|
||||
{{ getStatusText(taskDetail.state) }}
|
||||
</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="label">优先级：</text>
|
||||
<text class="value priority-tag" :class="getPriorityClass(taskDetail.taskRank)">
|
||||
{{ getPriorityText(taskDetail.taskRank) }}
|
||||
</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="label">负责人：</text>
|
||||
<text class="value">{{ taskDetail.workerNickName || '-' }}</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="label">创建人：</text>
|
||||
<text class="value">{{ taskDetail.createUserNickName || '-' }}</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="label">所属项目：</text>
|
||||
<text class="value">{{ taskDetail.projectName || '-' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 时间信息 -->
|
||||
<view class="section-title">时间信息</view>
|
||||
<view class="info-grid">
|
||||
<view class="info-item">
|
||||
<text class="label">开始时间：</text>
|
||||
<text class="value">{{ formatDate(taskDetail.beginTime) }}</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="label">结束时间：</text>
|
||||
<text class="value">{{ formatDate(taskDetail.finishTime) }}</text>
|
||||
</view>
|
||||
<view class="info-item" v-if="taskDetail.overDays > 0">
|
||||
<text class="label">超期天数：</text>
|
||||
<text class="value over-days">{{ taskDetail.overDays }}天</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="label">创建时间：</text>
|
||||
<text class="value">{{ formatDate(taskDetail.createTime) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 任务描述 -->
|
||||
<view class="section-title">任务描述</view>
|
||||
<view v-if="taskDetail.content" class="content-text">{{ taskDetail.content }}</view>
|
||||
<view v-else class="empty-content">暂无任务描述</view>
|
||||
|
||||
<!-- 备注 -->
|
||||
<view v-if="taskDetail.remark" class="section-title">备注</view>
|
||||
<view v-if="taskDetail.remark" class="content-text">{{ taskDetail.remark }}</view>
|
||||
|
||||
<!-- 报工进度（仅报工任务显示） -->
|
||||
<view v-if="isReportTask" class="section-title">报工进度</view>
|
||||
<view v-if="isReportTask && taskDetail.taskItemVoList && taskDetail.taskItemVoList.length">
|
||||
<view v-for="item in taskDetail.taskItemVoList" :key="item.itemId" class="item-block">
|
||||
<view class="item-row"><text class="item-label">进度时间：</text>{{ item.signTime || '-' }}</view>
|
||||
<view class="item-row"><text class="item-label">进度区间：</text>{{ item.beginTime || '-' }} ~ {{ item.endTime || '-' }}</view>
|
||||
<view class="item-row"><text class="item-label">进度内容：</text></view>
|
||||
<mp-html v-if="item.content" :content="item.content" />
|
||||
<view class="item-row"><text class="item-label">完成时间：</text>{{ item.completedTime || '-' }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="isReportTask && (!taskDetail.taskItemVoList || taskDetail.taskItemVoList.length === 0)" class="empty-progress">
|
||||
暂无报工进度
|
||||
</view>
|
||||
|
||||
<!-- 附件展示 -->
|
||||
<view v-if="taskDetail.accessory" class="section-title">附件</view>
|
||||
<view v-if="taskDetail.accessory" class="attachment-list">
|
||||
<view
|
||||
v-for="(file, index) in attachmentFiles"
|
||||
:key="`${file.ossId}_${index}`"
|
||||
class="attachment-item"
|
||||
@click="downloadFile(file)"
|
||||
>
|
||||
<view class="file-icon">
|
||||
<u-icon :name="getFileIcon(file.originalName)" size="24" color="#007aff"></u-icon>
|
||||
</view>
|
||||
<view class="file-info">
|
||||
<text class="file-name">{{ getFileName(file.originalName) }}</text>
|
||||
<text class="file-size">{{ formatFileSize(file.fileSize) }}</text>
|
||||
</view>
|
||||
<view class="file-action">
|
||||
<u-icon name="download" size="20" color="#007aff"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="taskDetail.accessory && attachmentFiles.length === 0" class="no-attachment">
|
||||
暂无附件
|
||||
</view>
|
||||
|
||||
<!-- 新增报工按钮（仅报工任务显示） -->
|
||||
<u-button v-if="isReportTask" type="primary" class="add-btn" @click="openAddPopup">新增报工</u-button>
|
||||
|
||||
<!-- 新增报工弹窗（仅报工任务显示） -->
|
||||
<uni-popup v-if="isReportTask" ref="addPopup" type="bottom" :mask-click="true">
|
||||
<view class="add-dialog-bottom">
|
||||
<view class="dialog-title">新增报工</view>
|
||||
<u-form :model="addForm" ref="addFormRef">
|
||||
<u-form-item label="进度区间">
|
||||
<view class="period-row">{{ addForm.beginTime }} ~ {{ addForm.endTime }}</view>
|
||||
</u-form-item>
|
||||
<u-form-item label="进度时间">
|
||||
<view class="period-row">{{ addForm.signTime }}</view>
|
||||
</u-form-item>
|
||||
<u-form-item label="完成时间">
|
||||
<view class="period-row">{{ addForm.completedTime }}</view>
|
||||
</u-form-item>
|
||||
<u-form-item label="进度内容">
|
||||
<u-textarea v-model="addForm.content" placeholder="请输入进度内容" autoHeight />
|
||||
</u-form-item>
|
||||
<u-form-item label="备注">
|
||||
<u-textarea v-model="addForm.remark" placeholder="备注（可选）" autoHeight />
|
||||
</u-form-item>
|
||||
</u-form>
|
||||
<view class="dialog-actions">
|
||||
<u-button type="primary" @click="submitAdd">提交</u-button>
|
||||
<u-button @click="$refs.addPopup.close()">取消</u-button>
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</view>
|
||||
<view v-else class="empty">未查询到任务详情</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getTask } from '@/api/oa/task.js'
|
||||
import { addOaTaskItem } from '@/api/oa/taskItem.js'
|
||||
import { getFilesByIds } from '@/api/common/upload.js'
|
||||
import mpHtml from 'uni_modules/mp-html/components/mp-html/mp-html.vue'
|
||||
|
||||
export default {
|
||||
components: { mpHtml },
|
||||
data() {
|
||||
return {
|
||||
taskDetail: null,
|
||||
loading: true,
|
||||
attachmentFiles: [],
|
||||
addForm: {
|
||||
beginTime: '',
|
||||
endTime: '',
|
||||
content: '',
|
||||
remark: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 判断是否为报工任务
|
||||
isReportTask() {
|
||||
return this.taskDetail && this.taskDetail.status == 1
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
const taskId = options.id
|
||||
if (taskId) {
|
||||
this.taskId = taskId
|
||||
this.fetchDetail(taskId)
|
||||
} else {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async fetchDetail(taskId) {
|
||||
this.loading = true
|
||||
try {
|
||||
const res = await getTask(taskId)
|
||||
if (res.code === 200 && res.data) {
|
||||
this.taskDetail = res.data
|
||||
|
||||
// 加载附件信息
|
||||
if (res.data.accessory) {
|
||||
await this.loadAttachmentFiles(res.data.accessory)
|
||||
} else {
|
||||
this.attachmentFiles = []
|
||||
}
|
||||
} else {
|
||||
uni.showToast({ title: res.msg || '获取详情失败', icon: 'none' })
|
||||
}
|
||||
} catch (e) {
|
||||
uni.showToast({ title: '网络错误', icon: 'none' })
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
openAddPopup() {
|
||||
// 自动获取进度区间
|
||||
let begin = '', end = '';
|
||||
const items = this.taskDetail?.taskItemVoList || [];
|
||||
if (items.length > 0) {
|
||||
// 取最后一个item的endTime为下一个周期的beginTime
|
||||
const last = items[items.length - 1];
|
||||
begin = last.endTime || this.taskDetail.beginTime;
|
||||
// 结束时间=begin+timeGap天
|
||||
const gap = this.taskDetail.timeGap || 7;
|
||||
const bDate = new Date(begin.replace(/-/g, '/'));
|
||||
bDate.setDate(bDate.getDate() + gap);
|
||||
end = bDate.getFullYear() + '-' + String(bDate.getMonth() + 1).padStart(2, '0') + '-' + String(bDate.getDate()).padStart(2, '0');
|
||||
} else {
|
||||
begin = this.taskDetail.beginTime;
|
||||
end = this.taskDetail.finishTime;
|
||||
}
|
||||
// 进度时间=beginTime，完成时间=当天
|
||||
const today = new Date();
|
||||
const todayStr = today.getFullYear() + '-' + String(today.getMonth() + 1).padStart(2, '0') + '-' + String(today.getDate()).padStart(2, '0');
|
||||
this.addForm = {
|
||||
beginTime: begin,
|
||||
endTime: end,
|
||||
signTime: begin,
|
||||
completedTime: todayStr,
|
||||
content: '',
|
||||
remark: ''
|
||||
};
|
||||
this.$refs.addPopup.open();
|
||||
},
|
||||
async submitAdd() {
|
||||
if (!this.addForm.beginTime || !this.addForm.endTime || !this.addForm.content) {
|
||||
uni.showToast({ title: '请填写进度内容', icon: 'none' })
|
||||
return
|
||||
}
|
||||
const data = {
|
||||
taskId: this.taskId,
|
||||
beginTime: this.addForm.beginTime,
|
||||
endTime: this.addForm.endTime,
|
||||
signTime: this.addForm.signTime,
|
||||
completedTime: this.addForm.completedTime,
|
||||
content: this.addForm.content,
|
||||
remark: this.addForm.remark || null,
|
||||
status: 0
|
||||
}
|
||||
try {
|
||||
const res = await addOaTaskItem(data)
|
||||
if (res.code === 200) {
|
||||
uni.showToast({ title: '新增报工成功', icon: 'success' })
|
||||
this.$refs.addPopup.close()
|
||||
this.addForm = { beginTime: '', endTime: '', signTime: '', completedTime: '', content: '', remark: '' }
|
||||
this.fetchDetail(this.taskId)
|
||||
} else {
|
||||
uni.showToast({ title: res.msg || '新增失败', icon: 'none' })
|
||||
}
|
||||
} catch (e) {
|
||||
uni.showToast({ title: '网络错误', icon: 'none' })
|
||||
}
|
||||
},
|
||||
|
||||
// 加载附件文件信息
|
||||
async loadAttachmentFiles(accessory) {
|
||||
try {
|
||||
const ossIds = accessory.split(',').filter(id => id.trim())
|
||||
if (ossIds.length > 0) {
|
||||
const files = await getFilesByIds(ossIds)
|
||||
this.attachmentFiles = files || []
|
||||
} else {
|
||||
this.attachmentFiles = []
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载附件失败:', error)
|
||||
this.attachmentFiles = []
|
||||
}
|
||||
},
|
||||
|
||||
// 下载文件
|
||||
downloadFile(file) {
|
||||
// 使用uni.downloadFile下载文件
|
||||
uni.downloadFile({
|
||||
url: file.url,
|
||||
success: (res) => {
|
||||
if (res.statusCode === 200) {
|
||||
// 保存文件到本地
|
||||
uni.saveFile({
|
||||
tempFilePath: res.tempFilePath,
|
||||
success: (saveRes) => {
|
||||
uni.showToast({
|
||||
title: '文件已保存到本地',
|
||||
icon: 'success'
|
||||
})
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error('保存文件失败:', err)
|
||||
uni.showToast({
|
||||
title: '保存文件失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error('下载文件失败:', err)
|
||||
uni.showToast({
|
||||
title: '下载文件失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 获取文件图标
|
||||
getFileIcon(fileName) {
|
||||
const ext = fileName.split('.').pop().toLowerCase()
|
||||
const iconMap = {
|
||||
'pdf': 'file-text',
|
||||
'doc': 'file-text',
|
||||
'docx': 'file-text',
|
||||
'xls': 'file-text',
|
||||
'xlsx': 'file-text',
|
||||
'ppt': 'file-text',
|
||||
'pptx': 'file-text',
|
||||
'txt': 'file-text',
|
||||
'jpg': 'file-text',
|
||||
'jpeg': 'file-text',
|
||||
'png': 'file-text',
|
||||
'gif': 'file-text',
|
||||
'zip': 'folder',
|
||||
'rar': 'folder',
|
||||
'7z': 'folder',
|
||||
'dwg': 'file-text'
|
||||
}
|
||||
return iconMap[ext] || 'file-text'
|
||||
},
|
||||
|
||||
// 获取文件名
|
||||
getFileName(fileName) {
|
||||
if (!fileName) return ''
|
||||
const name = fileName.includes('/') ? fileName.split('/').pop() : fileName
|
||||
// 如果文件名超过20个字符，截取前17个字符并添加省略号
|
||||
if (name.length > 20) {
|
||||
return name.substring(0, 17) + '...'
|
||||
}
|
||||
return name
|
||||
},
|
||||
|
||||
// 格式化文件大小
|
||||
formatFileSize(size) {
|
||||
if (!size) return ''
|
||||
if (size < 1024) {
|
||||
return size + 'B'
|
||||
} else if (size < 1024 * 1024) {
|
||||
return (size / 1024).toFixed(2) + 'KB'
|
||||
} else {
|
||||
return (size / (1024 * 1024)).toFixed(2) + 'MB'
|
||||
}
|
||||
},
|
||||
|
||||
// 格式化日期
|
||||
formatDate(dateStr) {
|
||||
if (!dateStr) return '未设置'
|
||||
const date = new Date(dateStr)
|
||||
return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
|
||||
},
|
||||
|
||||
// 获取状态文本
|
||||
getStatusText(state) {
|
||||
const statusMap = {
|
||||
15: '申请延期',
|
||||
0: '进行中',
|
||||
1: '完成等待评分',
|
||||
2: '完成'
|
||||
}
|
||||
return statusMap[state] || '未知状态'
|
||||
},
|
||||
|
||||
// 获取状态样式类
|
||||
getStatusClass(state) {
|
||||
const classMap = {
|
||||
15: 'status-pending',
|
||||
0: 'status-processing',
|
||||
1: 'status-waiting',
|
||||
2: 'status-completed'
|
||||
}
|
||||
return classMap[state] || 'status-unknown'
|
||||
},
|
||||
|
||||
// 获取优先级文本
|
||||
getPriorityText(priority) {
|
||||
const priorityMap = {
|
||||
0: '普通',
|
||||
1: '低',
|
||||
2: '中',
|
||||
3: '高',
|
||||
4: '紧急'
|
||||
}
|
||||
return priorityMap[priority] || '未设置'
|
||||
},
|
||||
|
||||
// 获取优先级样式类
|
||||
getPriorityClass(priority) {
|
||||
const classMap = {
|
||||
0: 'priority-normal',
|
||||
1: 'priority-low',
|
||||
2: 'priority-medium',
|
||||
3: 'priority-high',
|
||||
4: 'priority-urgent'
|
||||
}
|
||||
return classMap[priority] || 'priority-unknown'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.detail-container {
|
||||
padding: 32rpx;
|
||||
}
|
||||
.title {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
.row {
|
||||
font-size: 28rpx;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
.label {
|
||||
color: #888;
|
||||
}
|
||||
.section-title {
|
||||
margin-top: 32rpx;
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
.item-block {
|
||||
background: #f8f9fa;
|
||||
border-radius: 12rpx;
|
||||
padding: 20rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
.item-row {
|
||||
font-size: 26rpx;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
.item-label {
|
||||
color: #666;
|
||||
}
|
||||
.empty-progress, .empty {
|
||||
text-align: center;
|
||||
color: #bbb;
|
||||
margin: 40rpx 0;
|
||||
}
|
||||
.loading {
|
||||
text-align: center;
|
||||
margin: 80rpx 0;
|
||||
}
|
||||
.add-btn {
|
||||
margin-top: 40rpx;
|
||||
width: 100%;
|
||||
}
|
||||
.add-dialog-bottom {
|
||||
background: #fff;
|
||||
border-radius: 24rpx 24rpx 0 0;
|
||||
padding: 40rpx 32rpx 32rpx 32rpx;
|
||||
width: 100vw;
|
||||
max-width: 750rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.dialog-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
margin-bottom: 32rpx;
|
||||
text-align: center;
|
||||
}
|
||||
.dialog-actions {
|
||||
display: flex;
|
||||
gap: 24rpx;
|
||||
margin-top: 32rpx;
|
||||
justify-content: center;
|
||||
}
|
||||
.period-row {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
padding: 12rpx 0 12rpx 8rpx;
|
||||
}
|
||||
|
||||
.attachment-list {
|
||||
margin-top: 16rpx;
|
||||
}
|
||||
|
||||
.attachment-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20rpx;
|
||||
background-color: #f8f9fa;
|
||||
border-radius: 8rpx;
|
||||
margin-bottom: 16rpx;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.attachment-item:hover {
|
||||
background-color: #e9ecef;
|
||||
}
|
||||
|
||||
.file-icon {
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
|
||||
.file-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.file-name {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
margin-bottom: 8rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
max-width: 400rpx;
|
||||
}
|
||||
|
||||
.file-size {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.file-action {
|
||||
margin-left: 16rpx;
|
||||
}
|
||||
|
||||
.no-attachment {
|
||||
text-align: center;
|
||||
color: #999;
|
||||
font-size: 28rpx;
|
||||
padding: 40rpx 0;
|
||||
}
|
||||
|
||||
.info-grid {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16rpx;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 28rpx;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.info-item .label {
|
||||
color: #666;
|
||||
width: 160rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.info-item .value {
|
||||
color: #333;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.content-text {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
line-height: 1.6;
|
||||
background-color: #f8f9fa;
|
||||
padding: 20rpx;
|
||||
border-radius: 12rpx;
|
||||
border-left: 4rpx solid #1890ff;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.empty-content {
|
||||
text-align: center;
|
||||
color: #999;
|
||||
font-size: 28rpx;
|
||||
padding: 40rpx 0;
|
||||
background-color: #f8f9fa;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
|
||||
.status-tag {
|
||||
padding: 4rpx 12rpx;
|
||||
border-radius: 12rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.status-pending {
|
||||
background-color: #fff2e8;
|
||||
color: #fa8c16;
|
||||
}
|
||||
|
||||
.status-processing {
|
||||
background-color: #e6f7ff;
|
||||
color: #1890ff;
|
||||
}
|
||||
|
||||
.status-waiting {
|
||||
background-color: #fff7e6;
|
||||
color: #fa8c16;
|
||||
}
|
||||
|
||||
.status-completed {
|
||||
background-color: #f6ffed;
|
||||
color: #52c41a;
|
||||
}
|
||||
|
||||
.priority-tag {
|
||||
padding: 4rpx 12rpx;
|
||||
border-radius: 12rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.priority-normal {
|
||||
background-color: #f5f5f5;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.priority-low {
|
||||
background-color: #f6ffed;
|
||||
color: #52c41a;
|
||||
}
|
||||
|
||||
.priority-medium {
|
||||
background-color: #fff7e6;
|
||||
color: #fa8c16;
|
||||
}
|
||||
|
||||
.priority-high {
|
||||
background-color: #fff2f0;
|
||||
color: #ff4d4f;
|
||||
}
|
||||
|
||||
.priority-urgent {
|
||||
background-color: #f9f0ff;
|
||||
color: #722ed1;
|
||||
}
|
||||
|
||||
.over-days {
|
||||
color: #ff4d4f;
|
||||
font-weight: 600;
|
||||
}
|
||||
</style>
|
||||
556
pages/workbench/task/task.vue
Normal file
556
pages/workbench/task/task.vue
Normal file
@@ -0,0 +1,556 @@
|
||||
<template>
|
||||
<view class="task-container">
|
||||
<!-- 搜索栏 -->
|
||||
<view class="search-bar">
|
||||
<view class="search-container">
|
||||
<view class="filter-button" @click="toggleFilterPanel">
|
||||
<uni-icons type="gear" size="20" color="#666"></uni-icons>
|
||||
</view>
|
||||
<view class="search-input">
|
||||
<u-search
|
||||
v-model="searchKeyword"
|
||||
placeholder="搜索任务名称"
|
||||
:show-action="false"
|
||||
@search="handleSearch"
|
||||
@clear="handleClear"
|
||||
></u-search>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 筛选面板 -->
|
||||
<view v-if="showFilterPanel" class="filter-panel">
|
||||
<view class="filter-title">任务类型</view>
|
||||
<view class="filter-options">
|
||||
<view
|
||||
class="filter-option"
|
||||
:class="{ 'active': taskType === 'received' }"
|
||||
@click="switchTaskType('received')"
|
||||
>
|
||||
<uni-icons type="checkmarkempty" v-if="taskType === 'received'" size="16" color="#ff9500"></uni-icons>
|
||||
<text>发布给我的任务</text>
|
||||
</view>
|
||||
<view
|
||||
class="filter-option"
|
||||
:class="{ 'active': taskType === 'published' }"
|
||||
@click="switchTaskType('published')"
|
||||
>
|
||||
<uni-icons type="checkmarkempty" v-if="taskType === 'published'" size="16" color="#ff9500"></uni-icons>
|
||||
<text>我发布的任务</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 任务列表组件 -->
|
||||
<TaskList
|
||||
:task-list="taskList"
|
||||
:loading="loading"
|
||||
:load-more-status="loadMoreStatus"
|
||||
:config="taskListConfig"
|
||||
@setTaskTop="handleSetTaskTop"
|
||||
@deleteTask="handleDeleteTask"
|
||||
@completeTask="handleCompleteTask"
|
||||
@taskClick="handleTaskClick"
|
||||
@loadMore="handleLoadMore"
|
||||
/>
|
||||
|
||||
<!-- 悬浮按钮 -->
|
||||
<view class="fab-button" @click="createTask">
|
||||
<u-icon name="plus" color="#fff" size="24"></u-icon>
|
||||
</view>
|
||||
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TaskList from './components/TaskList.vue'
|
||||
import { listTaskWork, listTaskCreate, delTask, updateTask } from '@/api/oa/task.js'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TaskList
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
searchKeyword: '',
|
||||
showFilterPanel: false, // 是否显示筛选面板
|
||||
taskType: 'received', // 任务类型：received-发布给我的任务, published-我发布的任务
|
||||
taskList: [], // 任务列表数据
|
||||
loading: false, // 加载状态
|
||||
loadMoreStatus: 'more', // 加载更多状态
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
taskTitle: ''
|
||||
},
|
||||
total: 0, // 总数量
|
||||
taskListConfig: {
|
||||
showCheckbox: true, // 是否显示checkbox
|
||||
canComplete: true, // 是否可以完成任务
|
||||
canDelete: false, // 是否可以删除任务
|
||||
canTop: true, // 是否可以置顶任务
|
||||
emptyText: '暂无发布给我的任务', // 空状态文本
|
||||
detailPage: '/pages/workbench/task/reportTaskDetail' // 详情页面路径
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
onLoad() {
|
||||
this.loadTaskList()
|
||||
},
|
||||
|
||||
onPullDownRefresh() {
|
||||
this.refreshList()
|
||||
uni.stopPullDownRefresh()
|
||||
},
|
||||
|
||||
onReachBottom() {
|
||||
this.handleLoadMore()
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 加载任务列表
|
||||
async loadTaskList() {
|
||||
if (this.loading) return
|
||||
|
||||
this.loading = true
|
||||
try {
|
||||
const params = {
|
||||
...this.queryParams
|
||||
}
|
||||
|
||||
let response
|
||||
// 根据任务类型调用不同的API
|
||||
if (this.taskType === 'received') {
|
||||
// 发布给我的任务
|
||||
response = await listTaskWork(params)
|
||||
} else if (this.taskType === 'published') {
|
||||
// 我发布的任务
|
||||
response = await listTaskCreate(params)
|
||||
}
|
||||
|
||||
if (response.code === 200) {
|
||||
const { rows, total } = response
|
||||
|
||||
if (this.queryParams.pageNum === 1) {
|
||||
this.taskList = rows || []
|
||||
} else {
|
||||
this.taskList = [...this.taskList, ...(rows || [])]
|
||||
}
|
||||
|
||||
this.total = total
|
||||
this.updateLoadMoreStatus(rows, total)
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: response.msg || '获取任务列表失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载任务列表失败:', error)
|
||||
uni.showToast({
|
||||
title: '网络错误，请重试',
|
||||
icon: 'none'
|
||||
})
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
|
||||
// 刷新列表
|
||||
refreshList() {
|
||||
this.queryParams.pageNum = 1
|
||||
this.loadTaskList()
|
||||
},
|
||||
|
||||
// 更新加载更多状态
|
||||
updateLoadMoreStatus(rows, total) {
|
||||
const currentTotal = this.taskList.length
|
||||
if (currentTotal >= total) {
|
||||
this.loadMoreStatus = 'noMore'
|
||||
} else if (rows && rows.length < this.queryParams.pageSize) {
|
||||
this.loadMoreStatus = 'noMore'
|
||||
} else {
|
||||
this.loadMoreStatus = 'more'
|
||||
}
|
||||
},
|
||||
|
||||
// 搜索
|
||||
handleSearch() {
|
||||
this.queryParams.taskTitle = this.searchKeyword
|
||||
this.queryParams.pageNum = 1
|
||||
this.loadTaskList()
|
||||
},
|
||||
|
||||
// 清除搜索
|
||||
handleClear() {
|
||||
this.searchKeyword = ''
|
||||
this.queryParams.taskTitle = ''
|
||||
this.queryParams.pageNum = 1
|
||||
this.loadTaskList()
|
||||
},
|
||||
|
||||
// 切换筛选面板
|
||||
toggleFilterPanel() {
|
||||
this.showFilterPanel = !this.showFilterPanel
|
||||
},
|
||||
|
||||
// 切换任务类型
|
||||
switchTaskType(type) {
|
||||
if (this.taskType === type) return
|
||||
|
||||
this.taskType = type
|
||||
this.showFilterPanel = false // 选择后关闭面板
|
||||
|
||||
// 重置搜索和分页
|
||||
this.searchKeyword = ''
|
||||
this.queryParams.pageNum = 1
|
||||
this.queryParams.taskTitle = ''
|
||||
|
||||
// 根据任务类型更新配置
|
||||
if (type === 'received') {
|
||||
// 发布给我的任务：可以完成、可以置顶、不能删除
|
||||
this.taskListConfig = {
|
||||
showCheckbox: true,
|
||||
canComplete: true,
|
||||
canDelete: false,
|
||||
canTop: true,
|
||||
emptyText: '暂无发布给我的任务',
|
||||
detailPage: '/pages/workbench/task/reportTaskDetail'
|
||||
}
|
||||
} else if (type === 'published') {
|
||||
// 我发布的任务：不能完成、不能置顶、可以删除
|
||||
this.taskListConfig = {
|
||||
showCheckbox: false,
|
||||
canComplete: false,
|
||||
canDelete: true,
|
||||
canTop: false,
|
||||
emptyText: '暂无我发布的任务',
|
||||
detailPage: '/pages/workbench/task/reportTaskDetail'
|
||||
}
|
||||
}
|
||||
|
||||
// 重新加载数据
|
||||
this.loadTaskList()
|
||||
},
|
||||
|
||||
// 创建任务
|
||||
createTask() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/workbench/task/create'
|
||||
})
|
||||
},
|
||||
|
||||
// 任务点击
|
||||
handleTaskClick(task) {
|
||||
uni.navigateTo({
|
||||
url: `${this.taskListConfig.detailPage}?id=${task.taskId}`
|
||||
})
|
||||
},
|
||||
|
||||
// 加载更多
|
||||
handleLoadMore() {
|
||||
if (this.loadMoreStatus === 'noMore' || this.loading) return
|
||||
|
||||
this.queryParams.pageNum++
|
||||
this.loadTaskList()
|
||||
},
|
||||
|
||||
// 置顶/取消置顶任务
|
||||
async handleSetTaskTop(task, ownRank) {
|
||||
try {
|
||||
const response = await updateTask({
|
||||
taskId: task.taskId,
|
||||
ownRank: ownRank
|
||||
});
|
||||
if (response.code === 200) {
|
||||
uni.showToast({
|
||||
title: ownRank === 1 ? '置顶成功' : '取消置顶成功',
|
||||
icon: 'success'
|
||||
});
|
||||
this.refreshList();
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: response.msg || '操作失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
uni.showToast({
|
||||
title: '操作失败，请重试',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
// 删除任务
|
||||
async handleDeleteTask(task) {
|
||||
uni.showModal({
|
||||
title: '确认删除',
|
||||
content: `确定要删除任务"${task.taskTitle}"吗？`,
|
||||
success: async (res) => {
|
||||
if (res.confirm) {
|
||||
try {
|
||||
const response = await delTask(task.taskId);
|
||||
if (response.code === 200) {
|
||||
uni.showToast({
|
||||
title: '删除成功',
|
||||
icon: 'success'
|
||||
});
|
||||
this.refreshList();
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: response.msg || '删除失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
uni.showToast({
|
||||
title: '删除失败，请重试',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 完成任务
|
||||
async handleCompleteTask(task) {
|
||||
try {
|
||||
const response = await updateTask({
|
||||
taskId: task.taskId,
|
||||
state: 1,
|
||||
completedTime: new Date()
|
||||
});
|
||||
if (response.code === 200) {
|
||||
uni.showToast({
|
||||
title: '任务完成',
|
||||
icon: 'success'
|
||||
});
|
||||
this.refreshList();
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: response.msg || '操作失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
uni.showToast({
|
||||
title: '操作失败，请重试',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.task-container {
|
||||
min-height: 100vh;
|
||||
background-color: #f5f5f5;
|
||||
padding-bottom: 120rpx;
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
padding: 20rpx;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.search-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.filter-button {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
background-color: #f8f9fa;
|
||||
border-radius: 12rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1rpx solid #e9ecef;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.filter-panel {
|
||||
margin-top: 20rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 12rpx;
|
||||
padding: 24rpx;
|
||||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
|
||||
border: 1rpx solid #e9ecef;
|
||||
}
|
||||
|
||||
.filter-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.filter-options {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.filter-option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
padding: 20rpx;
|
||||
border-radius: 8rpx;
|
||||
background-color: #f8f9fa;
|
||||
border: 1rpx solid #e9ecef;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&.active {
|
||||
background-color: #fff8e6;
|
||||
border-color: #ff9500;
|
||||
}
|
||||
|
||||
text {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.task-list {
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
.task-item {
|
||||
box-sizing: border-box;
|
||||
padding: 24rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.task-checkbox {
|
||||
margin-right: 20rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.checkbox-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.custom-checkbox {
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
border: 2rpx solid #ddd;
|
||||
border-radius: 6rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #fff;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&.checked {
|
||||
background-color: #ff9500;
|
||||
border-color: #ff9500;
|
||||
}
|
||||
}
|
||||
|
||||
.task-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.task-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
flex: 1;
|
||||
margin-right: 20rpx;
|
||||
line-height: 1.4;
|
||||
height: 88rpx; /* 两行文字的高度：32rpx * 1.4 * 2 */
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.task-status {
|
||||
padding: 8rpx 16rpx;
|
||||
border-radius: 20rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
box-shadow: 0 1rpx 3rpx rgba(0, 0, 0, 0.1);
|
||||
|
||||
&.status-pending {
|
||||
background-color: #fff2e8;
|
||||
color: #fa8c16;
|
||||
}
|
||||
|
||||
&.status-processing {
|
||||
background-color: #e6f7ff;
|
||||
color: #1890ff;
|
||||
}
|
||||
|
||||
&.status-waiting {
|
||||
background-color: #fff7e6;
|
||||
color: #fa8c16;
|
||||
}
|
||||
|
||||
&.status-completed {
|
||||
background-color: #f6ffed;
|
||||
color: #52c41a;
|
||||
}
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
padding: 100rpx 20rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.fab-button {
|
||||
position: fixed;
|
||||
right: 40rpx;
|
||||
bottom: 40rpx;
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.4);
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.top-badge {
|
||||
position: absolute;
|
||||
top: 8rpx;
|
||||
right: 8rpx;
|
||||
background-color: #fff8e6;
|
||||
border: 1rpx solid #ff9500;
|
||||
border-radius: 50%;
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 2rpx 6rpx rgba(255, 149, 0, 0.2);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user