+
+
![]()
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
- 编辑
- 保存
+ @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()
+ },
+ },
}