新增导出excel

src/components/jc/routineMonitorqt.vue

@@ -1,385 +1,460 @@
-<template>
-
-	<div style="width: 100%">
-
-			<div slot="header" class="clearfix">
-				<el-breadcrumb separator-class="el-icon-arrow-right">
-					<el-breadcrumb-item>首页</el-breadcrumb-item>
-					<el-breadcrumb-item>牵头单位</el-breadcrumb-item>
-					<el-breadcrumb-item>任务列表</el-breadcrumb-item>
-				</el-breadcrumb>
-			</div>
-			<!-- 头部搜索栏 -->
-			<div class="form">
-				<el-row :gutter="50" style="margin-right: 0px;">
-					<el-form style="display: flex; flex-flow: row nowrap;">
-						<el-form-item label="年度" class="select" style="margin-left: -0.3%;">
-							<el-date-picker v-model="queryInfo.year" value-format="yyyy"
-								type="year" clearable />
-						</el-form-item>
-						<el-form-item label="任务状态" class="select">
-							<el-select v-model="queryInfo.ispublic">
-								<el-option v-for="item in taskstatus" :key="item.value" :label="item.label"
-									:value="item.value">
-								</el-option>
-							</el-select>
-						</el-form-item>
-						<el-form-item label="任务时间" class="select">
-							<el-date-picker v-model="queryInfo.starttime" align="right" type="date"
-								:picker-options="pickerOptions" lable clearable />
-						</el-form-item>
-						<el-form-item label="--" class="select" style="margin-left: -3.5%;">
-							<el-date-picker v-model="queryInfo.endtime" align="right" type="date"
-								:picker-options="pickerOptions" clearable />
-						</el-form-item>
-						<el-form-item label="任务名称" class="select">
-							<el-input v-model="queryInfo.task_name"></el-input>
-						</el-form-item>
-						<!-- 查询 -->
-						<el-button style="height: 2.5rem;margin-left: 1%;" type="success"  size="mini" @click="searchData()">查询</el-button>
-						<!-- 重置 -->
-						<el-button style="height: 2.5rem;margin-left: 0.5%;" type="success"  size="mini" @click="reset()">重置</el-button>
-					</el-form>
-				</el-row>
-			</div>
-			<!--  头部钮区域-->
-			<!-- <el-row :gutter="90" style="margin-right: 0px;">
-				<div style="display: flex;flex-direction: row;float: right;">
-					<el-button type="primary" size="small" plain icon="el-icon-plus" @click="add()">新增</el-button>
-					<el-button type="primary" size="small" plain icon="el-icon-edit-outline" @click="ispublic()">发布</el-button>
-					<el-button type="primary" size="small" plain icon="el-icon-scissors" @click="repeal()">废止</el-button>
-					<el-button type="primary" size="small" plain icon="el-icon-delete" @click="delArray()">删除</el-button> -->
-					<!-- <el-button type="primary" size="small" plain icon="el-icon-download">导出</el-button> -->
-				<!-- </div>
-			</el-row> -->
-			<!--  表格数据区域-->
-			<el-table ref="multipleTable" :data="tableData" border stripe highlight-current-row style="width: 100%"
-				:row-style="rowStyle" :cell-style="cellStyle" @selection-change="handleSelectionChange">
-				<el-table-column type="selection" width="50" align="center"></el-table-column>
-				<el-table-column label="序号" width="50px" align="center">
-					<template slot-scope="scope">
-						{{ scope.$index+1 }}
-					</template>
-				</el-table-column>
-
-				<el-table-column :key="table.label" v-for="table in tableHeader" :label="table.label" :prop="table.prop"
-					align="center" :width="table.width" :fixed="table.fixed" />
-				<el-table-column prop="level" label="任务优先级" align="center" width="100">
-					<template slot-scope="scope">
-						<el-tag type="success" v-if="scope.row.level==0">一般</el-tag>
-						<el-tag type="warning" v-if="scope.row.level==1">紧急</el-tag>
-						<el-tag type="danger" v-if="scope.row.level==2">特急</el-tag>
-					</template>
-				</el-table-column>
-				<el-table-column prop="file_url" label="附件" align="center" width="60">
-					<template slot-scope="scope">
-						<span v-if="scope.row.file_url==null">--</span>
-						<el-link v-else type="primary" :href="scope.row.file_url">下载</el-link>
-					</template>
-				</el-table-column>
-				<el-table-column prop="ispublic" label="任务状态"  align="center">
-				<template slot-scope="scope">
-					<el-tag type="success" v-if="scope.row.ispublic==1">已发布</el-tag>
-					<el-tag type="danger" v-if="scope.row.ispublic==2">废止</el-tag>
-					<el-tag type="info" v-if="scope.row.ispublic==3">已结束，未完成</el-tag>
-					<el-tag type="success" v-if="scope.row.ispublic==4">已结束，已完成</el-tag>
-					<el-tag type="warning" v-if="scope.row.ispublic==5">执行中</el-tag>
-				</template>
-			</el-table-column>
-				<el-table-column label="操作" align="center" fixed="right">
-					<!-- 操作按钮区域的作用域插槽 -->
-					<template slot-scope="scope">
-						<!-- <el-button type="warning" plain  size="small" @click="bindDialogShow1(scope.row)">绑定模型</el-button> -->
-						<el-button type="success"  size="mini" @click="runtask(scope.row.id)">执行任务</el-button>
-					</template>
-				</el-table-column>
-			</el-table>
-			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
-				:current-page="queryInfo.currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="queryInfo.pageSize"
-				layout="total, sizes, prev, pager, next, jumper" :total="total">
-			</el-pagination>
-
-	</div>
-
-</template>
-
-<script>
-	export default {
-		name: '',
-		data() {
-			return {
-				total: 0,
-				cellStyle: {
-					padding: 2 + 'px'
-				},
-				rowStyle: {
-					height: 35 + 'px'
-				},
-				tableHeader: [{
-						label: '任务名称',
-						prop: 'task_name'
-						// fixed: 'left'
-					},
-					{
-						label: '年度',
-						prop: 'year'
-						// fixed: 'left'
-					}, {
-						label: '文件号',
-						prop: 'filenum',
-						// fixed: 'left'
-					},
-					{
-						label: '开始时间',
-						prop: 'starttime'
-					},
-					{
-						label: '结束时间',
-						prop: 'endtime'
-					},
-					{
-						label: '创建者',
-						prop: 'releaser'
-					}
-
-				],
-				// 数据表格数据
-				tableData: [],
-				// 批量删除选中数据
-				multipleSelection: [],
-				queryInfo:{
-					pageSize:10,
-					pageNum:1,
-					currentPage:1,
-					year:'',
-					ispublic:'',
-					starttime:'',
-					endtime:'',
-					task_name:'',
-					task_class:'例行监测'
-				},
-				// 任务状态选项
-				taskstatus: [{
-					value: '',
-					label: '全部'
-				}, {
-					value: '1',
-					label: '已发布'
-				}, {
-					value: '2',
-					label: '已废止'
-				}, {
-					value: '3',
-					label: '已结束，未完成'
-				}, {
-					value: '4',
-					label: '已结束，已完成'
-				}, {
-					value: '5',
-					label: '执行中'
-				}],
-				// 日期选择器快捷选项
-				pickerOptions: {
-					disabledDate(time) {
-						return time.getTime() > Date.now();
-					},
-					shortcuts: [{
-						text: '今天',
-						onClick(picker) {
-							picker.$emit('pick', new Date());
-						}
-					}, {
-						text: '昨天',
-						onClick(picker) {
-							const date = new Date();
-							date.setTime(date.getTime() - 3600 * 1000 * 24);
-							picker.$emit('pick', date);
-						}
-					}, {
-						text: '一周前',
-						onClick(picker) {
-							const date = new Date();
-							date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
-							picker.$emit('pick', date);
-						}
-					}]
-				},
-				bindDialogShow:false,
-				options:[],
-				bindForm:{}
-			}
-		},
-
-		mounted: function() {
-			this.gettaskList()
-		},
-		methods: {
-			handleSizeChange(val) {
-				this.queryInfo.pageSize = val;
-				console.log(`每页 ${val} 条`);
-			},
-			handleCurrentChange(val) {
-				this.queryInfo.pageNum = val;
-				console.log(`当前页: ${val}`);
-				this.gettaskList()
-			},
-
-				// 批量选中
-			handleSelectionChange(val) {
-				this.multipleSelection = val;
-				console.log(this.multipleSelection)
-			},
-
-			// 搜索
-			async searchData() {
-				console.log(this.queryInfo)
-				this.queryInfo.pageNum = 1
-				this.gettaskList()
-			},
-
-			// 重置
-			reset(){
-				this.queryInfo={
-					year:'',
-					task_name:'',
-					starttime:'',
-					endtime:'',
-					ispublic:'',
-					pageSize:10,
-					pageNum:1,
-					task_class:'例行监测'
-				}
-				this.gettaskList()
-			},
-
-			add() {
-				// this.$router.push('')
-			},
-			// 获取任务列表
-			async gettaskList() {
-				console.log(this.queryInfo)
-				for (var key in this.queryInfo) {
-					if (this.queryInfo[key] == '') {
-						delete this.queryInfo[key]
-					}
-				}
-				const {
-					data: res
-				} = await this.$http.post(
-					"getTaskListTest", this.queryInfo
-				);
-				console.log(res)
-				this.tableData = res.data.rows
-				this.total = res.data.total
-			},
-
-			// 获取分页数据
-			async choseModel() {
-				const result = await this.$http.post('getPesticidesList', this.queryInfo)
-				// 判断业务逻辑
-				if (result.data.code == 0) {
-					this.pesticidesList = result.data.data.rows
-					this.total = result.data.data.total
-				}
-			},
-			// 执行任务
-			runtask(id) {
-				// console.log(id)
-				this.$router.push({
-					name: 'setTask',
-					params: {
-						id:id
-					}
-				})
-			}
-
-		},
-	}
-</script>
-
-<style lang="less" scoped>
-	.el-breadcrumb {
-		margin-bottom: 20px;
-	}
-	.el-table {
-		align-items: center;
-		margin-top: 25px;
-	}
-
-	/deep/ .el-col {
-		padding-right: 0 !important;
-	}
-
-	/deep/ .el-radio-group label {
-		width: 180px;
-		margin-right: 10px;
-	}
-
-	.el-pagination {
-		margin-top: 25px;
-	}
-
-	// .el-cascader {
-	// 	width: 290px;
-	// }
-
-	.el-select {
-		// width: 210px;
-		height: 100%;
-	}
-
-	.select {
-		display: flex;
-		flex-direction: row;
-		margin-left: 0.6%;
-	}
-
-	.dialogItem /deep/ .el-dialog__body {
-		padding: 15px 12px 0;
-		color: #606266;
-		font-size: .875rem;
-		word-break: break-all;
-	}
-
-	// .el-form-item {
-	// 	margin-left: 0.8%;
-	// }
-	
-
-	// .labelItem /deep/ 
-	/deep/ .el-form-item__label {
-		width: 5.625rem;
-		margin-right: -1%;
-		text-align: right;
-		vertical-align: middle;
-		// float: left;
-		font-size: .8125rem;
-		color: #606266;
-		// line-height: 40px;
-		padding: 0% 4% 0% 0%;
-		-webkit-box-sizing: border-box;
-		box-sizing: border-box;
-	}
-
-	.cell {
-		display: flex;
-		flex-direction: row;
-	}
-	
-	.footer {
-		padding: 1%;
-		text-align: center;
-	}
-
-	.el-form{
-		width: 80%;
-	}
-
-
-	.el-date-editor.el-input, .el-date-editor.el-input__inner{
-		width:100%;
-	}
-	// .el-form-item__content{
-	// 	margin-left: 0;
-	// }
-</style>
+<template>
+
+	<div style="width: 100%">
+
+			<div slot="header" class="clearfix">
+				<el-breadcrumb separator-class="el-icon-arrow-right">
+					<el-breadcrumb-item>首页</el-breadcrumb-item>
+					<el-breadcrumb-item>牵头单位</el-breadcrumb-item>
+					<el-breadcrumb-item>任务列表</el-breadcrumb-item>
+
+				</el-breadcrumb>
+			</div>
+			<!-- 头部搜索栏 -->
+			<el-row :gutter="50" style="margin-right: 0px;">
+				<el-form style="display: flex; flex-direction: row;">
+					<el-form-item label="年度" class="select" size="mini">
+						<el-date-picker v-model="queryInfo.year" style="width: 110px;" value-format="yyyy"
+							type="year" clearable />
+					</el-form-item>
+					<el-form-item label="任务状态" class="select" size="mini">
+						<el-select v-model="queryInfo.ispublic" style="width: 110px;">
+							<el-option v-for="item in taskstatus" :key="item.value" :label="item.label"
+								:value="item.value">
+							</el-option>
+						</el-select>
+					</el-form-item>
+					<el-form-item label="任务时间" class="select" size="mini">
+						<el-date-picker v-model="queryInfo.starttime" style="width: 180px;" align="right" type="date"
+							:picker-options="pickerOptions" clearable />
+					</el-form-item>
+					<el-form-item label="--" class="select" style="margin-left: 10px;" size="mini">
+						<el-date-picker v-model="queryInfo.endtime" style="width: 180px;" align="right" type="date"
+							:picker-options="pickerOptions" clearable />
+					</el-form-item>
+					<el-form-item label="任务名称" class="select" size="mini">
+						<el-input v-model="queryInfo.task_name"></el-input>
+					</el-form-item>
+					<!-- 查询 -->
+					<el-button style="height: 40px;margin-left: 10px;" type="success"  size="mini" @click="searchData()">查询</el-button>
+					<!-- 重置 -->
+					<el-button style="height: 40px;margin-left: 5px;" type="success"  size="mini" @click="reset()">重置</el-button>
+				</el-form>
+			</el-row>
+			<!--  头部钮区域-->
+			<el-row :gutter="90" style="margin-right: 0px;">
+				<div style="display: flex;flex-direction: row;float: right;">
+				<!-- 	<el-button type="primary" size="small" plain icon="el-icon-plus" @click="add()">新增</el-button>
+					<el-button type="primary" size="small" plain icon="el-icon-edit-outline" @click="ispublic()">发布</el-button>
+					<el-button type="primary" size="small" plain icon="el-icon-scissors" @click="repeal()">废止</el-button>
+					<el-button type="primary" size="small" plain icon="el-icon-delete" @click="delArray()">删除</el-button> -->
+					<el-button type="primary" size="small" plain icon="el-icon-download" @click="exportData">导出Excel</el-button>
+				</div>
+			</el-row>
+			<!--  表格数据区域-->
+			<el-table ref="multipleTable" :data="tableData" border stripe highlight-current-row style="width: 100%"
+				:row-style="rowStyle" :cell-style="cellStyle" @selection-change="handleSelectionChange">
+				<el-table-column type="selection" width="50"></el-table-column>
+				<el-table-column label="序号" width="50px">
+					<template slot-scope="scope">
+						{{ scope.$index+1 }}
+					</template>
+				</el-table-column>
+
+				<el-table-column :key="table.label" v-for="table in tableHeader" :label="table.label" :prop="table.prop"
+					align="center" :width="table.width" :fixed="table.fixed" />
+				<el-table-column prop="level" label="任务优先级" align="center" width="100">
+					<template slot-scope="scope">
+						<el-tag type="success" v-if="scope.row.level==0">一般</el-tag>
+						<el-tag type="warning" v-if="scope.row.level==1">紧急</el-tag>
+						<el-tag type="danger" v-if="scope.row.level==2">特急</el-tag>
+					</template>
+				</el-table-column>
+				<el-table-column prop="file_url" label="附件" align="center" width="60">
+					<template slot-scope="scope">
+						<span v-if="scope.row.file_url==null">--</span>
+						<el-link v-else type="primary" :href="scope.row.file_url">下载</el-link>
+					</template>
+				</el-table-column>
+				<el-table-column prop="ispublic" label="任务状态"  align="center">
+				<template slot-scope="scope">
+					<el-tag type="success" v-if="scope.row.ispublic==1">已发布</el-tag>
+					<el-tag type="danger" v-if="scope.row.ispublic==2">废止</el-tag>
+					<el-tag type="info" v-if="scope.row.ispublic==3">已结束，未完成</el-tag>
+					<el-tag type="success" v-if="scope.row.ispublic==4">已结束，已完成</el-tag>
+					<el-tag type="warning" v-if="scope.row.ispublic==5">执行中</el-tag>
+				</template>
+			</el-table-column>
+				<el-table-column label="操作" align="center" fixed="right">
+					<!-- 操作按钮区域的作用域插槽 -->
+					<template slot-scope="scope">
+						<!-- <el-button type="warning" plain  size="small" @click="bindDialogShow1(scope.row)">绑定模型</el-button> -->
+						<el-button type="success"  size="mini" @click="runtask(scope.row.id)">执行任务</el-button>
+					</template>
+				</el-table-column>
+			</el-table>
+			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
+				:current-page="queryInfo.currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="queryInfo.pageSize"
+				layout="total, sizes, prev, pager, next, jumper" :total="total">
+			</el-pagination>
+
+	</div>
+
+</template>
+
+<script>
+		const qee = require('qf-export-excel')
+		const HeadersList = [{
+				title: '任务名称',
+				key: 'task_name'
+			}, {
+				title: '年度',
+				key: 'year'
+			},
+			{
+				title: '文件号',
+				key: 'filenum'
+			}, {
+				title: '开始时间',
+				key: 'starttime'
+			}, {
+				title: '结束时间',
+				key: 'endtime'
+			}, {
+				title: '创建者',
+				key: 'releaser'
+			}, {
+				title: '任务优先级',
+				key: 'level'
+			}, {
+				title: '任务状态',
+				key: 'ispublic'
+			}
+		]
+	export default {
+		name: '',
+		data() {
+			return {
+				total: 0,
+				cellStyle: {
+					padding: 2 + 'px'
+				},
+				rowStyle: {
+					height: 35 + 'px'
+				},
+				tableHeader: [{
+						label: '任务名称',
+						prop: 'task_name'
+						// fixed: 'left'
+					},
+					{
+						label: '年度',
+						prop: 'year'
+						// fixed: 'left'
+					}, {
+						label: '文件号',
+						prop: 'filenum',
+						// fixed: 'left'
+					},
+					{
+						label: '开始时间',
+						prop: 'starttime'
+					},
+					{
+						label: '结束时间',
+						prop: 'endtime'
+					},
+					{
+						label: '创建者',
+						prop: 'releaser'
+					}
+
+				],
+				// 数据表格数据
+				tableData: [],
+				// 批量删除选中数据
+				multipleSelection: [],
+				queryInfo:{
+					pageSize:10,
+					pageNum:1,
+					currentPage:1,
+					year:'',
+					ispublic:'',
+					starttime:'',
+					endtime:'',
+					task_name:'',
+					task_class:'例行监测'
+				},
+				// 任务状态选项
+				taskstatus: [{
+					value: '',
+					label: '全部'
+				}, {
+					value: '1',
+					label: '已发布'
+				}, {
+					value: '2',
+					label: '已废止'
+				}, {
+					value: '3',
+					label: '已结束，未完成'
+				}, {
+					value: '4',
+					label: '已结束，已完成'
+				}, {
+					value: '5',
+					label: '执行中'
+				}],
+				// 日期选择器快捷选项
+				pickerOptions: {
+					disabledDate(time) {
+						return time.getTime() > Date.now();
+					},
+					shortcuts: [{
+						text: '今天',
+						onClick(picker) {
+							picker.$emit('pick', new Date());
+						}
+					}, {
+						text: '昨天',
+						onClick(picker) {
+							const date = new Date();
+							date.setTime(date.getTime() - 3600 * 1000 * 24);
+							picker.$emit('pick', date);
+						}
+					}, {
+						text: '一周前',
+						onClick(picker) {
+							const date = new Date();
+							date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
+							picker.$emit('pick', date);
+						}
+					}]
+				},
+				bindDialogShow:false,
+				options:[],
+				bindForm:{}
+			}
+		},
+
+		mounted: function() {
+			this.gettaskList()
+		},
+		methods: {
+			handleSizeChange(val) {
+				this.queryInfo.pageSize = val;
+				console.log(`每页 ${val} 条`);
+			},
+			handleCurrentChange(val) {
+				this.queryInfo.pageNum = val;
+				console.log(`当前页: ${val}`);
+				this.gettaskList()
+			},
+
+				// 批量选中
+			handleSelectionChange(val) {
+				this.multipleSelection = val;
+				console.log(this.multipleSelection)
+			},
+
+			// 搜索
+			async searchData() {
+				console.log(this.queryInfo)
+				this.queryInfo.pageNum = 1
+				this.gettaskList()
+			},
+
+			// 重置
+			reset(){
+				this.queryInfo={
+					year:'',
+					task_name:'',
+					starttime:'',
+					endtime:'',
+					ispublic:'',
+					pageSize:10,
+					pageNum:1,
+					task_class:'例行监测'
+				}
+				this.gettaskList()
+			},
+
+			add() {
+				// this.$router.push('')
+			},
+			// 获取任务列表
+			async gettaskList() {
+				console.log(this.queryInfo)
+				for (var key in this.queryInfo) {
+					if (this.queryInfo[key] == '') {
+						delete this.queryInfo[key]
+					}
+				}
+				const {
+					data: res
+				} = await this.$http.post(
+					"getTaskListTest", this.queryInfo
+				);
+				console.log(res)
+				this.tableData = res.data.rows
+				this.total = res.data.total
+			},
+
+			// 获取分页数据
+			async choseModel() {
+				const result = await this.$http.post('getPesticidesList', this.queryInfo)
+				// 判断业务逻辑
+				if (result.data.code == 0) {
+					this.pesticidesList = result.data.data.rows
+					this.total = result.data.data.total
+				}
+			},
+			// 导出Excel
+			async exportData() {
+			
+				// for (var key in this.exportInfo) {
+				// 	if (this.exportInfo[key] == '') {
+				// 		delete this.exportInfo[key]
+				// 	}
+				// }
+			
+				let exportList = []
+					exportList = this.tableData
+					
+					for (let i = 0; i < exportList.length; i++) {
+						if (exportList[i].level == '0') {
+							exportList[i].level = '一般'
+						} else if (exportList[i].level == '1')  {
+							exportList[i].level = '紧急'
+						}else{
+							exportList[i].level = '特急'
+						}
+						if (exportList[i].ispublic == '1') {
+							exportList[i].ispublic = '已发布'
+						} else if(exportList[i].ispublic == '2')  {
+							exportList[i].ispublic = '废止'
+						}else if(exportList[i].ispublic == '3') {
+							exportList[i].ispublic = '已结束，未完成'
+						}else if(exportList[i].ispublic == '4') {
+							exportList[i].ispublic = '已结束，已完成'
+						}else if(exportList[i].ispublic == '5') {
+							exportList[i].ispublic = '执行中'
+						}
+					}
+				// 导出表格的表头设置
+				// let allColumns = exportList
+				var columnNames = []
+				var columnValues = []
+				// var columns = []
+				require.ensure([], () => {
+					const {
+						export_json_to_excel
+					} = require('@/vendor/Export2Excel.js')
+			
+					for (var i = 0; i < HeadersList.length; i++) {
+						columnNames[i] = HeadersList[i].title
+						columnValues[i] = HeadersList[i].key
+					}
+					const tHeader = columnNames
+					const filterVal = columnValues
+					// console.log(columns)
+					const list = exportList
+					const data = this.formatJson(filterVal, list)
+					export_json_to_excel(tHeader, data, '例行监测任务')
+				
+				})
+			},
+			formatJson(filterVal, jsonData) {
+				return jsonData.map(v => filterVal.map(j => v[j]))
+			},
+			// 执行任务
+			runtask(id) {
+				// console.log(id)
+				this.$router.push({
+					name: 'setTask',
+					params: {
+						id:id
+					}
+				})
+			}
+
+		},
+	}
+</script>
+
+<style lang="less" scoped>
+	.el-breadcrumb {
+		margin-bottom: 20px;
+	}
+	.el-table {
+		align-items: center;
+		margin-top: 25px;
+	}
+
+	/deep/ .el-col {
+		padding-right: 0 !important;
+	}
+
+	/deep/ .el-radio-group label {
+		width: 180px;
+		margin-right: 10px;
+	}
+
+	.el-pagination {
+		margin-top: 25px;
+	}
+
+	// .el-cascader {
+	// 	width: 290px;
+	// }
+
+	.el-select {
+		width: 210px;
+		height: 100%;
+	}
+
+	.select {
+		display: flex;
+		flex-direction: row;
+		margin-left: 10px;
+	}
+
+	.dialogItem /deep/ .el-dialog__body {
+		padding: 15px 12px 0;
+		color: #606266;
+		font-size: 14px;
+		word-break: break-all;
+	}
+
+	.el-form-item {
+		margin-bottom: 30px;
+		padding-left: 18px;
+	}
+
+	.labelItem /deep/ .el-form-item__label {
+		// width: 80px;
+		text-align: center;
+		vertical-align: middle;
+		float: left;
+		font-size: 13px;
+		color: #606266;
+		// line-height: 40px;
+		padding: 0 2px 0 0;
+		-webkit-box-sizing: border-box;
+		box-sizing: border-box;
+	}
+
+	.cell {
+		display: flex;
+		flex-direction: row;
+	}
+	
+	.footer {
+		padding: 10px;
+		text-align: center;
+	}
+
+	// .el-form-item__content{
+	// 	margin-left: 0;
+	// }
+</style>