405 lines
12 KiB
Vue
405 lines
12 KiB
Vue
<template>
|
|
<view class="accept page-common">
|
|
<div class="card">
|
|
<uni-row :gutter="24">
|
|
<uni-col :span="6">
|
|
<view class="coding-btn" @tap="codeScan">二维码识别</view>
|
|
</uni-col>
|
|
</uni-row>
|
|
</div>
|
|
<div class="card">
|
|
<uni-forms :modelValue="formData" label-width="170rpx" :border="true">
|
|
<uni-forms-item label="单位名称：" name="unitId" required>
|
|
<eselect
|
|
style="width: 100%; height: 90rpx"
|
|
ref="treeSelect"
|
|
:options="unitList"
|
|
@change="getProject"
|
|
@clear="clearUnit"
|
|
></eselect>
|
|
</uni-forms-item>
|
|
<uni-forms-item label="工程名称：" name="proId" required>
|
|
<eselect
|
|
style="width: 100%; height: 90rpx"
|
|
ref="treeSelect2"
|
|
:options="proList"
|
|
@change="changePro"
|
|
@clear="clearPro"
|
|
></eselect>
|
|
</uni-forms-item>
|
|
<uni-forms-item label="现负责人：" name="fieldPerson" required>
|
|
<uni-easyinput v-model="fieldPerson" maxlength="10" 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="btn">
|
|
<button class="btn-cont" @click="clearForm">清空</button>
|
|
<button class="btn-cont" @click="confirmAdd">确认</button>
|
|
</div>
|
|
<ScanQrCode
|
|
ref="scanQrCodeRef"
|
|
@scanSuccess="handleScanSuccess"
|
|
@scanError="handleScanError"
|
|
/>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, reactive } from 'vue'
|
|
import { onLoad } from '@dcloudio/uni-app'
|
|
import {
|
|
getUnitList,
|
|
getProjectList,
|
|
insert,
|
|
getAgreementInfoById,
|
|
} from '@/services/fieldMaintenance/fieldMaintenance.js'
|
|
import { getMachineByQrCodeApi } from '../../../services/back.js'
|
|
import eselect from '@/components/tree-select/eselect.vue'
|
|
import ScanQrCode from '@/pages/devicesSearch/ScanQrCode.vue'
|
|
|
|
const scanQrCodeRef = ref(null)
|
|
const treeSelect = ref(null)
|
|
const treeSelect2 = ref(null)
|
|
const unitId = ref('')
|
|
const proId = ref('')
|
|
const agreementId = ref('')
|
|
const unitList = ref([])
|
|
const proList = ref([])
|
|
const fieldPerson = ref('')
|
|
const phone = ref('')
|
|
const qrCode = ref('')
|
|
const maInfo = ref({}) //二维码
|
|
// 处理扫描成功事件
|
|
const handleScanSuccess = (result) => {
|
|
qrCode.value = result?.data?.split('?qrcode=')[1] || result?.data
|
|
if (qrCode.value === '') {
|
|
uni.showToast({ title: '扫码识别失败', icon: 'none' })
|
|
} else {
|
|
getMaInfoScan()
|
|
}
|
|
}
|
|
// 处理扫描失败事件
|
|
const handleScanError = (error) => {
|
|
console.error('扫描出错:', error.message)
|
|
uni.showToast({ title: error.message, icon: 'none' })
|
|
}
|
|
|
|
//查看是否是该规格型号
|
|
const getMaInfoScan = async () => {
|
|
let param = {
|
|
qrCode: qrCode.value,
|
|
}
|
|
//通过二维码获取相绑定的设备编码
|
|
const res = await getMachineByQrCodeApi(param)
|
|
console.log(res)
|
|
if (res.code == 200) {
|
|
if (res.data.length > 0) {
|
|
unitId.value = res.data[0].unitId
|
|
proId.value = res.data[0].proId
|
|
} else {
|
|
uni.showToast({ title: '扫码二维码未绑定设备编码！', icon: 'none' })
|
|
}
|
|
} else {
|
|
uni.showToast({ title: res.data.msg, icon: 'none' })
|
|
}
|
|
}
|
|
const codeScan = async () => {
|
|
qrCode.value = ''
|
|
|
|
if (scanQrCodeRef.value) {
|
|
scanQrCodeRef.value.scanQrCode()
|
|
}
|
|
}
|
|
//单位
|
|
const getUnit = () => {
|
|
// proId.value=e.id;
|
|
let obj = {
|
|
projectId: proId.value,
|
|
}
|
|
getUnitList(obj)
|
|
.then((res) => {
|
|
console.log(res)
|
|
unitList.value = res.data
|
|
// getAgreement()
|
|
if (unitId.value && proId.value) {
|
|
getAgreement()
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
console.log(error)
|
|
})
|
|
}
|
|
//工程
|
|
const getProject = (e) => {
|
|
console.log('🚀 ~ getProject ~ e:', e)
|
|
unitId.value = e?.id || ''
|
|
let obj = {
|
|
unitId: unitId.value,
|
|
// "isApp":true
|
|
}
|
|
getProjectList(obj)
|
|
.then((res) => {
|
|
proList.value = res.data
|
|
// proId.value=""
|
|
// treeSelect2.value.clearInput();
|
|
agreementId.value = ''
|
|
if (unitId.value && proId.value) {
|
|
getAgreement()
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
console.log(error)
|
|
})
|
|
}
|
|
const clearUnit = () => {
|
|
unitId.value = ''
|
|
agreementId.value = ''
|
|
getUnit()
|
|
getProject()
|
|
}
|
|
const clearPro = () => {
|
|
proId.value = ''
|
|
agreementId.value = ''
|
|
getProject()
|
|
getProject()
|
|
}
|
|
//工程选择
|
|
const changePro = (e) => {
|
|
console.log(e)
|
|
proId.value = e.id
|
|
getUnit()
|
|
// getAgreement()
|
|
}
|
|
//协议
|
|
const getAgreement = () => {
|
|
let obj = {
|
|
unitId: unitId.value,
|
|
projectId: proId.value,
|
|
}
|
|
getAgreementInfoById(obj)
|
|
.then((res) => {
|
|
console.log(res)
|
|
if (res.code == 200) {
|
|
agreementId.value = res.data.agreementId
|
|
} else {
|
|
agreementId.value = ''
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
console.log(error)
|
|
})
|
|
}
|
|
|
|
//清空
|
|
const clearForm = () => {
|
|
unitId.value = ''
|
|
proId.value = ''
|
|
fieldPerson.value = ''
|
|
phone.value = ''
|
|
agreementId.value = ''
|
|
treeSelect.value.clearInput()
|
|
treeSelect2.value.clearInput()
|
|
getUnit()
|
|
// getProject()
|
|
}
|
|
//确认
|
|
const confirmAdd = () => {
|
|
if (agreementId.value == '') {
|
|
uni.showToast({ title: '请确认单位名称,工程名称!', icon: 'none' })
|
|
} else if (fieldPerson.value == '') {
|
|
uni.showToast({ title: '请确认退料人!', icon: 'none' })
|
|
} else if (phone.value == '') {
|
|
uni.showToast({ title: '请确认联系电话!', icon: 'none' })
|
|
} else {
|
|
let obj = {
|
|
agreementId: agreementId.value,
|
|
fieldPerson: fieldPerson.value,
|
|
phone: phone.value,
|
|
}
|
|
insert(obj)
|
|
.then((res) => {
|
|
if (res.code == 200) {
|
|
uni.showToast({ title: '新增成功', icon: 'none' })
|
|
uni.navigateBack({
|
|
delta: 1, // 返回到已存在的页面
|
|
})
|
|
} else {
|
|
uni.showToast({ title: res.msg, icon: 'none' })
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
console.log(error)
|
|
})
|
|
}
|
|
}
|
|
const leftClick = () => {
|
|
console.log(1)
|
|
uni.navigateBack({
|
|
delta: 1, // 返回到已存在的页面
|
|
})
|
|
}
|
|
const rightClick = () => {
|
|
console.log(2)
|
|
uni.navigateTo({ url: `/pages/back/backCodeAdd` })
|
|
}
|
|
onLoad((options) => {
|
|
getUnit()
|
|
getProject()
|
|
// formData.value = JSON.parse(options.item)
|
|
})
|
|
</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;
|
|
|
|
.coding-btn {
|
|
height: 70rpx;
|
|
line-height: 70rpx;
|
|
background: linear-gradient(135deg, #4b8eff 0%, #3784fb 100%);
|
|
border-radius: 12rpx;
|
|
text-align: center;
|
|
color: #fff;
|
|
font-size: 24rpx;
|
|
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);
|
|
}
|
|
}
|
|
|
|
// 表单样式
|
|
: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 {
|
|
color: #8c8c8c;
|
|
}
|
|
|
|
// 下拉选择框样式
|
|
.uni-data-select {
|
|
.uni-select {
|
|
border: 2rpx solid #e8e8e8;
|
|
border-radius: 12rpx;
|
|
height: 75rpx;
|
|
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: 75rpx;
|
|
line-height: 75rpx;
|
|
}
|
|
|
|
.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: 75rpx;
|
|
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: 75rpx;
|
|
line-height: 75rpx;
|
|
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: 75rpx;
|
|
line-height: 75rpx;
|
|
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>
|