epmet-work-pc/src/views/modules/plugins/union/customerrelation.vue

<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'}"
              
              :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>