parent
6d89b0a5e7
commit
7c5f5564d1
@ -0,0 +1,99 @@ |
||||
<template> |
||||
<div> |
||||
<div class="title">{{ this.type }}</div> |
||||
<div class="tags"> |
||||
|
||||
<el-tag |
||||
:key="tag" |
||||
v-for="(tag,index) in addForm.dynamicTags" |
||||
closable |
||||
:disable-transitions="false" |
||||
@close="handleClose(index)"> |
||||
{{ tag }} |
||||
</el-tag> |
||||
|
||||
<!-- TODO:要换成自动补全输入框--> |
||||
<el-input |
||||
v-if="addForm.inputVisible" |
||||
v-model="addForm.inputValue" |
||||
ref="saveTagInput" |
||||
size="small" |
||||
@keyup.enter.native="handleInputConfirm" |
||||
@blur="handleInputConfirm" |
||||
/> |
||||
<el-button v-else size="small" @click="showInput">增加{{ this.type }}</el-button> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
name: 'add_tag', |
||||
props: { |
||||
type: String |
||||
}, |
||||
data() { |
||||
return { |
||||
addForm: { |
||||
inputVisible: false, |
||||
inputValue: '', |
||||
dynamicTags: [], |
||||
fileList: [] |
||||
} |
||||
} |
||||
}, |
||||
methods: { |
||||
showInput() { |
||||
this.addForm.inputVisible = true |
||||
this.$nextTick(_ => { |
||||
this.$refs.saveTagInput.$refs.input.focus() |
||||
}) |
||||
}, |
||||
handleInputConfirm() { |
||||
let inputValue = this.addForm.inputValue |
||||
if (inputValue === '') { |
||||
this.modal.msgWarning('不能为空') |
||||
} |
||||
if (this.addForm.dynamicTags.includes(inputValue)) { |
||||
this.modal.msgWarning('请勿重复添加') |
||||
} else { |
||||
this.addForm.dynamicTags.push(inputValue) |
||||
this.addForm.inputVisible = false |
||||
this.addForm.inputValue = '' |
||||
} |
||||
|
||||
}, |
||||
handleClose(index) { |
||||
this.addForm.dynamicTags.splice(index, 1) |
||||
} |
||||
}, |
||||
watch: { |
||||
'addForm.dynamicTags': function(value) { |
||||
this.$emit('change:tags', value) |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped lang="scss"> |
||||
.tags { |
||||
display: flex; |
||||
align-items: center; |
||||
|
||||
& > :nth-child(n+2) { |
||||
margin-left: 10px; |
||||
} |
||||
|
||||
} |
||||
|
||||
.title { |
||||
color: rgba(16, 16, 16, 1); |
||||
font-size: 14px; |
||||
text-align: left; |
||||
font-family: SourceHanSansSC-regular; |
||||
} |
||||
|
||||
button { |
||||
margin-left: 10px; |
||||
} |
||||
</style> |
@ -0,0 +1,120 @@ |
||||
<template> |
||||
<div class="app-container"> |
||||
<el-form :model="queryParams" inline> |
||||
<el-form-item> |
||||
<el-input placeholder="请输入通知标题"></el-input> |
||||
</el-form-item> |
||||
<el-form-item> |
||||
<el-input placeholder="请输入序号"></el-input> |
||||
</el-form-item> |
||||
<el-form-item> |
||||
<el-select v-model="queryParams.status" placeholder="全部" clearable style="width: 240px"> |
||||
<el-option v-for="dict in dict.type.notification_status" :key="dict.value" :label="dict.label" |
||||
:value="dict.value"/> |
||||
</el-select> |
||||
</el-form-item> |
||||
<el-form-item> |
||||
<el-button type="primary">查询</el-button> |
||||
<el-button>重置</el-button> |
||||
|
||||
</el-form-item> |
||||
</el-form> |
||||
<el-button type="primary" @click="open=true">新增</el-button> |
||||
<el-button>批量删除</el-button> |
||||
<el-table border :data="dataList" class="table"> |
||||
<el-table-column type="index" label="序号" align="center"></el-table-column> |
||||
<el-table-column label="标题" align="center">通知标题</el-table-column> |
||||
<el-table-column label="封面" align="center"><img src="http://www.dummyimage.com/50x50"/></el-table-column> |
||||
<el-table-column label="发送对象" align="center">所有人</el-table-column> |
||||
<el-table-column label="发送数量" align="center">10000</el-table-column> |
||||
<el-table-column label="已读数量" align="center">10</el-table-column> |
||||
<el-table-column label="发送时间" align="center">2022-12-31 12:31</el-table-column> |
||||
<el-table-column label="状态" align="center">已发送</el-table-column> |
||||
<el-table-column label="操作" align="center"> |
||||
<el-button type="text">编辑</el-button> |
||||
<el-button type="text">删除</el-button> |
||||
</el-table-column> |
||||
|
||||
|
||||
</el-table> |
||||
<el-dialog :visible.sync="open"> |
||||
<el-form :model="addForm" inline label-width="100px" label-position="left"> |
||||
<el-form-item label="标题"> |
||||
<el-input placeholder="请输入"/> |
||||
</el-form-item> |
||||
<br/> |
||||
<el-form-item label="封面"> |
||||
<el-upload :on-remove="onChange" :file-list="addForm.fileList" :on-change="onChange" |
||||
list-type="picture" action="#" :auto-upload="false" :limit="1"> |
||||
<i class="el-icon-plus" v-if="addForm.fileList.length === 0"></i> |
||||
</el-upload> |
||||
</el-form-item> |
||||
<br/> |
||||
<el-form-item label="发送对象"> |
||||
|
||||
</el-form-item> |
||||
<br/> |
||||
<el-form-item class="send"> |
||||
<add-tag @change:tags="changeTags" type="普通用户"/> |
||||
<add-tag @change:tags="changeTags" type="厂商"/> |
||||
<add-tag @change:tags="changeTags" type="经销商"/> |
||||
</el-form-item> |
||||
<br/> |
||||
<el-form-item label="内容"> |
||||
富文本编辑器 |
||||
</el-form-item> |
||||
</el-form> |
||||
<div class="text-center"> |
||||
<el-button type="primary" @click="save">保存</el-button> |
||||
<el-button>重置</el-button> |
||||
</div> |
||||
</el-dialog> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import AddTag from './add_tag' |
||||
|
||||
export default { |
||||
name: 'index', |
||||
dicts: ['notification_status'], |
||||
components: { AddTag }, |
||||
data() { |
||||
return { |
||||
open: false, |
||||
addForm: { |
||||
fileList: [] |
||||
}, |
||||
dataList: [{}], |
||||
queryParams: {} |
||||
} |
||||
}, |
||||
methods: { |
||||
save() { |
||||
this.$modal.msgSuccess('保存成功') |
||||
this.open = false |
||||
}, |
||||
changeTags(tags) { |
||||
|
||||
}, |
||||
onChange(file, fileList) { |
||||
this.addForm.fileList = fileList |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped lang="scss"> |
||||
.send { |
||||
width: 600px; |
||||
overflow-x: auto; |
||||
margin-left: 100px; |
||||
border-radius: 3px; |
||||
border: 1px solid rgba(190, 190, 190, 1); |
||||
padding: 10px; |
||||
} |
||||
|
||||
.table { |
||||
margin-top: 10px; |
||||
} |
||||
</style> |
Loading…
Reference in new issue