193 lines
7.3 KiB
Vue
193 lines
7.3 KiB
Vue
<template>
|
|
<div>
|
|
<el-form class="mb-[-16px]" :model="queryParams" inline>
|
|
<el-form-item label="订单号" prop="order_id">
|
|
<el-input
|
|
class="w-[280px]"
|
|
v-model="queryParams.order_id"
|
|
@keydown.enter="resetPage"
|
|
clearable
|
|
placeholder="请输入订单号"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="门店" prop="store_id">
|
|
<el-select
|
|
v-model="queryParams.store_id"
|
|
filterable
|
|
remote
|
|
reserve-keyword
|
|
placeholder="输入门店名称搜索"
|
|
remote-show-suffix
|
|
:remote-method="remoteMethod"
|
|
:loading="storeloading"
|
|
style="width: 240px"
|
|
@change="resetPage"
|
|
>
|
|
<el-option
|
|
v-for="item in storeList"
|
|
:key="item.id"
|
|
:label="item.name"
|
|
:value="item.id"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="日期" prop="order_id">
|
|
<el-date-picker
|
|
v-model="startEndTime"
|
|
type="daterange"
|
|
range-separator="至"
|
|
start-placeholder="开始日期"
|
|
end-placeholder="结束日期"
|
|
unlink-panels
|
|
@change="changeStartEndTime"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="支付方式" prop="pay_type">
|
|
<el-select
|
|
class="w-[280px]"
|
|
v-model="queryParams.pay_type"
|
|
placeholder="请选择支付方式"
|
|
@change="resetPage"
|
|
>
|
|
<el-option
|
|
:label="item.name"
|
|
:value="item.value"
|
|
v-for="item in dictData.pay_type"
|
|
:key="item.value"
|
|
/>
|
|
</el-select>
|
|
</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>
|
|
<div class="mt-4" v-loading="pager.loading">
|
|
<el-table :data="pager.lists" @selection-change="handleSelectionChange" :height="300">
|
|
<el-table-column type="selection" width="55" />
|
|
<el-table-column label="订单ID" prop="id" show-overflow-tooltip />
|
|
<el-table-column label="订单号" prop="order_id" show-overflow-tooltip />
|
|
<el-table-column label="门店" prop="store_name" show-overflow-tooltip />
|
|
<el-table-column label="用户" prop="nickname" show-overflow-tooltip />
|
|
<el-table-column label="实际支付金额" prop="pay_price" show-overflow-tooltip />
|
|
<el-table-column label="订单状态" prop="status_name">
|
|
<template #default="{ row }">
|
|
<div v-if="row.refund_status == 2">
|
|
<el-tag type="danger">已退款</el-tag>
|
|
</div>
|
|
<div v-else>
|
|
<el-tag v-if="row.status_name == '待收货'" type="success">{{
|
|
row.status_name
|
|
}}</el-tag>
|
|
<el-tag
|
|
v-else-if="
|
|
row.status_name == '已收货' || row.status_name == '已完成'
|
|
"
|
|
type="info"
|
|
>{{ row.status_name }}</el-tag
|
|
>
|
|
<el-tag
|
|
v-else-if="
|
|
row.status_name == '待发货' || row.status_name == '待核销'
|
|
"
|
|
type="warning"
|
|
>{{ row.status_name }}</el-tag
|
|
>
|
|
<el-tag v-else type="danger">{{ row.status_name }}</el-tag>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="支付方式" prop="pay_type" show-overflow-tooltip>
|
|
<template #default="{ row }">
|
|
<dict-value :options="dictData.pay_type" :value="row.pay_type"></dict-value>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="支付时间" prop="pay_time" show-overflow-tooltip />
|
|
</el-table>
|
|
</div>
|
|
<div class="flex mt-4 justify-end">
|
|
<pagination v-model="pager" @change="getLists" />
|
|
</div>
|
|
<el-button class="w-full mt-4" type="primary" @click="bindStore">添加订单</el-button>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup name="systemStoreLists">
|
|
import { usePaging } from '@/hooks/usePaging'
|
|
import { useDictData } from '@/hooks/useDictOptions'
|
|
import { apiStoreOrderLists } from '@/api/store_order'
|
|
import { timeFormat } from '@/utils/util'
|
|
import feedback from '@/utils/feedback'
|
|
import { ElMessage } from 'element-plus'
|
|
import { apiSystemStoreLists } from '@/api/system_store'
|
|
import moment from 'moment'
|
|
|
|
const props = defineProps<{
|
|
store_id: string
|
|
}>()
|
|
|
|
// 查询条件
|
|
const queryParams = reactive({
|
|
order_id: '',
|
|
pay_type: '',
|
|
store_id: '',
|
|
start_time: '',
|
|
end_time: '',
|
|
is_merge: 0
|
|
})
|
|
|
|
// 选中数据
|
|
const selectData = ref<any[]>([])
|
|
|
|
// 表格选择后回调事件
|
|
const handleSelectionChange = (val: any[]) => {
|
|
selectData.value = val.map(({ id }) => id)
|
|
}
|
|
|
|
// 获取字典数据
|
|
const { dictData } = useDictData('')
|
|
const storeloading = ref(false)
|
|
const storeList = ref([])
|
|
const remoteMethod = (e = '') => {
|
|
storeloading.value = true
|
|
apiSystemStoreLists({
|
|
name: e,
|
|
page_size: 50
|
|
})
|
|
.then((res) => {
|
|
storeList.value = res.lists
|
|
setTimeout(() => {
|
|
storeloading.value = false
|
|
}, 300)
|
|
})
|
|
.catch((err) => {
|
|
setTimeout(() => {
|
|
storeloading.value = false
|
|
}, 300)
|
|
})
|
|
}
|
|
const { pager, getLists, resetParams, resetPage } = usePaging({
|
|
fetchFun: apiStoreOrderLists,
|
|
params: queryParams
|
|
})
|
|
getLists()
|
|
const startEndTime = ref([])
|
|
const changeStartEndTime = () => {
|
|
if (startEndTime.value[0] && startEndTime.value[1]) {
|
|
queryParams.start_time = moment(startEndTime.value[0]).format('YYYY-MM-DD') + ' 00:00:00'
|
|
queryParams.end_time = moment(startEndTime.value[1]).format('YYYY-MM-DD') + ' 23:59:59'
|
|
} else {
|
|
queryParams.start_time = ''
|
|
queryParams.end_time = ''
|
|
}
|
|
getLists()
|
|
}
|
|
const emits = defineEmits(['onBindOrder'])
|
|
// 绑定用户
|
|
const bindStore = () => {
|
|
const list = pager.lists.filter((item) => selectData.value.includes(item.id))
|
|
if (!list.length) return ElMessage.error('请先选择订单')
|
|
emits('onBindOrder', list)
|
|
}
|
|
</script>
|