geg-gas-web/src/views/system/dataMigration/components/export/index.vue

<template>
    <div class="export">
      <div class="l-export" ><span @click.stop="openConfirmDialog">导出所选项目{{configType}}</span></div>
      <div class="list-wrapper">
           <a-list size="small" bordered :data-source="state.options">
               <template #renderItem="{ item }">
                 <a-list-item><a-checkbox style="margin-right:30px" v-model:checked="item.checked"/>{{ item.name }}</a-list-item>
               </template>
              <template #header>
                   <a-checkbox 
                       style="margin-right:30px"
                       v-model:checked="state.checkAll" 
                       :indeterminate="state.indeterminate" 
                       @change="onCheckAllChange">
                   </a-checkbox>
                       选择全部      
               </template>
            </a-list>
        </div>
    </div>
</template>

<script lang="ts" setup>
  import { ref,watch,reactive,h} from 'vue';
  import {useMessage} from "/@/hooks/web/useMessage";
  import { useI18n } from '/@/hooks/web/useI18n';
  import { exportDatas,downloadDatas} from '/@/api/system/dataMigration';
  import { downloadByData } from '/@/utils/file/download';
  import { dateUtil } from '/@/utils/dateUtil';
    
  const { t } = useI18n();
  
  const state = reactive({
     indeterminate: false,
     checkAll: false,
     options:[
       {
           checked:false, 
           code:"租户",
           name:'租户'   
      },
     /* {
          checked:false, 
          code:"用户",
          name:'用户'   
      }, */
      {
          checked:false,
          code:'角色',   
          name:'角色'   
      },
      {
          checked:false,
          code:'岗位',  
          name:'岗位'   
      },
     /* {
          checked:false,
          code:'部门',  
          name:'部门'   
      }, */
      {
          checked:false,
          code:'用户组',
          name:'用户组'   
      },
      {
          checked:false,
          code:'菜单',
          name:'菜单'   
      },
     
      {
          checked:false,
          code:'表单',
          name:'表单'   
      },
      {
          checked:false,
          code:'流程定义',
          name:'流程定义'   
      },
      {
          checked:false,
          code:'系统变量',
          name:'系统变量'   
      },
      {
          checked:false,
          code:'数据字典',
          name:'数据字典'   
      },
      {
          checked:false,
          code:'桌面配置',
          name:'桌面配置'   
      },
      {
          checked:false,
          code:'自定义接口',
          name:'自定义接口'   
      },
      {
          checked:false,
          code:'角色-菜单授权',
          name:'权限：角色-菜单授权(菜单、按钮、列表、表单)'   
      },
      {
          checked:false,
          code:'角色-自定义接口授权',
          name:'权限：角色-自定义接口授权'   
      },
      /* {
          checked:false,
          code:'用户-角色授权',
          name:'权限：用户-角色授权'   
      },
      {
          checked:false,
          code:'用户-用户组授权',
          name:'权限：用户-用户组授权'   
      },
      {
          checked:false,
          code:'用户-岗位授权',
          name:'权限：用户-岗位授权'   
      },
      {
          checked:false,
          code:'用户-部门授权',
          name:'权限：用户-部门授权'   
      }, */
      {
          checked:false,
          code:'租户-菜单授权',
          name:'权限：租户-菜单授权'   
      }
   ]
   });
   
      
   function onCheckAllChange(e: any){
     if(e.target.checked){
          state.options.forEach((item)=>{
              item.checked=true;
          });
       }else{
          state.options.forEach((item)=>{
              item.checked=false;
          });
       }
        state.indeterminate=false;
   }
   
   
   watch(
     () => state.options,
     val => {
       const checkedList=val.filter((item)=>item.checked);
       if(checkedList.length>0){
           if(checkedList.length< val.length){
                state.indeterminate=true;
           }else{
               state.checkAll=true;
               state.indeterminate=false; 
           }
         
       }else{
            state.indeterminate=false;
       }
     },
     { deep: true },
   );
  
  function openConfirmDialog(){
       const { notification,createConfirm} = useMessage();
       const checkedList=state.options.filter((item)=>item.checked);
       if(checkedList.length==0){
            notification.warning({
                message: '提示',
                description: '未选择任何项目'
            });
            return;
       }
       
       createConfirm({
           iconType: 'warning',
           title: () => h('span', t('温馨提示')),
           content: () => t('确定导出所选项目吗?'),
           width:'500px',
           onOk: async () => {
               handleExport();
           },
           okText: () => t('确认'),
           cancelText: () => t('取消'),
       });
   }
   
 async  function handleExport(){
     try {
          const checkedCodeList=state.options.filter((item)=>item.checked).map(item => item.code);
          let currentTime=dateUtil(new Date()).format('YYYY-MM-DD_HH_mm_ss');
          let result= await exportDatas({
              items:checkedCodeList
          });
          
          if(result){
             const fileName=dateUtil(new Date()).format('YYYY-MM-DD_HH_mm_ss');
             const res = await downloadDatas({uuid:result});
              downloadByData(
                  res.data,
                  fileName+".zip"
              );
          }
      } catch (error) {
          console.error(error);
      }
   }
</script>

<style lang="less" scoped>
    .export{
        display:flex;
        flex-direction:column;
        height:100%;
        width:100%;
        padding:30px 30px 30px 100px;
        border:1px solid #d6d6d6;
        border-radius:8px;
        overflow:hidden;
    }
    
    .l-export{
       display:block;
       margin-left:20px;
       margin-bottom:20px;
       span{
          color: rgba(0,0,255,0.8);
          text-decoration:underline rgba(#0000ff,0.8);
          font-weight: 500;
          font-size: 16px;
          cursor: pointer;
          &:hover{
              color: rgba(0,0,255,1);
              text-decoration:underline #0000ff;
              
          }     
       }
    }
    
    .list-wrapper{
        height:calc(100% - 50px);
        .ant-list{
            width:100%;
            height:calc(100% - 30px);
            overflow:hidden;
            border:0px;
         }
    }
    
   
    
   
</style>