vue页面交互-弹窗关闭后刷新父页面时取消选中数据展示列表里的复选框

 

先看如下交互效果。 

 

 这是一个订单审核页面，通过勾选CheckBox列的checkbox选中某些行后，点击操作区“批量审核”按钮弹出审核窗口，在弹窗里审核完成，即点击“通过”或“拒绝”后，关闭弹窗，刷新订单审核页面，同时，取消此前选中的checkBox。

 

接下来说实现方式。

如下是页面结构。父窗体是TransactionReview.vue，弹框窗体是Review.vue。

 

 

TransactionReview.vue中<a-table>中定义属性事件:rowSelection="rowSelection"，每行行首显示CheckBox，这让用户可以进行勾选。
同时，页面有对Review.vue的声明：<review ref="reviewForm" @ok="modalFormOk1"></review>。
这样，通过点击“批量审核”按钮弹出子窗体（Review.vue）。

 

Review.vue页面中定义了弹框下面的2个按钮：通过 和 拒绝。并为两个按钮定义了click事件，都去调用editRiskViewRefuses(status)函数。
editRiskViewRefuses(status)函数去向服务端发起异步post请求，处理完成后通过$emit关闭弹窗并执行父窗体的@ok事件。

 

@ok定义在TransactionReview.vue的<review ref="reviewForm" @ok="modalFormOk1"></review>中。执行的事件函数是modalFormOk1，这个函数实现了页面数据的重新加载，并清除列表里的CheckBox选择。

 

这个项目的vue框架用的是Jeecg-Vue（jeecg是流行的前后端分离框架，后端是Jeecg-boot）。复选框的change事件onSelectChange、清空所有复选框的事件onClearSelected，均在页面依赖的JeecgListMixin.js中定义。

 

TransactionReview.vue （部分）

    <a-button type="primary" @click="batchReview()" icon="reload" style="margin-left: 8px">批量审核</a-button>

      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
        <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{
        selectedRowKeys.length }}</a>项
        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
      </div>
      
      <a-table
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :scroll="{ x: 2800, y: 500 }"
        :rowSelection="rowSelection"
        @change="handleTableChange">
      </a-table>
      
      <review ref="reviewForm" @ok="modalFormOk1"></review>
      
      
    computed: {
      rowSelection() {
        const {selectedRowKeys} = this;
        return {
          selectedRowKeys,
          onChange: (selectedRowKeys, selectedRows) => {
            this.selectedRowKeys = selectedRowKeys;
            this.ids = selectedRowKeys;
            //console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
          },
          getCheckboxProps: record => {
            console.log(record)
            return {
              props: {
                disabled: record.reviewState === 'pass' || record.reviewState === 'refuse' // Column configuration not to be checked

              },
            }
          }
        };
      }
    },
    methods: {
        modalFormOk1(){
            this.loadData();
            this.onClearSelected();
        },
        batchReview(){
            this.$refs.reviewForm.reviews(this.ids);
            // this.onClearSelected();
        },
    },

 

Review.vue （部分）

    // template -> a-modal -> template 定义页底的2个按钮
    <template slot="footer">
      <a-button type="primary" @click="editRiskViewRefuses('pass')">通过</a-button>
      <a-button type="primary" @click="editRiskViewRefuses('refuse')">拒绝</a-button>
    </template>

  export default {
    name: "review", //name指定Review.vue的name。
    data () {
      return {
        title:"审核",
        visible: false,
        productCode:'',
        model: {},
        products:'',
        dataSource:[],
        loading: false,
        validatorRules:{
        },
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        confirmLoading: false,
        form: this.$form.createForm(this),
        validatorRules:{
          reviewReason:{rules: [{ required: true, message: '审核原因不能为空' }]}
        },
      }
    },

    methods: {
      editRiskViewRefuses(status){

        this.form.validateFields((err, values) => {
          if (!err) {
            postAction('/riskOrderReview/reviewBatch',{'ids': this.model.ids.toString(),'reviewReason': values.reviewReason,'reviewState':status}).then((res)=>{
              if(res.success){
                this.$message.success(res.message);
                this.$emit('ok');
              }else{
                this.$message.warning(res.message);
              }
            }).finally(() => {
              this.confirmLoading = false;
              this.close();
            })
          }
        })
      },
      
    }