|
|
|
@ -1,22 +1,22 @@ |
|
|
|
<template> |
|
|
|
<div class="customer-css"> |
|
|
|
<el-dialog :title="titleCon" v-drag v-bind="$attrs" v-on="$listeners" |
|
|
|
width="210px" style="height: 680px;" class="customer-dialog"> |
|
|
|
<el-form :inline="true" label-position="top" @submit.native.prevent style="height: 60px;" |
|
|
|
label-width="80px"> |
|
|
|
<!-- 半成品卷卷号 --> |
|
|
|
<el-row> |
|
|
|
<el-col :span="24" style="margin-left: 35px;"> |
|
|
|
<el-form-item :label=labels.sfdcRoll> |
|
|
|
<el-input ref="newRollNo" v-model="pageData.newRollNo" style="width: 120px;" ></el-input> |
|
|
|
</el-form-item> |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
</el-form> |
|
|
|
width="380px" class="switch-roll-dialog"> |
|
|
|
<div class="switch-roll-content"> |
|
|
|
<el-form label-position="top" @submit.native.prevent label-width="100px"> |
|
|
|
<!-- 半成品卷卷号 --> |
|
|
|
<el-row> |
|
|
|
<el-col :span="24"> |
|
|
|
<el-form-item :label="labels.sfdcRoll" class="form-item-enhanced"> |
|
|
|
<el-input ref="newRollNo" v-model="pageData.newRollNo" placeholder="请输入半成品卷卷号" size="large" clearable style="width: 100%;"></el-input> |
|
|
|
</el-form-item> |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
</el-form> |
|
|
|
</div> |
|
|
|
<span slot="footer" class="dialog-footer"> |
|
|
|
<el-button type="primary" @click="switchRollBun">{{ buttons.confirmButton }}</el-button> |
|
|
|
<el-button type="primary" @click="closeDialog" style="margin-bottom: 10px;">{{ buttons.closeButton }}</el-button> |
|
|
|
<!-- <el-button v-if="showDefault" @click="saveMultiLanguage()" type="primary">多语言设置</el-button>--> |
|
|
|
<button class="action-btn secondary" @click="switchRollBun">{{ buttons.confirmButton }}</button> |
|
|
|
<button class="action-btn secondary" @click="closeDialog">{{ buttons.closeButton }}</button> |
|
|
|
</span> |
|
|
|
</el-dialog> |
|
|
|
|
|
|
|
@ -298,23 +298,137 @@ export default { |
|
|
|
</script> |
|
|
|
|
|
|
|
<style scoped lang="scss"> |
|
|
|
/*调节页面button和input的上下间距*/ |
|
|
|
.customer-css .customer-button{ |
|
|
|
margin-top: 25px; |
|
|
|
} |
|
|
|
// 切换卷对话框样式 - 参考材料上机对话框 |
|
|
|
.switch-roll-dialog { |
|
|
|
::v-deep .el-dialog { |
|
|
|
border-radius: 8px; |
|
|
|
overflow: hidden; |
|
|
|
|
|
|
|
/*调节fieldset下的样式*/ |
|
|
|
.customer-fieldset .customer-item{ |
|
|
|
margin-top: -15px; |
|
|
|
} |
|
|
|
.el-dialog__header { |
|
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
|
|
|
padding: 18px 20px; |
|
|
|
|
|
|
|
.el-dialog__title { |
|
|
|
color: #fff; |
|
|
|
font-size: 16px; |
|
|
|
font-weight: 600; |
|
|
|
} |
|
|
|
|
|
|
|
.el-dialog__headerbtn { |
|
|
|
.el-dialog__close { |
|
|
|
color: #fff; |
|
|
|
font-size: 18px; |
|
|
|
|
|
|
|
&:hover { |
|
|
|
color: #f0f0f0; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.el-dialog__body { |
|
|
|
padding: 25px; |
|
|
|
background-color: #f8f9fa; |
|
|
|
} |
|
|
|
|
|
|
|
/*fieldset下table的样式*/ |
|
|
|
.customer-fieldset /deep/ .el-table__header th.is-leaf{ |
|
|
|
line-height: 16px; |
|
|
|
.el-dialog__footer { |
|
|
|
padding: 15px 20px; |
|
|
|
background-color: #fff; |
|
|
|
border-top: 1px solid #e9ecef; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
/deep/ .customer-tab .el-tabs__content{ |
|
|
|
padding: 0px !important; |
|
|
|
.switch-roll-content { |
|
|
|
.form-item-enhanced { |
|
|
|
margin-bottom: 20px; |
|
|
|
|
|
|
|
::v-deep .el-form-item__label { |
|
|
|
color: #495057; |
|
|
|
font-weight: 500; |
|
|
|
font-size: 14px; |
|
|
|
margin-bottom: 8px; |
|
|
|
} |
|
|
|
|
|
|
|
::v-deep .el-input__inner { |
|
|
|
border-radius: 6px; |
|
|
|
border: 1px solid #dee2e6; |
|
|
|
transition: all 0.3s; |
|
|
|
height: 42px; |
|
|
|
line-height: 42px; |
|
|
|
font-size: 15px; |
|
|
|
|
|
|
|
&:focus { |
|
|
|
border-color: #667eea; |
|
|
|
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
::v-deep .el-input__prefix, |
|
|
|
::v-deep .el-input__suffix { |
|
|
|
line-height: 42px; |
|
|
|
} |
|
|
|
|
|
|
|
::v-deep .el-input__icon { |
|
|
|
line-height: 42px; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
// 底部按钮样式 - 参考材料上机对话框 |
|
|
|
.dialog-footer { |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
gap: 12px; |
|
|
|
padding: 0; |
|
|
|
|
|
|
|
.action-btn { |
|
|
|
min-width: 80px; |
|
|
|
padding: 6px 16px; |
|
|
|
border-radius: 16px; |
|
|
|
font-size: 13px; |
|
|
|
font-weight: 500; |
|
|
|
cursor: pointer; |
|
|
|
transition: all 0.2s ease; |
|
|
|
display: inline-flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
gap: 4px; |
|
|
|
|
|
|
|
i { |
|
|
|
font-size: 13px; |
|
|
|
} |
|
|
|
|
|
|
|
&.primary { |
|
|
|
background: #17B3A3; |
|
|
|
border: none; |
|
|
|
color: white; |
|
|
|
|
|
|
|
&:hover { |
|
|
|
background: #13998b; |
|
|
|
box-shadow: 0 4px 12px rgba(23, 179, 163, 0.4); |
|
|
|
transform: translateY(-1px); |
|
|
|
} |
|
|
|
|
|
|
|
&:active { |
|
|
|
transform: translateY(0); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
&.secondary { |
|
|
|
background: white; |
|
|
|
border: 1px solid #17B3A3; |
|
|
|
color: #17B3A3; |
|
|
|
|
|
|
|
&:hover { |
|
|
|
background: #17B3A3; |
|
|
|
color: white; |
|
|
|
} |
|
|
|
|
|
|
|
&:active { |
|
|
|
transform: scale(0.98); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
fengyuan_yang
3 weeks ago