kd-aiot-frontend-eom/src/views/saleManage/saleOrder/invoice/components/detailDialog.vue

<template>
    <ele-modal
    custom-class="ele-dialog-form long-dialog-form"
      :centered="true"
      v-if="visible"
      :visible.sync="visible"
      :title="title"
      :close-on-click-modal="false"
      width="80%"
      @close="cancel"
    >
 
        <el-form ref="form" :model="form" :rules="rules" label-width="120px">
    
     <headerTitle title="发货信息"></headerTitle>
       <el-row>
        <el-col :span="12">
            <el-form-item
              label="客户名称："
              prop="contactName"
              style="margin-bottom: 16px"
            >
            {{form.contactName}}
            </el-form-item>
            <el-form-item
              label="客户联系人："
              prop="linkName"
              style="margin-bottom: 16px"
            >
            {{form.linkName}}
            </el-form-item>
            <el-form-item
              label="客户电话："
              prop="linkPhone"
              style="margin-bottom: 16px"
            >
            {{form.linkPhone}}
            </el-form-item>
       
            <el-form-item
              label="客户地址："
              prop="partaAddress"
              style="margin-bottom: 16px"
            >
            {{form.receiveAddress}}
            </el-form-item>
            <el-form-item
              label="发货附件："
              prop="sendFiles"
              style="margin-bottom: 16px"
            >
            <div v-if="detailData.sendFiles && detailData.sendFiles?.length">
               <el-link v-for="link in detailData.sendFiles" :key="link.id"
                         type="primary" :underline="false"
                         @click="downloadFile(link)"> {{ link.name }}</el-link> 
                        </div>
            </el-form-item>
          </el-col>




          <el-col :span="12">
            <el-form-item
              label="车牌号："
              prop="carNo"
              style="margin-bottom: 16px"
            >
            {{form.carNo}}
            </el-form-item>
            <el-form-item
              label="发货单据编码："
              prop="docNo"
              style="margin-bottom: 16px"
            >
            {{form.docNo}}
            </el-form-item>
            <el-form-item
              label="制单人："
              prop="makerName"
              style="margin-bottom: 16px"
            >
            {{form.makerName}}
            </el-form-item>
            <el-form-item prop="orderNo" label="订单编码：" >
              {{form.orderNo}}
              </el-form-item>
              <el-form-item prop="replied" label="是否回执：">
                {{form.replied==1?'是':'否'}}
              </el-form-item>

              <el-form-item
              label="审核状态："
              prop="reviewStatus"
              style="margin-bottom: 16px"
            >
            {{reviewStatusEnum[form.reviewStatus].label}}
            </el-form-item>

           
          </el-col>
       </el-row>

   </el-form>


       
        <headerTitle title="产品清单"></headerTitle>
        <ele-pro-table ref="table" :needPage="false" :columns="competAnalysisListcolumns"  :toolkit="[]" :datasource="detailData.productList" row-key="id">
          <!-- <template v-slot:toolbar>
        <div class="headbox">
        <span class="amount">总计：{{detailData.totalAmount}}元</span>
        <span class="amount">应付金额：{{detailData.payAmount}}元</span>
      </div>
      </template> -->
          <template v-slot:technicalDrawings="{ row }">
            <div v-if="row.technicalDrawings && row.technicalDrawings?.length">
            <el-link 
            v-for="link in row.technicalDrawings" :key="link.id"
                         type="primary" :underline="false"
                         @click="downloadFile(link)"> {{ link.name }}</el-link>
                        </div>
                        </template>
                     
          </ele-pro-table>
       
      <div slot="footer" class="footer">
        <el-button @click="cancel">返回</el-button>
      </div>
    </ele-modal>
  </template>
  
  <script>
  import {getFile} from '@/api/system/file';
  import dictMixins from '@/mixins/dictMixins';
  import {download } from '@/utils/file';
  import {reviewStatusEnum} from '@/enum/dict';
  import {copyObj} from '@/utils/util';
  
  
  export default {
      mixins: [dictMixins],
      data() {
      
        return {
          reviewStatusEnum,
          visible: false,
          detailId:'',
          title: '详情',
          row: {},
          activeName: 'base',
          form:{
            orderFiles:[{name:'222'}]
          },
          rules:{},
          detailData:{},
          receiptPaymentListcolumns:[
          {
          width: 45,
          type: 'index',
          columnKey: 'index',
          align: 'center',
          fixed: 'left'
        },
        {
          width: 200,
          prop: 'moneyName',
          label: '款项名称',
          slot: 'moneyName'
        },
        {
          width: 100,
          prop: 'price',
          label: '金额',
          slot: 'price',
          formatter: (_row, _column, cellValue) => {
              return _row.price+'元'
            }
        },
        {
          width: 100,
          prop: 'ratio',
          label: '比例',
          slot: 'ratio',
          formatter: (_row, _column, cellValue) => {
              return _row.ratio+'%'
            }
        },
        {
          width: 160,
          prop: 'deadLine',
          label: '截止日期',
          slot: 'deadLine'
        },
        {
          prop: 'remark',
          label: '	说明',
          slot: 'remark'
        }
          ],
          competAnalysisListcolumns: [
        
          {
          width: 45,
          type: 'index',
          columnKey: 'index',
          align: 'center',
          fixed: 'left'
        },
        {
          width: 200,
          prop: 'productName',
          label: '名称',
          slot: 'productName'
        },
        {
          width: 120,
          prop: 'productCode',
          label: '编码',
          slot: 'productCode'
        },
        {
          width: 200,
          prop: 'productCategoryName',
          label: '类型',
          slot: 'productCategoryName'
        },
        {
          width: 160,
          prop: 'productBrand',
          label: '牌号',
          slot: 'productBrand'
        },
        {
          width: 120,
          prop: 'modelType',
          label: '型号',
          slot: 'modelType'
        },
        {
          width: 120,
          prop: 'specification',
          label: '规格',
          slot: 'specification'
        },
       
        {
          width: 160,
          prop: 'singlePrice',
          label: '单价',
          slot: 'singlePrice'
        },
        {
          width: 120,
          prop: 'totalCount',
          label: '数量',
          slot: 'totalCount'
        },
        {
          width: 120,
          prop: 'totalPrice',
          label: '销售总金额',
          slot: 'totalPrice',
          formatter: (_row, _column, cellValue) => {
              return _row.totalPrice+'元'
            }
        },
        {
          width: 120,
          prop: 'measuringUnit',
          label: '计量单位',
          slot: 'measuringUnit'
        },
        {
          width: 120,
          prop: 'deliveryDays',
          label: '交期(天)',
          slot: 'deliveryDays'
        },
        {
          width: 200,
          prop: 'guaranteePeriod',
          label: '质保期',
          slot: 'guaranteePeriod',
          formatter: (_row, _column, cellValue) => {
              return _row.guaranteePeriod+_row.guaranteePeriodUnitName
            }
        },
        // {
        //   width: 120,
        //   prop: 'guaranteePeriodUnitCode',
        //   label: '',
        //   slot: 'guaranteePeriodUnitCode'
        // },
         {
          width: 120,
          prop: 'technicalAnswerName',
          label: '技术答疑人',
          slot: 'technicalAnswerName'
        },
        {
          width: 220,
          prop: 'technicalParams',
          label: '技术参数',
          slot: 'technicalParams'
        },
        {
          width:240,
          prop: 'technicalDrawings',
          label: '技术图纸',
          slot: 'technicalDrawings',
          formatter: (_row, _column, cellValue) => {
              return _row.guaranteePeriod+_row.guaranteePeriodUnitName
            }

        },
        {
          width: 220,
          prop: 'remark',
          label: '备注',
          slot: 'remark'
        }
           ],
        };
      },
      methods: {
     
        async open(row) {
          this.form = row;
          this.visible = true;
          this.getDetailData(row.id)
          this.detailId=row.id
        },
  
        cancel() {
          this.$nextTick(() => {
            // 关闭后，销毁所有的表单数据
            this.form = copyObj(this.formDef),
            this.otherForm = copyObj(this.otherFormDef),
            this.tableBankData = []
            this.tableLinkData = []
            this.visible = false;
          })
        },
        downloadFile(file){
        getFile({ objectName: file.storePath }, file.name);
      },
        async getDetailData (id) {
          this.loading = true;
          const data = await getSendSaleOrderrecordDetail(id);
          this.loading = false;
          if (data) {
            this.detailData = data;
            
          }
        },
  
      }
    };
  </script>
  
  <style scoped lang="scss">
  .ele-dialog-form{
    .el-form-item{
      margin-bottom: 10px;
    }
  }

  .headbox{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  .amount{
    font-size: 14px;
    font-weight: bold;
    margin-right: 20px;
  }
}
  </style>