lkddi/nexusphp
1
0
Fork 0
mirror of https://github.com/lkddi/nexusphp.git synced 2026-04-24 03:57:22 +08:00
Code Issues Packages Projects Releases Wiki Activity

exam form

Browse Source
This commit is contained in:
xiaomlove
2021-04-23 03:07:38 +08:00
parent d164bb15ed
commit ba7e5030e9
1 changed files with 58 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files
admin/src/views/exam/form.vue
+58 -148
View File
@@ -1,58 +1,38 @@
<template> <template>
<div class="add"> <div>
<el-card class="add-container"> <el-row>
<el-form :model="goodForm" :rules="rules" ref="goodRef" label-width="100px" class="goodForm"> <el-col :span="12">
<el-form-item required label="商品分类"> <el-form :model="formData" :rules="rules" ref="goodRef" label-width="100px" class="formData">
<el-cascader :placeholder="defaultCate" style="width: 300px" :props="category" @change="handleChangeCate"></el-cascader> <el-form-item label="" prop="name">
</el-form-item> <el-input v-model="formData.name" placeholder="请输入商品名称"></el-input>
<el-form-item label="商品名称" prop="goodsName"> </el-form-item>
<el-input style="width: 300px" v-model="goodForm.goodsName" placeholder="请输入商品名称"></el-input> <el-form-item label="商品简介" prop="description">
</el-form-item> <el-input type="textarea" v-model="formData.description" placeholder="请输入商品简介(100字)"></el-input>
<el-form-item label="商品简介" prop="goodsIntro"> </el-form-item>
<el-input style="width: 300px" type="textarea" v-model="goodForm.goodsIntro" placeholder="请输入商品简介(100字)"></el-input> <el-form-item label="商品价格" prop="begin">
</el-form-item> <el-input type="number" min="0" v-model="formData.begin" placeholder="请输入商品价格"></el-input>
<el-form-item label="商品价格" prop="originalPrice"> </el-form-item>
<el-input type="number" min="0" style="width: 300px" v-model="goodForm.originalPrice" placeholder="请输入商品价格"></el-input> <el-form-item label="商品售卖价" prop="end">
</el-form-item> <el-input type="number" min="0" v-model="formData.end" placeholder="请输入商品售价"></el-input>
<el-form-item label="商品售卖价" prop="sellingPrice"> </el-form-item>
<el-input type="number" min="0" style="width: 300px" v-model="goodForm.sellingPrice" placeholder="请输入商品售价"></el-input> <el-form-item label="商品库存" prop="requires">
</el-form-item> <el-input type="number" min="0" v-model="formData.requires" placeholder="请输入商品库存"></el-input>
<el-form-item label="商品库存" prop="stockNum"> </el-form-item>
<el-input type="number" min="0" style="width: 300px" v-model="goodForm.stockNum" placeholder="请输入商品库存"></el-input> <el-form-item label="商品标签" prop="filters">
</el-form-item> <el-input v-model="formData.filters" placeholder="请输入商品小标签"></el-input>
<el-form-item label="商品标签" prop="tag"> </el-form-item>
<el-input style="width: 300px" v-model="goodForm.tag" placeholder="请输入商品小标签"></el-input> <el-form-item label="上架状态" prop="status">
</el-form-item> <el-radio-group v-model="formData.status">
<el-form-item label="上架状态" prop="goodsSellStatus"> <el-radio label="0">启用</el-radio>
<el-radio-group v-model="goodForm.goodsSellStatus"> <el-radio label="1">禁用</el-radio>
<el-radio label="0">上架</el-radio> </el-radio-group>
<el-radio label="1">下架</el-radio> </el-form-item>
</el-radio-group> <el-form-item>
</el-form-item> <el-button type="primary" @click="submitAdd()">{{ id ? '立即修改' : '立即创建' }}</el-button>
<el-form-item required label="商品主图" prop="goodsCoverImg"> </el-form-item>
<el-upload </el-form>
class="avatar-uploader" </el-col>
:action="uploadImgServer" </el-row>
accept="jpg,jpeg,png"
:headers="{
token: token
}"
:show-file-list="false"
:before-upload="handleBeforeUpload"
:on-success="handleUrlSuccess"
>
<img style="width: 100px; height: 100px; border: 1px solid #e9e9e9;" v-if="goodForm.goodsCoverImg" :src="goodForm.goodsCoverImg" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-form-item>
<el-form-item label="详情内容">
<div ref='editor'></div>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitAdd()">{{ id ? '立即修改' : '立即创建' }}</el-button>
</el-form-item>
</el-form>
</el-card>
</div> </div>
</template> </template>
@@ -74,87 +54,36 @@ export default {
token: localGet('token') || '', token: localGet('token') || '',
id: id, id: id,
defaultCate: '', defaultCate: '',
goodForm: { formData: {
goodsName: '', name: '',
goodsIntro: '', description: '',
originalPrice: '', begin: '',
sellingPrice: '', end: '',
stockNum: '', requires: {},
goodsSellStatus: '0', filters: {},
goodsCoverImg: '', status: '',
tag: ''
}, },
rules: { rules: {
goodsName: [ goodsName: [
{ required: 'true', message: '请填写商品名称', trigger: ['change'] } { required: 'true', }
], ],
originalPrice: [ originalPrice: [
{ required: 'true', message: '请填写商品价格', trigger: ['change'] } { required: 'true', }
], ],
sellingPrice: [ sellingPrice: [
{ required: 'true', message: '请填写商品售价', trigger: ['change'] } { required: 'true',}
], ],
stockNum: [ stockNum: [
{ required: 'true', message: '请填写商品库存', trigger: ['change'] } { required: 'true', }
], ],
}, },
}) })
let instance let instance
onMounted(() => { onMounted(() => {
instance = new WangEditor(editor.value)
instance.config.showLinkImg = false
instance.config.showLinkImgAlt = false
instance.config.showLinkImgHref = false
instance.config.uploadImgMaxSize = 2 * 1024 * 1024 // 2M
instance.config.uploadFileName = 'file'
instance.config.uploadImgHeaders = {
token: state.token
}
// 图片返回格式不同，需要自定义返回格式
instance.config.uploadImgHooks = {
// 图片上传并返回了结果，想要自己把图片插入到编辑器中
// 例如服务器端返回的不是 { errno: 0, data: [...] } 这种格式，可使用 customInsert
customInsert: function(insertImgFn, result) {
console.log('result', result)
// result 即服务端返回的接口
// insertImgFn 可把图片插入到编辑器，传入图片 src ，执行函数即可
if (result.data && result.data.length) {
result.data.forEach(item => insertImgFn(item))
}
}
}
instance.config.uploadImgServer = uploadImgsServer
Object.assign(instance.config, {
onchange() {
console.log('change')
},
})
instance.create()
if (id) {
axios.get(`/goods/${id}`).then(res => {
const { goods, firstCategory, secondCategory, thirdCategory } = res
state.goodForm = {
goodsName: goods.goodsName,
goodsIntro: goods.goodsIntro,
originalPrice: goods.originalPrice,
sellingPrice: goods.sellingPrice,
stockNum: goods.stockNum,
goodsSellStatus: String(goods.goodsSellStatus),
goodsCoverImg: proxy.$filters.prefix(goods.goodsCoverImg),
tag: goods.tag
}
state.categoryId = goods.goodsCategoryId
state.defaultCate = `${firstCategory.categoryName}/${secondCategory.categoryName}/${thirdCategory.categoryName}`
if (instance) {
// 初始化商品详情 html
instance.txt.html(goods.goodsDetailContent)
}
})
}
}) })
onBeforeUnmount(() => { onBeforeUnmount(() => {
instance.destroy()
instance = null
}) })
const submitAdd = () => { const submitAdd = () => {
goodRef.value.validate((vaild) => { goodRef.value.validate((vaild) => {
@@ -163,15 +92,15 @@ export default {
let httpOption = axios.post let httpOption = axios.post
let params = { let params = {
goodsCategoryId: state.categoryId, goodsCategoryId: state.categoryId,
goodsCoverImg: state.goodForm.goodsCoverImg, goodsCoverImg: state.formData.goodsCoverImg,
goodsDetailContent: instance.txt.html(), goodsDetailContent: instance.txt.html(),
goodsIntro: state.goodForm.goodsIntro, goodsIntro: state.formData.goodsIntro,
goodsName: state.goodForm.goodsName, goodsName: state.formData.goodsName,
goodsSellStatus: state.goodForm.goodsSellStatus, goodsSellStatus: state.formData.goodsSellStatus,
originalPrice: state.goodForm.originalPrice, originalPrice: state.formData.originalPrice,
sellingPrice: state.goodForm.sellingPrice, sellingPrice: state.formData.sellingPrice,
stockNum: state.goodForm.stockNum, stockNum: state.formData.stockNum,
tag: state.goodForm.tag tag: state.formData.tag
} }
if (hasEmoji(params.goodsIntro) || hasEmoji(params.goodsName) || hasEmoji(params.tag) || hasEmoji(params.goodsDetailContent)) { if (hasEmoji(params.goodsIntro) || hasEmoji(params.goodsName) || hasEmoji(params.tag) || hasEmoji(params.goodsDetailContent)) {
ElMessage.error('不要输入表情包，再输入就打死你个龟孙儿~') ElMessage.error('不要输入表情包，再输入就打死你个龟孙儿~')
@@ -198,7 +127,7 @@ export default {
} }
} }
const handleUrlSuccess = (val) => { const handleUrlSuccess = (val) => {
state.goodForm.goodsCoverImg = val.data || '' state.formData.goodsCoverImg = val.data || ''
} }
const handleChangeCate = (val) => { const handleChangeCate = (val) => {
state.categoryId = val[2] || 0 state.categoryId = val[2] || 0
@@ -216,24 +145,5 @@ export default {
</script> </script>
<style scoped> <style scoped>
.add {
display: flex;
}
.add-container {
flex: 1;
height: 100%;
}
.avatar-uploader {
width: 100px;
height: 100px;
color: #ddd;
font-size: 30px;
}
.avatar-uploader-icon {
display: block;
width: 100%;
height: 100%;
border: 1px solid #e9e9e9;
padding: 32px 17px;
}
</style> </style>