for_client/src/views/tentative/parameter/compactness.vue

<template>
    <div class="hc-page-box">
        <HcCard>
            <template #header>
                <HcTooltip keys="tentative_parameter_compactness_add">
                    <el-button type="primary" hc-btn @click="addFormModalClick">
                        <HcIcon name="add-circle"/>
                        <span>新增</span>
                    </el-button>
                </HcTooltip>
                <HcTooltip keys="tentative_parameter_compactness_edit">
                    <el-button hc-btn :disabled="tableCheckedKeys.length <= 0" @click="editFormModalClick">
                        <HcIcon name="edit"/>
                        <span>编辑</span>
                    </el-button>
                </HcTooltip>
                <HcTooltip keys="tentative_parameter_compactness_del">
                    <el-button hc-btn :disabled="tableCheckedKeys.length <= 0" @click="delModalClick">
                        <HcIcon name="delete-bin-2"/>
                        <span>删除</span>
                    </el-button>
                </HcTooltip>
            </template>
            <HcTable ref="tableRef" :column="tableColumn" :datas="tableData" :loading="tableLoading" isCheck @selection-change="tableSelection"></HcTable>
            <template #action>
                <HcPages :pages="searchForm" @change="pageChange"/>
            </template>
        </HcCard>

        <!--新增/编辑-->
        <HcDialog :show="addEditFormModal" :title="`${addEditFormModel.id?'编辑':'新增'}压实度参数`" widths="30rem" :loading="addEditFormLoading" @close="addEditFormModalClose" @save="addEditFormClick">
            <el-form ref="addEditFormRef" :model="addEditFormModel" :rules="addEditFormRules" label-width="auto" size="large">
                <el-form-item label="N值" prop="valueN">
                    <el-input v-model="addEditFormModel.valueN"/>
                </el-form-item>
                <el-form-item label="保证率99%" prop="assuranceRateNinetyNinePercent">
                    <el-input v-model="addEditFormModel.assuranceRateNinetyNinePercent"/>
                </el-form-item>
                <el-form-item label="保证率95%" prop="assuranceRateNinetyFivePercent">
                    <el-input v-model="addEditFormModel.assuranceRateNinetyFivePercent"/>
                </el-form-item>
                <el-form-item label="保证率90%" prop="assuranceRateNinetyPercent">
                    <el-input v-model="addEditFormModel.assuranceRateNinetyPercent"/>
                </el-form-item>
            </el-form>
        </HcDialog>

    </div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import {useAppStore} from "~src/store";
import dataApi from "~api/tentative/parameter/compactness"
import {formValidate, getArrValue} from "vue-utils-plus"
import {delMessage, rowsToId} from "~uti/tools";

//初始变量
const useAppState = useAppStore()

//全局变量
const projectId = ref(useAppState.getProjectId);
const contractId = ref(useAppState.getContractId);

//渲染完成
onMounted(() => {
    getTableData()
})

//搜索表单
const searchForm = ref({
    queryValue: null, current: 1, size: 20, total: 0
})

//回车搜索
const keyUpEvent = (e) => {
    if (e.key === "Enter") {
        searchForm.value.current = 1;
        getTableData()
    }
}

//搜索
const searchClick = () => {
    searchForm.value.current = 1;
    getTableData()
}

//分页被点击
const pageChange = ({current, size}) => {
    searchForm.value.current = current
    searchForm.value.size = size
    getTableData()
}

//表格数据
const tableRef = ref(null)
const tableColumn = ref([
    {key:'valueN', name: 'N值'},
    {key:'assuranceRateNinetyNinePercent', name: '保证率99%'},
    {key:'assuranceRateNinetyFivePercent', name: '保证率95%'},
    {key:'assuranceRateNinetyPercent', name: '保证率90%'},
])
const tableData = ref([])

//获取数据
const tableLoading = ref(false)
const getTableData = async () => {
    tableLoading.value = true
    const { error, code, data } = await dataApi.queryPage({
        ...searchForm.value,
        projectId: projectId.value,
        contractId: contractId.value
    })
    //处理数据
    tableLoading.value = false
    if (!error && code === 200) {
        tableData.value = getArrValue(data['records'])
        searchForm.value.total = data.total || 0
    } else {
        tableData.value = []
        searchForm.value.total = 0
    }
}

//多选
const tableCheckedKeys = ref([]);
const tableSelection = (rows) => {
    tableCheckedKeys.value = rows
}

//新增/编辑 材料进场
const addEditFormModal = ref(false)
const addFormModalClick = () => {
    addEditFormModel.value = {}
    addEditFormModal.value = true
}
const editFormModalClick = () => {
    const keys = tableCheckedKeys.value
    if (keys.length === 1) {
        addEditFormModel.value = keys[0]
        addEditFormModal.value = true
    } else if (keys.length > 1) {
        window?.$message?.warning('只能选择一条数据编辑')
    }
}
const addEditFormModalClose = () => {
    addEditFormModal.value = false
}

//新增/编辑 表单
const addEditFormRef = ref(null)
const addEditFormModel = ref({})
const addEditFormRules = {
    valueN: {
        required: true,
        trigger: 'blur',
        message: "请输入N值"
    },
    assuranceRateNinetyNinePercent: {
        required: true,
        trigger: 'blur',
        message: "请输入保证率99%"
    },
    assuranceRateNinetyFivePercent: {
        required: true,
        trigger: 'blur',
        message: "请输入保证率95%"
    },
    assuranceRateNinetyPercent: {
        required: true,
        trigger: 'blur',
        message: "请输入保证率90%"
    },
}

//新增/编辑 保存
const addEditFormLoading = ref(false)
const addEditFormClick = async () => {
    const validate = await formValidate(addEditFormRef.value)
    if (validate) {
        //发起请求
        addEditFormLoading.value=true
        const { error, code } = await dataApi.submitForm({
            ...addEditFormModel.value,
            projectId: projectId.value,
            contractId: contractId.value
        })
        //处理数据
       
        if (!error && code === 200) {
            window?.$message?.success('操作成功')
            addEditFormModal.value = false
            setTimeout(() => {
                 addEditFormLoading.value = false
            }, 1000);
            await getTableData()
        }
    }
}

//删除
const delModalClick = () => {
    delMessage(() => {
        tableRemoveData()
    })
}

//批量删除
const tableRemoveData = async () => {
    const rows = tableCheckedKeys.value
    if (rows.length > 0 ) {
        const ids = rowsToId(rows)
        //删除请求
        const { error, code } = await dataApi.removeData({
            projectId: projectId.value,
            contractId: contractId.value,
            ids: ids,
        })
        //处理数据
        if (!error && code === 200) {
            window?.$message?.success('操作成功')
            searchClick()
        }
    }
}
</script>

<style lang="scss" scoped>

</style>