feat: 交付物新

CHANGELOG.md

@@ -1,8 +1,9 @@
-# 0.1.0 (2021-12-24)
+# 0.1.0 (2021-12-27)
 
 ### 🌟 新功能
 范围|描述|commitId
 --|--|--
+ - | "交付物" | ecd6658
  - | 绑定手机号 | 52e0352
  - | 标题栏变化 | 3898cfe
  - | 标题栏变化 | c0fcd9d

package.json

@@ -26,10 +26,10 @@
   },
   "dependencies": {
     "@dcloudio/uni-app-plus": "^2.0.0-31920210709003",
+    "@dcloudio/uni-cli-i18n": "^2.0.0-31920210709003",
     "@dcloudio/uni-h5": "^2.0.0-31920210709003",
     "@dcloudio/uni-helper-json": "*",
     "@dcloudio/uni-i18n": "^2.0.0-31920210709003",
-    "@dcloudio/uni-cli-i18n": "^2.0.0-31920210709003",
     "@dcloudio/uni-mp-vue": "^2.0.0-31920210709003",
     "@dcloudio/uni-mp-weixin": "^2.0.0-31920210709003",
     "@dcloudio/uni-quickapp-native": "^2.0.0-31920210709003",

src/plugins/p-upload-deliverable/p-upload-deliverable.vue

@@ -1,8 +1,13 @@
 <template>
   <!-- 上传交付物 -->
   <view class="pt-2 relative">
-    <template v-if="history.length === 0 || currStatus === -1 || currStatus === 2">
+    <template v-if="history.length === 0 || currStatus === -1">
-      <u-input v-if="deliveryType === 1" :border="border" :height="height" :type="type" v-model="content" placeholder="请输入链接" />
+      <view class="flex items-center relative" v-if="deliveryType === 1">
+        <u-input :border="border" :height="height" :type="type" v-model="content" placeholder="请输入链接" />
+        <!-- #ifdef MP-WEIXIN -->
+        <text class="paste-btn absolute right-0 inline-block text-center bg-blue-500 text-white" @click="getClipboardCon"> 粘贴 </text>
+        <!-- #endif -->
+      </view>
 
       <u-input
         v-if="deliveryType === 2"
@@ -26,15 +31,6 @@
         @click="ImgUpload"
       />
 
-      <!-- <u-upload
-        v-if="deliveryType === 3"
-        max-count="1"
-        :source-type="['camera']"
-        :name="'param'"
-        :action="action"
-        :header="header"
-      ></u-upload> -->
-
       <view class="mt-2">
         <template v-if="currStatus === -1 || currStatus === 2">
           <u-button size="mini" class="btn-radius" :custom-style="customStyle" @click="changeDeliveryType(1)">链接</u-button>
@@ -47,7 +43,13 @@
         <view class="examine-title flex justify-between items-center">
           <view class="flex-shrink-0" style="color: #999">审核人</view>
           <view class="flex items-center justify-end" style="color: #595959; width: calc(100% - 60px)">
-            <text class="examine-people text-right mr-2">{{ examinePerpol }}</text>
+            <view class="examine-people text-right mr-2">
+              <text v-if="examinePerpol.length === 0">请选择审核人</text>
+              <text v-else class="ml-1" :style="{ color: item.style }" v-for="(item, index) in examinePerpol" :key="index">
+                {{ item.name }}
+              </text>
+            </view>
+
             <u-icon name="arrow-down" v-if="!isShowMembers" @click="showMembers"></u-icon>
             <u-icon name="arrow-up" v-else @click="showMembers"></u-icon>
           </view>
@@ -63,6 +65,7 @@
               :key="index"
               :name="item.name"
               :data-id="item.id"
+              shape="circle"
             >
               {{ item.name }}
             </u-checkbox>
@@ -77,20 +80,61 @@
       <text class="mr-2" v-if="currStatus === 1">已通过</text>
       <text class="mr-2 text-red-500" v-if="currStatus === 2">已驳回</text>
       <u-button class="btn-radius" @click="submit" size="mini" type="primary" v-if="currStatus === 2">重新提交</u-button>
-      <!-- <u-icon @click="changeShowHistory" name="arrow-right" v-if="!showHistory"></u-icon>
-      <u-icon @click="changeShowHistory" name="arrow-down" v-else></u-icon> -->
     </view>
 
     <template v-if="history.length > 0">
       <template v-for="(item, index) in history">
-        <view class="to-examine mt-2 py-1 flex flex-wrap overflow-hidden break-all" :key="index" v-if="item.content">
+        <view :key="index" v-if="currStatus === 2">
+          <u-input :key="index" :border="border" :height="height" :type="type" v-model="item.content" placeholder="请输入链接" />
+
+          <view class="mt-2">
+            <u-button size="mini" class="btn-radius" :custom-style="customStyle" @click="changeDeliveryType(1)">链接</u-button>
+            <u-button size="mini" class="btn-radius" :custom-style="customStyle" @click="changeDeliveryType(2)">文件</u-button>
+            <u-button size="mini" class="btn-radius" :custom-style="customStyle" @click="changeDeliveryType(3)">拍照</u-button>
+          </view>
+
+          <view class="to-examine mt-2">
+            <view class="examine-title flex justify-between items-center">
+              <view class="flex-shrink-0" style="color: #999">审核人</view>
+              <view class="flex items-center justify-end" style="color: #595959; width: calc(100% - 60px)">
+                <view class="examine-people text-right mr-2">
+                  <text v-if="examinePerpol.length === 0">请选择审核人</text>
+                  <text v-else class="ml-1" :style="{ color: item.style }" v-for="(item, index) in examinePerpol" :key="index">
+                    {{ item.name }}
+                  </text>
+                </view>
+
+                <u-icon name="arrow-down" v-if="!isShowMembers" @click="showMembers"></u-icon>
+                <u-icon name="arrow-up" v-else @click="showMembers"></u-icon>
+              </view>
+            </view>
+
+            <view class="examine-con" v-if="isShowMembers">
+              <u-checkbox-group @change="checkboxGroupChange">
+                <u-checkbox
+                  style="width: 25%"
+                  @change="checkboxChange($event, item)"
+                  v-model="item.checked"
+                  v-for="(item, index) in list"
+                  :key="index"
+                  :name="item.name"
+                  :data-id="item.id"
+                  shape="circle"
+                >
+                  {{ item.name }}
+                </u-checkbox>
+              </u-checkbox-group>
+            </view>
+          </view>
+        </view>
+
+        <view class="to-examine py-1 flex flex-wrap overflow-hidden break-all" :key="index" v-if="item.content && currStatus !== 2">
           <a :href="item.content" class="text-blue-500 u-font-12 font-thin" target="_blank" v-if="CheckUrl(item.content)">
             {{ item.content ? item.content : item.filePath }}
           </a>
           <span v-else>{{ item.content }}</span>
         </view>
 
-        <!-- <template v-if="showHistory"> -->
         <view :class="index === 0 ? 'mt-4' : 'mt-3'" v-for="(checker, index) in item.checkerList" :key="index">
           <view class="flex justify-between">
             <view class="leading-none flex items-center">
@@ -110,40 +154,26 @@
           </view>
           <view class="text-gray-400 text-xs mt-1">{{ checker.remark }}</view>
         </view>
-        <!-- </template> -->
       </template>
     </template>
-
-    <!-- 选择检查人 -->
-    <!-- <ChooseChecker ref="checker" :checkerList="checkerList" @setCheckerList="setCheckerList"></ChooseChecker> -->
-
-    <!-- <view class="mt-2 flex justify-between">
-      <u-icon @click="changeShowHistory" name="arrow-up" v-if="showHistory"></u-icon>
-      <u-icon @click="changeShowHistory" name="arrow-down" v-else></u-icon>
-    </view>
-
-    <p-delivery-history :task="task" v-if="showHistory" /> -->
   </view>
 </template>
 
 <script>
-// import ChooseChecker from '@/components/ChooseChecker/ChooseChecker.vue';
 import { mapState, mapGetters } from 'vuex';
 
 export default {
   name: 'p-upload-deliverable',
-  // components: { ChooseChecker },
   props: { task: { type: Object, default: null } },
   data() {
     return {
       content: '',
       type: 'text',
       border: true,
-      height: 64,
+      height: 60,
       checkerList: [],
-      // showHistory: false, // 展开历史记录
       list: [],
-      examinePerpol: '请选择审核人',
+      examinePerpol: [],
       isShowMembers: false, // 是否显示成员列表
       currStatus: -1, // 当前状态
       history: [],
@@ -154,7 +184,6 @@ export default {
       },
       deliveryType: 1,
       // 上传
-      // action: `${uni.$t.domain}/file/upload`,
       fileData: {
         fileId: '',
         name: '',
@@ -172,10 +201,6 @@ export default {
     ...mapState('role', ['members']),
     ...mapState('user', ['token']),
     ...mapGetters('project', ['projectId']),
-
-    // header() {
-    //   return { Authorization: `Bearer ${this.token}` };
-    // },
   },
 
   mounted() {
@@ -193,9 +218,17 @@ export default {
   },
 
   methods: {
+    // 获取剪切板内容
+    getClipboardCon() {
+      uni.getClipboardData({
+        success: function (res) {
+          this.content = res.data;
+        },
+      });
+    },
+
     // 改变交付物类型
     changeDeliveryType(data) {
-      console.log(11111);
       this.deliveryType = data;
     },
 
@@ -211,16 +244,12 @@ export default {
 
     // 选中任一checkbox时，由checkbox-group触发
     checkboxGroupChange(e) {
+      this.examinePerpol = [];
       if (e.length > 0) {
-        this.examinePerpol = e[0];
+        e.forEach(item => {
-
+          let obj = { name: item, style: '#595959' };
-        e.forEach((item, index) => {
+          this.examinePerpol.push(obj);
-          if (index > 0) {
-            this.examinePerpol += ' ' + item;
-          }
         });
-      } else {
-        this.examinePerpol = '请选择审核人';
       }
     },
 
@@ -229,21 +258,6 @@ export default {
       this.isShowMembers = !this.isShowMembers;
     },
 
-    // 设置检查人
-    // setCheckerList(checked, item) {
-    //   if (checked) {
-    //     this.checkerList.push(item.memberId);
-    //   } else {
-    //     const index = this.checkerList.findIndex(checker => checker === item.memberId);
-    //     this.checkerList.splice(index, 1);
-    //   }
-    // },
-
-    // 展开合上历史记录
-    // changeShowHistory() {
-    //   this.showHistory = !this.showHistory;
-    // },
-
     // 上传文件
     async uploadFile() {
       try {
@@ -298,11 +312,7 @@ export default {
         await this.$u.api.saveDeliver(params);
         this.$t.ui.showToast('交付物提交成功');
         this.currStatus = 0;
-        // this.isShowMembers = false;
         this.getDeliverOfTask();
-        // this.content = '';
-        // this.checkerList = [];
-        // this.$refs.checker.clearChecked();
       } catch (error) {
         console.error('p-upload-deliverable.vue submit error: ', error);
         this.$t.ui.showToast('交付物提交失败，请稍后重试');
@@ -317,13 +327,31 @@ export default {
 
         if (data.length > 0) {
           let flag = -1;
-
+          this.examinePerpol = [];
           data.forEach(item => {
             if (item.filePath) {
               item.content = item.filePath;
             }
 
             item.checkerList.forEach(v => {
+              let style = '#595959';
+              if (v.status === 0) {
+                style = '#595959';
+              } else if (v.status === 1) {
+                style = '#52C41A';
+              } else if (v.status === 2) {
+                style = '#FF2121';
+              }
+
+              let obj = { name: v.checkerName, style: style };
+              this.examinePerpol.push(obj);
+
+              this.list.forEach(item => {
+                if (item.id === v.checkerId) {
+                  item.checked = true;
+                }
+              });
+
               if (flag === 2) {
                 this.currStatus = 2; // 已驳回
               }
@@ -366,6 +394,15 @@ export default {
 </script>
 
 <style scoped lang="scss">
+.paste-btn {
+  width: 100rpx;
+  height: 64rpx;
+  line-height: 64rpx;
+  font-size: 12px;
+  border-top-right-radius: 4rpx;
+  border-bottom-right-radius: 4rpx;
+}
+
 .to-examine {
   padding-left: 20rpx;
   padding-right: 20rpx;
@@ -386,22 +423,18 @@ export default {
   .examine-con {
     margin: 10rpx 0 20rpx;
   }
-}
 
-::v-deep .u-checkbox__label {
+  ::v-deep .u-checkbox__label {
-  font-size: 24rpx;
+    font-size: 24rpx !important;
-  color: #999999;
+    color: #999999 !important;
-}
+    margin-left: 16rpx !important;
-
+    margin-right: 0 !important;
-::v-deep .u-checkbox__icon-wrap {
+  }
-  width: 20rpx !important;
-  height: 20rpx !important;
-  border-radius: 50%;
-}
 
-::v-deep .u-checkbox__label {
+  ::v-deep .u-checkbox__icon-wrap {
-  margin-left: 16rpx;
+    width: 20rpx !important;
-  margin-right: 0;
+    height: 20rpx !important;
+  }
 }
 
 ::v-deep .u-icon__icon.uicon-checkbox-mark {