Smart_platform_ui/src/views/iosBasicData/humanResources/resignations/index.vue

<template>
    <div>
        <basic-container v-show="isShow">
            <el-row>
                <el-col :span="5">
                    <div class="box">
                        <el-scrollbar>
                            <basic-container>
                                <avue-tree :option="treeOption" :data="treeData" @node-click="nodeClick"
                                    style="height: 80vh;" />
                            </basic-container>
                        </el-scrollbar>
                    </div>
                </el-col>
                <el-col :span="19">
                    <avue-crud :option="option" :table-loading="loading" :data="data" :page.sync="page"
                        :search.sync="query" v-model="form" id="out-table" :header-cell-class-name="headerClassName"
                        ref="crud" @row-del="rowDel" @search-change="searchChange" @search-reset="searchReset"
                        @selection-change="selectionChange" @current-change="currentChange" @size-change="sizeChange"
                        @refresh-change="refreshChange" @resetColumn="resetColumn('crud', 'option', 'optionBack', 441)"
                        @saveColumn="saveColumn('crud', 'option', 'optionBack', 441)" @on-load="onLoad">
                        <template slot="menu" slot-scope="{ row, index }">
                            <el-button size="small" icon="el-icon-edit" type="text" @click="rowEdit(row)">编辑</el-button>
                            <el-button size="small" icon="el-icon-delete" type="text"
                                @click="rowDel(row, index)">删除</el-button>
                        </template>
                        <template slot="billNo" slot-scope="{ row }">
                            <span style="color: #1e9fff;cursor: pointer;" @click="rowEdit(row)">{{ row.billNo }}</span>
                        </template>
                        <template slot="menuLeft">
                            <el-button type="warning" size="small" @click="outExport">导 出
                            </el-button>
                        </template>
                    </avue-crud>
                </el-col>
            </el-row>
        </basic-container>
        <detailsPage v-if="!isShow" :detailData="detailData" @goBack="goBack"></detailsPage>
    </div>
</template>

<script>
import { getList, remove } from "@/api/iosBasicData/humanResources/employees";
import detailsPage from "./detailsPage";
import { getDeptLazyTree } from "@/api/system/dept";
import { getToken } from "@/util/auth";
export default {
    data() {
        return {
            detailData: {},
            isShow: true,
            form: {},
            query: {},
            loading: false,
            page: {
                pageSize: 10,
                currentPage: 1,
                total: 0,
            },
            treeDeptName: '',
            treeData: [],
            treeOption: {
                nodeKey: 'id',
                lazy: true,
                treeLoad: function (node, resolve) {
                    const parentId = (node.level === 0) ? 0 : node.data.id;
                    getDeptLazyTree(parentId).then(res => {
                        resolve(res.data.data.map(item => {
                            return {
                                ...item,
                                leaf: !item.hasChildren
                            }
                        }))
                    });
                },
                addBtn: false,
                menu: false,
                size: 'small',
                props: {
                    labelText: '标题',
                    label: 'title',
                    value: 'value',
                    children: 'children'
                }
            },
            selectionList: [],
            option: {},
            optionBack: {
                height: 'auto',
                calcHeight: 30,
                menuWidth: 120,
                searchShow: true,
                searchMenuSpan: 6,
                border: true,
                index: true,
                addBtn: false,
                viewBtn: false,
                editBtn: false,
                delBtn: false,
                searchIcon: true,
                searchIndex: 3,
                column: [
                    {
                        label: "单据编号",
                        prop: "billNo",
                        overHidden: true,
                    },
                    {
                        label: "制单日期",
                        prop: "createTime",
                        type: "date",
                        // search: true,
                        searchProp: "createTimeList",
                        unlinkPanels: true,
                        searchRange: true,
                        format: "yyyy-MM-dd",
                        valueFormat: "yyyy-MM-dd HH:mm:ss",
                        searchDefaultTime: ["00:00:00", "23:59:59"],
                        overHidden: true,
                    },
                    {
                        label: '员工编号',
                        prop: "staffNo",
                        search: true,
                        overHidden: true,
                    },
                    {
                        label: '员工姓名',
                        prop: "cname",
                        search: true,
                        overHidden: true,
                    },
                    // {
                    //     label: "*部门*",
                    //     prop: "goodsValue",
                    //     overHidden: true,
                    // },
                    // {
                    //     label: '*就职日期*',
                    //     prop: "paymentInUsd",
                    //     overHidden: true,
                    // },
                    {
                        label: '性别',
                        prop: "gender",
                        overHidden: true,
                    },
                    {
                        label: '年龄',
                        prop: "age",
                        overHidden: true,
                    },
                    {
                        label: '出生日期',
                        prop: "dateOfBirth",
                        overHidden: true,
                    },
                    {
                        label: '身份证号',
                        prop: "idNumber",
                        search: true,
                        overHidden: true,
                    },
                    {
                        label: '学历',
                        prop: "educationalBackground",
                        overHidden: true,
                    },
                    {
                        label: "专业",
                        prop: "major",
                        overHidden: true
                    },
                    {
                        label: "职务",
                        prop: "position",
                        overHidden: true,
                      type: 'select',
                      filterable: true,
                      dicUrl: "/api/blade-system/dict-biz/dictionary?code=position",
                      props: {
                        label: 'dictValue',
                        value: 'dictKey',
                      },
                    },
                    // {
                    //     label: "*何时参加工作*",
                    //     prop: "participateInWorkDate",
                    //     width:100,
                    //     overHidden: true
                    // },
                    {
                        label: "家庭住址",
                        prop: "homeAddress",
                        overHidden: true
                    },
                    {
                        label: "家庭电话",
                        prop: "homePhone",
                        overHidden: true
                    },
                    {
                        label: "民族",
                        prop: "nationality",
                        overHidden: true
                    },
                    {
                        label: "政治面貌",
                        prop: "politicalStatus",
                        overHidden: true
                    },
                    // {
                    //     label: "*人员身份*",
                    //     prop: "remarks",
                    //     overHidden: true
                    // },
                    {
                        label: "社保编号",
                        prop: "socialSecurityNo",
                        overHidden: true
                    },
                    {
                        label: "房屋公积金",
                        prop: "providentFund",
                        width: 100,
                        overHidden: true
                    },
                    {
                        label: "合同起始日",
                        prop: "contractPeriodStart",
                        width: 100,
                        overHidden: true
                    },
                    {
                        label: "合同截止日",
                        prop: "contractPeriodEnd",
                        width: 100,
                        overHidden: true
                    },
                    {
                        label: "参加工作时间",
                        prop: "participateInWorkDate",
                        width: 100,
                        overHidden: true
                    },
                    {
                        label: "行政部门",
                        prop: "administrativeDepartmentName",
                        overHidden: true
                    }
                ]
            },
            data: [],
        };
    },
    components: {
        detailsPage,
    },
    async created() {
        this.option = await this.getColumnData(this.getColumnName(440), this.optionBack);
    },
    activated() {
        setTimeout(() => {
            if (this.$route.query.billNo || this.$route.query.params) {
                this.isShow = false
                this.$store.commit("IN_FIRSTSET_DETAIL");
            }
        }, 100);
    },
    methods: {
        outExport() {
            this.$confirm('是否导出当前所有数据？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let obj = {}
                obj = {
                    ...this.query,
                    whetherEmployedOrNot: 0,
                }
                const routeData = this.$router.resolve({
                    path: '/api/blade-los/bstaffinformation/exportStaff',      //跳转目标窗口的地址
                    query: {
                        'Blade-Auth': getToken(),
                        ...obj   //括号内是要传递给新窗口的参数
                    }
                })
                window.open(routeData.href.slice(1, routeData.href.length));
            })
        },
        nodeClick(data) {
            this.query.administrativeDepartmentName = data.title;
            this.page.currentPage = 1;
            this.onLoad(this.page, this.query);
        },
        addButton() {
            this.isShow = false
        },
        rowEdit(row) {
            this.detailData = {
                id: row.id
            };
            this.isShow = false
        },
        // 编辑
        inEdit(row) {
        },
        // 删除
        rowDel(row, index) {
            this.$confirm("确定将选择数据删除?", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                remove({ ids: row.id }).then(res => {
                    this.onLoad(this.page, this.query);
                    this.$message.success("成功删除");
                })
            })

        },
        searchReset() {
            this.query = this.$options.data().query;
            this.onLoad(this.page);
        },
        // 搜索按钮点击
        searchChange(params, done) {
            this.page.currentPage = 1;
            this.onLoad(this.page, this.query);
            done();
        },
        selectionChange(list) {
            this.selectionList = list;
        },
        currentChange(currentPage) {
            this.page.currentPage = currentPage;
        },
        sizeChange(pageSize) {
            this.page.pageSize = pageSize;
        },
        refreshChange() {
            this.onLoad(this.page, this.query);
        },
        onLoad(page, params = {}) {
            let obj = {}
            obj = {
                ...Object.assign(params, this.query),
                whetherEmployedOrNot: 0,
            }
            this.loading = true;
            getList(page.currentPage, page.pageSize, obj).then(res => {
                this.data = res.data.data.records;
                this.page.total = res.data.data.total;
                this.$nextTick(() => {
                    this.$refs.crud.doLayout();
                    this.$refs.crud.dicInit();
                });
            }).finally(() => {
                this.loading = false;
            })

        },
        // 详情的返回列表
        goBack() {
            // 初始化数据
            if (JSON.stringify(this.$route.query) != "{}") {
                this.$router.$avueRouter.closeTag();
                this.$router.push({
                    path: "/iosBasicData/humanResources/employees/index"
                });
            }
            this.detailData = {}
            this.isShow = true;
            this.onLoad(this.page, this.search);

        },
        //自定义列保存
        async saveColumn(ref, option, optionBack, code) {
            /**
             * 已定义全局方法，直接使用，saveColumnData保存列数据方法,参数传值(表格名称，当前表格的option数据)
             * 已定义全局方法，直接使用，getColumnName方法用来获取枚举值，参数根据自己定义的code值获取中文名
             * 一定要执行异步操作，要等接口成功返回，才能执行下一行代码
             */
            const inSave = await this.saveColumnData(this.getColumnName(code), this[option]);
            if (inSave) {
                this.$message.success("保存成功");
                //关闭窗口
                this.$refs[ref].$refs.dialogColumn.columnBox = false;
                this.searchReset()
            }
        },
        //自定义列重置
        async resetColumn(ref, option, optionBack, code) {
            this[option] = this[optionBack];
            const inSave = await this.delColumnData(this.getColumnName(code), this[optionBack]);
            if (inSave) {
                this.$message.success("重置成功");
                this.$refs[ref].$refs.dialogColumn.columnBox = false;
                this.searchReset()
            }
        },
        // 更改表格颜色
        headerClassName(tab) {
            //颜色间隔
            let back = ""
            if (tab.columnIndex >= 0 && tab.column.level === 1) {
                if (tab.columnIndex % 2 === 0) {
                    back = "back-one"
                } else if (tab.columnIndex % 2 === 1) {
                    back = "back-two"
                }
            }
            return back;
        },

    }
}

</script>

<style scoped>
::v-deep#out-table .back-one {
    background: #ecf5ff !important;
    text-align: center;
}

::v-deep#out-table .back-two {
    background: #ecf5ff !important;
    text-align: center;
}

.pointerClick {
    cursor: pointer;
    color: #1e9fff;
}

::v-deep .el-col-md-8 {
    width: 24.33333%;
}
</style>