化验师评定

hejianhao

2025-04-23 10f94693e4bf60c34e5514a1f1e3d44c8ba4d84a

化验师评定

 src/components/EvaluateTable/index.vue

@@ -151,14 +151,11 @@
        },
        viewJson: {
            handler(newVal, oldVal) {
                console.log("viewJson changed:", newVal)
                if (newVal && this.isReadonly) {
                    try {
                        const parsedData = JSON.parse(newVal)
                        this.activeIndex = parsedData
                        console.log("activeIndex updated:", this.activeIndex)
                    } catch (e) {
                        console.error("Failed to parse viewJson:", e)
                    }
                }
            },

 src/router/index.js

@@ -473,6 +473,25 @@
                },
                component: () => import("../views/deliveryAssessment/testerWorkerEvaluate/add"),
            },
            {
                // 工艺工程师
                path: "chemistEvaluate",
                meta: {
                    title: "化验师工作评定",
                },
                component: () => import("../views/deliveryAssessment/chemistEvaluate"),
            },
            {
                // 工艺工程师
                path: "addchemistEvaluate",
                name: 'AddchemistEvaluate',
                meta: {
                    title: "新增化验师工作评定",
                    hide: true,
                    keepAlive: true,
                },
                component: () => import("../views/deliveryAssessment/chemistEvaluate/add"),
            },
        ]
    }
];

 src/views/deliveryAssessment/chemistEvaluate/add.vue

New file
@@ -0,0 +1,200 @@
<template>
    <Card>
        <template>
            <div class="header-title" style="margin-bottom: 18px;">
                <div class="header-title-left">
                    <img src="@/assets/public/headercard.png" />
                    <div>所属实验调度</div>
                </div>
                <el-button class="el-icon-plus" type="primary" @click="showScheduling = true"> 选择实验调度</el-button>
            </div>
            <Table :tableData="tableData" :total="total" :height="null">
                <template>
                    <el-table-column prop="planCode" label="所属项目课题方案"></el-table-column>
                    <el-table-column prop="planName" label="实验编号"></el-table-column>
                    <el-table-column prop="planName" label="实验名称"></el-table-column>
                    <el-table-column prop="stage" label="通知时间"></el-table-column>
                    <el-table-column prop="stage" label="实验开始时间"></el-table-column>
                    <el-table-column prop="stage" label="实验结束时间"></el-table-column>
                    <el-table-column prop="stage" label="参加人员"></el-table-column>
                    <el-table-column prop="creator" label="状态"></el-table-column>
                </template>
            </Table>
            <div class="header-title" style="margin-top: 60px;">
                <div class="header-title-left">
                    <img src="@/assets/public/headercard.png" />
                    <div>被评定化验师</div>
                </div>
                <el-button class="el-icon-plus" type="primary" @click="addMember"> 选择化验师</el-button>
            </div>
            <div class="member-list">
                <div class="member-list-card">
                    <div class="member-item">
                        <div class="member-title">化验师</div>
                        <div class="member-name-box-2">
                            <div v-for="i in [1, 2, 3, 4, 5, 6, 7, 8]" :key="i" class="member-name">张三</div>
                        </div>
                        <div class="member-edit" @click="addMember">修改</div>
                    </div>
                </div>
            </div>
            <div class="header-title" style="margin-bottom: 18px;margin-top: 60px;">
                <div class="header-title-left">
                    <img src="@/assets/public/headercard.png" />
                    <div>工作标准评定</div>
                </div>
            </div>
            <EvaluateTable :type="1" />
            <div class="add-project-footer">
                <el-button type="primary">保存</el-button>
                <el-button>存草稿</el-button>
            </div>
        </template>
        <SelectMember ref="selectMember" />
        <ExperimentalScheduling :show="showScheduling" />
    </Card>
</template>

<script>
import ExperimentalScheduling from "@/views/dataManagement/confirmation-sheet/components/experimental-scheduling";
export default {
    name: 'AddchemistEvaluate',
    components: {
        ExperimentalScheduling,
    },
    data() {
        return {
            showScheduling: false,
        }
    },
    methods: {
        submitForm() {
        },
        addMember() {
            this.$refs.selectMember.open()
        },
    }
}
</script>

<style scoped lang="less">
.el-form--inline .el-form-item {
    margin-right: 83px;
}

.header-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 13px;

    .header-title-left {
        display: flex;
        align-items: center;
        gap: 13px;

        img {
            width: 12px;
            height: 19px;
        }

        div {
            flex-shrink: 0;
            font-weight: bold;
            font-size: 18px;
            color: #222222;
            line-height: 27px;
            font-family: 'Source Han Sans CN Bold Bold';

            &:before {
                content: '*';
                color: #F56C6C;
                margin-right: 4px;
            }
        }
    }
}

.member-list {
    margin-top: 18px;
    display: flex;
    flex-wrap: wrap;
    gap: 28px;

    .member-list-card {
        position: relative;
        width: 340px;
        height: 400px;
        border-radius: 8px;
        border: 1px solid #DCDFE6;
        background: linear-gradient(to bottom, rgba(255, 77, 79, 0.20) 0%, rgba(255, 242, 194, 0) 70%);

        .member-item {
            height: 100%;
            display: flex;
            flex-direction: column;

            .member-title {
                margin-top: 20px;
                width: 100%;
                font-family: 'Source Han Sans CN Bold Bold';
                font-weight: bold;
                font-size: 16px;
                color: rgba(0, 0, 0, 0.8);
                line-height: 16px;
                text-align: center;
            }

            .member-name-box-2 {
                padding: 0 20px;
                padding-top: 40px;
                display: grid;
                grid-template-columns: repeat(4, 1fr);
                align-items: flex-start;
                flex-wrap: wrap;
                gap: 20px;
                justify-content: center;
            }

            .member-name {
                width: 60px;
                height: 60px;
                background: #7D8B79;
                border-radius: 50%;
                text-align: center;
                line-height: 60px;
                font-weight: 500;
                font-size: 16px;
                color: #FFFFFF;
            }

            .member-edit {
                cursor: pointer;
                position: absolute;
                bottom: 10px;
                left: 50%;
                transform: translateX(-50%);
                font-weight: 400;
                font-size: 12px;
                color: #FF4D4F;
                line-height: 22px;
                width: 40px;
                background: #FFF1F0;
                border-radius: 4px;
                border: 1px solid #FFCCC7;
                text-align: center;
            }
        }
    }
}

.add-project-footer {
    display: flex;
    gap: 20px;
    margin-top: 43px;

    button {
        width: 220px;
    }
}
</style>

 src/views/deliveryAssessment/chemistEvaluate/index.vue

New file
@@ -0,0 +1,217 @@
<template>
    <div class="list">
        <TableCustom :queryForm="queryForm" :tableData="tableData" :total="total" @currentChange="handleCurrentChange"
            @sizeChange="handleSizeChange">
            <template #search>
                <el-form :model="form" label-width="140px" inline>
                    <el-form-item label="所属项目课题方案：">
                        <el-input v-model="form.name" placeholder="请输入" />
                    </el-form-item>
                    <el-form-item label="实验编号：">
                        <el-input v-model="form.name" placeholder="请输入" />
                    </el-form-item>
                    <el-form-item label="实验名称：">
                        <el-input v-model="form.name" placeholder="请输入" />
                    </el-form-item>
                    <el-form-item label="评定时间：">
                        <el-date-picker v-model="value1" type="daterange" range-separator="至" start-placeholder="开始日期"
                            end-placeholder="结束日期">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item class="search-btn-box">
                        <el-button>重置</el-button>
                        <el-button type="primary">查询</el-button>
                    </el-form-item>
                </el-form>
            </template>
            <template #setting>
                <div class="tableTitle">
                    <div class="flex a-center">
                        <div class="title" :class="{ active: currentType === 'list' }"
                            @click="handleTypeChange('list')">
                            化验师工作评定列表</div>
                        <div class="drafts" :class="{ active: currentType === 'draft' }"
                            @click="handleTypeChange('draft')">草稿箱</div>
                    </div>
                    <el-button @click="handleAdd" class="el-icon-plus" type="primary">
                        新增化验师工作评定</el-button>
                </div> 
            </template>
            <template #table>
                <el-table-column prop="name" label="所属项目组" />
                <el-table-column prop="age" label="检测项名称" />
                <el-table-column prop="age" label="检测项编号" />
                <el-table-column prop="age" label="备注" />
                <el-table-column prop="age" label="创建人" />
                <el-table-column prop="age" label="创建时间" />
                <el-table-column prop="age" label="状态">
                    <template #default="{ row }">
                        <el-tag v-if="row.status == 1" type="info" color="#fff">已评定</el-tag>
                        <el-tag v-else type="success">待评定</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="age" label="操作">
                    <template #default="{ row }">
                        <el-button type="text" @click="assessmentVisible = true">详情</el-button>
                    </template>
                </el-table-column>
            </template>
        </TableCustom>
    </div>
</template>

<script>

export default {
    name: 'TesterWorkerEvaluate',
    data() {
        return {
            currentType: 'list', // 当前显示类型：list-列表，draft-草稿箱
            form: {
            },
            tableData: [],
            queryForm: {
                pageSize: 10,
                pageNum: 1
            },
            total: 0,
        }
    },
    methods: {
        handleAdd() {
            this.$router.push({
                path: '/deliveryAssessment/addTesterWorkerEvaluate'
            })
        },
        handleCurrentChange(page) {
            this.queryForm.pageNum = page
            this.getList()
        },
        handleSizeChange(size) {
            this.queryForm.pageSize = size
            this.getList()
        },
        getList() {

        },
        handleTypeChange(type) {
            this.currentType = type;
            this.getList();
        },
    }
}
</script>

<style scoped lang="less">
.list {
    height: 100%;
}

.top-box-integral {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 28px;

    &-card {
        flex: 1;
        background: #E8FAF6;
        box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.06);
        border-radius: 10px;
        padding: 21px 20px;

        &-title {
            font-family: 'SourceHanSansCN-Medium';
            font-size: 14px;
            color: rgba(0, 0, 0, 0.8);
        }

        &-num {
            font-family: 'SF Compact Display Black';
            text-align: center;
            font-weight: 900;
            font-size: 50px;
            color: #049C9A;
            line-height: 60px;
        }
    }
}

.tip-warring {
    margin-top: 20px;
    color: rgba(255, 73, 85, 1);
}

.table-title {
    width: 220px;
    height: 50px;
    background: #FFFFFF;
    border-radius: 8px 8px 0px 0px;
    border: 1px solid #049C9A;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: SourceHanSansCN, SourceHanSansCN;
    font-weight: bold;
    font-size: 18px;
    color: #049C9A;
    line-height: 27px;
}

.expand-box {
    padding: 20px;
    background: linear-gradient(180deg, #049C9A 0%, #0ACBCA 100%);
    border-radius: 20px;

    &-title {
        font-weight: 500;
        font-size: 16px;
        color: #FFFFFF;
        line-height: 24px;
        margin-bottom: 20px;
    }
}

.flex {
    display: flex;
    align-items: center;
}

.tableTitle {
    display: flex;
    padding-bottom: 20px;
    justify-content: space-between;
    align-items: center;

    .title {
        background: #fafafc;
        border-radius: 8px 8px 0px 0px;
        border: 1px solid #dcdfe6;
        padding: 16px 29px;
        font-weight: bold;
        font-size: 18px;
        color: #606266;
        width: unset;
        cursor: pointer;
    }

    .drafts {
        padding: 16px 65px;
        background: #fafafc;
        border-radius: 8px 8px 0px 0px;
        border: 1px solid #dcdfe6;
        font-weight: 400;
        font-size: 18px;
        color: #606266;
        margin-left: 16px;
        cursor: pointer;
    }

    .active {
        color: #049c9a;
        background: #ffffff;
        border-radius: 8px 8px 0px 0px;
        border: 1px solid #049c9a;
    }
}
</style>

 src/views/deliveryAssessment/testerWorkerEvaluate/add.vue

@@ -13,10 +13,10 @@
                    <el-table-column prop="planCode" label="所属项目课题方案"></el-table-column>
                    <el-table-column prop="planName" label="实验编号"></el-table-column>
                    <el-table-column prop="planName" label="实验名称"></el-table-column>
                    <el-table-column prop="stage" label="    通知时间"></el-table-column>
                    <el-table-column prop="stage" label="    实验开始时间"></el-table-column>
                    <el-table-column prop="stage" label="    实验结束时间"></el-table-column>
                    <el-table-column prop="stage" label="    参加人员"></el-table-column>
                    <el-table-column prop="stage" label="通知时间"></el-table-column>
                    <el-table-column prop="stage" label="实验开始时间"></el-table-column>
                    <el-table-column prop="stage" label="实验结束时间"></el-table-column>
                    <el-table-column prop="stage" label="参加人员"></el-table-column>
                    <el-table-column prop="creator" label="状态"></el-table-column>
                </template>
            </Table>