需求页面基本完成，日志初步开始
rdpnr_hemingxia
parent
6032c814e2
commit
f9a402e991
Binary file not shown.
|
After Width: | Height: | Size: 606 B |
Binary file not shown.
|
After Width: | Height: | Size: 775 B |
Binary file not shown.
|
After Width: | Height: | Size: 804 B |
|
|
@ -198,9 +198,49 @@ export const taskApi = {
|
||||||
|
|
||||||
}
|
}
|
||||||
export const demandApi = {
|
export const demandApi = {
|
||||||
getDemandTree: (data) => request({
|
getVersionTree: (data) => request({
|
||||||
url: `/projectVersion/tree`,
|
url: `/projectVersion/tree`,
|
||||||
method: 'get',
|
method: 'get',
|
||||||
params: data,
|
params: data,
|
||||||
}),
|
}),
|
||||||
|
addVersion: (data) => request({
|
||||||
|
url: '/projectVersion/insert',
|
||||||
|
method: 'post',
|
||||||
|
data: data,
|
||||||
|
}),
|
||||||
|
// 删除版本号
|
||||||
|
delVersion: (data) => request({
|
||||||
|
url: `/projectVersion/${data}`,
|
||||||
|
method: 'delete',
|
||||||
|
}),
|
||||||
|
editVersion: (data) => request({
|
||||||
|
url: '/projectVersion/update',
|
||||||
|
method: 'put',
|
||||||
|
data: data,
|
||||||
|
}),
|
||||||
|
getDemandList: (data) => request({
|
||||||
|
url: `/demand/list`,
|
||||||
|
method: 'get',
|
||||||
|
params: data,
|
||||||
|
}),
|
||||||
|
addDemand: (data) => request({
|
||||||
|
url: '/demand/insert',
|
||||||
|
method: 'post',
|
||||||
|
data: data,
|
||||||
|
}),
|
||||||
|
eidtDemand: (data) => request({
|
||||||
|
url: '/demand/update',
|
||||||
|
method: 'put',
|
||||||
|
data: data,
|
||||||
|
}),
|
||||||
|
delDemand: (data) => request({
|
||||||
|
url: `/demand//${data}`,
|
||||||
|
method: 'delete',
|
||||||
|
}),
|
||||||
|
delDemandBatch: (data) => request({
|
||||||
|
url: `/demand/remove/batch?ids=${data}`,
|
||||||
|
method: 'delete',
|
||||||
|
}),
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,928 @@
|
||||||
|
<template>
|
||||||
|
<div class="container">
|
||||||
|
<div class="topTitle">需求列表</div>
|
||||||
|
<!-- 搜索筛选区域 -->
|
||||||
|
<div class="search-filters">
|
||||||
|
<el-input
|
||||||
|
v-model="filters.title"
|
||||||
|
placeholder="请输入"
|
||||||
|
class="filter-input"
|
||||||
|
>
|
||||||
|
<template #prefix>
|
||||||
|
<div>标题名称</div>
|
||||||
|
</template>
|
||||||
|
</el-input>
|
||||||
|
|
||||||
|
<el-input
|
||||||
|
v-model="filters.responsiblePersonName"
|
||||||
|
placeholder="请选择负责人"
|
||||||
|
class="filter-input"
|
||||||
|
readonly
|
||||||
|
@focus="openUser('search')"
|
||||||
|
>
|
||||||
|
<template #prefix>负责人</template>
|
||||||
|
</el-input>
|
||||||
|
|
||||||
|
<el-select
|
||||||
|
v-model="filters.demandStatus"
|
||||||
|
placeholder="不限"
|
||||||
|
class="filter-select"
|
||||||
|
>
|
||||||
|
<template #prefix>需求状态</template>
|
||||||
|
<el-option
|
||||||
|
v-for="item in statusList"
|
||||||
|
:key="item.dictValue"
|
||||||
|
:label="item.dictLabel"
|
||||||
|
:value="item.dictValue"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
|
||||||
|
<el-select
|
||||||
|
v-model="filters.priority"
|
||||||
|
placeholder="不限"
|
||||||
|
class="filter-select"
|
||||||
|
>
|
||||||
|
<template #prefix>优先级</template>
|
||||||
|
<el-option
|
||||||
|
v-for="item in priorityList"
|
||||||
|
:key="item.dictValue"
|
||||||
|
:label="item.dictLabel"
|
||||||
|
:value="item.dictValue"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
|
||||||
|
<div class="filter-buttons">
|
||||||
|
<el-button type="primary" @click="handleSearch">查询</el-button>
|
||||||
|
<el-button @click="handleReset">重置</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 操作按钮区域 -->
|
||||||
|
<div class="table-operations">
|
||||||
|
<el-button type="primary" @click="handleAdd">
|
||||||
|
<el-icon class="el-icon-plus" />
|
||||||
|
新建需求
|
||||||
|
</el-button>
|
||||||
|
<el-button @click="handleBatchDelete">删除</el-button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 表格区域 -->
|
||||||
|
<el-table
|
||||||
|
:data="tableData"
|
||||||
|
style="width: 100%"
|
||||||
|
@selection-change="handleSelectionChange"
|
||||||
|
class="tableBox"
|
||||||
|
>
|
||||||
|
<el-table-column type="selection" width="55" />
|
||||||
|
<el-table-column label="序号" width="70" prop="id" />
|
||||||
|
<el-table-column label="版本号" prop="versionNumber" />
|
||||||
|
<el-table-column label="标题" prop="title" />
|
||||||
|
<el-table-column label="需求状态">
|
||||||
|
<template #default="scope">
|
||||||
|
<div>
|
||||||
|
<el-dropdown
|
||||||
|
trigger="click"
|
||||||
|
placement="bottom"
|
||||||
|
@command="
|
||||||
|
(data) => {
|
||||||
|
changeRow(data, 'demandStatus', scope.row);
|
||||||
|
}
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<el-radio
|
||||||
|
v-model="scope.row.demandStatus"
|
||||||
|
:label="scope.row.demandStatus"
|
||||||
|
:class="['status-tag', getStatusClass(scope.row.demandStatus)]"
|
||||||
|
>
|
||||||
|
{{
|
||||||
|
statusList[scope.row.demandStatus]
|
||||||
|
? statusList[scope.row.demandStatus].dictLabel
|
||||||
|
: ""
|
||||||
|
}}</el-radio
|
||||||
|
>
|
||||||
|
<el-dropdown-menu slot="dropdown">
|
||||||
|
<el-dropdown-item
|
||||||
|
v-for="item in statusList"
|
||||||
|
:key="item.dictValue"
|
||||||
|
:command="item.dictValue"
|
||||||
|
:class="{
|
||||||
|
tableSelect1: true,
|
||||||
|
selectedItem1: item.dictValue == scope.row.demandStatus,
|
||||||
|
}"
|
||||||
|
><el-radio
|
||||||
|
v-model="scope.row.demandStatus"
|
||||||
|
:label="scope.row.demandStatus"
|
||||||
|
:class="['status-tag', getStatusClass(item.dictValue)]"
|
||||||
|
>
|
||||||
|
{{
|
||||||
|
statusList[item.dictValue]
|
||||||
|
? statusList[item.dictValue].dictLabel
|
||||||
|
: ""
|
||||||
|
}}</el-radio
|
||||||
|
></el-dropdown-item
|
||||||
|
>
|
||||||
|
</el-dropdown-menu>
|
||||||
|
</el-dropdown>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="负责人" prop="responsiblePersonName">
|
||||||
|
<template #default="scope">
|
||||||
|
<div @click="openUser('change', scope.row)" style="cursor: pointer">
|
||||||
|
{{ scope.row.responsiblePersonName }}
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
|
||||||
|
<el-table-column label="预计工时(天)" prop="estimatedWorkHours" />
|
||||||
|
<el-table-column label="开始时间" prop="createTime">
|
||||||
|
<template #default="scope">
|
||||||
|
{{ scope.row.createTime.split(" ")[0] }}
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="结束时间" prop="endTime">
|
||||||
|
<template #default="scope">
|
||||||
|
{{ scope.row.endTime.split(" ")[0] }}
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="优先级" prop="priority">
|
||||||
|
<template #default="scope">
|
||||||
|
<div>
|
||||||
|
<el-dropdown
|
||||||
|
trigger="click"
|
||||||
|
placement="bottom"
|
||||||
|
@command="
|
||||||
|
(data) => {
|
||||||
|
changeRow(data, 'priority', scope.row);
|
||||||
|
}
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<span class="el-dropdown-link">
|
||||||
|
{{
|
||||||
|
priorityList.find(
|
||||||
|
(ele) => ele.dictValue == scope.row.priority
|
||||||
|
)
|
||||||
|
? priorityList.find(
|
||||||
|
(ele) => ele.dictValue == scope.row.priority
|
||||||
|
).dictLabel
|
||||||
|
: ""
|
||||||
|
}}
|
||||||
|
<i class="el-icon-arrow-down"></i>
|
||||||
|
</span>
|
||||||
|
<el-dropdown-menu slot="dropdown">
|
||||||
|
<el-dropdown-item
|
||||||
|
v-for="item in priorityList"
|
||||||
|
:key="item.dictValue"
|
||||||
|
:command="item.dictValue"
|
||||||
|
:class="{
|
||||||
|
tableSelect2: true,
|
||||||
|
selectedItem2: item.dictValue == scope.row.priority,
|
||||||
|
}"
|
||||||
|
>{{ item.dictLabel }}</el-dropdown-item
|
||||||
|
>
|
||||||
|
</el-dropdown-menu>
|
||||||
|
</el-dropdown>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="操作" width="120">
|
||||||
|
<template #default="scope">
|
||||||
|
<div>
|
||||||
|
<el-button type="text" @click="handleEdit(scope.row)">
|
||||||
|
编辑
|
||||||
|
</el-button>
|
||||||
|
<el-button
|
||||||
|
type="text"
|
||||||
|
@click="handleDelete(scope.row)"
|
||||||
|
style="color: #666"
|
||||||
|
>
|
||||||
|
删除
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
|
||||||
|
<!-- 分页 -->
|
||||||
|
<div class="pagination">
|
||||||
|
<span class="total">共 {{ total }} 条</span>
|
||||||
|
<el-pagination
|
||||||
|
v-model:current-page="currentPage"
|
||||||
|
v-model:page-size="pageSize"
|
||||||
|
:total="total"
|
||||||
|
@current-change="handlePageChange"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<SelectUser
|
||||||
|
:dialogVisible="userSelectDialogVisible"
|
||||||
|
:multiSelect="false"
|
||||||
|
:currentSelectedUser="currentSelectedUser"
|
||||||
|
@confirm="handleUserConfirm"
|
||||||
|
@close="handleUserClose"
|
||||||
|
/>
|
||||||
|
<el-dialog
|
||||||
|
:title="checkedRow.id ? '新建需求' : '修改需求'"
|
||||||
|
:visible.sync="dialogVisibleAdd"
|
||||||
|
width="40%"
|
||||||
|
>
|
||||||
|
<el-form
|
||||||
|
:inline="true"
|
||||||
|
:rules="rules"
|
||||||
|
:model="editData"
|
||||||
|
label-width="80px"
|
||||||
|
class="addForm"
|
||||||
|
ref="ruleForm"
|
||||||
|
>
|
||||||
|
<el-form-item label="标题" class="longItem" prop="title">
|
||||||
|
<el-input v-model="editData.title"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="所属项目" prop="projectId">
|
||||||
|
<el-input v-model="editData.projectName" disabled></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="所属版本" prop="versionId">
|
||||||
|
<el-select
|
||||||
|
v-model="editData.versionId"
|
||||||
|
placeholder="请选择所属版本"
|
||||||
|
clearable
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="item in versionList"
|
||||||
|
:key="item.nodeId"
|
||||||
|
:label="item.title"
|
||||||
|
:value="item.id"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="负责人" prop="responsiblePerson">
|
||||||
|
<el-input
|
||||||
|
v-model="editData.responsiblePersonName"
|
||||||
|
placeholder="请选择负责人"
|
||||||
|
class="filter-input"
|
||||||
|
readonly
|
||||||
|
@focus="openUser('add')"
|
||||||
|
>
|
||||||
|
</el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="需求状态" prop="demandStatus">
|
||||||
|
<el-select
|
||||||
|
v-model="editData.demandStatus"
|
||||||
|
placeholder="请选择需求状态"
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="item in statusList"
|
||||||
|
:key="item.dictValue"
|
||||||
|
:label="item.dictLabel"
|
||||||
|
:value="item.dictValue"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="优先级" prop="priority">
|
||||||
|
<el-select v-model="editData.priority" placeholder="请选择优先级">
|
||||||
|
<el-option
|
||||||
|
v-for="item in priorityList"
|
||||||
|
:key="item.dictValue"
|
||||||
|
:label="item.dictLabel"
|
||||||
|
:value="item.dictValue"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="预计工时" prop="estimatedWorkHours">
|
||||||
|
<el-select
|
||||||
|
v-model="editData.estimatedWorkHours"
|
||||||
|
filterable
|
||||||
|
allow-create
|
||||||
|
default-first-option
|
||||||
|
placeholder="请输入预计工时"
|
||||||
|
@change="changeTime"
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="item in options"
|
||||||
|
:key="item.value"
|
||||||
|
:label="item.label"
|
||||||
|
:value="item.value"
|
||||||
|
>
|
||||||
|
</el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="开始时间" prop="createTime">
|
||||||
|
<el-date-picker
|
||||||
|
@change="changeTime"
|
||||||
|
v-model="editData.createTime"
|
||||||
|
type="date"
|
||||||
|
placeholder="选择日期"
|
||||||
|
style="width: 240px"
|
||||||
|
value-format="yyyy-MM-dd 00:00:00"
|
||||||
|
>
|
||||||
|
</el-date-picker>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="结束时间" prop="endTime">
|
||||||
|
<el-date-picker
|
||||||
|
v-model="editData.endTime"
|
||||||
|
type="date"
|
||||||
|
placeholder="选择日期"
|
||||||
|
value-format="yyyy-MM-dd 23:59:59"
|
||||||
|
>
|
||||||
|
</el-date-picker>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<div slot="footer" class="dialog-footer">
|
||||||
|
<el-button @click="dialogVisibleAdd = false">取消</el-button>
|
||||||
|
<el-button type="primary" @click="confirmAddDemand">确定</el-button>
|
||||||
|
</div>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { demandApi, systemApi } from "@/utils/api";
|
||||||
|
import SelectUser from "@/components/SelectUser.vue";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "MainContentTable",
|
||||||
|
components: {
|
||||||
|
SelectUser,
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
projectId: "",
|
||||||
|
version: {
|
||||||
|
type: Object,
|
||||||
|
default: {},
|
||||||
|
},
|
||||||
|
projectName: {
|
||||||
|
type: String,
|
||||||
|
default: "",
|
||||||
|
},
|
||||||
|
versionList: {
|
||||||
|
type: Array,
|
||||||
|
default: [],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
filters: {
|
||||||
|
title: "",
|
||||||
|
responsiblePersonName: "",
|
||||||
|
demandStatus: "",
|
||||||
|
priority: "",
|
||||||
|
responsiblePersonId: "",
|
||||||
|
},
|
||||||
|
tableData: [],
|
||||||
|
selectedRows: [],
|
||||||
|
checkedRow: {},
|
||||||
|
currentPage: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
total: 0,
|
||||||
|
priorityList: [],
|
||||||
|
statusList: [],
|
||||||
|
userSelectDialogVisible: false,
|
||||||
|
dialogVisibleAdd: false,
|
||||||
|
currentSelectedUser: [],
|
||||||
|
editData: {
|
||||||
|
id: "",
|
||||||
|
title: "",
|
||||||
|
versionId: "",
|
||||||
|
demandStatus: "",
|
||||||
|
responsiblePerson: "",
|
||||||
|
estimatedWorkHours: "",
|
||||||
|
createTime: "",
|
||||||
|
endTime: "",
|
||||||
|
priority: "",
|
||||||
|
projectId: "",
|
||||||
|
},
|
||||||
|
rules: {
|
||||||
|
title: [
|
||||||
|
{ required: true, message: "请输入标题", trigger: "blur" },
|
||||||
|
{
|
||||||
|
min: 3,
|
||||||
|
max: 50,
|
||||||
|
message: "长度在 3 到 50 个字符",
|
||||||
|
trigger: "blur",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
demandStatus: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: "请选择需求状态",
|
||||||
|
trigger: "change",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
responsiblePerson: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: "请选择责任人",
|
||||||
|
trigger: "change",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
estimatedWorkHours: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: "请填写预计工时",
|
||||||
|
trigger: "change",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
createTime: [
|
||||||
|
{ required: true, message: "请选择开始时间", trigger: "change" },
|
||||||
|
],
|
||||||
|
endTime: [
|
||||||
|
{ required: true, message: "请选择结束时间", trigger: "change" },
|
||||||
|
],
|
||||||
|
priority: [
|
||||||
|
{ required: true, message: "请选择优先级", trigger: "change" },
|
||||||
|
],
|
||||||
|
projectId: [
|
||||||
|
{ required: true, message: "请选择所属项目", trigger: "blur" },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
options: new Array(10).fill(0).map((ele, index) => ({
|
||||||
|
value: index + 1,
|
||||||
|
label: index + 1 + "天",
|
||||||
|
})),
|
||||||
|
};
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
version(newVal) {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.getDemandList();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
projectId(newVal) {
|
||||||
|
this.editData.projectId = newVal;
|
||||||
|
},
|
||||||
|
projectName(newVal) {
|
||||||
|
this.editData.projectName = newVal;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleSearch() {
|
||||||
|
// 实现搜索逻辑
|
||||||
|
this.getDemandList();
|
||||||
|
},
|
||||||
|
handleReset() {
|
||||||
|
this.filters = {
|
||||||
|
title: "",
|
||||||
|
responsiblePersonName: "",
|
||||||
|
responsiblePersonId: "",
|
||||||
|
demandStatus: "",
|
||||||
|
priority: "",
|
||||||
|
};
|
||||||
|
this.currentPage = 1;
|
||||||
|
this.pageSize = 10;
|
||||||
|
this.getDemandList();
|
||||||
|
},
|
||||||
|
handleAdd() {
|
||||||
|
// 实现新增逻辑
|
||||||
|
this.dialogVisibleAdd = true;
|
||||||
|
this.editData = {
|
||||||
|
id: "",
|
||||||
|
title: "",
|
||||||
|
versionId: "",
|
||||||
|
demandStatus: "",
|
||||||
|
responsiblePerson: "",
|
||||||
|
estimatedWorkHours: "",
|
||||||
|
createTime: "",
|
||||||
|
endTime: "",
|
||||||
|
priority: "",
|
||||||
|
projectId: "",
|
||||||
|
};
|
||||||
|
this.editData.projectId = this.projectId;
|
||||||
|
if (this.version.type == 0) {
|
||||||
|
this.editData.versionId = this.version.id;
|
||||||
|
}
|
||||||
|
this.editData.projectName = this.projectName;
|
||||||
|
},
|
||||||
|
handleEdit(row) {
|
||||||
|
this.editData = row;
|
||||||
|
this.editData.projectId = this.projectId;
|
||||||
|
this.editData.projectName = this.projectName;
|
||||||
|
this.dialogVisibleAdd = true;
|
||||||
|
// 实现编辑逻辑
|
||||||
|
},
|
||||||
|
handleDelete(row) {
|
||||||
|
// 实现删除逻辑
|
||||||
|
this.$confirm("此操作将永久删除该版本号, 是否继续?", "提示", {
|
||||||
|
confirmButtonText: "确定",
|
||||||
|
cancelButtonText: "取消",
|
||||||
|
type: "warning",
|
||||||
|
})
|
||||||
|
.then(() => {
|
||||||
|
demandApi.delDemand(row.id).then((res) => {
|
||||||
|
this.$message({
|
||||||
|
type: "success",
|
||||||
|
message: "删除成功!",
|
||||||
|
});
|
||||||
|
this.getDemandList();
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.catch(() => {});
|
||||||
|
},
|
||||||
|
handleBatchDelete() {
|
||||||
|
if (!this.selectedRows.length) {
|
||||||
|
this.$message({
|
||||||
|
type: "warning",
|
||||||
|
message: "请选择数据!",
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// 实现批量删除逻辑
|
||||||
|
this.$confirm("此操作将永久删除该版本号, 是否继续?", "提示", {
|
||||||
|
confirmButtonText: "确定",
|
||||||
|
cancelButtonText: "取消",
|
||||||
|
type: "warning",
|
||||||
|
}).then(() => {
|
||||||
|
demandApi
|
||||||
|
.delDemandBatch(this.selectedRows.map((ele) => ele.id).join(","))
|
||||||
|
.then((res) => {
|
||||||
|
this.$message({
|
||||||
|
type: "success",
|
||||||
|
message: "删除成功!",
|
||||||
|
});
|
||||||
|
this.getDemandList();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
handleSelectionChange(selection) {
|
||||||
|
this.selectedRows = selection;
|
||||||
|
},
|
||||||
|
handlePageChange(page) {
|
||||||
|
this.currentPage = page;
|
||||||
|
// 实现页码改变逻辑
|
||||||
|
},
|
||||||
|
getStatusClass(status) {
|
||||||
|
const classMap = {
|
||||||
|
0: "wait",
|
||||||
|
1: "pending",
|
||||||
|
2: "in-progress",
|
||||||
|
3: "completed",
|
||||||
|
4: "closed",
|
||||||
|
};
|
||||||
|
return classMap[status];
|
||||||
|
},
|
||||||
|
getDemandList() {
|
||||||
|
let param = {
|
||||||
|
...this.filters,
|
||||||
|
pageSize: this.pageSize,
|
||||||
|
pageNum: this.currentPage,
|
||||||
|
};
|
||||||
|
if (this.version.type == 0) {
|
||||||
|
param.versionId = this.version.id;
|
||||||
|
} else {
|
||||||
|
param.id = this.version.id;
|
||||||
|
}
|
||||||
|
demandApi.getDemandList(param).then((res) => {
|
||||||
|
this.tableData = res.rows;
|
||||||
|
this.total = res.total;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
openUser(type, data) {
|
||||||
|
this.selectType = type;
|
||||||
|
if (type == "search") {
|
||||||
|
this.currentSelectedUser = [
|
||||||
|
{ userId: this.filters.responsiblePersonId },
|
||||||
|
];
|
||||||
|
} else if (type == "change") {
|
||||||
|
this.checkedRow = data;
|
||||||
|
this.currentSelectedUser = [{ userId: data.responsiblePerson }];
|
||||||
|
} else if (type == "add") {
|
||||||
|
this.currentSelectedUser = [
|
||||||
|
{ userId: this.editData.responsiblePerson },
|
||||||
|
];
|
||||||
|
}
|
||||||
|
this.userSelectDialogVisible = true;
|
||||||
|
},
|
||||||
|
handleUserConfirm(data) {
|
||||||
|
if (this.selectType == "search") {
|
||||||
|
this.filters.responsiblePersonName = data[0].nickName;
|
||||||
|
this.filters.responsiblePersonId = data[0].userId;
|
||||||
|
} else if (this.selectType == "change") {
|
||||||
|
this.checkedRow.responsiblePerson = data[0].userId;
|
||||||
|
this.checkedRow.responsiblePersonName = data[0].nickName;
|
||||||
|
this.eidtDemand();
|
||||||
|
} else if (this.selectType == "add") {
|
||||||
|
this.editData.responsiblePersonName = data[0].nickName;
|
||||||
|
this.editData.responsiblePerson = data[0].userId;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleUserClose() {
|
||||||
|
this.userSelectDialogVisible = false;
|
||||||
|
},
|
||||||
|
eidtDemandRow() {
|
||||||
|
demandApi.eidtDemand(this.checkedRow).then((res) => {
|
||||||
|
this.$message({
|
||||||
|
message: "修改成功",
|
||||||
|
type: "success",
|
||||||
|
});
|
||||||
|
this.getDemandList();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
async getDictData() {
|
||||||
|
const res1 = await systemApi.getDictData("demand_status");
|
||||||
|
const res2 = await systemApi.getDictData("demand_priority");
|
||||||
|
this.statusList = res1.data;
|
||||||
|
this.priorityList = res2.data;
|
||||||
|
},
|
||||||
|
confirmAddDemand() {
|
||||||
|
this.$refs.ruleForm.validate((valid) => {
|
||||||
|
if (valid) {
|
||||||
|
if (
|
||||||
|
this.editData.estimatedWorkHours.replace("天", "") !=
|
||||||
|
parseFloat(this.editData.estimatedWorkHours)
|
||||||
|
) {
|
||||||
|
this.$message({
|
||||||
|
message: "预计工时为数字",
|
||||||
|
type: "warning",
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (
|
||||||
|
(this.editData.estimatedWorkHours * 10) % 5 != 0 ||
|
||||||
|
this.editData.estimatedWorkHours < 0.5
|
||||||
|
) {
|
||||||
|
this.$message({
|
||||||
|
message: "预计工时最小间隔为0.5天",
|
||||||
|
type: "warning",
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.editData.id) {
|
||||||
|
demandApi.eidtDemand(this.editData).then((res) => {
|
||||||
|
this.$message({
|
||||||
|
message: "操作成功",
|
||||||
|
type: "success",
|
||||||
|
});
|
||||||
|
this.resetList();
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
demandApi.addDemand(this.editData).then((res) => {
|
||||||
|
this.$message({
|
||||||
|
message: "操作成功",
|
||||||
|
type: "success",
|
||||||
|
});
|
||||||
|
this.resetList();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
resetList() {
|
||||||
|
let refreshId = "";
|
||||||
|
if (this.editData.versionId) {
|
||||||
|
refreshId = this.versionList.find(
|
||||||
|
(ele) => this.editData.versionId == ele.id
|
||||||
|
).nodeId;
|
||||||
|
} else {
|
||||||
|
refreshId = "-1";
|
||||||
|
}
|
||||||
|
this.$emit("refreshTree", refreshId);
|
||||||
|
this.dialogVisibleAdd = false;
|
||||||
|
},
|
||||||
|
changeRow(value, label, row) {
|
||||||
|
row[label] = value;
|
||||||
|
this.checkedRow = row;
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.eidtDemandRow(row);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
changeTime(val) {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
let day = (this.editData.estimatedWorkHours + "").replace("天", "");
|
||||||
|
if (day != parseFloat(day)&&day) {
|
||||||
|
this.$message({
|
||||||
|
message: "预计工时为数字",
|
||||||
|
type: "warning",
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (this.editData.estimatedWorkHours && this.editData.createTime) {
|
||||||
|
if (day > 1) {
|
||||||
|
this.editData.endTime = this.moment(
|
||||||
|
new Date(this.editData.createTime).getTime()
|
||||||
|
)
|
||||||
|
.add(Math.ceil(day - 1), "days")
|
||||||
|
.format("YYYY-MM-DD 23:59:59");
|
||||||
|
} else {
|
||||||
|
this.editData.endTime = this.moment(
|
||||||
|
new Date(this.editData.createTime).getTime()
|
||||||
|
).format("YYYY-MM-DD 23:59:59");
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log(this.editData.endTime);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.getDictData();
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.container {
|
||||||
|
padding: 0 20px 20px;
|
||||||
|
background-color: #ffffff;
|
||||||
|
min-width: 1200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-filters {
|
||||||
|
display: flex;
|
||||||
|
gap: 20px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
align-items: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-input,
|
||||||
|
.filter-select {
|
||||||
|
width: 240px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-buttons {
|
||||||
|
display: flex;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-operations {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
display: flex;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .status-tag {
|
||||||
|
.el-radio__label {
|
||||||
|
padding-left: 5px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
::v-deep .status-tag .el-radio__inner {
|
||||||
|
height: 18px !important;
|
||||||
|
width: 18px !important;
|
||||||
|
line-height: 18px;
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 1px;
|
||||||
|
background: #fff !important;
|
||||||
|
&::after {
|
||||||
|
height: 10px;
|
||||||
|
width: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
::v-deep .status-tag.pending .el-radio__inner {
|
||||||
|
border-color: #ff7d00;
|
||||||
|
&::after {
|
||||||
|
background-color: #ff7d00 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
::v-deep .status-tag.in-progress .el-radio__inner {
|
||||||
|
border-color: #4096ff !important;
|
||||||
|
&::after {
|
||||||
|
background-color: #4096ff !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
::v-deep .status-tag.completed .el-radio__inner {
|
||||||
|
border-color: #50b6aa !important;
|
||||||
|
&::after {
|
||||||
|
background-color: #50b6aa !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
::v-deep .status-tag.closed .el-radio__inner,
|
||||||
|
::v-deep .status-tag.wait .el-radio__inner {
|
||||||
|
border-color: #999999 !important;
|
||||||
|
&::after {
|
||||||
|
background-color: #999999 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
::v-deep .status-tag.pending .el-radio__label {
|
||||||
|
color: #ff7d00 !important;
|
||||||
|
// background-color: #fff7e6;
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .status-tag.in-progress .el-radio__label {
|
||||||
|
color: #4096ff !important;
|
||||||
|
// background-color: #e6f4ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .status-tag.completed .el-radio__label {
|
||||||
|
color: #50b6aa !important;
|
||||||
|
// background-color: #e6f7f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .status-tag.closed .el-radio__label,
|
||||||
|
::v-deep .status-tag.wait .el-radio__label {
|
||||||
|
color: #999999 !important;
|
||||||
|
// background-color: #f5f5f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination {
|
||||||
|
margin-top: 20px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.total {
|
||||||
|
color: #666666;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .el-button {
|
||||||
|
border-radius: 4px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .el-table {
|
||||||
|
border: 1px solid #eeeeee;
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .el-table th {
|
||||||
|
background-color: #fafafa !important;
|
||||||
|
color: #666666;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .el-table td {
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .el-input__prefix {
|
||||||
|
color: #999999;
|
||||||
|
line-height: 35px;
|
||||||
|
padding-left: 10px !important;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
.search-filters ::v-deep .el-input__inner {
|
||||||
|
padding-left: 80px !important;
|
||||||
|
::placeholder {
|
||||||
|
color: #bbb;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
::v-deep .el-button--primary {
|
||||||
|
background-color: #4096ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .el-pagination .el-pager li.is-active {
|
||||||
|
border-color: #4096ff;
|
||||||
|
background-color: #4096ff;
|
||||||
|
}
|
||||||
|
::v-deep .addForm {
|
||||||
|
.el-input__inner {
|
||||||
|
// width: 100%;
|
||||||
|
width: 240px;
|
||||||
|
}
|
||||||
|
.el-form-item {
|
||||||
|
width: 48%;
|
||||||
|
}
|
||||||
|
.el-input--prefix .el-input__inner {
|
||||||
|
padding-left: 40px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
::v-deep .longItem {
|
||||||
|
width: 100% !important;
|
||||||
|
.el-form-item__content {
|
||||||
|
width: 82.2%;
|
||||||
|
.el-input__inner {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.tableSelect1 {
|
||||||
|
width: 150px;
|
||||||
|
text-align: left !important;
|
||||||
|
}
|
||||||
|
.tableSelect2 {
|
||||||
|
width: 100px;
|
||||||
|
text-align: left !important;
|
||||||
|
}
|
||||||
|
.selectedItem1 {
|
||||||
|
&::after {
|
||||||
|
content: "√";
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
position: absolute;
|
||||||
|
right: 10px;
|
||||||
|
color: #4096ff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.selectedItem2 {
|
||||||
|
color: #4096ff;
|
||||||
|
position: relative;
|
||||||
|
&::after {
|
||||||
|
content: "√";
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
position: absolute;
|
||||||
|
right: 10px;
|
||||||
|
color: #4096ff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.tableBox {
|
||||||
|
.el-radio {
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.topTitle {
|
||||||
|
padding: 0 20px 20px;
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,415 @@
|
||||||
|
<template>
|
||||||
|
<div
|
||||||
|
class="sidebarTree"
|
||||||
|
:class="{
|
||||||
|
hidenLeft: !showFlag,
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<i
|
||||||
|
class="el-icon-arrow-right"
|
||||||
|
style="font-size: 24px; margin-top: 20px; cursor: pointer"
|
||||||
|
v-show="!showFlag"
|
||||||
|
@click.stop="changeShow()"
|
||||||
|
></i>
|
||||||
|
|
||||||
|
<!-- 树形菜单 -->
|
||||||
|
<div class="treeTitle">版本列表</div>
|
||||||
|
<div class="topBox" v-show="showFlag">
|
||||||
|
<div class="topText" @click.stop="changeOpen">
|
||||||
|
<i v-show="openFlag" class="el-icon-caret-bottom"></i>
|
||||||
|
<i v-show="!openFlag" class="el-icon-caret-right"></i>
|
||||||
|
<img src="@/assets/demand/list.png" />
|
||||||
|
<span>全部版本</span>
|
||||||
|
</div>
|
||||||
|
<div class="topBtn">
|
||||||
|
<i
|
||||||
|
class="el-icon-plus"
|
||||||
|
@click.stop="dialogVisible = true"
|
||||||
|
style="font-size: 20px"
|
||||||
|
></i>
|
||||||
|
<i
|
||||||
|
class="el-icon-arrow-left"
|
||||||
|
style="font-size: 20px"
|
||||||
|
@click.stop="changeShow()"
|
||||||
|
></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<el-tree
|
||||||
|
v-show="showFlag"
|
||||||
|
:data="treeData"
|
||||||
|
:props="defaultProps"
|
||||||
|
:default-expanded-keys="defaultExpend"
|
||||||
|
node-key="nodeId"
|
||||||
|
class="tree"
|
||||||
|
ref="treeRef"
|
||||||
|
@node-click="handleNodeClick"
|
||||||
|
:expand-on-click-node="false"
|
||||||
|
>
|
||||||
|
<template #default="{ node, data }">
|
||||||
|
<div
|
||||||
|
class="treeNode"
|
||||||
|
@mousemove="data.hover = true"
|
||||||
|
@mouseout="data.hover = false"
|
||||||
|
>
|
||||||
|
<!-- 展开/收起图标 -->
|
||||||
|
|
||||||
|
<!-- 节点图标 -->
|
||||||
|
<img
|
||||||
|
v-if="
|
||||||
|
(data.nodeId === selectedId ? 'selected' : '') && data.type == 0
|
||||||
|
"
|
||||||
|
src="@/assets/demand/treeIcon.png"
|
||||||
|
class="nodeIcon"
|
||||||
|
/>
|
||||||
|
<img
|
||||||
|
v-if="
|
||||||
|
(data.nodeId !== selectedId ? 'selected' : '') &&
|
||||||
|
data.id != 0 &&
|
||||||
|
data.type == 0
|
||||||
|
"
|
||||||
|
src="@/assets/demand/treeIcon1.png"
|
||||||
|
class="nodeIcon"
|
||||||
|
/>
|
||||||
|
<!-- 节点文本 -->
|
||||||
|
<span
|
||||||
|
:class="['nodeLabel', data.nodeId === selectedId ? 'selected' : '']"
|
||||||
|
>
|
||||||
|
{{ data.title }}
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<!-- 右侧数字标记 -->
|
||||||
|
<span
|
||||||
|
v-if="data.type == 0 && !data.hover"
|
||||||
|
:class="[
|
||||||
|
'count',
|
||||||
|
data.nodeId === selectedId ? 'selectedCount' : '',
|
||||||
|
]"
|
||||||
|
>
|
||||||
|
{{ data.childrenList.length }}
|
||||||
|
</span>
|
||||||
|
<el-dropdown
|
||||||
|
v-show="data.type == 0 && data.hover"
|
||||||
|
trigger="click"
|
||||||
|
placement="bottom"
|
||||||
|
@command="
|
||||||
|
(val) => {
|
||||||
|
changeRow(val, data);
|
||||||
|
}
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<i class="el-icon-more" style="font-size: 20px;"></i>
|
||||||
|
<el-dropdown-menu slot="dropdown">
|
||||||
|
<el-dropdown-item command="add">新建需求</el-dropdown-item>
|
||||||
|
<el-dropdown-item command="edit">编辑</el-dropdown-item>
|
||||||
|
<el-dropdown-item command="del" style="color: #dd242a"
|
||||||
|
>删除</el-dropdown-item
|
||||||
|
>
|
||||||
|
</el-dropdown-menu>
|
||||||
|
</el-dropdown>
|
||||||
|
<!-- 右侧操作图标 -->
|
||||||
|
<img
|
||||||
|
v-if="data.actionIcon"
|
||||||
|
:src="data.actionIcon"
|
||||||
|
class="actionIcon"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-tree>
|
||||||
|
<el-dialog title="添加版本号" :visible.sync="dialogVisible" width="30%">
|
||||||
|
<el-form>
|
||||||
|
<el-form-item label="版本号">
|
||||||
|
<el-input v-model="demandData.name"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<div slot="footer" class="dialog-footer">
|
||||||
|
<el-button @click="dialogVisible = false">取消</el-button>
|
||||||
|
<el-button type="primary" @click="confirmAddNode">确定</el-button>
|
||||||
|
</div>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { demandApi } from "@/utils/api";
|
||||||
|
export default {
|
||||||
|
name: "SidebarTree",
|
||||||
|
props: {
|
||||||
|
projectId: {
|
||||||
|
type: String,
|
||||||
|
default: "",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
selectedId: "",
|
||||||
|
treeData: [],
|
||||||
|
defaultProps: {
|
||||||
|
children: "childrenList",
|
||||||
|
label: "title",
|
||||||
|
},
|
||||||
|
dialogVisible: false,
|
||||||
|
demandData: {
|
||||||
|
name: "",
|
||||||
|
},
|
||||||
|
openFlag: false,
|
||||||
|
showFlag: true,
|
||||||
|
defaultExpend: [],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
handleNodeClick(data) {
|
||||||
|
this.selectedId = data.nodeId;
|
||||||
|
this.changeVersion(data);
|
||||||
|
},
|
||||||
|
getVersionTree(defaultId) {
|
||||||
|
demandApi
|
||||||
|
.getVersionTree({
|
||||||
|
projectId: this.projectId,
|
||||||
|
demandStatusList: [],
|
||||||
|
})
|
||||||
|
.then((res) => {
|
||||||
|
if (!res.data.length) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
res.data = res.data.map((ele) => {
|
||||||
|
ele.nodeId = ele.id + "_" + ele.type;
|
||||||
|
ele.hover = false;
|
||||||
|
return ele;
|
||||||
|
});
|
||||||
|
if (defaultId && defaultId != "all") {
|
||||||
|
if (defaultId == -1) {
|
||||||
|
this.defaultExpend = res.data[res.data.length - 1].nodeId;
|
||||||
|
} else {
|
||||||
|
this.defaultExpend = [defaultId];
|
||||||
|
}
|
||||||
|
this.selectedId = this.defaultExpend[0];
|
||||||
|
this.changeVersion(res.data.find((ele) => ele.nodeId == defaultId));
|
||||||
|
} else if (defaultId == "all") {
|
||||||
|
} else {
|
||||||
|
this.defaultExpend = [res.data[0].nodeId];
|
||||||
|
this.selectedId = this.defaultExpend[0];
|
||||||
|
this.setVersionList(res.data.filter((ele) => ele.type == 0));
|
||||||
|
this.changeVersion(
|
||||||
|
res.data.find((ele) => ele.nodeId == this.defaultExpend[0])
|
||||||
|
);
|
||||||
|
}
|
||||||
|
this.treeData = res.data;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
changeVersion(data) {
|
||||||
|
this.$emit("changeVersion", data);
|
||||||
|
},
|
||||||
|
setVersionList(data) {
|
||||||
|
this.$emit("setVersionList", data);
|
||||||
|
},
|
||||||
|
confirmAddNode() {
|
||||||
|
if (!this.demandData.name) {
|
||||||
|
this.$message({
|
||||||
|
message: "请填写版本号",
|
||||||
|
type: "warning",
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
let param = {
|
||||||
|
projectId: this.projectId,
|
||||||
|
versionNumber: this.demandData.name,
|
||||||
|
};
|
||||||
|
if (this.demandData.id) {
|
||||||
|
param.id = this.demandData.id;
|
||||||
|
demandApi.editVersion(param).then((res) => {
|
||||||
|
this.resetAdd(0);
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
demandApi.addVersion(param).then((res) => {
|
||||||
|
this.resetAdd(1);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
resetAdd(add) {
|
||||||
|
this.$message({
|
||||||
|
message: add ? "添加成功" : "修改成功",
|
||||||
|
type: "success",
|
||||||
|
});
|
||||||
|
this.dialogVisible = false;
|
||||||
|
this.demandData.name = "";
|
||||||
|
this.demandData.id = "";
|
||||||
|
this.getVersionTree();
|
||||||
|
},
|
||||||
|
editDemand(data) {
|
||||||
|
this.demandData = {
|
||||||
|
name: data.title,
|
||||||
|
id: data.id,
|
||||||
|
};
|
||||||
|
this.dialogVisible = true;
|
||||||
|
},
|
||||||
|
delVersion(data) {
|
||||||
|
this.$confirm("此操作将永久删除该版本号, 是否继续?", "提示", {
|
||||||
|
confirmButtonText: "确定",
|
||||||
|
cancelButtonText: "取消",
|
||||||
|
type: "warning",
|
||||||
|
})
|
||||||
|
.then(() => {
|
||||||
|
demandApi.delVersion(data.id).then((res) => {
|
||||||
|
this.$message({
|
||||||
|
type: "success",
|
||||||
|
message: "删除成功!",
|
||||||
|
});
|
||||||
|
this.getVersionTree();
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.catch(() => {});
|
||||||
|
},
|
||||||
|
changeOpen() {
|
||||||
|
this.openFlag = !this.openFlag;
|
||||||
|
if (this.openFlag) {
|
||||||
|
this.defaultExpend = this.treeData.map((ele) => ele.nodeId);
|
||||||
|
} else {
|
||||||
|
this.defaultExpend = [];
|
||||||
|
}
|
||||||
|
this.getVersionTree("all");
|
||||||
|
},
|
||||||
|
changeShow() {
|
||||||
|
this.showFlag = !this.showFlag;
|
||||||
|
},
|
||||||
|
changeRow(type, row) {
|
||||||
|
if (type == "add") {
|
||||||
|
this.$emit("addDemand");
|
||||||
|
} else if (type == "edit") {
|
||||||
|
this.editDemand(row);
|
||||||
|
} else if (type == "del") {
|
||||||
|
this.delVersion(row);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
projectId(newVal) {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.getVersionTree();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.sidebarTree {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 300px;
|
||||||
|
min-height: 100vh;
|
||||||
|
background-color: inherit;
|
||||||
|
padding-left: 20px;
|
||||||
|
}
|
||||||
|
.hidenLeft {
|
||||||
|
width: 40px;
|
||||||
|
}
|
||||||
|
.tree {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.treeNode {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
height: 48px;
|
||||||
|
padding: 0 20px;
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
::v-deep .el-tree-node__children {
|
||||||
|
padding-left: 15px !important;
|
||||||
|
}
|
||||||
|
.expandIcon {
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
margin-right: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nodeIcon {
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
margin-right: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nodeLabel {
|
||||||
|
flex: 1;
|
||||||
|
font-family: "PingFang SC";
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
line-height: 36px;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.selected {
|
||||||
|
color: #4096ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.count {
|
||||||
|
font-family: "PingFang SC";
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
line-height: 26px;
|
||||||
|
color: #999;
|
||||||
|
margin-right: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.selectedCount {
|
||||||
|
color: #4096ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.actionIcon {
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
}
|
||||||
|
.treeTitle {
|
||||||
|
padding: 20px;
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
/* 选中状态背景色 */
|
||||||
|
// .treeNode:has(.selected) {
|
||||||
|
// background-color: #f6faff;
|
||||||
|
// }
|
||||||
|
|
||||||
|
::v-deep .el-tree-node {
|
||||||
|
min-height: 42px;
|
||||||
|
.el-tree-node__content {
|
||||||
|
height: 42px;
|
||||||
|
}
|
||||||
|
.el-tree-node__expand-icon{
|
||||||
|
font-size: 16px;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.topBox {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
.topText {
|
||||||
|
gap: 15px;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
display: flex;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.topBtn {
|
||||||
|
display: flex;
|
||||||
|
gap: 10px;
|
||||||
|
i {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// /* <EFBFBD><EFBFBD>浮效果 */
|
||||||
|
// .treeNode:hover {
|
||||||
|
// background-color: #f5f5f5;
|
||||||
|
// }
|
||||||
|
</style>
|
||||||
|
|
@ -1,337 +1,87 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="container">
|
<div class="layout">
|
||||||
<!-- 左侧区域 -->
|
<!-- 左侧树形菜单 -->
|
||||||
<transition name="slide">
|
<SidebarTree
|
||||||
<div class="left-panel" v-show="isTreeVisible">
|
:projectId="projectId"
|
||||||
<!-- 操作栏 -->
|
class="sidebar"
|
||||||
<div class="tree-controls">
|
@changeVersion="changeVersion"
|
||||||
<span>根节点数量: {{ rootNodeCount }}</span>
|
@setVersionList="setVersionList"
|
||||||
<div class="buttons">
|
@addDemand="addDemand"
|
||||||
<el-button size="mini" @click="addNode">添加</el-button>
|
ref="treeRef"
|
||||||
<el-button size="mini" @click="collapseAll">收起所有节点</el-button>
|
/>
|
||||||
<el-button size="mini" @click="toggleTreeVisibility">
|
<!-- 右侧表格和筛选 -->
|
||||||
{{ isTreeVisible ? "隐藏树形" : "显示树形" }}
|
<MainContentTable
|
||||||
</el-button>
|
:projectId="projectId"
|
||||||
</div>
|
class="main-content"
|
||||||
</div>
|
:version="version"
|
||||||
|
:projectName="projectName"
|
||||||
<!-- 树形表格 -->
|
@refreshTree="refreshTree"
|
||||||
<div class="tree-view">
|
:versionList="versionList"
|
||||||
<el-table
|
ref="rightRef"
|
||||||
:data="treeData"
|
/>
|
||||||
row-key="id"
|
|
||||||
border
|
|
||||||
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
|
|
||||||
ref="treeTable"
|
|
||||||
>
|
|
||||||
<el-table-column
|
|
||||||
prop="name"
|
|
||||||
label="需求名称"
|
|
||||||
></el-table-column>
|
|
||||||
</el-table>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</transition>
|
|
||||||
|
|
||||||
<!-- 右侧表格 -->
|
|
||||||
<div
|
|
||||||
class="right-panel"
|
|
||||||
:style="{ flex: isTreeVisible ? '1' : '0 0 100%' }"
|
|
||||||
>
|
|
||||||
<el-button
|
|
||||||
v-show="!isTreeVisible"
|
|
||||||
size="mini"
|
|
||||||
@click="toggleTreeVisibility"
|
|
||||||
>
|
|
||||||
显示树形
|
|
||||||
</el-button>
|
|
||||||
<el-table :data="tableData" border>
|
|
||||||
<el-table-column type="selection" width="55"></el-table-column>
|
|
||||||
<el-table-column
|
|
||||||
prop="version"
|
|
||||||
label="版本号"
|
|
||||||
|
|
||||||
></el-table-column>
|
|
||||||
<el-table-column
|
|
||||||
prop="status"
|
|
||||||
label="需求状态"
|
|
||||||
|
|
||||||
></el-table-column>
|
|
||||||
<el-table-column
|
|
||||||
prop="owner"
|
|
||||||
label="负责人"
|
|
||||||
|
|
||||||
></el-table-column>
|
|
||||||
<el-table-column
|
|
||||||
prop="estimatedTime"
|
|
||||||
label="预计工时"
|
|
||||||
|
|
||||||
></el-table-column>
|
|
||||||
<el-table-column
|
|
||||||
prop="creationTime"
|
|
||||||
label="创建时间"
|
|
||||||
|
|
||||||
></el-table-column>
|
|
||||||
<el-table-column
|
|
||||||
prop="endTime"
|
|
||||||
label="结束时间"
|
|
||||||
|
|
||||||
></el-table-column>
|
|
||||||
<el-table-column
|
|
||||||
prop="priority"
|
|
||||||
label="优先级"
|
|
||||||
|
|
||||||
></el-table-column>
|
|
||||||
<el-table-column label="操作" width="150">
|
|
||||||
<template slot-scope="scope">
|
|
||||||
<el-button size="mini" @click="handleEdit(scope.row)"
|
|
||||||
>编辑</el-button
|
|
||||||
>
|
|
||||||
<el-button
|
|
||||||
size="mini"
|
|
||||||
type="danger"
|
|
||||||
@click="handleDelete(scope.row)"
|
|
||||||
>删除</el-button
|
|
||||||
>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 添加节点弹框 -->
|
|
||||||
<el-dialog title="添加节点" :visible.sync="dialogVisible">
|
|
||||||
<el-form :model="newNode">
|
|
||||||
<el-form-item label="节点名称">
|
|
||||||
<el-input v-model="newNode.name"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="状态">
|
|
||||||
<el-input v-model="newNode.status"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
<div slot="footer" class="dialog-footer">
|
|
||||||
<el-button @click="dialogVisible = false">取消</el-button>
|
|
||||||
<el-button type="primary" @click="confirmAddNode">确定</el-button>
|
|
||||||
</div>
|
|
||||||
</el-dialog>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { demandApi } from "@/utils/api";
|
// 导入子组件
|
||||||
|
import SidebarTree from "./components/SidebarTree.vue";
|
||||||
|
import MainContentTable from "./components/MainContentTable.vue";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
|
name: "demandManage",
|
||||||
|
components: {
|
||||||
|
SidebarTree,
|
||||||
|
MainContentTable,
|
||||||
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
// 树形表格数据
|
projectId: "",
|
||||||
treeData: [
|
projectName: "",
|
||||||
{
|
versionList: [],
|
||||||
id: 1,
|
version: {},
|
||||||
name: "产品需求1.0",
|
|
||||||
status: "进行中",
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
id: 11,
|
|
||||||
name: "用户模块",
|
|
||||||
status: "已完成",
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
id: 111,
|
|
||||||
name: "登录功能",
|
|
||||||
status: "已完成",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 112,
|
|
||||||
name: "注册功能",
|
|
||||||
status: "已完成",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 12,
|
|
||||||
name: "订单模块",
|
|
||||||
status: "进行中",
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
id: 121,
|
|
||||||
name: "购物车",
|
|
||||||
status: "进行中",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 122,
|
|
||||||
name: "支付功能",
|
|
||||||
status: "待开始",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 2,
|
|
||||||
name: "产品需求2.0",
|
|
||||||
status: "待开始",
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
id: 21,
|
|
||||||
name: "数据分析模块",
|
|
||||||
status: "待开始",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 22,
|
|
||||||
name: "报表模块",
|
|
||||||
status: "待开始",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
|
|
||||||
// 右侧表格数据
|
|
||||||
tableData: [
|
|
||||||
{
|
|
||||||
version: "v1.0.0",
|
|
||||||
status: "进行中",
|
|
||||||
owner: "张三",
|
|
||||||
estimatedTime: "40h",
|
|
||||||
creationTime: "2024-01-01",
|
|
||||||
endTime: "2024-01-15",
|
|
||||||
priority: "高",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
version: "v1.0.1",
|
|
||||||
status: "已完成",
|
|
||||||
owner: "李四",
|
|
||||||
estimatedTime: "20h",
|
|
||||||
creationTime: "2024-01-16",
|
|
||||||
endTime: "2024-01-25",
|
|
||||||
priority: "中",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
version: "v1.1.0",
|
|
||||||
status: "待开始",
|
|
||||||
owner: "王五",
|
|
||||||
estimatedTime: "60h",
|
|
||||||
creationTime: "2024-02-01",
|
|
||||||
endTime: "2024-02-28",
|
|
||||||
priority: "高",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
version: "v1.2.0",
|
|
||||||
status: "规划中",
|
|
||||||
owner: "赵六",
|
|
||||||
estimatedTime: "80h",
|
|
||||||
creationTime: "2024-03-01",
|
|
||||||
endTime: "2024-03-31",
|
|
||||||
priority: "低",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
dialogVisible: false,
|
|
||||||
newNode: {
|
|
||||||
name: "",
|
|
||||||
status: "",
|
|
||||||
},
|
|
||||||
isTreeVisible: true,
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
computed: {
|
|
||||||
rootNodeCount() {
|
|
||||||
return this.treeData.length;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
isTreeVisible(newVal) {
|
|
||||||
this.$refs.treeTable.doLayout();
|
|
||||||
},
|
|
||||||
},
|
|
||||||
methods: {
|
methods: {
|
||||||
addNode() {
|
changeVersion(data) {
|
||||||
this.dialogVisible = true;
|
this.version = data;
|
||||||
},
|
},
|
||||||
confirmAddNode() {
|
setVersionList(data) {
|
||||||
if (this.newNode.name && this.newNode.status) {
|
this.versionList = data;
|
||||||
this.treeData.push({
|
|
||||||
id: Date.now(),
|
|
||||||
name: this.newNode.name,
|
|
||||||
status: this.newNode.status,
|
|
||||||
children: [],
|
|
||||||
});
|
|
||||||
this.dialogVisible = false;
|
|
||||||
this.newNode.name = "";
|
|
||||||
this.newNode.status = "";
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
collapseAll() {
|
refreshTree(defaultId) {
|
||||||
this.treeData.forEach((node) => {
|
this.$refs.treeRef.getVersionTree(defaultId);
|
||||||
this.$refs.treeTable.toggleRowExpansion(node,false);
|
|
||||||
});
|
|
||||||
},
|
},
|
||||||
toggleTreeVisibility() {
|
addDemand() {
|
||||||
this.isTreeVisible = !this.isTreeVisible;
|
console.log(566);
|
||||||
|
|
||||||
|
this.$refs.rightRef.handleAdd();
|
||||||
},
|
},
|
||||||
handleEdit(row) {
|
|
||||||
console.log("编辑行:", row);
|
|
||||||
},
|
|
||||||
handleDelete(row) {
|
|
||||||
console.log("删除行:", row);
|
|
||||||
},
|
|
||||||
getDemandTree(){
|
|
||||||
demandApi.getDemandTree({
|
|
||||||
projectId:this.projectId,
|
|
||||||
demandStatusList:[]
|
|
||||||
})
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
mounted(){
|
mounted() {
|
||||||
this.projectId=this.$route.query.id
|
this.projectId = this.$route.query.id;
|
||||||
this.getDemandTree()
|
this.projectName = this.$route.query.projectName;
|
||||||
}
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped lang="scss">
|
||||||
.container {
|
.layout {
|
||||||
display: flex;
|
display: flex;
|
||||||
height: 100vh;
|
width: 100%;
|
||||||
|
min-height: 100vh;
|
||||||
|
background-color: #f5f7fa;
|
||||||
}
|
}
|
||||||
|
|
||||||
.left-panel {
|
.sidebar {
|
||||||
width: 20%;
|
flex-grow: 1;
|
||||||
display: flex;
|
max-width: 300px;
|
||||||
flex-direction: column;
|
height: 100%;
|
||||||
padding: 10px;
|
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
transition: width 0.3s ease;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.tree-controls {
|
.main-content {
|
||||||
display: flex;
|
flex-grow: 3;
|
||||||
justify-content: space-between;
|
background-color: #ffffff;
|
||||||
align-items: center;
|
padding: 20px;
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.buttons {
|
|
||||||
display: flex;
|
|
||||||
gap: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tree-view {
|
|
||||||
flex: 1;
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.right-panel {
|
|
||||||
flex: 1;
|
|
||||||
transition: width 0.3s ease;
|
|
||||||
padding: 10px;
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.slide-enter-active,
|
|
||||||
.slide-leave-active {
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.slide-enter, .slide-leave-to /* .slide-leave-active in <2.1.8 */ {
|
|
||||||
width: 0;
|
|
||||||
opacity: 0;
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -204,7 +204,7 @@ export default {
|
||||||
handleDemand(row){
|
handleDemand(row){
|
||||||
this.$router.push({
|
this.$router.push({
|
||||||
path: "/demandManage",
|
path: "/demandManage",
|
||||||
query: { id: row.projectId },
|
query: { id: row.projectId,projectName:row.projectName },
|
||||||
});
|
});
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,126 @@
|
||||||
|
<template>
|
||||||
|
<div class="leftBox">
|
||||||
|
<div class="topBox">
|
||||||
|
<el-date-picker
|
||||||
|
v-model="selectedDate"
|
||||||
|
type="month"
|
||||||
|
format="yyyy年MM月"
|
||||||
|
:clearable="false"
|
||||||
|
style="margin-bottom: 10px; width: 150px"
|
||||||
|
@change="changeMonth"
|
||||||
|
prefix-icon="false"
|
||||||
|
/>
|
||||||
|
<div>
|
||||||
|
<i
|
||||||
|
class="el-icon-arrow-left"
|
||||||
|
style="font-size: 18px; font-weight: bold"
|
||||||
|
@click="preMonth"
|
||||||
|
></i>
|
||||||
|
<i
|
||||||
|
class="el-icon-arrow-right"
|
||||||
|
style="font-size: 18px; font-weight: bold"
|
||||||
|
@click="nextMonth"
|
||||||
|
></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<el-calendar v-model="selectedDate" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { workLogApi, projectApi } from "@/utils/api";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "LeftMonth",
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
selectedDate: this.moment(new Date()).format("YYYY-MM-DD"),
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
changeMonth() {},
|
||||||
|
preMonth() {
|
||||||
|
this.selectedDate = this.moment(this.selectedDate)
|
||||||
|
.subtract(1, "months")
|
||||||
|
.format("YYYY-MM-DD");
|
||||||
|
},
|
||||||
|
nextMonth() {
|
||||||
|
this.selectedDate = this.moment(this.selectedDate)
|
||||||
|
.add(1, "months")
|
||||||
|
.format("YYYY-MM-DD");
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.leftBox ::v-deep .el-calendar__header {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.leftBox ::v-deep .el-date-editor {
|
||||||
|
.el-input__inner {
|
||||||
|
border: none;
|
||||||
|
padding-left: 0;
|
||||||
|
font-size: 18px;
|
||||||
|
color: #333333;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.leftBox ::v-deep .el-calendar__body {
|
||||||
|
padding: 0 !important;
|
||||||
|
thead {
|
||||||
|
th {
|
||||||
|
font-family: PingFang SC;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #999999;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
tbody {
|
||||||
|
td {
|
||||||
|
border: none;
|
||||||
|
padding: 10px 0;
|
||||||
|
|
||||||
|
.el-calendar-day {
|
||||||
|
text-align: center;
|
||||||
|
padding: 0 !important;
|
||||||
|
font-size: 16px;
|
||||||
|
span {
|
||||||
|
font-family: cursive !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.next,
|
||||||
|
&.prev {
|
||||||
|
color: #333 !important;
|
||||||
|
}
|
||||||
|
&.is-selected .el-calendar-day {
|
||||||
|
border-radius: 50% !important;
|
||||||
|
background-color: #4096ff;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.el-calendar-day {
|
||||||
|
height: 40px;
|
||||||
|
width: 40px;
|
||||||
|
line-height: 40px;
|
||||||
|
|
||||||
|
border-radius: 50% !important;
|
||||||
|
&:hover {
|
||||||
|
background-color: #88bdfd;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.topBox {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
i {
|
||||||
|
margin-right: 10px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,237 @@
|
||||||
|
<template>
|
||||||
|
<div class="container">
|
||||||
|
<div class="topBox">
|
||||||
|
<div>
|
||||||
|
<div class="topTitle">当日日志</div>
|
||||||
|
<div class="topText">总计填报工时:<span>1</span>天</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<el-button type="primary" @click="handleAdd">
|
||||||
|
<el-icon class="el-icon-plus" />
|
||||||
|
添加日志
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 表格区域 -->
|
||||||
|
<el-table
|
||||||
|
:data="tableData"
|
||||||
|
style="width: 100%"
|
||||||
|
class="tableBox"
|
||||||
|
>
|
||||||
|
<el-table-column label="序号" width="70" prop="id" />
|
||||||
|
<el-table-column label="项目名称" prop="versionNumber">
|
||||||
|
<template #default="scope">
|
||||||
|
<div>
|
||||||
|
<el-dropdown
|
||||||
|
trigger="click"
|
||||||
|
placement="bottom"
|
||||||
|
@command="
|
||||||
|
(data) => {
|
||||||
|
changeRow(data, 'demandStatus', scope.row);
|
||||||
|
}
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<el-radio
|
||||||
|
v-model="scope.row.demandStatus"
|
||||||
|
:label="scope.row.demandStatus"
|
||||||
|
:class="['status-tag', getStatusClass(scope.row.demandStatus)]"
|
||||||
|
>
|
||||||
|
{{
|
||||||
|
statusList[scope.row.demandStatus]
|
||||||
|
? statusList[scope.row.demandStatus].dictLabel
|
||||||
|
: ""
|
||||||
|
}}</el-radio
|
||||||
|
>
|
||||||
|
<el-dropdown-menu slot="dropdown">
|
||||||
|
<el-dropdown-item
|
||||||
|
v-for="item in statusList"
|
||||||
|
:key="item.dictValue"
|
||||||
|
:command="item.dictValue"
|
||||||
|
:class="{
|
||||||
|
tableSelect1: true,
|
||||||
|
selectedItem1: item.dictValue == scope.row.demandStatus,
|
||||||
|
}"
|
||||||
|
><el-radio
|
||||||
|
v-model="scope.row.demandStatus"
|
||||||
|
:label="scope.row.demandStatus"
|
||||||
|
:class="['status-tag', getStatusClass(item.dictValue)]"
|
||||||
|
>
|
||||||
|
{{
|
||||||
|
statusList[item.dictValue]
|
||||||
|
? statusList[item.dictValue].dictLabel
|
||||||
|
: ""
|
||||||
|
}}</el-radio
|
||||||
|
></el-dropdown-item
|
||||||
|
>
|
||||||
|
</el-dropdown-menu>
|
||||||
|
</el-dropdown>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="版本" prop="title">
|
||||||
|
<template #default="scope">
|
||||||
|
<div>
|
||||||
|
<el-dropdown
|
||||||
|
trigger="click"
|
||||||
|
placement="bottom"
|
||||||
|
@command="
|
||||||
|
(data) => {
|
||||||
|
changeRow(data, 'demandStatus', scope.row);
|
||||||
|
}
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<el-radio
|
||||||
|
v-model="scope.row.demandStatus"
|
||||||
|
:label="scope.row.demandStatus"
|
||||||
|
:class="['status-tag', getStatusClass(scope.row.demandStatus)]"
|
||||||
|
>
|
||||||
|
{{
|
||||||
|
statusList[scope.row.demandStatus]
|
||||||
|
? statusList[scope.row.demandStatus].dictLabel
|
||||||
|
: ""
|
||||||
|
}}</el-radio
|
||||||
|
>
|
||||||
|
<el-dropdown-menu slot="dropdown">
|
||||||
|
<el-dropdown-item
|
||||||
|
v-for="item in statusList"
|
||||||
|
:key="item.dictValue"
|
||||||
|
:command="item.dictValue"
|
||||||
|
:class="{
|
||||||
|
tableSelect1: true,
|
||||||
|
selectedItem1: item.dictValue == scope.row.demandStatus,
|
||||||
|
}"
|
||||||
|
><el-radio
|
||||||
|
v-model="scope.row.demandStatus"
|
||||||
|
:label="scope.row.demandStatus"
|
||||||
|
:class="['status-tag', getStatusClass(item.dictValue)]"
|
||||||
|
>
|
||||||
|
{{
|
||||||
|
statusList[item.dictValue]
|
||||||
|
? statusList[item.dictValue].dictLabel
|
||||||
|
: ""
|
||||||
|
}}</el-radio
|
||||||
|
></el-dropdown-item
|
||||||
|
>
|
||||||
|
</el-dropdown-menu>
|
||||||
|
</el-dropdown>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="项目需求">
|
||||||
|
<template #default="scope">
|
||||||
|
<div>
|
||||||
|
<el-dropdown
|
||||||
|
trigger="click"
|
||||||
|
placement="bottom"
|
||||||
|
@command="
|
||||||
|
(data) => {
|
||||||
|
changeRow(data, 'demandStatus', scope.row);
|
||||||
|
}
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<el-radio
|
||||||
|
v-model="scope.row.demandStatus"
|
||||||
|
:label="scope.row.demandStatus"
|
||||||
|
:class="['status-tag', getStatusClass(scope.row.demandStatus)]"
|
||||||
|
>
|
||||||
|
{{
|
||||||
|
statusList[scope.row.demandStatus]
|
||||||
|
? statusList[scope.row.demandStatus].dictLabel
|
||||||
|
: ""
|
||||||
|
}}</el-radio
|
||||||
|
>
|
||||||
|
<el-dropdown-menu slot="dropdown">
|
||||||
|
<el-dropdown-item
|
||||||
|
v-for="item in statusList"
|
||||||
|
:key="item.dictValue"
|
||||||
|
:command="item.dictValue"
|
||||||
|
:class="{
|
||||||
|
tableSelect1: true,
|
||||||
|
selectedItem1: item.dictValue == scope.row.demandStatus,
|
||||||
|
}"
|
||||||
|
><el-radio
|
||||||
|
v-model="scope.row.demandStatus"
|
||||||
|
:label="scope.row.demandStatus"
|
||||||
|
:class="['status-tag', getStatusClass(item.dictValue)]"
|
||||||
|
>
|
||||||
|
{{
|
||||||
|
statusList[item.dictValue]
|
||||||
|
? statusList[item.dictValue].dictLabel
|
||||||
|
: ""
|
||||||
|
}}</el-radio
|
||||||
|
></el-dropdown-item
|
||||||
|
>
|
||||||
|
</el-dropdown-menu>
|
||||||
|
</el-dropdown>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="工作内容" prop="responsiblePersonName">
|
||||||
|
<template #default="scope">
|
||||||
|
<div @click="openUser('change', scope.row)" style="cursor: pointer">
|
||||||
|
{{ scope.row.responsiblePersonName }}
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
|
||||||
|
<el-table-column label="工时分配" prop="estimatedWorkHours" />
|
||||||
|
<el-table-column label="操作" width="120">
|
||||||
|
<template #default="scope">
|
||||||
|
<div>
|
||||||
|
<el-button type="text" @click="handleEdit(scope.row)">
|
||||||
|
编辑
|
||||||
|
</el-button>
|
||||||
|
<el-button
|
||||||
|
type="text"
|
||||||
|
@click="handleDelete(scope.row)"
|
||||||
|
style="color: #666"
|
||||||
|
>
|
||||||
|
删除
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "RightTable",
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
statusList: [],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.container {
|
||||||
|
padding: 20px;
|
||||||
|
background-color: #ffffff;
|
||||||
|
min-width: 1200px;
|
||||||
|
}
|
||||||
|
.topBox {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
.topTitle {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
.topText {
|
||||||
|
color: #999999;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 16px;
|
||||||
|
span {
|
||||||
|
margin: 0 5px;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,51 @@
|
||||||
|
<template>
|
||||||
|
<div class="layout">
|
||||||
|
<!-- 左侧树形菜单 -->
|
||||||
|
<LeftMonth class="sidebar" ref="leftRef" />
|
||||||
|
<!-- 右侧表格和筛选 -->
|
||||||
|
<RightTable class="main-content" ref="rightRef" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// 导入子组件
|
||||||
|
import LeftMonth from "./components/leftMonth.vue";
|
||||||
|
import RightTable from "./components/rightTable.vue";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "worklog",
|
||||||
|
components: {
|
||||||
|
LeftMonth,
|
||||||
|
RightTable,
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
methods: {},
|
||||||
|
mounted() {},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.layout {
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
min-height: 100vh;
|
||||||
|
background-color: #f5f7fa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar {
|
||||||
|
flex-grow: 1;
|
||||||
|
max-width: 360px;
|
||||||
|
width: 360px;
|
||||||
|
height: 100vh;
|
||||||
|
background-color: #fff;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-content {
|
||||||
|
flex-grow: 3;
|
||||||
|
background-color: #ffffff;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue