✨ [feat] add 'account manager' example. (#273)

* 🎨[fix] 移除table组件padding,统一样式显示 * ✨ [feat] add 'account manager' example.
vbenjs · Nov 16, 2023 · 8c71792 · 8c71792
1 parent 28efde6
commit 8c71792
Show file tree

Hide file tree

Showing 9 changed files with 462 additions and 6 deletions.
diff --git a/apps/admin/src/apis/sys/account.ts b/apps/admin/src/apis/sys/account.ts
@@ -0,0 +1,9 @@
+import { request } from '@vben/request'
+
+export const getDeptTree = () => {
+  return request.get({ url: '/demo/deptTreeList' })
+}
+
+export const getDeptUser = (params?: any) => {
+  return request.post({ url: '/demo/deptUserList', params })
+}
diff --git a/apps/admin/src/apis/sys/index.ts b/apps/admin/src/apis/sys/index.ts
@@ -1,2 +1,3 @@
 export * from './menu'
 export * from './user'
+export * from './account'
diff --git a/apps/admin/src/pages/dashboard/analysis/index.vue b/apps/admin/src/pages/dashboard/analysis/index.vue
@@ -603,7 +603,7 @@ const e6_option = ref({
         <div
           class="bg-white w-full h-60 rounded-md grid grid-cols-12 grid-rows-6 shadow-xl shadow-light-600"
         >
-          <div class="col-start-1 col-span-12 row-start-1 row-span-6">
+          <div class="p-2 col-start-1 col-span-12 row-start-1 row-span-6">
             <VbenTable
               :columns="operatorColumns"
               :data="operatorData"

diff --git a/apps/admin/src/pages/demo/system/account/index.vue b/apps/admin/src/pages/demo/system/account/index.vue
@@ -0,0 +1,173 @@
+<!--
+ * @Author       : ya2glu@163.com
+ * @Date         : 2023-11-16 10:06:07
+ * @LastEditTime : 2023-11-16 16:07:24
+ * @LastEditors  : ya2glu
+ * @Description  : account modules
+ * @FilePath     : \vben3\apps\admin\src\pages\demo\system\account\index.vue
+-->
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+import { useForm } from '@vben/vbencomponents'
+import { formSchema, userColumns } from './schemas'
+import { getDeptTree, getDeptUser } from '@/apis/sys/index'
+import AccountAddModal from './modules/accountAddModal.vue'
+const deptKeys = ref('')
+const bgGrid = ref({
+  cols: 24,
+  rows: null,
+  xGap: 8,
+  yGap: 12,
+})
+const deptTreeData = ref([])
+const deptUserData = ref([])
+getDeptTree()
+  .then((res) => {
+    deptTreeData.value = res
+  })
+  .catch((err) => {
+    console.log(err)
+  })
+  .finally(() => {
+    console.log('🔌deptTreeData:', deptTreeData.value)
+  })
+
+getDeptUser()
+  .then((res) => {
+    deptUserData.value = res
+  })
+  .catch((err) => {
+    console.log(err)
+  })
+  .finally(() => {
+    console.log('🔌deptUserList:', deptUserData.value)
+  })
+const treeOptions = ref({
+  showLine: true,
+  data: deptTreeData,
+  pattern: deptKeys,
+})
+const formRef = ref(null)
+const formModel = ref({})
+const [formReg, { getFieldValue, validate }] = useForm({
+  inline: true,
+  actions: true,
+  schemas: formSchema,
+  actionsProps: {
+    span: 8,
+    submitText: '查询',
+  },
+})
+let expandState = ref(false)
+
+const accountAddModalRef = ref()
+function handleAccountAddModal() {
+  console.log('add ->', accountAddModalRef)
+  return accountAddModalRef.value.open()
+}
+</script>
+<template>
+  <VbenGrid
+    class="h-full p-2"
+    :cols="bgGrid.cols"
+    :x-gap="bgGrid.xGap"
+    :y-gap="bgGrid.yGap"
+  >
+    <VbenGridItem :span="6">
+      <VbenCard class="h-full" title="部门列表" :bordered="false" embedded>
+        <template #header-extra>
+          <VbenPopover
+            placement="bottom"
+            trigger="click"
+            :style="{ padding: '3px' }"
+          >
+            <template #trigger>
+              <VbenIconify
+                class="cursor-pointer"
+                icon="icon-park-outline:more-one"
+                size="22"
+                hoverColor="#2a63d5"
+              />
+            </template>
+            <span>
+              <VbenSpace vertical>
+                <VbenButton
+                  quaternary
+                  size="small"
+                  @click="() => (expandState = true)"
+                  >展开全部</VbenButton
+                >
+                <VbenButton
+                  quaternary
+                  size="small"
+                  @click="() => (expandState = false)"
+                  >折叠全部</VbenButton
+                >
+              </VbenSpace>
+            </span>
+          </VbenPopover>
+        </template>
+        <VbenInput v-model:value="deptKeys" placeholder="搜索" clearable>
+          <template #prefix>
+            <VbenIconify icon="mdi:search" size="18" color="#c2c2c2" />
+          </template>
+        </VbenInput>
+        <VbenTree
+          :show-line="treeOptions.showLine"
+          :data="treeOptions.data"
+          :pattern="treeOptions.pattern"
+          :default-expand-all="expandState"
+          expand-on-click
+          selectable
+          block-line
+        ></VbenTree>
+      </VbenCard>
+    </VbenGridItem>
+    <VbenGridItem :span="18">
+      <VbenSpace vertical>
+        <VbenCard :bordered="false" embedded>
+          <VbenForm
+            ref="formRef"
+            class="w-full"
+            @register="formReg"
+            v-model:model="formModel"
+          ></VbenForm>
+        </VbenCard>
+        <!-- <VbenCard :bordered="false" embedded> -->
+        <VbenTable
+          ref="userTableRef"
+          max-height="700"
+          min-height="700"
+          :columns="userColumns"
+          :data="deptUserData"
+          :options="{
+            pagination: true,
+            border: 'none',
+          }"
+          :row-config="{ isHover: true }"
+          stripe
+        >
+          <template #toolbar>
+            <div class="pb-2">
+              <VbenButton type="info" @click="handleAccountAddModal"
+                >新增账号</VbenButton
+              >
+            </div>
+          </template>
+          <template #action="{ row }">
+            <VbenButton text type="primary">详情</VbenButton>
+            <VbenDivider vertical />
+            <VbenButton text type="primary">编辑</VbenButton>
+            <VbenDivider vertical />
+            <VbenButton text type="error">删除</VbenButton>
+          </template>
+        </VbenTable>
+        <!-- </VbenCard> -->
+      </VbenSpace>
+    </VbenGridItem>
+  </VbenGrid>
+  <AccountAddModal ref="accountAddModalRef" />
+</template>
+
+<style lang="less" scoped></style>
diff --git a/apps/admin/src/pages/demo/system/account/modules/accountAddModal.vue b/apps/admin/src/pages/demo/system/account/modules/accountAddModal.vue
@@ -0,0 +1,56 @@
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { useForm } from '@vben/vbencomponents'
+import { accountAddFormSchema } from './schemas'
+const isModalShow = ref(false)
+
+function open() {
+  return (isModalShow.value = true)
+}
+defineExpose({
+  open,
+})
+
+const model = ref({})
+const [accountFormReg, { getFieldValue, validate }] = useForm({
+  inline: true,
+  actions: false,
+  schemas: accountAddFormSchema,
+  labelProps: {
+    labelPlacement: 'left',
+    labelAlign: 'right'
+  },
+  gridProps: {
+    span: 24
+  }
+})
+</script>
+<template>
+  <VbenModal
+    v-model:show="isModalShow"
+    preset="card"
+    title="新增账号"
+    :bordered="false"
+    :closeOnEsc="false"
+    :maskClosable="false"
+  >
+    <VbenForm
+      ref="accountFormRef"
+      class="w-full"
+      @register="accountFormReg"
+      v-model:model="model"
+    >
+    </VbenForm>
+
+    <template #action>
+      <div class="w-full flex justify-right">
+        <VbenSpace>
+          <VbenButton type="primary">新增</VbenButton>
+          <VbenButton type="tertiary">取消</VbenButton>
+        </VbenSpace>
+      </div>
+    </template>
+  </VbenModal>
+</template>
+
+<style lang="less" scoped></style>
diff --git a/apps/admin/src/pages/demo/system/account/modules/schemas.ts b/apps/admin/src/pages/demo/system/account/modules/schemas.ts
@@ -0,0 +1,106 @@
+import { VbenFormSchema } from '@vben/vbencomponents/src/form'
+
+export const accountAddFormSchema: VbenFormSchema[] = [
+  {
+    field: 'userName',
+    label: '用户名',
+    component: 'Input',
+    required: true,
+    gridItemProps: {
+      span: 24,
+    },
+    labelProps: {
+      labelPlacement: 'left',
+      labelAlign: 'right',
+      labelWidth: 100,
+    },
+    componentProps: {
+      placeholder: '请输入用户名',
+    },
+  },
+  {
+    field: 'nickName',
+    label: '昵称',
+    component: 'Input',
+    required: true,
+    gridItemProps: {
+      span: 24,
+    },
+    labelProps: {
+      labelPlacement: 'left',
+      labelAlign: 'right',
+      labelWidth: 100,
+    },
+    componentProps: {
+      placeholder: '请输入昵称',
+    },
+  },
+  {
+    field: 'email',
+    label: '邮箱',
+    component: 'Input',
+    required: true,
+    gridItemProps: {
+      span: 24,
+    },
+    labelProps: {
+      labelPlacement: 'left',
+      labelAlign: 'right',
+      labelWidth: 100,
+    },
+    componentProps: {
+      placeholder: '请输入邮箱',
+    },
+  },
+  {
+    field: 'role',
+    label: '角色',
+    component: 'Select',
+    required: true,
+    gridItemProps: {
+      span: 24,
+    },
+    labelProps: {
+      labelPlacement: 'left',
+      labelAlign: 'right',
+      labelWidth: 100,
+    },
+    componentProps: {
+      placeholder: '请选择',
+    },
+  },
+  {
+    field: 'dept',
+    label: '所属部门',
+    component: 'TreeSelect',
+    required: true,
+    gridItemProps: {
+      span: 24,
+    },
+    labelProps: {
+      labelPlacement: 'left',
+      labelAlign: 'right',
+      labelWidth: 100,
+    },
+    componentProps: {
+      placeholder: '请选择',
+    },
+  },
+  {
+    field: 'remark',
+    label: '备注',
+    component: 'InputTextArea',
+    required: false,
+    gridItemProps: {
+      span: 24,
+    },
+    labelProps: {
+      labelPlacement: 'left',
+      labelAlign: 'right',
+      labelWidth: 100,
+    },
+    componentProps: {
+      placeholder: '请输入备注',
+    },
+  },
+]