269 lines
8.6 KiB
Vue
269 lines
8.6 KiB
Vue
<template>
|
||
<div class="flexCard">
|
||
<el-card class="richTextPreview" shadow="never">
|
||
<div class="titleText">移动端预览</div>
|
||
<p v-html="previewRichText"></p>
|
||
</el-card>
|
||
<!-- 表单 ref 和 prop绑定 用于重置表单 -->
|
||
<el-card class="form-container" shadow="never">
|
||
<div class="form">
|
||
<el-form ref="resetFormData" :model="form" size="large" :rules="rules">
|
||
<div>
|
||
<el-form-item label="添加商品图片">
|
||
<ImgListUpload @update:goodImgArr="form.goodImg = $event"/>
|
||
</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" label-width="100">
|
||
<el-input-number v-model="form.price" min="0" :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" label-width="80">
|
||
<el-input-number v-model="form.inventory" min="0" :precision="0" :step="1" :disabled="invInput" />
|
||
</el-form-item>
|
||
</div>
|
||
</div>
|
||
<div class="festivalBox">
|
||
<el-form-item label="节日名称" prop="festivalName" style="width: 300px;">
|
||
<el-select v-model="form.festivalName" placeholder="请选择" >
|
||
<el-option v-for="item in festivalArr" :key="item" :label="item.name" :value="item.name" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="产品类别" prop="type" style="width: 240px;" label-width="80">
|
||
<el-select v-model="form.type" placeholder="请选择" @change="(event: any) => loadForm(event)" :disabled="typeSelect">
|
||
<el-option v-for="item in typeList" :key="item" :label="item" :value="item" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<div>
|
||
<el-checkbox v-model="isqualify" label="定制商品" size="large" border style="margin-left: 10px;" @change="customTag" />
|
||
</div>
|
||
</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" size="large" @click="addLabel">添加</el-button>
|
||
<el-button type="danger" size="large" @click="deleteLabel" v-if="labelList.length > 1">删除</el-button>
|
||
</el-form-item>
|
||
<el-form-item label="商品图文" prop="richText">
|
||
<richTextUtil @richTextContent="getInfo"/>
|
||
</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>
|
||
</el-card>
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import {ref, onMounted, inject, reactive, onBeforeMount} from 'vue';
|
||
import { type FormRules } from 'element-plus';
|
||
import { SuccessInfo, WarnInfo, CommInfo } from '@/utils/messageInfo'; //封装ElMessage提示
|
||
import myAxios from "@/api/myAxios";
|
||
import { saveBtn, invInput } from '@/utils/entityProduct/globalVar';
|
||
import { validateName, validateIntro, validateDetail } from '@/utils/entityProduct/FormRules';
|
||
import richTextUtil from '@/layout/components/richTextUtil.vue';
|
||
import ImgListUpload from '@/utils/imgUpload/ImgListUpload.vue'
|
||
|
||
const resetFormData = ref()
|
||
const reload: any = inject("reload") //导入组件刷新
|
||
const typeList: any = ref([])
|
||
const labelList = ref([''])
|
||
const isqualify : any = ref(false)
|
||
const typeSelect : any = ref(false) //类别下拉选项栏的禁用状态
|
||
const previewRichText: any = ref<String>('')
|
||
const festivalArr : any = ref([]) //节日数组
|
||
const form : any = ref({ //添加实体类商品的表单
|
||
name: '', //商品名称
|
||
price: 0, //商品价格
|
||
intro: '',//产品简介
|
||
festivalName: '', //节日名称
|
||
type: '',//类别
|
||
label: '',//商品标签
|
||
goodImg: '', //商品图片url
|
||
inventory: 0, //库存
|
||
richText: ''
|
||
})
|
||
|
||
onBeforeMount(()=>{
|
||
form.value.festivalName = '无'
|
||
})
|
||
|
||
onMounted(() => {
|
||
getTypeList() //加载类别列表，渲染在产品列表的select选项里面
|
||
getFestivalArr() //查询节日列表
|
||
})
|
||
|
||
const getFestivalArr = async () => {
|
||
const res = await myAxios.get('/festival/get')
|
||
if(res.data.code === 1) {
|
||
festivalArr.value = res.data.data
|
||
} else {
|
||
WarnInfo('获取节日失败，检查服务')
|
||
}
|
||
}
|
||
|
||
const getTypeList = async () => { //获取类别列表作为可选项
|
||
const res = await myAxios.post('/category/list/web', {}) //获取商品列表
|
||
for(let key in res.data.data) {
|
||
typeList.value.push(res.data.data[key].typeName)
|
||
}
|
||
// console.log('typeList---->',typeList.value);
|
||
}
|
||
//提交表单
|
||
const onSubmit = async () => {
|
||
console.log(form.value)
|
||
const values = Object.values(form.value );
|
||
// 使用some()方法来检查是否有任何值为空
|
||
if (values.some((value: any) => value === null || value === undefined || value === '' || value === 0 || value === 'PHA+PGJyPjwvcD4=')) {
|
||
WarnInfo('请检查表单数据是否完整填写')
|
||
return; //空返回结束函数
|
||
}
|
||
const res = await myAxios.post('/goods/add', {
|
||
name: form.value.name,
|
||
type: form.value.type,
|
||
intro: form.value.intro,
|
||
price: form.value.price,
|
||
goodImg: form.value.goodImg,
|
||
richText: form.value.richText,
|
||
inventory: form.value.inventory,
|
||
festivalName: form.value.festivalName,
|
||
label: form.value.label
|
||
})
|
||
if (res.data.code === 1) {
|
||
SuccessInfo('提交成功')
|
||
form.value = {} //12.18改
|
||
reload() //上传完后重置表单
|
||
} else {
|
||
WarnInfo('服务错误')
|
||
return;
|
||
}
|
||
}
|
||
//将 商品类别 赋值到表格里
|
||
const loadForm = (value: any) => {
|
||
form.value.type = value //三元运算符 flag=1 是关于"商品类别"选项的值 flag=0 是关于“是否为节日限定”选项的值
|
||
}
|
||
//清除表单
|
||
const resetForm = () => {
|
||
resetFormData.value.resetFields()
|
||
}
|
||
|
||
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 deleteLabel = () => { //删除标签的方法
|
||
labelList.value.pop()
|
||
addLabelList() //格式化标签
|
||
// console.log('标签--->',labelList.value)
|
||
}
|
||
|
||
const addLabelList = () => { //格式化商品标签
|
||
var string = ''
|
||
if (!labelList.value.some((item: any) => item === '')) {
|
||
string = labelList.value.join(';')
|
||
} else return;
|
||
form.value.label = string
|
||
}
|
||
const customTag = (e:any)=>{ //点击定制
|
||
if(e) {
|
||
form.value.inventory = 1
|
||
invInput.value = true
|
||
typeSelect.value = true
|
||
form.value.type = '定制'
|
||
} else {
|
||
form.value.inventory = 0
|
||
invInput.value = false
|
||
typeSelect.value = false
|
||
form.value.type = ''
|
||
}
|
||
}
|
||
const getInfo = (info: any) => { //富文本赋值
|
||
// console.log('info', info)
|
||
previewRichText.value = info
|
||
form.value.richText = encode64(info)
|
||
}
|
||
function encode64(text: string): string {
|
||
return btoa(String.fromCharCode(...new TextEncoder().encode(text)))
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.flexCard {
|
||
display: flex;
|
||
height: 100%;
|
||
min-width: 800px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.richTextPreview {
|
||
height: 80vh;
|
||
overflow-y: auto;
|
||
word-break: break-all;
|
||
width: 400px;
|
||
min-width: 400px;
|
||
margin-right: 10px;
|
||
}
|
||
|
||
.form-container {
|
||
width: 900px;
|
||
height: 800px;
|
||
overflow: auto;
|
||
/* margin: 0 auto; */
|
||
}
|
||
.form {
|
||
/* width: 500px; */
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.NamePrice {
|
||
display: flex;
|
||
}
|
||
|
||
.IntroInven {
|
||
display: flex;
|
||
}
|
||
|
||
.festivalBox {
|
||
display: flex;
|
||
}
|
||
|
||
.btnBox {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
}
|
||
|
||
.titleText {
|
||
text-align: center;
|
||
margin: 0 auto;
|
||
}
|
||
</style> |