修改物业电话投诉建议

operationSupport/src/views/propertyManagement/phone.vue

@@ -1,108 +1,44 @@
 <template>
-    <div class="phone">
+    <div class="phone main">
         <div class="search">
-            <el-input placeholder="请输入管理处名称/电话" maxlength="11" class="search-input" clearable v-model.trim="location"></el-input>
+            <el-input
+                placeholder="请输入管理处名称/电话"
+                maxlength="11"
+                class="search-input"
+                clearable
+                v-model.trim="mixins_query.name"
+            ></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 type="primary" placeholder="状态" class="search-btn" @click="mixins_search" 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>
+                <img src="../../assets/img/btn_tianjia@2x.png" alt="" @click="add('add')" />
             </div>
         </div>
+        <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="add('edit', scope.row)" />
+                    <img src="../../assets/img/icon_shanchu@2x.png" alt="" @click="deletes(scope.row.id)" />
+                </div>
+            </template>
+        </zz-table>
     </div>
 </template>
 
@@ -113,26 +49,6 @@ export default {
     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: [
@@ -165,17 +81,13 @@ export default {
             ],
             mixins_post: 'post',
             // 显隐弹框
-            centerDialogVisible: false,
-            // 编辑按钮
-            enditShow: false,
-            // 删除的id
-            rowId: ''
+            centerDialogVisible: false
         };
     },
 
     created() {
         this.getCommunityList();
-        this.mixins_dataUrl = '/sc-community-web/property/telephone/page';
+        this.mixins_dataUrl = '/sc-community/property/telephone/page';
         this.mixins_query = {};
         this.mixins_search();
     },
@@ -183,93 +95,45 @@ export default {
     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;
-                    }
+        add(todo, data = {}) {
+            new Promise((resolve) => {
+                let title = '新增物业电话';
+                if (todo == 'add') {
+                } else {
+                    title = '修改物业电话';
+                }
+                this.$store.dispatch('addPopup', {
+                    url: '/propertyManagement/stepPage/addPhone.vue',
+                    width: '524px',
+                    height: '300px',
+                    props: {
+                        data,
+                        communityArr: this.communityListCreate,
+                        callback: resolve
+                    },
+                    title: title
                 });
-            } 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);
+            }).then(() => {
+                this.mixins_search();
             });
         },
-        // 提示消息
-        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'
-                });
-            }
+        // 删除按钮
+        deletes(id) {
+            this.$msgBox(`是否确定删除对应的记录`, '删除后将无法恢复，是否继续？')
+                .then(() => {
+                    this.$http.get('/sc-community/property/telephone/delete?id=' + id).then(({ status, data, msg }) => {
+                        if (0 === status) {
+                            this.$message({
+                                type: 'success',
+                                message: '删除成功!'
+                            });
+                            this.mixins_search();
+                        } else {
+                            this.$message.error(msg);
+                        }
+                    });
+                })
+                .catch(() => {});
         },
         /** 获取社区列表*/
         getCommunityList() {
@@ -285,52 +149,7 @@ export default {
                     };
                     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(() => {});
-            }
         }
     }
 };

operationSupport/src/views/propertyManagement/stepPage/addPhone.vue

@@ -0,0 +1,78 @@
+<template>
+    <el-form :model="ruleForm" :rules="formRules" ref="formPhone" label-width="100px">
+        <el-form-item label="所属社区" prop="communityId">
+            <el-select placeholder="请选择所属社区" v-model="ruleForm.communityId" 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="name">
+            <el-input v-model="ruleForm.name" placeholder="不能超过20字" maxlength="20"></el-input>
+        </el-form-item>
+        <el-form-item label="电话号码" prop="telephone">
+            <el-input
+                @blur="ruleForm.telephone = $event.target.value.trim()"
+                v-model.trim="ruleForm.telephone"
+                placeholder="例如：010-26888888,13888888888"
+                maxlength="13"
+            ></el-input>
+        </el-form-item>
+    </el-form>
+</template>
+<script>
+export default {
+    props: ['params'],
+    data() {
+        return {
+            communityListCreate: [],
+            ruleForm: {
+                communityId: '',
+                name: '',
+                telephone: ''
+            },
+            formRules: {
+                communityId: [this.$valid.selectRequired('所属社区')],
+                name: [
+                    { required: true, message: '请输入管理处名称', trigger: 'blur' },
+                    { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
+                ],
+                telephone: [this.$valid.patternPhoneNumber()]
+            }
+        };
+    },
+    methods: {
+        submit() {
+            this.$refs.formPhone.validate((valid) => {
+                if (valid) {
+                    var loading = this.$loading();
+                    let url = '/sc-community/property/telephone/add';
+                    if (!!this.ruleForm.id) {
+                        url = '/sc-community/property/telephone/update';
+                    }
+                    this.$http
+                        .post(url, this.ruleForm)
+                        .then(({ status, msg }) => {
+                            if (status == 0) {
+                                this.$message.success(msg);
+                                this.params.callback();
+                                this.$emit('close');
+                            } else {
+                                this.$message.error(msg);
+                            }
+                            loading.close();
+                        })
+                        .catch(() => {
+                            loading.close();
+                        });
+                }
+            });
+        }
+    },
+    created() {
+        this.communityListCreate = this.params.communityArr;
+        if (!!this.params.data.id) {
+            let paramsData = JSON.parse(JSON.stringify(this.params.data));
+            Object.assign(this.ruleForm, paramsData);
+        }
+    }
+};
+</script>