From fb980eef5fed85f92f5bc217012385436ce63c88 Mon Sep 17 00:00:00 2001
From: zxc <1272811460@qq.com>
Date: Wed, 24 Aug 2022 11:17:39 +0800
Subject: [PATCH] worklog

---
 .../communityService/worklog/index.vue        | 1040 +++++++++++++++++
 .../worklog/workLogDetail.vue                 |  209 ++++
 2 files changed, 1249 insertions(+)
 create mode 100644 src/views/modules/communityService/worklog/index.vue
 create mode 100644 src/views/modules/communityService/worklog/workLogDetail.vue

diff --git a/src/views/modules/communityService/worklog/index.vue b/src/views/modules/communityService/worklog/index.vue
new file mode 100644
index 000000000..470ce4fa9
--- /dev/null
+++ b/src/views/modules/communityService/worklog/index.vue
@@ -0,0 +1,1040 @@
+<template>
+    <div v-if="pageLoading" class="resi-container">
+        <el-card ref="searchCard" class="search-card">
+            <div class="">
+                <el-form ref="searchForm" :inline="true" :model="searchForm" size="small" label-width="100px"
+                         class="demo-form-inline">
+                    <div>
+                        <el-form-item label="所属网格"
+                                      prop="gridId">
+                          <el-select v-model="searchForm.gridId"
+                                     filterable
+                                     placeholder="请选择"
+                                     clearable>
+                            <el-option v-for="item in optionsG"
+                                       :key="item.value"
+                                       :label="item.label"
+                                       :value="item.value">
+                            </el-option>
+                          </el-select>
+                        </el-form-item>
+                        <el-form-item label="服务类型"
+                                      prop="serviceType">
+                            <el-select v-model="searchForm.serviceType"
+                                       filterable
+                                       placeholder="请选择"
+                                       clearable>
+                                <el-option v-for="item in serviceTypeList"
+                                           :key="item.serviceType"
+                                           :label="item.serviceTypeName"
+                                           :value="item.serviceType">
+                                </el-option>
+                            </el-select>
+                        </el-form-item>
+                        <el-form-item label="申请人" prop="name">
+                            <el-input v-model="searchForm.applicantName" placeholder="请输入" class="input-width"
+                                      clearable></el-input>
+                        </el-form-item>
+                        <el-form-item label="住址" prop="mobile">
+                            <el-input v-model="searchForm.applicantAddress" placeholder="请输入" class="input-width"
+                                      clearable></el-input>
+                        </el-form-item>
+                    </div>
+                    <div>
+                        <el-form-item label="服务内容" prop="idCard">
+                            <el-input v-model="searchForm.serviceContent" placeholder="请输入" class="input-width"
+                                      clearable></el-input>
+                        </el-form-item>
+                        <el-form-item label="联系电话" prop="address">
+                            <el-input v-model="searchForm.applicantMobile" placeholder="请输入" class="input-width"
+                                      clearable></el-input>
+                        </el-form-item>
+                        <el-form-item>
+                            <el-button class="diy-button--search" size="small" @click="handleSearch">查询</el-button>
+                            <el-button class="diy-button--reset" size="small" @click="resetForm('searchForm')">重置
+                            </el-button>
+                        </el-form-item>
+                    </div>
+
+                </el-form>
+            </div>
+        </el-card>
+        <el-card class="resi-card-table">
+
+            <div class="resi-row-btn">
+                <el-button class="diy-button--add"
+                           style="margin-left: 0"
+                           size="small"
+                           @click="handleAdd">新增
+                </el-button>
+                <el-button
+                        class="diy-button--export"
+                        size="small"
+                        @click="handleExportModule('room')">下载模板
+                </el-button>
+                <el-upload
+                        ref="upload"
+                        class="upload-demo"
+                        action="uploadUlr"
+                        :limit="1"
+                        :accept="'.xls,.xlsx'"
+                        :with-credentials="true"
+                        :show-file-list="false"
+                        :auto-upload="true"
+                        :on-success="handleExcelSuccess"
+                        :before-upload="beforeExcelUpload"
+                        :http-request="uploadHttpRequest">
+                    <el-button size="small" class="diy-button--delete" :loading="importLoading">{{importBtnTitle}}
+                    </el-button>
+                </el-upload>
+                <el-button class="diy-button--reset" size="small" :loading="exportBtn" @click="handleExport">{{
+                    exportBtnTitle }}
+                </el-button>
+            </div>
+
+            <el-table
+                    :data="tableData"
+                    row-key="id"
+                    v-loading="tableLoading"
+                    border
+                    style="width: 100%"
+                    class="resi-table">
+                <el-table-column label="序号" type="index" align="center" width="50">
+                </el-table-column>
+                <el-table-column
+                        prop="gridName"
+                        label="所属网格"
+                        align="center"
+                        width="100"/>
+                <el-table-column
+                        prop="serviceTypeName"
+                        label="服务类型"
+                        align="center"
+                        min-width="180"/>
+                <el-table-column
+                        prop="principalName"
+                        label="申请人"
+                        align="center"
+                        min-width="160"/>
+                <el-table-column
+                        prop="applicantAddress"
+                        label="住址"
+                        align="center"
+                        min-width="160"/>
+                <el-table-column
+                        prop="serviceContent"
+                        label="服务内容"
+                        align="center"
+                        min-width="160"/>
+                <el-table-column
+                        prop="applicantMobile"
+                        label="联系电话"
+                        align="center"
+                        min-width="160"/>
+                <el-table-column
+                        prop="principalName"
+                        label="责任人"
+                        align="center"
+                        width="100"/>
+                <el-table-column
+                        prop="serviceTime"
+                        label="服务时间"
+                        align="center"
+                        show-overflow-tooltip
+                        min-width="180"/>
+                <el-table-column
+                        prop="remark"
+                        label="备注"
+                        align="center"
+                        width="100"/>
+                <el-table-column fixed="right" label="操作" align="center" width="200">
+                    <template slot-scope="scope">
+                        <el-button
+                                @click="handleLook(scope.row)"
+                                type="text"
+                                size="small"
+                                class="btn-color-look">查看</el-button>
+                        <el-button
+                                @click="handleEdit(scope.row, 'edit')"
+                                type="text"
+                                size="small"
+                                class="btn-color-edit">修改</el-button>
+                        <el-popconfirm
+                                title="删除之后无法恢复，确认删除？"
+                                @onConfirm="handleDel(scope.row)">
+                            <el-button
+                                    slot="reference"
+                                    type="text"
+                                    size="small"
+                                    class="btn-color-del">删除</el-button>
+                        </el-popconfirm>
+                    </template>
+                </el-table-column>
+            </el-table>
+            <div>
+                <el-pagination
+                        @size-change="handleSizeChange"
+                        @current-change="handleCurrentChange"
+                        :current-page.sync="currentPage"
+                        :page-sizes="[20, 50, 100, 200]"
+                        :page-size="pageSize"
+                        layout="sizes, prev, pager, next, total"
+                        :total="total">
+                </el-pagination>
+            </div>
+        </el-card>
+
+        <el-dialog title=""
+                   :visible.sync="dialogVisible"
+                   width="50%"
+                   top="5vh"
+                   append-to-body
+                   class="dialog-h"
+                   :close-on-click-modal="false"
+                   :before-close="handlerCancle">
+            <el-form v-if="dialogVisible"
+                     label-width="120px"
+                     :model="workLogDetail"
+                     ref="ruleForm"
+                     class="form-wr dialog-h-content scroll-h">
+                <el-form-item label="所属网格"
+                              prop="gridId">
+                    <el-input v-if="disabled"
+                              v-model="workLogDetail.gridName"
+                              :disabled="disabled"
+                              class="input-width"></el-input>
+                    <el-select v-else
+                               v-model="workLogDetail.gridId"
+                               filterable
+                               placeholder="请选择"
+                               class="input-width"
+                               clearable
+                               :disabled="disabled"
+                               @change="handleGridChange">
+                        <el-option v-for="item in disabled ? optionsG : optionsEditG"
+                                   :key="item.value"
+                                   :label="item.label"
+                                   :value="item.value">
+                        </el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="需求类型"
+                              prop="serviceType">
+                    <el-input v-if="disabled"
+                              v-model="workLogDetail.serviceTypeName"
+                              :disabled="disabled"
+                              class="input-width-min"></el-input>
+                    <el-cascader v-else
+                                 v-model="workLogDetail.serviceType"
+                                 :options="demandOptions"
+                                 :disabled="disabled"
+                                 clearable
+                                 class="input-width"
+                                 @change="handleCateSlect"></el-cascader>
+                </el-form-item>
+                <el-form-item label="上报类型"
+                              prop="reportType">
+                    <el-input v-if="disabled"
+                              v-model="form.reportTypeName"
+                              :disabled="disabled"
+                              class="input-width"></el-input>
+                </el-form-item>
+                <el-form-item label="上报人"
+                              prop="reportUserName">
+                    <el-input v-model="form.reportUserName"
+                              :disabled="disabled"
+                              placeholder="请输入"
+                              class="input-width"
+                              clearable></el-input>
+                </el-form-item>
+                <el-form-item label="上报人手机号"
+                              prop="reportUserMobile">
+                    <el-input v-model="form.reportUserMobile"
+                              :disabled="disabled"
+                              placeholder="请输入"
+                              class="input-width"
+                              maxlength="11"
+                              clearable></el-input>
+                </el-form-item>
+                <el-form-item label="上报时间"
+                              prop="reportTime">
+                    <el-date-picker v-model="form.reportTime"
+                                    type="datetime"
+                                    class="input-width"
+                                    clearable
+                                    :disabled="disabled"
+                                    value-format="yyyy-MM-dd HH:mm:ss"
+                                    placeholder="选择日期时间">
+                    </el-date-picker>
+                </el-form-item>
+                <el-form-item label="需求人"
+                              prop="demandUserId">
+                    <el-input v-if="disabled"
+                              v-model="form.demandUserName"
+                              :disabled="disabled"
+                              class="input-width"></el-input>
+                    <el-select v-else
+                               v-model="selectDemandUser"
+                               class="input-width"
+                               filterable
+                               :disabled="disabled"
+                               placeholder="请选择"
+                               clearable
+                               @change="handleDemandChange">
+                        <el-option v-for="item in demandUserList"
+                                   :key="item.demandUserId"
+                                   :label="item.label"
+                                   :value="item">
+                        </el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="服务时间"
+                              prop="wantServiceTime">
+                    <el-date-picker v-model="form.wantServiceTime"
+                                    type="datetime"
+                                    class="input-width"
+                                    clearable
+                                    :disabled="disabled"
+                                    value-format="yyyy-MM-dd HH:mm:ss"
+                                    placeholder="选择日期时间">
+                    </el-date-picker>
+                </el-form-item>
+                <el-form-item label="需求内容"
+                              prop="content">
+                    <el-input v-model="form.content"
+                              :autosize="{ minRows: 2, maxRows: 10 }"
+                              :disabled="disabled"
+                              type="textarea"
+                              clearable
+                              class="input-width-textarea"
+                              placeholder="请输入内容"></el-input>
+                </el-form-item>
+                <el-form-item v-if="
+            addType == 'finish' ||
+            (addType == 'look' && form.serviceShowFlag)
+          "
+                              label="服务方"
+                              prop="serviceType">
+                    <template v-if="disabled && addType !== 'appoint'">
+                        <el-input v-model="form.serviceShowName"
+                                  :disabled="disabled"
+                                  class="input-width"></el-input>
+                    </template>
+                    <template v-else>
+                        <el-select v-model="form.serviceType"
+                                   class="input-width-small"
+                                   placeholder="请选择"
+                                   clearable
+                                   :disabled="disabled && addType !== 'appoint'"
+                                   @change="handleServiceChange('add', $event)">
+                            <el-option v-for="item in serviceOptions"
+                                       :key="item.value"
+                                       :label="item.label"
+                                       :value="item.value">
+                            </el-option>
+                        </el-select>
+                        -
+                        <el-select v-model="form.serverId"
+                                   class="input-width-middle"
+                                   filterable
+                                   placeholder="请选择"
+                                   clearable
+                                   :disabled="disabled && addType !== 'appoint'">
+                            <el-option v-for="item in serviceOptiondList"
+                                       :key="item.value"
+                                       :label="item.label"
+                                       :value="item.value">
+                            </el-option>
+                        </el-select>
+                    </template>
+                </el-form-item>
+                <el-form-item v-if="addType == 'look' && form.status == 'canceled'"
+                              label="取消时间"
+                              prop="cancelTime">
+                    <span>{{ form.cancelTime }}</span>
+                </el-form-item>
+                <template v-if="
+            (addType == 'finish' && form.reportType != 'self_help') ||
+            (addType == 'look' && form.status == 'finished')
+          ">
+                    <el-form-item label="实际服务时间"
+                                  prop="serviceStartTime">
+                        <el-date-picker v-model="finishServiceTime"
+                                        class="input-width-min"
+                                        clearable
+                                        :disabled="disabled && addType != 'finish'"
+                                        type="datetimerange"
+                                        range-separator="至"
+                                        start-placeholder="开始日期"
+                                        end-placeholder="结束日期"
+                                        value-format="yyyy-MM-dd HH:mm:ss"
+                                        @change="handelBlurServiceTime">
+                        </el-date-picker>
+                    </el-form-item>
+                    <el-form-item label="完成情况"
+                                  prop="finishResult">
+                        <el-radio v-model="form.finishResult"
+                                  label="resolved"
+                                  :disabled="disabled && addType != 'finish'">已解决</el-radio>
+                        <el-radio v-model="form.finishResult"
+                                  label="unresolved"
+                                  :disabled="disabled && addType != 'finish'">未解决</el-radio>
+                    </el-form-item>
+                    <el-form-item label="评价"
+                                  prop="score"
+                                  class="form-score">
+                        <el-rate v-model="form.score"
+                                 :allow-half="true"
+                                 :disabled="disabled && addType != 'finish'"></el-rate>
+                    </el-form-item>
+                    <el-form-item label="备注"
+                                  prop="finishDesc">
+                        <el-input v-model="form.finishDesc"
+                                  :autosize="{ minRows: 2, maxRows: 10 }"
+                                  :disabled="disabled && addType != 'finish'"
+                                  type="textarea"
+                                  clearable
+                                  class="input-width-textarea"
+                                  placeholder="请输入内容"></el-input>
+                    </el-form-item>
+                </template>
+                <template v-if="addType == 'finish' && form.reportType == 'self_help'">
+                    <el-form-item label="实际服务时间"
+                                  prop="serviceStartTime">
+                        <el-date-picker v-model="finishServiceTime"
+                                        class="input-width-min"
+                                        clearable
+                                        :disabled="disabled && addType != 'finish'"
+                                        type="datetimerange"
+                                        range-separator="至"
+                                        start-placeholder="开始日期"
+                                        end-placeholder="结束日期"
+                                        value-format="yyyy-MM-dd HH:mm:ss"
+                                        @change="handelBlurServiceTime">
+                        </el-date-picker>
+                    </el-form-item>
+                </template>
+            </el-form>
+            <div class="resi-btns">
+                <el-button size="small"
+                           @click="handlerCancle">{{
+                    addType != "look" ? "取消" : "关闭"
+                    }}</el-button>
+<!--                <el-button v-if="addType != 'look'"-->
+<!--                           type="primary"-->
+<!--                           size="small"-->
+<!--                           :loading="btnLoading"-->
+<!--                           @click="handleSubmit">提交</el-button>-->
+            </div>
+        </el-dialog>
+
+    </div>
+</template>
+
+<script>
+
+    import workLogDetail from './workLogDetail'
+    import axios from 'axios'
+    import {mapGetters} from 'vuex'
+
+    export default {
+        components: {},
+        data() {
+            return {
+                uploadUlr: window.SITE_CONFIG['apiURL'] + '/oss/file/uploadqrcodeV2',
+                importBtnTitle: '导入',
+                importLoading: false,
+                exportBtn: false,
+                exportBtnTitle: '导出',
+                tableLoading: false,
+                btnLoading: false,
+                uploading: false,
+                disabled: false,
+                pageLoading: false,
+                dialogVisible: false,
+                currentPage: 1,
+                pageSize: 20,
+                total: null,
+                tableData: [],
+                searchH: 0,
+                unloadPencent: 0,
+                addLevel: '1',
+                addType: 'add',
+                value: '',
+                optionsEditG: [],
+                optionsG: [],
+                optionsC: [],
+                optionsEditC: [],
+                options: [
+                    {
+                        label: '是',
+                        value: 1
+                    }, {
+                        label: '否',
+                        value: 2
+                    }
+                ],
+                demandOptions: [],
+                partyOrgRange: [],
+                timeRangePay: [],
+                timeRange: [],
+                customerId: '',
+                searchForm: {
+                    gridId: '',
+                    serviceType: '',
+                    applicantName: '',
+                    applicantAddress: '',
+                    serviceContent: '',
+                    applicantMobile: ''
+                },
+                partyProps: {
+                    label: 'partyOrgName',
+                    value: 'id',
+                    checkStrictly: true
+                },
+                workLogDetail: {
+                    gridId: '',
+                    gridName: ''
+                },
+                serviceTypeList: []
+            }
+        },
+        computed: {
+        },
+        async created() {
+            this.customerId = localStorage.getItem('customerId')
+            this.getTableData()
+            this.getGridList('query')
+            this.getServiceType()
+            this.pageLoading = true
+
+        },
+        mounted() {
+            this.$nextTick(() => {
+                this.searchH = this.$refs.searchCard.$el.offsetHeight
+            })
+        },
+        methods: {
+            handleSizeChange(val) {
+                this.pageSize = val
+                this.getTableData()
+            },
+            handleCurrentChange(val) {
+                this.currentPage = val
+                this.getTableData()
+            },
+            handlePartyChange(val) {
+                this.searchForm.partyOrgId = val[val.length - 1]
+            },
+            handleFilterSpan(row, item) {
+                let _val = ''
+                if (item.options && item.options.length > 0) {
+                    item.options.forEach((n) => {
+                        if (n.value === row[item.columnName]) _val = n.label
+                    })
+                }
+                return _val || row[item.columnName]
+            },
+            handleTimeChange(val) {
+                if (val.length > 0) {
+                    this.searchForm.rdsjStartDate = val[0]
+                    this.searchForm.rdsjEndDate = val[1]
+                } else {
+                    this.searchForm.rdsjStartDate = ''
+                    this.searchForm.rdsjEndDate = ''
+                }
+
+            },
+            handleTimeChangePay(val) {
+                if (val.length > 0) {
+                    this.searchForm.payStatrDate = val[0]
+                    this.searchForm.payEndDate = val[1]
+                } else {
+                    this.searchForm.payStatrDate = ''
+                    this.searchForm.payEndDate = ''
+                }
+
+            },
+            // 上传大图标成功
+            handleExcelSuccess(res, file) {
+                if (res.code === 0 && res.msg === 'success') {
+
+                } else {
+                    this.$message.error(res.msg)
+                }
+            },
+            handleProgress(event, file, fileList) {
+                this.uploading = true
+                this.unloadPencent = Number(file.percentage.toFixed(0))
+            },
+            download(data, fileName) {
+                if (!data) {
+                    return
+                }
+                var csvData = new Blob([data])
+                if (window.navigator && window.navigator.msSaveOrOpenBlob) {
+                    window.navigator.msSaveOrOpenBlob(csvData, fileName)
+                }
+                else {
+                    var a = document.createElement('a')
+                    document.body.appendChild(a)
+                    a.style = 'display: none'
+                    var url = window.URL.createObjectURL(csvData)
+                    a.href = url
+                    a.download = fileName
+                    a.click()
+                    a.remove()
+                    window.URL.revokeObjectURL(url)
+                }
+            },
+            async getServiceType(){
+                let url = 'http://yapi.elinkservice.cn/mock/245/heart/workdiaryService/record/serviceTypePage'
+                let params = {
+                    pageNo: 1,
+                    pageSize: 10000
+                }
+                await this.$http
+                    .post(url, params)
+                    .then(({ data: res }) => {
+                        if (res.code !== 0) {
+                            return this.$message.error(res.msg);
+                        } else {
+                            this.serviceTypeList = res.data.list
+                            console.log('serviceTypeList:',this.serviceTypeList)
+                        }
+                    })
+                    .catch(() => {
+                        return this.$message.error("网络错误");
+                    });
+            },
+            async handleExportModule() {
+                let url = "/resi/partymember/icPartyMember/downloadTemplate"
+                let params = {}
+                await this.$http({
+                    method: 'POST',
+                    url,
+                    responseType: 'blob',
+                    data: params
+                })
+                    .then(res => {
+                        console.log('res-------dd', res)
+                        if (res.headers["content-disposition"]) {
+                            let fileName = window.decodeURI(res.headers["content-disposition"].split(";")[1].split("=")[1])
+                            this.download(res.data, fileName)
+
+                        } else this.$message.error('下载失败')
+                    })
+                    .catch(err => {
+                        console.log('err', err)
+                        return this.$message.error('网络错误')
+                    })
+            },
+            beforeExcelUpload(file) {
+                console.log('file', file)
+                const isType = file.type === 'application/vnd.ms-excel'
+                const isTypeComputer = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
+                const fileType = isType || isTypeComputer
+                const isLt1M = (file.size / 1024 / 1024) < 10
+                if (!fileType) {
+                    this.$message.error('上传文件只能是xls/xlsx格式！')
+                }
+
+                if (!isLt1M) {
+                    this.$message.error('上传文件大小不能超过 10MB!')
+                }
+                return fileType && isLt1M
+            },
+            async uploadHttpRequest(file) {
+                this.importLoading = true
+                this.importBtnTitle = '正在上传中...'
+                this.$message({
+                    showClose: true,
+                    message: '导入中，请到系统管理-导入记录中查看进度',
+                    duration: 0
+                })
+                const formData = new FormData() //FormData对象，添加参数只能通过append('key', value)的形式添加
+                formData.append('file', file.file) //添加文件对象
+                this.$http
+                    .post('/resi/partymember/icPartyMember/import', formData).then(res => {
+                    console.log('res-up', res)
+                    if (res.data.code == 0 && res.data.msg == 'success') {
+                        // this.$message.success('导入成功')
+                        this.getTableData()
+                    } else {
+                        this.$message.error(res.data.msg)
+                    }
+                }).catch(err => {
+                    console.log('失败', err)
+                    file.onError() //上传失败的文件会从文件列表中删除
+                    // this.$message.error('导入失败')
+                })
+
+                this.importLoading = false
+                this.importBtnTitle = '导入'
+                this.$refs.upload.clearFiles()
+            },
+            async handleExport() {
+                this.exportBtn = true
+                this.exportBtnTitle = '正在导出...'
+                let params = {
+                    agencyId: this.$store.state.user.agencyId,
+                    pageSize: 9999,
+                    pageNo: this.currentPage
+                }
+                // .post('epmetuser/icresiuser/exportExcel', params)
+                const url = 'http://yapi.elinkservice.cn/mock/245/heart/workdiaryService/record/downloadTemplate'
+                await axios({
+                    // url: window.SITE_CONFIG['apiURL'] + '/resi/partymember/icPartyMember/export',
+                    url: url,
+                    // url: 'epmetuser/icresiuser/exportExcel',
+                    method: 'post',
+                    data: params,
+                    responseType: 'blob'
+                })
+                    .then(res => {
+                        console.log('resllll', 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)
+                        this.$message.error('获取导出失败')
+                    })
+                this.exportBtn = false
+                this.exportBtnTitle = '导出'
+            },
+            beforeImgUpload(file) {
+                const isPNG = (file.type === 'image/png') || (file.type === 'image/jpeg')
+                const isLt1M = file.size / 1024 / 1024 < 10
+
+                if (!isPNG) {
+                    this.$message.error('上传图片只能是 PNG 或 JPEG 格式!')
+                }
+                if (!isLt1M) {
+                    this.$message.error('上传图片大小不能超过 10MB!')
+                }
+                return isPNG && isLt1M
+            },
+            handleImgSuccess(res, file) {
+                if (res.code === 0 && res.msg === 'success') {
+
+                    console.log('res.data.url', res.data.url)
+                    this.uploading = false
+                    this.unloadPencent = 0
+                    this.form.imageList.push(res.data.url)
+
+                } else {
+                    this.$message.error(res.msg)
+                }
+            },
+            handleDelimg(item, index) {
+                this.form.imageList.splice(index, 1)
+            },
+            handleSearch(val) {
+                console.log('searchhh--', val)
+                this.currentPage = 1
+                this.getTableData()
+            },
+            resetForm(formName) {
+                this.timeRangePay = []
+                this.timeRange = []
+                this.searchForm.payStatrDate = ''
+                this.searchForm.payEndDate = ''
+                this.searchForm.rdsjStartDate = ''
+                this.searchForm.rdsjEndDate = ''
+                this.$refs[formName].resetFields()
+                this.handleSearch()
+            },
+            handleAdd() {
+                this.dialogVisible = true
+            },
+
+            handlerCancle() {
+                this.detailInfo = {}
+                this.disabled = false
+                this.dialogVisible = false
+            },
+            async handleLook(row) {
+                this.disabled = true
+                this.$nextTick(() => {
+                    this.$refs.ref_detail.initForm(row)
+                })
+                // await this.getDetail(row.applicantId)
+            },
+            async handleEdit(row, addType) {
+                await this.getDetail(row.id)
+                this.dialogVisible = true
+            },
+
+            handleDel(row) {
+                let params = {
+                    ids: [row.applicantId]
+                }
+                let url = 'http://yapi.elinkservice.cn/mock/245/heart/workdiaryService/record/delete'
+                // let url = '/heart/workdiaryService/record/delete'
+                this.$http
+                    .post(url, params)
+                    .then(({data: res}) => {
+                        if (res.code !== 0) {
+                            return this.$message.error(res.msg)
+                        } else {
+                            this.$message.success('删除成功')
+                            this.getTableData()
+                        }
+                    })
+                    .catch((err) => {
+                        return this.$message.error('网络错误')
+                    })
+            },
+            async getDetail(id) {
+                let url = 'http://yapi.elinkservice.cn/mock/245/heart/workdiaryService/record/'
+                // let url = '/heart/workdiaryService/record/'
+                this.$http
+                    .post(url+id)
+                    .then(({data: res}) => {
+                        if (res.code !== 0) {
+                            return this.$message.error(res.msg)
+                        } else {
+                            this.workLogDetail = {...res.data}
+                            this.dialogVisible = true
+                        }
+                    })
+                    .catch((err) => {
+                        console.log('row4', err)
+                        return this.$message.error('网络错误')
+                    })
+            },
+            /*async getGridList(type, agencyId) {
+                const {user} = await this.$store.state
+                console.log('user---ppp', user)
+                // addorupdate  query
+                await this.$http
+                    .get('/resi/partymember/icPartyOrg/getSearchTreelist', {params: {agencyId: agencyId || user.agencyId}})
+                    .then(({data: res}) => {
+                        if (res.code !== 0) {
+                            return this.$message.error(res.msg)
+                        } else {
+                            console.log('获取查询详情成功', res.data)
+
+                            this.optionsG = this.deepArrTOnull(res.data)
+                        }
+                    })
+                    .catch(() => {
+                        return this.$message.error('网络错误')
+                    })
+            },*/
+          async getGridList (type, agencyId) {
+            const { user } = await this.$store.state;
+            await this.$http
+                    .post("/gov/org/customergrid/gridoption", {
+                      agencyId: agencyId || user.agencyId,
+                      purpose: type,
+                    })
+                    .then(({ data: res }) => {
+                      if (res.code !== 0) {
+                        return this.$message.error(res.msg);
+                      } else {
+                        if (type === "query") this.optionsG = res.data;
+                        else this.optionsEditG = res.data;
+                      }
+                    })
+                    .catch(() => {
+                      return this.$message.error("网络错误");
+                    });
+          },
+            deepArrTOnull(arr) {
+                let a = []
+                a = arr.map(item => {
+                    return {
+                        ...item,
+                        children: (item.children.length > 0 && this.deepArrTOnull(item.children)) || null
+                    }
+                })
+                return a
+            },
+            async getCateList(type) {
+                const {user} = await this.$store.state
+                console.log('user---ppp', user)
+                const params = {
+                    customerId: this.customerId,
+                    type
+                }
+                // addorupdate  query
+                await this.$http
+                    .post('/resi/partymember/stylecategorydict/select-list', params)
+                    .then(({data: res}) => {
+                        if (res.code !== 0) {
+                            return this.$message.error(res.msg)
+                        } else {
+                            console.log('获取查询详情成功', res.data)
+
+                            if (type === 'query') this.optionsC = res.data
+                            else this.optionsEditC = res.data
+                        }
+                    })
+                    .catch(() => {
+                        return this.$message.error('网络错误')
+                    })
+            },
+            async getTableData() {
+                this.tableLoading = true
+                const {user} = await this.$store.state
+                let params = {
+                    ...this.searchForm,
+                    pageNo: this.currentPage,
+                    pageSize: this.pageSize
+                }
+                const url = 'http://yapi.elinkservice.cn/mock/245/heart/workdiaryService/record/page'
+                await this.$http
+                    // .post('/resi/partymember/icPartyMember/page', params)
+                    .post(url, params)
+                    .then(({data: res}) => {
+                        if (res.code !== 0) {
+                            return this.$message.error(res.msg)
+                        } else {
+                            this.tableData = res.data.list
+                            this.total = res.data.total
+                            console.log(this.tableData)
+                        }
+                    })
+                    .catch(() => {
+                        return this.$message.error('网络错误')
+                    })
+                this.tableLoading = false
+            }
+
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+    @import "@/assets/scss/buttonstyle.scss";
+
+    .resi-container .resi-card-table {
+        ::v-deep .el-table th {
+            color: #fff;
+            background-color: rgba(33, 149, 254, 1);
+            // border-right: 1px solid rgba(33, 149, 254, 1);
+        }
+    }
+
+    .resi-table {
+        ::v-deep .el-button--text {
+            text-decoration: underline;
+        }
+
+        ::v-deep .btn-color-del {
+            margin-left: 10px;
+            color: rgba(213, 16, 16, 1);
+        }
+
+        ::v-deep .btn-color-edit {
+            color: rgba(0, 167, 169, 1);
+        }
+    }
+
+    .form-wr {
+        .input-width {
+            width: 260px;
+
+        }
+
+        .input-width-textarea {
+            width: 500px;
+        }
+
+        .imsg-list {
+            display: flex;
+            align-items: center;
+
+            .imgs-item {
+                position: relative;
+                margin-right: 10px;
+
+                .el-icon-delete {
+                    position: absolute;
+                    top: 0;
+                    right: 0;
+                    font-size: 18px;
+                    color: red;
+                    z-index: 3;
+                    cursor: pointer;
+                }
+            }
+        }
+    }
+
+    .div-content {
+        width: 100%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+</style>
+
+<style lang="scss" scoped>
+    .resi-row-btn {
+        display: flex;
+        margin-bottom: 13px;
+        ::v-deep .el-button {
+            margin-left: 10px;
+            border: 0;
+        }
+        ::v-deep .el-select {
+            margin-right: 10px;
+        }
+        .el-button--success {
+            background: rgba(34, 193, 195, 1);
+        }
+        .el-button {
+            /*margin-right: 10px;*/
+            border: 0;
+        }
+        .el-button--warning {
+            background: rgba(254, 179, 73, 1);
+        }
+        .el-button--danger {
+            background: rgba(254, 98, 82, 1);
+        }
+    }
+    .avatar-uploader {
+        ::v-deep
+        .el-upload {
+            cursor: pointer;
+            position: relative;
+            overflow: hidden;
+        }
+        .el-upload:hover {
+            border-color: #409EFF;
+        }
+        .avatar {
+            width: 100px;
+            height: 100px;
+            display: block;
+        }
+        .avatar-uploader-icon {
+            border: 1px dashed #d9d9d9;
+            border-radius: 6px;
+            font-size: 28px;
+            color: #8c939d;
+            width: 100px;
+            height: 100px;
+            line-height: 100px;
+            text-align: center;
+        }
+    }
+    .resi-btns {
+        margin-top: 20px;
+        text-align: center;
+    }
+</style>
\ No newline at end of file
diff --git a/src/views/modules/communityService/worklog/workLogDetail.vue b/src/views/modules/communityService/worklog/workLogDetail.vue
new file mode 100644
index 000000000..a8dc01dc2
--- /dev/null
+++ b/src/views/modules/communityService/worklog/workLogDetail.vue
@@ -0,0 +1,209 @@
+<template>
+  <div>
+    <div class="dialog-h-content scroll-h">
+
+      <el-form ref="ref_form"
+               :inline="true"
+               :model="workLogDetail"
+               class="form">
+
+        <el-form-item label="需求类型"
+                      prop="serviceType">
+          <el-input v-if="disabled"
+                    v-model="workLogDetail.serviceTypeName"
+                    :disabled="disabled"
+                    class="input-width-min"></el-input>
+          <el-cascader v-else
+                       v-model="workLogDetail.serviceType"
+                       :options="demandOptions"
+                       :disabled="disabled"
+                       clearable
+                       class="input-width"
+                       @change="handleCateSlect"></el-cascader>
+        </el-form-item>
+        <el-form-item label="所属网格"
+                      prop="gridId">
+          <el-input v-if="disabled"
+                    v-model="workLogDetail.gridName"
+                    :disabled="disabled"
+                    class="input-width"></el-input>
+          <el-select v-else
+                     v-model="workLogDetail.gridId"
+                     filterable
+                     placeholder="请选择"
+                     class="input-width"
+                     clearable
+                     :disabled="disabled"
+                     @change="handleGridChange">
+            <el-option v-for="item in disabled ? optionsG : optionsEditG"
+                       :key="item.value"
+                       :label="item.label"
+                       :value="item.value">
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="上报类型"
+                      prop="reportType">
+          <el-input v-if="disabled"
+                    v-model="workLogDetail.reportTypeName"
+                    :disabled="disabled"
+                    class="input-width"></el-input>
+        </el-form-item>
+        <el-form-item label="申请人"
+                      prop="applicantName">
+          <el-input v-model="workLogDetail.applicantName"
+                    :disabled="disabled"
+                    placeholder="请输入"
+                    class="input-width"
+                    clearable></el-input>
+        </el-form-item>
+        <el-form-item label="上报人手机号"
+                      prop="reportUserMobile">
+          <el-input v-model="workLogDetail.reportUserMobile"
+                    :disabled="disabled"
+                    placeholder="请输入"
+                    class="input-width"
+                    maxlength="11"
+                    clearable></el-input>
+        </el-form-item>
+        <el-form-item label="上报时间"
+                      prop="reportTime">
+          <el-date-picker v-model="workLogDetail.reportTime"
+                          type="datetime"
+                          class="input-width"
+                          clearable
+                          :disabled="disabled"
+                          value-format="yyyy-MM-dd HH:mm:ss"
+                          placeholder="选择日期时间">
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item label="需求人"
+                      prop="demandUserId">
+          <el-input v-if="disabled"
+                    v-model="workLogDetail.demandUserName"
+                    :disabled="disabled"
+                    class="input-width"></el-input>
+          <el-select v-else
+                     v-model="selectDemandUser"
+                     class="input-width"
+                     filterable
+                     :disabled="disabled"
+                     placeholder="请选择"
+                     clearable
+                     @change="handleDemandChange">
+            <el-option v-for="item in demandUserList"
+                       :key="item.demandUserId"
+                       :label="item.label"
+                       :value="item">
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="服务时间"
+                      prop="wantServiceTime">
+          <el-date-picker v-model="workLogDetail.wantServiceTime"
+                          type="datetime"
+                          class="input-width"
+                          clearable
+                          :disabled="disabled"
+                          value-format="yyyy-MM-dd HH:mm:ss"
+                          placeholder="选择日期时间">
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item label="需求内容"
+                      prop="content">
+          <el-input v-model="workLogDetail.content"
+                    :autosize="{ minRows: 2, maxRows: 10 }"
+                    :disabled="disabled"
+                    type="textarea"
+                    clearable
+                    class="input-width-textarea"
+                    placeholder="请输入内容"></el-input>
+        </el-form-item>
+      </el-form>
+
+    </div>
+    <div class="div_btn">
+      <el-button size="small"
+                 @click="handleCancle">取 消</el-button>
+
+    </div>
+  </div>
+</template>
+
+<script>
+
+import { Loading } from 'element-ui' // 引入Loading服务
+
+var map
+var search
+var markers
+var infoWindowList
+var geocoder // 新建一个正逆地址解析类
+
+let loading // 加载动画
+export default {
+  data () {
+    return {
+      workLogDetail: {},
+    }
+  },
+  components: {},
+  mounted () {
+    this.initMap()
+  },
+
+  methods: {
+    handleCancle () {
+
+      this.$emit('diaClose')
+
+    },
+
+    async initForm (row) {
+      this.startLoading()
+      this.formData = { ...row }
+      this.endLoading()
+
+    },
+
+    // 开启加载动画
+    startLoading () {
+      loading = Loading.service({
+        lock: true, // 是否锁定
+        text: '正在加载……', // 加载中需要显示的文字
+        background: 'rgba(0,0,0,.7)' // 背景颜色
+      })
+    },
+    // 结束加载动画
+    endLoading () {
+      // clearTimeout(timer);
+      if (loading) {
+        loading.close()
+      }
+    }
+  },
+  computed: {
+  },
+  props: {
+
+  }
+}
+</script>
+<style lang="scss" scoped >
+@import "@/assets/scss/modules/visual/communityManageForm.scss";
+</style>
+<style scoped>
+.detail_span {
+  width: 500px;
+  font-weight: bold;
+  text-align: left;
+  margin: 0 0;
+  font-size: 16px;
+}
+
+.form {
+  margin-top: 30px;
+}
+</style>
+
+