14 changed files with 459 additions and 507 deletions
@ -0,0 +1,53 @@ |
|||||
|
<template> |
||||
|
<theme class="pt-1 h-full"> |
||||
|
<view class="h-full overflow-y-scroll bg-white rounded-md p-3 text-gray-400"> |
||||
|
<view v-for="item in checkerList" class="flex justify-between"> |
||||
|
<view> |
||||
|
<view class="mb-1 text-gray-800"> |
||||
|
{{ item.checkerName }} |
||||
|
</view> |
||||
|
<view class="mb-1 text-xs"> |
||||
|
{{ item.remark }} |
||||
|
</view> |
||||
|
<view class="text-xs" v-if="+item.checkTime > 0"> |
||||
|
{{ dayjs(+item.checkTime).format('MM-DD HH:mm') }} |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="flex flex-col justify-center"> |
||||
|
<view class="mb-1 text-green-600" v-if="item.status === 1"> 已通过 </view> |
||||
|
<view class="mb-1 text-red-600" v-if="item.status === 2"> 已驳回 </view> |
||||
|
<view v-if="+item.score > 0"> |
||||
|
<zwp-ring-timing mode="chart" :value="item.score" active-color="#F59E0B" radius="30" bar-width="4"> |
||||
|
<text class="text-yellow-500 font-medium">{{ item.score }}</text> |
||||
|
</zwp-ring-timing> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</theme> |
||||
|
</template> |
||||
|
|
||||
|
<script setup> |
||||
|
import { ref } from 'vue'; |
||||
|
import { onLoad } from '@dcloudio/uni-app'; |
||||
|
import dayjs from 'dayjs'; |
||||
|
|
||||
|
const checkerList = ref([]); |
||||
|
|
||||
|
onLoad(options => { |
||||
|
getQueryCheckLog(options); |
||||
|
}); |
||||
|
|
||||
|
async function getQueryCheckLog(options) { |
||||
|
try { |
||||
|
const param = { deliverRecordId: options.deliverRecordId }; |
||||
|
const data = await uni.$u.api.queryCheckLog(param); |
||||
|
checkerList.value = data; |
||||
|
} catch (error) { |
||||
|
console.log('error: ', error); |
||||
|
uni.$ui.showToast('获取检查交付物历史失败'); |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"></style> |
||||
@ -1,52 +0,0 @@ |
|||||
<template> |
|
||||
<theme class="pt-1 h-full"> |
|
||||
<view class="h-full overflow-y-scroll bg-white mx-5 my-2 rounded-md p-3 text-gray-400"> |
|
||||
<view v-for="item in checkerList" class="flex justify-between"> |
|
||||
<view> |
|
||||
<view class="pb-2 text-gray-800"> |
|
||||
{{ item.checkerName }} |
|
||||
</view> |
|
||||
<view class="pb-1"> |
|
||||
{{ item.remark }} |
|
||||
</view> |
|
||||
<view class="pb-2" v-if="item.checkTime > 0"> |
|
||||
{{ dayjs(+item.checkTime).format('MM-DD HH:mm') }} |
|
||||
</view> |
|
||||
</view> |
|
||||
<view> |
|
||||
<view>{{ item.status === 1 ? '已通过' : '已驳回' }}</view> |
|
||||
<view v-if="item.score > 0"> |
|
||||
<u-circle-progress active-color="#FA8C16" :percent="item.score" width="90" border-width="7" class="mt-2"> |
|
||||
<view class="u-progress-content"> |
|
||||
<view class="progress-dot text-white text-center">{{ item.score }}</view> |
|
||||
</view> |
|
||||
</u-circle-progress> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</theme> |
|
||||
</template> |
|
||||
|
|
||||
<script setup> |
|
||||
import { ref } from 'vue'; |
|
||||
import { onLoad } from '@dcloudio/uni-app'; |
|
||||
import dayjs from 'dayjs'; |
|
||||
|
|
||||
const checkerList = ref([]); |
|
||||
|
|
||||
onLoad(options => { |
|
||||
(async function getQueryCheckLog() { |
|
||||
try { |
|
||||
const param = { deliverRecordId: options.deliverRecordId }; |
|
||||
const data = await uni.$u.api.queryCheckLog(param); |
|
||||
checkerList.value = data; |
|
||||
} catch (error) { |
|
||||
console.log('error: ', error); |
|
||||
uni.$ui.showToast('获取检查交付物历史失败'); |
|
||||
} |
|
||||
}()); |
|
||||
}); |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss"></style> |
|
||||
@ -0,0 +1,70 @@ |
|||||
|
<template> |
||||
|
<theme> |
||||
|
<view class="h-full w-full px-3 pt-1 overflow-y-scroll"> |
||||
|
<view class="bg-white my-2 rounded-md p-3 text-gray-400" v-for="item in listRef"> |
||||
|
<!-- 插件名称和提交时间显示 --> |
||||
|
<view class="flex justify-between mb-2"> |
||||
|
<view class="text-gray-800">{{ deliverName }}</view> |
||||
|
<view class="text-xs">{{ dayjs(+item.submitTime).format('MM-DD HH:mm') }}</view> |
||||
|
</view> |
||||
|
<!-- 提交的链接 --> |
||||
|
<view class="break-all text-blue-400 text-xs"> |
||||
|
{{ item.details[0] }} |
||||
|
</view> |
||||
|
<!-- 该插件物的审核人 --> |
||||
|
<view class="mb-1 mt-3">审核人</view> |
||||
|
<view class="flex justify-between mb-2" v-for="checkItem in item.checkerList"> |
||||
|
<view> |
||||
|
<view class="mb-1 text-gray-800 font-semibold"> |
||||
|
{{ checkItem.checkerName }} |
||||
|
</view> |
||||
|
<view class="mb-1 text-xs"> |
||||
|
{{ checkItem.remark }} |
||||
|
</view> |
||||
|
<view class="mb-1 text-xs" v-if="+checkItem.checkTime > 0"> |
||||
|
{{ dayjs(+checkItem.checkTime).format('MM-DD HH:mm') }} |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="text-center text-xs"> |
||||
|
<view v-if="checkItem.status == null" class="text-gray-400">待审核</view> |
||||
|
<view v-else-if="checkItem.status === 1"> |
||||
|
<view class="text-green-600 mb-1">已通过</view> |
||||
|
|
||||
|
<zwp-ring-timing mode="chart" :value="checkItem.score" active-color="#F59E0B" radius="30" bar-width="4"> |
||||
|
<text class="text-yellow-500 font-medium">{{ checkItem.score }}</text> |
||||
|
</zwp-ring-timing> |
||||
|
</view> |
||||
|
<view class="text-red-600" v-else>已驳回</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</theme> |
||||
|
</template> |
||||
|
|
||||
|
<script setup> |
||||
|
import { ref } from 'vue'; |
||||
|
import { onLoad } from '@dcloudio/uni-app'; |
||||
|
import dayjs from 'dayjs'; |
||||
|
|
||||
|
const listRef = ref([]); |
||||
|
const deliverName = ref(''); |
||||
|
|
||||
|
onLoad(options => { |
||||
|
// 根据交付物id获取上传记录 |
||||
|
(async function getHistory() { |
||||
|
try { |
||||
|
const param = { deliverId: options.deliverId }; |
||||
|
const data = await uni.$u.api.getDeliverHistory(param); |
||||
|
deliverName.value = data.deliverName; |
||||
|
listRef.value = data.deliverRecordList; |
||||
|
} catch (error) { |
||||
|
console.log('error: ', error); |
||||
|
uni.$ui.showToast('获取交付物历史失败'); |
||||
|
} |
||||
|
})(); |
||||
|
}); |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"></style> |
||||
@ -1,105 +0,0 @@ |
|||||
<template> |
|
||||
<theme class="pt-1"> |
|
||||
<view class="h-full w-full overflow-y-scroll"> |
|
||||
<view class="bg-white mx-5 my-2 rounded-md p-3 text-gray-400" v-for="item in listRef"> |
|
||||
<!-- 插件名称和提交时间显示 --> |
|
||||
<view class="flex justify-between mb-2"> |
|
||||
<view class="text-gray-800">{{ name }}</view> |
|
||||
<view>{{ dayjs(+item.submitTime).format('MM-DD HH:mm') }}</view> |
|
||||
</view> |
|
||||
<!-- 提交的链接 --> |
|
||||
<view class="w-64 break-all text-blue-400 py-2"> |
|
||||
{{ item.details[0] }} |
|
||||
</view> |
|
||||
<!-- 该插件物的审核人 --> |
|
||||
<view class="mb-2">审核人</view> |
|
||||
<view class="flex justify-between my-3" v-for="items in item.checkerList"> |
|
||||
<view> |
|
||||
<view class="pb-2 text-gray-800"> |
|
||||
{{ items.checkerName }} |
|
||||
</view> |
|
||||
<view class="pb-2"> |
|
||||
{{ items.remark }} |
|
||||
</view> |
|
||||
<view class="pb-2" v-if="items.checkTime > 0"> |
|
||||
{{ dayjs(+items.checkTime).format('MM-DD HH:mm') }} |
|
||||
</view> |
|
||||
</view> |
|
||||
<view class="text-center"> |
|
||||
<view v-show="items.isMine !== 1">{{ item.status == null ? '待审核' : item.status === 1 ? '已通过' : '已驳回' }}</view> |
|
||||
<view v-show="items.isMine === 1 && items.status == null" class="text-sm">待审核</view> |
|
||||
<view v-show="items.isMine === 1 && items.status !== null" class="text-sm"> |
|
||||
<view> |
|
||||
{{ items.status === 1 ? '已通过' : '已驳回' }} |
|
||||
</view> |
|
||||
<view v-if="items.score > 0"> |
|
||||
<u-circle-progress active-color="#FA8C16" :percent="items.score" width="90" border-width="7" class="mt-2"> |
|
||||
<view class="u-progress-content"> |
|
||||
<view class="progress-dot text-white text-center">{{ items.score }}</view> |
|
||||
</view> |
|
||||
</u-circle-progress> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</theme> |
|
||||
</template> |
|
||||
|
|
||||
<script setup> |
|
||||
import { ref } from 'vue'; |
|
||||
import { onLoad } from '@dcloudio/uni-app'; |
|
||||
import dayjs from 'dayjs'; |
|
||||
|
|
||||
// const listRef = ref([ |
|
||||
// { |
|
||||
// plugname:'入职插件V0.8输出', |
|
||||
// subtime:'12/25 13:01', |
|
||||
// link:'https://www.baidu.com/', |
|
||||
// reviewer:[ |
|
||||
// { |
|
||||
// name:'冯老师', |
|
||||
// time: '12/25 14:22', |
|
||||
// advise:'加油！', |
|
||||
// state:'已通过', |
|
||||
// grade:80 |
|
||||
// }, |
|
||||
// { |
|
||||
// name:'宋老师', |
|
||||
// time: '12/28 8:22', |
|
||||
// advise:'不详细！', |
|
||||
// state:'已驳回', |
|
||||
// grade:'' |
|
||||
// }, |
|
||||
// { |
|
||||
// name:'张老师', |
|
||||
// time: '', |
|
||||
// advise:'', |
|
||||
// state:'待审批', |
|
||||
// grade:'' |
|
||||
// }, |
|
||||
// ] |
|
||||
// }, |
|
||||
// ]) |
|
||||
|
|
||||
const listRef = ref([]); |
|
||||
const name = ref(''); |
|
||||
|
|
||||
onLoad(options => { |
|
||||
// 根据交付物id获取上传记录 |
|
||||
(async function getHistory() { |
|
||||
try { |
|
||||
const param = { deliverId: options.deliverId }; |
|
||||
const data = await uni.$u.api.getDeliverHistory(param); |
|
||||
name.value = data.deliverName; |
|
||||
listRef.value = data.deliverRecordList; |
|
||||
} catch (error) { |
|
||||
console.log('error: ', error); |
|
||||
uni.$ui.showToast('获取交付物历史失败'); |
|
||||
} |
|
||||
}()); |
|
||||
}); |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss"></style> |
|
||||
@ -0,0 +1,225 @@ |
|||||
|
<template> |
||||
|
<!-- 是自己的任务 且该任务有交付物 才显示提交组件 --> |
||||
|
<view class="bg-white p-2 rounded-md relative" @longpress.prevent="showMask = true"> |
||||
|
<!-- 插件名称输入和提交 --> |
||||
|
<view class="flex item-center justify-between py-3 pl-2"> |
||||
|
<view class="flex-1"> |
||||
|
<text v-if="deliver.deliverName"> |
||||
|
{{ deliver.deliverName }} |
||||
|
</text> |
||||
|
</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> |
||||
|
|
||||
|
<!-- 插件审核人员选择 --> |
||||
|
<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']); |
||||
|
|
||||
|
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 submitState = computed(() => !linkValue.value); |
||||
|
const projectId = computed(() => store.getters['project/projectId']); |
||||
|
|
||||
|
// 验证提交的交付物信息格式 |
||||
|
function validateDeliverForm(checkedCheckers) { |
||||
|
const reg = /^http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- ./?%&=]*)?$/; |
||||
|
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, |
||||
|
deliverId: deliver.value.deliverId, |
||||
|
fileList: [linkValue.value], |
||||
|
checkerList, |
||||
|
}; |
||||
|
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() { |
||||
|
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); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// TODO: 拍照上传 |
||||
|
async function uploadPhoto() { |
||||
|
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); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 确定修改交付物名称 |
||||
|
async function confirmEditDeliverName() { |
||||
|
// TODO: 发请求 请求成功后更新task里的交付物信息 |
||||
|
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('修改交付物名称成功'); |
||||
|
// 请求成功 才会清空 请求失败保留 |
||||
|
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('删除交付物失败'); |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
@ -1,244 +1,35 @@ |
|||||
<template> |
<template> |
||||
<!-- 是自己的任务 且该任务有交付物 才显示提交组件 --> |
|
||||
<view class="my-2 bg-white p-2 rounded-md relative" @longpress.prevent="showMask = true" v-if="isMine && deliver"> |
|
||||
<!-- 插件名称输入和提交 --> |
|
||||
<view class="flex item-center justify-between py-3 pl-2"> |
|
||||
<view class="flex-1"> |
|
||||
<span class="relative px-1" v-if="deliver && deliver.deliverName"> |
|
||||
<!-- <u-badge :is-dot="true" is-center v-show="showBadge"></u-badge> --> |
|
||||
{{ deliver.deliverName }} |
|
||||
</span> |
|
||||
</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> |
||||
<view class="link-box"> |
<!-- 上传提交 --> |
||||
<u-input v-model="linkValue" type="text" :border="true" placeholder="请输入交付物地址/链接" class="input"></u-input> |
<p-deliver-upload v-if="isMine && deliver" @upload-success="getDeliverData"></p-deliver-upload> |
||||
</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="deleteDeliver">删除</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"> |
|
||||
<view class="rect rounded-md" @tap.stop> |
|
||||
<view class="text-center my-7 font-semibold">交付物标题名称</view> |
|
||||
<view> |
|
||||
<u-input :border="true" class="m-5" placeholder="请输入交付物名称" v-model="newInputRef"></u-input> |
|
||||
</view> |
|
||||
|
|
||||
<view class="flex justify-around h-12 mt-7 justify-self-stretch box-modal-border"> |
|
||||
<view class="leading-12 flex-1 text-center delete-modal-border" @click="showEditModal = false">取消</view> |
|
||||
<view class="text-blue-700 leading-12 flex-1 text-center" @click="confirmEditDeliverName">确定</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</u-mask> |
|
||||
|
|
||||
<!-- 插件审核人员选择 --> |
<p-deliver-check v-if="deliver" @check-success="getDeliverData"></p-deliver-check> |
||||
<Reviewer ref="reviewerRef" /> |
|
||||
</view> |
</view> |
||||
</template> |
</template> |
||||
|
|
||||
<script setup> |
<script setup> |
||||
import { ref, computed } from 'vue'; |
|
||||
import { useStore } from 'vuex'; |
import { useStore } from 'vuex'; |
||||
import { UPLOAD_URL } from '@/config/index'; |
import { ref, inject, provide, computed } from 'vue'; |
||||
import { UPLOAD_EXTENSION } from '@/config/deliver'; |
|
||||
|
|
||||
const props = defineProps({ task: { type: Object, default: () => {} } }); |
|
||||
const store = useStore(); |
const store = useStore(); |
||||
|
const task = inject('task'); |
||||
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 deliver = ref(null); // 服务端返回的交付物信息 |
const deliver = ref(null); // 服务端返回的交付物信息 |
||||
|
|
||||
// 判断提交按钮的状态 |
|
||||
const submitState = computed(() => !linkValue.value); |
|
||||
const projectId = computed(() => store.getters['project/projectId']); |
|
||||
const isMine = computed(() => store.getters['role/isMine']); // 是不是我的任务 |
const isMine = computed(() => store.getters['role/isMine']); // 是不是我的任务 |
||||
|
|
||||
|
provide('deliver', deliver); |
||||
|
|
||||
// 根据任务id获取交付物信息 |
// 根据任务id获取交付物信息 |
||||
(async function getDeliverData() { |
async function getDeliverData() { |
||||
try { |
try { |
||||
const { id: taskId } = props.task; |
const { id: taskId } = task; |
||||
if (!taskId) return; |
if (!taskId) return; |
||||
const param = { taskId: props.task.id }; |
const param = { taskId }; |
||||
const data = await uni.$u.api.getDeliverByTaskId(param); |
const data = await uni.$u.api.getDeliverByTaskId(param); |
||||
deliver.value = data; |
deliver.value = data; |
||||
} catch (error) { |
} catch (error) { |
||||
console.log('error: ', error); |
console.log('error: ', error); |
||||
} |
} |
||||
})(); |
|
||||
|
|
||||
// 验证提交的交付物信息格式 |
|
||||
function validateDeliverForm(checkedCheckers) { |
|
||||
const reg = /^http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- ./?%&=]*)?$/; |
|
||||
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; // 拿到选择检查人组件中选中的检查人 |
|
||||
|
|
||||
// 提交前的验证 |
getDeliverData(); |
||||
if (!validateDeliverForm(checkedCheckers)) return; |
|
||||
submitBtnLoading.value = true; // 显示loading |
|
||||
// 验证成功后进行请求 |
|
||||
try { |
|
||||
const checkerList = []; |
|
||||
checkedCheckers.forEach(item => { |
|
||||
checkerList.push(item.memberId); |
|
||||
}); |
|
||||
const param = { |
|
||||
projectId: projectId.value, |
|
||||
deliverId: deliver.value.deliverId, |
|
||||
fileList: [linkValue.value], |
|
||||
checkerList, |
|
||||
}; |
|
||||
await uni.$u.api.submitDeliverInfo(param); |
|
||||
uni.$ui.showToast('提交交付物信息成功'); |
|
||||
resetControlState(); // 重置控件的初始状态 |
|
||||
} 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/submitList/submitList?deliverId=${deliverId}` }); |
|
||||
} |
|
||||
|
|
||||
// 粘贴上传 |
|
||||
function paste() { |
|
||||
uni.getClipboardData({ |
|
||||
success(res) { |
|
||||
linkValue.value = res.data; |
|
||||
}, |
|
||||
}); |
|
||||
} |
|
||||
|
|
||||
// 文件上传 |
|
||||
async function uploadFile() { |
|
||||
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); |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
// TODO: 拍照上传 |
|
||||
async function uploadPhoto() { |
|
||||
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); |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
// 确定修改交付物名称 |
|
||||
async function confirmEditDeliverName() { |
|
||||
// TODO: 发请求 请求成功后更新task里的交付物信息 |
|
||||
if (!newInputRef.value) { |
|
||||
uni.$ui.showToast('输入不能为空'); |
|
||||
} |
|
||||
try { |
|
||||
const param = { |
|
||||
projectId: projectId.value, |
|
||||
taskId: props.task.id, |
|
||||
deliverName: newInputRef.value, |
|
||||
}; |
|
||||
await uni.$u.api.editDeliverName(param); |
|
||||
// uni.$ui.showToast('修改交付物名称成功'); |
|
||||
// 请求成功 才会清空 请求失败保留 |
|
||||
showEditModal.value = false; |
|
||||
showMask.value = false; |
|
||||
showBadge.value = false; |
|
||||
newInputRef.value = ''; |
|
||||
} catch (error) { |
|
||||
console.error('error: ', error); |
|
||||
uni.$ui.showToast('修改交付物名称失败'); |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
// 删除交付物按钮 |
|
||||
|
|
||||
function deleteDeliver() { |
|
||||
showDeleteModal.value = true; |
|
||||
} |
|
||||
// 二次确认后删除 |
|
||||
async function confirmDelete() { |
|
||||
// TODO: 删除二次确认 |
|
||||
// TODO: 确定后 发删除交付物的请求 |
|
||||
try { |
|
||||
showDeleteModal.value = true; |
|
||||
deliverRef.value = false; |
|
||||
await uni.$u.api.deleteDeliver(); |
|
||||
uni.$ui.showToast('删除交付物成功'); |
|
||||
} catch (error) { |
|
||||
console.error('error: ', error); |
|
||||
} |
|
||||
} |
|
||||
</script> |
</script> |
||||
|
|||||
Loading…
Reference in new issue