| | |
| | | <template> |
| | | <view class="container"> |
| | | <!-- 头部 --> |
| | | <view class="header"> |
| | | <view class="title">入库检验</view> |
| | | <view class="order-number">检验单号: {{formData.releaseNo}}</view> |
| | | </view> |
| | | |
| | | <!-- 基本信息 --> |
| | | <view class="section"> |
| | | <view class="section-header">基本信息</view> |
| | | <view class="section-body"> |
| | | <view class="info-grid"> |
| | | <view class="info-item"> |
| | | <view class="info-label">检验单号</view> |
| | | <view class="info-value">{{ formData.releaseNo }}</view> |
| | | </view> |
| | | <view class="info-item"> |
| | | <view class="info-label">创建人</view> |
| | | <view class="info-value">{{ formData.createBy }}</view> |
| | | </view> |
| | | <view class="info-item"> |
| | | <view class="info-label">创建时间</view> |
| | | <view class="info-value">{{ formData.createDate }}</view> |
| | | </view> |
| | | <view class="info-item"> |
| | | <view class="info-label">生产线别</view> |
| | | <superwei-combox v-if="isUpdate" :candidates="DAA020List" placeholder="请选择或输入" |
| | | v-model="formData.lineName" |
| | | @select="onDaa020Change" |
| | | class="picker-input"></superwei-combox> |
| | | <view v-else class="info-value">{{ formData.daa015 }}</view> |
| | | </view> |
| | | <view class="info-item"> |
| | | <view class="info-label">工单号</view> |
| | | <superwei-combox v-if="isUpdate" :candidates="DAA001List" placeholder="请选择或输入" |
| | | v-model="formData.billNo" |
| | | @select="onDaa001Change" |
| | | class="picker-input"></superwei-combox> |
| | | <view v-else class="info-value">{{ formData.billNo }}</view> |
| | | </view> |
| | | <view class="info-item"> |
| | | <view class="info-label">送检批次</view> |
| | | <input class="info-input" type="text" v-model="formData.rbillNo" :readonly="true" /> |
| | | </view> |
| | | <view class="info-item"> |
| | | <view class="info-label">物料编码</view> |
| | | <view class="info-value">{{ formData.itemNo }}</view> |
| | | </view> |
| | | <view class="info-item"> |
| | | <view class="info-label">产品名称</view> |
| | | <view class="info-value">{{ formData.itemName }}</view> |
| | | </view> |
| | | <view class="info-item"> |
| | | <view class="info-label">规格型号</view> |
| | | <view class="info-value">{{ formData.itemModel }}</view> |
| | | </view> |
| | | <view class="info-item"> |
| | | <view class="info-label">送检数量</view> |
| | | <view class="info-value highlight">{{ formData.quantity }}</view> |
| | | </view> |
| | | <view class="info-item"> |
| | | <view class="info-label">报工人</view> |
| | | <view class="info-value">{{ formData.bgr }}</view> |
| | | </view> |
| | | <view class="info-item"> |
| | | <view class="info-label">检验结果</view> |
| | | <view class="info-value">{{ formData.fcheckResu }}</view> |
| | | </view> |
| | | <view class="info-item" v-if="formData.remarks"> |
| | | <view class="info-label">不合格描述</view> |
| | | <view class="info-value danger">{{ formData.remarks }}</view> |
| | | <view class="container"> |
| | | <!-- 头部 --> |
| | | <view class="header"> |
| | | <view class="title">入库检验</view> |
| | | <view class="order-number">检验单号: {{formData.releaseNo}}</view> |
| | | </view> |
| | | |
| | | <!-- 基本信息 --> |
| | | <view class="section"> |
| | | <view class="section-header">基本信息</view> |
| | | <view class="section-body"> |
| | | <view class="info-grid"> |
| | | <view class="info-item"> |
| | | <view class="info-label">检验单号</view> |
| | | <view class="info-value">{{ formData.releaseNo }}</view> |
| | | </view> |
| | | <view class="info-item"> |
| | | <view class="info-label">创建人</view> |
| | | <view class="info-value">{{ formData.createBy }}</view> |
| | | </view> |
| | | <view class="info-item"> |
| | | <view class="info-label">创建时间</view> |
| | | <view class="info-value">{{ formData.createDate }}</view> |
| | | </view> |
| | | <view class="info-item"> |
| | | <view class="info-label">生产线别</view> |
| | | <superwei-combox v-if="isUpdate" :candidates="DAA020List" placeholder="请选择或输入" |
| | | v-model="formData.lineName" |
| | | @select="onDaa020Change" |
| | | class="picker-input"></superwei-combox> |
| | | <view v-else class="info-value">{{ formData.daa015 }}</view> |
| | | </view> |
| | | <view class="info-item"> |
| | | <view class="info-label">工单号</view> |
| | | <superwei-combox v-if="isUpdate" :candidates="DAA001List" placeholder="请选择或输入" |
| | | v-model="formData.rBillNo" |
| | | @select="onDaa001Change" |
| | | class="picker-input"></superwei-combox> |
| | | <view v-else class="info-value">{{ formData.rBillNo }}</view> |
| | | </view> |
| | | <view class="info-item"> |
| | | <view class="info-label">送检批次</view> |
| | | <superwei-combox v-if="isUpdate" :candidates="billNoList" placeholder="请选择" |
| | | v-model="formData.billNo" |
| | | @select="onBillNoChange" |
| | | class="picker-input"></superwei-combox> |
| | | <view v-else class="info-value">{{ formData.billNo }}</view> |
| | | </view> |
| | | <view class="info-item"> |
| | | <view class="info-label">物料编码</view> |
| | | <view class="info-value">{{ formData.itemNo }}</view> |
| | | </view> |
| | | <view class="info-item"> |
| | | <view class="info-label">产品名称</view> |
| | | <view class="info-value">{{ formData.itemName }}</view> |
| | | </view> |
| | | <view class="info-item"> |
| | | <view class="info-label">规格型号</view> |
| | | <view class="info-value">{{ formData.itemModel }}</view> |
| | | </view> |
| | | <view class="info-item"> |
| | | <view class="info-label">送检数量</view> |
| | | <view class="info-value highlight">{{ formData.quantity }}</view> |
| | | </view> |
| | | <view class="info-item"> |
| | | <view class="info-label">报工人</view> |
| | | <view class="info-value">{{ formData.bgr }}</view> |
| | | </view> |
| | | <view class="info-item"> |
| | | <view class="info-label">检验结果</view> |
| | | <view class="info-value">{{ formData.fcheckResu }}</view> |
| | | </view> |
| | | <view class="info-item" v-if="formData.remarks"> |
| | | <view class="info-label">不合格描述</view> |
| | | <view class="info-value danger">{{ formData.remarks }}</view> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | |
| | | <!-- 检验项目 --> |
| | | <view class="section" v-if="tableData.length > 0"> |
| | | <view class="section-header">检验项目</view> |
| | | <view class="section-body"> |
| | | <view class="inspection-table"> |
| | | <table> |
| | | <thead> |
| | | <tr> |
| | | <th width="20%" style="text-align: center;">检验项目</th> |
| | | <th width="50%" style="text-align: center;">检验描述</th> |
| | | <th width="15%" style="text-align: center;">记录(点击)</th> |
| | | </tr> |
| | | </thead> |
| | | <tbody> |
| | | <tr v-for="(item, index) in tableData" :key="index"> |
| | | <td>{{ item.projName }}</td> |
| | | <td> |
| | | <view v-if="item.result=='合格'" class="watermark approved"> |
| | | {{ getStatusText(item.result) }} |
| | | </view> |
| | | <view v-if="item.result=='不合格'" class="watermark rejected"> |
| | | {{ getStatusText(item.result) }} |
| | | </view> |
| | | <view v-if="item.result==null || item.result=='未完成'" class="watermark pending"> |
| | | {{ getStatusText(item.result) }} |
| | | </view> |
| | | <view class="description-text">{{ item.projName }}</view> |
| | | </td> |
| | | <td> |
| | | <button v-if="item.isCheck >= item.levelNum" class="record-btn" @click="toDetail(item)">查看</button> |
| | | <button v-else class="record-btn" @click="toDetail(item)">填写</button> |
| | | </td> |
| | | </tr> |
| | | </tbody> |
| | | </table> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | |
| | | <!-- 操作按钮 --> |
| | | <view class="action-buttons"> |
| | | <button class="action-btn primary" v-if="isUpdate && !isShowTable" @click="getItem">生成检验单</button> |
| | | <button class="action-btn secondary" v-if="!isUpdate && !isShowTable" @click="toImage">上传/查看图片</button> |
| | | <button class="action-btn warning" v-if="!isUpdate && !isShowTable" @click="saveRemarks">添加不合格描述</button> |
| | | <button class="action-btn danger" v-if="!isUpdate && !isShowTable && this.formData.fsubmit != 1" @click="cleanResult">清除检验结果</button> |
| | | <button class="action-btn primary" v-if="isShowTable" @click="getTable">获取检验项目</button> |
| | | <button class="action-btn primary" v-if="isShowTable && isUpdate" @click="saveTable">生成检验项目</button> |
| | | </view> |
| | | |
| | | |
| | | <!-- 修改不合格描述弹出框 --> |
| | | <view v-if="showPopup" class="overlay"> |
| | | <view class="popup"> |
| | | <view class="popup-header"> |
| | | <h3>修改不合格描述</h3> |
| | | </view> |
| | | <view class="popup-content"> |
| | | <view class="input-group"> |
| | | <view class="input-label">不合格描述:</view> |
| | | <input class="input-field" type="text" v-model="remarks" placeholder="请输入不合格描述"/> |
| | | |
| | | <!-- 检验项目 --> |
| | | <view class="section" v-if="tableData.length > 0"> |
| | | <view class="section-header">检验项目</view> |
| | | <view class="section-body"> |
| | | <view class="inspection-table"> |
| | | <table> |
| | | <thead> |
| | | <tr> |
| | | <th width="20%" style="text-align: center;">检验项目</th> |
| | | <th width="50%" style="text-align: center;">检验描述</th> |
| | | <th width="15%" style="text-align: center;">记录(点击)</th> |
| | | </tr> |
| | | </thead> |
| | | <tbody> |
| | | <tr v-for="(item, index) in tableData" :key="index"> |
| | | <td>{{ item.projName }}</td> |
| | | <td> |
| | | <view v-if="item.result=='合格'" class="watermark approved"> |
| | | {{ getStatusText(item.result) }} |
| | | </view> |
| | | <view v-if="item.result=='不合格'" class="watermark rejected"> |
| | | {{ getStatusText(item.result) }} |
| | | </view> |
| | | <view v-if="item.result==null || item.result=='未完成'" class="watermark pending"> |
| | | {{ getStatusText(item.result) }} |
| | | </view> |
| | | <view class="description-text">{{ item.projName }}</view> |
| | | </td> |
| | | <td> |
| | | <button v-if="item.isCheck >= item.levelNum" class="record-btn" @click="toDetail(item)">查看</button> |
| | | <button v-else class="record-btn" @click="toDetail(item)">填写</button> |
| | | </td> |
| | | </tr> |
| | | </tbody> |
| | | </table> |
| | | </view> |
| | | </view> |
| | | <view class="popup-actions"> |
| | | <button class="action-btn primary" @click="edit">修改</button> |
| | | <button class="action-btn secondary" @click="showPopup = !showPopup">取消</button> |
| | | </view> |
| | | |
| | | <!-- 操作按钮 --> |
| | | <view class="action-buttons"> |
| | | <button class="action-btn primary" v-if="isUpdate && !isShowTable" @click="getItem">生成检验单</button> |
| | | <button class="action-btn secondary" v-if="!isUpdate && !isShowTable" @click="toImage">上传/查看图片</button> |
| | | <button class="action-btn warning" v-if="!isUpdate && !isShowTable" @click="saveRemarks">添加不合格描述</button> |
| | | <button class="action-btn danger" v-if="!isUpdate && !isShowTable && this.formData.fsubmit != 1" @click="cleanResult">清除检验结果</button> |
| | | <button class="action-btn primary" v-if="isShowTable" @click="getTable">获取检验项目</button> |
| | | <button class="action-btn primary" v-if="isShowTable && isUpdate" @click="saveTable">生成检验项目</button> |
| | | </view> |
| | | |
| | | |
| | | <!-- 修改不合格描述弹出框 --> |
| | | <view v-if="showPopup" class="overlay"> |
| | | <view class="popup"> |
| | | <view class="popup-header"> |
| | | <h3>修改不合格描述</h3> |
| | | </view> |
| | | <view class="popup-content"> |
| | | <view class="input-group"> |
| | | <view class="input-label">不合格描述:</view> |
| | | <input class="input-field" type="text" v-model="remarks" placeholder="请输入不合格描述"/> |
| | | </view> |
| | | </view> |
| | | <view class="popup-actions"> |
| | | <button class="action-btn primary" @click="edit">修改</button> |
| | | <button class="action-btn secondary" @click="showPopup = !showPopup">取消</button> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | |
| | | </view> |
| | | </template> |
| | | |
| | | <script> |
| | | export default { |
| | | data() { |
| | | return { |
| | | formData: { |
| | | id: "", |
| | | releaseNo: "", |
| | | createBy: "", |
| | | createDate: "", |
| | | daa020: "", |
| | | itemNo: "", |
| | | billNo: "", |
| | | catQty: "", |
| | | detailMem: "", |
| | | taskNo: "", |
| | | fcheckResu: "", |
| | | </view> |
| | | </template> |
| | | |
| | | <script> |
| | | export default { |
| | | data() { |
| | | return { |
| | | formData: { |
| | | id: "", |
| | | releaseNo: "", |
| | | createBy: "", |
| | | createDate: "", |
| | | daa020: "", |
| | | itemNo: "", |
| | | billNo: "", |
| | | catQty: "", |
| | | detailMem: "", |
| | | taskNo: "", |
| | | fcheckResu: "", |
| | | remarks: "", |
| | | rbillNo: "" |
| | | }, |
| | | |
| | | DAA020List: [], |
| | | |
| | | DAA001List: [], |
| | | |
| | | BillNoList: [], |
| | | |
| | | lineList: [], |
| | | |
| | | lineNo: "", |
| | | |
| | | tableData: [], |
| | | |
| | | isSubmit: true, |
| | | |
| | | isUpdate: true, |
| | | |
| | | isShowTable: false, |
| | | |
| | | remarks: "", |
| | | rbillNo: "" |
| | | }, |
| | | |
| | | DAA020List: [], |
| | | |
| | | DAA001List: [], |
| | | |
| | | BillNoList: [], |
| | | |
| | | lineList: [], |
| | | |
| | | lineNo: "", |
| | | |
| | | tableData: [], |
| | | |
| | | isSubmit: true, |
| | | |
| | | isUpdate: true, |
| | | |
| | | isShowTable: false, |
| | | |
| | | remarks: "", |
| | | |
| | | showPopup: false, |
| | | }; |
| | | }, |
| | | onLoad(options) { |
| | | //options中包含了url附带的参数 |
| | | |
| | | let params = options; |
| | | |
| | | if (params["id"]) { |
| | | this.isUpdate = false; |
| | | this.formData.id = params["id"]; |
| | | this.formData.releaseNo = params["releaseNo"]; |
| | | //getQaItemXj02 |
| | | this.init(); |
| | | } else { |
| | | //初始化检验单号 |
| | | this.$post({ |
| | | url: "/RKJ/getMaxReleaseNo" |
| | | }).then(res => { |
| | | this.formData.releaseNo = res.data.tbBillList; |
| | | this.formData.createBy = this.$loginInfo.account; |
| | | this.formData.createDate = this.$getDate("yyyy-mm-dd"); |
| | | }); |
| | | |
| | | //车间下拉框的初始化 |
| | | this.$post({ |
| | | url: "/XJ/getLineAll" |
| | | }).then(res => { |
| | | this.lineList = res.data.tbBillList; |
| | | this.DAA020List = res.data.tbBillList.map(item => item.lineName); |
| | | }) |
| | | } |
| | | }, |
| | | methods: { |
| | | getStatusClass(result) { |
| | | if (result === '合格') return 'status-pass'; |
| | | if (result === '不合格') return 'status-fail'; |
| | | return 'status-pending'; |
| | | |
| | | showPopup: false, |
| | | billNoList: [], |
| | | }; |
| | | }, |
| | | |
| | | getStatusText(status) { |
| | | const statusMap = { |
| | | approved: '合格', |
| | | rejected: '不合格', |
| | | pending: '待确认' |
| | | } |
| | | if (status == null || status == '未完成') { |
| | | return statusMap['pending'] || '待确认'; |
| | | } else if (status == '合格') { |
| | | return statusMap['approved'] || '合格'; |
| | | onLoad(options) { |
| | | //options中包含了url附带的参数 |
| | | |
| | | let params = options; |
| | | |
| | | if (params["id"]) { |
| | | this.isUpdate = false; |
| | | this.formData.id = params["id"]; |
| | | this.formData.releaseNo = params["releaseNo"]; |
| | | //getQaItemXj02 |
| | | this.init(); |
| | | } else { |
| | | return statusMap['rejected'] || '不合格'; |
| | | //初始化检验单号 |
| | | this.$post({ |
| | | url: "/RKJ/getMaxReleaseNo" |
| | | }).then(res => { |
| | | this.formData.releaseNo = res.data.tbBillList; |
| | | this.formData.createBy = this.$loginInfo.account; |
| | | this.formData.createDate = this.$getDate("yyyy-mm-dd"); |
| | | }); |
| | | |
| | | //车间下拉框的初始化 |
| | | this.$post({ |
| | | url: "/XJ/getLineAll" |
| | | }).then(res => { |
| | | this.lineList = res.data.tbBillList; |
| | | this.DAA020List = res.data.tbBillList.map(item => item.lineName); |
| | | }) |
| | | } |
| | | }, |
| | | |
| | | removeXJ() { |
| | | if (this.formData.id) { |
| | | methods: { |
| | | getStatusClass(result) { |
| | | if (result === '合格') return 'status-pass'; |
| | | if (result === '不合格') return 'status-fail'; |
| | | return 'status-pending'; |
| | | }, |
| | | |
| | | getStatusText(status) { |
| | | const statusMap = { |
| | | approved: '合格', |
| | | rejected: '不合格', |
| | | pending: '待确认' |
| | | } |
| | | if (status == null || status == '未完成') { |
| | | return statusMap['pending'] || '待确认'; |
| | | } else if (status == '合格') { |
| | | return statusMap['approved'] || '合格'; |
| | | } else { |
| | | return statusMap['rejected'] || '不合格'; |
| | | } |
| | | }, |
| | | |
| | | removeXJ() { |
| | | if (this.formData.id) { |
| | | this.$post({ |
| | | url: "/RKJ/removeXJ", |
| | | data: { |
| | | id: this.formData.id |
| | | } |
| | | }).then(res => { |
| | | if (res.data.tbBillList > 0) { |
| | | this.$showMessage("删除成功"); |
| | | //关闭当前页面,返回上一页面或多级页面 |
| | | uni.navigateBack(); |
| | | } else { |
| | | this.$showMessage("删除失败"); |
| | | } |
| | | }); |
| | | } else { |
| | | this.$showMessage("请先选择检验单号"); |
| | | } |
| | | }, |
| | | getItem() { |
| | | |
| | | if (!this.formData.billNo) { |
| | | this.$showMessage("请选择工单号"); |
| | | return; |
| | | } |
| | | |
| | | if (this.isSubmit) { |
| | | this.$showMessage("此物料无启用的检验项目,请维护!"); |
| | | return; |
| | | } |
| | | |
| | | this.$post({ |
| | | url: "/RKJ/removeXJ", |
| | | url: "/RKJ/save", |
| | | data: { |
| | | id: this.formData.id |
| | | from: this.formData, |
| | | userNo: this.$loginInfo.account, |
| | | //moidNum: this.formData.moidNum |
| | | items: this.tableData |
| | | } |
| | | }).then(res => { |
| | | if (res.data.tbBillList > 0) { |
| | | this.$showMessage("删除成功"); |
| | | //关闭当前页面,返回上一页面或多级页面 |
| | | uni.navigateBack(); |
| | | } else { |
| | | this.$showMessage("删除失败"); |
| | | this.formData.id = res.data.tbBillList; |
| | | this.$showMessage("生成检验项目成功"); |
| | | this.init(); |
| | | this.isUpdate = false; |
| | | }); |
| | | }, |
| | | //生产线别选择并初始话工单号 |
| | | onDaa020Change(event) { |
| | | //获取生产线别的下标地址 |
| | | this.formData.lineName = event; |
| | | |
| | | this.lineNo = this.lineList[this.DAA020List.indexOf(event)].lineNo; |
| | | |
| | | this.formData.line = this.lineNo; |
| | | |
| | | this.$post({ |
| | | url: "/RKJ/getDaa001", |
| | | data: { |
| | | lineNo: this.lineNo |
| | | } |
| | | }).then(res => { |
| | | this.BillNoList = res.data.tbBillList; |
| | | // 工单号去重,只显示唯一 |
| | | this.DAA001List = Array.from(new Set(res.data.tbBillList.map(s => s.rBillNo))); |
| | | this.formData.rBillNo = ""; |
| | | this.formData.billNo = ""; |
| | | this.formData.itemName = ""; |
| | | this.formData.itemNo = ""; |
| | | this.formData.quantity = ""; |
| | | this.billNoList = []; |
| | | this.tableData = []; |
| | | }) |
| | | }, |
| | | //选取工单填充物料号和其他信息 |
| | | onDaa001Change(e) { |
| | | |
| | | this.formData.rBillNo = e; |
| | | |
| | | // 找出所有属于该工单号的送检批次 |
| | | this.billNoList = this.BillNoList.filter(item => item.rBillNo === e).map(item => item.billNo); |
| | | this.formData.billNo = ""; |
| | | this.formData.itemName = ""; |
| | | this.formData.itemNo = ""; |
| | | this.formData.quantity = ""; |
| | | this.tableData = []; |
| | | }, |
| | | onBillNoChange(e) { |
| | | this.formData.billNo = e; |
| | | // 找到当前工单号+送检批次号的完整数据 |
| | | let data = this.BillNoList.find(item => item.rBillNo === this.formData.rBillNo && item.billNo === e); |
| | | if (!data) { |
| | | this.formData.itemName = ""; |
| | | this.formData.itemNo = ""; |
| | | this.formData.quantity = ""; |
| | | this.formData.itemModel = ""; |
| | | this.tableData = []; |
| | | return; |
| | | } |
| | | this.formData.itemName = data.itemName; |
| | | this.formData.itemNo = data.itemNo; |
| | | this.formData.quantity = data.quantity; |
| | | this.formData.itemModel = data.itemModel || ""; |
| | | // 如需自动请求检验项目,可在此处补充逻辑 |
| | | }, |
| | | init() { |
| | | this.$post({ |
| | | url: "/RKJ/getPage", |
| | | data: { |
| | | id: this.formData.id, |
| | | createUser: this.$loginInfo.account, |
| | | pageIndex: 1, |
| | | limit: 1, |
| | | } |
| | | }).then(res => { |
| | | let data = res.data.tbBillList[0]; |
| | | if (data) { |
| | | this.formData = data; |
| | | |
| | | this.$post({ |
| | | url: "/RKJ/getItems", |
| | | data: { |
| | | pid: this.formData.id |
| | | } |
| | | }).then(res1 => { |
| | | |
| | | let tableData = res1.data.tbBillList |
| | | |
| | | //当已检验个数都不为空时按照检测结构排序 |
| | | tableData.sort((a, b) => { |
| | | if (a.result === '未完成' && b.result === '合格') { |
| | | return -1; |
| | | } else if (a.result === '合格' && b.result === '未完成') { |
| | | return 1; |
| | | } else { |
| | | return 0; |
| | | } |
| | | }); |
| | | this.tableData = tableData; |
| | | |
| | | if (this.tableData.length === 0) { |
| | | this.isShowTable = true; |
| | | } |
| | | }) |
| | | } |
| | | }); |
| | | } else { |
| | | this.$showMessage("请先选择检验单号"); |
| | | } |
| | | }, |
| | | getItem() { |
| | | |
| | | if (!this.formData.billNo) { |
| | | this.$showMessage("请选择工单号"); |
| | | return; |
| | | } |
| | | |
| | | if (this.isSubmit) { |
| | | this.$showMessage("此物料无启用的检验项目,请维护!"); |
| | | return; |
| | | } |
| | | |
| | | this.$post({ |
| | | url: "/RKJ/save", |
| | | data: { |
| | | from: this.formData, |
| | | userNo: this.$loginInfo.account, |
| | | //moidNum: this.formData.moidNum |
| | | items: this.tableData |
| | | } |
| | | }).then(res => { |
| | | this.formData.id = res.data.tbBillList; |
| | | this.$showMessage("生成检验项目成功"); |
| | | this.init(); |
| | | this.isUpdate = false; |
| | | }); |
| | | }, |
| | | //生产线别选择并初始话工单号 |
| | | onDaa020Change(event) { |
| | | //获取生产线别的下标地址 |
| | | this.formData.lineName = event; |
| | | |
| | | this.lineNo = this.lineList[this.DAA020List.indexOf(event)].lineNo; |
| | | |
| | | this.formData.line = this.lineNo; |
| | | |
| | | this.$post({ |
| | | url: "/RKJ/getDaa001", |
| | | data: { |
| | | lineNo: this.formData.lineName |
| | | } |
| | | }).then(res => { |
| | | this.BillNoList = res.data.tbBillList; |
| | | this.DAA001List = res.data.tbBillList.map(s => s.billNo); |
| | | |
| | | this.formData.billNo = ""; |
| | | this.formData.mocode = ""; |
| | | this.formData.boardModel = ""; |
| | | this.formData.taskNo = ""; |
| | | this.formData.itemNo = ""; |
| | | this.formData.boardName = ""; |
| | | this.formData.quantity = ""; |
| | | this.tableData = []; |
| | | }) |
| | | }, |
| | | //选取工单填充物料号和其他信息 |
| | | onDaa001Change(e) { |
| | | |
| | | this.formData.billNo = e; |
| | | |
| | | let data = this.BillNoList[this.DAA001List.indexOf(e)]; |
| | | |
| | | //当返回的结果集为空时置空原有的值 |
| | | if (!data) { |
| | | this.formData.billNo = ""; |
| | | this.formData.mocode = ""; |
| | | this.formData.boardModel = ""; |
| | | this.formData.taskNo = ""; |
| | | this.formData.itemNo = ""; |
| | | this.formData.boardName = ""; |
| | | this.formData.quantity = ""; |
| | | this.tableData = []; |
| | | return; |
| | | } |
| | | //不为空时赋值 |
| | | this.formData.billNo = data.billNo; |
| | | this.formData.mocode = data.mocode; |
| | | this.formData.boardModel = data.boardModel; |
| | | this.formData.taskNo = data.taskNo; |
| | | this.formData.itemNo = data.itemNo; |
| | | this.formData.boardName = data.boardName; |
| | | this.formData.quantity = data.quantity; |
| | | |
| | | |
| | | this.$post({ |
| | | url: "/RKJ/setJYItem", |
| | | data: { |
| | | itemNo: this.formData.itemNo, |
| | | quantity:this.formData.quantity |
| | | } |
| | | }).then(res => { |
| | | this.tableData = res.data.tbBillList; |
| | | if (this.tableData.length === 0) { |
| | | this.$showMessage("该物料条码没有检验项目"); |
| | | this.isSubmit = true; |
| | | this.tableData = []; |
| | | }, |
| | | toDetail(item) { |
| | | |
| | | if (this.isUpdate) { |
| | | uni.showToast({ |
| | | icon: "none", |
| | | title: "请先生成检验项目", |
| | | duration: 2000, |
| | | }); |
| | | } else { |
| | | this.isSubmit = false; |
| | | uni.navigateTo({ |
| | | url: 'detail?id=' + item.id + '&billNo=' + this.formData.billNo + '&gid=' + this.formData |
| | | .id + '&itemInId=' + this.formData.itemInId |
| | | }); |
| | | } |
| | | }); |
| | | }, |
| | | init() { |
| | | this.$post({ |
| | | url: "/RKJ/getPage", |
| | | data: { |
| | | id: this.formData.id, |
| | | createUser: this.$loginInfo.account, |
| | | pageIndex: 1, |
| | | limit: 1, |
| | | } |
| | | }).then(res => { |
| | | let data = res.data.tbBillList[0]; |
| | | if (data) { |
| | | this.formData = data; |
| | | |
| | | }, |
| | | toImage() { |
| | | uni.navigateTo({ |
| | | url: 'ImageItem?id=' + this.formData.id |
| | | }); |
| | | }, |
| | | saveRemarks() { |
| | | this.showPopup = !this.showPopup; |
| | | this.remarks = this.formData.remarks; |
| | | }, |
| | | edit() { |
| | | if (this.remarks) { |
| | | //saveRemarksGid |
| | | this.$post({ |
| | | url: "/RKJ/getItems", |
| | | url: "/RKJ/saveRemarksGid", |
| | | data: { |
| | | pid: this.formData.id |
| | | gid: this.formData.id, |
| | | remarks: this.remarks |
| | | } |
| | | }).then(res1 => { |
| | | |
| | | let tableData = res1.data.tbBillList |
| | | |
| | | //当已检验个数都不为空时按照检测结构排序 |
| | | tableData.sort((a, b) => { |
| | | if (a.result === '未完成' && b.result === '合格') { |
| | | return -1; |
| | | } else if (a.result === '合格' && b.result === '未完成') { |
| | | return 1; |
| | | } else { |
| | | return 0; |
| | | } |
| | | }); |
| | | this.tableData = tableData; |
| | | |
| | | if (this.tableData.length === 0) { |
| | | this.isShowTable = true; |
| | | }).then(res => { |
| | | if(res.data.tbBillList > 0){ |
| | | this.formData.remarks = this.remarks; |
| | | this.showPopup = !this.showPopup; |
| | | this.$showMessage("保存成功"); |
| | | } |
| | | }) |
| | | } |
| | | }); |
| | | }, |
| | | toDetail(item) { |
| | | |
| | | if (this.isUpdate) { |
| | | uni.showToast({ |
| | | icon: "none", |
| | | title: "请先生成检验项目", |
| | | duration: 2000, |
| | | }); |
| | | } else { |
| | | uni.navigateTo({ |
| | | url: 'detail?id=' + item.id + '&billNo=' + this.formData.billNo + '&gid=' + this.formData |
| | | .id + '&itemInId=' + this.formData.itemInId |
| | | }); |
| | | } |
| | | }, |
| | | toImage() { |
| | | uni.navigateTo({ |
| | | url: 'ImageItem?id=' + this.formData.id |
| | | }); |
| | | }, |
| | | saveRemarks() { |
| | | this.showPopup = !this.showPopup; |
| | | this.remarks = this.formData.remarks; |
| | | }, |
| | | edit() { |
| | | if (this.remarks) { |
| | | //saveRemarksGid |
| | | },getTable() { |
| | | this.$post({ |
| | | url: "/RKJ/saveRemarksGid", |
| | | url: "/RKJ/setJYItem", |
| | | data: { |
| | | gid: this.formData.id, |
| | | remarks: this.remarks |
| | | itemNo: this.formData.itemNo, |
| | | quantity:this.formData.quantity |
| | | } |
| | | }).then(res => { |
| | | if(res.data.tbBillList > 0){ |
| | | this.formData.remarks = this.remarks; |
| | | this.showPopup = !this.showPopup; |
| | | this.$showMessage("保存成功"); |
| | | |
| | | this.tableData = res.data.tbBillList; |
| | | if (this.tableData.length === 0) { |
| | | this.$showMessage("该物料条码没有检验项目"); |
| | | this.isSubmit = true; |
| | | this.tableData = []; |
| | | this.isShowTable = true; |
| | | this.isUpdate = false; |
| | | } else { |
| | | this.isSubmit = false; |
| | | this.isShowTable = true; |
| | | this.isUpdate = true; |
| | | } |
| | | }) |
| | | } |
| | | },getTable() { |
| | | this.$post({ |
| | | url: "/RKJ/setJYItem", |
| | | data: { |
| | | itemNo: this.formData.itemNo, |
| | | quantity:this.formData.quantity |
| | | } |
| | | }).then(res => { |
| | | |
| | | this.tableData = res.data.tbBillList; |
| | | }); |
| | | }, |
| | | saveTable() { |
| | | if (this.tableData.length === 0) { |
| | | this.$showMessage("该物料条码没有检验项目"); |
| | | this.isSubmit = true; |
| | | this.tableData = []; |
| | | this.isShowTable = true; |
| | | this.isUpdate = false; |
| | | } else { |
| | | this.isSubmit = false; |
| | | this.isShowTable = true; |
| | | this.isUpdate = true; |
| | | return; |
| | | } |
| | | }); |
| | | }, |
| | | saveTable() { |
| | | if (this.tableData.length === 0) { |
| | | return; |
| | | } |
| | | |
| | | this.$post({ |
| | | url: "/RKJ/saveItem", |
| | | data: { |
| | | gid: this.formData.id, |
| | | items: this.tableData, |
| | | userNo: this.$loginInfo.account |
| | | } |
| | | }).then(res => { |
| | | this.formData.id = res.data.tbBillList; |
| | | this.isShowTable = false; |
| | | this.isUpdate = false; |
| | | this.init(); |
| | | }) |
| | | }, |
| | | cleanResult(){ |
| | | |
| | | this.$post({ |
| | | url: "/RKJ/cleanReqResult", |
| | | url: "/RKJ/saveItem", |
| | | data: { |
| | | gid: this.formData.id, |
| | | items: this.tableData, |
| | | userNo: this.$loginInfo.account |
| | | } |
| | | }).then(res => { |
| | | console.log(res); |
| | | if(res.status == 0){ |
| | | this.init(); |
| | | }else{ |
| | | this.$showMessage(res.message); |
| | | } |
| | | |
| | | this.formData.id = res.data.tbBillList; |
| | | this.isShowTable = false; |
| | | this.isUpdate = false; |
| | | this.init(); |
| | | }) |
| | | } |
| | | }, |
| | | onShow() { |
| | | //每次进入页面都会执行的方法 |
| | | if (this.formData.id) { |
| | | this.init(); |
| | | } |
| | | }, |
| | | }; |
| | | </script> |
| | | |
| | | <style scoped> |
| | | /* 基础样式 */ |
| | | .container { |
| | | padding: 10px; |
| | | background-color: #f5f7fa; |
| | | min-height: 100vh; |
| | | } |
| | | |
| | | /* 头部样式 */ |
| | | .header { |
| | | background-color: white; |
| | | padding: 20px; |
| | | border-radius: 8px; |
| | | box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); |
| | | margin-bottom: 20px; |
| | | } |
| | | |
| | | .title { |
| | | font-size: 20px; |
| | | font-weight: 600; |
| | | color: #2c3e50; |
| | | margin-bottom: 8px; |
| | | } |
| | | |
| | | .order-number { |
| | | font-size: 14px; |
| | | color: #3498db; |
| | | font-weight: 500; |
| | | } |
| | | |
| | | /* 区域样式 */ |
| | | .section { |
| | | background-color: white; |
| | | border-radius: 8px; |
| | | box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); |
| | | margin-bottom: 20px; |
| | | overflow: hidden; |
| | | } |
| | | |
| | | .section-header { |
| | | background-color: #f8f9fa; |
| | | padding: 15px 20px; |
| | | border-bottom: 1px solid #eee; |
| | | font-size: 16px; |
| | | font-weight: 600; |
| | | color: #2c3e50; |
| | | } |
| | | |
| | | .section-body { |
| | | padding: 20px; |
| | | } |
| | | |
| | | /* 信息网格 */ |
| | | .info-grid { |
| | | display: grid; |
| | | grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); |
| | | gap: 15px; |
| | | } |
| | | |
| | | .info-item { |
| | | display: flex; |
| | | flex-direction: column; |
| | | gap: 5px; |
| | | } |
| | | |
| | | .info-label { |
| | | font-size: 12px; |
| | | color: #7f8c8d; |
| | | font-weight: 500; |
| | | } |
| | | |
| | | .info-value { |
| | | font-size: 14px; |
| | | color: #2c3e50; |
| | | } |
| | | |
| | | .info-value.highlight { |
| | | font-weight: 600; |
| | | color: #3498db; |
| | | font-size: 16px; |
| | | } |
| | | |
| | | .info-value.danger { |
| | | color: #e74c3c; |
| | | font-weight: 500; |
| | | } |
| | | |
| | | /* 输入框样式 */ |
| | | .info-input { |
| | | padding: 8px 12px; |
| | | border: 1px solid #ddd; |
| | | border-radius: 4px; |
| | | font-size: 14px; |
| | | background-color: white; |
| | | } |
| | | |
| | | /* 选择器样式 */ |
| | | .picker-input { |
| | | border: 1px solid #ddd; |
| | | border-radius: 4px; |
| | | padding: 8px 12px; |
| | | background-color: white; |
| | | cursor: pointer; |
| | | font-size: 14px; |
| | | color: #2c3e50; |
| | | } |
| | | |
| | | /* 检验项目表格 */ |
| | | .inspection-table { |
| | | width: 100%; |
| | | border-radius: 8px; |
| | | overflow: hidden; |
| | | box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); |
| | | margin: 25px 0; |
| | | } |
| | | |
| | | .inspection-table table { |
| | | width: 100%; |
| | | border-collapse: collapse; |
| | | } |
| | | |
| | | .inspection-table th { |
| | | background-color: #f8f9fa; |
| | | color: #34495e; |
| | | padding: 12px 15px; |
| | | font-weight: bold; |
| | | text-align: left; |
| | | border: 1px solid #ddd; |
| | | } |
| | | |
| | | .inspection-table td { |
| | | padding: 12px 15px; |
| | | text-align: left; |
| | | border: 1px solid #ddd; |
| | | } |
| | | |
| | | .inspection-table tr:nth-child(even) { |
| | | background-color: #f9f9f9; |
| | | } |
| | | |
| | | .inspection-table tr:hover { |
| | | background-color: #f1f5f9; |
| | | } |
| | | |
| | | /* 水印样式 */ |
| | | .watermark { |
| | | position: absolute; |
| | | font-size: 40px; |
| | | font-weight: bold; |
| | | opacity: 1; |
| | | z-index: 1; |
| | | pointer-events: none; |
| | | transform: rotate(-15deg); |
| | | width: 100%; |
| | | text-align: center; |
| | | top: 50%; |
| | | left: 50%; |
| | | transform: translate(-50%, -50%) rotate(-15deg); |
| | | } |
| | | |
| | | .watermark.approved { |
| | | color: #2ecc71; |
| | | } |
| | | |
| | | .watermark.rejected { |
| | | color: #e74c3c; |
| | | } |
| | | |
| | | .watermark.pending { |
| | | color: #f39c12; |
| | | } |
| | | |
| | | /* 描述文本容器 */ |
| | | .description-text { |
| | | position: relative; |
| | | z-index: 2; |
| | | padding: 25px; |
| | | background-color: rgba(255, 255, 255, 0.7); |
| | | } |
| | | |
| | | /* 调整表格单元格 */ |
| | | .inspection-table td:nth-child(2) { |
| | | position: relative; |
| | | overflow: hidden; |
| | | padding: 0; |
| | | } |
| | | |
| | | .record-btn { |
| | | padding: 6px 12px; |
| | | background-color: #f8f9fa; |
| | | border: 1px solid #ddd; |
| | | border-radius: 3px; |
| | | cursor: pointer; |
| | | transition: all 0.2s; |
| | | font-size: 14px; |
| | | color: #333; |
| | | } |
| | | |
| | | .record-btn:hover { |
| | | background-color: #e9ecef; |
| | | } |
| | | |
| | | |
| | | /* 操作按钮 */ |
| | | .action-buttons { |
| | | display: flex; |
| | | flex-direction: column; |
| | | gap: 10px; |
| | | margin-bottom: 20px; |
| | | } |
| | | |
| | | .action-btn { |
| | | padding: 12px 20px; |
| | | border: none; |
| | | border-radius: 6px; |
| | | font-size: 14px; |
| | | font-weight: 500; |
| | | cursor: pointer; |
| | | transition: all 0.2s; |
| | | } |
| | | |
| | | .action-btn.primary { |
| | | background-color: #3498db; |
| | | color: white; |
| | | } |
| | | |
| | | .action-btn.secondary { |
| | | background-color: #95a5a6; |
| | | color: white; |
| | | } |
| | | |
| | | .action-btn.danger { |
| | | background-color: #e74c3c; |
| | | color: white; |
| | | } |
| | | |
| | | .action-btn.warning { |
| | | background-color: #f39c12; |
| | | color: white; |
| | | } |
| | | |
| | | /* 弹出框样式 */ |
| | | .overlay { |
| | | position: fixed; |
| | | top: 0; |
| | | left: 0; |
| | | width: 100%; |
| | | height: 100%; |
| | | background-color: rgba(0, 0, 0, 0.5); |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: center; |
| | | z-index: 1000; |
| | | } |
| | | |
| | | .popup { |
| | | background-color: white; |
| | | border-radius: 8px; |
| | | box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); |
| | | width: 90%; |
| | | max-width: 400px; |
| | | max-height: 80vh; |
| | | overflow-y: auto; |
| | | } |
| | | |
| | | .popup-header { |
| | | padding: 20px; |
| | | border-bottom: 1px solid #eee; |
| | | } |
| | | |
| | | .popup-header h3 { |
| | | font-size: 18px; |
| | | font-weight: 600; |
| | | color: #2c3e50; |
| | | margin: 0; |
| | | } |
| | | |
| | | .popup-content { |
| | | padding: 20px; |
| | | } |
| | | |
| | | .input-group { |
| | | display: flex; |
| | | flex-direction: column; |
| | | gap: 8px; |
| | | } |
| | | |
| | | .input-label { |
| | | font-size: 14px; |
| | | color: #7f8c8d; |
| | | font-weight: 500; |
| | | } |
| | | |
| | | .input-field { |
| | | padding: 8px 12px; |
| | | border: 1px solid #ddd; |
| | | border-radius: 4px; |
| | | font-size: 14px; |
| | | background-color: white; |
| | | } |
| | | |
| | | .popup-actions { |
| | | padding: 20px; |
| | | border-top: 1px solid #eee; |
| | | display: flex; |
| | | gap: 10px; |
| | | justify-content: flex-end; |
| | | } |
| | | |
| | | /* 响应式设计 */ |
| | | @media (max-width: 768px) { |
| | | .info-grid { |
| | | grid-template-columns: 1fr; |
| | | }, |
| | | cleanResult(){ |
| | | this.$post({ |
| | | url: "/RKJ/cleanReqResult", |
| | | data: { |
| | | gid: this.formData.id, |
| | | userNo: this.$loginInfo.account |
| | | } |
| | | }).then(res => { |
| | | console.log(res); |
| | | if(res.status == 0){ |
| | | this.init(); |
| | | }else{ |
| | | this.$showMessage(res.message); |
| | | } |
| | | |
| | | }) |
| | | } |
| | | }, |
| | | onShow() { |
| | | //每次进入页面都会执行的方法 |
| | | if (this.formData.id) { |
| | | this.init(); |
| | | } |
| | | }, |
| | | }; |
| | | </script> |
| | | |
| | | <style scoped> |
| | | /* 基础样式 */ |
| | | .container { |
| | | padding: 10px; |
| | | background-color: #f5f7fa; |
| | | min-height: 100vh; |
| | | } |
| | | |
| | | .action-buttons { |
| | | flex-direction: column; |
| | | /* 头部样式 */ |
| | | .header { |
| | | background-color: white; |
| | | padding: 20px; |
| | | border-radius: 8px; |
| | | box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); |
| | | margin-bottom: 20px; |
| | | } |
| | | } |
| | | </style> |
| | | |
| | | .title { |
| | | font-size: 24px; |
| | | font-weight: 600; |
| | | color: #2c3e50; |
| | | margin-bottom: 8px; |
| | | } |
| | | |
| | | .order-number { |
| | | font-size: 14px; |
| | | color: #3498db; |
| | | font-weight: 500; |
| | | } |
| | | |
| | | /* 区域样式 */ |
| | | .section { |
| | | background-color: white; |
| | | border-radius: 8px; |
| | | box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); |
| | | margin-bottom: 20px; |
| | | overflow: hidden; |
| | | } |
| | | |
| | | .section-header { |
| | | background-color: #f8f9fa; |
| | | padding: 32px 32px; |
| | | border-bottom: 1px solid #eee; |
| | | font-size: 20px; |
| | | font-weight: 600; |
| | | color: #2c3e50; |
| | | } |
| | | |
| | | .section-body { |
| | | padding: 56px 40px; |
| | | } |
| | | |
| | | /* 信息网格 */ |
| | | .info-grid { |
| | | display: grid; |
| | | grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); |
| | | gap: 48px; |
| | | } |
| | | |
| | | .info-item { |
| | | display: flex; |
| | | flex-direction: column; |
| | | gap: 5px; |
| | | } |
| | | |
| | | .info-label { |
| | | font-size: 16px; |
| | | font-weight: 600; |
| | | color: #7f8c8d; |
| | | } |
| | | |
| | | .info-value { |
| | | font-size: 18px; |
| | | font-weight: 500; |
| | | color: #2c3e50; |
| | | } |
| | | |
| | | .info-value.highlight { |
| | | font-weight: 600; |
| | | color: #3498db; |
| | | font-size: 16px; |
| | | } |
| | | |
| | | .info-value.danger { |
| | | color: #e74c3c; |
| | | font-weight: 500; |
| | | } |
| | | |
| | | /* 输入框样式 */ |
| | | .info-input { |
| | | padding: 14px 20px; |
| | | border: 1px solid #ddd; |
| | | border-radius: 4px; |
| | | font-size: 16px; |
| | | background-color: white; |
| | | } |
| | | |
| | | /* 选择器样式 */ |
| | | .picker-input { |
| | | border: 1px solid #ddd; |
| | | border-radius: 4px; |
| | | padding: 14px 20px; |
| | | background-color: white; |
| | | cursor: pointer; |
| | | font-size: 16px; |
| | | color: #2c3e50; |
| | | } |
| | | |
| | | /* 检验项目表格 */ |
| | | .inspection-table { |
| | | width: 100%; |
| | | border-radius: 8px; |
| | | overflow: hidden; |
| | | box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); |
| | | margin: 25px 0; |
| | | } |
| | | |
| | | .inspection-table table { |
| | | width: 100%; |
| | | border-collapse: collapse; |
| | | } |
| | | |
| | | .inspection-table th { |
| | | background-color: #f8f9fa; |
| | | color: #34495e; |
| | | padding: 12px 15px; |
| | | font-weight: bold; |
| | | text-align: left; |
| | | border: 1px solid #ddd; |
| | | } |
| | | |
| | | .inspection-table td { |
| | | padding: 12px 15px; |
| | | text-align: left; |
| | | border: 1px solid #ddd; |
| | | } |
| | | |
| | | .inspection-table tr:nth-child(even) { |
| | | background-color: #f9f9f9; |
| | | } |
| | | |
| | | .inspection-table tr:hover { |
| | | background-color: #f1f5f9; |
| | | } |
| | | |
| | | /* 水印样式 */ |
| | | .watermark { |
| | | position: absolute; |
| | | font-size: 40px; |
| | | font-weight: bold; |
| | | opacity: 1; |
| | | z-index: 1; |
| | | pointer-events: none; |
| | | transform: rotate(-15deg); |
| | | width: 100%; |
| | | text-align: center; |
| | | top: 50%; |
| | | left: 50%; |
| | | transform: translate(-50%, -50%) rotate(-15deg); |
| | | } |
| | | |
| | | .watermark.approved { |
| | | color: #2ecc71; |
| | | } |
| | | |
| | | .watermark.rejected { |
| | | color: #e74c3c; |
| | | } |
| | | |
| | | .watermark.pending { |
| | | color: #f39c12; |
| | | } |
| | | |
| | | /* 描述文本容器 */ |
| | | .description-text { |
| | | position: relative; |
| | | z-index: 2; |
| | | padding: 25px; |
| | | background-color: rgba(255, 255, 255, 0.7); |
| | | } |
| | | |
| | | /* 调整表格单元格 */ |
| | | .inspection-table td:nth-child(2) { |
| | | position: relative; |
| | | overflow: hidden; |
| | | padding: 0; |
| | | } |
| | | |
| | | .record-btn { |
| | | padding: 6px 12px; |
| | | background-color: #f8f9fa; |
| | | border: 1px solid #ddd; |
| | | border-radius: 3px; |
| | | cursor: pointer; |
| | | transition: all 0.2s; |
| | | font-size: 14px; |
| | | color: #333; |
| | | } |
| | | |
| | | .record-btn:hover { |
| | | background-color: #e9ecef; |
| | | } |
| | | |
| | | |
| | | /* 操作按钮 */ |
| | | .action-buttons { |
| | | display: flex; |
| | | flex-direction: row; |
| | | justify-content: flex-end; |
| | | gap: 20px; |
| | | margin-bottom: 20px; |
| | | } |
| | | |
| | | .action-btn { |
| | | padding: 12px 20px; |
| | | border: none; |
| | | border-radius: 6px; |
| | | font-size: 14px; |
| | | font-weight: 500; |
| | | cursor: pointer; |
| | | transition: all 0.2s; |
| | | } |
| | | |
| | | .action-btn.primary { |
| | | background-color: #3498db; |
| | | color: white; |
| | | } |
| | | |
| | | .action-btn.secondary { |
| | | background-color: #95a5a6; |
| | | color: white; |
| | | } |
| | | |
| | | .action-btn.danger { |
| | | background-color: #e74c3c; |
| | | color: white; |
| | | } |
| | | |
| | | .action-btn.warning { |
| | | background-color: #f39c12; |
| | | color: white; |
| | | } |
| | | |
| | | /* 弹出框样式 */ |
| | | .overlay { |
| | | position: fixed; |
| | | top: 0; |
| | | left: 0; |
| | | width: 100%; |
| | | height: 100%; |
| | | background-color: rgba(0, 0, 0, 0.5); |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: center; |
| | | z-index: 1000; |
| | | } |
| | | |
| | | .popup { |
| | | background-color: white; |
| | | border-radius: 8px; |
| | | box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); |
| | | width: 90%; |
| | | max-width: 400px; |
| | | max-height: 80vh; |
| | | overflow-y: auto; |
| | | } |
| | | |
| | | .popup-header { |
| | | padding: 20px; |
| | | border-bottom: 1px solid #eee; |
| | | } |
| | | |
| | | .popup-header h3 { |
| | | font-size: 18px; |
| | | font-weight: 600; |
| | | color: #2c3e50; |
| | | margin: 0; |
| | | } |
| | | |
| | | .popup-content { |
| | | padding: 20px; |
| | | } |
| | | |
| | | .input-group { |
| | | display: flex; |
| | | flex-direction: column; |
| | | gap: 8px; |
| | | } |
| | | |
| | | .input-label { |
| | | font-size: 14px; |
| | | color: #7f8c8d; |
| | | font-weight: 500; |
| | | } |
| | | |
| | | .input-field { |
| | | padding: 8px 12px; |
| | | border: 1px solid #ddd; |
| | | border-radius: 4px; |
| | | font-size: 14px; |
| | | background-color: white; |
| | | } |
| | | |
| | | .popup-actions { |
| | | padding: 20px; |
| | | border-top: 1px solid #eee; |
| | | display: flex; |
| | | gap: 10px; |
| | | justify-content: flex-end; |
| | | } |
| | | |
| | | /* 响应式设计 */ |
| | | @media (max-width: 768px) { |
| | | .info-grid { |
| | | grid-template-columns: 1fr; |
| | | gap: 20px; |
| | | } |
| | | |
| | | .action-buttons { |
| | | flex-direction: column; |
| | | justify-content: flex-start; |
| | | gap: 10px; |
| | | } |
| | | } |
| | | </style> |