feat(product-category):添加创建功能

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

@@ -28,7 +28,7 @@ const ruleForm = reactive<RuleForm>({
 });
 
 const rules = reactive<FormRules<RuleForm>>({
-	brand: [{ required: true, message: '请输入品牌', trigger: 'blur' }],
+	brand: [{ required: true, message: '请输入品牌名称', trigger: 'blur' }],
 });
 
 const submitForm = async (formEl: FormInstance | undefined) => {
@@ -65,7 +65,7 @@ const resetForm = (formEl: FormInstance | undefined) => {
 <template>
 	<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-form-item class="font-medium" label="品牌名称" prop="brand">
 						<el-input v-model="ruleForm.brand" placeholder="请输入品牌名称" style="width:328px"/>
 					</el-form-item>
 		</el-form>

src/views/sku-manage/product-category/api.ts

@@ -27,3 +27,11 @@ export function updateRow(query: any) {
   });
 }
 
+export function create(data:any) {
+  return request({
+    url: apiPrefix,
+    method: 'post',
+    data: data
+  })
+}
+

src/views/sku-manage/product-category/component/CreateDialog.vue

@@ -0,0 +1,81 @@
+<script lang="ts" setup>
+/**
+ * @Name: CreateDialog.vue
+ * @Description: 产品品牌-创建对话框
+ * @Author: xinyan
+ */
+
+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';
+import { create, createBrand } from '../api';
+
+const loading = ref(false);
+const createDialog = <Ref>useTemplateRef('createDialog');
+const createOpen = defineModel({ default: false });
+
+const emit = defineEmits(['refresh']);
+
+interface RuleForm {
+	name: any;
+}
+
+const ruleFormRef = ref<FormInstance>();
+const ruleForm = reactive<RuleForm>({
+	name: '',
+});
+
+const rules = reactive<FormRules<RuleForm>>({
+	name: [{ required: true, message: '请输入种类名称', trigger: 'blur' }],
+});
+
+const submitForm = async (formEl: FormInstance | undefined) => {
+	if (!formEl) return;
+	await formEl.validate(async (valid, fields) => {
+		if (valid) {
+			const body = {
+				name: ruleForm.name,
+			};
+			const res = await useResponse(api.create, body, loading);
+			if (res.code === 2000) {
+				ElMessage.success('创建成功');
+				createOpen.value = false;
+				emit('refresh');
+			}
+		} else {
+			// createOpen.value = false;
+			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: 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-form-item>
+		</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/sku-manage/product-category/component/DataTable.vue

@@ -16,6 +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-category/component/CreateDialog.vue';
 
 
 interface Parameter {
@@ -67,6 +68,7 @@ const gridOptions: any = reactive({
 });
 
 const editOpen = ref(false);
+const createOpen = ref(false);
 const rowData = ref({});
 
 const dialogVisible = ref(false);
@@ -97,6 +99,10 @@ function handleEdit(row: any) {
   rowData.value = row;
 }
 
+function handleCreate() {
+	createOpen.value = true;
+}
+
 async function singleDelete(row: any) {
   const res = await useResponse(api.deleteRow, row);
   if (res.code === 2000) {
@@ -123,7 +129,7 @@ defineExpose({ fetchList });
 <template>
   <vxe-grid ref="gridRef" v-bind="gridOptions" v-on="gridEvents">
     <template #toolbar_buttons>
-      <PermissionButton type="primary" :icon="Plus" plain round>新 增</PermissionButton>
+      <PermissionButton type="primary" :icon="Plus" plain round @click="handleCreate">新 增</PermissionButton>
     </template>
     <!-- 工具栏右侧 -->
     <template #toolbar_tools>
@@ -174,6 +180,8 @@ defineExpose({ fetchList });
   </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>