<template>
|
<div>
|
<!-- 列表页面 -->
|
<div class="page-container">
|
<!-- 查询条件 -->
|
<div class="search-section">
|
<el-form :inline="true" :model="queryForm" class="demo-form-inline" label-width="auto">
|
<el-form-item label="关键字">
|
<el-input v-model="queryForm.keyword" placeholder="名称/描述/备注/项目经理/联系人" clearable />
|
</el-form-item>
|
<el-form-item label="类型">
|
<el-select v-model="queryForm.type_list" placeholder="类型" clearable filterable :multiple="true">
|
<el-option v-for="item in projectTypeArr" :key="item.value" :label="item.label" :value="item.value" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="阶段">
|
<el-select v-model="queryForm.stage_list" placeholder="阶段" clearable filterable :multiple="true">
|
<el-option v-for="item in projectStageArr" :key="item.value" :label="item.label" :value="item.value" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="状态">
|
<el-select v-model="queryForm.status_list" placeholder="类型" clearable filterable :multiple="true">
|
<el-option v-for="item in projectStatusArr" :key="item.value" :label="item.label" :value="item.value" />
|
</el-select>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" @click="search">查询</el-button>
|
<el-button type="primary" @click="exportReport">导出</el-button>
|
</el-form-item>
|
</el-form>
|
</div>
|
</div>
|
<div class="card-container">
|
<el-card v-for="item in tableData" :key="item.project_id" class="project-card">
|
<div class="card-header">{{ item.project_name }}</div>
|
<div class="card-body">
|
<p><strong>类型：</strong>{{ item.project_type_name }}</p>
|
<p><strong>项目经理：</strong>{{ item.manager_name }}</p>
|
<p><strong>客户：</strong>{{ item.company_name }}</p>
|
<p><strong>客户联系人：</strong>{{ item.contact_name }}</p>
|
<p class="row-flex">
|
<span class="half"><strong>对内工时/h：</strong>{{ item.inner_hours }}</span>
|
<span class="half"><strong>对外工时/h：</strong>{{ item.outer_hours }}</span>
|
</p>
|
<p class="row-flex">
|
<span class="half"><strong>基础工时/h：</strong>{{ item.base_hours }}</span>
|
<span class="half"><strong>实际工时/h：</strong>{{ item.actual_hours }}</span>
|
</p>
|
|
<p><strong>预计时间(开始/完成)：</strong>{{ item.estimate_start_time }} ~ {{ item.estimate_complete_time }}</p>
|
<p><strong>实际时间(开始/完成)：</strong>{{ item.actual_start_time }} ~ {{ item.actual_complete_time }}</p>
|
<el-collapse>
|
<el-collapse-item title="更多信息">
|
<p><strong>状态：</strong>{{ item.project_status_name }}</p>
|
<p><strong>阶段：</strong>{{ item.project_stage_name }}</p>
|
<p><strong>项目描述：</strong>{{ item.desc }}</p>
|
<p><strong>备注：</strong>{{ item.remark }}</p>
|
</el-collapse-item>
|
</el-collapse>
|
</div>
|
</el-card>
|
</div>
|
|
</div>
|
</template>
|
|
<script setup>
|
import { ref, reactive, onMounted } from 'vue'
|
import { ElMessageBox, ElMessage } from 'element-plus'
|
import projectInfo from '@/model/projectInfo'
|
import sysDictItemModel from '@/model/sysDictItem'
|
|
const loading = ref(false)
|
const tableData = ref([])
|
|
const queryForm = reactive({
|
keyword: '',
|
type_list: [], // 改为数组
|
stage_list: [], // 改为数组
|
status_list: [], // 改为数组
|
page: 1,
|
count: 10,
|
})
|
|
onMounted(() => {
|
// 列出所有项目信息
|
getProjectInfoList()
|
loadDictDitems()
|
})
|
|
const getProjectInfoList = async () => {
|
try {
|
loading.value = true
|
tableData.value = await projectInfo.getProjectInfoReportList(queryForm)
|
loading.value = false
|
} catch (error) {
|
loading.value = false
|
if (error.code === 10020) {
|
tableData.value = []
|
}
|
}
|
}
|
|
const exportProjectInfoList = async () => {
|
try {
|
loading.value = true
|
await projectInfo.exportProjectInfoList(queryForm)
|
loading.value = false
|
} catch (error) {
|
loading.value = false
|
|
}
|
}
|
|
const search = () => {
|
// 执行查询操作，更新表格数据
|
// 列出所有项目信息
|
getProjectInfoList()
|
}
|
|
const exportReport = () => {
|
// 执行查询操作，更新表格数据
|
// 列出所有项目信息
|
exportProjectInfoList()
|
}
|
|
const projectTypeArr = ref([])
|
const projectStatusArr = ref([])
|
const projectStageArr = ref([])
|
// 根据字典类型查询字典
|
const loadDictDitems = async () => {
|
projectTypeArr.value = await sysDictItemModel.getSysDictItemListByType('project_type')
|
projectStatusArr.value = await sysDictItemModel.getSysDictItemListByType('project_status')
|
projectStageArr.value = await sysDictItemModel.getSysDictItemListByType('project_stage')
|
}
|
|
</script>
|
|
<style lang="css" scoped>
|
.page-container {
|
padding: 10px;
|
}
|
|
.el-form--inline {
|
.el-form-item {
|
|
.el-input,
|
.el-cascader,
|
.el-select,
|
.el-autocomplete {
|
width: 240px;
|
}
|
}
|
}
|
</style>
|
<style scoped>
|
.card-container {
|
display: grid;
|
grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
|
gap: 16px;
|
padding: 16px;
|
}
|
|
.project-card {
|
padding: 16px;
|
}
|
|
.card-header {
|
font-weight: bold;
|
font-size: 18px;
|
margin-bottom: 8px;
|
}
|
|
.card-body p {
|
margin: 4px 0;
|
}
|
</style>
|
|
<style scoped>
|
.row-flex {
|
display: flex;
|
justify-content: space-between;
|
margin: 6px 0;
|
}
|
|
.row-flex .half {
|
flex: 1;
|
box-sizing: border-box;
|
padding-right: 10px;
|
/* 可选：用于右边距 */
|
}
|
</style>
|
