diff --git a/components.d.ts b/components.d.ts
index f6ec61011b8ebc14fb138a920d652964e9dbe90d..bb421cff0ebbba17fae0202a90b43f24899d46a2 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -12,18 +12,31 @@ declare module 'vue' {
     ElButton: typeof import('element-plus/es')['ElButton']
     ElCol: typeof import('element-plus/es')['ElCol']
     ElContainer: typeof import('element-plus/es')['ElContainer']
+    ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
     ElDialog: typeof import('element-plus/es')['ElDialog']
+    ElDropdown: typeof import('element-plus/es')['ElDropdown']
+    ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
+    ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
     ElForm: typeof import('element-plus/es')['ElForm']
+    'ElForm-': typeof import('element-plus/es')['ElForm-']
     ElFormItem: typeof import('element-plus/es')['ElFormItem']
     ElHeader: typeof import('element-plus/es')['ElHeader']
+    ElIcon: typeof import('element-plus/es')['ElIcon']
     ElInput: typeof import('element-plus/es')['ElInput']
     ElMain: typeof import('element-plus/es')['ElMain']
     ElMenu: typeof import('element-plus/es')['ElMenu']
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
+    ElOption: typeof import('element-plus/es')['ElOption']
+    ElPagination: typeof import('element-plus/es')['ElPagination']
     ElRow: typeof import('element-plus/es')['ElRow']
+    ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
+    ElSelect: typeof import('element-plus/es')['ElSelect']
     ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
+    ElTable: typeof import('element-plus/es')['ElTable']
+    ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
     ElTabPane: typeof import('element-plus/es')['ElTabPane']
     ElTabs: typeof import('element-plus/es')['ElTabs']
+    ElTooltip: typeof import('element-plus/es')['ElTooltip']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
   }
diff --git a/src/main.ts b/src/main.ts
index 6438dfb5dc291835b908e6f55eaa5d2e861cd40b..8e8df91b5839f193d8eec0ca3dca22c664bd95b2 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -3,7 +3,9 @@ import ElementPlus from 'element-plus'
 import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 import router from './router'
 import store from './store'
-import App from './App.vue'
+import App from './app.vue'
+
+import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
 
 // import 'normalize.css'
 
@@ -12,6 +14,10 @@ const app = createApp(App)
 app.use(router)
 app.use(store)
 
+//国际化
+app.use(ElementPlus, {
+  locale: zhCn,
+})
 for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
   app.component(key, component)
 }
diff --git a/src/router/routes.ts b/src/router/routes.ts
index 765c3d9c995c157bfb7bf75c1e952c9f2033294c..b6282847b68994e24a7b3f5694dbe1ff2d84c8a0 100644
--- a/src/router/routes.ts
+++ b/src/router/routes.ts
@@ -53,7 +53,7 @@ const routes: any = [
       //零售出库
       {
         path: 'retailOutbound',
-        component: () => import('../views/retail/retailOutbound.vue'),
+        component: () => import('../views/retail/retail-out/index.vue'),
         meta: {
           title: '零售出库',
           icon: 'Tickets',
@@ -66,7 +66,7 @@ const routes: any = [
       //零售退货
       {
         path: 'retailReturns',
-        component: () => import('../views/retail/retailReturns.vue'),
+        component: () => import('../views/retail/retail-return/index.vue'),
         meta: {
           title: '零售退货',
           icon: 'Tickets',
diff --git a/src/views/retail/retail-out/index.vue b/src/views/retail/retail-out/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d8c97627d4fc64dd1b48a093f3b507b122f58a1b
--- /dev/null
+++ b/src/views/retail/retail-out/index.vue
@@ -0,0 +1,458 @@
+<template>
+  <!-- main区域 -->
+  <div
+    class="rtail-out"
+    style="padding: 24px; margin: 10px; height: 600px; background-color: #fff"
+  >
+    <!-- 查询功能 -->
+    <div class="search-box">
+      <el-form :inline="true" :model="formInline" class="demo-form-inline">
+        <el-form-item label="单据编号:">
+          <el-input
+            v-model="formInline.invoicesNum"
+            placeholder="输入单据编号"
+            clearable
+          />
+        </el-form-item>
+        <el-form-item label="商品信息:">
+          <el-input
+            v-model="formInline.goodsInfo"
+            placeholder="输入关键字"
+            clearable
+          />
+        </el-form-item>
+        <el-form-item label="单据日期:">
+          <el-date-picker
+            style="width: 200px"
+            v-model="value1"
+            type="daterange"
+            end-placeholder="结束时间"
+            start-placeholder="开始时间"
+            clearable
+          />
+        </el-form-item>
+        <!-- 查询按钮 -->
+        <el-form-item>
+          <el-button type="primary">查询</el-button>
+          <el-button type="default">重置</el-button>
+          <el-button type="text" @click="changeFlag"
+            >{{ flag ? '收起' : '展开'
+            }}<el-icon
+              ><component
+                :is="flag ? 'ArrowUpBold' : 'ArrowDownBold'"
+              ></component></el-icon
+          ></el-button>
+        </el-form-item>
+        <!-- 隐藏区域 -->
+        <div v-if="flag" class="hiden-box" style="padding: 10px 0 0">
+          <el-form-item label="会员卡号:">
+            <el-select
+              v-model="formInline.vipNum"
+              placeholder="选择会员卡号"
+              clearable
+              style="width: 200px"
+            >
+              <el-option label="Zone one" value="shanghai" />
+              <el-option label="Zone two" value="beijing" />
+            </el-select>
+          </el-form-item>
+
+          <el-form-item label="仓库名称:">
+            <el-select
+              v-model="formInline.stock"
+              placeholder="选择仓库"
+              clearable
+              style="width: 200px"
+            >
+              <el-option label="Zone one" value="shanghai" />
+              <el-option label="Zone two" value="beijing" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="操作人员:">
+            <el-select
+              v-model="formInline.operator"
+              placeholder="操作人员"
+              clearable
+              style="width: 200px"
+            >
+              <el-option label="Zone one" value="shanghai" />
+              <el-option label="Zone two" value="beijing" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="结算账户:">
+            <el-select
+              v-model="formInline.SettlementAct"
+              placeholder="选择结算账户"
+              clearable
+              style="width: 200px"
+            >
+              <el-option label="Zone one" value="shanghai" />
+              <el-option label="Zone two" value="beijing" />
+            </el-select>
+          </el-form-item>
+
+          <el-form-item label="单据状态:">
+            <el-select
+              v-model="formInline.invoicesState"
+              placeholder="选择单据状态"
+              clearable
+              style="width: 200px"
+            >
+              <el-option label="Zone one" value="shanghai" />
+              <el-option label="Zone two" value="beijing" />
+            </el-select>
+          </el-form-item>
+
+          <el-form-item label="单据备注:">
+            <el-input
+              v-model="formInline.invoicesRemark"
+              placeholder="输入单据备注"
+              clearable
+            />
+          </el-form-item>
+        </div>
+      </el-form>
+    </div>
+
+    <!-- 表单功能按钮 -->
+    <div class="table-btn" style="margin-top: 10px">
+      <!-- 左侧 -->
+
+      <span>
+        <!-- 新增按钮 -->
+        <el-button
+          type="primary"
+          :icon="Plus"
+          style="margin-right: 15px"
+          @click="centerDialogVisible = true"
+          >新增</el-button
+        >
+        <!-- 批量操作 -->
+        <el-dropdown>
+          <el-button type="primary" style="margin-right: 15px">
+            批量操作<el-icon class="el-icon--right"><arrow-down /></el-icon>
+          </el-button>
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item
+                ><el-icon><Delete /></el-icon>删除</el-dropdown-item
+              >
+              <el-dropdown-item
+                ><el-icon><Check /></el-icon>审核</el-dropdown-item
+              >
+              <el-dropdown-item
+                ><el-icon><CircleClose /></el-icon>反审核</el-dropdown-item
+              >
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
+        <!-- 列设置 -->
+        <el-button type="primary" :icon="Setting" style="margin-right: 15px"
+          >列设置</el-button
+        >
+      </span>
+      <!-- 右侧 -->
+      <span style="float: right">
+        <el-tooltip>
+          <template #content>
+            <span
+              >用于非会员和会员的单据录入，主要是用于散户使用，不能欠款。</span
+            >
+          </template>
+          <el-button type="text" circle>
+            <el-icon size="30"><QuestionFilled /></el-icon>
+          </el-button>
+        </el-tooltip>
+      </span>
+    </div>
+    <!-- 新增页面 -->
+    <el-dialog
+      style="height: 80%"
+      v-model="centerDialogVisible"
+      title="新增"
+      width="80%"
+    >
+      <div style="padding: 24px; background-color: rgb(190 227 190)">
+        <el-form :inline="true" :model="formInline" class="demo-form-inline">
+          <el-form-item label="会员卡号">
+            <el-select
+              v-model="formInline.addvipNum"
+              placeholder="选择会员卡号"
+              clearable
+            >
+              <el-option value="888888" />
+              <el-option value="666666" />
+              <hr />
+              <el-option value="" @click="DialogVisible = true"
+                >新增会员</el-option
+              >
+            </el-select>
+          </el-form-item>
+
+          <el-form-item label="单据日期">
+            <el-date-picker
+              v-model="value2"
+              type="datetime"
+              placeholder="选择日期和时间"
+              clearable
+            />
+          </el-form-item>
+
+          <el-form-item label="单据编号:">
+            <el-input
+              v-model="formInline.invoicesNum"
+              placeholder="输入单据编号"
+              clearable
+            />
+          </el-form-item>
+
+          <el-form-item label="收款类型">
+            <el-select v-model="formInline.addvipNum1" clearable>
+              <el-option label="现付" />
+            </el-select>
+          </el-form-item>
+        </el-form>
+      </div>
+      <!-- 新增会员 -->
+      <div class="add-vip">
+        <el-dialog
+          v-model="DialogVisible"
+          title="新增会员"
+          width="70%"
+          style="margin: 20% auto; height: 50%"
+          destroy-on-close
+          center
+        >
+          <div>
+            <el-form
+              :inline="true"
+              :model="formInline"
+              class="demo-form-inline"
+            >
+              <el-form-item label="会员卡号:">
+                <el-input
+                  v-model="formInline.user"
+                  placeholder="输入会员卡号"
+                  clearable
+                  style="width: 300px"
+                />
+              </el-form-item>
+
+              <el-form-item label=" 联系人员:">
+                <el-input
+                  v-model="formInline.user"
+                  placeholder="输入联系人"
+                  clearable
+                  style="width: 300px"
+                />
+              </el-form-item>
+
+              <el-form-item label="电话号码:">
+                <el-input
+                  v-model="formInline.user"
+                  placeholder="输入电话号码"
+                  clearable
+                  style="width: 300px"
+                />
+              </el-form-item>
+              <el-form-item label="联系电话:">
+                <el-input
+                  v-model="formInline.user"
+                  placeholder="输入联系电话"
+                  clearable
+                  style="width: 300px"
+                />
+              </el-form-item>
+
+              <el-form-item label="电子邮箱:">
+                <el-input
+                  v-model="formInline.user"
+                  placeholder="输入电子邮箱"
+                  clearable
+                  style="width: 300px"
+                />
+              </el-form-item>
+
+              <el-form-item label="进行排序:">
+                <el-input
+                  v-model="formInline.user"
+                  placeholder="输入排序"
+                  clearable
+                  style="width: 300px"
+                />
+              </el-form-item>
+              <!-- 文本域 -->
+              <el-form-item label="添加备注:">
+                <el-input
+                  :rows="2"
+                  style="width: 300px"
+                  v-model="textarea"
+                  placeholder="添加备注"
+                  type="textarea"
+                />
+              </el-form-item>
+            </el-form>
+          </div>
+          <!-- 底部 -->
+          <template #footer>
+            <span
+              class="dialog-footer"
+              style="position: absolute; inset: 85% 0 0"
+            >
+              <el-button @click="DialogVisible = false">取消</el-button>
+              <el-button type="primary" @click="DialogVisible = false">
+                确认
+              </el-button>
+            </span>
+          </template>
+        </el-dialog>
+      </div>
+    </el-dialog>
+
+    <!-- 表单信息区域 -->
+    <div class="table-info" style="margin-top: 10px; height: 400px">
+      <!-- 表格 -->
+      <el-table
+        border
+        :data="tableData"
+        style="width: 100%"
+        height="280"
+        ref="multipleTableRef"
+        @selection-change="handleSelectionChange"
+      >
+        <el-table-column type="selection" width="55" />
+        <el-table-column prop="name" label="Name" width="120" />
+        <el-table-column fixed prop="date" label="Date" width="150" />
+        <el-table-column prop="city" label="City" width="320" />
+        <el-table-column prop="state" label="State" width="120" />
+        <el-table-column prop="zip" label="Zip" width="120" />
+        <el-table-column prop="address" label="Address" width="600" />
+      </el-table>
+      <!-- 取消选择按钮 -->
+      <div style="float: left; margin-top: 20px">
+        <el-button @click="toggleSelection()">取消选择</el-button>
+      </div>
+      <!-- 分页器 -->
+      <div class="demo-pagination-block" style="float: right; margin-top: 20px">
+        <el-pagination
+          :page-sizes="[10, 20, 50, 150]"
+          :background="true"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="50"
+        />
+      </div>
+    </div>
+    底部
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { reactive, ref } from 'vue'
+import { Plus, Setting } from '@element-plus/icons-vue'
+//下拉选择
+const value1 = ref('')
+const value2 = ref('')
+
+//输入框
+const formInline = reactive({
+  user: '',
+  invoicesNum: '',
+  goodsInfo: '',
+  date: '',
+  vipNum: '',
+  addvipNum1: '',
+  stock: '',
+  operator: '',
+  SettlementAct: '',
+  invoicesState: '',
+  invoicesRemark: '',
+  addvipNum: '',
+})
+//展开状态
+const flag = ref(false)
+const changeFlag = () => {
+  flag.value = !flag.value
+}
+//表格新增按钮
+const centerDialogVisible = ref(false)
+const DialogVisible = ref(false)
+const textarea = ref('')
+
+//表格数据
+const tableData = [
+  {
+    date: '2016-05-03',
+    name: 'Tom',
+    state: 'California',
+    city: 'Los Angeles',
+    address: 'No. 189, Grove St, Los Angeles',
+    zip: 'CA 90036',
+  },
+  {
+    date: '2016-05-02',
+    name: 'Tom',
+    state: 'California',
+    city: 'Los Angeles',
+    address: 'No. 189, Grove St, Los Angeles',
+    zip: 'CA 90036',
+  },
+  {
+    date: '2016-05-04',
+    name: 'Tom',
+    state: 'California',
+    city: 'Los Angeles',
+    address: 'No. 189, Grove St, Los Angeles',
+    zip: 'CA 90036',
+  },
+  {
+    date: '2016-05-01',
+    name: 'Tom',
+    state: 'California',
+    city: 'Los Angeles',
+    address: 'No. 189, Grove St, Los Angeles',
+    zip: 'CA 90036',
+  },
+  {
+    date: '2016-05-08',
+    name: 'Tom',
+    state: 'California',
+    city: 'Los Angeles',
+    address: 'No. 189, Grove St, Los Angeles',
+    zip: 'CA 90036',
+  },
+  {
+    date: '2016-05-06',
+    name: 'Tom',
+    state: 'California',
+    city: 'Los Angeles',
+    address: 'No. 189, Grove St, Los Angeles',
+    zip: 'CA 90036',
+  },
+  {
+    date: '2016-05-07',
+    name: 'Tom',
+    state: 'California',
+    city: 'Los Angeles',
+    address: 'No. 189, Grove St, Los Angeles',
+    zip: 'CA 90036',
+  },
+]
+//表格多选功能
+const multipleTableRef = ref()
+const multipleSelection = ref()
+const toggleSelection = () => {
+  multipleTableRef.value?.clearSelection()
+}
+
+const handleSelectionChange = (val: any) => {
+  multipleSelection.value = val
+}
+//分页器功能
+</script>
+
+<style scoped lang="scss">
+/* 输入框样式 */
+.demo-form-inline .el-input {
+  --el-input-width: 200px;
+}
+</style>
diff --git a/src/views/retail/retailOutbound.vue b/src/views/retail/retail-return/index.vue
similarity index 42%
rename from src/views/retail/retailOutbound.vue
rename to src/views/retail/retail-return/index.vue
index e732c3c98e69f6c88663659eb49d72b3e49d295d..d5b13bec1d55f796f940bd48edfff39c10f02e76 100644
--- a/src/views/retail/retailOutbound.vue
+++ b/src/views/retail/retail-return/index.vue
@@ -1,11 +1,7 @@
 <template>
-  <div class="">
-    零售出库
-  </div>
+  <div class="retailReturns">零售退货</div>
 </template>
 
-<script setup lang="ts">
-
-</script>
+<script setup lang="ts"></script>
 
 <style lang="scss" scoped></style>
diff --git a/src/views/retail/retailReturns.vue b/src/views/retail/retailReturns.vue
deleted file mode 100644
index 5ce4c44a2f7f3f9d9ff2eda43e839570af06656a..0000000000000000000000000000000000000000
--- a/src/views/retail/retailReturns.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<template>
-  <div class="retailReturns">
-    零售退货
-  </div>
-</template>
-
-<script setup lang="ts">
-
-</script>
-
-<style lang="scss" scoped></style>