suojin
/
jonhon-mes-web
24
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

安环管理-环保管理-废汽处理-废气加药记录-新增-优化

Browse Source
dev-scheduling
ysn 11 hours ago
parent 125d54f345
commit 4374d51e79
1 changed files with 191 additions and 155 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 346
      src/views/safetyManagement/wasteGasSet/components/addEditDialogDosingRecord.vue

346
src/views/safetyManagement/wasteGasSet/components/addEditDialogDosingRecord.vue
Unescape View File

@ -1,165 +1,201 @@
<template>
<el-dialog title="新增" append-to-body v-model="openShow" width="70%" @close="closeDialog">
<div style="margin-bottom: 12px" v-if="moldAddMore">
<el-button type="primary" @click="addTable">插入一行</el-button>
<el-button type="danger" @click="delTable">删除行</el-button>
</div>
<el-table :data="tableData" style="width: 100%" border :cell-style="{ padding: '5px' }">
<!-- 设施 -->
<el-table-column prop="device" label="设施" align="center" width="150">
<template #header>
<span><i style="color: red">*</i>设施</span>
</template>
<template #default="scope">
<el-input v-model="scope.row.device" placeholder="请输入" />
</template>
</el-table-column>
<el-table-column prop="drug" label="药品" align="center" width="150">
<template #header>
<span><i style="color: red">*</i>药品</span>
</template>
<template #default="scope">
<el-input v-model="scope.row.drug" placeholder="请输入" />
</template>
</el-table-column>
<el-table-column prop="dose" label="剂量(kg)" align="center" width="150">
<template #header>
<span><i style="color: red">*</i>剂量(kg)</span>
</template>
<template #default="scope">
<el-input v-model="scope.row.dose" type="number" placeholder="请输入" />
</template>
</el-table-column>
<el-table-column prop="dosingTime" label="加药时间" align="center" width="210">
<template #header>
<span><i style="color: red" >*</i>加药时间</span>
</template>
<template #default="scope">
<el-date-picker v-model="scope.row.dosingTime" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" type="datetime" placeholder="选择日期" style="width: 100%" />
</template>
</el-table-column>
<el-table-column prop="dosingMan" label="加药人" align="center" width="150">
<template #header>
<span><i style="color: red">*</i>加药人</span>
</template>
<template #default="scope">
<el-select v-model="scope.row.dosingMan" placeholder="请选择" style="width: 100%">
<el-option v-for="item in dosingManList" :key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</template>
</el-table-column>
<el-table-column prop="memo" label="备注" align="center">
<template #default="scope">
<el-input v-model="scope.row.memo" />
</template>
</el-table-column>
</el-table>
<el-dialog
title="新增"
append-to-body
v-model="openShow"
width="70%"
@close="closeDialog"
destroy-on-close
>
<div style="margin-bottom: 12px" v-if="moldAddMore">
<el-button type="primary" @click="addTable">插入一行</el-button>
<el-button type="danger" @click="delTable">删除行</el-button>
</div>
<el-form ref="tableForm" :model="form" :rules="formRules" label-width="0px">
<el-table :data="tableData" style="width: 100%" border :cell-style="{ padding: '5px' }">
<!-- 设施 -->
<el-table-column prop="device" label="设施" align="center" width="170">
<template #header>
<span><i style="color: red">*</i>设施</span>
</template>
<template #default="scope">
<el-input v-model="scope.row.device" placeholder="请输入" />
</template>
</el-table-column>
<!-- 药品 -->
<el-table-column prop="drug" label="药品" align="center" width="170">
<template #header>
<span><i style="color: red">*</i>药品</span>
</template>
<template #default="scope">
<el-input v-model="scope.row.drug" placeholder="请输入" />
</template>
</el-table-column>
<!-- 剂量 -->
<el-table-column prop="dose" label="剂量(kg)" align="center" width="170">
<template #header>
<span><i style="color: red">*</i>剂量(kg)</span>
</template>
<template #default="scope">
<el-input-number
controls-position="right"
v-model.number="scope.row.dose"
placeholder="请输入"
/>
</template>
</el-table-column>
<!-- 加药人 -->
<el-table-column prop="dosingMan" label="加药人" align="center" width="170">
<template #header>
<span><i style="color: red">*</i>加药人</span>
</template>
<template #default="scope">
<el-select v-model="scope.row.dosingMan" placeholder="请选择" style="width: 100%">
<el-option
v-for="item in dosingManList"
:key="item.id"
:label="item.name"
:value="item.id"
/>
<template #footer>
<span class="dialog-footer">
<el-button @click="closeDialog">取 消</el-button>
<el-button type="primary" @click="submit">确 定</el-button>
</span>
</template>
</el-dialog>
<el-option />
</el-select>
</template>
</el-table-column>
<!-- 加药时间 -->
<el-table-column prop="dosingTime" label="加药时间" align="center" width="210">
<template #header>
<span><i style="color: red">*</i>加药时间</span>
</template>
<template #default="scope">
<el-date-picker
v-model="scope.row.dosingTime"
format="YYYY-MM-DD HH:mm:ss"
value-format="YYYY-MM-DD HH:mm:ss"
type="datetime"
placeholder="选择时间"
style="width: 100%"
/>
</template>
</el-table-column>
<!-- 备注（输入框） -->
<el-table-column prop="memo" label="备注" align="center">
<template #default="scope">
<el-input v-model="scope.row.memo" placeholder="请输入备注" />
</template>
</el-table-column>
</el-table>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="closeDialog">取 消</el-button>
<el-button type="primary" @click="submit">确 定</el-button>
</span>
</template>
</el-dialog>
</template>
<script>
export default {
props: {
showDialog: {
type: Boolean,
default: false,
},
moldAddMore: {
type: Boolean,
default: false,
},
dosingManList: {
type: Array,
default: () => [] // 默认空数组
}
props: {
showDialog: {
type: Boolean,
default: false,
},
moldAddMore: {
type: Boolean,
default: false,
},
dosingManList: {
type: Array,
default: () => [],
},
},
data() {
return {
openShow: false,
tableData: [],
// 统一校验规则：支持数组项校验
formRules: {
// 表格整体校验：至少一行数据
tableData: [
{
required: true,
message: '请至少添加一行数据',
trigger: 'submit',
type: 'array',
},
],
// 设施校验
device: [{ required: true, message: '请输入设施名称', trigger: ['blur', 'submit'] }],
// 药品校验
drug: [{ required: true, message: '请输入药品名称', trigger: ['blur', 'submit'] }],
// 剂量校验：必填 + 数字 + 大于0
dose: [{ required: true, message: '请输入剂量', trigger: ['blur', 'submit'] }],
// 加药人校验
dosingMan: [{ required: true, message: '请选择加药人', trigger: ['change', 'submit'] }],
// 加药时间校验
dosingTime: [{ required: true, message: '请选择加药时间', trigger: ['change', 'submit'] }],
},
};
},
watch: {
// 监听父组件传入的显示状态，同步更新弹窗
showDialog: {
handler(newVal) {
this.openShow = newVal;
},
immediate: true,
},
data() {
return {
openShow: false,
tableData: [
// 初始化一行空数据
{
device: null,
dosingTime: null,
dosingMan: null,
drug: null,
dose: null,
memo: '',
},
],
};
},
methods: {
show() {
this.openShow = true;
this.tableData = [];
},
watch: {
// 监听父组件传入的显示状态，同步更新弹窗
showDialog: {
handler(newVal) {
this.openShow = newVal;
},
immediate: true
},
closeDialog() {
this.openShow = false;
this.$emit('closeDialog');
// 重置表单
// this.form.tableData = [];
this.formError = '';
this.$refs.tableForm?.resetFields();
},
methods: {
closeDialog() {
this.openShow = false;
this.$emit('closeDialog');
},
// 插入一行
addTable() {
this.tableData.push({
device: null,
dosingTime: null,
dosingMan: null,
drug: null,
dose: null,
memo: '',
});
},
// 删除行
delTable() {
if (this.tableData.length <= 1) {
this.$message.warning('至少保留一行数据');
return;
}
this.tableData.pop(); // 删除最后一行
},
// 提交数据
submit() {
const isValid = this.tableData.every(row => {
// 检查所有必填项
if (!row.device || !row.dosingTime || !row.dosingMan || !row.drug || !row.dose) {
// 指明具体缺少的字段
const missingFields = [];
if (!row.device) missingFields.push("设施");
if (!row.dosingTime) missingFields.push("加药时间");
if (!row.dosingMan) missingFields.push("加药人");
if (!row.drug) missingFields.push("药品");
if (!row.dose) missingFields.push("剂量(kg)");
this.$message.error(`请完善必填项: ${missingFields.join(", ")}`);
return false;
}
return true;
});
if (isValid) {
const submitData = this.tableData.map(row => ({
...row,
dorType: 1
}));
// 如果所有必填项都填写了，则进行提交操作
this.$emit("submitData", submitData); // 通知父组件刷新表格数据
}
},
// 插入一行
addTable() {
this.tableData.push({});
},
// 删除行
delTable() {
this.tableData.pop();
},
// 提交数据
submit() {
const isValid = this.tableData.every(row => {
// 检查所有必填项
if (!row.device || !row.drug || !row.dose || !row.dosingTime || !row.dosingMan) {
// 指明具体缺少的字段
const missingFields = [];
if (!row.device) missingFields.push('设施');
if (!row.drug) missingFields.push('药品');
if (!row.dose) missingFields.push('剂量(kg)');
if (!row.dosingTime) missingFields.push('加药时间');
if (!row.dosingMan) missingFields.push('加药人');
this.$message.error(`请完善必填项: ${missingFields.join(', ')}`);
return false;
}
return true;
});
if (isValid) {
const submitData = this.tableData.map(row => ({
...row,
dorType: 1,
}));
// 如果所有必填项都填写了，则进行提交操作
this.$emit('submitData', submitData); // 通知父组件刷新表格数据
this.closeDialog();
}
},
},
};
</script>
<style lang="scss" scoped></style>
</script>
Write Preview
Loading…
Cancel
Save