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