opt_web/src/views/price-approval/approval-review-supply/index.vue

<script lang="ts" setup>
/**
 * @Name: index.vue
 * @Description: 审批查看(供货)
 * @Author: Cheney
 */

import VerticalDivider from '/src/components/VerticalDivider/index.vue';
import { RefreshLeft, Search } from '@element-plus/icons-vue';
import { useResponse } from '/@/utils/useResponse';
import { useTemplateRef } from 'vue';
import * as api from './api';
import DataTable from '/@/views/price-approval/approval-review-supply/components/DataTable.vue';
import { useTableHeight } from '/@/utils/useTableHeight';


const titleContainer: Ref<HTMLElement | null> = useTemplateRef('titleContainer');
const queryContainer: Ref<HTMLElement | null> = useTemplateRef('queryContainer');
const { tableHeight } = useTableHeight(titleContainer, queryContainer);

const tableRef: Ref<any> = useTemplateRef('table');

const btnLoading = ref(false);
const resetLoading = ref(false);

const formInline = reactive<any>({
	sku: '',
	platform: '',
	country_code: '',
	sales_mode: '',
});
provide('query-parameter', formInline);

const countryOptions = <any>ref([]);
const platformOptions = <any>ref([]);

onBeforeMount(() => {
	fetchOptions();
});

async function fetchOptions() {
	const resp = (await useResponse(api.getOptions)).data;
	platformOptions.value = resp.platform;
	countryOptions.value = resp.country_code;
}

async function handleQuery() {
	btnLoading.value = true;
	await tableRef.value?.fetchList(true);
	btnLoading.value = false;
}

async function resetParameter() {
	for (const key in formInline) {
		formInline[key] = '';
	}
	resetLoading.value = true;
	await tableRef.value?.fetchList(true);
	resetLoading.value = false;
}
</script>

<template>
	<div class="p-5">
		<el-card class="h-full" style="color: rgba(0, 0, 0, 0.88);">
			<div ref="titleContainer" class="text-xl font-semibold pb-5">审批查看(供货)</div>
			<!-- 查询条件 -->
			<div ref="queryContainer" class="flex justify-between">
				<div class="flex flex-1">
					<div class="w-full whitespace-nowrap">
						<el-row :gutter="20" style="margin-bottom: 5px">
							<el-col :span="5">
								<div class="flex items-center">
									<span class="mr-2">SKU</span>
									<el-input v-model="formInline.sku" clearable placeholder="请输入SKU" />
								</div>
							</el-col>
							<el-col :span="5">
								<div class="flex items-center">
									<span class="mr-2">平 台</span>
									<el-select v-model="formInline.platform" placeholder="请选择平台">
										<el-option v-for="item in platformOptions" :key="item" :label="item" :value="item"> </el-option>
									</el-select>
								</div>
							</el-col>
							<el-col :span="5" class="flex">
								<div class="flex items-center">
									<span class="mr-2">国 家</span>
									<el-select v-model="formInline.country_code" clearable placeholder="请选择国家">
										<el-option v-for="item in countryOptions" :key="item" :label="item" :value="item"></el-option>
									</el-select>
								</div>
							</el-col>
							<el-col :span="5">
								<div class="flex items-center">
									<span class="mr-2">销售模式</span>
									<el-select v-model="formInline.sales_mode" clearable placeholder="请选择销售模式">
										<el-option label="线上" value="线上"></el-option>
										<el-option label="线下" value="线下"></el-option>
									</el-select>
								</div>
							</el-col>
						</el-row>
					</div>
				</div>
				<VerticalDivider />
				<div class="flex gap-1.5 ml-5">
					<el-button :icon="Search" :loading="btnLoading" type="primary" @click="handleQuery">
						查 询
					</el-button>
					<el-button :icon="RefreshLeft" :loading="resetLoading" color="#ECECF1C9" style="width: 88px; color: #3c3c3c;"
										 @click="resetParameter">
						重 置
					</el-button>
				</div>
			</div>
			<el-divider ref="dividerContainer" style="margin: 20px 0 12px 0;" />
			<div :style="{ height: tableHeight + 'px' }">
				<DataTable ref="table" />
			</div>
		</el-card>
	</div>
</template>

<style scoped>

</style>