zhzf/client/src/views/xzzfgl/caseMan/DocumentList.vue

<template>
  <div v-loading="exporting"  class="container">
    <div class="sidebar"  >
      <div  class="collapse-button">
        <div style="text-align: left;margin-top: 10px;margin-left: 5px;color: #e8e8e8;font-family: 黑体;font-size: 16px">文书目录</div>
      </div>
      <!-- 目录内容 -->
      <div class="menu-container">
        <el-table :data="documents" border height="550">
          <el-table-column header-align="left" align="left" label="文书列表" min-width="220" prop="documentName">
            <template #default="scope">
              <div style="color: #070707;font-size: 18px;font-weight: bold">
                {{scope.row.documentName}}
              </div>
            </template>
          </el-table-column>
          <el-table-column header-align="center" align="center" width="150" prop="bz" label="状态">
            <template #default="scope">
              <div v-if="scope.row.documentId===undefined" style="color: #ff0000;font-size: 14px">
                未制作
              </div>
              <div v-if="scope.row.status==='afoot'" style="color: #d8f800;font-size: 14px">
                制作中
              </div>
              <div v-if="scope.row.status==='done'" style="color: #05fb11;font-size: 14px">
                已完成
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="content">
      <el-button  @click="mergePDFs" type="danger">导出案卷</el-button>
    </div>

  </div>
</template>
<script setup>
import {computed, defineProps, markRaw, reactive, ref, toRefs} from 'vue'
import { Fold, Expand } from '@element-plus/icons-vue'
import caseApi from "@/api/lawenforcement/Case.js";
import {ElMessage, ElMessageBox} from "element-plus";
const props = defineProps({
  dialogConfig: {
    type: Object,
    default: () => ({})
  },
  documents: {
    type: Array,
    default: () => [],
  },
})
const caseData = ref(props.dialogConfig)
const documents = ref(props.documents)
// 状态管理
const isCollapsed = ref(false)
// 计算侧边栏宽度
const sidebarWidth = computed(() => {
  return isCollapsed.value ? '40px' : '440px'
})

// 切换折叠状态
const toggleCollapse = () => {
  isCollapsed.value = !isCollapsed.value
}

const exporting = ref(false)
const mergePDFs = async () => {
  try{
    const doneElements = documents.value.filter(item => item.status === 'done');
    if(doneElements.length===0){
      ElMessage.warning('案件没有文书制作完成！')
    }else{
      const undoElements = documents.value.filter(item => item.status === undefined||item.status !== 'done');
      let wwcwsmc=''
      undoElements.forEach(d=>{
        wwcwsmc=wwcwsmc+d.documentName+'，'
      })
      ElMessageBox.confirm('文书:' + wwcwsmc + '没有完成是否确认导出?', '是否确认导出', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(() => {
        exporting.value = true
        caseApi.downloadDocument(caseData.value.caseId).then(res=>{
          if (res.success&&res.data && res.data.downUrl) {
            window.open(res.data.downUrl);
          }else{
            ElMessage.error('导出失败，请重试。')
          }
          exporting.value = false
        })
      }).catch(() => {
      })
    }
  }catch (error) {
    ElMessage.error('导出案卷失败:'+ error.message)
    exporting.value = false
  }
  exporting.value = false
}

</script>
<style lang="scss" scoped>
.container {

}

.sidebar {
  background: #105b95;
  transition: all 0.3s ease;
  position: relative;
  padding: 10px;
  height: fit-content;
}



.collapse-button {
  background: #318dc5;
  display: flex;
  border-radius: 3px;

}


.menu-item {
  display: flex;
  align-items: center;
  padding: 12px;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.3s;
}

.menu-item:hover {
  background: #e8e8e8;
}

.menu-item .el-icon {
  margin-right: 8px;
  font-size: 18px;
}

.content {
  text-align: right;
  flex: 1;
  padding: 2px;
}

.header {
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
  margin-bottom: 20px;
}


.sidebar-button {
  border: none;
  background: none;
  cursor: pointer;
  padding: 5px;
}
</style>