| | |
| | | <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> |
| | | <picker v-if="isUpdate" class="picker-input" name="selector" :range="DAA020List" |
| | | @change="onDaa020Change"> |
| | | <view class="picker-value">{{ DAA020List[DAA020Index] || '请选择' }}</view> |
| | | </picker> |
| | | <view v-else class="info-value">{{ formData.daa020 }}</view> |
| | | </view> |
| | | <view class="info-item"> |
| | | <view class="info-label">物料编码</view> |
| | | <picker v-if="isUpdate" class="picker-input" name="selector" :range="ItemList" |
| | | @change="onItemChange"> |
| | | <view class="picker-value">{{ ItemList[ItemIndex] || '请选择' }}</view> |
| | | </picker> |
| | | <view v-else class="info-value">{{ formData.itemNo }}</view> |
| | | </view> |
| | | <view class="info-item"> |
| | | <view class="info-label">计划编号</view> |
| | | <picker v-if="isUpdate" class="picker-input" name="selector" :range="DAA001List" |
| | | @change="onDaa001Change"> |
| | | <view class="picker-value">{{ DAA001List[DAA001Index] || '请选择' }}</view> |
| | | </picker> |
| | | <view v-else class="info-value">{{ formData.billNo }}</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.planQty }}</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> |
| | | <picker v-if="isUpdate" class="picker-input" name="selector" :range="DAA020List" |
| | | @change="onDaa020Change"> |
| | | <view class="picker-value">{{ DAA020List[DAA020Index] || '请选择' }}</view> |
| | | </picker> |
| | | <view v-else class="info-value">{{ formData.daa020 }}</view> |
| | | </view> |
| | | <view class="info-item"> |
| | | <view class="info-label">物料编码</view> |
| | | <picker v-if="isUpdate" class="picker-input" name="selector" :range="ItemList" |
| | | @change="onItemChange"> |
| | | <view class="picker-value">{{ ItemList[ItemIndex] || '请选择' }}</view> |
| | | </picker> |
| | | <view v-else class="info-value">{{ formData.itemNo }}</view> |
| | | </view> |
| | | <view class="info-item"> |
| | | <view class="info-label">计划编号</view> |
| | | <picker v-if="isUpdate" class="picker-input" name="selector" :range="DAA001List" |
| | | @change="onDaa001Change"> |
| | | <view class="picker-value">{{ DAA001List[DAA001Index] || '请选择' }}</view> |
| | | </picker> |
| | | <view v-else class="info-value">{{ formData.billNo }}</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.planQty }}</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 danger" v-if="!isUpdate && !formData.fcheckResu && !isShowTable" @click="removeXJ">删除单据</button> |
| | | <button class="action-btn warning" v-if="!isUpdate && !isShowTable" @click="saveRemarks">添加不合格描述</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="remarksPopup" 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="editRemarks">修改</button> |
| | | <button class="action-btn secondary" @click="remarksPopup = !remarksPopup">取消</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 danger" v-if="!isUpdate && !formData.fcheckResu && !isShowTable" @click="removeXJ">删除单据</button> |
| | | <button class="action-btn warning" v-if="!isUpdate && !isShowTable" @click="saveRemarks">添加不合格描述</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="remarksPopup" 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="editRemarks">修改</button> |
| | | <button class="action-btn secondary" @click="remarksPopup = !remarksPopup">取消</button> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | |
| | | </view> |
| | | |
| | | </view> |
| | | </template> |
| | | |
| | | <script> |
| | | export default { |
| | | data() { |
| | | return { |
| | | formData: { |
| | | id: "", |
| | | releaseNo: "", |
| | | createBy: "", |
| | | createDate: "", |
| | | daa020: "", |
| | | itemNo: "", |
| | | billNo: "", |
| | | catQty: "", |
| | | detailMem: "", |
| | | taskNo: "", |
| | | fcheckResu: "", |
| | | boardModel: "", |
| | | planQty: "", |
| | | mocode: "", |
| | | boardStyle: "" |
| | | }, |
| | | |
| | | DAA020List: [], |
| | | DAA020Index: -1, |
| | | |
| | | DAA001List: [], |
| | | DAA001Index: -1, |
| | | schemeResult: [], |
| | | |
| | | isShowTable: false, |
| | | |
| | | ItemList: [], |
| | | ItemIndex: -1, |
| | | boardItems: [], |
| | | |
| | | lineList: [], |
| | | |
| | | lineNo: "", |
| | | |
| | | tableData: [], |
| | | |
| | | isSubmit: true, |
| | | |
| | | isUpdate: true, |
| | | |
| | | remarks: "", |
| | | remarksPopup: 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: "/XJ/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'; |
| | | </template> |
| | | |
| | | <script> |
| | | export default { |
| | | data() { |
| | | return { |
| | | formData: { |
| | | id: "", |
| | | releaseNo: "", |
| | | createBy: "", |
| | | createDate: "", |
| | | daa020: "", |
| | | itemNo: "", |
| | | billNo: "", |
| | | catQty: "", |
| | | detailMem: "", |
| | | taskNo: "", |
| | | fcheckResu: "", |
| | | boardModel: "", |
| | | planQty: "", |
| | | mocode: "", |
| | | boardStyle: "" |
| | | }, |
| | | |
| | | DAA020List: [], |
| | | DAA020Index: -1, |
| | | |
| | | DAA001List: [], |
| | | DAA001Index: -1, |
| | | schemeResult: [], |
| | | |
| | | isShowTable: false, |
| | | |
| | | ItemList: [], |
| | | ItemIndex: -1, |
| | | boardItems: [], |
| | | |
| | | lineList: [], |
| | | |
| | | lineNo: "", |
| | | |
| | | tableData: [], |
| | | |
| | | isSubmit: true, |
| | | |
| | | isUpdate: true, |
| | | |
| | | remarks: "", |
| | | remarksPopup: false, |
| | | }; |
| | | }, |
| | | |
| | | 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: "/XJ/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.isSubmit) { |
| | | this.$showMessage("此物料无启用的检验项目,请维护!"); |
| | | return; |
| | | } |
| | | |
| | | if (!this.formData.billNo) { |
| | | this.$showMessage("请选择计划编号"); |
| | | return; |
| | | } |
| | | |
| | | this.$post({ |
| | | url: "/XJ/save", |
| | | data: { |
| | | from: this.formData, |
| | | userNo: this.$loginInfo.account, |
| | | items: this.tableData |
| | | } |
| | | }).then(res => { |
| | | this.formData.id = res.data.tbBillList; |
| | | this.$showMessage("生成检验项目成功"); |
| | | this.init(); |
| | | 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: "/XJ/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); |
| | | }) |
| | | } |
| | | }, |
| | | //生产线别选择并初始话工单号 |
| | | onDaa020Change(event) { |
| | | //获取生产线别的下标地址 |
| | | this.DAA020Index = event.mp.detail.value; |
| | | |
| | | this.lineNo = this.lineList[this.DAA020Index].lineNo; |
| | | |
| | | this.$post({ |
| | | url: "/XJ/getBoardItem", |
| | | data: { |
| | | lineNo: this.lineNo |
| | | methods: { |
| | | getStatusClass(result) { |
| | | if (result === '合格') return 'status-pass'; |
| | | if (result === '不合格') return 'status-fail'; |
| | | return 'status-pending'; |
| | | }, |
| | | |
| | | getStatusText(status) { |
| | | const statusMap = { |
| | | approved: '合格', |
| | | rejected: '不合格', |
| | | pending: '待确认' |
| | | } |
| | | }).then(res => { |
| | | //填充工单号的数据源 |
| | | this.boardItems = res.data.tbBillList; |
| | | this.ItemList = this.boardItems.map(item => item.itemName); |
| | | //变为默认空值的状态 |
| | | this.ItemIndex = -1; |
| | | }) |
| | | |
| | | }, |
| | | onItemChange(event) { |
| | | this.ItemIndex = event.mp.detail.value; |
| | | this.formData.itemNo = this.boardItems[this.ItemIndex].itemNo;//主要是改这里 |
| | | this.formData.itemId = this.boardItems[this.ItemIndex].id;//主要是改这里 |
| | | this.formData.itemName = this.boardItems[this.ItemIndex].itemName;//主要是改这里 |
| | | this.formData.itemModel = this.boardItems[this.ItemIndex].itemModel;//主要是改这里 |
| | | this.$post({ |
| | | url: "/XJ/getDaa001", |
| | | data: { |
| | | daa020: this.lineNo, |
| | | item: this.formData.itemNo |
| | | if (status == null || status == '未完成') { |
| | | return statusMap['pending'] || '待确认'; |
| | | } else if (status == '合格') { |
| | | return statusMap['approved'] || '合格'; |
| | | } else { |
| | | return statusMap['rejected'] || '不合格'; |
| | | } |
| | | }).then(res => { |
| | | //填充工单号的数据源 |
| | | this.schemeResult = res.data.tbBillList; |
| | | this.DAA001List = this.schemeResult.map(s => s.daa001); |
| | | //变为默认空值的状态 |
| | | this.DAA001Index = -1; |
| | | |
| | | this.formData.billNo = ""; |
| | | }) |
| | | }, |
| | | //选取工单填充物料号和其他信息 |
| | | onDaa001Change(event) { |
| | | this.DAA001Index = event.mp.detail.value; |
| | | this.formData.billNo = this.schemeResult[this.DAA001Index].daa001; |
| | | this.formData.planQty = this.schemeResult[this.DAA001Index].daa008; |
| | | //表单中的部分字段赋值 |
| | | this.$post({ |
| | | url: "/XJ/getItem", |
| | | data: { |
| | | daa001: this.formData.billNo |
| | | }, |
| | | |
| | | removeXJ() { |
| | | if (this.formData.id) { |
| | | this.$post({ |
| | | url: "/XJ/removeXJ", |
| | | data: { |
| | | id: this.formData.id |
| | | } |
| | | }).then(res => { |
| | | if (res.data.tbBillList > 0) { |
| | | this.$showMessage("删除成功"); |
| | | //关闭当前页面,返回上一页面或多级页面 |
| | | uni.navigateBack(); |
| | | } else { |
| | | this.$showMessage("删除失败"); |
| | | } |
| | | }); |
| | | } else { |
| | | this.$showMessage("请先选择检验单号"); |
| | | } |
| | | }).then(res => { |
| | | let data = res.data.tbBillList[0]; |
| | | //当返回的结果集为空时置空原有的值 |
| | | if (!data) { |
| | | this.formData.billNo = ""; |
| | | this.formData.itemNo = ""; |
| | | this.formData.planQty = ""; |
| | | this.tableData = []; |
| | | }, |
| | | getItem() { |
| | | |
| | | if (this.isSubmit) { |
| | | this.$showMessage("此物料无启用的检验项目,请维护!"); |
| | | return; |
| | | } |
| | | |
| | | |
| | | if (!this.formData.billNo) { |
| | | this.$showMessage("请选择计划编号"); |
| | | return; |
| | | } |
| | | |
| | | this.$post({ |
| | | url: "/XJ/save", |
| | | data: { |
| | | from: this.formData, |
| | | userNo: this.$loginInfo.account, |
| | | items: this.tableData |
| | | } |
| | | }).then(res => { |
| | | this.formData.id = res.data.tbBillList; |
| | | this.$showMessage("生成检验项目成功"); |
| | | this.init(); |
| | | this.isUpdate = false; |
| | | }); |
| | | }, |
| | | //生产线别选择并初始话工单号 |
| | | onDaa020Change(event) { |
| | | //获取生产线别的下标地址 |
| | | this.DAA020Index = event.mp.detail.value; |
| | | |
| | | this.lineNo = this.lineList[this.DAA020Index].lineNo; |
| | | |
| | | this.$post({ |
| | | url: "/XJ/getBoardItem", |
| | | data: { |
| | | lineNo: this.lineNo |
| | | } |
| | | }).then(res => { |
| | | //填充工单号的数据源 |
| | | this.boardItems = res.data.tbBillList; |
| | | this.ItemList = this.boardItems.map(item => item.itemNo); |
| | | //变为默认空值的状态 |
| | | this.ItemIndex = -1; |
| | | }) |
| | | |
| | | }, |
| | | onItemChange(event) { |
| | | this.ItemIndex = event.mp.detail.value; |
| | | this.formData.itemNo = this.boardItems[this.ItemIndex].itemNo;//主要是改这里 |
| | | this.formData.itemId = this.boardItems[this.ItemIndex].id;//主要是改这里 |
| | | this.formData.itemName = this.boardItems[this.ItemIndex].itemName;//主要是改这里 |
| | | this.formData.itemModel = this.boardItems[this.ItemIndex].itemModel;//主要是改这里 |
| | | this.$post({ |
| | | url: "/XJ/getDaa001", |
| | | data: { |
| | | daa020: this.lineNo, |
| | | item: this.formData.itemNo |
| | | } |
| | | }).then(res => { |
| | | //填充工单号的数据源 |
| | | this.schemeResult = res.data.tbBillList; |
| | | this.DAA001List = this.schemeResult.map(s => s.daa001); |
| | | //变为默认空值的状态 |
| | | this.DAA001Index = -1; |
| | | |
| | | this.formData.billNo = ""; |
| | | }) |
| | | }, |
| | | //选取工单填充物料号和其他信息 |
| | | onDaa001Change(event) { |
| | | this.DAA001Index = event.mp.detail.value; |
| | | this.formData.billNo = this.schemeResult[this.DAA001Index].daa001; |
| | | this.formData.planQty = this.schemeResult[this.DAA001Index].daa008; |
| | | //表单中的部分字段赋值 |
| | | this.$post({ |
| | | url: "/XJ/getItem", |
| | | data: { |
| | | daa001: this.formData.billNo |
| | | } |
| | | }).then(res => { |
| | | let data = res.data.tbBillList[0]; |
| | | //当返回的结果集为空时置空原有的值 |
| | | if (!data) { |
| | | this.formData.billNo = ""; |
| | | this.formData.itemNo = ""; |
| | | this.formData.planQty = ""; |
| | | this.tableData = []; |
| | | return; |
| | | } |
| | | |
| | | this.$post({ |
| | | url: "/XJ/setJYItem", |
| | | data: { |
| | | itemNo: this.formData.itemNo |
| | | } |
| | | }).then(res => { |
| | | if (res.data.tbBillList.length > 0) { |
| | | this.tableData = res.data.tbBillList; // 在箭头函数中,this 指向外层作用域的 this |
| | | this.isSubmit = false; |
| | | } else { |
| | | this.$showMessage("此物料没有启用的检验项目,请维护!"); |
| | | this.isSubmit = true; |
| | | this.tableData = []; |
| | | } |
| | | }); |
| | | }); |
| | | }, |
| | | init() { |
| | | this.$post({ |
| | | url: "/XJ/getPage", |
| | | data: { |
| | | id: this.formData.id, |
| | | pageIndex: 1, |
| | | limit: 1, |
| | | } |
| | | }).then(res => { |
| | | let data = res.data.tbBillList[0]; |
| | | if (data) { |
| | | this.formData = data; |
| | | |
| | | this.$post({ |
| | | url: "/XJ/getJYItem", |
| | | 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; |
| | | } |
| | | }) |
| | | } |
| | | }); |
| | | }, |
| | | 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 |
| | | }); |
| | | } |
| | | }, saveRemarks() { |
| | | this.remarksPopup = !this.remarksPopup; |
| | | this.remarks = this.formData.remarks; |
| | | }, |
| | | editRemarks() { |
| | | if (this.remarks) { |
| | | //saveRemarksGid |
| | | this.$post({ |
| | | url: "/XJ/saveRemarksGid", |
| | | data: { |
| | | gid: this.formData.id, |
| | | remarks: this.remarks |
| | | } |
| | | }).then(res => { |
| | | if (res.data.tbBillList > 0) { |
| | | this.formData.remarks = this.remarks; |
| | | this.remarksPopup = !this.remarksPopup; |
| | | this.$showMessage("保存成功"); |
| | | } |
| | | }) |
| | | } |
| | | }, |
| | | toImage() { |
| | | uni.navigateTo({ |
| | | url: 'ImageItem?id=' + this.formData.id |
| | | }); |
| | | }, |
| | | getTable() { |
| | | this.$post({ |
| | | url: "/XJ/setJYItem", |
| | | data: { |
| | |
| | | }).then(res => { |
| | | if (res.data.tbBillList.length > 0) { |
| | | this.tableData = res.data.tbBillList; // 在箭头函数中,this 指向外层作用域的 this |
| | | this.isSubmit = false; |
| | | this.isShowTable = true; |
| | | this.isUpdate = true; |
| | | } else { |
| | | this.$showMessage("此物料没有启用的检验项目,请维护!"); |
| | | this.isSubmit = true; |
| | | this.isShowTable = true; |
| | | this.isUpdate = false; |
| | | this.tableData = []; |
| | | } |
| | | }); |
| | | }); |
| | | }, |
| | | init() { |
| | | this.$post({ |
| | | url: "/XJ/getPage", |
| | | data: { |
| | | id: this.formData.id, |
| | | pageIndex: 1, |
| | | limit: 1, |
| | | }, |
| | | saveTable() { |
| | | if (this.tableData.length === 0) { |
| | | return; |
| | | } |
| | | }).then(res => { |
| | | let data = res.data.tbBillList[0]; |
| | | if (data) { |
| | | this.formData = data; |
| | | |
| | | this.$post({ |
| | | url: "/XJ/getJYItem", |
| | | 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; |
| | | } |
| | | }) |
| | | } |
| | | }); |
| | | }, |
| | | 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 |
| | | }); |
| | | } |
| | | }, saveRemarks() { |
| | | this.remarksPopup = !this.remarksPopup; |
| | | this.remarks = this.formData.remarks; |
| | | }, |
| | | editRemarks() { |
| | | if (this.remarks) { |
| | | //saveRemarksGid |
| | | this.$post({ |
| | | url: "/XJ/saveRemarksGid", |
| | | url: "/XJ/saveItem", |
| | | data: { |
| | | gid: this.formData.id, |
| | | remarks: this.remarks |
| | | items: this.tableData, |
| | | userNo: this.$loginInfo.account |
| | | } |
| | | }).then(res => { |
| | | if (res.data.tbBillList > 0) { |
| | | this.formData.remarks = this.remarks; |
| | | this.remarksPopup = !this.remarksPopup; |
| | | this.$showMessage("保存成功"); |
| | | } |
| | | this.formData.id = res.data.tbBillList; |
| | | this.isShowTable = false; |
| | | this.isUpdate = false; |
| | | this.init(); |
| | | }) |
| | | } |
| | | }, |
| | | toImage() { |
| | | uni.navigateTo({ |
| | | url: 'ImageItem?id=' + this.formData.id |
| | | }); |
| | | }, |
| | | getTable() { |
| | | this.$post({ |
| | | url: "/XJ/setJYItem", |
| | | data: { |
| | | itemNo: this.formData.itemNo |
| | | } |
| | | }).then(res => { |
| | | if (res.data.tbBillList.length > 0) { |
| | | this.tableData = res.data.tbBillList; // 在箭头函数中,this 指向外层作用域的 this |
| | | this.isShowTable = true; |
| | | this.isUpdate = true; |
| | | } else { |
| | | this.$showMessage("此物料没有启用的检验项目,请维护!"); |
| | | this.isShowTable = true; |
| | | this.isUpdate = false; |
| | | this.tableData = []; |
| | | } |
| | | }); |
| | | }, |
| | | saveTable() { |
| | | if (this.tableData.length === 0) { |
| | | return; |
| | | } |
| | | this.$post({ |
| | | url: "/XJ/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; |
| | | onShow() { |
| | | //每次进入页面都会执行的方法 |
| | | if (this.formData.id) { |
| | | 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; |
| | | } |
| | | |
| | | /* 选择器样式 */ |
| | | .picker-input { |
| | | border: 1px solid #ddd; |
| | | border-radius: 4px; |
| | | padding: 8px 12px; |
| | | background-color: white; |
| | | cursor: pointer; |
| | | } |
| | | |
| | | .picker-value { |
| | | 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; |
| | | }; |
| | | </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: 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; |
| | | } |
| | | |
| | | /* 选择器样式 */ |
| | | .picker-input { |
| | | border: 1px solid #ddd; |
| | | border-radius: 4px; |
| | | padding: 8px 12px; |
| | | background-color: white; |
| | | cursor: pointer; |
| | | } |
| | | |
| | | .picker-value { |
| | | 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; |
| | | } |
| | | |
| | | .action-buttons { |
| | | flex-direction: column; |
| | | } |
| | | } |
| | | </style> |