SmartCommunity/operationSupport/src/views/propertyManagement/phone.vue

<template>
    <div class="phone">
        <div class="search">
            <el-input placeholder="请输入管理处名称/电话" maxlength="11" class="search-input" clearable v-model.trim="location"></el-input>
            <el-select placeholder="请选择所属社区" v-model="mixins_query.communityId" clearable>
                <el-option v-for="(item, index) in communityListCreate" :key="index" :label="item.label" :value="item.id"></el-option>
            </el-select>
            <el-button type="primary" placeholder="状态" class="search-btn" @click="searchInfo" icon="el-icon-search" v-preventReClick
                >查询
            </el-button>
            <div class="add">
                <img src="../../assets/img/btn_tianjia@2x.png" alt="" @click="add" />
            </div>
        </div>

        <div class="content">
            <div class="roles-wrap">
                <zz-table
                    :cols="cols"
                    :settings="{ showNumber: true, stripe: true, showNumberWidth: '140' }"
                    :data="mixins_list"
                    :pageset="mixins_pageset"
                    @page-change="pageChange"
                    @selection-change="selectionChange"
                    :loading="mixins_onQuery"
                >
                    <template slot-scope="scope" slot="times">
                        <div>
                            {{ scope.row.time | filterTime }}
                        </div>
                    </template>
                    <template slot-scope="scope" slot="opt">
                        <div class="opt">
                            <img src="../../assets/img/icon_bianji@2x.png" alt="" @click="clickEdit('endit', scope.row)" />
                            <img src="../../assets/img/icon_shanchu@2x.png" alt="" @click="clickEdit('del', scope.row)" />
                        </div>
                    </template>
                </zz-table>
            </div>
            <!-- 详情弹框 -->
            <div class="dialog-info">
                <el-dialog :visible.sync="centerDialogVisible" width="524px" :close-on-click-modal="false">
                    <div class="dialog">
                        <div class="dialog-header">
                            <i class="el-dialog__close el-icon el-icon-close" @click="dialogButton('clear')"></i>
                            <div class="dialogTitle">
                                {{ dialogTitle }}物业电话(
                                <span style="color: red"> *</span>
                                为必填项)
                            </div>
                        </div>
                        <div class="dialog-content">
                            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                                <el-form-item label="所属社区" prop="communityList">
                                    <el-select placeholder="请选择所属社区" v-model="ruleForm.communityList" class="dialog-select">
                                        <el-option
                                            v-for="(item, index) in communityListCreate"
                                            :key="index"
                                            :label="item.label"
                                            :value="item.id"
                                        ></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="管理处名称" prop="newManagementName">
                                    <el-input v-model="ruleForm.newManagementName" placeholder="不能超过20字" maxlength="20"></el-input>
                                </el-form-item>
                                <el-form-item label="电话号码" prop="newPhone">
                                    <el-input
                                        @blur="ruleForm.newPhone = $event.target.value.trim()"
                                        v-model.trim="ruleForm.newPhone"
                                        placeholder="例如：010-26888888,13888888888"
                                        maxlength="13"
                                    ></el-input>
                                </el-form-item>
                                <el-form-item class="dialog-footer">
                                    <span>
                                        <el-button type="primary" @click="dialogButton('clear')" plain>取消</el-button>
                                        <el-button type="primary" @click="dialogButton('addSave')">保存</el-button>
                                    </span>
                                </el-form-item>
                            </el-form>
                        </div>
                    </div>
                </el-dialog>
            </div>
            <!-- 删除弹框 -->
            <div class="dialog-delete">
                <el-dialog title="确认提示" :visible.sync="dialogVisibleDelete" width="30%">
                    <div class="dialog-deletecontent">
                        <img src="../../assets/img/icon-warning.png" alt="" class="dialog-icon" />
                        <div>
                            <p>确认删除</p>
                            <p>
                                是否删除对应的记录 &nbsp;---&nbsp;<span class="delete-name">{{ deleteName }}</span>
                            </p>
                        </div>
                    </div>

                    <span slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisibleDelete = false" type="primary" plain>取 消</el-button>
                        <el-button type="primary" @click="deletes">确 定</el-button>
                    </span>
                </el-dialog>
            </div>
        </div>
    </div>
</template>

<script>
import list from '@utils/list.js';
export default {
    mixins: [list],
    data() {
        let _this = this;
        return {
            dialogTitle: '',
            // 删除弹框信息
            deleteName: '',
            dialogVisibleDelete: false,
            // 添加弹框信息
            ruleForm: {
                communityList: '',
                newManagementName: '',
                newPhone: ''
            },
            rules: {
                communityList: [{ required: true, message: '请选择社区', trigger: 'change' }],
                newManagementName: [
                    { required: true, message: '请输入管理处名称', trigger: 'blur' },
                    { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
                ],
                newPhone: [this.$valid.patternPhoneNumber()]
            },
            // 输入地址
            location: '',
            //社区列表
            communityListCreate: [],
            cols: [
                {
                    label: '所属社区',
                    prop: 'communityId',
                    format(val) {
                        let va = '';
                        _this.$store.getters['getAreaSelect'].forEach((element) => {
                            if (element.id === val) {
                                va = element.communityName;
                            }
                        });
                        return va;
                    }
                },
                {
                    label: '管理处名称',
                    prop: 'name'
                },
                {
                    label: '电话',
                    prop: 'telephone'
                },
                {
                    label: '操作',
                    prop: 'id',
                    slot: 'opt'
                }
            ],
            mixins_post: 'post',
            // 显隐弹框
            centerDialogVisible: false,
            // 编辑按钮
            enditShow: false,
            // 删除的id
            rowId: ''
        };
    },

    created() {
        this.getCommunityList();
        this.mixins_dataUrl = '/sc-community-web/property/telephone/page';
        this.mixins_query = {};
        this.mixins_search();
    },

    mounted() {},
    methods: {
        //**添加按钮 */
        add() {
            this.dialogTitle = '添加';
            this.centerDialogVisible = true;
            this.enditShow = false;
            this.$refs['ruleForm'].resetFields();
            this.ruleForm.newPhone = '';
            this.ruleForm.communityList = [];
            this.ruleForm.newManagementName = '';
        },
        /**查询按钮*/
        searchInfo() {
            this.mixins_query.name = this.location;
            this.mixins_search();
        },
        /**
         * 弹框按钮
         * @param type 类型
         * @return {void}
         * */
        dialogButton(type) {
            if (type == 'addSave') {
                this.$refs['ruleForm'].validate((valid) => {
                    if (valid) {
                        // if (this.ruleForm.newManagementName && this.ruleForm.newManagementName.indexOf('中心') != -1) {
                        //     return this.$message.warning('不能包含中心');
                        // }
                        let newManagementName = this.ruleForm.newManagementName.trim();
                        var communityId = this.ruleForm.communityList;
                        if (this.ruleForm.communityList !== NaN) {
                            this.communityListCreate.forEach((item) => {
                                if (item.label == this.ruleForm.communityList) {
                                    return (communityId = item.id);
                                }
                            });
                        }
                        let query = {
                            communityId: communityId,
                            name: newManagementName,
                            telephone: this.ruleForm.newPhone,
                            id: this.ruleForm.id
                        };
                        console.log('query', query);
                        if (!this.enditShow) {
                            this.$http.post('/sc-community-web/property/telephone/add', query).then((res) => {
                                this.message(res.status, res.msg);
                            });
                            console.log('新增保存', this.ruleForm);
                        }
                        // this.centerDialogVisible=false;
                        else {
                            this.$http.post('/sc-community-web/property/telephone/update', query).then((res) => {
                                this.message(res.status, res.msg);
                            });
                        }
                    } else {
                        return false;
                    }
                });
            } else {
                this.centerDialogVisible = false;
            }
        },
        // 删除按钮
        deletes() {
            let query = {
                id: this.rowId
            };
            this.$http.get('/sc-community-web/property/telephone/delete', query).then((res) => {
                this.message(res.status, res.msg);
            });
        },
        // 提示消息
        message(status, text) {
            if (status === 0) {
                this.$message({
                    message: `${text}`,
                    type: 'success'
                });
                this.centerDialogVisible = false;
                this.dialogVisibleDelete = false;
                this.mixins_search();
            } else {
                return this.$message({
                    message: `${text}`,
                    type: 'error'
                });
            }
        },
        /** 获取社区列表*/
        getCommunityList() {
            this.communityListCreate = [];
            let onOption = '';
            this.$http.get('/sc-community/assets/community/list', {}).then((res) => {
                console.log('获取社区列表', res);
                this.$store.commit('setAreaSelect', res.data);
                res.data.map((item) => {
                    onOption = {
                        label: item.communityName,
                        id: item.id
                    };
                    this.communityListCreate.push(onOption);
                });
                // console.log('this.communityListCreate', this.communityListCreate);
            });
        },
        /** 查看处理详情*/
        clickEdit(type, row) {
            this.dialogTitle = '编辑';
            console.log('查看处理详情', row);
            let communityId = row.communityId;
            var that = this;
            this.$store.getters['getAreaSelect'].forEach((element) => {
                if (element.id === communityId) {
                    that.ruleForm.communityList = element.communityName;
                }
            });
            this.ruleForm.newManagementName = row.name;
            this.ruleForm.newPhone = row.telephone;
            this.ruleForm.id = row.id;
            this.rowId = row.id;
            if (type == 'endit') {
                this.centerDialogVisible = true;
                this.enditShow = true;
            } else {
                // this.deleteName = row.telephone;
                // this.dialogVisibleDelete = true;
                const { communityName, buildingName, unitName, roomNumber } = row;
                // let title = `是否确定删除对应的记录${communityName}${buildingName}${unitName}${telephone}”`;
                let title = `是否确定删除对应的记录`;
                this.$msgBox(title)
                    .then(() => {
                        let query = {
                            id: this.rowId
                        };
                        this.$http
                            .get('/sc-community-web/property/telephone/delete', query)
                            .then(({ status, msg }) => {
                                if (0 === status) {
                                    this.$message.success(msg);
                                    this.mixins_search();
                                } else {
                                    this.$message.error(msg);
                                }
                            })
                            .catch(() => {});
                    })
                    .catch(() => {});
            }
        }
    }
};
</script>
<style lang="scss" scoped>
@import './style.scss';
</style>