feat: 审核插件的基本信息展示

CHANGELOG.md

@@ -65,6 +65,7 @@
 范围|描述|commitId
 --|--|--
  - | 交付物插件代码审查 | [5f4d47b](https://101.201.226.163:50022/TALL/TALL-MUI-4/commits/5f4d47b)
+ - | 完善历史记录页面和修改插件的TODO | [3d58c15](https://101.201.226.163:50022/TALL/TALL-MUI-4/commits/3d58c15)
  - | 项目列表 | [0486e98](https://101.201.226.163:50022/TALL/TALL-MUI-4/commits/0486e98)
  - | 修改插件名的输入框和查看历史记录 | [99fb88e](https://101.201.226.163:50022/TALL/TALL-MUI-4/commits/99fb88e)
  - | 原有功能提交别的分支 | [eb02b72](https://101.201.226.163:50022/TALL/TALL-MUI-4/commits/eb02b72)

common/styles/tailwind.scss

@@ -4557,4 +4557,13 @@ border-radius: 0.375rem;
 	--tw-border-opacity: 1;
 	border-color: rgba(229, 231, 235, var(--tw-border-opacity));
 }
+.w-64{
+	width: 16rem;
+}
+.w-32{
+	width: 8rem
+}
+.break-all{
+	word-break: break-all;
+}
 

common/styles/theme/default.scss

@@ -26,29 +26,27 @@
 		border-right:1px solid  #D1D5DB ;
 	}
   }
-  .u-navbar {
+	.warp {
-    background-color: #007aff !important;
+	  display: flex;
-    color: #fff;
+	  align-items: center;
-    .uicon-nav-back {
+	  justify-content: center;
-      color: #fff !important;
+	  height: 50%;
-    }
+	}
-  }
+	.rect {
-  .box {
+	  width: 80%;
-  border-radius: 8px;
+	  height: 375rpx;
-  background: #fff;
+	  background-color: #fff;
-  padding: 16px;
+	}
-  overflow: hidden;
+	.rect2{
-}
+		width: 80%;
-
+		height: 500rpx;
-.warp {
+		background-color: #fff;
-  display: flex;
+	}
-  align-items: center;
+	.linkBox{
-  justify-content: center;
+		::v-deep .input{
-  height: 80%;
+		  .u-input__input{
-}
+			color: #60A5FA;
-.rect {
+		  }
-  width: 80%;
+	  }
-  height: 380rpx;
+	}
-  background-color: #fff;
-}
 }

components/Globals/Globals.vue

@@ -29,6 +29,7 @@
                       :style-type="plugin.styleType || 0"
                       v-for="plugin in pluginArr"
                     />
+                    <p-deliver-checker />
                   </template>
                 </view>
               </template>

components/Reviewer/Reviewer.vue

@@ -7,7 +7,8 @@
          <!-- 展示选择的审核人 -->
 		    <view class="flex approver item-center truncate justify-end flex-1 text-sm" v-show="isUicon">
 		       <view v-for="item in computedDelivers">
-		          <view v-show="item.checked" class="mx-1">
+		          <view v-show="item.checked" class="mx-1 relative">
+                  <!-- <u-badge :is-dot="true" is-center></u-badge> -->
 		             {{item.name}}
 		           </view>
 		       </view>
@@ -98,9 +99,9 @@
     // console.log(arrList.value)
   }
 
-  defineExpose({
+  // defineExpose({
-    arrList
+  //   arrList
-  })
+  // })
 
 </script>
 

pages/submitlist/submitlist.vue

@@ -29,13 +29,11 @@
                     {{items.state}}
                 </view>
                 <view v-if="items.state === '已通过'">
-                    <u-circle-progress  active-color="#FA8C16" :percent="items.grade" width="90" border-width="7" class="circleProgress mt-2">
+                    <u-circle-progress  active-color="#FA8C16" :percent="items.grade" width="90" border-width="7" class="mt-2">
                     		<view class="u-progress-content">
-                    			<!-- <view class="u-progress-dot"></view> -->
+                          <view class="progressDot text-white">{{items.grade}}</view>
-                    			<!-- <text class='u-progress-dot text-xs bg-yellow-500'>{{items.grade}}</text> -->
-                          <view class="u-progress-dot text-white">{{items.grade}}</view>
                     		</view>
-                    	</u-circle-progress>
+                    </u-circle-progress>
                 </view>
             </view>
 
@@ -80,10 +78,7 @@
 </script>
 
 <style lang="scss">
-.circleProgress{
+.progressDot{
-  border-radius: 50%;
-}
-.u-progress-dot{
   width: 50rpx;
   height: 50rpx;
   border-radius: 50%;

plugins/p-deliver-check/p-deliver-check.vue

@@ -9,7 +9,6 @@
       <slider :value="score" @change="sliderChange" max="100" min="0" show-value style="width: 60%" />
       <u-input :border="border" :type="type1" @input="changeNumber" maxlength="100" placeholder="输入分数" v-model="score" />
     </view>
-
     <view class="flex flex-col justify-center mt-5">
       <u-button @click="submit" size="medium" type="primary">提交</u-button>
       <u-button @click="$emit('closeScore')" class="mt-2" size="medium">取消</u-button>

plugins/p-deliver-checker/p-deliver-checker.vue

@@ -0,0 +1,113 @@
+<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="btn mr-4" type="primary" @click="approved">通过</u-button>
+            <u-button size="mini" shape="circle" class="btn" 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>
+              <u-input :border="true" class="m-5" placeholder="请输入通过建议" type="textarea"></u-input>
+            </view>
+            <view class="flex justify-around h-12 mt-7 justify-self-stretch boxModalBorder">
+              <view class="leading-12 flex-1 text-center deleteModalBorder"> 取消 </view>
+              <view class="text-blue-700 leading-12 flex-1 text-center"> 确定 </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);
+const score = ref(1);
+
+function approved() {
+  // console.log('通过')
+  approvedModal.value = true;
+}
+
+function rebut() {
+  console.log('驳回');
+}
+</script>
+
+<style scoped lang="scss">
+.btn {
+  height: 1.4rem;
+  line-height: 1.4rem;
+}
+.progressDot {
+  width: 50rpx;
+  height: 50rpx;
+  border-radius: 50%;
+  line-height: 50rpx;
+  background-color: #fa8c16;
+}
+</style>

plugins/p-deliver/p-deliver.vue

@@ -22,7 +22,9 @@
 
     <!-- 插件上传方式 -->
     <view>
-      <u-input v-model="linkValue" type="text" :border="true" placeholder="请输入交付物地址/链接"> </u-input>
+      <view class="linkBox">
+         <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" class="mr-3 btns" @click="paste">粘贴</u-button>
         <u-button size="mini"  :plain="true" class="mr-3 btns" @click="uploadFile">文件</u-button>
@@ -69,24 +71,34 @@ import { ref, computed} from 'vue';
  const taskRef = defineProps({ task: { type: Object, default: () => {} } })
  // console.log(taskRef.task.name)
 
-
 // 插件名称
 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(taskRef.task.name); // 修改的插件名的值
-// const reviewerData = ref();   // 获取选中的审核人
 const showDeleteModal = ref(false)  // 删除二次提示的modal
-const content = ref('是否确定删除')
+const content ='是否确定删除'
 const uBadgeShow = ref(false)   //u-badge的显示与隐藏
 
 // 判断提交按钮的状态
 const submitState = computed(() => !linkValue.value);
 
 
+// (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);
+//     uni.$ui.showToast('获取交付物信息失败')
+//   }
+// })
+
+
 // 提交后验证链接并修改状态
 function submit() {
   const reg = /^http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- ./?%&=]*)?$/;
@@ -174,26 +186,7 @@ async function confirmDelete() {
   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>