1

lzhe

2024-03-28 e7bc3a89c88c161fb9de47f2417dfa5e3c042e8f

1

 src/views/master/person/main/index.vue

@@ -2,7 +2,7 @@
 * @Author: lzhe lzhe@example.com
 * @Date: 2024-03-26 10:28:33
 * @LastEditors: lzhe lzhe@example.com
 * @LastEditTime: 2024-03-28 11:44:15
 * @LastEditTime: 2024-03-28 18:20:25
 * @FilePath: /smart-web/src/views/master/person/main/index.vue
 * @Description: è¿™æ˜¯é»˜è®¤è®¾ç½®,请设置`customMade`, æ‰“å¼€koroFileHeader查看配置 è¿›è¡Œè®¾ç½®: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
@@ -12,7 +12,9 @@
            <el-tab-pane label="员工" name="first">
                <person-person></person-person>
            </el-tab-pane>
            <el-tab-pane label="岗位" name="second">岗位</el-tab-pane>
            <el-tab-pane label="岗位" name="second">
                <person-post></person-post>
            </el-tab-pane>
            <el-tab-pane label="部门" name="third">部门</el-tab-pane>
        </el-tabs>
    </div>
@@ -20,6 +22,7 @@

<script>
    import personPerson from './personPerson'
    import personPost from './personPost'
    export default {
        name: "bakalaka",
        data(){
@@ -27,7 +30,7 @@
                activeName: 'first'
            }
        },
        components: {personPerson},
        components: {personPerson,personPost},
        created(){
            
        },

 src/views/master/person/main/personPerson.vue

@@ -2,7 +2,7 @@
 * @Author: lzhe lzhe@example.com
 * @Date: 2024-03-26 10:28:33
 * @LastEditors: lzhe lzhe@example.com
 * @LastEditTime: 2024-03-28 18:08:51
 * @LastEditTime: 2024-03-28 18:18:33
 * @FilePath: /smart-web/src/views/master/person/main/index.vue
 * @Description: è¿™æ˜¯é»˜è®¤è®¾ç½®,请设置`customMade`, æ‰“å¼€koroFileHeader查看配置 è¿›è¡Œè®¾ç½®: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
@@ -116,10 +116,27 @@
                    :total="400">
                </el-pagination>
            </div>
			
        </div>
    </div>

    <el-dialog title="部门调整" v-model="departmentVisible" :width="400" destroy-on-close>
        <el-form :model="departmentFrom" :rules="departmentVisibleRules" :disabled="mode=='show'" ref="dialogForm" label-width="80px" label-position="center">
            <el-row>
                <el-col :span="24">
                    <el-form-item label="部门" prop="department">
                        <el-select v-model="departmentFrom.department" style="width: 100%">
                            <el-option v-for="item in groups" :key="item.id" :label="item.label" :value="item.id"/>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <template #footer>
            <el-button @click="departmentVisible=false" >取 æ¶ˆ</el-button>
            <el-button v-if="mode!='show'" type="primary" :loading="isSaveing" @click="departmentSubmit()">保 å­˜</el-button>
        </template>
    </el-dialog>
	
    <save-dialog v-if="dialog.save" ref="saveDialog" @success="handleSuccess" @closed="dialog.save=false"></save-dialog>
</template>
<script>
@@ -128,6 +145,17 @@
        name: "bakalaka",
        data(){
            return {
                isSaveing: false,
                groups: [],
                departmentFrom: {
                    department: ""
                },
                departmentVisibleRules: {
                    department:[
                        {required: true, message: '请选择部门'}
                    ]
                },
                departmentVisible: false,
                dialog: {
                    save: false
                },
@@ -179,6 +207,9 @@
            saveDialog
        },
        methods: {
            departmentSubmit() {
                this.departmentVisible=false;  //部门调整
            },
            //添加
            addPerson(){
                this.dialog.save = true
@@ -201,7 +232,9 @@
            },
            handleSelectionChange() {},
            delPerson() {},
            changeDepartment() {},
            changeDepartment() {
                this.departmentVisible = true;
            },
            changeTab(name) {
                if(name == 1) {
                    this.leftActive = true;

 src/views/master/person/main/personPost.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,309 @@
<!--
 * @Author: lzhe lzhe@example.com
 * @Date: 2024-03-26 10:28:33
 * @LastEditors: lzhe lzhe@example.com
 * @LastEditTime: 2024-03-28 18:25:55
 * @FilePath: /smart-web/src/views/master/person/main/index.vue
 * @Description: è¿™æ˜¯é»˜è®¤è®¾ç½®,请设置`customMade`, æ‰“å¼€koroFileHeader查看配置 è¿›è¡Œè®¾ç½®: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="person-person">
        <div class="person-person-right">
            <div class="right-top">
                <div class="right-bottom"> 
                    <el-button type="primary" @click="addPerson">+ æ·»åŠ å²—位</el-button>
                    <el-button type="danger" plain @click="delPerson">删除</el-button>
                </div>
                <div>
                    <el-select v-model="input3" placeholder="状态" class="searchStatus">
                        <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                            size="small"
                        />
                    </el-select>
                    <el-input
                        v-model="input3"
                        style="width: 200px"
                        size="small"
                        placeholder="请输入关键字进行过滤"
                        class="input-with-select"
                        >
                        <template #append>
                            <el-button :icon="Search" />
                        </template>
                    </el-input>
                </div>
            </div>
            <div class="right-table">
                <el-table
                    ref="multipleTableRef"
                    :data="tableData"
                    border
                    style="width: 100%"
                    class="multipleTableRef"
                    @selection-change="handleSelectionChange"
                >
                    <el-table-column type="selection" width="55" />
                    <el-table-column
                    prop="date"
                    label="岗位编号">
                    </el-table-column>
                    <el-table-column
                    prop="name"
                    label="岗位">
                    </el-table-column>
                    <el-table-column
                    fixed="right"
                    label="操作">
                    <template #default="scope">
                        <el-button type="text" size="small" @click="table_edit(scope.row, scope.$index)">编辑</el-button>
                        <el-button text type="primary" size="small" @click="table_show(scope.row, scope.$index)">查看</el-button>
                    </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage4"
                    :page-sizes="[100, 200, 300, 400]"
                    :page-size="100"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="400">
                </el-pagination>
            </div>
        </div>
    </div>

    <el-dialog title="部门调整" v-model="departmentVisible" :width="400" destroy-on-close>
        <el-form :model="departmentFrom" :rules="departmentVisibleRules" :disabled="mode=='show'" ref="dialogForm" label-width="80px" label-position="center">
            <el-row>
                <el-col :span="24">
                    <el-form-item label="部门" prop="department">
                        <el-select v-model="departmentFrom.department" style="width: 100%">
                            <el-option v-for="item in groups" :key="item.id" :label="item.label" :value="item.id"/>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <template #footer>
            <el-button @click="departmentVisible=false" >取 æ¶ˆ</el-button>
            <el-button v-if="mode!='show'" type="primary" :loading="isSaveing" @click="departmentSubmit()">保 å­˜</el-button>
        </template>
    </el-dialog>
	
    <save-dialog v-if="dialog.save" ref="saveDialog" @success="handleSuccess" @closed="dialog.save=false"></save-dialog>
</template>
<script>
    import saveDialog from './post'
    export default {
        name: "bakalaka",
        data(){
            return {
                isSaveing: false,
                groups: [],
                departmentFrom: {
                    department: ""
                },
                departmentVisibleRules: {
                    department:[
                        {required: true, message: '请选择部门'}
                    ]
                },
                departmentVisible: false,
                dialog: {
                    save: false
                },
                leftActive: true,
                input: '',
                options: [{
                    value: '选项1',
                    label: '黄金糕'
                }],
                input3: '',
                tableData: [{
                    date: '2016-05-02',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1518 å¼„',
                    zip: 200333
                    }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1517 å¼„',
                    zip: 200333
                    }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1519 å¼„',
                    zip: 200333
                    }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1516 å¼„',
                    zip: 200333
                }]
            }
        },
        created(){
			
        },
        mounted(){
			
        },
        components: {
            saveDialog
        },
        methods: {
            departmentSubmit() {
                this.departmentVisible=false;  //部门调整
            },
            //添加
            addPerson(){
                this.dialog.save = true
                this.$nextTick(() => {
                    this.$refs.saveDialog.open()
                })
            },
            table_edit(row){
                this.dialog.save = true
                this.$nextTick(() => {
                    this.$refs.saveDialog.open('edit').setData(row)
                })
            },
            //查看
            table_show(row){
                this.dialog.save = true
                this.$nextTick(() => {
                    this.$refs.saveDialog.open('show').setData(row)
                })
            },
            handleSelectionChange() {},
            delPerson() {},
            changeDepartment() {
                this.departmentVisible = true;
            },
            changeTab(name) {
                if(name == 1) {
                    this.leftActive = true;
                }else {
                    this.leftActive = false;
                }
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} æ¡`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            }
        }
    }
</script>

<style scoped>
    .person-person {
        width: 100%;
        background-color: #f9fafb;
        border: 1px solid #dcdfe6;
        box-shadow: 0 2px 4px 0 rgba(0,0,0,.12), 0 0 6px 0 rgba(0,0,0,.04);
        display: flex;
    }
    .person-person-left {
        background-color: #fff;
        width: 300px;
        min-width: 300px;
        margin: 8px;
        overflow: hidden;
        border-radius: 4px;
        padding: 8px;
    }
    .person-person-right {
        background-color: #fff;
        flex: 1;
        margin-top: 8px;
        margin-bottom: 8px;
        overflow: hidden;
        border-radius: 4px;
        padding-top: 8px;
        padding-bottom: 8px;
    }
    .person-left-title {
        text-align: center;
        vertical-align: middle;
        padding-left: 8px;
    }
    .person-left-title div {
        display: inline-block;
        width: 55px;
        height: 28px;
        line-height: 28px;
        border: 1px solid #dcdfe6;
        cursor: pointer;
    }
    .person-left-title div:nth-child(1) {
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
        border-right: 0px;
    }
    .person-left-title div:nth-child(2) {
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
        border-left: 0px;
    }
    .person-left-active {
        background-color: #3b8e8e;
        color: #fff;
    }
    .person-left-search {
        padding-top: 8px;
        padding-bottom: 8px;
    }
    .person-tree {
        background-color: #d8e8e8;
        padding: 4px 18px;
        font-size: 14px;
        font-weight: 400;
    }
    .right-top {
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #dcdfe6;
        margin-bottom: 8px;
        padding-left: 8px;
        padding-right: 8px;
    }
    .right-title {
        font-size: 18px;
        font-weight: bold;
        padding-bottom: 12px;
        margin-bottom: 8px;
    }
    .searchStatus {
        margin-right: 6px;
        width: 200px;
    }
    .right-bottom {
        padding-left: 8px;
        padding-right: 8px;
        margin-bottom: 8px;
    }
    .right-table {
        padding-left: 8px;
        padding-right: 8px;
        margin-bottom: 8px;
		
    }
    .multipleTableRef {
        margin-bottom: 8px;
    }
</style>

 src/views/master/person/main/post.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,159 @@
<template>
    <el-dialog :title="titleMap[mode]" v-model="visible" :width="800" destroy-on-close @closed="$emit('closed')">
        <el-form :model="form" :rules="rules" :disabled="mode=='show'" ref="dialogForm" label-width="120px" label-position="center">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="岗位编号" prop="userName">
                        <el-input v-model="form.userName" placeholder="岗位编号" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="岗位" prop="name">
                        <el-input v-model="form.name" placeholder="岗位" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="使用状态" prop="name">
                        <el-switch v-model="value1" />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <template #footer>
            <el-button @click="visible=false" >取 æ¶ˆ</el-button>
            <el-button v-if="mode!='show'" type="primary" :loading="isSaveing" @click="submit()">保 å­˜</el-button>
        </template>
    </el-dialog>
</template>

<script>
    export default {
        emits: ['success', 'closed'],
        data() {
            return {
                value1: true,
                mode: "add",
                titleMap: {
                    add: '添加岗位',
                    edit: '修改岗位',
                    show: '查看'
                },
                visible: false,
                isSaveing: false,
                //表单数据
                form: {
                    id:"",
                    userName: "",
                    avatar: "",
                    name: "",
                    dept: "",
                    group: []
                },
                //验证规则
                rules: {
                    avatar:[
                        {required: true, message: '请上传头像'}
                    ],
                    userName: [
                        {required: true, message: '请输入登录账号'}
                    ],
                    name: [
                        {required: true, message: '请输入真实姓名'}
                    ],
                    password: [
                        {required: true, message: '请输入登录密码'},
                        {validator: (rule, value, callback) => {
                            if (this.form.password2 !== '') {
                                this.$refs.dialogForm.validateField('password2');
                            }
                            callback();
                        }}
                    ],
                    password2: [
                        {required: true, message: '请再次输入密码'},
                        {validator: (rule, value, callback) => {
                            if (value !== this.form.password) {
                                callback(new Error('两次输入密码不一致!'));
                            }else{
                                callback();
                            }
                        }}
                    ],
                    dept: [
                        {required: true, message: '请选择所属部门'}
                    ],
                    group: [
                        {required: true, message: '请选择所属角色', trigger: 'change'}
                    ]
                },
                //所需数据选项
                groups: [],
                groupsProps: {
                    value: "id",
                    multiple: true,
                    checkStrictly: true
                },
                depts: [],
                deptsProps: {
                    value: "id",
                    checkStrictly: true
                }
            }
        },
        mounted() {
            // this.getGroup()
            // this.getDept()
        },
        methods: {
            //显示
            open(mode='add'){
                this.mode = mode;
                this.visible = true;
                return this
            },
            //加载树数据
            async getGroup(){
                var res = await this.$API.system.role.list.get();
                this.groups = res.data.rows;
            },
            async getDept(){
                var res = await this.$API.system.dept.list.get();
                this.depts = res.data;
            },
            //表单提交方法
            submit(){
                this.$refs.dialogForm.validate(async (valid) => {
                    if (valid) {
                        this.isSaveing = true;
                        var res = await this.$API.demo.post.post(this.form);
                        this.isSaveing = false;
                        if(res.code == 200){
                            this.$emit('success', this.form, this.mode)
                            this.visible = false;
                            this.$message.success("操作成功")
                        }else{
                            this.$alert(res.message, "提示", {type: 'error'})
                        }
                    }else{
                        return false;
                    }
                })
            },
            //表单注入数据
            setData(data){
                this.form.id = data.id
                this.form.userName = data.userName
                this.form.avatar = data.avatar
                this.form.name = data.name
                this.form.group = data.group
                this.form.dept = data.dept

                //可以和上面一样单个注入，也可以像下面一样直接合并进去
                //Object.assign(this.form, data)
            }
        }
    }
</script>

<style>
</style>