ylrz_his_scrm_companyUI/src/components/H5/config-item/h5-chat-config-dialog.vue

<template>
  <div v-if="localDialog && localDialog.text " :class="visible?'dialog-config-active':'dialog-config'">
    <div class="question-section">
      <div class="section-label">提问</div>
      <el-input v-model="localDialog.text" placeholder="选择问题" style="width: 100%">
      </el-input>
    </div>

    <div class="answer-options" v-if="localDialog.options && localDialog.options.length > 0">
      <div class="section-label">回复</div><el-button
        type="text"
        class="config-button"
        @click="add">
        新增
      </el-button>

      <draggable v-model="localDialog.options" @end="">
        <div v-for="(option, index) in localDialog.options" :key="option.id || index" class="option-item">
          <div class="option-label">选项{{ index + 1 }}: <el-input v-model="option.text" placeholder="对话" />
            <br/>
            <br/>
            <el-input type="textarea" v-model="option.answer" placeholder="回复"></el-input>
            <el-button
              type="text"
              class="config-button"
              @click="del(index)">
              删除
            </el-button>
          </div>
        </div>
      </draggable>
    </div>
    <div class="answer-options" v-else>
      <el-button
        type="text"
        class="config-button"
        @click="add">
        新增
      </el-button>
    </div>

    <div class="action-buttons">
      <el-button type="primary" @click="saveAndReturn">保存并返回</el-button>
    </div>
  </div>
</template>

<script>
import draggable from 'vuedraggable'

export default {
  name: 'DialogConfig',
  components: { draggable },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    dialog: {
      type: Object,
      required: false,
      default: () => ({
        id: 2,
        sender: 'agent',
        text: '您的年龄？',
        options: [
          { id: 1, text: '45-55岁' },
          { id: 2, text: '55-60岁' },
          { id: 3, text: '60-65岁' },
          { id: 4, text: '65岁以上' }
        ],
        userSelection: null
      })
    },
    dialogIndex: {
      type: Number,
      required: false
    }
  },
  watch: {
    dialog: {
      immediate: true,
      handler(newVal) {
        this.localDialog = { ...newVal }
        console.log('localDialog', this.localDialog)
      }
    },
    visible: {
      immediate: true,
      handler(newVal) {
        this.$nextTick(()=>{
          // 隐藏通用表单
          if (newVal) {
            document.querySelector("#h5-config-common").style.display = "none";
          } else {
            document.querySelector("#h5-config-common").style.display = "block";
          }
        });
      }
    }
  },
  data() {
    return {
      localDialog: {
        options:[],
        ...this.dialog
      }
    }
  },
  methods: {
    del(index) {
      this.localDialog.options.splice(index, 1);
    },
    add() {
      if (!this.localDialog.options) {
        this.$set(this.localDialog, 'options', []);
      }
      this.localDialog.options.push({ text: '', answer: '' ,id: this.localDialog.options.length});
      console.log(this.localDialog)
    },
    saveAndReturn() {
      // this.$emit('update:dialog', this.localDialog);
      this.$emit('update:dialog', { ...this.localDialog });
      this.$emit('update:visible', false)
    }
  }
}
</script>

<style scoped>
.dialog-config {
  padding: 100px;
  visibility: hidden;
  display: none;
}

.dialog-config-active {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background-color: white;
}

.section-label {
  font-size: 14px;
  color: #606266;
  margin-bottom: 10px;
}

.question-section, .answer-options {
  margin-bottom: 25px;
  z-index: 99999;
  background-color: white;
}

.editor-content textarea {
  width: 100%;
  min-height: 100px;
  border: none;
  outline: none;
  resize: vertical;
}

.option-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #ebeef5;
}

.config-button {
  color: #409EFF;
}

.action-buttons {
  margin-top: 30px;
  text-align: center;
}
</style>