diff --git a/smart-admin-web-typescript/src/api/business/base/customer/customer-api.ts b/smart-admin-web-typescript/src/api/business/base/customer/customer-api.ts
new file mode 100644
index 0000000..b289419
--- /dev/null
+++ b/smart-admin-web-typescript/src/api/business/base/customer/customer-api.ts
@@ -0,0 +1,55 @@
+/**
+ * 客户管理 api 封装
+ *
+ * @Author:    霍锦
+ * @Date:      2025-03-25 10:42:33
+ * @Copyright  友仓
+ */
+import {postRequest, getRequest} from '/@/lib/axios';
+
+export const customerApi = {
+
+    /**
+     * 分页查询  @author  霍锦
+     */
+    queryPage: (param: object) => {
+        return postRequest('/customer/queryPage', param);
+    },
+
+    /**
+     * 增加  @author  霍锦
+     */
+    add: (param: object) => {
+        return postRequest('/customer/add', param);
+    },
+
+    /**
+     * 修改  @author  霍锦
+     */
+    update: (param: object) => {
+        return postRequest('/customer/update', param);
+    },
+
+
+    /**
+     * 删除  @author  霍锦
+     */
+    delete: (customerId: number) => {
+        return getRequest('/customer/delete', {customerId});
+    },
+
+    /**
+     * 批量删除  @author  霍锦
+     */
+    batchDelete: (idList: number[]) => {
+        return postRequest('/customer/batchDelete', idList);
+    },
+    /**
+     * 下拉查询  @author  hj
+     */
+    queryCustomer: (param: object) => {
+        return postRequest('/customer/queryCustomer',param);
+    },
+
+
+};
diff --git a/smart-admin-web-typescript/src/api/business/base/customer/customer-const.ts b/smart-admin-web-typescript/src/api/business/base/customer/customer-const.ts
new file mode 100644
index 0000000..2885c26
--- /dev/null
+++ b/smart-admin-web-typescript/src/api/business/base/customer/customer-const.ts
@@ -0,0 +1,11 @@
+/**
+ * 客户管理 枚举
+ *
+ * @Author:    霍锦
+ * @Date:      2025-03-25 10:42:33
+ * @Copyright  友仓
+ */
+
+
+export default {
+};
\ No newline at end of file
diff --git a/smart-admin-web-typescript/src/constants/support/table-id-const.ts b/smart-admin-web-typescript/src/constants/support/table-id-const.ts
index 956f77e..6440ae9 100644
--- a/smart-admin-web-typescript/src/constants/support/table-id-const.ts
+++ b/smart-admin-web-typescript/src/constants/support/table-id-const.ts
@@ -40,6 +40,7 @@ export const TABLE_ID_CONST = {
       ITEM:businessBASEInitTableId+3,//商品
       STOCK:businessBASEInitTableId+4,//容器
       ADDRESS:businessBASEInitTableId+5,//地址
+      CUSTOMER:businessBASEInitTableId+6,//客户
     }
   },
 
diff --git a/smart-admin-web-typescript/src/views/business/base/area/area-select.vue b/smart-admin-web-typescript/src/views/business/base/area/area-select.vue
index 4f84f8c..831e0c0 100644
--- a/smart-admin-web-typescript/src/views/business/base/area/area-select.vue
+++ b/smart-admin-web-typescript/src/views/business/base/area/area-select.vue
@@ -82,16 +82,16 @@ watch(
 
 
 function handleChange(value: any) {
-  let selectedLocations: any[] | any;
+  let selectedAreas: any[] | any;
   if (Array.isArray(value)) {
     // 多选情况
-    selectedLocations = value.map((id) => areas.value.find((item: any) => item.areaId === id)).filter(Boolean);
+    selectedAreas = value.map((id) => areas.value.find((item: any) => item.areaId === id)).filter(Boolean);
   } else {
     // 单选情况
-    selectedLocations = areas.value.find((item: any) => item.areaId === value);
+    selectedAreas = areas.value.find((item: any) => item.areaId === value);
   }
   emit('update:value', value);
-  emit('change', selectedLocations);
+  emit('change', selectedAreas);
 
 }
 
diff --git a/smart-admin-web-typescript/src/views/business/base/customer/customer-form.vue b/smart-admin-web-typescript/src/views/business/base/customer/customer-form.vue
new file mode 100644
index 0000000..cf630b0
--- /dev/null
+++ b/smart-admin-web-typescript/src/views/business/base/customer/customer-form.vue
@@ -0,0 +1,183 @@
+<!--
+  * 客户管理
+  *
+  * @Author:    霍锦
+  * @Date:      2025-03-25 10:42:33
+  * @Copyright  友仓
+-->
+<template>
+  <a-modal
+      :title="form.customerId ? '编辑客户' : '添加客户'"
+      :width="600"
+      :open="visibleFlag"
+      @cancel="onClose"
+      :maskClosable="false"
+      :destroyOnClose="true"
+  >
+    <a-form ref="formRef" :model="form" :rules="rules">
+      <a-row>
+        <a-col :span="12">
+          <a-form-item label="代码" name="customerCode">
+            <a-input style="width:  100%" v-model:value="form.customerCode" placeholder="客户代码" disabled/>
+          </a-form-item>
+
+        </a-col>
+        <a-col :span="12">
+          <a-form-item label="名称" name="customerName">
+            <a-input style="width: 100%" v-model:value="form.customerName" placeholder="客户名称"
+                     @input="generateCustomerCode"/>
+          </a-form-item>
+        </a-col>
+      </a-row>
+
+      <a-row :gutter="24">
+        <a-col :span="12">
+          <a-form-item label="联系人" name="person">
+            <a-input style="width: 100%" v-model:value="form.person" placeholder="联系人"/>
+          </a-form-item>
+
+        </a-col>
+        <a-col :span="12">
+          <a-form-item label="电话" name="telephone">
+            <a-input style="width: 100%" v-model:value="form.telephone" placeholder="电话"/>
+          </a-form-item>
+        </a-col>
+      </a-row>
+
+      <a-row>
+        <a-col :span="24">
+          <a-form-item label="地址" name="address">
+            <a-textarea
+                v-model:value="form.address"
+                style="width: 100%; height: 100px"
+                placeholder="地址"
+            />
+          </a-form-item>
+        </a-col>
+      </a-row>
+
+      <a-row>
+        <a-col :span="24">
+          <a-form-item label="是否启用" name="disabledFlag">
+            <a-switch
+                v-model:checked="form.disabledFlag"
+                checked-children="启用"
+                un-checked-children="禁用"
+            />
+          </a-form-item>
+        </a-col>
+      </a-row>
+
+
+    </a-form>
+
+    <template #footer>
+      <a-space>
+        <a-button @click="onClose">取消</a-button>
+        <a-button type="primary" @click="onSubmit">保存</a-button>
+      </a-space>
+    </template>
+  </a-modal>
+</template>
+<script setup lang="ts">
+import {reactive, ref, nextTick} from 'vue';
+import _ from 'lodash';
+import pinyin from 'pinyin';
+import {message} from 'ant-design-vue';
+import {SmartLoading} from '/@/components/framework/smart-loading';
+import {customerApi} from '/@/api/business/base/customer/customer-api';
+import {smartSentry} from '/@/lib/smart-sentry';
+
+// ------------------------ 事件 ------------------------
+
+const emits = defineEmits(['reloadList']);
+
+// ------------------------ 显示与隐藏 ------------------------
+// 是否显示
+const visibleFlag = ref(false);
+
+function show(rowData: object) {
+  Object.assign(form, formDefault);
+  if (rowData && !_.isEmpty(rowData)) {
+    Object.assign(form, rowData);
+  }
+  visibleFlag.value = true;
+  nextTick(() => {
+    formRef.value.clearValidate();
+  });
+}
+
+function onClose() {
+  Object.assign(form, formDefault);
+  visibleFlag.value = false;
+}
+
+// ------------------------ 表单 ------------------------
+
+// 组件ref
+const formRef = ref();
+
+const formDefault = {
+  customerId: undefined, //客户id
+  customerCode: undefined, //客户代码
+  customerName: undefined, //客户名称
+  person: undefined, //联系人
+  telephone: undefined, //电话
+  address: undefined, //地址
+  disabledFlag: true //是否禁用
+};
+
+let form = reactive({...formDefault});
+
+const rules = {
+  customerId: [{required: true, message: '客户id 必填'}],
+  customerCode: [{required: true, message: '客户代码 必填'}],
+  customerName: [{required: true, message: '客户名称 必填'}],
+  createTime: [{required: true, message: '创建时间 必填'}],
+  createUserId: [{required: true, message: '创建人ID 必填'}],
+  createUserName: [{required: true, message: '创建人 必填'}],
+  updateTime: [{required: true, message: '更新时间 必填'}],
+};
+
+// 自动生成客户代码
+function generateCustomerCode() {
+  form.customerCode = form.customerName
+      ? pinyin(form.customerName, {style: pinyin.STYLE_FIRST_LETTER})
+          .map((item: string []) => item[0].toUpperCase())
+          .join('')
+      : undefined;
+}
+
+// 点击确定，验证表单
+async function onSubmit() {
+  try {
+    await formRef.value.validateFields();
+    save();
+  } catch (err) {
+    message.error('参数验证错误，请仔细填写表单数据!');
+  }
+}
+
+// 新建、编辑API
+async function save() {
+  SmartLoading.show();
+  try {
+    if (form.customerId) {
+      await customerApi.update(form);
+    } else {
+      await customerApi.add(form);
+    }
+    message.success('操作成功');
+    emits('reloadList');
+    onClose();
+  } catch (err) {
+    smartSentry.captureError(err);
+  } finally {
+    SmartLoading.hide();
+  }
+}
+
+defineExpose({
+  show,
+});
+</script>
diff --git a/smart-admin-web-typescript/src/views/business/base/customer/customer-list.vue b/smart-admin-web-typescript/src/views/business/base/customer/customer-list.vue
new file mode 100644
index 0000000..f285f0f
--- /dev/null
+++ b/smart-admin-web-typescript/src/views/business/base/customer/customer-list.vue
@@ -0,0 +1,315 @@
+<!--
+  * 客户管理
+  *
+  * @Author:    霍锦
+  * @Date:      2025-03-25 10:42:33
+  * @Copyright  友仓
+-->
+<template>
+  <!---------- 查询表单form begin ----------->
+  <a-form class="smart-query-form">
+    <a-row class="smart-query-form-row">
+      <a-form-item label="客户" class="smart-query-form-item">
+        <CustomerSelect v-model:value="queryForm.customerId" :disabled-flag="true" @change="changeCustomerSelect"/>
+      </a-form-item>
+      <a-form-item label="是否启用" class="smart-query-form-item">
+        <a-select style="width: 200px" v-model:value="queryForm.disabledFlag" allowClear placeholder="请选择">
+          <a-select-option :value="true">启用</a-select-option>
+          <a-select-option :value="false">禁用</a-select-option>
+        </a-select>
+      </a-form-item>
+      <a-form-item class="smart-query-form-item">
+        <a-button type="primary" @click="onSearch" class="smart-margin-left10">
+          <template #icon>
+            <SearchOutlined/>
+          </template>
+          查询
+        </a-button>
+        <a-button @click="resetQuery" class="smart-margin-left10">
+          <template #icon>
+            <ReloadOutlined/>
+          </template>
+          重置
+        </a-button>
+      </a-form-item>
+    </a-row>
+  </a-form>
+  <!---------- 查询表单form end ----------->
+
+  <a-card size="small" :bordered="false" :hoverable="true">
+    <!---------- 表格操作行 begin ----------->
+    <a-row class="smart-table-btn-block">
+      <div class="smart-table-operate-block">
+        <a-button @click="showForm" type="primary" v-privilege="'customer:add'">
+          <template #icon>
+            <PlusOutlined/>
+          </template>
+          新建
+        </a-button>
+        <a-button @click="confirmBatchDelete" type="primary" danger v-privilege="'customer:batchDelete'"
+                  :disabled="selectedRowKeyList.length == 0">
+          <template #icon>
+            <DeleteOutlined/>
+          </template>
+          批量删除
+        </a-button>
+      </div>
+      <div class="smart-table-setting-block">
+        <TableOperator v-model="columns" :tableId="TABLE_ID_CONST.BUSINESS.BASE.CUSTOMER" :refresh="queryData"/>
+      </div>
+    </a-row>
+    <!---------- 表格操作行 end ----------->
+
+    <!---------- 表格 begin ----------->
+    <a-table
+        size="small"
+        :dataSource="tableData"
+        :columns="columns"
+        rowKey="customerId"
+        bordered
+        :loading="tableLoading"
+        :pagination="false"
+        :row-selection="{ selectedRowKeys: selectedRowKeyList, onChange: onSelectChange }"
+    >
+      <template #bodyCell="{ text, record, column }">
+
+        <template v-if="column.dataIndex === 'disabledFlag'">
+          <a-tag :color="text ? 'processing' : 'error'">{{ text ? '启用' : '禁用' }}</a-tag>
+        </template>
+
+
+        <template v-if="column.dataIndex === 'action'">
+          <div class="smart-table-operate">
+            <a-button @click="showForm(record)" type="link" v-privilege="'customer:update'">
+              <template #icon>
+                <EditOutlined/>
+              </template>
+              编辑
+            </a-button>
+            <a-button @click="onDelete(record)" danger type="link" v-privilege="'customer:delete'">
+              <template #icon>
+                <DeleteOutlined/>
+              </template>
+              删除
+            </a-button>
+          </div>
+        </template>
+      </template>
+    </a-table>
+    <!---------- 表格 end ----------->
+
+    <div class="smart-query-table-page">
+      <a-pagination
+          showSizeChanger
+          showQuickJumper
+          show-less-items
+          :pageSizeOptions="PAGE_SIZE_OPTIONS"
+          :defaultPageSize="queryForm.pageSize"
+          v-model:current="queryForm.pageNum"
+          v-model:pageSize="queryForm.pageSize"
+          :total="total"
+          @change="queryData"
+          @showSizeChange="queryData"
+          :show-total="(total:number) => `共${total}条`"
+      />
+    </div>
+
+    <CustomerForm ref="formRef" @reloadList="queryData"/>
+
+  </a-card>
+</template>
+<script setup lang="ts">
+import {reactive, ref, onMounted} from 'vue';
+import {message, Modal} from 'ant-design-vue';
+import {SmartLoading} from '/@/components/framework/smart-loading';
+import {customerApi} from '/@/api/business/base/customer/customer-api';
+import {PAGE_SIZE_OPTIONS} from '/@/constants/common-const';
+import {smartSentry} from '/@/lib/smart-sentry';
+import TableOperator from '/@/components/support/table-operator/index.vue';
+import CustomerForm from '/@/views/business/base/customer/customer-form.vue';
+import {TABLE_ID_CONST} from "/@/constants/support/table-id-const";
+import CustomerSelect from "/@/views/business/base/customer/customer-select.vue";
+
+// ---------------------------- 表格列 ----------------------------
+
+const columns = ref([
+  {
+    title: '客户id',
+    dataIndex: 'customerId',
+    ellipsis: true,
+  },
+  {
+    title: '客户代码',
+    dataIndex: 'customerCode',
+    ellipsis: true,
+  },
+  {
+    title: '客户名称',
+    dataIndex: 'customerName',
+    ellipsis: true,
+  },
+  {
+    title: '联系人',
+    dataIndex: 'person',
+    ellipsis: true,
+  },
+  {
+    title: '电话',
+    dataIndex: 'telephone',
+    ellipsis: true,
+  },
+  {
+    title: '地址',
+    dataIndex: 'address',
+    ellipsis: true,
+  },
+  {
+    title: '是否启用',
+    dataIndex: 'disabledFlag',
+    ellipsis: true,
+  },
+  {
+    title: '创建时间',
+    dataIndex: 'createTime',
+    ellipsis: true,
+  },
+  {
+    title: '操作',
+    dataIndex: 'action',
+    fixed: 'right',
+    width: 140,
+  },
+]);
+
+// ---------------------------- 查询数据表单和方法 ----------------------------
+
+const queryFormState = {
+  customerId: undefined, //客户
+  disabledFlag: undefined,//是否启用
+  pageNum: 1,
+  pageSize: 10,
+};
+// 查询表单form
+const queryForm = reactive({...queryFormState});
+// 表格加载loading
+const tableLoading = ref(false);
+// 表格数据
+const tableData = ref([]);
+// 总数
+const total = ref(0);
+
+// 重置查询条件
+function resetQuery() {
+  let pageSize = queryForm.pageSize;
+  Object.assign(queryForm, queryFormState);
+  queryForm.pageSize = pageSize;
+  queryData();
+}
+
+// 搜索
+function onSearch() {
+  queryForm.pageNum = 1;
+  queryData();
+}
+
+//选择客户
+function changeCustomerSelect(selectValue: any) {
+  if (selectValue) {
+    queryForm.customerId = selectValue.customerId;
+  }
+}
+
+// 查询数据
+async function queryData() {
+  tableLoading.value = true;
+  try {
+    let queryResult = await customerApi.queryPage(queryForm);
+    tableData.value = queryResult.data.list;
+    total.value = queryResult.data.total;
+  } catch (e) {
+    smartSentry.captureError(e);
+  } finally {
+    tableLoading.value = false;
+  }
+}
+
+
+onMounted(queryData);
+
+// ---------------------------- 添加/修改 ----------------------------
+const formRef = ref();
+
+function showForm(data: object) {
+  formRef.value.show(data);
+}
+
+// ---------------------------- 单个删除 ----------------------------
+//确认删除
+function onDelete(data: object) {
+  Modal.confirm({
+    title: '提示',
+    content: '确定要删除选吗?',
+    okText: '删除',
+    okType: 'danger',
+    onOk() {
+      requestDelete(data);
+    },
+    cancelText: '取消',
+    onCancel() {
+    },
+  });
+}
+
+//请求删除
+async function requestDelete(data: any) {
+  SmartLoading.show();
+  try {
+    await customerApi.delete(data.customerId);
+    message.success('删除成功');
+    await queryData();
+  } catch (e) {
+    smartSentry.captureError(e);
+  } finally {
+    SmartLoading.hide();
+  }
+}
+
+// ---------------------------- 批量删除 ----------------------------
+
+// 选择表格行
+const selectedRowKeyList = ref([]);
+
+function onSelectChange(selectedRowKeys: any) {
+  selectedRowKeyList.value = selectedRowKeys;
+}
+
+// 批量删除
+function confirmBatchDelete() {
+  Modal.confirm({
+    title: '提示',
+    content: '确定要批量删除这些数据吗?',
+    okText: '删除',
+    okType: 'danger',
+    onOk() {
+      requestBatchDelete();
+    },
+    cancelText: '取消',
+    onCancel() {
+    },
+  });
+}
+
+//请求批量删除
+async function requestBatchDelete() {
+  try {
+    SmartLoading.show();
+    await customerApi.batchDelete(selectedRowKeyList.value);
+    message.success('删除成功');
+    queryData();
+  } catch (e) {
+    smartSentry.captureError(e);
+  } finally {
+    SmartLoading.hide();
+  }
+}
+</script>
diff --git a/smart-admin-web-typescript/src/views/business/base/customer/customer-select.vue b/smart-admin-web-typescript/src/views/business/base/customer/customer-select.vue
new file mode 100644
index 0000000..7cfb0ec
--- /dev/null
+++ b/smart-admin-web-typescript/src/views/business/base/customer/customer-select.vue
@@ -0,0 +1,96 @@
+<!--
+  * 库区 下拉选择框
+  *
+  *
+-->
+<template>
+  <a-select
+      v-model:value="selectValue"
+      :style="`width: ${width}`"
+      :placeholder="props.placeholder"
+      :showSearch="true"
+      :allowClear="true"
+      :size="size"
+      @change="handleChange"
+      :disabled="disabled"
+      :mode="multiple ? 'multiple' : ''"
+      optionFilterProp="label"
+  >
+    <a-select-option v-for="customer in customers" :key="customer.customerId" :label="customer.customerName">
+      {{ customer.customerName }}
+    </a-select-option>
+  </a-select>
+</template>
+
+<script setup lang="ts">
+import {onMounted, ref, watch} from 'vue';
+import {customerApi} from "/@/api/business/base/customer/customer-api";
+
+const props = defineProps({
+  value: [Number, String, Object, Array],
+  width: {
+    type: String,
+    default: '200px',
+  },
+  placeholder: {
+    type: String,
+    default: '请选择',
+  },
+  size: {
+    type: String,
+    default: 'default',
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  multiple: {
+    type: Boolean,
+    default: false,
+  },
+  disabledFlag: {
+    type: Boolean,
+    default: null,
+  }
+});
+
+const customers = ref([]);
+
+async function queryData() {
+
+  let res = await customerApi.queryCustomer({
+    disabledFlag: props.disabledFlag
+  });
+  customers.value = res.data;
+}
+
+const emit = defineEmits(['update:value', 'change']);
+
+const selectValue = ref(props.value);
+
+// 箭头value变化
+watch(
+    () => props.value,
+    (newValue) => {
+      selectValue.value = newValue;
+    }
+);
+
+
+function handleChange(value: any) {
+  let selectedCustomers: any[] | any;
+  if (Array.isArray(value)) {
+    // 多选情况
+    selectedCustomers = value.map((id) => customers.value.find((item: any) => item.customerId === id)).filter(Boolean);
+  } else {
+    // 单选情况
+    selectedCustomers = customers.value.find((item: any) => item.customerId === value);
+  }
+  emit('update:value', value);
+  emit('change', selectedCustomers);
+
+}
+
+
+onMounted(queryData);
+</script>