bt-xtgxq-system-bigdata-examine/src/components/common/Scoring.vue

<template>
    <n-form label-placement="left" label-width="auto" :model="form">
        <n-form-item :label="`${type}*`" path="scroe.value">
            <n-input-number v-model:value="form.score.value" :placeholder="`输入${type}`" :max="form.score.maxValue"
                :min="form.score.minValue" :precision="2"/>
        </n-form-item>
        <n-form-item :label="`${type}原因*`" path="score.reason">
            <n-input type="textarea" v-model:value="form.score.reason" :placeholder="`输入${type}原因`" @keydown.enter.prevent />
        </n-form-item>
        <!--
        <n-space>
            <n-form-item label="填报人*" path="score.userName">
                <n-input v-model:value="form.score.userName" placeholder="输入填报人" readonly />
            </n-form-item>
            <n-form-item label="填报日期*" path="score.date">
                <n-input v-model:value="form.score.date" placeholder="输入填报日期" readonly />
            </n-form-item>
        </n-space>
        -->
        <n-space justify="end">
            <n-button type="primary" @click="onConfirmClick">确定</n-button>
        </n-space>
    </n-form>
</template>

<script>
import {
    NForm,
    NFormItem,
    NInput,
    NInputNumber,
    NButton,
    NSpace,

    useMessage
} from 'naive-ui'

export default {
    name: 'Scroing',
    components: {
        NForm,
        NFormItem,
        NInput,
        NInputNumber,
        NButton,
        NSpace,
    },
    props: {
        rowKey: {
            required: true
        },
        rowIndex: {
            required: true
        },
        score: {
            required: false,
            default: 0
        },
        reason: {
            required: false,
        },
        minScore: {
            required: false,
            default: 0
        },
        maxScore: {
            required: false,
            default: 100
        },
        type: {
            required: false,
            default: '分数'
        }
    },  
    data() {
        let vueSelf = this;
        return {
            message: useMessage(),
            form: {
                score: {
                    value: vueSelf.score,
                    maxValue: vueSelf.maxScore,
                    minValue: vueSelf.minScore,
                    reason: vueSelf.reason,
                    // userId: '1',
                    // userName: '管理员',
                    // date: ''
                },
            },
            rules: {
                scroe: {
                    value: [
                        {
                            required: true,
                            message: `请输入${this.type}`
                        }
                    ],
                },
            }
        }
    },
    methods: {
        onConfirmClick() {
            if(this.form.score.value === null) {
                this.message.error(`请输入${this.type}`)
                return;
            }
            if(!this.form.score.reason) {
                this.message.error(`请输入${this.type}原因`)
                return;
            }
            this.$emit('confirm', this.rowKey, this.rowIndex, {
                score: this.form.score.value,
                reason: this.form.score.reason,
                userId: this.form.score.userId,
                userName: this.form.score.userName,
                date: this.form.score.date,
            });
        },
        getCurrentDate() {
            let date = new Date();
            let year = date.getFullYear();
            let month = date.getMonth() + 1;
            month = month < 10 ? `0${month}` : month;
            let day = date.getDay();
            day = day < 10 ? `0${day}` : day;
            return `${year}-${month}-${day}`;
        }
    },
    mounted() {
        // this.form.score.date = this.getCurrentDate()
    }
}
</script>

<style lang="stylus" scoped>

</style>