eslint; 收入合同

2021-09-03 19:27:41 +08:00
parent c53de39b40
commit 303c1026f8
164 changed files with 5964 additions and 4788 deletions
@@ -0,0 +1,160 @@
+<template>
+  <div>
+    <a-form :form="form">
+      <a-row v-for="(item, index) in installmentList" :key="index">
+        <a-col :xxl="4" :xl="8" :sm="12">
+          <a-form-item :label="`${index + 1}阶段`" :labelCol="labelCol" :wrapperCol="wrapperCol">
+            <a-input placeholder="请输入名称"
+                     v-decorator="['installmentList['+index+'].phaseName',validatorRules.phaseName]"
+                     :maxLength='50'
+                     v-bind="$attrs"
+                     @change="e => {e.target.value = (e.target.value + '').trim()}"></a-input>
+          </a-form-item>
+        </a-col>
+        <a-col :xxl="4" :xl="8" :sm="12">
+          <a-form-item :label="`${index + 1}阶段应收`" :labelCol="labelCol" :wrapperCol="wrapperCol">
+            <a-input placeholder="请输入金额"
+                     v-decorator="['installmentList['+index+'].accountsReceivableAmount',validatorRules.accountsReceivableAmount]"
+                     :maxLength='50'
+                     v-bind="$attrs"
+                     @change="(e) => {e.target.value = (e.target.value.replace(/[^0-9.]/g,'')).trim()}"></a-input>
+          </a-form-item>
+        </a-col>
+        <a-col :xxl="5" :xl="8" :sm="12">
+          <a-form-item :label="`${index + 1}阶段应收时间`" :labelCol="labelCol" :wrapperCol="wrapperCol">
+            <j-date placeholder="请选择应收时间"
+                    style="width: 100%;"
+                    v-decorator="['installmentList['+index+'].accountsReceivableTime']"
+                    :trigger-change="true"
+                    v-bind="$attrs"
+                    date-format="YYYY-MM-DD"/>
+          </a-form-item>
+        </a-col>
+        <a-col :xxl="4" :xl="8" :sm="12">
+          <a-form-item :label="`${index + 1}阶段实收`" :labelCol="labelCol" :wrapperCol="wrapperCol">
+            <a-input placeholder="请输入金额"
+                     v-decorator="['installmentList['+index+'].paidAmount',validatorRules.paidAmount]"
+                     :maxLength='50'
+                     v-bind="$attrs"
+                     @change="(e) => {e.target.value = (e.target.value.replace(/[^0-9.]/g,'')).trim()}"></a-input>
+          </a-form-item>
+        </a-col>
+        <a-col :xxl="5" :xl="8" :sm="12">
+          <a-form-item :label="`${index + 1}阶段实收时间`" :labelCol="labelCol" :wrapperCol="wrapperCol">
+            <j-date placeholder="请选择实收时间"
+                    style="width: 100%;"
+                    v-decorator="['installmentList['+index+'].paidTime',validatorRules.paidTime]"
+                    :trigger-change="true"
+                    v-bind="$attrs"
+                    date-format="YYYY-MM-DD"/>
+          </a-form-item>
+        </a-col>
+        <a-col :xxl="2" :xl="8" :sm="12" class="operator-btn">
+          <a-button icon="plus" @click="addInstallmentItem" v-bind="$attrs"></a-button>
+          <a-button icon="minus" @click="deleteInstallmentItem(index)"
+                    v-bind="$attrs"
+                    :disabled="installmentList.length === 1">
+          </a-button>
+        </a-col>
+      </a-row>
+    </a-form>
+  </div>
+</template>
+
+<script>
+import JDate from '../tools/JDate'
+import pick from 'lodash.pick'
+
+export default {
+  name: 'InstallmentForm',
+  components: { JDate },
+  data() {
+    return {
+      form: this.$form.createForm(this),
+      model: {},
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 9 }
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 15 }
+      },
+      validatorRules: {
+        phaseName: {
+          rules: [{ required: true, message: '请输入名称'}],
+          validateTrigger: 'blur'
+        },
+        accountsReceivableAmount: {
+          rules: [{ required: true, message: '请输入金额'}],
+          validateTrigger: 'blur'
+        },
+        paidAmount: {
+          rules: [{ required: true, message: '请输入金额'}],
+          validateTrigger: 'blur'
+        },
+        paidTime: {
+          rules: [{ required: true, message: '请选择实收时间'}],
+          validateTrigger: 'blur'
+        }
+      },
+      index: 1,
+      installmentList: [],
+      defaultFormData: {
+        phaseName: null,
+        accountsReceivableAmount: null,
+        accountsReceivableTime: undefined,
+        paidAmount: null,
+        paidTime: undefined
+      }
+    }
+  },
+  methods: {
+    /**
+     * 初始化分期信息列表
+     * @param record
+     */
+    initInstallmentList(record) {
+      // 判断是否为编辑
+      if (record.installmentList && record.installmentList.length > 0) {
+        this.installmentList = record.installmentList
+      } else {
+        record.installmentList = [this.defaultFormData]
+      }
+      this.model = Object({}, record)
+      this.installmentList = record.installmentList
+      this.$nextTick(() => {
+        this.form.setFieldsValue(pick(this.model, 'installmentList'))
+      })
+    },
+    /**
+     * 添加一个分期信息
+     */
+    addInstallmentItem() {
+      this.installmentList.push(this.defaultFormData)
+    },
+    deleteInstallmentItem(index) {
+      this.installmentList.splice(index, 1)
+    },
+    handleSave() {
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          this.$emit('ok', values)
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+.operator-btn {
+  height: 40px;
+  display: flex;
+  align-items: center;
+
+  .ant-btn {
+    margin-left: 10px;
+  }
+}
+</style>