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

@@ -3,16 +3,12 @@
<el-tabs type="border-card">
<el-tab-pane label="设备台账信息">
<div >
<el-form :model='formContent' ref='dialogFormRef' :rules='rules' :disabled="false">
<el-form :model='formContent' ref='dialogFormRef' :rules='rules' :disabled="false" label-width="auto" class="form-three">
<el-divider >设备信息</el-divider>
<el-row :gutter="24" >
<el-col :span="8">
<el-form-item label="设备名称" prop="name" :label-width="100">
<el-form-item label="设备名称" prop="name" >
<el-input v-model='formContent.name' placeholder="请输入设备名称"/>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label='设备类型' prop='devType' :label-width="100">
<el-form-item label='设备类型' prop='devType' >
<el-select v-model="formContent.devType" clearable placeholder="请选择设备类型">
<el-option
v-for="item in dictStore.getDictData('Dev_Type')"
@@ -22,9 +18,7 @@
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label='设备模式' prop='pattern' :label-width="100">
<el-form-item label='设备模式' prop='pattern' >
<el-select v-model="formContent.pattern" clearable placeholder="请选择设备模式" disabled>
<el-option
v-for="item in dictStore.getDictData('Pattern')"
@@ -34,13 +28,7 @@
/>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24" >
<el-col :span="8">
<el-form-item label='设备厂家' prop='manufacturer' :label-width="100">
<el-form-item label='设备厂家' prop='manufacturer' >
<el-select v-model="formContent.manufacturer" clearable placeholder="请选择生产厂商">
<el-option
v-for="item in dictStore.getDictData('Dev_Manufacturers')"
@@ -50,40 +38,24 @@
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="出厂日期" prop="createDate" :label-width="100">
<el-form-item label="出厂日期" prop="createDate" >
<el-date-picker
v-model="formContent.createDate"
placeholder="请选择出厂日期"
:disabled-date="disabledDate"
/>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="设备序列号" prop="createId" :label-width="100">
<el-form-item label="设备序列号" prop="createId" >
<el-input v-model="formContent.createId" placeholder="请输入设备序列号"/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24" >
<el-col :span="8">
<el-form-item label="固件版本" prop="hardwareVersion" :label-width="100">
<el-form-item label="固件版本" prop="hardwareVersion" >
<el-input v-model="formContent.hardwareVersion" placeholder="请输入固件版本"/>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="软件版本" prop="softwareVersion" :label-width="100">
<el-form-item label="软件版本" prop="softwareVersion" >
<el-input v-model="formContent.softwareVersion" placeholder="请输入软件版本"/>
</el-form-item>
</el-col>
</el-row>
<el-divider >参数信息</el-divider>
<el-row :gutter="24" >
<el-col :span="8">
<el-form-item label="设备通道数" prop="devChns" :label-width="100">
<el-form-item label="设备通道数" prop="devChns" >
<el-select v-model="formContent.devChns" clearable placeholder="请选择设备通道数">
<el-option
v-for="item in dictStore.getDictData('Dev_Chns')"
@@ -93,9 +65,7 @@
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="额定电压(V)" prop="devVolt" :label-width="100">
<el-form-item label="额定电压(V)" prop="devVolt" >
<el-select v-model="formContent.devVolt" clearable placeholder="请选择额定电压">
<el-option
v-for="item in dictStore.getDictData('Dev_Volt')"
@@ -105,9 +75,7 @@
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="额定电流(A)" prop="devCurr" :label-width="100">
<el-form-item label="额定电流(A)" prop="devCurr" >
<el-select v-model="formContent.devCurr" clearable placeholder="请选择额定电流">
<el-option
v-for="item in dictStore.getDictData('Dev_Curr')"
@@ -117,12 +85,8 @@
/>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24" >
<el-col :span="8">
<el-form-item label='通讯协议' prop='protocol' :label-width="100">
<el-select v-model="formContent.protocol" clearable placeholder="请选择通讯协议" @change="handleEncryptionChange">
<el-form-item label='通讯协议' prop='protocol' >
<el-select v-model="formContent.protocol" clearable placeholder="请选择通讯协议" >
<el-option
v-for="item in dictStore.getDictData('Protocol')"
:key="item.id"
@@ -131,74 +95,43 @@
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="IP地址" prop="ip" :label-width="100">
<el-form-item label="IP地址" prop="ip" >
<IPAddress v-model:value="formContent.ip"/>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="端口号" prop="port" placeholder="请输入端口号" :label-width="100">
<el-form-item label="端口号" prop="port" placeholder="请输入端口号" >
<el-input v-model="formContent.port" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24" >
<el-col :span="8">
<el-form-item label='是否加密' prop='encryptionFlag' :label-width="100">
<!-- <el-select v-model="formContent.encryptionFlag" clearable placeholder="请选择是否加密" @change="handleEncryptionChange">-->
<el-form-item label='是否加密' prop='encryptionFlag' >
<el-select v-model="formContent.encryptionFlag" clearable placeholder="请选择是否加密">
<el-option label="是" :value="1"></el-option>
<el-option label="否" :value="0"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8" v-if="formContent.encryptionFlag">
<el-form-item label='识别码' prop='series' clearable :label-width="100">
<el-form-item label='识别码' prop='series' clearable v-if="formContent.encryptionFlag">
<el-input v-model='formContent.series' placeholder="请输入识别码" show-password/>
</el-form-item>
</el-col>
<el-col :span="8" v-if="formContent.encryptionFlag">
<el-form-item label='密钥' prop='devKey' clearable :label-width="100">
<el-form-item label='密钥' prop='devKey' clearable v-if="formContent.encryptionFlag">
<el-input v-model='formContent.devKey' placeholder="请输入密钥" show-password/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24" v-if="DevIsShow">
<el-col :span="8">
<el-form-item label='样品编号' prop='sampleID' clearable :label-width="100">
<el-form-item label='样品编号' prop='sampleID' clearable v-if="DevIsShow">
<el-input v-model='formContent.sampleID' placeholder="请输入样品编号" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label='送样日期' prop='arrivedDate' :label-width="100">
<el-form-item label='送样日期' prop='arrivedDate' >
<el-date-picker
v-model="formContent.arrivedDate"
placeholder="请选择送样日期"
:disabled-date="disabledDate"
/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24" v-if="MonIsShow">
<el-col :span="8">
<el-form-item label='所属地市' prop='cityName' clearable placeholder="请输入所属地市" :label-width="100">
<el-form-item label='所属地市' prop='cityName' clearable placeholder="请输入所属地市" v-if="MonIsShow">
<el-input v-model='formContent.cityName' />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label='所属供电公司' prop='gDName' clearable placeholder="请输入所属供电公司" :label-width="100">
<el-form-item label='所属供电公司' prop='gDName' clearable placeholder="请输入所属供电公司" v-if="MonIsShow">
<el-input v-model='formContent.gDName' />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label='所属电站' prop='subName' clearable placeholder="请输入所属电站" :label-width="100">
<el-form-item label='所属电站' prop='subName' clearable placeholder="请输入所属电站" v-if="MonIsShow">
<el-input v-model='formContent.subName' />
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
</el-tab-pane>

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>

View File

@@ -1,14 +1,10 @@
<template>
<el-dialog :title="dialogTitle" v-model='dialogVisible' @close="close" v-bind="dialogBig">
<div >
<el-form :model="formContent" ref='dialogFormRef' :rules='rules' :disabled="tableIsDisable">
<el-row :gutter="24">
<!-- <el-col :span="8">-->
<el-form :model="formContent" ref='dialogFormRef' :rules='rules' :disabled="tableIsDisable" label-width="auto" class="form-three">
<!-- <el-form-item label="检测源名称" prop="name" >-->
<!-- <el-input v-model='formContent.name' placeholder="检测源类型+设备类型+数字"/>-->
<!-- </el-form-item>-->
<!-- </el-col>-->
<el-col :span="8">
<el-form-item label="设备类型" prop="devType" >
<el-select v-model='formContent.devType' placeholder="请选择源型号">
<el-option
@@ -19,8 +15,6 @@
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="检测源类型" prop="type">
<el-select v-model='formContent.type' placeholder="请选择检测源类型">
<el-option
@@ -31,8 +25,6 @@
/>
</el-select>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>

View File

@@ -16,7 +16,7 @@
</template>
<!-- 表格操作 -->
<template #operation='scope'>
<el-button type='primary' link :icon='View' @click="openDialog('view', scope.row)">查看</el-button>
<el-button v-auth.testSource="'view'" type='primary' link :icon='View' @click="openDialog('view', scope.row)">查看</el-button>
<el-button v-auth.testSource="'edit'" type='primary' link :icon='EditPen' @click="openDialog('edit', scope.row)">编辑</el-button>
<el-button v-auth.testSource="'delete'" type='primary' link :icon='Delete' @click='handleDelete(scope.row)'>删除</el-button>
</template>