From 01cd905669d32e3db4e98e473a80060181962218 Mon Sep 17 00:00:00 2001
From: liuye <liuye@sinoecare.com>
Date: Tue, 6 Aug 2024 14:02:56 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B7=A5=E5=8D=95=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 project/weiyang/AppWorkOrder/AppWorkOrder.vue |  61 ++
 .../AppWorkOrder/components/Detail.vue        | 752 ++++++++++++++++++
 .../weiyang/AppWorkOrder/components/List.vue  | 281 +++++++
 .../AppWorkOrder/components/Setting.vue       | 147 ++++
 .../components/TableInputColumn.vue           |  17 +
 .../AppWorkOrder/components/settingDetail.vue | 157 ++++
 6 files changed, 1415 insertions(+)
 create mode 100644 project/weiyang/AppWorkOrder/AppWorkOrder.vue
 create mode 100644 project/weiyang/AppWorkOrder/components/Detail.vue
 create mode 100644 project/weiyang/AppWorkOrder/components/List.vue
 create mode 100644 project/weiyang/AppWorkOrder/components/Setting.vue
 create mode 100644 project/weiyang/AppWorkOrder/components/TableInputColumn.vue
 create mode 100644 project/weiyang/AppWorkOrder/components/settingDetail.vue

diff --git a/project/weiyang/AppWorkOrder/AppWorkOrder.vue b/project/weiyang/AppWorkOrder/AppWorkOrder.vue
new file mode 100644
index 00000000..ba558ff9
--- /dev/null
+++ b/project/weiyang/AppWorkOrder/AppWorkOrder.vue
@@ -0,0 +1,61 @@
+<template>
+  <section class="AppWorkOrder">
+    <component ref="component" :is="currentPage" @change="onChange" v-bind="$props" :listIndex="listIndex" />
+  </section>
+</template>
+
+<script>
+import List from './components/List'
+import Detail from './components/Detail'
+import Setting from './components/Setting'
+import settingDetail from "./components/settingDetail";
+
+export default {
+  name: 'AppWorkOrder',
+  label: '工单管理',
+
+  props: {
+    instance: Function,
+    dict: Object,
+    menuName: {default: '工单管理'}
+  },
+
+  data() {
+    return {
+      component: 'List',
+      params: {},
+      listIndex: '0'
+    }
+  },
+  computed: {
+    currentPage() {
+      if(this.$route.query.id) { //列表
+        this.listIndex = this.$route.query.listIndex
+      }
+      let {hash, query: {id}} = this.$route
+      return hash == "#Setting" ? Setting :
+          hash == "#sd" ? settingDetail :
+              !!id ? Detail : List
+    }
+  },
+  components: {
+    List,
+    Detail,
+    Setting
+  },
+
+  methods: {
+    onChange(data) {
+      this.$router.push({query: data.params, hash: data.type == "Setting" ? "#Setting" : ""})
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.AppWorkOrder {
+  height: 100%;
+  background: #F3F6F9;
+  overflow: auto;
+}
+</style>
diff --git a/project/weiyang/AppWorkOrder/components/Detail.vue b/project/weiyang/AppWorkOrder/components/Detail.vue
new file mode 100644
index 00000000..501786b8
--- /dev/null
+++ b/project/weiyang/AppWorkOrder/components/Detail.vue
@@ -0,0 +1,752 @@
+<template>
+  <ai-detail class="reportAtWillDetail" v-loading="isLoading">
+    <template #title>
+      <ai-title title="详情" isShowBack isShowBottomBorder @onBackClick="cancel(true)">
+        <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 #right>
+              <el-button type="primary" @click="editClick()" v-if="detail.eventStatus != 2 && detail.eventStatus != 3">编辑</el-button>
+            </template>
+            <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="事件来源">{{ dict.getLabel('residentEventSource', detail.eventSource) }}</ai-info-item> -->
+                <ai-info-item label="事件类型">{{ detail.type }}</ai-info-item>
+                <ai-info-item label="消息来源">{{ detail.groupName }}</ai-info-item>
+                <!-- <ai-info-item label="事件来源">{{ dict.getLabel('residentEventSource', detail.eventSource) }}</ai-info-item>  -->
+                <ai-info-item label="事件描述" isLine>
+                  <span v-html="detail.content"></span>
+                </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>{{ detail.address }}</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 v-if="!!detail.id" :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="type"  :rules="[{ required: true, message: '请选择事件分类' }]" style="width: 100%;">
+            <ai-select v-model="form.type" :selectList="typeList" placeholder="请选择" />
+          </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="1">已办结</el-radio>
+              <el-radio label="0">已拒绝</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="handleUserName" style="width: 100%;" :rules="[{ required: true, message: '请选择人员' }]">
+            <el-input disabled size="small" v-model="forwardForm.handleUserName" clearable placeholder="请选择人员">
+              <template slot="append">
+                <ai-user-selecter refs="addTags" :isMultiple="false" :instance="instance" v-model="forwardForm.user" @change="onChooseUser">
+                  <el-button size="small">选择人员</el-button>
+                </ai-user-selecter>
+              </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="isShowEdit"
+          width="800px"
+          @close="onCloseEdit"
+          title="编辑事件"
+          @onConfirm="onConfirmEdit">
+        <el-form class="ai-form" label-width="120px" :model="editInfo" ref="editInfo">
+          <el-form-item label="事件描述" prop="content" style="width: 100%;" :rules="[{ required: true, message: '请输入事件描述' }]">
+            <el-input type="textarea" :rows="8" :maxlength="500" v-model="editInfo.content" clearable placeholder="请输入事件描述" show-word-limit></el-input>
+          </el-form-item>
+          <el-form-item label="事件类型" prop="type"  :rules="[{ required: true, message: '请选择事件类型' }]" style="width: 100%;">
+            <ai-select v-model="editInfo.type" :selectList="typeList" placeholder="请选择" />
+          </el-form-item>
+          <el-form-item label="所属网格" style="width: 100%;">
+            <el-input disabled size="small" v-model="editInfo.girdName" clearable>
+              <template slot="append">
+                <ai-picker :ops="{label: 'girdName'}" :instance="instance" v-model="editInfo.girdIds" @pick="e => onUserChange(e)" dialogTitle="选择所属网格" action="/app/appgirdinfo/girdList">
+                  <div class="time-select">
+                    <span class="dept-name" style="color:#999;">选择所属网格</span>
+                    <i class="el-icon-arrow-down"></i>
+                  </div>
+                </ai-picker>
+              </template>
+            </el-input>
+          </el-form-item>
+          <el-form-item label="联系方式" prop="phone" style="width: 100%;">
+            <el-input
+                size="small"
+                v-model="editInfo.phone"
+                placeholder="请输入..."
+                clearabel
+                :maxLength="11"
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="图片" prop="files" style="width: 100%;">
+            <ai-uploader
+                :instance="instance"
+                v-model="editInfo.files"
+                isShowTip
+                :limit="9">
+            </ai-uploader>
+          </el-form-item>
+          <el-form-item label="事件地点" style="width: 100%;">
+            <el-input disabled size="small" v-model="editInfo.address"></el-input>
+          </el-form-item>
+          <el-form-item label="上报位置" prop="lat">
+            <el-button @click="showMap = true">地图标绘</el-button>
+          </el-form-item>
+        </el-form>
+      </ai-dialog>
+      <ai-dialog title="地图" :visible.sync="showMap" @opened="initMapSelect" width="800px" class="mapDialog" @onConfirm="selectMap">
+        <div id="mapDialog" style="height:400px;"></div>
+        <el-form label-width="80px" style="padding: 10px 20px 0 0;">
+          <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>
+    </template>
+  </ai-detail>
+</template>
+
+<script>
+import AMapLoader from '@amap/amap-jsapi-loader'
+import {mapState} from 'vuex'
+
+export default {
+  name: 'Detail',
+  props: ['dict', 'instance', 'listIndex'],
+
+  data() {
+    return {
+      forwardForm: {
+        content: '',
+        handleUserId: '',
+        handleUserName: '',
+        files: [],
+        user: []
+      },
+      isLoading: true,
+      name: '',
+      detail: {},
+      eventList: [],
+      isShowAdd: false,
+      userList: [],
+      processList: [],
+      dictList: [],
+      defaultProps: {
+        label: 'girdName'
+      },
+      isShowForward: false,
+      tree: [],
+      gridInfo: {},
+      form: {
+        files: [],
+        groupId: '',
+        groupName: '',
+        content: [],
+        eventStatus: '1',
+        type: ''
+      },
+      evaluation: {},
+      isShowEdit: false, //编辑工单信息
+      editInfo: {},
+      placeDetail: {
+        lng: '',
+        lat: '',
+        address: ''
+      },
+      showMap: false,
+      searchPlace: '',
+      map: null,
+      typeList: []
+    }
+  },
+
+  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.getTypeList()
+    this.dict.load('clapEventStatus', 'residentEventSource', 'xbotReportEventType').then(() => {
+      this.getDetail()
+    })
+  },
+
+  methods: {
+    getDetail() {
+      this.instance.post('/app/appsessionarchivereportinfo/queryDetailById', null, {
+        params: {id: this.$route.query.id}
+      }).then(res => {
+        if (res?.data) {
+          this.detail = res.data
+          this.processList = res.data.processList
+          this.$forceUpdate()
+          this.$nextTick(() => {
+            this.initMap()
+          })
+          this.isLoading = false
+        }
+      }).catch(() => {
+        this.isLoading = false
+      })
+    },
+    getTypeList() {
+      this.instance.post(`/app/appsessionarchivefeaturelibrary/eventTypeList`).then(res => {
+        if (res.code == 0) {
+          res.data.map((item) => {
+            var i = {dictName: item, dictValue: item}
+            this.typeList.push(i)
+          })
+        }
+      })
+    },
+    getGirdList() {
+      return this.instance.post(`/app/appresidentreportinfo/listGirdInfoByTransfer?id=${this.$route.query.id}`).then(res => {
+        if (res?.data) {
+          // return this.tree = this.formatList([res.data])
+          this.tree = res.data
+          this.tree.map((item) => {
+            item.children = [item.girdMemberList?.map(e => ({
+              ...e, isUser: true, girdName: item.girdName
+            })) || []].flat()
+          })
+        }
+      })
+    },
+
+    onClose() {
+      this.form.files = []
+      this.form.groupId = ''
+      this.form.groupName = ''
+      this.form.content = ''
+      this.form.eventStatus = ''
+      this.forwardForm.content = ''
+      this.forwardForm.handleUserName = ''
+      this.forwardForm.user = []
+      this.forwardForm.files = []
+    },
+
+    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/appsessionarchivereportinfo/transfer', {
+            ...this.forwardForm,
+            id: this.$route.query.id
+          }).then(res => {
+            if (res?.code == 0) {
+              this.$message.success('转交成功!')
+              this.isShowForward = false
+              this.processList = []
+              this.onClose()
+              this.getDetail()
+              
+            }
+          })
+        }
+      })
+    },
+    getDict() {
+      this.instance.post(`/app/appresidentreportgroup/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/appresidentreportinfo/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,
+        listIndex: this.listIndex
+      })
+    },
+
+    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/appsessionarchivereportinfo/finish', {
+            ...this.form,
+            id: this.$route.query.id
+          }).then(res => {
+            if (res?.code == 0) {
+              this.isShowAdd = false
+              this.getDetail()
+              this.$message.success('处理成功!')
+            }
+          })
+        }
+      })
+    },
+
+    onChooseUser(v) {
+      this.forwardForm.handleUserId = v[0].id
+      this.forwardForm.handleUserName = v[0].name
+      this.forwardForm.user = v
+    },
+
+    editClick() {
+      this.isShowEdit = true
+      this.editInfo = {...this.detail}
+      this.editInfo.girdIds = []
+      if(this.editInfo.girdId) {
+        this.editInfo.girdIds.push(this.editInfo.girdId)
+      }
+    },
+
+    selectMap() {
+      this.editInfo.lng = this.placeDetail.lng
+      this.editInfo.lat = this.placeDetail.lat
+      this.editInfo.address = this.placeDetail.address
+      this.showMap = false
+    },
+    initMapSelect() {
+      AMapLoader.load({
+        key: 'b553334ba34f7ac3cd09df9bc8b539dc',
+        version: '2.0',
+        plugins: ['AMap.PlaceSearch', 'AMap.AutoComplete', 'AMap.Geocoder'],
+      }).then((AMap2) => {
+        this.map = new AMap2.Map('mapDialog', {
+          resizeEnable: true,
+          zooms: [6, 20],
+          zoom: 11,
+          center:[107.11059, 31.56618],
+        })
+        this.placeSearch = new AMap2.PlaceSearch({ map: this.map })
+        new AMap2.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 AMap2.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()
+      }
+    },
+
+    onUserChange (e) {
+      if (e.length) {
+        this.editInfo.girdName = e[0].girdName
+      } else {
+        this.editInfo.girdIds = []
+        this.editInfo.girdName = ''
+      }
+    },
+
+    onCloseEdit() {
+      this.isShowEdit = false
+      this.editInfo = {}
+    },
+
+    onConfirmEdit() {
+      this.$refs.editInfo.validate(v => {
+        if (v) {
+          this.instance.post('/app/appsessionarchivereportinfo/update', {
+            ...this.editInfo,
+            id: this.$route.query.id,
+            girdIds: this.editInfo.girdIds.length ? this.editInfo.girdIds[0] : ''
+          }).then(res => {
+            if (res?.code == 0) {
+              this.isShowEdit = 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;
+  }
+
+  :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 {
+    :deep( .el-step__icon ) {
+      font-size: 12px;
+      color: #555555;
+      border-color: #d0d4dc;
+    }
+
+    :deep( .el-step__head.is-finish ) {
+      .el-step__icon.is-text {
+        border: none;
+        color: #fff;
+        font-size: 12px;
+        background: #2266ff;
+      }
+    }
+
+    :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;
+      }
+    }
+  }
+
+  :deep( .report-dialog ) {
+    .el-select {
+      width: 100%;
+    }
+  }
+
+  :deep( .el-step__head.is-process ) {
+    color: #555;
+    border-color: #555;
+  }
+
+  :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;
+    }
+  }
+
+  :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;
+      }
+    }
+  }
+
+  :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>
diff --git a/project/weiyang/AppWorkOrder/components/List.vue b/project/weiyang/AppWorkOrder/components/List.vue
new file mode 100644
index 00000000..5d969d3d
--- /dev/null
+++ b/project/weiyang/AppWorkOrder/components/List.vue
@@ -0,0 +1,281 @@
+<template>
+  <ai-list>
+    <template #title>
+      <ai-title :title="menuName" isShowBottomBorder>
+        <el-button type="primary" slot="rightBtn" @click="toSetting" v-if="currIndex==0">工单特征库设置</el-button>
+      </ai-title>
+    </template>
+    <!-- <template slot="tabs">
+      <el-tabs v-model="currIndex">
+        <el-tab-pane v-for="(tab,i) in tabs" :key="i" :label="tab.label"></el-tab-pane>
+      </el-tabs>
+    </template> -->
+    <template #content>
+      <el-tabs v-model="currIndex" @tab-click="handleClick">
+        <el-tab-pane v-for="(tab,i) in tabs" :key="i" :label="tab.label"></el-tab-pane>
+      </el-tabs>
+      <ai-search-bar>
+        <template #left>
+          <ai-select
+            v-model="search.eventStatus"
+            clearable
+            placeholder="处理状态"
+            :selectList="dict.getDict('clapEventStatus')"
+            @change="search.current = 1, getList()">
+          </ai-select>
+          <ai-select v-if="currIndex == 0"
+            v-model="search.type"
+            clearable
+            placeholder="事件类型"
+            :selectList="typeList"
+            @change="search.current = 1, getList()">
+          </ai-select>
+          <ai-select v-if="currIndex == 1"
+            v-model="search.eventSource"
+            clearable
+            placeholder="触发敏感词"
+            :selectList="dict.getDict('residentEventSource')"
+            @change="search.current = 1, getList()">
+          </ai-select>
+          <ai-select v-if="currIndex == 2"
+            v-model="search.eventSource"
+            clearable
+            placeholder="事件来源"
+            :selectList="dict.getDict('residentEventSource')"
+            @change="search.current = 1, getList()">
+          </ai-select>
+          
+          <el-date-picker size="small" v-model="searchDotime" type="daterange" range-separator="至" @change="timeChange"
+            start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd" format="yyyy-MM-dd"></el-date-picker>
+          <!-- <ai-select
+            v-model="search.eventSource"
+            clearable
+            placeholder="事件来源"
+            :selectList="dict.getDict('residentEventSource')"
+            @change="search.current = 1, getList()">
+          </ai-select>
+          <ai-select
+            v-model="search.groupId"
+            clearable
+            placeholder="事件类型"
+            :selectList="typeList"
+            @change="search.current = 1, getList()">
+          </ai-select>
+          <el-cascader ref="cascader1" v-model="girdArr" :options="girdOptions" placeholder="所属网格" size="small"
+            :props="defaultProps" :show-all-levels="false" @change="gridChange" clearable></el-cascader> -->
+        </template>
+        <template #right>
+          <el-input
+            v-model="search.content"
+            class="search-input"
+            size="small"
+            v-throttle="() => {search.current = 1, getList()}"
+            :placeholder="placeholderTextList[currIndex]"
+            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" v-if="colConfigs.length">
+          <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,
+    menuName: String,
+    listIndex: String
+  },
+
+  data() {
+    return {
+      userList: [],
+      search: {
+        current: 1,
+        size: 10,
+        eventStatus: '',
+        content: '',
+        type: '',
+        startTime: '',
+        endTime: '',
+      },
+      total: 0,
+      tableData: [],
+      content: '',
+      id: '',
+      girdId: '',
+      girdArr: [],
+      girdOptions: [],
+      defaultProps: {
+        label: 'girdName',
+        value: 'id',
+        children: 'children',
+        checkStrictly: true,
+      },
+      searchDotime: [],
+      typeList: [],
+      tabs: [
+        {label: '舆情工单'},
+        {label: '敏感词工单'},
+        {label: '事件上报'}
+      ],
+      currIndex: 0,
+      placeholderTextList: ['请输入内容描述/上报人员/联系方式', '敏感词、涉及对象、姓名、手机号', '请输入内容描述/上报人员/联系方式'],
+      colConfigs: []
+    }
+  },
+
+  computed: {
+    ...mapState(['user']),
+
+    colConfigs1() {
+      return [
+        {prop: 'content', label: '内容描述', width: '300px'},
+        {prop: 'type', label: '事件类型', align: 'center', dict: 'xbotReportEventType'},
+        {prop: 'groupName', label: '所属群聊', align: 'center'},
+        {prop: 'createTime', label: '上报时间', align: 'center'},
+        {prop: 'name', label: '昵称', align: 'center'},
+        // {prop: 'phone', label: '联系方式', align: 'center'},
+        {prop: 'eventStatus', label: '处理状态', align: 'center', format: v => this.dict.getLabel('clapEventStatus', v)},
+        {prop: 'processTime', label: '处理时长', align: 'center'},
+        {slot: 'options'}
+      ]
+    },
+    colConfigs2() {
+      return [
+        {prop: 'content', label: '内容描述', width: '300px'},
+        {prop: 'type', label: '事件类型', align: 'center', dict: 'xbotReportEventType'},
+        {prop: 'groupName', label: '所属群聊', align: 'center'},
+        {prop: 'name', label: '姓名', align: 'center'},
+        {prop: 'createTime', label: '上报时间', align: 'center'},
+        // {prop: 'phone', label: '联系方式', align: 'center'},
+        {prop: 'eventStatus', label: '处理状态', align: 'center', format: v => this.dict.getLabel('clapEventStatus', v)},
+        {prop: 'processTime', label: '处理时长', align: 'center'},
+        {slot: 'options'}
+      ]
+    },
+    colConfigs3() {
+      return [
+        {prop: 'content', label: '内容描述', width: '300px'},
+        {prop: 'type', label: '事件来源', align: 'center', dict: 'xbotReportEventType'},
+        {prop: 'type', label: '事件类型', align: 'center', dict: 'xbotReportEventType'},
+        {prop: 'groupName', label: '所属网格', align: 'center'},
+        {prop: 'createTime', label: '上报时间', align: 'center'},
+        {prop: 'name', label: '上报人员', align: 'center'},
+        {prop: 'phone', label: '联系方式', align: 'center'},
+        {prop: 'eventStatus', label: '处理状态', align: 'center', format: 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.currIndex = this.listIndex
+    this.handleClick()
+    this.dict.load('clapEventStatus', 'residentEventSource', 'xbotReportEventType').then(() => {
+      this.getList()
+      this.getTypeList()
+    })
+  },
+
+  methods: {
+    timeChange() {
+      if (this.searchDotime) {
+        this.search.startTime = this.searchDotime[0]
+        this.search.endTime = this.searchDotime[1]
+      } else {
+        this.search.startTime = null
+        this.search.endTime = null
+      }
+      this.search.current = 1
+      this.getList()
+    },
+    getList() {
+      this.instance.post(`/app/appsessionarchivereportinfo/list`, null, {
+        params: {
+          ...this.search
+        }
+      }).then(res => {
+        if (res.code == 0) {
+          this.tableData = res.data.records
+          this.total = res.data.total
+        }
+      })
+    },
+    getTypeList() {
+      this.instance.post(`/app/appsessionarchivefeaturelibrary/eventTypeList`).then(res => {
+        if (res.code == 0) {
+          res.data.map((item) => {
+            var i = {distName: item, dictValue: item}
+            this.typeList.push(i)
+          })
+        }
+      })
+    },
+    toDetail(id) {
+      this.$emit('change', {
+        type: 'Detail',
+        params: {
+          id: id || '',
+          listIndex: this.currIndex
+        }
+      })
+    },
+    toSetting() {
+      this.$emit('change', {
+        type: 'Setting',
+        params: {
+          id: ''
+        }
+      })
+    },
+    handleDelete(ids) {
+      this.$confirm("是否要进行删除?").then(() => {
+        this.instance.post("/app/appsessionarchivereportinfo/delete", null, {
+          params: {ids}
+        }).then(res => {
+          if (res?.code == 0) {
+            this.$message.success("删除成功!")
+            this.getList()
+          }
+        })
+      }).catch(() => 0)
+    },
+    handleClick() {
+      if(this.currIndex == 0) {
+        this.colConfigs = this.colConfigs1
+      }else if(this.currIndex == 1) {
+        this.colConfigs = this.colConfigs2
+      }else {
+        this.colConfigs = this.colConfigs3
+      }
+    }
+  },
+  
+}
+</script>
+
+<style lang="scss" scoped>
+</style>
diff --git a/project/weiyang/AppWorkOrder/components/Setting.vue b/project/weiyang/AppWorkOrder/components/Setting.vue
new file mode 100644
index 00000000..b80a9f03
--- /dev/null
+++ b/project/weiyang/AppWorkOrder/components/Setting.vue
@@ -0,0 +1,147 @@
+<template>
+  <section class="Setting">
+    <ai-list>
+      <template slot="title">
+        <ai-title title="工单特征库" isShowBack isShowBottomBorder @onBackClick="cancel"></ai-title>
+      </template>
+      <template #content>
+        <ai-search-bar>
+          <template #left>
+            <el-button size="small" type="primary" icon="iconfont iconAdd" @click="edit()">添加</el-button>
+          </template>
+          <template #right>
+            <el-input size="small" placeholder="特征词搜索" v-model="search.keywords" clearable
+                      @clear="search.current = 1, search.keywords = '', getTableData()"
+                      suffix-icon="iconfont iconSearch"
+                      v-throttle="() => {(search.current = 1), getTableData();}"/>
+          </template>
+        </ai-search-bar>
+        <ai-table :tableData="tableData" :total="total" :current.sync="search.current" :size.sync="search.size"
+                  @getList="getTableData()" :col-configs="colConfigs" :dict="dict">
+          <el-table-column slot="options" label="操作" width="200" align="center">
+            <template slot-scope="{ row }">
+              <el-button type="text" @click="changeStatus(row, '停用')" v-if="row.status == 1">停用</el-button>
+              <el-button type="text" @click="changeStatus(row, '启用')" v-else>启用</el-button>
+              <el-button type="text" @click="edit(row)">编辑</el-button>
+              <el-button type="text" @click="del(row)">删除</el-button>
+            </template>
+          </el-table-column>
+        </ai-table>
+      </template>
+    </ai-list>
+  </section>
+
+</template>
+
+<script>
+import {mapState} from "vuex";
+
+export default {
+  name: "Setting",
+  label: '工单特征库',
+  props: {
+    instance: Function,
+    dict: Object,
+    permissions: Function,
+    menuName: String
+  },
+  data() {
+    return {
+      search: {
+        keywords: '',
+        current: 1,
+        size: 10,
+      },
+      total: 0,
+      tableData: [],
+      current: 1,
+    }
+  },
+  created() {
+    this.dict.load(['processDefStatus', 'xbotReportEventType']).then(() => {
+      this.getTableData()
+    })
+  },
+  computed: {
+    ...mapState(['user']),
+    colConfigs() {
+      return [
+        {prop: "keywords", label: '特征词', align: "left"},
+        {prop: "eventType", label: '事件类型', width: 200, align: 'center', dict: 'xbotReportEventType'},
+        {prop: "createTime", label: '创建时间', width: 200, align: 'center'},
+        {prop: "createUserName", label: '创建人', width: 200, align: 'center'},
+        {prop: "status", label: '状态', width: 200, dict: 'processDefStatus', align: 'center'},
+        {slot: "options"},
+      ]
+    },
+  },
+  methods: {
+    getTableData() {
+      this.instance.post(`/app/appsessionarchivefeaturelibrary/list`, null, {
+        params: {
+          ...this.search
+        }
+      }).then(res => {
+        if (res?.data) {
+          this.tableData = res.data.records
+          this.total = res.data.total
+        }
+      })
+    },
+    del(row) {
+      this.$confirm('确定删除该数据？').then(() => {
+        this.instance.post(`/app/appsessionarchivefeaturelibrary/delete?ids=${row.id}`).then(res => {
+          if (res.code == 0) {
+            this.$message.success('删除成功！')
+            this.getTableData()
+          }
+        })
+      })
+    },
+    changeStatus(row, text) {
+      this.$confirm(`确定${text}该特征词？`).then(() => {
+        this.instance.post(`/app/appsessionarchivefeaturelibrary/enable?id=${row.id}`).then(res => {
+          if (res.code == 0) {
+            this.$message.success('操作成功！')
+            this.getTableData()
+          }
+        })
+      })
+    },
+    edit(row = {}) {
+      const {id} = row
+      this.$router.push({hash: "#sd", query: {id}})
+    },
+    cancel() {
+      this.$router.push({})
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.Setting {
+  height: 100%;
+
+  .time-select {
+    padding: 0 16px;
+    height: 32px;
+    line-height: 32px;
+    border: 1px solid #d0d4dc;
+    border-radius: 4px;
+    display: flex;
+    justify-content: space-between;
+    cursor: pointer;
+
+    .el-icon-arrow-down {
+      line-height: 32px;
+    }
+  }
+
+  :deep .is-error {
+    .time-select {
+      border: 1px solid #f46 !important;
+    }
+  }
+}
+</style>
diff --git a/project/weiyang/AppWorkOrder/components/TableInputColumn.vue b/project/weiyang/AppWorkOrder/components/TableInputColumn.vue
new file mode 100644
index 00000000..24241c8b
--- /dev/null
+++ b/project/weiyang/AppWorkOrder/components/TableInputColumn.vue
@@ -0,0 +1,17 @@
+<template>
+  <el-table-column :label="label" v-bind="$attrs">
+    <template slot-scope="{row}">
+      <el-input v-model="row[prop]" :placeholder="placeholder" clearable/>
+    </template>
+  </el-table-column>
+</template>
+<script>
+export default {
+  name: 'table-input-column',
+  props: {
+    label: {type: String, required: true},
+    prop: {type: String, required: true},
+    placeholder: {default: "请输入"}
+  }
+}
+</script>
diff --git a/project/weiyang/AppWorkOrder/components/settingDetail.vue b/project/weiyang/AppWorkOrder/components/settingDetail.vue
new file mode 100644
index 00000000..431c2b2f
--- /dev/null
+++ b/project/weiyang/AppWorkOrder/components/settingDetail.vue
@@ -0,0 +1,157 @@
+<template>
+  <ai-detail class="settingDetail">
+    <ai-title slot="title" title="设置事件" isShowBack isShowBottomBorder @back="back"/>
+    <template #content>
+      <el-form size="small" ref="FeatureForm" :model="form" :rules="rules" label-width="80px">
+        <ai-card title="基本信息">
+          <div class="grid">
+            <el-form-item label="特征词" prop="keywords">
+              <el-input v-model.trim="form.keywords" type="textarea" :rows="2" placeholder="多个特征词以,隔开"/>
+            </el-form-item>
+            <el-form-item label="最小长度" prop="minLength">
+              <el-input v-model.trim="form.minLength" type="textarea" :rows="2" placeholder="进行特征分析最小的文本长度"/>
+            </el-form-item>
+            <el-form-item label="事件类型" prop="eventType">
+              <ai-select v-model="form.eventType" :instance="instance" action="/app/appsessionarchivefeaturelibrary/list"
+                         :prop="{value:'eventType',label:'eventType'}" allow-create
+                         placeholder="可以选择已有的事件类型,也可以创建新的"/>
+            </el-form-item>
+            <el-form-item label="相似度" prop="l2">
+              <el-input type="number" v-model="form.l2" placeholder="建设值设置在150-180之间,默认180"/>
+            </el-form-item>
+          </div>
+        </ai-card>
+        <ai-card title="事件信息" panel>
+          <template #right>
+            <el-button type="text" @click="form.features.push({})">添加</el-button>
+          </template>
+          <el-form-item prop="features" label-width="0">
+            <el-table :data="form.features" size="mini" stripe border header-cell-class-name="ai-table__header">
+              <table-input-column label="属性" prop="field" width="120px"/>
+              <table-input-column label="属性名" prop="label" width="160px"/>
+              <table-input-column label="属性别名" prop="alias" width="120px"/>
+              <table-input-column label="描述" prop="description"/>
+              <el-table-column label="操作" align="center" width="80px">
+                <template slot-scope="{row,$index}">
+                  <el-button type="text" @click="handleDelete('是否要删除属性?',form.features,$index)">删除</el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+          </el-form-item>
+        </ai-card>
+        <el-form-item prop="features" label-width="0">
+          <ai-card title="样例" v-if="!isEmpty(form.features)" panel class="mar-t20">
+            <template #right>
+              <el-button type="text" @click="form.examples.push({content:'样例会话',extraction:{}})">添加</el-button>
+            </template>
+            <el-table :data="form.examples" size="mini" stripe border header-cell-class-name="ai-table__header">
+              <table-input-column label="会话内容" prop="content"/>
+              <el-table-column label="事件抓取信息" min-width="200px">
+                <template slot-scope="{row}">
+                  <el-descriptions :column="2" size="mini" border>
+                    <el-descriptions-item v-for="item in form.features" :key="item.field" :label="item.label">
+                      <el-input v-model="row.extraction[item.field]" clearable placeholder="请输入"/>
+                    </el-descriptions-item>
+                  </el-descriptions>
+                </template>
+              </el-table-column>
+              <el-table-column label="操作" align="center" width="80px">
+                <template slot-scope="{row,$index}">
+                  <el-button type="text" @click="handleDelete('是否要删除该样例?',form.examples,$index)">删除
+                  </el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+          </ai-card>
+        </el-form-item>
+      </el-form>
+    </template>
+    <template #footer>
+      <el-button @click="back">取消</el-button>
+      <el-button type="primary" @click="submit">提交</el-button>
+    </template>
+  </ai-detail>
+</template>
+<script>
+import TableInputColumn from "./TableInputColumn.vue";
+
+export default {
+  name: "settingDetail",
+  components: {TableInputColumn},
+  props: {
+    instance: Function,
+    dict: Object,
+  },
+  data() {
+    return {
+      form: {
+        // keywords: ["丢", "找", "不见", "看见", "看到", "掉"].toString(),
+        // eventType: "失物招领",
+        features: [],
+        examples: []
+      },
+      rules: {
+        keywords: [{required: true, message: '请输入特征词', trigger: 'blur'}],
+        eventType: [{required: true, message: '请选择事件类型', trigger: 'blur'}],
+        features: [{required: true, message: '请设置事件信息'}],
+      }
+    }
+  },
+  methods: {
+    back() {
+      this.$router.push({hash: "#Setting"})
+    },
+    submit() {
+      this.$refs.FeatureForm.validate().then(() => {
+        let {features = null, examples = null} = this.form
+        features = JSON.stringify(features)
+        examples = JSON.stringify(examples)
+        this.instance.post("/app/appsessionarchivefeaturelibrary/addOrUpdate", {
+          ...this.form,
+          features,
+          examples
+        }).then(res => {
+          if (res?.code == 0) {
+            this.$message.success("保存成功!")
+            this.back()
+          }
+        })
+      })
+    },
+    getDetail() {
+      const {id} = this.$route.query
+      id && this.instance.post("/app/appsessionarchivefeaturelibrary/queryDetailById", null, {params: {id}}).then(res => {
+        if (res?.data) {
+          let {features = null, examples = null} = res.data
+          features = JSON.parse(features) || []
+          examples = JSON.parse(examples) || []
+          this.form = {...res.data, features, examples}
+        }
+      })
+    },
+    isEmpty(list = []) {
+      return Object.keys(list).length <= 0
+    },
+    handleDelete(msg, table = [], i) {
+      this.$confirm(msg).then(() => {
+        table.splice(i, 1)
+      })
+    },
+    transformer() {
+
+    }
+  },
+  created() {
+    this.getDetail()
+  }
+}
+</script>
+<style lang="scss" scoped>
+.settingDetail {
+  :deep(.ai-table__header) {
+    border-bottom: none;
+    background: #F3F4F5;
+    line-height: normal;
+  }
+}
+</style>