fourcal/src/main/resources/templates/admin/business/process-detail.ftl

<#assign base=request.contextPath />
<#import "../../common/defaultLayout.ftl" as defaultLayout>
<@defaultLayout.layout>
  <link rel="stylesheet" href="${base}/element-ui/element-ui.css">
  <style>

      .el-upload__input {
          display: none !important;
      }

      .el-textarea .el-input__count {
          line-height: 15px;
      }

      .admin-content-body {
          margin-bottom: 100px;
      }

      .el-table__empty-block {
          height: 60px !important;
      }

      .el-upload-list__item-name [class^="el-icon"] {
          height: unset;
      }

      .el-tag--small {
          margin-right: 5px;
      }

      [v-cloak] {
          display: none;
      }

  </style>

  <div class="admin-content" id="app" v-cloak>
    <div class="admin-content-body">
      <div class="am-cf am-padding">
        <div class="am-fl am-cf"><strong class="am-text-primary am-text-lg">业务应用</strong> /
          <small>${process.processType.description}详情</small>
        </div>
      </div>

      <div class="am-u-sm-12 am-u-md-12">

        <el-descriptions title="${process.processType.description}详情">
          <el-descriptions-item label="项目编号">{{process.projectNo}}</el-descriptions-item>
          <el-descriptions-item label="项目标题">{{process.projectTitle}}</el-descriptions-item>
          <el-descriptions-item label="申请时间">{{process.applyDate}}</el-descriptions-item>
          <el-descriptions-item label="项目类型">${projectType}</el-descriptions-item>
          <el-descriptions-item label="合作类型">${cooperationType}</el-descriptions-item>

          <el-descriptions-item label="申请部门">{{process.applyDept}}</el-descriptions-item>
          <el-descriptions-item label="申请人">{{process.applyPersonName}}</el-descriptions-item>
          <el-descriptions-item label="申请部门领导">{{process.applyDeptLeaderName}}</el-descriptions-item>
          <el-descriptions-item label="申请人电话" v-if="isSaleContract">{{contract.applyPersonPhone}}</el-descriptions-item>

          <el-descriptions-item label="合同编号">{{process.contractNo}}</el-descriptions-item>
          <el-descriptions-item label="合同名称">{{process.contractName}}</el-descriptions-item>
          <el-descriptions-item label="合同金额">{{project.contractAmount}}</el-descriptions-item>

          <el-descriptions-item label="客户名称" v-if="isSaleContract">{{contract.clientName}}</el-descriptions-item>
          <el-descriptions-item label="供应商" v-if="isProcurementContract">{{contract.supplierName}}</el-descriptions-item>
          <el-descriptions-item label="最终用户名称">{{project.terminalCustomer}}</el-descriptions-item>

          <el-descriptions-item label="用印类型">
              <#list process.sealTypes.list as item>
                <el-tag size="small">${item.description}</el-tag>
              </#list>
          </el-descriptions-item>

          <el-descriptions-item label="税率">{{process.taxRate}}%</el-descriptions-item>
          <el-descriptions-item label="是否垫资">${isPrepaid}</el-descriptions-item>
          <el-descriptions-item label="垫资金额">${repaidAmount}元</el-descriptions-item>
          <el-descriptions-item label="预算毛利率">${project.grossProfitMargin}</el-descriptions-item>

          <el-descriptions-item label="收款条件" v-if="isSaleContract">{{contract.paymentTerms}}</el-descriptions-item>
          <el-descriptions-item label="付款条件" v-if="isProcurementContract">{{contract.paymentTerms}}</el-descriptions-item>
          <el-descriptions-item label="备注">{{process.remark}}</el-descriptions-item>
          <el-descriptions-item label="附件">
            <el-tag size="small" v-for="attachment in attachments">
              <a :href="attachment.uri">
                <i class="el-icon-document"></i> {{attachment.name}}
              </a>
            </el-tag>
          </el-descriptions-item>

        </el-descriptions>

          <#-- 项目预算收入明细表 -->
        <div v-if="isSaleContract">
          <el-alert title="项目预算收入明细" type="success" center :closable="false"></el-alert>

          <el-table border :data="incomeDetails" empty-text="暂无">
            <el-table-column type="index" :index="1" label="序号" fixed></el-table-column>
            <el-table-column prop="name" label="名称" fixed width="120"></el-table-column>
            <el-table-column prop="type" label="类别"></el-table-column>
            <el-table-column prop="spec" label="规格型号"></el-table-column>
            <el-table-column prop="param" label="参数"></el-table-column>
            <el-table-column prop="amount" label="数量"></el-table-column>
            <el-table-column prop="unit" label="单位"></el-table-column>
            <el-table-column prop="price" label="单价（元）" width="120"></el-table-column>
            <el-table-column prop="taxRate" label="税率（%）"></el-table-column>
            <el-table-column prop="totalTaxInclude" label="含税金额（元）" width="120"></el-table-column>
            <el-table-column prop="totalTaxExclude" label="不含税金额（元）" width="120"></el-table-column>
            <el-table-column prop="totalTax" label="税金（元）" width="120"></el-table-column>
            <el-table-column prop="expirationDate" label="质保期" width="150"></el-table-column>

          </el-table>

        </div>

          <#-- 供应商比选材料 -->

        <div v-if="isProcurementContract">
          <el-alert title="供应商比选材料" type="success" center :closable="false"></el-alert>
          <el-table border :data="supplierMaterials" empty-text="暂无">
            <el-table-column type="index" :index="1" label="序号" fixed></el-table-column>

            <el-table-column prop="companyName" label="公司名称" width="180" align="center"></el-table-column>
            <el-table-column prop="totalAmount" label="合计金额" width="160" align="center"></el-table-column>
            <el-table-column prop="serviceTerms" label="服务条款" width="180" align="center"></el-table-column>
            <el-table-column prop="paymentTerms" label="付款条件" align="center"></el-table-column>
            <el-table-column prop="taxRate" label="税率（%）" width="160" align="center"></el-table-column>
            <el-table-column prop="remark" label="备注" align="center"></el-table-column>
            <el-table-column prop="attachment" label="附件" align="center" width="150">
              <template slot-scope="scope">
                <el-tag size="small" v-for="attachment in scope.row.attachment">
                  <a :href="attachment.uri" target="_blank">
                    <i class="el-icon-document"></i> {{attachment.name}}
                  </a>
                </el-tag>
              </template>
            </el-table-column>

          </el-table>

        </div>

          <#-- 采购详情 -->
        <div v-if="isProcurementContract">
          <el-alert title="采购清单" type="success" center :closable="false"></el-alert>

          <el-table border :data="procurementDetails" empty-text="暂无">
            <el-table-column type="index" :index="1" label="序号" fixed></el-table-column>
            <el-table-column prop="feeType" label="费用项目" fixed width="80"></el-table-column>
            <el-table-column prop="name" label="产品名称" fixed></el-table-column>
            <el-table-column prop="category" label="采购类别" fixed></el-table-column>

            <el-table-column prop="amount" label="数量"></el-table-column>
            <el-table-column prop="unit" label="单位"></el-table-column>
            <el-table-column prop="price" label="预算单价" width="100"></el-table-column>
            <el-table-column prop="taxRate" label="税率（%）"></el-table-column>
            <el-table-column prop="totalTaxInclude_" label="含税总金额（元）" width="120"></el-table-column>
            <el-table-column prop="totalTaxExclude" label="不含税金额（元）" width="120"></el-table-column>
            <el-table-column prop="totalTax" label="税金（元）" width="110"></el-table-column>
            <el-table-column prop="isUnderwritten" label="是否垫资"></el-table-column>
            <el-table-column prop="payTime" label="支出时间" width="160"></el-table-column>
            <el-table-column prop="payAmount" label="支出金额（元）" width="120"></el-table-column>
            <el-table-column prop="amountAlready" label="已采购数量" width="100"></el-table-column>
            <el-table-column prop="amountCurrent" label="本次采购数量" width="180"></el-table-column>
            <el-table-column prop="amountLeft" label="未采购数量" width="100"></el-table-column>

            <el-table-column prop="supplierName" label="供应商名称" width="200"></el-table-column>
            <el-table-column prop="manufacturerName" label="设备厂商名称" width="200"></el-table-column>
            <el-table-column prop="purchaseList" label="对应采购清单" width="200"></el-table-column>
            <el-table-column prop="spec" label="规格型号" width="200"></el-table-column>
            <el-table-column prop="procurementAmount" label="对应采购数目" width="200"></el-table-column>
            <el-table-column prop="procurementPrice" label="采购单价" width="200"></el-table-column>
            <el-table-column prop="totalTaxInclude" label="含税总金额（元）" width="200"></el-table-column>

          </el-table>

        </div>


        <el-row>
          <el-button style="margin-top: 30px" type="info" @click="backLastPage">返回上一级</el-button>
        </el-row>

      </div>

    </div>

  </div>

  </div>

  <script src="${base}/vue/vue.js"></script>
  <script src="${base}/element-ui/element-ui.js"></script>

  <script>

    const isEmpty = (obj) => {
      return !obj || (obj.length && obj.length === 0)
    }

    const isNotEmpty = (obj) => {
      return !isEmpty(obj)
    }

    const isBlank = (obj) => {
      return isEmpty(obj) || (obj.trim && isEmpty(obj.trim()))
    }

    const hasText = (obj) => {
      return !isBlank(obj)
    }

    const data = () => {
      return {
        process: {},
        project: {},
        supplierMaterials: []
      }
    }

    const methods = {
      backLastPage() {
        window.history.back();
      },
      loadProject(id) {
        const loading = this.$loading({
          lock: true,
          text: '正在加载项目',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })

        fetch("${base}/process/" + id)
            .then(res => res.json())
            .then(data => {
              const {
                attachments, processId, isPrepaid, repaidAmount,
                incomeDetails, process, projectType, cooperationType,
                contract, supplierMaterials, procurementDetails, project
              } = data
              // 转换数据
              // @formatter:off
              const computeType = (type) => {
                switch (type) {
                  case 1: return '设备'
                  case 2: return '工程'
                  case 3: return '服务'
                  default: return '未知'
                }
              }
              // @formatter:on

              this.incomeDetails = incomeDetails.map(detail => ({
                ...detail, type: computeType(detail.type)
              }))

              const mapAttachment = attachment => {
                if (hasText(attachment)) {
                  try {
                    return JSON.parse(attachment)
                  } catch (e) {
                    return []
                  }
                }
                else {
                  return []
                }
              }

              this.process = process
              this.project = project
              this.isPrepaid = isPrepaid
              this.repaidAmount = repaidAmount
              this.contract = contract
              this.processId = processId
              this.projectType = projectType
              this.cooperationType = cooperationType
              this.supplierMaterials = supplierMaterials.map(item => ({
                ...item, attachment: mapAttachment(item.attachment)
              }))
              this.procurementDetails = procurementDetails

              this.attachments = attachments
            })
            .catch(err => {
              this.$message.error("项目加载失败");
            })
            .finally(() => loading.close())
      },

    }

    new Vue({
      el: '#app',
      data,
      methods,
      computed: {
        isProcurementContract() {
          return this.process.processType === 'procurement_contract'
        },
        isSaleContract() {
          return this.process.processType === 'sale_contract'
        },
      },
      mounted() {
        const processId = ${processId}
        this.loadProject(processId)
      },
    })

  </script>

</@defaultLayout.layout>