在线验签

src/views/file/collection.vue

@@ -38,6 +38,7 @@
                 <HcTooltip keys="file_collection_btn_del">
                     <el-button hc-btn type="danger" :disabled="tableCheckedKeys.length <= 0" @click="delModalClick">删除</el-button>
                 </HcTooltip>
+                <el-button :disabled="tableCheckedKeys.length <= 0" :loading="onlineLoading" hc-btn color="#e03997" @click="batchOnline">在线验签</el-button>
             </template>
             <template #extra>
                 <HcTooltip keys="file_collection_btn_moves">
@@ -379,6 +380,31 @@
 
         <!-- 批量编辑 -->
         <HcReport :show="isReport" :data="reportData" @finish="reportFinish" @hide="isReport = false" />
+
+        <!-- 在线验签 -->
+        <hc-new-drawer v-model="isOnlineVerifyDrawer" modal-class="hc-online-verify-drawer" to-id="app" @close="onlineVerifyDrawerClose">
+            <hc-new-card>
+                <template #header>
+                    <div class="online-verify-title">这是标题名称</div>
+                </template>
+                <template #extra>
+                    <div class="online-verify-icon" @click="onlineVerifyDrawerClose">
+                        <HcIcon name="close-circle" />
+                        <span class="ml-1">关闭</span>
+                    </div>
+                </template>
+                <hc-body split padding="0px" :options="onlineVerifyOptions">
+                    <template #left>
+                        <hc-new-card>
+                            <HcPdf :src="onlineVerifyData.pdfUrl" />
+                        </hc-new-card>
+                    </template>
+                    <hc-new-card>
+                        <HcTable :column="cscTableColumn" :datas="cscTableData" is-new :index-style="{ width: 60 }" />
+                    </hc-new-card>
+                </hc-body>
+            </hc-new-card>
+        </hc-new-drawer>
     </hc-body>
 </template>
 
@@ -1613,8 +1639,87 @@ const reportModalClick = () => {
 const reportFinish = () => {
     searchClick()
 }
+
+//在线验签
+const onlineLoading = ref(false)
+const onlineVerifyData = ref({})
+const isOnlineVerifyDrawer = ref(false)
+const onlineVerifyOptions = {
+    sizes: [50, 50],
+    snapOffset: 0,
+    minSize: ['10%', '80%'],
+}
+const batchOnline = async () => {
+    const rows = tableCheckedKeys.value
+    if (rows.length > 1) {
+        window.$message?.warning('在线验签只能勾选一条数据进行验签')
+        return
+    }
+    //判断是否满足条件
+    const result = rows.every(({ status }) => {
+        return status === 2
+    })
+    //判断状态
+    if (!result) {
+        window.$message?.warning('存在未审批或未上报数据')
+        return
+    }
+    //发起请求
+    //const ids = arrToId(rows)
+    onlineLoading.value = true
+    /*const { error, code, msg, data } = await queryApi.onlineVerify({
+        ids: ids,
+    })
+    //处理数据
+    onlineLoading.value = false
+    if (!error && code === 200) {
+        onlineVerifyData.value = getObjValue(data)
+        //cscTableData.value = getArrValue(data['certBeanVOList'])
+        isOnlineVerifyDrawer.value = true
+    } else {
+        onlineVerifyData.value = {}
+        window.$message?.error(msg ?? '操作失败')
+    }*/
+    onlineVerifyData.value = {}
+    isOnlineVerifyDrawer.value = true
+}
+
+//签名信息
+const cscTableColumn = [
+    { key:'user', name: '签名者', width: 300 },
+    { key:'time', name: '签名时间', width: 200 },
+    { key:'val', name: '摘要' },
+]
+const cscTableData = ref([])
+
+//在线验签抽屉被关闭
+const onlineVerifyDrawerClose = () => {
+    isOnlineVerifyDrawer.value = false
+    onlineLoading.value = false
+}
 </script>
 
 <style lang="scss">
 @import '~style/file/collection.scss';
+
+//在线验签
+.hc-online-verify-drawer .el-card.hc-new-card-box {
+    .hc-card-header-box {
+        .online-verify-title {
+            font-size: 20px;
+        }
+        .online-verify-icon {
+            display: flex;
+            align-items: center;
+            cursor: pointer;
+            color: #5a5959;
+            i {
+                font-size: 18px;
+            }
+            &:hover {
+                color: var(--el-color-primary);
+            }
+        }
+    }
+}
 </style>