IndexRecord.vue 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216
  1. <template>
  2. <div>
  3. <el-dialog
  4. :show-close="false"
  5. :close-on-click-modal="false"
  6. :visible.sync="isShow"
  7. :title="`${curObj.name}的报备详情`"
  8. :fullscreen="false"
  9. width="800px"
  10. custom-class="xl-dialog"
  11. center
  12. >
  13. <div class="scoped-info">
  14. <div class="si-row">
  15. <div class="si-col">昵称:{{dtlObj.name}}</div>
  16. <div class="si-col">手机号:{{dtlObj.phone}}</div>
  17. <div class="si-col">性别:{{sexObj[dtlObj.sex]}}</div>
  18. </div>
  19. <div class="si-row">
  20. <div class="si-col">客户状态:{{reportStateStr}}</div>
  21. <div class="si-col">报备进度:{{reportStepStr}}</div>
  22. </div>
  23. <div class="si-row">
  24. <div class="si-col">报备日期:{{dtlObj.create_at}}</div>
  25. <div class="si-col">保护期止:{{dtlObj.lock_at}}</div>
  26. <div class="si-col">报备楼盘:{{dtlObj.estate_name}}</div>
  27. </div>
  28. </div>
  29. <div class="scoped-table">
  30. <table-list
  31. :list-loading="listLoading"
  32. :data="reportFlow"
  33. :columns="listConfig"
  34. :current-page="currentPage"
  35. :page-size="-1"
  36. >
  37. </table-list>
  38. </div>
  39. <div class="xl-form" style="padding-top: 20px;">
  40. <div class="xl-form-footer">
  41. <div class="scoped-btn-more">
  42. <el-button type="small" icon="el-icon-plus" class="xl-form-btn bgc2" @click="openPopup">更新报备进度</el-button>
  43. <el-button type="small" icon="el-icon-warning" class="xl-form-btn bgc4" @click="openStatePopup">修改状态</el-button>
  44. </div>
  45. <el-button class="xl-form-btn t2" @click="close">关闭弹窗</el-button>
  46. </div>
  47. </div>
  48. </el-dialog>
  49. <record-edit
  50. :isShow="isDtlShow"
  51. :pObj="dtlObj"
  52. :curObj="subObj"
  53. @close="closePopup"
  54. />
  55. <state-edit
  56. :isShow="isStateShow"
  57. :pObj="dtlObj"
  58. :curObj="subObj"
  59. @close="closeStatePopup"
  60. />
  61. </div>
  62. </template>
  63. <script>
  64. import RecordEdit from './RecordEdit'
  65. import StateEdit from './StateEdit'
  66. import baseTable from '_m/baseTable.js'
  67. import { arrToObj } from '@/utils'
  68. export default {
  69. components: {
  70. RecordEdit,
  71. StateEdit,
  72. },
  73. mixins: [...mixins, baseTable],
  74. props: {
  75. isShow: Boolean,
  76. curObj: Object
  77. },
  78. inject: ['parentData'],
  79. data() {
  80. return {
  81. apiStr: 'cust.admreportdetail',
  82. noCreated: true,
  83. searchForm: {},
  84. aList: [],
  85. subObj: {},
  86. isDtlShow: false,
  87. reportFlow: [],
  88. dtlObj: {},
  89. isStateShow: false,
  90. sexObj: {},
  91. }
  92. },
  93. mounted() {
  94. this.sexObj = arrToObj(this.$dictData.sex)
  95. this.listConfig = {
  96. rows: [
  97. { label: '客户状态', prop: 'report_state', type: 'tag', tags: arrToObj(this.$dictData.report_state ), tagTypeObj: {'1': 'success', '2': 'warning', '3': 'danger'}},
  98. { label: '报备进度', prop: 'report_step', type: 'flag', flags: arrToObj(this.$dictData.report_step ) },
  99. { label: '更新时间', prop: 'create_at' },
  100. { label: '备注', prop: 'describe', fullShow: true, minWidth: 200, align: 'left' },
  101. // { label: '操作', width: 120, type: 'handle2', operations:
  102. // [
  103. // { label: '编辑', func: this.openPopup, btnType: 'primary' },
  104. // { label: '删除', func: this.delHandle, btnType: 'danger' },
  105. // ]
  106. // }
  107. ]
  108. }
  109. },
  110. computed: {
  111. tableData2 () {
  112. let arr = [...this.tableData]
  113. arr.map(item => {})
  114. return arr
  115. },
  116. reportStepStr () {
  117. return arrToObj(this.$dictData.report_step)[this.dtlObj.report_step]
  118. },
  119. reportStateStr () {
  120. return arrToObj(this.$dictData.report_state)[this.dtlObj.report_state]
  121. }
  122. },
  123. watch: {
  124. isShow: function(val) {
  125. if (val) {
  126. this.getData()
  127. }
  128. },
  129. },
  130. methods: {
  131. getData () {
  132. this.$api.cust.admreportdetail({id: this.curObj.id}).then(res => {
  133. console.log(res)
  134. this.dtlObj = res || {}
  135. this.reportFlow = res.report_flow || []
  136. })
  137. },
  138. delHandle(row) {
  139. this.$msg(`您确定要删除该跟进记录吗?`, 'confirm', () => {
  140. this.$api.user.admcustomerrecorddel({
  141. id: row.id
  142. }).then(data => {
  143. this.$msgs(`已删除!`)
  144. this.getData()
  145. })
  146. }, null, true)
  147. },
  148. close(str) {
  149. this.$emit('close')
  150. },
  151. openPopup(row) {
  152. if (row && row.id) {
  153. this.subObj = row
  154. } else {
  155. this.subObj = {}
  156. }
  157. this.isDtlShow = true
  158. },
  159. closePopup(obj) {
  160. this.isDtlShow = false
  161. if (obj) {
  162. this.getData()
  163. }
  164. },
  165. openStatePopup(row) {
  166. if (row && row.id) {
  167. this.subObj = row
  168. } else {
  169. this.subObj = {}
  170. }
  171. this.isStateShow = true
  172. },
  173. closeStatePopup(obj) {
  174. this.isStateShow = false
  175. if (obj) {
  176. this.getData()
  177. }
  178. },
  179. }
  180. }
  181. </script>
  182. <style lang="scss" scoped>
  183. .scoped-info {
  184. border-left: 1px solid #dcdcdc;
  185. border-top: 1px solid #dcdcdc;
  186. margin-bottom: 10px;
  187. .si-row {
  188. display: flex;
  189. border-bottom: 1px solid #dcdcdc;
  190. }
  191. .si-col {
  192. width: 33.33%;
  193. box-sizing: border-box;
  194. padding: 10px 20px;
  195. border-right: 1px solid #dcdcdc;
  196. }
  197. }
  198. .scoped-table {
  199. max-height: 300px;
  200. overflow-y: auto;
  201. position: relative;
  202. box-shadow: 0 0 2px #ccc;
  203. // border-top: 1px solid #dcdcdc;
  204. // border-bottom: 1px solid #dcdcdc;
  205. ::v-deep .xl-pagination {
  206. position: absolute;
  207. }
  208. }
  209. .scoped-btn-more {
  210. position: absolute;
  211. left: 25px;
  212. }
  213. </style>