【开发】管理端的上传缴费凭证

2022-12-07 13:52:29 +08:00
parent 4dedcd20ea
commit e59a5c1b36
2 changed files with 135 additions and 10 deletions
@@ -0,0 +1,102 @@
+<template>
+  <j-modal
+    :title="title"
+    :width="width"
+    :visible="visible"
+    :confirmLoading="confirmLoading"
+    switchFullscreen
+    @ok="handleOk"
+    @cancel="handleCancel"
+    cancelText="关闭">
+    <a-spin :spinning="confirmLoading">
+      <a-form :form="form">
+        <a-form-item label="缴费凭证/付款说明" :labelCol="labelCol" :wrapperCol="wrapperCol">
+          <j-image-upload
+            isLessThan5M
+            isMultiple
+            bizPath="payment"
+            v-decorator="['paymentRecord',  validatorRules.paymentRecord]">
+          </j-image-upload>
+        </a-form-item>
+      </a-form>
+    </a-spin>
+  </j-modal>
+</template>
+
+<script>
+import JImageUpload from '@comp/standardsAssociation/JImageUpload'
+import {httpAction} from '@api/memberManage'
+
+export default {
+  name: 'UploadRecordModal',
+  components: {
+    JImageUpload
+  },
+  data() {
+    return {
+      visible: false,
+      title: '上传缴费凭证',
+      confirmLoading: false,
+      width: 800,
+      form: this.$form.createForm(this, {force: true}),
+      model: {},
+      labelCol: {
+        xs: {span: 24},
+        sm: {span: 8},
+        xxl: {span: 8}
+      },
+      wrapperCol: {
+        xs: {span: 24},
+        sm: {span: 15},
+        xxl: {span: 15}
+      },
+      validatorRules: {
+        paymentRecord: {
+          rules: [{
+            required: true, message: '请上传缴费凭证/付款说明'
+          }],
+          validateTrigger: ['blur', 'change']
+        },
+      },
+      url: {
+        add: '111'
+      }
+    }
+  },
+  methods: {
+    open(record) {
+      this.model = Object.assign({}, record)
+      this.visible = true
+    },
+    handleOk() {
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          this.confirmLoading = true
+          const formData = Object.assign({}, values)
+          let url = this.url.add
+          httpAction(url, formData, 'post').then(res => {
+            if (res.success) {
+              this.$emit('ok')
+              this.$message.success(res.message)
+              this.handleCancel()
+            } else {
+              this.$message.warning(res.message)
+            }
+          }).finally(() => {
+            this.confirmLoading = false
+          })
+        }
+      })
+
+    },
+    handleCancel() {
+      this.visible = false
+    }
+
+  }
+}
+</script>
+
+<style scoped>
+
+</style>