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  style="margin-bottom: 16px;">
        <i ></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();
            })
          }
        })
      },
      
    }

標籤：jQuery

上一篇：vue-baidu-map覆寫層不動態重繪問題

下一篇：CSS奇思妙想 -- 使用 CSS 創造藝術