429 lines
10 KiB
Vue
429 lines
10 KiB
Vue
|
<template>
|
|||
|
|
<el-dialog
|
|||
|
|
:visible.sync="dialogVisible"
|
|||
|
|
title="导入历史项目"
|
|||
|
|
width="700px"
|
|||
|
|
:close-on-click-modal="false"
|
|||
|
|
@close="handleClose"
|
|||
|
|
>
|
|||
|
|
<!-- 搜索区 -->
|
|||
|
|
<div class="search-section">
|
|||
|
|
<el-input
|
|||
|
|
v-model="searchKeyword"
|
|||
|
|
placeholder="搜索历史项目名称"
|
|||
|
|
prefix-icon="el-icon-search"
|
|||
|
|
clearable
|
|||
|
|
size="small"
|
|||
|
|
style="width: 300px"
|
|||
|
|
>
|
|||
|
|
<el-button slot="append" icon="el-icon-search" @click="handleSearch" />
|
|||
|
|
</el-input>
|
|||
|
|
<el-date-picker
|
|||
|
|
v-model="dateRange"
|
|||
|
|
type="daterange"
|
|||
|
|
range-separator="至"
|
|||
|
|
start-placeholder="开始日期"
|
|||
|
|
end-placeholder="结束日期"
|
|||
|
|
size="small"
|
|||
|
|
style="width: 240px; margin-left: 12px"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 历史项目列表 -->
|
|||
|
|
<div class="project-list-section">
|
|||
|
|
<div class="section-title">历史项目列表</div>
|
|||
|
|
<el-radio-group v-model="selectedProjectId" class="project-radio-group">
|
|||
|
|
<div
|
|||
|
|
v-for="item in filteredProjects"
|
|||
|
|
:key="item.projectId"
|
|||
|
|
class="project-item-wrapper"
|
|||
|
|
>
|
|||
|
|
<el-radio :label="item.projectId" class="project-radio">
|
|||
|
|
<div class="project-item">
|
|||
|
|
<div class="project-header">
|
|||
|
|
<span class="name">{{ item.projectName }}</span>
|
|||
|
|
<el-tag
|
|||
|
|
:type="getStatusType(item.projectStatus)"
|
|||
|
|
size="mini"
|
|||
|
|
>{{ getStatusLabel(item.projectStatus) }}</el-tag>
|
|||
|
|
</div>
|
|||
|
|
<div class="project-info">
|
|||
|
|
<span class="info-item">
|
|||
|
|
<i class="el-icon-time"></i>
|
|||
|
|
创建时间: {{ item.createTime }}
|
|||
|
|
</span>
|
|||
|
|
<span class="info-item">
|
|||
|
|
<i class="el-icon-user"></i>
|
|||
|
|
目标人数: {{ item.targetCount }}
|
|||
|
|
</span>
|
|||
|
|
<span class="info-item warning">
|
|||
|
|
<i class="el-icon-warning"></i>
|
|||
|
|
预警人数: {{ item.warningCount }}
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</el-radio>
|
|||
|
|
</div>
|
|||
|
|
</el-radio-group>
|
|||
|
|
|
|||
|
|
<el-empty
|
|||
|
|
v-if="filteredProjects.length === 0"
|
|||
|
|
description="暂无历史项目"
|
|||
|
|
:image-size="100"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 新项目配置 -->
|
|||
|
|
<div class="new-project-config">
|
|||
|
|
<el-divider />
|
|||
|
|
<el-form
|
|||
|
|
ref="configForm"
|
|||
|
|
:model="configForm"
|
|||
|
|
:rules="configRules"
|
|||
|
|
label-width="100px"
|
|||
|
|
label-position="right"
|
|||
|
|
>
|
|||
|
|
<el-form-item label="新项目名称" prop="newProjectName">
|
|||
|
|
<el-input
|
|||
|
|
v-model="configForm.newProjectName"
|
|||
|
|
placeholder="新项目名称（可自动生成）"
|
|||
|
|
maxlength="50"
|
|||
|
|
/>
|
|||
|
|
</el-form-item>
|
|||
|
|
|
|||
|
|
<el-row :gutter="16">
|
|||
|
|
<el-col :span="12">
|
|||
|
|
<el-form-item label="开始日期" prop="startDate">
|
|||
|
|
<el-date-picker
|
|||
|
|
v-model="configForm.startDate"
|
|||
|
|
type="date"
|
|||
|
|
placeholder="选择开始日期"
|
|||
|
|
value-format="yyyy-MM-dd"
|
|||
|
|
style="width: 100%"
|
|||
|
|
/>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="12">
|
|||
|
|
<el-form-item label="结束日期" prop="endDate">
|
|||
|
|
<el-date-picker
|
|||
|
|
v-model="configForm.endDate"
|
|||
|
|
type="date"
|
|||
|
|
placeholder="选择结束日期"
|
|||
|
|
value-format="yyyy-MM-dd"
|
|||
|
|
:picker-options="endDatePickerOptions"
|
|||
|
|
style="width: 100%"
|
|||
|
|
/>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
</el-form>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div slot="footer" class="dialog-footer">
|
|||
|
|
<el-button @click="handleClose">取 消</el-button>
|
|||
|
|
<el-button
|
|||
|
|
type="primary"
|
|||
|
|
:loading="submitting"
|
|||
|
|
:disabled="!selectedProjectId"
|
|||
|
|
@click="handleSubmit"
|
|||
|
|
>
|
|||
|
|
<i v-if="!submitting" class="el-icon-download"></i>
|
|||
|
|
导 入
|
|||
|
|
</el-button>
|
|||
|
|
</div>
|
|||
|
|
</el-dialog>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import {getMockHistoryProjects} from '@/api/dpcProject'
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
name: 'ImportHistoryDialog',
|
|||
|
|
props: {
|
|||
|
|
visible: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: false
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
// 结束日期验证规则
|
|||
|
|
const validateEndDate = (rule, value, callback) => {
|
|||
|
|
if (value && this.configForm.startDate && value < this.configForm.startDate) {
|
|||
|
|
callback(new Error('结束日期不能早于开始日期'))
|
|||
|
|
} else {
|
|||
|
|
callback()
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return {
|
|||
|
|
submitting: false,
|
|||
|
|
searchKeyword: '',
|
|||
|
|
dateRange: null,
|
|||
|
|
selectedProjectId: null,
|
|||
|
|
historyProjects: [],
|
|||
|
|
configForm: {
|
|||
|
|
newProjectName: '',
|
|||
|
|
startDate: '',
|
|||
|
|
endDate: ''
|
|||
|
|
},
|
|||
|
|
configRules: {
|
|||
|
|
newProjectName: [
|
|||
|
|
{ required: true, message: '请输入新项目名称', trigger: 'blur' }
|
|||
|
|
],
|
|||
|
|
startDate: [
|
|||
|
|
{ required: true, message: '请选择开始日期', trigger: 'change' }
|
|||
|
|
],
|
|||
|
|
endDate: [
|
|||
|
|
{ required: true, message: '请选择结束日期', trigger: 'change' },
|
|||
|
|
{ validator: validateEndDate, trigger: 'change' }
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
endDatePickerOptions: {
|
|||
|
|
disabledDate: (time) => {
|
|||
|
|
if (this.configForm.startDate) {
|
|||
|
|
return time.getTime() < new Date(this.configForm.startDate).getTime()
|
|||
|
|
}
|
|||
|
|
return false
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
dialogVisible: {
|
|||
|
|
get() {
|
|||
|
|
return this.visible
|
|||
|
|
},
|
|||
|
|
set(val) {
|
|||
|
|
if (!val) {
|
|||
|
|
this.handleClose()
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
filteredProjects() {
|
|||
|
|
let result = [...this.historyProjects]
|
|||
|
|
if (this.searchKeyword) {
|
|||
|
|
result = result.filter(item =>
|
|||
|
|
item.projectName.toLowerCase().includes(this.searchKeyword.toLowerCase())
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
if (this.dateRange && this.dateRange.length === 2) {
|
|||
|
|
const [start, end] = this.dateRange
|
|||
|
|
result = result.filter(item => {
|
|||
|
|
const createTime = new Date(item.createTime)
|
|||
|
|
return createTime >= new Date(start) && createTime <= new Date(end)
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
return result
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
watch: {
|
|||
|
|
visible(val) {
|
|||
|
|
if (val) {
|
|||
|
|
this.loadHistoryProjects()
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
selectedProjectId(val) {
|
|||
|
|
if (val) {
|
|||
|
|
const project = this.historyProjects.find(p => p.projectId === val)
|
|||
|
|
if (project) {
|
|||
|
|
// 自动生成新项目名称
|
|||
|
|
const now = new Date()
|
|||
|
|
const year = now.getFullYear()
|
|||
|
|
const month = String(now.getMonth() + 1).padStart(2, '0')
|
|||
|
|
const day = String(now.getDate()).padStart(2, '0')
|
|||
|
|
this.configForm.newProjectName = `${project.projectName}（${year}-${month}-${day}复制）`
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
/** 加载历史项目 */
|
|||
|
|
loadHistoryProjects() {
|
|||
|
|
getMockHistoryProjects().then(response => {
|
|||
|
|
this.historyProjects = response.data
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
/** 获取状态类型 */
|
|||
|
|
getStatusType(status) {
|
|||
|
|
const statusMap = {
|
|||
|
|
'0': 'primary',
|
|||
|
|
'1': 'success',
|
|||
|
|
'2': 'info'
|
|||
|
|
}
|
|||
|
|
return statusMap[status] || 'info'
|
|||
|
|
},
|
|||
|
|
/** 获取状态标签 */
|
|||
|
|
getStatusLabel(status) {
|
|||
|
|
const statusMap = {
|
|||
|
|
'0': '进行中',
|
|||
|
|
'1': '已完成',
|
|||
|
|
'2': '已归档'
|
|||
|
|
}
|
|||
|
|
return statusMap[status] || '未知'
|
|||
|
|
},
|
|||
|
|
/** 搜索 */
|
|||
|
|
handleSearch() {
|
|||
|
|
// 搜索逻辑在 computed 中处理
|
|||
|
|
},
|
|||
|
|
/** 提交导入 */
|
|||
|
|
handleSubmit() {
|
|||
|
|
if (!this.selectedProjectId) {
|
|||
|
|
this.$message.warning('请选择要导入的历史项目')
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
this.$refs.configForm.validate(valid => {
|
|||
|
|
if (valid) {
|
|||
|
|
this.submitting = true
|
|||
|
|
const selectedProject = this.historyProjects.find(p => p.projectId === this.selectedProjectId)
|
|||
|
|
setTimeout(() => {
|
|||
|
|
this.submitting = false
|
|||
|
|
this.$emit('submit', {
|
|||
|
|
sourceProjectId: this.selectedProjectId,
|
|||
|
|
sourceProject: selectedProject,
|
|||
|
|
...this.configForm
|
|||
|
|
})
|
|||
|
|
}, 500)
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
/** 关闭对话框 */
|
|||
|
|
handleClose() {
|
|||
|
|
this.$emit('close')
|
|||
|
|
this.selectedProjectId = null
|
|||
|
|
this.searchKeyword = ''
|
|||
|
|
this.dateRange = null
|
|||
|
|
this.configForm = {
|
|||
|
|
newProjectName: '',
|
|||
|
|
startDate: '',
|
|||
|
|
endDate: ''
|
|||
|
|
}
|
|||
|
|
this.$refs.configForm?.resetFields()
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.search-section {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-bottom: 16px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.project-list-section {
|
|||
|
|
margin-bottom: 16px;
|
|||
|
|
|
|||
|
|
.section-title {
|
|||
|
|
font-size: 14px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: #303133;
|
|||
|
|
margin-bottom: 12px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.project-radio-group {
|
|||
|
|
width: 100%;
|
|||
|
|
max-height: 300px;
|
|||
|
|
overflow-y: auto;
|
|||
|
|
|
|||
|
|
&::-webkit-scrollbar {
|
|||
|
|
width: 6px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&::-webkit-scrollbar-thumb {
|
|||
|
|
background-color: #dcdfe6;
|
|||
|
|
border-radius: 3px;
|
|||
|
|
|
|||
|
|
&:hover {
|
|||
|
|
background-color: #c0c4cc;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.project-item-wrapper {
|
|||
|
|
margin-bottom: 12px;
|
|||
|
|
|
|||
|
|
&:last-child {
|
|||
|
|
margin-bottom: 0;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.project-radio {
|
|||
|
|
display: block;
|
|||
|
|
width: 100%;
|
|||
|
|
|
|||
|
|
:deep(.el-radio__label) {
|
|||
|
|
width: calc(100% - 24px);
|
|||
|
|
padding-left: 8px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
:deep(.el-radio__input) {
|
|||
|
|
margin-top: 20px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.project-item {
|
|||
|
|
padding: 12px;
|
|||
|
|
background-color: #f5f7fa;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
transition: all 0.3s;
|
|||
|
|
|
|||
|
|
&:hover {
|
|||
|
|
background-color: #ecf5ff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.project-header {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
margin-bottom: 8px;
|
|||
|
|
|
|||
|
|
.name {
|
|||
|
|
font-size: 15px;
|
|||
|
|
font-weight: 500;
|
|||
|
|
color: #303133;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.project-info {
|
|||
|
|
display: flex;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
gap: 16px;
|
|||
|
|
|
|||
|
|
.info-item {
|
|||
|
|
font-size: 13px;
|
|||
|
|
color: #909399;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 4px;
|
|||
|
|
|
|||
|
|
i {
|
|||
|
|
font-size: 14px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&.warning {
|
|||
|
|
color: #E6A23C;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.new-project-config {
|
|||
|
|
:deep(.el-divider) {
|
|||
|
|
margin: 16px 0;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.dialog-footer {
|
|||
|
|
text-align: right;
|
|||
|
|
|
|||
|
|
.el-button + .el-button {
|
|||
|
|
margin-left: 8px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
:deep(.el-empty) {
|
|||
|
|
padding: 20px 0;
|
|||
|
|
}
|
|||
|
|
</style>
|