index.vue 3.24 KB
Newer Older
lxyang committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108
<template>
  <el-dialog title="客户信息"
             :center="true"
             :visible.sync="showDetail"
             :close-on-click-modal="true"
             :close-on-press-escape="true"
             :before-close="handleClose"
             @open="openDetail"
             width="500px">
    <el-descriptions border :labelStyle="{'text-align':'right'}"
                     :column="1">
      <el-descriptions-item label="编号: ">{{ detail.customerId }}</el-descriptions-item>
      <el-descriptions-item label="名称: ">{{ detail.customerName }}</el-descriptions-item>
      <el-descriptions-item label="邮箱: ">{{ detail.customerEmail }}</el-descriptions-item>
      <el-descriptions-item label="联系人:">{{ detail.customerContact }}</el-descriptions-item>
      <el-descriptions-item label="联系电话: ">{{ detail.customerPhone }}</el-descriptions-item>
      <el-descriptions-item label="联系地址: ">{{ detail.customerAddress }}</el-descriptions-item>
      <el-descriptions-item label="合同起止时间: ">{{ detail.startTime }} - {{ detail.endTime }}</el-descriptions-item>
      <el-descriptions-item label="客户类型: ">
        <el-tag type="warning" effect="plain" v-if="detail.type === 'TRIAL'">
          {{ getLabelByVal(detail.type, 'customerTypeOptions') }}
        </el-tag>
        <el-tag effect="plain" v-if="detail.type === 'SIGNED'">
          {{ getLabelByVal(detail.type, 'customerTypeOptions') }}
        </el-tag>
        <el-tag type="info" effect="plain" v-if="detail.type === 'OTHER'">
          {{ getLabelByVal(detail.type, 'customerTypeOptions') }}
        </el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="状态:  ">
        <el-tag type="success" effect="dark" v-if="detail.status === 'ENABLE'">
          {{ getLabelByVal(detail.status, 'customerStatusOptions') }}
        </el-tag>
        <el-tag type="danger" effect="dark" v-if="detail.status === 'DISABLE'">
          {{ getLabelByVal(detail.status, 'customerStatusOptions') }}
        </el-tag>
      </el-descriptions-item>
    </el-descriptions>
    <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="handleClose">确 定</el-button>
  </span>
  </el-dialog>
</template>

<script>
import {getCustomer} from "@/api/system/customer"

const userOptions = {
  customerTypeOptions: [
    {
      value: "TRIAL",
      label: "试用"
    },
    {
      value: "SIGNED",
      label: "签约"
    },
    {
      value: "OTHER",
      label: "其他"
    }
  ],
  customerStatusOptions: [
    {
      value: "ENABLE",
      label: "正常"
    },
    {
      value: "DISABLE",
      label: "失效"
    }
  ]
}

export default {
  name: "CustomerDetail",
  props: {
    showDetail: {
      type: Boolean,
      default: false
    },
    customerId: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      detail: {},
      userOptions: userOptions,
    }
  },
  methods: {
    openDetail() {
      getCustomer(this.customerId).then(response => {
        this.detail = response.data;
      })
    },
    handleClose() {
      this.$emit("closeDetail");
    },
    getLabelByVal(val, type) {
      const opt = this.userOptions[type].find(item => item.value === val);
      return opt && opt.label;
    }
  }
}
</script>