添加校验

wjt

2024-06-19 21245bd2f9775bc0149174256f58001a67fddba6

 src/views/infomanger/banner/index.vue

@@ -1,9 +1,245 @@
<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" ref="formRef" label-width="75px" :rules="rules">
        <div
          class="border"
          v-for="(item, index) in form.questionList"
          :key="index"
        >
          <!-- <div class="title-project">
            评价项{{ index + 1 }}
          </div> -->
          <div class="close-icon" @click="removeList(index)">
            <el-tooltip content="移除评价项">
              <el-icon><Close color="red"/></el-icon>
            </el-tooltip>
          </div>
          <el-row>
            <el-col :span="12">
              <el-form-item :label="`评价项${index + 1}`" :prop="`${index}`" style="width: 100%"  :rules="[
                {
                  validator: validateSubField,
                  trigger: 'blur'
                }
              ]">
                <el-input
                  placeholder="请输入"
                  v-model="item.questionName"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="得分" :prop="item.questionScore">
                <el-input-number
                  placeholder="请输入"
                  v-model="item.questionScore"
                  :min="1"
                  :max="10"
                  controls-position="right"
                ></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="评价类型" :prop="item.questionType">
                <el-radio-group
                  placeholder="请输入"
                  v-model="item.questionType"
                >
                  <el-radio :value="2">打分</el-radio>
                  <el-radio :value="1">选择</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row v-if="item.questionType === 2">
            <el-form-item>
              <el-rate  disabled :max="item.questionScore"  v-model="item.questionScore"></el-rate>
            </el-form-item>
          </el-row>
          <el-row v-if="item.questionType === 1">
            <el-col :span="24">
              <el-form-item label="选项" style="width: 100%;"  :prop="`${index}`" :rules="[
                {
                  validator: answerListField,
                }
              ]">
                  <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: 65%; margin-right: 10px"
                    ></el-input>
                    <el-checkbox v-model="ele.isScore" @change="changeValue($event, index, childIndex)"  :true-value="1" :false-value="0" :label="'是否计分'"/>
                    <el-button type="danger" size="small" @click="removeArrlist(index, childIndex)" style="margin-left: 10px;">移除</el-button>
                  </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>          
      </el-form>
      <div class="center mt20 fixed">
        <el-button type="primary" @click="addContent">添加评价项</el-button>
        <el-button @click="save()" type="primary" >保存内容</el-button>
      </div>
    </div>
  </div>
</template>
</template>

<script lang="ts" setup>
import { listEvaluate, saveEvaluate } from '@/api/system/company/company'
import { ElMessage, ElMessageBox} from 'element-plus'
const tableData = ref([])
const addNewRef = ref()
const formRef = ref()
const form: any = ref({
  questionList: []
})
const rules = ref({
  questionName: [
    {
        required: true,
        message: '请输入问题',
        trigger: 'blur'
    }
  ]
})
const instance = getCurrentInstance()

function getListEvaluate() {
  listEvaluate().then((val) => {
    form.value.questionList = val.data.questionList
  })
}
function addContent() {
  form.value.questionList.push({
    questionStatus: 0,
    questionType: 2,
    questionScore: 5,
    questionName: '',
    answerList: []
  })
}
function addOptions(index: number, name: any){
  if(!form.value.questionList[index].answerList) {
    form.value.questionList[index].answerList = []
  }
  form.value.questionList[index].answerList.push({
    questionName: name
  })
}
function save(item?: string) {
  formRef.value.validate((valid) => {
    console.log(valid)
    if(valid) {
      saveEvaluate({questionList: form.value.questionList}).then(val => {
        ElMessage.success(item||'保存成功')
      })
    }
  })

}
function validateSubField(rule: any, value: any, callback: any) {
  // console.log(rule, value)
//   console.log(proxy['form'])
  if(!form.value.questionList[rule.field].questionName) {
    callback(new Error('请入评价项'))
  } else {
    callback()
  }
}
function answerListField(rule: { field: string | number }, value: any, callback: any) {
  if(form.value.questionList[rule.field].answerList.length < 2) {
    callback(new Error('请至少添加两项'))
  } else {
    callback()
  }
}
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
}
function removeList(index) {
  ElMessageBox.confirm('确认移除该评价项？', '提示', {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'danger',
    }).then(val => {
      form.value.questionList.splice(index, 1)
      save('删除成功')
    })
 
}
function removeArrlist(index: string | number, childIndex: any) {
  form.value.questionList[index].answerList.splice(childIndex, 1)
}
getListEvaluate()
</script>

<style scoped lang="scss">
.form-content {
  width: 80%;
  padding-bottom: 150px;
  margin: 0 auto;
  // border: 1px solid #e2e2e2;
}

.border {
  // border: 1px solid #e2e2e2;
  margin-bottom: 10px;
  padding: 20px 30px 0;
  position: relative;
  :deep() {
    .el-form-item__label{
      font-weight: 500
    }
  }
}
.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;
}
.fixed{
  background-color: white;
  position: sticky;
  bottom: 0;
}
.title-project{
  font-weight: 700;
  color: #606266;
  margin-bottom: 10px
}
</style>