From a0d1834f85b51173e02357f8a638521612fa06be Mon Sep 17 00:00:00 2001
From: wjt <1797368093@qq.com>
Date: 星期三, 19 六月 2024 16:44:37 +0800
Subject: [PATCH] 添加校验
---
src/views/infomanger/banner/index.vue | 141 +++++++++++++++++++++++++++++++++++------------
1 files changed, 105 insertions(+), 36 deletions(-)
diff --git a/src/views/infomanger/banner/index.vue b/src/views/infomanger/banner/index.vue
index 100c33a..eb09374 100644
--- a/src/views/infomanger/banner/index.vue
+++ b/src/views/infomanger/banner/index.vue
@@ -1,52 +1,65 @@
<template>
<div class="app-container">
<div class="form-content">
- <el-form inline :model="form.questionList" label-width="80px" :rules="rules">
+ <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="close-icon">
- <el-icon><Close /></el-icon>
+ <!-- <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="24">
- <el-form-item label="璇曢鍐呭" style="width: 100%" :prop="item.questionName">
+ <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"
- 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"
+ <el-col :span="6">
+ <el-form-item label="寰楀垎" :prop="item.questionScore">
+ <el-input-number
placeholder="璇疯緭鍏�"
v-model="item.questionScore"
- style="width: 200px"
- ></el-input>
+ :min="1"
+ :max="10"
+ controls-position="right"
+ ></el-input-number>
</el-form-item>
</el-col>
- <el-col :span="12">
- <el-form-item label="棰樼洰绫诲瀷" :prop="item.questionType">
+ <el-col :span="6">
+ <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 :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 === '1'">
+ <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="item.answerList">
+ <el-form-item label="閫夐」" style="width: 100%;" :prop="item.answerList">
<div
v-for="(ele, childIndex) in item.answerList"
:key="index"
@@ -57,9 +70,10 @@
<el-input
v-model="ele.answerName"
placeholder="璇疯緭鍏�"
- style="width: 85%; margin-right: 10px"
+ 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> -->
@@ -71,10 +85,10 @@
</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 class="center mt20 fixed">
+ <el-button type="primary" @click="addContent">娣诲姞璇勪环椤�</el-button>
+ <el-button @click="save()" type="primary" >淇濆瓨鍐呭</el-button>
</div>
</div>
</div>
@@ -82,42 +96,65 @@
<script lang="ts" setup>
import { listEvaluate, saveEvaluate } from '@/api/system/company/company'
-import { ElMessage} from 'element-plus'
+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'
+ required: true,
+ message: '璇疯緭鍏ラ棶棰�',
+ trigger: 'blur'
}
]
})
+const instance = getCurrentInstance()
+
function getListEvaluate() {
listEvaluate().then((val) => {
- tableData.value = val.data.questionList
+ form.value.questionList = val.data.questionList
})
}
function addContent() {
form.value.questionList.push({
questionStatus: 0,
- questionType: '2',
+ questionType: 2,
+ questionScore: 5,
+ questionName: '',
answerList: []
})
}
-function addOptions(index: number, name){
+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() {
- saveEvaluate({questionList: form.value.questionList}).then(val => {
- ElMessage.success('淇濆瓨鎴愬姛')
+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 changeValue(event, index, childIndex) {
// form.value.questionList[index].isScore = event.target.
@@ -126,19 +163,41 @@
})
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;
+ // border: 1px solid #e2e2e2;
margin-bottom: 10px;
- padding: 30px;
+ padding: 20px 30px 0;
position: relative;
+ :deep() {
+ .el-form-item__label{
+ font-weight: 500
+ }
+ }
}
.close-icon {
position: absolute;
@@ -162,4 +221,14 @@
.center{
text-align: center;
}
+.fixed{
+ background-color: white;
+ position: sticky;
+ bottom: 0;
+}
+.title-project{
+ font-weight: 700;
+ color: #606266;
+ margin-bottom: 10px
+}
</style>
--
Gitblit v1.9.1