diff --git a/src/views/wmsBasicData/components/customerData-add.vue b/src/views/wmsBasicData/components/customerData-add.vue
new file mode 100644
index 0000000..f4757ba
--- /dev/null
+++ b/src/views/wmsBasicData/components/customerData-add.vue
@@ -0,0 +1,130 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 16:37:56
+ * @LastEditors: zwq
+ * @LastEditTime: 2022-10-20 13:49:04
+ * @Description:
+-->
+<template>
+  <el-dialog :visible.sync="visible" :title="!dataForm.id ? 'btn.add' : 'btn.edit' | i18nFilter" width="40%" class="dialog" @close="close">
+    <!-- <small-title slot="title">
+      {{ !dataForm.id ? 'btn.add' : 'btn.edit' | i18nFilter }}
+    </small-title> -->
+
+    <el-form
+      ref="dataForm"
+      :model="dataForm"
+      :rules="dataRule"
+      label-width="100px"
+      @keyup.enter.native="dataFormSubmit()"
+    >
+      <el-form-item label="客户名称" prop="name1">
+        <el-input
+          v-model="dataForm.name1"
+          placeholder="请输入客户名称"
+          clearable
+        />
+      </el-form-item>
+      <el-form-item label="分类" prop="name2">
+        <el-input
+          v-model="dataForm.name2"
+          placeholder="请输入分类"
+          clearable
+        />
+      </el-form-item>
+      <el-form-item label="联系人" prop="name3">
+        <el-input
+          v-model="dataForm.name3"
+          placeholder="请输入联系人"
+          clearable
+        />
+      </el-form-item>
+      <el-form-item label="电话" prop="name4">
+        <el-input
+          v-model="dataForm.name4"
+          placeholder="请输入电话"
+          clearable
+        />
+      </el-form-item>
+      <!-- <el-form-item label="ERP代码" prop="name5">
+        <el-input
+          v-model="dataForm.name5"
+          placeholder="请输入ERP代码"
+          clearable
+        />
+      </el-form-item> -->
+    </el-form>
+
+    <el-row style="text-align: right">
+      <el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
+      <el-button type="primary" @click="dataFormSubmit()">{{ 'btn.save' | i18nFilter }}</el-button>
+    </el-row>
+  </el-dialog>
+</template>
+
+<script>
+// import SmallTitle from '@/components/BaseDrawer/components/SmallTitle.vue'
+
+export default {
+  // components: { SmallTitle },
+  data() {
+    return {
+      visible: false,
+      dataForm: {
+        id: '',
+        name1: '',
+        name2: '',
+        name3: '',
+        name4: '',
+        name5: '',
+        name6: ''
+      },
+      dataRule: {
+        name1: [
+          {
+            required: true,
+            message: '请输入客户名称',
+            trigger: 'blur'
+          }
+        ]
+      }
+    }
+  },
+  methods: {
+    init(row) {
+      this.dataForm = row || ''
+      console.log(row)
+      this.visible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].resetFields()
+      })
+    },
+    // 表单提交
+    dataFormSubmit() {
+      this.$refs['dataForm'].validate(valid => {
+        if (valid) {
+          this.$message({
+            message: this.$t('module.basicData.visual.success'),
+            type: 'success',
+            duration: 1500,
+            onClose: () => {
+              this.visible = false
+              this.$emit('refreshDataList')
+            }
+          })
+        }
+      })
+    },
+    close() {
+      this.visible = false
+      this.$emit('refreshDataList')
+    }
+  }
+}
+</script>
+
+<style scoped>
+.dialog >>> .el-dialog__body {
+  padding: 30px 24px;
+}
+</style>
diff --git a/src/views/wmsBasicData/components/goodsAreaData-add.vue b/src/views/wmsBasicData/components/goodsAreaData-add.vue
new file mode 100644
index 0000000..b113f17
--- /dev/null
+++ b/src/views/wmsBasicData/components/goodsAreaData-add.vue
@@ -0,0 +1,137 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 16:37:56
+ * @LastEditors: zwq
+ * @LastEditTime: 2022-10-20 13:44:56
+ * @Description:
+-->
+<template>
+  <el-dialog :visible.sync="visible" :title="!dataForm.id ? 'btn.add' : 'btn.edit' | i18nFilter" width="40%" class="dialog" @close="close">
+    <!-- <small-title slot="title">
+      {{ !dataForm.id ? 'btn.add' : 'btn.edit' | i18nFilter }}
+    </small-title> -->
+
+    <el-form
+      ref="dataForm"
+      :model="dataForm"
+      :rules="dataRule"
+      label-width="100px"
+      @keyup.enter.native="dataFormSubmit()"
+    >
+      <el-form-item label="所属库区" prop="name1">
+        <el-input
+          v-model="dataForm.name1"
+          placeholder="请输入所属库区"
+          clearable
+        />
+      </el-form-item>
+      <el-form-item label="货位编号" prop="name2">
+        <el-input
+          v-model="dataForm.name2"
+          placeholder="请输入货位编号"
+          clearable
+        />
+      </el-form-item>
+      <el-form-item label="货位名称" prop="name3">
+        <el-input
+          v-model="dataForm.name3"
+          placeholder="请输入货位名称"
+          clearable
+        />
+      </el-form-item>
+      <el-form-item label="货位状态" prop="name4">
+        <el-input
+          v-model="dataForm.name4"
+          placeholder="请输入货位状态"
+          clearable
+        />
+      </el-form-item>
+      <el-form-item label="入库锁" prop="name5">
+        <el-input
+          v-model="dataForm.name5"
+          placeholder="请输入入库锁"
+          clearable
+        />
+      </el-form-item>
+      <el-form-item label="出库锁" prop="name6">
+        <el-input
+          v-model="dataForm.name6"
+          placeholder="请输入出库锁"
+          clearable
+        />
+      </el-form-item>
+    </el-form>
+
+    <el-row style="text-align: right">
+      <el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
+      <el-button type="primary" @click="dataFormSubmit()">{{ 'btn.save' | i18nFilter }}</el-button>
+    </el-row>
+  </el-dialog>
+</template>
+
+<script>
+// import SmallTitle from '@/components/BaseDrawer/components/SmallTitle.vue'
+
+export default {
+  // components: { SmallTitle },
+  data() {
+    return {
+      visible: false,
+      dataForm: {
+        id: '',
+        name1: '',
+        name2: '',
+        name3: '',
+        name4: '',
+        name5: '',
+        name6: ''
+      },
+      dataRule: {
+        name1: [
+          {
+            required: true,
+            message: '请输入所属库区',
+            trigger: 'blur'
+          }
+        ]
+      }
+    }
+  },
+  methods: {
+    init(row) {
+      this.dataForm = row || ''
+      console.log(row)
+      this.visible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].resetFields()
+      })
+    },
+    // 表单提交
+    dataFormSubmit() {
+      this.$refs['dataForm'].validate(valid => {
+        if (valid) {
+          this.$message({
+            message: this.$t('module.basicData.visual.success'),
+            type: 'success',
+            duration: 1500,
+            onClose: () => {
+              this.visible = false
+              this.$emit('refreshDataList')
+            }
+          })
+        }
+      })
+    },
+    close() {
+      this.visible = false
+      this.$emit('refreshDataList')
+    }
+  }
+}
+</script>
+
+<style scoped>
+.dialog >>> .el-dialog__body {
+  padding: 30px 24px;
+}
+</style>
diff --git a/src/views/wmsBasicData/components/goodsData-add.vue b/src/views/wmsBasicData/components/goodsData-add.vue
new file mode 100644
index 0000000..dfc4091
--- /dev/null
+++ b/src/views/wmsBasicData/components/goodsData-add.vue
@@ -0,0 +1,121 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 16:37:56
+ * @LastEditors: zwq
+ * @LastEditTime: 2022-10-20 13:53:22
+ * @Description:
+-->
+<template>
+  <el-dialog :visible.sync="visible" :title="!dataForm.id ? 'btn.add' : 'btn.edit' | i18nFilter" width="40%" class="dialog" @close="close">
+    <!-- <small-title slot="title">
+      {{ !dataForm.id ? 'btn.add' : 'btn.edit' | i18nFilter }}
+    </small-title> -->
+
+    <el-form
+      ref="dataForm"
+      :model="dataForm"
+      :rules="dataRule"
+      label-width="100px"
+      @keyup.enter.native="dataFormSubmit()"
+    >
+      <el-form-item label="物品名称" prop="name1">
+        <el-input
+          v-model="dataForm.name1"
+          placeholder="请输入物品名称"
+          clearable
+        />
+      </el-form-item>
+      <el-form-item label="编码" prop="name2">
+        <el-input
+          v-model="dataForm.name2"
+          placeholder="请输入编码"
+          clearable
+        />
+      </el-form-item>
+      <el-form-item label="类别" prop="name3">
+        <el-input
+          v-model="dataForm.name3"
+          placeholder="请输入类别"
+          clearable
+        />
+      </el-form-item>
+      <el-form-item label="属性" prop="name4">
+        <el-input
+          v-model="dataForm.name4"
+          placeholder="请输入属性"
+          clearable
+        />
+      </el-form-item>
+    </el-form>
+
+    <el-row style="text-align: right">
+      <el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
+      <el-button type="primary" @click="dataFormSubmit()">{{ 'btn.save' | i18nFilter }}</el-button>
+    </el-row>
+  </el-dialog>
+</template>
+
+<script>
+// import SmallTitle from '@/components/BaseDrawer/components/SmallTitle.vue'
+
+export default {
+  // components: { SmallTitle },
+  data() {
+    return {
+      visible: false,
+      dataForm: {
+        id: '',
+        name1: '',
+        name2: '',
+        name3: '',
+        name4: ''
+      },
+      dataRule: {
+        name1: [
+          {
+            required: true,
+            message: '请输入物品名称',
+            trigger: 'blur'
+          }
+        ]
+      }
+    }
+  },
+  methods: {
+    init(row) {
+      this.dataForm = row || ''
+      console.log(row)
+      this.visible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].resetFields()
+      })
+    },
+    // 表单提交
+    dataFormSubmit() {
+      this.$refs['dataForm'].validate(valid => {
+        if (valid) {
+          this.$message({
+            message: this.$t('module.basicData.visual.success'),
+            type: 'success',
+            duration: 1500,
+            onClose: () => {
+              this.visible = false
+              this.$emit('refreshDataList')
+            }
+          })
+        }
+      })
+    },
+    close() {
+      this.visible = false
+      this.$emit('refreshDataList')
+    }
+  }
+}
+</script>
+
+<style scoped>
+.dialog >>> .el-dialog__body {
+  padding: 30px 24px;
+}
+</style>
diff --git a/src/views/wmsBasicData/components/warehouseData-add.vue b/src/views/wmsBasicData/components/warehouseData-add.vue
new file mode 100644
index 0000000..76b46ff
--- /dev/null
+++ b/src/views/wmsBasicData/components/warehouseData-add.vue
@@ -0,0 +1,121 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 16:37:56
+ * @LastEditors: zwq
+ * @LastEditTime: 2022-10-20 13:38:57
+ * @Description:
+-->
+<template>
+  <el-dialog :visible.sync="visible" :title="!dataForm.id ? 'btn.add' : 'btn.edit' | i18nFilter" width="40%" class="dialog" @close="close">
+    <!-- <small-title slot="title">
+      {{ !dataForm.id ? 'btn.add' : 'btn.edit' | i18nFilter }}
+    </small-title> -->
+
+    <el-form
+      ref="dataForm"
+      :model="dataForm"
+      :rules="dataRule"
+      label-width="100px"
+      @keyup.enter.native="dataFormSubmit()"
+    >
+      <el-form-item label="所属仓库名称" prop="name1">
+        <el-input
+          v-model="dataForm.name1"
+          placeholder="请输入所属仓库名称"
+          clearable
+        />
+      </el-form-item>
+      <el-form-item label="区域名称" prop="name2">
+        <el-input
+          v-model="dataForm.name2"
+          placeholder="请输入区域名称"
+          clearable
+        />
+      </el-form-item>
+      <el-form-item label="区域属性" prop="name3">
+        <el-input
+          v-model="dataForm.name3"
+          placeholder="请输入区域属性"
+          clearable
+        />
+      </el-form-item>
+      <el-form-item label="ERP代码" prop="name4">
+        <el-input
+          v-model="dataForm.name4"
+          placeholder="请输入ERP代码"
+          clearable
+        />
+      </el-form-item>
+    </el-form>
+
+    <el-row style="text-align: right">
+      <el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
+      <el-button type="primary" @click="dataFormSubmit()">{{ 'btn.save' | i18nFilter }}</el-button>
+    </el-row>
+  </el-dialog>
+</template>
+
+<script>
+// import SmallTitle from '@/components/BaseDrawer/components/SmallTitle.vue'
+
+export default {
+  // components: { SmallTitle },
+  data() {
+    return {
+      visible: false,
+      dataForm: {
+        id: '',
+        name1: '',
+        name2: '',
+        name3: '',
+        name4: ''
+      },
+      dataRule: {
+        name1: [
+          {
+            required: true,
+            message: '请输入所属仓库名称',
+            trigger: 'blur'
+          }
+        ]
+      }
+    }
+  },
+  methods: {
+    init(row) {
+      this.dataForm = row || ''
+      console.log(row)
+      this.visible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].resetFields()
+      })
+    },
+    // 表单提交
+    dataFormSubmit() {
+      this.$refs['dataForm'].validate(valid => {
+        if (valid) {
+          this.$message({
+            message: this.$t('module.basicData.visual.success'),
+            type: 'success',
+            duration: 1500,
+            onClose: () => {
+              this.visible = false
+              this.$emit('refreshDataList')
+            }
+          })
+        }
+      })
+    },
+    close() {
+      this.visible = false
+      this.$emit('refreshDataList')
+    }
+  }
+}
+</script>
+
+<style scoped>
+.dialog >>> .el-dialog__body {
+  padding: 30px 24px;
+}
+</style>
diff --git a/src/views/wmsBasicData/customerData.vue b/src/views/wmsBasicData/customerData.vue
index 557f0ed..24563f1 100644
--- a/src/views/wmsBasicData/customerData.vue
+++ b/src/views/wmsBasicData/customerData.vue
@@ -1,8 +1,234 @@
+<!--/*
+* @Author: zwq
+* @Date: 2020-12-29 15:41:11
+* @LastEditTime: 2022-04-15
+* @LastEditors: juzi
+* @Description: 拆分了搜索区和功能按钮区，增加了toptitle
+*/
+-->
 <template>
-  <div>customerData</div>
+  <div class="app-container">
+    <head-form :form-config="headFormConfig" @headBtnClick="btnClick" />
+    <base-table
+      :top-btn-config="topBtnConfig"
+      :page="listQuery.current"
+      :limit="listQuery.size"
+      :table-config="tableProps"
+      :table-data="list"
+      :is-loading="listLoading"
+      @clickTopBtn="clickTopBtn"
+    >
+      <method-btn
+        slot="handleBtn"
+        :width="calculateWidth"
+        :method-list="tableBtn"
+        @clickBtn="handleClick"
+      />
+    </base-table>
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="listQuery.current"
+      :limit.sync="listQuery.size"
+      @pagination="getList()"
+    />
+    <customerData-add v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getList" />
+  </div>
 </template>
+
 <script>
+import CustomerDataAdd from './components/customerData-add.vue'
+import HeadForm from '@/components/basicData/HeadForm'
+import BaseTable from '@/components/BaseTable'
+import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+import { timeFormatter } from '@/filters'
+import i18n from '@/lang'
+/**
+ * 表格表头配置项 TypeScript接口注释
+ * tableConfig<ConfigItem> = []
+ *
+ * Interface ConfigItem = {
+ *  prop: string,
+ *  label: string,
+ *  width: string,
+ *  align: string,
+ *  subcomponent: function,
+ *  filter: function
+ * }
+ *
+ *
+ */
+const topBtnConfig = [
+  {
+    type: 'add',
+    btnName: 'btn.add'
+  }
+]
+
+const tableBtn = [
+  {
+    type: 'edit',
+    btnName: 'btn.edit'
+  },
+  {
+    type: 'delete',
+    btnName: 'btn.delete'
+  }
+]
+const tableProps = [
+  {
+    prop: 'createTime',
+    label: i18n.t('module.basicData.factory.createTime'),
+    filter: timeFormatter
+  },
+  {
+    prop: 'name1',
+    label: '客户名称'
+  },
+  {
+    prop: 'name2',
+    label: '分类'
+  },
+  {
+    prop: 'name3',
+    label: '联系人'
+  },
+  {
+    prop: 'name4',
+    label: '电话'
+  }
+  // {
+  //   prop: 'name5',
+  //   label: 'ERP代码'
+  // }
+]
+
 export default {
-  name: 'CustomerData'
+  name: 'CustomerData',
+  components: { Pagination, BaseTable, MethodBtn, HeadForm, CustomerDataAdd },
+  filters: {
+    statusFilter(status) {
+      const statusMap = {
+        published: 'success',
+        draft: 'info',
+        deleted: 'danger'
+      }
+      return statusMap[status]
+    }
+  },
+  data() {
+    return {
+      addOrUpdateVisible: false,
+      topBtnConfig,
+      tableBtn,
+      trueWidth: 200,
+      tableProps,
+      list: [],
+      total: 0,
+      listLoading: true,
+      listQuery: {
+        current: 1,
+        size: 20,
+        key: ''
+      },
+      headFormConfig: [
+        {
+          type: 'input',
+          label: i18n.t('module.basicData.visual.keyword'),
+          placeholder: '客户名称',
+          param: 'name'
+        },
+        {
+          type: 'button',
+          btnName: 'btn.search',
+          name: 'search',
+          color: 'primary'
+        }
+      ],
+      headFormValue: {}
+    }
+  },
+  computed: {
+    calculateWidth() {
+      return this.tableBtn.length * 40 // 操作列的每个按钮宽度40
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    handleClick(raw) {
+      console.log(raw)
+      if (raw.type === 'delete') {
+        this.$confirm(
+          `${this.$t('module.basicData.visual.TipsBefore')}[${raw.data.name}]?`,
+          this.$t('module.basicData.visual.Tips'),
+          {
+            confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
+            cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
+            type: 'warning'
+          }
+        )
+          .then(() => {
+            this.$message({
+              message: this.$t('module.basicData.visual.success'),
+              type: 'success',
+              duration: 1500,
+              onClose: () => {
+                this.getList()
+              }
+            })
+          })
+          .catch(() => {})
+      } else {
+        this.addNew(raw.data)
+      }
+    },
+    getList() {
+      this.listLoading = false
+      this.listQuery.key = this.headFormValue.name
+      this.list = [
+        {
+          id: 1,
+          name1: '东路钢铁公司',
+          name2: '供应商',
+          name3: '张总',
+          name4: '13768470056',
+          name5: ''
+        }
+      ]
+    },
+    btnClick(val) {
+      this.headFormValue = val
+      // 如果点击的是搜索栏的其他按钮在这里继续写判断
+      if (this.headFormValue.btnName === 'search') {
+        this.getList()
+      }
+    },
+    clickTopBtn(val) {
+      if (val === 'add') {
+        this.addNew()
+      }
+    },
+    // 新增 / 修改
+    addNew(row) {
+      this.addOrUpdateVisible = true
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.init(row)
+      })
+    }
+  }
 }
 </script>
+
+<style scoped>
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>
diff --git a/src/views/wmsBasicData/goodsAreaData.vue b/src/views/wmsBasicData/goodsAreaData.vue
index 7d67045..05cdf5b 100644
--- a/src/views/wmsBasicData/goodsAreaData.vue
+++ b/src/views/wmsBasicData/goodsAreaData.vue
@@ -1,8 +1,239 @@
+<!--/*
+* @Author: zwq
+* @Date: 2020-12-29 15:41:11
+* @LastEditTime: 2022-04-15
+* @LastEditors: juzi
+* @Description: 拆分了搜索区和功能按钮区，增加了toptitle
+*/
+-->
 <template>
-  <div>goodsAreaData</div>
+  <div class="app-container">
+    <head-form :form-config="headFormConfig" @headBtnClick="btnClick" />
+    <base-table
+      :top-btn-config="topBtnConfig"
+      :page="listQuery.current"
+      :limit="listQuery.size"
+      :table-config="tableProps"
+      :table-data="list"
+      :is-loading="listLoading"
+      @clickTopBtn="clickTopBtn"
+    >
+      <method-btn
+        slot="handleBtn"
+        :width="calculateWidth"
+        :method-list="tableBtn"
+        @clickBtn="handleClick"
+      />
+    </base-table>
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="listQuery.current"
+      :limit.sync="listQuery.size"
+      @pagination="getList()"
+    />
+    <data-add v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getList" />
+  </div>
 </template>
+
 <script>
+import DataAdd from './components/goodsAreaData-add.vue'
+import HeadForm from '@/components/basicData/HeadForm'
+import BaseTable from '@/components/BaseTable'
+import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+import { timeFormatter } from '@/filters'
+import i18n from '@/lang'
+/**
+ * 表格表头配置项 TypeScript接口注释
+ * tableConfig<ConfigItem> = []
+ *
+ * Interface ConfigItem = {
+ *  prop: string,
+ *  label: string,
+ *  width: string,
+ *  align: string,
+ *  subcomponent: function,
+ *  filter: function
+ * }
+ *
+ *
+ */
+const topBtnConfig = [
+  {
+    type: 'add',
+    btnName: 'btn.add'
+  }
+]
+
+const tableBtn = [
+  {
+    type: 'edit',
+    btnName: 'btn.edit'
+  },
+  {
+    type: 'delete',
+    btnName: 'btn.delete'
+  }
+]
+const tableProps = [
+  {
+    prop: 'createTime',
+    label: i18n.t('module.basicData.factory.createTime'),
+    filter: timeFormatter
+  },
+  {
+    prop: 'name1',
+    label: '所属库区'
+  },
+  {
+    prop: 'name2',
+    label: '货位编号'
+  },
+  {
+    prop: 'name3',
+    label: '货位名称'
+  },
+  {
+    prop: 'name4',
+    label: '货位状态'
+  },
+  {
+    prop: 'name5',
+    label: '入库锁'
+  },
+  {
+    prop: 'name6',
+    label: '出库锁'
+  }
+]
+
 export default {
-  name: 'GoodsAreaData'
+  name: 'GoodsAreaData',
+  components: { Pagination, BaseTable, MethodBtn, HeadForm, DataAdd },
+  filters: {
+    statusFilter(status) {
+      const statusMap = {
+        published: 'success',
+        draft: 'info',
+        deleted: 'danger'
+      }
+      return statusMap[status]
+    }
+  },
+  data() {
+    return {
+      addOrUpdateVisible: false,
+      topBtnConfig,
+      tableBtn,
+      trueWidth: 200,
+      tableProps,
+      list: [],
+      total: 0,
+      listLoading: true,
+      listQuery: {
+        current: 1,
+        size: 20,
+        key: ''
+      },
+      headFormConfig: [
+        {
+          type: 'input',
+          label: i18n.t('module.basicData.visual.keyword'),
+          placeholder: this.$t('module.basicData.factory.placeholderName'),
+          param: 'name'
+        },
+        {
+          type: 'button',
+          btnName: 'btn.search',
+          name: 'search',
+          color: 'primary'
+        }
+      ],
+      headFormValue: {}
+    }
+  },
+  computed: {
+    calculateWidth() {
+      return this.tableBtn.length * 40 // 操作列的每个按钮宽度40
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    handleClick(raw) {
+      console.log(raw)
+      if (raw.type === 'delete') {
+        this.$confirm(
+          `${this.$t('module.basicData.visual.TipsBefore')}[${raw.data.name}]?`,
+          this.$t('module.basicData.visual.Tips'),
+          {
+            confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
+            cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
+            type: 'warning'
+          }
+        )
+          .then(() => {
+            this.$message({
+              message: this.$t('module.basicData.visual.success'),
+              type: 'success',
+              duration: 1500,
+              onClose: () => {
+                this.getList()
+              }
+            })
+          })
+          .catch(() => {})
+      } else {
+        this.addNew(raw.data)
+      }
+    },
+    getList() {
+      this.listLoading = false
+      this.listQuery.key = this.headFormValue.name
+      this.list = [
+        {
+          id: 1,
+          name1: 'A区',
+          name2: '2022040696',
+          name3: '成品',
+          name4: '空闲',
+          name5: '开',
+          name6: '关'
+        }
+      ]
+    },
+    btnClick(val) {
+      this.headFormValue = val
+      // 如果点击的是搜索栏的其他按钮在这里继续写判断
+      if (this.headFormValue.btnName === 'search') {
+        this.getList()
+      }
+    },
+    clickTopBtn(val) {
+      if (val === 'add') {
+        this.addNew()
+      }
+    },
+    // 新增 / 修改
+    addNew(row) {
+      this.addOrUpdateVisible = true
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.init(row)
+      })
+    }
+  }
 }
 </script>
+
+<style scoped>
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>
diff --git a/src/views/wmsBasicData/goodsData.vue b/src/views/wmsBasicData/goodsData.vue
index e7a5372..05284bd 100644
--- a/src/views/wmsBasicData/goodsData.vue
+++ b/src/views/wmsBasicData/goodsData.vue
@@ -1,8 +1,229 @@
+<!--/*
+* @Author: zwq
+* @Date: 2020-12-29 15:41:11
+* @LastEditTime: 2022-04-15
+* @LastEditors: juzi
+* @Description: 拆分了搜索区和功能按钮区，增加了toptitle
+*/
+-->
 <template>
-  <div>goodsData</div>
+  <div class="app-container">
+    <head-form :form-config="headFormConfig" @headBtnClick="btnClick" />
+    <base-table
+      :top-btn-config="topBtnConfig"
+      :page="listQuery.current"
+      :limit="listQuery.size"
+      :table-config="tableProps"
+      :table-data="list"
+      :is-loading="listLoading"
+      @clickTopBtn="clickTopBtn"
+    >
+      <method-btn
+        slot="handleBtn"
+        :width="calculateWidth"
+        :method-list="tableBtn"
+        @clickBtn="handleClick"
+      />
+    </base-table>
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="listQuery.current"
+      :limit.sync="listQuery.size"
+      @pagination="getList()"
+    />
+    <data-add v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getList" />
+  </div>
 </template>
+
 <script>
+import DataAdd from './components/goodsData-add.vue'
+import HeadForm from '@/components/basicData/HeadForm'
+import BaseTable from '@/components/BaseTable'
+import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+import { timeFormatter } from '@/filters'
+import i18n from '@/lang'
+/**
+ * 表格表头配置项 TypeScript接口注释
+ * tableConfig<ConfigItem> = []
+ *
+ * Interface ConfigItem = {
+ *  prop: string,
+ *  label: string,
+ *  width: string,
+ *  align: string,
+ *  subcomponent: function,
+ *  filter: function
+ * }
+ *
+ *
+ */
+const topBtnConfig = [
+  {
+    type: 'add',
+    btnName: 'btn.add'
+  }
+]
+
+const tableBtn = [
+  {
+    type: 'edit',
+    btnName: 'btn.edit'
+  },
+  {
+    type: 'delete',
+    btnName: 'btn.delete'
+  }
+]
+const tableProps = [
+  {
+    prop: 'createTime',
+    label: i18n.t('module.basicData.factory.createTime'),
+    filter: timeFormatter
+  },
+  {
+    prop: 'name1',
+    label: '物品名称'
+  },
+  {
+    prop: 'name2',
+    label: '编码'
+  },
+  {
+    prop: 'name3',
+    label: '类别'
+  },
+  {
+    prop: 'name4',
+    label: '属性'
+  }
+]
+
 export default {
-  name: 'GoodsData'
+  name: 'GoodsData',
+  components: { Pagination, BaseTable, MethodBtn, HeadForm, DataAdd },
+  filters: {
+    statusFilter(status) {
+      const statusMap = {
+        published: 'success',
+        draft: 'info',
+        deleted: 'danger'
+      }
+      return statusMap[status]
+    }
+  },
+  data() {
+    return {
+      addOrUpdateVisible: false,
+      topBtnConfig,
+      tableBtn,
+      trueWidth: 200,
+      tableProps,
+      list: [],
+      total: 0,
+      listLoading: true,
+      listQuery: {
+        current: 1,
+        size: 20,
+        key: ''
+      },
+      headFormConfig: [
+        {
+          type: 'input',
+          label: i18n.t('module.basicData.visual.keyword'),
+          placeholder: this.$t('module.basicData.factory.placeholderName'),
+          param: 'name'
+        },
+        {
+          type: 'button',
+          btnName: 'btn.search',
+          name: 'search',
+          color: 'primary'
+        }
+      ],
+      headFormValue: {}
+    }
+  },
+  computed: {
+    calculateWidth() {
+      return this.tableBtn.length * 40 // 操作列的每个按钮宽度40
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    handleClick(raw) {
+      console.log(raw)
+      if (raw.type === 'delete') {
+        this.$confirm(
+          `${this.$t('module.basicData.visual.TipsBefore')}[${raw.data.name}]?`,
+          this.$t('module.basicData.visual.Tips'),
+          {
+            confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
+            cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
+            type: 'warning'
+          }
+        )
+          .then(() => {
+            this.$message({
+              message: this.$t('module.basicData.visual.success'),
+              type: 'success',
+              duration: 1500,
+              onClose: () => {
+                this.getList()
+              }
+            })
+          })
+          .catch(() => {})
+      } else {
+        this.addNew(raw.data)
+      }
+    },
+    getList() {
+      this.listLoading = false
+      this.listQuery.key = this.headFormValue.name
+      this.list = [
+        {
+          id: 1,
+          name1: '清洗液',
+          name2: '20220608684',
+          name3: '清洗机',
+          name4: ''
+        }
+      ]
+    },
+    btnClick(val) {
+      this.headFormValue = val
+      // 如果点击的是搜索栏的其他按钮在这里继续写判断
+      if (this.headFormValue.btnName === 'search') {
+        this.getList()
+      }
+    },
+    clickTopBtn(val) {
+      if (val === 'add') {
+        this.addNew()
+      }
+    },
+    // 新增 / 修改
+    addNew(row) {
+      this.addOrUpdateVisible = true
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.init(row)
+      })
+    }
+  }
 }
 </script>
+
+<style scoped>
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>
diff --git a/src/views/wmsBasicData/warehouseData.vue b/src/views/wmsBasicData/warehouseData.vue
index 71f9bfc..a57855c 100644
--- a/src/views/wmsBasicData/warehouseData.vue
+++ b/src/views/wmsBasicData/warehouseData.vue
@@ -1,8 +1,228 @@
+<!--/*
+* @Author: zwq
+* @Date: 2020-12-29 15:41:11
+* @LastEditTime: 2022-04-15
+* @LastEditors: juzi
+* @Description: 拆分了搜索区和功能按钮区，增加了toptitle
+*/
+-->
 <template>
-  <div>warehouseData</div>
+  <div class="app-container">
+    <head-form :form-config="headFormConfig" @headBtnClick="btnClick" />
+    <base-table
+      :top-btn-config="topBtnConfig"
+      :page="listQuery.current"
+      :limit="listQuery.size"
+      :table-config="tableProps"
+      :table-data="list"
+      :is-loading="listLoading"
+      @clickTopBtn="clickTopBtn"
+    >
+      <method-btn
+        slot="handleBtn"
+        :width="calculateWidth"
+        :method-list="tableBtn"
+        @clickBtn="handleClick"
+      />
+    </base-table>
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="listQuery.current"
+      :limit.sync="listQuery.size"
+      @pagination="getList()"
+    />
+    <data-add v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getList" />
+  </div>
 </template>
+
 <script>
+import DataAdd from './components/warehouseData-add.vue'
+import HeadForm from '@/components/basicData/HeadForm'
+import BaseTable from '@/components/BaseTable'
+import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+import { timeFormatter } from '@/filters'
+import i18n from '@/lang'
+/**
+ * 表格表头配置项 TypeScript接口注释
+ * tableConfig<ConfigItem> = []
+ *
+ * Interface ConfigItem = {
+ *  prop: string,
+ *  label: string,
+ *  width: string,
+ *  align: string,
+ *  subcomponent: function,
+ *  filter: function
+ * }
+ *
+ *
+ */
+const topBtnConfig = [
+  {
+    type: 'add',
+    btnName: 'btn.add'
+  }
+]
+
+const tableBtn = [
+  {
+    type: 'edit',
+    btnName: 'btn.edit'
+  },
+  {
+    type: 'delete',
+    btnName: 'btn.delete'
+  }
+]
+const tableProps = [
+  {
+    prop: 'createTime',
+    label: i18n.t('module.basicData.factory.createTime'),
+    filter: timeFormatter
+  },
+  {
+    prop: 'name1',
+    label: '所属仓库名称'
+  },
+  {
+    prop: 'name2',
+    label: '区域名称'
+  },
+  {
+    prop: 'name3',
+    label: '区域属性'
+  },
+  {
+    prop: 'name4',
+    label: 'ERP代码'
+  }
+]
+
 export default {
-  name: 'WarehouseData'
+  name: 'WarehouseData',
+  components: { Pagination, BaseTable, MethodBtn, HeadForm, DataAdd },
+  filters: {
+    statusFilter(status) {
+      const statusMap = {
+        published: 'success',
+        draft: 'info',
+        deleted: 'danger'
+      }
+      return statusMap[status]
+    }
+  },
+  data() {
+    return {
+      addOrUpdateVisible: false,
+      topBtnConfig,
+      tableBtn,
+      trueWidth: 200,
+      tableProps,
+      list: [],
+      total: 0,
+      listLoading: true,
+      listQuery: {
+        current: 1,
+        size: 20,
+        key: ''
+      },
+      headFormConfig: [
+        {
+          type: 'input',
+          label: i18n.t('module.basicData.visual.keyword'),
+          placeholder: '仓库名称或区域名称',
+          param: 'name'
+        },
+        {
+          type: 'button',
+          btnName: 'btn.search',
+          name: 'search',
+          color: 'primary'
+        }
+      ],
+      headFormValue: {}
+    }
+  },
+  computed: {
+    calculateWidth() {
+      return this.tableBtn.length * 40 // 操作列的每个按钮宽度40
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    handleClick(raw) {
+      console.log(raw)
+      if (raw.type === 'delete') {
+        this.$confirm(
+          `${this.$t('module.basicData.visual.TipsBefore')}[${raw.data.name}]?`,
+          this.$t('module.basicData.visual.Tips'),
+          {
+            confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
+            cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
+            type: 'warning'
+          }
+        )
+          .then(() => {
+            this.$message({
+              message: this.$t('module.basicData.visual.success'),
+              type: 'success',
+              duration: 1500,
+              onClose: () => {
+                this.getList()
+              }
+            })
+          })
+          .catch(() => {})
+      } else {
+        this.addNew(raw.data)
+      }
+    },
+    getList() {
+      this.listLoading = false
+      this.listQuery.key = this.headFormValue.name
+      this.list = [
+        {
+          id: 1,
+          name1: '东仓库',
+          name2: 'A区',
+          name3: '空闲'
+        }
+      ]
+    },
+    btnClick(val) {
+      this.headFormValue = val
+      // 如果点击的是搜索栏的其他按钮在这里继续写判断
+      if (this.headFormValue.btnName === 'search') {
+        this.getList()
+      }
+    },
+    clickTopBtn(val) {
+      if (val === 'add') {
+        this.addNew()
+      }
+    },
+    // 新增 / 修改
+    addNew(row) {
+      this.addOrUpdateVisible = true
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.init(row)
+      })
+    }
+  }
 }
 </script>
+
+<style scoped>
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>
diff --git a/src/views/wmsStatisticalReports/inventoryReport.vue b/src/views/wmsStatisticalReports/inventoryReport.vue
index c13c9e5..66ef3fe 100644
--- a/src/views/wmsStatisticalReports/inventoryReport.vue
+++ b/src/views/wmsStatisticalReports/inventoryReport.vue
@@ -1,8 +1,182 @@
+<!--/*
+* @Author: zwq
+* @Date: 2020-12-29 15:41:11
+* @LastEditTime: 2022-04-15
+* @LastEditors: juzi
+* @Description: 拆分了搜索区和功能按钮区，增加了toptitle
+*/
+-->
 <template>
-  <div>12134545456</div>
+  <div class="app-container">
+    <head-form :form-config="headFormConfig" @headBtnClick="btnClick" />
+    <base-table
+      :page="listQuery.current"
+      :limit="listQuery.size"
+      :table-config="tableProps"
+      :table-data="list"
+      :is-loading="listLoading"
+      @clickTopBtn="clickTopBtn"
+    />
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="listQuery.current"
+      :limit.sync="listQuery.size"
+      @pagination="getList()"
+    />
+    <data-add v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getList" />
+  </div>
 </template>
+
 <script>
+import HeadForm from '@/components/basicData/HeadForm'
+import BaseTable from '@/components/BaseTable'
+import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
+import { timeFormatter } from '@/filters'
+import i18n from '@/lang'
+/**
+ * 表格表头配置项 TypeScript接口注释
+ * tableConfig<ConfigItem> = []
+ *
+ * Interface ConfigItem = {
+ *  prop: string,
+ *  label: string,
+ *  width: string,
+ *  align: string,
+ *  subcomponent: function,
+ *  filter: function
+ * }
+ *
+ *
+ */
+
+const tableProps = [
+  {
+    prop: 'createTime',
+    label: i18n.t('module.basicData.factory.createTime'),
+    filter: timeFormatter
+  },
+  {
+    prop: 'name1',
+    label: '单号'
+  },
+  {
+    prop: 'name2',
+    label: '类型'
+  },
+  {
+    prop: 'name3',
+    label: '品名'
+  },
+  {
+    prop: 'name4',
+    label: '规格'
+  },
+  {
+    prop: 'name5',
+    label: '物料编码'
+  },
+  {
+    prop: 'name6',
+    label: '数量'
+  }
+]
+
 export default {
-  name: 'InventoryReport'
+  name: 'InventoryReport',
+  components: { Pagination, BaseTable, HeadForm },
+  filters: {
+    statusFilter(status) {
+      const statusMap = {
+        published: 'success',
+        draft: 'info',
+        deleted: 'danger'
+      }
+      return statusMap[status]
+    }
+  },
+  data() {
+    return {
+      trueWidth: 200,
+      tableProps,
+      list: [],
+      total: 0,
+      listLoading: true,
+      listQuery: {
+        current: 1,
+        size: 20,
+        key: ''
+      },
+      headFormConfig: [
+        {
+          type: 'input',
+          label: i18n.t('module.basicData.visual.keyword'),
+          placeholder: '单号或品名',
+          param: 'name'
+        },
+        {
+          type: 'datePicker',
+          dateType: 'daterange',
+          rangeSeparator: '至',
+          startPlaceholder: '开始日期',
+          endPlaceholder: '结束日期',
+          label: '时间范围',
+          param: 'dateArr'
+        },
+        {
+          type: 'button',
+          btnName: 'btn.search',
+          name: 'search',
+          color: 'primary'
+        }
+      ],
+      headFormValue: {}
+    }
+  },
+  computed: {
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    getList() {
+      this.listLoading = false
+      this.listQuery.key = this.headFormValue.name
+      this.list = [
+        {
+          id: 1,
+          name1: '2022040696',
+          name2: '类别1',
+          name3: '成品',
+          name4: '中型',
+          name5: 'E554846167',
+          name6: '96'
+        }
+      ]
+    },
+    btnClick(val) {
+      this.headFormValue = val
+      // 如果点击的是搜索栏的其他按钮在这里继续写判断
+      if (this.headFormValue.btnName === 'search') {
+        this.getList()
+      }
+    },
+    clickTopBtn(val) {
+      if (val === 'add') {
+        this.addNew()
+      }
+    }
+  }
 }
 </script>
+
+<style scoped>
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>
diff --git a/src/views/wmsStatisticalReports/outStoreReport.vue b/src/views/wmsStatisticalReports/outStoreReport.vue
index e5d0c87..f0a1cb5 100644
--- a/src/views/wmsStatisticalReports/outStoreReport.vue
+++ b/src/views/wmsStatisticalReports/outStoreReport.vue
@@ -1,8 +1,182 @@
+<!--/*
+* @Author: zwq
+* @Date: 2020-12-29 15:41:11
+* @LastEditTime: 2022-04-15
+* @LastEditors: juzi
+* @Description: 拆分了搜索区和功能按钮区，增加了toptitle
+*/
+-->
 <template>
-  <div>outStoreReport</div>
+  <div class="app-container">
+    <head-form :form-config="headFormConfig" @headBtnClick="btnClick" />
+    <base-table
+      :page="listQuery.current"
+      :limit="listQuery.size"
+      :table-config="tableProps"
+      :table-data="list"
+      :is-loading="listLoading"
+      @clickTopBtn="clickTopBtn"
+    />
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="listQuery.current"
+      :limit.sync="listQuery.size"
+      @pagination="getList()"
+    />
+    <data-add v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getList" />
+  </div>
 </template>
+
 <script>
+import HeadForm from '@/components/basicData/HeadForm'
+import BaseTable from '@/components/BaseTable'
+import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
+import { timeFormatter } from '@/filters'
+import i18n from '@/lang'
+/**
+ * 表格表头配置项 TypeScript接口注释
+ * tableConfig<ConfigItem> = []
+ *
+ * Interface ConfigItem = {
+ *  prop: string,
+ *  label: string,
+ *  width: string,
+ *  align: string,
+ *  subcomponent: function,
+ *  filter: function
+ * }
+ *
+ *
+ */
+
+const tableProps = [
+  {
+    prop: 'createTime',
+    label: i18n.t('module.basicData.factory.createTime'),
+    filter: timeFormatter
+  },
+  {
+    prop: 'name1',
+    label: '单号'
+  },
+  {
+    prop: 'name2',
+    label: '类型'
+  },
+  {
+    prop: 'name3',
+    label: '品名'
+  },
+  {
+    prop: 'name4',
+    label: '规格'
+  },
+  {
+    prop: 'name5',
+    label: '物料编码'
+  },
+  {
+    prop: 'name6',
+    label: '数量'
+  }
+]
+
 export default {
-  name: 'OutStoreReport'
+  name: 'OutStoreReport',
+  components: { Pagination, BaseTable, HeadForm },
+  filters: {
+    statusFilter(status) {
+      const statusMap = {
+        published: 'success',
+        draft: 'info',
+        deleted: 'danger'
+      }
+      return statusMap[status]
+    }
+  },
+  data() {
+    return {
+      trueWidth: 200,
+      tableProps,
+      list: [],
+      total: 0,
+      listLoading: true,
+      listQuery: {
+        current: 1,
+        size: 20,
+        key: ''
+      },
+      headFormConfig: [
+        {
+          type: 'input',
+          label: i18n.t('module.basicData.visual.keyword'),
+          placeholder: '单号或品名',
+          param: 'name'
+        },
+        {
+          type: 'datePicker',
+          dateType: 'daterange',
+          rangeSeparator: '至',
+          startPlaceholder: '开始日期',
+          endPlaceholder: '结束日期',
+          label: '时间范围',
+          param: 'dateArr'
+        },
+        {
+          type: 'button',
+          btnName: 'btn.search',
+          name: 'search',
+          color: 'primary'
+        }
+      ],
+      headFormValue: {}
+    }
+  },
+  computed: {
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    getList() {
+      this.listLoading = false
+      this.listQuery.key = this.headFormValue.name
+      this.list = [
+        {
+          id: 1,
+          name1: '20220406623',
+          name2: '类别1',
+          name3: '成品',
+          name4: '中型',
+          name5: 'E554846167',
+          name6: '96'
+        }
+      ]
+    },
+    btnClick(val) {
+      this.headFormValue = val
+      // 如果点击的是搜索栏的其他按钮在这里继续写判断
+      if (this.headFormValue.btnName === 'search') {
+        this.getList()
+      }
+    },
+    clickTopBtn(val) {
+      if (val === 'add') {
+        this.addNew()
+      }
+    }
+  }
 }
 </script>
+
+<style scoped>
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>
diff --git a/src/views/wmsSystemSettings/AddForm.vue b/src/views/wmsSystemSettings/AddForm.vue
new file mode 100644
index 0000000..de23a11
--- /dev/null
+++ b/src/views/wmsSystemSettings/AddForm.vue
@@ -0,0 +1,111 @@
+<!--
+ * @Date: 2021-01-05 13:40:58
+ * @LastEditors: zwq
+ * @LastEditTime: 2022-10-20 09:39:54
+ * @FilePath: \basic-admin\src\views\RoleManager\AddForm.vue
+ * @Description:
+-->
+<template>
+  <div>
+    <el-dialog v-bind="$attrs" :title="'formItem.role.add' | i18nFilter" v-on="$listeners" @open="onOpen" @close="onClose">
+      <el-form ref="formData" :model="formData" :rules="rules" size="medium" label-width="100px">
+        <el-form-item :label="$t('roleManage.roleCode')" prop="code">
+          <el-input v-model="formData.code" :placeholder="['placeholder.input', $t('roleManage.roleCode')] | i18nFilterForm" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item :label="$t('roleManage.roleName')" prop="name">
+          <el-input v-model="formData.name" :placeholder="['placeholder.input', $t('roleManage.roleName')] | i18nFilterForm" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item :label="$t('roleManage.roleType')" prop="category">
+          <el-select v-model="formData.category">
+            <el-option
+              v-for="item in categoryOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item :label="$t('roleManage.remark')" prop="remark">
+          <el-input v-model="formData.remark" :placeholder="['placeholder.input', $t('roleManage.remark')] | i18nFilterForm" clearable :style="{width: '100%'}" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer">
+        <el-button @click="close">{{ 'btn.cancel' | i18nFilter }}</el-button>
+        <el-button type="primary" @click="handelConfirm">{{ 'btn.confirm' | i18nFilter }}</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+export default {
+  components: {},
+  inheritAttrs: false,
+  props: [],
+  data() {
+    return {
+      formData: {
+        code: undefined,
+        name: undefined,
+        remark: undefined,
+        category: 1
+      },
+      categoryOptions: [{
+        value: 1,
+        label: 'pc'
+      }, {
+        value: 5,
+        label: 'pda'
+      }],
+      rules: {
+        code: [{
+          required: true,
+          message: this.$i18nForm(['placeholder.input', this.$t('roleManage.roleCode')]),
+          trigger: 'blur'
+        }],
+        name: [{
+          required: true,
+          message: this.$i18nForm(['placeholder.input', this.$t('roleManage.roleName')]),
+          trigger: 'blur'
+        }],
+        category: [{
+          required: true,
+          message: this.$i18nForm(['placeholder.input', this.$t('roleManage.roleType')]),
+          trigger: 'change'
+        }]
+      }
+    }
+  },
+  computed: {},
+  watch: {},
+  created() {
+  },
+  mounted() {},
+  methods: {
+    onOpen() {
+      this.$nextTick(() => {
+        this.$refs['formData'].resetFields()
+      })
+    },
+    onClose() {
+      this.$refs['formData'].resetFields()
+    },
+    close() {
+      this.$emit('update:visible', false)
+    },
+    handelConfirm() {
+      this.$refs['formData'].validate(async valid => {
+        if (!valid) return
+        this.$message({
+          type: 'success',
+          message: '添加成功！'
+        })
+        this.$emit('done')
+        this.close()
+      })
+    }
+  }
+}
+
+</script>
+<style>
+</style>
diff --git a/src/views/wmsSystemSettings/EditForm.vue b/src/views/wmsSystemSettings/EditForm.vue
new file mode 100644
index 0000000..2cbee8d
--- /dev/null
+++ b/src/views/wmsSystemSettings/EditForm.vue
@@ -0,0 +1,123 @@
+<!--
+ * @Date: 2021-01-05 13:40:58
+ * @LastEditors: zwq
+ * @LastEditTime: 2022-10-20 13:56:44
+ * @FilePath: \basic-admin\src\views\RoleManager\EditForm.vue
+ * @Description:
+-->
+<template>
+  <div>
+    <el-dialog v-bind="$attrs" :title="'formItem.role.edit' | i18nFilter" v-on="$listeners" @open="onOpen" @close="onClose">
+      <el-form ref="编辑角色" :model="formData" :rules="rules" size="medium" label-width="100px">
+        <el-form-item :label="$t('roleManage.roleCode')" prop="code">
+          <el-input v-model="formData.code" :placeholder="['placeholder.input', $t('roleManage.roleCode')] | i18nFilterForm" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item :label="$t('roleManage.roleName')" prop="name">
+          <el-input v-model="formData.name" :placeholder="['placeholder.input', $t('roleManage.roleName')] | i18nFilterForm" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item :label="$t('roleManage.roleType')" prop="category">
+          <el-select v-model="formData.category">
+            <el-option
+              v-for="item in categoryOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item :label="$t('roleManage.remark')" prop="remark">
+          <el-input v-model="formData.remark" :placeholder="['placeholder.input', $t('roleManage.remark')] | i18nFilterForm" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item :label="$t('roleManage.rolestartstop')" prop="enabled">
+          <el-switch v-model="formData.enabled" :active-value="1" :inactive-value="0" @change="enableStateChange" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer">
+        <el-button @click="close">{{ 'btn.cancel' | i18nFilter }}</el-button>
+        <el-button type="primary" @click="handelConfirm">{{ 'btn.confirm' | i18nFilter }}</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+export default {
+  components: {},
+  inheritAttrs: false,
+  props: {
+    targetInfo: {
+      type: Object,
+      default: () => {
+        return {
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      formData: {
+        code: undefined,
+        name: undefined,
+        remark: undefined,
+        category: 1,
+        enabled: true
+      },
+      categoryOptions: [{
+        value: 1,
+        label: 'pc'
+      }, {
+        value: 5,
+        label: 'pda'
+      }],
+      rules: {
+        code: [{
+          required: true,
+          message: this.$i18nForm(['placeholder.input', this.$t('roleManage.roleCode')]),
+          trigger: 'blur'
+        }],
+        name: [{
+          required: true,
+          message: this.$i18nForm(['placeholder.input', this.$t('roleManage.roleName')]),
+          trigger: 'blur'
+        }],
+        remark: []
+      }
+    }
+  },
+  computed: {},
+  watch: {},
+  created() {},
+  mounted() {},
+  methods: {
+    onOpen() {
+      this.getInfo()
+    },
+    onClose() {
+      this.$emit('done')
+      this.$refs['编辑角色'].resetFields()
+    },
+    close() {
+      this.$emit('update:visible', false)
+    },
+    async enableStateChange(val) {
+      console.log(val)
+    },
+    handelConfirm() {
+      this.$refs['编辑角色'].validate(async valid => {
+        if (!valid) return
+        this.$message({
+          type: 'success',
+          message: '修改成功！'
+        })
+        this.close()
+      })
+    },
+    async getInfo() {
+      console.log(this.targetInfo)
+      this.formData = this.targetInfo
+    }
+  }
+}
+
+</script>
+<style>
+</style>
diff --git a/src/views/wmsSystemSettings/menuEmpower.vue b/src/views/wmsSystemSettings/menuEmpower.vue
new file mode 100644
index 0000000..8cbf2a3
--- /dev/null
+++ b/src/views/wmsSystemSettings/menuEmpower.vue
@@ -0,0 +1,89 @@
+<!--
+ * @Author: zwq
+ * @Date: 2021-04-06 19:33:11
+ * @LastEditors: zwq
+ * @LastEditTime: 2022-10-20 09:44:53
+ * @Description:
+-->
+<template>
+  <el-dialog
+    :visible.sync="visible"
+  >
+    <el-card class="box-card">
+      <div slot="header" style="font-size:20px;text-align:center">
+        <span style="">{{ $t('roleManage.roleEmPower') }}</span>
+      </div>
+      <div style="max-height:500px;overflow:auto">
+        <el-tree
+          ref="menuListTree"
+          :data="menuList"
+          :props="{
+            label: language === 'en' ? 'enName' : 'name',
+            children: 'children'
+          }"
+          node-key="id"
+          show-checkbox
+          check-on-click-node
+          :default-expand-all="true"
+          :highlight-current="true"
+          :expand-on-click-node="false"
+        />
+      </div>
+    </el-card>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
+      <el-button type="primary" @click="RoleMenu()">{{ 'btn.confirm' | i18nFilter }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+export default {
+  data() {
+    return {
+      visible: false,
+      dataList: [],
+      menuList: [],
+      id: '',
+      listQuery: {
+        current: 1,
+        size: 550
+      }
+    }
+  },
+  computed: {
+    ...mapGetters(['language'])
+  },
+  methods: {
+    async init(id) {
+      this.id = id || ''
+      this.visible = true
+      this.dataList.splice(0, this.dataList.length)
+    },
+    setCheckedNodes(menuId) {
+      this.$refs.menuListTree.setCheckedKeys(menuId)
+    },
+    RoleMenu() {
+      this.$message({
+        message: this.$t('module.basicData.visual.success'),
+        type: 'success',
+        duration: 1500,
+        onClose: () => {
+          this.visible = false
+          this.$emit('done')
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .el-tree >>> .el-tree-node__label {
+    font-size: 20px;
+  }
+  .el-tree >>> .el-tree-node__expand-icon {
+    font-size: 20px;
+  }
+</style>
diff --git a/src/views/wmsSystemSettings/roleManagement.vue b/src/views/wmsSystemSettings/roleManagement.vue
index a1abc58..08d2386 100644
--- a/src/views/wmsSystemSettings/roleManagement.vue
+++ b/src/views/wmsSystemSettings/roleManagement.vue
@@ -1,8 +1,187 @@
+<!--
+ * @Date: 2020-12-15 15:36:52
+ * @LastEditors: zwq
+ * @LastEditTime: 2022-10-20 13:57:32
+ * @FilePath: \mt-bus-fe\src\views\RoleManager\index.vue
+ * @Description:
+-->
 <template>
-  <div>1</div>
+  <div class="app-container">
+    <head-form
+      :form-config="headFormConfig"
+      @headBtnClick="btnClick"
+    />
+    <base-table
+      :top-btn-config="topBtnConfig"
+      :table-config="tableProps"
+      :table-data="list"
+      :is-loading="listLoading"
+      :page="listQuery.current"
+      :limit="listQuery.size"
+      @clickTopBtn="clickTopBtn"
+    >
+      <method-btn
+        slot="handleBtn"
+        :width="trueWidth"
+        :method-list="tableBtn"
+        @clickBtn="handleClick"
+      />
+    </base-table>
+    <pagination v-show="total > 0" :total="total" :page.sync="listQuery.current" :limit.sync="listQuery.size" @pagination="getList" />
+    <add-form :visible.sync="showDialog" @done="getList" />
+    <edit-form :visible.sync="showEditDialog" :target-info="curEditId" @done="getList" />
+    <menu-empower ref="empowerRef" :visible.sync="empowerDialog" @done="getList" />
+  </div>
 </template>
+
 <script>
+import basicData from '@/filters/basicData'
+import HeadForm from '@/components/basicData/HeadForm'
+import i18n from '@/lang'
+const topBtnConfig = [
+  {
+    type: 'add',
+    btnName: 'btn.add'
+  }
+]
+// edit here
+const tableBtn = [{
+  type: 'edit',
+  btnName: 'btn.edit'
+}, {
+  type: 'EmPower',
+  btnName: i18n.t('roleManage.roleEmPower')
+}, {
+  type: 'delete',
+  btnName: 'btn.delete'
+}
+]
+const tableProps = [{
+  prop: 'code',
+  label: i18n.t('roleManage.roleCode'),
+  align: 'center'
+}, {
+  prop: 'name',
+  label: i18n.t('roleManage.roleName'),
+  align: 'center'
+}, {
+  prop: 'enabled',
+  label: i18n.t('roleManage.status'),
+  align: 'center',
+  filter: basicData('enableState')
+},
+// {
+//   prop: 'category',
+//   label: i18n.t('roleManage.roleType'),
+//   align: 'center',
+//   filter: basicData('roleType')
+// },
+{
+  prop: 'remark',
+  label: i18n.t('roleManage.remark'),
+  align: 'center'
+}]
+import AddForm from './AddForm'
+import EditForm from './EditForm'
+import menuEmpower from './menuEmpower'
+import BaseTable from '@/components/BaseTable'
+
+import Pagination from '@/components/Pagination'
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
 export default {
-  name: 'RoleManagement'
+  name: 'RoleManagement',
+  components: { Pagination, BaseTable, MethodBtn, AddForm, EditForm, HeadForm, menuEmpower },
+  props: {},
+  data() {
+    return {
+      topBtnConfig,
+      tableBtn,
+      tableProps,
+      list: [],
+      total: 0,
+      trueWidth: 120,
+      listLoading: false,
+      showDialog: false,
+      curEditId: null,
+      showEditDialog: false,
+      empowerDialog: false,
+      listQuery: {
+        current: 1,
+        size: 20
+      },
+      headFormConfig: [
+        {
+          type: 'input',
+          label: i18n.t('module.basicData.visual.keyword'),
+          placeholder: this.$t('roleManage.roleName'),
+          param: 'keyName'
+        },
+        {
+          type: 'button',
+          btnName: 'btn.search',
+          name: 'search',
+          color: 'primary'
+        }
+      ],
+      headFormValue: {}
+    }
+  },
+  created() {
+    this.getList()
+  },
+  mounted() {},
+  methods: {
+    handleClick(raw) {
+      switch (raw.type) {
+        case 'delete':
+          this.$confirm(i18n.t('deleteMsgBox.content'), i18n.t('deleteMsgBox.hint'), {
+            confirmButtonText: i18n.t('btn.confirm'),
+            cancelButtonText: i18n.t('btn.cancel'),
+            type: 'warning'
+          }).then(async() => {
+          })
+          break
+        case 'edit':
+          this.showEditDialog = true
+          this.curEditId = raw.data
+          break
+        case 'EmPower':
+          this.empowerRole(raw.data.id)
+          break
+      }
+    },
+    async getList() {
+      this.list = [
+        {
+          id: 1,
+          name: '管理员',
+          code: 'R254815254',
+          enabled: 1
+        }
+      ]
+    },
+    // 新增 / 修改
+    addNew() {
+      this.showDialog = true
+    },
+    empowerRole(id) {
+      this.empowerDialog = true
+      this.$nextTick(() => {
+        this.$refs.empowerRef.init(id)
+      })
+    },
+    btnClick(val) {
+      this.headFormValue = val
+      // 如果点击的是搜索栏的其他按钮在这里继续写判断
+      if (this.headFormValue.btnName === 'search') {
+        this.getList()
+      }
+    },
+    clickTopBtn(val) {
+      if (val === 'add') {
+        this.addNew()// 新增
+      }
+    }
+  }
 }
 </script>