single.vue 7.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276
  1. <template>
  2. <div class="lookDetail">
  3. <div class="formContent-item_title">{{ chiData.residentName }} - {{ chiData.assets }} </div>
  4. <el-form
  5. ref="form"
  6. :model="formData"
  7. :rules="formRules"
  8. label-width="110px"
  9. >
  10. <template v-for="(item, index) in formLook">
  11. <el-col
  12. :span="12"
  13. :key="index"
  14. >
  15. <el-form-item :label="labelType(item.label, item.prop)">
  16. <template v-if="item.slot">
  17. <template v-if="item.slot == 'assetsArea' && thisItem['chargeType'] == 4">
  18. {{ !!thisItem['parkingDetail'] ? thisItem['parkingDetail'] : '--' }}
  19. </template>
  20. <template v-else-if="item.slot == 'chargeMode'">
  21. {{ !!chargeModeValue[thisItem[item.prop]] ? chargeModeValue[thisItem[item.prop]] : '--' }}
  22. </template>
  23. <template v-else-if="item.slot == 'chargeStatus'">
  24. <span class="redText">未缴费</span>
  25. </template>
  26. <template v-else-if="item.slot === 'payEndTime'">
  27. <div style="white-space: nowrap">{{ typeTimeTransition(thisItem.payBeginTime, thisItem.payEndTime) }}</div>
  28. </template>
  29. <template v-else>
  30. {{ thisItem[item.prop] || '--' }}
  31. </template>
  32. </template>
  33. <template v-else>
  34. {{ thisItem[item.prop] || '--' }}
  35. </template>
  36. </el-form-item>
  37. </el-col>
  38. </template>
  39. <div class="inline">
  40. <el-form-item
  41. label="支付方式"
  42. prop="payType"
  43. >
  44. <el-select v-model="formData.payType">
  45. <el-option
  46. label="微信"
  47. :value="7"
  48. ></el-option>
  49. <el-option
  50. label="支付宝"
  51. :value="2"
  52. ></el-option>
  53. <el-option
  54. label="现金"
  55. :value="3"
  56. ></el-option>
  57. <el-option
  58. label="刷卡"
  59. :value="6"
  60. ></el-option>
  61. <el-option
  62. label="其他"
  63. :value="5"
  64. ></el-option>
  65. </el-select>
  66. </el-form-item>
  67. <el-form-item label="账单金额(元)">
  68. <div style="white-space: nowrap">{{ thisItem.receivableAmount }}</div>
  69. </el-form-item>
  70. <el-form-item
  71. label="应收金额(元)"
  72. required
  73. >
  74. <el-input
  75. oninput="value=value.replace(/[^0-9.]/g,'')"
  76. disabled
  77. v-model="thisItem.amount"
  78. ></el-input>
  79. </el-form-item>
  80. </div>
  81. <el-form-item
  82. label="备注信息"
  83. placeholder="请输入备注信息"
  84. >
  85. <el-input
  86. type="textarea"
  87. maxlength="100"
  88. v-model="formData.remark"
  89. show-word-limit
  90. resize="none"
  91. rows="3"
  92. ></el-input>
  93. </el-form-item>
  94. </el-form>
  95. </div>
  96. </template>
  97. <script >
  98. export default {
  99. props: ['params'],
  100. data () {
  101. return {
  102. chargeModeValue: {
  103. 1: '固定收费',
  104. 2: '价格*面积收费',
  105. 4: '单价*用量'
  106. },
  107. formLook: [
  108. {
  109. label: '费用名称:',
  110. prop: 'chargeName'
  111. },
  112. {
  113. label: '计费方式:',
  114. prop: 'chargeMode',
  115. slot: 'chargeMode'
  116. },
  117. {
  118. label: '面积(㎡):',
  119. prop: 'assetsArea',
  120. slot: 'assetsArea'
  121. },
  122. {
  123. label: '价格(元/月):',
  124. prop: 'chargePrice'
  125. },
  126. {
  127. label: '费用金额(元):',
  128. prop: 'amount'
  129. },
  130. {
  131. label: '账期:',
  132. prop: 'paymentDays'
  133. },
  134. {
  135. label: '滞纳金(元):',
  136. prop: 'lateFee'
  137. },
  138. {
  139. label: '缴费状态:',
  140. prop: 'chargeStatus',
  141. slot: 'chargeStatus'
  142. },
  143. {
  144. label: '业主:',
  145. prop: 'residentName'
  146. },
  147. {
  148. label: '业主手机号:',
  149. prop: 'phone'
  150. },
  151. {
  152. label: '账单计费日期:',
  153. prop: 'payEndTime',
  154. slot: 'payEndTime'
  155. }
  156. ],
  157. thisItem: {},
  158. chiData: {},
  159. formData: {
  160. payType: '',
  161. remark: '',
  162. amount: '',
  163. billList: [
  164. {
  165. amount: '',
  166. billId: ''
  167. }
  168. ]
  169. },
  170. formRules: {
  171. payType: [this.$valid.selectRequired('支付方式')],
  172. amount: [this.$valid.inputRequired('实收金额')]
  173. }
  174. };
  175. },
  176. methods: {
  177. submit () {
  178. this.$refs.form.validate((valid) => {
  179. if (valid) {
  180. var loading = this.$loading();
  181. let installData = {
  182. payType: this.formData.payType,
  183. remark: this.formData.remark,
  184. billList: [
  185. {
  186. amount: this.thisItem.amount,
  187. billId: this.thisItem.id
  188. }
  189. ]
  190. };
  191. this.$http
  192. .post('/czc-charge/charge/bill/payee', installData)
  193. .then(({ status, msg }) => {
  194. if (status == 0) {
  195. this.$message.success(msg);
  196. this.params.callback();
  197. this.$emit('close');
  198. } else {
  199. this.$message.error(msg);
  200. }
  201. loading.close();
  202. })
  203. .catch(() => {
  204. loading.close();
  205. });
  206. }
  207. });
  208. },
  209. getDatali (id) {
  210. this.$http
  211. .get('/czc-charge/charge/bill/findUserBillDetail', { id: id })
  212. .then(({ data, msg, status }) => {
  213. if (status == 0) {
  214. this.thisItem = data;
  215. this.thisItem.amount = data.discountAmount;
  216. }
  217. })
  218. .catch(() => { });
  219. },
  220. typeTimeTransition (start, end) {
  221. let text = '';
  222. if (!!end) {
  223. let f = start.slice(5, 7),
  224. l = end.slice(5, 7);
  225. if (Number(f) == Number(l)) {
  226. text = start;
  227. } else {
  228. text = `${start.slice(0, 8)}-${end.slice(0, 8)}`;
  229. }
  230. }
  231. return text;
  232. },
  233. labelType (lab, val) {
  234. let type = this.thisItem['chargeType'];
  235. if (val == 'assetsArea') {
  236. if (type == 2) {
  237. lab = '用量(吨):';
  238. } else if (type == 3) {
  239. lab = '用量(度):';
  240. } else if (type == 4) {
  241. lab = '车位:';
  242. }
  243. } else if (val == 'chargePrice') {
  244. if (type == 2) {
  245. lab = '价格(元/吨):';
  246. } else if (type == 3) {
  247. lab = '价格(元/度):';
  248. }
  249. }
  250. return lab;
  251. }
  252. },
  253. created () {
  254. this.getDatali(this.params.data.id);
  255. debugger
  256. this.chiData = this.params.data;
  257. }
  258. };
  259. </script>
  260. <style lang="scss" scoped>
  261. .lookDetail {
  262. /deep/ .el-form-item__label,
  263. /deep/.el-form-item__content {
  264. font-size: 12px;
  265. white-space: nowrap;
  266. }
  267. }
  268. .inline {
  269. clear: left;
  270. display: flex;
  271. justify-content: space-between;
  272. }
  273. </style>