完成

WXL

2023-12-15 4e32f1188e9d0cafd3511994d2d13617ca6e08f9

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

@@ -23,20 +23,6 @@
          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"
@@ -55,14 +41,125 @@
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="适用疾病" prop="sickness">
          <el-form-item label="宣教标题" prop="name">
            <div style="width: 30%">
              <el-input v-model="ruleForm.name"></el-input>
            </div>
          </el-form-item>
          <el-form-item label="通知变量" prop="name">
            <el-row v-for="item in variablelist">
              <el-col :span="4">
                <el-input v-model="item.variable"></el-input>
              </el-col>
              <el-col :span="8" :offset="1">
                <el-input v-model="item.value"></el-input>
              </el-col>
              <el-col :span="4" :offset="1">
                <el-button
                  type="success"
                  icon="el-icon-plus"
                  circle
                  @click="addvariable(item)"
                ></el-button>
                <el-button
                  type="danger"
                  icon="el-icon-delete"
                  circle
                  @click="delvariable(item)"
                ></el-button>
              </el-col>
            </el-row>
          </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"
                type="success"
                v-for="tag in dynamicTags"
                closable
                :disable-transitions="false"
                @close="handleClose(tag)"
              >
                {{ tag }}
              </el-tag>
              <el-select
                v-model="inputValue"
                v-if="inputVisible"
                @change="handleInputConfirm"
                filterable
                  allow-create
                  default-first-option
                placeholder="请选择"
              >
                <el-option
                  v-for="item in optionstag"
                  :key="item.tagname"
                    :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="currentVersion"></el-input> </el-form-item
            ></el-col>
            <el-col :span="9">
              <el-form-item label="可用状态" prop="region">
                <el-select
                  v-model="ruleForm.classify"
                  size="medium"
                  multiple
                  filterable
                  placeholder="请选择分类"
                >
                  <el-option
                    class="ruleFormaa"
                    v-for="item in options"
                    :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.sickness"
              v-model="ruleForm.way"
              size="medium"
              multiple
              filterable
              placeholder="请选择"
              placeholder="请选择分类"
            >
              <el-option
                v-for="item in sicknessoptions"
                class="ruleFormaa"
                v-for="item in xjxsoptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
@@ -70,30 +167,112 @@
              </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-select
              v-model="ruleForm.illness"
              size="medium"
              multiple
              filterable
              placeholder="请选择分类"
            >
              <el-option
                class="ruleFormaa"
                v-for="item in options"
                :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.courtyard"
              size="medium"
              filterable
              placeholder="请选择分类"
            >
              <el-option
                class="ruleFormaa"
                v-for="item in options"
                :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.administrative"
              size="medium"
              multiple
              filterable
              placeholder="请选择分类"
            >
              <el-option
                class="ruleFormaa"
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </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="info" @click="closeFm('ruleForm')"
                >关闭</el-button
              >
          </el-form-item>
        </el-form>
      </div>
      <!-- 宣教内容 -->
      <div v-if="Editprogress == 2">
        <div class="leftvlue-jbxx">宣教内容</div>
        <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="submitForm('ruleForm')"
                >保存</el-button
              >
              <el-button type="warning" @click="submitForm('ruleForm')"
                >另存新版本</el-button
              >
              <el-button type="info" @click="closeFm('ruleForm')"
                >关闭</el-button
              >
            </div></el-col
          >
        </el-row>

        <div>
          <div>
            <el-button @click="openContent" type="primary">查看元素</el-button>
          </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 xjxsoptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
        <div>
          <div id="quillEditorQiniu">
            <!-- 基于elementUi的上传组件 el-upload begin-->
            <el-upload
@@ -126,6 +305,8 @@
import { quillEditor } from "vue-quill-editor";
// import * as Quill from "quill";
import Quill from "quill";
import { listtag } from "@/api/system/label";


// 这里引入修改过的video模块并注册
import Video from "./video";
@@ -162,7 +343,21 @@
      uploadImgUrl: "/v1/admin/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,
      inputValue: "",
      // 富文本
      editorOption: {
        placeholder: "你想说什么？",
        modules: {
@@ -280,6 +475,7 @@
          label: "护理宣教",
        },
      ],
      optionstag:[],
      xjxsoptions: [
        {
          value: "选项1",
@@ -292,292 +488,6 @@
        {
          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: [
@@ -607,6 +517,12 @@
          userName: "四号宣教",
        },
      ],
      variablelist: [
        {
          variable: "paitent",
          value: "表示患者的标识",
        },
      ],
      // 查询参数
      queryParams: {
        pageNum: 1,
@@ -620,7 +536,9 @@
    };
  },

  created() {},
  created() {
    this.gettabList();
  },
  watch: {
    content(newVal, oldVal) {
      //this.$emit('input', newVal);
@@ -630,10 +548,8 @@
  },

  methods: {
    // 完成
    submitForm(formName) {
      if (this.Editprogress <= 3) {
        return this.Editprogress++;
      }
      this.rules = this.rulesa;
      //   提交
      this.$refs[formName].validate((valid) => {
@@ -645,6 +561,33 @@
        }
      });
    },
    // 下一步
    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: '已取消'
          });          
        });
    },
    // 保存题目信息
    Saveproblem(){},
    /** 查询题目列表 */
    getList() {
      //   this.loading = true;
@@ -659,17 +602,62 @@
      //   console.log(rows);
      //   this.list = rows;
    },
    changeaddtopic(val) {
      console.log(11);
      console.log(val);
      this.addvalue = "添加题目";
    /** 查询标签列表 */
    gettabList() {
      const tagqueryParams = {
        pageNum: 1,
        pageSize: 1000,
        tagcategoryid: "0",
      };
      listtag(tagqueryParams).then((response) => {
        console.log(response);
        this.optionstag = response.rows;
      });
    },
    // 新增变量
    addvariable() {
      this.variablelist.push({
        variable: "",
        value: "",
      });
    },
    // 删除变量
    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);
    },
    // 标签-----------------
    handleClose(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
    },
    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        this.dynamicTags.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = "";
    },
    showInput() {
      this.inputVisible = true;
      // 自动获取焦点
      // this.$nextTick((_) => {
      //   this.$refs.saveTagInput.$refs.input.focus();
      // });
    },
    // --------------------------

    // 预览模版
    PreviewTemplate() {
      this.drawer = true;
    },
    laststep() {
      this.Editprogress--;
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
@@ -723,9 +711,6 @@
    uploadResult: function (res) {
      this.uploadUrlPath = res;
    },
    openContent: function () {
      console.log(this.content);
    },
  },
};
</script>
@@ -778,6 +763,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 {
@@ -842,7 +851,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;