小程序端
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

284 lines
8.6 KiB

<template>
<view class="v-pages">
<!-- 页面 产品 -->
<view class="v-pages-product">
<view class="v-product-name">{{formData.productName}}</view>
<view class="v-product-code m-t-small"><text
class="iconfont icon-code m-r-small"></text>{{formData.traceabilityProduct}}</view>
</view>
<!-- 页面 表单 -->
<view class="v-form v-container" style="margin-top:-40px; padding-bottom:50px;">
<uni-forms :modelValue="formData" ref="formRef" :label-width="80" border :rules="formRules">
<view class="v-form-item">
<view class="v-form-tip delivery m-t-small"></view>
<uni-forms-item label="配送公司" name="logisticsId">
<picker @change="getCustomChange" mode='selector' :value="currenCustomer" :range="customList">
<view class="uni-input" v-if="customList[currenCustomer]">{{customList[currenCustomer]}}
</view>
<view v-else class="placeholder">请选择配送公司<uni-icons type="down" size="14"></uni-icons></view>
</picker>
</uni-forms-item>
<uni-forms-item label="配送人" name="deliveryMan">
<input v-model="formData.deliveryMan" placeholder="请输入配送人" />
</uni-forms-item>
<uni-forms-item label="配送日期" name="deliveryTime">
<uni-datetime-picker type="date" :clear-icon="false" v-model="formData.deliveryTime"
@maskClick="maskClick" />
</uni-forms-item>
<uni-forms-item label="所在地区" name="startRegion">
<view @tap="startOpen">
<text
v-if="startLocalData">{{startLocalData.provinceName}}/{{startLocalData.cityName}}/{{startLocalData.provinceName}}</text>
<text class="placeholder" v-else>请选择所在地区</text>
<uni-icons type="down" size="14"></uni-icons>
</view>
<cityPicker :column="column" :default-value="defaultValue" :mask-close-able="startMaskCloseAble"
@confirm="startConfirm" @cancel="startCancel" :visible="startVisible" />
</uni-forms-item>
<uni-forms-item label="详细地址" name="startAddress">
<input v-model="formData.startAddress" placeholder="请输入详细地址" />
</uni-forms-item>
</view>
<view class="v-form-item">
<view class="v-form-tip received m-t-small">收</view>
<uni-forms-item label="接收人" name="receivedMan" class="no-border">
<input v-model="formData.receivedMan" placeholder="请输入接收人" />
</uni-forms-item>
<uni-forms-item label="接收日期" name="receivedTime">
<uni-datetime-picker type="date" :clear-icon="false" v-model="formData.receivedTime"
@maskClick="maskClick" />
</uni-forms-item>
<uni-forms-item label="所在地区" name="endRegion">
<view @tap="endOpen">
<text
v-if="endLocalData">{{endLocalData.provinceName}}/{{endLocalData.cityName}}/{{endLocalData.provinceName}}</text>
<text class="placeholder" v-else>请选择所在地区</text>
<uni-icons type="down" size="14"></uni-icons>
</view>
<cityPicker :column="column" :default-value="defaultValue" :mask-close-able="endMaskCloseAble"
@confirm="endConfirm" @cancel="endCancel" :visible="endVisible" />
</uni-forms-item>
<uni-forms-item label="详细地址" name="endAddress">
<input v-model="formData.endAddress" placeholder="请输入详细地址" />
</uni-forms-item>
</view>
</uni-forms>
<view class="fixed fixedBottom v-container"><button class="v-primary-btn large"
@click="submitForm()">保存</button></view>
</view>
</view>
</template>
<script>
import * as ProductApi from "@/api/traceability/product"
import * as DeliveryApi from "@/api/traceability/deliveryrecord"
import * as customApi from "@/api/traceability/custom"
import cityPicker from '@/uni_modules/piaoyi-cityPicker/components/piaoyi-cityPicker/piaoyi-cityPicker'
import {
getDictDatas,
DICT_TYPE
} from '@/utils/dict';
export default {
components: {
cityPicker
},
data() {
return {
defaultValue: '',
column: 3,
startVisible: false,
startMaskCloseAble: true,
startLocalData: null,
endVisible: false,
endMaskCloseAble: true,
endLocalData: null,
ProductID: null,
ClientList: [],
customList: [],
currenCustomer: -1,
salesType: [],
formData: {
id: undefined,
productId: undefined,
productName: undefined,
traceabilityProduct: undefined,
logisticsId: undefined,
deliveryTime: undefined,
receivedTime: undefined,
deliveryMan: undefined,
receivedMan: undefined,
startProvince: undefined,
startCity: undefined,
startCountry: undefined,
startAddress: undefined,
endProvince: undefined,
endCity: undefined,
endCountry: undefined,
endAddress: undefined,
startRegion: undefined,
endRegion: undefined,
},
// 表单校验
formRules: {
logisticsId: {
rules: [{
required: true,
errorMessage: '配送公司不能为空!'
}]
},
deliveryMan: {
rules: [{
required: true,
errorMessage: '配送人不能为空!'
}]
},
deliveryTime: {
rules: [{
required: true,
errorMessage: '配送日期不能为空!'
}]
},
startAddress: {
rules: [{
required: true,
errorMessage: '详细地址不能为空!'
}]
},
endAddress: {
rules: [{
required: true,
errorMessage: '详细地址不能为空!'
}]
},
startRegion: {
rules: [{
required: true,
errorMessage: '所在区域不能为空!'
}]
},
endRegion: {
rules: [{
required: true,
errorMessage: '所在区域不能为空!'
}]
},
},
}
},
onLoad(options) {
// 获取当前ID号
this.ProductID = JSON.parse(JSON.stringify(options.id))
// 获取页面
this.initialize(this.ProductID)
},
onReady() {
// 设置自定义表单校验规则,必须在节点渲染完毕后执行
this.$refs.formRef.setRules(this.formRules)
},
onShow() {
//报损种类 数据字典查询
let arr = this.getDictDatas(DICT_TYPE.SALES_TYPE);
arr.forEach((item) => {
item.text = item.label;
});
this.salesType = arr;
},
methods: {
// 页面初始化
async initialize(id) {
try {
this.getAllClient()
/** 获取溯源产品 信息 */
const res = await ProductApi.getAllTraceableProducts(id)
this.formData.productId = id
this.formData.productName = res.data[0].processingName
this.formData.traceabilityProduct = res.data[0].traceabilityProduct
this.formData.deliveryTime = new Date().valueOf()
} finally {}
},
/** 提交按钮 */
async submitForm() {
this.formData.startRegion = this.startLocalData.name
this.formData.startProvince = this.startLocalData.provinceCode
this.formData.startCity = this.startLocalData.cityCode
this.formData.startCountry = this.startLocalData.areaCode
this.formData.endRegion = this.endLocalData.name
this.formData.endProvince = this.endLocalData.provinceCode
this.formData.endCity = this.endLocalData.cityCode
this.formData.endCountry = this.endLocalData.areaCode
this.formData.deliveryTime = Date.parse(this.formData.deliveryTime)
this.formData.receivedTime = Date.parse(this.formData.receivedTime)
// 校验主表
await this.$refs['formRef'].validate()
try {
const data = this.formData
await DeliveryApi.createDeliveryRecord(data)
uni.showToast({
title: `保存成功`,
icon: 'success',
duration: 2000,
complete: function() {
setTimeout(function() {
uni.redirectTo({
url: '/pages/traceability-product/index'
});
}, 2000);
}
})
} finally {}
},
// 获取当前客户Id
getCustomChange(e) {
this.currenCustomer = e.detail.value
let newData = this.ClientList[this.currenCustomer]
this.formData.logisticsId = value
this.formData.deliveryMan = newData.logisticsLeader
},
// 获得客户下拉列表
async getAllClient() {
try {
const res = await customApi.getAllDeliveryCompany()
let newData = res.data
this.ClientList = newData
this.customList = newData.map((item) => {
return item.logisticsName
})
} finally {}
},
//配送地址
startOpen() {
this.startVisible = true
},
startConfirm(val) {
this.startLocalData = val
this.startVisible = false
},
startCancel() {
this.startVisible = false
},
//接收地址
endOpen() {
this.endVisible = true
},
endConfirm(val) {
this.endLocalData = val
this.endVisible = false
},
endCancel() {
this.endVisible = false
}
},
}
</script>
<style>
</style>