<template>
    <ap-container>
        <ap-header margin="0111" style="border-bottom: 1px solid #e2e7ef;">
            <el-form ref="tSysPersonJobSearchForm" :model="tSysPersonJobSearchForm"
                     :rules="tSysPersonJobSearchFormRules"
                     :inline="true" class="layout-header-form" @submit.native.prevent="searchEvent">
                <el-form-item label="搜索:" class="layout-header-form-item" prop="likeStr">
                    <el-input v-model="tSysPersonJobSearchForm.likeStr" placeholder="工号/姓名/部门编码/名称"></el-input>
                </el-form-item>
                <el-form-item label="是否有效:" class="layout-header-form-item" prop="fdDisabled">
                    <el-select v-model='tSysPersonJobSearchForm.fdDisabled'>
                        <el-option key="" label="全部" value=""></el-option>
                        <el-option :key="0" label="有效" :value="0"></el-option>
                        <el-option :key="1" label="失效" :value="1"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <el-button type="primary" @click="searchEvent">查询</el-button>
            <ap-button type="primary" :click="syncPersonJobInfo" style="display: none">更新EHR人员岗位</ap-button>
        </ap-header>
        <ap-main margin="0101">
            <ap-table ref="tSysPersonJobRef" :options.sync="tSysPersonJobOpt"></ap-table>
        </ap-main>

        <el-dialog :title="dialogInfo.title" :visible.sync="dialogInfo.isVisible" @close="resetTSysPersonJobForm"
                   width="600px">
            <el-form ref="tSysPersonJobFormRef" :model="tSysPersonJobForm" v-loading="dialogInfo.formIsLoading"
                     label-width="100px">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label='用户id' prop='fdUserId'>
                            <dc-org-search ref="tSysPersonJobFormUserRef"
                                           :options.sync="tSysJobFormUserOptions"
                                           style="width: 100%"></dc-org-search>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label='岗位' prop='fdJob'>
                            <ap-search-pick ref="tSysPersonJobFormJobRef"
                                            :options.sync="tSysJobFormJobOptions"
                                            style="width: 100%"></ap-search-pick>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label='类型' prop='fdType'>
                            <el-select v-model='tSysPersonJobForm.fdType' style="width: 100%">
                                <el-option :key="1" label="主岗" :value="1"></el-option>
                                <el-option :key="0" label="副岗" :value="0"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label='是否有效' prop='fdDisabled'>
                            <el-radio-group v-model="tSysPersonJobForm.fdDisabled">
                                <el-radio :label="0">有效</el-radio>
                                <el-radio :label="1">失效</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label='生效日期' prop='fdEnabledDate'>
                            <el-date-picker v-model="tSysPersonJobForm.fdEnabledDate" type="date"
                                            value-format="timestamp" style="width: 100%"></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label='失效日期' prop='fdDisabledDate'>
                            <el-date-picker v-model="tSysPersonJobForm.fdDisabledDate" type="date"
                                            value-format="timestamp" style="width: 100%"></el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>

            <span slot="footer">
                <el-button @click="dialogInfo.isVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveTSysPersonJobForm"
                           :loading="dialogInfo.saveBtnIsLoading">确 定</el-button>
            </span>
        </el-dialog>
    </ap-container>
</template>

<script>
    import ApSearchPick from 'ap-frame/frame/components/ApSearchPick'
    import DcOrgSearch from '@/components/DcOrgSearch'

    export default {
        name: 'SysPersonJob',
        components: {
            ApSearchPick,
            DcOrgSearch,
        },
        data() {
            let columns = [
                {
                    prop: 'fdUserNo',
                    label: '用户工号',
                    type: 'input'
                }, {
                    prop: 'fdUserName',
                    label: '用户姓名',
                    type: 'input'
                }, {
                    prop: 'fdJobName',
                    label: '岗位',
                    type: 'input'
                }, {
                    prop: 'fdJobDeptCode',
                    label: '部门代码',
                    type: 'input'
                }, {
                    prop: 'fdJobDeptName',
                    label: '部门名称',
                    type: 'input'
                }, {
                    prop: 'fdType',
                    label: '类型',
                    type: 'select',
                    align: "center",
                    width: 80,
                    selectOptions: [{label: "副岗", value: 0}, {label: "主岗", value: 1}],
                }, {
                    prop: 'fdEnabledDate',
                    label: '生效日期',
                    type: 'datePicker',
                    align: 'center',
                    datePickerFormat: 'yyyy-MM-dd',
                }, {
                    prop: 'fdDisabledDate',
                    label: '失效日期',
                    type: 'datePicker',
                    align: 'center',
                    datePickerFormat: 'yyyy-MM-dd',
                }, {
                    prop: 'fdDisabled',
                    label: '是否有效',
                    type: 'select',
                    align: "center",
                    width: 80,
                    selectOptions: [{label: "有效", value: 0}, {label: "失效", value: 1}],
                    html: function (value, row) {
                        if (value == 1) {
                            return '<div class="ap-tag-danger">禁用</div>'
                        } else if (value == 0) {
                            return '<div class="ap-tag-success">启用</el-tag>';
                        }
                    }
                },
            ];
            let toolbarBtn = [
                {type: "add", onClick: this.openAddDialog},
                {type: "edit", onClick: this.openEditDialog},
                "del", "refresh"
            ];
            let tableOpt = {
                title: "人员岗位关系表",
                columns: columns,
                dataUrl: "/apm/sys/personJob/getTSysPersonJobGridList",
                deletePk: "fdId", // 默认fdId
                deleteUrl: "/apm/sys/personJob/deleteTSysPersonJobGridData",
                toolbarBtn: toolbarBtn,
                initData: true, // 默认false
                pagination: {pageSizes: [100, 1000, 3000], pageSize: 100},
                params: () => {
                    return {
                        likeStr: this.tSysPersonJobSearchForm.likeStr,
                        fdDisabled: this.tSysPersonJobSearchForm.fdDisabled,
                    }
                }
            };

            let tSysJobFormUserOptions = {
                type: 2,
                searchText: "",
                searchValue: "",
                searchTreeExpandAll: true,
                searchTreeParams: {},
                searchConfirm: (selectData) => {
                    // 单选
                    this.tSysJobFormUserOptions.searchValue = selectData.fdId;
                    this.tSysJobFormUserOptions.searchText = selectData.fdName;

                    this.tSysPersonJobForm.fdUserId = this.tSysJobFormUserOptions.searchValue;
                    this.tSysPersonJobForm.fdUserName = this.tSysJobFormUserOptions.searchText;
                    return true;
                },
                searchClear: () => {
                    this.tSysJobFormUserOptions.searchValue = "";
                    this.tSysJobFormUserOptions.searchText = "";

                    this.tSysPersonJobForm.fdUserId = "";
                    this.tSysPersonJobForm.fdUserName = "";
                    return true;
                }
            };

            let tSysJobFormJobOptions = {
                searchPickText: "",
                searchPickInitText: true,
                searchPickValue: "",
                searchPickTitle: "岗位选择",
                searchPickTreeOptions: {
                    searchTreeUrl: "/apm/sys/jobStandard/getTSysJobStandardList",
                    searchTreeSelectMultiple: false,
                    searchTreeParams: {
                        fdDisabled: 0
                    },
                },
                searchPickTableConfigs: {
                    dataUrl: "/apm/sys/job/getTSysJobGridList",
                    title: "岗位列表",
                    columns: [{
                        prop: 'fdName',
                        label: '名称',
                        type: 'input',
                        width: 200
                    }, {
                        prop: 'fdStandardName',
                        label: '基准岗位',
                        type: 'input',
                        width: 200
                    }, {
                        prop: 'fdCode',
                        label: '基准岗位编码',
                        type: 'input',
                        width: 200
                    }, {
                        prop: 'fdDeptName',
                        label: '部门',
                        type: 'input'
                    }, {
                        prop: 'fdDisabled',
                        label: '是否有效',
                        type: 'select',
                        align: "center",
                        width: 80,
                        selectOptions: [{label: "有效", value: 0}, {label: "失效", value: 1}],
                        html: function (value, row) {
                            if (value == 1) {
                                return '<div class="ap-tag-danger">禁用</div>'
                            } else if (value == 0) {
                                return '<div class="ap-tag-success">启用</el-tag>';
                            }
                        },
                    }],
                    params: {
                        fdDisabled: 0
                    },
                    multiSelect: false,
                },
                searchPickConfirm: (selectData) => {
                    // 单选
                    this.tSysJobFormJobOptions.searchPickValue = selectData.fdId;
                    this.tSysJobFormJobOptions.searchPickText = selectData.fdName;

                    this.tSysPersonJobForm.fdJob = this.tSysJobFormJobOptions.searchPickValue;
                    this.tSysPersonJobForm.fdJobName = this.tSysJobFormJobOptions.searchPickText;
                    return true;
                },
                searchPickClear: () => {
                    this.tSysJobFormJobOptions.searchPickValue = "";
                    this.tSysJobFormJobOptions.searchPickText = "";

                    this.tSysPersonJobForm.fdJob = "";
                    this.tSysPersonJobForm.fdJobName = "";

                    return true;
                }
            };

            let tSysPersonJobForm = {
                fdUserId: '',
                fdUserName: '',
                fdJob: '',
                fdJobName: '',
                fdType: 1,
                fdEnabledDate: '',
                fdDisabledDate: '',
                fdDisabled: 0,
            };
            return {
                tSysPersonJobOpt: tableOpt,
                // 表单
                tSysPersonJobForm: tSysPersonJobForm,
                // 人员选择
                tSysJobFormUserOptions: tSysJobFormUserOptions,
                // 实体岗位选择
                tSysJobFormJobOptions: tSysJobFormJobOptions,
                tSysPersonJobFormRules: {
                    fdUserId: [{required: true, message: "请选择用户"}],
                    fdJob: [{required: true, message: "请选择岗位"}],
                    fdType: [{required: true, message: "请选择类型"}],
                    fdDisabled: [{required: true, message: "请选择是否生效", trigger: 'blur'}]
                },
                dialogInfo: {
                    title: "",
                    isAdd: false,
                    isVisible: false,
                    saveBtnIsLoading: false,
                    formIsLoading: false
                },
                tSysPersonJobSearchForm: {
                    likeStr: "",
                    fdDisabled: 0
                },
                tSysPersonJobSearchFormRules: {

                    likeStr: [{min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur'}]
                }
            }
        },
        methods: {
            // 打开添加dialog
            openAddDialog() {
                this.dialogInfo.isAdd = true;
                this.dialogInfo.title = "添加数据";
                this.dialogInfo.isVisible = true;
            },
            // 打开编辑dialog
            openEditDialog() {
                let selectedRows = this.$refs.tSysPersonJobRef.getSelection();
                if (selectedRows.length < 1) {
                    this.$message.error("请选择需要编辑的行！");
                    return;
                }
                if (selectedRows.length > 1) {
                    this.$message.error("只能选择单行数据进行编辑！");
                    return;
                }

                this.dialogInfo.isAdd = false;
                this.dialogInfo.title = "编辑数据";
                this.dialogInfo.isVisible = true;
                this.dialogInfo.formIsLoading = true;
                // 获取单条数据
                this.$request({
                    url: '/apm/sys/personJob/getTSysPersonJobByFdId',
                    method: 'post',
                    data: {
                        fdId: selectedRows[0].fdId
                    }
                }).then(response => {
                    this.tSysPersonJobForm = response.data;

                    this.tSysJobFormUserOptions.searchValue = this.tSysPersonJobForm.fdUserId;
                    this.tSysJobFormUserOptions.searchText = this.tSysPersonJobForm.fdUserName;

                    this.tSysJobFormJobOptions.searchPickValue = this.tSysPersonJobForm.fdJob;
                    this.tSysJobFormJobOptions.searchPickText = this.tSysPersonJobForm.fdJobName;
                }).finally(() => {
                    this.dialogInfo.formIsLoading = false;
                })
            },
            // 重置表单
            resetTSysPersonJobForm() {
                this.tSysJobFormUserOptions.searchValue = "";
                this.tSysJobFormUserOptions.searchText = "";

                this.tSysJobFormJobOptions.searchPickValue = "";
                this.tSysJobFormJobOptions.searchPickText = "";

                this.$refs.tSysPersonJobFormRef.resetFields();
            },
            // dialog表单保存
            saveTSysPersonJobForm() {
                // 表单rules认证
                this.$refs.tSysPersonJobFormRef.validate((valid) => {
                    if (!valid) {
                        this.$message.error('数据校验错误！');
                        return false;
                    }
                    this.dialogInfo.saveBtnIsLoading = true;

                    let fnName = this.dialogInfo.isAdd ? "insertTSysPersonJob" : "updateTSysPersonJob";
                    // 添加数据
                    this.$request({
                        url: '/apm/sys/personJob/' + fnName,
                        method: 'post',
                        data: this.tSysPersonJobForm
                    }).then(response => {
                        this.$message.success(`保存成功！`)
                        this.dialogInfo.isVisible = false;
                        // 刷新表格
                        this.$refs.tSysPersonJobRef.refresh();
                    }).finally(() => {
                        this.dialogInfo.saveBtnIsLoading = false;
                    })
                });
            },
            // 查询
            searchEvent() {
                // 表单rules认证
                this.$refs.tSysPersonJobSearchForm.validate((valid) => {
                    if (!valid) {
                        this.$message.error('搜索条件格式不正确！');
                        return false;
                    }
                    this.$refs.tSysPersonJobRef.refresh();
                });
            },
            syncPersonJobInfo() {
                return new Promise((resolve) => {
                    this.$request({
                        url: '/apm/sys/personJob/syncPersonJob',
                        method: 'post',
                    }).then(response => {
                        this.$message.success(`人员岗位资料更新完成！`);
                        this.$refs.tSysPersonJobRef.refresh();
                    }).finally(() => {
                        resolve();
                    });
                });
            }
        }
    }
</script>

<style scoped>
</style>
