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

<template>
  <ele-modal
    custom-class="ele-dialog-form long-dialog-form"
    :centered="true"
    v-if="visible"
    :visible.sync="visible"
    :title="title"
    :append-to-body="true"
    :close-on-click-modal="false"
    :maxable="true"
    :resizable="true"
    width="70%"
    @close="cancel"
  >
    <div class="switch">
      <div class="switch_left">
        <ul>
          <li
            v-for="item in tabOptions"
            :key="item.key"
            :class="{ active: activeComp == item.key }"
            @click="activeComp = item.key"
          >
            {{ item.name }}
          </li>
        </ul>
      </div>
    </div>
    <div v-show="activeComp === 'main'">
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        label-width="120px"
        class="el-form-box"
      >
        <headerTitle title="基本信息">
          <el-button
            size="small"
            type="primary"
            icon="el-icon-view"
            class="ele-btn-icon"
            @click="previewModal"
          >
            预览
          </el-button>
          <el-button
            size="small"
            type="primary"
            icon="el-icon-s-grid"
            class="ele-btn-icon"
            @click="exportTable"
          >
            导出
          </el-button>
        </headerTitle>
        <el-row gutter="12">
          <el-col :span="8">
            <el-form-item label="关联商机名称" prop="opportunityName">
              <el-input
                v-model="detailData.opportunityName"
                disabled
              ></el-input>
            </el-form-item>
            <el-form-item label="询价方名称" prop="contactName">
              <el-input v-model="form.contactName" disabled></el-input>
            </el-form-item>
            <el-form-item label="询价方联系人" prop="contactLinkName">
              <el-input v-model="form.contactLinkName" disabled></el-input>
            </el-form-item>

            <el-form-item label="询价方电话" prop="contactTel">
              <el-input v-model="form.contactTel" disabled></el-input>
            </el-form-item>
            <el-form-item label="询价方传真" prop="contactFax">
              <el-input v-model="form.contactFax" disabled></el-input>
            </el-form-item>
            <el-form-item label="询价方Email" prop="contactEmail">
              <el-input v-model="form.contactEmail" disabled></el-input>
            </el-form-item>
            <el-form-item label="询价方地址" prop="contactAddress">
              <el-input v-model="form.contactAddress" disabled></el-input>
            </el-form-item>

            <el-form-item label="创建人" prop="createUserName">
              <el-input v-model="form.createUserName" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="报价方名称" prop="quoteName">
              <el-input v-model="form.quoteName" disabled></el-input>
            </el-form-item>

            <el-form-item label="报价方联系人" prop="quoteLinkName">
              <el-input v-model="form.quoteLinkName" disabled></el-input>
            </el-form-item>
            <el-form-item prop="quoteTel" label="报价方联系电话">
              <el-input v-model="form.quoteTel" disabled></el-input>
            </el-form-item>
            <el-form-item prop="quoteFax" label="报价方传真">
              <el-input v-model="form.quoteFax" disabled></el-input>
            </el-form-item>

            <el-form-item label="报价方Email" prop="quoteEmail">
              <el-input v-model="form.quoteEmail" disabled></el-input>
            </el-form-item>

            <el-form-item label="报价方地址" prop="quoteAddress">
              <el-input v-model="form.quoteAddress" disabled></el-input>
            </el-form-item>
            <el-form-item prop="askFile" label="附件">
              <fileMain v-model="form.askFile" type="view"></fileMain>
            </el-form-item>

            <el-form-item label="创建时间" prop="createTime">
              <el-input v-model="form.createTime" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="总价" prop="totalPrice">
              <el-input v-model="form.totalPrice" disabled></el-input>
            </el-form-item>
            <el-form-item prop="totalCount" label="总数量">
              <el-input v-model="form.totalCount" disabled></el-input>
            </el-form-item>
            <el-form-item prop="totalWeight" label=" 总重">
              <el-input v-model="form.totalWeight" disabled></el-input>
            </el-form-item>
            <el-form-item label="结算方式" prop="payWay">
              <el-input v-model="form.settlementModeName" disabled></el-input>
            </el-form-item>
            <el-form-item label="是否接受拆单" prop="acceptUnpack">
              <el-select
                v-model="form.acceptUnpack"
                placeholder="请选择"
                style="width: 100%"
                disabled
              >
                <el-option
                  v-for="item in acceptUnpackoptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <headerTitle title="报价单物品清单"></headerTitle>
        <inventoryTabledetail
          :isCustomerMark="false"
          ref="inventoryTabledetailRef"
          :isDiscount="false"
          :cacheKeyUrl="cacheKeyUrl"
        ></inventoryTabledetail>
      </el-form>
    </div>

    <bpmDetail
      v-if="activeComp === 'bpm' && form.processInstanceId"
      :id="form.processInstanceId"
    ></bpmDetail>

    <div slot="footer" class="footer">
      <el-button @click="cancel">返回</el-button>
    </div>

    <ele-modal
      custom-class="ele-dialog-form long-dialog-form"
      :centered="true"
      v-if="previewvisible"
      :visible.sync="previewvisible"
      title="报价单预览"
      :append-to-body="true"
      :close-on-click-modal="false"
      :maxable="true"
      :resizable="true"
      width="60%"
      @close="previewvisible = false"
    >
      <div class="quotation-preview">
        <!-- 1. 报价单标题 -->
        <div class="quotation-title">报价单</div>

        <!-- 2. 询价方&报价方信息表格 -->
        <table class="info-table">
          <tbody>
            <tr>
              <td class="label">询价方（公司名称）：</td>
              <td>{{ detailData.opportunityName || form.contactName }}</td>
              <td class="label">报价方（公司名称）：</td>
              <td>{{ form.quoteName }}</td>
            </tr>
            <tr>
              <td class="label">联系人：</td>
              <td>{{ form.contactLinkName }}</td>
              <td class="label">授权议价人：</td>
              <td>{{ form.quoteLinkName }}</td>
            </tr>
            <tr>
              <td class="label">电 话：</td>
              <td>{{ form.contactTel }}</td>
              <td class="label">电 话：</td>
              <td>{{ form.quoteTel }}</td>
            </tr>
            <tr>
              <td class="label">传 真：</td>
              <td>{{ form.contactFax }}</td>
              <td class="label">传 真：</td>
              <td>{{ form.quoteFax }}</td>
            </tr>
            <tr>
              <td class="label">E-mail：</td>
              <td>{{ form.contactEmail }}</td>
              <td class="label">E-mail：</td>
              <td>{{ form.quoteEmail }}</td>
            </tr>
            <tr>
              <td class="label">地 址：</td>
              <td>{{ form.contactAddress }}</td>
              <td class="label">地 址：</td>
              <td>{{ form.quoteAddress }}</td>
            </tr>
          </tbody>
        </table>

        <!-- 3. 物品清单表格 -->
        <div class="inventory-table-wrap">
          <table class="inventory-table">
            <thead>
              <tr>
                <th>序号</th>
                <th>物料编码</th>
                <th>名称</th>
                <th>型号</th>
                <th>数量</th>
                <th>单位</th>
                <th>单价（元）</th>
                <th>总价（元）</th>
                <th>技术答疑人</th>
                <th>技术参数（g/cm³）</th>
                <th>质保期（月）</th>
                <th>交期（天）</th>
                <th>备注</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, idx) in inventoryTableData" :key="idx">
                <td>{{ idx + 1 }}</td>
                <td>{{ item.productCode }}</td>
                <td>{{ item.productName }}</td>
                <td>{{ item.modelType }}</td>
                <td>{{ item.totalCount }}</td>
                <td>{{ item.measuringUnit }}</td>
                <td>{{ item.singlePrice }}</td>
                <td>{{ item.totalPrice }}</td>
                <td>{{ item.technicalAnswerName }}</td>
                <td>{{ item.technicalParams }}</td>
                <td
                  >{{ item.guaranteePeriod
                  }}{{ item.guaranteePeriodUnitName }}</td
                >
                <td>{{ item.deliveryDays }}</td>
                <td>{{ item.remark }}</td>
              </tr>
            </tbody>
          </table>
        </div>

        <!-- 4. 合计 -->
        <div class="total-amount">合计：{{ form.totalPrice || '0.00' }}</div>

        <!-- 5. 备注 -->
        <div class="quotation-remark">
          备注：1、以上报价为含《增值税票价、含运费》；2、交货期：双方协商；3、报价有效期
          30 天
        </div>

        <!-- 6. 交货期/付款方式/拆单 -->
        <table class="footer-info-table">
          <tbody>
            <tr>
              <td class="label">*交货期</td>
              <td>{{ form.deliveryDate || '协商确定' }}</td>
              <td class="label">付款方式</td>
              <td>{{ form.settlementModeName || '协商确定' }}</td>
              <td class="label">*是否接受拆单</td>
              <td>{{ form.acceptUnpack == '1' ? '是' : '否' }}</td>
            </tr>
          </tbody>
        </table>

        <!-- 7. 报价说明 -->
        <div class="quote-description">
          报价为含税（%）含运费/保险在内的到厂交货价。
        </div>

        <!-- 8. 报价单位&日期&保存期限 -->
        <div class="quote-footer">
          报价单位：盖章处
          <span class="quote-date"
            >日期：{{ form.createTime.split(' ')[0] }}</span
          >
          <span class="save-term">保存期限：3年</span>
        </div>
      </div>

      <div slot="footer" class="footer">
        <el-button
          size="small"
          type="primary"
          icon="el-icon-s-grid"
          class="ele-btn-icon"
          @click="exportTable"
        >
          导出
        </el-button>
        <el-button @click="previewvisible = false">返回</el-button>
      </div>
    </ele-modal>
  </ele-modal>
</template>

<script>
import { getDetail, exportByPathId } from '@/api/saleManage/quotation';
import { getFile } from '@/api/system/file';
import dictMixins from '@/mixins/dictMixins';
import { copyObj } from '@/utils/util';
import bpmDetail from '@/views/bpm/processInstance/detail.vue';
import inventoryTabledetail from '@/BIZComponents/inventoryTableDetails.vue';
import { acceptUnpackoptions } from '@/enum/dict';
// import fileMain from '@/components/addDoc/index.vue';

export default {
  mixins: [dictMixins],
  components: {
    bpmDetail,
    inventoryTabledetail
    // fileMain
  },
  data() {
    return {
      fullscreen: false,
      cacheKeyUrl: 'eos-saleManage-quotation-inventoryTableDetails',
      activeComp: 'main',
      tabOptions: [
        { key: 'main', name: '报价详情' },
        { key: 'bpm', name: '流程详情' }
      ],
      visible: false,
      detailId: '',
      title: '详情',
      row: {},
      activeName: 'base',
      form: {},
      rules: {},
      detailData: {},
      acceptUnpackoptions,
      previewvisible: false,
      inventoryTableData: [],
      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: 240,
          prop: 'customerReqFiles',
          label: '客户需求',
          slot: 'customerReqFiles'
        },
        {
          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 exportTable() {
      const response = await exportByPathId(this.detailId);
    },
    previewModal() {
      this.previewvisible = true;
      this.inventoryTableData =
        this.$refs.inventoryTabledetailRef.form.datasource;
    },
    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 getDetail(id);
      this.loading = false;
      if (data) {
        this.detailData = data;
        this.$nextTick(() => {
          this.$refs.inventoryTabledetailRef &&
            this.$refs.inventoryTabledetailRef.putTableValue(data);
        });
      }
    }
  }
};
</script>

<style scoped lang="scss">
.ele-dialog-form {
  .el-form-item {
    margin-bottom: 10px;
  }
}

.headbox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .amount {
    font-size: 14px;
    font-weight: bold;
  }
}
</style>
<style scoped lang="scss">
.quotation-preview {
  font-family: 'Microsoft Yahei', sans-serif;

  // 标题
  .quotation-title {
    font-size: 24px;
    font-weight: bold;
    text-align: center;
  }

  // 信息表格（询价方、报价方）
  .info-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    th,
    td {
      border: 2px solid #2c2c2c;
      padding: 5px;
      text-align: left;
    }

    .label {
      font-weight: bold;
    }
  }

  // 物品清单表格
  .inventory-table-wrap {
    .inventory-table {
      width: 100%;
      border-collapse: collapse;

      th {
        font-weight: bold;
        border: 2px solid #2c2c2c;
        border-top: none;
        padding: 5px;
        text-align: center;
      }

      td {
        border: 2px solid #2c2c2c;
        border-top: none;
        padding: 5px;
        text-align: center;
      }
    }
  }

  // 合计
  .total-amount {
    text-align: center;
    padding: 5px;
    border: 2px solid #2c2c2c;
    border-top: none;
    font-weight: bold;
  }

  // 备注
  .quotation-remark {
    line-height: 1.5;
    text-align: center;
    border: 2px solid #2c2c2c;
    border-top: none;
    padding: 5px;
  }

  // 底部信息表格（交货期、付款方式等）
  .footer-info-table {
    width: 100%;
    border-collapse: collapse;
    .label {
      font-weight: bold;
    }

    td {
      border: 2px solid #2c2c2c;
      border-top: none;
      padding: 5px;
      text-align: center;
    }
  }

  // 报价说明
  .quote-description {
    line-height: 1.5;
    border: 2px solid #2c2c2c;
    border-top: none;
    padding: 5px;
    text-align: center;
  }

  // 报价单位、日期、保存期限
  .quote-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 24px;

    .seal-area {
      border: 1px solid #000;
      padding: 4px 12px;
      margin-right: 24px;
    }

    .quote-date,
    .save-term {
      margin-left: 24px;
    }
  }
}
</style>