ylrz_scrm_adminUI/src/views/qw/sopTemp/addAiChatTemp.vue

<template>
  <div class="app-container">
    <div style="margin: 30px;">sop规则【新客对话】模板</div>
    <div style="margin-top: 10px;margin-left: 50px;margin-right: 100px;margin-bottom: 60px;">
      <el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入模板标题"/>
        </el-form-item>

        <el-form-item label="状态">
          <el-radio-group v-model="form.status">
            <el-radio
              v-for="dict in statusOptions"
              :key="dict.dictValue"
              :label="dict.dictValue"
            >{{ dict.dictLabel }}
            </el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="推送方式">
          <el-radio-group v-model="form.sendType">
            <el-radio
              v-for="dict in sysQwSopType.filter(item => parseInt(item.dictValue) === 4)"
              :key="dict.dictValue"
              :label="parseInt(dict.dictValue)"
            >{{ dict.dictLabel }}
            </el-radio>
          </el-radio-group>
        </el-form-item>

        <!--        <el-form-item label="间隔天数" prop="gap">
                  <el-input-number v-model="form.gap" :min="1" label="间隔天数"></el-input-number>
                </el-form-item> -->

        <el-form-item label="排序" prop="sort">
          <el-input-number v-model="form.sort" :min="0" label="排序"></el-input-number>
        </el-form-item>

        <el-form-item label="规则" prop="setting">
          <el-timeline>
            <el-timeline-item
              :timestamp="'第'+(1+(form.gap*index))+'天'"
              :color="'#0bbd87'"
              placement="top"
              v-for="(item, index) in setting"
              :key="index"
              style="margin-top: 10px;">
              <el-row>
                <el-col :span="22">
                  <div style="background-color: #fbfbfb;padding: 15px; border: 1px solid #e6e6e6; margin-bottom: 20px;">
                    <el-form :model="item" label-width="80px">
                      <el-form-item label="规则">
                        <div v-for="(content, contentIndex) in item.content"
                             :key="contentIndex"
                             style="background-color: #fdfdfd;padding: 15px; border: 1px solid #e6e6e6; margin-bottom: 20px;">
                          <el-row>
                            <el-col :span="22">
                              <el-form :model="content" label-width="70px">
                                <!-- 第一天不显示时间选择 -->
                                <el-form-item label="时间" prop="time" v-if="index > 0">
                                  <el-time-picker
                                    class="custom-input"
                                    v-model="content.time"
                                    value-format="HH:mm"
                                    format="HH:mm"
                                    :picker-options="{ selectableRange: '00:00:00 - 23:59:59' }"
                                    placeholder="时间"
                                    style="width: 100px;height: 20px;">
                                  </el-time-picker>
                                </el-form-item>


                                <div v-for="(setList, setIndex) in content.setting"
                                     :key="setIndex"
                                     style="background-color: #fdfdfd; border: 1px solid #e6e6e6; margin-bottom: 20px;">
                                  <el-row>
                                    <el-col :span="22">
                                      <el-form :model="setList" label-width="70px">
                                        <el-form-item label="添加客服" prop="intervalTime" style="margin: 2%">
                                          <el-input-number
                                            v-model="setList.intervalTime"
                                            :min="1"
                                            :max="1440"
                                            style="width:100;margin-top: 10px;"
                                          >
                                          </el-input-number>
                                          <span class="tip">单位：分钟，最大1440分钟(24小时)</span>
                                        </el-form-item>
                                        <el-form-item label="内容" style="margin: 2%">
                                          <el-input
                                            v-model="setList.value"
                                            type="textarea"
                                            :rows="3"
                                            placeholder="内容"
                                            style="width: 90%;margin-top: 10px;"/>
                                        </el-form-item>
                                        <el-form-item label="交流状态" style="margin: 2%">
                                          <el-select v-model="setList.talkType" placeholder="更改交流状态" size="mini"
                                                     style=" margin-right: 10px;" clearable>
                                            <el-option label="非首次交流" value="非首次交流"></el-option>
                                            <el-option label="首次交流1" value="首次交流1"></el-option>
                                            <el-option label="首次交流2" value="首次交流2"></el-option>
                                            <el-option label="交流状态1" value="交流状态1"></el-option>
                                            <el-option label="交流状态2" value="交流状态2"></el-option>
                                            <el-option label="交流状态3" value="交流状态3"></el-option>
                                          </el-select>
                                        </el-form-item>
                                      </el-form>
                                    </el-col>
                                    <el-col :span="1" :offset="1">
                                      <i class="el-icon-delete"
                                         @click="delSetList(index,contentIndex,setIndex)"
                                         style="margin-top: 20px;"
                                         v-if="content.setting.length>1"></i>
                                    </el-col>
                                  </el-row>
                                </div>
                                <el-link type="primary"
                                         class="el-icon-plus"
                                         :underline="false"
                                         @click='addSetList(contentIndex,item.content)'>添加内容
                                </el-link>
                              </el-form>
                            </el-col>
                            <el-col :span="1" :offset="1">
                              <i class="el-icon-delete"
                                 @click="delContent(index,contentIndex)"
                                 style="margin-top: 20px;"
                                 v-if="item.content.length>1"></i>
                            </el-col>
                          </el-row>
                        </div>
                        <el-link type="primary"
                                 v-if="index > 0"
                                 class="el-icon-plus"
                                 :underline="false"
                                 @click='addContent(index)'>添加规则
                        </el-link>
                      </el-form-item>
                    </el-form>
                  </div>
                </el-col>
                <el-col :span="1" :offset="1">
                  <i class="el-icon-delete"
                     @click="delSetting(index)"
                     v-if="setting.length>1"></i>
                </el-col>
              </el-row>
            </el-timeline-item>
          </el-timeline>
          <!--          <el-link type="primary"
                             class="el-icon-plus"
                             :underline="false"
                             @click='addSetting()'>添加天数</el-link> -->
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="float: right;">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import {addSopTemp} from "@/api/qw/sopTemp";

export default {
  name: "AddAiChatTemp",
  data() {
    return {
      // 状态字典
      statusOptions: [],
      // 添加推送方式字典
      sysQwSopType: [],
      // 表单数据
      form: {
        name: null,
        setting: null,
        status: "1",
        sort: 1,
        gap: 1,
        sendType: 4, // AI对话类型,固定值
      },
      // 规则设置
      setting: [],
      // 表单校验
      rules: {
        name: [
          {required: true, message: '名称不能为空', trigger: 'blur'}
        ],
        status: [
          {required: true, message: '状态不能为空', trigger: 'blur'}
        ],
        sort: [
          {required: true, message: '排序不能为空', trigger: 'blur'}
        ],
        gap: [
          {required: true, message: '间隔天数不能为空', trigger: 'blur'}
        ]
      }
    };
  },
  created() {
    this.getDicts("sys_company_status").then(response => {
      this.statusOptions = response.data;
    });
    // 获取推送方式字典
    this.getDicts("sys_qw_sop_type").then(response => {
      this.sysQwSopType = response.data;
    });
    this.getList();
  },
  methods: {
    getList() {
      this.setting.push({
        name: null,
        content: [{
          type: 1,
          contentType: '1',
          setting: [{
            intervalTime: 5,
            contentType: '1',
            value: ""
          }]
        }]
      });
    },

    addSetList(contentIndex, content) {
      content[contentIndex].setting.push({
        intervalTime: 5,
        contentType: '1',
        value: ""
      });
    },

    delSetList(index, contentIndex, setIndex) {
      this.setting[index].content[contentIndex].setting.splice(setIndex, 1);
    },

    addContent(index) {
      this.setting[index].content.push({
        type: 1,
        contentType: '1',
        // 默认5分钟
        setting: [{
          intervalTime: 5,
          contentType: '1',
          value: ""
        }]
      });
    },

    delContent(index, contentIndex) {
      this.setting[index].content.splice(contentIndex, 1);
    },

    addSetting() {
      this.setting.push({
        name: null,
        content: [{
          type: 1,
          contentType: '1',
          setting: [{
            intervalTime: 5, // 默认5分钟
            contentType: '1',
            value: ""
          }]
        }]
      });
    },

    delSetting(index) {
      this.setting.splice(index, 1);
    },

    submitForm() {
      this.$refs["formRef"].validate(valid => {
        if (valid) {
          // 验证内容
          for (let day of this.setting) {
            for (let content of day.content) {
              if (content.time === undefined && this.setting.indexOf(day) > 0) {
                return this.$message.error("时间不能为空");
              }
              for (let set of content.setting) {
                if (!set.intervalTime) {
                  return this.$message.error("间隔时间不能为空");
                }
                if (!set.value) {
                  return this.$message.error("内容不能为空");
                }
              }
            }
          }

          this.form.setting = JSON.stringify(this.setting);
          addSopTemp(this.form).then(response => {
            this.$message.success("新增成功");
            window.location.replace('/qw/conversion/sopTemp')
            this.reset();
          });
        }
      });
    },

    cancel() {
      this.$router.push('/qw/conversion/sopTemp');
    }
  }
};
</script>

<style scoped>
.custom-input /deep/ .el-input__inner {
  height: 20px;
  text-align: center;
}

.custom-input /deep/ .el-input__icon {
  line-height: 10px;
}

.tip {
  color: #909399;
  font-size: 12px;
  margin-left: 10px;
}
</style>