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

<template>
  <theme>
    <view class="bg-white rounded-md">
      <view class="p-3 flex justify-between" @click="iconRef = !iconRef">
        <span class="relative p-1">
          <u-badge :is-dot="true" is-center></u-badge>
          {{ nameRef }}
        </span>
        <u-icon name="arrow-right" v-show="!iconRef"></u-icon>
        <u-icon name="arrow-down" v-show="iconRef"></u-icon>
      </view>
      <view class="p-3 pt-0" v-show="iconRef">
        <!-- 提交人和时间信息 -->
        <view class="text-gray-400">
          <span class="mr-2">{{ submitter }}</span> <span> {{ timeRef }}</span>
        </view>
        <!-- 提交的链接信息 -->
        <view class="w-64 break-all text-blue-400 py-2"> http://192.168.0.99/gateway/defaultwbs/swagger-ui.html </view>
        <!-- 审核人信息 -->
        <view class="text-gray-400"> 审核 </view>
        <view class="px-2">
          <!-- 当前审核人（自己） -->
          <view class="mt-3">
            <span class="text-sm mr-4">冯教授</span>
            <u-button size="mini" shape="circle" class="mr-4 h-1-4 leading-1-4" type="primary" @click="approved">通过</u-button>
            <u-button size="mini" shape="circle" class="h-1-4 leading-1-4" type="error" @click="rebut">驳回</u-button>
          </view>
          <!-- 其他审核人 -->
          <view class="mt-3 text-sm flex justify-between">
            <view>
              <view class="pb-2">薇薇安</view>
              <view class="pb-2 text-gray-400">赞，很棒！</view>
              <view class="text-gray-400">12/28 12:55</view>
            </view>
            <view>
              <view>已通过</view>
              <!-- TODO:圆形进度条 -->
              <view>
                <!-- <u-circle-progress  active-color="#FA8C16" :percent="80" width="90" border-width="7" class="mt-2">
                        		<view class="u-progress-content">
                              <view class="progressDot text-white text-center">80</view>
                        		</view>
                        </u-circle-progress> -->
              </view>
            </view>
          </view>
          <view class="mt-3 text-sm flex justify-between">
            <view> 周亮</view>
            <view>待审核</view>
          </view>
        </view>
      </view>

      <!-- 审核通过的modal -->
      <u-mask :show="approvedModal" @click="approvedModal = false">
        <view class="warp">
          <view class="rect2" @tap.stop>
            <!-- 通过modal的标题 -->
            <view class="text-center my-7 font-semibold"> 审核通过 </view>
            <!-- 通过modal的进步器和滑动选择器 -->
            <view class="flex justify-between mx-5">
              <u-number-box v-model="score" size="30" input-width="50"></u-number-box>
              <view class="w-32 pt-4">
                <u-slider v-model="score" active-color="#34D399"></u-slider>
              </view>
            </view>
            <view>
              <textarea class="border-solid border border-gray-300 m-5 w-58 h-16 p-2 rounded-md"
              placeholder="请输入通过建议"
              maxlength="30"
              v-model="adviceRef"
              ></textarea>
              <!-- <view @click="adviceRef = '加油，再接再厉！' " class="mx-5">
                加油，再接再厉！
              </view> -->
              <view class="common-list">
                <view v-for="item in commonWords" class="h-12 leading-12 w-62 mx-5" @click="adviceRef = item">
                   {{item}}
                 </view>
              </view>
            </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="approvedModal = false"> 取消 </view>
              <view class="text-blue-700 leading-12 flex-1 text-center" @click="confirmAdvice"> 确定 </view>
            </view>
          </view>
        </view>
      </u-mask>

      <!-- 审批驳回的modal -->
      <u-mask :show="rebutModal" @click="rebutModal = false">
        <view class="warp">
          <view class="rect3" @tap.stop>
            <!-- 通过modal的标题 -->
            <view class="text-center my-6 font-semibold"> 审核驳回 </view>
            <view>
              <textarea class="border-solid border border-gray-300 m-5 w-58 h-16 p-2 rounded-md"
              placeholder="请输入通过建议"
              maxlength="30"
              v-model="rebutRef"
              ></textarea>
              <!-- <view @click="adviceRef = '加油，再接再厉！' " class="mx-5">
                加油，再接再厉！
              </view> -->
              <view class="common-list">
                <view v-for="item in rebutWordes" class="h-12 leading-12 w-62 mx-5" @click="rebutRef = item">
                   {{item}}
                 </view>
              </view>
            </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="rebutModal = false"> 取消 </view>
              <view class="text-blue-700 leading-12 flex-1 text-center" @click="confirmReject"> 确定 </view>
            </view>
          </view>
        </view>
      </u-mask>
    </view>
  </theme>
</template>

<script setup>
import { ref } from 'vue';
const nameRef = ref('入职插件V0.8原型输出');
const iconRef = ref(false);
const submitter = ref('黛西');
const timeRef = ref('12/28 15:55');
const approvedModal = ref(false);  //审核通过的modal
const rebutModal = ref(false)  //审核驳回的modal
const score = ref(1);         //分数
const adviceRef = ref('')     // 审核通过的审批语
const rebutRef = ref('')      // 审核驳回的审批语
const commonWords = ['加油，再接再厉！','很棒！','不错，很详细！','加油，再接再厉']  // 审核通过常用的审批语
const rebutWordes = ['不详细','还有需要改进的地方','驳回审批1','驳回审批2']   //审核驳回常用的审批语

// 通过的按钮事件
function approved() {
  // console.log('通过')
  approvedModal.value = true;
}
// 驳回的按钮事件
function rebut() {
  rebutModal.value = true
  console.log('驳回');
}

// 审核通过发送相关请求
function confirmAdvice(){
  // TODO:发送请求
  // console.log('确定')
  approvedModal.value = false
}
// 审核驳回发送相关请求
function confirmReject(){
  // TODO:发送请求
  rebutModal.value = false
}
</script>

<style scoped lang="scss">

.progressDot {
  width: 50rpx;
  height: 50rpx;
  border-radius: 50%;
  line-height: 50rpx;
  background-color: #fa8c16;
}
</style>