提交 5e4fb07f authored 作者: 刘旭's avatar 刘旭

完成商品规格页面

上级 6c64792e
<template>
<div style="margin-top: 20px;">
<el-pagination v-model:currentPage="pageData.pageNo" v-model:page-size="pageData.pageSize"
:page-sizes="[10, 15, 20]" :small="pageData.small" :disabled="pageData.disabled"
:background="pageData.background" layout="->, total, sizes, prev, pager, next, jumper" :total="total"
:hide-on-single-page="pageData.hide" @size-change="handleSizeChange"
@current-change="handleCurrentChange" />
</div>
</template>
<script setup lang='ts'>
let props = defineProps({
pageData: {
type: Object,
default: {
pageNo: {
type: Number,
default: 1
},
pageSize: {
type: Number,
default: 10
},
small: {
type: Boolean,
default: false
},
disabled: {
type: Boolean,
default: false
},
background: {
type: String || Boolean,
default: '' || false
},
hide: {
type: Boolean,
default: false
}
}
},
total: {
type: Number,
default: 0
}
})
console.log(props);
let emits = defineEmits(['sizeChange', 'currentChange'])
// 新条数
const handleSizeChange = (val: number) => {
emits('sizeChange', val)
}
// // 新页数
const handleCurrentChange = (val: number) => {
emits('currentChange', val)
}
</script>
<style lang = "scss" scoped>
</style>
\ No newline at end of file
<template>
<div style="margin-top: 20px;">
<el-pagination v-model:currentPage="pageData.page" v-model:page-size="pageData.limit"
:page-sizes="[10, 15, 20]" :small="pageData.small" :disabled="pageData.disabled"
:background="pageData.background" layout="->, total, sizes, prev, pager, next, jumper" :total="total"
:hide-on-single-page="pageData.hide" @size-change="handleSizeChange"
@current-change="handleCurrentChange" />
</div>
</template>
<script setup lang='ts'>
let props = defineProps({
pageData: {
type: Object,
default: {
page: {
type: Number,
default: 1
},
limit: {
type: Number,
default: 10
},
small: {
type: Boolean,
default: false
},
disabled: {
type: Boolean,
default: false
},
background: {
type: String || Boolean,
default: '' || false
},
hide: {
type: Boolean,
default: false
}
}
},
total: {
type: Number,
default: 0
}
})
console.log(props);
let emits = defineEmits(['sizeChange', 'currentChange'])
// 新条数
const handleSizeChange = (val: number) => {
emits('sizeChange', val)
}
// // 新页数
const handleCurrentChange = (val: number) => {
emits('currentChange', val)
}
</script>
<style lang = "scss" scoped>
</style>
\ No newline at end of file
import Mock from 'mockjs'
Mock.mock(`${import.meta.env.VITE_APP_BASE_URL}/department/index`, {
code: 200,
'data|1-10': [
{
"id|+1": 0,
cname: '@cname',
ename: '@name',
'type|+1': 0 ,
'code|+1': 'code001',
'children|1-10': [
{
"id|+1": 10,
cname: '@cname',
ename: '@name',
'type|+1': 0,
'code|+1': 'code002',
'children|1-10': [
{
"id|+1": 20,
cname: '@cname',
ename: '@name',
'type|+1': 0,
'code|+1': 'code003',
}
]
}
]
}
],
msg: null,
success: true
})
Mock.mock(`${import.meta.env.VITE_APP_BASE_URL}/department/bizunit`, {
code: 200,
'data|1-10': [
{
"id|+1": 0,
cname: '@cname',
ename: '@name',
'depart|+1': '' ,
'product': '',
'code|+1': 'code001'
}
],
msg: null,
success: true
})
import Mock from "mockjs";
import '@/mock/login'
import '@/mock/table'
import '@/mock/departmentManage'
import '@/mock/project'
// 设置全局延时
Mock.setup({
timeout: '300-600'
})
\ No newline at end of file
import Mock from "mockjs";
// Mock.mock(`${import.meta.env.VITE_APP_BASE_URL}/login`, 'post', ({body}) => {
// let result = {data: {},code:0,message:''}
// const {name, password} = JSON.parse(body)
//
// let success = false
//
// if (success) {
// result.code = 0
// result.message = Mock.mock('@TIMEFIX').CN + ',欢迎回来'
//
// result.data = {"msg":"欢迎回来",'token':"iwoefwietowewewo"}
// } else {
// result.code = -1
// result.message = '账户名或密码错误(admin/888888 or test/888888)'
// }
// return result
// })
\ No newline at end of file
import Mock from 'mockjs'
Mock.mock(`${import.meta.env.VITE_APP_BASE_URL}/project/projectType`, {
code: 200,
'data|1-100': [
{
"id|+1": 0,
cname: '@cname',
ename: '@name',
'code|+1': 'code001',
'bizunits': [],
'effect_time': '@date',
'lose_effect_time': '@date',
'detail': ''
}
],
msg: null,
success: true
})
Mock.mock(`${import.meta.env.VITE_APP_BASE_URL}/project/projectMaster`, {
code: 200,
'data|1-10': [
{
"id|+1": 0,
bizUnit: '研发事业部',
classificationIds: '',
classificationName: 'code001',
createTime: '@date',
'isEnabled|1': false,
name: '@cname',
notes: null,
'templatePhases|1-5': [
{
data: null,
children: [],
displayShow: null,
isLeaf: true,
'id|+1': 0,
label: '@cname',
'selected|1': false,
text: '',
title: '',
value: ''
}
]
}
],
msg: null,
success: true
})
import Mock from 'mockjs'
Mock.mock(`${import.meta.env.VITE_APP_BASE_URL}/systemMenus/index`, {
code: 200,
data: {
'treeList|1-10': [
{
"id|+1": 0,
icon: '',
lable: '@cname',
parentId: '',
'sort|0-100': 0,
'show|1': false,
controller: '@name',
url: '/index'
}
]
},
msg: null,
success: true
})
import { request } from '../config'
export function listCategory() {
export function listCategory(params: any) {
return request({
url: '/category/list',
method: 'get'
method: 'get',
params
})
}
......
......@@ -18,7 +18,7 @@
<el-table v-loading="listLoading" :data="list" element-loading-text="正在查询中。。。" border fit highlight-current-row>
<el-table-column type="expand">
<template #default="props">
<el-form label-position="left">
<el-form label-position="left" style="padding-left: 3%;">
<el-form-item label="商品编号">
<span>{{ props.row.goodsSn }}</span>
</el-form-item>
......@@ -108,6 +108,8 @@
</el-table-column>
</el-table>
<litemall-page :page-data="listQuery" :total="total" @size-change="sizeChange"
@current-change="currentChange" />
<!-- <el-tooltip placement="top" content="返回顶部">
<back-to-top :visibility-height="100" />
</el-tooltip> -->
......@@ -120,6 +122,7 @@ import { ElMessageBox, ElNotification } from "element-plus";
import { listGoods, deleteGoods } from "@/services/api/commodityManage/list";
// import { thumbnail, toPreview } from "@/utils/index";
import router from '@/router';
import LitemallPage from "@/components/pagination/litemallPage.vue";
let list = ref([]);
let total = ref(0);
......@@ -138,7 +141,7 @@ let downloadLoading = ref(false);
let getList = () => {
listLoading.value = true;
listGoods(listQuery)
listGoods(listQuery.value)
.then((res: any) => {
list.value = res.data.list;
total.value = res.data.total;
......@@ -152,6 +155,16 @@ let getList = () => {
};
getList()
let sizeChange = (val: number) => {
listQuery.value.limit = val
getList()
}
let currentChange = (val: number) => {
listQuery.value.page = val
getList()
}
let handleFilter = () => {
listQuery.value.page = 1;
getList();
......
......@@ -8,7 +8,7 @@
<el-button class="filter-item" type="primary" icon="search" @click="handleFilter">查找</el-button>
<el-button class="filter-item" type="default" icon="refresh" @click="handleReset">重置</el-button>
</div>
<el-button style="margin-bottom: 20px;" type="primary" icon="plus" @click="handleAdd">添加</el-button>
<el-button style="margin-bottom: 20px;" type="primary" icon="plus" @click="handleAdd">新增</el-button>
<el-table :data="dictData" border fit highlight-current-row>
<el-table-column align="center" label="商品名称" prop="dictName" width="400" />
<el-table-column align="center" label="商品编码" prop="dictCode" width="400" />
......@@ -16,20 +16,22 @@
<el-table-column align="center" label="操作" width="200">
<template #default="scope">
<el-button type="primary" size="small" link @click="handleEdit(scope.row)">编辑</el-button>
<el-button type="primary" size="small" link @click="handleConfigure">商品配置</el-button>
<el-button type="primary" size="small" link @click="handleConfigure(scope.row.id)">商品配置</el-button>
<el-button type="danger" size="small" link @click="handleDelete(scope.row.id)">删除</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<pagination :page-data="dictQuery" :total="total" @size-change="sizeChange" @current-change="currentChange" />
<!-- 添加修改 -->
<el-dialog v-model="dictVisible" :title="dictTitle" width="30%" :before-close="handleClose">
<el-form ref="dictRef" :model="dictForm" :rules="rules" label-width="80px" status-icon>
<el-form-item label="商品名称" prop="name">
<el-form-item label="商品名称" prop="dictName">
<el-input v-model="dictForm.dictName" />
</el-form-item>
<el-form-item label="商品编码">
<el-input v-model="dictForm.dictCode" />
<el-input v-model="dictForm.dictCode" :disabled="dictForm.id != ''" />
</el-form-item>
<el-form-item label="商品描述">
<el-input type="textarea" :rows="4" v-model="dictForm.description" />
......@@ -44,36 +46,62 @@
</span>
</template>
</el-dialog>
<!-- 字典配置 -->
<dict-item ref="dictItemRef" :dictId="dictId" />
</div>
</template>
<script setup lang='ts'>
import { ref } from 'vue'
import { getDictList, deleteDict, addDict, editDict } from '@/services/api/market/auxiliary'
import { ElMessage, ElMessageBox, ElNotification } from 'element-plus';
import { ElMessage, ElMessageBox } from 'element-plus'
import dictItem from './components/dictItem.vue'
import pagination from '@/components/pagination/index.vue'
let dictQuery = ref({
dictName: '',
dictCode: ''
})
let dictData = ref()
let dictTitle = ref('添加')
let dictVisible = ref(false)
dictCode: '',
column: 'createTime',
order: 'desc',
pageNo: 1,
pageSize: 10
}) // 字典查询参数
let dictId = ref('' as any)
// 字典配置查询参数
let dictItemRef = ref()
let dictData = ref() // 字典数据
let total = ref() // 总条数
let dictTitle = ref('添加') //dialog标题
let dictVisible = ref(false) // dialog显隐
let dictForm = ref({
id: '' as any,
dictName: '',
dictCode: '',
description: ''
})
let rules = ref()
let rules = ref({
dictName: [{ required: true, message: '请输入商品名称', trigger: 'blur' }]
})
let dictRef = ref()
let handleFilter = () => {
init(dictQuery.value)
}
let handleReset = () => {
dictQuery.value = {
dictName: '',
dictCode: '',
column: 'createTime',
order: 'desc',
pageNo: 1,
pageSize: 10
}
init(dictQuery.value)
}
let handleAdd = () => {
......@@ -88,27 +116,51 @@ let handleEdit = (row: any) => {
dictTitle.value = '编辑'
}
let handleConfigure = () => {
let handleConfigure = (id: number) => {
if (!id) return init(dictQuery)
else {
dictId.value = id
dictItemRef.value.init({ dictId: id })
dictItemRef.value.dictItemDrawer = true
}
}
let sizeChange = (val: number) => {
dictQuery.value.pageSize = val
init(dictQuery.value)
}
let currentChange = (val: number) => {
dictQuery.value.pageNo = val
init(dictQuery.value)
}
let onConfirm = () => {
if (dictForm.value.id) {
editDict(dictForm.value).then((res: any) => {
if (res.code === 200) {
handleClose()
init(dictQuery.value)
dictRef.value?.validate((valid: any, fields: any) => {
if (valid) {
if (dictForm.value.id) {
editDict(dictForm.value).then((res: any) => {
if (res.code === 200) {
init(dictQuery.value)
ElMessage({ type: 'success', message: '添加成功' })
handleClose()
}
})
} else {
addDict(dictForm.value).then((res: any) => {
if (res.code === 200) {
init(dictQuery.value)
ElMessage({ type: 'success', message: '编辑成功' })
handleClose()
}
})
}
})
} else {
addDict(dictForm.value).then((res: any) => {
if (res.code === 200) {
handleClose()
init(dictQuery.value)
}
})
}
dictVisible.value = false
} else {
console.log(fields);
}
})
}
let handleClose = () => {
dictForm.value = {
......@@ -144,10 +196,11 @@ let handleDelete = (id: number) => {
let init = (params?: any) => {
getDictList(params).then((res: any) => {
dictData.value = res.data.records
total.value = res.data.total
console.log(res, '字典数据');
})
}
init()
init(dictQuery.value)
</script>
<style lang = "scss" scoped>
......
......@@ -6,8 +6,7 @@
</div>
<!-- 查询结果 -->
<el-table v-loading="listLoading" :data="list" element-loading-text="正在查询中。。。" border fit highlight-current-row
row-key="id">
<el-table v-loading="listLoading" :data="list" element-loading-text="正在查询中。。。" border fit highlight-current-row>
<el-table-column align="center" label="类目ID" prop="id" />
<el-table-column align="center" label="类目名" prop="name" />
......@@ -20,7 +19,7 @@
<el-table-column align="center" property="picUrl" label="类目图片">
<template #default="scope">
<el-image :src="scope.row.picUrl" style="width: 40px; height: 40px"></el-image>
<el-image :src="scope.row.picUrl" style="width: 100px; height: 40px"></el-image>
<!-- <el-image :src="thumbnail(scope.row.picUrl)"
:preview-src-list="toPreview(scope.row, scope.row.picUrl)" style="width: 80px; height: 40px" /> -->
</template>
......@@ -45,6 +44,8 @@
</template>
</el-table-column>
</el-table>
<litemall-page :page-data="listQuery" :total="total" @size-change="sizeChange"
@current-change="currentChange" />
<!-- 添加或修改对话框 -->
<el-dialog :title="textMap[dialogStatus]" v-model="dialogFormVisible">
......@@ -111,8 +112,8 @@ import {
deleteCategory,
} from "@/services/api/market/category";
import { uploadPath } from "@/services/api/storage";
import LitemallPage from "@/components/pagination/litemallPage.vue";
// import { thumbnail, toPreview } from "@/utils/index";
console.log(uploadPath);
let dataFormRef = ref();
let list = ref([] as any);
......@@ -128,6 +129,13 @@ let dataForm = reactive({
iconUrl: "",
picUrl: "",
});
let listQuery = ref({
page: 1,
limit: 10,
sort: "add_time",
order: "desc",
});
let total = ref(0)
let dialogFormVisible = ref(false);
let dialogStatus = ref("");
let textMap = reactive({
......@@ -146,9 +154,12 @@ let headers = computed(() => {
let getList = () => {
listLoading.value = true;
listCategory()
listCategory(listQuery.value)
.then((res: any) => {
list.value = res.data.list;
total.value = res.data.total
console.log(res);
listLoading.value = false;
})
.catch(() => {
......@@ -163,6 +174,17 @@ let getCatL1 = () => {
});
};
getCatL1()
let sizeChange = (val: number) => {
listQuery.value.limit = val
getList()
}
let currentChange = (val: number) => {
listQuery.value.page = val
getList()
}
let resetForm = () => {
dataForm = {
id: undefined,
......
<template>
<el-drawer v-model="dictItemDrawer" size="40%" title="商品列表" :before-close="handleClose">
<div class="filter-container">
<el-input v-model="dictItemQuery.itemText" clearable class="filter-item" style="width: 200px;"
placeholder="请输入名称" />
<el-select v-model="dictItemQuery.status" class="filter-item" placeholder="请选择状态" style="width: 200px;">
<el-option label="启用" value="1" />
<el-option label="不启动" value="0" />
</el-select>
<el-button class="filter-item" type="primary" icon="search" @click="handleFilter">查找</el-button>
<el-button class="filter-item" type="default" icon="refresh" @click="handleReset">重置</el-button>
</div>
<el-button style="margin-bottom: 20px;" type="primary" icon="plus" @click="handleAdd">新增</el-button>
<el-table :data="dictItemData" border fit highlight-current-row>
<el-table-column align="center" label="名称" prop="itemText" />
<el-table-column align="center" label="数据值" prop="itemValue" />
<el-table-column align="center" label="操作" width="200">
<template #default="scope">
<el-button type="primary" size="small" link @click="handleEdit(scope.row)">编辑</el-button>
<el-button type="danger" size="small" link @click="handleDelete(scope.row.id)">删除</el-button>
</template>
</el-table-column>
</el-table>
<pagination :page-data="dictItemQuery" :total="total" @size-change="sizeChange"
@current-change="currentChange" />
</el-drawer>
<!-- 新增编辑 -->
<el-dialog v-model="dictItemForm.show" :title="dictItemForm.title" width="40%" :before-close="handleDialogClose">
<el-form ref="dictItemRef" :model="dictItemForm.data" :rules="rules" label-width="80px" status-icon>
<el-form-item label="名称" prop="itemText">
<el-input v-model="dictItemForm.data.itemText" placeholder="请输入名称" />
</el-form-item>
<el-form-item label="数据值" prop="itemValue">
<el-input v-model="dictItemForm.data.itemValue" placeholder="请输入数据值" />
</el-form-item>
<el-form-item label="描述">
<el-input type="textarea" :rows="4" v-model="dictItemForm.data.description" />
</el-form-item>
<el-form-item label="排序">
<el-input-number v-model="dictItemForm.data.sortOrder" controls-position="right" />
</el-form-item>
<el-form-item label="是否启用">
<el-radio-group v-model="dictItemForm.data.status">
<el-radio-button label="1">启用</el-radio-button>
<el-radio-button label="0">不启用</el-radio-button>
</el-radio-group>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="handleDialogClose">取消</el-button>
<el-button type="primary" @click="onConfirm">
确认
</el-button>
</span>
</template>
</el-dialog>
</template>
<script setup lang='ts'>
import { ref, defineExpose, reactive } from 'vue'
import { getDictItemList, addDictItem, editDictItem, deleteDictItem } from '@/services/api/market/auxiliary'
import { ElMessage, ElMessageBox } from 'element-plus';
import pagination from '@/components/pagination/index.vue';
let props = defineProps({
dictId: {
type: Number
}
})
let dictItemQuery = ref({
dictId: props.dictId,
pageNo: 1,
pageSize: 10,
itemText: '',
status: ''
}) // 字典配置查询参数
let dictItemForm = reactive({
show: false,
title: '新增',
data: {
id: '',
dictId: '' as any,
itemText: '',
itemValue: '',
description: '',
sortOrder: 1,
status: 1
}
})
let rules = ref({
itemText: [{ required: true, message: '请输入商品名称', trigger: 'blur' }],
itemValue: [{ required: true, message: '请输入商品名称', trigger: 'blur' }]
})
let dictItemDrawer = ref(false)
let dictItemData = ref()
let dictItemRef = ref()
let total = ref()
let handleFilter = () => {
init(dictItemQuery.value)
}
let handleReset = () => {
dictItemQuery.value = {
dictId: props.dictId,
pageNo: 1,
pageSize: 10,
itemText: '',
status: ''
}
init(dictItemQuery.value)
}
let handleAdd = () => {
dictItemForm.data.dictId = props.dictId
dictItemForm.show = true
}
let handleEdit = (row: any) => {
dictItemForm.data = row
dictItemForm.data.dictId = props.dictId
dictItemForm.show = true
}
let sizeChange = (val: number) => {
dictItemQuery.value.pageSize = val
init(dictItemQuery.value)
}
let currentChange = (val: number) => {
dictItemQuery.value.pageNo = val
init(dictItemQuery.value)
}
let onConfirm = () => {
dictItemRef.value?.validate((valid: any, fields: any) => {
if (valid) {
if (dictItemForm.data.id) {
editDictItem(dictItemForm.data).then((res: any) => {
if (res.code === 200) {
init(dictItemQuery.value)
ElMessage({ type: 'success', message: '编辑成功' })
handleDialogClose()
}
})
} else {
addDictItem(dictItemForm.data).then((res: any) => {
if (res.code === 200) {
init(dictItemQuery.value)
ElMessage({ type: 'success', message: '添加成功' })
handleDialogClose()
}
})
}
} else {
console.log(fields);
}
})
}
let handleDelete = (id: number) => {
ElMessageBox.confirm(
'确认删除?', '提示',
{
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning',
}).then(() => {
deleteDictItem(id).then((res: any) => {
if (res.code === 200) {
ElMessage({ type: 'success', message: res.msg })
init(dictItemQuery.value)
} else {
ElMessage({ type: 'error', message: res.msg })
}
})
})
}
let init = (query?: any) => {
getDictItemList(query).then((res: any) => {
if (res.code === 200) {
dictItemData.value = res.data.records
total.value = res.data.total
dictItemQuery.value.dictId = props.dictId
console.log(dictItemData.value);
}
})
}
let handleClose = () => {
dictItemQuery.value = {
dictId: props.dictId,
pageNo: 1,
pageSize: 10,
itemText: '',
status: ''
}
dictItemDrawer.value = false
}
let handleDialogClose = () => {
dictItemForm.data = {
id: '',
dictId: '',
itemText: '',
itemValue: '',
description: '',
sortOrder: 1,
status: 1
}
dictItemForm.show = false
}
defineExpose({
dictItemDrawer,
init
})
</script>
<style lang = "scss" scoped>
</style>
\ No newline at end of file
......@@ -105,8 +105,8 @@
</template>
</el-table-column>
</el-table>
<litemall-page :page-data="listQuery" :total="total" @size-change="sizeChange"
@current-change="currentChange" />
<!-- 订单详情对话框 -->
<el-dialog v-model="orderDialogVisible" title="订单详情" width="60%">
......@@ -200,10 +200,10 @@
</el-table-column>
<el-table-column property="onumber" width="100" label="下单数量" />
<!-- <el-table-column label="实际数量" width="100">
<template #default="scope">
<el-input-number v-model="scope.row.number" :min="0" :controls="false" />
</template>
</el-table-column> -->
<template #default="scope">
<el-input-number v-model="scope.row.number" :min="0" :controls="false" />
</template>
</el-table-column> -->
</el-table>
<template #footer class="dialog-footer">
<el-button @click="payDialogVisible = false">取消</el-button>
......@@ -248,10 +248,12 @@
</template>
<script setup lang='ts'>
import { ref, reactive, computed, nextTick } from 'vue'
import { ref, reactive, nextTick } from 'vue'
import moment from 'moment'
import { ElMessage, ElMessageBox, ElNotification } from 'element-plus';
import { detailOrder, listOrder, listChannel, refundOrder, payOrder, deleteOrder, shipOrder } from '@/services/api/market/order'
import LitemallPage from "@/components/pagination/litemallPage.vue";
let statusMap = {
101: '未付款',
......@@ -265,12 +267,6 @@ let statusMap = {
402: '系统收货'
} as any
let orderStatusFilter = computed((status: any) => {
console.log(status);
return statusMap[status]
})
let shipFormRef = ref()
let refundFormRef = ref()
let list = ref([] as any)
......@@ -278,7 +274,7 @@ let total = ref(0)
let listLoading = ref(true)
let listQuery = reactive({
page: 1,
limit: 20,
limit: 10,
nickname: undefined,
consignee: undefined,
orderSn: undefined,
......@@ -389,6 +385,16 @@ let getChannel = () => {
}
getChannel()
let sizeChange = (val: number) => {
listQuery.limit = val
getList()
}
let currentChange = (val: number) => {
listQuery.page = val
getList()
}
let dataChange = (datatime: any) => {
console.log(datatime);
......
差异被折叠。
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论