mirror of
https://github.com/lkddi/nexusphp.git
synced 2026-04-24 03:57:22 +08:00
exam-table
This commit is contained in:
xiaomlove
Vendored
+3
@@ -36,6 +36,9 @@ const api = {
|
||||
listExam: (params = {}) => {
|
||||
return axios.get('exam', {params: params});
|
||||
},
|
||||
listExamIndex: (params = {}) => {
|
||||
return axios.get('exam-index', {params: params});
|
||||
},
|
||||
storeExam: (params = {}) => {
|
||||
return axios.post('exam', params);
|
||||
},
|
||||
|
||||
+108
-63
@@ -2,33 +2,74 @@
|
||||
<div>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form :model="formData" :rules="rules" ref="goodRef" label-width="100px" class="formData">
|
||||
<el-form-item label="" prop="name">
|
||||
<el-input v-model="formData.name" placeholder="请输入商品名称"></el-input>
|
||||
<el-form :model="formData" :rules="rules" ref="formRef" label-width="200px" class="formData">
|
||||
<el-form-item label="Name" prop="name">
|
||||
<el-input v-model="formData.name" placeholder=""></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="商品简介" prop="description">
|
||||
<el-input type="textarea" v-model="formData.description" placeholder="请输入商品简介(100字)"></el-input>
|
||||
<el-form-item label="Index" prop="indexes">
|
||||
<template v-for="(item, index) in formData.indexes" :key="index">
|
||||
<el-row>
|
||||
<el-col :span="6">
|
||||
<el-checkbox v-model="item.checked" :label="item.checked">{{item.name}}</el-checkbox>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-input type="number" v-model="item.require_value"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="6" style="padding: 0 20px; color: #aaa">
|
||||
<template v-if="item.unit">
|
||||
Unit: {{item.unit}}
|
||||
</template>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
</el-form-item>
|
||||
<el-form-item label="商品价格" prop="begin">
|
||||
<el-input type="number" min="0" v-model="formData.begin" placeholder="请输入商品价格"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="商品售卖价" prop="end">
|
||||
<el-input type="number" min="0" v-model="formData.end" placeholder="请输入商品售价"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="商品库存" prop="requires">
|
||||
<el-input type="number" min="0" v-model="formData.requires" placeholder="请输入商品库存"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="商品标签" prop="filters">
|
||||
<el-input v-model="formData.filters" placeholder="请输入商品小标签"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="上架状态" prop="status">
|
||||
|
||||
<el-form-item label="Status" prop="status">
|
||||
<el-radio-group v-model="formData.status">
|
||||
<el-radio label="0">启用</el-radio>
|
||||
<el-radio label="1">禁用</el-radio>
|
||||
<el-radio label="0">Enabled</el-radio>
|
||||
<el-radio label="1">Disabled</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="Begin" prop="begin">
|
||||
<el-date-picker
|
||||
v-model="formData.begin"
|
||||
type="datetime"
|
||||
format="YYYY-MM-DD HH:mm:ss"
|
||||
placeholder="Select Begin Time">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="End" prop="end">
|
||||
<el-date-picker
|
||||
v-model="formData.end"
|
||||
type="datetime"
|
||||
format="YYYY-MM-DD HH:mm:ss"
|
||||
placeholder="Select End Time">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="Target User Class" prop="filters.classes">
|
||||
<el-checkbox-group v-model="formData.filters.classes">
|
||||
<el-checkbox v-for="(item, index) in allClasses" :label="index" :key="index">{{item}}</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="Target User Register Time">
|
||||
<el-date-picker
|
||||
v-model="formData.filters.register_time_range"
|
||||
type="datetimerange"
|
||||
format="YYYY-MM-DD HH:mm:ss"
|
||||
range-separator="to"
|
||||
start-placeholder="Begin"
|
||||
end-placeholder="End">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="Description" prop="description">
|
||||
<el-input type="textarea" v-model="formData.description" placeholder=""></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="submitAdd()">{{ id ? '立即修改' : '立即创建' }}</el-button>
|
||||
<el-button type="primary" @click="submitAdd()">Submit</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-col>
|
||||
@@ -41,81 +82,72 @@ import { reactive, ref, toRefs, onMounted, onBeforeUnmount, getCurrentInstance }
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { localGet } from '../../utils'
|
||||
import api from "../../utils/api";
|
||||
|
||||
export default {
|
||||
name: 'AddGood',
|
||||
name: 'ExamForm',
|
||||
setup() {
|
||||
const { proxy } = getCurrentInstance()
|
||||
console.log('proxy', proxy)
|
||||
const goodRef = ref(null)
|
||||
const formRef = ref(null)
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const { id } = route.query
|
||||
const state = reactive({
|
||||
token: localGet('token') || '',
|
||||
id: id,
|
||||
defaultCate: '',
|
||||
allClasses: [],
|
||||
formData: {
|
||||
name: '',
|
||||
description: '',
|
||||
begin: '',
|
||||
end: '',
|
||||
requires: {},
|
||||
filters: {},
|
||||
indexes: [],
|
||||
filters: {
|
||||
classes: [],
|
||||
register_time_range: []
|
||||
},
|
||||
status: '',
|
||||
},
|
||||
rules: {
|
||||
goodsName: [
|
||||
name: [
|
||||
{ required: 'true', }
|
||||
],
|
||||
originalPrice: [
|
||||
indexes: [
|
||||
{ required: 'true', }
|
||||
],
|
||||
sellingPrice: [
|
||||
status: [
|
||||
{ required: 'true',}
|
||||
],
|
||||
stockNum: [
|
||||
{ required: 'true', }
|
||||
],
|
||||
},
|
||||
})
|
||||
let instance
|
||||
onMounted(() => {
|
||||
|
||||
listAllClass()
|
||||
listAllIndex()
|
||||
if (id) {
|
||||
let res = api.getExam(id)
|
||||
// state.formData = res.data
|
||||
} else {
|
||||
let res = api.listExamIndex()
|
||||
state.formData.indexes = res.data
|
||||
}
|
||||
})
|
||||
onBeforeUnmount(() => {
|
||||
|
||||
})
|
||||
const submitAdd = () => {
|
||||
goodRef.value.validate((vaild) => {
|
||||
formRef.value.validate(async (vaild) => {
|
||||
if (vaild) {
|
||||
// 默认新增用 post 方法
|
||||
let httpOption = axios.post
|
||||
let params = {
|
||||
goodsCategoryId: state.categoryId,
|
||||
goodsCoverImg: state.formData.goodsCoverImg,
|
||||
goodsDetailContent: instance.txt.html(),
|
||||
goodsIntro: state.formData.goodsIntro,
|
||||
goodsName: state.formData.goodsName,
|
||||
goodsSellStatus: state.formData.goodsSellStatus,
|
||||
originalPrice: state.formData.originalPrice,
|
||||
sellingPrice: state.formData.sellingPrice,
|
||||
stockNum: state.formData.stockNum,
|
||||
tag: state.formData.tag
|
||||
let params = state.formData;
|
||||
if (params.begin) {
|
||||
params.begin = dayjs(params.begin).format('YYYY-MM-DD HH:mm:ss')
|
||||
}
|
||||
if (hasEmoji(params.goodsIntro) || hasEmoji(params.goodsName) || hasEmoji(params.tag) || hasEmoji(params.goodsDetailContent)) {
|
||||
ElMessage.error('不要输入表情包，再输入就打死你个龟孙儿~')
|
||||
return
|
||||
if (params.end) {
|
||||
params.end = dayjs(params.end).format('YYYY-MM-DD HH:mm:ss')
|
||||
}
|
||||
console.log('params', params)
|
||||
if (id) {
|
||||
params.goodsId = id
|
||||
// 修改商品使用 put 方法
|
||||
httpOption = axios.put
|
||||
}
|
||||
httpOption('/goods', params).then(() => {
|
||||
ElMessage.success(id ? '修改成功' : '添加成功')
|
||||
router.push({ path: '/good' })
|
||||
})
|
||||
console.log(params)
|
||||
let res = await api.storeExam(params)
|
||||
console.log(res)
|
||||
}
|
||||
})
|
||||
}
|
||||
@@ -132,13 +164,26 @@ export default {
|
||||
const handleChangeCate = (val) => {
|
||||
state.categoryId = val[2] || 0
|
||||
}
|
||||
|
||||
const listAllClass = async () => {
|
||||
let res = await api.listClass()
|
||||
state.allClasses = res.data
|
||||
}
|
||||
const listAllIndex = async () => {
|
||||
let res = await api.listExamIndex()
|
||||
state.formData.indexes = res.data
|
||||
}
|
||||
const getExam = async (id) => {
|
||||
let res = await api.getExam(id)
|
||||
console.log(res)
|
||||
}
|
||||
return {
|
||||
...toRefs(state),
|
||||
goodRef,
|
||||
formRef,
|
||||
submitAdd,
|
||||
handleBeforeUpload,
|
||||
handleUrlSuccess,
|
||||
handleChangeCate
|
||||
handleChangeCate,
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<el-card class="swiper-container">
|
||||
<template #header>
|
||||
<div class="header">
|
||||
<el-button type="primary" size="small" icon="el-icon-plus" @click="handleAdd">新增商品</el-button>
|
||||
<el-button type="primary" size="small" icon="el-icon-plus" @click="handleAdd">Add</el-button>
|
||||
</div>
|
||||
</template>
|
||||
<el-table
|
||||
@@ -17,53 +17,55 @@
|
||||
width="55">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="goodsId"
|
||||
label="商品编号"
|
||||
prop="id"
|
||||
label="Id"
|
||||
width="50"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="goodsName"
|
||||
label="商品名"
|
||||
prop="name"
|
||||
label="Name"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="goodsIntro"
|
||||
label="商品简介"
|
||||
label="Index"
|
||||
width="250px"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="商品图片"
|
||||
width="150px"
|
||||
>
|
||||
<template #default="scope">
|
||||
<img style="width: 100px; height: 100px;" :key="scope.row.goodsId" :src="$filters.prefix(scope.row.goodsCoverImg)" alt="商品主图">
|
||||
<template #default="scope" >
|
||||
<p style="white-space: pre-line" v-html="scope.row.indexes_formatted"></p>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="stockNum"
|
||||
label="商品库存"
|
||||
prop="begin"
|
||||
label="Begin"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="sellingPrice"
|
||||
label="商品售价"
|
||||
prop="end"
|
||||
label="End"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="上架状态"
|
||||
>
|
||||
<template #default="scope">
|
||||
<span style="color: green;" v-if="scope.row.goodsSellStatus == 0">销售中</span>
|
||||
<span style="color: red;" v-else>已下架</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column
|
||||
label="操作"
|
||||
label="Target User"
|
||||
width="400px"
|
||||
>
|
||||
<template #default="scope" >
|
||||
<p style="white-space: pre-line" v-html="scope.row.filters_formatted"></p>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="status_text"
|
||||
label="Status"
|
||||
>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column
|
||||
label="Action"
|
||||
width="100"
|
||||
>
|
||||
<template #default="scope">
|
||||
<a style="cursor: pointer; margin-right: 10px" @click="handleEdit(scope.row.goodsId)">修改</a>
|
||||
<a style="cursor: pointer; margin-right: 10px" @click="handleEdit(scope.row.id)">Edit</a>
|
||||
<a style="cursor: pointer; margin-right: 10px" v-if="scope.row.goodsSellStatus == 0" @click="handleStatus(scope.row.goodsId, 1)">下架</a>
|
||||
<a style="cursor: pointer; margin-right: 10px" v-else @click="handleStatus(scope.row.goodsId, 0)">上架</a>
|
||||
</template>
|
||||
@@ -85,13 +87,19 @@
|
||||
import { onMounted, reactive, ref, toRefs } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { useRouter } from 'vue-router'
|
||||
import api from '../../utils/api'
|
||||
export default {
|
||||
name: 'Good',
|
||||
name: 'ExamTable',
|
||||
setup() {
|
||||
const multipleTable = ref(null)
|
||||
const router = useRouter()
|
||||
const state = reactive({
|
||||
loading: false,
|
||||
query: {
|
||||
page: 1,
|
||||
sort_field: 'id',
|
||||
sort_type: 'desc'
|
||||
},
|
||||
tableData: [], // 数据列表
|
||||
multipleSelection: [], // 选中项
|
||||
total: 0, // 总条数
|
||||
@@ -99,28 +107,27 @@ export default {
|
||||
pageSize: 10 // 分页大小
|
||||
})
|
||||
onMounted(() => {
|
||||
getGoodList()
|
||||
fetchTableData()
|
||||
})
|
||||
// 获取轮播图列表
|
||||
const getGoodList = () => {
|
||||
const fetchTableData = async () => {
|
||||
state.loading = true
|
||||
axios.get('/goods/list', {
|
||||
params: {
|
||||
pageNumber: state.currentPage,
|
||||
pageSize: state.pageSize
|
||||
}
|
||||
}).then(res => {
|
||||
state.tableData = res.list
|
||||
state.total = res.totalCount
|
||||
state.currentPage = res.currPage
|
||||
state.loading = false
|
||||
})
|
||||
let res = await api.listExam(state.query)
|
||||
renderTableData(res)
|
||||
}
|
||||
const renderTableData = (res) => {
|
||||
state.tableData = res.data.data
|
||||
state.page = res.data.meta.current_page
|
||||
state.total = res.data.meta.total
|
||||
state.currentPage = res.data.meta.current_page
|
||||
state.pageSize = res.data.meta.per_page
|
||||
state.loading = false
|
||||
}
|
||||
const handleAdd = () => {
|
||||
router.push({ name: 'exam-form' })
|
||||
}
|
||||
const handleEdit = (id) => {
|
||||
router.push({ path: '/add', query: { id } })
|
||||
router.push({ path: '/exam-form', query: { id } })
|
||||
}
|
||||
// 选择项
|
||||
const handleSelectionChange = (val) => {
|
||||
@@ -128,14 +135,14 @@ export default {
|
||||
}
|
||||
const changePage = (val) => {
|
||||
state.currentPage = val
|
||||
getGoodList()
|
||||
fetchTableData()
|
||||
}
|
||||
const handleStatus = (id, status) => {
|
||||
axios.put(`/goods/status/${status}`, {
|
||||
ids: id ? [id] : []
|
||||
}).then(() => {
|
||||
ElMessage.success('修改成功')
|
||||
getGoodList()
|
||||
fetchTableData()
|
||||
})
|
||||
}
|
||||
return {
|
||||
@@ -144,7 +151,7 @@ export default {
|
||||
handleSelectionChange,
|
||||
handleAdd,
|
||||
handleEdit,
|
||||
getGoodList,
|
||||
fetchTableData,
|
||||
changePage,
|
||||
handleStatus
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user