<template>
|
<view class="page wide-layout" :class="{'has-overlay': (isShowUserSelect || isShow || barcodeIsShow)}">
|
<view class="status-section">
|
<view class="report-table-wrapper">
|
<view class="report-title">报工记录表</view>
|
<div class="table-scroll">
|
<table class="report-table">
|
<thead>
|
<tr>
|
<th>时间</th>
|
<th>报工人</th>
|
<th>工单号</th>
|
<th>产品名称</th>
|
<th>计划生产数</th>
|
<th>机台号</th>
|
<th>初始采集数</th>
|
<th>报工时采集数</th>
|
<th>报工数（计算）</th>
|
<th>不良数</th>
|
<th>良品数（计算）</th>
|
</tr>
|
</thead>
|
<tbody>
|
<!-- 当前实时统计(保持原来单行) -->
|
<tr class="summary-row">
|
<td>{{ nowTime }}</td>
|
<td>{{ staffDisplay || '-' }}</td>
|
<td>{{ orderNo || '-' }}</td>
|
<td>{{ order.daa003 || '-' }}</td>
|
<td>{{ planQtyDisplay }}</td>
|
<td>{{ machineNo || '-' }}</td>
|
<td>{{ order.initCjNum }}</td><!--初始采集数-->
|
<td>{{ order.currentCjNum }}</td><!--报工时采集数-->
|
<td>{{ order.currentCjNum - order.initCjNum }}</td><!--报工数（计算）-->
|
<td>{{ realTimeDefectiveCount }}</td><!--不良数-->
|
<td>{{ realTimeOkCount }}</td><!--良品数（计算）-->
|
</tr>
|
<!-- 历史报工记录行 -->
|
<tr v-for="(r, idx) in reportingHistory" :key="idx">
|
<td>{{ r.bgDate }}</td><!--时间-->
|
<td>{{ r.staff || '-' }}</td><!--报工人-->
|
<td>{{ r.orderNo || '-' }}</td><!--工单号-->
|
<td>{{ order.daa003 || '-' }}</td><!--产品名称-->
|
<td>{{ planQtyDisplay }}</td><!--计划生产数-->
|
<td>{{ r.machineNo || '-' }}</td><!--机台号-->
|
<td>{{ r.initialValue }}</td><!--初始采集数-->
|
<td>{{ r.productionCount }}</td><!--报工时采集数-->
|
<td>{{ r.totalProduction }}</td><!--报工数（计算）-->
|
<td>{{ r.BfQty }}</td><!--不良数-->
|
<td>{{ r.OkQty }}</td><!--良品数（计算）-->
|
</tr>
|
<tr v-if="!reportingHistory.length">
|
<td colspan="11" class="no-data">暂无历史报工记录</td>
|
</tr>
|
</tbody>
|
</table>
|
</div>
|
</view>
|
|
<!-- 下面原有内容保持不变 -->
|
<view class="status-row">
|
<!--<view class="status-box">
|
<text>机台面板数：</text>
|
<input v-model="productionCount" class="highlight" disabled />
|
</view>
|
<view class="status-box">
|
<text>当前采集数：</text>
|
<input v-model="calculatedCurrentCount" class="highlight" disabled />
|
</view>
|
<view class="operator-box">-</view>
|
<view class="status-box standalone-box">
|
<text>已打印条码数：</text>
|
<input v-model="sQuantity" class="highlight" disabled />
|
</view>
|
<view class="operator-box">=</view>
|
<view class="status-box">
|
<text>机采不良数：</text>
|
<input v-model="calculatedDefectiveCount" class="highlight" disabled />
|
</view>
|
<view class="status-box result-box">
|
<text>已生产数：</text>
|
<input v-model="calculatedTotalProduction" class="highlight" disabled />
|
</view>-->
|
<view class="btn-group">
|
<button class="refresh-btn-inline" @click="refresh">刷新</button>
|
<button v-if="isGeneratingBarcode" class="reset-btn-inline" @click="resetGenerateState">重置</button>
|
</view>
|
</view>
|
|
<view class="flex-row gap-lg">
|
<view class="print-section flex-grow">
|
<view class="barcode-info">
|
<view class="user-select">
|
<text>不良数量：</text>
|
<input v-model="customAmount" class="inp bad-input" placeholder="请输入数量" />
|
</view>
|
<view class="user-select">
|
<button class="details-btn" @click="confirmCustomAmount">确认提交</button>
|
</view>
|
</view>
|
</view>
|
|
<view class="current-user-section fill-width">
|
<text>当前报工人：</text>
|
<text class="current-user-name">{{ staffDisplay || '未选择' }}</text>
|
<button class="select-user-btn" @click="isShowUserSelect = true">选人</button>
|
</view>
|
</view>
|
|
<!-- 选人弹窗 -->
|
<view v-if="isShowUserSelect" class="overlay">
|
<view class="popup user-select-popup">
|
<!-- 搜索栏 -->
|
<view class="user-search-bar">
|
<input v-model.trim="userSearch"
|
type="text"
|
class="user-search-input"
|
placeholder="输入工号或姓名搜索"
|
@keydown.enter.prevent />
|
<button v-if="userSearch" class="user-search-clear" @click="userSearch=''">清空</button>
|
<view class="user-search-info">
|
匹配：{{ filteredUsers.length }} / {{ users.length }}
|
</view>
|
</view>
|
<view class="user-list-scroll">
|
<template v-if="filteredUsers.length">
|
<view class="user-list-grid">
|
<button v-for="(u, index) in filteredUsers"
|
:key="index"
|
:class="['user-list-btn', {'selected': u===staffNo}]"
|
@click="selectUser(u)">
|
<span class="user-code">{{ u.split(':')[0] }}</span>
|
<span class="user-name">{{ u.split(':')[1] }}</span>
|
</button>
|
</view>
|
</template>
|
<view v-else class="no-user-result">
|
未找到匹配人员
|
</view>
|
</view>
|
<view class="user-popup-footer">
|
<button class="clean-btn wide-btn" @click="isShowUserSelect = false">关闭</button>
|
</view>
|
</view>
|
</view>
|
|
<!--<view class="bottom-section">
|
<button class="save-btn" @click="save">保存并生效</button>
|
<button class="cancel-btn" @click="cancel">取消</button>
|
</view>-->
|
|
<!-- 保留旧弹窗 -->
|
<view v-if="isShow" class="overlay">
|
<view class="popup">
|
<view class="bottom-section1">
|
<button class="clean-btn" type="warn" @click="deleteBarcode">关闭</button>
|
</view>
|
<view class="reason-section">
|
<text>报工人：</text>
|
<view class="reason-buttons">
|
<button v-for="(u,index) in users" :key="index"
|
:class="{'reason-btn':true,'selected': user===u}"
|
@click="toggleUser(u)">
|
{{ formatUser(u) }}
|
</button>
|
</view>
|
</view>
|
</view>
|
</view>
|
|
<view v-if="barcodeIsShow" class="overlay">
|
<view class="popup">
|
<uni-table ref="table" border stripe emptyText="暂无更多数据" class="table1">
|
<uni-tr>
|
<uni-th align="center" style="font-size:40px;">生成时间</uni-th>
|
<uni-th align="center" style="width:39%;font-size:40px;">条码</uni-th>
|
<uni-th align="center" style="font-size:40px;">报工人</uni-th>
|
<uni-th align="center" style="font-size:40px;">报工数量</uni-th>
|
</uni-tr>
|
<uni-tr v-for="(item,index) in reportingList" :key="index">
|
<uni-td align="center"><input type="text" v-model="item.bgDate" style="width:26vh;" /></uni-td>
|
<uni-td align="center"><input v-model="item.itemNoCade" style="width:40vh;" /></uni-td>
|
<uni-td align="center"><input v-model="item.staffName" /></uni-td>
|
<uni-td align="center"><input v-model="item.okQty" /></uni-td>
|
</uni-tr>
|
</uni-table>
|
<view><button class="clean-btn" type="warn" @click="barcodeIsShow=false">关闭</button></view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import { printTemplate3 } from "../utils/printTemplate";
|
|
export default {
|
props: { orderNo: String, orderId: Number, machineNo: String },
|
data() {
|
return {
|
isShowUserSelect: false,
|
currentUser: '',
|
barcodeAmount: '',
|
users: [], userForm: [], staff: [], user: {},
|
productionCount: 0, printedCount: 0, defectiveCount: 0, order: {},
|
icount: 1, bqty: 0, sQuantity: 0, kgQty: 0, initialValue: 0, qqty: 0,
|
ngStaid: 0, bufferData: '', dataToPrint: [], isLoading: false, but: false,
|
DAA003List: [], lineList: [], isShow: false, barcodeIsShow: false, barcodeList: [],
|
staffNo: '', printStr: '', printMac: '', bluetoothSocket: {}, device: '', uuid: '',
|
printNum: 1, reportingList: [], printLoading: false, customAmount: '',
|
isGeneratingBarcode: false, lastGenerateTime: 0, generateRequestId: null,
|
nowTimeTimer: null, nowTime: '',
|
userSearch: '',
|
/* 新增：历史报工记录数组 */
|
reportingHistory: []
|
}
|
},
|
computed: {
|
//良品数实时计算
|
realTimeDefectiveCount() {
|
// 优先用输入框的值，否则用接口数据
|
const val = Number(this.customAmount);
|
if (!isNaN(val) && this.customAmount !== '') return val;
|
return this.calculatedDefectiveCount;
|
},
|
realTimeOkCount() {
|
// 良品数 = 报工数（计算） - 不良数
|
const total = (this.order.currentCjNum || 0) - (this.order.initCjNum || 0);
|
return total - this.realTimeDefectiveCount;
|
},
|
calculatedCurrentCount() { return (this.productionCount || 0) - (this.initialValue || 0); },
|
calculatedTotalProduction() { return (this.kgQty || 0); }, // 若需恢复旧逻辑可用 (this.kgQty||0)+this.calculatedCurrentCount
|
calculatedDefectiveCount() { return this.calculatedTotalProduction - (this.sQuantity || 0); },
|
planQtyDisplay() { return this.order.planQty || this.order.planQuantity || this.order.daa008 || 0; },
|
staffDisplay() {
|
if (!this.staffNo) return '';
|
const segs = this.staffNo.split(':');
|
return segs.length > 1 ? `${segs[0]} ${segs[1]}` : this.staffNo;
|
},
|
filteredUsers() {
|
if (!this.userSearch) return this.users;
|
const kw = this.userSearch.trim().toLowerCase();
|
return this.users.filter(u => u.toLowerCase().includes(kw));
|
}
|
},
|
created() {
|
this.initializeData();
|
this.fetchData(true);
|
this.init();
|
this.getXS0101();
|
this.updateNowTime();
|
// 秒级刷新；如不需动态跳秒可改为 60000
|
this.nowTimeTimer = setInterval(this.updateNowTime, 1000);
|
},
|
beforeDestroy() { if (this.nowTimeTimer) clearInterval(this.nowTimeTimer); },
|
methods: {
|
formatUser(u) {
|
if (!u) return '';
|
const segs = u.split(':');
|
return segs.length > 1 ? `${segs[0]} ${segs[1]}` : u;
|
},
|
selectUser(u) { this.staffNo = u; this.isShowUserSelect = false; this.userSearch = ''; },
|
/* 修改：增加秒 */
|
updateNowTime() {
|
const d = new Date(), p = n => n.toString().padStart(2, '0');
|
this.nowTime = `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())} ${p(d.getHours())}:${p(d.getMinutes())}:${p(d.getSeconds())}`;
|
},
|
initializeData() {
|
this.productionCount = this.printedCount = this.defectiveCount = 0;
|
this.icount = 1; this.bqty = 0; this.sQuantity = 0; this.kgQty = 0;
|
this.initialValue = 0; this.qqty = 0;
|
this.isGeneratingBarcode = false; this.lastGenerateTime = 0; this.generateRequestId = null;
|
},
|
resetGenerateState() {
|
this.isGeneratingBarcode = false; this.generateRequestId = null; this.lastGenerateTime = 0;
|
this.$showMessage("已重置条码生成状态");
|
},
|
refresh() {
|
this.$sendPostRequest({
|
url: "http://192.168.0.94:9095/Numerical/RefreshDev",
|
data: { machineNo: this.order.machineNo },
|
contentType: "application/json"
|
}).then(r => { r.code == 200 ? this.fetchData(true) : this.$showMessage("同步失败"); });
|
},
|
onDaa003Change(v) {
|
let o = this.lineList[this.DAA003List.indexOf(v)];
|
this.orderId = o.id; this.orderNo = o.daa001;
|
uni.setStorageSync('machine', this.machineNo);
|
uni.setStorageSync('orderId', this.orderId);
|
uni.setStorageSync('orderNo', this.orderNo);
|
this.fetchData(false);
|
},
|
fetchData(flag) {
|
if (!this.orderId && !this.orderNo) return;
|
this.getOrderById();
|
this.getWomdaaPrintById();
|
this.getReportingHistory(); // 新增：每次刷新同步历史
|
if (flag) {
|
this.$post({ url: "/Womdaa/GetWomdaasByShow", data: { machineNo: this.machineNo } })
|
.then(res => {
|
this.lineList = res.data.tbBillList;
|
this.DAA003List = res.data.tbBillList.map(i => i.daa003);
|
});
|
}
|
},
|
/* 新增：获取历史报工记录 */
|
/* 修改：规范历史时间到秒 */
|
getReportingHistory() {
|
if (!this.orderNo) { this.reportingHistory = []; return; }
|
const fmtSec = v => {
|
if (!v) return '';
|
// 兼容后端可能返回的不同格式
|
const d = new Date(typeof v === 'string' ? v.replace(/-/g, '/') : v);
|
if (isNaN(d.getTime())) return v; // 无法解析则原样返回
|
const p = n => n.toString().padStart(2, '0');
|
return `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())} ${p(d.getHours())}:${p(d.getMinutes())}:${p(d.getSeconds())}`;
|
};
|
this.$post({
|
url: "/Womdaa/GetByBillNoBG",
|
data: { billNo: this.orderNo, machineNo: this.machineNo || null }
|
}).then(res => {
|
const list = res?.data?.tbBillList || res?.data || [];
|
this.reportingHistory = list.map(r => {
|
// 依据你数据库字段做映射（下面字段名按常见命名举例，需要按实际改）
|
return {
|
bgDate: r.bgDate || '', // 报工时间
|
staff: (r.staffNo ? (r.staffNo + ' ' + (r.staffName || '')) : (r.staffName || '')),//报工人
|
orderNo: r.billNo,//工单号
|
machineNo: r.machineNo ,//机台号
|
initialValue: r.csQty ?? 0,//初始采集数
|
productionCount: r.cjQty ?? 0,//报工时采集数
|
totalProduction: (r.cjQty - r.csQty) ?? 0,//报工数（计算）
|
BfQty: r.bfQty,//不良数
|
OkQty: r.okQty//良品数（计算）
|
}
|
});
|
}).catch(() => { this.reportingHistory = []; });
|
},
|
toggleUser(u) {
|
if (!u) return;
|
this.user = this.user === u ? null : u;
|
this.staffNo = this.user;
|
},
|
confirmCustomAmount() {
|
if (!this.customAmount || isNaN(Number(this.customAmount))) { this.$showMessage('请输入有效的数量'); return; }
|
if (!this.staffNo) { this.$showMessage('请选择报工人'); return; }
|
const staffNo = this.staffNo.split(':')[0];
|
const amount = Number(this.customAmount);
|
this.$post({
|
url: "/MesInvItemBarcodes/AddBFToBarcodes",
|
data: {
|
orderNo: this.orderNo,
|
orderId: this.orderId,
|
bf: amount,
|
staffNo: staffNo
|
}
|
}).then(res => {
|
if (res.status == 1) { this.$showMessage(res.message); return; }
|
this.$showMessage('报废数量填写成功');
|
this.fetchData(true); // 自动刷新历史
|
this.customAmount = '';
|
}).catch(() => this.$showMessage('报废数量填写失败，请重试'));
|
},
|
save() {
|
if (!this.staffNo) { this.$showMessage('请选择报工人'); return; }
|
uni.showToast({ title: '保存成功', icon: 'success' });
|
this.getReportingHistory(); // 保存后也可刷新
|
},
|
cancel() { uni.showToast({ title: '取消操作', icon: 'none' }); },
|
getOrderById() {
|
this.$post({ url: "/Womdaa/GetWomdaaById", data: { orderId: this.orderId, orderNo: this.orderNo } })
|
.then(res => {
|
this.order = res.data.tbBillList;
|
this.printedCount = res.data.tbBillList.bgqty || 0;
|
this.defectiveCount = res.data.tbBillList.blQty || 0;
|
this.productionCount = this.order.todayOutput || 0;
|
});
|
},
|
getXS0101() {
|
this.$post({ url: "/MesStaff/GetAllXS0101" })
|
.then(res => {
|
this.staff = res.data.tbBillList;
|
this.users = this.staff.map(s => s.staffNo + ":" + s.staffName);
|
});
|
},
|
getWomdaaPrintById() {
|
this.$post({ url: "/Womdaa/GetWomdaaPrintById", data: { orderId: this.orderId } })
|
.then(res => {
|
if (!res?.data?.tbBillList) return;
|
const d = res.data.tbBillList;
|
this.bqty = d.bqty;
|
this.icount = 1;
|
this.sQuantity = d.sQuantity || 0;
|
this.initialValue = d.initialValue || 0;
|
this.kgQty = d.kgQty || 0;
|
this.barcodeAmount = d.qqty || 0;
|
if (this.bqty === 0) this.Completed();
|
}).catch(() => { });
|
},
|
Completed() {
|
this.$post({ url: "/MesOrderSta/Completed", data: { orderId: this.orderId, orderNo: this.orderNo } });
|
},
|
init() {
|
try {
|
const v = this.getAndroidVersion();
|
v >= 12 ? this.initForAndroid12Plus() : this.initForAndroidLegacy();
|
} catch (e) { console.error(e); }
|
},
|
getAndroidVersion() {
|
try { var Build = plus.android.importClass("android.os.Build"); return Build.VERSION.SDK_INT; }
|
catch { return 30; }
|
},
|
initForAndroid12Plus() {
|
try {
|
var main = plus.android.runtimeMainActivity();
|
var BluetoothManager = plus.android.importClass("android.bluetooth.BluetoothManager");
|
var Context = plus.android.importClass("android.content.Context");
|
var UUID = plus.android.importClass("java.util.UUID");
|
this.uuid = UUID.fromString("00001101-0000-1000-8000-00805F9B34FB");
|
var mgr = main.getSystemService(Context.BLUETOOTH_SERVICE);
|
var adp = mgr.getAdapter();
|
if (adp && adp.isDiscovering()) adp.cancelDiscovery();
|
this.printMac = uni.getStorageSync('printMac');
|
var mac = this.printMac || "DC:1D:30:91:06:52";
|
if (adp) {
|
this.device = adp.getRemoteDevice(mac);
|
plus.android.importClass(this.device);
|
}
|
} catch (e) { this.initForAndroidLegacy(); }
|
},
|
initForAndroidLegacy() {
|
try {
|
var BluetoothAdapter = plus.android.importClass("android.bluetooth.BluetoothAdapter");
|
var UUID = plus.android.importClass("java.util.UUID");
|
this.uuid = UUID.fromString("00001101-0000-1000-8000-00805F9B34FB");
|
var BAdapter = BluetoothAdapter.getDefaultAdapter();
|
if (BAdapter) BAdapter.cancelDiscovery();
|
this.printMac = uni.getStorageSync('printMac');
|
var mac = this.printMac || "DC:1D:30:91:06:52";
|
if (BAdapter) {
|
this.device = BAdapter.getRemoteDevice(mac);
|
plus.android.importClass(this.device);
|
this.bluetoothSocket = this.device.createInsecureRfcommSocketToServiceRecord(this.uuid);
|
plus.android.importClass(this.bluetoothSocket);
|
}
|
} catch (e) { }
|
},
|
deleteBarcode() {
|
this.isShow = false;
|
this.isGeneratingBarcode = false;
|
this.generateRequestId = null;
|
this.bufferData = ''; this.dataToPrint = [];
|
this.staffNo = null; this.user = ''; this.barcodeAmount = ''; this.icount = 1; this.staff = null;
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
/* 原样式保持，新增几行辅助样式 */
|
.report-table .summary-row {
|
background: #f0f8ff;
|
font-weight: 600;
|
}
|
|
.report-table .no-data {
|
text-align: center;
|
color: #777;
|
font-size: 14px;
|
}
|
/* 其余样式保持不变 */
|
|
.page {
|
padding: 1.2vh 2vw;
|
display: flex;
|
flex-direction: column;
|
box-sizing: border-box;
|
}
|
|
.wide-layout {
|
max-width: 1600px;
|
margin: 0 auto;
|
}
|
|
.page.has-overlay .status-section > :not(.overlay) {
|
pointer-events: none;
|
}
|
|
.page.has-overlay .status-section > .overlay {
|
pointer-events: auto;
|
}
|
|
.report-table-wrapper {
|
margin-bottom: 12px;
|
}
|
|
.table-scroll {
|
overflow-x: auto;
|
}
|
|
.report-title {
|
font-size: 24px;
|
font-weight: 600;
|
text-align: center;
|
margin: 0 0 8px;
|
}
|
|
.report-table {
|
min-width: 1080px;
|
width: 100%;
|
border-collapse: collapse;
|
font-size: 14px;
|
background: #fff;
|
}
|
|
.report-table th, .report-table td {
|
border: 1px solid #555;
|
padding: 6px 8px;
|
text-align: center;
|
white-space: nowrap;
|
}
|
|
.status-section {
|
display: flex;
|
flex-direction: column;
|
gap: 10px;
|
}
|
|
.status-row {
|
display: flex;
|
flex-wrap: wrap;
|
align-items: center;
|
gap: 10px;
|
background: #f9f9f9;
|
padding: 10px 14px;
|
border-radius: 8px;
|
box-shadow: 0 1px 4px rgba(0,0,0,.06);
|
}
|
|
.status-box {
|
display: flex;
|
align-items: center;
|
}
|
|
.result-box {
|
background: #f0f8ff;
|
padding: 4px 12px;
|
border-radius: 6px;
|
border-left: 5px solid #007aff;
|
}
|
|
input.highlight {
|
width: 9vw;
|
min-width: 110px;
|
font-weight: 600;
|
border: none;
|
background: #fff;
|
text-align: center;
|
font-size: 18px;
|
padding: 6px 0;
|
border-radius: 6px;
|
box-shadow: inset 0 1px 3px rgba(0,0,0,.12);
|
}
|
|
.operator-box {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
font-size: 28px;
|
font-weight: bold;
|
color: #007aff;
|
margin: 0 6px;
|
}
|
|
.btn-group {
|
margin-left: auto;
|
display: flex;
|
align-items: center;
|
gap: 12px;
|
}
|
|
.refresh-btn-inline, .reset-btn-inline {
|
transition: .15s;
|
}
|
|
.refresh-btn-inline {
|
background: #00A2E9;
|
color: #fff;
|
border: none;
|
font-size: 18px;
|
border-radius: 10px;
|
padding: 8px 30px;
|
}
|
|
.refresh-btn-inline:hover {
|
background: #0086c0;
|
}
|
|
.reset-btn-inline {
|
background: #ff6b6b;
|
color: #fff;
|
border: none;
|
font-size: 16px;
|
border-radius: 10px;
|
padding: 8px 18px;
|
}
|
|
.reset-btn-inline:hover {
|
background: #e94d4d;
|
}
|
|
.flex-row {
|
display: flex;
|
flex-wrap: wrap;
|
gap: 20px;
|
align-items: flex-start;
|
}
|
|
.flex-grow {
|
flex: 1 1 540px;
|
}
|
|
.gap-lg {
|
gap: 30px;
|
}
|
|
.print-section {
|
padding: 6px 0 14px;
|
margin-bottom: 0;
|
flex: 1;
|
}
|
|
.barcode-info {
|
display: flex;
|
flex-wrap: wrap;
|
align-items: flex-start;
|
gap: 30px;
|
}
|
|
.inp {
|
padding: 8px;
|
font-size: 16px;
|
border: 1px solid #808080;
|
border-radius: 8px;
|
box-sizing: border-box;
|
}
|
|
.bad-input {
|
width: 320px;
|
max-width: 100%;
|
height: 66px;
|
border: 3px solid #808080;
|
font-size: 34px;
|
text-align: center;
|
}
|
|
.details-btn {
|
padding: 12px 34px;
|
background: #00a2e9;
|
color: #fff;
|
font-size: 20px;
|
border: none;
|
cursor: pointer;
|
border-radius: 12px;
|
}
|
|
.details-btn:hover {
|
background: #008ac2;
|
}
|
|
.current-user-section {
|
display: flex;
|
align-items: center;
|
font-size: 18px;
|
border: 1.5px solid #f00;
|
border-radius: 10px;
|
padding: 14px 22px;
|
background: #fff;
|
gap: 14px;
|
}
|
|
.fill-width {
|
flex: 0 1 380px;
|
}
|
|
.current-user-name {
|
font-weight: bold;
|
font-size: 22px;
|
}
|
|
.select-user-btn {
|
padding: 6px 22px;
|
background: #eee;
|
border: 1px solid #aaa;
|
border-radius: 8px;
|
font-size: 16px;
|
}
|
|
.select-user-btn:hover {
|
background: #ddd;
|
}
|
|
.overlay {
|
position: fixed;
|
top: 0;
|
left: 0;
|
width: 100%;
|
height: 100%;
|
background: rgba(0,0,0,.45);
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
z-index: 1000;
|
}
|
|
.popup {
|
background: #fff;
|
padding: 2vh;
|
border: 1px solid #ccc;
|
box-shadow: 0 0 14px rgba(0,0,0,.12);
|
width: 72vw;
|
max-width: 1400px;
|
height: 70vh;
|
font-size: 1.4vw;
|
max-height: 80vh;
|
overflow-y: auto;
|
border-radius: 12px;
|
z-index: 1001;
|
}
|
|
.user-select-popup {
|
width: 860px;
|
max-width: 80vw;
|
height: auto;
|
min-height: 480px;
|
padding: 0;
|
display: flex;
|
flex-direction: column;
|
}
|
/* 搜索条样式 */
|
.user-search-bar {
|
display: flex;
|
align-items: center;
|
gap: 12px;
|
padding: 18px 32px 0 32px;
|
background: #fff;
|
flex-wrap: wrap;
|
}
|
|
.user-search-input {
|
flex: 1 1 260px;
|
padding: 10px 14px;
|
font-size: 16px;
|
border: 1px solid #bbb;
|
border-radius: 8px;
|
outline: none;
|
}
|
|
.user-search-input:focus {
|
border-color: #007aff;
|
box-shadow: 0 0 0 2px rgba(0,122,255,.15);
|
}
|
|
.user-search-clear {
|
padding: 10px 18px;
|
background: #ff9f43;
|
color: #fff;
|
border: none;
|
border-radius: 8px;
|
font-size: 14px;
|
cursor: pointer;
|
}
|
|
.user-search-clear:hover {
|
background: #ff8920;
|
}
|
|
.user-search-info {
|
font-size: 14px;
|
color: #555;
|
}
|
|
.user-list-scroll {
|
flex: 1 1 auto;
|
overflow-y: auto;
|
padding: 24px 32px 0 32px;
|
}
|
|
.user-list-grid {
|
display: grid;
|
grid-template-columns: repeat(auto-fill,minmax(150px,1fr));
|
gap: 24px 24px;
|
}
|
|
.user-list-btn {
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
align-items: center;
|
gap: 6px;
|
padding: 16px 10px;
|
height: 120px;
|
font-size: 18px;
|
background: #00a2e9;
|
color: #fff;
|
border: none;
|
border-radius: 10px;
|
cursor: pointer;
|
box-sizing: border-box;
|
word-break: break-word;
|
}
|
|
.user-list-btn .user-code {
|
font-weight: 600;
|
font-size: 18px;
|
}
|
|
.user-list-btn .user-name {
|
font-size: 16px;
|
}
|
|
.user-list-btn.selected {
|
background: #0072c9;
|
box-shadow: 0 0 0 3px rgba(255,255,255,.6) inset;
|
}
|
|
.user-list-btn:hover {
|
background: #008ed0;
|
}
|
|
.no-user-result {
|
padding: 40px 0;
|
text-align: center;
|
font-size: 18px;
|
color: #666;
|
}
|
|
.user-popup-footer {
|
flex-shrink: 0;
|
padding: 22px 32px 32px 32px;
|
background: #fff;
|
text-align: center;
|
}
|
|
.clean-btn {
|
width: 48%;
|
padding: 1.6vh;
|
color: #fff;
|
font-size: 1.4vw;
|
border: none;
|
text-align: center;
|
cursor: pointer;
|
border-radius: .6vw;
|
background: #007aff;
|
}
|
|
.clean-btn.wide-btn {
|
width: 60%;
|
font-size: 20px;
|
}
|
|
.clean-btn:hover {
|
background: #0062c9;
|
}
|
|
.reason-section {
|
margin: 14px 0 18px;
|
}
|
|
.reason-buttons {
|
display: grid;
|
grid-template-columns: repeat(5,1fr);
|
gap: 12px;
|
}
|
|
.reason-btn {
|
padding: 10px 6px;
|
background: #808080;
|
color: #fff;
|
font-size: 14px;
|
border: none;
|
border-radius: 8px;
|
cursor: pointer;
|
}
|
|
.reason-btn.selected {
|
background: #FFD700;
|
color: #000;
|
}
|
|
.bottom-section {
|
display: flex;
|
justify-content: space-between;
|
margin-top: 16px;
|
gap: 16px;
|
}
|
|
.save-btn, .cancel-btn {
|
flex: 1;
|
padding: 16px 0;
|
background: #00A2E9;
|
color: #fff;
|
font-size: 20px;
|
border: none;
|
border-radius: 10px;
|
}
|
|
.save-btn:hover, .cancel-btn:hover {
|
background: #0086c0;
|
}
|
|
.table1 {
|
width: 100%;
|
border-spacing: 3px;
|
}
|
|
@media (max-width:1400px) {
|
input.highlight {
|
font-size: 16px;
|
}
|
|
.user-list-btn {
|
height: 110px;
|
font-size: 16px;
|
}
|
|
.reason-btn {
|
font-size: 12px;
|
}
|
}
|
</style>
|
