ahdevicemgt-ui/src/views/base/customer/index.vue

<template>
    <!-- 往来单位管理页面 -->
    <div class="app-container">
        <PageHeader
          v-if="isShowComponent !== 'Index'"
          :pageContent="pageContent"
          @goBack="goBack"
        />
        <!-- 列表 -->
        <TableModel
          :formLabel="formLabel"
          :columnsList="columnsList"
          :request-api="queryContactUnitsListApi"
          ref="tableRef"
          v-if="isShowComponent === 'Index'"
        >
            <template slot="btn" slot-scope="{ queryParams }">
                <el-button type="primary" @click="handleAddData()"
                    >新建</el-button
                >
                <el-button type="success" @click="isShowComponent = 'person-config'"
                >人员配置</el-button
                >
                <el-button @click="handleExportData(queryParams, 'base/customer/export', '往来单位清单')"
                    >导出</el-button
                >
            </template>

            <template slot="handle" slot-scope="{ data }">
                <el-button
                    type="primary"
                    size="mini"
                    @click="handleEditData(data)"
                    >编辑</el-button
                >
                <el-button
                    type="danger"
                    size="mini"
                    @click="handleDeleteData(data.id, deleteContactUnitsApi)"
                    >删除</el-button
                >
            </template>
            <template slot="isActive" slot-scope="{ data }">
              {{ data.isActive == '1' ? '启用' : '不启用' }}
            </template>
            <template slot="phone" slot-scope="{ data }">
              {{ phoneCrypto(data.phone) }}
            </template>
        </TableModel>

        <!-- 新增以及修改时的弹框 -->
        <DialogModel
            :dialogConfig="dialogConfig"
            @closeDialogOuter="closeDialogOuter"
        >
            <template slot="outerContent">
                <!-- 新增以及修改数据的表单组件 -->
                <FormContactUnits
                    @closeDialog="closeDialog"
                    :editParams="editParams"
                />
            </template>
        </DialogModel>

        <person-config
          v-if="isShowComponent === 'person-config'"
        >

        </person-config>

    </div>
</template>

<script>
import PageHeader from '@/components/pageHeader'
import { columnsList, dialogConfig, formLabel } from './config'
import { commonMixin } from '../mixins/common'
import FormContactUnits from './components/form-contact-units.vue'
import PersonConfig from './components/person-config.vue'
import { deleteContactUnitsApi, queryContactUnitsListApi } from '@/api/base/customer'
export default {
    name: 'ContactUnits',
    mixins: [commonMixin], // 混入公共方法和数据
    components: { FormContactUnits, PersonConfig, PageHeader },
    methods: {
      queryContactUnitsListApi,
      deleteContactUnitsApi,
      // 手机号脱密
      /* phoneCrypto(phoneNumber) {
        let reg = /^(1[3-9][0-9])\d{4}(\d{4}$)/
        let isMobile = reg.test(phoneNumber)
        if (isMobile) {
          return phoneNumber.replace(reg, "$1****$2")
        }
        return phoneNumber
      } */
      goBack() {
        this.isShowComponent = 'Index'
      }
    },
    data() {
        return {
            isShowComponent: 'Index',
            pageContent: '往来人员配置',
            formLabel,
            columnsList,
            dialogConfig,
            addDialogTitle: '新建往来单位', // 新建时弹框标题
            editDialogTitle: '修改往来单位', // 修改时弹框标题
        }
    },
}
</script>