误差体系
This commit is contained in:
sjl
@@ -1,386 +0,0 @@
|
||||
<template>
|
||||
<el-dialog :title="dialogTitle" :model-value="visible" @close="handleCancel" v-bind="dialogBig">
|
||||
<el-tabs type="border-card">
|
||||
<el-tab-pane label="基础信息">
|
||||
<div class="form-grid">
|
||||
<el-form :model="formData" ref='formRuleRef' :rules='rules'>
|
||||
<el-row :gutter="120" >
|
||||
<el-col :span="9">
|
||||
<el-form-item label="误差体系名称" prop="name">
|
||||
<el-input v-model='formData.name' placeholder="标准号+年份+设备等级"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="参照标准名称" prop="standard_Name">
|
||||
<el-input v-model='formData.standard_Name'/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="7">
|
||||
<el-form-item label="发布时间" prop="standard_Time">
|
||||
<el-input v-model="formData.standard_Time" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="120" >
|
||||
<el-col :span="9">
|
||||
<el-form-item label="适用设备等级" prop="dev_Level">
|
||||
<el-select v-model='formData.dev_Level' placeholder="请选择设备等级">
|
||||
<el-option
|
||||
v-for="item in dictStore.getDictData('errorLevel')"
|
||||
:key="item.id"
|
||||
:label="item.label"
|
||||
:value="item.code"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="8">
|
||||
<el-form-item label="状态" prop="enable">
|
||||
<el-select v-model='formData.enable' placeholder="请选择状态">
|
||||
<el-option
|
||||
v-for="item in dictStore.getDictData('status')"
|
||||
:key="item.id"
|
||||
:label="item.label"
|
||||
:value="item.code"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
<div class="dialog-footer">
|
||||
<el-button :icon='CirclePlus' type="primary" @click="openAddDialog">新增</el-button>
|
||||
<el-button :icon='Delete' type="danger" plain :disabled='!multipleSelection.length' @click="deleteSelectedRows">批量删除</el-button>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="table-container">
|
||||
<el-table :data="tableData" :header-cell-style="{ textAlign: 'center' } " :cell-style="{ textAlign: 'center' }" style="width: 100%" @selection-change="handleSelectionChange" >
|
||||
<el-table-column type="selection" width="55" />
|
||||
<el-table-column prop="id" label="序号" width="60" />
|
||||
<el-table-column prop="type" label="电能质量检测指标类型" width="181">
|
||||
<template #default="{ row }">
|
||||
<el-select v-model="row.type" placeholder="选择指标类型">
|
||||
<el-option v-for="option in typeList" :key="option.value" :label="option.label" :value="option.value"/>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="起止范围" >
|
||||
<el-table-column label="起始">
|
||||
<template #default="{ row }">
|
||||
<el-row type="flex">
|
||||
<el-col :span="14">
|
||||
<el-select v-model="row.startSelect" placeholder="选择起始值" style="width: 70px;">
|
||||
<el-option v-for="option in errorStartOptions" :key="option.value" :label="option.label" :value="option.value"/>
|
||||
</el-select>
|
||||
</el-col>
|
||||
<el-col :span="10">
|
||||
<el-input v-model= "row.startRange" style="width: 70px;"
|
||||
/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="结束">
|
||||
<template #default="{ row }">
|
||||
<el-row type="flex" >
|
||||
<el-col :span="14">
|
||||
<el-select v-model="row.endSelect" placeholder="选择结束值" style="width: 70px;">
|
||||
<el-option v-for="option in errorEndOptions" :key="option.value" :label="option.label" :value="option.value"/>
|
||||
</el-select>
|
||||
</el-col>
|
||||
<el-col :span="10">
|
||||
<el-input v-model= "row.endRange" style="width: 70px;"/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="单位" width="115">
|
||||
<template #default="{ row }">
|
||||
<el-select v-model="row.unit" placeholder="选择单位">
|
||||
<el-option
|
||||
v-for="option in errorUnitOptions"
|
||||
:key="option.value"
|
||||
:label="option.label"
|
||||
:value="option.value"
|
||||
/>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table-column>
|
||||
<el-table-column label="最大误差">
|
||||
<el-table-column prop="maxErrorValue" label="最大误差值" width="100">
|
||||
<template #default="{ row }">
|
||||
<el-input v-model= "row.startRange" style="width: 70px;"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="误差类型">
|
||||
<template #default="{ row }">
|
||||
<el-select v-model="row.errorType" placeholder="选择误差类型">
|
||||
<el-option
|
||||
v-for="option in errorTypeOptions"
|
||||
:key="option.value"
|
||||
:label="option.label"
|
||||
:value="option.value"
|
||||
/>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="150">
|
||||
<template #default="{ row }">
|
||||
<el-button type="primary" link :icon='CopyDocument' @click="copyRow(row)">复制</el-button>
|
||||
<el-button type='primary' link :icon='Delete' @click="deleteRow(row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<div >
|
||||
<el-button @click="handleCancel">取 消</el-button>
|
||||
<el-button type="primary" @click="handleSubmit">保存</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup name="ErrorSystemDialog">
|
||||
import{ElMessage, FormInstance,FormItemRule}from'element-plus'
|
||||
import { defineProps, defineEmits, reactive,watch,ref, Ref } from 'vue';
|
||||
import { dialogBig,dialogMiddle} from '@/utils/elementBind'
|
||||
//import IndicatorTypeDialog from "@/views/machine/errorSystem/components/IndicatorTypeDialog.vue"; // 导入子组件
|
||||
import {CirclePlus, Delete, EditPen,FolderOpened,CopyDocument} from '@element-plus/icons-vue'
|
||||
import { useDictStore } from '@/stores/modules/dict'
|
||||
const dictStore = useDictStore()
|
||||
const props = defineProps<{
|
||||
visible: boolean;
|
||||
dialogTitle: string;
|
||||
|
||||
formData: {
|
||||
id: string;//误差体系表Id
|
||||
name: string;//误差体系名称
|
||||
standard_Name:string;//参照标准名称
|
||||
standard_Time:string;//标准推行时间
|
||||
dev_Level:string;//使用设备等级
|
||||
enable:number;//状态：0-不启用 1-启用
|
||||
state:number;//0-删除 1-正常
|
||||
};
|
||||
}>();
|
||||
|
||||
|
||||
// 定义规则
|
||||
const formRuleRef = ref<FormInstance>()
|
||||
const rules: Ref<Record<string, Array<FormItemRule>>> = ref({
|
||||
name: [{ required: true, message: '误差体系名称必填！', trigger: 'blur' }],
|
||||
standard_Name: [{ required: true, message: '参照标准名称必填！', trigger: 'blur' }],
|
||||
standard_Time: [{ required: true, message: '标准推行时间必填！', trigger: 'blur' }],
|
||||
dev_Level:[{ required: true, message: '请选择一项设备等级', trigger: 'change' },],
|
||||
enable:[{ required: true, message: '请选择一项状态', trigger: 'change '},]
|
||||
});
|
||||
|
||||
|
||||
let multipleSelection = ref<number[]>([])
|
||||
const errorTypeOptions = [
|
||||
{ label: '绝对值-标称值', value: 'type1' },
|
||||
{ label: '相对值-I类', value: 'type2' },
|
||||
{ label: '相对值-II类', value: 'type3' },
|
||||
{ label: '绝对值-值类型', value: 'type4' },
|
||||
];
|
||||
|
||||
const errorUnitOptions = [
|
||||
{ label: '标称值', value: 'type1' },
|
||||
{ label: '值', value: 'type2' },
|
||||
{ label: '无', value: 'type3' },
|
||||
];
|
||||
|
||||
const errorStartOptions = [
|
||||
{ label: '>', value: 'type1' },
|
||||
{ label: '>=', value: 'type2' },
|
||||
{ label: '无', value: 'type3' },
|
||||
];
|
||||
|
||||
const errorEndOptions = [
|
||||
{ label: '<', value: 'type1' },
|
||||
{ label: '<=', value: 'type2' },
|
||||
{ label: '无', value: 'type3' },
|
||||
];
|
||||
const typeList = [
|
||||
{ label: '电压', value: '电压' },
|
||||
{ label: '频率', value: '频率' },
|
||||
{ label: '电压三相不平衡度', value: '电压三相不平衡度' },
|
||||
{ label: '电流三相不平衡度', value: '电流三相不平衡度' },
|
||||
{ label: '电压波动', value: '电压波动' },
|
||||
{ label: '短时闪变', value: '短时闪变' },
|
||||
{ label: '谐波电压', value: '谐波电压' },
|
||||
{ label: '谐波电流', value: '谐波电流' },
|
||||
{ label: '谐波相角', value: '谐波相角' },
|
||||
{ label: '谐波功率', value: '谐波功率' },
|
||||
{ label: '间谐波电压', value: '间谐波电压' },
|
||||
{ label: '间谐波电流', value: '间谐波电流' },
|
||||
{ label: '功率', value: '功率' },
|
||||
{ label: '电流', value: '电流' },
|
||||
{ label: '暂态电压幅值', value: '暂态电压幅值' },
|
||||
{ label: '暂态持续时间', value: '暂态持续时间' },
|
||||
];
|
||||
|
||||
|
||||
const tableData = ref([
|
||||
{
|
||||
id: 1,
|
||||
type: '电压',
|
||||
startSelect: 'type1',
|
||||
startRange: '0.1',
|
||||
endSelect: 'type2',
|
||||
endRange: '1.5',
|
||||
unit:'type1',
|
||||
maxErrorValue:'0.001',
|
||||
errorType:'type1'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
type: '电流',
|
||||
startSelect: 'type2',
|
||||
startRange: '0.01',
|
||||
endSelect: 'type1',
|
||||
endRange: '0.05',
|
||||
unit:'type1',
|
||||
maxErrorValue:'0.005',
|
||||
errorType:'type1'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
type: '频率',
|
||||
startSelect: 'type2',
|
||||
startRange: '42.5',
|
||||
endSelect: 'type2',
|
||||
endRange: '57.5',
|
||||
unit:'type1',
|
||||
maxErrorValue:'0.01',
|
||||
errorType:'type4'
|
||||
},
|
||||
|
||||
])
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:visible', value: boolean): void;
|
||||
(e: 'submit', data: any): void;
|
||||
}>();
|
||||
|
||||
const handleCancel = () => {
|
||||
//重置表单内容
|
||||
//取消表单校验状态
|
||||
formRuleRef.value && formRuleRef.value.resetFields()
|
||||
emit('update:visible', false); // 关闭对话框
|
||||
};
|
||||
|
||||
const handleSubmit = () => {
|
||||
//ElMessage.info('业务数据提交')
|
||||
try {
|
||||
formRuleRef.value?.validate((valid: boolean) => {
|
||||
if (valid)
|
||||
{
|
||||
// 将表单数据转为json,发送到后端
|
||||
let confirmFormData = JSON.parse(JSON.stringify(props.formData));
|
||||
// console.log(confirmFormData)
|
||||
emit('submit', props.formData); // 提交表单数据
|
||||
emit('update:visible', false); // 提交后关闭对话框
|
||||
}
|
||||
else
|
||||
{
|
||||
ElMessage.error('表单验证失败！')
|
||||
}
|
||||
})
|
||||
} catch (error) {
|
||||
console.error('验证过程中发生错误', error)
|
||||
}
|
||||
};
|
||||
|
||||
// 当 props.visible 改变时，更新 formData
|
||||
watch(() => props.visible, (newVal) => {
|
||||
if (!newVal) {
|
||||
// 这里可以重置表单数据，如果需要的话
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
//选中
|
||||
// 处理选择变化
|
||||
const handleSelectionChange = (selection: any[]) => {
|
||||
multipleSelection.value = selection.map(row => row.id); // 更新选中的行
|
||||
|
||||
};
|
||||
const openAddDialog = () => {
|
||||
tableData.value.push({
|
||||
id: tableData.value.length + 1,
|
||||
type: '',
|
||||
startSelect: '',
|
||||
startRange: '',
|
||||
endSelect: '',
|
||||
endRange: '',
|
||||
unit:'',
|
||||
maxErrorValue:'',
|
||||
errorType:''
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
const copyRow = (row: any) => {
|
||||
tableData.value.push({ ...row, id: tableData.value.length + 1, });
|
||||
};
|
||||
|
||||
const deleteRow = (row: { id: number; type: string; startSelect: string; startRange: string; endSelect: string; endRange: string; unit: string; maxErrorValue: string; errorType: string; }) => {
|
||||
const index = tableData.value.indexOf(row);
|
||||
if (index !== -1) {
|
||||
tableData.value.splice(index, 1);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
const deleteSelectedRows = () => {
|
||||
tableData.value = tableData.value.filter(row => !multipleSelection.value.includes(row.id));
|
||||
multipleSelection.value = []; // 清空已选择的行
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.form-grid {
|
||||
display: flex;
|
||||
flex-direction: row; /* 横向排列 */
|
||||
flex-wrap: wrap; /* 允许换行 */
|
||||
}
|
||||
.form-grid .el-form-item {
|
||||
flex: 1 1 30%; /* 控件宽度 */
|
||||
margin-right: 20px; /* 控件间距 */
|
||||
}
|
||||
.form-grid .el-form-item:last-child {
|
||||
margin-right: 0; /* 最后一个控件不需要右边距 */
|
||||
}
|
||||
.dialog-footer {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
margin-bottom: 10px; /* 调整这里的值以增加或减少间距 */
|
||||
}
|
||||
.el-tabs {
|
||||
margin-bottom: 20px; /* 添加底部边距 */
|
||||
}
|
||||
|
||||
.el-table th, .el-table td {
|
||||
text-align: center; /* 所有单元格文字居中 */
|
||||
}
|
||||
|
||||
.table-container {
|
||||
max-height: 400px; /* 根据需要调整高度 */
|
||||
overflow-y: auto; /* 允许垂直滚动 */
|
||||
overflow-x: hidden; /* 隐藏水平滚动条 */
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,189 @@
|
||||
<template>
|
||||
<div class="dialog-footer">
|
||||
<el-button :icon='CirclePlus' type="primary" @click="openAddDialog">新增</el-button>
|
||||
<el-button :icon='Delete' type="danger" plain :disabled='!multipleSelection.length' @click="deleteSelectedRows">批量删除</el-button>
|
||||
</div>
|
||||
<div class="table-container">
|
||||
<el-table :data="tableData"
|
||||
:header-cell-style="{ textAlign: 'center',backgroundColor: '#003078',color: '#fff' } "
|
||||
:cell-style="{ textAlign: 'center' }"
|
||||
style="width: 100%"
|
||||
@selection-change="handleSelectionChange" >
|
||||
<el-table-column type="selection" width="55" />
|
||||
<el-table-column prop="nextId" label="序号" width="60" />
|
||||
<el-table-column prop="type" label="电能质量检测指标类型" width="181">
|
||||
<template #default="{ row }">
|
||||
<el-select v-model="row.type" placeholder="选择指标类型" >
|
||||
<el-option v-for="item in dictStore.getDictData('Error_Value_Type')"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"/>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="起止范围" >
|
||||
<el-table-column label="起始">
|
||||
<template #default="{ row }">
|
||||
<el-row type="flex">
|
||||
<el-col :span="14">
|
||||
<el-select v-model="row.startFlag" placeholder="选择起始值" style="width: 70px;">
|
||||
<el-option label="无" :value="2"></el-option>
|
||||
<el-option label=">=" :value="1"></el-option>
|
||||
<el-option label=">" :value="0"></el-option>
|
||||
</el-select>
|
||||
</el-col>
|
||||
<el-col :span="10">
|
||||
<el-input v-model= "row.startValue" style="width: 70px;"
|
||||
/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="结束">
|
||||
<template #default="{ row }">
|
||||
<el-row type="flex" >
|
||||
<el-col :span="14">
|
||||
<el-select v-model="row.endFlag" placeholder="选择结束值" style="width: 70px;">
|
||||
<el-option label="无" :value="2"></el-option>
|
||||
<el-option label="<=" :value="1"></el-option>
|
||||
<el-option label="<" :value="0"></el-option>
|
||||
</el-select>
|
||||
</el-col>
|
||||
<el-col :span="10">
|
||||
<el-input v-model= "row.endValue" style="width: 70px;"/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="单位" width="115">
|
||||
<template #default="{ row }">
|
||||
<el-select v-model="row.conditionType" placeholder="选择单位">
|
||||
<el-option
|
||||
v-for="item in dictStore.getDictData('Condition_Type')"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table-column>
|
||||
<el-table-column label="最大误差">
|
||||
<el-table-column prop="maxErrorValue" label="最大误差值" width="100">
|
||||
<template #default="{ row }">
|
||||
<el-input v-model= "row.maxErrorValue" style="width: 70px;"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="误差类型">
|
||||
<template #default="{ row }">
|
||||
<el-select v-model="row.errorValueType" placeholder="选择误差类型">
|
||||
<el-option
|
||||
v-for="item in dictStore.getDictData('Error_Value_Type')"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="150">
|
||||
<template #default="{ row }">
|
||||
<el-button type="primary" link :icon='CopyDocument' @click="copyRow(row)">复制</el-button>
|
||||
<el-button type='primary' link :icon='Delete' @click="deleteRow(row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { type ErrorSystem } from '@/api/device/interface/error';
|
||||
import { useDictStore, } from '@/stores/modules/dict'
|
||||
import {CirclePlus, Delete, EditPen,CopyDocument} from '@element-plus/icons-vue'
|
||||
import { FormItemRule } from 'element-plus';
|
||||
import { onMounted, type PropType, Ref, ref, watch } from 'vue';
|
||||
import { defineEmits } from 'vue';
|
||||
import ProTable from '@/components/ProTable/index.vue'
|
||||
const emit = defineEmits(['updateTableData']);
|
||||
const multipleSelection = ref<number[]>([])
|
||||
const dictStore = useDictStore()
|
||||
const props = defineProps({
|
||||
tableData: {
|
||||
type: Array as PropType<ErrorSystem.ErrorSystemDetail[]>,
|
||||
default: () => []
|
||||
}
|
||||
});
|
||||
|
||||
// 监听 props.tableData 的变化，确保每次数据变化时都重新设置 nextId
|
||||
watch(() => props.tableData, (newTableData) => {
|
||||
for (let i = 0; i < newTableData.length; i++) {
|
||||
newTableData[i].nextId = i + 1;
|
||||
}
|
||||
}, { immediate: true });
|
||||
|
||||
// 定义规则
|
||||
const rules: Ref<Record<string, Array<FormItemRule>>> = ref({
|
||||
type: [{ required: true, message: '误差体系名称必填！', trigger: 'blur' }],
|
||||
|
||||
});
|
||||
|
||||
//选中
|
||||
const handleSelectionChange = (selection: ErrorSystem.ErrorSystemDetail[]) => {
|
||||
multipleSelection.value = selection.map(row => row.nextId); // 更新选中的行
|
||||
};
|
||||
//新增
|
||||
const openAddDialog = () => {
|
||||
const newRow = {
|
||||
nextId: props.tableData.length + 1,
|
||||
id: '',
|
||||
errorSysId: "",
|
||||
type: "",
|
||||
maxErrorValue: 0,
|
||||
errorValueType: ""
|
||||
};
|
||||
emit('updateTableData', [...props.tableData, newRow]);
|
||||
};
|
||||
|
||||
const copyRow = (row: ErrorSystem.ErrorSystemDetail) => {
|
||||
// 深拷贝行数据
|
||||
const newRow = { ...row };
|
||||
const maxNextId = Math.max(...props.tableData.map(item => item.nextId), 0);
|
||||
newRow.nextId = maxNextId + 1;
|
||||
emit('updateTableData', [...props.tableData, newRow]);
|
||||
};
|
||||
//删除行
|
||||
const deleteRow = (row:ErrorSystem.ErrorSystemDetail) => {
|
||||
const index = props.tableData.indexOf(row);
|
||||
if (index !== -1) {
|
||||
const newTableData = [...props.tableData];
|
||||
newTableData.splice(index, 1);
|
||||
emit('updateTableData', newTableData);
|
||||
}
|
||||
};
|
||||
//批量删除选中行
|
||||
const deleteSelectedRows = () => {
|
||||
const newTableData = props.tableData.filter(row => !multipleSelection.value.includes(row.nextId));
|
||||
multipleSelection.value = []; // 清空已选择的行
|
||||
emit('updateTableData', newTableData);
|
||||
};
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.dialog-footer {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
margin-bottom: 10px; /* 调整这里的值以增加或减少间距 */
|
||||
}
|
||||
|
||||
.el-table th, .el-table td {
|
||||
text-align: center; /* 所有单元格文字居中 */
|
||||
}
|
||||
.table-container {
|
||||
max-height: 400px; /* 根据需要调整高度 */
|
||||
overflow-y: auto; /* 允许垂直滚动 */
|
||||
overflow-x: hidden; /* 隐藏水平滚动条 */
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,204 @@
|
||||
<template>
|
||||
<el-dialog :title="dialogTitle" v-model='dialogVisible' @close="close" v-bind="dialogBig">
|
||||
<el-tabs type="border-card">
|
||||
<el-tab-pane label="基础信息">
|
||||
<div class="form-grid">
|
||||
<el-form :model="formContent" ref='dialogFormRef' :rules='rules'>
|
||||
<el-row :gutter="24" >
|
||||
<el-col :span="8">
|
||||
<el-form-item label="误差体系名称" prop="name" :label-width="110">
|
||||
<el-input v-model='formContent.name' placeholder="标准号+年份+设备等级"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="参照标准名称" prop="standardName" :label-width="110">
|
||||
<el-input v-model='formContent.standardName'/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="发布时间" prop="standardTime" :label-width="110">
|
||||
<el-input v-model="formContent.standardTime" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24" >
|
||||
<el-col :span="8">
|
||||
<el-form-item label="适用设备等级" prop="devLevel" :label-width="110">
|
||||
<el-select v-model='formContent.devLevel' placeholder="请选择设备等级">
|
||||
<el-option
|
||||
v-for="item in dictStore.getDictData('Dev_Level')"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="8">
|
||||
<el-form-item label="状态" prop="enable" :label-width="110">
|
||||
<el-select v-model='formContent.enable' placeholder="请选择状态">
|
||||
<el-option label="启用" :value="1"></el-option>
|
||||
<el-option label="不启用" :value="0"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
<ErrorSystemDetailTable :tableData="tableData" @updateTableData="handleTableDataUpdate"/>
|
||||
<template #footer>
|
||||
<div >
|
||||
<el-button @click='close()'>取 消</el-button>
|
||||
<el-button type="primary" @click='save()'>保存</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup name="ErrorSystemDialog">
|
||||
import{ElMessage, type FormInstance,type FormItemRule}from'element-plus'
|
||||
import { defineProps, defineEmits, reactive,watch,ref, Ref, computed } from 'vue';
|
||||
import { dialogBig} from '@/utils/elementBind'
|
||||
import { addPqErrSys,updatePqErrSys,getPqErrSysListById} from '@/api/device/error/index'
|
||||
import {CirclePlus, Delete, EditPen,FolderOpened,CopyDocument} from '@element-plus/icons-vue'
|
||||
import { useDictStore } from '@/stores/modules/dict'
|
||||
import { type ErrorSystem } from '@/api/device/interface/error';
|
||||
import ErrorSystemDetailTable from '@/views/machine/errorSystem/components/errorSystemDetailTable.vue';
|
||||
// 定义弹出组件元信息
|
||||
const dialogFormRef = ref()
|
||||
const dictStore = useDictStore()
|
||||
const tableData = ref<ErrorSystem.ErrorSystemDetail[]>([]);
|
||||
|
||||
const handleTableDataUpdate = (newTableData: ErrorSystem.ErrorSystemDetail[]) => {
|
||||
tableData.value = newTableData;
|
||||
};
|
||||
|
||||
function useMetaInfo() {
|
||||
const dialogVisible = ref(false)
|
||||
const titleType = ref('add')
|
||||
const formContent = ref<ErrorSystem.ErrorSystemList>({
|
||||
id: '',
|
||||
name: '',
|
||||
standardName: '',
|
||||
standardTime: '',
|
||||
devLevel: '',
|
||||
enable: 1,
|
||||
state:1,
|
||||
pqErrSysDtlsList:[]
|
||||
})
|
||||
return { dialogVisible, titleType, formContent }
|
||||
}
|
||||
|
||||
const { dialogVisible, titleType, formContent } = useMetaInfo()
|
||||
// 清空formContent
|
||||
const resetFormContent = () => {
|
||||
formContent.value = {
|
||||
id: '',
|
||||
name: '',
|
||||
standardName: '',
|
||||
standardTime: '',
|
||||
devLevel: '',
|
||||
enable: 1,
|
||||
state:1,
|
||||
pqErrSysDtlsList:[]
|
||||
}
|
||||
}
|
||||
|
||||
let dialogTitle = computed(() => {
|
||||
return titleType.value === 'add' ? '新增误差体系' : '编辑误差体系'
|
||||
})
|
||||
|
||||
// 定义规则
|
||||
const rules: Ref<Record<string, Array<FormItemRule>>> = ref({
|
||||
name: [{ required: true, message: '误差体系名称必填！', trigger: 'blur' }],
|
||||
standardName: [{ required: true, message: '参照标准名称必填！', trigger: 'blur' }],
|
||||
standardTime: [{ required: true, message: '标准推行时间必填！', trigger: 'blur' }],
|
||||
devLevel:[{ required: true, message: '请选择一项设备等级', trigger: 'change' },],
|
||||
enable:[{ required: true, message: '请选择一项状态', trigger: 'change '},]
|
||||
});
|
||||
|
||||
|
||||
// 关闭弹窗
|
||||
const close = () => {
|
||||
dialogVisible.value = false
|
||||
// 清空dialogForm中的值
|
||||
resetFormContent()
|
||||
// 重置表单
|
||||
dialogFormRef.value?.resetFields()
|
||||
}
|
||||
|
||||
// 保存数据
|
||||
const save = () => {
|
||||
try {
|
||||
dialogFormRef.value?.validate(async (valid: boolean) => {
|
||||
if (valid) {
|
||||
formContent.value.pqErrSysDtlsList = tableData.value
|
||||
if (formContent.value.id) {
|
||||
await updatePqErrSys(formContent.value);
|
||||
ElMessage.success({ message: `${dialogTitle.value}成功！` })
|
||||
} else {
|
||||
await addPqErrSys(formContent.value);
|
||||
ElMessage.success({ message: `${dialogTitle.value}成功！` })
|
||||
}
|
||||
close()
|
||||
// 刷新表格
|
||||
await props.refreshTable!()
|
||||
|
||||
}
|
||||
})
|
||||
} catch (err) {
|
||||
console.error('验证过程中出现错误', err)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 打开弹窗，可能是新增，也可能是编辑
|
||||
const open = async (sign: string, data: ErrorSystem.ErrorSystemList) => {
|
||||
titleType.value = sign
|
||||
dialogVisible.value = true
|
||||
if (data.id) {
|
||||
const result = await getPqErrSysListById(data);
|
||||
if (result && result.data) {
|
||||
formContent.value = result.data as ErrorSystem.ErrorSystemList;
|
||||
|
||||
tableData.value = formContent.value.pqErrSysDtlsList || []
|
||||
}
|
||||
} else {
|
||||
resetFormContent()
|
||||
}
|
||||
// 重置表单
|
||||
dialogFormRef.value?.resetFields()
|
||||
}
|
||||
|
||||
|
||||
// 对外映射
|
||||
defineExpose({ open })
|
||||
const props = defineProps<{
|
||||
refreshTable: (() => Promise<void>) | undefined;
|
||||
}>()
|
||||
</script>
|
||||
<style>
|
||||
.form-grid {
|
||||
display: flex;
|
||||
flex-direction: row; /* 横向排列 */
|
||||
flex-wrap: wrap; /* 允许换行 */
|
||||
}
|
||||
.form-grid .el-form-item {
|
||||
flex: 1 1 30%; /* 控件宽度 */
|
||||
margin-right: 20px; /* 控件间距 */
|
||||
}
|
||||
.form-grid .el-form-item:last-child {
|
||||
margin-right: 0; /* 最后一个控件不需要右边距 */
|
||||
}
|
||||
.el-tabs {
|
||||
margin-bottom: 20px; /* 添加底部边距 */
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
@@ -3,148 +3,93 @@
|
||||
<ProTable
|
||||
ref='proTable'
|
||||
:columns='columns'
|
||||
:data='errorData'
|
||||
type='selection'
|
||||
@selection-change="handleSelectionChange"
|
||||
:request-api='getPqErrSysList'
|
||||
>
|
||||
<!-- 表格 header 按钮 -->
|
||||
<template #tableHeader>
|
||||
<el-button type='primary' :icon='CirclePlus' @click="openAddDialog">新增</el-button>
|
||||
<el-button type='danger' :icon='Delete' plain :disabled='!multipleSelection.length'
|
||||
>
|
||||
批量删除
|
||||
</el-button>
|
||||
<template #tableHeader='scope'>
|
||||
<el-button type='primary' :icon='CirclePlus' @click="openDialog('add')">新增</el-button>
|
||||
<el-button v-auth.device="'delete'" type='danger' :icon='Delete' plain :disabled='!scope.isSelected'
|
||||
@click='batchDelete(scope.selectedListIds)'>
|
||||
批量删除
|
||||
</el-button>
|
||||
</template>
|
||||
<!-- 表格操作 -->
|
||||
<template #operation='scope'>
|
||||
<el-button type='primary' link :icon='View' @click="handleRowClick(scope.row)">查看</el-button>
|
||||
<el-button type='primary' link :icon='EditPen' @click="openEditDialog(scope.row)">编辑</el-button>
|
||||
<el-button type='primary' link :icon='Delete' >删除</el-button>
|
||||
<el-button type='primary' link :icon='View'>查看</el-button>
|
||||
<el-button type='primary' link :icon='EditPen' @click="openDialog('edit', scope.row)">编辑</el-button>
|
||||
<el-button type='primary' link :icon='Delete' @click='handleDelete(scope.row)'>删除</el-button>
|
||||
</template>
|
||||
</ProTable>
|
||||
|
||||
<!-- 新增/编辑误差体系对话框 -->
|
||||
<ErrorSystemDialog
|
||||
:visible="dialogFormVisible"
|
||||
:formData="dialogForm"
|
||||
:dialogTitle="dialogTitle"
|
||||
@update:visible="dialogFormVisible = $event"
|
||||
/>
|
||||
|
||||
<!-- 查看误差体系详细信息 -->
|
||||
<ErrorStandardDialog
|
||||
:visible="detail_dialogFormVisible"
|
||||
:formData="detail_dialogForm"
|
||||
:dialogTitle="detail_dialogTitle"
|
||||
@update:visible="detail_dialogFormVisible = $event"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<ErrorSystemPopup :refresh-table='proTable?.getTableList' ref='errorSystemPopup' />
|
||||
<ErrorStandardPopup :refresh-table='proTable?.getTableList' ref='errorStandardPopup' />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name='useProTable'>
|
||||
import ProTable from '@/components/ProTable/index.vue'
|
||||
import type { ColumnProps } from '@/components/ProTable/interface'
|
||||
import type { ColumnProps, ProTableInstance } from '@/components/ProTable/interface'
|
||||
import { CirclePlus, Delete,EditPen,View} from '@element-plus/icons-vue'
|
||||
import errorDataList from '@/api/device/error/errorData'
|
||||
import { reactive,ref } from 'vue'
|
||||
import { useHandleData } from '@/hooks/useHandleData'
|
||||
import ErrorSystemPopup from '@/views/machine/errorSystem/components/errorSystemPopup.vue'
|
||||
import ErrorStandardPopup from '@/views/machine/errorSystem/components/errorStandardPopup.vue'
|
||||
import type { ErrorSystem } from '@/api/device/interface/error'
|
||||
import ErrorSystemDialog from "@/views/machine/errorSystem/components/ErrorSystemDialog.vue"; // 导入子组件
|
||||
import ErrorStandardDialog from "@/views/machine/errorSystem/components/ErrorStandardDialog.vue"; // 导入子组件
|
||||
import { useDictStore } from '@/stores/modules/dict'
|
||||
import { getPqErrSysList, deletePqErrSys} from '@/api/device/error/index'
|
||||
const dictStore = useDictStore()
|
||||
let multipleSelection = ref<string[]>([])
|
||||
const errorData = errorDataList.errordata
|
||||
const dialogFormVisible = ref(false)
|
||||
const dialogTitle = ref('新增误差体系')
|
||||
const dialogForm = ref<ErrorSystem.ErrorSystemList>({
|
||||
id: '',
|
||||
name: '',
|
||||
standard_Name:'',
|
||||
standard_Time:'',
|
||||
dev_Level:'',
|
||||
enable:1,
|
||||
state:1,
|
||||
});
|
||||
|
||||
|
||||
|
||||
const detail_dialogFormVisible = ref(false)
|
||||
const detail_dialogTitle = ref('Q/GDW 10650.2-2021 误差体系')
|
||||
const detail_dialogForm = ref<ErrorSystem.Error_detail>({
|
||||
measured: '',//被测量
|
||||
deviceLevel: '',//检测装置级别
|
||||
measurementType:'',
|
||||
condition: '',//测量条件
|
||||
maxErrorValue: '',//最大误差
|
||||
});
|
||||
|
||||
// ProTable 实例
|
||||
const proTable = ref<ProTableInstance>()
|
||||
const errorSystemPopup = ref()
|
||||
const errorStandardPopup = ref()
|
||||
// 表格配置项
|
||||
const columns = ref<ColumnProps<ErrorSystem.ErrorSystemList>[]>([
|
||||
{ type: 'selection', fixed: 'left', width: 70 },
|
||||
{
|
||||
prop: 'id',
|
||||
label: '序号',
|
||||
width: 70,
|
||||
},
|
||||
{ type: 'index', fixed: 'left', width: 70, label: '序号' },
|
||||
{
|
||||
prop: 'name',
|
||||
label: '误差体系名称',
|
||||
},
|
||||
{
|
||||
prop: 'standard_Name',
|
||||
prop: 'standardName',
|
||||
label: '参照标准名称',
|
||||
},
|
||||
{
|
||||
prop: 'standard_Time',
|
||||
prop: 'standardTime',
|
||||
label: '标准实施年份',
|
||||
width: 200,
|
||||
search: { el: 'input' },
|
||||
},
|
||||
{
|
||||
prop: 'dev_Level',
|
||||
prop: 'devLevel',
|
||||
label: '适用设备等级',
|
||||
width: 120,
|
||||
enum: dictStore.getDictData('errorLevel'),
|
||||
enum: dictStore.getDictData('Dev_Level'),
|
||||
search: { el: 'select', props: { filterable: true } },
|
||||
fieldNames: { label: 'label', value: 'code' },
|
||||
fieldNames: { label: 'name', value: 'id' },
|
||||
},
|
||||
{ prop: 'operation', label: '操作', fixed: 'right' ,width: 250,},
|
||||
])
|
||||
|
||||
// 打开编辑对话框
|
||||
const openEditDialog = (errorSystem: ErrorSystem.ErrorSystemList) => {
|
||||
errorSystem.standard_Time ='2024'
|
||||
dialogForm.value = {...errorSystem};
|
||||
dialogTitle.value = '编辑误差体系';
|
||||
dialogFormVisible.value = true; // 打开对话框
|
||||
};
|
||||
|
||||
const openAddDialog = () => {
|
||||
dialogForm.value = {
|
||||
id: '',
|
||||
name: '',
|
||||
standard_Name:'',
|
||||
standard_Time:'',
|
||||
dev_Level:'',
|
||||
|
||||
state:0,
|
||||
};
|
||||
dialogTitle.value = '新增误差体系';
|
||||
dialogFormVisible.value = true; // 打开对话框
|
||||
};
|
||||
|
||||
//选中
|
||||
// 处理选择变化
|
||||
const handleSelectionChange = (selection:ErrorSystem.ErrorSystemList[]) => {
|
||||
multipleSelection.value = selection.map(row => row.id); // 更新选中的行
|
||||
|
||||
};
|
||||
|
||||
|
||||
const handleRowClick = (errorSystem: ErrorSystem.ErrorSystemList) =>{
|
||||
detail_dialogTitle.value = errorSystem.name;
|
||||
detail_dialogFormVisible.value = true; // 显示对话框
|
||||
// 打开 drawer(新增、编辑)
|
||||
const openDialog = (titleType: string, row: Partial<ErrorSystem.ErrorSystemList> = {}) => {
|
||||
errorSystemPopup.value?.open(titleType, row)
|
||||
}
|
||||
|
||||
|
||||
// 批量删除设备
|
||||
const batchDelete = async (id: string[]) => {
|
||||
await useHandleData(deletePqErrSys, id, '删除所选误差体系')
|
||||
proTable.value?.clearSelection()
|
||||
proTable.value?.getTableList()
|
||||
}
|
||||
|
||||
// 删除设备
|
||||
const handleDelete = async (params: ErrorSystem.ErrorSystemList) => {
|
||||
await useHandleData(deletePqErrSys, [params.id], `删除【${params.name}】误差体系`)
|
||||
proTable.value?.getTableList()
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
Reference in New Issue
Block a user