335 lines
14 KiB
Vue
335 lines
14 KiB
Vue
<template>
|
|
<view class="content">
|
|
<view class="tit">
|
|
<text v-if="readonly">更新时间: {{update_time}}</text>
|
|
<text>养殖信息</text>
|
|
|
|
</view>
|
|
<view class="card">
|
|
|
|
|
|
<!-- <view class="title">养殖信息</view> -->
|
|
|
|
<u--form labelPosition="left" :model="formData" :rules="rules" ref="breedingForm">
|
|
<u-form-item labelWidth="auto" label="有无养殖培训" required prop="breeding_training" borderBottom>
|
|
<u-radio-group :disabled="readonly" v-model="formData.breeding_training" style="margin: 16rpx;">
|
|
<u-radio :customStyle="{marginRight: '16px'}"
|
|
v-for="(item, index) in [{value:1,label:'有'},{value:0,label:'无'}]" :key="index" :label="item.label"
|
|
:name="item.value">
|
|
</u-radio>
|
|
</u-radio-group>
|
|
</u-form-item>
|
|
<u-form-item labelWidth="auto" label="有无注册成立养殖公司" required prop="breeding_company" borderBottom>
|
|
<u-radio-group :disabled="readonly" v-model="formData.breeding_company" style="margin: 16rpx;">
|
|
<u-radio :customStyle="{marginRight: '16px'}"
|
|
v-for="(item, index) in [{value:1,label:'有'},{value:0,label:'无'}]" :key="index" :label="item.label"
|
|
:name="item.value">
|
|
</u-radio>
|
|
</u-radio-group>
|
|
</u-form-item>
|
|
<u-form-item labelWidth="auto" labelPosition="top" label="备注" required prop="notes" borderBottom>
|
|
<u--textarea :disabled="readonly" v-model="formData.notes" autoHeight placeholder="请输入备注" border="surround"
|
|
count></u--textarea>
|
|
</u-form-item>
|
|
<!-- <u-form-item labelWidth="auto" label="养殖类型" required prop="breeding_type" borderBottom>
|
|
<u--input :readonly="readonly" v-model="formData.breeding_type" placeholder="请输入养殖类型"></u--input>
|
|
</u-form-item> -->
|
|
<picker :range="breedingTypeList" range-key="name" :disabled="readonly" mode="selector" @change="changeBreeding">
|
|
<u-form-item labelWidth="auto" label="养殖类型" required prop="planning" borderBottom>
|
|
<u--input :value="breedingName" style="pointer-events: none;" placeholder="请选择养殖类型" disabled
|
|
disabledColor="#fff"></u--input>
|
|
<u-icon slot="right" name="arrow-right"></u-icon>
|
|
</u-form-item>
|
|
</picker>
|
|
<picker mode="date" @change="changeDate" :disabled="readonly" :data-value="'breeding_time'">
|
|
<u-form-item labelWidth="auto" label="养殖开始时间" required prop="breeding_time" borderBottom>
|
|
<u--input :value="formData.breeding_time" style="pointer-events: none;" placeholder="请选择养殖开始时间" disabled disabledColor="#fff"></u--input>
|
|
<u-icon slot="right" name="arrow-right"></u-icon>
|
|
</u-form-item>
|
|
</picker>
|
|
<picker mode="date" @change="changeDate" :disabled="readonly" :data-value="'mature_time'">
|
|
<u-form-item labelWidth="auto" label="上市时间" required prop="mature_time" borderBottom>
|
|
<u--input :value="formData.mature_time" style="pointer-events: none;" placeholder="请选择上市时间" disabled disabledColor="#fff"></u--input>
|
|
<u-icon slot="right" name="arrow-right"></u-icon>
|
|
</u-form-item>
|
|
</picker>
|
|
<u-form-item labelWidth="auto" label="产量(斤)" required prop="yield" borderBottom>
|
|
<u--input :readonly="readonly" v-model="formData.yield" placeholder="请输入产量(斤)" type="number"></u--input>
|
|
</u-form-item>
|
|
<u-form-item labelWidth="auto" label="预计收益(元)" required prop="estimated_income" borderBottom>
|
|
<u--input :readonly="readonly" v-model="formData.estimated_income" placeholder="请输入预计收益(元)"
|
|
type="number"></u--input>
|
|
</u-form-item>
|
|
<u-form-item labelWidth="auto" labelPosition="top" label="农资农具使用情况" required prop="farm_tools" borderBottom>
|
|
<u--textarea :disabled="readonly" v-model="formData.farm_tools" autoHeight placeholder="请输入农资农具使用情况"
|
|
border="surround" count></u--textarea>
|
|
</u-form-item>
|
|
<u-form-item labelWidth="auto" label="是否生态养殖" required prop="ecological_farming" borderBottom>
|
|
<u-radio-group :disabled="readonly" v-model="formData.ecological_farming" style="margin: 16rpx;">
|
|
<u-radio :customStyle="{marginRight: '16px'}"
|
|
v-for="(item, index) in [{value:1,label:'是'},{value:0,label:'否'}]" :key="index" :label="item.label"
|
|
:name="item.value">
|
|
</u-radio>
|
|
</u-radio-group>
|
|
</u-form-item>
|
|
<u-form-item labelWidth="auto" label="现代化程度(%)" required prop="modernization" borderBottom>
|
|
<u--input :readonly="readonly" v-model="formData.modernization" placeholder="请输入现代化程度(%)" type="number"
|
|
maxlength="3"></u--input>
|
|
</u-form-item>
|
|
<u-form-item labelWidth="auto" label="预售卖价格(元/500g)" required prop="pre_price" borderBottom>
|
|
<u--input :readonly="readonly" v-model="formData.pre_price" placeholder="请输入预售卖价格"></u--input>
|
|
</u-form-item>
|
|
<u-form-item labelWidth="auto" label="销售方式" required prop="method_sales" borderBottom>
|
|
<u-radio-group :disabled="readonly" v-model="formData.method_sales" style="margin: 16rpx;">
|
|
<u-radio :customStyle="{marginRight: '16px'}"
|
|
v-for="(item, index) in [{value:1,label:'自销'},{value:0,label:'定点销售'}]" :key="index" :label="item.label"
|
|
:name="item.value">
|
|
</u-radio>
|
|
</u-radio-group>
|
|
</u-form-item>
|
|
<u-form-item labelWidth="auto" label="有无加工仓储" required prop="processing_storage" borderBottom>
|
|
<u-radio-group :disabled="readonly" v-model="formData.processing_storage" style="margin: 16rpx;">
|
|
<u-radio :customStyle="{marginRight: '16px'}"
|
|
v-for="(item, index) in [{value:1,label:'有'},{value:0,label:'无'}]" :key="index" :label="item.label"
|
|
:name="item.value">
|
|
</u-radio>
|
|
</u-radio-group>
|
|
</u-form-item>
|
|
<u-form-item labelWidth="auto" label="有无宣传推广" required prop="promote" borderBottom>
|
|
<u-radio-group :disabled="readonly" v-model="formData.promote" style="margin: 16rpx;">
|
|
<u-radio :customStyle="{marginRight: '16px'}"
|
|
v-for="(item, index) in [{value:1,label:'有'},{value:0,label:'无'}]" :key="index" :label="item.label"
|
|
:name="item.value">
|
|
</u-radio>
|
|
</u-radio-group>
|
|
</u-form-item>
|
|
<u-form-item labelWidth="auto" label="有无运输" required prop="transportation" borderBottom>
|
|
<u-radio-group :disabled="readonly" v-model="formData.transportation" style="margin: 16rpx;">
|
|
<u-radio :customStyle="{marginRight: '16px'}"
|
|
v-for="(item, index) in [{value:1,label:'有'},{value:0,label:'无'}]" :key="index" :label="item.label"
|
|
:name="item.value">
|
|
</u-radio>
|
|
</u-radio-group>
|
|
</u-form-item>
|
|
<u-form-item labelWidth="auto" label="是否有扩大经营需求" required prop="expand_business_needs" borderBottom>
|
|
<u-radio-group :disabled="readonly" v-model="formData.expand_business_needs" style="margin: 16rpx;">
|
|
<u-radio :customStyle="{marginRight: '16px'}"
|
|
v-for="(item, index) in [{value:1,label:'是'},{value:0,label:'否'}]" :key="index" :label="item.label"
|
|
:name="item.value">
|
|
</u-radio>
|
|
</u-radio-group>
|
|
</u-form-item>
|
|
<u-form-item labelWidth="auto" labelPosition="top" label="需求描述" prop="demand" borderBottom>
|
|
<u--textarea :disabled="readonly" v-model="formData.demand" autoHeight placeholder="请输入需求描述" border="surround"
|
|
count></u--textarea>
|
|
</u-form-item>
|
|
<u-form-item labelWidth="auto" labelPosition="top" label="政策补助" prop="policy_subsidies" borderBottom>
|
|
<u--textarea :disabled="readonly" v-model="formData.policy_subsidies" autoHeight placeholder="请输入政策补助"
|
|
border="surround" count></u--textarea>
|
|
</u-form-item>
|
|
</u--form>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
readonly: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
datas: {
|
|
type: Object,
|
|
default: null
|
|
},
|
|
update_time: {
|
|
type: String,
|
|
default: null
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
landPlanList: ['自己养', '出租', '代养', '租更多地扩大养殖'],
|
|
breedingTypeList: [
|
|
{ id: 1, name: "水产"},
|
|
{ id: 2, name: "禽类" },
|
|
{ id: 3, name: "大型动物" },
|
|
],
|
|
formData: {
|
|
// "breeding_training": 1, //有无养殖培训
|
|
// "breeding_company": 0, //有无注册成立种殖公司
|
|
// "notes": "试试备注", //备注
|
|
// "breeding_type": 22, //养殖类型
|
|
// "breeding_time": "2022-07-22", //养殖开始时间
|
|
// "mature_time": "2022-07-22", //上市时间
|
|
// "yield": 600, //产量
|
|
// "estimated_income": 1500, //预计收益
|
|
// "farm_tools": "收割机一台,打米机一台", //农资农具使用情况
|
|
// "ecological_farming": 1, //是否生态养殖
|
|
// "modernization": 30, //现代化程度
|
|
// "pre_price": "30.00", //预售卖价格
|
|
// "method_sales": 1, //销售方式
|
|
// "processing_storage": 0, //有无加工仓储
|
|
// "promote": 0, //有无宣传推广
|
|
// "transportation": 0, //有无运输
|
|
// "expand_business_needs": 0, //是否有扩大经营需求
|
|
// "demand": "没有述求", //养殖述求
|
|
// "policy_subsidies": "无补助" ,//政策补助
|
|
"breeding_training": "", //有无养殖培训
|
|
"breeding_company": "", //有无注册成立种殖公司
|
|
"notes": "", //备注
|
|
"breeding_type": "", //养殖类型
|
|
"area": "", //面积
|
|
"breeding_time": "", //养殖开始时间
|
|
"mature_time": "", //上市时间
|
|
"yield": "", //产量
|
|
"estimated_income": "", //预计收益
|
|
"farm_tools": "", //农资农具使用情况
|
|
"ecological_farming": "", //是否生态养殖
|
|
"modernization": "", //现代化程度
|
|
"pre_price": "", //预售卖价格
|
|
"method_sales": "", //销售方式
|
|
"processing_storage": "", //有无加工仓储
|
|
"promote": "", //有无宣传推广
|
|
"transportation": "", //有无运输
|
|
"expand_business_needs": "", //是否有扩大经营需求
|
|
"demand": "", //养殖述求
|
|
"policy_subsidies": "" //政策补助
|
|
},
|
|
rules: {
|
|
|
|
}
|
|
}
|
|
},
|
|
created() {
|
|
this.initRules();
|
|
if (this.$props.readonly && this.$props.datas) {
|
|
this.formData = this.$props.datas;
|
|
let keys = Object.keys(this.formData);
|
|
keys.forEach(item => {
|
|
if (!isNaN(this.formData[item]) && this.formData[item] != '' && this.formData[item] != null && this
|
|
.formData[item] != undefined) {
|
|
parseFloat(this.formData[item]) != 'NaN' ? this.formData[item] = parseFloat(this.formData[item]) : null;
|
|
}
|
|
})
|
|
}
|
|
},
|
|
watch: {
|
|
datas(newValue, oldValue) {
|
|
if (this.$props.readonly && newValue) {
|
|
this.formData = this.$props.datas;
|
|
let keys = Object.keys(this.formData);
|
|
keys.forEach(item => {
|
|
if (!isNaN(this.formData[item]) && this.formData[item] != '' && this.formData[item] != null && this
|
|
.formData[item] != undefined) {
|
|
parseFloat(this.formData[item]) != 'NaN' ? this.formData[item] = parseFloat(this.formData[item]) :
|
|
null;
|
|
}
|
|
})
|
|
}
|
|
}
|
|
},
|
|
computed:{
|
|
breedingName(){
|
|
return this.breedingTypeList.find((item)=>item.id==this.formData.breeding_type)?.name;
|
|
}
|
|
},
|
|
methods: {
|
|
// 初始化校验
|
|
initRules() {
|
|
let arr = Object.keys(this.formData);
|
|
let white = ['demand', 'policy_subsidies'];
|
|
arr = arr.filter(item => {
|
|
return !white.includes(item);
|
|
})
|
|
arr.forEach(key => {
|
|
this.rules[key] = {
|
|
validator: (rule, value, callback) => {
|
|
this.$refs.breedingForm.clearValidate(rule.field);
|
|
value.trim() !== '' ? callback() : callback('不能为空');
|
|
},
|
|
trigger: ['change', 'blur']
|
|
}
|
|
})
|
|
},
|
|
// 校验
|
|
async validate() {
|
|
return await this.$refs.breedingForm.validate();
|
|
},
|
|
// 选择养殖类型
|
|
changeBreeding(e) {
|
|
// let index = e.currentTarget.dataset.index;
|
|
this.formData.breeding_type = this.breedingTypeList[e.detail.value].id;
|
|
},
|
|
// 选择时间
|
|
changeDate(e) {
|
|
let data = e.currentTarget.dataset;
|
|
this.formData[data.value] = e.detail.value;
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.card {
|
|
background-color: #fff;
|
|
margin: 28rpx;
|
|
padding: 28rpx;
|
|
margin-top: 0;
|
|
padding-top: 0;
|
|
border-radius: 0 0 14rpx 14rpx;
|
|
}
|
|
|
|
.tit {
|
|
margin: 28rpx 28rpx 0 28rpx;
|
|
padding: 28rpx 28rpx 0 28rpx;
|
|
border-radius: 14rpx 14rpx 0 0;
|
|
background-color: $theme-oa-color;
|
|
color: white;
|
|
height: 100rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.title {
|
|
font-weight: 500;
|
|
font-size: 34rpx;
|
|
|
|
&::before {
|
|
width: 8rpx;
|
|
height: 26rpx;
|
|
border-radius: 4rpx;
|
|
background-color: #0122c7;
|
|
content: "";
|
|
display: inline-block;
|
|
margin-right: 8rpx;
|
|
}
|
|
}
|
|
|
|
.delete {
|
|
margin: 22rpx 0;
|
|
// margin-bottom: 40rpx;
|
|
width: 100%;
|
|
height: 64rpx;
|
|
line-height: 64rpx;
|
|
background: #f56c6c;
|
|
border-radius: 14rpx;
|
|
font-size: 28rpx;
|
|
color: #fff;
|
|
text-align: center;
|
|
}
|
|
|
|
.plus {
|
|
margin: 22rpx 0;
|
|
// margin-bottom: 40rpx;
|
|
width: 100%;
|
|
height: 64rpx;
|
|
line-height: 64rpx;
|
|
background: $theme-oa-color;
|
|
border-radius: 14rpx;
|
|
font-size: 28rpx;
|
|
color: #fff;
|
|
text-align: center;
|
|
}
|
|
</style> |