<template>
|
<view class="create-container">
|
<!-- 表单区域 -->
|
<view class="form-content">
|
<!-- 订单号显示 -->
|
<view class="order-no-section">
|
<text class="order-no-label">订单编号：</text>
|
<text class="order-no-value">{{orderNo || '点击生成订单号'}}</text>
|
</view>
|
<view class="order-no-section">
|
<text class="order-no-label">客户：</text>
|
<text class="order-no-value" @click="openCustomerDialog">{{customer || '点击选择客户'}}</text>
|
</view>
|
|
<!-- 核心物料选择 -->
|
<view class="material-section">
|
<view class="section-title" v-if="addOrOnlyAdjust != 2">
|
<text>核心物料选择</text>
|
<button class="mini-btn" @click="openMaterialDialog">
|
<uni-icons type="plus" size="16"></uni-icons>选择物料
|
</button>
|
</view>
|
|
<!-- 已选物料列表 -->
|
<view class="container" v-if="selectedMaterials.length > 0">
|
<view class="sortable-list" ref="list">
|
<view v-for="(item, index) in selectedMaterials" :key="item.name" class="sortable-item" :class="{
|
'dragging': draggingId === item.id,
|
'drop-target': dropTargetIndex === index
|
}" :data-id="item.id" :data-index="index" @touchstart="startDrag(item.name, $event, index)"
|
@touchmove="handleDrag($event)" @touchend="endDrag" @touchcancel="endDrag">
|
<view class="item-content">
|
<text>{{ item.name }}</text>
|
<text class="position">位置: {{ index + 1 }}</text>
|
<view class="drag-handle" v-show="addOrOnlyAdjust != 3">☰</view>
|
<uni-icons type="trash" size="16" color="#f56c6c" @click="removeMaterial(item)"
|
v-show="addOrOnlyAdjust != 2">
|
</uni-icons>
|
</view>
|
</view>
|
</view>
|
</view>
|
|
<view v-else class="empty-tip">
|
<uni-icons type="list" size="40" color="#ccc"></uni-icons>
|
<text>暂无物料，请点击上方按钮添加</text>
|
</view>
|
</view>
|
|
<!-- 提交按钮 -->
|
<view
|
style="position: sticky; bottom: 20px; margin-top: auto; padding: 20rpx 0; background: linear-gradient(to top, white 60%, transparent);">
|
<button class="submit-btn" @click="submitForm">提交订单</button>
|
</view>
|
</view>
|
|
<!-- 选择物料弹窗 -->
|
<uni-popup ref="materialDialog" type="bottom" @change="onMaterialDialogChange">
|
<view class="material-dialog">
|
<view class="dialog-header">
|
<text class="dialog-title">选择核心物料</text>
|
<uni-icons type="close" size="24" @click="closeMaterialDialog"></uni-icons>
|
</view>
|
|
<view class="dialog-content">
|
<!-- 添加新物料 -->
|
<view class="add-material">
|
<uni-forms-item label="物料名称">
|
<uni-easyinput v-model="newMaterial.name" placeholder="输入物料名称" />
|
</uni-forms-item>
|
<button class="add-btn" @click="addNewMaterial">添加</button>
|
</view>
|
|
<!-- 物料列表 -->
|
<scroll-view scroll-y class="material-options">
|
<view class="material-option" v-for="(item,index) in materials" :key="item.name"
|
@click="selectMaterial(item)" :class="{'selected-option': isMaterialSelected(item)}">
|
<view class="material-info">
|
<text class="material-name">{{item.name}}</text>
|
</view>
|
<uni-icons type="checkmark" size="20" color="#2979ff" v-if="isMaterialSelected(item)"
|
style="position: absolute; right: 10px;"></uni-icons>
|
</view>
|
</scroll-view>
|
</view>
|
|
<view class="dialog-footer">
|
<button class="confirm-btn" @click="confirmSelection">确定</button>
|
</view>
|
</view>
|
</uni-popup>
|
|
<!-- 选择客户弹窗 -->
|
<uni-popup ref="customerDialog" type="bottom">
|
<view class="material-dialog">
|
<view class="dialog-header">
|
<text class="dialog-title">选择客户</text>
|
<uni-icons type="close" size="24" @click="closeCustomerDialog"></uni-icons>
|
</view>
|
|
<view class="dialog-content">
|
<!-- 添加新客户 -->
|
<view class="add-material">
|
<uni-forms-item label="客户名称">
|
<uni-easyinput v-model="newCustomer.customerName" placeholder="输入客户名称" />
|
</uni-forms-item>
|
<button class="add-btn" @click="addNewCustomer">添加</button>
|
</view>
|
|
<!-- 物料列表 -->
|
<scroll-view scroll-y class="material-options">
|
<view class="material-option" v-for="(item,index) in customers" :key="item.customerName"
|
@click="selectCustomer(item)" :class="{'selected-option': isCustomerSelected(item)}">
|
<view class="material-info">
|
<text class="material-name">{{item.customerName}}</text>
|
</view>
|
<uni-icons type="checkmark" size="20" color="#2979ff" v-if="isCustomerSelected(item)"
|
style="position: absolute; right: 10px;"></uni-icons>
|
</view>
|
</scroll-view>
|
</view>
|
|
<view class="dialog-footer">
|
<button class="confirm-btn" @click="confirmCusSelection">确定</button>
|
</view>
|
</view>
|
</uni-popup>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
orderNo: "",
|
showMaterialDialog: false,
|
// 模拟物料数据
|
materials: [],
|
selectedMaterials: [], // 已选物料
|
tempSelected: [], // 临时选择的物料
|
newMaterial: {
|
name: ""
|
},
|
draggingId: null,
|
dropTargetIndex: -1,
|
addOrOnlyAdjust: 1,
|
checkedMat: [],
|
customer: '',
|
newCustomer: {
|
customerName: ""
|
},
|
tempCustomer: '',
|
customers: []
|
};
|
},
|
mounted() {},
|
onShow() {
|
if (this.addOrOnlyAdjust == 1) {
|
uni.setNavigationBarTitle({
|
title: '创建订单'
|
})
|
} else if (this.addOrOnlyAdjust == 2) {
|
uni.setNavigationBarTitle({
|
title: '调整顺序'
|
})
|
} else if (this.addOrOnlyAdjust == 3) {
|
uni.setNavigationBarTitle({
|
title: '编辑订单'
|
})
|
}
|
},
|
onLoad(orderInfo) {
|
if (orderInfo) {
|
this.addOrOnlyAdjust = orderInfo.addOrOnlyAdjust;
|
this.orderNo = orderInfo.orderNo;
|
this.customer = orderInfo.customer;
|
if (orderInfo.materials) {
|
const materials = JSON.parse(decodeURIComponent(orderInfo.materials));
|
this.selectedMaterials = materials;
|
this.checkedMat = materials;
|
}
|
if (this.addOrOnlyAdjust != 2) {
|
//#ifdef APP-PLUS
|
const materialService = require('@/services/materialService').default
|
materialService.getAllMaterials().then(x => {
|
this.materials = x;
|
});
|
//#endif
|
}
|
if (this.addOrOnlyAdjust == 1) {
|
//#ifdef APP-PLUS
|
const customerService = require('@/services/customerService.js').default
|
customerService.getCustomers().then(x => {
|
this.customers = x;
|
});
|
//#endif
|
}
|
}
|
|
},
|
methods: {
|
async startDrag(id, e, index) {
|
if (this.addOrOnlyAdjust == 3) return
|
|
this.draggingId = id
|
this.currentIndex = index
|
this.dropTargetIndex = -1
|
|
// 获取元素和列表的精确位置
|
await this.getScrollPosition()
|
await this.getItemDimensions()
|
await this.getListPosition()
|
|
// 计算相对于列表顶部的起始位置
|
this.startY = e.touches[0].clientY - this.listTop + this.scrollTop
|
this.currentY = this.startY
|
},
|
|
handleDrag(e) {
|
if (this.addOrOnlyAdjust == 3) return
|
|
if (!this.draggingId) return
|
|
e.preventDefault()
|
|
// 计算相对于列表顶部的当前位置
|
this.currentY = e.touches[0].clientY - this.listTop + this.scrollTop
|
|
// 计算应该放置的位置索引
|
const newIndex = Math.floor(this.currentY / this.itemHeight)
|
|
// 边界检查
|
const clampedIndex = Math.max(0, Math.min(newIndex, this.selectedMaterials.length - 1))
|
|
// 更新目标位置
|
this.dropTargetIndex = clampedIndex
|
|
// 如果位置发生变化，则执行交换
|
if (clampedIndex !== this.currentIndex) {
|
this.swapItems(clampedIndex)
|
}
|
},
|
|
swapItems(newIndex) {
|
if (this.addOrOnlyAdjust == 3) return
|
|
const items = [...this.selectedMaterials]
|
const draggingItem = items.find(item => item.name === this.draggingId)
|
const oldIndex = items.indexOf(draggingItem)
|
|
// 执行位置交换
|
items.splice(oldIndex, 1)
|
items.splice(newIndex, 0, draggingItem)
|
|
this.selectedMaterials = items
|
this.currentIndex = newIndex
|
},
|
|
endDrag() {
|
if (this.addOrOnlyAdjust == 3) return
|
|
if (!this.draggingId) return
|
|
// 同步回原始数据
|
this.items = this.selectedMaterials.map(item => {
|
const {
|
uniqueKey,
|
...rest
|
} = item
|
return rest
|
})
|
|
// 重置状态
|
this.draggingId = null
|
this.dropTargetIndex = -1
|
this.currentIndex = -1
|
},
|
|
async getItemDimensions() {
|
return new Promise(resolve => {
|
const query = uni.createSelectorQuery().in(this)
|
query.select('.sortable-item').boundingClientRect()
|
query.exec(res => {
|
if (res[0]) this.itemHeight = res[0].height
|
resolve()
|
})
|
})
|
},
|
|
async getScrollPosition() {
|
return new Promise(resolve => {
|
const query = uni.createSelectorQuery().in(this)
|
query.selectViewport().scrollOffset()
|
query.exec(res => {
|
this.scrollTop = res[0]?.scrollTop || 0
|
resolve()
|
})
|
})
|
},
|
|
async getListPosition() {
|
return new Promise(resolve => {
|
const query = uni.createSelectorQuery().in(this)
|
query.select('.sortable-list').boundingClientRect()
|
query.exec(res => {
|
this.listTop = res[0]?.top || 0
|
resolve()
|
})
|
})
|
},
|
|
openCustomerDialog() {
|
if (this.addOrOnlyAdjust == 1) {
|
this.$refs.customerDialog.open();
|
}
|
},
|
|
selectCustomer(item) {
|
if (this.tempCustomer == item.customerName) {
|
this.tempCustomer = '';
|
} else {
|
this.tempCustomer = item.customerName;
|
}
|
},
|
|
isCustomerSelected(item) {
|
return this.tempCustomer === item.customerName;
|
},
|
|
closeCustomerDialog() {
|
this.$refs.customerDialog.close();
|
},
|
|
//确认选择的客户
|
confirmCusSelection() {
|
if (!this.tempCustomer || !this.tempCustomer.trim() || this.tempCustomer.trim().length == 0) {
|
uni.showToast({
|
title: "请选择客户",
|
icon: "none"
|
});
|
return;
|
}
|
|
this.customer = this.tempCustomer;
|
|
this.closeCustomerDialog();
|
},
|
|
//添加新客户
|
async addNewCustomer() {
|
if (!this.newCustomer.customerName || !this.newCustomer.customerName.trim()) {
|
uni.showToast({
|
title: "请输入有效的客户名称",
|
icon: "none"
|
});
|
return;
|
}
|
|
if (this.customers.find(x => x.customerName === this.newCustomer.customerName)) {
|
uni.showToast({
|
title: "客户已存在",
|
icon: "error"
|
});
|
return;
|
}
|
|
const newItem = {
|
customerName: this.newCustomer.customerName.trim(),
|
};
|
this.customers.unshift(newItem);
|
this.tempCustomer = this.newCustomer.customerName.trim();
|
this.newCustomer = {
|
customerName: ""
|
};
|
|
//#ifdef APP-PLUS
|
const customerService = require('@/services/customerService').default
|
await customerService.addCustomer(newItem.customerName);
|
//#endif
|
},
|
|
//获取样式
|
getItemStyle(item) {
|
if (item.id !== this.draggingId) return {}
|
|
// 计算相对于列表顶部的偏移量
|
const offset = this.currentY - this.startY
|
|
return {
|
transform: `translateY(${offset}px)`,
|
transition: 'none',
|
zIndex: 100,
|
opacity: 0.9,
|
position: 'relative'
|
}
|
},
|
|
//打开物料选择弹窗
|
openMaterialDialog() {
|
this.showMaterialDialog = true;
|
this.tempSelected = [...this.selectedMaterials];
|
|
// 确保弹窗组件已准备好
|
this.$nextTick(() => {
|
if (this.$refs.materialDialog) {
|
this.$refs.materialDialog.open();
|
}
|
});
|
},
|
|
//关闭物料选择弹窗
|
closeMaterialDialog() {
|
this.$refs.materialDialog.close();
|
},
|
|
//物料弹窗change事件
|
onMaterialDialogChange(e) {
|
this.showMaterialDialog = e.show;
|
if (!e.show) {
|
this.tempSelected = [];
|
}
|
},
|
|
//选择物料
|
selectMaterial(item) {
|
if (this.checkedMat.find(x => x.name === item.name)) return
|
|
// 创建新数组确保响应式
|
const newSelected = [...this.tempSelected];
|
const index = newSelected.findIndex(m => m.name === item.name);
|
|
if (index === -1) {
|
newSelected.push({
|
...item
|
});
|
} else {
|
newSelected.splice(index, 1);
|
}
|
|
// 使用Vue.set确保响应式
|
this.$set(this, "tempSelected", newSelected);
|
},
|
|
//物料是否被选中
|
isMaterialSelected(item) {
|
return this.tempSelected.some(m => m.name === item.name);
|
},
|
|
//添加物料
|
async addNewMaterial() {
|
if (!this.newMaterial.name || !this.newMaterial.name.trim()) {
|
uni.showToast({
|
title: "请输入有效的物料名称",
|
icon: "none"
|
});
|
return;
|
}
|
|
if (this.materials.find(x => x.name === this.newMaterial.name)) {
|
uni.showToast({
|
title: "物料已存在",
|
icon: "none"
|
});
|
return;
|
}
|
|
const newItem = {
|
name: this.newMaterial.name.trim(),
|
};
|
this.materials.unshift(newItem);
|
this.tempSelected.push(newItem);
|
this.newMaterial = {
|
name: ""
|
};
|
|
//#ifdef APP-PLUS
|
const materialService = require('@/services/materialService').default
|
await materialService.saveMaterial(newItem);
|
//#endif
|
},
|
|
//确认选择
|
confirmSelection() {
|
// 1. 验证是否有选择物料
|
if (this.tempSelected.length === 0) {
|
uni.showToast({
|
title: "请至少选择一个物料",
|
icon: "none"
|
});
|
return;
|
}
|
|
// 2. 数据格式验证和转换
|
this.selectedMaterials = this.tempSelected.map(item => {
|
if (!item || typeof item !== "object") {
|
return {
|
id: Date.now().toString(),
|
name: "未命名物料"
|
};
|
}
|
|
return {
|
id: item.id || Date.now().toString(),
|
name: typeof item.name === "string" ? item.name : "未命名物料"
|
};
|
});
|
|
// 3. 关闭弹窗前显示成功提示
|
uni.showToast({
|
title: `已选择${this.tempSelected.length}个物料`,
|
icon: "success"
|
});
|
|
// 4. 关闭弹窗
|
this.closeMaterialDialog();
|
},
|
|
//移除物料
|
async removeMaterial(item) {
|
let delConfirm = true;
|
|
if (this.addOrOnlyAdjust == 3) {
|
//#ifdef APP-PLUS
|
const scanrecordService = require('@/services/scanrecordService').default
|
const records = await scanrecordService.getScanRecords(this.orderNo, item.name)
|
if (records && records.length > 0) {
|
uni.showToast({
|
title: "已有扫描记录",
|
icon: "error"
|
});
|
return;
|
}
|
uni.showModal({
|
title: '提示',
|
content: `确认要删除物料【${item.name}】吗?`,
|
success: async (res) => {
|
if (res.confirm) {
|
const orderMatService = require('@/services/orderMatService').default
|
await orderMatService.deleteOrderMat(this.orderNo, item.name);
|
|
uni.showToast({
|
title: "删除成功",
|
icon: "success"
|
})
|
|
if (delConfirm) {
|
if (!item || !item.id) return;
|
|
const index = this.selectedMaterials.findIndex(m => m?.id === item.id);
|
if (index !== -1) {
|
this.selectedMaterials.splice(index, 1);
|
}
|
}
|
|
} else {
|
delConfirm = false;
|
}
|
}
|
})
|
//#endif
|
} else {
|
if (delConfirm) {
|
if (!item || !item.id) return;
|
|
const index = this.selectedMaterials.findIndex(m => m?.id === item.id);
|
if (index !== -1) {
|
this.selectedMaterials.splice(index, 1);
|
}
|
}
|
}
|
|
|
},
|
|
//
|
isMobileDevice() {
|
try {
|
const systemInfo = uni.getSystemInfoSync();
|
return (
|
systemInfo.platform === "android" || systemInfo.platform === "ios"
|
);
|
} catch (e) {
|
console.warn("获取设备信息失败", e);
|
return false;
|
}
|
},
|
|
//
|
async submitForm() {
|
try {
|
if (!this.orderNo) {
|
uni.showToast({
|
title: "请先生成订单号",
|
icon: "none"
|
});
|
return;
|
}
|
|
if (this.selectedMaterials.length === 0) {
|
uni.showToast({
|
title: "请至少选择一个物料",
|
icon: "none"
|
});
|
return;
|
}
|
|
if (this.addOrOnlyAdjust == 1) {
|
if (!this.tempCustomer || !this.tempCustomer.trim() || this.tempCustomer.trim().length == 0) {
|
uni.showToast({
|
title: "请选择客户",
|
icon: "none"
|
});
|
return;
|
}
|
|
//#ifdef APP-PLUS
|
const orderMatService = require('@/services/orderMatService').default
|
await orderMatService.saveOrderMaterials(this.orderNo, this.selectedMaterials);
|
|
const orderService = require('@/services/orderService.js').default
|
await orderService.updateOrderCustomer(this.orderNo, this.customer);
|
|
//#endif
|
} else if (this.addOrOnlyAdjust == 2) {
|
//#ifdef APP-PLUS
|
const orderMatService = require('@/services/orderMatService').default
|
await orderMatService.updateMatOrder(this.orderNo, this.selectedMaterials);
|
//#endif
|
} else if (this.addOrOnlyAdjust == 3) {
|
const materials = this.selectedMaterials.filter(x => !this.checkedMat.includes(x.name))
|
const orderMatService = require('@/services/orderMatService').default
|
await orderMatService.saveOrderMaterials(this.orderNo, materials);
|
}
|
|
// 跳转到订单详情页
|
uni.redirectTo({
|
url: `/pages/order/detail?orderNo=${encodeURIComponent(
|
this.orderNo
|
)}&createTime=${encodeURIComponent(
|
new Date().toLocaleString()
|
)}&materials=${encodeURIComponent(
|
JSON.stringify(this.selectedMaterials)
|
)}&customer=${this.customer}&dealOrView=1`,
|
success: () => {
|
this.orderNo = '';
|
},
|
fail: err => {
|
console.error("跳转订单详情失败:", err);
|
uni.showToast({
|
title: "跳转失败，请重试",
|
icon: "none"
|
});
|
}
|
});
|
} catch (e) {
|
console.log(e)
|
}
|
|
}
|
}
|
};
|
</script>
|
|
<style lang="scss">
|
.create-container {
|
height: 100vh;
|
display: flex;
|
flex-direction: column;
|
background-color: #f5f7fa;
|
|
.form-content {
|
flex: 1;
|
padding: 20rpx;
|
background-color: #fff;
|
margin: 20rpx;
|
border-radius: 16rpx;
|
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
|
display: flex;
|
flex-direction: column;
|
position: relative;
|
padding-bottom: 120rpx;
|
/* 为底部按钮留出空间 */
|
}
|
|
.order-no-section {
|
padding: 24rpx;
|
background-color: #f8f8f8;
|
border-radius: 8rpx;
|
margin-bottom: 30rpx;
|
display: flex;
|
align-items: center;
|
cursor: pointer;
|
|
.order-no-label {
|
font-size: 28rpx;
|
color: #666;
|
}
|
|
.order-no-value {
|
font-size: 30rpx;
|
font-weight: bold;
|
color: #2979ff;
|
flex: 1;
|
}
|
}
|
|
.material-section {
|
margin-bottom: 40rpx;
|
|
.section-title {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-bottom: 20rpx;
|
font-size: 32rpx;
|
font-weight: bold;
|
color: #333;
|
|
.mini-btn {
|
height: 50rpx;
|
line-height: 50rpx;
|
font-size: 24rpx;
|
background-color: #2979ff;
|
color: #fff;
|
}
|
}
|
|
.empty-tip {
|
padding: 40rpx 0;
|
text-align: center;
|
color: #999;
|
font-size: 28rpx;
|
}
|
}
|
|
.material-list {
|
margin-top: 20rpx;
|
border-radius: 8rpx;
|
overflow: hidden;
|
min-height: 200rpx;
|
max-height: 60vh;
|
overflow-y: auto;
|
padding-right: 10rpx;
|
background-color: #fff;
|
border: 1rpx solid #eee;
|
|
/* 自定义滚动条样式 */
|
&::-webkit-scrollbar {
|
width: 6rpx;
|
}
|
|
&::-webkit-scrollbar-track {
|
background: #f1f1f1;
|
border-radius: 10rpx;
|
}
|
|
&::-webkit-scrollbar-thumb {
|
background: #c1c1c1;
|
border-radius: 10rpx;
|
}
|
|
&::-webkit-scrollbar-thumb:hover {
|
background: #a8a8a8;
|
}
|
|
&.mobile-drag {
|
-webkit-touch-callout: none;
|
-webkit-user-select: none;
|
user-select: none;
|
|
.material-item {
|
padding: 24rpx;
|
background: #f8f8f8;
|
border-radius: 8rpx;
|
margin-bottom: 10rpx;
|
touch-action: manipulation;
|
}
|
|
.drag-handle {
|
display: none;
|
}
|
}
|
}
|
|
.material-item {
|
padding: 24rpx;
|
border-bottom: 1rpx solid #eee;
|
display: flex;
|
align-items: center;
|
background-color: #fff;
|
transition: all 0.3s ease;
|
|
&.sortable-chosen {
|
background-color: #f0f7ff;
|
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
|
}
|
|
.drag-handle {
|
color: #999;
|
margin-right: 20rpx;
|
padding: 10rpx;
|
}
|
|
.material-image {
|
width: 80rpx;
|
height: 80rpx;
|
border-radius: 8rpx;
|
margin-right: 20rpx;
|
background-color: #f5f5f5;
|
}
|
|
.material-info {
|
flex: 1;
|
min-width: 0;
|
}
|
|
.material-name-simple {
|
font-size: 28rpx;
|
color: #333;
|
flex: 1;
|
margin: 0 20rpx;
|
white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
}
|
|
.material-spec {
|
font-size: 24rpx;
|
color: #999;
|
display: block;
|
margin-bottom: 8rpx;
|
white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
}
|
|
.delete-icon {
|
color: #ff4d4f;
|
margin-left: 20rpx;
|
padding: 10rpx;
|
}
|
}
|
|
.empty-tip {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
padding: 60rpx 0;
|
color: #999;
|
font-size: 28rpx;
|
|
text {
|
margin-top: 20rpx;
|
}
|
}
|
|
.submit-btn {
|
margin-top: 40rpx;
|
background-color: #2979ff;
|
color: #fff;
|
height: 80rpx;
|
line-height: 80rpx;
|
border-radius: 40rpx;
|
font-size: 30rpx;
|
}
|
|
/* 物料选择弹窗样式 */
|
.material-dialog {
|
background-color: #fff;
|
border-radius: 16rpx 16rpx 0 0;
|
max-height: 80vh;
|
display: flex;
|
flex-direction: column;
|
|
.dialog-header {
|
padding: 24rpx;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
border-bottom: 1rpx solid #eee;
|
|
.dialog-title {
|
font-size: 32rpx;
|
font-weight: bold;
|
}
|
}
|
|
.dialog-content {
|
flex: 1;
|
overflow: hidden;
|
display: flex;
|
flex-direction: column;
|
}
|
|
.add-material {
|
padding: 20rpx;
|
border-bottom: 1rpx solid #eee;
|
|
.add-btn {
|
margin-top: 20rpx;
|
background-color: #2979ff;
|
color: #fff;
|
}
|
}
|
|
.material-options {
|
flex: 1;
|
padding: 0 20rpx;
|
width: calc(100% - 40rpx);
|
height: 50vh;
|
/* 设置固定高度 */
|
overflow-y: auto;
|
/* 确保垂直滚动 */
|
|
/* 滚动条样式 */
|
&::-webkit-scrollbar {
|
width: 8rpx;
|
}
|
|
&::-webkit-scrollbar-track {
|
background: #f1f1f1;
|
border-radius: 4rpx;
|
}
|
|
&::-webkit-scrollbar-thumb {
|
background: #888;
|
border-radius: 4rpx;
|
}
|
|
&::-webkit-scrollbar-thumb:hover {
|
background: #555;
|
}
|
}
|
|
.material-option {
|
padding: 24rpx 0;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
border-bottom: 1rpx solid #f5f5f5;
|
transition: background-color 0.3s ease;
|
|
&.selected-option {
|
background-color: #d0e9ff;
|
}
|
|
.material-info {
|
flex: 1;
|
}
|
|
.material-name {
|
font-size: 28rpx;
|
color: #333;
|
}
|
|
.material-spec {
|
font-size: 24rpx;
|
color: #999;
|
}
|
}
|
|
.dialog-footer {
|
padding: 20rpx;
|
border-top: 1rpx solid #eee;
|
|
.confirm-btn {
|
background-color: #2979ff;
|
color: #fff;
|
}
|
}
|
}
|
}
|
|
.container {
|
padding: 0px;
|
}
|
|
.sortable-list {
|
background-color: #f5f5f5;
|
border-radius: 8px;
|
padding: 10px;
|
position: relative;
|
}
|
|
.sortable-item {
|
margin-bottom: 10px;
|
transition: transform 0.2s;
|
position: relative;
|
}
|
|
.item-content {
|
height: 60px;
|
background-color: #fff;
|
border-radius: 8px;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
padding: 0 15px;
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
}
|
|
.sortable-item.dragging .item-content {
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
|
background-color: #f8fbff;
|
}
|
|
.sortable-item.drop-target .item-content {
|
background-color: #f0f7ff;
|
border: 1px dashed #4a90e2;
|
}
|
|
// 表单item样式
|
.uni-forms-item {
|
display: flex;
|
margin-bottom: 20rpx;
|
align-items: center;
|
|
.uni-forms-item__label {
|
width: 150rpx !important;
|
flex: none;
|
font-size: 28rpx;
|
color: #666;
|
padding-right: 20rpx;
|
text-align: right;
|
}
|
|
.uni-forms-item__content {
|
flex: 1;
|
min-width: 0;
|
}
|
}
|
|
.position {
|
color: #888;
|
font-size: 12px;
|
}
|
|
.drag-handle {
|
color: #ccc;
|
font-size: 20px;
|
padding: 0 10px;
|
}
|
</style>
|
