356 lines
11 KiB
Vue
356 lines
11 KiB
Vue
<template>
|
||
<ai-detail class="AppAnnounceAdd">
|
||
<template slot="title">
|
||
<ai-title :title="id ? '编辑居民群发' : '添加居民群发'" isShowBack isShowBottomBorder @onBackClick="cancel(false)">
|
||
</ai-title>
|
||
</template>
|
||
<template slot="content">
|
||
<div class="AppAnnounceDetail-container">
|
||
<el-form ref="form" class="left" :model="form" label-width="110px" label-position="right">
|
||
<ai-card title="基本信息">
|
||
<template #content>
|
||
<div class="ai-form">
|
||
<el-form-item label="任务名称" prop="name" style="width: 100%;" :rules="[{ required: true, message: '请输入任务名称', trigger: 'blur' }]">
|
||
<el-input size="small" placeholder="请输入任务名称" v-model="form.name"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="发送范围" style="width: 100%;" prop="gender">
|
||
<el-radio-group v-model="form.gender">
|
||
<el-radio label="1">全部居民群</el-radio>
|
||
<el-radio label="2">按部门选择</el-radio>
|
||
<el-radio label="3">按网格选择</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
<el-form-item label="选择群主" prop="departmentName" style="width: 100%;" :rules="[{ required: true, message: '请选择部门', trigger: 'change' }]">
|
||
<el-input size="small" :autosize="{ minRows: 2, maxRows: 10}" placeholder="请选择..." disabled v-model="form.departmentName">
|
||
<ai-user-get slot="append" isStrictly :instance="instance" isChooseUnit>
|
||
<el-button type="info">选择</el-button>
|
||
</ai-user-get>
|
||
</el-input>
|
||
<div class="tips">
|
||
<p>消息预计送达居民群数：</p>
|
||
<span>215</span>
|
||
<i class="iconfont iconModal_Warning"></i>
|
||
</div>
|
||
</el-form-item>
|
||
<el-form-item label="消息提醒" prop="name" style="width: 100%;" :rules="[{ required: true, message: '请输入任务名称', trigger: 'blur' }]">
|
||
<el-switch
|
||
v-model="form.status"
|
||
active-text="开启后，创建的群发任务需要审批人进行审批">
|
||
</el-switch>
|
||
</el-form-item>
|
||
<el-form-item label="审批人员" prop="departmentName" style="width: 100%;" :rules="[{ required: true, message: '请选择部门', trigger: 'change' }]">
|
||
<el-input size="small" :autosize="{ minRows: 2, maxRows: 10}" placeholder="请选择..." disabled v-model="form.departmentName">
|
||
<ai-user-get slot="append" isStrictly :instance="instance" isChooseUnit>
|
||
<el-button type="info">选择</el-button>
|
||
</ai-user-get>
|
||
</el-input>
|
||
</el-form-item>
|
||
<el-form-item label="发送内容" prop="departmentName" style="width: 100%;" :rules="[{ required: true, message: '请选择部门', trigger: 'change' }]">
|
||
<el-input size="small" type="textarea" :rows="6" placeholder="请输入文本内容..." v-model="form.departmentName"></el-input>
|
||
<div class="add">
|
||
<el-popover
|
||
placement="top"
|
||
width="340"
|
||
offset="0"
|
||
trigger="hover">
|
||
<div class="add-item" slot="reference" style="width: max-content;">
|
||
<img src="https://cdn.cunwuyun.cn/dvcp/announce/add.png" />
|
||
<span style="color: #2266FF; font-size: 12px;">添加附件类型</span>
|
||
</div>
|
||
<div class="AppAnnounceDetail-content-wrapper">
|
||
<div class="content-item">
|
||
<img src="https://cdn.cunwuyun.cn/dvcp/announce/big-img.png" />
|
||
<p>图片</p>
|
||
</div>
|
||
<div class="content-item">
|
||
<img src="https://cdn.cunwuyun.cn/dvcp/announce/big-video.png" />
|
||
<p>视频</p>
|
||
</div>
|
||
<div class="content-item">
|
||
<img src="https://cdn.cunwuyun.cn/dvcp/announce/folder.png" />
|
||
<p>文件</p>
|
||
</div>
|
||
<div class="content-item">
|
||
<img src="https://cdn.cunwuyun.cn/dvcp/announce/site.png" />
|
||
<p>网页</p>
|
||
</div>
|
||
<div class="content-item">
|
||
<img src="https://cdn.cunwuyun.cn/dvcp/announce/miniapp.png" />
|
||
<p>小程序</p>
|
||
</div>
|
||
</div>
|
||
</el-popover>
|
||
</div>
|
||
<div class="tips">
|
||
<em>从本地上传，图片最大支持10MB，支持JPG,PNG格式；视频最大支持10MB，支持MP4格式；文件最大支持20MB</em>
|
||
</div>
|
||
</el-form-item>
|
||
</div>
|
||
</template>
|
||
</ai-card>
|
||
</el-form>
|
||
<div class="right"></div>
|
||
</div>
|
||
</template>
|
||
<template #footer>
|
||
<el-button @click="cancel">取消</el-button>
|
||
<el-button type="primary" @click="confirm">提交</el-button>
|
||
</template>
|
||
</ai-detail>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'Add',
|
||
|
||
props: {
|
||
instance: Function,
|
||
dict: Object,
|
||
params: Object
|
||
},
|
||
|
||
data () {
|
||
const validatorPhone = function (rule, value, callback) {
|
||
if (value === '') {
|
||
callback(new Error('请输入手机号'))
|
||
} else if (!/^1\d{10}$/.test(value)) {
|
||
callback(new Error('手机号格式错误'))
|
||
} else {
|
||
callback()
|
||
}
|
||
}
|
||
return {
|
||
info: {},
|
||
department: [],
|
||
validatorPhone: validatorPhone,
|
||
form: {
|
||
position: '',
|
||
name: '',
|
||
email: '',
|
||
telephone: '',
|
||
gender: '',
|
||
mobile: '',
|
||
departmentName: '',
|
||
departmentIds: [],
|
||
tagIds: [],
|
||
id: '',
|
||
status: false
|
||
},
|
||
id: '',
|
||
tagsList: []
|
||
}
|
||
},
|
||
|
||
created () {
|
||
this.getTags()
|
||
|
||
if (this.params && this.params.departmentId && !this.params.id) {
|
||
this.department = [{
|
||
id: String(this.params.departmentId),
|
||
name: this.params.departmentName
|
||
}]
|
||
this.form.departmentIds = [this.params.departmentId]
|
||
this.form.departmentName = this.params.departmentName
|
||
}
|
||
|
||
if (this.params && this.params.id) {
|
||
this.id = this.params.id
|
||
this.getInfo(this.params.id)
|
||
}
|
||
},
|
||
|
||
methods: {
|
||
getInfo (id) {
|
||
this.instance.post(`/app/wxcp/wxuser/queryDetailById?id=${id}`).then(res => {
|
||
if (res.code === 0) {
|
||
this.form = {
|
||
...res.data,
|
||
departmentName: res.data.departmentNames,
|
||
tagIds: res.data.tags.map(v => v.id),
|
||
departmentIds: res.data.departmentIdsStr.split(',')
|
||
}
|
||
}
|
||
})
|
||
},
|
||
|
||
onChange (e) {
|
||
if (e.length) {
|
||
this.form.departmentIds = e.map(v => v.id)
|
||
this.form.departmentName = e.map(v => v.name).join(',')
|
||
} else {
|
||
this.form.departmentIds = ''
|
||
this.form.departmentName = ''
|
||
}
|
||
},
|
||
|
||
getTags () {
|
||
this.instance.post(`/app/wxcp/wxtag/listAll`).then(res => {
|
||
if (res.code == 0) {
|
||
this.tagsList = res.data
|
||
}
|
||
})
|
||
},
|
||
|
||
onClose () {
|
||
this.form.explain = ''
|
||
},
|
||
|
||
confirm () {
|
||
this.$refs.form.validate((valid) => {
|
||
if (valid) {
|
||
const api = this.id ? '/app/wxcp/wxuser/update' : '/app/wxcp/wxuser/add'
|
||
this.instance.post(api, {
|
||
...this.form
|
||
}).then(res => {
|
||
if (res.code == 0) {
|
||
this.$message.success('提交成功')
|
||
setTimeout(() => {
|
||
this.cancel(true)
|
||
}, 600)
|
||
}
|
||
})
|
||
}
|
||
})
|
||
},
|
||
|
||
cancel (isRefresh) {
|
||
this.$emit('change', {
|
||
type: 'list',
|
||
isRefresh: !!isRefresh
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.AppAnnounceDetail-content-wrapper {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.content-item {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-direction: column;
|
||
width: 64px;
|
||
height: 64px;
|
||
line-height: 1;
|
||
margin-right: 4px;
|
||
text-align: center;
|
||
background: #F9F9F9;
|
||
border-radius: 2px;
|
||
cursor: pointer;
|
||
|
||
&:hover {
|
||
opacity: 0.6;
|
||
}
|
||
|
||
&:last-child {
|
||
margin-right: 0;
|
||
}
|
||
|
||
img {
|
||
width: 32px;
|
||
height: 32px;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
p {
|
||
color: #222;
|
||
font-size: 12px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.AppAnnounceAdd {
|
||
.ai-detail__content {
|
||
.ai-detail__content--wrapper {
|
||
position: relative;
|
||
max-width: 100%;
|
||
margin: 0;
|
||
height: 100%;
|
||
overflow: hidden;
|
||
}
|
||
}
|
||
|
||
.add {
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding: 14px 16px;
|
||
background: #F9F9F9;
|
||
border-radius: 0px 0px 2px 2px;
|
||
border: 1px solid #D0D4DC;
|
||
border-top: none;
|
||
|
||
.add-item {
|
||
display: flex;
|
||
align-items: center;
|
||
line-height: 1;
|
||
cursor: pointer;
|
||
|
||
&:hover {
|
||
opacity: 0.6;
|
||
}
|
||
|
||
img {
|
||
width: 20px;
|
||
height: 20px;
|
||
margin-right: 2px;
|
||
}
|
||
|
||
span {
|
||
color: #222;
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.AppAnnounceDetail-container {
|
||
display: flex;
|
||
position: relative;
|
||
height: 100%;
|
||
padding: 0 20px;
|
||
overflow-y: overlay;
|
||
|
||
.left {
|
||
flex: 1;
|
||
margin-right: 20px;
|
||
}
|
||
|
||
.right {
|
||
position: sticky;
|
||
top: 0;
|
||
width: 400px;
|
||
height: 688px;
|
||
background: url(https://cdn.cunwuyun.cn/dvcp/announce/phone.png);
|
||
background-size: 400px 100%;
|
||
}
|
||
}
|
||
|
||
.tips {
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 14px;
|
||
color: #222222;
|
||
|
||
span {
|
||
margin: 0 3px;
|
||
color: #2266FF;
|
||
}
|
||
|
||
i {
|
||
color: #c0c9db;
|
||
}
|
||
|
||
em {
|
||
line-height: 20px;
|
||
margin-top: 8px;
|
||
color: #888888;
|
||
font-size: 12px;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
}
|
||
</style>
|