Просмотр исходного кода

feat: 勾选多项数据时,判断所选数据的【隐藏】状态是否全部为隐藏,如是(全部隐藏)变化为(取消隐藏)

bxy 1 год назад
Родитель
Сommit
22c1c3624b
1 измененных файлов с 30 добавлено и 1 удалено
  1. 30 1
      src/views/datamanager/alertformdata/components/show/Show.vue

+ 30 - 1
src/views/datamanager/alertformdata/components/show/Show.vue

@@ -10,7 +10,10 @@
     <div class="table-list">
       <div v-if="showActionBar" class="action-bar">
         <span class="num-text">已选{{ chooseNum }}项</span>
-        <el-button :class="isActiveHide ? 'btn-active' : 'btn-normal'" @click="handleHideAll">全部隐藏</el-button>
+        <el-button v-if="!cancelHideFlag" :class="isActiveHide ? 'btn-active' : 'btn-normal'"
+          @click="handleHideAll">全部隐藏</el-button>
+        <el-button v-if="cancelHideFlag" :class="isActiveCancelHide ? 'btn-active' : 'btn-normal'"
+          @click="handleCancelHideAll">取消隐藏</el-button>
         <el-button :class="isActiveDelete ? 'btn-active' : 'btn-normal'" @click="handleDeleteAll">删除</el-button>
         <span class="close-btn" @click="handleSelectNone"></span>
       </div>
@@ -56,7 +59,9 @@ const tableData = ref([]);
 const showActionBar = ref(false);
 const chooseNum = ref(0);
 const chooseId = ref<number[]>([]);
+const cancelHideFlag = ref(true);   // true取消隐藏 / false全部隐藏
 const isActiveHide = ref(false);
+const isActiveCancelHide = ref(false);
 const isActiveDelete = ref(false);
 // 详情
 const isDetailDialogShow = ref(false);
@@ -86,9 +91,13 @@ const handleReset = (queryForm) => {
 
 // 多选
 const handlePop = (selection) => {
+  chooseId.value = [];
+  cancelHideFlag.value = true;
   selection.forEach((item) => {
     if (chooseId.value.indexOf(item.id) === -1)
       chooseId.value.push(item.id);
+    // 只要有一个item.isHide === false 说明多选的这些选项不是全都隐藏,不用变成“取消隐藏”
+    if (item.isHide === false) cancelHideFlag.value = false;
   });
   chooseNum.value = selection.length;
   showActionBar.value = chooseNum.value > 0 ? true : false;
@@ -121,6 +130,26 @@ const handleHideAll = () => {
   });
 };
 
+// 取消隐藏
+const handleCancelHideAll = () => {
+  if (showActionBar.value) isActiveCancelHide.value = !isActiveCancelHide.value;
+  const updateList = {
+    id: chooseId.value,
+    isHide: false,
+  };
+  updateShowTableData(updateList).then(() => {
+    handleSelectNone();
+    getTableData();
+    ElMessage({
+      message: '隐藏成功',
+      type: 'success',
+    });
+    setTimeout(function () {
+      isActiveCancelHide.value = !isActiveCancelHide.value;
+    }, 1000);
+  });
+};
+
 // 批量删除
 const handleDeleteAll = () => {
   if (showActionBar.value) isActiveDelete.value = !isActiveDelete.value;