用户管理/权限管理功能模块完善

src/assets/css/index.scss

@@ -1210,34 +1210,34 @@ div:focus {
     .el-radio-button__inner {
         width: 100%;
         // line-height: 40px;
-        padding: 13px 15px
-    }
-
-    .el-radio-button__inner {
+        padding: 13px 15px;
+        display: flex;
         border-left: 1px solid #dcdfe6;
         text-align: left;
         position: relative; // border-bottom: none;
 
-        img {
-            margin-right: 5px
+        .iconfont {
+            width: 16px;
+            margin: auto 10px auto 0;
         }
 
-        i {
-            position: absolute;
-            right: 10px;
-            font-size: 15px;
-            color: #F80000;
+        .title {
+            margin: auto 0;
+        }
+
+        .button {
+            margin: auto 0 auto auto;
+            padding: 0;
             opacity: 0
         }
-    }
 
-    .el-radio-button__inner:hover {
-        color: #444;
-        background: #f1f7fc;
+        &:hover {
+            color: #444;
+            background: #f1f7fc;
 
-        // border-color: #f1f7fc;
-        i {
-            opacity: 1;
+            .button {
+                opacity: 1;
+            }
         }
     }
 

src/views/dataManage/consumConfig/tables/basicTable.vue

@@ -1,87 +1,38 @@
 <template>
   <div>
     <div class="basicHeader">
-      <el-button
-        class="search-button"
-        icon="el-icon-plus"
-        type="success"
-        @click="install()"
-      >
+      <el-button class="search-button" icon="Plus" type="success" @click="install()">
         添加监测项
       </el-button>
-      <el-button
-        class="search-button"
-        icon="el-icon-plus"
-        type="success"
-        @click="oneTouch()"
-      >
+      <el-button class="search-button" icon="Plus" type="success" @click="oneTouch()">
         一键生成
       </el-button>
-      <el-button class="search-button" icon="el-icon-s-fold" @click="senior()">
+      <el-button class="search-button" icon="Fold" @click="senior()">
         高级功能
       </el-button>
 
       <div class="videoRight">
-        <el-button icon="el-icon-download" type="primary">导入</el-button>
-        <el-button icon="el-icon-upload2" type="primary">导出</el-button>
+        <el-button icon="Download" type="primary">导入</el-button>
+        <el-button icon="Upload" type="primary">导出</el-button>
       </div>
     </div>
     <div style="margin: 0 15px">
-      <el-table
-        :data="tableData"
-        border
-        stripe
-        :header-cell-style="headClass"
-        :height="tableHeight"
-      >
+      <el-table :data="tableData" border stripe :header-cell-style="{ background: '#FAFAFA !important', color: 'black' }"
+        :height="tableHeight">
         <el-table-column type="index" label="序号" width="50"></el-table-column>
-        <el-table-column
-          prop="numCode"
-          label="变量编码"
-          width=""
-        ></el-table-column>
-        <el-table-column
-          prop="meterLevel"
-          label="计量级别"
-          width=""
-        ></el-table-column>
-        <el-table-column
-          prop="category"
-          label="类别"
-          width=""
-        ></el-table-column>
-        <el-table-column
-          prop="accessRd"
-          label="支路"
-          width=""
-        ></el-table-column>
+        <el-table-column prop="numCode" label="变量编码" width=""></el-table-column>
+        <el-table-column prop="meterLevel" label="计量级别" width=""></el-table-column>
+        <el-table-column prop="category" label="类别" width=""></el-table-column>
+        <el-table-column prop="accessRd" label="支路" width=""></el-table-column>
         <el-table-column prop="subItem" label="分项" width=""></el-table-column>
-        <el-table-column
-          prop="department"
-          label="部门"
-          width=""
-        ></el-table-column>
-        <el-table-column
-          prop="partition"
-          label="分区"
-          width=""
-        ></el-table-column>
+        <el-table-column prop="department" label="部门" width=""></el-table-column>
+        <el-table-column prop="partition" label="分区" width=""></el-table-column>
         <el-table-column label="操作" width="150">
           <template #default="scope">
-            <el-button
-              type="text"
-              size="small"
-              style="color: #409eff"
-              @click.prevent="Update(scope.row)"
-            >
+            <el-button type="text" size="small" style="color: #409eff" @click.prevent="Update(scope.row)">
               编辑
             </el-button>
-            <el-button
-              @click="Delete(scope.$index, scope.row)"
-              type="text"
-              size="small"
-              style="color: red"
-            >
+            <el-button @click="Delete(scope.$index, scope.row)" type="text" size="small" style="color: red">
               删除
             </el-button>
           </template>
@@ -90,183 +41,48 @@
     </div>
   </div>
 </template>
-<script>
-// import { useStore } from 'vuex'
-import { defineComponent, ref } from 'vue'
-
-export default defineComponent({
-  name: 'consumConfig',
-  components: {},
-  props: {},
-  setup() {
-    // const store = useStore()
-    
-    const install = () => {
-      console.log('')
-    }
-    const oneTouch = () => {
-      console.log('')
-    }
-    const senior = () => {
-      console.log('')
-    }
-
-    // 表头样式设置
-    const headClass = () => {
-      return 'background:#FAFAFA !important;color: black;'
-    }
+<script setup>
+/*----------------------------------依赖引入-----------------------------------*/
+import { ElMessage, ElNotification } from 'element-plus'
+import { ref, onMounted, watch, getCurrentInstance, reactive, toRefs, } from 'vue'
+/*----------------------------------接口引入-----------------------------------*/
+/*----------------------------------组件引入-----------------------------------*/
+/*----------------------------------store引入-----------------------------------*/
+/*----------------------------------公共方法引入-----------------------------------*/
+/*----------------------------------公共变量-----------------------------------*/
+const props = defineProps({}) //数据双向绑定
+const emit = defineEmits([])
+const { proxy } = getCurrentInstance()
+/*----------------------------------变量声明-----------------------------------*/
+const state = reactive({
+  activeName: "consBasic",
+  tableData: [
+    {
+      numCode: '05-01',
+      meterLevel: 'Tom',
+      category: '11:01:08',
+      accessRd: '',
+      subItem: '',
+      department: '',
+      partition: '',
+    },
+  ],
+})
+const { activeName, tableData } = toRefs(state)
 
-    const tableHeight = ref('200')
-    tableHeight.value = window.innerHeight - 260 + 'px'
-    window.onresize = function () {
-      tableHeight.value = window.innerHeight - 260 + 'px'
-    }
+const install = () => {
+  console.log('')
+}
+const oneTouch = () => {
+  console.log('')
+}
+const senior = () => {
+  console.log('')
+}
 
-    return {
-      tableHeight,
-      headClass,
-      activeName: ref('consBasic'),
-      install, //添加监测项事件
-      oneTouch, //一键生成事件
-      senior, //高级功能事件
-      tableData: [
-        {
-          numCode: '05-01',
-          meterLevel: 'Tom',
-          category: '11:01:08',
-          accessRd: '',
-          subItem: '',
-          department: '',
-          partition: '',
-        },
-        {
-          numCode: '05-01',
-          meterLevel: 'Tom',
-          category: '11:01:08',
-          accessRd: '',
-          subItem: '',
-          department: '',
-          partition: '',
-        },
-        {
-          numCode: '05-01',
-          meterLevel: 'Tom',
-          category: '11:01:08',
-          accessRd: '',
-          subItem: '',
-          department: '',
-          partition: '',
-        },
-        {
-          numCode: '05-01',
-          meterLevel: 'Tom',
-          category: '11:01:08',
-          accessRd: '',
-          subItem: '',
-          department: '',
-          partition: '',
-        },
-        {
-          numCode: '05-01',
-          meterLevel: 'Tom',
-          category: '11:01:08',
-          accessRd: '',
-          subItem: '',
-          department: '',
-          partition: '',
-        },
-        {
-          numCode: '05-01',
-          meterLevel: 'Tom',
-          category: '11:01:08',
-          accessRd: '',
-          subItem: '',
-          department: '',
-          partition: '',
-        },
-        {
-          numCode: '05-01',
-          meterLevel: 'Tom',
-          category: '11:01:08',
-          accessRd: '',
-          subItem: '',
-          department: '',
-          partition: '',
-        },
-        {
-          numCode: '05-01',
-          meterLevel: 'Tom',
-          category: '11:01:08',
-          accessRd: '',
-          subItem: '',
-          department: '',
-          partition: '',
-        },
-        {
-          numCode: '05-01',
-          meterLevel: 'Tom',
-          category: '11:01:08',
-          accessRd: '',
-          subItem: '',
-          department: '',
-          partition: '',
-        },
-        {
-          numCode: '05-01',
-          meterLevel: 'Tom',
-          category: '11:01:08',
-          accessRd: '',
-          subItem: '',
-          department: '',
-          partition: '',
-        },
-        {
-          numCode: '05-01',
-          meterLevel: 'Tom',
-          category: '11:01:08',
-          accessRd: '',
-          subItem: '',
-          department: '',
-          partition: '',
-        },
-        {
-          numCode: '05-01',
-          meterLevel: 'Tom',
-          category: '11:01:08',
-          accessRd: '',
-          subItem: '',
-          department: '',
-          partition: '',
-        },
-        {
-          numCode: '05-01',
-          meterLevel: 'Tom',
-          category: '11:01:08',
-          accessRd: '',
-          subItem: '',
-          department: '',
-          partition: '',
-        },
-        {
-          numCode: '05-01',
-          meterLevel: 'Tom',
-          category: '11:01:08',
-          accessRd: '',
-          subItem: '',
-          department: '',
-          partition: '',
-        },
-        {
-          numCode: '05-01',
-          meterLevel: 'Tom',
-          category: '11:01:08',
-          accessRd: '',
-          subItem: '',
-          department: '',
-          partition: '',
-        },
-      ],
-    }
-  },
-})
+const tableHeight = ref('200')
+tableHeight.value = window.innerHeight - 260 + 'px'
+window.onresize = function () {
+  tableHeight.value = window.innerHeight - 260 + 'px'
+}
 </script>

src/views/dataManage/consumConfig/tables/deviationTable.vue

@@ -2,37 +2,19 @@
   <div>
     <div class="basicHeader">
       <div class="videoRight">
-        <el-button icon="el-icon-download" type="primary">导入</el-button>
-        <el-button icon="el-icon-upload2" type="primary">导出</el-button>
+        <el-button icon="Download" type="primary">导入</el-button>
+        <el-button icon="Upload" type="primary">导出</el-button>
       </div>
     </div>
     <div style="margin: 0 15px">
-      <el-table
-        :data="tableData"
-        border
-        stripe
-        :header-cell-style="headClass"
-        :height="tableHeight"
-      >
+      <el-table :data="tableData" border stripe :header-cell-style="{ background: '#FAFAFA !important', color: 'black' }"
+        :height="tableHeight">
         <el-table-column type="index" label="序号" width="50"></el-table-column>
-        <el-table-column
-          prop="numCode"
-          label="变量编码"
-          width=""
-        ></el-table-column>
-        <el-table-column
-          prop="refValue"
-          label="基准值"
-          width=""
-        ></el-table-column>
+        <el-table-column prop="numCode" label="变量编码" width=""></el-table-column>
+        <el-table-column prop="refValue" label="基准值" width=""></el-table-column>
         <el-table-column fixed="right" label="操作" width="100">
           <template #default="scope">
-            <el-button
-              type="text"
-              size="small"
-              style="color: #409eff"
-              @click.prevent="Update(scope.row)"
-            >
+            <el-button type="text" size="small" style="color: #409eff" @click.prevent="Update(scope.row)">
               编辑
             </el-button>
           </template>
@@ -41,68 +23,34 @@
     </div>
   </div>
 </template>
-<script>
-// import { useStore } from "vuex";
-import { defineComponent, ref } from 'vue'
+<script setup>
+/*----------------------------------依赖引入-----------------------------------*/
+import { ElMessage, ElNotification } from 'element-plus'
+import { ref, onMounted, watch, getCurrentInstance, reactive, toRefs, } from 'vue'
+/*----------------------------------接口引入-----------------------------------*/
+/*----------------------------------组件引入-----------------------------------*/
+/*----------------------------------store引入-----------------------------------*/
+/*----------------------------------公共方法引入-----------------------------------*/
+/*----------------------------------公共变量-----------------------------------*/
+const props = defineProps({}) //数据双向绑定
+const emit = defineEmits([])
+const { proxy } = getCurrentInstance()
+/*----------------------------------变量声明-----------------------------------*/
+const state = reactive({
+  tableData: [
+    {
+      numCode: '05-01',
+      refValue: 'Tom',
+    },
+  ],
+})
+const { tableData } = toRefs(state)
 
-export default defineComponent({
-  name: 'consumConfig',
-  components: {},
-  props: {},
-  setup() {
-    const Update = (row) => {
-      console.log('', row)
-    }
 
-    // 表头样式设置
-    const headClass = () => {
-      return 'background:#FAFAFA !important;color: black;'
-    }
 
-    const tableHeight = ref('200')
-    tableHeight.value = window.innerHeight - 260 + 'px'
-    window.onresize = function () {
-      tableHeight.value = window.innerHeight - 260 + 'px'
-    }
-    return {
-      tableHeight,
-      headClass,
-      Update, //修改偏差配置事件
-      tableData: [
-        {
-          numCode: '05-01',
-          refValue: 'Tom',
-        },
-        {
-          numCode: '05-01',
-          refValue: 'Tom',
-        },
-        {
-          numCode: '05-01',
-          refValue: 'Tom',
-        },
-        {
-          numCode: '05-01',
-          refValue: 'Tom',
-        },
-        {
-          numCode: '05-01',
-          refValue: 'Tom',
-        },
-        {
-          numCode: '05-01',
-          refValue: 'Tom',
-        },
-        {
-          numCode: '05-01',
-          refValue: 'Tom',
-        },
-        {
-          numCode: '05-01',
-          refValue: 'Tom',
-        },
-      ],
-    }
-  },
-})
+const tableHeight = ref('200')
+tableHeight.value = window.innerHeight - 260 + 'px'
+window.onresize = function () {
+  tableHeight.value = window.innerHeight - 260 + 'px'
+}
 </script>

src/views/systemManage/rolePermission/addRoleCom.vue

@@ -1,18 +1,6 @@
 <template>
-  <el-dialog
-    :title="dialogTitle"
-    v-model="dialogVisible"
-    width="400px"
-    @close="closeDialog()"
-    @open="open"
-  >
-    <el-form
-      ref="formInfo"
-      :model="form"
-      class="demo-form-inline"
-      label-width="100px"
-      :rules="rules"
-    >
+  <el-dialog :title="dialogTitle" v-model="dialogVisible" width="400px" @close="closeDialog()" @open="open">
+    <el-form ref="formInfo" :model="form" class="demo-form-inline" label-width="100px" :rules="rules">
       <el-form-item label="角色名称：" prop="roleName">
         <el-input v-model="form.roleName"></el-input>
       </el-form-item>
@@ -27,12 +15,7 @@
       </el-form-item>
 
       <el-form-item label="角色排序:" prop="roleSort">
-        <el-input-number
-          v-model="form.roleSort"
-          controls-position="right"
-          :min="0"
-          :max="255"
-        ></el-input-number>
+        <el-input-number v-model="form.roleSort" controls-position="right" :min="0" :max="255"></el-input-number>
       </el-form-item>
 
       <div style="text-align: right">
@@ -43,127 +26,101 @@
     </el-form>
   </el-dialog>
 </template>
-<script>
-import { defineComponent, ref, watchEffect } from 'vue'
+<script setup>
+/*----------------------------------依赖引入-----------------------------------*/
+import { ElMessage, ElNotification } from 'element-plus'
+import { ref, onMounted, watch, getCurrentInstance, reactive, toRefs } from 'vue'
+/*----------------------------------接口引入-----------------------------------*/
 import * as api from '@/api/systemManage/rolePermission.js'
-import { ElMessage } from 'element-plus'
-
-export default defineComponent({
-  name: 'AddRoleCom',
-  emits: ['closeDialog'],
-  props: {
-    flag: Boolean,
-    dialogTitle: String,
-    itemInfo: Object,
+/*----------------------------------组件引入-----------------------------------*/
+/*----------------------------------store引入-----------------------------------*/
+/*----------------------------------公共方法引入-----------------------------------*/
+/*----------------------------------公共变量-----------------------------------*/
+const props = defineProps({
+  itemInfo: Object,
+}) //数据双向绑定
+const emit = defineEmits(['handleSelect']);
+const { proxy } = getCurrentInstance();
+/*----------------------------------变量声明-----------------------------------*/
+const dialogTitle = ref(null)
+const dialogVisible = ref(false)
+const state = reactive({
+  form: {},
+  rules: {
+    roleName: [
+      { required: true, message: '请输入角色名称', trigger: 'blur' },
+    ],
+    roleKey: [
+      { required: true, message: '请输入角色权限', trigger: 'blur' },
+    ],
+    status: [
+      { required: true, message: '请选择角色状态', trigger: 'change' },
+    ],
   },
-  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
-      console.log()
-    }
-
-    // 关闭弹框
-    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 { form, rules } = toRefs(state)
 
-    // 保存-修改操作
-    const submitForm = () => {
-      console.log(formInfo)
-      formInfo.value.validate((valid) => {
-        if (valid) {
-          // 走保存请求
-          if (props.dialogTitle === '角色新增') {
-            api.roleAdd(form.value).then((requset) => {
-              if (requset.status === 'SUCCESS') {
-                ElMessage.success({
-                  message: '新增成功',
-                  type: 'success',
-                })
-                closeDialog()
 
+// 弹窗打开
+function openDialog(event) {
+  dialogTitle.value = event.dialogTitle;
+  form.value = event.tableItem
 
-                //角色新增成功后，提交全选按钮权限给后台
+  dialogVisible.value = true
+}
 
+// 关闭弹框
+function closeDialog() {
+  proxy.$refs["formInfo"].resetFields()
+  dialogVisible.value = false
+}
 
 
 
-              } else {
-                ElMessage.error(requset.msg)
-              }
+// 保存-修改操作
+function submitForm() {
+  proxy.$refs["formInfo"].validate((valid) => {
+    if (valid) {
+      // 走保存请求
+      if (dialogTitle.value === '角色新增') {
+        api.roleAdd(form.value).then((requset) => {
+          if (requset.status === 'SUCCESS') {
+            ElMessage.success({
+              message: '新增成功',
+              type: 'success',
             })
+            closeDialog()
+            emit('handleSelect', false)
           } else {
-              // alert('修改')
-            api.roleUpdate(form.value).then((requset) => {
-            
-              if (requset.status === 'SUCCESS') {
-                ElMessage.success({
-                  message: '修改成功',
-                  type: 'success',
-                })
-                
-                closeDialog()
-              } else {
-                ElMessage.error(requset.msg)
-              }
+            ElMessage.error(requset.msg)
+          }
+        })
+      } else {
+        // alert('修改')
+        api.roleUpdate(form.value).then((requset) => {
+          if (requset.status === 'SUCCESS') {
+            ElMessage.success({
+              message: '修改成功',
+              type: 'success',
             })
+            closeDialog()
+            emit('handleSelect', false)
+          } else {
+            ElMessage.error(requset.msg)
           }
-        } else {
-          console.log('error submit!!')
-          return false
-        }
-      })
+        })
+      }
+    } else {
+      console.log('error submit!!')
+      return false
     }
+  })
+}
 
-    return {
-      closeDialog,
-      dialogVisible,
-      roleValid,
-      formInfo,
-      form,
-      open,
-      submitForm,
-      rules: {
-        roleName: [
-          { required: true, message: '请输入角色名称', trigger: 'blur' },
-        ],
-        roleKey: [
-          { required: true, message: '请输入角色权限', trigger: 'blur' },
-        ],
-        status: [
-          { required: true, message: '请选择角色状态', trigger: 'change' },
-        ],
-      },
-    }
-  },
-})
+// 暴露变量
+defineExpose({
+  openDialog,
+});
 </script>
  
-<style scoped lang="scss">
-</style>
+<style scoped lang="scss"></style>

src/views/systemManage/rolePermission/index.vue

@@ -9,12 +9,13 @@
         <el-button type="primary" @click="editRole()"
           :disabled="store.state.authorities.indexOf('修改') == -1">修改</el-button>
       </div>
-      <el-radio-group v-model="radio1">
-        <el-radio-button @change="listTabsChange(radio1, item)" v-for="(item, index) in roleData" :label="item.roleId"
-          :key="index">
-          <img src="@/assets/images/userIcon.svg" />
-          {{ item.roleName }}
-          <i v-if="store.state.authorities.indexOf('删除') != -1" class="el-icon-delete" @click="deleteRoleItem(item)"></i>
+      <el-radio-group v-model="roleValue">
+        <el-radio-button v-for="(item, index) in roleData" :label="item.roleId" :key="index"
+          @change="listTabsChange(roleValue, item)">
+          <User class="iconfont" />
+          <div class="title">{{ item.roleName }}</div>
+          <el-button class="button" type="danger" icon="Delete" v-if="store.state.authorities.indexOf('删除') != -1"
+            @click="deleteRoleItem(item)" link></el-button>
         </el-radio-button>
       </el-radio-group>
     </div>
@@ -24,230 +25,170 @@
     <div class="grid-content nestingDom" style="width: calc(100% - 300px)">
       <role-info-com class="basicInfo" style="height: calc(100vh - 130px)"
         v-if="menuData.length > 0 && menuData2.length > 0" :menuData="menuData" :menuData2="menuData2"
-        :checkedKeys="checkedKeys" :objItem="objItem" :radio1="radio1"></role-info-com>
+        :checkedKeys="checkedKeys" :objItem="objItem" :radio1="roleValue"></role-info-com>
     </div>
     <!-- 右侧表格end -->
 
     <!-- 新建角色start -->
-    <add-role-com :dialog-title="dialogTitle" :itemInfo="tableItem" @closeDialog="closeDialog"
-      :flag="showDialog"></add-role-com>
+    <add-role-com ref="addRoleComRef" @handleSelect="roleList()"></add-role-com>
     <!-- 新建角色end -->
   </div>
 </template>
 
-<script>
-import { defineComponent, ref, reactive, onMounted } from 'vue'
+<script setup>
+/*----------------------------------依赖引入-----------------------------------*/
+import { useStore } from 'vuex'
+import { ElMessage, ElNotification } from 'element-plus'
+import { ref, onMounted, watch, getCurrentInstance, reactive, toRefs } from 'vue'
+/*----------------------------------接口引入-----------------------------------*/
 import * as api from '@/api/systemManage/rolePermission.js'
-import { ElMessage } from 'element-plus'
-
+/*----------------------------------组件引入-----------------------------------*/
 import roleInfoCom from './roleInfoCom'
 import addRoleCom from './addRoleCom'
-import { useStore } from 'vuex'
-
-export default defineComponent({
-  components: { roleInfoCom, addRoleCom },
-  setup() {
-    const store = useStore()
-    const radio1 = ref('1')
-    const showDialog = ref(false)
-    const roleData = ref([])
-    const menuData = ref([])
-    const menuData2 = ref([])
-    const newMenuData = ref([])
-    const checkedKeys = ref([])
-    const objItem = ref({})
-
-    const dialogTitle = ref('')
+/*----------------------------------store引入-----------------------------------*/
+/*----------------------------------公共方法引入-----------------------------------*/
+/*----------------------------------公共变量-----------------------------------*/
+const store = useStore()
+const props = defineProps({}) //数据双向绑定
+const emit = defineEmits([]);
+const { proxy } = getCurrentInstance();
+/*----------------------------------变量声明-----------------------------------*/
+const state = reactive({
+  roleData: [],
+  roleValue: "1",
+  menuData: [],
+  menuData2: [],
+  checkedKeys: [],
+  objItem: {}
+})
+const { roleData, roleValue, menuData, menuData2, checkedKeys, objItem } = toRefs(state)
 
-    // 删除左侧角色列表
-    function deleteRoleItem(item) {
-      // item
-      // console.log(radio1.value)
-      // console.log(item.roleId)
-      // this.roleData.splice(params, 1)
 
-      api.roleDelete({}, item.roleId).then((requset) => {
-        if (requset.status === 'SUCCESS') {
-          ElMessage.success({
-            message: '删除成功',
-            type: 'success',
-          })
-          roleList()
-        } else {
-          ElMessage.error(requset.msg)
-        }
+// 删除左侧角色列表
+function deleteRoleItem(item) {
+  api.roleDelete({}, item.roleId).then((requset) => {
+    if (requset.status === 'SUCCESS') {
+      ElMessage.success({
+        message: '删除成功',
+        type: 'success',
       })
+      roleList()
+    } else {
+      ElMessage.error(requset.msg)
     }
+  })
+}
 
-    // 新增角色
-    const tableItem = reactive([])
-
-    function addRole() {
-      // alert('新增')
-      tableItem.value = {
-        roleName: '',
-        roleKey: '',
-        status: '',
-        roleSort: 1,
-      }
-      dialogTitle.value = '角色新增'
-      showDialog.value = true
+// 新增角色
+function addRole() {
+  proxy.$refs['addRoleComRef'].openDialog({
+    dialogTitle: "角色新增",
+    tableItem: {
+      roleName: '',
+      roleKey: '',
+      status: '',
+      roleSort: 1,
     }
+  })
+}
 
-    // 修改角色
-    function editRole() {
-      // alert('修改')
-      // console.log(radio1.value)
-      api.roleDetail({}, radio1.value).then((requset) => {
-        if (requset.status === 'SUCCESS') {
-          tableItem.value = {
-            roleName: requset.data.roleName,
-            roleKey: requset.data.roleKey,
-            status: requset.data.status,
-            roleSort: Number(requset.data.roleSort),
-            roleId: requset.data.roleId,
-          }
-
-          dialogTitle.value = '角色修改'
-          showDialog.value = true
-        } else {
-          ElMessage.error(requset.msg)
+// 修改角色
+function editRole() {
+  api.roleDetail({}, roleValue.value).then((requset) => {
+    if (requset.status === 'SUCCESS') {
+      proxy.$refs['addRoleComRef'].openDialog({
+        dialogTitle: "角色修改",
+        tableItem: {
+          roleName: requset.data.roleName,
+          roleKey: requset.data.roleKey,
+          status: requset.data.status,
+          roleSort: Number(requset.data.roleSort),
+          roleId: requset.data.roleId,
         }
       })
+    } else {
+      ElMessage.error(requset.msg)
     }
+  })
+}
 
-    const listTabsChange = (value, item) => {
-      // console.log('value')
-      console.log(radio1.value)
-      radio1.value = value
-      objItem.value = item
-      // console.log('objItem.value')
-      // console.log(objItem.value)
-      roleMenuTreeselect()
-      getAuthorityTable()
-
-    }
-
+const listTabsChange = (value, item) => {
+  roleValue.value = value
+  objItem.value = item
 
-    // 表格树结构渲染
-    function roleMenuTreeselect() {
-      menuData.value = []
-      api.roleMenuTreeselect({}, radio1.value).then((requset) => {
-        if (requset.code == 200) {
-          menuData.value = requset.data.menus
-          // getTreeData2(menuData.value) //对树结构返回值进行重组
-          checkedKeys.value = requset.data.checkedKeys
+  roleMenuTreeselect()
+  getAuthorityTable()
+}
 
-          //当返回值没有选中菜单时,否
-          if (!checkedKeys.value.length) {
-            menuData.value.map((item) => {
-              item.authority2 = '0'
-            })
 
-            if (radio1.value == 1) {
-              menuData.value.map(function (item) {
-                checkedKeys.value.push(item.id)
-                checkedKeys.value.map(function (num) {
-                  if (JSON.stringify(item).indexOf(num) != -1) {
-                    item.authority2 = '1'
-                  }
-                })
-              })
-            }
-          } else {
-            menuData.value.map(function (item) {
-              item.authority2 = '0'
-              checkedKeys.value.map(function (num) {
-                if (JSON.stringify(item).indexOf(num) != -1) {
-                  item.authority2 = '1'
-                }
-              })
+// 表格树结构渲染
+function roleMenuTreeselect() {
+  menuData.value = []
+  api.roleMenuTreeselect({}, roleValue.value).then((requset) => {
+    if (requset.code == 200) {
+      menuData.value = requset.data.menus
+      // getTreeData2(menuData.value) //对树结构返回值进行重组
+      checkedKeys.value = requset.data.checkedKeys
+
+      //当返回值没有选中菜单时,否
+      if (!checkedKeys.value.length) {
+        menuData.value.map((item) => {
+          item.authority2 = '0'
+        })
+
+        if (roleValue.value == 1) {
+          menuData.value.map(function (item) {
+            checkedKeys.value.push(item.id)
+            checkedKeys.value.map(function (num) {
+              if (JSON.stringify(item).indexOf(num) != -1) {
+                item.authority2 = '1'
+              }
             })
-          }
-        } else {
-          ElMessage.error(requset.msg)
-        }
-      })
-    }
-
-    //小吉新接口渲染右侧表格树数据
-    function getAuthorityTable() {
-      menuData2.value = []
-      api.getAuthorityTable({ roleId: radio1.value }).then((requset) => {
-        if (requset.code == 200) {
-          menuData2.value = requset.data
-        } else {
-          ElMessage.error(requset.msg)
-        }
-      })
-    }
-
-
-    function getTreeData2(data) {
-      for (var i = 0; i < data.length; i++) {
-        if (data[i].label == data[i].children[0].label) {
-          // console.log(data[i].label)
-          data[i].children = data[i].children[0].children
+          })
         }
+      } else {
+        menuData.value.map(function (item) {
+          item.authority2 = '0'
+          checkedKeys.value.map(function (num) {
+            if (JSON.stringify(item).indexOf(num) != -1) {
+              item.authority2 = '1'
+            }
+          })
+        })
       }
-      return data
+    } else {
+      ElMessage.error(requset.msg)
     }
+  })
+}
 
-    // 关闭弹框操作
-    const closeDialog = () => {
-      showDialog.value = false
-      roleList()
-      console.log('1111aaa' + radio1.value)
+//渲染右侧表格树数据
+function getAuthorityTable() {
+  menuData2.value = []
+  api.getAuthorityTable({ roleId: roleValue.value }).then((requset) => {
+    if (requset.code == 200) {
+      menuData2.value = requset.data
+    } else {
+      ElMessage.error(requset.msg)
     }
-    //角色列表
-    function roleList() {
+  })
+}
 
-      api.roleList().then((requset) => {
-        if (requset.code === 200) {
-          roleData.value = requset.rows
-          // var item = requset.rows[0]
-          // objItem.value = {
-          //   roleSort: item.roleSort,
-          //   roleKey: item.roleKey,
-          //   roleName: item.roleName,
-          // }
-        } else {
-          ElMessage.error(requset.msg)
-        }
-      })
+//角色列表
+function roleList() {
+  api.roleList().then((requset) => {
+    if (requset.code === 200) {
+      roleData.value = requset.rows
+    } else {
+      ElMessage.error(requset.msg)
     }
+  })
+}
 
-
-    onMounted(() => {
-
-      roleList()
-      roleMenuTreeselect()
-      getAuthorityTable()
-    })
-
-    return {
-      radio1,
-      showDialog,
-      roleData,
-      dialogTitle,
-      tableItem,
-      menuData,
-      menuData2,
-      newMenuData,
-      checkedKeys,
-      listTabsChange,
-      roleMenuTreeselect,
-      getAuthorityTable,
-      deleteRoleItem,
-      addRole,
-      editRole,
-      closeDialog,
-      objItem,
-      getTreeData2,
-      store,
-
-    }
-  },
+onMounted(() => {
+  roleList()
+  roleMenuTreeselect()
+  getAuthorityTable()
 })
 </script>
 
@@ -278,4 +219,5 @@ export default defineComponent({
 .nestingDom {
   margin-left: 300px;
 }
-</style>
+</style>
+<style lang="scss"></style>

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

@@ -1,122 +0,0 @@
-<template>
-  <div class="siteManage-main roleInfoPage">
-    <div style="text-align: right; margin-bottom: 20px">
-      <!-- <el-button type="success" >新增</el-button> -->
-      <el-button type="primary" @click="saveMenu()">保存</el-button>
-    </div>
-
-    <el-table :data="menuData" border stripe>
-      <el-table-column prop="label" label="菜单" width="180"></el-table-column>
-      <el-table-column prop="authority2" label="权限" class="roleLeft">
-        <template #default="scope">
-          <el-radio-group
-            v-model="scope.row.authority2"
-            @change="listTabsChange(scope.row)"
-          >
-            <el-radio label="1" :disabled="radio1 == 1 ? true : false">
-              是
-            </el-radio>
-            <el-radio label="0" :disabled="radio1 == 1 ? true : false">
-              否
-            </el-radio>
-          </el-radio-group>
-        </template>
-      </el-table-column>
-    </el-table>
-  </div>
-</template>
-
-<script>
-import { defineComponent, ref, onMounted, watch } from 'vue'
-import * as api from '@/api/systemManage/rolePermission.js'
-import { ElMessage } from 'element-plus'
-
-export default defineComponent({
-  name: 'RoleInfoCom',
-  props: ['menuData', 'objItem', 'radio1'],
-
-  // props: {
-  //   menuData: Object,
-  //   objItem: Object,
-  //   radio1: String,
-  // },
-
-  setup(props) {
-    const aa = ref([])
-    const saveArr = ref([])
-
-    function saveMenu() {
-   
-
-
-
-      api
-        .saveMenu({
-          menuIds: saveArr.value,
-          roleId: props.radio1,
-          roleKey: props.objItem.roleKey,
-          roleName: props.objItem.roleName,
-          roleSort: props.objItem.roleSort,
-        })
-        .then((requset) => {
-          if (requset.status === 'SUCCESS') {
-            ElMessage.success({
-              message: '权限修改成功',
-              type: 'success',
-            })
-          } else {
-            ElMessage.error(requset.msg)
-          }
-        })
-    }
-
-    const listTabsChange = (value) => {
-      saveArr.value = []
-      value
-
-
-      props.menuData.forEach(function (item) {
-        if (item.authority2 == '1') {
-          saveArr.value.push(item.id)
-          var aa = item.children
-          aa.forEach(function (item) {
-              saveArr.value.push(item.id)
-            
-          })
-        }
-      })
-   
-    }
-
-    onMounted(() => {})
-    //监听变化
-    watch(
-      () => props.radio1,
-      (newVal) => {
-        newVal
-
-     
-        // if (newVal == '1') {
-        //   alert(1)
-        //   props.menuData.forEach(function (item) {
-        //     item.authority2 = '1'
-        //     saveArr.value.push(item.id)
-        //   })
-        //   console.log(' 22props.menuData')
-        //   console.log(props.menuData)
-        // }
-      }
-    )
-
-    return {
-      saveMenu,
-      aa,
-      listTabsChange,
-      saveArr,
-    }
-  },
-})
-</script>
-
-<style  lang="scss">
-</style>

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

@@ -1,129 +0,0 @@
-<template>
-  <div class="siteManage-main roleInfoPage">
-    <div style="text-align: right; margin-bottom: 20px">
-      <!-- <el-button type="success" >新增</el-button> -->
-      <el-button
-        type="primary"
-        @click="saveMenu()"
-        :disabled="radio1 == 1 ? true : false"
-      >
-        保存
-      </el-button>
-    </div>
-
-  
-
-    <!-- 带复选框的树结构 start -->
-
-    <el-tree
-      ref="box"
-      :data="menuData"
-      show-checkbox
-      node-key="id"
-      :default-checked-keys="checkedKeys"
-      :props="defaultProps"
-      check-strictly="false"
-      @check="currentChecked"
-    />
-
-    <!-- 带复选框的树结构 end -->
-  </div>
-</template>
-
-<script>
-import { defineComponent, ref, onMounted, watch } from 'vue'
-import * as api from '@/api/systemManage/rolePermission.js'
-import { ElMessage } from 'element-plus'
-
-export default defineComponent({
-  name: 'RoleInfoCom',
-  props: ['menuData', 'objItem', 'radio1', 'checkedKeys'],
-
-  setup(props) {
-    let box = ref(null)
-    const aa = ref([])
-    const saveArr = ref([])
-    function currentChecked(nodeObj, SelectedObj) {
-      saveArr.value = SelectedObj.checkedKeys
-      console.log('saveArr.value')
-      console.log(saveArr.value)
-      // console.log(SelectedObj.checkedNodes)  // 这是选中的节点数组
-    }
-
-    function saveMenu() {
-      api
-        .saveMenu({
-          menuIds: saveArr.value,
-          roleId: props.radio1,
-          roleKey: props.objItem.roleKey,
-          roleName: props.objItem.roleName,
-          roleSort: props.objItem.roleSort,
-        })
-        .then((requset) => {
-          if (requset.status === 'SUCCESS') {
-            ElMessage.success({
-              message: '权限修改成功',
-              type: 'success',
-            })
-          } else {
-            ElMessage.error(requset.msg)
-          }
-        })
-    }
-
-  
-
-    // start
-
-    function getTreeData(data) {
-      // 第二种 修改涉及级联选择器 最后一个空白的情况
-      // 循环遍历json数据
-      for (var i = 0; i < data.length; i++) {
-        data[i]['disabled'] = true
-        if (!data[i].children) {
-          // children若为空数组，则不作操作
-        } else {
-          // children若不为空数组，则继续 递归调用 本方法
-          getTreeData(data[i].children)
-        }
-      }
-      return data
-    }
-
- 
-
-    // end
-
-    onMounted(() => {
-      saveArr.value = props.checkedKeys
-      if (props.radio1 == 1) {
-        getTreeData(props.menuData)
-        console.log('box.value', box.value)
-        // box.value.setCheckedNodes(props.menuData)   //全选
-      }
-    })
-    //监听变化
-    watch(
-      () => props.radio1,
-      (newVal) => {
-        newVal
-
-        
-      }
-    )
-
-    return {
-      saveMenu,
-      aa,
-      saveArr,
-
-      currentChecked,
-      getTreeData,
-      box,
-    }
-  },
-})
-</script>
-
-<style  lang="scss">
-</style>

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

@@ -1,41 +1,18 @@
 <template>
   <div class="siteManage-main roleInfoPage">
-    <el-table
-      :data="menuData2"
-      border
-      stripe
-      :cell-style="cellStyle"
-      row-key="id"
-      default-expand-all
-    >
+    <el-table :data="menuData2" border stripe :cell-style="cellStyle" row-key="id" default-expand-all>
       <el-table-column prop="menu" label="菜单" width="180"></el-table-column>
-      <el-table-column
-        prop="authority"
-        label="权限  （不勾选查询按钮，此菜单无法查看）"
-        align="left"
-        class="roleLeft"
-      >
+      <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"
-            :disabled="
-              radio1 == 1 || scope.row.menu == '权限管理' ? true : false
-            "
-            @change="handleCheckedChange"
-          ></el-checkbox>
+          <el-checkbox v-for="item in scope.row.authority" :label="item.name" :key="item.actionid" v-model="item.checked"
+            :disabled="radio1 == 1 || scope.row.menu == '权限管理' ? true : false
+              " @change="handleCheckedChange"></el-checkbox>
         </template>
       </el-table-column>
     </el-table>
 
     <div style="text-align: right; margin-top: 20px">
-      <el-button
-        type="primary"
-        @click="saveMenu()"
-        :disabled="radio1 == 1 ? true : false"
-      >
+      <el-button type="primary" @click="saveMenu()" :disabled="radio1 == 1 ? true : false">
         保存
       </el-button>
     </div>
@@ -43,122 +20,97 @@
 </template>
 
 
-<script>
-import { defineComponent, ref, onMounted, watch } from 'vue'
+<script setup>
+/*----------------------------------依赖引入-----------------------------------*/
+import { ElMessage, ElNotification } from 'element-plus'
+import { ref, onMounted, watch, getCurrentInstance, reactive, toRefs } from 'vue'
+/*----------------------------------接口引入-----------------------------------*/
 import * as api from '@/api/systemManage/rolePermission.js'
-import { ElMessage } from 'element-plus'
-export default defineComponent({
-  name: 'RoleInfoCom',
-  props: ['menuData', 'menuData2', 'objItem', 'radio1', 'checkedKeys'],
-
-  setup(props) {
-    const saveArr = ref([])
-    const checkedArr = ref([])
-
-    function cellStyle({ row, column, rowIndex, columnIndex }) {
-      row, column, rowIndex
-      if (columnIndex) {
-        return `text-align:left!important;cursor:pointer;`
-      }
-    }
+/*----------------------------------组件引入-----------------------------------*/
+/*----------------------------------store引入-----------------------------------*/
+/*----------------------------------公共方法引入-----------------------------------*/
+/*----------------------------------公共变量-----------------------------------*/
+const props = defineProps({
+  menuData: Object,
+  menuData2: Object,
+  objItem: Object,
+  radio1: Number
+}) //数据双向绑定
+const emit = defineEmits([]);
+const { proxy } = getCurrentInstance();
+/*----------------------------------变量声明-----------------------------------*/
+const state = reactive({
+  saveArr: [],
+  checkedArr: [],
+})
+const { saveArr, checkedArr } = toRefs(state)
 
-    function saveMenu() {
-      console.log('checkedArr')
-      console.log(checkedArr.value)
+function saveMenu() {
+  if (checkedArr.value.length == 0) {
+    ElMessage.warning('菜单权限不能为空! 请至少选择一个菜单查询权限')
+    return
+  }
 
-      if (checkedArr.value.length == 0) {
-        ElMessage.warning('菜单权限不能为空! 请至少选择一个菜单查询权限')
-        return
-      }
-      api
-        .saveMenu({
-          menuIds: checkedArr.value,
-          roleId: props.radio1,
-          roleKey: props.objItem.roleKey,
-          roleName: props.objItem.roleName,
-          roleSort: props.objItem.roleSort,
-        })
-        .then((requset) => {
-          if (requset.status === 'SUCCESS') {
-            ElMessage.success({
-              message: '权限修改成功',
-              type: 'success',
-            })
-          } else {
-            ElMessage.error(requset.msg)
-          }
+  api
+    .saveMenu({
+      menuIds: checkedArr.value,
+      roleId: props.radio1,
+      roleKey: props.objItem.roleKey,
+      roleName: props.objItem.roleName,
+      roleSort: props.objItem.roleSort,
+    })
+    .then((requset) => {
+      if (requset.status === 'SUCCESS') {
+        ElMessage.success({
+          message: '权限修改成功',
+          type: 'success',
         })
-    }
-
-    function getTreeData(data) {
-      // 循环遍历json数据
-      for (var i = 0; i < data.length; i++) {
-        data[i]['disabled'] = true
-        if (!data[i].children) {
-          // children若为空数组，则不作操作
-        } else {
-          // children若不为空数组，则继续 递归调用 本方法
-          getTreeData(data[i].children)
-        }
+      } else {
+        ElMessage.error(requset.msg)
       }
-      return data
-    }
-    function handleCheckedChange() {
-      checkedArr.value = []
-      getCheckedArr()
-    }
+    })
+}
+
+function handleCheckedChange() {
+  checkedArr.value = []
+  getCheckedArr()
+}
 
-    // 复选框选中的数组集合start
-    function getCheckedArr() {
-      props.menuData2.forEach(function (item) {
-        if (item.children) {
-          item.children.forEach(function (a) {
-            if (a.authority[0].checked) {
-              a.authority.forEach(function (i) {
-                 if (i.checked) {
-                  checkedArr.value.push(i.id)
-                }
-              })
+// 复选框选中的数组集合start
+function getCheckedArr() {
+  props.menuData2.forEach(function (item) {
+    if (item.children) {
+      item.children.forEach(function (a) {
+        if (a.authority[0].checked) {
+          a.authority.forEach(function (i) {
+            if (i.checked) {
+              checkedArr.value.push(i.id)
             }
           })
-        } else {
-          // 如果查询的id被选中,那么塞入数组
-          if (item.authority[0].checked) {
-            item.authority.forEach(function (i) {
-              if (i.checked) {
-                checkedArr.value.push(i.id)
-              }
-            })
-          }
         }
       })
-      console.log('checkedArr.value')
-      console.log(checkedArr.value)
+    } else {
+      // 如果查询的id被选中,那么塞入数组
+      if (item.authority[0].checked) {
+        item.authority.forEach(function (i) {
+          if (i.checked) {
+            checkedArr.value.push(i.id)
+          }
+        })
+      }
     }
+  })
+}
 
-    onMounted(() => {
-      getCheckedArr()
-    })
-
-    //监听变化
-    watch(
-      () => props.radio1,
-      (newVal) => {
-        newVal
-        // checkedArr.value=[]
-      }
-    )
+function cellStyle({ row, column, rowIndex, columnIndex }) {
+  row, column, rowIndex
+  if (columnIndex) {
+    return { textAlign: 'left !important', cursor: 'pointer' }
+  }
+}
 
-    return {
-      cellStyle,
-      saveMenu,
-      saveArr,
-      getCheckedArr,
-      getTreeData,
-      checkedArr,
-      handleCheckedChange,
-    }
-  },
+onMounted(() => {
+  getCheckedArr()
 })
 </script>
 
@@ -171,6 +123,7 @@ export default defineComponent({
 .el-table [class*='el-table__row--level'] .el-table__expand-icon {
   display: none !important;
 }
+
 .el-table__indent {
   padding-left: 10px !important;
 }

src/views/systemManage/userManage/dialogComponent.vue

@@ -1,29 +1,11 @@
 <template>
-  <el-dialog
-    :title="dialogTitle"
-    v-model="dialogVisible"
-    width="640px"
-    @close="closeDialog()"
-    @open="open"
-  >
-    <el-form
-      ref="formInfo"
-      :model="form"
-      class="demo-form-inline userManageDialog"
-      label-width="100px"
-      :rules="rules"
-    >
+  <el-dialog :title="dialogTitle" v-model="dialogVisible" width="640px" @close="closeDialog()">
+    <el-form ref="formInfo" :model="form" class="demo-form-inline userManageDialog" label-width="100px" :rules="rules">
       <el-form-item label="用户名：" prop="nickName">
-        <el-input
-          v-model="form.nickName"
-          :disabled="dialogTitle === '查看'"
-        ></el-input>
+        <el-input v-model="form.nickName" :disabled="dialogTitle === '查看'"></el-input>
       </el-form-item>
       <el-form-item label="账号：" prop="userName">
-        <el-input
-          v-model="form.userName"
-          :disabled="dialogTitle === '查看'"
-        ></el-input>
+        <el-input v-model="form.userName" :disabled="dialogTitle === '查看'"></el-input>
       </el-form-item>
       <el-form-item label="性别：" prop="sex">
         <el-radio-group v-model="form.sex" :disabled="dialogTitle === '查看'">
@@ -31,84 +13,32 @@
           <el-radio label="2" value="2">女</el-radio>
         </el-radio-group>
       </el-form-item>
-
       <el-form-item label="手机号码：" prop="phonenumber">
-        <el-input
-          v-model="form.phonenumber"
-          :disabled="dialogTitle === '查看'"
-        ></el-input>
+        <el-input v-model="form.phonenumber" :disabled="dialogTitle === '查看'"></el-input>
       </el-form-item>
       <el-form-item label="密码" prop="password" v-if="dialogTitle == '新增'">
-        <el-input
-          v-model="form.password"
-          :disabled="dialogTitle === '查看'"
-        ></el-input>
+        <el-input v-model="form.password" :disabled="dialogTitle === '查看'"></el-input>
       </el-form-item>
-
-      <!-- <el-form-item
-        label="创建时间："
-        prop="createTime"
-        style="margin-top: 0px"
-      >
-        <el-date-picker
-          v-model="form.createTime"
-          width="100%"
-          type="datetime"
-          placeholder="选择日期时间"
-          :disabled="dialogTitle === '查看'"
-        ></el-date-picker>
+      <!-- <el-form-item label="创建时间：" prop="createTime" style="margin-top: 0px">
+        <el-date-picker v-model="form.createTime" width="100%" type="datetime" placeholder="选择日期时间"
+          :disabled="dialogTitle === '查看'"></el-date-picker>
       </el-form-item> -->
-
       <el-form-item label="角色名称：" prop="roleId">
         <!-- <el-input v-model="form.roleName"></el-input> -->
-        <el-select
-          v-model="form.roleId"
-          placeholder="请选择"
-          clearable
-          :disabled="dialogTitle === '查看'"
-        >
-          <el-option
-            v-for="(item, index) in roleSelectData"
-            :key="index"
-            :label="item.roleName"
-            :value="item.roleId"
-          ></el-option>
+        <el-select v-model="form.roleId" placeholder="请选择" clearable :disabled="dialogTitle === '查看'">
+          <el-option v-for="(item, index) in roleSelectData" :key="index" :label="item.roleName"
+            :value="item.roleId"></el-option>
         </el-select>
       </el-form-item>
-
       <el-form-item label="所属站点：" prop="siteId">
-         <el-select
-              v-model="form.siteId"
-              placeholder="请选择"
-              clearable
-               multiple
-              filterable
-              collapse-tags
-               @change="linkChange()"
-              
-            >
-              <el-option
-                v-for="site in store.state.siteList"
-                :key="site"
-                :label="site.siteName"
-                :value="site.id"
-                
-              ></el-option>
-            </el-select>
+        <el-select v-model="form.siteId" placeholder="请选择" clearable multiple filterable collapse-tags>
+          <el-option v-for="site in store.state.siteList" :key="site" :label="site.siteName" :value="site.id"></el-option>
+        </el-select>
       </el-form-item>
 
-
-      <br />
-      <br />
-      <br />
-      <div style="text-align: right">
+      <div style="margin-top:30px;text-align: right">
         <el-button @click="closeDialog(0)">取消</el-button>
-        <el-button
-          type="primary"
-          @click="submitForm('formInfo')"
-          :disabled="isDisable"
-          v-if="dialogTitle !== '查看'"
-        >
+        <el-button type="primary" @click="submitForm('formInfo')" :disabled="isDisable" v-if="dialogTitle !== '查看'">
           确定
         </el-button>
       </div>
@@ -116,209 +46,142 @@
   </el-dialog>
 </template>
 
-<script>
-import { defineComponent, ref, onMounted, watchEffect,watch } from 'vue'
-import * as api from '@/api/systemManage/userManage.js'
-import { ElMessage } from 'element-plus'
-import { parseTime, validatorPhone } from '@/utils'
+<script setup>
+/*----------------------------------依赖引入-----------------------------------*/
 import { useStore } from 'vuex'
-
-export default defineComponent({
-  name: 'DialogComponent',
-  emits: ['closeDialog'],
-  props: {
-    flag: Boolean,
-    dialogTitle: String,
-    itemInfo: Object,
+import { parseTime, validatorPhone } from '@/utils'
+import { ElMessage, ElNotification } from 'element-plus'
+import { ref, onMounted, watch, getCurrentInstance, reactive, toRefs } from 'vue'
+/*----------------------------------接口引入-----------------------------------*/
+import * as api from '@/api/systemManage/userManage.js'
+/*----------------------------------组件引入-----------------------------------*/
+/*----------------------------------store引入-----------------------------------*/
+/*----------------------------------公共方法引入-----------------------------------*/
+/*----------------------------------公共变量-----------------------------------*/
+const store = useStore()
+const props = defineProps({}) //数据双向绑定
+const emit = defineEmits(['handleSelect']);
+const { proxy } = getCurrentInstance();
+/*----------------------------------变量声明-----------------------------------*/
+const formInfo = ref(null)
+const dialogTitle = ref(null)
+const dialogVisible = ref(false)
+const state = reactive({
+  isDisable: false,
+  form: {},
+  rules: {
+    nickName: [
+      { required: true, message: '请输入用户名', trigger: 'blur' },
+      { min: 2, message: '用户名长度至少2个字符', trigger: 'blur', },
+    ],
+    userName: [
+      { required: true, message: '请输入账号', trigger: 'blur' },
+      { max: 10, message: '账号最多输入 10 个字符', trigger: 'blur', },
+    ],
+    sex: [{ required: true, message: '请选择性别', trigger: 'change' }],
+    phonenumber: [
+      { required: true, message: '请输入手机号码', trigger: 'blur' },
+      { validator: validatorPhone, message: '输入的电话号码不正确', trigger: 'blur', },
+    ],
+    createTime: [
+      { required: true, message: '请输入创建时间', trigger: 'blur' },
+    ],
+    roleId: [
+      { required: true, message: '请选择角色名称', trigger: 'blur' },
+    ],
+    siteId: [{ required: true, message: '请选择站点', trigger: 'blur' }],
+    password: [
+      { required: true, message: '请输入密码', trigger: 'blur' },
+      { min: 6, max: 25, message: '长度在 6 到 25 个字符', trigger: 'blur', },
+    ],
   },
-  setup(props, context) {
-    context
-    const store = useStore()
-    const dialogVisible = ref(false)
-    const formInfo = ref(null)
-    const isDisable = ref(false)
+  roleSelectData: [],
+})
+const { isDisable, form, rules, roleSelectData } = toRefs(state)
 
-    const form = ref([])
-    const roleSelectData = ref([])
 
-    // open(): Dialog弹窗打开之前做的事
-    const open = () => {
-    
-      form.value = props.itemInfo.value
-       console.log('form.value')
-       console.log(form.value)
-      console.log(form.value.siteId)
-    }
 
-  
 
-    // 关闭弹框
-    const closeDialog = () => {
-      resetForm()
-      context.emit('closeDialog', false)
-      dialogVisible.value = false
-    }
 
-    watchEffect((fn, options) => {
-      fn, options
-      dialogVisible.value = props.flag
-    })
+// 弹窗打开
+function openDialog(event) {
+  dialogTitle.value = event.dialogTitle
+  form.value = event.tableItem
+  dialogVisible.value = true
+}
 
-    const roleValid = (rule, value, callback) => {
-      rule
-      if (value.length === 0) {
-        callback(new Error('角色不能为空'))
-      } else {
-        callback()
-      }
-    }
+// 关闭弹框
+function closeDialog() {
+  formInfo.value.resetFields()
+  form.value = {}
+  dialogVisible.value = false
+}
 
-    // 保存-修改操作
-    const submitForm = () => {
-      form.value.createTime = parseTime(new Date())
+// 保存-修改操作
+const submitForm = () => {
+  form.value.createTime = parseTime(new Date())
 
-      formInfo.value.validate((valid) => {
-        if (valid) {
-          isDisable.value = true
-           setTimeout(() => {
-                  isDisable.value = false //点击一次时隔两秒后才能再次点击
-                }, 2000)
-          form.value.roleIds = [form.value.roleId] //roleIds 传给后台
-          if (props.dialogTitle === '新增') {
-            api.userAdd(form.value).then((requset) => {
-              if (requset.status === 'SUCCESS') {
-                ElMessage.success({
-                  message: '新增成功',
-                  type: 'success',
-                })
-                setTimeout(() => {
-                  isDisable.value = false //点击一次时隔两秒后才能再次点击
-                }, 2000)
+  formInfo.value.validate((valid) => {
+    if (!valid) {
+      console.log('error submit!!')
+      return false
+    }
 
-                closeDialog()
-              } else {
-                alert(requset.msg)
-                // ElMessage.error(requset.msg)
-              }
-            })
-          } else {
-            api.userUpdate(form.value).then((requset) => {
-              if (requset.status === 'SUCCESS') {
-                ElMessage.success({
-                  message: '修改成功',
-                  type: 'success',
-                })
-                closeDialog()
-              } else {
-                ElMessage.error(requset.msg)
-              }
-            })
-          }
+    isDisable.value = true
+    form.value.roleIds = [form.value.roleId] //roleIds 传给后台
+    if (dialogTitle.value === '新增') {
+      api.userAdd(form.value).then((requset) => {
+        if (requset.status === 'SUCCESS') {
+          ElMessage.success({
+            message: '新增成功',
+            type: 'success',
+          })
+
+          isDisable.value = false
+          emit('handleSelect', false)
+          closeDialog()
         } else {
-          console.log('error submit!!')
-          return false
+          isDisable.value = false
         }
       })
-    }
-
-    //角色下拉请求
-    function optionselect() {
-      api.optionselect().then((requset) => {
+    } else {
+      api.userUpdate(form.value).then((requset) => {
         if (requset.status === 'SUCCESS') {
-     
-          roleSelectData.value = requset.data
+          ElMessage.success({
+            message: '修改成功',
+            type: 'success',
+          })
+          isDisable.value = false
+          emit('handleSelect', false)
+          closeDialog()
         } else {
+          isDisable.value = false
           ElMessage.error(requset.msg)
         }
       })
     }
+  })
+}
 
-    function resetForm() {
-      formInfo.value.resetFields()
-      
-      
-     
-    }
-    function linkChange(){
-
-
+//角色下拉请求
+function optionselect() {
+  api.optionselect().then((requset) => {
+    if (requset.status === 'SUCCESS') {
+      roleSelectData.value = requset.data
+    } else {
+      ElMessage.error(requset.msg)
     }
+  })
+}
 
-     //监听变化
-    watch(
-      () => props.siteIdArr,
-      (newVal) => {
-        alert(1)
-        newVal
-       
-      }
-    )
-
-    onMounted(() => {
-      optionselect()
-    })
-
-    return {
-      store,
-      linkChange,
-      closeDialog,
-      dialogVisible,
-      roleValid,
-      formInfo,
-      form,
-      roleSelectData,
-      open,
-      submitForm,
-      resetForm,
-      isDisable,
-      rules: {
-       
-        nickName: [
-          { required: true, message: '请输入用户名', trigger: 'blur' },
-          {
-            min: 2,
-
-            message: '用户名长度至少2个字符',
-            trigger: 'blur',
-          },
-        ],
-        userName: [
-          { required: true, message: '请输入账号', trigger: 'blur' },
-          {
-            max: 10,
-            message: '账号最多输入 10 个字符',
-            trigger: 'blur',
-          },
-        ],
-        sex: [{ required: true, message: '请选择性别', trigger: 'change' }],
-        phonenumber: [
-          { required: true, message: '请输入手机号码', trigger: 'blur' },
-          {
-            validator: validatorPhone,
-            message: '输入的电话号码不正确',
-            trigger: 'blur',
-          },
-        ],
-        createTime: [
-          { required: true, message: '请输入创建时间', trigger: 'blur' },
-        ],
-        roleId: [
-          { required: true, message: '请选择角色名称', trigger: 'blur' },
-        ],
-         siteId:  [{ required: true, message: '请选择站点', trigger: 'blur' }],
-        password: [
-          { required: true, message: '请输入密码', trigger: 'blur' },
-          {
-            min: 6,
-            max: 25,
-            message: '长度在 6 到 25 个字符',
-            trigger: 'blur',
-          },
-        ],
-      },
-    }
-  },
+onMounted(() => {
+  optionselect()
 })
+
+// 暴露变量
+defineExpose({
+  openDialog,
+});
 </script>
  
 <style scoped lang="scss">
@@ -327,5 +190,4 @@ export default defineComponent({
   width: 240px;
 }
 </style>
-<style lang="scss">
-</style>
+<style lang="scss"></style>

src/views/systemManage/userManage/index.vue

@@ -2,72 +2,50 @@
   <div class="app-container">
     <!-- 筛选start -->
     <div class="filter-container mb-10">
-      <div class="left">
-        <div>
-          <span class="" style="margin-right: 30px">用户管理列表</span>
-          <el-button :disabled="store.state.authorities.indexOf('新增')==-1" 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"
-               :disabled="store.state.authorities.indexOf('查询')==-1"
-            ></el-input>
-          </div>
-
-          <div class="filter-item">
-            账号状态:
-            <el-select
-              v-model="status"
-              placeholder="请选择"
-              style="width: 150px"
-              clearable
-               :disabled="store.state.authorities.indexOf('查询')==-1"
-            >
-              <el-option label="正常" value="0"></el-option>
-              <el-option label="停用" value="1"></el-option>
-            </el-select>
-          </div>
 
-          <div class="filter-item planOutage">
-            选择时间范围：
-            <el-date-picker
-              v-model="dateTime"
-              type="datetimerange"
-              range-separator="至"
-              start-placeholder="开始日期"
-              end-placeholder="结束日期"
-              style="width: auto"
-               :disabled="store.state.authorities.indexOf('查询')==-1"
-            ></el-date-picker>
-          </div>
-          <el-button
-          :disabled="store.state.authorities.indexOf('查询')==-1"
-            type="primary"
-            icon="el-icon-search"
-            class="search-button"
-            @click="list()"
-          >
-            查询
-          </el-button>
-        </div>
+      <div class="filter-item">
+        <span class="title" style="margin-right: 30px">用户管理列表</span>
+        <el-button :disabled="store.state.authorities.indexOf('新增') == -1" icon="Plus" type="success" @click="addItem()">
+          新增
+        </el-button>
       </div>
-
       <!-- <div class="right">
         <el-button type="primary">导出</el-button>
       </div> -->
     </div>
+
+    <div class="filter-container mb-10" style="justify-content: left; white-space: nowrap;">
+      <div class="filter-item ">
+        <span class="title">账号：</span>
+        <el-input v-model="userName" placeholder="请输入内容" style="width: 180px"
+          :disabled="store.state.authorities.indexOf('查询') == -1"></el-input>
+      </div>
+
+      <div class="filter-item">
+        <span class="title">账号状态：</span>
+        <el-select v-model="status" placeholder="请选择" style="width: 150px" clearable
+          :disabled="store.state.authorities.indexOf('查询') == -1">
+          <el-option label="正常" value="0"></el-option>
+          <el-option label="停用" value="1"></el-option>
+        </el-select>
+      </div>
+
+      <div class="filter-item planOutage">
+        <span class="title">选择时间范围：</span>
+        <el-date-picker v-model="dateTime" type="datetimerange" range-separator="至" start-placeholder="开始日期"
+          end-placeholder="结束日期" style="width: auto"
+          :disabled="store.state.authorities.indexOf('查询') == -1"></el-date-picker>
+      </div>
+
+      <el-button :disabled="store.state.authorities.indexOf('查询') == -1" type="primary" icon="Search"
+        class="search-button" @click="list()">
+        查询
+      </el-button>
+    </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 :data="tableData" border stripe :header-cell-style="{ background: '#FAFAFA' }">
       <el-table-column prop="nickName" label="用户名"></el-table-column>
       <el-table-column prop="userName" label="账号"></el-table-column>
       <el-table-column prop="sex" label="性别" width="100">
@@ -77,27 +55,14 @@
       </el-table-column>
       <el-table-column prop="phonenumber" label="手机号码" min-width="120"></el-table-column>
       <el-table-column prop="createTime" label="创建时间" min-width="160"></el-table-column>
-      <!-- <el-table-column
-        prop="roles.roleName"
-        label="角色名称"
-       
-      ></el-table-column> -->
+      <!-- <el-table-column prop="roles.roleName" label="角色名称"></el-table-column> -->
       <el-table-column fixed="right" label="操作" width="180">
         <template #default="scope">
-          <el-button
-            @click="checkItem(scope.row)"
-            type="text"
-            size="small"
-            class="delete-text"
-          >
+          <el-button type="primary" size="small" @click="checkItem(scope.row)" link>
             查看
           </el-button>
-          <el-button
-          :disabled="store.state.authorities.indexOf('修改')==-1"
-            type="text"
-            size="small"
-            @click.prevent="editRow(scope.row)"
-          >
+          <el-button type="primary" size="small" @click.prevent="editRow(scope.row)"
+            :disabled="store.state.authorities.indexOf('修改') == -1" link>
             编辑
           </el-button>
         </template>
@@ -107,214 +72,157 @@
 
     <!-- 分页start -->
     <div class="paginationBlock">
-      <el-pagination
-        v-model:currentPage="currentPage"
-        :page-sizes="[15, 20, 25, 30]"
-        :page-size="pageSize"
-        layout="total, sizes, prev, pager, next, jumper"
-        :total="total"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"
-        background
-      ></el-pagination>
+      <el-pagination v-model:currentPage="currentPage" :page-sizes="[15, 20, 25, 30]" :page-size="pageSize"
+        layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
+        @current-change="handleCurrentChange" background></el-pagination>
     </div>
 
     <!-- 分页end -->
 
     <!--弹框组件开始-----------------------start-->
-    <dialog-component
-      :dialogTitle="dialogTitle"
-      :itemInfo="tableItem"
-      @closeDialog="closeDialog"
-      :flag="showDialog"
-      v-if="tableItem"
-    ></dialog-component>
+    <dialog-component ref="dialogComponentRef" @handleSelect="list()"></dialog-component>
     <!--弹框组件开始-----------------------end-->
   </div>
 </template>
 
-<script>
+<script setup>
+/*----------------------------------依赖引入-----------------------------------*/
 import { useStore } from 'vuex'
-import { defineComponent, ref, reactive, onMounted } from 'vue'
+import { ElMessage, ElNotification } from 'element-plus'
+import { ref, onMounted, watch, getCurrentInstance, reactive, toRefs } from 'vue'
+/*----------------------------------接口引入-----------------------------------*/
 import * as api from '@/api/systemManage/userManage.js'
-import { ElMessage } from 'element-plus'
-
+/*----------------------------------组件引入-----------------------------------*/
 import DialogComponent from './dialogComponent'
+/*----------------------------------store引入-----------------------------------*/
+/*----------------------------------公共方法引入-----------------------------------*/
+/*----------------------------------公共变量-----------------------------------*/
+const store = useStore()
+const props = defineProps({}) //数据双向绑定
+const emit = defineEmits([]);
+const { proxy } = getCurrentInstance();
+/*----------------------------------变量声明-----------------------------------*/
+const state = reactive({
+  userName: "",
+  status: "",
+  tableData: [],
+  total: 0,
+  pageSize: 10,
+  currentPage: 1,
+  dateTime: [],
+  siteIdArr: [],
+})
+const { userName, status, tableData, total, pageSize, currentPage, dateTime, siteIdArr } = toRefs(state)
 
-export default defineComponent({
-  components: { DialogComponent },
-  setup() {
-    const store = useStore()
-    const total = ref(0)
-    const pageSize = ref(10)
-    const currentPage = ref(1)
-
-    const dateTime = ref('')
-
-    const userName = ref('')
-    const phone = ref('')
-    const status = ref('')
-    const role = ref('')
-    const currentPage4 = ref(4)
-    const dialogTitle = ref('')
-    const showDialog = ref(false)
-    const tableData = ref([])
-    const siteIdArr=ref([])
-
-    // // 表头样式设置
-    const headClass = () => {
-      return 'background:#FAFAFA;'
-    }
 
-    const handleSizeChange = (val) => {
-      pageSize.value = val
-      list()
-    }
-    const handleCurrentChange = (val) => {
-      currentPage.value = val
-      list()
-    }
 
-    //用户列表
-    function list() {
-      store.commit('TimeAll_function', dateTime.value)
-      const time = store.state.Time_Data
-      api
-        .list({
-          pageSize: pageSize.value,
-          pageNum: currentPage.value,
-          status: status.value,
-          userName: userName.value,
-          beginTime: time[0],
-          endTime: time[1],
-          // platformAreaName: platformAreaName.value,
-        })
-        .then((requset) => {
-          if (requset.status === 'SUCCESS') {
-            tableData.value = requset.data.rows
-            total.value = requset.data.total
-          } else {
-            ElMessage.error(requset.msg)
-          }
-        })
-    }
 
-    const tableItem = reactive([])
-    // 添加操作
-    const addItem = () => {
-      tableItem.value = {
-        nickName: '',
-        userName: '',
-        sex: '1',
-        phonenumber: '',
-        createTime: '',
-        roleName: '',
-        password: '',
+//用户列表
+function list() {
+  store.commit('TimeAll_function', dateTime.value)
+  const time = store.state.Time_Data
+  api
+    .list({
+      pageSize: pageSize.value,
+      pageNum: currentPage.value,
+      status: status.value,
+      userName: userName.value,
+      beginTime: time[0],
+      endTime: time[1],
+      // platformAreaName: platformAreaName.value,
+    })
+    .then((requset) => {
+      if (requset.status === 'SUCCESS') {
+        tableData.value = requset.data.rows
+        total.value = requset.data.total
+      } else {
+        ElMessage.error(requset.msg)
       }
-      dialogTitle.value = '新增'
-      showDialog.value = true
+    })
+}
+
+// 添加操作
+const addItem = () => {
+  proxy.$refs['dialogComponentRef'].openDialog({
+    dialogTitle: '新增',
+    tableItem: {
+      nickName: '',
+      userName: '',
+      sex: '1',
+      phonenumber: '',
+      createTime: '',
+      roleName: '',
+      password: '',
     }
+  })
+}
+
+// 查看
+const checkItem = (row) => {
+  siteIdArr.value = []
+  api.authRole({}, row.userId).then((requset) => {
+    if (requset.status === 'SUCCESS') {
+      row.roleId = requset.data.user.roles[0].roleId
+      var newArray = requset.data.userSite
+      newArray.forEach(function (item) {
+        siteIdArr.value.push(item.siteId)
+      })
+      row.siteId = siteIdArr.value
 
-    // 查看
-    const checkItem = (row) => {
-      siteIdArr.value=[]
-      console.log(row)
-      api.authRole({}, row.userId).then((requset) => {
-        if (requset.status === 'SUCCESS') {
-          tableItem.value.roleId= requset.data.user.roles[0].roleId
-          var newArray= requset.data.userSite
-           newArray.forEach(function(item){
-             siteIdArr.value.push(item.siteId)
-
-           })
-           tableItem.value.siteId= siteIdArr.value
-        } else {
-          ElMessage.error(requset.msg)
-        }
+      proxy.$refs['dialogComponentRef'].openDialog({
+        dialogTitle: '查看',
+        tableItem: row
       })
-      tableItem.value = row
-      dialogTitle.value = '查看'
-      showDialog.value = true
+    } else {
+      ElMessage.error(requset.msg)
     }
+  })
+}
 
-    // 编辑操作
-    const editRow = (row) => {
-      siteIdArr.value=[]
-      console.log(row)
-      api.authRole({}, row.userId).then((requset) => {
-        if (requset.status === 'SUCCESS') {
-          tableItem.value.roleId= requset.data.user.roles[0].roleId
+// 编辑操作
+const editRow = (row) => {
+  siteIdArr.value = []
+  api.authRole({}, row.userId).then((requset) => {
+    if (requset.status === 'SUCCESS') {
+      row.roleId = requset.data.user.roles[0].roleId
 
-           var newArray= requset.data.userSite
-           newArray.forEach(function(item){
-             siteIdArr.value.push(item.siteId)
+      var newArray = requset.data.userSite
+      newArray.forEach(function (item) {
+        siteIdArr.value.push(item.siteId)
 
-           })
-           tableItem.value.siteId= siteIdArr.value
-            
-        } else {
-          ElMessage.error(requset.msg)
+      })
+      row.siteId = siteIdArr.value
+
+      proxy.$refs['dialogComponentRef'].openDialog({
+        dialogTitle: '编辑',
+        tableItem: {
+          nickName: row.nickName,
+          userName: row.userName,
+          sex: row.sex,
+          phonenumber: row.phonenumber,
+          password: row.password,
+          createTime: row.createTime,
+          roleId: row.roleId,
+          userId: row.userId
         }
       })
-
-
-      // tableItem.value = row
-      tableItem.value={
-        nickName:row.nickName,
-        userName:row.userName,
-        sex:row.sex,
-        phonenumber:row.phonenumber,
-        password:row.password,
-        createTime:row.createTime,
-        roleId:row.roleId,
-        userId:row.userId
-      }
-
-      dialogTitle.value = '编辑'
-      showDialog.value = true
-    }
-
-    // 关闭操作
-    const closeDialog = () => {
-      showDialog.value = false
-      
-      list()
-    }
-
-    onMounted(() => {
-      list()
-    })
-
-    return {
-      userName,
-      phone,
-      status,
-      role,
-      tableItem,
-      currentPage4,
-      dialogTitle,
-      showDialog,
-      tableData,
-      total,
-      pageSize,
-      currentPage,
-
-      dateTime,
-      store,
-      siteIdArr,
-      list,
-      handleSizeChange,
-      handleCurrentChange,
-      headClass,
-      checkItem,
-      addItem,
-      editRow,
-      closeDialog,
+    } else {
+      ElMessage.error(requset.msg)
     }
-  },
+  })
+}
+
+const handleSizeChange = (val) => {
+  pageSize.value = val
+  list()
+}
+const handleCurrentChange = (val) => {
+  currentPage.value = val
+  list()
+}
+
+onMounted(() => {
+  list()
 })
 </script>
-
-
-<style lang="scss" scoped>
-</style>
+<style lang="scss" scoped></style>