|
|
|
@ -9,13 +9,13 @@ |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label=" "> |
|
|
|
<el-button type="primary" @click="searchTable()">查询</el-button> |
|
|
|
<el-button type="primary" @click="addModal()" v-if="shouldShowButton">新增</el-button> |
|
|
|
<el-button type="primary" @click="exportModal()" v-if="shouldShowButton">导入</el-button> |
|
|
|
</el-form-item> |
|
|
|
</el-form> |
|
|
|
|
|
|
|
<el-table |
|
|
|
:data="dataList" |
|
|
|
:height="searchData.height" |
|
|
|
:height="tableHeight" |
|
|
|
border |
|
|
|
v-loading="dataListLoading" |
|
|
|
style="width: 100%;"> |
|
|
|
@ -37,57 +37,164 @@ |
|
|
|
<el-table-column |
|
|
|
header-align="center" |
|
|
|
align="center" |
|
|
|
width="180" |
|
|
|
width="100" |
|
|
|
fixed="right" |
|
|
|
label="Actions"> |
|
|
|
label="操作"> |
|
|
|
<template slot-scope="scope"> |
|
|
|
<a type="text" size="small" @click="editModel(scope.row)">Edit |</a> |
|
|
|
<a type="text" size="small" @click="deleteData(scope.row)"> Delete</a> |
|
|
|
<el-link type="primary" @click="editModel(scope.row)">编辑</el-link> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
</el-table> |
|
|
|
|
|
|
|
<!-- 新增/编辑弹窗 --> |
|
|
|
<el-dialog :title="dialogTitle" :close-on-click-modal="false" v-drag :visible.sync="dialogVisible" width="600px"> |
|
|
|
<!-- 编辑弹窗 --> |
|
|
|
<el-dialog |
|
|
|
:title="dialogTitle" |
|
|
|
v-drag |
|
|
|
:visible.sync="dialogVisible" |
|
|
|
width="500px" |
|
|
|
top="3vh" |
|
|
|
:close-on-click-modal="false" |
|
|
|
class="custom-dialog" |
|
|
|
> |
|
|
|
<div class="dialog-content"> |
|
|
|
<el-form label-position="top" :model="formData" :rules="formRules" ref="formRef"> |
|
|
|
|
|
|
|
<!-- 表单 --> |
|
|
|
<el-form |
|
|
|
label-position="top" |
|
|
|
:model="formData" |
|
|
|
:rules="formRules" |
|
|
|
ref="formRef" |
|
|
|
class="form-area" |
|
|
|
> |
|
|
|
<el-row :gutter="20"> |
|
|
|
<el-col :span="12"> |
|
|
|
<el-form-item label="始发港" prop="departure"> |
|
|
|
<el-input v-model="formData.departure" placeholder="请输入始发港"></el-input> |
|
|
|
</el-form-item> |
|
|
|
</el-col> |
|
|
|
<el-col :span="12"> |
|
|
|
<el-form-item label="目的港" prop="destination"> |
|
|
|
<el-input v-model="formData.destination" placeholder="请输入目的港"></el-input> |
|
|
|
<el-form-item label="始发港名称" prop="departureName"> |
|
|
|
<el-input v-model="formData.departureName" disabled></el-input> |
|
|
|
</el-form-item> |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
<el-row :gutter="20"> |
|
|
|
<el-col :span="12"> |
|
|
|
<el-form-item label="停留天数" prop="transitDays"> |
|
|
|
<el-input v-model="formData.transitDays" type="number" placeholder="请输入停留天数"></el-input> |
|
|
|
<el-form-item label="目的港名称" prop="destinationName"> |
|
|
|
<el-input v-model="formData.destinationName" disabled></el-input> |
|
|
|
</el-form-item> |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
</el-form> |
|
|
|
|
|
|
|
<!-- 表格区域（关键：撑满） --> |
|
|
|
<div class="table-area"> |
|
|
|
<div class="table-title">运输周期</div> |
|
|
|
|
|
|
|
<el-table |
|
|
|
:data="transportList" |
|
|
|
border |
|
|
|
style="width: 100%" |
|
|
|
height="100%" |
|
|
|
> |
|
|
|
<el-table-column |
|
|
|
prop="shipMethod" |
|
|
|
label="运输方式" |
|
|
|
align="center" |
|
|
|
width="150" |
|
|
|
> |
|
|
|
<template slot-scope="scope"> |
|
|
|
<span>{{ scope.row.shipMethod }}</span> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
|
|
|
|
<el-table-column |
|
|
|
prop="transitDays" |
|
|
|
label="周期(天)" |
|
|
|
align="center" |
|
|
|
> |
|
|
|
<template slot-scope="scope"> |
|
|
|
<el-input |
|
|
|
v-model="scope.row.transitDays" |
|
|
|
placeholder="请输入天数" |
|
|
|
class="centered-input" |
|
|
|
/> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
</el-table> |
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
<div slot="footer" class="dialog-footer" style="margin-top: 20px"> |
|
|
|
|
|
|
|
<div slot="footer" class="dialog-footer"> |
|
|
|
<el-button type="primary" @click="submitData()">保存</el-button> |
|
|
|
<el-button @click="dialogVisible = false">取消</el-button> |
|
|
|
</div> |
|
|
|
</el-dialog> |
|
|
|
|
|
|
|
<el-dialog title="港口运输周期数据上传" :visible.sync="uploadDialogVisible" width="800px"> |
|
|
|
<!-- 选择文件 --> |
|
|
|
<div style="margin-bottom:15px;display:flex;align-items:center"> |
|
|
|
<span style="margin-right:10px">请选择文件</span> |
|
|
|
<el-input v-model="uploadFileName" style="width:400px;margin-right:10px" readonly></el-input> |
|
|
|
<el-upload ref="upload" action="/api/portTransitCycle/upload" |
|
|
|
:show-file-list="false" :on-change="handleFileChange" |
|
|
|
:auto-upload="false"> |
|
|
|
<el-button type="primary">选择文件</el-button> |
|
|
|
</el-upload> |
|
|
|
<el-button type="success" style="margin-left:10px" @click="previewUpload">上传</el-button> |
|
|
|
<el-button type="primary" @click="downloadTemplate" style="margin-left:10px"> |
|
|
|
<i class="el-icon-download"></i> 下载模板 |
|
|
|
</el-button> |
|
|
|
</div> |
|
|
|
<!-- 预览表格 --> |
|
|
|
<el-table |
|
|
|
:data="uploadPreviewList" |
|
|
|
border |
|
|
|
height="250" |
|
|
|
style="width:100%;margin-top:10px" |
|
|
|
> |
|
|
|
<el-table-column |
|
|
|
prop="departure" |
|
|
|
label="始发港ID" |
|
|
|
align="center" |
|
|
|
width="155"> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column |
|
|
|
prop="destination" |
|
|
|
label="目的港ID" |
|
|
|
align="center" |
|
|
|
width="160"> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column |
|
|
|
prop="luyun" |
|
|
|
label="陆运周期" |
|
|
|
align="center" |
|
|
|
width="150"> |
|
|
|
</el-table-column> |
|
|
|
|
|
|
|
<el-table-column |
|
|
|
prop="haiyun" |
|
|
|
label="海运周期" |
|
|
|
align="center" |
|
|
|
width="150"> |
|
|
|
</el-table-column> |
|
|
|
|
|
|
|
<el-table-column |
|
|
|
prop="kongyun" |
|
|
|
label="空运周期" |
|
|
|
align="center" |
|
|
|
width="160"> |
|
|
|
</el-table-column> |
|
|
|
|
|
|
|
</el-table> |
|
|
|
<!-- 按钮 --> |
|
|
|
<div style="margin-top:20px;text-align:center"> |
|
|
|
<el-button type="primary" @click="confirmUpload">保存</el-button> |
|
|
|
<el-button @click="uploadDialogVisible=false" style="margin-right:30px">关闭</el-button> |
|
|
|
</div> |
|
|
|
</el-dialog> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
// 请根据实际API路径调整导入 |
|
|
|
import { |
|
|
|
searchTransitPage, // 分页查询运输周期列表（如果需要分页） |
|
|
|
searchTransitList, // 查询运输周期列表 |
|
|
|
createTransit, // 新增运输周期 |
|
|
|
updateTransit, // 更新运输周期 |
|
|
|
deleteTransit // 删除运输周期 |
|
|
|
groupedList, // 分页查询运输周期列表 |
|
|
|
updateTransit // 更新运输周期 |
|
|
|
} from '@/api/port/portTransit.js' |
|
|
|
|
|
|
|
export default { |
|
|
|
@ -96,12 +203,12 @@ export default { |
|
|
|
return { |
|
|
|
dataList: [], |
|
|
|
dataListLoading: false, |
|
|
|
tableHeight: 400, // 表格高度 |
|
|
|
searchData: { |
|
|
|
departure: '', |
|
|
|
destination: '', |
|
|
|
portId: '', |
|
|
|
portCode: '', |
|
|
|
height: '200', |
|
|
|
portCode: '', |
|
|
|
page: 1, |
|
|
|
limit: 1000 |
|
|
|
}, |
|
|
|
@ -110,18 +217,33 @@ export default { |
|
|
|
formData: { |
|
|
|
id: '', |
|
|
|
departure: '', |
|
|
|
departureName: '', |
|
|
|
destination: '', |
|
|
|
transitDays: '' |
|
|
|
destinationName: '' |
|
|
|
}, |
|
|
|
// 运输周期列表 |
|
|
|
transportList: [ |
|
|
|
{ shipMethod: '陆运', transitDays: 0 }, |
|
|
|
{ shipMethod: '海运', transitDays: 0 }, |
|
|
|
{ shipMethod: '空运', transitDays: 0 } |
|
|
|
], |
|
|
|
formRules: { |
|
|
|
departure: [{ required: true, message: '请输入始发港', trigger: 'blur' }], |
|
|
|
destination: [{ required: true, message: '请输入目的港', trigger: 'blur' }], |
|
|
|
transitDays: [{ required: true, message: '请输入停留天数', trigger: 'blur' }] |
|
|
|
departureName: [{ required: true, message: '请输入始发港名称', trigger: 'blur' }], |
|
|
|
destinationName: [{ required: true, message: '请输入目的港名称', trigger: 'blur' }] |
|
|
|
}, |
|
|
|
// 上传相关 |
|
|
|
uploadDialogVisible: false, |
|
|
|
uploadFileName: '', |
|
|
|
uploadFile: null, |
|
|
|
uploadPreviewList: [], |
|
|
|
columnList: [ |
|
|
|
{ columnProp: 'departure', headerAlign: 'center', align: 'left', columnLabel: '始发港', columnWidth: 150, fixed: '', columnHidden: false, columnSortable: false }, |
|
|
|
{ columnProp: 'destination', headerAlign: 'center', align: 'left', columnLabel: '目的港', columnWidth: 150, fixed: '', columnHidden: false, columnSortable: false }, |
|
|
|
{ columnProp: 'transitDays', headerAlign: 'center', align: 'center', columnLabel: '停留天数', columnWidth: 120, fixed: '', columnHidden: false, columnSortable: true } |
|
|
|
{ columnProp: 'departure', headerAlign: 'center', align: 'left', columnLabel: '始发港ID', columnWidth: 120, fixed: '', columnHidden: false, columnSortable: false }, |
|
|
|
{ columnProp: 'departureName', headerAlign: 'center', align: 'left', columnLabel: '始发港', columnWidth: 150, fixed: '', columnHidden: false, columnSortable: false }, |
|
|
|
{ columnProp: 'destination', headerAlign: 'center', align: 'left', columnLabel: '目的港口ID', columnWidth: 120, fixed: '', columnHidden: false, columnSortable: false }, |
|
|
|
{ columnProp: 'destinationName', headerAlign: 'center', align: 'left', columnLabel: '目的港口名称', columnWidth: 150, fixed: '', columnHidden: false, columnSortable: false }, |
|
|
|
{ columnProp: 'luyun', headerAlign: 'center', align: 'center', columnLabel: '陆运周期', columnWidth: 100, fixed: '', columnHidden: false, columnSortable: true }, |
|
|
|
{ columnProp: 'haiyun', headerAlign: 'center', align: 'center', columnLabel: '海运周期', columnWidth: 100, fixed: '', columnHidden: false, columnSortable: true }, |
|
|
|
{ columnProp: 'kongyun', headerAlign: 'center', align: 'center', columnLabel: '空运周期', columnWidth: 100, fixed: '', columnHidden: false, columnSortable: true } |
|
|
|
] |
|
|
|
} |
|
|
|
}, |
|
|
|
@ -130,7 +252,28 @@ export default { |
|
|
|
return true |
|
|
|
} |
|
|
|
}, |
|
|
|
created() { |
|
|
|
this.$nextTick(() => { |
|
|
|
this.calcHeight() |
|
|
|
}) |
|
|
|
// 页面加载时自动查询数据 |
|
|
|
this.searchTable() |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
window.addEventListener('resize', this.handleResize) |
|
|
|
}, |
|
|
|
beforeDestroy() { |
|
|
|
window.removeEventListener('resize', this.handleResize) |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
// 计算表格高度 |
|
|
|
calcHeight() { |
|
|
|
this.tableHeight = window.innerHeight - 200 |
|
|
|
}, |
|
|
|
// 窗口大小改变时重新计算高度 |
|
|
|
handleResize() { |
|
|
|
this.calcHeight() |
|
|
|
}, |
|
|
|
// 初始化方法，供父组件调用 |
|
|
|
init(inData) { |
|
|
|
if (inData) { |
|
|
|
@ -141,9 +284,10 @@ export default { |
|
|
|
// 查询列表 |
|
|
|
searchTable() { |
|
|
|
this.dataListLoading = true |
|
|
|
searchTransitPage(this.searchData).then(({ data }) => { |
|
|
|
groupedList(this.searchData).then(({ data }) => { |
|
|
|
if (data && data.code === 0) { |
|
|
|
this.dataList = data.rows |
|
|
|
// 直接使用后端返回的数据 |
|
|
|
this.dataList = data.rows || [] |
|
|
|
} else { |
|
|
|
this.dataList = [] |
|
|
|
} |
|
|
|
@ -159,9 +303,16 @@ export default { |
|
|
|
id: '', |
|
|
|
portId: this.searchData.portId || '', |
|
|
|
departure: '', |
|
|
|
departureName: '', |
|
|
|
destination: '', |
|
|
|
transitDays: '' |
|
|
|
destinationName: '' |
|
|
|
} |
|
|
|
// 重置运输周期列表 |
|
|
|
this.transportList = [ |
|
|
|
{ shipMethod: '陆运', transitDays: 0 }, |
|
|
|
{ shipMethod: '海运', transitDays: 0 }, |
|
|
|
{ shipMethod: '空运', transitDays: 0 } |
|
|
|
] |
|
|
|
this.dialogVisible = true |
|
|
|
this.$nextTick(() => { |
|
|
|
if (this.$refs.formRef) { |
|
|
|
@ -172,65 +323,254 @@ export default { |
|
|
|
// 编辑 |
|
|
|
editModel(row) { |
|
|
|
this.dialogTitle = '编辑港口运输周期' |
|
|
|
this.formData = JSON.parse(JSON.stringify(row)) |
|
|
|
this.dialogVisible = true |
|
|
|
this.$nextTick(() => { |
|
|
|
if (this.$refs.formRef) { |
|
|
|
this.$refs.formRef.clearValidate() |
|
|
|
|
|
|
|
this.formData = { |
|
|
|
departure: row.departure, |
|
|
|
departureName: row.departureName, |
|
|
|
destination: row.destination, |
|
|
|
destinationName: row.destinationName |
|
|
|
} |
|
|
|
this.$http({ |
|
|
|
url: this.$http.adornUrl('/portTransitCycle/getDetail'), |
|
|
|
method: 'post', |
|
|
|
params: { |
|
|
|
departure: row.departure, |
|
|
|
destination: row.destination |
|
|
|
} |
|
|
|
}).then(({ data }) => { |
|
|
|
if (data.code === 0) { |
|
|
|
this.transportList = data.data || [] |
|
|
|
} else { |
|
|
|
this.transportList = [] |
|
|
|
} |
|
|
|
}) |
|
|
|
|
|
|
|
this.dialogVisible = true |
|
|
|
}, |
|
|
|
// 提交保存 |
|
|
|
submitData() { |
|
|
|
this.$refs.formRef.validate((valid) => { |
|
|
|
if (!valid) return |
|
|
|
|
|
|
|
const api = this.formData.id ? updateTransit : createTransit |
|
|
|
api(this.formData).then(({ data }) => { |
|
|
|
if (data && data.code === 0) { |
|
|
|
this.$message.success(data.msg || '保存成功') |
|
|
|
|
|
|
|
// 转换成后端需要的结构 |
|
|
|
const result = { |
|
|
|
departure: this.formData.departure, |
|
|
|
destination: this.formData.destination, |
|
|
|
luyun: null, |
|
|
|
haiyun: null, |
|
|
|
kongyun: null |
|
|
|
} |
|
|
|
|
|
|
|
this.transportList.forEach(item => { |
|
|
|
if (item.transitDays === null || item.transitDays === '') return |
|
|
|
|
|
|
|
if (item.shipMethod === '陆运') { |
|
|
|
result.luyun = Number(item.transitDays) |
|
|
|
} else if (item.shipMethod === '海运') { |
|
|
|
result.haiyun = Number(item.transitDays) |
|
|
|
} else if (item.shipMethod === '空运') { |
|
|
|
result.kongyun = Number(item.transitDays) |
|
|
|
} |
|
|
|
}) |
|
|
|
|
|
|
|
this.$http({ |
|
|
|
url: this.$http.adornUrl('/portTransitCycle/save'), |
|
|
|
method: 'post', |
|
|
|
data: result |
|
|
|
}).then(({ data }) => { |
|
|
|
if (data.code === 0) { |
|
|
|
this.$message.success('保存成功') |
|
|
|
this.dialogVisible = false |
|
|
|
this.searchTable() |
|
|
|
} else { |
|
|
|
this.$message.warning(data.msg || '保存失败') |
|
|
|
this.$message.error(data.msg || '保存失败') |
|
|
|
} |
|
|
|
}).catch(() => { |
|
|
|
this.$message.error('保存失败') |
|
|
|
}) |
|
|
|
}) |
|
|
|
}, |
|
|
|
// 删除 |
|
|
|
deleteData(row) { |
|
|
|
this.$confirm('确认删除该条港口运输周期记录吗？', '提示', { |
|
|
|
confirmButtonText: '确认', |
|
|
|
|
|
|
|
// ========== 上传功能 ========== |
|
|
|
// 打开上传弹窗 |
|
|
|
exportModal() { |
|
|
|
this.uploadDialogVisible = true |
|
|
|
this.uploadFileName = '' |
|
|
|
this.uploadFile = null |
|
|
|
this.uploadPreviewList = [] |
|
|
|
}, |
|
|
|
// 文件选择变化 |
|
|
|
handleFileChange(file) { |
|
|
|
this.uploadFile = file.raw |
|
|
|
this.uploadFileName = file.name |
|
|
|
}, |
|
|
|
// 预览上传数据 |
|
|
|
previewUpload() { |
|
|
|
if (!this.uploadFile) { |
|
|
|
this.$message.warning('请先选择文件') |
|
|
|
return |
|
|
|
} |
|
|
|
|
|
|
|
const formData = new FormData() |
|
|
|
formData.append('file', this.uploadFile) |
|
|
|
|
|
|
|
// 调用后端预览接口 |
|
|
|
this.$http({ |
|
|
|
url: this.$http.adornUrl('/portTransitCycle/previewUpload'), |
|
|
|
method: 'post', |
|
|
|
data: formData |
|
|
|
// 注意：不要手动设置 Content-Type，让 axios 自动处理 boundary |
|
|
|
}).then(({ data }) => { |
|
|
|
if (data && data.code === 0) { |
|
|
|
this.uploadPreviewList = data.data || [] |
|
|
|
this.$message.success('文件解析成功，请确认数据后点击保存') |
|
|
|
} else { |
|
|
|
this.$message.error(data.msg || '文件解析失败') |
|
|
|
} |
|
|
|
}).catch((error) => { |
|
|
|
console.error('文件解析失败:', error) |
|
|
|
const errorMsg = (error.response && error.response.data && error.response.data.msg) || error.message || '未知错误' |
|
|
|
this.$message.error('文件解析失败: ' + errorMsg) |
|
|
|
}) |
|
|
|
}, |
|
|
|
// 确认上传 |
|
|
|
confirmUpload() { |
|
|
|
if (this.uploadPreviewList.length === 0) { |
|
|
|
this.$message.warning('没有可保存的数据') |
|
|
|
return |
|
|
|
} |
|
|
|
|
|
|
|
this.$confirm(`确认保存 ${this.uploadPreviewList.length} 条数据吗？`, '提示', { |
|
|
|
confirmButtonText: '确定', |
|
|
|
cancelButtonText: '取消', |
|
|
|
type: 'warning' |
|
|
|
}).then(() => { |
|
|
|
deleteTransit(row.id).then(({ data }) => { |
|
|
|
if (data.code === 0) { |
|
|
|
this.$message.success('删除成功') |
|
|
|
const formData = new FormData() |
|
|
|
formData.append('file', this.uploadFile) |
|
|
|
|
|
|
|
// 调用后端保存接口 |
|
|
|
this.$http({ |
|
|
|
url: this.$http.adornUrl('/portTransitCycle/batchSave'), |
|
|
|
method: 'post', |
|
|
|
data: formData |
|
|
|
// 注意：不要手动设置 Content-Type，让 axios 自动处理 boundary |
|
|
|
}).then(({ data }) => { |
|
|
|
if (data && data.code === 0) { |
|
|
|
this.$message.success('数据保存成功') |
|
|
|
this.uploadDialogVisible = false |
|
|
|
this.searchTable() |
|
|
|
} else { |
|
|
|
this.$message.warning(data.msg || '删除失败') |
|
|
|
this.$message.error(data.msg || '数据保存失败') |
|
|
|
} |
|
|
|
}).catch(() => { |
|
|
|
this.$message.error('删除失败') |
|
|
|
}).catch((error) => { |
|
|
|
console.error('数据保存失败:', error) |
|
|
|
const errorMsg = (error.response && error.response.data && error.response.data.msg) || error.message || '未知错误' |
|
|
|
this.$message.error('数据保存失败: ' + errorMsg) |
|
|
|
}) |
|
|
|
}).catch(() => {}) |
|
|
|
}, |
|
|
|
// 下载模板 |
|
|
|
downloadTemplate() { |
|
|
|
const loading = this.$loading({ |
|
|
|
lock: true, |
|
|
|
text: '正在下载模板...', |
|
|
|
spinner: 'el-icon-loading', |
|
|
|
background: 'rgba(0, 0, 0, 0.7)' |
|
|
|
}) |
|
|
|
|
|
|
|
this.$http({ |
|
|
|
url: this.$http.adornUrl('/portTransitCycle/downloadTemplate'), |
|
|
|
method: 'get', |
|
|
|
responseType: 'blob' |
|
|
|
}).then(response => { |
|
|
|
loading.close() |
|
|
|
|
|
|
|
// 创建下载文件 |
|
|
|
const blob = new Blob([response.data], { |
|
|
|
type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' |
|
|
|
}) |
|
|
|
|
|
|
|
const url = window.URL.createObjectURL(blob) |
|
|
|
const link = document.createElement('a') |
|
|
|
link.href = url |
|
|
|
link.download = '港口运输周期模板.xlsx' |
|
|
|
|
|
|
|
document.body.appendChild(link) |
|
|
|
link.click() |
|
|
|
document.body.removeChild(link) |
|
|
|
|
|
|
|
window.URL.revokeObjectURL(url) |
|
|
|
|
|
|
|
this.$message.success('模板下载成功') |
|
|
|
}).catch(error => { |
|
|
|
loading.close() |
|
|
|
console.error('模板下载失败:', error) |
|
|
|
this.$message.error('模板下载失败，请联系管理员') |
|
|
|
}) |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<style scoped lang="scss"> |
|
|
|
.dialog-content { |
|
|
|
<style scoped lang="scss">/* 表格行高 */ |
|
|
|
::v-deep .el-table__row { |
|
|
|
height: 60px !important; |
|
|
|
} |
|
|
|
|
|
|
|
/* 单元格内边距 */ |
|
|
|
::v-deep .el-table td { |
|
|
|
padding: 8px 0; |
|
|
|
vertical-align: middle; |
|
|
|
} |
|
|
|
|
|
|
|
/* input 样式 */ |
|
|
|
::v-deep .el-input__inner { |
|
|
|
height: 36px !important; |
|
|
|
line-height: 36px !important; |
|
|
|
} |
|
|
|
|
|
|
|
/* 去掉错误居中方式 */ |
|
|
|
.centered-input { |
|
|
|
width: 100%; |
|
|
|
max-height: 60vh; |
|
|
|
overflow-y: auto; |
|
|
|
padding-right: 10px; |
|
|
|
} |
|
|
|
/* 整个弹窗拉高 */ |
|
|
|
::v-deep .upload-dialog .el-dialog { |
|
|
|
height: 90vh; |
|
|
|
max-height: 90vh; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
} |
|
|
|
|
|
|
|
/* body变成flex */ |
|
|
|
::v-deep .upload-dialog .el-dialog__body { |
|
|
|
flex: 1; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
overflow: hidden; |
|
|
|
} |
|
|
|
|
|
|
|
/* 总容器 */ |
|
|
|
.upload-container { |
|
|
|
flex: 1; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
} |
|
|
|
|
|
|
|
/* 顶部区域固定 */ |
|
|
|
.upload-header { |
|
|
|
flex-shrink: 0; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
margin-bottom: 10px; |
|
|
|
} |
|
|
|
|
|
|
|
/* 表格区域自动撑满 */ |
|
|
|
.upload-table { |
|
|
|
flex: 1; |
|
|
|
overflow: hidden; |
|
|
|
} |
|
|
|
|
|
|
|
.customer-css { |
|
|
|
padding: 10px; |
|
|
|
/* 表格填满 */ |
|
|
|
.upload-table .el-table { |
|
|
|
height: 100%; |
|
|
|
} |
|
|
|
</style> |
|
|
|
</style> |
qiankanghui
4 weeks ago