feat(ui): 管理后台新增权限及部分组合式函数优化

new-ui/projects/admin/src/views/NoPermission.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts"></script>
+
+<template>
+  <AResult status="403" subtitle="没有权限">
+    <template #extra>
+      <MButton preset="back" type="primary" />
+    </template>
+  </AResult>
+</template>
+
+<style scoped lang="less"></style>

new-ui/projects/admin/src/views/Order/OrderContainer.vue

@@ -1,8 +1,9 @@
 <script lang="ts" setup>
+import { Message } from "@arco-design/web-vue";
 import SearchTable from "@/components/SearchTable/SearchTable.vue";
 import type { SearchTableColumns } from "@/components/SearchTable/type";
 import { dateFormat } from "@chatgpt-plus/packages/utils";
-import { getList } from "./api";
+import { getList, remove } from "./api";
 
 const columns: SearchTableColumns[] = [
   {
@@ -71,6 +72,12 @@ const columns: SearchTableColumns[] = [
     width: 80,
   },
 ];
+const handleRemove = async (id, reload) => {
+  await remove({ id });
+  Message.success("删除成功");
+  await reload();
+  return true;
+};
 </script>
 <template>
   <SearchTable :request="getList" :columns="columns">
@@ -78,8 +85,15 @@ const columns: SearchTableColumns[] = [
       <a-tag v-if="!record.pay_time" color="blue">未支付</a-tag>
       <span v-else>{{ dateFormat(record.pay_time) }}</span>
     </template>
-    <template #actions="{ record }">
-      <a-link :key="record.id" status="danger">删除</a-link>
+    <template #actions="{ record, reload }">
+      <a-popconfirm
+        content="是否删除？"
+        position="left"
+        type="warning"
+        :on-before-ok="() => handleRemove(record.id, reload)"
+      >
+        <a-link status="danger">删除</a-link>
+      </a-popconfirm>
     </template>
   </SearchTable>
 </template>

new-ui/projects/admin/src/views/Order/api.ts

@@ -6,4 +6,12 @@ export const getList = (data?: Record<string, unknown>) => {
     method: "post",
     data
   })
+}
+
+export const remove = (data) => {
+  return http({
+    url: "/api/admin/order/remove",
+    method: "post",
+    data
+  })
 }

new-ui/projects/admin/src/views/SysPermission/SysPermissionContainer.vue

@@ -0,0 +1,82 @@
+<script lang="ts" setup>
+import type { TableColumnData } from "@arco-design/web-vue";
+import { Message } from "@arco-design/web-vue";
+import useRequest from "@/composables/useRequest";
+import usePopup from "@/composables/usePopup";
+import SysPermissionForm from "./SysPermissionForm.vue";
+import { getList, save, remove } from "./api";
+
+const columns: TableColumnData[] = [
+  {
+    dataIndex: "name",
+    title: "权限名称",
+  },
+  {
+    dataIndex: "slug",
+    title: "权限标识",
+  },
+  {
+    dataIndex: "sort",
+    title: "排序",
+  },
+  {
+    title: "操作",
+    slotName: "actions",
+  },
+];
+
+const [reload, data, loading] = useRequest(getList);
+
+const openFormModal = usePopup(SysPermissionForm, {
+  nodeProps: ([_, record]) => ({ record, options: data.value }),
+  popupProps: ([reload, record], exposed) => ({
+    title: `${record?.id ? "编辑" : "新增"}权限`,
+    onBeforeOk: async (done) => {
+      await exposed()?.handleSubmit(save, {
+        id: record?.id,
+      });
+      await reload();
+      done(true);
+    },
+  }),
+});
+
+const handleRemove = async (id) => {
+  await remove({ id });
+  Message.success("删除成功");
+  await reload();
+  return true;
+};
+
+reload();
+</script>
+<template>
+  <div style="padding-bottom: 10px; text-align: right">
+    <a-button type="primary" :loading="loading" @click="openFormModal(reload, {})">
+      <template #icon>
+        <icon-plus />
+      </template>
+      新增
+    </a-button>
+  </div>
+  <a-table
+    :key="String(loading)"
+    :data="data"
+    :loading="loading"
+    :columns="columns"
+    :pagination="false"
+    default-expand-all-rows
+  >
+    <template #actions="{ record, reload }">
+      <a-link @click="openFormModal(reload, record)">编辑</a-link>
+      <a-popconfirm
+        content="是否删除？"
+        position="left"
+        type="warning"
+        :on-before-ok="() => handleRemove(record.id)"
+      >
+        <a-link status="danger">删除</a-link>
+      </a-popconfirm>
+    </template>
+  </a-table>
+</template>

new-ui/projects/admin/src/views/SysPermission/SysPermissionForm.vue

@@ -0,0 +1,63 @@
+<template>
+  <a-form ref="formRef" :model="formData" auto-label-width>
+    <a-form-item
+      field="name"
+      label="权限名称"
+      :rules="[{ required: true, message: '请输入权限名称' }]"
+    >
+      <a-input v-model="formData.name" placeholder="请输入权限名称" />
+    </a-form-item>
+    <a-form-item
+      field="pid"
+      label="上级权限"
+      :rules="[{ required: true, message: '请选择上级权限' }]"
+      extra="默认为顶级权限"
+    >
+      <a-tree-select
+        v-model="formData.pid"
+        :data="_options"
+        :field-names="{ key: 'id', title: 'name' }"
+        placeholder="请选择上级权限"
+      />
+    </a-form-item>
+    <a-form-item field="slug" label="权限标识" extra="规则：controller_method (注意大小写)">
+      <a-input v-model="formData.slug" placeholder="请输入权限标识" />
+    </a-form-item>
+    <a-form-item
+      field="sort"
+      label="排序"
+      :rules="[
+        { required: true, message: '请输入排序' },
+        { min: 0, message: '请输入大于0的正整数', type: 'number' },
+      ]"
+      extra="数字越小越靠前"
+    >
+      <a-input-number v-model="formData.sort" placeholder="请输入排序" :precision="0" />
+    </a-form-item>
+  </a-form>
+</template>
+
+<script lang="ts" setup>
+import { computed, unref } from "vue";
+import useSubmit from "@/composables/useSubmit";
+
+const props = defineProps({
+  record: Object,
+  options: Array,
+});
+
+const { formRef, formData, handleSubmit } = useSubmit({
+  name: "",
+  pid: "0",
+  slug: "",
+  sort: null,
+});
+
+const _options = computed(() => {
+  return [{ id: "0", name: "顶部权限", children: unref(props.options ?? []) }];
+});
+
+Object.assign(formData, props.record);
+
+defineExpose({ handleSubmit });
+</script>

new-ui/projects/admin/src/views/SysPermission/api.ts

@@ -0,0 +1,25 @@
+import http from "@/http/config";
+
+export const getList = (params) => {
+  return http({
+    url: "/api/admin/sysPermission/list",
+    method: "get",
+    params
+  })
+}
+
+export const save = (data) => {
+  return http({
+    url: "/api/admin/sysPermission/save",
+    method: "post",
+    data
+  })
+}
+
+export const remove = (data) => {
+  return http({
+    url: "/api/admin/sysPermission/remove",
+    method: "post",
+    data
+  })
+}