考核权重设置页面搭建

GuLiMmo

2023-12-07 c8360c9c55f8d7e2d797534c40f209cc30e92f0c

考核权重设置页面搭建

 src/views/assessmentTask/assessmentTaskSetting.vue

New file
@@ -0,0 +1,131 @@
<template>
    <basic-container>
        <template v-if="isWeight">
            <avue-crud ref="crud" v-model="form" v-model:search="search" :option="option" :data="data" v-model:page="page"
                @search-change="searchChange" @search-reset="searchReset" @current-change="currentChange"
                @size-change="sizeChange" @refresh-change="refreshChange" @on-load="onLoad">
                <template #menu="{ size, row, index }">
                    <el-button type="primary" size="small" @click="handleWeight(row)">
                        考核权重
                    </el-button>
                </template>
            </avue-crud>
        </template>
        <template v-else>
            <assessmentWeight :is="isWeight" @changeIs="changeIs" />
        </template>
    </basic-container>
</template>
  
<script>
import assessmentWeight from './assessmentWeight.vue'
export default {
    components: {
        assessmentWeight
    },  
    data() {
        return {
            isWeight: true,
            form: {},
            search: {},
            data: [
                {
                    id: '1',
                    assessor: '张三',
                    jobNumber: '123456',
                    section: '研发部',
                    postion: '研发工程师',
                    personnelType: '普通员工',
                    partnerType: '',
                    contact: '123456789'
                }
            ],
            option: {
                height: 'auto',
                calcHeight: 32,
                tip: true,
                searchMenuSpan: 6,
                border: true,
                index: true,
                addBtn: false,
                viewBtn: false,
                editBtn: false,
                delBtn: false,
                menuWidth: 200,
                column: [
                    {
                        label: "考核编号",
                        prop: "id",
                        type: "input",
                        addDisplay: false,
                        editDisplay: false,
                        viewDisplay: false,
                        hide: true,
                        search: true
                    },
                    {
                        label: "被考核人",
                        prop: "assessor",
                        type: "input",
                        search: true
                    },
                    {
                        label: "工号",
                        prop: 'jobNumber',
                        type: "input",
                    },
                    {
                        label: "部门",
                        prop: "section",
                        type: "input",
                    },
                    {
                        label: "职务",
                        prop: "position",
                        type: "input",
                    },
                    {
                        label: "人员类型",
                        prop: "personnelType",
                        type: "input",
                    },
                    {
                        label: "合伙类型",
                        prop: "partnerType",
                        type: "input",
                    },
                    {
                        label: "联系方式",
                        prop: "contact",
                        type: "input",
                    },
                ]
            },
            page: {
                pageSize: 10,
                currentPage: 1,
                total: 1,
            },
        }
    },
    methods: {
        handleWeight(value) {
            this.isWeight = false
        },
        changeIs(is) {
            this.isWeight = is
        },
        searchChange() { },
        searchReset() { },
        currentChange() { },
        sizeChange() { },
        refreshChange() { },
        onLoad(page, params = {}) {

        }
    }
}
</script>
  
<style></style>
  

 src/views/assessmentTask/assessmentWeight.vue

New file
@@ -0,0 +1,117 @@
<template>
    <div class="container">
        <el-page-header @back="back" class="header">
            <template #content>
                <span>考核权重</span>
            </template>
        </el-page-header>
        <avue-crud ref="crud" v-model="form" v-model:search="search" :option="option" :data="data" v-model:page="page"
            @current-change="currentChange" @size-change="sizeChange" @refresh-change="refreshChange" @on-load="onLoad">
            <template #menu="{ row, index, size }">
                <el-button type="danger" text icon="el-icon-delete" @click="delRow(row, index)">
                    删除
                </el-button>
            </template>
        </avue-crud>
    </div>
</template>
  
<script>
import { ElMessageBox, ElMessage } from 'element-plus'

export default {
    props: {
        is: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            form: {},
            search: {},
            data: [
                {
                    assessor: '张三',
                    position: '经理',
                    weight: 50,
                    ratingRange: 50,
                }
            ],
            option: {
                height: 'auto',
                calcHeight: 32,
                tip: true,
                searchMenuSpan: 6,
                border: true,
                index: true,
                addBtn: true,
                viewBtn: false,
                editBtn: false,
                delBtn: false,
                menuWidth: 200,
                column: [
                    {
                        label: "考核人",
                        prop: "assessor",
                        type: "input",
                    },
                    {
                        label: "职务",
                        prop: "position",
                        type: "input",
                    },
                    {
                        label: "权值",
                        prop: "weight",
                        type: "input",
                    },
                    {
                        label: "评分范围",
                        prop: "ratingRange",
                        type: "input",
                        placeholder: '评分范围（100分制）±N'
                    }
                ]
            },
            page: {
                pageSize: 10,
                currentPage: 1,
                total: 1,
            },
        }
    },
    methods: {
        back() {
            this.$emit('changeIs', true)
        },
        delRow(row, index) {
            console.log(row,index);
            ElMessageBox.confirm(
                '是否删除当前记录?',
                '警告',
                {
                    confirmButtonText: '确定',
                    cancelButtonText: '关闭',
                    type: 'warning',
                }
            ).then(res => {
                ElMessage.success('删除成功')
            }, () => {
                ElMessage.warning('取消删除')
            })
        },
        sizeChange() { },
        refreshChange() { },
        onLoad(page, params = {}) {
        }
    }
}
</script>
  
<style scoped>
.header {
    margin-bottom: 20px;
}
</style>