|
@@ -2,22 +2,239 @@
|
|
|
<div class="elegant-container">
|
|
|
<div class="header">
|
|
|
<span class="title">校园德育风采</span>
|
|
|
- <Button type="success" size="small">+ 添加素材</Button>
|
|
|
+ <Button type="success" size="small" @click="onAddElegant">+ 添加素材</Button>
|
|
|
</div>
|
|
|
- <div class="content-box">
|
|
|
-
|
|
|
+ <div class="elegant-list">
|
|
|
+ <EmptyData :top="300" v-if="!elegantList.length"></EmptyData>
|
|
|
+ <Timeline v-else>
|
|
|
+ <TimelineItem v-for="(item,index) in elegantList" :key="index">
|
|
|
+ <p class="elegant-title">
|
|
|
+ <span>{{ item.title }}</span>
|
|
|
+ <span style="margin:0 10px;">
|
|
|
+ <Tag color="primary">{{ $tools.formatTime(item.createTime) }}</Tag>
|
|
|
+ </span>
|
|
|
+ <!-- <Icon type="md-create" color="#2d8cf0" @click="onEditElegant(item,index)"></Icon> -->
|
|
|
+ <Icon type="md-trash" color="#2d8cf0" @click="onDelElegant(item,index)"></Icon>
|
|
|
+ </p>
|
|
|
+ <p class="elegant-content">{{ item.content }}</p>
|
|
|
+ <div class="img-list">
|
|
|
+ <div class="img-item" v-for="(img,imgIndex) in item.attachments" :key="imgIndex" @click="onImgClick(item.attachments,imgIndex)">
|
|
|
+ <img :src="getFullPath(img.url)" alt="">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </TimelineItem>
|
|
|
+ </Timeline>
|
|
|
</div>
|
|
|
+ <Drawer :title="isEdit ? '编辑素材' : '添加素材'" :closable="false" v-model="editModal" width="520" :transfer="false">
|
|
|
+ <Form :model="curElegantItem" label-position="top" v-if="curElegantItem">
|
|
|
+ <FormItem :label="`活动名称`">
|
|
|
+ <Input v-model="curElegantItem.title" :placeholder="`请输入活动名称...`"></Input>
|
|
|
+ </FormItem>
|
|
|
+ <FormItem :label="`活动描述`">
|
|
|
+ <Input v-model="curElegantItem.content" :placeholder="`请输入活动描述内容...`"></Input>
|
|
|
+ </FormItem>
|
|
|
+ <FormItem :label="`活动素材`">
|
|
|
+ <Upload multiple type="drag" action="" :before-upload="onBeforeUpload" :show-upload-list="false" accept="image/jpeg,image/jpg,image/png," :format="['jpg','jpeg','png']" :on-format-error="handleFormatError">
|
|
|
+ <div style="padding: 40px 0">
|
|
|
+ <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
|
|
|
+ <p>拖拽或者点击上传活动图片素材</p>
|
|
|
+ </div>
|
|
|
+ </Upload>
|
|
|
+ <div class="img-list">
|
|
|
+ <div class="img-item" v-for="(imgFile,imgFileIndex) in imgFilePreviewList" :key="imgFileIndex">
|
|
|
+ <div class="mask">
|
|
|
+ <Icon type="md-trash" color="#fff" size="26" @click="onRemoveFile(imgFileIndex)"></Icon>
|
|
|
+ </div>
|
|
|
+ <img :src="getDataUrl(imgFile)" alt="">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <p style="margin-top:10px;color:red">上传须知:</p>
|
|
|
+ <p style="color:red">1. 活动素材需为后缀名为jpg/jpeg/png格式的图片文件,单张图片大小不得超出10M</p>
|
|
|
+ <p style="color:red">2. 活动素材图片数量最多为10张</p>
|
|
|
+ </FormItem>
|
|
|
+ <Button type="primary" @click="onConfirm" style="width: 100%;height: 40px;" :loading="btnLoading" class="modal-btn">保存</Button>
|
|
|
+ </Form>
|
|
|
+ </Drawer>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import BlobTool from '@/utils/blobTool.js'
|
|
|
export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ elegantList: [],
|
|
|
+ curElegantItem: null,
|
|
|
+ curElegantIndex: 0,
|
|
|
+ editModal: false,
|
|
|
+ isEdit: false,
|
|
|
+ btnLoading: false,
|
|
|
+ fileArr: [],
|
|
|
+ priviewSrc: '',
|
|
|
+ imgFilePreviewList: [],
|
|
|
+ containerClient: null,
|
|
|
+ schoolProfile: null
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.schoolProfile = JSON.parse(decodeURIComponent(localStorage.school_profile || '{}', "utf-8"))
|
|
|
+ this.$api.elegant.findElegants({
|
|
|
+ "admin": "1",//表示管理列表,其他则只获取有效的publish
|
|
|
+ "stime": null,//可选
|
|
|
+ "etime": null,//可选
|
|
|
+ }).then(res => {
|
|
|
+ this.elegantList = res.elegants.reverse()
|
|
|
+ })
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ onAddElegant() {
|
|
|
+ this.editModal = true
|
|
|
+ this.curElegantItem = {
|
|
|
+ title: '',
|
|
|
+ content: '',
|
|
|
+ createTime: 0,
|
|
|
+ attachments: []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onImgClick(imgList, index) {
|
|
|
+ this.$hevueImgPreview({
|
|
|
+ multiple: true,
|
|
|
+ keyboard: true,
|
|
|
+ nowImgIndex: index,
|
|
|
+ imgList: imgList.map(i => this.getFullPath(i.url))
|
|
|
+ })
|
|
|
+ },
|
|
|
+ onEditElegant(item, index) {
|
|
|
|
|
|
+ },
|
|
|
+ onDelElegant(item, index) {
|
|
|
+ this.$Modal.confirm({
|
|
|
+ title: this.$t('evaluation.newExercise.modalTip'),
|
|
|
+ content: `确认删除【${item.title}】活动?`,
|
|
|
+ onOk: () => {
|
|
|
+ this.$api.elegant.deleteElegants({ id: item.id }).then(res => {
|
|
|
+ if (!res.error) {
|
|
|
+ this.deleteBlobPrefix(item)
|
|
|
+ this.$Message.success('操作成功!')
|
|
|
+ this.elegantList.splice(index, 1)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ deleteBlobPrefix(item) {
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ this.$api.blob.deletePrefix({
|
|
|
+ "cntr": item.school,
|
|
|
+ "prefix": `elegant/` + item.id
|
|
|
+ }).then(
|
|
|
+ (res) => {
|
|
|
+ if (!res.error) {
|
|
|
+ resolve(200)
|
|
|
+ } else {
|
|
|
+ resolve(500)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ (err) => {
|
|
|
+ reject(err)
|
|
|
+ }
|
|
|
+ )
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleFormatError(file) {
|
|
|
+ this.$Notice.warning({
|
|
|
+ title: '上传素材文件格式错误',
|
|
|
+ desc: file.name + ' 文件格式错误,请上传后缀名为 jpg/jpeg/png 的图片素材'
|
|
|
+ });
|
|
|
+ },
|
|
|
+ onBeforeUpload(file) {
|
|
|
+ if (this.imgFilePreviewList.length >= 10) {
|
|
|
+ this.$Message.warning('最多允许上传10张图片素材!')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (file.size > 10 * 1024 * 1024) {
|
|
|
+ this.$Message.warning('单张图片大小不得超过10M')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.imgFilePreviewList.push(file)
|
|
|
+ },
|
|
|
+ onRemoveFile(fileIndex) {
|
|
|
+ this.imgFilePreviewList.splice(fileIndex, 1)
|
|
|
+ },
|
|
|
+ /* 保存上传 */
|
|
|
+ async onConfirm() {
|
|
|
+ let { title, content } = this.curElegantItem
|
|
|
+ if (!title || !content) {
|
|
|
+ this.$Message.warning('请填写完整!')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (!this.imgFilePreviewList.length) {
|
|
|
+ this.$Message.warning('图片素材不可为空!')
|
|
|
+ }
|
|
|
+ let n = await this.$tools.getSchoolSas()
|
|
|
+ let elegantId = this.$tools.guid()
|
|
|
+ let params = this._.cloneDeep(this.curElegantItem)
|
|
|
+ this.btnLoading = true
|
|
|
+ this.containerClient = new BlobTool(n.url, n.name, n.sas, 'school')
|
|
|
+ try {
|
|
|
+ let uploadResult = await this.uploadFiles(this.imgFilePreviewList, elegantId)
|
|
|
+ params.attachments = uploadResult
|
|
|
+ params.id = elegantId
|
|
|
+ params.publish = 1
|
|
|
+ params.type = 'school'
|
|
|
+ params.startTime = 111
|
|
|
+ params.endTime = 222
|
|
|
+ this.$api.elegant.upsertElegants(params).then(res => {
|
|
|
+ if (!res.error) {
|
|
|
+ this.btnLoading = false
|
|
|
+ this.$Message.success('操作成功!')
|
|
|
+ this.elegantList.unshift(res.elegant)
|
|
|
+ this.editModal = false
|
|
|
+ } else {
|
|
|
+ this.btnLoading = false
|
|
|
+ this.$Message.error(res.error)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } catch (e) {
|
|
|
+ this.$Message.error(e)
|
|
|
+ this.btnLoading = false
|
|
|
+ }
|
|
|
+ console.log(this.imgFilePreviewList)
|
|
|
+ },
|
|
|
+ uploadFiles(files, elegantId) {
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ let promiseArr = []
|
|
|
+ files.forEach(file => {
|
|
|
+ promiseArr.push(this.containerClient.upload(file, { path: `elegant/${elegantId}` }))
|
|
|
+ })
|
|
|
+ Promise.all(promiseArr).then(result => {
|
|
|
+ resolve(result)
|
|
|
+ }).catch(e => {
|
|
|
+ reject(e)
|
|
|
+ })
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ getDataUrl() {
|
|
|
+ return file => {
|
|
|
+ var windowURL = window.URL || window.webkitURL;
|
|
|
+ var dataURL = windowURL.createObjectURL(file)
|
|
|
+ return dataURL
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getFullPath() {
|
|
|
+ return url => {
|
|
|
+ return url + '?' + this.schoolProfile.blob_sas
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
-<style lang="less" scoped>
|
|
|
+<style lang="less">
|
|
|
.elegant-container {
|
|
|
+ height: 100%;
|
|
|
.header {
|
|
|
width: 100%;
|
|
|
display: flex;
|
|
@@ -31,5 +248,73 @@ export default {
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+ .elegant-list {
|
|
|
+ width: 100%;
|
|
|
+ height: 90%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding: 15px;
|
|
|
+ overflow: auto;
|
|
|
+
|
|
|
+ .ivu-timeline {
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ivu-timeline-item-head-blue {
|
|
|
+ background: #2d8cf0 !important;
|
|
|
+ color: #2d8cf0;
|
|
|
+ margin-top: 4px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .elegant-title {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .ivu-icon {
|
|
|
+ margin-right: 5px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .elegant-content {
|
|
|
+ margin: 10px 0;
|
|
|
+ color: #817f7f;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .img-list {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ .img-item {
|
|
|
+ position: relative;
|
|
|
+ margin: 10px 10px 0 0;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 140px;
|
|
|
+ height: 100px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ .mask {
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .mask {
|
|
|
+ position: absolute;
|
|
|
+ width: 140px;
|
|
|
+ height: 100px;
|
|
|
+ background: rgba(0, 0, 0, 0.6);
|
|
|
+ display: none;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|