ah-jjzhgd-web/src/views/dataManage/projectProgress/components/CurrentProgress.vue

323 lines
10 KiB
Vue

<template>
<div>
<!-- 当前进度填报列表 -->
<el-dialog
append-to-body
width="80%"
v-if="dialogVisible"
:visible.sync="innerVisible"
:title="`当前进度 - ${currentRow ? currentRow.proGx : ''}`"
@close="handleClose"
>
<el-form
inline
:model="currentProgressQuery"
label-width="80px"
class="mb-10"
>
<el-form-item label="填报时间">
<el-date-picker
v-model="currentProgressQuery.beginTime"
type="date"
placeholder="开始日期"
value-format="yyyy-MM-dd"
style="width: 160px"
/>
<span class="range-split">~</span>
<el-date-picker
v-model="currentProgressQuery.endTime"
type="date"
placeholder="结束日期"
value-format="yyyy-MM-dd"
style="width: 160px"
/>
</el-form-item>
<el-form-item>
<el-button
size="mini"
type="primary"
icon="el-icon-search"
@click="onHandleProgressQuery"
>
查询
</el-button>
<el-button
size="mini"
type="warning"
plain
icon="el-icon-refresh"
@click="onHandleProgressReset"
>
重置
</el-button>
<el-button
size="mini"
type="primary"
icon="el-icon-plus"
@click="onHandleAddProgress"
>
新增
</el-button>
</el-form-item>
</el-form>
<el-table
border
:data="currentProgressList"
v-loading="currentProgressLoading"
>
<el-table-column
label="序号"
type="index"
width="60"
align="center"
/>
<el-table-column
label="填报时间"
prop="fillingTime"
align="center"
/>
<el-table-column
label="计划进度"
prop="planAccess"
align="center"
/>
<el-table-column
label="当前进度"
prop="currentAccess"
align="center"
/>
<el-table-column
label="偏差分析"
prop="deviationAnalyze"
align="center"
/>
</el-table>
<pagination
:total="currentProgressTotal"
:page.sync="currentProgressQuery.pageNum"
:limit.sync="currentProgressQuery.pageSize"
@pagination="onProgressPageChange"
/>
</el-dialog>
<!-- 新增填报弹窗 -->
<el-dialog
append-to-body
width="420px"
v-if="addProgressDialogVisible"
:visible.sync="addProgressDialogVisible"
title="进度填报"
>
<el-form
:model="addProgressForm"
:rules="addProgressRules"
ref="addProgressFormRef"
label-width="90px"
>
<el-form-item label="填报日期" prop="fillingTime">
<el-date-picker
v-model="addProgressForm.fillingTime"
type="date"
value-format="yyyy-MM-dd"
placeholder="请选择填报日期"
style="width: 100%"
/>
</el-form-item>
<el-form-item label="计划进度" prop="planAccess">
<el-input
v-model="addProgressForm.planAccess"
clearable
placeholder="请输入计划进度"
/>
</el-form-item>
<el-form-item label="填报进度" prop="currentAccess">
<el-input
v-model="addProgressForm.currentAccess"
clearable
placeholder="请输入填报进度"
/>
</el-form-item>
<el-form-item label="偏差分析" prop="deviationAnalyze">
<el-input
v-model="addProgressForm.deviationAnalyze"
type="textarea"
:rows="3"
clearable
placeholder="请输入偏差分析"
/>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="addProgressDialogVisible = false">
取消
</el-button>
<el-button
type="primary"
:loading="addProgressSubmitting"
@click="onHandleSubmitProgress"
>
确定
</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import {
getProgressProcessProgressList,
createProcessPlan,
} from '@/api/basic/progress'
export default {
name: 'CurrentProgress',
props: {
visible: {
type: Boolean,
default: false,
},
currentRow: {
type: Object,
default: () => null,
},
},
data() {
return {
innerVisible: false,
currentProgressLoading: false,
currentProgressTotal: 0,
currentProgressList: [],
currentProgressQuery: {
pageNum: 1,
pageSize: 10,
beginTime: '',
endTime: '',
},
addProgressDialogVisible: false,
addProgressSubmitting: false,
addProgressForm: {
fillingTime: '',
planAccess: '',
currentAccess: '',
deviationAnalyze: '',
},
addProgressRules: {
fillingTime: [
{
required: true,
message: '请选择填报日期',
trigger: 'blur',
},
],
planAccess: [
{
required: true,
message: '请输入计划进度',
trigger: 'blur',
},
],
currentAccess: [
{
required: true,
message: '请输入填报进度',
trigger: 'blur',
},
],
},
}
},
watch: {
visible: {
immediate: true,
handler(val) {
this.innerVisible = val
if (val && this.currentRow) {
this.currentProgressQuery.pageNum = 1
this.loadCurrentProgressList()
}
},
},
},
methods: {
handleClose() {
this.$emit('update:visible', false)
},
async loadCurrentProgressList() {
if (!this.currentRow) return
this.currentProgressLoading = true
const params = {
pageNum: this.currentProgressQuery.pageNum,
pageSize: this.currentProgressQuery.pageSize,
beginTime: this.currentProgressQuery.beginTime,
endTime: this.currentProgressQuery.endTime,
progressId: this.currentRow.id,
}
const res = await getProgressProcessProgressList(params)
this.currentProgressLoading = false
this.currentProgressList = res?.rows || res?.data || []
this.currentProgressTotal =
res?.total || this.currentProgressList.length
},
onHandleProgressQuery() {
this.currentProgressQuery.pageNum = 1
this.loadCurrentProgressList()
},
onHandleProgressReset() {
this.currentProgressQuery.beginTime = ''
this.currentProgressQuery.endTime = ''
this.currentProgressQuery.pageNum = 1
this.loadCurrentProgressList()
},
onHandleAddProgress() {
this.addProgressDialogVisible = true
this.addProgressForm = {
fillingTime: '',
planAccess: '',
currentAccess: '',
deviationAnalyze: '',
}
},
onProgressPageChange({ page, limit }) {
this.currentProgressQuery.pageNum = page
this.currentProgressQuery.pageSize = limit
this.loadCurrentProgressList()
},
async onHandleSubmitProgress() {
this.$refs.addProgressFormRef.validate(async (valid) => {
if (!valid || !this.currentRow) return
this.addProgressSubmitting = true
const payload = {
...this.addProgressForm,
progressId: this.currentRow.id,
}
const res = await createProcessPlan(payload)
this.addProgressSubmitting = false
if (res.code === 200) {
this.$message.success('新增填报成功')
this.addProgressDialogVisible = false
this.loadCurrentProgressList()
} else {
this.$message.error(res.msg || '新增失败')
}
})
},
},
}
</script>
<style scoped>
.range-split {
margin: 0 8px;
}
</style>