新增角色模板优化店铺装修

src/views/admin/system/role/components/roleTemplateDialog.vue

@@ -0,0 +1,175 @@
+<template>
+  <el-dialog title="选择角色模板" width="677px" v-model="visible">
+    <div class="content">
+      <div class="title">选择模板，快速创建好角色</div>
+      <div class="role_template">
+        <div class="item" v-for="item in list" :key="item.id" @click="selectRoleHandle(item)">
+          <div class="header">
+            <div class="title">
+              {{ item.name }}
+            </div>
+            <el-radio v-model="item.cehcked" :value="true" readonly size="large"></el-radio>
+          </div>
+          <div class="role_list">
+            <div class="rl_t">包含角色：</div>
+            <div class="rl_r">
+              <div class="row" v-for="val in item.children" :key="val.id">{{ val.name }}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <template #footer>
+      <div class="dialog-footer">
+        <div class="btn">
+          <el-button @click="visible = false" size="large" style="width: 100%;">自己创建</el-button>
+        </div>
+        <div class="btn">
+          <el-button type="primary" size="large" @click="submitHandle" :loading="loading" style="width: 100%;">确
+            定</el-button>
+        </div>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { roleTemplateList, saveByTemplate } from '@/api/account/roleTemplate'
+
+const visible = ref(false)
+
+const loading = ref(false)
+const list = ref([])
+
+// 获取角色模板列表
+async function roleTemplateListAjax() {
+  try {
+    const res = await roleTemplateList()
+    res.forEach(el => {
+      el.cehcked = false
+    });
+    list.value = res
+  } catch (error) {
+    console.log(error);
+  }
+}
+
+function show() {
+  visible.value = true
+  roleTemplateListAjax()
+}
+
+function selectRoleHandle(item) {
+  list.value.forEach(item => item.cehcked = false)
+  item.cehcked = true
+}
+
+// 提交
+const emits = defineEmits(['success'])
+async function submitHandle() {
+  try {
+    let item = list.value.find(item => item.cehcked)
+    if (item === undefined) {
+      ElNotification({
+        title: '注意',
+        message: '请选择角色模板',
+        type: 'error'
+      })
+      return
+    }
+
+    loading.value = true
+    await saveByTemplate({
+      id: item.id
+    })
+    emits('success')
+    visible.value = false
+  } catch (error) {
+    console.log(error);
+  }
+  setTimeout(() => {
+    loading.value = false
+  }, 500);
+}
+
+defineExpose({
+  show
+})
+
+onMounted(() => {
+  roleTemplateListAjax()
+})
+</script>
+
+<style scoped lang="scss">
+.content {
+  padding: 28px 0;
+
+  .title {
+    font-size: 16px;
+    color: #333;
+  }
+
+  .role_template {
+    padding: 14px 0 0;
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-column-gap: 14px;
+    grid-row-gap: 14px;
+
+    .item {
+      border: 1px solid #ececec;
+      border-radius: 8px;
+      padding: 14px 18px;
+      transition: all .3s ease-in-out;
+
+      &:hover {
+        cursor: pointer;
+        border-color: var(--el-color-primary);
+      }
+
+      .header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        .title {
+          font-size: 16px;
+          font-weight: bold;
+          color: #333;
+        }
+      }
+
+      .role_list {
+        display: flex;
+
+        div {
+          flex: 1;
+        }
+
+        .rl_t {
+          color: #333;
+        }
+
+        .rl_r {
+          .row {
+            display: flex;
+            justify-content: flex-end;
+            color: #666;
+          }
+        }
+      }
+    }
+  }
+}
+
+.dialog-footer {
+  display: flex;
+  gap: 14px;
+
+  .btn {
+    flex: 1;
+  }
+}
+</style>

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

@@ -101,7 +101,7 @@
             </el-form-item>
           </div>
           <div class="flex-x-between">
-            <el-input v-model="permKeywords" clearable class="w-[150px]" placeholder="菜单菜单名称">
+            <el-input v-model="permKeywords" clearable class="w-[150px]" placeholder="菜单名称">
               <template #prefix>
                 <Search />
               </template>
@@ -156,6 +156,7 @@
         </div>
       </template>
     </el-drawer>
+    <roleTemplateDialog ref="roleTemplateDialogRef" @success="handleQuery" />
   </div>
 </template>
 
@@ -170,6 +171,9 @@ const shopUser = useUserStore();
 import menuSelect from "./components/menus.vue";
 import RoleApi, { SysRole, addRequest, getListRequest } from "@/api/account/role";
 import MenuAPI, { type RouteVO, CashMenu } from "@/api/account/menu";
+import roleTemplateDialog from "./components/roleTemplateDialog.vue";
+
+const roleTemplateDialogRef = ref(null)
 
 const queryFormRef = ref();
 const addRequestRef = ref();
@@ -241,6 +245,10 @@ function handleQuery() {
     .then((data) => {
       roleList.value = data.records;
       total.value = data.totalRow;
+
+      if (data.records.length == 0) {
+        roleTemplateDialogRef?.value.show()
+      }
     })
     .finally(() => {
       loading.value = false;