Переглянути джерело

添加报销单图片预览

huangguoce 2 місяців тому
батько
коміт
c03bc670e6

BIN
src/assets/img/reimbursement/reimbursement1.png


BIN
src/assets/img/reimbursement/reimbursement2.png


+ 11 - 1
src/views/ccpm/reimbursement/info/NewReimbursementForm.vue

@@ -6,6 +6,9 @@
 
       <el-divider content-position="left"><i class="el-icon-document"></i> 基础信息
         <span style="color: red;">(每个报销流程仅针对一张白色或蓝色报销单。提交报销单时需要将报销编号书写在报销单右上角处,流程生成后可在列表中查看报销编号)</span>
+        <el-icon style="vertical-align: middle;margin-left: 8px;cursor: pointer;" size="24">
+          <Warning color="#fec25c" @click="handleShowReimbursementImage" />
+        </el-icon>
       </el-divider>
       <el-row>
         <el-col :span="12">
@@ -112,7 +115,8 @@
 
       <ReimbursementComponent ref="reimbursementComponent">
       </ReimbursementComponent>
-
+      <!-- 报销单图片预览 -->
+      <ReimbursementImage ref="reimbursementImage"></ReimbursementImage>
       <!--      <ProgramPageForm ref="programPageForm" @getProgram="getProgram"></ProgramPageForm>-->
       <CwProgramPageForm ref="cwProgramPageForm" @getProgram="getProgram"></CwProgramPageForm>
       <CwProgramPageForm ref="cwProgramPageForm3" @getProgram="getProgram3"></CwProgramPageForm>
@@ -172,6 +176,7 @@ import processService from '@/api/flowable/processService'
 //import MaterialManagementDialog from '../../../'
 import userService from '@/api/sys/UserService'
 import ReimbursementComponent from '@/views/common/reimbursement/ReimbursementComponent.vue'
+import ReimbursementImage from '@/views/common/reimbursement/ReimbursementImage.vue'
 export default {
   props: {
     businessId: {
@@ -347,6 +352,7 @@ export default {
     ReportNoChooseRadio,
     // UserSelectV2,
     WorkContractChooseCom,
+    ReimbursementImage
     // PurchaseChooseForm,
     // MaterialManagementDialog
   },
@@ -2049,6 +2055,10 @@ export default {
         this.inputForm.detailInfoProcured = inputForm.detailInfoProcured
         this.inputForm.invoiceReimbursementFiles = inputForm.invoiceReimbursementFiles
       });
+    },
+    //报销单图片预览
+    handleShowReimbursementImage() {
+      this.$refs.reimbursementImage.visible = true
     }
   }
 }

+ 49 - 0
src/views/common/reimbursement/ReimbursementImage.vue

@@ -0,0 +1,49 @@
+<!--文件上传组件-->
+<template>
+  <el-dialog append-to-body title="报销单图片预览" @open="handleOpenDialog" :close-on-click-modal="true" draggable
+    @close="close" @keyup.enter.native="" v-model="visible">
+    <el-carousel height="50vh" arrow="always">
+      <el-carousel-item v-for="item in imgList" :key="item">
+        <el-image v-if="visible" :hide-on-click-modal="true" :preview-teleported="true" :preview-src-list="[item.url]"
+          style="width: 100%; height: 100%" :src="item.url" fit="fill" />
+      </el-carousel-item>
+    </el-carousel>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click="close()" icon="el-icon-circle-close">关闭</el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+
+<script>
+import reimbursement1 from '@/assets/img/reimbursement/reimbursement1.png'
+import reimbursement2 from '@/assets/img/reimbursement/reimbursement2.png'
+export default {
+
+  data() {
+    return {
+      visible: false,
+      imgList: [
+        { url: reimbursement1 },
+        { url: reimbursement2 }
+      ]
+
+    }
+  },
+  watch: {
+  },
+  components: {
+  },
+  mounted() {
+  },
+  methods: {
+    handleOpenDialog() {
+    },
+    close() {
+      this.visible = false
+    }
+  }
+}
+</script>
+<style></style>

+ 11 - 1
src/views/consultancy/reimbursement/info/NewReimbursementForm.vue

@@ -6,6 +6,9 @@
 
       <el-divider content-position="left"><i class="el-icon-document"></i> 基础信息
         <span style="color: red;">(每个报销流程仅针对一张白色或蓝色报销单。提交报销单时需要将报销编号书写在报销单右上角处,流程生成后可在列表中查看报销编号)</span>
+        <el-icon style="vertical-align: middle;margin-left: 8px;cursor: pointer;" size="24">
+          <Warning color="#fec25c" @click="handleShowReimbursementImage" />
+        </el-icon>
       </el-divider>
       <el-row>
         <el-col :span="12">
@@ -83,7 +86,8 @@
 
       <ReimbursementComponent ref="reimbursementComponent">
       </ReimbursementComponent>
-
+      <!-- 报销单图片预览 -->
+      <ReimbursementImage ref="reimbursementImage"></ReimbursementImage>
       <!--      <ProgramPageForm ref="programPageForm" @getProgram="getProgram"></ProgramPageForm>-->
       <CwProgramPageForm ref="cwProgramPageForm" @getProgram="getProgram"></CwProgramPageForm>
       <CwProgramPageForm ref="cwProgramPageForm3" @getProgram="getProgram3"></CwProgramPageForm>
@@ -143,6 +147,7 @@ import processService from '@/api/flowable/processService'
 //import MaterialManagementDialog from '../../../'
 import userService from '@/api/sys/UserService'
 import ReimbursementComponent from '@/views/common/reimbursement/ReimbursementComponent.vue'
+import ReimbursementImage from '@/views/common/reimbursement/ReimbursementImage.vue'
 export default {
   props: {
     businessId: {
@@ -314,6 +319,7 @@ export default {
     ReportNoChooseRadio,
     // UserSelectV2,
     WorkContractChooseCom,
+    ReimbursementImage
     // PurchaseChooseForm,
     // MaterialManagementDialog
   },
@@ -1956,6 +1962,10 @@ export default {
         this.inputForm.detailInfoProcured = inputForm.detailInfoProcured
         this.inputForm.invoiceReimbursementFiles = inputForm.invoiceReimbursementFiles
       });
+    },
+    //报销单图片预览
+    handleShowReimbursementImage() {
+      this.$refs.reimbursementImage.visible = true
     }
   }
 }

+ 12 - 714
src/views/cw/reimbursementApproval/info/NewReimbursementForm.vue

@@ -6,7 +6,9 @@
 
 			<el-divider content-position="left"><i class="el-icon-document"></i> 基础信息
 				<span style="color: red;">(每个报销流程仅针对一张白色或蓝色报销单。提交报销单时需要将报销编号书写在报销单右上角处,流程生成后可在列表中查看报销编号)</span>
-
+				<el-icon style="vertical-align: middle;margin-left: 8px;cursor: pointer;" size="24">
+					<Warning color="#fec25c" @click="handleShowReimbursementImage" />
+				</el-icon>
 			</el-divider>
 			<el-row>
 				<el-col :span="12">
@@ -84,699 +86,8 @@
 			</el-row>
 			<ReimbursementComponent ref="reimbursementComponent">
 			</ReimbursementComponent>
-			<!-- <div v-if="inputForm.sourceType === '5'">
-				<el-divider content-position="left"><i class="el-icon-document"></i>
-					采购详情
-				</el-divider>
-				<el-row :gutter="15">
-					<el-col :span="24">
-						<vxe-table border show-footer show-overflow :footer-method="footerMethod555" ref="preTable"
-							class="vxe-table-element" :data="inputForm.preList" style="margin-left: 5em"
-							highlight-current-row>
-							<vxe-table-column field="purchaserAgent" title="采购人" :edit-render="{}" show-overflow="title"
-								:rules="[{ required: true, message: '请选择采购人', trigger: 'blur' }]"></vxe-table-column>
-							<vxe-table-column field="procurementOffice" title="采购部门" :edit-render="{}"
-								show-overflow="title"></vxe-table-column>
-							<vxe-table-column field="procurementType" title="采购类型" :edit-render="{}"
-								show-overflow="title"
-								:rules="[{ required: true, message: '请选择采购类型', trigger: 'blur' }]"></vxe-table-column>
-							<vxe-table-column field="tradeName" title="商品名称" :edit-render="{}" show-overflow="title"
-								:rules="[{ required: true, message: '请填写商品名称', trigger: 'blur' }]"></vxe-table-column>
-							<vxe-table-column field="tradePrice" title="商品单价(元)" :edit-render="{}" show-overflow="title"
-								:rules="[{ required: true, message: '请输入商品单价', trigger: 'blur' }]"></vxe-table-column>
-							<vxe-table-column field="tradeNumber" title="商品数量" :edit-render="{}"
-								show-overflow="title"></vxe-table-column>
-							<vxe-table-column field="priceSum" title="商品总价" :edit-render="{}"
-								show-overflow="title"></vxe-table-column>
-							<vxe-table-column field="company" title="单位" :edit-render="{}"
-								show-overflow="title"></vxe-table-column>
-							<vxe-table-column field="remarks" title="备注" :edit-render="{}"
-								show-overflow="title"></vxe-table-column>
-							<vxe-table-column title="操作">
-								<template #default="scope">
-									<el-button size="default" type="primary" :disabled="false"
-										@click="seeFileInfo(scope.$rowIndex)">文件详情</el-button>
-								</template>
-</vxe-table-column>
-</vxe-table>
-</el-col>
-</el-row>
-</div>
-<div v-if="(status === 'taskFormDetail') && inputForm.sourceType === '1'">
-	<el-divider content-position="left"><i class="el-icon-document"></i>
-		项目报销详情
-	</el-divider>
-	<el-row :gutter="15">
-		<el-col :span="24">
-			<vxe-table border show-footer show-overflow :footer-method="footerMethod" ref="detailTable" :key="detailKey"
-				class="vxe-table-element" :data="inputForm.detailInfos" style="margin-left: 5em" highlight-current-row
-				:edit-config="{ trigger: 'click', mode: 'row', showStatus: true, autoClear: true, icon: '_' }"
-				:edit-rules="validRules" :row-config="{ keyField: 'uniqueId' }"
-				:expand-config="{ expandAll: false, accordion: false, toggleMethod: handleExpand, expandRowKeys: handleDefaultExpand() }">
-				<vxe-column type="expand" width="80">
-					<template #content="{ row, rowIndex }">
-									<InvoiceReimbursementUpLoadComponent v-if="row.reimbursementType == 1"
-										@changeConfirmList="changeConfirmList" @handleCount="handleCount"
-										@handleUploadSuccess="handleUploadSuccess" :ref="row.uniqueId + 'Upload'"
-										v-show="'1' === this.inputForm.reimbursementType">
-									</InvoiceReimbursementUpLoadComponent>
-
-
-									<UpLoadComponent @handleUploadSuccess="handleUploadSuccess"
-										v-if="row.reimbursementType == 0" :ref="row.uniqueId + 'UploadFiles'">
-									</UpLoadComponent>
-
-								</template>
-				</vxe-column>
-				<vxe-table-column field="userName" title="报销人" show-overflow="title"></vxe-table-column>
-				<vxe-table-column field="deptName" title="报销部门" show-overflow="title"></vxe-table-column>
-				<vxe-table-column field="reimbursementType" title="报销类型" :edit-render="{}" show-overflow="title">
-					<template #default="{ row }">
-									<span>{{ $dictUtils.getDictLabel('reimbursement_type', row.reimbursementType,
-										'') }}</span>
-								</template>
-				</vxe-table-column>
-				<vxe-table-column field="typeName" title="报销类别" show-overflow="title"></vxe-table-column>
-				<vxe-table-column field="projectName" title="报销项目" show-overflow="title">
-					<template #edit="scope">
-									<el-link type="primary" :underline="false"
-										v-if="commonJS.isNotEmpty(scope.row.projectId)"
-										@click="viewProject(scope.row.projectId)">{{ scope.row.projectName }}</el-link>
-									<span v-else>{{ scope.row.projectName }}</span>
-								</template>
-				</vxe-table-column>
-				<vxe-table-column field="number" title="费用(元)" show-overflow="title"></vxe-table-column>
-				<vxe-table-column field="receiptNumber" title="收据张数" show-overflow="title"></vxe-table-column>
-				<vxe-table-column field="days" title="出差天数" show-overflow="title"></vxe-table-column>
-				<vxe-table-column field="content" title="内容" show-overflow="title"></vxe-table-column>
-			</vxe-table>
-		</el-col>
-	</el-row>
-</div>
-<div v-else-if="(status !== 'taskFormDetail') && inputForm.sourceType === '1'">
-	<el-divider content-position="left"><i class="el-icon-document"></i>
-		项目报销详情
-		<el-button size="default" style="margin-left: 20px" type="primary"
-			:disabled="method === 'view' || status === 'audit' || status === 'taskFormDetail'"
-			@click="insertEvent('detail')" plain>
-			新增
-		</el-button>
-	</el-divider>
-	<el-row :gutter="15">
-		<el-col :span="24">
-			<vxe-table border show-footer show-overflow :footer-method="footerMethod" ref="detailTable" :key="detailKey"
-				class="vxe-table-element" :data="inputForm.detailInfos" style="margin-left: 5em" highlight-current-row
-				:edit-config="{ trigger: 'click', mode: 'row', showStatus: true, autoClear: true, icon: '_' }"
-				:edit-rules="validRules" :row-config="{ keyField: 'uniqueId' }"
-				:expand-config="{ expandAll: false, accordion: false, toggleMethod: handleExpand, expandRowKeys: handleDefaultExpand() }">
-				<vxe-column type="expand" width="80">
-					<template #content="{ row, rowIndex }">
-									<InvoiceReimbursementUpLoadComponent v-if="row.reimbursementType == 1"
-										@changeConfirmList="changeConfirmList" @handleCount="handleCount"
-										@handleUploadSuccess="handleUploadSuccess" :ref="row.uniqueId + 'Upload'"
-										v-show="'1' === this.inputForm.reimbursementType">
-									</InvoiceReimbursementUpLoadComponent>
-
-
-									<UpLoadComponent @handleUploadSuccess="handleUploadSuccess"
-										v-if="row.reimbursementType == 0" :ref="row.uniqueId + 'UploadFiles'">
-									</UpLoadComponent>
-
-								</template>
-				</vxe-column>
-				<vxe-table-column field="userName" title="报销人" :edit-render="{}" show-overflow="title"
-					:rules="[{ required: true, message: '请选择报销人', trigger: 'blur' }]">
-					<template v-slot:edit="scope">
-									<el-input v-model="scope.row.userName"
-										@focus="userPullListForm(scope.$rowIndex)"></el-input>
-								</template>
-				</vxe-table-column>
-				<vxe-table-column field="deptName" title="报销部门" :edit-render="{}" show-overflow="title">
-					<template v-slot:edit="scope">
-									<el-input :disabled='true' v-model="scope.row.deptName"></el-input>
-								</template>
-				</vxe-table-column>
-				<vxe-table-column field="reimbursementType" title="报销类型" :edit-render="{}" show-overflow="title">
-					<template #default="{ row }">
-									<span>{{ $dictUtils.getDictLabel('reimbursement_type', row.reimbursementType,
-										'') }}</span>
-								</template>
-					<template #edit="{ row }">
-									<vxe-select
-										:disabled="method === 'view' || status === 'audit' || status === 'taskFormDetail'"
-										@change="handleChangeType" v-model="row.reimbursementType" placeholder="请选择报销类型"
-										transfer>
-										<vxe-option v-for="item in $dictUtils.getDictList('reimbursement_type')"
-											:key="item.value" :value="item.value" :label="item.label"></vxe-option>
-									</vxe-select>
-								</template>
-				</vxe-table-column>
-				<vxe-table-column field="typeName" title="报销类别" :edit-render="{}" show-overflow="title"
-					:rules="[{ required: true, message: '请选择报销类别', trigger: 'blur' }]">
-					<template #edit="scope">
-									<el-input v-model="scope.row.typeName"
-										@focus="typePullForm(scope.$rowIndex, scope.row.deptId)"></el-input>
-								</template>
-				</vxe-table-column>
-				<vxe-table-column field="projectName" title="报销项目" :edit-render="{}" show-overflow="title"
-					:rules="[{ required: true, message: '请选择报销项目', trigger: 'blur' }]">
-					<template v-slot:edit="scope">
-									<el-input v-model="scope.row.projectName"
-										@focus="openProgramPageForm(scope.$rowIndex, scope.row)"></el-input>
-								</template>
-				</vxe-table-column>
-				<vxe-table-column field="number" title="费用(元)" :edit-render="{}" show-overflow="title"
-					:rules="[{ required: true, message: '请输入费用', trigger: 'blur' }]">
-					<template v-slot:edit="scope">
-									<el-input maxlength="15" v-model="scope.row.number"
-										@input="scope.row.number = twoDecimalPlaces(scope.row.number)"></el-input>
-								</template>
-				</vxe-table-column>
-				<vxe-table-column field="receiptNumber" title="收据张数" :edit-render="{}" show-overflow="title">
-					<template v-slot:edit="scope">
-									<el-input v-model="scope.row.receiptNumber"
-										oninput="value=value.replace(/\D|^0/g,'')" maxlength="10"></el-input>
-								</template>
-				</vxe-table-column>
-				<vxe-table-column field="days" title="出差天数" :edit-render="{}" show-overflow="title">
-					<template v-slot:edit="scope">
-									<el-input v-model="scope.row.days" oninput="value=value.replace(/\D|^0/g,'')"
-										maxlength="10"></el-input>
-								</template>
-				</vxe-table-column>
-				<vxe-table-column field="content" title="内容" :edit-render="{}" show-overflow="title">
-					<template v-slot:edit="scope">
-									<el-input v-model="scope.row.content"></el-input>
-								</template>
-				</vxe-table-column>
-				<vxe-table-column title="操作" width="180">
-					<template v-slot="scope">
-									<el-button size="default" @click="uploadFile(scope.row, scope.$rowIndex,)"
-										type="primary">上传</el-button>
-									<el-button size="default" type="danger"
-										@click="removeEvent(scope.row, scope.$rowIndex, 'detail')">删除</el-button>
-								</template>
-				</vxe-table-column>
-			</vxe-table>
-		</el-col>
-	</el-row>
-</div>
-<div v-if="inputForm.sourceType === '2'">
-	<el-divider content-position="left"><i class="el-icon-document"></i>
-		合同报销详情
-		<el-button size="default" style="margin-left: 20px" type="primary"
-			:disabled="method === 'view' || status === 'audit' || status === 'taskFormDetail'"
-			@click="insertEvent('contract_detail')" plain>
-			新增
-		</el-button>
-	</el-divider>
-	<el-row :gutter="15">
-		<el-col :span="24">
-			<vxe-table border show-footer show-overflow :footer-method="footerMethod" ref="detailTableContract"
-				:key="detailKeyContract" class="vxe-table-element" :data="inputForm.detailInfoContracts"
-				style="margin-left: 5em" highlight-current-row
-				:edit-config="{ trigger: 'click', mode: 'row', showStatus: true, autoClear: true, icon: '_' }"
-				:edit-rules="validRules">
-				<vxe-table-column field="userName" title="报销人" :edit-render="{}" show-overflow="title"
-					:rules="[{ required: true, message: '请选择报销人', trigger: 'blur' }]">
-					<template v-slot:edit="scope">
-									<el-input v-model="scope.row.userName"
-										@focus="userPullListForm2(scope.$rowIndex)"></el-input>
-								</template>
-				</vxe-table-column>
-				<vxe-table-column field="deptName" title="报销部门" :edit-render="{}" show-overflow="title">
-					<template v-slot:edit="scope">
-									<el-input :disabled='true' v-model="scope.row.deptName"></el-input>
-								</template>
-				</vxe-table-column>
-				<vxe-table-column field="typeName" title="报销类别" :edit-render="{}" show-overflow="title"
-					:rules="[{ required: true, message: '请选择报销类别', trigger: 'blur' }]">
-					<template #edit="scope">
-									<el-input v-model="scope.row.typeName"
-										@focus="typePullForm2(scope.$rowIndex, scope.row.deptId)"></el-input>
-								</template>
-				</vxe-table-column>
-				<vxe-table-column field="contractName" title="报销合同" :edit-render="{}" show-overflow="title"
-					:rules="[{ required: true, message: '请选择报销合同', trigger: 'blur' }]">
-					<template v-slot:edit="scope">
-									<el-input v-model="scope.row.contractName"
-										@focus="openContractForm(scope.$rowIndex, scope.row)"></el-input>
-								</template>
-				</vxe-table-column>
-				<vxe-table-column field="number" title="费用(元)" :edit-render="{}" show-overflow="title"
-					:rules="[{ required: true, message: '请输入费用', trigger: 'blur' }]">
-					<template v-slot:edit="scope">
-									<el-input maxlength="15" v-model="scope.row.number"
-										@input="scope.row.number = twoDecimalPlaces(scope.row.number)"></el-input>
-								</template>
-				</vxe-table-column>
-				<vxe-table-column field="receiptNumber" title="收据张数" :edit-render="{}" show-overflow="title">
-					<template v-slot:edit="scope">
-									<el-input v-model="scope.row.receiptNumber"
-										oninput="value=value.replace(/\D|^0/g,'')" maxlength="10"></el-input>
-								</template>
-				</vxe-table-column>
-				<vxe-table-column field="days" title="出差天数" :edit-render="{}" show-overflow="title">
-					<template v-slot:edit="scope">
-									<el-input v-model="scope.row.days" oninput="value=value.replace(/\D|^0/g,'')"
-										maxlength="10"></el-input>
-								</template>
-				</vxe-table-column>
-				<vxe-table-column field="content" title="内容" :edit-render="{}" show-overflow="title">
-					<template v-slot:edit="scope">
-									<el-input v-model="scope.row.content"></el-input>
-								</template>
-				</vxe-table-column>
-				<vxe-table-column title="操作" width="100">
-					<template v-slot="scope">
-									<el-button size="default" type="danger"
-										@click="removeEvent(scope.row, scope.$rowIndex, 'contract_detail')">删除</el-button>
-								</template>
-				</vxe-table-column>
-			</vxe-table>
-		</el-col>
-	</el-row>
-</div>
-<div v-if="inputForm.sourceType === '3'">
-	<el-divider content-position="left"><i class="el-icon-document"></i>
-		报告报销详情
-		<el-button size="default" style="margin-left: 20px" type="primary"
-			:disabled="method === 'view' || status === 'audit' || status === 'taskFormDetail'"
-			@click="insertEvent('report_detail')" plain>
-			新增
-		</el-button>
-	</el-divider>
-	<el-row :gutter="15">
-		<el-col :span="24">
-			<vxe-table border show-footer show-overflow :footer-method="footerMethod" ref="detailTableReport"
-				:key="detailKeyReport" class="vxe-table-element" :data="inputForm.detailInfoReports"
-				style="margin-left: 5em" highlight-current-row
-				:edit-config="{ trigger: 'click', mode: 'row', showStatus: true, autoClear: true, icon: '_' }"
-				:edit-rules="validRules" :row-config="{ keyField: 'uniqueId' }"
-				:expand-config="{ expandAll: false, accordion: false, toggleMethod: handleExpand, expandRowKeys: handleDefaultExpand() }">
-				<vxe-column type="expand" width="80">
-					<template #content="{ row, rowIndex }">
-									<InvoiceReimbursementUpLoadComponent v-if="row.reimbursementType == 1"
-										@changeConfirmList="changeConfirmList" @handleCount="handleCount"
-										@handleUploadSuccess="handleUploadSuccess" :ref="row.uniqueId + 'Upload'"
-										v-show="'1' === this.inputForm.reimbursementType">
-									</InvoiceReimbursementUpLoadComponent>
-
-
-									<UpLoadComponent @handleUploadSuccess="handleUploadSuccess"
-										v-if="row.reimbursementType == 0" :ref="row.uniqueId + 'UploadFiles'">
-									</UpLoadComponent>
-
-								</template>
-				</vxe-column>
-				<vxe-table-column field="userName" title="报销人" :edit-render="{}" show-overflow="title"
-					:rules="[{ required: true, message: '请选择报销人', trigger: 'blur' }]">
-					<template v-slot:edit="scope">
-									<el-input v-model="scope.row.userName"
-										@focus="userPullListForm3(scope.$rowIndex)"></el-input>
-								</template>
-				</vxe-table-column>
-				<vxe-table-column field="deptName" title="报销部门" :edit-render="{}" show-overflow="title">
-					<template v-slot:edit="scope">
-									<el-input :disabled='true' v-model="scope.row.deptName"></el-input>
-								</template>
-				</vxe-table-column>
-				<vxe-table-column field="reimbursementType" title="报销类型" :edit-render="{}" show-overflow="title">
-					<template #default="{ row }">
-									<span>{{ $dictUtils.getDictLabel('reimbursement_type', row.reimbursementType,
-										'') }}</span>
-								</template>
-					<template #edit="{ row }">
-									<vxe-select
-										:disabled="method === 'view' || status === 'audit' || status === 'taskFormDetail'"
-										@change="handleChangeType" v-model="row.reimbursementType" placeholder="请选择报销类型"
-										transfer>
-										<vxe-option v-for="item in $dictUtils.getDictList('reimbursement_type')"
-											:key="item.value" :value="item.value" :label="item.label"></vxe-option>
-									</vxe-select>
-								</template>
-				</vxe-table-column>
-				<vxe-table-column field="typeName" title="报销类别" :edit-render="{}" show-overflow="title"
-					:rules="[{ required: true, message: '请选择报销类别', trigger: 'blur' }]">
-					<template #edit="scope">
-									<el-input v-model="scope.row.typeName"
-										@focus="typePullForm3(scope.$rowIndex, scope.row.deptId)"></el-input>
-								</template>
-				</vxe-table-column>
-				<vxe-table-column field="projectName" title="报销项目" :edit-render="{}" show-overflow="title"
-					:rules="[{ required: true, message: '请选择报销项目', trigger: 'blur' }]">
-					<template v-slot:edit="scope">
-									<el-input v-model="scope.row.projectName"
-										@focus="openProgramPageForm3(scope.$rowIndex, scope.row)"></el-input>
-								</template>
-				</vxe-table-column>
-				<vxe-table-column field="reportNumber" title="报告号" :edit-render="{}" show-overflow="title">
-					<template v-slot:edit="scope">
-									<el-input :readonly="true" v-model="scope.row.reportNumber"
-										@focus="openReportNoPageForm(scope.$rowIndex, scope.row)"></el-input>
-								</template>
-				</vxe-table-column>
-				<vxe-table-column field="number" title="费用(元)" :edit-render="{}" show-overflow="title"
-					:rules="[{ required: true, message: '请输入费用', trigger: 'blur' }]">
-					<template v-slot:edit="scope">
-									<el-input maxlength="15" v-model="scope.row.number"
-										@input="scope.row.number = twoDecimalPlaces(scope.row.number)"></el-input>
-								</template>
-				</vxe-table-column>
-				<vxe-table-column field="receiptNumber" title="收据张数" :edit-render="{}" show-overflow="title">
-					<template v-slot:edit="scope">
-									<el-input v-model="scope.row.receiptNumber"
-										oninput="value=value.replace(/\D|^0/g,'')" maxlength="10"></el-input>
-								</template>
-				</vxe-table-column>
-				<vxe-table-column field="days" title="出差天数" :edit-render="{}" show-overflow="title">
-					<template v-slot:edit="scope">
-									<el-input v-model="scope.row.days" oninput="value=value.replace(/\D|^0/g,'')"
-										maxlength="10"></el-input>
-								</template>
-				</vxe-table-column>
-				<vxe-table-column field="content" title="内容" :edit-render="{}" show-overflow="title">
-					<template v-slot:edit="scope">
-									<el-input v-model="scope.row.content"></el-input>
-								</template>
-				</vxe-table-column>
-				<vxe-table-column title="操作" width="180">
-					<template v-slot="scope">
-									<el-button size="default" @click="uploadFile(scope.row, scope.$rowIndex,)"
-										type="primary">上传</el-button>
-									<el-button size="default" type="danger"
-										@click="removeEvent(scope.row, scope.$rowIndex, 'report_detail')">删除</el-button>
-								</template>
-				</vxe-table-column>
-			</vxe-table>
-		</el-col>
-	</el-row>
-</div>
-<div v-if="inputForm.sourceType === '4'">
-	<el-divider content-position="left"><i class="el-icon-document"></i>
-		其他报销详情
-		<el-button size="default" style="margin-left: 20px" type="primary"
-			:disabled="method === 'view' || status === 'audit' || status === 'taskFormDetail'"
-			@click="insertEvent('others')" plain>
-			新增
-		</el-button>
-	</el-divider>
-	<el-row :gutter="15">
-		<el-col :span="24">
-			<vxe-table border show-footer show-overflow :footer-method="footerMethod" ref="detailTableOthers"
-				class="vxe-table-element" :data="inputForm.detailInfoOthers" style="margin-left: 5em"
-				:key="detailKeyOthers" highlight-current-row
-				:edit-config="{ trigger: 'click', mode: 'row', showStatus: true, autoClear: true, icon: '_' }"
-				:edit-rules="validRules" :row-config="{ keyField: 'uniqueId' }"
-				:expand-config="{ expandAll: false, accordion: false, toggleMethod: handleExpand, expandRowKeys: handleDefaultExpand() }">
-				<vxe-column type="expand" width="80">
-					<template #content="{ row, rowIndex }">
-									<InvoiceReimbursementUpLoadComponent v-if="row.reimbursementType == 1"
-										@changeConfirmList="changeConfirmList" @handleCount="handleCount"
-										@handleUploadSuccess="handleUploadSuccess" :ref="row.uniqueId + 'Upload'"
-										v-show="'1' === this.inputForm.reimbursementType">
-									</InvoiceReimbursementUpLoadComponent>
-
-									<UpLoadComponent @handleUploadSuccess="handleUploadSuccess"
-										v-if="row.reimbursementType == 0" :ref="row.uniqueId + 'UploadFiles'">
-									</UpLoadComponent>
-
-								</template>
-				</vxe-column>
-				<vxe-table-column field="userName" title="报销人" :edit-render="{}" show-overflow="title"
-					:rules="[{ required: true, message: '请选择报销人', trigger: 'blur' }]">
-					<template v-slot:edit="scope">
-									<el-input v-model="scope.row.userName"
-										@focus="userPullListForm4(scope.$rowIndex)"></el-input>
-								</template>
-				</vxe-table-column>
-				<vxe-table-column field="deptName" title="报销部门" :edit-render="{}" show-overflow="title">
-					<template v-slot:edit="scope">
-									<el-input :disabled='true' v-model="scope.row.deptName"></el-input>
-								</template>
-				</vxe-table-column>
-				<vxe-table-column field="reimbursementType" title="报销类型" :edit-render="{}" show-overflow="title">
-					<template #default="{ row }">
-									<span>{{ $dictUtils.getDictLabel('reimbursement_type', row.reimbursementType,
-										'') }}</span>
-								</template>
-					<template #edit="{ row }">
-									<vxe-select
-										:disabled="method === 'view' || status === 'audit' || status === 'taskFormDetail'"
-										@change="handleChangeType" v-model="row.reimbursementType" placeholder="请选择报销类型"
-										transfer>
-										<vxe-option v-for="item in $dictUtils.getDictList('reimbursement_type')"
-											:key="item.value" :value="item.value" :label="item.label"></vxe-option>
-									</vxe-select>
-								</template>
-				</vxe-table-column>
-				<vxe-table-column field="typeName" title="报销类别" :edit-render="{}" show-overflow="title"
-					:rules="[{ required: true, message: '请选择报销类别', trigger: 'blur' }]">
-					<template #edit="scope">
-									<el-input v-model="scope.row.typeName"
-										@focus="typePullForm4(scope.$rowIndex, scope.row.deptId)"></el-input>
-								</template>
-				</vxe-table-column>
-				<vxe-table-column field="projectName" title="报销详情" :edit-render="{}" show-overflow="title"
-					:rules="[{ required: true, message: '请填写报销详情', trigger: 'blur' }]">
-					<template v-slot:edit="scope">
-									<el-input v-model="scope.row.projectName"
-										@focus="openProgramPageForm4(scope.$rowIndex, scope.row)"></el-input>
-								</template>
-				</vxe-table-column>
-				<vxe-table-column field="number" title="费用(元)" :edit-render="{}" show-overflow="title"
-					:rules="[{ required: true, message: '请输入费用', trigger: 'blur' }]">
-					<template v-slot:edit="scope">
-									<el-input maxlength="15" v-model="scope.row.number"
-										@input="scope.row.number = twoDecimalPlaces(scope.row.number)"></el-input>
-								</template>
-				</vxe-table-column>
-				<vxe-table-column field="receiptNumber" title="收据张数" :edit-render="{}" show-overflow="title">
-					<template v-slot:edit="scope">
-									<el-input v-model="scope.row.receiptNumber"
-										oninput="value=value.replace(/\D|^0/g,'')" maxlength="10"></el-input>
-								</template>
-				</vxe-table-column>
-				<vxe-table-column field="days" title="出差天数" :edit-render="{}" show-overflow="title">
-					<template v-slot:edit="scope">
-									<el-input v-model="scope.row.days" oninput="value=value.replace(/\D|^0/g,'')"
-										maxlength="10"></el-input>
-								</template>
-				</vxe-table-column>
-				<vxe-table-column field="content" title="内容" :edit-render="{}" show-overflow="title">
-					<template v-slot:edit="scope">
-									<el-input v-model="scope.row.content"></el-input>
-								</template>
-				</vxe-table-column>
-				<vxe-table-column title="操作" width="180">
-					<template v-slot="scope">
-									<el-button size="default" @click="uploadFile(scope.row, scope.$rowIndex,)"
-										type="primary">上传</el-button>
-									<el-button size="default" type="danger"
-										@click="removeEvent(scope.row, scope.$rowIndex, 'others')">删除</el-button>
-								</template>
-				</vxe-table-column>
-			</vxe-table>
-		</el-col>
-	</el-row>
-</div>
-<div v-if="inputForm.sourceType === '5'">
-	<el-divider content-position="left"><i class="el-icon-document"></i>
-		采购报销详情
-		<el-button size="default" style="margin-left: 20px" type="primary"
-			:disabled="method === 'view' || status === 'audit' || status === 'taskFormDetail' || this.formReadOnly"
-			@click="insertEvent('procured')" plain>
-			新增
-		</el-button>
-	</el-divider>
-	<el-row :gutter="15">
-		<el-col :span="24">
-			<vxe-table border show-footer show-overflow :footer-method="footerMethod" ref="detailTableProcured"
-				class="vxe-table-element" :data="inputForm.detailInfoProcured" style="margin-left: 5em"
-				:key="detailKeyProcured" highlight-current-row
-				:edit-config="{ trigger: 'click', mode: 'row', showStatus: true, autoClear: true, icon: '_' }"
-				:edit-rules="validRules">
-				<vxe-table-column field="userName" title="报销人" :edit-render="{}" show-overflow="title"
-					:rules="[{ required: true, message: '请选择报销人', trigger: 'blur' }]">
-					<template v-slot:edit="scope">
-									<el-input v-model="scope.row.userName"
-										@focus="userPullListForm5(scope.$rowIndex)"></el-input>
-								</template>
-				</vxe-table-column>
-				<vxe-table-column field="deptName" title="报销部门" :edit-render="{}" show-overflow="title">
-					<template v-slot:edit="scope">
-									<el-input :disabled='true' v-model="scope.row.deptName"></el-input>
-								</template>
-				</vxe-table-column>
-				<vxe-table-column field="typeName" title="报销类别" :edit-render="{}" show-overflow="title"
-					:rules="[{ required: true, message: '请选择报销类别', trigger: 'blur' }]">
-					<template #edit="scope">
-									<el-input v-model="scope.row.typeName"
-										@focus="typePullForm5(scope.$rowIndex, scope.row.deptId)"></el-input>
-								</template>
-				</vxe-table-column>
-				<vxe-table-column field="projectName" title="报销详情" :edit-render="{}" show-overflow="title"
-					:rules="[{ required: true, message: '请填写报销详情', trigger: 'blur' }]">
-					<template v-slot:edit="scope">
-									<el-input v-model="scope.row.projectName"
-										@focus="openProgramPageForm5(scope.$rowIndex, scope.row)"></el-input>
-								</template>
-				</vxe-table-column>
-
-				<vxe-table-column field="number" title="费用(元)" :edit-render="{}" show-overflow="title"
-					:rules="[{ required: true, message: '请输入费用', trigger: 'blur' }]">
-					<template v-slot:edit="scope">
-									<el-input maxlength="15" v-model="scope.row.number"
-										@input="scope.row.number = twoDecimalPlaces(scope.row.number)"></el-input>
-								</template>
-				</vxe-table-column>
-				<vxe-table-column field="receiptNumber" title="收据张数" :edit-render="{}" show-overflow="title">
-					<template v-slot:edit="scope">
-									<el-input v-model="scope.row.receiptNumber"
-										oninput="value=value.replace(/\D|^0/g,'')" maxlength="10"></el-input>
-								</template>
-				</vxe-table-column>
-				<vxe-table-column field="days" title="出差天数" :edit-render="{}" show-overflow="title">
-					<template v-slot:edit="scope">
-									<el-input v-model="scope.row.days" oninput="value=value.replace(/\D|^0/g,'')"
-										maxlength="10"></el-input>
-								</template>
-				</vxe-table-column>
-				<vxe-table-column field="content" title="内容" :edit-render="{}" show-overflow="title">
-					<template v-slot:edit="scope">
-									<el-input v-model="scope.row.content"></el-input>
-								</template>
-				</vxe-table-column>
-				<vxe-table-column title="操作" width="100">
-					<template v-slot="scope">
-									<el-button size="default" type="danger"
-										@click="removeEvent(scope.row, scope.$rowIndex, 'procured')">删除</el-button>
-								</template>
-				</vxe-table-column>
-			</vxe-table>
-		</el-col>
-	</el-row>
-</div>
-<div v-if="inputForm.sourceType === '6'">
-	<el-divider content-position="left"><i class="el-icon-document"></i>
-		实习报销详情
-		<el-button size="default" style="margin-left: 20px" type="primary"
-			:disabled="method === 'view' || status === 'audit' || status === 'taskFormDetail' || this.formReadOnly"
-			@click="insertEvent('human')" plain>
-			新增
-		</el-button>
-	</el-divider>
-	<el-row :gutter="15">
-		<el-col :span="24">
-			<vxe-table border show-footer show-overflow :footer-method="footerMethod" ref="humanTableProcured"
-				class="vxe-table-element" :data="inputForm.humanInfoProcured" style="margin-left: 5em"
-				:key="humanKeyProcured" highlight-current-row
-				:edit-config="{ trigger: 'click', mode: 'row', showStatus: true, autoClear: true, icon: '_' }"
-				:edit-rules="validRules">
-				<vxe-table-column field="userName" title="报销人" :edit-render="{}" show-overflow="title"
-					:rules="[{ required: true, message: '请选择报销人', trigger: 'blur' }]">
-					<template v-slot:edit="scope">
-									<el-input v-model="scope.row.userName"
-										@focus="userPullListForm6(scope.$rowIndex)"></el-input>
-								</template>
-				</vxe-table-column>
-				<vxe-table-column field="deptName" title="报销部门" :edit-render="{}" show-overflow="title">
-					<template v-slot:edit="scope">
-									<el-input :disabled='true' v-model="scope.row.deptName"></el-input>
-								</template>
-				</vxe-table-column>
-				<vxe-table-column field="typeName" title="报销类别" :edit-render="{}" show-overflow="title"
-					:rules="[{ required: true, message: '请选择报销类别', trigger: 'blur' }]">
-					<template #edit="scope">
-									<el-input v-model="scope.row.typeName"
-										@focus="typePullForm6(scope.$rowIndex, scope.row.deptId)"></el-input>
-								</template>
-				</vxe-table-column>
-				<vxe-table-column field="reimbuserName" title="报销详情" :edit-render="{}" show-overflow="title"
-					:rules="[{ required: true, message: '请填写报销登记名称', trigger: 'blur' }]">
-					<template v-slot:edit="scope">
-									<el-input maxlength="15" v-model="scope.row.reimbuserName"></el-input>
-								</template>
-				</vxe-table-column>
-				<vxe-table-column field="number" title="费用(元)" :edit-render="{}" show-overflow="title"
-					:rules="[{ required: true, message: '请输入费用', trigger: 'blur' }]">
-					<template v-slot:edit="scope">
-									<el-input v-model="scope.row.number"
-										@focus="openProgramPageForm6(scope.$rowIndex, scope.row)"></el-input>
-								</template>
-				</vxe-table-column>
-				<vxe-table-column field="content" title="内容" :edit-render="{}" show-overflow="title">
-					<template v-slot:edit="scope">
-									<el-input v-model="scope.row.content"></el-input>
-								</template>
-				</vxe-table-column>
-				<vxe-table-column title="操作" width="100">
-					<template v-slot="scope">
-									<el-button size="default" type="danger"
-										@click="removeEvent(scope.row, scope.$rowIndex, 'human')">删除</el-button>
-								</template>
-				</vxe-table-column>
-			</vxe-table>
-		</el-col>
-	</el-row>
-</div>
-<div v-if="inputForm.reimbursementType === '0'">
-	<el-divider content-position="left"><i class="el-icon-document"></i>
-		专用发票信息
-		<el-button size="default" style="margin-left: 20px" type="primary"
-			:disabled="method === 'view' || status === 'audit' || status === 'taskFormDetail'"
-			@click="insertEvent('amount')" plain>
-			新增
-		</el-button>
-	</el-divider>
-	<el-row :gutter="15">
-		<el-col :span="24">
-			<vxe-table border show-footer show-overflow ref="amountTable" class="vxe-table-element"
-				:data="inputForm.amountInfos" style="margin-left: 5em" :key="amountKey" highlight-current-row
-				:edit-config="{ trigger: 'click', mode: 'row', showStatus: true, autoClear: true, icon: '_' }"
-				:edit-rules="amountInfoRules">
-				<vxe-table-column field="code" title="发票代码" :edit-render="{}" show-overflow="title">
-					<template v-slot:edit="scope">
-									<el-input oninput="value=value.replace(/\D|^/g,'')" maxlength="30"
-										v-model="scope.row.code"></el-input>
-								</template>
-				</vxe-table-column>
-				<vxe-table-column field="number" title="发票号" :edit-render="{}" show-overflow="title">
-					<template v-slot:edit="scope">
-									<el-input oninput="value=value.replace(/\D|^/g,'')" maxlength="30"
-										@change="isExict(scope.row)" v-model="scope.row.number"></el-input>
-								</template>
-				</vxe-table-column>
-				<vxe-table-column field="amount" title="金额" :edit-render="{}" show-overflow="title">
-					<template v-slot:edit="scope">
-									<el-input maxlength="15" v-model="scope.row.amount"
-										@input="scope.row.amount = twoDecimalPlaces(scope.row.amount)"
-										@change="countAmount(scope.row)"></el-input>
-								</template>
-				</vxe-table-column>
-				<vxe-table-column field="taxAmount" title="税额" :edit-render="{}" show-overflow="title">
-					<template v-slot:edit="scope">
-									<el-input maxlength="15" v-model="scope.row.taxAmount"
-										@input="scope.row.taxAmount = twoDecimalPlaces(scope.row.taxAmount)"
-										@change="countAmount(scope.row)"></el-input>
-								</template>
-				</vxe-table-column>
-				<vxe-table-column field="count" title="价税合计" :edit-render="{}" show-overflow="title">
-					<template v-slot:edit="scope">
-									<el-input :disabled="true" v-model="scope.row.count"></el-input>
-								</template>
-				</vxe-table-column>
-				<vxe-table-column title="操作" width="100">
-					<template v-slot="scope">
-									<el-button size="default" type="danger"
-										@click="removeEvent(scope.row, scope.$rowIndex, 'amount')">删除</el-button>
-								</template>
-				</vxe-table-column>
-			</vxe-table>
-		</el-col>
-	</el-row>
-</div> -->
-
+			<!-- 报销单图片预览 -->
+			<ReimbursementImage ref="reimbursementImage"></ReimbursementImage>
 			<CwProgramPageForm ref="cwProgramPageForm" @getProgram="getProgram"></CwProgramPageForm>
 			<CwProgramPageForm2 ref="cwProgramPageForm3" @getProgram="getProgram3"></CwProgramPageForm2>
 			<CwProgramPageForm ref="cwProgramPageForm4" @getProgram="getProgram4"></CwProgramPageForm>
@@ -814,33 +125,25 @@
 
 <script>
 import ReportNoChooseRadio from './ReportNoChooseRadio'
-// import ReimbursementService from '@/api/sys/ReimbursementService'
 import ReimbursementApprovalService from '@/api/cw/reimbursementApproval/ReimbursementApprovalService'
-// import ReimbursementTypeService from '@/api/sys/ReimbursementTypeService'
 import ReimbursementApprovalTypeService from '@/api/cw/reimbursementApproval/ReimbursementApprovalTypeService'
 import InvoiceConfirmStatusService from '@/api/finance/invoice/InvoiceConfirmStatusService'
 import InvoiceReimbursementUpLoadComponent from '@/views/common/NewDigitalInvoiceUploadComponent'
 import UpLoadComponent from '@/views/common/UpLoadComponent'
 import XEUtils from 'xe-utils'
-// import ProgramPageForm from '@/views/modules/finance/invoice/ProgramPageForm'
 import CwProgramPageForm from './CwProgramPageForm'
 import ReimburseRegisterChoose from '@/views/human/practice/reimburseRegister/ReimburseRegisterChoose'
-// import ReimbursementTypePullForm from '@/views/modules/finance/invoice/ReimbursementTypePullForm'
 import CwReimbursementTypePullForm from './CwReimbursementTypePullForm'
 import UserPullForm from '@/views/finance/invoice/UserPullForm'
 import CommonApi from '@/api/cw/common/CommonApi'
 import WorkContractChooseCom from '../../projectRecords/WorkContractChooseCom'
 import processService from '@/api/flowable/processService'
-// import PurchaseChooseForm from '../../../materialManagement/wareHouse/PurchaseChooseForm'
-// import MaterialManagementService from '@/api/materialManagement/MaterialManagementService'
-// import MaterialManagementDialog from '../../../materialManagement/file/MaterialManagementDialog'
 import ProjectListForm from './ProgramForm'
 import CwProgramPageForm2 from './CwProgramPageForm2'
 import userService from '@/api/sys/UserService'
 import taskService from "@/api/flowable/taskService.js";
 import ReimbursementComponent from '@/views/common/reimbursement/ReimbursementComponent.vue'
-import { uniq } from 'lodash'
-
+import ReimbursementImage from '@/views/common/reimbursement/ReimbursementImage.vue'
 
 export default {
 	props: {
@@ -990,21 +293,15 @@ export default {
 		}
 	},
 	ReimbursementApprovalService: null,
-	// reimbursementService: null,
-	// reimbursementTypeService: null,
 	reimbursementApprovalTypeService: null,
 	invoiceConfirmStatusService: null,
 	commonApi: null,
-	// materialManagementService: null,
 	created() {
 		this.reimbursementApprovalService = new ReimbursementApprovalService()
-		// this.reimbursementService = new ReimbursementService()
-		// this.reimbursementTypeService = new ReimbursementTypeService()
 		this.reimbursementApprovalTypeService = new ReimbursementApprovalTypeService()
 		this.invoiceConfirmStatusService = new InvoiceConfirmStatusService()
 
 		this.commonApi = new CommonApi()
-		// this.materialManagementService = new MaterialManagementService()
 		if (this.$store.state.user.name === '潘中') {
 			this.method != 'view'
 		}
@@ -1012,19 +309,16 @@ export default {
 	components: {
 		InvoiceReimbursementUpLoadComponent,
 		UpLoadComponent,
-		// ProgramPageForm,
 		CwProgramPageForm,
 		CwProgramPageForm2,
 		ReimburseRegisterChoose,
-		// ReimbursementTypePullForm,
 		CwReimbursementTypePullForm,
 		UserPullForm,
 		ReportNoChooseRadio,
 		WorkContractChooseCom,
-		// PurchaseChooseForm,
-		// MaterialManagementDialog,
 		ProjectListForm,
-		ReimbursementComponent
+		ReimbursementComponent,
+		ReimbursementImage
 	},
 	computed: {
 		bus: {
@@ -3035,6 +2329,10 @@ export default {
 				this.inputForm.detailInfoProcured = inputForm.detailInfoProcured
 				this.inputForm.invoiceReimbursementFiles = inputForm.invoiceReimbursementFiles
 			});
+		},
+		//报销单图片预览
+		handleShowReimbursementImage() {
+			this.$refs.reimbursementImage.visible = true
 		}
 
 	}

+ 12 - 1
src/views/cw/szfbReimbursementApproval/info/NewReimbursementForm.vue

@@ -6,6 +6,9 @@
 
 			<el-divider content-position="left"><i class="el-icon-document"></i> 基础信息
 				<span style="color: red;">(每个报销流程仅针对一张白色或蓝色报销单。提交报销单时需要将报销编号书写在报销单右上角处,流程生成后可在列表中查看报销编号)</span>
+				<el-icon style="vertical-align: middle;margin-left: 8px;cursor: pointer;" size="24">
+					<Warning color="#fec25c" @click="handleShowReimbursementImage" />
+				</el-icon>
 			</el-divider>
 			<el-row>
 				<el-col :span="12">
@@ -83,6 +86,8 @@
 			</el-row>
 			<ReimbursementComponent ref="reimbursementComponent">
 			</ReimbursementComponent>
+			<!-- 报销单图片预览 -->
+			<ReimbursementImage ref="reimbursementImage"></ReimbursementImage>
 			<CwProgramPageForm ref="cwProgramPageForm" @getProgram="getProgram"></CwProgramPageForm>
 			<CwProgramPageForm2 ref="cwProgramPageForm3" @getProgram="getProgram3"></CwProgramPageForm2>
 			<CwProgramPageForm ref="cwProgramPageForm4" @getProgram="getProgram4"></CwProgramPageForm>
@@ -140,6 +145,7 @@ import CwProgramPageForm2 from './CwProgramPageForm2'
 import userService from '@/api/sys/UserService'
 import taskService from "@/api/flowable/taskService.js";
 import ReimbursementComponent from '@/views/common/reimbursement/ReimbursementComponent.vue'
+import ReimbursementImage from '@/views/common/reimbursement/ReimbursementImage.vue'
 
 export default {
 	props: {
@@ -320,7 +326,8 @@ export default {
 		// PurchaseChooseForm,
 		// MaterialManagementDialog,
 		ProjectListForm,
-		ReimbursementComponent
+		ReimbursementComponent,
+		ReimbursementImage
 	},
 	computed: {
 		bus: {
@@ -2126,6 +2133,10 @@ export default {
 				this.tableData = this.inputForm.detailInfoOthers
 			}
 		},
+		//报销单图片预览
+		handleShowReimbursementImage() {
+			this.$refs.reimbursementImage.visible = true
+		}
 	}
 }
 </script>

+ 12 - 610
src/views/reimbursement/info/NewReimbursementForm.vue

@@ -6,6 +6,9 @@
 
 			<el-divider content-position="left"><i class="el-icon-document"></i> 基础信息
 				<span style="color: red;">(每个报销流程仅针对一张白色或蓝色报销单。提交报销单时需要将报销编号书写在报销单右上角处,流程生成后可在列表中查看报销编号)</span>
+				<el-icon style="vertical-align: middle;margin-left: 8px;cursor: pointer;" size="24">
+					<Warning color="#fec25c" @click="handleShowReimbursementImage" />
+				</el-icon>
 			</el-divider>
 			<el-row>
 				<el-col :span="12">
@@ -90,615 +93,8 @@
 
 			<ReimbursementComponent ref="reimbursementComponent">
 			</ReimbursementComponent>
-
-
-			<!-- <div v-if="inputForm.sourceType === '5'">
-				<el-divider content-position="left"><i class="el-icon-document"></i>
-					采购详情
-				</el-divider>
-				<el-row :gutter="15">
-					<el-col :span="24">
-						<vxe-table border show-footer show-overflow :footer-method="footerMethod555" ref="preTable"
-							class="vxe-table-element" :data="inputForm.preList" style="margin-left: 5em" @cell-click=""
-							@edit-closed="" highlight-current-row>
-							<vxe-table-column field="purchaserAgent" title="采购人" :edit-render="{}" show-overflow="title"
-								:rules="[{ required: true, message: '请选择采购人', trigger: 'blur' }]"></vxe-table-column>
-							<vxe-table-column field="procurementOffice" title="采购部门" :edit-render="{}"
-								show-overflow="title"></vxe-table-column>
-							<vxe-table-column field="procurementType" title="采购类型" :edit-render="{}"
-								show-overflow="title"
-								:rules="[{ required: true, message: '请选择采购类型', trigger: 'blur' }]"></vxe-table-column>
-							<vxe-table-column field="tradeName" title="商品名称" :edit-render="{}" show-overflow="title"
-								:rules="[{ required: true, message: '请填写商品名称', trigger: 'blur' }]"></vxe-table-column>
-							<vxe-table-column field="tradePrice" title="商品单价(元)" :edit-render="{}" show-overflow="title"
-								:rules="[{ required: true, message: '请输入商品单价', trigger: 'blur' }]"></vxe-table-column>
-							<vxe-table-column field="tradeNumber" title="商品数量" :edit-render="{}"
-								show-overflow="title"></vxe-table-column>
-							<vxe-table-column field="priceSum" title="商品总价" :edit-render="{}"
-								show-overflow="title"></vxe-table-column>
-							<vxe-table-column field="company" title="单位" :edit-render="{}"
-								show-overflow="title"></vxe-table-column>
-							<vxe-table-column field="remarks" title="备注" :edit-render="{}"
-								show-overflow="title"></vxe-table-column>
-							<vxe-table-column title="操作">
-								<template v-slot="scope">
-									<el-button size="default" type="primary" :disabled="false"
-										@click="seeFileInfo(scope.$rowIndex)">文件详情</el-button>
-								</template>
-</vxe-table-column>
-</vxe-table>
-</el-col>
-
-</el-row>
-</div>
-<div v-if="(status === 'taskFormDetail') && inputForm.sourceType === '1'">
-	<el-divider content-position="left"><i class="el-icon-document"></i>项目报销详情2</el-divider>
-	<el-row :gutter="15">
-		<el-col :span="24">
-			<vxe-table border show-footer show-overflow :footer-method="footerMethod" ref="detailTable" :key="detailKey"
-				class="vxe-table-element" :data="inputForm.detailInfos" style="margin-left: 5em"
-				:row-config="{ keyField: 'uniqueId' }"
-				:expand-config="{ expandAll: false, accordion: false, toggleMethod: handleExpand, expandRowKeys: handleDefaultExpand() }">
-				<vxe-column type="expand" width="80">
-					<template #content="{ row, rowIndex }">
-									<InvoiceReimbursementUpLoadComponent v-if="row.reimbursementType == 1"
-										@changeConfirmList="changeConfirmList" @handleCount="handleCount"
-										@handleUploadSuccess="handleUploadSuccess" :ref="row.uniqueId + 'Upload'"
-										v-show="'1' === this.inputForm.reimbursementType">
-									</InvoiceReimbursementUpLoadComponent>
-
-
-									<UpLoadComponent @handleUploadSuccess="handleUploadSuccess"
-										v-if="row.reimbursementType == 0" :ref="row.uniqueId + 'UploadFiles'">
-									</UpLoadComponent>
-
-								</template>
-				</vxe-column>
-				<vxe-table-column field="userName" title="报销人" align="center" show-overflow="title"></vxe-table-column>
-				<vxe-table-column field="deptName" title="报销部门" align="center" show-overflow="title"></vxe-table-column>
-				<vxe-table-column field="reimbursementType" title="报销类型" :edit-render="{}" show-overflow="title">
-					<template #default="scope">
-									<span>{{ $dictUtils.getDictLabel('reimbursement_type', scope.row.reimbursementType,
-										'') }}</span>
-								</template>
-				</vxe-table-column>
-				<vxe-table-column field="typeName" title="报销类别" align="center" show-overflow="title"></vxe-table-column>
-				<vxe-table-column field="projectName" title="报销项目" align="center" show-overflow="title">
-					<template #default="scope">
-									<el-link type="primary" :underline="false"
-										v-if="commonJS.isNotEmpty(scope.row.projectId)"
-										@click="viewProject(scope.row.projectId)">{{ scope.row.projectName }}</el-link>
-									<span v-else>{{ scope.row.projectName }}</span>
-								</template>
-				</vxe-table-column>
-				<vxe-table-column field="reportNumber" title="报告号" align="center"
-					show-overflow="title"></vxe-table-column>
-				<vxe-table-column field="number" title="费用(元)" align="center" show-overflow="title"></vxe-table-column>
-				<vxe-table-column field="receiptNumber" title="收据张数" align="center"
-					show-overflow="title"></vxe-table-column>
-				<vxe-table-column field="days" title="出差天数" align="center" show-overflow="title"></vxe-table-column>
-				<vxe-table-column field="content" title="内容" align="center" show-overflow="title"></vxe-table-column>
-			</vxe-table>
-		</el-col>
-
-	</el-row>
-</div>
-<div v-else-if="(status !== 'taskFormDetail') && inputForm.sourceType === '1'">
-	<el-divider content-position="left"><i class="el-icon-document"></i>
-		项目报销详情1
-		<el-button style="margin-left: 20px" type="primary"
-			:disabled="method === 'view' || status === 'audit' || status === 'taskFormDetail'" size="default"
-			@click="insertEvent('detail')" plain>
-			新增
-		</el-button>
-	</el-divider>
-	<el-row :gutter="15">
-		<el-col :span="24">
-			<vxe-table border show-footer show-overflow :footer-method="footerMethod" ref="detailTable" :key="detailKey"
-				class="vxe-table-element" :data="inputForm.detailInfos" style="margin-left: 5em" @cell-click=""
-				@edit-closed="" highlight-current-row
-				:edit-config="{ trigger: 'click', mode: 'row', showStatus: true, autoClear: true, icon: '_' }"
-				:edit-rules="validRules" :row-config="{ keyField: 'uniqueId' }"
-				:expand-config="{ expandAll: false, accordion: false, toggleMethod: handleExpand, expandRowKeys: handleDefaultExpand() }">
-				<vxe-column type="expand" width="80">
-					<template #content="{ row, rowIndex }">
-									<InvoiceReimbursementUpLoadComponent v-if="row.reimbursementType == 1"
-										@changeConfirmList="changeConfirmList" @handleCount="handleCount"
-										@handleUploadSuccess="handleUploadSuccess" :ref="row.uniqueId + 'Upload'"
-										v-show="'1' === this.inputForm.reimbursementType">
-									</InvoiceReimbursementUpLoadComponent>
-
-
-									<UpLoadComponent @handleUploadSuccess="handleUploadSuccess"
-										v-if="row.reimbursementType == 0" :ref="row.uniqueId + 'UploadFiles'">
-									</UpLoadComponent>
-
-								</template>
-				</vxe-column>
-				<vxe-table-column field="userName" title="报销人" :edit-render="{}" show-overflow="title"
-					:rules="[{ required: true, message: '请选择报销人', trigger: 'blur' }]">
-					<template #edit="scope">
-									<el-input v-model="scope.row.userName"
-										@focus="userPullListForm(scope.$rowIndex)"></el-input>
-								</template>
-				</vxe-table-column>
-				<vxe-table-column field="deptName" title="报销部门" :edit-render="{}" show-overflow="title">
-					<template #edit="scope">
-									<el-input :disabled='true' v-model="scope.row.deptName"></el-input>
-								</template>
-				</vxe-table-column>
-				<vxe-table-column field="reimbursementType" title="报销类型" :edit-render="{}" show-overflow="title">
-					<template #default="{ row }">
-									<span>{{ $dictUtils.getDictLabel('reimbursement_type', row.reimbursementType,
-										'') }}</span>
-								</template>
-					<template #edit="{ row }">
-									<vxe-select
-										:disabled="method === 'view' || status === 'audit' || status === 'taskFormDetail'"
-										@change="handleChangeType" v-model="row.reimbursementType" placeholder="请选择报销类型"
-										transfer>
-										<vxe-option v-for="item in $dictUtils.getDictList('reimbursement_type')"
-											:key="item.value" :value="item.value" :label="item.label"></vxe-option>
-									</vxe-select>
-								</template>
-				</vxe-table-column>
-				<vxe-table-column field="typeName" title="报销类别" :edit-render="{}"
-					:rules="[{ required: true, message: '请选择报销类别', trigger: 'blur' }]">
-					<template #edit="scope">
-									<el-input v-model="scope.row.typeName"
-										@focus="typePullForm(scope.$rowIndex, scope.row.deptId)"></el-input>
-								</template>
-				</vxe-table-column>
-				<vxe-table-column field="projectName" title="报销项目" :edit-render="{}" show-overflow="title"
-					:rules="[{ required: true, message: '请选择报销项目', trigger: 'blur' }]">
-					<template #edit="scope">
-									<el-input v-model="scope.row.projectName"
-										@focus="openProgramPageForm(scope.$rowIndex, scope.row)"></el-input>
-								</template>
-				</vxe-table-column>
-				<vxe-table-column field="reportNumber" title="报告号" :edit-render="{}" show-overflow="title">
-					<template #edit="scope">
-									<el-input :readonly="true" v-model="scope.row.reportNumber"></el-input>
-								</template>
-				</vxe-table-column>
-				<vxe-table-column field="number" title="费用(元)" :edit-render="{}" show-overflow="title"
-					:rules="[{ required: true, message: '请输入费用', trigger: 'blur' }]">
-					<template #edit="scope">
-									<el-input maxlength="15" v-model="scope.row.number"
-										@input="scope.row.number = twoDecimalPlaces(scope.row.number)"></el-input>
-								</template>
-				</vxe-table-column>
-				<vxe-table-column field="receiptNumber" title="收据张数" :edit-render="{}" show-overflow="title">
-					<template #edit="scope">
-									<el-input v-model="scope.row.receiptNumber"
-										oninput="value=value.replace(/\D|^0/g,'')" maxlength="10"></el-input>
-								</template>
-				</vxe-table-column>
-				<vxe-table-column field="days" title="出差天数" :edit-render="{}" show-overflow="title">
-					<template #edit="scope">
-									<el-input v-model="scope.row.days" oninput="value=value.replace(/\D|^0/g,'')"
-										maxlength="10"></el-input>
-								</template>
-				</vxe-table-column>
-				<vxe-table-column field="content" title="内容" :edit-render="{}" show-overflow="title">
-					<template #edit="scope">
-									<el-input v-model="scope.row.content"></el-input>
-								</template>
-				</vxe-table-column>
-				<vxe-table-column title="操作" width="180">
-					<template #default="scope">
-									<el-button size="default" @click="uploadFile(scope.row, scope.$rowIndex,)"
-										type="primary">上传</el-button>
-									<el-button size="default" type="danger"
-										@click="removeEvent(scope.row, scope.$rowIndex, 'detail')">删除</el-button>
-								</template>
-				</vxe-table-column>
-			</vxe-table>
-		</el-col>
-
-	</el-row>
-</div>
-<div v-if="inputForm.sourceType === '2'">
-	<el-divider content-position="left"><i class="el-icon-document"></i>
-		合同报销详情
-		<el-button style="margin-left: 20px" type="primary"
-			:disabled="method === 'view' || status === 'audit' || status === 'taskFormDetail'" size="default"
-			@click="insertEvent('contract_detail')" plain>
-			新增
-		</el-button>
-	</el-divider>
-	<el-row :gutter="15">
-		<el-col :span="24">
-			<vxe-table border show-footer show-overflow :footer-method="footerMethod" ref="detailTableContract"
-				:key="detailKeyContract" class="vxe-table-element" :data="inputForm.detailInfoContracts"
-				style="margin-left: 5em" @cell-click="" @edit-closed="" highlight-current-row
-				:edit-config="{ trigger: 'click', mode: 'row', showStatus: true, autoClear: true, icon: '_' }"
-				:edit-rules="validRules">
-				<vxe-table-column field="userName" title="报销人" :edit-render="{}" show-overflow="title"
-					:rules="[{ required: true, message: '请选择报销人', trigger: 'blur' }]">
-					<template #edit="scope">
-									<el-input v-model="scope.row.userName"
-										@focus="userPullListForm2(scope.$rowIndex)"></el-input>
-								</template>
-				</vxe-table-column>
-				<vxe-table-column field="deptName" title="报销部门" :edit-render="{}" show-overflow="title">
-					<template #edit="scope">
-									<el-input :disabled='true' v-model="scope.row.deptName"></el-input>
-								</template>
-				</vxe-table-column>
-				<vxe-table-column field="typeName" title="报销类别" :edit-render="{}"
-					:rules="[{ required: true, message: '请选择报销类别', trigger: 'blur' }]">
-					<template #edit="scope">
-									<el-input v-model="scope.row.typeName"
-										@focus="typePullForm2(scope.$rowIndex, scope.row.deptId)"></el-input>
-								</template>
-				</vxe-table-column>
-				<vxe-table-column field="contractName" title="报销合同" :edit-render="{}" show-overflow="title"
-					:rules="[{ required: true, message: '请选择报销合同', trigger: 'blur' }]">
-					<template #edit="scope">
-									<el-input v-model="scope.row.contractName"
-										@focus="openContractForm(scope.$rowIndex, scope.row)"></el-input>
-								</template>
-				</vxe-table-column>
-				<vxe-table-column field="number" title="费用(元)" :edit-render="{}" show-overflow="title"
-					:rules="[{ required: true, message: '请输入费用', trigger: 'blur' }]">
-					<template #edit="scope">
-									<el-input maxlength="15" v-model="scope.row.number"
-										@input="scope.row.number = twoDecimalPlaces(scope.row.number)"></el-input>
-								</template>
-				</vxe-table-column>
-				<vxe-table-column field="receiptNumber" title="收据张数" :edit-render="{}" show-overflow="title">
-					<template #edit="scope">
-									<el-input v-model="scope.row.receiptNumber"
-										oninput="value=value.replace(/\D|^0/g,'')" maxlength="10"></el-input>
-								</template>
-				</vxe-table-column>
-				<vxe-table-column field="days" title="出差天数" :edit-render="{}" show-overflow="title">
-					<template #edit="scope">
-									<el-input v-model="scope.row.days" oninput="value=value.replace(/\D|^0/g,'')"
-										maxlength="10"></el-input>
-								</template>
-				</vxe-table-column>
-				<vxe-table-column field="content" title="内容" :edit-render="{}" show-overflow="title">
-					<template #edit="scope">
-									<el-input v-model="scope.row.content"></el-input>
-								</template>
-				</vxe-table-column>
-				<vxe-table-column title="操作" width="100">
-					<template #default="scope">
-									<el-button size="default" type="danger"
-										@click="removeEvent(scope.row, scope.$rowIndex, 'contract_detail')">删除</el-button>
-								</template>
-				</vxe-table-column>
-			</vxe-table>
-		</el-col>
-
-	</el-row>
-</div>
-<div v-if="inputForm.sourceType === '3'">
-	<el-divider content-position="left"><i class="el-icon-document"></i>
-		报告报销详情
-		<el-button style="margin-left: 20px" type="primary"
-			:disabled="method === 'view' || status === 'audit' || status === 'taskFormDetail'" size="default"
-			@click="insertEvent('report_detail')" plain>
-			新增
-		</el-button>
-	</el-divider>
-	<el-row :gutter="15">
-		<el-col :span="24">
-			<vxe-table border show-footer show-overflow :footer-method="footerMethod" ref="detailTableReport"
-				:key="detailKeyReport" class="vxe-table-element" :data="inputForm.detailInfoReports"
-				style="margin-left: 5em" @cell-click="" @edit-closed="" highlight-current-row
-				:edit-config="{ trigger: 'click', mode: 'row', showStatus: true, autoClear: true, icon: '_' }"
-				:edit-rules="validRules">
-				<vxe-table-column field="userName" title="报销人" :edit-render="{}" show-overflow="title"
-					:rules="[{ required: true, message: '请选择报销人', trigger: 'blur' }]">
-					<template #edit="scope">
-									<el-input v-model="scope.row.userName"
-										@focus="userPullListForm3(scope.$rowIndex)"></el-input>
-								</template>
-				</vxe-table-column>
-				<vxe-table-column field="deptName" title="报销部门" :edit-render="{}" show-overflow="title">
-					<template #edit="scope">
-									<el-input :disabled='true' v-model="scope.row.deptName"></el-input>
-								</template>
-				</vxe-table-column>
-				<vxe-table-column field="typeName" title="报销类别" :edit-render="{}"
-					:rules="[{ required: true, message: '请选择报销类别', trigger: 'blur' }]">
-					<template #edit="scope">
-									<el-input v-model="scope.row.typeName"
-										@focus="typePullForm3(scope.$rowIndex, scope.row.deptId)"></el-input>
-								</template>
-				</vxe-table-column>
-				<vxe-table-column field="projectName" title="报销项目" :edit-render="{}" show-overflow="title"
-					:rules="[{ required: true, message: '请选择报销项目', trigger: 'blur' }]">
-					<template #edit="scope">
-									<el-input v-model="scope.row.projectName"
-										@focus="openProgramPageForm3(scope.$rowIndex, scope.row)"></el-input>
-								</template>
-				</vxe-table-column>
-				<vxe-table-column field="reportNumber" title="报告号" :edit-render="{}" show-overflow="title">
-					<template #edit="scope">
-									<el-input :readonly="true" v-model="scope.row.reportNumber"
-										@focus="openReportNoPageForm(scope.$rowIndex, scope.row)"></el-input>
-								</template>
-				</vxe-table-column>
-				<vxe-table-column field="number" title="费用(元)" :edit-render="{}" show-overflow="title"
-					:rules="[{ required: true, message: '请输入费用', trigger: 'blur' }]">
-					<template #edit="scope">
-									<el-input maxlength="15" v-model="scope.row.number"
-										@input="scope.row.number = twoDecimalPlaces(scope.row.number)"></el-input>
-								</template>
-				</vxe-table-column>
-				<vxe-table-column field="receiptNumber" title="收据张数" :edit-render="{}" show-overflow="title">
-					<template #edit="scope">
-									<el-input v-model="scope.row.receiptNumber"
-										oninput="value=value.replace(/\D|^0/g,'')" maxlength="10"></el-input>
-								</template>
-				</vxe-table-column>
-				<vxe-table-column field="days" title="出差天数" :edit-render="{}" show-overflow="title">
-					<template #edit="scope">
-									<el-input v-model="scope.row.days" oninput="value=value.replace(/\D|^0/g,'')"
-										maxlength="10"></el-input>
-								</template>
-				</vxe-table-column>
-				<vxe-table-column field="content" title="内容" :edit-render="{}" show-overflow="title">
-					<template #edit="scope">
-									<el-input v-model="scope.row.content"></el-input>
-								</template>
-				</vxe-table-column>
-				<vxe-table-column title="操作" width="100">
-					<template #default="scope">
-									<el-button size="default" type="danger"
-										@click="removeEvent(scope.row, scope.$rowIndex, 'report_detail')">删除</el-button>
-								</template>
-				</vxe-table-column>
-			</vxe-table>
-		</el-col>
-
-	</el-row>
-</div>
-<div v-if="inputForm.sourceType === '4'">
-	<el-divider content-position="left"><i class="el-icon-document"></i>
-		其他报销详情
-		<el-button style="margin-left: 20px" type="primary"
-			:disabled="method === 'view' || status === 'audit' || status === 'taskFormDetail'" size="default"
-			@click="insertEvent('others')" plain>
-			新增
-		</el-button>
-	</el-divider>
-	<el-row :gutter="15">
-		<el-col :span="24">
-			<vxe-table border show-footer show-overflow :footer-method="footerMethod" ref="detailTableOthers"
-				class="vxe-table-element" :data="inputForm.detailInfoOthers" style="margin-left: 5em"
-				:key="detailKeyOthers" @cell-click="" @edit-closed="" highlight-current-row
-				:edit-config="{ trigger: 'click', mode: 'row', showStatus: true, autoClear: true, icon: '_' }"
-				:edit-rules="validRules" :row-config="{ keyField: 'uniqueId' }"
-				:expand-config="{ expandAll: false, accordion: false, toggleMethod: handleExpand, expandRowKeys: handleDefaultExpand() }">
-				<vxe-column type="expand" width="80">
-					<template #content="{ row, rowIndex }">
-									<InvoiceReimbursementUpLoadComponent v-if="row.reimbursementType == 1"
-										@changeConfirmList="changeConfirmList" @handleCount="handleCount"
-										@handleUploadSuccess="handleUploadSuccess" :ref="row.uniqueId + 'Upload'"
-										v-show="'1' === this.inputForm.reimbursementType">
-									</InvoiceReimbursementUpLoadComponent>
-									<UpLoadComponent @handleUploadSuccess="handleUploadSuccess"
-										v-if="row.reimbursementType == 0" :ref="row.uniqueId + 'UploadFiles'">
-									</UpLoadComponent>
-								</template>
-				</vxe-column>
-				<vxe-table-column field="userName" title="报销人" :edit-render="{}" show-overflow="title"
-					:rules="[{ required: true, message: '请选择报销人', trigger: 'blur' }]">
-					<template #edit="scope">
-									<el-input v-model="scope.row.userName"
-										@focus="userPullListForm4(scope.$rowIndex)"></el-input>
-								</template>
-				</vxe-table-column>
-				<vxe-table-column field="deptName" title="报销部门" :edit-render="{}" show-overflow="title">
-					<template #edit="scope">
-									<el-input :disabled='true' v-model="scope.row.deptName"></el-input>
-								</template>
-				</vxe-table-column>
-				<vxe-table-column field="reimbursementType" title="报销类型" :edit-render="{}" show-overflow="title">
-					<template #default="{ row }">
-									<span>{{ $dictUtils.getDictLabel('reimbursement_type', row.reimbursementType,
-										'') }}</span>
-								</template>
-					<template #edit="{ row }">
-									<vxe-select
-										:disabled="method === 'view' || status === 'audit' || status === 'taskFormDetail'"
-										@change="handleChangeType" v-model="row.reimbursementType" placeholder="请选择报销类型"
-										transfer>
-										<vxe-option v-for="item in $dictUtils.getDictList('reimbursement_type')"
-											:key="item.value" :value="item.value" :label="item.label"></vxe-option>
-									</vxe-select>
-								</template>
-				</vxe-table-column>
-				<vxe-table-column field="typeName" title="报销类别" :edit-render="{}"
-					:rules="[{ required: true, message: '请选择报销类别', trigger: 'blur' }]">
-					<template #edit="scope">
-									<el-input v-model="scope.row.typeName"
-										@focus="typePullForm4(scope.$rowIndex, scope.row.deptId)"></el-input>
-								</template>
-				</vxe-table-column>
-				<vxe-table-column field="projectName" title="报销详情" :edit-render="{}" show-overflow="title"
-					:rules="[{ required: true, message: '请填写报销详情', trigger: 'blur' }]">
-					<template #edit="scope">
-									<el-input v-model="scope.row.projectName"
-										@focus="openProgramPageForm4(scope.$rowIndex, scope.row)"></el-input>
-								</template>
-				</vxe-table-column>
-				<vxe-table-column field="number" title="费用(元)" :edit-render="{}" show-overflow="title"
-					:rules="[{ required: true, message: '请输入费用', trigger: 'blur' }]">
-					<template #edit="scope">
-									<el-input maxlength="15" v-model="scope.row.number"
-										@input="scope.row.number = twoDecimalPlaces(scope.row.number)"></el-input>
-								</template>
-				</vxe-table-column>
-				<vxe-table-column field="receiptNumber" title="收据张数" :edit-render="{}" show-overflow="title">
-					<template #edit="scope">
-									<el-input v-model="scope.row.receiptNumber"
-										oninput="value=value.replace(/\D|^0/g,'')" maxlength="10"></el-input>
-								</template>
-				</vxe-table-column>
-				<vxe-table-column field="days" title="出差天数" :edit-render="{}" show-overflow="title">
-					<template #edit="scope">
-									<el-input v-model="scope.row.days" oninput="value=value.replace(/\D|^0/g,'')"
-										maxlength="10"></el-input>
-								</template>
-				</vxe-table-column>
-				<vxe-table-column field="content" title="内容" :edit-render="{}" show-overflow="title">
-					<template #edit="scope">
-									<el-input v-model="scope.row.content"></el-input>
-								</template>
-				</vxe-table-column>
-				<vxe-table-column title="操作" width="180">
-					<template #default="scope">
-									<el-button size="default" @click="uploadFile(scope.row, scope.$rowIndex,)"
-										type="primary">上传</el-button>
-									<el-button size="default" type="danger"
-										@click="removeEvent(scope.row, scope.$rowIndex, 'others')">删除</el-button>
-								</template>
-				</vxe-table-column>
-			</vxe-table>
-		</el-col>
-
-	</el-row>
-</div>
-<div v-if="inputForm.sourceType === '5'">
-	<el-divider content-position="left"><i class="el-icon-document"></i>
-		采购报销详情
-		<el-button style="margin-left: 20px" type="primary"
-			:disabled="method === 'view' || status === 'audit' || status === 'taskFormDetail'" size="default"
-			@click="insertEvent('procured')" plain>
-			新增
-		</el-button>
-	</el-divider>
-	<el-row :gutter="15">
-		<el-col :span="24">
-			<vxe-table border show-footer show-overflow :footer-method="footerMethod" ref="detailTableProcured"
-				class="vxe-table-element" :data="inputForm.detailInfoProcured" style="margin-left: 5em"
-				:key="detailKeyProcured" @cell-click="" @edit-closed="" highlight-current-row
-				:edit-config="{ trigger: 'click', mode: 'row', showStatus: true, autoClear: true, icon: '_' }"
-				:edit-rules="validRules">
-				<vxe-table-column field="userName" title="报销人" :edit-render="{}" show-overflow="title"
-					:rules="[{ required: true, message: '请选择报销人', trigger: 'blur' }]">
-					<template #edit="scope">
-									<el-input v-model="scope.row.userName"
-										@focus="userPullListForm5(scope.$rowIndex)"></el-input>
-								</template>
-				</vxe-table-column>
-				<vxe-table-column field="deptName" title="报销部门" :edit-render="{}" show-overflow="title">
-					<template #edit="scope">
-									<el-input :disabled='true' v-model="scope.row.deptName"></el-input>
-								</template>
-				</vxe-table-column>
-				<vxe-table-column field="typeName" title="报销类别" :edit-render="{}"
-					:rules="[{ required: true, message: '请选择报销类别', trigger: 'blur' }]">
-					<template #edit="scope">
-									<el-input v-model="scope.row.typeName"
-										@focus="typePullForm5(scope.$rowIndex, scope.row.deptId)"></el-input>
-								</template>
-				</vxe-table-column>
-				<vxe-table-column field="projectName" title="报销项目" :edit-render="{}" show-overflow="title"
-					:rules="[{ required: true, message: '请选择报销项目', trigger: 'blur' }]">
-					<template #edit="scope">
-									<el-input v-model="scope.row.projectName"
-										@focus="openProgramPageForm5(scope.$rowIndex, scope.row)"></el-input>
-								</template>
-				</vxe-table-column>
-				<vxe-table-column field="number" title="费用(元)" :edit-render="{}" show-overflow="title"
-					:rules="[{ required: true, message: '请输入费用', trigger: 'blur' }]">
-					<template #edit="scope">
-									<el-input maxlength="15" v-model="scope.row.number"
-										@input="scope.row.number = twoDecimalPlaces(scope.row.number)"></el-input>
-								</template>
-				</vxe-table-column>
-				<vxe-table-column field="receiptNumber" title="收据张数" :edit-render="{}" show-overflow="title">
-					<template #edit="scope">
-									<el-input v-model="scope.row.receiptNumber"
-										oninput="value=value.replace(/\D|^0/g,'')" maxlength="10"></el-input>
-								</template>
-				</vxe-table-column>
-				<vxe-table-column field="days" title="出差天数" :edit-render="{}" show-overflow="title">
-					<template #edit="scope">
-									<el-input v-model="scope.row.days" oninput="value=value.replace(/\D|^0/g,'')"
-										maxlength="10"></el-input>
-								</template>
-				</vxe-table-column>
-				<vxe-table-column field="content" title="内容" :edit-render="{}" show-overflow="title">
-					<template #edit="scope">
-									<el-input v-model="scope.row.content"></el-input>
-								</template>
-				</vxe-table-column>
-				<vxe-table-column title="操作" width="100">
-					<template #default="scope">
-									<el-button size="default" type="danger"
-										@click="removeEvent(scope.row, scope.$rowIndex, 'procured')">删除</el-button>
-								</template>
-				</vxe-table-column>
-			</vxe-table>
-		</el-col>
-	</el-row>
-</div>
-<div v-if="inputForm.reimbursementType === '0'">
-	<el-divider content-position="left"><i class="el-icon-document"></i>
-		专用发票信息
-		<el-button style="margin-left: 20px" type="primary"
-			:disabled="method === 'view' || status === 'audit' || status === 'taskFormDetail'" size="default"
-			@click="insertEvent('amount')" plain>
-			新增
-		</el-button>
-	</el-divider>
-	<el-row :gutter="15">
-		<el-col :span="24">
-			<vxe-table border show-footer show-overflow ref="amountTable" class="vxe-table-element"
-				:data="inputForm.amountInfos" style="margin-left: 5em" @cell-click="" :key="amountKey" @edit-closed=""
-				highlight-current-row
-				:edit-config="{ trigger: 'click', mode: 'cell', showStatus: true, autoClear: true }"
-				:edit-rules="amountInfoRules">
-				<vxe-table-column field="code" title="发票代码" :edit-render="{}" show-overflow="title">
-					<template #edit="scope">
-									<el-input oninput="value=value.replace(/\D|^/g,'')" maxlength="30"
-										v-model="scope.row.code"></el-input>
-								</template>
-				</vxe-table-column>
-				<vxe-table-column field="number" title="发票号" :edit-render="{}" show-overflow="title">
-					<template #edit="scope">
-									<el-input oninput="value=value.replace(/\D|^/g,'')" maxlength="30"
-										@change="isExict(scope.row)" v-model="scope.row.number"></el-input>
-								</template>
-				</vxe-table-column>
-				<vxe-table-column field="amount" title="金额" :edit-render="{}" show-overflow="title">
-					<template #edit="scope">
-									<el-input maxlength="15" v-model="scope.row.amount"
-										@input="scope.row.amount = twoDecimalPlaces(scope.row.amount)"
-										@change="countAmount(scope.row)"></el-input>
-								</template>
-				</vxe-table-column>
-				<vxe-table-column field="taxAmount" title="税额" :edit-render="{}" show-overflow="title">
-					<template #edit="scope">
-									<el-input maxlength="15" v-model="scope.row.taxAmount"
-										@input="scope.row.taxAmount = twoDecimalPlaces(scope.row.taxAmount)"
-										@change="countAmount(scope.row)"></el-input>
-								</template>
-				</vxe-table-column>
-				<vxe-table-column field="count" title="价税合计" :edit-render="{}" show-overflow="title">
-					<template #edit="scope">
-									<el-input disabled="true" v-model="scope.row.count"></el-input>
-								</template>
-				</vxe-table-column>
-				<vxe-table-column title="操作" width="100">
-					<template #default="scope">
-									<el-button size="default" type="danger"
-										@click="removeEvent(scope.row, scope.$rowIndex, 'amount')">删除</el-button>
-								</template>
-				</vxe-table-column>
-			</vxe-table>
-		</el-col>
-	</el-row>
-</div> -->
-
+			<!-- 报销单图片预览 -->
+			<ReimbursementImage ref="reimbursementImage"></ReimbursementImage>
 		</el-form>
 		<!-- 附件 -->
 		<ProgramPageForm ref="programPageForm" @getProgram="getProgram"></ProgramPageForm>
@@ -752,6 +148,7 @@ import processService from '@/api/flowable/processService'
 // import MaterialManagementDialog from '@/views/materialManagement/file/MaterialManagementDialog'
 import ProjectListForm from './ProgramForm'
 import ReimbursementComponent from '@/views/common/reimbursement/ReimbursementComponent.vue'
+import ReimbursementImage from '@/views/common/reimbursement/ReimbursementImage.vue'
 
 export default {
 	data() {
@@ -927,7 +324,8 @@ export default {
 		// PurchaseChooseForm,
 		// MaterialManagementDialog,
 		ProjectListForm,
-		ReimbursementComponent
+		ReimbursementComponent,
+		ReimbursementImage
 	},
 	computed: {
 		bus: {
@@ -2606,6 +2004,10 @@ export default {
 				this.inputForm.detailInfoProcured = inputForm.detailInfoProcured
 				this.inputForm.invoiceReimbursementFiles = inputForm.invoiceReimbursementFiles
 			});
+		},
+		//报销单图片预览
+		handleShowReimbursementImage() {
+			this.$refs.reimbursementImage.visible = true
 		}
 	}
 }

+ 12 - 2
src/views/zs/reimbursement/info/NewReimbursementForm.vue

@@ -6,6 +6,9 @@
 
       <el-divider content-position="left"><i class="el-icon-document"></i> 基础信息
         <span style="color: red;">(每个报销流程仅针对一张白色或蓝色报销单。提交报销单时需要将报销编号书写在报销单右上角处,流程生成后可在列表中查看报销编号)</span>
+        <el-icon style="vertical-align: middle;margin-left: 8px;cursor: pointer;" size="24">
+          <Warning color="#fec25c" @click="handleShowReimbursementImage" />
+        </el-icon>
       </el-divider>
       <el-row>
         <el-col :span="12">
@@ -81,7 +84,8 @@
 
       <ReimbursementComponent ref="reimbursementComponent">
       </ReimbursementComponent>
-
+      <!-- 报销单图片预览 -->
+      <ReimbursementImage ref="reimbursementImage"></ReimbursementImage>
       <!--		<div v-if="inputForm.reimbursementType === '1'">-->
       <!--			<el-divider content-position="left">-->
       <!--				数电发票信息-->
@@ -240,6 +244,7 @@ import processService from '@/api/flowable/processService'
 //import MaterialManagementDialog from '../../../'
 import userService from '@/api/sys/UserService'
 import ReimbursementComponent from '@/views/common/reimbursement/ReimbursementComponent.vue'
+import ReimbursementImage from '@/views/common/reimbursement/ReimbursementImage.vue'
 export default {
   props: {
     businessId: {
@@ -419,7 +424,8 @@ export default {
     WorkContractChooseCom,
     // PurchaseChooseForm,
     // MaterialManagementDialog
-    ReimbursementComponent
+    ReimbursementComponent,
+    ReimbursementImage
   },
   computed: {
     bus: {
@@ -2155,6 +2161,10 @@ export default {
         this.inputForm.detailInfoProcured = inputForm.detailInfoProcured
         this.inputForm.invoiceReimbursementFiles = inputForm.invoiceReimbursementFiles
       });
+    },
+    //报销单图片预览
+    handleShowReimbursementImage() {
+      this.$refs.reimbursementImage.visible = true
     }
   }
 }