封装公共form表单
增加详情备用显示样式-描述列表 封装公共table组件
This commit is contained in:
15133876896-BGG25
parent
cb2c4cd1ed
commit
db13670743
42
src/views/big/device/components/Wdescriptions.vue
Normal file
42
src/views/big/device/components/Wdescriptions.vue
Normal file
@ -0,0 +1,42 @@
|
||||
<!--
|
||||
* @FilePath: \code\Goats-Cloud-ui\src\views\big\device\components\Wdescriptions.vue
|
||||
* @Author: 王路平
|
||||
* @文件版本: V1.0.0
|
||||
* @Date: 2023-06-28 09:55:31
|
||||
* @Description:
|
||||
*
|
||||
* 版权信息 : 2023 by ${再登软件}, All Rights Reserved.
|
||||
-->
|
||||
<template>
|
||||
<el-descriptions title="" :column="2" border>
|
||||
<el-descriptions-item label="名称:">{{prop.data.name}}</el-descriptions-item>
|
||||
<el-descriptions-item label="设备配置:">{{prop.data.devLabel}}</el-descriptions-item>
|
||||
<el-descriptions-item label="机架号:">{{prop.data.label}}</el-descriptions-item>
|
||||
<el-descriptions-item label="是否网关:">
|
||||
<el-tag size="small" :type="prop.data.iswangguan?'':'danger'">{{prop.data.iswangguan?'是':'否'}}</el-tag>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="说明:"
|
||||
>{{prop.data.remark}}</el-descriptions-item
|
||||
>
|
||||
</el-descriptions>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {ref} from "vue"
|
||||
const prop = defineProps({
|
||||
data:{
|
||||
type:Object,
|
||||
default:{
|
||||
name:'',
|
||||
devLabel:'',
|
||||
label:'',
|
||||
iswangguan:false,
|
||||
remark:''
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" module>
|
||||
|
||||
</style>
|
||||
@ -8,21 +8,27 @@
|
||||
* 版权信息 : 2023 by ${再登软件}, All Rights Reserved.
|
||||
-->
|
||||
<template>
|
||||
<el-form :model="data" :label-position="config.labelPosition">
|
||||
<el-form :model="tempData" :label-position="config.labelPosition">
|
||||
<el-form-item :label="item.label" v-for="item in config.formItem" :key="item.model" :label-width="item.labelWidth">
|
||||
<el-input v-if="item.content.type=='input'" v-model="data[item.content.model]" :readonly="item.content.readonly" :disabled="item.content.disabled"/>
|
||||
<!-- //输入框配置 -->
|
||||
<el-input v-if="item.content.type=='input'" v-model="tempData[item.content.model]" :readonly="item.content.readonly" :disabled="item.content.disabled" :type="item.content.textarea?'textarea':''"/>
|
||||
<!-- 多选框配置 -->
|
||||
<el-checkbox-group v-if="item.content.type=='checkbox'" v-model="tempData[item.content.model]">
|
||||
<el-checkbox :label="checkItem.val" :disabled="checkItem.disabled" v-for="checkItem in item.content.value" :key="checkItem.id"/>
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {ref} from "vue"
|
||||
import {computed, ref} from "vue"
|
||||
const prop = defineProps({
|
||||
config: {
|
||||
type: Object,
|
||||
default: {
|
||||
labelPosition:'top',
|
||||
formItem:[{
|
||||
formItem:[
|
||||
{ //输入框
|
||||
label:'默认',
|
||||
labelWidth:'120px',
|
||||
content:{
|
||||
@ -30,17 +36,41 @@ const prop = defineProps({
|
||||
model:"name",
|
||||
readonly:true,
|
||||
disabled:true,
|
||||
textarea:false
|
||||
}
|
||||
}]
|
||||
},
|
||||
{ //多选框
|
||||
label:'多选',
|
||||
labelWidth:'auto',
|
||||
content:{
|
||||
type:'checkbox',
|
||||
model:"checkbox",
|
||||
value:[{
|
||||
id:1,
|
||||
val:'多选',
|
||||
disabled:true,
|
||||
}]
|
||||
}
|
||||
},]
|
||||
},
|
||||
},
|
||||
data: {
|
||||
type: Object,
|
||||
default: {
|
||||
name:''
|
||||
name:'',
|
||||
checkbox:[]
|
||||
},
|
||||
}
|
||||
})
|
||||
const emit = defineEmits(['update:data'])
|
||||
//实现父子组件数据双向绑定
|
||||
const tempData = computed({
|
||||
get: () => prop.data,
|
||||
set: val => {
|
||||
emit('update:data', val)
|
||||
}
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
100
src/views/big/device/components/Wtable.vue
Normal file
100
src/views/big/device/components/Wtable.vue
Normal file
@ -0,0 +1,100 @@
|
||||
<!--
|
||||
* @FilePath: \code\Goats-Cloud-ui\src\views\big\device\components\Wtable.vue
|
||||
* @Author: 王路平
|
||||
* @文件版本: V1.0.0
|
||||
* @Date: 2023-06-28 10:45:06
|
||||
* @Description:
|
||||
*
|
||||
* 版权信息 : 2023 by ${再登软件}, All Rights Reserved.
|
||||
-->
|
||||
<template>
|
||||
<div style="width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: space-between;">
|
||||
<el-table :data="tableData" style="width: 100%" :height="config.height">
|
||||
<el-table-column
|
||||
:prop="configItem.prop"
|
||||
:label="configItem.label"
|
||||
:width="configItem.width"
|
||||
v-for="configItem in config.column"
|
||||
:key="configItem.prop"
|
||||
/>
|
||||
</el-table>
|
||||
<!-- /没用的div 占位 -->
|
||||
<div style="width: 100%; height: 10px;"></div>
|
||||
<el-pagination
|
||||
v-model:current-page="currentPage.page"
|
||||
v-model:page-size="currentPage.pageSize"
|
||||
:page-sizes="[5, 10, 20, 50]"
|
||||
:small="small"
|
||||
:disabled="disabled"
|
||||
:background="background"
|
||||
layout=" prev, pager, next, sizes"
|
||||
:total="currentPage.total"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from "vue";
|
||||
const prop = defineProps({
|
||||
config: {
|
||||
type: Object,
|
||||
default: {
|
||||
height:800,
|
||||
column: [
|
||||
{
|
||||
//输入框
|
||||
prop: "name",
|
||||
label: "",
|
||||
width: "180",
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
tableData: {
|
||||
type: Array,
|
||||
default: [
|
||||
{
|
||||
name: "",
|
||||
},
|
||||
],
|
||||
},
|
||||
page:{
|
||||
type: Object,
|
||||
default: {
|
||||
page:1,
|
||||
pageSize:5,
|
||||
total:1
|
||||
},
|
||||
}
|
||||
});
|
||||
//实现父子组件数据双向绑定
|
||||
const currentPage = computed({
|
||||
get: () => prop.page,
|
||||
set: val => {
|
||||
emit('update:page', val)
|
||||
},
|
||||
})
|
||||
// //当前页
|
||||
// const currentPage=ref(1)
|
||||
// //每页数据量
|
||||
// const pageSize=ref(10)
|
||||
//小图标显示
|
||||
const small = ref(true)
|
||||
//是否禁用分页
|
||||
const disabled = ref(false)
|
||||
//页码显示背景色
|
||||
const background = ref(false)
|
||||
//改变每页数据量方法
|
||||
const handleSizeChange = (val: number) => {
|
||||
emit('gettabellist')
|
||||
}
|
||||
//改变当前页方法
|
||||
const handleCurrentChange = (val: number) => {
|
||||
emit('gettabellist')
|
||||
}
|
||||
const emit = defineEmits([ 'gettabellist','update:page'])
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
@ -1,128 +1,225 @@
|
||||
<template>
|
||||
<el-drawer :model-value="prop.visible" title="prop.title" :with-header="false" @close="handleClose" class="drawer-class">
|
||||
<el-drawer
|
||||
:model-value="prop.visible"
|
||||
title="prop.title"
|
||||
:with-header="false"
|
||||
@close="handleClose"
|
||||
class="drawer-class"
|
||||
>
|
||||
<div class="info-header">
|
||||
<h2>{{prop.title}}</h2>
|
||||
<span>设备详情 </span>
|
||||
<h2>{{ prop.title }}</h2>
|
||||
<span>设备详情 </span>
|
||||
</div>
|
||||
<div class="info-body">
|
||||
<el-tabs v-model="activeinfo" class="demo-tabs" @tab-click="handleClick">
|
||||
<el-tab-pane label="详情" name="info">
|
||||
<div style="margin: 0 20px;">
|
||||
<div class="info-body">
|
||||
<el-tabs v-model="activeinfo" class="demo-tabs" @tab-click="handleClick">
|
||||
<el-tab-pane label="详情" name="info">
|
||||
<div style="margin: 0 20px">
|
||||
<Wform :config="formconfig" :data="formdata"></Wform>
|
||||
</div>
|
||||
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="属性" name="attribute">User</el-tab-pane>
|
||||
<el-tab-pane label="最新遥测数据" name="newDAata">Role</el-tab-pane>
|
||||
<el-tab-pane label="pdf" name="pdf">Task</el-tab-pane>
|
||||
</el-tabs>
|
||||
<!-- <Wdescriptions :data="descriptionsData"></Wdescriptions> -->
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="属性" name="attribute">
|
||||
<el-row style=" margin-bottom: 10px;">
|
||||
<el-col :span="20"></el-col>
|
||||
<el-col :span="2"><el-button :icon="Refresh" circle @click="researchtable"/></el-col>
|
||||
<el-col :span="2"></el-col>
|
||||
</el-row>
|
||||
<Wtable
|
||||
:config="tableConfig"
|
||||
:tableData="tableData"
|
||||
@gettabellist="getTableList"
|
||||
:page="pageval"
|
||||
></Wtable>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="最新遥测数据" name="newDAata">Role</el-tab-pane>
|
||||
<el-tab-pane label="pdf" name="pdf">Task</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</el-drawer>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {ref} from "vue"
|
||||
import Wform from "./Wform.vue"
|
||||
import type { TabsPaneContext } from 'element-plus'
|
||||
|
||||
const activeinfo=ref('info')
|
||||
import { ref } from "vue";
|
||||
import Wform from "./Wform.vue";
|
||||
import Wdescriptions from "./Wdescriptions.vue";
|
||||
import Wtable from "./Wtable.vue";
|
||||
import type { TabsPaneContext } from "element-plus";
|
||||
import {
|
||||
Refresh,
|
||||
} from '@element-plus/icons-vue'
|
||||
const activeinfo = ref("info");
|
||||
const prop = defineProps({
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: "信息详情",
|
||||
},
|
||||
form: {
|
||||
type: Object,
|
||||
default: {
|
||||
id: "",
|
||||
inspector: "",
|
||||
assemblyGroup: "",
|
||||
electricGroup: "",
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: '信息详情',
|
||||
},
|
||||
form: {
|
||||
type: Object,
|
||||
default: {
|
||||
id: '',
|
||||
inspector: '',
|
||||
assemblyGroup: '',
|
||||
electricGroup: ''
|
||||
},
|
||||
}
|
||||
})
|
||||
const formconfig=ref({
|
||||
labelPosition:'top',
|
||||
formItem:[{
|
||||
label:'名称',
|
||||
labelWidth:'auto',
|
||||
content:{
|
||||
type:'input',
|
||||
model:"name",
|
||||
readonly:true,
|
||||
disabled:true,
|
||||
}
|
||||
},
|
||||
{
|
||||
label:'设备配置',
|
||||
labelWidth:'auto',
|
||||
content:{
|
||||
type:'input',
|
||||
model:"name",
|
||||
readonly:true,
|
||||
disabled:true,
|
||||
}
|
||||
},
|
||||
{
|
||||
label:'机架号',
|
||||
labelWidth:'auto',
|
||||
content:{
|
||||
type:'input',
|
||||
model:"name",
|
||||
readonly:true,
|
||||
disabled:true,
|
||||
}
|
||||
},
|
||||
{
|
||||
label:'说明',
|
||||
labelWidth:'auto',
|
||||
content:{
|
||||
type:'input',
|
||||
model:"name",
|
||||
readonly:true,
|
||||
disabled:true,
|
||||
}
|
||||
}]
|
||||
})
|
||||
const formdata=ref({
|
||||
name:'默认'
|
||||
})
|
||||
const handleClose = () => {
|
||||
//baseFormRef.value.reset()
|
||||
emit('closeDialog')
|
||||
}
|
||||
const handleClick = (tab: TabsPaneContext, event: Event) => {
|
||||
console.log(tab, event)
|
||||
}
|
||||
// 刷新表格事件
|
||||
const emit = defineEmits([ 'closeDialog'])
|
||||
},
|
||||
});
|
||||
|
||||
//表单组件的配置及数据
|
||||
const formconfig = ref({
|
||||
labelPosition: "top",
|
||||
formItem: [
|
||||
{
|
||||
label: "名称",
|
||||
labelWidth: "auto",
|
||||
content: {
|
||||
type: "input",
|
||||
model: "name",
|
||||
readonly: true,
|
||||
disabled: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
label: "设备配置",
|
||||
labelWidth: "auto",
|
||||
content: {
|
||||
type: "input",
|
||||
model: "name",
|
||||
readonly: true,
|
||||
disabled: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
label: "机架号",
|
||||
labelWidth: "auto",
|
||||
content: {
|
||||
type: "input",
|
||||
model: "name",
|
||||
readonly: true,
|
||||
disabled: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
label: "是否网关",
|
||||
labelWidth: "auto",
|
||||
content: {
|
||||
type: "checkbox",
|
||||
model: "checkbox",
|
||||
value: [
|
||||
{
|
||||
id: 1,
|
||||
val: "是否网关",
|
||||
disabled: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
label: "说明",
|
||||
labelWidth: "auto",
|
||||
content: {
|
||||
type: "input",
|
||||
model: "name",
|
||||
readonly: true,
|
||||
disabled: true,
|
||||
textarea: true,
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
const formdata = ref({
|
||||
name: "默认",
|
||||
checkbox: ["是否网关"],
|
||||
});
|
||||
//描述列表数据配置
|
||||
const descriptionsData = ref({
|
||||
name: prop.title,
|
||||
devLabel: "00111",
|
||||
label: "00111",
|
||||
iswangguan: true,
|
||||
remark: "说明",
|
||||
});
|
||||
|
||||
//表格配置及数据
|
||||
const tableConfig = ref({
|
||||
height: 430,
|
||||
column: [
|
||||
{
|
||||
prop: "nowTime",
|
||||
label: "最后更新时间",
|
||||
width: "",
|
||||
},
|
||||
{
|
||||
prop: "keyName",
|
||||
label: "键名",
|
||||
width: "",
|
||||
},
|
||||
{
|
||||
prop: "keyValue",
|
||||
label: "值",
|
||||
width: "",
|
||||
},
|
||||
],
|
||||
});
|
||||
const tableData = ref([
|
||||
{
|
||||
nowTime: "1",
|
||||
keyName: "1",
|
||||
keyValue: "1",
|
||||
},
|
||||
{
|
||||
nowTime: "2",
|
||||
keyName: "2",
|
||||
keyValue: "2",
|
||||
},
|
||||
{
|
||||
nowTime: "3",
|
||||
keyName: "3",
|
||||
keyValue: "3",
|
||||
},
|
||||
]);
|
||||
const pageval=ref({page:1,pageSize:5,total:1})
|
||||
|
||||
const handleClose = () => {
|
||||
//baseFormRef.value.reset()
|
||||
emit("closeDialog");
|
||||
};
|
||||
const handleClick = (tab: TabsPaneContext, event: Event) => {
|
||||
// console.log(tab, event)
|
||||
};
|
||||
const researchtable=()=>{
|
||||
pageval.value.page=1
|
||||
pageval.value.pageSize=5
|
||||
}
|
||||
const getTableList = () => {
|
||||
console.log(pageval.value);
|
||||
};
|
||||
// 刷新表格事件
|
||||
const emit = defineEmits(["closeDialog"]);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.info-header{
|
||||
width: 100%;
|
||||
height: 130px;
|
||||
background-color: #409EFF;
|
||||
color: #fff;
|
||||
padding-left: 20px;
|
||||
padding-top: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
& h2{
|
||||
margin: 0;
|
||||
font-size: 30px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.info-header {
|
||||
width: 100%;
|
||||
height: 130px;
|
||||
background-color: #409eff;
|
||||
color: #fff;
|
||||
padding-left: 20px;
|
||||
padding-top: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
& h2 {
|
||||
margin: 0;
|
||||
font-size: 30px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
:deep(.el-tabs__nav){
|
||||
margin-left: 20px;
|
||||
:deep(.el-tabs__nav) {
|
||||
margin-left: 20px;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user