up
This commit is contained in:
@@ -0,0 +1,184 @@
|
||||
<script setup>
|
||||
import { ref, reactive, computed, onMounted } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useToastStore } from '@/stores/toast'
|
||||
import { usePageTitle } from '@/composables/usePageTitle'
|
||||
import { purchaseApi } from '@/api/purchase'
|
||||
import { IconPlus, IconChevronLeftPipe, IconChevronRightPipe, IconChevronsLeft, IconChevronsRight, IconSearch } from '@tabler/icons-vue'
|
||||
|
||||
usePageTitle('appname.purchase')
|
||||
const { t, locale } = useI18n()
|
||||
const router = useRouter()
|
||||
const toast = useToastStore()
|
||||
|
||||
const orders = ref([])
|
||||
const totalCount = ref(0)
|
||||
const pageSize = ref(10)
|
||||
const currentPage = ref(1)
|
||||
const searchQuery = ref('')
|
||||
const loading = ref(false)
|
||||
|
||||
const totalPages = computed(() => Math.ceil(totalCount.value / pageSize.value) || 1)
|
||||
|
||||
const pageRange = computed(() => {
|
||||
const total = totalPages.value
|
||||
const cur = currentPage.value
|
||||
let start = Math.max(1, cur - 2)
|
||||
let end = Math.min(cur + 4, total)
|
||||
if (end - start < 4) start = Math.max(1, end - 4)
|
||||
return Array.from({ length: end - start + 1 }, (_, i) => start + i)
|
||||
})
|
||||
|
||||
async function fetchOrders() {
|
||||
loading.value = true
|
||||
try {
|
||||
const { errCode, data } = await purchaseApi.getOrders({
|
||||
keyword: searchQuery.value,
|
||||
page: pageSize.value,
|
||||
page_num: currentPage.value,
|
||||
})
|
||||
if (errCode === 0) {
|
||||
orders.value = data.all_orders ?? []
|
||||
totalCount.value = data.all_count ?? 0
|
||||
} else {
|
||||
toast.error(t('message.server_error'))
|
||||
}
|
||||
} catch {
|
||||
// 拦截器已处理
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function goToPage(page) {
|
||||
if (page < 1 || page > totalPages.value) return
|
||||
currentPage.value = page
|
||||
fetchOrders()
|
||||
}
|
||||
|
||||
function jumpToOrder(id) {
|
||||
const resolved = router.resolve({ path: `/purchase/showorder/${id}` })
|
||||
window.open(resolved.href, '_blank')
|
||||
}
|
||||
|
||||
function formatDate(dateStr) {
|
||||
if (!dateStr) return ''
|
||||
return new Intl.DateTimeFormat(locale.value, {
|
||||
year: 'numeric', month: '2-digit', day: '2-digit',
|
||||
hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false,
|
||||
}).format(new Date(dateStr))
|
||||
}
|
||||
|
||||
function handlePageSizeInput(e) {
|
||||
let val = parseInt(e.target.value) || 10
|
||||
if (val > 300) val = 300
|
||||
if (val < 1) val = 1
|
||||
pageSize.value = val
|
||||
currentPage.value = 1
|
||||
fetchOrders()
|
||||
}
|
||||
|
||||
function handleJumpPageInput(e) {
|
||||
const val = parseInt(e.target.value)
|
||||
if (val > 0 && val <= totalPages.value) {
|
||||
currentPage.value = val
|
||||
fetchOrders()
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(fetchOrders)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="mx-auto max-w-6xl px-6 py-6">
|
||||
<div class="flex flex-col gap-6 rounded-xl border border-gray-200 bg-white shadow-lg dark:border-dk-muted dark:bg-dk-card">
|
||||
<!-- Header -->
|
||||
<div class="flex items-center justify-between border-b border-gray-100 px-6 py-4 dark:border-dk-muted">
|
||||
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">{{ t('purchase.purchase_list') }}</h3>
|
||||
</div>
|
||||
|
||||
<!-- Toolbar -->
|
||||
<div class="flex flex-col gap-3 px-6 py-3 sm:flex-row sm:items-center">
|
||||
<div class="flex gap-2">
|
||||
<RouterLink to="/purchase/addorder" class="inline-flex items-center gap-1.5 rounded-lg bg-blue-600 px-3 py-1.5 text-sm font-medium text-white transition-colors hover:bg-blue-700">
|
||||
<IconPlus :size="16" />
|
||||
{{ t('purchase.add_part') }}
|
||||
</RouterLink>
|
||||
<button class="rounded-lg border border-gray-300 px-3 py-1.5 text-sm text-gray-600 transition-colors hover:bg-gray-50 dark:border-dk-muted dark:text-gray-400">{{ t('purchase.exp_report') }}</button>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<label class="text-sm text-gray-500">{{ t('purchase.search') }}</label>
|
||||
<input v-model="searchQuery" type="text" class="w-48 rounded-lg border border-gray-300 bg-white px-3 py-1.5 text-sm outline-none transition-colors focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 dark:border-dk-muted dark:bg-dk-base dark:text-white" @keydown.enter="currentPage=1;fetchOrders()" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Table -->
|
||||
<div class="overflow-x-auto px-0">
|
||||
<table class="w-full text-left text-sm text-gray-900">
|
||||
<thead>
|
||||
<tr class="border-b border-gray-200 bg-gray-50 text-gray-500 dark:border-dk-muted dark:bg-dk-base">
|
||||
<th class="px-6 py-3 font-medium text-gray-500 dark:text-gray-400">No.</th>
|
||||
<th class="px-6 py-3 font-medium text-gray-500 dark:text-gray-400">{{ t('purchase.item_name') }}</th>
|
||||
<th class="px-6 py-3 font-medium text-gray-500 dark:text-gray-400">{{ t('purchase.purpose') }}</th>
|
||||
<th class="px-6 py-3 font-medium text-gray-500 dark:text-gray-400">{{ t('purchase.quantity') }}</th>
|
||||
<th class="px-6 py-3 font-medium text-gray-500 dark:text-gray-400 whitespace-nowrap">{{ t('purchase.unit_price') }}</th>
|
||||
<th class="px-6 py-3 font-medium text-gray-500 dark:text-gray-400 whitespace-nowrap">{{ t('purchase.total_price') }}</th>
|
||||
<th class="px-6 py-3 font-medium text-gray-500 dark:text-gray-400">{{ t('purchase.status') }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-if="loading">
|
||||
<td colspan="7" class="px-6 py-8 text-center text-gray-400">
|
||||
<svg class="mx-auto mb-2 h-5 w-5 animate-spin text-gray-400" viewBox="0 0 24 24" fill="none">
|
||||
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
|
||||
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
|
||||
</svg>
|
||||
Loading...
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
v-for="order in orders"
|
||||
:key="order.ID"
|
||||
class="border-b border-gray-100 transition-colors hover:bg-blue-50/50 dark:border-dk-muted/50 dark:bg-dk-card dark:hover:bg-dk-base/50"
|
||||
@click="jumpToOrder(order.ID)"
|
||||
>
|
||||
<td class="px-6 py-3 text-gray-400">{{ order.ID }}</td>
|
||||
<td class="px-6 py-3 font-medium text-gray-900 dark:text-white">{{ order.Title }}</td>
|
||||
<td class="px-6 py-3 text-gray-600 dark:text-gray-300">{{ order.Remark }}</td>
|
||||
<td class="px-6 py-3 text-gray-600 dark:text-gray-300">1</td>
|
||||
<td class="px-6 py-3 whitespace-nowrap text-gray-500">{{ formatDate(order.UnitPriceAt) }}</td>
|
||||
<td class="px-6 py-3 whitespace-nowrap text-gray-500">{{ formatDate(order.TotalPriceAt) }}</td>
|
||||
<td class="px-6 py-3 text-gray-600 dark:text-gray-300">1</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Pagination -->
|
||||
<div class="flex flex-col items-center justify-between gap-3 border-t border-gray-200 px-6 py-3 sm:flex-row dark:border-dk-muted">
|
||||
<div class="flex items-center gap-1.5 text-sm text-gray-500">
|
||||
<label>{{ t('purchase.show') }}</label>
|
||||
<input type="text" class="w-14 rounded border border-gray-300 px-2 py-1 text-center text-sm text-gray-900 dark:border-dk-muted dark:bg-dk-base dark:text-white" :value="pageSize" @change="handlePageSizeInput" />
|
||||
<label>{{ t('purchase.entries') }}</label>
|
||||
<span class="ml-1">{{ t('purchase.There_are_a_total_of') }} {{ totalCount }} {{ t('purchase.items') }}</span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-1">
|
||||
<button class="rounded p-1.5 text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-700 disabled:opacity-40 dark:hover:bg-dk-card" :disabled="currentPage <= 1" @click="goToPage(1)"><IconChevronsLeft :size="16" /></button>
|
||||
<button class="rounded p-1.5 text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-700 disabled:opacity-40 dark:hover:bg-dk-card" :disabled="currentPage <= 1" @click="goToPage(currentPage - 1)"><IconChevronLeftPipe :size="16" /></button>
|
||||
<template v-for="a in pageRange" :key="a">
|
||||
<button
|
||||
class="min-w-[32px] rounded px-2 py-1 text-sm font-medium transition-colors"
|
||||
:class="a === currentPage ? 'bg-blue-600 text-white' : 'text-gray-600 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-dk-card dark:text-gray-400 dark:hover:bg-dk-card'"
|
||||
@click="goToPage(a)"
|
||||
>{{ a }}</button>
|
||||
</template>
|
||||
<button class="rounded p-1.5 text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-700 disabled:opacity-40 dark:hover:bg-dk-card" :disabled="currentPage >= totalPages" @click="goToPage(currentPage + 1)"><IconChevronRightPipe :size="16" /></button>
|
||||
<button class="rounded p-1.5 text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-700 disabled:opacity-40 dark:hover:bg-dk-card" :disabled="currentPage >= totalPages" @click="goToPage(totalPages)"><IconChevronsRight :size="16" /></button>
|
||||
<input type="text" class="ml-2 w-14 rounded border border-gray-300 px-2 py-1 text-center text-sm text-gray-900 dark:border-dk-muted dark:bg-dk-base dark:text-white" @change="handleJumpPageInput" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,481 +1,296 @@
|
||||
<script setup>
|
||||
import { onMounted, watch, ref, reactive } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
<script setup>
|
||||
import { reactive, ref, computed, watch } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useToastStore } from '@/stores/toast'
|
||||
import { usePageTitle } from '@/composables/usePageTitle'
|
||||
import { useValidation } from '@/composables'
|
||||
import { purchaseApi } from '@/api/purchase'
|
||||
import tagadder from '@/components/tagadder.vue'
|
||||
import datePicker from '@/components/datePicker.vue'
|
||||
import useDropzone from '@/components/useDropzone.vue'
|
||||
|
||||
import MyOffcanvas from "@/components/MyOffcanvas.vue";
|
||||
usePageTitle('purchase.add_part')
|
||||
const { t, locale } = useI18n()
|
||||
const toast = useToastStore()
|
||||
const { validate, errors, clearErrors } = useValidation()
|
||||
|
||||
import tagadder from "@/components/tagadder.vue";
|
||||
import dateTimePicker from "@/components/dateTimePicker.vue";
|
||||
const textMaxLen = 256
|
||||
const photosRef = ref(null)
|
||||
|
||||
import useDropzone from "@/components/useDropzone.vue";
|
||||
const currencyOptions = { 1: 'RMB', 2: 'MOA', 3: 'HKD', 4: 'USD' }
|
||||
|
||||
import { useUserStore } from "@/stores/user";
|
||||
const userStore = useUserStore();
|
||||
const costType = computed(() => ({
|
||||
1: t('cost_type.unit_price'),
|
||||
2: t('cost_type.freight'),
|
||||
}))
|
||||
|
||||
import { useRouter } from "vue-router";
|
||||
const router = useRouter();
|
||||
const orderStatus = computed(() => ({
|
||||
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'),
|
||||
}))
|
||||
|
||||
import "tom-select/dist/css/tom-select.css";
|
||||
import { my_network_func } from "@/my_network_func";
|
||||
const costEntries = reactive([])
|
||||
const newCost = reactive({
|
||||
type: '1', qty: 1, cost: 0, currencyType: '1',
|
||||
})
|
||||
|
||||
const textarea_maxlen = 256;
|
||||
const newCostTotal = computed(() =>
|
||||
parseFloat((newCost.qty * newCost.cost).toFixed(2))
|
||||
)
|
||||
|
||||
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");
|
||||
function addCostEntry() {
|
||||
if (newCost.cost <= 0) return
|
||||
costEntries.push({
|
||||
type: newCost.type,
|
||||
qty: newCost.qty,
|
||||
cost: newCost.cost,
|
||||
cost_t: newCostTotal.value,
|
||||
currency_type: newCost.currencyType,
|
||||
})
|
||||
newCost.type = '1'
|
||||
newCost.qty = 1
|
||||
newCost.cost = 0
|
||||
newCost.currencyType = '1'
|
||||
}
|
||||
|
||||
//订单状态
|
||||
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");
|
||||
function removeCostEntry(index) {
|
||||
costEntries.splice(index, 1)
|
||||
}
|
||||
|
||||
const cost_sheet_tab = reactive([]);
|
||||
// 表单对象
|
||||
const cost_sheet = reactive({
|
||||
type: "1",
|
||||
int: 1,
|
||||
cost: 0.0,
|
||||
cost_t: 0.0,
|
||||
currency_type: "1",
|
||||
});
|
||||
watch(() => newCost.cost, (val) => {
|
||||
const fixed = parseFloat(val).toFixed(2)
|
||||
if (parseFloat(fixed) !== val) newCost.cost = parseFloat(fixed)
|
||||
})
|
||||
|
||||
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: "",
|
||||
const form = reactive({
|
||||
title: '',
|
||||
remark: '',
|
||||
photos: [],
|
||||
link: "",
|
||||
partname: "",
|
||||
styles: "",
|
||||
link: '',
|
||||
style_remarks: '',
|
||||
notes: '',
|
||||
costs: [],
|
||||
updatetime: "",
|
||||
trackingnumber: "",
|
||||
orderstatus: "1",
|
||||
});
|
||||
tracking_number: '',
|
||||
express_number: '',
|
||||
order_status: '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');
|
||||
}
|
||||
});
|
||||
const loading = ref(false)
|
||||
|
||||
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);
|
||||
async function handleSubmit() {
|
||||
clearErrors()
|
||||
const err = validate('title', form.title, t('purchase_addorder.title'))
|
||||
if (!err) return
|
||||
|
||||
form.photos = []
|
||||
if (photosRef.value?.has_some_files) {
|
||||
const result = photosRef.value.get_some_files()
|
||||
form.photos = result.map(f => f.name)
|
||||
}
|
||||
|
||||
//载入价格表
|
||||
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])));
|
||||
}
|
||||
form.costs = costEntries.map(h => ({
|
||||
...h,
|
||||
cost: Math.round(h.cost * 100),
|
||||
cost_t: Math.round(h.cost_t * 100),
|
||||
}))
|
||||
|
||||
//修改价格表里的小数，将所有价值*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);
|
||||
}
|
||||
loading.value = true
|
||||
try {
|
||||
const { errCode } = await purchaseApi.addOrder(form)
|
||||
if (errCode === 0) {
|
||||
toast.success(t('message.save_ok'))
|
||||
} else {
|
||||
toast.error(t('message.server_error'))
|
||||
}
|
||||
},
|
||||
);
|
||||
} catch {
|
||||
// interceptor handled
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
</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 class="mx-auto max-w-6xl px-6 py-6">
|
||||
<div class="flex flex-col gap-6 rounded-xl border border-gray-200 bg-white shadow-lg dark:border-dk-muted dark:bg-dk-card">
|
||||
<!-- Order Info -->
|
||||
<div class="border-b border-gray-200 px-6 py-4 dark:border-dk-muted">
|
||||
<h4 class="text-sm font-semibold text-gray-900 dark:text-white">{{ t('purchase_addorder.order_info') }}</h4>
|
||||
</div>
|
||||
<div class="space-y-4 px-6 py-5">
|
||||
<div>
|
||||
<label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
{{ t('purchase_addorder.title') }} <span class="text-red-500">*</span>
|
||||
</label>
|
||||
<input
|
||||
v-model="form.title"
|
||||
type="text"
|
||||
class="w-full rounded-lg border border-gray-300 bg-white px-3.5 py-2 text-sm outline-none transition-colors focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 dark:border-dk-muted dark:bg-dk-base dark:text-white"
|
||||
:class="errors.title ? 'border-red-500' : 'border-gray-300'"
|
||||
:placeholder="t('purchase_addorder.input_title')"
|
||||
/>
|
||||
<span v-if="errors.title" class="mt-1 block text-xs text-red-500">{{ errors.title }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
{{ t('purchase_addorder.remarks') }}
|
||||
<span class="text-gray-400">{{ form.remark.length }}/{{ textMaxLen }}</span>
|
||||
</label>
|
||||
<textarea
|
||||
v-model="form.remark"
|
||||
class="w-full rounded-lg border border-gray-300 bg-white px-3.5 py-2 text-sm outline-none transition-colors focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 dark:border-dk-muted dark:bg-dk-base dark:text-white"
|
||||
rows="4"
|
||||
:placeholder="t('purchase_addorder.remarks_text')"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-300">{{ t('purchase_addorder.photo_remarks') }}</label>
|
||||
<useDropzone acceptFiles="image/*" uploadURL="/api/files/upload/image" maxFiles="10" ref="photosRef" />
|
||||
</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>
|
||||
|
||||
<!-- Purchase Channel -->
|
||||
<div class="border-t border-gray-200 px-6 py-4 dark:border-dk-muted">
|
||||
<h4 class="text-sm font-semibold text-gray-900 dark:text-white">{{ t('purchase_addorder.purchase_channel') }}</h4>
|
||||
</div>
|
||||
<div class="space-y-4 px-6 py-5">
|
||||
<div>
|
||||
<label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-300">{{ t('purchase_addorder.link') }}</label>
|
||||
<textarea
|
||||
v-model="form.link"
|
||||
class="w-full rounded-lg border border-gray-300 bg-white px-3.5 py-2 text-sm outline-none transition-colors focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 dark:border-dk-muted dark:bg-dk-base dark:text-white"
|
||||
rows="2"
|
||||
placeholder="url"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-300">{{ t('purchase_addorder.part_name') }}</label>
|
||||
<input
|
||||
v-model="form.style_remarks"
|
||||
type="text"
|
||||
class="w-full rounded-lg border border-gray-300 bg-white px-3.5 py-2 text-sm outline-none transition-colors focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 dark:border-dk-muted dark:bg-dk-base dark:text-white"
|
||||
:placeholder="t('purchase_addorder.part_name')"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-300">{{ t('purchase_addorder.style_remarks') }}</label>
|
||||
<tagadder :placeholder="t('purchase_addorder.add_style')" v-model="form.notes" />
|
||||
</div>
|
||||
|
||||
<!-- costs table -->
|
||||
<div>
|
||||
<label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-300">{{ t('purchase_addorder.cost') }}</label>
|
||||
<div v-if="costEntries.length" class="mb-4 overflow-x-auto">
|
||||
<table class="w-full text-left text-sm text-gray-900">
|
||||
<thead>
|
||||
<tr class="border-b border-gray-200 bg-gray-50 text-gray-500 dark:border-dk-muted dark:bg-dk-base">
|
||||
<th class="px-3 py-2 font-medium">{{ t('purchase_addorder.type') }}</th>
|
||||
<th class="px-3 py-2 font-medium">{{ t('purchase_addorder.quantity') }}</th>
|
||||
<th class="px-3 py-2 font-medium">{{ t('purchase_addorder.fee') }}</th>
|
||||
<th class="px-3 py-2 font-medium">{{ t('purchase_addorder.total_price') }}</th>
|
||||
<th class="px-3 py-2 font-medium">{{ t('purchase_addorder.currency') }}</th>
|
||||
<th class="px-3 py-2 font-medium">{{ t('purchase_addorder.operation') }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(item, idx) in costEntries" :key="idx" class="border-b border-gray-100 dark:border-dk-muted">
|
||||
<td class="px-3 py-2 font-medium text-gray-900 dark:text-white">{{ costType[item.type] }}</td>
|
||||
<td class="px-3 py-2 text-gray-500">{{ item.qty }}</td>
|
||||
<td class="px-3 py-2 text-gray-500">{{ item.cost }}</td>
|
||||
<td class="px-3 py-2 text-gray-500">{{ item.cost_t }}</td>
|
||||
<td class="px-3 py-2 text-gray-500">{{ currencyOptions[item.currency_type] }}</td>
|
||||
<td class="px-3 py-2">
|
||||
<button class="rounded px-2 py-1 text-xs font-medium text-red-600 hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-900/20" @click="removeCostEntry(idx)">{{ t('purchase_addorder.remove') }}</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-4 sm:grid-cols-5">
|
||||
<div>
|
||||
<label class="mb-1 block text-xs font-medium text-gray-500">{{ t('purchase_addorder.fee_type') }}</label>
|
||||
<select v-model="newCost.type" class="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm dark:border-dk-muted dark:bg-dk-base dark:text-white">
|
||||
<template v-for="(label, key) in costType" :key="key">
|
||||
<option :value="key">{{ label }}</option>
|
||||
</template>
|
||||
</select>
|
||||
</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>
|
||||
<label class="mb-1 block text-xs font-medium text-gray-500">{{ t('purchase_addorder.input_quantity') }}</label>
|
||||
<input v-model.number="newCost.qty" type="number" class="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm dark:border-dk-muted dark:bg-dk-base dark:text-white" min="1" />
|
||||
</div>
|
||||
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">
|
||||
{{ t("purchase_addorder.purchase_channel") }}
|
||||
</h4>
|
||||
<div>
|
||||
<label class="mb-1 block text-xs font-medium text-gray-500">{{ t('purchase_addorder.input_fee') }}</label>
|
||||
<input v-model="newCost.cost" type="number" class="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm dark:border-dk-muted dark:bg-dk-base dark:text-white" step="0.01" min="0" />
|
||||
</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>
|
||||
<label class="mb-1 block text-xs font-medium text-gray-500">{{ t('purchase_addorder.select_currency') }}</label>
|
||||
<select v-model="newCost.currencyType" class="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm dark:border-dk-muted dark:bg-dk-base dark:text-white">
|
||||
<template v-for="(label, key) in currencyOptions" :key="key">
|
||||
<option :value="key">{{ label }}</option>
|
||||
</template>
|
||||
</select>
|
||||
</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 class="flex items-end">
|
||||
<button class="w-full rounded-lg border border-gray-300 bg-blue-600 px-3 py-2 text-sm font-semibold text-blue-100 transition-colors hover:bg-blue-700 focus:ring-2 focus:ring-blue-500/20 dark:border-dk-muted dark:text-white dark:bg-blue-600" @click="addCostEntry">{{ t('purchase_addorder.add') }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Order Status -->
|
||||
<div class="border-t border-gray-200 px-6 py-4 dark:border-dk-muted">
|
||||
<h4 class="text-sm font-semibold text-gray-900 dark:text-white">{{ t('purchase_addorder.order_status') }}</h4>
|
||||
</div>
|
||||
<div class="px-6 py-5">
|
||||
<div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
||||
<div>
|
||||
<label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
{{ t('purchase_addorder.update_time') }} <span class="text-red-500">*</span>
|
||||
</label>
|
||||
<datePicker v-model="form.tracking_number" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-300">{{ t('purchase_addorder.tracking_number') }}</label>
|
||||
<input
|
||||
v-model="form.express_number"
|
||||
type="text"
|
||||
class="w-full rounded-lg border border-gray-300 bg-white px-3.5 py-2 text-sm outline-none transition-colors focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 dark:border-dk-muted dark:bg-dk-base dark:text-white"
|
||||
:placeholder="t('purchase_addorder.input_tracking_number')"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-300">{{ t('purchase_addorder.order_status') }}</label>
|
||||
<select v-model="form.order_status" class="w-full rounded-lg border border-gray-300 bg-white px-3.5 py-2 text-sm dark:border-dk-muted dark:bg-dk-base dark:text-white">
|
||||
<template v-for="(label, key) in orderStatus" :key="key">
|
||||
<option :value="key">{{ label }}</option>
|
||||
</template>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<div class="flex justify-end border-t border-gray-200 px-6 py-4 dark:border-dk-muted">
|
||||
<button
|
||||
class="inline-flex items-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-sm font-semibold text-white transition-colors hover:bg-blue-700 focus:ring-2 focus:ring-blue-500/20 focus:outline-none disabled:active:scale-100"
|
||||
:disabled="loading"
|
||||
@click="handleSubmit"
|
||||
>
|
||||
<svg v-if="loading" class="h-4 w-4 animate-spin text-white" viewBox="0 0 24 24" fill="none">
|
||||
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
|
||||
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
|
||||
</svg>
|
||||
{{ t('purchase_addorder.submit') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<MyOffcanvas ref="mos" />
|
||||
</template>
|
||||
|
||||
<style></style>
|
||||
|
||||
@@ -1,422 +0,0 @@
|
||||
<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>
|
||||
@@ -1,14 +1,17 @@
|
||||
<script setup>
|
||||
import { onMounted, watch, ref, reactive } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
const router = useRouter();
|
||||
<script setup>
|
||||
import { useRouter } from 'vue-router'
|
||||
import { usePageTitle } from '@/composables/usePageTitle'
|
||||
|
||||
const dynamicParam = router
|
||||
|
||||
onMounted(() => {
|
||||
console.log(dynamicParam);
|
||||
});
|
||||
usePageTitle('purchase.add_part')
|
||||
const router = useRouter()
|
||||
const orderId = router.params.id
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
<div class="mx-auto max-w-6xl px-6 py-6">
|
||||
<h2 class="mb-6 text-2xl font-bold text-gray-900 dark:text-white">Order#{{ orderId }}</h2>
|
||||
<div class="rounded-xl border border-gray-200 bg-white px-12 py-12 text-center shadow-lg dark:border-dk-muted dark:bg-dk-card">
|
||||
<p class="text-gray-400">{{ $t('message.functionality_not_yet_developed') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user