代码优化

This commit is contained in:
BianLzhaoMin 2026-01-21 13:42:27 +08:00
parent cd86cdae33
commit 65ccaaaaa1
3 changed files with 985 additions and 0 deletions

View File

@ -0,0 +1,322 @@
<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>

View File

@ -0,0 +1,254 @@
<template>
<div>
<el-form
:model="addAndEditForm"
label-width="auto"
ref="addAndEditFormRef"
:rules="addAndEditFormRules"
>
<el-row>
<el-col :span="24">
<el-form-item label="工序类型" prop="proType">
<el-input
clearable
show-word-limit
:maxlength="50"
placeholder="请输入工程类型"
v-model.trim="addAndEditForm.proType"
/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="工序" prop="proGx">
<el-input
clearable
show-word-limit
:maxlength="50"
placeholder="请输入工序"
v-model.trim="addAndEditForm.proGx"
/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="计划开始时间" prop="planStartTime">
<el-date-picker
type="date"
clearable
style="width: 100%"
value-format="yyyy-MM-dd"
placeholder="请选择计划开始时间"
v-model="addAndEditForm.planStartTime"
/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="计划结束时间" prop="planEndTime">
<el-date-picker
type="date"
clearable
style="width: 100%"
value-format="yyyy-MM-dd"
placeholder="请选择计划结束时间"
v-model="addAndEditForm.planEndTime"
/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="投入人员" prop="people">
<el-input
clearable
show-word-limit
:maxlength="50"
placeholder="请输入投入人员"
v-model.trim="addAndEditForm.people"
/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="投入设备" prop="equipment">
<el-input
clearable
show-word-limit
:maxlength="50"
placeholder="请输入投入设备"
v-model.trim="addAndEditForm.equipment"
/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="实际结束时间" prop="endTime">
<el-date-picker
type="date"
clearable
style="width: 100%"
value-format="yyyy-MM-dd"
placeholder="请选择实际结束时间"
v-model="addAndEditForm.endTime"
/>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
</template>
<script>
import {
addProjectProgressAPI,
editProjectProgressAPI,
} from '@/api/dataAnalysis/projectProgress'
export default {
name: 'AddAndEditForm',
props: {
detailsId: {
type: [Number, String],
default: '',
},
editRow: {
type: Object,
default: () => {},
},
},
data() {
return {
addAndEditForm: {
proType: '',
proGx: '',
planStartTime: '',
planEndTime: '',
startTime: '',
endTime: '',
planAccess: '',
exeAccess: '',
},
addAndEditFormRules: {
proType: [
{
required: true,
message: '请输入工程类型',
trigger: 'blur',
},
],
proGx: [
{
required: true,
message: '请输入工序',
trigger: 'blur',
},
],
planStartTime: [
{
required: true,
message: '请选择计划开始时间',
trigger: 'blur',
},
],
planEndTime: [
{
required: true,
message: '请选择计划结束时间',
trigger: 'blur',
},
],
startTime: [
{
required: true,
message: '请选择实际开始时间',
trigger: 'blur',
},
],
endTime: [
{
required: true,
message: '请选择实际结束时间',
trigger: 'blur',
},
],
planAccess: [
{
required: true,
message: '请输入计划进度',
trigger: 'blur',
},
],
exeAccess: [
{
required: true,
message: '请输入实际进度',
trigger: 'blur',
},
],
},
}
},
methods: {
submitForm() {
return new Promise((resolve, reject) => {
this.$refs.addAndEditFormRef.validate(async (valid) => {
if (valid) {
const params = this.addAndEditForm
if (this.detailsId) {
params.id = this.detailsId
}
const API = this.detailsId
? editProjectProgressAPI
: addProjectProgressAPI
const res = await API(params)
if (res.code === 200) {
resolve(true)
} else {
reject(false)
}
} else {
reject(false)
}
})
})
},
},
watch: {
editRow: {
handler(newVal) {
if (Object.keys(newVal).length > 0) {
const {
proType,
proGx,
planStartTime,
planEndTime,
startTime,
endTime,
planAccess,
exeAccess,
} = newVal
this.addAndEditForm.proType = proType
this.addAndEditForm.proGx = proGx
this.addAndEditForm.planStartTime = planStartTime
this.addAndEditForm.planEndTime = planEndTime
this.addAndEditForm.startTime = startTime
this.addAndEditForm.endTime = endTime
this.addAndEditForm.planAccess = planAccess
this.addAndEditForm.exeAccess = exeAccess
}
},
immediate: true,
},
},
}
</script>

View File

@ -0,0 +1,409 @@
<template>
<!-- 数据管理 施工进度 -->
<div class="app-container">
<el-form label-width="auto" inline :model="queryParams">
<el-form-item label="工序类型">
<el-input
v-model="queryParams.proType"
clearable
placeholder="请输入工序类型"
/>
</el-form-item>
<el-form-item label="工序">
<el-input
clearable
v-model="queryParams.proGx"
placeholder="请输入工序名称"
/>
</el-form-item>
<el-form-item>
<el-button
size="mini"
icon="el-icon-search"
type="primary"
@click="onHandleQuery"
>
查询
</el-button>
<el-button
size="mini"
icon="el-icon-refresh"
type="warning"
plain
@click="onHandleReset"
>
重置
</el-button>
<el-button
size="mini"
icon="el-icon-plus"
@click="onHandleAddProject"
>
新增
</el-button>
</el-form-item>
</el-form>
<el-table border :data="projectProgressList">
<el-table-column
align="center"
:key="column.prop"
:label="column.label"
show-overflow-tooltip
v-for="column in tableColumns"
>
<template slot-scope="scope">
<template v-if="column.prop === 'currentProgress'">
<span
style="color: #409eff"
@click="onHandleCurrentProgress(scope.row)"
>
{{ scope.row[column.prop] }}%
</span>
</template>
<template v-else-if="column.prop === 'planAccess'">
{{ scope.row[column.prop] ? '已完成' : '未完成' }}
</template>
<template v-else>
{{ scope.row[column.prop] }}
</template>
</template>
</el-table-column>
<el-table-column label="操作" align="center" width="140">
<template slot-scope="scope">
<el-button
type="primary"
size="mini"
style="padding: 6px 6px"
@click="onHandleEditProject(scope.row)"
>
编辑
</el-button>
<el-button
type="danger"
size="mini"
style="padding: 6px 6px"
@click="onHandleDeleteProject(scope.row)"
>
删除
</el-button>
</template>
</el-table-column>
</el-table>
<pagination
:total="total"
@pagination="getProjectProgressList"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
/>
<el-dialog
append-to-body
width="40%"
v-if="addAndEditDialogVisible"
:visible.sync="addAndEditDialogVisible"
:title="`${addAndEditDialogTitle}工程质量`"
>
<AddAndEditForm
ref="addAndEditFormRef"
:detailsId="detailsId"
:editRow="editRow"
/>
<div slot="footer" class="dialog-footer">
<el-button @click="addAndEditDialogVisible = false">
关闭
</el-button>
<el-button type="primary" @click="onHandleSubmit">
提交
</el-button>
</div>
</el-dialog>
<!-- 当前进度填报列表 -->
<el-dialog
append-to-body
width="80%"
v-if="currentProgressDialogVisible"
:visible.sync="currentProgressDialogVisible"
:title="`当前进度 - ${currentRow ? currentRow.proGx : ''}`"
>
<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>
<!-- 当前进度弹窗组件 -->
<CurrentProgress
:visible.sync="currentProgressDialogVisible"
:current-row="currentRow"
/>
</div>
</template>
<script>
import {
getProjectProgressListAPI,
deleteProjectProgressAPI,
} from '@/api/dataAnalysis/projectProgress'
import AddAndEditForm from './components/addAndEditForm.vue'
import CurrentProgress from './components/CurrentProgress.vue'
export default {
name: 'ProjectQuality',
components: {
AddAndEditForm,
CurrentProgress,
},
data() {
return {
total: 0,
editRow: {},
detailsId: '',
projectProgressList: [],
addAndEditDialogVisible: false,
addAndEditDialogTitle: '',
tableColumns: [
{
label: '工序类型',
prop: 'proType',
},
{
label: '工序',
prop: 'proGx',
},
{
label: '计划开始时间',
prop: 'planStartTime',
},
{
label: '计划结束时间',
prop: 'planEndTime',
},
{
label: '投入人员',
prop: '投入人员',
},
{
label: '投入设备',
prop: '投入设备',
},
{
label: '当前进度',
prop: 'currentProgress',
},
{
label: '实际结束时间',
prop: 'endTime',
},
{
label: '状态',
prop: 'planAccess',
},
],
queryParams: {
pageNum: 1,
pageSize: 10,
proType: '',
proGx: '',
},
//
currentProgressDialogVisible: false,
currentRow: null,
}
},
created() {
this.getProjectProgressList()
},
methods: {
onHandleQuery() {
this.getProjectProgressList()
},
onHandleReset() {
this.queryParams = {
pageNum: 1,
pageSize: 10,
proType: '',
proGx: '',
}
this.getProjectProgressList()
},
onHandleAddProject() {
this.detailsId = null
this.editRow = {}
this.addAndEditDialogVisible = true
this.addAndEditDialogTitle = '新增'
},
//
async getProjectProgressList() {
const res = await getProjectProgressListAPI(this.queryParams)
this.projectProgressList = res.rows
this.total = res.total
},
//
onHandleEditProject(row) {
this.detailsId = row.id
this.editRow = row
this.addAndEditDialogVisible = true
this.addAndEditDialogTitle = '编辑'
},
//
onHandleDeleteProject(row) {
this.$confirm('此操作将永久删除该施工进度, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
})
.then(async () => {
const res = await deleteProjectProgressAPI({ id: row.id })
if (res.code === 200) {
this.$message.success('删除成功')
this.getProjectProgressList()
} else {
this.$message.error('删除失败')
}
})
.catch(() => {})
},
//
async onHandleSubmit() {
const res = await this.$refs.addAndEditFormRef.submitForm()
if (res) {
this.$message.success(
this.addAndEditDialogTitle === '新增'
? '新增成功'
: '编辑成功',
)
this.getProjectProgressList()
this.addAndEditDialogVisible = false
} else {
this.$message.error('提交失败')
}
},
//
onHandleCurrentProgress(row) {
console.log(row)
// this.currentRow = row
this.currentProgressDialogVisible = true
},
},
}
</script>
<style scoped lang="scss">
::v-deep .el-dialog {
display: flex !important;
flex-direction: column !important;
margin: 0 !important;
position: absolute !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
// height: 90vh !important;
// min-height: 90vh !important;
// max-height: 90vh !important;
.el-dialog__body {
flex: 1 !important;
overflow-y: scroll !important;
padding: 20px 20px !important;
box-sizing: border-box !important;
}
}
</style>