角色管理页面 curd

src/views/system/role/RoleModal.vue

@@ -0,0 +1,43 @@
+<script lang="ts" setup>
+  import { useModalInner } from '/@/components/Modal';
+  import BasicModal from '/@/components/Modal/src/BasicModal.vue';
+  import BasicForm from '/@/components/Form/src/BasicForm.vue';
+  import { useForm } from '/@/components/Form';
+  import { computed, ref } from 'vue';
+  import { Curd } from '/@/api/Curd';
+  const title = computed(() => (id.value == 0 ? '新增' : '编辑'));
+  const id = ref(0);
+  const emit = defineEmits(['success']);
+  const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
+    schemas: [
+      { field: 'name', label: '角色名', component: 'Input' },
+      { field: 'value', label: '角色值', component: 'Input' },
+    ],
+    showActionButtonGroup: false,
+  });
+  const [register, { closeModal }] = useModalInner((data) => {
+    resetFields();
+    id.value = data.id || 0;
+    if (data) {
+      setFieldsValue(data);
+    }
+  });
+  const handleOK = async () => {
+    const data = await validate();
+    data.i = 'role';
+    data.id = id.value;
+    if (id.value != 0) {
+      data.a = 'edit';
+    } else {
+      data.a = 'add';
+    }
+    await Curd(data);
+    closeModal();
+    emit('success');
+  };
+</script>
+<template>
+  <BasicModal @register="register" :title="`${title}角色`" @ok="handleOK">
+    <BasicForm @register="registerForm"></BasicForm>
+  </BasicModal>
+</template>

src/views/system/role/index.vue

@@ -0,0 +1,67 @@
+<script lang="ts" setup>
+  import { Button } from '/@/components/Button';
+
+  import { BasicTable, useTable } from '/@/components/Table';
+  import { Curd } from '/@/api/Curd';
+  import { useModal } from '/@/components/Modal';
+  import RoleModal from './RoleModal.vue';
+  const [registerRoleModal, { openModal }] = useModal();
+  const [registerTable, { reload }] = useTable({
+    api: Curd,
+    beforeFetch: (p) => {
+      p.i = 'role';
+      p.a = 'list';
+      return p;
+    },
+    title: '角色列表',
+    showIndexColumn: false,
+    showTableSetting: true,
+    bordered: true,
+    columns: [
+      {
+        dataIndex: 'id',
+        title: '角色ID',
+        width: 100,
+      },
+      {
+        dataIndex: 'name',
+        title: '角色名称',
+      },
+      {
+        dataIndex: 'value',
+        title: '角色值',
+      },
+      { dataIndex: 'action', title: '操作' },
+    ],
+  });
+
+  const handleOpenModal = (v) => {
+    openModal(true, v);
+  };
+  const success = () => {
+    reload();
+  };
+  const delRole = async (id) => {
+    await Curd({ i: 'role', a: 'del', id });
+    reload();
+  };
+</script>
+
+<template>
+  <div class="p-2">
+    <BasicTable @register="registerTable">
+      <template #toolbar>
+        <a-button type="primary" @click="handleOpenModal"> 新增角色 </a-button>
+      </template>
+      <template #bodyCell="{ text, record, index, column }">
+        <template v-if="column.key === 'action'">
+          <div class="">
+            <Button type="success" @click="handleOpenModal(record)">编辑</Button>
+            <Button type="error" @click="delRole(record.id)">删除</Button></div
+          >
+        </template>
+      </template>
+    </BasicTable>
+    <RoleModal @register="registerRoleModal" @success="success" />
+  </div>
+</template>