Project-Annex/userCenter/src/views/system/tenants/popups/AddOrEdit.vue

<template>
    <div class="alert-body__main_content">
        <div class="left-info">
            <zz-form :cols="formCols" :data="formData" :rules="formRules" :errors="formErrors" labelWidth="120" ref="addTenantsform">
                <el-select slot="tenantType" v-model="formData.tenantType">
                    <el-option v-for="(item, index) in allPermission" :key="index" :label="item.dictValue" :value="item.dictCode">{{
                        item.dictValue
                    }}</el-option>
                </el-select>
                <el-cascader
                    slot="areaId"
                    v-model="formData.areaId"
                    :options="areaList"
                    placeholder="请选择区域"
                    @change="handleChange"
                    :props="{ label: 'name', value: 'code' }"
                ></el-cascader>
                <el-select slot="tenantState" v-model="formData.tenantState">
                    <el-option v-for="(item, index) in tenantStateOption" :key="index" :label="item.label" :value="+item.value"></el-option>
                </el-select>
                <div class="imgdis-div" slot="tenantslogo" v-show="formData.logo">
                    <i class="el-icon-delete" @click="delformphoto"></i>
                    <img :src="envConfig.baseImgApi + formData.logo" alt="" width="60" height="60" />
                </div>
                <el-upload
                    v-show="!formData.logo"
                    :headers="token"
                    ref="uploadtenantslogo"
                    slot="tenantslogo"
                    limit="1"
                    :action="'/sc-user-center/tenant/addTenantLogo'"
                    list-type="picture-card"
                    multiple="false"
                    :on-success="uploadsuccess"
                    name="avatarfile"
                >
                    <i slot="default" class="el-icon-plus"></i>
                    <div slot="file" slot-scope="{ file }">
                        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                        <span class="el-upload-list__item-actions">
                            <!-- <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                                <i class="el-icon-zoom-in"></i>
                            </span>
                            <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
                                <i class="el-icon-download"></i>
                            </span> -->
                            <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                                <i class="el-icon-delete"></i>
                            </span>
                        </span>
                    </div>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                    <img width="100%" :src="dialogImageUrl" alt="" />
                </el-dialog>
            </zz-form>
        </div>

        <div class="right-tree">
            <label for="">租户菜单</label>
            <div class="tenants-menus-content">
                <el-scrollbar class="el-scrollbar-byself" style="width: 100%">
                    <el-tree
                        :data="tenantsTree"
                        show-checkbox
                        node-key="id"
                        :current-node-key="currentnodekey"
                        :props="treedefaultProps"
                        ref="tenantstree"
                    >
                    </el-tree>
                </el-scrollbar>
            </div>
        </div>
    </div>
</template>
<script>
import envConfig from '@/config';
export default {
    props: ['params'],
    data() {
        return {
            areaList: [],
            tenantStateOption: [
                {
                    label: '启用',
                    value: 1
                },
                {
                    label: '禁用',
                    value: 0
                }
            ],
            envConfig: envConfig,
            token: {
                [localStorage.getItem('SC_token') && 'Authorization']: 'Bearer ' + localStorage.getItem('SC_token')
            },
            // 租户菜单
            tenantsTree: [],
            treedefaultProps: {
                // children: 'children',
                label: 'name'
            },
            currentnodekey: [],
            defaultcheckedkeys: [],
            formData: {
                code: '',
                createBy: '',
                dateCreate: '',
                dateUpdate: '',
                endDate: '',
                id: '',
                logo: '',
                remark: '',
                startDate: '',
                status: '',
                tenantName: '',
                tenantState: 1,
                orgAreaId: '',
                areaId: [],
                cityCode: '',
                provinceCode: '',
                // updateBy: '',
                updateBy: '',
                webUrl: '',
                tenantMenuIds: []
            },
            dialogImageUrl: '',
            dialogVisible: true,
            disabled: false,
            allPermission: [],
            formCols: [
                [
                    {
                        label: '租户名称',
                        prop: 'tenantName',
                        input: true
                    },
                    {
                        label: '管理员姓名',
                        prop: 'userName',
                        input: true
                    },
                    {
                        label: '手机号',
                        prop: 'phone',
                        input: true
                    },
                    {
                        label: '租户类型',
                        prop: 'tenantType',
                        slot: 'tenantType'
                    },
                    {
                        label: '所属区域',
                        prop: 'areaId',
                        slot: 'areaId'
                    },
                    {
                        label: '租户LOGO',
                        prop: 'logo',
                        slot: 'tenantslogo'
                    },
                    {
                        label: '域名',
                        prop: 'webUrl',
                        input: true
                    },
                    {
                        label: '状态',
                        prop: 'tenantState',
                        slot: 'tenantState'
                    }
                ]
            ],
            formRules: {
                tenantName: [
                    this.$valid.inputRequired('租户名称'),
                    this.$valid.pattern(/^[\u4e00-\u9fa5A-Za-z0-9_]{1,20}$/, '限20位,中文、英文字母、数字或下划线')
                ],
                userName: [
                    this.$valid.inputRequired('管理员姓名'),
                    this.$valid.pattern(/^[\u4e00-\u9fa5A-Za-z0-9_]{1,20}$/, '限20位,中文、英文字母、数字或下划线')
                ],
                phone: [this.$valid.patternPhone()],
                tenantType: [this.$valid.inputRequired('租户类型')],
                tenantState: this.$valid.selectRequired('状态'),
                areaId: this.$valid.selectRequired('所属区域')
            },
            formErrors: {},
            pageNum: 1
        };
    },
    computed: {},
    mounted() {
        if (this.params.todo == 'edit') {
            this.__setValue('formData');
            // this.formData.orgAreaId=[110000,110100,110102]
        }
        console.dir(this.formData);
        this.tenantsTree = this.params.tenantsTree ? this.params.tenantsTree : this.tenantsTree;
        this.getTenantsTreeFn();
    },
    methods: {
        getAreaList() {
            this.$http.postForm('/area/selectAll', { id: 123 }).then(({ status, data, msg }) => {
                if (status === 0 && data) {
                    this.areaList = data;
                }
            });
        },
        delformphoto() {
            this.formData.logo = '';
            this.$refs.uploadtenantslogo.clearFiles();
        },
        handleChange() {
            if (Array.isArray(this.formData.areaId) && this.formData.areaId.length > 2) {
                this.formData.orgAreaId = this.formData.areaId[2] || '';
                this.formData.cityCode = this.formData.areaId[1] || '';
                this.formData.provinceCode = this.formData.areaId[0] || '';
            }
        },
        getTenantsTreeFn() {
            // var params = {
            //     tenantName: ''
            // };
            this.$http.post('/dict/selectList', { parentDictCode: 'SYSTEM_TENANT_TYPE' }).then(({ status, data, msg }) => {
                if (0 === status) {
                    this.allPermission = data;
                }
            });
            if (this.formData.id) {
                this.$http.postForm('/tenant/get', { id: this.formData.id }).then(({ status, data, msg }) => {
                    if (0 === status) {
                        this.formData = data;
                        this.$set(this.formData, 'areaId', [this.formData.provinceCode, this.formData.cityCode, this.formData.orgAreaId]);
                        // console.log(JSON.stringify(this.formData),null,2)
                        // this.$refs.tenantstree.setCheckedKeys(this.formData.tenantMenuIds);
                        data.tenantMenuIds.forEach((element) => {
                            var node = this.$refs.tenantstree.getNode(element);
                            if (node !== null && node.isLeaf) {
                                this.$refs.tenantstree.setChecked(node, true);
                            }
                        });
                    }
                });
            } else {
                setTimeout(() => {
                    this.$refs.tenantstree.setCheckedNodes(this.tenantsTree);
                });
            }
        },
        submit() {
            new Promise((resolve) => {
                this.$refs.addTenantsform.validate(resolve);
            }).then(() => {
                var loading = this.$loading();
                let ids = this.$refs.tenantstree.getHalfCheckedKeys();
                this.formData.tenantMenuIds = [...this.$refs.tenantstree.getCheckedKeys(), ...ids];
                let newformdata = this.formData;
                let posturl = '';
                if (this.params.todo === 'edit') {
                    posturl = '/tenant/update';
                } else {
                    posturl = '/tenant/insert';
                }
                this.$http
                    .post(posturl, newformdata)
                    .then(({ status, data: { list = [], total = 0 }, msg }) => {
                        loading.close();
                        if (0 == status) {
                            this.$message.success(msg);
                            this.params.callback && this.params.callback();
                            this.$emit('close');
                        } else {
                            this.$message.error(msg);
                        }
                    })
                    .catch((err) => {
                        loading.close();
                    });
            });
        },
        handleRemove(file) {
            this.$refs.uploadtenantslogo.clearFiles();
        },
        uploadsuccess(response, file, fileList) {
            if (0 === response.status) {
                this.formData.logo = response.data;
            }
        }
    },
    created() {
        this.getAreaList();
    }
};
</script>
<style lang="scss">
.left-info .el-upload-list--picture-card .el-upload-list__item {
    width: 60px;
    height: 60px;
}
.left-info .el-upload--picture-card {
    width: 60px;
    height: 60px;
    line-height: 60px;
    font-size: 14px;
}
.left-info .el-upload--picture-card i {
    font-size: 20px;
}
</style>

<style lang='scss' scoped>
.alert-body__main_content {
    display: flex;
    justify-content: space-between;
}
.left-info {
    width: 400px;
    float: left;
}
.right-tree {
    display: flex;
}
.tenants-menus-content {
    width: 350px;
    margin-left: 10px;
    border: 1px solid #e0e1e3;
}
.imgdis-div {
    width: 60px;
    height: 60px;
    position: relative;
}
.imgdis-div i {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.imgdis-div:hover i {
    display: block;
}
</style>