foster-pc-vue/src/views/home/components/adoptList.vue

<template>
    <div class="adopt-list" :class="{ 'has-btn': isManySetting }">
        <div class="select-wrap common-select">
            <el-select class="select-item" v-model="areaVal" placeholder="全区" style="width: 116px">
                <el-option v-for="item in areaOptions" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
            <el-select class="select-item" v-model="typeVal" placeholder="全部品类" style="width: 116px">
                <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
            <el-select class="select-item" v-model="ageVal" placeholder="树龄" style="width: 116px">
                <el-option v-for="item in ageOptions" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
        </div>
        <div class="select-wrap select-b common-select">
            <el-select class="select-item" v-model="allVal" placeholder="综合评分" style="width: 116px">
                <el-option v-for="item in allOptions" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
            <el-select class="select-item" v-model="ecologyVal" placeholder="生态评分" style="width: 116px">
                <el-option v-for="item in ecologyOptions" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
            <el-select class="select-item" v-model="statusVal" placeholder="全部状态" style="width: 116px">
                <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
        </div>

        <div class="many-setting select-wrap" v-show="isManySetting">
            <el-select class="select-item many-select" v-model="settingType" placeholder="选中设置项" style="width: 88px">
                <template #label="{ label, value }">
                    <span v-show="value!=='total'">设置</span>
                    <span>{{ label }}</span>
                </template>
                <el-option v-for="(item, index) in settingTypeOptions" :key="index" :label="item.name" :value="item.value" />
            </el-select>
            <div v-if="settingType === 'age'">
                <el-input-number
                    style="width: 174px"
                    placeholder="请输入"
                    class="number-input-setting"
                    :controls="false"
                    v-model="batchAge"
                    :min="0"
                    @change="setManyPrice"
                />
                <span class="setting-unit">年</span>
            </div>
            <div v-if="settingType === 'price'">
                <el-input
                    style="width: 190px"
                    placeholder="请输入"
                    class="number-input-setting"
                    v-model="batchPrice"
                    :min="0"
                    @change="setManyPrice"
                />
            </div>
            <div v-if="settingType === 'total'" class="date-input">
                <el-date-picker
                    v-model="batchTotal"
                    type="date"
                    format="YYYY-MM-DD"
                    style="width: 190px"
                    value-format="YYYY-MM-DD"
                    placeholder="选择时间"
                />
            </div>
        </div>

        <div class="list-wrap">
            <div class="list-item" v-for="(item, index) in adoptList" :key="index">
                <div class="list-info">
                    <div class="tree-icon">
                        <div class="tree-tag" v-show="!item.offlineTakeSelected">未守护</div>
                        <div class="tree-tag wait" v-show="item.offlineTakeSelected">已守护</div>
                        <!-- <img class="tree-img" src="@/assets/images/foster-home/tree-item.png" alt="" /> -->
                        <img class="tree-img" :src="item.icon || require(`@/assets/images/foster-home/list/1.png`)" alt="" />
                        <div class="tree-type-name-tag">{{ item.pz }}</div>
                    </div>
                    <div class="item-center">
                        <div class="center-t">
                            {{item.fosterCode}}
                            <!-- <span class="type-tag">综合:{{item.zh||94}}分</span>
                            <span class="type-tag">生态:{{item.st||92}}分</span> -->
                        </div>
                        
                        <!-- 批量设置树龄或单项设置 -->
                        <div class="center-item p-t-2 has-input" v-show="(isManySetting && settingType === 'age') || item.settingPrice">
                            <span class="edit-label">树龄：</span>
                            <el-input-number @change="settingSinglePrice" class="number-input" :controls="false" v-model="item.age" :min="0" />
                            <span class="unit">年</span>
                        </div>
                        <!-- 不是编辑状态 -->
                        <div class="center-item p-t-2 age-line" v-show="!isManySetting && !item.settingPrice">
                            <div class="age-wrap">
                                <div class="has-age">
                                    <div class="age">栽种时间：<span class="unit">{{ item.time || '--' }}</span></div>
                                </div>
                                <div class="sort-line"></div>
                            </div>
                            树龄：<span class="unit"><span class="unit">{{item.age||'--'}}年</span></span>
                        </div>
                        <div class="center-item" v-show="isManySetting && settingType !== 'age'"><span class="edit-label">树龄：</span><span class="unit">{{item.age||'--'}}年</span></div>
                        <div class="center-item edit-item" v-show="isManySetting && settingType !== 'price'"><span class="edit-label">品种：</span><span class="unit">{{item.pz}}</span></div>
                        
                        <div class="center-item p-t-2 has-input edit-item" v-show="(isManySetting && settingType === 'price') || item.settingPrice">
                            <span class="edit-label">品种：</span>
                            

                            <el-select v-model="item.pz" filterable style="width: 140px;" placeholder="请选择品种">
                                <el-option v-for="(species, index) in speciesList" :key="index" :label="species.name" :value="species.name" />
                            </el-select>
                            <!-- <el-input @change="settingSinglePrice" style="width: 140px" class="number-input" v-model="item.pz" /> -->
                        </div>

                        <div class="center-item" v-show="(isManySetting && settingType !== 'total')"><span class="edit-label">栽种时间：</span><span class="unit">{{item.time}}</span></div>

                        <div class="center-item p-t-2 has-input date-input" v-show="(isManySetting && settingType === 'total') || item.settingPrice">
                            <span class="edit-label">栽种时间：</span>
                            <!-- <el-input-number @change="settingSinglePrice" class="number-input" :controls="false" v-model="item.total" :min="0" /> -->
                            <el-date-picker
                                v-model="item.plantDate"
                                type="date"
                                format="YYYY-MM-DD"
                                style="width: 140px"
                                value-format="YYYY-MM-DD"
                                placeholder="选择时间"
                            />
                        </div>

                        <div class="center-item p-t-2 user-wrap" v-show="item.status === 0 && !isManySetting && !item.settingPrice">
                            <img src="@/assets/images/foster-home/user.png" alt="">
                            选择守护人

                            <el-select v-model="offlineTakeSelected" filterable style="width: 240px;" placeholder="请选择守护人">
                                <el-option v-for="(user, index) in userList" :key="index" :label="user.name" :value="{value: user.tel, ...user}" />
                            </el-select>
                        </div>
                        <div class="center-item p-t-2 progress-wrap" v-show="item.status === 1 && !isManySetting && !item.settingPrice">
                            守护人：
                            <span class="unit">
                                <div class="user-item">
                                    <div class="user-detail" v-for="(owner, oI) in owners" :key="oI">
                                        {{ owner.userName }}
                                        <span v-show="oI<owners.length-1">/</span>
                                    </div>
                                </div>
                            </span>
                        </div>
                    </div>
                    <div v-show="!isManySetting && !item.settingPrice && ROLE == 1" @click="toSettingSinglePrice(index, true)">
                        <img src="@/assets/images/common/edit-icon.png" alt="" />
                    </div>
                </div>
                <div v-show="item.settingPrice" class="btn-group edit-one">
                    <!-- 渐变主色按钮 -->
                    <div class="btn cancel-btn" @click="toSettingSinglePrice(index, false)">取消</div>
                    <div class="btn edit-btn" @click="toSettingSinglePrice(index, false, true)">确认修改</div>
                </div>
            </div>
            <div class="pagination-wrap">
                <el-pagination background :page-size="20" :pagerCount="5" v-model:current-page="currentPage" @current-change="getSamplePage" layout="prev, pager, next" :total="totalVal" />
            </div>
        </div>

        <!-- 渐变主色按钮 -->
        <div class="center-btn" v-show="!isManySetting" @click="manySetPrice">批量编辑果树</div>
        <!-- 渐变主色按钮 -->
        <div class="btn-group list-btn" v-show="isManySetting">
            <div class="btn cancel-btn" @click="saveManySetting(0)">取消</div>
            <div class="btn edit-btn" @click="saveManySetting(1)">保存</div>
        </div>
    </div>
</template>

<script setup>
import { ElMessage } from "element-plus";
import { onMounted, ref } from "vue";
import { useStore } from "vuex";
let store = useStore();

const ROLE = store.state.home.userRole;

const areaVal = ref(0);
const areaOptions = ref([
    { label: "全区", value: 0 },
    { label: "1区", value: 1 },
    { label: "2区", value: 2 },
]);
const typeVal = ref(0);
const typeOptions = ref([
    { label: "全部品类", value: 0 },
    { label: "白糖罂", value: 1 },
    { label: "井岗红糯", value: 2 },
]);
const ageVal = ref(0);
const ageOptions = ref([
    { label: "全部树龄", value: 0 },
    { label: "0-10年", value: 1 },
    { label: "10-20年", value: 2 },
]);
const allVal = ref(0);
const allOptions = ref([
    { label: "全部评分", value: 0 },
    { label: "0-10年", value: 1 },
    { label: "10-20年", value: 2 },
]);
const ecologyVal = ref(0);
const ecologyOptions = ref([
    { label: "生态评分", value: 0 },
    { label: "0-10年", value: 1 },
    { label: "10-20年", value: 2 },
]);
const statusVal = ref(0);
const statusOptions = ref([
    { label: "全部状态", value: 0 },
    { label: "0-10年", value: 1 },
    { label: "10-20年", value: 2 },
]);

const adoptList = ref([]);

const owners = ref([{userName: "王丽丽", value: 50}])


const offlineTakeSelected = ref(null)
const userList = ref([])
const speciesList = ref([])
function getUserList() {
    VE_API.manage_interface.offlineTakeList({farmId: 766}).then(({data}) => {
        userList.value = data
    })
    VE_API.manage_interface.speciesList({farmId: 766}).then(({data}) => {
        speciesList.value = data
    })
}
onMounted(() => {
    getSamplePage()
    getUserList()
});

const currentPage = ref(1)
const totalVal = ref(0)

function getSamplePage() {
    VE_API.manage_interface.fetchSamplePage({farmId: 80865, page: currentPage.value, limit: 20}).then(({data, count}) => {
        adoptList.value = data
        totalVal.value = count
    })
}

// 批量设置
const batchAge = ref(null);
const batchPrice = ref(null);
const batchTotal = ref(null);
const isManySetting = ref(false);
const settingTypeOptions = [
    {name: "树龄", value: "age"},
    {name: "品种", value: "price"},
    {name: "栽种时间", value: "total"},
]
const settingType = ref("age")
function manySetPrice() {
    isManySetting.value = true;
}
function saveManySetting(isToSave) {
    isManySetting.value = false;
    if (isToSave) {
        // 保存
    }
}

function setManyPrice(v) {
//   adoptList.value.map(item => item.price = v)
}

// 设置单棵树单价

function toSettingSinglePrice(i, val, toSave = false) {
  console.log('tototot');
  const data = adoptList.value[i]
  if (toSave) {
    const params = {
        sampleId: data.sampleId,
        pz: data.pz,
        age: data.age,
        plantDate: data.plantDate,
        offlineTakeSelected: {...offlineTakeSelected.value}
    }
    VE_API.manage_interface.editFosterSample(params).then((res) => {
        if (res.code === 0) {
            ElMessage.success("修改成功")
            adoptList.value[i].settingPrice = val
        }
    })
  } else {
    adoptList.value[i].settingPrice = val
  }
}
function settingSinglePrice() {
  console.log('sss');
}
</script>

<style lang="scss" scoped>
.adopt-list {
    height: 100%;
    overflow: auto;
    // padding: 0 10px;
    &.has-btn {
        height: calc(100% - 60px);
    }
    .type-tag {
        color: #ffd489;
        background: rgba(255, 212, 137, 0.06);
        padding: 2px 4px;
        font-size: 10px;
        margin-left: 4px;
        border-radius: 4px;
    }
    .select-wrap {
        display: flex;
        align-items: center;
        padding: 0 10px;
        box-sizing: border-box;
        // ::v-deep {
        //     .el-select__wrapper {
        //         background: rgba(255, 212, 137, 0.06);
        //         box-shadow: 0 0 0 1px rgba(255, 212, 137, 0.3) inset;
        //         font-size: 13px;
        //         .el-select__input {
        //             color: #ffd489;
        //         }
        //         .el-select__placeholder {
        //             color: #ffd489;
        //             text-align: center;
        //         }
        //         .el-select__suffix {
        //             color: #ffd489;
        //         }
        //     }
        // }
        .select-item + .select-item {
            margin-left: 5px;
        }
    }
    .select-b {
        margin-top: 8px;
    }
    .pagination-wrap {
        position: absolute;
        bottom: 0;
        width: 100%;
        text-align: right;
        right: 0;
        background: #fff;
        padding: 12px;
        box-shadow: 0px 0px 4px #ccc;
        box-sizing: border-box;
        ::v-deep {
            .el-pagination {
                justify-content: center;
            }
        }
    }
    .list-wrap {
        padding: 12px 0;
        margin-bottom: 60px;
        .list-item {
            background: rgba(120, 120, 120, 0.05);
            padding: 8px 16px 8px 10px;
            border-radius: 5px;
            .list-info {
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
            .edit-one {
                margin-top: 12px;
                border-top: 1px solid rgba(0, 0, 0, 0.2);
                &.btn-group {
                    padding: 12px 0;
                    .btn {
                        flex: 1;
                        text-align: center;
                        padding: 5px;
                    }
                }
            }
            .tree-icon {
                align-self: baseline;
                position: relative;
                .tree-tag {
                    position: absolute;
                    left: 0;
                    top: 0;
                    background: rgba(33, 153, 248, 0.7);
                    border-radius: 5px 0 5px 0;
                    color: #fff;
                    padding: 1px 6px;
                    font-size: 10px;
                    &.wait {
                        background: rgba(106, 106, 106, 0.7);
                    }
                    &.done {
                        background: #757575;
                    }
                }
                .tree-type-name-tag {
                    position: absolute;
                    left: 0;
                    bottom: 0;
                    background: rgba(0, 0, 0, 0.6);
                    border-radius: 0 5px 5px 0;
                    font-size: 10px;
                    width: 100%;
                    text-align: center;
                    height: 18px;
                    line-height: 18px;
                    backdrop-filter: blur(4px);
                    color: #fff;
                }
                .tree-img {
                    width: 63px;
                    height: 63px;
                    border-radius: 5px;
                    object-fit: cover;
                }
            }
            .item-center {
                flex: 1;
                padding: 0 12px;
                color: #000000;
                .center-t {
                    font-size: 14px;
                }
                .center-item {
                    color: #6c6c6c;
                    font-size: 12px;
                    padding-top: 2px;
                }
                .edit-item {
                    padding: 6px 0;
                }

                .user-wrap {
                    color: #F0AC37;
                }
                
                .progress-wrap {
                    display: flex;
                    align-items: center;
                    .user-item {
                        display: flex;
                        align-items: center;
                    }
                    .progress-text {
                        font-size: 12px;
                        color: #999999;
                        .over {
                            color: #FFD489;
                        }
                    }
                    ::v-deep {
                        .el-progress-bar__outer {
                            width: 100px;
                            background: rgba(242, 243, 245, 0.23);
                        }
                    }
                }
                .age-line {
                    display: flex;
                    align-items: center;
                    .age-wrap {
                        display: flex;
                        align-items: center;
                        .sort-line {
                            margin: 0 10px;
                            height: 10px;
                            width: 1px;
                            background: rgba(0, 0, 0, 0.66);
                        }
                    }
                }
                .edit-label {
                    display: inline-block;
                    width: 76px;
                }
                .has-input {
                    padding: 4px 0;
                    .unit {
                        padding-left: 5px;
                    }
                    &.edit-item {
                        padding: 6px 0;
                    }
                }
                .small-btn-group {
                  display: flex;
                  font-size: 12px;
                }
            }
        }
        .list-item + .list-item {
            margin-top: 8px;
        }
    }
    .unit {
        padding-left: 5px;
        color: #000000;
    }
    .many-setting {
        background: rgba(33, 153, 248, 0.1);
        border: 1px solid #2199F8;
        border-radius: 5px;
        color: #2199F8;
        padding: 12px 8px;
        margin: 12px 8px 0 12px;
        color: #0064B3;
        ::v-deep {
            .many-select {
                margin-right: 10px;
                .el-select__wrapper {
                    padding: 4px;
                    box-shadow: none;
                    background: none;
                }
                .el-select__placeholder, .el-select__caret {
                    color: #0064B3;
                }
            }
            .number-input-setting {
                .el-input__wrapper {
                    box-shadow: 0 0 0 1px #2199F8 inset;
                    border-radius: 6px;
                }
                .el-input__inner, .el-input__inner::placeholder {
                    color: #2199F8;
                    text-align: center;
                }
            }
        }
        .setting-unit {
            padding-left: 10px;
        }
    }
    .number-input {
        // margin: 0 12px;
        ::v-deep {
            &.el-input-number, &.el-input {
                width: 90px;
                background: rgba(33, 153, 248, 0.08);
                border: 1px solid #2199F8;
                border-radius: 5px;
            }
            .el-input__wrapper {
                background: transparent;
                box-shadow: none;
            }
            .el-input-number.is-without-controls .el-input__wrapper {
                padding: 0 8px;
            }
            .el-input__inner, .el-input__inner::placeholder {
                color: #2199F8;
                text-align: center;
            }
        }
    }
    .date-input {
        ::v-deep {
            .el-date-editor {
                .el-input__wrapper {
                    background: rgba(33, 153, 248, 0.08);
                    box-shadow: 0 0 0 1px #2199F8 inset;
                }
                .el-input__inner, .el-input__inner::placeholder {
                    color: #2199F8;
                }
                .el-input__prefix {
                    color: #2199F8;
                }
            }
        }
    }
    .p-t-2 {
        padding-top: 2px;
    }
    .center-btn {
        position: absolute;
        bottom: 64px;
        left: 50%;
        transform: translateX(-50%);
        color: #FFFFFF;
        border-radius: 20px;
        font-size: 14px;
        padding: 7px 10px;
        cursor: pointer;
        border: 1px solid #fff;
        background: linear-gradient(180deg, #84C9FF, #2199F8);
        width: 194px;
        box-sizing: border-box;
        text-align: center;
    }

    .list-btn {
        position: absolute;
        bottom: 0;
        right: 0;
    }
    .btn-group {
        display: flex;
        align-items: center;
        justify-content: end;
        width: 100%;
        padding: 10px 12px;
        box-sizing: border-box;
        border-radius: 0 0 8px 8px;
        .btn {
            cursor: pointer;
            padding: 12px 36px;
            font-size: 14px;
            border-radius: 4px;
            border: 1px solid #2199F8;
            color: #2199F8;
        }
        .cancel-btn {
            color: #2199F8;
        }
        .edit-btn {
            background: #2199F8;
            color: #FFFFFF;
        }
        .btn + .btn {
            margin-left: 12px;
        }
    }
}
</style>