From 100119f1813bd73b5bdbda638c827c8fabc4b320 Mon Sep 17 00:00:00 2001 From: Ryan Wang Date: Sat, 26 Sep 2020 22:30:20 +0800 Subject: [PATCH] refactor: photo manage. (#258) --- src/views/interface/MenuList.vue | 7 +- src/views/sheet/independent/LinkList.vue | 53 +-- src/views/sheet/independent/PhotoList.vue | 497 +++++++++++----------- 3 files changed, 292 insertions(+), 265 deletions(-) diff --git a/src/views/interface/MenuList.vue b/src/views/interface/MenuList.vue index 6f64b893..41173290 100644 --- a/src/views/interface/MenuList.vue +++ b/src/views/interface/MenuList.vue @@ -66,7 +66,7 @@ prop="team" > @@ -307,6 +307,11 @@ export default { isUpdateMode() { return !!this.form.model.id }, + computedTeams() { + return this.teams.data.filter((item) => { + return item !== '' + }) + }, }, created() { this.handleListMenus() diff --git a/src/views/sheet/independent/LinkList.vue b/src/views/sheet/independent/LinkList.vue index 8750f672..e3996993 100644 --- a/src/views/sheet/independent/LinkList.vue +++ b/src/views/sheet/independent/LinkList.vue @@ -51,7 +51,7 @@ prop="team" > @@ -273,28 +273,28 @@ const columns = [ title: '名称', dataIndex: 'name', ellipsis: true, - scopedSlots: { customRender: 'name' } + scopedSlots: { customRender: 'name' }, }, { title: '网址', dataIndex: 'url', ellipsis: true, - scopedSlots: { customRender: 'url' } + scopedSlots: { customRender: 'url' }, }, { title: '分组', ellipsis: true, - dataIndex: 'team' + dataIndex: 'team', }, { title: '排序', - dataIndex: 'priority' + dataIndex: 'priority', }, { title: '操作', key: 'action', - scopedSlots: { customRender: 'action' } - } + scopedSlots: { customRender: 'action' }, + }, ] export default { mixins: [mixin, mixinDevice], @@ -303,7 +303,7 @@ export default { table: { columns, data: [], - loading: false + loading: false, }, form: { model: {}, @@ -312,23 +312,23 @@ export default { rules: { name: [ { required: true, message: '* 友情链接名称不能为空', trigger: ['change'] }, - { max: 255, message: '* 友情链接名称的字符长度不能超过 255', trigger: ['change'] } + { max: 255, message: '* 友情链接名称的字符长度不能超过 255', trigger: ['change'] }, ], url: [ { required: true, message: '* 友情链接地址不能为空', trigger: ['change'] }, { max: 1023, message: '* 友情链接地址的字符长度不能超过 1023', trigger: ['change'] }, - { type: 'url', message: '* 友情链接地址格式有误', trigger: ['change'] } + { type: 'url', message: '* 友情链接地址格式有误', trigger: ['change'] }, ], logo: [{ max: 1023, message: '* 友情链接 Logo 的字符长度不能超过 1023', trigger: ['change'] }], description: [{ max: 255, message: '* 友情链接描述的字符长度不能超过 255', trigger: ['change'] }], - team: [{ max: 255, message: '* 友情链接分组的字符长度 255', trigger: ['change'] }] - } + team: [{ max: 255, message: '* 友情链接分组的字符长度 255', trigger: ['change'] }], + }, }, optionsModal: { visible: false, - data: [] + data: [], }, - teams: [] + teams: [], } }, computed: { @@ -340,7 +340,12 @@ export default { }, isUpdateMode() { return !!this.form.model.id - } + }, + computedTeams() { + return this.teams.filter((item) => { + return item !== '' + }) + }, }, created() { this.handleListLinks() @@ -353,7 +358,7 @@ export default { this.table.loading = true linkApi .listAll() - .then(response => { + .then((response) => { this.table.data = response.data.data }) .finally(() => { @@ -363,19 +368,19 @@ export default { }) }, handleListLinkTeams() { - linkApi.listTeams().then(response => { + linkApi.listTeams().then((response) => { this.teams = response.data.data }) }, handleListOptions() { - optionApi.listAll().then(response => { + optionApi.listAll().then((response) => { this.optionsModal.data = response.data.data }) }, handleDeleteLink(id) { linkApi .delete(id) - .then(response => { + .then((response) => { this.$message.success('删除成功！') }) .finally(() => { @@ -384,13 +389,13 @@ export default { }) }, handleParseUrl() { - linkApi.getByParse(this.form.model.url).then(response => { + linkApi.getByParse(this.form.model.url).then((response) => { this.form.model = response.data.data }) }, handleCreateOrUpdateLink() { const _this = this - _this.$refs.linkForm.validate(valid => { + _this.$refs.linkForm.validate((valid) => { if (valid) { _this.form.saving = true if (_this.isUpdateMode) { @@ -432,7 +437,7 @@ export default { handleSaveOptions() { optionApi .save(this.optionsModal.data) - .then(response => { + .then((response) => { this.$message.success('保存成功！') this.optionsModal.visible = false }) @@ -440,7 +445,7 @@ export default { this.handleListOptions() this.refreshOptionsCache() }) - } - } + }, + }, } diff --git a/src/views/sheet/independent/PhotoList.vue b/src/views/sheet/independent/PhotoList.vue index 634f2786..d93551d6 100644 --- a/src/views/sheet/independent/PhotoList.vue +++ b/src/views/sheet/independent/PhotoList.vue @@ -21,7 +21,7 @@ :sm="24" > - + {{ item }} @@ -51,7 +51,7 @@ type="primary" @click="handleQuery()" >查询 - 重置 + 重置 @@ -62,7 +62,7 @@ 添加 @@ -70,8 +70,8 @@
- - -
+ +
- - - - - - - - - - - 缩略图地址： - - - - - - - - - 图片名称： - - - - - - - {{ photo.takeTime | moment }} - 拍摄日期： - - - - - - {{ photo.location || '无' }} - 拍摄地点： - - - - - - {{ photo.team || '无' }} - 分组： - - - - - - {{ photo.description || '无' }} - 描述： - - - - - - + + + + + + + + + + + + + + + + + + + + +
- 编辑 - 保存 + @callback="handleCreateOrUpdateCallback" + :loading="form.saving" + :errored="form.saveErrored" + :text="`${form.model.id?'修改':'添加'}`" + :loadedText="`${form.model.id?'修改':'添加'}成功`" + :erroredText="`${form.model.id?'修改':'添加'}失败`" + > - 删除 +
+ +
@@ -320,33 +280,51 @@ import { mapActions } from 'vuex' import { mixin, mixinDevice } from '@/utils/mixin.js' import photoApi from '@/api/photo' import optionApi from '@/api/option' +import { datetimeFormat } from '@/utils/datetime' export default { mixins: [mixin, mixinDevice], data() { return { - drawerVisible: false, - listLoading: true, - thumDrawerVisible: false, + list: { + data: [], + loading: false, + pagination: { + page: 1, + size: 18, + sort: null, + total: 1, + }, + queryParam: { + page: 0, + size: 18, + sort: null, + keyword: null, + team: null, + }, + }, + + form: { + model: {}, + visible: false, + rules: { + url: [{ required: true, message: '* 图片地址不能为空', trigger: ['change'] }], + thumbnail: [{ required: true, message: '* 缩略图地址不能为空', trigger: ['change'] }], + name: [{ required: true, message: '* 图片名称不能为空', trigger: ['change'] }], + }, + saving: false, + saveErrored: false, + deleting: false, + deleteErrored: false, + }, + + attachmentSelectDrawer: { + visible: false, + }, + optionFormVisible: false, - photo: {}, - photos: [], teams: [], - editable: false, - pagination: { - page: 1, - size: 18, - sort: null, - total: 1 - }, - queryParam: { - page: 0, - size: 18, - sort: null, - keyword: null, - team: null - }, - options: [] + options: [], } }, created() { @@ -354,112 +332,145 @@ export default { this.hanldeListPhotoTeams() this.hanldeListOptions() }, + computed: { + takeTimeDefaultValue() { + if (this.form.model.takeTime) { + var date = new Date(this.form.model.takeTime) + return datetimeFormat(date, 'YYYY-MM-DD HH:mm:ss') + } + return datetimeFormat(new Date(), 'YYYY-MM-DD HH:mm:ss') + }, + computedTeams() { + return this.teams.filter((item) => { + return item !== '' + }) + }, + }, methods: { ...mapActions(['refreshOptionsCache']), hanldeListPhotos() { - this.listLoading = true - this.queryParam.page = this.pagination.page - 1 - this.queryParam.size = this.pagination.size - this.queryParam.sort = this.pagination.sort + this.list.loading = true + this.list.queryParam.page = this.list.pagination.page - 1 + this.list.queryParam.size = this.list.pagination.size + this.list.queryParam.sort = this.list.pagination.sort photoApi - .query(this.queryParam) - .then(response => { - this.photos = response.data.data.content - this.pagination.total = response.data.data.total + .query(this.list.queryParam) + .then((response) => { + this.list.data = response.data.data.content + this.list.pagination.total = response.data.data.total }) .finally(() => { setTimeout(() => { - this.listLoading = false + this.list.loading = false }, 200) }) }, + handleQuery() { + this.handlePaginationChange(1, this.list.pagination.size) + }, hanldeListOptions() { - optionApi.listAll().then(response => { + optionApi.listAll().then((response) => { this.options = response.data.data }) }, - handleQuery() { - this.handlePaginationChange(1, this.pagination.size) - }, hanldeListPhotoTeams() { - photoApi.listTeams().then(response => { + photoApi.listTeams().then((response) => { this.teams = response.data.data }) }, handleCreateOrUpdate() { - if (this.photo.id) { - photoApi - .update(this.photo.id, this.photo) - .then(response => { - this.$message.success('照片更新成功！') - }) - .finally(() => { - this.hanldeListPhotos() - this.hanldeListPhotoTeams() - }) - } else { - photoApi - .create(this.photo) - .then(response => { - this.photo = response.data.data - this.$message.success('照片添加成功！') - }) - .finally(() => { - this.hanldeListPhotos() - this.hanldeListPhotoTeams() - }) - } - this.editable = false + const _this = this + _this.$refs.photoForm.validate((valid) => { + if (valid) { + _this.form.saving = true + if (_this.form.model.id) { + photoApi + .update(_this.form.model.id, _this.form.model) + .catch(() => { + _this.form.saveErrored = true + }) + .finally(() => { + setTimeout(() => { + _this.form.saving = false + }, 400) + }) + } else { + photoApi + .create(_this.form.model) + .catch(() => { + _this.form.saveErrored = true + }) + .finally(() => { + setTimeout(() => { + _this.form.saving = false + }, 400) + }) + } + } + }) }, - showDrawer(photo) { - this.photo = photo - this.drawerVisible = true + handleCreateOrUpdateCallback() { + if (this.form.saveErrored) { + this.form.saveErrored = false + } else { + this.form.model = {} + this.form.visible = false + this.hanldeListPhotos() + this.hanldeListPhotoTeams() + } + }, + handleOpenEditForm(photo) { + this.form.model = photo + this.form.visible = true }, handlePaginationChange(page, size) { this.$log.debug(`Current: ${page}, PageSize: ${size}`) - this.pagination.page = page - this.pagination.size = size + this.list.pagination.page = page + this.list.pagination.size = size this.hanldeListPhotos() }, - handleAddClick() { - this.editable = true - this.drawerVisible = true - }, - handleDeletePhoto() { + handleDelete() { + this.form.deleting = true photoApi - .delete(this.photo.id) - .then(response => { - this.$message.success('删除成功！') - this.onDrawerClose() + .delete(this.form.model.id) + .catch(() => { + this.form.deleteErrored = true }) .finally(() => { - this.hanldeListPhotos() - this.hanldeListPhotoTeams() + setTimeout(() => { + this.form.deleting = false + }, 400) }) }, - showThumbDrawer() { - this.thumDrawerVisible = true + handleDeleteCallback() { + if (this.form.deleteErrored) { + this.form.deleteErrored = false + } else { + this.form.model = {} + this.form.visible = false + this.hanldeListPhotos() + this.hanldeListPhotoTeams() + } }, - selectPhotoThumb(data) { - this.photo.url = encodeURI(data.path) - this.photo.thumbnail = encodeURI(data.thumbPath) - this.thumDrawerVisible = false + handleAttachmentSelected(data) { + this.form.model.url = encodeURI(data.path) + this.form.model.thumbnail = encodeURI(data.thumbPath) + this.attachmentSelectDrawer.visible = false }, - resetParam() { - this.queryParam.keyword = null - this.queryParam.team = null - this.handlePaginationChange(1, this.pagination.size) + handleResetParam() { + this.list.queryParam.keyword = null + this.list.queryParam.team = null + this.handlePaginationChange(1, this.list.pagination.size) this.hanldeListPhotoTeams() }, onDrawerClose() { - this.drawerVisible = false - this.photo = {} - this.editable = false + this.form.visible = false + this.form.model = {} }, handleSaveOptions() { optionApi .save(this.options) - .then(response => { + .then((response) => { this.$message.success('保存成功！') this.optionFormVisible = false }) @@ -467,7 +478,13 @@ export default { this.hanldeListOptions() this.refreshOptionsCache() }) - } - } + }, + onTakeTimeChange(value, dateString) { + this.form.model.takeTime = value.valueOf() + }, + onTakeTimeSelect(value) { + this.form.model.takeTime = value.valueOf() + }, + }, }