<template>

  <div>

    <!--条件查询-->

    <el-form :model="version">

      <el-form-item label="版本编码" prop="pass">

        <el-input type="text" v-model="version.versionCode" autocomplete="off"></el-input>

      </el-form-item>

      <el-form-item label="规则内容" prop="checkPass">

        <el-input type="text" v-model="version.ruleContent" autocomplete="off"></el-input>

      </el-form-item>

      <el-form-item label="引擎维护编号" prop="checkPass">

        <el-input type="text" v-model="version.engineMaintenanceId" autocomplete="off"></el-input>

      </el-form-item>

      <el-form-item>

        <el-button type="primary" @click="submitForm">查询</el-button>

      </el-form-item>

    </el-form>


    <!--    添加版本信息-->
    <el-button type="text" @click="dialogFormVisible = true">添加版本信息</el-button>

    <el-dialog title="添加信息" :visible.sync="dialogFormVisible">

      <el-form :model="version">

        <el-form-item label="版本类名" :label-width="formLabelWidth">

          <el-input v-model="version.versionClass" autocomplete="off"></el-input>

        </el-form-item>

        <el-form-item label="版本名称" :label-width="formLabelWidth">

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

        </el-form-item>


        <el-form-item label="版本编码" :label-width="formLabelWidth">

          <el-input v-model="version.versionCode" autocomplete="off"></el-input>

        </el-form-item>


        <el-form-item label="是否激活" :label-width="formLabelWidth">

          <el-input v-model="version.isActivate" autocomplete="off"></el-input>

        </el-form-item>


        <el-form-item label="版本状态" :label-width="formLabelWidth">

          <el-input v-model="version.status" autocomplete="off"></el-input>

        </el-form-item>


        <el-form-item label="版本测试状态" :label-width="formLabelWidth">

          <el-input v-model="version.testStatus" autocomplete="off"></el-input>

        </el-form-item>


        <el-form-item label="规则内容" :label-width="formLabelWidth">

          <el-input v-model="version.ruleContent" autocomplete="off"></el-input>

        </el-form-item>


        <el-form-item label="引擎维护编号" :label-width="formLabelWidth">

          <el-input v-model="version.engineMaintenanceId" autocomplete="off"></el-input>

        </el-form-item>


        <el-form-item label="描述" :label-width="formLabelWidth">

          <el-input v-model="version.description" 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="insert">确 定</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.versionClass }}</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="版本编码" width="180">

        <template slot-scope="scope">

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

        </template>

      </el-table-column>

      <el-table-column label="是否激活" width="180">

        <template slot-scope="scope">

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

        </template>

      </el-table-column>

      <el-table-column label="版本状态" width="180">

        <template slot-scope="scope">

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

        </template>

      </el-table-column>

      <el-table-column label="版本测试状态" width="180">

        <template slot-scope="scope">

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

        </template>

      </el-table-column>

      <el-table-column label="规则内容" width="180">

        <template slot-scope="scope">

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

        </template>

      </el-table-column>

      <el-table-column label="引擎维护编号" width="180">

        <template slot-scope="scope">

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

        </template>

      </el-table-column>

      <el-table-column label="描述" width="180">

        <template slot-scope="scope">

          <span style="margin-left: 10px">{{ scope.row.description }}</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 {list} from "@/api/version/version";

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

export default {

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

  components: {},

  props: {},

  data() {

    //这里存放数据"

    return {

      arr: [],

      version: {},

      dialogFormVisible: false,

      formLabelWidth: '120px'

    };

  },

  methods: {

    List() {

      list(this.version).then(res => {

        this.arr = res.data;

        console.log(res)

        console.log(this.arr)

      })

    },

    submitForm() {

      this.List();

    },

    insert() {

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

        this.$message.success("添加成功");

      })

      this.dialogFormVisible = false;

    },

    handleDelete(id) {

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

        del(id).then(res => {

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

        })

      }

    }

  },

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

  created() {

    this.List();

  }

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