难搞
This commit is contained in:
@@ -0,0 +1,481 @@
|
||||
<script setup>
|
||||
import { onMounted, watch, ref, reactive } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
|
||||
import MyOffcanvas from "@/components/MyOffcanvas.vue";
|
||||
|
||||
import tagadder from "@/components/tagadder.vue";
|
||||
import dateTimePicker from "@/components/dateTimePicker.vue";
|
||||
|
||||
import useDropzone from "@/components/useDropzone.vue";
|
||||
|
||||
import { useUserStore } from "@/stores/user";
|
||||
const userStore = useUserStore();
|
||||
|
||||
import { useRouter } from "vue-router";
|
||||
const router = useRouter();
|
||||
|
||||
import "tom-select/dist/css/tom-select.css";
|
||||
import { my_network_func } from "@/my_network_func";
|
||||
|
||||
const textarea_maxlen = 256;
|
||||
|
||||
const title_input_dom = ref();
|
||||
|
||||
const photos_hash = ref();
|
||||
|
||||
const mos = ref();
|
||||
|
||||
const { t, locale } = useI18n();
|
||||
|
||||
//货币类型
|
||||
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.compvared"),
|
||||
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.compvared");
|
||||
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,
|
||||
cost_t: 0.0,
|
||||
currency_type: "1",
|
||||
});
|
||||
|
||||
function del_cost(key) {
|
||||
cost_sheet.type = cost_sheet_tab[key].type;
|
||||
cost_sheet.int = cost_sheet_tab[key].int;
|
||||
cost_sheet.cost = cost_sheet_tab[key].cost;
|
||||
cost_sheet.cost_t = cost_sheet_tab[key].cost_t;
|
||||
cost_sheet.currency_type = cost_sheet_tab[key].currency_type;
|
||||
|
||||
cost_sheet_tab.splice(key, 1);
|
||||
}
|
||||
function add_cost() {
|
||||
if (cost_sheet.cost <= 0) {
|
||||
} else {
|
||||
// 四舍五入到2位小数
|
||||
var t = parseFloat((cost_sheet.int * cost_sheet.cost).toFixed(2));
|
||||
cost_sheet.cost_t = t;
|
||||
|
||||
cost_sheet_tab.push(JSON.parse(JSON.stringify(cost_sheet)));
|
||||
|
||||
cost_sheet.type = "1";
|
||||
cost_sheet.int = 1;
|
||||
cost_sheet.cost = 0.0;
|
||||
cost_sheet.cost_t = 0.0;
|
||||
cost_sheet.currency_type = "1";
|
||||
}
|
||||
}
|
||||
|
||||
const submit_sheet = reactive({
|
||||
title: "",
|
||||
remark: "",
|
||||
photos: [],
|
||||
link: "",
|
||||
partname: "",
|
||||
styles: "",
|
||||
costs: [],
|
||||
updatetime: "",
|
||||
trackingnumber: "",
|
||||
orderstatus: "1",
|
||||
});
|
||||
|
||||
function submit_order() {
|
||||
if (submit_sheet.title == "") {
|
||||
title_input_dom.value.classList.add("is-invalid");
|
||||
title_input_dom.value.addEventListener("input", function () {
|
||||
if (this.value.trim() !== "") {
|
||||
this.classList.remove("is-invalid");
|
||||
//this.removeEventListener('input');
|
||||
}
|
||||
});
|
||||
|
||||
mos.value?.showAlert("danger", t("purchase_addorder.title"), 1000);
|
||||
return;
|
||||
}
|
||||
//载入图片哈希列表
|
||||
submit_sheet.photos = [];
|
||||
var photos = photos_hash.value.return_files();
|
||||
for (var i = 0; i < photos.length; i++) {
|
||||
submit_sheet.photos.push(photos[i].hash);
|
||||
}
|
||||
|
||||
//载入价格表
|
||||
submit_sheet.costs = [];
|
||||
for (var i = 0; i < cost_sheet_tab.length; i++) {
|
||||
//var t=cost_sheet_tab[i]
|
||||
submit_sheet.costs.push(JSON.parse(JSON.stringify(cost_sheet_tab[i])));
|
||||
}
|
||||
|
||||
//修改价格表里的小数，将所有价值*100去掉小数
|
||||
for (var i = 0; i < submit_sheet.costs.length; i++) {
|
||||
submit_sheet.costs[i].cost *= 100;
|
||||
submit_sheet.costs[i].cost_t *= 100;
|
||||
}
|
||||
|
||||
console.log(submit_sheet);
|
||||
my_network_func.postJson("/purchase/addorder", submit_sheet, (r) => {
|
||||
console.log(r);
|
||||
});
|
||||
}
|
||||
|
||||
function functionupdataTitle() {
|
||||
document.title = "Operations." + t("purchase.add_part");
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
functionupdataTitle();
|
||||
//sele_init();
|
||||
if (!userStore.isLoggedIn) {
|
||||
router.push("/login");
|
||||
}
|
||||
});
|
||||
// 监听语言变化，更新标题
|
||||
watch(locale, () => {
|
||||
functionupdataTitle();
|
||||
update_cost_type();
|
||||
update_order_status();
|
||||
});
|
||||
|
||||
// 监听 cost 变化，自动限制小数位
|
||||
watch(
|
||||
() => cost_sheet.cost,
|
||||
(newVal) => {
|
||||
if (newVal !== null && newVal !== undefined) {
|
||||
// 四舍五入到2位小数
|
||||
const fixed = parseFloat(newVal).toFixed(2);
|
||||
if (parseFloat(fixed) !== newVal) {
|
||||
cost_sheet.cost = parseFloat(fixed);
|
||||
}
|
||||
}
|
||||
},
|
||||
);
|
||||
</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">{{ t("purchase_addorder.add_order") }}</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">
|
||||
{{ t("purchase_addorder.order_info") }}
|
||||
</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="mb-3">
|
||||
<label class="form-label required">{{
|
||||
t("purchase_addorder.title")
|
||||
}}</label>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
name="example-text-input"
|
||||
:placeholder="t('purchase_addorder.title')"
|
||||
v-model="submit_sheet.title"
|
||||
ref="title_input_dom"
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label"
|
||||
>{{ t("purchase_addorder.remarks") }}
|
||||
<span class="form-label-description"
|
||||
>{{ submit_sheet.remark.length }}/{{
|
||||
textarea_maxlen
|
||||
}}</span
|
||||
></label
|
||||
>
|
||||
<textarea
|
||||
class="form-control mt-2 mb-2"
|
||||
name="example-textarea-input"
|
||||
rows="6"
|
||||
:placeholder="t('purchase_addorder.remarks_text')"
|
||||
:maxlength="textarea_maxlen"
|
||||
v-model="submit_sheet.remark"
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<label class="form-label mb-0">{{
|
||||
t("purchase_addorder.photo_remarks")
|
||||
}}</label>
|
||||
<useDropzone
|
||||
acceptedFiles="image/*"
|
||||
uploadURL="/api/files/upload/image"
|
||||
maxFiles="10"
|
||||
ref="photos_hash"
|
||||
></useDropzone>
|
||||
</div>
|
||||
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">
|
||||
{{ t("purchase_addorder.purchase_channel") }}
|
||||
</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">{{
|
||||
t("purchase_addorder.link")
|
||||
}}</label>
|
||||
<textarea
|
||||
name="url"
|
||||
type="url"
|
||||
class="form-control"
|
||||
placeholder="https"
|
||||
v-model="submit_sheet.link"
|
||||
></textarea>
|
||||
<div class="mb-3 mt-3">
|
||||
<label class="form-label">{{
|
||||
t("purchase_addorder.part_name")
|
||||
}}</label>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
name="example-text-input"
|
||||
:placeholder="t('purchase_addorder.part_name')"
|
||||
v-model="submit_sheet.partname"
|
||||
/>
|
||||
</div>
|
||||
<div class="mt-3">
|
||||
<label class="form-label">{{
|
||||
t("purchase_addorder.style_remarks")
|
||||
}}</label>
|
||||
|
||||
<tagadder
|
||||
:placeholder="t('purchase_addorder.add_style')"
|
||||
v-model="submit_sheet.styles"
|
||||
></tagadder>
|
||||
</div>
|
||||
|
||||
<div class="mt-3">
|
||||
<label class="form-label">{{
|
||||
t("purchase_addorder.cost")
|
||||
}}</label>
|
||||
|
||||
<table
|
||||
v-show="cost_sheet_tab.length"
|
||||
class="table table-vcenter card-table table-striped"
|
||||
>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>{{ t("purchase_addorder.type") }}</th>
|
||||
<th>{{ t("purchase_addorder.quantity") }}</th>
|
||||
<th>{{ t("purchase_addorder.fee") }}</th>
|
||||
<th>{{ t("purchase_addorder.total_price") }}</th>
|
||||
<th>{{ t("purchase_addorder.currency") }}</th>
|
||||
<th class="w-1">
|
||||
{{ t("purchase_addorder.operation") }}
|
||||
</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_t }}
|
||||
</td>
|
||||
<td class="text-secondary">
|
||||
{{ currency_type[value.currency_type] }}
|
||||
</td>
|
||||
<td>
|
||||
<button
|
||||
class="btn btn-outline-danger"
|
||||
@click="del_cost(key)"
|
||||
>
|
||||
{{ t("purchase_addorder.change") }}
|
||||
</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">
|
||||
{{ t("purchase_addorder.fee_type") }}
|
||||
<select
|
||||
ref="select_type"
|
||||
class="form-control"
|
||||
autocompvare="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">
|
||||
{{ t("purchase_addorder.input_quantity") }}
|
||||
<input
|
||||
type="number"
|
||||
class="form-control"
|
||||
min="1"
|
||||
value="1"
|
||||
v-model="cost_sheet.int"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xl-3">
|
||||
{{ t("purchase_addorder.input_fee") }}
|
||||
<input
|
||||
type="number"
|
||||
class="form-control"
|
||||
step="0.01"
|
||||
min="0.0"
|
||||
value="0.0"
|
||||
v-model="cost_sheet.cost"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xl-2">
|
||||
{{ t("purchase_addorder.select_currency") }}
|
||||
<select
|
||||
ref="select_beast"
|
||||
class="form-control"
|
||||
autocompvare="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">
|
||||
{{ t("purchase_addorder.operation") }}
|
||||
<button
|
||||
class="form-control btn btn-outline-primary"
|
||||
@click="add_cost"
|
||||
>
|
||||
{{ t("purchase_addorder.add") }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">
|
||||
{{ t("purchase_addorder.other_status") }}
|
||||
</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">{{
|
||||
t("purchase_addorder.update_time")
|
||||
}}</label>
|
||||
<dateTimePicker
|
||||
v-model="submit_sheet.updatetime"
|
||||
></dateTimePicker>
|
||||
</div>
|
||||
<div class="col-xl-4">
|
||||
<label class="form-label">{{
|
||||
t("purchase_addorder.tracking_number")
|
||||
}}</label>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
:placeholder="
|
||||
t('purchase_addorder.input_tracking_number')
|
||||
"
|
||||
v-model="submit_sheet.trackingnumber"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xl-4">
|
||||
{{ t("purchase_addorder.order_status") }}
|
||||
<select
|
||||
ref="select_beast"
|
||||
class="form-control"
|
||||
autocompvare="off"
|
||||
v-model="submit_sheet.orderstatus"
|
||||
>
|
||||
<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
|
||||
type="submit"
|
||||
class="btn btn-primary ms-auto"
|
||||
@click="submit_order"
|
||||
>
|
||||
{{ t("purchase_addorder.submit") }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<MyOffcanvas ref="mos" />
|
||||
</template>
|
||||
|
||||
<style></style>
|
||||
@@ -0,0 +1,422 @@
|
||||
<script setup>
|
||||
import { onMounted, watch, ref, reactive } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import MyOffcanvas from "@/components/MyOffcanvas.vue";
|
||||
const mos = ref();
|
||||
import { my_network_func } from "@/my_network_func";
|
||||
import { myfuncs } from "@/myfunc";
|
||||
|
||||
import { useRouter } from "vue-router";
|
||||
const router = useRouter();
|
||||
|
||||
const { t, locale } = useI18n();
|
||||
|
||||
const all_items = ref(0);
|
||||
const all_pages = ref(0);
|
||||
const page_items = ref(10);
|
||||
const now_page = ref(1);
|
||||
|
||||
const all_orders = ref({});
|
||||
|
||||
const page_start = ref(0);
|
||||
const page_end = ref(0);
|
||||
|
||||
const page_input = ref();
|
||||
const page_items_items = ref("10");
|
||||
|
||||
function jump_to_order(order_id) {
|
||||
//console.log(order_id);
|
||||
|
||||
var order_str=order_id.toString()
|
||||
|
||||
const resolved = router.resolve({
|
||||
path: "/purchase/showorder/" + order_str,
|
||||
});
|
||||
window.open(resolved.href, "_blank");
|
||||
}
|
||||
|
||||
//获取订单列表
|
||||
function get_orders() {
|
||||
my_network_func.postJson(
|
||||
"/purchase/getorders",
|
||||
{
|
||||
search: "",
|
||||
entries: page_items.value,
|
||||
page: now_page.value,
|
||||
},
|
||||
(r) => {
|
||||
//console.log(r);
|
||||
switch (r.statusCode) {
|
||||
case 200:
|
||||
switch (r.data.err_code) {
|
||||
case 0:
|
||||
all_orders.value = r.data.return.all_orders;
|
||||
all_items.value = r.data.return.all_count;
|
||||
all_pages.value = Math.ceil(all_items.value / page_items.value);
|
||||
if (now_page.value < 3) {
|
||||
page_start.value = 1;
|
||||
} else {
|
||||
if (now_page.value > all_pages.value - 3) {
|
||||
page_start.value = all_pages.value - 4;
|
||||
if (page_start.value <= 0) {
|
||||
page_start.value = 1;
|
||||
}
|
||||
} else {
|
||||
page_start.value = now_page.value - 2;
|
||||
}
|
||||
}
|
||||
if (now_page.value > all_pages.value - 3) {
|
||||
page_end.value = all_pages.value;
|
||||
} else {
|
||||
if (now_page.value < 3) {
|
||||
page_end.value = 5;
|
||||
} else {
|
||||
page_end.value = now_page.value + 2;
|
||||
}
|
||||
}
|
||||
break;
|
||||
default:
|
||||
mos.value?.showAlert("danger", t("message.server_error"), 5000);
|
||||
break;
|
||||
}
|
||||
break;
|
||||
default:
|
||||
mos.value?.showAlert("danger", t("message.network_err"), 5000);
|
||||
break;
|
||||
}
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
function change_page(page) {
|
||||
now_page.value = page;
|
||||
get_orders();
|
||||
}
|
||||
|
||||
function functionupdataTitle() {
|
||||
document.title = "Operations." + t("appname.purchase");
|
||||
}
|
||||
|
||||
function range(start, end) {
|
||||
return Array.from({ length: end - start + 1 }, (_, i) => start + i);
|
||||
}
|
||||
|
||||
function page_input_change(c) {
|
||||
//console.log(page_input.value);
|
||||
|
||||
var t = parseInt(page_input.value);
|
||||
if (t > 0) {
|
||||
if (t <= all_pages.value) {
|
||||
page_input.value = "";
|
||||
change_page(t);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function page_input_input(c) {
|
||||
page_input.value = page_input.value.replace(/[^\d]/g, "");
|
||||
|
||||
//console.log(c)
|
||||
}
|
||||
|
||||
function page_items_input_change(c) {
|
||||
var t = parseInt(page_items_items.value);
|
||||
page_items.value = t;
|
||||
now_page.value = 1;
|
||||
get_orders();
|
||||
//console.log(t)
|
||||
}
|
||||
|
||||
function page_items_input_input(c) {
|
||||
page_items_items.value = page_items_items.value.replace(/[^\d]/g, "");
|
||||
|
||||
var t = parseInt(page_items_items.value);
|
||||
if (t > 300) {
|
||||
page_items_items.value = "300";
|
||||
}
|
||||
|
||||
//console.log(c)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
functionupdataTitle();
|
||||
|
||||
get_orders();
|
||||
});
|
||||
// 监听语言变化，更新标题
|
||||
watch(locale, () => {
|
||||
functionupdataTitle();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="page-body">
|
||||
<div class="container-xl">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">{{ t("purchase.purchase_list") }}</h3>
|
||||
</div>
|
||||
<div class="card-body border-bottom py-3">
|
||||
<div class="d-flex">
|
||||
<div class="text-secondary">
|
||||
<router-link to="/purchase/addorder" class="btn btn-info m-1">
|
||||
{{ t("purchase.add_part") }}
|
||||
</router-link>
|
||||
<button class="btn m-1">
|
||||
{{ t("purchase.exp_report") }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- //搜索dom -->
|
||||
<div class="ms-auto text-secondary">
|
||||
{{ t("purchase.search") }}
|
||||
<div class="ms-2 d-inline-block mr-2">
|
||||
<input
|
||||
type="text"
|
||||
class="form-control form-control-sm"
|
||||
aria-label="Search invoice"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ms-auto text-secondary"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-responsive">
|
||||
<table class="table card-table table-vcenter text-nowrap datatable">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="w-1">
|
||||
<input
|
||||
class="form-check-input m-0 align-middle"
|
||||
type="checkbox"
|
||||
aria-label="Select all invoices"
|
||||
/>
|
||||
</th>
|
||||
<th class="col-1">
|
||||
No.
|
||||
<!-- Download SVG icon from http://tabler-icons.io/i/chevron-up -->
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="icon icon-sm icon-thick"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="2"
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<path d="M6 15l6 -6l6 6" />
|
||||
</svg>
|
||||
</th>
|
||||
<th class="col-3">{{ t("purchase.item_name") }}</th>
|
||||
<th class="col-3">{{ t("purchase.purpose") }}</th>
|
||||
<th class="w-1">{{ t("purchase.quantity") }}</th>
|
||||
<th class="w-1">{{ t("purchase.created_at") }}</th>
|
||||
<th class="w-1">{{ t("purchase.updated_at") }}</th>
|
||||
<th class="w-1">{{ t("purchase.status") }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="value in all_orders"
|
||||
class="element"
|
||||
@click="jump_to_order(value.ID)"
|
||||
>
|
||||
<td>
|
||||
<input
|
||||
class="form-check-input m-0 align-middle"
|
||||
type="checkbox"
|
||||
aria-label="Select invoice"
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<span class="text-muted">{{ value.ID }}</span>
|
||||
</td>
|
||||
<td>
|
||||
{{ value.Title }}
|
||||
</td>
|
||||
<td>{{ value.Remark }}</td>
|
||||
<td>1</td>
|
||||
<td>
|
||||
{{ myfuncs.formatLocalizedDate(value.CreatedAt, locale) }}
|
||||
</td>
|
||||
<td>{{ myfuncs.formatLocalizedDate(value.UpdatedAt) }}</td>
|
||||
<td>1</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="card-footer d-flex align-items-center">
|
||||
<p class="m-0 text-secondary">
|
||||
{{ t("purchase.show") }}
|
||||
</p>
|
||||
<div class="mx-2 d-inline-block">
|
||||
<input
|
||||
type="text"
|
||||
class="form-control form-control-sm w-6"
|
||||
v-model="page_items_items"
|
||||
aria-label="Invoices count"
|
||||
@change="page_items_input_change"
|
||||
@input="page_items_input_input"
|
||||
/>
|
||||
</div>
|
||||
<p class="m-0 text-secondary">
|
||||
{{ t("purchase.entries") }}
|
||||
{{ t("purchase.There_are_a_total_of") }} {{ all_items }}
|
||||
{{ t("purchase.entries") }}
|
||||
</p>
|
||||
|
||||
<ul class="pagination m-0 ms-auto">
|
||||
<li class="page-item" :class="now_page == 1 ? 'disabled' : ''">
|
||||
<div
|
||||
class="page-link"
|
||||
:tabindex="now_page == 1 ? '-1' : ''"
|
||||
:aria-disabled="now_page == 1 ? 'true' : ''"
|
||||
@click="change_page(1)"
|
||||
>
|
||||
<!-- Download SVG icon from http://tabler-icons.io/i/chevron-left -->
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
class="icon icon-tabler icons-tabler-outline icon-tabler-arrow-bar-to-left"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<path d="M10 12l10 0" />
|
||||
<path d="M10 12l4 4" />
|
||||
<path d="M10 12l4 -4" />
|
||||
<path d="M4 4l0 16" />
|
||||
</svg>
|
||||
</div>
|
||||
</li>
|
||||
<li class="page-item" :class="now_page == 1 ? 'disabled' : ''">
|
||||
<div
|
||||
class="page-link"
|
||||
:tabindex="now_page == 1 ? '-1' : ''"
|
||||
:aria-disabled="now_page == 1 ? 'true' : ''"
|
||||
@click="change_page(now_page - 1)"
|
||||
>
|
||||
<!-- Download SVG icon from http://tabler-icons.io/i/chevron-left -->
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="icon"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="2"
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<path d="M15 6l-6 6l6 6" />
|
||||
</svg>
|
||||
<!-- prev -->
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li
|
||||
v-for="value in range(page_start, page_end)"
|
||||
class="page-item"
|
||||
:class="value == now_page ? 'active' : ''"
|
||||
>
|
||||
<div class="page-link" @click="change_page(value)">
|
||||
{{ value }}
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li
|
||||
class="page-item"
|
||||
:class="now_page == all_pages ? 'disabled' : ''"
|
||||
>
|
||||
<div
|
||||
class="page-link"
|
||||
:tabindex="now_page == all_pages ? '-1' : ''"
|
||||
:aria-disabled="now_page == all_pages ? 'true' : ''"
|
||||
@click="change_page(now_page + 1)"
|
||||
>
|
||||
<!-- next -->
|
||||
<!-- Download SVG icon from http://tabler-icons.io/i/chevron-right -->
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="icon"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="2"
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<path d="M9 6l6 6l-6 6" />
|
||||
</svg>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li
|
||||
class="page-item"
|
||||
:class="now_page == all_pages ? 'disabled' : ''"
|
||||
>
|
||||
<div
|
||||
class="page-link"
|
||||
:tabindex="now_page == all_pages ? '-1' : ''"
|
||||
:aria-disabled="now_page == all_pages ? 'true' : ''"
|
||||
@click="change_page(all_pages)"
|
||||
>
|
||||
<!-- Download SVG icon from http://tabler-icons.io/i/chevron-right -->
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
class="icon icon-tabler icons-tabler-outline icon-tabler-arrow-bar-to-right"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<path d="M14 12l-10 0" />
|
||||
<path d="M14 12l-4 4" />
|
||||
<path d="M14 12l-4 -4" />
|
||||
<path d="M20 4l0 16" />
|
||||
</svg>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control form-control-sm w-6"
|
||||
@change="page_input_change"
|
||||
@input="page_input_input"
|
||||
v-model="page_input"
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<MyOffcanvas ref="mos" />
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.element:hover {
|
||||
background-color: #4299e11c;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,14 @@
|
||||
<script setup>
|
||||
import { onMounted, watch, ref, reactive } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
const router = useRouter();
|
||||
|
||||
const dynamicParam = router
|
||||
|
||||
onMounted(() => {
|
||||
console.log(dynamicParam);
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
|
||||
</template>
|
||||
Reference in New Issue
Block a user