对接start

src/api/siteManage/index.js

@@ -0,0 +1,19 @@
+import request from '@/utils/request'
+
+//树结构
+export function siteTreeList(params) {
+    return request({
+        url: '/site/sitelist',
+        method: 'GET',
+        params,
+    })
+}
+
+//设备管理-通信设备-修改
+// export function correspondDeviceUpdate(params) {
+//     return request({
+//         url: '/device/correspondDeviceUpdate',
+//         method: 'POST',
+//         data: params,
+//     })
+// }

src/views/siteManage/addGroupCom.vue

@@ -1,22 +1,20 @@
 <template>
-  <transition name="dialog-fade">
     <el-dialog
-      v-if="showDialog"
       :title="dialogTitle"
-      class="add-group-com"
-      v-model="showDialog"
+      v-model="dialogVisible"
       width="400px"
       @close="closeDialog(0)"
+       @open="open"
     >
       <el-form
         ref="formInfo"
-        :model="formInfo"
+        :model="form"
         class="demo-form-inline"
         label-width="100px"
         :rules="rules"
       >
-        <el-form-item label="分组名称：" prop="watchName">
-          <el-input v-model="formInfo.watchName"  ></el-input>
+        <el-form-item label="分组名称：" prop="name">
+          <el-input v-model="form.name"  ></el-input>
         </el-form-item>
       
         <div style="text-align: right">
@@ -26,31 +24,105 @@
         </div>
       </el-form>
     </el-dialog>
-  </transition>
 </template>
 <script>
+import { defineComponent, ref, watchEffect } from 'vue'
 
-export default {
-  name: "AddGroupCom",
+export default defineComponent({
+  name: 'AddGroupCom',
+  emits: ['closeDialog'],
   props: {
-    dialogTitle: {
-      type: String,
-      default: "新建分组",
-    },
-    itemInfo: {
-      type: Object,
-      default: function () {
-        return {};
-      },
-    },
+    flag: Boolean,
+    dialogTitle: String,
+    itemInfo: Object,
   },
-  data() {
+  setup(props, context) {
+    context
+
+    const dialogVisible = ref(false)
+    const formInfo = ref(null)
+
+    const form = ref([])
+
+    
+    // open(): Dialog弹窗打开之前做的事
+    const open = () => {
+      form.value = props.itemInfo.value
+
+    }
+
+    const options = [
+      {
+        value: '选项1',
+        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 {
-       checked: true,
-      showDialog: false,
-      formInfo: JSON.parse(JSON.stringify(this.itemInfo)),
+      closeDialog,
+      dialogVisible,
+      options,
+      roleValid,
+      formInfo,
+      form,
+      open,
+      submitForm,
       rules: {
-        watchName: [
+        name: [
           // required  是否为必填项， trigger:表单验证的触发时机，失去焦点进行验证
           { required: true, message: "请输入分组名称", trigger: "blur" },
           {
@@ -61,49 +133,13 @@ export default {
           },
         ],
       },
-    };
+    }
   },
-  methods: {
-    roleValid(rule, value, callback) {
-      if (value.length === 0) {
-        callback(new Error("不能为空"));
-      } else {
-        callback();
-      }
-    },
 
-    // 保存操作
-    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);
-    },
-  },
-};
+})
 </script>
  
 <style scoped lang="scss">
 
-// .el-form-item {
-//     width: auto!important;
-    
-// }
 
 </style>

src/views/siteManage/addSiteCom copy.vue

@@ -0,0 +1,114 @@
+<template>
+  <transition name="dialog-fade">
+    <el-dialog
+      v-if="showDialog"
+      :title="dialogTitle"
+      class="add-group-com"
+      v-model="showDialog"
+      width="400px"
+      @close="closeDialog(0)"
+    >
+      <el-form
+        ref="formInfo"
+        :model="formInfo"
+        class="demo-form-inline"
+        label-width="100px"
+        :rules="rules"
+      >
+        <el-form-item label="站点名称：" prop="watchName">
+          <el-input v-model="formInfo.watchName"></el-input>
+        </el-form-item>
+         <el-form-item label="站点编号：" prop="watchName">
+          <el-input v-model="formInfo.watchName"></el-input>
+        </el-form-item>
+         <el-form-item label="选择模板：" prop="region">
+            <el-select v-model="formInfo.region" placeholder="请选择">
+              <el-option label="选择模板1" value="1"></el-option>
+              <el-option label="选择模板2" value="2"></el-option>
+            </el-select>
+          </el-form-item>
+      
+        <div style="text-align: right">
+          <el-button type="primary" @click="submitForm('formInfo')"
+            >保存</el-button
+          >
+        </div>
+      </el-form>
+    </el-dialog>
+  </transition>
+</template>
+<script>
+
+export default {
+  name: "AddSiteCom",
+  props: {
+    dialogTitle: {
+      type: String,
+      default: "新建站点",
+    },
+    itemInfo: {
+      type: Object,
+      default: function () {
+        return {};
+      },
+    },
+  },
+  data() {
+    return {
+       checked: true,
+      showDialog: false,
+      formInfo: JSON.parse(JSON.stringify(this.itemInfo)),
+      rules: {
+        watchName: [
+          // required  是否为必填项， trigger:表单验证的触发时机，失去焦点进行验证
+          { required: true, message: "请输入站点名称", trigger: "blur" },
+          {
+            min: 3,
+            max: 6,
+            message: "用户名长度在 3 到 6 个字符",
+            trigger: "blur",
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    roleValid(rule, value, callback) {
+      rule
+      if (value.length === 0) {
+        callback(new Error("不能为空"));
+      } else {
+        callback();
+      }
+    },
+
+    // 保存操作
+    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);
+    },
+  },
+};
+</script>
+ 
+<style scoped lang="scss">
+
+</style>

src/views/siteManage/addSiteCom.vue

@@ -1,28 +1,26 @@
 <template>
-  <transition name="dialog-fade">
     <el-dialog
-      v-if="showDialog"
       :title="dialogTitle"
-      class="add-group-com"
-      v-model="showDialog"
+       v-model="dialogVisible"
       width="400px"
       @close="closeDialog(0)"
+         @open="open"
     >
       <el-form
         ref="formInfo"
-        :model="formInfo"
+        :model="form"
         class="demo-form-inline"
         label-width="100px"
         :rules="rules"
       >
         <el-form-item label="站点名称：" prop="watchName">
-          <el-input v-model="formInfo.watchName"></el-input>
+          <el-input v-model="form.watchName"></el-input>
         </el-form-item>
          <el-form-item label="站点编号：" prop="watchName">
-          <el-input v-model="formInfo.watchName"></el-input>
+          <el-input v-model="form.watchName"></el-input>
         </el-form-item>
          <el-form-item label="选择模板：" prop="region">
-            <el-select v-model="formInfo.region" placeholder="请选择">
+            <el-select v-model="form.region" placeholder="请选择">
               <el-option label="选择模板1" value="1"></el-option>
               <el-option label="选择模板2" value="2"></el-option>
             </el-select>
@@ -35,30 +33,104 @@
         </div>
       </el-form>
     </el-dialog>
-  </transition>
 </template>
 <script>
+import { defineComponent, ref, watchEffect } from 'vue'
 
-export default {
-  name: "AddSiteCom",
+export default defineComponent({
+  name: 'AddSiteCom',
+  emits: ['closeDialog'],
   props: {
-    dialogTitle: {
-      type: String,
-      default: "新建站点",
-    },
-    itemInfo: {
-      type: Object,
-      default: function () {
-        return {};
-      },
-    },
+    flag: Boolean,
+    dialogTitle: String,
+    itemInfo: Object,
   },
-  data() {
+  setup(props, context) {
+    context
+
+    const dialogVisible = ref(false)
+    const formInfo = ref(null)
+
+    const form = ref([])
+
+    
+    // open(): Dialog弹窗打开之前做的事
+    const open = () => {
+      form.value = props.itemInfo.value
+
+    }
+
+    const options = [
+      {
+        value: '选项1',
+        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 {
-       checked: true,
-      showDialog: false,
-      formInfo: JSON.parse(JSON.stringify(this.itemInfo)),
-      rules: {
+      closeDialog,
+      dialogVisible,
+      options,
+      roleValid,
+      formInfo,
+      form,
+      open,
+      submitForm,
+       rules: {
         watchName: [
           // required  是否为必填项， trigger:表单验证的触发时机，失去焦点进行验证
           { required: true, message: "请输入站点名称", trigger: "blur" },
@@ -70,43 +142,10 @@ export default {
           },
         ],
       },
-    };
+    }
   },
-  methods: {
-    roleValid(rule, value, callback) {
-      rule
-      if (value.length === 0) {
-        callback(new Error("不能为空"));
-      } else {
-        callback();
-      }
-    },
 
-    // 保存操作
-    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);
-    },
-  },
-};
+})
 </script>
  
 <style scoped lang="scss">

src/views/siteManage/index orange.vue

@@ -0,0 +1,340 @@
+<template>
+  <div class="app-container page-nesting" style="position: relative">
+    <!-- 树形组件start -->
+    <div class="grid-content treeDom">
+      <div style="text-align: center" class="mb-20">
+        <el-button v-if="this.treeLevel == 3" disabled @click="addGroup()">
+          添加分组
+        </el-button>
+        <el-button type="primary" v-else @click="addGroup()">
+          添加分组
+        </el-button>
+        <el-button v-if="this.treeLevel == 3" disabled @click="addSite()">
+          添加站点
+        </el-button>
+        <el-button type="primary" v-else @click="addSite()">添加站点</el-button>
+      </div>
+      <el-input
+        placeholder="输入关键字进行过滤"
+        v-model="filterText"
+        class="mb-20 searchInput"
+      >
+        <template>
+          <i class="el-icon-search el-input__icon"></i>
+        </template>
+      </el-input>
+
+      <el-tree
+        class="filter-tree siteTree"
+        :data="data"
+        node-key="id"
+        :props="defaultProps"
+        :expand-on-click-node="false"
+        default-expand-all
+        @node-click="handleNodeClick"
+        :filter-node-method="filterNode"
+        ref="tree"
+      >
+        <template #default="{ node, data }">
+          <span
+            class="custom-tree-node"
+            style="width: 100%"
+            @mouseenter="mouseenter(data)"
+            @mouseleave="mouseleave(data)"
+          >
+            <span>{{ node.label }}</span>
+            <span>
+              <a
+                class="deleteLink"
+                v-show="data.show"
+                @click="remove(node, data)"
+              >
+                <i size="mini" class="el-icon-delete"></i>
+              </a>
+            </span>
+          </span>
+        </template>
+      </el-tree>
+    </div>
+    <!-- 树形组件end -->
+
+    <!-- 站点主题start -->
+    <div class="grid-content nestingDom" style="width: calc(100% - 300px);">
+      <el-tabs
+        v-if="this.treeLevel == 3"
+        v-model="activeName"
+        type="card"
+      >
+        <el-tab-pane label="基本信息" name="first">
+          <basic-info class="basicInfo"></basic-info>
+        </el-tab-pane>
+        <el-tab-pane label="监控设备" name="second">
+          <watch-dog
+            v-on:success="success(res)"
+            :avtiveName="activeName"
+            @func="getMsgFormSon"
+          ></watch-dog>
+        </el-tab-pane>
+        <el-tab-pane label="变量列表" name="third">
+          <variable-list :activeName="activeName"></variable-list>
+        </el-tab-pane>
+        <el-tab-pane label="摄像头" name="five">
+          <camera></camera>
+        </el-tab-pane>
+        <el-tab-pane label="电能质量评分配置" name="six">
+          <power-Score></power-Score>
+        </el-tab-pane>
+      </el-tabs>
+
+      <!-- 分组信息start -->
+      <group-info-com
+        v-if="this.treeLevel == 2 || this.treeLevel == 1"
+      ></group-info-com>
+      <!-- 分组信息end -->
+
+      <!-- 新建分组start -->
+      <add-group-com
+        v-if="showDialog"
+        ref="addGroupCom"
+        :dialog-title="dialogTitle"
+        :item-info="tableItem"
+        @closeDialog="closeDialog"
+      ></add-group-com>
+      <!-- 新建分组end -->
+
+      <!-- 新建站点start -->
+      <add-site-com
+        v-if="showDialog"
+        ref="addSiteCom"
+        :dialog-title="dialogTitle"
+        :item-info="tableItem"
+        @closeDialog="closeDialog"
+      ></add-site-com>
+      <!-- 新建站点end -->
+    </div>
+    <!-- 站点主题end -->
+  </div>
+</template>
+
+<script>
+import basicInfo from './basicInfo'
+import WatchDog from './watchDog'
+import variableList from './variableList'
+import camera from './camera'
+import PowerScore from './powerScore'
+
+import groupInfoCom from './groupInfoCom'
+import addGroupCom from './addGroupCom'
+import addSiteCom from './addSiteCom'
+
+export default {
+  components: {
+    basicInfo,
+    WatchDog,
+    variableList,
+    camera,
+    PowerScore,
+    groupInfoCom,
+    addGroupCom,
+    addSiteCom,
+  },
+  data() {
+    return {
+      showDialog: false,
+      treeLevel: 0,
+      activeName: 'first',
+      filterText: '',
+      data: [
+        {
+          label: '所有站点',
+          children: [
+            {
+              label: '分组一',
+              children: [
+                {
+                  label: '站点 1-1',
+                  show: false,
+                },
+                {
+                  label: '站点 1-2',
+                  show: false,
+                },
+                {
+                  label: '站点 1-3',
+                  show: false,
+                },
+                {
+                  label: '站点 1-4',
+                  show: false,
+                },
+              ],
+            },
+            {
+              label: '分组二',
+              children: [
+                {
+                  label: '站点 2-1',
+                  show: false,
+                },
+                {
+                  label: '站点 2-2',
+                  show: false,
+                },
+                {
+                  label: '站点 2-3',
+                  show: false,
+                },
+                {
+                  label: '站点 2-4',
+                  show: false,
+                },
+              ],
+            },
+            {
+              label: '其他分组',
+              children: [
+                {
+                  label: '其他 3-1',
+                  show: false,
+                },
+                {
+                  label: '其他 3-2',
+                  show: false,
+                },
+                {
+                  label: '其他 3-3',
+                  show: false,
+                },
+                {
+                  label: '其他 3-4',
+                  show: false,
+                },
+              ],
+            },
+          ],
+        },
+      ],
+      defaultProps: {
+        children: 'children',
+        label: 'label',
+      },
+    }
+  },
+  watch: {
+    filterText(val) {
+      this.$refs.tree.filter(val)
+    },
+  },
+
+  methods: {
+    getMsgFormSon() {
+      this.activeName = 'third';
+    },
+    mouseenter(data) {
+      data.show = true
+    },
+    mouseleave(data) {
+      data.show = false
+    },
+    filterNode(value, data) {
+      if (!value) return true
+      return data.label.indexOf(value) !== -1
+    },
+    handleNodeClick(data, obj, node) {
+      data, node
+      this.treeLevel = obj.level
+    },
+
+    // 关闭操作
+    closeDialog() {
+      this.showDialog = false
+    },
+    //新建分组
+    addGroup() {
+      this.tableItem = {
+        id: '',
+        name: '',
+      }
+      this.dialogTitle = '新建分组'
+      this.showDialog = true
+      this.$nextTick(() => {
+        this.$refs['addGroupCom'].showDialog = true
+      })
+    },
+
+    //新建站点
+    addSite() {
+      this.tableItem = {
+        stationName: '',
+      }
+      this.dialogTitle = '新建站点'
+      this.showDialog = true
+      this.$nextTick(() => {
+        this.$refs['addSiteCom'].showDialog = true
+      })
+    },
+    remove(node, data) {
+      const parent = node.parent
+      const children = parent.data.children || parent.data
+      const index = children.findIndex((d) => d.id === data.id)
+      children.splice(index, 1)
+      this.dataSource = [...this.dataSource]
+    },
+  },
+}
+</script>
+<style scoped lang="scss">
+.app-container.page-nesting {
+  padding: 0;
+  background: rgba(0, 0, 0, 0);
+}
+.grid-content {
+  background: #fff;
+  height: calc(100vh - 130px);
+  overflow-y: auto;
+}
+.el-input__inner {
+  border-radius: 20px !important;
+}
+.treeDom {
+  width: 270px;
+  position: absolute;
+  left: 0;
+  // margin-left: 20px;
+  padding: 20px;
+  min-height: calc(100vh - 130px);
+
+  .el-icon-search {
+    color: #409eff;
+  }
+  .el-button {
+    width: 100px;
+  }
+}
+.nestingDom {
+  margin-left: 300px;
+}
+</style>
+<style lang="scss">
+// tab重置样式
+.el-tabs--card > .el-tabs__header .el-tabs__item {
+  line-height: 50px;
+  height: 50px;
+  font-size: 16px;
+}
+.el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
+  border-bottom: 2px solid #409eff;
+  color: #409eff;
+}
+.el-tabs--card .el-tabs__header:hover,
+.el-tabs__item:hover {
+  color: #409eff !important;
+}
+.el-tabs__header {
+  margin-bottom: 0;
+}
+.el-tabs--card > .el-tabs__header .el-tabs__item,
+.el-tabs--card > .el-tabs__header .el-tabs__nav {
+  border: none;
+}
+</style>

src/views/siteManage/index.vue

@@ -19,7 +19,7 @@
         v-model="filterText"
         class="mb-20 searchInput"
       >
-        <template #suffix>
+        <template>
           <i class="el-icon-search el-input__icon"></i>
         </template>
       </el-input>
@@ -64,7 +64,6 @@
         v-if="this.treeLevel == 3"
         v-model="activeName"
         type="card"
-        @tab-click="handleClick"
       >
         <el-tab-pane label="基本信息" name="first">
           <basic-info class="basicInfo"></basic-info>
@@ -95,21 +94,19 @@
 
       <!-- 新建分组start -->
       <add-group-com
-        v-if="showDialog"
-        ref="addGroupCom"
-        :dialog-title="dialogTitle"
-        :item-info="tableItem"
-        @closeDialog="closeDialog"
+       :dialogTitle="dialogTitle"
+      :itemInfo="tableItem"
+      @closeDialog="closeDialog"
+      :flag="showDialog"
       ></add-group-com>
       <!-- 新建分组end -->
 
       <!-- 新建站点start -->
       <add-site-com
-        v-if="showDialog"
-        ref="addSiteCom"
-        :dialog-title="dialogTitle"
-        :item-info="tableItem"
-        @closeDialog="closeDialog"
+        :dialogTitle="dialogTitle"
+      :itemInfo="tableItem"
+      @closeDialog="closeDialog"
+      :flag="showDialog2"
       ></add-site-com>
       <!-- 新建站点end -->
     </div>
@@ -118,6 +115,9 @@
 </template>
 
 <script>
+
+import { defineComponent, ref,reactive,watch} from 'vue'
+
 import basicInfo from './basicInfo'
 import WatchDog from './watchDog'
 import variableList from './variableList'
@@ -128,7 +128,7 @@ import groupInfoCom from './groupInfoCom'
 import addGroupCom from './addGroupCom'
 import addSiteCom from './addSiteCom'
 
-export default {
+export default defineComponent({
   components: {
     basicInfo,
     WatchDog,
@@ -139,15 +139,15 @@ export default {
     addGroupCom,
     addSiteCom,
   },
-  data() {
-    return {
-      deleteShow: false,
-      showDialog: false,
-      treeLevel: 0,
-      activeName: 'first',
-      filterText: '',
-      data: [
-        {
+  setup() {
+    const showDialog = ref(false)
+    const showDialog2 = ref(false)
+    const dialogTitle = ref('')
+    const treeLevel = ref(0)
+    const activeName = ref('first')
+    const filterText = ref('')
+    const data = ref([
+      {
           label: '所有站点',
           children: [
             {
@@ -215,120 +215,112 @@ export default {
             },
           ],
         },
-      ],
-      defaultProps: {
+    ])
+    const defaultProps = ref({
         children: 'children',
         label: 'label',
-      },
+      })
+    
+    const getMsgFormSon=()=> {
+     activeName.value = 'third';
     }
-  },
-  watch: {
-    success(res) {
-      res
-      alert(1)
-      // this.dialogCreate = res;
-      // this.activeName = res;
-    },
-    filterText(val) {
-      this.$refs.tree.filter(val)
-    },
-  },
-
-  methods: {
-    getMsgFormSon() {
-      this.activeName = 'third';
-    },
-    mouseenter(data) {
-      // console.log("移入");
-      // console.log(data);
+    function mouseenter(data) {
       data.show = true
-      // console.log(data.show);
-    },
-
-    mouseleave(data) {
-      // console.log("移出");
-      // console.log(data);
+    }
+    function mouseleave(data) {
       data.show = false
-    },
-
-    handleClick(tab, event) {
-      console.log(tab, event)
-    },
-    filterNode(value, data) {
+    }
+    function filterNode(value, data) {
       if (!value) return true
       return data.label.indexOf(value) !== -1
-    },
-    handleNodeClick(data, obj, node) {
+    }
+    const  handleNodeClick=(data, obj, node)=> {
       data, node
-      this.treeLevel = obj.level
-      // console.log(this.treeLevel);
-      //  console.log(node);
-    },
-    // 关闭操作
-    closeDialog(flag) {
-      if (flag) {
-        // 重新刷新表格内容
-        this.fetchData()
-      }
-      this.showDialog = false
-    },
+      treeLevel.value = obj.level
+    }
+
+    const tree = ref(null)
 
-    addGroup() {
-      this.tableItem = {
-        id: '',
-        stationName: '',
-        watchName: '',
-        watchCode: '',
+    watch(filterText, (val) => { //直接监听
+    val
+    console.log(tree)
+    //  tree.value.filter(val)
+    })
+
+    // 关闭操作
+    const  closeDialog=()=> {
+      showDialog.value = false
+      showDialog2.value = false
+    }
+    //新建分组
+    const tableItem = reactive([])
+    const  addGroup=() =>{
+      tableItem.value = {
+         id: "",
+        stationName: "",
+        xh: "",
+        userName: "",
         siteList: [],
-        done: '',
-        guaZai: '',
+        done: "",
+        guaZai: "",
         checked: true,
-        resource: '',
-      }
-      this.dialogTitle = '新建分组'
-      this.showDialog = true
-      this.$nextTick(() => {
-        this.$refs['addGroupCom'].showDialog = true
-      })
-    },
-    addSite() {
-      this.tableItem = {
-        id: '',
-        region: '',
-        stationName: '',
-        watchName: '',
-        watchCode: '',
+      };
+      dialogTitle.value = '新建分组'
+      showDialog.value = true
+    }
+
+    //新建站点
+    const addSite=()=> {
+      tableItem.value = {
+         id: "",
+        stationName: "",
+        xh: "",
+        userName: "",
         siteList: [],
-        done: '',
-        guaZai: '',
+        done: "",
+        guaZai: "",
         checked: true,
-        resource: '',
-      }
-      this.dialogTitle = '新建站点'
-      this.showDialog = true
-      this.$nextTick(() => {
-        this.$refs['addSiteCom'].showDialog = true
-      })
-    },
-    append(data) {
-      var id
-      const newChild = { id: id++, label: 'testtest', children: [] }
-      if (!data.children) {
-        this.$set(data, 'children', [])
-      }
-      data.children.push(newChild)
-    },
-
-    remove(node, data) {
+      };
+      dialogTitle.value = '新建站点'
+      showDialog2.value = true
+    }
+    const remove=(node, data)=> {
       const parent = node.parent
       const children = parent.data.children || parent.data
       const index = children.findIndex((d) => d.id === data.id)
       children.splice(index, 1)
       this.dataSource = [...this.dataSource]
-    },
+    }
+
+    return {
+      showDialog,
+      showDialog2,
+      treeLevel,
+      activeName,
+      filterText,
+      dialogTitle,
+      data,
+      defaultProps,
+      tableItem,
+      getMsgFormSon,
+      mouseenter,
+      mouseleave,
+      filterNode,
+      handleNodeClick,
+      closeDialog,
+      addGroup,
+      addSite,
+      remove
+      
+    }
+
   },
-}
+})
 </script>
+
+
+
+
 <style scoped lang="scss">
 .app-container.page-nesting {
   padding: 0;

src/views/systemManage/rolePermission/addRoleCom.vue

@@ -1,32 +1,25 @@
 <template>
-  <transition name="dialog-fade">
     <el-dialog
-      v-if="showDialog"
       :title="dialogTitle"
-      class="add-group-com"
-      v-model="showDialog"
+      v-model="dialogVisible"
       width="400px"
-      @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="watchName">
-          <el-input v-model="formInfo.watchName"></el-input>
+          <el-input v-model="form.watchName"></el-input>
         </el-form-item>
          <el-form-item label="角色类型：" prop="watchName">
-          <el-input v-model="formInfo.watchName"></el-input>
+          <el-input v-model="form.watchName"></el-input>
         </el-form-item>
-         <!-- <el-form-item label="选择模板：" prop="region">
-            <el-select v-model="formInfo.region" placeholder="请选择">
-              <el-option label="选择模板1" value="1"></el-option>
-              <el-option label="选择模板2" value="2"></el-option>
-            </el-select>
-          </el-form-item> -->
+   
       
         <div style="text-align: right">
           <el-button type="primary" @click="submitForm('formInfo')"
@@ -35,28 +28,81 @@
         </div>
       </el-form>
     </el-dialog>
-  </transition>
 </template>
 <script>
+import { defineComponent, ref, watchEffect } from 'vue'
 
-export default {
-  name: "AddRoleCom",
+export default defineComponent({
+  name: 'AddRoleCom',
+  emits: ['closeDialog'],
   props: {
-    dialogTitle: {
-      type: String,
-    },
-    itemInfo: {
-      type: Object,
-      default: function () {
-        return {};
-      },
-    },
+    flag: Boolean,
+    dialogTitle: String,
+    itemInfo: Object,
   },
-  data() {
+  setup(props, context) {
+    context
+
+    const dialogVisible = ref(false)
+    const formInfo = ref(null)
+
+    const form = ref([])
+
+    
+    // open(): Dialog弹窗打开之前做的事
+    const open = () => {
+      console.log('')
+      form.value = props.itemInfo.value
+    }
+
+ 
+
+    // 关闭弹框
+    const closeDialog = () => {
+      context.emit('closeDialog', false)
+      dialogVisible.value = false
+    }
+
+    watchEffect((fn) => {
+      fn
+      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 {
-       checked: true,
-      showDialog: false,
-      formInfo: JSON.parse(JSON.stringify(this.itemInfo)),
+      closeDialog,
+      dialogVisible,
+      roleValid,
+      formInfo,
+      form,
+      open,
+      submitForm,
       rules: {
         watchName: [
           // required  是否为必填项， trigger:表单验证的触发时机，失去焦点进行验证
@@ -69,43 +115,10 @@ export default {
           },
         ],
       },
-    };
+    }
   },
-  methods: {
-    roleValid(rule, value, callback) {
-      rule
-      if (value.length === 0) {
-        callback(new Error("不能为空"));
-      } else {
-        callback();
-      }
-    },
 
-    // 保存操作
-    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);
-    },
-  },
-};
+})
 </script>
  
 <style scoped lang="scss">

src/views/systemManage/rolePermission/index.vue

@@ -6,32 +6,15 @@
         <b>角色类型</b>
         <el-button type="success" @click="addRole()">新增</el-button>
       </div>
-
       <el-radio-group v-model="radio1">
-        <el-radio-button icon="el-icon-edit" label="1">
-          <img src="@/assets/images/userIcon.svg" />
-          普通用户
-          <i class="el-icon-delete"></i>
-        </el-radio-button>
-        <el-radio-button label="2">
-          <img src="@/assets/images/userIcon.svg" />
-          超级管理员
-          <i class="el-icon-delete"></i>
-        </el-radio-button>
-        <el-radio-button label="3">
-          <img src="@/assets/images/userIcon.svg" />
-          主管
-          <i class="el-icon-delete"></i>
-        </el-radio-button>
-        <el-radio-button label="4">
-          <img src="@/assets/images/userIcon.svg" />
-          电力
-          <i class="el-icon-delete"></i>
-        </el-radio-button>
-        <el-radio-button label="5">
+        <el-radio-button
+          v-for="(item, index) in roleData"
+          :label="item.id"
+          :key="index"
+        >
           <img src="@/assets/images/userIcon.svg" />
-          维保
-          <i class="el-icon-delete"></i>
+          {{ item.name }}
+          <i class="el-icon-delete" @click="deleteRoleItem(index)"></i>
         </el-radio-button>
       </el-radio-group>
     </div>
@@ -39,101 +22,55 @@
 
     <!-- 右侧表格start -->
     <div class="grid-content nestingDom" style="width: calc(100% - 300px)">
-      <role-info-com class="basicInfo"></role-info-com>
-
-      <!-- 新建站点start -->
-      <add-role-com
-        v-if="showDialog"
-        ref="addRoleCom"
-        :dialog-title="dialogTitle"
-        :item-info="tableItem"
-        @closeDialog="closeDialog"
-      ></add-role-com>
-      <!-- 新建站点end -->
+      <role-info-com
+        class="basicInfo"
+        style="height: calc(100vh - 130px)"
+      ></role-info-com>
     </div>
     <!-- 右侧表格end -->
+
+    <!-- 新建角色start -->
+    <add-role-com
+  
+      :dialog-title="dialogTitle"
+      :itemInfo="tableItem"
+      @closeDialog="closeDialog"
+      :flag="showDialog"
+    ></add-role-com>
+    <!-- 新建角色end -->
   </div>
 </template>
 
 <script>
-import roleInfoCom from './roleInfoCom'
+import { defineComponent, ref, reactive } from 'vue'
 
+import roleInfoCom from './roleInfoCom'
 import addRoleCom from './addRoleCom'
 
-export default {
-  components: {
-    roleInfoCom,
-
-    addRoleCom,
-  },
-  data() {
-    return {
-      radio1: '1',
-      deleteShow: false,
-      showDialog: false,
-      treeLevel: 0,
-      activeName: 'first',
-      filterText: '',
- 
-      defaultProps: {
-        children: 'children',
-        label: 'label',
-      },
-    }
-  },
-  watch: {
-    success(res) {
-      res
-      alert(1)
-      // this.dialogCreate = res;
-      // this.activeName = res;
-    },
-    filterText(val) {
-      this.$refs.tree.filter(val)
-    },
-  },
-
-  methods: {
-    getMsgFormSon() {
-      this.activeName = 'third'
-    },
-    mouseenter(data) {
-      // console.log("移入");
-      // console.log(data);
-      data.show = true
-      // console.log(data.show);
-    },
+export default defineComponent({
+  components: { roleInfoCom, addRoleCom },
+  setup() {
+    const radio1 = ref('1')
+    const showDialog = ref(false)
+    const roleData = ref([
+      { id: 1, name: '普通用户' },
+      { id: 2, name: '超级管理员' },
+      { id: 3, name: '主管' },
+      { id: 4, name: '电力' },
+      { id: 5, name: '维保' },
+    ])
 
-    mouseleave(data) {
-      // console.log("移出");
-      // console.log(data);
-      data.show = false
-    },
+    const dialogTitle = ref('')
 
-    handleClick(tab, event) {
-      console.log(tab, event)
-    },
-    filterNode(value, data) {
-      if (!value) return true
-      return data.label.indexOf(value) !== -1
-    },
-    handleNodeClick(data, obj, node) {
-      data, node
-      this.treeLevel = obj.level
-      // console.log(this.treeLevel);
-      //  console.log(node);
-    },
-    // 关闭操作
-    closeDialog(flag) {
-      if (flag) {
-        // 重新刷新表格内容
-        this.fetchData()
-      }
-      this.showDialog = false
-    },
+    // 删除左侧角色列表
+    function deleteRoleItem(params) {
+      this.roleData.splice(params, 1)
+    }
 
-    addRole() {
-      this.tableItem = {
+    // 新增角色
+    const tableItem = reactive([])
+    function addRole() {
+      tableItem.value = {
         id: '',
         region: '',
         stationName: '',
@@ -145,31 +82,29 @@ export default {
         checked: true,
         resource: '',
       }
-      this.dialogTitle = '角色新增'
-      this.showDialog = true
-      this.$nextTick(() => {
-        this.$refs['addRoleCom'].showDialog = true
-      })
-    },
-    append(data) {
-      var id
-      const newChild = { id: id++, label: 'testtest', children: [] }
-      if (!data.children) {
-        this.$set(data, 'children', [])
-      }
-      data.children.push(newChild)
-    },
+      dialogTitle.value = '角色新增'
+      showDialog.value = true
+    }
 
-    remove(node, data) {
-      const parent = node.parent
-      const children = parent.data.children || parent.data
-      const index = children.findIndex((d) => d.id === data.id)
-      children.splice(index, 1)
-      this.dataSource = [...this.dataSource]
-    },
+    // 关闭弹框操作
+    const closeDialog=() =>{
+      showDialog.value = false
+    }
+
+    return {
+      radio1,
+      showDialog,
+      roleData,
+      dialogTitle,
+      tableItem,
+      deleteRoleItem,
+      addRole,
+      closeDialog,
+    }
   },
-}
+})
 </script>
+
 <style scoped lang="scss">
 .app-container.page-nesting {
   padding: 0;
@@ -190,13 +125,8 @@ export default {
   // margin-left: 20px;
   padding: 20px;
   min-height: calc(100vh - 130px);
-
-  
 }
 .nestingDom {
   margin-left: 300px;
 }
-</style>
-<style lang="scss">
-
-</style>
+</style>

src/views/systemManage/rolePermission/roleInfoCom/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="siteManage-main roleInfoPage">
-    <el-table :data="tableData" border stripe :cell-style="cellStyle">
+    <el-table :data="tableData" border stripe >
       <el-table-column prop="xuhao" label="序号" width="80" ></el-table-column>
       <el-table-column prop="menu" label="菜单" width="180" ></el-table-column>
       <el-table-column prop="authority" label="权限"  class="roleLeft">
@@ -14,18 +14,21 @@
         </template>
       </el-table-column>
     </el-table>
+    <div style="text-align:right">
+      <el-button type="success" class="mt-20" >保存</el-button>
+    </div>
+    
   </div>
 </template>
 
 <script>
-export default {
+import { defineComponent,ref } from 'vue'
+
+export default defineComponent({
   name: 'RoleInfoCom',
-  data() {
-    return {
-      checked1: true,
-      checked2: true,
-      tableData: [
-        {
+  setup() {
+     const  tableData=ref([
+       {
           xuhao: '1',
           menu: '首页',
           authority: [{name: '全选', checked: true},{name: '查看', checked: true}],
@@ -111,20 +114,18 @@ export default {
           menu: '角色权限',
           authority: [{name: '全选', checked: true},{name: '查看', checked: true},{name: '编辑', checked: true},{name: '新增', checked: true},{name: '删除', checked: true}],
         },
-      ],
-    }
-  },
-  methods: {
-    //自定义列样式
-    cellStyle({ row, column, rowIndex, columnIndex }) {
-      row, column, rowIndex
-      if (columnIndex==2) {
-        // return `text-align:left!important;cursor:pointer`
-      }
-    },
+     ]) 
+
+     return{
+       tableData
+     }
+    
+    
+
   },
-}
+})
 </script>
+
 <style  lang="scss">
 
 </style>

src/views/systemManage/userManage/dialogComponent copy.vue

@@ -1,160 +0,0 @@
-<template>
-    <el-dialog
-
-      :title="dialogTitle"
-      v-model="dialogVisible"
-      width="640px"
-      @close="closeDialog()"
-      @open="open"
-    >
-      <el-form
-        ref="formInfo"
-        :model="formInfo"
-        class="demo-form-inline"
-        label-width="100px"
-        :rules="rules"
-      >
-        <el-form-item label="账号：" prop="accountNumber">
-          <el-input v-model="formInfo.accountNumber"></el-input>
-        </el-form-item>
-        <el-form-item label="用户名：" prop="userName">
-          <el-input v-model="formInfo.userName"></el-input>
-        </el-form-item>
-        <el-form-item label="手机号码：" prop="phone">
-          <el-input v-model="formInfo.phone"></el-input>
-        </el-form-item>
-         <el-form-item label="告警短信" prop="phone">
-          <el-checkbox v-model="checked1" label="接收"></el-checkbox>
-        </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
-          >
-        </div>
-      </el-form>
-    </el-dialog>
-</template>
-
-<script>
-
-
-
-
-export default {
-  name: "DialogComponent",
-  // emits: ['closeDialog'],
-  props: {
-    dialogTitle:String,
-    itemInfo: Object,
-    flag: Boolean,
-
-  },
-  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: "站点五",
-        },
-      ],
-
-      rules: {
-        accountNumber: [
-          // required  是否为必填项， trigger:表单验证的触发时机，失去焦点进行验证
-          { required: true, message: "请输入账号", trigger: "blur" },
-          {
-            min: 3,
-            max: 6,
-            message: "用户名长度在 3 到 6 个字符",
-            trigger: "blur",
-          },
-        ],
-        userName: [
-          { required: true, message: "请输入用户名", trigger: "blur" },
-          {
-            min: 3,
-            max: 6,
-            message: "用户名长度在 3 到 6 个字符",
-            trigger: "blur",
-          },
-        ],
-        phone: [
-          { required: false, message: "请输入编号", trigger: "blur" },
-          {
-            min: 3,
-            max: 6,
-            message: "用户名长度在 3 到 6 个字符",
-            trigger: "blur",
-          },
-        ],
-      },
-    };
-  },
-  methods: {
-    roleValid(rule, value, callback) {
-      if (value.length === 0) {
-        callback(new Error("角色不能为空"));
-      } else {
-        callback();
-      }
-    },
-
-    // 保存操作
-    submitForm(formName) {
-      alert(1)
-      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);
-    },
-  },
-};
-</script>
- 
-<style scoped lang="scss">
-.el-input,
-.el-select {
-  width: 240px;
-}
-</style>

src/views/systemManage/userManage/dialogComponent.vue

@@ -61,8 +61,10 @@ export default defineComponent({
     
     // open(): Dialog弹窗打开之前做的事
     const open = () => {
-      console.log('')
+      
       form.value = props.itemInfo.value
+      console.log('form.value')
+      console.log( form.value)
     }
 
     const options = [

src/views/systemManage/userManage/index oriange.vue

@@ -1,277 +0,0 @@
-<template>
-  <div class="app-container">
-    <!-- 筛选start -->
-    <div class="filter-container mb-10">
-      <div class="left">
-        <div>
-          <span class="" style="margin-right: 30px">用户管理列表</span>
-          <el-button icon="el-icon-plus" type="success" @click="addItem()"
-            >新增</el-button
-          >
-        </div>
-        <div style="margin-top: 20px">
-          <div class="filter-item" >
-          姓名：
-          <el-input
-            v-model="userName"
-            placeholder="请输入内容"
-            style="width: 180px"
-          ></el-input>
-        </div>
-        <div class="filter-item" >
-          手机号：
-          <el-input
-            v-model="phone"
-            placeholder="请输入内容"
-            style="width: 180px"
-          ></el-input>
-        </div>
-
-          <div class="filter-item">
-            所属企业:
-            <el-select
-              v-model="region"
-              placeholder="请选择"
-              style="width: 150px"
-            >
-              <el-option label="企业一" value="1"></el-option>
-              <el-option label="企业二" value="2"></el-option>
-            </el-select>
-          </div>
-
-          <div class="filter-item">
-            角色:
-            <el-select
-              v-model="role"
-              placeholder="请选择"
-              style="width: 200px"
-            >
-              <el-option label="角色1" value="1"></el-option>
-              <el-option label="角色2" value="2"></el-option>
-            </el-select>
-          </div>
-          <el-button type="primary" icon="el-icon-search" class="search-button"
-            >查询</el-button
-          >
-        </div>
-      </div>
-
-      <div class="right">
-        <el-button type="primary">导出</el-button>
-      </div>
-    </div>
-    <!-- 筛选end -->
-
-    <!-- 表格start -->
-    <el-table
-      :data="tableData"
-      border
-      stripe
-      :header-cell-style="headClass"
-    >
-      <el-table-column prop="xh" label="序号" width="70">
-      </el-table-column>
-      <el-table-column prop="userName" label="姓名" width="">
-      </el-table-column>
-      <el-table-column prop="sex" label="性别" width="">
-      </el-table-column>
-      <el-table-column prop="contact" label="联系方式" width="">
-      </el-table-column>
-      <el-table-column prop="password" label="密码" width="">
-      </el-table-column>
-      <el-table-column prop="ownerCompany" label="所属企业" width="">
-      </el-table-column>
-      <el-table-column prop="role" label="角色" width="">
-      </el-table-column>
-      <el-table-column fixed="right" label="操作" width="180">
-        <template #default="scope">
-          <el-button
-            @click="checkItem(scope.$index, scope.row)"
-            type="text"
-            size="small"
-            class="delete-text"
-            >查看</el-button
-          >
-          <el-button
-            type="text"
-            size="small"
-            @click.prevent="editRow(scope.row)"
-            >编辑</el-button
-          >
-        </template>
-      </el-table-column>
-    </el-table>
-    <!-- 表格end -->
-
-    <!-- 分页start -->
-    <div class="paginationBlock">
-      <el-pagination
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"
-        :current-page="currentPage4"
-        :page-sizes="[100, 200, 300, 400]"
-        :page-size="100"
-        layout="total, sizes, prev, pager, next, jumper"
-        :total="400"
-      >
-      </el-pagination>
-    </div>
-
-    <!-- 分页end -->
-
-    <!--弹框组件开始-----------------------start-->
-    <dialog-component
-      v-if="showDialog"
-      ref="dialogComponent"
-      :dialogTitle="dialogTitle"
-      :itemInfo="tableItem"
-      @closeDialog="closeDialog"
-    ></dialog-component>
-    <!--弹框组件开始-----------------------end-->
-
-
-
-
-  </div>
-</template>
-
-<script>
-import DialogComponent from "./dialogComponent";
-
-export default {
-  name: "VariableList",
-
-  components: { DialogComponent, },
-
-  data() {
-    return {
-
-      userName:'',
-      phone:'',
-      region: "",
-      role:'',
-      tableItem:{},
-      currentPage4: 4,
-      dialogTitle:'',
-      showDialog: true,
-
-      tableData: [
-        {
-           xh: "1",
-          userName: "张三",
-          sex: "男",
-          contact: "12345678989 ",
-          password: "123456",
-          role: "维保 ",
-          ownerCompany: "伍继",
-        },
-         {
-          xh: "1",
-          userName: "张三",
-          sex: "男",
-          contact: "12345678989 ",
-          password: "123456",
-          ownerCompany: "伍继",
-           role: "维保 ",
-        },
-         {
-          xh: "1",
-          userName: "张三",
-          sex: "男",
-          contact: "12345678989 ",
-          password: "123456",
-          ownerCompany: "伍继",
-           role: "维保 ",
-        },
-         {
-          xh: "1",
-          userName: "张三",
-          sex: "男",
-          contact: "12345678989 ",
-          password: "123456",
-          ownerCompany: "伍继",
-           role: "维保 ",
-        },
-        {
-          xh: "1",
-          userName: "张三",
-          sex: "男",
-          contact: "12345678989 ",
-          password: "123456",
-          ownerCompany: "伍继",
-           role: "维保 ",
-        },
-       
-      ],
-    };
-
-  },
-  methods: {
-
-    handleSizeChange(val) {
-      console.log(`每页 ${val} 条`);
-    },
-    handleCurrentChange(val) {
-      console.log(`当前页: ${val}`);
-    },
-
-    // 表头样式设置
-    headClass() {
-      return "background:#FAFAFA;";
-    },
-
-    // 查看视频
-    checkItem(row) {
-      console.log(row);
-      this.tableItem = row;
-      this.dialogTitle = "查看";
-      this.showDialog = true;
-      this.$nextTick(() => {
-        this.$refs["dialogComponent"].showDialog = true;
-      });
-    },
-
-    // 添加操作
-    addItem() {
-      this.tableItem = {
-        id: "",
-        stationName: "",
-        xh: "",
-        userName: "",
-        siteList: [],
-        done: "",
-        guaZai: "",
-        checked: true,
-      };
-      this.dialogTitle = "新增";
-      this.showDialog = true;
-      this.$nextTick(() => {
-        this.$refs["dialogComponent"].showDialog = true;
-      });
-    },
-
-    // 编辑操作
-    editRow(row) {
-      console.log(row);
-      this.tableItem = row;
-      this.dialogTitle = "编辑";
-      this.showDialog = true;
-      this.$nextTick(() => {
-        this.$refs["dialogComponent"].showDialog = true;
-      });
-    },
-
-    // 关闭操作
-    closeDialog(flag) {
-      if (flag) {
-        // 重新刷新表格内容
-        this.fetchData();
-      }
-      this.showDialog = false;
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-</style>

src/views/systemManage/userManage/index.vue

@@ -121,7 +121,6 @@
 
     <!--弹框组件开始-----------------------start-->
     <dialog-component
-
       :dialogTitle="dialogTitle"
       :itemInfo="tableItem"
       @closeDialog="closeDialog"