|
@@ -0,0 +1,178 @@
|
|
|
+<template>
|
|
|
+ <div class="lookDetail">
|
|
|
+ <div class="left">
|
|
|
+ <div class="list-item">
|
|
|
+ <div class="formContent-item_title">工单信息</div>
|
|
|
+ <el-form ref="form" label-width="110px">
|
|
|
+ <template v-for="(item, index) in formLook">
|
|
|
+ <el-col :span="!!item.span ? item.span : 12" :key="index">
|
|
|
+ <el-form-item :label="item.label">
|
|
|
+ <template v-if="item.slot">
|
|
|
+ <template v-if="item.slot === 'orderType'">
|
|
|
+ <span v-if="thisItem['orderType'] == 1">业主报修</span>
|
|
|
+ <span v-else>内部报修</span>
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ {{ thisItem[item.prop] || '--' }}
|
|
|
+ </template>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </template>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ <div class="list-item">
|
|
|
+ <div class="formContent-item_title">处理信息</div>
|
|
|
+ <el-form ref="form" label-width="110px">
|
|
|
+ <template v-for="(item, index) in formLook2">
|
|
|
+ <el-col :span="!!item.span ? item.span : 12" :key="index">
|
|
|
+ <el-form-item :label="item.label">
|
|
|
+ <template v-if="item.slot">
|
|
|
+ <template v-if="item.slot === 'urgencyDegree'">
|
|
|
+ <span v-if="thisItem['urgencyDegree'] == 2" class="redText">紧急</span>
|
|
|
+ <span v-else class="greenText">普通</span>
|
|
|
+ </template>
|
|
|
+ <template v-if="item.slot === 'handleResult'">
|
|
|
+ <span v-if="thisItem['handleResult'] == 2" class="redText">无法处理</span>
|
|
|
+ <span v-else class="greenText">成功处理</span>
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ {{ thisItem[item.prop] || '--' }}
|
|
|
+ </template>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </template>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="right">
|
|
|
+ <div class="list-item">
|
|
|
+ <div class="formContent-item_title">工单进度追踪</div>
|
|
|
+ <div style="height:300px">
|
|
|
+ <el-steps direction="vertical" :active="1">
|
|
|
+ <el-step title="步骤 1" icon="el-icon-full-screen"></el-step>
|
|
|
+ <el-step title="步骤 2" icon="el-icon-full-screen"></el-step>
|
|
|
+ <el-step title="步骤 3" icon="el-icon-full-screen" description="这是一段很长很长很长的描述性文字"></el-step>
|
|
|
+ </el-steps>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script >
|
|
|
+export default {
|
|
|
+ props: ['params'],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ formLook: [
|
|
|
+ {
|
|
|
+ label: '所属社区:',
|
|
|
+ prop: 'communityName'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '地址:',
|
|
|
+ prop: 'address'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '报修人:',
|
|
|
+ prop: 'repairName'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '手机号:',
|
|
|
+ prop: 'repairPhone'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '报修时间:',
|
|
|
+ prop: 'createDate'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '工单类型:',
|
|
|
+ prop: 'orderType',
|
|
|
+ slot: 'orderType'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '报修内容:',
|
|
|
+ prop: 'repairContent',
|
|
|
+ span: 24
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '图片/视频:',
|
|
|
+ prop: 'repairFile',
|
|
|
+ span: 24
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ formLook2: [
|
|
|
+ {
|
|
|
+ label: '维修人员:',
|
|
|
+ prop: 'handleName'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '紧急程度:',
|
|
|
+ prop: 'urgencyDegree',
|
|
|
+ slot: 'urgencyDegree'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '预期完成时间:',
|
|
|
+ prop: 'expectCompletionTime'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '实际完成时间:',
|
|
|
+ prop: 'completionTime'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '处理结果:',
|
|
|
+ prop: 'handleResult',
|
|
|
+ slot: 'handleResult',
|
|
|
+ span: 24
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '图片/视频:',
|
|
|
+ prop: 'handleFile',
|
|
|
+ span: 24
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ thisItem: {}
|
|
|
+ };
|
|
|
+ },
|
|
|
+
|
|
|
+ methods: {
|
|
|
+ getDatali(id) {
|
|
|
+ this.$http
|
|
|
+ .get('/sc-community/workOrder/find/' + id)
|
|
|
+ .then(({ data, msg, status }) => {
|
|
|
+ if (status == 0) {
|
|
|
+ this.thisItem = data;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(() => {});
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.getDatali(this.params.id);
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+@import '@assets/css/public-style.scss';
|
|
|
+.lookDetail {
|
|
|
+ /deep/ .el-form-item__label,
|
|
|
+ /deep/.el-form-item__content {
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ .formContent-item_title {
|
|
|
+ clear: both;
|
|
|
+ }
|
|
|
+ .left {
|
|
|
+ width: 600px;
|
|
|
+ }
|
|
|
+ .right {
|
|
|
+ width: calc(100% - 620px);
|
|
|
+ }
|
|
|
+ .list-item {
|
|
|
+ clear: inherit;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|