增加物业管理模块

src/views/modules/communityService/estateManagement/cpts/detail.vue

@@ -0,0 +1,71 @@
+<template>
+    <div>
+      <div class="dialog-h-content scroll-h">
+  
+        <div 
+             class="m-row">
+          <div class="m-info">
+            <div class="info-prop">
+              <span class="info-title-2">物业名称</span>
+              <span>{{ villageList.name|| "--" }}</span>
+            </div>
+          </div>
+        </div>
+  
+      </div>
+      <div class="div-btn">
+        <el-button size="small"
+                   @click="handleCancle">关 闭</el-button>
+  
+      </div>
+    </div>
+  </template>
+  
+  <script>
+  import { mapGetters } from "vuex";
+  import { requestPost } from "@/js/dai/request";
+  import fileList from '@/views/components/fileList'
+  
+  export default {
+    props: {
+      formId: {
+        type: String,
+        default: "",
+      },
+      villageList:{
+        type:Object,
+        default:()=>{}
+      }
+    },
+  
+    data () {
+      return {
+  
+        customerId: localStorage.getItem("customerId"),
+  
+        initLoading: false,
+  
+        fmData: {},
+  
+     
+      };
+    },
+    components: { fileList },
+    computed: {
+  
+    },
+    watch: {},
+  
+    methods: {
+      
+      handleCancle () {
+        this.$emit("diaDetailClose");
+      },
+    },
+  };
+  </script>
+  
+  <style lang="scss" scoped >
+  @import "@/assets/scss/modules/management/detail-main.scss";
+  </style>
+  

src/views/modules/communityService/estateManagement/cpts/edit.vue

@@ -0,0 +1,205 @@
+<template>
+    <div>
+      <div class="dialog-h-content scroll-h">
+        <el-form
+          ref="ref_form"
+          :inline="true"
+          :model="fmData"
+          :rules="dataRule"
+          :disabled="formType === 'watch'"
+          class="form"
+        >
+          <el-form-item
+            label="物业名称"
+            prop="name"
+            label-width="150px"
+            style="display: block"
+          >
+            <el-input
+              v-if="formType == 'add' || formType == 'edit'"
+              class="item_width_1"
+              show-word-limit
+              placeholder="请输入物业名称"
+              v-model="fmData.name"
+            >
+            </el-input>
+            <div style="width:610px" v-else>{{ fmData.serviceName || "--" }}</div>
+          </el-form-item>
+        
+        </el-form>
+      </div>
+  
+      <div class="div_btn resi-btns">
+        <el-button size="small" @click="handleCancle">取 消</el-button>
+        <el-button
+          v-if="formType != 'watch'"
+          type="primary"
+          size="small"
+          :disabled="btnDisable"
+          @click="handleComfirm"
+          >确 定</el-button
+        >
+      </div>
+    </div>
+  </template>
+  
+  <script>
+  import { mapGetters } from "vuex";
+  import { requestPost } from "@/js/dai/request";
+  import formVltHelper from "dai-js/tools/formVltHelper";
+  
+  export default {
+    props: {
+      formId: {
+        type: String,
+        default: "",
+      },
+      formType: {
+        type: String,
+        default: "info",
+      },
+      villageList: {
+        type: Object,
+        default: {},
+      },
+    },
+  
+    data() {
+      return {
+        uploadUrl: window.SITE_CONFIG["apiURL"] + "/oss/file/uploadqrcodeV2",
+        customerId: localStorage.getItem("customerId"),
+  
+        btnDisable: false,
+  
+        fmData: {
+        name:""
+        },
+  
+        levelOptions: [
+          {
+            value: "0",
+            label: "市级",
+          },
+          {
+            value: "1",
+            label: "区级",
+          },
+          {
+            value: "2",
+            label: "街道级",
+          },
+        ],
+        categoryOptions: [],
+      };
+    },
+    components: {},
+    computed: {
+      dataRule() {
+        return {
+          name: [
+            { required: true, message: "物业名字不能为空", trigger: "blur" },
+          ],
+        };
+      },
+    },
+    watch: {},
+  
+    async mounted() {
+      this.initForm();
+    },
+  
+    methods: {
+      async initForm() {
+        if ( this.formType != "add") {
+          this.getInfo();
+        }
+      },
+  
+      async getInfo() {
+        this.fmData.name = this.villageList.name
+      },
+   
+      async handleComfirm() {
+        this.btnDisable = true;
+        setTimeout(() => {
+          this.btnDisable = false;
+        }, 10000);
+        this.$refs["ref_form"].validate((valid, messageObj) => {
+          if (!valid) {
+            app.util.validateRule(messageObj);
+            this.btnDisable = false;
+          } else {
+            this.submit();
+          }
+        });
+      },
+  
+      async submit() {
+        let url = "";
+        let params = { ...this.fmData };
+        if (this.formType === "add") {
+          url = "/gov/org/propertymanagement/add";
+        } else {
+          url = "/gov/org/propertymanagement/update";
+          this.$set(params,"id", this.villageList.id)
+        }
+        const { data, code, msg } = await requestPost(url, params);
+  
+        if (code === 0) {
+          this.$message({
+            type: "success",
+            message: "操作成功",
+          });
+          this.$emit("afterEdit");
+          this.btnDisable = false;
+        } else {
+          this.btnDisable = false;
+          this.$message.error(msg);
+        }
+      },
+  
+      handleCancle() {
+        this.$emit("close");
+      },
+    },
+  };
+  </script>
+  
+  <style lang="scss" scoped>
+  .item_width_1 {
+    width: 500px;
+  }
+  .item_width_2 {
+    width: 400px;
+  }
+  .item_width_3 {
+    margin-left: 10px;
+    width: 200px;
+  }
+  .item_width_4 {
+    width: 200px;
+  }
+  
+  .div_map {
+    margin-top: 10px;
+  }
+  
+  .div_btn {
+    // display: flex;
+    // justify-content: flex-end;
+  }
+  .el-tabs {
+    margin: 0 20px;
+  }
+  .el-upload__tip {
+    color: rgb(155, 155, 155);
+    margin: 0;
+  }
+  .form {
+    margin-top: 30px;
+  }
+  
+  .attachement-list {
+  }
+  </style>
+  

src/views/modules/communityService/estateManagement/estateManagement.vue

@@ -0,0 +1,332 @@
+<template>
+    <div class="div_main">
+      <div v-show="true">
+        <div class="div_search">
+          <el-form :inline="true"
+                   :model="searchData"
+                   ref="ref_searchform"
+                   :label-width="'80px'">
+            <div>
+              <el-form-item label="物业名称"
+                            prop="serviceContent">
+                <el-input v-model="searchData.name"
+                          class="item_width_2"
+                          size="small"
+                          clearable
+                          placeholder="请输入">
+                </el-input>
+              </el-form-item>
+  
+             
+  
+              <el-button style="margin-left: 30px"
+                         size="small"
+                         class="diy-button--search"
+                         @click="handleSearch">查询</el-button>
+              <el-button style="margin-left: 10px"
+                         size="small"
+                         class="diy-button--reset"
+                         @click="resetSearch">重置</el-button>
+            </div>
+          </el-form>
+        </div>
+  
+        <div class="div_table">
+          <div class="div_btn">
+            <el-button class="diy-button--add"
+                       size="small"
+                       @click="handleAdd">新增</el-button>
+  
+            <!-- <el-button
+              @click="handleExport"
+              class="diy-button--reset"
+              size="small"
+              >导出</el-button
+            > -->
+          </div>
+  
+          <el-table :data="tableData"
+                    border
+                    :header-cell-style="{ background: '#2195FE', color: '#FFFFFF' }"
+                    class="table"
+                    style="width: 100%"
+                    :height="maxTableHeight">
+            <el-table-column label="序号"
+                             fixed="left"
+                             type="index"
+                             align="center"
+                             width="50" />
+  
+            <el-table-column prop="name"
+                             align="center"
+                             label="物业名称"
+                             :show-overflow-tooltip="true">
+            </el-table-column>
+  
+            <el-table-column prop="totalNeighborHood"
+                             align="center"
+                             label="管理小区数量	"
+                             :show-overflow-tooltip="true">
+            </el-table-column>
+  
+            <el-table-column fixed="right"
+                             label="操作"
+                             align="center"
+                             width="200">
+              <template slot-scope="scope">
+                <el-button @click="handleWatch(scope.row)"
+                           type="text"
+                           size="small"
+                           class=".div-table-button--detail">查看</el-button>
+                <el-button @click="handleEdit(scope.row)"
+                           type="text"
+                           size="small"
+                           class="div-table-button--edit">编辑</el-button>
+  
+                <el-popconfirm title="删除之后无法回复，确认删除？"
+                               @onConfirm="handleDelete(scope.row, scope.$index)"
+                               @confirm="handleDelete(scope.row, scope.$index)">
+                  <el-button slot="reference"
+                             type="text"
+                             size="small"
+                             style="margin-left: 10px"
+                             class="div-table-button--delete">删除</el-button>
+                </el-popconfirm>
+              </template>
+            </el-table-column>
+          </el-table>
+  
+          <div>
+            <el-pagination @size-change="handleSizeChange"
+                           @current-change="handleCurrentChange"
+                           :current-page.sync="pageNo"
+                           :page-sizes="[20, 50, 100, 200]"
+                           :page-size="parseInt(pageSize)"
+                           layout="sizes, prev, pager, next, total"
+                           :total="total">
+            </el-pagination>
+          </div>
+        </div>
+      </div>
+  
+      <!-- 修改弹出框 -->
+      <el-dialog v-if="formShow"
+                 :visible.sync="formShow"
+                 :close-on-click-modal="false"
+                 :close-on-press-escape="false"
+                 :title="formTitle"
+                 width="850px"
+                 top="5vh"
+                 class="dialog-h"
+                 @closed="handleClose">
+        <edit-form ref="eleEditForm"
+                   :formId="formId"
+                   :formType="formType"
+                   @close="handleClose"
+                   :villageList="villageList"
+                   @afterEdit="handleEditSuccess"></edit-form>
+      </el-dialog>
+  
+      <!-- 详情弹出框 -->
+      <el-dialog v-if="detailShow"
+                 :visible.sync="detailShow"
+                 :close-on-click-modal="false"
+                 :close-on-press-escape="false"
+               
+                 :title="'详情'"
+                 width="850px"
+                 top="5vh"
+                 class="dialog-h"
+                 @closed="handleClose">
+        <detail-form ref="ref_form_detail"
+                     :formId="formId"
+                     :villageList="villageList"
+                     @diaDetailClose="handleClose"></detail-form>
+      </el-dialog>
+    </div>
+  </template>
+  
+  <script>
+  import { requestPost } from "@/js/dai/request";
+  import nextTick from "dai-js/tools/nextTick";
+  import { mapGetters } from "vuex";
+  import axios from "axios";
+  import editForm from "./cpts/edit";
+  import detailForm from "./cpts/detail";
+  
+  function iniSearchData () {
+    return {
+      name: "",
+    };
+  }
+  
+  export default {
+    components: { editForm, detailForm },
+  
+    data () {
+      return {
+        tableData: [],
+        villageList:{},
+        searchData: iniSearchData(),
+        categoryOptions: [],
+  
+        pageNo: 1,
+        pageSize: window.localStorage.getItem("pageSize") || 20,
+        total: 1,
+  
+        formId: "",
+        formShow: false,
+        formTitle: "服务项目",
+        formType: "", // 列表list 新增add  修改edit 详情info
+  
+        detailShow: false,
+      };
+    },
+    computed: {
+      maxTableHeight () {
+        return this.$store.state.inIframe
+          ? this.clientHeight - 410 + this.iframeHeigh
+          : this.clientHeight - 410;
+      },
+      ...mapGetters(["clientHeight", "iframeHeight"]),
+    },
+   
+    mounted () {
+      console.log(this.$store.state);
+      this.user = this.$store.state.user;
+      this.getTableData();
+    },
+    methods: {
+      handleSearch (val) {
+        console.log(this.searchData);
+        this.pageNo = 1;
+        this.getTableData();
+      },
+  
+      async handleExport () {
+        const url = "/gov/project/icEvent/export";
+        const { pageSize, pageNo, searchData } = this;
+        axios({
+          url: window.SITE_CONFIG["apiURL"] + url,
+          method: "post",
+          data: {
+            pageSize,
+            pageNo,
+            ...searchData,
+          },
+          responseType: "blob",
+        })
+          .then((res) => {
+            let fileName = window.decodeURI(
+              res.headers["content-disposition"].split(";")[1].split("=")[1]
+            );
+            console.log("filename", fileName);
+            let blob = new Blob([res.data], { type: "application/vnd.ms-excel" });
+            var url = window.URL.createObjectURL(blob);
+            var aLink = document.createElement("a");
+            aLink.style.display = "none";
+            aLink.href = url;
+            aLink.setAttribute("download", fileName);
+            document.body.appendChild(aLink);
+            aLink.click();
+            document.body.removeChild(aLink); //下载完成移除元素
+            window.URL.revokeObjectURL(url); //释放掉blob对象
+          })
+          .catch((err) => {
+            console.log("获取导出情失败", err);
+            return this.$message.error("网络错误");
+          });
+      },
+  
+      handleAdd () {
+        this.formType = "add";
+        this.formTitle = "新增";
+        this.formShow = true;
+      },
+  
+      handleWatch (row) {
+        // this.formType = "watch";
+        this.villageList = row
+        // this.formTitle = "查看";
+        // this.formShow = true;
+        console.log(this.villageList);
+        this.detailShow = true
+      },
+  
+      handleEdit (row) {
+        this.formType = "edit";
+        this.formId = row.villageId;
+        this.villageList = row
+        this.formTitle = "编辑";
+        this.formShow = true;
+      },
+  
+      handleClose () {
+        this.formShow = false;
+        this.detailShow = false
+      },
+  
+      handleEditSuccess () {
+        this.handleClose();
+        this.getTableData();
+      },
+  
+      async handleDelete (rowData, rowIndex) {
+        console.log(rowData, rowIndex);
+        const url = "/gov/org/propertymanagement/delete";
+        let params = {id : rowData.id}
+        const { data, code, msg } = await requestPost(url,params);
+        if (code === 0) {
+          this.$message.success("删除成功！");
+          this.getTableData();
+        } else {
+          this.$message.error("操作失败！");
+        }
+      },
+  
+      async getTableData () {
+        const url = "/gov/org/propertymanagement/page";
+  
+        const { pageSize, pageNo, searchData } = this;
+        const { data, code, msg } = await requestPost(url, {
+          pageSize,
+          pageNo,
+          ...searchData,
+        });
+  
+        if (code === 0) {
+          this.total = data.total || 0;
+          this.tableData = data.list
+            ? data.list.map((item) => {
+              return item;
+            })
+            : [];
+        } else {
+          this.$message.error(msg);
+        }
+      },
+  
+      handleSizeChange (val) {
+        this.pageSize = val;
+        window.localStorage.setItem("pageSize", val);
+        this.getTableData();
+      },
+      handleCurrentChange (val) {
+        this.pageNo = val;
+        this.getTableData();
+      },
+  
+      resetSearch () {
+        this.searchData = iniSearchData();
+        this.getTableData();
+      },
+    },
+  };
+  </script>
+  
+  <style lang="scss" scoped>
+  @import "@/assets/scss/buttonstyle.scss";
+  @import "@/assets/scss/modules/management/list-main.scss";
+  @import "@/assets/scss/modules/shequzhili/event-info.scss";
+  </style>
+