feat(sku-manage):产品品牌、产品属性新增创建功能

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

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 /**
- * @Name: EditDrawer.vue
+ * @Name: createDialog.vue
  * @Description: 竞品监控-创建对话框
  * @Author: xinyan
  */

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

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 /**
- * @Name: EditDrawer.vue
+ * @Name: createDialog.vue
  * @Description: 商品监控-创建对话框
  * @Author: xinyan
  */

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

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

src/views/sku-manage/product-attribute/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-attribute/component/createDialog.vue';
 
 
 interface Parameter {
@@ -75,6 +76,7 @@ const gridOptions: any = reactive({
 });
 
 const editOpen = ref(false);
+const createOpen = ref(false);
 const rowData = ref({});
 
 const dialogVisible = ref(false);
@@ -111,6 +113,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) {
@@ -119,9 +125,6 @@ async function singleDelete(row: any) {
   }
 }
 
-async function handleDownload() {
-}
-
 const gridEvents = {
   custom ({ type }: any) {
     // console.log(`点击 ${type}`)
@@ -137,40 +140,15 @@ 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>
-      <el-button circle class="toolbar-btn" @click="handleRefresh">
+      <el-button circle class="toolbar-btn mr-3" @click="handleRefresh">
         <el-icon>
           <Refresh />
         </el-icon>
       </el-button>
-      <el-popconfirm
-          :icon="InfoFilled"
-          icon-color="#626AEF"
-          title="是否确认导出当前时间内所有数据项?"
-          width="220"
-          @confirm="handleDownload"
-      >
-        <template #reference>
-          <el-button circle class="mr-3 toolbar-btn">
-            <el-icon>
-              <Download />
-            </el-icon>
-          </el-button>
-        </template>
-        <template #actions="{ confirm, cancel }">
-          <el-button size="small" @click="cancel">No!</el-button>
-          <el-button
-              size="small"
-              type="danger"
-              @click="confirm"
-          >
-            Yes?
-          </el-button>
-        </template>
-      </el-popconfirm>
     </template>
     <template #pager>
       <vxe-pager
@@ -188,6 +166,7 @@ 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>

src/views/sku-manage/product-attribute/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 { createAttr, createBrand } from '../api';
+
+const loading = ref(false);
+const createOpen = defineModel({ default: false });
+
+const emit = defineEmits(['refresh']);
+
+interface RuleForm {
+	name: any;
+	key: any;
+}
+
+const ruleFormRef = ref<FormInstance>();
+const ruleForm = reactive<RuleForm>({
+	name: '',
+	key: '',
+});
+
+const rules = reactive<FormRules<RuleForm>>({
+	name: [{ required: true, message: '请输入属性名称', trigger: 'blur' }],
+	key: [{ 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,
+				key: ruleForm.key,
+			};
+			const res = await useResponse(api.createAttr, body, loading);
+			if (res.code === 2000) {
+				ElMessage.success('创建成功');
+				createOpen.value = false;
+				emit('refresh');
+			}
+		} else {
+			// createOpen.value = false;
+			ElMessage.error('创建失败，请检查表单');
+		}
+	});
+};
+
+const resetForm = (formEl: FormInstance | undefined) => {
+	if (!formEl) return;
+	formEl.resetFields();
+};
+</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="name">
+						<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>
+		</template>
+	</el-dialog>
+</template>
+
+<style scoped>
+</style>

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

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

src/views/sku-manage/product-brand/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-brand/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) {
@@ -105,9 +111,6 @@ async function singleDelete(row: any) {
   }
 }
 
-async function handleDownload() {
-}
-
 const gridEvents = {
   custom ({ type }: any) {
     // console.log(`点击 ${type}`)
@@ -123,40 +126,15 @@ 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>
-      <el-button circle class="toolbar-btn" @click="handleRefresh">
+      <el-button circle class="toolbar-btn mr-3" @click="handleRefresh">
         <el-icon>
           <Refresh />
         </el-icon>
       </el-button>
-      <el-popconfirm
-          :icon="InfoFilled"
-          icon-color="#626AEF"
-          title="是否确认导出当前时间内所有数据项?"
-          width="220"
-          @confirm="handleDownload"
-      >
-        <template #reference>
-          <el-button circle class="mr-3 toolbar-btn">
-            <el-icon>
-              <Download />
-            </el-icon>
-          </el-button>
-        </template>
-        <template #actions="{ confirm, cancel }">
-          <el-button size="small" @click="cancel">No!</el-button>
-          <el-button
-              size="small"
-              type="danger"
-              @click="confirm"
-          >
-            Yes?
-          </el-button>
-        </template>
-      </el-popconfirm>
     </template>
     <template #pager>
       <vxe-pager
@@ -174,6 +152,7 @@ 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>

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

@@ -0,0 +1,74 @@
+<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 { createBrand } from '../api';
+
+const loading = ref(false);
+const createOpen = defineModel({ default: false });
+
+const emit = defineEmits(['refresh']);
+
+interface RuleForm {
+	brand: any;
+}
+
+const ruleFormRef = ref<FormInstance>();
+const ruleForm = reactive<RuleForm>({
+	brand: '',
+});
+
+const rules = reactive<FormRules<RuleForm>>({
+	brand: [{ required: true, message: '请输入品牌', trigger: 'blur' }],
+});
+
+const submitForm = async (formEl: FormInstance | undefined) => {
+	if (!formEl) return;
+	await formEl.validate(async (valid, fields) => {
+		if (valid) {
+			const body = {
+				brand_name: ruleForm.brand,
+			};
+			const res = await useResponse(api.createBrand, body, loading);
+			if (res.code === 2000) {
+				ElMessage.success('创建成功');
+				createOpen.value = false;
+				emit('refresh');
+			}
+		} else {
+			// createOpen.value = false;
+			ElMessage.error('创建失败，请检查表单');
+		}
+	});
+};
+
+const resetForm = (formEl: FormInstance | undefined) => {
+	if (!formEl) return;
+	formEl.resetFields();
+};
+</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-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>
+		</template>
+	</el-dialog>
+</template>
+
+<style scoped>
+</style>