epmet-oper-gov/src/views/modules/workSys/noticeList.vue

<template>
	<div class="div_main">
		<div class="div_search">
			<el-form :inline="true" :model="formData" ref="ref_searchform" :label-width="'110px'">
				<div>
					<el-form-item label="发布渠道" prop="publishDitch">
						<el-select v-model="formData.publishDitch" placeholder="请选择" clearable>
							<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
						</el-select>
					</el-form-item>

					<el-form-item label="发布范围" prop="orgId">
						<el-cascader
							class="customer_cascader"
							ref="myCascader"
							v-model="formData.orgId"
							:options="orgOptions"
							filterable
							clearable
							:props="orgOptionProps"
							:show-all-levels="false"
							@change="handleChangeAgency"
						></el-cascader>
					</el-form-item>
					<el-form-item label="发布时间" label-width="110px" prop="timeRange">
						<el-date-picker
							v-model="timeRange"
							size="small"
							clearable
							type="daterange"
							@change="handleTimeChange"
							format="yyyy-MM-dd"
							value-format="yyyy-MM-dd HH:mm"
							range-separator="至"
							start-placeholder="开始时间" 
							end-placeholder="结束时间"
						></el-date-picker>
					</el-form-item>

					<el-button style="margin-left:30px" size="small" class="diy-button--search" @click="handleSearch">查询</el-button>
					<el-button style="margin-left:10px" size="small" class="diy-button--reset" @click="resetSearch">重置</el-button>
				</div>
			</el-form>
		</div>
		<div class="div_table">
			<div class="div_btn"><el-button style="" class="diy-button--add" size="small" @click="add()">发布</el-button></div>
			<div style="padding: 0 10px">
				<el-table
					class="table"
					ref="ref_table"
					:data="tableData"
					border
					:height="tableHeight"
					v-loading="tableLoading"
					:header-cell-style="{ background: '#2195FE', color: '#FFFFFF' }"
					style="width: 100%"
				>
					<el-table-column label="序号" header-align="center" align="center" type="index" width="50"></el-table-column>

					<el-table-column prop="content"   header-align="center" align="center" label="发布内容" :show-overflow-tooltip="true" ></el-table-column>
					<el-table-column prop="publishDitch" header-align="center" align="center" label="发布渠道" width="110">
						<template slot-scope="scope">
							<span v-if="scope.row.publishDitch == 0">专属APP</span>
						</template>
					</el-table-column>
					<el-table-column prop="publishRangeName" header-align="center" align="center" label="发布范围"  :show-overflow-tooltip="true"></el-table-column>
					<el-table-column prop="publishTime" header-align="center" align="center" label="发布时间" width="160"></el-table-column>
					<el-table-column prop="count" align="center" width="110" label="操作" :show-overflow-tooltip="true">
						<template slot-scope="scope">
							<el-button size="small" type="text" @click="show(scope.row)">查看</el-button>
						</template>
					</el-table-column>
				</el-table>
				<div>
					<el-pagination
						@size-change="handleSizeChange"
						@current-change="handleCurrentChange"
						:current-page.sync="pageNo"
						:page-sizes="[20, 50, 100, 200]"
						:page-size="pageSize"
						layout="sizes, prev, pager, next, total"
						:total="total"
					></el-pagination>
				</div>
			</div>
		</div>
		<div><addForm v-if="dialogVisible" :dialogVisible="dialogVisible" :pageType="pageType" :detailId="detailId" @handleClose="handleClose" /></div>
	</div>
</template>

<script>
import { requestPost } from '@/js/dai/request';
import { mapGetters } from 'vuex';
import { Loading } from 'element-ui'; // 引入Loading服务
import addForm from './addFormNotice';
let loading; // 加载动画
export default {
	data() {
		return {
			dialogVisible: false,
			loading: false,
			total: 0,
			pageSize: 20,
			pageNo: 0,
			tableLoading: false,

			agencyId: '',

			timeRange: [],
			formData: {
				category: '',
				operatorName: '', //姓名
				operatorMobile: '', //手机号
				startTime: '', //检测开始时间yyyy-MM-dd HH:mm
				endTime: '' //检测结束时间yyyy-MM-dd HH:mm
			},
			options: [
				{
					value: 0,
					label: '专属app'
				}
			],
			orgOptions: [], //组织
			orgOptionProps: {
				//组织
				multiple: false,
				value: 'agencyId',
				label: 'agencyName',
				children: 'subAgencyList',
				emitPath: false,
				checkStrictly: true
			},
			tableData: []
		};
	},
	components: { addForm },

	async mounted() {
		//获取场所类型

		const { user } = this.$store.state;
		this.agencyId = user.agencyId;
		this.getOrgTreeList();
		await this.loadTable();
	},
	computed: {
		tableHeight() {
			return this.$store.state.inIframe ? this.clientHeight - 330 + this.iframeHeight : this.clientHeight - 330;
		},

		...mapGetters(['clientHeight', 'iframeHeight'])
	},
	activated() {
		this.$refs['ref_table'].doLayout();
	},

	methods: {
		resetForm() {
			for (const n in this.formData) {
				if (typeof this.formData[n] == 'object') this.formData[n] = [];
				else this.formData[n] = '';
			}
			this.orgType = '';
			this.handleSearch();
		},
		add() {
			this.dialogVisible = true;
			this.pageType = 'add';
			this.detailId = '';
			// this.detailData = row;
		},
		show(row) {
			this.dialogVisible = true;
			this.pageType = 'view';
			this.detailId = row.messageId;
			this.detailData = row;
		},
		handleClose() {
			this.dialogVisible = false;
			this.pageType = 'list';
			this.detailId = '';
			this.loadTable();
		},
		getOrgTreeList() {
			const { user } = this.$store.state;
			this.$http
				.post('/gov/org/customeragency/agencygridtree', {})
				.then(({ data: res }) => {
					if (res.code !== 0) {
						return this.$message.error(res.msg);
					} else {
						console.log('获取组织树成功', res.data);
						// let { agencyList, subAgencyList } = res.data;
						// const _arr = [{ ...agencyList, subAgencyList: [...subAgencyList] }];
						// this.orgOptions = this.deepTree(_arr);
						this.orgOptions = [];
						this.orgOptions.push(res.data);
					}
				})
				.catch(() => {
					return this.$message.error('网络错误');
				});
		},
		handleChangeAgency(val) {
			let obj = this.$refs['myCascader'].getCheckedNodes()[0].data;
			if (obj) {
				this.orgType = obj.level === 'grid' ? 'grid' : 'agency';
			} else {
				this.orgType = '';
			}
		},
		async handleSearch() {
			await this.loadTable();
			this.$nextTick(() => {
				this.$refs.ref_table.doLayout(); // 解决表格错位
			});
		},

		async loadTable() {
			this.tableLoading = true;

			const url = '/message/organization/message/list';
			// const url = "http://yapi.elinkservice.cn/mock/245/epmetuser/icNat/natlist"
			let params = {
				pageSize: this.pageSize,
				pageNo: this.pageNo,
				...this.formData
			};

			const { data, code, msg } = await requestPost(url, params);

			if (code === 0) {
				this.total = data.total;
				this.tableData = data.list;

				this.tableData.forEach(item => {});
			} else {
				this.$message.error(msg);
			}
			this.tableLoading = false;
		},

		handleTimeChange(time) {
			if (time) {
				this.formData.startDate = time[0];
				this.formData.endDate = time[1];
			} else {
				this.formData.startDate = '';
				this.formData.endDate = '';
			}
		},

		//重置搜索条件
		resetSearch() {
			this.formData = {
				publishDitch: '', //渠道
				orgId: '', //范围
				startDate: '', //检测开始时间yyyy-MM-dd HH:mm
				endDate: '' //检测结束时间yyyy-MM-dd HH:mm
			};
			this.timeRange = [];
			this.pageNo = 0;
			this.loadTable();
		},

		handleSizeChange(val) {
			this.pageSize = val;
			this.pageNo = 1;
			this.loadTable();
		},
		handleCurrentChange(val) {
			this.pageNo = val;
			this.loadTable();
		},
		// 开启加载动画
		startLoading() {
			loading = Loading.service({
				lock: true, // 是否锁定
				text: '正在加载……', // 加载中需要显示的文字
				background: 'rgba(0,0,0,.7)' // 背景颜色
			});
		},
		// 结束加载动画
		endLoading() {
			// clearTimeout(timer);
			if (loading) {
				loading.close();
			}
		}
	}
};
</script>
<style lang="scss" scoped>
@import '@/assets/scss/modules/management/epidemic.scss';
</style>