MeiXinLaiRui/ShenSuoGanNew.git

<script setup>
import { reactive, ref, unref, onMounted, toRef } from 'vue'
import { GetPageDataApi } from '@/api/department'
import { AddRoleApi, UpdateRoleApi, StatusChangeApiApi, SaveRoleApi,DeleteRoleApi} from '@/api/role'
import { ElMessage, ElMessageBox } from 'element-plus'
import { ContentWrap } from '@/components/ContentWrap'
import { formatTime } from '@/utils/index'
const obj = {
  selectName: '',
 
  selectTime: [], // 时间范围
  selectType: '',
  selectInput: ''
}
 
const grideData = ref([])
const userInfo = ref('')
//分组
const groupOptions = ref([])
 
//用户角色新建
const dialogVisible2 = ref(false)
const rolekey = ref([
  { value: 1, label: '一级' },
  { value: 0, label: '二级' }
])
const pageTotal = ref(0)
const formRoleRef = ref()
const roleRules = reactive({
  roleName: {
    required: true,
    message: '请输入角色名称',
    trigger: 'blur'
  },
  description: {
    required: true,
    message: '请输入角色描述',
    trigger: 'blur'
  }
})
const formRole = ref({
  roleName: '',
  description: '',
  createDate: formatTime(new Date()), //创建时间
  creater: JSON.parse(localStorage.getItem('user')).userName, //创建人
  isLeader: 0 //组员类型
})
const roles = ref(
  '[{"id":10,"actions":[{"text":"查询","value":"Search"},{"text":"新建","value":"Add"},{"text":"删除","value":"Delete"},{"text":"编辑","value":"Update"},{"text":"导入","value":"Import"},{"text":"导出","value":"Export"}]},{"id":12,"actions":[{"text":"查询","value":"Search"},{"text":"新建","value":"Add"},{"text":"删除","value":"Delete"},{"text":"编辑","value":"Update"},{"text":"导入","value":"Import"},{"text":"导出","value":"Export"}]},{"id":17,"actions":[{"text":"查询","value":"Search"},{"text":"新建","value":"Add"},{"text":"删除","value":"Delete"},{"text":"编辑","value":"Update"},{"text":"导入","value":"Import"},{"text":"导出","value":"Export"}]},{"id":1,"actions":[{"text":"查询","value":"Search"},{"text":"新建","value":"Add"},{"text":"删除","value":"Delete"},{"text":"编辑","value":"Update"},{"text":"导入","value":"Import"},{"text":"导出","value":"Export"}]},{"id":2,"actions":[{"text":"查询","value":"Search"},{"text":"新建","value":"Add"},{"text":"删除","value":"Delete"},{"text":"编辑","value":"Update"},{"text":"导入","value":"Import"},{"text":"导出","value":"Export"}]},{"id":3,"actions":[{"text":"查询","value":"Search"},{"text":"新建","value":"Add"},{"text":"删除","value":"Delete"},{"text":"编辑","value":"Update"},{"text":"导入","value":"Import"},{"text":"导出","value":"Export"}]},{"id":4,"actions":[{"text":"查询","value":"Search"},{"text":"新建","value":"Add"},{"text":"删除","value":"Delete"},{"text":"编辑","value":"Update"},{"text":"导入","value":"Import"},{"text":"导出","value":"Export"}]},{"id":18,"actions":[{"text":"查询","value":"Search"},{"text":"新建","value":"Add"},{"text":"删除","value":"Delete"},{"text":"编辑","value":"Update"},{"text":"查看全部路由","value":"ViewAllRouter"},{"text":"路由配置","value":"AddRouters"},{"text":"导入","value":"Import"},{"text":"导出","value":"Export"}]},{"id":13,"actions":[{"text":"查询","value":"Search"},{"text":"新建","value":"Add"},{"text":"回滚到上一步","value":"Previous"},{"text":"跳转到下一步","value":"Next"},{"text":"删除","value":"Delete"},{"text":"编辑","value":"Update"},{"text":"导入","value":"Import"},{"text":"导出","value":"Export"}]},{"id":11,"actions":[{"text":"查询","value":"Search"},{"text":"新建","value":"Add"},{"text":"删除","value":"Delete"},{"text":"编辑","value":"Update"},{"text":"导入","value":"Import"},{"text":"导出","value":"Export"}]},{"id":14,"actions":[{"text":"查询","value":"Search"},{"text":"新建","value":"Add"},{"text":"删除","value":"Delete"},{"text":"编辑","value":"Update"},{"text":"导入","value":"Import"},{"text":"导出","value":"Export"}]},{"id":15,"actions":[{"text":"查询","value":"Search"},{"text":"新建","value":"Add"},{"text":"删除","value":"Delete"},{"text":"编辑","value":"Update"},{"text":"导入","value":"Import"},{"text":"导出","value":"Export"}]},{"id":16,"actions":[{"text":"查询","value":"Search"},{"text":"新建","value":"Add"},{"text":"删除","value":"Delete"},{"text":"编辑","value":"Update"},{"text":"导入","value":"Import"},{"text":"导出","value":"Export"}]},{"id":8,"actions":[{"text":"查询","value":"Search"},{"text":"新建","value":"Add"},{"text":"删除","value":"Delete"},{"text":"编辑","value":"Update"},{"text":"导入","value":"Import"},{"text":"导出","value":"Export"}]},{"id":6,"actions":[{"text":"查询","value":"Search"},{"text":"新建","value":"Add"},{"text":"删除","value":"Delete"},{"text":"编辑","value":"Update"},{"text":"导入","value":"Import"},{"text":"导出","value":"Export"}]},{"id":7,"actions":[{"text":"查询","value":"Search"},{"text":"新建","value":"Add"},{"text":"删除","value":"Delete"},{"text":"编辑","value":"Update"},{"text":"导入","value":"Import"},{"text":"导出","value":"Export"}]},{"id":9,"actions":[{"text":"查询","value":"Search"},{"text":"新建","value":"Add"},{"text":"删除","value":"Delete"},{"text":"编辑","value":"Update"},{"text":"导入","value":"Import"},{"text":"导出","value":"Export"}]},{"id":5,"actions":[{"text":"查询","value":"Search"},{"text":"新建","value":"Add"},{"text":"删除","value":"Delete"},{"text":"编辑","value":"Update"},{"text":"导入","value":"Import"},{"text":"导出","value":"Export"}]}]'
)
//新建角色
const AddRole = () => {
  Roletype.value = '新建'
  dialogVisible2.value = true
}
const Roletype = ref('新建')
//保存角色
const saveRole = async (formEl) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      if (Roletype.value == '修改') {
        UpdateRoleApi(formRole.value).then((res) => {
          ElMessage({ message: '修改成功', type: 'success' })
          dialogVisible2.value = false
          getRole()
        })
      } else {
        AddRoleApi(formRole.value).then((res) => {
          ElMessage({ message: '添加成功', type: 'success' })
          dialogVisible2.value = false
          getRole()
        })
      }
    } else {
      console.log('error submit!', fields)
    }
  })
}
//编辑角色
const EditRole = (val) => {
  Roletype.value = '修改'
  const obj = Object.assign({}, val)
  formRole.value = obj
  dialogVisible2.value = true
}
//获取角色
const getRole = () => {
  GetPageDataApi({
    page: 1,
    rows: 100,
    total: 0,
    tableName: 'string',
    sort: 'string',
    order: 'string',
    wheres: 'string',
    export: true,
    value: 'string',
    filter: [
      {
        name: 'string',
        value: 'string',
        displayType: 'string'
      }
    ]
  }).then((res) => {
    grideData.value = res.rows
    pageTotal.value = res.total
    groupOptions.value = res.rows
  })
}
const resetForm1 = (formEl) => {
  if (!formEl) return
  formEl.resetFields()
  formRole.value = {
    roleName: '',
    description: '',
    isLeader: 0 //组员类型
  }
}
const dialogVisible = ref(false)
// 用户角色是否启用
const changeRoleSwitch = (val) => {
  const data = Object.assign({}, val)
  StatusChangeApiApi(data).then((res) => {
    ElMessage({ message: '修改成功', type: 'success' })
    dialogVisible.value = false
    getRole()
  })
  SaveRoleApi(val.roleId, JSON.parse(roles.value))
}
//批量删除
const ids = ref([])
const UserSelectionChange = (val) => {
  ids.value = []
  ids.value = val.map((item) => item.user_Id)
  console.log(val, ids.value)
}
const RoleSelectionChange = (val) => {
  ids.value = []
  ids.value = val.map((item) => item.roleId)
}
 
const deleteAll = () => {
  if (ids.value.includes(1)) {
    ElMessage({ message: '超级管理员不能删除', type: 'error' })
    return
  }
  if (ids.value.length == 0) {
    ElMessage({ message: '请选择要删除的数据', type: 'error' })
    return
  }
  DeleteRoleApi(ids.value).then((res) => {
    ElMessage({ message: '删除成功', type: 'success' })
    getRole()
  })
}
onMounted(() => {
  getRole()
  userInfo.value = JSON.parse(localStorage.getItem('user')).userInfo
})
</script>
 
<template>
  <ContentWrap>
    <div class="box" style="display: flex; align-items: center">
    <!-- <Search :schema="searchSchema" @reset="setSearchParams" @search="setSearchParams" /> -->
    <div class="mb-10px">
      <el-button
        type="primary"
        size="small"
        @click="AddRole"
        style="width: 5.5rem; height: 2rem; font-size: 0.88rem; display: flex; align-items: center"
        >新建</el-button
      > 
    </div>
   <div class="mb-10px">
        <div style="width: 5.5rem; height: 2rem; font-size: 0.88rem;display: flex; align-items: center ;margin-left: 40px;">
          <el-button
            type="danger"
            size="small"
            style="width: 5.5rem; height: 2rem; font-size: 0.88rem;"
            class="text_btn"
            @click="deleteAll"
            >批量删除</el-button
          >
          </div>
        </div>
        </div>
    <el-table
      empty-text="暂无数据"
      height="800"
      :data="grideData"
      style="width: 100%"
      :header-cell-style="{
        background: 'rgba(250,250,250,1)',
        color: '#101010',
        fontSize: '0.88rem',
        height: '3rem',
        border: 'none'
      }"
      :row-style="{
        color: '#101010',
        fontSize: '0.88rem',
        height: '3rem'
      }"
      @selection-change="RoleSelectionChange"
    >
      <el-table-column type="selection" align="center" />
      <el-table-column prop="roleName" label="角色名称" align="center" />
      <el-table-column prop="isLeader" label="用户类型" align="center">
        <template #default="scope">
          <span v-if="scope.row.isLeader == 0">二级</span>
          <span v-else-if="scope.row.isLeader == 1">一级</span>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="deptName" label="备注" align="center" /> -->
      <el-table-column label="是否启用" align="center">
        <template #default="scope">
          <el-switch
            :disabled="!(userInfo.userName == 'admin' || userInfo.roleId == '1')"
            v-model="scope.row.enable"
            :active-value="1"
            :inactive-value="0"
            @change="changeRoleSwitch(scope.row)"
          />
        </template>
      </el-table-column>
      <el-table-column prop="createDate" label="创建日期" align="center" />
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <span
            v-if="
              !(userInfo.userName == 'admin' || userInfo.roleId == '1'
                ? scope.row.userName == 'admin' || scope.row.user_Id == '1'
                : scope.row.userName == 'admin' ||
                  scope.row.user_Id == '1' ||
                  scope.row.userName != userInfo.userName)
            "
            style="color: blue; font-size: 0.88rem; cursor: pointer"
            @click="EditRole(scope.row)"
            >编辑</span
          >
          <span style="color:blue; font-size: 0.88rem; padding-left: 30px; cursor: pointer" @click="deleteAll">删除</span>
        </template></el-table-column
      >
    </el-table>
  </ContentWrap>
 
  <!-- 用户角色新建 -->
  <el-dialog
    v-model="dialogVisible2"
    title=""
    width="30%"
    :show-close="false"
    :align-center="true"
    @close="resetForm1(formRoleRef)"
  >
    <template #title>
      <div style="height: 3.63rem; display: flex; border-bottom: 1px solid #e6e6e6">
        <span style="color: rgb(16, 16, 16); font-size: 1rem; font-weight: bold">用户角色</span>
      </div>
    </template>
    <el-form
      :model="formRole"
      label-width="auto"
      label-position="top"
      ref="formRoleRef"
      :rules="roleRules"
      :hide-required-asterisk="true"
    >
      <el-form-item prop="roleName">
        <template #label>
          <div style="display: flex; align-items: flex-end">
            <span style="color: red; margin-right: 0.2rem">*</span>
            <span style="font-size: 0.88rem; color: black; font-weight: bold">角色名称</span>
          </div>
        </template>
        <el-input
          style="height: 2rem"
          size="small"
          v-model="formRole.roleName"
          placeholder="请输入"
        />
      </el-form-item>
      <el-form-item prop="isLeader">
        <template #label>
          <div style="display: flex; align-items: flex-end">
            <span
              :style="{
                color: 'red',
                marginRight: '0.2rem',
                fontSize: '0.88rem'
              }"
              >*</span
            >
            <span
              :style="{
                fontSize: '0.88rem',
                color: 'black',
                fontWeight: 'bold'
              }"
              >用户类型</span
            >
          </div>
        </template>
        <el-select v-model="formRole.isLeader" placeholder="请选择" size="small">
          <el-option
            v-for="item in rolekey"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <!-- <el-form-item>
        <template #label>
          <div style="display: flex; align-items: flex-end">
            <span style="font-size: 0.88rem; color: black; font-weight: bold">备注</span>
          </div>
        </template>
        <el-input
          style="height: 2rem"
          size="small"
          v-model="formRole.description"
          placeholder="请输入"
        />
      </el-form-item> -->
    </el-form>
    <template #footer>
      <div class="dialog-footer" style="text-align: center">
        <el-button
          size="small"
          @click="dialogVisible2 = false"
          style="height: 2rem; font-size: 0.88rem"
          >取消</el-button
        >
 
        <el-button
          size="small"
          type="primary"
          @click="saveRole(formRoleRef)"
          style="height: 2rem; font-size: 0.88rem"
        >
          保存
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>