fix:项目初始化
This commit is contained in:
ouyangxiu
@@ -0,0 +1,209 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
:title="title"
|
||||
:visible.sync="Visible"
|
||||
width="900px"
|
||||
center
|
||||
class="ac-dialog"
|
||||
:close-on-click-modal="false"
|
||||
@close="close"
|
||||
top="2%">
|
||||
<el-form
|
||||
:inline="true"
|
||||
:rules="rules"
|
||||
:model="form"
|
||||
ref="ruleForm"
|
||||
class="demo-form-inline"
|
||||
label-width="80px"
|
||||
label-position="right">
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="公告标题">
|
||||
<el-input placeholder="请输入公告标题" v-model="form.title" style="width: 180px" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="是否开启">
|
||||
<el-switch v-model="form.status" active-color="#13ce66" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
||||
<el-form-item label="跳转地址">
|
||||
<el-input placeholder="请输入跳转地址" v-model="form.jumpUrl" style="width: 350px" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :lg="12" :md="12" :sm="12" :xl="12" :xs="24">
|
||||
<el-form-item label="封面">
|
||||
<UploadImg @changeImgUrl="changeCoverUrl" :img="form.cover"></UploadImg>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :lg="12" :md="12" :sm="12" :xl="12" :xs="24">
|
||||
<el-form-item label="系统类型">
|
||||
<el-select placeholder="请选择系统类型" clearable v-model="form.sysType" style="width: 180px">
|
||||
<el-option label="app" value="app" />
|
||||
<el-option label="h5app" value="h5app" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :lg="12" :md="12" :sm="12" :xl="12" :xs="24">
|
||||
<el-form-item label="开始时间">
|
||||
<el-date-picker
|
||||
v-model="form.start"
|
||||
type="datetime"
|
||||
placeholder="开始时间"
|
||||
style="width: 180px"
|
||||
value-format="yyyy-MM-ddTHH:mm:ss+08:00"> </el-date-picker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :lg="12" :md="12" :sm="12" :xl="12" :xs="24">
|
||||
<el-form-item label="结束时间">
|
||||
<el-date-picker
|
||||
v-model="form.end"
|
||||
type="datetime"
|
||||
placeholder="结束时间"
|
||||
style="width: 180px"
|
||||
value-format="yyyy-MM-ddTHH:mm:ss+08:00"> </el-date-picker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
||||
<el-form-item label="内容" prop="content">
|
||||
<el-input placeholder="请输入内容" :rows="10" style="width: 500px" v-model="form.content" type="textarea" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-col :xs="24">
|
||||
<el-form-item label="富文本" class="post-details">
|
||||
<el-col :lg="24" :md="24" :sm="24" :xl="24" :xs="24">
|
||||
<el-form-item class="text-post">
|
||||
<QuillEditor :textNode="form.textNode" ref="QuillEditor" height="1000"></QuillEditor>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-form>
|
||||
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="Visible = false"> 取 消 </el-button>
|
||||
<el-button type="primary" @click="submit('ruleForm')"> 确 定 </el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import moment from 'moment'
|
||||
import { announcementAdd, announcementUpdate } from '@/api/activity/announcement'
|
||||
import UploadImg from '@/components/UploadImg/index'
|
||||
import QuillEditor from '@/components/QuillEditor/index'
|
||||
export default {
|
||||
name: 'AddOrEdit',
|
||||
props: ['data'],
|
||||
components: {
|
||||
UploadImg,
|
||||
QuillEditor
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
Visible: true,
|
||||
title: '',
|
||||
// 表单数据
|
||||
form: {
|
||||
content: undefined, // "string",内容
|
||||
cover: undefined, // "string",封面
|
||||
end: undefined, // "string",结束时间
|
||||
jumpUrl: undefined, // "string",跳转地址
|
||||
start: undefined, // "string",开始时间
|
||||
status: false, // true,是否开启
|
||||
title: undefined, // "string",标题
|
||||
textNode: undefined,
|
||||
sysType: 'app'
|
||||
},
|
||||
rules: {
|
||||
content: [{ required: true, message: '必填', trigger: 'blur' }]
|
||||
// rank: [{ required: true, message: '必填', trigger: 'blur' }],
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.title = this.data.title
|
||||
if (this.title === '编辑') {
|
||||
this.form = { ...this.data.data }
|
||||
this.form.start =
|
||||
moment(this.data.data.start)
|
||||
.utcOffset(480)
|
||||
.format('YYYY-MM-DDTHH:mm:ss') + '+08:00'
|
||||
this.form.end =
|
||||
moment(this.data.data.end)
|
||||
.utcOffset(480)
|
||||
.format('YYYY-MM-DDTHH:mm:ss') + '+08:00'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// TODO:新增公告列表数据
|
||||
add(data) {
|
||||
announcementAdd(data).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.$message.success('新增成功')
|
||||
this.close()
|
||||
} else {
|
||||
this.$message.error('新增失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
// TODO:编辑公告列表数据
|
||||
update(data) {
|
||||
announcementUpdate(data).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.$message.success('更新成功')
|
||||
this.close()
|
||||
} else {
|
||||
this.$message.error('更新失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
// 更换封面
|
||||
changeCoverUrl(data) {
|
||||
this.form.cover = data
|
||||
},
|
||||
// 提交按钮
|
||||
submit(formName) {
|
||||
const data = JSON.parse(JSON.stringify(this.form))
|
||||
data.textNode = this.$refs['QuillEditor'].getdata()
|
||||
this.$refs[formName].validate(valid => {
|
||||
if (valid) {
|
||||
// const data = { ...this.form }
|
||||
if (this.title === '新增') {
|
||||
this.add(data)
|
||||
} else if (this.title === '编辑') {
|
||||
this.update(data)
|
||||
}
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 关闭编辑
|
||||
close() {
|
||||
this.$emit('close')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.quill-editor {
|
||||
height: 490px;
|
||||
|
||||
.ql-container {
|
||||
height: 380px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user