403 lines
9.7 KiB
Vue
403 lines
9.7 KiB
Vue
<template>
|
|
<view class="accept">
|
|
<div class="card">
|
|
<uni-forms label-width="91px" :border="true">
|
|
<uni-forms-item label="机具类型：" name="maName" required>
|
|
<select-one style="width: 100%; height: 90rpx" :options="maNameList" placeholder="请选择机具类型"
|
|
@change="onMaNameChange" @clear="onMaNameClear" />
|
|
</uni-forms-item>
|
|
|
|
<uni-forms-item label="机具规格：" name="maModel" required>
|
|
<select-one style="width: 100%; height: 90rpx" :options="maModelList" placeholder="请选择机具规格"
|
|
:key="maName" @change="onMaModelChange" @clear="onMaModelClear" />
|
|
</uni-forms-item>
|
|
<uni-forms-item label="机具编码：" name="maCode" required>
|
|
<div style="display: flex; justify-content: space-between; align-items: center;">
|
|
<uni-easyinput v-model="prefix" maxlength="30" placeholder="前缀"/>
|
|
<span style="margin: 0 10rpx;"> - </span>
|
|
<uni-easyinput type="number" v-model="postfix" maxlength="30" placeholder="后缀"/>
|
|
</div>
|
|
</uni-forms-item>
|
|
<uni-forms-item label="出厂厂家：" name="supplier" required>
|
|
<select-one style="width: 100%; height: 90rpx" :options="supplierList" placeholder="请选择出厂厂家"
|
|
:key="supplier" @change="onSupplierChange" @clear="onSupplierClear" />
|
|
</uni-forms-item>
|
|
|
|
<uni-forms-item label="检修员：" name="repairMan" required>
|
|
<uni-easyinput v-model="repairMan" maxlength="30" placeholder="请输入检修员" />
|
|
</uni-forms-item>
|
|
|
|
<uni-forms-item label="检验员：" name="checkMan" required>
|
|
<uni-easyinput v-model="checkMan" maxlength="30" placeholder="请输入检验员" />
|
|
</uni-forms-item>
|
|
|
|
<uni-forms-item label="联系方式：" name="phone" required>
|
|
<uni-easyinput v-model="phone" maxlength="11" placeholder="请输入联系方式" />
|
|
</uni-forms-item>
|
|
</uni-forms>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div style="display: flex; justify-content: space-between; align-items: center">
|
|
<button type="primary" size="mini" @click="handleFillCode" style="margin-right: 10px;">填充编码</button>
|
|
<!-- 填充数量 -->
|
|
<uni-easyinput type="number" v-model="fillNum" maxlength="30" placeholder="请输入填充数量" @blur="handleFillNumBlur" />
|
|
</div>
|
|
|
|
<div style="display: flex; flex-wrap: wrap; justify-content: flex-start;max-height: 200px; overflow-y: auto">
|
|
<div v-for="(item, index) in maCode" :key="index" style="margin-right: 10px;">{{ item }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="btn">
|
|
<button class="btn-cont" @click="clearForm">清空</button>
|
|
<button class="btn-cont" @click="confirmAdd">确认</button>
|
|
</div>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
ref
|
|
} from 'vue'
|
|
import {
|
|
addWsMaInfo,
|
|
getMaTypeData,
|
|
getMaModeData,
|
|
getSupplier
|
|
} from '@/services/wsMaInfo/wsMaInfo.js'
|
|
import SelectOne from '../tree-select/select-one'
|
|
import {
|
|
onLoad
|
|
} from '@dcloudio/uni-app'
|
|
|
|
const maName = ref('') // ✅ 机具类型
|
|
const maModel = ref('') // 机具规格
|
|
const maCode = ref([]) // 机具编码
|
|
const supplier = ref('') // 出厂厂家
|
|
const repairMan = ref('王鹏') // 检修员
|
|
const checkMan = ref('高民') // 检验员
|
|
const phone = ref('0551-63703966') // 联系方式
|
|
const modelId = ref('')
|
|
const maNameList = ref([]) // 机具类型下拉列表
|
|
const maModelList = ref([]) // 机具规格下拉列表
|
|
const supplierList = ref([]) // 机具规格下拉列表
|
|
const prefix = ref()
|
|
const postfix = ref()
|
|
const fillNum = ref(1) // 填充数量
|
|
// 清空表单
|
|
const clearForm = () => {
|
|
maName.value = ''
|
|
maModel.value = ''
|
|
maCode.value = []
|
|
supplier.value = ''
|
|
repairMan.value = ''
|
|
checkMan.value = ''
|
|
phone.value = ''
|
|
}
|
|
|
|
// 填充编码
|
|
const handleFillCode = () => {
|
|
if (!prefix.value || !postfix.value) {
|
|
uni.showToast({
|
|
title: '请填写编码前缀和后缀',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
|
|
const prefixValue = prefix.value.trim()
|
|
const postfixValue = postfix.value.trim()
|
|
const fillNumValue = fillNum.value
|
|
const codeList = []
|
|
const startNum = parseInt(postfixValue, 10)
|
|
const padLen = postfixValue.length
|
|
for (let i = 0; i < fillNumValue; i++) {
|
|
const num = String(startNum + i).padStart(padLen, '0')
|
|
codeList.push(`${prefixValue}${num}`)
|
|
}
|
|
maCode.value = codeList
|
|
console.log('🚀 ~ handleFillCode ~ maCode.value:', maCode.value)
|
|
}
|
|
|
|
const handleFillNumBlur = () => {
|
|
// 只能是正整数
|
|
fillNum.value = Math.ceil(String(fillNum.value).replace(/[^\d]/g, ''))
|
|
}
|
|
|
|
const onMaNameChange = (item) => {
|
|
maName.value = item.label;
|
|
maModel.value = null; // 清空规格值
|
|
getMaModeData(item.id).then(res => {
|
|
if (res.code === 200) {
|
|
maModelList.value = res.data.map(option => {
|
|
return {
|
|
id: option.id,
|
|
label: option.name,
|
|
}
|
|
});
|
|
}
|
|
}).catch(error => {
|
|
console.log(error)
|
|
})
|
|
};
|
|
|
|
const onMaModelChange = (item) => {
|
|
modelId.value = item.id;
|
|
maModel.value = item.label;
|
|
}
|
|
|
|
const onSupplierChange = (item) => {
|
|
supplier.value = item.label;
|
|
}
|
|
|
|
const onMaNameClear = () => {
|
|
maName.value = null;
|
|
maModel.value = null; // 清空规格值
|
|
};
|
|
const onMaModelClear = () => {
|
|
maModel.value = null;
|
|
};
|
|
const onSupplierClear = () => {
|
|
supplier.value = null;
|
|
};
|
|
|
|
const getSupplierSelect = () => {
|
|
getSupplier().then(res => {
|
|
if (res.code === 200) {
|
|
supplierList.value = res.data.map(option => {
|
|
return {
|
|
id: option.id,
|
|
label: option.name,
|
|
}
|
|
});
|
|
}
|
|
}).catch(error => {
|
|
console.log(error)
|
|
})
|
|
}
|
|
const getMaName = () => {
|
|
getMaTypeData().then(res => {
|
|
if (res.code === 200) {
|
|
maNameList.value = res.data.map(option => {
|
|
return {
|
|
id: option.id,
|
|
label: option.name,
|
|
}
|
|
});
|
|
console.log(maModelList)
|
|
}
|
|
}).catch(error => {
|
|
console.log(error)
|
|
})
|
|
}
|
|
|
|
// 提交表单
|
|
const confirmAdd = async () => {
|
|
console.log(maName.value)
|
|
if (!maName.value) {
|
|
return uni.showToast({
|
|
title: '请选择机具类型',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
if (!maModel.value) {
|
|
return uni.showToast({
|
|
title: '请选择机具规格',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
if (maCode.value.length === 0) {
|
|
return uni.showToast({
|
|
title: '请输入机具编码',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
if (!supplier.value) {
|
|
return uni.showToast({
|
|
title: '请输入出厂厂家',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
if (!repairMan.value) {
|
|
return uni.showToast({
|
|
title: '请输入检修员',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
if (!checkMan.value) {
|
|
return uni.showToast({
|
|
title: '请输入检验员',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
if (!phone.value) {
|
|
return uni.showToast({
|
|
title: '请输入联系方式',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
|
|
const postData = {
|
|
maName: maName.value,
|
|
maModel: maModel.value,
|
|
maCodeList: maCode.value,
|
|
supplier: supplier.value,
|
|
repairMan: repairMan.value,
|
|
checkMan: checkMan.value,
|
|
phone: phone.value,
|
|
modelId: modelId.value
|
|
}
|
|
|
|
try {
|
|
const res = await addWsMaInfo(postData)
|
|
if (res.code === 200) {
|
|
uni.showToast({
|
|
title: '新增成功',
|
|
icon: 'success'
|
|
})
|
|
clearForm()
|
|
uni.navigateBack()
|
|
}
|
|
} catch (error) {
|
|
console.error(error)
|
|
}
|
|
}
|
|
onLoad(() => {
|
|
getMaName();
|
|
getSupplierSelect();
|
|
})
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
.accept {
|
|
padding: 24rpx;
|
|
height: 90vh;
|
|
word-break: break-all;
|
|
background-color: #f7f8fa;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
// 卡片样式
|
|
.card {
|
|
padding: 32rpx;
|
|
background-color: #fff;
|
|
border-radius: 20rpx;
|
|
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
|
|
margin-bottom: 24rpx;
|
|
height: auto;
|
|
|
|
// 表单样式
|
|
:deep(.uni-forms) {
|
|
.uni-forms-item {
|
|
padding: 24rpx 0;
|
|
margin-bottom: 0;
|
|
border-bottom: 2rpx solid #f5f5f5;
|
|
|
|
&:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.uni-forms-item__label {
|
|
height: 2.75rem;
|
|
color: #8c8c8c;
|
|
}
|
|
|
|
// 下拉选择框样式
|
|
.uni-data-select {
|
|
.uni-select {
|
|
border: 2rpx solid #e8e8e8;
|
|
border-radius: 12rpx;
|
|
height: 88rpx;
|
|
padding: 0 24rpx;
|
|
transition: all 0.3s ease;
|
|
|
|
&:focus-within {
|
|
border-color: #3784fb;
|
|
box-shadow: 0 0 0 2rpx rgba(55, 132, 251, 0.1);
|
|
}
|
|
|
|
.uni-select__input-box {
|
|
height: 88rpx;
|
|
line-height: 88rpx;
|
|
}
|
|
|
|
.uni-select__input-text {
|
|
font-size: 28rpx;
|
|
color: #262626;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 输入框样式
|
|
.uni-easyinput {
|
|
.uni-easyinput__content {
|
|
background-color: #f7f8fa;
|
|
border: 2rpx solid #e8e8e8;
|
|
border-radius: 12rpx;
|
|
height: 88rpx;
|
|
padding: 0 24rpx;
|
|
transition: all 0.3s ease;
|
|
|
|
&:focus-within {
|
|
border-color: #3784fb;
|
|
box-shadow: 0 0 0 2rpx rgba(55, 132, 251, 0.1);
|
|
}
|
|
|
|
.uni-easyinput__content-input {
|
|
font-size: 28rpx;
|
|
height: 88rpx;
|
|
line-height: 88rpx;
|
|
color: #262626;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 底部按钮
|
|
.btn {
|
|
margin-top: auto;
|
|
padding: 32rpx;
|
|
// background: #fff;
|
|
// box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.05);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 24rpx;
|
|
|
|
.btn-cont {
|
|
flex: 1;
|
|
height: 88rpx;
|
|
line-height: 88rpx;
|
|
text-align: center;
|
|
background: linear-gradient(135deg, #4b8eff 0%, #3784fb 100%);
|
|
color: #fff;
|
|
border-radius: 44rpx;
|
|
font-size: 32rpx;
|
|
font-weight: 600;
|
|
box-shadow: 0 6rpx 20rpx rgba(55, 132, 251, 0.2);
|
|
transition: all 0.3s ease;
|
|
|
|
&:active {
|
|
transform: scale(0.98);
|
|
opacity: 0.9;
|
|
box-shadow: 0 2rpx 8rpx rgba(55, 132, 251, 0.2);
|
|
}
|
|
|
|
// 清空按钮样式
|
|
&:first-child {
|
|
background: #fff;
|
|
color: #3784fb;
|
|
border: 2rpx solid #3784fb;
|
|
box-shadow: none;
|
|
|
|
&:active {
|
|
background: #f7f8fa;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |