feat(price-approval):新增价格查看

src/views/price-approval/Columns.ts

@@ -1,42 +1,41 @@
 export const CostDetailColumns = [
-	{ type: 'seq', title: '序 号', width: 50, align: 'center' },
-	{ field: 'description', title: '描 述', minWidth: 300, align: 'center', showOverflow: true, slots: { default: 'description' } },
-	{ field: 'station', title: '地 区', width: 'auto', align: 'center', showOverflow: true, slots: { default:'station' } },
-	{ field: 'platform', title: '平 台', width: 'auto', align: 'center', showOverflow: true, slots: { default: 'platform' } },
-	{ field: '', title: '货币单位', width: 'auto', align: 'center', showOverflow: true,},
+	{ type: 'seq', title: '序 号', minWidth: 50, align: 'center' },
+	{ field: 'description', title: '描 述', minWidth: 200, align: 'center', showOverflow: true, slots: { default: 'description' } },
+	{ field: 'station', title: '地 区', minWidth: 100, align: 'center', showOverflow: true, slots: { default:'station' } },
+	{ field: 'platform', title: '平 台', minWidth: 100, align: 'center', showOverflow: true, slots: { default: 'platform' } },
+	// { field: '', title: '货币单位', minWidth: 'auto', align: 'center', showOverflow: true,},
 	{
 		title: '税费成本', align: 'center',
 		children: [
-			{ field: 'export_tax_rate', title: '出口报关费率', width: 'auto', align: 'center', },
-			{ field: 'import_tax_rate', title: '进口关税率', width: 'auto', align: 'center', },
-			{ field: 'VAT_rate', title: 'VAT', width: 'auto', align: 'center', },
+			{ field: 'export_tax_rate', title: '出口报关费率', minWidth: 'auto', align: 'center', },
+			{ field: 'import_tax_rate', title: '进口关税率', minWidth: 'auto', align: 'center', },
+			{ field: 'VAT_rate', title: 'VAT', minWidth: 'auto', align: 'center', },
 		],
 	},
 	{
 		title: '运输成本', align: 'center',
 		children: [
-			{ field: 'first_cost', title: '头程运输费率', width: 'auto', align: 'center', },
-			{ field: 'forwarding_fee', title: '转发费', width: 'auto', align: 'center', },
+			{ field: 'first_cost', title: '头程运输费率', minWidth: 'auto', align: 'center', },
+			{ field: 'forwarding_fee', title: '转发费', minWidth: 'auto', align: 'center', },
 		],
 	},
 
 	{
 		title: '销售成本', align: 'center',
 		children: [
-			{ field: 'return_or_refurbishment_rates', title: '退货与翻新费', width: 'auto', align: 'center',
+			{ field: 'return_or_refurbishment_rates', title: '退货与翻新费', minWidth: 'auto', align: 'center',
 				},
-			{ field: 'advertising_budget_rate', title: '广告预算费率', width: 'auto', align: 'center',
+			{ field: 'advertising_budget_rate', title: '广告预算费率', minWidth: 'auto', align: 'center',
 				},
-			{ field: 'storage_charges_rate', title: '仓储费', width: 'auto', align: 'center',
+			{ field: 'storage_charges_rate', title: '仓储费', minWidth: 'auto', align: 'center',
 				},
-			{ field: 'brokerage_rate', title: '佣金', width: 'auto', align: 'center',
+			{ field: 'brokerage_rate', title: '佣金', minWidth: 'auto', align: 'center',
 				},
 		],
 	},
 
-	{ field: '', title: '经营成本折算率', width: 'auto', align: 'center',
-		},
-	{ field: 'price_supply_rate', title: '供货价折算率', width: 'auto', align: 'center',
+	// { field: '', title: '经营成本折算率', minWidth: 'auto', align: 'center', },
+	{ field: 'price_supply_rate', title: '供货价折算率', minWidth: 'auto', align: 'center',
 		slots: { default: 'price_supply_rate' }},
 
 	{ field: 'operate', fixed: 'right', title: '操 作', align: 'center', width: 90, slots: { default: 'operate' } }

src/views/price-approval/cost-detail/component/CreateDialog.vue

@@ -0,0 +1,176 @@
+<script lang="ts" setup>
+/**
+ * @Name: CreateDialog.vue
+ * @Description: 成本查看-创建弹窗
+ * @Author: xinyan
+ */
+import * as api from '../api';
+import { ElMessage, FormInstance, FormRules } from 'element-plus';
+import { useResponse } from '/@/utils/useResponse';
+import { Close, Finished } from '@element-plus/icons-vue';
+
+const stationOptions = <Ref>inject('stationOptions');
+const platformOptions = <Ref>inject('platformOptions');
+const loading = ref(false);
+const createDialog = <Ref>useTemplateRef('createDialog');
+const createOpen = defineModel({ default: false });
+
+const emit = defineEmits(['refresh']);
+
+interface RuleForm {
+	description: any;
+	station: any;
+	platform: any;
+	export_tax_rate: any;
+	import_tax_rate: any;
+	VAT_rate: any;
+	first_cost: any;
+	forwarding_fee: any;
+	return_or_refurbishment_rates: any;
+	advertising_budget_rate: any;
+	storage_charges_rate: any;
+	brokerage_rate: any;
+	price_supply_rate: any;
+}
+
+const ruleFormRef = ref<FormInstance>();
+const ruleForm = reactive<RuleForm>({
+	description: '',
+	station: '',
+	platform: '',
+	export_tax_rate: '',
+	import_tax_rate: '',
+	VAT_rate: '',
+	first_cost: '',
+	forwarding_fee: '',
+	return_or_refurbishment_rates: '',
+	advertising_budget_rate: '',
+	storage_charges_rate: '',
+	brokerage_rate: '',
+	price_supply_rate: '',
+});
+
+const rules = reactive<FormRules<RuleForm>>({
+	description: [{ required: true, message: '请输入描述', trigger: 'blur' }],
+	station: [{ required: true, message: '请选择地区', trigger: 'change' }],
+	platform: [{ required: true, message: '请输入平台', trigger: 'blur' }],
+	export_tax_rate: [{ required: true, message: '请输入出口报关费率', trigger: 'blur' }],
+	import_tax_rate: [{ required: true, message: '请输入进口关税率', trigger: 'blur' }],
+	VAT_rate: [{ required: true, message: '请输入VAT', trigger: 'blur' }],
+	first_cost: [{ required: true, message: '请输入头程运输费率', trigger: 'blur' }],
+	forwarding_fee: [{ required: true, message: '请输入转发费', trigger: 'blur' }],
+	return_or_refurbishment_rates: [{ required: true, message: '请输入退货与翻新费', trigger: 'blur' }],
+	advertising_budget_rate: [{ required: true, message: '请输入广告预算费率', trigger: 'blur' }],
+	storage_charges_rate: [{ required: true, message: '请输入仓储费', trigger: 'blur' }],
+	brokerage_rate: [{ required: true, message: '请输入佣金', trigger: 'blur' }],
+	price_supply_rate: [{ required: true, message: '请输入供货价折算率', trigger: 'blur' }],
+});
+
+const submitForm = async (formEl: FormInstance | undefined) => {
+	if (!formEl) return;
+	await formEl.validate(async (valid, fields) => {
+		if (valid) {
+			const body = {
+				description: ruleForm.description,
+				station: ruleForm.station,
+				platform: ruleForm.platform,
+				export_tax_rate: ruleForm.export_tax_rate,
+				import_tax_rate: ruleForm.import_tax_rate,
+				VAT_rate: ruleForm.VAT_rate,
+				first_cost: ruleForm.first_cost,
+				forwarding_fee: ruleForm.forwarding_fee,
+				return_or_refurbishment_rates: ruleForm.return_or_refurbishment_rates,
+				advertising_budget_rate: ruleForm.advertising_budget_rate,
+				storage_charges_rate: ruleForm.storage_charges_rate,
+				brokerage_rate: ruleForm.brokerage_rate,
+			};
+			const res = await useResponse(api.postCost, body, loading);
+			if (res.code === 2000) {
+				ElMessage.success({ message: '创建成功', plain: true, icon: 'CirclePlus' });
+				createOpen.value = false;
+				emit('refresh');
+			} else {
+				ElMessage.error('创建失败，请检查表单');
+			}
+		}
+	});
+};
+
+function cancelDialog() {
+	resetForm(ruleFormRef.value);
+	createDialog.value.visible = false;
+}
+
+const resetForm = (formEl: FormInstance | undefined) => {
+	if (!formEl) return;
+	formEl.resetFields();
+};
+</script>
+
+<template>
+	<el-dialog
+		ref="createDialog"
+		v-model="createOpen"
+		:close-on-click-modal="false"
+		:close-on-press-escape="false"
+		:title="`成本查看 - 创建 `"
+		style="width: 40%"
+	>
+		<el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" class="mx-2.5 mt-5" label-position="top" label-width="auto" status-icon>
+			<el-row :gutter="20">
+				<el-col :span="12">
+					<el-form-item class="font-medium" label="描 述" prop="description">
+						<el-input v-model="ruleForm.description" placeholder="请输入描述" />
+					</el-form-item>
+					<el-form-item class="font-medium" label="地 区" prop="station">
+						<el-select v-model="ruleForm.station" placeholder="请选择地区">
+							<el-option v-for="item in stationOptions" :key="item" :label="item" :value="item" />
+						</el-select>
+					</el-form-item>
+					<el-form-item class="font-medium" label="进口关税率" prop="import_tax_rate">
+						<el-input v-model="ruleForm.import_tax_rate" placeholder="请输入进口关税率"></el-input>
+					</el-form-item>
+					<el-form-item class="font-medium" label="头程运输费率" prop="first_cost">
+						<el-input v-model="ruleForm.first_cost" placeholder="请输入头程运输费率"></el-input>
+					</el-form-item>
+					<el-form-item class="font-medium" label="退货与翻新费" prop="return_or_refurbishment_rates">
+						<el-input v-model="ruleForm.return_or_refurbishment_rates" placeholder="请输入退货与翻新费"></el-input>
+					</el-form-item>
+					<el-form-item class="font-medium" label="仓储费" prop="storage_charges_rate">
+						<el-input v-model="ruleForm.storage_charges_rate" placeholder="请输入仓储费"></el-input>
+					</el-form-item>
+					<el-form-item class="font-medium" label="供货价折算率" prop="price_supply_rate">
+						<el-input v-model="ruleForm.price_supply_rate" placeholder="请输入供货价折算率"></el-input>
+					</el-form-item>
+				</el-col>
+
+				<el-col :span="12">
+					<el-form-item class="font-medium" label="平 台" prop="platform">
+						<el-input v-model="ruleForm.platform" placeholder="请输入平台" />
+					</el-form-item>
+					<el-form-item class="font-medium" label="出口报关费率" prop="export_tax_rate">
+						<el-input v-model="ruleForm.export_tax_rate" placeholder="请输入出口报关费率"></el-input>
+					</el-form-item>
+					<el-form-item class="font-medium" label="VAT" prop="VAT_rate">
+						<el-input v-model="ruleForm.VAT_rate" placeholder="请输入VAT"></el-input>
+					</el-form-item>
+					<el-form-item class="font-medium" label="转发费" prop="forwarding_fee">
+						<el-input v-model="ruleForm.forwarding_fee" placeholder="请输入转发费"></el-input>
+					</el-form-item>
+					<el-form-item class="font-medium" label="广告预算费率" prop="advertising_budget_rate">
+						<el-input v-model="ruleForm.advertising_budget_rate" placeholder="请输入广告预算费率"></el-input>
+					</el-form-item>
+					<el-form-item class="font-medium" label="佣金" prop="brokerage_rate">
+						<el-input v-model="ruleForm.brokerage_rate" placeholder="请输入佣金"></el-input>
+					</el-form-item>
+				</el-col>
+			</el-row>
+		</el-form>
+		<template #footer>
+			<el-button :icon="Close" @click="cancelDialog">取 消</el-button>
+			<el-button :icon="Finished" :loading="loading" type="primary" @click="submitForm(ruleFormRef)">确 定</el-button>
+		</template>
+	</el-dialog>
+</template>
+
+<style scoped></style>

src/views/price-approval/cost-detail/component/DataTable.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 /**
  * @Name: DataTable.vue
- * @Description:
+ * @Description: 成本查看-表格
  * @Author: xinyan
  */
 
@@ -14,11 +14,11 @@ import { uesDownloadFile } from '/@/utils/useDownload';
 import PermissionButton from '/src/components/PermissionButton/index.vue';
 import ImportButton from '/src/components/ImportButton/index.vue';
 import VerticalDivider from '/src/components/VerticalDivider/index.vue';
-import EditDrawer from '/src/views/product-manage/product-list/component/EditDrawer.vue';
-import NoticeDialog from '/src/views/product-manage/product-list/component/NoticeDialog.vue';
 import * as api from '../api';
 import { useResponse } from '/@/utils/useResponse';
 import { CostDetailColumns } from '/@/views/price-approval/Columns';
+import CreateDialog from '/@/views/price-approval/cost-detail/component/CreateDialog.vue';
+import EditDrawer from '/@/views/price-approval/cost-detail/component/EditDrawer.vue';
 
 interface Parameter {
 	description: string;
@@ -74,6 +74,7 @@ const checkedList = ref<Set<number>>(new Set());
 const btnLoading = ref(false);
 
 const editOpen = ref(false);
+const createOpen = ref(false);
 const rowData = ref({});
 
 const dialogVisible = ref(false);
@@ -152,7 +153,9 @@ function selectAllChangeEvent({ checked }: any) {
 	}
 }
 
-function handleCreate() {}
+function handleCreate() {
+	createOpen.value = true;
+}
 
 function handleEdit(row: any) {
 	editOpen.value = true;
@@ -283,7 +286,7 @@ defineExpose({ fetchList });
 		</template>
 	</vxe-grid>
 	<EditDrawer v-if="editOpen" v-model="editOpen" :row-data="rowData" @refresh="handleRefresh" />
-	<NoticeDialog v-if="dialogVisible" v-model="dialogVisible" :row-data="rowData" />
+	<CreateDialog v-if="createOpen" v-model="createOpen" @refresh="fetchList" />
 </template>
 
 <style scoped>

src/views/price-approval/cost-detail/component/EditDrawer.vue

@@ -0,0 +1,168 @@
+<script lang="ts" setup>
+/**
+ * @Name: EditDrawer.vue
+ * @Description: 成本查看-编辑抽屉
+ * @Author: xinyan
+ */
+import { ElMessage, FormInstance, FormRules } from 'element-plus';
+import { Close, Finished } from '@element-plus/icons-vue';
+import { useResponse } from '/@/utils/useResponse';
+import * as api from '../api';
+
+
+const stationOptions = <Ref>inject('stationOptions');
+const btnLoading = ref(false);
+
+const editOpen = defineModel({ default: false });
+
+const editDrawer = <Ref>useTemplateRef('editDrawer');
+
+const props: any = defineProps({
+	rowData: Object,
+});
+const { rowData } = props;
+
+const emit = defineEmits(['refresh']);
+
+interface RuleForm {
+	description: any;
+	station: any;
+	platform: any;
+	export_tax_rate: any;
+	import_tax_rate: any;
+	VAT_rate: any;
+	first_cost: any;
+	forwarding_fee: any;
+	return_or_refurbishment_rates: any;
+	advertising_budget_rate: any;
+	storage_charges_rate: any;
+	brokerage_rate: any;
+	price_supply_rate: any;
+}
+
+const ruleFormRef = ref<FormInstance>();
+const ruleForm = reactive<RuleForm>({
+	description: rowData?.description,
+	station: rowData?.station,
+	platform: rowData?.platform,
+	export_tax_rate: rowData?.export_tax_rate,
+	import_tax_rate: rowData?.import_tax_rate,
+	VAT_rate: rowData?.VAT_rate,
+	first_cost: rowData?.first_cost,
+	forwarding_fee: rowData?.forwarding_fee,
+	return_or_refurbishment_rates: rowData?.return_or_refurbishment_rates,
+	advertising_budget_rate: rowData?.advertising_budget_rate,
+	storage_charges_rate: rowData?.storage_charges_rate,
+	brokerage_rate: rowData?.brokerage_rate,
+	price_supply_rate: rowData?.price_supply_rate,
+});
+
+const rules = reactive<FormRules<RuleForm>>({});
+
+const submitForm = async (formEl: FormInstance | undefined) => {
+	if (!formEl) return;
+	await formEl.validate(async (valid, fields) => {
+		if (valid) {
+			try {
+				const res = await useResponse(api.updateRow, { id: rowData?.id, ...ruleForm }, btnLoading);
+				if (res && res.code == 2000) {
+					editOpen.value = false;
+					ElMessage.success({ message: '编辑成功', plain: true, icon: 'Operation' });
+					emit('refresh');
+				}
+			} catch (error) {
+				console.error('Error==>', error);
+			}
+		} else {
+			console.log('error submit!', fields);
+		}
+	});
+};
+
+function closeDrawer() {
+	editDrawer.value.handleClose();
+}
+</script>
+
+<template>
+	<div class="drawer-container">
+		<el-drawer
+			ref="editDrawer"
+			v-model="editOpen"
+			:close-on-click-modal="false"
+			:close-on-press-escape="false"
+			:title="`成本查看 - 编辑 `"
+			size="30%"
+		>
+			<el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" class="mx-2.5 mt-7" label-position="top" label-width="auto" status-icon>
+				<el-row :gutter="20">
+					<el-col :span="12">
+						<el-form-item class="font-medium" label="描 述" prop="description">
+							<el-input v-model="ruleForm.description" placeholder="请输入描述" />
+						</el-form-item>
+						<el-form-item class="font-medium" label="地 区" prop="station">
+							<el-select v-model="ruleForm.station" placeholder="请选择地区">
+								<el-option v-for="item in stationOptions" :key="item" :label="item" :value="item" />
+							</el-select>
+						</el-form-item>
+						<el-form-item class="font-medium" label="进口关税率" prop="import_tax_rate">
+							<el-input v-model="ruleForm.import_tax_rate" placeholder="请输入进口关税率"></el-input>
+						</el-form-item>
+						<el-form-item class="font-medium" label="头程运输费率" prop="first_cost">
+							<el-input v-model="ruleForm.first_cost" placeholder="请输入头程运输费率"></el-input>
+						</el-form-item>
+						<el-form-item class="font-medium" label="退货与翻新费" prop="return_or_refurbishment_rates">
+							<el-input v-model="ruleForm.return_or_refurbishment_rates" placeholder="请输入退货与翻新费"></el-input>
+						</el-form-item>
+						<el-form-item class="font-medium" label="仓储费" prop="storage_charges_rate">
+							<el-input v-model="ruleForm.storage_charges_rate" placeholder="请输入仓储费"></el-input>
+						</el-form-item>
+						<el-form-item class="font-medium" label="供货价折算率" prop="price_supply_rate">
+							<el-input v-model="ruleForm.price_supply_rate" placeholder="请输入供货价折算率"></el-input>
+						</el-form-item>
+					</el-col>
+
+					<el-col :span="12">
+						<el-form-item class="font-medium" label="平 台" prop="platform">
+							<el-input v-model="ruleForm.platform" placeholder="请输入平台" />
+						</el-form-item>
+						<el-form-item class="font-medium" label="出口报关费率" prop="export_tax_rate">
+							<el-input v-model="ruleForm.export_tax_rate" placeholder="请输入出口报关费率"></el-input>
+						</el-form-item>
+						<el-form-item class="font-medium" label="VAT" prop="VAT_rate">
+							<el-input v-model="ruleForm.VAT_rate" placeholder="请输入VAT"></el-input>
+						</el-form-item>
+						<el-form-item class="font-medium" label="转发费" prop="forwarding_fee">
+							<el-input v-model="ruleForm.forwarding_fee" placeholder="请输入转发费"></el-input>
+						</el-form-item>
+						<el-form-item class="font-medium" label="广告预算费率" prop="advertising_budget_rate">
+							<el-input v-model="ruleForm.advertising_budget_rate" placeholder="请输入广告预算费率"></el-input>
+						</el-form-item>
+						<el-form-item class="font-medium" label="佣金" prop="brokerage_rate">
+							<el-input v-model="ruleForm.brokerage_rate" placeholder="请输入佣金"></el-input>
+						</el-form-item>
+					</el-col>
+				</el-row>
+
+				<el-form-item>
+					<el-divider />
+					<div class="flex flex-1 justify-end">
+						<el-button :icon="Close" @click="closeDrawer">取 消</el-button>
+						<el-button :icon="Finished" :loading="btnLoading" type="primary" @click="submitForm(ruleFormRef)"> 确 定 </el-button>
+					</div>
+				</el-form-item>
+			</el-form>
+		</el-drawer>
+	</div>
+</template>
+
+<style scoped>
+.drawer-container :deep(.el-drawer__header) {
+	border-bottom: none;
+	font-weight: 500;
+}
+
+.drawer-container :deep(.el-drawer__title) {
+	font-size: 18px;
+}
+</style>

src/views/price-approval/cost-detail/index.vue

@@ -1,21 +1,17 @@
-<script setup lang="ts">
+<script lang="ts" setup>
 /**
  * @Name: index.vue
  * @Description: 成本查看
  * @Author: xinyan
  */
 
-
 import VerticalDivider from '/src/components/VerticalDivider/index.vue';
 import { RefreshLeft, Search } from '@element-plus/icons-vue';
-import { DictionaryStore } from '/@/stores/dictionary';
 import { useResponse } from '/@/utils/useResponse';
 import { useTemplateRef } from 'vue';
 import * as api from './api';
-import { useCustomHeight } from '/@/utils/useCustomHeight';
 import DataTable from './component/DataTable.vue';
 import { useTableHeight } from '/@/utils/useTableHeight';
-import { getCostOptions } from './api';
 
 const titleContainer: Ref<HTMLElement | null> = useTemplateRef('titleContainer');
 const queryContainer: Ref<HTMLElement | null> = useTemplateRef('queryContainer');
@@ -27,8 +23,8 @@ const btnLoading = ref(false);
 const resetLoading = ref(false);
 
 const formInline = reactive<any>({
-	description:'',
-	platform:'',
+	description: '',
+	platform: '',
 	station: '',
 });
 provide('query-parameter', formInline);
@@ -39,7 +35,6 @@ const platformOptions = <any>ref([]);
 provide('stationOptions', stationOptions);
 provide('platformOptions', platformOptions);
 
-
 onBeforeMount(() => {
 	fetchOptions();
 });
@@ -47,7 +42,7 @@ onBeforeMount(() => {
 async function fetchOptions() {
 	const resp = (await useResponse(api.getCostOptions)).data;
 	platformOptions.value = resp.platform_list;
-	stationOptions.value= resp.station_list;
+	stationOptions.value = resp.station_list;
 }
 
 async function handleQuery() {
@@ -68,13 +63,13 @@ async function resetParameter() {
 
 <template>
 	<div class="p-5">
-		<el-card class="h-full" style="color: rgba(0, 0, 0, 0.88);">
+		<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-row :gutter="20" style="margin-bottom: 5px">
 							<el-col :span="5">
 								<div class="flex items-center">
 									<span class="mr-2">描 述</span>
@@ -85,8 +80,7 @@ async function resetParameter() {
 								<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-option v-for="item in platformOptions" :key="item" :label="item" :value="item"> </el-option>
 									</el-select>
 								</div>
 							</el-col>
@@ -94,8 +88,7 @@ async function resetParameter() {
 								<div class="flex items-center">
 									<span class="mr-2">地 区</span>
 									<el-select v-model="formInline.station" placeholder="请选择地区">
-										<el-option v-for="item in stationOptions" :key="item" :label="item" :value="item">
-										</el-option>
+										<el-option v-for="item in stationOptions" :key="item" :label="item" :value="item"> </el-option>
 									</el-select>
 								</div>
 							</el-col>
@@ -104,16 +97,13 @@ async function resetParameter() {
 				</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 :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;" />
+			<el-divider ref="dividerContainer" style="margin: 20px 0 12px 0" />
 			<div :style="{ height: tableHeight + 'px' }">
 				<DataTable ref="table" />
 			</div>
@@ -121,6 +111,4 @@ async function resetParameter() {
 	</div>
 </template>
 
-<style scoped>
-
-</style>
+<style scoped></style>

src/views/sku-manage/company-sku/index.vue

@@ -89,7 +89,7 @@ async function resetParameter() {
               <el-col :span="4">
                 <div class="flex items-center">
                   <span class="mr-2">状 态</span>
-                  <el-select v-model="formInline.status" clearable placeholder="请选择">
+                  <el-select v-model="formInline.status" clearable placeholder="请选择状态">
                     <el-option v-for="item in statusOptions" :key="item.key" :label="item.name" :value="item.key" />
                   </el-select>
                 </div>