<template>

  <div>

    <!-- 添加或修改规则引擎对话框 -->
    <el-button type="text" @click="dialogFormVisible = true">添加规则类型</el-button>

    <el-dialog title="添加规则" :visible.sync="dialogFormVisible">

      <el-form :model="type">

        <el-form-item label="规则名称" :label-width="formLabelWidth">

          <el-input v-model="type.name" autocomplete="off"></el-input>

        </el-form-item>

      </el-form>

      <div slot="footer" class="dialog-footer">

        <el-button @click="dialogFormVisible = false">取 消</el-button>

        <el-button type="primary" @click="submitForm">确 定</el-button>

      </div>

    </el-dialog>

    <el-table :data="arr" style="width: 100%">

      <el-table-column label="类型编号" width="180">

        <template slot-scope="scope">

          <span style="margin-left: 10px">{{ scope.row.id }}</span>

        </template>

      </el-table-column>

      <el-table-column label="类型名称" width="180">

        <template slot-scope="scope">

          <span style="margin-left: 10px">{{ scope.row.name }}</span>

        </template>

      </el-table-column>

      <el-table-column label="操作">

        <template slot-scope="scope">

          <el-button size="mini" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>

        </template>

      </el-table-column>

    </el-table>
  </div>

</template>

<script>

import {del, insert, list} from "@/api/type/type";

export default {

  //import引入的组件需要注入到对象中才能使用"

  components: {},

  props: {},

  data() {

    //这里存放数据"

    return {

      arr: [],

      type: {},

      rules: {

        name: [{required: true, message: '请输入规则名称', trigger: 'blur'}]

      },

      dialogFormVisible: false,

      formLabelWidth: '120px'

    };

  },

  methods: {

    List() {

      list().then(res => {

        this.arr = res;

      })

    },

    handleDelete(id) {

      if (confirm("你确定删除吗?")) {

        del(id).then(res => {

          this.$message.success(res.msg || "删除成功")

        })

      }

    },

    submitForm() {

      this.dialogFormVisible = true

      insert(this.type).then(res => {

        this.$message.success(res.msg || "添加成功")

      })

      this.dialogFormVisible = false;

    }

  },

  //生命周期 - 创建完成（可以访问当前this实例）",

  created() {

    this.List();

  }

}
</script>
<style scoped>
</style>
