3列弹出框

This commit is contained in:
sjl
2024-12-05 16:23:20 +08:00
parent 0494822ff4
commit 11c32ed360
10 changed files with 138 additions and 459 deletions

View File

@@ -12,8 +12,8 @@
class="custom-table"
>
<el-table-column label="被测量">
<el-table-column prop="col1"/>
<el-table-column prop="col2"/>
<el-table-column prop="col1" width="120"/>
<el-table-column prop="col2" width="100"/>
</el-table-column>
<el-table-column prop="deviceLevel" label="检测装置级别" />
<el-table-column prop="measurementType" label="测量类型" />
@@ -27,13 +27,12 @@
</template>
<script lang="ts" setup name="IndicatorTypeDialog">
import { defineProps, defineEmits, reactive,watch,ref,computed } from 'vue';
import { defineProps, defineEmits, reactive,watch,ref,computed, type CSSProperties } from 'vue';
import { dialogBig} from '@/utils/elementBind'
import type { ColumnProps } from '@/components/ProTable/interface'
import type { ErrorSystem } from '@/api/device/interface/error'
import errorDataList from '@/api/device/error/errorData'
import type { TableColumnCtx } from 'element-plus'
import { da } from 'element-plus/es/locale';
const errorData = errorDataList.errordetail
const dialogTitle = ref()
@@ -61,16 +60,17 @@ interface SpanMethodProps {
columnIndex: number
}
const rowClass = ({row, column, rowIndex, columnIndex}) => {
let res = {
textAlign: 'center', backgroundColor: '#003078', color: '#fff'
}
if (rowIndex === 1) {
res = {...res, display: 'none'}
return res
}
return res
}
const rowClass = ({ row, column, rowIndex, columnIndex }: { row: any; column: any; rowIndex: number; columnIndex: number }): CSSProperties => {
let res: CSSProperties = {
textAlign: 'center' as CSSProperties['textAlign'],
backgroundColor: '#003078',
color: '#fff'
}
if (rowIndex === 1) {
res = { ...res, display: 'none' }
}
return res
}
const spanMethod = ({
row,
@@ -80,8 +80,8 @@ const spanMethod = ({
}: SpanMethodProps) => {
if (columnIndex === 0 ) { // 检查是否为第一列
if (rowIndex === 2 ||rowIndex === 21) { // 检查是否为第三行
if (rowIndex === 2||rowIndex === 5 ||rowIndex === 21||rowIndex === 23) { // 检查是否为第三行
return {
rowspan: 2, // 合并行数
colspan: 1, // 单元格列数
@@ -98,17 +98,19 @@ const spanMethod = ({
colspan: 1,
};
}
else if (rowIndex === 3 || rowIndex === 9 || rowIndex === 10|| rowIndex === 11
else if (rowIndex === 3 ||rowIndex === 6 ||rowIndex === 9 || rowIndex === 10|| rowIndex === 11
|| rowIndex === 12|| rowIndex === 13|| rowIndex === 14|| rowIndex === 15
|| rowIndex === 17 || rowIndex === 18|| rowIndex === 19
|| rowIndex === 22) { // 检查是否为第四行
|| rowIndex === 22 ||rowIndex === 24) { // 检查是否为第四行
return {
rowspan: 0, // 不显示该单元格
colspan: 0,
};
}
}
if (columnIndex === 1 || columnIndex === 2){
if (rowIndex === 2
|| rowIndex === 8|| rowIndex === 10|| rowIndex === 12|| rowIndex === 14
|| rowIndex === 16|| rowIndex === 18
@@ -127,17 +129,6 @@ const spanMethod = ({
colspan: 0,
};
}
// if (rowIndex === 0 ) {
// return {
// rowspan: 25,
// colspan: 1,
// };
// } else if (rowIndex != 0) { // 检查是否为第四行
// return {
// rowspan: 0, // 不显示该单元格
// colspan: 0,
// };
// }
}
};

View File

@@ -221,6 +221,7 @@ const deleteSelectedRows = () => {
display: flex;
justify-content: flex-start;
margin-bottom: 10px; /* 调整这里的值以增加或减少间距 */
margin-top: 10px;
}
.el-table th, .el-table td {

View File

@@ -2,53 +2,40 @@
<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="150">
<el-input v-model='formContent.name' placeholder="标准号+年份+设备等级"/>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="参照标准名称" prop="standardName" :label-width="150">
<el-input v-model='formContent.standardName'/>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="发布时间" prop="standardTime" :label-width="150">
<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="150">
<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="150">
<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>
<div >
<el-form :model="formContent" ref='dialogFormRef' :rules='rules' label-width="auto" class="form-three">
<el-form-item label="误差体系名称" prop="name" >
<el-input v-model='formContent.name' placeholder="标准号+年份+设备等级"/>
</el-form-item>
<el-form-item label="参照标准名称" prop="standardName" >
<el-input v-model='formContent.standardName'/>
</el-form-item>
<el-form-item label="发布时间" prop="standardTime" >
<el-input v-model="formContent.standardTime" />
</el-form-item>
<el-form-item label="适用设备等级" prop="devLevel" >
<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-form-item label="状态" prop="enable" >
<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-form>
</div>
</el-tab-pane>
</el-tabs>
<ErrorSystemDetailTable :tableData="tableData" @updateTableData="handleTableDataUpdate"/>
<ErrorSystemDetailTable :tableData="tableData" @updateTableData="handleTableDataUpdate" />
<template #footer>
<div >
<el-button @click='close()'> </el-button>
@@ -184,22 +171,6 @@ const props = defineProps<{
}>()
</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>