parent
9c448af60b
commit
06fbe7d4c7
5 changed files with 245 additions and 2 deletions
@ -0,0 +1,220 @@ |
|||||||
|
<template> |
||||||
|
<div class="wrap"> |
||||||
|
<el-card shadow="hover" class="mgb20"> |
||||||
|
<div class="flex-between"> |
||||||
|
<div class="per_title" v-preventReClick @click="$router.back()"> |
||||||
|
<i class="el-icon-arrow-left"></i> |
||||||
|
<span class="per_back">返回</span> |
||||||
|
<span class="per_school" v-text="id ? '编辑更新日志' : '新增更新日志'"></span> |
||||||
|
</div> |
||||||
|
<div v-if="!isDetail"> |
||||||
|
<el-button type="primary" round v-preventReClick @click="submit(1)">发布</el-button> |
||||||
|
<el-button v-if="!postStatus" type="primary" round v-preventReClick @click="submit(0)">草稿</el-button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</el-card> |
||||||
|
|
||||||
|
<el-card shadow="hover"> |
||||||
|
<el-form ref="form" label-width="120px" :disabled="isDetail"> |
||||||
|
<el-form-item label="版本标题"> |
||||||
|
<el-input placeholder="请输入版本标题" v-model="form.modelName" maxlength="30" style="width: 400px"></el-input> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="封面图片"> |
||||||
|
<el-upload |
||||||
|
class="avatar-uploader" |
||||||
|
accept=".jpg,.png,.jpeg" |
||||||
|
:on-remove="handleRemove" |
||||||
|
:on-error="uploadError" |
||||||
|
:on-success="uploadSuccess" |
||||||
|
:before-remove="beforeRemove" |
||||||
|
:limit="1" |
||||||
|
:on-exceed="handleExceed" |
||||||
|
:action="this.api.fileupload" |
||||||
|
:headers="headers" |
||||||
|
name="file" |
||||||
|
> |
||||||
|
<img v-if="coverUrl" :src="coverUrl" class="avatar"> |
||||||
|
<div class="uploader-default" v-else> |
||||||
|
<i class="el-icon-plus"></i> |
||||||
|
<p>上传封面</p> |
||||||
|
</div> |
||||||
|
</el-upload> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="更新内容"> |
||||||
|
<ul class="contents"> |
||||||
|
<li v-for="(item, i) in form.content" :key="i"> |
||||||
|
<div class="action"> |
||||||
|
<el-select v-model="value" size="small" placeholder="请选择版本"> |
||||||
|
<el-option |
||||||
|
v-for="item in vers" |
||||||
|
:key="item.value" |
||||||
|
:label="item.label" |
||||||
|
:value="item.value"> |
||||||
|
</el-option> |
||||||
|
</el-select> |
||||||
|
<div class="btns"> |
||||||
|
<i v-if="i === form.content.length - 1" class="el-icon-circle-plus-outline" @click="add"></i> |
||||||
|
<i class="el-icon-delete" @click="del"></i> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<el-input |
||||||
|
type="textarea" |
||||||
|
:rows="5" |
||||||
|
placeholder="请输入" |
||||||
|
v-model="textarea"> |
||||||
|
</el-input> |
||||||
|
</li> |
||||||
|
</ul> |
||||||
|
</el-form-item> |
||||||
|
</el-form> |
||||||
|
</el-card> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
categoryId : this.$route.query.categoryId, |
||||||
|
form: { |
||||||
|
modelName: '', |
||||||
|
modelDemo: '', |
||||||
|
content: [{}] |
||||||
|
} |
||||||
|
}; |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
this.id && this.getData() |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
// 获取详情 |
||||||
|
getData() { |
||||||
|
this.$post(`${this.api.modelFindById}?id=${this.id}`).then(res => { |
||||||
|
const { data } = res |
||||||
|
this.form.modelName = data.modelName |
||||||
|
this.form.modelDemo = data.modelDemo |
||||||
|
this.codeKey++ |
||||||
|
}).catch(res => {}) |
||||||
|
}, |
||||||
|
// 新增内容 |
||||||
|
add() { |
||||||
|
this.form.content.push({}) |
||||||
|
}, |
||||||
|
// 删除内容 |
||||||
|
del() { |
||||||
|
|
||||||
|
}, |
||||||
|
// 保存 |
||||||
|
submit(postStatus){ |
||||||
|
const { modelName, modelDemo } = this.form |
||||||
|
const id = this.id |
||||||
|
if (!modelName) return this.$message.error('请输入模型名称') |
||||||
|
if (!modelDemo) return this.$message.error('请输入模型代码') |
||||||
|
const data = { |
||||||
|
categoryId: this.categoryId, |
||||||
|
modelName, |
||||||
|
modelDemo, |
||||||
|
postStatus |
||||||
|
} |
||||||
|
if (id) { |
||||||
|
data.id = id |
||||||
|
this.$post(this.api.updateSysModelDemo, data).then(res => { |
||||||
|
this.$message.success('编辑成功') |
||||||
|
this.$router.back() |
||||||
|
}).catch(res => {}) |
||||||
|
} else { |
||||||
|
this.$post(this.api.saveSysModelDemo, data).then(res => { |
||||||
|
this.$message.success('新增成功') |
||||||
|
this.$router.back() |
||||||
|
}).catch(res => {}) |
||||||
|
} |
||||||
|
}, |
||||||
|
} |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
$avatar-width: 104px; |
||||||
|
/deep/ .avatar-uploader { |
||||||
|
.el-upload { |
||||||
|
position: relative; |
||||||
|
width: $avatar-width; |
||||||
|
height: auto; |
||||||
|
border: 1px dashed #d9d9d9; |
||||||
|
border-radius: 2px; |
||||||
|
cursor: pointer; |
||||||
|
overflow: hidden; |
||||||
|
|
||||||
|
&:hover { |
||||||
|
border-color: #409EFF; |
||||||
|
} |
||||||
|
|
||||||
|
.uploader-default { |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
justify-content: center; |
||||||
|
width: $avatar-width !important; |
||||||
|
height: $avatar-width; |
||||||
|
text-align: center; |
||||||
|
background: rgba(0, 0, 0, 0.04); |
||||||
|
|
||||||
|
i { |
||||||
|
font-size: 20px; |
||||||
|
font-weight: bold; |
||||||
|
color: #8c939d; |
||||||
|
} |
||||||
|
|
||||||
|
p { |
||||||
|
margin-top: 10px; |
||||||
|
font-size: 14px; |
||||||
|
color: rgba(0, 0, 0, 0.65); |
||||||
|
line-height: 1; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.avatar { |
||||||
|
width: $avatar-width; |
||||||
|
height: $avatar-width; |
||||||
|
display: block; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.el-upload__tip { |
||||||
|
margin-top: 0; |
||||||
|
|
||||||
|
p { |
||||||
|
font-size: 14px; |
||||||
|
color: rgba(0, 0, 0, 0.45); |
||||||
|
line-height: 1; |
||||||
|
|
||||||
|
&:first-child { |
||||||
|
margin-bottom: 5px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.contents { |
||||||
|
width: 700px; |
||||||
|
li { |
||||||
|
padding: 15px; |
||||||
|
margin-bottom: 20px; |
||||||
|
border: 1px dashed #e9e9e9; |
||||||
|
border-radius: 8px; |
||||||
|
} |
||||||
|
.action { |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
margin-bottom: 15px; |
||||||
|
} |
||||||
|
.btns { |
||||||
|
i { |
||||||
|
margin-left: 10px; |
||||||
|
color: #9076FF; |
||||||
|
cursor: pointer; |
||||||
|
&:hover { |
||||||
|
opacity: .9; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
Loading…
Reference in new issue