mdadmin/src/views/cust/components/popup/IndexRecord.vue

<template>
  <div>
    <el-dialog
      :show-close="false"
      :close-on-click-modal="false"
      :visible.sync="isShow"
      :title="`${curObj.name}的报备详情`"
      :fullscreen="false"
      width="800px"
      custom-class="xl-dialog"
      center
    >
      <div class="scoped-info">
        <div class="si-row">
          <div class="si-col">昵称：{{dtlObj.name}}</div>
          <div class="si-col">手机号：{{dtlObj.phone}}</div>
          <div class="si-col">性别：{{sexObj[dtlObj.sex]}}</div>
        </div>
        <div class="si-row">
          <div class="si-col">客户状态：{{reportStateStr}}</div>
          <div class="si-col">报备进度：{{reportStepStr}}</div>
        </div>
        <div class="si-row">
          <div class="si-col">报备日期：{{dtlObj.create_at}}</div>
          <div class="si-col">保护期止：{{dtlObj.lock_at}}</div>
          <div class="si-col">报备楼盘：{{dtlObj.estate_name}}</div>
        </div>
      </div>
      <div class="scoped-table">
        <table-list
          :list-loading="listLoading"
          :data="reportFlow"
          :columns="listConfig"
          :current-page="currentPage"
          :page-size="-1"
          >
        </table-list>
      </div>
      <div class="xl-form" style="padding-top: 20px;">
        <div class="xl-form-footer">
            <div class="scoped-btn-more">
              <el-button type="small" icon="el-icon-plus" class="xl-form-btn bgc2" @click="openPopup">更新报备进度</el-button>
              <el-button type="small" icon="el-icon-warning" class="xl-form-btn bgc4" @click="openStatePopup">修改状态</el-button>
            </div>
          <el-button class="xl-form-btn t2" @click="close">关闭弹窗</el-button>
        </div>
      </div>
    </el-dialog>
    <record-edit
      :isShow="isDtlShow"
      :pObj="dtlObj"
      :curObj="subObj"
      @close="closePopup"
    />
    <state-edit
      :isShow="isStateShow"
      :pObj="dtlObj"
      :curObj="subObj"
      @close="closeStatePopup"
    />
  </div>
</template>
<script>
import RecordEdit from './RecordEdit'
import StateEdit from './StateEdit'
import baseTable from '_m/baseTable.js'
import { arrToObj } from '@/utils'
export default {
  components: {
    RecordEdit,
    StateEdit,
  },
  mixins: [...mixins, baseTable],
  props: {
    isShow: Boolean,
    curObj: Object
  },
  inject: ['parentData'],
  data() {
    return {
      apiStr: 'cust.admreportdetail',
      noCreated: true,
      searchForm: {},
      aList: [],
      subObj: {},
      isDtlShow: false,
      reportFlow: [],
      dtlObj: {},
      isStateShow: false,
      sexObj: {},
    }
  },
  mounted() {
    this.sexObj = arrToObj(this.$dictData.sex)
    this.listConfig = {
      rows: [
        { label: '客户状态', prop: 'report_state', type: 'tag', tags: arrToObj(this.$dictData.report_state	), tagTypeObj: {'1': 'success', '2': 'warning', '3': 'danger'}},
        { label: '报备进度', prop: 'report_step', type: 'flag', flags: arrToObj(this.$dictData.report_step	) },
        { label: '更新时间', prop: 'create_at' },
        { label: '备注', prop: 'describe', fullShow: true, minWidth: 200, align: 'left' },
        // { label: '操作', width: 120, type: 'handle2', operations:
        //   [
        //     { label: '编辑', func: this.openPopup, btnType: 'primary' },
        //     { label: '删除', func: this.delHandle, btnType: 'danger' },
        //   ]
        // }
      ]
    }
  },
  computed: {
    tableData2 () {
      let arr = [...this.tableData]
      arr.map(item => {})
      return arr
    },
    reportStepStr () {
      return arrToObj(this.$dictData.report_step)[this.dtlObj.report_step]
    },
    reportStateStr () {
      return arrToObj(this.$dictData.report_state)[this.dtlObj.report_state]
    }
  },
  watch: {
    isShow: function(val) {
      if (val) {
        this.getData()
      }
    },
  },
  methods: {
    getData () {
      this.$api.cust.admreportdetail({id: this.curObj.id}).then(res => {
        console.log(res)
        this.dtlObj = res || {}
        this.reportFlow = res.report_flow || []
      })
    },
    delHandle(row) {
      this.$msg(`您确定要删除该跟进记录吗？`, 'confirm', () => {
        this.$api.user.admcustomerrecorddel({
          id: row.id
        }).then(data => {
          this.$msgs(`已删除！`)
          this.getData()
        })
      }, null, true)
    },
    close(str) {
      this.$emit('close')
    },
    openPopup(row) {
      if (row && row.id) {
        this.subObj = row
      } else {
        this.subObj = {}
      }
      this.isDtlShow = true
    },
    closePopup(obj) {
      this.isDtlShow = false
      if (obj) {
        this.getData()
      }
    },
    openStatePopup(row) {
      if (row && row.id) {
        this.subObj = row
      } else {
        this.subObj = {}
      }
      this.isStateShow = true
    },
    closeStatePopup(obj) {
      this.isStateShow = false
      if (obj) {
        this.getData()
      }
    },
  }
}
</script>
<style lang="scss" scoped>
.scoped-info {
  border-left: 1px solid #dcdcdc;
  border-top: 1px solid #dcdcdc;
  margin-bottom: 10px;
  .si-row {
    display: flex;
    border-bottom: 1px solid #dcdcdc;
  }
  .si-col {
    width: 33.33%;
    box-sizing: border-box;
    padding: 10px 20px;
    border-right: 1px solid #dcdcdc;
  }
}

.scoped-table {
  max-height: 300px;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 0 2px #ccc;
  // border-top: 1px solid #dcdcdc;
  // border-bottom: 1px solid #dcdcdc;
  ::v-deep .xl-pagination {
    position: absolute;
  }
}


.scoped-btn-more {
  position: absolute;
  left: 25px;
}
</style>