<script setup>
|
import { ref, onMounted, onBeforeUnmount } from 'vue'
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
import request from '@/utils/request'
|
|
// 加载初始数据
|
onMounted(() => {
|
loadYieldData()
|
loadUtilizationData()
|
loadQuantityData()
|
})
|
|
// 关闭页面停止定时器
|
onBeforeUnmount(() => {
|
// 清理工作
|
})
|
|
// 处理实时数据更新
|
const handleYieldUpdate = (data) => {
|
const index = yieldData.value.findIndex(item => item.id === data.id)
|
if (index > -1) {
|
yieldData.value[index] = { ...data, editing: false, originalData: { ...data } }
|
} else {
|
yieldData.value.unshift({ ...data, editing: false, originalData: { ...data } })
|
}
|
}
|
|
const handleUtilizationUpdate = (data) => {
|
const index = utilizationData.value.findIndex(item => item.id === data.id)
|
if (index > -1) {
|
utilizationData.value[index] = { ...data, editing: false, originalData: { ...data } }
|
} else {
|
utilizationData.value.unshift({ ...data, editing: false, originalData: { ...data } })
|
}
|
}
|
|
const handleQuantityUpdate = (data) => {
|
const index = quantityData.value.findIndex(item => item.id === data.id)
|
if (index > -1) {
|
quantityData.value[index] = { ...data, editing: false, originalData: { ...data } }
|
} else {
|
quantityData.value.unshift({ ...data, editing: false, originalData: { ...data } })
|
}
|
}
|
|
|
// 当前激活的标签页
|
const activeTab = ref('yield')
|
|
// 单小时产量数据
|
const yieldFormData = ref({
|
recordDate: new Date().toISOString().slice(0, 10),
|
lineNo: '',
|
yieldvalue: null
|
})
|
const yieldData = ref([])
|
const yieldLoading = ref(false)
|
|
// 利用率数据
|
const utilizationFormData = ref({
|
recordDate: new Date().toISOString().slice(0, 10),
|
lineNo: '',
|
utilizationRate: null
|
})
|
const utilizationData = ref([])
|
const utilizationLoading = ref(false)
|
|
// 在制量
|
const locationOptions = [
|
{ label: '半成品', value: '半成品' },
|
{ label: '7014库位', value: '7014库位' },
|
{ label: '7016库位', value: '7016库位' }
|
]
|
|
// 在制量数据
|
const quantityFormData = ref({
|
recordDate: new Date().toISOString().slice(0, 10),
|
locationCode: '',
|
quantity: null
|
})
|
const quantityData = ref([])
|
const quantityLoading = ref(false)
|
|
// 日期格式化
|
const formatDate = (dateStr) => {
|
if (!dateStr) return '';
|
|
// 解析日期字符串，确保按照中国时区（GMT+8）处理
|
const [datePart] = dateStr.split(' '); // 只取日期部分，忽略时间部分
|
return datePart; // 直接返回日期部分，如"2025-04-16"
|
}
|
|
// 检查日期和生产线/产品是否重复
|
const checkExists = (date, code, data, excludeId = null) => {
|
return data.some(item => {
|
const itemDate = item.recordTime ? formatDate(item.recordTime) : item.recordDate;
|
return itemDate === date &&
|
(item.lineNo === code || item.locationCode === code) &&
|
(!excludeId || item.id !== excludeId);
|
});
|
}
|
|
// 加载数据
|
const loadYieldData = async () => {
|
yieldLoading.value = true
|
try {
|
const res = await request({
|
url: '/deviceInteraction/yield/listYield',
|
method: 'post',
|
data: { page: 1, pageSize: 50 }
|
})
|
if (res.code === 200 && res.data?.records) {
|
yieldData.value = res.data.records.map(item => {
|
// 转换日期格式
|
const formattedDate = item.recordTime ? formatDate(item.recordTime) : '';
|
return {
|
...item,
|
recordDate: formattedDate, // 添加前端使用的recordDate字段
|
editing: false,
|
originalData: { ...item, recordDate: formattedDate }
|
};
|
});
|
}
|
} catch (error) {
|
ElMessage.error('单小时产量数据加载失败')
|
console.error(error)
|
} finally {
|
yieldLoading.value = false
|
}
|
}
|
|
const loadUtilizationData = async () => {
|
utilizationLoading.value = true
|
try {
|
const res = await request({
|
url: '/deviceInteraction/utilization/listUtilization',
|
method: 'post',
|
data: { page: 1, pageSize: 50 }
|
})
|
if (res.code === 200 && res.data?.records) {
|
utilizationData.value = res.data.records.map(item => {
|
// 转换日期格式
|
const formattedDate = item.recordTime ? formatDate(item.recordTime) : '';
|
return {
|
...item,
|
recordDate: formattedDate, // 添加前端使用的recordDate字段
|
editing: false,
|
originalData: { ...item, recordDate: formattedDate }
|
};
|
});
|
}
|
} catch (error) {
|
ElMessage.error('利用率数据加载失败')
|
console.error(error)
|
} finally {
|
utilizationLoading.value = false
|
}
|
}
|
|
const loadQuantityData = async () => {
|
quantityLoading.value = true
|
try {
|
const res = await request({
|
url: '/deviceInteraction/quantity/listQuantity',
|
method: 'post',
|
data: { page: 1, pageSize: 50 }
|
})
|
if (res.code === 200 && res.data?.records) {
|
quantityData.value = res.data.records.map(item => {
|
// 转换日期格式
|
const formattedDate = item.recordTime ? formatDate(item.recordTime) : '';
|
return {
|
...item,
|
recordDate: formattedDate, // 添加前端使用的recordDate字段
|
editing: false,
|
originalData: { ...item, recordDate: formattedDate }
|
};
|
});
|
}
|
} catch (error) {
|
ElMessage.error('在制量数据加载失败')
|
console.error(error)
|
} finally {
|
quantityLoading.value = false
|
}
|
}
|
|
// 提交表单
|
const handleYieldSubmit = async () => {
|
if (!yieldFormData.value.recordDate || !yieldFormData.value.lineNo || yieldFormData.value.yieldvalue === null) {
|
ElMessage.error('请填写完整信息')
|
return
|
}
|
|
if (checkExists(yieldFormData.value.recordDate, yieldFormData.value.lineNo, yieldData.value)) {
|
ElMessage.error('该日期和生产线的记录已存在')
|
return
|
}
|
|
try {
|
const recordTimeStr = `${yieldFormData.value.recordDate} 00:00:00`;
|
|
await request({
|
url: '/deviceInteraction/yield/addYield',
|
method: 'post',
|
data: {
|
...yieldFormData.value,
|
recordTime: recordTimeStr
|
}
|
})
|
ElMessage.success('添加成功')
|
resetYieldForm()
|
loadYieldData() // 刷新数据
|
} catch (error) {
|
ElMessage.error('添加失败')
|
console.error(error)
|
}
|
}
|
|
const handleUtilizationSubmit = async () => {
|
if (!utilizationFormData.value.recordDate || !utilizationFormData.value.lineNo || utilizationFormData.value.utilizationRate === null) {
|
ElMessage.error('请填写完整信息')
|
return
|
}
|
|
if (checkExists(utilizationFormData.value.recordDate, utilizationFormData.value.lineNo, utilizationData.value)) {
|
ElMessage.error('该日期和生产线的记录已存在')
|
return
|
}
|
|
try {
|
const recordTimeStr = `${utilizationFormData.value.recordDate} 00:00:00`;
|
|
await request({
|
url: '/deviceInteraction/utilization/addUtilization',
|
method: 'post',
|
data: {
|
...utilizationFormData.value,
|
recordTime: recordTimeStr
|
}
|
})
|
ElMessage.success('添加成功')
|
resetUtilizationForm()
|
loadUtilizationData() // 刷新数据
|
} catch (error) {
|
ElMessage.error('添加失败')
|
console.error(error)
|
}
|
}
|
|
const handleQuantitySubmit = async () => {
|
if (!quantityFormData.value.recordDate || !quantityFormData.value.locationCode || quantityFormData.value.quantity === null) {
|
ElMessage.error('请填写完整信息')
|
return
|
}
|
|
if (checkExists(quantityFormData.value.recordDate, quantityFormData.value.locationCode, quantityData.value)) {
|
ElMessage.error('该日期和产品的记录已存在')
|
return
|
}
|
|
try {
|
// 拼接日期时间字符串，确保是当天的00:00:00
|
const dateStr = quantityFormData.value.recordDate;
|
const recordTimeStr = `${dateStr} 00:00:00`;
|
|
|
const locationCode = quantityFormData.value.locationCode;
|
|
await request({
|
url: '/deviceInteraction/quantity/addQuantity',
|
method: 'post',
|
data: {
|
...quantityFormData.value,
|
recordTime: recordTimeStr
|
}
|
})
|
ElMessage.success('添加成功')
|
resetQuantityForm()
|
loadQuantityData() // 刷新数据
|
} catch (error) {
|
ElMessage.error('添加失败')
|
console.error(error)
|
}
|
}
|
|
// 重置表单
|
const resetYieldForm = () => {
|
yieldFormData.value = {
|
recordDate: new Date().toISOString().slice(0, 10),
|
lineNo: '',
|
yieldvalue: null
|
}
|
}
|
|
const resetUtilizationForm = () => {
|
utilizationFormData.value = {
|
recordDate: new Date().toISOString().slice(0, 10),
|
lineNo: '',
|
utilizationRate: null
|
}
|
}
|
|
const resetQuantityForm = () => {
|
quantityFormData.value = {
|
recordDate: new Date().toISOString().slice(0, 10),
|
locationCode: '',
|
quantity: null
|
}
|
}
|
|
// 表格编辑操作
|
const handleYieldEdit = async (index, row) => {
|
if (!row.editing) {
|
row.editing = true
|
return
|
}
|
|
if (!row.recordDate || !row.lineNo || row.yieldvalue === null) {
|
ElMessage.error('请填写完整信息')
|
return
|
}
|
|
try {
|
// 转换日期格式为服务器需要的格式 yyyy-MM-dd HH:mm:ss
|
const date = new Date(row.recordDate);
|
const year = date.getFullYear();
|
const month = String(date.getMonth() + 1).padStart(2, '0');
|
const day = String(date.getDate()).padStart(2, '0');
|
const recordTimeStr = `${year}-${month}-${day} 00:00:00`;
|
|
await request({
|
url: '/deviceInteraction/yield/updateYield',
|
method: 'post',
|
data: {
|
id: row.id,
|
lineNo: row.lineNo,
|
yieldvalue: row.yieldvalue,
|
recordTime: recordTimeStr
|
}
|
})
|
row.editing = false
|
row.originalData = { ...row }
|
ElMessage.success('修改成功')
|
loadYieldData() // 刷新数据
|
} catch (error) {
|
ElMessage.error('修改失败')
|
console.error(error)
|
}
|
}
|
|
const handleUtilizationEdit = async (index, row) => {
|
if (!row.editing) {
|
row.editing = true
|
return
|
}
|
|
if (!row.recordDate || !row.lineNo || row.utilizationRate === null) {
|
ElMessage.error('请填写完整信息')
|
return
|
}
|
|
try {
|
// 转换日期格式为服务器需要的格式 yyyy-MM-dd HH:mm:ss
|
const date = new Date(row.recordDate);
|
const year = date.getFullYear();
|
const month = String(date.getMonth() + 1).padStart(2, '0');
|
const day = String(date.getDate()).padStart(2, '0');
|
const recordTimeStr = `${year}-${month}-${day} 00:00:00`;
|
|
await request({
|
url: '/deviceInteraction/utilization/updateUtilization',
|
method: 'post',
|
data: {
|
id: row.id,
|
lineNo: row.lineNo,
|
utilizationRate: row.utilizationRate,
|
recordTime: recordTimeStr
|
}
|
})
|
row.editing = false
|
row.originalData = { ...row }
|
ElMessage.success('修改成功')
|
loadUtilizationData() // 刷新数据
|
} catch (error) {
|
ElMessage.error('修改失败')
|
console.error(error)
|
}
|
}
|
|
const handleQuantityEdit = async (index, row) => {
|
if (!row.editing) {
|
row.editing = true
|
return
|
}
|
|
if (!row.recordDate || !row.locationCode || row.quantity === null) {
|
ElMessage.error('请填写完整信息')
|
return
|
}
|
|
try {
|
// 拼接日期时间字符串，确保是当天的00:00:00
|
const dateStr = row.recordDate;
|
const recordTimeStr = `${dateStr} 00:00:00`;
|
|
// 获取用户友好名称
|
const locationCode = row.locationCode;
|
|
await request({
|
url: '/deviceInteraction/quantity/updateQuantity',
|
method: 'post',
|
data: {
|
id: row.id,
|
locationCode: locationCode,
|
quantity: row.quantity,
|
recordTime: recordTimeStr
|
}
|
})
|
row.editing = false
|
row.originalData = { ...row }
|
ElMessage.success('修改成功')
|
loadQuantityData() // 刷新数据
|
} catch (error) {
|
ElMessage.error('修改失败')
|
console.error(error)
|
}
|
}
|
|
// 取消编辑
|
const cancelEdit = (row) => {
|
Object.assign(row, row.originalData)
|
row.editing = false
|
}
|
|
// 删除操作
|
const handleDelete = async (index, data, type) => {
|
try {
|
await ElMessageBox.confirm('确认删除该记录？', '警告', {
|
type: 'warning'
|
})
|
const id = data[index].id
|
|
if (type === 'yieldvalue') {
|
await request({
|
url: '/deviceInteraction/yield/deleteYield',
|
method: 'post',
|
data: { id: id }
|
})
|
} else if (type === 'utilization') {
|
await request({
|
url: '/deviceInteraction/utilization/deleteUtilization',
|
method: 'post',
|
data: { id: id }
|
})
|
} else if (type === 'quantity') {
|
await request({
|
url: '/deviceInteraction/quantity/deleteQuantity',
|
method: 'post',
|
data: { id: id }
|
})
|
}
|
|
ElMessage.success('删除成功')
|
|
// 刷新相应数据
|
if (type === 'yieldvalue') loadYieldData()
|
else if (type === 'utilization') loadUtilizationData()
|
else if (type === 'quantity') loadQuantityData()
|
|
} catch (error) {
|
if (error !== 'cancel') {
|
ElMessage.error('删除失败')
|
console.error(error)
|
}
|
}
|
}
|
</script>
|
|
<template>
|
<el-container>
|
<el-main>
|
<el-tabs v-model="activeTab">
|
<!-- 单小时产量标签页 -->
|
<el-tab-pane label="单小时产量" name="yield">
|
<el-form :inline="true" :model="yieldFormData" label-width="100px" class="form-container">
|
<el-form-item label="日期">
|
<el-date-picker
|
v-model="yieldFormData.recordDate"
|
type="date"
|
value-format="YYYY-MM-DD"
|
placeholder="选择日期"
|
style="width: 180px"
|
/>
|
</el-form-item>
|
<el-form-item label="生产线">
|
<el-select v-model="yieldFormData.lineNo" placeholder="选择生产线" style="width: 180px">
|
<el-option label="一线" value="一线" />
|
<el-option label="二线" value="二线" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="产量">
|
<el-input-number
|
v-model="yieldFormData.yieldvalue"
|
:precision="2"
|
:step="0.1"
|
:min="0"
|
controls-position="right"
|
style="width: 180px"
|
/>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" @click="handleYieldSubmit">提交</el-button>
|
<el-button @click="resetYieldForm">重置</el-button>
|
</el-form-item>
|
</el-form>
|
|
<el-table :data="yieldData" v-loading="yieldLoading" style="width: 100%">
|
<el-table-column prop="recordDate" label="日期" width="180">
|
<template #default="scope">
|
<el-date-picker
|
v-if="scope.row.editing"
|
v-model="scope.row.recordDate"
|
type="date"
|
value-format="YYYY-MM-DD"
|
style="width: 140px"
|
/>
|
<span v-else>{{ scope.row.recordDate }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="lineNo" label="生产线" width="180">
|
<template #default="scope">
|
<el-select v-if="scope.row.editing" v-model="scope.row.lineNo" style="width: 140px">
|
<el-option label="一线" value="一线" />
|
<el-option label="二线" value="二线" />
|
</el-select>
|
<span v-else>{{ scope.row.lineNo }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="yieldvalue" label="产量" width="180">
|
<template #default="scope">
|
<el-input-number
|
v-if="scope.row.editing"
|
v-model="scope.row.yieldvalue"
|
:precision="2"
|
:step="0.1"
|
:min="0"
|
controls-position="right"
|
style="width: 140px"
|
/>
|
<span v-else>{{ scope.row.yieldvalue }}</span>
|
</template>
|
</el-table-column>
|
<!-- <el-table-column prop="createTime" label="创建时间" width="180" />
|
<el-table-column prop="updateTime" label="更新时间" width="180" /> -->
|
<el-table-column label="操作" width="200" fixed="right">
|
<template #default="scope">
|
<el-button-group>
|
<el-button
|
size="small"
|
:type="scope.row.editing ? 'success' : 'primary'"
|
@click="handleYieldEdit(scope.$index, scope.row)"
|
>
|
{{ scope.row.editing ? '保存' : '编辑' }}
|
</el-button>
|
<el-button
|
v-if="scope.row.editing"
|
size="small"
|
@click="cancelEdit(scope.row)"
|
>
|
取消
|
</el-button>
|
<el-button
|
v-else
|
size="small"
|
type="danger"
|
@click="handleDelete(scope.$index, yieldData, 'yieldvalue')"
|
>
|
删除
|
</el-button>
|
</el-button-group>
|
</template>
|
</el-table-column>
|
</el-table>
|
</el-tab-pane>
|
|
<!-- 利用率标签页 -->
|
<el-tab-pane label="利用率" name="utilization">
|
<el-form :inline="true" :model="utilizationFormData" label-width="100px" class="form-container">
|
<el-form-item label="日期">
|
<el-date-picker
|
v-model="utilizationFormData.recordDate"
|
type="date"
|
value-format="YYYY-MM-DD"
|
placeholder="选择日期"
|
style="width: 180px"
|
/>
|
</el-form-item>
|
<el-form-item label="生产线">
|
<el-select v-model="utilizationFormData.lineNo" placeholder="选择生产线" style="width: 180px">
|
<el-option label="一线" value="一线" />
|
<el-option label="二线" value="二线" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="利用率">
|
<el-input-number
|
v-model="utilizationFormData.utilizationRate"
|
:precision="2"
|
:step="0.1"
|
:min="0"
|
:max="100"
|
controls-position="right"
|
style="width: 180px"
|
/>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" @click="handleUtilizationSubmit">提交</el-button>
|
<el-button @click="resetUtilizationForm">重置</el-button>
|
</el-form-item>
|
</el-form>
|
|
<el-table :data="utilizationData" v-loading="utilizationLoading" style="width: 100%">
|
<el-table-column prop="recordDate" label="日期" width="180">
|
<template #default="scope">
|
<el-date-picker
|
v-if="scope.row.editing"
|
v-model="scope.row.recordDate"
|
type="date"
|
value-format="YYYY-MM-DD"
|
style="width: 140px"
|
/>
|
<span v-else>{{ scope.row.recordDate }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="lineNo" label="生产线" width="180">
|
<template #default="scope">
|
<el-select v-if="scope.row.editing" v-model="scope.row.lineNo" style="width: 140px">
|
<el-option label="一线" value="一线" />
|
<el-option label="二线" value="二线" />
|
</el-select>
|
<span v-else>{{ scope.row.lineNo }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="utilizationRate" label="利用率" width="180">
|
<template #default="scope">
|
<el-input-number
|
v-if="scope.row.editing"
|
v-model="scope.row.utilizationRate"
|
:precision="2"
|
:step="0.1"
|
:min="0"
|
:max="100"
|
controls-position="right"
|
style="width: 140px"
|
/>
|
<span v-else>{{ scope.row.utilizationRate }}%</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="操作" width="200" fixed="right">
|
<template #default="scope">
|
<el-button-group>
|
<el-button
|
size="small"
|
:type="scope.row.editing ? 'success' : 'primary'"
|
@click="handleUtilizationEdit(scope.$index, scope.row)"
|
>
|
{{ scope.row.editing ? '保存' : '编辑' }}
|
</el-button>
|
<el-button
|
v-if="scope.row.editing"
|
size="small"
|
@click="cancelEdit(scope.row)"
|
>
|
取消
|
</el-button>
|
<el-button
|
v-else
|
size="small"
|
type="danger"
|
@click="handleDelete(scope.$index, utilizationData, 'utilization')"
|
>
|
删除
|
</el-button>
|
</el-button-group>
|
</template>
|
</el-table-column>
|
</el-table>
|
</el-tab-pane>
|
|
<!-- 在制量标签页 -->
|
<el-tab-pane label="在制量" name="quantity">
|
<el-form :inline="true" :model="quantityFormData" label-width="100px" class="form-container">
|
<el-form-item label="日期">
|
<el-date-picker
|
v-model="quantityFormData.recordDate"
|
type="date"
|
value-format="YYYY-MM-DD"
|
placeholder="选择日期"
|
style="width: 180px"
|
/>
|
</el-form-item>
|
<el-form-item label="类型">
|
<el-select v-model="quantityFormData.locationCode" placeholder="选择类型" style="width: 180px">
|
<el-option label="半成品" value="半成品" />
|
<el-option label="7014库位" value="7014库位" />
|
<el-option label="7016库位" value="7016库位" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="数量">
|
<el-input-number
|
v-model="quantityFormData.quantity"
|
:precision="0"
|
:step="1"
|
:min="0"
|
controls-position="right"
|
style="width: 180px"
|
/>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" @click="handleQuantitySubmit">提交</el-button>
|
<el-button @click="resetQuantityForm">重置</el-button>
|
</el-form-item>
|
</el-form>
|
|
<el-table :data="quantityData" v-loading="quantityLoading" style="width: 100%">
|
<el-table-column prop="recordDate" label="日期" width="180">
|
<template #default="scope">
|
<el-date-picker
|
v-if="scope.row.editing"
|
v-model="scope.row.recordDate"
|
type="date"
|
value-format="YYYY-MM-DD"
|
style="width: 140px"
|
/>
|
<span v-else>{{ scope.row.recordDate }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="locationCode" label="产品" width="180">
|
<template #default="scope">
|
<el-select v-if="scope.row.editing" v-model="scope.row.locationCode" style="width: 140px">
|
<el-option label="半成品" value="半成品" />
|
<el-option label="7014库位" value="7014库位" />
|
<el-option label="7016库位" value="7016库位" />
|
</el-select>
|
<span v-else>
|
{{
|
scope.row.locationCode === '半成品' ? '半成品' :
|
scope.row.locationCode === '7014库位' ? '7014库位' : '7016库位'
|
}}
|
</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="quantity" label="数量" width="180">
|
<template #default="scope">
|
<el-input-number
|
v-if="scope.row.editing"
|
v-model="scope.row.quantity"
|
:precision="0"
|
:step="1"
|
:min="0"
|
controls-position="right"
|
style="width: 140px"
|
/>
|
<span v-else>{{ scope.row.quantity }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="操作" width="200" fixed="right">
|
<template #default="scope">
|
<el-button-group>
|
<el-button
|
size="small"
|
:type="scope.row.editing ? 'success' : 'primary'"
|
@click="handleQuantityEdit(scope.$index, scope.row)"
|
>
|
{{ scope.row.editing ? '保存' : '编辑' }}
|
</el-button>
|
<el-button
|
v-if="scope.row.editing"
|
size="small"
|
@click="cancelEdit(scope.row)"
|
>
|
取消
|
</el-button>
|
<el-button
|
v-else
|
size="small"
|
type="danger"
|
@click="handleDelete(scope.$index, quantityData, 'quantity')"
|
>
|
删除
|
</el-button>
|
</el-button-group>
|
</template>
|
</el-table-column>
|
</el-table>
|
</el-tab-pane>
|
</el-tabs>
|
</el-main>
|
</el-container>
|
</template>
|
|
<style scoped>
|
.form-container {
|
margin-bottom: 20px;
|
background-color: #f5f7fa;
|
padding: 20px;
|
border-radius: 4px;
|
}
|
|
.el-table {
|
margin-top: 20px;
|
}
|
|
:deep(.el-tabs__header) {
|
margin-bottom: 25px;
|
}
|
</style>
|
