389 lines
9.6 KiB
Vue
389 lines
9.6 KiB
Vue
<template>
|
|
<div class="project-list">
|
|
<div class="table-actions mb10" style="text-align: right">
|
|
<el-button
|
|
type="primary"
|
|
size="mini"
|
|
@click="addProject"
|
|
v-hasPermi="['project:list:add']"
|
|
style="height: 30px"
|
|
>+ 新建项目</el-button
|
|
>
|
|
</div>
|
|
<div class="search-bar">
|
|
<el-form
|
|
:inline="true"
|
|
:model="searchForm"
|
|
class="demo-form-inline"
|
|
size="small"
|
|
>
|
|
<el-form-item label="项目名称" class="form-item">
|
|
<el-input v-model="searchForm.projectName" placeholder="项目名称" />
|
|
</el-form-item>
|
|
<el-form-item label="负责人" class="form-item">
|
|
<el-input
|
|
v-model="searchForm.projectLeaderName"
|
|
placeholder="负责人"
|
|
readonly
|
|
@click.native="openUserSelectDialog"
|
|
><el-button slot="append" icon="el-icon-s-custom"></el-button
|
|
></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="项目状态" class="form-item">
|
|
<el-select
|
|
v-model="searchForm.projectState"
|
|
placeholder="项目状态"
|
|
clearable
|
|
>
|
|
<el-option
|
|
v-for="item in statusList"
|
|
:key="item.dictValue"
|
|
:label="item.dictLabel"
|
|
:value="item.dictValue"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item class="formBtn">
|
|
<el-button type="primary" size="medium" @click="onSearch"
|
|
>查询</el-button
|
|
>
|
|
<el-button @click="onReset" size="medium">重置</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
|
|
<div class="f1 df">
|
|
<CustomTable
|
|
:columns="columns"
|
|
:tableData="tableData"
|
|
:total="total"
|
|
:show-selection="false"
|
|
:show-index="true"
|
|
@size-change="handleSizeChange"
|
|
@current-change="handleCurrentChange"
|
|
tableHeight="510px"
|
|
ref="customTableRef"
|
|
>
|
|
<template slot="operation" slot-scope="{ row }">
|
|
<div class="operation-buttons">
|
|
<el-button
|
|
@click="handleDemand(row)"
|
|
type="text"
|
|
size="mini"
|
|
v-hasPermi="['project:list:demand']"
|
|
>需求管理</el-button
|
|
>
|
|
<el-button
|
|
@click="handleEdit(row)"
|
|
type="text"
|
|
size="mini"
|
|
v-hasPermi="['project:list:eidt']"
|
|
>编辑</el-button
|
|
>
|
|
<el-button
|
|
type="text"
|
|
size="mini"
|
|
@click="handleDelete(row)"
|
|
v-hasPermi="['project:list:delete']"
|
|
style="color: #666"
|
|
>删除</el-button
|
|
>
|
|
</div>
|
|
</template>
|
|
</CustomTable>
|
|
</div>
|
|
<SelectUser
|
|
:dialogVisible="userSelectDialogVisible"
|
|
:multiSelect="false"
|
|
:currentSelectedUser="currentSelectedUser"
|
|
@confirm="handleUserConfirm"
|
|
@close="handleUserClose"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import CustomTable from "@/components/CustomTable.vue";
|
|
import SelectUser from "@/components/SelectUser.vue";
|
|
import { projectApi, systemApi } from "@/utils/api";
|
|
|
|
export default {
|
|
components: {
|
|
CustomTable,
|
|
SelectUser,
|
|
},
|
|
data() {
|
|
return {
|
|
searchForm: {
|
|
projectName: "",
|
|
projectLeaderName: "",
|
|
projectLeader: "",
|
|
projectState: "",
|
|
},
|
|
columns: [
|
|
{ prop: "projectName", label: "项目名称", width: 300 },
|
|
{ prop: "projectCode", label: "项目编号", width: 200 },
|
|
{ prop: "projectLeaderName", label: "负责人" },
|
|
{ prop: "budgetDate", label: "预计工时(天)" },
|
|
{
|
|
prop: "startDate",
|
|
label: "开始时间",
|
|
type: "status",
|
|
callback: (data) => data?.split(" ")[0],
|
|
},
|
|
{
|
|
prop: "endDate",
|
|
label: "结束时间",
|
|
type: "status",
|
|
callback: (data) => data?.split(" ")[0],
|
|
},
|
|
{
|
|
prop: "projectState",
|
|
label: "项目状态",
|
|
type: "status",
|
|
callback: (value) => {
|
|
let status =
|
|
this.statusList.find((ele) => ele.dictValue == value)
|
|
?.dictLabel || "";
|
|
let color = "#333";
|
|
switch (status) {
|
|
case "待启动":
|
|
color = "#999999"; // 橙色
|
|
break;
|
|
case "进行中":
|
|
color = "#FF7D00"; // 红色
|
|
break;
|
|
case "已完成":
|
|
color = "#50B6AA"; // 绿色
|
|
break;
|
|
case "#50B6AA":
|
|
color = "#999999"; // 红色
|
|
break;
|
|
default:
|
|
color = "#333"; // 默认白色
|
|
break;
|
|
}
|
|
return `<span style="color: ${color}">${status}</span>`;
|
|
},
|
|
},
|
|
{ prop: "teamNum", label: "参与项目人数", width: 100 },
|
|
{ prop: "createByName", label: "项目创建人" },
|
|
{
|
|
prop: "operation",
|
|
label: "操作",
|
|
width: "250",
|
|
fixed: "right",
|
|
className: "operation-column",
|
|
},
|
|
],
|
|
tableData: [],
|
|
total: 0,
|
|
userSelectDialogVisible: false,
|
|
currentSelectedUser: [],
|
|
pageNum: 1, // 当前页码
|
|
pageSize: 10, // 每页条数
|
|
statusList: [],
|
|
};
|
|
},
|
|
methods: {
|
|
onSearch() {
|
|
this.fetchProjectList();
|
|
},
|
|
onReset() {
|
|
Object.keys(this.searchForm).forEach((key) => {
|
|
this.searchForm[key] = "";
|
|
});
|
|
this.currentSelectedUser = [];
|
|
this.$refs.customTableRef.handleCurrentChange(1);
|
|
this.fetchProjectList();
|
|
},
|
|
addProject() {
|
|
this.$router.push({
|
|
path: "/project/detail",
|
|
});
|
|
},
|
|
handleDemand(row) {
|
|
this.$router.push({
|
|
path: "/project/demandManage",
|
|
query: {
|
|
id: row.projectId,
|
|
projectName: row.projectName,
|
|
startDate: new Date(row.startDate).getTime(),
|
|
endDate: new Date(row.endDate).getTime(),
|
|
},
|
|
});
|
|
},
|
|
handleEdit(row) {
|
|
this.$router.push({
|
|
path: "/project/detail",
|
|
query: { id: row.projectId },
|
|
});
|
|
},
|
|
handleDelete(row) {
|
|
this.currentDeleteItem = row;
|
|
this.$modal.confirm(`是否确认删项目"${row.projectName}"`).then(() => {
|
|
return this.confirmDelete(row.menuId);
|
|
});
|
|
},
|
|
async confirmDelete() {
|
|
await projectApi.deleteProject(this.currentDeleteItem.projectId);
|
|
this.deleteDialogVisible = false;
|
|
this.currentDeleteItem = null;
|
|
this.$message.success("删除成功");
|
|
this.fetchProjectList();
|
|
},
|
|
fetchProjectList() {
|
|
projectApi
|
|
.listProject({
|
|
...this.searchForm,
|
|
pageNum: this.pageNum,
|
|
pageSize: this.pageSize,
|
|
})
|
|
.then((res) => {
|
|
this.tableData = res.rows;
|
|
this.total = res.total;
|
|
});
|
|
},
|
|
handleSizeChange(size) {
|
|
this.pageSize = size;
|
|
this.pageNum = 1; // 重置为第一页
|
|
this.fetchProjectList();
|
|
},
|
|
handleCurrentChange(page) {
|
|
this.pageNum = page;
|
|
this.fetchProjectList();
|
|
},
|
|
openUserSelectDialog() {
|
|
this.userSelectDialogVisible = true;
|
|
},
|
|
handleUserConfirm(data) {
|
|
this.searchForm.projectLeaderName = data[0].nickName;
|
|
this.searchForm.projectLeader = data[0].userId;
|
|
},
|
|
handleUserClose() {
|
|
this.userSelectDialogVisible = false;
|
|
},
|
|
async getDictData() {
|
|
const res = await systemApi.getDictData("business_projectstate");
|
|
this.statusList = res.data;
|
|
},
|
|
},
|
|
mounted() {
|
|
this.getDictData();
|
|
this.fetchProjectList();
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.project-list {
|
|
padding: 20px;
|
|
background-color: white;
|
|
height: 88vh;
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.search-bar {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.demo-form-inline {
|
|
// display: flex;
|
|
// flex-wrap: nowrap;
|
|
// align-items: flex-start;
|
|
}
|
|
|
|
.demo-form-inline .el-form-item {
|
|
// margin-right: 50px; /* 将间距设置为 30px */
|
|
margin-bottom: 0;
|
|
border: 1px solid #ccc;
|
|
padding-left: 10px;
|
|
border-radius: 4px;
|
|
::v-deep .el-form-item__label {
|
|
color: #999 !important;
|
|
}
|
|
}
|
|
.formBtn {
|
|
border: none !important;
|
|
}
|
|
.demo-form-inline .el-form-item:last-child {
|
|
margin-right: 0; /* 移除最后一个元素的右边距 */
|
|
}
|
|
|
|
.form-item {
|
|
flex: 1;
|
|
}
|
|
|
|
.form-item ::v-deep .el-form-item__content {
|
|
// width: 100%;
|
|
}
|
|
|
|
.form-item ::v-deep .el-input,
|
|
.form-item ::v-deep .el-select {
|
|
// width: 100%;
|
|
input,
|
|
select {
|
|
border: none !important;
|
|
}
|
|
}
|
|
|
|
.search-buttons {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
::v-deep .operation-buttons .el-button {
|
|
padding: 4px 8px;
|
|
margin: 0 2px;
|
|
font-weight: 600;
|
|
font-size: 14px;
|
|
}
|
|
|
|
::v-deep .operation-column {
|
|
background-color: #ffffff;
|
|
box-shadow: -2px 0 5px rgba(241, 112, 6, 0.1);
|
|
}
|
|
|
|
.el-button.is-text {
|
|
min-width: 32px !important;
|
|
}
|
|
|
|
.dialog-footer {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.dialog-footer .el-button {
|
|
margin: 0 10px;
|
|
}
|
|
|
|
.delete-content {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
}
|
|
|
|
.warning-icon {
|
|
font-size: 24px;
|
|
color: #e6a23c;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
/* 添加以下样式来使对话框垂直居中 */
|
|
::v-deep .delete-dialog.el-dialog {
|
|
margin-top: 0 !important;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
.search-buttons ::v-deep .el-button {
|
|
width: 90px !important;
|
|
height: 36px;
|
|
}
|
|
</style>
|