Vue树形单选选择器

调用页面SuperviseTimerModal.vue代码如下：

<template>
  <div>
    <j-modal
      centered
      :title="title"
      :width="width"
      :visible="visible"
      :destroyOnClose="true"
      switchFullscreen
      :okButtonProps="{ class:{'jee-hidden': disableSubmit} }"
      @cancel="handleCancel"
      >
      <template slot="footer">
        <a-button type="primary" @click="submitForm">确定</a-button>
        <a-button  @click="handleCancel">关闭</a-button>
      </template>
      <a-spin :spinning="confirmLoading">
        <j-form-container :disabled="disableSubmit">
          <a-form :form="form" slot="detail">
            <a-row>
              <a-col :span="24">
                <a-form-item label="监督模型" :labelCol="labelCol" :wrapperCol="wrapperCol" class="bt-check">
                  <a-input v-model="superviseRuleDatasName" placeholder="请选择监督模型"  @click="showSelectRadioSuperviseRuleModal"></a-input>
                </a-form-item>
              </a-col>
              <a-col :span="24">
                <a-form-item label="cron表达式" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <j-cron ref="innerVueCron" v-decorator="['cronExp', { initialValue: '* * * * * ? *' }]" @change="setCorn"></j-cron>
                </a-form-item>
              </a-col>
              <a-col :span="24">
                <a-form-item label="参数" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <!--<a-textarea placeholder="请输入参数" :rows="5" v-decorator="['params', {}]" style="resize:none;"/>-->

                  <a-row :gutter="24">
                    <a-col :md="8" :sm="8">
                      <a-form-item label="参数说明" style="margin-bottom:0 !important;">
                        <a-input placeholder="参数说明" v-model.trim="defaultParamExplain" disabled/>
                      </a-form-item>
                    </a-col>
                    <a-col :md="8" :sm="8">
                      <a-form-item label="参数名称" style="margin-bottom:0 !important;">
                        <a-input placeholder="参数名称" v-model.trim="defaultParamName" disabled/>
                      </a-form-item>
                    </a-col>
                    <a-col :md="8" :sm="8">
                      <a-form-item label="参数值" style="margin-bottom:0 !important;">
                        <a-input placeholder="请输入参数值"  v-model.trim="defaultParamValue"></a-input>
                      </a-form-item>
                    </a-col>
                  </a-row>
                  <a-row :gutter="24">
                    <div v-for="(item,i) in paramList" class="docTemplate">
                      <a-col :md="8" :sm="8">
                        <a-form-item label="参数说明">
                          <a-input placeholder="参数说明"  v-model.trim="item.paramExplain" disabled></a-input>
                        </a-form-item>
                      </a-col>
                      <a-col :md="8" :sm="8">
                        <a-form-item label="参数名称">
                          <a-input placeholder="参数名称"  v-model.trim="item.paramName" disabled></a-input>
                        </a-form-item>
                      </a-col>
                      <a-col :md="8" :sm="8">
                        <a-form-item label="默认值">
                          <a-input placeholder="请输入默认值"  v-model.trim="item.paramValue"></a-input>
                        </a-form-item>
                      </a-col>
                      <!--<a-col :md="2" :sm="2" style="margin-top:30px" v-show="!disableSubmit">
                        <a-button type="primary" @click="deleteNode(i)" shape="circle"  icon="delete"></a-button>
                      </a-col>-->
                    </div>
                  </a-row>

                  <!-- 操作按钮区域 -->
                  <!--<div class="table-operator" style="margin-left: -20px" v-show="!disableSubmit">
                    <a-button @click="addNode" type="link" icon="plus">添加</a-button>
                  </div>-->
                </a-form-item>
              </a-col>
              <a-col :span="24">
                <a-form-item label="说明" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <a-textarea placeholder="请输入说明" :rows="5" v-decorator="['memo', {}]" style="resize:none;"/>
                </a-form-item>
              </a-col>
              <a-col :span="24">
                <a-form-item label="启用状态" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <j-dict-select-tag type="radioButton"  v-decorator="[ 'enable', {'initialValue':-1}]" :trigger-change="true" dictCode="quartz_enable"/>
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </j-form-container>
      </a-spin>

      <select-radio-supervise-rule-modal ref="selectRadioSuperviseRuleModal" @getSuperviseRuleDatas="getSuperviseRuleDatas"></select-radio-supervise-rule-modal>
    </j-modal>
  </div>
</template>

<script>

  import { httpAction, getAction } from '@/api/manage'
  import pick from 'lodash.pick'
  import JCron from "@/components/ksource/JCron";
  import JFormContainer from '@/components/ksource/JFormContainer'
  import SelectRadioSuperviseRuleModal from '../modules/SelectRadioSuperviseRuleModal'
  export default {
    name: 'SuperviseTimerModal',
    components: {
      JCron,
      JFormContainer,
      SelectRadioSuperviseRuleModal
    },
    data () {
      return {
        title:'定时添加',
        width:800,
        visible: false,
        disableSubmit: false,
        superviseRuleDatas: [],
        superviseRuleDatasName: [],
        defaultParamExplain:'',
        defaultParamName:'',
        defaultParamValue:'',
        paramList: [],
        form: this.$form.createForm(this),
        model: {},
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        confirmLoading: false,
        validatorRules: {
        },
        url: {
          add: "/supervise/superviseTimer/add",
          edit: "/supervise/superviseTimer/edit",
          queryById: "/supervise/superviseTimer/queryById"
        }
      }
    },
    methods: {
      setCorn(data){
        this.$nextTick(() => {
          this.model.cronExpression = data;
        })
        if (Object.keys(data).length==0) {
          this.$message.warning('请输入cron表达式!');
        }
      },
      showSelectRadioSuperviseRuleModal(){
        this.$refs.selectRadioSuperviseRuleModal.selectedIdList = this.superviseRuleDatas
        this.$refs.selectRadioSuperviseRuleModal.initView();
      },
      getSuperviseRuleDatas(idList,nameList,dataList){
        this.superviseRuleDatas = idList;
        this.superviseRuleDatasName = nameList;
        this.paramList = [];
        this.defaultParamExplain = '';
        this.defaultParamName = '';
        this.defaultParamValue = '';
        if(dataList.length != 0){
          if(dataList[0].paramsConfig != null && dataList[0].paramsConfig != '' && dataList[0].paramsConfig.indexOf('[{') != -1){
              let paramsConfig = JSON.parse(dataList[0].paramsConfig);
              let flag = 0;
              for (let param of paramsConfig) {
                if(flag == 0){
                  this.defaultParamExplain = param.paramExplain;
                  this.defaultParamName = param.paramName;
                  this.defaultParamValue = param.paramValue;
                }else{
                  this.paramList.push(param)
                }
                flag++;
              }
          }
        }
      },
      add () {
        this.visible=true
        this.edit({});
      },
      edit (record) {
        this.superviseRuleDatas = [];
        this.superviseRuleDatasName = [];
        this.paramList = [];
        this.defaultParamExplain = '';
        this.defaultParamName = '';
        this.defaultParamValue = '';
        this.form.resetFields();
        if(typeof(record.superviseId) != "undefined"){
          this.superviseRuleDatas = record.superviseId.split(",");
          this.superviseRuleDatasName = record.superviseId_dictText.split(",");
        }
        if(record.params != null && record.params != '' && record.params.indexOf('[{') != -1){
          let params = JSON.parse(record.params);
          let flag = 0;
          for (let item of params) {
            if(flag == 0){
              this.defaultParamExplain = item.paramExplain;
              this.defaultParamName = item.paramName;
              this.defaultParamValue = item.paramValue;
            }else{
              this.paramList.push(item)
            }
            flag++;
          }
        }
        this.model = Object.assign({}, record);
        this.visible = true;
        this.$nextTick(() => {
          this.form.setFieldsValue(pick(this.model,'superviseId','cronExp','enable','params','memo','createBy','createTime'))
        })
      },
      submitForm () {
        const that = this;
        if(that.superviseRuleDatas.length == 0){
          that.$message.warn("请选择监督模型");
          return false;
        }
        // 触发表单验证
        this.form.validateFields((err, values) => {
          if (!err) {
            that.confirmLoading = true;
            let httpurl = '';
            let method = '';
            if(!this.model.id){
              httpurl+=this.url.add;
              method = 'post';
            }else{
              httpurl+=this.url.edit;
              method = 'put';
            }
            this.model.superviseId = this.superviseRuleDatas.join(",");

            let newParamArr = [];
            let paramArr = this.paramList.filter(item => !((item.paramExplain == null || item.paramExplain == '') && (item.paramName == null || item.paramName == '') && (item.paramValue == null || item.paramValue == '')));
            let flag = 0;
            if((this.defaultParamName == null || this.defaultParamName == '') && (this.defaultParamValue != null && this.defaultParamValue != '')
              || (this.defaultParamName == null || this.defaultParamName == '') && (this.defaultParamExplain != null && this.defaultParamExplain != '')){
              flag++;
            }else if(this.defaultParamName != null && this.defaultParamName != ''){
              let obj = {};
              obj.paramExplain = this.defaultParamExplain;
              obj.paramName = this.defaultParamName;
              obj.paramValue = this.defaultParamValue;
              newParamArr.push(obj);
            }
            for (let i = 0; i < paramArr.length; i++) {
              if((paramArr[i].paramName == null || paramArr[i].paramName == '') && (paramArr[i].paramValue != null && paramArr[i].paramValue != '')
                || (paramArr[i].paramName == null || paramArr[i].paramName == '') && (paramArr[i].paramExplain != null && paramArr[i].paramExplain != '')){
                flag++;
              }else if(paramArr[i].paramName != null && paramArr[i].paramName != ''){
                newParamArr.push(paramArr[i]);
              }
            }
            if(flag > 0){
              this.$message.warn("参数名称不能为空")
              that.confirmLoading = false;
              return false;
            }
            let paramJson = '';
            if(newParamArr.length > 0){
              paramJson = JSON.stringify(newParamArr)
            }
            this.model.params = paramJson;
            let formData = Object.assign(this.model, values);
            console.log("表单提交数据",formData)
            httpAction(httpurl,formData,method).then((res)=>{
              if(res.success){
                that.$message.success(res.message);
                that.visible = false;
                that.$emit('ok');
              }else{
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
            })
          }

        })
      },
      //添加div
      addNode:function() {
        this.paramList.push({paramExplain: '', paramName: '', paramValue: ''});
      },
      //删除div
      deleteNode:function(i) {
        this.paramList.splice(i,1);  //删除index为i,位置的数组元素
      },
      handleCancel () {
        this.superviseRuleDatas = [];
        this.superviseRuleDatasName = [];
        this.visible = false;
      }
    }
  }
</script>

弹窗页面SelectRadioSuperviseRuleModal.vue代码如下：

 

<template>
  <div>
    <a-modal
      centered
      :title="title"
      :width="width"
      :visible="visible"
      :destroyOnClose="true"
      @cancel="handleCancel"
      cancelText="关闭">
      <a-card :bordered="false" class="mb10 searchCard">
        <div style="width: 20%; float: left; margin-top: -40px; margin-left: -30px">
          <a-spin :spinning="loading">
            <a-card :bordered="false">
              <div style="background: #fff; margin: 0px -5px;">
                <!-- 树-->
                <a-col :scroll="{ x:200 , y:innerHeight}" :md="10" :sm="24" class="treeHeight">
                  <a-tree
                    multiple
                    @select="onSelect"
                    :selectedKeys="selectedKeys"
                    :treeData="categoryTree"
                    :checkStrictly="checkStrictly"
                    :expandedKeys="iExpandedKeys"
                    :autoExpandParent="autoExpandParent"
                    @expand="onExpand"/>
                </a-col>
              </div>
            </a-card>
          </a-spin>
        </div>
        <div style="width: 80%; float: left; margin-top: -40px; padding-left: 1%;">
          <select-radio-supervise-rule-list ref="selectRadioSuperviseRuleList" :selectedIdList="selectedIdList"
                                            @ok="loadTree" @getSelectedDataList="getSelectedDataList"
                                            @addSelectData="addSelectData">
          </select-radio-supervise-rule-list>
        </div>
        <div style="width: 15%; float: left; margin-top: -20px; display: none">
          <a-card :title="'已选模型'" :bordered="false" :head-style="{padding:0}" :body-style="{padding:0}">
            <table style="width: 150%; text-align: center">
              <tr style="border-bottom: 1px solid #dedede; font-size: 14px; height: 35px; background-color: #e8e8e8">
                <th style="width: 35%">名称</th>
                <th style="width: 40%">编号</th>
                <th style="width: 50%">操作</th>
              </tr>
              <tr v-for="(item,index) in selectedDataList" style="border-bottom: 1px solid #dedede; height: 50px">
                <td><span :title="item.name">{{getSubString(item.name)}}</span></td>
                <td><span :title="item.code">{{getSubString(item.code)}}</span></td>
                <td>
                  <a @click="removeSelectedData(item)">删除</a>
                </td>
              </tr>
            </table>
            <div v-if="selectedDataList.length == 0" style="padding-top: 20px; width: 150%">
              <a-empty></a-empty>
            </div>
          </a-card>
        </div>
      </a-card>
      <template slot="footer">
        <a-button key="back" @click="handleCancel">关闭</a-button>
        <a-button type="primary" @click="checkSuperviseRule">选择</a-button>
      </template>
    </a-modal>
  </div>
</template>
<script>
  import SelectRadioSuperviseRuleList from './SelectRadioSuperviseRuleList'
  import { querySupersiveTypeTreeList } from '@/api/api'
  import { getAction } from '@/api/manage'
  import { startSuperviseRule } from '@/api/query'
  import {KsListMixin} from '@/mixins/KsListMixin'
  export default {
    name: 'SelectSuperviseRuleModal',
    mixins: [KsListMixin],
    components: {
      SelectRadioSuperviseRuleList
    },
    data() {
      return {
        width:"70%",
        title:"模型选择器",
        visible:false,
        iExpandedKeys: [],
        loading: false,
        autoExpandParent: true,
        categoryTree: [],
        selectedRecord:{},
        model: {},
        selectedKeys: [],
        currSelected: {},
        allTreeKeys: [],
        selectedDataList: [],
        selectedIdList: [],
        checkStrictly: true,
      }
    },
    created() {

    },
    methods: {
      getSubString(name){
        if(name.length > 5){
          name = name.substring(0,5)+"...";
        }
        return name;
      },
      initView() {
        this.visible = true
        this.loading = true
        this.selectedKeys = []
        this.currSelected = {}
        this.loadTree()
      },
      loadTree() {
        var that = this
        that.categoryTree = []
        querySupersiveTypeTreeList().then((res) => {
          if (res.success) {
            this.allTreeKeys = [];
            for (let i = 0; i < res.result.length; i++) {
              let temp = res.result[i]
              that.categoryTree.push(temp)
              that.setThisExpandedKeys(temp)
              that.getAllKeys(temp);
            }
            console.log(that.categoryTree)
            this.loading = false
          }
        })
        this.$refs.selectRadioSuperviseRuleList.selectedRowKeys = this.selectedIdList;
      },
      setThisExpandedKeys(node) {
        if (node.children && node.children.length > 0) {
          this.iExpandedKeys.push(node.key)
          for (let a = 0; a < node.children.length; a++) {
            this.setThisExpandedKeys(node.children[a])
          }
        }
      },
      onExpand(expandedKeys) {
        this.iExpandedKeys = expandedKeys
        this.autoExpandParent = false
      },
      onSelect(selectedKeys, e) {
        this.selectedRecord = e.node.dataRef
        let record = e.node.dataRef
        this.currSelected = Object.assign({}, record)
        this.model = this.currSelected
        this.selectedKeys = [record.key]
        this.model.parentId = record.parentId
        this.getSuperviseRuleList();
      },
      getSuperviseRuleList() {
        if(this.selectedRecord.pid == "0"){
          this.$refs.selectRadioSuperviseRuleList.getSuperviseRuleByType("","");
        }else{
          this.$refs.selectRadioSuperviseRuleList.getSuperviseRuleByType(this.selectedRecord.key,this.selectedRecord.name)
        }
      },
      getAllKeys(node) {
        this.allTreeKeys.push(node.key)
        if (node.children && node.children.length > 0) {
          for (let a = 0; a < node.children.length; a++) {
            this.getAllKeys(node.children[a])
          }
        }
      },
      checkSuperviseRule(){
        let nameList = [];
        for(let obj of this.selectedDataList){
          nameList.push(obj.name);
        }
        this.$emit("getSuperviseRuleDatas",this.selectedIdList,nameList,this.selectedDataList);
        this.visible = false
      },
      getSelectedDataList(selectedDataList){
        this.selectedDataList = selectedDataList;
      },
      addSelectData(record){
        this.selectedIdList = [];
        this.selectedDataList = [];
        this.selectedIdList.push(record.id)
        this.selectedDataList.push(record);
      },
      removeSelectedData(record){
        this.selectedIdList = [];
        this.selectedDataList = [];
        this.$refs.selectRadioSuperviseRuleList.selectedRowKeys = [];
      },
      handleCancel() {
        this.selectedDataList = [];
        this.selectedIdList = [];
        this.visible = false
      },
    },
  }


</script>
<style scoped>
  .anty-form-btn button {
    margin: 0 5px;
  }
  .header button {
    margin: 0 3px
  }
  .treeHeight{
    width: 100%;
    overflow: auto;
    height: calc(98vh - 225px);
  }
  .searchCard > .ant-card-body {
    padding: 20px 0 0 20px !important;
  }
  .ant-modal-body {
     padding: 20px 20px 0  20px!important;
   }
  .ant-table-tbody .ant-table-row td{
    padding-top: 10px;
    padding-bottom: 10px;
  }

</style>

 

列表页面SelectRadioSuperviseRuleList.vue代码如下

<template>
  <div>
    <a-card :bordered="false" class="mb15 searchCard">
      <!-- 查询区域 -->
      <div class="table-page-search-wrapper">
        <a-form layout="inline" @keyup.enter.native="searchQuery">
          <a-row :gutter="24">
            <a-col :md="8" :sm="8">
              <a-form-item label="编号" :labelCol="{span: 5}">
                <a-input placeholder="请输入编号查询" v-model="queryParam.code"></a-input>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="8">
              <a-form-item label="名称" :labelCol="{span: 5}">
                <a-input placeholder="请输入名称查询" v-model="queryParam.name"></a-input>
              </a-form-item>
            </a-col>
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-col :md="6" :sm="24">
                <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
                <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
              </a-col>
            </span>
          </a-row>
        </a-form>
      </div>
      <!-- 查询区域-END -->
      </a-card>
      <a-card :bordered="false">
      <!-- table区域-begin -->
      <div style="margin-top: -30px">
        <a-table
          ref="table"
          :scroll="{x:true}"
          bordered
          rowKey="id"
          :columns="columns"
          :dataSource="dataSource"
          :pagination="ipagination"
          :loading="loading"
          :rowSelection="{selectedRowKeys, onChange: onSelectChange, type :'radio'}"
          :customRow="customRowFn"
          class="j-table-force-nowrap"
          @change="handleTableChange">

          <span slot="state" slot-scope="text, record">
            <a-tag color="green" v-if="text == 'enabled'">启用</a-tag>
            <a-tag color="red" v-if="text == 'disabled'">禁用</a-tag>
            <a-tag color="orange" v-if="text == 'executing'">正在执行</a-tag>
            <a-tag color="orange" v-if="text == 'exception'">异常</a-tag>
          </span>

          <span slot="action" slot-scope="text, record">
            <a @click="handleDetail(record)">详情</a>
          </span>

        </a-table>
      </div>

      <supervise-rule-detail ref="superviseRuleDetail" ></supervise-rule-detail>
    </a-card>
  </div>
</template>

<script>

  import '@/assets/less/TableExpand.less'
  import { mixinDevice } from '@/utils/mixin'
  import { KsListMixin } from '@/mixins/KsListMixin'
  import { getAction,postAction } from '@/api/manage'
  import SuperviseRuleDetail from './SuperviseRuleDetail'
  import JSuperQuery from '@/components/ksource/JSuperQuery'

  export default {
    name: 'SelectSuperviseRuleList',
    mixins:[KsListMixin, mixinDevice],
    components: {
      SuperviseRuleDetail,
      JSuperQuery,
    },
    props: {
      selectedIdList: {
        type: Array,
        required: false
      },
    },
    data () {
      return {
        key: '',
        name: '',
        description: '监督规则管理页面',
        // 表头
        columns: [
          {
            title: '序号',
            dataIndex: '',
            key:'rowIndex',
            width:60,
            align:"center",
            customRender:(text,record,index)=>`${(this.ipagination.current - 1) * this.ipagination.pageSize + parseInt(index) +1}`
          },
          {
            title:'编号',
            align:"center",
            dataIndex: 'code'
          },
          {
            title:'名称',
            align:"center",
            dataIndex: 'name'
          },
          {
            title:'监督类型',
            align:"center",
            dataIndex: 'superviseTypeName'
          },
          {
            title:'分析方式',
            align:"center",
            customRender: function (t, r, index) {
              let analysisMode = "无"
              if(r.analysisMode == 'custom'){
                analysisMode = "查询脚本"
              }else if(r.analysisMode == 'script'){
                analysisMode = "动态脚本"
              }
              return analysisMode;
            }
          },
          {
            title:'状态',
            align:"center",
            dataIndex: 'state',
            scopedSlots: { customRender: 'state' },
          },
          {
            title: '操作',
            dataIndex: 'action',
            align:"center",
            width:147,
            scopedSlots: { customRender: 'action' }
          }
        ],
        url: {
          list: "/supervise/superviseRule/list",
        },
      }
    },
    created() {

    },
    methods: {
      loadData(arg){
        this.selectedRowKeys = this.selectedIdList;
        this.url.list = "/supervise/superviseRule/list";
        if(!this.url.list){
          this.$message.error("请设置url.list属性!")
          return
        }
        //加载数据 若传入参数1则加载第一页的内容
        if (arg === 1) {
          this.ipagination.current = 1;
        }
        var params = this.getQueryParams();//查询条件
        this.loading = true;
        let afterListCallBack = (res) => {
          if (res.success) {
            this.dataSource = res.result.records||res.result;
            let selectedDataList = [];
            for(let i = 0 ; i < this.dataSource.length; i++){
              for(let j = 0; j < this.selectedIdList.length; j++){
                if(this.dataSource[i].id == this.selectedIdList[j]){
                  selectedDataList.push(this.dataSource[i]);
                }
              }
            }
            this.$emit("getSelectedDataList",selectedDataList);
            // total为0时会出现条件误判，不进行分页在后端数据返回时设置total为null
            if(res.result.total != null)
            {
              this.ipagination.total = res.result.total;
            }
          }
          if(res.code===510){
            this.$message.warning(res.message)
          }
          this.loading = false;
        };
        getAction(this.url.list, params).then(afterListCallBack);
      },
      getSuperviseRuleByType(key,name){
        this.ipagination.current = 1;
        this.ipagination.total = 0;
        this.selectedRowKeys = this.selectedIdList;
        this.url.list = "/supervise/superviseRule/list";
        if(key == "" || key == null){
          this.key = '';
          this.name = '';
          this.loadData();
          return false;
        }else{
          this.url.list = "/supervise/superviseRule/list?superviseType="+key;
        }
        this.key = key;
        this.name = name;
        let obj = {};
        obj.superviseType = key;
        obj.name = this.queryParam.name;
        obj.code = this.queryParam.code;
        getAction('/supervise/superviseRule/list', obj).then(res => {
          if (res.success) {
            this.dataSource = res.result.records||res.result;
            if(res.result.total != null)
            {
              this.ipagination.total = res.result.total;
            }
          }
        }).catch(error => {
          this.$message.error('查询失败')
        })
      },
      onSelectChange(selectedRowKeys, selectionRows) {
        this.selectedRowKeys = selectedRowKeys;
        this.selectionRows = selectionRows;
        this.$emit("addSelectData",selectionRows[0]);
      },
      customRowFn(record) {
        return {
          on: {
            click: () => {
              let keys = [];
              keys.push(record.id);
              this.selectedRowKeys = keys;
              this.$emit("addSelectData",record);
            }
          }
        }
      },
      handleDetail(record){
        this.$refs.superviseRuleDetail.initView(record);
      },
    }
  }
</script>
<style scoped>
  @import '~@assets/less/common.less';
</style>