fe-manage/src/views/research/ResearchAdd.vue

<!-- 调研管理-基础信息页面 -->
<template>
  <div class="researchadd">
    <div class="header">
      <span class="title">创建调研</span>
      <router-link to="/researchmanage" class="goback"
        ><span class="return"></span
        ><router-link class="returntext" to="/researchmanage"
          >返回</router-link
        ></router-link
      >
    </div>
    <div class="content">
      <div class="name">
        <div class="namebox">
          <div class="inname">类型</div>
        </div>
        <div class="in">
          <input type="radio" name="type" id="single" checked="checked" /><label
            for="single"
            class="text"
            style="margin-left: 5px"
            >单选</label
          >
          <input
            type="radio"
            name="type"
            id="double"
            style="margin-left: 10px"
          /><label for="double" class="text" style="margin-left: 5px"
            >多选</label
          >
          <input
            type="radio"
            name="type"
            id="score"
            style="margin-left: 10px"
          /><label for="score" class="text" style="margin-left: 5px"
            >评分题</label
          >
        </div>
      </div>
      <div class="name">
        <div class="namebox">
          <img
            class="nameimg"
            src="../../assets/images/basicinfo/asterisk.png"
          />
          <div class="inname">提干</div>
        </div>
        <div class="in">
          <a-input
            v-model:value="valueE"
            placeholder="请输入项目名称"
            show-count
            :maxlength="20"
            style="border-radius: 8px"
          />
        </div>
      </div>
      <div class="name">
        <div class="in" style="margin-left: 133px">
          <a-button
            type="primary"
            style="
              width: 100px;
              height: 40px;
              border-radius: 8px;
              background-color: #409eff;
            "
            >添加选项</a-button
          >
        </div>
      </div>
      <div class="options">
        <div class="name">
          <div class="namebox">
            <div class="inname">选项1</div>
          </div>
          <div class="in">
            <a-input
              v-model:value="valueE"
              show-count
              :maxlength="20"
              style="border-radius: 8px"
            />
          </div>
        </div>
        <div class="delete">删除</div>
      </div>
      <div class="name">
        <div class="in" style="margin-left: 133px">
          <div class="addimg">+添加图片</div>
        </div>
      </div>
      <div class="options">
        <div class="name">
          <div class="namebox">
            <div class="inname">选项1</div>
          </div>
          <div class="in">
            <a-input
              v-model:value="valueE"
              show-count
              :maxlength="20"
              style="border-radius: 8px"
            />
          </div>
        </div>
        <div class="delete">删除</div>
      </div>
      <div class="picture" style="position: relative">
        <img
          class="pictureimg"
          src="../../assets/images/research/picture.png"
        />
        <div class="picturename">图片名称1.jpg</div>
        <img
          style="
            cursor: pointer;
            width: 20px;
            height: 20px;
            position: absolute;
            right: 0;
            top: 0;
          "
          src="../../assets/images/basicinfo/close.png"
        />
      </div>
    </div>
    <div class="header">
      <span class="title" style="font-size: 14px">选项设置</span>
    </div>
    <div class="content">
      <div class="name">
        <div class="namebox">
          <div class="inname">最低分</div>
        </div>
        <div class="in numberInp">
          <a-input-number
            :value="minScore"
            :min="1"
            :max="10"
            @change="minChange"
          />
        </div>
        <div class="namebox">
          <div class="inname">最高分</div>
        </div>
        <div class="in numberInp">
          <a-input-number
            :value="maxScore"
            :min="1"
            :max="10"
            @change="maxChange"
          />
        </div>
      </div>
      <div class="scorebox">
        <div class="scoretext">非常满意</div>
        <div class="number">
          <div
            class="btn"
            style="margin-left: 10px"
            v-for="(value, index) in scoreList"
            :key="index"
          >
            {{ value.text }}
          </div>
          <!-- <a-button class="btn">2</a-button>
                    <a-button class="btn">3</a-button>
                    <a-button class="btn">4</a-button>
                    <a-button class="btn">5</a-button>
                    <a-button class="btn">6</a-button>
                    <a-button class="btn">7</a-button>
                    <a-button class="btn">8</a-button>
                    <a-button class="btn">9</a-button>
                    <a-button class="btn" style="display: flex;align-items:center;margin-right: 10px;justify-content: center">10</a-button> -->
        </div>
        <div class="scoretext">非常不满意</div>
      </div>
      <div class="name name2">
        <div class="namebox">
          <div class="inname" style="margin-top: 13px">备注</div>
        </div>
        <div class="in">
          <a-textarea v-model:value="valuei" style="height: 80px" />
        </div>
      </div>
    </div>
    <div class="footer">
      <div class="btn">
        <a-button
          type="primary"
          style="
            width: 100px;
            height: 40px;
            border-radius: 8px;
            background-color: #409eff;
          "
          >保存</a-button
        >
        <a-button
          type="primary"
          ghost
          style="
            width: 100px;
            height: 40px;
            margin-left: 14px;
            border-radius: 8px;
          "
          >取消</a-button
        >
      </div>
    </div>
  </div>
</template>
<script>
import { reactive, toRefs } from "vue";
import { message } from "ant-design-vue";
export default {
  name: "ResearchAdd",
  setup() {
    const state = reactive({
      minScore: 1,
      maxScore: 10,
      scoreList: [
        {
          id: 1,
          text: 1,
        },
        {
          id: 2,
          text: 2,
        },
        {
          id: 3,
          text: 3,
        },
        {
          id: 4,
          text: 4,
        },
        {
          id: 5,
          text: 5,
        },
        {
          id: 6,
          text: 6,
        },
        {
          id: 7,
          text: 7,
        },
        {
          id: 8,
          text: 8,
        },
        {
          id: 9,
          text: 9,
        },
        {
          id: 10,
          text: 10,
        },
      ],
      scoreListClone: [
        {
          id: 1,
          text: 1,
        },
        {
          id: 2,
          text: 2,
        },
        {
          id: 3,
          text: 3,
        },
        {
          id: 4,
          text: 4,
        },
        {
          id: 5,
          text: 5,
        },
        {
          id: 6,
          text: 6,
        },
        {
          id: 7,
          text: 7,
        },
        {
          id: 8,
          text: 8,
        },
        {
          id: 9,
          text: 9,
        },
        {
          id: 10,
          text: 10,
        },
      ],
    });

    const minChange = (e) => {
      // console.log("eee", e);
      if (e > state.maxScore) return message.info("最低分不能超过最高分");
      state.minScore = e;
      let arr = state.scoreListClone.concat([]);
      arr.map((value, index) => {
        if (value.id === e) {
          arr = arr.slice(index, state.maxScore);
        }
      });
      state.scoreList = arr;
    };
    const maxChange = (e) => {
      if (e < state.minScore) return message.info("最高分不能低于最低分");
      state.maxScore = e;
      let arr = state.scoreListClone.concat([]);
      arr.map((value, index) => {
        if (value.id === e) {
          arr = arr.slice(state.minScore - 1, index + 1);
        }
      });
      state.scoreList = arr;
    };
    return {
      ...toRefs(state),
      minChange,
      maxChange,
    };
  },
};
</script>
<style lang="scss">
.researchadd {
  width: 100%;
  display: flex;
  flex-direction: column;
  .header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    .title {
      color: #000000;
      font-size: 18px;
      //line-height: 36px;
      padding-top: 30px;
      padding-left: 37px;
      //font-weight: 500;
    }
    .goback {
      padding-right: 70px;
      //padding-top: 37px;
      position: relative;
      .return {
        display: inline-block;
        width: 42px;
        height: 42px;
        margin-top: 17px;
        margin-right: 10px;
        background-image: url("../../assets/images/projectadd/return.png");
      }
      .returntext {
        display: inline-block;
        position: absolute;
        top: 27px;
        color: #4ea6ff;
        font-size: 14px;
      }
    }
  }
  .content {
    display: flex;
    flex-direction: column;
    .scorebox {
      display: flex;
      align-items: center;
      margin-top: 20px;
      margin-left: 70px;
      .scoretext {
        font-size: 14px;
        color: #56a3f9;
      }
      .number {
        display: flex;
        border: 1px solid #d7e5fd;
        border-radius: 5px;
        margin: 0 10px;
        padding: 5px;
        .btn {
          width: 40px;
          height: 40px;
          border: 1px solid #56a3f9;
          border-radius: 8px;
          display: flex;
          justify-content: center;
          align-items: center;
          margin: 5px;
          font-size: 14px;
          font-weight: 400;
          color: #56a3f9;
          line-height: 24px;
          cursor: pointer;
        }
      }
    }
    .picture {
      width: 100px;
      display: flex;
      flex-direction: column;
      margin-top: 20px;
      margin-left: 133px;
      .pictureimg {
        width: 100px;
        height: 100px;
      }
      .picturename {
        color: #6f6f6f;
        font-size: 14px;
      }
    }
    .name2 {
      display: flex;
      align-items: flex-start;
    }
    .options {
      display: flex;
    }
    .delete {
      cursor: pointer;
      margin-top: 32px;
      margin-left: 20px;
      float: right;
      color: #4ea6ff;
      font-size: 14px;
    }
    .name {
      width: 50%;
      // background-color: lightcoral;
      display: flex;
      margin-top: 20px;
      //align-items: center;
      //height: 40px;
      // border: 1px solid black;
      .namebox {
        width: 120px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex-shrink: 0;
        .nameimg {
          width: 10px;
          height: 10px;
        }
      }
      .inname {
        color: #6f6f6f;
        font-size: 14px;
        margin-left: 7px;
      }
      .in {
        margin-left: 14px;
        flex: 1;
        .addimg {
          cursor: pointer;
          color: rgba(78, 166, 255, 1);
          font-size: 14px;
        }
        .text {
          color: rgba(109, 117, 132, 1);
          font-size: 14px;
          //line-height: 24px;
        }
        .ant-radio-wrapper {
        }
        .ant-input {
          border-radius: 5px;
          // height: 120%;
          width: 100%;
          height: 35px;
        }
        .ant-select-selector {
          border-radius: 5px;
          // height: 120%;
          width: 100%;
          height: 40px;
        }
      }
      .numberInp {
        width: 200px;
        .ant-input-number {
          width: 200px;
        }
        // .ant-input-number-input-wrap {
        //   width: 200px;
        // }
      }
    }
  }
  .footer {
    width: 100%;
    margin-top: 31px;
    margin-bottom: 14px;
    .btn {
      display: flex;
      margin-bottom: 20px;
      justify-content: center;
      cursor: pointer;
    }
  }
}
</style>