在线验签

src/styles/app/main.scss

@@ -1,4 +1,5 @@
 html, body, #app {
+    position: relative;
     height: 100%;
     font-size: 14px;
     background-color: #F0F2F5;

src/views/data-fill/query.vue

@@ -221,6 +221,31 @@
             @hide="showReportModal = false"
             @tag-close="reportTaskTagClose"
         />
+
+        <!-- 在线验签 -->
+        <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>
     </div>
 </template>
 
@@ -738,28 +763,61 @@ const batchLocal = async () => {
 
 //在线验签
 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
     }
-    if (rows[0].status !== 2) {
+    //判断是否满足条件
+    const result = rows.every(({ status }) => {
+        return status === 2
+    })
+    //判断状态
+    if (!result) {
         window.$message?.warning('存在未审批或未上报数据')
         return
     }
-    //发起
+    //发起请求
+    const ids = arrToId(rows)
     onlineLoading.value = true
-    const { error, code, data } = await queryApi.onlineVerify({
-        ids: rows[0]['id'],
+    const { error, code, msg, data } = await queryApi.onlineVerify({
+        ids: ids,
     })
     //处理数据
-    localLoading.value = false
+    onlineLoading.value = false
     if (!error && code === 200) {
-        console.log(data)
+        onlineVerifyData.value = getObjValue(data)
+        //cscTableData.value = getArrValue(data['certBeanVOList'])
+        isOnlineVerifyDrawer.value = true
+    } else {
+        onlineVerifyData.value = {}
+        window.$message?.error(msg ?? '操作失败')
     }
 }
 
+//签名信息
+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
+}
+
 //树展开和收起
 const isWbsTreeShow = ref(true)
 const setWbsTreeShow = () => {
@@ -829,3 +887,25 @@ const signClick = async () => {
     cursor: pointer;
 }
 </style>
+
+<style lang="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>