OutsourceCompany.vue

<template>
    <el-container class="OutsourceCompanyManagement">
        <el-header height="50px">
            <div>
                <span class="title-text">外包公司</span>
            </div>
        </el-header>


        <el-main>
            <el-button type="primary" @click="addOutsourceCompany">新建</el-button>

            <el-table :data="outsourceCompanyList" 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="description" label="状态" align="center">
                    <template #default="scope">
                        {{ getStatusTitle(scope.row.status) }}
                    </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="prohibitOutsourceCompany(scope.row.id)" type="text">禁用</el-button>
                        <el-button @click="resumeOutsourceCompany(scope.row.id)" type="text">解禁</el-button>
                        <el-button @click="editOutsourceCompany(scope.row)" type="text">编辑</el-button>
                        <el-button @click="confirmDeleteOutsourceCompany(scope.row.id)" type="text">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>



            <el-drawer title="新建外包公司" v-model="addOutsourceCompanyVisible" :destroy-on-close="true" :direction="'rtl'">
                <div class="outsourceCompany-form">
                    <el-form :model="addOutsourceCompanyForm" :rules="rules" ref="ref_addOutsourceCompanyForm">
                        <el-form-item label="公司名称:" prop="outsourceCompanyName" :label-width="'120px'">
                            <el-input v-model.trim="addOutsourceCompanyForm.name"></el-input>
                        </el-form-item>
                        <el-form-item label="管理人:" prop="outsourceCompanyYear" :label-width="'120px'">
                            <el-select v-model="addOutsourceCompanyForm.managerId" style="width: 100%">
                                <el-option v-for="(value, name) in userNameIdMap" :label="name" :value="value"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="管理人电话:" prop="groupId" :label-width="'120px'">
                            <el-input v-model.trim="addOutsourceCompanyForm.description"></el-input>
                        </el-form-item>

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


            <el-drawer title="编辑外包公司" v-model="editOutsourceCompanyVisible" :destroy-on-close="true" :direction="'rtl'">
                <div class="outsourceCompany-form">
                    <el-form :model="editOutsourceCompanyForm" :rules="rules" ref="ref_editOutsourceCompanyForm">
                        <el-form-item label="公司名称:" prop="outsourceCompanyName" :label-width="'120px'">
                            <el-input v-model.trim="editOutsourceCompanyForm.name"></el-input>
                        </el-form-item>
                        <el-form-item label="管理人:" prop="outsourceCompanyYear" :label-width="'120px'">
                            <el-select v-model="editOutsourceCompanyForm.managerId" style="width: 100%">
                                <el-option v-for="(value, name) in userNameIdMap" :label="name" :value="value"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="管理人电话:" prop="groupId" :label-width="'120px'">
                            <el-input v-model.trim="editOutsourceCompanyForm.description"></el-input>
                        </el-form-item>

                        <el-form-item style="text-align:center">
                            <el-button @click="editOutsourceCompanyVisible = false">取 消</el-button>
                            <el-button type="primary" @click="confirmEditOutsourceCompany">确 定</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </el-drawer>
        </el-main>
    </el-container>
</template>

<script>
import {computed, onMounted, reactive, ref, toRaw, toRefs, watch} from "vue"
import {
    filterEmptyValueInObject,
     resetForm
} from "@/PublicUtil/PublicUtil"
import outsourceCompanyApi from './OutsourceCompanyApi'
import {ElMessageBox} from 'element-plus'
import {ElMessage} from 'element-plus'
import moment from "moment"
import {getUserNameIdMap} from '@/Request/DictionaryRequest'

export default {
    setup() {
        // scalar
        const pageNum = ref(1)
        const pageSize = ref(10)
        const total = ref()
        const isLoading = ref(false)
        const addOutsourceCompanyVisible = ref(false)
        const editOutsourceCompanyVisible = ref(false)

        const outsourceCompanyList = ref([])

        const ref_addOutsourceCompanyForm = ref()
        const ref_editOutsourceCompanyForm = ref()
        // computed

        // mapping
        const rules = reactive(
            {
                // outsourceCompanyName: [
                //     {
                //         required: true,
                //         message: '请输入外包公司名称',
                //     },
                // ],
                // outsourceCompanyYear: [
                //     {
                //         type: 'date',
                //         required: true,
                //         message: '请输入建成年份',
                //         trigger: 'change'
                //     }
                // ],
                // groupId: [
                //     {
                //         required: true,
                //         message: '请选择集团',
                //     },
                // ],
            }
        )

        const userNameIdMap = reactive({})

        const addOutsourceCompanyForm = reactive(
            {
                name: '', // 公司名
                managerId: '', // 管理人Id
                description: '', // 电话
            }
        )

        const editOutsourceCompanyForm = reactive(
            {
                name: '', // 公司名
                managerId: '', // 管理人Id
                description: '', // 电话

                id: '',
            }
        )

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

        const confirmAddOutsourceCompany = function() {
            ref_addOutsourceCompanyForm.value.validate(
                (isValid) => {
                    if (isValid)
                    {
                        const rawData = toRaw(addOutsourceCompanyForm)
                        const data = filterEmptyValueInObject(rawData)

                        outsourceCompanyApi.addOutsourceCompany(data).then(
                            (r) => {
                                addOutsourceCompanyVisible.value = false

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

                                getOutsourceCompanyList()
                            }
                        )
                    }
                }
            )
        }

        const editOutsourceCompany = function(row) {
            editOutsourceCompanyVisible.value = true
            editOutsourceCompanyForm.id = row.id
            editOutsourceCompanyForm.name = row.name
            editOutsourceCompanyForm.managerId = row.managerId
            editOutsourceCompanyForm.description = row.description
        }

        const confirmEditOutsourceCompany = function() {
            ref_editOutsourceCompanyForm.value.validate(
                (isValid) => {
                    if (isValid)
                    {
                        const rawData = toRaw(editOutsourceCompanyForm)
                        const data = filterEmptyValueInObject(
                            {
                                name: rawData.name,
                                managerId: rawData.managerId,
                                description: rawData.description,
                            }
                        )
                        outsourceCompanyApi.editOutsourceCompany(rawData.id, data).then(
                            (r) => {
                                const message = r.msg

                                getOutsourceCompanyList()
                                ElMessage(`${message}`)
                            }
                        )
                        editOutsourceCompanyVisible.value = false
                    }
                }
            )
        }

        const confirmDeleteOutsourceCompany = function(id) {
            ElMessageBox.confirm(
                "删除后此外包公司相关数据全部都会消失，你确定要删除吗？",
                "提示",
                {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }
            ).then(
                () => {
                    outsourceCompanyApi.deleteOutsourceCompany(id).then(
                        (r) => {
                            const message = r.msg

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

        const addOutsourceCompany = function() {
            resetForm(addOutsourceCompanyForm)
            addOutsourceCompanyVisible.value = true
        }

        const getOutsourceCompanyList = function() {
            isLoading.value = true
            outsourceCompanyApi.getOutsourceCompanyList().then(
                ({data}) => {
                    isLoading.value = false

                    outsourceCompanyList.value = data
                    log(444, data)
                    // formatPaginatedTableData(
                    //     outsourceCompanyList,
                    //     data,
                    //     total,
                    // )
                }
            )
        }

        const getStatusTitle = function(status) {
            switch (status)
            {
                case 0:
                {
                    return '禁用中'
                }
                case 1:
                {
                    return '使用中'
                }
                default:
                {
                    break
                }
            }
        }

        const prohibitOutsourceCompany = function(id) {
            ElMessageBox.confirm(
                "确定要禁用该公司？",
                "提示",
                {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }
            ).then(
                () => {
                    outsourceCompanyApi.prohibitOutsourceCompany(id).then(
                        (r) => {
                            const message = r.msg

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

        const resumeOutsourceCompany = function(id) {
            ElMessageBox.confirm(
                "确定要解禁该公司？",
                "提示",
                {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }
            ).then(
                () => {
                    outsourceCompanyApi.resumeOutsourceCompany(id).then(
                        (r) => {
                            const message = r.msg

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

        const initialize = function() {
            getOutsourceCompanyList()
            getUserNameIdMap(userNameIdMap)
        }

        initialize()

        return {
            // scalar
            pageNum,
            pageSize,
            total,
            isLoading,
            outsourceCompanyList,
            ref_addOutsourceCompanyForm,
            ref_editOutsourceCompanyForm,
            addOutsourceCompanyVisible,
            editOutsourceCompanyVisible,
            // mapping
            userNameIdMap,
            addOutsourceCompanyForm,
            editOutsourceCompanyForm,
            rules,
            // function
            handlePageNumChange,
            handlePageSizeChange,
            addOutsourceCompany,
            editOutsourceCompany,
            confirmEditOutsourceCompany,
            confirmAddOutsourceCompany,
            confirmDeleteOutsourceCompany,
            prohibitOutsourceCompany,
            resumeOutsourceCompany,
            getStatusTitle,
        }
    },
}
</script>
<style lang="less" scoped>
@import "./OutsourceCompany.less";
</style>