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 }) }