| | |
| | | <!-- 消息栏目 --> |
| | | <el-form-item class="optionItem" label="消息栏目:" prop="messageType"> |
| | | <div class="message-item"> |
| | | <el-input v-model="role.messageType" placeholder="请填写消息栏目"></el-input> |
| | | <span>添加栏目</span> |
| | | <div class="message-item__left"> |
| | | <el-select v-model="role.messageType" placeholder="请选择消息栏目"> |
| | | <el-option v-for="item in colList" :key="item.id" :label="item.columnName" |
| | | :value="item.id"> |
| | | </el-option> |
| | | </el-select> |
| | | </div> |
| | | <span class="message-add" @click='dialogCreate = true'> 添加栏目</span> |
| | | </div> |
| | | </el-form-item> |
| | | <!-- 消息标题 --> |
| | | <el-form-item class="optionItems" label="消息标题:" prop="head"> |
| | | <el-select v-model="role.head" placeholder="请选择消息标题"> |
| | | <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id"> |
| | | </el-option> |
| | | </el-select> |
| | | <div class="message-item__left"> |
| | | <el-input v-model="role.head" placeholder="请选择消息标题"></el-input> |
| | | </div> |
| | | </el-form-item> |
| | | <!-- 接收对象 --> |
| | | <el-form-item class="optionItem" label="接收对象:" prop="targetTo"> |
| | | <el-select v-model="role.targetTo" placeholder="请选择接收对象"> |
| | | <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id"> |
| | | </el-option> |
| | | </el-select> |
| | | <!-- <el-input type="textarea" v-model="role.description" placeholder="请输入描述内容200字以内"></el-input> --> |
| | | <div class="message-item__left"> |
| | | <el-select v-model="role.targetTo" placeholder="请选择接收对象"> |
| | | <el-option :value="role.targetTo"> |
| | | <el-tree ref="tree" check-strictly :data="departList" :props="defaultProps" |
| | | show-checkbox @check="handleCheck" default-expand-all node-key="id"> |
| | | </el-tree> |
| | | </el-option> |
| | | </el-select> |
| | | </div> |
| | | </el-form-item> |
| | | <!-- 消息内容 --> |
| | | <el-form-item class="optionItem" label="消息内容:" prop="body"> |
| | | <MyEditor :content="role.body"></MyEditor> |
| | | <MyEditor ref="edit" @getMyBody="getMyBody"></MyEditor> |
| | | <!-- <el-input type="textarea" v-model="role.description" placeholder="请输入描述内容200字以内"></el-input> --> |
| | | </el-form-item> |
| | | <!-- 提醒方式 --> |
| | | <el-form-item class="optionItem" label="提醒方式:" prop="channelCode"> |
| | | <div class="message-item"> |
| | | <el-radio-group v-model="role.channelCode"> |
| | | <el-radio :label="1">站内信</el-radio> |
| | | <el-radio :label="2">邮件</el-radio> |
| | | <el-radio :label="3">短信</el-radio> |
| | | </el-radio-group> |
| | | <span class="message-tip">(短信可用数: 1000条)</span> |
| | | </div> |
| | | <el-radio-group v-model="role.channelCode"> |
| | | <el-radio label="01">站内信</el-radio> |
| | | <el-radio label="02">邮件</el-radio> |
| | | <el-radio label="03">短信</el-radio> |
| | | </el-radio-group> |
| | | <span class="message-tip">(短信可用数: 1000条)</span> |
| | | </el-form-item> |
| | | <el-form-item> |
| | | <div class="optionBtn"> |
| | | <el-button type="primary" class="btn save">保存 |
| | | </el-button> |
| | | <el-button type="primary" class="btn submit">发布 |
| | | <el-button type="primary" @click.native.prevent="handleSubmit" class="btn submit">发布 |
| | | </el-button> |
| | | <el-button type="primary" class="btn submit">预览 |
| | | </el-button> |
| | | <el-button class="btn cancel">重置</el-button> |
| | | <el-button class="btn cancel" @click.native.prevent="handleReset">重置</el-button> |
| | | </div> |
| | | </el-form-item> |
| | | </el-form> |
| | | |
| | | <!-- 新增栏目 --> |
| | | <el-dialog title="添加栏目" :visible.sync="dialogCreate" v-if="dialogCreate" width="60%" |
| | | :before-close="handleConfirmClose" append-to-body> |
| | | <MyColumnAdd @closeDialog="closeDialog"></MyColumnAdd> |
| | | </el-dialog> |
| | | </div> |
| | | </main> |
| | | </div> |
| | | </template> |
| | | <script> |
| | | import MyEditor from '@/components/edit' |
| | | import MyColumnAdd from '@/views/operate/message/mycontrol/createUser' |
| | | export default { |
| | | components: { MyEditor }, |
| | | components: { MyEditor, MyColumnAdd }, |
| | | data() { |
| | | const validateNickname = (rule, value, callback) => { |
| | | if (!value) { |
| | |
| | | } |
| | | }; |
| | | const validateTruename = (rule, value, callback) => { |
| | | if (value) { |
| | | if (value.length !== 0) { |
| | | callback(); |
| | | } else { |
| | | callback(); |
| | | callback(new Error('请选择接收对象')); |
| | | } |
| | | }; |
| | | return { |
| | | role: { |
| | | messageType:'', |
| | | head:'', |
| | | targetTo:'', |
| | | body:'', |
| | | channelCode:1 |
| | | messageType: '', |
| | | head: '', |
| | | targetTo: '', |
| | | targetFrom:null, |
| | | body: '', |
| | | channelCode: '01', |
| | | }, |
| | | createRoleRules: { |
| | | name: [ |
| | | messageType: [ |
| | | { required: true, trigger: "blur", validator: validateNickname }, |
| | | ], |
| | | type: [ |
| | | head: [ |
| | | { required: false, trigger: "blur", validator: validatePass }, |
| | | ], |
| | | description: [ |
| | | targetTo: [ |
| | | { required: false, trigger: "blur", validator: validateTruename }, |
| | | ], |
| | | }, |
| | | colList: [], |
| | | departList: [], |
| | | typeList: [], |
| | | dialogCreate: false, |
| | | defaultProps: { |
| | | children: 'children', |
| | | label: 'departName', |
| | | disabled: function (data, node) { |
| | | if (data.createTime) { |
| | | return !data.leaf |
| | | } |
| | | } |
| | | }, |
| | | checkedList: [] |
| | | } |
| | | }, |
| | | created() { |
| | | this.setColumnList(); |
| | | this.setDepartList(); |
| | | this.getLoginUserInfo(); |
| | | }, |
| | | methods: { |
| | | // 关闭弹窗 |
| | | handleConfirmClose(done) { |
| | | this.$confirm('确认关闭?') |
| | | .then(_ => { |
| | | done(); |
| | | }) |
| | | }, |
| | | // 设置栏目 |
| | | async setColumnList() { |
| | | this.colList = await this.getColumnList(); |
| | | }, |
| | | // 获取栏目 |
| | | async getColumnList() { |
| | | let arr; |
| | | await this.$axios({ |
| | | method: 'get', |
| | | url: 'sccg/message_column/getAllColumn' |
| | | }) |
| | | .then(res => { |
| | | console.log(res); |
| | | arr = res.data; |
| | | }) |
| | | return arr; |
| | | }, |
| | | // 关闭弹窗 |
| | | closeDialog({ flag, index }) { |
| | | this.dialogCreate = flag; |
| | | if (index === 1) { |
| | | // 重新设置栏目 |
| | | this.setColumnList(); |
| | | } |
| | | }, |
| | | // 获取部门树 |
| | | async getDepartList() { |
| | | let arr |
| | | await this.$axios({ |
| | | method: 'get', |
| | | url: 'sccg/depart/tree' |
| | | }) |
| | | .then(res => { |
| | | arr = res.data |
| | | }) |
| | | return arr; |
| | | }, |
| | | // 设置部门树 |
| | | async setDepartList() { |
| | | this.departList = await this.filterDepartList(); |
| | | }, |
| | | // 处理部门树 |
| | | async filterDepartList() { |
| | | let arr = await this.getDepartList(); |
| | | const { setChildren } = this; |
| | | // console.log(setChildren); |
| | | arr.forEach(item => { |
| | | setChildren(item); |
| | | }) |
| | | return arr; |
| | | }, |
| | | // 递归children |
| | | setChildren(obj) { |
| | | if (obj.children !== null) { |
| | | if (obj.children.length !== 0) { |
| | | obj.children.forEach(item => { |
| | | return this.setChildren(item); |
| | | }) |
| | | } |
| | | } else { |
| | | if (obj.userInfoDTOS.length !== 0) { |
| | | obj.children = []; |
| | | obj.userInfoDTOS.forEach(item => { |
| | | obj.children.push({ id: item.userId, departName: item.username }) |
| | | }) |
| | | } |
| | | } |
| | | }, |
| | | // 选中id |
| | | handleCheck(data, node) { |
| | | console.log(data, node); |
| | | this.checkedList = node.checkedKeys; |
| | | this.role.targetTo = node.checkedKeys.length + '人'; |
| | | }, |
| | | // 新建消息 |
| | | handleSubmit() { |
| | | console.log(this.role); |
| | | this.$refs.user.validate((valid) => { |
| | | console.log(valid) |
| | | if (valid) { |
| | | const {role,checkedList} = this; |
| | | this.$axios({ |
| | | method: 'post', |
| | | url: 'sccg/message/sendMessage', |
| | | data: { |
| | | body: role.body, |
| | | channelCode: `${role.channelCode}`, |
| | | head: role.head, |
| | | messageType: role.messageType, |
| | | sendTime: new Date(), |
| | | targetTo: checkedList.join(','), |
| | | targetFrom:`${role.targetFrom}`, |
| | | status:1, |
| | | } |
| | | }) |
| | | .then(res=>{ |
| | | if(res.code === 200){ |
| | | this.$message({ |
| | | type:'success', |
| | | message:'发送成功', |
| | | }) |
| | | this.$emit('closeMyDialog',{flag:false,index:1}); |
| | | } |
| | | }) |
| | | } else { |
| | | return false; |
| | | } |
| | | }) |
| | | }, |
| | | // 获得消息体 |
| | | getMyBody(obj) { |
| | | console.log(obj); |
| | | this.role.body = obj; |
| | | }, |
| | | // 重置表单 |
| | | handleReset(){ |
| | | this.$refs.edit.editor.txt.clear(); |
| | | // this.$refs.edit.wangEditor.txt.html('<p><br></p>') |
| | | this.setDepartList(); |
| | | this.$refs.user.resetFields(); |
| | | }, |
| | | // 获取当前登录用户信息 |
| | | getLoginUserInfo(){ |
| | | const name = sessionStorage.getItem('name'); |
| | | this.$axios({ |
| | | method:'get', |
| | | url:'sccg/admin/info?name='+name, |
| | | }) |
| | | .then(res=>{ |
| | | this.role.targetFrom = res.data.userId |
| | | }) |
| | | } |
| | | }, |
| | | props: [''] |
| | | props: ['closeMyDialog'] |
| | | } |
| | | </script> |
| | | <style lang="scss" scoped> |
| | |
| | | border: 1px solid #17324c; |
| | | } |
| | | |
| | | .message-item__left { |
| | | width: 400px; |
| | | } |
| | | |
| | | .message-add { |
| | | &:hover { |
| | | cursor: pointer; |
| | | } |
| | | } |
| | | |
| | | .el-form-item__content :deep(.el-select) { |
| | | width: 400px; |
| | | } |
| | | :deep(.el-input){ |
| | | |
| | | :deep(.el-input) { |
| | | width: 400px; |
| | | } |
| | | .message-item{ |
| | | |
| | | .message-item { |
| | | display: flex; |
| | | span{ |
| | | |
| | | span { |
| | | margin-left: 20px; |
| | | color: #4b9bb7; |
| | | } |
| | | } |
| | | |
| | | .message-tip { |
| | | margin-left: 20px; |
| | | } |
| | |
| | | } |
| | | |
| | | } |
| | | } |
| | | :deep(.el-select-dropdown){ |
| | | width: 400px; |
| | | min-width: 400px !important; |
| | | } |
| | | } |
| | | </style> |