feat(sku-manage):创建弹窗取消方法修改

src/views/product-manage/competitor-monitor/component/createDialog.vue → src/views/product-manage/competitor-monitor/component/CreateDialog.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 /**
- * @Name: createDialog.vue
+ * @Name: CreateDialog.vue
  * @Description: 竞品监控-创建对话框
  * @Author: xinyan
  */
@@ -17,6 +17,7 @@ const statusOptions = [{ label: '正常', value: 1 }];
 const { data: staticData } = DictionaryStore();
 
 const loading = ref(false);
+const createDialog = <Ref>useTemplateRef('createDialog');
 const createOpen = defineModel({ default: false });
 
 const emit = defineEmits(['refresh']);
@@ -77,6 +78,11 @@ const submitForm = async (formEl: FormInstance | undefined) => {
 	});
 };
 
+function cancelDialog() {
+	resetForm(ruleFormRef.value);
+	createDialog.value.visible = false;
+}
+
 const resetForm = (formEl: FormInstance | undefined) => {
 	if (!formEl) return;
 	formEl.resetFields();
@@ -84,7 +90,7 @@ const resetForm = (formEl: FormInstance | undefined) => {
 </script>
 
 <template>
-	<el-dialog v-model="createOpen" :close-on-click-modal="false" :close-on-press-escape="false" :title="`竞品监控 - 创建 `" style="width: 40%">
+	<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="24">
@@ -145,8 +151,8 @@ const resetForm = (formEl: FormInstance | undefined) => {
 			</el-row>
 		</el-form>
 		<template #footer>
-			<el-button :icon="Finished" @click="resetForm(ruleFormRef);createOpen = false">取 消</el-button>
-			<el-button :icon="Close" :loading="loading" type="primary" @click="submitForm(ruleFormRef)">确 定</el-button>
+			<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>

src/views/product-manage/competitor-monitor/component/DataTable.vue

@@ -16,7 +16,7 @@ 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 './EditDrawer.vue';
-import CreateDialog from '/@/views/product-manage/competitor-monitor/component/createDialog.vue';
+import CreateDialog from '/src/views/product-manage/competitor-monitor/component/CreateDialog.vue';
 import * as api from '../api';
 import { downloadFile } from '/@/utils/service';
 

src/views/product-manage/product-monitor/component/createDialog.vue → src/views/product-manage/product-monitor/component/CreateDialog.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 /**
- * @Name: createDialog.vue
+ * @Name: CreateDialog.vue
  * @Description: 商品监控-创建对话框
  * @Author: xinyan
  */
@@ -9,12 +9,14 @@ import { ElMessage, FormInstance, FormRules } from 'element-plus';
 import { DictionaryStore } from '/@/stores/dictionary';
 import { useResponse } from '/@/utils/useResponse';
 import * as api from '../api';
+import { Close, Finished } from '@element-plus/icons-vue';
 
 const shopOptions = <Ref>inject('shopOptions');
 const groupOptions = <Ref>inject('groupOptions');
 const { data: staticData } = DictionaryStore();
 
 const loading = ref(false);
+const createDialog = <Ref>useTemplateRef('createDialog');
 const createOpen = defineModel({ default: false });
 
 const emit = defineEmits(['refresh']);
@@ -48,7 +50,6 @@ const rules = reactive<FormRules<RuleForm>>({
 	country: [{ required: true, message: '请选择国家', trigger: 'change' }],
 	shop: [{ required: true, message: '请输入店铺', trigger: 'blur' }],
 	group: [{ required: true, message: '请输入分组', trigger: 'blur' }],
-	status: [{ message: '请选择状态', trigger: 'blur' }],
 	// frequency: [ { message: '请选择更新频率', trigger: 'blur' } ]
 });
 
@@ -82,6 +83,11 @@ const submitForm = async (formEl: FormInstance | undefined) => {
 	});
 };
 
+function cancelDialog() {
+	resetForm(ruleFormRef.value);
+	createDialog.value.visible = false;
+}
+
 const resetForm = (formEl: FormInstance | undefined) => {
 	if (!formEl) return;
 	formEl.resetFields();
@@ -89,7 +95,7 @@ const resetForm = (formEl: FormInstance | undefined) => {
 </script>
 
 <template>
-	<el-dialog v-model="createOpen" :close-on-click-modal="false" :close-on-press-escape="false" :title="`商品监控 - 创建 `" style="width: 40%">
+	<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" label-position="top" label-width="auto" class="mx-2.5 mt-5" status-icon>
 			<el-row :gutter="20">
 				<el-col :span="24">
@@ -142,8 +148,8 @@ const resetForm = (formEl: FormInstance | undefined) => {
 			</el-row>
 		</el-form>
 		<template #footer>
-			<el-button :icon="Finished" @click="resetForm(ruleFormRef);createOpen = false">取 消</el-button>
-			<el-button :icon="Close" :loading="loading" type="primary" @click="submitForm(ruleFormRef)">确 定</el-button>
+			<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>

src/views/product-manage/product-monitor/component/DataTable.vue

@@ -16,7 +16,7 @@ import PermissionButton from '/src/components/PermissionButton/index.vue';
 import VerticalDivider from '/src/components/VerticalDivider/index.vue';
 import ImportButton from '/src/components/ImportButton/index.vue';
 import EditDrawer from './EditDrawer.vue';
-import CreateDialog from '/@/views/product-manage/product-monitor/component/createDialog.vue';
+import CreateDialog from '/src/views/product-manage/product-monitor/component/CreateDialog.vue';
 import * as api from '../api';
 import { downloadFile } from '/@/utils/service';
 

src/views/sku-manage/product-attribute/component/createDialog.vue → src/views/sku-manage/product-attribute/component/CreateDialog.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 /**
- * @Name: createDialog.vue
+ * @Name: CreateDialog.vue
  * @Description: 产品属性-创建对话框
  * @Author: xinyan
  */
@@ -13,6 +13,7 @@ import { Close, Finished } from '@element-plus/icons-vue';
 import { createAttr, createBrand } from '../api';
 
 const loading = ref(false);
+const createDialog = <Ref>useTemplateRef('createDialog');
 const createOpen = defineModel({ default: false });
 
 const emit = defineEmits(['refresh']);
@@ -54,6 +55,11 @@ const submitForm = async (formEl: FormInstance | undefined) => {
 	});
 };
 
+function cancelDialog() {
+	resetForm(ruleFormRef.value);
+	createDialog.value.visible = false;
+}
+
 const resetForm = (formEl: FormInstance | undefined) => {
 	if (!formEl) return;
 	formEl.resetFields();
@@ -61,18 +67,18 @@ const resetForm = (formEl: FormInstance | undefined) => {
 </script>
 
 <template>
-	<el-dialog v-model="createOpen" :close-on-click-modal="false" :close-on-press-escape="false" :title="`产品品牌 - 创建 `" style="width: 30%">
-		<el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" class="mx-2.5 mt-5" label-position="top" label-width="auto" status-icon>
+	<el-dialog ref="createDialog" v-model="createOpen" :close-on-click-modal="false" :close-on-press-escape="false" :title="`产品品牌 - 创建 `" style="width: 30%">
+		<el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" class="mx-2.5 mt-5" label-width="auto" status-icon>
 					<el-form-item class="font-medium" label="属性名称" prop="name">
-						<el-input v-model="ruleForm.name" placeholder="请输入品牌名称" style="width:328px"/>
+						<el-input v-model="ruleForm.name" placeholder="请输入属性名称" style="width:328px"/>
 					</el-form-item>
 				<el-form-item class="font-medium" label="属性标识" prop="key">
 						<el-input v-model="ruleForm.key" placeholder="请输入属性标识" style="width:328px"/>
 					</el-form-item>
 		</el-form>
 		<template #footer>
-			<el-button :icon="Finished" @click="resetForm(ruleFormRef);createOpen = false">取 消</el-button>
-			<el-button :icon="Close" :loading="loading" type="primary" @click="submitForm(ruleFormRef)">确 定</el-button>
+			<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>

src/views/sku-manage/product-attribute/component/DataTable.vue

@@ -16,7 +16,7 @@ import DataTableSlot from './DataTableSlot.vue';
 import EditDrawer from './EditDrawer.vue';
 import NoticeDialog from '/src/views/product-manage/product-list/component/NoticeDialog.vue';
 import * as api from '../api';
-import CreateDialog from '/@/views/sku-manage/product-attribute/component/createDialog.vue';
+import CreateDialog from '/src/views/sku-manage/product-attribute/component/CreateDialog.vue';
 
 
 interface Parameter {

src/views/sku-manage/product-brand/component/createDialog.vue → src/views/sku-manage/product-brand/component/CreateDialog.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 /**
- * @Name: createDialog.vue
+ * @Name: CreateDialog.vue
  * @Description: 产品品牌-创建对话框
  * @Author: xinyan
  */
@@ -13,6 +13,7 @@ import { Close, Finished } from '@element-plus/icons-vue';
 import { createBrand } from '../api';
 
 const loading = ref(false);
+const createDialog = <Ref>useTemplateRef('createDialog');
 const createOpen = defineModel({ default: false });
 
 const emit = defineEmits(['refresh']);
@@ -50,6 +51,11 @@ const submitForm = async (formEl: FormInstance | undefined) => {
 	});
 };
 
+function cancelDialog() {
+	resetForm(ruleFormRef.value);
+	createDialog.value.visible = false;
+}
+
 const resetForm = (formEl: FormInstance | undefined) => {
 	if (!formEl) return;
 	formEl.resetFields();
@@ -57,15 +63,16 @@ const resetForm = (formEl: FormInstance | undefined) => {
 </script>
 
 <template>
-	<el-dialog v-model="createOpen" :close-on-click-modal="false" :close-on-press-escape="false" :title="`产品品牌 - 创建 `" style="width: 30%">
-		<el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" class="mx-2.5 mt-5" label-position="top" label-width="auto" status-icon>
-					<el-form-item class="font-medium" label="品牌名称" prop="brand">
+	<el-dialog ref="createDialog" v-model="createOpen" :close-on-click-modal="false" :close-on-press-escape="false" :title="`产品品牌 - 创建 `" style="width: 30%">
+		<el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" class="mx-2.5 mt-5" label-width="auto" status-icon>
+					<el-form-item class="font-medium" label="名称" prop="brand">
 						<el-input v-model="ruleForm.brand" placeholder="请输入品牌名称" style="width:328px"/>
 					</el-form-item>
 		</el-form>
 		<template #footer>
-			<el-button :icon="Finished" @click="resetForm(ruleFormRef);createOpen = false">取 消</el-button>
-			<el-button :icon="Close" :loading="loading" type="primary" @click="submitForm(ruleFormRef)">确 定</el-button>
+
+			<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>

src/views/sku-manage/product-brand/component/DataTable.vue

@@ -16,7 +16,7 @@ import DataTableSlot from './DataTableSlot.vue';
 import EditDrawer from './EditDrawer.vue';
 import NoticeDialog from '/src/views/product-manage/product-list/component/NoticeDialog.vue';
 import * as api from '../api';
-import CreateDialog from '/@/views/sku-manage/product-brand/component/createDialog.vue';
+import CreateDialog from '/src/views/sku-manage/product-brand/component/CreateDialog.vue';
 
 
 interface Parameter {