Industrial-image-management-system---web/src/views/regulation/repository.vue

<template>
  <div class="system-regulation">
    <a-card title="已公告制度确认" :bordered="false">
      
      
      <a-table
        :columns="columns"
        :data="tableData"
        :loading="loading"
        :pagination="pagination"
        @page-change="onPageChange"
        @page-size-change="onPageSizeChange"
      >
        <template #confirmStatus="{ record }">
          <a-tag :color="record.confirmStatus === 'confirmed' ? 'green' : 'orange'">
            {{ record.confirmStatus === 'confirmed' ? '已确认' : '待确认' }}
          </a-tag>
        </template>
        
        <template #operations="{ record }">
          <a-space>
            <a-button type="text" size="small" @click="handleView(record)">
              查看详情
            </a-button>
            <a-button type="text" size="small" @click="handleDownload(record)">
              下载
            </a-button>
          </a-space>
        </template>
      </a-table>
    </a-card>

    <!-- 制度详情弹窗 -->
    <a-modal
      v-model:visible="detailModalVisible"
      title="制度详情"
      width="800px"
      :footer="false"
    >
      <div class="regulation-detail" v-if="currentRegulation">
        <div class="detail-header">
          <h3>{{ currentRegulation.title }}</h3>
          <div class="detail-meta">
            <span>发布人: {{ currentRegulation.createBy }}</span>
            <span>发布时间: {{ currentRegulation.publishTime }}</span>
            <span>生效日期: {{ currentRegulation.effectiveTime }}</span>
          </div>
        </div>
        
        <a-divider />
        
        <div class="detail-content">
          <h4>制度内容</h4>
          <div class="content-text">{{ currentRegulation.content }}</div>
          
          <h4>适用范围</h4>
          <div class="content-text">{{ currentRegulation.scope }}</div>
          
          <h4>实施要求</h4>
          <div class="content-text">{{ currentRegulation.requirements }}</div>
          
          <h4>注意事项</h4>
          <div class="content-text">{{ currentRegulation.notes }}</div>
        </div>
        
        <a-divider />
        
        <div class="detail-footer">
          <a-button type="primary" @click="handleConfirm(currentRegulation)">
            确认知晓并遵守
          </a-button>
          <a-button @click="handleDownload(currentRegulation)">
            下载制度文件
          </a-button>
        </div>
      </div>
    </a-modal>

    <!-- 确认承诺弹窗 -->
    <a-modal
      v-model:visible="confirmModalVisible"
      title="制度确认承诺"
      width="600px"
      @ok="submitConfirm"
      @cancel="confirmModalVisible = false"
    >
      <div class="confirm-content">
        <p>我确认已仔细阅读并理解《{{ currentRegulation?.title }}》的全部内容，承诺：</p>
        <ul>
          <li>严格遵守该制度的各项规定</li>
          <li>认真履行相关职责和义务</li>
          <li>如有违反，愿意承担相应责任</li>
        </ul>
        
        <a-checkbox v-model="agreeTerms">
          我已阅读并同意上述承诺
        </a-checkbox>
      </div>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import type { Regulation } from '@/apis/regulation/type'
import { Message } from '@arco-design/web-vue'
import { useRegulationStore } from '@/stores/modules/regulation'
import { regulationApi } from '@/apis/regulation'
import { PDFGenerator } from '@/utils/pdfGenerator'

defineOptions({ name: 'SystemRegulation' })

// 表格列定义
const columns = [
  { title: '制度名称', dataIndex: 'title', key: 'title' },
  { title: '制度类型', dataIndex: 'regulationType', key: 'regulationType' },
  { title: '发布人', dataIndex: 'createBy', key: 'createBy' },
  { title: '发布时间', dataIndex: 'publishTime', key: 'publishTime' },
  { title: '生效日期', dataIndex: 'effectiveTime', key: 'effectiveTime' },
  { title: '确认状态', dataIndex: 'confirmStatus', key: 'confirmStatus', slotName: 'confirmStatus' },
  { title: '操作', key: 'operations', slotName: 'operations', width: 250 }
]

// 表格数据
const tableData = ref<Regulation[]>([])
const loading = ref(false)
const pagination = reactive({
  current: 1,
  pageSize: 10,
  total: 0,
  showTotal: true,
  showJumper: true,
  showPageSize: true
})

// 弹窗相关
const detailModalVisible = ref(false)
const confirmModalVisible = ref(false)
const currentRegulation = ref<Regulation | null>(null)
const agreeTerms = ref(false)

// 制度管理store
const regulationStore = useRegulationStore()

// 获取表格数据
const getTableData = async () => {
  loading.value = true
  try {
    const response = await regulationApi.getPublishedRegulationList({
      page: pagination.current,
      size: pagination.pageSize,
      status: "PUBLISHED"
    })
    
    if (response.status === 200) {
      tableData.value = response.data.records
      pagination.pageSize = response.data.size
      pagination.current = response.data.current
      pagination.total = response.data.total
    } else {
      Message.error('获取数据失败')
    }
  } catch (error) {
    console.error('获取已发布制度列表失败:', error)
    Message.error('获取数据失败')
  } finally {
    loading.value = false
  }
}

// 分页事件
const onPageChange = (page: number) => {
  pagination.current = page
  getTableData()
}

const onPageSizeChange = (pageSize: number) => {
  pagination.pageSize = pageSize
  pagination.current = 1
  getTableData()
}

// 查看详情
const handleView = (record: any) => {
  currentRegulation.value = record
  detailModalVisible.value = true
}

// 确认知晓
const handleConfirm = (record: any) => {
  currentRegulation.value = record
  confirmModalVisible.value = true
  agreeTerms.value = false
}

// 下载
const handleDownload = async (record: any) => {
  try {
    const loadingMessage = Message.loading('正在生成PDF文件...', 0)
    
    // 生成PDF
    const pdfBlob = await PDFGenerator.generateRegulationPDF(record)
    
    // 关闭加载提示
    loadingMessage.close()
    
    // 生成文件名
    const filename = `${record.title}_${new Date().toISOString().split('T')[0]}.pdf`
    
    // 下载PDF
    PDFGenerator.downloadPDF(pdfBlob, filename)
    
    Message.success('PDF文件下载成功')
  } catch (error) {
    Message.error('PDF生成失败')
    console.error('PDF生成错误:', error)
  }
}



// 提交确认
const submitConfirm = async () => {
  if (!agreeTerms.value) {
    Message.warning('请先同意承诺条款')
    return
  }
  
  try {
    if (currentRegulation.value) {
      await regulationApi.confirmRegulation(currentRegulation.value.regulationId)
      
      Message.success('确认成功，您已承诺遵守该制度')
      confirmModalVisible.value = false
      
      // 更新本地数据状态
      const index = tableData.value.findIndex(item => item.regulationId === currentRegulation.value.regulationId)
      if (index !== -1) {
        tableData.value[index].confirmStatus = 'confirmed'
      }
    }
  } catch (error) {
    console.error('确认失败:', error)
    Message.error('确认失败')
  }
}

onMounted(() => {
  getTableData()
})
</script>

<style scoped lang="scss">
.system-regulation {
  .arco-card {
    margin-bottom: 16px;
  }
}

.regulation-detail {
  .detail-header {
    margin-bottom: 16px;
    
    h3 {
      margin-bottom: 12px;
      color: var(--color-text-1);
    }
    
    .detail-meta {
      display: flex;
      gap: 16px;
      color: var(--color-text-3);
      font-size: 14px;
    }
  }
  
  .detail-content {
    h4 {
      margin: 16px 0 8px 0;
      color: var(--color-text-1);
      font-weight: 500;
    }
    
    .content-text {
      color: var(--color-text-2);
      line-height: 1.6;
      margin-bottom: 16px;
      padding: 12px;
      background: var(--color-fill-1);
      border-radius: 6px;
    }
  }
  
  .detail-footer {
    display: flex;
    gap: 12px;
    justify-content: center;
  }
}

.confirm-content {
  p {
    margin-bottom: 16px;
    color: var(--color-text-1);
    line-height: 1.6;
  }
  
  ul {
    margin-bottom: 20px;
    padding-left: 20px;
    
    li {
      margin-bottom: 8px;
      color: var(--color-text-2);
      line-height: 1.5;
    }
  }
}
</style>