SmartCommunity/userCenter/src/views/system/organs/popups/EditForm.vue

<template>
    <div>
        <div class="alert-body__main_content">
            <zz-form
                :cols="formCols"
                :data="formData"
                :rules="formRules"
                :errors="formErrors"
                labelWidth="100"
                ref="form"
                :disabled="!isEdit"
            >
                <el-select
                    @change="selectChanged"
                    slot="orgType"
                    v-model="formData.orgType"
                    :disabled="isEdit == 'edit'"
                    clearable
                    placeholder="请选择机构类型"
                >
                    <el-option v-for="item in organTypeList" :key="item.value" :value="item.value" :label="item.label"></el-option>
                </el-select>

                <el-input
                    v-if="isEdit !== 'edit' && isEdit !== 'add' && formData.parentOrgId == ''"
                    slot="parentOrgId"
                    type="text"
                    placeholder="请选择上级机构"
                >
                </el-input>

                <select-tree
                    v-else
                    slot="parentOrgId"
                    class="new-select-tree"
                    empty-text="请选择上级机构"
                    placeholder="请选择上级机构"
                    :disabled="isEdit !== 'edit' && isEdit !== 'add'"
                    :options="organList"
                    :props="defaultProps"
                    v-model="formData.parentOrgId"
                />

                <el-cascader
                    slot="orgAreaId"
                    v-model="formData.orgAreaId"
                    :options="areaList"
                    placeholder="请选择区域"
                    :props="{ label: 'name', value: 'code' }"
                ></el-cascader>
                <el-select slot="orgState" v-model="formData.orgState" clearable>
                    <el-option :value="0" label="停用"></el-option>
                    <el-option :value="1" label="启用"></el-option>
                </el-select>
                <el-select slot="orgLeaderSex" v-model="formData.orgLeaderSex" placeholder="请选择性别">
                    <el-option value="0" label="女"></el-option>
                    <el-option value="1" label="男"></el-option>
                </el-select>
                <div slot="remark" style="position: relative">
                    <el-input type="textarea" v-model="formData.remark" maxlength="50" placeholder="请输入备注"> </el-input>
                    <span style="position: absolute; bottom: 0; right: 10px" v-if="formData.remark">{{ formData.remark.length }}/50</span>
                </div>
            </zz-form>
            <zz-form :cols="formTwoCols" :data="formData" :errors="formErrors" ref="form1" labelWidth="100" :disabled="!isEdit">
                <el-select slot="orgLeaderSex" v-model="formData.orgLeaderSex" placeholder="请选择性别">
                    <el-option value="0" label="女"></el-option>
                    <el-option value="1" label="男"></el-option>
                </el-select>
                <div slot="remark" style="position: relative">
                    <el-input type="textarea" v-model="formData.remark" maxlength="50" placeholder="请输入备注"> </el-input>
                    <span style="position: absolute; bottom: 0; right: 10px" v-if="formData.remark">{{ formData.remark.length }}/50</span>
                </div>
            </zz-form>
        </div>
        <div class="buttons" v-if="isEdit">
            <el-button @click="reset">重置</el-button>
            <el-button type="primary" :disabled="onSubmit" @click="submit">保存</el-button>
        </div>
    </div>
</template>
<script>
// import SelectTree from '@/components/common/SelectTree.vue';
export default {
    components: {
        // SelectTree
    },
    props: ['formData', 'isEdit'],
    data() {
        return {
            defaultProps: {
                value: 'id', // 唯一标识
                label: 'orgName', // 标签显示
                children: 'orgs' // 子级
            },
            // formData: {
            //     id: '',
            //     orgType: '', //机构类型
            //     parentOrgId: '', //上级机构
            //     orgAreaId: '', //所属区域
            //     orgName: '', //机构名称
            //     orgState: 1, //状态
            //     orgLeaderName: '', //负责人
            //     orgLeaderPhone: '', //手机号
            //     orgLeaderSex: '', //性别
            //     orgLeaderEmail: '', //邮箱
            //     remark: '' //备注
            // },
            formCols: [
                [
                    {
                        label: '机构类型',
                        prop: 'orgType',
                        slot: 'orgType'
                    },
                    {
                        label: '上级机构',
                        prop: 'parentOrgId',
                        slot: 'parentOrgId'
                    },

                    {
                        label: '所属区域',
                        prop: 'orgAreaId',
                        slot: 'orgAreaId'
                    },
                    {
                        label: '机构名称',
                        prop: 'orgName',
                        input: true,
                        placeholder: '限20位,中文、字母、数字或下划线',
                        maxlength: 20
                    },
                    {
                        label: '状态',
                        prop: 'orgState',
                        slot: 'orgState'
                    }
                    // {
                    //     label: '负责人',
                    //     prop: 'orgLeaderName',
                    //     input: true,
                    //     placeholder: '限20位,中文、字母、数字或下划线',
                    //     maxlength: 20
                    // },
                    // {
                    //     label: '手机号',
                    //     prop: 'orgLeaderPhone',
                    //     input: true,
                    //     placeholder: '请输入11位手机号码',
                    //     maxlength: 11
                    // },
                    // {
                    //     label: '性别',
                    //     prop: 'orgLeaderSex',
                    //     slot: 'orgLeaderSex'
                    // },
                    // {
                    //     label: '邮箱',
                    //     prop: 'orgLeaderEmail',
                    //     input: true,
                    //     placeholder: '请输入邮箱'
                    // },
                    // {
                    //     label: '备注',
                    //     prop: 'remark',
                    //     slot: 'remark'
                    // }
                ]
            ],
            formTwoCols: [
                [
                    {
                        label: '负责人',
                        prop: 'orgLeaderName',
                        input: true,
                        placeholder: '限20位,中文、字母、数字或下划线',
                        maxlength: 20
                    },
                    {
                        label: '手机号',
                        prop: 'orgLeaderPhone',
                        input: true,
                        placeholder: '请输入11位手机号码',
                        maxlength: 11
                    },
                    {
                        label: '性别',
                        prop: 'orgLeaderSex',
                        slot: 'orgLeaderSex'
                    },
                    {
                        label: '邮箱',
                        prop: 'orgLeaderEmail',
                        input: true,
                        placeholder: '请输入邮箱'
                    },
                    {
                        label: '备注',
                        prop: 'remark',
                        slot: 'remark'
                    }
                ]
            ],
            formRules: {
                orgType: [this.$valid.selectRequired('请选择机构类型')],
                parentOrgId: [this.$valid.selectRequired('请选择上级机构')],
                orgAreaId: [this.$valid.inputRequired('请选择所属区域')],
                orgName: [this.$valid.inputRequired('机构名称'), this.$valid.pattern(/^[\u4e00-\u9fa5A-Za-z0-9_]{1,20}$/)],
                orgState: [this.$valid.inputRequired('状态')],
                orgLeaderName: [this.$valid.pattern(/^[\u4e00-\u9fa5A-Za-z0-9_]{0,20}$/)],
                orgLeaderPhone: [
                    this.$valid.pattern(
                        /^((0\d{2,3}-\d{7,8})|((13[0-9])|(14[5,7])|(15[0-3,5-9])|(17[0,3,5-8])|(18[0-9])|166|198|199|147)\d{8})$/
                    )
                ],
                orgLeaderEmail: [this.$valid.pattern(/^\w+@[a-z0-9]+\.[a-z]{2,4}$/)]
            },
            formErrors: {},
            organList: [],
            areaList: [],
            cascaderProps: {
                label: 'orgName',
                value: 'id'
            },
            organTypeList: [
                {
                    value: 'company',
                    label: '公司'
                },
                {
                    value: 'department',
                    label: '部门'
                }
            ],
            // 省市区
            selectArea: []
        };
    },
    watch: {
        'formData.orgType'(val) {
            this.getorgTree();
        }
    },
    methods: {
        reset() {
            const id = this.formData.id;
            this.formData = Object.assign(
                {},
                this.data,
                {
                    id: '',
                    orgType: '', //机构类型
                    parentOrgId: '', //上级机构
                    orgAreaId: '', //所属区域
                    orgName: '', //机构名称
                    orgState: 1, //状态
                    orgLeaderName: '', //负责人
                    orgLeaderPhone: '', //手机号
                    orgLeaderSex: '', //性别
                    orgLeaderEmail: '', //邮箱
                    remark: '' //备注
                },
                { id }
            );
            this.initFrom('form');
        },
        initFrom(name) {
            this.$refs[name].resetFields();
        },
        selectChanged() {
            this.formData.parentOrgId = '';
        },
        getorgTree() {
            this.$http.postForm('/org/getOrgTree', { orgType: this.formData.orgType }).then(({ status, data, msg }) => {
                if (status === 0 && data) {
                    this.organList = data;
                }
            });
        },
        submit() {
            if (this.formData.id === this.formData.parentOrgId) {
                this.$message.error('上级机构不能选择自身!');
                return;
            }
            let newData = {
                ...this.formData,
                orgAreaId: this.formData.orgAreaId[this.formData.orgAreaId.length - 1]
            };
            new Promise((resolve) => {
                this.$refs.form.validate(resolve);
            }).then(() => {
                let data = JSON.parse(JSON.stringify(newData)),
                    method = 'post',
                    url = '/org/insert';
                if ('edit' == this.isEdit) {
                    url = '/org/update';
                }
                this.$http[method](url, data)
                    .then(({ status, data, msg }) => {
                        if (0 == status) {
                            this.$emit('getList');
                            this.$message.success(msg);
                            this.formData.callback && this.formData.callback();
                        } else {
                            this.$message.error(msg);
                        }
                    })
                    .catch((err) => {});
            });
        },
        getAreaList() {
            this.$http.postForm('/area/selectAll', { id: 123 }).then(({ status, data, msg }) => {
                if (status === 0 && data) {
                    this.areaList = data;
                }
            });
        }
    },
    created() {
        this.getAreaList();
        // if ('edit' === this.formData.todo) {
        //     this.__setValue('formData');
        //     this.isEdit=true;
        // }
    }
};
</script>
<style lang='scss' scoped>
.alert-body__main_content {
    display: flex;
    justify-content: space-around;
    & > form {
        width: 48%;
    }
}
.buttons {
    text-align: center;
}
.new-select-tree {
    vertical-align: top;
    display: inline-block;
    width: 100%;
}
</style>