Compare commits
2 Commits
051fc00253
...
e63fe5da2c
| Author | SHA1 | Date | |
|---|---|---|---|
| e63fe5da2c | |||
| 663fd47765 |
|
|
@ -4,8 +4,8 @@ import router from '../router'
|
|||
|
||||
const myAxios = axios.create({
|
||||
withCredentials:true,
|
||||
baseURL: 'http://localhost:9092/api'//测试服务器
|
||||
// baseURL: 'http://123.249.108.160:8888/api'
|
||||
baseURL: 'http://localhost:9092/api'
|
||||
// baseURL: 'http://123.249.108.160:8888/api' //测试服务器
|
||||
});
|
||||
// 添加请求拦截器
|
||||
axios.interceptors.request.use(function (config) {
|
||||
|
|
|
|||
80
src/layout/components/DateDrawer.vue
Normal file
80
src/layout/components/DateDrawer.vue
Normal file
|
|
@ -0,0 +1,80 @@
|
|||
<template>
|
||||
<div style="margin-bottom: 20px;">选择当天时间段和人数</div>
|
||||
<div v-for="(item,index) in timeArr">
|
||||
<span>选择时间段</span>
|
||||
<!-- <el-time-picker
|
||||
v-model="timePickArr[index]"
|
||||
format='HH:mm'
|
||||
is-range="true"
|
||||
range-separator="到"
|
||||
start-placeholder="开始"
|
||||
end-placeholder="结束"
|
||||
value-format="HH:mm"
|
||||
:style="{ width: '236px' }"
|
||||
@change="saveTime(index)"
|
||||
/> -->
|
||||
<div>
|
||||
<span>最小人数:</span>
|
||||
<el-select v-model="timeArr.minNumber" style="width: 100px" @change="minNum(index)">
|
||||
|
||||
</el-select>
|
||||
<span>最大人数:</span>
|
||||
<el-select v-model="timeArr.maxNumber" style="width: 100px" @change="maxNum(index)">
|
||||
|
||||
</el-select>
|
||||
<el-button circle @click="addList(index)"><el-icon>
|
||||
<Plus />
|
||||
</el-icon></el-button>
|
||||
<el-button circle @click="subList(index)" v-if="index > 0"><el-icon>
|
||||
<Minus />
|
||||
</el-icon></el-button>
|
||||
</div>
|
||||
</div>
|
||||
<el-button size="small" @click="printInfo()">
|
||||
打印
|
||||
</el-button>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref,onMounted,defineEmits } from 'vue';
|
||||
import { ElMessage } from 'element-plus';
|
||||
const fatherCom : any = defineProps(['timeObject']) //接收父组件传过来的值
|
||||
const timeArr : any = ref(fatherCom.timeObject) //把外层去掉，只留时间段数组
|
||||
|
||||
onMounted(()=>{
|
||||
})
|
||||
const saveTime =(index:number)=>{
|
||||
}
|
||||
const addList =(index:number)=>{}
|
||||
const subList =(index:number)=>{}
|
||||
const minNum =(index : number)=>{ //最小人数不能大于最大人数
|
||||
if(false) {
|
||||
ElMessage({
|
||||
type: 'warning',
|
||||
message: '最小人数不能大于最大人数'
|
||||
})
|
||||
return;
|
||||
}
|
||||
}
|
||||
const maxNum =(index : number)=>{
|
||||
if(false) {
|
||||
ElMessage({
|
||||
type: 'warning',
|
||||
message: '最大人数不能小于最小人数'
|
||||
})
|
||||
return;
|
||||
}
|
||||
}
|
||||
const printInfo =()=>{
|
||||
// console.log('timePickArr-->',timePickArr.value);
|
||||
console.log('timeArr-->',timeArr.value);
|
||||
// console.log(fatherCom);
|
||||
// let tempArr = timeArr.value[0].timeSlot.split("-")
|
||||
// timePickArr.value.push(tempArr)
|
||||
// console.log(timePickArr.value);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
|
@ -157,6 +157,7 @@ const drawerOpen =()=>{ //抽屉打开时
|
|||
if(isTrue.value) {
|
||||
periodObj.value = periodMap.get(periodObj.value.specificDate)
|
||||
timePickArr.value= timePickMap.get(periodObj.value.specificDate)
|
||||
console.log('timePickArr--->',timePickArr.value);
|
||||
}
|
||||
}
|
||||
const resetForm =()=>{ //重置表格
|
||||
|
|
|
|||
29
src/utils/messageInfo.ts
Normal file
29
src/utils/messageInfo.ts
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
import { ElMessage } from 'element-plus';
|
||||
|
||||
export const SuccessInfo = (message: any)=>{ //成功的提示
|
||||
ElMessage({
|
||||
type: 'success',
|
||||
message: message
|
||||
})
|
||||
}
|
||||
|
||||
export const ErrorInfo = (message: any)=>{ //错误的提示
|
||||
ElMessage({
|
||||
type: 'error',
|
||||
message: message
|
||||
})
|
||||
}
|
||||
|
||||
export const WarnInfo = (message: any) =>{ //警告的提示
|
||||
ElMessage({
|
||||
type: 'warning',
|
||||
message: message
|
||||
})
|
||||
}
|
||||
|
||||
export const CommInfo =(message: any)=>{ //普通提示
|
||||
ElMessage({
|
||||
type: 'info',
|
||||
message: message
|
||||
})
|
||||
}
|
||||
|
|
@ -1,99 +1,102 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="totalBox">
|
||||
<!-- 表单 ref 和 prop绑定 用于重置表单 -->
|
||||
<el-form ref="resetFormData" :model="form" label-width="auto" style="width: 750px" size="large">
|
||||
<el-form-item label="添加商品图片">
|
||||
<!-- 下面的event的作用,传入当前事件对象 -->
|
||||
<el-upload
|
||||
ref="uploadProductImg"
|
||||
action="#"
|
||||
list-type="picture-card"
|
||||
:auto-upload="false"
|
||||
multiple="true"
|
||||
:on-remove="handleRemove"
|
||||
@change="(event: any) => handleChange(event, 0)"
|
||||
:on-exceed="Exceed_ProductImg"
|
||||
limit="1" >
|
||||
<el-icon>
|
||||
<Plus />
|
||||
</el-icon>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
<!-- 添加图文描述-->
|
||||
<el-form-item label="添加图文描述">
|
||||
<el-upload
|
||||
ref="uploadProductDetail"
|
||||
action="#"
|
||||
list-type="picture-card"
|
||||
:auto-upload="false"
|
||||
multiple="true"
|
||||
:on-change="(event: any) => handleChange(event, 1)"
|
||||
:on-exceed="Exceed_ProductDetail"
|
||||
limit="1"
|
||||
:on-remove="handleRemove"
|
||||
>
|
||||
<el-icon>
|
||||
<Plus />
|
||||
</el-icon>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
<el-form-item label="产品名称" prop="name">
|
||||
<el-input v-model="form.name" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="产品价格" prop="price">
|
||||
<el-input v-model="form.price" />
|
||||
</el-form-item>
|
||||
<el-form-item label="产品简介" prop="intro">
|
||||
<el-input v-model="form.intro" />
|
||||
</el-form-item>
|
||||
<el-form-item label="当前库存" prop="inventory">
|
||||
<el-input v-model="form.inventory" />
|
||||
</el-form-item>
|
||||
<el-form-item label="是否为限定类产品" prop="festivalOrder">
|
||||
<el-select v-model="form.festivalOrder" placeholder="请选择" @change="(event: any) => loadForm(event, 0)">
|
||||
<el-option label="是" value="1" />
|
||||
<el-option label="否" value="0" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item v-if="form.region=='ture' " label="节日名称">
|
||||
<el-input v-model="form.festivalName" />
|
||||
</el-form-item> -->
|
||||
<el-form-item label="产品类别" prop="type">
|
||||
<el-select v-model="typeList.value" placeholder="请选择" @change="(event: any) => loadForm(event, 1)">
|
||||
<el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value1" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="商品标签" prop="label">
|
||||
<el-input v-model="form.label" type="textarea" placeholder="" />
|
||||
</el-form-item>
|
||||
<el-form-item label="商品详细描述" prop="introDetail">
|
||||
<el-input v-model="form.introDetail" type="textarea" placeholder="产品尺寸，服务等" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit">上架</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="resetForm">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="fromBox">
|
||||
<el-form ref="resetFormData" :model="form" label-width="auto" size="large" :rules="rules">
|
||||
<div>
|
||||
<el-form-item label="添加商品图片">
|
||||
<!-- 下面的event的作用,传入当前事件对象 -->
|
||||
<el-upload ref="uploadProductImg" action="#" list-type="picture-card" :auto-upload="false" multiple="true"
|
||||
:on-remove="handleRemove" @change="(event: any) => handleChange(event, 0)" :on-exceed="Exceed_ProductImg"
|
||||
limit="7">
|
||||
<el-icon>
|
||||
<Plus />
|
||||
</el-icon>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<!-- 添加图文描述-->
|
||||
<div>
|
||||
<el-form-item label="添加图文描述">
|
||||
<el-upload ref="uploadProductDetail" action="#" list-type="picture-card" :auto-upload="false"
|
||||
multiple="true" :on-change="(event: any) => handleChange(event, 1)" :on-exceed="Exceed_ProductDetail"
|
||||
limit="1" :on-remove="handleRemove">
|
||||
<el-icon>
|
||||
<Plus />
|
||||
</el-icon>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="NamePrice">
|
||||
<el-form-item label="产品名称" prop="name">
|
||||
<el-input v-model="form.name" maxlength="12" minlength="2" show-word-limit style="width: 260px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="产品价格" prop="price">
|
||||
<el-input-number v-model="form.price" min="0.01" :precision="2" :step="0.5" />
|
||||
<p>元</p>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="IntroInven">
|
||||
<el-form-item label="产品简介" prop="intro">
|
||||
<el-input v-model="form.intro" type="textarea" placeholder="产品尺寸，服务等" maxlength="30" show-word-limit
|
||||
style="width: 300px;" />
|
||||
</el-form-item>
|
||||
<div>
|
||||
<el-form-item label="库存" prop="inventory">
|
||||
<el-input-number v-model="form.inventory" min="0" :precision="0" :step="1" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
<div class="festivalBox">
|
||||
<el-form-item label="节日名称" prop="festivalName" style="width: 300px;">
|
||||
<el-input v-model="form.festivalName" />
|
||||
</el-form-item>
|
||||
<el-form-item label="产品类别" prop="type" style="width: 240px;">
|
||||
<el-select v-model="typeList.value" placeholder="请选择" @change="(event: any) => loadForm(event, 1)">
|
||||
<el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value1" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<el-form-item label="商品标签" prop="label">
|
||||
<div v-for="(item, index) in labelList" :key="index">
|
||||
<el-input v-model="labelList[index]" type="text" style="width: 150px;" maxlength="5" show-word-limit
|
||||
@blur="addLabelList" />
|
||||
</div>
|
||||
<el-button type="primary" @click="addLabel">添加</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item label="商品详细描述" prop="introDetail">
|
||||
<el-input v-model="form.introDetail" type="textarea" placeholder="产品尺寸，服务等" maxlength="100" show-word-limit/>
|
||||
</el-form-item>
|
||||
<div class="btnBox">
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit" :disabled="saveBtn">保存</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="resetForm">重置</el-button>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, onMounted , inject} from 'vue';
|
||||
import { Plus } from '@element-plus/icons-vue';
|
||||
import { ElMessage, type UploadFile , type UploadProps , genFileId , type UploadRawFile} from 'element-plus';
|
||||
import { ref, onMounted, inject, reactive } from 'vue';
|
||||
import { Plus } from '@element-plus/icons-vue';
|
||||
import { type UploadFile, type UploadProps, genFileId, type UploadRawFile, type FormInstance, type FormRules } from 'element-plus';
|
||||
import { SuccessInfo, WarnInfo, CommInfo } from '@/utils/messageInfo';
|
||||
import myAxios from "@/api/myAxios";
|
||||
const fileSimple = ref() //单个文件
|
||||
const uploadedFiles = ref<UploadFile[]>([]);//商品图片数组
|
||||
const uploadedDescription = ref<UploadFile[]>([]);//商品图文描述数组
|
||||
const productImgMap = new Map() //商品图片数组
|
||||
// const uploadedFiles = ref<UploadFile[]>([]);//商品图片数组
|
||||
// const uploadedDescription = ref<UploadFile[]>([]);//商品图文描述数组
|
||||
const productImgArr : any = ref([])
|
||||
const resetFormData = ref()
|
||||
const form = ref({
|
||||
name: '',
|
||||
name: '', //商品名称
|
||||
price: '', //商品价格
|
||||
intro: '',//产品简介
|
||||
festivalOrder: '',//是否为限定
|
||||
festivalName: '', //节日名称
|
||||
type: '',//类别
|
||||
label: '',//商品标签
|
||||
introDetail: '',//详情描述
|
||||
|
|
@ -102,15 +105,17 @@ const form = ref({
|
|||
inventory: '' //库存
|
||||
})
|
||||
//导入组件刷新
|
||||
const reload : any = inject("reload")
|
||||
const reload: any = inject("reload")
|
||||
const typeList: any = ref([
|
||||
{
|
||||
value1: '',
|
||||
label: ''
|
||||
}
|
||||
])
|
||||
const uploadProductImg : any = ref() //图片上传的ref绑定
|
||||
const uploadProductDetail : any = ref() //图片上传的ref绑定
|
||||
const uploadProductImg: any = ref() //图片上传的ref绑定
|
||||
const uploadProductDetail: any = ref() //图片上传的ref绑定
|
||||
const saveBtn = ref(false) //按钮状态
|
||||
const labelList = ref([''])
|
||||
onMounted(() => {
|
||||
getTypeList() //加载类别列表，渲染在产品列表的select选项里面
|
||||
})
|
||||
|
|
@ -123,29 +128,26 @@ const getTypeList = async () => { //获取类别列表作为可选项
|
|||
}
|
||||
}
|
||||
}
|
||||
const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
|
||||
console.log(uploadFile, uploadFiles)
|
||||
const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => { //uploadFile表示当前删除的图片，uploadFiles是还剩余的图片信息
|
||||
productImgMap.delete(uploadFile.uid)
|
||||
productImgArr.value.splice(0,productImgArr.value.length) //一并删除数组中存放的图片Url地址
|
||||
}
|
||||
//提交表单
|
||||
const onSubmit = async () => {
|
||||
const values = Object.values(form.value);
|
||||
// 使用some()方法来检查是否有任何值为空
|
||||
if (values.some(value => value === null || value === undefined || value === '')) {
|
||||
ElMessage({
|
||||
type:'warning',
|
||||
message:'请检查表单数据是否完整填写'
|
||||
})
|
||||
console.log('表单--->',values);
|
||||
if (values.some((value: any)=> value === null || value === undefined || value === '' || value === 0)) {
|
||||
WarnInfo('请检查表单数据是否完整填写')
|
||||
return; //空返回结束函数
|
||||
}
|
||||
const res = await myAxios.post('/goods/add', { ...form.value })
|
||||
console.log(res.data);
|
||||
if (res.data.code === 1) {
|
||||
ElMessage({
|
||||
type: 'success',
|
||||
message: "提交成功"
|
||||
})
|
||||
SuccessInfo('提交成功')
|
||||
reload() //上传完后重置表单
|
||||
} else {
|
||||
ElMessage.error("服务错误")
|
||||
WarnInfo('服务错误')
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
|
@ -168,27 +170,115 @@ const handleChange = async (file: any, flag: number) => {
|
|||
})
|
||||
if (res.data.code === 1) {
|
||||
//三元运算 当flag为0时，赋值给商品图片 flag为1时，赋值给详情图片
|
||||
flag ? form.value.detailImg = res.data.data : form.value.goodImg = res.data.data
|
||||
// flag ? form.value.detailImg = res.data.data : 0
|
||||
if(flag === 0) {
|
||||
productImgMap.set(fileSimple.value.uid,res.data.data)
|
||||
productImgMap.forEach(loopMap) //将图片url插入到数组中
|
||||
form.value.goodImg = formatString()
|
||||
} else {
|
||||
form.value.detailImg = res.data.data
|
||||
}
|
||||
// console.log('str--->',formatString());
|
||||
}
|
||||
}
|
||||
//将 商品类别 赋值到表格里
|
||||
const loadForm = (value: any, flag: number) => {
|
||||
flag ? form.value.type = value : form.value.festivalOrder = value //三元运算符 flag=1 是关于"商品类别"选项的值 flag=0 是关于“是否为节日限定”选项的值
|
||||
flag ? form.value.type = value : form.value.festivalName = value //三元运算符 flag=1 是关于"商品类别"选项的值 flag=0 是关于“是否为节日限定”选项的值
|
||||
}
|
||||
//清除表单
|
||||
const resetForm = () =>{
|
||||
const resetForm = () => {
|
||||
resetFormData.value.resetFields()
|
||||
}
|
||||
const Exceed_ProductImg: UploadProps['onExceed'] = (files) => { //覆盖商品照片
|
||||
uploadProductImg.value!.clearFiles()
|
||||
const Exceed_ProductImg: UploadProps['onExceed'] = (files) => { //覆盖商品照片 'onExceed'当文件个数超过限制时，做出的判断
|
||||
uploadProductImg.value!.clearFiles() //清空已上传的文件列表
|
||||
const file = files[0] as UploadRawFile
|
||||
file.uid = genFileId()
|
||||
uploadProductImg.value!.handleStart(file)
|
||||
uploadProductImg.value!.handleStart(file) //手动选择文件
|
||||
}
|
||||
const Exceed_ProductDetail: UploadProps['onExceed'] = (files) => { //覆盖商品详情图片
|
||||
uploadProductDetail.value!.clearFiles()
|
||||
uploadProductDetail.value!.clearFiles() //清空已上传的文件列表
|
||||
const file = files[0] as UploadRawFile
|
||||
file.uid = genFileId()
|
||||
uploadProductDetail.value!.handleStart(file)
|
||||
uploadProductDetail.value!.handleStart(file) //手动选择文件
|
||||
}
|
||||
</script>
|
||||
const validateName = (rule: any, value: any, callback: any) => { //商品名称的校验规则
|
||||
if (value === '') {
|
||||
callback(new Error('请输入商品名称'))
|
||||
} else if (value.length < 2) {
|
||||
callback(new Error('商品名称不能小于两位'))
|
||||
saveBtn.value = true
|
||||
} else { saveBtn.value = false }
|
||||
}
|
||||
const validateIntro = (rule: any, value: any, callback: any) => { //商品简介的校验规则
|
||||
if (value === '') {
|
||||
callback(new Error('请输入商品简介'))
|
||||
} else if (value.length < 20) {
|
||||
callback(new Error('商品简介不能少于20字'))
|
||||
saveBtn.value = true
|
||||
} else { saveBtn.value = false }
|
||||
}
|
||||
const validateDetail = (rule: any, value: any, callback: any) => {
|
||||
if(value === '') {
|
||||
callback(new Error('请输入商品详情'))
|
||||
} else if(value.length < 80) {
|
||||
callback(new Error('商品详情不能少于80字'))
|
||||
saveBtn.value = true
|
||||
} else { saveBtn.value = false }
|
||||
}
|
||||
const rules = reactive<FormRules<typeof form>>({ //表单校验规则
|
||||
name: [{ validator: validateName, trigger: 'blur' }],
|
||||
intro: [{ validator: validateIntro, trigger: 'blur' }],
|
||||
introDetail: [{ validator: validateDetail, trigger: 'blur' }]
|
||||
})
|
||||
const addLabel = () => { //添加商品标签按钮的方法
|
||||
if (labelList.value[labelList.value.length - 1] === '') {
|
||||
WarnInfo('请填写完')
|
||||
return;
|
||||
}
|
||||
if (labelList.value.length < 4) {
|
||||
labelList.value.push('')
|
||||
}
|
||||
}
|
||||
const addLabelList = () => { //格式化商品标签
|
||||
var string = ''
|
||||
if (!labelList.value.some((item: any) => item === '')) {
|
||||
string = labelList.value.join(';')
|
||||
} else return;
|
||||
form.value.label = string
|
||||
}
|
||||
const loopMap = (value :any , key :any ,map :any) => { //循环商品图片Map集合函数,用于给请求的字段赋值
|
||||
productImgArr.value.push(value)
|
||||
}
|
||||
const formatString =()=>{
|
||||
var str = ''
|
||||
str = productImgArr.value.join(';')
|
||||
// console.log(str);
|
||||
return str
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.totalBox {
|
||||
display: flex;
|
||||
|
||||
margin: 0 auto;
|
||||
}
|
||||
.fromBox {
|
||||
width: 700px;
|
||||
height: 750px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.NamePrice {
|
||||
display: flex;
|
||||
}
|
||||
.IntroInven {
|
||||
display: flex;
|
||||
}
|
||||
.festivalBox {
|
||||
display: flex;
|
||||
}
|
||||
.btnBox {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -193,22 +193,20 @@ const deliverGoods = async (row : any)=>{
|
|||
getOrderList()
|
||||
}
|
||||
}
|
||||
//取消订单
|
||||
const deleteOrder = async (row : any) => {
|
||||
// console.log(typeof index)
|
||||
const res = await myAxios.post('/goods/delete', { id: row.id })
|
||||
const deleteOrder = async (row : any) => { //取消订单+微信退款
|
||||
console.log('row-->',row.id)
|
||||
const res = await myAxios.post('/wechat/refund/create', { id: row.id }) //传入订单号取消订单并退款
|
||||
console.log(res)
|
||||
if (res.data.code === 1) {
|
||||
ElMessage({
|
||||
type: 'success',
|
||||
message: '删除成功',
|
||||
message: '退款成功',
|
||||
})
|
||||
getOrderList()
|
||||
}
|
||||
}
|
||||
const reset = () => {
|
||||
name.value = '';
|
||||
|
||||
};
|
||||
const load = () => { }
|
||||
//保存订单状态
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
</el-form-item>
|
||||
</div>
|
||||
<!-- 添加图文描述-->
|
||||
<div class="boxPicture2">
|
||||
<div>
|
||||
<el-form-item label="添加课程展示图">
|
||||
<el-upload ref="uploadProductDetail" action="#" list-type="picture-card" :auto-upload="false"
|
||||
multiple="true" :on-change="(event: any) => handleChange(event, 1)" :on-exceed="Exceed_ProductDetail"
|
||||
|
|
@ -60,7 +60,7 @@
|
|||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="timeTable">
|
||||
<div>
|
||||
<!-- <appointTime @time-Info="getInfo"></appointTime> -->
|
||||
<calendarUtil @calendar-info="getInfo"></calendarUtil>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@
|
|||
<!-- 数据展示 -->
|
||||
<el-table :data="tableData" border stripe header-cell-class-name="headerBg"
|
||||
:cell-style="{ 'text-align': 'center', 'font-size': '16px' }" @selection-change="handleSelectionChange"
|
||||
:header-cell-style="{ 'text-align': 'center' }">
|
||||
:header-cell-style="{ 'text-align': 'center' }" default-expand-all>
|
||||
<el-table-column type="selection" width="55"></el-table-column>
|
||||
<el-table-column prop="id" label="课程编号" width="80">
|
||||
<template #default="{ $index }">
|
||||
|
|
@ -43,20 +43,31 @@
|
|||
<el-table-column prop="name" label="课程名称"></el-table-column>
|
||||
<el-table-column prop="price" label="单次价格" width="100"></el-table-column>
|
||||
<el-table-column label="展开时间段" type="expand" width="80">
|
||||
<template #default="{ $index,row }">
|
||||
<template #default="{ $index }">
|
||||
<!-- 放后端传来的预约时间 -->
|
||||
<el-table :data="appointmentDateArr[$index]" :header-cell-style="{ 'text-align': 'center' }"
|
||||
:cell-style="{ 'text-align': 'center' }">
|
||||
<el-table-column label="是否可预约" prop="isAvailable" />
|
||||
<el-table-column label="日期" prop="specificDate" />
|
||||
<el-table-column label="操作">
|
||||
<el-button size="small" @click="">
|
||||
详情
|
||||
<template v-slot="scope">
|
||||
<el-button size="small" @click="updateDay(scope.row)">
|
||||
<div v-if="scope.row.isAvailable == 1">取消预约</div>
|
||||
<div v-if="scope.row.isAvailable == 0">启用预约</div>
|
||||
</el-button>
|
||||
<el-button size="small" @click="openDrawer">
|
||||
<el-button size="small" type="primary" @click="">
|
||||
添加日期
|
||||
</el-button>
|
||||
<el-button size="small" @click="openDrawer($index,scope.row)">
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button class="ml-5" type="danger">删除</el-button>
|
||||
<el-popconfirm class="ml-5" confirm-button-text='确定' cancel-button-text='取消' icon="InfoFilled" icon-color="red"
|
||||
title="是否确认删除" @confirm="deleteDate(scope.row.id)" width=180>
|
||||
<template #reference>
|
||||
<el-button class="ml-5" type="danger" v-if="tableData[$index].appointmentDateVOList.length>1">删除</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</template>
|
||||
|
|
@ -77,7 +88,7 @@
|
|||
<el-button size="small" @click="ReviseOrView(scope.$index, scope.row, 1)">
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button size="small" @click="handleOff(scope.$index, scope.row)">
|
||||
<el-button size="small" @click="handleOff(scope.row)">
|
||||
<div v-if="scope.row.isShelves == 1">下架 </div>
|
||||
<div v-if="scope.row.isShelves == 0">上架 </div>
|
||||
</el-button>
|
||||
|
|
@ -87,9 +98,6 @@
|
|||
<el-button class="ml-5" type="danger">删除</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
<el-popconfirm confirm-button-text='确定' cancel-button-text='取消' icon="el-icon-info" icon-color="red"
|
||||
title="您确定删除吗？">
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
|
@ -124,21 +132,6 @@
|
|||
<el-form-item label="商品价格">
|
||||
<el-input v-model="editForm.price"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="商品数量">
|
||||
<el-input v-model="editForm.inventory"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="商品状态">
|
||||
<el-select v-model="editForm.isShelves">
|
||||
<el-option label="上架" value="上架" />
|
||||
<el-option label="下架" value="下架" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="是否为限定类产品" prop="festivalOrder">
|
||||
<el-select v-model="editForm.festivalOrder" @change="(event: any) => loadForm(event, 0)">
|
||||
<el-option label="是" value="1" />
|
||||
<el-option label="否" value="0" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="商品标签">
|
||||
<el-input v-model="editForm.label"></el-input>
|
||||
</el-form-item>
|
||||
|
|
@ -168,10 +161,38 @@
|
|||
<!-- 时间段抽屉 -->
|
||||
<el-drawer
|
||||
v-model="drawer"
|
||||
title="I am the title"
|
||||
:title="'当前日期：'+drawerDate.specificDate + ' 课程名称：' + className"
|
||||
direction="ltr"
|
||||
>
|
||||
<span>Hi, there!</span>
|
||||
@closed="closedDrawer">
|
||||
<div style="margin-bottom: 20px;">选择当天时间段和人数</div>
|
||||
<div v-for="(item,index) in drawerDate.timePeriodVOList">
|
||||
<span>选择时间段</span>
|
||||
<el-time-picker
|
||||
v-model="timePickArr[index]"
|
||||
format='HH:mm'
|
||||
is-range="true"
|
||||
range-separator="到"
|
||||
start-placeholder="开始"
|
||||
end-placeholder="结束"
|
||||
value-format="HH:mm"
|
||||
:style="{ width: '236px' }"
|
||||
@change="saveTime(index)"
|
||||
:disabled="timeAbleArr[index]"
|
||||
/>
|
||||
<div>
|
||||
<span>最小人数:</span>
|
||||
<el-select v-model="InfoArr[index].minNumber" style="width: 50px" @change="minNum(index)" :disabled="numAbleArr[index]">
|
||||
<el-option v-for="item in minArr" :label="item" :value="item" />
|
||||
</el-select>
|
||||
<span>最大人数:</span>
|
||||
<el-select v-model="InfoArr[index].maxNumber" style="width: 50px" @change="maxNum(index)" :disabled="numAbleArr[index]">
|
||||
<el-option v-for="item in maxArr" :label="item" :value="item" />
|
||||
</el-select>
|
||||
<el-button type="primary" @click="UpdateNum(item,index)" v-if="timeAbleArr[index]">{{ btnText[index] }}</el-button>
|
||||
<el-button type="danger" @click="subList(index)" v-if="index > 0">删除</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<el-button type="success" @click="addList">{{ addbtnText }}</el-button>
|
||||
</el-drawer>
|
||||
</template>
|
||||
|
||||
|
|
@ -180,7 +201,7 @@ import { ElMessage , type UploadProps , genFileId ,type UploadRawFile } from 'e
|
|||
import { ref, onMounted, inject } from 'vue';
|
||||
import myAxios from "@/api/myAxios";
|
||||
const total = ref(0); //总页数
|
||||
const idList = ref([]);
|
||||
const idList = ref([]); //用于批量删除
|
||||
const searchParams: any = ref({ //封装分页
|
||||
current: 1, //当前页码
|
||||
pageSize: 5, //每页显示条数
|
||||
|
|
@ -199,9 +220,29 @@ const reload : any = inject("reload") //页面重新刷新
|
|||
const fileSimple = ref()
|
||||
const uploadProductImg : any = ref() //图片上传的ref绑定
|
||||
const uploadProductDetail : any = ref() //图片上传的ref绑定
|
||||
const drawer = ref(false)
|
||||
//抽屉变量
|
||||
const drawer = ref(false) //抽屉打开
|
||||
const drawerDate : any = ref({}) //当前日期、时间段人数信息
|
||||
const timePickArr : any = ref([]) //时间段选择器
|
||||
const minArr : any = ref([]) //最小人数数组
|
||||
const maxArr : any = ref([]) //最大人数数组
|
||||
const InfoArr : any = ref([]) //时间段人数信息数组
|
||||
const btnText = ref(Array.from({length:15},()=>('修改')))
|
||||
const addbtnText = ref('添加时间段')
|
||||
const timeAbleArr = ref( //禁用时间段组件
|
||||
Array.from({ length: 15 },()=>(false))
|
||||
)
|
||||
const numAbleArr = ref( //禁用人数组件
|
||||
Array.from({ length: 15 },()=>(true))
|
||||
)
|
||||
const className = ref('') //课程名称
|
||||
const nowBookPeo = ref(0) //当前预约人数
|
||||
onMounted(() => { //页面加载时获取商品列表和分类页表
|
||||
getProductList()
|
||||
for(let i = 0;i <=50 ; i++) { //初始化人数选择的数组
|
||||
minArr.value[i] = 5+i
|
||||
maxArr.value[i] = 6+i
|
||||
}
|
||||
})
|
||||
const getProductList = async () => {
|
||||
try {
|
||||
|
|
@ -211,7 +252,7 @@ const getProductList = async () => {
|
|||
tableData.value = res.data.data.records;
|
||||
total.value = parseInt(res.data.data.total) //总数据量，用于分页
|
||||
appointmentDateArr.value.splice(0,total.value)
|
||||
console.log(tableData.value);
|
||||
console.log('tableData--->',tableData.value);
|
||||
tableData.value.forEach((val : any) => {
|
||||
appointmentDateArr.value.push(val.appointmentDateVOList)
|
||||
})
|
||||
|
|
@ -229,6 +270,20 @@ const getProductList = async () => {
|
|||
}
|
||||
}
|
||||
const saveEdit = async () => { //编辑商品
|
||||
const res = await myAxios.post('/goods/service/single/update',{...editForm.value})
|
||||
if(res.data.code === 1) {
|
||||
DialogVisible.value = false
|
||||
ElMessage({
|
||||
type: 'success',
|
||||
message: '更新成功'
|
||||
})
|
||||
} else {
|
||||
ElMessage({
|
||||
type: 'error',
|
||||
message: '请检查字段是否正确填写'
|
||||
})
|
||||
}
|
||||
console.log(res.data);
|
||||
}
|
||||
const searchByState = (event : any) => { //通过商品是否上架/下架搜索
|
||||
searchParams.value.isShelves = event
|
||||
|
|
@ -238,7 +293,7 @@ const searchByState = (event : any) => { //通过商品是否上架/下架搜
|
|||
//删除商品
|
||||
const deleteProduct = async (index: number) => {
|
||||
console.log(typeof index)
|
||||
const res = await myAxios.post('/goods/delete', { id: index })
|
||||
const res = await myAxios.post('/goods/delete/service', { id: index })
|
||||
console.log(res)
|
||||
if (res.data.code === 1) {
|
||||
ElMessage({
|
||||
|
|
@ -248,7 +303,6 @@ const deleteProduct = async (index: number) => {
|
|||
getProductList()
|
||||
}
|
||||
}
|
||||
//选中发生的方法--->将其赋值给批量删除的数组
|
||||
//详情或编辑
|
||||
const ReviseOrView = (index: number, row: any , flag : number) => {
|
||||
//flag值不同显示不同内容 disabled开启和关闭
|
||||
|
|
@ -257,16 +311,16 @@ const ReviseOrView = (index: number, row: any , flag : number) => {
|
|||
editForm.value = row;
|
||||
};
|
||||
//下架商品(待优化，有问题，逻辑有问题)
|
||||
const handleOff = async (index: number, row: any) => {
|
||||
row.isShelves ? row.isShelves = 0 : row.isShelves = 1 //三元运算符 改变那一行的上架值
|
||||
editForm.value = row;
|
||||
const res = await myAxios.post('/goods/update',{...editForm.value})
|
||||
const handleOff = async (row: any) => {
|
||||
console.log(row.isShelves);
|
||||
const res = await myAxios.post('/goods/service/shelves',{id: row.id})
|
||||
if(res.data.code === 1) {
|
||||
ElMessage({
|
||||
type:'success',
|
||||
message:'更新成功'
|
||||
})
|
||||
}
|
||||
}
|
||||
getProductList()
|
||||
}
|
||||
//处理行数大小变化
|
||||
const handleSizeChange = (newSize: any) => {
|
||||
|
|
@ -298,10 +352,6 @@ const Exceed_ProductDetail: UploadProps['onExceed'] = (files) => { //覆盖商
|
|||
file.uid = genFileId()
|
||||
uploadProductDetail.value!.handleStart(file)
|
||||
}
|
||||
// //将 商品类别 赋值到表格里
|
||||
const loadForm = (value: any, flag: number) => {
|
||||
flag ? editForm.value.type = value : editForm.value.festivalOrder = value //三元运算符 flag=1 是关于"商品类别"选项的值 flag=0 是关于“是否为节日限定”选项的值
|
||||
}
|
||||
// 图片上传请求 此请求只要选择了图片，就会默认上传
|
||||
const handleChange = async (file: any, flag: number) => {
|
||||
fileSimple.value = file
|
||||
|
|
@ -346,9 +396,147 @@ const delBatch = async ()=>{
|
|||
}
|
||||
}
|
||||
const handleSelectionChange =()=>{}
|
||||
const openDrawer =()=>{
|
||||
const openDrawer =(index : number,dateInfo : any)=>{ //抽屉打开方法
|
||||
// console.log('row-->',dateInfo);
|
||||
className.value = tableData.value[index].name
|
||||
timePickArr.value.splice(0,timePickArr.value.length) //删除之前的时间段
|
||||
drawerDate.value = dateInfo
|
||||
InfoArr.value = dateInfo.timePeriodVOList
|
||||
console.log(drawerDate.value);
|
||||
dateInfo.timePeriodVOList.forEach((item:any,index:number)=>{ //格式化时间段框，然后将时间段数组禁用，只修改人数
|
||||
let arr = item.timeSlot.split("-")
|
||||
timeAbleArr.value[index] = true
|
||||
timePickArr.value.push(arr)
|
||||
})
|
||||
drawer.value = true
|
||||
}
|
||||
const saveTime =(index: number)=>{
|
||||
try{
|
||||
drawerDate.value.timePeriodVOList[index].timeSlot = timePickArr.value[index][0]+'-'+timePickArr.value[index][1]
|
||||
} catch {
|
||||
drawerDate.value.timePeriodVOList[index].timeSlot = ''
|
||||
}
|
||||
}
|
||||
const minNum =(index: number)=>{}
|
||||
const maxNum =(index: number)=>{}
|
||||
const addList = async ()=>{
|
||||
let newIndex = drawerDate.value.timePeriodVOList.length
|
||||
numAbleArr.value[newIndex] = false //启用组件
|
||||
console.log('drawerDate--->',drawerDate.value);
|
||||
if(addbtnText.value === '添加时间段') {
|
||||
drawerDate.value.timePeriodVOList.push({ //增加当前日期时间段
|
||||
id: 0,
|
||||
timeSlot: '',
|
||||
maxNumber: 0,
|
||||
minNumber: 0
|
||||
})
|
||||
timePickArr.value.push([])
|
||||
addbtnText.value = '保存时间段'
|
||||
}
|
||||
// console.log('timeSlot-->',drawerDate.value.timePeriodVOList[newIndex].timeSlot);
|
||||
if(!judgeNull(drawerDate.value.timePeriodVOList)) {
|
||||
ElMessage({
|
||||
type: 'warning',
|
||||
message: '填写时间段和人数'
|
||||
})
|
||||
return;
|
||||
}
|
||||
const res = await myAxios.post('/appointmentDate/add/time',{
|
||||
timeSlot: drawerDate.value.timePeriodVOList[newIndex-1].timeSlot,
|
||||
minNumber: drawerDate.value.timePeriodVOList[newIndex-1].minNumber,
|
||||
maxNumber: drawerDate.value.timePeriodVOList[newIndex-1].maxNumber,
|
||||
appointmentDateId: drawerDate.value.id,
|
||||
})
|
||||
console.log(res.data.data);
|
||||
if(res.data.code === 1) {
|
||||
drawerDate.value.timePeriodVOList[newIndex-1].id = res.data.data
|
||||
drawerDate.value.timePeriodVOList.forEach((item: any,index: number)=>{
|
||||
timeAbleArr.value[index] = true
|
||||
numAbleArr.value[index] = true
|
||||
})
|
||||
ElMessage({
|
||||
type: 'success',
|
||||
message: '添加时间段成功'
|
||||
})
|
||||
} else {
|
||||
ElMessage({
|
||||
type: 'error',
|
||||
message: '添加失败'
|
||||
})
|
||||
}
|
||||
console.log(res.data);
|
||||
addbtnText.value = '添加时间段'
|
||||
}
|
||||
const subList =(index: number)=>{}
|
||||
const UpdateNum = async (item: any,index:number)=>{ //修改具体日期某时间段的人数
|
||||
btnText.value[index] === '修改' ? btnText.value[index] = '保存' : btnText.value[index] = '修改'
|
||||
btnText.value[index] === '保存' ? numAbleArr.value[index] = false : numAbleArr.value[index] = true
|
||||
if(btnText.value[index] === '修改') {
|
||||
const res = await myAxios.post('/appointmentDate/update/time',{
|
||||
id: item.id,
|
||||
minNumber: item.minNumber,
|
||||
maxNumber: item.maxNumber
|
||||
})
|
||||
if(res.data.code === 1) {
|
||||
ElMessage({
|
||||
type: 'success',
|
||||
message: '更新成功'
|
||||
})
|
||||
} else {
|
||||
ElMessage({
|
||||
type: 'error',
|
||||
message: '更新失败'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
const updateDay = async (row:any)=>{ //修改今天是否可以预约
|
||||
const res = await myAxios.post('/appointmentDate/update/status',{id: row.id})
|
||||
if(res.data.code === 1) {
|
||||
ElMessage({
|
||||
type:'success',
|
||||
message: '修改成功'
|
||||
});
|
||||
}
|
||||
getProductList()
|
||||
}
|
||||
const judgeNull =(List : any)=>{ //时间段和人数统一判空方法
|
||||
console.log('List--->',List);
|
||||
if (List.some((item:any) => item.timeSlot=== '' || item.minNumber === 0 || item.maxNumber === 0)) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
const closedDrawer =()=>{ //完全关闭抽屉触发
|
||||
let newIndex = drawerDate.value.timePeriodVOList.length
|
||||
timeAbleArr.value.forEach((item: any ,index: number)=>{
|
||||
timeAbleArr.value[index] = false
|
||||
numAbleArr.value[index] = true
|
||||
btnText.value[index] = '修改'
|
||||
})
|
||||
if(!judgeNull(drawerDate.value.timePeriodVOList)) {
|
||||
console.log('关闭抽屉的删除数组被激活');
|
||||
drawerDate.value.timePeriodVOList.splice(newIndex-1,1)
|
||||
}
|
||||
addbtnText.value = '添加时间段'
|
||||
}
|
||||
const deleteDate = async (id: number)=>{ //删除当前日期方法
|
||||
console.log(id)
|
||||
const res = await myAxios.post('/appointmentDate/del/id',{id:id})
|
||||
// console.log('res--->',res);
|
||||
if(res.data.code === 1) {
|
||||
getProductList()
|
||||
ElMessage({
|
||||
type: 'success',
|
||||
message: '删除成功'
|
||||
})
|
||||
} else {
|
||||
ElMessage({
|
||||
type: 'info',
|
||||
message: '请求失败'
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
|
|
|||
|
|
@ -1,47 +1,104 @@
|
|||
<template>
|
||||
<div class="demo-range">
|
||||
<el-time-picker
|
||||
v-model="value1"
|
||||
is-range
|
||||
range-separator="To"
|
||||
start-placeholder="Start time"
|
||||
end-placeholder="End time"
|
||||
@change="abc"
|
||||
/>
|
||||
<el-time-picker
|
||||
v-model="value2"
|
||||
is-range
|
||||
arrow-control
|
||||
range-separator="To"
|
||||
start-placeholder="Start time"
|
||||
end-placeholder="End time"
|
||||
/>
|
||||
</div>
|
||||
<el-form
|
||||
ref="ruleFormRef"
|
||||
style="max-width: 600px"
|
||||
:model="ruleForm"
|
||||
status-icon
|
||||
:rules="rules"
|
||||
label-width="auto"
|
||||
class="demo-ruleForm"
|
||||
>
|
||||
<el-form-item label="Password" prop="pass">
|
||||
<el-input v-model="ruleForm.pass" type="password" autocomplete="off" />
|
||||
</el-form-item>
|
||||
<el-form-item label="Confirm" prop="checkPass">
|
||||
<el-input
|
||||
v-model="ruleForm.checkPass"
|
||||
type="password"
|
||||
autocomplete="off"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="Age" prop="age">
|
||||
<el-input v-model.number="ruleForm.age" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="submitForm(ruleFormRef)">
|
||||
Submit
|
||||
</el-button>
|
||||
<el-button @click="resetForm(ruleFormRef)">Reset</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue'
|
||||
import { reactive, ref } from 'vue'
|
||||
import type { FormInstance, FormRules } from 'element-plus'
|
||||
|
||||
const value1 = ref<[Date, Date]>([
|
||||
new Date(2016, 9, 10, 8, 40),
|
||||
new Date(2016, 9, 10, 9, 40),
|
||||
])
|
||||
const value2 = ref<[Date, Date]>([
|
||||
new Date(2016, 9, 10, 8, 40),
|
||||
new Date(2016, 9, 10, 9, 40),
|
||||
])
|
||||
const abc=()=>{
|
||||
console.log(value1.value);
|
||||
|
||||
}
|
||||
</script>
|
||||
const ruleFormRef = ref<FormInstance>() //表单实例
|
||||
|
||||
<style>
|
||||
.demo-range .el-date-editor {
|
||||
margin: 8px;
|
||||
const checkAge = (rule: any, value: any, callback: any) => {
|
||||
if (!value) {
|
||||
return callback(new Error('Please input the age'))
|
||||
}
|
||||
setTimeout(() => {
|
||||
if (!Number.isInteger(value)) {
|
||||
callback(new Error('Please input digits'))
|
||||
} else {
|
||||
if (value < 18) {
|
||||
callback(new Error('Age must be greater than 18'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
.demo-range .el-range-separator {
|
||||
box-sizing: content-box;
|
||||
const validatePass = (rule: any, value: any, callback: any) => {
|
||||
if (value === '') {
|
||||
callback(new Error('请输入密码'))
|
||||
} else {
|
||||
if (ruleForm.checkPass !== '') { //ruleForm就是当前这个表单
|
||||
if (!ruleFormRef.value) return
|
||||
ruleFormRef.value.validateField('checkPass') //具体检验的某个字段,再检验一次
|
||||
}
|
||||
callback()
|
||||
}
|
||||
}
|
||||
</style>
|
||||
const validatePass2 = (rule: any, value: any, callback: any) => {
|
||||
if (value === '') {
|
||||
callback(new Error('Please input the password again'))
|
||||
} else if (value !== ruleForm.pass) {
|
||||
callback(new Error("Two inputs don't match!"))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
|
||||
const ruleForm = reactive({
|
||||
pass: '',
|
||||
checkPass: '',
|
||||
age: '',
|
||||
})
|
||||
|
||||
const rules = reactive<FormRules<typeof ruleForm>>({ //表单校验规则,需要检验的就放进来
|
||||
pass: [{ validator: validatePass, trigger: 'blur' }],
|
||||
checkPass: [{ validator: validatePass2, trigger: 'blur' }],
|
||||
age: [{ validator: checkAge, trigger: 'blur' }],
|
||||
})
|
||||
|
||||
const submitForm = (formEl: FormInstance | undefined) => {
|
||||
if (!formEl) return
|
||||
formEl.validate((valid) => {
|
||||
if (valid) {
|
||||
console.log('submit!')
|
||||
} else {
|
||||
console.log('error submit!')
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const resetForm = (formEl: FormInstance | undefined) => {
|
||||
if (!formEl) return
|
||||
formEl.resetFields()
|
||||
}
|
||||
</script>
|
||||
Loading…
Reference in New Issue
Block a user