客户管理

.env.development

@@ -2,4 +2,4 @@
 ENV = 'development'
 
 # base api
-VUE_APP_BASE_API = 'http://www.oa.com/api'
+VUE_APP_BASE_API = 'http://www.oa.com'

package.json

@@ -16,7 +16,8 @@
   "dependencies": {
     "axios": "0.18.1",
     "core-js": "3.6.5",
-    "element-ui": "2.13.2",
+    "element-ui": "2.15.14",
+    "file-saver": "2.0.1",
     "fuse.js": "^7.0.0",
     "js-cookie": "2.2.0",
     "normalize.css": "7.0.0",
@@ -25,7 +26,8 @@
     "screenfull": "^6.0.2",
     "vue": "2.6.10",
     "vue-router": "3.0.6",
-    "vuex": "3.1.0"
+    "vuex": "3.1.0",
+    "xlsx": "0.16.0"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "4.4.4",

src/api/customer/opportunity.js

+import request from '@/utils/request'
+
+export function getList(params) {
+  return request({
+    url: '/customer/opportunity/list',
+    method: 'get',
+    params
+  })
+}
+
+export function getOption(params) {
+  return request({
+    url: '/customer/opportunity/data_maps',
+    method: 'get',
+    params
+  })
+}
+
+export function getDetail(id, params) {
+  return request({
+    url: '/customer/opportunity/' + id + '/show',
+    method: 'get',
+    params
+  })
+}
+
+export function addOpportunity(params) {
+  return request({
+    url: '/customer/opportunity/add',
+    method: 'post',
+    data: params
+  })
+}
+
+export function editOpportunity(id, params) {
+  return request({
+    url: '/customer/opportunity/' + id + '/edit',
+    method: 'put',
+    data: params
+  })
+}

src/api/customer/private.js

+import request from '@/utils/request'
+
+export function getList(params) {
+  return request({
+    url: '/customer/private/list',
+    method: 'get',
+    params
+  })
+}
+
+export function getDetail(id, params) {
+  return request({
+    url: '/customer/private/' + id + '/show',
+    method: 'get',
+    params
+  })
+}
+
+export function getOption(params) {
+  return request({
+    url: '/customer/private/data_maps',
+    method: 'get',
+    params
+  })
+}
+
+export function addImport(params) {
+  return request({
+    url: '/customer/private/add_import',
+    method: 'post',
+    data: params
+  })
+}
+
+export function addCustomer(params) {
+  return request({
+    url: '/customer/private/add',
+    method: 'post',
+    data: params
+  })
+}
+
+export function editCustomer(id, params) {
+  return request({
+    url: '/customer/private/' + id + '/edit',
+    method: 'put',
+    data: params
+  })
+}
+
+export function editCustomerPrivate(id, params) {
+  return request({
+    url: '/customer/private/' + id + '/edit_private',
+    method: 'put',
+    data: params
+  })
+}
+
+export function backPublic(params) {
+  return request({
+    url: '/customer/private/back_public',
+    method: 'put',
+    data: params
+  })
+}
+
+export function followCustomer(id, params) {
+  return request({
+    url: '/customer/private/' + id + '/follow',
+    method: 'put',
+    data: params
+  })
+}
+
+export function followList(id, params) {
+  return request({
+    url: '/customer/private/' + id + '/follow_list',
+    method: 'get',
+    params: params
+  })
+}
+

src/api/customer/public.js

+import request from '@/utils/request'
+
+export function getList(params) {
+  return request({
+    url: '/customer/public/list',
+    method: 'get',
+    params
+  })
+}
+
+export function getDetail(id, params) {
+  return request({
+    url: '/customer/public/' + id + '/show',
+    method: 'get',
+    params
+  })
+}
+
+export function getOption(params) {
+  return request({
+    url: '/customer/public/data_maps',
+    method: 'get',
+    params
+  })
+}
+
+export function addImport(params) {
+  return request({
+    url: '/customer/public/add_import',
+    method: 'post',
+    data: params
+  })
+}
+
+export function addCustomer(params) {
+  return request({
+    url: '/customer/public/add',
+    method: 'post',
+    data: params
+  })
+}
+
+export function editCustomer(id, params) {
+  return request({
+    url: '/customer/public/' + id + '/edit',
+    method: 'put',
+    data: params
+  })
+}
+
+export function editCustomerPrivate(id, params) {
+  return request({
+    url: '/customer/public/' + id + '/edit_private',
+    method: 'put',
+    data: params
+  })
+}
+
+export function receivePrivate(params) {
+  return request({
+    url: '/customer/public/receive_private',
+    method: 'put',
+    data: params
+  })
+}
+
+export function followCustomer(id, params) {
+  return request({
+    url: '/customer/public/' + id + '/follow',
+    method: 'put',
+    data: params
+  })
+}
+
+export function followList(id, params) {
+  return request({
+    url: '/customer/public/' + id + '/follow_list',
+    method: 'get',
+    params: params
+  })
+}
+

src/components/MDinput/index.vue

+<template>
+  <div :class="computedClasses" class="material-input__component">
+    <div :class="{iconClass:icon}">
+      <i v-if="icon" :class="['el-icon-' + icon]" class="el-input__icon material-input__icon" />
+      <input
+        v-if="type === 'email'"
+        v-model="currentValue"
+        :name="name"
+        :placeholder="fillPlaceHolder"
+        :readonly="readonly"
+        :disabled="disabled"
+        :autocomplete="autoComplete"
+        :required="required"
+        type="email"
+        class="material-input"
+        @focus="handleMdFocus"
+        @blur="handleMdBlur"
+        @input="handleModelInput"
+      >
+      <input
+        v-if="type === 'url'"
+        v-model="currentValue"
+        :name="name"
+        :placeholder="fillPlaceHolder"
+        :readonly="readonly"
+        :disabled="disabled"
+        :autocomplete="autoComplete"
+        :required="required"
+        type="url"
+        class="material-input"
+        @focus="handleMdFocus"
+        @blur="handleMdBlur"
+        @input="handleModelInput"
+      >
+      <input
+        v-if="type === 'number'"
+        v-model="currentValue"
+        :name="name"
+        :placeholder="fillPlaceHolder"
+        :step="step"
+        :readonly="readonly"
+        :disabled="disabled"
+        :autocomplete="autoComplete"
+        :max="max"
+        :min="min"
+        :minlength="minlength"
+        :maxlength="maxlength"
+        :required="required"
+        type="number"
+        class="material-input"
+        @focus="handleMdFocus"
+        @blur="handleMdBlur"
+        @input="handleModelInput"
+      >
+      <input
+        v-if="type === 'password'"
+        v-model="currentValue"
+        :name="name"
+        :placeholder="fillPlaceHolder"
+        :readonly="readonly"
+        :disabled="disabled"
+        :autocomplete="autoComplete"
+        :max="max"
+        :min="min"
+        :required="required"
+        type="password"
+        class="material-input"
+        @focus="handleMdFocus"
+        @blur="handleMdBlur"
+        @input="handleModelInput"
+      >
+      <input
+        v-if="type === 'tel'"
+        v-model="currentValue"
+        :name="name"
+        :placeholder="fillPlaceHolder"
+        :readonly="readonly"
+        :disabled="disabled"
+        :autocomplete="autoComplete"
+        :required="required"
+        type="tel"
+        class="material-input"
+        @focus="handleMdFocus"
+        @blur="handleMdBlur"
+        @input="handleModelInput"
+      >
+      <input
+        v-if="type === 'text'"
+        v-model="currentValue"
+        :name="name"
+        :placeholder="fillPlaceHolder"
+        :readonly="readonly"
+        :disabled="disabled"
+        :autocomplete="autoComplete"
+        :minlength="minlength"
+        :maxlength="maxlength"
+        :required="required"
+        type="text"
+        class="material-input"
+        @focus="handleMdFocus"
+        @blur="handleMdBlur"
+        @input="handleModelInput"
+      >
+      <span class="material-input-bar" />
+      <label class="material-label">
+        <slot />
+      </label>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'MdInput',
+  props: {
+    /* eslint-disable */
+    icon: String,
+    name: String,
+    type: {
+      type: String,
+      default: 'text'
+    },
+    value: [String, Number],
+    placeholder: String,
+    readonly: Boolean,
+    disabled: Boolean,
+    min: String,
+    max: String,
+    step: String,
+    minlength: Number,
+    maxlength: Number,
+    required: {
+      type: Boolean,
+      default: true
+    },
+    autoComplete: {
+      type: String,
+      default: 'off'
+    },
+    validateEvent: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      currentValue: this.value,
+      focus: false,
+      fillPlaceHolder: null
+    }
+  },
+  computed: {
+    computedClasses() {
+      return {
+        'material--active': this.focus,
+        'material--disabled': this.disabled,
+        'material--raised': Boolean(this.focus || this.currentValue) // has value
+      }
+    }
+  },
+  watch: {
+    value(newValue) {
+      this.currentValue = newValue
+    }
+  },
+  methods: {
+    handleModelInput(event) {
+      const value = event.target.value
+      this.$emit('input', value)
+      if (this.$parent.$options.componentName === 'ElFormItem') {
+        if (this.validateEvent) {
+          this.$parent.$emit('el.form.change', [value])
+        }
+      }
+      this.$emit('change', value)
+    },
+    handleMdFocus(event) {
+      this.focus = true
+      this.$emit('focus', event)
+      if (this.placeholder && this.placeholder !== '') {
+        this.fillPlaceHolder = this.placeholder
+      }
+    },
+    handleMdBlur(event) {
+      this.focus = false
+      this.$emit('blur', event)
+      this.fillPlaceHolder = null
+      if (this.$parent.$options.componentName === 'ElFormItem') {
+        if (this.validateEvent) {
+          this.$parent.$emit('el.form.blur', [this.currentValue])
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  // Fonts:
+  $font-size-base: 16px;
+  $font-size-small: 18px;
+  $font-size-smallest: 12px;
+  $font-weight-normal: normal;
+  $font-weight-bold: bold;
+  $apixel: 1px;
+  // Utils
+  $spacer: 12px;
+  $transition: 0.2s ease all;
+  $index: 0px;
+  $index-has-icon: 30px;
+  // Theme:
+  $color-white: white;
+  $color-grey: #9E9E9E;
+  $color-grey-light: #E0E0E0;
+  $color-blue: #2196F3;
+  $color-red: #F44336;
+  $color-black: black;
+  // Base clases:
+  %base-bar-pseudo {
+    content: '';
+    height: 1px;
+    width: 0;
+    bottom: 0;
+    position: absolute;
+    transition: $transition;
+  }
+
+  // Mixins:
+  @mixin slided-top() {
+    top: - ($font-size-base + $spacer);
+    left: 0;
+    font-size: $font-size-base;
+    font-weight: $font-weight-bold;
+  }
+
+  // Component:
+  .material-input__component {
+    margin-top: 36px;
+    position: relative;
+    * {
+      box-sizing: border-box;
+    }
+    .iconClass {
+      .material-input__icon {
+        position: absolute;
+        left: 0;
+        line-height: $font-size-base;
+        color: $color-blue;
+        top: $spacer;
+        width: $index-has-icon;
+        height: $font-size-base;
+        font-size: $font-size-base;
+        font-weight: $font-weight-normal;
+        pointer-events: none;
+      }
+      .material-label {
+        left: $index-has-icon;
+      }
+      .material-input {
+        text-indent: $index-has-icon;
+      }
+    }
+    .material-input {
+      font-size: $font-size-base;
+      padding: $spacer $spacer $spacer - $apixel * 10 $spacer / 2;
+      display: block;
+      width: 100%;
+      border: none;
+      line-height: 1;
+      border-radius: 0;
+      &:focus {
+        outline: none;
+        border: none;
+        border-bottom: 1px solid transparent; // fixes the height issue
+      }
+    }
+    .material-label {
+      font-weight: $font-weight-normal;
+      position: absolute;
+      pointer-events: none;
+      left: $index;
+      top: 0;
+      transition: $transition;
+      font-size: $font-size-small;
+    }
+    .material-input-bar {
+      position: relative;
+      display: block;
+      width: 100%;
+      &:before {
+        @extend %base-bar-pseudo;
+        left: 50%;
+      }
+      &:after {
+        @extend %base-bar-pseudo;
+        right: 50%;
+      }
+    }
+    // Disabled state:
+    &.material--disabled {
+      .material-input {
+        border-bottom-style: dashed;
+      }
+    }
+    // Raised state:
+    &.material--raised {
+      .material-label {
+        @include slided-top();
+      }
+    }
+    // Active state:
+    &.material--active {
+      .material-input-bar {
+        &:before,
+        &:after {
+          width: 50%;
+        }
+      }
+    }
+  }
+
+  .material-input__component {
+    background: $color-white;
+    .material-input {
+      background: none;
+      color: $color-black;
+      text-indent: $index;
+      border-bottom: 1px solid $color-grey-light;
+    }
+    .material-label {
+      color: $color-grey;
+    }
+    .material-input-bar {
+      &:before,
+      &:after {
+        background: $color-blue;
+      }
+    }
+    // Active state:
+    &.material--active {
+      .material-label {
+        color: $color-blue;
+      }
+    }
+    // Errors:
+    &.material--has-errors {
+      &.material--active .material-label {
+        color: $color-red;
+      }
+      .material-input-bar {
+        &:before,
+        &:after {
+          background: transparent;
+        }
+      }
+    }
+  }
+</style>

src/components/Sticky/index.vue

+<template>
+  <div :style="{height:height+'px',zIndex:zIndex}">
+    <div
+      :class="className"
+      :style="{top:(isSticky ? stickyTop +'px' : ''),zIndex:zIndex,position:position,width:width,height:height+'px'}"
+    >
+      <slot>
+        <div>sticky</div>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Sticky',
+  props: {
+    stickyTop: {
+      type: Number,
+      default: 0
+    },
+    zIndex: {
+      type: Number,
+      default: 1
+    },
+    className: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      active: false,
+      position: '',
+      width: undefined,
+      height: undefined,
+      isSticky: false
+    }
+  },
+  mounted() {
+    this.height = this.$el.getBoundingClientRect().height
+    window.addEventListener('scroll', this.handleScroll)
+    window.addEventListener('resize', this.handleResize)
+  },
+  activated() {
+    this.handleScroll()
+  },
+  destroyed() {
+    window.removeEventListener('scroll', this.handleScroll)
+    window.removeEventListener('resize', this.handleResize)
+  },
+  methods: {
+    sticky() {
+      if (this.active) {
+        return
+      }
+      this.position = 'fixed'
+      this.active = true
+      this.width = this.width + 'px'
+      this.isSticky = true
+    },
+    handleReset() {
+      if (!this.active) {
+        return
+      }
+      this.reset()
+    },
+    reset() {
+      this.position = ''
+      this.width = 'auto'
+      this.active = false
+      this.isSticky = false
+    },
+    handleScroll() {
+      const width = this.$el.getBoundingClientRect().width
+      this.width = width || 'auto'
+      const offsetTop = this.$el.getBoundingClientRect().top
+      if (offsetTop < this.stickyTop) {
+        this.sticky()
+        return
+      }
+      this.handleReset()
+    },
+    handleResize() {
+      if (this.isSticky) {
+        this.width = this.$el.getBoundingClientRect().width + 'px'
+      }
+    }
+  }
+}
+</script>

src/components/UploadExcel/index.vue

+<template>
+  <div>
+    <input ref="excel-upload-input" class="excel-upload-input" type="file" accept=".xlsx, .xls" @change="handleClick">
+    <div class="drop" @drop="handleDrop" @dragover="handleDragover" @dragenter="handleDragover">
+      拖动excel文件到此处或者
+      <el-button :loading="loading" style="margin-left:16px;" icon="el-icon-upload" size="mini" type="primary" @click="handleUpload">
+        上传
+      </el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import XLSX from 'xlsx'
+
+export default {
+  props: {
+    beforeUpload: Function, // eslint-disable-line
+    onSuccess: Function// eslint-disable-line
+  },
+  data() {
+    return {
+      loading: false,
+      excelData: {
+        header: null,
+        results: null
+      }
+    }
+  },
+  methods: {
+    generateData({ header, results }) {
+      this.excelData.header = header
+      this.excelData.results = results
+      this.onSuccess && this.onSuccess(this.excelData)
+    },
+    handleDrop(e) {
+      e.stopPropagation()
+      e.preventDefault()
+      if (this.loading) return
+      const files = e.dataTransfer.files
+      if (files.length !== 1) {
+        this.$message.error('Only support uploading one file!')
+        return
+      }
+      const rawFile = files[0] // only use files[0]
+
+      if (!this.isExcel(rawFile)) {
+        this.$message.error('Only supports upload .xlsx, .xls, .csv suffix files')
+        return false
+      }
+      this.upload(rawFile)
+      e.stopPropagation()
+      e.preventDefault()
+    },
+    handleDragover(e) {
+      e.stopPropagation()
+      e.preventDefault()
+      e.dataTransfer.dropEffect = 'copy'
+    },
+    handleUpload() {
+      this.$refs['excel-upload-input'].click()
+    },
+    handleClick(e) {
+      const files = e.target.files
+      const rawFile = files[0] // only use files[0]
+      if (!rawFile) return
+      this.upload(rawFile)
+    },
+    upload(rawFile) {
+      this.$refs['excel-upload-input'].value = null // fix can't select the same excel
+
+      if (!this.beforeUpload) {
+        this.readerData(rawFile)
+        return
+      }
+      const before = this.beforeUpload(rawFile)
+      if (before) {
+        this.readerData(rawFile)
+      }
+    },
+    readerData(rawFile) {
+      this.loading = true
+      return new Promise((resolve, reject) => {
+        const reader = new FileReader()
+        reader.onload = e => {
+          const data = e.target.result
+          const workbook = XLSX.read(data, { type: 'array' })
+          const firstSheetName = workbook.SheetNames[0]
+          const worksheet = workbook.Sheets[firstSheetName]
+          const header = this.getHeaderRow(worksheet)
+          const results = XLSX.utils.sheet_to_json(worksheet)
+          this.generateData({ header, results })
+          this.loading = false
+          resolve()
+        }
+        reader.readAsArrayBuffer(rawFile)
+      }).finally(() => { this.loading = false })
+    },
+    getHeaderRow(sheet) {
+      const headers = []
+      const range = XLSX.utils.decode_range(sheet['!ref'])
+      let C
+      const R = range.s.r
+      /* start in the first row */
+      for (C = range.s.c; C <= range.e.c; ++C) { /* walk every column in the range */
+        const cell = sheet[XLSX.utils.encode_cell({ c: C, r: R })]
+        /* find the cell in the first row */
+        let hdr = 'UNKNOWN ' + C // <-- replace with your desired default
+        if (cell && cell.t) hdr = XLSX.utils.format_cell(cell)
+        headers.push(hdr)
+      }
+      return headers
+    },
+    isExcel(file) {
+      return /\.(xlsx|xls|csv)$/.test(file.name)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.excel-upload-input{
+  display: none;
+  z-index: -9999;
+}
+.drop{
+  border: 2px dashed #bbb;
+  width: 600px;
+  height: 160px;
+  line-height: 160px;
+  margin: 0 auto;
+  font-size: 24px;
+  border-radius: 5px;
+  text-align: center;
+  color: #bbb;
+  position: relative;
+}
+</style>

src/directive/waves/index.js

+import waves from './waves'
+
+const install = function(Vue) {
+  Vue.directive('waves', waves)
+}
+
+if (window.Vue) {
+  window.waves = waves
+  Vue.use(install); // eslint-disable-line
+}
+
+waves.install = install
+export default waves

src/directive/waves/waves.css

+.waves-ripple {
+    position: absolute;
+    border-radius: 100%;
+    background-color: rgba(0, 0, 0, 0.15);
+    background-clip: padding-box;
+    pointer-events: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    -webkit-transform: scale(0);
+    -ms-transform: scale(0);
+    transform: scale(0);
+    opacity: 1;
+}
+
+.waves-ripple.z-active {
+    opacity: 0;
+    -webkit-transform: scale(2);
+    -ms-transform: scale(2);
+    transform: scale(2);
+    -webkit-transition: opacity 1.2s ease-out, -webkit-transform 0.6s ease-out;
+    transition: opacity 1.2s ease-out, -webkit-transform 0.6s ease-out;
+    transition: opacity 1.2s ease-out, transform 0.6s ease-out;
+    transition: opacity 1.2s ease-out, transform 0.6s ease-out, -webkit-transform 0.6s ease-out;
+}
\ No newline at end of file

src/directive/waves/waves.js

+import './waves.css'
+
+const context = '@@wavesContext'
+
+function handleClick(el, binding) {
+  function handle(e) {
+    const customOpts = Object.assign({}, binding.value)
+    const opts = Object.assign({
+      ele: el, // 波纹作用元素
+      type: 'hit', // hit 点击位置扩散 center中心点扩展
+      color: 'rgba(0, 0, 0, 0.15)' // 波纹颜色
+    },
+    customOpts
+    )
+    const target = opts.ele
+    if (target) {
+      target.style.position = 'relative'
+      target.style.overflow = 'hidden'
+      const rect = target.getBoundingClientRect()
+      let ripple = target.querySelector('.waves-ripple')
+      if (!ripple) {
+        ripple = document.createElement('span')
+        ripple.className = 'waves-ripple'
+        ripple.style.height = ripple.style.width = Math.max(rect.width, rect.height) + 'px'
+        target.appendChild(ripple)
+      } else {
+        ripple.className = 'waves-ripple'
+      }
+      switch (opts.type) {
+        case 'center':
+          ripple.style.top = rect.height / 2 - ripple.offsetHeight / 2 + 'px'
+          ripple.style.left = rect.width / 2 - ripple.offsetWidth / 2 + 'px'
+          break
+        default:
+          ripple.style.top =
+            (e.pageY - rect.top - ripple.offsetHeight / 2 - document.documentElement.scrollTop ||
+              document.body.scrollTop) + 'px'
+          ripple.style.left =
+            (e.pageX - rect.left - ripple.offsetWidth / 2 - document.documentElement.scrollLeft ||
+              document.body.scrollLeft) + 'px'
+      }
+      ripple.style.backgroundColor = opts.color
+      ripple.className = 'waves-ripple z-active'
+      return false
+    }
+  }
+
+  if (!el[context]) {
+    el[context] = {
+      removeHandle: handle
+    }
+  } else {
+    el[context].removeHandle = handle
+  }
+
+  return handle
+}
+
+export default {
+  bind(el, binding) {
+    el.addEventListener('click', handleClick(el, binding), false)
+  },
+  update(el, binding) {
+    el.removeEventListener('click', el[context].removeHandle, false)
+    el.addEventListener('click', handleClick(el, binding), false)
+  },
+  unbind(el) {
+    el.removeEventListener('click', el[context].removeHandle, false)
+    el[context] = null
+    delete el[context]
+  }
+}

src/router/config.js

@@ -2,10 +2,34 @@
 export const constantRouterComponents = {
   // 权限管理
   'role.index': () => import('@/views/system/power/role/index'),
+  'menu.index': () => import('@/views/system/power/menu/index'),
+
+  // 员工管理
   'user.index': () => import('@/views/system/company/user/index'),
   'user.add': () => import('@/views/system/company/user/add'),
   'user.edit': () => import('@/views/system/company/user/edit'),
-  'menu.index': () => import('@/views/system/power/menu/index'),
+
+  // 部门管理
   'department.index': () => import('@/views/system/company/department/index'),
-  'announcement.index': () => import('@/views/system/announcement/index')
+
+  // 公告管理
+  'announcement.index': () => import('@/views/system/announcement/index'),
+
+  // 客户-我的客户
+  'private.index': () => import('@/views/customer/private/index'),
+  'private.add': () => import('@/views/customer/private/add'),
+  'private.edit': () => import('@/views/customer/private/edit'),
+  'private.import': () => import('@/views/customer/private/import'),
+
+  // 客户-公海客户
+  'public.index': () => import('@/views/customer/public/index'),
+  'public.add': () => import('@/views/customer/public/add'),
+  'public.edit': () => import('@/views/customer/public/edit'),
+  'public.import': () => import('@/views/customer/public/import'),
+
+  // 客户-商机管理
+  'opportunity.index': () => import('@/views/customer/opportunity/index'),
+  'opportunity.add': () => import('@/views/customer/opportunity/add'),
+  'opportunity.edit': () => import('@/views/customer/opportunity/edit')
+
 }

src/router/generator-routers.js

@@ -68,23 +68,35 @@ export const generator = (routerMap, parent) => {
       }
     }
 
+    if (item.key.includes('.edit')) {
+      currentRouter.meta.noTag = true
+    }
+
     if (item.is_menu === 0) {
       currentRouter.hidden = true
+      if (parent.redirect === 'noRedirect') {
+        currentRouter.meta.activeMenu = parent.path + '/' + parent.name + '.index'
+      } else {
         currentRouter.meta.activeMenu = parent.path
       }
+    }
 
     // 是否有子菜单，并递归处理
     if (item.children && item.children.length > 0) {
-      // Recursion
-      currentRouter.children = generator(item.children, currentRouter)
+      const index_view = item.children.find(item => item.key === currentRouter.name + '.index')
 
+      if (item.children.find(item => item.is_menu === 1)) {
         currentRouter.component = RouteView
         currentRouter.redirect = 'noRedirect'
-
-      const index_view = item.children.find(item => item.key === currentRouter.name + '.index')
-      if (index_view) {
+      } else if (index_view) {
+        currentRouter.component = RouteView
         currentRouter.redirect = currentRouter.path + '/' + index_view.key
+      } else {
+        currentRouter.component = () => import('@/views/404')
       }
+
+      // Recursion
+      currentRouter.children = generator(item.children, currentRouter)
     }
     return currentRouter
   })

src/store/modules/tagsView.js

@@ -6,11 +6,13 @@ const state = {
 const mutations = {
   ADD_VISITED_VIEW: (state, view) => {
     if (state.visitedViews.some(v => v.path === view.path)) return
+    if (!view.meta.noTag) {
       state.visitedViews.push(
         Object.assign({}, view, {
           title: view.meta.title || 'no-name'
         })
       )
+    }
   },
   ADD_CACHED_VIEW: (state, view) => {
     if (state.cachedViews.includes(view.name)) return

src/utils/index.js

@@ -355,3 +355,27 @@ export function removeClass(ele, cls) {
     ele.className = ele.className.replace(reg, ' ')
   }
 }
+
+export function findKeyByValue(object, value) {
+  const keys = Object.keys(object)
+  const key = keys.find(key => object[key] === value)
+  return key || null // Value not found in the object
+}
+
+export function formatImportData(results, headerFiled) {
+  const data = []
+  results.forEach((item) => {
+    const date_item = {}
+    Object.keys(item).forEach(key => {
+      const value = item[key]
+      const filed = findKeyByValue(headerFiled, key)
+      if (filed) {
+        date_item[filed] = value
+      }
+    })
+    data.push(date_item)
+  })
+
+  return data
+}
+

src/utils/request.js

@@ -5,9 +5,9 @@ import { getToken } from '@/utils/auth'
 import router from '@/router'
 // create an axios instance
 const service = axios.create({
-  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
+  baseURL: '/api', // url = base url + request url
   // withCredentials: true, // send cookies when cross-domain requests
-  timeout: 5000 // request timeout
+  timeout: 30000 // request timeout
 })
 // request interceptor
 service.interceptors.request.use(

src/vendor/Export2Excel.js

+/* eslint-disable */
+import { saveAs } from 'file-saver'
+import XLSX from 'xlsx'
+
+function generateArray(table) {
+  var out = [];
+  var rows = table.querySelectorAll('tr');
+  var ranges = [];
+  for (var R = 0; R < rows.length; ++R) {
+    var outRow = [];
+    var row = rows[R];
+    var columns = row.querySelectorAll('td');
+    for (var C = 0; C < columns.length; ++C) {
+      var cell = columns[C];
+      var colspan = cell.getAttribute('colspan');
+      var rowspan = cell.getAttribute('rowspan');
+      var cellValue = cell.innerText;
+      if (cellValue !== "" && cellValue == +cellValue) cellValue = +cellValue;
+
+      //Skip ranges
+      ranges.forEach(function (range) {
+        if (R >= range.s.r && R <= range.e.r && outRow.length >= range.s.c && outRow.length <= range.e.c) {
+          for (var i = 0; i <= range.e.c - range.s.c; ++i) outRow.push(null);
+        }
+      });
+
+      //Handle Row Span
+      if (rowspan || colspan) {
+        rowspan = rowspan || 1;
+        colspan = colspan || 1;
+        ranges.push({
+          s: {
+            r: R,
+            c: outRow.length
+          },
+          e: {
+            r: R + rowspan - 1,
+            c: outRow.length + colspan - 1
+          }
+        });
+      };
+
+      //Handle Value
+      outRow.push(cellValue !== "" ? cellValue : null);
+
+      //Handle Colspan
+      if (colspan)
+        for (var k = 0; k < colspan - 1; ++k) outRow.push(null);
+    }
+    out.push(outRow);
+  }
+  return [out, ranges];
+};
+
+function datenum(v, date1904) {
+  if (date1904) v += 1462;
+  var epoch = Date.parse(v);
+  return (epoch - new Date(Date.UTC(1899, 11, 30))) / (24 * 60 * 60 * 1000);
+}
+
+function sheet_from_array_of_arrays(data, opts) {
+  var ws = {};
+  var range = {
+    s: {
+      c: 10000000,
+      r: 10000000
+    },
+    e: {
+      c: 0,
+      r: 0
+    }
+  };
+  for (var R = 0; R != data.length; ++R) {
+    for (var C = 0; C != data[R].length; ++C) {
+      if (range.s.r > R) range.s.r = R;
+      if (range.s.c > C) range.s.c = C;
+      if (range.e.r < R) range.e.r = R;
+      if (range.e.c < C) range.e.c = C;
+      var cell = {
+        v: data[R][C]
+      };
+      if (cell.v == null) continue;
+      var cell_ref = XLSX.utils.encode_cell({
+        c: C,
+        r: R
+      });
+
+      if (typeof cell.v === 'number') cell.t = 'n';
+      else if (typeof cell.v === 'boolean') cell.t = 'b';
+      else if (cell.v instanceof Date) {
+        cell.t = 'n';
+        cell.z = XLSX.SSF._table[14];
+        cell.v = datenum(cell.v);
+      } else cell.t = 's';
+
+      ws[cell_ref] = cell;
+    }
+  }
+  if (range.s.c < 10000000) ws['!ref'] = XLSX.utils.encode_range(range);
+  return ws;
+}
+
+function Workbook() {
+  if (!(this instanceof Workbook)) return new Workbook();
+  this.SheetNames = [];
+  this.Sheets = {};
+}
+
+function s2ab(s) {
+  var buf = new ArrayBuffer(s.length);
+  var view = new Uint8Array(buf);
+  for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
+  return buf;
+}
+
+export function export_table_to_excel(id) {
+  var theTable = document.getElementById(id);
+  var oo = generateArray(theTable);
+  var ranges = oo[1];
+
+  /* original data */
+  var data = oo[0];
+  var ws_name = "SheetJS";
+
+  var wb = new Workbook(),
+    ws = sheet_from_array_of_arrays(data);
+
+  /* add ranges to worksheet */
+  // ws['!cols'] = ['apple', 'banan'];
+  ws['!merges'] = ranges;
+
+  /* add worksheet to workbook */
+  wb.SheetNames.push(ws_name);
+  wb.Sheets[ws_name] = ws;
+
+  var wbout = XLSX.write(wb, {
+    bookType: 'xlsx',
+    bookSST: false,
+    type: 'binary'
+  });
+
+  saveAs(new Blob([s2ab(wbout)], {
+    type: "application/octet-stream"
+  }), "test.xlsx")
+}
+
+export function export_json_to_excel({
+  multiHeader = [],
+  header,
+  data,
+  filename,
+  merges = [],
+  autoWidth = true,
+  bookType = 'xlsx'
+} = {}) {
+  /* original data */
+  filename = filename || 'excel-list'
+  data = [...data]
+  data.unshift(header);
+
+  for (let i = multiHeader.length - 1; i > -1; i--) {
+    data.unshift(multiHeader[i])
+  }
+
+  var ws_name = "SheetJS";
+  var wb = new Workbook(),
+    ws = sheet_from_array_of_arrays(data);
+
+  if (merges.length > 0) {
+    if (!ws['!merges']) ws['!merges'] = [];
+    merges.forEach(item => {
+      ws['!merges'].push(XLSX.utils.decode_range(item))
+    })
+  }
+
+  if (autoWidth) {
+    /*设置worksheet每列的最大宽度*/
+    const colWidth = data.map(row => row.map(val => {
+      /*先判断是否为null/undefined*/
+      if (val == null) {
+        return {
+          'wch': 10
+        };
+      }
+      /*再判断是否为中文*/
+      else if (val.toString().charCodeAt(0) > 255) {
+        return {
+          'wch': val.toString().length * 2
+        };
+      } else {
+        return {
+          'wch': val.toString().length
+        };
+      }
+    }))
+    /*以第一行为初始值*/
+    let result = colWidth[0];
+    for (let i = 1; i < colWidth.length; i++) {
+      for (let j = 0; j < colWidth[i].length; j++) {
+        if (result[j]['wch'] < colWidth[i][j]['wch']) {
+          result[j]['wch'] = colWidth[i][j]['wch'];
+        }
+      }
+    }
+    ws['!cols'] = result;
+  }
+
+  /* add worksheet to workbook */
+  wb.SheetNames.push(ws_name);
+  wb.Sheets[ws_name] = ws;
+
+  var wbout = XLSX.write(wb, {
+    bookType: bookType,
+    bookSST: false,
+    type: 'binary'
+  });
+  saveAs(new Blob([s2ab(wbout)], {
+    type: "application/octet-stream"
+  }), `${filename}.${bookType}`);
+}

src/vendor/Export2Zip.js

+/* eslint-disable */
+import { saveAs } from 'file-saver'
+import JSZip from 'jszip'
+
+export function export_txt_to_zip(th, jsonData, txtName, zipName) {
+  const zip = new JSZip()
+  const txt_name = txtName || 'file'
+  const zip_name = zipName || 'file'
+  const data = jsonData
+  let txtData = `${th}\r\n`
+  data.forEach((row) => {
+    let tempStr = ''
+    tempStr = row.toString()
+    txtData += `${tempStr}\r\n`
+  })
+  zip.file(`${txt_name}.txt`, txtData)
+  zip.generateAsync({
+    type: "blob"
+  }).then((blob) => {
+    saveAs(blob, `${zip_name}.zip`)
+  }, (err) => {
+    alert('导出失败')
+  })
+}

src/views/customer/opportunity/add.vue

+<template>
+  <div class="app-container">
+    <div class="button-container">
+      <el-button :loading="loading" type="success" @click="submitForm">
+        提交
+      </el-button>
+    </div>
+    <el-form ref="addForm" label-width="80px" :model="form" :rules="rules">
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>客户</span>
+          <el-button type="text" style="float: right; padding: 3px 0" @click="handleSelectCustomer">
+            选择客户
+          </el-button>
+        </div>
+
+        <el-descriptions title="">
+          <el-descriptions-item label="ID">{{ selectCustomer.id }}</el-descriptions-item>
+          <el-descriptions-item label="客户名称">{{ selectCustomer.name }}</el-descriptions-item>
+          <el-descriptions-item label="公司名称">{{ selectCustomer.company }}</el-descriptions-item>
+          <el-descriptions-item label="行业">{{ selectCustomer.industry }}</el-descriptions-item>
+          <el-descriptions-item label="部门">{{ selectCustomer.department }}</el-descriptions-item>
+          <el-descriptions-item label="职位">{{ selectCustomer.duties }}</el-descriptions-item>
+        </el-descriptions>
+      </el-card>
+
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>基本信息</span>
+        </div>
+        <el-row>
+          <el-col :span="8">
+            <el-form-item label="产品类型" label-width="150px" prop="product_type">
+              <el-select v-model="form.product_type" placeholder="产品类型" clearable class="filter-item">
+                <el-option v-for="item in productTypeOptions" :key="item.id" :label="item.name" :value="item.id" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="标题" label-width="150px" prop="title">
+              <el-input v-model="form.title" placeholder="标题" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="预计签单日期" label-width="150px" prop="customer_desire_time">
+              <el-date-picker
+                v-model="form.expect_date"
+                :value-format="'yyyy-MM-dd'"
+                type="date"
+                placeholder="选择日期"
+              />
+            </el-form-item>
+
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="8">
+            <el-form-item label="客户预期时间" label-width="150px" prop="customer_desire_time">
+              <el-date-picker
+                v-model="form.customer_desire_time"
+                :value-format="'yyyy-MM-dd HH:mm:ss'"
+                type="datetime"
+                placeholder="选择日期时间"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="客户预计金额" label-width="150px" prop="customer_expect_money">
+              <el-input v-model="form.customer_expect_money" placeholder="客户预计金额" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8" />
+        </el-row>
+      </el-card>
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>评估信息</span>
+        </div>
+        <el-row>
+          <el-col :span="8">
+            <el-form-item label="评估状态" label-width="100px" prop="estimate_status">
+              <el-select v-model="form.estimate_status" placeholder="评估状态" clearable class="filter-item">
+                <el-option v-for="item in estimateStatusOptions" :key="item.id" :label="item.name" :value="item.id" />
+              </el-select>
+            </el-form-item>
+
+          </el-col>
+          <el-col :span="8">
+            <el-form-item prop="estimate_hour" label-width="100px" label="工时:">
+              <el-input v-model="form.estimate_hour" placeholder="工时" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item prop="estimate_price" label-width="100px" label="评估价格:">
+              <el-input v-model="form.estimate_price" placeholder="评估价格" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="8">
+            <el-form-item prop="estimate_people" label-width="100px" label="评估人:">
+              <el-input v-model="form.estimate_people" placeholder="评估人" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item prop="estimate_time" label-width="100px" label="评估时间:">
+              <el-date-picker
+                v-model="form.estimate_time"
+                :value-format="'yyyy-MM-dd HH:mm:ss'"
+                type="datetime"
+                placeholder="选择日期时间"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8" />
+        </el-row>
+
+      </el-card>
+    </el-form>
+    <el-dialog title="选择客户" :visible.sync="dialogVisible">
+      <el-radio v-model="tableType" label="private" @input="getList">我的客户</el-radio>
+      <el-radio v-model="tableType" label="public" @input="getList">公海客户</el-radio>
+      <el-input v-model="listQuery.name" placeholder="客户名称" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
+      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
+        搜索
+      </el-button>
+      <el-table v-loading="listLoading" :data="customerList" border>
+        <el-table-column align="center" label="ID">
+          <template slot-scope="scope">
+            {{ scope.row.id }}
+          </template>
+        </el-table-column>
+        <el-table-column align="center" label="客户名称">
+          <template slot-scope="scope">
+            {{ scope.row.name }}
+          </template>
+        </el-table-column>
+        <el-table-column align="center" label="公司名称">
+          <template slot-scope="scope">
+            {{ scope.row.company }}
+          </template>
+        </el-table-column>
+        <el-table-column align="center" label="行业">
+          <template slot-scope="scope">
+            {{ scope.row.industry }}
+          </template>
+        </el-table-column>
+        <el-table-column align="center" label="部门">
+          <template slot-scope="scope">
+            {{ scope.row.department }}
+          </template>
+        </el-table-column>
+        <el-table-column align="center" label="职位">
+          <template slot-scope="scope">
+            {{ scope.row.duties }}
+          </template>
+        </el-table-column>
+        <el-table-column align="center" label="操作">
+          <template slot-scope="scope">
+            <el-button :loading="loading" size="small" @click="handleSelectTable(scope)">选择</el-button>
+          </template>
+        </el-table-column>
+
+      </el-table>
+      <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.per_page" @pagination="getList" />
+    </el-dialog>
+  </div>
+
+</template>
+
+<script>
+import { getOption, addOpportunity } from '@/api/customer/opportunity'
+import { Message } from 'element-ui'
+import { getList as publicList } from '@/api/customer/public'
+import { getList as privateList } from '@/api/customer/private'
+import Pagination from '@/components/Pagination'
+
+export default {
+  components: { Pagination },
+
+  data() {
+    return {
+      form: {
+        'customer_id': '',
+        'product_type': '',
+        'title': '',
+        'demand_doc': '',
+        'customer_desire_time': '',
+        'customer_expect_money': '',
+        'expect_date': '',
+        'estimate_status': '',
+        'estimate_hour': '',
+        'estimate_price': '',
+        'estimate_people': '',
+        'estimate_time': ''
+      },
+      rules: {
+        customer_id: [{ required: true, message: '产品类型不能为空', trigger: 'blur' }],
+        product_type: [{ required: true, message: '产品类型不能为空', trigger: 'blur' }],
+        title: [{ required: true, message: '标题不能为空', trigger: 'blur' }],
+        customer_desire_time: [{ required: true, message: '客户预期时间不能为空', trigger: 'blur' }],
+        customer_expect_money: [{ required: true, message: '客户预期金额不能为空', trigger: 'blur' }]
+      },
+      loading: false,
+      productTypeOptions: [],
+      estimateStatusOptions: [],
+
+      dialogVisible: false,
+      listLoading: false,
+      customerList: [],
+      tableType: 'private',
+      listQuery: {
+        page: 1,
+        per_page: 10,
+        follow_status: '',
+        type: '',
+        from: '',
+        include: 'follow'
+      },
+      total: 0,
+      selectCustomer: {}
+    }
+  },
+  created() {
+    this.getOption()
+  },
+  methods: {
+    getOption() {
+      getOption().then((res) => {
+        const { product_type_maps, estimate_status_maps } = res.data
+        this.productTypeOptions = product_type_maps
+        this.estimateStatusOptions = estimate_status_maps
+      })
+    },
+
+    submitForm() {
+      if (!this.form.customer_id) {
+        Message.warning('请选择客户')
+        return
+      }
+      this.$refs['addForm'].validate((valid, fields) => {
+        if (valid) {
+          this.loading = true
+          addOpportunity(this.form).then(() => {
+            Message.success('添加成功')
+            this.$refs['addForm'].clearValidate()
+            this.$refs['addForm'].resetFields()
+            this.selectCustomer = Object.assign({})
+            this.form.customer_id = ''
+          }).finally(() => { this.loading = false })
+        }
+      })
+    },
+    getList() {
+      this.listLoading = true
+      if (this.tableType === 'private') {
+        privateList(this.listQuery).then((res) => {
+          const { data, meta } = res
+          this.customerList = data
+          this.total = meta.pagination.total
+        }).finally(() => {
+          this.listLoading = false
+        })
+      } else {
+        publicList(this.listQuery).then((res) => {
+          const { data, meta } = res
+          this.customerList = data
+          this.total = meta.pagination.total
+        }).finally(() => {
+          this.listLoading = false
+        })
+      }
+    },
+    handleFilter() {
+      this.listQuery.page = 1
+      this.getList()
+    },
+    handleSelectCustomer() {
+      this.dialogVisible = true
+      this.getList()
+    },
+    handleSelectTable(scope) {
+      this.selectCustomer = scope.row
+      this.dialogVisible = false
+
+      this.form.customer_id = scope.row.id
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.button-container{
+  display: flex;
+  justify-content: space-between;
+}
+.box-card{
+  margin: 15px 0;
+}
+</style>

src/views/customer/opportunity/edit.vue

+<template>
+  <div class="app-container">
+    <div class="button-container">
+      <el-button @click="$router.go(-1)">
+        返回
+      </el-button>
+      <el-button :loading="loading" type="success" @click="submitForm">
+        提交
+      </el-button>
+    </div>
+    <el-form ref="editForm" label-width="80px" :model="form" :rules="rules">
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>客户</span>
+          <el-button type="text" style="float: right; padding: 3px 0" @click="handleSelectCustomer">
+            选择客户
+          </el-button>
+        </div>
+
+        <el-descriptions title="">
+          <el-descriptions-item label="ID">{{ selectCustomer.id }}</el-descriptions-item>
+          <el-descriptions-item label="客户名称">{{ selectCustomer.name }}</el-descriptions-item>
+          <el-descriptions-item label="公司名称">{{ selectCustomer.company }}</el-descriptions-item>
+          <el-descriptions-item label="行业">{{ selectCustomer.industry }}</el-descriptions-item>
+          <el-descriptions-item label="部门">{{ selectCustomer.department }}</el-descriptions-item>
+          <el-descriptions-item label="职位">{{ selectCustomer.duties }}</el-descriptions-item>
+        </el-descriptions>
+      </el-card>
+
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>基本信息</span>
+        </div>
+        <el-row>
+          <el-col :span="8">
+            <el-form-item label="产品类型" label-width="150px" prop="product_type">
+              <el-select v-model="form.product_type" placeholder="产品类型" clearable class="filter-item">
+                <el-option v-for="item in productTypeOptions" :key="item.id" :label="item.name" :value="item.id" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="标题" label-width="150px" prop="title">
+              <el-input v-model="form.title" placeholder="标题" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="预计签单日期" label-width="150px" prop="customer_desire_time">
+              <el-date-picker
+                v-model="form.expect_date"
+                :value-format="'yyyy-MM-dd'"
+                type="date"
+                placeholder="选择日期"
+              />
+            </el-form-item>
+
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="8">
+            <el-form-item label="客户预期时间" label-width="150px" prop="customer_desire_time">
+              <el-date-picker
+                v-model="form.customer_desire_time"
+                :value-format="'yyyy-MM-dd HH:mm:ss'"
+                type="datetime"
+                placeholder="选择日期时间"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="客户预计金额" label-width="150px" prop="customer_expect_money">
+              <el-input v-model="form.customer_expect_money" placeholder="客户预计金额" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8" />
+        </el-row>
+      </el-card>
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>评估信息</span>
+        </div>
+        <el-row>
+          <el-col :span="8">
+            <el-form-item label="评估状态" label-width="100px" prop="estimate_status">
+              <el-select v-model="form.estimate_status" placeholder="评估状态" clearable class="filter-item">
+                <el-option v-for="item in estimateStatusOptions" :key="item.id" :label="item.name" :value="item.id" />
+              </el-select>
+            </el-form-item>
+
+          </el-col>
+          <el-col :span="8">
+            <el-form-item prop="estimate_hour" label-width="100px" label="工时:">
+              <el-input v-model="form.estimate_hour" placeholder="工时" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item prop="estimate_price" label-width="100px" label="评估价格:">
+              <el-input v-model="form.estimate_price" placeholder="评估价格" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="8">
+            <el-form-item prop="estimate_people" label-width="100px" label="评估人:">
+              <el-input v-model="form.estimate_people" placeholder="评估人" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item prop="estimate_time" label-width="100px" label="评估时间:">
+              <el-date-picker
+                v-model="form.estimate_time"
+                :value-format="'yyyy-MM-dd HH:mm:ss'"
+                type="datetime"
+                placeholder="选择日期时间"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8" />
+        </el-row>
+
+      </el-card>
+    </el-form>
+    <el-dialog title="选择客户" :visible.sync="dialogVisible">
+      <el-radio v-model="tableType" label="private" @input="getList">我的客户</el-radio>
+      <el-radio v-model="tableType" label="public" @input="getList">公海客户</el-radio>
+      <el-input v-model="listQuery.name" placeholder="客户名称" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
+      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
+        搜索
+      </el-button>
+      <el-table v-loading="listLoading" :data="customerList" border>
+        <el-table-column align="center" label="ID">
+          <template slot-scope="scope">
+            {{ scope.row.id }}
+          </template>
+        </el-table-column>
+        <el-table-column align="center" label="客户名称">
+          <template slot-scope="scope">
+            {{ scope.row.name }}
+          </template>
+        </el-table-column>
+        <el-table-column align="center" label="公司名称">
+          <template slot-scope="scope">
+            {{ scope.row.company }}
+          </template>
+        </el-table-column>
+        <el-table-column align="center" label="行业">
+          <template slot-scope="scope">
+            {{ scope.row.industry }}
+          </template>
+        </el-table-column>
+        <el-table-column align="center" label="部门">
+          <template slot-scope="scope">
+            {{ scope.row.department }}
+          </template>
+        </el-table-column>
+        <el-table-column align="center" label="职位">
+          <template slot-scope="scope">
+            {{ scope.row.duties }}
+          </template>
+        </el-table-column>
+        <el-table-column align="center" label="操作">
+          <template slot-scope="scope">
+            <el-button :loading="loading" size="small" @click="handleSelectTable(scope)">选择</el-button>
+          </template>
+        </el-table-column>
+
+      </el-table>
+      <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.per_page" @pagination="getList" />
+    </el-dialog>
+  </div>
+
+</template>
+
+<script>
+import { getOption, editOpportunity } from '@/api/customer/opportunity'
+import { Message } from 'element-ui'
+import { getList as publicList } from '@/api/customer/public'
+import { getList as privateList } from '@/api/customer/private'
+import Pagination from '@/components/Pagination'
+
+export default {
+  components: { Pagination },
+
+  data() {
+    return {
+      form: {
+        'customer_id': '',
+        'product_type': '',
+        'title': '',
+        'demand_doc': '',
+        'customer_desire_time': '',
+        'customer_expect_money': '',
+        'expect_date': '',
+        'estimate_status': '',
+        'estimate_hour': '',
+        'estimate_price': '',
+        'estimate_people': '',
+        'estimate_time': ''
+      },
+      rules: {
+        customer_id: [{ required: true, message: '产品类型不能为空', trigger: 'blur' }],
+        product_type: [{ required: true, message: '产品类型不能为空', trigger: 'blur' }],
+        title: [{ required: true, message: '标题不能为空', trigger: 'blur' }],
+        customer_desire_time: [{ required: true, message: '客户预期时间不能为空', trigger: 'blur' }],
+        customer_expect_money: [{ required: true, message: '客户预期金额不能为空', trigger: 'blur' }]
+      },
+      loading: false,
+      productTypeOptions: [],
+      estimateStatusOptions: [],
+
+      dialogVisible: false,
+      listLoading: false,
+      customerList: [],
+      tableType: 'private',
+      listQuery: {
+        page: 1,
+        per_page: 10,
+        follow_status: '',
+        type: '',
+        from: '',
+        include: 'follow'
+      },
+      total: 0,
+      selectCustomer: {}
+    }
+  },
+  created() {
+    this.form = Object.assign({}, this.$route.params && this.$route.params.row)
+    if (!this.form.id) {
+      this.$router.push({ path: '/' })
+    }
+    this.selectCustomer = this.form.customer.data
+    this.getOption()
+  },
+  beforeRouteLeave(to, from, next) {
+    this.$store.dispatch('tagsView/delView', from)
+    next()
+  },
+  methods: {
+    getOption() {
+      getOption().then((res) => {
+        const { product_type_maps, estimate_status_maps } = res.data
+        this.productTypeOptions = product_type_maps
+        this.estimateStatusOptions = estimate_status_maps
+      })
+    },
+
+    submitForm() {
+      if (!this.form.customer_id) {
+        Message.warning('请选择客户')
+        return
+      }
+      this.$refs['editForm'].validate((valid, fields) => {
+        if (valid) {
+          this.loading = true
+          editOpportunity(this.form.id, this.form).then(() => {
+            Message.success('编辑成功')
+            this.$router.go(-1)
+          }).finally(() => { this.loading = false })
+        }
+      })
+    },
+    getList() {
+      this.listLoading = true
+      if (this.tableType === 'private') {
+        privateList(this.listQuery).then((res) => {
+          const { data, meta } = res
+          this.customerList = data
+          this.total = meta.pagination.total
+        }).finally(() => {
+          this.listLoading = false
+        })
+      } else {
+        publicList(this.listQuery).then((res) => {
+          const { data, meta } = res
+          this.customerList = data
+          this.total = meta.pagination.total
+        }).finally(() => {
+          this.listLoading = false
+        })
+      }
+    },
+    handleFilter() {
+      this.listQuery.page = 1
+      this.getList()
+    },
+    handleSelectCustomer() {
+      this.dialogVisible = true
+      this.getList()
+    },
+    handleSelectTable(scope) {
+      this.selectCustomer = scope.row
+      this.dialogVisible = false
+
+      this.form.customer_id = scope.row.id
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.button-container{
+  display: flex;
+  justify-content: space-between;
+}
+.box-card{
+  margin: 15px 0;
+}
+</style>

src/views/customer/opportunity/index.vue

+<template>
+  <div class="app-container">
+    <div class="filter-container">
+      <el-input v-model="listQuery.customer_name" placeholder="客户名称" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
+      <el-input v-model="listQuery.customer_phone" placeholder="客户手机" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
+      <el-input v-model="listQuery.title" placeholder="商机标题" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
+      <el-input v-model="listQuery.id" placeholder="商机编号" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
+      <el-date-picker
+        v-model="listQuery.expect_date"
+        :value-format="'yyyy-MM-dd'"
+        type="date"
+        placeholder="预计签单日期"
+      />
+      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
+        搜索
+      </el-button>
+    </div>
+    <el-button :loading="listLoading" icon="el-icon-refresh" @click="getList" />
+
+    <el-button class="filter-item" type="primary" @click="handleAdd">
+      添加
+    </el-button>
+
+    <el-table v-loading="listLoading" :data="data" style="width: 100%;margin-top:30px;" border>
+
+      <el-table-column align="center" label="ID" fixed="left" width="100">
+        <template slot-scope="scope">
+          {{ scope.row.id }}
+        </template>
+      </el-table-column>
+      <el-table-column align="center" label="产品类型" fixed="left" width="100">
+        <template slot-scope="scope">
+          {{ scope.row.product_type_text }}
+        </template>
+      </el-table-column>
+      <el-table-column align="center" label="标题" fixed="left" width="100">
+        <template slot-scope="scope">
+          {{ scope.row.title }}
+        </template>
+      </el-table-column>
+      <el-table-column align="center" label="客户名称" fixed="left" width="100">
+        <template slot-scope="scope">
+          {{ scope.row.customer.data.name }}
+        </template>
+      </el-table-column>
+      <el-table-column align="center" label="客户手机" fixed="left" width="100">
+        <template slot-scope="scope">
+          {{ scope.row.customer.data.mobile_phone }}
+        </template>
+      </el-table-column>
+      <el-table-column align="center" label="客户期完成望时间" width="200">
+        <template slot-scope="scope">
+          {{ scope.row.customer_desire_time }}
+        </template>
+      </el-table-column>
+      <el-table-column align="center" label="客户预期金额" width="150">
+        <template slot-scope="scope">
+          {{ scope.row.customer_expect_money }}
+        </template>
+      </el-table-column>
+      <el-table-column align="center" label="预计签单日期" width="150">
+        <template slot-scope="scope">
+          {{ scope.row.expect_date }}
+        </template>
+      </el-table-column>
+      <el-table-column align="center" label="需求评估状态" width="150">
+        <template slot-scope="scope">
+          {{ scope.row.estimate_status_text }}
+        </template>
+      </el-table-column>
+      <el-table-column align="center" label="评估人" width="100">
+        <template slot-scope="scope">
+          {{ scope.row.estimate_people }}
+        </template>
+      </el-table-column>
+      <el-table-column align="center" label="评估时间" width="200">
+        <template slot-scope="scope">
+          {{ scope.row.estimate_time }}
+        </template>
+      </el-table-column>
+      <el-table-column align="center" label="操作" fixed="right" width="200">
+        <template slot-scope="scope">
+          <el-button size="small" @click="handleDetail(scope)">详情</el-button>
+          <el-button type="primary" size="small" @click="handleEdit(scope)">编辑</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.per_page" @pagination="getList" />
+
+    <!-- 详情   -->
+    <el-dialog :visible.sync="dialogDetail" title="详细信息">
+      <el-tabs v-model="activeDetailTab" v-loading="detailLoading" :v-if="detailData">
+        <el-tab-pane label="商机信息" name="opportunity">
+          <el-descriptions title="">
+            <el-descriptions-item label="产品类型">{{ detailData.opportunity.product_type_text }}</el-descriptions-item>
+            <el-descriptions-item label="标题">{{ detailData.opportunity.title }}</el-descriptions-item>
+            <el-descriptions-item label="客户期望时间">{{ detailData.opportunity.customer_desire_time }}</el-descriptions-item>
+            <el-descriptions-item label="客户预期金额">{{ detailData.opportunity.customer_expect_money }}</el-descriptions-item>
+            <el-descriptions-item label="预计签单日期">{{ detailData.opportunity.expect_date }}</el-descriptions-item>
+            <el-descriptions-item label="评估状态">{{ detailData.opportunity.estimate_status_text }}</el-descriptions-item>
+            <el-descriptions-item label="工时">{{ detailData.opportunity.estimate_hour }}</el-descriptions-item>
+            <el-descriptions-item label="评估价格">{{ detailData.opportunity.estimate_price }}</el-descriptions-item>
+            <el-descriptions-item label="评估人">{{ detailData.opportunity.estimate_people }}</el-descriptions-item>
+            <el-descriptions-item label="评估时间">{{ detailData.opportunity.estimate_time }}</el-descriptions-item>
+          </el-descriptions>
+        </el-tab-pane>
+        <el-tab-pane label="客户信息" name="customer">
+          <el-descriptions title="">
+            <el-descriptions-item label="客户名称">{{ detailData.customer.name }}</el-descriptions-item>
+            <el-descriptions-item label="公司名称">{{ detailData.customer.company }}</el-descriptions-item>
+            <el-descriptions-item label="行业">{{ detailData.customer.industry }}</el-descriptions-item>
+            <el-descriptions-item label="部门">{{ detailData.customer.department }}</el-descriptions-item>
+            <el-descriptions-item label="职位">{{ detailData.customer.duties }}</el-descriptions-item>
+            <el-descriptions-item label="电话">{{ detailData.customer.tel_phone }}</el-descriptions-item>
+            <el-descriptions-item label="手机号">{{ detailData.customer.mobile_phone }}</el-descriptions-item>
+            <el-descriptions-item label="微信号">{{ detailData.customer.wechat }}</el-descriptions-item>
+            <el-descriptions-item label="抖音号">{{ detailData.customer.dy }}</el-descriptions-item>
+            <el-descriptions-item label="邮箱号">{{ detailData.customer.email }}</el-descriptions-item>
+            <el-descriptions-item label="邮箱号">{{ detailData.customer.email }}</el-descriptions-item>
+            <el-descriptions-item label="客户来源">{{ detailData.customer.from_text }}</el-descriptions-item>
+            <el-descriptions-item label="客户类型">{{ detailData.customer.type_text }}</el-descriptions-item>
+            <el-descriptions-item label="联系地址">{{ detailData.customer.address }}</el-descriptions-item>
+            <el-descriptions-item label="跟进状态">
+              <el-tag size="small">{{ detailData.customer.follow_status_text }}</el-tag>
+            </el-descriptions-item>
+          </el-descriptions>
+        </el-tab-pane>
+      </el-tabs>
+    </el-dialog>
+
+  </div>
+</template>
+
+<script>
+import { getList } from '@/api/customer/opportunity'
+import { checkRoleAction, getRoleAction } from '@/utils/util'
+import Pagination from '@/components/Pagination'
+import { mapGetters } from 'vuex'
+import waves from '@/directive/waves/index.js'
+
+export default {
+  components: { Pagination },
+  directives: {
+    waves
+  },
+  data() {
+    return {
+      listLoading: false,
+      total: 0,
+      listQuery: {
+        page: 1,
+        per_page: 20,
+        expect_date: '',
+        customer_name: '',
+        customer_phone: '',
+        title: '',
+        id: '',
+        include: 'customer'
+      },
+      data: [],
+      productTypeOptions: [],
+      estimateStatusOptions: [],
+
+      detailData: {
+        opportunity: {},
+        customer: {},
+        follow: {
+          data: []
+        }
+      },
+      dialogDetail: false,
+      activeDetailTab: 'opportunity',
+      detailLoading: false
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'menus'
+    ]),
+    role_action() {
+      const action = ['add', 'edit', 'detail']
+      return getRoleAction(this.menus, action, this.$route)
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    getList() {
+      this.listLoading = true
+      getList(this.listQuery).then((res) => {
+        const { data, meta } = res
+        this.data = data
+        this.total = meta.pagination.total
+      }).finally(() => {
+        this.listLoading = false
+      })
+    },
+    handleAdd() {
+      if (!checkRoleAction('add', this.role_action)) return
+
+      const parentMatchedRoute = this.$route.matched[this.$route.matched.length - 2]
+      const parent_name = parentMatchedRoute.name
+      this.$router.push({ path: parentMatchedRoute.path + '/' + parent_name + '.add' })
+    },
+    handleDetail(scope) {
+      if (!checkRoleAction('detail', this.role_action)) return
+
+      this.activeDetailTab = 'opportunity'
+      this.detailData.opportunity = scope.row
+      this.detailData.customer = scope.row.customer.data
+      this.dialogDetail = true
+    },
+    handleEdit(scope) {
+      if (!checkRoleAction('edit', this.role_action)) return
+
+      const parentMatchedRoute = this.$route.matched[this.$route.matched.length - 2]
+      const parent_name = parentMatchedRoute.name
+      const row = scope.row
+      row.product_type = row.product_type ? row.product_type : ''
+      row.estimate_status = row.estimate_status ? row.estimate_status : ''
+      this.$router.push({
+        name: parent_name + '.edit',
+        params: { row: row }
+      })
+    },
+    handleFilter() {
+      this.listQuery.page = 1
+      this.getList()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.app-container {
+  .roles-table {
+    margin-top: 30px;
+  }
+  .permission-tree {
+    margin-bottom: 30px;
+  }
+}
+.filter-container{
+  margin: 15px 0;
+}
+</style>

src/views/customer/private/add.vue

+<template>
+  <div class="app-container">
+    <div class="button-container">
+      <el-button :loading="loading" type="success" @click="submitForm">
+        提交
+      </el-button>
+    </div>
+    <el-form ref="addForm" label-width="80px" :model="form" :rules="rules">
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>基本信息</span>
+        </div>
+        <el-row>
+          <el-col :span="8">
+            <el-form-item prop="name" label-width="100px" label="客户名称:">
+              <el-input v-model="form.name" placeholder="客户名称" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item prop="company" label-width="100px" label="公司名称:">
+              <el-input v-model="form.company" placeholder="公司名称" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item prop="industry" label-width="100px" label="行业:">
+              <el-input v-model="form.industry" placeholder="行业" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="8">
+            <el-form-item prop="department" label-width="100px" label="部门:">
+              <el-input v-model="form.department" placeholder="部门" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item prop="duties" label-width="100px" label="职位:">
+              <el-input v-model="form.duties" placeholder="职位" />
+            </el-form-item>
+          </el-col>
+
+        </el-row>
+        <el-row>
+          <el-col :span="8">
+            <el-form-item prop="from" label-width="100px" label="客户来源:">
+              <el-select v-model="form.from" placeholder="客户来源" clearable class="filter-item" style="width: 130px">
+                <el-option v-for="item in fromOptions" :key="item.key" :label="item.name" :value="item.id" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item prop="type" label-width="100px" label="客户类型:">
+              <el-select v-model="form.type" placeholder="客户类型" clearable class="filter-item" style="width: 130px">
+                <el-option v-for="item in typeOptions" :key="item.key" :label="item.name" :value="item.id" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+      </el-card>
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>联系方式</span>
+        </div>
+        <el-row>
+          <el-col :span="8">
+            <el-form-item prop="tel_phone" label-width="100px" label="电话:">
+              <el-input v-model="form.tel_phone" placeholder="电话" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item prop="mobile_phone" label-width="100px" label="手机号:">
+              <el-input v-model="form.mobile_phone" placeholder="手机号" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item prop="wechat" label-width="100px" label="微信号:">
+              <el-input v-model="form.wechat" placeholder="微信号" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="8">
+            <el-form-item prop="dy" label-width="100px" label="抖音号:">
+              <el-input v-model="form.dy" placeholder="抖音号" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item prop="email" label-width="100px" label="邮箱:">
+              <el-input v-model="form.email" placeholder="邮箱" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item prop="address" label-width="100px" label="地址:">
+              <el-input v-model="form.address" placeholder="地址" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+      </el-card>
+    </el-form>
+  </div>
+
+</template>
+
+<script>
+import { getOption, addCustomer } from '@/api/customer/private'
+import { Message } from 'element-ui' // 粘性header组件
+
+export default {
+  components: { },
+
+  data() {
+    return {
+      form: {
+        'name': '',
+        'company': '',
+        'industry': '',
+        'department': '',
+        'duties': '',
+        'tel_phone': '',
+        'mobile_phone': '',
+        'wechat': '',
+        'dy': '',
+        'email': '',
+        'address': '',
+        'follow_status': '',
+        'from': '',
+        'type': ''
+      },
+      rules: {
+        name: [{ required: true, message: '客户名称不能为空', trigger: 'blur' }],
+        company: [{ required: true, message: '公司名称不能为空', trigger: 'blur' }],
+        industry: [{ required: true, message: '行业不能为空', trigger: 'blur' }],
+        department: [{ required: true, message: '部门不能为空', trigger: 'blur' }],
+        duties: [{ required: true, message: '职位不能为空', trigger: 'blur' }]
+      },
+      loading: false,
+      typeOptions: [],
+      fromOptions: [],
+      followStatusOptions: []
+    }
+  },
+  created() {
+    this.getOption()
+  },
+  methods: {
+    getOption() {
+      getOption().then((res) => {
+        const { type_maps, from_maps, follow_status_maps } = res.data
+        this.typeOptions = type_maps
+        this.fromOptions = from_maps
+        this.followStatusOptions = follow_status_maps
+      })
+    },
+
+    submitForm() {
+      this.$refs['addForm'].validate((valid, fields) => {
+        if (valid) {
+          this.loading = true
+          addCustomer(this.form).then(() => {
+            Message.success('添加成功')
+            this.$refs['addForm'].clearValidate()
+            this.$refs['addForm'].resetFields()
+          }).finally(() => { this.loading = false })
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.button-container{
+  display: flex;
+  justify-content: space-between;
+}
+.box-card{
+  margin: 15px 0;
+}
+</style>

src/views/customer/private/components/EditPrivate.vue

+<template>
+  <div>
+    <el-form ref="form" :model="from" :rules="rules" label-width="80px" label-position="left">
+      <el-form-item label="营业执照" prop="business_license">
+        <el-input v-model="from.business_license" placeholder="营业执照" />
+      </el-form-item>
+      <el-form-item label="身份证" prop="identity">
+        <el-input v-model="from.identity" placeholder="身份证" />
+      </el-form-item>
+      <el-form-item label="银行账户" prop="bank_account">
+        <el-input v-model="from.bank_account" placeholder="银行账户" />
+      </el-form-item>
+      <el-form-item label="手机号码" prop="mobile_phone">
+        <el-input v-model="from.mobile_phone" placeholder="手机号码" />
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import { editCustomerPrivate } from '@/api/customer/private'
+
+export default {
+  name: 'EditPrivate',
+  props: {
+    from: {
+      type: Object,
+      default: null
+    }
+  },
+  data() {
+    return {
+      rules: { }
+    }
+  },
+  methods: {
+    validate() {
+      this.$refs['form'].validate((valid, fields) => {
+        return !!valid
+      }).then((valid) => {
+        return !!valid
+      })
+      return false
+    },
+    submit() {
+      return new Promise((resolve, reject) => {
+        editCustomerPrivate(this.form.id, this.form).then(() => {
+          resolve()
+        }).catch((e) => { reject(e) })
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/customer/private/edit.vue

+<template>
+  <div class="app-container">
+    <div class="button-container">
+      <el-button @click="$router.go(-1)">
+        返回
+      </el-button>
+      <el-button :loading="loading" type="success" @click="submitForm">
+        提交
+      </el-button>
+    </div>
+    <el-form ref="editForm" label-width="80px" :model="form" :rules="rules">
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>基本信息</span>
+        </div>
+        <el-row>
+          <el-col :span="8">
+            <el-form-item prop="name" label-width="100px" label="客户名称:">
+              <el-input v-model="form.name" placeholder="客户名称" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item prop="company" label-width="100px" label="公司名称:">
+              <el-input v-model="form.company" placeholder="公司名称" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item prop="industry" label-width="100px" label="行业:">
+              <el-input v-model="form.industry" placeholder="行业" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="8">
+            <el-form-item prop="department" label-width="100px" label="部门:">
+              <el-input v-model="form.department" placeholder="部门" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item prop="duties" label-width="100px" label="职位:">
+              <el-input v-model="form.duties" placeholder="职位" />
+            </el-form-item>
+          </el-col>
+
+        </el-row>
+        <el-row>
+          <el-col :span="8">
+            <el-form-item prop="from" label-width="100px" label="客户来源:">
+              <el-select v-model="form.from" placeholder="客户来源" clearable class="filter-item" style="width: 130px">
+                <el-option v-for="item in fromOptions" :key="item.key" :label="item.name" :value="item.id" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item prop="type" label-width="100px" label="客户类型:">
+              <el-select v-model="form.type" placeholder="客户类型" clearable class="filter-item" style="width: 130px">
+                <el-option v-for="item in typeOptions" :key="item.key" :label="item.name" :value="item.id" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+      </el-card>
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>联系方式</span>
+        </div>
+        <el-row>
+          <el-col :span="8">
+            <el-form-item prop="tel_phone" label-width="100px" label="电话:">
+              <el-input v-model="form.tel_phone" placeholder="电话" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item prop="mobile_phone" label-width="100px" label="手机号:">
+              <el-input v-model="form.mobile_phone" placeholder="手机号" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item prop="wechat" label-width="100px" label="微信号:">
+              <el-input v-model="form.wechat" placeholder="微信号" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="8">
+            <el-form-item prop="dy" label-width="100px" label="抖音号:">
+              <el-input v-model="form.dy" placeholder="抖音号" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item prop="email" label-width="100px" label="邮箱:">
+              <el-input v-model="form.email" placeholder="邮箱" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item prop="address" label-width="100px" label="地址:">
+              <el-input v-model="form.address" placeholder="地址" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+      </el-card>
+    </el-form>
+  </div>
+
+</template>
+
+<script>
+import { getOption, editCustomer } from '@/api/customer/private'
+import { Message } from 'element-ui' // 粘性header组件
+
+export default {
+  components: { },
+
+  data() {
+    return {
+      form: {
+        'name': '',
+        'company': '',
+        'industry': '',
+        'department': '',
+        'duties': '',
+        'tel_phone': '',
+        'mobile_phone': '',
+        'wechat': '',
+        'dy': '',
+        'email': '',
+        'address': '',
+        'follow_status': '',
+        'from': '',
+        'type': ''
+      },
+      rules: {
+        name: [{ required: true, message: '客户名称不能为空', trigger: 'blur' }],
+        company: [{ required: true, message: '公司名称不能为空', trigger: 'blur' }],
+        industry: [{ required: true, message: '行业不能为空', trigger: 'blur' }],
+        department: [{ required: true, message: '部门不能为空', trigger: 'blur' }],
+        duties: [{ required: true, message: '职位不能为空', trigger: 'blur' }]
+      },
+      loading: false,
+      typeOptions: [],
+      fromOptions: [],
+      followStatusOptions: []
+    }
+  },
+  created() {
+    this.form = Object.assign({}, this.$route.params && this.$route.params.row)
+    if (!this.form.id) {
+      this.$router.push({ path: '/' })
+    }
+    this.getOption()
+  },
+  beforeRouteLeave(to, from, next) {
+    this.$store.dispatch('tagsView/delView', from)
+    next()
+  },
+  methods: {
+    getOption() {
+      getOption().then((res) => {
+        const { type_maps, from_maps, follow_status_maps } = res.data
+        this.typeOptions = type_maps
+        this.fromOptions = from_maps
+        this.followStatusOptions = follow_status_maps
+      })
+    },
+
+    submitForm() {
+      this.$refs['editForm'].validate((valid, fields) => {
+        if (valid) {
+          this.loading = true
+          editCustomer(this.form.id, this.form).then(() => {
+            Message.success('编辑成功')
+            this.$router.go(-1)
+          }).finally(() => { this.loading = false })
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.button-container{
+  display: flex;
+  justify-content: space-between;
+}
+.box-card{
+  margin: 15px 0;
+}
+</style>

src/views/customer/private/import.vue

+<template>
+  <div class="app-container">
+    <upload-excel-component :on-success="handleSuccess" :before-upload="beforeUpload" />
+    <el-button v-waves :loading="downloadLoading" class="filter-item" type="primary" icon="el-icon-download" @click="handleImportDemo">
+      模板下载
+    </el-button>
+    <el-button v-waves :loading="loading" class="filter-item" type="primary" icon="el-icon-upload2" @click="handleImport">
+      导入
+    </el-button>
+    <el-table max-height="500" :data="excelData" style="width: 100%;margin-top:30px;" border @selection-change="handleSelectionChange">
+      <el-table-column
+        fixed="left"
+        align="center"
+        type="selection"
+        width="55"
+      />
+      <el-table-column fixed="left" width="100" align="center" label="客户名称">
+        <template slot-scope="scope">
+          {{ scope.row.name }}
+        </template>
+      </el-table-column>
+      <el-table-column fixed="left" width="100" align="center" label="公司名称">
+        <template slot-scope="scope">
+          {{ scope.row.company }}
+        </template>
+      </el-table-column>
+      <el-table-column width="100" align="center" label="行业">
+        <template slot-scope="scope">
+          {{ scope.row.industry }}
+        </template>
+      </el-table-column>
+      <el-table-column width="100" align="center" label="部门">
+        <template slot-scope="scope">
+          {{ scope.row.department }}
+        </template>
+      </el-table-column>
+      <el-table-column width="100" align="center" label="职位">
+        <template slot-scope="scope">
+          {{ scope.row.duties }}
+        </template>
+      </el-table-column>
+      <el-table-column width="150" align="center" label="电话">
+        <template slot-scope="scope">
+          {{ scope.row.tel_phone }}
+        </template>
+      </el-table-column>
+      <el-table-column width="150" align="center" label="手机号码">
+        <template slot-scope="scope">
+          {{ scope.row.mobile_phone }}
+        </template>
+      </el-table-column>
+      <el-table-column width="200" align="center" label="微信号">
+        <template slot-scope="scope">
+          {{ scope.row.wechat }}
+        </template>
+      </el-table-column>
+      <el-table-column width="200" align="center" label="抖音号">
+        <template slot-scope="scope">
+          {{ scope.row.dy }}
+        </template>
+      </el-table-column>
+      <el-table-column width="200" align="center" label="邮箱">
+        <template slot-scope="scope">
+          {{ scope.row.email }}
+        </template>
+      </el-table-column>
+      <el-table-column width="300" align="center" label="地址">
+        <template slot-scope="scope">
+          {{ scope.row.address }}
+        </template>
+      </el-table-column>
+      <el-table-column width="100" align="center" label="跟进状态">
+        <template slot-scope="scope">
+          {{ scope.row.follow_status_text }}
+        </template>
+      </el-table-column>
+      <el-table-column width="100" align="center" label="客户来源">
+        <template slot-scope="scope">
+          {{ scope.row.from_text }}
+        </template>
+      </el-table-column>
+      <el-table-column width="100" align="center" label="客户类型">
+        <template slot-scope="scope">
+          {{ scope.row.type_text }}
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+import { getOption, addImport } from '@/api/customer/private'
+import UploadExcelComponent from '@/components/UploadExcel/index.vue'
+import { formatImportData } from '@/utils'
+import waves from '@/directive/waves/index.js'
+import { Message } from 'element-ui' // 水波纹指令
+
+export default {
+  components: { UploadExcelComponent },
+  directives: {
+    waves
+  },
+  data() {
+    return {
+      downloadLoading: false,
+      importDemo: {
+        filename: '客户列表demo',
+        autoWidth: true,
+        bookType: 'xlsx'
+      },
+      loading: false,
+      typeOptions: [],
+      fromOptions: [],
+      followStatusOptions: [],
+      excelData: [],
+      multipleSelection: [],
+      headerFiled: {
+        'name': '客户名称',
+        'company': '公司名称',
+        'industry': '行业',
+        'department': '部门',
+        'duties': '职位',
+        'tel_phone': '电话',
+        'mobile_phone': '手机号码',
+        'wechat': '微信号',
+        'dy': '抖音号',
+        'email': '邮箱',
+        'address': '地址',
+        'follow_status': '跟进状态',
+        'from': '客户来源',
+        'type': '客户类型'
+      }
+    }
+  },
+  computed: {
+  },
+  created() {
+    this.getOption()
+  },
+  methods: {
+    getOption() {
+      getOption().then((res) => {
+        const { type_maps, from_maps, follow_status_maps } = res.data
+        this.typeOptions = type_maps
+        this.fromOptions = from_maps
+        this.followStatusOptions = follow_status_maps
+      })
+    },
+    handleSelectionChange(val) {
+      this.multipleSelection = val
+    },
+    handleImport() {
+      if (this.multipleSelection.length <= 0) {
+        Message.warning('请选择要导入的数据')
+        return
+      }
+      this.loading = true
+
+      addImport({ data: this.multipleSelection }).then(() => {
+        this.multipleSelection = []
+        this.excelData = []
+        Message.success('导入成功')
+      }).finally(() => {
+        this.loading = false
+      })
+    },
+    handleImportDemo() {
+      this.downloadLoading = true
+      import('@/vendor/Export2Excel').then(excel => {
+        const tHeader = Object.values(this.headerFiled)
+        const data = []
+        excel.export_json_to_excel({
+          header: tHeader,
+          data,
+          filename: this.importDemo.filename,
+          autoWidth: this.importDemo.autoWidth,
+          bookType: this.importDemo.bookType
+        })
+        this.downloadLoading = false
+      })
+    },
+    beforeUpload(file) {
+      const isLt1M = file.size / 1024 / 1024 < 1
+
+      if (isLt1M) {
+        return true
+      }
+
+      this.$message({
+        message: 'Please do not upload files larger than 1m in size.',
+        type: 'warning'
+      })
+      return false
+    },
+    handleSuccess({ results, header }) {
+      const data = formatImportData(results, this.headerFiled)
+
+      data.forEach((item) => {
+        const typeOption = this.typeOptions.find((option) => option.name === item.type)
+        if (typeOption) {
+          item.type = typeOption.id
+          item.type_text = typeOption.name
+        } else {
+          item.type = ''
+          item.type_text = ''
+        }
+
+        const fromOption = this.fromOptions.find((option) => option.name === item.from)
+        if (fromOption) {
+          item.from = fromOption.id
+          item.from_text = fromOption.name
+        } else {
+          item.from = ''
+          item.from_text = ''
+        }
+
+        const followStatusOption = this.followStatusOptions.find((option) => option.name === item.follow_status)
+        if (followStatusOption) {
+          item.follow_status = followStatusOption.id
+          item.follow_status_text = followStatusOption.name
+        } else {
+          item.follow_status = ''
+          item.follow_status_text = ''
+        }
+      })
+
+      this.excelData = data
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.app-container {
+  .roles-table {
+    margin-top: 30px;
+  }
+  .permission-tree {
+    margin-bottom: 30px;
+  }
+}
+</style>

src/views/customer/private/index.vue

+<template>
+  <div class="app-container">
+    <div class="filter-container">
+      <el-input v-model="listQuery.name" placeholder="客户名称" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
+      <el-select v-model="listQuery.follow_status" placeholder="跟进状态" clearable style="width: 130px" class="filter-item">
+        <el-option v-for="item in followStatusOptions" :key="item.id" :label="item.name" :value="item.id" />
+      </el-select>
+      <el-select v-model="listQuery.type" placeholder="客户类型" clearable class="filter-item" style="width: 130px">
+        <el-option v-for="item in typeOptions" :key="item.id" :label="item.name" :value="item.id" />
+      </el-select>
+      <el-select v-model="listQuery.from" placeholder="客户来源" clearable class="filter-item" style="width: 130px">
+        <el-option v-for="item in fromOptions" :key="item.id" :label="item.name" :value="item.id" />
+      </el-select>
+
+      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
+        搜索
+      </el-button>
+    </div>
+    <el-button :loading="listLoading" icon="el-icon-refresh" @click="getList" />
+
+    <!--    <el-button class="filter-item" type="primary" @click="handleAdd">-->
+    <!--      添加-->
+    <!--    </el-button>-->
+    <!--    <el-button v-waves class="filter-item" type="primary" @click="handleImport">-->
+    <!--      导入-->
+    <!--    </el-button>-->
+    <el-button :loading="loading" class="filter-item" type="danger" @click="handleMultipleBackPublic">
+      退回公海
+    </el-button>
+
+    <el-table v-loading="listLoading" :data="data" style="width: 100%;margin-top:30px;" border @selection-change="handleSelectionChange">
+      <el-table-column
+        fixed="left"
+        align="center"
+        type="selection"
+        width="55"
+      />
+      <el-table-column fixed="left" width="100" align="center" label="ID">
+        <template slot-scope="scope">
+          {{ scope.row.id }}
+        </template>
+      </el-table-column>
+      <el-table-column fixed="left" width="100" align="center" label="客户名称">
+        <template slot-scope="scope">
+          {{ scope.row.name }}
+        </template>
+      </el-table-column>
+      <el-table-column fixed="left" width="100" align="center" label="公司名称">
+        <template slot-scope="scope">
+          {{ scope.row.company }}
+        </template>
+      </el-table-column>
+      <el-table-column width="100" align="center" label="行业">
+        <template slot-scope="scope">
+          {{ scope.row.industry }}
+        </template>
+      </el-table-column>
+      <el-table-column width="100" align="center" label="部门">
+        <template slot-scope="scope">
+          {{ scope.row.department }}
+        </template>
+      </el-table-column>
+      <el-table-column width="100" align="center" label="职位">
+        <template slot-scope="scope">
+          {{ scope.row.duties }}
+        </template>
+      </el-table-column>
+      <el-table-column width="150" align="center" label="电话">
+        <template slot-scope="scope">
+          {{ scope.row.tel_phone }}
+        </template>
+      </el-table-column>
+      <el-table-column width="150" align="center" label="手机号码">
+        <template slot-scope="scope">
+          {{ scope.row.mobile_phone }}
+        </template>
+      </el-table-column>
+      <el-table-column width="200" align="center" label="微信号">
+        <template slot-scope="scope">
+          {{ scope.row.wechat }}
+        </template>
+      </el-table-column>
+      <el-table-column width="200" align="center" label="抖音号">
+        <template slot-scope="scope">
+          {{ scope.row.dy }}
+        </template>
+      </el-table-column>
+      <el-table-column width="200" align="center" label="邮箱">
+        <template slot-scope="scope">
+          {{ scope.row.email }}
+        </template>
+      </el-table-column>
+      <el-table-column width="300" align="center" label="地址">
+        <template slot-scope="scope">
+          {{ scope.row.address }}
+        </template>
+      </el-table-column>
+      <el-table-column width="100" align="center" label="跟进状态">
+        <template slot-scope="scope">
+          {{ scope.row.follow_status_text }}
+        </template>
+      </el-table-column>
+      <el-table-column width="100" align="center" label="客户来源">
+        <template slot-scope="scope">
+          {{ scope.row.from_text }}
+        </template>
+      </el-table-column>
+      <el-table-column width="100" align="center" label="客户类型">
+        <template slot-scope="scope">
+          {{ scope.row.type_text }}
+        </template>
+      </el-table-column>
+      <el-table-column fixed="right" width="500" align="center" label="操作">
+        <template slot-scope="scope">
+          <el-button size="small" @click="handleDetail(scope)">详情</el-button>
+          <el-button type="primary" size="small" @click="handleEdit(scope)">编辑</el-button>
+          <el-button type="primary" size="small" @click="handleEditPrivate(scope)">上传资料</el-button>
+          <el-button type="primary" size="small" @click="handleFollow(scope)">写跟进</el-button>
+          <el-button :loading="loading" type="danger" size="small" @click="handleBackPublic(scope)">退回公海</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.per_page" @pagination="getList" />
+
+    <!-- 详情   -->
+    <el-dialog :visible.sync="dialogDetail" title="详细信息">
+      <el-tabs v-model="activeDetailTab" v-loading="detailLoading" :v-if="detailData">
+        <el-tab-pane label="客户信息" name="detail">
+          <el-descriptions title="">
+            <el-descriptions-item label="客户名称">{{ detailData.name }}</el-descriptions-item>
+            <el-descriptions-item label="公司名称">{{ detailData.company }}</el-descriptions-item>
+            <el-descriptions-item label="行业">{{ detailData.industry }}</el-descriptions-item>
+            <el-descriptions-item label="部门">{{ detailData.department }}</el-descriptions-item>
+            <el-descriptions-item label="职位">{{ detailData.duties }}</el-descriptions-item>
+            <el-descriptions-item label="电话">{{ detailData.tel_phone }}</el-descriptions-item>
+            <el-descriptions-item label="手机号">{{ detailData.mobile_phone }}</el-descriptions-item>
+            <el-descriptions-item label="微信号">{{ detailData.wechat }}</el-descriptions-item>
+            <el-descriptions-item label="抖音号">{{ detailData.dy }}</el-descriptions-item>
+            <el-descriptions-item label="邮箱号">{{ detailData.email }}</el-descriptions-item>
+            <el-descriptions-item label="邮箱号">{{ detailData.email }}</el-descriptions-item>
+            <el-descriptions-item label="客户来源">{{ detailData.from_text }}</el-descriptions-item>
+            <el-descriptions-item label="客户类型">{{ detailData.type_text }}</el-descriptions-item>
+            <el-descriptions-item label="联系地址">{{ detailData.address }}</el-descriptions-item>
+            <el-descriptions-item label="跟进状态">
+              <el-tag size="small">{{ detailData.follow_status_text }}</el-tag>
+            </el-descriptions-item>
+          </el-descriptions>
+        </el-tab-pane>
+        <el-tab-pane label="跟进记录" name="follow_info">
+          <el-timeline>
+            <el-timeline-item
+              v-for="(follow, index) in detailData.follow.data"
+              :key="index"
+              :timestamp="follow.follow_time"
+              placement="top"
+            >
+              <el-card>
+                <h4>跟进内容： {{ follow.content }}</h4>
+                <p>跟进类型： {{ follow.type_text }}</p>
+                <p>跟进状态： {{ follow.status_text }}</p>
+                <p>跟进时间： {{ follow.follow_time }}</p>
+                <p>下次跟进时间： {{ follow.next_follow_time }}</p>
+              </el-card>
+            </el-timeline-item>
+          </el-timeline>
+        </el-tab-pane>
+      </el-tabs>
+    </el-dialog>
+
+    <!-- 上传资料   -->
+    <el-dialog :visible.sync="dialogEditPrivate" title="上传资料">
+      <el-form ref="form" :model="formEditPrivate" label-width="80px" label-position="left">
+        <el-form-item label="营业执照" prop="business_license">
+          <el-input v-model="formEditPrivate.business_license" placeholder="营业执照" />
+        </el-form-item>
+        <el-form-item label="身份证" prop="identity">
+          <el-input v-model="formEditPrivate.identity" placeholder="身份证" />
+        </el-form-item>
+        <el-form-item label="银行账户" prop="bank_account">
+          <el-input v-model="formEditPrivate.bank_account" placeholder="银行账户" />
+        </el-form-item>
+        <el-form-item label="手机号码" prop="mobile_phone">
+          <el-input v-model="formEditPrivate.mobile_phone" placeholder="手机号码" />
+        </el-form-item>
+      </el-form>
+      <div style="text-align:right;">
+        <el-button type="danger" @click="dialogEditPrivate=false">取消</el-button>
+        <el-button :loading="loading" type="primary" @click="confirmEditPrivate">提交</el-button>
+      </div>
+    </el-dialog>
+
+    <!-- 写跟进   -->
+    <el-dialog :visible.sync="dialogFollow" title="写跟进">
+      <el-tabs v-model="activeFollowTab" v-loading="followListLoading">
+        <el-tab-pane label="写跟进" name="follow_form">
+          <el-form ref="formFollow" :model="formFollow" :rules="formFollowRules" label-width="120px" label-position="left">
+            <el-form-item label="跟进类型" prop="type">
+              <el-select v-model="formFollow.type" placeholder="跟进类型" clearable class="filter-item" style="width: 130px">
+                <el-option v-for="item in followTypeOptions" :key="item.id" :label="item.name" :value="item.id" />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="跟进状态" prop="status">
+              <el-select v-model="formFollow.status" placeholder="跟进状态" clearable class="filter-item">
+                <el-option v-for="item in followStatusOptions" :key="item.id" :label="item.name" :value="item.id" />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="下次跟进时间" prop="next_follow_time">
+              <el-date-picker
+                v-model="formFollow.next_follow_time"
+                :value-format="'yyyy-MM-dd HH:mm:ss'"
+                type="datetime"
+                placeholder="选择日期时间"
+              />
+            </el-form-item>
+            <el-form-item label="内容" prop="content">
+              <el-input v-model="formFollow.content" placeholder="跟进内容" />
+            </el-form-item>
+          </el-form>
+        </el-tab-pane>
+        <el-tab-pane label="跟进记录" name="follow_info">
+          <el-timeline>
+            <el-timeline-item
+              v-for="(follow, index) in followList"
+              :key="index"
+              :timestamp="follow.follow_time"
+              placement="top"
+            >
+              <el-card>
+                <h4>跟进内容： {{ follow.content }}</h4>
+                <p>跟进类型： {{ follow.type_text }}</p>
+                <p>跟进状态： {{ follow.status_text }}</p>
+                <p>跟进时间： {{ follow.follow_time }}</p>
+                <p>下次跟进时间： {{ follow.next_follow_time }}</p>
+              </el-card>
+            </el-timeline-item>
+          </el-timeline>
+        </el-tab-pane>
+      </el-tabs>
+      <div style="text-align:right;">
+        <el-button type="danger" @click="dialogFollow=false">取消</el-button>
+        <el-button :loading="loading" type="primary" @click="confirmFollow">提交</el-button>
+      </div>
+    </el-dialog>
+
+  </div>
+</template>
+
+<script>
+import { editCustomerPrivate, getList, getOption, backPublic, followCustomer, followList } from '@/api/customer/private'
+import { checkRoleAction, getRoleAction } from '@/utils/util'
+import Pagination from '@/components/Pagination'
+import { mapGetters } from 'vuex'
+import waves from '@/directive/waves/index.js'
+import { Message } from 'element-ui' // 水波纹指令
+
+export default {
+  components: { Pagination },
+  directives: {
+    waves
+  },
+  data() {
+    return {
+      listLoading: false,
+      total: 0,
+      listQuery: {
+        page: 1,
+        per_page: 20,
+        follow_status: '',
+        type: '',
+        from: '',
+        include: 'follow'
+      },
+      data: [],
+      typeOptions: [],
+      fromOptions: [],
+      followStatusOptions: [],
+      followTypeOptions: [],
+      dialogVisible: false,
+      detailData: {
+        follow: {
+          data: []
+        }
+      },
+      dialogDetail: false,
+      detailLoading: false,
+      activeDetailTab: 'detail',
+      dialogEditPrivate: false,
+      formEditPrivate: {
+        business_license: '',
+        identity: '',
+        bank_account: '',
+        mobile_phone: ''
+      },
+      loading: false,
+      multipleSelection: [],
+      dialogFollow: false,
+      activeFollowTab: 'follow_form',
+      followListLoading: false,
+      followList: [],
+      formFollow: {
+        type: '',
+        status: '',
+        next_follow_time: '',
+        content: ''
+      },
+      formFollowRules: {
+        type: [{ required: true, message: '跟进类型不能为空', trigger: 'blur' }],
+        status: [{ required: true, message: '跟进状态不能为空', trigger: 'blur' }],
+        next_follow_time: [{ required: true, message: '下次跟进时间不能为空', trigger: 'blur' }],
+        content: [{ required: true, message: '跟进内容不能为空', trigger: 'blur' }]
+
+      }
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'menus'
+    ]),
+    role_action() {
+      const action = ['add', 'edit', 'import', 'detail', 'follow', 'edit_private', 'receive_private', 'back_public']
+      return getRoleAction(this.menus, action, this.$route)
+    }
+  },
+  created() {
+    this.getList()
+    this.getOption()
+  },
+  methods: {
+    getList() {
+      this.listLoading = true
+      getList(this.listQuery).then((res) => {
+        const { data, meta } = res
+        this.data = data
+        this.total = meta.pagination.total
+      }).finally(() => {
+        this.listLoading = false
+      })
+    },
+    getFollowList(id) {
+      this.followListLoading = true
+      followList(id).then((res) => {
+        const { data } = res
+        this.followList = data
+      }).finally(() => {
+        this.followListLoading = false
+      })
+    },
+    getOption() {
+      getOption().then((res) => {
+        const { type_maps, from_maps, follow_status_maps, follow_type_maps } = res.data
+        this.typeOptions = type_maps
+        this.fromOptions = from_maps
+        this.followStatusOptions = follow_status_maps
+        this.followTypeOptions = follow_type_maps
+      })
+    },
+    handleSelectionChange(val) {
+      this.multipleSelection = val
+    },
+    handleAdd() {
+      if (!checkRoleAction('add', this.role_action)) return
+
+      const parentMatchedRoute = this.$route.matched[this.$route.matched.length - 2]
+      const parent_name = parentMatchedRoute.name
+      this.$router.push({ path: parentMatchedRoute.path + '/' + parent_name + '.add' })
+    },
+    handleDetail(scope) {
+      if (!checkRoleAction('detail', this.role_action)) return
+
+      this.activeDetailTab = 'detail'
+      this.detailData = scope.row
+      this.dialogDetail = true
+      // const id = scope.row.id
+      // this.detailLoading = true
+      // getDetail(id, { include: 'follow' }).then((res) => {
+      //   const { data } = res
+      //   this.detailData = data
+      // }).catch(() => {
+      //   this.dialogDetail = false
+      // }).finally(() => {
+      //   this.detailLoading = false
+      // })
+    },
+    handleEdit(scope) {
+      if (!checkRoleAction('edit', this.role_action)) return
+
+      const parentMatchedRoute = this.$route.matched[this.$route.matched.length - 2]
+      const parent_name = parentMatchedRoute.name
+      const row = scope.row
+      row.follow_status = row.follow_status ? row.follow_status : ''
+      row.from = row.from ? row.from : ''
+      row.type = row.type ? row.type : ''
+      this.$router.push({
+        name: parent_name + '.edit',
+        params: { row: row }
+      })
+    },
+    handleFollow(scope) {
+      if (!checkRoleAction('follow', this.role_action)) return
+
+      this.formFollow.id = scope.row.id
+      this.activeFollowTab = 'follow_form'
+      this.getFollowList(this.formFollow.id)
+      this.dialogFollow = true
+    },
+    handleEditPrivate(scope) {
+      if (!checkRoleAction('edit_private', this.role_action)) return
+
+      this.dialogEditPrivate = true
+      this.formEditPrivate = scope.row
+    },
+    confirmEditPrivate() {
+      this.loading = true
+      editCustomerPrivate(this.formEditPrivate.id, this.formEditPrivate).then(() => {
+        Message.success('编辑成功')
+        this.dialogEditPrivate = false
+      }).finally(() => { this.loading = false })
+    },
+    confirmFollow() {
+      this.$refs['formFollow'].validate((valid, fields) => {
+        if (valid) {
+          this.loading = true
+          followCustomer(this.formFollow.id, this.formFollow).then(() => {
+            Message.success('提交成功')
+            this.$refs['formFollow'].resetFields()
+            this.activeFollowTab = 'follow_info'
+            this.getFollowList(this.formFollow.id)
+          }).finally(() => { this.loading = false })
+        }
+      })
+    },
+    handleBackPublic({ $index, row }) {
+      if (!checkRoleAction('back_public', this.role_action)) return
+      this.$confirm('确定要退回公海嘛?', '退回公海', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+        .then(() => {
+          this.loading = true
+          backPublic({ id: [row.id] }).then(() => {
+            Message.success('操作成功')
+            this.getList()
+          }).finally(() => { this.loading = false })
+        })
+    },
+    handleMultipleBackPublic() {
+      if (!checkRoleAction('back_public', this.role_action)) return
+
+      if (this.multipleSelection.length <= 0) {
+        Message.warning('请选择操作的数据')
+        return
+      }
+
+      const ids = []
+      this.multipleSelection.forEach((item, index) => {
+        ids.push(item.id)
+      })
+
+      this.$confirm('确定要将所有选中项退回公海嘛?', '退回公海', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+        .then(() => {
+          this.loading = true
+          backPublic({ id: ids }).then(() => {
+            this.multipleSelection = []
+            Message.success('操作成功')
+            this.getList()
+          }).finally(() => { this.loading = false })
+        })
+    },
+    handleDelete({ $index, row }) {
+      if (!checkRoleAction('del', this.role_action)) return
+
+      this.$confirm('确定要删除嘛?', '删除', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+        .then(async() => {
+
+        })
+    },
+    handleImport() {
+      if (!checkRoleAction('import', this.role_action)) return
+
+      const parentMatchedRoute = this.$route.matched[this.$route.matched.length - 2]
+      const parent_name = parentMatchedRoute.name
+      this.$router.push({ path: parentMatchedRoute.path + '/' + parent_name + '.import' })
+    },
+    handleFilter() {
+      this.listQuery.page = 1
+      this.getList()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.app-container {
+  .roles-table {
+    margin-top: 30px;
+  }
+  .permission-tree {
+    margin-bottom: 30px;
+  }
+}
+.filter-container{
+  margin: 15px 0;
+}
+</style>

src/views/customer/public/add.vue

+<template>
+  <div class="app-container">
+    <div class="button-container">
+      <el-button :loading="loading" type="success" @click="submitForm">
+        提交
+      </el-button>
+    </div>
+    <el-form ref="addForm" label-width="80px" :model="form" :rules="rules">
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>基本信息</span>
+        </div>
+        <el-row>
+          <el-col :span="8">
+            <el-form-item prop="name" label-width="100px" label="客户名称:">
+              <el-input v-model="form.name" placeholder="客户名称" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item prop="company" label-width="100px" label="公司名称:">
+              <el-input v-model="form.company" placeholder="公司名称" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item prop="industry" label-width="100px" label="行业:">
+              <el-input v-model="form.industry" placeholder="行业" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="8">
+            <el-form-item prop="department" label-width="100px" label="部门:">
+              <el-input v-model="form.department" placeholder="部门" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item prop="duties" label-width="100px" label="职位:">
+              <el-input v-model="form.duties" placeholder="职位" />
+            </el-form-item>
+          </el-col>
+
+        </el-row>
+        <el-row>
+          <el-col :span="8">
+            <el-form-item prop="from" label-width="100px" label="客户来源:">
+              <el-select v-model="form.from" placeholder="客户来源" clearable class="filter-item" style="width: 130px">
+                <el-option v-for="item in fromOptions" :key="item.key" :label="item.name" :value="item.id" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item prop="type" label-width="100px" label="客户类型:">
+              <el-select v-model="form.type" placeholder="客户类型" clearable class="filter-item" style="width: 130px">
+                <el-option v-for="item in typeOptions" :key="item.key" :label="item.name" :value="item.id" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+      </el-card>
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>联系方式</span>
+        </div>
+        <el-row>
+          <el-col :span="8">
+            <el-form-item prop="tel_phone" label-width="100px" label="电话:">
+              <el-input v-model="form.tel_phone" placeholder="电话" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item prop="mobile_phone" label-width="100px" label="手机号:">
+              <el-input v-model="form.mobile_phone" placeholder="手机号" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item prop="wechat" label-width="100px" label="微信号:">
+              <el-input v-model="form.wechat" placeholder="微信号" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="8">
+            <el-form-item prop="dy" label-width="100px" label="抖音号:">
+              <el-input v-model="form.dy" placeholder="抖音号" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item prop="email" label-width="100px" label="邮箱:">
+              <el-input v-model="form.email" placeholder="邮箱" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item prop="address" label-width="100px" label="地址:">
+              <el-input v-model="form.address" placeholder="地址" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+      </el-card>
+    </el-form>
+  </div>
+
+</template>
+
+<script>
+import { getOption, addCustomer } from '@/api/customer/public'
+import { Message } from 'element-ui' // 粘性header组件
+
+export default {
+  components: { },
+
+  data() {
+    return {
+      form: {
+        'name': '',
+        'company': '',
+        'industry': '',
+        'department': '',
+        'duties': '',
+        'tel_phone': '',
+        'mobile_phone': '',
+        'wechat': '',
+        'dy': '',
+        'email': '',
+        'address': '',
+        'follow_status': '',
+        'from': '',
+        'type': ''
+      },
+      rules: {
+        name: [{ required: true, message: '客户名称不能为空', trigger: 'blur' }],
+        company: [{ required: true, message: '公司名称不能为空', trigger: 'blur' }],
+        industry: [{ required: true, message: '行业不能为空', trigger: 'blur' }],
+        department: [{ required: true, message: '部门不能为空', trigger: 'blur' }],
+        duties: [{ required: true, message: '职位不能为空', trigger: 'blur' }]
+      },
+      loading: false,
+      typeOptions: [],
+      fromOptions: [],
+      followStatusOptions: []
+    }
+  },
+  created() {
+    this.getOption()
+  },
+  methods: {
+    getOption() {
+      getOption().then((res) => {
+        const { type_maps, from_maps, follow_status_maps } = res.data
+        this.typeOptions = type_maps
+        this.fromOptions = from_maps
+        this.followStatusOptions = follow_status_maps
+      })
+    },
+
+    submitForm() {
+      this.$refs['addForm'].validate((valid, fields) => {
+        if (valid) {
+          this.loading = true
+          addCustomer(this.form).then(() => {
+            Message.success('添加成功')
+            this.$refs['addForm'].clearValidate()
+            this.$refs['addForm'].resetFields()
+          }).finally(() => { this.loading = false })
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.button-container{
+  display: flex;
+  justify-content: space-between;
+}
+.box-card{
+  margin: 15px 0;
+}
+</style>

src/views/customer/public/components/EditPrivate.vue

+<template>
+  <div>
+    <el-form ref="form" :model="from" :rules="rules" label-width="80px" label-position="left">
+      <el-form-item label="营业执照" prop="business_license">
+        <el-input v-model="from.business_license" placeholder="营业执照" />
+      </el-form-item>
+      <el-form-item label="身份证" prop="identity">
+        <el-input v-model="from.identity" placeholder="身份证" />
+      </el-form-item>
+      <el-form-item label="银行账户" prop="bank_account">
+        <el-input v-model="from.bank_account" placeholder="银行账户" />
+      </el-form-item>
+      <el-form-item label="手机号码" prop="mobile_phone">
+        <el-input v-model="from.mobile_phone" placeholder="手机号码" />
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import { editCustomerPrivate } from '@/api/customer/private'
+
+export default {
+  name: 'EditPrivate',
+  props: {
+    from: {
+      type: Object,
+      default: null
+    }
+  },
+  data() {
+    return {
+      rules: { }
+    }
+  },
+  methods: {
+    validate() {
+      this.$refs['form'].validate((valid, fields) => {
+        return !!valid
+      }).then((valid) => {
+        return !!valid
+      })
+      return false
+    },
+    submit() {
+      return new Promise((resolve, reject) => {
+        editCustomerPrivate(this.form.id, this.form).then(() => {
+          resolve()
+        }).catch((e) => { reject(e) })
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/customer/public/edit.vue

+<template>
+  <div class="app-container">
+    <div class="button-container">
+      <el-button @click="$router.go(-1)">
+        返回
+      </el-button>
+      <el-button :loading="loading" type="success" @click="submitForm">
+        提交
+      </el-button>
+    </div>
+    <el-form ref="editForm" label-width="80px" :model="form" :rules="rules">
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>基本信息</span>
+        </div>
+        <el-row>
+          <el-col :span="8">
+            <el-form-item prop="name" label-width="100px" label="客户名称:">
+              <el-input v-model="form.name" placeholder="客户名称" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item prop="company" label-width="100px" label="公司名称:">
+              <el-input v-model="form.company" placeholder="公司名称" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item prop="industry" label-width="100px" label="行业:">
+              <el-input v-model="form.industry" placeholder="行业" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="8">
+            <el-form-item prop="department" label-width="100px" label="部门:">
+              <el-input v-model="form.department" placeholder="部门" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item prop="duties" label-width="100px" label="职位:">
+              <el-input v-model="form.duties" placeholder="职位" />
+            </el-form-item>
+          </el-col>
+
+        </el-row>
+        <el-row>
+          <el-col :span="8">
+            <el-form-item prop="from" label-width="100px" label="客户来源:">
+              <el-select v-model="form.from" placeholder="客户来源" clearable class="filter-item" style="width: 130px">
+                <el-option v-for="item in fromOptions" :key="item.key" :label="item.name" :value="item.id" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item prop="type" label-width="100px" label="客户类型:">
+              <el-select v-model="form.type" placeholder="客户类型" clearable class="filter-item" style="width: 130px">
+                <el-option v-for="item in typeOptions" :key="item.key" :label="item.name" :value="item.id" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+      </el-card>
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>联系方式</span>
+        </div>
+        <el-row>
+          <el-col :span="8">
+            <el-form-item prop="tel_phone" label-width="100px" label="电话:">
+              <el-input v-model="form.tel_phone" placeholder="电话" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item prop="mobile_phone" label-width="100px" label="手机号:">
+              <el-input v-model="form.mobile_phone" placeholder="手机号" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item prop="wechat" label-width="100px" label="微信号:">
+              <el-input v-model="form.wechat" placeholder="微信号" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="8">
+            <el-form-item prop="dy" label-width="100px" label="抖音号:">
+              <el-input v-model="form.dy" placeholder="抖音号" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item prop="email" label-width="100px" label="邮箱:">
+              <el-input v-model="form.email" placeholder="邮箱" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item prop="address" label-width="100px" label="地址:">
+              <el-input v-model="form.address" placeholder="地址" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+      </el-card>
+    </el-form>
+  </div>
+
+</template>
+
+<script>
+import { getOption, editCustomer } from '@/api/customer/public'
+import { Message } from 'element-ui' // 粘性header组件
+
+export default {
+  components: { },
+
+  data() {
+    return {
+      form: {
+        'name': '',
+        'company': '',
+        'industry': '',
+        'department': '',
+        'duties': '',
+        'tel_phone': '',
+        'mobile_phone': '',
+        'wechat': '',
+        'dy': '',
+        'email': '',
+        'address': '',
+        'follow_status': '',
+        'from': '',
+        'type': ''
+      },
+      rules: {
+        name: [{ required: true, message: '客户名称不能为空', trigger: 'blur' }],
+        company: [{ required: true, message: '公司名称不能为空', trigger: 'blur' }],
+        industry: [{ required: true, message: '行业不能为空', trigger: 'blur' }],
+        department: [{ required: true, message: '部门不能为空', trigger: 'blur' }],
+        duties: [{ required: true, message: '职位不能为空', trigger: 'blur' }]
+      },
+      loading: false,
+      typeOptions: [],
+      fromOptions: [],
+      followStatusOptions: []
+    }
+  },
+  created() {
+    this.form = Object.assign({}, this.$route.params && this.$route.params.row)
+    if (!this.form.id) {
+      this.$router.push({ path: '/' })
+    }
+    this.getOption()
+  },
+  beforeRouteLeave(to, from, next) {
+    this.$store.dispatch('tagsView/delView', from)
+    next()
+  },
+  methods: {
+    getOption() {
+      getOption().then((res) => {
+        const { type_maps, from_maps, follow_status_maps } = res.data
+        this.typeOptions = type_maps
+        this.fromOptions = from_maps
+        this.followStatusOptions = follow_status_maps
+      })
+    },
+
+    submitForm() {
+      this.$refs['editForm'].validate((valid, fields) => {
+        if (valid) {
+          this.loading = true
+          editCustomer(this.form.id, this.form).then(() => {
+            Message.success('编辑成功')
+            this.$router.go(-1)
+          }).finally(() => { this.loading = false })
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.button-container{
+  display: flex;
+  justify-content: space-between;
+}
+.box-card{
+  margin: 15px 0;
+}
+</style>

src/views/customer/public/import.vue

+<template>
+  <div class="app-container">
+    <upload-excel-component :on-success="handleSuccess" :before-upload="beforeUpload" />
+    <el-button v-waves :loading="downloadLoading" class="filter-item" type="primary" icon="el-icon-download" @click="handleImportDemo">
+      模板下载
+    </el-button>
+    <el-button v-waves :loading="loading" class="filter-item" type="primary" icon="el-icon-upload2" @click="handleImport">
+      导入
+    </el-button>
+    <el-table max-height="500" :data="excelData" style="width: 100%;margin-top:30px;" border @selection-change="handleSelectionChange">
+      <el-table-column
+        fixed="left"
+        align="center"
+        type="selection"
+        width="55"
+      />
+      <el-table-column fixed="left" width="100" align="center" label="客户名称">
+        <template slot-scope="scope">
+          {{ scope.row.name }}
+        </template>
+      </el-table-column>
+      <el-table-column fixed="left" width="100" align="center" label="公司名称">
+        <template slot-scope="scope">
+          {{ scope.row.company }}
+        </template>
+      </el-table-column>
+      <el-table-column width="100" align="center" label="行业">
+        <template slot-scope="scope">
+          {{ scope.row.industry }}
+        </template>
+      </el-table-column>
+      <el-table-column width="100" align="center" label="部门">
+        <template slot-scope="scope">
+          {{ scope.row.department }}
+        </template>
+      </el-table-column>
+      <el-table-column width="100" align="center" label="职位">
+        <template slot-scope="scope">
+          {{ scope.row.duties }}
+        </template>
+      </el-table-column>
+      <el-table-column width="150" align="center" label="电话">
+        <template slot-scope="scope">
+          {{ scope.row.tel_phone }}
+        </template>
+      </el-table-column>
+      <el-table-column width="150" align="center" label="手机号码">
+        <template slot-scope="scope">
+          {{ scope.row.mobile_phone }}
+        </template>
+      </el-table-column>
+      <el-table-column width="200" align="center" label="微信号">
+        <template slot-scope="scope">
+          {{ scope.row.wechat }}
+        </template>
+      </el-table-column>
+      <el-table-column width="200" align="center" label="抖音号">
+        <template slot-scope="scope">
+          {{ scope.row.dy }}
+        </template>
+      </el-table-column>
+      <el-table-column width="200" align="center" label="邮箱">
+        <template slot-scope="scope">
+          {{ scope.row.email }}
+        </template>
+      </el-table-column>
+      <el-table-column width="300" align="center" label="地址">
+        <template slot-scope="scope">
+          {{ scope.row.address }}
+        </template>
+      </el-table-column>
+      <el-table-column width="100" align="center" label="跟进状态">
+        <template slot-scope="scope">
+          {{ scope.row.follow_status_text }}
+        </template>
+      </el-table-column>
+      <el-table-column width="100" align="center" label="客户来源">
+        <template slot-scope="scope">
+          {{ scope.row.from_text }}
+        </template>
+      </el-table-column>
+      <el-table-column width="100" align="center" label="客户类型">
+        <template slot-scope="scope">
+          {{ scope.row.type_text }}
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+import { getOption, addImport } from '@/api/customer/public'
+import UploadExcelComponent from '@/components/UploadExcel/index.vue'
+import { formatImportData } from '@/utils'
+import waves from '@/directive/waves/index.js'
+import { Message } from 'element-ui' // 水波纹指令
+
+export default {
+  components: { UploadExcelComponent },
+  directives: {
+    waves
+  },
+  data() {
+    return {
+      downloadLoading: false,
+      importDemo: {
+        filename: '客户列表demo',
+        autoWidth: true,
+        bookType: 'xlsx'
+      },
+      loading: false,
+      typeOptions: [],
+      fromOptions: [],
+      followStatusOptions: [],
+      excelData: [],
+      multipleSelection: [],
+      headerFiled: {
+        'name': '客户名称',
+        'company': '公司名称',
+        'industry': '行业',
+        'department': '部门',
+        'duties': '职位',
+        'tel_phone': '电话',
+        'mobile_phone': '手机号码',
+        'wechat': '微信号',
+        'dy': '抖音号',
+        'email': '邮箱',
+        'address': '地址',
+        'follow_status': '跟进状态',
+        'from': '客户来源',
+        'type': '客户类型'
+      }
+    }
+  },
+  computed: {
+  },
+  created() {
+    this.getOption()
+  },
+  methods: {
+    getOption() {
+      getOption().then((res) => {
+        const { type_maps, from_maps, follow_status_maps } = res.data
+        this.typeOptions = type_maps
+        this.fromOptions = from_maps
+        this.followStatusOptions = follow_status_maps
+      })
+    },
+    handleSelectionChange(val) {
+      this.multipleSelection = val
+    },
+    handleImport() {
+      if (this.multipleSelection.length <= 0) {
+        Message.warning('请选择要导入的数据')
+        return
+      }
+      this.loading = true
+
+      addImport({ data: this.multipleSelection }).then(() => {
+        this.multipleSelection = []
+        this.excelData = []
+        Message.success('导入成功')
+      }).finally(() => {
+        this.loading = false
+      })
+    },
+    handleImportDemo() {
+      this.downloadLoading = true
+      import('@/vendor/Export2Excel').then(excel => {
+        const tHeader = Object.values(this.headerFiled)
+        const data = []
+        excel.export_json_to_excel({
+          header: tHeader,
+          data,
+          filename: this.importDemo.filename,
+          autoWidth: this.importDemo.autoWidth,
+          bookType: this.importDemo.bookType
+        })
+        this.downloadLoading = false
+      })
+    },
+    beforeUpload(file) {
+      const isLt1M = file.size / 1024 / 1024 < 1
+
+      if (isLt1M) {
+        return true
+      }
+
+      this.$message({
+        message: 'Please do not upload files larger than 1m in size.',
+        type: 'warning'
+      })
+      return false
+    },
+    handleSuccess({ results, header }) {
+      const data = formatImportData(results, this.headerFiled)
+
+      data.forEach((item) => {
+        const typeOption = this.typeOptions.find((option) => option.name === item.type)
+        if (typeOption) {
+          item.type = typeOption.id
+          item.type_text = typeOption.name
+        } else {
+          item.type = ''
+          item.type_text = ''
+        }
+
+        const fromOption = this.fromOptions.find((option) => option.name === item.from)
+        if (fromOption) {
+          item.from = fromOption.id
+          item.from_text = fromOption.name
+        } else {
+          item.from = ''
+          item.from_text = ''
+        }
+
+        const followStatusOption = this.followStatusOptions.find((option) => option.name === item.follow_status)
+        if (followStatusOption) {
+          item.follow_status = followStatusOption.id
+          item.follow_status_text = followStatusOption.name
+        } else {
+          item.follow_status = ''
+          item.follow_status_text = ''
+        }
+      })
+
+      this.excelData = data
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.app-container {
+  .roles-table {
+    margin-top: 30px;
+  }
+  .permission-tree {
+    margin-bottom: 30px;
+  }
+}
+</style>

src/views/customer/public/index.vue

+<template>
+  <div class="app-container">
+    <div class="filter-container">
+      <el-input v-model="listQuery.name" placeholder="客户名称" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
+      <el-select v-model="listQuery.follow_status" placeholder="跟进状态" clearable style="width: 130px" class="filter-item">
+        <el-option v-for="item in followStatusOptions" :key="item.id" :label="item.name" :value="item.id" />
+      </el-select>
+      <el-select v-model="listQuery.type" placeholder="客户类型" clearable class="filter-item" style="width: 130px">
+        <el-option v-for="item in typeOptions" :key="item.id" :label="item.name" :value="item.id" />
+      </el-select>
+      <el-select v-model="listQuery.from" placeholder="客户来源" clearable class="filter-item" style="width: 130px">
+        <el-option v-for="item in fromOptions" :key="item.id" :label="item.name" :value="item.id" />
+      </el-select>
+
+      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
+        搜索
+      </el-button>
+    </div>
+    <el-button :loading="listLoading" icon="el-icon-refresh" @click="getList" />
+
+    <!--    <el-button class="filter-item" type="primary" @click="handleAdd">-->
+    <!--      添加-->
+    <!--    </el-button>-->
+    <!--    <el-button v-waves class="filter-item" type="primary" @click="handleImport">-->
+    <!--      导入-->
+    <!--    </el-button>-->
+    <el-button :loading="loading" class="filter-item" type="success" @click="handleMultipleBackPublic">
+      领取
+    </el-button>
+
+    <el-table v-loading="listLoading" :data="data" style="width: 100%;margin-top:30px;" border @selection-change="handleSelectionChange">
+      <el-table-column
+        fixed="left"
+        align="center"
+        type="selection"
+        width="55"
+      />
+      <el-table-column fixed="left" width="100" align="center" label="ID">
+        <template slot-scope="scope">
+          {{ scope.row.id }}
+        </template>
+      </el-table-column>
+      <el-table-column fixed="left" width="100" align="center" label="客户名称">
+        <template slot-scope="scope">
+          {{ scope.row.name }}
+        </template>
+      </el-table-column>
+      <el-table-column fixed="left" width="100" align="center" label="公司名称">
+        <template slot-scope="scope">
+          {{ scope.row.company }}
+        </template>
+      </el-table-column>
+      <el-table-column width="100" align="center" label="行业">
+        <template slot-scope="scope">
+          {{ scope.row.industry }}
+        </template>
+      </el-table-column>
+      <el-table-column width="100" align="center" label="部门">
+        <template slot-scope="scope">
+          {{ scope.row.department }}
+        </template>
+      </el-table-column>
+      <el-table-column width="100" align="center" label="职位">
+        <template slot-scope="scope">
+          {{ scope.row.duties }}
+        </template>
+      </el-table-column>
+      <el-table-column width="150" align="center" label="电话">
+        <template slot-scope="scope">
+          {{ scope.row.tel_phone }}
+        </template>
+      </el-table-column>
+      <el-table-column width="150" align="center" label="手机号码">
+        <template slot-scope="scope">
+          {{ scope.row.mobile_phone }}
+        </template>
+      </el-table-column>
+      <el-table-column width="200" align="center" label="微信号">
+        <template slot-scope="scope">
+          {{ scope.row.wechat }}
+        </template>
+      </el-table-column>
+      <el-table-column width="200" align="center" label="抖音号">
+        <template slot-scope="scope">
+          {{ scope.row.dy }}
+        </template>
+      </el-table-column>
+      <el-table-column width="200" align="center" label="邮箱">
+        <template slot-scope="scope">
+          {{ scope.row.email }}
+        </template>
+      </el-table-column>
+      <el-table-column width="300" align="center" label="地址">
+        <template slot-scope="scope">
+          {{ scope.row.address }}
+        </template>
+      </el-table-column>
+      <el-table-column width="100" align="center" label="跟进状态">
+        <template slot-scope="scope">
+          {{ scope.row.follow_status_text }}
+        </template>
+      </el-table-column>
+      <el-table-column width="100" align="center" label="客户来源">
+        <template slot-scope="scope">
+          {{ scope.row.from_text }}
+        </template>
+      </el-table-column>
+      <el-table-column width="100" align="center" label="客户类型">
+        <template slot-scope="scope">
+          {{ scope.row.type_text }}
+        </template>
+      </el-table-column>
+      <el-table-column fixed="right" width="500" align="center" label="操作">
+        <template slot-scope="scope">
+          <el-button size="small" @click="handleDetail(scope)">详情</el-button>
+          <el-button type="primary" size="small" @click="handleEdit(scope)">编辑</el-button>
+          <el-button type="primary" size="small" @click="handleEditPrivate(scope)">上传资料</el-button>
+          <el-button type="primary" size="small" @click="handleFollow(scope)">写跟进</el-button>
+          <el-button :loading="loading" type="success" size="small" @click="handleBackPublic(scope)">领取</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.per_page" @pagination="getList" />
+
+    <!-- 详情   -->
+    <el-dialog :visible.sync="dialogDetail" title="详细信息">
+      <el-tabs v-model="activeDetailTab" v-loading="detailLoading" :v-if="detailData">
+        <el-tab-pane label="客户信息" name="detail">
+          <el-descriptions title="">
+            <el-descriptions-item label="客户名称">{{ detailData.name }}</el-descriptions-item>
+            <el-descriptions-item label="公司名称">{{ detailData.company }}</el-descriptions-item>
+            <el-descriptions-item label="行业">{{ detailData.industry }}</el-descriptions-item>
+            <el-descriptions-item label="部门">{{ detailData.department }}</el-descriptions-item>
+            <el-descriptions-item label="职位">{{ detailData.duties }}</el-descriptions-item>
+            <el-descriptions-item label="电话">{{ detailData.tel_phone }}</el-descriptions-item>
+            <el-descriptions-item label="手机号">{{ detailData.mobile_phone }}</el-descriptions-item>
+            <el-descriptions-item label="微信号">{{ detailData.wechat }}</el-descriptions-item>
+            <el-descriptions-item label="抖音号">{{ detailData.dy }}</el-descriptions-item>
+            <el-descriptions-item label="邮箱号">{{ detailData.email }}</el-descriptions-item>
+            <el-descriptions-item label="邮箱号">{{ detailData.email }}</el-descriptions-item>
+            <el-descriptions-item label="客户来源">{{ detailData.from_text }}</el-descriptions-item>
+            <el-descriptions-item label="客户类型">{{ detailData.type_text }}</el-descriptions-item>
+            <el-descriptions-item label="联系地址">{{ detailData.address }}</el-descriptions-item>
+            <el-descriptions-item label="跟进状态">
+              <el-tag size="small">{{ detailData.follow_status_text }}</el-tag>
+            </el-descriptions-item>
+          </el-descriptions>
+        </el-tab-pane>
+        <el-tab-pane label="跟进记录" name="follow_info">
+          <el-timeline>
+            <el-timeline-item
+              v-for="(follow, index) in detailData.follow.data"
+              :key="index"
+              :timestamp="follow.follow_time"
+              placement="top"
+            >
+              <el-card>
+                <h4>跟进内容： {{ follow.content }}</h4>
+                <p>跟进类型： {{ follow.type_text }}</p>
+                <p>跟进状态： {{ follow.status_text }}</p>
+                <p>跟进时间： {{ follow.follow_time }}</p>
+                <p>下次跟进时间： {{ follow.next_follow_time }}</p>
+              </el-card>
+            </el-timeline-item>
+          </el-timeline>
+        </el-tab-pane>
+      </el-tabs>
+    </el-dialog>
+
+    <!-- 上传资料   -->
+    <el-dialog :visible.sync="dialogEditPrivate" title="上传资料">
+      <el-form ref="form" :model="formEditPrivate" label-width="80px" label-position="left">
+        <el-form-item label="营业执照" prop="business_license">
+          <el-input v-model="formEditPrivate.business_license" placeholder="营业执照" />
+        </el-form-item>
+        <el-form-item label="身份证" prop="identity">
+          <el-input v-model="formEditPrivate.identity" placeholder="身份证" />
+        </el-form-item>
+        <el-form-item label="银行账户" prop="bank_account">
+          <el-input v-model="formEditPrivate.bank_account" placeholder="银行账户" />
+        </el-form-item>
+        <el-form-item label="手机号码" prop="mobile_phone">
+          <el-input v-model="formEditPrivate.mobile_phone" placeholder="手机号码" />
+        </el-form-item>
+      </el-form>
+      <div style="text-align:right;">
+        <el-button type="danger" @click="dialogEditPrivate=false">取消</el-button>
+        <el-button :loading="loading" type="primary" @click="confirmEditPrivate">提交</el-button>
+      </div>
+    </el-dialog>
+
+    <!-- 写跟进   -->
+    <el-dialog :visible.sync="dialogFollow" title="写跟进">
+      <el-tabs v-model="activeFollowTab" v-loading="followListLoading">
+        <el-tab-pane label="写跟进" name="follow_form">
+          <el-form ref="formFollow" :model="formFollow" :rules="formFollowRules" label-width="120px" label-position="left">
+            <el-form-item label="跟进类型" prop="type">
+              <el-select v-model="formFollow.type" placeholder="跟进类型" clearable class="filter-item" style="width: 130px">
+                <el-option v-for="item in followTypeOptions" :key="item.id" :label="item.name" :value="item.id" />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="跟进状态" prop="status">
+              <el-select v-model="formFollow.status" placeholder="跟进状态" clearable class="filter-item">
+                <el-option v-for="item in followStatusOptions" :key="item.id" :label="item.name" :value="item.id" />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="下次跟进时间" prop="next_follow_time">
+              <el-date-picker
+                v-model="formFollow.next_follow_time"
+                :value-format="'yyyy-MM-dd HH:mm:ss'"
+                type="datetime"
+                placeholder="选择日期时间"
+              />
+            </el-form-item>
+            <el-form-item label="内容" prop="content">
+              <el-input v-model="formFollow.content" placeholder="跟进内容" />
+            </el-form-item>
+          </el-form>
+        </el-tab-pane>
+        <el-tab-pane label="跟进记录" name="follow_info">
+          <el-timeline>
+            <el-timeline-item
+              v-for="(follow, index) in followList"
+              :key="index"
+              :timestamp="follow.follow_time"
+              placement="top"
+            >
+              <el-card>
+                <h4>跟进内容： {{ follow.content }}</h4>
+                <p>跟进类型： {{ follow.type_text }}</p>
+                <p>跟进状态： {{ follow.status_text }}</p>
+                <p>跟进时间： {{ follow.follow_time }}</p>
+                <p>下次跟进时间： {{ follow.next_follow_time }}</p>
+              </el-card>
+            </el-timeline-item>
+          </el-timeline>
+        </el-tab-pane>
+      </el-tabs>
+      <div style="text-align:right;">
+        <el-button type="danger" @click="dialogFollow=false">取消</el-button>
+        <el-button :loading="loading" type="primary" @click="confirmFollow">提交</el-button>
+      </div>
+    </el-dialog>
+
+  </div>
+</template>
+
+<script>
+import { editCustomerPrivate, getList, getOption, receivePrivate, followCustomer, followList } from '@/api/customer/public'
+import { checkRoleAction, getRoleAction } from '@/utils/util'
+import Pagination from '@/components/Pagination'
+import { mapGetters } from 'vuex'
+import waves from '@/directive/waves/index.js'
+import { Message } from 'element-ui' // 水波纹指令
+
+export default {
+  components: { Pagination },
+  directives: {
+    waves
+  },
+  data() {
+    return {
+      listLoading: false,
+      total: 0,
+      listQuery: {
+        page: 1,
+        per_page: 20,
+        follow_status: '',
+        type: '',
+        from: '',
+        include: 'follow'
+      },
+      data: [],
+      typeOptions: [],
+      fromOptions: [],
+      followStatusOptions: [],
+      followTypeOptions: [],
+      dialogVisible: false,
+      detailData: {
+        follow: {
+          data: []
+        }
+      },
+      dialogDetail: false,
+      detailLoading: false,
+      activeDetailTab: 'detail',
+      dialogEditPrivate: false,
+      formEditPrivate: {
+        business_license: '',
+        identity: '',
+        bank_account: '',
+        mobile_phone: ''
+      },
+      loading: false,
+      multipleSelection: [],
+      dialogFollow: false,
+      activeFollowTab: 'follow_form',
+      followListLoading: false,
+      followList: [],
+      formFollow: {
+        type: '',
+        status: '',
+        next_follow_time: '',
+        content: ''
+      },
+      formFollowRules: {
+        type: [{ required: true, message: '跟进类型不能为空', trigger: 'blur' }],
+        status: [{ required: true, message: '跟进状态不能为空', trigger: 'blur' }],
+        next_follow_time: [{ required: true, message: '下次跟进时间不能为空', trigger: 'blur' }],
+        content: [{ required: true, message: '跟进内容不能为空', trigger: 'blur' }]
+
+      }
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'menus'
+    ]),
+    role_action() {
+      const action = ['add', 'edit', 'import', 'detail', 'follow', 'edit_private', 'receive_private', 'back_public']
+      return getRoleAction(this.menus, action, this.$route)
+    }
+  },
+  created() {
+    this.getList()
+    this.getOption()
+  },
+  methods: {
+    getList() {
+      this.listLoading = true
+      getList(this.listQuery).then((res) => {
+        const { data, meta } = res
+        this.data = data
+        this.total = meta.pagination.total
+      }).finally(() => {
+        this.listLoading = false
+      })
+    },
+    getFollowList(id) {
+      this.followListLoading = true
+      followList(id).then((res) => {
+        const { data } = res
+        this.followList = data
+      }).finally(() => {
+        this.followListLoading = false
+      })
+    },
+    getOption() {
+      getOption().then((res) => {
+        const { type_maps, from_maps, follow_status_maps, follow_type_maps } = res.data
+        this.typeOptions = type_maps
+        this.fromOptions = from_maps
+        this.followStatusOptions = follow_status_maps
+        this.followTypeOptions = follow_type_maps
+      })
+    },
+    handleSelectionChange(val) {
+      this.multipleSelection = val
+    },
+    handleAdd() {
+      if (!checkRoleAction('add', this.role_action)) return
+
+      const parentMatchedRoute = this.$route.matched[this.$route.matched.length - 2]
+      const parent_name = parentMatchedRoute.name
+      this.$router.push({ path: parentMatchedRoute.path + '/' + parent_name + '.add' })
+    },
+    handleDetail(scope) {
+      if (!checkRoleAction('detail', this.role_action)) return
+
+      this.activeDetailTab = 'detail'
+      this.detailData = scope.row
+      this.dialogDetail = true
+      // const id = scope.row.id
+      // this.detailLoading = true
+      // getDetail(id, { include: 'follow' }).then((res) => {
+      //   const { data } = res
+      //   this.detailData = data
+      // }).catch(() => {
+      //   this.dialogDetail = false
+      // }).finally(() => {
+      //   this.detailLoading = false
+      // })
+    },
+    handleEdit(scope) {
+      if (!checkRoleAction('edit', this.role_action)) return
+
+      const parentMatchedRoute = this.$route.matched[this.$route.matched.length - 2]
+      const parent_name = parentMatchedRoute.name
+      const row = scope.row
+      row.follow_status = row.follow_status ? row.follow_status : ''
+      row.from = row.from ? row.from : ''
+      row.type = row.type ? row.type : ''
+      this.$router.push({
+        name: parent_name + '.edit',
+        params: { row: row }
+      })
+    },
+    handleFollow(scope) {
+      if (!checkRoleAction('follow', this.role_action)) return
+
+      this.formFollow.id = scope.row.id
+      this.activeFollowTab = 'follow_form'
+      this.getFollowList(this.formFollow.id)
+      this.dialogFollow = true
+    },
+    handleEditPrivate(scope) {
+      if (!checkRoleAction('edit_private', this.role_action)) return
+
+      this.dialogEditPrivate = true
+      this.formEditPrivate = scope.row
+    },
+    confirmEditPrivate() {
+      this.loading = true
+      editCustomerPrivate(this.formEditPrivate.id, this.formEditPrivate).then(() => {
+        Message.success('编辑成功')
+        this.dialogEditPrivate = false
+      }).finally(() => { this.loading = false })
+    },
+    confirmFollow() {
+      this.$refs['formFollow'].validate((valid, fields) => {
+        if (valid) {
+          this.loading = true
+          followCustomer(this.formFollow.id, this.formFollow).then(() => {
+            Message.success('提交成功')
+            this.$refs['formFollow'].resetFields()
+            this.activeFollowTab = 'follow_info'
+            this.getFollowList(this.formFollow.id)
+          }).finally(() => { this.loading = false })
+        }
+      })
+    },
+    handleBackPublic({ $index, row }) {
+      if (!checkRoleAction('receive_private', this.role_action)) return
+      this.$confirm('确定要领取到我的客户嘛?', '领取', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+        .then(() => {
+          this.loading = true
+          receivePrivate({ id: [row.id] }).then(() => {
+            Message.success('操作成功')
+            this.getList()
+          }).finally(() => { this.loading = false })
+        })
+    },
+    handleMultipleBackPublic() {
+      if (!checkRoleAction('receive_private', this.role_action)) return
+
+      if (this.multipleSelection.length <= 0) {
+        Message.warning('请选择操作的数据')
+        return
+      }
+
+      const ids = []
+      this.multipleSelection.forEach((item, index) => {
+        ids.push(item.id)
+      })
+
+      this.$confirm('确定要将所有选中项领取到我的客户嘛?', '领取', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+        .then(() => {
+          this.loading = true
+          receivePrivate({ id: ids }).then(() => {
+            this.multipleSelection = []
+            Message.success('操作成功')
+            this.getList()
+          }).finally(() => { this.loading = false })
+        })
+    },
+    handleDelete({ $index, row }) {
+      if (!checkRoleAction('del', this.role_action)) return
+
+      this.$confirm('确定要删除嘛?', '删除', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+        .then(async() => {
+
+        })
+    },
+    handleImport() {
+      if (!checkRoleAction('import', this.role_action)) return
+
+      const parentMatchedRoute = this.$route.matched[this.$route.matched.length - 2]
+      const parent_name = parentMatchedRoute.name
+      this.$router.push({ path: parentMatchedRoute.path + '/' + parent_name + '.import' })
+    },
+    handleFilter() {
+      this.listQuery.page = 1
+      this.getList()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.app-container {
+  .roles-table {
+    margin-top: 30px;
+  }
+  .permission-tree {
+    margin-bottom: 30px;
+  }
+}
+.filter-container{
+  margin: 15px 0;
+}
+</style>

src/views/system/company/user/edit.vue

@@ -113,11 +113,6 @@ export default {
   created() {
     this.init()
   },
-  beforeRouteEnter(to, from, next) {
-    // 在路由进入前执行操作
-    // 无法访问组件实例的 this
-    next()
-  },
   beforeRouteLeave(to, from, next) {
     this.$store.dispatch('tagsView/delView', from)
     next()
@@ -126,8 +121,7 @@ export default {
     init() {
       const id = this.$route.params && this.$route.params.id
       if (!id) {
-        const parentMatchedRoute = this.$route.matched[this.$route.matched.length - 2]
-        this.$router.push({ name: parentMatchedRoute.name })
+        this.$router.push({ path: '/' })
         return
       }
       this.tempRoute = Object.assign({}, this.$route)

src/views/system/power/menu/index.vue

@@ -106,6 +106,23 @@ export default {
         create: 'Create'
       },
       treeData: [],
+      columns: [
+        {
+          label: 'ID',
+          key: 'id',
+          expand: true
+        },
+        {
+          label: 'Event',
+          key: 'event',
+          width: 200,
+          align: 'left'
+        },
+        {
+          label: 'Scope',
+          key: 'scope'
+        }
+      ],
       treeSelectData: [],
       form: {
         parent_id: 0,
@@ -153,7 +170,7 @@ export default {
         const childrenNav = []
         this.listToTree(menus, childrenNav, 0)
         rootRouter.children = childrenNav
-        this.treeData = [rootRouter]
+        this.treeData = childrenNav
 
         const rootRouterSelect = {
           value: 0,

vue.config.js

@@ -36,7 +36,13 @@ module.exports = {
       warnings: false,
       errors: true
     },
-    before: require('./mock/mock-server.js')
+    // before: require('./mock/mock-server.js'),
+    proxy: {
+      '/api': {
+        target: process.env.VUE_APP_BASE_API,
+        changeOrigin: true
+      }
+    }
   },
   configureWebpack: {
     // provide the app's title in webpack's name field, so that