feat(order): 重构订单页面- 新增 config.js 文件，定义订单搜索和表格配置
- 添加自定义搜索表单和内容组件 - 优化订单列表页面布局和功能 - 实现订单状态标签和操作按钮的自定义渲染
This commit is contained in:
parent
0e5f07eaf7
commit
5dcda80717
287
src/components/content/index.vue
Normal file
287
src/components/content/index.vue
Normal file
@ -0,0 +1,287 @@
|
|||||||
|
<template>
|
||||||
|
<div class="content">
|
||||||
|
<el-table
|
||||||
|
:border="!!config?.border"
|
||||||
|
:data="computedData"
|
||||||
|
ref="table"
|
||||||
|
row-key="nanoId"
|
||||||
|
v-bind="computedStyle"
|
||||||
|
:show-overflow-tooltip="config.tooltip"
|
||||||
|
:header-row-style="headerRowStyle"
|
||||||
|
:highlight-current-row="!!config.radio ? true : false"
|
||||||
|
:span-method="config?.spanMethod"
|
||||||
|
:tooltip-options="config?.tooltipOptions"
|
||||||
|
@current-change="handleTableCurrentChange"
|
||||||
|
@selection-change="hanldleTableSelectChange"
|
||||||
|
>
|
||||||
|
<el-table-column v-if="config.drag" label="排序" align="center" width="50px" prop="nanoId">
|
||||||
|
<!-- <template #default="{ row, column }"> -->
|
||||||
|
<!-- <span v-show="false">{{ row[column.property] }}</span> -->
|
||||||
|
<div class="move" style="width: 100%; height: 100%">
|
||||||
|
<svg-icon style="cursor: move" icon-class="move" />
|
||||||
|
</div>
|
||||||
|
<!-- </template> -->
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column v-if="config.select" type="selection" width="50px" />
|
||||||
|
<el-table-column
|
||||||
|
:index="indexMethod"
|
||||||
|
v-if="config.index"
|
||||||
|
type="index"
|
||||||
|
align="center"
|
||||||
|
width="50px"
|
||||||
|
label="序号"
|
||||||
|
/>
|
||||||
|
<template v-for="scheme in config.schemes" :key="scheme.attrs.label">
|
||||||
|
<el-table-column v-bind="scheme.attrs">
|
||||||
|
<template #default="{ row, column, $index }">
|
||||||
|
<slot
|
||||||
|
v-if="!!scheme.slot"
|
||||||
|
:name="scheme.slot"
|
||||||
|
:row="row"
|
||||||
|
:column="column"
|
||||||
|
:index="$index"
|
||||||
|
></slot>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</template>
|
||||||
|
<template #empty>
|
||||||
|
<el-empty description="获取数据为空" />
|
||||||
|
</template>
|
||||||
|
</el-table>
|
||||||
|
<div class="bottom">
|
||||||
|
<el-pagination
|
||||||
|
class="pagination"
|
||||||
|
v-show="isShow"
|
||||||
|
v-model:current-page="current"
|
||||||
|
v-model:page-size="size"
|
||||||
|
:background="props.background"
|
||||||
|
:layout="props.layout"
|
||||||
|
:total="props.total"
|
||||||
|
@size-change="handleSizeChange"
|
||||||
|
@current-change="handleCurrentChange"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { computed, onBeforeMount, onMounted, watch } from 'vue'
|
||||||
|
import Sortable from 'sortablejs'
|
||||||
|
import { nanoid } from '@/utils/jsencrypt'
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
data: {
|
||||||
|
type: Array,
|
||||||
|
default: () => []
|
||||||
|
},
|
||||||
|
config: {
|
||||||
|
type: Object,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
maxHeight: {
|
||||||
|
type: [String, Number],
|
||||||
|
default: () => ''
|
||||||
|
},
|
||||||
|
headerRowStyle: {
|
||||||
|
type: [Function, Object],
|
||||||
|
default: () => ({
|
||||||
|
background: '#F1F3F7'
|
||||||
|
})
|
||||||
|
},
|
||||||
|
showPagination: {
|
||||||
|
type: Boolean,
|
||||||
|
default: () => true
|
||||||
|
},
|
||||||
|
layout: {
|
||||||
|
type: String,
|
||||||
|
default: () => 'total, sizes, prev, pager, next, jumper'
|
||||||
|
},
|
||||||
|
background: {
|
||||||
|
type: Boolean,
|
||||||
|
default: () => true
|
||||||
|
},
|
||||||
|
minHieght: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
pageSize: {
|
||||||
|
type: Number,
|
||||||
|
default: () => 10
|
||||||
|
},
|
||||||
|
total: {
|
||||||
|
type: Number,
|
||||||
|
default: () => 400
|
||||||
|
},
|
||||||
|
currentPage: {
|
||||||
|
type: Number,
|
||||||
|
default: () => 1
|
||||||
|
}
|
||||||
|
})
|
||||||
|
const emits = defineEmits([
|
||||||
|
'update:page-size',
|
||||||
|
'update:current-page',
|
||||||
|
'update:checkData',
|
||||||
|
'selection',
|
||||||
|
'changePage',
|
||||||
|
'changeSize',
|
||||||
|
'rowSort'
|
||||||
|
])
|
||||||
|
|
||||||
|
const current = ref(props.currentPage)
|
||||||
|
const size = ref(props.pageSize)
|
||||||
|
const computedData = ref([])
|
||||||
|
const table = ref(null)
|
||||||
|
const isShow = computed(() => {
|
||||||
|
return props.showPagination && !!computedData.value.length
|
||||||
|
})
|
||||||
|
const computedStyle = computed(() => {
|
||||||
|
if (props.maxHeight) {
|
||||||
|
return {
|
||||||
|
'max-height': props.maxHeight
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
})
|
||||||
|
watch(
|
||||||
|
() => props.data,
|
||||||
|
(data) => {
|
||||||
|
// if (props.config.drag) {
|
||||||
|
computedData.value = data.map((item) => {
|
||||||
|
if (!item.nanoId) {
|
||||||
|
item.nanoId = nanoid()
|
||||||
|
}
|
||||||
|
return item
|
||||||
|
})
|
||||||
|
// } else {
|
||||||
|
// computedData.value = data
|
||||||
|
// }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
deep: true
|
||||||
|
}
|
||||||
|
)
|
||||||
|
watch(
|
||||||
|
() => current.value,
|
||||||
|
(newVal) => {
|
||||||
|
emits('update:current-page', newVal)
|
||||||
|
}
|
||||||
|
)
|
||||||
|
watch(
|
||||||
|
() => size.value,
|
||||||
|
(newVal) => {
|
||||||
|
emits('update:page-size', newVal)
|
||||||
|
}
|
||||||
|
)
|
||||||
|
watch(
|
||||||
|
() => props.currentPage,
|
||||||
|
(newVal) => {
|
||||||
|
current.value = newVal
|
||||||
|
}
|
||||||
|
)
|
||||||
|
watch(
|
||||||
|
() => props.pageSize,
|
||||||
|
(newVal) => {
|
||||||
|
size.value = newVal
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
function reset() {
|
||||||
|
current.value = 1
|
||||||
|
size.value = 10
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleSizeChange(v) {
|
||||||
|
emits('changeSize', v)
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleCurrentChange(v) {
|
||||||
|
emits('changePage', v)
|
||||||
|
}
|
||||||
|
function hanldleTableSelectChange(newSelection) {
|
||||||
|
console.log(newSelection, 'newSelection')
|
||||||
|
emits('selection', { newSelection })
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleTableCurrentChange(data) {
|
||||||
|
console.log(data, 'data')
|
||||||
|
emits('update:checkData', data)
|
||||||
|
}
|
||||||
|
|
||||||
|
function indexMethod(index) {
|
||||||
|
const cur = size.value * (current.value - 1) + index + 1
|
||||||
|
return cur
|
||||||
|
}
|
||||||
|
|
||||||
|
function rowDrag() {
|
||||||
|
const tbody = table.value.$refs.bodyWrapper.querySelector('tbody')
|
||||||
|
Sortable.create(tbody, {
|
||||||
|
ghostClass: 'sortable-ghost',
|
||||||
|
animation: 150,
|
||||||
|
handle: '.move',
|
||||||
|
onEnd: (event) => {
|
||||||
|
if (event.oldIndex !== undefined && event.newIndex !== undefined) {
|
||||||
|
let newArr = computedData.value
|
||||||
|
const curRow = newArr.splice(event.oldIndex, 1)[0]
|
||||||
|
newArr.splice(event.newIndex, 0, curRow)
|
||||||
|
computedData.value = [...newArr]
|
||||||
|
emits('rowSort', newArr)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
onBeforeMount(() => {
|
||||||
|
// if (props.config.drag) {
|
||||||
|
computedData.value = props.data.map((item) => {
|
||||||
|
if (!item.nanoId) {
|
||||||
|
item.nanoId = nanoid()
|
||||||
|
}
|
||||||
|
return item
|
||||||
|
})
|
||||||
|
// } else {
|
||||||
|
// computedData.value = props.data
|
||||||
|
// }
|
||||||
|
})
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
props.config.drag && rowDrag()
|
||||||
|
})
|
||||||
|
|
||||||
|
defineExpose({
|
||||||
|
table,
|
||||||
|
reset
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.content {
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 20px 20px 0 20px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
:deep(.el-table) {
|
||||||
|
.current-row {
|
||||||
|
background-color: #e5f1fd;
|
||||||
|
}
|
||||||
|
.sortable-ghost {
|
||||||
|
opacity: 1;
|
||||||
|
cursor: grab !important;
|
||||||
|
background-color: #ebf5ff !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.bottom {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-end;
|
||||||
|
.right {
|
||||||
|
margin-top: 20px;
|
||||||
|
flex: 1 0 auto;
|
||||||
|
}
|
||||||
|
.pagination {
|
||||||
|
margin-top: 20px;
|
||||||
|
height: 75px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
182
src/components/searchForm/index.vue
Normal file
182
src/components/searchForm/index.vue
Normal file
@ -0,0 +1,182 @@
|
|||||||
|
<template>
|
||||||
|
<div class="search-form">
|
||||||
|
<!-- 头部搜索栏 -->
|
||||||
|
<el-form v-model="formData" inline>
|
||||||
|
<el-form-item
|
||||||
|
v-for="(item, index) in searchFormData"
|
||||||
|
:key="index"
|
||||||
|
:label="item.label"
|
||||||
|
:prop="item.prop"
|
||||||
|
>
|
||||||
|
<template v-if="item.type === 'select'">
|
||||||
|
<template v-if="item.remote">
|
||||||
|
<el-select
|
||||||
|
v-model="formData[item.prop]"
|
||||||
|
:filterable="item.filterable ?? true"
|
||||||
|
remote
|
||||||
|
:placeholder="item.placeholder"
|
||||||
|
:remote-method="item.remoteMethod"
|
||||||
|
:clearable="item.clearable ?? true"
|
||||||
|
:remote-show-suffix="item.remoteShowSuffix ?? true"
|
||||||
|
:style="{ width: item.width || '100%' }"
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="val in options"
|
||||||
|
:key="val.value"
|
||||||
|
:label="val.label"
|
||||||
|
:value="val.value"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
<el-select
|
||||||
|
v-model="formData[item.prop]"
|
||||||
|
:filterable="item.filterable ?? true"
|
||||||
|
:placeholder="item.placeholder"
|
||||||
|
:clearable="item.clearable ?? true"
|
||||||
|
:style="{ width: item.width || '100%' }"
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="val in item.children.list"
|
||||||
|
:key="val.value"
|
||||||
|
:label="val.label"
|
||||||
|
:value="val.value"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
<template v-else-if="item.type === 'daterange'">
|
||||||
|
<el-date-picker
|
||||||
|
v-model="formData[item.prop]"
|
||||||
|
type="daterange"
|
||||||
|
range-separator="至"
|
||||||
|
start-placeholder="开始日期"
|
||||||
|
value-format="YYYY-MM-DD"
|
||||||
|
end-placeholder="结束日期"
|
||||||
|
:style="{ width: item.width || '100%' }"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
<template v-else-if="item.type === 'monthrange'">
|
||||||
|
<el-date-picker
|
||||||
|
v-model="formData[item.prop]"
|
||||||
|
type="monthrange"
|
||||||
|
range-separator="至"
|
||||||
|
start-placeholder="开始日期"
|
||||||
|
value-format="YYYY-MM"
|
||||||
|
end-placeholder="结束日期"
|
||||||
|
:style="{ width: item.width || '100%' }"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
<template v-else-if="item.type === 'treeSelect'">
|
||||||
|
<el-tree-select
|
||||||
|
filterable
|
||||||
|
v-model="formData[item.prop]"
|
||||||
|
:data="treeData"
|
||||||
|
placeholder="请选择"
|
||||||
|
:render-after-expand="false"
|
||||||
|
:style="{ width: item.width || '100%' }"
|
||||||
|
:props="defaultProps"
|
||||||
|
value-key="id"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
<component
|
||||||
|
:is="`el-${item.type}`"
|
||||||
|
v-model="formData[item.prop]"
|
||||||
|
:placeholder="item.placeholder"
|
||||||
|
:style="{ width: item.width || '100%' }"
|
||||||
|
>
|
||||||
|
</component>
|
||||||
|
</template>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item v-if="showBtn">
|
||||||
|
<el-button type="primary" @click="searchForm">查询</el-button>
|
||||||
|
<el-button @click="reset">重置</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { onBeforeMount, watch, watchEffect, ref, reactive } from 'vue'
|
||||||
|
let obj = {}
|
||||||
|
const props = defineProps({
|
||||||
|
/**
|
||||||
|
* @param {Array} search 搜索栏
|
||||||
|
*/
|
||||||
|
search: { type: Array, default: () => [] },
|
||||||
|
showBtn: {
|
||||||
|
type: Boolean,
|
||||||
|
default: () => true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
const treeData = ref([])
|
||||||
|
const defaultProps = { value: 'id', label: 'label', children: 'children' }
|
||||||
|
const options = ref([])
|
||||||
|
const formData = ref({})
|
||||||
|
const searchFormData = ref(props.search)
|
||||||
|
const emits = defineEmits(['searchData'])
|
||||||
|
watchEffect(() => {
|
||||||
|
const items = props.search
|
||||||
|
items.forEach((item) => {
|
||||||
|
obj[item.prop] = undefined
|
||||||
|
})
|
||||||
|
formData.value = JSON.parse(JSON.stringify(obj))
|
||||||
|
})
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => formData.value,
|
||||||
|
(newVal) => {
|
||||||
|
console.log('newVal', newVal, !props.showBtn)
|
||||||
|
!props.showBtn && searchForm()
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
function searchForm() {
|
||||||
|
emits('searchData', formData.value)
|
||||||
|
}
|
||||||
|
|
||||||
|
function reset() {
|
||||||
|
formData.value = JSON.parse(JSON.stringify(obj))
|
||||||
|
emits('resetData', formData.value)
|
||||||
|
}
|
||||||
|
|
||||||
|
function createRemoteMethod(fn) {
|
||||||
|
return async (query) => {
|
||||||
|
const res = await fn(query)
|
||||||
|
options.value = res.data
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// const getTreeData = async () => {
|
||||||
|
// const response = await getDeptTree()
|
||||||
|
// treeData.value = response
|
||||||
|
// }
|
||||||
|
|
||||||
|
onBeforeMount(() => {
|
||||||
|
// Object.keys(obj).includes('treeSelect') && getTreeData()
|
||||||
|
const findItem = searchFormData.value.find((item) => item.type === 'select' && item.remote)
|
||||||
|
if (findItem) {
|
||||||
|
findItem.remoteMethod = createRemoteMethod(findItem.remoteMethod)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.search-form{
|
||||||
|
background: white;
|
||||||
|
padding: 1rem;
|
||||||
|
//padding-bottom: 0;
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
}
|
||||||
|
div {
|
||||||
|
:deep(.el-form) {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
row-gap: 20px;
|
||||||
|
.el-form-item {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
80
src/config.js
Normal file
80
src/config.js
Normal file
@ -0,0 +1,80 @@
|
|||||||
|
export const ORDER_SEARCH_CONFIG = [
|
||||||
|
{
|
||||||
|
type: 'input',
|
||||||
|
prop:'orderId',
|
||||||
|
label: '订单号',
|
||||||
|
placeholder: '请输入',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'daterange',
|
||||||
|
prop: 'times',
|
||||||
|
label: '申请时间',
|
||||||
|
valueFormat: 'YYYY-MM-DD',
|
||||||
|
placeholder: '请选择申请时间',
|
||||||
|
startPlaceholder: '开始日期',
|
||||||
|
endPlaceholder: '结束日期',
|
||||||
|
rangeSeparator: '-'
|
||||||
|
},
|
||||||
|
]
|
||||||
|
// 经费申请列表
|
||||||
|
export const ORDER_TABLE_CONFIG = {
|
||||||
|
index: true,
|
||||||
|
schemes: [
|
||||||
|
{
|
||||||
|
attrs: {
|
||||||
|
label: '订单号',
|
||||||
|
prop: 'order_no',
|
||||||
|
align: 'center'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
attrs: {
|
||||||
|
label: '商品名称',
|
||||||
|
prop: 'name',
|
||||||
|
align: 'center'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
attrs: {
|
||||||
|
label: '价格',
|
||||||
|
align: 'center',
|
||||||
|
prop: 'price'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
attrs: {
|
||||||
|
label: '类型',
|
||||||
|
align: 'center',
|
||||||
|
prop: 'order_type'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
attrs: {
|
||||||
|
label: '状态',
|
||||||
|
prop: 'status',
|
||||||
|
align: 'center'
|
||||||
|
},
|
||||||
|
slot: 'status'
|
||||||
|
},{
|
||||||
|
attrs: {
|
||||||
|
label: '创建时间',
|
||||||
|
prop: 'CreatedAt',
|
||||||
|
align: 'center'
|
||||||
|
},
|
||||||
|
},{
|
||||||
|
attrs: {
|
||||||
|
label: '更新时间',
|
||||||
|
prop: 'UpdatedAt',
|
||||||
|
align: 'center'
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
attrs: {
|
||||||
|
label: '操作',
|
||||||
|
prop: 'operate',
|
||||||
|
align: 'center'
|
||||||
|
},
|
||||||
|
slot: 'operate'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
@ -1,92 +1,116 @@
|
|||||||
<template>
|
<template>
|
||||||
<div >
|
<div >
|
||||||
<data class="gva-search-box2">
|
<div class="searchForm">
|
||||||
<el-form :inline="true" ref="formRef" :model="paramsQuery" class="demo-form-inline">
|
<searchForm
|
||||||
<el-form-item label="订单号">
|
:search="ORDER_SEARCH_CONFIG"
|
||||||
<el-input v-model="paramsQuery.orderId" placeholder="请输入" clearable />
|
@searchData="searchData"
|
||||||
</el-form-item>
|
@resetData="resetData"
|
||||||
<el-form-item label="订单时间">
|
class="search-box searchForm"
|
||||||
<el-date-picker
|
/>
|
||||||
v-model="queryTime"
|
</div>
|
||||||
type="daterange"
|
|
||||||
unlink-panels
|
|
||||||
range-separator="至"
|
|
||||||
start-placeholder="开始时间"
|
|
||||||
end-placeholder="结束时间"
|
|
||||||
value-format="YYYY-MM-DD"
|
|
||||||
style="width:100%"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item>
|
|
||||||
<el-button type="primary" @click="onSubmit(formRef)">查询</el-button>
|
|
||||||
<el-button @click="reset(formRef)">重置</el-button>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</data>
|
|
||||||
<div class="gva-table-box">
|
<div class="gva-table-box">
|
||||||
<el-table :data="tableData" style="width: 100%">
|
<!-- <el-table :data="tableData" style="width: 100%">-->
|
||||||
<el-table-column type="index" label="序号" width="120" />
|
<!-- <el-table-column type="index" label="序号" width="120" />-->
|
||||||
<el-table-column prop="order_no" label="订单号" width="180" />
|
<!-- <el-table-column prop="order_no" label="订单号" width="180" />-->
|
||||||
<el-table-column prop="name" label="商品名称" />
|
<!-- <el-table-column prop="name" label="商品名称" />-->
|
||||||
<el-table-column prop="price" label="价格" />
|
<!-- <el-table-column prop="price" label="价格" />-->
|
||||||
<el-table-column prop="order_type" label="类型" />
|
<!-- <el-table-column prop="order_type" label="类型" />-->
|
||||||
<el-table-column prop="status" label="状态" />
|
<!-- <el-table-column prop="status" label="状态" />-->
|
||||||
<el-table-column prop="CreatedAt" label="创建时间" />
|
<!-- <el-table-column prop="CreatedAt" label="创建时间" />-->
|
||||||
<el-table-column prop="UpdatedAt" label="更新时间" />
|
<!-- <el-table-column prop="UpdatedAt" label="更新时间" />-->
|
||||||
<el-table-column label="操作" fixed="right" width="100">
|
<!-- <el-table-column label="操作" fixed="right" width="100">-->
|
||||||
<template #default="scope">
|
<!-- <template #default="scope">-->
|
||||||
<!-- <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button> -->
|
<!-- <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>-->
|
||||||
<el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
|
<!-- </template>-->
|
||||||
</template>
|
<!-- </el-table-column>-->
|
||||||
</el-table-column>
|
<!-- </el-table>-->
|
||||||
</el-table>
|
|
||||||
|
<Content
|
||||||
|
@changePage="changePage"
|
||||||
|
:total="total"
|
||||||
|
v-model:tabloading="tableLoading"
|
||||||
|
v-model:currentPage="queryParams.page"
|
||||||
|
v-model:pageSize="queryParams.pageSize"
|
||||||
|
:data="tableData"
|
||||||
|
:config="ORDER_TABLE_CONFIG"
|
||||||
|
>
|
||||||
|
<template #status="{ row }">
|
||||||
|
<el-tag :type="tag(row.status).type">{{ tag(row.status).label }}</el-tag>
|
||||||
|
</template>
|
||||||
|
<template #operate="{ row }">
|
||||||
|
<el-button type="text" @click="handleDetail(row)">详情</el-button>
|
||||||
|
<el-button type="text" @click="handleDelete(row)">删除</el-button>
|
||||||
|
</template>
|
||||||
|
</Content>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script setup>
|
<script setup>
|
||||||
|
import searchForm from '@/components/searchForm/index.vue'
|
||||||
|
import Content from '@/components/content/index.vue'
|
||||||
import {list} from '@/api/order'
|
import {list} from '@/api/order'
|
||||||
import { ref, reactive, onMounted } from 'vue'
|
import { ref, reactive, onMounted } from 'vue'
|
||||||
const formRef = ref()
|
import { ORDER_SEARCH_CONFIG, ORDER_TABLE_CONFIG } from '@/config'
|
||||||
const paramsQuery = reactive({
|
const tableLoading = ref(true), tableData = ref([{ status: 1 }])
|
||||||
|
const queryParams = reactive({
|
||||||
page: 1,
|
page: 1,
|
||||||
pageSize: 10,
|
pageSize: 10,
|
||||||
orderId: '',
|
orderId: '',
|
||||||
startTime: '',
|
startTime: '',
|
||||||
endTime: ''
|
endTime: ''
|
||||||
}), total = ref(0), queryTime = ref([])
|
}), total = ref(0)
|
||||||
const tableData = ref([])
|
const EMPTY_STR = '- -'
|
||||||
|
const tag = (status) => {
|
||||||
|
const map = {
|
||||||
|
1: { type: 'success', label: '已完成' },
|
||||||
|
2: { type: 'info', label: '待处理' },
|
||||||
|
3: { type: 'warning', label: '处理中' },
|
||||||
|
4: { type: 'danger', label: '已拒绝' }
|
||||||
|
}
|
||||||
|
return map[status] || { type: '', label: EMPTY_STR }
|
||||||
|
}
|
||||||
|
const searchData = (data) => {
|
||||||
|
if (data.times) {
|
||||||
|
data.startTime = data.times[0]
|
||||||
|
data.endTime = data.times[1]
|
||||||
|
}
|
||||||
|
queryParams.value.page = 1
|
||||||
|
queryParams.value = { ...queryParams.value, ...data }
|
||||||
|
delete queryParams.value.times
|
||||||
|
// console.log(queryParams.value)
|
||||||
|
getList()
|
||||||
|
}
|
||||||
|
const resetData = () => {
|
||||||
|
queryParams.value = {
|
||||||
|
page: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
}
|
||||||
|
getList()
|
||||||
|
}
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
getList()
|
getList()
|
||||||
})
|
})
|
||||||
|
|
||||||
async function getList() {
|
async function getList() {
|
||||||
const res = await list(paramsQuery)
|
const res = await list(queryParams)
|
||||||
if(res.code === 0) {
|
if(res.code === 0) {
|
||||||
tableData.value = res.data.list
|
tableData.value = res.data.list
|
||||||
total.value = res.data.total
|
total.value = res.data.total
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
function onSubmit() {
|
|
||||||
console.log(queryTime.value)
|
|
||||||
paramsQuery.startTime = queryTime.value[0]
|
|
||||||
paramsQuery.endTime = queryTime.value[1]
|
|
||||||
getList()
|
|
||||||
}
|
|
||||||
function reset(formEl) {
|
|
||||||
if (!formEl) return
|
|
||||||
formEl.resetFields()
|
|
||||||
getList()
|
|
||||||
}
|
|
||||||
function handleDelete(row) {
|
function handleDelete(row) {
|
||||||
console.log(row)
|
console.log(row)
|
||||||
}
|
}
|
||||||
|
function handleDetail(row) {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function changePage(data) {
|
||||||
|
queryParams.value.pageNum = data
|
||||||
|
getList()
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.demo-form-inline{
|
</style>
|
||||||
background: white;
|
|
||||||
padding: 1rem;
|
|
||||||
padding-bottom: 0;
|
|
||||||
margin-top: 0.5rem;
|
|
||||||
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user