<template>
    <div>
            <SearchBox ref="searchBarRef" :formName="search" :formData="query" @showPopupUser="showPop" showResetButton @reset="reset"></SearchBox>
        <ButtonBar @search="handleSearch" @add="handleAdd" @remove="handleRemoveBatch" @edit="handleEditBatch"
            @upload="handleUpload" @download="handleDownload" @import="handleImport" @export="handleExport"></ButtonBar>
        <el-card :body-style="cardBodyStyle">
            <el-table :data="tableData" border highlight-current-row @selection-change="handleSelectionChange" style="height: 500px;">
                <el-table-column type="selection" fixed></el-table-column>
                <el-table-column type="index" label="序号" align="center" width="60">
                    <template #default="scope">
                        <span>{{ scope.$index + (currentPage - 1) * pageSize + 1 }}</span>
                    </template>
                </el-table-column>
                <el-table-column v-if="false" prop="" label="ID" width="120" header-align="center" align="center"
                    show-overflow-tooltip>
                </el-table-column>
                <el-table-column v-if="false" prop="createEmpId" label="创建人id" width="300" header-align="center"
                    align="center" show-overflow-tooltip>
                </el-table-column>
                <el-table-column v-if="false" prop="createDtm" label="创建时间" width="240" header-align="center"
                    align="center" show-overflow-tooltip>
                </el-table-column>
                <el-table-column v-if="false" prop="modifyEmpId" label="修改人id" width="300" header-align="center"
                    align="center" show-overflow-tooltip>
                </el-table-column>
                <el-table-column v-if="false" prop="modifyDtm" label="修改时间" width="240" header-align="center"
                    align="center" show-overflow-tooltip>
                </el-table-column>
                <el-table-column v-if="false" prop="cancleEmpId" label="删除人ID" width="300" header-align="center"
                    align="center" show-overflow-tooltip>
                </el-table-column>
                <el-table-column v-if="false" prop="cancleDtm" label="删除时间" width="240" header-align="center"
                    align="center" show-overflow-tooltip>
                </el-table-column>
                <el-table-column v-if="false" prop="cancleYn" label="删除标记" width="240" header-align="center"
                    align="center" show-overflow-tooltip>
                </el-table-column>
                <el-table-column v-if="true" prop="propCd" label="成分目标编号" width="150" header-align="center"
                    align="center" show-overflow-tooltip>
                </el-table-column>
                <el-table-column v-if="true" prop="tfeTarg" label="TFe目标值" width="100" header-align="center"
                    align="right" show-overflow-tooltip>
                </el-table-column>
                <el-table-column v-if="true" prop="tfeMin" label="TFe最小值" width="100" header-align="center"
                    align="right" show-overflow-tooltip>
                </el-table-column>
                <el-table-column v-if="true" prop="tfeMax" label="TFe最大值" width="100" header-align="center"
                    align="right" show-overflow-tooltip>
                </el-table-column>
                <el-table-column v-if="true" prop="sTarg" label="S目标值" width="80" header-align="center" align="right"
                    show-overflow-tooltip>
                </el-table-column>
                <el-table-column v-if="true" prop="sMin" label="S最小值" width="80" header-align="center" align="right"
                    show-overflow-tooltip>
                </el-table-column>
                <el-table-column v-if="true" prop="sMax" label="S最大值" width="80" header-align="center" align="right"
                    show-overflow-tooltip>
                </el-table-column>
                <el-table-column v-if="true" prop="cuTarg" label="Cu目标值" width="100" header-align="center" align="right"
                    show-overflow-tooltip>
                </el-table-column>
                <el-table-column v-if="true" prop="cuMin" label="Cu最小值" width="100" header-align="center" align="right"
                    show-overflow-tooltip>
                </el-table-column>
                <el-table-column v-if="true" prop="cuMax" label="Cu最大值" width="100" header-align="center" align="right"
                    show-overflow-tooltip>
                </el-table-column>
                <el-table-column v-if="true" prop="pTarg" label="P目标值" width="80" header-align="center" align="right"
                    show-overflow-tooltip>
                </el-table-column>
                <el-table-column v-if="true" prop="pMin" label="P最小值" width="80" header-align="center" align="right"
                    show-overflow-tooltip>
                </el-table-column>
                <el-table-column v-if="true" prop="pMax" label="P最大值" width="80" header-align="center" align="right"
                    show-overflow-tooltip>
                </el-table-column>
                <el-table-column v-if="true" prop="tio2Targ" label="TiO2目标值" width="110" header-align="center"
                    align="right" show-overflow-tooltip>
                </el-table-column>
                <el-table-column v-if="true" prop="tio2Min" label="TiO2最小值" width="110" header-align="center"
                    align="right" show-overflow-tooltip>
                </el-table-column>
                <el-table-column v-if="true" prop="tio2Max" label="TiO2最大值" width="110" header-align="center"
                    align="right" show-overflow-tooltip>
                </el-table-column>
                <el-table-column v-if="true" prop="sio2Targ" label="SiO2目标值" width="110" header-align="center"
                    align="right" show-overflow-tooltip>
                </el-table-column>
                <el-table-column v-if="true" prop="sio2Min" label="SiO2最小值" width="110" header-align="center"
                    align="right" show-overflow-tooltip>
                </el-table-column>
                <el-table-column v-if="true" prop="sio2Max" label="SiO2最大值" width="110" header-align="center"
                    align="right" show-overflow-tooltip>
                </el-table-column>
                <el-table-column v-if="true" prop="mgoTarg" label="MgO目标值" width="110" header-align="center"
                    align="right" show-overflow-tooltip>
                </el-table-column>
                <el-table-column v-if="true" prop="mgoMin" label="MgO最小值" width="110" header-align="center"
                    align="right" show-overflow-tooltip>
                </el-table-column>
                <el-table-column v-if="true" prop="mgoMax" label="MgO最大值" width="110" header-align="center"
                    align="right" show-overflow-tooltip>
                </el-table-column>
                <el-table-column v-if="true" prop="caoTarg" label="CaO目标值" width="100" header-align="center"
                    align="right" show-overflow-tooltip>
                </el-table-column>
                <el-table-column v-if="true" prop="caoMin" label="CaO最小值" width="100" header-align="center"
                    align="right" show-overflow-tooltip>
                </el-table-column>
                <el-table-column v-if="true" prop="caoMax" label="CaO最大值" width="100" header-align="center"
                    align="right" show-overflow-tooltip>
                </el-table-column>
                <el-table-column v-if="true" prop="al2o3Targ" label="Al2O3目标值" width="120" header-align="center"
                    align="right" show-overflow-tooltip>
                </el-table-column>
                <el-table-column v-if="true" prop="al2o3Min" label="Al2O3最小值" width="120" header-align="center"
                    align="right" show-overflow-tooltip>
                </el-table-column>
                <el-table-column v-if="true" prop="al2o3Max" label="Al2O3最大值" width="120" header-align="center"
                    align="right" show-overflow-tooltip>
                </el-table-column>
                <el-table-column v-if="true" prop="mnTarg" label="Mn目标值" width="100" header-align="center" align="right"
                    show-overflow-tooltip>
                </el-table-column>
                <el-table-column v-if="true" prop="mnMin" label="Mn最小值" width="100" header-align="center" align="right"
                    show-overflow-tooltip>
                </el-table-column>
                <el-table-column v-if="true" prop="mnMax" label="Mn最大值" width="100" header-align="center" align="right"
                    show-overflow-tooltip>
                </el-table-column>
                <el-table-column v-if="true" prop="znTarg" label="Zn目标值" width="90" header-align="center" align="right"
                    show-overflow-tooltip>
                </el-table-column>
                <el-table-column v-if="true" prop="znMin" label="Zn最小值" width="90" header-align="center" align="right"
                    show-overflow-tooltip>
                </el-table-column>
                <el-table-column v-if="true" prop="znMax" label="Zn最大值" width="90" header-align="center" align="right"
                    show-overflow-tooltip>
                </el-table-column>
                <el-table-column v-if="false" prop="useFlag" label="0 在用 禁用" width="200" header-align="center"
                    align="center" show-overflow-tooltip>
                </el-table-column>


                <el-table-column label="操作" header-align="center" align="center" width="200px" fixed="right">
                    <template #default="scope">
                        <el-button plain type="warning" @click="handleEdit(scope.row)">编辑</el-button>
                        <el-button plain type="danger" @click="handleDelete(scope.row )">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <el-card :body-style="cardBodyStyle">
            <el-pagination :current-page="currentPage" :page-size="pageSize" :page-sizes="pageSizes" :total="totalRows"
                background="background" layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
                @current-change="handleCurrentChange">
            </el-pagination>
        </el-card>

        <el-dialog :close-on-click-modal="false" draggable :title="dialogName" v-model="dialogVisible" width="900px"
            top="5vh" @open="openDialog" :before-close="handleCancelSave">
            <el-form :model="form" label-width="80px" label-position="right" inline ref="ruleFormRef" :rules="rules">
                <el-row>
                    <el-col :span="1"></el-col>
                    <el-form-item label="成分目标编号" prop="propCd" style="white-space: nowrap;">
                        <el-input v-model="form.propCd" clearable style="width: 150px"></el-input>
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-col :span="1"></el-col>
                    <el-form-item label="TFe目标值" style="white-space: nowrap;" prop="tfeTarg">
                        <el-input v-model="form.tfeTarg" clearable style="width: 150px"></el-input>
                    </el-form-item>
                    <el-form-item label="TFe最小值" style="white-space: nowrap;" prop="tfeMin">
                        <el-input v-model="form.tfeMin" clearable style="width: 150px"></el-input>
                    </el-form-item>
                    <el-form-item label="TFe最大值" style="white-space: nowrap;" prop="tfeMax">
                        <el-input v-model="form.tfeMax" clearable style="width: 150px"></el-input>
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-col :span="1"></el-col>
                    <el-form-item label="S目标值" style="white-space: nowrap;" prop="sTarg">
                        <el-input v-model="form.sTarg" clearable style="width: 150px"></el-input>
                    </el-form-item>
                    <el-form-item label="S最小值" style="white-space: nowrap;" prop="sMin">
                        <el-input v-model="form.sMin" clearable style="width: 150px"></el-input>
                    </el-form-item>
                    <el-form-item label="S最大值" style="white-space: nowrap;" prop="sMax">
                        <el-input v-model="form.sMax" clearable style="width: 150px"></el-input>
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-col :span="1"></el-col>
                    <el-form-item label="Cu目标值" style="white-space: nowrap;" prop="cuTarg">
                        <el-input v-model="form.cuTarg" clearable style="width: 150px"></el-input>
                    </el-form-item>
                    <el-form-item label="Cu最小值" style="white-space: nowrap;" prop="cuMin">
                        <el-input v-model="form.cuMin" clearable style="width: 150px"></el-input>
                    </el-form-item>
                    <el-form-item label="Cu最大值" style="white-space: nowrap;" prop="cuMax">
                        <el-input v-model="form.cuMax" clearable style="width: 150px"></el-input>
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-col :span="1"></el-col>
                    <el-form-item label="P目标值" style="white-space: nowrap;" prop="pTarg">
                        <el-input v-model="form.pTarg" clearable style="width: 150px"></el-input>
                    </el-form-item>
                    <el-form-item label="P最小值" style="white-space: nowrap;" prop="pMin">
                        <el-input v-model="form.pMin" clearable style="width: 150px"></el-input>
                    </el-form-item>
                    <el-form-item label="P最大值" style="white-space: nowrap;" prop="pMax">
                        <el-input v-model="form.pMax" clearable style="width: 150px"></el-input>
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-col :span="1"></el-col>
                    <el-form-item label="TiO2目标值" style="white-space: nowrap;" prop="tio2Targ">
                        <el-input v-model="form.tio2Targ" clearable style="width: 150px"></el-input>
                    </el-form-item>
                    <el-form-item label="TiO2最小值" style="white-space: nowrap;" prop="tio2Min">
                        <el-input v-model="form.tio2Min" clearable style="width: 150px"></el-input>
                    </el-form-item>
                    <el-form-item label="TiO2最大值" style="white-space: nowrap;" prop="tio2Max">
                        <el-input v-model="form.tio2Max" clearable style="width: 150px"></el-input>
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-col :span="1"></el-col>
                    <el-form-item label="SiO2目标值" style="white-space: nowrap;" prop="sio2Targ">
                        <el-input v-model="form.sio2Targ" clearable style="width: 150px"></el-input>
                    </el-form-item>
                    <el-form-item label="SiO2最小值" style="white-space: nowrap;" prop="sio2Min">
                        <el-input v-model="form.sio2Min" clearable style="width: 150px"></el-input>
                    </el-form-item>
                    <el-form-item label="SiO2最大值" style="white-space: nowrap;" prop="sio2Max">
                        <el-input v-model="form.sio2Max" clearable style="width: 150px"></el-input>
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-col :span="1"></el-col>
                    <el-form-item label="MgO目标值" style="white-space: nowrap;" prop="mgoTarg">
                        <el-input v-model="form.mgoTarg" clearable style="width: 150px"></el-input>
                    </el-form-item>
                    <el-form-item label="MgO最小值" style="white-space: nowrap;" prop="mgoMin">
                        <el-input v-model="form.mgoMin" clearable style="width: 150px"></el-input>
                    </el-form-item>
                    <el-form-item label="MgO最大值" style="white-space: nowrap;" prop="mgoMax">
                        <el-input v-model="form.mgoMax" clearable style="width: 150px"></el-input>
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-col :span="1"></el-col>
                    <el-form-item label="CaO目标值" style="white-space: nowrap;" prop="caoTarg">
                        <el-input v-model="form.caoTarg" clearable style="width: 150px"></el-input>
                    </el-form-item>
                    <el-form-item label="CaO最小值" style="white-space: nowrap;" prop="caoMin">
                        <el-input v-model="form.caoMin" clearable style="width: 150px"></el-input>
                    </el-form-item>
                    <el-form-item label="CaO最大值" style="white-space: nowrap;" prop="caoMax">
                        <el-input v-model="form.caoMax" clearable style="width: 150px"></el-input>
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-col :span="1"></el-col>
                    <el-form-item label="Al2O3目标值" style="white-space: nowrap;" prop="al2o3Targ">
                        <el-input v-model="form.al2o3Targ" clearable style="width: 150px"></el-input>
                    </el-form-item>
                    <el-form-item label="Al2O3最小值" style="white-space: nowrap;" prop="al2o3Min">
                        <el-input v-model="form.al2o3Min" clearable style="width: 150px"></el-input>
                    </el-form-item>
                    <el-form-item label="Al2O3最大值" style="white-space: nowrap;" prop="al2o3Max">
                        <el-input v-model="form.al2o3Max" clearable style="width: 150px"></el-input>
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-col :span="1"></el-col>
                    <el-form-item label="Mn目标值" style="white-space: nowrap;" prop="mnTarg">
                        <el-input v-model="form.mnTarg" clearable style="width: 150px"></el-input>
                    </el-form-item>
                    <el-form-item label="Mn最小值" style="white-space: nowrap;" prop="mnMin">
                        <el-input v-model="form.mnMin" clearable style="width: 150px"></el-input>
                    </el-form-item>
                    <el-form-item label="Mn最大值" style="white-space: nowrap;" prop="mnMax">
                        <el-input v-model="form.mnMax" clearable style="width: 150px"></el-input>
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-col :span="1"></el-col>
                    <el-form-item label="Zn目标值" style="white-space: nowrap;" prop="znTarg">
                        <el-input v-model="form.znTarg" clearable style="width: 150px"></el-input>
                    </el-form-item>
                    <el-form-item label="Zn最小值" style="white-space: nowrap;" prop="znMin">
                        <el-input v-model="form.znMin" clearable style="width: 150px"></el-input>
                    </el-form-item>
                    <el-form-item label="Zn最大值" style="white-space: nowrap;" prop="znMax">
                        <el-input v-model="form.znMax" clearable style="width: 150px"></el-input>
                    </el-form-item>
                </el-row>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="success" @click="handleSave(ruleFormRef)">保存</el-button>
                    <el-button type="danger" @click="handleCancelSave">取消</el-button>
                </div>
            </template>
        </el-dialog>


    </div>
</template>

<script setup>
    import ButtonBar from '@/components/ButtonBar.vue'

    import {
        ref,
        reactive,
        onMounted,
        getCurrentInstance
    } from 'vue'

    const {
        proxy
    } = getCurrentInstance()

    import SearchBox from '@/components/SearchBox.vue'
    const searchBarRef = ref(null)

    import tools from '@/tools'
    const cardBodyStyle = ref(tools.style.card)
    const inputStyle = ref(tools.style.input)

    onMounted(() => {
        handleSearch()
    })



    /**
     *   查询
     */




    const query = ref({
           propCd: ''
   })
   const tableData = ref([])
   const handleSearch = () => {
       currentPage.value = 1
       getTableData()
   }

   const getTableData = () => {
       var url = 'pla/PropMatlTarg/query'
       var param = {
           page: currentPage.value,
           rows: pageSize.value,
           params: JSON.stringify(query.value)
       }
       proxy.$axios.get(url, param).then(response => {
            if (response.data.code == '0') {
                tableData.value = response.data.data.records
                totalRows.value = response.data.data.total
            } else {
                ElMessage.error('操作失败！' + response.data.msg)
            }
        })
    }
    /**
     *   查询
     */

    /**
     * 分页
     */
    const currentPage = ref(1)
    const totalRows = ref(0)
    const pageSizes = ref([5, 10, 20, 30, 40])
    const pageSize = ref(10)
    const handleSizeChange = (val) => {
        pageSize.value = val
        getTableData()
    }
    const handleCurrentChange = (val) => {
        currentPage.value = val
        getTableData()
    }
    /**
     * 分页
     */


    /**
     * 新增
     */
    const dialogVisible = ref(false)
    const form = ref({
        propCd: '', 
        tfeTarg: '', 
        tfeMin: '', 
        tfeMax: '', 
        sTarg: '', 
        sMin: '', 
        sMax: '', 
        cuTarg: '', 
        cuMin: '', 
        cuMax: '', 
        pTarg: '', 
        pMin: '', 
        pMax: '', 
        tio2Targ: '', 
        tio2Min: '', 
        tio2Max: '', 
        sio2Targ: '', 
        sio2Min: '', 
        sio2Max: '', 
        mgoTarg: '', 
        mgoMin: '', 
        mgoMax: '', 
        caoTarg: '', 
        caoMin: '', 
        caoMax: '', 
        al2o3Targ: '', 
        al2o3Min: '', 
        al2o3Max: '', 
        mnTarg: '', 
        mnMin: '', 
        mnMax: '', 
        znTarg: '', 
        znMin: '', 
        znMax: ''
    })
    const ruleFormRef = ref()
    const rules = reactive({
        propCd: [{required: true,message: '请输入成分目标编号',trigger: 'change' | 'blur'},
         {max: 20,message: '成分目标编号超过有效长度',trigger: 'change' | 'blur'}], 
         tfeTarg: [{ pattern: /^[0-9]{1,15}(\.[0-9]{1,10})?$/, message: '请输入有效的数字', trigger: 'blur' | 'change' }],
         tfeMin: [{ pattern: /^[0-9]{1,15}(\.[0-9]{1,10})?$/, message: '请输入有效的数字', trigger: 'blur' | 'change' }],
         tfeMax: [{ pattern: /^[0-9]{1,15}(\.[0-9]{1,10})?$/, message: '请输入有效的数字', trigger: 'blur' | 'change'}],
         sTarg: [{ pattern: /^[0-9]{1,15}(\.[0-9]{1,10})?$/, message: '请输入有效的数字', trigger: 'blur' | 'change' }],
         sMin: [{ pattern: /^[0-9]{1,15}(\.[0-9]{1,10})?$/, message: '请输入有效的数字', trigger: 'blur' | 'change' }],
         sMax: [{ pattern: /^[0-9]{1,15}(\.[0-9]{1,10})?$/, message: '请输入有效的数字', trigger: 'blur' | 'change'}],
         cuTarg: [{ pattern: /^[0-9]{1,15}(\.[0-9]{1,10})?$/, message: '请输入有效的数字', trigger: 'blur' | 'change' }],
         cuMin: [{ pattern: /^[0-9]{1,15}(\.[0-9]{1,10})?$/, message: '请输入有效的数字', trigger: 'blur' | 'change' }],
         cuMax: [{ pattern: /^[0-9]{1,15}(\.[0-9]{1,10})?$/, message: '请输入有效的数字', trigger: 'blur' | 'change'}],
         pTarg: [{ pattern: /^[0-9]{1,15}(\.[0-9]{1,10})?$/, message: '请输入有效的数字', trigger: 'blur' | 'change' }],
         pMin: [{ pattern: /^[0-9]{1,15}(\.[0-9]{1,10})?$/, message: '请输入有效的数字', trigger: 'blur' | 'change' }],
         pMax: [{ pattern: /^[0-9]{1,15}(\.[0-9]{1,10})?$/, message: '请输入有效的数字', trigger: 'blur' | 'change'}],
         tio2Targ: [{ pattern: /^[0-9]{1,15}(\.[0-9]{1,10})?$/, message: '请输入有效的数字', trigger: 'blur' | 'change' }],
         tio2Min: [{ pattern: /^[0-9]{1,15}(\.[0-9]{1,10})?$/, message: '请输入有效的数字', trigger: 'blur' | 'change'}],
         tio2Max: [{ pattern: /^[0-9]{1,15}(\.[0-9]{1,10})?$/, message: '请输入有效的数字', trigger: 'blur' | 'change'}],
         sio2Targ: [{ pattern: /^[0-9]{1,15}(\.[0-9]{1,10})?$/, message: '请输入有效的数字', trigger: 'blur' | 'change' }],
         sio2Min: [{ pattern: /^[0-9]{1,15}(\.[0-9]{1,10})?$/, message: '请输入有效的数字', trigger: 'blur' | 'change'}],
         sio2Max: [{ pattern: /^[0-9]{1,15}(\.[0-9]{1,10})?$/, message: '请输入有效的数字', trigger: 'blur' | 'change'}],
         mgoTarg: [{ pattern: /^[0-9]{1,15}(\.[0-9]{1,10})?$/, message: '请输入有效的数字', trigger: 'blur' | 'change' }],
         mgoMin: [{ pattern: /^[0-9]{1,15}(\.[0-9]{1,10})?$/, message: '请输入有效的数字', trigger: 'blur' | 'change'}],
         mgoMax: [{ pattern: /^[0-9]{1,15}(\.[0-9]{1,10})?$/, message: '请输入有效的数字', trigger: 'blur' | 'change'}],
         caoTarg: [{ pattern: /^[0-9]{1,15}(\.[0-9]{1,10})?$/, message: '请输入有效的数字', trigger: 'blur' | 'change' }],
         caoMin: [{ pattern: /^[0-9]{1,15}(\.[0-9]{1,10})?$/, message: '请输入有效的数字', trigger: 'blur' | 'change'}],
         caoMax: [{ pattern: /^[0-9]{1,15}(\.[0-9]{1,10})?$/, message: '请输入有效的数字', trigger: 'blur' | 'change'}],
         al2o3Targ: [{ pattern: /^[0-9]{1,15}(\.[0-9]{1,10})?$/, message: '请输入有效的数字', trigger: 'blur' | 'change' }],
         al2o3Min: [{ pattern: /^[0-9]{1,15}(\.[0-9]{1,10})?$/, message: '请输入有效的数字', trigger: 'blur' | 'change'}],
         al2o3Max: [{ pattern: /^[0-9]{1,15}(\.[0-9]{1,10})?$/, message: '请输入有效的数字', trigger: 'blur' | 'change'}],
         mnTarg: [{ pattern: /^[0-9]{1,15}(\.[0-9]{1,10})?$/, message: '请输入有效的数字', trigger: 'blur' | 'change' }],
         mnMin: [{ pattern: /^[0-9]{1,15}(\.[0-9]{1,10})?$/, message: '请输入有效的数字', trigger: 'blur' | 'change'}],
         mnMax: [{ pattern: /^[0-9]{1,15}(\.[0-9]{1,10})?$/, message: '请输入有效的数字', trigger: 'blur' | 'change'}],
         znTarg: [{ pattern: /^[0-9]{1,15}(\.[0-9]{1,10})?$/, message: '请输入有效的数字', trigger: 'blur' | 'change' }],
         znMin: [{ pattern: /^[0-9]{1,15}(\.[0-9]{1,10})?$/, message: '请输入有效的数字', trigger: 'blur' | 'change'}],
         znMax: [{ pattern: /^[0-9]{1,15}(\.[0-9]{1,10})?$/, message: '请输入有效的数字', trigger: 'blur' | 'change'}]
    })

    const dialogName =ref('')
    const handleAdd = () => {
        form.value = {
            propCd: '', 
            tfeTarg: '', 
            tfeMin: '', 
            tfeMax: '', 
            sTarg: '', 
            sMin: '', 
            sMax: '', 
            cuTarg: '', 
            cuMin: '', 
            cuMax: '', 
            pTarg: '', 
            pMin: '', 
            pMax: '', 
            tio2Targ: '', 
            tio2Min: '', 
            tio2Max: '', 
            sio2Targ: '', 
            sio2Min: '', 
            sio2Max: '', 
            mgoTarg: '', 
            mgoMin: '', 
            mgoMax: '', 
            caoTarg: '', 
            caoMin: '', 
            caoMax: '', 
            al2o3Targ: '', 
            al2o3Min: '', 
            al2o3Max: '', 
            mnTarg: '', 
            mnMin: '', 
            mnMax: '', 
            znTarg: '', 
            znMin: '', 
            znMax: ''
        }
        dialogName.value = '新增'
        dialogVisible.value = true
    }
    /**
     * 新增
     */


    /**
     * 保存、修改、删除
     */

    const openDialog=()=>{
    }

    const handleSave = (ruleFormRef) => {
        ruleFormRef.validate((valid, fields) => {
            if (valid) {
                var url = 'pla/PropMatlTarg/save'
                var param = {
                    json: JSON.stringify(form.value),
                }
                proxy.$axios.post(url, param).then(response => {
                    if (response.data.code == 0) {
                        form.value = response.data.data
                        ElMessage({
                            message: '保存成功',
                            type: 'success',
                        })
                        getTableData()
                        dialogVisible.value = false
                    } else {
                        // ElMessage.error('操作失败！' + response.data.msg)
                        ElMessage({
                            message: '操作失败' + response.data.msg,
                            type: 'error'
                        })
                    }
                })

            } else {
                console.log('error submit!', fields)
                ElMessage.error('请输入有效数据')
            }
        })
    }
    const handleCancelSave = () => {
        dialogVisible.value = false
    }
    const handleEdit = (row) => {
        dialogName.value = '修改'
        dialogVisible.value = true
        form.value = row
    }
    const handleDelete = (row) => {
        ElMessageBox.confirm(
            '确定删除本条记录?',
            '提示', {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning',
                draggable: true,
            }
        )
            .then(() => {
                var url = 'pla/PropMatlTarg/remove'
                var param = {
                    id: row.id
                }
                proxy.$axios.post(url, param).then(response => {
                    if (response.data.code == 0) {
                        ElMessage({
                            type: 'success',
                            message: '删除成功',
                        })
                        getTableData()
                    } else {
                        ElMessage({
                            type: 'error',
                            message: '删除失败' + response.data.msg
                        });
                    }
                });
            })
            .catch(() => {
                ElMessage({
                    type: 'info',
                    message: '已取消',
                })
            })
    }

    /**
     * 保存、修改、删除
     */

    const multipleSelection = ref([])
    const handleSelectionChange = (val) => {
        multipleSelection.value = val
    }

    const handleRemoveBatch = () => {
        console.log('handleRemoveBatch')

        if (multipleSelection.value.length < 1) {
            ElMessage({
                type: 'warning',
                message: '请选择要删除的数据!'
            })
            return
        }

        ElMessageBox.confirm('此操作将删除该数据, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(() => {
            var ids = []
            multipleSelection.value.forEach((item, index) => {
                ids.push(item.id)
            })
            var url = 'pla/PropMatlTarg/removeBatch'
            var param = {
                ids: JSON.stringify(ids)
            }
            proxy.$axios.post(url, param).then(response => {
                if (response.data.code == '0') {
                    ElMessage({
                        type: 'success',
                        message: '操作成功!',
                    });
                    getTableData()
                    dialogVisible.value = false
                } else {
                    ElMessage({
                        type: 'error',
                        message: '操作失败!' + response.data.msg
                    });
                }
            })
        }).catch(() => {
            ElMessage({
                type: 'info',
                message: '已取消删除'
            })
        })
    }

    const handleEditBatch = () => {
        console.log('handleEditBatch')
        if (multipleSelection.value.length != 1) {
            ElMessage({
                type: 'warning',
                message: '请选择一条数据编辑!'
            })
            return
        }
        handleEdit(multipleSelection.value[0])
    }

    const handleUpload = () => {
        console.log('handleUpload')
    }

    const handleDownload = () => {
        console.log('handleDownload')
    }

    const handleImport = () => {
        console.log('handleImport')
    }

    const handleExport = () => {
        console.log('handleExport')
    }

</script>

<style>
</style>