宣发
This commit is contained in:
yanran200730
@@ -11,13 +11,13 @@
|
||||
<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-input size="small" placeholder="请输入任务名称" v-model="form.taskTitle" :maxlength="15" show-word-limit></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-form-item label="发送范围" style="width: 100%;" prop="sendScope">
|
||||
<el-radio-group v-model="form.sendScope">
|
||||
<el-radio label="0">全部居民群</el-radio>
|
||||
<el-radio label="1">按部门选择</el-radio>
|
||||
<el-radio label="2">按网格选择</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="选择群主" prop="departmentName" style="width: 100%;" :rules="[{ required: true, message: '请选择部门', trigger: 'change' }]">
|
||||
@@ -29,25 +29,25 @@
|
||||
<div class="tips">
|
||||
<p>消息预计送达居民群数：</p>
|
||||
<span>215</span>
|
||||
<i class="iconfont iconModal_Warning"></i>
|
||||
<el-tooltip
|
||||
placement="top"
|
||||
content="任务开始后，3天内15分钟更新1次，3天后访问页面时触发更新，1时间最多刷新1次">
|
||||
<i class="iconfont iconModal_Warning"></i>
|
||||
</el-tooltip>
|
||||
</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">
|
||||
<div class="fileList" v-if="fileList.length">
|
||||
<div class="add-item" v-for="(item, index) in fileList" :key="index">
|
||||
<div class="left">
|
||||
<img :src="mapIcon(item.media.type)" />
|
||||
<span>{{ item.name }}</span>
|
||||
</div>
|
||||
<i @click="removeFile(index)">删除</i>
|
||||
</div>
|
||||
</div>
|
||||
<el-popover
|
||||
placement="top"
|
||||
width="340"
|
||||
@@ -58,14 +58,36 @@
|
||||
<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>
|
||||
<el-upload
|
||||
ref="upload"
|
||||
multiple
|
||||
:file-list="fileList"
|
||||
:show-file-list="false"
|
||||
:before-upload="v => handleChange(v, 10, '.jpg,.png,.jpeg')"
|
||||
:limit="9"
|
||||
action="/app/wxcp/upload/uploadFile"
|
||||
accept=".jpg,.png,.jpeg"
|
||||
:http-request="v => submitUpload(v, 'image')">
|
||||
<div class="content-item" trigger>
|
||||
<img src="https://cdn.cunwuyun.cn/dvcp/announce/big-img.png" />
|
||||
<p>图片</p>
|
||||
</div>
|
||||
</el-upload>
|
||||
<el-upload
|
||||
ref="upload"
|
||||
multiple
|
||||
:file-list="fileList"
|
||||
:show-file-list="false"
|
||||
:before-upload="v => handleChange(v, 10, '.mp4')"
|
||||
:limit="9"
|
||||
action="/app/wxcp/upload/uploadFile"
|
||||
accept=".mp4"
|
||||
:http-request="v => submitUpload(v, 'video')">
|
||||
<div class="content-item" trigger>
|
||||
<img src="https://cdn.cunwuyun.cn/dvcp/announce/big-video.png" />
|
||||
<p>视频</p>
|
||||
</div>
|
||||
</el-upload>
|
||||
<div class="content-item">
|
||||
<img src="https://cdn.cunwuyun.cn/dvcp/announce/folder.png" />
|
||||
<p>文件</p>
|
||||
@@ -85,16 +107,38 @@
|
||||
<em>从本地上传，图片最大支持10MB，支持JPG,PNG格式；视频最大支持10MB，支持MP4格式；文件最大支持20MB</em>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="宣发审批" prop="enableExamine" style="width: 100%;" :rules="[{ required: true, message: '请输入任务名称', trigger: 'blur' }]">
|
||||
<el-switch
|
||||
v-model="form.enableExamine"
|
||||
active-value="1"
|
||||
inactive-value="0"
|
||||
active-text="开启后，创建的群发任务需要审批人进行审批">
|
||||
</el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="form.enableExamine === '1'" 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>
|
||||
</div>
|
||||
</template>
|
||||
</ai-card>
|
||||
</el-form>
|
||||
<div class="right"></div>
|
||||
<div class="right">
|
||||
<img class="phone" src="https://cdn.cunwuyun.cn/dvcp/announce/phone.png" />
|
||||
<img class="phone-wrapper" src="https://cdn.cunwuyun.cn/dvcp/announce/phone-wrapper.png" />
|
||||
<div class="right-content">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #footer>
|
||||
<el-button @click="cancel">取消</el-button>
|
||||
<el-button type="primary" @click="confirm">提交</el-button>
|
||||
<el-button type="primary" @click="confirm" style="width: 120px;">通知成员发送</el-button>
|
||||
<el-button type="primary" @click="confirm">定时发送</el-button>
|
||||
</template>
|
||||
</ai-detail>
|
||||
</template>
|
||||
@@ -110,31 +154,20 @@
|
||||
},
|
||||
|
||||
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,
|
||||
fileList: [],
|
||||
form: {
|
||||
position: '',
|
||||
choiceTime: '',
|
||||
contents: {},
|
||||
enableExamine: '0',
|
||||
examines: [],
|
||||
wxGroups: [],
|
||||
sendScope: '0',
|
||||
sendType: 0,
|
||||
name: '',
|
||||
email: '',
|
||||
telephone: '',
|
||||
gender: '',
|
||||
mobile: '',
|
||||
departmentName: '',
|
||||
departmentIds: [],
|
||||
tagIds: [],
|
||||
id: '',
|
||||
status: false
|
||||
taskTitle: ''
|
||||
},
|
||||
id: '',
|
||||
tagsList: []
|
||||
@@ -173,6 +206,64 @@
|
||||
})
|
||||
},
|
||||
|
||||
removeFile (index) {
|
||||
this.fileList.splice(index, 1)
|
||||
},
|
||||
|
||||
mapIcon (type) {
|
||||
return {
|
||||
image: 'https://cdn.cunwuyun.cn/dvcp/announce/img.png',
|
||||
video: 'https://cdn.cunwuyun.cn/dvcp/announce/video.png',
|
||||
folder: 'https://cdn.cunwuyun.cn/dvcp/announce/folder.png',
|
||||
site: 'https://cdn.cunwuyun.cn/dvcp/announce/site.png',
|
||||
miniapp: 'https://cdn.cunwuyun.cn/dvcp/announce/miniapp.png'
|
||||
}[type]
|
||||
},
|
||||
|
||||
onBeforeUpload(event) {
|
||||
return this.onOverSize(event)
|
||||
},
|
||||
|
||||
getExtension(name) {
|
||||
return name.substring(name.lastIndexOf('.'))
|
||||
},
|
||||
|
||||
handleChange (e, size, accept) {
|
||||
const isLt10M = e.size / 1024 / 1024 < size
|
||||
const suffixName = this.getExtension(e.name)
|
||||
const suffixNameList = accept.split(',')
|
||||
|
||||
if (suffixNameList.indexOf(`${suffixName.toLowerCase()}`) === -1) {
|
||||
this.$message.error(`不支持该格式`)
|
||||
return false
|
||||
}
|
||||
|
||||
if (!isLt10M) {
|
||||
this.$message.error(`大小不超过${10}MB!`)
|
||||
return false
|
||||
}
|
||||
|
||||
return true
|
||||
},
|
||||
|
||||
submitUpload (file, type) {
|
||||
let formData = new FormData()
|
||||
formData.append('file', file.file)
|
||||
formData.append('type', type)
|
||||
this.instance.post(`/app/wxcp/upload/uploadFile`, formData, {
|
||||
withCredentials: false
|
||||
}).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.fileList.push({
|
||||
...res.data.file,
|
||||
media: res.data.media
|
||||
})
|
||||
|
||||
this.$message.success('上传成功')
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
onChange (e) {
|
||||
if (e.length) {
|
||||
this.form.departmentIds = e.map(v => v.id)
|
||||
@@ -304,6 +395,35 @@
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.fileList {
|
||||
margin-bottom: 12px;
|
||||
|
||||
.add-item {
|
||||
justify-content: space-between;
|
||||
margin-bottom: 8px;
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
font-style: normal;
|
||||
color: red;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.AppAnnounceDetail-container {
|
||||
@@ -321,10 +441,26 @@
|
||||
.right {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
width: 400px;
|
||||
height: 688px;
|
||||
background: url(https://cdn.cunwuyun.cn/dvcp/announce/phone.png);
|
||||
background-size: 400px 100%;
|
||||
width: 338px;
|
||||
height: 675px;
|
||||
|
||||
.phone {
|
||||
position: absolute;
|
||||
left: 14px;
|
||||
top: 14px;
|
||||
z-index: 1;
|
||||
width: 310px;
|
||||
height: 647px;
|
||||
}
|
||||
|
||||
.phone-wrapper {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
width: 338px;
|
||||
height: 675px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -340,7 +476,7 @@
|
||||
}
|
||||
|
||||
i {
|
||||
color: #c0c9db;
|
||||
color: #8899bb;
|
||||
}
|
||||
|
||||
em {
|
||||
|
||||
Reference in New Issue
Block a user