<template>
|
<div>
|
<el-card style="margin: 10px;" class="affix-container">
|
<div>
|
<div style="display: flex;justify-content: space-between">
|
<div>
|
<b style="margin-right: 20px">{{ $t('menu.ActiveOrder') }}</b>
|
</div>
|
<div>
|
<el-input :placeholder="$t('message.PleaseInputKeyWords')" maxlength="64"
|
:prefix-icon="icon.Search"
|
clearable
|
size="default"
|
@clear="SearchData"
|
style="width: 200px;margin-right: 10px" v-model="searchValue.filter"
|
@keydown.enter.native="SearchData" :disabled="showAdvanceSearchView"></el-input>
|
<el-button type="primary" size="default" :icon="icon.Search" @click="SearchData"
|
:disabled="showAdvanceSearchView">
|
{{ $t('button.Search') }}
|
</el-button>
|
<el-button type="warning" size="default"
|
:icon="showAdvanceSearchView?icon.CaretTop:icon.CaretBottom"
|
@click="showAdvanceSearchView = !showAdvanceSearchView">
|
{{ $t('button.AdvancedSearch') }}
|
</el-button>
|
</div>
|
</div>
|
<transition name="slide-fade">
|
<div v-show="showAdvanceSearchView" class="advanced-search-box">
|
<el-form size="default" label-width="120px">
|
<el-row :style="{margin: '10px 0px 0px 0px'}">
|
<el-col :span="7">
|
<el-form-item :label="$t('label.Name')" :style="{marginBottom: '0px'}">
|
<el-input size="default" :prefix-icon="icon.Edit" maxlength="64"
|
style="width: 100%"
|
v-model="searchValue.name"/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="7">
|
<el-form-item :label="$t('label.Code')" :style="{marginBottom: '0px'}">
|
<el-input size="default" :prefix-icon="icon.Edit" maxlength="64"
|
style="width: 100%"
|
v-model="searchValue.code"/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="7">
|
<el-form-item :label="$t('label.VIPName')" :style="{marginBottom: '0px'}">
|
<el-input size="default" :prefix-icon="icon.Edit" maxlength="64"
|
style="width: 100%"
|
v-model="searchValue.vipname"/>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :style="{margin: '10px 0px 0px 0px'}">
|
<el-col :span="7">
|
<el-form-item :label="$t('label.VIPPhone')" :style="{marginBottom: '0px'}">
|
<el-input size="default" :prefix-icon="icon.Edit" maxlength="64"
|
style="width: 100%"
|
v-model="searchValue.vipphone"/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="14">
|
<el-form-item :label="$t('label.OrderTime')" prop="ordertime">
|
<el-date-picker
|
style="width: 100%"
|
size="default"
|
v-model="ordertimeduration"
|
type="daterange"
|
range-separator="-"
|
:start-placeholder="$t('label.DateFrom')"
|
:end-placeholder="$t('label.DateTo')"
|
format="YYYY-MM-DD"
|
value-format="YYYY-MM-DD 00:00:00"
|
>
|
</el-date-picker>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :style="{margin: '10px 0px 0px 0px'}">
|
<el-col :span="21" :style="{ textAlign: 'right'}" :offset="0">
|
<el-button size="default" :icon="icon.Search" type="primary"
|
@click="SearchData">
|
{{ $t('button.Search') }}
|
</el-button>
|
<el-button size="default" :icon="icon.Delete" type="info" plain
|
@click="ClearSearchData">
|
{{ $t('button.Clear') }}
|
</el-button>
|
<el-button size="default" :icon="icon.CircleClose" type="danger" plain
|
@click="showAdvanceSearchView = !showAdvanceSearchView">
|
{{ $t('button.Close') }}
|
</el-button>
|
</el-col>
|
</el-row>
|
</el-form>
|
</div>
|
</transition>
|
</div>
|
<el-divider :style="{'margin':'10px 0px'}"></el-divider>
|
<div>
|
<el-table
|
:data="entityList" stripe border
|
v-loading="loading"
|
element-loading-text="Loading..."
|
element-loading-spinner="el-icon-loading"
|
element-loading-background="rgba(0, 0, 0, 0.8)"
|
size="default"
|
:header-row-style="{height: '40px',color: 'var(--el-color-primary)',background: '#f5f4f4', }"
|
:header-cell-style="{height: '40px', margin: '0px', padding: '0px', background: 'transparent'}"
|
:row-style="{height: '30px', margin: '0px', padding: '0px',}"
|
:cell-style="{height: '30px',margin: '0px', padding: '0px',}"
|
@row-dblclick="showEditView">
|
<el-table-column type="index" fixed :label="$t('label.Index')" width="65"></el-table-column>
|
<el-table-column prop="no" sortable align="left" :label="$t('label.Code')" width="150"/>
|
<el-table-column prop="status" sortable :label="$t('label.Status')" align="left" width="100">
|
<template #default="scope">
|
<el-tag v-if="scope.row.status===0" type="warning">{{ $t('label.Defined') }}</el-tag>
|
<el-tag v-else-if="scope.row.status===1" type="warning">{{ $t('label.Delivered') }}</el-tag>
|
<el-tag v-else-if="scope.row.status===2" type="warning">{{ $t('label.Received') }}</el-tag>
|
<el-tag v-else-if="scope.row.status===3" type="danger">{{ $t('label.Rejected') }}</el-tag>
|
<el-tag v-else-if="scope.row.status===4" type="success">{{ $t('label.Paid') }}</el-tag>
|
<el-tag v-else-if="scope.row.status===5" type="info">{{ $t('label.Commented') }}</el-tag>
|
<el-tag v-else-if="scope.row.status===5" type="info">{{ $t('label.Completed') }}</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column prop="vipname" align="left" :label="$t('label.VIPName')" width="150"/>
|
<el-table-column prop="vipphone" align="left" :label="$t('label.VIPPhone')" width="150"/>
|
<el-table-column prop="vipdiamondtype" align="left" :label="$t('label.VIPDiamondType')" width="150">
|
<template #default="scope">
|
<label v-if="scope.row.vipdiamondtype===0">
|
<svg-icon name="vip-silver" color="" width="20" height="20"></svg-icon>
|
<span> {{ $t('label.SilverMember') }}</span>
|
</label>
|
<label v-else-if="scope.row.vipdiamondtype===1">
|
<svg-icon name="vip-gold" color="" width="20" height="20"></svg-icon>
|
<span> {{ $t('label.GoldMember') }}</span>
|
</label>
|
<label v-else-if="scope.row.vipdiamondtype===2">
|
<svg-icon name="vip-diamond" color="" width="20" height="20"></svg-icon>
|
<span> {{ $t('label.DiamondMember') }}</span>
|
</label>
|
<label v-else-if="scope.row.vipdiamondtype===3">
|
<svg-icon name="vip-exclusive" color="" width="20" height="20"></svg-icon>
|
<span> {{ $t('label.ExclusiveMember') }}</span>
|
</label>
|
<label v-else>--</label>
|
</template>
|
</el-table-column>
|
|
<el-table-column prop="totalmoney" align="right" :label="$t('label.Amount')" width="150"/>
|
<el-table-column prop="payedmoney" align="right" :label="$t('label.PayedMoney')" width="150"/>
|
<el-table-column prop="paymentmethod" align="left" :label="$t('label.PaymentMethod')" width="150">
|
<template #default="scope">
|
<label v-if="scope.row.paymentmethod===0">
|
<svg-icon name="account-balance" color="" width="20" height="20"></svg-icon>
|
<span> {{ $t('label.AccountBalancePay') }}</span>
|
</label>
|
<label v-else-if="scope.row.paymentmethod===1">
|
<svg-icon name="alipay-pay" color="" width="20" height="20"></svg-icon>
|
<span> {{ $t('label.AliPay') }}</span>
|
</label>
|
<label v-else-if="scope.row.paymentmethod===2">
|
<svg-icon name="wechat-pay" color="" width="20" height="20"></svg-icon>
|
<span> {{ $t('label.WeChatPay') }}</span>
|
</label>
|
<label v-else-if="scope.row.paymentmethod===3">
|
<svg-icon name="bank-pay" color="" width="20" height="20"></svg-icon>
|
<span> {{ $t('label.BankPay') }}</span>
|
</label>
|
<label v-else>--</label>
|
</template>
|
</el-table-column>
|
<el-table-column prop="discountmoney" align="right" :label="$t('label.DiscountMoney')" width="150"/>
|
|
<el-table-column prop="ordertime" width="160" align="left"
|
:label="$t('label.OrderTime')"
|
:formatter="formatterDatetime"/>
|
<el-table-column prop="paytime" width="160" align="left"
|
:label="$t('label.PayTime')"
|
:formatter="formatterDatetime"/>
|
<el-table-column prop="completetime" width="160" align="left"
|
:label="$t('label.CompleteTime')"
|
:formatter="formatterDatetime"/>
|
|
<el-table-column prop="createtime" width="150" align="left" :label="$t('label.CreateTime')"
|
:formatter="formatterDatetime"/>
|
<el-table-column prop="remark" min-width="500" width="*" align="left"
|
:label="$t('label.Remark')"></el-table-column>
|
<el-table-column fixed="right" width="110" :label="$t('label.Operation')">
|
<template #default="scope">
|
<el-button @click="showEditView(scope.row)" :icon="icon.Edit"
|
size="small"
|
type="primary" circle>
|
</el-button>
|
<el-button @click="deleteItem(scope.row)" :icon="icon.Delete"
|
size="small"
|
type="danger" circle>
|
</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<el-affix position="bottom" :offset="10" target=".affix-container">
|
<div style="background: white;padding-bottom:10px;">
|
<el-divider :style="{'margin':'10px 0px'}"></el-divider>
|
<div style="margin-top:10px; display: flex;justify-content: flex-end">
|
<el-pagination
|
:currentPage="pageIndex"
|
:page-size="pageSize"
|
background
|
@current-change="currentChange"
|
@size-change="sizeChange"
|
:page-sizes="[10, 20, 50, 100, 200]"
|
layout="sizes, prev, pager, next, jumper, ->, total, slot"
|
:total="total">
|
</el-pagination>
|
</div>
|
</div>
|
</el-affix>
|
</div>
|
</el-card>
|
</div>
|
</template>
|
|
<script>
|
|
import * as icon from '@element-plus/icons-vue'
|
import {onMounted, onBeforeUnmount, getCurrentInstance, reactive, toRefs} from "vue";
|
import {formatDate, GetDateStr, GetDateTimeStr} from '../../../utils/common'
|
import {GetActiveOrders, UpdateActiveOrder, CreateActiveOrder, DeleteActiveOrder} from "../../../api/admin/order"
|
import {useBasicInfoStore} from "../../../store/basicInfo";
|
|
export default {
|
name: "ActiveOrder",
|
components: {},
|
setup() {
|
let {proxy} = getCurrentInstance();
|
const store = useBasicInfoStore();
|
const state = reactive({
|
//common properties
|
title: '',
|
total: 0,
|
pageIndex: 1,
|
pageSize: store.config.ListSize,
|
loading: false,
|
windowWidth: document.documentElement.clientWidth,
|
windowHeight: document.documentElement.clientHeight,
|
showAdvanceSearchView: false,
|
searchValue: {
|
filter: "",
|
code: "",
|
name: "",
|
vipname: "",
|
vipphone: "",
|
vipdiamondtype: "",
|
},
|
ordertimeduration: [],
|
entityList: [],
|
entity: {
|
id: null,
|
no: null,
|
totalmoney: null,
|
payedmoney: null,
|
paymentmethod: null,
|
discountmoney: null,
|
status: null,
|
ordertime: null,
|
paytime: null,
|
sendtime: null,
|
receivetime: null,
|
commenttime: null,
|
completetime: null,
|
isdeleted: null,
|
remark: null,
|
createtime: null,
|
updatetime: null,
|
sendername: null,
|
sendercode: null,
|
sendercontactno: null,
|
targetaddress: null,
|
deliveryaddress: null,
|
optimalcoupon: null,
|
logisticscompany: null,
|
logisticsno: null,
|
transportmode: null,
|
boxcount: null,
|
boxweight: null,
|
freight: null,
|
commentcontent: null,
|
commentlevel: null,
|
receiverid: null,
|
vipuserId: null,
|
vipname: null,
|
vipphone: null,
|
vipdiamondtype: null,
|
viptype: null,
|
vippicture: null,
|
vipcarddiscountrate: null,
|
},
|
rules: {
|
name: [{
|
required: true,
|
message: `${proxy.$t('message.IsRequired', {name: proxy.$t('label.Name')})}`,
|
}],
|
}
|
});
|
|
onMounted(() => {
|
Init();
|
LoadData();
|
});
|
onBeforeUnmount(() => {
|
|
});
|
|
const Init = () => {
|
InitOrderTimeDuration();
|
};
|
|
const InitOrderTimeDuration = () => {
|
let nowfrom = new Date();
|
let datefrom = GetDateTimeStr(nowfrom, 0, 0, 0);
|
|
let nowto = new Date();
|
let dateto = GetDateTimeStr(nowto, 0, 0, 1);
|
|
state.ordertimeduration = [datefrom, dateto];
|
};
|
|
const sizeChange = (currentSize) => {
|
state.pageSize = currentSize;
|
store.config.ListSize = state.pageSize;
|
LoadData();
|
};
|
const currentChange = (currentPage) => {
|
state.pageIndex = currentPage;
|
LoadData();
|
};
|
const clearAddOrEditModel = () => {
|
InitOrderTimeDuration();
|
state.entity = {
|
id: null,
|
no: null,
|
totalmoney: null,
|
payedmoney: null,
|
paymentmethod: null,
|
discountmoney: null,
|
status: null,
|
ordertime: null,
|
paytime: null,
|
sendtime: null,
|
receivetime: null,
|
commenttime: null,
|
completetime: null,
|
isdeleted: null,
|
remark: null,
|
createtime: null,
|
updatetime: null,
|
sendername: null,
|
sendercode: null,
|
sendercontactno: null,
|
targetaddress: null,
|
deliveryaddress: null,
|
optimalcoupon: null,
|
logisticscompany: null,
|
logisticsno: null,
|
transportmode: null,
|
boxcount: null,
|
boxweight: null,
|
freight: null,
|
commentcontent: null,
|
commentlevel: null,
|
receiverid: null,
|
vipuserId: null,
|
vipname: null,
|
vipphone: null,
|
vipdiamondtype: null,
|
viptype: null,
|
vippicture: null,
|
vipcarddiscountrate: null,
|
}
|
};
|
const getSearchCondition = () => {
|
let condition;
|
if (!state.showAdvanceSearchView) {
|
condition = {
|
pageIndex: state.pageIndex,
|
pageSize: state.pageSize,
|
filter: state.searchValue.filter,
|
permissionLevel: store.config.permissionLevel,
|
}
|
} else {
|
condition = {
|
pageIndex: state.pageIndex,
|
pageSize: state.pageSize,
|
code: state.searchValue.code,
|
name: state.searchValue.name,
|
vipname: state.searchValue.vipname,
|
vipphone: state.searchValue.vipphone,
|
vipdiamondtype: state.searchValue.vipdiamondtype,
|
}
|
if (state.ordertimeduration && state.ordertimeduration.length > 1) {
|
condition.startDateTime = state.ordertimeduration[0];
|
condition.endDateTime = state.ordertimeduration[1];
|
|
let newSDT = new Date(condition.startDateTime);
|
newSDT.setHours(0);
|
newSDT.setMinutes(0);
|
newSDT.setSeconds(0);
|
|
condition.startDateTime = formatDate(newSDT, "yyyy-MM-dd hh:mm:ss");
|
|
//add 23:59:59 to end date time.
|
let newEDT = new Date(condition.endDateTime);
|
newEDT.setHours(23);
|
newEDT.setMinutes(59);
|
newEDT.setSeconds(59);
|
|
condition.endDateTime = formatDate(newEDT, "yyyy-MM-dd hh:mm:ss");
|
}
|
}
|
|
return condition;
|
};
|
const LoadData = () => {
|
state.loading = true;
|
let condition = getSearchCondition();
|
|
GetActiveOrders(condition).then(resp => {
|
state.loading = false;
|
if (resp.data) {
|
state.entityList = resp.data.data;
|
state.total = resp.data.total;
|
}
|
}).catch(err => {
|
console.error(err);
|
});
|
};
|
const SearchData = () => {
|
state.pageIndex = 1;
|
LoadData();
|
};
|
const ClearSearchData = () => {
|
state.searchValue = {
|
filter: "",
|
code: "",
|
name: "",
|
vipname: "",
|
vipphone: "",
|
vipdiamondtype: "",
|
};
|
};
|
|
const showEditView = (data) => {
|
store.$state.order = data;
|
proxy.$router.push(
|
{
|
path: '../../admin/order/ActiveOrderDetail',
|
query: {
|
orderid: data.id
|
}
|
});
|
};
|
|
const deleteItem = (data) => {
|
proxy.$confirm(`${proxy.$t('message.AreYouSureToRemove')}`, `${proxy.$t('label.SystemConfirm')}`, {
|
confirmButtonText: `${proxy.$t('button.Yes')}`,
|
cancelButtonText: `${proxy.$t('button.No')}`,
|
confirmButtonClass: 'confirmButtonClass',
|
cancelButtonClass: 'cancelButtonClass',
|
type: 'warning',
|
center: true
|
}).then(() => {
|
state.loading = true;
|
DeleteActiveOrder(data.id)
|
.then(resp => {
|
if (resp) {
|
LoadData();
|
}
|
state.loading = false;
|
})
|
.catch(error => {
|
console.error(error);
|
state.loading = false;
|
proxy.$message.error({message: error});
|
});
|
}).catch((error) => {
|
console.error(error)
|
});
|
};
|
|
//formatter
|
const formatterDatetime = (row, column) => {
|
let date = null;
|
switch (column.property) {
|
case "createtime":
|
if (!row.createtime)
|
return null;
|
date = new Date(row.createtime);
|
break;
|
case "ordertime":
|
if (!row.ordertime)
|
return null;
|
date = new Date(row.ordertime);
|
break;
|
case "paytime":
|
if (!row.paytime)
|
return null;
|
date = new Date(row.paytime);
|
break;
|
case "completetime":
|
if (!row.completetime)
|
return null;
|
date = new Date(row.completetime);
|
break;
|
case "actiontime":
|
if (!row.actiontime)
|
return null;
|
date = new Date(row.actiontime);
|
break;
|
case "validdateto":
|
if (!row.validdateto)
|
return null;
|
date = new Date(row.validdateto);
|
break;
|
case "validdatefrom":
|
if (!row.validdatefrom)
|
return null;
|
date = new Date(row.validdatefrom);
|
break;
|
}
|
|
return formatDate(date, 'yyyy-MM-dd hh:mm');
|
};
|
const formatterStatusBoolean = (row, column) => {
|
var ret = ''
|
if (row.status) {
|
ret = "Valid";
|
} else {
|
ret = "Invalid";
|
}
|
return ret;
|
};
|
const capitalize = (value) => {
|
if (!value) return ''
|
value = value.toString()
|
return value.charAt(0).toUpperCase() + value.slice(1)
|
};
|
|
return {
|
...toRefs(state),
|
LoadData,
|
sizeChange,
|
currentChange,
|
clearAddOrEditModel,
|
SearchData,
|
showEditView,
|
deleteItem,
|
ClearSearchData,
|
formatterDatetime,
|
formatterStatusBoolean,
|
capitalize,
|
icon
|
}
|
},
|
}
|
</script>
|
|
<style>
|
.el-transfer-panel {
|
height: 350px;
|
width: 300px;
|
}
|
|
.el-transfer-panel__body {
|
height: 350px;
|
width: 300px;
|
}
|
|
.el-transfer-panel__list {
|
height: 350px;
|
width: 300px;
|
}
|
|
.el-transfer-panel__list.is-filterable {
|
height: 250px;
|
width: 300px;
|
}
|
</style>
|
