目录代码整合
This commit is contained in:
		
							
								
								
									
										69
									
								
								packages/wxwork/AppClientMassTextin/AppClientMassTextin.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										69
									
								
								packages/wxwork/AppClientMassTextin/AppClientMassTextin.vue
									
									
									
									
									
										Normal 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> | ||||
							
								
								
									
										342
									
								
								packages/wxwork/AppClientMassTextin/components/NewClientMass.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										342
									
								
								packages/wxwork/AppClientMassTextin/components/NewClientMass.vue
									
									
									
									
									
										Normal 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> | ||||
							
								
								
									
										141
									
								
								packages/wxwork/AppClientMassTextin/components/TableList.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										141
									
								
								packages/wxwork/AppClientMassTextin/components/TableList.vue
									
									
									
									
									
										Normal 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> | ||||
		Reference in New Issue
	
	Block a user