购物车相关页面进行删除操作后逻辑优化调整

hookehuyr
Commit dce04f5e37409b40cde7bca400e857c199ebc0b3 dce04f5e 1 parent b08ca0ed
Showing 4 changed files with 59 additions and 24 deletions
src/components/chooseMaterial/index.vue
src/views/material_list.vue
src/views/material_pre_request.vue
src/views/material_request.vue
--- a/src/components/chooseMaterial/index.vue
View file @dce04f5
+++ b/src/components/chooseMaterial/index.vue
View file @dce04f5
 <!--
  * @Date: 2024-07-23 16:24:08
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-07-26 16:37:21
+ * @LastEditTime: 2024-07-26 17:03:12
  * @FilePath: /temple_material_request/src/components/chooseMaterial/index.vue
  * @Description: 选择物资组件
 -->
@@ -174,6 +174,10 @@ const onLoad = async () => {
       // 加载状态结束
       finished.value = true;
     }
+    // 如果查询到的数据大于0，需要取消全选
+    if (data.length) {
+      is_all_checked.value = false;
+    }
   }
 };
@@ -265,6 +269,10 @@ const addShoppingCart = async () => { // 新增购物车
     // 过滤 arr1，排除 id 在 idsToRemove 中的元素
     list.value = list.value.filter(item => !idsToRemove.includes(item.id));
+    if (!list.value.length) {
+      is_all_checked.value = false;
+    }
+
     // 购物车数量
     getCartCount();
--- a/src/views/material_list.vue
View file @dce04f5
+++ b/src/views/material_list.vue
View file @dce04f5
 <!--
  * @Date: 2024-07-23 10:50:38
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-07-26 16:25:16
+ * @LastEditTime: 2024-07-26 17:17:26
  * @FilePath: /temple_material_request/src/views/material_list.vue
  * @Description: 物资情况页面
 -->
@@ -77,13 +77,23 @@ onMounted(async () => {
     if (tabList.value.length) { // 默认选中组别ID
       dept_id.value = tabList.value[0]['dept_id'];
     } else { // 组别为空时跳转到购物车页面
-      showDialog({
+      // showDialog({
-        title: '温馨提示',
+      //   title: '温馨提示',
-        message: '物资列表为空，将前往添加！',
+      //   message: '物资列表为空，将前往添加！',
-        confirmButtonColor: styleColor.baseColor
+      //   confirmButtonColor: styleColor.baseColor
-      }).then(() => {
+      // }).then(() => {
-        // 跳转购物车页面
+      //   // 跳转购物车页面
-        $router.push({
+      //   $router.push({
+      //     path: '/material_pre_request',
+      //     query: {
+      //       activity_id,
+      //       form_id,
+      //       client_id
+      //     }
+      //   })
+      // });
+      // 跳转购物车页面
+      $router.push({
           path: '/material_pre_request',
           query: {
             activity_id,
@@ -91,7 +101,6 @@ onMounted(async () => {
             client_id
           }
         })
-      });
     }
   }
 });
--- a/src/views/material_pre_request.vue
View file @dce04f5
+++ b/src/views/material_pre_request.vue
View file @dce04f5
 <!--
  * @Date: 2024-07-23 12:53:15
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-07-26 14:47:28
+ * @LastEditTime: 2024-07-26 17:22:46
  * @FilePath: /temple_material_request/src/views/material_pre_request.vue
  * @Description: 待申领物资页面
 -->
@@ -28,7 +28,7 @@
         </van-row>
       </van-sticky>
       <div v-for="item in list" :id="item.good_id" :key="item" class="list-boxer">
-        <van-row align="center" justify="space-between">
+        <van-row gutter="10" align="center" justify="space-between">
           <van-col span="16" style="display: flex;">
             <span v-if="item.edit">
               <van-icon v-if="item.checked" @click="onCheck(item)" name="checked" size="1.25rem" :color="styleColor.baseColor" />
@@ -56,6 +56,7 @@
         </van-row>
         <div v-if="item.error" style="padding: 0.5rem 2rem 0 0; font-size: 0.85rem; color: red; text-align: right;">输入值有误</div>
       </div>
+      <van-empty v-if="!list.length" image="error" description="待申领物资为空" />
       <div style="height: 10rem;"></div>
       <div style="position: fixed; left: 0; right: 0; bottom:4.5rem; padding: 1rem;">
         <van-button icon="plus" type="primary" :color="styleColor.baseColor" plain block :disabled="disabled_btn" @click="addMore">添加更多</van-button>
@@ -125,7 +126,7 @@
 <script setup>
 import { ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import { showToast, showConfirmDialog } from 'vant';
+import { showToast, showConfirmDialog, showDialog } from 'vant';
 import { Cookies, $, _, axios, storeToRefs, mainStore, Toast, useTitle } from '@/utils/generatePackage.js'
 //import { } from '@/utils/generateModules.js'
 //import { } from '@/utils/generateIcons.js'
@@ -183,7 +184,14 @@ const getCartList = async () => {
       item.checked = false;
     })
     if (!list.value.length) { // 购物车为空
-      addMore();
+      // showDialog({
+      //   title: '温馨提示',
+      //   message: '物资列表为空，将前往添加！',
+      //   confirmButtonColor: styleColor.baseColor
+      // }).then(() => {
+      //   show_choose_material.value = true;
+      // });
+      sum_num.value = list.value.length; // 品项数量
     } else {
       sum_num.value = list.value.length; // 品项数量
     }
@@ -356,7 +364,13 @@ const onConfirmRequest = () => { // 确定申领回调
     showToast('请选择使用日期');
     return;
   }
-  showType.value = true;
+  let sum = list.value.some((item) => { return +item.apply_number > 0  }); // 判断是否有一个值不等于0
+  if (!sum) {
+    showToast('物资数量都没有填写');
+    return;
+  } else {
+    showType.value = true;
+  }
 }
 const scrollToSection = (id) => { // 滚动到指定位置
@@ -426,9 +440,10 @@ const onCloseDetail = () => { // 关闭物资详情窗口
     .select-all-item {
       padding: 0.5rem 1rem;
       background-color: white;
+      border-bottom: 1px solid #f0f0f0;
     }
     .list-boxer {
-      margin: 0; padding: 1rem; border-top: 1px solid #f0f0f0;
+      margin: 0; padding: 1rem;
     }
   }
--- a/src/views/material_request.vue
View file @dce04f5
+++ b/src/views/material_request.vue
View file @dce04f5
 <!--
  * @Date: 2024-07-23 12:53:15
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-07-26 14:42:54
+ * @LastEditTime: 2024-07-26 16:44:38
  * @FilePath: /temple_material_request/src/views/material_request.vue
  * @Description: 申领物资页面
 -->
@@ -140,7 +140,7 @@ const dept_id = ref('');
 const is_all_checked = ref(false);
 const num_value = ref('');
-const onCheckAll = () => {
+const onCheckAll = () => { // 全选操作
   is_all_checked.value = !is_all_checked.value;
   if (is_all_checked.value) {
     list.value.forEach(item => {
@@ -154,7 +154,7 @@ const onCheckAll = () => {
   }
 }
-const onCheck = (item) => {
+const onCheck = (item) => { // 单选操作
   item.checked = !item.checked;
   // 全部为选中
   let all_checked = list.value.every((item) => item.checked === true);
@@ -170,8 +170,8 @@ const onCheck = (item) => {
 }
 const onBlur = (item) => { // 输入框失去焦点回调
-  console.warn(item);
   if (item.checked) {
+    // 错误提示
     if (item.total_apply_number === null || item.total_apply_number === '') {
       item.error = true;
     } else {
@@ -182,11 +182,11 @@ const onBlur = (item) => { // 输入框失去焦点回调
 const active = ref(0);
 const onChange = (index) => { // 切换标签回调
-  console.warn(index);
   // 取消全选
   is_all_checked.value = false;
   //
   dept_id.value = tabList.value[index]['dept_id'];
+  // 重置查询条件
   limit.value = 20;
   offset.value = 0;
   loading.value = false;
@@ -197,7 +197,6 @@ const onChange = (index) => { // 切换标签回调
 const list = ref([]);
 const loading = ref(false);
 const finished = ref(false);
-
 const limit = ref(20);
 const offset = ref(0);
@@ -205,10 +204,12 @@ const onLoad = async () => {
   // 异步更新数据
   const { code, data } = await getGoodUseListAPI({ activity_id, dept_id: dept_id.value, is_previous: 1, offset: offset.value, limit: limit.value });
   if (code) {
+    // 新增选中，错误字段
     data.forEach(item => {
       item.checked = false;
       item.error = false;
     });
+    //
     list.value = _.concat(list.value, data);
     list.value = _.uniqBy(list.value, 'good_id');
     offset.value = list.value.length;
@@ -218,9 +219,11 @@ const onLoad = async () => {
       // 加载状态结束
       finished.value = true;
     }
+    // 如果查询到的数据大于0，需要取消全选
+    if (data.length) {
+      is_all_checked.value = false;
+    }
   }
-  // TODO: 如果查询到的数据大于0，需要取消全选
-  is_all_checked.value = false;
 };
 const material_id = ref('');