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 {
      margin-bottom: 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 {
          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-bottom: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:red;
      }
    }
    .require::before {
      content: "*";
      color: #f56c6c;
      margin-right: 4px;
      position: absolute;
      left: -10px;
    }
  }
  /deep/.radio .el-input {
    width: 85%;
  }
  /deep/.checkbox .el-input {
    width: 85%;
  }
}
</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-row> -->
            </div>
            <div class="content-item middle">
                <div class='item-title'>编辑模板-{{title}}</div>

                <el-form size="small" label-width="" label-position="top" 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">
                        <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 @click="item.edit=!item.edit">{{item.edit?'编辑':'保存'}}</span> 
                                 <span @click="widgetList.splice(index,1)">删除</span>
                            </font>
                            <el-button type='primary' class='dargBtn drag'>拖拽移动顺序</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 @click="item.edit=!item.edit">{{item.edit?'编辑':'保存'}}</span> 
                                 <span @click="widgetList.splice(index,1)">删除</span>
                            </font>
                            <el-button type='primary' class='dargBtn drag'>拖拽移动顺序</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="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 @click="item.edit=!item.edit">{{item.edit?'编辑':'保存'}}</span> 
                                 <span @click="widgetList.splice(index,1)">删除</span>
                            </font>
                            <el-button type='primary' class='dargBtn drag'>拖拽移动顺序</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="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 @click="item.edit=!item.edit">{{item.edit?'编辑':'保存'}}</span> 
                                 <span @click="widgetList.splice(index,1)">删除</span>
                            </font>
                            <el-button type='primary' class='dargBtn drag'>拖拽移动顺序</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-upload
                                action="https://jsonplaceholder.typicode.com/posts/"
                                list-type="picture-card"
                                :on-preview="handlePictureCardPreview"
                                :on-remove="handleRemove">
                                <i class="el-icon-plus"></i>
                            </el-upload>
                            <font>
                                 <span @click="item.edit=!item.edit">{{item.edit?'编辑':'保存'}}</span> 
                                 <span @click="widgetList.splice(index,1)">删除</span>
                            </font>
                            <el-button type='primary' class='dargBtn drag'>拖拽移动顺序</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="https://jsonplaceholder.typicode.com/posts/"
                                :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="item.edit=!item.edit">{{item.edit?'编辑':'保存'}}</span> 
                                 <span @click="widgetList.splice(index,1)">删除</span>
                            </font>
                            <el-button type='primary' class='dargBtn drag'>拖拽移动顺序</el-button>
                        </section>
                    </el-form-item>
                    </transition-group>
                    </vuedraggable>
                    <div  v-if="this.widgetList.length">
                        <el-button size="medium" type="primary" @click="save">保存</el-button>
                    </div>
                </el-form>
            </div>
            <div class="content-item right">
                <div class='item-title'>效果预览</div>
                <div class="phone">
                    <div class='item-main'>
                        <!-- <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 :key="index" :label="item.label+item.cntype">
                                <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="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="index">{{iitem.label}}</el-checkbox>
                                </el-radio-group>
                                <el-upload
                                    v-if="item.type=='image'"
                                    action="https://jsonplaceholder.typicode.com/posts/"
                                    list-type="picture-card"
                                    :on-preview="handlePictureCardPreview"
                                    :on-remove="handleRemove">
                                    <i class="el-icon-plus"></i>
                                </el-upload>
                                <el-upload
                                    v-if="item.type=='file'"
                                    class="upload-demo"
                                    ref="upload"
                                    action="https://jsonplaceholder.typicode.com/posts/"
                                    :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>  
                            <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>
                </div>
            </div>
        </div>
    </section>
</template>
<script>
import vuedraggable from "vuedraggable";
export default {
  components: { vuedraggable },
  data() {
    return {
      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",
          label: "请输入标题",
          placeholder: "请输入",
          edit: true,
        },
        {
          type: "file",
          label: "请输入标题",
          placeholder: "请输入",
          edit: true,
        },
      ],
      widgetList: [],
    };
  },
  methods: {
    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),
      };
      console.log(widgets, 22222222222);
      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) {
      console.log(i);
      this.widgetList.push(JSON.parse(JSON.stringify(this.stdWidgetList[i])));
      console.log(this.widgetList);
    },
    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>