指标完成

WXL

2024-02-01 79925204a4e1588d1031ca0429ae318a608a8928

 src/views/knowledge/education/compilequer/index.vue

@@ -2,20 +2,28 @@
  <div class="Questionnairemanagement">
    <!-- 左侧栏 -->
    <div class="sidecolumn">
      <div style="height: 200px">
        <el-steps direction="vertical" :active="Editprogress">
          <el-step title="基础信息设置"></el-step>
          <el-step title="宣教内容"></el-step>
        </el-steps>
      </div>
      <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-step>
          <template slot="title">
            <span style="cursor: pointer" @click="Editprogress = 2"
              >宣教内容</span
            >
          </template>
        </el-step>
      </el-steps>
    </div>
    <!-- 右侧数据 -->
    <div class="leftvlue">
      <!-- 基本信息 -->
      <div v-if="Editprogress == 1">
        <div class="leftvlue-jbxx">
          基本信息<span>当前版本:{{ currentVersion }}</span>
        </div>
        <div class="leftvlue-jbxx">基本信息</div>
        <el-form
          :model="ruleForm"
          :rules="rules"
@@ -23,46 +31,237 @@
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="宣教名称" prop="name">
            <el-input v-model="ruleForm.name"></el-input>
          </el-form-item>
          <el-form-item label="宣教形式" prop="name">
            <el-select v-model="ruleForm.shape" placeholder="请选择">
              <el-option
                v-for="item in xjxsoptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="宣教分类" prop="region">
            <el-select
              v-model="ruleForm.classify"
              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: 30%">
              <el-input
                v-model="ruleForm.preachname"
                placeholder="请输入标题"
              ></el-input>
            </div>
          </el-form-item>
          <el-form-item label="宣教描述" prop="preachcontent">
            <div style="width: 60%">
              <el-input
                type="textarea"
                :rows="2"
                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="sickness">
            <div style="width: 40%">
              <el-upload
                class="upload-demo"
                action="https://jsonplaceholder.typicode.com/posts/"
                :on-change="handleChange"
                :file-list="fileList"
              >
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">
                  只能上传jpg/png/xsl文件，且不超过50mb
                </div>
              </el-upload>
            </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
                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-select
                  v-model="ruleForm.isavailable"
                  size="medium"
                  filterable
                  placeholder="请选择分类"
                >
                  <el-option
                    class="ruleFormaa"
                    v-for="item in usable"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select> </el-form-item
            ></el-col>
          </el-row>
          <el-form-item label="宣教方式" prop="region">
            <el-select
              v-model="ruleForm.suitway"
              size="medium"
              multiple
              filterable
              placeholder="请选择分类"
            > 
            >
              <el-option
                class="ruleFormaa"
                v-for="item in options"
                :key="item.value"
                v-for="item in mode"
                :key="item.label"
                :label="item.label"
                :value="item.value"
                :value="item.label"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="适用疾病" prop="sickness">
          <el-form-item label="适用疾病" prop="region">
            <div class="xinz-inf">
              <el-tag
                :key="item.icd10name"
                type="warning"
                v-for="item in illnesslist"
                closable
                :disable-transitions="false"
                @close="handleCloseillness(item)"
              >
                {{ item.icd10name }}
              </el-tag>
              <el-select
                v-model="inputValue"
                v-if="illnessVisible"
                @change="illnessConfirm"
                :remote-method="remoteMethod"
                filterable
                remote
                allow-create
                default-first-option
                placeholder="请选择/查询"
                :loading="loading"
              >
                <el-option
                  v-for="item in optionsillness"
                  :key="item.icdid"
                  :label="item.icdname"
                  :value="item.icdid"
                >
                </el-option>
              </el-select>
              <el-button
                v-else
                class="button-new-tag"
                size="small"
                @click="illnessshowInput"
                >+ 新增疾病</el-button
              >
            </div>
          </el-form-item>
          <el-form-item label="适用院区" prop="region">
            <el-select
              v-model="ruleForm.sickness"
              v-model="ruleForm.campus"
              size="medium"
              multiple
              filterable
              placeholder="请选择"
              placeholder="请选择分类"
            >
              <el-option
                v-for="item in sicknessoptions"
                class="ruleFormaa"
                v-for="item in courtyardlist"
                :key="item.value"
                :label="item.label"
                :value="item.value"
@@ -70,184 +269,224 @@
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="活动形式" prop="desc">
            <el-input
              :rows="4"
              type="textarea"
              v-model="ruleForm.desc"
              maxlength="400"
              show-word-limit
            ></el-input>
          <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="submitForm('ruleForm')"
            <el-button type="success" @click="nextstep('ruleForm')"
              >下一步</el-button
            >
            <el-button @click="resetForm('ruleForm')">重置</el-button>
            <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 v-if="Editprogress == 2">
        <div class="leftvlue-jbxx">宣教内容</div>
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="宣教介绍" prop="desc">
            <el-cascader
              class="demo-cascader"
              v-model="ruleForm.templatevalue"
              :options="asoptions"
              :props="{ expandTrigger: 'hover' }"
            ></el-cascader>
            <el-select v-model="ruleForm.data2" placeholder="提交提示">
              <el-option
                v-for="item in asoptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
        <el-row :gutter="20">
          <el-col :span="4"><div class="leftvlue-jbxx">宣教内容</div></el-col>
          <el-col :span="12">
            <div>
              <el-button @click="laststep('ruleForm')">上一步</el-button>
              <el-button type="success" @click="Departmenttreatment('ruleForm')"
                >保存</el-button
              >
              </el-option>
            </el-select>
            <div style="display: flex; margin-top: 20px">
              <div class="PreviewTemplate" @click="PreviewTemplate()">
                预览模版
              <el-button type="warning" @click="Departmenttreatment('ruleForm')"
                >另存新版本</el-button
              >
              <el-button type="info" @click="closeFm('ruleForm')"
                >关闭</el-button
              >
            </div></el-col
          >
        </el-row>
        <el-row>
          <el-col :span="24">
            <div style="display: flex; margin-left: 66px; margin-bottom: 10px">
              <div
                v-for="item in variablelist"
                class="tsgname"
                @click="tsgnameto(item)"
              >
                {{ item.variatename }}
              </div>
              <el-button type="primary">确认引用</el-button>
            </div>
          </el-form-item>
          <el-form-item label="活动形式" prop="desc">
            <el-input type="textarea" v-model="ruleForm.desc"></el-input>
          </el-form-item>
          <el-form-item label="活动形式" prop="desc">
            <el-input type="textarea" v-model="ruleForm.desc"></el-input>
            <div class="addtopic">
              <el-select
                v-model="addvalue"
                @change="changeaddtopic"
                class="addtopic-input"
              >
          </el-col></el-row
        >

        <div>
          <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.shape" placeholder="请选择内容形式">
                <el-option
                  v-for="item in options"
                  v-for="item in xjxsoptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>

            <div class="presentation">
              <div class="presentation-left">
                <el-table v-loading="loading" :data="userList">
                  <el-table-column
                    label="序号"
                    align="center"
                    key="userid"
                    prop="userid"
                  />
                  <el-table-column
                    label="题目"
                    align="center"
                    key="userName"
                    prop="userName"
                    :show-overflow-tooltip="true"
                  />

                  <el-table-column
                    label="操作"
                    align="center"
                    width="300"
                    class-name="small-padding fixed-width"
                  >
                    <template slot-scope="scope">
                      <!-- <el-button
                        size="medium"
                        type="text"
                        @click="goQRCode(scope.row)"
                        v-hasPermi="['system:user:edit']"
                      >
                        <span class="button-text"
                          ><i class="el-icon-edit"></i>二维码</span
                        ></el-button
                      >
                      <el-button
                        size="medium"
                        type="text"
                        @click="ViewQuestionnaire(scope.row)"
                        v-hasPermi="['system:user:edit']"
                        ><span class="button-textck"
                          ><i class="el-icon-edit"></i>查看</span
                        ></el-button
                      > -->
                      <el-button
                        size="medium"
                        type="text"
                        @click="handleUpdate(scope.row)"
                        v-hasPermi="['system:user:edit']"
                        ><span class="button-textxg"
                          ><i class="el-icon-scissors"></i>修改</span
                        ></el-button
                      >
                      <el-button
                        size="medium"
                        type="text"
                        @click="handleDelete(scope.row)"
                        v-hasPermi="['system:user:remove']"
                        ><span class="button-textsc"
                          ><i class="el-icon-delete"></i>删除</span
                        ></el-button
                      >
                    </template>
                  </el-table-column>
                </el-table>

                <pagination
                  v-show="total > 0"
                  :total="total"
                  :page.sync="queryParams.pageNum"
                  :limit.sync="queryParams.pageSize"
                  @pagination="getList"
                />
              </div>
              <div class="presentation-right">
                <div class="headline">题目设置详情</div>
                <div>题目标题：<span>这家机构怎么样</span></div>
                <div>是否必答：<span>是</span> 是否隐藏：<span>否</span></div>
                <div class="headline">选项设置</div>
                <div>
                  <p>选项1:<span>医疗机构</span></p>
                  <p>
                    填写明细：<span>无</span> 异常选项：<span>无</span>
                    分值：<span>3</span>
                  </p>
                  <p>选中提示：<span>这个题有点难请注意</span></p>
                  <p>选中跳转：<span>无</span></p>
                </div>
              </div>
            </div>
          </el-form-item>
          <el-form-item>
            <el-button type="success" @click="submitForm('ruleForm')"
              >立即创建</el-button
            </el-form-item>
          </el-form>
        </div>
        <div>
          <div id="quillEditorQiniu">
            <!-- 基于elementUi的上传组件 el-upload begin-->
            <el-upload
              class="avatar-uploader"
              :action="uploadImgUrl"
              :accept="'image/*,video/*'"
              :show-file-list="false"
              :on-success="uploadEditorSuccess"
              :on-error="uploadEditorError"
              :before-upload="beforeEditorUpload"
              :headers="headers"
            >
            <el-button type="primary" @click="laststep()">上一步</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
            </el-upload>
            <!-- 基于elementUi的上传组件 el-upload end-->
            <quill-editor
              class="editor"
              v-model="content"
              ref="customQuillEditor"
              :options="editorOption"
            >
            </quill-editor>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { quillEditor } from "vue-quill-editor";
import {
  getheLibraryAssort,
  delheLibraryAssort,
  addheLibraryAssort,
  addtargetillness,
  getlibrarylist,
  dellibraryinfo,
  deltargetillness,
  compilelibrary,
  getlibraryinfo,
  getillnesslist,
  illnesslistget,
  getillness,
} from "@/api/AiCentre/index";
import { listDept } from "@/api/system/dept";
// import * as Quill from "quill";
import Quill from "quill";
import { listtag } from "@/api/system/label";
import store from "@/store";

// 这里引入修改过的video模块并注册
import Video from "./video";
Quill.register(Video, true);
//获取登录token，引入文件，如果只是简单测试，没有上传文件是否登录的限制的话，
//这个token可以不用获取，文件可以不引入，把上面对应的上传文件携带请求头  :headers="headers" 这个代码删掉即可
import { getToken } from "@/utils/auth";
const toolbarOptions = [
  ["bold", "italic", "underline", "strike"], // toggled buttons
  ["blockquote", "code-block"],

  [{ header: 1 }, { header: 2 }], // custom button values
  [{ list: "ordered" }, { list: "bullet" }],
  [{ script: "sub" }, { script: "super" }], // superscript/subscript
  [{ indent: "-1" }, { indent: "+1" }], // outdent/indent
  [{ direction: "rtl" }], // text direction

  [{ size: ["small", false, "large", "huge"] }], // custom dropdown
  [{ header: [1, 2, 3, 4, 5, 6, false] }],

  [{ color: [] }, { background: [] }], // dropdown with defaults from theme
  [{ font: [] }],
  [{ align: [] }],
  ["link", "image", "video"],
  ["clean"], // remove formatting button
];

export default {
  data() {
    return {
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      uploadImgUrl: process.env.VUE_APP_BASE_API + "/common/upload",
      uploadUrlPath: "没有文件上传",
      quillUpdateImg: false,
      fileList: [
        {
          name: "food.jpeg",
          url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
        },
        {
          name: "food2.jpeg",
          url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
        },
      ],
      content: "", //最终保存的内容
      dynamicTags: [],
      inputVisible: false,
      illnessVisible: false,
      inputValue: "",
      // 富文本
      editorOption: {
        placeholder: "你想说什么？",
        modules: {
          imageResize: {
            displayStyles: {
              backgroundColor: "black",
              border: "none",
              color: "white",
            },
            modules: ["Resize", "DisplaySize", "Toolbar"],
          },
          toolbar: {
            container: toolbarOptions, // 工具栏
            handlers: {
              image: function (value) {
                if (value) {
                  document
                    .querySelector("#quillEditorQiniu .avatar-uploader input")
                    .click();
                } else {
                  this.quill.format("image", false);
                }
              },
              video: function (value) {
                if (value) {
                  document
                    .querySelector("#quillEditorQiniu .avatar-uploader input")
                    .click();
                } else {
                  this.quill.format("video", false);
                }
              },
            },
          },
        },
      },

      sidecolumnrabs: "left", //方向
      Editprogress: 1, //编辑进度
      currentVersion: "1.2.3", //当前版本
@@ -259,373 +498,39 @@
      // 总条数
      total: 1,
      ruleForm: {
        name: "",
        shape: "",
        classify: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
        templatevalue: "",
        data2: "",
        campus: [],
        heLibraryTagList: [],
        tempDetpRelevances: [],
        version: "1.0.1",
      },
      rules: {},
      rulesa: {
        name: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        region: [
          { required: true, message: "请选择活动区域", trigger: "change" },
        ],
        date1: [
          {
            type: "date",
            required: true,
            message: "请选择日期",
            trigger: "change",
          },
        ],
        date2: [
          {
            type: "date",
            required: true,
            message: "请选择时间",
            trigger: "change",
          },
        ],
        type: [
          {
            type: "array",
            required: true,
            message: "请至少选择一个活动性质",
            trigger: "change",
          },
        ],
        resource: [
          { required: true, message: "请选择活动资源", trigger: "change" },
        ],
        desc: [{ required: true, message: "请填写活动形式", trigger: "blur" }],
      },
      options: [
        {
          value: "选项1",
          label: "疾病宣教",
        },
        {
          value: "选项2",
          label: "入院宣教",
        },
        {
          value: "选项3",
          label: "手术宣教",
        },
        {
          value: "选项4",
          label: "护理宣教",
        },
      ],
      rulesa: {},
      mode: [],
      editableTabs: [],
      sortlist: [],
      usable: [],
      courtyardlist: [],
      precedencetype: [],
      optionsillness: [],
      illnesslistapi: [],
      illnesslist: [],
      options: [],
      optionstag: [],
      deptList: [],
      tempDetpRelevanceslist: [],
      props: { multiple: true, value: "deptId", label: "deptName" },
      xjxsoptions: [
        {
          value: "选项1",
          value: "1",
          label: "图文",
        },
        {
          value: "选项2",
          value: "2",
          label: "视频",
        },
        {
          value: "选项3",
          value: "3",
          label: "音频",
        },
      ],
      sicknessoptions: [
        {
          value: 1,
          label: "高血压",
        },
        {
          value: 2,
          label: "心脏病",
        },
        {
          value: 3,
          label: "糖尿病",
        },
        {
          value: 4,
          label: "脊椎炎",
        },
      ],
      asoptions: [
        {
          value: "zhinan",
          label: "指南",
          children: [
            {
              value: "shejiyuanze",
              label: "设计原则",
              children: [
                {
                  value: "yizhi",
                  label: "一致",
                },
                {
                  value: "fankui",
                  label: "反馈",
                },
                {
                  value: "xiaolv",
                  label: "效率",
                },
                {
                  value: "kekong",
                  label: "可控",
                },
              ],
            },
            {
              value: "daohang",
              label: "导航",
              children: [
                {
                  value: "cexiangdaohang",
                  label: "侧向导航",
                },
                {
                  value: "dingbudaohang",
                  label: "顶部导航",
                },
              ],
            },
          ],
        },
        {
          value: "zujian",
          label: "组件",
          children: [
            {
              value: "basic",
              label: "Basic",
              children: [
                {
                  value: "layout",
                  label: "Layout 布局",
                },
                {
                  value: "color",
                  label: "Color 色彩",
                },
                {
                  value: "typography",
                  label: "Typography 字体",
                },
                {
                  value: "icon",
                  label: "Icon 图标",
                },
                {
                  value: "button",
                  label: "Button 按钮",
                },
              ],
            },
            {
              value: "form",
              label: "Form",
              children: [
                {
                  value: "radio",
                  label: "Radio 单选框",
                },
                {
                  value: "checkbox",
                  label: "Checkbox 多选框",
                },
                {
                  value: "input",
                  label: "Input 输入框",
                },
                {
                  value: "input-number",
                  label: "InputNumber 计数器",
                },
                {
                  value: "select",
                  label: "Select 选择器",
                },
                {
                  value: "cascader",
                  label: "Cascader 级联选择器",
                },
                {
                  value: "switch",
                  label: "Switch 开关",
                },
                {
                  value: "slider",
                  label: "Slider 滑块",
                },
                {
                  value: "time-picker",
                  label: "TimePicker 时间选择器",
                },
                {
                  value: "date-picker",
                  label: "DatePicker 日期选择器",
                },
                {
                  value: "datetime-picker",
                  label: "DateTimePicker 日期时间选择器",
                },
                {
                  value: "upload",
                  label: "Upload 上传",
                },
                {
                  value: "rate",
                  label: "Rate 评分",
                },
                {
                  value: "form",
                  label: "Form 表单",
                },
              ],
            },
            {
              value: "data",
              label: "Data",
              children: [
                {
                  value: "table",
                  label: "Table 表格",
                },
                {
                  value: "tag",
                  label: "Tag 标签",
                },
                {
                  value: "progress",
                  label: "Progress 进度条",
                },
                {
                  value: "tree",
                  label: "Tree 树形控件",
                },
                {
                  value: "pagination",
                  label: "Pagination 分页",
                },
                {
                  value: "badge",
                  label: "Badge 标记",
                },
              ],
            },
            {
              value: "notice",
              label: "Notice",
              children: [
                {
                  value: "alert",
                  label: "Alert 警告",
                },
                {
                  value: "loading",
                  label: "Loading 加载",
                },
                {
                  value: "message",
                  label: "Message 消息提示",
                },
                {
                  value: "message-box",
                  label: "MessageBox 弹框",
                },
                {
                  value: "notification",
                  label: "Notification 通知",
                },
              ],
            },
            {
              value: "navigation",
              label: "Navigation",
              children: [
                {
                  value: "menu",
                  label: "NavMenu 导航菜单",
                },
                {
                  value: "tabs",
                  label: "Tabs 标签页",
                },
                {
                  value: "breadcrumb",
                  label: "Breadcrumb 面包屑",
                },
                {
                  value: "dropdown",
                  label: "Dropdown 下拉菜单",
                },
                {
                  value: "steps",
                  label: "Steps 步骤条",
                },
              ],
            },
            {
              value: "others",
              label: "Others",
              children: [
                {
                  value: "dialog",
                  label: "Dialog 对话框",
                },
                {
                  value: "tooltip",
                  label: "Tooltip 文字提示",
                },
                {
                  value: "popover",
                  label: "Popover 弹出框",
                },
                {
                  value: "card",
                  label: "Card 卡片",
                },
                {
                  value: "carousel",
                  label: "Carousel 走马灯",
                },
                {
                  value: "collapse",
                  label: "Collapse 折叠面板",
                },
              ],
            },
          ],
        },
        {
          value: "ziyuan",
          label: "资源",
          children: [
            {
              value: "axure",
              label: "Axure Components",
            },
            {
              value: "sketch",
              label: "Sketch Templates",
            },
            {
              value: "jiaohu",
              label: "组件交互文档",
            },
          ],
        },
      ],
      valssu: [
@@ -636,84 +541,364 @@
        },
      ],
      addvalue: "添加题目",
      // 题目表格数据
      userList: [
        {
          userid: "1",
          userName: "一号宣教",
        },
        {
          userid: "2",
          userName: "二号宣教",
        },
        {
          userid: "3",
          userName: "三号宣教",
        },
        {
          userid: "4",
          userName: "四号宣教",
        },

      variablelist: [
        { variatename: "姓名", variate: "${name}", default: 1 },
        { variatename: "电话", variate: "${phone}", default: 1 },
        { variatename: "病情", variate: "${illness}", default: 1 },
      ],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        userName: undefined,
        phonenumber: undefined,
        status: undefined,
        deptId: undefined,
        IDnumber: undefined,
      },
    };
  },

  created() {},
  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;
  },
  watch: {
    content(newVal, oldVal) {
      //this.$emit('input', newVal);
      console.log(newVal);
      console.log(oldVal);
    },
  },

  methods: {
    submitForm(formName) {
      if (this.Editprogress <= 3) {
        return this.Editprogress++;
    processElement(element) {
      return { ...element, isoperation: null };
    },
    // 获取页面数据
    getList() {
      this.loading = true;
      this.id = this.$route.query.id;
      if (this.id) {
        getlibraryinfo({ id: this.id }).then((res) => {
          this.ruleForm = res.data[0];
          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);
          }
          if (this.ruleForm.suitway) {
            this.ruleForm.suitway = this.ruleForm.suitway.split(",");
          }
          this.variablelist = this.ruleForm.otherdata
            ? JSON.parse(this.ruleForm.otherdata)
            : this.variablelist;
        });
      }
      this.rules = this.rulesa;
      //   提交
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
      // 宣教分类
      getheLibraryAssort({}).then((res) => {
        this.sortlist = res.rows;
      });
      // 部门
      listDept(this.queryParams).then((response) => {
        this.deptList = this.handleTree(response.data, "deptId");
      });
      this.loading = false;
    },

    submitForm(formName) {
      let tgs = [];
      this.dynamicTags.forEach((item) => {
        tgs.push(item.tagname);
      });
      this.ruleForm.campus = this.ruleForm.campus.join(",");
      this.ruleForm.labelInfo = tgs.length != 0 ? tgs.join(", ") : "";
      this.ruleForm.otherdata = JSON.stringify(this.variablelist);
      console.log(22);
      this.ruleForm.suitway =
        this.ruleForm.suitway.length != 0
          ? this.ruleForm.suitway.join(",")
          : "";
      if (this.id) {
        this.ruleForm.isoperation = 2;
      } else {
        this.ruleForm.isoperation = 1;
      }
      this.illnesslist.forEach((item, index) => {
        if (!item.id) {
          addtargetillness(item).then((res) => {});
        }
      });
    },
    /** 查询题目列表 */
    getList() {
      //   this.loading = true;
      listUser().then((response) => {
        console.log(response);
        // this.userList = response.data;
        // this.total = response.total;
        // this.loading = false;
        console.log(this.userList);
      if (this.illnesslistapi.length) {
        deltargetillness(this.illnesslistapi.join(",")).then((res) => {});
      }
      compilelibrary(this.ruleForm).then((res) => {
        this.$modal.msgSuccess("编辑成功");
        this.$router.go(-1);
      });
      //   const { rows } = await listUser();
      //   console.log(rows);
      //   this.list = rows;
    },
    changeaddtopic(val) {
      console.log(11);
      console.log(val);
      this.addvalue = "添加题目";
    // 下一步
    nextstep() {
      if (this.Editprogress <= 1) {
        return this.Editprogress++;
      }
    },
    // 上一步
    laststep() {
      this.Editprogress = this.Editprogress - 1;
    },
    // 关闭
    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) => {
            console.log("dept");
            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);
      // this.submitForm();
    },
    // 保存题目信息
    Saveproblem() {},
    /** 查询题目列表 */

    // 新增变量
    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("未找到该对象");
      }
    },
    // 控制文件
    handleChange(file, fileList) {
      this.fileList = fileList.slice(-3);
    },
    // 标签-----------------
    gettabList() {
      const tagqueryParams = {
        pageNum: 1,
        pageSize: 1000,
        tagcategoryid: "0",
      };
      listtag(tagqueryParams).then((response) => {
        this.optionstag = response.rows;
      });
    },
    handleClosetag(tag) {
      console.log(tag);
      const lindex = this.ruleForm.heLibraryTagList.findIndex(
        (item) => item.tagname == tag.tagname
      );
      console.log(lindex);
      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() {
      this.illnesslistapi = [];
      const illnessqueryParams = {
        pageNum: 1,
        pageSize: 100,
      };
      getillnesslist(illnessqueryParams).then((response) => {
        this.optionsillness = response.rows;
      });
      getillness({ outid: this.$route.query.id, type: 6 }).then((res) => {
        this.illnesslist = res.rows;
      });
    },
    handleCloseillness(tag) {
      this.illnesslist.splice(this.illnesslist.indexOf(tag), 1);
      if (tag.id) {
        this.illnesslistapi.push(tag.id);
      }
    },
    remoteMethod(value) {
      const illnessqueryParams = {
        pageNum: 1,
        pageSize: 100,
        icdname: value,
      };
      this.loading = true;
      setTimeout(() => {
        this.loading = false;
        getillnesslist(illnessqueryParams).then((response) => {
          this.optionsillness = response.rows;
        });
      }, 200);
    },
    illnessConfirm(item) {
      let opeavalue = {};
      let tagname = this.inputValue;
      illnesslistget(item).then((res) => {
        opeavalue = res.data;
        opeavalue.outid = this.id;
        opeavalue.type = 6;
        opeavalue.icd10id = opeavalue.icdid;
        opeavalue.icd10name = opeavalue.icdname;
        opeavalue.icd10code = opeavalue.icdcode;
        if (tagname) {
          this.illnesslist.push(opeavalue);
        }
      });
      this.illnessVisible = false;
      this.inputValue = "";
    },
    
    illnessshowInput() {
      this.illnessVisible = true;
    },
    // --------------------------

    // 预览模版
    PreviewTemplate() {
      this.drawer = true;
    },
    laststep() {
      this.Editprogress--;
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },

    //上传图片之前async
    beforeEditorUpload(res, file) {
      //显示上传动画
      this.quillUpdateImg = true;
      //  const res1 = await uploadImage()
      // console.log(res1,'=====');
      // this.$emit('before',res, file)
      console.log(res);
      console.log(file);
    },
    // 上传图片成功
    uploadEditorSuccess(res, file) {
      console.log("上传成功");
      // this.$emit('upload',res, file)
      console.log(res, file);
      //拼接出上传的图片在服务器的完整地址
      let imgUrl = res.url;
      let type = imgUrl.substring(imgUrl.lastIndexOf(".") + 1);
      console.log(type);
      // 获取富文本组件实例
      let quill = this.$refs.customQuillEditor.quill;
      // 获取光标所在位置
      let length = quill.getSelection().index;
      // 插入图片||视频  res.info为服务器返回的图片地址
      if (type == "mp4" || type == "MP4") {
        window.jsValue = imgUrl;
        quill.insertEmbed(length, "video", imgUrl);
      } else {
        quill.insertEmbed(length, "image", imgUrl);
      }
      // 调整光标到最后
      quill.setSelection(length + 1);
      //取消上传动画
      this.quillUpdateImg = false;
    },
    // 上传(文件)图片失败
    uploadEditorError(res, file) {
      console.log(res);
      console.log(file);
      //页面提示
      this.$message.error("上传图片失败");
      //取消上传动画
      this.quillUpdateImg = false;
    },
    //上传组件返回的结果
    uploadResult: function (res) {
      this.uploadUrlPath = res;
    },
  },
};
@@ -721,17 +906,17 @@

<style lang="scss" scoped>
.Questionnairemanagement {
  display: flex;
  // display: flex;
}
.sidecolumn {
  width: 300px;
  min-height: 100vh;
  text-align: center;
  // width: 300px;
  // min-height: 100vh;
  // text-align: center;
  //   display: flex;
  //   margin-top: 20px;
  margin: 20px;
  margin-bottom: 0;
  padding: 30px;
  padding: 20px;
  background: #edf1f7;
  border: 1px solid #dcdfe6;
  -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12),
@@ -740,9 +925,7 @@
.leftvlue {
  //   display: flex;
  //   flex: 1;
  width: 80%;
  margin-top: 20px;
  //   margin: 20px;
  margin: 20px;
  padding: 30px;
  background: #ffff;
  border: 1px solid #dcdfe6;
@@ -767,6 +950,30 @@
    cursor: pointer;
    font-size: 20px;
    margin: 0 20px;
  }
}
.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;
  }
}
.preview-left {
@@ -831,7 +1038,7 @@
  font-size: 25px;
}
::v-deep.el-input--medium {
  font-size: 24px !important;
  font-size: 18px !important;
}
::v-deep.ruleFormaa.el-select {
  display: inline-block;
@@ -859,8 +1066,80 @@
    font-size: 24px;
  }
}
// ::v-deep.el-form-item--medium .el-form-item__content {
//   line-height: 36px;
//   display: flex;
// }
.editor {
  line-height: normal !important;
  height: 400px;
  margin-bottom: 50px;
}
.ql-snow .ql-tooltip[data-mode="link"]::before {
  content: "请输入链接地址:";
}
.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
  border-right: 0px;
  content: "保存";
  padding-right: 0px;
}

.ql-snow .ql-tooltip[data-mode="video"]::before {
  content: "请输入视频地址:";
}

.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
  content: "14px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
  content: "10px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
  content: "18px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
  content: "32px";
}

.ql-snow .ql-picker.ql-header .ql-picker-label::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::before {
  content: "文本";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
  content: "标题1";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
  content: "标题2";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
  content: "标题3";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
  content: "标题4";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
  content: "标题5";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
  content: "标题6";
}

.ql-snow .ql-picker.ql-font .ql-picker-label::before,
.ql-snow .ql-picker.ql-font .ql-picker-item::before {
  content: "标准字体";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
  content: "衬线字体";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
  content: "等宽字体";
}
</style>