| | |
| | | <template> |
| | | <view> |
| | | <view class="form-container"> |
| | | <form :modelValue="formData"> |
| | | <view class="form-group"> |
| | | <label class="form-label">检验单号:</label> |
| | | <input class="form-input" disabled="true" type="text" v-model="formData.releaseNo"/> |
| | | </view> |
| | | <view class="form-group"> |
| | | <label class="form-label">创建人:</label> |
| | | <input class="form-input" disabled="true" type="text" v-model="formData.createBy"/> |
| | | </view> |
| | | <view class="form-group"> |
| | | <label class="form-label">创建时间:</label> |
| | | <input class="form-input" disabled="true" type="text" v-model="formData.createDate"/> |
| | | </view> |
| | | <view class="uni-form-item uni-column form-item edit"> |
| | | <text class="form-label">生产线别:</text> |
| | | <superwei-combox v-if="isUpdate" :candidates="DAA020List" placeholder="请选择或输入" |
| | | v-model="formData.lineName" |
| | | @select="onDaa020Change" |
| | | class="picker form-input" |
| | | style="border: none;"></superwei-combox> |
| | | <input v-else class="form-input" disabled="true" type="text" v-model="formData.daa015"/> |
| | | </view> |
| | | <view class="inspection-sheet"> |
| | | <!-- 头部信息 --> |
| | | <view class="sheet-header"> |
| | | <h1>入库检验单</h1> |
| | | <view class="inspection-number">检验单号:{{ formData.releaseNo }}</view> |
| | | </view> |
| | | |
| | | <view class="uni-form-item uni-column form-item edit"> |
| | | <text class="form-label">送检批次号:</text> |
| | | <superwei-combox v-if="isUpdate" :candidates="DAA001List" placeholder="请选择或输入" |
| | | v-model="formData.billNo" |
| | | @select="onDaa001Change" |
| | | class="picker form-input" |
| | | style="border: none;"></superwei-combox> |
| | | <input v-else class="form-input" disabled="true" type="text" v-model="formData.billNo"/> |
| | | <!-- 基本信息区 --> |
| | | <view class="basic-info"> |
| | | <view class="info-row"> |
| | | <span class="info-label">创建人:</span> |
| | | <span class="info-value">{{ formData.createBy }}</span> |
| | | <span class="info-label">创建时间:</span> |
| | | <span class="info-value">{{ formData.createDate }}</span> |
| | | </view> |
| | | </view> |
| | | |
| | | <!-- 物料信息区 --> |
| | | <view class="material-info"> |
| | | <view class="info-block"> |
| | | <view class="info-label">生产线别:</view> |
| | | <view v-if="!isUpdate" class="info-value">{{ formData.lineNo }}</view> |
| | | <superwei-combox v-if="isUpdate" v-model="formData.lineNo" :candidates="DAA020List" |
| | | class="modern-picker" placeholder="请选择或输入" @select="onDaa020Change"></superwei-combox> |
| | | </view> |
| | | <view class="info-block"> |
| | | <view class="info-label">送检批次号:</view> |
| | | <view v-if="!isUpdate" class="info-value">{{ formData.billNo }}</view> |
| | | <superwei-combox v-if="isUpdate" v-model="formData.billNo" :candidates="DAA001List" |
| | | class="modern-picker" placeholder="请选择或输入" @select="onDaa001Change"></superwei-combox> |
| | | </view> |
| | | <view class="info-block"> |
| | | <view class="info-label">物料编码:</view> |
| | | <view class="info-value">{{ formData.itemNo }}</view> |
| | | </view> |
| | | <view class="info-block"> |
| | | <view class="info-label">任务单号:</view> |
| | | <view class="info-value">{{ formData.taskNo }}</view> |
| | | </view> |
| | | <view class="info-block"> |
| | | <view class="info-label">产品名称:</view> |
| | | <view class="info-value">{{ formData.itemName }}</view> |
| | | </view> |
| | | <view class="info-block"> |
| | | <view class="info-label">送检数量:</view> |
| | | <view class="info-value highlight">{{ formData.quantity }}</view> |
| | | </view> |
| | | <view v-if="formData.remarks" class="info-block"> |
| | | <view class="info-label">不合格描述:</view> |
| | | <view class="info-value remarks-text">{{ formData.remarks }}</view> |
| | | </view> |
| | | </view> |
| | | |
| | | <!-- 操作按钮区 - 检验项目获取 --> |
| | | <view v-if="isShowTable && current" class="action-buttons"> |
| | | <button class="secondary-btn" @click="getTable">获取检验项目</button> |
| | | <button v-if="isUpdate" class="primary-btn" @click="saveTable">生成检验项目</button> |
| | | </view> |
| | | |
| | | <!-- 检验项目表格 --> |
| | | <view v-if="!isShowTable" class="inspection-table"> |
| | | <!-- 表格头部统计信息 --> |
| | | <view class="table-header-stats"> |
| | | <view class="stats-left"> |
| | | <view class="stats-title">检验项目清单</view> |
| | | <view class="stats-subtitle">共 {{ tableData.length }} 个检验项目</view> |
| | | </view> |
| | | <view class="form-group"> |
| | | <label class="form-label">物料编码:</label> |
| | | <input class="form-input" disabled="true" type="text" v-model="formData.itemNo"/> |
| | | </view> |
| | | <view class="uni-title-sub uni-ellipsis-2"> |
| | | <view class="form-group"> |
| | | <label class="form-label">产品名称:</label> |
| | | <input class="form-input" disabled="true" type="text" v-model="formData.itemName"/> |
| | | <view class="stats-right"> |
| | | <view class="stat-item passed"> |
| | | <span class="stat-count">{{ getPassedCount() }}</span> |
| | | <span class="stat-label">已合格</span> |
| | | </view> |
| | | <view class="stat-item failed"> |
| | | <span class="stat-count">{{ getFailedCount() }}</span> |
| | | <span class="stat-label">不合格</span> |
| | | </view> |
| | | <view class="stat-item pending"> |
| | | <span class="stat-count">{{ getPendingCount() }}</span> |
| | | <span class="stat-label">待检验</span> |
| | | </view> |
| | | </view> |
| | | <view class="form-group"> |
| | | <label class="form-label">规格型号:</label> |
| | | <input class="form-input" disabled="true" type="text" v-model="formData.itemModel"/> |
| | | </view> |
| | | <view class="form-group"> |
| | | <label class="form-label">送检数量:</label> |
| | | <input class="form-input" disabled="true" type="text" v-model="formData.quantity"/> |
| | | </view> |
| | | <view class="form-group"> |
| | | <label class="form-label">报工人:</label> |
| | | <input class="form-input" disabled="true" type="text" v-model="formData.bgr"/> |
| | | </view> |
| | | <view class="form-group"> |
| | | <label class="form-label">检验结果:</label> |
| | | <input class="form-input" disabled="true" type="text" v-model="formData.fcheckResu"/> |
| | | </view> |
| | | <view class="form-group"> |
| | | <label class="form-label">不合格描述:</label> |
| | | <input class="form-input" disabled="true" type="text" v-model="formData.remarks"/> |
| | | </view> |
| | | </form> |
| | | </view> |
| | | |
| | | <view class="list-container"> |
| | | <uni-table ref="table" border emptyText="暂无更多数据"> |
| | | <uni-tr> |
| | | <uni-th align="center" class="th" style="color: #FFFFFF;">检验项目</uni-th> |
| | | <uni-th align="center" class="th" style="color: #FFFFFF">是否合格</uni-th> |
| | | <uni-th align="center" class="th" style="color: #FFFFFF">记录(点击)</uni-th> |
| | | </uni-tr> |
| | | <uni-tr v-for="(item, index) in tableData" :key="index"> |
| | | <uni-td align="center"> |
| | | <input class="form-input" disabled="true" type="text" v-model="item.projName"/> |
| | | </uni-td> |
| | | <uni-td align="center"> |
| | | <input class="form-input" disabled="true" type="text" v-model="item.result"/> |
| | | </uni-td> |
| | | <uni-td> |
| | | <view class="uni-group"> |
| | | <button v-if="item.isCheck >=item.levelNum" type="default" @click="toDetail(item)"> |
| | | {{ item.levelNum + '/' + item.isCheck }} |
| | | </button> |
| | | <button v-else type="warn" @click="toDetail(item)"> |
| | | {{ item.levelNum + '/' + item.isCheck }} |
| | | </button> |
| | | </view> |
| | | <table> |
| | | <thead> |
| | | <tr> |
| | | <th style="text-align: center;" width="15%">检验项目</th> |
| | | <th style="text-align: center;" width="50%">检验描述</th> |
| | | <th style="text-align: center;" width="20%">记录(点击)</th> |
| | | </tr> |
| | | </thead> |
| | | <tbody> |
| | | <tr v-for="(item, index) in tableData" :key="index"> |
| | | <td> |
| | | <view class="project-name-wrapper"> |
| | | <span :class="{ |
| | | 'status-approved': item.result=='合格', |
| | | 'status-rejected': item.result=='不合格', |
| | | 'status-pending': item.result=='未完成' |
| | | }" class="status-indicator"></span> |
| | | {{ item.projName }} |
| | | </view> |
| | | </uni-td> |
| | | </uni-tr> |
| | | </uni-table> |
| | | </td> |
| | | <td> |
| | | <view v-if="item.result=='合格'" class="watermark approved">合格</view> |
| | | <view v-if="item.result=='不合格'" class="watermark rejected">不合格</view> |
| | | <view v-if="item.result=='未完成'" class="watermark pending">待确认</view> |
| | | <view class="description-text">{{ item.itemMod }}</view> |
| | | </td> |
| | | <td> |
| | | <button v-if="item.isCheck < item.levelNum" |
| | | class="record-btn record-btn-fill" |
| | | @click="toDetail(item, index)"> |
| | | 填写 ({{ item.isCheck }}/{{ item.levelNum }}) |
| | | </button> |
| | | <button v-else |
| | | class="record-btn record-btn-view" |
| | | @click="toDetail(item, index)"> |
| | | 查看 ({{ item.isCheck }}/{{ item.levelNum }}) |
| | | </button> |
| | | </td> |
| | | </tr> |
| | | </tbody> |
| | | </table> |
| | | </view> |
| | | |
| | | <view class="plus-button"> |
| | | <button type="warn" v-if="isUpdate && !isShowTable" @click="getItem">生成检验单</button> |
| | | </view> |
| | | |
| | | <view class="plus-button"> |
| | | <button type="warn" v-if="!isUpdate && !isShowTable" @click="toImage">上传/查看图片</button> |
| | | </view> |
| | | |
| | | <view class="plus-button"> |
| | | <button type="warn" v-if="!isUpdate && !isShowTable" @click="saveRemarks">添加不合格描述</button> |
| | | </view> |
| | | |
| | | <view class="plus-button"> |
| | | <button type="warn" v-if="!isUpdate && !isShowTable && this.formData.fsubmit != 1" @click="cleanResult">清除检验结果</button> |
| | | </view> |
| | | |
| | | <!-- <view class="plus-button"> |
| | | <button type="warn" v-if="!isUpdate && !formData.fcheckResu && !isShowTable" @click="removeXJ">删除单据</button> |
| | | </view> --> |
| | | |
| | | <view class="plus-button"> |
| | | <button type="warn" v-if="isShowTable" @click="getTable">获取检验项目</button> |
| | | <!-- 主操作按钮区 --> |
| | | <view class="action-buttons"> |
| | | <button v-if="isUpdate && !isShowTable && current" class="primary-btn" @click="getItem">生成检验单</button> |
| | | <button v-if="!isUpdate && !isShowTable" class="secondary-btn" @click="toImage">图片管理</button> |
| | | <button v-if="!isUpdate && !isShowTable" class="secondary-btn" @click="saveRemarks">添加描述</button> |
| | | <button v-if="!isUpdate && !isShowTable" class="secondary-btn" @click="showTablePopup = true">查看数据</button> |
| | | <button v-if="!isUpdate && !isShowTable && current" class="primary-btn" @click="submitInspection">检验提交 |
| | | </button> |
| | | <button v-if="!isUpdate && !isShowTable && current && !formData.fcheckResu" class="danger-btn" @click="removeXJ"> |
| | | 删除单据 |
| | | </button> |
| | | </view> |
| | | |
| | | <view class="plus-button"> |
| | | <button type="warn" v-if="isShowTable && isUpdate" @click="saveTable">生成检验项目</button> |
| | | </view> |
| | | |
| | | |
| | | <!-- 弹出层 --> |
| | | <view v-if="showPopup" class="overlay"> |
| | | <view class="popup"> |
| | | <h3>修改不合格描述</h3> |
| | | <form> |
| | | <view class="form-group"> |
| | | <label class="form-label">不合格描述:</label> |
| | | <input class="form-input" type="text" v-model="remarks"/> |
| | | <input v-model="remarks" class="form-input" type="text"/> |
| | | </view> |
| | | <button type="warn" @click="edit">修改</button> |
| | | <button @click="showPopup = !showPopup">取消</button> |
| | | <view class="popup-buttons"> |
| | | <button class="primary-btn" @click="edit">修改</button> |
| | | <button class="secondary-btn" @click="showPopup = !showPopup">取消</button> |
| | | </view> |
| | | </form> |
| | | </view> |
| | | </view> |
| | | |
| | | <!-- 表格弹出层 --> |
| | | <view v-if="showTablePopup" class="overlay"> |
| | | <view class="popup table-popup"> |
| | | <h3>详细数据表格</h3> |
| | | <view class="table-container"> |
| | | <table> |
| | | <thead> |
| | | <tr> |
| | | <th>序号</th> |
| | | <th>项目名称</th> |
| | | <th>检验标准</th> |
| | | <th>检验结果</th> |
| | | </tr> |
| | | </thead> |
| | | <tbody> |
| | | <tr v-for="(item, index) in popupTableData" :key="index"> |
| | | <td>{{ index + 1 }}</td> |
| | | <td>{{ item.projName }}</td> |
| | | <td>{{ item.standard || '标准值' }}</td> |
| | | <td :class="item.result === '合格' ? 'text-success' : item.result === '不合格' ? 'text-danger' : ''"> |
| | | {{ item.result }} |
| | | </td> |
| | | </tr> |
| | | </tbody> |
| | | </table> |
| | | </view> |
| | | <view class="popup-buttons"> |
| | | <button class="secondary-btn" @click="showTablePopup = false">关闭</button> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | |
| | |
| | | detailMem: "", |
| | | taskNo: "", |
| | | fcheckResu: "", |
| | | remarks: "" |
| | | remarks: "", |
| | | itemId: "", |
| | | itemName: "", |
| | | itemModel: "", |
| | | }, |
| | | |
| | | DAA020List: [], |
| | |
| | | remarks: "", |
| | | |
| | | showPopup: false, |
| | | |
| | | showTablePopup: false, |
| | | |
| | | popupTableData: [], |
| | | |
| | | current: true, // 标记当前用户是否有操作权限 |
| | | msgId: 0 |
| | | }; |
| | | }, |
| | | onLoad(options) { |
| | |
| | | this.isUpdate = false; |
| | | this.formData.id = params["id"]; |
| | | this.formData.releaseNo = params["releaseNo"]; |
| | | this.msgId = params["msgId"]; |
| | | |
| | | // 检查是否有权限操作 |
| | | if (params["current"] === 'A') { |
| | | this.current = true; |
| | | } else if (params["current"] === 'B') { |
| | | this.current = false; |
| | | } |
| | | |
| | | if (this.msgId > 0) { |
| | | this.msgRead(); |
| | | } |
| | | |
| | | //getQaItemXj02 |
| | | this.init(); |
| | | } else { |
| | |
| | | this.DAA020List = res.data.tbBillList.map(item => item.lineName); |
| | | }) |
| | | } |
| | | |
| | | // 初始化弹窗表格数据示例 |
| | | this.initPopupTableData(); |
| | | }, |
| | | methods: { |
| | | // 获取合格项目数量 |
| | | getPassedCount() { |
| | | return this.tableData.filter(item => item.result === '合格').length; |
| | | }, |
| | | // 获取不合格项目数量 |
| | | getFailedCount() { |
| | | return this.tableData.filter(item => item.result === '不合格').length; |
| | | }, |
| | | // 获取待检验项目数量 |
| | | getPendingCount() { |
| | | return this.tableData.filter(item => item.result === '未完成').length; |
| | | }, |
| | | // 获取状态文本 |
| | | getStatusText(status) { |
| | | const statusMap = { |
| | | '合格': '合格', |
| | | '不合格': '不合格', |
| | | '未完成': '待确认' |
| | | } |
| | | return statusMap[status] || '待确认'; |
| | | }, |
| | | |
| | | // 初始化弹窗表格数据 |
| | | initPopupTableData() { |
| | | // 这里可以从API获取数据,这里使用示例数据 |
| | | this.popupTableData = [ |
| | | {projName: '外观检查', standard: '无明显划痕', result: '合格'}, |
| | | {projName: '尺寸检查', standard: '10±0.5mm', result: '合格'}, |
| | | {projName: '功能测试', standard: '正常工作', result: '不合格'}, |
| | | {projName: '电气性能', standard: '5V±0.1V', result: '合格'}, |
| | | {projName: '耐压测试', standard: '≥1000V', result: '未完成'} |
| | | ]; |
| | | }, |
| | | |
| | | // 检验提交 |
| | | submitInspection() { |
| | | this.$post({ |
| | | url: "/RKJ/IqcQaSubmit", |
| | | data: { |
| | | userNo: this.$loginInfo.account, |
| | | releaseNo: this.formData.releaseNo |
| | | } |
| | | }).then(res => { |
| | | if (res.status == 0) { |
| | | uni.showToast({ |
| | | title: res.message.toString(), |
| | | icon: 'success', |
| | | duration: 2000 |
| | | }) |
| | | // 如果有页面跳转,需要用定时器延迟 |
| | | setTimeout(() => { |
| | | uni.navigateTo({ |
| | | url: 'List' |
| | | }); |
| | | }, 2000); // 保持与 duration 相同的时长 |
| | | } else { |
| | | uni.showModal({ |
| | | title: "提示", |
| | | content: res.message.toString(), |
| | | confirmText: "确定", |
| | | showCancel: false, |
| | | success: (res) => { |
| | | |
| | | } |
| | | }) |
| | | } |
| | | }) |
| | | }, |
| | | |
| | | removeXJ() { |
| | | if (this.formData.id) { |
| | | this.$post({ |
| | |
| | | this.$post({ |
| | | url: "/RKJ/getDaa001", |
| | | data: { |
| | | lineNo: this.formData.lineName |
| | | lineNo: this.lineNo |
| | | } |
| | | }).then(res => { |
| | | this.BillNoList = res.data.tbBillList; |
| | |
| | | this.$post({ |
| | | url: "/RKJ/setJYItem", |
| | | data: { |
| | | itemNo: this.formData.itemNo, |
| | | quantity:this.formData.quantity |
| | | itemId: this.formData.itemId, |
| | | quantity: this.formData.quantity |
| | | } |
| | | }).then(res => { |
| | | this.tableData = res.data.tbBillList; |
| | | if (this.tableData.length === 0) { |
| | | this.$showMessage("该物料条码没有检验项目"); |
| | | this.$showMessage("该物料没有检验项目"); |
| | | this.isSubmit = true; |
| | | this.tableData = []; |
| | | } else { |
| | |
| | | }); |
| | | }, |
| | | init() { |
| | | let userName = this.$loginInfo.account; |
| | | |
| | | this.$post({ |
| | | url: "/RKJ/getPage", |
| | | data: { |
| | | id: this.formData.id, |
| | | createUser: this.$loginInfo.account, |
| | | pageIndex: 1, |
| | | limit: 1, |
| | | } |
| | |
| | | this.tableData = tableData; |
| | | |
| | | if (this.tableData.length === 0) { |
| | | this.isShowTable = true; |
| | | this.isShowTable = true; // 无检验项目,显示获取按钮 |
| | | } else { |
| | | this.isShowTable = false; // 有检验项目,显示表格 |
| | | } |
| | | |
| | | // 为每一项添加current属性,表示是否可编辑 |
| | | this.tableData.forEach((item, index) => { |
| | | this.$set(item, 'current', this.current); |
| | | }); |
| | | }) |
| | | } |
| | | }); |
| | | }, |
| | | toDetail(item) { |
| | | |
| | | toDetail(item, index) { |
| | | if (this.isUpdate) { |
| | | uni.showToast({ |
| | | icon: "none", |
| | |
| | | }); |
| | | } else { |
| | | uni.navigateTo({ |
| | | url: 'detail?id=' + item.id + '&billNo=' + this.formData.billNo + '&gid=' + this.formData |
| | | .id + '&itemInId=' + this.formData.itemInId |
| | | url: 'detail?id=' + item.id + '&billNo=' + this.formData.billNo + '&gid=' + this.formData.id + '&index=' + index + '¤t=' + this.current |
| | | }); |
| | | } |
| | | }, |
| | |
| | | remarks: this.remarks |
| | | } |
| | | }).then(res => { |
| | | if(res.data.tbBillList > 0){ |
| | | if (res.data.tbBillList > 0) { |
| | | this.formData.remarks = this.remarks; |
| | | this.showPopup = !this.showPopup; |
| | | this.$showMessage("保存成功"); |
| | | } |
| | | }) |
| | | } else { |
| | | // 允许清空描述 |
| | | this.$post({ |
| | | url: "/RKJ/saveRemarksGid", |
| | | data: { |
| | | gid: this.formData.id, |
| | | remarks: '', |
| | | releaseNo: this.formData.releaseNo |
| | | } |
| | | }).then(res => { |
| | | if (res.data.tbBillList > 0) { |
| | | this.formData.remarks = ''; |
| | | this.showPopup = !this.showPopup; |
| | | this.$showMessage("保存成功"); |
| | | } |
| | | }) |
| | | } |
| | | },getTable() { |
| | | }, |
| | | getTable() { |
| | | this.$post({ |
| | | url: "/RKJ/setJYItem", |
| | | data: { |
| | | //itemId: this.formData.itemId, |
| | | itemNo: this.formData.itemNo, |
| | | quantity:this.formData.quantity |
| | | quantity: this.formData.quantity |
| | | } |
| | | }).then(res => { |
| | | |
| | | this.tableData = res.data.tbBillList; |
| | | |
| | | if (this.tableData.length === 0) { |
| | | this.$showMessage("该物料条码没有检验项目"); |
| | | this.isSubmit = true; |
| | | this.tableData = []; |
| | | this.isShowTable = true; |
| | | this.isShowTable = true; // 保持为true,显示按钮,因为没有检验项目 |
| | | this.isUpdate = false; |
| | | } else { |
| | | this.isSubmit = false; |
| | | this.isShowTable = true; |
| | | this.isShowTable = false; // 设为false,以显示表格,因为有检验项目 |
| | | this.isUpdate = true; |
| | | } |
| | | }); |
| | |
| | | if (this.tableData.length === 0) { |
| | | return; |
| | | } |
| | | |
| | | this.$post({ |
| | | url: "/RKJ/saveItem", |
| | | data: { |
| | |
| | | } |
| | | }).then(res => { |
| | | this.formData.id = res.data.tbBillList; |
| | | this.isShowTable = false; |
| | | this.isShowTable = false; // 确保表格显示 |
| | | this.isUpdate = false; |
| | | this.init(); |
| | | }) |
| | | }, |
| | | 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() { |
| | | //每次进入页面都会执行的方法 |
| | |
| | | </script> |
| | | |
| | | <style> |
| | | .form-group { |
| | | /* 基础样式 */ |
| | | .inspection-sheet { |
| | | font-family: 'Microsoft YaHei', 'Segoe UI', sans-serif; |
| | | max-width: 1000px; |
| | | margin: 0 auto; |
| | | padding: 20px; |
| | | background-color: #fff; |
| | | box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); |
| | | } |
| | | |
| | | /* 头部样式 */ |
| | | .sheet-header { |
| | | text-align: center; |
| | | margin-bottom: 20px; |
| | | padding-bottom: 15px; |
| | | border-bottom: 2px solid #e0e0e0; |
| | | } |
| | | |
| | | .sheet-header h1 { |
| | | color: #2c3e50; |
| | | font-size: 24px; |
| | | margin-bottom: 5px; |
| | | } |
| | | |
| | | .inspection-number { |
| | | font-size: 16px; |
| | | font-weight: bold; |
| | | color: #3498db; |
| | | } |
| | | |
| | | /* 基本信息区样式 */ |
| | | .basic-info, |
| | | .material-info { |
| | | margin-bottom: 20px; |
| | | } |
| | | |
| | | .info-row { |
| | | display: flex; |
| | | margin-bottom: 10px; |
| | | flex-wrap: wrap; |
| | | } |
| | | |
| | | .info-label { |
| | | font-weight: bold; |
| | | color: #34495e; |
| | | min-width: 80px; |
| | | margin-right: 5px; |
| | | } |
| | | |
| | | .info-value { |
| | | color: #2c3e50; |
| | | margin-right: 20px; |
| | | } |
| | | |
| | | .highlight { |
| | | font-weight: bold; |
| | | color: #e74c3c; |
| | | } |
| | | |
| | | /* 物料信息区样式 */ |
| | | .material-info { |
| | | border: 1px solid #eee; |
| | | padding: 15px; |
| | | border-radius: 5px; |
| | | } |
| | | |
| | | .info-block { |
| | | display: flex; |
| | | align-items: center; |
| | | border-bottom: 1px solid #c9c9c9; |
| | | } |
| | | |
| | | .form-label { |
| | | margin-bottom: 0; |
| | | padding: 5px; |
| | | } |
| | | |
| | | .form-input { |
| | | flex: 1; |
| | | margin-bottom: 0; |
| | | padding: 5px; |
| | | } |
| | | |
| | | |
| | | .picker { |
| | | flex: 1; |
| | | margin-bottom: 0; |
| | | padding: 5px; |
| | | font-size: 12px; |
| | | } |
| | | |
| | | .uni-form-item { |
| | | display: flex; |
| | | border-bottom: 1px solid #c9c9c9; |
| | | } |
| | | |
| | | .edit { |
| | | background-color: white; |
| | | } |
| | | |
| | | /* 默认样式 */ |
| | | .list-container { |
| | | height: 60vh; |
| | | /* 设置列表容器的高度为剩余空间,并减去表单容器的高度 */ |
| | | overflow-y: auto; |
| | | /* 允许列表容器垂直滚动 */ |
| | | padding: 10px; |
| | | /* 可选:添加一些内边距,使列表内容更美观 */ |
| | | } |
| | | |
| | | /* 在小屏幕设备上,重置高度为适应屏幕 */ |
| | | @media (max-width: 768px) { |
| | | .list-container { |
| | | height: calc(100vh - 500px); |
| | | /* 适当调整高度 */ |
| | | } |
| | | } |
| | | |
| | | |
| | | .form-container { |
| | | padding: 10px; |
| | | /* 可选:添加一些内边距,使表单内容更美观 */ |
| | | } |
| | | |
| | | .th { |
| | | background-color: lightskyblue; |
| | | color: #FFFFFF; |
| | | } |
| | | |
| | | |
| | | .plus-button { |
| | | line-height: 59px; |
| | | font-size: 24px; |
| | | cursor: pointer; |
| | | z-index: 1000; |
| | | margin-bottom: 10px; |
| | | flex-wrap: wrap; |
| | | } |
| | | |
| | | .modern-picker { |
| | | width: 100%; |
| | | padding: 8px 12px; |
| | | border: 1px solid #e9ecef; |
| | | border-radius: 6px; |
| | | background: #ffffff; |
| | | font-size: 14px; |
| | | margin-top: 6px; |
| | | } |
| | | |
| | | .remarks-text { |
| | | color: #e74c3c; |
| | | font-style: italic; |
| | | } |
| | | |
| | | /* 表格样式 */ |
| | | .inspection-table { |
| | | margin: 25px 0; |
| | | border-radius: 8px; |
| | | overflow: hidden; |
| | | box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); |
| | | background: #fff; |
| | | } |
| | | |
| | | /* 表格头部统计信息 */ |
| | | .table-header-stats { |
| | | display: flex; |
| | | justify-content: space-between; |
| | | align-items: center; |
| | | padding: 16px 20px; |
| | | background: linear-gradient(135deg, #f8f9fa, #e9ecef); |
| | | border-bottom: 1px solid #e0e0e0; |
| | | } |
| | | |
| | | .stats-left .stats-title { |
| | | font-size: 18px; |
| | | font-weight: bold; |
| | | color: #2c3e50; |
| | | margin-bottom: 4px; |
| | | } |
| | | |
| | | .stats-left .stats-subtitle { |
| | | font-size: 14px; |
| | | color: #7f8c8d; |
| | | } |
| | | |
| | | .stats-right { |
| | | display: flex; |
| | | gap: 16px; |
| | | } |
| | | |
| | | .stat-item { |
| | | display: flex; |
| | | flex-direction: column; |
| | | align-items: center; |
| | | padding: 8px 12px; |
| | | border-radius: 6px; |
| | | min-width: 60px; |
| | | box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); |
| | | } |
| | | |
| | | .stat-item.passed { |
| | | background: linear-gradient(135deg, rgba(39, 174, 96, 0.1), rgba(39, 174, 96, 0.2)); |
| | | border: 1px solid rgba(39, 174, 96, 0.3); |
| | | } |
| | | |
| | | .stat-item.failed { |
| | | background: linear-gradient(135deg, rgba(230, 126, 34, 0.1), rgba(230, 126, 34, 0.2)); |
| | | border: 1px solid rgba(230, 126, 34, 0.3); |
| | | } |
| | | |
| | | .stat-item.pending { |
| | | background: linear-gradient(135deg, rgba(243, 156, 18, 0.1), rgba(243, 156, 18, 0.2)); |
| | | border: 1px solid rgba(243, 156, 18, 0.3); |
| | | } |
| | | |
| | | .stat-count { |
| | | font-size: 20px; |
| | | font-weight: bold; |
| | | line-height: 1; |
| | | margin-bottom: 2px; |
| | | } |
| | | |
| | | .stat-item.passed .stat-count { |
| | | color: #27ae60; |
| | | } |
| | | |
| | | .stat-item.failed .stat-count { |
| | | color: #e67e22; |
| | | } |
| | | |
| | | .stat-item.pending .stat-count { |
| | | color: #f39c12; |
| | | } |
| | | |
| | | .stat-label { |
| | | font-size: 12px; |
| | | color: #7f8c8d; |
| | | font-weight: 500; |
| | | } |
| | | |
| | | .inspection-table table { |
| | | width: 100%; |
| | | border-collapse: collapse; |
| | | } |
| | | |
| | | .inspection-table th, .inspection-table td { |
| | | padding: 16px 20px; |
| | | border: none; |
| | | text-align: left; |
| | | border-bottom: 1px solid #eee; |
| | | } |
| | | |
| | | .inspection-table th { |
| | | background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| | | font-weight: 600; |
| | | color: #fff; |
| | | font-size: 14px; |
| | | letter-spacing: 0.5px; |
| | | position: relative; |
| | | } |
| | | |
| | | .inspection-table tbody tr { |
| | | transition: all 0.3s ease; |
| | | border-left: 4px solid transparent; |
| | | } |
| | | |
| | | .inspection-table tbody tr:nth-child(even) { |
| | | background-color: #f8fafc; |
| | | } |
| | | |
| | | .inspection-table tbody tr:hover { |
| | | background-color: #e8f4fd; |
| | | border-left-color: #3498db; |
| | | transform: translateY(-1px); |
| | | box-shadow: 0 4px 12px rgba(52, 152, 219, 0.15); |
| | | } |
| | | |
| | | /* 检验项目列样式 */ |
| | | .inspection-table td:first-child { |
| | | font-weight: 600; |
| | | color: #2c3e50; |
| | | font-size: 15px; |
| | | } |
| | | |
| | | /* 项目名称包装器 */ |
| | | .project-name-wrapper { |
| | | display: flex; |
| | | align-items: center; |
| | | gap: 8px; |
| | | } |
| | | |
| | | /* 状态指示器 */ |
| | | .status-indicator { |
| | | width: 8px; |
| | | height: 8px; |
| | | border-radius: 50%; |
| | | display: inline-block; |
| | | flex-shrink: 0; |
| | | box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8); |
| | | } |
| | | |
| | | .status-indicator.status-approved { |
| | | background-color: #27ae60; |
| | | box-shadow: 0 0 0 2px rgba(39, 174, 96, 0.3); |
| | | } |
| | | |
| | | .status-indicator.status-rejected { |
| | | background-color: #e67e22; |
| | | box-shadow: 0 0 0 2px rgba(230, 126, 34, 0.3); |
| | | } |
| | | |
| | | .status-indicator.status-pending { |
| | | background-color: #f39c12; |
| | | box-shadow: 0 0 0 2px rgba(243, 156, 18, 0.3); |
| | | } |
| | | |
| | | /* 检验描述列特殊样式 */ |
| | | .inspection-table td:nth-child(2) { |
| | | position: relative; |
| | | min-height: 80px; |
| | | vertical-align: top; |
| | | padding: 16px 20px; |
| | | } |
| | | |
| | | /* 描述文本样式 */ |
| | | .description-text { |
| | | position: relative; |
| | | z-index: 2; |
| | | padding: 12px 16px; |
| | | background: transparent; |
| | | line-height: 1.6; |
| | | font-size: 14px; |
| | | color: #555; |
| | | margin: 0; |
| | | word-wrap: break-word; |
| | | word-break: break-word; |
| | | max-width: 100%; |
| | | /* 确保文字不会太长遮挡水印 */ |
| | | padding-right: 80px; |
| | | min-height: 20px; |
| | | display: block; |
| | | } |
| | | |
| | | /* 按钮样式 */ |
| | | .action-buttons { |
| | | display: flex; |
| | | justify-content: flex-end; |
| | | gap: 10px; |
| | | margin-top: 20px; |
| | | } |
| | | |
| | | .primary-btn, |
| | | .secondary-btn, |
| | | .danger-btn { |
| | | padding: 10px 20px; |
| | | border: none; |
| | | border-radius: 4px; |
| | | font-size: 14px; |
| | | cursor: pointer; |
| | | transition: all 0.3s; |
| | | } |
| | | |
| | | .primary-btn { |
| | | background-color: #3498db; |
| | | color: white; |
| | | } |
| | | |
| | | .primary-btn:hover { |
| | | background-color: #2980b9; |
| | | } |
| | | |
| | | .secondary-btn { |
| | | background-color: #ecf0f1; |
| | | color: #7f8c8d; |
| | | } |
| | | |
| | | .secondary-btn:hover { |
| | | background-color: #d5dbdb; |
| | | } |
| | | |
| | | .danger-btn { |
| | | background-color: #e74c3c; |
| | | color: white; |
| | | } |
| | | |
| | | .danger-btn:hover { |
| | | background-color: #c0392b; |
| | | } |
| | | |
| | | .record-btn { |
| | | padding: 8px 16px; |
| | | background: linear-gradient(135deg, #3498db, #2980b9); |
| | | color: #fff; |
| | | border: none; |
| | | border-radius: 6px; |
| | | cursor: pointer; |
| | | transition: all 0.3s ease; |
| | | font-weight: 500; |
| | | font-size: 13px; |
| | | box-shadow: 0 2px 4px rgba(52, 152, 219, 0.3); |
| | | } |
| | | |
| | | .record-btn:hover { |
| | | background: linear-gradient(135deg, #2980b9, #1f618d); |
| | | transform: translateY(-1px); |
| | | box-shadow: 0 4px 8px rgba(52, 152, 219, 0.4); |
| | | } |
| | | |
| | | .record-btn:active { |
| | | transform: translateY(0); |
| | | } |
| | | |
| | | /* 填写状态按钮 */ |
| | | .record-btn-fill { |
| | | background: linear-gradient(135deg, #2ecc71, #27ae60); |
| | | box-shadow: 0 2px 4px rgba(46, 204, 113, 0.3); |
| | | } |
| | | |
| | | .record-btn-fill:hover { |
| | | background: linear-gradient(135deg, #27ae60, #229954); |
| | | box-shadow: 0 4px 8px rgba(46, 204, 113, 0.4); |
| | | } |
| | | |
| | | /* 查看状态按钮 */ |
| | | .record-btn-view { |
| | | background: linear-gradient(135deg, #95a5a6, #7f8c8d); |
| | | box-shadow: 0 2px 4px rgba(149, 165, 166, 0.3); |
| | | } |
| | | |
| | | .record-btn-view:hover { |
| | | background: linear-gradient(135deg, #7f8c8d, #6c7b7d); |
| | | box-shadow: 0 4px 8px rgba(149, 165, 166, 0.4); |
| | | } |
| | | |
| | | /* 水印样式 */ |
| | | .watermark { |
| | | position: absolute; |
| | | font-size: 32px; |
| | | font-weight: bold; |
| | | opacity: 0.4; |
| | | z-index: 3; |
| | | pointer-events: none; |
| | | bottom: 8px; |
| | | right: 8px; |
| | | transform: rotate(-15deg); |
| | | transform-origin: bottom right; |
| | | text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8); |
| | | min-width: 60px; |
| | | text-align: center; |
| | | } |
| | | |
| | | .watermark.approved { |
| | | color: #27ae60; /* 更淡的绿色 */ |
| | | } |
| | | |
| | | .watermark.rejected { |
| | | color: #e67e22; /* 更淡的红色 */ |
| | | } |
| | | |
| | | .watermark.pending { |
| | | color: #f39c12; /* 橙色 */ |
| | | } |
| | | |
| | | /* 弹出层样式 */ |
| | | .overlay { |
| | | position: fixed; |
| | | top: 0; |
| | |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: center; |
| | | z-index: 10; |
| | | } |
| | | |
| | | .popup { |
| | |
| | | border: 1px solid #ccc; |
| | | box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); |
| | | width: 68vw; |
| | | /* 设置宽度为视口宽度的80% */ |
| | | height: 25vh; |
| | | /* 设置高度为视口高度的80% */ |
| | | } |
| | | |
| | | .table-popup { |
| | | max-width: 700px; |
| | | width: 90%; |
| | | max-height: 80vh; |
| | | display: flex; |
| | | flex-direction: column; |
| | | } |
| | | |
| | | .table-container { |
| | | overflow-y: auto; |
| | | max-height: 60vh; |
| | | margin: 15px 0; |
| | | } |
| | | |
| | | .table-container table { |
| | | width: 100%; |
| | | border-collapse: collapse; |
| | | } |
| | | |
| | | .table-container th, |
| | | .table-container td { |
| | | padding: 10px; |
| | | border: 1px solid #ddd; |
| | | text-align: left; |
| | | } |
| | | |
| | | .table-container th { |
| | | background-color: #f8f9fa; |
| | | position: sticky; |
| | | top: 0; |
| | | z-index: 1; |
| | | } |
| | | |
| | | .table-container tr:nth-child(even) { |
| | | background-color: #f9f9f9; |
| | | } |
| | | |
| | | .table-container tr:hover { |
| | | background-color: #f1f5f9; |
| | | } |
| | | |
| | | .text-success { |
| | | color: #2ecc71; |
| | | } |
| | | |
| | | .text-danger { |
| | | color: #e74c3c; |
| | | } |
| | | |
| | | .popup h3 { |
| | | margin-top: 0; |
| | | color: #2c3e50; |
| | | border-bottom: 1px solid #eee; |
| | | padding-bottom: 10px; |
| | | } |
| | | |
| | | .popup .form-group { |
| | | margin-bottom: 15px; |
| | | display: flex; |
| | | flex-direction: column; |
| | | } |
| | | |
| | | .popup .form-label { |
| | | margin-bottom: 5px; |
| | | font-weight: bold; |
| | | } |
| | | |
| | | .popup .form-input { |
| | | padding: 8px; |
| | | border: 1px solid #ddd; |
| | | border-radius: 4px; |
| | | } |
| | | |
| | | .popup-buttons { |
| | | display: flex; |
| | | justify-content: flex-end; |
| | | gap: 10px; |
| | | margin-top: 20px; |
| | | } |
| | | |
| | | /* 响应式设计 */ |
| | | @media (max-width: 500px) { |
| | | .info-row, |
| | | .info-block { |
| | | flex-direction: column; |
| | | align-items: flex-start; |
| | | } |
| | | |
| | | .action-buttons { |
| | | flex-direction: column; |
| | | } |
| | | |
| | | .inspection-table { |
| | | margin: 15px -10px; |
| | | border-radius: 0; |
| | | } |
| | | |
| | | .inspection-table th, |
| | | .inspection-table td { |
| | | padding: 12px 8px; |
| | | font-size: 13px; |
| | | } |
| | | |
| | | .inspection-table th { |
| | | font-size: 12px; |
| | | } |
| | | |
| | | .description-text { |
| | | padding: 8px 12px; |
| | | padding-right: 50px; |
| | | font-size: 13px; |
| | | } |
| | | |
| | | .record-btn { |
| | | padding: 6px 12px; |
| | | font-size: 12px; |
| | | } |
| | | |
| | | /* 移动端水印样式调整 */ |
| | | .watermark { |
| | | font-size: 24px; |
| | | bottom: 4px; |
| | | right: 4px; |
| | | } |
| | | |
| | | /* 移动端表格头部统计 */ |
| | | .table-header-stats { |
| | | flex-direction: column; |
| | | gap: 12px; |
| | | align-items: flex-start; |
| | | padding: 12px 16px; |
| | | } |
| | | |
| | | .stats-right { |
| | | width: 100%; |
| | | justify-content: space-around; |
| | | gap: 8px; |
| | | } |
| | | |
| | | .stat-item { |
| | | flex: 1; |
| | | min-width: auto; |
| | | padding: 6px 8px; |
| | | } |
| | | |
| | | .stat-count { |
| | | font-size: 16px; |
| | | } |
| | | |
| | | .stat-label { |
| | | font-size: 11px; |
| | | } |
| | | |
| | | .stats-left .stats-title { |
| | | font-size: 16px; |
| | | } |
| | | |
| | | .stats-left .stats-subtitle { |
| | | font-size: 13px; |
| | | } |
| | | |
| | | /* 移动端表格hover效果减弱 */ |
| | | .inspection-table tbody tr:hover { |
| | | transform: none; |
| | | box-shadow: none; |
| | | } |
| | | |
| | | /* 移动端状态指示器调整 */ |
| | | .project-name-wrapper { |
| | | gap: 6px; |
| | | } |
| | | |
| | | .status-indicator { |
| | | width: 6px; |
| | | height: 6px; |
| | | } |
| | | } |
| | | |
| | | /* 平板设备样式 */ |
| | | @media (min-width: 501px) and (max-width: 768px) { |
| | | .watermark { |
| | | font-size: 28px; |
| | | bottom: 6px; |
| | | right: 6px; |
| | | } |
| | | |
| | | .inspection-table th, |
| | | .inspection-table td { |
| | | padding: 14px 16px; |
| | | } |
| | | |
| | | .description-text { |
| | | font-size: 14px; |
| | | padding-right: 70px; |
| | | } |
| | | |
| | | .record-btn { |
| | | padding: 7px 14px; |
| | | font-size: 13px; |
| | | } |
| | | } |
| | | |
| | | /* 大屏设备优化 */ |
| | | @media (min-width: 1200px) { |
| | | .inspection-table { |
| | | margin: 30px 0; |
| | | } |
| | | |
| | | .watermark { |
| | | font-size: 36px; |
| | | bottom: 10px; |
| | | right: 10px; |
| | | } |
| | | } |
| | | </style> |