465 lines
14 KiB
Vue
465 lines
14 KiB
Vue
<template>
|
|
<view class="create-container">
|
|
<u--form labelPosition="left" :model="landInfo" :rules="rules" ref="form" required>
|
|
<u-form-item class="form-item" label="所属公司" labelWidth="100px" prop="companyName" required>
|
|
<u--input v-model="landInfo.companyName" border="none" placeholder="" disabled></u--input>
|
|
</u-form-item>
|
|
<u-form-item class="form-item" label="地块名称" prop="landName" labelWidth="100px" required>
|
|
<u--input v-model="landInfo.landName" border="none" placeholder="请选择地块名称"></u--input>
|
|
</u-form-item>
|
|
<u-line color="#D2D2D2"></u-line>
|
|
<u-form-item class="form-item" label="地块编号" prop="landNum" labelWidth="100px" required>
|
|
<u--input v-model="landInfo.landNum" border="none" placeholder="请输入地块编号"></u--input>
|
|
</u-form-item>
|
|
<u-line color="#D2D2D2"></u-line>
|
|
<u-form-item class="form-item" label="地块负责人" prop="userName" labelWidth="100px" required
|
|
@click="onChargeOpen">
|
|
<u--input style="background: white;" v-model="landInfo.userName" border="none" disabled
|
|
placeholder="请选择地块负责人" suffixIcon="arrow-right"></u--input>
|
|
</u-form-item>
|
|
<u-line color="#D2D2D2"></u-line>
|
|
<u-form-item class="form-item" label="地块地址" labelWidth="100px">
|
|
<u--input v-model="landInfo.landAddress" border="none" placeholder="请选择地块地址"></u--input>
|
|
</u-form-item>
|
|
<u-line color="#D2D2D2"></u-line>
|
|
<u-form-item class="form-item" label="地块面积" labelWidth="100px">
|
|
<u--input v-model="landInfo.landArea" border="none" type="digit" placeholder="请选择地块面积"></u--input>
|
|
</u-form-item>
|
|
<u-line color="#D2D2D2"></u-line>
|
|
<u-form-item class="form-item" label="土壤类型" labelWidth="100px">
|
|
<u--input style="width: 200px; background: white" @click="showSoilType = true"
|
|
v-model="landInfo.soilTypeName" border="none" disabled placeholder="请选择土壤类型"
|
|
suffixIcon="arrow-right"></u--input>
|
|
</u-form-item>
|
|
<u-line color="#D2D2D2"></u-line>
|
|
<u-form-item class="form-item" label="水源类型" labelWidth="100px">
|
|
<u-checkbox-group v-model="landInfo.waterSourceTypeStr" @change="waterSourceTypeGroupChange">
|
|
<view v-for="(item, index) in waterSourceType" style="width: 100%;">
|
|
<u-checkbox :key="index" :label="item.dictLabel" :name="item.dictValue"></u-checkbox>
|
|
</view>
|
|
</u-checkbox-group>
|
|
</u-form-item>
|
|
<u-line color="#D2D2D2"></u-line>
|
|
<u-form-item class="form-item" label="排序" prop="orderNum" labelWidth="100px" required>
|
|
<u--input v-model="landInfo.orderNum" border="none" type="number" placeholder="请输入排序"></u--input>
|
|
</u-form-item>
|
|
<u-line color="#D2D2D2"></u-line>
|
|
<u-form-item class="form-item" label="是否分组" prop="enableGroup" labelWidth="100px" required>
|
|
<u-radio-group @change="onGroupChange" v-model="landInfo.enableGroup">
|
|
<u-radio activeColor="green" shape="square" :customStyle="{ marginRight: '50px' }" label="是"
|
|
name="0" />
|
|
<u-radio activeColor="green" shape="square" label="否" name="1" />
|
|
</u-radio-group>
|
|
</u-form-item>
|
|
<u-line color="#D2D2D2"></u-line>
|
|
<u-form-item class="form-item" label="启用蝶阀" prop="enableButterflyValve" labelWidth="100px" required>
|
|
<u-radio-group @change="onEnableButterflyValveChange" v-model="landInfo.enableButterflyValve">
|
|
<u-radio activeColor="green" shape="square" :customStyle="{ marginRight: '50px' }" label="是"
|
|
name="0" />
|
|
<u-radio activeColor="green" shape="square" label="否" name="1" />
|
|
</u-radio-group>
|
|
</u-form-item>
|
|
<u-line color="#D2D2D2"></u-line>
|
|
<u-form-item class="form-item" label="启用批量控制" prop="enableBatchControl" labelWidth="100px" required>
|
|
<u-radio-group @change="onEnableBatchControlChange" v-model="landInfo.enableBatchControl">
|
|
<u-radio activeColor="green" shape="square" :customStyle="{ marginRight: '50px' }" label="是"
|
|
name="0" />
|
|
<u-radio activeColor="green" shape="square" label="否" name="1" />
|
|
</u-radio-group>
|
|
</u-form-item>
|
|
<u-line color="#D2D2D2"></u-line>
|
|
<u-form-item class="form-item" label="启用自动刷新" prop="enableAutoRefresh" labelWidth="100px" required>
|
|
<u-radio-group @change="onEnableAutoRefreshChange" v-model="landInfo.enableAutoRefresh">
|
|
<u-radio activeColor="green" shape="square" :customStyle="{ marginRight: '50px' }" label="是"
|
|
name="0" />
|
|
<u-radio activeColor="green" shape="square" label="否" name="1" />
|
|
</u-radio-group>
|
|
</u-form-item>
|
|
<u-line color="#D2D2D2"></u-line>
|
|
<view style="margin: 10px 20px">备注</view>
|
|
<u-form-item label="" borderBottom ref="item3" labelWidth="40px">
|
|
<u--textarea style="margin: 0px 20px" placeholder="请输入备注" v-model="landInfo.remark" count></u--textarea>
|
|
</u-form-item>
|
|
</u--form>
|
|
<view class="buttons">
|
|
<u-button type="success" @click="submit">确认</u-button>
|
|
<u-button @click="cancel">取消</u-button>
|
|
</view>
|
|
<u-action-sheet :show="showSoilType" :actions="soilType" title="土壤类型" description=""
|
|
@close="showSoilType = false" @select="onSoilTypeSelect"></u-action-sheet>
|
|
<u-popup :show="showCharges" mode="center">
|
|
<view class="dialog-container">
|
|
<view class="dialog-title">
|
|
<text>选择地块负责人</text>
|
|
<u-icon name="close" size="20" class="close-btn" @click="showCharges = false"></u-icon>
|
|
</view>
|
|
<view class="dialog-body">
|
|
<view v-for="item in chargeActions" :key="item.id" @click="onChargeSelect(item)" class="people">
|
|
<text>{{ item.name }}</text>
|
|
<text>{{ item.mobilePhone }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</u-popup>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
import store from "@/store"
|
|
import plugin from "@/plugins"
|
|
export default {
|
|
data() {
|
|
return {
|
|
editFlag: false,
|
|
item: {},
|
|
userType: null,
|
|
form: null,
|
|
soilType: [],
|
|
showSoilType: false,
|
|
waterSourceType: [],
|
|
landInfo: {},
|
|
rules: {
|
|
landName: {
|
|
type: "string",
|
|
required: true,
|
|
message: "请输入地块名称",
|
|
trigger: ["blur", "change"]
|
|
},
|
|
landNum: {
|
|
type: "string",
|
|
required: true,
|
|
message: "请输入地块编号",
|
|
trigger: ["blur", "change"]
|
|
},
|
|
userName: {
|
|
type: "string",
|
|
required: true,
|
|
message: "请选择地块负责人",
|
|
trigger: ["blur", "change"]
|
|
},
|
|
enableGroup: {
|
|
type: "string",
|
|
required: true,
|
|
message: "请选择",
|
|
trigger: ["change"]
|
|
},
|
|
enableButterflyValve: {
|
|
type: "string",
|
|
required: true,
|
|
message: "请选择",
|
|
trigger: ["change"]
|
|
},
|
|
enableBatchControl: {
|
|
type: "string",
|
|
required: true,
|
|
message: "请选择",
|
|
trigger: ["change"]
|
|
},
|
|
enableAutoRefresh: {
|
|
type: "string",
|
|
required: true,
|
|
message: "请选择",
|
|
trigger: ["change"]
|
|
},
|
|
orderNum: {
|
|
type: "integer",
|
|
required: true,
|
|
message: "请输入序号",
|
|
trigger: ["change"]
|
|
}
|
|
},
|
|
showCompanys: false,
|
|
showCharges: false,
|
|
chargeActions: [],
|
|
companyObj: {}
|
|
}
|
|
},
|
|
created() {
|
|
this.onRest();
|
|
},
|
|
onLoad(data) {
|
|
//获取数据字典
|
|
this.getDictList("custom_soil_type");
|
|
this.getDictList("custom_water_source_type");
|
|
if (data) {
|
|
if (data.companyObj) {
|
|
let companyAllObj = JSON.parse(decodeURIComponent(data.companyObj));
|
|
if (companyAllObj && companyAllObj.originItem && companyAllObj.originItem.node) {
|
|
this.companyObj = companyAllObj.originItem.node;
|
|
this.landInfo.companyId = this.companyObj.rootCompanyId;
|
|
this.landInfo.companyGroupId = this.companyObj.companyId;
|
|
this.landInfo.companyName = this.companyObj.companyName;
|
|
}
|
|
}
|
|
if (data.item !== undefined) {
|
|
this.item = JSON.parse(decodeURIComponent(data.item))
|
|
this.item.soilTypeName = "";
|
|
if (this.item.waterSourceType) {
|
|
this.item.waterSourceTypeStr = this.item.waterSourceType.split(',');
|
|
} else {
|
|
this.item.waterSourceTypeStr = [];
|
|
}
|
|
this.landInfo = this.item;
|
|
this.landInfo.userName = this.item.user.userName;
|
|
this.landInfo.companyName = this.item.companyGroup.companyFullName;
|
|
this.landInfo.enableGroup = String(this.item.landConfig.enableGroup)
|
|
this.landInfo.enableButterflyValve = String(this.item.landConfig.enableButterflyValve)
|
|
this.landInfo.enableAutoRefresh = String(this.item.landConfig.enableAutoRefresh)
|
|
this.landInfo.enableBatchControl = String(this.item.landConfig.enableBatchControl)
|
|
//监听是否编辑
|
|
if (data.item) {
|
|
this.editFlag = true
|
|
uni.setNavigationBarTitle({
|
|
title: "修改地块"
|
|
})
|
|
}
|
|
} else {
|
|
this.getLandNum();
|
|
this.getChargeList();
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
/** 查询公司下拉树结构 */
|
|
getDictList(type) {
|
|
store
|
|
.dispatch("getDictList", type)
|
|
.then(res => {
|
|
if (type == "custom_soil_type") {
|
|
this.soilType = res.data.map(item => {
|
|
if (this.landInfo.soilType && this.landInfo.soilType == item.dictValue) {
|
|
this.landInfo.soilTypeName = item.dictLabel;
|
|
}
|
|
return {
|
|
name: item.dictLabel,
|
|
id: item.dictValue,
|
|
item: item
|
|
}
|
|
})
|
|
}
|
|
if (type == "custom_water_source_type") {
|
|
this.waterSourceType = res.data
|
|
}
|
|
})
|
|
.catch(error => {
|
|
plugin.modal.msgError(error)
|
|
})
|
|
.finally(() => {
|
|
plugin.modal.closeLoading()
|
|
})
|
|
},
|
|
onRest() {
|
|
this.landInfo = {
|
|
id: null,
|
|
companyName: "",
|
|
companyId: null,
|
|
companyGroupId: null,
|
|
landAddress: "",
|
|
enableGroup: "1",
|
|
enableButterflyValve: "1",
|
|
enableBatchControl: "1",
|
|
enableAutoRefresh: "1",
|
|
landName: "",
|
|
landNum: "",
|
|
landArea: 0,
|
|
mobilePhone: "",
|
|
remark: "",
|
|
userId: 0,
|
|
userName: "",
|
|
orderNum: 0,
|
|
soilType: null,
|
|
soilTypeName: "",
|
|
waterSourceType: null,
|
|
waterSourceTypeStr: []
|
|
}
|
|
},
|
|
onChargeOpen() {
|
|
if (this.landInfo.id) {
|
|
return;
|
|
}
|
|
this.showCharges = true
|
|
},
|
|
//当选择了负责人
|
|
onChargeSelect(data) {
|
|
this.landInfo.userId = data.id
|
|
this.landInfo.userName = data.name
|
|
this.showCharges = false
|
|
},
|
|
//土壤类型返回后
|
|
onSoilTypeSelect(object) {
|
|
this.landInfo.soilType = object.id
|
|
this.landInfo.soilTypeName = object.name
|
|
},
|
|
onGroupChange(e) {
|
|
this.landInfo.enableGroup = e
|
|
},
|
|
onEnableBatchControlChange(e) {
|
|
this.landInfo.enableBatchControl = e
|
|
},
|
|
onEnableAutoRefreshChange(e) {
|
|
this.landInfo.enableAutoRefresh = e;
|
|
},
|
|
onEnableButterflyValveChange(e) {
|
|
this.landInfo.enableButterflyValve = e;
|
|
},
|
|
//水源类型选择
|
|
waterSourceTypeGroupChange(e) {
|
|
this.landInfo.waterSourceTypeStr = e;
|
|
this.landInfo.waterSourceType = e.join();
|
|
},
|
|
//获取负责人列表
|
|
getChargeList() {
|
|
let obj = {
|
|
companyIds: null,
|
|
companyGroupIds: null,
|
|
status: 0,
|
|
delFlag: 0,
|
|
roleId: "5",
|
|
roleKeys: "owner",
|
|
};
|
|
obj.companyIds = this.landInfo.companyId;
|
|
store
|
|
.dispatch("allListUser", obj)
|
|
.then(res => {
|
|
this.chargeActions = res.rows.map(item => {
|
|
return {
|
|
name: item.userName,
|
|
id: item.userId,
|
|
mobilePhone: item.mobilePhone
|
|
}
|
|
})
|
|
})
|
|
.catch(error => {
|
|
plugin.modal.msgError(error)
|
|
})
|
|
.finally(() => {
|
|
plugin.modal.closeLoading()
|
|
})
|
|
},
|
|
//提交生成的数据
|
|
submit() {
|
|
this.$refs["form"]
|
|
.validate()
|
|
.then(res => {
|
|
if (this.landInfo.landArea == 0) {
|
|
this.landInfo.landArea = 0
|
|
}
|
|
let landConfig = {
|
|
enableGroup: this.landInfo.enableGroup,
|
|
enableBatchControl: this.landInfo.enableBatchControl,
|
|
enableButterflyValve: this.landInfo.enableButterflyValve,
|
|
enableAutoRefresh: this.landInfo.enableAutoRefresh,
|
|
}
|
|
if (this.landInfo.id) {
|
|
landConfig.id = this.landInfo.landConfig.id;
|
|
}
|
|
this.landInfo.landConfig = landConfig;
|
|
if (this.landInfo.id) {
|
|
|
|
//编辑地块
|
|
store.dispatch("updateLand", this.landInfo).then(res => {
|
|
plugin.modal.showToast("提交成功")
|
|
plugin.tab.navigateBack()
|
|
})
|
|
} else {
|
|
//新增地块
|
|
store.dispatch("addLand", this.landInfo).then(res => {
|
|
plugin.modal.showToast("提交成功")
|
|
plugin.tab.navigateBack()
|
|
})
|
|
}
|
|
})
|
|
.catch(errors => {})
|
|
},
|
|
//取消
|
|
cancel() {
|
|
plugin.tab.navigateBack()
|
|
},
|
|
//获取地块编号
|
|
getLandNum() {
|
|
plugin.modal.loading("获取地块编号中!")
|
|
store
|
|
.dispatch("getLandNum")
|
|
.then(res => {
|
|
this.landInfo.landNum = res.data.landNum
|
|
this.landInfo.orderNum = res.data.orderNum
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.create-container {
|
|
background-color: #FFF;
|
|
|
|
.form-item {
|
|
margin-left: 20px;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.buttons {
|
|
margin: 10px 50px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
button {
|
|
margin: 0px 20px;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 弹窗
|
|
.dialog-container {
|
|
width: 90vw;
|
|
height: 90vh;
|
|
overflow: hidden;
|
|
|
|
.dialog-title {
|
|
width: 100%;
|
|
height: 34px;
|
|
font-size: 16px;
|
|
line-height: 34px;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
border-bottom: 1px solid #999;
|
|
position: relative;
|
|
|
|
.reload-btn {
|
|
position: absolute;
|
|
top: 50%;
|
|
right: 56px;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
.close-btn {
|
|
position: absolute;
|
|
top: 50%;
|
|
right: 10px;
|
|
transform: translateY(-50%);
|
|
}
|
|
}
|
|
|
|
.dialog-body {
|
|
height: auto;
|
|
min-height: 300px;
|
|
max-height: calc(100% - 35px);
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
background-color: #f7f7f7;
|
|
|
|
.people {
|
|
height: 30px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
font-size: 14px;
|
|
color: black;
|
|
line-height: 30px;
|
|
margin: 8px 20px;
|
|
border-bottom: 1px solid #e8e8e8;
|
|
padding: 4px 10px;
|
|
}
|
|
}
|
|
}
|
|
</style> |