<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="checkLevel">
                    <el-select v-model="queryParams.checkLevel" placeholder="请选择检测水平类型" clearable>
                        <el-option
                            v-for="dict in dict.type.sample_level"
                            :key="dict.value"
                            :label="dict.label"
                            :value="dict.value"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="样品量字码" prop="sampleCode" label-width="100">
                    <el-select v-model="queryParams.sampleCode" placeholder="请选择样本量字码" clearable>
                        <el-option
                            v-for="dict in dict.type.sample_code"
                            :key="dict.value"
                            :label="dict.label"
                            :value="dict.value"
                        />
                    </el-select>
                </el-form-item>
                <!--
                <el-form-item label="大节点" prop="typeCode">
                    <el-input v-model="queryParams.typeCode" placeholder="请输入大节点" clearable  @keyup.enter.native="handleQuery"/>
                </el-form-item>
                <el-form-item label="小节点" prop="checkType">
                    <el-input v-model="queryParams.checkType" placeholder="请输入小节点" clearable  @keyup.enter.native="handleQuery"/>
                </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">新增</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate">修改</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete">删除</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
            </el-col>
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

        <el-table v-loading="loading" :data="codeList" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center"/>
              <el-table-column label="id" align="center" prop="id" v-if="false"/>
              <el-table-column label="检测水平" align="center" prop="checkLevel">
                <template slot-scope="scope">
                    <dict-tag
                        :options="dict.type.sample_level"
                        :value="scope.row.checkLevel"
                    />
                </template>
              </el-table-column>
              <el-table-column label="开始值" align="center" prop="startValue"/>
              <el-table-column label="结束值" align="center" prop="endValue"/>
              <el-table-column label="样品量字码" align="center" prop="sampleCode">
                <template slot-scope="scope">
                    <dict-tag
                        :options="dict.type.sample_code"
                        :value="scope.row.sampleCode"
                    />
                </template>
              </el-table-column>
              <el-table-column label="创建时间" align="center" prop="createTime"/>
              <!--<el-table-column label="小节点" align="center" prop="checkType"/>
              <el-table-column label="大节点" align="center" prop="typeCode"/>-->
        </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="typeCode">
                    <el-input v-model="form.typeCode" placeholder="请输入大节点"/>
                </el-form-item>
                <el-form-item label="大节点" prop="typeCode">
                    <el-input v-model="form.typeCode" placeholder="请输入大节点"/>
                </el-form-item>-->
                <el-form-item label="检测水平" prop="checkLevel">
                    <el-select v-model="form.checkLevel" placeholder="请选择检测水平类型" clearable>
                        <el-option
                            v-for="dict in dict.type.sample_level"
                            :key="dict.value"
                            :label="dict.label"
                            :value="dict.value"
                        />
                    </el-select>
                    <span>（字典值）</span>
                </el-form-item>
                <el-form-item label="开始值" prop="startValue">
                    <el-input v-model="form.startValue" placeholder="请输入开始值" type="number" style="width:58%"/>
                </el-form-item>
                <el-form-item label="结束值" prop="endValue">
                    <el-input v-model="form.endValue" placeholder="请输入结束值" type="number" style="width:58%"/>
                </el-form-item>
                <el-form-item label="字码" prop="sampleCode">
                    <el-select v-model="form.sampleCode" placeholder="请选择样本量字码" clearable>
                        <el-option
                            v-for="dict in dict.type.sample_code"
                            :key="dict.value"
                            :label="dict.label"
                            :value="dict.value"
                        />
                    </el-select>
                    <span>（字典值）</span>
                </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 {listCode, getCode,delCode,addCode,updateCode } from "@/api/quality/code";

export default {
    name: "codeContent",
    dicts: ["sample_level","sample_code"],
    data() {
        return {
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 样本量字码-样品量字码表格数据
                codeList: [],
            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open: false,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                startValue: null,
                endValue: null,
                attr1: null,
                factoryCode: null,
                sampleCode: null,
                checkType: null,
                typeCode: null,
                checkLevel: null
            },
                // 表单参数
                form: {
                }
            ,
            // 表单校验
            rules: {
                startValue: [{required: true, message: "开始值不能为空", trigger: "blur" }],
                endValue: [{required: true, message: "结束值不能为空", trigger: "blur" }],
            }
        };
    },
    created() {
        this.getList();
    },
    methods: {
        /** 查询样本量字码-样品量字码列表 */
        getList() {
            this.loading = true;
            listCode(this.queryParams).then(response => {
                this.codeList = response.rows;
                this.total = response.total;
                this.loading = false;
            });
        },
        // 取消按钮
        cancel() {
            this.open = false;
            this.reset();
        },
        // 表单重置
        reset() {
            this.form = {
                    id: null,
                    startValue: null,
                    endValue: null,
                    attr1: null,
                    createBy: null,
                    createTime: null,
                    updateBy: null,
                    updateTime: null,
                    factoryCode: null,
                    delFlag: null,
                    sampleCode: null,
                    checkType: null,
                    typeCode: null,
                    checkLevel: 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
            getCode(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) {
                    updateCode(this.form).then((response) => {
                        this.$modal.msgSuccess("修改成功");
                        this.open = false;
                        this.getList();
                    });
                } else {
                    addCode(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 delCode(ids);
			}).then(() => {
				this.getList();
				this.$modal.msgSuccess("删除成功");
			}).catch(() => {});
            
        },
        /** 导出按钮操作 */
        handleExport() {
            this.download(
            "quality/code/export",
            {
                ...this.queryParams,
            },
            `code_${new Date().getTime()}.xlsx`
            );
        }
    }
}
</script>
