目录代码整合

This commit is contained in:
aixianling
2022-05-10 20:02:37 +08:00
parent 71049f7f65
commit 036ee91533
324 changed files with 4 additions and 8321 deletions

View File

@@ -0,0 +1,69 @@
<template>
<ai-list v-if="!isShowDetail">
<template slot="title">
<ai-title title="客户群发" :isShowBottomBorder="true"></ai-title>
</template>
<template slot="tabs">
<component :ref="activeName" :is="activeName" @change="change" :instance="instance" :dict="dict"
:permissions="permissions"/>
</template>
</ai-list>
<component v-else :is="activeName" :params="params" @change="change" :instance="instance" :dict="dict" :permissions="permissions"/>
</template>
<script>
import TableList from './components/TableList.vue'
import NewClientMass from './components/NewClientMass.vue'
import {mapState} from 'vuex'
export default {
name: 'AppClientMassTextin',
label: '客户群发',
components: {
TableList,
NewClientMass,
},
props: {
instance: Function,
dict: Object,
permissions: Function
},
computed: {
...mapState(['user']),
},
data() {
return {
activeName: 'TableList',
params: {},
isShowDetail: false,
}
},
methods: {
change(val) {
console.log(val);
if (val.type) {
this.activeName = val.type
switch (val.type) {
case "NewClientMass":
this.isShowDetail = true
this.params = val.row
break;
case "TableList":
this.isShowDetail = false
this.$nextTick(() => {
this.$refs[this.activeName].getList()
})
break;
}
}
}
}
}
</script>
<style lang="scss" scoped>
</style>

View File

@@ -0,0 +1,342 @@
<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>

View File

@@ -0,0 +1,141 @@
<template>
<ai-list isTabs>
<template slot="content">
<ai-search-bar class="search-bar" bottomBorder>
<template slot="left">
<el-button type="primary" icon="iconfont iconAdd" @click="newClient">新建群发</el-button>
</template>
<template slot="right">
<el-input
v-model="search.name"
class="search-input"
size="small"
v-throttle="() => {search.current = 1, getList()}"
placeholder="请输入标题或编号"
clearable
@clear="search.current = 1, search.name = '', getList()"
suffix-icon="iconfont iconSearch" />
</template>
</ai-search-bar>
<ai-table
:tableData="tableData"
:col-configs="colConfigs"
:stripe="true"
:total="total"
ref="aitableex"
style="margin-top: 20px;"
:current.sync="search.current"
:size.sync="search.size"
@getList="getList">
<el-table-column slot="identityNumber" label="群发内容" align="center">
<template slot-scope="{ row }">
<el-popover
placement="right"
width="400"
trigger="hover">
<div>您可以查询到本村()的基本情况小微权力公开情况,并进行留言评价您自己操作一下看看,是不是很简单?</div>
<!-- <ai-file-list :fileList="fileList" :fileOps="{name: 'name', size: 'fileSizeStr'}"></ai-file-list>-->
<span style="cursor: pointer;" slot="reference">{{row.identityNumber}}</span>
</el-popover>
</template>
</el-table-column>
<el-table-column slot="options" label="操作" align="center">
<template slot-scope="{ row }">
<span class="table-btn" title="提醒发送" @click="remind(row.id)">提醒发送</span>
<span class="table-btn" title="详情" @click="toDetail(row)">详情</span>
</template>
</el-table-column>
</ai-table>
</template>
</ai-list>
</template>
<script>
export default {
name: 'TableList',
props: {
instance: Function,
dict: Object,
permissions:Function
},
data () {
return {
fileList:[],
search: {
current: 1,
size: 10,
name: ''
},
total: 0,
colConfigs: [
{ prop: 'name', label: '群发类型', align: 'center', width: '200' },
{ prop: 'phone', label: '类型', align: 'center' },
{ slot: 'identityNumber', label: '群发内容', align: 'center'},
{ prop: 'registTime', label: '发送时间', align: 'center' },
{ prop: 'recordUser', label: '已发送成员', align: 'center' },
{ prop: 'recordUser', label: '未发送成员', align: 'center' },
{ prop: 'recordUser', label: '已送达成员', align: 'center' },
{ prop: 'recordUser', label: '未送达成员', align: 'center' },
{ slot: 'options', label: '操作', align: 'center' }
],
tableData: [],
}
},
mounted () {
this.getList()
},
methods: {
toDetail(row){
this.$emit("change",{
type:"NewClientMass",
row:{row,isAdd:false}
})
},
newClient(){
this.$emit("change",{
type:"NewClientMass",
row:{row:"",isAdd:true}
})
},
getList() {
this.instance.post(`/app/apppetition/list`, null, {
params: {
...this.search,
status: 1
}
}).then(res => {
if (res.code == 0) {
this.tableData = res.data.records
this.total = res.data.total
}
})
},
remind (id) {
},
onAdd () {
this.$emit('change', {
type: 'add'
})
}
}
}
</script>
<style lang="scss" scoped>
.table-btn{
font-size: 14px;
color: #2266FF;
cursor: pointer;
&:nth-child(1){
margin-right: 16px;
}
}
</style>