3列弹出框
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user