解决点检方案提交点检反馈时回车导致表单刷新的问题

This commit is contained in:
zhangjunwen 2024-11-11 09:49:19 +08:00
parent fe9a5ff89e
commit b388f0cc43

View File

@ -1,18 +1,36 @@
<template>
<div class="app-container">
<!-- 搜索工作栏 -->
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="点检单号" prop="inspectionNo">
<el-input v-model="queryParams.inspectionNo" placeholder="请输入点检单号" clearable
@keyup.enter.native="handleQuery"/>
<el-form
:model="queryParams"
ref="queryForm"
size="small"
:inline="true"
v-show="showSearch"
label-width="68px"
>
<el-form-item
label="点检单号"
prop="inspectionNo"
>
<el-input
v-model="queryParams.inspectionNo"
placeholder="请输入点检单号"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="机床设备" prop="equipId">
<el-form-item
label="机床设备"
prop="equipId"
>
<el-cascader
v-model="cascaderValue"
:options="equipCascader"
:props="{ value: 'id',label: 'name',children: 'children'}"
clearable
@change="cascaderChange"></el-cascader>
@change="cascaderChange"
></el-cascader>
</el-form-item>
<el-form-item
label="客户信息"
@ -36,20 +54,42 @@
<!-- <el-input v-model="queryParams.inspectionPlanId" placeholder="请输入点检方案id" clearable-->
<!-- @keyup.enter.native="handleQuery"/>-->
<!-- </el-form-item>-->
<el-form-item label="状态" prop="status">
<el-select v-model="queryParams.status" placeholder="请选择状态" clearable size="small">
<el-option v-for="dict in inspectionStatusList"
:key="dict.value" :label="dict.label" :value="dict.value"/>
<el-form-item
label="状态"
prop="status"
>
<el-select
v-model="queryParams.status"
placeholder="请选择状态"
clearable
size="small"
>
<el-option
v-for="dict in inspectionStatusList"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
<el-button
type="primary"
icon="el-icon-search"
@click="handleQuery"
>搜索</el-button>
<el-button
icon="el-icon-refresh"
@click="resetQuery"
>重置</el-button>
</el-form-item>
</el-form>
<!-- 操作工具栏 -->
<el-row :gutter="10" class="mb8">
<el-row
:gutter="10"
class="mb8"
>
<!-- <el-col :span="1.5">-->
<!-- <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="openForm(undefined)"-->
<!-- v-hasPermi="['imt:inspection-info:create']">新增</el-button>-->
@ -58,53 +98,142 @@
<!-- <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" :loading="exportLoading"-->
<!-- v-hasPermi="['imt:inspection-info:export']">导出</el-button>-->
<!-- </el-col>-->
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
<right-toolbar
:showSearch.sync="showSearch"
@queryTable="getList"
></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
<el-table-column label="点检单号" align="center" prop="inspectionNo"/>
<el-table-column label="设备" align="center" prop="equipName"/>
<el-table-column label="客户" align="center" prop="customerName"/>
<el-table-column label="点检方案" align="center" prop="inspectionPlanName"/>
<el-table-column label="定制化点检方案" align="center" prop="exclusiveInspection"/>
<el-table-column label="状态" align="center" prop="status">
<el-table
v-loading="loading"
:data="list"
:stripe="true"
:show-overflow-tooltip="true"
>
<el-table-column
label="点检单号"
align="center"
prop="inspectionNo"
/>
<el-table-column
label="设备"
align="center"
prop="equipName"
/>
<el-table-column
label="客户"
align="center"
prop="customerName"
/>
<el-table-column
label="点检方案"
align="center"
prop="inspectionPlanName"
/>
<el-table-column
label="定制化点检方案"
align="center"
prop="exclusiveInspection"
/>
<el-table-column
label="状态"
align="center"
prop="status"
>
<template v-slot="scope">
<dict-tag :type="DICT_TYPE.INSPECTION_STATUS" :value="scope.row.status"/>
<dict-tag
:type="DICT_TYPE.INSPECTION_STATUS"
:value="scope.row.status"
/>
</template>
</el-table-column>
<el-table-column label="备注" align="center" prop="remark"/>
<el-table-column label="创建时间" align="center" prop="createTime" width="180">
<el-table-column
label="备注"
align="center"
prop="remark"
/>
<el-table-column
label="创建时间"
align="center"
prop="createTime"
width="180"
>
<template v-slot="scope">
<span>{{ parseTime(scope.row.createTime) }}</span>
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<el-table-column
label="操作"
align="center"
class-name="small-padding fixed-width"
>
<template v-slot="scope">
<!-- <el-button size="mini" type="text" icon="el-icon-edit" @click="openForm(scope.row.inspectionId)"-->
<!-- v-hasPermi="['imt:inspection-info:update']">修改-->
<!-- </el-button>-->
<el-button v-if="scope.row.status === 0" size="mini" type="text" icon="el-icon-tickets" @click="inspectionFeedback(scope.row)"
v-hasPermi="['imt:inspection-info:inspectionFeedback']">点检反馈
<el-button
v-if="scope.row.status === 0"
size="mini"
type="text"
icon="el-icon-tickets"
@click="inspectionFeedback(scope.row)"
v-hasPermi="['imt:inspection-info:inspectionFeedback']"
>点检反馈
</el-button>
<el-button v-if="scope.row.status === 2" size="mini" type="text" icon="el-icon-tickets" @click="exclusiveInspectionFeedback(scope.row)"
v-hasPermi="['imt:inspection-info:exclusiveInspectionFeedback']">定制化点检反馈
<el-button
v-if="scope.row.status === 2"
size="mini"
type="text"
icon="el-icon-tickets"
@click="exclusiveInspectionFeedback(scope.row)"
v-hasPermi="['imt:inspection-info:exclusiveInspectionFeedback']"
>定制化点检反馈
</el-button>
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
v-hasPermi="['imt:inspection-info:delete']">删除
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['imt:inspection-info:delete']"
>删除
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页组件 -->
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
@pagination="getList"/>
<pagination
v-show="total > 0"
:total="total"
:page.sync="queryParams.pageNo"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<!-- 对话框(添加 / 修改) -->
<InspectionInfoForm ref="formRef" @success="getList"/>
<InspectionInfoForm
ref="formRef"
@success="getList"
/>
<!-- 点检树点检反馈 -->
<el-dialog :title="inspectionFeedbackTitle" :visible.sync="inspectionFeedbackVisible" width="45%" v-dialogDrag append-to-body>
<el-form ref="inspectionFeedbackRef" :model="inspectionFeedbackData" :rules="inspectionFeedbackRules" v-loading="inspectionFeedbackLoading" label-width="140px">
<el-form-item label="点检方案:" prop="inspectionPlanId">
<el-dialog
:title="inspectionFeedbackTitle"
:visible.sync="inspectionFeedbackVisible"
width="45%"
v-dialogDrag
append-to-body
>
<el-form
ref="inspectionFeedbackRef"
:model="inspectionFeedbackData"
:rules="inspectionFeedbackRules"
v-loading="inspectionFeedbackLoading"
@submit.native.prevent
label-width="140px"
>
<el-form-item
label="点检方案:"
prop="inspectionPlanId"
>
<div
v-for="(tree,index) in treeData"
:key="tree.inspectionPlanId"
@ -127,45 +256,98 @@
</div>
</div>
</el-form-item>
<el-form-item label="是否解决:" prop="inspectionFeedbackStatus">
<el-form-item
label="是否解决:"
prop="inspectionFeedbackStatus"
>
<el-radio-group v-model="inspectionFeedbackData.inspectionFeedbackStatus">
<el-radio :label="3"></el-radio>
<el-radio :label="1"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="点检方案补充:" prop="inspectionPlanSupplement">
<el-input v-model="inspectionFeedbackData.inspectionPlanSupplement" :rows="4" type="textarea" placeholder="请输入内容"/>
<el-form-item
label="点检方案补充:"
prop="inspectionPlanSupplement"
>
<el-input
v-model="inspectionFeedbackData.inspectionPlanSupplement"
:rows="4"
type="textarea"
placeholder="请输入内容"
/>
</el-form-item>
<div style="text-align: right">
<el-button type="primary" @click="submitInspectionFeedback" > </el-button>
<el-button
type="primary"
@click="submitInspectionFeedback"
> </el-button>
<el-button @click="inspectionFeedbackVisible = false"> </el-button>
</div>
</el-form>
</el-dialog>
<!-- 定制化点检反馈 -->
<el-dialog :title="exclusiveInspectionFeedbackTitle" :visible.sync="exclusiveInspectionFeedbackVisible" width="45%" v-dialogDrag append-to-body>
<el-form ref="exclusiveInspectionFeedbackRef" :model="exclusiveInspectionFeedbackData" :rules="exclusiveInspectionFeedbackRules" v-loading="exclusiveInspectionFeedbackLoading" label-width="140px">
<el-form-item label="点检方案:" prop="inspectionPlanId">
<inspection-plan-feedback-tree ref="inspectionPlanFeedbackTree" :inspection-id="inspectionId" :inspection-plan-ids="inspectionPlanIds"/>
<el-dialog
:title="exclusiveInspectionFeedbackTitle"
:visible.sync="exclusiveInspectionFeedbackVisible"
width="45%"
v-dialogDrag
append-to-body
>
<el-form
ref="exclusiveInspectionFeedbackRef"
:model="exclusiveInspectionFeedbackData"
:rules="exclusiveInspectionFeedbackRules"
v-loading="exclusiveInspectionFeedbackLoading"
label-width="140px"
>
<el-form-item
label="点检方案:"
prop="inspectionPlanId"
>
<inspection-plan-feedback-tree
ref="inspectionPlanFeedbackTree"
:inspection-id="inspectionId"
:inspection-plan-ids="inspectionPlanIds"
/>
</el-form-item>
<el-form-item label="点检方案补充:" prop="inspectionPlanSupplement">
<el-form-item
label="点检方案补充:"
prop="inspectionPlanSupplement"
>
{{ exclusiveInspectionFeedbackData.inspectionPlanSupplement }}
</el-form-item>
<el-form-item label="定制化点检方案:" prop="exclusiveInspection">
<el-form-item
label="定制化点检方案:"
prop="exclusiveInspection"
>
{{ exclusiveInspectionFeedbackData.exclusiveInspection }}
</el-form-item>
<el-form-item label="是否解决:" prop="inspectionFeedbackStatus">
<el-form-item
label="是否解决:"
prop="inspectionFeedbackStatus"
>
<el-radio-group v-model="exclusiveInspectionFeedbackData.inspectionFeedbackStatus">
<el-radio :label="3"></el-radio>
<el-radio :label="1"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="定制化点检反馈:" prop="exclusiveInspectionFeedback">
<el-input v-model="exclusiveInspectionFeedbackData.exclusiveInspectionFeedback" :rows="4" type="textarea" placeholder="请输入内容"/>
<el-form-item
label="定制化点检反馈:"
prop="exclusiveInspectionFeedback"
>
<el-input
v-model="exclusiveInspectionFeedbackData.exclusiveInspectionFeedback"
:rows="4"
type="textarea"
placeholder="请输入内容"
/>
</el-form-item>
<div style="text-align: right">
<el-button type="primary" @click="submitExclusiveInspectionFeedback" > </el-button>
<el-button
type="primary"
@click="submitExclusiveInspectionFeedback"
> </el-button>
<el-button @click="exclusiveInspectionFeedbackVisible = false"> </el-button>
</div>
</el-form>
@ -174,22 +356,22 @@
</template>
<script>
import * as InspectionInfoApi from '@/api/system/inspection/inspectionInfo';
import InspectionInfoForm from './InspectionInfoForm.vue';
import * as InspectionInfoApi from "@/api/system/inspection/inspectionInfo";
import InspectionInfoForm from "./InspectionInfoForm.vue";
import { getEquipCascader } from "@/api/system/equip/equipInfo";
import { getCustomerSelection } from "@/api/system/baseData/customerInfo";
import { DICT_TYPE, getDictDatas } from "@/utils/dict";
import * as InspectionPlanApi from "@/api/system/inspection/plan";
import { VueOkrTree } from "@/components/VueOkrTree";
import Vue from "vue";
import inspectionPlanFeedbackTree from "@/views/system/inspectionPlan/inspectionPlanFeedbackTree.vue"
import inspectionPlanFeedbackTree from "@/views/system/inspectionPlan/inspectionPlanFeedbackTree.vue";
export default {
name: "InspectionInfo",
components: {
VueOkrTree,
InspectionInfoForm,
inspectionPlanFeedbackTree
inspectionPlanFeedbackTree,
},
data() {
return {
@ -207,17 +389,17 @@ export default {
exclusiveInspectionFeedbackData: {},
exclusiveInspectionFeedbackRules: {
inspectionFeedbackStatus: [
{ required: true, message: '请选择是否解决', trigger: 'change' }
{ required: true, message: "请选择是否解决", trigger: "change" },
],
exclusiveInspectionFeedback: [
{ required: true, message: '定制化点检反馈', trigger: 'blur' },
{ required: true, message: "定制化点检反馈", trigger: "blur" },
],
},
exclusiveInspectionFeedbackLoading: false,
inspectionFeedbackData: {},
inspectionFeedbackRules: {
inspectionFeedbackStatus: [
{ required: true, message: '请选择是否解决', trigger: 'change' }
{ required: true, message: "请选择是否解决", trigger: "change" },
],
},
inspectionFeedbackLoading: false,
@ -269,24 +451,32 @@ export default {
},
async submitExclusiveInspectionFeedback() {
await this.$refs.exclusiveInspectionFeedbackRef.validate();
this.exclusiveInspectionFeedbackData.status = this.exclusiveInspectionFeedbackData.inspectionFeedbackStatus;
this.exclusiveInspectionFeedbackData.closeAlarm = this.exclusiveInspectionFeedbackData.status === 3;
await InspectionInfoApi.exclusiveInspectionFeedback(this.exclusiveInspectionFeedbackData).then(res=>{
this.exclusiveInspectionFeedbackData.status =
this.exclusiveInspectionFeedbackData.inspectionFeedbackStatus;
this.exclusiveInspectionFeedbackData.closeAlarm =
this.exclusiveInspectionFeedbackData.status === 3;
await InspectionInfoApi.exclusiveInspectionFeedback(
this.exclusiveInspectionFeedbackData
).then((res) => {
this.$modal.msgSuccess("提交成功");
this.exclusiveInspectionFeedbackVisible = false;
this.getList();
})
});
},
async submitInspectionFeedback() {
await this.$refs.inspectionFeedbackRef.validate();
this.inspectionFeedbackData.status = this.inspectionFeedbackData.inspectionFeedbackStatus;
this.inspectionFeedbackData.closeAlarm = this.inspectionFeedbackData.status === 3;
this.inspectionFeedbackData.status =
this.inspectionFeedbackData.inspectionFeedbackStatus;
this.inspectionFeedbackData.closeAlarm =
this.inspectionFeedbackData.status === 3;
this.inspectionFeedbackData.feedbackList = this.feedbackList;
await InspectionInfoApi.inspectionFeedback(this.inspectionFeedbackData).then(res=>{
await InspectionInfoApi.inspectionFeedback(
this.inspectionFeedbackData
).then((res) => {
this.$modal.msgSuccess("提交成功");
this.inspectionFeedbackVisible = false;
this.getList();
})
});
},
async inspectionFeedback(row) {
this.feedbackList = [];
@ -294,14 +484,17 @@ export default {
this.inspectionFeedbackVisible = true;
this.inspectionFeedbackData = {};
this.inspectionFeedbackLoading = true;
await InspectionInfoApi.getInspectionInfo(row.inspectionId).then(res=>{
await InspectionInfoApi.getInspectionInfo(row.inspectionId).then(
(res) => {
this.inspectionFeedbackData = res.data;
this.inspectionFeedbackLoading = false;
})
const data = {
inspectionPlanIds: this.inspectionFeedbackData.inspectionPlanId.split(',')
}
await InspectionPlanApi.getInspectionPlanList(data).then(res=>{
);
const data = {
inspectionPlanIds:
this.inspectionFeedbackData.inspectionPlanId.split(","),
};
await InspectionPlanApi.getInspectionPlanList(data).then((res) => {
this.treeData = this.handleTree(
res.data,
"inspectionPlanId",
@ -316,9 +509,11 @@ export default {
console.log("全局输入值:", inputValue);
//
if (this.feedbackList.length > 0) {
const obj = this.feedbackList.find(item => item.inspectionPlanId === node.data.inspectionPlanId);
const obj = this.feedbackList.find(
(item) => item.inspectionPlanId === node.data.inspectionPlanId
);
if (obj != null) {
this.feedbackList.map(item => {
this.feedbackList.map((item) => {
if (item.inspectionPlanId === node.data.inspectionPlanId) {
item.inspectionFeedbackContent = inputValue;
}
@ -326,15 +521,15 @@ export default {
} else {
let data = {
inspectionFeedbackContent: inputValue,
inspectionPlanId: node.data.inspectionPlanId
}
inspectionPlanId: node.data.inspectionPlanId,
};
this.feedbackList.push(data);
}
} else {
let data = {
inspectionFeedbackContent: inputValue,
inspectionPlanId: node.data.inspectionPlanId
}
inspectionPlanId: node.data.inspectionPlanId,
};
this.feedbackList.push(data);
}
},
@ -342,27 +537,32 @@ export default {
this.exclusiveInspectionFeedbackVisible = true;
this.exclusiveInspectionFeedbackData = {};
this.exclusiveInspectionFeedbackLoading = true;
await InspectionInfoApi.getInspectionInfo(row.inspectionId).then(res=>{
await InspectionInfoApi.getInspectionInfo(row.inspectionId).then(
(res) => {
this.exclusiveInspectionFeedbackData = res.data;
this.inspectionPlanIds = this.exclusiveInspectionFeedbackData.inspectionPlanId.split(',')
this.inspectionPlanIds =
this.exclusiveInspectionFeedbackData.inspectionPlanId.split(",");
this.inspectionId = row.inspectionId;
this.exclusiveInspectionFeedbackLoading = false;
})
}
);
await this.$refs.inspectionPlanFeedbackTree.initTree();
},
initSelection() {
getCustomerSelection().then((res) => {
this.customerSelection = res;
});
getEquipCascader().then(res=>{
res.forEach(item=>{
getEquipCascader().then((res) => {
res.forEach((item) => {
if (item.children == null) {
item.disabled = true;
}
})
});
this.equipCascader = res;
})
this.inspectionStatusList = getDictDatas(DICT_TYPE.INSPECTION_STATUS).filter(item => item.value !== "3");
});
this.inspectionStatusList = getDictDatas(
DICT_TYPE.INSPECTION_STATUS
).filter((item) => item.value !== "3");
},
cascaderChange(value) {
if (value.length > 0) {
@ -375,7 +575,9 @@ export default {
async getList() {
try {
this.loading = true;
const res = await InspectionInfoApi.getInspectionInfoPage(this.queryParams);
const res = await InspectionInfoApi.getInspectionInfoPage(
this.queryParams
);
this.list = res.data.list;
this.total = res.data.total;
} finally {
@ -401,26 +603,29 @@ export default {
/** 删除按钮操作 */
async handleDelete(row) {
const inspectionId = row.inspectionId;
await this.$modal.confirm('是否确认删除点检工单编号为"' + inspectionId + '"的数据项?')
await this.$modal.confirm(
'是否确认删除点检工单编号为"' + inspectionId + '"的数据项?'
);
try {
await InspectionInfoApi.deleteInspectionInfo(inspectionId);
await this.getList();
this.$modal.msgSuccess("删除成功");
} catch {
}
} catch {}
},
/** 导出按钮操作 */
async handleExport() {
await this.$modal.confirm('是否确认导出所有点检工单数据项?');
await this.$modal.confirm("是否确认导出所有点检工单数据项?");
try {
this.exportLoading = true;
const data = await InspectionInfoApi.exportInspectionInfoExcel(this.queryParams);
this.$download.excel(data, '点检工单.xls');
const data = await InspectionInfoApi.exportInspectionInfoExcel(
this.queryParams
);
this.$download.excel(data, "点检工单.xls");
} catch {
} finally {
this.exportLoading = false;
}
},
}
},
};
</script>