yifengyide/src/views/system/permission.vue

<template>
  <lay-container fluid="true" style="padding: 20px">
    <lay-row :space="10">
      <lay-col :md="24">
        <lay-card>
          <lay-form style="margin-top: 20px">
            <lay-row>
              <lay-col :md="5">
                <lay-form-item label="角色名称：" label-width="50">
                  <lay-input
                      v-model="searchAccount"
                      style="width: 90%"
                      placeholder="请输入"
                  ></lay-input>
                </lay-form-item>
              </lay-col>
              <lay-col :md="4">
                <lay-form-item label-width="0">
                  <lay-button type="primary" @click="toSearch">查询</lay-button>
                  <lay-button @click="toReset">重置</lay-button>
                </lay-form-item>
              </lay-col>
            </lay-row>
          </lay-form>
        </lay-card>
      </lay-col>
      <lay-col :md="24">
        <lay-card>
          <div style="padding: 10px">
            <span style="font-size: 18px;vertical-align: center;margin-right: 20px">角色列表</span>
            <lay-button type="primary" @click="openAdd" size="sm">新增角色</lay-button>
          </div>
          <lay-table
              :page="page"
              :columns="columns"
              :dataSource="dataSource"
              :even="true"
              height="600px"
              size="lg"
          >
            <template v-slot:id="{ data }">
              {{ data.id }}
            </template>
            <template v-slot:username="{ data }">
              {{ data.username }}
            </template>
            <template v-slot:password="{ data }">
              {{ data.password }}
            </template>
            <template v-slot:operator="{ data }">
              <lay-space>
                <span v-if="data.id!=1" style="color: #00A394;cursor: pointer" @click="editDo(data)">编辑</span>
                <lay-popconfirm trigger="click" content="确定要删除吗？" @confirm="delShowMsd(data)">
                  <span v-if="data.id!=1" style="color: #00A394;cursor: pointer">删除</span>
                </lay-popconfirm>
                <span v-if="data.id==1">-</span>
              </lay-space>
            </template>
          </lay-table>
        </lay-card>
      </lay-col>
    </lay-row>
  </lay-container>
  <lay-layer v-model="visible11" :title="addIsEdit == 1 ? '新增角色' : '编辑角色'" :type="4" :shade="true"
             :area="['700px','100%']" :btn="action11">
    <lay-container fluid="true" style="padding: 20px">
      <lay-form label-position="left" :model="addData">
        <lay-form-item label="角色名称" prop="username">
          <lay-input v-model="addData.name" placeholder="请输入角色名称"></lay-input>
        </lay-form-item>
        <lay-form-item label="角色描述" prop="desc">
          <lay-textarea placeholder="请输入角色描述" v-model="addData.describe"></lay-textarea>
        </lay-form-item>
        <lay-form-item label="角色权限" prop="desc">
          <lay-tree
              :default-expand-all="true"
              :tail-node-icon="false"
              :data="data9"
              :showCheckbox="showCheckbox2"
              v-model:checkedKeys="addData.rules"
              :replaceFields="replaceFields">
          </lay-tree>
        </lay-form-item>
      </lay-form>
    </lay-container>
  </lay-layer>
</template>

<script setup lang="ts">
import {onMounted, reactive, ref, watch} from 'vue'
import {layer} from '@layui/layer-vue'
import {
  menuData,
  authGroupData,
  authGroupDataAdd,
  authGroupDataEdit,
  authGroupDataDel,
} from "@/api/module/home";

const addData = reactive({
  name: '',
  describe: '',
  rules: []
})
const addIsEdit = ref(1)
onMounted(() => {
  getList();
  getHierarchicalData()
})
const openAdd = () => {
  visible11.value = true;
  addData.id = 0;
  addData.name = '';
  addData.describe = '';
  addData.rules = [];
}
const editDo = (data) => {
  console.log(data);
  visible11.value = true;
  addData.name = data.name;
  addData.describe = data.describe;
  addData.rules = data.rules;
  addIsEdit.value = 2;
}
const getList = () => {
  authGroupData({}).then((res) => {
    console.log(res)
    if (res.code == 1) {
      dataSource.value = res.data;
    } else {
      layer.msg(res.msg, {icon: 2})
    }
  })
}
const delShowMsd = async (data) => {
  var res = await authGroupDataDel({id: data.id});
  console.log(res)
  if (res.code == 1) {
    layer.msg('删除成功！', {icon: 1})
    getList();
  } else {
    layer.msg(res.msg, {icon: 2})
  }
}
const getHierarchicalData = () => {
  menuData({}).then((res) => {
    console.log(res)
    if (res.code == 1) {
      data9.value = res.data;
    } else {
      layer.msg(res.msg, {icon: 2})
    }
  })
}
const action11 = ref([
  {
    text: "确认",
    callback: async () => {
      console.log(addData);
      if (addData.name == '') {
        layer.msg('角色名称不能为空！', {icon: 2})
        return;
      }
      if (addData.describe == '') {
        layer.msg('角色描述不能为空！', {icon: 2})
        return;
      }
      if (addData.describe.length == 0 || addData.describe == '') {
        layer.msg('请选择菜单！', {icon: 2})
        return;
      }
      addData.rules = addData.rules.join(',');
      if (addIsEdit.value == 1) {
        var res = await authGroupDataAdd(addData);
      } else {
        var res = await authGroupDataEdit(addData);
      }
      if (res.code == 1) {
        layer.msg('提交成功！', {icon: 1})
        visible11.value = false;
        getList();
      } else {
        layer.msg(res.msg, {icon: 2})
      }
    }
  },
  {
    text: "取消",
    callback: () => {
      visible11.value = false;
    }
  }
])
const showCheckbox2 = ref(true);
const replaceFields = ref({
  id: 'id',
  title: 'title',
  children: 'children'
})

const data9 = ref([]);
const visible11 = ref(false)
const page = ref({total: 1, limit: 10, current: 1})

const columns = [
  {
    title: '序号',
    width: '50px',
    customSlot: 'id',
    align: 'center',
    key: 'id'
  },
  {
    title: '角色名称',
    width: '100px',
    align: 'center',
    key: 'name'
  },
  {
    title: '角色描述',
    width: '150px',
    key: 'describe'
  },
  {
    title: '操作',
    width: '180px',
    customSlot: 'operator',
    key: 'operator',
    align: 'center',
    fixed: 'right'
  }
]

const dataSource = ref([]);

function toSearch() {
  layer.load(2, {time: 3000})
}

const searchAccount = ref('')
const searchEmail = ref('')

function toReset() {
  searchAccount.value = ''
  searchEmail.value = ''
}
</script>
<style>
.layui-table-header .layui-table-cell {
  background-color: #ECF8FA !important;
}
</style>