mes-sdai-admin-backend-ui/src/view/performance/08-timesheet/index.vue

<template>
	<div>
		<!--    左侧树侧形结构-->
		<el-container>
			<layout-sider :resize-directions="['right']" :width="220" style="margin-right: 10px;">
				<div class="JKWTree-tree" style="height: 70vh;">
					<h3>计件工计时单维护</h3>
					<el-tree :data="treeData" highlight-current="true" @node-click="handleNodeClick" />
				</div>

			</layout-sider>
			<el-container>
				<el-main>
					<!-- 按钮 -->
					<div class="gva-table-box">
						<el-form>
							<el-form-item>
								<el-input v-model="searchInfo" placeholder="搜索产品编号或产品名称" clearable style="width: 180px;" />
								<el-button type="primary" icon="Search" class="search" @click="handleSearch" />
								<el-button type="primary" icon="edit" class="bt" @click="handleShowDetail">查改 </el-button>
								<el-button type="primary" icon="plus" class="bt" @click="handleShowAdd">新增 </el-button>
								<el-button type="primary" class="bt" icon="delete" @click="onDel">删除</el-button>

							</el-form-item>
						</el-form>
						<!-- 数据展示 -->
						<el-table ref="table" style="width: 100%" tooltip-effect="dark" :data="tableData" row-key="ID"
							highlight-current-row border show-overflow-tooltip="true" :row-style="{ height: '20px' }"
							:cell-style="{ padding: '0px' }" :header-row-style="{ height: '20px' }"
							:header-cell-style="{ padding: '0px' }" @selection-change="handleSelectionChange"
							@row-dblclick="handleShowDetail" @row-click="Click"
							@current-change="(row, oldRow) => { currentRow = row}">
							<!-- 循环渲染列 -->
							<el-table-column v-for=" column in tableColumns " :key="column.prop" :prop="column.prop"
								:label="column.label" :width="column.width" sortable />

						</el-table>
						<!-- 分页 -->
						<div class="gva-pagination">
							<el-pagination v-model:current-page="page" v-model:page-size="limit"
								layout="total, sizes, prev, pager, next, jumper" :page-sizes="[10, 30, 50, 100]"
								:total="total" @current-change="handleCurrentChange" @size-change="handleSizeChange" />
						</div>
					</div>
					<!-- 弹出框 -->
					<div>
						<!-- 弹出框 -->
						<el-dialog v-model="dialogFormVisible" :before-close="closeDialog"
							:title="type === 'add' ? '新增' : '修改'" destroy-on-close width="800px">
							<!-- <el-scrollbar height="500px"> -->
							<el-form id="detail-form" ref="elFormRef" :model="detailData" label-position="left"
								@keyup="moveFocus">

								<!-- 日期 -->
								<el-row>
									<el-form-item label="日期" prop="name">
										<el-input type="date" max="9999-12-31" v-model="detailData.wgjs_rq"
											style="width: 100px;" />
									</el-form-item>
								</el-row>

								<!-- 标题栏 -->
								<el-row :gutter="10">
									<el-col :span="3"> <span>员工编号</span> </el-col>
									<el-col :span="3"> <span>员工姓名</span> </el-col>
									<el-col :span="3"> <span>计时</span> </el-col>
									<el-col :span="12"> <span>原因备注</span> </el-col>
									<el-col :span="3"> <span>冲月定额</span> </el-col>
								</el-row>

								<!-- 员工1 -->
								<el-row :gutter="5" style="margin-top: 10px;">
									<el-col :span="3">
										<el-input v-model="detailData.wgjs_bh1" :formatter="val => val.toUpperCase()"
											placeholder="Enter回车" />
									</el-col>
									<el-col :span="3">
										<el-input v-model="detailData.name1" readonly />
									</el-col>
									<el-col :span="3">
										<el-input v-model="detailData.wgjs_js1" />
									</el-col>
									<el-col :span="12">
										<el-input v-model="detailData.wgjs_yy1" />
									</el-col>
									<el-col :span="3">
										<el-select v-model="detailData.wgjs_冲定额1">
											<el-option label="" value="" />
											<el-option label="是" value="是" />
										</el-select>
									</el-col>
								</el-row>

								<!-- 员工2 -->
								<el-row :gutter="5" style="margin-top: 10px;">
									<el-col :span="3">
										<el-input v-model="detailData.wgjs_bh2" :formatter="val => val.toUpperCase()"
											placeholder="Enter回车" />
									</el-col>
									<el-col :span="3">
										<el-input v-model="detailData.name2" readonly />
									</el-col>
									<el-col :span="3">
										<el-input v-model="detailData.wgjs_js2" />
									</el-col>
									<el-col :span="12">
										<el-input v-model="detailData.wgjs_yy2" />
									</el-col>
									<el-col :span="3">
										<el-select v-model="detailData.wgjs_冲定额2">
											<el-option label="" value="" />
											<el-option label="是" value="是" />
										</el-select>
									</el-col>
								</el-row>

								<!-- 员工3 -->
								<el-row :gutter="5" style="margin-top: 10px;">
									<el-col :span="3">
										<el-input v-model="detailData.wgjs_bh3" :formatter="val => val.toUpperCase()"
											placeholder="Enter回车" />
									</el-col>
									<el-col :span="3">
										<el-input v-model="detailData.name3" readonly />
									</el-col>
									<el-col :span="3">
										<el-input v-model="detailData.wgjs_js3" />
									</el-col>
									<el-col :span="12">
										<el-input v-model="detailData.wgjs_yy3" />
									</el-col>
									<el-col :span="3">
										<el-select v-model="detailData.wgjs_冲定额3">
											<el-option label="" value="" />
											<el-option label="是" value="是" />
										</el-select>
									</el-col>
								</el-row>

								<!-- 员工4 -->
								<el-row :gutter="5" style="margin-top: 10px;">
									<el-col :span="3">
										<el-input v-model="detailData.wgjs_bh4" :formatter="val => val.toUpperCase()"
											placeholder="Enter回车" />
									</el-col>
									<el-col :span="3">
										<el-input v-model="detailData.name4" readonly />
									</el-col>
									<el-col :span="3">
										<el-input v-model="detailData.wgjs_js4" />
									</el-col>
									<el-col :span="12">
										<el-input v-model="detailData.wgjs_yy4" />
									</el-col>
									<el-col :span="3">
										<el-select v-model="detailData.wgjs_冲定额4">
											<el-option label="" value="" />
											<el-option label="是" value="是" />
										</el-select>
									</el-col>
								</el-row>

								<!-- 员工5 -->
								<el-row :gutter="5" style="margin-top: 10px;">
									<el-col :span="3">
										<el-input v-model="detailData.wgjs_bh5" :formatter="val => val.toUpperCase()"
											placeholder="Enter回车" />
									</el-col>
									<el-col :span="3">
										<el-input v-model="detailData.name5" readonly />
									</el-col>
									<el-col :span="3">
										<el-input v-model="detailData.wgjs_js5" />
									</el-col>
									<el-col :span="12">
										<el-input v-model="detailData.wgjs_yy5" />
									</el-col>
									<el-col :span="3">
										<el-select v-model="detailData.wgjs_冲定额5">
											<el-option label="" value="" />
											<el-option label="是" value="是" />
										</el-select>
									</el-col>
								</el-row>

								<!-- 员工6 -->
								<el-row :gutter="5" style="margin-top: 10px;">
									<el-col :span="3">
										<el-input v-model="detailData.wgjs_bh6" :formatter="val => val.toUpperCase()"
											placeholder="Enter回车" />
									</el-col>
									<el-col :span="3">
										<el-input v-model="detailData.name6" readonly />
									</el-col>
									<el-col :span="3">
										<el-input v-model="detailData.wgjs_js6" />
									</el-col>
									<el-col :span="12">
										<el-input v-model="detailData.wgjs_yy6" />
									</el-col>
									<el-col :span="3">
										<el-select v-model="detailData.wgjs_冲定额6">
											<el-option label="" value="" />
											<el-option label="是" value="是" />
										</el-select>
									</el-col>
								</el-row>

							</el-form>

							<template #footer>
								<div class="dialog-footer">
									<el-button @click="closeDialog">取 消</el-button>
									<el-button type="primary" @click="enterDialog">确 定</el-button>
								</div>
							</template>
						</el-dialog>

					</div>
					
					<!-- 员工选择 -->
					<el-dialog v-model="dialogSelectVisible_Yg" title="选择" destroy-on-close width="300px"
						@keydown="selectGX_Yg($event)">
						<el-table tooltip-effect="dark" :data="selectData_Yg" row-key="ID" highlight-current-row="true"
							border style="width:100%" @row-dblclick="handleSelectClick_Yg" ref="table_Yg">
							<el-table-column prop="员工编号" label="员工编号" width="100" />
							<el-table-column prop="ygxm" label="员工姓名" width="200" />
						</el-table>
					</el-dialog>

				</el-main>
			</el-container>
		</el-container>
	</div>
</template>

<script setup>
	// 全量引入格式化工具 请按需保留
	import {
		Layout,
		LayoutContent,
		LayoutHeader,
		LayoutSider
	} from '@arco-design/web-vue'
	import {
		ElMessage,
		ElMessageBox,
		dayjs
	} from 'element-plus'
	import {
		ref,
		reactive
	} from 'vue'
	import {
		getSide,
		getTable,
		getDetail,
		updateData,
		getLocate,
		createData,
		getYg,
		deleteData
	} from '@/api/mes_api_gty/timesheet'
	import {
		useUserStore
	} from '@/pinia/modules/user'
	const userStore = useUserStore()
	const sys_id = '[' + userStore.userInfo.userName + '/' + userStore.userInfo.nickName + ']'
	defineOptions({
		name: '08Timesheet'
	})

	// 侧边栏数据请求
	const treeData = reactive([])
	const getSideData = async () => {
		const response = await getSide()
		if (response.code === 0) {
			const transformedData = response.data.map(item => ({
				label: item.date,
				params: {
					date: item.date.substring(0, 4) + '-' + item.date.substring(4),
				},
			}))
			treeData.splice(0, treeData.length, ...transformedData)
		}
	}
	getSideData()

	const elFormRef = ref()
	// const elSearchFormRef = ref()

	// ============== 表格页面 ==============
	const tableColumns = [{
			prop: 'wgjs_rq',
			label: '日期',
			width: 100
		},
		{
			prop: 'wgjs_bh1',
			label: '员工编号1',
			width: 120
		},
		{
			prop: 'name1',
			label: '姓名1',
			width: 100
		},
		{
			prop: 'department',
			label: '所在部门',
			width: 120
		},
		{
			prop: 'wgjs_js1',
			label: '计时1',
			width: 100
		},
		{
			prop: 'wgjs_yy1',
			label: '原因1',
			width: 100
		},
		{
			prop: 'wgjs_bh2',
			label: '员工编号2',
			width: 120
		},
		{
			prop: 'name2',
			label: '姓名2',
			width: 100
		},
		{
			prop: 'wgjs_js2',
			label: '计时2',
			width: 100
		},
		{
			prop: 'wgjs_yy2',
			label: '原因2',
			width: 100
		},
		{
			prop: 'wgjs_bh3',
			label: '员工编号3',
			width: 120
		},
		{
			prop: 'name3',
			label: '姓名3',
			width: 100
		},
		{
			prop: 'wgjs_js3',
			label: '计时3',
			width: 100
		},
		{
			prop: 'wgjs_yy3',
			label: '原因3',
			width: 100
		},
		{
			prop: 'wgjs_bh4',
			label: '员工编号4',
			width: 120
		},
		{
			prop: 'name4',
			label: '姓名4',
			width: 100
		},
		{
			prop: 'wgjs_js4',
			label: '计时4',
			width: 100
		},
		{
			prop: 'wgjs_yy4',
			label: '原因4',
			width: 100
		},
		{
			prop: 'wgjs_bh5',
			label: '员工编号5',
			width: 120
		},
		{
			prop: 'name5',
			label: '姓名5',
			width: 120
		},
		{
			prop: 'wgjs_js5',
			label: '计时5',
			width: 100
		},
		{
			prop: 'wgjs_yy5',
			label: '原因5',
			width: 100
		},
		{
			prop: 'wgjs_bh6',
			label: '员工编号6',
			width: 120
		},
		{
			prop: 'name6',
			label: '姓名6',
			width: 100
		},
		{
			prop: 'wgjs_js6',
			label: '计时6',
			width: 100
		},
		{
			prop: 'wgjs_yy6',
			label: '原因6',
			width: 100
		},
	]
	const table = ref(null)
	const tableData = reactive([])
	const page = ref(1)
	const total = ref(0)
	const limit = ref(10)
	const searchInfo = ref('')
	const params = {
		date: '',
		search: '',
		type: '',
	}

	const getTableData = async (params) => {
		const response = await getTable(params)
		if (response.code === 0) {
			total.value = response.data.total
			tableData.splice(0, tableData.length, ...response.data.rows)
			table.value?.setCurrentRow(tableData[0])
		}
	}

	// 搜索
	const getLocateData = async (params) => {
		const res = await getLocate(params)
		if (res.code === 0) {
			total.value = res.data.total
			tableData.splice(0, tableData.length, ...res.data.rows)
			table.value?.setCurrentRow(tableData[0])
		}
	}

	// 分页设置
	const handleSizeChange = () => {
		switch (params.type) {
			case 'getTableData':
				getTableData({
					date: params.date,
					page: page.value.toString(),
					limit: limit.value.toString()
				})
				break
			case 'getLocateData':
				getLocateData({
					date: params.date.replace('-', ''),
					search: params.search,
					page: page.value.toString(),
					limit: limit.value.toString()
				})
				break
			default:
				break
		}
	}

	// 页面跳转
	const handleCurrentChange = () => {
		switch (params.type) {
			case 'getTableData':
				getTableData({
					date: params.date,
					page: page.value.toString(),
					limit: limit.value.toString()
				})
				break
			case 'getLocateData':
				getLocateData({
					date: params.date.replace('-', ''),
					search: params.search,
					page: page.value.toString(),
					limit: limit.value.toString()
				})
				break
			default:
				break
		}
	}

	const handleNodeClick = (node, check) => {
		if (node.params) {
			params.date = node.params.date
			params.type = 'getTableData'
			page.value = 1
			handleCurrentChange()
		}
	}

	// 搜索
	function handleSearch() {
		params.search = searchInfo.value
		params.type = 'getLocateData'
		page.value = 1
		handleCurrentChange()
	}

	// ============== 详情页面 ==============
	const detailData = reactive({})
	const currentRow = ref()

	// 行为控制标记（弹窗内部需要增还是改）
	const type = ref('')
	// 弹窗控制标记
	const dialogFormVisible = ref(false)

	// 查改
	const handleShowDetail = async () => {
		type.value = 'update'
		const {
			UniqId
		} = currentRow.value
		const res = await getDetail({
			UniqId
		})
		if (res.code === 0) {
			Object.assign(detailData, res.data)
			// dialogFormVisible.value = true
			showDialog()
		}
	}

	// 新增数据
	const handleShowAdd = () => {
		type.value = 'add';
		if (!currentRow.value) {
			detailData.wgjs_rq = '';

			detailData.wgjs_bh1 = '';
			detailData.wgjs_js1 = '';
			detailData.wgjs_yy1 = '';
			detailData.wgjs_冲定额1 = '';

			detailData.wgjs_bh2 = '';
			detailData.wgjs_js2 = '';
			detailData.wgjs_yy2 = '';
			detailData.wgjs_冲定额2 = '';

			detailData.wgjs_bh3 = '';
			detailData.wgjs_js3 = '';
			detailData.wgjs_yy3 = '';
			detailData.wgjs_冲定额3 = '';

			detailData.wgjs_bh4 = '';
			detailData.wgjs_js4 = '';
			detailData.wgjs_yy4 = '';
			detailData.wgjs_冲定额4 = '';

			detailData.wgjs_bh5 = '';
			detailData.wgjs_js5 = '';
			detailData.wgjs_yy5 = '';
			detailData.wgjs_冲定额5 = '';

			detailData.wgjs_bh6 = '';
			detailData.wgjs_js6 = '';
			detailData.wgjs_yy6 = '';
			detailData.wgjs_冲定额6 = '';

		} else {
			Object.assign(detailData, currentRow.value)
		}

		// dialogFormVisible.value = true
		const date = dayjs().format('YYYY-MM-DD')
		detailData.wgjs_rq = date
		showDialog()
	}

	// 更新数据
	const enterDialog = async () => {
		if (type.value === 'update') {
			updateDetailData()
		} else if (type.value === 'add') {
			addDetailData()
		}
	}
	// 新增
	const addDetailData = async () => {
		const restoredData = {
			wgjs_rq: detailData.wgjs_rq,

			wgjs_bh1: detailData.wgjs_bh1,
			wgjs_js1: detailData.wgjs_js1,
			wgjs_yy1: detailData.wgjs_yy1,
			wgjs_冲定额1: detailData.wgjs_冲定额1,

			wgjs_bh2: detailData.wgjs_bh2,
			wgjs_js2: detailData.wgjs_js2,
			wgjs_yy2: detailData.wgjs_yy2,
			wgjs_冲定额2: detailData.wgjs_冲定额2,

			wgjs_bh3: detailData.wgjs_bh3,
			wgjs_js3: detailData.wgjs_js3,
			wgjs_yy3: detailData.wgjs_yy3,
			wgjs_冲定额3: detailData.wgjs_冲定额3,

			wgjs_bh4: detailData.wgjs_bh4,
			wgjs_js4: detailData.wgjs_js4,
			wgjs_yy4: detailData.wgjs_yy4,
			wgjs_冲定额4: detailData.wgjs_冲定额4,

			wgjs_bh5: detailData.wgjs_bh5,
			wgjs_js5: detailData.wgjs_js5,
			wgjs_yy5: detailData.wgjs_yy5,
			wgjs_冲定额5: detailData.wgjs_冲定额5,

			wgjs_bh6: detailData.wgjs_bh6,
			wgjs_js6: detailData.wgjs_js6,
			wgjs_yy6: detailData.wgjs_yy6,
			wgjs_冲定额6: detailData.wgjs_冲定额6,
		}
		restoredData.sys_id = sys_id;
		const res = await createData(restoredData)
		if (res.code === 0) {
			ElMessage({
				type: 'success',
				message: '新增成功',
			})
			//刷新
			if (params.date != '') {
				getTableData({
					date: params.date,
					page: page.value.toString(),
					limit: limit.value.toString()
				})
			}
			getSideData()
			dialogFormVisible.value = false
		}
	}
	// 修改
	const updateDetailData = async () => {
		const obj = detailData
		for (let i = 1; i <= 6; i++) {
			delete obj[`name${i}`]
		}
		const res = await updateData(obj)
		if (res.code === 0) {
			ElMessage({
				type: 'success',
				message: '更新成功'
			})
			params.type = 'getTableData'
			if (params.date != '') {
				getTableData({
					date: params.date,
					page: page.value.toString(),
					limit: limit.value.toString()
				})
			}
			dialogFormVisible.value = false
		}
	}

	// 开启弹窗
	const showDialog = () => {
		dialogFormVisible.value = true
		// 在 setTimeout 中获取元素，确保在 DOM 渲染完毕后执行
		setTimeout(() => {
			formElements = document.getElementById('detail-form').elements
			formElements[0].focus()
		}, 0)
	}

	// 关闭弹窗
	const closeDialog = () => {
		dialogFormVisible.value = false
	}

	let index_Yg = '';
	let formElements
	const moveFocus = async (event) => {
		const index = Array.from(formElements).indexOf(event.target)
		index_Yg = index
		const key = event.key
		event.preventDefault()

		// 切换焦点
		const focusNext = (step) => {
			const nextIndex = (index + step + formElements.length) % formElements.length
			formElements[nextIndex].focus()
			formElements[nextIndex].select()
		}

		switch (index) {
			case 1:
			case 6:
			case 11:
			case 16:
			case 21:
			case 26:
				if (key === 'ArrowDown') {
					formElements[index + 1].focus()
				} else if (key === 'ArrowUp') {
					formElements[index - 1].focus()
				} else if (key === 'Enter') {
					formElements[index + 1].focus()

					const sczl_bh = formElements[index]?.value
					if (sczl_bh === '') {
						detailData[`name${(index - 1) / 5 + 1}`] = ''
						break
					}
					const response = await getYg({
						sczl_bh
					})
					if (response.code == 0) {
						if (response.data.length == 1) {
							detailData[`name${(index - 1) / 5 + 1}`] = response.data[0].ygxm;
							detailData[`wgjs_bh${(index - 1) / 5 + 1}`] = response.data[0].员工编号;
						} else if (response.data.length > 1) {
							selectData_Yg.splice(0, selectData_Yg.length, ...response.data)
							setGXCurrent_Yg(selectData_Yg[0])
							dialogSelectVisible_Yg.value = true
						} else {
							ElMessage({
								type: 'warning',
								message: '未查询到该员工'
							})
							detailData[`name${(index - 1) / 5 + 1}`] = '';
							detailData[`wgjs_bh${(index - 1) / 5 + 1}`] = '';
						}
					} else {
						detailData[`name${(index - 1) / 5 + 1}`] = '';
						detailData[`wgjs_bh${(index - 1) / 5 + 1}`] = '';
					}
					//     if (res.code === 0) {
					// //       const { data: { 员工编号,ygxm }} = res
					// // console.log((index - 1) / 5 + 1)
					//       detailData[`name${(index - 1) / 5 + 1}`] = res.data[0].ygxm
					// detailData[`wgjs_bh${(index - 1) / 5 + 1}`] = res.data[0].员工编号
					//     }
				}
				break

			default:
				if (key === 'ArrowDown') {
					focusNext(1)
				} else if (key === 'ArrowUp') {
					focusNext(-1)
				} else if (key === 'Enter') {
					focusNext(1)
				}
				break
		}
	}
	const dialogSelectVisible_Yg = ref(false)
	const selectData_Yg = reactive([])
	// 处理选择框
	const handleSelectClick_Yg = (row, column, event) => {
		detailData[`name${(index_Yg - 1) / 5 + 1}`] = row.ygxm
		detailData[`wgjs_bh${(index_Yg - 1) / 5 + 1}`] = row.员工编号
		dialogSelectVisible_Yg.value = false
	}
	const currentIndex_Yg = ref(0);
	const GXCurrent_Yg = ref(0);
	const selectGX_Yg = (event) => {
		if (event.keyCode === 40) { // 向下箭头
			if (currentIndex_Yg.value < selectData_Yg.length - 1) {
				currentIndex_Yg.value++;
				setGXCurrent_Yg(selectData_Yg[currentIndex_Yg.value]);
			} else {
				currentIndex_Yg.value = 0;
				setGXCurrent_Yg(selectData_Yg[currentIndex_Yg.value]); // 到达最后一行时回到第一行			
			}
		} else if (event.keyCode === 38) { // 向上箭头
			if (currentIndex_Yg.value > 0) {
				currentIndex_Yg.value--;
				setGXCurrent_Yg(selectData_Yg[currentIndex_Yg.value]);
			} else {
				currentIndex_Yg.value = selectData_Yg.length - 1;
				setGXCurrent_Yg(selectData_Yg[currentIndex_Yg.value]); // 到达第一行时回到最后一行
			}
		} else if (event.keyCode === 13) { // 回车键
			dialogSelectVisible_Yg.value = false;
		}
	}
	const table_Yg = ref()
	const setGXCurrent_Yg = (row) => {
		setTimeout(() => {
			table_Yg.value?.setCurrentRow(row)
			detailData[`name${(index_Yg - 1) / 5 + 1}`] = row.ygxm
			detailData[`wgjs_bh${(index_Yg - 1) / 5 + 1}`] = row.员工编号
		})
	}

	//删除
	const onDel = (value) => {
		if (currentRow.value == undefined) {
			ElMessage({
				type: 'warning',
				message: '未选中记录',
			})
			return
		}
		ElMessageBox.confirm(
			`确认删除这条数据么?`,
			'警告', {
				confirmButtonText: '确认',
				cancelButtonText: '取消',
				type: 'warning',
			}
		).then(async () => {
			const response = await deleteData({
				UniqId: currentRow.value.UniqId
			});
			if (response.code === 0) {
				ElMessage({
					type: 'success',
					message: '删除成功',
				})
				//刷新页面
				getTableData({
					date: params.date,
					page: page.value.toString(),
					limit: limit.value.toString()
				})
			}
		})
	}
</script>

<style scoped>
	.JKWTree-container {
		display: flex;
	}

	.JKWTree-tree {
		width: 100%;
		background-color: #fff;
		padding: 10px;
		margin-right: 20px;
	}

	.JKWTree-tree h3 {
		font-size: 15px;
		font-weight: 700;
		margin: 10px 0;
	}

	.JKWTree-content {
		flex: 1;
	}

	/* 选中某行时的背景色 */
	:deep(.el-table__body tr.current-row)>td {
		background: #ff80ff !important;
	}
</style>

<style scoped>
	:deep(.el-table td .cell) {
		line-height: 25px !important;
	}

	:deep(.el-tabs__header) {
		margin-bottom: 0;
	}

	.search {
		margin-left: 0px !important;
		margin-right: 10px !important;
	}

	.bt {
		margin-left: 2px !important;
		padding: 3px !important;
		font-size: 12px;
	}

	.el-tabs__header {
		margin: 0px !important;
	}

	.gva-table-box {
		padding: 0px !important;
	}

	.mab {
		margin-bottom: 5px;
	}
</style>