vue 中後臺 列表的增刪改查同一解決方案
阿新 • • 發佈:2020-09-09
檢視 & 查詢
常⻅業務列表⻚都是由 搜尋欄 和 資料列表 組成。 其中:
- 搜尋欄包含 搜尋條件 、 新增 、 批量xx 、 匯出 等對 資料列表 全域性操作功能項。
- 資料列表包含 分⻚ 和每條資料末尾的 操作 項, ⽤於對當前這條資料進⾏ 修改 、 刪除 等操
作。
這⾥將 列表 、 刪除 、 匯出 功能放在⼀起實現, 是因為它們都屬於直接在 列表⻚ 中進⾏操作的功
能, 同時項⽬中已將 列表⻚ 中 常⽤的業務功能 封裝成⼀個 簡易 的 業務可復⽤類 。 其中可配置屬性如下:
data () {
/* eslint-disable */
return {
// 設定屬性
mixinViewModuleOptions: {
createdIsNeed: true, // 此頁面是否在建立時,呼叫查詢資料列表介面?
activatedIsNeed: false, // 此頁面是否在啟用(進入)時,呼叫查詢資料列表介面?
getDataListURL: '', // 資料列表介面,API地址
getDataListIsPage: false, // 資料列表介面,是否需要分頁?
deleteURL: '', // 刪除介面,API地址
deleteIsBatch: false, // 刪除介面,是否需要批量?
deleteIsBatchKey: 'id', // 刪除介面,批量狀態下由那個key進行標記操作?比如:pid,uid...
exportURL: '' // 匯出介面,API地址
},
// 預設屬性
dataForm: {}, // 查詢條件
dataList: [], // 資料列表
order: '', // 排序,asc/desc
orderField: '', // 排序,欄位
page: 1, // 當前頁碼
limit: 10, // 每頁數
total: 0, // 總條數
dataListLoading: false, // 資料列表,loading狀態
dataListSelections: [], // 資料列表,多選項
addOrUpdateVisible: false, // 新增/更新,彈窗visible狀態
lookVisible: false, // 檢視
}
/* eslint-enable */
}
- 在業務元件中 ***.vue 檔案, 修改 API請求 相關配置屬性, 新增 name 和 type 查詢條件。
data () {
return {
mixinViewModuleOptions: {
getDataListURL: '/demo/goods/page',
getDataListIsPage: true,
deleteURL: '/demo/goods',
deleteIsBatch: true,
exportURL: '/demo/goods/page'
},
dataForm: {
paramCode: '',
type: null
}
}
},
增加 & 修改
常⻅業務 新增 和 修改 功能⼏乎⼀樣, 唯⼀區別在於它們 ⾃增ID 是否存在, 所以業務將它們放在同
⼀彈窗中處理。
考慮到它們的功能會存在⼀些特定業務處理, 就沒有封裝 業務可復⽤類 。
- 新建開啟
***add-or-update.vue.vue
檔案, 寫入 Form 表單及其相關校驗方法等。 - 增加請求方法
methods: {
init () {
this.visible = true
this.$nextTick(() => {
this.$refs.dataForm.resetFields()
if (this.dataForm.id) {
this.getInfo()
}
})
},
// 獲取資訊
getInfo () {
this.$http
.get(`/demo/product/${this.dataForm.id}`)
.then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
}
this.dataForm = {
...this.dataForm,
...res.data
}
})
.catch(() => {})
},
// 表單提交
dataFormSubmitHandle: debounce(
function () {
this.$refs.dataForm.validate((valid) => {
if (!valid) {
return false
}
this.$http[!this.dataForm.id ? 'post' : 'put'](
'/demo/product/',
this.dataForm
)
.then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
}
this.$message({
message: this.$t('prompt.success'),
type: 'success',
duration: 500,
onClose: () => {
this.visible = false
this.$emit('refreshDataList')
}
})
})
.catch(() => {})
})
},
1000,
{ leading: true, trailing: false }
)
}