diff options
Diffstat (limited to 'UI source code/dns_mapping_ui-master/src/mixins/crud.js')
| -rw-r--r-- | UI source code/dns_mapping_ui-master/src/mixins/crud.js | 335 |
1 files changed, 335 insertions, 0 deletions
diff --git a/UI source code/dns_mapping_ui-master/src/mixins/crud.js b/UI source code/dns_mapping_ui-master/src/mixins/crud.js new file mode 100644 index 0000000..bb90342 --- /dev/null +++ b/UI source code/dns_mapping_ui-master/src/mixins/crud.js @@ -0,0 +1,335 @@ +import { + initData, + download +} from '@/api/data' +import { + parseTime, + downloadFile +} from '@/utils/index' + +export default { + data() { + return { + // 表格数据 + data: [], + // 排序规则，默认 id 降序， 支持多字段排序 ['id,desc', 'createTime,asc'] + sort: ['id,desc'], + // 页码 + page: 0, + // 每页数据条数 + size: 10, + // 总数据条数 + total: 0, + // 请求数据的url + url: '', + // 查询数据的参数 + params: {}, + // 待查询的对象 + query: {}, + // 等待时间 + time: 50, + // 是否为新增类型的表单 + isAdd: false, + // 导出的 Loading + downloadLoading: false, + // 表格 Loading 属性 + loading: true, + // 删除 Loading 属性 + delLoading: false, + delAllLoading: false, + // 弹窗属性 + dialog: false, + // Form 表单 + form: {}, + // 重置表单 + resetForm: {}, + // 标题 + title: '' + } + }, + methods: { + parseTime, + downloadFile, + async init() { + if (!await this.beforeInit()) { + return + } + return new Promise((resolve, reject) => { + this.loading = true + // 请求数据 + initData(this.url, this.getQueryParame()).then(data => { + this.total = data.totalElements + this.data = data.content + // time 毫秒后显示表格 + setTimeout(() => { + this.loading = false + }, this.time) + resolve(data) + }).catch(err => { + this.loading = false + reject(err) + }) + }) + }, + beforeInit() { + return true + }, + getQueryParame: function() { + return { + page: this.page, + size: this.size, + sort: this.sort, + ...this.query, + ...this.params + } + }, + // 改变页码 + pageChange(e) { + this.page = e - 1 + this.init() + }, + // 改变每页显示数 + sizeChange(e) { + this.page = 0 + this.size = e + this.init() + }, + // 预防删除第二页最后一条数据时，或者多选删除第二页的数据时，页码错误导致请求无数据 + dleChangePage(size) { + if (size === undefined) { + size = 1 + } + if (this.data.length === size && this.page !== 0) { + this.page = this.page - 1 + } + }, + // 查询方法 + toQuery() { + this.page = 0 + this.init() + }, + /** + * 通用的提示封装 + */ + submitSuccessNotify() { + this.$notify({ + title: '提交成功', + type: 'success', + duration: 2500 + }) + }, + addSuccessNotify() { + this.$notify({ + title: '新增成功', + type: 'success', + duration: 2500 + }) + }, + editSuccessNotify() { + this.$notify({ + title: '编辑成功', + type: 'success', + duration: 2500 + }) + }, + delSuccessNotify() { + this.$notify({ + title: '删除成功', + type: 'success', + duration: 2500 + }) + }, + notify(title, type) { + this.$notify({ + title: title, + type: type, + duration: 2500 + }) + }, + /** + * 删除前可以调用 beforeDelMethod 做一些操作 + */ + beforeDelMethod() { + return true + }, + /** + * 通用的删除 + */ + delMethod(id) { + if (!this.beforeDelMethod()) { + return + } + this.delLoading = true + this.crudMethod.del(id).then(() => { + this.delLoading = false + this.$refs[id].doClose() + this.dleChangePage() + this.delSuccessNotify() + this.afterDelMethod() + this.init() + }).catch(() => { + this.delLoading = false + this.$refs[id].doClose() + }) + }, + afterDelMethod() {}, + /** + * 多选删除提示 + */ + beforeDelAllMethod() { + this.$confirm('你确定删除选中的数据吗？', '提示', { + confirmButtonText: '确定', + cancelButtonText: '取消', + type: 'warning' + }).then(() => { + this.delAllMethod() + }) + }, + /** + * 多选删除 + */ + delAllMethod() { + this.delAllLoading = true + const data = this.$refs.table.selection + const ids = [] + for (let i = 0; i < data.length; i++) { + ids.push(data[i].id) + } + this.crudMethod.delAll(ids).then(() => { + this.delAllLoading = false + this.dleChangePage(ids.length) + this.init() + this.$notify({ + title: '删除成功', + type: 'success', + duration: 2500 + }) + }).catch(() => { + this.delAllLoading = false + }) + }, + /** + * 显示新增弹窗前可以调用该方法 + */ + beforeShowAddForm() {}, + /** + * 显示新增弹窗 + */ + showAddFormDialog() { + this.isAdd = true + this.resetForm = JSON.parse(JSON.stringify(this.form)) + this.beforeShowAddForm() + this.dialog = true + }, + /** + * 显示编辑弹窗前可以调用该方法 + */ + beforeShowEditForm(data) {}, + /** + * 显示编辑弹窗 + */ + showEditFormDialog(data = '') { + this.isAdd = false + if (data) { + this.resetForm = JSON.parse(JSON.stringify(this.form)) + this.form = JSON.parse(JSON.stringify(data)) + } + this.beforeShowEditForm(data) + this.dialog = true + }, + /** + * 新增方法 + */ + addMethod() { + this.crudMethod.add(this.form).then(() => { + this.addSuccessNotify() + this.loading = false + this.afterAddMethod() + this.cancel() + this.init() + }).catch(() => { + this.loading = false + this.afterAddErrorMethod() + }) + }, + /** + * 新增后可以调用该方法 + */ + afterAddMethod() {}, + /** + * 新增失败后调用该方法 + */ + afterAddErrorMethod() {}, + /** + * 通用的编辑方法 + */ + editMethod() { + this.crudMethod.edit(this.form).then(() => { + this.editSuccessNotify() + this.loading = false + this.afterEditMethod() + this.cancel() + this.init() + }).catch(() => { + this.loading = false + }) + }, + /** + * 编辑后可以调用该方法 + */ + afterEditMethod() {}, + /** + * 提交前可以调用该方法 + */ + beforeSubmitMethod() { + return true + }, + /** + * 提交 + */ + submitMethod() { + if (!this.beforeSubmitMethod()) { + return + } + if (this.$refs['form']) { + this.$refs['form'].validate((valid) => { + if (valid) { + this.loading = true + if (this.isAdd) { + this.addMethod() + } else this.editMethod() + } + }) + } + }, + /** + * 隐藏弹窗 + */ + cancel() { + this.dialog = false + if (this.$refs['form']) { + this.$refs['form'].clearValidate() + this.form = this.resetForm + } + }, + /** + * 获取弹窗的标题 + */ + getFormTitle() { + return this.isAdd ? `新增${this.title}` : `编辑${this.title}` + }, + /** + * 通用导出 + */ + downloadMethod() { + this.beforeInit() + this.downloadLoading = true + download(this.url + '/download', this.params).then(result => { + this.downloadFile(result, this.title + '数据', 'xlsx') + this.downloadLoading = false + }).catch(() => { + this.downloadLoading = false + }) + } + } +} |