ioc-admin-ui/src/views/userManagement/groupManagement/forms/departmentdetailEdit.vue

<template>
    <div style="height: 100%;overflow-y: auto">
        <departmentNew ref="departmentNew"></departmentNew>
        <p class="info">部门详情</p>
        <div class="company-banner" style="height: 100px;overflow-y: hidden;position: relative">
            <el-image style="height: 100px" :src="require('@/assets/background/banner.png')"></el-image>
            <el-button type="primary" class="company-alter">更换</el-button>
        </div>
        <el-form :model="form" label-position="right" label-width="200px">
            <el-form-item label="部门名称：">
                <el-input v-model="form.department_name" placeholder="请输入部门名称" />
            </el-form-item>
            <el-form-item label="上级公司：">
                <el-select v-model="form.company_id" placeholder="请选择上级公司">
                    <el-option v-for="item in companyList" :key="item.value" :value="item.id" :label="item.company_name"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="部门负责人：">
                <el-input v-model="form.principal" placeholder="部门负责人" />
            </el-form-item>
            <el-form-item label="部门接口人：">
                <el-input v-model="form.liaison_officer" placeholder="部门接口人" />
            </el-form-item>
            <el-form-item label="排重名：">
                <el-input v-model="form.duplicate_name" placeholder="排重名" />
            </el-form-item>
            <el-form-item label="在岗人数：">
                <el-input-number v-model="form.on_guard" placeholder="在岗人数" :min="0" ></el-input-number>
            </el-form-item>
            <el-form-item label="自由员工：">
                <el-input-number v-model="form.freelance_staff" placeholder="自由员工" :min="0" ></el-input-number>
            </el-form-item>
            <el-form-item label="协作员工：">
                <el-input-number v-model="form.cooperation_staff" placeholder="协作员工" :min="0" ></el-input-number>
            </el-form-item>
            <el-form-item label="第三方员工：">
                <el-input-number v-model="form.thirdparty_staff" placeholder="第三方员工" :min="0" ></el-input-number>
            </el-form-item>
            <el-form-item label="部门职责：">
                <el-input type="textarea" />
            </el-form-item>
        </el-form>
        <div class="bottom">
            <el-button class="delete" style="background:#B3B3B3;">删除</el-button>
            <el-button class="edit" @click="edit">编辑</el-button>
        </div>
    </div>
</template>

<script>
import departmentNew from '../messageDialog/departmentNew';
import province from '@/data/province.json'
import {delCompanyInfo, delDept, getCompanyInfo, getDeptInfo, updateDept} from "@/api/company/company";

export default {
    components: {departmentNew},
    props: {
        item: Object,
        companyList: Array,
    },
    data() {
        return {
            province,
            show: false,
            disabled: true,
            form: {
                department_name: '',
                company_id: '',
                principal: '',
                liaison_officer: '',
                duplicate_name: '',
                on_guard: 0,
                freelance_staff: 0,
                cooperation_staff: 0,
                thirdparty_staff: 0,
                censure: '',
            },
            url: "",
            superiorOptions: [
                {
                    value: "0",
                    label: "中讯邮电咨询设计院"
                }
            ],
            addressOptions: [],
        };
    },
    watch: {
        item: {
            deep: true,
            handler: function (val) {
                this.getDeptInfo()
            }
        }
    },
    mounted() {
        this.getDeptInfo()
    },
    emits: ['close'],
    methods: {
        edit() {
            let param = JSON.parse(JSON.stringify(this.form))
            param = param.department_name;
            updateDept(param).then(res=>{
                let data = res.data;
                if (data.code==0) {
                    this.$message.success('修改成功')
                    this.$emit('close', {
                        type: 'view'
                    })
                } else {
                    this.$message.error(data.message)
                }
            })
        },
        del() {
            this.$confirm('确定要删除吗？', '提示', {
                type: 'warning'
            }).then(()=>{
                let param = {
                    department_id: this.item.id
                }
                delDept(param).then(res=>{
                    let data = res.data;
                    if (data.code == 0) {
                        this.$emit('close', {
                            type: 'view'
                        })
                        this.$message.success('删除成功');
                    } else {
                        this.$message.error(data.message);
                    }
                })
            })
        },
        getDeptInfo() {
            if (!this.item.id) {
                return;
            }
            getDeptInfo(this.item.id).then(res => {
                let data = res.data;
                if (data.code == 0) {
                    this.form = JSON.parse(JSON.stringify(data.data[0]));
                    if (this.form.department_name && this.form.department_name!='') {} else {
                        this.form.department_name = this.form.name
                    }
                } else {
                    this.$message.error(data.message)
                }
            })
        }
    },
}
</script>
<style lang="less" scoped>

.info {
    text-align: left;
    padding: 20px;
    font-size: 16px;
}

.el-image {
    width: 95%;
    height: 150px;
}

.company-alter {
    position: absolute;
    right: 55px;
    top: 65px;
    width: 60px;
    height: 24px;
    padding: 3px;
    font-size: 1px;
    z-index: 999;

}

.el-select {
    width: 100%;
}

.el-form {
    padding: 20px 20% 0 10%;

    .el-form-item {
        margin-bottom: 12px;
    }
    //
    //.el-cascader {
    //    /deep/.el-input__inner {
    //        width: 180px;
    //    }
    //}
    //
    ///deep/.el-form-item__label {
    //    padding: 0;
    //    text-align: left;
    //    font-weight: 550;
    //}

    /deep/ .el-form-item__content {
        display: flex;
    }
}


.bottom {
    position: absolute;
    bottom: 15px;
    left: 50%;
}

.delete,
.edit {
    width: 100px;
    height: 30px;
    color: #fff;
    padding: 3px;
    margin-left: 50px;
    font-size: 14px;
    background: #3da0d6;
}
</style>