|
|
@@ -36,21 +36,64 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<template v-else>
|
|
|
- <div class="box-item">
|
|
|
- <div class="box-title">基本信息</div>
|
|
|
- <el-form class="box-form" :model="form">
|
|
|
- <el-form-item label="农事名称">
|
|
|
- <el-input v-model="form.name" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="农事目的">
|
|
|
- <el-input v-model="form.mudi" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="触发条件">
|
|
|
- <el-input v-model="form.tiaojian" />
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
- </div>
|
|
|
- <div class="box-item" v-for="(item, index) in boxList" :key="index">
|
|
|
+ <el-form class="box-form" ref="formRef" :model="dynamicValidateForm" :rules="rules">
|
|
|
+ <div class="box-item">
|
|
|
+ <div class="box-title">基本信息</div>
|
|
|
+ <el-form-item label="农事名称" prop="name">
|
|
|
+ <el-input v-model="dynamicValidateForm.name" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="触发条件" prop="conditionRate">
|
|
|
+ <el-input v-model="dynamicValidateForm.conditionRate" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="执行时间" prop="executeDate">
|
|
|
+ <el-date-picker
|
|
|
+ class="item-input"
|
|
|
+ style="width: 100%"
|
|
|
+ value-format="YYYY-MM-DD"
|
|
|
+ v-model="dynamicValidateForm.executeDate"
|
|
|
+ type="date"
|
|
|
+ :clearable="false"
|
|
|
+ placeholder="选择日期"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ <div class="usage-mode box-form">
|
|
|
+ <el-form-item label="施用方式" prop="usageMode">
|
|
|
+ <div class="mode-select">
|
|
|
+ <el-select
|
|
|
+ v-model="dynamicValidateForm.usageMode"
|
|
|
+ placeholder="请选择"
|
|
|
+ prop="usageMode"
|
|
|
+ style="width: 100%"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="(usage, uId) in allUsageModeList"
|
|
|
+ :key="uId"
|
|
|
+ :label="usage"
|
|
|
+ :value="usage"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ <!-- <div class="usage-title">施用方式</div>
|
|
|
+ <div class="mode-select">
|
|
|
+ <el-select
|
|
|
+ v-model="dynamicValidateForm.usageMode"
|
|
|
+ placeholder="请选择"
|
|
|
+ prop="usageMode"
|
|
|
+ style="width: 100%"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="(usage, uId) in allUsageModeList"
|
|
|
+ :key="uId"
|
|
|
+ :label="usage"
|
|
|
+ :value="usage"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </div> -->
|
|
|
+ </div>
|
|
|
+ </el-form>
|
|
|
+ <div class="box-item" v-for="(item, index) in dynamicValidateForm.prescriptionList" :key="index">
|
|
|
<div class="box-title border-none">
|
|
|
{{ item.label }}处方
|
|
|
<div class="add-text" @click="handleAdd(index)">
|
|
|
@@ -58,13 +101,13 @@
|
|
|
添加药物
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="box-item-children" v-for="(ele,idx) in item.children" :key="idx + 'id'">
|
|
|
+ <div class="box-item-children" v-for="(ele,idx) in item.pesticideFertilizerList" :key="idx + 'id'">
|
|
|
<div class="index">{{ idx < 10 ? "0" + (idx + 1) : idx + 1 }}</div>
|
|
|
- <custom-table></custom-table>
|
|
|
+ <custom-table @updateTableData="updateTableData" :pIndex="index" :cIndex="idx" :key="index+'-' + idx" :pesticideFertilizerList="ele" :hasFly="dynamicValidateForm.usageMode === '叶面施'"></custom-table>
|
|
|
<div class="box-textarea">
|
|
|
<el-input
|
|
|
class="textarea"
|
|
|
- v-model="textarea"
|
|
|
+ v-model="ele.remark"
|
|
|
:rows="1"
|
|
|
type="textarea"
|
|
|
placeholder="用药注意事项备注"
|
|
|
@@ -72,7 +115,7 @@
|
|
|
</div>
|
|
|
<div class="btn-group">
|
|
|
<div class="delete" @click="handleDelete(index,idx)">删除</div>
|
|
|
- <div>重置</div>
|
|
|
+ <div @click="resetItem(index,idx)">重置</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -129,7 +172,7 @@
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
-import { onMounted, ref } from "vue";
|
|
|
+import { onMounted, ref, reactive } from "vue";
|
|
|
import { ElMessage } from "element-plus";
|
|
|
import fnHeader from "@/components/fnHeader.vue";
|
|
|
import steps from "./components/steps.vue";
|
|
|
@@ -139,6 +182,7 @@ import { deepClone } from "@/common/commonFun";
|
|
|
import chartBox from "@/components/chartBox.vue";
|
|
|
import { useRouter, useRoute } from "vue-router";
|
|
|
import { useStore } from "vuex";
|
|
|
+import eventBus from "@/api/eventBus";
|
|
|
let store = useStore();
|
|
|
let farmMap = new FarmMap();
|
|
|
|
|
|
@@ -189,31 +233,140 @@ const goBack = () => {
|
|
|
//确定/下发农事
|
|
|
const handleOk = () => {
|
|
|
if (active.value) {
|
|
|
- console.log("123");
|
|
|
+ formRef.value.validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ console.log("123", dynamicValidateForm);
|
|
|
+ // const res = tableData.value.getItem
|
|
|
+ // console.log('res', res);
|
|
|
+ }
|
|
|
+ })
|
|
|
} else {
|
|
|
active.value = 1;
|
|
|
const arr = checkData.value.filter((item) => item.active);
|
|
|
- boxList.value = deepClone(arr);
|
|
|
+ // boxList.value = deepClone(arr);
|
|
|
+
|
|
|
+ dynamicValidateForm.prescriptionList = arr.map(item => ({
|
|
|
+ name: item.label,
|
|
|
+ label: item.label,
|
|
|
+ active: item.active,
|
|
|
+ pesticideFertilizerList: [
|
|
|
+ {
|
|
|
+ key: 1,
|
|
|
+ typeName: "",
|
|
|
+ muUsage: "",
|
|
|
+ muUsage2: "",
|
|
|
+ ratio: "",
|
|
|
+ ratio2: "",
|
|
|
+ remark: "",
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ }))
|
|
|
}
|
|
|
};
|
|
|
|
|
|
-const form = ref({
|
|
|
- name: "梢期防虫",
|
|
|
- mudi: "防治荔枝病虫害",
|
|
|
- tiaojian: "单树花带叶率 40％",
|
|
|
+
|
|
|
+// 表单
|
|
|
+const formRef = ref();
|
|
|
+
|
|
|
+const allUsageModeList = (["叶面施", "根部施"])
|
|
|
+const dynamicValidateForm = reactive({
|
|
|
+ name: "",
|
|
|
+ conditionRate: "",
|
|
|
+ executeDate: "",
|
|
|
+ usageMode: "",
|
|
|
+ prescriptionList: [
|
|
|
+ {
|
|
|
+ name: "",
|
|
|
+ pesticideFertilizerList: [
|
|
|
+ {
|
|
|
+ key: 1,
|
|
|
+ typeName: "",
|
|
|
+ muUsage: "",
|
|
|
+ muUsage2: "",
|
|
|
+ ratio: "",
|
|
|
+ ratio2: "",
|
|
|
+ remark: "",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ ],
|
|
|
});
|
|
|
+
|
|
|
+const rules = {
|
|
|
+ name: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: "请输入农事名称",
|
|
|
+ trigger: "blur",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ conditionRate: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: "请输入触发条件",
|
|
|
+ trigger: "blur",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ executeDate: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: "请选择执行时间",
|
|
|
+ trigger: "blur",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ usageMode: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: "请选择施用方式",
|
|
|
+ trigger: "change",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+}
|
|
|
const textarea = ref("");
|
|
|
|
|
|
-const boxList = ref([]);
|
|
|
//添加
|
|
|
const handleAdd = (index) => {
|
|
|
- boxList.value[index].children.push({ index: 1 });
|
|
|
+ dynamicValidateForm.prescriptionList[index].pesticideFertilizerList.push({ index: 1,
|
|
|
+ name: "",
|
|
|
+ pesticideFertilizerList: [
|
|
|
+ {
|
|
|
+ key: 1,
|
|
|
+ typeName: "",
|
|
|
+ muUsage: "",
|
|
|
+ muUsage2: "",
|
|
|
+ ratio: "",
|
|
|
+ ratio2: "",
|
|
|
+ remark: "",
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ } );
|
|
|
};
|
|
|
//删除
|
|
|
const handleDelete = (index,childIndex) => {
|
|
|
- if (boxList.value[index].children.length === 1) return ElMessage.warning("最少保留一个处方");
|
|
|
- boxList.value[index].children.splice(childIndex, 1);
|
|
|
+ // if (boxList.value[index].children.length === 1) return ElMessage.warning("最少保留一个处方");
|
|
|
+ dynamicValidateForm.prescriptionList[index].pesticideFertilizerList.splice(childIndex, 1);
|
|
|
};
|
|
|
+
|
|
|
+// 重置
|
|
|
+function resetItem(index,childIndex) {
|
|
|
+ dynamicValidateForm.prescriptionList[index].pesticideFertilizerList[childIndex] = {
|
|
|
+ key: 1,
|
|
|
+ pesticideFertilizerId: "",
|
|
|
+ typeName: "",
|
|
|
+ muUsage: "",
|
|
|
+ muUsage2: "",
|
|
|
+ ratio: "",
|
|
|
+ ratio2: "",
|
|
|
+ remark: "",
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+function updateTableData(pIndex, cIndex, tableData) {
|
|
|
+ dynamicValidateForm.prescriptionList[pIndex].pesticideFertilizerList[cIndex] = {
|
|
|
+ ...tableData
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
@@ -332,21 +485,6 @@ const handleDelete = (index,childIndex) => {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- // 编辑处方
|
|
|
- .box-form {
|
|
|
- ::v-deep {
|
|
|
- .el-form-item__label {
|
|
|
- color: #9f9f9f;
|
|
|
- }
|
|
|
- .el-input__wrapper {
|
|
|
- background: transparent;
|
|
|
- box-shadow: 0 0 0 1px #9f9f9f;
|
|
|
- .el-input__inner {
|
|
|
- color: #fff;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
|
|
|
.box-item-children {
|
|
|
border: 1px solid #444444;
|
|
|
@@ -408,6 +546,60 @@ const handleDelete = (index,childIndex) => {
|
|
|
margin-top: 16px;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+
|
|
|
+ // 编辑处方
|
|
|
+ .box-form {
|
|
|
+ ::v-deep {
|
|
|
+ .el-form-item {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ .el-form-item__label {
|
|
|
+ font-size: 16px;
|
|
|
+ color: #9f9f9f;
|
|
|
+ }
|
|
|
+ .el-input__wrapper {
|
|
|
+ background: transparent;
|
|
|
+ box-shadow: 0 0 0 1px #9f9f9f;
|
|
|
+ .el-input__inner {
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .usage-mode {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ color: #9f9f9f;
|
|
|
+ padding: 16px 21px 20px 12px;
|
|
|
+ border: 1px solid #363636;
|
|
|
+ background: rgba(255, 255, 255, 0.04);
|
|
|
+ border-radius: 8px;
|
|
|
+ font-size: 16px;
|
|
|
+ margin: 16px 0;
|
|
|
+ width: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .usage-title {
|
|
|
+ padding-right: 20px;
|
|
|
+ }
|
|
|
+ .mode-select {
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+ ::v-deep {
|
|
|
+ .el-select__wrapper {
|
|
|
+ background: transparent;
|
|
|
+ box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6) inset;
|
|
|
+ }
|
|
|
+ .el-select__placeholder,
|
|
|
+ .el-select__caret {
|
|
|
+ // color: #ffd489;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
.footer {
|
|
|
width: 100%;
|
|
|
height: 58px;
|
wangsisi