SMO/src/views/system/role/index.vue

<template>
  <div class="table-box">
    <div class="card table-main">
      <!-- 表格头部 操作按钮 -->
      <div class="table-header">
        <div class="header-button-lf">
          <el-form :model="queryParams" label-width="auto"  :inline="true">
            <el-form-item label="角色名称:">
              <el-input v-model="queryParams.name" style="width: 200px" placeholder="请输入角色名称" clearable  />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleQuery"> 查询 </el-button>
              <el-button style="margin-left: 10px" @click="resetQuery"> 重置 </el-button>
              <el-button  style="margin-left: 10px" type="primary" plain  @click="handleAdd" disabled> 新增 </el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <!-- 表格主体 -->
      <el-table stripe ref="tableRef" :border="true" :data="filteredData"  size="small">
        <el-table-column align="left" label="序号" width="45px" :show-overflow-tooltip="true">
          <template #default="scope">
            {{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}
          </template>
        </el-table-column>
        <template v-for="item in columns" :key="item">
          <el-table-column v-bind="item" :align="item.align ?? 'left'" :reserve-selection="item.type == 'selection'" :show-overflow-tooltip="true">
            <template #default="scope">
              <template v-if="item.prop === 'operation'">
                <el-tooltip
                  class="box-item"
                  effect="dark"
                  content="编辑"
                  placement="top"
                >
                  <el-button type="primary" link @click="handleUpdate(scope.row)">
                    <el-icon >
                      <Edit />
                    </el-icon>
                  </el-button>
                </el-tooltip>
                <el-tooltip
                  class="box-item"
                  effect="dark"
                  content="删除"
                  placement="top"
                >
                  <el-button disabled type="primary" link  @click="handleDelete(scope.row)">
                    <el-icon >
                      <Delete />
                    </el-icon>
                  </el-button>
                </el-tooltip>
              </template>
            </template>
          </el-table-column>
        </template>

        <!-- 无数据 -->
        <template #empty>
          <div class="table-empty">
            <slot name="empty">
              <img src="@/assets/images/notData.png" alt="notData" />
              <div>暂无数据</div>
            </slot>
          </div>
        </template>
      </el-table>
      <!-- 分页组件 -->
      <Pagination :pageable="pageable" :handle-size-change="handleSizeChange" :handle-current-change="handleCurrentChange" />
    </div>

    <!-- 添加或修改对话框 -->
    <el-dialog :title="dialog.title" v-model="dialog.visible" width="800px"  append-to-body>
      <el-form ref="formRef" :model="roleForm" :rules="rules" label-width="120px">
        <el-form-item label="角色名称" prop="roleName">
          <el-input v-model="roleForm.roleName" placeholder="请输入角色名称" disabled/>
        </el-form-item>
        <el-form-item label="菜单权限">
          <el-checkbox v-model="menuExpand" @change="handleCheckedTreeExpand()">展开/折叠</el-checkbox>
          <el-checkbox v-model="roleForm.menuCheckStrictly" @change="handleCheckedTreeConnect()" disabled>父子联动</el-checkbox>
          <el-checkbox v-model="menuNodeAll" @change="handleCheckedTreeNodeAll()" disabled>全选/全不选</el-checkbox>
          <el-tree
            style="height: 400px;overflow-y: auto"
            disabled
            class="tree-border"
            :data="menuOptions"
            show-checkbox
            ref="menuRef"
            node-key="id"
            :check-strictly="!roleForm.menuCheckStrictly"
            :default-expanded-keys="menuData2"
            :default-checked-keys="menuData"
             empty-text="加载中，请稍候"
            :props="{ label: 'title', children: 'children' }"
          ></el-tree>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="submitForm" disabled>确 定</el-button>
        </div>
      </template>
    </el-dialog>



  </div>
</template>

<script setup lang="ts" name="useProTable">
import Pagination from "@/components/ProTable/components/Pagination.vue";
import authMenuList from "@/assets/json/authMenuList.json";//管理员
import {ref, reactive, computed, onMounted} from "vue";
import { ColumnProps } from "@/components/ProTable/interface";
import { ElMessageBox } from 'element-plus'
const menuExpand = ref(false)
const menuNodeAll = ref(false)
const menuOptions = ref<any>([])
const menuRef = ref<any>();
const menuOptionsData= ref([])
/** 树权限（展开/折叠）*/
const handleCheckedTreeExpand = () => {
  if (menuExpand.value) {
    menuExpand.value = true;
    Object.values(menuRef.value.store.nodesMap).forEach((v: any) => v.expand());
    return;
  }
  menuExpand.value = false;
  Object.values(menuRef.value.store.nodesMap).forEach((v: any) => v.collapse());
};



/** 树权限（全选/全不选） */
const handleCheckedTreeNodeAll = (value: any, type: string) => {
  if (menuNodeAll.value) {
    const allKeys = getAllKeys(menuOptions.value);
    menuRef.value.setCheckedKeys(allKeys);
  } else {
    menuRef.value.setCheckedKeys([]);
  }
}

const getAllKeys = (data) => {
  let keys = [];
  data.forEach(item => {
    keys.push(item.id);
    if (item.children) {
      keys = keys.concat(getAllKeys(item.children));
    }
  });
  return keys;
};
/** 树权限（父子联动） */
const handleCheckedTreeConnect = (value: any, type: string) => {
}

const convertData = (data: any[]) => {
  return data.map(item => {
    const { meta, children } = item;
    return {
      title: meta.title,
      children: children ? convertData(children) : []
    };
  });
};

const menuData = ref([])
const menuData2 = ref([])
const adminData = ref([1,2,3,4,5,6,7,8,100,101,102,103,104,105,200,201,202,203,204,205,206,207,208,209,300,301,302,303,304,400,401])//管理员
const observerData = ref([1,2,3,4,5,6,7,8,100,101,102,103,104,105,200,201,202,203,204,205,206,207,208,209,300,303,304,400,401])//观测员
const forecasterData = ref([1,2,3,4,5,6,7,8,100,101,102,103,104,105,200,201,202,203,204,205,206,207,208,209,400,401])//预报员、装备管理人员
/** 修改按钮操作 */
const handleUpdate = async (row?: any) => {
  reset();
  dialog.visible = true;
  dialog.title = "编辑";
  roleForm.value.roleName = row.a
  if(row.a==="管理员"){
    menuData.value = adminData.value
  }else if(row.a ==="观测员"){
    menuData.value = observerData.value
  }else if(row.a ==="观测员"){
    menuData.value = adminData.value
  }else if(row.a ==="预报员"){
    menuData.value = forecasterData.value
  }else if(row.a ==="装备管理人员"){
    menuData.value = forecasterData.value
  }

  getMenuList()

}
// 获取菜单列表
const getMenuList= () => {
     const data = [
       {
         title: "实时监测报警",
         id:1,
         disabled: true,
         children: [
           {
             title: "全网实时数据监测报警",
             children: [],
             id:2,
             disabled: true
           },
           {
             title: "全网危险天气监测报警",
             children: [],
             id:3,
             disabled: true
           },
           {
             title: "全网设备状态监测报警",
             children: [],
             id:4,
             disabled: true
           },
           {
             title: "单站实时数据监测报警",
             children: [],
             id:5,
             disabled: true
           },
           {
             title: "单站设备状态监测报警",
             children: [],
             id:6,
             disabled: true
           },
           {
             title: "软件状态监测报警",
             children: [],
             id:7,
             disabled: true
           },
           {
             title: "GIS展示",
             children: [],
             id:8,
             disabled: true
           }
         ]
       },
       {
         title: "数据分析显示",
         id:100,
         disabled: true,
         children: [
           {
             title: "数据综合分析",
             children: [],
             id:101,
             disabled: true,
           },
           {
             title: "要素曲线分析",
             children: [],
             id:102,
             disabled: true,
           },
           {
             title: "风速风向玫瑰图",
             children: [],
             id:103,
             disabled: true,
           },
           {
             title: "雨量柱状图分析",
             disabled: true,
             id:104,
             children: []
           },
           {
             title: "雷电区域分析",
             disabled: true,
             id:105,
             children: []
           }
         ]
       },
       {
         title: "数据查询输出",
         disabled: true,
         id:200,
         children: [
           {
             title: "观测数据查询",
             disabled: true,
             id:201,
             children: []
           },
           {
             title: "设备健康信息查询",
             disabled: true,
             id:202,
             children: []
           },
           {
             title: "危险天气记录查询",
             disabled: true,
             id:203,
             children: []
           },
           {
             title: "质量审核记录",
             disabled: true,
             id:204,
             children: []
           },
           // {
           //   title: "值班过程管理",
           //   id:205,
           //   disabled: true,
           //   children: []
           // },
           // {
           //   title: "日观测纪要",
           //   id:206,
           //   disabled: true,
           //   children: []
           // },
           // {
           //   title: "记录簿",
           //   disabled: true,
           //   id:207,
           //   children: []
           // },
           // {
           //   title: "月报表查询",
           //   disabled: true,
           //   id:208,
           //   children: []
           // },
           // {
           //   title: "天气日志",
           //   disabled: true,
           //   id:209,
           //   children: []
           // }
         ]
       },
       {
         title: "系统管理",
         disabled: true,
         id:300,
         children: [
           {
             title: "用户管理",
             disabled: true,
             id:301,
             children: []
           },
           {
             title: "角色管理",
             disabled: true,
             id:302,
             children: []
           },
           {
             title: "台站管理",
             disabled: true,
             id:303,
             children: []
           },
           {
             title: "系统配置",
             disabled: true,
             id:304,
             children: []
           }
         ]
       },
       {
         title: "维护管理",
         disabled: true,
         id:400,
         children: [
           {
             title: "站点维护记录",
             id:401,
             disabled: true,
             children: []
           }
         ]
       }
     ]
  menuOptions.value = data
}

const pageable = ref<any>({
  pageNum: 1,
  pageSize: 20,
  total: 4
});

const queryParams = ref({
  name: '',
  pageNum: 1,
  pageSize: 20,
  total: 4
});

// 查询功能
const handleQuery = () => {
  queryParams.value.pageNum = 1;
};

//搜索功能
const resetQuery = () => {
  queryParams.value.name = ''
  queryParams.value.pageNum = 1;
};

/**
 * @description 每页条数改变
 * @param {Number} val 当前条数
 * @return void
 * */
const handleSizeChange = (val: number) => {
  console.log(val);
};

/**
 * @description 当前页改变
 * @param {Number} val 当前页
 * @return void
 * */
const handleCurrentChange = (val: number) => {
  console.log(val);
};

const filteredData = computed(() => {
  if (!queryParams.value.name) {
    return processTableData.value;
  }
  return processTableData.value.filter(item => item.a.includes(queryParams.value.name));
});

const processTableData = ref([
  {
    id: "1",
    a: "管理员",
  },
  {
    id: "2",
    a: "观测员",
  }, {
    id: "3",
    a: "预报员",
  }, {
    id: "4",
    a: "装备管理人员",
  }
]);

// 表格配置项
const columns = reactive<ColumnProps[]>([
  { prop: "a", label: "角色名称" },
  { prop: "operation", label: "操作", width:150,align: 'center' }
]);

const dialog = reactive<any>({
  visible: false,
  title: ''
});
const formRef = ref<any>();
const rules = ref<any>(
  {
    roleName: [{ required: true, message: "角色名称不能为空", trigger: "blur" }],
  }
);


const initFormData = ref<any>(
  {
    roleName: "",
    menuCheckStrictly: true
  }
);


const roleForm = ref<any>({...initFormData});

/** 新增按钮操作 */
const handleAdd = () => {
  reset();
  dialog.visible = true;
  dialog.title = "新增";
  getMenuList()
}



/** 取消按钮 */
const cancel = () => {
  reset();
  dialog.visible = false;
}
/** 表单重置 */
const reset = () => {
  roleForm.value = { ...initFormData };
  formRef.value?.resetFields();
}

/** 提交按钮 */
const submitForm = () => {
  formRef.value?.validate(async (valid: boolean) => {
    if (valid) {
      dialog.visible = false;
    }
  });
}

/** 删除按钮操作 */
const handleDelete = async (row?: any) => {
  ElMessageBox.confirm('是否确认删除角色编号为"' + row.a + '"的数据项？', {
    confirmButtonText: '删除',
    cancelButtonText: '取消',
    type: 'warning',
    title:'删除数据',
    draggable: true
  })
    .then(() => {

    })
    .catch(() => {

    })
}


onMounted(() => {
  console.log(authMenuList.data)
})

</script>