engineering_admin/src/components/reviewprocess/index.vue

<template>
    <div> <el-card>
            <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                <el-tab-pane label="处理意见" name="first" class="demo-tabs-a">
                    <div>当前步骤： 发起工单</div>
                    <div>处理动作： 发起流程</div>
                    <div>送审步骤： 技术处理</div>
                    <div class="userlist">
                        <div>指定处理人：</div>
                        <div v-for="item in userlist" class="userlist-con">
                            <img src="@/assets/images/no_perms.png" alt="" />
                            {{ item.name }}
                        </div>
                    </div>
                    <el-form-item label="处理意见" prop="content">
                        <el-input v-model="content" class="w-[1280px]" clearable placeholder="请输入处理意见" type="textarea" />
                    </el-form-item>

                    <div class="flex user">
                        <div>流程抄送：</div>
                        <div>0人</div>
                        <div @click="dialogVisible = true"><img src="@/assets/images/no_perms.png" alt="" /></div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="流程日志" name="second">暂无流程日志！</el-tab-pane>
            </el-tabs>
        </el-card>
        <el-dialog v-model="dialogVisible" title="人员选择器" width="30%" :before-close="handleClose">
            <div>
                <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
                    <el-radio-button :label="1">全部人员</el-radio-button>
                    <el-radio-button :label="2">按部门筛选</el-radio-button>
                    <el-radio-button :label="3">按岗位筛选</el-radio-button>
                </el-radio-group>

                <div v-if="isCollapse == 1" style="margin-bottom: 20px">
                    <el-input v-model="content" clearable placeholder="搜索人员" />
                    <div style="margin-top: 20px">
                        <el-radio-group v-model="radio">
                            <el-radio :label="3">
                                <div class="radio-con">
                                    <div class="radioa">
                                        <img src="@/assets/images/no_perms.png" alt="" />
                                    </div>
                                    <div class="radiob">
                                        <div class="radiob_a">test</div>
                                        <div class="radiob_b">企管宝/市场部/市场员</div>
                                    </div>
                                </div>
                            </el-radio><br />
                        </el-radio-group>
                    </div>
                </div>
                <div v-if="isCollapse == 2">
                    <div v-for="item in companylist">
                        <div class="lad">{{ item.name1 }}</div>
                        <div class="lad">
                            <div>{{ item.name2 }}</div>
                            <div>{{ item.name2 }}</div>
                            <div>{{ item.name2 }}</div>
                            <div>{{ item.name2 }}</div>
                        </div>
                    </div>
                </div>
                <div v-if="isCollapse == 3">
                    <div>11</div>
                    <div>111</div>
                    <div>11</div>
                    <div>11</div>
                </div>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="dialogVisible = false"> 已选 </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>
<script lang="ts" setup>

const active = ref(0);

const isCollapse = ref(1);
const props = defineProps({
    list: {
        type: Array
    }
})
console.log(props.list)
// const list = reactive([])
// list.splice(0, list.length, ...props.list)
const activeName = ref('first')
const content = ref('')
const userlist = reactive([{ name: 1 }, { name: 1 }, { name: 1 }, { name: 1 }]);
const companylist = reactive([
    {
        name1: "哈哈公司",
        name2: "2222",
    },
    {
        name1: "哈哈公司",
        name2: "2222",
    },
    {
        name1: "哈哈公司",
        name2: "2222",
    },
]);
const next = () => {
    if (active.value++ > 2) active.value = 0;
};
const dialogVisible = ref(false);
const handleClose = (done: () => void) => {
    done();
};

</script>

<style lang="scss" scoped>
.app-main {
    background-color: #fff !important;
}

.demo-tabs-a {
    div {
        margin: 10px 0;
    }
}

.userlist {
    display: flex;

    img {
        width: 40px;
        height: 40px;
        border-radius: 50%;
    }

    text-align: center;

    .userlist-con {
        margin-right: 10px;
    }
}

.user {
    img {
        width: 40px;
        height: 40px;
        border-radius: 50%;
    }
}

.radio-con {
    display: flex;
    width: 500px;

    .radioa {
        img {
            width: 40px;
            height: 40px;
            border-radius: 50%;
        }
    }
}

.lad {
    padding: 10px 0;
    border-bottom: 1px solid #f7f7f7;

    div {
        padding: 10px 0;
    }
}
</style>