8 changed files with 384 additions and 5 deletions
@ -0,0 +1,43 @@ |
|||
<template> |
|||
<view> |
|||
<!-- 上传提交 v-if="isMine && deliver" --> |
|||
<!-- TODO: 2022年春节为了演示所有人都能看到交付物插件 --> |
|||
<p-deliver-upload-second v-if="deliver" @upload-success="getDeliverData" class="p-2" @edit-success="getDeliverData"></p-deliver-upload-second> |
|||
|
|||
<p-deliver-check |
|||
v-if="deliver && deliver.details && deliver.details.length" |
|||
@check-success="getDeliverData" |
|||
class="p-2" |
|||
></p-deliver-check> |
|||
</view> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { useStore } from 'vuex'; |
|||
import { ref, inject, provide, computed, watch } from 'vue'; |
|||
|
|||
const store = useStore(); |
|||
const task = inject('task'); |
|||
const pluginInfo = inject('pluginInfo'); |
|||
const deliver = ref(null); // 服务端返回的交付物信息 |
|||
const isMine = computed(() => store.getters['role/isMine']); // 是不是我的任务 |
|||
// const remindData = computed(() => store.state.socket.remindData); // 小红点 |
|||
|
|||
deliver.value = pluginInfo && pluginInfo.data ? JSON.parse(pluginInfo.data) : null; |
|||
provide('deliver', deliver); |
|||
|
|||
// 根据任务id获取交付物信息 |
|||
async function getDeliverData() { |
|||
try { |
|||
const { id: taskId } = task; |
|||
if (!taskId) return; |
|||
const param = { taskId }; |
|||
const data = await uni.$u.api.getDeliverByTaskId(param); |
|||
deliver.value = data; |
|||
} catch (error) { |
|||
console.log('error: ', error); |
|||
} |
|||
} |
|||
|
|||
// getDeliverData(); |
|||
</script> |
|||
@ -0,0 +1,299 @@ |
|||
<template> |
|||
<!-- 是自己的任务 且该任务有交付物 才显示提交组件 --> |
|||
<view class="bg-white px-2 rounded-md relative" @longpress.prevent="showMask = true"> |
|||
<!-- 插件名称输入和提交 --> |
|||
<view class="flex item-center justify-between py-2"> |
|||
<view class="flex-1"> |
|||
<view v-if="deliver.deliverName" class="relative inline-block"> |
|||
{{ deliver.deliverName }} |
|||
<!-- <u-badge |
|||
size="mini" |
|||
:is-dot="true" |
|||
style="transform: translate3d(2em, -1em, 0)" |
|||
v-show="!deliver.details || !deliver.details.length" |
|||
></u-badge> --> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 提交 --> |
|||
<u-button |
|||
type="primary" |
|||
size="mini" |
|||
@click="submit" |
|||
class="self-center" |
|||
:disabled="submitState" |
|||
:ripple="true" |
|||
:loading="submitBtnLoading" |
|||
> |
|||
提交 |
|||
</u-button> |
|||
|
|||
<!-- 查看提交历史的按钮 --> |
|||
<!-- <u-icon name="arrow-right" class="ml-3" @click="openDeliverHistory"></u-icon> --> |
|||
</view> |
|||
|
|||
<!-- 插件上传方式 --> |
|||
<view> |
|||
<view class="link-box"> |
|||
<u-input v-model="linkValue" type="text" :border="true" placeholder="请输入交付物地址/链接" class="input"></u-input> |
|||
</view> |
|||
<view class="mt-3"> |
|||
<u-button size="mini" :plain="true" type="primary" class="mr-3" @click="paste">粘贴</u-button> |
|||
<u-button size="mini" :plain="true" type="primary" class="mr-3" @click="uploadFile">文件</u-button> |
|||
<u-button size="mini" :plain="true" type="primary" class="mr-3" @click="uploadPhoto">拍照</u-button> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 编辑和删除的遮罩层 --> |
|||
<view class="mask flex items-center justify-center bg-grey" v-show="showMask" @click="showMask = false"> |
|||
<view class="bg-yellow-500 text-white w-12 h-12 text-center leading-12 rounded-w-12 mx-8" @click.stop="showEditModal = true"> |
|||
修改 |
|||
</view> |
|||
<view class="bg-red-500 text-white w-12 h-12 text-center leading-12 rounded-w-12 mx-8" @click.stop="showDeleteModal = true"> |
|||
删除 |
|||
</view> |
|||
<!-- 删除的二次提示modal --> |
|||
<u-modal v-model="showDeleteModal" :content="content" :show-cancel-button="true" @confirm="confirmDelete"></u-modal> |
|||
</view> |
|||
|
|||
<!-- 编辑交付物标题的modal --> |
|||
<u-mask :show="showEditModal" @click="showEditModal = false"> |
|||
<view class="modal-content-wrap" @click.stop> |
|||
<view class="modal-content-head">交付物标题名称</view> |
|||
<view class="modal-content-body"> |
|||
<u-input :border="true" placeholder="请输入交付物名称" v-model="newInputRef"></u-input> |
|||
</view> |
|||
|
|||
<view class="modal-content-foot"> |
|||
<view class="cancel" @click="showEditModal = false">取消</view> |
|||
<view class="confirm" @click="confirmEditDeliverName">确定</view> |
|||
</view> |
|||
</view> |
|||
</u-mask> |
|||
|
|||
<view class="border border-solid border-gray-300 rounded-md mt-3 px-2" @click="collapsed = !collapsed"> |
|||
<view class="top flex justify-between"> |
|||
<view class="mr-3 py-2 text-sm">工作量时长</view> |
|||
<!-- 时长 --> |
|||
<view class="flex item-center justify-end flex-1 text-sm"> |
|||
<u-input v-model="duration" type="text" :border="none" placeholder="请输入工作量时长" class="input" style="text-align: right;"></u-input> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="foot mt-2 flex flex-wrap"> |
|||
<u-button :type="checkedIndex === 0 ? 'primary' : 'default'" size="mini" class="my-1 ml-0 mr-3" @click="handleSelectTime(0)"> |
|||
半小时 |
|||
</u-button> |
|||
<u-button :type="checkedIndex === 1 ? 'primary' : 'default'" size="mini" class="my-1 ml-0 mr-3" @click="handleSelectTime(1)"> |
|||
1小时 |
|||
</u-button> |
|||
<u-button :type="checkedIndex === 2 ? 'primary' : 'default'" size="mini" class="my-1 ml-0 mr-3" @click="handleSelectTime(2)"> |
|||
2小时 |
|||
</u-button> |
|||
</view> |
|||
|
|||
<!-- 插件审核人员选择 --> |
|||
<Reviewer ref="reviewerRef" /> |
|||
</view> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { ref, computed, inject } from 'vue'; |
|||
import { useStore } from 'vuex'; |
|||
import { UPLOAD_URL } from '@/config/index'; |
|||
import { UPLOAD_EXTENSION } from '@/config/deliver'; |
|||
|
|||
const deliver = inject('deliver'); |
|||
const task = inject('task'); |
|||
const store = useStore(); |
|||
const emits = defineEmits(['upload-success', 'edit-success']); |
|||
const reviewerRef = ref(null); |
|||
const submitBtnLoading = ref(false); |
|||
const linkValue = ref(''); // 链接的值 |
|||
const showMask = ref(false); // 编辑和删除页面 |
|||
const showEditModal = ref(false); // 编辑交付物标题的modal |
|||
const newInputRef = ref(''); // 修改的插件名的值 |
|||
const showDeleteModal = ref(false); // 删除二次提示的modal |
|||
const content = '是否确定删除'; |
|||
const showBadge = ref(false); // u-badge的显示与隐藏 |
|||
const duration = ref('2小时'); // 工作量时长 |
|||
const checkedIndex = ref(2); // 默认选中 |
|||
|
|||
// 判断提交按钮的状态 |
|||
const submitState = computed(() => !linkValue.value); |
|||
const projectId = computed(() => store.getters['project/projectId']); |
|||
const roleId = computed(() => store.state.role.roleId); |
|||
|
|||
// 验证提交的交付物信息格式 |
|||
function validateDeliverForm(checkedCheckers) { |
|||
const reg = /[a-zA-z]+:\/\/[^\s]*/; |
|||
if (!reg.test(linkValue.value)) { |
|||
// 显示toast信息 |
|||
uni.$ui.showToast('请输入正确的链接'); |
|||
return false; |
|||
} |
|||
// 没有检查人 提示选择检查人 |
|||
if (!checkedCheckers || !checkedCheckers.length) { |
|||
uni.$ui.showToast('请选择检查人'); |
|||
return false; |
|||
} |
|||
return true; |
|||
} |
|||
|
|||
// 提交交付物信息 |
|||
async function submit() { |
|||
const { checkedCheckers } = reviewerRef.value; // 拿到选择检查人组件中选中的检查人 |
|||
|
|||
// 提交前的验证 |
|||
if (!validateDeliverForm(checkedCheckers)) return; |
|||
submitBtnLoading.value = true; // 显示loading |
|||
// 验证成功后进行请求 |
|||
try { |
|||
const checkerList = []; |
|||
checkedCheckers.forEach(item => { |
|||
checkerList.push(item.memberId); |
|||
}); |
|||
|
|||
const param = { |
|||
projectId: projectId.value, |
|||
roleId: roleId.value, |
|||
deliverId: deliver.value.deliverId, |
|||
fileList: [linkValue.value], |
|||
checkerList, |
|||
duration: duration.value, |
|||
msgId: task.msgId, |
|||
}; |
|||
await uni.$u.api.submitDeliverInfo(param); |
|||
uni.$ui.showToast('提交交付物信息成功'); |
|||
resetControlState(); // 重置控件的初始状态 |
|||
emits('upload-success'); |
|||
} catch (error) { |
|||
console.log('error: ', error); |
|||
uni.$ui.showToast('提交交付物信息失败'); |
|||
} |
|||
} |
|||
|
|||
// 重置控件的初始状态 |
|||
function resetControlState() { |
|||
submitBtnLoading.value = false; // 隐藏loading |
|||
linkValue.value = ''; // 清空输入框内容 |
|||
reviewerRef.value.collapsed = true; // 折叠检查人面板 |
|||
} |
|||
|
|||
// 查看历史记录 |
|||
function openDeliverHistory() { |
|||
const { deliverId } = deliver.value; |
|||
// console.log(deliverId) |
|||
uni.navigateTo({ url: `/pages/submitLog/submitLog?deliverId=${deliverId}` }); |
|||
} |
|||
|
|||
// 粘贴上传 |
|||
function paste() { |
|||
uni.getClipboardData({ |
|||
success(res) { |
|||
linkValue.value = res.data; |
|||
}, |
|||
}); |
|||
} |
|||
|
|||
// 文件上传 |
|||
async function uploadFile() { |
|||
// #ifdef APP-PLUS |
|||
uni.$ui.showToast('APP暂不支持上传文件'); |
|||
// #endif |
|||
|
|||
// #ifdef H5 |
|||
try { |
|||
const data = await uni.$upload.chooseAndUpload(UPLOAD_URL, {}, UPLOAD_EXTENSION, 'files'); |
|||
// console.log(data[0]); |
|||
linkValue.value = data[0].visitUrl; |
|||
} catch (error) { |
|||
console.error('error: ', error); |
|||
} |
|||
// #endif |
|||
} |
|||
|
|||
// 拍照上传 |
|||
function uploadPhoto() { |
|||
uni.$ui.hideLoading(); |
|||
let timer = null; |
|||
clearTimeout(timer); |
|||
uni.chooseImage({ |
|||
count: 1, // 默认9 |
|||
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有 |
|||
sourceType: ['album', 'camera'], // 从相册选择 |
|||
success: res => { |
|||
if (!timer) { |
|||
timer = setTimeout(() => { |
|||
uni.$ui.showLoading('正在上传...'); |
|||
timer = null; |
|||
}, 800); |
|||
} |
|||
const { tempFilePaths } = res; |
|||
uni.uploadFile({ |
|||
url: UPLOAD_URL, // 仅为示例，非真实的接口地址 |
|||
filePath: tempFilePaths[0], |
|||
name: 'files', |
|||
formData: {}, |
|||
success: res => { |
|||
clearTimeout(timer); |
|||
uni.$ui.hideLoading(); |
|||
const data = JSON.parse(res.data); |
|||
if (data.code === 200) { |
|||
linkValue.value = data.data[0].visitUrl; |
|||
} |
|||
}, |
|||
fail: error => { |
|||
clearTimeout(timer); |
|||
uni.$ui.hideLoading(); |
|||
console.error('error', error); |
|||
}, |
|||
}); |
|||
}, |
|||
}); |
|||
} |
|||
|
|||
// 确定修改交付物名称 |
|||
async function confirmEditDeliverName() { |
|||
if (!newInputRef.value) { |
|||
uni.$ui.showToast('输入不能为空'); |
|||
} |
|||
try { |
|||
const param = { |
|||
projectId: projectId.value, |
|||
taskId: task.id, |
|||
deliverName: newInputRef.value, |
|||
}; |
|||
await uni.$u.api.editDeliverName(param); |
|||
// uni.$ui.showToast('修改交付物名称成功'); |
|||
emits('edit-success'); |
|||
// 请求成功 才会清空 请求失败保留 |
|||
showEditModal.value = false; |
|||
showMask.value = false; |
|||
showBadge.value = false; |
|||
newInputRef.value = ''; |
|||
} catch (error) { |
|||
console.error('error: ', error); |
|||
uni.$ui.showToast('修改交付物名称失败'); |
|||
} |
|||
} |
|||
|
|||
// 二次确认后删除 |
|||
async function confirmDelete() { |
|||
try { |
|||
showDeleteModal.value = true; |
|||
deliverRef.value = false; |
|||
await uni.$u.api.deleteDeliver(); |
|||
uni.$ui.showToast('删除交付物成功'); |
|||
} catch (error) { |
|||
console.error('error: ', error); |
|||
uni.$ui.showToast('删除交付物失败'); |
|||
} |
|||
} |
|||
|
|||
function handleSelectTime(data) { |
|||
checkedIndex.value = data; |
|||
duration.value = data === 0 ? '半小时' : data === 1 ? '1小时' : '2小时'; |
|||
} |
|||
</script> |
|||
Loading…
Reference in new issue