<template>
|
<div>
|
<!-- 列表页面 -->
|
<div class="page-container" v-if="showEdit == 0">
|
<!-- 查询条件 -->
|
<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="add">新增</el-button>
|
</el-form-item>
|
</el-form>
|
</div>
|
<!-- 表格 -->
|
<div class="table-section">
|
<el-table :data="tableData" v-loading="loading" stripe style="width: 100%" fit height="450px">
|
<el-table-column prop="project_name" label="名称" fixed="left" width="180px"></el-table-column>
|
<el-table-column prop="project_type_name" label="类型" width="120px"></el-table-column>
|
<el-table-column prop="manager_name" label="项目经理" width="100px"></el-table-column>
|
<el-table-column prop="company_name" label="客户" width="120px"></el-table-column>
|
<el-table-column prop="contact_name" label="客户联系人" width="120px"></el-table-column>
|
<el-table-column prop="project_status_name" label="状态" width="80px"></el-table-column>
|
<el-table-column prop="project_stage_name" label="阶段" width="100px"></el-table-column>
|
<el-table-column prop="inner_hours" label="对内工时/h" width="100px"></el-table-column>
|
<el-table-column prop="outer_hours" label="对外工时/h" width="100px"></el-table-column>
|
<el-table-column prop="base_hours" label="基础工时/h" width="100px"></el-table-column>
|
<el-table-column prop="actual_hours" label="实际工时/h" width="120px"></el-table-column>
|
<el-table-column prop="estimate_start_time" label="预计开始时间" width="120px"></el-table-column>
|
<el-table-column prop="estimate_complete_time" label="预计完成时间" width="120px"></el-table-column>
|
<el-table-column prop="actual_start_time" label="实际开始时间" width="120px"></el-table-column>
|
<el-table-column prop="actual_complete_time" label="实际完成时间" width="120px"></el-table-column>
|
<el-table-column prop="desc" label="项目描述" width="160px"></el-table-column>
|
<el-table-column prop="remark" label="备注" width="200px"></el-table-column>
|
|
<el-table-column label="操作栏" fixed="right" width="320px">
|
<template #default="scope">
|
<el-button type="text" size="small" @click="handleEdit(scope.row)">编辑</el-button>
|
<el-button type="text" size="small" @click="handleDelete(scope.row)">删除</el-button>
|
|
<el-button
|
type="text"
|
size="small"
|
@click="handleProjectHours(scope.row)"
|
v-permission="{ permission: '工时', type: 'disabled' }"
|
>工时</el-button
|
>
|
<el-button
|
type="text"
|
size="small"
|
v-if="scope.row.project_status === 1"
|
@click="handleProjectSetUp(scope.row)"
|
v-permission="{ permission: '立项', type: 'disabled' }"
|
>立项</el-button
|
>
|
<el-button
|
type="text"
|
size="small"
|
v-if="scope.row.project_status === 2"
|
@click="handleProjectStart(scope.row)"
|
v-permission="{ permission: '启动', type: 'disabled' }"
|
>启动</el-button
|
>
|
<el-button
|
type="text"
|
size="small"
|
v-if="scope.row.project_status === 3"
|
@click="handleProjectComplete(scope.row)"
|
v-permission="{ permission: '完成', type: 'disabled' }"
|
>完成</el-button
|
>
|
<el-button
|
type="text"
|
size="small"
|
v-if="scope.row.project_status === 4"
|
@click="handleProjectTermination(scope.row)"
|
v-permission="{ permission: '终止', type: 'disabled' }"
|
>终止</el-button
|
>
|
<!-- <el-button type="text" size="small" @click="handleProjectStatistics(scope.row)">统计</el-button>
|
<el-button type="text" size="small" @click="handleProjectLog(scope.row)">日志</el-button> -->
|
<el-button type="text" size="small" @click="handleProjectStatistics(scope.row)">详情</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
|
<div class="demo-pagination-block">
|
<!-- <div class="demonstration">All combined</div> -->
|
<el-pagination
|
v-model:current-page="currentPage"
|
v-model:page-size="pageSize"
|
:page-sizes="[10, 20, 30]"
|
:small="small"
|
:disabled="disabled"
|
:background="background"
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="totalSize"
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
/>
|
</div>
|
</div>
|
</div>
|
<!-- 编辑页面 -->
|
<project-add v-if="showEdit == 1" @editClose="editClose" :editId="editId"></project-add>
|
<!-- 项目立项 -->
|
<project-set-up v-if="showEdit == 2" @editClose="editClose" :editId="editId"></project-set-up>
|
|
<project-edit-hours v-if="showEdit == 3" @editClose="editClose" :editId="editId"></project-edit-hours>
|
|
<project-log v-if="showEdit == 4" @editClose="editClose" :editId="editId"></project-log>
|
|
<project-detail v-if="showEdit == 5" @editClose="editClose" :editId="editId" :showTitle="false"></project-detail>
|
</div>
|
</template>
|
|
<script>
|
import { ref, reactive, onMounted } from 'vue'
|
import { ElMessageBox, ElMessage } from 'element-plus'
|
|
import projectInfo from '@/model/projectInfo'
|
import sysDictItemModel from '@/model/sysDictItem'
|
|
import ProjectAdd from './project-add'
|
import ProjectSetUp from './project-set-up'
|
import ProjectEditHours from './project-edit-hours'
|
import ProjectLog from './project-log'
|
import projectHourStatistics from './project-hour-statistics'
|
import projectDetail from './project-detail'
|
|
export default {
|
components: {
|
ProjectAdd,
|
ProjectSetUp,
|
ProjectEditHours,
|
ProjectLog,
|
projectHourStatistics,
|
projectDetail,
|
},
|
|
setup() {
|
const loading = ref(false)
|
|
const currentPage = ref(1)
|
const pageSize = ref(10)
|
const totalSize = ref(100)
|
const projectTypeArr = ref([])
|
const projectStatusArr = ref([])
|
const projectStageArr = ref([])
|
|
const showEdit = ref(0)
|
const editId = ref(1)
|
|
const queryForm = reactive({
|
keyword: '',
|
// type: '',
|
// stage: '',
|
// status: '',
|
type_list: [], // 改为数组
|
stage_list: [], // 改为数组
|
status_list: [], // 改为数组
|
page: 1,
|
count: 10,
|
})
|
|
const resultPage = ref({})
|
|
const tableData = ref([])
|
|
onMounted(() => {
|
// 列出所有项目信息
|
getProjectInfoPage()
|
loadDictDitems()
|
})
|
|
const getProjectInfoPage = async () => {
|
try {
|
queryForm.page = currentPage.value
|
queryForm.count = pageSize.value
|
|
loading.value = true
|
resultPage.value = await projectInfo.getProjectInfoPage(queryForm)
|
tableData.value = resultPage.value.items
|
totalSize.value = resultPage.value.total
|
currentPage.value = resultPage.value.page
|
pageSize.value = resultPage.value.count
|
|
loading.value = false
|
} catch (error) {
|
loading.value = false
|
if (error.code === 10020) {
|
tableData.value = []
|
}
|
}
|
}
|
|
const search = () => {
|
// 执行查询操作，更新表格数据
|
// 列出所有项目信息
|
getProjectInfoPage()
|
}
|
|
// 根据字典类型查询字典
|
const loadDictDitems = async () => {
|
projectTypeArr.value = await sysDictItemModel.getSysDictItemListByType('project_type')
|
projectStatusArr.value = await sysDictItemModel.getSysDictItemListByType('project_status')
|
projectStageArr.value = await sysDictItemModel.getSysDictItemListByType('project_stage')
|
}
|
|
const handleEdit = row => {
|
// 编辑操作
|
editId.value = row.id
|
showEdit.value = 1
|
}
|
|
const handleDelete = row => {
|
// 删除操作
|
ElMessageBox.confirm('此操作将永久删除该记录, 是否继续?', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning',
|
})
|
.then(async () => {
|
const res = await projectInfo.deleteProjectInfo(row.id)
|
if (res.code < window.MAX_SUCCESS_CODE) {
|
getProjectInfoPage()
|
ElMessage.success(`${res.message}`)
|
}
|
})
|
.catch(() => {
|
// 用户点击取消按钮时执行的操作
|
// 可以选择不做任何事情，也可以显示取消消息
|
// ElMessage.info('操作已取消'); // 如果需要显示取消消息，可以取消注释
|
})
|
}
|
|
/**
|
* 项目立项
|
*/
|
const handleProjectSetUp = row => {
|
// 工时确认操作
|
editId.value = row.id
|
showEdit.value = 2
|
}
|
|
/**
|
* 项目启动
|
*/
|
const handleProjectStart = row => {
|
ElMessageBox.confirm('确定启动项目, 是否继续?', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning',
|
})
|
.then(async () => {
|
const res = await projectInfo.editProjectInfoStart(row.id)
|
if (res.code < window.MAX_SUCCESS_CODE) {
|
getProjectInfoPage()
|
ElMessage.success(`${res.message}`)
|
}
|
})
|
.catch(() => {
|
// 用户点击取消按钮时执行的操作
|
// 可以选择不做任何事情，也可以显示取消消息
|
// ElMessage.info('操作已取消'); // 如果需要显示取消消息，可以取消注释
|
})
|
}
|
|
/**
|
* 项目完成
|
*/
|
const handleProjectComplete = row => {
|
ElMessageBox.confirm('确定完成项目, 是否继续?', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning',
|
})
|
.then(async () => {
|
const res = await projectInfo.editProjectInfoComplete(row.id)
|
if (res.code < window.MAX_SUCCESS_CODE) {
|
getProjectInfoPage()
|
ElMessage.success(`${res.message}`)
|
}
|
})
|
.catch(() => {
|
// 用户点击取消按钮时执行的操作
|
// 可以选择不做任何事情，也可以显示取消消息
|
// ElMessage.info('操作已取消'); // 如果需要显示取消消息，可以取消注释
|
})
|
}
|
|
/**
|
* 项目终止
|
*/
|
const handleProjectTermination = row => {
|
ElMessageBox.confirm('确定终止项目, 是否继续?', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning',
|
})
|
.then(async () => {
|
const res = await projectInfo.editProjectInfoTermination(row.id)
|
if (res.code < window.MAX_SUCCESS_CODE) {
|
getProjectInfoPage()
|
ElMessage.success(`${res.message}`)
|
}
|
})
|
.catch(() => {
|
// 用户点击取消按钮时执行的操作
|
// 可以选择不做任何事情，也可以显示取消消息
|
// ElMessage.info('操作已取消'); // 如果需要显示取消消息，可以取消注释
|
})
|
}
|
|
/**
|
* 查看项目日志
|
*/
|
const handleProjectLog = row => {
|
// 工时操作
|
editId.value = row.id
|
showEdit.value = 4
|
}
|
|
/**
|
* 查看项目统计
|
*/
|
const handleProjectStatistics = row => {
|
// 工时操作
|
editId.value = row.id
|
showEdit.value = 5
|
}
|
|
const handleProjectHours = row => {
|
// 工时操作
|
editId.value = row.id
|
showEdit.value = 3
|
}
|
|
const handleSizeChange = val => {
|
pageSize.value = val
|
getProjectInfoPage()
|
}
|
|
const handleCurrentChange = val => {
|
currentPage.value = val
|
getProjectInfoPage()
|
}
|
|
const editClose = () => {
|
showEdit.value = 0
|
getProjectInfoPage()
|
}
|
|
const add = () => {
|
showEdit.value = 1
|
editId.value = ''
|
}
|
|
return {
|
loading,
|
|
projectTypeArr,
|
projectStatusArr,
|
projectStageArr,
|
|
queryForm,
|
tableData,
|
search,
|
handleEdit,
|
handleDelete,
|
handleProjectSetUp,
|
handleProjectStart,
|
handleProjectComplete,
|
handleProjectTermination,
|
handleProjectHours,
|
handleProjectLog,
|
handleProjectStatistics,
|
|
currentPage,
|
pageSize,
|
totalSize,
|
|
handleSizeChange,
|
handleCurrentChange,
|
|
editClose,
|
add,
|
editId,
|
showEdit,
|
}
|
},
|
}
|
</script>
|
|
<style scoped>
|
.demo-form-inline .el-input {
|
--el-input-width: 220px;
|
}
|
|
.page-container {
|
padding: 10px;
|
}
|
|
.search-section {
|
margin-bottom: 10px;
|
padding: 20px;
|
/* background-color: #f5f5f5; */
|
border-radius: 4px;
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
}
|
|
.table-section {
|
padding: 20px;
|
background-color: #fff;
|
border-radius: 4px;
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
}
|
.demo-pagination-block {
|
margin-top: 10px;
|
}
|
.demo-pagination-block .demonstration {
|
margin-bottom: 16px;
|
}
|
|
.icon_btn_class {
|
width: 1em;
|
height: 1em;
|
margin-left: 4px;
|
margin-right: 4px;
|
}
|
|
.el-form-item {
|
width: 220px;
|
}
|
</style>
|
