pbl-teacher-table/src/components/pages/aiAddCourse/aiDialog.vue

<template>
    <el-dialog title="提示词设置" :visible.sync="dialogVisibleAiD" :append-to-body="true" width="650px" :before-close="handleClose"
        class="dialog_diy">
        <div style="height: 100%;padding:15px">
            <div class="ai_nav">
                <span :class="{active: type == 1}">基础创建</span>
            </div>
            <div class="ai_detail" v-if="type == 1">
                <span class="title">{{text2 ? '默认的提示词1' : '默认的提示词'}}</span>
                <textarea rows="10" class="binfo_input binfo_textarea" cols v-model="text"
                      placeholder="请输入...."></textarea>
            </div>
            <div class="ai_detail" v-if="text2 && type == 1" style="margin-top: 10px;">
                <span class="title">默认的提示词2</span>
                <textarea rows="10" class="binfo_input binfo_textarea" cols v-model="text2"
                      placeholder="请输入...."></textarea>
            </div>
            <div class="ai_detail" v-if="text3 && type == 1" style="margin-top: 10px;">
                <span class="title">默认的提示词3</span>
                <textarea rows="10" class="binfo_input binfo_textarea" cols v-model="text3"
                      placeholder="请输入...."></textarea>
            </div>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="confirm" type="primary">确 定</el-button>
            <el-button @click="close">关 闭</el-button>
        </span>
    </el-dialog>
</template>
  
<script>

export default {
    props: {
        dialogVisibleAiD: {
            type: Boolean,
            default: false
        },
        aiText: {
            type: String,
        },
        aiText2: {
            type: String,
        },
        aiText3: {
            type: String,
        },
        clickType: {
            type: Number
        }
    },
    data() {
        return {
            type: 1,
            text: "",
            text2: "",
            text3: "",
        }
    },
    watch:{
        dialogVisibleAiD(newValue, oldValue) {
            if(newValue){
                this.text = JSON.parse(JSON.stringify(this.aiText))
                this.text2 = this.aiText2 ? JSON.parse(JSON.stringify(this.aiText2)) : ''
                this.text3 = this.aiText3 ? JSON.parse(JSON.stringify(this.aiText3)) : ''
                if(this.clickType == 2){
                    this.confirm();
                }
            }
        },
    },
    methods: {
        handleClose(done) {
            this.close()
            done();
        },
        close() {
            this.$emit('update:dialogVisibleAiD', false)
        },
        confirm(){
            this.$emit("aiConfirm",this.text,this.text2,this.text3);
            this.$emit('update:dialogVisibleAiD', false)
        }
    },
}
</script>
  
<style scoped>
.dialog_diy>>>.el-dialog {
    height: auto;
    margin: 15vh auto 0 !important;
}

.dialog_diy>>>.el-dialog__header {
    background: #454545 !important;
    padding: 15px 20px;
}

.dialog_diy>>>.el-dialog__body {
    height: calc(100% - 124px);
    box-sizing: border-box;
    padding: 0px;
}


.dialog_diy>>>.el-dialog__title {
    color: #fff;
}

.dialog_diy>>>.el-dialog__headerbtn {
    top: 19px;
}

.dialog_diy>>>.el-dialog__headerbtn .el-dialog__close {
    color: #fff;
}

.dialog_diy>>>.el-dialog__headerbtn .el-dialog__close:hover {
    color: #fff;
}


.dialog_diy>>>.el-dialog__body,
.dialog_diy>>>.el-dialog__footer {
    background: #fafafa;
}

.ai_detail > .binfo_input {
  width: 100%;
  margin: 0;
  padding: 12px 14px;
  display: block;
  min-width: 0;
  outline: none;
  box-sizing: border-box;
  background: none;
  border: none;
  border-radius: 4px;
  background: #fff;
  font-size: 16px;
  resize: none;
  font-family: "Microsoft YaHei";
  min-height: 48px;
  /* border: 1px solid #3682fc00; */
  border: 1.5px solid #cad1dc;
}

.ai_detail > .binfo_textarea {
  border: 1.5px solid #cad1dc;
  font-size: 16px;
  resize: none;
  /* background: #f6f6f6; */
  font-family: "Microsoft YaHei";
}

.ai_detail > .binfo_input:focus-visible {
  border: 1.5px solid #3681fc !important;
}


.ai_nav{
    font-size: 16px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}
.ai_nav > span{
    cursor: pointer;
}

.ai_nav > span + span{
    margin-left: 15px;
}
.ai_nav > span.active{
    color: #3681fc;
}

.ai_detail{
    display: flex;
    flex-direction: column;
}

.ai_detail > .title{
    margin-bottom: 5px;
}

</style>