|
|
@@ -0,0 +1,441 @@
|
|
|
+d:\image\screenImage\局部截取_20260114_093322.png<template>
|
|
|
+ <div class="basic-info-container">
|
|
|
+ <el-card class="box-card search-card">
|
|
|
+ <div class="search-header">
|
|
|
+ <span class="title">{{ pageTitle }}</span>
|
|
|
+ <el-button type="primary" :icon="Plus">新增{{ moduleName }}</el-button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <el-form :model="searchForm" label-width="80px" class="search-form" label-position="top">
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <!-- 共通字段: 名称 -->
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-form-item :label="titleLabel">
|
|
|
+ <el-input v-model="searchForm.title" :placeholder="'请输入' + titleLabel" clearable />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+ <!-- Basis 专用: 标准编号 -->
|
|
|
+ <el-col :span="6" v-if="infoType === 'basis'">
|
|
|
+ <el-form-item label="标准编号">
|
|
|
+ <el-input v-model="searchForm.standard_no" placeholder="请输入标准编号" clearable />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+ <!-- Basis/Job 专用: 文件类型 -->
|
|
|
+ <el-col :span="6" v-if="infoType === 'basis' || infoType === 'job'">
|
|
|
+ <el-form-item label="文件类型">
|
|
|
+ <el-select v-model="searchForm.document_type" placeholder="请选择文件类型" clearable style="width: 100%">
|
|
|
+ <el-option v-for="item in documentTypeOptions" :key="item" :label="item" :value="item" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+ <!-- Basis 专用: 专业领域 -->
|
|
|
+ <el-col :span="6" v-if="infoType === 'basis'">
|
|
|
+ <el-form-item label="专业领域">
|
|
|
+ <el-select v-model="searchForm.professional_field" placeholder="请选择专业领域" clearable style="width: 100%">
|
|
|
+ <el-option v-for="item in professionalFieldOptions" :key="item" :label="item" :value="item" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+ <!-- Row 2 -->
|
|
|
+ <!-- Basis 专用: 时效性 -->
|
|
|
+ <el-col :span="6" v-if="infoType === 'basis'">
|
|
|
+ <el-form-item label="时效性">
|
|
|
+ <el-select v-model="searchForm.validity" placeholder="请选择时效性" clearable style="width: 100%">
|
|
|
+ <el-option label="现行" value="现行" />
|
|
|
+ <el-option label="已废止" value="已废止" />
|
|
|
+ <el-option label="被替代" value="被替代" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+ <!-- 共通字段: 发布单位/编制单位/发布部门 -->
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-form-item :label="authorityLabel">
|
|
|
+ <el-input v-model="searchForm.issuing_authority" :placeholder="'请输入' + authorityLabel" clearable />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+ <!-- 共通字段: 日期范围 -->
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-form-item label="发布开始日期">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="searchForm.release_date_start"
|
|
|
+ type="date"
|
|
|
+ placeholder="选择开始日期"
|
|
|
+ style="width: 100%"
|
|
|
+ value-format="YYYY-MM-DD"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-form-item label="发布结束日期">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="searchForm.release_date_end"
|
|
|
+ type="date"
|
|
|
+ placeholder="选择结束日期"
|
|
|
+ style="width: 100%"
|
|
|
+ value-format="YYYY-MM-DD"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <div class="search-buttons">
|
|
|
+ <el-button type="primary" :icon="Search" @click="handleSearch">查询</el-button>
|
|
|
+ <el-button :icon="Refresh" @click="resetSearch">重置</el-button>
|
|
|
+ </div>
|
|
|
+ </el-form>
|
|
|
+ </el-card>
|
|
|
+
|
|
|
+ <el-card class="box-card table-card">
|
|
|
+ <el-table :data="tableData" v-loading="loading" style="width: 100%" border stripe>
|
|
|
+ <el-table-column prop="title" :label="titleLabel" min-width="200" show-overflow-tooltip />
|
|
|
+ <el-table-column prop="standard_no" label="标准编号" width="150" show-overflow-tooltip v-if="infoType === 'basis'" />
|
|
|
+ <el-table-column prop="issuing_authority" :label="authorityLabel" width="180" show-overflow-tooltip />
|
|
|
+ <el-table-column prop="release_date" :label="dateLabel" width="120">
|
|
|
+ <template #default="scope">
|
|
|
+ {{ formatDate(scope.row.release_date) }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="document_type" label="文档类型" width="120" v-if="infoType === 'basis' || infoType === 'job'" />
|
|
|
+ <el-table-column prop="professional_field" label="专业领域" width="120" v-if="infoType === 'basis'" />
|
|
|
+ <el-table-column prop="validity" label="时效性" width="100" v-if="infoType === 'basis'">
|
|
|
+ <template #default="scope">
|
|
|
+ <el-tag :type="getValidityType(scope.row.validity)">
|
|
|
+ {{ scope.row.validity || '现行' }}
|
|
|
+ </el-tag>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="created_by" label="创建人" width="100" />
|
|
|
+ <el-table-column prop="created_at" label="创建时间" width="180">
|
|
|
+ <template #default="scope">
|
|
|
+ {{ formatDateTime(scope.row.created_at) }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="操作" width="220" fixed="right">
|
|
|
+ <template #default="scope">
|
|
|
+ <el-button-group>
|
|
|
+ <el-tooltip content="查看" placement="top">
|
|
|
+ <el-button link type="primary" @click="handleAction('view', scope.row)">
|
|
|
+ <el-icon><View /></el-icon> 查看
|
|
|
+ </el-button>
|
|
|
+ </el-tooltip>
|
|
|
+ <el-tooltip content="预览" placement="top">
|
|
|
+ <el-button link type="success" @click="handleAction('preview', scope.row)">
|
|
|
+ <el-icon><Monitor /></el-icon> 预览
|
|
|
+ </el-button>
|
|
|
+ </el-tooltip>
|
|
|
+ <el-tooltip content="下载" placement="top">
|
|
|
+ <el-button link type="warning" @click="handleAction('download', scope.row)">
|
|
|
+ <el-icon><Download /></el-icon> 下载
|
|
|
+ </el-button>
|
|
|
+ </el-tooltip>
|
|
|
+ <el-tooltip content="编辑" placement="top">
|
|
|
+ <el-button link type="primary" @click="handleAction('edit', scope.row)">
|
|
|
+ <el-icon><Edit /></el-icon> 编辑
|
|
|
+ </el-button>
|
|
|
+ </el-tooltip>
|
|
|
+ <el-tooltip content="删除" placement="top">
|
|
|
+ <el-button link type="danger" @click="handleAction('delete', scope.row)">
|
|
|
+ <el-icon><Delete /></el-icon>
|
|
|
+ </el-button>
|
|
|
+ </el-tooltip>
|
|
|
+ </el-button-group>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+
|
|
|
+ <div class="pagination-container">
|
|
|
+ <el-pagination
|
|
|
+ v-model:current-page="currentPage"
|
|
|
+ v-model:page-size="pageSize"
|
|
|
+ :page-sizes="[10, 20, 50, 100]"
|
|
|
+ layout="total, sizes, prev, pager, next, jumper"
|
|
|
+ :total="total"
|
|
|
+ @size-change="handleSizeChange"
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup lang="ts">
|
|
|
+import { ref, onMounted, computed, watch, reactive } from 'vue'
|
|
|
+import { useRoute } from 'vue-router'
|
|
|
+import { Search, View, Monitor, Download, Edit, Delete, Refresh, Plus } from '@element-plus/icons-vue'
|
|
|
+import { ElMessage, ElMessageBox } from 'element-plus'
|
|
|
+import request from '@/api/request'
|
|
|
+import type { ApiResponse } from '@/types/auth'
|
|
|
+import dayjs from 'dayjs'
|
|
|
+
|
|
|
+const route = useRoute()
|
|
|
+const loading = ref(false)
|
|
|
+const tableData = ref([])
|
|
|
+const total = ref(0)
|
|
|
+const currentPage = ref(1)
|
|
|
+const pageSize = ref(20)
|
|
|
+
|
|
|
+// 检索表单接口
|
|
|
+interface SearchForm {
|
|
|
+ title: string
|
|
|
+ standard_no: string
|
|
|
+ document_type: string
|
|
|
+ professional_field: string
|
|
|
+ validity: string
|
|
|
+ issuing_authority: string
|
|
|
+ release_date_start: string
|
|
|
+ release_date_end: string
|
|
|
+ [key: string]: string
|
|
|
+}
|
|
|
+
|
|
|
+// 检索表单
|
|
|
+const searchForm = reactive<SearchForm>({
|
|
|
+ title: '',
|
|
|
+ standard_no: '',
|
|
|
+ document_type: '',
|
|
|
+ professional_field: '',
|
|
|
+ validity: '',
|
|
|
+ issuing_authority: '',
|
|
|
+ release_date_start: '',
|
|
|
+ release_date_end: ''
|
|
|
+})
|
|
|
+
|
|
|
+// 选项配置
|
|
|
+const documentTypeOptions = ['国家标准', '行业标准', '企业标准', '地方标准', '管理制度', '技术规范']
|
|
|
+const professionalFieldOptions = ['建筑工程', '市政工程', '机电安装', '路桥工程', '装饰装修', '其他']
|
|
|
+
|
|
|
+// 根据路由路径判断类型
|
|
|
+const infoType = computed(() => {
|
|
|
+ const path = route.path
|
|
|
+ if (path.includes('/basis')) return 'basis'
|
|
|
+ if (path.includes('/work')) return 'work'
|
|
|
+ if (path.includes('/job')) return 'job'
|
|
|
+ return 'basis'
|
|
|
+})
|
|
|
+
|
|
|
+const pageTitle = computed(() => {
|
|
|
+ switch (infoType.value) {
|
|
|
+ case 'basis': return '编制依据管理'
|
|
|
+ case 'work': return '施工方案管理'
|
|
|
+ case 'job': return '办公制度管理'
|
|
|
+ default: return '基本信息管理'
|
|
|
+ }
|
|
|
+})
|
|
|
+
|
|
|
+const moduleName = computed(() => {
|
|
|
+ switch (infoType.value) {
|
|
|
+ case 'basis': return '编制依据'
|
|
|
+ case 'work': return '施工方案'
|
|
|
+ case 'job': return '办公制度'
|
|
|
+ default: return ''
|
|
|
+ }
|
|
|
+})
|
|
|
+
|
|
|
+const titleLabel = computed(() => {
|
|
|
+ switch (infoType.value) {
|
|
|
+ case 'basis': return '文档名称'
|
|
|
+ case 'work': return '方案名称'
|
|
|
+ case 'job': return '文件名称'
|
|
|
+ default: return '名称'
|
|
|
+ }
|
|
|
+})
|
|
|
+
|
|
|
+const authorityLabel = computed(() => {
|
|
|
+ switch (infoType.value) {
|
|
|
+ case 'basis': return '发布单位'
|
|
|
+ case 'work': return '编制单位'
|
|
|
+ case 'job': return '发布部门'
|
|
|
+ default: return '单位'
|
|
|
+ }
|
|
|
+})
|
|
|
+
|
|
|
+const dateLabel = computed(() => {
|
|
|
+ switch (infoType.value) {
|
|
|
+ case 'basis': return '发布日期'
|
|
|
+ case 'work': return '编制日期'
|
|
|
+ case 'job': return '发布日期'
|
|
|
+ default: return '日期'
|
|
|
+ }
|
|
|
+})
|
|
|
+
|
|
|
+// 获取列表数据
|
|
|
+const loadData = async () => {
|
|
|
+ loading.value = true
|
|
|
+ try {
|
|
|
+ const response = await request.get<ApiResponse<{
|
|
|
+ items: any[]
|
|
|
+ total: number
|
|
|
+ page: number
|
|
|
+ size: number
|
|
|
+ }>>('/api/v1/basic-info/list', {
|
|
|
+ params: {
|
|
|
+ type: infoType.value,
|
|
|
+ page: currentPage.value,
|
|
|
+ size: pageSize.value,
|
|
|
+ ...searchForm
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ // axios 返回的是 AxiosResponse，但在拦截器中我们返回了 response.data
|
|
|
+ // 如果 TS 还是报错，可以显式转换
|
|
|
+ const resData = (response as unknown) as ApiResponse<{
|
|
|
+ items: any[]
|
|
|
+ total: number
|
|
|
+ page: number
|
|
|
+ size: number
|
|
|
+ }>
|
|
|
+
|
|
|
+ if (resData.code === 0) {
|
|
|
+ tableData.value = resData.data.items as any
|
|
|
+ total.value = resData.data.total
|
|
|
+ } else {
|
|
|
+ ElMessage.error(resData.message || '获取数据失败')
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ console.error('获取数据失败:', error)
|
|
|
+ ElMessage.error('网络错误，请稍后重试')
|
|
|
+ } finally {
|
|
|
+ loading.value = false
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+const handleSearch = () => {
|
|
|
+ currentPage.value = 1
|
|
|
+ loadData()
|
|
|
+}
|
|
|
+
|
|
|
+const resetSearch = () => {
|
|
|
+ Object.keys(searchForm).forEach(key => {
|
|
|
+ searchForm[key] = ''
|
|
|
+ })
|
|
|
+ handleSearch()
|
|
|
+}
|
|
|
+
|
|
|
+const handleSizeChange = (val: number) => {
|
|
|
+ pageSize.value = val
|
|
|
+ loadData()
|
|
|
+}
|
|
|
+
|
|
|
+const handleCurrentChange = (val: number) => {
|
|
|
+ currentPage.value = val
|
|
|
+ loadData()
|
|
|
+}
|
|
|
+
|
|
|
+const formatDate = (date: string) => {
|
|
|
+ if (!date) return '-'
|
|
|
+ return dayjs(date).format('YYYY-MM-DD')
|
|
|
+}
|
|
|
+
|
|
|
+const formatDateTime = (date: string) => {
|
|
|
+ if (!date) return '-'
|
|
|
+ return dayjs(date).format('YYYY-MM-DD HH:mm:ss')
|
|
|
+}
|
|
|
+
|
|
|
+const getValidityType = (validity: string) => {
|
|
|
+ switch (validity) {
|
|
|
+ case '现行': return 'success'
|
|
|
+ case '已废止': return 'danger'
|
|
|
+ case '被替代': return 'warning'
|
|
|
+ default: return 'success'
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+const handleAction = (action: string, row: any) => {
|
|
|
+ switch (action) {
|
|
|
+ case 'view':
|
|
|
+ ElMessage.info('查看详情: ' + row.title)
|
|
|
+ break
|
|
|
+ case 'preview':
|
|
|
+ ElMessage.info('预览文件: ' + row.title)
|
|
|
+ break
|
|
|
+ case 'download':
|
|
|
+ ElMessage.info('下载文件: ' + row.title)
|
|
|
+ break
|
|
|
+ case 'edit':
|
|
|
+ ElMessage.info('编辑信息: ' + row.title)
|
|
|
+ break
|
|
|
+ case 'delete':
|
|
|
+ ElMessageBox.confirm('确定要删除该条信息吗？', '提示', {
|
|
|
+ type: 'warning'
|
|
|
+ }).then(() => {
|
|
|
+ ElMessage.success('删除成功')
|
|
|
+ }).catch(() => {})
|
|
|
+ break
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 监听路由变化，切换类型时重新加载数据
|
|
|
+watch(() => route.path, () => {
|
|
|
+ currentPage.value = 1
|
|
|
+ resetSearch()
|
|
|
+})
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ loadData()
|
|
|
+})
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.basic-info-container {
|
|
|
+ padding: 20px;
|
|
|
+ background-color: #f5f7fa;
|
|
|
+ min-height: calc(100vh - 84px);
|
|
|
+}
|
|
|
+
|
|
|
+.search-card {
|
|
|
+ margin-bottom: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.search-header {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.title {
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+
|
|
|
+.search-form {
|
|
|
+ padding: 0 10px;
|
|
|
+}
|
|
|
+
|
|
|
+:deep(.el-form-item__label) {
|
|
|
+ font-weight: normal;
|
|
|
+ color: #606266;
|
|
|
+ padding-bottom: 4px;
|
|
|
+}
|
|
|
+
|
|
|
+.search-buttons {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ gap: 10px;
|
|
|
+ margin-top: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.table-card {
|
|
|
+ padding: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.pagination-container {
|
|
|
+ margin-top: 20px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+}
|
|
|
+
|
|
|
+:deep(.el-table .cell) {
|
|
|
+ white-space: nowrap;
|
|
|
+}
|
|
|
+
|
|
|
+.header-actions {
|
|
|
+ display: flex;
|
|
|
+ gap: 10px;
|
|
|
+}
|
|
|
+</style>
|
