frontent/src/api/op.js

import { fGet, fSave, fPut, fDelete, fSort } from '@/api/rest'

function hasArea(obj, key) {
  const k = key || 'area'
  return obj[k] instanceof Array
}

function Options(options, defaultOptions) {
  return Object.assign(defaultOptions || {}, options || {})
}

function fnList(options) {
  const opt = typeof options === 'string' ? { list: options } : Options(options, { list: 'main' })

  const listObj = this.self.list[opt.list]
  if (listObj === undefined) {
    return
  }

  // deal area query parameter
  if (hasArea(listObj)) {
    if (listObj.area.length > 0) {
      listObj.query.province_id = listObj.area[0]
    }
    if (listObj.area.length > 1) {
      listObj.query.city_id = listObj.area[1]
    }
    if (listObj.area.length > 2) {
      listObj.query.area_id = listObj.area[2]
    }
  }

  opt.before = opt.before || listObj.before
  opt.after = opt.after || listObj.after
  opt.error = opt.error || listObj.error

  listObj.loading = true
  const url = opt.url || listObj.url || this.self.URI
  const params = opt.before instanceof Function ? opt.before({ ...listObj.query }) : { ...listObj.query }
  fGet(url, params).then(res => {
    const { total, data } = res
    listObj.total = total
    listObj.list = data.map(v => {
      if (listObj.render instanceof Function) {
        return listObj.render(v)
      }
      return v
    })
    opt.after instanceof Function && opt.after(res)
  }).finally(() => {
    listObj.loading = false
  })
}

function fnFilter(options) {
  const opt = Options(options, { list: 'main' })
  this.self.list[opt.list].query ? this.self.list[opt.list].query.page = 1 : undefined
  this.list(opt)
}

function fnReset(options) {
  const opt = Options(options, { list: 'main' })

  const listObj = this.self.list[opt.list]
  listObj.query = listObj.query || {}
  listObj.query = Object.assign({ page: 1, limit: listObj.query.limit || 20 }, opt.data || {})

  // deal area query parameter
  if (hasArea(listObj)) {
    listObj.area = []
  }

  this.list(opt)
}

function fnCreate(options) {
  const opt = Options(options, { form: 'form', title: '新增' })

  opt.before instanceof Function && opt.before()
  const formObj = this.self.dlg[opt.form]

  // deal area parameter
  if (hasArea(formObj)) {
    formObj.area = []
  }

  formObj.title = opt.title || '新增'
  formObj.data = opt.data || {}
  formObj.visible = true
  this.self.$nextTick(() => {
    this.self.$refs[opt.form].clearValidate()
  })
}

function fnEdit(options) {
  const opt = Options(options, { form: 'form' })
  const formObj = this.self.dlg[opt.form]
  // deal area parameter
  if (hasArea(formObj)) {
    formObj.area = [opt.row.province_id, opt.row.city_id, opt.row.area_id]
  }
  formObj.title = opt.title === undefined || opt.row[opt.title] === undefined ? (opt.title || '编辑') : `编辑 - ${opt.row[opt.title]}`
  formObj.data = Object.assign({}, opt.row)
  formObj.data = Object.assign(formObj.data, opt.data || {})
  opt.before instanceof Function && opt.before(formObj.data)
  formObj.visible = true
  this.self.$nextTick(() => {
    this.self.$refs[opt.form].clearValidate()
  })
}

function fnDelete(options) {
  const opt = Options(options, { list: 'main', form: 'form' })
  const title = opt.title === undefined || opt.row[opt.title] === undefined ? (opt.title || '') : ` - ${opt.row[opt.title]}`
  const listObj = this.self.list[opt.list] || {}
  this.self.$confirm(`您是否确认要删除${title}`, '删除确认').then(() => {
    const url = opt.url || listObj.url || this.self.URI
    console.log(opt.url)
    fDelete(url, opt.row).then(res => {
      this.list(opt.reload)
      alert('删除成功')
    })
  }).catch(() => {
    alert('删除失败')
  })
}

function fnSave(options) {
  const opt = Options(options, { form: 'form', data: {}, reload: 'main' })
  const thiz = this
  const self = this.self
  const formObj = self.dlg[opt.form] || {}

  function innerSave(data) {
    if (typeof opt.before === 'function') {
      const beforeResult = opt.before(data)
      if (typeof beforeResult === 'boolean' && !beforeResult) {
        return
      }
    }
    formObj.saveLoading = true
    const url = opt.url || self.URI
    fSave(url, data).then(res => {
      self.$message.success('保存成功')
      typeof opt.reload === 'string' && thiz.list(opt.reload)
      typeof opt.success === 'function' && opt.success(res)
      formObj.visible = false
    }).catch(err => {
      typeof opt.error === 'function' && opt.error(err)
    }).finally(() => {
      formObj.saveLoading = false
    })
  }

  if (typeof opt.form === 'string' && opt.form.length > 0) {
    if (formObj.data === undefined) {
      const err = `form ${opt.form} data not exist.`
      self.$message.error(err)
      typeof opt.error === 'function' && opt.error(err)
      return
    }
    const formRef = self.$refs[opt.form]
    if (formRef === undefined || formRef.validate === undefined) {
      const err = `form ${opt.form} element not exist.`
      self.$message.error(err)
      typeof opt.error === 'function' && opt.error(err)
      return
    }
    formRef.validate((valid) => {
      if (valid) {
        const otherData = opt.data || {}
        const params = { ...formObj.data, ...otherData }
        // deal area parameter
        if (hasArea(formObj) && formObj.area.length > 2) {
          params.province_id = formObj.area[0]
          params.city_id = formObj.area[1]
          params.area_id = formObj.area[2]
        }
        innerSave(params)
      }
    })
  } else {
    const params = opt.data || {}
    innerSave(params)
  }
}

function fnUpdate(options) {
  const opt = Options(options, { row: {}, data: {}})
  const params = { ...opt.row, ...opt.data }
  const url = opt.url || this.self.URI
  fSave(url, params).then(res => {
    typeof opt.success === 'function' ? opt.success(res) : this.list(opt.reload)
  })
}

function fnMultiSelect(options) {
  const opt = options || {}
  const listObj = this.self.list[opt.list || 'main']
  if (listObj === undefined) {
    return
  }
  listObj.selectedRows = opt.rows || []
}

function fnSort(options) {
  const opt = Options(options, { form: 'form', title: '排序' })
  fSort(opt.url, opt.data).then(res => {
    this.list(opt.reload)
  }).catch(() => {})
}

// 批量操作
function fnBatchOp(options) {
  const opt = Options(options, { params: {}})
  const list = opt.list || 'main'
  const listObj = this.self.list[list]
  if (listObj === undefined) {
    return
  }
  const selectedRows = listObj.selectedRows || []
  const ids = selectedRows.map(v => {
    return v.id
  })
  if (ids.length === 0) {
    this.self.$message.error('请先选择要操作的记录')
    return
  }
  const op = opt.op || '操作'
  this.self.$confirm(`您是否确认对选择的${ids.length}个记录进行${op}`, '提示').then(() => {
    const url = opt.url || listObj.url || this.self.URI
    const params = { ...opt.params }
    if (typeof opt.ids !== 'boolean' || !opt.ids) {
      params.ids = ids
    }
    fPut(url, params).then(res => {
      if (typeof opt.success === 'function') {
        opt.success(res)
      } else {
        this.self.$message.success('操作成功')
        const reload = opt.reload || list
        this.list({ list: reload })
      }
    })
  })
}

function fnGetSelected(options) {
  const opt = Options(options, {})
  const list = opt.list || 'main'
  const listObj = this.self.list[list]
  if (listObj === undefined) {
    return []
  }
  const selectedRows = listObj.selectedRows || []
  if (typeof opt.render === 'function') {
    return selectedRows.map(v => {
      return opt.render(v)
    })
  }
  return selectedRows
}

function fnLoadAreaList(node, resolve) {
  const { level, value } = node
  fGet('/manager/areas', { pid: level === 0 ? 1 : value }).then(res => {
    const { data } = res
    const nodes = data.map(v => {
      return {
        value: v.id,
        label: v.name,
        leaf: level + 1 >= 3
      }
    })
    resolve(nodes)
  })
}

function fnGetUploadProps(options) {
  const self = this.self
  const params = Object.assign({
    uploadUrl: '',
    uploadParams: {},
    viewUrl: '',
    default: 'https://dummyimage.com/500x500/EE82EE/fff.png',
    style: 'width:150px;height:150px;',
    width: 500,
    height: 500,
    beforeUpload: (file) => { fnBeforeUpload(self, file) },
    cropperKey: 0,
    cropperVisible: false
  }, options || {})

  params.default = `https://dummyimage.com/${params.width}x${params.height}/EE82EE/fff.png`

  return params
}

async function fnBeforeUpload(self) {
  const { view_url, form } = await fGet('/api/file/upload-credentials?type=form&file=image')
  self.uploadProps.viewUrl = view_url
  self.uploadProps.uploadUrl = form.upload_url
  self.uploadProps.uploadParams = form.fields
  return true
}

async function fnUpload() {
  const { view_url, form } = await fGet('/api/file/upload-credentials?type=form&file=image')
  this.self.uploadProps.viewUrl = view_url
  this.self.uploadProps.uploadUrl = form.upload_url
  this.self.uploadProps.uploadParams = form.fields
  this.self.uploadProps.cropperVisible = true
}

function fnCloseUploader() {
  this.self.uploadProps.cropperVisible = false
}

export function M(self) {
  this.self = self
  this.list = fnList
  this.filter = fnFilter
  this.reset = fnReset
  this.create = fnCreate
  this.edit = fnEdit
  this.delete = fnDelete
  this.save = fnSave
  this.update = fnUpdate
  this.multiSelect = fnMultiSelect
  this.getSelected = fnGetSelected
  this.batchOp = fnBatchOp
  this.loadAreaList = fnLoadAreaList
  this.getUploadProps = fnGetUploadProps
  this.upload = fnUpload
  this.beforeUpload = fnBeforeUpload
  this.closeUploader = fnCloseUploader
  this.sort = fnSort
}

// --- 以下为工具类

// 加载远程下拉列表
export function fRemoteMethod(obj, key, render) {
  const params = obj.query || {}
  const renderRow = render || obj.render || ((v) => v)
  params[obj.key || 'key'] = key
  obj.loading = true
  fGet(obj.url, params).then(res => {
    const data = res.data || res
    const fields = obj.fields || []
    obj.options = data.map(v => {
      const node = {
        label: v[obj.labelField || 'label'] || v['name'],
        value: v[obj.valueField || 'value'] || v['id']
      }
      fields.forEach(field => {
        node[field] = v[field]
      })
      return renderRow(node)
    })
  }).finally(() => {
    obj.loading = false
  })
}