xujiecloud-vue/src/views/modules/quote/quoteDetailReport.vue

<script>

import {getSiteAndBuByUserName} from "../../../api/qc/qc";
import {queryQuoteDetailById, queryQuoteDetailReport, updateQuoteDetail} from "../../../api/quote/quoteDetail";
import {getItemListByInquiryPartAndCodeNo} from "../../../api/inquiry/inquiryDetail";
import BreakdownCost from "./detail/breakdownCost.vue";
import BuSelect from "../../../components/selector/select/BuSelect.vue";
import {queryPropertyTemplate} from "../../../api/property/template";
import {queryPropertyTemplateDetailAvailableList} from "../../../api/property/templateDetail";
import {againQuote} from "../../../api/quote/quote";
import QuoteDetailTool from "./detail/primary/quoteDetailTool.vue";
import QuoteDetailBom from "./detail/primary/quoteDetailBom.vue";
import QuoteDetailOther from "./detail/primary/quoteDetailOther.vue";
import QuoteDetailCost from "./detail/primary/quoteDetailCost.vue";
import QuoteDetailRouting from "./detail/primary/quoteDetailRouting.vue";
import TpCost from "./detail/tpCost.vue";
import {getTableDefaultListLanguage, getTableUserListLanguage, updateColumnSize} from "../../../api/table";

export default {
  name: "quoteDetailReport",
  components: {
    TpCost,
    QuoteDetailRouting,
    QuoteDetailCost,
    QuoteDetailOther,
    QuoteDetailBom,
    QuoteDetailTool,
    BuSelect,
    BreakdownCost
  },
  props: {
    height: {
      type: [String, Number],
      default: "38vh"
    }
  },
  data() {
    return {
      queryForm: {
        buId: '',
        customerNo: '',
        customerDesc: '',
        partNo: '',
        partDesc: '',
        quoteVersionNo: '',
      },
      no: 1,
      size: 20,
      total: 0,
      dataList: [],
      queryLoading: false,
      userBuList: [],
      columns: [
        {
          userId: this.$store.state.user.name,
          functionId: 5013,
          serialNumber: '5011Table1BuDesc',
          tableId: '5013Table1',
          tableName: '报价信息表',
          columnProp: 'buDesc',
          headerAlign: 'center',
          align: 'center',
          columnLabel: 'BU',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 80
        },
        {
          userId: this.$store.state.user.name,
          functionId: 5013,
          serialNumber: '5011Table1QuoteVersionNo',
          tableId: '5013Table1',
          tableName: '报价信息表',
          columnProp: 'quoteVersionNo',
          headerAlign: 'center',
          align: 'center',
          columnLabel: '报价单',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 140
        },
        {
          userId: this.$store.state.user.name,
          functionId: 5013,
          serialNumber: '5011Table1CustomerNo',
          tableId: '5013Table1',
          tableName: '报价信息表',
          columnProp: 'customerNo',
          headerAlign: 'center',
          align: 'center',
          columnLabel: '客户编码',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 80
        },
        {
          userId: this.$store.state.user.name,
          functionId: 5013,
          serialNumber: '5011Table1CustomerDesc',
          tableId: '5013Table1',
          tableName: '报价信息表',
          columnProp: 'customerDesc',
          headerAlign: 'center',
          align: 'center',
          columnLabel: '客户名称',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 140
        },
        {
          userId: this.$store.state.user.name,
          functionId: 5013,
          serialNumber: '5011Table1QuoteDate',
          tableId: '5013Table1',
          tableName: '报价信息表',
          columnProp: 'quoteDate',
          headerAlign: 'center',
          align: 'center',
          columnLabel: '报价日期',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 120
        }, {
          userId: this.$store.state.user.name,
          functionId: 5013,
          serialNumber: '5011Table1CustomerInquiryNo',
          tableId: '5013Table1',
          tableName: '报价信息表',
          columnProp: 'customerInquiryNo',
          headerAlign: 'center',
          align: 'center',
          columnLabel: '客户询价单号',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 100
        },
        {
          userId: this.$store.state.user.name,
          functionId: 5013,
          serialNumber: '5011Table1PartNo',
          tableId: '5013Table1',
          tableName: '报价信息表',
          columnProp: 'partNo',
          headerAlign: 'center',
          align: 'center',
          columnLabel: '物料编码',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 100
        },
        {
          userId: this.$store.state.user.name,
          functionId: 5013,
          serialNumber: '5011Table1PartDesc',
          tableId: '5013Table1',
          tableName: '报价信息表',
          columnProp: 'partDesc',
          headerAlign: 'center',
          align: 'center',
          columnLabel: '物料描述',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 240
        },
        {
          userId: this.$store.state.user.name,
          functionId: 5013,
          serialNumber: '5011Table1Status',
          tableId: '5013Table1',
          tableName: '报价信息表',
          columnProp: 'status',
          headerAlign: 'center',
          align: 'center',
          columnLabel: '状态',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 80
        },
        {
          userId: this.$store.state.user.name,
          functionId: 5013,
          serialNumber: '5011Table1CreateDate',
          tableId: '5013Table1',
          tableName: '报价信息表',
          columnProp: 'createDate',
          headerAlign: 'center',
          align: 'center',
          columnLabel: '创建日期',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 130
        },
        {
          userId: this.$store.state.user.name,
          functionId: 5013,
          serialNumber: '5011Table1CreateBy',
          tableId: '5013Table1',
          tableName: '报价信息表',
          columnProp: 'createBy',
          headerAlign: 'center',
          align: 'center',
          columnLabel: '创建人',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 100
        },
        {
          userId: this.$store.state.user.name,
          functionId: 5013,
          serialNumber: '5011Table1Site',
          tableId: '5013Table1',
          tableName: '报价信息表',
          columnProp: 'site',
          headerAlign: 'center',
          align: 'center',
          columnLabel: '工厂编码',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 80
        },
      ],
      currentRow: {},
      activeName: 'detail',
      inquiryDataList: [],
      queryPropertyLoading: false,
      propertyVisible: false,
      propertyList: [],

      currentProperty: {
        id: undefined,
        codeNo: '',
        codeDesc: '',
      },
      propertyItemList: [],

      count: 0,
    }
  },
  methods: {
    // 动态列开始 获取 用户保存的 格式列
    async getTableUserColumn(tableId, columnId) {
      let queryTableUser = {
        userId: this.$store.state.user.name,
        functionId: this.$route.meta.menuId,
        tableId: tableId,
        status: true,
        languageCode: this.$i18n.locale
      }
      await getTableUserListLanguage(queryTableUser).then(({data}) => {
        if (data.rows.length > 0) {
          switch (columnId) {
            case 1:
              this.columns = data.rows
              break;
          }
        } else {
          this.getColumnList(tableId, columnId)
        }
      })
    },
    // 获取 tableDefault 列
    async getColumnList (tableId, columnId) {
      let queryTable= {
        functionId: this.$route.meta.menuId,
        tableId: tableId,
        languageCode: this.$i18n.locale
      }
      await getTableDefaultListLanguage(queryTable).then(({data}) => {
        if (!data.rows.length === 0) {
          switch (columnId) {
            case 1:
              this.columns = data.rows
              break;
          }
        }
      })
    },
    handleColumnResize(newWidth, oldWidth, column, event){
      let inData= this.columnList.filter(item => item.columnProp === column.property)[0]
      inData.columnWidth=newWidth
      updateColumnSize(inData).then(({data}) => {
        if (data.code === 0) {
          console.log("栏位宽度保存成功！")
        }
      })
    },
    getSiteAndBuByUserName() {
      let tempData = {
        username: this.$store.state.user.name,
      }
      getSiteAndBuByUserName(tempData).then(({data}) => {
        if (data.code === 0) {
          this.userBuList = data.rows
        }
      })
    },
    handleQuery() {
      let list = [];
      if (this.propertyItemList.length > 0) {
        list = this.propertyItemList.filter(item => item.textValue || item.numValue);
      }
      let params = {
        ...this.queryForm,
        no: this.no,
        size: this.size,
        codeId: this.currentProperty.id,
        list,
      }
      this.queryLoading = true
      queryQuoteDetailReport(params).then(({data}) => {
        if (data && data.code === 0) {
          this.dataList = data.rows
          this.total = data.total
          if (this.total === 0) {
            this.currentRow = {}
          } else if (this.currentRow.id !== undefined) {
            // this.currentRow = {}
          } else {
            this.currentRow = this.dataList[0]
          }
        } else {
          this.$message.warning(data.msg)
        }
        this.queryLoading = false
      }).catch((error) => {
        this.$message.error(error)
        this.queryLoading = false
      })
    },
    handleRowClick(row) {
      this.currentRow = {...row}
    },
    rowStyle({row}) {
      if (this.currentRow && this.currentRow.id === row.id) {
        return {'background-color': '#E8F7F6'};
      } else {
        return {}
      }
    },
    handleSizeChange(val) {
      this.size = val
      this.handleQuery()
    },
    handlePageChange(val) {
      this.no = val
      this.handleQuery()
    },
    handleQueryInquiryProperties() {
      if (this.currentRow.id === undefined) {
        this.inquiryDataList = []
        return
      }
      let params = {
        inquiryPartId: this.currentRow.rfqDetailId,
        buNo: this.currentRow.buNo,
        site: this.currentRow.site,
        recordType: 'PRICECHECK',
      }
      this.queryPropertyLoading = true
      getItemListByInquiryPartAndCodeNo(params).then(({data}) => {
        if (data && data.code === 0) {
          this.inquiryDataList = data.rows
        } else {
          this.$message.warning(data.msg)
        }
        this.queryPropertyLoading = false
      }).catch((error) => {
        this.$message.error(error)
        this.queryPropertyLoading = false
      })
    },
    handleClickProperty() {
      if (!this.queryForm.buId) {
        this.$message.warning('请先选择BU')
        return
      }
      // this.handleQueryProperty();
      this.propertyVisible = true;
    },
    handleQueryProperty() {
      let params = {
        buId: this.queryForm.buId,
        createBy: this.$store.state.user.name,
        functionType: 'IP'
      }
      queryPropertyTemplate(params).then(({data}) => {
        if (data && data.code === 0) {
          this.propertyList = data.rows
          if (this.propertyList.length > 0) {
            this.currentProperty.id = this.propertyList[0].id
            this.currentProperty.codeNo = this.propertyList[0].codeNo
          }
        } else {
          this.$message.warning(data.msg)
        }
      }).catch((error) => {
        this.$message.error(error)
      })
    },
    handleQueryPropertyTemplateDetailAvailableList() {
      let params = {
        headerId: this.currentProperty.id,
      }
      this.propertyItemList = []
      queryPropertyTemplateDetailAvailableList(params).then(({data}) => {
        if (data && data.code === 0) {
          this.propertyItemList = data.rows
        } else {
          this.$message.warning(data.msg)
        }
      }).catch((error) => {
        this.$message.error(error)
      })
    },
  },
  created() {
    this.getSiteAndBuByUserName();
    this.getTableUserColumn(this.$route.meta.menuId+'table1',1)
  },
  activated() {
    if (this.$route.params.type && this.$route.params.type === 'quote'){
      this.queryForm.quoteVersionNo = this.$route.params.quoteVersionNo;
      this.count++
      this.handleQuery();
    }
    if (this.count === 0){
      this.handleQuery();
    }
  },
  watch: {
    currentRow(newVal, oldVal) {
      if (newVal) {
        this.handleQueryInquiryProperties()
      }
    },
    'queryForm.buId'(newVal, oldVal) {
      this.currentProperty.id = undefined
      this.currentProperty.codeNo = ''
      this.propertyItemList = []
      if (newVal) {
        this.handleQueryProperty();
      }
    },
    'currentProperty.id'(newVal, oldVal) {
      if (newVal) {
        this.handleQueryPropertyTemplateDetailAvailableList();
      }
    }
  }
}
</script>

<template>
  <div>
    <div style="width: 1200px">
      <el-form :model="queryForm" label-position="top">
        <el-row :gutter="10">
          <el-col :span="3">
            <el-form-item label="BU">
              <bu-select v-model="queryForm.buId">
                <el-option label="全部" value=""></el-option>
              </bu-select>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item label="报价单号">
              <el-input v-model="queryForm.quoteVersionNo"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item label="客户编码">
              <el-input v-model="queryForm.customerNo"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item label="客户名称">
              <el-input v-model="queryForm.customerDesc"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item label="产品编码">
              <el-input v-model="queryForm.partNo"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="产品描述">
              <el-input v-model="queryForm.partDesc"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item label=" ">
              <el-button type="primary" @click="handleClickProperty">属性</el-button>
              <el-button type="primary" @click="handleQuery">查询</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <el-table v-loading="queryLoading" :data="dataList" border :height="height" :row-style="rowStyle"
              @row-click="handleRowClick">
      <el-table-column
        v-for="(item,index) in columns" :key="index"
        :sortable="item.columnSortable"
        :prop="item.columnProp"
        :header-align="item.headerAlign"
        :show-overflow-tooltip="item.showOverflowTooltip"
        :align="item.align"
        :fixed="item.fixed===''?false:item.fixed"
        :min-width="item.columnWidth"
        :label="item.columnLabel">
        <template slot-scope="scope">
          <span v-if="!item.columnHidden">{{ scope.row[item.columnProp] }}</span>
          <span v-if="item.columnImage"><img :src="scope.row[item.columnProp]"
                                             style="width: 100px; height: 80px"/></span>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @size-change="handleSizeChange"
                   @current-change="handlePageChange"
                   :current-page="no"
                   :page-sizes="[20, 50, 100, 200, 500]"
                   :page-size="size"
                   :total="total"
                   layout="total,sizes, prev, pager, next, jumper">
    </el-pagination>
    <el-tabs v-model="activeName">
      <el-tab-pane label="详情" name="detail">
        <el-form :model="currentRow" label-position="top" style="width: 1000px">
          <el-row :gutter="10">
            <el-col :span="4">
              <el-form-item label="报价单号">
                <el-input v-model="currentRow.quoteVersionNo" readonly></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="BU">
                <el-input v-model="currentRow.buDesc" readonly></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="工厂编码">
                <el-input v-model="currentRow.site" readonly></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="4">
              <el-form-item label="客户编码">
                <el-input v-model="currentRow.customerNo" readonly></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="客户名称">
                <el-input v-model="currentRow.customerDesc" readonly></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="状态">
                <el-input v-model="currentRow.status" readonly></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="20">
              <el-form-item label="报价备注" class="auto" :show-message="false">
                <el-input type="textarea" v-model="currentRow.quoteRemark" resize="none" readonly></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="20">
              <el-form-item label="报价详情备注" class="auto" :show-message="false">
                <el-input type="textarea" v-model="currentRow.remark" resize="none" readonly></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="4">
              <el-form-item label="创建人">
                <el-input v-model="currentRow.createBy" readonly></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="创建日期">
                <el-input v-model="currentRow.createDate" readonly></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="最近更新人">
                <el-input v-model="currentRow.updateBy" readonly></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="最近更新日期">
                <el-input v-model="currentRow.updateDate" readonly></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-tab-pane>
      <el-tab-pane name="inquiry" label="询价单信息">
        <el-form :model="currentRow" label-position="top" style="width: 1000px">
          <el-row :gutter="10">
            <el-col :span="5">
              <el-form-item label="询价单号">
                <el-input v-model="currentRow.internalInquiryNo" readonly></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="询价日期">
                <el-input v-model="currentRow.requestDate" readonly></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="PJM">
                <el-input v-model="currentRow.requesterName" readonly></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="5">
              <el-form-item label="客户询价单号">
                <el-input v-model="currentRow.customerInquiryNo" readonly></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="要求报价日期">
                <el-input v-model="currentRow.requiredCompletionDate" readonly></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="优先等级">
                <el-input v-model="currentRow.priorityLevel" readonly></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="状态">
                <el-input v-model="currentRow.rfqStatus" readonly></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="20">
              <el-form-item label="备注" class="auto" :show-message="false">
                <el-input type="textarea" v-model="currentRow.rfqRemark" resize="none" readonly></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-tab-pane>
      <el-tab-pane name="property" label="询价单属性">
        <el-table :data="inquiryDataList" v-loading="queryPropertyLoading" height="36vh" border>
          <el-table-column label="属性编码" header-align="center" min-width="100" prop="itemNo"></el-table-column>
          <el-table-column label="属性名称" header-align="center" min-width="160" prop="itemDesc"></el-table-column>
          <el-table-column label="属性类型" header-align="center" min-width="80" prop="valueType"></el-table-column>
          <el-table-column label="属性值" header-align="center" min-width="100">
            <template slot-scope="scope">
              <span v-if="scope.row.valueType === '文本'">{{ scope.row.textValue }}</span>
              <span v-if="scope.row.valueType === '数字'">{{ scope.row.numValue }}</span>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane name="breakdown" label="Cost Breakdown">
        <breakdown-cost :quote-detail="currentRow" height="36vh"></breakdown-cost>
      </el-tab-pane>
      <el-tab-pane name="tp" label="TP">
        <tp-cost :quote-detail="currentRow" height="36vh"></tp-cost>
      </el-tab-pane>
    </el-tabs>

    <el-dialog title="属性详情" v-drag :visible.sync="propertyVisible" :close-on-click-modal="false" append-to-body
               width="800px">
      <el-form :model="currentProperty" label-position="top">
        <el-row :gutter="10">
          <el-col :span="4">
            <el-form-item label="BU">
              <bu-select v-model="queryForm.buId" disabled></bu-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="属性模板">
              <el-select v-model="currentProperty.id" style="width: 100%;">
                <el-option v-for="item in propertyList" :key="item.id" :label="item.codeDesc" :value="item.id">
                  <div style="float:left;">{{ item.codeDesc }}</div>
                  <div style="float:right;">{{ item.codeNo }}</div>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="rq">
      <el-table :data="propertyItemList" border height="300px">
        <el-table-column label="属性编码" header-align="center" min-width="120" prop="itemNo"></el-table-column>
        <el-table-column label="属性名称" header-align="center" min-width="180" prop="itemDesc"></el-table-column>
        <el-table-column label="属性类型" header-align="center" align="center" min-width="80" prop="valueType"></el-table-column>
        <el-table-column label="属性值" header-align="center" min-width="140" prop="value">
          <template slot-scope="scope">
            <template v-if="scope.row.valueTypeDb==='T' && scope.row.valueChooseFlag==='Y'">
              <el-select v-model="scope.row['textValue']" placeholder="请选择" style="width: 100%" clearable>
                <el-option :label="available.availableValue" :value="available.availableValue" :key="available.id"
                           v-for="(available) in scope.row.availableList"></el-option>
              </el-select>
            </template>
            <template v-else-if="scope.row.valueTypeDb==='N' && scope.row.valueChooseFlag==='Y'">
              <el-select v-model="scope.row['numValue']" placeholder="请选择" style="width: 100%" clearable>
                <el-option :label="available.availableValue" :value="available.availableValue" :key="available.id"
                           v-for="(available) in scope.row.availableList"></el-option>
              </el-select>
            </template>
            <template v-else-if="scope.row.valueTypeDb==='T'">
              <el-input v-model="scope.row['textValue']"></el-input>
            </template>
            <template v-else-if="scope.row.valueTypeDb==='N'">
              <el-input-number style="width: 100%" :controls="false" :step="0"
                               v-model="scope.row['numValue']"></el-input-number>
            </template>
          </template>
        </el-table-column>
      </el-table>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="propertyVisible = false">确 定</el-button>
        <el-button @click="propertyVisible = false">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<style scoped>

.auto /deep/ .el-form-item__content {
  height: auto;
  line-height: 1.5;
}
</style>