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

<template>
    <div>
        <div class="elist_title">
            <div style=" display: flex; flex-direction: row;align-items: center; margin: 20px 0; ">
                <div class="lineTitle clineTitle">评价设置</div>
                <div style="margin-left:auto;display: flex;">
                    <div class="r_pub_button_op" style="margin-left:10px;"
                        @contextmenu.prevent="openAiDialog(1)"
                        @click="openAiDialog(2)">{{ (eList && eList.length) ? '重新生成评价' : '生成评价' }}</div>
                </div>
            </div>
        </div>
        <div class="mbCss">
            <div class="pjCss" :style="{ width: isEvaFold ? 'calc(100% - 55%)' : 'calc(100% - 120px)', }">
                <div v-if="eList && eList.length" class="elist_input">
                    <div v-for="(eItem, eIndex) in eList" :key="eIndex" class="elist_input_box">
                        <div class="elist_inptu_text">
                            <span>素养：</span>
                            <input type="input" v-model="eItem.target" placeholder="填写目标"
                                style="width: calc(100% - 280px);" />
                            <el-switch @change="forceUpdate" class="rateSwitch" style="margin-left: auto;"
                                v-model="eItem.isai" active-color="#0061FF" active-text="AI评分"
                                inactive-text="" active-value="1" inactive-value="2">
                            </el-switch>
                        </div>
                        <div class="elist_inptu_text">
                            <span>评价标准：</span>
                            <input type="input" v-model="eItem.detail" placeholder="填写评价标准" />
                            <div class="remove" @click="
                                deletEList(
                                    eIndex
                                )
                                "></div>
                        </div>
                        <div class="elist_inptu_text" style="align-items: flex-start;"
                            v-loading="ruleLoading[itemTaskIndex] && ruleLoading[itemTaskIndex][eIndex]"
                            element-loading-text="小可正在努力生成中，请稍等...">
                            <span>评价细则：</span>
                            <div style="width: calc(100%);">
                                <div @click="openRule(itemTaskIndex, eIndex)" class="ruleBtn">{{ eItem.isrule ? '收起细则' : '展开细则' }}</div>
                                <div style="width: calc(100%);" class='op_task_box' v-if="eItem.isrule">
                                    <textarea v-autoHeight="68" rows="2" class="binfo_input binfo_textarea" cols v-model="eItem.rule" placeholder="请输入评价细则"></textarea>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
                <!-- <div class="eva_btn_box">
                    <div class="eva_btn_left_box">
                        <button class="c_pub_button_add pub_btn_eval_img" @click="addEList()">
                            添加
                        </button>
                    </div>
                </div> -->
            </div>
        </div>
    </div>

</template>

<script>
export default {
    data() {
        return {
            eList:[],
            isEvaFold: true
        }
    },
    methods: {
        openAiDialog() {
            
        },
        addEList(){

        },
        deletEList(){
            
        }
    },
}
</script>

<style scoped>
/* 评价样式 */
.elist_css {
  padding-bottom: 75px !important;
}

.elist_title {
  margin-bottom: 10px;
}

.elist_input {
  width: 100%;
}

.elist_input_box {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.elist_input_box+.elist_input_box {
  margin-top: 30px;
}

.elist_input .elist_input_box input {
  font: inherit;
  color: currentColor;
  width: 100%;
  /* max-width: calc(100% - 385px); */
  max-width: calc(100% - 150px);
  padding: 8px 14px;
  display: block;
  min-width: 0;
  outline: none;
  border: 1px solid rgba(0, 0, 0, 0.23);
  border-radius: 4px;
  box-sizing: border-box;
  background: #fff;
  margin: 0 20px 0 0;
}

.elist_input .elist_input_box span {
  height: 36px;
  line-height: 36px;
  color: rgb(82, 82, 82);
  min-width: 80px;
}

.elist_input .elist_input_box .remove {
  height: 20px;
  width: 20px;
  min-height: 20px;
  min-width: 20px;
  background-size: 100% 100%;
  background-position: unset;
  margin-left: 5px;
}

.elist_input_box>>>.el-rate {
  display: flex;
  height: 36px;
  align-items: center;
}

.elist_input_box .elist_inptu_text {
  width: 100%;
  display: flex;
  align-items: center;
  margin-top: 10px;
}

.elist_input_box .elist_inptu_text input {
  /* width: 500px; */
  width: 100%;
  max-width: unset;
}

.elist_input_box>>>.el-rate__icon {
  font-size: 24px;
}

.elist_btn {
  margin-top: 10px;
}

.lineTitle {
  /* margin-top: 15px; */
  width: 110px;
  font-size: 16px;
  display: flex;
  align-items: center;
  line-height: 20px;
}

.lineTitle::before {
  content: "";
  display: block;
  width: 3px;
  height: 20px;
  background: #0061ff;
  border-radius: 3px;
  margin: 0 5px 0 0;
}

.clineTitle::before {
  content: "";
  display: block;
  min-width: 10px;
  width: 10px;
  height: 10px;
  background: #0061ff;
  border-radius: 50%;
  margin: 0 5px 0 0;
}

.courseTop {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: calc(100% - 40px);
  margin: 0 auto;
  padding: 10px 0;
}

.stepsNav {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

.stepsWord {
  font-size: 18px;
  color: #fff;
  font-weight: bold;
  margin-left: auto;
  background: rgb(15, 126, 255);
  border-radius: 5px;
  padding: 3px 25px;
  box-sizing: border-box;
}

.stepBox {
  width: calc(100% - 40px);
  height: calc(100% - 50px);
  overflow: hidden;
  border-radius: 5px;
  margin: 0 auto;
}

.rightBox {
  width: calc(100%);
  background: #f0f2f5;
  /* border-radius: 10px; */
  overflow: auto;
  height: calc(100% - 150px);
  margin: 0 auto;
  position: relative;
  box-sizing: border-box;
}

.e_add_top {
  display: flex;
  justify-content: space-between;
  background: #fff;
  position: absolute;
  right: 20px;
  height: 50px;
  align-items: center;
}

.e_add_title2 {
  display: flex;
  align-items: center;
}

.e_add_title2 span {
  width: 40px;
}

.e_add_title {
  display: flex;
  align-items: center;
  color: #b8b8b8;
  font-size: 18px;
  position: relative;
  height: 40px;
}

.e_add_title span {
  margin-right: 10px;
}

.e_add_title .el_input {
  width: 300px;
}

.e_add_title>>>.el-input__inner {
  width: 400px;
}

.e_add_btn {}

.e_add_content {
  display: flex;
  width: 100%;
}

.e_add_list {
  background: #fff;
  height: 500px;
  width: 210px;
  position: relative;
  margin: 15px 5px 0 0;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}

.e_add_list_title {
  font-size: 20px;
  width: 100%;
  box-sizing: border-box;
  padding: 15px 40px;
  text-align: center;
  border-bottom: 1px solid #eaeaea;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 57px;
  background: #f6f6f6;
}

.e_add_list_title span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.e_add_list_title img {
  position: absolute;
  right: 15px;
  width: 25px;
  cursor: pointer;
  top: 50%;
  transform: translateY(-50%);
}

.e_add_list_body {
  height: calc(100% - 187px);
  overflow: auto;
}

.e_add_list_child {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-sizing: border-box;
  padding: 15px 40px;
  text-align: center;
}

.e_add_list_child span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
}

.e_add_list_child img {
  position: absolute;
  right: 10px;
  width: 21px;
  cursor: pointer;
  top: 50%;
  transform: translateY(-50%);
}

.e_add_list_child+.e_add_list_child {
  border-top: 1px solid #eaeaea;
}

.e_add_list_child .active {
  color: #409eff;
}

.e_add_list_btn {
  position: absolute;
  bottom: 0;
  height: 50px;
  background: rgb(120, 120, 254);
  width: 100%;
  color: #fff;
  font-size: 16px;
  text-align: center;
  line-height: 50px;
  cursor: pointer;
}

.e_add_list_detail {
  position: absolute;
  bottom: 0;
  height: 130px;
  background: rgb(120, 120, 254);
  width: 100%;
  color: #fff;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.e_add_list_detail textarea {
  height: 90%;
  width: 95%;
  border: none;
  resize: none;
  outline: none;
  padding: 5px;
  box-sizing: border-box;
}

.e_add_list_pbox {
  width: 100%;
}

.e_add_list_pbox_title {
  height: 50px;
  background: #fff;
  display: flex;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  padding: 0 20px;
  flex-direction: row;
  flex-wrap: wrap;
}

.mbCss {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  align-items: flex-start;
  justify-content: flex-start;
}

.pjCss {
  /* width: 42%; */
  width: calc(100% - 55%);
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
}

.e_box {
  /* display: flex; */
  flex-wrap: wrap;
  max-height: 500px;
  align-items: flex-start;
  overflow: auto;
  width: 100%;
}

.e_card {
  border: 1px solid #ccc;
  background: #fff;
  margin-right: 20px;
  width: 270px;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 5px;
  margin-top: 10px;
  text-align: center;
}

.e_card_picture {
  margin: 10px 0;
}

.e_card_picture>img {
  width: 50px;
}

.e_card_name {
  width: 100%;
  padding: 0 10px;
  box-sizing: border-box;
  margin-bottom: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.e_card_time {
  width: 100%;
  padding: 0 10px;
  box-sizing: border-box;
  font-size: 15px;
  color: #c3c3c3;
  margin-bottom: 10px;
}

.e_card_btn {
  height: 40px;
  display: flex;
  align-items: center;
  width: 100%;
  background: rgb(244, 244, 244);
}

.e_card_btn:hover {
  background: rgb(221 221 221);
}

.e_card_btn span {
  flex: 1 1 auto;
  text-align: center;
  cursor: pointer;
}

.addEva {
  border: 1px solid #ccc;
  background: #fff;
  margin-right: 20px;
  width: 270px;
  height: 149px;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 5px;
  margin-top: 10px;
  text-align: center;
  cursor: pointer;
  justify-content: center;
}

.addEva>img {
  width: 50px;
  object-fit: cover;
}
</style>