This commit is contained in:
xiaomlove
2021-04-19 20:13:21 +08:00
parent 736d42cd5c
commit 38afa63e3d
23 changed files with 1051 additions and 60 deletions

View File

@@ -34,6 +34,7 @@
<el-menu-item index="/swiper"><i class="el-icon-picture" />轮播图配置</el-menu-item>
<el-menu-item index="/agent-allow"><i class="el-icon-picture" />允许客户端</el-menu-item>
<el-menu-item index="/user"><i class="el-icon-user" />用户</el-menu-item>
<el-menu-item index="/exam"><i class="el-icon-s-check" />考核</el-menu-item>
<el-menu-item index="/hot"><i class="el-icon-star-on" />热销商品配置</el-menu-item>
<el-menu-item index="/new"><i class="el-icon-sell" />新品上线配置</el-menu-item>
<el-menu-item index="/recommend"><i class="el-icon-thumb" />为你推荐配置</el-menu-item>

90
admin/src/main.js vendored
View File

@@ -1,14 +1,98 @@
import { createApp } from 'vue'
import { ElButton, ElContainer, ElAside, ElHeader, ElMain, ElFooter, ElMenu, ElSubmenu, ElMenuItemGroup, ElMenuItem, ElForm, ElFormItem, ElInput, ElPopover, ElTag, ElCard, ElTable, ElTableColumn, ElPagination, ElDialog, ElPopconfirm, ElUpload, ElLoading, ElSelect, ElOption, ElRadioGroup, ElRadio, ElCascader, ElCheckbox, ElInputNumber } from 'element-plus'
import {
ElAlert,
ElAside,
ElAutocomplete,
ElAvatar,
ElBacktop,
ElBadge,
ElBreadcrumb,
ElBreadcrumbItem,
ElButton,
ElButtonGroup,
ElCalendar,
ElCard,
ElCarousel,
ElCarouselItem,
ElCascader,
ElCascaderPanel,
ElCheckbox,
ElCheckboxButton,
ElCheckboxGroup,
ElCol,
ElCollapse,
ElCollapseItem,
ElCollapseTransition,
ElColorPicker,
ElContainer,
ElDatePicker,
ElDialog,
ElDivider,
ElDrawer,
ElDropdown,
ElDropdownItem,
ElDropdownMenu,
ElFooter,
ElForm,
ElFormItem,
ElHeader,
ElIcon,
ElImage,
ElInput,
ElInputNumber,
ElLink,
ElMain,
ElMenu,
ElMenuItem,
ElMenuItemGroup,
ElOption,
ElOptionGroup,
ElPageHeader,
ElPagination,
ElPopconfirm,
ElPopover,
ElPopper,
ElProgress,
ElRadio,
ElRadioButton,
ElRadioGroup,
ElRate,
ElRow,
ElScrollbar,
ElSelect,
ElSlider,
ElStep,
ElSteps,
ElSubmenu,
ElSwitch,
ElTabPane,
ElTable,
ElTableColumn,
ElTabs,
ElTag,
ElTimePicker,
ElTimeSelect,
ElTimeline,
ElTimelineItem,
ElTooltip,
ElTransfer,
ElTree,
ElUpload,
ElInfiniteScroll,
ElLoading,
ElMessage,
ElMessageBox,
ElNotification
} from 'element-plus'
import App from './App.vue'
import router from './router/index'
import 'dayjs/locale/zh-cn'
import locale from 'element-plus/lib/locale/lang/zh-cn'
// import 'element-plus/lib/theme-chalk/index.css'
import 'element-plus/lib/theme-chalk/index.css'
// 修改后的主题样式必须放在最后面
import '../theme/index.css'
// import '../theme/index.css'
const orderStatus = {
0: '待支付',

View File

@@ -108,8 +108,22 @@ const router = createRouter({
path: '/user-form',
name: 'user-form',
component: () => import(/* webpackChunkName: "account" */ '../views/user/form.vue'),
}
},
{
path: '/user-detail',
name: 'user-detail',
component: () => import(/* webpackChunkName: "account" */ '../views/user/detail.vue'),
},
{
path: '/exam',
name: 'exam',
component: () => import(/* webpackChunkName: "account" */ '../views/exam/index.vue'),
},
{
path: '/exam-form',
name: 'exam-form',
component: () => import(/* webpackChunkName: "account" */ '../views/exam/form.vue'),
},
]
})

View File

@@ -26,6 +26,25 @@ const api = {
storeUser: (params = {}) => {
return axios.post(baseUrl + 'user', params);
},
listExam: (params = {}) => {
return axios.get(baseUrl + 'exam', {params: params});
},
storeExam: (params = {}) => {
return axios.post(baseUrl + 'exam', params);
},
updateExam: (id, params = {}) => {
return axios.put(baseUrl + 'exam/' + id, params);
},
getExam: (id) => {
return axios.get(baseUrl + 'exam/' + id);
},
deleteExam: (id) => {
return axios.delete(baseUrl + 'exam/' + id);
},
listClass: (params = {}) => {
return axios.get(baseUrl + 'class', {params: params});
},
}
export default api

View File

@@ -46,5 +46,7 @@ export const pathMap = {
"agent-allow": "允许客户端",
"agent-allow-form": "允许客户端表单",
"user": "用户",
"user-form": "用户表单"
"user-form": "用户表单",
"exam": "考核",
"exam-form": "考核表单",
}

View File

@@ -0,0 +1,151 @@
<template>
<div class="add">
<el-card class="add-container">
<el-form :model="goodForm" :rules="rules" ref="goodRef" class="goodForm" label-width="180px" style="width: 50%">
<el-form-item label="名称" prop="name">
<el-input type="text" v-model="goodForm.name" placeholder=""></el-input>
</el-form-item>
<el-form-item label="考核用户组" prop="classes">
<el-checkbox-group v-model="goodForm.classes">
<el-checkbox v-for="(value, key) in classes" :label="key" :key="key">{{value}}</el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitAdd()">{{ id ? '立即修改' : '立即创建' }}</el-button>
</el-form-item>
</el-form>
</el-card>
</div>
</template>
<script>
import { reactive, ref, toRefs, onMounted, onBeforeUnmount, getCurrentInstance } from 'vue'
import api from '@/utils/api'
import { ElMessage } from 'element-plus'
import { useRoute, useRouter } from 'vue-router'
import { localGet, hasEmoji } from '@/utils'
export default {
setup() {
const { proxy } = getCurrentInstance()
console.log('proxy', proxy)
const goodRef = ref(null)
const route = useRoute()
const router = useRouter()
const { id } = route.query
const state = reactive({
token: localGet('token') || '',
id: id,
defaultCate: '',
classes: [],
goodForm: {
name: '',
description: '',
begin: '',
end: '',
classes: [],
filters: {
classes: [],
register_time_begin: '',
register_time_end: '',
},
requires: {}
},
rules: {
username: [
{ required: 'true' }
],
email: [
{ required: 'true'}
],
password: [
{ required: 'true' }
],
password_confirmation: [
{ required: 'true' }
],
},
})
onMounted(() => {
listClass()
if (id) {
getAgentAllow(id)
}
})
onBeforeUnmount(() => {
})
const getAgentAllow = (id) => {
api.getAllowAgent(id).then(res => {
state.goodForm = res
console.log(res, state.goodForm)
})
}
const listClass = () => {
api.listClass().then(res => {
state.classes = res
})
}
const submitAdd = () => {
goodRef.value.validate((vaild) => {
console.log("valid", vaild)
if (vaild) {
// 默认新增用 post 方法
let params = state.goodForm
let res
console.log('params', params)
api.storeUser(params).then(res => {
ElMessage.success(id ? '修改成功' : '添加成功')
router.push({ path: '/user' })
})
}
})
}
const handleBeforeUpload = (file) => {
const sufix = file.name.split('.')[1] || ''
if (!['jpg', 'jpeg', 'png'].includes(sufix)) {
ElMessage.error('请上传 jpg、jpeg、png 格式的图片')
return false
}
}
const handleUrlSuccess = (val) => {
state.goodForm.goodsCoverImg = val.data || ''
}
const handleChangeCate = (val) => {
state.categoryId = val[2] || 0
}
return {
...toRefs(state),
goodRef,
submitAdd,
handleBeforeUpload,
handleUrlSuccess,
handleChangeCate
}
}
}
</script>
<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>

View File

@@ -0,0 +1,245 @@
<template>
<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-popconfirm-->
<!-- title="确定删除吗?"-->
<!-- @confirm="handleDelete"-->
<!-- >-->
<!-- <template #reference>-->
<!-- <el-button type="danger" size="small" icon="el-icon-delete">批量删除</el-button>-->
<!-- </template>-->
<!-- </el-popconfirm>-->
</div>
</template>
<el-table
v-loading="loading"
ref="multipleTable"
:data="tableData"
tooltip-effect="dark"
style="width: 100%"
@selection-change="handleSelectionChange"
@sort-change="handleSortChange"
>
<el-table-column
type="selection"
>
</el-table-column>
<el-table-column
label="ID"
prop="id"
width="60"
sortable="custom"
>
</el-table-column>
<el-table-column
label="名称"
prop="name"
>
</el-table-column>
<el-table-column
label="开始时间"
prop="begin"
sortable="custom"
>
</el-table-column>
<el-table-column
label="结束时间"
prop="end"
sortable="custom"
></el-table-column>
<el-table-column
prop="filters"
label="适用用户"
>
</el-table-column>
<el-table-column
prop="requires"
label="考核标准"
>
</el-table-column>
<el-table-column
label="状态"
prop="status_text"
sortable="custom"
></el-table-column>
<el-table-column
label="操作"
width="100"
>
<template #default="scope">
<a style="cursor: pointer; margin-right: 10px" @click="handleDetail(scope.row.id)">详情</a>
<!-- <el-popconfirm-->
<!-- title="确定删除吗?"-->
<!-- @confirm="handleDeleteOne(scope.row.id)"-->
<!-- >-->
<!-- <template #reference>-->
<!-- <a style="cursor: pointer">删除</a>-->
<!-- </template>-->
<!-- </el-popconfirm>-->
</template>
</el-table-column>
</el-table>
<!--总数超过一页再展示分页器-->
<el-pagination
background
layout="prev, pager, next"
:total="total"
:page-size="pageSize"
:current-page="currentPage"
@current-change="changePage"
/>
</el-card>
</template>
<script>
import { onMounted, reactive, ref, toRefs } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import AgentAllowForm from './form.vue'
import axios from '@/utils/axios'
import api from '@/utils/api'
export default {
name: 'Swiper',
components: {
},
setup() {
const router = useRouter()
const multipleTable = ref(null)
const addGood = ref(null)
const state = reactive({
loading: false,
tableData: [], // 数据列表
multipleSelection: [], // 选中项
total: 0, // 总条数
currentPage: 1, // 当前页
pageSize: 10, // 分页大小
type: 'add', // 操作类型
sortField: 'id',
sortType: 'desc'
})
onMounted(() => {
// getCarousels()
getList()
})
// 获取轮播图列表
const getCarousels = () => {
// state.loading = true
// axios.get('/carousels', {
// params: {
// pageNumber: state.currentPage,
// pageSize: state.pageSize
// }
// }).then(res => {
// state.tableData = res.list
// state.total = res.totalCount
// state.currentPage = res.currPage
// state.loading = false
// })
}
const getList = () => {
state.loading = true
let params = {
page: state.currentPage,
sort_field: state.sortField,
sort_type: state.sortType
}
api.listExam(params).then(res => {
state.tableData = res.data
state.total = res.meta.total
state.currentPage = res.meta.current_page
state.pageSize = res.meta.per_page
state.loading = false
})
}
const handleSortChange = (sort) => {
console.log(sort)
state.sortField = sort.prop
state.sortType = sort.order
getList()
}
// 添加轮播项
const handleAdd = () => {
state.type = 'add'
// addGood.value.open()
router.push({
name: "exam-form"
})
}
// 修改轮播图
const handleEdit = (id) => {
console.log("id", id)
router.push({
name: "agent-allow-form",
query: {id: id}
})
}
// 修改轮播图
const handleDetail = (id) => {
console.log("id", id)
router.push({
name: "user-detail",
query: {id: id}
})
}
// 选择项
const handleSelectionChange = (val) => {
state.multipleSelection = val
}
// 批量删除
const handleDelete = () => {
if (!state.multipleSelection.length) {
ElMessage.error('请选择项')
return
}
axios.delete('/carousels', {
data: {
ids: state.multipleSelection.map(i => i.carouselId)
}
}).then(() => {
ElMessage.success('删除成功')
getCarousels()
})
}
// 单个删除
const handleDeleteOne = (id) => {
api.deleteAllowAgent(id).then(() => {
ElMessage.success('删除成功')
getList()
})
}
const changePage = (val) => {
state.currentPage = val
getList()
}
return {
...toRefs(state),
multipleTable,
handleSelectionChange,
handleSortChange,
addGood,
handleAdd,
handleEdit,
handleDetail,
handleDelete,
handleDeleteOne,
getCarousels,
changePage
}
}
}
</script>
<style scoped>
.swiper-container {
min-height: 100%;
}
.el-card.is-always-shadow {
min-height: 100%!important;
}
</style>

View File

@@ -0,0 +1,171 @@
<template>
<el-row :gutter="10" type="flex" start="start">
<el-col :span="12">
<el-card class="box-card">
<template #header>
<div class="card-header">
<span>卡片名称</span>
<el-button class="button" type="text">操作按钮</el-button>
</div>
</template>
<div v-for="o in 4" :key="o" class="text item">
{{'列表内容 ' + o }}
</div>
</el-card>
</el-col>
<el-col :span="12">
<el-card class="box-card">
<template #header>
<div class="card-header">
<span>卡片名称</span>
<el-button class="button" type="text">操作按钮</el-button>
</div>
</template>
<div v-for="o in 4" :key="o" class="text item">
{{'列表内容 ' + o }}
</div>
</el-card>
</el-col>
</el-row>
</template>
<script>
import { onMounted, reactive, ref, toRefs } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import AgentAllowForm from './form.vue'
import axios from '@/utils/axios'
import api from '@/utils/api'
export default {
name: 'Swiper',
components: {
},
setup() {
const router = useRouter()
const multipleTable = ref(null)
const addGood = ref(null)
const state = reactive({
loading: false,
tableData: [], // 数据列表
multipleSelection: [], // 选中项
total: 0, // 总条数
currentPage: 1, // 当前页
pageSize: 10, // 分页大小
type: 'add', // 操作类型
sortField: 'id',
sortType: 'desc'
})
onMounted(() => {
// getCarousels()
listUser()
})
// 获取轮播图列表
const getCarousels = () => {
// state.loading = true
// axios.get('/carousels', {
// params: {
// pageNumber: state.currentPage,
// pageSize: state.pageSize
// }
// }).then(res => {
// state.tableData = res.list
// state.total = res.totalCount
// state.currentPage = res.currPage
// state.loading = false
// })
}
const listUser = () => {
state.loading = true
let params = {
page: state.currentPage,
sort_field: state.sortField,
sort_type: state.sortType
}
api.listUser(params).then(res => {
state.tableData = res.data
state.total = res.meta.total
state.currentPage = res.meta.current_page
state.pageSize = res.meta.per_page
state.loading = false
})
}
const handleSortChange = (sort) => {
console.log(sort)
state.sortField = sort.prop
state.sortType = sort.order
listUser()
}
// 添加轮播项
const handleAdd = () => {
state.type = 'add'
// addGood.value.open()
router.push({
name: "user-form"
})
}
// 修改轮播图
const handleEdit = (id) => {
console.log("id", id)
router.push({
name: "agent-allow-form",
query: {id: id}
})
}
// 选择项
const handleSelectionChange = (val) => {
state.multipleSelection = val
}
// 批量删除
const handleDelete = () => {
if (!state.multipleSelection.length) {
ElMessage.error('请选择项')
return
}
axios.delete('/carousels', {
data: {
ids: state.multipleSelection.map(i => i.carouselId)
}
}).then(() => {
ElMessage.success('删除成功')
getCarousels()
})
}
// 单个删除
const handleDeleteOne = (id) => {
api.deleteAllowAgent(id).then(() => {
ElMessage.success('删除成功')
listUser()
})
}
const changePage = (val) => {
state.currentPage = val
listUser()
}
return {
...toRefs(state),
multipleTable,
handleSelectionChange,
handleSortChange,
addGood,
handleAdd,
handleEdit,
handleDelete,
handleDeleteOne,
getCarousels,
changePage
}
}
}
</script>
<style scoped>
.swiper-container {
min-height: 100%;
}
.el-card.is-always-shadow {
min-height: 100%!important;
}
</style>

View File

@@ -84,7 +84,7 @@
width="100"
>
<template #default="scope">
<!-- <a style="cursor: pointer; margin-right: 10px" @click="handleEdit(scope.row.id)">修改</a>-->
<a style="cursor: pointer; margin-right: 10px" @click="handleDetail(scope.row.id)">详情</a>
<!-- <el-popconfirm-->
<!-- title="确定删除吗?"-->
<!-- @confirm="handleDeleteOne(scope.row.id)"-->
@@ -193,6 +193,14 @@ export default {
query: {id: id}
})
}
// 修改轮播图
const handleDetail = (id) => {
console.log("id", id)
router.push({
name: "user-detail",
query: {id: id}
})
}
// 选择项
const handleSelectionChange = (val) => {
state.multipleSelection = val
@@ -231,6 +239,7 @@ export default {
addGood,
handleAdd,
handleEdit,
handleDetail,
handleDelete,
handleDeleteOne,
getCarousels,