<template>
|
<div>
|
<el-card style="margin: 10px;" class="affix-container">
|
<el-row>
|
<el-col :span="12" align="left">
|
<div>
|
<div style="display: flex;justify-content: space-between">
|
<div>
|
<el-button link type="primary" @click="GoBack" :icon="icon.Back" size="default"
|
style="margin-right: 15px">
|
{{ $t('button.Back') }}
|
</el-button>
|
<b style="margin-right: 20px">{{ $t('menu.ActiveOrderDetail') }}</b>
|
</div>
|
<div>
|
|
</div>
|
</div>
|
</div>
|
</el-col>
|
<el-col :span="12" align="right">
|
|
</el-col>
|
</el-row>
|
<el-divider :style="{ 'margin': '10px 0px' }"></el-divider>
|
<el-row>
|
<el-col :span="24" align="left">
|
<el-form :model="entity" size="default" :rules="rules" ref="dialogForm" label-width="120px"
|
style="margin-top: 15px;">
|
<el-row>
|
<el-col :span="7">
|
<el-form-item :label="$t('label.OrderNo')" prop="no">
|
{{ entity.no }}
|
</el-form-item>
|
</el-col>
|
<el-col :span="7">
|
<el-form-item :label="$t('label.Status')" prop="status">
|
<el-tag v-if="entity.status===0" type="warning">
|
{{ $t('label.Defined') }}
|
</el-tag>
|
<el-tag v-else-if="entity.status===1" type="warning">
|
{{ $t('label.Delivered') }}
|
</el-tag>
|
<el-tag v-else-if="entity.status===2" type="warning">
|
{{ $t('label.Received') }}
|
</el-tag>
|
<el-tag v-else-if="entity.status===3" type="danger">
|
{{ $t('label.Rejected') }}
|
</el-tag>
|
<el-tag v-else-if="entity.status===4" type="success">
|
{{ $t('label.Paid') }}
|
</el-tag>
|
<el-tag v-else-if="entity.status===5" type="info">
|
{{ $t('label.Commented') }}
|
</el-tag>
|
<el-tag v-else-if="entity.status===5" type="info">
|
{{ $t('label.Completed') }}
|
</el-tag>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="7">
|
<el-form-item :label="$t('label.Amount')" prop="totalmoney">
|
<b style="margin-right: 20px; color: var(--el-color-primary)">{{ entity.totalmoney }}</b>
|
</el-form-item>
|
</el-col>
|
<el-col :span="7">
|
<el-form-item :label="$t('label.PayedMoney')" prop="payedmoney">
|
<b style="margin-right: 20px; color: var(--el-color-primary)">{{ entity.payedmoney }}</b>
|
</el-form-item>
|
</el-col>
|
<el-col :span="7">
|
<el-form-item :label="$t('label.PaymentMethod')" prop="paymentmethod">
|
<label v-if="entity.paymentmethod===0">
|
<svg-icon name="account-balance" color="" width="20" height="20"></svg-icon>
|
<span> {{ $t('label.AccountBalancePay') }}</span>
|
</label>
|
<label v-else-if="entity.paymentmethod===1">
|
<svg-icon name="alipay-pay" color="" width="20" height="20"></svg-icon>
|
<span> {{ $t('label.AliPay') }}</span>
|
</label>
|
<label v-else-if="entity.paymentmethod===2">
|
<svg-icon name="wechat-pay" color="" width="20" height="20"></svg-icon>
|
<span> {{ $t('label.WeChatPay') }}</span>
|
</label>
|
<label v-else-if="entity.paymentmethod===3">
|
<svg-icon name="bank-pay" color="" width="20" height="20"></svg-icon>
|
<span> {{ $t('label.BankPay') }}</span>
|
</label>
|
<label v-else>--</label>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
</el-col>
|
</el-row>
|
</el-card>
|
<el-row>
|
<el-col :span="8">
|
<el-card :style="{'margin':'0px 10px 10px 10px'}">
|
<el-form :model="entity" size="default" :rules="rules" ref="dialogForm" label-width="120px">
|
<el-row>
|
<el-col :span="12" align="left">
|
<div>
|
<div style="display: flex;justify-content: space-between">
|
<div>
|
<svg-icon name="vip-master" width="20" height="20" color=""/>
|
<b style="margin-right: 20px">{{ $t('label.VIPInfo') }}</b>
|
</div>
|
<div>
|
|
</div>
|
</div>
|
</div>
|
</el-col>
|
<el-col :span="12" align="right">
|
|
</el-col>
|
</el-row>
|
<el-divider :style="{ 'margin': '10px 0px' }"></el-divider>
|
<el-row>
|
<el-col :span="24">
|
<el-form-item :label="$t('label.VIPName')" prop="vipname">
|
{{ entity.vipname }}
|
</el-form-item>
|
</el-col>
|
<el-col :span="24">
|
<el-form-item :label="$t('label.VIPPhone')" prop="vipphone">
|
{{ entity.vipphone }}
|
</el-form-item>
|
</el-col>
|
<el-col :span="24">
|
<el-form-item :label="$t('label.VIPDiamondType')" prop="vipdiamondtype">
|
<label v-if="entity.vipdiamondtype===0">
|
<svg-icon name="vip-silver" color="" width="20" height="20"></svg-icon>
|
<span> {{ $t('label.SilverMember') }}</span>
|
</label>
|
<label v-else-if="entity.vipdiamondtype===1">
|
<svg-icon name="vip-gold" color="" width="20" height="20"></svg-icon>
|
<span> {{ $t('label.GoldMember') }}</span>
|
</label>
|
<label v-else-if="entity.vipdiamondtype===2">
|
<svg-icon name="vip-diamond" color="" width="20" height="20"></svg-icon>
|
<span> {{ $t('label.DiamondMember') }}</span>
|
</label>
|
<label v-else-if="entity.vipdiamondtype===3">
|
<svg-icon name="vip-exclusive" color="" width="20" height="20"></svg-icon>
|
<span> {{ $t('label.ExclusiveMember') }}</span>
|
</label>
|
<label v-else>--</label>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
</el-card>
|
</el-col>
|
<el-col :span="16">
|
<el-card :style="{'margin':'0px 10px 10px 0px'}">
|
<el-form :model="entity" size="default" :rules="rules" ref="dialogForm" label-width="120px">
|
<el-row>
|
<el-col :span="12" align="left">
|
<div>
|
<div style="display: flex;justify-content: space-between">
|
<div>
|
<svg-icon name="timesheet" width="20" height="20" color=""/>
|
<b style="margin-right: 20px">{{ $t('label.Timesheet') }}</b>
|
</div>
|
<div>
|
|
</div>
|
</div>
|
</div>
|
</el-col>
|
<el-col :span="12" align="right">
|
|
</el-col>
|
</el-row>
|
<el-divider :style="{ 'margin': '10px 0px' }"></el-divider>
|
<el-row>
|
<el-col :span="12">
|
<el-form-item :label="$t('label.CreateTime')" prop="createtime">
|
<svg-icon name="timesheet" width="16" height="16" color=""/>
|
{{ formatterDatetime2(entity.createtime) }}
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item :label="$t('label.OrderTime')" prop="ordertime">
|
<svg-icon name="timesheet" width="16" height="16" color=""/>
|
{{ formatterDatetime2(entity.ordertime) }}
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item :label="$t('label.PayTime')" prop="paytime">
|
<svg-icon name="timesheet" width="16" height="16" color=""/>
|
{{ formatterDatetime2(entity.paytime) }}
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item :label="$t('label.ReceiveTime')" prop="receivetime">
|
<svg-icon name="timesheet" width="16" height="16" color=""/>
|
{{ formatterDatetime2(entity.receivetime) }}
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item :label="$t('label.CommentTime')" prop="commenttime">
|
<svg-icon name="timesheet" width="16" height="16" color=""/>
|
{{ formatterDatetime2(entity.commenttime) }}
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item :label="$t('label.CompleteTime')" prop="completetime">
|
<svg-icon name="timesheet" width="16" height="16" color=""/>
|
{{ formatterDatetime2(entity.completetime) }}
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
</el-card>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="16">
|
<el-card :style="{'margin':'0px 10px 10px 10px'}">
|
<el-row>
|
<el-col :span="12" align="left">
|
<div>
|
<div style="display: flex;justify-content: space-between">
|
<div>
|
<svg-icon name="product-master" width="20" height="20" color=""/>
|
<b style="margin-right: 20px">{{ $t('menu.OrderProduct') }}</b>
|
</div>
|
<div>
|
|
</div>
|
</div>
|
</div>
|
</el-col>
|
<el-col :span="12" align="right">
|
|
</el-col>
|
</el-row>
|
<el-divider :style="{ 'margin': '10px 0px' }"></el-divider>
|
<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',}">
|
<el-table-column type="selection" width="40"></el-table-column>
|
<el-table-column type="index" :label="$t('label.Index')" width="65"/>
|
<el-table-column prop="image" align="center" :label="$t('label.ProductImage')" width="150">
|
<template #default="scope">
|
<svg-icon v-if="!scope.row.image" name="product" width="60" height="60"
|
style="margin: 10px"
|
color="var(--el-border-color-light)"/>
|
<el-image v-else
|
style="width: 60px; height: 60px; margin: 10px"
|
:src="scope.row.image"
|
:preview-src-list="[scope.row.image]"
|
:z-index="1000"
|
fit="cover"
|
/>
|
</template>
|
</el-table-column>
|
<el-table-column prop="productname" :label="$t('label.ProductName')" width="180"/>
|
<el-table-column prop="productcode" :label="$t('label.ProductCode')" width="120"/>
|
<el-table-column prop="color" :label="$t('label.ProductColor')" width="100"/>
|
<el-table-column prop="size" :label="$t('label.ProductSize')" width="100"/>
|
<el-table-column prop="price" :label="$t('label.Price')" width="100"/>
|
<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="warning">{{ $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="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>
|
</el-card>
|
</el-col>
|
<el-col :span="8">
|
<el-card :style="{'margin':'0px 10px 10px 0px'}">
|
<el-row>
|
<el-col :span="12" align="left">
|
<div>
|
<div style="display: flex;justify-content: space-between">
|
<div>
|
<svg-icon name="remark" width="20" height="20" color=""/>
|
<b style="margin-right: 20px">{{ $t('label.Remark') }}</b>
|
</div>
|
<div>
|
|
</div>
|
</div>
|
</div>
|
</el-col>
|
<el-col :span="12" align="right">
|
|
</el-col>
|
</el-row>
|
<el-divider :style="{ 'margin': '10px 0px' }"></el-divider>
|
<el-row>
|
<el-col :span="24">
|
<el-input type="textarea" :rows="6" maxlength="500" placeholder=""
|
disabled="disabled"
|
v-model="entity.remark"></el-input>
|
</el-col>
|
</el-row>
|
</el-card>
|
</el-col>
|
</el-row>
|
</div>
|
</template>
|
|
<script>
|
|
import * as icon from '@element-plus/icons-vue'
|
import {onMounted, onBeforeUnmount, getCurrentInstance, reactive, toRefs, onActivated} from "vue";
|
import {formatDate} from '@/utils/common'
|
import {GetActiveOrderDetail} from "@/api/admin/order"
|
import {useBasicInfoStore} from "@/store/basicInfo";
|
|
export default {
|
name: "ActiveOrder",
|
components: {},
|
setup() {
|
let {proxy} = getCurrentInstance();
|
const store = useBasicInfoStore();
|
const state = reactive({
|
order: store.$state.order,
|
orderid: proxy.$route.query.orderid,
|
//common properties
|
loading: false,
|
windowWidth: document.documentElement.clientWidth,
|
windowHeight: document.documentElement.clientHeight,
|
searchValue: {
|
filter: "",
|
code: "",
|
name: "",
|
},
|
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();
|
});
|
onBeforeUnmount(() => {
|
|
});
|
onActivated(() => {
|
state.order = store.$state.order;
|
|
Init();
|
});
|
|
const Init = () => {
|
LoadData();
|
};
|
const LoadData = () => {
|
if (!state.order) {
|
return;
|
}
|
|
state.loading = true;
|
|
GetActiveOrderDetail(state.order.id).then(resp => {
|
state.loading = false;
|
if (resp.data) {
|
state.entity = resp.data;
|
state.entityList = resp.data.products;
|
}
|
}).catch(err => {
|
console.error(err);
|
});
|
};
|
const GoBack = () => {
|
proxy.$router.back();
|
};
|
|
//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 "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 formatterDatetime2 = (datetime) => {
|
if (!datetime) {
|
return "-- / -- / --";
|
}
|
let date = new Date(datetime);
|
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,
|
formatterDatetime,
|
formatterStatusBoolean,
|
capitalize, GoBack, formatterDatetime2,
|
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>
|
