Merge pull request 'bug' (#56) from shen into test

Reviewed-on: #56

src/views/final/comp/RepeatTaskTableModal.vue

@@ -184,7 +184,7 @@ async function query(page: number, pageSize: number) {
   const result = await getRepeatList({
     sortorder: 'asc',
     pageSize: pagination.pageSize,
-    pageNo: 1,
+    pageNo: pagination.page,
     sortname: '',
   })
   console.log(666666)
@@ -362,6 +362,15 @@ function goDetail(row) {
   router.push({ name: 'final-detail', query: { id: row.id, packageid: row.packageid } })
 }
 
+const showActions = computed(() => {
+  return selectionIds.value.length
+})
+
+function switchBatch() {
+  selectionIds.value = []
+  checkedRowKeys.value = []
+}
+
 defineExpose({
   showModal,
 })
@@ -387,10 +396,26 @@ defineExpose({
                 <span>任务信息</span>
               </div>
             </div>
+
             <div class="batch">
-              <img class="btn-approval btn-left" src="@/assets/images/task/btn-not-pass.png" alt="" @click.stop="batchReject">
-              <SvgIcon size="24" name="vs" />
-              <img class="btn-approval" src="@/assets/images/task/btn-pass.png" alt="" @click.stop="batchApproval">
+              <div v-show="!showActions" style="display: flex; align-items: center">
+                <div class="btn-batch">
+                  <SvgIcon style="margin-right: 6px" size="22" name="batch" />
+                  批量审批
+                </div>
+              </div>
+              <div v-show="showActions" style="display: flex; align-items: center">
+                <NButton text @click="switchBatch()">
+                  <template #icon>
+                    <SvgIcon name="revoke" />
+                  </template>
+                  取消
+                </NButton>
+
+                <img class="btn-approval btn-left" style="margin-left: 16px" src="@/assets/images/task/btn-not-pass.png" alt="" @click.stop="batchReject">
+                <SvgIcon size="24" name="vs" />
+                <img class="btn-approval" src="@/assets/images/task/btn-pass.png" alt="" @click.stop="batchApproval">
+              </div>
             </div>
             <div class="wrapper-content">
               <NDataTable
@@ -530,4 +555,18 @@ defineExpose({
   border: 1px solid #cad2dd;
   background-color: #fff;
 }
+
+.btn-batch {
+  width: 118px;
+  height: 36px;
+  background: linear-gradient(135deg, #5b85f8, #3c6cf0);
+  border-radius: 17px;
+  box-shadow: 0px 2px 6px 0px rgba(116, 153, 253, 0.3);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  margin-right: 6px;
+  cursor: pointer;
+}
 </style>

src/views/final/content/Content.vue

@@ -629,6 +629,10 @@ function getSelectItems() {
   return tableData.value.filter(item => selectionIds.value.includes(item.id))
 }
 
+const showActions = computed(() => {
+  return selectionIds.value.length
+})
+
 // 单个审批通过
 function singleApproval(row) {
   const param = {
@@ -726,6 +730,11 @@ function doAudit(param: any) {
   })
 }
 
+function switchBatch() {
+  selectionIds.value = []
+  checkedRowKeys.value = []
+}
+
 function reload() {
   selectionIds.value = []
   checkedRowKeys.value = []
@@ -765,15 +774,26 @@ async function refreshHandler(searchId?: any) {
         <NButton class="xjcc" text @click="showModal(repeatModalRef)">
           小结查重
         </NButton>
-        <div class="batch">
+
+        <div v-show="!showActions" style="display: flex; align-items: center">
+          <div class="btn">
+            <SvgIcon style="margin-right: 6px" size="22" name="batch" />
+            批量审批
+          </div>
+        </div>
+        <div v-show="showActions" class="batch">
+          <NButton text @click="switchBatch()">
+            <template #icon>
+              <SvgIcon name="revoke" />
+            </template>
+            取消
+          </NButton>
+
           <img class="btn-approval btn-left" src="@/assets/images/task/btn-not-pass.png" alt="" @click.stop="batchReject">
           <SvgIcon size="24" name="vs" />
           <img class="btn-approval" src="@/assets/images/task/btn-pass.png" alt="" @click.stop="batchApproval">
         </div>
-        <!-- <div class="btn" @click="batchApproval">
-          <SvgIcon style="margin-right: 6px" size="14" name="tf" />
-          批量审批
-        </div> -->
+
         <n-popover
           ref="popover"
           :style="{ padding: '0px' }"