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.
468 lines
13 KiB
468 lines
13 KiB
<template>
|
|
<view class="v-pages">
|
|
<view class="v-form v-container">
|
|
<uni-forms :modelValue="formData" ref="formRef" :label-width="80" border :rules="formRules">
|
|
<view class="v-form-item">
|
|
<uni-forms-item label="认证类型" name="authenticationType" required>
|
|
<uni-data-picker class="m-data-pick" popupTitle=" " v-model="formData.authenticationType" :localdata="authenticationList" @change="getCustomChange"></uni-data-picker>
|
|
</uni-forms-item>
|
|
<uni-forms-item label="认证图片" name="authenticationPic">
|
|
<htz-image-upload
|
|
class="m-img-upload"
|
|
:max="1"
|
|
v-model="imgList"
|
|
mediaType="image"
|
|
:chooseNum="1"
|
|
:sourceType="['album', 'camera']"
|
|
:compress="false"
|
|
:quality="80"
|
|
:remove="true"
|
|
:headers="headers"
|
|
@uploadSuccess="ceshiUploadSuccess1"
|
|
@imgDelete="ceshiImgDelete"
|
|
@uploadFail="ceshiUploadFail"
|
|
:action="baseUrls"
|
|
></htz-image-upload>
|
|
<uni-easyinput class="not-show" v-model="formData.authenticationPic" placeholder=" " />
|
|
</uni-forms-item>
|
|
</view>
|
|
<view class="v-form-item">
|
|
<uni-forms-item label="种植方式" name="plantingWay" required>
|
|
<uni-data-picker class="m-data-pick" popupTitle=" " v-model="formData.plantingWay" :localdata="plantingWayList" @change="getCustomChange"></uni-data-picker>
|
|
</uni-forms-item>
|
|
<uni-forms-item label="作业方式" name="jobWay" required>
|
|
<uni-data-picker class="m-data-pick" popupTitle=" " v-model="formData.jobWay" :localdata="operationWayList" @change="getCustomChange"></uni-data-picker>
|
|
</uni-forms-item>
|
|
<uni-forms-item label="种植时间" name="plantingTime" required>
|
|
<uni-datetime-picker :clear-icon="false" type="date" returnType="timestamp" v-model="formData.plantingTime" @change="changeLog($event)" />
|
|
</uni-forms-item>
|
|
<uni-forms-item label="种植面积" name="plantingArea" required>
|
|
<input type="text" disabled="true" @input="checkArea" v-if="formData.blockName == undefined" placeholder="请先选择地块" />
|
|
<uni-easyinput v-if="formData.blockName != undefined" type="digit" class="uni-mt-5 m-cj" v-model="formData.plantingArea" @blur="checkArea1(1)">
|
|
<template slot="right" class="m-kg">亩</template>
|
|
</uni-easyinput>
|
|
<spna v-if="formData.blockName != undefined" class="m-notice">
|
|
可种植面积
|
|
<span class="color-red">{{ formData.blockArea }}</span>
|
|
亩
|
|
</spna>
|
|
</uni-forms-item>
|
|
</view>
|
|
<view class="v-form-item not-show">
|
|
<uni-forms-item label="" name="productId">
|
|
<uni-easyinput class="uni-mt-5 not-show" v-model="formData.productId"></uni-easyinput>
|
|
</uni-forms-item>
|
|
<uni-forms-item label="" name="speciesId">
|
|
<uni-easyinput class="uni-mt-5 not-show" v-model="formData.speciesId"></uni-easyinput>
|
|
</uni-forms-item>
|
|
</view>
|
|
<view class="v-form-item">
|
|
<uni-forms-item label="种植地块" name="blockName" required>
|
|
<view v-if="formData.choose == true" @click.stop="goSearch">
|
|
<uni-easyinput class="uni-mt-5 m-padding-rigt" :disabled="true" suffixIcon="right" v-model="formData.blockName" placeholder="请选择地块"></uni-easyinput>
|
|
</view>
|
|
<view v-else>
|
|
<uni-easyinput class="uni-mt-5 m-padding-rigt" :disabled="true" suffixIcon="right" v-model="formData.blockName" placeholder=""></uni-easyinput>
|
|
</view>
|
|
</uni-forms-item>
|
|
</view>
|
|
<view class="v-form-item not-show">
|
|
<uni-forms-item label="" name="blockId">
|
|
<uni-easyinput class="uni-mt-5 not-show" v-model="formData.blockId"></uni-easyinput>
|
|
</uni-forms-item>
|
|
</view>
|
|
<view class="v-form-item">
|
|
<uni-forms-item label="预计采收时间" name="harvestTime">
|
|
<uni-datetime-picker :clear-icon="false" type="date" returnType="timestamp" v-model="formData.harvestTime" @change="changeLog($event)" />
|
|
</uni-forms-item>
|
|
<uni-forms-item label="预计亩产" name="production">
|
|
<uni-easyinput class="m-cj" @blur="checkArea1(2)" type="digit" v-model="formData.production" placeholder="请输入预计亩产量">
|
|
<template slot="right" class="m-kg">公斤</template>
|
|
</uni-easyinput>
|
|
</uni-forms-item>
|
|
</view>
|
|
</uni-forms>
|
|
<view class="fixed fixedBottom">
|
|
<button class="m-t-large v-primary-btn large" @click="submitForm()">保存</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import mix from '@/utils/mix.js';
|
|
import { getDictDatas, DICT_TYPE } from '@/utils/dict';
|
|
import { getAccessToken } from '@/utils/auth';
|
|
import config from '@/config';
|
|
import htzImageUpload from '@/components/htz-image-upload/htz-image-upload.vue';
|
|
import { createCropper } from '@/api/system/addCrop/addCrop.js';
|
|
export default {
|
|
components: {
|
|
htzImageUpload
|
|
},
|
|
data() {
|
|
return {
|
|
authenticationList: [], //认证类型
|
|
plantingWayList: [], //种植方式
|
|
operationWayList: [], //作业方式
|
|
showBlock: true,
|
|
formData: {
|
|
id: undefined,
|
|
blockId: undefined,
|
|
productId: undefined,
|
|
speciesId: undefined,
|
|
authenticationType: undefined,
|
|
authenticationPic: undefined,
|
|
plantingWay: undefined,
|
|
jobWay: undefined,
|
|
plantingTime: undefined,
|
|
plantingArea: undefined,
|
|
harvestTime: undefined,
|
|
production: undefined,
|
|
|
|
blockArea: undefined,
|
|
blockName: undefined,
|
|
choose:true
|
|
},
|
|
// 表单校验
|
|
formRules: {
|
|
blockName: {
|
|
rules: [
|
|
{
|
|
required: true,
|
|
errorMessage: '请选择种植地块'
|
|
}
|
|
]
|
|
},
|
|
productId: {
|
|
rules: [
|
|
{
|
|
required: true,
|
|
errorMessage: '请选择产品名称'
|
|
}
|
|
]
|
|
},
|
|
speciesId: {
|
|
rules: [
|
|
{
|
|
required: true,
|
|
errorMessage: '请选择产品品种'
|
|
}
|
|
]
|
|
},
|
|
authenticationType: {
|
|
rules: [
|
|
{
|
|
required: true,
|
|
errorMessage: '请选择认证类型'
|
|
}
|
|
]
|
|
},
|
|
plantingWay: {
|
|
rules: [
|
|
{
|
|
required: true,
|
|
errorMessage: '请选择种植方式'
|
|
}
|
|
]
|
|
},
|
|
jobWay: {
|
|
rules: [
|
|
{
|
|
required: true,
|
|
errorMessage: '请选择作业方式'
|
|
}
|
|
]
|
|
},
|
|
plantingTime: {
|
|
rules: [
|
|
{
|
|
required: true,
|
|
errorMessage: '请选择种植时间'
|
|
}
|
|
]
|
|
},
|
|
plantingArea: {
|
|
rules: [
|
|
{
|
|
required: true,
|
|
errorMessage: '请输入种植面积'
|
|
},
|
|
// {
|
|
// pattern: /^[+-]?(0|([1-9]\d*))(\.\d+)?$/,
|
|
// errorMessage: '请输入正确的种植面积',
|
|
// trigger: 'blur'
|
|
// }
|
|
]
|
|
},
|
|
production: {
|
|
rules: [
|
|
// {
|
|
// pattern: /^[+-]?(0|([1-9]\d*))(\.\d+)?$/,
|
|
// errorMessage: '请输入正确的预计亩产',
|
|
// trigger: 'blur'
|
|
// }
|
|
]
|
|
}
|
|
},
|
|
baseUrls: config.baseUrl + config.baseApi + '/infra/file/upload',
|
|
headers: { Authorization: 'Bearer ' + getAccessToken() }, // 设置上传的请求头部
|
|
imgList: []
|
|
};
|
|
},
|
|
mixins: [mix],
|
|
computed: {
|
|
formDatas() {
|
|
return this.$store.state.formData; // 从Vuex中获取表单数据
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
if (options.params) {
|
|
this.formData = JSON.parse(options.params);
|
|
const choo = this.formData.choose
|
|
console.log(choo,';;;;;')
|
|
if(choo == undefined){
|
|
this.formData.choose = true
|
|
}else{
|
|
this.formData.choose = choo
|
|
}
|
|
console.log(this.formData);
|
|
if (this.formData.authenticationPic != undefined) {
|
|
this.imgList = []
|
|
this.imgList.push(this.formData.authenticationPic);
|
|
}
|
|
}
|
|
},
|
|
onReady() {
|
|
// 设置自定义表单校验规则，必须在节点渲染完毕后执行
|
|
this.$refs.formRef.setRules(this.formRules);
|
|
},
|
|
onShow() {
|
|
if (this.formDatas) {
|
|
// 使用formData更新页面状态或执行其他操作
|
|
console.log('this.formDatas', this.formDatas);
|
|
this.formData = this.formDatas;
|
|
const choo = this.formData.choose
|
|
console.log(choo,';;;;;')
|
|
if(choo == undefined){
|
|
this.formData.choose = true
|
|
}else{
|
|
this.formData.choose = choo
|
|
}
|
|
if (this.formData.authenticationPic != undefined) {
|
|
this.imgList = []
|
|
this.imgList.push(this.formData.authenticationPic);
|
|
}
|
|
}
|
|
//认证类型 数据字典查询
|
|
let arr = this.getDictDatas(DICT_TYPE.AUTHENTICATION_TYPE);
|
|
arr.forEach((item) => {
|
|
item.text = item.label;
|
|
});
|
|
this.authenticationList = arr;
|
|
//种植方式 PLANTING_WAY
|
|
let arr1 = this.getDictDatas(DICT_TYPE.PLANTING_WAY);
|
|
arr1.forEach((item) => {
|
|
item.text = item.label;
|
|
});
|
|
this.plantingWayList = arr1;
|
|
//作业方式 OPERATION_WAY
|
|
let arr2 = this.getDictDatas(DICT_TYPE.OPERATION_WAY);
|
|
arr2.forEach((item) => {
|
|
item.text = item.label;
|
|
});
|
|
this.operationWayList = arr2;
|
|
},
|
|
onUnload() {
|
|
this.$store.commit('updateFormData', null);
|
|
},
|
|
methods: {
|
|
getCustomChange() {
|
|
console.log(this.formData);
|
|
},
|
|
ceshiUploadSuccess1(res) {
|
|
//上传成功
|
|
var _res = JSON.parse(res.data);
|
|
console.log('_res', _res);
|
|
if (_res.code == 0) {
|
|
this.imgList.push(_res.data);
|
|
this.formData.authenticationPic = _res.data;
|
|
}
|
|
},
|
|
ceshiImgDelete(e) {
|
|
console.log('ceshiImgDelete', e);
|
|
},
|
|
ceshiUploadFail(err) {
|
|
//上传失败
|
|
console.log('err', err);
|
|
},
|
|
changeLog(e) {
|
|
console.log('change事件:', e, this.formData);
|
|
},
|
|
checkArea() {
|
|
console.log(this.formData.plantingArea, this.formData.blockArea);
|
|
if (this.formData.plantingArea != undefined && this.formData.blockArea != undefined) {
|
|
if (this.formData.plantingArea > this.formData.blockArea) {
|
|
uni.showToast({
|
|
icon: 'none',
|
|
title: '警告：种植面积不可大于地块面积'
|
|
});
|
|
this.showBlock = false;
|
|
} else {
|
|
this.showBlock = true;
|
|
}
|
|
} else {
|
|
this.showBlock = true;
|
|
}
|
|
},
|
|
checkArea1(val){
|
|
if (val == 1){
|
|
this.formData.plantingArea = parseFloat(this.formData.plantingArea).toFixed(2);
|
|
}
|
|
if (val == 2){
|
|
this.formData.production = parseFloat(this.formData.production).toFixed(2);
|
|
}
|
|
},
|
|
goSearch() {
|
|
const val = JSON.stringify(this.formData);
|
|
uni.navigateTo({
|
|
url: '/sunPages/commonSearch/commonSearch?isBlock=1¶ms=' + val
|
|
});
|
|
},
|
|
reset() {
|
|
this.showBlock = false;
|
|
this.formData = {
|
|
id: undefined,
|
|
blockId: undefined,
|
|
productId: undefined,
|
|
speciesId: undefined,
|
|
authenticationType: undefined,
|
|
authenticationPic: undefined,
|
|
plantingWay: undefined,
|
|
jobWay: undefined,
|
|
plantingTime: undefined,
|
|
plantingArea: undefined,
|
|
harvestTime: undefined,
|
|
production: undefined,
|
|
|
|
blockArea: undefined,
|
|
blockName: undefined,
|
|
choose:true
|
|
};
|
|
},
|
|
submitForm() {
|
|
console.log(this.formData);
|
|
let that = this;
|
|
this.checkArea()
|
|
// 校验主表
|
|
if (this.showBlock == false) {
|
|
// uni.showToast({
|
|
// icon: 'none',
|
|
// title: '警告：种植面积不可大于地块面积'
|
|
// });
|
|
return false;
|
|
}
|
|
this.$refs['formRef']
|
|
.validate()
|
|
.then((res) => {
|
|
console.log('success', res);
|
|
createCropper(res)
|
|
.then((res) => {
|
|
uni.showToast({
|
|
title: `新增成功`,
|
|
duration: 1500,
|
|
success() {
|
|
setTimeout(() => {
|
|
that.reset();
|
|
uni.reLaunch({
|
|
url: '/pages/block/index'
|
|
});
|
|
}, 1500);
|
|
}
|
|
});
|
|
})
|
|
.catch((err) => {
|
|
console.log(err);
|
|
});
|
|
})
|
|
.catch((err) => {
|
|
console.log('err', err);
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<style scoped lang="scss">
|
|
.v-pages {
|
|
background-color: #f5f5f5;
|
|
min-height: 100vh;
|
|
height: fit-content;
|
|
padding-bottom: 160rpx;
|
|
|
|
.box-bg {
|
|
position: fixed;
|
|
z-index: 99;
|
|
width: 100%;
|
|
top: 35rpx;
|
|
}
|
|
}
|
|
.not-show {
|
|
display: none;
|
|
}
|
|
.m-kg {
|
|
background: #eee;
|
|
padding: 0 11rpx;
|
|
border-radius: 15rpx;
|
|
margin-right: 45rpx;
|
|
color: #929292;
|
|
font-size: 20rpx;
|
|
height: 55rpx;
|
|
line-height: 55rpx;
|
|
}
|
|
/deep/ .m-padding-rigt .uni-easyinput__content-input {
|
|
padding-right: 25rpx;
|
|
}
|
|
|
|
/deep/ .m-data-pick .selected-area {
|
|
padding-right: 35rpx;
|
|
}
|
|
/deep/ .m-img-upload .htz-image-upload-list {
|
|
flex-direction: row-reverse;
|
|
|
|
.htz-image-upload-Item-add {
|
|
line-height: 130rpx;
|
|
}
|
|
}
|
|
.m-notice {
|
|
background: #ddfff3;
|
|
padding: 6rpx 10rpx;
|
|
border-radius: 10rpx;
|
|
font-size: 24rpx;
|
|
color: #4a4a4a;
|
|
|
|
.color-red {
|
|
color: #fc0022;
|
|
}
|
|
}
|
|
/deep/ .m-cj .uni-easyinput__content-input {
|
|
z-index: 5;
|
|
padding-right: 0 !important;
|
|
}
|
|
/deep/ .uni-mt-5 .is-disabled {
|
|
background-color: #fff !important;
|
|
color: #333 !important;
|
|
}
|
|
.m-t-large {
|
|
margin-top: 20rpx;
|
|
width: 650rpx;
|
|
height: 80rpx;
|
|
border-radius: 50rpx;
|
|
color: #fff;
|
|
line-height: 80rpx;
|
|
position: fixed;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
bottom: 55rpx;
|
|
z-index: 97;
|
|
}
|
|
</style>
|
|
|