封装公共form表单

增加详情备用显示样式-描述列表
封装公共table组件

src/views/big/device/components/Wdescriptions.vue

@@ -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>

src/views/big/device/components/Wform.vue

@@ -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>

src/views/big/device/components/Wtable.vue

@@ -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>

src/views/big/device/components/devInfo.vue

@@ -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>
+      <h2>{{ prop.title }}</h2>
-        <span>设备详情 </span>
+      <span>设备详情 </span>
     </div>
-    <div  class="info-body">
+    <div class="info-body">
-    <el-tabs v-model="activeinfo" class="demo-tabs" @tab-click="handleClick">
+      <el-tabs v-model="activeinfo" class="demo-tabs" @tab-click="handleClick">
-    <el-tab-pane label="详情" name="info">
+        <el-tab-pane label="详情" name="info">
-        <div style="margin: 0 20px;">
+          <div style="margin: 0 20px">
             <Wform :config="formconfig" :data="formdata"></Wform>
-        </div>
+            <!-- <Wdescriptions :data="descriptionsData"></Wdescriptions> -->
-        
+          </div>
-    </el-tab-pane>
+        </el-tab-pane>
-    <el-tab-pane label="属性" name="attribute">User</el-tab-pane>
+        <el-tab-pane label="属性" name="attribute">
-    <el-tab-pane label="最新遥测数据" name="newDAata">Role</el-tab-pane>
+          <el-row style=" margin-bottom: 10px;">
-    <el-tab-pane label="pdf" name="pdf">Task</el-tab-pane>
+            <el-col :span="20"></el-col>
-    </el-tabs>
+            <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 { ref } from "vue";
-import Wform from "./Wform.vue"
+import Wform from "./Wform.vue";
-import type { TabsPaneContext } from 'element-plus'
+import Wdescriptions from "./Wdescriptions.vue";
-
+import Wtable from "./Wtable.vue";
-const activeinfo=ref('info')
+import type { TabsPaneContext } from "element-plus";
+import {
+    Refresh,
+} from '@element-plus/icons-vue'
+const activeinfo = ref("info");
 const prop = defineProps({
-    visible: {
+  visible: {
-        type: Boolean,
+    type: Boolean,
-        default: false,
+    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 {
-.info-header{
+  width: 100%;
-    width: 100%;
+  height: 130px;
-    height: 130px;
+  background-color: #409eff;
-    background-color: #409EFF;
+  color: #fff;
-    color: #fff;
+  padding-left: 20px;
-    padding-left: 20px;
+  padding-top: 10px;
-    padding-top: 10px;
+  display: flex;
-    display: flex;
+  flex-direction: column;
-    flex-direction: column;
+  align-items: flex-start;
-    align-items: flex-start;
+  justify-content: center;
-    justify-content: center;
+  & h2 {
-    & h2{
+    margin: 0;
-        margin: 0;
+    font-size: 30px;
-        font-size: 30px;
+    font-weight: 600;
-        font-weight: 600;
+  }
-    }
 }
-:deep(.el-tabs__nav){
+:deep(.el-tabs__nav) {
-    margin-left: 20px;
+  margin-left: 20px;
 }
-</style>
+</style>