产品分类-增删查改

src/views/BasicData/api/productCassification.api.ts

@@ -0,0 +1,31 @@
+import { defHttp } from '/@/utils/http/axios';
+import { Modal } from 'ant-design-vue';
+
+enum Api {
+  list = '/baseCode/baseProductClass/list',
+  save = '/baseCode/baseProductClass/add',
+  edit = '/baseCode/baseProductClass/edit',
+  deleteDict = '/baseCode/baseProductClass/delete',
+}
+
+export const list = (params) => defHttp.get({ url: Api.list, params });
+/**
+ * 列表
+ * @param params
+ */
+export const saveOrUpdateDict = (params, isUpdate) => {
+  let url = isUpdate ? Api.edit : Api.save;
+  return defHttp.post({ url: url, params });
+};
+/**
+ * 新增/编辑
+ * @param params
+ */
+/**
+ * 删除
+ */
+export const deleteDict = (params, handleSuccess) => {
+  return defHttp.delete({ url: Api.deleteDict, params }, { joinParamsToUrl: true }).then(() => {
+    handleSuccess();
+  });
+};

src/views/BasicData/components/productCassificationModel.vue

@@ -0,0 +1,120 @@
+<template>
+  <BasicModal v-bind="$attrs" @register="registerModal" :title="getTitle" width="550px" @ok="handleSubmit">
+    <BasicForm @register="registerForm" @submit="handleSubmit" style="margin-top: 26px" />
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { ref, computed, unref } from 'vue';
+  //引入依赖
+  import { useForm, BasicForm, FormSchema } from '/@/components/Form';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { saveOrUpdateDict } from '../api/productCassification.api';
+  const emit = defineEmits(['register', 'success']); //定义emit
+  const isUpdate = ref(true); //判断编辑还是新增
+  const rowId = ref('');//获取主键
+  //获取表单数据
+  const [registerModal, { closeModal, setModalProps }] = useModalInner(
+    async (data) => {
+      // 重置表单
+      await resetFields();
+      setModalProps({ confirmLoading: false});
+      isUpdate.value = !!data?.isUpdate;     
+      if (unref(isUpdate)) {
+      rowId.value = data.record.id;
+      //表单赋值
+      await setFieldsValue({
+        ...data.record,
+      });
+    }
+    }
+  )
+  //获取title
+  const getTitle = computed(() => {
+    return (!unref(isUpdate) ? '新增产品分类' : '编辑产品分类');
+  })
+  //自定义表单字段
+  const formSchemas: FormSchema[] = [
+    {
+      //标题名称
+      label: '上级分类(parent)',
+      //字段
+      field: 'parentId',
+      //组件 支持组件详见 components/Form/src/types/index.ts 中的 ComponentType
+      component: 'Input',
+      componentProps:{
+        AutoComplete:'off'
+      },
+    },
+    {
+      label: '编码(code)',
+      field: 'code',
+      component: 'Input',
+      componentProps:{
+        AutoComplete:'off'
+      },
+    },
+    {
+      label: '名称(name)',
+      field: 'name',
+      component: 'Input',
+      componentProps:{
+        AutoComplete:'off'
+      },
+    },
+    {
+      label: '毛利率(gross margin)',
+      field: 'grossMargin',
+      component: 'Input',
+      componentProps:{
+        AutoComplete:'off'
+      },
+    },
+    {
+      label: '税率(tax rate)',
+      field: 'taxRate',
+      component: 'Input',
+      componentProps:{
+        AutoComplete:'off'
+      },
+    },
+  ];
+  /**
+   * BasicForm绑定注册;
+   * useForm 是整个框架的核心用于表单渲染，里边封装了很多公共方法;
+   * 支持（schemas: 渲染表单列，autoSubmitOnEnter：回车提交,submitButtonOptions：自定义按钮文本和图标等方法）；
+   * 平台通过此封装，简化了代码，支持自定义扩展;
+   */
+  const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
+    //注册表单列
+    schemas: formSchemas,
+    //回车提交
+    autoSubmitOnEnter: true,
+    //不显示重置按钮
+    showResetButton: false,
+    showSubmitButton:false,
+    labelCol: { style: { width: '150px'} },
+    labelAlign:'right'
+    //查询列占比 24代表一行 取值范围 0-24
+  });
+
+  /**
+   * 点击提交按钮的value值
+   * @param values
+   */
+
+  //表单提交事件
+  async function handleSubmit() {
+    try {
+      let values = await validate();
+      setModalProps({ confirmLoading: true });
+      //提交表单
+      await saveOrUpdateDict(values, isUpdate.value);
+      //关闭弹窗
+      closeModal();
+      //刷新列表
+      emit('success', { isUpdate: unref(isUpdate), values: { ...values, id: rowId.value } });
+    } finally {
+      setModalProps({ confirmLoading: false });
+    }
+  }
+</script>

src/views/BasicData/productCassification.vue

@@ -0,0 +1,132 @@
+<template>
+  <!--定义表格-->
+  <BasicTable @register="registerTable" :rowSelection="rowSelection">
+    <template #tableTitle>
+      <a-button type="primary" preIcon="ant-design:plus-outlined" @click="handleCreate"> 新增</a-button>
+      <div style="margin-left: 10px;margin-top: 5px">当前登录租户: <span class="tenant-name">{{loginTenantName}}</span> </div>
+    </template>
+    <!--操作栏-->
+    <template #action="{ record }">
+      <TableAction :actions="getTableAction(record)" />
+    </template>
+  </BasicTable>
+  <productCassificationModel @register="registerModal" @success="handleSuccess" />
+</template>
+
+<script lang="ts" name="basic-table-demo" setup>
+  import { onMounted, ref } from 'vue';
+  import { useModal } from '/@/components/Modal';
+  import { ActionItem, BasicColumn, BasicTable, TableAction,FormSchema } from '/@/components/Table';
+  import productCassificationModel from './components/productCassificationModel.vue';
+  import { useListPage } from '/@/hooks/system/useListPage';
+  import { list,deleteDict } from './api/productCassification.api';
+  const showFooter = ref(true);
+  const [registerModal, { openModal }] = useModal();
+  //定义表格列字段
+  const columns: BasicColumn[] = [
+    {
+      title: '编码(code)',
+      dataIndex: 'code',
+      key: 'code',
+    },
+    {
+      title: '名称(name)',
+      dataIndex: 'name',
+      key: 'name',
+    },
+    {
+      title: '上级分类(parent)',
+      dataIndex: 'parentId',
+      key: 'parentId',
+    },
+    {
+      title: '毛利率(gross margin)',
+      dataIndex: 'grossMargin',
+      key: 'grossMargin',
+    },
+    {
+      title: '税率(tax rate)',
+      dataIndex: 'taxRate',
+      key: 'taxRate',
+    },
+  ];
+  //表单搜索字段
+  const searchFormSchema: FormSchema[] = [
+    {
+      label: '编码(code)', //显示label
+      field: 'code', //查询字段
+      component: 'JInput', //渲染的组件
+      defaultValue: '', //设置默认值
+    },
+    {
+      label: '名称(name)', //显示label
+      field: 'name', //查询字段
+      component: 'JInput', //渲染的组件
+      defaultValue: '', //设置默认值
+    },
+  ];
+   /** useListPage 是整个框架的核心用于表格渲染，里边封装了很多公共方法；
+    * 平台通过此封装，简化了代码，支持自定义扩展*/
+  // 通过hook useListPage渲染表格（设置dataSource、columns、actionColumn等参数）
+  const { tableContext } = useListPage({
+    designScope: 'basic-table-demo',
+    tableProps: {
+      title: '',
+      api: list,
+      columns: columns,
+      size: 'small',
+      rowkey:"id",
+      actionColumn: {
+        width: 120,
+      },
+      formConfig: {
+        schemas: searchFormSchema,
+      }
+    },
+  });
+  const [registerTable, { reload ,updateTableDataRecord}, { rowSelection, selectedRows, selectedRowKeys }] = tableContext;
+  /**
+   * 操作栏
+   */
+  function getTableAction(record): ActionItem[] {
+    return [
+      {
+        label: '编辑',
+        onClick: handleEdit.bind(null, record),
+      },
+      {
+        label: '删除',
+        popConfirm: {
+          title: '确定删除吗?',
+          confirm: handleDelete.bind(null, record),
+        },
+      },
+    ];
+  }
+
+  function handleEdit(record) {
+    openModal(true, {
+      record,
+      isUpdate: true,
+    });
+  }
+
+  async function handleDelete(record) {
+    await deleteDict({ id: record.id }, reload);
+  }
+  function handleCreate() {
+    openModal(true, {
+      isUpdate: false,
+    });
+  }
+  /**
+   * 成功回调
+   */
+   function handleSuccess({ isUpdate, values }) {
+    if (isUpdate) {
+      updateTableDataRecord(values.id, values);
+    } else {
+      reload();
+    }
+  }
+</script>