|
|
@@ -1,121 +1,86 @@
|
|
|
<template>
|
|
|
- <div>
|
|
|
- <zj-form-container style="margin-bottom:40px">
|
|
|
- <!-- 完工明细 -->
|
|
|
- <zj-form-module v-if="!look" title="完工明细">
|
|
|
- <zj-table
|
|
|
- ref="tableEl"
|
|
|
- :isDrop="true"
|
|
|
- :columns="completionDetailColumns"
|
|
|
- :tableData="completionDetailData"
|
|
|
- :tableAttributes="{
|
|
|
- border: true
|
|
|
- }"
|
|
|
- ></zj-table>
|
|
|
- <div class="fr">
|
|
|
- <el-pagination
|
|
|
- @size-change="handleSizeChange"
|
|
|
- @current-change="handleCurrentChange"
|
|
|
- :current-page="pageNum"
|
|
|
- :page-sizes="[10, 20, 30, 50]"
|
|
|
- :page-size="pageSize"
|
|
|
- layout="total, sizes, prev, pager, next, jumper"
|
|
|
- :total="listTotal"
|
|
|
- ></el-pagination>
|
|
|
- </div>
|
|
|
- </zj-form-module>
|
|
|
- <!-- 内外机条码信息 -->
|
|
|
- <zj-form-module v-if="look" title="内外机条码信息" class="header_right_btn">
|
|
|
- <div slot="header" class="btn">
|
|
|
- <el-button v-if="orderDetailFiles.length" type="primary" size="mini" @click="imgVisible = true"> 预览图片 </el-button>
|
|
|
- </div>
|
|
|
- <zj-table
|
|
|
- ref="tableEl"
|
|
|
- :isDrop="true"
|
|
|
- :columns="barcodeColumns"
|
|
|
- :tableData="barcodeData"
|
|
|
- :tableAttributes="{
|
|
|
+ <zj-page-container>
|
|
|
+ <zj-page-fill class="neibuview">
|
|
|
+ <zj-form-container style="margin-bottom:40px">
|
|
|
+ <!-- 完工明细 -->
|
|
|
+ <zj-form-module v-if="!look" title="完工明细">
|
|
|
+ <zj-table ref="tableEl" :isDrop="true" :columns="completionDetailColumns" :tableData="completionDetailData"
|
|
|
+ :tableAttributes="{
|
|
|
+ border: true
|
|
|
+ }"></zj-table>
|
|
|
+ <div class="fr">
|
|
|
+ <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
|
|
|
+ :page-sizes="[10, 20, 30, 50]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
|
|
|
+ :total="listTotal"></el-pagination>
|
|
|
+ </div>
|
|
|
+ </zj-form-module>
|
|
|
+ <!-- 内外机条码信息 -->
|
|
|
+ <zj-form-module v-if="look" title="内外机条码信息" class="header_right_btn">
|
|
|
+ <div slot="header" class="btn">
|
|
|
+ <el-button v-if="orderDetailFiles.length" type="primary" size="mini" @click="imgVisible = true"> 预览图片
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ <zj-table ref="tableEl" :isDrop="true" :columns="barcodeColumns" :tableData="barcodeData" :tableAttributes="{
|
|
|
border: true
|
|
|
- }"
|
|
|
- ></zj-table>
|
|
|
- </zj-form-module>
|
|
|
- <!-- 图片采集信息 -->
|
|
|
- <zj-form-module v-if="look" title="图片采集信息">
|
|
|
- <div class="imgCJ">
|
|
|
- <div v-for="(v, i) in orderDetailFiles" :key="i">
|
|
|
- <el-image
|
|
|
- v-if="checkFileType(v.filePath) !=='mp4'"
|
|
|
- style="width: 210px; height: 280px"
|
|
|
- :src="$imageUrl + v.filePath"
|
|
|
- :preview-src-list="[$imageUrl + v.filePath]"
|
|
|
- >
|
|
|
- <div slot="error" style="height: 100%; display: flex; justify-content: center; align-items: center">
|
|
|
- <i>暂无图片</i>
|
|
|
+ }"></zj-table>
|
|
|
+ </zj-form-module>
|
|
|
+ <!-- 图片采集信息 -->
|
|
|
+ <zj-form-module v-if="look" title="图片采集信息">
|
|
|
+ <div class="imgCJ">
|
|
|
+ <div v-for="(v, i) in orderDetailFiles" :key="i">
|
|
|
+ <el-image v-if="checkFileType(v.filePath) !== 'mp4'" style="width: 210px; height: 280px"
|
|
|
+ :src="$imageUrl + v.filePath" :preview-src-list="[$imageUrl + v.filePath]">
|
|
|
+ <div slot="error" style="height: 100%; display: flex; justify-content: center; align-items: center">
|
|
|
+ <i>暂无图片</i>
|
|
|
+ </div>
|
|
|
+ </el-image>
|
|
|
+ <video v-else width="210" height="280" controls>
|
|
|
+ <source :src="$imageUrl + v.filePath" />
|
|
|
+ </video>
|
|
|
+ <div class="imgTitle">
|
|
|
+ {{ v.fileName }}
|
|
|
</div>
|
|
|
- </el-image>
|
|
|
- <video v-else width="210" height="280" controls>
|
|
|
- <source :src="$imageUrl + v.filePath" />
|
|
|
- </video>
|
|
|
- <div class="imgTitle">
|
|
|
- {{ v.fileName }}
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </zj-form-module>
|
|
|
- <!-- 其他信息 -->
|
|
|
- <zj-form-module
|
|
|
- v-if="look"
|
|
|
- title="其他信息"
|
|
|
- label-width="120px"
|
|
|
- :formData="formData"
|
|
|
- :formItems="otherFormItems"
|
|
|
- :column="1"
|
|
|
- >
|
|
|
- </zj-form-module>
|
|
|
- </zj-form-container>
|
|
|
- <div v-if="look" class="fixBtnStyle">
|
|
|
- <el-button size="mini" type="info" @click="look = false">关闭</el-button>
|
|
|
- <el-button v-if="isCancel && $restrict('discardCollectionData')" size="mini" @click="handlerCancelData" type="primary"
|
|
|
- >作废采集数据</el-button
|
|
|
- >
|
|
|
- </div>
|
|
|
- <el-dialog
|
|
|
- title="图片预览"
|
|
|
- :visible.sync="imgVisible"
|
|
|
- :close-on-click-modal="false"
|
|
|
- :modal-append-to-body="false"
|
|
|
- width="50%"
|
|
|
- top="8vh"
|
|
|
- @close="imgVisible = false"
|
|
|
- >
|
|
|
- <div>
|
|
|
- <div class="box">
|
|
|
- <div style="min-height: 200px;" class="flex" v-for="(v, i) in orderDetailFiles" :key="i">
|
|
|
- <el-image
|
|
|
- v-if="checkFileType(v.filePath) !=='mp4'"
|
|
|
- style="width: 720px; height: auto"
|
|
|
- :src="$imageUrl + v.filePath"
|
|
|
- :preview-src-list="[$imageUrl + v.filePath]"
|
|
|
- >
|
|
|
- <div slot="error" style="width: 720px;height: auto; display: flex; justify-content: center; align-items: center">
|
|
|
- <i>暂无图片</i>
|
|
|
- </div>
|
|
|
- </el-image>
|
|
|
- <video v-else width="720" height="960" controls>
|
|
|
- <source :src="$imageUrl + v.filePath" />
|
|
|
- </video>
|
|
|
- <div class="imgTitle" style=" flex: 0 0 200px; margin-right: 20px; color: #f00">
|
|
|
- {{ v.fileName }}
|
|
|
- <div style=" margin-top: 20px;">
|
|
|
+ </zj-form-module>
|
|
|
+ <!-- 其他信息 -->
|
|
|
+ <zj-form-module v-if="look" title="其他信息" label-width="120px" :formData="formData" :formItems="otherFormItems"
|
|
|
+ :column="1">
|
|
|
+ </zj-form-module>
|
|
|
+ </zj-form-container>
|
|
|
+ <div v-if="look" class="fixBtnStyle">
|
|
|
+ <el-button size="mini" type="info" @click="look = false">关闭</el-button>
|
|
|
+ <el-button v-if="isCancel && $restrict('discardCollectionData')" size="mini" @click="handlerCancelData"
|
|
|
+ type="primary">作废采集数据</el-button>
|
|
|
+ </div>
|
|
|
+ <el-dialog title="图片预览" :visible.sync="imgVisible" :close-on-click-modal="false" :modal-append-to-body="false"
|
|
|
+ width="50%" top="8vh" @close="imgVisible = false">
|
|
|
+ <div>
|
|
|
+ <div class="box">
|
|
|
+ <div style="min-height: 200px;" class="flex" v-for="(v, i) in orderDetailFiles" :key="i">
|
|
|
+ <el-image v-if="checkFileType(v.filePath) !== 'mp4'" style="width: 720px; height: auto"
|
|
|
+ :src="$imageUrl + v.filePath" :preview-src-list="[$imageUrl + v.filePath]">
|
|
|
+ <div slot="error"
|
|
|
+ style="width: 720px;height: auto; display: flex; justify-content: center; align-items: center">
|
|
|
+ <i>暂无图片</i>
|
|
|
+ </div>
|
|
|
+ </el-image>
|
|
|
+ <video v-else width="720" height="960" controls>
|
|
|
+ <source :src="$imageUrl + v.filePath" />
|
|
|
+ </video>
|
|
|
+ <div class="imgTitle" style=" flex: 0 0 200px; margin-right: 20px; color: #f00">
|
|
|
+ {{ v.fileName }}
|
|
|
+ <div style=" margin-top: 20px;">
|
|
|
<span v-if="v.fileType == 1">内机条码: {{ v.code }}</span>
|
|
|
<span v-if="v.fileType == 3">外机机条码: {{ v.code }}</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </el-dialog>
|
|
|
- </div>
|
|
|
+ </el-dialog>
|
|
|
+ </zj-page-fill>
|
|
|
+ </zj-page-container>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
@@ -244,7 +209,7 @@ export default {
|
|
|
isCancel: false,
|
|
|
dispatchStatus: '',
|
|
|
imgVisible: false,
|
|
|
- status: null
|
|
|
+ status: null
|
|
|
}
|
|
|
},
|
|
|
computed: {
|
|
|
@@ -273,7 +238,7 @@ export default {
|
|
|
查看
|
|
|
</el-button>
|
|
|
{row.status == 1 ? (
|
|
|
- <el-button size="mini" type="text" onClick={async () => {}}>
|
|
|
+ <el-button size="mini" type="text" onClick={async () => { }}>
|
|
|
结算单
|
|
|
</el-button>
|
|
|
) : null}
|
|
|
@@ -342,12 +307,12 @@ export default {
|
|
|
{row.type == 'ALL'
|
|
|
? '一体机'
|
|
|
: row.type == 'INSIDE'
|
|
|
- ? '内机'
|
|
|
- : row.type == 'OUT'
|
|
|
- ? '外机'
|
|
|
- : row.type == 'INSIDE_OUT'
|
|
|
- ? '一内一外'
|
|
|
- : ''}
|
|
|
+ ? '内机'
|
|
|
+ : row.type == 'OUT'
|
|
|
+ ? '外机'
|
|
|
+ : row.type == 'INSIDE_OUT'
|
|
|
+ ? '一内一外'
|
|
|
+ : ''}
|
|
|
</div>
|
|
|
)
|
|
|
}
|
|
|
@@ -367,7 +332,7 @@ export default {
|
|
|
render: (h, { row, column, $index }) => {
|
|
|
return (
|
|
|
<div style="padding-left:6px">
|
|
|
- {row.mainWorkerName}{row.assistWorkerName?',': ''}{row.assistWorkerName}
|
|
|
+ {row.mainWorkerName}{row.assistWorkerName ? ',' : ''}{row.assistWorkerName}
|
|
|
</div>
|
|
|
)
|
|
|
}
|
|
|
@@ -383,12 +348,12 @@ export default {
|
|
|
{row.status == 0
|
|
|
? '未采集'
|
|
|
: row.status == 1
|
|
|
- ? '已采集'
|
|
|
- : row.status == 2
|
|
|
- ? '作废'
|
|
|
- : row.status == 3
|
|
|
- ? '临时保存'
|
|
|
- : ''}
|
|
|
+ ? '已采集'
|
|
|
+ : row.status == 2
|
|
|
+ ? '作废'
|
|
|
+ : row.status == 3
|
|
|
+ ? '临时保存'
|
|
|
+ : ''}
|
|
|
</div>
|
|
|
)
|
|
|
}
|
|
|
@@ -464,28 +429,28 @@ export default {
|
|
|
prop: 'insidePassword'
|
|
|
}
|
|
|
},
|
|
|
- ...(()=>{
|
|
|
- return [3,4].includes(this.status) ?[{
|
|
|
- columnAttributes: {
|
|
|
- label: '图片',
|
|
|
- prop: ''
|
|
|
- },
|
|
|
- render: (h, { row, column, $index }) => {
|
|
|
- return (
|
|
|
- <div style="padding-left:6px">
|
|
|
- <el-image
|
|
|
- style="width: 210px; height: 280px"
|
|
|
- src={ row.path ? this.$imageUrl + row.path : ''}
|
|
|
- preview-src-list={ row.path ? [this.$imageUrl + row.path] : []}
|
|
|
- >
|
|
|
- <div slot="error" style="height: 100%; display: flex; justify-content: center; align-items: center">
|
|
|
- <i>暂无图片</i>
|
|
|
- </div>
|
|
|
- </el-image>
|
|
|
- </div>
|
|
|
- )
|
|
|
- }
|
|
|
- }] : []
|
|
|
+ ...(() => {
|
|
|
+ return [3, 4].includes(this.status) ? [{
|
|
|
+ columnAttributes: {
|
|
|
+ label: '图片',
|
|
|
+ prop: ''
|
|
|
+ },
|
|
|
+ render: (h, { row, column, $index }) => {
|
|
|
+ return (
|
|
|
+ <div style="padding-left:6px">
|
|
|
+ <el-image
|
|
|
+ style="width: 210px; height: 280px"
|
|
|
+ src={row.path ? this.$imageUrl + row.path : ''}
|
|
|
+ preview-src-list={row.path ? [this.$imageUrl + row.path] : []}
|
|
|
+ >
|
|
|
+ <div slot="error" style="height: 100%; display: flex; justify-content: center; align-items: center">
|
|
|
+ <i>暂无图片</i>
|
|
|
+ </div>
|
|
|
+ </el-image>
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+ }
|
|
|
+ }] : []
|
|
|
})()
|
|
|
|
|
|
]
|
|
|
@@ -543,19 +508,19 @@ export default {
|
|
|
return url.substring(url.lastIndexOf('.') + 1)
|
|
|
},
|
|
|
//作废采集数据
|
|
|
- handlerCancelData(){
|
|
|
- this.$confirm('此操作将作废已采集数据, 是否继续?', '提示', {
|
|
|
- confirmButtonText: '是',
|
|
|
- cancelButtonText: '否',
|
|
|
- type: 'warning',
|
|
|
- closeOnClickModal:false,
|
|
|
- closeOnPressEscape:false,
|
|
|
- showClose:false
|
|
|
- }).then(() => {
|
|
|
- this.handlerCancel()
|
|
|
- }).catch(() => {
|
|
|
+ handlerCancelData() {
|
|
|
+ this.$confirm('此操作将作废已采集数据, 是否继续?', '提示', {
|
|
|
+ confirmButtonText: '是',
|
|
|
+ cancelButtonText: '否',
|
|
|
+ type: 'warning',
|
|
|
+ closeOnClickModal: false,
|
|
|
+ closeOnPressEscape: false,
|
|
|
+ showClose: false
|
|
|
+ }).then(() => {
|
|
|
+ this.handlerCancel()
|
|
|
+ }).catch(() => {
|
|
|
|
|
|
- });
|
|
|
+ });
|
|
|
},
|
|
|
async handlerCancel() {
|
|
|
let params = {
|
|
|
@@ -582,42 +547,42 @@ export default {
|
|
|
if (orderType == 'INSTALL' || orderType === 'RECOVERY') {
|
|
|
this.orderDetailId = id //工单采集明细id
|
|
|
let { data } = await orderInstallOverDetail({ id })
|
|
|
- const neiji = []
|
|
|
- const waiji = []
|
|
|
- const neijiqit = []
|
|
|
- const waijiqit = []
|
|
|
- const caiji = []
|
|
|
- const qit = []
|
|
|
- const tshjazqrs = []
|
|
|
+ const neiji = []
|
|
|
+ const waiji = []
|
|
|
+ const neijiqit = []
|
|
|
+ const waijiqit = []
|
|
|
+ const caiji = []
|
|
|
+ const qit = []
|
|
|
+ const tshjazqrs = []
|
|
|
for (let index = 0; index < data.orderDetailFiles.length; index++) {
|
|
|
const el = data.orderDetailFiles[index]
|
|
|
- if (el.fileType == 1) {
|
|
|
- el.code = data.orderInstallDetailCodes.find(k=>k.type == 1)?.code
|
|
|
- neiji.push(el)
|
|
|
- }
|
|
|
- if (el.fileType == 3) {
|
|
|
- el.code = data.orderInstallDetailCodes.find(k=>k.type == 2)?.code
|
|
|
- waiji.push(el)
|
|
|
- }
|
|
|
- if (el.fileType == 4) {
|
|
|
- neijiqit.push(el)
|
|
|
- }
|
|
|
- if (el.fileType == 5) {
|
|
|
- waijiqit.push(el)
|
|
|
- }
|
|
|
- if (![1,3,4,5,21,44].includes(el.fileType)) {
|
|
|
- caiji.push(el)
|
|
|
- }
|
|
|
- if (el.fileType == 21) {
|
|
|
- qit.push(el)
|
|
|
- }
|
|
|
- if(el.fileType == 44){
|
|
|
- tshjazqrs.push(el)
|
|
|
- }
|
|
|
+ if (el.fileType == 1) {
|
|
|
+ el.code = data.orderInstallDetailCodes.find(k => k.type == 1)?.code
|
|
|
+ neiji.push(el)
|
|
|
+ }
|
|
|
+ if (el.fileType == 3) {
|
|
|
+ el.code = data.orderInstallDetailCodes.find(k => k.type == 2)?.code
|
|
|
+ waiji.push(el)
|
|
|
+ }
|
|
|
+ if (el.fileType == 4) {
|
|
|
+ neijiqit.push(el)
|
|
|
+ }
|
|
|
+ if (el.fileType == 5) {
|
|
|
+ waijiqit.push(el)
|
|
|
+ }
|
|
|
+ if (![1, 3, 4, 5, 21, 44].includes(el.fileType)) {
|
|
|
+ caiji.push(el)
|
|
|
+ }
|
|
|
+ if (el.fileType == 21) {
|
|
|
+ qit.push(el)
|
|
|
+ }
|
|
|
+ if (el.fileType == 44) {
|
|
|
+ tshjazqrs.push(el)
|
|
|
+ }
|
|
|
}
|
|
|
- this.orderDetailFiles = [...neiji,...waiji,...neijiqit,...waijiqit,...caiji,...qit,...tshjazqrs]
|
|
|
-
|
|
|
- data.orderInstallDetailCodes.forEach(v=>{
|
|
|
+ this.orderDetailFiles = [...neiji, ...waiji, ...neijiqit, ...waijiqit, ...caiji, ...qit, ...tshjazqrs]
|
|
|
+
|
|
|
+ data.orderInstallDetailCodes.forEach(v => {
|
|
|
v.insidePassword = data.insidePassword
|
|
|
})
|
|
|
this.barcodeData = data.orderInstallDetailCodes
|
|
|
@@ -661,14 +626,29 @@ export default {
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
-.fixBtnStyle{
|
|
|
- position:fixed;
|
|
|
- bottom:0;
|
|
|
+.neibuview {
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding-left: 16px;
|
|
|
+
|
|
|
+ ::v-deep .zj-page-fill-scroll {
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding-right: 16px;
|
|
|
+
|
|
|
+ &>div:nth-child(1) {
|
|
|
+ margin-top: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.fixBtnStyle {
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0;
|
|
|
z-index: 2000;
|
|
|
padding: 10px 0 30px;
|
|
|
- width:calc(100vw - 120px);
|
|
|
- background-color:#fff
|
|
|
+ width: calc(100vw - 120px);
|
|
|
+ background-color: #fff
|
|
|
}
|
|
|
+
|
|
|
::v-deep .header_right_btn {
|
|
|
.el-card__header {
|
|
|
div[class='zj-page-container zj-page-container-row'] {
|
|
|
@@ -676,9 +656,11 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.btn {
|
|
|
float: right;
|
|
|
}
|
|
|
+
|
|
|
.flex {
|
|
|
display: flex;
|
|
|
flex-direction: row-reverse;
|
|
|
@@ -688,30 +670,35 @@ export default {
|
|
|
padding-bottom: 30px;
|
|
|
}
|
|
|
|
|
|
-.box{
|
|
|
+.box {
|
|
|
height: calc(100vh - 84px);
|
|
|
padding-bottom: 84px;
|
|
|
overflow-y: auto
|
|
|
}
|
|
|
-::v-deep .el-dialog__wrapper{
|
|
|
+
|
|
|
+::v-deep .el-dialog__wrapper {
|
|
|
position: absolute;
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
}
|
|
|
-::v-deep .el-dialog{
|
|
|
+
|
|
|
+::v-deep .el-dialog {
|
|
|
margin: 0 auto !important;
|
|
|
width: 100% !important;
|
|
|
height: 100% !important;
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
+
|
|
|
.imgCJ {
|
|
|
display: flex;
|
|
|
justify-content: flex-start;
|
|
|
flex-wrap: wrap;
|
|
|
- > div {
|
|
|
+
|
|
|
+ >div {
|
|
|
flex: 0 calc((100% - 210px)/6);
|
|
|
margin-right: 23px;
|
|
|
}
|
|
|
+
|
|
|
.imgTitle {
|
|
|
font-size: 14px;
|
|
|
margin: 10px 0 20px;
|
linwenxin