smartClean/frontend/witcleansystem/src/Page/ConfigCenter/HEConfig/PointWagesConfig.vue

<template>
    <div class='user-manage'>
        <!-- <el-skeleton :rows='10' v-if='!isLoaded' :throttle='500' /> -->
        <div class='main-container'>
            <div class='top-screen' ref='topScreenRef'>
                <qu-search-area :model="screenForm" @search="restSearch" @reset="clearScreen(screenFormRef)">
                    <el-form-item label="所属站点" prop="districtId">
                        <div class="screen-item">
                            <district-screen v-model:districtId="screenForm.districtId" ref="districtScreenRef"
                                @districtChange="districtChange"></district-screen>
                        </div>
                    </el-form-item>
                </qu-search-area>
            </div>
            <div class='main-table' style="padding-bottom:20px">
                <qu-table :tableData='tableData' v-model:tableHeader='tableHeader' :height='tableHeight'
                    :pageProps='pageProps' :showPage="false" :rowButtons='rowButtons' @rowButtonClick='rowButtonClick'
                    @pageChange='pageChange' @sortChange='sortChange' v-loading='tableLoading'
                    :tableButtons='tableButtons' @buttonClick='buttonClick'></qu-table>
            </div>
            <div v-if="showEditForm">
                <el-dialog :title="currentRow.data.id ? '编辑' : '新建'" v-model="showEditForm" width="30%">
                    <el-form :model="currentRow.data" ref="form" :rules="rules" label-width="80px" :inline="false"
                        size="small">
                        <el-form-item label="站点名称" prop="districtId">
                            <district-screen v-model:districtId="currentRow.data.districtId"
                                :disabled="currentRow.data.id ? true : false" ref="addFormDistrictScreenRef">
                            </district-screen>
                        </el-form-item>

                        <el-form-item label="积分" prop="point">
                            <el-input-number v-model="currentRow.data.point" size="small" label="" :min="0" :step="0.01"
                                :controls="false" step-strictly :precision="2">
                            </el-input-number>

                        </el-form-item>
                        <el-form-item label="薪资(元)" prop="wageBase">
                            <el-input-number v-model="currentRow.data.wageBase" size="small" :controls="false" :min="0"
                                :step="0.01" step-strictly :precision="2">
                            </el-input-number>

                        </el-form-item>
                        <el-form-item label="备注">
                            <el-input type="textarea" :rows="4" v-model="currentRow.data.memo"
                                placeholder="这里是备注信息。。。。。.." :maxlength="500" :show-word-limit="true"
                                :autosize="{ minRows: 2, maxRows: 4 }">
                            </el-input>

                        </el-form-item>
                    </el-form>

                    <template #footer>
                        <span>
                            <el-button @click="showEditForm = false">取消</el-button>
                            <el-button type="primary" @click="submit">确认</el-button>
                        </span>
                    </template>
                </el-dialog>

            </div>
        </div>
    </div>
</template>
<script setup>
import { ref, reactive, onMounted, nextTick } from 'vue';
import templateHooks from '@/Hooks/templateHooks';
import { HEConfigService } from '@/ApiService/configService';
const isLoaded = ref(false);
const tableLoading = ref(false);
const topScreenRef = ref()
const tableHeight = ref(500)
const districtScreenRef = ref()
const showEditForm = ref(false)
const form = ref()
const addFormDistrictScreenRef = ref()
const rules = ref({
    districtId: [
        { required: true, message: '请选择站点名称', trigger: 'change' }
    ],
    wageBase: [
        { required: true, message: '请输入薪资', trigger: 'change' }
    ],
    point: [
        { required: true, message: '请输入积分', trigger: 'change' }
    ],
})
// 数据定义 end
const buttonClick = (button) => {
    currentButton.data = button;
    buttonsClickFun.data[button.enName]();
};
const rowButtonClick = ({ row, $column }) => {
    for (let i in row) {
        currentRow.data[i] = row[i];
    }
    currentButton.data = $column;
    buttonsClickFun.data[$column.enName]();
};
const fetchData = () => {
    const { districtId } = screenForm
    const { sord, sidx } = pageProps
    HEConfigService.wagePointPageList({ districtId, sord, sidx }).then(res => {
        if (res.code == 0) {
            tableData.value = res.data.rows
        } else {
            $message.error(res.err)
        }
    })
};
const districtChange = (e) => {
    screenForm.districtId = e
    fetchData()
}
const fetchSite = () => {
    districtScreenRef.value.fetchDistricts().then((res) => {
        if (res && res.length != 0) {
            screenForm.districtId = res[0].id;
        } else {
            screenForm.districtId = null;
        }
        restSearch();
    });
};
const submit = () => {
    form.value.validate(val => {
        if (val) {
            $messageBox.confirm('您确定要进行提交吗?', '提示').then(res => {
                const { id, districtId, memo, point, type, wageBase } = currentRow.data
                HEConfigService.setWagePoint(currentRow.data).then(res => {
                    if (res.code == 0) {
                        $message.success('保存成功')
                        fetchData()
                        showEditForm.value = false
                    } else {
                        $message.error(res.err)
                    }
                })
            })
        } else {
            return false
        }
    })
}
const { $route, $router, $store, $message, $messageBox, screenForm, screenFormRef, selectItems, tableData, tableHeader, currentRow, currentButton, tableButtons, rowButtons, pageProps, buttonsClickFun, pageChange, sortChange, restSearch, clearScreen, } = templateHooks(fetchData);
// 函数定义 end
onMounted(() => {
    fetchSite();
    buttonsClickFun.data = {
        add: () => { },
        export: () => { },
        edit: () => {
            showEditForm.value = true
            nextTick(() => {
                addFormDistrictScreenRef.value.fetchDistricts()
            })
        },
        delete: () => { },
    };
});
// 生命周期 end
</script>
<script>
export default {
    name: 'PointWagesConfig',
};
</script>