3列弹出框
This commit is contained in:
@@ -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,
|
||||
// };
|
||||
// }
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@@ -221,6 +221,7 @@ const deleteSelectedRows = () => {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
margin-bottom: 10px; /* 调整这里的值以增加或减少间距 */
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.el-table th, .el-table td {
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user