工作交付评定

hejianhao

2025-04-03 9af7c5023477c41dc2f02f30c1156ba4f108324b

工作交付评定

 src/layouts/components/AppContent.vue

@@ -1,5 +1,5 @@
<template>
  <div style="height: 100%;">
  <div @click="foldFun" style="height: 100%;">
    <keep-alive :include="keepAliveList">
      <router-view />
    </keep-alive>
@@ -16,6 +16,13 @@
  },
  computed: {
    ...mapState(['keepAliveList'])
  },
  methods: {
    foldFun() {
      if (window.innerWidth < 1000) {
        this.$store.commit('SET_ISFOLD', true)
      }
    }
  }
}
</script>

 src/views/deliveryAssessment/projectTeamIntegral/detail.vue

@@ -21,13 +21,16 @@
        <div class="integral-content">
            <div class="integral-content-box">
                <div class="integral-content-box-left">
                    <div class="integral-content-box-left-item" :class="item == 1 && 'activeItem'" v-for="item in 3"
                        :key="item">
                    <div @click="changeActiveItem(item)" class="integral-content-box-left-item"
                        :class="actionsLeftTab == item && 'activeItem'" v-for="item in 3" :key="item">
                        <div>{{ ['工艺工程师', '化验师', '实验员'][item - 1] }}</div>
                        <div>工作内容评定</div>
                    </div>
                </div>
                <div class="integral-content-box-right">
                    <div v-show="actionsLeftTab != 1" @wheel.prevent="handleWheel" class="integral-content-box-right-nameTab">
                        <div @click="changeActiveName(item)" :class="activeNameTab == item && 'activeName'" class="integral-content-box-right-nameTab-name" v-for="item in 8" :key="item">张三</div>
                    </div>
                    <div class="integral-content-box-right-thead">
                        <div>评定项</div>
                        <div>评定情况</div>
@@ -36,12 +39,17 @@
                        <div>操作</div>
                    </div>
                    <div class="integral-content-box-right-body">
                        <div v-for="item in 8" :key="item" class="integral-content-box-right-body-item">
                            <div>评定项</div>
                            <div>评定情况</div>
                            <div>开始时间</div>
                            <div>结束时间</div>
                            <div>操作</div>
                        <div v-for="item in itemList" :key="item" class="integral-content-box-right-body-item">
                            <div>{{ item.gainer }}</div>
                            <div>
                                <div v-if="item.situationOne">{{ item.situationOne }}</div>
                                <div v-if="item.situationTwo">{{ item.situationTwo }}</div>
                            </div>
                            <div></div>
                            <div></div>
                            <div>
                                <el-button type="text">修改</el-button>
                            </div>
                        </div>
                    </div>
                </div>
@@ -55,9 +63,157 @@
    data() {
        return {
            actionsLeftTab: 1,
            activeNameTab: 1,
            actionspPersonnel: null,
            craftList: [
                {
                    gainer: '1、项目可研报告',
                    situationOne: '课题数：',
                    situationTwo: '积分数：',
                },
                {
                    gainer: '2、项目可行报告',
                    situationOne: '课题数：',
                    situationTwo: '积分数：',
                },
                {
                    gainer: '3、项目实验室开发阶段',
                    situationOne: '实验数：',
                    situationTwo: '积分数：',
                },
                {
                    gainer: '4、项目中试试验阶段',
                    situationOne: '实验数：',
                    situationTwo: '积分数：',
                },
                {
                    gainer: '5、项目生产验证试验阶段',
                    situationOne: '实验数：',
                    situationTwo: '积分数：',
                },
                {
                    gainer: '6、工艺开发工具',
                    situationOne: '课题数：',
                    situationTwo: '积分数：',
                },
                {
                    gainer: '7、验证与开发',
                    situationOne: '课题数：',
                    situationTwo: '积分数：',
                },
                {
                    gainer: '8、立项报告',
                    situationOne: '课题数：',
                    situationTwo: '积分数：',
                },
                {
                    gainer: '9、临床实验积分',
                    situationTwo: '积分数：',
                },
            ],//工艺工程师-工作内容评定
            assayList: [
                {
                    gainer: '1、项目开发阶段',
                    situationOne: '实验数：',
                    situationTwo: '积分数：',
                },
                {
                    gainer: '2、项目中试试验阶段',
                    situationOne: '实验数：',
                    situationTwo: '积分数：',
                },
                {
                    gainer: '3、项目生产验证试验阶段',
                    situationOne: '实验数：',
                    situationTwo: '积分数：',
                },
                {
                    gainer: '4、项目检测项、检验包评定',
                    situationOne: '课题数：',
                    situationTwo: '积分数：',
                },
                {
                    gainer: '5、中试、生产验证试验检验分析报告评定',
                    situationOne: '课题数：',
                    situationTwo: '积分数：',
                },
                {
                    gainer: '6、原辅料、包材、竞品检验分析报告评定',
                    situationOne: '课题数：',
                    situationTwo: '积分数：',
                },
                {
                    gainer: '7、产品报批及项目工作总结报告评定',
                    situationOne: '课题数：',
                    situationTwo: '积分数：',
                },
            ],//化验师-工作内容评定
            experimentList: [
                {
                    gainer: '1、项目实验室开发阶段',
                    situationOne: '实验数：',
                    situationTwo: '积分数：',
                },
                {
                    gainer: '2、项目中试试验阶段',
                    situationOne: '实验数：',
                    situationTwo: '积分数：',
                },
                {
                    gainer: '3、项目生产验证试验阶段',
                    situationOne: '实验数：',
                    situationTwo: '积分数：',
                },
                {
                    gainer: '4、其他任务',
                    situationOne: '实验数：',
                    situationTwo: '积分数：',
                },
            ],//实验员-工作内容评定
        }
    },
    computed: {
        itemList() {
            switch (this.actionsLeftTab) {
                case 1:
                    return this.craftList
                case 2:
                    return this.assayList
                case 3:
                    return this.experimentList
                default:
                    return this.craftList
            }
        }
    },
    created() {

    },
    methods: {
        changeActiveItem(item) {
            this.actionsLeftTab = item
        },
        changeActiveName(item) {
            this.activeNameTab = item
        },
        handleWheel(e) {
            if (this.scrollTimer) {
                this.scrollAmount += e.deltaY;
                return;
            }

            const container = e.currentTarget;
            this.scrollAmount = e.deltaY;

            const scroll = () => {
                container.scrollLeft += this.scrollAmount * 1.2; // 增加滚动速度
                this.scrollAmount = 0;
                this.scrollTimer = null;
            };

            this.scrollTimer = setTimeout(scroll, 8); // 减少延迟时间
        }
    }
}
</script>

@@ -154,9 +310,8 @@

            &-item {
                cursor: pointer;
                flex: 1;
                min-width: 160px;
                min-height: 110px;
                width: 160px;
                height: 170px;
                font-family: 'Source Han Sans CN Bold Bold';
                font-weight: bold;
                font-size: 20px;
@@ -184,6 +339,40 @@

        &-right {
            flex: 1;
            min-width: 0;
            overflow: hidden;

            &-nameTab {
                flex: 1;
                min-width: 0;
                display: flex;
                overflow-x: auto;
                gap: 10px;
                scroll-behavior: auto; // 移除平滑滚动，提高性能
                -webkit-overflow-scrolling: touch;

                &-name {
                    cursor: pointer;
                    text-align: center;
                    font-weight: 400;
                    font-size: 18px;
                    color: #606266;
                    background: #FAFAFC;
                    border-radius: 8px 8px 0px 0px;
                    border: 1px solid #DCDFE6;
                    line-height: 50px;
                    min-width: 94px;
                    margin-bottom: 10px;
                }

                .activeName {
                    border: 1px solid #049C9A;
                    background: #FFFFFF;
                    font-weight: bold;
                    font-size: 18px;
                    color: #049C9A;
                }
            }

            &-thead {
                display: flex;
@@ -213,20 +402,35 @@
                    display: flex;
                    flex-wrap: wrap;

                    div {
                    &>div {
                        padding-left: 23px;
                        font-family: 'SourceHanSansCN-Medium';
                        flex: 1;
                        font-weight: 500;
                        font-size: 16px;
                        color: #606266;
                        line-height: 50px;
                        display: flex;
                        align-items: center;
                        min-height: 50px;
                        background: #D7EFF4;
                        box-shadow: 0px 6px 10px 0px rgba(4, 156, 154, 0.09);
                        border-radius: 10px;

                        &:nth-child(2) {
                            display: flex;
                            align-items: center;
                            flex-wrap: wrap;
                            justify-content: space-between;

                            & div:last-child {
                                flex-shrink: 0;
                                margin-right: 84px;
                    }
                }
            }

                }
            }
        }
    }
}