zky-admin/src/views/message/modelForm.vue

<style lang="scss" scoped>
.content {
  display: flex;
  padding: 0;
  .content-item {
    flex: 1;
    padding: 20px;
    &.middle {
      border-left: 2px solid #d8d8d8;
      border-right: 2px solid #d8d8d8;
    }
    &.right,
    &.middle {
      flex: 2;
    }
    .item-title {
      font-size: 14px;
      font-weight: bold;
      color: #666666;
      margin-bottom: 20px;
    }
    .el-row {
      margin-top: 20px;
    }
    .model {
      width: 80px;
      height: 80px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-evenly;
      &:hover {
        cursor: pointer;
        background: #f5faff;
      }
      img {
        height: 28px;
        width: 28px;
      }
      span {
        font-size: 14px;
        color: #666666;
        //    margin-top:19px;
      }
    }
    .el-form {
      // box-shadow: 0px 0px 1px 1px;
      // border-radius: 2px;
      margin-bottom: 20px;
      padding:20px;
      .el-form-item {
        background: #f5faff;
        padding: 10px 20px;
        margin-bottom: 5px;
        /deep/.el-form-item__label {
          font-size: 16px;
          color: #666666;
          display: block;
          line-height: 20px;
          margin-bottom: 10px;
          text-align: left;
        }
        /deep/.el-form-item__content {
          line-height: 20px !important;
          margin-right: 160px;
          position: relative;
          font,
          .drag {
            position: absolute;
            right: -145px;
          }
          font {
            top: 0px;
            color: #3895fe;
            font-size: 12px;
            span {
              margin-left: 5px;
              cursor: pointer;
            }
          }
          .drag {
            right: -160px;
            bottom: -3px;
          }
          div {
            font-size: 16px;
            color: #333333;
          }
          .el-radio,
          .el-checkbox {
            margin-right: 32px;
            // height: 32px;
            line-height: 20px;
          }
          .el-radio-group,
          .el-checkbox-group {
            display: flex;
            flex-direction: column;
          }
          .cus_select .el-radio,
          .el-radio__input {
            white-space: normal;
          }
          .cus_select .el-checkbox,
          .el-checkbox__input {
            white-space: normal;
          }
          .cus_select .el-checkbox__label {
            display: inline;
          }
          .el-radio__label,
          .el-checkbox__label {
            display: inline-block !important;
            width: 93%;
            vertical-align: top;
          }
          .el-radio,
          .el-checkbox {
            margin-bottom: 10px;
          }
        }
        /deep/.el-form-item__label {
          float: none;
          font-weight: bold;
        }
        &.text {
          /deep/.el-form-item__content {
            // margin-left:60px;
          }
        }
      }
    }
    // 右边
    .phone {
      width: 350px;
      height: 713px;
      background: url("../../assets/survey_bg.png") no-repeat;
      background-size: 100% auto;
      margin: auto;
    }
    .item-main {
      height: 551px;
      width: 315px;
      background: #ffffff;
      border: 1px solid #ddd;
      overflow: auto;
      position: relative;
      top: 80px;
      left: 21px;
      // display: none;
      // border: 1px solid #DDDDDD;
      // box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.13);
      border-radius: 5px;
      overflow: auto;
      .el-form.over_y {
        border: none;
        overflow: visible;
      }
    }
    // label样式
    .edit_label {
      /deep/.el-input__inner {
        background: #f5faff;
        border: 0px;
        padding: 0px;
      }
    }
    /deep/.opicon {
      font-weight: bold;
      padding: 5px;
      color: #3895fe;
    }
    .tpl_title {
      font-size: 18px;
      margin: 20px;
    }
    .tpl_form {
      margin: 0px;
      border: 1px solid #ccc;
      border-radius: 20px;
      /deep/.el-form-item {
        background: none;
      }
      /deep/.el-form-item__content {
        width: 100%;
      }
    }
    .survey_logo {
      width: 145px;
      position: relative;
      top: 5px;
      left: 20px;
    }
    .item_require {
      position: absolute;
      top: 0px;
      right: 35px !important;
      /deep/.el-checkbox__label {
        padding-left: 5px;
        color:#666666;
      }
      /deep/.el-checkbox__inner{
        border-color:#666666;
      }
      /deep/.el-checkbox__inner:hover{
        border-color:#666666;
      }
      /deep/.el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner{
        background-color:#666666;
        border-color:#666666;
      }
    }
    .require::before {
      content: "*";
      color: #f56c6c;
      margin-right: 4px;
      position: absolute;
      left: -10px;
    }
  }
  /deep/.radio .el-input {
    width: 85%;
  }
  /deep/.checkbox .el-input {
    width: 85%;
  }
  // 操作按钮
  .ctl_btn {
    display: inline-block;
    width: 28px;
    position: absolute;
    top: 0px;
  }
  .ctl_btn_change {
    top: 30px;
    right: -20px;
    color: #409EFF;
    width: 80px;
    font-size: 14px;
  }
  .ctl_btn_note {
    right: 20px;
    color: #ffb800;
  }
  .ctl_btn_edit {
    right: 20px;
    color: green;
  }
  .ctl_btn_del {
    right: -15px;
    color: red;
  }
  .ctl_btn_move {
    font-size: 22px;
  }
  .gdrag {
    bottom: 15px !important;
  }
  // 注释弹窗
  /deep/.noteDialog .el-form-item__content {
    margin-right: 0px !important;
    margin-left: 0px !important;
  }
  // /deep/.noteDialog .el-dialog{
  //   margin-top:20vh!important;
  // }
  /deep/.noteDialog .el-dialog__body {
    padding: 10px 20px !important;
  }
  .img_list {
    li {
      display: inline-block;
      min-width: 140px;
      height: 148px;
      margin: 10px;
      position: relative;
      overflow: hidden;
      img {
        height: 100%;
      }
      .el-icon-delete {
        color: red;
        font-size: 18px;
        cursor: pointer;
      }
      .move {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        text-align: center;
        background: rgba(0, 0, 0, 0.527);
        color: #fff;
        cursor: pointer;
      }
    }
  }
  //
  /deep/.group .el-form-item__content {
    margin-right: 0px !important;
  }
  .active_item {
    border: 2px solid #3a8ee6;
  }
  // 提示信息展示
  .noteInfoDialog {
    width: 90%;
    margin: 0 auto;
    height: 300px;
    border: 1px solid #ccc;
    position: absolute;
    top: 10vh;
    left: 5%;
    background: #ffffff;
  }
  .noteInfoDialog .body {
    width: 100%;
    margin: 0 auto;
    height: 300px;
    // border:1px solid red;
    position: absolute;
    // top:10vh;
    // left:5%;
  }
}
.tool_text {
  width: 315px;
  p {
    margin-bottom: 10px;
  }
  .toolText_img {
    img {
      width: 100px;
      height: 100px;
      margin-bottom: 5px;
      margin-right: 5px;
    }
    // img:nth-child(odd) {
    //   margin-right: 5px;
    // }
  }
}
.group_title {
  font-size: 16px;
  font-weight: bold;
  padding: 10px 20px;
}
.groupMain {
  border: 1px solid #ccc;
  border-radius: 5px;
  margin: 20px;
}
// /deep/.widgetItem{ 
//   .el-form-item__label{
//   float:left!important;
//   }
// }
</style>
<template>
  <section>
    <p><span>信息管理></span>新增模板</p>
    <div class="content">
      <div class="content-item">
        <div class="item-title">模板组件</div>
        <el-row>
          <el-col :span="12">
            <div class="model" @click="addWidget(0)">
              <img src="../../assets/slt_small.png" alt="" />
              <span>单行文本</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="model" @click="addWidget(1)">
              <img src="../../assets/mlt_small.png" alt="" />
              <span>多行文本</span>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <div class="model" @click="addWidget(2)">
              <img src="../../assets/radio_small.png" alt="" />
              <span>单选统计</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="model" @click="addWidget(3)">
              <img src="../../assets/checked_small.png" alt="" />
              <span>多选统计</span>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <div class="model" @click="addWidget(4)">
              <img src="../../assets/upload_small.png" alt="" />
              <span>图片上传</span>
            </div>
          </el-col>
          <!-- <el-col :span='12'>
                        <div class='model' @click="addWidget(5)">
                            <img src="../../assets/file_small.png" alt="">
                            <span>文件上传</span>
                        </div>
                    </el-col> -->
          <el-col :span="12">
            <div class="model" @click="addWidget(6)">
              <img src="../../assets/group_small.png" alt="" />
              <span>域组件</span>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="content-item middle">
        <div class="item-title">编辑模板-{{ title }}</div>

        <el-form
          size="small"
          label-width=""
          label-position="top"
          style="box-shadow: 0px 0px 1px 1px;border-radius: 2px;"
          class="over_y"
        >
          <!-- handle=".dargBtn"  触发拖拽事件的按钮类名 filter=".undraggable" 不可拖拽的元素的类名 -->
          <vuedraggable class="wrapper" v-model="widgetList" handle=".dargBtn">
            <transition-group>
              <el-form-item
                v-for="(item, index) in widgetList"
                :key="index"
                :prop="item.label"
                :class="item.active == 1 ? 'active_item' : 'widgetItem'"
                @click.native.self="activeItem(index)"
                :label="index+1+'、'"
              >
                <section v-if="item.type == 'input'">
                  <el-input
                    :readonly="item.edit"
                    v-model="item.label"
                    :class="[
                      item.edit ? 'edit_label' : '',
                      item.require ? 'require' : '',
                    ]"
                  ></el-input>
                  <el-input
                    placeholder="请输入"
                    v-model="item.placeholder"
                  ></el-input>
                  <font>
                    <el-checkbox class="item_require" v-model="item.require"
                      >必填</el-checkbox
                    >
                    <span class="ctl_btn ctl_btn_note" @click="addNote(item)"
                      >注释</span
                    >
                    <span
                      class="ctl_btn ctl_btn_del"
                      @click="widgetList.splice(index, 1)"
                      >删除</span
                    >
                  </font>
                  <el-button type="primary" class="dargBtn drag" size="mini"
                    >拖拽移动顺序</el-button
                  >
                </section>
                <section v-if="item.type == 'textarea'">
                  <el-input
                    :readonly="item.edit"
                    v-model="item.label"
                    :class="[
                      item.edit ? 'edit_label' : '',
                      item.require ? 'require' : '',
                    ]"
                  ></el-input>
                  <el-input
                    type="textarea"
                    placeholder="请输入"
                    v-model="item.placeholder"
                  ></el-input>
                  <font>
                    <el-checkbox class="item_require" v-model="item.require"
                      >必填</el-checkbox
                    >
                    <span class="ctl_btn ctl_btn_note" @click="addNote(item)"
                      >注释</span
                    >
                    <span
                      @click="widgetList.splice(index, 1)"
                      class="ctl_btn ctl_btn_del"
                      >删除</span
                    >
                  </font>
                  <el-button type="primary" class="dargBtn drag" size="mini"
                    >拖拽移动顺序</el-button
                  >
                </section>
                <section v-if="item.type == 'radio'" class="radio">
                  <el-input
                    :readonly="item.edit"
                    v-model="item.label"
                    :class="[
                      item.edit ? 'edit_label' : '',
                      item.require ? 'require' : '',
                    ]"
                  ></el-input
                  >（单选）
                  <el-radio-group>
                    <el-radio
                      :label="iitem.label"
                      v-for="(iitem, index) in item.items"
                      :key="'r' + index"
                    >
                      <el-input
                        :readonly="item.edit"
                        v-model="iitem.label"
                        :class="item.edit ? 'edit_label' : ''"
                      ></el-input>
                      <template v-if="!item.edit">
                        <i
                          class="el-icon-minus opicon"
                          @click="minusOption(item.items, index)"
                        ></i
                        ><i
                          class="el-icon-plus opicon"
                          @click="plusOption(item.items, index)"
                        ></i>
                      </template>
                    </el-radio>
                  </el-radio-group>
                  <font>
                    <el-checkbox class="item_require" v-model="item.require"
                      >必填</el-checkbox
                    >
                    <span class="ctl_btn ctl_btn_note" @click="addNote(item)"
                      >注释</span
                    >
                    <span
                      class="ctl_btn ctl_btn_change"
                      @click="item.type = 'checkbox',item.cntype='(多选)'"
                      >切换成多选</span
                    >
                    <span
                      @click="widgetList.splice(index, 1)"
                      class="ctl_btn ctl_btn_del"
                      >删除</span
                    >
                  </font>
                  <el-button type="primary" class="dargBtn drag" size="mini"
                    >拖拽移动顺序</el-button
                  >
                </section>
                <section v-if="item.type == 'checkbox'" class="checkbox">
                  <el-input
                    :readonly="item.edit"
                    v-model="item.label"
                    :class="[
                      item.edit ? 'edit_label' : '',
                      item.require ? 'require' : '',
                    ]"
                  ></el-input
                  >（多选）
                  <el-radio-group>
                    <el-checkbox
                      :label="iitem.label"
                      v-for="(iitem, index) in item.items"
                      :key="'c' + index"
                    >
                      <el-input
                        :readonly="item.edit"
                        v-model="iitem.label"
                        :class="item.edit ? 'edit_label' : ''"
                      ></el-input>
                      <template v-if="!item.edit">
                        <i
                          class="el-icon-minus opicon"
                          @click="minusOption(item.items, index)"
                        ></i
                        ><i
                          class="el-icon-plus opicon"
                          @click="plusOption(item.items, index)"
                        ></i>
                      </template>
                    </el-checkbox>
                  </el-radio-group>
                  <font>
                    <el-checkbox class="item_require" v-model="item.require"
                      >必填</el-checkbox
                    >
                    <span class="ctl_btn ctl_btn_note" @click="addNote(item)"
                      >注释</span
                    >
                    <span
                      class="ctl_btn ctl_btn_change"
                      @click="item.type = 'radio',item.cntype='(单选)'"
                      >切换成单选</span
                    >
                    <span
                      @click="widgetList.splice(index, 1)"
                      class="ctl_btn ctl_btn_del"
                      >删除</span
                    >
                  </font>
                  <el-button type="primary" class="dargBtn drag" size="mini"
                    >拖拽移动顺序</el-button
                  >
                </section>
                <section v-if="item.type == 'image'">
                  <!-- <el-input :readonly="item.edit" v-model="item.label" :class="item.edit?'edit_label':''"></el-input> -->
                  <el-input
                    :readonly="item.edit"
                    v-model="item.label"
                    :class="[
                      item.edit ? 'edit_label' : '',
                      item.require ? 'require' : '',
                    ]"
                  ></el-input>
                  <el-upload
                    action="/api/admin/uploadfile"
                    list-type="picture-card"
                    :on-preview="handlePreview"
                    :on-remove="handleRemove"
                    :limit="9"
                  >
                    <i class="el-icon-plus"></i>
                  </el-upload>
                  <font>
                    <el-checkbox class="item_require" v-model="item.require"
                      >必填</el-checkbox
                    >
                    <span class="ctl_btn ctl_btn_note" @click="addNote(item)"
                      >注释</span
                    >
                    <span
                      @click="widgetList.splice(index, 1)"
                      class="ctl_btn ctl_btn_del"
                      >删除</span
                    >
                  </font>
                  <el-button type="primary" class="dargBtn drag" size="mini"
                    >拖拽移动顺序</el-button
                  >
                </section>
                <section v-if="item.type == 'file'">
                  <el-input
                    :readonly="item.edit"
                    v-model="item.label"
                    :class="item.edit ? 'edit_label' : ''"
                  ></el-input>
                  <el-upload
                    class="upload-demo"
                    ref="upload"
                    action="/api/admin/uploadfile"
                    :on-preview="handlePreview"
                    :on-remove="handleRemove"
                    :file-list="fileList"
                    :auto-upload="false"
                  >
                    <!-- <el-button slot="trigger" size="small" type="primary">选取文件</el-button> -->
                    <el-button
                      style="margin-left: 10px"
                      size="small"
                      type="primary"
                      plain
                      @click="submitUpload"
                      >添加文件</el-button
                    >
                    <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
                  </el-upload>
                  <font>
                    <span @click="widgetList.splice(index, 1)">删除</span>
                  </font>
                  <el-button type="primary" class="dargBtn drag" size="mini"
                    >拖拽移动顺序</el-button
                  >
                </section>

                <!-- 域组件 -->
                <section v-if="item.type == 'group'" class="group">
                  <el-input
                    :readonly="item.edit"
                    v-model="item.label"
                    :class="[
                      item.edit ? 'edit_label' : '',
                      item.require ? 'require' : '',
                    ]"
                  ></el-input>
                  <vuedraggable
                    class="wrapper"
                    v-model="item.children"
                    handle=".gdrag"
                  >
                    <transition-group>
                      <el-form-item
                        v-for="(iitem, index) in item.children"
                        :key="'g' + index"
                        :prop="iitem.label"
                      >
                        <section v-if="iitem.type == 'input'">
                          <el-input
                            :readonly="iitem.edit"
                            v-model="iitem.label"
                            :class="[
                              iitem.edit ? 'edit_label' : '',
                              iitem.require ? 'require' : '',
                            ]"
                          ></el-input>
                          <el-input
                            placeholder="请输入"
                            v-model="iitem.placeholder"
                          ></el-input>
                          <font>
                            <el-checkbox
                              class="item_require"
                              v-model="iitem.require"
                              >必填</el-checkbox
                            >
                            <span
                              class="ctl_btn ctl_btn_note"
                              @click="addNote(iitem)"
                              >注释</span
                            >
                            <span
                              class="ctl_btn ctl_btn_del"
                              @click="item.children.splice(index, 1)"
                              >删除</span
                            >
                          </font>
                          <el-button
                            type="primary"
                            class="gdrag drag"
                            size="mini"
                            plain
                            >排序</el-button
                          >
                        </section>
                        <section v-if="iitem.type == 'textarea'">
                          <el-input
                            :readonly="iitem.edit"
                            v-model="iitem.label"
                            :class="[
                              iitem.edit ? 'edit_label' : '',
                              iitem.require ? 'require' : '',
                            ]"
                          ></el-input>
                          <el-input
                            type="textarea"
                            placeholder="请输入"
                            v-model="iitem.placeholder"
                          ></el-input>
                          <font>
                            <el-checkbox
                              class="item_require"
                              v-model="iitem.require"
                              >必填</el-checkbox
                            >
                            <span
                              class="ctl_btn ctl_btn_note"
                              @click="addNote(iitem)"
                              >注释</span
                            >
                            <span
                              class="ctl_btn ctl_btn_del"
                              @click="item.children.splice(index, 1)"
                              >删除</span
                            >
                          </font>
                          <el-button
                            type="primary"
                            class="gdrag drag"
                            size="mini"
                            plain
                            >排序</el-button
                          >
                        </section>

                        <section v-if="iitem.type == 'radio'" class="radio">
                          <el-input
                            :readonly="iitem.edit"
                            v-model="iitem.label"
                            :class="[
                              iitem.edit ? 'edit_label' : '',
                              iitem.require ? 'require' : '',
                            ]"
                          ></el-input
                          >（单选）
                          <el-radio-group>
                            <el-radio
                              :label="iiitem.label"
                              v-for="(iiitem, rindex) in iitem.items"
                              :key="'gr' + rindex"
                            >
                              <el-input
                                :readonly="iitem.edit"
                                v-model="iiitem.label"
                                :class="iitem.edit ? 'edit_label' : ''"
                              ></el-input>
                              <template v-if="!iitem.edit">
                                <i
                                  class="el-icon-minus opicon"
                                  @click="minusOption(iitem.items, index)"
                                ></i
                                ><i
                                  class="el-icon-plus opicon"
                                  @click="plusOption(iitem.items, index)"
                                ></i>
                              </template>
                            </el-radio>
                          </el-radio-group>
                          <font>
                            <el-checkbox
                              class="item_require"
                              v-model="iitem.require"
                              >必填</el-checkbox
                            >
                            <span
                              class="ctl_btn ctl_btn_note"
                              @click="addNote(iitem)"
                              >注释</span
                            >
                            <span
                              class="ctl_btn ctl_btn_change"
                              @click="iitem.type = 'checkbox',item.cntype='(多选)'"
                              >切换成多选</span
                            >
                            <span
                              @click="item.children.splice(index, 1)"
                              class="ctl_btn ctl_btn_del"
                              >删除</span
                            >
                          </font>
                          <el-button
                            type="primary"
                            class="gdrag drag"
                            size="mini"
                            plain
                            >排序</el-button
                          >
                        </section>

                        <section
                          v-if="iitem.type == 'checkbox'"
                          class="checkbox"
                        >
                          <el-input
                            :readonly="iitem.edit"
                            v-model="iitem.label"
                            :class="[
                              iitem.edit ? 'edit_label' : '',
                              iitem.require ? 'require' : '',
                            ]"
                          ></el-input
                          >（多选）
                          <el-radio-group>
                            <el-checkbox
                              :label="iiitem.label"
                              v-for="(iiitem, index) in iitem.items"
                              :key="'gc' + index"
                            >
                              <el-input
                                :readonly="iitem.edit"
                                v-model="iiitem.label"
                                :class="iitem.edit ? 'edit_label' : ''"
                              ></el-input>
                              <template v-if="!iitem.edit">
                                <i
                                  class="el-icon-minus opicon"
                                  @click="minusOption(iitem.items, index)"
                                ></i
                                ><i
                                  class="el-icon-plus opicon"
                                  @click="plusOption(iitem.items, index)"
                                ></i>
                              </template>
                            </el-checkbox>
                          </el-radio-group>
                          <font>
                            <el-checkbox
                              class="item_require"
                              v-model="iitem.require"
                              >必填</el-checkbox
                            >
                            <span
                              class="ctl_btn ctl_btn_note"
                              @click="addNote(iitem)"
                              >注释</span
                            >
                            <span
                              class="ctl_btn ctl_btn_change"
                              @click="iitem.type = 'radio',item.cntype='(单选)'"
                              >切换成多选</span
                            >
                            <span
                              @click="item.children.splice(index, 1)"
                              class="ctl_btn ctl_btn_del"
                              >删除</span
                            >
                          </font>
                          <el-button
                            type="primary"
                            class="gdrag drag"
                            size="mini"
                            plain
                            >排序</el-button
                          >
                        </section>

                        <section v-if="iitem.type == 'image'">
                          <!-- <el-input :readonly="item.edit" v-model="item.label" :class="item.edit?'edit_label':''"></el-input> -->
                          <el-input
                            :readonly="iitem.edit"
                            v-model="iitem.label"
                            :class="[
                              iitem.edit ? 'edit_label' : '',
                              iitem.require ? 'require' : '',
                            ]"
                          ></el-input>
                          <el-upload
                            action="/api/admin/uploadfile"
                            list-type="picture-card"
                            :on-preview="handlePreview"
                            :on-remove="handleRemove"
                            :limit="9"
                          >
                            <i class="el-icon-plus"></i>
                          </el-upload>
                          <font>
                            <el-checkbox
                              class="item_require"
                              v-model="iitem.require"
                              >必填</el-checkbox
                            >
                            <span
                              class="ctl_btn ctl_btn_note"
                              @click="addNote(iitem)"
                              >注释</span
                            >
                            <span
                              @click="item.children.splice(index, 1)"
                              class="ctl_btn ctl_btn_del"
                              >删除</span
                            >
                          </font>
                          <el-button
                            type="primary"
                            class="gdrag drag"
                            size="mini"
                            plain
                            >排序</el-button
                          >
                        </section>
                      </el-form-item>
                    </transition-group>
                  </vuedraggable>
                </section>
                <font style="top: 0px;color:red;font-size:16px;" v-if="item.type == 'group'">
                  <span @click="widgetList.splice(index, 1)">删除</span>
                </font>
                <el-button type="primary" class="dargBtn drag" size="mini"
                  >拖拽移动顺序</el-button
                >
              </el-form-item>
            </transition-group>
          </vuedraggable>
          
        </el-form>
        <div v-if="this.widgetList.length">
            <el-button size="medium" type="primary" @click="save" style="width:95%;margin:10px;"
              >保存</el-button
            >
          </div>
        <!-- 添加注释 -->
        <el-dialog
          class="noteDialog"
          :title="dialogTitle"
          :close-on-click-modal="false"
          :visible.sync="dialogVisible"
        >
          <el-form
            size="small"
            class="preview"
            :inline="false"
            label-width="80px"
            ref="form1"
            :rules="rules"
          >
            <el-form-item>
              <el-input
                v-model="noteDesc"
                placeholder="请输入注释信息"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <ul class="img_list">
                <li v-for="(item, index) in noteImgs" :key="'note' + index">
                  <img :src="item" alt="" />
                  <p class="move">
                    <i @click="remove(index)" class="el-icon-delete"></i>
                  </p>
                </li>
                <li>
                  <el-upload
                    multiple
                    :on-success="imgchange"
                    action="/api/admin/uploadfile"
                    :show-file-list="false"
                    list-type="picture-card"
                    :limit="9"
                    :on-exceed="limitUploadNum"
                    :file-list="fileList"
                  >
                    <i class="el-icon-plus"></i>
                  </el-upload>
                </li>
              </ul>
            </el-form-item>
          </el-form>

          <span slot="footer" class="dialog-footer">
            <el-button
              size="small"
              type="normal"
              @click="(dialogVisible = false), (curNote = '<p></p>')"
              >取消</el-button
            >
            <el-button size="small" type="primary" @click="saveNote(curItem)"
              >确 定</el-button
            >
          </span>
        </el-dialog>
      </div>
      <div class="content-item right">
        <div class="item-title">效果预览</div>
        <div class="phone">
          <div class="item-main" style="position: relative">
            <!-- <img src="../../assets/survey_logo.png" alt="" class="survey_logo"> -->
            <h5 align="center" class="tpl_title">{{ title }}</h5>
            <el-form ref="form" :model="form" class="tpl_form over_y">
              <template v-for="(item, index) in widgetList">
                <el-form-item
                  v-show="item.type != 'group'"
                  :key="'review' + index"
                  :label="index+1 + '、' + item.label + item.cntype"
                >
                  <span style="color: #409eff; font-size: 12px">{{
                    item.noteDesc
                  }}</span>
                  <el-tooltip
                    class="item"
                    effect="dark"
                    content="Left Bottom 提示文字"
                    placement="bottom-end"
                  >
                  <i
                        v-show="item.noteDesc || item.noteImgs"
                        class="el-icon-info"
                        style="position: absolute; top: -28px; right: 0px"
                      ></i>
                    <div slot="content" class="tool_text">
                      
                      <p>{{ item.noteDesc }}</p>
                      <div class="toolText_img">
                        <!-- <img
                          :src="item"
                          alt=""
                          v-for="(item, index) in item.noteImgs"
                          :key="'noteimgs'+index"
                        /> -->
                      </div>
                    </div>
                  </el-tooltip>
                  <el-input
                    :class="item.require ? 'require' : ''"
                    v-if="item.type == 'input'"
                    v-model="form.label"
                    :placeholder="item.placeholder"
                  ></el-input>
                  <el-input
                    :class="item.require ? 'require' : ''"
                    v-if="item.type == 'textarea'"
                    type="textarea"
                    v-model="form.label"
                    :placeholder="item.placeholder"
                  ></el-input>
                  <el-radio-group
                    class="cus_select"
                    v-if="item.type == 'radio'"
                    :class="item.require ? 'require' : ''"
                  >
                    <el-radio
                      :label="iitem.label"
                      v-for="(iitem, index) in item.items"
                      :key="'review_r' + index"
                      >{{ iitem.label }}</el-radio
                    >
                  </el-radio-group>
                  <el-radio-group
                    class="cus_select"
                    v-if="item.type == 'checkbox'"
                    :class="item.require ? 'require' : ''"
                  >
                    <el-checkbox
                      :label="iitem.label"
                      v-for="(iitem, index) in item.items"
                      :key="'review_c' + index"
                      >{{ iitem.label }}</el-checkbox
                    >
                  </el-radio-group>
                  <el-upload
                    :class="item.require ? 'require' : ''"
                    v-if="item.type == 'image'"
                    action="/api/admin/uploadfile"
                    list-type="picture-card"
                    :on-preview="handlePreview"
                    :on-remove="handleRemove"
                  >
                    <i class="el-icon-plus"></i>
                  </el-upload>
                  <el-upload
                    v-if="item.type == 'file'"
                    class="upload-demo"
                    ref="upload"
                    action="/api/admin/uploadfile"
                    :on-preview="handlePreview"
                    :on-remove="handleRemove"
                    :file-list="fileList"
                    :auto-upload="false"
                  >
                    <!-- <el-button slot="trigger" size="small" type="primary">选取文件</el-button> -->
                    <el-button
                      style="margin-left: 10px"
                      size="small"
                      type="primary"
                      plain
                      @click="submitUpload"
                      >添加文件</el-button
                    >
                    <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
                  </el-upload>
                </el-form-item>
                <!-- 域组件展示 -->
                <section
                  class="groupMain"
                  v-if="item.type == 'group'"
                  :key="'review_gi' + index"
                >
                  <h6
                    v-if="item.type == 'group'"
                    align="left"
                    class="group_title"
                    :key="'revire_g' + index"
                  >
                    {{ item.label }}
                  </h6>
                  <template v-for="(iitem, index) in item.children">
                    <el-form-item
                      :key="'review_gc' + index"
                      :label="iitem.label + iitem.cntype"
                    >
                      <span style="color: #409eff; font-size: 12px">{{
                        iitem.noteDesc
                      }}</span>
                      <el-tooltip
                        class="item"
                        effect="dark"
                        content="Left Bottom 提示文字"
                        placement="bottom-end"
                      >
                        <i
                          v-if="iitem.noteDesc || iitem.noteImgs"
                          class="el-icon-info"
                          style="position: absolute; top: -28px; right: 0px"
                        ></i>
                        <div slot="content" class="tool_text">
                          <p>{{ iitem.noteDesc }}</p>
                          <div class="toolText_img">
                            <img
                              :src="iitem"
                              alt=""
                              v-for="(iitem, index) in iitem.noteImgs"
                              :key="'review_gc_noteimgs' + index"
                            />
                          </div>
                        </div>
                      </el-tooltip>
                      <el-input
                        :class="iitem.require ? 'require' : ''"
                        v-if="iitem.type == 'input'"
                        v-model="form.label"
                        :placeholder="iitem.placeholder"
                      ></el-input>
                      <el-input
                        :class="iitem.require ? 'require' : ''"
                        v-if="iitem.type == 'textarea'"
                        type="textarea"
                        v-model="form.label"
                        :placeholder="iitem.placeholder"
                      ></el-input>
                      <el-radio-group
                        class="cus_select"
                        v-if="iitem.type == 'radio'"
                        :class="iitem.require ? 'require' : ''"
                      >
                        <el-radio
                          :label="iiitem.label"
                          v-for="(iiitem, index) in iitem.items"
                          :key="'review_gcr' + index"
                          >{{ iiitem.label }}</el-radio
                        >
                      </el-radio-group>
                      <el-radio-group
                        class="cus_select"
                        v-if="iitem.type == 'checkbox'"
                        :class="iitem.require ? 'require' : ''"
                      >
                        <el-checkbox
                          :label="iiitem.label"
                          v-for="(iiitem, index) in iitem.items"
                          :key="'review_gcc' + index"
                          >{{ iiitem.label }}</el-checkbox
                        >
                      </el-radio-group>
                      <el-upload
                        :class="iitem.require ? 'require' : ''"
                        v-if="iitem.type == 'image'"
                        action="/api/admin/uploadfile"
                        list-type="picture-card"
                        :on-preview="handlePreview"
                        :on-remove="handleRemove"
                      >
                        <i class="el-icon-plus"></i>
                      </el-upload>
                      <el-upload
                        v-if="iitem.type == 'file'"
                        class="upload-demo"
                        ref="upload"
                        action="/api/admin/uploadfile"
                        :on-preview="handlePreview"
                        :on-remove="handleRemove"
                        :file-list="fileList"
                        :auto-upload="false"
                      >
                        <!-- <el-button slot="trigger" size="small" type="primary">选取文件</el-button> -->
                        <el-button
                          style="margin-left: 10px"
                          size="small"
                          type="primary"
                          plain
                          @click="submitUpload"
                          >添加文件</el-button
                        >
                        <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
                      </el-upload>
                    </el-form-item>
                  </template>
                </section>
                <!-- 域组件end -->
              </template>
              <el-form-item v-if="this.widgetList.length">
                <el-button
                  size="medium"
                  type="primary"
                  @click="dialogVisible = false"
                  style="width: 100%; margin-top: 20px"
                  >提交</el-button
                >
              </el-form-item>
            </el-form>
            <!-- 展示注释信息 -->
            <!-- <div class="noteInfoDialog">
                <div class="body">
                    <el-button size="mini">关闭</el-button>
                </div>
            </div> -->
          </div>
        </div>
        <!-- 注释信息展示 -->
        <el-dialog
          class="noteDialog"
          :title="dialogTitle1"
          :close-on-click-modal="false"
          :visible.sync="dialogVisible1"
        >
          <span slot="footer" class="dialog-footer">
            <el-button
              size="small"
              type="normal"
              @click="
                (dialogVisible = false), (noteForm = {}), (curNote = '<p></p>')
              "
              >取消</el-button
            >
            <el-button size="small" type="primary" @click="saveNote(curItem)"
              >确 定</el-button
            >
          </span>
        </el-dialog>
      </div>
    </div>
  </section>
</template>
<script>
import vuedraggable from "vuedraggable";
import fuEditor from "../../components/fuEditor";
export default {
  components: { vuedraggable, fuEditor },
  data() {
    return {
      fileList: [],
      noteDesc: "",
      noteImgs: [],
      realImgs: [],
      noteImgList: [],
      curItem: {},
      dialogTitle: "",
      dialogTitle1: "",
      // noteForm:{noteDesc:"",noteImgs:[]},
      curNote: "",
      dialogVisible: false,
      dialogVisible1: false,
      rules: {
        姓名: [{ required: true, message: "请输入标题", trigger: "blur" }],
      },
      title: this.$route.query.title,
      edit: 0,
      form: { name: "", page: 1, page_size: 20 },
      total: 1,
      list: [{ name: "2333" }],
      loading: false,
      checkList: [],
      input: "",
      dialogVisible: false,
      defaultProps: {},
      data: [
        {
          id: 1,
          label: "一级 1",
        },
        {
          id: 2,
          label: "一级 2",
          children: [
            {
              id: 5,
              label: "二级 2-1",
            },
            {
              id: 6,
              label: "二级 2-2",
            },
          ],
        },
      ],
      stdWidgetList: [
        {
          type: "input",
          cntype: "",
          label: "请输入标题",
          placeholder: "请输入",
          edit: false,
          require: true,
        },
        {
          type: "textarea",
          cntype: "",
          label: "请输入标题",
          placeholder: "请输入",
          edit: false,
          require: true,
        },
        {
          type: "radio",
          cntype: "（单选）",
          label: "请输入标题",
          placeholder: "请输入",
          edit: false,
          require: true,
          items: [
            { label: "选项", value: "选项值" },
            { label: "选项1", value: "选项值" },
          ],
        },
        {
          type: "checkbox",
          cntype: "（多选）",
          label: "请输入标题",
          placeholder: "请输入",
          edit: false,
          require: true,
          items: [
            { label: "选项", value: "选项值" },
            { label: "选项1", value: "选项值" },
          ],
        },
        {
          type: "image",
          cntype: "",
          label: "请输入标题",
          placeholder: "请输入",
          edit: false,
          require: true,
        },
        {
          type: "file",
          cntype: "",
          label: "请输入标题",
          placeholder: "请输入",
          edit: false,
          require: true,
        },
        {
          type: "group",
          cntype: "",
          label: "域组件",
          placeholder: "请输入",
          edit: false,
          require: true,
          children: [],
        },
      ],
      widgetList: [],
    };
  },
  methods: {
    limitUploadNum(files, fileList) {
      this.$message.alert("最多只能上传9张图片!");
    },
    showNoteInfo() {
      // this.dialogTitle1 = true
      // this.dialogVisible1 = true;
    },
    activeItem(index) {
      var widgetList = this.widgetList;
      for (let i = 0; i < widgetList.length; i++) {
        if (widgetList[i].type == "group") {
          if (i == index) {
            this.$set(widgetList[i], "active", !widgetList[i].active);
          } else {
            this.$set(widgetList[i], "active", 0);
          }
          // this.$set(widgetList[i], "active", !widgetList[i].active);
        }
      }
      this.widgetList = widgetList;
    },
    change(evt) {},
    start(evt) {},
    end(evt) {},
    upload() {},
    imgchange(file, fileList) {
      var img = this.noteImgs;
      if (img.length > 8) {
        this.$message.error("最多只能上传9张图片!");
        return;
      }
      img.push(fileList.response.data);
      this.noteImgs = img;
    },
    remove(index) {
      var img = this.noteImgs;
      img.splice(index, 1);
      this.noteImgs = img;
    },
    addNote(item) {
      this.noteDesc = item.noteDesc;
      this.noteImgs = item.noteImgs ? item.noteImgs : [];
      this.curItem = item;
      this.dialogTitle = "为" + '"' + item.label + '"添加注释信息';
      this.dialogVisible = true;
    },
    saveNote(item) {
      debugger;
      console.log(this.widgetList);
      item.noteDesc = this.noteDesc;
      item.noteImgs = this.noteImgs;
      this.curItem = item;
      this.dialogVisible = false;
    },
    handlePreview() {},
    handleRemove() {},
    unique(arr) {
      var x = new Set(arr);
      return [...x];
    },
    save() {
      let id = this.$route.query.id;
      let copyid = this.$route.query.copyid;
      let widgets = Array.from(this.widgetList);
      let flag = 0;
      let labels = [];
      widgets.forEach((item, index) => {
        labels.push(item.label);
      });
      if (labels.length != this.unique(labels).length) {
        flag = 1;
        this.$alert("题干不能相同请仔细检查数据!", "数据错误", {
          confirmButtonText: "确定",
          type: "error",
        });
        return false;
      }
      widgets.forEach((item, index) => {
        if (item.label == "") {
          flag = 2;
        }
        if (item.type == "radio" || item.type == "checkbox") {
          let item_labels = [];
          item.items.forEach((obj, index) => {
            item_labels.push(obj.label);
          });
          if (item_labels.length != this.unique(item_labels).length) {
            flag = 3;
          }
        }
      });
      if (flag == 2) {
        this.$alert("题干不能为空请仔细检查数据!", "数据错误", {
          confirmButtonText: "确定",
          type: "error",
        });
        return false;
      }
      if (flag == 3) {
        this.$alert("选择题选项不能相同请仔细检查数据!", "数据错误", {
          confirmButtonText: "确定",
          type: "error",
        });
        return false;
      }

      let params = {
        name: this.title,
        widget: JSON.stringify(widgets),
      };
      if (id && !copyid) {
        params.id = id;
        this.$api.editTemplate(params).then((res) => {
          if (res.data.code == 0) {
            this.$message({
              type: "success",
              message: "成功!",
            });
          } else {
            this.$message.error("失败!");
          }
          this.$router.push("/message/template");
        });
      } else {
        this.$api.addTemplate(params).then((res) => {
          if (res.data.code == 0) {
            this.$message({
              type: "success",
              message: "成功!",
            });
          } else {
            this.$message.error("失败!");
          }
          this.$router.push("/message/template");
        });
      }
    },
    addWidget(i) {
      let item = JSON.parse(JSON.stringify(this.stdWidgetList[i]));
      if (item.type == "group") {
        item.active = 1;
        this.widgetList.forEach((item, index) => {
          item.active = 0;
        });
      }
      // 筛选域组件
      let gwidget = this.widgetList.filter(function (val) {
        return val.type == "group" && val.active == 1;
      });
      if (gwidget.length) {
        item.label = item.label + (gwidget[0].children.length + 1).toString();
        gwidget[0].children.push(item);
      } else {
        item.label = item.label + (this.widgetList.length + 1).toString();
        this.widgetList.push(item);
      }
    },
    minusOption(options, index) {
      if (options.length <= 1) {
        this.$message.error("选项不能少于1个!");
      } else {
        options.splice(index, 1);
      }
    },
    plusOption(options, index) {
      if (options.length >= 100) {
        this.$message.error("选项不能超过100个!");
      } else {
        options.splice(index + 1, 0, {
          label: "选项" + (index + 1),
          value: "选项值",
        });
      }
    },
    gopage(size) {
      if (size) {
        this.form.page_size = size;
      }
      this.form.page = this.$refs.pageButton.page;
      this.getData();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    gopage1(size) {
      if (size) {
        this.form1.page_size = size;
      }
      this.form1.page = this.$refs.pageButton1.page;
      this.getJl();
    },
    open(data) {
      this.dialogFormVisible = true;
      this.message = { ...data };
    },
    download() {
      let array = this.multipleSelection,
        ids = [];
      for (let i = 0; i < array.length; i++) {
        ids.push(array[i].id);
      }
      ids = ids.join(",");
      this.$api.downloadMon({ ids: ids }).then((res) => {
        var elink = document.createElement("a");
        let blob = new Blob([res.data], { type: "application/vnd.ms-excel" });
        let objUrl = URL.createObjectURL(blob);
        console.log(res.headers["content-disposition"]);
        let file_name = res.headers["content-disposition"].split("=")[1];
        elink.download = file_name;
        elink.style.display = "none";
        elink.href = objUrl;
        document.body.appendChild(elink);
        elink.click();
        document.body.removeChild(elink);
      });
    },
    prview(id) {
      this.form1.enterprise_id = id;
      this.getJl();
      this.dialogFormVisible1 = true;
    },
    getJl() {
      var parm = this.form1;
      this.$api.getMonitjobList(parm).then((res) => {
        this.data = res.data.data.list;
        this.total1 = res.data.data.total;
      });
    },
    detail(id) {
      this.$router.push({
        path: "/company/detail",
        query: { id: id, page: this.form.page, page_size: this.form.page_size },
      });
    },
    getData() {
      let id = this.$route.query.id;
      if (id) {
        this.$api.getTemplate({ id: id }).then((res) => {
          if (res.data.code == 0) {
            this.widgetList = res.data.data.widget;
          }
        });
      }
    },
    del(id) {
      this.$confirm("确定删除吗?", "提示", {
        type: "warning",
      }).then(() => {
        this.$api.deleteEnterprise({ id: id }).then((res) => {
          this.$message({
            message: "删除成功",
            type: "success",
          });
          this.getData();
        });
      });
    },
    permission(name) {
      let permissions = this.info.permissions || [];
      let list = [];
      for (let i = 0; i < permissions.length; i++) {
        list.push(permissions[i].name);
      }
      if (list.indexOf(name) < 0) {
        return false;
      } else {
        return true;
      }
    },
  },
  created() {
    this.getData();
  },
};
</script>