952 lines
29 KiB
Vue
952 lines
29 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="taskTitle" style="width: 100%;" :rules="[{ required: true, message: '请输入任务名称', trigger: 'blur' }]">
|
||
<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="sendScope" :rules="[{ required: true, message: '请选择发送范围', trigger: 'change' }]">
|
||
<el-radio-group v-model="form.sendScope" @change="onScopeChange">
|
||
<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="选择群主" v-if="form.sendScope !== '0'" prop="wxGroupsName" style="width: 100%;" :rules="[{ required: true, message: '请选择选择群主', trigger: 'change' }]" >
|
||
<ai-picker
|
||
:instance="instance"
|
||
multiple
|
||
:dialogTitle="form.sendScope === '2' ? '选择网格' : '选择部门'"
|
||
:ops="{label: form.sendScope === '2' ? 'girdName' : 'name'}"
|
||
:pageTitle="form.sendScope === '2' ? '网格' : '部门'"
|
||
:action="form.sendScope === '1' ? `/app/wxcp/wxdepartment/departList` : '/app/appgirdinfo/girdList'"
|
||
v-model="form.filterCriteria"
|
||
@pick="onPick"
|
||
@change="onSelcetChange">
|
||
<div class="AppAnnounceDetail-select">
|
||
<el-input size="small" class="AppAnnounceDetail-select__input" placeholder="请选择..." disabled v-model="form.wxGroupsName"></el-input>
|
||
<div class="select-left" v-if="form.wxGroups && form.wxGroups.length">
|
||
<span v-for="(item, index) in form.wxGroups" :key="index" v-if="index < 9">{{ item.groupOwnerName }}</span>
|
||
<em v-if="form.wxGroups.length > 9">等{{ form.wxGroups.length }}个</em>
|
||
</div>
|
||
<i v-else>请选择</i>
|
||
<div class="select-right">{{ form.filterCriteria.length ? '重新选择' : '选择' }}</div>
|
||
</div>
|
||
</ai-picker>
|
||
<div class="tips">
|
||
<p>消息预计送达居民群数：</p>
|
||
<span>{{ groupLen }}</span>
|
||
<!-- <el-tooltip
|
||
placement="top"
|
||
content="将由指定群主发送给TA作为群主的所有的群，由于企业微信限制，当超过1000个时将只发送到最近活跃的1000个群">
|
||
<i class="iconfont iconModal_Warning"></i>
|
||
</el-tooltip> -->
|
||
</div>
|
||
</el-form-item>
|
||
<el-form-item label="调用内容" prop="fileList" style="width: 100%;" :rules="[{ required: true, message: '请上传发送内容', trigger: 'blur' }]">
|
||
<!-- <ai-uploader :instance="instance" fileType="file" v-model="form.fileList" :limit="1" @change="onChange" accept=".csv, .CSV"></ai-uploader> -->
|
||
<el-upload action="/" :on-change="onChange" :on-remove="handleRemove" :auto-upload="false" accept=".csv, .CSV" :limit="1">
|
||
<el-button size="small" type="primary" class="upload-bom uploadBtn">
|
||
<span class="iconXlSX-sty-test">上传附件</span>
|
||
</el-button>
|
||
</el-upload>
|
||
</el-form-item>
|
||
<el-form-item label="日调用次数" prop="dayLimit" style="width: 50%;" :rules="[{ required: true, message: '请输入日调用次数', trigger: 'blur' }]">
|
||
<el-input-number size="small" v-model="form.dayLimit" :min="1" :max="50000" label="请输入日调用次数" @change="handleChangeCount"></el-input-number>
|
||
</el-form-item>
|
||
<el-form-item label="预计执行天数" prop="days" style="width: 50%;" :rules="[{ required: true, message: '请输入预计执行天数', trigger: 'blur' }]">
|
||
<el-input-number size="small" v-model="form.days" :min="1" :max="50" label="请输入预计执行天数" @change="handleChangeCount"></el-input-number>
|
||
</el-form-item>
|
||
<el-form-item label="累计调用" prop="totalCount" style="width: 50%;">
|
||
<el-input size="small" placeholder="自动生成" v-model="form.totalCount" disabled></el-input>
|
||
</el-form-item>
|
||
<!-- <el-form-item label="标签" style="width: 100%;" prop="markTag">
|
||
<el-checkbox-group v-model="form.markTag">
|
||
<el-checkbox
|
||
v-for="(item, index) in dict.getDict('mstTag')"
|
||
:key="index"
|
||
:label="item.dictValue">
|
||
{{ item.dictName }}
|
||
</el-checkbox>
|
||
</el-checkbox-group>
|
||
</el-form-item> -->
|
||
<el-form-item label="结束时间" style="width: 100%;" prop="taskEndTime" :rules="[{ required: true, message: '请选择结束时间', trigger: 'change' }]">
|
||
<el-date-picker
|
||
style="width: 100%;"
|
||
v-model="form.taskEndTime"
|
||
type="datetime"
|
||
size="small"
|
||
:picker-options="pickerOptions"
|
||
value-format="yyyy-MM-dd HH:mm:ss"
|
||
placeholder="请选择结束时间">
|
||
</el-date-picker>
|
||
</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="examines" style="width: 100%;" :rules="[{ required: true, message: '请选择审批人员', trigger: 'change' }]">
|
||
<ai-user-selecter :instance="instance" v-model="form.examines" @change="onUserChange">
|
||
<div class="AppAnnounceDetail-select">
|
||
<el-input class="AppAnnounceDetail-select__input" size="small" placeholder="请选择..." v-model="form.examinesName"></el-input>
|
||
<div class="select-left" v-if="form.examines && form.examines.length">
|
||
<span v-for="(item, index) in form.examines" :key="index">{{ item.name }}</span>
|
||
</div>
|
||
<i v-if="!form.examines.length">请选择</i>
|
||
<div class="select-right">{{ form.examines.length ? '重新选择' : '选择' }}</div>
|
||
</div>
|
||
</ai-user-selecter>
|
||
</el-form-item>
|
||
</div>
|
||
</template>
|
||
</ai-card>
|
||
</el-form>
|
||
<!-- <div class="right">
|
||
<Phone :avatar="user.info.avatar" @close="isShowPhone = false" :isShowClose="false" :content="form.content" :fileList="fileList"></Phone>
|
||
</div> -->
|
||
<ai-dialog
|
||
:visible.sync="isShowAddLink"
|
||
width="920px"
|
||
title="链接消息"
|
||
@close="onClose"
|
||
@onConfirm="onLinkConfirm">
|
||
<el-form ref="linkForm" :model="linkForm" label-width="110px" label-position="right">
|
||
<div class="ai-form">
|
||
<el-form-item label="标题" style="width: 100%;" prop="linkTitle" :rules="[{ required: true, message: '请输入标题', trigger: 'blur' }]">
|
||
<el-input
|
||
size="small"
|
||
placeholder="请输入标题"
|
||
maxlength="42"
|
||
show-word-limit
|
||
v-model="linkForm.linkTitle">
|
||
</el-input>
|
||
</el-form-item>
|
||
<el-form-item label="链接" style="width: 100%;" prop="linkUrl" :rules="[{ required: true, message: '请输入链接', trigger: 'blur' }]">
|
||
<el-input
|
||
size="small"
|
||
placeholder="请输入链接"
|
||
maxlength="682"
|
||
show-word-limit
|
||
v-model="linkForm.linkUrl">
|
||
</el-input>
|
||
</el-form-item>
|
||
<el-form-item label="描述" style="width: 100%;" prop="linkDesc">
|
||
<el-input
|
||
size="small"
|
||
placeholder="请输入描述"
|
||
maxlength="170"
|
||
show-word-limit
|
||
v-model="linkForm.linkDesc">
|
||
</el-input>
|
||
</el-form-item>
|
||
<el-form-item label="封面图" prop="linkPicUrl" style="width: 100%;">
|
||
<ai-uploader :instance="instance" v-model="linkForm.linkPicUrl" :limit="1"></ai-uploader>
|
||
</el-form-item>
|
||
</div>
|
||
</el-form>
|
||
</ai-dialog>
|
||
<ai-dialog
|
||
:visible.sync="isShowAddMiniapp"
|
||
width="920px"
|
||
title="小程序消息"
|
||
@close="onClose"
|
||
@onConfirm="onMiniAppForm">
|
||
<el-form ref="miniAppForm" :model="miniAppForm" label-width="130px" label-position="right">
|
||
<div class="ai-form">
|
||
<el-form-item label="小程序appid" style="width: 100%;" prop="mpAppid" :rules="[{ required: true, message: '小程序appid', trigger: 'blur' }]">
|
||
<el-input
|
||
size="small"
|
||
placeholder="小程序appid"
|
||
v-model="miniAppForm.mpAppid">
|
||
</el-input>
|
||
</el-form-item>
|
||
<el-form-item label="小程序page路径" style="width: 100%;" prop="mpPage" :rules="[{ required: true, message: '请输入小程序page路径', trigger: 'blur' }]">
|
||
<el-input
|
||
size="small"
|
||
placeholder="请输入小程序page路径"
|
||
v-model="miniAppForm.mpPage">
|
||
</el-input>
|
||
</el-form-item>
|
||
<el-form-item label="标题" style="width: 100%;" prop="mpTitle" :rules="[{ required: true, message: '请输入标题', trigger: 'blur' }]">
|
||
<el-input
|
||
size="small"
|
||
placeholder="请输入标题"
|
||
maxlength="20"
|
||
show-word-limit
|
||
v-model="miniAppForm.mpTitle">
|
||
</el-input>
|
||
</el-form-item>
|
||
<el-form-item label="封面图" prop="media" style="width: 100%;" :rules="[{ required: true, message: '请上传封面图', trigger: 'change' }]">
|
||
<ai-uploader url="/app/wxcp/upload/uploadFile?type=image" :instance="instance" isWechat v-model="miniAppForm.media" :limit="1"></ai-uploader>
|
||
</el-form-item>
|
||
</div>
|
||
</el-form>
|
||
</ai-dialog>
|
||
<ai-dialog
|
||
:visible.sync="isShowDate"
|
||
width="590px"
|
||
title="定时发送"
|
||
customFooter>
|
||
<el-form ref="dateForm" :model="dateForm" label-width="130px" label-position="right">
|
||
<div class="ai-form">
|
||
<el-form-item label="定时发送时间" style="width: 100%;" prop="choiceTime" :rules="[{ required: true, message: '请选择定时发送时间', trigger: 'change' }]">
|
||
<el-date-picker
|
||
style="width: 100%;"
|
||
v-model="dateForm.choiceTime"
|
||
type="datetime"
|
||
size="small"
|
||
:picker-options="pickerOptions"
|
||
value-format="yyyy-MM-dd HH:mm:ss"
|
||
placeholder="请选择定时发送时间">
|
||
</el-date-picker>
|
||
</el-form-item>
|
||
</div>
|
||
</el-form>
|
||
<div class="dialog-footer" slot="footer">
|
||
<el-button @click="onClose">取消</el-button>
|
||
<el-button @click="onDateForm" type="primary" :loading="isLoading2" style="width: 92px;">确认</el-button>
|
||
</div>
|
||
</ai-dialog>
|
||
<!-- <ChooseMaterial ref="ChooseMaterial" :instance="instance" @change="onChooseChange"></ChooseMaterial> -->
|
||
</div>
|
||
</template>
|
||
<template #footer>
|
||
<el-button @click="cancel">取消</el-button>
|
||
<el-button type="primary" @click="confirm(0)" :loading="isLoading1" style="width: 120px;">立即执行</el-button>
|
||
<el-button type="primary" @click="confirm(1)">定时任务</el-button>
|
||
</template>
|
||
</ai-detail>
|
||
</template>
|
||
|
||
<script>
|
||
import Phone from './Phone'
|
||
import ChooseMaterial from './ChooseMaterial.vue'
|
||
import { mapActions, mapState } from 'vuex'
|
||
|
||
export default {
|
||
name: 'Add',
|
||
|
||
props: {
|
||
instance: Function,
|
||
dict: Object,
|
||
params: Object
|
||
},
|
||
|
||
components: {
|
||
Phone,
|
||
ChooseMaterial
|
||
},
|
||
|
||
data() {
|
||
return {
|
||
info: {},
|
||
department: [],
|
||
isShowChoose: false,
|
||
isLoading1: false,
|
||
isLoading2: false,
|
||
fileList: [],
|
||
isShowAddLink: false,
|
||
isShowAddMiniapp: false,
|
||
isShowDate: false,
|
||
isLoading: false,
|
||
linkForm: {
|
||
linkPicUrl: [],
|
||
linkDesc: '',
|
||
linkTitle: '',
|
||
linkUrl: ''
|
||
},
|
||
dateForm: {
|
||
choiceTime: ''
|
||
},
|
||
miniAppForm: {
|
||
mpAppid: '',
|
||
mpPage: '',
|
||
mpTitle: '',
|
||
media: []
|
||
},
|
||
form: {
|
||
content: '',
|
||
choiceTime: '',
|
||
contents: [],
|
||
enableExamine: '0',
|
||
taskEndTime: '',
|
||
examines: [],
|
||
wxGroups: [],
|
||
markTag: [],
|
||
wxGroupsName: '',
|
||
sendScope: '1',
|
||
sendType: 0,
|
||
name: '',
|
||
filterCriteria: [],
|
||
taskTitle: '',
|
||
examinesName: '',
|
||
fileList: []
|
||
},
|
||
girdNames: '',
|
||
id: '',
|
||
tagsList: [],
|
||
pickerOptions: {
|
||
disabledDate: e => {
|
||
return e.getTime() < (Date.now() - 60 * 1000 * 60 * 24)
|
||
}
|
||
},
|
||
fileContentList: []
|
||
}
|
||
},
|
||
|
||
computed: {
|
||
...mapState(['user']),
|
||
|
||
groupLen() {
|
||
let i = 0
|
||
if(this.form.wxGroups && this.form.wxGroups.length) {
|
||
this.form.wxGroups.forEach(v => {
|
||
i = i + v.groupIds.split(',').length
|
||
})
|
||
}
|
||
return i
|
||
}
|
||
},
|
||
|
||
created() {
|
||
if (this.params && this.params.id) {
|
||
this.id = this.params.id
|
||
this.getInfo(this.params.id)
|
||
this.dict.load('mstTag')
|
||
} else {
|
||
this.getWxGroups()
|
||
this.dict.load('mstTag')
|
||
}
|
||
},
|
||
|
||
methods: {
|
||
...mapActions(['initOpenData', 'transCanvas']),
|
||
|
||
onChooseChange (e) {
|
||
this.form.content = e.filter(v => v.msgType === '0').map(v => v.content).join(' ')
|
||
|
||
this.fileList = this.fileList.concat(e.filter(v => v.msgType !== '0'))
|
||
},
|
||
|
||
getInfo(id) {
|
||
this.instance.post(`/app/appmasssendingtaskbaidu/queryDetailById?id=${id}`).then(res => {
|
||
if (res.code === 0) {
|
||
this.form = {
|
||
...this.form,
|
||
...res.data,
|
||
wxGroupsName: '1',
|
||
filterCriteria: res.data.filterCriteria.split(','),
|
||
// markTag: res.data.markTag.split(',')
|
||
}
|
||
|
||
if (res.data.girdNames) {
|
||
this.girdNames = res.data.girdNames.split(',')
|
||
}
|
||
|
||
this.dateForm.choiceTime = ''
|
||
|
||
if (res.data.examines && res.data.examines.length) {
|
||
this.form.examines = res.data.examines.map(v => {
|
||
return {
|
||
...v,
|
||
wxOpenUserId: v.examineUserId,
|
||
id: v.examineUserId,
|
||
name: v.examineUserName
|
||
}
|
||
})
|
||
this.form.examinesName = '1'
|
||
}
|
||
|
||
|
||
const content = res.data.contents.filter(v => v.msgType === '0')
|
||
|
||
if (content.length) {
|
||
this.$set(this.form, 'content', content[0].content)
|
||
}
|
||
|
||
this.fileList = res.data.contents.filter(v => v.msgType !== '0').map(v => {
|
||
return {
|
||
...v,
|
||
...v.sysFile
|
||
}
|
||
})
|
||
}
|
||
})
|
||
},
|
||
|
||
onUserChange(e) {
|
||
if (e.length) {
|
||
this.form.examinesName = '1'
|
||
} else {
|
||
this.form.wxGroupsName = ''
|
||
}
|
||
},
|
||
|
||
onScopeChange(e) {
|
||
this.form.filterCriteria = []
|
||
this.form.wxGroups = []
|
||
this.girdNames = ''
|
||
|
||
if (e === '0') {
|
||
this.getWxGroups()
|
||
} else {
|
||
this.form.filterCriteria = []
|
||
}
|
||
},
|
||
|
||
onPick(e) {
|
||
if (this.form.sendScope === '2' && e.length) {
|
||
this.girdNames = e.map(v => v.girdName)
|
||
}
|
||
},
|
||
|
||
onSelcetChange(e) {
|
||
if (e.length) {
|
||
this.form.wxGroupsName = '1'
|
||
|
||
this.$nextTick(() => {
|
||
this.getWxGroups()
|
||
})
|
||
} else {
|
||
this.form.wxGroupsName = ''
|
||
this.form.wxGroups = []
|
||
}
|
||
},
|
||
|
||
getWxGroups() {
|
||
this.instance.post(`/app/appmasssendingtaskbaidu/queryWxGroups?sendScope=${this.form.sendScope}&clientInfoId=${this.params.clientInfoId}`, {
|
||
filterCriteria: this.form.filterCriteria.join(',')
|
||
}).then(res => {
|
||
if (res.code === 0) {
|
||
this.form.wxGroups = res.data
|
||
}
|
||
})
|
||
},
|
||
|
||
onLinkConfirm() {
|
||
this.$refs.linkForm.validate((valid) => {
|
||
if (valid) {
|
||
this.fileList.push({
|
||
...this.linkForm,
|
||
linkPicUrl: this.linkForm.linkPicUrl.length ? this.linkForm.linkPicUrl[0].url : '',
|
||
msgType: '4'
|
||
})
|
||
|
||
this.isShowAddLink = false
|
||
}
|
||
})
|
||
},
|
||
|
||
onMiniAppForm() {
|
||
this.$refs.miniAppForm.validate((valid) => {
|
||
if (valid) {
|
||
this.fileList.push({
|
||
...this.miniAppForm,
|
||
msgType: '5',
|
||
...this.miniAppForm.media[0],
|
||
mediaId: this.miniAppForm.media[0].media.mediaId,
|
||
sysFileId: this.miniAppForm.media[0].id
|
||
})
|
||
|
||
this.isShowAddMiniapp = false
|
||
}
|
||
})
|
||
},
|
||
|
||
onClose() {
|
||
this.linkForm.linkPicUrl = []
|
||
this.linkForm.linkDesc = ''
|
||
this.linkForm.linkTitle = ''
|
||
this.linkForm.linkUrl = ''
|
||
this.miniAppForm.mpAppid = ''
|
||
this.miniAppForm.mpPage = ''
|
||
this.miniAppForm.mpTitle = ''
|
||
this.dateForm.choiceTime = ''
|
||
|
||
this.isShowDate = false
|
||
},
|
||
|
||
removeFile(index) {
|
||
this.fileList.splice(index, 1)
|
||
},
|
||
|
||
mapIcon(type) {
|
||
return {
|
||
1: 'https://cdn.cunwuyun.cn/dvcp/announce/img.png',
|
||
2: 'https://cdn.cunwuyun.cn/dvcp/announce/video.png',
|
||
3: 'https://cdn.cunwuyun.cn/dvcp/announce/folder.png',
|
||
4: 'https://cdn.cunwuyun.cn/dvcp/announce/site.png',
|
||
5: '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
|
||
},
|
||
|
||
onExceed() {
|
||
this.$message.error(`最多上传9个附件`)
|
||
},
|
||
|
||
submitUpload(file, type) {
|
||
const fileType = {
|
||
'1': 'image',
|
||
'2': 'video',
|
||
'3': 'file'
|
||
}[type]
|
||
let formData = new FormData()
|
||
formData.append('file', file.file)
|
||
formData.append('type', fileType)
|
||
let loading = this.$loading()
|
||
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,
|
||
msgType: type,
|
||
sysFileId: res.data.file.id,
|
||
imgPicUrl: res.data.file.url,
|
||
mediaId: res.data.media.mediaId
|
||
})
|
||
|
||
this.$message.success('上传成功')
|
||
}
|
||
}).finally(() => loading.close())
|
||
},
|
||
|
||
onDateForm() {
|
||
this.$refs.dateForm.validate((valid) => {
|
||
if (valid) {
|
||
if (new Date(this.dateForm.choiceTime).getTime() < Date.now()) {
|
||
return this.$message.error('定时发送时间不得早于当前时间')
|
||
}
|
||
|
||
if (this.params.sendChannel === '1' && new Date(this.dateForm.choiceTime).getTime() > new Date(this.form.taskEndTime).getTime()) {
|
||
return this.$message.error('定时发送时间不得晚于结束时间')
|
||
}
|
||
|
||
this.confirm(1)
|
||
}
|
||
})
|
||
},
|
||
|
||
confirm(sendType) {
|
||
this.$refs.form.validate((valid) => {
|
||
if (valid) {
|
||
if (!this.form.wxGroups.length) {
|
||
return this.$message.error('居民群数量不能为0')
|
||
}
|
||
|
||
if (this.params.sendChannel === '1' && new Date(this.form.taskEndTime).getTime() < Date.now()) {
|
||
return this.$message.error('结束时间不得早于当前时间')
|
||
}
|
||
|
||
if (sendType === 1 && !this.dateForm.choiceTime) {
|
||
this.isShowDate = true
|
||
return false
|
||
}
|
||
|
||
// const contents = [
|
||
// {
|
||
// content: this.form.content,
|
||
// msgType: '0'
|
||
// },
|
||
// ...this.fileList
|
||
// ]
|
||
|
||
if (sendType === 0) {
|
||
this.isLoading1 = true
|
||
} else {
|
||
this.isLoading2 = true
|
||
}
|
||
this.instance.post(`/app/appmasssendingtaskbaidu/addOrUpdate`, {
|
||
clientInfoId: this.params.clientInfoId,
|
||
...this.form,
|
||
id: this.params.id,
|
||
wxGroups: this.form.wxGroups,
|
||
contents: this.fileContentList,
|
||
sendType,
|
||
// markTag: this.form.markTag.join(','),
|
||
sendChannel: this.params.sendChannel,
|
||
choiceTime: this.dateForm.choiceTime,
|
||
filterCriteria: this.form.filterCriteria.join(','),
|
||
examines: this.form.examines.length ? this.form.examines.map(v => {
|
||
return {
|
||
...v,
|
||
examineUserId: v.id,
|
||
examineUserName: v.name
|
||
}
|
||
}) : [],
|
||
}).then(res => {
|
||
if (res.code == 0) {
|
||
this.$message.success('提交成功')
|
||
setTimeout(() => {
|
||
this.cancel(true)
|
||
}, 600)
|
||
} else {
|
||
this.isLoading1 = false
|
||
this.isLoading2 = false
|
||
}
|
||
|
||
}).catch(() => {
|
||
this.isLoading1 = false
|
||
this.isLoading2 = false
|
||
})
|
||
}
|
||
})
|
||
},
|
||
|
||
selectDept() {
|
||
return this.$message.error(`您未在系统中关联‘主部门’，请联系管理员处理`)
|
||
},
|
||
|
||
handleChangeCount() {
|
||
if(this.form.days > 0 && this.form.dayLimit > 0) {
|
||
this.form.totalCount = this.form.days * this.form.dayLimit
|
||
}
|
||
},
|
||
|
||
onChange(file, fileList) {
|
||
console.log(file, fileList);
|
||
var reader = new FileReader();
|
||
if(typeof reader == 'undefined') {
|
||
this.$message.error("您的浏览器暂不支持该功能")
|
||
return;
|
||
}
|
||
|
||
reader.readAsText(file.raw, 'gbk')
|
||
reader.onload = (e) => {
|
||
var list = e.target.result.split('\r\n')
|
||
list.map((item) => {
|
||
if(item) {
|
||
this.fileContentList.push(item)
|
||
}
|
||
})
|
||
this.form.fileList = fileList
|
||
}
|
||
},
|
||
|
||
handleRemove(file, fileList) {
|
||
this.form.fileList = fileList
|
||
this.fileContentList = []
|
||
},
|
||
|
||
cancel(isRefresh) {
|
||
this.$emit('change', {
|
||
type: 'TaskList',
|
||
isRefresh: !!isRefresh,
|
||
params: {id: this.params.clientInfoId, status: this.params.status}
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.el-tooltip__popper.is-dark {
|
||
max-width: 240px;
|
||
}
|
||
.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;
|
||
}
|
||
}
|
||
|
||
.ai-form {
|
||
textarea {
|
||
border-radius: 4px 4px 0 0!important;
|
||
}
|
||
}
|
||
|
||
* {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.add {
|
||
display: flex;
|
||
position: relative;
|
||
flex-direction: column;
|
||
padding: 14px 16px;
|
||
background: #F9F9F9;
|
||
border-radius: 0px 0px 4px 4px;
|
||
border: 1px solid #D0D4DC;
|
||
border-top: none;
|
||
|
||
.add-material {
|
||
position: absolute;
|
||
bottom: 14px;
|
||
left: 16px;
|
||
transform: translateX(120%);
|
||
}
|
||
|
||
.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;
|
||
}
|
||
}
|
||
|
||
.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 {
|
||
display: flex;
|
||
position: relative;
|
||
height: 100%;
|
||
padding: 0 20px;
|
||
overflow: auto;
|
||
overflow: overlay;
|
||
|
||
.left {
|
||
flex: 1;
|
||
margin-right: 20px;
|
||
}
|
||
|
||
.right {
|
||
position: sticky;
|
||
top: 0;
|
||
}
|
||
|
||
.AppAnnounceDetail-select {
|
||
display: flex;
|
||
align-items: center;
|
||
min-height: 32px;
|
||
line-height: 1;
|
||
background: #F5F5F5;
|
||
border-radius: 4px;
|
||
border: 1px solid #D0D4DC;
|
||
cursor: pointer;
|
||
overflow: hidden;
|
||
transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||
|
||
&:hover {
|
||
border-color: #26f;
|
||
}
|
||
|
||
& > i {
|
||
flex: 1;
|
||
height: 100%;
|
||
line-height: 32px;
|
||
padding: 0 12px;
|
||
color: #888888;
|
||
font-size: 14px;
|
||
font-style: normal;
|
||
border-right: 1px solid #D0D4DC;
|
||
background: #fff;
|
||
}
|
||
|
||
.AppAnnounceDetail-select__input {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
z-index: -1;
|
||
opacity: 0;
|
||
height: 100%;
|
||
}
|
||
|
||
.select-right {
|
||
height: 100%;
|
||
padding: 0 12px;
|
||
color: #222222;
|
||
font-size: 12px;
|
||
cursor: pointer;
|
||
transition: all ease 0.3s;
|
||
|
||
&:hover {
|
||
opacity: 0.5;
|
||
}
|
||
}
|
||
|
||
.select-left {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
flex: 1;
|
||
padding: 5px 0 0px 12px;
|
||
border-right: 1px solid #D0D4DC;
|
||
border-radius: 4px 0 0 4px;
|
||
background: #fff;
|
||
|
||
em {
|
||
height: 22px;
|
||
line-height: 22px;
|
||
margin: 0 4px 5px 0;
|
||
color: #222222;
|
||
font-size: 12px;
|
||
font-style: normal;
|
||
}
|
||
|
||
span {
|
||
height: 22px;
|
||
line-height: 22px;
|
||
margin: 0 4px 5px 0;
|
||
padding: 0 8px;
|
||
font-size: 12px;
|
||
color: #222222;
|
||
background: #F3F4F7;
|
||
border-radius: 2px;
|
||
border: 1px solid #D0D4DC;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.tips {
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 14px;
|
||
color: #222222;
|
||
|
||
span {
|
||
margin: 0 3px;
|
||
color: #2266FF;
|
||
}
|
||
|
||
i {
|
||
color: #8899bb;
|
||
}
|
||
|
||
em {
|
||
line-height: 20px;
|
||
margin-top: 8px;
|
||
color: #888888;
|
||
font-size: 12px;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
.select-div {
|
||
width: 100%;
|
||
height: 32px;
|
||
line-height: 32px;
|
||
border-radius: 4px;
|
||
border: 1px solid #ddd;
|
||
padding: 0 15px;
|
||
box-sizing: border-box;
|
||
font-size: 14px;
|
||
color: #999;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
</style>
|