使用Ant Design Vue 做一个常用的修改对话框

使用Ant Design Vue 做一个常用的修改对话框
Ant Design Vue 官网：https://www.antdv.com/docs/vue/introduce-cn/

一：需求描述

首先我们需要有一个图1的前端界面，其次我们点击图1“修改”按钮的时候，弹出有遮罩层的一个对话框并在对话框中回显我们图一的“转账金额”和“到账时间”的数据；当我们点击对话框的“修改按钮时，则向后台服务器发起一个修改请求，在填写金额的同时使用正则进行校验

二：前端vue代码

2.1 图1：

由上图可知，第一行和第二行格式一样，都是一个标题一个内容，所以我们采用一个自定义组件来达到一个通用性的效果

2.1.1 自定义组件DescriptionItem（文件名）如下：

<template>
  <div style="font-size: 14px;margin: 8px 0;">
    <!-- 如果传入了title属性，则显示属性的值；否则使用标题二字作为title-->
    <p style="margin-right: 12px; display: inline-block; color: rgba(0,0,0,.5)">
      <template v-if="title">{{ title }}</template>
      <slot v-else name="title">标题</slot>
    </p>
    <!-- 如果content的值不为空，则显示具体的内容，否则显示无-->
    <template v-if="content != null">{{ content }}</template>
    <slot v-else name="content">
      <span class="text-muted">无</span>
    </slot>
  </div>
</template>
<style scoped>
  p {
    margin-bottom: 0;
  }
</style>
<script>
  export default {
    //用户接受父组件绑定的属性值
    props: ['title', 'content']
  }
</script>

2.1.2 父组件代码

  <template  slot-scope="record">
    <description-item title="转账金额">
      <template #content>
        {{record.transferAmount | filterAmount}}
        <a-button type="link" @click="editTransferAmountAndTime(record)" >
          修改
        </a-button>
      </template>
    </description-item>
    <description-item title="到账时间" :content="record.transferTime | filterDate | filterEmpty" />
</template>
<script>
<!-- 引入组件-->
import DescriptionItem from "@/components/DescriptionItem";
/*
引入api路径下的test.js中的edit，代码如下：
export function edit(params){
  return post('/test/edit', stringify(params));
}
* */
import {edit} from "@/api/test";
import moment from "moment";
export default {
  //组件注册
  components: {DescriptionItem},
  data() {
    return {
      //设置对话框默认不显示
      visible: false,
      //表单注册
      editContentForm : this.$form.createForm(this),
    }
  },

  created() {
    //页面加载完后执行
    this.fetch();
  },

  methods: {
    fetch(){
      // 请求后台数据
    },

    handleEditContentOk(){
      this.handleEditContentSubmit()
    },

    editTransferAmountAndTime(record){
      this.visible = true;
      this.contentId = record.id;
      //数据回显到对话框的表单中
      this.$nextTick(() => {
        this.editContentForm.setFieldsValue({
          transferAmount:record.transferAmount,
          transferTime: record.transferTime
        })
      })
    },

    handleEditContentSubmit(){
      this.editContentForm.validateFields(async (err, values) => {
        //表单数据验证
        if (err) {
          return;
        }
        this.loading = true;
        //向后台发起请求
        edit({
          id: this.contentId,
          transferAmount: values.transferAmount,
          transferTime: values.transferTime && moment(values.transferTime).format('YYYY-MM-DD 00:00:00')
        }).then(() => {
          this.$message.success("修改成功！")
        }).catch(({message}) => {
          this.$message.error(message);
        }).then(() => {
          this.loading = false;
          this.visible = false;
          //调用自定义的fetch()方法进行页面刷新
          this.fetch();
        });
      })
    }
  }
}
</script>

金额过滤器：
Vue.filter('filterAmount', function (amount) {
  amount = Number(amount);
  return '¥' + amount.toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
});
日期过滤器：
Vue.filter('filterDate', function (timestamp, pattern = 'YYYY-MM-DD') {
  if (timestamp == null) {
    return '';
  }
  return moment(timestamp).format(pattern);
});
空串过滤器：
Vue.filter('filterEmpty', function (value) {
  return value === '' ? null : value;
});

2.2 图2：

 <a-modal title="修改转账金额和到账时间"
           v-model="visible"
           okText="修改"
           :mask="true"
           @ok="handleEditContentOk"
           @cancle="visible = false">
    <a-form :form="editContentForm" @submit="handleEditContentSubmit">
      <a-form-item label="转账金额" :label-col="{ span: 4 }" :wrapper-col="{ span: 15 }">
        <a-input-number style="width: 100%;"
                        :formatter="value => `¥ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
                        :parser="value => value.replace(/¥\s?|(,*)/g, '')"
                        placeholder="请输入转账金额"
                        v-decorator="['transferAmount', { initvalue:{}, rules: [
            { pattern:/(?!^0*(\.0{1,2})?$)^\d{1,13}(\.\d{1,2})?$/,message: '请输入正确的金额!'},
            ] }]" />
      </a-form-item>
      <a-form-item label="到账时间" :label-col="{ span: 4 }" :wrapper-col="{ span: 15}">
        <a-date-picker style="width: 100%;" v-decorator="['transferTime']" />
      </a-form-item>
    </a-form>
  </a-modal>