zjf
2023-03-03 bafa9dff4d9880c562f4d3a7b83bd4c1129240c5
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
109
110
111
112
113
114
115
<template>
  <flexbox class="cell">
    <i
      :class="'wukong-' + type"
      class="cell-head wukong"/>
    <div
      :class="{'cursor-pointer' :cursorPointer}"
      class="cell-body"
      @click="bodyClick">
      {{ getShowName() }}
    </div>
    <img
      v-if="showFoot"
      class="cell-foot"
      style="cursor: pointer;"
      src="@/assets/img/cancel_associated.png"
      @click="footClick" >
  </flexbox>
</template>
 
<script type="text/javascript">
export default {
  name: 'RelatedBusinessCell',
  props: {
    type: {
      type: String,
      default: ''
    },
    cellIndex: Number,
    data: Object,
    showFoot: {
      type: Boolean,
      default: true
    },
    cursorPointer: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {}
  }, // 相关CRM等类型展示布局
  computed: {
    typeName () {
      if (this.type === 'customer') {
        return '客户'
      } else if (this.type === 'contacts') {
        return '联系人'
      } else if (this.type === 'business') {
        return '商机'
      } else if (this.type === 'contract') {
        return '合同'
      }
      return ''
    }
  },
  watch: {},
  mounted () {},
 
  beforeDestroy () {},
  methods: {
    footClick () {
      this.$emit('unbind', this.type, this.cellIndex, this.data)
    },
    bodyClick () {
      this.$emit('detail', this.type, this.cellIndex, this.data)
    },
    getShowName (item) {
      return (
        this.typeName +
        '-' +
        (this.data.name ||
          this.data.businessName ||
          this.data.customerName ||
          this.data.number)
      )
    }
  }
}
</script>
<style lang="scss" scoped>
.cell {
  padding: 8px;
  background-color: #f5f7fa;
  border-radius: 2px;
  position: relative;
  margin-bottom: 5px;
 
  .cell-head {
    display: block;
    width: 15px;
    height: 15px;
    margin-right: 8px;
    color: #6394e5;
    font-size: 14px;
  }
 
  .cell-body {
    flex: 1;
    color: #4D88FF;
    font-size: 12px;
  }
 
  .cell-foot {
    display: block;
    width: 24px;
    padding: 0 4px;
    margin-right: 8px;
  }
}
 
.cursor-pointer {
  cursor: pointer;
}
</style>