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/ccdiProject'
|
||
|
||
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>
|