ibms/src/components/point/dynamicdata/applyRulesDialog.vue

<template>
  <el-dialog
    title="提示"
    :visible.sync="dialogVisible"
    width="60%"
    @close="handleClose"
    id="applyRules"
  >
    <span>对应规则有冲突，请处理</span>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="人工填写过表号功能号" name="first"></el-tab-pane>
      <el-tab-pane label="多个标识对应同一个信息点" name="second"></el-tab-pane>
    </el-tabs>
    <el-table :data="tableData" style="width: 100%;max-height:400px;" height="calc(100% - 160px)">
      <el-table-column type="expand" class-name="bgf5">
        <template slot-scope="props">
          <el-row>
            <el-col :span="8">
              <p>{{props.row.desc}}</p>
              <p>{{props.row.desc}}</p>
              <p>{{props.row.desc}}</p>
            </el-col>
            <el-col :span="8">
              <p>{{props.row.desc}}</p>
              <p>{{props.row.desc}}</p>
              <p>{{props.row.desc}}</p>
            </el-col>
            <el-col :span="8">
              <p>{{props.row.desc}}</p>
              <p>{{props.row.desc}}</p>
              <p>{{props.row.desc}}</p>
            </el-col>
          </el-row>
        </template>
      </el-table-column>
      <el-table-column label="设备实例本地名（本地编码）" prop="name" class-name="bgf5" align="center"></el-table-column>
      <el-table-column label="信息点" prop="name" align="center"></el-table-column>
      <el-table-column label="原值" prop="desc" align="center">
        <template slot-scope="scope">
          <el-radio v-model="scope.row.checked" label="old">备选项</el-radio>
        </template>
      </el-table-column>
      <el-table-column label="新值" prop="desc" align="center">
        <template slot-scope="scope">
          <el-radio v-model="scope.row.checked" label="new">备选项</el-radio>
        </template>
      </el-table-column>
    </el-table>
    <span slot="footer" class="dialog-footer">
      <el-button size="small">取消</el-button>
      <el-button size="small" type="primary">使用选择的表号功能号</el-button>
    </span>
  </el-dialog>
</template>
<script>
export default {
  data() {
    return {
      dialogVisible: false, //弹窗显示与隐藏
      tableData: [
        {
          id: "12987122",
          name: "好滋好味鸡蛋仔",
          category: "江浙小吃、小吃零食",
          desc: "荷兰优质淡奶，奶香浓而不腻",
          address: "上海市普陀区真北路",
          shop: "王小虎夫妻店",
          shopId: "10333"
        },
        {
          id: "12987123",
          name: "好滋好味鸡蛋仔",
          category: "江浙小吃、小吃零食",
          desc: "荷兰优质淡奶，奶香浓而不腻",
          address: "上海市普陀区真北路",
          shop: "王小虎夫妻店",
          shopId: "10333"
        },
        {
          id: "12987125",
          name: "好滋好味鸡蛋仔",
          category: "江浙小吃、小吃零食",
          desc: "荷兰优质淡奶，奶香浓而不腻",
          address: "上海市普陀区真北路",
          shop: "王小虎夫妻店",
          shopId: "10333"
        },
        {
          id: "12987126",
          name: "好滋好味鸡蛋仔",
          category: "江浙小吃、小吃零食",
          desc: "荷兰优质淡奶，奶香浓而不腻",
          address: "上海市普陀区真北路",
          shop: "王小虎夫妻店",
          shopId: "10333"
        },
        {
          id: "12987127",
          name: "好滋好味鸡蛋仔",
          category: "江浙小吃、小吃零食",
          desc: "荷兰优质淡奶，奶香浓而不腻",
          address: "上海市普陀区真北路",
          shop: "王小虎夫妻店",
          shopId: "10333"
        },
        {
          id: "12987128",
          name: "好滋好味鸡蛋仔",
          category: "江浙小吃、小吃零食",
          desc: "荷兰优质淡奶，奶香浓而不腻",
          address: "上海市普陀区真北路",
          shop: "王小虎夫妻店",
          shopId: "10333"
        },
        {
          id: "12987129",
          name: "好滋好味鸡蛋仔",
          category: "江浙小吃、小吃零食",
          desc: "荷兰优质淡奶，奶香浓而不腻",
          address: "上海市普陀区真北路",
          shop: "王小虎夫妻店",
          shopId: "10333"
        }
      ],
      activeName: "first" //当前所在tab页
    };
  },
  methods: {
    showDialog() {
    //   this.tableData = data;
      this.dialogVisible = true;
    },
    handleClick() {},
    handleClose(done) {},
    handleDelete(i, t) {}
  },
  mounted() {},
  created() {}
};
</script>
<style lang="scss" scoped>
#applyRules {
  /deep/ td.bgf5 {
    background-color: #f5f7fa;
  }
  td p {
    text-align: center;
  }
}
</style>