【fix:bug88082】-工作组确认凭证修改成查看凭证

src/views/projectManagement/WorkingGroupMemberUnitMaintenance.vue

@@ -98,9 +98,9 @@
               </a-form-item>
             </a-col>
             <a-col :xl="6" :lg="7" :md="8" :sm="24">
-              <a-form-item label="是否确认凭证" :labelCol="labelCol" :wrapperCol="wrapperCol">
+              <a-form-item label="是否查看凭证" :labelCol="labelCol" :wrapperCol="wrapperCol">
                 <j-dict-select-tag v-model="queryParam.confirmVoucher"
-                                   placeholder="请选择是否确认凭证"
+                                   placeholder="请选择是否查看凭证"
                                    dictCode="yn"
                 />
               </a-form-item>
@@ -220,7 +220,7 @@
             <a @click="handleEditAccount(record)" :disabled="isAllowEditAccount(record)" v-has="'workingGroupMember:editAccount'">调账</a>
             <a @click="handleEdit(record)" v-has="'workingGroupMember:edit'">编辑</a>
             <a @click="handleDelete(record.id)" v-has="'workingGroupMember:delete'">删除</a>
-            <a @click="confirmVoucher(record.id)" v-show="!record.confirmVoucher" v-has="'workingGroupMember:confirmVoucher'">确认凭证</a>
+            <a @click="lookVoucher(record)" v-show="!!record.paymentStatus" v-has="'workingGroupMember:confirmVoucher'">查看凭证</a>
           </span>
         </a-table>
       </div>
@@ -234,6 +234,8 @@
     <email-error-msg-modal ref="emailError"></email-error-msg-modal>
 
     <work-group-set-label ref="workGroupSetLabel" @ok="modalFormOk"></work-group-set-label>
+    <!--查看凭证-->
+    <look-voucher-modal ref="lookVoucherModal" @ok="modalFormOk"></look-voucher-modal>
   </div>
 </template>
 
@@ -256,6 +258,7 @@ import {YesOrNoEnums} from '@/enums/commonEnums'
 import { MonthRangeMixin } from '../../mixins/MonthRangeMixins'
 import { getAction } from '../../api/manage'
 import JMonthDate from '../../components/tools/JMonthDate'
+import LookVoucherModal from './modules/LookVoucherModal'
 
 // eslint-disable-next-line no-undef,no-unused-vars
 const Base64 = require('js-base64').Base64
@@ -272,7 +275,8 @@ export default {
     PreviewFile,
     EmailErrorMsgModal,
     WorkGroupSetLabel,
-    JMonthDate
+    JMonthDate,
+    LookVoucherModal
   },
   mixins: [JeroListMixin, MonthRangeMixin],
   computed: {
@@ -337,7 +341,7 @@ export default {
         exportXlsUrl: '/project/payWorkingGroupSubitem/exportXls',
         importExcelUrl: '/project/payWorkingGroupSubitem/importExcel',
         downTemplateUrl: '/project/payWorkingGroupSubitem/downloadExcelModel',
-        // 确认凭证
+        // 查看凭证
         confirmVoucher: '/project/payWorkingGroupSubitem/confirmVoucher'
       },
       columns: [
@@ -408,7 +412,7 @@ export default {
           scopedSlots: { customRender: 'status-pack' }
         },
         {
-          title: '确认凭证',
+          title: '查看凭证',
           align: 'center',
           fixed: 'right',
           dataIndex: 'confirmVoucher',
@@ -677,7 +681,10 @@ export default {
       this.queryParam.estimatedArrivalStartDate = dateString[0]
       this.queryParam.estimatedArrivalEndDate = dateString[1]
     },
-    // 确认凭证
+    // 查看凭证
+    lookVoucher(record) {
+      this.$refs.lookVoucherModal.open(record)
+    },
     confirmVoucher(id) {
       var that = this
       this.$confirm({

src/views/projectManagement/modules/LookVoucherModal.vue

@@ -0,0 +1,267 @@
+<template>
+  <j-modal
+    :title="title"
+    :width="width"
+    :visible="visible"
+    :confirmLoading="confirmLoading"
+    @cancel="handleCancel"
+    cancelText="关闭">
+    <a-spin :spinning="confirmLoading">
+      <div class="project-name">
+        <!--<div>{{ model.chargeProject }}</div>-->
+        <div>{{ model.chargeCompanyTemporaryName }}</div>
+      </div>
+      <h3 class="title">凭证信息</h3>
+      <div class="basic-info-div">
+        <!--其他项目的显示 -->
+        <template >
+          <a-form-item label="缴费金额" :labelCol="labelCol" :wrapperCol="wrapperCol">
+            <div>{{ proofInfo.amountReceived }}元</div>
+          </a-form-item>
+        </template>
+        <a-form-item label="缴费日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
+          <div>{{ proofInfo.paymentDate }}</div>
+        </a-form-item>
+        <a-form-item label="申请人" :labelCol="labelCol" :wrapperCol="wrapperCol">
+          <div>{{ proofInfo.applicantName }}</div>
+        </a-form-item>
+        <a-form-item v-if="proofType!=='pdf'" class="proof-form-item" :label="'缴费凭证'" :labelCol="labelCol"
+                     :wrapperCol="wrapperCol">
+          <div class="proof-img" v-if="proofType === 'img'">
+            <template v-if="proofInfo.proof && proofInfo.proof !== ''">
+              <div class="proof-img-item" v-for="(item, index) in proofInfo.proof.split(',')" :key="index">
+                <img :src="proofSrc(item)" @click="previewImg(item)">
+              </div>
+            </template>
+          </div>
+          <span v-if="proofType==='none'">无</span>
+        </a-form-item>
+        <a-form-item label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol">
+          <a-textarea
+            placeholder="请输入备注"
+            v-decorator="['remark']"
+            :auto-size="{ minRows: 3, maxRows: 6 }"
+            :maxLength='200'
+            @change="e => {e.target.value = (e.target.value + '').trim()}"/>
+        </a-form-item>
+      </div>
+    </a-spin>
+    <template slot="footer">
+      <a-button @click="handleCancel">关闭</a-button>
+      <!--<a-button type="primary" @click="handleOk" v-preventclick>确定</a-button>-->
+    </template>
+
+    <!--    缴费凭证预览-->
+    <preview-img-modal ref="previewImg"></preview-img-modal>
+  </j-modal>
+</template>
+
+<script>
+import { getAction } from '../../../api/manage'
+import PreviewImgModal from '@/components/PreviewImgModal'
+
+const labelCol = {
+  xs: {span: 24},
+  sm: {span: 3}
+}
+const wrapperCol = {
+  xs: {span: 24},
+  sm: {span: 21}
+}
+
+export default {
+  name: 'LookVoucherModal',
+  components: {PreviewImgModal},
+  data() {
+    return {
+      title: '查看凭证',
+      width: 600,
+      visible: false,
+      confirmLoading: false,
+      form: this.$form.createForm(this),
+      model: {},
+      labelCol,
+      wrapperCol,
+      labelPayCol: {
+        xs: {span: 24},
+        sm: {span: 8}
+      },
+      wrapperPayCol: {
+        xs: {span: 24},
+        sm: {span: 16}
+      },
+      url: {
+        // 工作组-确认查看凭证
+        confirmVoucher: '/project/payWorkingGroupSubitem/confirmVoucher',
+        // 获取最新一条缴费凭证
+        getLastProof: '/paymentCheck/payPaymentCheck/getLastProof',
+      },
+      // 项目缴费凭证信息
+      proofInfo: {},
+      // 是否显示说明
+      showInstructions: false,
+      // 缴费凭证的类型，默认为img，标协会员、证书根据paymentMethod字段决定：1--图片；2--pdf；3--没有凭证
+      proofType: 'img'
+    }
+  },
+  methods: {
+    /**
+     * 打开弹框， 需要调用 查看凭证的方法
+     * @param record-项目的record
+     */
+    open(record) {
+      this.model = Object.assign({}, record)
+      // 获取最新一条缴费凭证
+      this.getLastProof(record.id)
+      // 调用接口
+      this.lookVoucher(record.id)
+      this.visible = true
+    },
+    close() {
+      this.$emit('close')
+      this.visible = false
+      this.model = {}
+    },
+    handleCancel() {
+      this.close()
+      this.$emit('ok')
+    },
+    // 调用查看凭证的接口，更新列表页的状态
+    lookVoucher(id) {
+      getAction(this.url.confirmVoucher, {id: id}).then((res) => {
+        if (res.success) {
+          // this.$message.success(res.message)
+        } else {
+          if (res.message.indexOf('<br/>') > -1) {
+            this.messageLineFeed('查看凭证失败', res.message)
+          } else {
+            this.$message.warning(res.message)
+          }
+        }
+      })
+    },
+    /**
+     * 获取最新一条缴费凭证
+     * @param id-项目ID
+     */
+    getLastProof(id) {
+      this.confirmLoading = true
+      let param = {
+        projectId: id
+      }
+      getAction(this.url.getLastProof, param).then((res) => {
+        if (res.success && res.result !== '无数据') {
+          this.proofInfo = res.result || {}
+        } else {
+          this.proofInfo = {}
+        }
+      }).finally(() => {
+        this.confirmLoading = false
+      })
+    },
+    /**
+     * 缴费凭证 src
+     */
+    proofSrc(imgId) {
+      return `${window._CONFIG['domianURL']}/sys/common/download/${imgId}`
+    },
+    /**
+     * 预览缴费凭证
+     */
+    previewImg(imgId) {
+      this.$refs.previewImg.title = '缴费凭证'
+      this.$refs.previewImg.imgId = imgId
+      this.$refs.previewImg.visible = true
+    },
+    /**
+     * 获取缴费凭证类型
+     * @param record
+     */
+    getProofType(record) {
+      if (record.projectType && (record.projectType.toString() === '6')) {
+        if (this.proofInfo.paymentMethod.toString() === '1' || this.proofInfo.paymentMethod.toString() === '3') {
+          this.proofType = 'img'
+          return
+        }
+        if (this.proofInfo.paymentMethod.toString() === '2') {
+          this.proofType = 'pdf'
+          return
+        }
+        if (this.proofInfo.paymentMethod.toString() === '3') {
+          this.proofType = 'none'
+          return
+        }
+      } else {
+        this.proofType = 'img'
+      }
+    },
+  }
+}
+</script>
+
+<style scoped lang="less">
+.ant-form-item {
+  margin-bottom: 10px;
+}
+
+.project-name {
+  font-size: 16px;
+  line-height: 30px;
+  font-weight: 700;
+  padding-bottom: 10px;
+}
+
+h3 {
+  position: relative;
+}
+
+h3.title::before {
+  position: absolute;
+  top: 4px;
+  left: -10px;
+  content: "";
+  height: 20px;
+  width: 2px;
+  background: #069f99;
+}
+
+.info-item {
+  display: flex;
+  padding: 5px 0;
+
+  label {
+    color: #666666;
+    flex-shrink: 0;
+    display: inline-block;
+    width: 4.5rem;
+    text-align: right;
+  }
+
+  div {
+    color: black;
+  }
+}
+
+// 将缴费凭证的图片部分提出
+.proof-img {
+  display: flex;
+  width: calc(100% - 4rem);
+
+  &-item {
+    width: 21%;
+
+    img {
+      max-width: 100%;
+      max-height: 150px;
+      cursor: pointer;
+    }
+  }
+}
+
+// 修改缴费基础信息的样式
+.basic-info-div {
+  /deep/ .ant-form-item:not(.proof-form-item) {
+    margin-bottom: 0;
+  }
+}
+</style>