台区管理vue3

src/router/index.js

@@ -2,25 +2,25 @@ import { createRouter, createWebHashHistory } from 'vue-router'
 import Layout from '@/layout'
 
 export const constantRoutes = [{
-    path: '/login',
-    component: () =>
-        import('@/views/login'),
-    hidden: true,
-},
-{
-    path: '/403',
-    name: '403',
-    component: () =>
-        import('@/views/403'),
-    hidden: true,
-},
-{
-    path: '/404',
-    name: '404',
-    component: () =>
-        import('@/views/404'),
-    hidden: true,
-},
+        path: '/login',
+        component: () =>
+            import ('@/views/login'),
+        hidden: true,
+    },
+    {
+        path: '/403',
+        name: '403',
+        component: () =>
+            import ('@/views/403'),
+        hidden: true,
+    },
+    {
+        path: '/404',
+        name: '404',
+        component: () =>
+            import ('@/views/404'),
+        hidden: true,
+    },
 ]
 export const asyncRoutes = [
 
@@ -55,16 +55,16 @@ export const asyncRoutes = [
         },
         component: Layout,
         children: [{
-            meta: {
-                title: '告警管理',
-                icon: 'alarmManage',
-                affix: true,
-            },
-            path: 'index',
-            component: () =>
-                import('@/views/alarmManage/index'),
+                meta: {
+                    title: '告警管理',
+                    icon: 'alarmManage',
+                    affix: true,
+                },
+                path: 'index',
+                component: () =>
+                    import ('@/views/alarmManage/index'),
 
-        },
+            },
 
         ]
     },
@@ -83,44 +83,30 @@ export const asyncRoutes = [
             },
             path: '/siteManage',
             component: () =>
-                import('@/views/siteManage/index'),
+                import ('@/views/siteManage/index'),
             selectLeftMenu: '/alarmManage',
             hidden: true
         }]
     },
 
-
     {
+        path: '/stationManage',
+        redirect: '/stationManage/index',
         meta: {
-            icon: 'stationManage',
             title: '台区管理',
+            icon: 'stationManage',
         },
-        path: '/stationManage',
-        redirect: '/stationManage/index',
         component: Layout,
         children: [{
             meta: {
+                title: '台区管理',
                 icon: 'stationManage',
-                title: '站点列表',
-                activeMenu: '/stationManage/index'
             },
-            path: 'siteList',
+            path: '/stationManage',
             component: () =>
-                import('@/views/stationManage/siteList.vue'),
-            hidden: true,
-        },
-        {
-            meta: {
-                icon: 'stationManage',
-                title: '所有台区',
-                activeMenu: '/stationManage/index'
-            },
-            path: 'index',
-            component: () =>
-                import('@/views/stationManage/index.vue'),
-            hidden: true,
-        }
-        ]
+                import ('@/views/stationManage/index'),
+            hidden: true
+        }]
     },
 
     /**
@@ -137,32 +123,32 @@ export const asyncRoutes = [
         component: Layout,
         redirect: '/deviceManage/powerEquip',
         children: [{
-            meta: { icon: 'powerEquip', title: '设备管理', },
-            path: 'powerEquip',
-            component: () =>
-                import('@/views/deviceManage/powerEquip/index.vue'),
-        },
-        // {
-        //   title: 'index-layout.menu.deviceManage.videoEquip',
-        //   path: 'videoEquip',
-        //   component: () => import('@/views/deviceManage/videoEquip/index.vue'),
-        // },
-        // {
-        //   title: 'index-layout.menu.deviceManage.communicateEquip',
-        //   path: 'communicateEquip',
-        //   component: () => import('@/views/deviceManage/communicateEquip/index.vue'),
-        // },
-        // {
-        //   title: 'index-layout.menu.deviceManage.channelList',
-        //   path: 'channelList',
-        //   component: () => import('@/views/deviceManage/channelList/index.vue'),
-        // },
-        {
-            meta: { icon: 'attribTemplate', title: '属性模板', },
-            path: 'attribTemplate',
-            component: () =>
-                import('@/views/deviceManage/attribTemplate/index.vue'),
-        }
+                meta: { icon: 'powerEquip', title: '设备管理', },
+                path: 'powerEquip',
+                component: () =>
+                    import ('@/views/deviceManage/powerEquip/index.vue'),
+            },
+            // {
+            //   title: 'index-layout.menu.deviceManage.videoEquip',
+            //   path: 'videoEquip',
+            //   component: () => import('@/views/deviceManage/videoEquip/index.vue'),
+            // },
+            // {
+            //   title: 'index-layout.menu.deviceManage.communicateEquip',
+            //   path: 'communicateEquip',
+            //   component: () => import('@/views/deviceManage/communicateEquip/index.vue'),
+            // },
+            // {
+            //   title: 'index-layout.menu.deviceManage.channelList',
+            //   path: 'channelList',
+            //   component: () => import('@/views/deviceManage/channelList/index.vue'),
+            // },
+            {
+                meta: { icon: 'attribTemplate', title: '属性模板', },
+                path: 'attribTemplate',
+                component: () =>
+                    import ('@/views/deviceManage/attribTemplate/index.vue'),
+            }
         ]
     },
 
@@ -181,45 +167,45 @@ export const asyncRoutes = [
         component: Layout,
         redirect: '/dataManage/sameAnalysis',
         children: [{
-            meta: { icon: 'sameAnalysis', title: '同比分析报表', },
-            path: 'sameAnalysis',
-            component: () =>
-                import('@/views/dataManage/sameAnalysis/index.vue'),
-        },
-        {
-            meta: { icon: 'chainAnalysis', title: '环比分析报表', },
-            path: 'chainAnalysis',
-            component: () =>
-                import('@/views/dataManage/chainAnalysis/index.vue'),
-        },
-        {
-            meta: { icon: 'handOpera', title: '手动抄表', },
-            title: 'index-layout.menu.dataManage.handOpera',
-            path: 'handOpera',
-            component: () =>
-                import('@/views/dataManage/handOpera/index.vue'),
-        },
-        {
-            meta: { icon: 'energyReport', title: '用能月报', },
-            title: 'index-layout.menu.dataManage.energyReport',
-            path: 'energyReport',
-            component: () =>
-                import('@/views/dataManage/energyReport/index.vue'),
-        },
-        {
-            meta: { icon: 'demandAnalysis', title: '需量分析', },
-            title: 'index-layout.menu.dataManage.demandAnalysis',
-            path: 'demandAnalysis',
-            component: () =>
-                import('@/views/dataManage/demandAnalysis/index.vue'),
-        },
-        {
-            meta: { icon: 'consumConfig', title: '能耗分析配置', },
-            title: 'index-layout.menu.dataManage.consumConfig',
-            path: 'consumConfig',
-            component: () =>
-                import('@/views/dataManage/consumConfig/index.vue'),
-        }
+                meta: { icon: 'sameAnalysis', title: '同比分析报表', },
+                path: 'sameAnalysis',
+                component: () =>
+                    import ('@/views/dataManage/sameAnalysis/index.vue'),
+            },
+            {
+                meta: { icon: 'chainAnalysis', title: '环比分析报表', },
+                path: 'chainAnalysis',
+                component: () =>
+                    import ('@/views/dataManage/chainAnalysis/index.vue'),
+            },
+            {
+                meta: { icon: 'handOpera', title: '手动抄表', },
+                title: 'index-layout.menu.dataManage.handOpera',
+                path: 'handOpera',
+                component: () =>
+                    import ('@/views/dataManage/handOpera/index.vue'),
+            },
+            {
+                meta: { icon: 'energyReport', title: '用能月报', },
+                title: 'index-layout.menu.dataManage.energyReport',
+                path: 'energyReport',
+                component: () =>
+                    import ('@/views/dataManage/energyReport/index.vue'),
+            },
+            {
+                meta: { icon: 'demandAnalysis', title: '需量分析', },
+                title: 'index-layout.menu.dataManage.demandAnalysis',
+                path: 'demandAnalysis',
+                component: () =>
+                    import ('@/views/dataManage/demandAnalysis/index.vue'),
+            },
+            {
+                meta: { icon: 'consumConfig', title: '能耗分析配置', },
+                title: 'index-layout.menu.dataManage.consumConfig',
+                path: 'consumConfig',
+                component: () =>
+                    import ('@/views/dataManage/consumConfig/index.vue'),
+            }
         ]
     },
 
@@ -236,29 +222,29 @@ export const asyncRoutes = [
         component: Layout,
         redirect: '/powerQuality/harmonicReport',
         children: [{
-            meta: { icon: 'harmonicReport', title: '谐波报表', },
-            path: 'harmonicReport',
-            component: () =>
-                import('@/views/powerQuality/harmonicReport/index.vue'),
-        },
-        {
-            meta: { icon: 'realTimeMonitoring', title: '实时监测', },
-            path: 'realTimeMonitoring',
-            component: () =>
-                import('@/views/powerQuality/realTimeMonitoring/index.vue'),
-        },
-        {
-            meta: { icon: 'asseReport', title: '评估报告', },
-            path: 'asseReport',
-            component: () =>
-                import('@/views/powerQuality/asseReport/index.vue'),
-        },
-        {
-            meta: { icon: 'unbalanceAnalysis', title: '三相不平衡分析', },
-            path: 'unbalanceAnalysis',
-            component: () =>
-                import('@/views/powerQuality/unbalanceAnalysis/index.vue'),
-        },
+                meta: { icon: 'harmonicReport', title: '谐波报表', },
+                path: 'harmonicReport',
+                component: () =>
+                    import ('@/views/powerQuality/harmonicReport/index.vue'),
+            },
+            {
+                meta: { icon: 'realTimeMonitoring', title: '实时监测', },
+                path: 'realTimeMonitoring',
+                component: () =>
+                    import ('@/views/powerQuality/realTimeMonitoring/index.vue'),
+            },
+            {
+                meta: { icon: 'asseReport', title: '评估报告', },
+                path: 'asseReport',
+                component: () =>
+                    import ('@/views/powerQuality/asseReport/index.vue'),
+            },
+            {
+                meta: { icon: 'unbalanceAnalysis', title: '三相不平衡分析', },
+                path: 'unbalanceAnalysis',
+                component: () =>
+                    import ('@/views/powerQuality/unbalanceAnalysis/index.vue'),
+            },
 
         ]
     },
@@ -273,19 +259,19 @@ export const asyncRoutes = [
         meta: { title: '月度报告', icon: 'monthReport', },
         component: Layout,
         children: [{
-            meta: { title: '月度报告', icon: 'monthReport', },
-            path: '/monthReport',
-            component: () =>
-                import('@/views/monthReport/index'),
-            hidden: true
-        },
-        {
-            meta: { title: '月报模板', icon: 'reportModel', },
-            path: '/reportModel',
-            component: () =>
-                import('@/views/monthReport/reportModel'),
-            hidden: true
-        }
+                meta: { title: '月度报告', icon: 'monthReport', },
+                path: '/monthReport',
+                component: () =>
+                    import ('@/views/monthReport/index'),
+                hidden: true
+            },
+            {
+                meta: { title: '月报模板', icon: 'reportModel', },
+                path: '/reportModel',
+                component: () =>
+                    import ('@/views/monthReport/reportModel'),
+                hidden: true
+            }
         ]
     },
 
@@ -299,7 +285,7 @@ export const asyncRoutes = [
             meta: { title: '计划停电', icon: 'planOutage', },
             path: '/planOutage',
             component: () =>
-                import('@/views/planOutage/index'),
+                import ('@/views/planOutage/index'),
             hidden: true
         }],
     },
@@ -319,33 +305,33 @@ export const asyncRoutes = [
         redirect: '/patrolManage/patrolPlan',
         name: 'patrolManage',
         children: [{
-            meta: { title: '巡检计划', icon: 'patrolPlan' },
-            path: 'patrolPlan',
-            name: 'patrolPlan',
-            component: () =>
-                import('@/views/patrolManage/patrolPlan/index.vue'),
-        },
-        {
-            meta: { title: '巡检记录', icon: 'patrolRecord' },
-            path: 'patrolRecord',
-            name: 'patrolRecord',
-            component: () =>
-                import('@/views/patrolManage/patrolRecord/index.vue'),
-        },
-        {
-            meta: { title: '巡检内容', icon: '巡检内容' },
-            path: 'patrolContent',
-            name: 'patrolContent',
-            component: () =>
-                import('@/views/patrolManage/patrolContent/index.vue'),
-        },
-        {
-            meta: { title: '检查条目', icon: '检查条目' },
-            path: 'checkEntries',
-            name: 'checkEntries',
-            component: () =>
-                import('@/views/patrolManage/checkEntries/index.vue'),
-        },
+                meta: { title: '巡检计划', icon: 'patrolPlan' },
+                path: 'patrolPlan',
+                name: 'patrolPlan',
+                component: () =>
+                    import ('@/views/patrolManage/patrolPlan/index.vue'),
+            },
+            {
+                meta: { title: '巡检记录', icon: 'patrolRecord' },
+                path: 'patrolRecord',
+                name: 'patrolRecord',
+                component: () =>
+                    import ('@/views/patrolManage/patrolRecord/index.vue'),
+            },
+            {
+                meta: { title: '巡检内容', icon: '巡检内容' },
+                path: 'patrolContent',
+                name: 'patrolContent',
+                component: () =>
+                    import ('@/views/patrolManage/patrolContent/index.vue'),
+            },
+            {
+                meta: { title: '检查条目', icon: '检查条目' },
+                path: 'checkEntries',
+                name: 'checkEntries',
+                component: () =>
+                    import ('@/views/patrolManage/checkEntries/index.vue'),
+            },
         ]
     },
 
@@ -365,35 +351,35 @@ export const asyncRoutes = [
         redirect: '/operManage/siteAchives',
         name: 'operManage',
         children: [{
-            meta: { title: '现场档案', icon: 'siteAchives', },
-            path: 'siteAchives',
-            component: () =>
-                import('@/views/operManage/siteAchives/index.vue'),
-        },
-        {
-            meta: { title: '缺陷管理', icon: 'defectManage', },
-            path: 'defectManage',
-            component: () =>
-                import('@/views/operManage/defectManage/index.vue'),
-        },
-        {
-            meta: { title: '工单管理', icon: 'workManage', },
-            path: 'workManage',
-            component: () =>
-                import('@/views/operManage/workManage/index.vue'),
-        },
-        {
-            meta: { title: '运维统计', icon: 'operStatistics', },
-            path: 'operStatistics',
-            component: () =>
-                import('@/views/operManage/operStatistics/index.vue'),
-        },
-        {
-            meta: { title: '工作量统计', icon: 'workStatistics', },
-            path: 'workStatistics',
-            component: () =>
-                import('@/views/operManage/workStatistics/index.vue'),
-        },
+                meta: { title: '现场档案', icon: 'siteAchives', },
+                path: 'siteAchives',
+                component: () =>
+                    import ('@/views/operManage/siteAchives/index.vue'),
+            },
+            {
+                meta: { title: '缺陷管理', icon: 'defectManage', },
+                path: 'defectManage',
+                component: () =>
+                    import ('@/views/operManage/defectManage/index.vue'),
+            },
+            {
+                meta: { title: '工单管理', icon: 'workManage', },
+                path: 'workManage',
+                component: () =>
+                    import ('@/views/operManage/workManage/index.vue'),
+            },
+            {
+                meta: { title: '运维统计', icon: 'operStatistics', },
+                path: 'operStatistics',
+                component: () =>
+                    import ('@/views/operManage/operStatistics/index.vue'),
+            },
+            {
+                meta: { title: '工作量统计', icon: 'workStatistics', },
+                path: 'workStatistics',
+                component: () =>
+                    import ('@/views/operManage/workStatistics/index.vue'),
+            },
 
         ]
     },
@@ -409,17 +395,17 @@ export const asyncRoutes = [
         component: Layout,
         redirect: '/systemManage/userManage',
         children: [{
-            meta: { title: '用户管理', icon: 'userManage', },
-            path: 'userManage',
-            component: () =>
-                import('@/views/systemManage/userManage/index.vue'),
-        },
-        {
-            meta: { title: '权限管理', icon: 'rolePermission', },
-            path: 'rolePermission',
-            component: () =>
-                import('@/views/systemManage/rolePermission/index.vue'),
-        },
+                meta: { title: '用户管理', icon: 'userManage', },
+                path: 'userManage',
+                component: () =>
+                    import ('@/views/systemManage/userManage/index.vue'),
+            },
+            {
+                meta: { title: '权限管理', icon: 'rolePermission', },
+                path: 'rolePermission',
+                component: () =>
+                    import ('@/views/systemManage/rolePermission/index.vue'),
+            },
         ]
     },
 
@@ -435,25 +421,25 @@ export const asyncRoutes = [
             icon: 'apps-line',
         },
         children: [{
-            path: 'table',
-            name: 'Table',
-            component: () =>
-                import('@/views/vab/table'),
-            meta: {
-                title: '表格',
-                icon: 'table-2',
+                path: 'table',
+                name: 'Table',
+                component: () =>
+                    import ('@/views/vab/table'),
+                meta: {
+                    title: '表格',
+                    icon: 'table-2',
+                },
             },
-        },
-        {
-            path: 'icon',
-            name: 'Icon',
-            component: () =>
-                import('@/views/vab/icon'),
-            meta: {
-                title: '图标',
-                icon: 'remixicon-line',
+            {
+                path: 'icon',
+                name: 'Icon',
+                component: () =>
+                    import ('@/views/vab/icon'),
+                meta: {
+                    title: '图标',
+                    icon: 'remixicon-line',
+                },
             },
-        },
         ],
     },
 

src/views/stationManage/dialogComponent.vue

@@ -1,32 +1,31 @@
 <template>
-  <transition name="dialog-fade">
+  <div class="parentBlock">
     <el-dialog
-      v-if="showDialog"
       :title="dialogTitle"
-      class="dialog-component"
-      v-model="showDialog"
+      v-model="dialogVisible"
       width="640px"
-      @close="closeDialog(0)"
+      @close="closeDialog()"
+      @open="open"
     >
       <el-form
         ref="formInfo"
-        :model="formInfo"
+        :model="form"
         class="demo-form-inline"
         label-width="100px"
         :rules="rules"
       >
         <el-form-item label="台区名称：" prop="stationName">
-          <el-input v-model="formInfo.stationName"></el-input>
+          <el-input v-model="form.stationName"></el-input>
         </el-form-item>
         <el-form-item label="台区编号：" prop="stationCode">
-          <el-input v-model="formInfo.stationCode"></el-input>
+          <el-input v-model="form.stationCode"></el-input>
         </el-form-item>
         <el-form-item label="台区地址：" prop="stationAddress">
-          <el-input v-model="formInfo.stationAddress"></el-input>
+          <el-input v-model="form.stationAddress"></el-input>
         </el-form-item>
         <el-form-item label="站点列表:" prop="siteList">
           <el-select
-            v-model="formInfo.siteList"
+            v-model="form.siteList"
             multiple
             filterable
             collapse-tags
@@ -37,162 +36,176 @@
               :key="item.value"
               :label="item.label"
               :value="item.value"
-            >
-            </el-option>
+            ></el-option>
           </el-select>
         </el-form-item>
 
         <el-form-item label="已勾选：" prop="pointNum">
-          <el-input v-model="formInfo.pointNum" style="width: 200px"></el-input>
+          <el-input v-model="form.pointNum" style="width: 200px"></el-input>
           个站点
         </el-form-item>
         <el-form-item label="共挂载：" prop="deviceNum">
-          <el-input v-model="formInfo.deviceNum" style="width: 200px"></el-input>
+          <el-input v-model="form.deviceNum" style="width: 200px"></el-input>
           个设备
         </el-form-item>
         <br />
         <br />
         <br />
         <div style="text-align: right">
-          <el-button @click="closeDialog(0)">取消</el-button>
-          <el-button type="primary" @click="submitForm('formInfo')"
-            >保存</el-button
-          >
+          <el-button @click="closeDialog()">取消</el-button>
+          <el-button type="primary" @click="submitForm()">保存</el-button>
         </div>
       </el-form>
     </el-dialog>
-  </transition>
+  </div>
 </template>
 
 <script>
+import { defineComponent, ref, watchEffect } from 'vue'
 
+export default defineComponent({
+  name: 'DialogComponent',
+  emits: ['closeDialog'],
+  props: {
+    flag: Boolean,
+    dialogTitle: String,
+    itemInfo: Object,
+  },
+  setup(props, context) {
+    context
 
+    const dialogVisible = ref(false)
+    const formInfo = ref(null)
 
+    const form = ref([])
 
-export default {
-  name: "DialogComponent",
-  props: {
-    dialogTitle: {
-      type: String,
-      default: "新增",
-    },
-    itemInfo: {
-      type: Object,
-      default: function () {
-        return {};
+    
+    // open(): Dialog弹窗打开之前做的事
+    const open = () => {
+      console.log('')
+      form.value = props.itemInfo.value
+    }
+
+    const options = [
+      {
+        value: '选项1',
+        label: '站点一',
       },
-    },
-  },
-  data() {
-    return {
-      showDialog: false,
-      formInfo: JSON.parse(JSON.stringify(this.itemInfo)),
-      options: [
-        {
-          value: "选项1",
-          label: "站点一",
-        },
-        {
-          value: "选项2",
-          label: "站点二",
-        },
-        {
-          value: "选项3",
-          label: "站点三",
-        },
-        {
-          value: "选项4",
-          label: "站点四",
-        },
-        {
-          value: "选项5",
-          label: "站点五",
-        },
-      ],
+      {
+        value: '选项2',
+        label: '站点二',
+      },
+      {
+        value: '选项3',
+        label: '站点三',
+      },
+      {
+        value: '选项4',
+        label: '站点四',
+      },
+      {
+        value: '选项5',
+        label: '站点五',
+      },
+    ]
+
+    // 关闭弹框
+    const closeDialog = () => {
+      context.emit('closeDialog', false)
+      dialogVisible.value = false
+    }
+
+    watchEffect((fn, options) => {
+      fn, options
+      dialogVisible.value = props.flag
+    })
+
+    const roleValid = (rule, value, callback) => {
+      rule
+      if (value.length === 0) {
+        callback(new Error('角色不能为空'))
+      } else {
+        callback()
+      }
+    }
 
+    // 保存-修改操作
+    const submitForm = () => {
+      console.log(formInfo)
+      formInfo.value.validate((valid) => {
+        if (valid) {
+          // 走保存请求
+          this.$message({
+            message: '操作成功！',
+            type: 'success',
+          })
+          this.closeDialog(1)
+        } else {
+          console.log('error submit!!')
+          return false
+        }
+      })
+    }
+
+    return {
+      closeDialog,
+      dialogVisible,
+      options,
+      roleValid,
+      formInfo,
+      form,
+      open,
+      submitForm,
       rules: {
         stationName: [
           // required  是否为必填项， trigger:表单验证的触发时机，失去焦点进行验证
-          { required: false, message: "请输入台区名称", trigger: "blur" },
+          { required: false, message: '请输入台区名称', trigger: 'blur' },
           {
             min: 3,
             max: 6,
-            message: "用户名长度在 3 到 6 个字符",
-            trigger: "blur",
+            message: '用户名长度在 3 到 6 个字符',
+            trigger: 'blur',
           },
         ],
         stationCode: [
-          { required: true, message: "请输入台区编号", trigger: "blur" },
+          { required: true, message: '请输入台区编号', trigger: 'blur' },
           {
             min: 3,
             max: 6,
-            message: "用户名长度在 3 到 6 个字符",
-            trigger: "blur",
+            message: '用户名长度在 3 到 6 个字符',
+            trigger: 'blur',
           },
         ],
         stationAddress: [
-          { required: true, message: "请输入台区地址", trigger: "blur" },
+          { required: true, message: '请输入台区地址', trigger: 'blur' },
           {
             min: 3,
             max: 6,
-            message: "用户名长度在 3 到 6 个字符",
-            trigger: "blur",
+            message: '用户名长度在 3 到 6 个字符',
+            trigger: 'blur',
           },
         ],
         siteList: [
-          { required: true, message: '请选择站点列表', trigger: 'change'}
-        
+          { required: true, message: '请选择站点列表', trigger: 'change' },
         ],
         pointNum: [
-          { required: true, message: "请输入已选站点个数", trigger: "blur" },
-          { trigger: "blur" },
+          { required: true, message: '请输入已选站点个数', trigger: 'blur' },
+          { trigger: 'blur' },
         ],
         deviceNum: [
-          { required: true, message: "请输入挂载设备个数", trigger: "blur" },
-          { trigger: "blur" },
+          { required: true, message: '请输入挂载设备个数', trigger: 'blur' },
+          { trigger: 'blur' },
         ],
       },
-    };
+    }
   },
-  methods: {
-    roleValid(rule, value, callback) {
-      rule
-      if (value.length === 0) {
-        callback(new Error("角色不能为空"));
-      } else {
-        callback();
-      }
-    },
-
-    // onSelectedDrug(event) {
-    //   this.siteList = event;
-    //   console.log(this.siteList);
-    // },
-    // 保存操作
-    submitForm(formName) {
-      const params = Object.assign(this.formInfo, {});
-      params
-      this.$refs[formName].validate((valid) => {
-        if (valid) {
-          // 走保存请求
-          this.$message({
-            message: "操作成功！",
-            type: "success",
-          });
-          this.closeDialog(1);
-        } else {
-          return false;
-        }
-      });
-    },
-    // 关闭弹框
-    closeDialog(flag) {
-      this.$refs["formInfo"].resetFields();
-      this.showDialog = false;
-      this.$emit("closeDialog", flag);
-    },
+  data() {
+    return {
+      // formInfo: JSON.parse(JSON.stringify(this.itemInfo)),
+    }
   },
-};
+  methods: {},
+})
 </script>
  
 <style scoped lang="scss">

src/views/stationManage/index.vue

@@ -4,7 +4,7 @@
     <div class="mb-20">所有台区</div>
     <div class="filter-container mb-10">
       <div>
-        <div class="filter-item">
+        <div class="filter-item" >
           台区：
           <el-input
             v-model="input"
@@ -85,11 +85,10 @@
 
     <!--弹框组件开始-----------------------start-->
     <dialog-component
-      v-if="showDialog"
-      ref="dialogComponent"
-      :dialog-title="dialogTitle"
-      :item-info="tableItem"
+      :dialogTitle="dialogTitle"
+      :itemInfo="tableItem"
       @closeDialog="closeDialog"
+      :flag="showDialog"
     ></dialog-component>
     <!--弹框组件开始-----------------------end-->
   </div>
@@ -103,7 +102,7 @@ import siteList from './siteList'
 
 export default defineComponent({
   components: { DialogComponent, siteList },
-  setup() {
+  setup(props, context) {
     const input = ref('请输入台区名称')
     const pageShow = ref(true)
     const showDialog = ref(false)
@@ -164,7 +163,7 @@ export default defineComponent({
     const dialogTitle = ref('')
     // 添加操作
 
-    const dialogComponent = ref()
+ 
     const addItem = () => {
       tableItem.value = {
         id: '',
@@ -175,29 +174,20 @@ export default defineComponent({
         done: '',
         guaZai: '',
       }
+
       dialogTitle.value = '新增'
       showDialog.value = true
-
-      console.log(dialogComponent)
-      // dialogComponent.value.showDialog = true
     }
     // 编辑操作
     const editRow = (row) => {
       console.log(row)
-      this.tableItem = row
-      this.dialogTitle = '编辑'
-      this.showDialog = true
-      this.$nextTick(() => {
-        this.$refs['dialogComponent'].showDialog = true
-      })
+      tableItem.value = row
+      dialogTitle.value = '编辑'
+      showDialog.value = true
     }
     // 关闭操作
-    const closeDialog = (flag) => {
-      if (flag) {
-        // 重新刷新表格内容
-        this.fetchData()
-      }
-      this.showDialog = false
+    const closeDialog = () => {
+      showDialog.value = false
     }
 
     //删除操作
@@ -210,7 +200,11 @@ export default defineComponent({
       tableData,
       input,
       pageShow,
+      dialogTitle,
       showDialog,
+      props,
+      context,
+      tableItem,
 
       goSiteList,
       getMsgFormSon,

src/views/stationManage/siteList.vue

@@ -40,20 +40,17 @@
 </template>
 
 <script>
-export default {
-  name: 'SiteList',
-  // computed: {
-  //   ...mapGetters(['name']),
-  // },
-  props: ['pageShow'],
+import { defineComponent, ref} from 'vue'
 
-  data() {
-    return {
-      showDialog: false,
+export default defineComponent({
+   name: 'SiteList',
+    props: ['pageShow'],
 
-      input: '请输入站点名称',
-      tableData: [
-        {
+  setup(props, context) {
+    const showDialog = ref(false)
+    const input = ref('请输入台区名称')
+    const tableData = ref([
+      {
           stationName: '测试站点1',
           stationStatus: '~',
           deviceName: '电力监测设备',
@@ -89,36 +86,34 @@ export default {
           eddl: '12',
           dlfzl: '80%',
         },
-      ],
-    };
-  },
-  methods: {
-    goBack() {
-      this.$emit('func')
+    ])
+
+   const goBack=()=> {
+      context.emit('func')
       // this.$router.replace('/stationManage/index');
-    },
+    }
     // 表头样式设置
-    headClass() {
+   const headClass=()=> {
       return 'background:#FAFAFA;';
-    },
+    }
 
     //自定义列样式
-    cellStyle({ row, column, rowIndex, columnIndex }) {
+    const cellStyle=({ row, column, rowIndex, columnIndex })=> {
       row, column, rowIndex
       if (columnIndex === 1) {
         return `color:#04F21C`;
       } else {
         return '';
       }
-    },
+    }
     //查看
-     handleClick(row) {
+   const  handleClick=(row)=> {
          alert('查看对应站点（页面跳转）')
         console.log(row);
-      },
+      }
 
     // 添加操作
-    addItem() {
+   const addItem=()=> {
       this.tableItem = {
         id: '',
         stationName: '',
@@ -133,10 +128,27 @@ export default {
       this.$nextTick(() => {
         this.$refs['dialogComponent'].showDialog = true;
       });
-    },
+    }
+
+     return {
+      tableData,
+      input,
+      showDialog,
+      // dialogComponent,
+
+
+      headClass,
+      cellStyle,
+      addItem,
+      goBack,
+      handleClick,
+
+    }
+    
   },
-};
+})
 </script>
 
+
 <style lang='scss' scoped>
 </style>