表格的增删改查

表格的增删改查

基于 ant 组件库配合BaseForm组件使用

useFormModal.ts

import { ref, shallowRef } from "vue";
// 用于弹框的use
export default () => {
    // 表单标题
    const title = shallowRef<string>("");
    // 其他参数  通过打开弹框传递进入
    const otherData: any = ref<Record<any, any>>({});
    // 表单ref
    const baseForm = ref();
    // 弹框显示
    const flag = shallowRef<boolean>(false);
    return {
        title,
        otherData,
        baseForm,
        flag,
    };
};

useCrud.ts

import { confirmModal, sMessage } from '@/services/utils/uiHelper'
import { onMounted, ref } from 'vue'
import useFormModal from './useFormModal'
// 表格的增删改查配置
export const useCrud = (options: {
  getList: any
  addApi?: any
  editApi?: any
  getInfoApi?: any
  deleteApi?: any
  enableApi?: any
  emits?: (type: any, data: any) => void
  customInterfaceList?: any[]
}) => {
  const { getList, addApi, editApi, deleteApi, enableApi, getInfoApi, emits, customInterfaceList } =
    options

  const { otherData, title, flag, baseForm } = useFormModal()

  // 打开弹框   isName帮助修改id名
  const open = (options: any) => {
    const { titleText, data, idName, isCustom } = options
    // console.log(data, idName, 'datadatadatadata')
    if (data && !isCustom) {
      getInfo(data)
    }
    // 标题
    title.value = titleText
    // console.log(data[idName], idName, 'data[idName]')
    // 额外参数
    otherData.value = data[idName] || data.id
    // console.log(otherData.value, 'otherData.value ')
    // 弹框开启前自定义操作
    emits && emits('open', data)
    // 弹框开关
    flag.value = true
  }

  const close = () => {
    // console.log(baseForm.value, 'baseForm.value')
    baseForm.value?.resetForm()
    title.value = ''
    flag.value = false
    emits && emits('close', true)
  }
  const onSubmit = (data?: any) => {
    emits && emits('onSubmitBefore', true)
    baseForm.value.handleSubmit((formData: Record<string, any>) => {
      if (title.value.indexOf('编辑') > -1) {
        edit({ ...formData, ...data })
        return
      }
      if (title.value.indexOf('新增') > -1) {
        add({ ...formData, ...data })
        return
      }
    })
  }
  const add = (formData?: Record<any, any>) => {
    // console.log(formData, 'formDataformDataformData')
    addApi(formData)?.then((res: any) => {
      if (res.code == 200 && res.result) {
        sMessage.success('新增成功')
        flag.value = false
        emits && emits('addFinish', true)
        getList()
        baseForm.value?.resetForm()
      } else {
        sMessage.error(res.message || '失败')
      }
    })
  }
  const getInfo = (formData?: Record<any, any>, idName?: any) => {
    // console.log(formData, 'formData')
    getInfoApi(formData).then((res: any) => {
      if (res.code == 200 && res.result) {
        emits && emits('getInfo', res)
        baseForm.value.dataPlayBack(res.data)
      } else {
        sMessage.error(res.message || '失败')
      }
    })
    // emits && emits("getInfo", res);
  }
  const edit = (formData?: Record<any, any>) => {
    // console.log(formData, otherData.value, 'formData')
    editApi({ id: otherData.value, ...formData }).then((res: any) => {
      if (res.code == 200 && res.result) {
        sMessage.success('修改成功')
        flag.value = false
        // console.log(flag.value)
        emits && emits('editorFinish', true)
        getList()
        baseForm.value?.resetForm()
      } else {
        sMessage.error(res.message || '失败')
      }
    })
  }
  const enable = (option: any) => {
    // console.log(option, 'option')
    confirmModal({
      title: '提示',
      content: `您确认要${option.zfbz ? '禁用' : '启用'}吗?`,
      async confirm() {
        enableApi(option).then((res: any) => {
          // console.log(res, '禁用')
          if (res.code == 200 && res.result) {
            getList()
            emits && emits('enableFinish', true)
            if (option.zfbz) {
              sMessage.success('禁用成功')
            } else {
              sMessage.success('启用成功')
            }
          }
        })
      }
    })
  }

  const del = (p: any) => {
    confirmModal({
      title: '提示',
      content: '您确认要删除吗?',
      async confirm() {
        deleteApi(p).then((res: any) => {
          if (res.code == 200 && res.result) {
            sMessage.success('删除成功')
            getList()
            emits && emits('deleteFinish', true)
          } else {
            sMessage.error(res.message || '失败')
          }
        })
      }
    })
  }

  /**
   * 如何使用？
   * 按钮调用：funcs.自定义方法名()
   * 方法调用：funcs.value.自定义方法名()
   */
  const funcs = ref<any>({})

  function createFunction(name: string, body: any) {
    funcs.value[name] = body
  }
  const generateFunctions = () => {
    if (!customInterfaceList) return
    customInterfaceList?.forEach(
      (item: {
        name: string
        customFn?: Function
        customApi?: any
        message?: any
        isDataFlag?: boolean
      }) => {
        if (typeof item.customFn === 'function') {
          createFunction(item.name, item.customFn)
        } else {
          const fn = (newP: any) => {
            item.customApi(newP).then((res: any) => {
              sMessage.success(item.message)
              flag.value = false
              if (item.isDataFlag) {
                emits && emits(item.name, res)
              } else {
                emits && emits(item.name, true)
              }
              getList()
            })
          }
          createFunction(item.name, fn)
        }
      }
    )
  }

  onMounted(() => {
    generateFunctions()
  })

  return {
    del,
    onSubmit,
    flag,
    open,
    title,
    funcs,
    getInfo,
    baseForm,
    close,
    otherData,
    enable
  }
}

使用

const emitsMt = (type: string, data: any) => {}

const { open, flag, close, title, baseForm, onSubmit, del, enable } = useCrud({
  getList,
  addApi: departmentInfo.addApi,
  editApi: departmentInfo.editApi,
  getInfoApi: departmentInfo.detailApi,
  deleteApi: departmentInfo.deleteApi,
  enableApi: departmentInfo.enableApi,
  emits: emitsMt,
})