init

src/composables/index.js

@@ -0,0 +1,4 @@
+export * from './useCrud'
+export * from './useForm'
+export * from './useModal'
+export * from './useAliveData'

src/composables/useAliveData.js

@@ -0,0 +1,30 @@
+/**********************************
+ * @Author: Ronnie Zhang
+ * @LastEditor: Ronnie Zhang
+ * @LastEditTime: 2023/12/05 21:22:28
+ * @Email: zclzone@outlook.com
+ * Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ **********************************/
+
+const lastDataMap = new Map()
+export const useAliveForm = (initData = {}, key) => {
+  key = key ?? useRoute().name
+  const lastData = lastDataMap.get(key)
+  const aliveData = ref(lastData || { ...initData })
+
+  watch(
+    aliveData,
+    (v) => {
+      lastDataMap.set(key, v)
+    },
+    { deep: true }
+  )
+
+  return {
+    aliveData,
+    reset() {
+      aliveData.value = { ...initData }
+      lastDataMap.delete(key)
+    },
+  }
+}

src/composables/useCrud.js

@@ -0,0 +1,122 @@
+/**********************************
+ * @Author: Ronnie Zhang
+ * @LastEditor: Ronnie Zhang
+ * @LastEditTime: 2023/12/05 21:22:35
+ * @Email: zclzone@outlook.com
+ * Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ **********************************/
+
+import { useModal, useForm } from '.'
+
+const ACTIONS = {
+  view: '查看',
+  edit: '编辑',
+  add: '新增',
+}
+
+export const useCrud = ({ name, initForm = {}, doCreate, doDelete, doUpdate, refresh }) => {
+  const modalAction = ref('')
+  const [modalRef, okLoading] = useModal()
+  const [modalFormRef, modalForm, validation] = useForm(initForm)
+
+  /** 新增 */
+  function handleAdd(row = {}, title) {
+    handleOpen({ action: 'add', title, row: { ...initForm, ...row } })
+  }
+
+  /** 修改 */
+  function handleEdit(row, title) {
+    handleOpen({ action: 'edit', title, row })
+  }
+
+  /** 查看 */
+  function handleView(row, title) {
+    handleOpen({ action: 'view', title, row })
+  }
+
+  /** 打开modal */
+  function handleOpen(options = {}) {
+    const { action, row, title, onOk } = options
+    modalAction.value = action
+    modalForm.value = { ...row }
+    modalRef.value?.open({
+      ...options,
+      async onOk() {
+        if (typeof onOk === 'function') {
+          return await onOk()
+        } else {
+          return await handleSave()
+        }
+      },
+      title: title ?? (ACTIONS[modalAction.value] || '') + name,
+    })
+  }
+
+  /** 保存 */
+  async function handleSave(action) {
+    if (!action && !['edit', 'add'].includes(modalAction.value)) {
+      return false
+    }
+    if (!(await validation())) return false
+    const actions = {
+      add: {
+        api: () => doCreate(modalForm.value),
+        cb: () => $message.success('新增成功'),
+      },
+      edit: {
+        api: () => doUpdate(modalForm.value),
+        cb: () => $message.success('保存成功'),
+      },
+    }
+
+    action = action || actions[modalAction.value]
+
+    try {
+      okLoading.value = true
+      const data = await action.api()
+      action.cb()
+      okLoading.value = false
+      data && refresh(data)
+    } catch (error) {
+      okLoading.value = false
+    }
+  }
+
+  /** 删除 */
+  function handleDelete(id, confirmOptions) {
+    if (!id && id !== 0) return
+    const d = $dialog.warning({
+      content: '确定删除？',
+      title: '提示',
+      positiveText: '确定',
+      negativeText: '取消',
+      async onPositiveClick() {
+        try {
+          d.loading = true
+          const data = await doDelete(id)
+          $message.success('删除成功')
+          d.loading = false
+          refresh(data)
+        } catch (error) {
+          d.loading = false
+        }
+      },
+      ...confirmOptions,
+    })
+  }
+
+  return {
+    modalRef,
+    modalFormRef,
+    modalAction,
+    modalForm,
+    okLoading,
+    validation,
+    handleAdd,
+    handleDelete,
+    handleEdit,
+    handleView,
+    handleOpen,
+    handleSave,
+  }
+}

src/composables/useForm.js

@@ -0,0 +1,28 @@
+/**********************************
+ * @Author: Ronnie Zhang
+ * @LastEditor: Ronnie Zhang
+ * @LastEditTime: 2023/12/05 21:22:43
+ * @Email: zclzone@outlook.com
+ * Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ **********************************/
+
+export const useForm = (initFormData = {}) => {
+  const formRef = ref(null)
+  const formModel = ref({ ...initFormData })
+  async function validation() {
+    try {
+      await formRef.value?.validate()
+      return true
+    } catch (error) {
+      return false
+    }
+  }
+  const rules = {
+    required: {
+      required: true,
+      message: '此为必填项',
+      trigger: ['blur', 'change'],
+    },
+  }
+  return [formRef, formModel, validation, rules]
+}

src/composables/useModal.js

@@ -0,0 +1,20 @@
+/**********************************
+ * @Author: Ronnie Zhang
+ * @LastEditor: Ronnie Zhang
+ * @LastEditTime: 2023/12/05 21:22:49
+ * @Email: zclzone@outlook.com
+ * Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ **********************************/
+
+export const useModal = () => {
+  const modalRef = ref(null)
+  const okLoading = computed({
+    get() {
+      return modalRef.value?.okLoading
+    },
+    set(v) {
+      modalRef.value.okLoading = v
+    },
+  })
+  return [modalRef, okLoading]
+}