kd-aiot-frontend/src/components/ruleItemSelection/index.vue

<template>
  <el-dialog
    title="添加规则事项"
    :visible.sync="dialogVisible"
    :destroy-on-close="true"
    append-to-body
    width="70%"
    :before-close="handleClose"
  >
    <el-table
      ref="multipleTable"
      :data="ruleItem"
      tooltip-effect="dark"
      style="width: 100%; overflow: auto"
      height="80vh"
      border
      @selection-change="handleSelectionChange"
      :header-cell-style="{ background: '#F0F3F3' }"
    >
      <el-table-column type="selection" width="55" align="center">
      </el-table-column>
      <el-table-column :label="labelTitle + '事项'" prop="name" />
      <el-table-column :label="labelTitle + '内容'" prop="content" />
      <el-table-column :label="labelTitle + '标准'" prop="norm" />
    </el-table>
    <div slot="footer" class="dialog-footer">
      <el-button size="small" @click="submit" type="primary">提 交</el-button>
      <el-button size="small" @click="handleClose">关 闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import { getDetail, getCode } from '@/api/ruleManagement/matter';
  export default {
    props: {
      selectedMatter: {
        type: Array,
        default: () => []
      },
      labelTitle: {
        type: String,
        default: '巡点检'
      }
    },
    data() {
      return {
        dialogVisible: false,
        ruleItem: [],
        multipleSelection: []
      };
    },
    methods: {
      handleClose() {
        this.dialogVisible = false;
        this.$refs.multipleTable.clearSelection();
      },
      open() {
        this.multipleSelection = [];
        this.dialogVisible = true;
        this.$nextTick(() => {
          this.selectedMatter.map((item) => {
            this.ruleItem.forEach((c) => {
              if (item.id === c.id) {
                this.$refs.multipleTable.toggleRowSelection(c, true);
              }
            });
          });
        });
      },
      // 封装 - 获取规则下面的详情数据及事项
      async _getMatterRulesDetails(val) {
        const res = await getDetail(val);
        this.ruleItem = res.ruleItems;
      },
      submit() {
        if (!this.multipleSelection.length) {
          return this.$message.error('请选择事项!');
        }
        this.$emit('submit', this.multipleSelection);
        this.handleClose();
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      }
    }
  };
</script>

<style scoped>
  .tree-col {
    border: 1px solid #e6ebf5;
    margin-right: 10px;
    width: 20%;
    padding: 0 !important;
    height: 100%;
    overflow: auto;
  }
</style>