添加订单列表、详情
This commit is contained in:
parent
2d15306aaf
commit
9e1bab08b6
26
src/api/order.ts
Normal file
26
src/api/order.ts
Normal file
@ -0,0 +1,26 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 订单列表
|
||||
export function apiOrderLists(params: any) {
|
||||
return request.get({ url: '/order/lists', params })
|
||||
}
|
||||
|
||||
// 添加订单
|
||||
export function apiOrderAdd(params: any) {
|
||||
return request.post({ url: '/order/add', params })
|
||||
}
|
||||
|
||||
// 编辑订单
|
||||
export function apiOrderEdit(params: any) {
|
||||
return request.post({ url: '/order/edit', params })
|
||||
}
|
||||
|
||||
// 删除订单
|
||||
export function apiOrderDelete(params: any) {
|
||||
return request.post({ url: '/order/delete', params })
|
||||
}
|
||||
|
||||
// 订单详情
|
||||
export function apiOrderDetail(params: any) {
|
||||
return request.get({ url: '/order/detail', params })
|
||||
}
|
||||
@ -1,35 +1,98 @@
|
||||
<template>
|
||||
<div class="edit-popup">
|
||||
<popup ref="popupRef" :title="popupTitle" :async="true" width="550px" @confirm="handleSubmit"
|
||||
@close="handleClose">
|
||||
<el-form ref="formRef" :model="formData" label-width="90px">
|
||||
<div class="code-edit">
|
||||
<el-card class="box-card mb-4">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>基础信息</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-form ref="formRef" class="mb-[-16px]" :model="formData" label-width="90px">
|
||||
<el-form-item label="菜品分类" prop="dishes_category_id">
|
||||
<el-tree-select class="flex-1" v-model="formData.dishes_category_id" :data="categoryList" clearable
|
||||
node-key="id" :props="{
|
||||
label: 'name'
|
||||
}" :default-expand-all="true" placeholder="请选择菜品分类" check-strictly />
|
||||
label: 'name'
|
||||
}" :default-expand-all="true" placeholder="请选择菜品分类" check-strictly />
|
||||
</el-form-item>
|
||||
<el-form-item label="菜名" prop="name">
|
||||
<el-input v-model="formData.name" clearable placeholder="请输入菜名" />
|
||||
</el-form-item>
|
||||
<el-form-item label="餐食" prop="time_type">
|
||||
<el-select class="flex-1" v-model="formData.time_type" clearable placeholder="请选择餐食">
|
||||
<el-option v-for="(item, index) in dictData.time_type" :key="index" :label="item.name"
|
||||
:value="parseInt(item.value)" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="特色" prop="feature">
|
||||
<el-select class="flex-1" v-model="formData.feature" clearable placeholder="请选择特色">
|
||||
<el-option v-for="(item, index) in dictData.feature" :key="index" :label="item.name"
|
||||
:value="parseInt(item.value)" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="人群" prop="people">
|
||||
<el-select class="flex-1" v-model="formData.people" clearable placeholder="请选择人群">
|
||||
<el-option v-for="(item, index) in dictData.people" :key="index" :label="item.name"
|
||||
:value="parseInt(item.value)" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="图片" prop="image">
|
||||
<material-picker v-model="formData.image" :limit="6" />
|
||||
</el-form-item>
|
||||
<el-form-item label="起购量" prop="min_num">
|
||||
<el-input v-model="formData.min_num" clearable placeholder="请输入起购量" />
|
||||
</el-form-item>
|
||||
<el-form-item label="销量" prop="sale_num">
|
||||
<el-input v-model="formData.sale_num" clearable placeholder="请输入销量" />
|
||||
</el-form-item>
|
||||
<el-form-item label="简介" prop="intro">
|
||||
<el-input v-model="formData.intro" clearable placeholder="请输入简介" />
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-radio-group v-model="formData.status">
|
||||
<el-radio :label="1">上架</el-radio>
|
||||
<el-radio :label="2">下架</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</popup>
|
||||
</el-card>
|
||||
<el-card class="box-card mb-4 !border-none">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>食材配置</span>
|
||||
</div>
|
||||
</template>
|
||||
<DishesProduct ref="dishesProductRef"></DishesProduct>
|
||||
</el-card>
|
||||
<footer-btns>
|
||||
<el-button type="primary" @click="handleSubmit">保存</el-button>
|
||||
</footer-btns>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup name="dishesEdit">
|
||||
<script lang="ts" setup name="tableEdit">
|
||||
import type { FormInstance } from 'element-plus'
|
||||
import Popup from '@/components/popup/index.vue'
|
||||
import { apiDishesAdd, apiDishesEdit, apiDishesDetail } from '@/api/dishes'
|
||||
import { apiDishesCategoryLists } from '@/api/dishes_category'
|
||||
import { timeFormat } from '@/utils/util'
|
||||
import type { PropType } from 'vue'
|
||||
import { arrayToTree, treeToArray } from '@/utils/util'
|
||||
import { useDictData } from '@/hooks/useDictOptions'
|
||||
import DishesProduct from '../dishes_product/index.vue'
|
||||
import { onMounted } from 'vue'
|
||||
|
||||
const route = useRoute()
|
||||
const dishesId = ref(0)
|
||||
const dishesProductRef = shallowRef<InstanceType<typeof DishesProduct>>()
|
||||
onMounted(async () => {
|
||||
if (route.query.id) {
|
||||
dishesId.value = parseInt(route.query.id)
|
||||
dishesProductRef.value?.setDishesId(dishesId.value)
|
||||
dishesProductRef.value?.getLists()
|
||||
}
|
||||
getDetail()
|
||||
})
|
||||
|
||||
const { dictData } = useDictData('time_type,feature,people')
|
||||
|
||||
const emit = defineEmits(['success', 'close'])
|
||||
const formRef = shallowRef<FormInstance>()
|
||||
const popupRef = shallowRef<InstanceType<typeof Popup>>()
|
||||
const mode = ref('add')
|
||||
|
||||
const categoryList = ref<any[]>([])
|
||||
const getCategoryList = async () => {
|
||||
@ -39,17 +102,19 @@
|
||||
|
||||
getCategoryList()
|
||||
|
||||
// 弹窗标题
|
||||
const popupTitle = computed(() => {
|
||||
return mode.value == 'edit' ? '编辑菜品' : '新增菜品'
|
||||
})
|
||||
|
||||
// 表单数据
|
||||
const formData = reactive({
|
||||
id: '',
|
||||
name: '',
|
||||
image: '',
|
||||
intro: '',
|
||||
time_type: '',
|
||||
feature: '',
|
||||
people: '',
|
||||
min_num: '',
|
||||
sale_num: '',
|
||||
status: 1,
|
||||
dishes_category_id: '',
|
||||
|
||||
})
|
||||
|
||||
// 获取详情
|
||||
@ -62,9 +127,9 @@
|
||||
}
|
||||
}
|
||||
|
||||
const getDetail = async (row : Record<string, any>) => {
|
||||
const getDetail = async () => {
|
||||
const data = await apiDishesDetail({
|
||||
id: row.id
|
||||
id: dishesId.value
|
||||
})
|
||||
setFormData(data)
|
||||
}
|
||||
@ -73,27 +138,9 @@
|
||||
const handleSubmit = async () => {
|
||||
await formRef.value?.validate()
|
||||
const data = { ...formData, }
|
||||
mode.value == 'edit'
|
||||
dishesId.value > 0
|
||||
? await apiDishesEdit(data)
|
||||
: await apiDishesAdd(data)
|
||||
popupRef.value?.close()
|
||||
emit('success')
|
||||
}
|
||||
|
||||
//打开弹窗
|
||||
const open = (type = 'add') => {
|
||||
mode.value = type
|
||||
popupRef.value?.open()
|
||||
}
|
||||
|
||||
// 关闭回调
|
||||
const handleClose = () => {
|
||||
emit('close')
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
open,
|
||||
setFormData,
|
||||
getDetail
|
||||
})
|
||||
</script>
|
||||
@ -19,11 +19,13 @@
|
||||
</el-form>
|
||||
</el-card>
|
||||
<el-card class="!border-none" v-loading="pager.loading" shadow="never">
|
||||
<el-button v-perms="['dishes/add']" type="primary" @click="handleAdd">
|
||||
<template #icon>
|
||||
<icon name="el-icon-Plus" />
|
||||
</template>
|
||||
新增
|
||||
<el-button type="primary">
|
||||
<router-link v-perms="['dishes/edit']" :to="{path: 'dishes/edit'}">
|
||||
<template #icon>
|
||||
<icon name="el-icon-Plus" />
|
||||
</template>
|
||||
新增
|
||||
</router-link>
|
||||
</el-button>
|
||||
<el-button v-perms="['dishes/delete']" :disabled="!selectData.length" @click="handleDelete(selectData)">
|
||||
删除
|
||||
@ -33,23 +35,31 @@
|
||||
<el-table-column type="selection" width="55" />
|
||||
<el-table-column label="ID" prop="id" show-overflow-tooltip />
|
||||
<el-table-column label="菜名" prop="name" show-overflow-tooltip />
|
||||
<el-table-column label="菜品分类" prop="dishes_category_id" show-overflow-tooltip />
|
||||
<!-- <el-table-column label="图片" width="80" prop="image">
|
||||
<template #default="{ row }">
|
||||
<el-image style="width:50px;height:50px;" :src="row.image" />
|
||||
</template>
|
||||
</el-table-column> -->
|
||||
<el-table-column label="简介" prop="intro" show-overflow-tooltip />
|
||||
<el-table-column label="菜品分类" prop="dishesCategory.name" show-overflow-tooltip />
|
||||
<el-table-column label="创建时间" prop="create_time" show-overflow-tooltip />
|
||||
|
||||
<el-table-column label="操作" width="220" fixed="right">
|
||||
<el-table-column label="操作" width="120" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button v-perms="['dishes_product/lists']" type="primary" link @click="handleEdit(row)">
|
||||
|
||||
</el-button>
|
||||
<el-button type="primary" link>
|
||||
<!-- <el-button type="primary" link>
|
||||
<router-link v-perms="['dishes_product/lists']"
|
||||
:to="{path: 'dishes_product',query: {id: row.id, title: row.name}}">
|
||||
菜品商品
|
||||
</router-link>
|
||||
</el-button> -->
|
||||
<el-button type="primary" link>
|
||||
<router-link v-perms="['dishes/edit']" :to="{path: 'dishes/edit',query: {id: row.id}}">
|
||||
编辑
|
||||
</router-link>
|
||||
</el-button>
|
||||
<el-button v-perms="['dishes/edit']" type="primary" link @click="handleEdit(row)">
|
||||
<!-- <el-button v-perms="['dishes/edit']" type="primary" link @click="handleEdit(row)">
|
||||
编辑
|
||||
</el-button>
|
||||
</el-button> -->
|
||||
<el-button v-perms="['dishes/delete']" type="danger" link @click="handleDelete(row.id)">
|
||||
删除
|
||||
</el-button>
|
||||
|
||||
@ -31,7 +31,7 @@
|
||||
const categoryList = ref<any[]>([])
|
||||
|
||||
const getCategoryList = async () => {
|
||||
const data : any = await apiDishesCategoryLists({ page_type: 0 })
|
||||
const data : any = await apiDishesCategoryLists({ page_type: 0, disable: 1 })
|
||||
const topData : any = { id: 0, name: '顶级', children: [] }
|
||||
topData.children = arrayToTree(
|
||||
treeToArray(data.lists)
|
||||
|
||||
@ -32,6 +32,13 @@
|
||||
import { apiProductLists } from '@/api/product'
|
||||
import { apiProductUnitLists } from '@/api/product_unit'
|
||||
|
||||
const props = defineProps({
|
||||
dishesId: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
})
|
||||
|
||||
const unitList = ref<any[]>([])
|
||||
const getUnitList = async () => {
|
||||
const data : any = await apiProductUnitLists({ page_type: 0 })
|
||||
@ -59,11 +66,12 @@
|
||||
const formData = reactive({
|
||||
id: '',
|
||||
dishes_id: '',
|
||||
product_id: '',
|
||||
product_id: props.dishesId,
|
||||
unit_id: '',
|
||||
nums: '',
|
||||
|
||||
})
|
||||
console.log(formData);
|
||||
|
||||
// 获取详情
|
||||
const setFormData = async (data : Record<any, any>) => {
|
||||
|
||||
@ -1,8 +1,5 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-card class="!border-none mb-4" shadow="never">
|
||||
当前菜品：{{title}}
|
||||
</el-card>
|
||||
<el-card class="!border-none" v-loading="pager.loading" shadow="never">
|
||||
<el-button v-perms="['dishes_product/add']" type="primary" @click="handleAdd">
|
||||
<template #icon>
|
||||
@ -54,18 +51,8 @@
|
||||
import EditPopup from './edit.vue'
|
||||
import { apiProductLists } from '@/api/product'
|
||||
import { onMounted } from 'vue'
|
||||
|
||||
|
||||
const route = useRoute()
|
||||
const title = ref('')
|
||||
onMounted(() => {
|
||||
if (route.query.title) {
|
||||
title.value = route.query.title
|
||||
}
|
||||
if (route.query.id) {
|
||||
queryParams.dishes_id = route.query.id
|
||||
getLists()
|
||||
}
|
||||
})
|
||||
|
||||
const editRef = shallowRef<InstanceType<typeof EditPopup>>()
|
||||
// 是否显示编辑框
|
||||
@ -74,7 +61,6 @@
|
||||
// 查询条件
|
||||
const queryParams = reactive({
|
||||
dishes_id: '',
|
||||
product_id: '',
|
||||
})
|
||||
|
||||
// 选中数据
|
||||
@ -112,4 +98,13 @@
|
||||
await apiDishesProductDelete({ id })
|
||||
getLists()
|
||||
}
|
||||
|
||||
const setDishesId = (dishesId) => {
|
||||
queryParams.dishes_id = dishesId
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
setDishesId,
|
||||
getLists
|
||||
})
|
||||
</script>
|
||||
145
src/views/order/detail.vue
Normal file
145
src/views/order/detail.vue
Normal file
@ -0,0 +1,145 @@
|
||||
<template>
|
||||
<div class="system-environment">
|
||||
<el-card class="!border-none" shadow="never">
|
||||
<div>基础信息</div>
|
||||
<div class="mt-4 flex justify-between">
|
||||
<el-text class="mx-1">订单编号：{{formData.order_sn}}</el-text>
|
||||
<el-text class="mx-1">下单时间：{{formData.create_time}}</el-text>
|
||||
<el-text class="mx-1">订单类型：{{formData.order_type_text}}</el-text>
|
||||
<el-text class="mx-1">下单金额：{{formData.total_amount}}</el-text>
|
||||
</div>
|
||||
<div class="mt-4 flex justify-between">
|
||||
<el-text class="mx-1">订单状态：{{formData.status_text}}</el-text>
|
||||
<el-text class="mx-1">付款状态：{{formData.pay_status_text}}</el-text>
|
||||
<el-text class="mx-1">配送日期：{{formData.delivery_time}}</el-text>
|
||||
<el-text class="mx-1">配送时间：{{formData.delivery_time}}</el-text>
|
||||
</div>
|
||||
<div class="mt-4 flex justify-between">
|
||||
<el-text class="mx-1">客户名称：{{formData.customer_name}}</el-text>
|
||||
<el-text class="mx-1">配送（收货）地址：{{formData.address}}</el-text>
|
||||
<el-text class="mx-1">联系电话：{{formData.phone}}</el-text>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<el-card shadow="never" class="!border-none mt-4">
|
||||
<div>菜谱清单</div>
|
||||
<div class="mt-4">
|
||||
<el-table :data="formData.orderDishes">
|
||||
<el-table-column prop="id" label="序号"></el-table-column>
|
||||
<el-table-column prop="dishes.name" label="菜谱名称"></el-table-column>
|
||||
<el-table-column prop="num" label="下单份数"></el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<el-card shadow="never" class="!border-none mt-4">
|
||||
<div>商品清单</div>
|
||||
<div class="mt-4">
|
||||
<el-table :data="formData.orderProduct">
|
||||
<el-table-column prop="id" label="序号"></el-table-column>
|
||||
<el-table-column prop="product.name" label="商品名称"></el-table-column>
|
||||
<el-table-column prop="product.id" label="商品编码"></el-table-column>
|
||||
<el-table-column prop="product.id" label="商品批次"></el-table-column>
|
||||
<el-table-column prop="price" label="下单单价"></el-table-column>
|
||||
<el-table-column prop="num" label="下单数量"></el-table-column>
|
||||
<el-table-column prop="total_amount" label="下单金额"></el-table-column>
|
||||
<el-table-column prop="price" label="发货单价"></el-table-column>
|
||||
<el-table-column prop="num" label="发货数量"></el-table-column>
|
||||
<el-table-column prop="total_amount" label="发货金额"></el-table-column>
|
||||
<el-table-column prop="remark" label="备注"></el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<div class="flex mt-4 justify-start">
|
||||
<div>下单数量：{{formData.total_num}}</div>
|
||||
<div class="ml-4">下单金额：{{formData.total_amount}}</div>
|
||||
<div class="ml-4">发货数量：{{formData.total_num}}</div>
|
||||
<div class="ml-4">发货金额：{{formData.total_amount}}</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup name="tableEdit">
|
||||
import type { FormInstance } from 'element-plus'
|
||||
import Popup from '@/components/popup/index.vue'
|
||||
import { apiDishesAdd, apiDishesEdit, apiDishesDetail } from '@/api/dishes'
|
||||
import { apiOrderAdd, apiOrderEdit, apiOrderDetail } from '@/api/order'
|
||||
import { apiDishesCategoryLists } from '@/api/dishes_category'
|
||||
import { useDictData } from '@/hooks/useDictOptions'
|
||||
import DishesProduct from '../dishes_product/index.vue'
|
||||
import { onMounted } from 'vue'
|
||||
|
||||
const route = useRoute()
|
||||
const orderId = ref(0)
|
||||
const dishesProductRef = shallowRef<InstanceType<typeof DishesProduct>>()
|
||||
onMounted(async () => {
|
||||
if (route.query.id) {
|
||||
orderId.value = parseInt(route.query.id)
|
||||
dishesProductRef.value?.setDishesId(orderId.value)
|
||||
dishesProductRef.value?.getLists()
|
||||
}
|
||||
getDetail()
|
||||
})
|
||||
|
||||
const { dictData } = useDictData('time_type,feature,people')
|
||||
|
||||
const emit = defineEmits(['success', 'close'])
|
||||
const formRef = shallowRef<FormInstance>()
|
||||
|
||||
const categoryList = ref<any[]>([])
|
||||
const getCategoryList = async () => {
|
||||
const data : any = await apiDishesCategoryLists({ page_type: 0 })
|
||||
categoryList.value = data.lists
|
||||
}
|
||||
|
||||
getCategoryList()
|
||||
|
||||
// 表单数据
|
||||
const formData = reactive({
|
||||
id: '',
|
||||
order_sn: '',
|
||||
uid: '',
|
||||
project_id: '',
|
||||
order_type_text: '',
|
||||
total_num: '',
|
||||
total_amount: '',
|
||||
pay_amount: '',
|
||||
status_text: '',
|
||||
pay_status_text: '',
|
||||
pay_time: 1,
|
||||
customer_name: '',
|
||||
phone: '',
|
||||
address: '',
|
||||
delivery_time: 1,
|
||||
create_time: '',
|
||||
orderDishes: [],
|
||||
orderProduct: []
|
||||
})
|
||||
|
||||
// 获取详情
|
||||
const setFormData = async (data : Record<any, any>) => {
|
||||
for (const key in formData) {
|
||||
if (data[key] != null && data[key] != undefined) {
|
||||
//@ts-ignore
|
||||
formData[key] = data[key]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const getDetail = async () => {
|
||||
const data = await apiOrderDetail({
|
||||
id: orderId.value
|
||||
})
|
||||
setFormData(data)
|
||||
}
|
||||
|
||||
// 提交按钮
|
||||
const handleSubmit = async () => {
|
||||
await formRef.value?.validate()
|
||||
const data = { ...formData, }
|
||||
orderId.value > 0
|
||||
? await apiDishesEdit(data)
|
||||
: await apiDishesAdd(data)
|
||||
emit('success')
|
||||
}
|
||||
</script>
|
||||
155
src/views/order/edit.vue
Normal file
155
src/views/order/edit.vue
Normal file
@ -0,0 +1,155 @@
|
||||
<template>
|
||||
<div class="edit-popup">
|
||||
<popup ref="popupRef" :title="popupTitle" :async="true" width="550px" @confirm="handleSubmit"
|
||||
@close="handleClose">
|
||||
<el-form ref="formRef" :model="formData" label-width="90px" :rules="formRules">
|
||||
<el-form-item label="订单编号" prop="order_sn">
|
||||
<el-input v-model="formData.order_sn" clearable placeholder="请输入订单编号" />
|
||||
</el-form-item>
|
||||
<el-form-item label="用户id" prop="uid">
|
||||
<el-input v-model="formData.uid" clearable placeholder="请输入用户id" />
|
||||
</el-form-item>
|
||||
<el-form-item label="项目ID" prop="project_id">
|
||||
<el-input v-model="formData.project_id" clearable placeholder="请输入项目ID" />
|
||||
</el-form-item>
|
||||
<el-form-item label="订单类型" prop="order_type">
|
||||
<el-input v-model="formData.order_type" clearable placeholder="请输入订单类型" />
|
||||
</el-form-item>
|
||||
<el-form-item label="总金额" prop="total_amount">
|
||||
<el-input v-model="formData.total_amount" clearable placeholder="请输入总金额" />
|
||||
</el-form-item>
|
||||
<el-form-item label="实付金额" prop="pay_amount">
|
||||
<el-input v-model="formData.pay_amount" clearable placeholder="请输入实付金额" />
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-input v-model="formData.status" clearable placeholder="请输入状态" />
|
||||
</el-form-item>
|
||||
<el-form-item label="支付状态" prop="paid">
|
||||
<el-input v-model="formData.paid" clearable placeholder="请输入支付状态" />
|
||||
</el-form-item>
|
||||
<el-form-item label="支付时间" prop="pay_time">
|
||||
<el-date-picker class="flex-1 !flex" v-model="formData.pay_time" clearable type="datetime"
|
||||
value-format="YYYY-MM-DD HH:mm:ss" placeholder="选择支付时间">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="客户姓名" prop="customer_name">
|
||||
<el-input v-model="formData.customer_name" clearable placeholder="请输入客户姓名" />
|
||||
</el-form-item>
|
||||
<el-form-item label="客户电话" prop="phone">
|
||||
<el-input v-model="formData.phone" clearable placeholder="请输入客户电话" />
|
||||
</el-form-item>
|
||||
<el-form-item label="客户地址" prop="address">
|
||||
<el-input v-model="formData.address" clearable placeholder="请输入客户地址" />
|
||||
</el-form-item>
|
||||
<el-form-item label="发货时间" prop="delivery_time">
|
||||
<el-date-picker class="flex-1 !flex" v-model="formData.delivery_time" clearable type="datetime"
|
||||
value-format="YYYY-MM-DD HH:mm:ss" placeholder="选择发货时间">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
|
||||
|
||||
</el-form>
|
||||
</popup>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup name="orderEdit">
|
||||
import type { FormInstance } from 'element-plus'
|
||||
import Popup from '@/components/popup/index.vue'
|
||||
import { apiOrderAdd, apiOrderEdit, apiOrderDetail } from '@/api/order'
|
||||
import { timeFormat } from '@/utils/util'
|
||||
import type { PropType } from 'vue'
|
||||
defineProps({
|
||||
dictData: {
|
||||
type: Object as PropType<Record<string, any[]>>,
|
||||
default: () => ({})
|
||||
}
|
||||
})
|
||||
const emit = defineEmits(['success', 'close'])
|
||||
const formRef = shallowRef<FormInstance>()
|
||||
const popupRef = shallowRef<InstanceType<typeof Popup>>()
|
||||
const mode = ref('add')
|
||||
|
||||
|
||||
// 弹窗标题
|
||||
const popupTitle = computed(() => {
|
||||
return mode.value == 'edit' ? '编辑订单' : '新增订单'
|
||||
})
|
||||
|
||||
// 表单数据
|
||||
const formData = reactive({
|
||||
id: '',
|
||||
order_sn: '',
|
||||
uid: '',
|
||||
project_id: '',
|
||||
order_type: '',
|
||||
total_amount: '',
|
||||
pay_amount: '',
|
||||
status: '',
|
||||
paid: '',
|
||||
pay_time: '',
|
||||
customer_name: '',
|
||||
phone: '',
|
||||
address: '',
|
||||
delivery_time: '',
|
||||
|
||||
})
|
||||
|
||||
|
||||
// 表单验证
|
||||
const formRules = reactive<any>({
|
||||
|
||||
})
|
||||
|
||||
|
||||
// 获取详情
|
||||
const setFormData = async (data : Record<any, any>) => {
|
||||
for (const key in formData) {
|
||||
if (data[key] != null && data[key] != undefined) {
|
||||
//@ts-ignore
|
||||
formData[key] = data[key]
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
const getDetail = async (row : Record<string, any>) => {
|
||||
const data = await apiOrderDetail({
|
||||
id: row.id
|
||||
})
|
||||
setFormData(data)
|
||||
}
|
||||
|
||||
|
||||
// 提交按钮
|
||||
const handleSubmit = async () => {
|
||||
await formRef.value?.validate()
|
||||
const data = { ...formData, }
|
||||
mode.value == 'edit'
|
||||
? await apiOrderEdit(data)
|
||||
: await apiOrderAdd(data)
|
||||
popupRef.value?.close()
|
||||
emit('success')
|
||||
}
|
||||
|
||||
//打开弹窗
|
||||
const open = (type = 'add') => {
|
||||
mode.value = type
|
||||
popupRef.value?.open()
|
||||
}
|
||||
|
||||
// 关闭回调
|
||||
const handleClose = () => {
|
||||
emit('close')
|
||||
}
|
||||
|
||||
|
||||
|
||||
defineExpose({
|
||||
open,
|
||||
setFormData,
|
||||
getDetail
|
||||
})
|
||||
</script>
|
||||
186
src/views/order/index.vue
Normal file
186
src/views/order/index.vue
Normal file
@ -0,0 +1,186 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-card class="!border-none mb-4" shadow="never">
|
||||
<el-form class="mb-[-16px]" :model="queryParams" inline>
|
||||
<el-form-item class="w-[280px]" label="订单编号" prop="order_sn">
|
||||
<el-input v-model="queryParams.order_sn" clearable placeholder="请输入订单编号" />
|
||||
</el-form-item>
|
||||
<el-form-item class="w-[280px]" label="用户" prop="uid">
|
||||
<el-input v-model="queryParams.uid" clearable placeholder="请输入用户昵称" />
|
||||
</el-form-item>
|
||||
<el-form-item class="w-[280px]" label="项目" prop="project_id">
|
||||
<el-select v-model="queryParams.project_id" filterable remote reserve-keyword placeholder="请输入项目"
|
||||
:remote-method="getProjectList" :loading="projectLoading">
|
||||
<el-option v-for="item in projectList" :key="item.id" :label="item.name" :value="item.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item class="w-[280px]" label="订单类型" prop="order_type">
|
||||
<el-select v-model="queryParams.order_type" clearable placeholder="请输入订单类型">
|
||||
<el-option label="普通订单" :value="1" />
|
||||
<el-option label="自提订单" :value="2" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item class="w-[280px]" label="状态" prop="status">
|
||||
<el-select v-model="queryParams.status" clearable placeholder="请输入状态">
|
||||
<el-option label="待发货" :value="0" />
|
||||
<el-option label="待收货" :value="1" />
|
||||
<el-option label="待评价" :value="2" />
|
||||
<el-option label="已完成" :value="3" />
|
||||
<el-option label="拼团中" :value="9" />
|
||||
<el-option label="待付尾款" :value="10" />
|
||||
<el-option label="尾款超时未付" :value="11" />
|
||||
<el-option label="已退款" :value="-1" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item class="w-[280px]" label="支付状态" prop="paid">
|
||||
<el-select v-model="queryParams.paid" clearable placeholder="请输入支付状态">
|
||||
<el-option label="未支付" :value="0" />
|
||||
<el-option label="已支付" :value="1" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="支付时间" prop="start_time">
|
||||
<el-date-picker class="flex-1 !flex" v-model="queryParams.start_time" clearable type="datetime"
|
||||
value-format="YYYY-MM-DD HH:mm:ss" placeholder="选择开始时间">
|
||||
</el-date-picker>
|
||||
<el-date-picker class="flex-1 !flex ml-2" v-model="queryParams.end_time" clearable type="datetime"
|
||||
value-format="YYYY-MM-DD HH:mm:ss" placeholder="结束时间">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item class="w-[280px]" label="客户姓名" prop="customer_name">
|
||||
<el-input v-model="queryParams.customer_name" clearable placeholder="请输入客户姓名" />
|
||||
</el-form-item>
|
||||
<el-form-item class="w-[280px]" label="客户电话" prop="phone">
|
||||
<el-input v-model="queryParams.phone" clearable placeholder="请输入客户电话" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="resetPage">查询</el-button>
|
||||
<el-button @click="resetParams">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
<el-card class="!border-none" v-loading="pager.loading" shadow="never">
|
||||
<el-button v-perms="['order/add']" type="primary" @click="handleAdd">
|
||||
<template #icon>
|
||||
<icon name="el-icon-Plus" />
|
||||
</template>
|
||||
新增
|
||||
</el-button>
|
||||
<el-button v-perms="['order/delete']" :disabled="!selectData.length" @click="handleDelete(selectData)">
|
||||
删除
|
||||
</el-button>
|
||||
<div class="mt-4">
|
||||
<el-table :data="pager.lists" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" />
|
||||
<el-table-column label="ID" prop="id" show-overflow-tooltip />
|
||||
<el-table-column label="订单编号" prop="order_sn" show-overflow-tooltip />
|
||||
<el-table-column label="用户" prop="uid" show-overflow-tooltip />
|
||||
<el-table-column label="项目" prop="project.name" show-overflow-tooltip />
|
||||
<el-table-column label="订单类型" prop="order_type_text" show-overflow-tooltip />
|
||||
<el-table-column label="总金额" prop="total_amount" show-overflow-tooltip />
|
||||
<el-table-column label="实付金额" prop="pay_amount" show-overflow-tooltip />
|
||||
<el-table-column label="状态" prop="status_text" show-overflow-tooltip />
|
||||
<el-table-column label="支付状态" prop="pay_status_text" show-overflow-tooltip />
|
||||
<el-table-column label="支付时间" prop="pay_time" show-overflow-tooltip />
|
||||
<el-table-column label="客户姓名" prop="customer_name" show-overflow-tooltip />
|
||||
<el-table-column label="客户电话" prop="phone" show-overflow-tooltip />
|
||||
<el-table-column label="客户地址" prop="address" show-overflow-tooltip />
|
||||
<el-table-column label="创建时间" prop="create_time" show-overflow-tooltip />
|
||||
|
||||
<el-table-column label="操作" width="120" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button type="primary" link>
|
||||
<router-link v-perms="['order/detail']" :to="{path: 'order/detail',query: {id: row.id}}">
|
||||
详情
|
||||
</router-link>
|
||||
</el-button>
|
||||
<el-button v-perms="['order/delete']" type="danger" link @click="handleDelete(row.id)">
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<div class="flex mt-4 justify-end">
|
||||
<pagination v-model="pager" @change="getLists" />
|
||||
</div>
|
||||
</el-card>
|
||||
<edit-popup v-if="showEdit" ref="editRef" :dict-data="dictData" @success="getLists" @close="showEdit = false" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup name="orderLists">
|
||||
import { usePaging } from '@/hooks/usePaging'
|
||||
import { useDictData } from '@/hooks/useDictOptions'
|
||||
import { apiOrderLists, apiOrderDelete } from '@/api/order'
|
||||
import { timeFormat } from '@/utils/util'
|
||||
import feedback from '@/utils/feedback'
|
||||
import EditPopup from './edit.vue'
|
||||
import { apiProjectLists } from '@/api/project'
|
||||
|
||||
const editRef = shallowRef<InstanceType<typeof EditPopup>>()
|
||||
// 是否显示编辑框
|
||||
const showEdit = ref(false)
|
||||
|
||||
const projectList = ref<any[]>([])
|
||||
const projectLoading = ref(false)
|
||||
const getProjectList = async () => {
|
||||
const data : any = await apiProjectLists({ page_type: 0 })
|
||||
projectList.value = data.lists
|
||||
}
|
||||
|
||||
// 查询条件
|
||||
const queryParams = reactive({
|
||||
order_sn: '',
|
||||
uid: '',
|
||||
project_id: '',
|
||||
order_type: '',
|
||||
status: '',
|
||||
paid: '',
|
||||
pay_time: '',
|
||||
customer_name: '',
|
||||
phone: '',
|
||||
})
|
||||
|
||||
// 选中数据
|
||||
const selectData = ref<any[]>([])
|
||||
|
||||
// 表格选择后回调事件
|
||||
const handleSelectionChange = (val : any[]) => {
|
||||
selectData.value = val.map(({ id }) => id)
|
||||
}
|
||||
|
||||
// 获取字典数据
|
||||
const { dictData } = useDictData('')
|
||||
|
||||
// 分页相关
|
||||
const { pager, getLists, resetParams, resetPage } = usePaging({
|
||||
fetchFun: apiOrderLists,
|
||||
params: queryParams
|
||||
})
|
||||
|
||||
// 添加
|
||||
const handleAdd = async () => {
|
||||
showEdit.value = true
|
||||
await nextTick()
|
||||
editRef.value?.open('add')
|
||||
}
|
||||
|
||||
// 编辑
|
||||
const handleEdit = async (data : any) => {
|
||||
showEdit.value = true
|
||||
await nextTick()
|
||||
editRef.value?.open('edit')
|
||||
editRef.value?.setFormData(data)
|
||||
}
|
||||
|
||||
// 删除
|
||||
const handleDelete = async (id : number | any[]) => {
|
||||
await feedback.confirm('确定要删除？')
|
||||
await apiOrderDelete({ id })
|
||||
getLists()
|
||||
}
|
||||
|
||||
getLists()
|
||||
</script>
|
||||
@ -25,7 +25,7 @@
|
||||
<el-input v-model="formData.name" clearable placeholder="请输入名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="图片" prop="image">
|
||||
<material-picker v-model="formData.image" />
|
||||
<material-picker v-model="formData.image" :limit="6" />
|
||||
</el-form-item>
|
||||
<el-form-item label="简介" prop="intro">
|
||||
<el-input v-model="formData.intro" clearable placeholder="请输入简介" />
|
||||
|
||||
@ -41,11 +41,11 @@
|
||||
<el-table-column label="分类" prop="categories" show-overflow-tooltip />
|
||||
<el-table-column label="单位" width="80" prop="unit.name" show-overflow-tooltip />
|
||||
<el-table-column label="名称" prop="name" show-overflow-tooltip />
|
||||
<el-table-column label="图片" width="80" prop="image">
|
||||
<!-- <el-table-column label="图片" width="80" prop="image">
|
||||
<template #default="{ row }">
|
||||
<el-image style="width:50px;height:50px;" :src="row.image" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table-column> -->
|
||||
<el-table-column label="商品类型" width="80" prop="product_type">
|
||||
<template #default="{ row }">
|
||||
<dict-value :options="dictData.product_type" :value="row.product_type" />
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user