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

<template>
  <div class="app-container">
    <el-descriptions title="编辑触发条件" />
    <div class="title">
      <div >触发条件</div>
      <div class="nodes">
        <div class="node" v-for="(item, index) in updata" :key="index">
          <!-- :style="updata.triggerConditionList.length > 1 ? '' : 'margin:0'" -->
          <div
            style="width: 60px; position: absolute; top: 8%;"
            v-if="updata.length === 3"
          >
            <img src="@/assets/images/images.png" class="login-code-img" />
            <el-select
              v-model="item.triggerLogic"
              style="width: 60px"
              placeholder=""
              @change="changetriggerLogicsname($event, index)"
            >
              <el-option
                v-for="item in optionslistS"
                :key="item.dictValue"
                :label="item.dictLabel"
                :value="item.dictValue"
              >
              </el-option>
            </el-select>
          </div>
          <el-select
            v-model="item.triggerConditionCode"
            style="width: 120px"
            @change="changetriggerConditionName($event, index)"
          >
            <el-option
              v-for="item in optionsname"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
        </el-select>
          <el-select
            v-model="item.triggerConditionOperator"
            style="width: 100px"
            @change="changetriggerLogic($event, index)"
          >
            <el-option
              v-for="item in optionstriggerConditionOperator"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <!-- <el-select v-model="item.suitRange" style="width: 120px;">
                        <el-option label="在院" value="IN_THE_HOSPITAL" />
                        <el-option label="出院" value="DISCHARGE" />
                        <el-option label="门诊" value="OUTPATIENT_SERVICE" />
                        <el-option label="门诊+出院" value="OUTPATIENT_SERVICE_DISCHARGE" />
                    </el-select> -->
          <el-input
            v-if="item.triggerConditionCode != 'DRESSING_CHANGE_DATE'"
            v-model="item.triggerConditionValue"
            style="width: 300px"
          ></el-input>
          <el-date-picker
            v-if="item.triggerConditionCode == 'DRESSING_CHANGE_DATE'"
            v-model="item.triggerConditionValue"
            style="width: 300px"
            type="date"
            placeholder="选择日期时间"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </div>
      </div>
      <!-- <el-button icon="el-icon-plus" style=" font-weight: 550; font-size: 12px;padding-left:6px" type="text"
                @click="addtriggerCondition">添加属性</el-button> -->
      <div class="select">
        <span> 适用范围 </span>
        <el-select v-model="updata.suitRange" placeholder="请选择">
          <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" @click="topclickevent(index)">
              <div class="toptop">
                <el-select v-model="item.routeNodeName" style="width: 87px">
                  <el-option label="出院后" value="AFTER_DISCHARGE" />
                  <el-option label="入院后" value="AFTER_ADMISSION" />
                  <el-option label="就诊后" value="AFTER_CONSULTATION" />
                  <el-option
                    label="就诊/出院后"
                    value="AFTER_VISIT_DISCHARGE"
                  />
                  <el-option label="术前" value="PREOPERATIVE" />
                  <el-option label="术后" value="POSTOPERATIVE" />
                </el-select>
                <el-input
                  v-model="item.routeNodeDay"
                  style="width: 50px"
                ></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)"
              :class="listindex == index && itemindex == uindex ? 'cards' : ''"
            >
              <h3 style="height: 20px">{{ uitem.taskTypeName }}</h3>
              <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: 110px"
                @change="changeTaskType"
              >
                <el-option
                  v-for="item in selectTaskTypeList"
                  :key="item.id"
                  :label="item.taskTypeName"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="任务细分" prop="">
              <el-select
                v-model="form.taskSubdivision"
                style="width: 110px"
                @change="changetaskSubdivision"
              >
                <el-option
                  v-for="item in taskPartitionList"
                  :key="item.id"
                  :label="item.taskTypeName"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="任务状态" prop="">
              <el-select v-model="form.taskStatus" style="width: 100px">
                <el-option
                  v-for="item in taskStatusDictList"
                  :key="item.id"
                  :label="item.taskStatusName"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="二级分类描述" prop="">
              <el-input
                v-model="form.secondClassifyDescribe"
                style="width: 100px"
              ></el-input>
            </el-form-item>
            <el-form-item label="执行时间" prop="">
              <el-time-select
                v-model="form.executionTime"
                style="width: 120px"
                :picker-options="{
                  start: '08:30',
                  step: '00:30',
                  end: '18:30',
                }"
                placeholder="选择时间"
              >
              </el-time-select>
            </el-form-item>
            <el-form-item
              label="问卷库模板选择"
              prop=""
              v-if="form.taskSubdivisiontemplateType == 'QUESTIONNAIRE'"
            >
              <question @on-template="questionontemplate"></question>
            </el-form-item>
            <el-form-item
              label="宣教库模板选择"
              prop=""
              v-if="form.taskSubdivisiontemplateType == 'PROPAGANDA'"
            >
              <propaganda @on-template="propagandaontemplate"></propaganda>
            </el-form-item>
          </el-form>
        </div>
        <div class="bottomform">
          <wangeditor
            style="width: 100%"
            @on-nodeContent="onNodeContent"
            ref="wangeditor"
          />
          <div class="card">
            <div class="flex">
              <div class="pushMethod">
                推送方式：
                <span> 短信 </span>
              </div>
              <div class="pushMethod">
                模板：
                <message @on-template="messageontemplate"></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
                style="border: none"
                class="textarea"
                v-model="form.messagePreview"
              ></el-input>
            </div>
          </div>
          <div class="card">
            <div class="flex">
              <div class="pushMethod">
                推送方式：
                <span> 公众号 </span>
              </div>
              <div class="pushMethod">
                模板：
                <span>
                  <officialAccount
                    @on-template="officialAccountontemplate"
                  ></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"
                placeholder=""
                class="textarea"
                style="border: none"
              ></el-input>
            </div>
          </div>
          <div class="card">
            <div class="flex">
              <div class="pushMethod">
                推送方式：
                <span> 小程序 </span>
              </div>
              <div class="pushMethod">
                模板：
                <span>
                  <miniProgram @on-template="miniProgramtemplate"></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.input"
                placeholder=""
                class="textarea"
                style="border: none"
              ></el-input>
            </div>
            <div class="flextwo">
              <div class="text">提示说明：</div>
              <el-input
                v-model="form.input"
                placeholder=""
                class="textarea"
                style="border: none"
              ></el-input>
            </div>
          </div>
          <!-- <div class="card" style="height: 250px;">
                        <div class="flex">
                            <div class="pushMethod">
                                推送方式：
                                <span>
                                    AI电话
                                </span>
                            </div>
                            <div class="pushMethod">
                                模板：
                                <span>
                                    <el-select v-model="value" style="width:200px;">
                                        <el-option v-for="item in taskStatusDictList" :key="item.id" style="color:black"
                                            :label="item.taskStatusName" :value="item.id">
                                        </el-option>
                                    </el-select>
                                </span>
                            </div>
                            <div class="pushMethod">
                                <el-switch v-model="form.value" active-color="#13ce66"  active-value="1"
                                    inactive-value="0">
                                </el-switch>
                            </div>
                        </div>
                        <div class="flextwo">
                            <div class="text">
                                机构名称：
                            </div>
                            <div class="text">
                                我是
                            </div>
                            <el-input v-model="form.input" placeholder="" style="width:150px;padding:0 10px"></el-input>
                            <div class="text">
                                的工作人员
                            </div>
                        </div>
                        <div class="flextwo">
                            <div class="text">
                                重播次数：
                            </div>
                            <el-input v-model="form.input" placeholder="" style="width:200px;"></el-input>
                            <div class="text" style="padding-left: 100px;">
                                时间间隔：
                            </div>
                            <el-input v-model="form.input" placeholder="" style="width:200px;"></el-input>
                        </div>
                        <div class="flextwo">
                            <div class="text">
                                短信提醒：
                            </div>
                            <el-select v-model="value" style="width:200px;">
                                <el-option v-for="item in taskStatusDictList" :key="item.id" style="color:black"
                                    :label="item.taskStatusName" :value="item.id">
                                </el-option>
                            </el-select>
                            <div class="text" style="padding-left: 100px;">
                                短信模板：
                            </div>
                            <el-select v-model="value" style="width:200px;">
                                <el-option v-for="item in taskStatusDictList" :key="item.id" style="color:black"
                                    :label="item.taskStatusName" :value="item.id">
                                </el-option>
                            </el-select>
                        </div>
                    </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>
    <!-- <div slot="footer" class="dialog-footer">
            <el-button @click="TemporaryStorage">暂 存</el-button>
            <el-button type="primary">审核完成</el-button>
        </div> -->
  </div>
</template>

<script>
import wangeditor from "../components/wangEditor.vue";
import question from "../components/question.vue";
import message from "../components/message.vue";
import propaganda from "../components/propaganda.vue";
import officialAccount from "../components/officialAccount.vue";
import miniProgram from "../components/miniProgram.vue";
import {
  selectTaskTypeList,
  taskPartitionList,
  taskStatusDictList,
  triggerConditionList,
} from "@/api/system/specialDiseaseNode";
import {
  triggerCondition,
  triggerConditionedit,
} from "@/api/system/editorialSpecialization";
import { getAgencytype } from "@/api/system/agency";

export default {
  components: {
    wangeditor,
    question,
    propaganda,
    message,
    officialAccount,
    miniProgram,
  },
  name: "specialDiseaseNode",
  data() {
    return {
        optionstriggerConditionOperator: [
        {
          value: "CONTAIN",
          label: "包含",
        },
        {
          value: "NOT_CONTAIN",
          label: "不包含",
        },
        {
          value: "EQUAL_TO",
          label: "等于",
        },
        {
          value: "NOT_EQUAL_TO",
          label: "不等于",
        },
      ],
      optionslistS: [],

      optionsname: [
        {
          value: "DIAGNOSIS",
          label: "诊断",
        },
        {
          value: "DRESSING_CHANGE_DATE",
          label: "换药日期",
        },
        {
          value: "TREATMENT_METHOD",
          label: "治疗方式",
        },
        {
          value: "SURGICAL_NAME",
          label: "手术名称",
        },
        {
          value: "DRUG_NAME",
          label: "药品名称",
        },
      ],
      updata: {
        triggerConditionList: [{}],
      },
      form: {
        nodeContent: "",
        templateId: "",
        templateName: "",
        taskType: "",
        taskTypeName: "",
        taskSubdivision: "",
        taskSubdivisionName: "",
        taskStatus: "",
        secondClassifyDescribe: "",
        executionTime: "",
        appletPushSign: "0",
        officialPushSign: "0",
        messagePushSign: "0",
        taskSubdivisiontemplateType: "",
      },
      itemindex: 0,
      listindex: 0,
      lists: [
        {
          routeNodeName: "",
          routeNodeDay: "",
          list: [
            {
              nodeContent: "",
              templateId: "",
              templateName: "",
              taskType: "",
              taskTypeName: "",
              taskSubdivision: "",
              taskSubdivisionName: "",
              taskStatus: "",
              secondClassifyDescribe: "",
              executionTime: "",
              appletPushSign: "0",
              officialPushSign: "0",
              messagePushSign: "0",
              taskSubdivisiontemplateType: "",
            },
          ],
        },
      ],
      value: "",
      input: "",
      //任务类型
      selectTaskTypeList: [],
      //任务状态
      taskStatusDictList: [],
      //任务细分
      taskPartitionList: [],
      routeId: "",
      options: [],
    };
  },
  created() {
    this.infolists();
    this.infolist();

    if (this.$route.query) {
      this.$set(this.updata, "suitRange", this.$route.query.suitRange);
      console.log(this.updata.suitRange, "5555555555555555");
      // triggerCondition(this.$route.query.id).then(res => { })
    }
    this.taskinfo();
  },
  beforeDestroy() {},
  watch: {},
  mounted() {
    this.form = this.lists[0].list[0];
  },
  methods: {
    // 包含
    changetriggerLogic(e, index) {
      // console.log(e,index,'index')
      this.updata.triggerConditionList[index].triggerConditionOperatorName =
        this.optionstriggerConditionOperator.find((el) => el.value == e).label;
      //   console.log( this.updata.triggerConditionList[index].triggerConditionOperatorName,"this.updata.triggerConditionList[index].triggerConditionOperatorName");
    },
    // 诊断
    changetriggerConditionName(e, index) {
      //   console.log(e,index, "eeeeeeeee");
      this.updata.triggerConditionList[index].triggerConditionName =
        this.optionsname.find((el) => el.value == e).label;
      //   console.log(this.updata.triggerConditionList[index].triggerConditionName, " this.form.triggerConditionName");
    },
    changeoptions() {},
    // 且或
    changetriggerLogicsname(e, index) {
      console.log(e, index, "eeeeeeeeeeeeeeeeee");
      this.updata.triggerConditionList[index].triggerLogic = e;
      this.updata.triggerConditionList[index].triggerLogicName =
        this.optionslistS.find((el) => el.dictValue == e).dictLabel;
      console.log(
        this.updata.triggerConditionList[index].triggerLogic,
        this.updata.triggerConditionList[index].triggerLogicName,
        " this.form.triggerLogicName"
      );
    },
    // 适用范围
    infolists() {
      var dictType = "suit_range";
      getAgencytype(dictType).then((res) => {
        this.options = res.data;
      });
    },
    infolist() {
      this.routeId = this.$route.query.id;
      triggerConditionList(this.routeId).then((res) => {
        console.log(res, "res");
        this.updata = res.data;
        this.$set(this.updata, "suitRange", this.$route.query.suitRange);
      });
    },
    //wangeditor传值
    onNodeContent(item) {
      this.form.nodeContent = item.nodeContent;
    },
    //小程序传值
    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;
    },
    //公众号传值
    officialAccountontemplate() {
      this.form.officialTemplateId = item.templateId;
      this.form.officialTemplateName = item.templateName;
      this.form.officialRemindContent = item.templateContent;
    },
    //暂存
    TemporaryStorage() {
      this.$refs.wangeditor.emit();
      triggerConditionedit(this.lists).then((res) => {});
    },
    //问卷传值
    questionontemplate(item) {
      this.form.templateId = item.templateId;
      this.form.templateName = item.templateName;
    },
    //宣教传值
    propagandaontemplate(item) {
      this.form.templateId = item.templateId;
      this.form.templateName = item.templateName;
    },
    topclickevent(index) {
      this.listindex = index;
      this.itemindex = 0;
    },
    bottomclickevent(uitem, index, uindex) {
      this.form = uitem;
      this.listindex = index;
      this.itemindex = uindex;
    },
    handleStep() {
      this.active = 2;
    },
    //任务类型 任务状态
    taskinfo() {
      selectTaskTypeList().then((res) => {
        this.selectTaskTypeList = res.data;
      });
      taskStatusDictList().then((res) => {
        this.taskStatusDictList = res.data;
      });
    },
    //任务细分
    changeTaskType(id) {
      taskPartitionList(id).then((res) => {
        this.taskPartitionList = res.data;
      });
      this.selectTaskTypeList.forEach((el) => {
        if (id == el.id) {
          this.form.taskTypeName = el.taskTypeName;
        }
      });
    },
    changetaskSubdivision(e) {
      this.taskPartitionList.forEach((el) => {
        if (e == el.id) {
          this.form.taskSubdivisionName = el.taskTypeName;
          this.form.taskSubdivisiontemplateType = el.templateType;
        }
      });
    },
    addlist() {
      this.lists.push({
        routeNodeName: "",
        routeNodeDay: "",
        list: [
          {
            nodeContent: "",
            templateId: "",
            templateName: "",
            taskType: "",
            taskTypeName: "",
            taskSubdivision: "",
            taskSubdivisionName: "",
            taskStatus: "",
            secondClassifyDescribe: "",
            executionTime: "",
            appletPushSign: "0",
            officialPushSign: "0",
            messagePushSign: "0",
            taskSubdivisiontemplateType: "",
          },
        ],
      });
    },
    additem(item) {
      item.list.push({
        nodeContent: "",
        templateId: "",
        templateName: "",
        taskType: "",
        taskTypeName: "",
        taskSubdivision: "",
        taskSubdivisionName: "",
        taskStatus: "",
        secondClassifyDescribe: "",
        executionTime: "",
        appletPushSign: "0",
        officialPushSign: "0",
        messagePushSign: "0",
        taskSubdivisiontemplateType: "",
      });
    },
    delitem(item, index) {
      item.list.splice(this.itemindex, 1);
      if (item.list.length == 0) {
        this.lists.splice(index, 1);
      }
    },
    addtriggerCondition() {
      this.updata.triggerConditionList.push({});
    },
  },
};
</script>
<style scoped lang="scss">
.login-code-img {
  width: 62px;
  height: 100px;
  position: absolute;
//   background: red;
//   z-index: 0;
  //   top: 17%;
//   position: absolute;
  //   left: 2%;
//   top: 25%;
//   width: 62px;
//     height: 100px;
//     position: absolute;
//     /* background: red; */
    z-index: -1;
    right: 44px;
    // position: absolute;
    top: 85%;
}
.dialog-footer {
  padding: 20px 20px;
  text-align: right;
}

.nodes {
  width: 660px;
  display: flex;
  flex-wrap: wrap;
  position: relative;

  .node {
    margin-bottom: 10px;
  }
}

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

  .card {
    background-color: #fff;
    width: 100%;
    height: 200px;
    margin: 20px 0 0;
    padding: 20px 50px 0px 20px;

    .flextwo {
      display: flex;
      align-items: center;
      margin-top: 20px;

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

      .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: 13px;
          height: 40px;
          line-height: 40px;
        }

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

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

      .pushMethod {
        height: 30px;
        line-height: 30px;
        font-size: 13px;
        color: #64666a;

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

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

.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: 12px !important;
    }
  }
}

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

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

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

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

.list {
  margin: 20px auto;
  width: 100%;
  height: calc(100% - 80px);
  background-color: #f2f4f5;
  display: flex;
  padding-top: 15px;
  justify-content: space-evenly;

  .timelist {
    width: 22%;
    background-color: #fff;
    padding: 0 20px 20px;
    height: 680px;
    overflow: scroll;

    .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: 75%;
    height: 680px;
    overflow: scroll;
    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;
}
</style>