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="visible11=true" 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="{}">
              <lay-button-group>
                <lay-button type="normal" size="sm">编辑</lay-button>
                <lay-button type="danger" size="sm">删除</lay-button>
              </lay-button-group>
            </template>
          </lay-table>
        </lay-card>
      </lay-col>
    </lay-row>
  </lay-container>
  <lay-layer v-model="visible11" title="新增角色" :type="4" :shade="true" :area="['700px','100%']" :btn="action11">
    <lay-container fluid="true" style="padding: 20px">
      <lay-form  label-position="left" :model="model">
        <lay-form-item label="角色名称" prop="username">
          <lay-input v-model="model.username" placeholder="请输入角色名称"></lay-input>
        </lay-form-item>
        <lay-form-item label="角色描述" prop="desc">
          <lay-textarea placeholder="请输入角色描述" v-model="model.describe"></lay-textarea>
        </lay-form-item>
        <lay-form-item label="角色权限" prop="desc">
          <lay-tree
              :tail-node-icon="false"
              :data="data9"
              :showCheckbox="showCheckbox2"
              v-model:checkedKeys="checkedKeys2"
              :replaceFields="replaceFields">
          </lay-tree>
        </lay-form-item>
      </lay-form>
    </lay-container>
  </lay-layer>
</template>

<script setup lang="ts">
import {ref, watch} from 'vue'
import {layer} from '@layui/layer-vue'
const model = ref({
  username: '',
  password: '',
  describe: ''
})
const action11 = ref([
  {
    text: "确认",
    callback: () => {
      layer.confirm("确认操作", { shade: false });
    }
  },
  {
    text: "取消",
    callback: () => {
      layer.confirm("取消操作", { shade: false });
    }
  }
])
const checkedKeys2 = ref([]);
const showCheckbox2 = ref(true);
const replaceFields = ref({
  id: 'key',
  title: 'name',
  children: 'child'
})

const data9 = ref([{
  name: '一级1',
  key: 1,
  child: [
    {
      name: '一级1-1',
      key: 11,
    },
    {
      name: '一级1-2',
      key: 12,
    }
  ]
},
  {
    name: '一级2',
    key: 2,
    child: [
      {
        name: '一级2-1',
        key: 21,
      },
      {
        name: '一级2-2',
        key: 22,
      }
    ]
  }]);
const active = ref(1)
const visible11 = ref(false)
const selectedKeys = ref(['1'])
const checkbox = ref(true)
const defaultToolbar = ref(true)
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',
    customSlot: 'username',
    key: 'username'
  },
  {
    title: '角色描述',
    width: '150px',
    customSlot: 'password',
    align: 'center',
    key: 'password'
  },
  {
    title: '操作',
    width: '180px',
    customSlot: 'operator',
    key: 'operator',
    align: 'center',
    fixed: 'right'
  }
]

const dataSource = [
  {
    id: '1',
    username: 'shana',
    password: '夏娜',
    remark: '1',
    age: '2024-01'
  },
  {
    id: '2',
    username: 'shana',
    password: '夏娜',
    remark: '2',
    age: '2024-01'
  }
]

const rowClick = function (data: any) {
}

const rowDoubleClick = function (data: any) {
}

const change = function ({current, limit}: any) {
  layer.msg('current:' + current + ' limit:' + limit)
}

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>