Blame view

src/views/work/printRepairDetailList.vue 6.48 KB
b25b036d   wuxw   v1.9 优化日期
1
  <template>
72de60dc   wuxw   优化报修完成
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
    <div class="print-repair-detail-container">
        <el-row :gutter="20" style="width:100%">
          <el-col :span="8">
            <span>{{ $t('printRepairDetail.repairId') }}</span>{{ printRepairDetailInfo.repairId }}
          </el-col>
          <el-col :span="8">
            <span></span>
          </el-col>
          <el-col :span="8">
            <span>{{ $t('printRepairDetail.printTime') }}</span>{{ nowTime }}
          </el-col>
        </el-row>
  
        <table border="1" class="margin-top" style="margin-bottom: 0;width:100%; border-collapse: collapse;">
          <thead>
            <tr>
              <th colspan="6" style="text-align: center;">{{ $t('printRepairDetail.repairInfo') }}</th>
            </tr>
            <tr>
              <th>{{ $t('printRepairDetail.repairName') }}</th>
              <th>{{ $t('printRepairDetail.tel') }}</th>
              <th>{{ $t('printRepairDetail.location') }}</th>
              <th>{{ $t('printRepairDetail.context') }}</th>
              <th v-if="printRepairDetailInfo.maintenanceType">{{ $t('printRepairDetail.maintenanceType') }}</th>
              <th v-if="printRepairDetailInfo.maintenanceType === '1001'">{{ $t('printRepairDetail.repairMaterials') }}</th>
              <th v-if="printRepairDetailInfo.maintenanceType === '1001'" colspan="3">{{ $t('printRepairDetail.repairFee') }}</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>{{ printRepairDetailInfo.repairName }}</td>
              <td>{{ printRepairDetailInfo.tel }}</td>
              <td>{{ printRepairDetailInfo.location }}</td>
              <td>{{ printRepairDetailInfo.context }}</td>
              <td v-if="printRepairDetailInfo.maintenanceType">{{ printRepairDetailInfo.maintenanceType }}</td>
              <td v-if="printRepairDetailInfo.maintenanceType === '1001'">{{ printRepairDetailInfo.repairMaterials }}</td>
              <td v-if="printRepairDetailInfo.maintenanceType === '1001'" colspan="3">{{ printRepairDetailInfo.repairFee }}</td>
            </tr>
          </tbody>
        </table>
  
        <table border="1" style="width:100%; border-collapse: collapse;">
          <thead>
            <tr>
              <th colspan="6" style="text-align: center;">{{ $t('printRepairDetail.workflow') }}</th>
            </tr>
            <tr>
              <th style="text-align: center;">{{ $t('printRepairDetail.serialNumber') }}</th>
              <th style="text-align: center;">{{ $t('printRepairDetail.handler') }}</th>
              <th style="text-align: center;">{{ $t('printRepairDetail.status') }}</th>
              <th style="text-align: center;">{{ $t('printRepairDetail.processTime') }}</th>
              <th style="text-align: center;">{{ $t('printRepairDetail.timeConsuming') }}</th>
              <th style="text-align: center;">{{ $t('printRepairDetail.comment') }}</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in printRepairDetailInfo.repairUsers" :key="index">
              <td style="text-align: center;">{{ index + 1 }}</td>
              <td style="text-align: center;">{{ item.staffName }}</td>
              <td style="text-align: center;">{{ item.stateName }}</td>
              <td style="text-align: center;">{{ item.startTime }}</td>
              <td style="text-align: center;">{{ item.duration }}</td>
              <td style="text-align: center;">{{ item.context }}</td>
            </tr>
            <tr>
              <td colspan="6">{{ printRepairDetailInfo.description }}</td>
            </tr>
            <tr>
              <td colspan="2" style="height:60px; text-align: center;">{{ $t('printRepairDetail.repairerSign') }}</td>
              <td colspan="2" style="height:60px; text-align: center;">{{ $t('printRepairDetail.customerSign') }}</td>
            </tr>
          </tbody>
        </table>
  
        <div id="print-btn" style="margin-top:20px">
          <el-button type="primary" class="float-right" @click="_printPurchaseApplyDiv">
            {{ $t('common.print') }}
          </el-button>
          <el-button type="warning" class="float-right" style="margin-right:20px" @click="_closePage">
            {{ $t('common.cancel') }}
          </el-button>
        </div>
    </div>
  </template>
  
  <script>
  import { getCommunityId } from '@/api/community/communityApi'
  import { listOwnerRepairs, listRepairStaffs } from '@/api/work/printRepairDetailApi'
  
  export default {
    name: 'PrintRepairDetailList',
    data() {
      return {
        printRepairDetailInfo: {
          repairId: '',
          repairTypeName: '',
          appointmentTime: '',
          repairName: '',
          tel: '',
          repairObjName: '',
          context: '',
          repairUsers: [],
          maintenanceType: '',
          repairMaterials: '',
          repairFee: '',
          description: ''
        },
        printFlag: '0',
        nowTime: '',
        communityId: ''
      }
    },
    created() {
      this.communityId = getCommunityId()
      this._initPrintRepairDetailDateInfo()
      const myDate = new Date()
      this.nowTime = myDate.toLocaleDateString()
    },
    methods: {
      _initPrintRepairDetailDateInfo() {
        const _repairId = this.$route.query.repairId
        const _repairType = this.$route.query.repairType
        const param = {
          page: 1,
          row: 1,
          repairId: _repairId,
          communityId: this.communityId,
          repairType: _repairType
        }
  
        listOwnerRepairs(param)
          .then(response => {
            const _repairDetailInfo = response.data[0]
            Object.assign(this.printRepairDetailInfo, _repairDetailInfo)
            this._loadRepairUser()
          })
          .catch(error => {
            console.error('请求失败处理:', error)
          })
      },
      _loadRepairUser() {
        const param = {
          page: 1,
          row: 100,
          communityId: this.communityId,
          repairId: this.printRepairDetailInfo.repairId
        }
  
        listRepairStaffs(param)
          .then(response => {
            this.printRepairDetailInfo.repairUsers = response.data
          })
          .catch(error => {
            console.error('请求失败处理:', error)
          })
      },
      _printPurchaseApplyDiv() {
        this.printFlag = '1'
        document.getElementById('print-btn').style.display = 'none'
        window.print()
        window.opener = null
        window.close()
      },
      _closePage() {
        window.opener = null
        window.close()
      }
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .print-repair-detail-container {
    padding: 20px;
  
    .margin-top {
      margin-top: 20px;
    }
  
    .float-right {
      float: right;
    }
  
    table {
      width: 100%;
      border: 1px solid #ebeef5;
      th, td {
        padding: 12px 0;
        border: 1px solid #ebeef5;
      }
    }
  }
  </style>