acupuncture_admin/src/components/BatchProject.vue

<template>
    <div class="batch-wrap">
        <p class="flex siteMessage5_desc mb24"> <img src="@/assets/info_filled.svg" alt="">
            录入格式：1.请按照 “项目名称 空格 单次价格” 格式输入。2.每行一条数据， 回车 确认</p>
        <div class="content-wrap">
            <el-form :model="form" :rules="formRules">
                <GuipRadio v-model="form.groupType" class="radio-form" :options="groupOptions" label="分组形式" prop="language" />
                <GuipFormItem class="mb24 mt24" v-if="form.groupType==1" label="已有分组">
                    <div class="tabProject tabProject1 flex" slot="formDom" >
                        <div :class="['tab-item point', form.classify_id == item.id ? 'active' : '']" @click="selectTag(item)"
                            v-for="(item) in projectTagData" :key="item.name">{{ item.name }}</div>
                    </div>
                </GuipFormItem>
                <GuipFormItem v-if="form.groupType == 2" class="mb24 mt24" label="分组名称">
                    <GuipInput slot="formDom" ref="GuipInput" v-model="form.classify_name"
                        prop="classify_name" placeholder="请填写新增分组名称"/>
                </GuipFormItem>
                <GuipFormItem class=" form-special" label="录入项目">
                    <GuipTextarea slot="formDom" v-model="form.project_contents" prop="description" width="100%" height="262px"
                        autosize :placeholder="'例如：\n推拿 168\n针灸 100'" @change="getNotice"/>
                </GuipFormItem>
            </el-form>
        </div>
    </div>
</template>
<script>
import GuipRadio from '@/components/GuipRadio.vue';
import GuipTextarea from '@/components/GuipTextarea.vue';
import GuipInput from '@/components/GuipInput.vue';
import GuipFormItem from '@/components/GuipFormItem.vue';
export default {
    // 站点设置
    name: '',
    props: ['projectTagData'],
    components: {
        GuipRadio,
        GuipInput,
        GuipTextarea,
        GuipFormItem
    },
    data() {
        return {
            formRules: {
                classify_name: [
                    { required: true, message: '请输入', trigger: 'blur' }
                ],
            },
            form:{
                classify_name:'',
                groupType: '1',
                project_contents:'',
                classify_id:''
            },
            groupOptions: [
                { label: '归入已有分组', value: '1' },
                { label: '新增分组', value: '2' }, // 禁用选项
                // { label: '不分组', value: '3' },
            ],
        }
    },
    methods: {
        getNotice(e){
            // \n 换行符
            let str = e.replace('\n','')
            this.form.project_contents = str;
        },
        selectTag(item){
            this.form.classify_id = item.id
        },
        formReset(){
            this.form = {
                classify_name:'',
                groupType: '1',
                project_contents:'',
                classify_id:''
            }
        }
    },
}
</script>
<style lang="scss" scoped>
.batch-wrap {
    .siteMessage5_desc {
        border-radius: 4px;
        background: #F2F7FF;
        border: 1px solid #BFDAFF;
        padding: 8px 13px;
        margin-bottom: 32px;

        img {
            margin-right: 8px;
        }
    }

    .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;
            z-index: 2;
            border-radius: 14px;
            background: #FFFFFF;
            box-sizing: border-box;
            /* middle/middle_line_1 */
            border: 1px solid #DFE2E6;
            /* body/body 2_regular */
            font-family: Microsoft YaHei UI;
            font-size: 14px;
            text-align: justify;
            /* 浏览器可能不支持 */
            letter-spacing: 0.08em;
            /* text/text_4 */
            color: #8A9099;
        }

        .active {
            color: #006AFF;
            border: none;
            background: #F2F3F5;
        }
    }
    .tabProject1{
        width: 100%;
    }
    .form-special{
        align-items: flex-start;
    }
    ::v-deep .form-item-top{
        height: 38px;
    }
    ::v-deep .form-item1{
        gap: 12px;
    }
    .radio-form ::v-deep .el-form-item__label{
        margin-right: 12px;
    }

}
</style>