1061 lines
25 KiB
Vue
1061 lines
25 KiB
Vue
<template>
|
||
<view class="page-container">
|
||
|
||
<!-- ========== 视图1: 钢卷搜索 ========== -->
|
||
<view v-show="currentView === 'search'" class="search-view">
|
||
<view class="form-card">
|
||
<view class="card-title">
|
||
<text class="title-dot"></text>
|
||
<text class="title-text">查询钢卷</text>
|
||
</view>
|
||
<view class="form-item">
|
||
<text class="form-label">入场钢卷号</text>
|
||
<input v-model="searchForm.enterCoilNo" placeholder="请输入入场钢卷号" class="form-input" />
|
||
</view>
|
||
<view class="form-item">
|
||
<text class="form-label">当前钢卷号</text>
|
||
<input v-model="searchForm.currentCoilNo" placeholder="请输入当前钢卷号" class="form-input" />
|
||
</view>
|
||
<view class="form-item">
|
||
<text class="form-label-optional">品名</text>
|
||
<input v-model="searchForm.itemName" placeholder="请输入品名" class="form-input" />
|
||
</view>
|
||
<view class="form-item">
|
||
<text class="form-label-optional">规格</text>
|
||
<input v-model="searchForm.itemSpecification" placeholder="请输入规格" class="form-input" />
|
||
</view>
|
||
<view class="form-item">
|
||
<text class="form-label-optional">材质</text>
|
||
<input v-model="searchForm.itemMaterial" placeholder="请输入材质" class="form-input" />
|
||
</view>
|
||
<view class="form-item">
|
||
<text class="form-label-optional">逻辑库区</text>
|
||
<klp-warehouse-picker v-model="searchForm.warehouseId" placeholder="请选择逻辑库区" />
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 查询悬浮按钮 -->
|
||
<view class="float-btn search-btn" @click="searchCoil">
|
||
<text class="btn-text">查询</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- ========== 视图2: 钢卷列表 ========== -->
|
||
<view v-show="currentView === 'list'" class="list-view">
|
||
<view class="list-header">
|
||
<text class="list-title">钢卷列表</text>
|
||
<text class="list-total">共 {{ total }} 条</text>
|
||
</view>
|
||
|
||
<view v-if="coilList.length === 0" class="empty-list">
|
||
<text>暂无符合条件的钢卷数据</text>
|
||
</view>
|
||
|
||
<view v-for="item in coilList" :key="item.coilId" class="coil-card" @click="selectCoil(item)">
|
||
<view class="coil-card-header">
|
||
<text class="coil-no">{{ item.currentCoilNo || '-' }}</text>
|
||
<text class="coil-status" :class="'status-' + (item.status || 0)">{{ item.status === 1 ? '已出库' : '在库' }}</text>
|
||
</view>
|
||
<view class="coil-card-body">
|
||
<text class="coil-info">入场号: {{ item.enterCoilNo || '-' }}</text>
|
||
<text class="coil-info">品名: {{ item.itemName || '-' }}</text>
|
||
<text class="coil-info">规格: {{ item.itemSpecification || '-' }}</text>
|
||
<text class="coil-info">净重: {{ item.netWeight || '-' }}吨</text>
|
||
</view>
|
||
<view class="coil-card-footer">
|
||
<text class="footer-tip">点击查看缺陷记录 →</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 分页 -->
|
||
<view class="pagination" v-if="total > 0">
|
||
<view class="pagination-info">
|
||
<text>共 {{ total }} 条 / {{ totalPages }} 页</text>
|
||
<text>第 {{ pager.pageNum }}/{{ totalPages }} 页</text>
|
||
</view>
|
||
<view class="pagination-btns">
|
||
<button class="page-btn" @click="prevPage" :disabled="pager.pageNum <= 1">上一页</button>
|
||
<button class="page-btn" @click="nextPage" :disabled="pager.pageNum >= totalPages">下一页</button>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 返回搜索按钮 -->
|
||
<view class="float-btn back-btn" @click="backToSearch">
|
||
<text class="btn-text">重查</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- ========== 视图3: 缺陷列表（选中钢卷后） ========== -->
|
||
<view v-show="currentView === 'defectList'" class="defect-view">
|
||
<view class="defect-header">
|
||
<view class="defect-header-left">
|
||
<text class="defect-coil-label">钢卷:</text>
|
||
<text class="defect-coil-no">{{ selectedCoil.currentCoilNo || '-' }}</text>
|
||
</view>
|
||
<view class="defect-header-right">
|
||
<text class="defect-count">异常记录: {{ defectList.length }} 条</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 异常级别统计卡片 -->
|
||
<view class="stats-card" v-if="defectList.length > 0">
|
||
<view class="stat-item" v-for="stat in defectStats" :key="stat.label">
|
||
<text class="stat-num" :style="{ color: stat.color }">{{ stat.count }}</text>
|
||
<text class="stat-label">{{ stat.label }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view v-if="defectList.length === 0" class="empty-list">
|
||
<text>该钢卷暂无异常记录</text>
|
||
</view>
|
||
|
||
<view v-for="(item, index) in defectList" :key="item.abnormalId || index" class="defect-card">
|
||
<view class="defect-card-top">
|
||
<text class="defect-level" :class="'level-' + (item.abnormalLevel || 'C')">{{ item.abnormalLevel || 'C' }}级</text>
|
||
<view class="defect-actions">
|
||
<text class="action-btn edit-btn" @click="editDefect(item)">编辑</text>
|
||
<text class="action-btn del-btn" @click="deleteDefect(item)">删除</text>
|
||
</view>
|
||
</view>
|
||
<view class="defect-desc">{{ item.abnormalDesc || '暂无描述' }}</view>
|
||
<!-- 展示图片 -->
|
||
<view class="defect-images" v-if="item.imgUrl">
|
||
<image v-for="(url, i) in item.imgUrl.split(',')" :key="i" :src="url" class="defect-img" mode="aspectFill" @click="previewImage(url)"></image>
|
||
</view>
|
||
<view class="defect-time">{{ item.createTime || '' }}</view>
|
||
</view>
|
||
|
||
<!-- 添加缺陷悬浮按钮 -->
|
||
<view class="float-btn add-btn" @click="addDefect">
|
||
<text class="btn-text">+</text>
|
||
</view>
|
||
|
||
<!-- 返回列表 -->
|
||
<view class="float-btn back-small-btn" @click="backToCoilList">
|
||
<text class="btn-text">←</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- ========== 缺陷表单弹窗（新增/编辑） ========== -->
|
||
<uni-popup ref="defectPopup" type="bottom" :mask-click="false">
|
||
<view class="popup-wrap">
|
||
<view class="popup-header">
|
||
<text class="popup-title">{{ formMode === 'add' ? '新增缺陷' : '编辑缺陷' }}</text>
|
||
<text class="popup-close" @click="closeDefectForm">✕</text>
|
||
</view>
|
||
|
||
<scroll-view scroll-y class="popup-body">
|
||
<!-- 钢卷号（只读） -->
|
||
<view class="form-item">
|
||
<text class="form-label">钢卷号</text>
|
||
<input v-model="defectForm.coilNo" class="form-input form-input-disabled" disabled placeholder="自动关联" />
|
||
</view>
|
||
|
||
<!-- 异常描述 -->
|
||
<view class="form-item">
|
||
<text class="form-label">异常描述 <text class="required">*</text></text>
|
||
<textarea v-model="defectForm.abnormalDesc" placeholder="请输入异常描述" class="form-textarea" />
|
||
</view>
|
||
|
||
<!-- 异常级别 -->
|
||
<view class="form-item">
|
||
<text class="form-label">异常级别 <text class="required">*</text></text>
|
||
<view class="level-picker">
|
||
<view
|
||
v-for="level in levelOptions"
|
||
:key="level.value"
|
||
class="level-option"
|
||
:class="{ 'level-active': defectForm.abnormalLevel === level.value }"
|
||
:style="{ borderColor: level.value === defectForm.abnormalLevel ? level.color : '#e8e8e8', color: level.value === defectForm.abnormalLevel ? level.color : '#666' }"
|
||
@click="defectForm.abnormalLevel = level.value"
|
||
>
|
||
<text>{{ level.label }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 图片上传 -->
|
||
<view class="form-item">
|
||
<text class="form-label">现场照片</text>
|
||
<view class="upload-area">
|
||
<!-- 已上传图片预览 -->
|
||
<view v-for="(url, i) in uploadedImages" :key="i" class="upload-preview">
|
||
<image :src="url" mode="aspectFill" class="preview-img" @click="previewImage(url)"></image>
|
||
<text class="remove-img" @click="removeImage(i)">✕</text>
|
||
</view>
|
||
<!-- 上传按钮 -->
|
||
<view class="upload-btn" @click="chooseImage">
|
||
<text class="upload-icon">+</text>
|
||
<text class="upload-text">拍照/相册</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 备注 -->
|
||
<view class="form-item">
|
||
<text class="form-label-optional">备注</text>
|
||
<input v-model="defectForm.remark" placeholder="选填备注" class="form-input" />
|
||
</view>
|
||
</scroll-view>
|
||
|
||
<view class="popup-footer">
|
||
<button class="btn btn-cancel" @click="closeDefectForm">取消</button>
|
||
<button class="btn btn-submit" @click="submitDefectForm" :loading="submitting">{{ submitting ? '提交中...' : '保存' }}</button>
|
||
</view>
|
||
</view>
|
||
</uni-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { listMaterialCoil } from '@/api/wms/coil'
|
||
import { listCoilAbnormal, addCoilAbnormal, updateCoilAbnormal, delCoilAbnormal } from '@/api/wms/coilAbnormal'
|
||
import upload from '@/utils/upload'
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
// 视图控制: search | list | defectList
|
||
currentView: 'search',
|
||
|
||
// 钢卷搜索表单
|
||
searchForm: {
|
||
enterCoilNo: '',
|
||
currentCoilNo: '',
|
||
itemName: '',
|
||
itemSpecification: '',
|
||
itemMaterial: '',
|
||
warehouseId: ''
|
||
},
|
||
|
||
// 分页
|
||
pager: {
|
||
pageNum: 1,
|
||
pageSize: 20
|
||
},
|
||
total: 0,
|
||
coilList: [],
|
||
|
||
// 选中的钢卷
|
||
selectedCoil: {},
|
||
|
||
// 缺陷列表
|
||
defectList: [],
|
||
|
||
// 缺陷级别选项
|
||
levelOptions: [
|
||
{ value: 'A', label: 'A级(严重)', color: '#ff4d4f' },
|
||
{ value: 'B', label: 'B级(较重)', color: '#fa8c16' },
|
||
{ value: 'C', label: 'C级(一般)', color: '#fadb14' },
|
||
{ value: 'D', label: 'D级(轻微)', color: '#52c41a' }
|
||
],
|
||
|
||
// 缺陷表单
|
||
defectForm: {
|
||
coilId: '',
|
||
coilNo: '',
|
||
abnormalDesc: '',
|
||
abnormalLevel: 'C',
|
||
imgUrl: '',
|
||
remark: ''
|
||
},
|
||
formMode: 'add', // add | edit
|
||
editingId: null,
|
||
|
||
// 上传的图片URL列表（暂存）
|
||
uploadedImages: [],
|
||
submitting: false,
|
||
|
||
// 搜索状态
|
||
searching: false
|
||
}
|
||
},
|
||
computed: {
|
||
totalPages() {
|
||
if (this.total === 0) return 0
|
||
return Math.ceil(this.total / this.pager.pageSize)
|
||
},
|
||
// 异常统计
|
||
defectStats() {
|
||
const stats = {}
|
||
this.levelOptions.forEach(lo => {
|
||
stats[lo.value] = { label: lo.label, color: lo.color, count: 0 }
|
||
})
|
||
this.defectList.forEach(d => {
|
||
const key = d.abnormalLevel || 'C'
|
||
if (stats[key]) stats[key].count++
|
||
})
|
||
return Object.values(stats)
|
||
}
|
||
},
|
||
methods: {
|
||
// ========== 钢卷搜索 ==========
|
||
async searchCoil() {
|
||
this.searching = true
|
||
this.pager.pageNum = 1
|
||
uni.showLoading({ title: '查询中...' })
|
||
try {
|
||
const res = await listMaterialCoil({ ...this.searchForm, ...this.pager })
|
||
this.coilList = res.rows || []
|
||
this.total = res.total || 0
|
||
this.currentView = 'list'
|
||
uni.pageScrollTo({ scrollTop: 0, duration: 300 })
|
||
} catch (err) {
|
||
console.error('查询钢卷失败:', err)
|
||
uni.showToast({ title: '查询失败', icon: 'none' })
|
||
} finally {
|
||
uni.hideLoading()
|
||
this.searching = false
|
||
}
|
||
},
|
||
|
||
async loadPageData() {
|
||
uni.showLoading({ title: '加载中...' })
|
||
try {
|
||
const res = await listMaterialCoil({ ...this.searchForm, ...this.pager })
|
||
this.coilList = res.rows || []
|
||
this.total = res.total || 0
|
||
uni.pageScrollTo({ scrollTop: 0, duration: 300 })
|
||
} catch (err) {
|
||
uni.showToast({ title: '加载失败', icon: 'none' })
|
||
} finally {
|
||
uni.hideLoading()
|
||
}
|
||
},
|
||
|
||
prevPage() {
|
||
if (this.pager.pageNum <= 1) return
|
||
this.pager.pageNum--
|
||
this.loadPageData()
|
||
},
|
||
|
||
nextPage() {
|
||
if (this.pager.pageNum >= this.totalPages) return
|
||
this.pager.pageNum++
|
||
this.loadPageData()
|
||
},
|
||
|
||
backToSearch() {
|
||
this.currentView = 'search'
|
||
uni.pageScrollTo({ scrollTop: 0, duration: 300 })
|
||
},
|
||
|
||
// ========== 选中钢卷 → 加载缺陷 ==========
|
||
async selectCoil(coil) {
|
||
this.selectedCoil = coil
|
||
uni.showLoading({ title: '加载缺陷...' })
|
||
try {
|
||
const res = await listCoilAbnormal({ coilId: coil.coilId, pageNum: 1, pageSize: 999 })
|
||
this.defectList = res.rows || []
|
||
this.currentView = 'defectList'
|
||
} catch (err) {
|
||
console.error('加载缺陷失败:', err)
|
||
uni.showToast({ title: '加载缺陷失败', icon: 'none' })
|
||
} finally {
|
||
uni.hideLoading()
|
||
}
|
||
},
|
||
|
||
backToCoilList() {
|
||
this.currentView = 'list'
|
||
},
|
||
|
||
// ========== 缺陷 CRUD ==========
|
||
addDefect() {
|
||
this.formMode = 'add'
|
||
this.editingId = null
|
||
this.defectForm = {
|
||
coilId: this.selectedCoil.coilId || '',
|
||
coilNo: this.selectedCoil.currentCoilNo || '',
|
||
abnormalDesc: '',
|
||
abnormalLevel: 'C',
|
||
imgUrl: '',
|
||
remark: ''
|
||
}
|
||
this.uploadedImages = []
|
||
this.$refs.defectPopup.open()
|
||
},
|
||
|
||
editDefect(item) {
|
||
this.formMode = 'edit'
|
||
this.editingId = item.abnormalId
|
||
this.defectForm = {
|
||
coilId: item.coilId || this.selectedCoil.coilId,
|
||
coilNo: this.selectedCoil.currentCoilNo || '',
|
||
abnormalDesc: item.abnormalDesc || '',
|
||
abnormalLevel: item.abnormalLevel || 'C',
|
||
imgUrl: item.imgUrl || '',
|
||
remark: item.remark || ''
|
||
}
|
||
this.uploadedImages = item.imgUrl ? item.imgUrl.split(',').filter(u => u.trim()) : []
|
||
this.$refs.defectPopup.open()
|
||
},
|
||
|
||
closeDefectForm() {
|
||
this.$refs.defectPopup.close()
|
||
},
|
||
|
||
async deleteDefect(item) {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '确定删除此异常记录吗？',
|
||
success: async (res) => {
|
||
if (res.confirm) {
|
||
try {
|
||
await delCoilAbnormal(item.abnormalId)
|
||
uni.showToast({ title: '删除成功', icon: 'success' })
|
||
// 刷新列表
|
||
const r = await listCoilAbnormal({ coilId: this.selectedCoil.coilId, pageNum: 1, pageSize: 999 })
|
||
this.defectList = r.rows || []
|
||
} catch (err) {
|
||
uni.showToast({ title: '删除失败', icon: 'none' })
|
||
}
|
||
}
|
||
}
|
||
})
|
||
},
|
||
|
||
// ========== 图片上传 ==========
|
||
chooseImage() {
|
||
uni.chooseImage({
|
||
count: 9 - this.uploadedImages.length,
|
||
sourceType: ['camera', 'album'],
|
||
success: (res) => {
|
||
uni.showLoading({ title: '上传中...' })
|
||
const filePaths = res.tempFilePaths
|
||
let uploaded = 0
|
||
|
||
filePaths.forEach((filePath) => {
|
||
upload({
|
||
url: '/system/oss/upload',
|
||
filePath: filePath,
|
||
name: 'file'
|
||
}).then(result => {
|
||
// 假设返回数据中有 url 字段
|
||
const url = result.url || result.data?.url || result.data || ''
|
||
if (url) {
|
||
this.uploadedImages.push(url)
|
||
}
|
||
uploaded++
|
||
if (uploaded >= filePaths.length) {
|
||
uni.hideLoading()
|
||
uni.showToast({ title: '上传完成', icon: 'success' })
|
||
}
|
||
}).catch(err => {
|
||
uploaded++
|
||
if (uploaded >= filePaths.length) {
|
||
uni.hideLoading()
|
||
}
|
||
console.error('上传失败:', err)
|
||
})
|
||
})
|
||
},
|
||
fail: (err) => {
|
||
console.error('选择图片失败:', err)
|
||
}
|
||
})
|
||
},
|
||
|
||
removeImage(index) {
|
||
this.uploadedImages.splice(index, 1)
|
||
},
|
||
|
||
previewImage(url) {
|
||
if (!url) return
|
||
const urls = this.uploadedImages.length > 0 ? this.uploadedImages : [url]
|
||
uni.previewImage({
|
||
current: url,
|
||
urls: urls
|
||
})
|
||
},
|
||
|
||
// ========== 提交缺陷表单 ==========
|
||
async submitDefectForm() {
|
||
if (!this.defectForm.abnormalDesc) {
|
||
uni.showToast({ title: '请输入异常描述', icon: 'none' })
|
||
return
|
||
}
|
||
|
||
this.submitting = true
|
||
try {
|
||
const formData = {
|
||
coilId: this.defectForm.coilId,
|
||
abnormalDesc: this.defectForm.abnormalDesc,
|
||
abnormalLevel: this.defectForm.abnormalLevel,
|
||
imgUrl: this.uploadedImages.join(','),
|
||
remark: this.defectForm.remark
|
||
}
|
||
|
||
if (this.formMode === 'add') {
|
||
await addCoilAbnormal(formData)
|
||
uni.showToast({ title: '新增成功', icon: 'success' })
|
||
} else {
|
||
formData.abnormalId = this.editingId
|
||
await updateCoilAbnormal(formData)
|
||
uni.showToast({ title: '更新成功', icon: 'success' })
|
||
}
|
||
|
||
this.$refs.defectPopup.close()
|
||
// 刷新缺陷列表
|
||
const r = await listCoilAbnormal({ coilId: this.selectedCoil.coilId, pageNum: 1, pageSize: 999 })
|
||
this.defectList = r.rows || []
|
||
} catch (err) {
|
||
console.error('提交缺陷失败:', err)
|
||
uni.showToast({ title: '提交失败', icon: 'none' })
|
||
} finally {
|
||
this.submitting = false
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.page-container {
|
||
min-height: 100vh;
|
||
background: #f5f7fa;
|
||
padding-bottom: 140rpx;
|
||
}
|
||
|
||
// ========== 卡片统一样式 ==========
|
||
.form-card {
|
||
background: #fff;
|
||
border-radius: 16rpx;
|
||
padding: 30rpx;
|
||
margin: 20rpx;
|
||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
|
||
}
|
||
|
||
.card-title {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 25rpx;
|
||
padding-bottom: 20rpx;
|
||
border-bottom: 1rpx solid #f0f0f0;
|
||
|
||
.title-dot {
|
||
width: 8rpx;
|
||
height: 28rpx;
|
||
background: #007aff;
|
||
border-radius: 4rpx;
|
||
margin-right: 12rpx;
|
||
}
|
||
|
||
.title-text {
|
||
font-size: 32rpx;
|
||
font-weight: 600;
|
||
color: #333;
|
||
}
|
||
}
|
||
|
||
// ========== 表单 ==========
|
||
.form-item {
|
||
margin-bottom: 24rpx;
|
||
|
||
.form-label {
|
||
display: block;
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
margin-bottom: 12rpx;
|
||
font-weight: 500;
|
||
|
||
.required {
|
||
color: #ff4d4f;
|
||
}
|
||
}
|
||
|
||
.form-label-optional {
|
||
display: block;
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
margin-bottom: 12rpx;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.form-input {
|
||
width: 100%;
|
||
height: 80rpx;
|
||
padding: 0 24rpx;
|
||
background: #f8f9fa;
|
||
border: 2rpx solid #e8e8e8;
|
||
border-radius: 12rpx;
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
box-sizing: border-box;
|
||
|
||
&:focus {
|
||
background: #fff;
|
||
border-color: #007aff;
|
||
}
|
||
|
||
&.form-input-disabled {
|
||
background: #f5f5f5;
|
||
color: #999;
|
||
}
|
||
}
|
||
|
||
.form-textarea {
|
||
width: 100%;
|
||
min-height: 160rpx;
|
||
padding: 20rpx 24rpx;
|
||
background: #f8f9fa;
|
||
border: 2rpx solid #e8e8e8;
|
||
border-radius: 12rpx;
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
box-sizing: border-box;
|
||
|
||
&:focus {
|
||
background: #fff;
|
||
border-color: #007aff;
|
||
}
|
||
}
|
||
}
|
||
|
||
// ========== 级别选择器 ==========
|
||
.level-picker {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 16rpx;
|
||
|
||
.level-option {
|
||
padding: 14rpx 28rpx;
|
||
border: 2rpx solid #e8e8e8;
|
||
border-radius: 12rpx;
|
||
font-size: 26rpx;
|
||
color: #666;
|
||
background: #f8f9fa;
|
||
|
||
&.level-active {
|
||
background: #fff;
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
}
|
||
|
||
// ========== 悬浮按钮 ==========
|
||
.float-btn {
|
||
position: fixed;
|
||
right: 30rpx;
|
||
bottom: 60rpx;
|
||
z-index: 9999;
|
||
width: 120rpx;
|
||
height: 120rpx;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #fff;
|
||
font-size: 28rpx;
|
||
font-weight: 500;
|
||
box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.15);
|
||
|
||
&:active {
|
||
transform: scale(0.95);
|
||
opacity: 0.9;
|
||
}
|
||
.btn-text { color: #fff; }
|
||
}
|
||
|
||
.search-btn { background: linear-gradient(135deg, #007aff 0%, #0051d5 100%); }
|
||
.back-btn { background: linear-gradient(135deg, #666 0%, #333 100%); }
|
||
.add-btn { background: linear-gradient(135deg, #52c41a 0%, #389e0d 100%); }
|
||
.back-small-btn {
|
||
right: 180rpx;
|
||
width: 90rpx;
|
||
height: 90rpx;
|
||
font-size: 36rpx;
|
||
background: rgba(0,0,0,0.5);
|
||
}
|
||
|
||
// ========== 钢卷列表 ==========
|
||
.list-view {
|
||
padding: 20rpx;
|
||
}
|
||
|
||
.list-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 0 10rpx;
|
||
margin-bottom: 20rpx;
|
||
|
||
.list-title {
|
||
font-size: 32rpx;
|
||
font-weight: 600;
|
||
color: #333;
|
||
}
|
||
|
||
.list-total {
|
||
font-size: 26rpx;
|
||
color: #999;
|
||
}
|
||
}
|
||
|
||
.coil-card {
|
||
background: #fff;
|
||
border-radius: 16rpx;
|
||
padding: 24rpx;
|
||
margin-bottom: 16rpx;
|
||
box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);
|
||
|
||
&:active {
|
||
transform: scale(0.98);
|
||
background: #f8f9fa;
|
||
}
|
||
|
||
.coil-card-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 12rpx;
|
||
|
||
.coil-no {
|
||
font-size: 30rpx;
|
||
font-weight: 600;
|
||
color: #333;
|
||
}
|
||
|
||
.coil-status {
|
||
font-size: 22rpx;
|
||
padding: 4rpx 16rpx;
|
||
border-radius: 20rpx;
|
||
|
||
&.status-0 { background: #e6f7ff; color: #1890ff; }
|
||
&.status-1 { background: #f6ffed; color: #52c41a; }
|
||
}
|
||
}
|
||
|
||
.coil-card-body {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 8rpx 20rpx;
|
||
margin-bottom: 12rpx;
|
||
|
||
.coil-info {
|
||
font-size: 24rpx;
|
||
color: #666;
|
||
}
|
||
}
|
||
|
||
.coil-card-footer {
|
||
.footer-tip {
|
||
font-size: 24rpx;
|
||
color: #007aff;
|
||
}
|
||
}
|
||
}
|
||
|
||
// ========== 缺陷列表 ==========
|
||
.defect-view {
|
||
padding: 20rpx;
|
||
}
|
||
|
||
.defect-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
background: linear-gradient(135deg, #1a73e8 0%, #4285f4 100%);
|
||
border-radius: 16rpx;
|
||
padding: 24rpx 30rpx;
|
||
margin-bottom: 20rpx;
|
||
|
||
.defect-header-left {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12rpx;
|
||
|
||
.defect-coil-label {
|
||
font-size: 26rpx;
|
||
color: rgba(255,255,255,0.8);
|
||
}
|
||
|
||
.defect-coil-no {
|
||
font-size: 32rpx;
|
||
color: #fff;
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
|
||
.defect-header-right {
|
||
.defect-count {
|
||
font-size: 24rpx;
|
||
color: rgba(255,255,255,0.8);
|
||
}
|
||
}
|
||
}
|
||
|
||
// 统计卡片
|
||
.stats-card {
|
||
display: flex;
|
||
background: #fff;
|
||
border-radius: 16rpx;
|
||
padding: 20rpx;
|
||
margin-bottom: 20rpx;
|
||
box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);
|
||
|
||
.stat-item {
|
||
flex: 1;
|
||
text-align: center;
|
||
|
||
.stat-num {
|
||
font-size: 36rpx;
|
||
font-weight: 700;
|
||
display: block;
|
||
}
|
||
|
||
.stat-label {
|
||
font-size: 22rpx;
|
||
color: #999;
|
||
margin-top: 4rpx;
|
||
display: block;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 缺陷卡片
|
||
.defect-card {
|
||
background: #fff;
|
||
border-radius: 16rpx;
|
||
padding: 24rpx;
|
||
margin-bottom: 16rpx;
|
||
box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);
|
||
|
||
.defect-card-top {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 12rpx;
|
||
|
||
.defect-level {
|
||
font-size: 24rpx;
|
||
font-weight: 600;
|
||
padding: 4rpx 16rpx;
|
||
border-radius: 20rpx;
|
||
|
||
&.level-A { background: #fff2f0; color: #ff4d4f; }
|
||
&.level-B { background: #fff7e6; color: #fa8c16; }
|
||
&.level-C { background: #feffe6; color: #d4b106; }
|
||
&.level-D { background: #f6ffed; color: #52c41a; }
|
||
}
|
||
|
||
.defect-actions {
|
||
display: flex;
|
||
gap: 16rpx;
|
||
|
||
.action-btn {
|
||
font-size: 24rpx;
|
||
padding: 4rpx 16rpx;
|
||
border-radius: 8rpx;
|
||
}
|
||
|
||
.edit-btn { background: #e6f7ff; color: #1890ff; }
|
||
.del-btn { background: #fff2f0; color: #ff4d4f; }
|
||
}
|
||
}
|
||
|
||
.defect-desc {
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
line-height: 1.5;
|
||
margin-bottom: 12rpx;
|
||
}
|
||
|
||
.defect-images {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 12rpx;
|
||
margin-bottom: 12rpx;
|
||
|
||
.defect-img {
|
||
width: 160rpx;
|
||
height: 160rpx;
|
||
border-radius: 8rpx;
|
||
background: #f0f0f0;
|
||
}
|
||
}
|
||
|
||
.defect-time {
|
||
font-size: 22rpx;
|
||
color: #bbb;
|
||
}
|
||
}
|
||
|
||
// ========== 图片上传区域 ==========
|
||
.upload-area {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 16rpx;
|
||
|
||
.upload-preview {
|
||
position: relative;
|
||
width: 160rpx;
|
||
height: 160rpx;
|
||
|
||
.preview-img {
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 8rpx;
|
||
background: #f0f0f0;
|
||
}
|
||
|
||
.remove-img {
|
||
position: absolute;
|
||
top: -12rpx;
|
||
right: -12rpx;
|
||
width: 36rpx;
|
||
height: 36rpx;
|
||
background: rgba(0,0,0,0.6);
|
||
color: #fff;
|
||
border-radius: 50%;
|
||
text-align: center;
|
||
line-height: 36rpx;
|
||
font-size: 20rpx;
|
||
}
|
||
}
|
||
|
||
.upload-btn {
|
||
width: 160rpx;
|
||
height: 160rpx;
|
||
background: #f8f9fa;
|
||
border: 2rpx dashed #ccc;
|
||
border-radius: 8rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
.upload-icon {
|
||
font-size: 48rpx;
|
||
color: #999;
|
||
}
|
||
|
||
.upload-text {
|
||
font-size: 22rpx;
|
||
color: #999;
|
||
margin-top: 8rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
// ========== 弹窗 ==========
|
||
.popup-wrap {
|
||
background: #fff;
|
||
border-radius: 24rpx 24rpx 0 0;
|
||
max-height: 80vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.popup-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 30rpx 30rpx 20rpx;
|
||
border-bottom: 1rpx solid #f0f0f0;
|
||
|
||
.popup-title {
|
||
font-size: 32rpx;
|
||
font-weight: 600;
|
||
color: #333;
|
||
}
|
||
|
||
.popup-close {
|
||
font-size: 36rpx;
|
||
color: #999;
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
}
|
||
|
||
.popup-body {
|
||
padding: 24rpx 30rpx;
|
||
max-height: 550rpx;
|
||
}
|
||
|
||
.popup-footer {
|
||
display: flex;
|
||
gap: 20rpx;
|
||
padding: 20rpx 30rpx;
|
||
padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
|
||
border-top: 1rpx solid #f0f0f0;
|
||
|
||
.btn {
|
||
flex: 1;
|
||
height: 88rpx;
|
||
line-height: 88rpx;
|
||
border-radius: 12rpx;
|
||
font-size: 30rpx;
|
||
font-weight: 500;
|
||
border: none;
|
||
text-align: center;
|
||
|
||
&:active {
|
||
transform: scale(0.98);
|
||
}
|
||
|
||
&::after { border: none; }
|
||
}
|
||
|
||
.btn-cancel {
|
||
background: #f5f5f5;
|
||
color: #666;
|
||
}
|
||
|
||
.btn-submit {
|
||
background: linear-gradient(135deg, #007aff 0%, #0051d5 100%);
|
||
color: #fff;
|
||
box-shadow: 0 4rpx 16rpx rgba(0, 122, 255, 0.3);
|
||
}
|
||
}
|
||
|
||
// ========== 空状态 & 分页 ==========
|
||
.empty-list {
|
||
text-align: center;
|
||
padding: 100rpx 0;
|
||
color: #999;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.pagination {
|
||
margin-top: 40rpx;
|
||
padding: 20rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 20rpx;
|
||
|
||
.pagination-info {
|
||
display: flex;
|
||
gap: 30rpx;
|
||
font-size: 26rpx;
|
||
color: #666;
|
||
}
|
||
|
||
.pagination-btns {
|
||
display: flex;
|
||
gap: 20rpx;
|
||
|
||
.page-btn {
|
||
width: 160rpx;
|
||
height: 70rpx;
|
||
line-height: 70rpx;
|
||
background: #f0f7ff;
|
||
border: 1rpx solid #007aff;
|
||
border-radius: 8rpx;
|
||
color: #007aff;
|
||
font-size: 28rpx;
|
||
|
||
&:disabled {
|
||
background: #f5f5f5;
|
||
border-color: #ddd;
|
||
color: #999;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|