<template> 
 | 
  <div class="NotificationManagement"> 
 | 
    <!-- 左侧栏 --> 
 | 
    <div class="sidecolumn"> 
 | 
      <el-steps finish-status="success" :active="Editprogress" simple> 
 | 
        <el-step> 
 | 
          <template slot="title"> 
 | 
            <span style="cursor: pointer" @click="Editprogress = 1" 
 | 
              >基础信息设置</span 
 | 
            > 
 | 
          </template> 
 | 
        </el-step> 
 | 
      </el-steps> 
 | 
    </div> 
 | 
    <!-- 右侧数据 --> 
 | 
    <div class="leftvlue"> 
 | 
      <!-- 基本信息 --> 
 | 
      <div v-if="Editprogress == 1"> 
 | 
        <div class="leftvlue-jbxx">基本信息</div> 
 | 
        <el-divider></el-divider> 
 | 
        <el-form 
 | 
          :model="ruleForm" 
 | 
          :rules="rules" 
 | 
          ref="ruleForm" 
 | 
          label-width="100px" 
 | 
          class="demo-ruleForm" 
 | 
        > 
 | 
          <el-form-item label="通知分类" prop="region"> 
 | 
            <el-select 
 | 
              v-model="ruleForm.assortid" 
 | 
              size="medium" 
 | 
              filterable 
 | 
              placeholder="请选择分类" 
 | 
            > 
 | 
              <el-option-group 
 | 
                v-for="group in sortlist" 
 | 
                :key="group.id" 
 | 
                :label="group.assortname" 
 | 
              > 
 | 
                <el-option 
 | 
                  v-for="item in group.heLibraryAssortList" 
 | 
                  :key="item.id" 
 | 
                  :label="item.assortname" 
 | 
                  :value="item.id" 
 | 
                > 
 | 
                </el-option> 
 | 
              </el-option-group> 
 | 
            </el-select> 
 | 
          </el-form-item> 
 | 
          <el-row> 
 | 
            <el-col :span="12"> </el-col> 
 | 
            <el-col :span="12"> </el-col> 
 | 
          </el-row> 
 | 
          <el-form-item label="通知标题" prop="preachname"> 
 | 
            <div style="width: 60%"> 
 | 
              <el-input 
 | 
                v-model="ruleForm.preachname" 
 | 
                placeholder="请输入标题" 
 | 
              ></el-input> 
 | 
            </div> 
 | 
          </el-form-item> 
 | 
          <el-form-item label="通知内容" prop="preachcontent"> 
 | 
            <div style="width: 80%"> 
 | 
              <el-input 
 | 
                type="textarea" 
 | 
                :rows="5" 
 | 
                v-model="ruleForm.preachcontent" 
 | 
                placeholder="请输入通知内容" 
 | 
              ></el-input> 
 | 
            </div> 
 | 
          </el-form-item> 
 | 
          <el-form-item label="通知变量" prop="name"> 
 | 
            <div style="margin-bottom: 5px" v-for="item in variablelist"> 
 | 
              <el-row> 
 | 
                <el-col :span="5"> 
 | 
                  <el-input 
 | 
                    v-model="item.variatename" 
 | 
                    placeholder="请输入变量名" 
 | 
                  ></el-input> 
 | 
                </el-col> 
 | 
                <el-col :span="8" :offset="1"> 
 | 
                  <el-input 
 | 
                    v-model="item.variate" 
 | 
                    placeholder="请输入变量内容" 
 | 
                  ></el-input> 
 | 
                </el-col> 
 | 
                <el-col :span="8" :offset="1"> 
 | 
                  <el-button 
 | 
                    type="success" 
 | 
                    icon="el-icon-plus" 
 | 
                    circle 
 | 
                    @click="addvariable(item)" 
 | 
                  ></el-button> 
 | 
                  <el-button 
 | 
                    v-if="!item.default" 
 | 
                    type="danger" 
 | 
                    icon="el-icon-delete" 
 | 
                    circle 
 | 
                    @click="delvariable(item)" 
 | 
                  ></el-button> 
 | 
                </el-col> 
 | 
              </el-row> 
 | 
            </div> 
 | 
          </el-form-item> 
 | 
  
 | 
          <el-form-item label="标签" prop="desc"> 
 | 
            <div class="xinz-inf"> 
 | 
              <el-tag 
 | 
                :key="tag.tagname" 
 | 
                type="success" 
 | 
                v-for="tag in dynamicTags" 
 | 
                closable 
 | 
                :disable-transitions="false" 
 | 
                @close="handleClosetag(tag)" 
 | 
              > 
 | 
                {{ tag.tagname }} 
 | 
              </el-tag> 
 | 
              <el-select 
 | 
                v-model="inputValue" 
 | 
                v-if="inputVisible" 
 | 
                @change="handleInputConfirm" 
 | 
                filterable 
 | 
                remote 
 | 
                allow-create 
 | 
                reserve-keyword 
 | 
                default-first-option 
 | 
                :remote-method="remoteMethodtag" 
 | 
                :loading="loading" 
 | 
                placeholder="请选择" 
 | 
              > 
 | 
                <el-option 
 | 
                  v-for="item in optionstag" 
 | 
                  :key="item.tagid" 
 | 
                  :label="item.tagname" 
 | 
                  :value="item.tagname" 
 | 
                > 
 | 
                </el-option> 
 | 
              </el-select> 
 | 
              <el-button 
 | 
                v-else 
 | 
                class="button-new-tag" 
 | 
                size="small" 
 | 
                @click="showInput" 
 | 
                >+ 新增标签</el-button 
 | 
              > 
 | 
            </div> 
 | 
          </el-form-item> 
 | 
          <el-row :gutter="20"> 
 | 
            <el-col :span="6"> 
 | 
              <el-form-item label="版本号" prop="name"> 
 | 
                <el-input 
 | 
                  v-model="ruleForm.version" 
 | 
                  placeholder="默认1.0.1" 
 | 
                ></el-input> </el-form-item 
 | 
            ></el-col> 
 | 
            <el-col :span="9"> 
 | 
              <el-form-item label="可用状态" prop="region"> 
 | 
                <el-radio-group v-model="ruleForm.isAvailable"> 
 | 
                  <el-radio 
 | 
                    v-for="(item, index) in usable" 
 | 
                    :label="item.value" 
 | 
                    >{{ item.label }}</el-radio 
 | 
                  > 
 | 
                </el-radio-group> 
 | 
              </el-form-item></el-col 
 | 
            > 
 | 
          </el-row> 
 | 
          <el-form-item label="适用院区" prop="region"> 
 | 
            <el-select 
 | 
              v-model="ruleForm.campus" 
 | 
              size="medium" 
 | 
              multiple 
 | 
              filterable 
 | 
              placeholder="请选择院区" 
 | 
            > 
 | 
              <el-option 
 | 
                class="ruleFormaa" 
 | 
                v-for="item in courtyardlist" 
 | 
                :key="item.value" 
 | 
                :label="item.label" 
 | 
                :value="item.value" 
 | 
              > 
 | 
              </el-option> 
 | 
            </el-select> 
 | 
          </el-form-item> 
 | 
          <el-form-item label="适用科室" prop="region"> 
 | 
            <el-cascader 
 | 
              v-model="tempDetpRelevanceslist" 
 | 
              :options="deptList" 
 | 
              :props="props" 
 | 
              :show-all-levels="false" 
 | 
              clearable 
 | 
            > 
 | 
              <template slot-scope="{ node, data }"> 
 | 
                <span>{{ data.deptName }}</span> 
 | 
                <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span> 
 | 
              </template> 
 | 
            </el-cascader> 
 | 
          </el-form-item> 
 | 
          <el-form-item> 
 | 
            <el-button type="success" @click="Departmenttreatment('ruleForm')" 
 | 
              >保存</el-button 
 | 
            > 
 | 
            <el-button type="info" @click="closeFm('ruleForm')">关闭</el-button> 
 | 
          </el-form-item> 
 | 
        </el-form> 
 | 
      </div> 
 | 
    </div> 
 | 
    <!-- 添加适用疾病窗口 --> 
 | 
    <Optional-Form 
 | 
      ref="child" 
 | 
      :dialogVisiblepatient="dialogVisiblepatient" 
 | 
      :overallCase="illnesslist" 
 | 
      @addoption="dialogVisiblepatient = false" 
 | 
      @kkoption="dialogVisiblepatient = true" 
 | 
    /> 
 | 
  </div> 
 | 
</template> 
 | 
  
 | 
<script> 
 | 
import axios from "axios"; 
 | 
import { 
 | 
  getheLibraryAssort, 
 | 
  delheLibraryAssort, 
 | 
  addheLibraryAssort, 
 | 
  addtargetillness, 
 | 
  getlibrarylist, 
 | 
  dellibraryinfo, 
 | 
  deltargetillness, 
 | 
  compilelibrary, 
 | 
  addrichText, 
 | 
  getlibraryinfo, 
 | 
  getillnesslist, 
 | 
  illnesslistget, 
 | 
  getillness, 
 | 
} from "@/api/AiCentre/index"; 
 | 
import OptionalForm from "@/components/OptionalForm"; 
 | 
import { listDept } from "@/api/system/dept"; 
 | 
import { listtag } from "@/api/system/label"; 
 | 
import store from "@/store"; 
 | 
import { getToken } from "@/utils/auth"; 
 | 
  
 | 
export default { 
 | 
  name: "NotificationManagement", 
 | 
  components: { OptionalForm }, 
 | 
  data() { 
 | 
    return { 
 | 
      headers: { 
 | 
        Authorization: "Bearer " + getToken(), 
 | 
      }, 
 | 
      dynamicTags: [], 
 | 
      inputVisible: false, 
 | 
      illnessVisible: false, 
 | 
      dialogVisiblepatient: false, 
 | 
      inputValue: "", 
 | 
      sidecolumnrabs: "left", 
 | 
      Editprogress: 1, 
 | 
      currentVersion: "1.2.3", 
 | 
      loading: false, 
 | 
      drawer: false, 
 | 
      radio: "false", 
 | 
      radios: [], 
 | 
      radioas: "", 
 | 
      total: 1, 
 | 
      hetype: "", 
 | 
      id: null, 
 | 
      ruleForm: { 
 | 
        campus: [], 
 | 
        heLibraryTagList: [], 
 | 
        tempDetpRelevances: [], 
 | 
        version: "1.0.1", 
 | 
      }, 
 | 
      rules: {}, 
 | 
      rulesa: {}, 
 | 
      mode: [], 
 | 
      editableTabs: [], 
 | 
      sortlist: [], 
 | 
      usable: [], 
 | 
      courtyardlist: [], 
 | 
      precedencetype: [], 
 | 
      optionsillness: [], 
 | 
      illnesslistapi: [], 
 | 
      illnesslist: [], 
 | 
      options: [], 
 | 
      optionstag: [], 
 | 
      deptList: [], 
 | 
      tempDetpRelevanceslist: [], 
 | 
      props: { multiple: true, value: "deptId", label: "deptName" }, 
 | 
      variablelist: [ 
 | 
        { variatename: "姓名", variate: "${name}", default: 1 }, 
 | 
        { variatename: "电话", variate: "${phone}", default: 1 }, 
 | 
        { variatename: "病情", variate: "${illness}", default: 1 }, 
 | 
      ], 
 | 
      queryParams: { 
 | 
        pageNum: 1, 
 | 
        pageSize: 10, 
 | 
      }, 
 | 
    }; 
 | 
  }, 
 | 
  activated() { 
 | 
    if (this.id != this.$route.query.id) { 
 | 
      this.gettabList(); 
 | 
      this.getList(); 
 | 
      this.illnessUpdate(); 
 | 
    } 
 | 
  }, 
 | 
  created() { 
 | 
    this.gettabList(); 
 | 
    this.getList(); 
 | 
    this.illnessUpdate(); 
 | 
    this.mode = store.getters.mode; 
 | 
    this.editableTabs = store.getters.editableTabs; 
 | 
    this.usable = store.getters.usable; 
 | 
    this.precedencetype = store.getters.precedencetype; 
 | 
    this.courtyardlist = store.getters.courtyardlist; 
 | 
  }, 
 | 
  methods: { 
 | 
    // 获取页面数据 
 | 
    getList() { 
 | 
      this.loading = true; 
 | 
      this.id = this.$route.query.id; 
 | 
      this.hetype = this.$route.query.hetype; 
 | 
      if (this.id) { 
 | 
        getlibraryinfo({ id: this.id }).then((res) => { 
 | 
          this.ruleForm = res.data[0]; 
 | 
          if (this.ruleForm.campus) 
 | 
            this.ruleForm.campus = this.ruleForm.campus.split(","); 
 | 
          this.dynamicTags = res.data[0].heLibraryTagList.map( 
 | 
            this.processElement 
 | 
          ); 
 | 
          if (this.ruleForm.deptNames) { 
 | 
            this.tempDetpRelevanceslist = JSON.parse(this.ruleForm.deptNames); 
 | 
          } 
 | 
          this.variablelist = this.ruleForm.otherdata 
 | 
            ? JSON.parse(this.ruleForm.otherdata) 
 | 
            : this.variablelist; 
 | 
        }); 
 | 
      } 
 | 
      // 通知分类 
 | 
      getheLibraryAssort({ hetype: 2 }).then((res) => { 
 | 
        this.sortlist = res.rows; 
 | 
      }); 
 | 
      // 部门 
 | 
      listDept(this.queryParams).then((response) => { 
 | 
        this.deptList = this.handleTree(response.data, "deptId"); 
 | 
      }); 
 | 
    }, 
 | 
    processElement(element) { 
 | 
      return { ...element, isoperation: null }; 
 | 
    }, 
 | 
    submitForm(formName) { 
 | 
      let tgs = []; 
 | 
      this.dynamicTags.forEach((item) => { 
 | 
        tgs.push(item.tagname); 
 | 
      }); 
 | 
      if (this.ruleForm.campus) { 
 | 
        this.ruleForm.campus = this.ruleForm.campus.join(","); 
 | 
      } 
 | 
      this.ruleForm.labelInfo = tgs.length != 0 ? tgs.join(", ") : ""; 
 | 
      this.ruleForm.otherdata = JSON.stringify(this.variablelist); 
 | 
      this.ruleForm.hetype = 2; // 通知类型 
 | 
  
 | 
      if (this.id) { 
 | 
        this.ruleForm.isoperation = 2; 
 | 
        compilelibrary(this.ruleForm).then((res) => { 
 | 
          if (res.code == 200) { 
 | 
            this.$modal.msgSuccess("编辑成功"); 
 | 
            this.confirmillness(); 
 | 
            this.$router.go(-1); 
 | 
          } 
 | 
        }); 
 | 
      } else { 
 | 
        this.ruleForm.isoperation = 1; 
 | 
        compilelibrary(this.ruleForm).then((res) => { 
 | 
          if (res.code == 200) { 
 | 
            this.$modal.msgSuccess("新增成功"); 
 | 
            this.confirmillness(res.data); 
 | 
            this.$router.go(-1); 
 | 
          } 
 | 
        }); 
 | 
      } 
 | 
    }, 
 | 
    // 保存疾病 
 | 
    confirmillness(guid) { 
 | 
      this.illnesslist.forEach((item, index) => { 
 | 
        if (guid) { 
 | 
          item.outid = guid; 
 | 
        } else { 
 | 
          item.outid = this.ruleForm.id; 
 | 
        } 
 | 
        item.icd10name = item.icdname; 
 | 
        item.icd10code = item.icdcode; 
 | 
        item.type = 6; 
 | 
        if (!item.id) { 
 | 
          addtargetillness(item).then((res) => {}); 
 | 
        } 
 | 
      }); 
 | 
      this.illnessVisible = false; 
 | 
      this.$modal.msgSuccess("编辑成功"); 
 | 
    }, 
 | 
    // 关闭 
 | 
    closeFm() { 
 | 
      this.$confirm("退出不会保留页面内容更改, 是否继续?", "提示", { 
 | 
        confirmButtonText: "确定", 
 | 
        cancelButtonText: "取消", 
 | 
        type: "warning", 
 | 
      }) 
 | 
        .then(() => { 
 | 
          this.$router.go(-1); 
 | 
        }) 
 | 
        .catch(() => { 
 | 
          this.$message({ 
 | 
            type: "info", 
 | 
            message: "已取消", 
 | 
          }); 
 | 
        }); 
 | 
    }, 
 | 
    // 科室处理 
 | 
    Departmenttreatment() { 
 | 
      this.ruleForm.deptNames = JSON.stringify(this.tempDetpRelevanceslist); 
 | 
      const result = this.tempDetpRelevanceslist.map( 
 | 
        (subArr) => subArr[subArr.length - 1] 
 | 
      ); 
 | 
      // id数组查数组对象 
 | 
      result.forEach((item) => { 
 | 
        const condition = this.ruleForm.tempDetpRelevances.some( 
 | 
          (obj) => obj.deptId === item 
 | 
        ); 
 | 
        if (!condition) { 
 | 
          listDept({ deptId: item }).then((res) => { 
 | 
            res.data[0].type = 2; 
 | 
            this.ruleForm.tempDetpRelevances.push(res.data[0]); 
 | 
          }); 
 | 
        } 
 | 
      }); 
 | 
      // 数组对象查id数组 
 | 
      this.ruleForm.tempDetpRelevances.forEach((item) => { 
 | 
        const condition = result.some((obj) => obj === item.deptId); 
 | 
        if (!condition) { 
 | 
          const index = this.ruleForm.tempDetpRelevances.indexOf(item); 
 | 
          this.ruleForm.tempDetpRelevances[index].delFlag = 1; 
 | 
        } 
 | 
      }); 
 | 
      setTimeout(() => { 
 | 
        this.submitForm(); 
 | 
      }, 1000); 
 | 
    }, 
 | 
    // 新增变量 
 | 
    addvariable() { 
 | 
      this.variablelist.push({ 
 | 
        variatename: "", 
 | 
        variate: "", 
 | 
      }); 
 | 
    }, 
 | 
    // 删除变量 
 | 
    delvariable(item) { 
 | 
      const index = this.variablelist.indexOf(item); 
 | 
      if (index !== -1) { 
 | 
        this.variablelist.splice(index, 1); 
 | 
      } else { 
 | 
        console.log("未找到该对象"); 
 | 
      } 
 | 
    }, 
 | 
    // 标签相关方法 
 | 
    gettabList() { 
 | 
      const tagqueryParams = { 
 | 
        pageNum: 1, 
 | 
        pageSize: 1000, 
 | 
        tagcategoryid: "0", 
 | 
      }; 
 | 
      listtag(tagqueryParams).then((response) => { 
 | 
        this.optionstag = response.rows; 
 | 
      }); 
 | 
    }, 
 | 
    handleClosetag(tag) { 
 | 
      const lindex = this.ruleForm.heLibraryTagList.findIndex( 
 | 
        (item) => item.tagname == tag.tagname 
 | 
      ); 
 | 
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1); 
 | 
      this.ruleForm.heLibraryTagList[lindex].isoperation = 3; 
 | 
    }, 
 | 
    handleInputConfirm() { 
 | 
      let tagvalue = {}; 
 | 
      let tagname = this.inputValue; 
 | 
      if (tagname) { 
 | 
        listtag({ 
 | 
          pageNum: 1, 
 | 
          pageSize: 1000, 
 | 
          tagcategoryid: "0", 
 | 
          tagname: tagname, 
 | 
        }).then((res) => { 
 | 
          if (res.rows[0]) { 
 | 
            tagvalue = res.rows[0]; 
 | 
            tagvalue.isoperation = 1; 
 | 
          } else { 
 | 
            tagvalue = { 
 | 
              tagname: tagname, 
 | 
              isoperation: 1, 
 | 
            }; 
 | 
          } 
 | 
          this.ruleForm.heLibraryTagList.push(tagvalue); 
 | 
          this.dynamicTags.push(tagvalue); 
 | 
        }); 
 | 
      } 
 | 
      this.inputVisible = false; 
 | 
      this.inputValue = ""; 
 | 
    }, 
 | 
    remoteMethodtag(query) { 
 | 
      if (query !== "") { 
 | 
        this.loading = true; 
 | 
        setTimeout(() => { 
 | 
          this.loading = false; 
 | 
          listtag({ tagname: query, tagcategoryid: "0" }).then((res) => { 
 | 
            this.optionstag = res.rows; 
 | 
          }); 
 | 
        }, 200); 
 | 
      } else { 
 | 
        this.optionstag = []; 
 | 
      } 
 | 
    }, 
 | 
    showInput() { 
 | 
      this.inputVisible = true; 
 | 
    }, 
 | 
    // 疾病相关方法 
 | 
    illnessUpdate() { 
 | 
      if (this.id) { 
 | 
        getillness({ outid: this.$route.query.id, type: 6 }).then((res) => { 
 | 
          this.illnesslist = res.rows; 
 | 
          this.illnesslist.forEach((item) => { 
 | 
            item.icdname = item.icd10name; 
 | 
          }); 
 | 
        }); 
 | 
      } 
 | 
    }, 
 | 
    // 预览模板 
 | 
    PreviewTemplate() { 
 | 
      this.drawer = true; 
 | 
    }, 
 | 
    resetForm(formName) { 
 | 
      this.$refs[formName].resetFields(); 
 | 
    }, 
 | 
  }, 
 | 
}; 
 | 
</script> 
 | 
  
 | 
<style lang="scss" scoped> 
 | 
.sidecolumn { 
 | 
  margin: 20px; 
 | 
  margin-bottom: 0; 
 | 
  padding: 20px; 
 | 
  background: #edf1f7; 
 | 
  border: 1px solid #dcdfe6; 
 | 
  -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 
 | 
    0 0 6px 0 rgba(0, 0, 0, 0.04); 
 | 
} 
 | 
  
 | 
.leftvlue { 
 | 
  margin: 20px; 
 | 
  padding: 30px; 
 | 
  background: #ffff; 
 | 
  border: 1px solid #dcdfe6; 
 | 
  -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 
 | 
    0 0 6px 0 rgba(0, 0, 0, 0.04); 
 | 
  
 | 
  .leftvlue-jbxx { 
 | 
    font-size: 24px; 
 | 
    height: 30px; 
 | 
    border-left: 3px solid #41a1be; 
 | 
    padding-left: 3px; 
 | 
  } 
 | 
} 
 | 
  
 | 
.xinz-inf { 
 | 
  font-size: 18px; 
 | 
  white-space: nowrap; 
 | 
  overflow: hidden; 
 | 
  text-overflow: ellipsis; 
 | 
  line-height: 48px; 
 | 
  
 | 
  .el-tag + .el-tag { 
 | 
    margin-left: 10px; 
 | 
  } 
 | 
  
 | 
  .button-new-tag { 
 | 
    margin-left: 10px; 
 | 
    height: 32px; 
 | 
    line-height: 30px; 
 | 
    padding-top: 0; 
 | 
    padding-bottom: 0; 
 | 
  } 
 | 
  
 | 
  .input-new-tag { 
 | 
    width: 90px; 
 | 
    margin-left: 10px; 
 | 
    vertical-align: bottom; 
 | 
  } 
 | 
} 
 | 
  
 | 
::v-deep .el-step.is-vertical .el-step__title { 
 | 
  font-size: 25px; 
 | 
} 
 | 
  
 | 
::v-deep.el-input--medium { 
 | 
  font-size: 18px !important; 
 | 
} 
 | 
  
 | 
::v-deep.el-select__tags { 
 | 
  font-size: 20px; 
 | 
  max-width: 888px !important; 
 | 
} 
 | 
  
 | 
::v-deep.el-radio__inner { 
 | 
  width: 22px; 
 | 
  height: 22px; 
 | 
} 
 | 
  
 | 
::v-deep.el-radio-group { 
 | 
  span { 
 | 
    font-size: 24px; 
 | 
  } 
 | 
} 
 | 
  
 | 
::v-deep.el-checkbox-group { 
 | 
  span { 
 | 
    font-size: 24px; 
 | 
  } 
 | 
} 
 | 
</style> 
 |