You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
244 lines
8.0 KiB
244 lines
8.0 KiB
<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 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="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="warp">
|
|
<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>
|
|
|
|
<!-- 插件审核人员选择 -->
|
|
<Reviewer ref="reviewerRef" />
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, computed } from 'vue';
|
|
import { useStore } from 'vuex';
|
|
import { UPLOAD_URL } from '@/config/index';
|
|
import { UPLOAD_EXTENSION } from '@/config/deliver';
|
|
|
|
const props = defineProps({ task: { type: Object, default: () => {} } });
|
|
const store = useStore();
|
|
|
|
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 submitState = computed(() => !linkValue.value);
|
|
const projectId = computed(() => store.getters['project/projectId']);
|
|
const isMine = computed(() => store.getters['role/isMine']); // 是不是我的任务
|
|
|
|
// 根据任务id获取交付物信息
|
|
(async function getDeliverData() {
|
|
try {
|
|
const { id: taskId } = props.task;
|
|
if (!taskId) return;
|
|
const param = { taskId: props.task.id };
|
|
const data = await uni.$u.api.getDeliverByTaskId(param);
|
|
deliver.value = data;
|
|
} catch (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; // 拿到选择检查人组件中选中的检查人
|
|
|
|
// 提交前的验证
|
|
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>
|
|
|