You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1365 lines
48 KiB
1365 lines
48 KiB
<template>
|
|
<div class="customer-css">
|
|
<el-dialog :title="titleCon" :close-on-click-modal="false" :visible.sync="visible"
|
|
:width="showPreview ? '1200px' : '600px'" class="customer-dialog" >
|
|
<el-form label-position="top">
|
|
<el-row :gutter="16">
|
|
<el-col :span="12">
|
|
<el-form-item label="BU">
|
|
<el-select v-model="pageData.buNo" placeholder="请选择" style="width: 100%">
|
|
<el-option v-for="i in buList" :key="i.buNo" :label="i.buDesc" :value="i.buNo"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label=" ">
|
|
<el-button type="primary" @click="downloadFile()">下载文件模板</el-button>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="24" style="margin-top: 10px">
|
|
<el-upload class="customer-upload" drag action="javascript:void(0);" ref="uploadFile" :limit="1" accept=".xlsx,.xls"
|
|
:before-upload="beforeUploadHandle" :on-change="onChange" :auto-upload="false" style="text-align: left;">
|
|
<i class="el-icon-upload"></i>
|
|
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
|
|
</el-upload>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form>
|
|
|
|
<!-- 预览数据表格 -->
|
|
<!-- 加载状态 -->
|
|
<div v-if="previewLoading" style="margin-top: 20px; text-align: center; padding: 40px;">
|
|
<i class="el-icon-loading" style="font-size: 24px; color: #409EFF;"></i>
|
|
<p style="margin-top: 10px; color: #666;">正在解析文件，请稍候...</p>
|
|
</div>
|
|
|
|
<div v-if="showPreview" style="margin-top: 20px; margin-bottom: 30px;">
|
|
<h4>文件预览 - 按发票号汇总 (共{{ previewData.length }}个发票)</h4>
|
|
|
|
<el-table :data="previewData" border style="width: 100%" max-height="400" :show-overflow-tooltip="true" class="delClass">
|
|
<el-table-column label="操作" width="40" fixed="left">
|
|
<template slot-scope="scope">
|
|
<a type="text" size="small" style="color: red" @click="deleteRow(scope.$index, scope.row)">删除</a>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="cmcInvoice" label="发票号" width="120" fixed="left">
|
|
<template slot-scope="scope">
|
|
<span :style="scope.row.exists ? 'color: red; font-weight: bold;' : ''">
|
|
{{ scope.row.cmcInvoice }}
|
|
<el-tag v-if="scope.row.exists" type="danger" size="mini">已存在</el-tag>
|
|
</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="destination" label="目的地" width="100"></el-table-column>
|
|
<el-table-column label="客户模板" width="150">
|
|
<template slot-scope="scope">
|
|
<el-input
|
|
v-model="scope.row.selectedTemplate"
|
|
placeholder="请选择客户模板"
|
|
@dblclick.native="selectTemplateForRow(scope.row)"
|
|
size="small"
|
|
style="cursor: pointer;">
|
|
</el-input>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="客户" width="150">
|
|
<template slot-scope="scope">
|
|
<el-input
|
|
v-model="scope.row.selectedCustomer"
|
|
placeholder="请选择客户"
|
|
@dblclick.native="selectCustomerForRow(scope.row)"
|
|
size="small"
|
|
style="cursor: pointer;"
|
|
readonly>
|
|
<i slot="suffix" class="el-icon-edit" style="cursor: pointer;" @click.stop="openEditDialog(scope.row, 'selectedCustomer', '客户', '编辑客户信息')"></i>
|
|
</el-input>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="客户地址" width="160">
|
|
<template slot-scope="scope">
|
|
<el-input
|
|
v-model="scope.row.selectedLocalAddress"
|
|
placeholder="请选择客户地址"
|
|
@dblclick.native="selectLocalAddressForRow(scope.row)"
|
|
size="small"
|
|
style="cursor: pointer;"
|
|
readonly>
|
|
<i slot="suffix" class="el-icon-edit" style="cursor: pointer;" @click.stop="openEditDialog(scope.row, 'selectedLocalAddress', '客户地址', '编辑客户地址')"></i>
|
|
</el-input>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="收货单位" width="150">
|
|
<template slot-scope="scope">
|
|
<el-input
|
|
v-model="scope.row.selectedOverseasShipper"
|
|
placeholder="请选择收货单位"
|
|
@dblclick.native="selectOverseasShipperForRow(scope.row)"
|
|
size="small"
|
|
style="cursor: pointer;"
|
|
readonly>
|
|
<i slot="suffix" class="el-icon-edit" style="cursor: pointer;" @click.stop="openEditDialog(scope.row, 'selectedOverseasShipper', '收货单位', '编辑收货单位')"></i>
|
|
</el-input>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="收货单位地址" width="160">
|
|
<template slot-scope="scope">
|
|
<el-input
|
|
v-model="scope.row.selectedOverseasAddress"
|
|
placeholder="请选择收货单位地址"
|
|
@dblclick.native="selectOverseasAddressForRow(scope.row)"
|
|
size="small"
|
|
style="cursor: pointer;"
|
|
readonly>
|
|
<i slot="suffix" class="el-icon-edit" style="cursor: pointer;" @click.stop="openEditDialog(scope.row, 'selectedOverseasAddress', '收货单位地址', '编辑收货单位地址')"></i>
|
|
</el-input>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="运抵国" width="80">
|
|
<template slot-scope="scope">
|
|
<el-input
|
|
v-model="scope.row.selectedCnative"
|
|
placeholder="运抵国"
|
|
size="small"
|
|
style="cursor: pointer;"
|
|
readonly>
|
|
<i slot="suffix" class="el-icon-edit" style="cursor: pointer;" @click.stop="openEditDialog(scope.row, 'selectedCnative', '运抵国', '编辑运抵国')"></i>
|
|
</el-input>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="贸易国" min-width="80">
|
|
<template slot-scope="scope">
|
|
<el-input
|
|
v-model="scope.row.selectedSalesArea"
|
|
placeholder="贸易国"
|
|
size="small"
|
|
style="cursor: pointer;"
|
|
readonly>
|
|
<i slot="suffix" class="el-icon-edit" style="cursor: pointer;" @click.stop="openEditDialog(scope.row, 'selectedSalesArea', '贸易国', '编辑贸易国')"></i>
|
|
</el-input>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
|
|
<span slot="footer" class="dialog-footer" style="margin-top: 10px">
|
|
<el-button v-if="!showPreview" type="primary" @click="saveUploadFile">保存</el-button>
|
|
<el-button v-if="showPreview" type="primary" @click="saveFromPreview">确认保存</el-button>
|
|
<el-button v-if="showPreview" @click="cancelPreview">取消预览</el-button>
|
|
<el-button v-if="!showPreview" type="primary" @click="closeDialog">关闭</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
|
|
<el-dialog :title="currentRow ? `为发票号 ${currentRow.cmcInvoice} 选择客户模板` : '客户模板'"
|
|
@close="templateFlag = false; currentRow = null" :visible.sync="templateFlag" width="1200px" v-drag>
|
|
<el-table
|
|
:height="400"
|
|
:data="customerTemplateList"
|
|
stripe
|
|
highlight-current-row
|
|
border class="delClass"
|
|
@row-dblclick="rowDblclickTemplate"
|
|
style="width: 100%;">
|
|
<el-table-column
|
|
prop="template_name"
|
|
header-align="center"
|
|
align="left"
|
|
width="150"
|
|
label="模板名称">
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="ccusname"
|
|
header-align="center"
|
|
align="left"
|
|
width="200"
|
|
label="客户名称">
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="localShipAddress"
|
|
header-align="center"
|
|
align="left"
|
|
width="300"
|
|
label="客户地址">
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="overseasShipper"
|
|
header-align="center"
|
|
align="left"
|
|
width="200"
|
|
label="收货单位">
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="overseasAddress"
|
|
header-align="center"
|
|
align="left"
|
|
width="300"
|
|
label="收货地址">
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="salesArea"
|
|
header-align="center"
|
|
align="left"
|
|
width="80"
|
|
label="贸易国">
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="cnative"
|
|
header-align="center"
|
|
align="left"
|
|
width="80"
|
|
label="运抵国">
|
|
</el-table-column>
|
|
</el-table>
|
|
<el-footer style="height:40px;margin-top: 10px;text-align:center">
|
|
<el-button @click="templateFlag = false; currentRow = null">关闭</el-button>
|
|
</el-footer>
|
|
</el-dialog>
|
|
|
|
<el-dialog :title="currentRow ? `为发票号 ${currentRow.cmcInvoice} 选择客户` : '客户'" @close="closeCustomDialog" :visible.sync="customFlag" width="500px" v-drag>
|
|
<el-form inline="inline" label-position="top" :model="customSearchData" style="margin-left: 7px;margin-top: -5px;">
|
|
<el-form-item label="客户名称">
|
|
<el-input v-model="customSearchData.ccusname" clearable style="width: 150px"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label=" ">
|
|
<el-button type="primary" style="padding: 3px 12px" @click="getCustomerList()">查询</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
<el-table
|
|
:height="400"
|
|
:data="customerList"
|
|
stripe
|
|
highlight-current-row
|
|
border
|
|
@row-dblclick="rowDblclick"
|
|
style="width: 100%;">
|
|
<el-table-column
|
|
prop="ccusname"
|
|
header-align="center"
|
|
align="left"
|
|
width="350"
|
|
label="客户名称">
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="country"
|
|
header-align="center"
|
|
align="left"
|
|
label="贸易国">
|
|
</el-table-column>
|
|
</el-table>
|
|
<el-footer style="height:40px;margin-top: 10px;text-align:center">
|
|
<el-button @click="customFlag = false">关闭</el-button>
|
|
</el-footer>
|
|
</el-dialog>
|
|
|
|
<el-dialog :title="currentRow ? `为发票号 ${currentRow.cmcInvoice} 选择客户地址` : '客户地址'" @close="localShipAddressFlag = false; currentRow = null" :visible.sync="localShipAddressFlag" width="500px" v-drag>
|
|
<el-table
|
|
:height="400"
|
|
:data="customerAddrs"
|
|
stripe
|
|
highlight-current-row
|
|
border
|
|
@row-dblclick="rowDblclick2"
|
|
style="width: 100%;">
|
|
<el-table-column
|
|
prop="cDeliverAdd"
|
|
header-align="center"
|
|
align="left"
|
|
label="客户地址">
|
|
</el-table-column>
|
|
</el-table>
|
|
<el-footer style="height:40px;margin-top: 10px;text-align:center">
|
|
<el-button @click="localShipAddressFlag = false; currentRow = null">关闭</el-button>
|
|
</el-footer>
|
|
</el-dialog>
|
|
|
|
<el-dialog :title="currentRow ? `为发票号 ${currentRow.cmcInvoice} 选择收货单位地址` : '收货单位地址'" @close="overseasAddressFlag = false; currentRow = null" :visible.sync="overseasAddressFlag" width="500px" v-drag>
|
|
<el-table
|
|
:height="400"
|
|
:data="customerAddrs"
|
|
stripe
|
|
highlight-current-row
|
|
border
|
|
@row-dblclick="rowDblclick3"
|
|
style="width: 100%;">
|
|
<el-table-column
|
|
prop="cDeliverAdd"
|
|
header-align="center"
|
|
align="left"
|
|
label="收货单位地址">
|
|
</el-table-column>
|
|
</el-table>
|
|
<el-footer style="height:40px;margin-top: 10px;text-align:center">
|
|
<el-button @click="overseasAddressFlag = false; currentRow = null">关闭</el-button>
|
|
</el-footer>
|
|
</el-dialog>
|
|
|
|
<el-dialog :title="currentRow ? `为发票号 ${currentRow.cmcInvoice} 选择收货单位` : '收货单位'" @close="overseasShipperFlag = false; currentRow = null" :visible.sync="overseasShipperFlag" width="500px" v-drag>
|
|
<el-table
|
|
:height="400"
|
|
:data="customerAddrs"
|
|
stripe
|
|
highlight-current-row
|
|
border
|
|
@row-dblclick="rowDblclick4"
|
|
style="width: 100%;">
|
|
<el-table-column
|
|
prop="cDeliverUnit"
|
|
header-align="left"
|
|
align="left"
|
|
width="350"
|
|
label="收货单位">
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="deliverycountry"
|
|
header-align="center"
|
|
align="left"
|
|
label="运抵国">
|
|
</el-table-column>
|
|
</el-table>
|
|
<el-footer style="height:40px;margin-top: 10px;text-align:center">
|
|
<el-button @click="overseasShipperFlag = false; currentRow = null">关闭</el-button>
|
|
</el-footer>
|
|
</el-dialog>
|
|
|
|
<!-- 大输入框编辑弹窗 -->
|
|
<el-dialog
|
|
:title="editDialog.title"
|
|
:visible.sync="editDialog.visible"
|
|
width="600px"
|
|
class="edit-dialog"
|
|
@close="closeEditDialog">
|
|
<div class="edit-dialog-tip">
|
|
<i class="el-icon-info"></i> 提示：您可以在此编辑较长的文本内容，支持多行输入
|
|
</div>
|
|
<el-form label-position="top" style="margin-bottom: 120px">
|
|
<el-form-item :label="editDialog.label">
|
|
<el-input ref="editTextarea"
|
|
v-model="editDialog.value"
|
|
type="textarea"
|
|
:rows="6"
|
|
placeholder="请输入内容，支持多行文本..."
|
|
maxlength="500"
|
|
show-word-limit
|
|
class="edit-textarea">
|
|
</el-input>
|
|
</el-form-item>
|
|
</el-form>
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button @click="closeEditDialog">取消</el-button>
|
|
<el-button type="primary" @click="confirmEdit">保存</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {queryFileId} from "@/api/qc/qc.js"
|
|
import {previewExcel,saveEcssCoDelNotifyByExcel,getCustomerList,getCustomers,getCustomerAdd,getCustomerTemplateList} from '@/api/ecss/ecss.js'
|
|
import {downLoadObjectFile} from '@/api/eam/eam_object_list.js'
|
|
import {getBuList}from '@/api/factory/site.js'
|
|
export default {
|
|
name: 'bomComponentUpload',
|
|
data() {
|
|
return {
|
|
buList: [],
|
|
titleCon: '文件导入',
|
|
visible: false,
|
|
fileList: [],
|
|
pageData: {
|
|
site: '',
|
|
buNo: '',
|
|
createBy: this.$store.state.user.name,
|
|
customerName:'',
|
|
localShipAddress:'',
|
|
overseasShipper:'',
|
|
overseasAddress:'',
|
|
cnative:'',
|
|
salesArea:'',
|
|
},
|
|
previewData: [], // 预览数据
|
|
showPreview: false, // 是否显示预览
|
|
selectedFile: null, // 选择的文件
|
|
previewLoading: false, // 预览加载状态
|
|
deletedInvoices: [], // 被删除的发票号列表
|
|
customSearchData: {},
|
|
customerList : [],//所有客户
|
|
customerAddrs : [],//地址
|
|
customerPersons : [],//联系人
|
|
customerMap:new Map,
|
|
customFlag:false,
|
|
localShipAddressFlag:false,
|
|
overseasShipperFlag:false,
|
|
overseasAddressFlag:false,
|
|
templateFlag:false,
|
|
customerTemplateList: [],//客户模板列表
|
|
cacheKey: '', // 缓存键
|
|
cacheTimer: null, // 缓存定时器
|
|
currentRow: null, // 当前编辑的行
|
|
cachedFileInfo: null, // 缓存的文件信息
|
|
cachedFileList: [], // 缓存的文件列表
|
|
// 大输入框编辑弹窗相关数据
|
|
editDialog: {
|
|
visible: false,
|
|
title: '',
|
|
label: '',
|
|
value: '',
|
|
fieldName: '', // 要编辑的字段名
|
|
row: null // 当前编辑的行数据
|
|
}
|
|
}
|
|
},
|
|
watch: {
|
|
// 深度监听pageData的变化，自动保存到缓存
|
|
pageData: {
|
|
handler: function(newVal, oldVal) {
|
|
// 只有在组件已初始化且对话框可见时才保存缓存
|
|
if (this.visible && this.cacheKey) {
|
|
this.saveToCache();
|
|
}
|
|
},
|
|
deep: true
|
|
},
|
|
// 深度监听previewData的变化，保存用户的编辑
|
|
previewData: {
|
|
handler: function(newVal, oldVal) {
|
|
// 只有在组件已初始化且对话框可见时才保存缓存
|
|
if (this.visible && this.cacheKey && newVal && newVal.length > 0) {
|
|
this.saveToCache();
|
|
}
|
|
},
|
|
deep: true
|
|
}
|
|
},
|
|
beforeDestroy() {
|
|
// 组件销毁前清理定时器
|
|
if (this.cacheTimer) {
|
|
clearTimeout(this.cacheTimer);
|
|
}
|
|
},
|
|
methods: {
|
|
// 生成缓存键
|
|
generateCacheKey() {
|
|
const userId = this.$store.state.user.id || this.$store.state.user.name;
|
|
return `ecss_del_upload_cache_${userId}`;
|
|
},
|
|
|
|
// 保存数据到缓存（防抖处理）
|
|
saveToCache() {
|
|
// 清除之前的定时器
|
|
if (this.cacheTimer) {
|
|
clearTimeout(this.cacheTimer);
|
|
}
|
|
|
|
// 设置新的定时器，500ms后执行保存
|
|
this.cacheTimer = setTimeout(() => {
|
|
try {
|
|
const cacheData = {
|
|
pageData: {
|
|
buNo: this.pageData.buNo,
|
|
customerName: this.pageData.customerName,
|
|
localShipAddress: this.pageData.localShipAddress,
|
|
overseasShipper: this.pageData.overseasShipper,
|
|
overseasAddress: this.pageData.overseasAddress,
|
|
cnative: this.pageData.cnative,
|
|
salesArea: this.pageData.salesArea,
|
|
},
|
|
// 保存文件和预览相关数据
|
|
fileInfo: this.selectedFile ? {
|
|
name: this.selectedFile.name,
|
|
size: this.selectedFile.size,
|
|
lastModified: this.selectedFile.lastModified
|
|
} : null,
|
|
showPreview: this.showPreview,
|
|
previewData: this.previewData,
|
|
deletedInvoices: this.deletedInvoices,
|
|
fileList: this.fileList.map(file => ({
|
|
name: file.name,
|
|
size: file.size,
|
|
lastModified: file.lastModified,
|
|
uid: file.uid
|
|
}))
|
|
};
|
|
localStorage.setItem(this.cacheKey, JSON.stringify(cacheData));
|
|
} catch (error) {
|
|
console.warn('保存缓存失败:', error);
|
|
}
|
|
}, 500);
|
|
},
|
|
|
|
// 从缓存加载数据
|
|
loadFromCache() {
|
|
try {
|
|
const cachedData = localStorage.getItem(this.cacheKey);
|
|
if (cachedData) {
|
|
const parsedData = JSON.parse(cachedData);
|
|
if (parsedData.pageData) {
|
|
// 恢复基础表单数据
|
|
Object.assign(this.pageData, parsedData.pageData);
|
|
|
|
// 恢复预览数据和文件状态
|
|
if (parsedData.previewData && parsedData.previewData.length > 0) {
|
|
this.previewData = parsedData.previewData;
|
|
this.showPreview = parsedData.showPreview || false;
|
|
}
|
|
|
|
// 恢复删除的发票号列表
|
|
if (parsedData.deletedInvoices) {
|
|
this.deletedInvoices = parsedData.deletedInvoices;
|
|
}
|
|
|
|
// 恢复文件列表信息（用于界面显示）
|
|
if (parsedData.fileList && parsedData.fileList.length > 0) {
|
|
// 记录缓存的文件信息，用于后续比对
|
|
this.cachedFileInfo = parsedData.fileInfo;
|
|
this.cachedFileList = parsedData.fileList;
|
|
}
|
|
|
|
return true;
|
|
}
|
|
}
|
|
} catch (error) {
|
|
console.warn('加载缓存失败:', error);
|
|
}
|
|
return false;
|
|
},
|
|
|
|
// 清除缓存
|
|
clearCache() {
|
|
try {
|
|
localStorage.removeItem(this.cacheKey);
|
|
} catch (error) {
|
|
console.warn('清除缓存失败:', error);
|
|
}
|
|
},
|
|
|
|
// 检查并恢复文件状态
|
|
checkAndRestoreFileState() {
|
|
// 检查上传组件中是否有文件
|
|
const uploadFiles = this.$refs.uploadFile.uploadFiles;
|
|
|
|
if (this.cachedFileInfo && this.cachedFileList.length > 0) {
|
|
// 如果有缓存的文件信息，检查当前上传组件中的文件
|
|
if (uploadFiles && uploadFiles.length > 0) {
|
|
const currentFile = uploadFiles[0];
|
|
const isSameFile = currentFile.name === this.cachedFileInfo.name &&
|
|
currentFile.size === this.cachedFileInfo.size &&
|
|
currentFile.lastModified === this.cachedFileInfo.lastModified;
|
|
|
|
if (isSameFile) {
|
|
// 是同一个文件，恢复文件相关状态
|
|
this.selectedFile = currentFile;
|
|
this.fileList = [currentFile];
|
|
console.log('恢复文件状态:', currentFile.name);
|
|
} else {
|
|
// 文件不匹配，清除预览状态但保留表单数据
|
|
this.showPreview = false;
|
|
this.previewData = [];
|
|
this.selectedFile = null;
|
|
this.fileList = [];
|
|
console.log('文件不匹配，清除预览状态');
|
|
}
|
|
} else {
|
|
// 没有文件但有缓存，说明文件可能被清除了
|
|
this.showPreview = false;
|
|
this.previewData = [];
|
|
this.selectedFile = null;
|
|
this.fileList = [];
|
|
console.log('没有找到文件，清除预览状态');
|
|
}
|
|
}
|
|
|
|
// 保存当前状态
|
|
this.saveToCache();
|
|
},
|
|
|
|
// 初始化组件的参数
|
|
init () {
|
|
// 初始化缓存键，但不清除任何现有数据
|
|
this.cacheKey = this.generateCacheKey();
|
|
this.previewLoading = false
|
|
|
|
let tempData = {
|
|
username: this.$store.state.user.name,
|
|
}
|
|
getBuList(tempData).then(({data}) => {
|
|
if (data.code === 0) {
|
|
this.buList = data.row2
|
|
if(data.row2.length===1){
|
|
this.pageData.buNo=data.row2[0].buNo
|
|
}
|
|
}
|
|
// 在获取BU列表后尝试加载缓存
|
|
this.loadFromCache();
|
|
|
|
// 检查并恢复文件状态
|
|
this.$nextTick(() => {
|
|
this.checkAndRestoreFileState();
|
|
});
|
|
})
|
|
|
|
getCustomerList({}).then(({data}) => {
|
|
//区分请求成功和失败的状况
|
|
if (data && data.code === 0) {
|
|
this.customerList=data.rows
|
|
}
|
|
});
|
|
|
|
// 只有在完全没有缓存数据时才初始化为空
|
|
const hasCache = this.loadFromCache();
|
|
if (!hasCache) {
|
|
this.fileList = []
|
|
this.previewData = []
|
|
this.showPreview = false
|
|
this.selectedFile = null
|
|
this.deletedInvoices = []
|
|
this.pageData.customerName=''
|
|
this.pageData.cnative=''
|
|
this.pageData.localShipAddress='',
|
|
this.pageData.overseasShipper='',
|
|
this.pageData.overseasAddress='',
|
|
this.pageData.salesArea=''
|
|
}
|
|
|
|
this.customerPersons=[]
|
|
this.customerAddrs=[]
|
|
// 打开页面
|
|
this.visible = true
|
|
},
|
|
getCustomerList(){
|
|
getCustomerList(this.customSearchData).then(({data}) => {
|
|
//区分请求成功和失败的状况
|
|
if (data && data.code === 0) {
|
|
this.customerList=data.rows
|
|
}
|
|
});
|
|
},
|
|
getCusPersons(){
|
|
let cusData = {ccusname: this.pageData.customerName}
|
|
getCustomers(cusData).then(({data}) => {
|
|
//区分请求成功和失败的状况
|
|
if (data && data.code === 0) {
|
|
this.customerPersons=data.rows
|
|
this.customerPersons.forEach(o => {
|
|
if (!this.customerMap.has(o.ccontactname)) {
|
|
this.customerMap.set(o.ccontactname, o.cnative);
|
|
}
|
|
});
|
|
}
|
|
});
|
|
getCustomerAdd(cusData).then(({data}) => {
|
|
//区分请求成功和失败的状况
|
|
if (data && data.code === 0) {
|
|
this.customerAddrs=data.rows
|
|
}
|
|
});
|
|
},
|
|
setCnative(){
|
|
this.pageData.cnative=this.customerMap.get(this.pageData.overseasShipper)
|
|
},
|
|
closeCustomDialog () {
|
|
this.customFlag = false
|
|
this.currentRow = null
|
|
},
|
|
rowDblclickTemplate(row) {
|
|
console.log(row)
|
|
if (this.currentRow) {
|
|
// 使用模板设置当前行的所有信息
|
|
this.currentRow.selectedTemplate = row.template_name
|
|
this.currentRow.selectedCustomer = row.ccusname || ''
|
|
this.currentRow.selectedLocalAddress = row.localShipAddress || ''
|
|
this.currentRow.selectedOverseasShipper = row.overseasShipper || ''
|
|
this.currentRow.selectedOverseasAddress = row.overseasAddress || ''
|
|
this.currentRow.selectedCnative = row.cnative || ''
|
|
this.currentRow.selectedSalesArea = row.salesArea || ''
|
|
|
|
// 如果模板中有客户信息，自动获取该客户的地址和收货单位信息
|
|
if (row.ccusname) {
|
|
this.getCusPersonsForRow(row.ccusname)
|
|
}
|
|
}
|
|
this.templateFlag = false
|
|
this.currentRow = null
|
|
},
|
|
|
|
rowDblclick (row) {
|
|
if (this.currentRow) {
|
|
// 预览模式下，为当前行设置客户信息
|
|
this.currentRow.selectedCustomer = row.ccusname
|
|
this.currentRow.selectedSalesArea = row.country
|
|
this.currentRow.selectedLocalAddress = ''
|
|
this.currentRow.selectedOverseasShipper = ''
|
|
this.currentRow.selectedOverseasAddress = ''
|
|
this.currentRow.selectedCnative = ''
|
|
this.getCusPersonsForRow(row.ccusname)
|
|
} else {
|
|
// 普通模式下，设置全局信息
|
|
this.pageData.customerName=row.ccusname
|
|
this.pageData.cnative='',
|
|
this.pageData.localShipAddress='',
|
|
this.pageData.overseasShipper='',
|
|
this.pageData.overseasAddress='',
|
|
this.pageData.salesArea = row.country
|
|
this.getCusPersons()
|
|
}
|
|
this.customFlag = false
|
|
},
|
|
rowDblclick2 (row) {
|
|
if (this.currentRow) {
|
|
this.currentRow.selectedLocalAddress = row.cDeliverAdd
|
|
} else {
|
|
this.pageData.localShipAddress = row.cDeliverAdd
|
|
}
|
|
this.localShipAddressFlag = false
|
|
this.currentRow = null
|
|
},
|
|
rowDblclick3 (row) {
|
|
if (this.currentRow) {
|
|
this.currentRow.selectedOverseasAddress = row.cDeliverAdd
|
|
} else {
|
|
this.pageData.overseasAddress = row.cDeliverAdd
|
|
}
|
|
this.overseasAddressFlag = false
|
|
this.currentRow = null
|
|
},
|
|
rowDblclick4 (row) {
|
|
if (this.currentRow) {
|
|
this.currentRow.selectedOverseasShipper = row.cDeliverUnit
|
|
this.currentRow.selectedCnative = row.deliverycountry
|
|
} else {
|
|
this.pageData.overseasShipper = row.cDeliverUnit
|
|
this.pageData.cnative = row.deliverycountry
|
|
}
|
|
this.overseasShipperFlag = false
|
|
this.currentRow = null
|
|
},
|
|
|
|
// 上传之前
|
|
beforeUploadHandle (file) {
|
|
let extName = file[0].name.substring(file[0].name.lastIndexOf('.')).toLowerCase()
|
|
if (!(extName === '.xlsx' || extName === '.xls')) {
|
|
this.$message.error('数据导入失败，请选择正确的xlsx模板文件')
|
|
return false
|
|
}
|
|
},
|
|
|
|
// 选择上传文件时
|
|
onChange (file) {
|
|
this.fileList.push(file)
|
|
this.selectedFile = file
|
|
this.previewFile(file)
|
|
// 保存文件信息到缓存
|
|
this.saveToCache()
|
|
},
|
|
|
|
// 关闭modal
|
|
closeDialog () {
|
|
// 保存当前状态到缓存
|
|
this.saveToCache()
|
|
// 关闭当前的页面
|
|
this.visible = false
|
|
this.$emit('refreshTable')
|
|
},
|
|
deleteFile(){
|
|
// 只有在明确需要清除数据时才调用此方法
|
|
this.fileList = []
|
|
this.previewData = []
|
|
this.showPreview = false
|
|
this.selectedFile = null
|
|
this.deletedInvoices = []
|
|
this.cachedFileInfo = null
|
|
this.cachedFileList = []
|
|
// 清空文件上传记录
|
|
this.$refs.uploadFile.clearFiles()
|
|
// 清除缓存
|
|
this.clearCache()
|
|
// 刷新报工的页面
|
|
this.$emit('refreshTable')
|
|
},
|
|
|
|
// 保修当前的数据
|
|
saveUploadFile () {
|
|
if (null == this.pageData.buNo || this.pageData.buNo=='') {
|
|
this.$message.error("请先选择BU!")
|
|
return false
|
|
}
|
|
if (null == this.pageData.customerName || this.pageData.customerName=='') {
|
|
this.$message.error("请先选择客户!")
|
|
return false
|
|
}
|
|
if (null == this.pageData.localShipAddress || this.pageData.localShipAddress=='') {
|
|
this.$message.error("请先填写客户发货地址!")
|
|
return false
|
|
}
|
|
if (null == this.pageData.overseasShipper || this.pageData.overseasShipper=='') {
|
|
this.$message.error("请先填写收货单位!")
|
|
return false
|
|
}
|
|
if (null == this.pageData.overseasAddress || this.pageData.overseasAddress=='') {
|
|
this.$message.error("请先填写收货单位地址!")
|
|
return false
|
|
}
|
|
if (null == this.pageData.cnative || this.pageData.cnative=='') {
|
|
this.$message.error("请先填写收货单位运抵国!")
|
|
return false
|
|
}
|
|
// 判断文件是否上传
|
|
if (null == this.fileList || 0 === this.fileList.length) {
|
|
this.$message.error("请先上传文件!")
|
|
return false
|
|
}
|
|
const formData = new FormData()
|
|
formData.append("buNo",this.pageData.buNo)
|
|
formData.append("username",this.$store.state.user.name)
|
|
formData.append("file", this.fileList[0].raw)
|
|
formData.append("customerName", this.pageData.customerName)
|
|
formData.append("localShipAddress", this.pageData.localShipAddress)
|
|
formData.append("overseasShipper", this.pageData.overseasShipper)
|
|
formData.append("overseasAddress", this.pageData.overseasAddress)
|
|
formData.append("cnative", this.pageData.cnative)
|
|
formData.append("salesArea", this.pageData.salesArea)
|
|
saveEcssCoDelNotifyByExcel(formData).then(({ data }) => {
|
|
if (data.code === 0) {
|
|
const { resultMap } = data;
|
|
const successList = resultMap.success || [];
|
|
const failList = resultMap.fail || [];
|
|
|
|
// 紧凑样式
|
|
let html = `
|
|
<div style="max-height:380px;overflow:auto;font-size:12px;line-height:1.4;">
|
|
`;
|
|
|
|
if (successList.length > 0) {
|
|
html += `<div style="margin-bottom:6px;">
|
|
<div style="color:green;font-weight:bold;margin-bottom:3px;">
|
|
✅ 成功（${successList.length}）
|
|
</div>
|
|
<table border="1" cellspacing="0" cellpadding="2"
|
|
style="border-collapse:collapse;width:100%;">
|
|
`;
|
|
successList.forEach(item => {
|
|
html += `<tr><td style="color:green;padding:2px 4px;">${item}</td></tr>`;
|
|
});
|
|
html += `</table></div>`;
|
|
}
|
|
|
|
if (failList.length > 0) {
|
|
html += `<div>
|
|
<div style="color:red;font-weight:bold;margin-bottom:3px;">
|
|
❌ 失败（${failList.length}）
|
|
</div>
|
|
<table border="1" cellspacing="0" cellpadding="2"
|
|
style="border-collapse:collapse;width:100%;">
|
|
`;
|
|
failList.forEach(item => {
|
|
html += `<tr><td style="color:red;padding:2px 4px;">${item}</td></tr>`;
|
|
});
|
|
html += `</table></div>`;
|
|
}
|
|
|
|
html += `</div>`;
|
|
|
|
this.$alert(html, '导入结果', {
|
|
confirmButtonText: '确定',
|
|
dangerouslyUseHTMLString: true,
|
|
callback: () => {
|
|
if (successList.length > 0){
|
|
this.clearCache();
|
|
this.clearPreviewData();
|
|
this.closeDialog();
|
|
}
|
|
}
|
|
});
|
|
} else {
|
|
this.$alert(data.msg, '错误', {
|
|
confirmButtonText: '确定'
|
|
});
|
|
}
|
|
});
|
|
|
|
|
|
},
|
|
|
|
// 预览文件
|
|
async previewFile(file) {
|
|
if (!file || !file.raw) {
|
|
return
|
|
}
|
|
if (!this.pageData.buNo) {
|
|
this.$message.error('请先选择BU!')
|
|
this.fileList = []
|
|
this.$refs.uploadFile.clearFiles()
|
|
return
|
|
}
|
|
|
|
this.previewLoading = true // 开始加载
|
|
|
|
const formData = new FormData()
|
|
formData.append("file", file.raw)
|
|
formData.append("buNo", this.pageData.buNo)
|
|
|
|
try {
|
|
const { data } = await previewExcel(formData)
|
|
|
|
if (data.code === 0) {
|
|
this.previewData = data.data || []
|
|
this.showPreview = true
|
|
// 清空删除列表，因为这是新的文件预览
|
|
this.deletedInvoices = []
|
|
// 为每个发票号初始化客户信息
|
|
this.previewData.forEach(item => {
|
|
this.$set(item, 'selectedTemplate', '')
|
|
this.$set(item, 'selectedCustomer', '')
|
|
this.$set(item, 'selectedLocalAddress', '')
|
|
this.$set(item, 'selectedOverseasShipper', '')
|
|
this.$set(item, 'selectedOverseasAddress', '')
|
|
this.$set(item, 'selectedCnative', '')
|
|
this.$set(item, 'selectedSalesArea','')
|
|
})
|
|
// 预览成功后立即保存缓存
|
|
this.saveToCache()
|
|
} else {
|
|
this.$message.error(data.msg || '文件预览失败')
|
|
}
|
|
} catch (error) {
|
|
this.$message.error('文件预览失败：' + error.message)
|
|
} finally {
|
|
this.previewLoading = false // 结束加载
|
|
}
|
|
},
|
|
|
|
// 从预览数据保存
|
|
saveFromPreview() {
|
|
// 验证每个发票的必填信息
|
|
for (let item of this.previewData) {
|
|
if (!item.selectedCustomer) {
|
|
this.$message.error(`发票号 ${item.cmcInvoice} 请选择客户`)
|
|
return false
|
|
}
|
|
if (!item.selectedLocalAddress) {
|
|
this.$message.error(`发票号 ${item.cmcInvoice} 请填写客户地址`)
|
|
return false
|
|
}
|
|
if (!item.selectedOverseasShipper) {
|
|
this.$message.error(`发票号 ${item.cmcInvoice} 请填写收货单位`)
|
|
return false
|
|
}
|
|
if (!item.selectedOverseasAddress) {
|
|
this.$message.error(`发票号 ${item.cmcInvoice} 请填写收货单位地址`)
|
|
return false
|
|
}
|
|
if (!item.selectedCnative) {
|
|
this.$message.error(`发票号 ${item.cmcInvoice} 请填写运抵国`)
|
|
return false
|
|
}
|
|
}
|
|
|
|
// 发送保存请求
|
|
const formData = new FormData()
|
|
formData.append("buNo", this.pageData.buNo)
|
|
formData.append("username", this.$store.state.user.name)
|
|
formData.append("file", this.fileList[0].raw)
|
|
// 添加被删除的发票号列表
|
|
formData.append("deletedInvoices", JSON.stringify(this.deletedInvoices))
|
|
// 为每个发票设置客户信息
|
|
this.previewData.forEach((item, index) => {
|
|
formData.append(`customerName_${item.cmcInvoice}`, item.selectedCustomer)
|
|
formData.append(`localShipAddress_${item.cmcInvoice}`, item.selectedLocalAddress)
|
|
formData.append(`overseasShipper_${item.cmcInvoice}`, item.selectedOverseasShipper)
|
|
formData.append(`overseasAddress_${item.cmcInvoice}`, item.selectedOverseasAddress)
|
|
formData.append(`cnative_${item.cmcInvoice}`, item.selectedCnative)
|
|
formData.append(`salesArea_${item.cmcInvoice}`, item.selectedSalesArea)
|
|
})
|
|
|
|
saveEcssCoDelNotifyByExcel(formData).then(({ data }) => {
|
|
if (data.code === 0) {
|
|
const { resultMap } = data;
|
|
const successList = resultMap.success || [];
|
|
const failList = resultMap.fail || [];
|
|
|
|
// 紧凑样式
|
|
let html = `
|
|
<div style="max-height:380px;overflow:auto;font-size:12px;line-height:1.4;">
|
|
`;
|
|
|
|
if (successList.length > 0) {
|
|
html += `<div style="margin-bottom:6px;">
|
|
<div style="color:green;font-weight:bold;margin-bottom:3px;">
|
|
✅ 成功（${successList.length}）
|
|
</div>
|
|
<table border="1" cellspacing="0" cellpadding="2"
|
|
style="border-collapse:collapse;width:100%;">
|
|
`;
|
|
successList.forEach(item => {
|
|
html += `<tr><td style="color:green;padding:2px 4px;">${item}</td></tr>`;
|
|
});
|
|
html += `</table></div>`;
|
|
}
|
|
|
|
if (failList.length > 0) {
|
|
html += `<div>
|
|
<div style="color:red;font-weight:bold;margin-bottom:3px;">
|
|
❌ 失败（${failList.length}）
|
|
</div>
|
|
<table border="1" cellspacing="0" cellpadding="2"
|
|
style="border-collapse:collapse;width:100%;">
|
|
`;
|
|
failList.forEach(item => {
|
|
html += `<tr><td style="color:red;padding:2px 4px;">${item}</td></tr>`;
|
|
});
|
|
html += `</table></div>`;
|
|
}
|
|
|
|
html += `</div>`;
|
|
|
|
this.$alert(html, '导入结果', {
|
|
confirmButtonText: '确定',
|
|
dangerouslyUseHTMLString: true,
|
|
callback: () => {
|
|
if (successList.length > 0){
|
|
this.clearCache();
|
|
this.clearPreviewData();
|
|
this.closeDialog();
|
|
}
|
|
}
|
|
});
|
|
} else {
|
|
this.$alert(data.msg, '错误', {
|
|
confirmButtonText: '确定'
|
|
});
|
|
}
|
|
});
|
|
},
|
|
|
|
// 取消预览
|
|
cancelPreview() {
|
|
this.showPreview = false
|
|
this.previewData = []
|
|
this.fileList = []
|
|
this.selectedFile = null
|
|
this.deletedInvoices = []
|
|
this.cachedFileInfo = null
|
|
this.cachedFileList = []
|
|
this.$refs.uploadFile.clearFiles()
|
|
// 更新缓存
|
|
this.saveToCache()
|
|
},
|
|
|
|
// 清除预览数据
|
|
clearPreviewData() {
|
|
this.previewData = []
|
|
this.showPreview = false
|
|
this.selectedFile = null
|
|
this.fileList = []
|
|
this.deletedInvoices = []
|
|
this.previewLoading = false
|
|
this.cachedFileInfo = null
|
|
this.cachedFileList = []
|
|
this.$refs.uploadFile.clearFiles()
|
|
// 更新缓存
|
|
this.saveToCache()
|
|
},
|
|
|
|
// 为行选择客户模板
|
|
selectTemplateForRow(row) {
|
|
this.currentRow = row
|
|
this.getCustomerTemplateList()
|
|
this.templateFlag = true
|
|
},
|
|
|
|
// 为行选择客户
|
|
selectCustomerForRow(row) {
|
|
this.currentRow = row
|
|
this.customFlag = true
|
|
},
|
|
|
|
// 为行选择客户地址
|
|
selectLocalAddressForRow(row) {
|
|
if (!row.selectedCustomer) {
|
|
this.$message.warning('请先选择客户')
|
|
return
|
|
}
|
|
this.currentRow = row
|
|
this.getCusPersonsForRow(row.selectedCustomer)
|
|
this.localShipAddressFlag = true
|
|
},
|
|
|
|
// 为行选择收货单位
|
|
selectOverseasShipperForRow(row) {
|
|
if (!row.selectedCustomer) {
|
|
this.$message.warning('请先选择客户')
|
|
return
|
|
}
|
|
this.currentRow = row
|
|
this.getCusPersonsForRow(row.selectedCustomer)
|
|
this.overseasShipperFlag = true
|
|
},
|
|
|
|
// 为行选择收货单位地址
|
|
selectOverseasAddressForRow(row) {
|
|
if (!row.selectedCustomer) {
|
|
this.$message.warning('请先选择客户')
|
|
return
|
|
}
|
|
this.currentRow = row
|
|
this.getCusPersonsForRow(row.selectedCustomer)
|
|
this.overseasAddressFlag = true
|
|
},
|
|
|
|
// 获取客户模板列表
|
|
async getCustomerTemplateList() {
|
|
try {
|
|
const { data } = await getCustomerTemplateList({})
|
|
if (data && data.code === 0) {
|
|
this.customerTemplateList = data.rows || []
|
|
}
|
|
} catch (error) {
|
|
console.error('获取客户模板列表失败:', error)
|
|
this.customerTemplateList = []
|
|
}
|
|
},
|
|
|
|
// 获取特定客户的地址信息
|
|
getCusPersonsForRow(customerName) {
|
|
let cusData = {ccusname: customerName}
|
|
getCustomers(cusData).then(({data}) => {
|
|
if (data && data.code === 0) {
|
|
this.customerPersons = data.rows
|
|
this.customerPersons.forEach(o => {
|
|
if (!this.customerMap.has(o.ccontactname)) {
|
|
this.customerMap.set(o.ccontactname, o.cnative);
|
|
}
|
|
});
|
|
}
|
|
});
|
|
getCustomerAdd(cusData).then(({data}) => {
|
|
if (data && data.code === 0) {
|
|
this.customerAddrs = data.rows
|
|
}
|
|
});
|
|
},
|
|
|
|
// 打开大输入框编辑弹窗
|
|
openEditDialog(row, fieldName, label, title) {
|
|
this.editDialog.visible = true
|
|
this.editDialog.title = title
|
|
this.editDialog.label = label
|
|
this.editDialog.fieldName = fieldName
|
|
this.editDialog.row = row
|
|
this.editDialog.value = row[fieldName] || ''
|
|
this.$nextTick(() => this.$refs.editTextarea.focus());
|
|
},
|
|
|
|
// 关闭大输入框编辑弹窗
|
|
closeEditDialog() {
|
|
this.editDialog.visible = false
|
|
this.editDialog.title = ''
|
|
this.editDialog.label = ''
|
|
this.editDialog.fieldName = ''
|
|
this.editDialog.row = null
|
|
this.editDialog.value = ''
|
|
},
|
|
|
|
// 确认编辑
|
|
confirmEdit() {
|
|
if (this.editDialog.row && this.editDialog.fieldName) {
|
|
this.editDialog.row[this.editDialog.fieldName] = this.editDialog.value
|
|
}
|
|
this.closeEditDialog()
|
|
},
|
|
|
|
// 删除行
|
|
deleteRow(index, row) {
|
|
this.$confirm(`确定要删除发票号 "${row.cmcInvoice}" 吗？删除后将不会提交到后台。`, '删除确认', {
|
|
confirmButtonText: '确定删除',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
}).then(() => {
|
|
// 记录被删除的发票号
|
|
if (!this.deletedInvoices.includes(row.cmcInvoice)) {
|
|
this.deletedInvoices.push(row.cmcInvoice)
|
|
}
|
|
// 从预览数据中移除该行
|
|
this.previewData.splice(index, 1)
|
|
this.$message.success(`发票号 "${row.cmcInvoice}" 已删除`)
|
|
// 保存到缓存
|
|
this.saveToCache()
|
|
}).catch(() => {
|
|
// 用户取消删除
|
|
})
|
|
},
|
|
|
|
// 下载
|
|
async downloadFile () {
|
|
let file = {
|
|
id: 0,
|
|
fileName: ''
|
|
}
|
|
let tempData = {
|
|
orderRef1: 'ecss',
|
|
orderRef2: 'upLoadDel'
|
|
}
|
|
await queryFileId(tempData).then(({data}) => {
|
|
if (data && data.code === 0) {
|
|
file.id = data.data.id
|
|
file.fileName = data.data.fileName
|
|
} else {
|
|
this.$alert(data.msg, '错误', {
|
|
confirmButtonText: '确定'
|
|
})
|
|
}
|
|
})
|
|
|
|
await downLoadObjectFile(file).then(({data}) => {
|
|
// 不限制文件下载类型
|
|
const blob = new Blob([data], {type: "application/octet-stream"})
|
|
// 下载文件名称
|
|
const fileName = file.fileName
|
|
// a标签下载
|
|
const linkNode = document.createElement('a')
|
|
// a标签的download属性规定下载文件的名称
|
|
linkNode.download = fileName
|
|
linkNode.style.display = 'none'
|
|
// 生成一个Blob URL
|
|
linkNode.href = URL.createObjectURL(blob)
|
|
document.body.appendChild(linkNode)
|
|
// 模拟在按钮上的一次鼠标单击
|
|
linkNode.click()
|
|
// 释放URL 对象
|
|
URL.revokeObjectURL(linkNode.href)
|
|
document.body.removeChild(linkNode)
|
|
})
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped>
|
|
/deep/ .delClass .cell {
|
|
line-height: 24px !important;
|
|
font-size: 12px !important;
|
|
height: 24px !important;
|
|
}
|
|
|
|
/deep/ .customer-upload .el-upload .el-upload-dragger {
|
|
width: 580px;
|
|
}
|
|
|
|
/* 输入框样式优化 */
|
|
.el-input.is-readonly {
|
|
cursor: pointer !important;
|
|
}
|
|
|
|
.el-input.is-readonly .el-input__inner {
|
|
cursor: pointer !important;
|
|
background-color: #f8f9fa;
|
|
}
|
|
|
|
.el-input.is-readonly .el-input__inner:hover {
|
|
background-color: #e9ecef;
|
|
border-color: #409EFF;
|
|
}
|
|
|
|
/* 编辑图标样式 */
|
|
.el-input__suffix .el-icon-edit {
|
|
color: #409EFF;
|
|
transition: all 0.3s;
|
|
font-size: 14px;
|
|
padding: 2px;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.el-input__suffix .el-icon-edit:hover {
|
|
color: #ffffff;
|
|
background-color: #409EFF;
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
/* 编辑弹窗整体样式 */
|
|
.edit-dialog .el-dialog__body {
|
|
padding: 20px 20px 0;
|
|
}
|
|
|
|
.edit-dialog-tip {
|
|
margin-bottom: 15px;
|
|
color: #909399;
|
|
font-size: 12px;
|
|
background-color: #f4f4f5;
|
|
padding: 8px 12px;
|
|
border-radius: 4px;
|
|
border-left: 3px solid #409EFF;
|
|
}
|
|
|
|
.edit-dialog-tip .el-icon-info {
|
|
margin-right: 5px;
|
|
color: #409EFF;
|
|
}
|
|
|
|
/* 大输入框样式 */
|
|
.edit-textarea .el-textarea__inner {
|
|
resize: vertical !important;
|
|
min-height: 120px !important;
|
|
border: 1px solid #dcdfe6 !important;
|
|
border-radius: 4px !important;
|
|
padding: 8px 12px !important;
|
|
font-size: 14px !important;
|
|
line-height: 1.5 !important;
|
|
color: #606266 !important;
|
|
background-color: #fff !important;
|
|
transition: border-color 0.2s cubic-bezier(.645,.045,.355,1) !important;
|
|
box-sizing: border-box !important;
|
|
}
|
|
|
|
.edit-textarea .el-textarea__inner:focus {
|
|
outline: none !important;
|
|
border-color: #409EFF !important;
|
|
box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2) !important;
|
|
}
|
|
|
|
.edit-textarea .el-input__count {
|
|
color: #909399 !important;
|
|
background: #fff !important;
|
|
position: absolute !important;
|
|
font-size: 12px !important;
|
|
bottom: 5px !important;
|
|
right: 10px !important;
|
|
}
|
|
|
|
/* 修复弹窗中的表单项样式 */
|
|
.edit-dialog .el-form-item {
|
|
margin-bottom: 18px !important;
|
|
}
|
|
|
|
.edit-dialog .el-form-item__label {
|
|
color: #606266 !important;
|
|
font-weight: 500 !important;
|
|
line-height: 1.5 !important;
|
|
padding: 0 0 8px 0 !important;
|
|
box-sizing: border-box !important;
|
|
font-size: 14px !important;
|
|
}
|
|
|
|
/* 编辑弹窗按钮样式 */
|
|
.edit-dialog .dialog-footer {
|
|
text-align: right !important;
|
|
padding: 15px 20px 20px !important;
|
|
}
|
|
|
|
.edit-dialog .dialog-footer .el-button {
|
|
margin-left: 10px !important;
|
|
}
|
|
|
|
/* 确保弹窗内容不会溢出 */
|
|
.edit-dialog .el-dialog__wrapper {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.edit-dialog .el-dialog {
|
|
margin-top: 5vh !important;
|
|
margin-bottom: 50px !important;
|
|
}
|
|
|
|
/* 表格输入框提示文字 */
|
|
.el-table .el-input__inner::placeholder {
|
|
font-size: 12px;
|
|
color: #c0c4cc;
|
|
}
|
|
|
|
</style>
|