space-application/src/views/c-views/personal/MyApply.vue

<template>
 <div class="h100 my-apply">

   <div class="apply-main-c">
     <div class="form-a bg-k"><diy-el-form :forms="myApplyHomeFilterForm" v-model:model-form="form">
       <template #applyBtn>
         <el-button type='primary'

          class="color-w"
          @click="initSearch">查询</el-button>
       </template>
     </diy-el-form></div>

     <div class="main-c bg-k">
       <div class="flex1">
         <my-table
           :is-height-by-auto="false"
           :has-operation="true"
           :table-data="tableData"
           :headers="tableHeader"
         >
           <template #useTime="{data}">
             <span v-if="data.status == '1'">
               一天
             </span>
             <span v-if="data.status == '2'">
               二天
             </span>
             <span v-if="data.status == '3'">
               三天
             </span>
             <span v-if="data.status == '4'">
               四天
             </span>
             <span v-if="data.status == '5'">
               五天
             </span>
             <span v-if="data.status == '6'">
               六天
             </span>
             <span v-if="data.status == '7'">
               七天
             </span>
           </template>
           <template #status="{data}">
             <span v-if="data.status == '1'">
               待受理
             </span>
             <span v-if="data.status == '2'">
               待审核
             </span>
             <span v-if="data.status == '3'">
               受理不通过
             </span>
             <span v-if="data.status == '4'">
               审核不通过
             </span>
             <span v-if="data.status == '5'">
               审核通过
             </span>
           </template>
           <template #operation="{data}">
<!--             <el-link type="primary" class="link-to" @click="openExportDialog('export',data)" v-if="form.type === '1' ">下载</el-link>-->
             <el-link type="primary" class="link-to" @click="openExportDialog('export',data)" v-if="form.type === '1' && data.BACKUPS_TABLENAME">下载</el-link>
             <el-link type="primary"  @click="openDetailDialog(data)">详情</el-link>

           </template>
         </my-table>
       </div>
       <ele-pagination
         ref="refEl"
         :page-sizes="[5,10,25,50,75,100]"
         background
         @sizeOrPageChange="handleSizeChange"
         class="page"
         :default-page-size="10"
         :layout="'slot,sizes,prev,pager,next'"

         :total-count="totalCount"
       />
     </div>
   </div>
   <template v-if="isExportDialogIsShow">
     <my-apply-export-dialog @exportFile="exportFile" v-model:dialog-visible="isExportDialogIsShow"/>
   </template>
   <template v-if="isResourceDetailDialogShow">
     <resource-detail-dialog :current-op-obj="{
       ...currentDetailObj,
       isService:form.type ==='2',
       serviceUrl:currentDetailObj.S_USERNAME?serviceUrlB() + currentDetailObj.S_USERNAME+'/'+currentDetailObj.S_PASSWORD:''
     }"  v-model:dialog-visible="isResourceDetailDialogShow"/>
   </template>
   <template v-if="isPipeResourceDetailDialogShow">
     <pipe-resource-detail-dialog :current-op-obj="currentDetailObj"  v-model:dialog-visible="isPipeResourceDetailDialogShow"/>
   </template>
 </div>
</template>

<script>
import DiyElForm from "@/components/common/DiyElForm.vue";
import {myApplyHomeFilterForm} from "@/data/all-forms";
import {computed, nextTick, onBeforeMount, onMounted, ref, watch} from "vue";
import MyTable from "@/components/common/MyTable.vue";
import {

  myApplyHomeTableHeaderData, myApplyHomeTableHeaderPipe,
  myApplyHomeTableHeaderService
} from "@/data/alll-table-header";
import {
  getMyApplyHomeTableDataFw,
  getMyApplyHomeTableDataPipe,
  getMyApplyHomeTableDataSj,
  selectToolResourceApplicationApplyPageList
} from "@/service/my-apply";
import {useDetailOrEdit, usePagination} from "@/unit/use-method/usePagination";
import {useRootStore} from "@/pinia/useStore";
import ElePagination from "@/components/common/ElePagination.vue";
import {Delete, Search, SuccessFilled} from "@element-plus/icons-vue";
import ResourceDetailDialog from "@/views/c-views/personal/ResourceDetailDialog.vue";
import {serviceUrlB} from "@/service/config";
import MyApplyExportDialog from "@/views/c-views/personal/MyApplyExportDialog.vue";
import PipeResourceDetailDialog from "@/views/c-views/personal/PipeResourceDetailDialog.vue";
let baseUrl = import.meta.env.VITE_BASE_API
  export default {
  name: "MyApply",
  methods: {
    serviceUrlB() {
      return serviceUrlB
    }
  },
  computed: {
    SuccessFilled() {
      return SuccessFilled
    },
    Delete() {
      return Delete
    },
    Search() {
      return Search
    }
  },
  components: {PipeResourceDetailDialog, MyApplyExportDialog, ResourceDetailDialog, ElePagination, MyTable, DiyElForm},
  setup() {
    function openDetailDialog(data) {
      if(form.value.type ==='3'){
        isPipeResourceDetailDialogShow.value = true
      }else{
        isResourceDetailDialogShow.value = true
      }
      currentDetailObj.value = data || {}
    }
    const {changeOperation:changeExportDOperation,currentOpObj:exportDCurrentOpObj,operationType:exportDOperation} = useDetailOrEdit()
    const form = ref({

    })
    function exportFile(type){
      let url = null
      if(type === 'Excel'){
        url = baseUrl + "/gxyw/fileExportVersion?TABLE_NAME="+exportDCurrentOpObj.value.BACKUPS_TABLENAME+"&appkey=" + store.userInfo.gxjh_userkeycode
      }else if (type === 'SHP'){
        url = baseUrl + "/gxyw/ShpFileZip?SERVER_NAME="+exportDCurrentOpObj.value.BACKUPS_TABLENAME+"&appkey=" + store.userInfo.gxjh_userkeycode
      }
      window.open(url,'_black')
    }
    function openExportDialog(op,it){
      isExportDialogIsShow.value = true
      changeExportDOperation(op,it)
    }
    const isExportDialogIsShow = ref(false)
    const currentDetailObj  = ref(null)
    const isResourceDetailDialogShow =  ref(false)
    const isPipeResourceDetailDialogShow =  ref(false)
    const tableHeader = computed(() => {
      if(form.value.type ==='1'){
        return myApplyHomeTableHeaderData
      }else if(form.value.type ==='2'){
        return myApplyHomeTableHeaderService
      }else{
        return myApplyHomeTableHeaderPipe
      }
    })
    watch(() => form.value['type'],(val) => {
      form.value['name']=''
      tableData.value = []
      getDetailTableData()
    })
    function getDetailTableData(){
      nextTick(() => {
        console.log('form.value[\'type\']',form.value['type'] )
        let url
        if(form.value['type'] == 1){
          url = getMyApplyHomeTableDataSj;
        }else if(form.value['type'] == 2){
          url = getMyApplyHomeTableDataFw;
        }else{
          url = selectToolResourceApplicationApplyPageList;
        }
        url({
          name:form.value['name'],
          pageIndex:pageIndex.value,
          pageSize:pageSize.value,
          user_id:store.userInfo.gxjh_usercode,
          unitcode:store.userInfo.gxjh_unitcode
        }).then(res => {
          if(form.value['type'] == 3){
            tableData.value = res.data.Rows
            totalCount.value = res.data.TotalRowCount
          }else{
            tableData.value = res.msg[0].Rows
            totalCount.value = res.msg[0].TotalRowCount
          }
        })
      })
    }
    const store = useRootStore()
    const {pageIndex,pageSize,totalCount,tableData,refEl,handleSizeChange,initSearch} = usePagination(getDetailTableData)
    onMounted(() => {

    })
    return {
      myApplyHomeFilterForm,
      form,
      openDetailDialog,
      isResourceDetailDialogShow,
      isPipeResourceDetailDialogShow,
      currentDetailObj,
      tableHeader,
      pageIndex,pageSize,totalCount,tableData,refEl,handleSizeChange,initSearch,
      openExportDialog,
      isExportDialogIsShow,
      changeExportDOperation,exportDCurrentOpObj,exportDOperation,
      exportFile
    }
  }
}
</script>

<style scoped lang="scss">
:deep{
  .el-dialog__header{
    padding-top: 8px;
    padding-bottom: 20px;
  }
  .el-dialog__body{
    max-height: 400px;
    padding-top: 0px;
    overflow-y: auto;
    &::-webkit-scrollbar {
      width: 4px;
    }
    &::-webkit-scrollbar-thumb {
      border-radius: 10px;
      -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);

      background: rgba(0,128,255, 0.8);
    }
    &::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
      border-radius: 0;
      background: rgba(0,128,255, 0.2);
    }
  }
  .el-input__wrapper{
    background-color:var(--theme-zysq-tab-background-color);
  }
  .el-input__inner{
    color:var(--theme-font-common-color);
  }
  .el-select-dropdown{
    background-color:var(--theme-zysq-tab-background-color);
  }
  .el-select-dropdown__item{
    color:var(--theme-font-common-color);
  }
  .el-select-dropdown__item:hover,.el-select-dropdown__item.hover{
    background-color:var(--theme-background-color);
  }

}
.my-apply{
  overflow: hidden;
  .main-c{
    margin-bottom: 20px;
    flex: 1;
    padding: 20px;
  }
  .form-a{
    padding-top: 20px;
    margin-bottom: 20px;
    margin-top: 20px;
  }
  .apply-main-c{
    padding-left: 20px;
    .main-c{
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
    height: 100%;
    display: flex;
    flex-direction: column;
    padding-right: 20px;
  }
  .title{
    font-size: 15px;
    padding: 15px;
    font-weight: 600;
    border-bottom: 1px solid #e7eaec;
  }
  .btns{
    text-align: right;
    margin-bottom: 20px;
  }
}
</style>