343 lines
13 KiB
Vue
343 lines
13 KiB
Vue
<template>
|
||
<div class="new-client-mass">
|
||
<ai-detail>
|
||
<template #title>
|
||
<ai-title :title="params.isAdd?'新建群发':'群发详情'" isShowBottomBorder :isShowBack="true" @onBackClick="onBack"
|
||
:isShowBottomBorder="true"></ai-title>
|
||
</template>
|
||
<template #content>
|
||
<ai-card title="基本信息" v-if="params.isAdd && !isEditInfo">
|
||
<template #content>
|
||
<ai-wrapper>
|
||
<el-form ref="form"
|
||
:model="form"
|
||
:rules="formRules"
|
||
size="small"
|
||
style="width: 100%;"
|
||
label-width="120px">
|
||
<el-form-item label="群发账号" prop="documentName">
|
||
<el-row type="flex">
|
||
<div class="input"></div>
|
||
<ai-person-select :instance="instance" url="/app/appvillagecadres/list" :isMultiple="true"
|
||
@selectPerson="getSelect" btnText="选择" dialogTitle="选择">
|
||
<template name="option" v-slot:option="{ item }">
|
||
<span class="iconfont iconProlife">{{ item.name }}</span>
|
||
<ai-id mode="show" :show-eyes="false" :value="item.idNumber"/>
|
||
</template>
|
||
</ai-person-select>
|
||
</el-row>
|
||
</el-form-item>
|
||
<el-row type="flex" justify="space-between">
|
||
<el-form-item label="群发时间" prop="documentName">
|
||
<el-radio-group>
|
||
<el-radio :label="1">立即发送</el-radio>
|
||
<el-radio :label="2">定时发送</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
<el-form-item label="发送时间" prop="documentName">
|
||
<el-time-picker
|
||
class="select-width"
|
||
:picker-options="{ selectableRange: '18:30:00 - 20:30:00'}"
|
||
placeholder="请选择...">
|
||
</el-time-picker>
|
||
</el-form-item>
|
||
</el-row>
|
||
<el-form-item label="选择居民" prop="documentName">
|
||
<el-radio-group>
|
||
<el-radio :label="1">全部居民</el-radio>
|
||
<el-radio :label="2">筛选居民</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
<el-row type="flex" justify="space-between">
|
||
<el-form-item label="最早添加日期" prop="documentName">
|
||
<el-time-picker
|
||
class="select-width"
|
||
:picker-options="{ selectableRange: '18:30:00 - 20:30:00'}"
|
||
placeholder="请选择...">
|
||
</el-time-picker>
|
||
</el-form-item>
|
||
</el-form-item>
|
||
<el-form-item label="最晚添加日期" prop="documentName">
|
||
<el-time-picker
|
||
class="select-width"
|
||
:picker-options="{ selectableRange: '18:30:00 - 20:30:00'}"
|
||
placeholder="请选择...">
|
||
</el-time-picker>
|
||
</el-form-item>
|
||
</el-row>
|
||
<el-form-item label="居民公共标签" prop="documentName">
|
||
<el-row type="flex">
|
||
<div class="input"></div>
|
||
<el-button class="person-select" @click="dialog=true">选择</el-button>
|
||
</el-row>
|
||
</el-form-item>
|
||
<el-form-item label="排除居民" prop="documentName">
|
||
<el-row type="flex">
|
||
<div class="input"></div>
|
||
<ai-person-select :instance="instance" url="/app/appvillagecadres/list" :isMultiple="true"
|
||
@selectPerson="getSelect" btnText="选择" dialogTitle="选择">
|
||
<template name="option" v-slot:option="{ item }">
|
||
<span class="iconfont iconProlife">{{ item.name }}</span>
|
||
<ai-id mode="show" :show-eyes="false" :value="item.idNumber"/>
|
||
</template>
|
||
</ai-person-select>
|
||
</el-row>
|
||
</el-form-item>
|
||
</el-form>
|
||
</ai-wrapper>
|
||
</template>
|
||
</ai-card>
|
||
|
||
<ai-card title="基本信息" v-if="!params.isAdd && !isEditInfo">
|
||
<template #right>
|
||
<el-button icon="iconfont iconjdq_led_edit" size="mini" @click="editInfo()">编辑</el-button>
|
||
</template>
|
||
<template #content>
|
||
<ai-wrapper label-width="96px">
|
||
<ai-info-item label="群发账号" isLine>刘仕伟；郭麒麟；陶瑞武</ai-info-item>
|
||
<ai-info-item label="群发时间">定时发送</ai-info-item>
|
||
<ai-info-item label="发送时间">2021-05-12 18:00</ai-info-item>
|
||
<ai-info-item label="选择居民" isLine>筛选居民</ai-info-item>
|
||
<ai-info-item label="最早添加日期">2021-05-12 18:00</ai-info-item>
|
||
<ai-info-item label="最晚添加日期">2021-05-12 18:00</ai-info-item>
|
||
<ai-info-item label="居民公共标签" isLine>2021-05-12 18:00</ai-info-item>
|
||
<ai-info-item label="排除居民" isLine>陶瑞武</ai-info-item>
|
||
</ai-wrapper>
|
||
</template>
|
||
</ai-card>
|
||
|
||
<ai-card title="群发消息内容" class="msg-title" v-if="params.isAdd && !isEditMsg">
|
||
<template #right>
|
||
*居民每个月最多接收来自同一企业管理员的4条群发消息，4条消息可在同一天发送
|
||
</template>
|
||
<template #content>
|
||
<ai-wrapper>
|
||
<el-form ref="form"
|
||
style="width: 100%;"
|
||
:model="form"
|
||
:rules="formRules"
|
||
size="small"
|
||
label-width="120px">
|
||
<el-form-item label="文本内容">
|
||
<el-input
|
||
type="textarea"
|
||
:rows="5"
|
||
placeholder="请输入回复内容">
|
||
</el-input>
|
||
</el-form-item>
|
||
<el-form-item label="其他类型">
|
||
<el-radio-group v-model="form.type">
|
||
<el-radio label="none">无</el-radio>
|
||
<el-radio label="img">图片</el-radio>
|
||
<el-radio label="link">链接</el-radio>
|
||
<el-radio label="file">附件</el-radio>
|
||
<el-radio label="video">视频</el-radio>
|
||
<el-radio label="miniProgrom">小程序</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
<el-form-item :label="comp.label" v-for="(comp,index) in msgConnect" :key="index">
|
||
<ai-uploader :instance="instance" :limit="1" v-if="comp.type=='img'"></ai-uploader>
|
||
<el-input placeholder="链接地址请以http或https开头" v-if="comp.type=='link'">
|
||
<template slot="prepend">Http://</template>
|
||
</el-input>
|
||
<ai-uploader :instance="instance" fileType="file" :limit="9" v-if="comp.type=='file'"></ai-uploader>
|
||
<el-radio-group v-if="comp.type=='miniProgrom'" class="radio-group-wrap">
|
||
<div class="radio-wrap" v-for="(item,index) in 5" :key="index">
|
||
<el-radio label="none">
|
||
<span class="iconfont iconwenmingxiangfeng"></span>
|
||
小程序名称
|
||
</el-radio>
|
||
</div>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
</el-form>
|
||
</ai-wrapper>
|
||
</template>
|
||
</ai-card>
|
||
|
||
<ai-card title="群发消息内容" v-if="!params.isAdd && !isEditMsg">
|
||
<template #right>
|
||
<el-button icon="iconfont iconjdq_led_edit" size="mini">编辑</el-button>
|
||
</template>
|
||
<template #content>
|
||
<ai-wrapper label-width="96px">
|
||
<ai-info-item label="文本内容" isLine>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</ai-info-item>
|
||
<ai-info-item label="小程序" isLine>
|
||
<div class="radio-group-wrap">
|
||
<div class="radio-wrap" v-for="(item,index) in 5" :key="index">
|
||
<span class="iconfont iconwenmingxiangfeng"></span>
|
||
<span style="margin-left: 8px;">小程序名称</span>
|
||
</div>
|
||
</div>
|
||
</ai-info-item>
|
||
</ai-wrapper>
|
||
</template>
|
||
</ai-card>
|
||
|
||
</template>
|
||
|
||
<template slot="footer" v-if="params.isAdd">
|
||
<el-button style="width:120px">取消</el-button>
|
||
<el-button type="primary" style="width:120px">提 交</el-button>
|
||
</template>
|
||
</ai-detail>
|
||
<ai-dialog
|
||
title="选择标签"
|
||
width="800px"
|
||
:visible.sync="dialog"
|
||
:destroyOnClose="true"
|
||
@onConfirm="onConfirm">
|
||
<el-form ref="form" label-width="80px">
|
||
<el-form-item label="标签规则">
|
||
<el-radio-group>
|
||
<el-radio :label="0">以下标签满足其一</el-radio>
|
||
<el-radio :label="1">以下标签同时满足</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
</el-form>
|
||
</ai-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: "NewClientMass",
|
||
data() {
|
||
return {
|
||
form: {
|
||
type: "0"
|
||
},
|
||
isAdd: true,
|
||
isEditInfo:false,
|
||
isEditMsg:false,
|
||
dialog: false,
|
||
}
|
||
},
|
||
|
||
props: {
|
||
instance: Function,
|
||
dict: Object,
|
||
permissions: Function,
|
||
params:Object
|
||
},
|
||
|
||
computed: {
|
||
formRules() {
|
||
return {
|
||
documentName: [{required: true, message: "请输入公文名称", trigger: 'change'}],
|
||
documentCode: [{required: true, message: "请输入公文编号", trigger: 'change'}],
|
||
documentType: [{required: true, message: "请选择公文类型", trigger: 'change'}],
|
||
readType: [{required: true, message: "请选择阅示类型", trigger: 'change'}],
|
||
}
|
||
},
|
||
msgConnect() {
|
||
return [
|
||
{type: 'none', label: ''},
|
||
{type: 'img', label: '图片'},
|
||
{type: 'link', label: '链接'},
|
||
{type: 'file', label: "附件"},
|
||
{type: 'video', label: "视频"},
|
||
{type: 'miniProgrom', label: "小程序"},
|
||
].filter(e => e.type == this.form.type)
|
||
}
|
||
},
|
||
create() {
|
||
},
|
||
methods: {
|
||
editInfo(){
|
||
this.$emit("change",{
|
||
type:"NewClientMass",
|
||
row:{row:this.params.row,isAdd:true}
|
||
})
|
||
this.isEditInfo=true
|
||
},
|
||
onConfirm(){
|
||
|
||
},
|
||
getSelect() {
|
||
|
||
},
|
||
onBack() {
|
||
this.$emit("change", {
|
||
type: 'TableList'
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.new-client-mass {
|
||
height: 100%;
|
||
overflow: auto;
|
||
background: #f3f6f9;
|
||
|
||
.input {
|
||
width: 100%;
|
||
min-height: 32px;
|
||
line-height: 32px;
|
||
border-radius: 4px;
|
||
border: 1px solid #d0d4dc;
|
||
color: #666;
|
||
display: inline-block;
|
||
font-size: inherit;
|
||
cursor: pointer;
|
||
|
||
&:after {
|
||
content: "请选择...";
|
||
color: #888888;
|
||
padding-left: 10px;
|
||
}
|
||
}
|
||
|
||
.select-width {
|
||
width: 328px;
|
||
}
|
||
|
||
.radio-group-wrap {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 8px;
|
||
|
||
.radio-wrap {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 0 17px;
|
||
width: 400px;
|
||
height: 60px;
|
||
background: #FFFFFF;
|
||
border-radius: 2px;
|
||
border: 1px solid #D0D4DC;
|
||
}
|
||
}
|
||
|
||
::v-deep .AiPersonSelect {
|
||
& > button {
|
||
background: #F5F5F5;
|
||
border-radius: 0px 2px 2px 0px;
|
||
border: 1px solid #D0D4DC;
|
||
color: #222222;
|
||
}
|
||
}
|
||
|
||
.person-select {
|
||
background: #F5F5F5;
|
||
border-radius: 0px 2px 2px 0px;
|
||
border: 1px solid #D0D4DC;
|
||
color: #222222;
|
||
}
|
||
|
||
::v-deep .msg-title {
|
||
& > .aibar {
|
||
justify-content: flex-start;
|
||
|
||
& > .aibar-right {
|
||
margin-left: 64px;
|
||
font-size: 14px;
|
||
color: #888888 !important;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|