部分页面添加

wjt

2024-06-19 0a87fb00f345fa192705cfcaa753d304ff7fe1f3

 src/views/infomanger/banner/index.vue

@@ -1,9 +1,165 @@
<template>
  <div class="app-container">
    <el-row>
      <el-col :span="24">
        <el-button></el-button>
      </el-col>
    </el-row>
    <div class="form-content">
      <el-form inline :model="form.questionList" label-width="80px" :rules="rules">
        <div
          class="border"
          v-for="(item, index) in form.questionList"
          :key="index"
        >
          <div class="close-icon">
            <el-icon><Close /></el-icon>
          </div>
          <el-row>
            <el-col :span="24">
              <el-form-item label="试题内容" style="width: 100%" :prop="item.questionName">
                <el-input
                  placeholder="请输入"
                  v-model="item.questionName"
                  type="textarea"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="本题得分" :prop="item.questionScore">
                <el-input
                  type="number"
                  placeholder="请输入"
                  v-model="item.questionScore"
                  style="width: 200px"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="题目类型" :prop="item.questionType">
                <el-radio-group
                  placeholder="请输入"
                  v-model="item.questionType"
                >
                  <el-radio value="1">选择</el-radio>
                  <el-radio value="2">打分</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row v-if="item.questionType === '1'">
            <el-col :span="24">
              <el-form-item label="本题选项" style="width: 100%;"  :prop="item.answerList">
                  <div
                    v-for="(ele, childIndex) in item.answerList"
                    :key="index"
                    style="width: 100%;"
                    class="set-flex"
                  >
                    <div style="font-size: 14px;margin-right: 10px">{{ childIndex + 1 }}</div>
                    <el-input
                      v-model="ele.answerName"
                      placeholder="请输入"
                       style="width: 85%; margin-right: 10px"
                    ></el-input>
                    <el-checkbox v-model="ele.isScore" @change="changeValue($event, index, childIndex)"  :true-value="1" :false-value="0" :label="'是否计分'"/>
                  </div>
                  
                <!-- </el-radio-group> -->

                <div class="mt10">
                  <el-button type="primary" plain @click="addOptions(index, item.questionName)">添加选项</el-button>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
        </div>          
        <div class="add-button" @click="addContent">添加执法项</div>
      </el-form>
      <div class="center mt20">
        <el-button @click="save" type="primary" style="width: 100%;padding: 20px 0">保存内容</el-button>
      </div>
    </div>
  </div>
</template>
</template>

<script lang="ts" setup>
import { listEvaluate, saveEvaluate } from '@/api/system/company/company'
import { ElMessage} from 'element-plus'
const tableData = ref([])
const addNewRef = ref()
const form: any = ref({
  questionList: []
})
const rules = ref({
  questionName: [
    {
      required: true,
      message: '请输入问题',
      trigger: 'blur'
    }
  ]
})
function getListEvaluate() {
  listEvaluate().then((val) => {
    tableData.value = val.data.questionList
  })
}
function addContent() {
  form.value.questionList.push({
    questionStatus: 0,
    questionType: '2',
    answerList: []
  })
}
function addOptions(index: number, name){
  form.value.questionList[index].answerList.push({
    questionName: name
  })
}
function save() {
  saveEvaluate({questionList: form.value.questionList}).then(val => {
    ElMessage.success('保存成功')
  })
}
function changeValue(event, index, childIndex) {
  // form.value.questionList[index].isScore = event.target.
  form.value.questionList[index].answerList.forEach((item: { isScore: number }) => {
    item.isScore = 0
  })
  form.value.questionList[index].answerList[childIndex].isScore = 1
}
getListEvaluate()
</script>

<style scoped lang="scss">
.form-content {
  width: 80%;
}

.border {
  border: 1px solid #e2e2e2;
  margin-bottom: 10px;
  padding: 30px;
  position: relative;
}
.close-icon {
  position: absolute;
  right: 10px;
  top: 10px;
  cursor: pointer;
}

.add-button {
  text-align: center;
  border: 1px dotted #979797;
  line-height: 40px;
  cursor: pointer;
  border-radius: 5px;
}
.set-flex{
  display: flex;
  justify-content: flex-start;
  margin-top: 10px
}
.center{
  text-align: center;
}
</style>