From f30a2c7d3cd1b6b689511ef5a129e4e6dcc9ff04 Mon Sep 17 00:00:00 2001
From: 91zhangliying <1663782157@qq.com>
Date: Sun, 14 Aug 2022 18:58:00 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E8=B5=84=E6=BA=90=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=E6=A8=A1=E5=9D=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/QuickTable/index.vue          |   1 +
 src/components/QuickToolbar/index.vue        |   4 +
 src/types/table.ts                           |   1 +
 src/views/resource/attachment/index.vue      | 214 +++++++++++++++
 src/views/resource/sms/config/index.vue      | 243 ++++++++++++++++
 src/views/resource/sms/signature/index.vue   | 275 +++++++++++++++++++
 src/views/resource/sms/template/index.vue    | 266 ++++++++++++++++++
 src/views/resource/storage/general/index.vue | 214 +++++++++++++++
 src/views/resource/storage/object/index.vue  | 230 ++++++++++++++++
 9 files changed, 1448 insertions(+)
 create mode 100644 src/views/resource/attachment/index.vue
 create mode 100644 src/views/resource/sms/config/index.vue
 create mode 100644 src/views/resource/sms/signature/index.vue
 create mode 100644 src/views/resource/sms/template/index.vue
 create mode 100644 src/views/resource/storage/general/index.vue
 create mode 100644 src/views/resource/storage/object/index.vue

diff --git a/src/components/QuickTable/index.vue b/src/components/QuickTable/index.vue
index cbb0782..f4c7dc1 100644
--- a/src/components/QuickTable/index.vue
+++ b/src/components/QuickTable/index.vue
@@ -146,6 +146,7 @@ onMounted(() => {
       :align="item.align"
       :formatter="item.format"
       show-overflow-tooltip
+      :fixed="item.fixed"
     ></el-table-column>
     <el-table-column
       v-if="tableActionbar"
diff --git a/src/components/QuickToolbar/index.vue b/src/components/QuickToolbar/index.vue
index 4df432e..9daf164 100644
--- a/src/components/QuickToolbar/index.vue
+++ b/src/components/QuickToolbar/index.vue
@@ -178,4 +178,8 @@ const handleCustomClick = (item: any) => {
 .toobar {
   margin-bottom: 10px;
 }
+
+.el-upload {
+  display: inline-flex;
+}
 </style>
diff --git a/src/types/table.ts b/src/types/table.ts
index acb40b6..b6f88e4 100644
--- a/src/types/table.ts
+++ b/src/types/table.ts
@@ -5,6 +5,7 @@ export interface Column {
   type?: string
   align?: string
   slot?: boolean
+  fixed?: boolean
   format?(row: any, column?: any, cellValue?: any, index?: number): void
 }
 export interface Btns {
diff --git a/src/views/resource/attachment/index.vue b/src/views/resource/attachment/index.vue
new file mode 100644
index 0000000..da131b5
--- /dev/null
+++ b/src/views/resource/attachment/index.vue
@@ -0,0 +1,214 @@
+<script lang="ts" setup>
+import { reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { UploadInstance } from 'element-plus'
+import QuickCrud from '@/components/QuickCrud/index.vue'
+import { Column, Actionbar, Toolbar } from '@/types/table'
+import { Role } from '@/types/role'
+import { FormItem } from '@/types/form'
+import { getRoleList, addRole, updateRole, deleteRole } from '@/api/role'
+import { SearchUser } from '@/types/user'
+
+const uploadRef = ref<UploadInstance>()
+
+const dataList = reactive<Array<Role>>([])
+/**
+ * 表单
+ */
+const dialogTitle = reactive({
+  add: '新增角色',
+  edit: '编辑角色',
+  detail: '角色详情',
+})
+const formModel = reactive<Role>({
+  id: '',
+  roleId: '',
+  roleName: '',
+})
+const formItems = reactive<Array<FormItem>>([
+  {
+    label: '角色编号',
+    labelWidth: '80px',
+    vModel: 'roleId',
+    placeholder: '角色编号',
+    editReadonly: true,
+    prop: 'roleId',
+    rules: [
+      {
+        required: true,
+        message: '角色编号不能为空',
+        trigger: 'blur',
+      },
+    ],
+  },
+  {
+    label: '角色名称',
+    labelWidth: '80px',
+    vModel: 'roleName',
+    placeholder: '角色名称',
+    prop: 'roleName',
+    rules: [
+      {
+        required: true,
+        message: '角色名称不能为空',
+        trigger: 'blur',
+      },
+    ],
+  },
+])
+const handleFormSubmit = (form: Role, done: any) => {
+  console.log('handleFormSubmit', form)
+  if (form.id) {
+    updateRole(form).then(() => {
+      ElMessage({
+        type: 'success',
+        message: '角色修改成功',
+      })
+      done()
+    })
+  } else {
+    addRole(form).then(() => {
+      ElMessage({
+        type: 'success',
+        message: '角色创建成功',
+      })
+      done()
+    })
+  }
+}
+/**
+ * 搜索
+ */
+const searchForm = reactive<SearchUser>({
+  userName: '',
+})
+const searchFormItems = reactive<Array<FormItem>>([
+  {
+    label: '名称',
+    vModel: 'userName',
+    placeholder: '名称',
+  },
+  {
+    label: '类型',
+    vModel: 'userName',
+    placeholder: '类型',
+  },
+])
+
+/**
+ * 工具栏
+ */
+const tableToolbar = reactive<Toolbar>({
+  hiddenAddButton: true,
+  hiddenExportButton: true,
+  hiddenPrintButton: true,
+  hiddenImportButton: true,
+  importButtonName: '上传',
+})
+
+/**
+ * 表格
+ */
+const tableColumns = reactive<Array<Column>>([
+  {
+    width: '50',
+    type: 'selection',
+  },
+  {
+    label: '上传时间',
+    prop: 'roleName',
+  },
+  {
+    label: '名称',
+    prop: 'roleId',
+    width: '200',
+  },
+  {
+    label: '原文件名称',
+    prop: 'roleName',
+  },
+  {
+    label: '类型',
+    prop: 'roleName',
+  },
+  {
+    label: '大小',
+    prop: 'roleName',
+  },
+])
+const handleDelete = (item: Role, done: any) => {
+  ElMessageBox.confirm(`你真的删除【${item.roleName}】的角色吗？`, '警告', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+  }).then(() => {
+    deleteRole(item.id).then(() => {
+      ElMessage({
+        type: 'success',
+        message: '角色删除成功',
+      })
+      done()
+    })
+  })
+}
+const tableActionbar = reactive<Actionbar>({
+  width: 150,
+})
+/**
+ * 加载数据
+ */
+const load = () => {
+  getRoleList().then((res) => {
+    const { data: roleList } = res
+    dataList.length = 0
+    dataList.push(...roleList)
+  })
+}
+
+// 上传
+const upload = ref(null)
+
+const handleImport = (done: any) => {
+  // done()
+  //  this.$refs['upload'].$refs['upload-inner'].handleClick()
+
+  //  this.$refs['centerIcon'][0].$children[0].$refs.input.click()
+  // el-upload__input
+  if (upload.value) {
+    debugger
+    upload.value.handleStart()
+  }
+}
+
+const submitUpload = () => {
+  uploadRef.value!.submit()
+}
+</script>
+<template>
+  <el-upload
+    ref="uploadRef"
+    class="upload-demo"
+    action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
+    :auto-upload="true"
+  >
+    <template #trigger>
+      <el-button type="primary">上传</el-button>
+    </template>
+  </el-upload>
+  <quick-crud
+    :dialog-title="dialogTitle"
+    :form-model="formModel"
+    :form-items="formItems"
+    :table-data="dataList"
+    :table-columns="tableColumns"
+    :table-actionbar="tableActionbar"
+    :table-toolbar="tableToolbar"
+    :search-form-items="searchFormItems"
+    :search-form-model="searchForm"
+    dialog-titles="dialogTitles"
+    @on-load="load"
+    @on-form-submit="handleFormSubmit"
+    @on-delete="handleDelete"
+    @on-import="handleImport"
+  ></quick-crud>
+</template>
diff --git a/src/views/resource/sms/config/index.vue b/src/views/resource/sms/config/index.vue
new file mode 100644
index 0000000..fcfcce5
--- /dev/null
+++ b/src/views/resource/sms/config/index.vue
@@ -0,0 +1,243 @@
+<script lang="ts" setup>
+import { reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { UploadInstance } from 'element-plus'
+import QuickCrud from '@/components/QuickCrud/index.vue'
+import { Column, Actionbar, Toolbar } from '@/types/table'
+import { Role } from '@/types/role'
+import { FormItem } from '@/types/form'
+import { getRoleList, addRole, updateRole, deleteRole } from '@/api/role'
+import { SearchUser } from '@/types/user'
+
+const uploadRef = ref<UploadInstance>()
+
+const dataList = reactive<Array<Role>>([])
+/**
+ * 表单
+ */
+const dialogTitle = reactive({
+  add: '新增短信配置',
+  edit: '编辑短信配置',
+  detail: '短信配置详情',
+})
+const formModel = reactive<Role>({
+  id: '',
+  roleId: '',
+  roleName: '',
+})
+const formItems = reactive<Array<FormItem>>([
+  {
+    label: '任务名称',
+    labelWidth: '80px',
+    vModel: 'roleId',
+    placeholder: '任务名称',
+    editReadonly: true,
+    prop: 'roleId',
+    rules: [
+      {
+        required: true,
+        message: '角色编号不能为空',
+        trigger: 'blur',
+      },
+    ],
+  },
+  {
+    label: '短信签名',
+    labelWidth: '80px',
+    vModel: 'roleName',
+    placeholder: '短信签名',
+    prop: 'roleName',
+    rules: [
+      {
+        required: true,
+        message: '角色名称不能为空',
+        trigger: 'blur',
+      },
+    ],
+  },
+  {
+    label: '短信模板',
+    labelWidth: '80px',
+    vModel: 'roleName',
+    placeholder: '短信模板',
+    prop: 'roleName',
+    rules: [
+      {
+        required: true,
+        message: '角色名称不能为空',
+        trigger: 'blur',
+      },
+    ],
+  },
+  {
+    label: '定时发送',
+    labelWidth: '80px',
+    vModel: 'roleName',
+    placeholder: '定时发送',
+    prop: 'roleName',
+    rules: [
+      {
+        required: true,
+        message: '角色名称不能为空',
+        trigger: 'blur',
+      },
+    ],
+  },
+  {
+    label: '发送号码',
+    labelWidth: '80px',
+    vModel: 'roleName',
+    placeholder: '发送号码',
+    prop: 'roleName',
+    rules: [
+      {
+        required: true,
+        message: '角色名称不能为空',
+        trigger: 'blur',
+      },
+    ],
+  },
+])
+const handleFormSubmit = (form: Role, done: any) => {
+  console.log('handleFormSubmit', form)
+  if (form.id) {
+    updateRole(form).then(() => {
+      ElMessage({
+        type: 'success',
+        message: '角色修改成功',
+      })
+      done()
+    })
+  } else {
+    addRole(form).then(() => {
+      ElMessage({
+        type: 'success',
+        message: '角色创建成功',
+      })
+      done()
+    })
+  }
+}
+/**
+ * 搜索
+ */
+const searchForm = reactive<SearchUser>({
+  userName: '',
+})
+const searchFormItems = reactive<Array<FormItem>>([
+  {
+    label: '任务名称',
+    vModel: 'userName',
+    placeholder: '任务名称',
+  },
+])
+
+/**
+ * 工具栏
+ */
+const tableToolbar = reactive<Toolbar>({
+  hiddenExportButton: true,
+  hiddenPrintButton: true,
+  hiddenImportButton: true,
+  hiddenBatchDeleteButton: true,
+})
+
+/**
+ * 表格
+ */
+const tableColumns = reactive<Array<Column>>([
+  {
+    width: '50',
+    type: 'selection',
+  },
+  {
+    label: '任务名称',
+    prop: 'roleName',
+    fixed: true,
+    width: '200',
+  },
+  {
+    label: '短信签名',
+    prop: 'roleName',
+    width: '200',
+  },
+  {
+    label: '短信模板',
+    prop: 'roleId',
+    width: '200',
+  },
+  {
+    label: '定时发送',
+    prop: 'roleId',
+    width: '200',
+  },
+  {
+    label: '发送号码',
+    prop: 'roleId',
+  },
+])
+const handleDelete = (item: Role, done: any) => {
+  ElMessageBox.confirm(`你真的删除【${item.roleName}】的角色吗？`, '警告', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+  }).then(() => {
+    deleteRole(item.id).then(() => {
+      ElMessage({
+        type: 'success',
+        message: '角色删除成功',
+      })
+      done()
+    })
+  })
+}
+
+const tableActionbar = reactive<Actionbar>({
+  width: 250,
+  btns: [
+    /*  {
+      name: '启用',
+      size: 'small',
+      click: (item: any, done: any) => {
+        console.log('左边自定义按钮click', item)
+        done()
+      },
+    },
+    {
+      name: '禁用',
+      size: 'small',
+      click: (item: any, done: any) => {
+        console.log('右边自定义按钮click', item)
+        done()
+      },
+    }, */
+  ],
+})
+/**
+ * 加载数据
+ */
+const load = () => {
+  getRoleList().then((res) => {
+    const { data: roleList } = res
+    dataList.length = 0
+    dataList.push(...roleList)
+  })
+}
+</script>
+<template>
+  <quick-crud
+    :dialog-title="dialogTitle"
+    :form-model="formModel"
+    :form-items="formItems"
+    :table-data="dataList"
+    :table-columns="tableColumns"
+    :table-actionbar="tableActionbar"
+    :table-toolbar="tableToolbar"
+    :search-form-items="searchFormItems"
+    :search-form-model="searchForm"
+    dialog-titles="dialogTitles"
+    @on-load="load"
+    @on-form-submit="handleFormSubmit"
+    @on-delete="handleDelete"
+  ></quick-crud>
+</template>
diff --git a/src/views/resource/sms/signature/index.vue b/src/views/resource/sms/signature/index.vue
new file mode 100644
index 0000000..3e0405b
--- /dev/null
+++ b/src/views/resource/sms/signature/index.vue
@@ -0,0 +1,275 @@
+<script lang="ts" setup>
+import { reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { UploadInstance } from 'element-plus'
+import QuickCrud from '@/components/QuickCrud/index.vue'
+import { Column, Actionbar, Toolbar } from '@/types/table'
+import { Role } from '@/types/role'
+import { FormItem } from '@/types/form'
+import { getRoleList, addRole, updateRole, deleteRole } from '@/api/role'
+import { SearchUser } from '@/types/user'
+
+const uploadRef = ref<UploadInstance>()
+
+const dataList = reactive<Array<Role>>([])
+/**
+ * 表单
+ */
+const dialogTitle = reactive({
+  add: '新增签名管理',
+  edit: '编辑签名管理',
+  detail: '签名管理详情',
+})
+const formModel = reactive<Role>({
+  id: '',
+  roleId: '',
+  roleName: '',
+})
+const formItems = reactive<Array<FormItem>>([
+  {
+    label: '签名名称',
+    labelWidth: '80px',
+    vModel: 'roleId',
+    placeholder: '签名名称',
+    editReadonly: true,
+    prop: 'roleId',
+    rules: [
+      {
+        required: true,
+        message: '角色编号不能为空',
+        trigger: 'blur',
+      },
+    ],
+  },
+  {
+    label: '签名用途',
+    labelWidth: '80px',
+    vModel: 'roleName',
+    placeholder: '签名用途',
+    prop: 'roleName',
+    rules: [
+      {
+        required: true,
+        message: '角色名称不能为空',
+        trigger: 'blur',
+      },
+    ],
+  },
+  {
+    label: '签名类型',
+    labelWidth: '80px',
+    vModel: 'roleName',
+    placeholder: '签名类型',
+    prop: 'roleName',
+    rules: [
+      {
+        required: true,
+        message: '角色名称不能为空',
+        trigger: 'blur',
+      },
+    ],
+  },
+  {
+    label: '签名内容',
+    labelWidth: '80px',
+    vModel: 'roleName',
+    placeholder: '签名内容',
+    prop: 'roleName',
+    rules: [
+      {
+        required: true,
+        message: '角色名称不能为空',
+        trigger: 'blur',
+      },
+    ],
+  },
+  {
+    label: '证明类型',
+    labelWidth: '80px',
+    vModel: 'roleName',
+    placeholder: '证明类型',
+    prop: 'roleName',
+    rules: [
+      {
+        required: true,
+        message: '角色名称不能为空',
+        trigger: 'blur',
+      },
+    ],
+  },
+  {
+    label: '证明上传',
+    labelWidth: '80px',
+    vModel: 'roleName',
+    placeholder: '证明上传',
+    prop: 'roleName',
+    rules: [
+      {
+        required: true,
+        message: '角色名称不能为空',
+        trigger: 'blur',
+      },
+    ],
+  },
+  {
+    label: '联系人',
+    labelWidth: '80px',
+    vModel: 'roleName',
+    placeholder: '联系人',
+    prop: 'roleName',
+    rules: [
+      {
+        required: true,
+        message: '角色名称不能为空',
+        trigger: 'blur',
+      },
+    ],
+  },
+])
+const handleFormSubmit = (form: Role, done: any) => {
+  console.log('handleFormSubmit', form)
+  if (form.id) {
+    updateRole(form).then(() => {
+      ElMessage({
+        type: 'success',
+        message: '角色修改成功',
+      })
+      done()
+    })
+  } else {
+    addRole(form).then(() => {
+      ElMessage({
+        type: 'success',
+        message: '角色创建成功',
+      })
+      done()
+    })
+  }
+}
+/**
+ * 搜索
+ */
+const searchForm = reactive<SearchUser>({
+  userName: '',
+})
+const searchFormItems = reactive<Array<FormItem>>([
+  {
+    label: '签名名称',
+    vModel: 'userName',
+    placeholder: '签名名称',
+  },
+  {
+    label: '签名类型',
+    vModel: 'userName',
+    placeholder: '签名类型',
+  },
+])
+
+/**
+ * 工具栏
+ */
+const tableToolbar = reactive<Toolbar>({
+  hiddenExportButton: true,
+  hiddenPrintButton: true,
+  hiddenImportButton: true,
+  hiddenBatchDeleteButton: true,
+})
+
+/**
+ * 表格
+ */
+const tableColumns = reactive<Array<Column>>([
+  {
+    width: '50',
+    type: 'selection',
+  },
+  {
+    label: '签名名称',
+    prop: 'roleName',
+  },
+  {
+    label: '签名用途',
+    prop: 'roleName',
+  },
+  {
+    label: '签名类型',
+    prop: 'roleName',
+  },
+  {
+    label: '签名内容',
+    prop: 'roleId',
+    width: '200',
+  },
+  {
+    label: '证明类型',
+    prop: 'roleId',
+    width: '200',
+  },
+  {
+    label: '证明上传',
+    prop: 'roleId',
+    width: '200',
+  },
+  {
+    label: '联系人',
+    prop: 'roleId',
+    width: '200',
+  },
+])
+const handleDelete = (item: Role, done: any) => {
+  ElMessageBox.confirm(`你真的删除【${item.roleName}】的角色吗？`, '警告', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+  }).then(() => {
+    deleteRole(item.id).then(() => {
+      ElMessage({
+        type: 'success',
+        message: '角色删除成功',
+      })
+      done()
+    })
+  })
+}
+
+const tableActionbar = reactive<Actionbar>({
+  width: 250,
+  btns: [
+    {
+      name: '审核',
+      size: 'small',
+      click: (item: any, done: any) => {
+        console.log('左边自定义按钮click', item)
+        done()
+      },
+    },
+  ],
+})
+/**
+ * 加载数据
+ */
+const load = () => {
+  getRoleList().then((res) => {
+    const { data: roleList } = res
+    dataList.length = 0
+    dataList.push(...roleList)
+  })
+}
+</script>
+<template>
+  <quick-crud
+    :dialog-title="dialogTitle"
+    :form-model="formModel"
+    :form-items="formItems"
+    :table-data="dataList"
+    :table-columns="tableColumns"
+    :table-actionbar="tableActionbar"
+    :table-toolbar="tableToolbar"
+    :search-form-items="searchFormItems"
+    :search-form-model="searchForm"
+    dialog-titles="dialogTitles"
+    @on-load="load"
+    @on-form-submit="handleFormSubmit"
+    @on-delete="handleDelete"
+  ></quick-crud>
+</template>
diff --git a/src/views/resource/sms/template/index.vue b/src/views/resource/sms/template/index.vue
new file mode 100644
index 0000000..fd533d2
--- /dev/null
+++ b/src/views/resource/sms/template/index.vue
@@ -0,0 +1,266 @@
+<script lang="ts" setup>
+import { reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { UploadInstance } from 'element-plus'
+import QuickCrud from '@/components/QuickCrud/index.vue'
+import { Column, Actionbar, Toolbar } from '@/types/table'
+import { Role } from '@/types/role'
+import { FormItem } from '@/types/form'
+import { getRoleList, addRole, updateRole, deleteRole } from '@/api/role'
+import { SearchUser } from '@/types/user'
+
+const uploadRef = ref<UploadInstance>()
+
+const dataList = reactive<Array<Role>>([])
+/**
+ * 表单
+ */
+const dialogTitle = reactive({
+  add: '新增普通存储',
+  edit: '编辑普通存储',
+  detail: '普通存储详情',
+})
+const formModel = reactive<Role>({
+  id: '',
+  roleId: '',
+  roleName: '',
+})
+const formItems = reactive<Array<FormItem>>([
+  {
+    label: '签名名称',
+    labelWidth: '80px',
+    vModel: 'roleId',
+    placeholder: '签名名称',
+    editReadonly: true,
+    prop: 'roleId',
+    rules: [
+      {
+        required: true,
+        message: '角色编号不能为空',
+        trigger: 'blur',
+      },
+    ],
+  },
+  {
+    label: '签名用途',
+    labelWidth: '80px',
+    vModel: 'roleName',
+    placeholder: '签名用途',
+    prop: 'roleName',
+    rules: [
+      {
+        required: true,
+        message: '角色名称不能为空',
+        trigger: 'blur',
+      },
+    ],
+  },
+  {
+    label: '签名类型',
+    labelWidth: '80px',
+    vModel: 'roleName',
+    placeholder: '签名类型',
+    prop: 'roleName',
+    rules: [
+      {
+        required: true,
+        message: '角色名称不能为空',
+        trigger: 'blur',
+      },
+    ],
+  },
+  {
+    label: '签名内容',
+    labelWidth: '80px',
+    vModel: 'roleName',
+    placeholder: '签名内容',
+    prop: 'roleName',
+    rules: [
+      {
+        required: true,
+        message: '角色名称不能为空',
+        trigger: 'blur',
+      },
+    ],
+  },
+  {
+    label: '证明类型',
+    labelWidth: '80px',
+    vModel: 'roleName',
+    placeholder: '证明类型',
+    prop: 'roleName',
+    rules: [
+      {
+        required: true,
+        message: '角色名称不能为空',
+        trigger: 'blur',
+      },
+    ],
+  },
+  {
+    label: '证明上传',
+    labelWidth: '80px',
+    vModel: 'roleName',
+    placeholder: '证明上传',
+    prop: 'roleName',
+    rules: [
+      {
+        required: true,
+        message: '角色名称不能为空',
+        trigger: 'blur',
+      },
+    ],
+  },
+  {
+    label: '联系人',
+    labelWidth: '80px',
+    vModel: 'roleName',
+    placeholder: '联系人',
+    prop: 'roleName',
+    rules: [
+      {
+        required: true,
+        message: '角色名称不能为空',
+        trigger: 'blur',
+      },
+    ],
+  },
+])
+const handleFormSubmit = (form: Role, done: any) => {
+  console.log('handleFormSubmit', form)
+  if (form.id) {
+    updateRole(form).then(() => {
+      ElMessage({
+        type: 'success',
+        message: '角色修改成功',
+      })
+      done()
+    })
+  } else {
+    addRole(form).then(() => {
+      ElMessage({
+        type: 'success',
+        message: '角色创建成功',
+      })
+      done()
+    })
+  }
+}
+/**
+ * 搜索
+ */
+const searchForm = reactive<SearchUser>({
+  userName: '',
+})
+const searchFormItems = reactive<Array<FormItem>>([
+  {
+    label: '模板名称',
+    vModel: 'userName',
+    placeholder: '模板名称',
+  },
+  {
+    label: '短信类型',
+    vModel: 'userName',
+    placeholder: '短信类型',
+  },
+])
+
+/**
+ * 工具栏
+ */
+const tableToolbar = reactive<Toolbar>({
+  hiddenExportButton: true,
+  hiddenPrintButton: true,
+  hiddenImportButton: true,
+  hiddenBatchDeleteButton: true,
+})
+
+/**
+ * 表格
+ */
+const tableColumns = reactive<Array<Column>>([
+  {
+    width: '50',
+    type: 'selection',
+  },
+  {
+    label: '模板名称',
+    prop: 'roleName',
+    fixed: true,
+  },
+  {
+    label: '短信类型',
+    prop: 'roleName',
+  },
+  {
+    label: '短信内容',
+    prop: 'roleId',
+    width: '200',
+  },
+  {
+    label: '申请说明',
+    prop: 'roleId',
+  },
+  {
+    label: '联系人',
+    prop: 'roleId',
+    width: '200',
+  },
+])
+const handleDelete = (item: Role, done: any) => {
+  ElMessageBox.confirm(`你真的删除【${item.roleName}】的角色吗？`, '警告', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+  }).then(() => {
+    deleteRole(item.id).then(() => {
+      ElMessage({
+        type: 'success',
+        message: '角色删除成功',
+      })
+      done()
+    })
+  })
+}
+
+const tableActionbar = reactive<Actionbar>({
+  width: 250,
+  btns: [
+    {
+      name: '审核',
+      size: 'small',
+      click: (item: any, done: any) => {
+        console.log('左边自定义按钮click', item)
+        done()
+      },
+    },
+  ],
+})
+/**
+ * 加载数据
+ */
+const load = () => {
+  getRoleList().then((res) => {
+    const { data: roleList } = res
+    dataList.length = 0
+    dataList.push(...roleList)
+  })
+}
+</script>
+<template>
+  <quick-crud
+    :dialog-title="dialogTitle"
+    :form-model="formModel"
+    :form-items="formItems"
+    :table-data="dataList"
+    :table-columns="tableColumns"
+    :table-actionbar="tableActionbar"
+    :table-toolbar="tableToolbar"
+    :search-form-items="searchFormItems"
+    :search-form-model="searchForm"
+    dialog-titles="dialogTitles"
+    @on-load="load"
+    @on-form-submit="handleFormSubmit"
+    @on-delete="handleDelete"
+  ></quick-crud>
+</template>
diff --git a/src/views/resource/storage/general/index.vue b/src/views/resource/storage/general/index.vue
new file mode 100644
index 0000000..71f7ad6
--- /dev/null
+++ b/src/views/resource/storage/general/index.vue
@@ -0,0 +1,214 @@
+<script lang="ts" setup>
+import { reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { UploadInstance } from 'element-plus'
+import QuickCrud from '@/components/QuickCrud/index.vue'
+import { Column, Actionbar, Toolbar } from '@/types/table'
+import { Role } from '@/types/role'
+import { FormItem } from '@/types/form'
+import { getRoleList, addRole, updateRole, deleteRole } from '@/api/role'
+import { SearchUser } from '@/types/user'
+
+const uploadRef = ref<UploadInstance>()
+
+const dataList = reactive<Array<Role>>([])
+/**
+ * 表单
+ */
+const dialogTitle = reactive({
+  add: '新增普通存储',
+  edit: '编辑普通存储',
+  detail: '普通存储详情',
+})
+const formModel = reactive<Role>({
+  id: '',
+  roleId: '',
+  roleName: '',
+})
+const formItems = reactive<Array<FormItem>>([
+  {
+    label: 'FTP地址',
+    labelWidth: '80px',
+    vModel: 'roleId',
+    placeholder: 'FTP地址',
+    editReadonly: true,
+    prop: 'roleId',
+    rules: [
+      {
+        required: true,
+        message: '角色编号不能为空',
+        trigger: 'blur',
+      },
+    ],
+  },
+  {
+    label: 'FTP账号',
+    labelWidth: '80px',
+    vModel: 'roleName',
+    placeholder: 'FTP账号',
+    prop: 'roleName',
+    rules: [
+      {
+        required: true,
+        message: '角色名称不能为空',
+        trigger: 'blur',
+      },
+    ],
+  },
+  {
+    label: 'FTP密码',
+    labelWidth: '80px',
+    vModel: 'roleName',
+    placeholder: 'FTP密码',
+    prop: 'roleName',
+    rules: [
+      {
+        required: true,
+        message: '角色名称不能为空',
+        trigger: 'blur',
+      },
+    ],
+  },
+])
+const handleFormSubmit = (form: Role, done: any) => {
+  console.log('handleFormSubmit', form)
+  if (form.id) {
+    updateRole(form).then(() => {
+      ElMessage({
+        type: 'success',
+        message: '角色修改成功',
+      })
+      done()
+    })
+  } else {
+    addRole(form).then(() => {
+      ElMessage({
+        type: 'success',
+        message: '角色创建成功',
+      })
+      done()
+    })
+  }
+}
+/**
+ * 搜索
+ */
+const searchForm = reactive<SearchUser>({
+  userName: '',
+})
+const searchFormItems = reactive<Array<FormItem>>([
+  {
+    label: '空间名称',
+    vModel: 'userName',
+    placeholder: '空间名称',
+  },
+  {
+    label: '类型',
+    vModel: 'userName',
+    placeholder: '类型',
+  },
+])
+
+/**
+ * 工具栏
+ */
+const tableToolbar = reactive<Toolbar>({
+  hiddenExportButton: true,
+  hiddenPrintButton: true,
+  hiddenImportButton: true,
+  hiddenBatchDeleteButton: true,
+})
+
+/**
+ * 表格
+ */
+const tableColumns = reactive<Array<Column>>([
+  {
+    width: '50',
+    type: 'selection',
+  },
+  {
+    label: 'FTP地址',
+    prop: 'roleName',
+    fixed: true,
+  },
+  {
+    label: 'FTP账号',
+    prop: 'roleName',
+  },
+  {
+    label: 'FTP密码',
+    prop: 'roleId',
+    width: '200',
+  },
+  {
+    label: '状态',
+    prop: 'roleId',
+    width: '200',
+  },
+])
+const handleDelete = (item: Role, done: any) => {
+  ElMessageBox.confirm(`你真的删除【${item.roleName}】的角色吗？`, '警告', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+  }).then(() => {
+    deleteRole(item.id).then(() => {
+      ElMessage({
+        type: 'success',
+        message: '角色删除成功',
+      })
+      done()
+    })
+  })
+}
+
+const tableActionbar = reactive<Actionbar>({
+  width: 250,
+  btns: [
+    {
+      name: '启用',
+      size: 'small',
+      click: (item: any, done: any) => {
+        console.log('左边自定义按钮click', item)
+        done()
+      },
+    },
+    {
+      name: '禁用',
+      size: 'small',
+      click: (item: any, done: any) => {
+        console.log('右边自定义按钮click', item)
+        done()
+      },
+    },
+  ],
+})
+/**
+ * 加载数据
+ */
+const load = () => {
+  getRoleList().then((res) => {
+    const { data: roleList } = res
+    dataList.length = 0
+    dataList.push(...roleList)
+  })
+}
+</script>
+<template>
+  <quick-crud
+    :dialog-title="dialogTitle"
+    :form-model="formModel"
+    :form-items="formItems"
+    :table-data="dataList"
+    :table-columns="tableColumns"
+    :table-actionbar="tableActionbar"
+    :table-toolbar="tableToolbar"
+    :search-form-items="searchFormItems"
+    :search-form-model="searchForm"
+    dialog-titles="dialogTitles"
+    @on-load="load"
+    @on-form-submit="handleFormSubmit"
+    @on-delete="handleDelete"
+  ></quick-crud>
+</template>
diff --git a/src/views/resource/storage/object/index.vue b/src/views/resource/storage/object/index.vue
new file mode 100644
index 0000000..7754329
--- /dev/null
+++ b/src/views/resource/storage/object/index.vue
@@ -0,0 +1,230 @@
+<script lang="ts" setup>
+import { reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { UploadInstance } from 'element-plus'
+import QuickCrud from '@/components/QuickCrud/index.vue'
+import { Column, Actionbar, Toolbar } from '@/types/table'
+import { Role } from '@/types/role'
+import { FormItem } from '@/types/form'
+import { getRoleList, addRole, updateRole, deleteRole } from '@/api/role'
+import { SearchUser } from '@/types/user'
+
+const uploadRef = ref<UploadInstance>()
+
+const dataList = reactive<Array<Role>>([])
+/**
+ * 表单
+ */
+const dialogTitle = reactive({
+  add: '新增对象存储',
+  edit: '编辑对象存储',
+  detail: '对象存储详情',
+})
+const formModel = reactive<Role>({
+  id: '',
+  roleId: '',
+  roleName: '',
+})
+const formItems = reactive<Array<FormItem>>([
+  {
+    label: '空间名称',
+    labelWidth: '90px',
+    vModel: 'roleId',
+    placeholder: '空间名称',
+    editReadonly: true,
+    prop: 'roleId',
+    rules: [
+      {
+        required: true,
+        message: '角色编号不能为空',
+        trigger: 'blur',
+      },
+    ],
+  },
+  {
+    label: '类型',
+    labelWidth: '90px',
+    vModel: 'roleName',
+    placeholder: '类型',
+    prop: 'roleName',
+    rules: [
+      {
+        required: true,
+        message: '角色名称不能为空',
+        trigger: 'blur',
+      },
+    ],
+  },
+  {
+    label: 'accessKey',
+    labelWidth: '90px',
+    vModel: 'roleName',
+    placeholder: 'accessKey',
+    prop: 'roleName',
+    rules: [
+      {
+        required: true,
+        message: '角色名称不能为空',
+        trigger: 'blur',
+      },
+    ],
+  },
+  {
+    label: 'secretKey',
+    labelWidth: '90px',
+    vModel: 'roleName',
+    placeholder: 'secretKey',
+    prop: 'roleName',
+    rules: [
+      {
+        required: true,
+        message: '角色名称不能为空',
+        trigger: 'blur',
+      },
+    ],
+  },
+])
+const handleFormSubmit = (form: Role, done: any) => {
+  console.log('handleFormSubmit', form)
+  if (form.id) {
+    updateRole(form).then(() => {
+      ElMessage({
+        type: 'success',
+        message: '角色修改成功',
+      })
+      done()
+    })
+  } else {
+    addRole(form).then(() => {
+      ElMessage({
+        type: 'success',
+        message: '角色创建成功',
+      })
+      done()
+    })
+  }
+}
+/**
+ * 搜索
+ */
+const searchForm = reactive<SearchUser>({
+  userName: '',
+})
+const searchFormItems = reactive<Array<FormItem>>([
+  {
+    label: '空间名称',
+    vModel: 'userName',
+    placeholder: '空间名称',
+  },
+  {
+    label: '类型',
+    vModel: 'userName',
+    placeholder: '类型',
+  },
+])
+
+/**
+ * 工具栏
+ */
+const tableToolbar = reactive<Toolbar>({
+  hiddenExportButton: true,
+  hiddenPrintButton: true,
+  hiddenImportButton: true,
+  hiddenBatchDeleteButton: true,
+})
+
+/**
+ * 表格
+ */
+const tableColumns = reactive<Array<Column>>([
+  {
+    width: '50',
+    type: 'selection',
+  },
+  {
+    label: '空间名称',
+    prop: 'roleName',
+  },
+  {
+    label: '类型',
+    prop: 'roleName',
+  },
+  {
+    label: 'accessKey',
+    prop: 'roleId',
+    width: '200',
+  },
+  {
+    label: 'secretKey',
+    prop: 'roleName',
+  },
+  {
+    label: '状态',
+    prop: 'roleName',
+  },
+])
+const handleDelete = (item: Role, done: any) => {
+  ElMessageBox.confirm(`你真的删除【${item.roleName}】的角色吗？`, '警告', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+  }).then(() => {
+    deleteRole(item.id).then(() => {
+      ElMessage({
+        type: 'success',
+        message: '角色删除成功',
+      })
+      done()
+    })
+  })
+}
+
+const tableActionbar = reactive<Actionbar>({
+  width: 250,
+  btns: [
+    {
+      name: '启用',
+      size: 'small',
+      click: (item: any, done: any) => {
+        console.log('左边自定义按钮click', item)
+        done()
+      },
+    },
+    {
+      name: '禁用',
+      size: 'small',
+      click: (item: any, done: any) => {
+        console.log('右边自定义按钮click', item)
+        done()
+      },
+    },
+  ],
+})
+/**
+ * 加载数据
+ */
+const load = () => {
+  getRoleList().then((res) => {
+    const { data: roleList } = res
+    dataList.length = 0
+    dataList.push(...roleList)
+  })
+}
+</script>
+<template>
+  <quick-crud
+    :dialog-title="dialogTitle"
+    :form-model="formModel"
+    :form-items="formItems"
+    :table-data="dataList"
+    :table-columns="tableColumns"
+    :table-actionbar="tableActionbar"
+    :table-toolbar="tableToolbar"
+    :search-form-items="searchFormItems"
+    :search-form-model="searchForm"
+    dialog-titles="dialogTitles"
+    @on-load="load"
+    @on-form-submit="handleFormSubmit"
+    @on-delete="handleDelete"
+  ></quick-crud>
+</template>
-- 
Gitee