提交信息

WXL

2023-11-21 6d3e75d248256fe9860beb91161265af3b39e982

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

@@ -19,6 +19,7 @@
    </div>
    <!-- 右侧数据 -->
    <div class="leftvlue">
      <!-- 基本信息 -->
      <div v-if="Editprogress == 1">
        <div class="leftvlue-jbxx">
          基本信息<span>当前版本:{{ currentVersion }}</span>
@@ -66,6 +67,7 @@
          </el-form-item>
        </el-form>
      </div>
      <!-- 问卷设置 -->
      <div v-if="Editprogress == 2">
        <div class="leftvlue-jbxx">问卷设置</div>
        <el-form
@@ -81,7 +83,6 @@
              v-model="ruleForm.templatevalue"
              :options="options"
              :props="{ expandTrigger: 'hover' }"
              @change="handleChange"
            ></el-cascader>
            <el-select v-model="ruleForm.data2" placeholder="提交提示">
              <el-option
@@ -92,16 +93,123 @@
              >
              </el-option>
            </el-select>
            <dev class="PreviewTemplate" @click="PreviewTemplate()"
              >预览模版</dev
            >
            <el-button type="primary">确认引用</el-button>
            <div style="display: flex; margin-top: 20px">
              <div class="PreviewTemplate" @click="PreviewTemplate()">
                预览模版
              </div>
              <el-button type="primary">确认引用</el-button>
            </div>
          </el-form-item>
          <el-form-item label="活动形式" prop="desc">
            <el-input type="textarea" v-model="ruleForm.desc"></el-input>
          </el-form-item>
          <el-form-item label="活动形式" prop="desc">
            <el-input type="textarea" v-model="ruleForm.desc"></el-input>
            <div class="addtopic">
              <el-select
                v-model="addvalue"
                @change="changeaddtopic"
                class="addtopic-input"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>

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

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

                <pagination
                  v-show="total > 0"
                  :total="total"
                  :page.sync="queryParams.pageNum"
                  :limit.sync="queryParams.pageSize"
                  @pagination="getList"
                />
              </div>
              <div class="presentation-right">
                <div class="headline">题目设置详情</div>
                <div>题目标题：<span>这家机构怎么样</span></div>
                <div>是否必答：<span>是</span> 是否隐藏：<span>否</span></div>
                <div class="headline">选项设置</div>
                <div>
                  <p>选项1:<span>医疗机构</span></p>
                  <p>
                    填写明细：<span>无</span> 异常选项：<span>无</span>
                    分值：<span>3</span>
                  </p>
                  <p>选中提示：<span>这个题有点难请注意</span></p>
                  <p>选中跳转：<span>无</span></p>
                </div>
              </div>
            </div>
          </el-form-item>
          <el-form-item>
            <el-button type="success" @click="submitForm('ruleForm')"
@@ -112,74 +220,60 @@
          </el-form-item>
        </el-form>
      </div>
      <!-- 问卷预览 -->
      <div v-if="Editprogress == 3">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        <div class="preview-left">
          <!-- 单选 -->
          <div class="topic-dev" v-for="item in valssu" :key="item.aaa">
            <div class="dev-text">
              {{ item.idd }}、[单选]<span>{{ item.wssd }}</span>
            </div>
            <div class="dev-xx">
              <el-radio-group v-model="radio">
                <el-radio
                  v-for="(items, index) in item.sdadd"
                  :key="index"
                  :label="index"
                  >{{ items }}</el-radio
                >
              </el-radio-group>
            </div>
          </div>
          <!-- 多选 -->
          <div class="topic-dev" v-for="item in valssu" :key="item.aaa">
            <div class="dev-text">
              {{ item.idd }}、[多选]<span>{{ item.wssd }}</span>
            </div>
            <div class="dev-xx">
              <el-checkbox-group v-model="radios">
                <el-checkbox
                  v-for="(items, index) in item.sdadd"
                  :key="index"
                  :label="index"
                >
                  {{ items }}
                </el-checkbox>
              </el-checkbox-group>
            </div>
          </div>
          <!-- 填空 -->
          <div class="topic-dev" v-for="item in valssu" :key="item.aaa">
            <div class="dev-text">
              {{ item.idd }}、[填空]<span>{{ item.wssd }}</span>
            </div>
            <div class="dev-xx">
              <el-input placeholder="请输入答案" v-model="radioas" clearable>
              </el-input>
            </div>
          </div>
        </div>
        <el-button type="success" @click="submitForm('ruleForm')"
          >下一步</el-button
        >
          <el-form-item label="活动名称" prop="name">
            <el-input v-model="ruleForm.name"></el-input>
          </el-form-item>
          <el-form-item label="活动区域" prop="region">
            <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="活动时间" required>
            <el-col :span="11">
              <el-form-item prop="date1">
                <el-date-picker
                  type="date"
                  placeholder="选择日期"
                  v-model="ruleForm.date1"
                  style="width: 100%"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col class="line" :span="2">-</el-col>
            <el-col :span="11">
              <el-form-item prop="date2">
                <el-time-picker
                  placeholder="选择时间"
                  v-model="ruleForm.date2"
                  style="width: 100%"
                ></el-time-picker>
              </el-form-item>
            </el-col>
          </el-form-item>
          <el-form-item label="即时配送" prop="delivery">
            <el-switch v-model="ruleForm.delivery"></el-switch>
          </el-form-item>
          <el-form-item label="活动性质" prop="type">
            <el-checkbox-group v-model="ruleForm.type">
              <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
              <el-checkbox label="地推活动" name="type"></el-checkbox>
              <el-checkbox label="线下主题活动" name="type"></el-checkbox>
              <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="特殊资源" prop="resource">
            <el-radio-group v-model="ruleForm.resource">
              <el-radio label="线上品牌商赞助"></el-radio>
              <el-radio label="线下场地免费"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="活动形式" prop="desc">
            <el-input type="textarea" v-model="ruleForm.desc"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="success" @click="submitForm('ruleForm')"
              >下一步</el-button
            >
            <el-button type="primary" @click="laststep()">上一步</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
        <el-button type="primary" @click="laststep()">上一步</el-button>
        <!-- <el-button @click="resetForm('ruleForm')">重置</el-button> -->
      </div>
      <!-- 结果反馈 -->
      <div v-if="Editprogress == 4">
        <el-form
          :model="ruleForm"
@@ -249,12 +343,58 @@
        </el-form>
      </div>
    </div>
    <!-- 预览模版弹窗 -->
    <el-drawer
      title="我是标题"
      title="问卷预览"
      :visible.sync="drawer"
      :before-close="handleClose"
      custom-class="demo-drawer"
      width="50%"
    >
      <span>我来啦!</span>
      <div class="preview-left">
        <!-- 单选 -->
        <div class="topic-dev" v-for="item in valssu" :key="item.aaa">
          <div class="dev-text">
            {{ item.idd }}、[单选]&nbsp&nbsp<span>{{ item.wssd }}</span>
          </div>
          <div class="dev-xx">
            <el-radio-group v-model="radio">
              <el-radio
                v-for="(items, index) in item.sdadd"
                :key="index"
                :label="index"
                >{{ items }}</el-radio
              >
            </el-radio-group>
          </div>
        </div>
        <!-- 多选 -->
        <div class="topic-dev" v-for="item in valssu" :key="item.aaa">
          <div class="dev-text">
            {{ item.idd }}、[多选]&nbsp&nbsp<span>{{ item.wssd }}</span>
          </div>
          <div class="dev-xx">
            <el-checkbox-group v-model="radios">
              <el-checkbox
                v-for="(items, index) in item.sdadd"
                :key="index"
                :label="index"
              >
                {{ items }}
              </el-checkbox>
            </el-checkbox-group>
          </div>
        </div>
        <!-- 填空 -->
        <div class="topic-dev" v-for="item in valssu" :key="item.aaa">
          <div class="dev-text">
            {{ item.idd }}、[填空]&nbsp&nbsp<span>{{ item.wssd }}</span>
          </div>
          <div class="dev-xx">
            <el-input placeholder="请输入答案" v-model="radioas" clearable>
            </el-input>
          </div>
        </div>
      </div>
    </el-drawer>
  </div>
</template>
@@ -264,9 +404,15 @@
  data() {
    return {
      sidecolumnrabs: "left", //方向
      Editprogress: 1, //编辑进度
      Editprogress: 2, //编辑进度
      currentVersion: "1.2.3", //当前版本
      loading: false, // 遮罩层
      drawer: false, //控制展开
      radio: "false", //单选题选中
      radios: [], //多选题选中
      radioas: "", //填空题答案
      // 总条数
      total: 1,
      ruleForm: {
        name: "",
        region: "",
@@ -317,28 +463,28 @@
        ],
        desc: [{ required: true, message: "请填写活动形式", trigger: "blur" }],
      },
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      // options: [
      //   {
      //     value: "选项1",
      //     label: "黄金糕",
      //   },
      //   {
      //     value: "选项2",
      //     label: "双皮奶",
      //   },
      //   {
      //     value: "选项3",
      //     label: "蚵仔煎",
      //   },
      //   {
      //     value: "选项4",
      //     label: "龙须面",
      //   },
      //   {
      //     value: "选项5",
      //     label: "北京烤鸭",
      //   },
      // ],
      options: [
        {
          value: "zhinan",
@@ -607,6 +753,58 @@
          ],
        },
      ],
      valssu: [
        {
          idd: 1,
          wssd: "你最近怎么样",
          sdadd: ["sss", "ssccss", "ssaas", "ss"],
        },
      ],
      // options: [
      //   {
      //     value: "选项1",
      //     label: "单选",
      //   },
      //   {
      //     value: "选项2",
      //     label: "多选",
      //     disabled: true,
      //   },
      //   {
      //     value: "选项3",
      //     label: "填空",
      //   },
      // ],
      addvalue: "添加题目",
      // 题目表格数据
      userList: [
        {
          userid: "1",
          userName: "一号问卷",
        },
        {
          userid: "2",
          userName: "二号问卷",
        },
        {
          userid: "3",
          userName: "三号问卷",
        },
        {
          userid: "4",
          userName: "四号问卷",
        },
      ],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        userName: undefined,
        phonenumber: undefined,
        status: undefined,
        deptId: undefined,
        IDnumber: undefined,
      },
    };
  },

@@ -627,6 +825,25 @@
          return false;
        }
      });
    },
    /** 查询题目列表 */
    getList() {
      //   this.loading = true;
      listUser().then((response) => {
        console.log(response);
        // this.userList = response.data;
        // this.total = response.total;
        // this.loading = false;
        console.log(this.userList);
      });
      //   const { rows } = await listUser();
      //   console.log(rows);
      //   this.list = rows;
    },
    changeaddtopic(val) {
      console.log(11);
      console.log(val);
      this.addvalue = "添加题目";
    },
    // 预览模版
    PreviewTemplate() {
@@ -692,6 +909,64 @@
    margin: 0 20px;
  }
}
.preview-left {
  margin: 20px;
  //   margin: 20px;
  padding: 30px;
  background: #ffff;
  border: 1px solid #dcdfe6;
  -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12),
    0 0 6px 0 rgba(0, 0, 0, 0.04);
  .topic-dev {
    margin-bottom: 25px;
    font-size: 20px !important;
    .dev-text {
      margin-bottom: 10px;
    }
  }
}
.addtopic {
  margin-top: 30px;
}
.presentation {
  margin: 20px 0;
  display: flex;
  .presentation-left {
    width: 50%;
    height: 500px;
    .button-textxg {
      color: #024df0;
    }
    .button-textsc {
      color: #f52727;
    }
  }
  .presentation-right {
    width: 50%;
    height: 500px;
    padding: 20px;
    font-size: 18px;
    border: 1px solid #909091;
    span {
      padding: 0 35px;
      margin-right: 10px;
      border-bottom: 1px solid #909091;
    }
    .headline {
      font-size: 20px;
      border-left: 3px solid #41a1be;
      padding-left: 5px;
      margin: 15px 0;
    }
  }
}
::v-deep .addtopic-input {
  input {
    background: #02a7f0;
    color: #edf1f7;
    width: 150px;
  }
}
::v-deep.el-step.is-vertical .el-step__title {
  font-size: 25px;
}
@@ -707,4 +982,25 @@
  font-size: 20px;
  max-width: 888px !important;
}
::v-deep.el-radio__inner {
  width: 22px;
  height: 22px;
}
// ::v-deep.topic-dev.el-radio__label {
//   font-size: 24px;
// }
::v-deep.el-radio-group {
  span {
    font-size: 24px;
  }
}
::v-deep.el-checkbox-group {
  span {
    font-size: 24px;
  }
}
// ::v-deep.el-form-item--medium .el-form-item__content {
//   line-height: 36px;
//   display: flex;
// }
</style>