diff --git a/epmet-oper-web/src/views/modules/customer/union/customerrelation-add-or-update.vue b/epmet-oper-web/src/views/modules/customer/union/customerrelation-add-or-update.vue
new file mode 100644
index 0000000..cb6e13b
--- /dev/null
+++ b/epmet-oper-web/src/views/modules/customer/union/customerrelation-add-or-update.vue
@@ -0,0 +1,186 @@
+<template>
+  <el-dialog :visible.sync="visible" :title="!dataForm.id ? $t('add') : $t('update')" :close-on-click-modal="false" :close-on-press-escape="false">
+    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" :label-width="$i18n.locale === 'en-US' ? '120px' : '80px'">
+        <el-form-item label="父级客户" prop="parentCustomerId">
+            <el-select clearable v-model="dataForm.parentCustomerId" placeholder="请选择" @change="changeRootCustomer($event)">
+                <el-option v-for="item in rootCustomer" :key="item.customerId" :label="item.customerName" :value="item.customerId">
+                </el-option>
+            </el-select>
+        </el-form-item>
+        <el-form-item label="子级客户" prop="customerId">
+            <el-select clearable v-model="dataForm.customerId" placeholder="请选择" @change="changeSubCustomer($event)">
+                <el-option v-for="item in subCustomer" :key="item.customerId" :label="item.customerName" :value="item.customerId">
+                </el-option>
+            </el-select>
+        </el-form-item>
+        <el-form-item label="是否启用" prop="status">
+            <el-select clearable v-model="dataForm.status" placeholder="请选择">
+                <el-option v-for="item in statusOptions" :key="item.value" :label="item.name" :value="item.value">
+                </el-option>
+            </el-select>
+        </el-form-item>
+      </el-form>
+    <template slot="footer">
+      <el-button @click="visible = false">{{ $t('cancel') }}</el-button>
+      <el-button type="primary" @click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script>
+import debounce from 'lodash/debounce'
+export default {
+  data () {
+    return {
+      visible: false,
+        areaCode: '0',
+        rootCustomer: [],
+        subCustomer: [],
+        statusOptions: [
+            { value: 'open', name: '启用' },
+            { value: 'closed', name: '禁用' }
+        ],
+      dataForm: {
+        id: '',
+        customerId: '',
+        parentCustomerId: '',
+        pids: '0',
+        customerType: '',
+        parentCustomerType: '',
+        status: '',
+        level: '',
+        areaCode: '',
+        parentAreaCode: ''
+      }
+    }
+  },
+  computed: {
+    dataRule () {
+      return {
+        customerId: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        parentCustomerId: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        pids: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        status: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        level: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        areaCode: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        parentAreaCode: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    init () {
+      this.visible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].resetFields()
+        if (this.dataForm.id) {
+          this.getInfo()
+        }
+      })
+        this.getRootCustomer()
+    },
+      getRootCustomer () {
+          this.$http.get(`/gov/org/agency/areasubagency/0`).then(({ data: res }) => {
+              if (res.code !== 0) {
+                  return this.$message.error(res.msg)
+              }
+              this.rootCustomer = res.data
+              if (this.rootCustomer.length === 0) {
+                  this.$message({
+                      type: 'warning',
+                      message: '当前客户区划下没有下级客户'
+                  })
+              }
+          }).catch(() => {})
+      },
+      getSubCustomer () {
+        if (this.areaCode) {
+            this.$http.get(`/gov/org/agency/areasubagency/` + this.areaCode).then(({ data: res }) => {
+                if (res.code !== 0) {
+                    return this.$message.error(res.msg)
+                }
+                res.data.forEach(element => {
+                    if (element.customerId !== this.dataForm.parentCustomerId ){
+                        this.subCustomer.push(element)
+                    }
+                });
+                if (this.subCustomer.length === 0) {
+                    this.$message({
+                        type: 'warning',
+                        message: '该客户区划下没有下级客户'
+                    })
+                }
+            }).catch(() => {})
+        }
+      },
+      changeRootCustomer (e) {
+        this.subCustomer = []
+          if (this.dataForm.parentCustomerId) {
+              let root = this.rootCustomer.filter(item => item.customerId === this.dataForm.parentCustomerId)[0]
+              if (root) {
+                  this.dataForm.parentAreaCode = root.areaCode
+
+                  this.areaCode = root.areaCode
+                  this.getSubCustomer()
+              }
+          }
+      },
+      changeSubCustomer (e) {
+          if (this.dataForm.customerId) {
+              let root = this.subCustomer.filter(item => item.customerId === this.dataForm.customerId)[0]
+              if (root) {
+                  this.dataForm.level = root.level
+                  this.dataForm.areaCode = root.areaCode
+              }
+          }
+      },
+    // 获取信息
+    getInfo () {
+      this.$http.get(`/oper/crm/customerRelation/${this.dataForm.id}`).then(({ data: res }) => {
+        if (res.code !== 0) {
+          return this.$message.error(res.msg)
+        }
+        this.dataForm = {
+          ...this.dataForm,
+          ...res.data
+        }
+      }).catch(() => {})
+    },
+    // 表单提交
+    dataFormSubmitHandle: debounce(function () {
+      this.$refs['dataForm'].validate((valid) => {
+        if (!valid) {
+          return false
+        }
+        this.$http[!this.dataForm.id ? 'post' : 'put']('/oper/crm/customerRelation/save', this.dataForm).then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg)
+          }
+          this.$message({
+            message: this.$t('prompt.success'),
+            type: 'success',
+            duration: 500,
+            onClose: () => {
+              this.visible = false
+              this.$emit('refreshDataList')
+            }
+          })
+        }).catch(() => {})
+      })
+    }, 1000, { 'leading': true, 'trailing': false })
+  }
+}
+</script>
diff --git a/epmet-oper-web/src/views/modules/customer/union/customerrelation.vue b/epmet-oper-web/src/views/modules/customer/union/customerrelation.vue
new file mode 100644
index 0000000..7ec8324
--- /dev/null
+++ b/epmet-oper-web/src/views/modules/customer/union/customerrelation.vue
@@ -0,0 +1,139 @@
+<template>
+  <el-card shadow="never" class="aui-card--fill">
+    <div class="mod-__customerRelation}">
+      <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+<!--        <el-form-item>-->
+<!--          <el-input v-model="dataForm.id" placeholder="id" clearable></el-input>-->
+<!--        </el-form-item>-->
+<!--        <el-form-item>-->
+<!--          <el-button @click="getDataList()">{{ $t('query') }}</el-button>-->
+<!--        </el-form-item>-->
+        <!--<el-form-item>-->
+          <!--<el-button class="diy-button&#45;&#45;add" size="small" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>-->
+        <!--</el-form-item>-->
+<!--        <el-form-item>-->
+<!--          <el-button type="danger" @click="deleteHandle()">{{ $t('deleteBatch') }}</el-button>-->
+<!--        </el-form-item>-->
+      </el-form>
+<!--      <el-table v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle" style="width: 100%">-->
+<!--        <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>-->
+<!--        <el-table-column prop="id" label="主键" header-align="center" align="center"></el-table-column>-->
+<!--        <el-table-column prop="customerId" label="客户id" header-align="center" align="center"></el-table-column>-->
+<!--        <el-table-column prop="parentCustomerId" label="父级客户id;如果是顶级客户，此列=0" header-align="center" align="center"></el-table-column>-->
+<!--        <el-table-column prop="pids" label="当前客户的所有父级客户id,以英文冒号隔开，如果是顶级客户，此列=0" header-align="center" align="center"></el-table-column>-->
+<!--        <el-table-column prop="customerType" label="当前客户类型取值： external:外部客户，internal:内部客户" header-align="center" align="center"></el-table-column>-->
+<!--        <el-table-column prop="parentCustomerType" label="父级客户类型取值： external:外部客户，internal:内部客户;如果是顶级客户，此列=0" header-align="center" align="center"></el-table-column>-->
+<!--        <el-table-column prop="status" label="open,closed是否启用" header-align="center" align="center"></el-table-column>-->
+<!--        <el-table-column prop="level" label="当前客户级别（社区级：community，-->
+<!--乡（镇、街道）级:street,-->
+<!--区县级: district,-->
+<!--市级: city-->
+<!--省级:province）" header-align="center" align="center"></el-table-column>-->
+<!--        <el-table-column prop="areaCode" label="当前客户的地区编码，实际就是根组织的area_code" header-align="center" align="center"></el-table-column>-->
+<!--        <el-table-column prop="parentAreaCode" label="07.01：当前客户的的上级组织对应的area_code" header-align="center" align="center"></el-table-column>-->
+<!--        <el-table-column prop="delFlag" label="删除标识0未删除1已删除" header-align="center" align="center"></el-table-column>-->
+<!--        <el-table-column prop="revision" label="乐观锁" header-align="center" align="center"></el-table-column>-->
+<!--        <el-table-column prop="createdBy" label="创建人" header-align="center" align="center"></el-table-column>-->
+<!--        <el-table-column prop="createdTime" label="创建时间" header-align="center" align="center"></el-table-column>-->
+<!--        <el-table-column prop="updatedBy" label="更新人" header-align="center" align="center"></el-table-column>-->
+<!--        <el-table-column prop="updatedTime" label="更新时间" header-align="center" align="center"></el-table-column>-->
+<!--        <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">-->
+<!--          <template slot-scope="scope">-->
+<!--            <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id, $t('update'))">{{ $t('update') }}</el-button>-->
+<!--            <el-button type="text" size="small" @click="deleteHandle(scope.row.id)">{{ $t('delete') }}</el-button>-->
+<!--          </template>-->
+<!--        </el-table-column>-->
+<!--      </el-table>-->
+<!--      <el-pagination-->
+<!--        :current-page="page"-->
+<!--        :page-sizes="[10, 20, 50, 100]"-->
+<!--        :page-size="limit"-->
+<!--        :total="total"-->
+<!--        layout="total, sizes, prev, pager, next, jumper"-->
+<!--        @size-change="pageSizeChangeHandle"-->
+<!--        @current-change="pageCurrentChangeHandle">-->
+<!--      </el-pagination>-->
+      <el-table
+              class="resi-table"
+              v-loading="tableLoading"
+              :data="tableData"
+              :default-expand-all="true"
+              row-key="areaCode"
+              border
+              :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
+              :header-cell-style="{background:'#2195FE',color:'#FFFFFF'}"
+              :height="tableHeight">
+        <el-table-column prop="areaName" label="区域名称"></el-table-column>
+        <el-table-column prop="customerName" label="客户名称" header-align="center" align="center"></el-table-column>
+        <!--<el-table-column prop="status" label="是否启用" header-align="center" align="center">-->
+            <!--<template slot-scope="scope">-->
+                <!--<el-tag v-if="scope.row.status === 'open' && scope.row.parentCustomerId !== '0'" size="small" type="success">{{ '启用' }}</el-tag>-->
+                <!--<el-tag v-if="scope.row.status === 'close' && scope.row.parentCustomerId !== '0'" size="small" type="danger">{{ '禁用' }}</el-tag>-->
+            <!--</template>-->
+        <!--</el-table-column>-->
+        <!--<el-table-column label="操作" align="center" width="300">-->
+          <!--<template slot-scope="scope">-->
+            <!--<el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id, $t('update'))">{{ $t('update') }}</el-button>-->
+            <!--<el-button type="text" size="small" @click="deleteHandle(scope.row.id)">{{ $t('delete') }}</el-button>-->
+          <!--</template>-->
+        <!--</el-table-column>-->
+      </el-table>
+      <!-- 弹窗, 新增 / 修改 -->
+      <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
+    </div>
+  </el-card>
+</template>
+
+<script>
+import mixinViewModule from '@/mixins/view-module'
+import AddOrUpdate from './customerrelation-add-or-update'
+import TableTreeColumn from '@/components/table-tree-column'
+export default {
+  mixins: [mixinViewModule],
+  data () {
+    return {
+      mixinViewModuleOptions: {
+        createdIsNeed: false,
+        getDataListURL: '/gov/org/agency/customertree',
+        getDataListIsPage: true,
+        deleteURL: '/oper/crm/customerRelation',
+        deleteIsBatch: true
+      },
+      tableLoading: false,
+      tableData: [],
+      dataForm: {
+        id: ''
+      }
+    }
+  },
+  components: {
+    TableTreeColumn,
+    AddOrUpdate
+  },
+  created() {
+    this.getTableData()
+  },
+  methods: {
+    // 查询列表
+    async getTableData () {
+      this.tableLoading = true
+      await this.$http.get('/gov/org/agency/customertree').then(({ data: res }) => {
+        if (res.code !== 0) {
+          return this.$message.error(res.internalMsg ? res.internalMsg : res.msg ? res.msg : '查询失败')
+        } else {
+          this.tableData = res.data
+        }
+      }).catch(() => {})
+      this.tableLoading = false
+    },
+    addOrUpdateHandle(id, title) {
+      this.dialogTitle = title;
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.dataForm.id = id;
+        this.$refs.addOrUpdate.init();
+      });
+      this.addOrUpdateVisible = true;
+    },
+  }
+}
+</script>