补充问卷管理编辑页面布局

heimawl

2023-06-13 3ddea12f09e6a21d93d8443c96f42539168f78c8

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

@@ -83,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
@@ -94,16 +93,123 @@
              >
              </el-option>
            </el-select>
            <dev class="PreviewTemplate" @click="PreviewTemplate()"
              >预览模版</dev
            >
            <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')"
@@ -167,6 +273,7 @@
        <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"
@@ -236,6 +343,7 @@
        </el-form>
      </div>
    </div>
    <!-- 预览模版弹窗 -->
    <el-drawer
      title="问卷预览"
      :visible.sync="drawer"
@@ -296,12 +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: "",
@@ -649,6 +760,51 @@
          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,
      },
    };
  },

@@ -669,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() {
@@ -750,6 +925,48 @@
    }
  }
}
.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;
}
@@ -782,4 +999,8 @@
    font-size: 24px;
  }
}
// ::v-deep.el-form-item--medium .el-form-item__content {
//   line-height: 36px;
//   display: flex;
// }
</style>