postdischarge-ui/src/views/system/specialDiseaseNode/index.vue

<template>
  <div class="container">
    <el-descriptions title="编辑主路径" />
    <div class="title">
      <el-tag>主路径</el-tag>
      <div>
        {{ updata.routeName }}
      </div>
      <div class="select">
        <span> 适用范围 </span>
        <el-select v-model="updata.suitRange" placeholder="请选择" @change="changeoptions" disabled>
          <el-option v-for="item in options" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue">
          </el-option>
        </el-select>
      </div>
    </div>
    <div class="list">
      <div class="timelist">
        <div class="timetitle">
          管理路径节点({{ lists.length }})
          <i class="el-icon-circle-plus-outline" @click="addlist"></i>
        </div>
        <el-timeline>
          <el-timeline-item v-for="(item, index) in lists" :key="index" :color="listindex == index ? '#409EFF' : ''">
            <div class="top">
              <div class="toptop">
                <el-select v-model="item.routeNodeName" style="width: 100px">
                  <el-option v-for="item in parentDictCodelist" :key="item.dictValue" :label="item.dictLabel"
                    :value="item.dictValue">
                  </el-option>
                </el-select>
                <el-input v-model="item.routeNodeDay" type="number" style="width: 70px" :min="0"></el-input>
                <span>天</span>
              </div>
              <div>
                <i class="el-icon-delete" @click="delitem(item, index)"></i>
                <i class="el-icon-circle-plus-outline" @click="additem(item)"></i>
              </div>
            </div>
            <el-card v-for="(uitem, uindex) in item.list" :key="uitem.id"
              @click.native="bottomclickevent(uitem, index, uindex, item)"
              :class="listindex == index && itemindex == uindex ? 'cards' : ''">
              <h3 style="height: 20px">{{ uitem.taskTypeName }}</h3>
              <el-tag v-if="uitem.routeCheckStatus == 'AGREE'" class="routeCheckStatus">已审核</el-tag>
              <el-tag v-else-if="uitem.routeCheckStatus == 'DISAGREE'" type="danger"
                class="routeCheckStatus">不同意</el-tag>
              <el-tag v-else type="warning" class="routeCheckStatus">未审核</el-tag>
              <p style="height: 16px">{{ uitem.taskSubdivisionName }}</p>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </div>
      <div class="texts">
        <div class="topform">
          <el-form ref="form" :inline="true" :model="form" class="form">
            <el-form-item label="任务类型" prop="">
              <el-select v-model="form.taskType" style="width: 150px" @change="changeTaskType">
                <el-option v-for="item in selectTaskTypeList" :key="item.taskTypeCode" :label="item.taskTypeName"
                  :value="item.taskTypeCode">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="任务细分" prop="">
              <el-select v-model="form.taskSubdivision" style="width: 150px" @change="changetaskSubdivision">
                <el-option v-for="item in taskPartitionList" :key="item.taskPartitionCode"
                  :label="item.taskPartitionName" :value="item.taskPartitionCode">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="任务节点类型" prop="">
              <el-select v-model="form.taskNodeType" style="width: 150px">
                <el-option v-for="item in taskNodeTypeList" :key="item.id" :label="item.name" :value="item.code">
                </el-option>
              </el-select>
            </el-form-item>
            <!-- <el-form-item label="任务状态" prop="">
              <el-select v-model="form.taskStatus" style="width: 150px">
                <el-option v-for="item in taskStatusDictList" :key="item.id" :label="item.taskStatusName"
                  :value="item.taskStatusCode">
                </el-option>
              </el-select>
            </el-form-item> -->
            <el-form-item label="二级分类描述" prop="">
              <el-input v-model="form.secondClassifyDescribe" style="width: 110px" disabled></el-input>
            </el-form-item>
            <el-form-item label="执行时间" prop="">
              <el-time-select v-model="form.executionTime" style="width: 120px" placeholder="选择时间" disabled>
              </el-time-select>
            </el-form-item>
            <el-form-item label="问卷库模板选择" prop="" v-if="form.taskNodeType == 'QUESTIONNAIRE_SCALE'">
              <question @on-template="questionontemplate" :templateId="form.templateId" :node="form.phoneDialMethod"
                :templateName="form.templateName"></question>
            </el-form-item>
            <span style="display: inline-block; width: 10px"
              v-if="form.taskNodeType == 'QUESTIONNAIRE_SCALE' && form.templateId">
              <el-button @click.native="looklist">预览</el-button>
            </span>
            <el-form-item label="开启人工随访" v-if="form.taskNodeType == 'QUESTIONNAIRE_SCALE'" style="margin-left: 75px">
              <el-switch v-model="form.phoneDialMethod" active-color="#13ce66" active-value="COMMON"
                @change="changephoneDialMethodtwo" inactive-value="AI">
              </el-switch>
            </el-form-item>
            <el-form-item label="宣教库模板选择" prop="" v-if="form.taskNodeType == 'PROPAGANDA_ARTICLE'">
              <propaganda @on-template="propagandaontemplate" :templateId="form.templateId"
                :templateName="form.templateName"></propaganda>
            </el-form-item>
            <span style="display: inline-block; width: 10px" v-if="
              form.taskNodeType == 'PROPAGANDA_ARTICLE' && form.templateId
            ">
              <el-button @click="imagepreviews">预览</el-button>
            </span>
          </el-form>
        </div>
        <!-- 宣教 -->
        <el-dialog title="宣教预览" :visible.sync="imageScriptpreviews" width="60%">
          <div class="imageScriptpreviews" v-if="
            formview &&
            form.taskNodeType == 'PROPAGANDA_ARTICLE' &&
            form.templateId
          ">
            <div class="titletop">文章模板:{{ formview.propagandaTitle }}</div>
            <div class="bodytop">
              <div class="titledata">{{ formview.propagandaTitle }}</div>
              <div>
                <img :src="baseUrl + formview.propagandaCoverPath" alt="" />
                <div class="know">知识卡片</div>
                <div class="knowlist">
                  <Editorxj v-model="formview.propagandaContent" :min-height="192" />
                </div>
              </div>
            </div>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="imageScriptpreviews = false">关闭</el-button>
          </span>
        </el-dialog>
        <!-- 问卷 -->
        <el-dialog title="问卷预览" :visible.sync="lookquestionlist" width="40%">
          <questionopennew :lookitemnew="lookitemnew"></questionopennew>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="lookquestionlist = false">关闭</el-button>
          </span>
        </el-dialog>
        <div class="bottomform">
          <wangeditor v-show="form.taskNodeType != 'QUESTIONNAIRE_SCALE' &&
            form.taskNodeType != 'PROPAGANDA_ARTICLE' &&
            form.taskNodeType != 'PHONE_OUTBOUND'
            " style="width: 100%" :nodeContent="form.nodeContent" :taskPartitionDictId="taskPartitionDictId"
            :taskSubdivision="form.taskSubdivision" :specialDiseaseNodeId="form.specialDiseaseNodeId"
            @on-nodeContent="onNodeContent" ref="wangeditor" />

          <div class="card" v-show="form.taskNodeType != 'PHONE_OUTBOUND'">
            <div class="flex">
              <div class="pushMethod">
                推送方式：
                <span> 短信 </span>
              </div>
              <div class="pushMethod">
                模板：
                <message @on-template="messageontemplate" :templateId="form.messageTemplateId"
                  :templateName="form.messageTemplateName"></message>
              </div>
              <div class="pushMethod">
                <el-switch v-model="form.messagePushSign" active-color="#13ce66" active-value="1" inactive-value="0">
                </el-switch>
              </div>
            </div>
            <!-- <div class="flextwo">
              <div class="text">短信预览：</div>
              <el-input class="textarea" v-model="form.messagePreview" disabled></el-input>
            </div> -->
          </div>
          <div class="card" v-show="form.taskNodeType != 'PHONE_OUTBOUND'">
            <div class="flex">
              <div class="pushMethod">
                推送方式：
                <span> 公众号 </span>
              </div>
              <div class="pushMethod">
                模板：
                <span>
                  <officialAccount @on-template="officialAccountontemplate" :templateId="form.officialTemplateId"
                    :templateName="form.officialTemplateName">
                  </officialAccount>
                </span>
              </div>
              <div class="pushMethod">
                <el-switch v-model="form.officialPushSign" active-color="#13ce66" active-value="1" inactive-value="0">
                </el-switch>
              </div>
            </div>
            <!-- <div class="flextwo">
              <div class="text">提醒内容：</div>
              <el-input v-model="form.officialRemindContent" class="textarea" disabled></el-input>
            </div> -->
          </div>
          <div class="card" v-show="form.taskNodeType != 'PHONE_OUTBOUND'">
            <div class="flex">
              <div class="pushMethod">
                推送方式：
                <span> 小程序 </span>
              </div>
              <div class="pushMethod">
                模板：
                <span>
                  <miniProgram @on-template="miniProgramtemplate" :templateId="form.appletTemplateId"
                    :templateName="form.appletTemplateName">
                  </miniProgram>
                </span>
              </div>
              <div class="pushMethod">
                <el-switch v-model="form.appletPushSign" active-color="#13ce66" active-value="1" inactive-value="0">
                </el-switch>
              </div>
            </div>
            <!-- <div class="flextwo">
              <div class="text">提醒内容：</div>
              <el-input v-model="form.appletRemindContent" class="textarea" disabled></el-input>
            </div>
            <div class="flextwo">
              <div class="text">提示说明：</div>
              <el-input v-model="form.appletPromptDescription" class="textarea" disabled></el-input>
            </div> -->
          </div>
          <div class="card" style="margin-top: -30px" v-show="form.taskNodeType == 'PHONE_OUTBOUND'">
            <div class="flex">
              <div class="pushMethod">
                推送方式：
                <span>
                  <el-radio-group v-model="form.phoneDialMethod" @change="changephoneDialMethod">
                    <el-radio label="COMMON">人工电话</el-radio>
                    <el-radio label="AI">自动外呼</el-radio>
                  </el-radio-group>
                </span>
              </div>
            </div>
            <div class="flexs">
              <div class="pushMethods">
                话术模板：
                <span :class="form.templateId && form.phoneDialMethod == 'COMMON' ? 'spanname' : ''">
                  <scripts @on-template="messageontemplateword" :templateId="form.phoneTemplateId"
                    :node="form.phoneDialMethod" :templateName="form.phoneTemplateName"></scripts>
                </span>
                <span style="display: inline-block; width: 10px" v-if="form.phoneTemplateId">
                  <el-button @click="look">预览</el-button>
                </span>
                <!-- <br/> -->
              </div>
              <!-- <div class="pushMethod" v-if="form.phoneDialMethod == 'COMMON' || !form.phoneDialMethod">
                问卷模板：
                <span :class="form.phoneTemplateId ? 'spanname' : ''">
                  <question @on-template="questionontemplate" :templateId="form.templateId"
                    :templateName="form.templateName"></question>
                </span>
                <span style="display: inline-block; width: 10px" v-if="form.templateId">
                  <el-button @click="lookquestion">预览</el-button>
                </span>
              </div> -->
              <!-- <div class="pushMethod">
                <el-switch
                  v-model="form.phonePushSign"
                  active-color="#13ce66"
                  active-value="1"
                  inactive-value="0"
                >
                </el-switch>
              </div> -->
            </div>
            <div class="flex">
              <div class="pushMethod">
                重拨次数：
                <span>
                  <el-select v-model="form.phoneRedialTimes" style="width: 110px" @change="changephoneRedialTimes">
                    <el-option v-for="item in optionslistS" :key="item.dictValue" :label="item.dictLabel"
                      :value="item.dictValue">
                    </el-option>
                  </el-select>
                </span>
              </div>
              <div class="pushMethod">
                时间间隔(分)：
                <span>
                  <el-input v-model.number="form.phoneTimeInterval" oninput="value=value.replace(/[^\d]/g,'')"
                    style="width: 100px">
                    <!-- <el-option
                      v-for="item in optionslistS"
                      :key="item.dictValue"
                      :label="item.dictLabel"
                      :value="item.dictValue"
                    >
                    </el-option> -->
                  </el-input>
                </span>
              </div>
              <div class="pushMethod">
                短信提醒：
                <el-select v-model="form.phoneMessageRemind" style="width: 150px">
                  <el-option v-for="item in optionslist" :key="item.dictValue" :label="item.dictLabel"
                    :value="item.dictValue">
                  </el-option>
                </el-select>
              </div>
              <div class="pushMethod">
                短信模板：
                <span :class="form.phoneMessageRemind == 'NOT_SEND_MESSAGE'
                  ? 'spanname'
                  : ''
                  ">
                  <message style="width: 200px" @on-template="messageontemplateMESSAGE"
                    :templateId="form.phoneMessageTemplateId" :templateName="form.phoneMessageTemplateName"></message>
                </span>
              </div>
            </div>
            <!-- 话术模板内容 -->
            <el-dialog title="话术预览" :visible.sync="lookNodeContent" width="90%">
              <Scriptpreview :phoneNodeContent="phoneNodeContent"></Scriptpreview>
              <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="lookNodeContent = false">关闭</el-button>
              </span>
            </el-dialog>
            <!-- 问卷模板内容 -->
            <el-dialog title="问卷预览" :visible.sync="lookquestionname" width="40%">
              <questionopennew :lookitemnew="lookitemnew"></questionopennew>
              <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="lookquestionname = false">关闭</el-button>
              </span>
            </el-dialog>
          </div>
        </div>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="TemporaryStorage">暂 存</el-button>
      <el-button type="primary" @click="dialogVisible = true" v-if="form.specialDiseaseNodeId">审核完成 {{ agreeNumber ?
        agreeNumber : "0" }} /
        {{ totalNumber ? totalNumber : "0" }}</el-button>
    </div>
    <el-dialog title="提交审核完成" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
      <el-form ref="routeform" :model="routeform" label-width="120px" :rules="rules">
        <el-form-item label="节点审核状态" prop="routeCheckStatus">
          <el-radio v-model="routeform.routeCheckStatus" label="AGREE">同意</el-radio>
          <el-radio v-model="routeform.routeCheckStatus" label="DISAGREE">不同意</el-radio>
        </el-form-item>
        <div class="txxt">
          <el-form-item label="节点审核备注">
            <el-input type="textarea" :rows="2" placeholder="请输入节点审核备注" v-model="routeform.routeCheckRemark">
            </el-input>
          </el-form-item>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="auditing">确 定</el-button>
        <el-button @click="handleClose">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import questionopennew from "../components/questionopennew.vue";
import Editorxj from "../Editorxj/index.vue";
import Scriptpreview from ".././components/Scriptpreviewopen.vue";
import { questionname } from "@/api/system/taskExecuteRecord";
import { getPropaganda } from "@/api/manage/propaganda";
import wangeditor from "../components/wangEditor.vue";
import question from "../components/question.vue";
import message from "../components/message.vue";
import scripts from "../components/script.vue";
import propaganda from "../components/propaganda.vue";
import officialAccount from "../components/officialAccount.vue";
import miniProgram from "../components/miniProgram.vue";
import {
  selectTaskTypeList,
  taskPartitionList,
  taskStatusDictList,
  specialDiseaseNode,
  selectSpecialDisease,
  updateRouteCheckStatus,
  list,
} from "@/api/system/specialDiseaseNode";
import { getAgencytype } from "@/api/system/agency";

export default {
  components: {
    wangeditor,
    question,
    propaganda,
    message,
    scripts,
    officialAccount,
    miniProgram,
    Scriptpreview,
    questionopennew,
    Editorxj,
  },
  name: "SpecialDiseaseNode",
  data() {
    return {
      formview: {},
      lookquestionname: false,
      lookquestionlist: false,
      lookNodeContent: false,
      imageScriptpreviews: false,
      lookitemnew: {},
      baseUrl: process.env.VUE_APP_BASE_API,
      showquestion: false,
      phoneNodeContent: "",
      optionslist: [],
      optionslistS: [],
      value: "",
      options: [],
      dialogVisible: false,
      routeform: {
        routeCheckStatus: null,
        routeCheckRemark: "",
      },
      rules: {
        routeCheckStatus: [
          { required: true, message: "请选择节点审核状态", trigger: "change" },
        ],
      },
      totalNumber: 0,
      agreeNumber: 0,
      updata: {
        specialDiseaseRouteId: "",
        suitRange: "",
        routeName: "",
        specialDiseaseNodeList: [],
      },
      form: {
        nodeContent: "<p></p>",
        templateId: "",
        templateName: "",
        taskType: "",
        taskSubdivision: "",
        taskSubdivisionName: "",
        taskStatus: "",
        secondClassifyDescribe: "",
        executionTime: "",
        appletPushSign: "0",
        officialPushSign: "0",
        messagePushSign: 0,
        taskNodeType: "",
        officialRemindContent: "",
        messagePreview: "",
        appletRemindContent: "",
        appletPromptDescription: "",
        taskNodeType: "",
        phoneDialMethod: "",
        phoneMessageRemind: "",
        phoneTimeInterval: "",
        phoneRedialTimes: "",
      },
      itemindex: 0,
      listindex: 0,
      lists: [],
      value: "",
      input: "",
      //任务类型
      selectTaskTypeList: [],
      //任务状态
      taskStatusDictList: [],
      //任务细分
      taskPartitionList: [],
      parentDictCode: "",
      parentDictCodelist: [],
      taskPartitionDictId: "",
      taskNodeTypeList: [
        {
          name: "电话外呼",
          code: "PHONE_OUTBOUND",
        },
        {
          name: "问卷量表",
          code: "QUESTIONNAIRE_SCALE",
        },
        {
          name: "宣教文案",
          code: "PROPAGANDA_ARTICLE",
        },
        {
          name: "文字提醒",
          code: "TEXT_REMIND",
        },
      ],
    };
  },
  created() {
    this.infolist();
    this.infolistword();
    this.infolistMESSAGE();
  },
  beforeDestroy() {
    localStorage.removeItem("wangeditorlist");
  },
  watch: {
    "form.phoneMessageRemind": {
      handler(newValue, oldValue) {
        if (newValue == "NOT_SEND_MESSAGE") {
          this.form.phoneMessageTemplateId = "";
          this.form.phoneMessageTemplateName = "";
        }
      },
      deep: true,
    },
    "form.phoneTemplateId": {
      handler(newValue, oldValue) {
        // if (newValue == "NOT_SEND_MESSAGE") {
        this.form.phoneTemplateId = newValue;
        // this.form.phoneMessageTemplateName = "";
        // }
      },
      deep: true,
      // phoneTemplateId
    },
  },
  mounted() { },
  methods: {
    //重拨次数
    changephoneRedialTimes(e) {
      if (
        this.optionslistS.find((el) => el.dictValue == e)?.dictLabel != "不重拨"
      ) {
        this.form.phoneTimeInterval = 30;
      } else {
        this.form.phoneTimeInterval = "";
      }
    },
    // 问卷库模板选择
    looklist() {
      this.lookquestionlist = true;
    },
    // 预览问卷
    lookquestion() {
      this.lookquestionname = true;
    },
    // 宣教预览
    imagepreviews() {
      this.imageScriptpreviews = true;
    },
    // 预览话术图
    look() {
      this.lookNodeContent = true;
    },
    changephoneDialMethodtwo() {
      this.form.templateId = "";
      this.form.templateName = "";
      this.form.phoneTemplateId = "";
      this.form.phoneTemplateName = "";
      this.lookitemnew = "";
    },
    // 切换人工和自动
    changephoneDialMethod(e) {
      if (e == "AI") {
        // this.form.templateId=''
        // 清空问卷id和名字
        this.form.phoneTemplateId = "";
        this.form.phoneTemplateName = "";
        // 清空话术和问卷
        // this.phoneNodeContent = "";
        this.lookitemnew = "";
      } else if (e == "COMMON") {
        // 清空问卷id话术id和对应名字
        this.form.templateId = "";
        this.form.templateName = "";
        this.form.phoneTemplateId = "";
        this.form.phoneTemplateName = "";
        // 清空话术和问卷
        // this.phoneNodeContent = "";
        this.lookitemnew = "";
      }
    },
    infolistword() {
      var dictType = "text_message_remind";
      getAgencytype(dictType).then((res) => {
        this.optionslist = res.data;
        // this.taskinfo();
      });
    },
    infolistMESSAGE() {
      var dictType = "redial_times";
      getAgencytype(dictType).then((res) => {
        this.optionslistS = res.data;
        // this.taskinfo();
      });
    },
    changeoptions(e) {
      this.parentDictCode = this.options.find(
        (el) => el.dictValue == e
      )?.dictCode;
      this.changelisy();
    },
    changelisy() {
      list(this.parentDictCode).then((res) => {
        this.parentDictCodelist = res.rows;
      });
    },
    infolist() {
      var dictType = "suit_range";
      getAgencytype(dictType).then((res) => {
        this.options = res.data;
        this.taskinfo();
      });
    },
    // 回显
    info() {
      const loading = this.$loading({
        lock: true,
        text: "数据加载中",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      this.lists = [];
      if (this.$route.query) {
        this.updata.suitRange = this.$route.query.suitRange;
        this.parentDictCode = this.options.find(
          (el) => el.dictValue == this.updata.suitRange
        )?.dictCode;
        list(this.parentDictCode).then((res) => {
          this.parentDictCodelist = res.rows;
          res.rows.forEach((e) => {
            this.lists.forEach((el) => {
              el.routeNodeName = e.dictValue;
            });
          });
        });
        this.updata.routeName = this.$route.query.routeName;
        this.updata.specialDiseaseRouteId = this.$route.query.id;
        selectSpecialDisease(this.$route.query.id).then((res) => {
          this.agreeNumber = res.data.agreeNumber;
          this.totalNumber = res.data.totalNumber;
          res.data.specialDiseaseNodeList.forEach((e) => {
            // if (e.taskNodeType == 'PHONE_OUTBOUND') {
            //   e.taskSubdivisionName = e.taskSubdivisionName + '(电话外呼)'
            // } else if (e.taskNodeType == 'QUESTIONNAIRE_SCALE') {
            //   e.taskSubdivisionName = e.taskSubdivisionName + '(问卷量表)'
            // } else if (e.taskNodeType == 'PROPAGANDA_ARTICLE') {
            //   e.taskSubdivisionName = e.taskSubdivisionName + '(宣教文案)'
            // } else if (e.taskNodeType == 'TEXT_REMIND') {
            //   e.taskSubdivisionName = e.taskSubdivisionName + '(文字提醒)'
            // }
            if (e.taskNodeType == "PHONE_OUTBOUND") {
              this.phoneNodeContent = e.flowScheme;
            }
            if (e.messagePushSign) {
              e.messagePushSign = "" + e.messagePushSign;
            }
            if (e.officialPushSign) {
              e.officialPushSign = "" + e.officialPushSign;
            }
            if (e.appletPushSign) {
              e.appletPushSign = "" + e.appletPushSign;
            }
            if (e.phonePushSign) {
              e.phonePushSign = "" + e.phonePushSign;
            }
          });
          this.lists = this.handleData(
            res.data.specialDiseaseNodeList,
            "routeNodeDay",
            "routeNodeName"
          );
          this.form = this.lists[0].list[0];
          // 宣教模板回显
          if (this.form.taskNodeType == "PROPAGANDA_ARTICLE" && this.form.templateId) {
            getPropaganda(this.form.templateId).then((response) => {
              this.formview = response.data;
            });
          } else if (this.form.templateId && this.form.taskNodeType == "QUESTIONNAIRE_SCALE") {
            // 问卷模板回显
            questionname(this.form.templateId).then((res) => {
              this.lookitemnew = res.data;
            });
          }
          if (this.form.taskType) {
            this.changeTaskType(this.form.taskType, this.form.taskSubdivision);
          }
        });
        loading.close();
      } else {
        this.lists.push({
          routeNodeName: "",
          routeNodeDay: "",
          list: [
            {
              nodeContent: "<p></p>",
              templateId: "",
              templateName: "",
              taskType: "",
              taskSubdivision: "",
              taskSubdivisionName: "",
              taskStatus: "",
              secondClassifyDescribe: "",
              executionTime: "",
              appletPushSign: "0",
              officialPushSign: "0",
              messagePushSign: "0",
              messagePreview: "",
              officialRemindContent: "",
              taskNodeType: "",
              appletRemindContent: "",
              appletPromptDescription: "",
              taskNodeType: "",
              phoneDialMethod: "",
              phoneMessageRemind: "",
              phoneTimeInterval: "",
              phoneRedialTimes: "",
            },
          ],
        });
        this.form = this.lists[0].list[0];
        loading.close();
      }
    },
    handleData(list, key, keytwo) {
      //得到数据的主键列表
      let keysArr = list.map((item) => {
        return {
          routeNodeDay: item[key],
          routeNodeName: item[keytwo],
        };
      });
      let array = keysArr.filter(
        (item, index, arr) =>
          index ===
          arr.findIndex(
            (ite) =>
              ite.routeNodeDay == item.routeNodeDay &&
              ite.routeNodeName == item.routeNodeName
          )
      );
      // for (var i = 0; i < keysArr.length; i++) {
      //     for (var j = i + 1; j < keysArr.length; j++) {
      //         if (keysArr[i].routeNodeDay == keysArr[j].routeNodeDay && keysArr[i].routeNodeName == keysArr[j].routeNodeName) {
      //             keysArr.splice(j, 1);
      //             j--;
      //         }
      //     }
      // }
      let keys = [...new Set(array)];
      let newList = keys.map((item) => {
        return {
          //这里写新的 数据结构 如下是整体复制
          routeNodeDay: item[key],
          routeNodeName: item[keytwo],
          list: list.filter(
            (i) => i[key] == item[key] && i[keytwo] == item[keytwo]
          ),
        };
      });
      return newList;
    },
    //wangeditor传值
    onNodeContent(item) {
      if (item.nodeContent) {
        this.form.nodeContent = item.nodeContent;
        var abc = new RegExp("<br>", "g");
        var bbb = this.form.nodeContent.replace(abc, "");
        this.form.nodeContent = bbb;
      }
      let wangeditorlist = [];
      if (localStorage.getItem("wangeditorlist")) {
        wangeditorlist = JSON.parse(localStorage.getItem("wangeditorlist"));
        wangeditorlist = wangeditorlist.filter(
          (e) =>
            e.taskSubdivision != item.taskSubdivision &&
            e.specialDiseaseNodeId != item.specialDiseaseNodeId
        );
      }
      wangeditorlist.push(item);
      localStorage.setItem("wangeditorlist", JSON.stringify(wangeditorlist));
    },
    //小程序传值
    miniProgramtemplate(item) {
      this.form.appletTemplateId = item.templateId;
      this.form.appletTemplateName = item.templateName;
      this.form.appletRemindContent = item.templateContent;
    },
    //短信传值
    messageontemplate(item) {
      this.form.messageTemplateId = item.templateId;
      this.form.messageTemplateName = item.templateName;
      this.form.messagePreview = item.templateContent;
    },
    // 短信
    messageontemplateMESSAGE(item) {
      this.form.phoneMessageTemplateId = item.templateId;
      this.form.phoneMessageTemplateName = item.templateName;
      this.form.messagePreview = item.templateContent;
    },
    // 话术
    messageontemplateword(item) {
      this.form.phoneTemplateId = item.templateId;
      this.form.phoneTemplateName = item.templateName;
      this.form.robotPublishId = item.robotPublishId;
      this.lists[this.listindex].list[this.itemindex].scriptInfoId =
        item.scriptInfoId;
      this.lists[this.listindex].list[this.itemindex].phoneTemplateId =
        item.phoneTemplateId;
      // this.form.messagePreview = item.templateContent;
      this.phoneNodeContent = item.phoneNodeContent;
    },
    //公众号传值
    officialAccountontemplate(item) {
      this.form.officialTemplateId = item.templateId;
      this.form.officialTemplateName = item.templateName;
      this.form.officialRemindContent = item.templateContent;
    },
    //暂存
    async TemporaryStorage() {
      console.log(this.form)
      if (this.form.taskNodeType != "QUESTIONNAIRE_SCALE" && this.form.taskNodeType != "PROPAGANDA_ARTICLE") {
        this.$refs.wangeditor.emit();
      }
      await this.$confirm("确认暂存时将过滤掉部分内容未填写完成的子节点,是否确认暂存？", "提示", { confirmButtonText: "确认", cancelButtonText: "取消", }).then(() => {
        const loading = this.$loading({
          lock: true,
          text: "暂存中",
          spinner: "el-icon-loading",
          background: "rgba(0, 0, 0, 0.7)",
        });
        this.updata.specialDiseaseNodeList = [];
        this.lists.forEach((e) => {
          e.list.length > 0 ? e.list.forEach((el) => {
            el.routeNodeDay = e.routeNodeDay;
            el.routeNodeName = e.routeNodeName;
            el.phonePushSign = null;
            if (el.phoneDialMethod == "COMMON" && el.templateId) {
              el.phonePushSign = "1";
            } else if (el.phoneDialMethod == "AI" && el.templateId) {
              el.phonePushSign = "1";
            } else if (el.phoneDialMethod == "COMMON" && el.phoneTemplateId) {
              el.phonePushSign = "1";
            } else if (el.phoneDialMethod == "AI" && el.phoneTemplateId) {
              el.phonePushSign = "1";
            }
            this.updata.specialDiseaseNodeList.push(el);
          }) : "";
        });
        // this.updata.specialDiseaseNodeList =
        //   this.updata.specialDiseaseNodeList.filter(
        //     (e) =>
        //       !e.routeNodeDay &&
        //       !e.routeNodeName &&
        //       !e.taskType &&
        //       !e.taskSubdivision &&
        //       !e.taskStatus
        //   );
        // return;
        this.updata.specialDiseaseNodeList.forEach((ele) => {
          if (ele.taskNodeType == "PHONE_OUTBOUND") {
            if (ele.phoneDialMethod == null || ele.phoneDialMethod == "") {
              loading.close();
              return this.$message.error("请先选择推送方式");
            } else if (ele.phoneTemplateId == null || ele.phoneTemplateId == "") {
              loading.close();
              return this.$message.error("请先选择话术模板");
            }
          }
        });
        specialDiseaseNode(this.updata).then((res) => {
          let wangeditorlist = [];
          if (localStorage.getItem("wangeditorlist")) {
            wangeditorlist = JSON.parse(localStorage.getItem("wangeditorlist"));
            wangeditorlist = wangeditorlist.filter((e) => e.specialDiseaseNodeId == this.form.specialDiseaseNodeId);
            localStorage.setItem("wangeditorlist", JSON.stringify(wangeditorlist));
          }
          this.info();
          loading.close();
          this.$modal.msgSuccess("暂存成功!");
          this.listindex = 0;
          this.itemindex = 0;
        });
        setTimeout(() => {
          loading.close();
        }, 3000);
      });
    },
    //问卷传值
    questionontemplate(item) {
      this.form.templateId = item.templateId;
      this.form.templateName = item.templateName;
      this.lookitemnew = item.lookitemnew;
    },
    //宣教传值
    propagandaontemplate(item) {
      this.form.templateId = item.templateId;
      this.form.templateName = item.templateName;
      this.formview = item.formview;
    },
    //点击审核按钮
    dialogVisibletrue() {
      this.form.routeNodeDay = Number(this.lists[this.listindex].routeNodeDay);
      this.dialogVisible = true;
    },
    // 获取editor传值
    onemit() {
      if (
        this.form.taskNodeType != "QUESTIONNAIRE_SCALE" &&
        this.form.taskNodeType != "PROPAGANDA_ARTICLE" &&
        this.form.taskNodeType != "PHONE_OUTBOUND"
      ) {
        this.$refs.wangeditor.emit();
      }
    },
    // 切换节点
    async bottomclickevent(uitem, index, uindex) {
      await this.onemit();
      const loading = this.$loading({
        lock: true,
        text: "加载中",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      this.listindex = index;
      this.itemindex = uindex;
      if (uitem.taskNodeType == "PROPAGANDA_ARTICLE" && uitem.templateId) {
        getPropaganda(uitem.templateId).then((response) => {
          this.formview = response.data;
        });
      } else if (
        uitem.taskNodeType == "QUESTIONNAIRE_SCALE" &&
        uitem.templateId
      ) {
        questionname(uitem.templateId).then((res) => {
          this.lookitemnew = res.data;
        });
      } else if (uitem.taskNodeType == "PHONE_OUTBOUND") {
        if (uitem.flowScheme) {
          this.phoneNodeContent = uitem.flowScheme;
        } else {
          this.phoneNodeContent = JSON.stringify({
            scriptInfoId: null,
            flowScheme: null,
            nodes: [],
            edges: [],
          });
        }
      }
      this.taskPartitionList = [];
      if (uitem.taskType) {
        this.changeTaskType(uitem.taskType, uitem.taskSubdivision);
      }
      this.form = uitem;
      setTimeout(() => {
        loading.close();
      }, 1200);
    },
    handleStep() {
      this.active = 2;
    },
    //任务类型 任务状态
    taskinfo() {
      selectTaskTypeList().then((res) => {
        this.selectTaskTypeList = res.data;
        this.info();
      });
    },
    //任务类型
    async changeTaskType(code, taskSubdivision) {
      this.taskPartitionDictId = "";
      let id = this.selectTaskTypeList?.find((e) => e.taskTypeCode == code)?.id;
      this.form.taskTypeName = this.selectTaskTypeList?.find((e) => e.taskTypeCode == code)?.taskTypeName;
      await taskPartitionList(id).then((res) => {
        // res.data?.forEach(e => {
        //   if (e.taskNodeType == 'PHONE_OUTBOUND') {
        //     e.taskPartitionName = e.taskPartitionName + '(电话外呼)'
        //   } else if (e.taskNodeType == 'QUESTIONNAIRE_SCALE') {
        //     e.taskPartitionName = e.taskPartitionName + '(问卷量表)'
        //   } else if (e.taskNodeType == 'PROPAGANDA_ARTICLE') {
        //     e.taskPartitionName = e.taskPartitionName + '(宣教文案)'
        //   } else if (e.taskNodeType == 'TEXT_REMIND') {
        //     e.taskPartitionName = e.taskPartitionName + '(文字提醒)'
        //   }
        // })
        this.taskPartitionList = res.data;
        this.form.taskSubdivision = "";
        this.form.taskSubdivisionName = "";
        // this.form.taskNodeType = "";
        this.taskStatusDictList = [];
        if (taskSubdivision) {
          this.form.taskSubdivision = taskSubdivision;
          this.changetaskSubdivision(taskSubdivision, 1);
        }
      });
    },
    //点击任务细分
    changetaskSubdivision(code, type) {
      if (this.form.taskNodeType != "QUESTIONNAIRE_SCALE" && this.form.taskNodeType != "PROPAGANDA_ARTICLE" && this.form.taskNodeType != "PHONE_OUTBOUND") {
        this.$refs.wangeditor.emit();
      }
      setTimeout(() => {
        const loading = this.$loading({
          lock: true,
          text: "加载中",
          spinner: "el-icon-loading",
          background: "rgba(0, 0, 0, 0.7)",
        });
        if (!type) {
          this.form.taskStatus = "";
        }
        this.form.taskSubdivisionName = this.taskPartitionList?.find((e) => e.taskPartitionCode == code)?.taskPartitionName;
        let id = this.taskPartitionList?.find((e) => e.taskPartitionCode == code)?.id;
        this.taskPartitionDictId = id;
        this.form.secondClassifyDescribe = this.taskPartitionList?.find((e) => e.taskPartitionCode == code)?.secondClassifyDescribe;
        this.form.executionTime = this.taskPartitionList?.find((e) => e.taskPartitionCode == code)?.executionTime;
        taskStatusDictList(id).then((res) => {
          this.taskStatusDictList = res.data;
        });
        this.taskPartitionList.forEach((el) => {
          if (code == el.taskPartitionCode) {
            this.form.executionTime = el.executionTime;
            // this.form.taskNodeType = el.taskNodeType;
            if (this.form.taskNodeType == "PHONE_OUTBOUND" || this.form.taskNodeType == "PROPAGANDA_ARTICLE" || this.form.taskNodeType == "QUESTIONNAIRE_SCALE") {
              this.form.nodeContent = `<p></p>`;
            }
            if (!type) {
              this.form.templateId = "";
              this.form.templateName = "";
            }
          }
          let wangeditorlist = [];
          if (localStorage.getItem("wangeditorlist")) {
            wangeditorlist = JSON.parse(localStorage.getItem("wangeditorlist"));
            this.form.nodeContent = "<p></p>";
            this.form.nodeContent = wangeditorlist.find((e) => e.taskSubdivision == this.form.taskSubdivision && e.specialDiseaseNodeId == this.form.specialDiseaseNodeId)?.nodeContent;
          }
          // this.form.taskNodeType = this.taskPartitionList?.find(
          //   (e) => e.taskPartitionCode == code
          // )?.taskNodeType;
        });
        loading.close();
      }, 500);
    },
    addlist() {
      list(this.parentDictCode).then((res) => {
        // this.parentDictCodelist = res.rows;
        res.rows.forEach((e) => {
          this.lists.forEach((el) => {
            el.routeNodeName = e.dictValue;
          });
        });
      });
      this.lists.push({
        routeNodeName: "",
        routeNodeDay: "",
        list: [
          {
            nodeContent: "<p></p>",
            templateId: "",
            templateName: "",
            taskType: "",
            officialRemindContent: "",
            taskSubdivision: "",
            taskSubdivisionName: "",
            appletRemindContent: "",
            appletPromptDescription: "",
            taskStatus: "",
            secondClassifyDescribe: "",
            executionTime: "",
            appletPushSign: "0",
            officialPushSign: "0",
            messagePushSign: "0",
            messagePreview: "",
            taskNodeType: "",
            taskNodeType: "",
            phoneDialMethod: "",
            phoneMessageRemind: "",
            phoneTimeInterval: "",
            phoneRedialTimes: "",
          },
        ],
      });
    },
    additem(item) {
      item.list.push({
        nodeContent: "<p></p>",
        templateId: "",
        templateName: "",
        taskType: "",
        officialRemindContent: "",
        taskSubdivision: "",
        taskSubdivisionName: "",
        taskStatus: "",
        secondClassifyDescribe: "",
        executionTime: "",
        appletPushSign: "0",
        officialPushSign: "0",
        messagePushSign: "0",
        appletRemindContent: "",
        appletPromptDescription: "",
        messagePreview: "",
        taskNodeType: "",
        taskNodeType: "",
        phoneDialMethod: "",
        phoneMessageRemind: "",
        phoneTimeInterval: "",
        phoneRedialTimes: "",
      });
    },
    delitem(item, index) {
      item.list.splice(this.itemindex, 1);
      if (item.list.length == 0) {
        this.lists.splice(index, 1);
      }
    },
    //取消
    handleClose() {
      this.dialogVisible = false;
      this.routeform = {
        routeCheckStatus: "",
        routeCheckRemark: "",
      };
      this.resetForm("routeform");
    },
    //审核
    auditing() {
      this.$refs["routeform"].validate((valid) => {
        if (valid) {
          const loading = this.$loading({
            lock: true,
            text: "审核中",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.7)",
          });
          console.log(this.form);
          if (this.form.taskNodeType != "PHONE_OUTBOUND") {
            if (this.form.messagePushSign == "1") {
              if (!this.form.messageTemplateId) {
                this.$message.error("请选择短信模板");
                return loading.close();
              }
            }
            if (this.form.officialPushSign == "1") {
              if (!this.form.officialTemplateId) {
                this.$message.error("请选择公众号模板");
                return loading.close();
              }
            }
            if (this.form.appletPushSign == "1") {
              if (!this.form.appletTemplateId) {
                this.$message.error("请选择小程序模板");
                return loading.close();
              }
            }
          } else {
            if (!this.form.phoneDialMethod) {
              this.$message.error("请选择推送方式");
              return loading.close();
            }
            if (
              this.optionslist.find(
                (e) => e.dictValue == this.form.phoneMessageRemind
              )?.dictLabel == "未接通发短信"
            ) {
              if (!this.form.phoneMessageTemplateId) {
                this.$message.error("请选择短信模板");
                return loading.close();
              }
            }
          }
          if (
            Number(this.form.routeNodeDay) != 0 &&
            Number(this.form.routeNodeDay) < 0
          ) {
            this.$message.error("请输入节点时间段天数");
            return loading.close();
          }
          if (!this.form.routeNodeName) {
            this.$message.error("请选择节点时间段");
            return loading.close();
          }
          if (!this.form.taskType) {
            this.$message.error("请选择任务类型");
            return loading.close();
          }
          if (!this.form.taskSubdivision) {
            this.$message.error("请选择任务细分");
            return loading.close();
          }
          updateRouteCheckStatus({
            routeCheckStatus: this.routeform.routeCheckStatus,
            id: this.form.specialDiseaseNodeId,
            routeCheckRemark: this.routeform.routeCheckRemark,
            routeCheckPerson: JSON.parse(localStorage.getItem("user")).nickName,
          }).then((res) => {
            loading.close();
            if (res.data == 1) {
              this.info();
              this.handleClose();
              this.$modal.msgSuccess("审核成功!");
              this.listindex = 0;
              this.itemindex = 0;
            }
          });
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
::v-deep iframe {
  width: 100%;
  height: 500px;
}

.imageScriptpreviews {
  margin: 0 auto;
  width: 90%;

  // height: 300px;
  .titletop {
    font-size: 16px;
    font-weight: 700;
  }

  .bodytop {
    position: relative;
    top: 20px;
    // height: 300px;
    // overflow: auto;
    border: 1px solid #e2e2e2;

    .titledata {
      margin: 30px 0px 15px 30px;
      top: 14px;
      font-size: 20px;
    }

    .audiotop {
      margin: 10px 0px 10px 30px;
    }

    img {
      width: 90%;
      // width: 362px;
      // height: 127px;
      margin: 0px 0px 0px 30px;
    }

    .know {
      margin: 11px 0px 10px 30px;
      font-size: 16px;
    }

    .knowlist {
      margin: 10px 0px 10px 30px;
      font-size: 16px;
    }
  }
}

::v-deep .el-input.is-disabled .el-input__inner {
  background-color: #fff !important;
  color: #606266 !important;
}

::v-deep.el-form-item--medium .el-form-item__content {
  line-height: 36px;
  height: 40px;
  overflow: hidden;
}

.txxt {
  ::v-deep.el-form-item--medium .el-form-item__content {
    line-height: 36px;
    height: 40px;
    overflow: visible;
  }
}

::v-deep .el-card__body {
  position: relative;
}

.routeCheckStatus {
  position: absolute;
  right: 10px;
  top: 30px;
}

.dialog-footer {
  padding: 0 20px 0;
  text-align: right;
}

.bottomform {
  background-color: #f2f4f5;
  margin-top: 10px;

  .card {
    background-color: #fff;
    width: 100%;
    height: 130px;

    margin: 20px 0 0;
    padding: 20px 50px 0px 20px;

    .flextwo {
      margin-top: 20px;

      .text {
        font-size: 14px;
        color: #64666a;
      }

      ::v-deep .el-input__inner {
        color: black !important;
        background-color: #fff !important;
        cursor: default !important;
      }

      .textarea {
        width: 90%;
        padding: 0 10px;
        height: 50px;
        line-height: 50px;
        // border: 1px solid #DCDFE6;
        border-radius: 5px;
        display: flex;
        align-items: center;

        ::v-deep .el-input {
          padding: 0 10px;
          width: 50%;
          color: black;
          font-size: 14px;
          height: 40px;
          line-height: 40px;
        }

        ::v-deep .el-input__inner {
          color: black;
          font-size: 14px;
        }
      }
    }

    .flexs {
      display: flex;
      width: 100%;

      .pushMethod {
        height: 30px;
        margin-top: 30px;
        margin-left: 67px;
        line-height: 37px;
        font-size: 14px;
        color: #64666a;

        .spanname {
          pointer-events: none;
        }

        ::v-deep .el-input__inner {
          color: black;
          font-size: 14px;
        }

        span {
          color: black;
          font-size: 14px;
        }
      }

      .pushMethods {
        height: 30px;
        margin-top: 30px;
        line-height: 37px;
        font-size: 14px;
        color: #64666a;

        .spanname {
          pointer-events: none;
        }

        ::v-deep .el-input__inner {
          color: black;
          font-size: 14px;
        }

        span {
          color: black;
          font-size: 14px;
        }
      }
    }

    .flex {
      display: flex;
      width: 100%;
      align-items: center;
      // background: red;
      justify-content: space-between;

      .pushMethod {
        height: 30px;
        margin-top: 30px;
        line-height: 35px;
        font-size: 14px;
        color: #64666a;

        .spanname {
          pointer-events: none;
        }

        ::v-deep .el-input__inner {
          color: black;
          font-size: 14px;
        }

        span {
          color: black;
          font-size: 14px;
        }
      }
    }
  }
}

.topform {
  padding: 15px 0 0 15px;

  .form {
    ::v-deep .el-input__inner {
      height: 30px !important;
      line-height: 30px !important;
    }

    ::v-deep .el-form-item__label {
      font-size: 13px !important;
    }
  }
}

.title {
  display: flex;
  align-items: center;

  div {
    display: flex;
    padding-left: 10px;
    font-weight: 600;
    align-items: center;
  }

  .select {
    font-weight: 550;
    margin-left: 20%;
    font-size: 13px;

    .el-input {
      width: 200px;
      height: 30px !important;
      line-height: 30px !important;
    }
  }
}

.list {
  margin: 10px auto;
  width: 100%;
  background-color: #f2f4f5;
  display: flex;
  padding-top: 10px;
  justify-content: space-evenly;

  .timelist {
    width: 25%;
    background-color: #fff;
    padding: 0 20px 20px;
    // height: 680px;
    height: calc(100vh - 294px);
    overflow: auto;

    .timetitle {
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    ::v-deep .el-timeline {
      width: 100%;
      padding: 15px 0 0 !important;
    }
  }

  .texts {
    width: 74%;
    // height: 680px;
    height: calc(100vh - 294px);
    overflow: auto;
    background-color: #fff;
  }
}

.cards {
  border: 1px solid #409eff;
  border-left: 5px solid #409eff;
}

.top {
  display: flex;
  justify-content: space-between;
  align-items: center;

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

  span {
    padding: 0 4px;
  }

  i {
    font-size: 17px;
  }

  i:nth-child(2) {
    padding-left: 12px;
  }
}

::v-deep .el-timeline-item__timestamp {
  margin: 0 !important;
  padding: 0 !important;
}

::v-deep .el-timeline-item__wrapper {
  padding-left: 14px !important;
}

::v-deep .el-timeline-item__content {
  transform: translateY(-2%);
}

::v-deep .el-card {
  margin-top: 20px !important;
}

.container {
  // padding: 20px;
  padding: 16px 0 16px 16px;
}
</style>