323 lines
10 KiB
Vue
323 lines
10 KiB
Vue
<script setup>
|
|
import { onMounted, watch, ref, reactive } from "vue";
|
|
import { useI18n } from "vue-i18n";
|
|
|
|
import tagadder from "@/components/tagadder.vue";
|
|
import dateTimePicker from "@/components/dateTimePicker.vue";
|
|
|
|
import TomSelect from "tom-select";
|
|
import "tom-select/dist/css/tom-select.css";
|
|
|
|
const { t, locale } = useI18n();
|
|
|
|
function functionupdataTitle() {
|
|
document.title = "Operations." + t("purchase.add_part");
|
|
}
|
|
|
|
//货币类型
|
|
const currency_type = reactive({
|
|
1: "RMB",
|
|
2: "MOP",
|
|
3: "HKD",
|
|
4: "USD",
|
|
});
|
|
//成本类型
|
|
const cost_type = reactive({
|
|
1: t("cost_type.unit_price"),
|
|
2: t("cost_type.freight"),
|
|
});
|
|
function update_cost_type() {
|
|
cost_type["1"] = t("cost_type.unit_price");
|
|
cost_type["2"] = t("cost_type.freight");
|
|
}
|
|
|
|
//订单状态
|
|
const order_status = reactive({
|
|
1: t("order_status.pending_order"),
|
|
2: t("order_status.order_placed"),
|
|
3: t("order_status.in_transit"),
|
|
4: t("order_status.completed"),
|
|
5: t("order_status.refund_requested"),
|
|
6: t("order_status.returning"),
|
|
7: t("order_status.refunded"),
|
|
8: t("order_status.lost_package"),
|
|
});
|
|
|
|
function update_order_status() {
|
|
order_status["1"] = t("order_status.pending_order");
|
|
order_status["2"] = t("order_status.order_placed");
|
|
order_status["3"] = t("order_status.in_transit");
|
|
order_status["4"] = t("order_status.completed");
|
|
order_status["5"] = t("order_status.refund_requested");
|
|
order_status["6"] = t("order_status.returning");
|
|
order_status["7"] = t("order_status.refunded");
|
|
order_status["8"] = t("order_status.lost_package");
|
|
}
|
|
|
|
const cost_sheet_tab = reactive([]);
|
|
// 表单对象
|
|
const cost_sheet = reactive({
|
|
type: "1",
|
|
int: 1,
|
|
cost: 0.0,
|
|
currency_type: "1",
|
|
});
|
|
|
|
function del_cost(key) {
|
|
cost_sheet_tab.splice(key, 1);
|
|
}
|
|
function add_cost() {
|
|
cost_sheet_tab.push(JSON.parse(JSON.stringify(cost_sheet)));
|
|
// var t = {
|
|
// type: cost_type[cost_sheet.type],
|
|
// int: cost_sheet.int,
|
|
// cost: cost_sheet.cost,
|
|
// currency_type: currency_type[cost_sheet.currency_type],
|
|
// };
|
|
// cost_sheet_tab.push(t);
|
|
//console.log(t);
|
|
}
|
|
|
|
onMounted(() => {
|
|
functionupdataTitle();
|
|
//sele_init();
|
|
});
|
|
// 监听语言变化，更新标题
|
|
watch(locale, () => {
|
|
functionupdataTitle();
|
|
update_cost_type();
|
|
update_order_status();
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="page-header d-print-none">
|
|
<div class="container-xl">
|
|
<div class="row g-2 align-items-center">
|
|
<div class="col">
|
|
<h2 class="page-title">添加订单</h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="page-body">
|
|
<div class="container-xl">
|
|
<div class="row row-cards">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h4 class="card-title">订单信息</h4>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="mb-3">
|
|
<label class="form-label required">标题</label>
|
|
<input
|
|
type="text"
|
|
class="form-control"
|
|
name="example-text-input"
|
|
placeholder="输入订单标题"
|
|
/>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label"
|
|
>备注 <span class="form-label-description">0/100</span></label
|
|
>
|
|
<textarea
|
|
class="form-control"
|
|
name="example-textarea-input"
|
|
rows="6"
|
|
placeholder="Content.."
|
|
></textarea>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card-header">
|
|
<h4 class="card-title">采购途径</h4>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="mb-3">
|
|
<label class="form-label">URL</label>
|
|
<input
|
|
name="url"
|
|
type="url"
|
|
class="form-control"
|
|
placeholder="http"
|
|
value=""
|
|
/>
|
|
<div class="mt-3">
|
|
<label class="form-label">样式备注</label>
|
|
|
|
<tagadder placeholder="添加样式"></tagadder>
|
|
</div>
|
|
|
|
<div class="mt-3">
|
|
<label class="form-label">成本</label>
|
|
|
|
<table
|
|
v-show="cost_sheet_tab.length"
|
|
class="table table-vcenter card-table table-striped"
|
|
>
|
|
<thead>
|
|
<tr>
|
|
<th>类型</th>
|
|
<th>数量</th>
|
|
<th>费用</th>
|
|
<th>总价</th>
|
|
<th>货币</th>
|
|
<th class="w-1">操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="(value, key) in cost_sheet_tab">
|
|
<td>{{ cost_type[value.type] }}</td>
|
|
<td class="text-secondary">{{ value.int }}</td>
|
|
<td class="text-secondary">{{ value.cost }}</td>
|
|
<td class="text-secondary">
|
|
{{ value.cost * value.int }}
|
|
</td>
|
|
<td class="text-secondary">
|
|
{{ currency_type[value.currency_type] }}
|
|
</td>
|
|
<td>
|
|
<button
|
|
class="btn btn-outline-danger"
|
|
@click="del_cost(key)"
|
|
>
|
|
Del
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
<!-- <tr>
|
|
<td>运输</td>
|
|
<td class="text-secondary">1</td>
|
|
<td class="text-secondary">5</td>
|
|
<td class="text-secondary">MOP</td>
|
|
<td>
|
|
<button class="btn btn-outline-danger">Del</button>
|
|
</td>
|
|
</tr> -->
|
|
</tbody>
|
|
</table>
|
|
|
|
<div class="row g-5">
|
|
<div class="col-xl-2">
|
|
类型
|
|
<select
|
|
ref="select_type"
|
|
class="form-control"
|
|
placeholder="选择费用类型"
|
|
autocomplete="off"
|
|
value="1"
|
|
v-model="cost_sheet.type"
|
|
>
|
|
<option v-for="(value, key) in cost_type" :value="key">
|
|
{{ value }}
|
|
</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-xl-3">
|
|
数量
|
|
<input
|
|
type="number"
|
|
class="form-control"
|
|
min="1"
|
|
value="1"
|
|
v-model="cost_sheet.int"
|
|
/>
|
|
</div>
|
|
<div class="col-xl-3">
|
|
费用
|
|
<input
|
|
type="number"
|
|
class="form-control"
|
|
step="0.01"
|
|
min="0"
|
|
value="0.0"
|
|
v-model="cost_sheet.cost"
|
|
/>
|
|
</div>
|
|
<div class="col-xl-2">
|
|
货币
|
|
<select
|
|
ref="select_beast"
|
|
class="form-control"
|
|
placeholder="选择货币类型"
|
|
autocomplete="off"
|
|
value="1"
|
|
v-model="cost_sheet.currency_type"
|
|
>
|
|
<option
|
|
v-for="(value, key) in currency_type"
|
|
:value="key"
|
|
>
|
|
{{ value }}
|
|
</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-xl-2">
|
|
操作
|
|
<button
|
|
class="form-control btn btn-outline-primary"
|
|
@click="add_cost"
|
|
>
|
|
添加
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card-header">
|
|
<h4 class="card-title">其他状态</h4>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="mb-3">
|
|
<div class="row g-5">
|
|
<div class="col-xl-4">
|
|
<label class="form-label required">更新时间</label>
|
|
<dateTimePicker></dateTimePicker>
|
|
</div>
|
|
<div class="col-xl-4">
|
|
<label class="form-label">快递单号</label>
|
|
<input
|
|
type="text"
|
|
class="form-control"
|
|
placeholder="输入快递单号"
|
|
value=""
|
|
/>
|
|
</div>
|
|
<div class="col-xl-4">
|
|
订单状态
|
|
<select
|
|
ref="select_beast"
|
|
class="form-control"
|
|
placeholder="选择订单状态"
|
|
autocomplete="off"
|
|
value="1"
|
|
>
|
|
<option v-for="(value, key) in order_status" :value="key">
|
|
{{ value }}
|
|
</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-footer text-end">
|
|
<div class="d-flex">
|
|
<button class="btn btn-link">Cancel</button>
|
|
<button type="submit" class="btn btn-primary ms-auto">
|
|
Send data
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style></style>
|