加入历史数据查看功能

src/api/admin/repair/repairHistory.js

@@ -0,0 +1,23 @@
+import { axios } from '@/utils/request'
+
+const api = {
+  repairHis: 'admin/repair/his'
+}
+
+export function list (parameter) {
+  return axios({
+    url: api.repairHis + '/list',
+    // method: 'post',
+    // data: parameter,
+    method: 'get',
+    params: parameter
+  })
+}
+
+export function getInfo (parameter) {
+  return axios({
+    url: api.repairHis + '/get',
+    method: 'get',
+    params: parameter
+  })
+}

src/views/admin/RepairView.vue

@@ -98,7 +98,7 @@
         <a-descriptions-item label='状态'>{{ mdl.statusName }}</a-descriptions-item>
       </a-descriptions>
     </a-card>
-    <a-card v-if='mdl.status >= 7 && mdl.status != 11' style='margin-top: 10px' :bordered='false' title='维修反馈'>
+    <a-card v-if='mdl.status >= 5 && mdl.status != 11' style='margin-top: 10px' :bordered='false' title='维修反馈'>
       <a-descriptions>
         <a-descriptions-item label='维修员'>{{ mdl.repairUserName }}</a-descriptions-item>
         <a-descriptions-item label='故障类型'>{{ mdl.failureTypeName }}</a-descriptions-item>

src/views/admin/repair/RepairHistory.vue

@@ -0,0 +1,164 @@
+<template>
+  <a-card :bordered='false'>
+    <div class='table-page-search-wrapper'>
+      <a-form layout='inline'>
+        <a-row :gutter='48'>
+          <a-col :md='5' :sm='15'>
+            <a-form-item label='工单编号'>
+              <a-input placeholder='' v-model='queryParam.bxorder' />
+            </a-form-item>
+          </a-col>
+          <a-col :md='5' :sm='15'>
+            <a-form-item label='报修人姓名'>
+              <a-input placeholder='' v-model='queryParam.name' />
+            </a-form-item>
+          </a-col>
+          <a-col :md='5' :sm='15'>
+            <a-form-item label='报修人电话'>
+              <a-input placeholder='' v-model='queryParam.tel' />
+            </a-form-item>
+          </a-col>
+          <a-col :md='5' :sm='15'>
+            <a-form-item label='设备类型'>
+              <a-input placeholder='' v-model='queryParam.gztype' />
+            </a-form-item>
+          </a-col>
+          <a-col :md='5' :sm='15'>
+            <a-form-item label='设备名称'>
+              <a-input placeholder='' v-model='queryParam.gzname' />
+            </a-form-item>
+          </a-col>
+          <a-col :md='5' :sm='15'>
+            <a-form-item label='地点'>
+              <a-input placeholder='' v-model='queryParam.addr' />
+            </a-form-item>
+          </a-col>
+          <a-col :md='7' :sm='15'>
+            <a-form-item label='时间范围'>
+              <a-range-picker v-model='timeRange' @change='selectTime' />
+            </a-form-item>
+          </a-col>
+          <a-col :md='8' :sm='24'>
+                <span class='table-page-search-submitButtons'>
+                  <a-button type='primary' @click='$refs.table.refresh(true)'>查询</a-button>
+                  <a-button style='margin-left: 8px' @click='reset'>重置</a-button>
+                </span>
+          </a-col>
+        </a-row>
+      </a-form>
+    </div>
+    <s-table
+      size='default'
+      ref='table'
+      rowKey='id'
+      :columns='columns'
+      :data='loadData'
+    >
+      <span slot='action' slot-scope='text, record'>
+        <a @click='handleView(record.bxid)'>详情</a>
+      </span>
+    </s-table>
+  </a-card>
+</template>
+
+<script>
+import { STable } from '@/components'
+import { list } from '@/api/admin/repair/repairHistory'
+
+
+export default {
+  name: 'TableList',
+  components: {
+    STable
+  },
+  data() {
+    return {
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 5 }
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 16 }
+      },
+      form: this.$form.createForm(this),
+      mdl: {},
+      // 高级搜索 展开/关闭
+      advanced: false,
+      // 查询参数
+      queryParam: {},
+      timeRange: '',
+      // 表头
+      columns: [
+        {
+          title: '工单编号',
+          dataIndex: 'bxorder'
+        },
+        {
+          title: '报修人姓名',
+          dataIndex: 'name'
+        },
+        {
+          title: '报修人电话',
+          dataIndex: 'tel'
+        },
+        {
+          title: '报修时间',
+          dataIndex: 'bxsj'
+        },
+        {
+          title: '设备类型',
+          dataIndex: 'gztype'
+        },
+        {
+          title: '设备名称',
+          dataIndex: 'gzname'
+        },
+        {
+          title: '地点',
+          dataIndex: 'addr'
+        },
+        {
+          title: '操作',
+          width: '200px',
+          dataIndex: 'action',
+          scopedSlots: { customRender: 'action' }
+        }
+      ],
+      // 加载数据方法 必须为 Promise 对象
+      loadData: parameter => {
+        return list(Object.assign(parameter, this.queryParam))
+      },
+      selectedRowKeys: [],
+      selectedRows: []
+    }
+  },
+  filters: {},
+  created() {
+  },
+  methods: {
+    reset() {
+      this.queryParam = {}
+      this.timeRange = ''
+      this.$refs.table.refresh(true)
+    },
+    onSelectChange(selectedRowKeys, selectedRows) {
+      this.selectedRowKeys = selectedRowKeys
+      this.selectedRows = selectedRows
+    },
+    handleOk() {
+      this.$refs.table.refresh(true)
+      console.log('handleSaveOk')
+    },
+    handleView(repairId) {
+      this.$router.push({ name: 'RepairHistoryShow', query: { repairId: repairId } })
+    },
+    // 切换时间
+    selectTime (value, dateString) {
+      this.queryParam.beginTime = dateString[0]
+      this.queryParam.endTime = dateString[1]
+    }
+  },
+  watch: {}
+}
+</script>

src/views/admin/repair/RepairHistoryShow.vue

@@ -0,0 +1,191 @@
+<template>
+  <div>
+    <!-- 维修信息 -->
+    <a-card style='margin-top: 10px' :bordered='false' title='报修信息'>
+      <a-descriptions>
+        <a-descriptions-item label='维修单号'>{{ mdl.bxorder }}</a-descriptions-item>
+        <a-descriptions-item label='报修人姓名'>{{ mdl.name }}</a-descriptions-item>
+        <a-descriptions-item label='联系电话'>{{ mdl.tel }}</a-descriptions-item>
+        <a-descriptions-item label='故障类型'>{{ mdl.gztype }} / {{ mdl.gzname }}</a-descriptions-item>
+        <a-descriptions-item label='报修地点'>{{ mdl.addr }} / {{ mdl.floor }}</a-descriptions-item>
+        <a-descriptions-item label='门牌号（地点）'>{{ mdl.fjh }}</a-descriptions-item>
+        <a-descriptions-item label='故障描述'>{{ mdl.desc }}</a-descriptions-item>
+        <a-descriptions-item label='报修时间'>{{ mdl.bxsj }}</a-descriptions-item>
+      </a-descriptions>
+      <a-descriptions>
+        <a-descriptions-item label='报修图片'>
+          <div style='margin-left: 30px' class='clearfix'>
+            <div class='fileList'>
+              <img @click='openFile($event)' class='file image' :src='item.url' v-for='item in files.repair'
+                   v-if="item.fileType== 'image'" />
+              <video class='file video' :src='item.url' v-for='item in files.repair'
+                     v-if="item.fileType== 'video'" controls />
+            </div>
+          </div>
+
+        </a-descriptions-item>
+      </a-descriptions>
+    </a-card>
+    <a-card style='margin-top: 10px' :bordered='false' title='维修反馈'>
+      <a-descriptions>
+        <a-descriptions-item label='维修员'>{{ mdl.wxrname }}</a-descriptions-item>
+        <a-descriptions-item label='维修人电话'>{{ mdl.wxrtel }}</a-descriptions-item>
+      </a-descriptions>
+      <a-descriptions>
+        <a-descriptions-item label='处置结果'>{{ mdl.bz }}</a-descriptions-item>
+      </a-descriptions>
+      <a-descriptions>
+        <a-descriptions-item label='反馈图片'>
+          <div style='margin-left: 30px' class='clearfix'>
+            <div class='fileList'>
+              <img @click='openFile($event)' class='file image' :src='item.url' v-for='item in files.feedback'
+                   v-if="item.fileType== 'image'" />
+              <video class='file video' :src='item.url' v-for='item in files.feedback'
+                     v-if="item.fileType== 'video'" controls />
+            </div>
+          </div>
+
+        </a-descriptions-item>
+      </a-descriptions>
+    </a-card>
+    <a-card style='margin-top: 10px' :bordered='false' title='服务评价'>
+      <a-descriptions>
+        <a-descriptions-item label='评分'>{{ mdl.pf }}</a-descriptions-item>
+        <a-descriptions-item label='评价'>{{ mdl.pj }}</a-descriptions-item>
+      </a-descriptions>
+    </a-card>
+
+    <!-- 操作 -->
+    <a-card style='margin-top: 10px' :bordered='false' title='维修日志'>
+      <a-table rowKey='id' :columns='columns' :dataSource='dataSource' :pagination='false'>
+      </a-table>
+    </a-card>
+  </div>
+</template>
+
+<script>
+import { getInfo } from '@/api/admin/repair/repairHistory'
+
+export default {
+  name: 'BaseForm',
+  data() {
+    return {
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 6 }
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 16 }
+      },
+      // 表头
+      columns: [
+        {
+          title: '操作人',
+          dataIndex: 'czry'
+        },
+        {
+          title: '备注',
+          dataIndex: 'bz'
+        },
+        {
+          title: '操作时间',
+          dataIndex: 'czsj'
+        }
+      ],
+      dataSource: [],
+      mdl: {},
+      // form
+      form: this.$form.createForm(this),
+      files: {
+        repair: [],
+        feedback: []
+      },
+      nowStep: 0
+    }
+  },
+  filters: {},
+  created() {
+    this.handleInit()
+  },
+  methods: {
+    handleInit() {
+      let _this = this
+      const { repairId } = this.$route.query
+      if (repairId) {
+        const data = {
+          'bxid': repairId
+        }
+        getInfo(data).then(record => {
+          _this.mdl = record.data
+          console.log(record)
+          // 维修记录
+          if (record.data.logs.length > 0) {
+            _this.dataSource = record.data.logs
+          }
+          let _files = {
+            repair: [],
+            feedback: []
+          }
+          // 维修图片和反馈图片
+          if (record.data.pic !== null) {
+            _files.repair.push({
+              url: process.env.VUE_APP_MODEL_BASE_URL + record.data.pic,
+              fileType: 'image'
+            })
+          }
+          if (record.data.wxpic !== null && record.data.wxpic !== '/profile') {
+            _files.feedback.push({
+              url: process.env.VUE_APP_MODEL_BASE_URL + record.data.wxpic,
+              fileType: 'image'
+            })
+          }
+          console.log(_files)
+          _this.files = _files
+          // console.log(_this.files)
+        })
+      }
+    },
+    // handler
+    openFile(e) {
+      window.open(e.target.currentSrc)
+    }
+  }
+}
+
+</script>
+
+<style scoped>
+/* you can make up upload button and sample style by using stylesheets */
+.ant-upload-select-picture-card i {
+  font-size: 32px;
+  color: #999;
+}
+
+.ant-upload-select-picture-card .ant-upload-text {
+  margin-top: 8px;
+  color: #666;
+}
+
+.fileList {
+  display: flex;
+  justify-content: flex-start;
+  align-content: flex-start;
+  flex-wrap: wrap;
+}
+
+.fileList .file {
+  margin-right: 20px;
+  margin-bottom: 20px;
+}
+
+.fileList .image {
+  width: 100px;
+  height: 100px;
+}
+
+.fileList .video {
+  width: 160px;
+  height: 100px;
+}
+</style>