manHourHousekeeper/fhKeeper/formulahousekeeper/customerBuler-crm-h5/src/pages/tabbar/home/component/quickEntrance.vue

<template>
  <div class="w-full h-full flex flex-col">
    <div class="bg-[#f4f5fa] text-center componentTitle">快捷新建设置</div>
    <div class="smallFontTitle">快捷新建</div>
    <div class="module">
      <div class="module-item" v-for="(item, index) in selectList" :key="index">
        <div class="module-img"><img :src="getRouterImg(item.path)" alt=""></div>
        <div class="module-text">建{{ item.name }}</div>
        <div class="absolute top-0 right-0" @click="operationEntrance(index, 'delete')">
          <van-icon name="clear" color="#aaaaaa" size="18" />
        </div>
      </div>
    </div>
    <div class="smallFontTitle">全部</div>
    <div class="flex-1 overflow-y-auto">
      <div class="module">
        <div class="module-item" v-for="(item, index) in allList">
          <div class="module-img"><img :src="getRouterImg(item.path)" alt=""></div>
          <div class="module-text">建{{ item.name }}</div>
          <div class="absolute top-0 right-0" v-if="selectList.length < 4" @click="operationEntrance(index, 'add')">
            <van-icon name="add" color="#1a6afb" size="18" />
          </div>
        </div>
      </div>
    </div>

    <!-- 确定按钮 -->
    <van-button type="primary" class="confirmToSave" :disabled="!selectList.length" @click="saveConfiguration" loading-text="保存中..." :loading="loading">保存</van-button>
  </div>
</template>
<script setup>
import { ref, defineProps, defineEmits, watch } from "vue";
import requests from "@common/requests"
import { SAVE_FAST_ACCESS_LIST } from "@hooks/useApi";
import useToast from "@hooks/useToast"
import { routingInfos, getRouterImg } from "@utility/generalVariables.js";

const { toastText, toastSuccess, toastFail, toastLoading } = useToast()
const emit = defineEmits();
const props = defineProps({
  allModulesList: Array,
  selectModule: Array
});
const selectList = ref([])
const allList = ref([])
const loading = ref(false)

watch(() => props.selectModule, (newValue, oldValue) => {
  processingData()
}, { immediate: true });

function saveConfiguration() {
  loading.value = true
  const list = selectList.value.map(item => {
    return {
      id: item.id,
      name: item.name,
      router: item.path
    }
  })
  requests.post(SAVE_FAST_ACCESS_LIST, { jsonstr: JSON.stringify(list) }).then(() => {
    toastSuccess('保存成功')
    emit('save-value')
  }).finally(() => {
    loading.value = false
  })
}

function operationEntrance(index, type) {
  if(type == 'add') {
    selectList.value.push(allList.value[index]) 
  } else {
    selectList.value.splice(index, 1)
  }

  allList.value = props.allModulesList.filter(item => !selectList.value.some(arrItem => arrItem.path === item.path))
}

function processingData() {
  allList.value = props.allModulesList.filter(item => !props.selectModule.some(arrItem => arrItem.path === item.path))
  selectList.value = props.selectModule
}

</script>
<style lang="scss" scoped>
.componentTitle {
  font-size: 20px;
  line-height: 54px;
}

.smallFontTitle {
  font-size: 16px;
  font-weight: bold;
  color: #202d45;
  padding: 15px 20px;
}

.module {
  padding: 0 20px;
  display: flex;
  flex-wrap: wrap;
  position: relative;

  .module-item {
    width: 22.5%;
    padding: 10px 0;
    background: #fff;
    box-shadow: 0px 2px 8px 0px #e4e4e4;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 6px;
    margin-right: 3%;
    margin-bottom: 8px;
    position: relative;

    &:nth-child(4n) {
      margin-right: 0;
    }

    .module-img {
      width: 30px;
      height: 30px;
      margin-bottom: 10px;
    }
  }
}

.confirmToSave {
  margin: 10px 20px;
}
</style>