feat 表单编辑Hooks开发, 终端编辑页面开发

.env

@@ -2,7 +2,7 @@
 VITE_PORT=3100
 
 # spa-title
-VITE_GLOB_APP_TITLE=Vben Admin
+VITE_GLOB_APP_TITLE=Bootx-Platform
 
 # spa shortname
-VITE_GLOB_APP_SHORT_NAME=vue_vben_admin
+VITE_GLOB_APP_SHORT_NAME=bootx_platform

src/design/components/antdv.less

@@ -1,5 +1,5 @@
 
-/* 表单项间隔(小) */
+/* 表单项间隔(超级小) */
 .mini-from-item {
   .ant-form-item {
     margin-bottom: 8px;

src/enums/formTypeEnum.ts

@@ -0,0 +1,8 @@
+/**
+ * 表单类型
+ */
+export enum FormType {
+  Add,
+  Edit,
+  Show,
+}

src/hooks/bootx/useFormEdit.ts

@@ -0,0 +1,72 @@
+import { reactive, toRefs } from 'vue'
+import { FormType } from "/@/enums/formTypeEnum";
+
+export default function () {
+  const model = reactive({
+    // 表单项标题文字
+    labelCol: {
+      sm: { span: 7 },
+    },
+    // 表单项内容
+    wrapperCol: {
+      sm: { span: 13 },
+    },
+    title: '新增',
+    modalWidth: '50%',
+    confirmLoading: false,
+    visible: false,
+    editable: false,
+    addable: false,
+    showable: false,
+    type: FormType.Add,
+  })
+  // 状态
+  const { labelCol, wrapperCol, title, modalWidth, confirmLoading, visible, editable, addable, showable, type } = toRefs(model)
+
+  function initFormModel(record, fromType: FormType, ...vars) {
+    type.value = fromType
+    visible.value = true
+    if (type.value === FormType.Add) {
+      addable.value = true
+      title.value = '新增'
+    }
+    if (type.value === FormType.Edit) {
+      editable.value = true
+      title.value = '修改'
+    }
+    if (type.value === FormType.Show) {
+      showable.value = true
+      title.value = '查看'
+    }
+  }
+
+  // 关闭
+  function handleCancel() {
+    visible.value = false
+    addable.value = false
+    editable.value = false
+    showable.value = false
+  }
+
+  // 搜索
+  function search(input: string, option) {
+    return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+  }
+
+  return {
+    model,
+    labelCol,
+    wrapperCol,
+    title,
+    modalWidth,
+    confirmLoading,
+    visible,
+    editable,
+    addable,
+    showable,
+    type,
+    initFormModel,
+    handleCancel,
+    search,
+  }
+}

src/hooks/bootx/useFrom.ts

@@ -1,37 +0,0 @@
-import { reactive, ref, toRefs } from 'vue'
-import { FormType } from '/#/web'
-
-export default function () {
-  const model = reactive({
-    // 表单项标题文字
-    labelCol: {
-      sm: { span: 7 },
-    },
-    // 表单项内容
-    wrapperCol: {
-      sm: { span: 13 },
-    },
-    title: '新增',
-    modalWidth: '50%',
-    confirmLoading: false,
-    visible: false,
-    editable: false,
-    addable: false,
-    showable: false,
-    type: FormType.Add,
-  })
-  const { labelCol, wrapperCol, title, modalWidth, confirmLoading, visible, editable, addable, showable, type } = toRefs(model)
-  return {
-    model,
-    labelCol,
-    wrapperCol,
-    title,
-    modalWidth,
-    confirmLoading,
-    visible,
-    editable,
-    addable,
-    showable,
-    type,
-  }
-}

src/hooks/bootx/useTablePage.ts

@@ -1,5 +1,5 @@
 import { TablePageModel } from '/#/web'
-import { reactive, ref, toRefs } from 'vue'
+import { reactive, ref } from 'vue'
 import { PageResult } from '/#/axios'
 
 /**

src/layouts/default/footer/index.vue

@@ -7,7 +7,7 @@
 
       <a @click="openWindow(DOC_URL)">{{ t('layout.footer.onlineDocument') }}</a>
     </div>
-    <div>Copyright &copy;2020 Vben Admin</div>
+    <div>Copyright &copy;2021 Bootx</div>
   </Footer>
 </template>
 

src/views/demo/page/account/center/data.tsx

@@ -88,7 +88,7 @@ export const articleList = (() => {
   const result: any[] = []
   for (let i = 0; i < 4; i++) {
     result.push({
-      title: 'Vben Admin',
+      title: 'Bootx Platform',
       description: ['Vben', '设计语言', 'Typescript'],
       content: '基于Vue Next, TypeScript, Ant Design实现的一套完整的企业级后台管理系统。',
       time: '2020-11-14 11:20',

src/views/modules/system/client/Client.api.ts

@@ -6,28 +6,56 @@ import { BaseEntity } from '/#/web'
  * 分页
  */
 export const page = (params) => {
-  return defHttp.get<Result<PageResult>>({
+  return defHttp.get<Result<PageResult<Client>>>({
     url: '/client/page',
     params,
   })
 }
 
 /**
- * 实体类
+ * 获取单条
  */
-// export class Client extends BaseEntity {
-//   // 编码
-//   public code: string
-//   // 名称
-//   name: string
-//   // 是否系统内置
-//   system: boolean
-//   // 是否可用
-//   enable: boolean
-//   // 关联登录方式
-//   loginTypeIds: string
-//   // 关联登录方式
-//   loginTypeIdList: Array<number>
-//   // 描述
-//   description: string
-// }
+export const get = (id) => {
+  return defHttp.get<Result<Client>>({
+    url: '/client/findById',
+    params: { id },
+  })
+}
+
+/**
+ * 添加
+ */
+export const add = (obj) => {
+  return defHttp.post({
+    url: '/client/add',
+    data: obj,
+  })
+}
+
+/**
+ * 更新
+ */
+export const update = (obj) => {
+  return defHttp.post({
+    url: '/client/update',
+    data: obj,
+  })
+}
+
+/**
+ * 实体类接口
+ */
+export interface Client extends BaseEntity {
+  // 编码
+  code: string
+  // 名称
+  name: string
+  // 是否系统内置
+  system: boolean
+  // 是否可用
+  enable: boolean
+  // 关联登录方式
+  loginTypeIdList: Array<string> | undefined | null
+  // 描述
+  description: string
+}

src/views/modules/system/client/ClientEdit.vue

@@ -8,17 +8,17 @@
     :confirmLoading="confirmLoading"
   >
     <a-spin :spinning="confirmLoading">
-      <a-form class="small-from-item" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
-        <a-form-item label="主键" name="id" :hidden="true">
+      <a-form class="small-from-item" :label-col="labelCol" :wrapper-col="wrapperCol">
+        <a-form-item label="主键" :hidden="true">
           <a-input v-model:value="form.id" :disabled="showable" />
         </a-form-item>
-        <a-form-item label="编码" has-feedback name="code">
+        <a-form-item label="编码" v-bind="validateInfos.code" name="code">
           <a-input v-model:value="form.code" :disabled="showable" placeholder="请输入编码" />
         </a-form-item>
-        <a-form-item label="名称" has-feedback name="name">
+        <a-form-item label="名称" v-bind="validateInfos.name" name="name">
           <a-input v-model:value="form.name" :disabled="showable" placeholder="请输入名称" />
         </a-form-item>
-        <a-form-item label="启用状态" name="enable">
+        <a-form-item label="启用状态" v-bind="validateInfos.enable" name="enable">
           <a-switch checked-children="开" un-checked-children="关" v-model:checked="form.enable" :disabled="showable || form.system" />
         </a-form-item>
         <a-form-item label="系统内置" name="system">
@@ -34,7 +34,7 @@
             :filter-option="search"
             :disabled="showable"
             style="width: 100%"
-            placeholder="选择关联的终端"
+            placeholder="选择关联的登录方式"
           >
             <a-select-option v-for="o in loginTypes" :key="o.id">
               {{ o.name }}
@@ -56,68 +56,81 @@
 </template>
 
 <script lang="ts" setup>
-  import { reactive, toRef, toRefs } from 'vue'
-  const model = reactive({
-    // 表单项标题文字
-    labelCol: {
-      sm: { span: 7 },
-    },
-    // 表单项内容
-    wrapperCol: {
-      sm: { span: 13 },
-    },
-    title: '新增',
-    rawForm: {},
-    modalWidth: '50%',
-    confirmLoading: false,
-    visible: false,
-    editable: false,
-    addable: false,
-    showable: false,
-    type: 'add',
-  })
-  const { labelCol, wrapperCol, title, modalWidth, confirmLoading, visible, editable, addable, showable, type } = toRefs(model)
-  const form = reactive({
+  import { nextTick, reactive } from 'vue'
+  import useFormEdit from '/@/hooks/bootx/useFormEdit'
+  import { Client, get } from './Client.api'
+  import { useForm } from 'ant-design-vue/lib/form'
+  import { FormType } from '/@/enums/formTypeEnum'
+
+  const {
+    initFormModel,
+    handleCancel,
+    search,
+    labelCol,
+    wrapperCol,
+    title,
+    modalWidth,
+    confirmLoading,
+    visible,
+    editable,
+    showable,
+    type,
+  } = useFormEdit()
+  let form = reactive({
     id: null,
-    code: null,
-    name: null,
+    code: '',
+    name: '',
     system: false,
     enable: true,
     loginTypeIdList: [],
     description: '',
-  })
+  } as Client)
+  // 校验状态
   const rules = reactive({
     code: [
-      { required: true, message: '请输入应用编码', trigger: ['change', 'blur'] },
+      { required: true, message: '请输入应用编码' },
       // { validator: validateCode, trigger: 'blur' },
     ],
-    name: [{ required: true, message: '请输入应用名称', trigger: ['change', 'blur'] }],
-    enable: [{ required: true, message: '请选择启用状态', trigger: ['change', 'blur'] }],
+    name: [{ required: true, message: '请输入应用名称' }],
+    enable: [{ required: true, message: '请选择启用状态' }],
   })
+  // 表单
+  const { resetFields, validate, validateInfos } = useForm(form, rules)
 
-  function handleCancel() {
-    visible.value = false
-    addable.value = false
-    editable.value = false
-    showable.value = false
-  }
   function validateCode(rule, value, callback) {}
+  // 入口
+  function init(id, editType: FormType) {
+    initFormModel(id, editType)
+    resetForm()
+    getInfo(id, editType)
+  }
+  // 获取信息
+  function getInfo(id, type: FormType) {
+    // this.initLoginTypes()
+    if ([FormType.Edit, FormType.Show].includes(type)) {
+      confirmLoading.value = true
+      get(id).then(({ data }) => {
+        form = reactive(data)
+        confirmLoading.value = false
+      })
+    } else {
+      confirmLoading.value = false
+    }
+  }
+  // 保存
+  async function handleOk() {
+    validate().then(() => {
+      confirmLoading.value = true
+      console.log(form)
+      confirmLoading.value = false
+    })
+  }
 
-  function init(record, editType: string, ...vars) {
-    type.value = editType
-    visible.value = true
-    if (editType && editType === 'add') {
-      addable.value = true
-      title.value = '新增'
-    }
-    if (editType === 'edit') {
-      editable.value = true
-      title.value = '修改'
-    }
-    if (editType === 'show') {
-      showable.value = true
-      title.value = '查看'
-    }
+  // 重置表单的校验
+  function resetForm() {
+    nextTick(() => {
+      resetFields()
+    })
   }
   defineExpose({
     init,

src/views/modules/system/client/ClientList.vue

@@ -45,14 +45,14 @@
 
 <script lang="ts" setup>
   import { onMounted, ref } from 'vue'
-  import { page } from '/@/views/modules/system/client/Client.api'
-  import useTable from '/@/hooks/bootx/useTable'
+  import { page } from './Client.api'
+  import useTablePage from '/@/hooks/bootx/useTablePage'
   import ClientEdit from './ClientEdit.vue'
   import BQuery from '/@/components/Bootx/Query/BQuery.vue'
   import { STRING } from '/@/components/Bootx/Query/SuperQueryCode'
 
   // 使用hooks
-  const { handleTableChange, pageQueryResHandel, resetQueryParams, pagination, pages, model, loading } = useTable(queryPage)
+  const { handleTableChange, pageQueryResHandel, resetQueryParams, pagination, pages, model, loading } = useTablePage(queryPage)
   const clientEdit = ref()
   // 查询条件z
   const fields = [
@@ -76,7 +76,7 @@
   }
   // 新增
   function add() {
-    clientEdit.value.init()
+    clientEdit.value.init(null, '')
   }
 </script>
 

types/web.d.ts

@@ -31,25 +31,9 @@ export interface TablePageModel<T = any> {
   pagination: PageResult<T>
 }
 
-/**
- * 编辑界面参数对象
- */
-export interface EditModel {
-
-}
-
 /**
  * 基础实体对象
  */
-export class BaseEntity {
-  id: number
-}
-
-/**
- * 表单类型
- */
-export enum FormType {
-  Add,
-  Edit,
-  Show,
+export interface BaseEntity {
+  id: number | null
 }