H5/pzhgt.git - Gitblit

<template>
  <div class="quest_add">
    <v-header title="问卷调查"></v-header>
    <div class="btn">
      <button
        class="m_btn bgc_primary"
        v-for="(i,j) in btn"
        :key="j+'-btn'"
        @click="onBtnCreate(i)"
      >{{i.t}}</button>
    </div>
    <div class="main">
      <v-tool-scroll ids="quest-add-scroll">
        <div class="list">
          <p
            class="label"
            data-require
          >问卷标题：</p>
          <div class="box">
            <input
              type="text"
              maxlength="35"
              class="m_inp"
              placeholder="填写问卷标题"
              v-model="title"
            >
          </div>
        </div>
        <div class="list">
          <p
            class="label"
            data-require
          >问卷描述：</p>
          <div class="box">
            <textarea
              maxlength="120"
              cols="30"
              rows="10"
              class="m_inp"
              placeholder="请填写问卷描述"
              v-model="desc"
            ></textarea>
          </div>
        </div>
        <div class="list">
          <p
            class="label"
            data-require
          >仅调研特殊对象：</p>
          <div class="box pad">
            <el-checkbox-group v-model="checkList">
              <el-checkbox
                :label="i.t"
                v-for="(i,j) in change"
                :key="j+'-check'"
              ></el-checkbox>
            </el-checkbox-group>
          </div>
        </div>
        <p class="err">提示：默认社区所有居民可参与调研，勾选后只针对所选群体开放问卷</p>
        <ul>
          <li
            class="list"
            v-for="(i,j) in item"
            :key="j+'-li'"
          >
            <p class="label">{{j+1}}.题目：</p>
            <div class="box">
              <input
                type="text"
                class="m_inp small"
                :placeholder="'填写题目['+i.plac+']'"
                v-model="i.title"
                maxlength="100"
              >
              <div
                class="l"
                v-for="(x,y) in i.child"
                :key="y+'-li-c'"
              >
                <input
                  type="text"
                  class="m_inp"
                  :placeholder="x.type?'其他___':'选项'"
                  v-model="x.v"
                  maxlength="100"
                >
                <span
                  class="del"
                  @click="onDelChild(i,y,j)"
                ><i class="el-icon-remove-outline"></i></span>
              </div>
              <div class="a">
                <button
                  class="m_btn bgc_tran small info"
                  v-if="i.more"
                  @click="onAddChild(i,j)"
                >添加选项</button>
                <button
                  class="m_btn bgc_tran small grey"
                  v-if="i.more"
                  @click="onAddChildOther(i,j)"
                >添加"其他"项</button>
                <div class="r">
                  <button
                    class="m_btn bgc_tran small"
                    :class="j===0?'grey':'info'"
                    @click="onUp(i,j)"
                  >上移</button>
                  <button
                    class="m_btn bgc_tran small"
                    :class="j===item.length-1?'grey':'info'"
                    @click="onDown(i,j)"
                  >下移</button>
                  <button
                    class="m_btn bgc_tran small info"
                    @click="onDelItem(i,j)"
                  >删除</button>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </v-tool-scroll>
    </div>
    <div class="foot">
      <button
        class="m_btn"
        @click="$router.back()"
      >取消</button>
      <button
        class="m_btn bgc_primary"
        @click="onSubmit"
      >立即发布</button>
    </div>
  </div>
</template>
 
<script>
import mock from "./a";
export default {
  props: {},
  components: {},
  data() {
    return {
      title: "",
      desc: "",
      btn: [
        { t: "添加单选题", v: 0 },
        { t: "添加多选题", v: 1 },
        { t: "添加填空题", v: 2 },
      ],
      item: [],
      change: [
        { t: "社区党员", v: 1 },
        { t: "社区志愿者", v: 2 },
      ],
      checkList: [],
    };
  },
  computed: {},
  watch: {},
  methods: {
    // 添加新的
    onBtnCreate(v) {
      let c = [];
      let m = true;
      switch (v.v) {
        case 0:
          c = [
            { v: "", id: 1 },
            { v: "", id: 2 },
          ];
          break;
        case 1:
          c = [
            { v: "", id: 1 },
            { v: "", id: 2 },
            { v: "", id: 3 },
          ];
          break;
        default:
          m = false;
      }
      this.item.push({
        type: v.v,
        title: "",
        time: Date.now(),
        child: c,
        plac: v.t.replace("添加", ""),
        more: m,
        min: c.length,
      });
    },
    // 添加选项
    onAddChild(i, j) {
      if (i.child.length >= 10) {
        return demo.toast("选项最大添加十项");
      }
      i.child.push({ v: "", id: Date.now() });
    },
    // 添加其他项
    onAddChildOther(i, j) {
      if (i.child.length >= 10) {
        return demo.toast("选项最大添加十项");
      }
      i.child.push({ v: "", id: Date.now(), type: true });
    },
    // 删除数据
    onDelItem(i, j) {
      this.$js.model(
        "",
        "是否删除" + i.plac + (i.title ? "[" + i.title + "]" : ""),
        (res) => {
          if (res) {
            this.item.splice(j, 1);
          }
        }
      );
    },
    // 上移
    onUp(i, j) {
      if (j === 0) return 0;
      let v = demo.copy(this.item);
      v.splice(j, 1);
      v.splice(j - 1, 0, i);
      this.$nextTick(() => {
        this.item = v;
      });
    },
    // 下移
    onDown(i, j) {
      if (j === this.item.length - 1) return 0;
      let v = demo.copy(this.item);
      v.splice(j, 1);
      v.splice(j + 1, 0, i);
      this.$nextTick(() => {
        this.item = v;
      });
    },
    // 删除选项
    onDelChild(i, j, p) {
      if (i.child.length <= i.min) {
        demo.toast("选项数不能低于" + i.min + "个");
        return 0;
      }
      let v = i.child;
      if (j < 0) {
        j = v.length - 1;
      }
      this.$js.model("", "是否删除选项", (res) => {
        if (res) {
          let id = v[j].id;
          v = v.filter((r) => {
            return +r.id !== +id;
          });
          this.$nextTick(() => {
            this.item[p].child = v;
          });
        }
      });
    },
    resetVal() {
      this.item = [];
      this.title = "";
      this.desc = "";
    },
    // 发布 整合数据
    onSubmit() {
      let t = this;
      if (!t.title) return demo.toast("请输入问卷标题");
      if (!t.desc) return demo.toast("请输入问卷描述");
      if (!t.item.length) return demo.toast("请添加题目");
      let os = {
        queTitle: t.title,
        queDescribe: t.desc,
        check: t.change
          .filter((r) => {
            return t.checkList.indexOf(r.t) >= 0;
          })
          .map((r) => {
            return +r.v;
          }),
        list: t.item,
      };
      // if (os.check.length) {
      os.forVolunteer = os.check.indexOf(2) >= 0;
      os.forParty = os.check.indexOf(1) >= 0;
      os.forMasses = !os.forVolunteer && !os.forParty;
      // }
      let index = -1;
      let err = "";
      os.list.forEach((r, y) => {
        if (!r.title) {
          err = "请输入问题";
          index = y;
        } else {
          if (r.type !== 2) {
            if (!r.child.length) {
              index = y;
              err = "请添加选项";
            } else {
              r.child.forEach((q) => {
                if (q.v === "") {
                  index = y;
                  err = "请完整填写选项";
                }
              });
            }
          }
        }
      });
 
      if (index >= 0) {
        return demo.toast(err);
      }
      os.questnaiteSubVOS = os.list.map((r) => {
        return {
          content: r.title,
          type: r.type,
          questnaiteSubSelectionVOS: r.child.map((k, v) => {
            return { content: k.v, type: !!k.more * 1, optionName: v };
          }),
        };
      });
      delete os.check;
      delete os.list;
      this.$api.post("questnaire/add", os, (e) => {
        demo.toast("创建成功");
        this.resetVal();
        let tt = this;
        setTimeout(() => {
          tt.$router.back();
        }, 1e3);
      });
    },
    ces() {
      let t = this;
      mock.forEach((r) => {
        t.$api.post("questnaire/add", r, (e) => {
          demo.toast("创建成功");
        });
      });
    },
  },
  mounted() {
    // this.ces();
  },
};
</script>
<style lang="less">
.quest_add {
  position: relative;
  .btn,
  .foot {
    height: 50px;
    box-sizing: border-box;
    display: flex;
    .m_btn {
      margin-right: 10px;
      min-width: 100px;
    }
  }
  .foot {
    margin-top: 10px;
  }
  .main {
    height: calc(100% - 160px);
  }
  .err {
    font-size: 12px;
    color: #ccc;
    margin-bottom: 10px;
    transform: translateY(-10px);
  }
  textarea.m_inp {
    display: block;
    width: 100% !important;
    resize: none;
    max-width: 100%;
  }
  .list {
    position: relative;
    display: flex;
    margin-bottom: 12px;
    .label {
      width: 120px;
      font-size: 15px;
      line-height: 32px;
      text-align: right;
    }
    .box {
      max-width: 600px;
      width: calc(100% - 120px);
      &.pad {
        padding-top: 6px;
      }
      .m_inp {
        width: 100%;
      }
      .l {
        border-bottom: 1px solid #eee;
        position: relative;
        .m_inp {
          border: 0;
          padding-right: 40px;
        }
        .del {
          position: absolute;
          right: 10px;
          top: 0;
          bottom: 0;
          margin: auto;
          width: 30px;
          height: 30px;
          text-align: center;
          font-size: 20px;
          line-height: 30px;
          cursor: pointer;
          color: #999;
          &.dis {
            color: #eee;
          }
        }
      }
      .a {
        display: flex;
        .r {
          flex: 1;
          text-align: right;
        }
        .m_btn + .m_btn {
          margin-left: 8px;
        }
      }
      .info {
        color: #5bc0de;
      }
      .grey {
        color: #999;
      }
    }
  }
}
</style>