~fy/sccg_ui.git

			@@ -7,24 +7,33 @@
			<!-- 消息栏目 -->
			<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" multiple :placeholder="checkNum">
			<el-option :value="role.targetTo">
			<el-tree ref="tree" :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">
			@@ -33,14 +42,12 @@
			</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="1">站内信</el-radio>
			<el-radio :label="2">邮件</el-radio>
			<el-radio :label="3">短信</el-radio>
			</el-radio-group>
			<span class="message-tip">(短信可用数: 1000条)</span>
			</el-form-item>
			<el-form-item>
			<div class="optionBtn">
			@@ -54,15 +61,20 @@
			</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) {
			@@ -87,11 +99,11 @@
			};
			return {
			role: {
			messageType:'',
			head:'',
			targetTo:'',
			body:'',
			channelCode:1
			messageType: '',
			head: '',
			targetTo: '',
			body: '',
			channelCode: 1,
			},
			createRoleRules: {
			name: [
			@@ -104,12 +116,112 @@
			{ required: false, trigger: "blur", validator: validateTruename },
			],
			},
			colList: [],
			departList: [],
			checkNum: '请选择接收对象',
			typeList: [],
			dialogCreate: false,
			defaultProps: {
			children: 'children',
			label: 'departName',
			disabled: function (data, node) {
			if (data.createTime) {
			return !data.leaf
			}
			}
			},
			}
			},
			created() {
			this.setColumnList();
			this.setDepartList();
			},
			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(node.checkedKeys);
			// this.checkList = node.checkedKeys;
			// if(node.checkedKeys.length === 1){
			// this.role.targetTo = data.departName;
			// }
			// let per = node.checkedKeys.length;
			// per ===0 ? this.checkNum="请选择接收对象" : this.checkNum = ''+per;
			}
			},
			props: ['']
			}
			@@ -140,19 +252,33 @@
			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;
			}
			@@ -197,10 +323,6 @@
			}

			}
			}
			:deep(.el-select-dropdown){
			width: 400px;
			min-width: 400px !important;
			}
			}
			</style>