agriculture-one-map/src/views/workDetail/components/serviceBox.vue

<template>
    <div class="work-item" :class="{ dark: progress === 0 }">
        <!-- <div class="work-line">
            <div class="line-box">
                <div class="line-dotted">
                    <div class="dotted-inset"></div>
                </div>
            </div>
        </div> -->
        <div class="work-info">
            <!-- <img v-if="progress === 1" class="todo-img" src="@/assets/img/gallery/todo.png" />
            <img v-if="progress === 2 || progress === 3 || progress === 4" class="done-img" src="@/assets/img/gallery/done.png" /> -->
            <!-- <div class="card-item-title">
                <span class="dotted"></span>农资报价
                <span class="real-text" v-if="progress === 2 || progress === 3 || progress === 4">(大禹科技公司)</span>
            </div> -->
            <div class="prescription-box">
                <div class="prescription-item" v-if="progress === 1 && ROLETYPE == '2'">
                    <div class="service-time">
                        执行时间
                        <div class="time-picker">
                            <el-date-picker
                                value-format="YYYY-MM-DD"
                                v-model="pickerTime"
                                type="date"
                                placeholder="选择日期"
                            />
                        </div>
                    </div>
                    <div class="usage-mode">
                            施用方式：<span>{{ serviceData.usageMode }}</span>
                        </div>
                    <div class="recipe-item">
                        <div class="recipe-form">
                            <el-form ref="formRef" style="max-width: 600px" class="demo-dynamic">
                                <el-form-item
                                    v-for="(prescriptionItem, index) in prescriptionList"
                                    :key="index"
                                    :prop="'domains.' + index + '.value'"
                                >
                                    <div class="form-box" v-for="(domain, index) in prescriptionItem.pesticideFertilizerList" :key="'sub' + index">
                                        <div class="form-index">{{ formatIndex(index) }}</div>
                                        <div class="box-item">
                                            <div class="form-l">肥药名称</div>
                                            <div class="form-r r-text">{{ domain.defaultName }}</div>
                                        </div>
                                        <div class="box-item">
                                            <div class="form-l">使用功效</div>
                                            <div class="form-r r-text">{{ domain.typeName }}</div>
                                        </div>
                                        <div class="box-item">
                                            <div class="form-l">执行方式</div>
                                            <div class="form-r">
                                                <el-select
                                                    filterable
                                                    v-model="domain.executeStyle"
                                                    placeholder="请选择"
                                                    style="width: 140px"
                                                >
                                                    <el-option label="人工" :value="1" />
                                                    <el-option v-if="serviceData.usageMode === '叶面施'" label="无人机" :value="2" />
                                                </el-select>
                                            </div>
                                        </div>
                                        <div class="box-item sub-item">
                                            <div class="form-l colunm-sub">
                                                <div class="main-name">肥药配比</div>
                                                <div class="sub-name">(药剂:兑水量)</div>
                                            </div>
                                            <div class="form-r r-text">
                                                <!-- {{
                                                    domain.ratio
                                                        ? domain.ratio + "倍"
                                                        : domain.defaultRatio
                                                        ? domain.defaultRatio + "倍"
                                                        : "---"
                                                }} -->
                                                {{ domain.executeStyle === 2 ? ((domain.ratio2 ? domain.ratio2 + "倍" : (domain.defaultRatio ? domain.defaultRatio + "倍" : '---'))) :  ((domain.ratio ? domain.ratio + "倍" : (domain.defaultRatio ? domain.defaultRatio + "倍" : '---'))) }}
                                            </div>
                                        </div>
                                        <div class="box-item sub-item">
                                            <div class="form-l">单亩用量</div>
                                            <div class="form-r r-text">{{ domain.executeStyle === 2 ? domain.muUsage2 : domain.muUsage }}{{ domain.unit }}</div>
                                        </div>
                                        <div class="box-item sub-item">
                                            <div class="form-l colunm-sub">品牌</div>
                                            <div class="form-r price">
                                                <el-input v-model="domain.brand" style="width: 140px" placeholder="" />
                                            </div>
                                        </div>
                                        <div class="box-item sub-item">
                                            <div class="form-l">亩单价</div>
                                            <div class="form-r price">
                                                <el-input v-model="domain.muPrice" style="width: 140px" placeholder="">
                                                    <template #append>元</template>
                                                </el-input>
                                            </div>
                                        </div>
                                        <!-- <div class="action-btn btn-group">
                                            <el-button class="btn delete-btn" @click.prevent="removeDomain(domain)">
                                                删除
                                            </el-button>
                                            <el-button type="primary" class="btn" @click.prevent="resetItemForm(index)">
                                                重置
                                            </el-button>
                                        </div> -->
                                    </div>
                                </el-form-item>
                            </el-form>
                        </div>
                    </div>

                    <div class="service-wrap">
                        <div class="sub-title">
                            <div class="sub-name">选择农户</div>
                        </div>
                        <!-- <div class="bottom-map" ref="areaRef" :id="'areaMap' + boxId"></div> -->
                        <template v-for="(item, index) in displayedItems" :key="index">
                            <div class="service-item">
                                <div class="service-l">
                                    <img class="service-img" :src="item.icon" />
                                    {{ item.userName || "农户" }}
                                </div>
                                <div class="service-c">{{ item.area || 50 }}亩</div>
                                <div class="service-r">
                                    <el-checkbox
                                        @change="handleUsersCheckChange()"
                                        :true-value="1"
                                        :false-value="0"
                                        v-model="item.selected"
                                        size="large"
                                    />
                                </div>
                            </div>
                        </template>
                        <div v-if="hasMoreItems">
                            <div @click="toggleMore" class="icon-text">
                                {{ isMoreVisible ? '收起' : '展开' }}
                                <el-icon :class="isMoreVisible ? 'down-icon' : 'up-icon'"><DArrowRight /></el-icon>
                            </div>
                        </div>

                        <div class="service-bottom">
                            <div class="sub-title">
                                <div class="sub-name">选择农服</div>
                            </div>
                            <template v-for="(item, i) in displayedItems2" :key="i">
                                <div class="service-item">
                                    <div class="service-l">
                                        <img class="service-img" :src="item.icon" />
                                        {{ item.userName || "农服" }}
                                    </div>
                                    <div class="service-c">{{ item.serviceType == 1 ? "技术类" : "劳力类" }}</div>
                                    <div class="service-r">
                                        <el-checkbox
                                            :true-value="1"
                                            :false-value="0"
                                            v-model="item.selected"
                                            size="large"
                                        />
                                    </div>
                                </div>
                            </template>
                            <div v-if="hasMoreItems2">
                                <div @click="toggleMore2" class="icon-text">
                                    {{ isMoreVisible2 ? '收起' : '展开' }}
                                    <el-icon :class="isMoreVisible2 ? 'down-icon' : 'up-icon'"><DArrowRight /></el-icon>
                                </div>
                            </div>

                            <div class="service-btn">
                                <el-button class="btn" @click.stop="submit" type="primary">确认订单</el-button>
                            </div>
                        </div>
                    </div>
                </div>

                <div v-else>
                      <div class="sub-title">
                        报价处方
                      </div>
                    <div class="item-table">
                        <el-table
                            :data="tableData"
                            style="width: 100%"
                            :header-cell-style="{ background: '#F5F5F5' }"
                        >
                            <el-table-column align="center" prop="defaultName" label="名称" />
                            <el-table-column align="center" prop="brand" label="品牌" width="52">
                                <template #default="scope">
                                  <div>{{ scope.row.brand ? scope.row.brand : '---' }}</div>
                                </template>
                            </el-table-column>
                            <el-table-column align="center" label="执行方式" width="40">
                                <template #default="scope">
                                    <div class="table-l-title">
                                        {{ scope.row.executeStyle == 1 ? "人工" : "人工" }}
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column align="center" prop="ratio" label="配比" width="62">
                                <template #default="scope">
                                    <div v-if="scope.row.executeStyle === 1">
                                        <!-- <div>{{`1${scope.row.unit}:${scope.row.ratio || scope.row.defaultRatio}${scope.row.unit}`}}</div> -->
                                        <!-- <div>人工</div> -->
                                        <div>{{`1:${scope.row.ratio || scope.row.defaultRatio}${scope.row.unit}`}}</div>
                                    </div>
                                    <div v-else-if="scope.row.executeStyle === 2">
                                        <!-- <div>{{`1${scope.row.unit}:${scope.row.ratio2 || scope.row.defaultRatio}${scope.row.unit}`}}</div> -->
                                        <!-- <div>无人机</div> -->
                                        <div>{{`1:${scope.row.ratio2 || scope.row.defaultRatio}${scope.row.unit}`}}</div>
                                    </div>
                                    <div v-else>
                                        <div>{{`1:${scope.row.defaultRatio}${scope.row.unit}`}}</div>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column prop="muUsage" label="单亩用量" width="46">
                                <template #default="scope">
                                    {{ scope.row.muUsage ? scope.row.muUsage + scope.row.unit : "---" }}
                                </template>
                            </el-table-column>
                            <el-table-column align="center" prop="muPrice" label="亩单价" width="58">
                              <template #default="scope">
                                  <div>{{ scope.row.muPrice ? scope.row.muPrice + '元' : '---' }} </div>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
            </div>
        </div>
        <service-dialog></service-dialog>
    </div>
</template>

<script setup>
import eventBus from "@/api/eventBus";
import { onMounted, ref, computed, onActivated } from "vue";
import AreMap from "../areaMap";
import serviceDialog from "./serviceDialog.vue";

import { useStore } from "vuex";
import { deepClone } from "@/common/commonFun";
const store = useStore();

const ROLETYPE = store.state.app.curRole
// const ROLETYPE = '2'

const checkService = ref(true);
const props = defineProps({
    progress: {
        type: Number,
        required: false,
    },
    prescriptionList: {
        type: Array,
        required: true,
    },
    pesticideFertilizers: {
        type: Array,
        required: true,
    },
    users: {
        type: Array,
        required: true,
    },
    executeDate: {
        type: String,
        required: false,
    },
    boxId: {
        type: String,
        required: false,
    },
    serviceData: {
        type: Object,
        required: false,
    },
});


let pickerTime = ref(props.executeDate);

// 表单
const formRef = ref();

const dynamicValidateForm = ref([]);

const formatIndex = (index) => {
    return String(index + 1).padStart(2, "0");
};
const handleUsersCheckChange = (index) => {
    console.log(props.users);
};

function flattenDomains(data) {
  return data.reduce((acc, item) => {
    return acc.concat(item.pesticideFertilizerList);
  }, []);
}

const submit = () => {
    const data = {
        orderId: dynamicValidateForm.value[0].orderId,
        orderStatus: 2,
        prescriptionList: props.prescriptionList,
        users: props.users,
        executeDate: pickerTime.value,
    };
    console.log('data', data);
    // VE_API.order.confirm(data).then(({ code }) => {
    //     if (code == 0) {
    //         console.log('订单确认成功');
    //         eventBus.emit('discover:submitForm')
    //     }
    // });
};

const areaRef = ref();
let farmArr = ref([])
let serviceArr = ref([])
onMounted(() => {
    if (props.progress === 1 && ROLETYPE == '2') {
        // const dom = document.getElementById(`areaMap${props.boxId}`)
        // let areMap = new AreMap();
        // areMap.initMap("POINT(113.1093017627431 22.574540836684672)", dom);
        // areMap.setPoints(props.users.filter((item) => item.userType === 1).map((item) => item.point));
        // settingData();
    }
    farmArr.value = props.users.filter(item => item.userType === 1)
    serviceArr.value = props.users.filter(item => item.userType === 2)
    if (ROLETYPE != '2') {
        console.log('rrrr');
        tableData.value = flattenDomains(props.prescriptionList)
    }
});
const tableData = ref([])

// 控制是否展开更多列表项的布尔值
const isMoreVisible = ref(false);
const isMoreVisible2 = ref(false);

// 计算属性，返回应该显示的列表项
const displayedItems = computed(() => {
  return isMoreVisible.value ? farmArr.value : props.users.slice(0, 3);
});
// 计算属性，返回应该显示的列表项
const displayedItems2 = computed(() => {
  return isMoreVisible2.value ? serviceArr.value : serviceArr.value.slice(0, 3);
});

// 计算属性，判断是否有更多项可以展开
const hasMoreItems = computed(() => {
  return farmArr.value.length > 3;
});

// 计算属性，判断是否有更多项可以展开
const hasMoreItems2 = computed(() => {
  return serviceArr.value.length > 3;
});

// 方法，用于切换展开/收起状态
const toggleMore = () => {
  isMoreVisible.value = !isMoreVisible.value;
};

// 方法，用于切换展开/收起状态
const toggleMore2 = () => {
  isMoreVisible2.value = !isMoreVisible2.value;
};
</script>

<style lang="scss" scoped>
@import "./boxClass.scss";
.service-time {
    display: flex;
    align-items: center;
    color: #727272;
    .time-picker {
        padding-left: 10px;
        ::v-deep {
            .el-input__wrapper {
                background: none;
                box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6) inset;
                .el-input__prefix {
                    color: rgba(255, 255, 255, 0.6);
                }
                .el-input__inner {
                    color: #fff;
                }
            }
        }
    }
}

.usage-mode {
    display: flex;
    align-items: center;
    font-size: 16px;
    color: #727272;
    padding: 12px 0 12px 0;
    span {
        color: #fff;
    }
}
.service-name {
    padding-top: 12px;
    color: #2199F8;
    font-size: 14px;
}


/* 定义过渡效果 */
.list-enter-active, .list-leave-active {
    transition: all 0.5s;
}
.list-enter, .list-leave-to /* .list-leave-active in <2.1.8 */ {
    opacity: 0;
    transform: translateY(30px);
}
.icon-text {
    padding-top: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    .down-icon {
        transform: rotate(270deg);
    }
    .up-icon {
        transform: rotate(90deg);
    }
}
</style>