1236 lines
30 KiB
Vue
1236 lines
30 KiB
Vue
<template>
|
||
<view class="create-task-container">
|
||
<!-- 表单内容 -->
|
||
<view class="form-container">
|
||
<form @submit="submitForm">
|
||
<!-- 任务主题 -->
|
||
<view class="form-item">
|
||
<view class="form-label">
|
||
<text class="label-text">任务主题</text>
|
||
<text class="required">*</text>
|
||
</view>
|
||
<input
|
||
v-model="form.taskTitle"
|
||
class="form-input"
|
||
placeholder="请输入任务主题"
|
||
maxlength="100"
|
||
/>
|
||
</view>
|
||
|
||
<!-- 工作类型 -->
|
||
<view class="form-item">
|
||
<view class="form-label">
|
||
<text class="label-text">工作类型</text>
|
||
<text class="required">*</text>
|
||
</view>
|
||
<picker
|
||
@change="onTaskTypeChange"
|
||
:value="taskTypeIndex"
|
||
:range="taskTypeOptions"
|
||
range-key="label"
|
||
class="form-picker"
|
||
>
|
||
<view class="picker-text">
|
||
{{ taskTypeOptions[taskTypeIndex] ? taskTypeOptions[taskTypeIndex].label : '请选择工作类型' }}
|
||
</view>
|
||
</picker>
|
||
</view>
|
||
|
||
<!-- 任务模式 -->
|
||
<view class="form-item">
|
||
<view class="form-label">
|
||
<text class="label-text">任务模式</text>
|
||
</view>
|
||
<view class="radio-group">
|
||
<view
|
||
class="radio-item"
|
||
:class="{ active: form.status === 0 }"
|
||
@click="form.status = 0"
|
||
>
|
||
<view class="radio-circle"></view>
|
||
<text class="radio-text">单任务模式</text>
|
||
</view>
|
||
<view
|
||
class="radio-item"
|
||
:class="{ active: form.status === 1 }"
|
||
@click="form.status = 1"
|
||
>
|
||
<view class="radio-circle"></view>
|
||
<text class="radio-text">报工模式</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 报工周期 -->
|
||
<view class="form-item" v-if="form.status === 1">
|
||
<view class="form-label">
|
||
<text class="label-text">报工周期（天）</text>
|
||
</view>
|
||
<input
|
||
v-model="form.timeGap"
|
||
type="number"
|
||
class="form-input"
|
||
placeholder="请输入报工周期"
|
||
min="1"
|
||
max="10"
|
||
/>
|
||
</view>
|
||
|
||
<!-- 任务时间 -->
|
||
<view class="form-item">
|
||
<view class="form-label">
|
||
<text class="label-text">开始时间</text>
|
||
<text class="required">*</text>
|
||
</view>
|
||
<picker
|
||
mode="date"
|
||
@change="onBeginTimeChange"
|
||
class="form-picker"
|
||
>
|
||
<view class="picker-text">
|
||
{{ form.beginTime || '请选择开始时间' }}
|
||
</view>
|
||
</picker>
|
||
</view>
|
||
|
||
<view class="form-item" v-if="form.status === 0">
|
||
<view class="form-label">
|
||
<text class="label-text">结束时间</text>
|
||
<text class="required">*</text>
|
||
</view>
|
||
<picker
|
||
mode="date"
|
||
@change="onFinishTimeChange"
|
||
class="form-picker"
|
||
>
|
||
<view class="picker-text">
|
||
{{ form.finishTime || '请选择结束时间' }}
|
||
</view>
|
||
</picker>
|
||
</view>
|
||
|
||
<!-- 优先级 -->
|
||
<view class="form-item">
|
||
<view class="form-label">
|
||
<text class="label-text">优先级</text>
|
||
</view>
|
||
<view class="radio-group">
|
||
<view
|
||
class="radio-item"
|
||
:class="{ active: form.taskGrade === '0' }"
|
||
@click="form.taskGrade = '0'"
|
||
>
|
||
<view class="radio-circle"></view>
|
||
<text class="radio-text">一般</text>
|
||
</view>
|
||
<view
|
||
class="radio-item"
|
||
:class="{ active: form.taskGrade === '1' }"
|
||
@click="form.taskGrade = '1'"
|
||
>
|
||
<view class="radio-circle"></view>
|
||
<text class="radio-text">中等</text>
|
||
</view>
|
||
<view
|
||
class="radio-item"
|
||
:class="{ active: form.taskGrade === '2' }"
|
||
@click="form.taskGrade = '2'"
|
||
>
|
||
<view class="radio-circle"></view>
|
||
<text class="radio-text">紧急</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 关联项目 -->
|
||
<view class="form-item">
|
||
<view class="form-label">
|
||
<text class="label-text">关联项目</text>
|
||
</view>
|
||
<picker
|
||
@change="onProjectChange"
|
||
:value="projectIndex"
|
||
:range="projectList"
|
||
range-key="projectName"
|
||
class="form-picker"
|
||
>
|
||
<view class="picker-text">
|
||
{{ projectIndex === -1 ? '请选择项目' : projectList[projectIndex].projectName }}
|
||
</view>
|
||
</picker>
|
||
<view v-if="projectIndex !== -1" class="selected-project" style="margin-top: 10rpx;">
|
||
<text>{{ projectList[projectIndex].projectName }}</text>
|
||
<text class="remove-btn" @click="removeProject" style="color:#ff4757;margin-left:20rpx;">移除</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 执行人 -->
|
||
<view class="form-item">
|
||
<view class="form-label">
|
||
<text class="label-text">执行人</text>
|
||
<text class="required">*</text>
|
||
</view>
|
||
<!-- 已选用户标签 -->
|
||
<view v-if="selectedUsers.length > 0" class="user-tags">
|
||
<view v-for="user in selectedUsers" :key="user.userId" class="user-tag">
|
||
<text>{{ user.nickName }}</text>
|
||
<text class="remove-btn" @click="removeUser(user)">×</text>
|
||
</view>
|
||
</view>
|
||
<button type="primary" size="mini" @click="openUserPopup">点击选择</button>
|
||
<!-- 弹窗 -->
|
||
<uni-popup ref="userPopup" type="center">
|
||
<view class="user-select-popup">
|
||
<view class="popup-header">
|
||
<text>选择执行人</text>
|
||
<text class="close-btn" @click="closeUserPopup">×</text>
|
||
</view>
|
||
<!-- 新增：搜索框 -->
|
||
<view style="padding: 16rpx;">
|
||
<input
|
||
v-model="userSearchKeyword"
|
||
placeholder="请输入昵称搜索"
|
||
class="form-input"
|
||
style="width: 100%;"
|
||
/>
|
||
</view>
|
||
<scroll-view scroll-y class="user-list" style="height: 400rpx;">
|
||
<view
|
||
v-for="user in filteredUserList"
|
||
:key="user.userId"
|
||
class="user-row"
|
||
@click="toggleUser(user)"
|
||
>
|
||
<checkbox :checked="isSelected(user)" />
|
||
<text>{{ user.nickName }}</text>
|
||
<text class="user-dept">{{ user.deptName }}</text>
|
||
</view>
|
||
<!-- 新增：无匹配提示 -->
|
||
<view v-if="filteredUserList.length === 0" style="text-align:center;color:#999;padding:20rpx;">
|
||
暂无匹配用户
|
||
</view>
|
||
</scroll-view>
|
||
<view class="popup-footer">
|
||
<button type="primary" size="mini" @click="confirmUserSelect">确定</button>
|
||
</view>
|
||
</view>
|
||
</uni-popup>
|
||
</view>
|
||
|
||
<!-- 详细描述 -->
|
||
<view class="form-item">
|
||
<view class="form-label">
|
||
<text class="label-text">详细描述</text>
|
||
</view>
|
||
<textarea
|
||
v-model="form.content"
|
||
class="form-textarea"
|
||
placeholder="请输入详细描述"
|
||
maxlength="1000"
|
||
auto-height
|
||
/>
|
||
</view>
|
||
|
||
<!-- 附件 -->
|
||
<view class="form-item">
|
||
<view class="form-label">
|
||
<text class="label-text">附件</text>
|
||
</view>
|
||
<view class="file-upload">
|
||
<view class="upload-btn" @click="chooseFile">
|
||
<text class="upload-icon">+</text>
|
||
<text class="upload-text">选择文件</text>
|
||
</view>
|
||
|
||
<view class="file-list" v-if="fileList.length > 0">
|
||
<view
|
||
class="file-item"
|
||
v-for="(file, index) in fileList"
|
||
:key="index"
|
||
>
|
||
<text class="file-name">{{ file.name }}</text>
|
||
<text class="file-size">{{ formatFileSize(file.size) }}</text>
|
||
<text class="remove-file" @click="removeFile(index)">×</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 提交按钮 -->
|
||
<view class="submit-container">
|
||
<button
|
||
type="primary"
|
||
class="submit-btn"
|
||
:loading="loading"
|
||
@click="submitForm"
|
||
>
|
||
{{ loading ? '提交中...' : '提交' }}
|
||
</button>
|
||
</view>
|
||
</form>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { addTask } from '@/api/oa/task'
|
||
import { listProject } from '@/api/oa/project'
|
||
import { selectUser, deptTreeSelect } from '@/api/oa/user'
|
||
import { uploadFiles } from '@/api/common/upload'
|
||
|
||
export default {
|
||
name: 'CreateTask',
|
||
data() {
|
||
return {
|
||
loading: false,
|
||
form: {
|
||
taskTitle: '',
|
||
taskType: '',
|
||
status: 0,
|
||
timeGap: 3,
|
||
beginTime: '',
|
||
finishTime: '',
|
||
taskGrade: '0',
|
||
projectId: '',
|
||
workerIds: '',
|
||
content: '',
|
||
accessory: ''
|
||
},
|
||
taskTypeOptions: [
|
||
{ label: '技术审查', value: 1 },
|
||
{ label: '初步设计', value: 2 },
|
||
{ label: '图纸详细设计', value: 3 },
|
||
{ label: 'PLC程序设计', value: 4 },
|
||
{ label: '画面设计', value: 5 },
|
||
{ label: '调试（传动、打点、精度）', value: 6 },
|
||
{ label: '验收资料', value: 7 },
|
||
{ label: '验收报告/差旅记录', value: 8 },
|
||
{ label: '项目结项', value: 9 }
|
||
],
|
||
taskTypeIndex: 0,
|
||
projectList: [],
|
||
projectIndex: -1,
|
||
userList: [],
|
||
selectedUsers: [],
|
||
userSearchKeyword: '', // 新增：用户搜索关键字
|
||
// userPopupVisible: false, // 不再需要
|
||
fileList: [],
|
||
uploadedFiles: []
|
||
}
|
||
},
|
||
computed: {
|
||
filteredUserList() {
|
||
if (!this.userSearchKeyword.trim()) {
|
||
return this.userList;
|
||
}
|
||
return this.userList.filter(user =>
|
||
user.nickName && user.nickName.includes(this.userSearchKeyword.trim())
|
||
);
|
||
}
|
||
},
|
||
onLoad() {
|
||
this.initData()
|
||
},
|
||
methods: {
|
||
// 初始化数据
|
||
async initData() {
|
||
await Promise.all([
|
||
this.getProjectList(),
|
||
this.getUserList()
|
||
])
|
||
},
|
||
|
||
// 获取项目列表
|
||
async getProjectList() {
|
||
try {
|
||
const res = await listProject({
|
||
pageNum: 1,
|
||
pageSize: 999
|
||
})
|
||
this.projectList = res.rows || []
|
||
} catch (error) {
|
||
console.error('获取项目列表失败:', error)
|
||
uni.showToast({
|
||
title: '获取项目列表失败',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
},
|
||
|
||
// 获取用户列表
|
||
async getUserList() {
|
||
try {
|
||
const res = await selectUser({ pageNum: 1, pageSize: 999, deptId: 100 })
|
||
// const resr = await deptTreeSelect()
|
||
this.userList = res.rows || []
|
||
} catch (error) {
|
||
console.error('获取用户列表失败:', error)
|
||
uni.showToast({
|
||
title: '获取用户列表失败',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
},
|
||
|
||
// 工作类型选择
|
||
onTaskTypeChange(e) {
|
||
this.taskTypeIndex = e.detail.value
|
||
this.form.taskType = this.taskTypeOptions[this.taskTypeIndex].value
|
||
},
|
||
|
||
// 开始时间选择
|
||
onBeginTimeChange(e) {
|
||
this.form.beginTime = e.detail.value + ' 00:00:00'
|
||
},
|
||
|
||
// 结束时间选择
|
||
onFinishTimeChange(e) {
|
||
this.form.finishTime = e.detail.value + ' 23:59:59'
|
||
},
|
||
|
||
// 项目选择
|
||
onProjectChange(e) {
|
||
this.projectIndex = e.detail.value
|
||
this.form.projectId = this.projectList[this.projectIndex].projectId
|
||
},
|
||
// 移除项目
|
||
removeProject() {
|
||
this.projectIndex = -1
|
||
this.form.projectId = ''
|
||
},
|
||
|
||
// 打开用户选择器
|
||
openUserPopup() {
|
||
this.$refs.userPopup.open()
|
||
},
|
||
// 关闭用户选择器
|
||
closeUserPopup() {
|
||
this.$refs.userPopup.close()
|
||
},
|
||
// 勾选/取消用户
|
||
toggleUser(user) {
|
||
const index = this.selectedUsers.findIndex(u => u.userId === user.userId)
|
||
if (index > -1) {
|
||
this.selectedUsers.splice(index, 1)
|
||
} else {
|
||
this.selectedUsers.push(user)
|
||
}
|
||
},
|
||
// 判断用户是否已选
|
||
isSelected(user) {
|
||
return this.selectedUsers.some(u => u.userId === user.userId)
|
||
},
|
||
// 移除已选用户
|
||
removeUser(user) {
|
||
const index = this.selectedUsers.findIndex(u => u.userId === user.userId)
|
||
if (index > -1) {
|
||
this.selectedUsers.splice(index, 1)
|
||
}
|
||
},
|
||
// 确认选择
|
||
confirmUserSelect() {
|
||
this.form.workerIds = this.selectedUsers.map(u => u.userId).join(',')
|
||
this.closeUserPopup()
|
||
},
|
||
|
||
|
||
|
||
// 选择文件
|
||
chooseFile() {
|
||
// 安卓平台使用 plus.io.pickFiles
|
||
// #ifdef APP-PLUS
|
||
if (typeof plus !== 'undefined' && plus.io) {
|
||
console.log('使用安卓平台文件选择API')
|
||
this.doPickFiles()
|
||
return
|
||
}
|
||
// #endif
|
||
|
||
// 微信小程序环境
|
||
if (typeof wx !== 'undefined' && wx.chooseMessageFile) {
|
||
wx.chooseMessageFile({
|
||
count: 5,
|
||
type: 'all',
|
||
success: (res) => {
|
||
const processedFiles = res.tempFiles.map(file => ({
|
||
name: file.name,
|
||
size: file.size,
|
||
path: file.path || file.tempFilePath,
|
||
type: file.type
|
||
}))
|
||
|
||
// 验证文件
|
||
const validFiles = this.validateFiles(processedFiles)
|
||
if (validFiles.length > 0) {
|
||
this.fileList = [...this.fileList, ...validFiles]
|
||
}
|
||
},
|
||
fail: (err) => {
|
||
console.error('选择文件失败:', err)
|
||
uni.showToast({
|
||
title: '选择文件失败',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
})
|
||
return
|
||
}
|
||
|
||
// H5平台使用 uni.chooseFile
|
||
// #ifdef H5
|
||
uni.chooseFile({
|
||
count: 5,
|
||
type: 'all',
|
||
success: (res) => {
|
||
const processedFiles = res.tempFiles.map(file => ({
|
||
name: file.name,
|
||
size: file.size,
|
||
path: file.path || file.tempFilePath || file.url,
|
||
type: file.type
|
||
}))
|
||
|
||
// 验证文件
|
||
const validFiles = this.validateFiles(processedFiles)
|
||
if (validFiles.length > 0) {
|
||
this.fileList = [...this.fileList, ...validFiles]
|
||
}
|
||
},
|
||
fail: (err) => {
|
||
console.error('选择文件失败:', err)
|
||
uni.showToast({
|
||
title: '选择文件失败',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
})
|
||
// #endif
|
||
|
||
// 其他平台提示不支持
|
||
// #ifndef APP-PLUS || H5 || MP-WEIXIN
|
||
uni.showToast({
|
||
title: '当前平台不支持文件选择',
|
||
icon: 'none'
|
||
})
|
||
// #endif
|
||
},
|
||
|
||
// 移除文件
|
||
removeFile(index) {
|
||
this.fileList.splice(index, 1)
|
||
},
|
||
|
||
// 根据文件名获取文件类型
|
||
getFileType(fileName) {
|
||
const ext = fileName.split('.').pop().toLowerCase()
|
||
const typeMap = {
|
||
'jpg': 'image/jpeg',
|
||
'jpeg': 'image/jpeg',
|
||
'png': 'image/png',
|
||
'gif': 'image/gif',
|
||
'bmp': 'image/bmp',
|
||
'webp': 'image/webp',
|
||
'pdf': 'application/pdf',
|
||
'doc': 'application/msword',
|
||
'docx': 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
|
||
'xls': 'application/vnd.ms-excel',
|
||
'xlsx': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
|
||
'ppt': 'application/vnd.ms-powerpoint',
|
||
'pptx': 'application/vnd.openxmlformats-officedocument.presentationml.presentation',
|
||
'txt': 'text/plain',
|
||
'zip': 'application/zip',
|
||
'rar': 'application/x-rar-compressed',
|
||
'7z': 'application/x-7z-compressed'
|
||
}
|
||
return typeMap[ext] || 'application/octet-stream'
|
||
},
|
||
|
||
// 执行文件选择
|
||
doPickFiles() {
|
||
try {
|
||
plus.io.pickFiles({
|
||
multiple: true,
|
||
maximum: 5,
|
||
filter: 'none',
|
||
onSuccess: (files) => {
|
||
console.log('安卓平台选择文件成功:', files)
|
||
const processedFiles = files.map(file => ({
|
||
name: file.name,
|
||
size: file.size,
|
||
path: file.path,
|
||
type: file.type || this.getFileType(file.name)
|
||
}))
|
||
|
||
// 验证文件
|
||
const validFiles = this.validateFiles(processedFiles)
|
||
if (validFiles.length > 0) {
|
||
this.fileList = [...this.fileList, ...validFiles]
|
||
console.log('处理后的文件列表:', this.fileList)
|
||
}
|
||
},
|
||
onFail: (error) => {
|
||
console.error('安卓平台选择文件失败:', error)
|
||
// 尝试使用备用方法
|
||
this.fallbackPickFiles()
|
||
}
|
||
})
|
||
} catch (error) {
|
||
console.error('plus.io.pickFiles 不可用:', error)
|
||
// 尝试使用备用方法
|
||
this.fallbackPickFiles()
|
||
}
|
||
},
|
||
|
||
// 备用文件选择方法
|
||
fallbackPickFiles() {
|
||
// 使用 uni.chooseImage 作为备用方案
|
||
uni.chooseImage({
|
||
count: 5,
|
||
sizeType: ['original'],
|
||
sourceType: ['album'],
|
||
success: (res) => {
|
||
console.log('备用方法选择文件成功:', res)
|
||
const processedFiles = res.tempFilePaths.map((path, index) => ({
|
||
name: `image_${Date.now()}_${index}.jpg`,
|
||
size: 0,
|
||
path: path,
|
||
type: 'image/jpeg'
|
||
}))
|
||
|
||
// 验证文件
|
||
const validFiles = this.validateFiles(processedFiles)
|
||
if (validFiles.length > 0) {
|
||
this.fileList = [...this.fileList, ...validFiles]
|
||
console.log('处理后的文件列表:', this.fileList)
|
||
}
|
||
},
|
||
fail: (error) => {
|
||
console.error('备用方法选择文件失败:', error)
|
||
uni.showToast({
|
||
title: '选择文件失败',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
})
|
||
},
|
||
|
||
// 验证文件
|
||
validateFiles(files) {
|
||
const allowedTypes = ['doc', 'xls', 'ppt', 'txt', 'pdf', 'docx', 'xlsx', 'png', 'jpg', 'jpeg', 'zip', 'rar', '7z', 'dwg']
|
||
const maxSize = 200 * 1024 * 1024 // 200MB
|
||
|
||
const validFiles = []
|
||
const invalidFiles = []
|
||
|
||
files.forEach(file => {
|
||
// 文件类型验证
|
||
const ext = file.name.split('.').pop().toLowerCase()
|
||
if (!allowedTypes.includes(ext)) {
|
||
invalidFiles.push(`${file.name} (格式不支持)`)
|
||
return
|
||
}
|
||
|
||
// 文件大小验证
|
||
if (file.size > maxSize) {
|
||
invalidFiles.push(`${file.name} (超过200MB)`)
|
||
return
|
||
}
|
||
|
||
validFiles.push(file)
|
||
})
|
||
|
||
// 显示无效文件提示
|
||
if (invalidFiles.length > 0) {
|
||
uni.showToast({
|
||
title: `以下文件不符合要求：${invalidFiles.join(', ')}`,
|
||
icon: 'none',
|
||
duration: 3000
|
||
})
|
||
}
|
||
|
||
return validFiles
|
||
},
|
||
|
||
|
||
|
||
// 格式化文件大小
|
||
formatFileSize(size) {
|
||
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'
|
||
}
|
||
},
|
||
|
||
// 上传文件
|
||
async uploadFiles() {
|
||
if (this.fileList.length === 0) {
|
||
return []
|
||
}
|
||
|
||
try {
|
||
const results = await uploadFiles(this.fileList, {
|
||
allowedTypes: ['doc', 'xls', 'ppt', 'txt', 'pdf', 'docx', 'xlsx', 'png', 'jpg', 'jpeg', 'zip', 'rar', '7z', 'dwg'],
|
||
maxSize: 200,
|
||
extraData: 1,
|
||
onProgress: (progress) => {
|
||
console.log(`上传进度: ${progress.progress.toFixed(1)}% - ${progress.file.name}`)
|
||
}
|
||
})
|
||
|
||
return results
|
||
} catch (error) {
|
||
throw error
|
||
}
|
||
},
|
||
|
||
// 表单验证
|
||
validateForm() {
|
||
if (!this.form.taskTitle.trim()) {
|
||
uni.showToast({
|
||
title: '请输入任务主题',
|
||
icon: 'none'
|
||
})
|
||
return false
|
||
}
|
||
|
||
if (!this.form.taskType) {
|
||
uni.showToast({
|
||
title: '请选择工作类型',
|
||
icon: 'none'
|
||
})
|
||
return false
|
||
}
|
||
|
||
if (!this.form.beginTime) {
|
||
uni.showToast({
|
||
title: '请选择开始时间',
|
||
icon: 'none'
|
||
})
|
||
return false
|
||
}
|
||
|
||
if (this.form.status === 0 && !this.form.finishTime) {
|
||
uni.showToast({
|
||
title: '请选择结束时间',
|
||
icon: 'none'
|
||
})
|
||
return false
|
||
}
|
||
|
||
if (this.form.workerIds === '') {
|
||
uni.showToast({
|
||
title: '请选择执行人',
|
||
icon: 'none'
|
||
})
|
||
return false
|
||
}
|
||
|
||
return true
|
||
},
|
||
|
||
// 提交表单
|
||
async submitForm() {
|
||
if (!this.validateForm()) {
|
||
return
|
||
}
|
||
|
||
this.loading = true
|
||
|
||
try {
|
||
// 上传文件
|
||
if (this.fileList.length > 0) {
|
||
// 显示上传进度提示
|
||
uni.showLoading({
|
||
title: '正在上传文件...',
|
||
mask: true
|
||
})
|
||
|
||
const uploadedFiles = await this.uploadFiles()
|
||
|
||
// 隐藏上传进度提示
|
||
uni.hideLoading()
|
||
|
||
// 提取ossId并拼接成字符串
|
||
const ossIds = uploadedFiles.map(file => file.ossId).filter(Boolean)
|
||
this.form.accessory = ossIds.join(',')
|
||
|
||
console.log('上传完成，ossId字符串:', this.form.accessory)
|
||
} else {
|
||
this.form.accessory = ''
|
||
}
|
||
|
||
// 显示提交提示
|
||
uni.showLoading({
|
||
title: '正在创建任务...',
|
||
mask: true
|
||
})
|
||
|
||
// 提交任务
|
||
await addTask(this.form)
|
||
|
||
// 隐藏提交提示
|
||
uni.hideLoading()
|
||
|
||
uni.showToast({
|
||
title: '任务创建成功',
|
||
icon: 'success'
|
||
})
|
||
|
||
// 返回上一页
|
||
setTimeout(() => {
|
||
uni.navigateBack()
|
||
}, 1500)
|
||
|
||
} catch (error) {
|
||
console.error('创建任务失败:', error)
|
||
|
||
// 隐藏所有loading
|
||
uni.hideLoading()
|
||
|
||
// 显示错误信息
|
||
const errorMessage = error.message || '创建任务失败'
|
||
uni.showToast({
|
||
title: errorMessage,
|
||
icon: 'none',
|
||
duration: 3000
|
||
})
|
||
} finally {
|
||
this.loading = false
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.create-task-container {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
min-height: 100vh;
|
||
background-color: #f5f5f5;
|
||
padding-bottom: 120rpx;
|
||
}
|
||
|
||
.form-container {
|
||
max-width: 90vw;
|
||
margin: 0 auto;
|
||
box-sizing: border-box;
|
||
padding: 30rpx 20rpx;
|
||
}
|
||
|
||
.form-item {
|
||
border-radius: 12rpx;
|
||
box-sizing: border-box;
|
||
padding: 30rpx;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.form-label {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 20rpx;
|
||
|
||
.label-text {
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.required {
|
||
color: #ff4757;
|
||
margin-left: 8rpx;
|
||
}
|
||
}
|
||
|
||
.form-input {
|
||
width: 100%;
|
||
height: 80rpx;
|
||
border: 1rpx solid #ddd;
|
||
border-radius: 8rpx;
|
||
padding: 0 20rpx;
|
||
font-size: 28rpx;
|
||
background-color: #fff;
|
||
}
|
||
|
||
.form-picker {
|
||
width: 100%;
|
||
height: 80rpx;
|
||
border: 1rpx solid #ddd;
|
||
border-radius: 8rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 0 20rpx;
|
||
background-color: #fff;
|
||
|
||
.picker-text {
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
}
|
||
}
|
||
|
||
.radio-group {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 20rpx;
|
||
}
|
||
|
||
.radio-item {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 20rpx 30rpx;
|
||
border: 1rpx solid #ddd;
|
||
border-radius: 8rpx;
|
||
background-color: #fff;
|
||
|
||
&.active {
|
||
border-color: #007aff;
|
||
background-color: #f0f8ff;
|
||
|
||
.radio-circle {
|
||
background-color: #007aff;
|
||
|
||
&::after {
|
||
content: '';
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
width: 12rpx;
|
||
height: 12rpx;
|
||
background-color: #fff;
|
||
border-radius: 50%;
|
||
}
|
||
}
|
||
}
|
||
|
||
.radio-circle {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
border: 2rpx solid #ddd;
|
||
border-radius: 50%;
|
||
margin-right: 16rpx;
|
||
position: relative;
|
||
}
|
||
|
||
.radio-text {
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
}
|
||
}
|
||
|
||
.user-selector {
|
||
min-height: 80rpx;
|
||
border: 1rpx solid #ddd;
|
||
border-radius: 8rpx;
|
||
padding: 20rpx;
|
||
background-color: #fff;
|
||
|
||
.selected-users {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 16rpx;
|
||
}
|
||
|
||
.user-tag {
|
||
display: flex;
|
||
align-items: center;
|
||
background-color: #f0f8ff;
|
||
border: 1rpx solid #007aff;
|
||
border-radius: 20rpx;
|
||
padding: 8rpx 16rpx;
|
||
|
||
.user-name {
|
||
font-size: 24rpx;
|
||
color: #007aff;
|
||
margin-right: 8rpx;
|
||
}
|
||
|
||
.remove-btn {
|
||
font-size: 24rpx;
|
||
color: #007aff;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
|
||
.placeholder {
|
||
font-size: 28rpx;
|
||
color: #999;
|
||
}
|
||
}
|
||
|
||
.form-textarea {
|
||
width: 100%;
|
||
min-height: 200rpx;
|
||
border: 1rpx solid #ddd;
|
||
border-radius: 8rpx;
|
||
padding: 20rpx;
|
||
font-size: 28rpx;
|
||
background-color: #fff;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.file-upload {
|
||
.upload-btn {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
height: 160rpx;
|
||
border: 2rpx dashed #ddd;
|
||
border-radius: 8rpx;
|
||
background-color: #fafafa;
|
||
|
||
.upload-icon {
|
||
font-size: 48rpx;
|
||
color: #999;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
|
||
.upload-text {
|
||
font-size: 28rpx;
|
||
color: #999;
|
||
}
|
||
}
|
||
|
||
.file-list {
|
||
margin-top: 20rpx;
|
||
}
|
||
|
||
.file-item {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 20rpx;
|
||
background-color: #f8f9fa;
|
||
border-radius: 8rpx;
|
||
margin-bottom: 16rpx;
|
||
|
||
.file-name {
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
flex: 1;
|
||
margin-right: 16rpx;
|
||
}
|
||
|
||
.file-size {
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
margin-right: 16rpx;
|
||
}
|
||
|
||
.remove-file {
|
||
font-size: 32rpx;
|
||
color: #ff4757;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
}
|
||
|
||
.submit-container {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
background-color: #fff;
|
||
padding: 30rpx;
|
||
border-top: 1rpx solid #eee;
|
||
|
||
.submit-btn {
|
||
width: 100%;
|
||
height: 88rpx;
|
||
background-color: #007aff;
|
||
color: #fff;
|
||
border-radius: 8rpx;
|
||
font-size: 32rpx;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
|
||
.user-popup {
|
||
background-color: #fff;
|
||
border-radius: 20rpx 20rpx 0 0;
|
||
max-height: 80vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
.popup-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 30rpx;
|
||
border-bottom: 1rpx solid #eee;
|
||
|
||
.popup-title {
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
}
|
||
|
||
.close-btn {
|
||
font-size: 40rpx;
|
||
color: #999;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
|
||
.user-list {
|
||
flex: 1;
|
||
overflow-y: auto;
|
||
padding: 0 30rpx;
|
||
}
|
||
|
||
.user-item {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 30rpx 0;
|
||
border-bottom: 1rpx solid #f5f5f5;
|
||
|
||
.user-avatar {
|
||
margin-right: 20rpx;
|
||
|
||
.avatar-img {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
border-radius: 50%;
|
||
}
|
||
}
|
||
|
||
.user-info {
|
||
flex: 1;
|
||
|
||
.user-nickname {
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
font-weight: 500;
|
||
display: block;
|
||
}
|
||
|
||
.user-dept {
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
margin-top: 8rpx;
|
||
display: block;
|
||
}
|
||
}
|
||
|
||
.user-check {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
border: 2rpx solid #007aff;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background-color: #007aff;
|
||
|
||
.check-icon {
|
||
color: #fff;
|
||
font-size: 24rpx;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
}
|
||
|
||
.popup-footer {
|
||
padding: 30rpx;
|
||
border-top: 1rpx solid #eee;
|
||
|
||
.confirm-btn {
|
||
width: 100%;
|
||
height: 88rpx;
|
||
background-color: #007aff;
|
||
color: #fff;
|
||
border-radius: 8rpx;
|
||
font-size: 32rpx;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
}
|
||
.user-tags {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
.user-tag {
|
||
background: #e6f7ff;
|
||
color: #007aff;
|
||
border-radius: 20rpx;
|
||
padding: 6rpx 16rpx;
|
||
margin-right: 10rpx;
|
||
margin-bottom: 10rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.remove-btn {
|
||
margin-left: 8rpx;
|
||
color: #ff4757;
|
||
font-weight: bold;
|
||
cursor: pointer;
|
||
}
|
||
.user-select-popup {
|
||
width: 90vw;
|
||
max-width: 700rpx;
|
||
background: #fff;
|
||
border-radius: 16rpx;
|
||
overflow: hidden;
|
||
}
|
||
.popup-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 24rpx;
|
||
border-bottom: 1rpx solid #eee;
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
}
|
||
.close-btn {
|
||
font-size: 40rpx;
|
||
color: #999;
|
||
font-weight: bold;
|
||
}
|
||
.popup-body {
|
||
display: flex;
|
||
height: 400rpx;
|
||
}
|
||
.dept-tree {
|
||
width: 180rpx;
|
||
border-right: 1rpx solid #eee;
|
||
background: #f8f8f8;
|
||
padding: 10rpx 0;
|
||
}
|
||
.dept-item {
|
||
padding: 16rpx 24rpx;
|
||
cursor: pointer;
|
||
}
|
||
.dept-item.active {
|
||
background: #e6f7ff;
|
||
color: #007aff;
|
||
}
|
||
.dept-children {
|
||
margin-left: 10rpx;
|
||
}
|
||
.user-list {
|
||
flex: 1;
|
||
padding: 10rpx 0 10rpx 10rpx;
|
||
overflow-y: auto;
|
||
}
|
||
.user-row {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 10rpx 0;
|
||
border-bottom: 1rpx solid #f5f5f5;
|
||
}
|
||
.user-row .user-dept {
|
||
margin-left: 16rpx;
|
||
color: #999;
|
||
font-size: 24rpx;
|
||
}
|
||
.popup-footer {
|
||
padding: 20rpx;
|
||
text-align: right;
|
||
}
|
||
</style>
|