fengyuan_yang
/
boying-vue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

样式调整

master
han\hanst 5 months ago
parent
9f9542a26a
commit
68c1f1a614
1 changed files with 616 additions and 204 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 580
      src/views/modules/qc/qcPartAttribute.vue

580
src/views/modules/qc/qcPartAttribute.vue
View File

@ -94,98 +94,169 @@
</el-pagination>
<!-- 物料属性新增/修改 -->
<el-dialog title="物料档案编辑" :close-on-click-modal="false" v-drag :visible.sync="modalFlag" width="685px">
<el-form :inline="true" label-position="top" :model="modalData" :rules="rules" style="margin-left: 7px">
<el-dialog title="物料档案编辑" :close-on-click-modal="false" v-drag :visible.sync="modalFlag" width="900px" class="part-edit-dialog">
<div class="dialog-content">
<el-form :model="modalData" :rules="rules" label-position="top">
<!-- 基本信息区域 -->
<div class="form-section">
<div class="section-title">基本信息</div>
<el-row :gutter="20">
<el-col :span="8">
<el-form-item label="物料编码">
<el-input v-model="modalData.partNo" disabled style="width: 120px"></el-input>
<el-input v-model="modalData.partNo" disabled></el-input>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="物料名称">
<el-input v-model="modalData.partDesc" disabled style="width: 250px"></el-input>
<el-input v-model="modalData.partDesc" disabled></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="物料分类">
<el-input v-model="modalData.partType" disabled style="width: 100px"></el-input>
<el-input v-model="modalData.partType" disabled></el-input>
</el-form-item>
</el-form>
<el-form :inline="true" label-position="top" style="margin-left: 7px">
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="8">
<el-form-item label="计量单位">
<el-input v-model="modalData.umId" disabled style="width: 120px"></el-input>
<el-input v-model="modalData.umId" disabled></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="规格型号">
<el-input v-model="modalData.spec" disabled style="width: 120px"></el-input>
<el-input v-model="modalData.spec" disabled></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="状态">
<el-select v-model="modalData.active" style="width: 100%">
<el-option label="启用" value="Y"></el-option>
<el-option label="弃用" value="N"></el-option>
</el-select>
</el-form-item>
<el-form-item style="margin-top: 23px">
<el-checkbox v-model="modalData.expirationFlag" :disabled="modalDisableFlag" true-label="Y">物料有效期管理</el-checkbox>
</el-col>
</el-row>
</div>
<!-- 有效期管理区域 -->
<div class="form-section">
<div class="section-title">有效期管理</div>
<el-row :gutter="20">
<el-col :span="8">
<el-form-item label=" ">
<el-checkbox v-model="modalData.expirationFlag" :disabled="modalDisableFlag" true-label="Y">启用物料有效期管理</el-checkbox>
</el-form-item>
<el-form-item label="有效期天数" style="margin-left: 10px">
<el-input-number :controls="false" :step="0" v-model="modalData.expirationDay" :disabled="modalDisableFlag" style="width: 100px"></el-input-number>
</el-col>
<el-col :span="8">
<el-form-item label="有效期天数">
<el-input-number :controls="false" :step="0" v-model="modalData.expirationDay" :disabled="modalDisableFlag" style="width: 100%"></el-input-number>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="有效期预警天数">
<el-input-number :controls="false" :step="0" v-model="modalData.expirationWarningDay" :disabled="modalDisableFlag" style="width: 100px"></el-input-number>
<el-input-number :controls="false" :step="0" v-model="modalData.expirationWarningDay" :disabled="modalDisableFlag" style="width: 100%"></el-input-number>
</el-form-item>
</el-form>
<el-form :inline="true" label-position="top" style="margin-left: 7px">
</el-col>
</el-row>
</div>
<!-- 仓库配置区域 -->
<div class="form-section">
<div class="section-title">仓库配置</div>
<el-row :gutter="20">
<el-col :span="8">
<el-form-item label="超入比例">
<el-input-number :controls="false" :step="0" v-model="modalData.exceedInRatio" :disabled="modalDisableFlag" style="width: 120px"></el-input-number>
<el-input-number :controls="false" :step="0" v-model="modalData.exceedInRatio" :disabled="modalDisableFlag" style="width: 100%"></el-input-number>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="超领比例">
<el-input-number :controls="false" :step="0" v-model="modalData.exceedOutRatio" style="width: 100%"></el-input-number>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="8">
<el-form-item>
<span v-if="modalDisableFlag" slot="label">入库默认仓库</span>
<span v-else style="cursor: pointer" slot="label" @click="getBaseList(20, 1)"><a herf="#">入库默认仓库</a></span>
<el-input v-model="modalData.inboundWarehouseId" @change="inWarehouseBlur(20)" style="width: 80px"></el-input>
<el-input v-model="modalData.inboundWarehouseName" disabled style="width: 165px"></el-input>
<span v-else style="cursor: pointer" slot="label" @click="getBaseList(20, 1)"><a href="#">入库默认仓库</a></span>
<el-input-group>
<el-input v-model="modalData.inboundWarehouseId" @change="inWarehouseBlur(20)" style="width: 25%"></el-input>
<el-input v-model="modalData.inboundWarehouseName" disabled style="width: 75%"></el-input>
</el-input-group>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item>
<span style="cursor: pointer" slot="label" @click="getBaseList(22)"><a herf="#">默认库位</a></span>
<el-input v-model="modalData.inboundLocationId" @change="locationBlur(22)" style="width: 80px"></el-input>
<el-input v-model="modalData.inboundLocationName" disabled style="width: 165px"></el-input>
</el-form-item>
</el-form>
<el-form :inline="true" label-position="top" style="margin-left: 7px">
<el-form-item label="超领比例">
<el-input-number :controls="false" :step="0" v-model="modalData.exceedOutRatio" style="width: 120px"></el-input-number>
<span style="cursor: pointer" slot="label" @click="getBaseList(20, 2)"><a href="#">领料默认仓库</a></span>
<el-input-group>
<el-input v-model="modalData.outboundWarehouseId" @change="outWarehouseBlur(20)" style="width: 25%"></el-input>
<el-input v-model="modalData.outboundWarehouseName" disabled style="width: 75%"></el-input>
</el-input-group>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item>
<span style="cursor: pointer" slot="label" @click="getBaseList(20, 2)"><a herf="#">领料默认仓库</a></span>
<el-input v-model="modalData.outboundWarehouseId" @change="outWarehouseBlur(20)" style="width: 80px"></el-input>
<el-input v-model="modalData.outboundWarehouseName" disabled style="width: 165px"></el-input>
</el-form-item>
<el-form-item label="状态">
<el-select v-model="modalData.active" style="width: 80px">
<el-option label="启用" value="Y"></el-option>
<el-option label="弃用" value="N"></el-option>
</el-select>
<span style="cursor: pointer" slot="label" @click="getBaseList(22)"><a href="#">默认库位</a></span>
<el-input-group>
<el-input v-model="modalData.inboundLocationId" @change="locationBlur(22)" style="width: 25%"></el-input>
<el-input v-model="modalData.inboundLocationName" disabled style="width: 75%"></el-input>
</el-input-group>
</el-form-item>
</el-form>
<el-form :inline="true" label-position="top" style="margin-left: 7px">
<el-form-item style="margin-top: 13px">
</el-col>
</el-row>
</div>
<!-- 检验配置区域 -->
<div class="form-section">
<div class="section-title">检验配置</div>
<el-row :gutter="20">
<el-col :span="4">
<el-checkbox v-model="modalData.iqcExempt" true-label="Y">IQC检验</el-checkbox>
</el-form-item>
<el-form-item style="margin-top: 13px;margin-left: 20px">
</el-col>
<el-col :span="4">
<el-checkbox v-model="modalData.faiExempt" true-label="Y">FAI检验</el-checkbox>
</el-form-item>
<el-form-item style="margin-top: 13px;margin-left: 20px">
</el-col>
<el-col :span="4">
<el-checkbox v-model="modalData.ipqcExempt" true-label="Y">IPQC检验</el-checkbox>
</el-form-item>
<el-form-item style="margin-top: 13px;margin-left: 20px">
</el-col>
<el-col :span="4">
<el-checkbox v-model="modalData.pqcExempt" true-label="Y">PQC检验</el-checkbox>
</el-form-item>
<el-form-item style="margin-top: 13px;margin-left: 20px">
</el-col>
<el-col :span="4">
<el-checkbox v-model="modalData.fqcExempt" true-label="Y">FQC检验</el-checkbox>
</el-form-item>
<el-form-item style="margin-top: 13px;margin-left: 20px">
</el-col>
<el-col :span="4">
<el-checkbox v-model="modalData.oqcExempt" true-label="Y">OQC检验</el-checkbox>
</el-form-item>
</el-form>
<el-form :inline="true" label-position="top" style="margin-left: 7px;margin-top: 2px">
</el-col>
</el-row>
</div>
<!-- 巡检配置区域 -->
<div class="form-section">
<div class="section-title">巡检配置</div>
<el-row :gutter="20">
<el-col :span="8">
<el-form-item label="首次巡检时长(h)">
<el-input-number :controls="false" :step="0" v-model="modalData.firstInspectionDuration" style="width: 120px"></el-input-number>
<el-input-number :controls="false" :step="0" v-model="modalData.firstInspectionDuration" style="width: 100%"></el-input-number>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="下次巡检时长(h)">
<el-input-number :controls="false" :step="0" v-model="modalData.nextInspectionDuration" style="width: 120px"></el-input-number>
<el-input-number :controls="false" :step="0" v-model="modalData.nextInspectionDuration" style="width: 100%"></el-input-number>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="累计巡检时长(h)">
<el-input-number :controls="false" :step="0" v-model="modalData.totalInspectionDuration" style="width: 120px"></el-input-number>
<el-input-number :controls="false" :step="0" v-model="modalData.totalInspectionDuration" style="width: 100%"></el-input-number>
</el-form-item>
</el-col>
</el-row>
</div>
</el-form>
</div>
<el-footer style="height:35px;margin-top: 15px;text-align:center">
<el-button type="primary" :loading="saveLoading" @click="saveData()">保存</el-button>
<el-button type="primary" @click="modalFlag = false">关闭</el-button>
@ -312,24 +383,33 @@
</el-tabs>
<!-- 检验模板 -->
<el-dialog title="检验模板清单" :close-on-click-modal="false" v-drag :visible.sync="detailModelFlag" width="1400px">
<el-form :inline="true" label-position="top">
<el-form-item :label="'物料编码'">
<el-input v-model="detailData.partNo" readonly style="width: 120px"></el-input>
</el-form-item>
<el-form-item :label="'物料名称'">
<el-input v-model="detailData.partDesc" readonly style="width: 300px"></el-input>
<el-dialog title="检验模板清单" :close-on-click-modal="false" v-drag :visible.sync="detailModelFlag" width="1500px" class="inspection-template-dialog">
<div class="template-header">
<el-row :gutter="20">
<el-col :span="6">
<el-form-item label="物料编码">
<el-input v-model="detailData.partNo" readonly></el-input>
</el-form-item>
<el-form-item :label="' '">
<el-button type="primary" @click="addFastModal()">新增</el-button>
</el-col>
<el-col :span="12">
<el-form-item label="物料名称">
<el-input v-model="detailData.partDesc" readonly></el-input>
</el-form-item>
</el-form>
</el-col>
<el-col :span="6">
<el-button type="primary" @click="addFastModal()" icon="el-icon-plus">新增模板</el-button>
</el-col>
</el-row>
</div>
<!-- 检验项目展示列表 -->
<div class="rq ">
<div class="template-table-container">
<el-table
:height="300"
:height="400"
:data="detailList"
border
stripe
class="inspection-table"
style="width: 100%;">
<el-table-column
v-for="(item,index) in columnDetailList" :key="index"
@ -346,86 +426,163 @@
<span v-if="item.columnImage"><img :src="scope.row[item.columnProp]" style="width: 100px; height: 80px"/></span>
</template>
</el-table-column>
<el-table-column
prop=""
header-align="center"
align="center"
min-width="170"
min-width="180"
label="检验水平">
<template slot-scope="scope">
<el-button type="primary" @click="chooseLevel(scope.row)" style="width:18%;padding: 3px 7px">·&nbsp;·&nbsp;·</el-button>
<el-input v-model="scope.row.samplingLevelDesc" readonly style="width:77%"></el-input>
<div class="input-button-group">
<el-button
type="text"
@click="chooseLevel(scope.row)"
class="select-button"
icon="el-icon-search">
选择
</el-button>
<el-input
v-model="scope.row.samplingLevelDesc"
readonly
placeholder="请选择检验水平"
class="readonly-input">
</el-input>
</div>
</template>
</el-table-column>
<el-table-column
prop=""
header-align="center"
align="center"
min-width="60"
min-width="100"
label="检验周期(h)">
<template slot-scope="scope">
<el-input v-model="scope.row.inspectionCycle" type="number" style="height: 11px;padding: 0px " allow-create>;width:98%"</el-input>
<el-input-number
v-model="scope.row.inspectionCycle"
:min="0"
:precision="2"
controls-position="right"
style="width: 100%"
size="small">
</el-input-number>
</template>
</el-table-column>
<el-table-column
prop=""
header-align="center"
align="center"
min-width="170"
min-width="180"
label="抽样方案">
<template slot-scope="scope">
<el-button type="primary" @click="chooseProgrammeRow(scope.row)" style="width:18%;padding: 3px 7px" >·&nbsp;·&nbsp;·</el-button>
<el-input v-model="scope.row.samplingProgrammeDesc" readonly style="width:77%"></el-input>
<div class="input-button-group">
<el-button
type="text"
@click="chooseProgrammeRow(scope.row)"
class="select-button"
icon="el-icon-search">
选择
</el-button>
<el-input
v-model="scope.row.samplingProgrammeDesc"
readonly
placeholder="请选择抽样方案"
class="readonly-input">
</el-input>
</div>
</template>
</el-table-column>
<el-table-column
prop=""
header-align="center"
align="center"
min-width="60"
min-width="80"
label="AQL">
<template slot-scope="scope">
<el-input v-model="scope.row.aql" type="number" style="height: 11px;padding: 0px " allow-create>;width:98%"</el-input>
<el-input-number
v-model="scope.row.aql"
:min="0"
:precision="2"
controls-position="right"
style="width: 100%"
size="small">
</el-input-number>
</template>
</el-table-column>
<el-table-column
prop=""
header-align="center"
align="center"
min-width="60"
min-width="80"
label="AC">
<template slot-scope="scope">
<el-input v-model="scope.row.ac" type="number" style="height: 11px;padding: 0px " allow-create>;width:98%"</el-input>
<el-input-number
v-model="scope.row.ac"
:min="0"
:precision="0"
controls-position="right"
style="width: 100%"
size="small">
</el-input-number>
</template>
</el-table-column>
<el-table-column
prop=""
header-align="center"
align="center"
min-width="60"
min-width="80"
label="RE">
<template slot-scope="scope">
<el-input v-model="scope.row.re" type="number" style="height: 11px;padding: 0px " allow-create>;width:98%"</el-input>
<el-input-number
v-model="scope.row.re"
:min="0"
:precision="0"
controls-position="right"
style="width: 100%"
size="small">
</el-input-number>
</template>
</el-table-column>
<el-table-column
prop="templateRemark"
header-align="center"
align="center"
min-width="120"
label="备注">
<template slot-scope="scope">
<el-input
v-model="scope.row.templateRemark"
placeholder="请输入备注"
size="small">
</el-input>
</template>
</el-table-column>
<el-table-column
fixed="right"
header-align="center"
align="center"
width="80"
width="100"
label="操作">
<template slot-scope="scope">
<a style="cursor: pointer" @click="deletePartAttributeDetails(scope.row)">删除模板</a>
<el-button
type="text"
size="small"
@click="deletePartAttributeDetails(scope.row)"
style="color: #f56c6c;">
删除
</el-button>
</template>
</el-table-column>
</el-table>
</div>
<el-footer style="height:35px;margin-top: 15px;text-align:center">
<el-button type="primary" @click="saveDetail()">保存</el-button>
<el-button type="primary" @click="detailModelFlag = false">关闭</el-button>
@ -2379,4 +2536,259 @@
height: auto;
line-height: 1.5;
}
/* 物料编辑弹出框样式 - 超紧凑版 */
.part-edit-dialog .dialog-content {
padding: 8px;
max-height: 70vh;
overflow-y: auto;
}
.part-edit-dialog .form-section {
margin-bottom: 12px;
padding: 8px;
border-radius: 4px;
border-left: 2px solid #17b3a3;
}
.part-edit-dialog .section-title {
font-size: 13px;
font-weight: 600;
color: #303133;
margin-bottom: 2px;
padding-bottom: 3px;
border-bottom: 1px solid #e4e7ed;
}
.part-edit-dialog .el-form-item {
margin-bottom: 6px;
}
.part-edit-dialog .el-form-item__label {
font-weight: 500;
color: #606266;
font-size: 12px;
line-height: 1.2;
}
.part-edit-dialog .el-input__inner,
.part-edit-dialog .el-input-number .el-input__inner {
border-radius: 4px;
font-size: 12px;
height: 32px;
line-height: 32px;
}
.part-edit-dialog .el-input-group .el-input:first-child .el-input__inner {
border-right: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.part-edit-dialog .el-input-group .el-input:last-child .el-input__inner {
border-left: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.part-edit-dialog .el-checkbox {
font-size: 12px;
line-height: 1.2;
}
.part-edit-dialog .el-select .el-input__inner {
height: 32px;
line-height: 32px;
}
/* 检验模板弹出框样式 - 超紧凑版 */
.inspection-template-dialog .template-header {
padding: 10px;
background: #f5f7fa;
border-radius: 4px;
margin-bottom: 10px;
border: 1px solid #e4e7ed;
}
.inspection-template-dialog .template-header .el-form-item {
margin-bottom: 0;
}
.inspection-template-dialog .template-header .el-form-item__label {
font-weight: 600;
color: #303133;
font-size: 12px;
}
.inspection-template-dialog .template-header .el-input__inner {
font-size: 12px;
height: 32px;
line-height: 32px;
}
.inspection-template-dialog .template-table-container {
border-radius: 6px;
overflow: hidden;
border: 1px solid #e4e7ed;
}
.inspection-template-dialog .inspection-table {
font-size: 12px;
}
.inspection-template-dialog .inspection-table .el-table__header-wrapper th {
background: #f5f7fa;
color: #303133;
font-weight: 600;
font-size: 12px;
padding: 8px 0;
}
.inspection-template-dialog .input-button-group {
display: flex;
align-items: center;
gap: 8px;
}
.inspection-template-dialog .select-button {
min-width: 45px;
padding: 3px 8px;
font-size: 11px;
border: 1px solid #dcdfe6;
border-radius: 3px;
background: #fff;
color: #606266;
transition: all 0.2s;
}
.inspection-template-dialog .select-button:hover {
color: #409EFF;
border-color: #c6e2ff;
background-color: #ecf5ff;
}
.inspection-template-dialog .readonly-input {
flex: 1;
}
.inspection-template-dialog .readonly-input .el-input__inner {
background-color: #f5f7fa;
border-color: #e4e7ed;
font-size: 11px;
height: 28px;
line-height: 28px;
}
.inspection-template-dialog .el-input-number {
width: 100%;
}
.inspection-template-dialog .el-input-number .el-input__inner {
text-align: center;
font-size: 11px;
height: 28px;
line-height: 28px;
}
.inspection-template-dialog .el-input__inner {
font-size: 11px;
height: 28px;
line-height: 28px;
}
/* 按钮样式 - 保持Element UI风格 */
/* 删除按钮样式 */
.inspection-template-dialog .el-button[style*="color: #f56c6c"] {
color: #f56c6c !important;
font-size: 11px;
padding: 3px 8px;
}
.inspection-template-dialog .el-button[style*="color: #f56c6c"]:hover {
color: #f78989 !important;
}
/* 响应式设计 */
@media (max-width: 1200px) {
.part-edit-dialog {
width: 95% !important;
}
.inspection-template-dialog {
width: 95% !important;
}
}
@media (max-width: 768px) {
.part-edit-dialog .el-col,
.inspection-template-dialog .el-col {
margin-bottom: 15px;
}
.inspection-template-dialog .input-button-group {
flex-direction: column;
gap: 5px;
}
.inspection-template-dialog .select-button {
width: 100%;
}
}
/* 表格行悬停效果 */
.inspection-template-dialog .el-table--enable-row-hover .el-table__body tr:hover > td {
background-color: #f5f7fa;
}
/* 仓库配置区域特殊样式 */
.part-edit-dialog .form-section .el-input-group {
display: flex;
width: 100%;
}
.part-edit-dialog .form-section .el-input-group .el-input:first-child {
flex: 0 0 25%;
}
.part-edit-dialog .form-section .el-input-group .el-input:last-child {
flex: 1;
}
.part-edit-dialog .form-section .el-input-group .el-input__inner {
border-radius: 0;
}
.part-edit-dialog .form-section .el-input-group .el-input:first-child .el-input__inner {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
border-right: 0;
}
.part-edit-dialog .form-section .el-input-group .el-input:last-child .el-input__inner {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
border-left: 0;
}
/* 滚动条样式 */
.part-edit-dialog .dialog-content::-webkit-scrollbar {
width: 6px;
}
.part-edit-dialog .dialog-content::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 3px;
}
.part-edit-dialog .dialog-content::-webkit-scrollbar-thumb {
background: #c0c4cc;
border-radius: 3px;
}
.part-edit-dialog .dialog-content::-webkit-scrollbar-thumb:hover {
background: #909399;
}
</style>
Write Preview
Loading…
Cancel
Save