lotteryDraw_admin/src/views/AddNewTreatment.vue

<template>
    <div class="site-setting-wrap  min-flex-right">
        <div class="pagePadding">
            <p class="pageTitle bold">新增套餐</p>
            <div class="siteMessage flex-common" id="siteMessage2">
                <p class="littleTitle mb32">套餐信息</p>
                <el-form :model="siteForm" :rules="siteFormrules" ref="siteForm1">
                    <div class="flex-wrap">
                        <div class="flex-left">
                            <GuipFormItem column="column" class="mb24" label="套餐名称" :required="true">
                                <GuipInput slot="formDom" ref="GuipInput" column="column" v-model="siteForm.name"
                                    prop="name" placeholder="输入" />
                            </GuipFormItem>
                        </div>
                        <div class="flex-line"></div>
                        <div class="flex-right">
                            <GuipFormItem column="column" class="mb24" label="套餐价格" :required="true">
                                <GuipInput slot="formDom" ref="GuipInput" column="column" v-model="siteForm.price"
                                    prop="price" placeholder="输入" unit="元" />
                            </GuipFormItem>
                        </div>
                    </div>
                </el-form>
            </div>
            <div class="siteMessage flex-common" id="siteMessage2">
                <p class="littleTitle mb32">套餐项目</p>
                <el-form>
                    <div class="flex">
                        <div class="checkboxAll">
                            <el-checkbox @change="handleSelectAllChange1" v-model="selectAll"
                                :indeterminate="isIndeterminate">全选</el-checkbox>
                        </div>
                        <span class="totalCount">共{{ treatMentList.length }}条，已选{{ selectedCount }}条</span>
                    </div>

                    <div class="flex-between mb32 mt32">
                        <div class="tabProject flex">
                            <div :class="['tab-item ', projectSearchId == item.id ? 'active' : '']"
                                v-for="item in projectTagData" :key="item.name">{{ item.name }}</div>
                        </div>
                        <div class="right flex">
                            <GuipFormItem label="搜索项目">
                                <GuipInput slot="formDom" ref="GuipInput" width="280px" v-model="projectSearchName"
                                    placeholder="请输入" @blur="inputBlur">
                                    <img src="@/assets/input_search_ic.svg" slot="suffix" @click="handleClear" />
                                </GuipInput>
                            </GuipFormItem>
                        </div>
                    </div>
                    <GuipTable :tableData="treatMentList" style="width: 100%" ref="multipleTable"
                        @selection-change="handleSelectionChange" :loading="loading">
                        <el-table-column type="selection" label="选择" width="150"></el-table-column>
                        <el-table-column prop="name" label="项目名称" min-width="150"></el-table-column>
                        <el-table-column label="次数" min-width="150px">
                            <template slot-scope="scope">
                                <GuipInput width="120px" v-model="scope.row.nums" @change="changeNums(scope.row)" />
                            </template>
                        </el-table-column>
                        <el-table-column prop="price" label="项目价格" min-width="150"></el-table-column>
                        <el-table-column prop="group" label="分类" min-width="150"></el-table-column>
                    </GuipTable>
                    <el-pagination background @size-change='handleSizeChange' @current-change='handleCurrentChange'
                        :current-page="currentPage" :page-size=pageSize layout="prev, pager, next,jumper"
                        :total="treatMentList.length">
                    </el-pagination>
                </el-form>
            </div>
        </div>
        <div class="register-btns">
            <GuipButton type="system" :btnstyle="{ width: '144px', height: '46px' }" @click="cancelClick">取消
            </GuipButton>
            <GuipButton type="primary" :btnstyle="{ width: '144px', height: '46px' }" @click="confirmClick">保存套餐
            </GuipButton>
        </div>
        <GuipDialog :dialogVisible="dialogVisible" :title="'新增套餐确认'" :show-close-button="true" width="599px"
             :show-cancel-button="true" @confirm="handleConfirm" @cancel="handleCancel" 
            @close="handleClose" confirmText="确定新增">
            <div class="flex content">
                <span>套餐名称：</span>
                <span>{{ siteForm.name }}套餐</span>
            </div>
            <div class="flex content">
                <span>套餐价格：</span>
                <span>{{ siteForm.price }}元</span>
            </div>
            <div class="flex content">
                <span>套餐项目：</span>
                <div class="column">
                    <span v-for="item in selectedRows" :key="item.id">{{ item.name }} {{ item.nums }}次</span>
                </div>
            </div>
        </GuipDialog>
    </div>
</template>
<script>
import store from '../store';
import { mapState } from 'vuex';
import GuipFormItem from '@/components/GuipFormItem.vue';
import GuipTable from '@/components/GuipTable.vue';
import GuipDialog from '@/components/GuipDialog.vue';
import GuipInput from '@/components/GuipInput.vue';
import GuipButton from '@/components/GuipButton.vue';
export default {
    // 站点设置
    name: '',
    props: [''],
    components: {
        GuipFormItem,
        GuipInput,
        GuipDialog,
        GuipButton,
        GuipTable

    },
    data() {
        return {
            dialogVisible: true,
            selectAll: false,
            selectedCount: 0,
            currentPage: 1,
            pageSize: 10,
            isIndeterminate: false,
            projectSearchName: '',
            projectSearchId: '0',
            loading: false,
            treatMentList: [
                {
                    name: '针灸1',
                    nums: 1,
                    checked: true,
                    group: '针灸1',
                    price: 9939,
                    id: '11'
                },
                {
                    name: '针灸2',
                    nums: 1,
                    checked: false,
                    group: '针灸1',
                    price: 199,
                    id: '12'
                },
                {
                    name: '针灸1',
                    nums: 1,
                    checked: true,
                    group: '针灸1',
                    price: 9939,
                    id: '111'
                },
                {
                    name: '针灸2',
                    nums: 1,
                    checked: false,
                    group: '针灸1',
                    price: 199,
                    id: '122'
                },
            ],
            selectedRows: [],
            siteForm: {
                name: '青春永驻套餐',
                price: '99999'
            },
            siteFormrules: {
                name: [
                    { required: true, message: '请输入站点简称', trigger: 'blur' }
                ],
                price: [
                    { required: true, message: '请输入站点简称', trigger: 'blur' }
                ],
            },
            projectTagData: [
                {
                    name: '针灸1',
                    id: '1'
                },
                {
                    name: '针灸2',
                    id: '11'
                },
                {
                    name: '针灸3',
                    id: '12'
                },
                {
                    name: '针灸4',
                    id: '13'
                },
            ],
        }
    },
    computed: {
        ...mapState(['pageTitle']) // 从Vuex映射showSidebar状态到组件的计算属性中
    },
    mounted() {
        store.commit('SET_PAGETITLE', '基本设置');
        // 编辑的时候默认选中
        this.$nextTick(() => {
            if (this.treatMentList.length >= 2) {
                const defaultSelected = this.treatMentList.filter(item => item.checked === true);
                defaultSelected.forEach(row => {
                    this.$refs.multipleTable.$refs.guiptable.toggleRowSelection(row, true);
                });
                this.selectedRows = defaultSelected;
                this.updateSelectionState();
            }
        });
    },
    methods: {
        inputBlur(val){
            // 搜索项目
            this.$http('POST', '/supernew/ajax_get_type_batch_list', {
                projectSearchId:this.projectSearchId,
                search:this.projectSearchName
            }).then(response => {
                if (response.code == 0) {
                    this.dialogVisible = false;
                }

            }).catch(error => {
                console.error(error, 'error')
            })
            console.log(val,'----搜索');
        },
        updateSelectionState() {
            const allSelected = this.selectedRows.length === this.treatMentList.length;
            const noneSelected = this.selectedRows.length === 0;
            this.selectAll = allSelected;
            this.isIndeterminate = !noneSelected && !allSelected;
            this.selectedCount = this.selectedRows.length;
        },

        // 处理选择变化
        handleSelectionChange(rows) {
            this.selectedRows = rows;
            this.updateSelectionState();
        },
        handleSelectAllChange1(val) {
            if (val) {
                // 只选中未选中的行
                const unselectedRows = this.treatMentList.filter(
                    row => !this.selectedRows1.includes(row)
                );
                unselectedRows.forEach(row => {
                    this.$refs.multipleTable1.$refs.guiptable.toggleRowSelection(row, true);
                });
            } else {
                // 只取消已选中的行
                this.selectedRows.forEach(row => {
                    this.$refs.multipleTable1.$refs.guiptable.toggleRowSelection(row, false);
                });
            }
        },
        changeNums(row) {
            console.log(row.nums, '====row.nums');
        },
        handleClose() {
            this.handleCancel()
        },
        handleCancel() {
            this.dialogVisible = false;
        },
        handleConfirm() {
            // 确认增加套餐接口
            this.$http('POST', '/supernew/ajax_get_type_batch_list', {

            }).then(response => {
                if (response.code == 0) {
                    this.dialogVisible = false;
                }

            }).catch(error => {
                console.error(error, 'error')
            })
        },
        handleClear(value) {
            // this.handleInput('')
            console.log(value, 'value===qinghcu');
        },
        handleSelectAllChange(val) {
            console.log(this.$refs.multipleTable, 'multipleTable-');
            if (val) {
                // 只选中未选中的行
                const unselectedRows = this.treatMentList.filter(
                    row => !this.selectedRows.includes(row)
                );
                unselectedRows.forEach(row => {
                    this.$refs.multipleTable.$refs.guiptable.toggleRowSelection(row, true);
                });
            } else {
                // 只取消已选中的行
                this.selectedRows.forEach(row => {
                    this.$refs.multipleTable.$refs.guiptable.toggleRowSelection(row, false);
                });
            }
        },

        // // 处理选择变化
        // handleSelectionChange(rows) {
        //     this.selectedRows = rows;

        //     // 更新全选按钮状态
        //     const allSelected = rows.length === this.treatMentList.length;
        //     const noneSelected = rows.length === 0;

        //     this.selectAll = allSelected;
        //     this.isIndeterminate = !noneSelected && !allSelected;
        // },
        handleSizeChange(val) {
            this.pageSize = val
            this.getData()
        },
        handleCurrentChange(val) {
            this.currentPage = val
            this.getData()
        },
        changeSelect(value) {
            console.log(value, '--');
        },
        btnClick() {
        },
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePreview(file) {
            console.log(file);
        },
        // 上传图片
        handleAvatarSuccess(res, file) {
            this.imageUrl1 = URL.createObjectURL(file.raw);
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 或 PNG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },
        changeNormalWeixin() {

        },
        changeSelectWeixin(item, flag) {
            if (flag) {
                this.select_placeholder_weixin = this.options_weixin_null.desc;
                return
            }
            this.selectedItem = { ...item };
            console.log(this.selectedItem, 'this.selectedItem====');
        },
        //  销售渠道
        domain_radioChange(type) {
            console.log(type, '--');
        },
        onSwitchChange(data) {
            console.log(data, '---');
        },
        submitForm(form) {
            console.log(this.$refs[form], '-----');
            this.$refs[form].validate((valid) => {
                console.log(this[form], '======formxinxi');
                if (valid) {
                    alert('提交成功!');
                } else {
                    return false;
                }
            });
        },
        cancelClick() {
            this.$router.push('/hosInformation')
        },
        confirmClick() {
            this.dialogVisible = true;
        }

    }
}
</script>
<style lang="scss">
.siteMessage {
    border-radius: 4px;
    transition: all .5s;
    border: 1px solid transparent;
}
.content{
    margin-top: 16px;
    color: #626573;
    letter-spacing: 0.08em;
    align-items: flex-start;
}

.register-btns {
    display: flex;
    flex-direction: row;
    justify-content: center;
    background: #FFFFFF;
    padding: 16px 0px;
    /* 蓝色阴影_常规 */
    box-shadow: 0px 4px 16px 0px rgba(17, 55, 143, 0.12);

    button:nth-child(1) {
        margin-right: 56px;
    }
}

.totalCount {
    font-size: 12px;
    font-weight: normal;
    line-height: 13px;
    letter-spacing: 0.08em;
    color: #8A9099;
    margin-left: 12px;
}

.tabProject {
    gap: 12px;

    .tab-item {
        height: 28px;
        min-width: 74px;
        display: flex;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        padding: 4px 12px;
        gap: 4px;
        align-self: stretch;
        border-radius: 14px;
        background: #FFFFFF;
        box-sizing: border-box;
        border: 1px solid #DFE2E6;
        text-align: justify;
        letter-spacing: 0.08em;
        /* text/text_4 */
        color: #8A9099;
    }

    .active {
        color: #006AFF;
        border: none;
        background: #F2F3F5;
    }
}


.addStore {
    margin-top: 12px;
}

.qqCode-wrap {
    margin-bottom: 14px;

    .labelImg {
        opacity: .7;
        margin-left: 8px;
    }

    .avatar-uploader {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        margin: 12px 0 8px;
    }

    .avatar-desc {
        text-align: left;
    }
}


.site-setting-wrap {
    width: 100%;
}

#siteMessage2 {
    margin: 12px 0;
}

.domain-wrap {
    .domain-item {
        margin-bottom: 10px;
    }


    .domain-item p:last-child {
        padding-left: 23px;
        color: #8A9099;
    }

    p {
        text-align: left;
        line-height: 18px;
        margin-bottom: 8px;
    }

    .domain-box {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }
}
</style>