ProjectManagement.vue

<template>
    <el-container class="ProjectManagement">
        <el-header height="50px">
            <div>
                <span class="title-text">项目管理</span>
            </div>
        </el-header>


        <el-main>
            <el-button type="primary" @click="addProject">新建</el-button>
            <el-menu mode="horizontal" @select="handleMenuSelect" :default-active="'1'">
                <el-menu-item :index="'1'">
                    待标注
                </el-menu-item>
            </el-menu>
            <el-table :data="projectList" v-loading="isLoading">
                <el-table-column prop="name" label="名称" align="center"></el-table-column>
                <el-table-column prop="description" label="备注" align="center"></el-table-column>
                <el-table-column prop="status" label="状态" align="center">
                    <template #default="scope">
                        {{ getStatusTitle(scope.row.status) }}
                    </template>
                </el-table-column>
                <el-table-column prop="accountId" label="所属公司" align="center">
                    <template #default="scope">
                        {{ companyMap[scope.row.accountId] }}
                    </template>
                </el-table-column>
                <el-table-column prop="createTime" label="创建时间" align="center"></el-table-column>
                <el-table-column prop="operation" label="操作" align="center">
                    <template #default="scope">
                        <el-button @click="startProject(scope.row.id)" type="text">开启</el-button>
                        <el-button @click="finishProject(scope.row.id)" type="text">结束</el-button>
                        <el-button @click="distributeBatch(scope.row.id)" type="text">分配批次</el-button>
                        <el-button @click="editProject(scope.row)" type="text">编辑</el-button>
                        <el-button @click="distributeProject(scope.row)" type="text">分配公司</el-button>
                    </template>
                </el-table-column>
            </el-table>


            <el-drawer title="新建项目" v-model="addProjectVisible" :destroy-on-close="true" :direction="'rtl'">
                <div class="project-form">
                    <el-form :model="addProjectForm" :rules="rules" ref="ref_addProjectForm">
                        <el-form-item label="名称:" prop="name" :label-width="'120px'">
                            <el-input v-model.trim="addProjectForm.name"></el-input>
                        </el-form-item>
                        <el-form-item label="备注:" prop="description" :label-width="'120px'">
                            <el-input v-model.trim="addProjectForm.description" style="width: 100%"></el-input>
                        </el-form-item>

                        <el-form-item style="text-align:center">
                            <el-button @click="addProjectVisible = false">取 消</el-button>
                            <el-button type="primary" @click="confirmAddProject">确 定</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </el-drawer>


            <el-drawer title="编辑项目" v-model="editProjectVisible" :destroy-on-close="true" :direction="'rtl'">
                <div class="project-form">
                    <el-form :model="editProjectForm" :rules="rules" ref="ref_editProjectForm">
                        <el-form-item label="名称:" prop="name" :label-width="'120px'">
                            <el-input v-model.trim="editProjectForm.name"></el-input>
                        </el-form-item>
                        <el-form-item label="备注:" prop="description" :label-width="'120px'">
                            <el-input v-model.trim="editProjectForm.description" style="width: 100%"></el-input>
                        </el-form-item>


                        <el-form-item style="text-align:center">
                            <el-button @click="editProjectVisible = false">取 消</el-button>
                            <el-button type="primary" @click="confirmEditProject">确 定</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </el-drawer>

            <el-drawer title="分配公司" v-model="distributeProjectVisible" :destroy-on-close="true" :direction="'rtl'">
                <div class="project-form">
                    <el-form :model="distributeProjectForm">
                        <el-form-item label="公司:" :label-width="'120px'">
                            <el-select v-model="distributeProjectForm.accountId" style="width: 100%">
                                <el-option v-for="(name, value) in companyMap" :label="name" :value="parseInt(value)"></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item style="text-align:center">
                            <el-button @click="distributeProjectVisible = false">取 消</el-button>
                            <el-button type="primary" @click="confirmDistributeProject">确 定</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </el-drawer>


            <el-drawer title="分配批次" v-model="distributeBatchVisible" :size="'35%'" :destroy-on-close="true" :direction="'rtl'">
                <div class="project-form">
                    <el-transfer v-model="usedBatchList"
                                 :data="allBatchList"
                                 :titles="['未分配', '已分配']"
                                 @change="onBatchListChange"
                    />
                </div>
            </el-drawer>
        </el-main>
    </el-container>
</template>

<script>
import {reactive, ref, toRaw,} from "vue"
import {
    emptyList,
    filterEmptyValueInObject, getKeyByValueInObject,
     resetForm
} from "@/PublicUtil/PublicUtil"
import projectApi from './ProjectManagementApi'
import {ElMessageBox} from 'element-plus'
import {ElMessage} from 'element-plus'
import {getCompanyMap} from '@/Request/DictionaryRequest'

export default {
    setup() {
        // scalar
        const pageNum = ref(1)
        const pageSize = ref(10)
        const total = ref()
        const isLoading = ref(false)
        const addProjectVisible = ref(false)
        const editProjectVisible = ref(false)
        const distributeProjectVisible = ref(false)
        const distributeBatchVisible = ref(false)
        let selectedMenuIndex = '1'
        const ref_addProjectForm = ref()
        const ref_editProjectForm = ref()
        let currentTaskId = undefined

        // sequence
        const projectList = ref([])
        const usedBatchList = ref([])
        const allBatchList = ref([])

        // mapping
        const rules = reactive(
            {
                // projectName: [
                //     {
                //         required: true,
                //         message: '请输入项目名称',
                //     },
                // ],
                // projectYear: [
                //     {
                //         type: 'date',
                //         required: true,
                //         message: '请输入建成年份',
                //         trigger: 'change'
                //     }
                // ],
                // groupId: [
                //     {
                //         required: true,
                //         message: '请选择集团',
                //     },
                // ],
            }
        )

        const companyMap = reactive({})

        const addProjectForm = reactive(
            {
                name: '',
                description: '',
            }
        )

        const editProjectForm = reactive(
            {
                name: '',
                description: '',

                id: '',
            }
        )

        const distributeProjectForm = reactive(
            {
                accountId: '',

                id: '',
            }
        )

        // function
        const handlePageNumChange = function(num) {
            pageNum.value = num
            getProjectList()
        }
        const handlePageSizeChange = function(size) {
            pageNum.value = 1
            pageSize.value = size
            getProjectList()
        }

        const confirmAddProject = function() {
            ref_addProjectForm.value.validate(
                (isValid) => {
                    if (isValid)
                    {
                        const rawData = toRaw(addProjectForm)
                        const data = filterEmptyValueInObject(rawData)

                        projectApi.addProject(data).then(
                            (r) => {
                                addProjectVisible.value = false

                                const message = r.msg
                                ElMessage(`${message}`)

                                getProjectList()
                            }
                        )
                    }
                }
            )
        }

        const confirmDistributeProject = function() {
            const rawData = toRaw(distributeProjectForm)
            const data = filterEmptyValueInObject(
                {
                    accountId: rawData.accountId
                }
            )

            projectApi.editProject(rawData.id, data).then(
                (r) => {
                    distributeProjectVisible.value = false

                    const message = r.msg
                    ElMessage(`${message}`)

                    getProjectList()
                }
            )
        }

        const editProject = function(row) {
            log(row)
            editProjectVisible.value = true
            editProjectForm.name = row.name
            editProjectForm.description = row.description

            editProjectForm.id = row.id
        }

        const confirmEditProject = function() {
            ref_editProjectForm.value.validate(
                (isValid) => {
                    if (isValid)
                    {
                        const rawData = toRaw(editProjectForm)
                        const data = filterEmptyValueInObject(
                            {
                                name: rawData.name,
                                description: rawData.description,
                            }
                        )
                        projectApi.editProject(rawData.id, data).then(
                            (r) => {
                                const message = r.msg

                                getProjectList()
                                ElMessage(`${message}`)
                            }
                        )
                        editProjectVisible.value = false
                    }
                }
            )
        }

        const distributeProject = function(row) {
            distributeProjectVisible.value = true

            distributeProjectForm.id = row.id
            distributeProjectForm.accountId = row.accountId
        }

        const addProject = function() {
            resetForm(addProjectForm)
            addProjectVisible.value = true
        }

        const getProjectList = function() {
            isLoading.value = true
            projectApi.getProjectList().then(
                ({data}) => {
                    isLoading.value = false

                    projectList.value = data
                    // formatPaginatedTableData(
                    //     projectList,
                    //     data,
                    //     total,
                    // )
                }
            )
        }

        const onBatchListChange = function(v, direction, changedList) {
            const data = {
                taskId: currentTaskId,
                packIds: changedList.toString(),
            }

            if (direction === 'right') // add
            {
                projectApi.distributeBatch(data).then(
                    (r) => {
                        const message = r.msg
                        ElMessage(
                            {
                                message: `${message}`,
                            }
                        )
                    }
                )
            }
            else // delete
            {
                projectApi.cancelDistributeBatch(data).then(
                    (r) => {
                        const message = r.msg
                        ElMessage(
                            {
                                message: `${message}`,
                            }
                        )
                    }
                )
            }
        }

        const distributeBatch = function(id) {
            distributeBatchVisible.value = true
            currentTaskId = id

            emptyList(allBatchList.value)
            emptyList(usedBatchList.value)
            projectApi.getUsedBatchList(id).then(
                ({data}) => {
                    for (const item of data)
                    {
                        usedBatchList.value.push(item.id)

                        allBatchList.value.push(
                            {
                                key: item.id,
                                label: item.name,
                            }
                        )
                    }
                }
            )

            projectApi.getUnusedBatchList().then(
                ({data}) => {
                    for (const item of data)
                    {
                        allBatchList.value.push(
                            {
                                key: item.id,
                                label: item.name,
                            }
                        )
                    }
                }
            )
        }

        const handleMenuSelect = function(index) {
            selectedMenuIndex = index
            getProjectList()
        }

        const startProject = function(id) {
            ElMessageBox.confirm(
                "确定开始项目?",
                "提示",
                {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }
            ).then(
                () => {
                    projectApi.startProject(id).then(
                        (r) => {
                            const message = r.msg

                            getProjectList()
                            ElMessage(`${message}`)
                        }
                    )
                }
            )
        }

        const finishProject = function(id) {
            ElMessageBox.confirm(
                "确定结束项目?",
                "提示",
                {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }
            ).then(
                () => {
                    projectApi.finishProject(id).then(
                        (r) => {
                            const message = r.msg

                            getProjectList()
                            ElMessage(`${message}`)
                        }
                    )
                }
            )
        }

        const getStatusTitle = function(status) {
            switch (status)
            {
                case 0:
                {
                    return '结束中'
                }
                case 1:
                {
                    return '开始中'
                }
                default:
                {
                    break
                }
            }
        }

        const initialize = function() {
            getProjectList()
            getCompanyMap(companyMap)
        }

        initialize()

        return {
            // scalar
            pageNum,
            pageSize,
            total,
            isLoading,
            projectList,
            ref_addProjectForm,
            ref_editProjectForm,
            addProjectVisible,
            editProjectVisible,
            distributeProjectVisible,
            distributeBatchVisible,
            // sequence
            usedBatchList,
            allBatchList,
            // mapping
            companyMap,
            addProjectForm,
            editProjectForm,
            distributeProjectForm,
            rules,
            // function
            handlePageNumChange,
            handlePageSizeChange,
            addProject,
            editProject,
            confirmEditProject,
            confirmAddProject,
            confirmDistributeProject,
            distributeProject,
            getKeyByValueInObject,
            distributeBatch,
            handleMenuSelect,
            onBatchListChange,
            startProject,
            finishProject,
            getStatusTitle,
        }
    },
}
</script>
<style lang="less" scoped>
@import "./ProjectManagement.less";
</style>