TALL-MUI-4/plugins/p-deliver/p-deliver.vue

<template>
  <!-- <view class="deliver-container">p-deliver</view> -->
  <!-- TODO： if 是测试用的 -->
  <view class="my-2 bg-white p-2 rounded-md relative" @longpress.prevent="showMask = true" v-if="deliverRef">
    <!-- 插件名称输入和提交 -->
    <view class="flex item-center justify-between py-3 pl-2" :class="inputRef">
      <!-- <u-input v-model="iptValue" type="text" :border="false" placeholder="请编辑交付物名称" /> -->
      <!-- TODO: 可能会有多个交付物 需要遍历 或者展示第一个 -->
      <!-- TODO: 应该是交付物的名称 -->
      <view :class="viewRef" class="flex-1">
        <span class="relative px-1">
          <u-badge :is-dot="true" is-center></u-badge>
          {{ task.name }}
        </span>
      </view>

      <u-button type="primary" size="mini" @click="submit" class="self-center" :disabled="submitState">提交</u-button>

      <!-- 查看提交历史的按钮 -->
      <u-icon name="arrow-right" class="ml-3" @click="openDeliverHistory"></u-icon>
    </view>

    <!-- 插件上传方式 -->
    <view>
      <u-input v-model="linkValue" type="text" :border="true" placeholder="请输入交付物地址/链接"> </u-input>
      <view class="mt-3">
        <u-button size="mini" type="primary" :plain="true" class="mr-3" @click="paste">粘贴</u-button>
        <u-button size="mini" type="primary" :plain="true" class="mr-3" @click="uploadFile">文件</u-button>
        <u-button size="mini" type="primary" :plain="true" class="mr-3" @click="uploadPhoto">拍照</u-button>
      </view>
    </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 class="">
            <u-input :border="true" class="m-5" placeholder="请输入交付物名称" v-model="newInputRef" />
          </view>
          <!-- TODO: 边框 -->
          <view class="flex justify-around h-12 mt-7 justify-self-stretch">
            <view class="leading-12 flex-1 text-center" @click="showEditModal = false"> 取消 </view>
            <view class="text-blue-700 leading-12 flex-1 text-center" @click="confirmEditDeliverName"> 确定 </view>
          </view>
        </view>
      </view>
    </u-mask>

    <!-- 编辑和删除的遮罩层 -->
    <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>
    </view>

    <!-- 插件审核人员选择 -->
    <Reviewer ref="reviewerData"></Reviewer>
  </view>
</template>

<script setup>
import { ref, computed, reactive } from 'vue';

defineProps({ task: { type: Object, default: () => {} } })

// 插件名称
const deliverRef = ref(true); // 交付物插件的显示与销毁
const textValue = ref('入职插件V0.8原型输出'); // 插件名的值
const linkValue = ref(''); // 链接的值
const historyIcon = ref(false); // 查看历史记录的图标
const showMask = ref(false); // 编辑和删除页面
const showEditModal = ref(false); // 编辑交付物标题的modal

const newInputRef = ref(''); // 修改的插件名的值
const submitHistory = reactive([]); // 提交的历史记录列表
const reviewerData = ref();

// const aa = this.$reviewer.arrList

// 判断提交按钮的状态
const submitState = computed(() => !linkValue.value);

// 获取当前时间
function getTime() {
  const MM = uni.$dayjs().$M + 1;
  const DD = uni.$dayjs().$D;
  const HH = uni.$dayjs().$H;
  const mm = uni.$dayjs().$m;
  return `${MM}/${DD} ${HH}:${mm < 10 ? `0${mm}` : mm}`;
}

// 提交后验证链接并修改状态
function submit() {
  const reg = /^http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- ./?%&=]*)?$/;
  if (!reg.test(linkValue.value)) {
    // 显示toast信息
    uni.$ui.showToast('请输入正确的链接');
  } else {
    inputRef.value = 'hidden';
    viewRef.value = 'block';

    // 创建提交的历史对象
    const obj = {};
    const time = getTime();
    obj.name = textValue.value;
    obj.time = time;
    obj.link = linkValue.value;
    obj.deliver = reviewerData.value.arrList;
    submitHistory.push(obj);
    // console.log(submitHistory)
    // console.log(reviewerData.value.arrList)
  }
}

// 查看历史记录
function openDeliverHistory() {
  const editItem = submitHistory;
  uni.navigateTo({ url: `/pages/submitList/submitList?editItem=${encodeURIComponent(JSON.stringify(editItem))}` });
  // console.log(editItem)
}

// 粘贴上传
function paste() {
  uni.getClipboardData({
    success(res) {
      linkValue.value = res.data;
    },
  });
}

// 文件上传
function uploadFile() {
  uni.chooseFile({
    count: 1, // 默认100
    extension: ['.zip', '.doc'],
    success(res) {
      // TODO: 发请求上传文件 api返回的url填到输入框
      linkValue.value = JSON.stringify(res.tempFilePaths);
    },
  });
}

// 拍照上传
function uploadPhoto() {
  uni.chooseImage({
    count: 1, // 默认9
    sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
    sourceType: ['album', 'camera'], // 从相册选择
    success(res) {
      // TODO: 发请求上传文件 api返回的url填到输入框
      linkValue.value = JSON.stringify(res.tempFilePaths);
    },
  });
}

// 确定修改交付物名称
function confirmEditDeliverName() {
  // TODO: 发请求 请求成功后更新task里的交付物信息
  if (!newInputRef.value) {
    //TODO: 提示不能为空
  }
  // 请求成功 才会清空 请求失败保留
  newInputRef.value = '';
  //
  historyIcon.value = true;
}

// 删除交付物按钮
async function deleteDeliver() {
  // TODO: 删除二次确认
  // TODO: 确定后 发删除交付物的请求
  try {
    await uni.$u.api.deleteDeliver();
    uni.$ui.showToast("删除交付物成功");
  } catch (error) {
    console.error('error: ', error);
  }
  deliverRef.value = false;
}
</script>

<style scoped lang="scss">
.box {
  border-radius: 8px;
  background: #fff;
  padding: 16px;
  overflow: hidden;
}

.warp {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80%;
}
.rect {
  width: 80%;
  height: 380rpx;
  background-color: #fff;
}
</style>