微心愿

project/pingchang/apps/AppWishfulThinking/AppWishfulThinking.vue

@@ -0,0 +1,65 @@
+<template>
+  <section class="AppWishfulThinking">
+    <component ref="component" :is="currentPage" @change="onChange" :params="params" :instance="instance" :dict="dict"/>
+  </section>
+</template>
+
+<script>
+import List from './components/List'
+import Detail from './components/Detail'
+import Add from './components/Add'
+import Setting from './components/Setting'
+
+export default {
+  name: 'AppWishfulThinking',
+  label: '微心愿',
+
+  props: {
+    instance: Function,
+    dict: Object
+  },
+
+  data() {
+    return {
+      component: 'List',
+      params: {}
+    }
+  },
+  computed: {
+    currentPage() {
+      // let {hash, query: {id}} = this.$route
+      // return hash == "#Setting" ? Setting :
+      //     !!id ? Detail : List
+      console.log(this.$route.hash)
+      if (this.$route.hash == "#add") {
+        return Add
+      } else if (this.$route.hash == "#Setting") {
+        return Setting
+      } else if (this.$route.query.id) {
+        return Detail
+      } else return List
+    }
+  },
+  components: {
+    List,
+    Detail,
+    Add,
+    Setting
+  },
+
+  methods: {
+    onChange(data) {
+      console.log(data)
+      this.$router.push({query: data.params, hash: data.type})
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.AppWishfulThinking {
+  height: 100%;
+  background: #F3F6F9;
+  overflow: auto;
+}
+</style>

project/pingchang/apps/AppWishfulThinking/components/Add.vue

@@ -0,0 +1,272 @@
+<template>
+  <section style="height: 100%" class="Add">
+    <ai-detail>
+      <ai-title slot="title" title="添加微心愿" isShowBack isShowBottomBorder @onBackClick="cancel(false)"/>
+      <template slot="content">
+        <el-form ref="form" :model="form" :rules="rules" label-width="120px" label-position="right">
+          <ai-card title="基础信息">
+            <template #content>
+              <div class="ai-form">
+                <el-form-item label="姓名" prop="title">
+                  <el-input
+                    size="small"
+                    v-model="form.title"
+                    placeholder="请输入..."
+                    clearabel
+                    :maxLength="60"
+                  ></el-input>
+                </el-form-item>
+                <el-form-item label="联系方式" prop="phone">
+                  <el-input
+                      size="small"
+                      v-model="form.phone"
+                      placeholder="请输入..."
+                      clearabel
+                      :maxLength="11"
+                  ></el-input>
+                </el-form-item>
+                <el-form-item label="事件类型" prop="email">
+                  <ai-select
+                      v-model="form.nation"
+                      placeholder="请选择"
+                      :selectList="dict.getDict('nation')"
+                      @change="(search.current = 1), getList()"
+                  ></ai-select>
+                </el-form-item>
+                <el-form-item label="事件描述" prop="title" style="width: 100%">
+                  <el-input
+                    type="textarea"
+                    :rows="4"
+                    v-model="form.title"
+                    placeholder="请输入..."
+                    clearabel
+                    :maxLength="60"
+                  ></el-input>
+                </el-form-item>
+                <el-form-item label="所属地区" prop="areaId" style="width: 100%">
+                  <ai-area-select
+                    clearable
+                    :instance="instance"
+                    v-model="form.areaId"
+                    @fullname="v => form.areaName = v"
+                    always-show
+                    area-level="5"
+                    :disabledLevel="disabledLevel"
+                  />
+                </el-form-item>
+                <el-form-item label="上报位置" prop="lat">
+                  <el-button @click="showMap = true">地图标绘</el-button>
+                </el-form-item>
+                <el-form-item label="现场照片" prop="files" style="width: 100%;">
+                  <ai-uploader
+                      :instance="instance"
+                      isShowTip
+                      v-model="form.files"
+                      :limit="9">
+                  </ai-uploader>
+                </el-form-item>
+              </div>
+            </template>
+          </ai-card>
+        </el-form>
+      </template>
+      <template #footer>
+        <el-button @click="cancel(false)">取消</el-button>
+        <el-button type="primary" @click="confirm">提交</el-button>
+      </template>
+    </ai-detail>
+    <ai-dialog title="地图" :visible.sync="showMap" @opened="initMap" width="800px" class="mapDialog" @onConfirm="selectMap">
+      <div id="map" style="height:400px;"></div>
+      <el-form label-width="80px" style="padding: 10px 20px 0 20px;">
+        <el-row type="flex" justify="space-between">
+          <el-form-item label="经度">
+            <el-input disabled size="small" v-model="placeDetail.lng" style="width:100px;"></el-input>
+          </el-form-item>
+          <el-form-item label="纬度">
+            <el-input disabled size="small" v-model="placeDetail.lat" style="width:100px;"></el-input>
+          </el-form-item>
+          <el-form-item label="地址">
+            <el-input disabled size="small" v-model="placeDetail.address" style="width:300px;"></el-input>
+          </el-form-item>
+        </el-row>
+      </el-form>
+      <el-input id="searchPlaceInput" size="medium" class="searchPlaceInput" clearable v-model="searchPlace" autocomplete="on" @change="placeSearch.search(searchPlace)" placeholder="请输入关键字">
+        <el-button type="primary" slot="append" @click="placeSearch.search(searchPlace)">搜索</el-button>
+      </el-input>
+      <div id="searchPlaceOutput" />
+    </ai-dialog>
+  </section>
+</template>
+
+<script>
+import {mapState} from "vuex"
+import AMapLoader from '@amap/amap-jsapi-loader'
+export default {
+  name: "Add",
+  props: {
+    instance: Function,
+    dict: Object,
+    selected: Object,
+  },
+  computed: {
+    ...mapState(["user"]),
+  },
+  data() {
+    return {
+      disabledLevel: 0,
+      pickerOptions: {
+        disabledDate(time) {
+          return time.getTime() < Date.now();
+        },
+      },
+      rules: {
+        areaId: [{ required: true, message: '请选择发布地区', trigger: 'change' },
+          {
+            validator: (r, v, cb) => {
+              if (/.+0{3}$/.test(v)) {
+                cb("发布地区必须选到村级")
+              } else cb()
+            }, trigger: "blur"
+          }
+        ],
+        title: [{ required: true, message: '请输入标题', trigger: 'change' }],
+        address: [{ required: true, message: '请选输入活动地点', trigger: 'change' }],
+        total: [{ required: true, message: '请输入参与人员', trigger: 'change' }],
+        activeTimeList: [{ required: true, message: '请选择活动时间', trigger: 'change' }],
+        stopSignupTime: [{ required: true, message: '请选择截止时间', trigger: 'change' }],
+        contactPerson: [{ required: true, message: '请输入联系人', trigger: 'change' }],
+        contactPhone: [{ required: true, message: '请输入联系电话', trigger: 'change' }],
+        content: [{ required: true, message: '请输入活动介绍', trigger: 'blur' }],
+      },
+      form: {
+        areaId: '',
+        areaName: '',
+        title: '',
+        address: '',
+        total: '',
+        activeTimeList: [],
+        stopSignupTime: '',
+        contactPerson: '',
+        contactPhone: '',
+        content: ''
+      },
+
+
+      showMap: false,
+      map: null,
+      placeSearch: null,
+      placeDetail: {
+        lng: '',
+        lat: '',
+        address: ''
+      },
+      searchPlace: '',
+    };
+  },
+  created() {
+    console.log(this.user)
+    this.dict.load("education", "sex", "nation", "developStatus")
+    this.disabledLevel = this.user.info.areaList.length
+    this.form.areaId = this.user.info.areaId
+  },
+  methods: {
+    selectMap() {
+      this.form.lng = this.placeDetail.lng
+      this.form.lat = this.placeDetail.lat
+      this.form.address = this.placeDetail.address
+      this.showMap = false
+    },
+    initMap() {
+      AMapLoader.load({
+        key: '54a02a43d9828a8f9cd4f26fe281e74e',
+        version: '2.0',
+        plugins: ['AMap.PlaceSearch', 'AMap.AutoComplete', 'AMap.Geocoder'],
+      }).then((AMap) => {
+        this.map = new AMap.Map('map', {
+          resizeEnable: true,
+          zooms: [6, 20],
+          zoom: 11,
+          center:[104.067923463, 30.6799428454],
+        })
+        this.placeSearch = new AMap.PlaceSearch({ map: this.map })
+        new AMap.AutoComplete({
+          input: 'searchPlaceInput',
+          output: 'searchPlaceOutput',
+        }).on('select', (e) => {
+          if (e?.poi) {
+            this.placeSearch.setCity(e.poi.adcode)
+            this.movePosition(e.poi.location)
+          }
+        })
+        this.map.on('click', (e) => {
+          new AMap.Geocoder().getAddress(e.lnglat, (sta, res) => {
+            if (res?.regeocode) {
+              this.placeDetail = {
+                lng: e.lnglat?.lng,
+                lat: e.lnglat?.lat,
+                address: res.regeocode.formattedAddress,
+              }
+            }
+          })
+          this.movePosition(e.lnglat)
+        })
+      })
+    },
+    movePosition(center) {
+      if (this.map) {
+        this.map.clearMap()
+        this.map.panTo(center)
+        this.map.add([
+          new AMap.Marker({
+            position: center,
+            clickable: true,
+          }),
+        ])
+        this.map.setFitView()
+      }
+    },
+
+
+    confirm() {
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          this.form.beginTime = this.form.activeTimeList[0]
+          this.form.endTime = this.form.activeTimeList[1]
+          this.instance.post(`/app/apppartyreport/addOrUpdate`, {...this.form}).then((res) => {
+            if (res.code == 0) {
+              this.$message.success('发起活动成功')
+              setTimeout(() => {
+                this.cancel(true)
+              }, 600);
+            }
+          });
+        }
+      });
+    },
+    cancel(isRefresh) {
+      this.$emit('change', {
+        type: 'list',
+        isRefresh: !!isRefresh
+      })
+    },
+  }
+};
+</script>
+<style lang="scss" scoped>
+  .Add {
+    .ai-form {
+      display: flex;
+    }
+    .text {
+      display: inline-block;
+      padding-left: 8px;
+      color: #999;
+    }
+    ::v-deep .el-range-separator {
+      width: 28px!important;
+    }
+    ::v-deep .el-date-editor {
+      width: 100%;
+    }
+  }
+</style>

project/pingchang/apps/AppWishfulThinking/components/Detail.vue

@@ -0,0 +1,582 @@
+<template>
+  <ai-detail class="reportAtWillDetail" v-loading="isLoading">
+    <template #title>
+      <ai-title title="微心愿详情" isShowBack isShowBottomBorder @onBackClick="cancel(false)">
+        <template #rightBtn>
+          <div class="title-btns">
+            <el-button type="primary" icon="iconfont iconPerson_Transfered" @click="isShowForward = true" v-if="detail.eventStatus < 2">指派事件</el-button>
+            <el-button type="primary" icon="iconfont iconRegister" @click="isShowAdd = true" v-if="detail.eventStatus < 2">处理事件</el-button>
+          </div>
+        </template>
+      </ai-title>
+    </template>
+    <template #content>
+      <div class="detail-content__wrapper">
+        <div class="detail-content__wrapper--left">
+          <ai-card title="基础信息">
+            <template #content>
+              <ai-wrapper>
+                <ai-info-item label="上报人员" :value="detail.name"></ai-info-item>
+                <ai-info-item label="当前状态" :value="dict.getLabel('clapEventStatus', detail.eventStatus)"></ai-info-item>
+                <ai-info-item label="联系方式">{{ detail.phone }}</ai-info-item>
+                <ai-info-item label="上报时间">{{ detail.createTime }}</ai-info-item>
+                <ai-info-item label="事件类型">{{ detail.groupName }}</ai-info-item>
+                <ai-info-item label="事件描述" isLine>{{ detail.content }}</ai-info-item>
+                <ai-info-item label="现场照片" isLine>
+                  <ai-uploader :instance="instance" disabled v-model="detail.files"></ai-uploader>
+                </ai-info-item>
+                <ai-info-item label="所属网格">{{ detail.girdName }}</ai-info-item>
+                <ai-info-item label="事件位置" isLine>
+                  <div id="map" style="width: 500px; height: 280px;"></div>
+                </ai-info-item>
+              </ai-wrapper>
+            </template>
+          </ai-card>
+          <ai-evaluation :bid="detail.id" :info.sync="evaluation"/>
+        </div>
+        <div class="rightZone">
+          <ai-card title="办理进度">
+            <template #content>
+              <el-steps direction="vertical" :active="1">
+                <el-step
+                    v-for="(item, i) in process"
+                    :key="i"
+                    :title="item.systemExplain"
+                    :description="item.doTime">
+                  <template #title>
+                    <h2 class="step-title" style="font-weight: 500; font-size: 14px;">
+                      {{ item.systemExplain }}
+                    </h2>
+                  </template>
+                  <template #description>
+                    <p style="color: #888; margin: 0 4px 10px 0; font-size: 14px;">{{ item.doTime }}</p>
+                    <div style="color: #444;margin-bottom: 10px;" v-if="item.doExplain">{{ item.doExplain }}</div>
+                    <ai-uploader :instance="instance" disabled v-model="item.files"></ai-uploader>
+                  </template>
+                </el-step>
+              </el-steps>
+            </template>
+          </ai-card>
+        </div>
+      </div>
+      <ai-dialog
+          :visible.sync="isShowAdd"
+          width="800px"
+          title="事件处理"
+          @closed="onClose"
+          @onConfirm="handleEvent">
+        <el-form class="ai-form" label-width="120px" :model="form" ref="form">
+          <el-form-item label="事件分类" prop="groupId" style="width: 100%;" :rules="[{ required: true, message: '请选择事件分类' }]">
+            <ai-select
+                v-model="form.groupId"
+                placeholder="请选择事件分类"
+                :selectList="dictList">
+            </ai-select>
+          </el-form-item>
+          <el-form-item label="处理结果" prop="eventStatus" style="width: 100%;" :rules="[{ required: true, message: '请选择处理结果' }]">
+            <el-radio-group v-model="form.eventStatus">
+              <el-radio label="2">已办结</el-radio>
+              <el-radio label="3">已拒绝</el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item label="处理意见" prop="content" style="width: 100%;" :rules="[{ required: true, message: '请输入处理意见' }]">
+            <el-input type="textarea" :rows="5" :maxlength="500" v-model="form.content" clearable placeholder="请输入处理意见" show-word-limit></el-input>
+          </el-form-item>
+          <el-form-item label="图片" prop="files" style="width: 100%;">
+            <ai-uploader
+                :instance="instance"
+                isShowTip
+                v-model="form.files"
+                :limit="9">
+            </ai-uploader>
+          </el-form-item>
+        </el-form>
+      </ai-dialog>
+      <ai-dialog
+          :visible.sync="isShowForward"
+          width="800px"
+          @close="onClose"
+          title="事件指派"
+          @onConfirm="onForwardConfirm">
+        <el-form class="ai-form" label-width="120px" :model="forwardForm" ref="forwardForm">
+          <el-form-item label="转交" prop="name" style="width: 100%;" :rules="[{ required: true, message: '请选择网格员或网格' }]">
+            <el-input disabled size="small" v-model="forwardForm.name" clearable placeholder="请选择网格员或网格">
+              <template slot="append">
+                <el-button @click="getGirdList().then(()=>isShowUser=true )">选择</el-button>
+              </template>
+            </el-input>
+          </el-form-item>
+          <el-form-item label="办理意见" prop="content" style="width: 100%;" :rules="[{ required: true, message: '请输入办理意见' }]">
+            <el-input type="textarea" :rows="5" :maxlength="500" v-model="forwardForm.content" clearable placeholder="请输入办理意见" show-word-limit></el-input>
+          </el-form-item>
+          <el-form-item label="图片" prop="files" style="width: 100%;">
+            <ai-uploader
+                :instance="instance"
+                v-model="forwardForm.files"
+                isShowTip
+                :limit="9">
+            </ai-uploader>
+          </el-form-item>
+        </el-form>
+      </ai-dialog>
+      <ai-dialog
+          :visible.sync="isShowUser"
+          width="800px"
+          title="选择网格或网格员"
+          @onConfirm="onConfirm">
+        <div class="grid-wrapper">
+          <el-input
+              style="margin-bottom: 10px;"
+              size="small"
+              placeholder="请输入网格名称/网格员姓名/网格员电话"
+              v-model="name" @change="$refs.tree.filter(name)"
+              suffix-icon="iconfont iconSearch">
+          </el-input>
+          <el-tree
+              :filter-node-method="filterNode"
+              ref="tree"
+              :props="defaultProps"
+              node-key="id"
+              :data="tree"
+              highlight-current
+              @current-change="onTreeChange">
+            <div class="tree-container" slot-scope="{ data }">
+              <div class="tree-container__user">
+                <div class="tree-user__item">
+                  <span>{{ data.isUser ? `${data.name}-${data.phone}` : data.girdName }}</span>
+                </div>
+              </div>
+            </div>
+          </el-tree>
+        </div>
+      </ai-dialog>
+    </template>
+  </ai-detail>
+</template>
+
+<script>
+import AMapLoader from '@amap/amap-jsapi-loader'
+import {mapState} from 'vuex'
+
+export default {
+  name: 'Detail',
+  props: ['dict', 'instance'],
+
+  data() {
+    return {
+      forwardForm: {
+        content: '',
+        girdId: '',
+        girdName: '',
+        girdMemberId: '',
+        girdMemberName: '',
+        name: ''
+      },
+      isLoading: true,
+      name: '',
+      detail: {},
+      isShowUser: false,
+      eventList: [],
+      isShowAdd: false,
+      userList: [],
+      processList: [],
+      dictList: [],
+      defaultProps: {
+        label: 'girdName'
+      },
+      isShowForward: false,
+      tree: [],
+      gridInfo: {},
+      form: {
+        files: [],
+        groupId: '',
+        groupName: '',
+        content: [],
+        eventStatus: '2'
+      },
+      evaluation: {}
+    }
+  },
+
+  computed: {
+    ...mapState(['user']),
+    process: v => [v.evaluation.id ? {
+      systemExplain: `${v.evaluation.createUserName}完成评价 (${v.evaluation.score}星评价)`,
+      doTime: v.evaluation.createTime,
+      doExplain: v.evaluation.rateText
+    } : null, v.processList].flat().filter(Boolean)
+  },
+
+  created() {
+    this.getDict()
+    this.dict.load('clapEventStatus').then(() => {
+      this.getDetail()
+    })
+  },
+
+  methods: {
+    getDetail() {
+      this.instance.post('/app/appclapeventinfo/queryDetailById', null, {
+        params: {id: this.$route.query.id}
+      }).then(res => {
+        if (res?.data) {
+          this.detail = res.data
+          this.processList = res.data.processList
+          this.form.groupId = res.data.groupId
+
+          this.$nextTick(() => {
+            this.initMap()
+          })
+          this.isLoading = false
+        }
+      }).catch(() => {
+        this.isLoading = false
+      })
+    },
+
+    getGirdList() {
+      return this.instance.post(`/app/appgirdinfo/listAllByTop`).then(res => {
+        if (res?.data) {
+          return this.tree = this.formatList([res.data])
+        }
+      })
+    },
+
+    onClose() {
+      this.form.files = []
+      this.form.groupId = ''
+      this.form.groupName = ''
+      this.form.content = ''
+      this.form.eventStatus = ''
+      this.forwardForm.content = ''
+      this.forwardForm.girdId = ''
+      this.forwardForm.girdName = ''
+      this.forwardForm.girdMemberId = ''
+      this.forwardForm.girdMemberName = ''
+      this.forwardForm.name = ''
+    },
+
+    formatList(list) {
+      for (let item of list) {
+        item.children = [item.girdList, item.girdMemberList?.map(e => ({
+          ...e, isUser: true, girdName: item.girdName,
+          girdId: item.id
+        })) || []].flat()
+        if (item.girdList?.length > 0) {
+          this.formatList(item.girdList)
+        }
+      }
+      return list
+    },
+
+    filterNode(value, data) {
+      if (!value) return true
+
+      return (data.girdName && data.girdName.indexOf(value) !== -1) || (data.name && data.name.indexOf(value) !== -1) || (data.name && data.phone.indexOf(value) !== -1)
+    },
+
+    onTreeChange(e) {
+      this.gridInfo = e
+    },
+
+    onForwardConfirm() {
+      this.$refs.forwardForm.validate(v => {
+        if (v) {
+          this.instance.post('/app/appclapeventinfo/transferByManager', {
+            ...this.forwardForm,
+            id: this.$route.query.id
+          }).then(res => {
+            if (res?.code == 0) {
+              this.isShowForward = false
+              this.getDetail()
+              this.$message.success('转交成功!')
+            }
+          })
+        }
+      })
+    },
+
+    onConfirm() {
+      if (this.gridInfo.userId) {
+        this.forwardForm.girdId = this.gridInfo.girdId
+        this.forwardForm.girdName = this.gridInfo.girdName
+        this.forwardForm.girdMemberId = this.gridInfo.id
+        this.forwardForm.girdMemberName = this.gridInfo.name
+      } else {
+        this.forwardForm.girdId = this.gridInfo.id
+      }
+      this.forwardForm.girdName = this.gridInfo.girdName
+      this.forwardForm.name = `${this.gridInfo.girdName}${this.gridInfo.name ? '-' + this.gridInfo.name : ''}`
+      this.isShowUser = false
+    },
+    getDict() {
+      this.instance.post(`/app/appclapeventgroup/list?current=1&size=100000`).then(res => {
+        if (res.code == 0) {
+          this.dictList = res.data.records.map(v => {
+            return {
+              dictValue: v.id,
+              dictName: v.groupName
+            }
+          })
+        }
+      })
+    },
+
+    close() {
+      this.$confirm('确定关闭该事件？').then(() => {
+        this.instance.post(`/app/appmininotice/delete?ids=${this.$route.query.id}`).then(res => {
+          if (res.code == 0) {
+            this.$message.success('删除成功！')
+            this.getList()
+          }
+        })
+      })
+    },
+
+    cancel(isRefresh) {
+      this.$emit('change', {
+        type: 'list',
+        isRefresh: !!isRefresh
+      })
+    },
+
+    onChange(e) {
+      this.instance.post(`/app/appvillagerintegralrule/list?size=1000&classification=${e}&ruleStatus=1`).then(res => {
+        if (res.code === 0) {
+          this.form.ruleId = ''
+          this.eventList = res.data.records
+        }
+      })
+    },
+
+    initMap() {
+      let {lng, lat} = this.detail
+      let center = [lng, lat]
+      AMapLoader.load({
+        key: 'b553334ba34f7ac3cd09df9bc8b539dc',
+        version: '2.0'
+      }).then(AMap => {
+        let map = new AMap.Map('map', {
+          center,
+          zoom: 14
+        })
+        let marker = new AMap.Marker({
+          position: new AMap.LngLat(lng, lat),
+          title: this.detail.address
+        })
+        map.add(marker)
+      })
+    },
+
+    handleEvent() {
+      this.$refs.form.validate(v => {
+        if (v) {
+          this.instance.post('/app/appclapeventinfo/finishByManager', {
+            ...this.form,
+            groupName: this.dictList.filter(v => v.dictValue === this.form.groupId)[0].dictName,
+            id: this.$route.query.id
+          }).then(res => {
+            if (res?.code == 0) {
+              this.isShowAdd = false
+              this.getDetail()
+              this.$message.success('处理成功!')
+            }
+          })
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.reportAtWillDetail {
+  height: 100%;
+
+  .grid-wrapper {
+    min-height: 360px;
+  }
+
+  .title-btns {
+    display: flex;
+    align-items: center;
+  }
+
+  ::v-deep .el-tree {
+    background: transparent;
+
+    .el-tree-node__expand-icon.is-leaf {
+      color: transparent !important;
+    }
+
+    .el-tree-node__content > .el-tree-node__expand-icon {
+      padding: 4px;
+    }
+
+    .el-tree-node__content {
+      height: 32px;
+    }
+
+    .el-tree__empty-text {
+      color: #222;
+      font-size: 14px;
+    }
+
+    .el-tree-node__children .el-tree-node__content {
+      height: 32px;
+    }
+
+    .el-tree-node__content:hover {
+      background: #E8EFFF;
+      color: #222222;
+      border-radius: 2px;
+    }
+
+    .is-current > .el-tree-node__content {
+      &:hover {
+        background: #2266FF;
+        color: #fff;
+      }
+
+      background: #2266FF;
+
+      span {
+        color: #fff;
+      }
+    }
+  }
+
+  .el-steps {
+    ::v-deep .el-step__icon {
+      font-size: 12px;
+      color: #555555;
+      border-color: #d0d4dc;
+    }
+
+    ::v-deep .el-step__head.is-finish {
+      .el-step__icon.is-text {
+        border: none;
+        color: #fff;
+        font-size: 12px;
+        background: #2266ff;
+      }
+    }
+
+    ::v-deep .el-step__line {
+      background-color: #d0d4dc;
+    }
+  }
+
+  .imgs {
+    font-size: 0;
+
+    img {
+      width: 108px;
+      height: 108px;
+      margin-right: 4px;
+      margin-bottom: 4px;
+      cursor: pointer;
+      user-select: none;
+
+      &:hover {
+        opacity: 0.8;
+      }
+
+      &:nth-of-type(2n) {
+        margin-right: 0;
+      }
+    }
+  }
+
+  ::v-deep .report-dialog {
+    .el-select {
+      width: 100%;
+    }
+  }
+
+  ::v-deep .el-step__head.is-process {
+    color: #555;
+    border-color: #555;
+  }
+
+  ::v-deep .is-finish h2 {
+    color: #2266ff;
+  }
+
+  .step-title {
+    color: #555;
+  }
+
+  .detail-content__wrapper {
+    display: flex;
+    width: 100%;
+    flex-wrap: wrap;
+
+    .detail-content__wrapper--left {
+      flex: 1;
+      margin-right: 20px;
+    }
+  }
+
+  ::v-deep .ai-detail__content {
+    background: #f3f6f9;
+
+    .ai-detail__content--wrapper {
+      display: flex;
+      gap: 16px;
+      width: 100%;
+      max-width: 100%;
+      padding: 16px;
+      box-sizing: border-box;
+
+      & > .el-card {
+        flex: 1;
+        min-width: 0;
+      }
+
+      .rightZone {
+        width: 400px;
+        flex-shrink: 0;
+        display: flex;
+        flex-direction: column;
+        gap: 16px;
+      }
+    }
+  }
+
+  ::v-deep .el-card {
+    .el-card__header {
+      padding: 12px 16px;
+      font-weight: bold;
+    }
+
+    .el-card__body {
+      padding: 8px;
+    }
+
+    #amap {
+      width: 466px;
+      height: 232px;
+    }
+
+    .el-steps {
+      margin-left: 8px;
+    }
+
+    .imgFormItem > .el-form-item__content {
+      display: flex;
+      gap: 16px;
+      flex-wrap: wrap;
+
+      &:before {
+        content: none;
+      }
+
+      .el-image__inner {
+        width: 82px;
+        height: 82px;
+      }
+    }
+  }
+}
+</style>

project/pingchang/apps/AppWishfulThinking/components/List.vue

@@ -0,0 +1,162 @@
+<template>
+  <ai-list>
+    <template #title>
+      <ai-title title="微心愿" isShowBottomBorder>
+        <el-button type="primary" slot="rightBtn" @click="toSetting">设置</el-button>
+      </ai-title>
+    </template>
+    <template #content>
+      <ai-search-bar>
+        <template #left>
+          <el-button size="small" type="primary" icon="iconfont iconAdd" @click="toAdd()">
+            添加
+          </el-button>
+          <ai-import :instance="instance" :dict="dict" type="appcommunitybuildinginfo" :importParams="{ areaId: userArea}" name="微心愿"
+                      @success="getList()">
+            <el-button icon="iconfont iconImport">导入</el-button>
+          </ai-import>
+          <ai-select
+              v-model="search.eventStatus"
+              clearable
+              placeholder="处理状态"
+              :selectList="dict.getDict('clapEventStatus')"
+              @change="search.current = 1, getList()">
+          </ai-select>
+        </template>
+        <template #right>
+          <el-input
+              v-model="search.content"
+              class="search-input"
+              size="small"
+              v-throttle="() => {search.current = 1, getList()}"
+              placeholder="请输入内容描述/上报居民/联系方式"
+              clearable
+              @change="getList"
+              @clear="search.current = 1, search.content = '', getList()"
+              suffix-icon="iconfont iconSearch">
+          </el-input>
+        </template>
+      </ai-search-bar>
+      <ai-table :tableData="tableData" :colConfigs="colConfigs" :total="total" :current.sync="search.current" :size.sync="search.size" @getList="getList">
+        <el-table-column slot="options" label="操作" fixed="right" width="120" align="center">
+          <div class="table-options" slot-scope="{row}">
+            <el-button type="text" title="详情" @click="toDetail(row.id)">详情</el-button>
+            <el-button type="text" title="删除" @click="handleDelete(row.id)">删除</el-button>
+          </div>
+        </el-table-column>
+      </ai-table>
+    </template>
+  </ai-list>
+</template>
+
+<script>
+import {mapState} from 'vuex'
+
+export default {
+  name: 'List',
+  label: "微心愿",
+
+  props: {
+    instance: Function,
+    dict: Object
+  },
+
+  data() {
+    return {
+      userList: [],
+      search: {
+        current: 1,
+        size: 10,
+        eventStatus: '',
+        content: ''
+      },
+      total: 0,
+      tableData: [],
+      content: '',
+      id: ''
+    }
+  },
+
+  computed: {
+    ...mapState(['user']),
+
+    colConfigs() {
+      return [
+        {prop: 'content', label: '内容描述', width: '300px'},
+        {prop: 'groupName', label: '事件类型', align: 'center'},
+        {prop: 'girdName', label: '所属网格', align: 'center'},
+        {prop: 'createTime', label: '上报时间', align: 'center'},
+        {prop: 'name', label: '上报居民', align: 'center'},
+        {prop: 'phone', label: '联系方式', align: 'center'},
+        {prop: 'eventStatus', label: '处理状态', align: 'center', formart: v => this.dict.getLabel('clapEventStatus', v)},
+        {prop: 'processTime', label: '处理时长', align: 'center'},
+        {slot: 'options'}
+      ]
+    },
+
+    handleStatusOps() {
+      return this.dict.getDict("reportAtWillHandleStatus").map(e => ({label: e.dictName, value: e.dictValue}))
+    }
+  },
+
+  created() {
+    this.dict.load('clapEventStatus').then(() => {
+      this.getList()
+    })
+  },
+
+  methods: {
+    getList() {
+      this.instance.post(`/app/appclapeventinfo/list`, null, {
+        params: {
+          ...this.search
+        }
+      }).then(res => {
+        if (res.code == 0) {
+          this.tableData = res.data.records
+          this.total = res.data.total
+        }
+      })
+    },
+
+    toDetail(id) {
+      this.$emit('change', {
+        type: 'Detail',
+        params: {
+          id: id || ''
+        }
+      })
+    },
+
+    toAdd() {
+      this.$emit('change', {
+        type: 'add'
+      })
+    },
+
+    toSetting() {
+      this.$emit('change', {
+        type: 'Setting',
+        params: {
+          id: ''
+        }
+      })
+    },
+    handleDelete(ids) {
+      this.$confirm("是否要进行删除?").then(() => {
+        this.instance.post("/app/appclapeventinfo/delete", null, {
+          params: {ids}
+        }).then(res => {
+          if (res?.code == 0) {
+            this.$message.success("删除成功!")
+            this.getList()
+          }
+        })
+      }).catch(() => 0)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

project/pingchang/apps/AppWishfulThinking/components/Setting.vue

@@ -0,0 +1,178 @@
+<template>
+  <ai-list class="notice">
+    <template slot="title">
+      <ai-title  isShowBack isShowBottomBorder title="事件类型" @onBackClick="cancel(false)"></ai-title>
+    </template>
+    <template slot="content">
+      <ai-search-bar class="search-bar">
+        <template #left>
+          <el-button size="small" type="primary" icon="iconfont iconAdd" @click="isShowAdd = true">添加事件类型</el-button>
+        </template>
+        <template slot="right">
+          <el-input
+            v-model="search.groupName"
+            class="search-input"
+            size="small"
+            v-throttle="() => {search.current = 1, getList()}"
+            placeholder="请输入事件类型名称"
+            clearable
+            @change="getList"
+            @clear="search.current = 1, search.groupName = '', getList()"
+            suffix-icon="iconfont iconSearch">
+          </el-input>
+        </template>
+      </ai-search-bar>
+      <ai-table
+        :tableData="tableData"
+        :col-configs="colConfigs"
+        :total="total"
+        style="margin-top: 6px;"
+        :current.sync="search.current"
+        :size.sync="search.size"
+        @getList="getList">
+        <el-table-column slot="tags" label="标签">
+          <template slot-scope="{ row }">
+            <div class="table-tags">
+              <el-tag type="info" v-for="(item, index) in row.tags" size="small" :key="index">{{ item }}</el-tag>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column slot="options" width="120px" fixed="right" label="操作" align="center">
+          <div class="table-options" slot-scope="{ row }">
+            <el-button type="text" @click="edit(row)">编辑</el-button>
+            <el-button type="text" @click="remove(row.id)">删除</el-button>
+          </div>
+        </el-table-column>
+      </ai-table>
+      <ai-dialog
+        :visible.sync="isShowAdd"
+        width="780px"
+        height="580px"
+        :title="id ? '编辑事件类型' : '添加事件类型'"
+        @close="onClose"
+        @onConfirm="onConfirm">
+        <el-form ref="form" class="ai-form" :model="form" label-width="110px" label-position="right">
+          <el-form-item label="事件类型" prop="groupName" style="width: 100%;" :rules="[{ required: true, message: '请输入事件类型名称', trigger: 'blur' }]">
+            <el-input size="small" :maxlength="10" show-word-limit placeholder="请输入事件类型名称" v-model="form.groupName"></el-input>
+          </el-form-item>
+          <el-form-item label="排序" prop="showIndex" style="width: 100%;" :rules="[{ required: true, message: '请输入排序', trigger: 'blur' }]">
+            <el-input-number size="small" v-model="form.showIndex" :min="1" :max="100" label="请输入排序"></el-input-number>
+          </el-form-item>
+        </el-form>
+      </ai-dialog>
+    </template>
+  </ai-list>
+</template>
+
+<script>
+  import { mapState } from 'vuex'
+  export default {
+    name: 'List',
+
+    props: {
+      instance: Function,
+      dict: Object
+    },
+
+    data() {
+      return {
+        search: {
+          current: 1,
+          size: 10,
+          groupName: ''
+        },
+        form: {
+          groupName: '',
+          showIndex: ''
+        },
+        id: '',
+        isShowAdd: false,
+        total: 0,
+        colConfigs: [
+          {prop: 'groupName', label: '事件类型', align: 'left'},
+          {prop: 'showIndex', label: '排序', align: 'center'},
+          {slot: 'options', label: '操作'}
+        ],
+        tableData: []
+      }
+    },
+
+    computed: {
+      ...mapState(['user'])
+    },
+
+    mounted() {
+      this.getList()
+    },
+
+    methods: {
+      getList() {
+        this.instance.post(`/app/appclapeventgroup/list`, null, {
+          params: {
+            ...this.search
+          }
+        }).then(res => {
+          if (res.code == 0) {
+            this.tableData = res.data.records
+            this.total = res.data.total
+          }
+        })
+      },
+
+      edit (e) {
+        this.id = e.id
+        this.form.groupName = e.groupName
+        this.form.showIndex = ''
+
+        this.$nextTick(() => {
+          this.isShowAdd = true
+        })
+      },
+
+      onClose () {
+        this.id = ''
+        this.form.showIndex = ''
+        this.form.groupName = ''
+      },
+
+      onConfirm () {
+        this.$refs.form.validate((valid) => {
+          if (valid) {
+            this.instance.post(`/app/appclapeventgroup/addOrUpdate`, {
+              ...this.form,
+              id: this.id || null
+            }).then(res => {
+              if (res.code === 0) {
+                this.$message.success('添加成功')
+                this.isShowAdd = false
+
+                this.getList()
+              }
+            })
+          }
+        })
+      },
+
+      cancel (isRefresh) {
+        this.$emit('change', {
+          type: 'list',
+          isRefresh: !!isRefresh
+        })
+      },
+
+      remove(id) {
+        this.$confirm('确定删除该数据？').then(() => {
+          this.instance.post(`/app/appclapeventgroup/delete?ids=${id}`).then(res => {
+            if (res.code == 0) {
+              this.$message.success('删除成功！')
+              this.getList()
+            }
+          })
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+</style>