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();
            })
          }
        })
      },
      
    }