diff --git a/src/api/hardware/area.js b/src/api/hardware/area.js
index fd93260..d8bf7da 100644
--- a/src/api/hardware/area.js
+++ b/src/api/hardware/area.js
@@ -7,6 +7,9 @@ export function list() {
         method: 'get',
     })
 }
+
+
+// 获取大区下拉列表
 export function areaSelect() {
     return request({
         url: '/system/area/select',
@@ -14,15 +17,53 @@ export function areaSelect() {
     })
 }
 
+
+// 更新和保存
+export function save(data) {
+    return request({
+        url: '/system/area/save',
+        method: 'post',
+        data
+    })
+}
+
+// 删除
+export function del(ids) {
+    return request({
+        url: '/system/area/' + ids,
+        method: 'delete'
+    })
+}
+
+// 保存大区地区信息
+export function saveProvince(data) {
+    return request({
+        url: '/system/area/saveProvince',
+        method: 'post',
+        data
+    })
+}
+
+// 根据大区ID获取地区列表
 export function getProvinceByArea(id) {
     return request({
         url: '/system/province/getProvinceByArea?areaId=' + id,
         method: 'get',
     })
 }
+
+// 根据parentCode获取地区列表
 export function getProvinceByParent(id) {
     return request({
         url: '/system/province/getProvinceByParent?parent=' + id,
         method: 'get',
     })
 }
+
+// 获取省份地区列表
+export function province() {
+    return request({
+        url: '/system/province/list',
+        method: 'get',
+    })
+}
diff --git a/src/views/system/area/index.vue b/src/views/system/area/index.vue
new file mode 100644
index 0000000..0e8b888
--- /dev/null
+++ b/src/views/system/area/index.vue
@@ -0,0 +1,200 @@
+<template>
+  <section class="app-container">
+    <el-row>
+      <el-button type="primary" icon="el-icon-plus" size="mini" @click="addArea">添加</el-button>
+      <el-button type="danger" icon="el-icon-delete" size="mini" @click="delArea">批量删除</el-button>
+    </el-row>
+    <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55">
+      </el-table-column>
+      <el-table-column prop="id" label="大区ID">
+      </el-table-column>
+      <el-table-column prop="areaName" label="大区名称">
+      </el-table-column>
+      <el-table-column prop="ordinal" label="序数">
+      </el-table-column>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template slot-scope="scope">
+          <el-button type="text" @click="view(scope.row)">查看省份</el-button>
+          <el-button type="primary" icon="el-icon-edit" @click="editArea(scope.row)">修改</el-button>
+          <el-button type="primary" icon="el-icon-delete" @click="delArea(scope.row)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
+    <el-dialog title="省份列表" :visible.sync="open" width="800px" append-to-body>
+      <el-checkbox-group v-model="areaData">
+        <el-checkbox v-for="data in provinceData" :key="data.code" :label="data.code" :value="data.code">{{data.cityName}}</el-checkbox>
+      </el-checkbox-group>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submit">确 定</el-button>
+        <el-button @click="open = false">取 消</el-button>
+      </div>
+    </el-dialog>
+
+    <!-- 大区弹框 -->
+    <el-dialog :title="title" :visible.sync="areaOpen" width="500px" append-to-body>
+      <el-form ref="areaForm" :model="areaForm" :rules="areaRules" label-width="100px">
+        <el-form-item label="大区名称" prop="areaName">
+          <el-input v-model="areaForm.areaName" placeholder="请输入大区名称"></el-input>
+        </el-form-item>
+        <el-form-item label="序数" prop="ordinal">
+          <el-input v-model="areaForm.ordinal" placeholder="请输入序数"></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="cancel">取 消</el-button>
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+      </div>
+    </el-dialog>
+  </section>
+</template>
+
+<script>
+import { list, areaSelect, getProvinceByArea, getProvinceByParent, province, save, saveProvince, del } from "@/api/hardware/area";
+export default {
+  name: 'AreaList',
+  data () {
+    return {
+      ids: [],
+      // 总条数
+      total: 0,
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      areaOpen: false,
+      // 表格数据
+      tableData: null,
+      areaData: [], // 大区省份
+      provinceData: [], // 所有省份
+      // 表单参数
+      areaForm: {},
+      row: {}, // 大区
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+      },
+      areaRules: {
+        areaName: [
+          { required: true, message: "大区名称不能为空", trigger: "blur" },
+        ],
+        ordinal: [
+          { required: true, message: "序数不能为空", trigger: "blur" },
+        ],
+      },
+    }
+  },
+  created () {
+    province().then(res => {
+      if (res.code == 200) {
+        this.provinceData = res.rows;
+      } else {
+        this.$message.error(msg);
+      }
+    })
+    this.getList()
+  },
+  methods: {
+    handleSelectionChange (selection) {
+      this.ids = selection.map((item) => item.id);
+      this.multiple = !selection.length;
+    },
+    // 表单重置
+    reset () {
+      this.areaForm = {
+        id: "",
+        areaName: "",
+        ordinal: "",
+      };
+      this.resetForm("areaForm");
+    },
+
+    // 取消按钮
+    cancel () {
+      this.areaOpen = false;
+      this.reset();
+    },
+
+    // 获取大区列表
+    getList () {
+      list(this.queryParams).then((response) => {
+        this.tableData = response.rows;
+        this.total = response.total;
+      });
+    },
+
+    // 添加大区
+    addArea () {
+      this.reset();
+      this.areaOpen = true;
+      this.title = "添加大区";
+    },
+
+    // 修改大区
+    editArea (row) {
+      this.areaOpen = true;
+      this.areaForm = row;
+      this.title = "修改大区";
+    },
+
+    // 提交
+    submitForm () {
+      save(this.areaForm).then(res => {
+        if (200 == res.code) {
+          this.areaOpen = false;
+          this.getList();
+        }else {
+          this.msgSuccess(res.msg);
+        }
+      })
+    },
+
+    view (row) {
+      this.row = row;
+      getProvinceByArea(row.id).then(response => {
+        this.areaData = response.data.map(v => v.code);
+        this.open = true;
+      });
+    },
+
+    submit () {
+      saveProvince({
+        ...this.row,
+        "provinceIds": this.areaData
+      }).then(res => {
+        this.open = false;
+        console.log(res)
+      })
+    },
+
+    /** 删除按钮操作 */
+    delArea (row) {
+      const ids = row.id || this.ids;
+      this.$confirm("是否确认删除?", "警告", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          return del(ids);
+        })
+        .then((res) => {
+          if (200 == res.code) {
+            this.getList();
+            this.msgSuccess("删除成功");
+          } else {
+            this.msgSuccess(res.msg);
+          }
+        })
+        .catch((res) => { });
+    },
+
+
+  }
+}
+</script>
+
+<style>
+</style>
\ No newline at end of file