[update] 财务管理模块前端页面，到账开票新增阶段接口对接

2021-09-09 17:03:06 +08:00
parent 1a932dfff0
commit d8a3b5853a
12 changed files with 1207 additions and 7 deletions
@@ -0,0 +1,142 @@
+<template>
+  <j-modal
+    :title="title"
+    :width="width"
+    :visible="visible"
+    :confirmLoading="confirmLoading"
+    switchFullscreen
+    @ok="handleOk"
+    @cancel="handleCancel"
+    okText="保存"
+    cancelText="关闭">
+    <a-spin :spinning="confirmLoading">
+      <a-form :form="form">
+        <a-form-item label="到账金额" :labelCol="labelCol" :wrapperCol="wrapperCol">
+          <a-input placeholder="请输入到账金额"
+                   v-decorator="['amountReceived',validatorRules.amountReceived]"
+                   :maxLength='50'
+                   @change="e => e.target.value = (e.target.value.replace(/[^0-9.]/g, '')).trim()"></a-input>
+        </a-form-item>
+        <a-form-item label="来款日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
+          <j-date placeholder="请选择来款日期"
+                  style="width: 100%;"
+                  v-decorator="['paymentDate',validatorRules.paymentDate]"
+                  :trigger-change="true"
+                  date-format="YYYY-MM-DD"/>
+        </a-form-item>
+        <a-form-item label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol">
+          <a-textarea
+            placeholder="请输入备注"
+            v-decorator="['remark']"
+            :auto-size="{ minRows: 3, maxRows: 6 }"
+            :maxLength='200'
+            @change="e => {e.target.value = (e.target.value + '').trim()}"/>
+        </a-form-item>
+      </a-form>
+    </a-spin>
+  </j-modal>
+</template>
+
+<script>
+import pick from 'lodash.pick'
+import { money } from '../../../../utils/validate'
+import JDate from '../../../../components/tools/JDate'
+import { addPaymentPhase } from '../../../../api/incomePaymentsApi'
+
+export default {
+  name: 'ArriveModule',
+  components: { JDate },
+  props: {
+    // 项目id
+    projectId: {
+      type: String,
+      required: false,
+      default: null
+    }
+  },
+  data() {
+    return {
+      title: '来款信息',
+      width: 600,
+      visible: false,
+      confirmLoading: false,
+      form: this.$form.createForm(this),
+      model: {},
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 5 }
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 18 }
+      },
+      validatorRules: {
+        amountReceived: {
+          rules: [{ required: true, validator: this.checkMoney }],
+          validateTrigger: 'blur'
+        },
+        paymentDate: {
+          rules: [{ required: true, message: '请选择来款日期' }],
+          validateTrigger: 'change'
+        }
+      }
+    }
+  },
+  methods: {
+    add() {
+      this.edit({})
+    },
+    edit(record) {
+      this.model = Object.assign({}, record)
+      this.visible = true
+      this.$nextTick(() => {
+        this.form.setFieldsValue(pick(this.model, 'amountReceived', 'paymentDate', 'remark'))
+      })
+    },
+    handleOk() {
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          values.projectId = this.projectId
+          const formData = Object.assign(this.model, values)
+          console.log('表单提交数据', formData)
+          addPaymentPhase(formData).then(res => {
+            if (res.success) {
+              this.$message.success(res.message)
+              this.$emit('ok')
+              this.close()
+            } else {
+              this.$message.warn(res.message)
+            }
+          })
+        }
+      })
+    },
+    handleCancel() {
+      this.close()
+    },
+    close() {
+      this.visible = false
+    },
+    /**
+     * 校验金额格式
+     * @param rules
+     * @param value
+     * @param callback
+     */
+    checkMoney(rules, value, callback) {
+      if (value) {
+        if (money(value)) {
+          callback()
+          return
+        }
+        callback('请输入正确格式的金额')
+      }
+      callback('请输入到账金额')
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>