权限guanli

package.json

@@ -18,6 +18,7 @@
     "clipboard": "^2.0.6",
     "core-js": "^3.8.3",
     "dayjs": "^1.10.4",
+    "default-passive-events": "^2.0.0",
     "echarts": "^5.2.1",
     "element-plus": "^1.1.0-beta.20",
     "js-cookie": "^3.0.0-rc.1",

src/assets/css/index.scss

@@ -1004,4 +1004,54 @@ ul li {
             height: 365px;
         }
     }
+}
+
+// 角色权限
+.roleLeft {
+    .addBox {
+        text-align: center;
+        display: flex;
+        justify-content: space-around;
+        line-height: 36px
+    }
+    .el-radio-button {
+        width: 100%
+    }
+    .el-radio-button__inner {
+        width: 100%;
+        // line-height: 40px;
+        padding: 13px 15px
+    }
+    .el-radio-button__inner {
+        border-left: 1px solid #dcdfe6;
+        text-align: left;
+        position: relative; // border-bottom: none;
+        img {
+            margin-right: 5px
+        }
+        i {
+            position: absolute;
+            right: 10px;
+            font-size: 15px;
+            color: #F80000;
+            opacity: 0
+        }
+    }
+    .el-radio-button__inner:hover {
+        color: #444;
+        background: #f1f7fc;
+        // border-color: #f1f7fc;
+        i {
+            opacity: 1;
+        }
+    }
+    .el-radio-button:last-child .el-radio-button__inner {
+        // border-bottom: 1px solid #dcdfe6;
+    }
+    .el-radio-button__original-radio:checked+.el-radio-button__inner {
+        background: #BDE5FF;
+        border-color: #BDE5FF;
+        color: #444;
+        box-shadow: none
+    }
 }

src/assets/images/userIcon.svg

@@ -0,0 +1,7 @@
+<svg 
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ width="16px" height="14px">
+<path fill-rule="evenodd"  opacity="0.851" fill="rgb(0, 0, 0)"
+ d="M15.432,12.189 C15.119,12.189 14.865,11.926 14.865,11.602 C14.865,11.575 14.863,11.547 14.860,11.521 C14.646,9.314 13.046,8.013 10.529,7.808 C10.217,7.783 9.984,7.500 10.008,7.176 C10.032,6.867 10.285,6.640 10.580,6.642 C11.948,6.229 12.748,4.757 12.368,3.331 C12.168,2.583 11.667,1.960 10.993,1.620 C10.705,1.490 10.574,1.144 10.700,0.847 C10.825,0.549 11.160,0.414 11.447,0.544 C11.462,0.550 11.476,0.557 11.490,0.565 C13.351,1.501 14.127,3.820 13.223,5.746 C12.999,6.222 12.682,6.634 12.305,6.973 C14.388,7.622 15.770,9.140 15.990,11.403 C15.997,11.469 16.000,11.535 16.000,11.602 C16.000,11.926 15.746,12.189 15.432,12.189 ZM12.364,11.865 C12.370,11.929 12.373,11.994 12.373,12.059 C12.373,13.130 11.533,13.999 10.499,13.999 L1.809,13.999 C0.809,13.999 -0.001,13.160 -0.000,12.126 C-0.000,12.074 0.002,12.022 0.006,11.969 C0.194,9.657 1.583,8.092 3.680,7.422 C2.630,6.695 1.938,5.458 1.938,4.053 C1.938,1.815 3.692,0.000 5.855,0.000 C8.018,0.000 9.771,1.815 9.771,4.053 C9.771,5.381 9.145,6.549 8.191,7.288 C10.538,7.846 12.126,9.417 12.364,11.865 ZM1.024,12.059 C0.988,12.507 1.310,12.901 1.743,12.939 C1.765,12.941 1.787,12.942 1.809,12.942 L10.499,12.942 C10.970,12.941 11.352,12.545 11.351,12.057 C11.351,12.028 11.350,11.999 11.347,11.970 C11.106,9.487 9.147,8.106 6.190,8.106 C3.207,8.106 1.229,9.532 1.024,12.059 ZM8.750,4.053 C8.750,2.399 7.454,1.058 5.855,1.057 C5.855,1.057 5.855,1.057 5.855,1.057 C4.256,1.058 2.960,2.399 2.960,4.053 C2.960,5.707 4.256,7.048 5.855,7.048 C7.453,7.049 8.750,5.708 8.750,4.053 Z"/>
+</svg>

src/main.js

@@ -6,10 +6,12 @@ import store from './store'
 import 'ant-design-vue/dist/antd.css'
 import '@/vab'
 
+import 'default-passive-events'
+
 // 引入 ElementUI
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
-import zhCn from 'element-plus/lib/locale/lang/zh-cn'// 中文
+import zhCn from 'element-plus/lib/locale/lang/zh-cn' // 中文
 import '@/assets/css/index.scss'
 import '@/assets/css/global.scss'
 import * as echarts from 'echarts';
@@ -22,8 +24,8 @@ import SvgIcon from "@/components/SvgIcon"
  * @description 正式环境默认使用mock，正式项目记得注释后再打包
  */
 if (process.env.NODE_ENV === 'production') {
-  const { mockXHR } = require('@/utils/static')
-  mockXHR()
+    const { mockXHR } = require('@/utils/static')
+    mockXHR()
 }
 
 var app = createApp(App)
@@ -31,9 +33,9 @@ var app = createApp(App)
 app.config.globalProperties.$echarts = echarts
 
 app
-  .component("svg-icon", SvgIcon)
-  .use(store)
-  .use(router)
-  .use(ElementPlus, { locale: zhCn, size: 'small' })
-  .use(Antd)
-  .mount('#app')
+    .component("svg-icon", SvgIcon)
+    .use(store)
+    .use(router)
+    .use(ElementPlus, { locale: zhCn, size: 'small' })
+    .use(Antd)
+    .mount('#app')

src/views/alarmManage/index.vue

@@ -263,7 +263,7 @@ export default {
         return `color:#0284E8;cursor:pointer`
       }
       if (columnIndex ) {
-        return `text-align:left;cursor:pointer;`
+        // return `text-align:left;cursor:pointer;`
       } else {
         return ''
       }

src/views/stationManage/dialogComponent.vue

@@ -199,12 +199,7 @@ export default defineComponent({
       },
     }
   },
-  data() {
-    return {
-      // formInfo: JSON.parse(JSON.stringify(this.itemInfo)),
-    }
-  },
-  methods: {},
+
 })
 </script>
  

src/views/stationManage/index.vue

@@ -163,7 +163,6 @@ export default defineComponent({
     const dialogTitle = ref('')
     // 添加操作
 
- 
     const addItem = () => {
       tableItem.value = {
         id: '',

src/views/systemManage/rolePermission/addRoleCom.vue

@@ -0,0 +1,113 @@
+<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: "AddRoleCom",
+  props: {
+    dialogTitle: {
+      type: String,
+    },
+    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/systemManage/rolePermission/index.vue

@@ -1,5 +1,202 @@
 <template>
-  <div style="padding:30px;">
-   角色权限
+  <div class="app-container page-nesting" style="position: relative">
+    <!-- 左侧start -->
+    <div class="grid-content treeDom roleLeft">
+      <div style="" class="mb-20 addBox">
+        <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">
+          <img src="@/assets/images/userIcon.svg" />
+          维保
+          <i class="el-icon-delete"></i>
+        </el-radio-button>
+      </el-radio-group>
+    </div>
+    <!-- 左侧end -->
+
+    <!-- 右侧表格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 -->
+    </div>
+    <!-- 右侧表格end -->
   </div>
 </template>
+
+<script>
+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);
+    },
+
+    mouseleave(data) {
+      // console.log("移出");
+      // console.log(data);
+      data.show = false
+    },
+
+    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
+    },
+
+    addRole() {
+      this.tableItem = {
+        id: '',
+        region: '',
+        stationName: '',
+        watchName: '',
+        watchCode: '',
+        RoleList: [],
+        done: '',
+        guaZai: '',
+        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)
+    },
+
+    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);
+
+  
+}
+.nestingDom {
+  margin-left: 300px;
+}
+</style>
+<style lang="scss">
+
+</style>

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

@@ -0,0 +1,133 @@
+<template>
+  <div class="siteManage-main roleInfoPage">
+    <el-table :data="tableData" border stripe :cell-style="cellStyle">
+      <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="权限" align="left" class="roleLeft">
+        <template #default="scope">
+          <el-checkbox
+            v-for="item in scope.row.authority"
+            :label="item.name"
+            :key="item.actionid"
+            v-model="item.checked"
+          ></el-checkbox>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'RoleInfoCom',
+  data() {
+    return {
+      checked1: true,
+      checked2: true,
+      tableData: [
+        {
+          xuhao: '1',
+          menu: '首页',
+          authority: [{name: '全选', checked: true},{name: '查看', checked: true}],
+        },
+        {
+          xuhao: '2',
+          menu: '站点概览',
+          authority: [{name: '全选', checked: true},{name: '查看', checked: true}],
+        },
+        {
+          xuhao: '3',
+          menu: '配电系统图',
+          authority: [{name: '全选', checked: true},{name: '查看', checked: true},{name: '编辑', checked: true}],
+        },
+        {
+          xuhao: '4',
+          menu: '事件告警报表',
+          authority: [{name: '全选', checked: true},{name: '查看', checked: true},{name: '告警处理', checked: true}],
+        },
+        {
+          xuhao: '5',
+          menu: '告警管理',
+          authority: [{name: '全选', checked: true},{name: '查看', checked: true},{name: '告警处理', checked: true}],
+        },
+        {
+          xuhao: '6',
+          menu: '站点管理',
+          authority: [{name: '全选', checked: true},{name: '查看', checked: true},{name: '编辑', checked: true},{name: '新增', checked: true},{name: '删除', checked: true}],
+        },
+        {
+          xuhao: '7',
+          menu: '台区管理',
+          authority: [{name: '全选', checked: true},{name: '查看', checked: true},{name: '编辑', checked: true},{name: '新增', checked: true},{name: '删除', checked: true}],
+        },
+
+        {
+          xuhao: '8',
+          menu: '设备管理',
+          authority: [{name: '全选', checked: true},{name: '查看', checked: true},{name: '编辑', checked: true},{name: '新增', checked: true},{name: '删除', checked: true}],
+        },
+        {
+          xuhao: '9',
+          menu: '数据管理',
+          authority: [{name: '全选', checked: true},{name: '查看', checked: true},{name: '导出', checked: true}],
+        },
+        {
+          xuhao: '10',
+          menu: '电能质量',
+          authority: [{name: '全选', checked: true},{name: '查看', checked: true}],
+        },
+        {
+          xuhao: '11',
+          menu: '月度报告',
+          authority: [{name: '全选', checked: true},{name: '查看', checked: true},{name: '导出', checked: true},{name: '编辑模板', checked: true}],
+        },
+        {
+          xuhao: '12',
+          menu: '计划停电',
+          authority: [{name: '全选', checked: true},{name: '查看', checked: true},{name: '编辑', checked: true},{name: '新增', checked: true},{name: '删除', checked: true}],
+        },
+        {
+          xuhao: '13',
+          menu: '巡检管理',
+          authority: [{name: '全选', checked: true},{name: '查看', checked: true},{name: '编辑', checked: true},{name: '删除', checked: true},{name: '巡检处理', checked: true}],
+        },
+        {
+          xuhao: '14',
+          menu: '运维管理',
+          authority: [{name: '全选', checked: true},{name: '查看', checked: true},{name: '编辑', checked: true},{name: '新增', checked: true}],
+        },
+        {
+          xuhao: '15',
+          menu: '工单管理',
+          authority: [{name: '全选', checked: true},{name: '查看', checked: true},{name: '编辑', checked: true},{name: '新增', checked: true},{name: '删除', checked: true},{name: '工单处理', checked: true}],
+        },
+        {
+          xuhao: '16',
+          menu: '用户管理',
+          authority: [{name: '全选', checked: true},{name: '查看', checked: true},{name: '编辑', checked: true},{name: '新增', checked: true},{name: '删除', checked: true}],
+        },
+        {
+          xuhao: '17',
+          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) {
+        return `text-align:left!important;cursor:pointer;`
+      }
+    },
+  },
+}
+</script>
+<style  lang="scss">
+
+.roleInfoPage .el-table .cell {
+    text-align: left!important;
+}
+</style>

src/views/systemManage/userManage/checkVideo.vue

@@ -1,243 +0,0 @@
-<template>
-  <transition name="dialog-fade">
-    <el-dialog
-      v-if="showDialog"
-      :title="dialogTitle"
-      class="dialog-component"
-      v-model="showDialog"
-      width="800px"
-      @close="closeDialog(0)"
-    >
-      <el-form
-        ref="formInfo"
-        class="demo-form-inline alarmStatusDialog"
-        label-width="130px"
-  
-      >
-        <div class="topInfo underline">
-          <el-row :gutter="20">
-            <el-col :span="12">
-              <el-form-item label="户号：">2021-09-14 14:53:28</el-form-item>
-              <el-form-item label="站点名称：">测试222</el-form-item>
-              <el-form-item label="监察：">张三</el-form-item>
-              <el-form-item label="电试报告时间：">
-                <div>2021-09-14</div>
-                <div>距离电试超期还有 730 天</div>
-              </el-form-item>
-            </el-col>
-            <el-col :span="12">
-              <div class="grid-content">
-                <el-form-item label="流变变比：">11111</el-form-item>
-                <el-form-item label="单路电源容量：">11</el-form-item>
-                <el-form-item label="线路：">育11彭伟万众实业</el-form-item>
-              </div>
-            </el-col>
-          </el-row>
-        </div>
-
-        <el-row :gutter="20">
-          <el-col :span="12">
-            <div class="basicTit">现场问题：</div>
-            <el-form-item label="电缆空洞：">
-              <el-radio v-model="radio1" label="1">备选项</el-radio>
-              <div><img src="@/assets/images/archiveImg.png" alt="" /></div>
-            </el-form-item>
-            <el-form-item label="堆放杂物：">
-              <el-radio v-model="radio2" label="2">是</el-radio>
-              <div><img src="@/assets/images/archiveImg.png" alt="" /></div>
-            </el-form-item>
-            <el-form-item label="缺少模拟屏：">
-              <el-radio v-model="radio3" label="3">是</el-radio>
-              <div><img src="@/assets/images/archiveImg.png" alt="" /></div>
-            </el-form-item>
-          </el-col>
-          <el-col :span="8" :offset="2">
-            <div class="grid-content">
-              <div class="basicTit">其他</div>
-              <div>
-                <el-radio v-model="radio1" label="1">屋顶墙壁渗漏水：</el-radio>
-              </div>
-              <div>
-                <el-radio v-model="radio1" label="1">门窗、墙壁破损：</el-radio>
-              </div>
-              <div>
-                <el-radio v-model="radio1" label="1">灭火器配置不足：</el-radio>
-              </div>
-              <div>
-                <el-radio v-model="radio1" label="1">灭火器超期：</el-radio>
-              </div>
-              <div>
-                <el-radio v-model="radio1" label="1">积灰严重：</el-radio>
-              </div>
-              <div>
-                <el-radio v-model="radio1" label="1">无电工：</el-radio>
-              </div>
-              <div>
-                <el-radio v-model="radio1" label="1">
-                  电工人数配置不足：
-                </el-radio>
-              </div>
-              <div>
-                <el-radio v-model="radio1" label="1">电工证超期：</el-radio>
-              </div>
-              <div>
-                <el-radio v-model="radio1" label="1">
-                  配置不足（绝缘体）：
-                </el-radio>
-              </div>
-              <div  class="mb-10">
-                <el-radio v-model="radio1" label="1">
-                  缺少接地线与存放位置编号：
-                </el-radio>
-              </div>
-              <div>
-                备注:
-              
-                  <el-input v-model="formInfo.remark" style="width:160px"></el-input>
-               
-              </div>
-            </div>
-          </el-col>
-        </el-row>
-      </el-form>
-    </el-dialog>
-  </transition>
-</template>
-
-<script>
-export default {
-  name: 'CheckVideo',
-  props: {
-    dialogTitle: {
-      type: String,
-    },
-    itemInfo: {
-      type: Object,
-      default: function () {
-        return {}
-      },
-    },
-  },
-  data() {
-    return {
-      checked: true,
-      showDialog: false,
-      formInfo: JSON.parse(JSON.stringify(this.itemInfo)),
-      radio1: '1',
-      radio2: '2',
-      radio3: '3',
-
-      options: [
-        {
-          value: '选项1',
-          label: '站点一',
-        },
-        {
-          value: '选项2',
-          label: '站点二',
-        },
-        {
-          value: '选项3',
-          label: '站点三',
-        },
-        {
-          value: '选项4',
-          label: '站点四',
-        },
-        {
-          value: '选项5',
-          label: '站点五',
-        },
-      ],
-
-      rules: {
-        watchName: [
-          // required  是否为必填项， trigger:表单验证的触发时机，失去焦点进行验证
-          { required: true, message: '请输入设备名称', trigger: 'blur' },
-          {
-            min: 3,
-            max: 6,
-            message: '用户名长度在 3 到 6 个字符',
-            trigger: 'blur',
-          },
-        ],
-        watchCode: [
-          { required: true, message: '请输入设备编号', trigger: 'blur' },
-          {
-            min: 3,
-            max: 6,
-            message: '用户名长度在 3 到 6 个字符',
-            trigger: 'blur',
-          },
-        ],
-        routeAddress: [
-          { required: true, message: '请选则回路表记地址', trigger: 'change' },
-        ],
-        ratedVoltage: [
-          { required: true, message: '请选择站点列表', trigger: 'change' },
-        ],
-        ratedCurrent: [
-          { required: true, message: '请输入已选站点个数', trigger: 'blur' },
-          { trigger: 'blur' },
-        ],
-        fzlMx: [
-          { required: true, message: '请输入挂载设备个数', trigger: 'blur' },
-          { trigger: 'blur' },
-        ],
-      },
-    }
-  },
-  methods: {
-    roleValid(rule, value, callback) {
-      if (value.length === 0) {
-        callback(new Error('角色不能为空'))
-      } else {
-        callback()
-      }
-    },
-
-    // onSelectedDrug(event) {
-    //   this.routeAddress = event;
-    //   console.log(this.routeAddress);
-    // },
-    // 保存操作
-    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-input,
-.el-select {
-  width: 240px;
-}
-
-// label样式
-.el-form-item__label {
-  width: 150px;
-}
-.el-form-item__content {
-  margin-left: 150px;
-}
-</style>

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

@@ -0,0 +1,160 @@
+<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

@@ -1,35 +1,31 @@
 <template>
-  <transition name="dialog-fade">
     <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="accountNumber">
-          <el-input v-model="formInfo.accountNumber"></el-input>
+          <el-input v-model="form.accountNumber"></el-input>
         </el-form-item>
         <el-form-item label="用户名：" prop="userName">
-          <el-input v-model="formInfo.userName"></el-input>
+          <el-input v-model="form.userName"></el-input>
         </el-form-item>
         <el-form-item label="手机号码：" prop="phone">
-          <el-input v-model="formInfo.phone"></el-input>
+          <el-input v-model="form.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 />
@@ -41,55 +37,104 @@
         </div>
       </el-form>
     </el-dialog>
-  </transition>
 </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: {
         accountNumber: [
           // required  是否为必填项， trigger:表单验证的触发时机，失去焦点进行验证
@@ -120,43 +165,10 @@ export default {
           },
         ],
       },
-    };
+    }
   },
-  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">

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

@@ -0,0 +1,277 @@
+<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,42 +121,36 @@
 
     <!--弹框组件开始-----------------------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>
 </template>
 
 <script>
-import DialogComponent from "./dialogComponent";
-
-export default {
-  name: "VariableList",
-
-  components: { DialogComponent, },
 
-  data() {
-    return {
-
-      userName:'',
-      phone:'',
-      region: "",
-      role:'',
-
-      currentPage4: 4,
+import { defineComponent, ref,reactive} from 'vue'
 
-      showDialog: true,
+import DialogComponent from "./dialogComponent";
 
-      tableData: [
-        {
+export default defineComponent({
+  components: { DialogComponent},
+  setup() {
+    const userName = ref('')
+    const phone = ref('')
+    const region = ref('')
+    const role = ref('')
+    const currentPage4 = ref(4)
+    const dialogTitle = ref('')
+    const showDialog = ref(false)
+    const tableData = ref([
+      {
            xh: "1",
           userName: "张三",
           sex: "男",
@@ -173,67 +167,25 @@ export default {
           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) {
+    const handleSizeChange=(val)=> {
       console.log(`每页 ${val} 条`);
-    },
-    handleCurrentChange(val) {
+    }
+    const handleCurrentChange=(val)=> {
       console.log(`当前页: ${val}`);
-    },
+    }
 
-    // 表头样式设置
-    headClass() {
+    // // 表头样式设置
+    const 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 = {
+    const tableItem = reactive([])
+     // 添加操作
+    const addItem=()=> {
+      tableItem.value = {
         id: "",
         stationName: "",
         xh: "",
@@ -243,35 +195,55 @@ export default {
         guaZai: "",
         checked: true,
       };
-      this.dialogTitle = "新增";
-      this.showDialog = true;
-      this.$nextTick(() => {
-        this.$refs["dialogComponent"].showDialog = true;
-      });
-    },
+      dialogTitle.value = "新增";
+      showDialog.value = true;
+
+    }
+
+     // 查看
+    const checkItem=(row)=> {
+      console.log(row)
+      tableItem.value = row
+      dialogTitle.value = '查看'
+      showDialog.value = true
+    }
 
     // 编辑操作
-    editRow(row) {
-      console.log(row);
-      this.tableItem = row;
-      this.dialogTitle = "编辑";
-      this.showDialog = true;
-      this.$nextTick(() => {
-        this.$refs["dialogComponent"].showDialog = true;
-      });
-    },
+    const editRow = (row) => {
+      console.log(row)
+      tableItem.value = row
+      dialogTitle.value = '编辑'
+      showDialog.value = true
+    }
 
     // 关闭操作
-    closeDialog(flag) {
-      if (flag) {
-        // 重新刷新表格内容
-        this.fetchData();
-      }
-      this.showDialog = false;
-    },
+    const closeDialog = () => {
+      showDialog.value = false
+    }
+
+    return {
+       userName,
+      phone,
+      region,
+      role,
+      tableItem,
+      currentPage4,
+      dialogTitle,
+      showDialog,
+      tableData,
+      handleSizeChange,
+      handleCurrentChange,
+      headClass,
+      checkItem,
+      addItem,
+      editRow,
+      closeDialog,
+    }
+
   },
-};
+})
 </script>
 
+
 <style lang="scss" scoped>
 </style>