<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="	创建人名称	" prop="createName">
        <el-input
          v-model="queryParams.createName"
          placeholder="请输入	创建人名称	"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="	更新人名称	" prop="updateName">
        <el-input
          v-model="queryParams.updateName"
          placeholder="请输入	更新人名称	"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="	甲烷C1	" prop="ngC1">
        <el-input
          v-model="queryParams.ngC1"
          placeholder="请输入	甲烷C1	"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="	氮气N2	" prop="ngN2">
        <el-input
          v-model="queryParams.ngN2"
          placeholder="请输入	氮气N2	"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="	二氧化碳CO2	" prop="ngCo2">
        <el-input
          v-model="queryParams.ngCo2"
          placeholder="请输入	二氧化碳CO2	"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="	乙烷C2	" prop="ngC2">
        <el-input
          v-model="queryParams.ngC2"
          placeholder="请输入	乙烷C2	"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="	丙烷C3	" prop="ngC3">
        <el-input
          v-model="queryParams.ngC3"
          placeholder="请输入	丙烷C3	"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="	水H2O	" prop="ngH2o">
        <el-input
          v-model="queryParams.ngH2o"
          placeholder="请输入	水H2O	"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="	硫化氢H2S	" prop="ngH2s">
        <el-input
          v-model="queryParams.ngH2s"
          placeholder="请输入	硫化氢H2S	"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="	氢气H2	" prop="ngH2">
        <el-input
          v-model="queryParams.ngH2"
          placeholder="请输入	氢气H2	"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="	一氧化碳CO	" prop="ngCo">
        <el-input
          v-model="queryParams.ngCo"
          placeholder="请输入	一氧化碳CO	"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="	氧气O2	" prop="ngO2">
        <el-input
          v-model="queryParams.ngO2"
          placeholder="请输入	氧气O2	"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="	异丁烷iC4	" prop="ngIc4">
        <el-input
          v-model="queryParams.ngIc4"
          placeholder="请输入	异丁烷iC4	"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="	正丁烷nC4	" prop="ngNc4">
        <el-input
          v-model="queryParams.ngNc4"
          placeholder="请输入	正丁烷nC4	"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="	异戊烷iC5	" prop="ngIc5">
        <el-input
          v-model="queryParams.ngIc5"
          placeholder="请输入	异戊烷iC5	"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="	正戊烷nC5	" prop="ngNc5">
        <el-input
          v-model="queryParams.ngNc5"
          placeholder="请输入	正戊烷nC5	"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="	己烷C6	" prop="ngC6">
        <el-input
          v-model="queryParams.ngC6"
          placeholder="请输入	己烷C6	"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="	庚烷C7	" prop="ngC7">
        <el-input
          v-model="queryParams.ngC7"
          placeholder="请输入	庚烷C7	"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="	辛烷C8	" prop="ngC8">
        <el-input
          v-model="queryParams.ngC8"
          placeholder="请输入	辛烷C8	"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="	壬烷C9	" prop="ngC9">
        <el-input
          v-model="queryParams.ngC9"
          placeholder="请输入	壬烷C9	"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="	癸烷C10	" prop="ngC10">
        <el-input
          v-model="queryParams.ngC10"
          placeholder="请输入	癸烷C10	"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="	氦气He	" prop="ngHe">
        <el-input
          v-model="queryParams.ngHe"
          placeholder="请输入	氦气He	"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="	氩气Ar	" prop="ngAr">
        <el-input
          v-model="queryParams.ngAr"
          placeholder="请输入	氩气Ar	"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="合计" prop="sum">
        <el-input
          v-model="queryParams.sum"
          placeholder="请输入合计"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="取样编号" prop="sampleno">
        <el-input
          v-model="queryParams.sampleno"
          placeholder="请输入取样编号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="仪表编号" prop="meterno">
        <el-input
          v-model="queryParams.meterno"
          placeholder="请输入仪表编号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="常用组分" prop="cyzf">
        <el-select v-model="queryParams.cyzf" placeholder="请选择常用组分" clearable>
          <el-option
            v-for="dict in dict.type.ngtools_cyzf"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['ngtools:components:add']"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['ngtools:components:edit']"
        >修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['ngtools:components:remove']"
        >删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['ngtools:components:export']"
        >导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="componentsList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="	ID	" align="center" prop="id" />
      <el-table-column label="	创建人名称	" align="center" prop="createName" />
      <el-table-column label="	更新人名称	" align="center" prop="updateName" />
      <el-table-column label="	甲烷C1	" align="center" prop="ngC1" />
      <el-table-column label="	氮气N2	" align="center" prop="ngN2" />
      <el-table-column label="	二氧化碳CO2	" align="center" prop="ngCo2" />
      <el-table-column label="	乙烷C2	" align="center" prop="ngC2" />
      <el-table-column label="	丙烷C3	" align="center" prop="ngC3" />
      <el-table-column label="	水H2O	" align="center" prop="ngH2o" />
      <el-table-column label="	硫化氢H2S	" align="center" prop="ngH2s" />
      <el-table-column label="	氢气H2	" align="center" prop="ngH2" />
      <el-table-column label="	一氧化碳CO	" align="center" prop="ngCo" />
      <el-table-column label="	氧气O2	" align="center" prop="ngO2" />
      <el-table-column label="	异丁烷iC4	" align="center" prop="ngIc4" />
      <el-table-column label="	正丁烷nC4	" align="center" prop="ngNc4" />
      <el-table-column label="	异戊烷iC5	" align="center" prop="ngIc5" />
      <el-table-column label="	正戊烷nC5	" align="center" prop="ngNc5" />
      <el-table-column label="	己烷C6	" align="center" prop="ngC6" />
      <el-table-column label="	庚烷C7	" align="center" prop="ngC7" />
      <el-table-column label="	辛烷C8	" align="center" prop="ngC8" />
      <el-table-column label="	壬烷C9	" align="center" prop="ngC9" />
      <el-table-column label="	癸烷C10	" align="center" prop="ngC10" />
      <el-table-column label="	氦气He	" align="center" prop="ngHe" />
      <el-table-column label="	氩气Ar	" align="center" prop="ngAr" />
      <el-table-column label="合计" align="center" prop="sum" />
      <el-table-column label="取样编号" align="center" prop="sampleno" />
      <el-table-column label="仪表编号" align="center" prop="meterno" />
      <el-table-column label="常用组分" align="center" prop="cyzf">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.ngtools_cyzf" :value="scope.row.cyzf"/>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['ngtools:components:edit']"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['ngtools:components:remove']"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改天然气组分对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="	创建人名称	" prop="createName">
          <el-input v-model="form.createName" placeholder="请输入	创建人名称	" />
        </el-form-item>
        <el-form-item label="	更新人名称	" prop="updateName">
          <el-input v-model="form.updateName" placeholder="请输入	更新人名称	" />
        </el-form-item>
        <el-form-item label="	甲烷C1	" prop="ngC1">
          <el-input v-model="form.ngC1" placeholder="请输入	甲烷C1	" />
        </el-form-item>
        <el-form-item label="	氮气N2	" prop="ngN2">
          <el-input v-model="form.ngN2" placeholder="请输入	氮气N2	" />
        </el-form-item>
        <el-form-item label="	二氧化碳CO2	" prop="ngCo2">
          <el-input v-model="form.ngCo2" placeholder="请输入	二氧化碳CO2	" />
        </el-form-item>
        <el-form-item label="	乙烷C2	" prop="ngC2">
          <el-input v-model="form.ngC2" placeholder="请输入	乙烷C2	" />
        </el-form-item>
        <el-form-item label="	丙烷C3	" prop="ngC3">
          <el-input v-model="form.ngC3" placeholder="请输入	丙烷C3	" />
        </el-form-item>
        <el-form-item label="	水H2O	" prop="ngH2o">
          <el-input v-model="form.ngH2o" placeholder="请输入	水H2O	" />
        </el-form-item>
        <el-form-item label="	硫化氢H2S	" prop="ngH2s">
          <el-input v-model="form.ngH2s" placeholder="请输入	硫化氢H2S	" />
        </el-form-item>
        <el-form-item label="	氢气H2	" prop="ngH2">
          <el-input v-model="form.ngH2" placeholder="请输入	氢气H2	" />
        </el-form-item>
        <el-form-item label="	一氧化碳CO	" prop="ngCo">
          <el-input v-model="form.ngCo" placeholder="请输入	一氧化碳CO	" />
        </el-form-item>
        <el-form-item label="	氧气O2	" prop="ngO2">
          <el-input v-model="form.ngO2" placeholder="请输入	氧气O2	" />
        </el-form-item>
        <el-form-item label="	异丁烷iC4	" prop="ngIc4">
          <el-input v-model="form.ngIc4" placeholder="请输入	异丁烷iC4	" />
        </el-form-item>
        <el-form-item label="	正丁烷nC4	" prop="ngNc4">
          <el-input v-model="form.ngNc4" placeholder="请输入	正丁烷nC4	" />
        </el-form-item>
        <el-form-item label="	异戊烷iC5	" prop="ngIc5">
          <el-input v-model="form.ngIc5" placeholder="请输入	异戊烷iC5	" />
        </el-form-item>
        <el-form-item label="	正戊烷nC5	" prop="ngNc5">
          <el-input v-model="form.ngNc5" placeholder="请输入	正戊烷nC5	" />
        </el-form-item>
        <el-form-item label="	己烷C6	" prop="ngC6">
          <el-input v-model="form.ngC6" placeholder="请输入	己烷C6	" />
        </el-form-item>
        <el-form-item label="	庚烷C7	" prop="ngC7">
          <el-input v-model="form.ngC7" placeholder="请输入	庚烷C7	" />
        </el-form-item>
        <el-form-item label="	辛烷C8	" prop="ngC8">
          <el-input v-model="form.ngC8" placeholder="请输入	辛烷C8	" />
        </el-form-item>
        <el-form-item label="	壬烷C9	" prop="ngC9">
          <el-input v-model="form.ngC9" placeholder="请输入	壬烷C9	" />
        </el-form-item>
        <el-form-item label="	癸烷C10	" prop="ngC10">
          <el-input v-model="form.ngC10" placeholder="请输入	癸烷C10	" />
        </el-form-item>
        <el-form-item label="	氦气He	" prop="ngHe">
          <el-input v-model="form.ngHe" placeholder="请输入	氦气He	" />
        </el-form-item>
        <el-form-item label="	氩气Ar	" prop="ngAr">
          <el-input v-model="form.ngAr" placeholder="请输入	氩气Ar	" />
        </el-form-item>
        <el-form-item label="合计" prop="sum">
          <el-input v-model="form.sum" placeholder="请输入合计" />
        </el-form-item>
        <el-form-item label="取样编号" prop="sampleno">
          <el-input v-model="form.sampleno" placeholder="请输入取样编号" />
        </el-form-item>
        <el-form-item label="仪表编号" prop="meterno">
          <el-input v-model="form.meterno" placeholder="请输入仪表编号" />
        </el-form-item>
        <el-form-item label="常用组分" prop="cyzf">
          <el-select v-model="form.cyzf" placeholder="请选择常用组分">
            <el-option
              v-for="dict in dict.type.ngtools_cyzf"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listComponents, getComponents, delComponents, addComponents, updateComponents } from "@/api/ngtools/components";

export default {
  name: "Components",
  dicts: ['ngtools_cyzf'],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 天然气组分表格数据
      componentsList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        createName: null,
        updateName: null,
        ngC1: null,
        ngN2: null,
        ngCo2: null,
        ngC2: null,
        ngC3: null,
        ngH2o: null,
        ngH2s: null,
        ngH2: null,
        ngCo: null,
        ngO2: null,
        ngIc4: null,
        ngNc4: null,
        ngIc5: null,
        ngNc5: null,
        ngC6: null,
        ngC7: null,
        ngC8: null,
        ngC9: null,
        ngC10: null,
        ngHe: null,
        ngAr: null,
        sum: null,
        sampleno: null,
        meterno: null,
        cyzf: null
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询天然气组分列表 */
    getList() {
      this.loading = true;
      listComponents(this.queryParams).then(response => {
        this.componentsList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        createName: null,
        createBy: null,
        createTime: null,
        updateName: null,
        updateBy: null,
        updateTime: null,
        ngC1: null,
        ngN2: null,
        ngCo2: null,
        ngC2: null,
        ngC3: null,
        ngH2o: null,
        ngH2s: null,
        ngH2: null,
        ngCo: null,
        ngO2: null,
        ngIc4: null,
        ngNc4: null,
        ngIc5: null,
        ngNc5: null,
        ngC6: null,
        ngC7: null,
        ngC8: null,
        ngC9: null,
        ngC10: null,
        ngHe: null,
        ngAr: null,
        sum: null,
        sampleno: null,
        meterno: null,
        cyzf: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加天然气组分";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids
      getComponents(id).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改天然气组分";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateComponents(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addComponents(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认删除天然气组分编号为"' + ids + '"的数据项？').then(function() {
        return delComponents(ids);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('ngtools/components/export', {
        ...this.queryParams
      }, `components_${new Date().getTime()}.xlsx`)
    }
  }
};
</script>
