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

<script>
import DictDataSelect from "../sys/dict-data-select.vue";
import {queryQuotationInformationByPage} from "@/api/quote/quotationInformation";
import {batchSaveQuote} from "@/api/quote/quote";
import {getSiteAndBuByUserName} from "../../../api/qc/qc";
import {searchInquiryDetailHeaderInfo} from "../../../api/inquiry/inquiryDetail";
import {updateColumnSize} from "../../../api/table";

export default {
  name: "quotes",
  components: {DictDataSelect},
  props:{
    isComponent:{
      type: Boolean,
      default: false
    },
    height:{
      type:[String,Number],
      default: '76vh'
    },
  },
  data(){
    return{
      pageIndex: 1,
      pageSize: 50,
      totalPage: 0,
      userBuList:[],
      queryForm: {
        site: this.$store.state.user.site,
        customerNo: '',
        customerDesc: '',
        id: '',
        rfqNo: '',
        bu: '',
        requestStartDate: '',
        requestEndDate: '',
        requiredCompletionStartDate: '',
        requiredCompletionEndDate: '',
        status: '',
        quoterName: '',
        requesterName: '',
        priorityLevel: '',
        partNo: '',
        partDesc: '',
        page: 1,
        limit: 10,
        menuId: this.$route.meta.menuId,
      },
      dataList:[],
      queryLoading:false,
      selectionList:[],
      columns:[
        {
          userId: this.$store.state.user.name,
          functionId: 102001,
          serialNumber: '102001Table1BuDesc',
          tableId: '102001Table1',
          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: 102001,
          serialNumber: '102001Table1rfqNo',
          tableId: '102001Table1',
          tableName: '询价信息表',
          columnProp: 'rfqNo',
          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: 102001,
          serialNumber: '102001Table1CustomerNo',
          tableId: '102001Table1',
          tableName: '询价信息表',
          columnProp: 'customerNo',
          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: 102001,
          serialNumber: '102001Table1CustomerDesc',
          tableId: '102001Table1',
          tableName: '询价信息表',
          columnProp: 'customerDesc',
          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: 102001,
          serialNumber: '102001Table1RequestDate',
          tableId: '102001Table1',
          tableName: '询价信息表',
          columnProp: 'requestDate',
          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: 102001,
          serialNumber: '102001Table1RequesterName',
          tableId: '102001Table1',
          tableName: '询价信息表',
          columnProp: 'requesterName',
          headerAlign: 'center',
          align: 'center',
          columnLabel: 'PjM',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 80
        },
        {
          userId: this.$store.state.user.name,
          functionId: 102001,
          serialNumber: '102001Table1QuoterName',
          tableId: '102001Table1',
          tableName: '询价信息表',
          columnProp: 'quoterName',
          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: 102001,
          serialNumber: '102001Table1RequiredCompletionDate',
          tableId: '102001Table1',
          tableName: '询价信息表',
          columnProp: 'requiredCompletionDate',
          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: 102001,
          serialNumber: '102001Table1CustomerInquiryNo',
          tableId: '102001Table1',
          tableName: '询价信息表',
          columnProp: 'customerInquiryNo',
          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: 102001,
          serialNumber: '102001Table2PartNo',
          tableId: '102001Table2',
          tableName: '询价产品表',
          columnProp: 'partNo',
          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: 102001,
          serialNumber: '102001Table2PartDesc',
          tableId: '102001Table2',
          tableName: '询价产品表',
          columnProp: 'partDesc',
          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: 102001,
          serialNumber: '102001Table1Status',
          tableId: '102001Table1',
          tableName: '询价信息表',
          columnProp: 'status',
          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: 102001,
          serialNumber: '102001Table2InquiryQty',
          tableId: '102001Table2',
          tableName: '询价产品表',
          columnProp: 'inquiryQty',
          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: 102001,
          serialNumber: '102001Table2Unit',
          tableId: '102001Table2',
          tableName: '询价产品表',
          columnProp: 'umName',
          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: 102001,
          serialNumber: '102001Table2CodeNo',
          tableId: '102001Table2',
          tableName: '询价产品表',
          columnProp: 'codeNo',
          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: 102001,
          serialNumber: '102001Table1PriorityLevel',
          tableId: '102001Table1',
          tableName: '询价信息表',
          columnProp: 'priorityLevel',
          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: 102001,
          serialNumber: '102001Table2Remark',
          tableId: '102001Table2',
          tableName: '询价产品表',
          columnProp: 'remark',
          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: 102001,
          serialNumber: '102001Table1CreateDate',
          tableId: '102001Table1',
          tableName: '询价信息表',
          columnProp: 'createDate',
          headerAlign: 'center',
          align: 'center',
          columnLabel: '创建时间',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 160
        },
        {
          userId: this.$store.state.user.name,
          functionId: 102001,
          serialNumber: '102001Table1CreateBy',
          tableId: '102001Table1',
          tableName: '询价信息表',
          columnProp: 'createBy',
          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: 102001,
          serialNumber: '102001Table1UpdateDate',
          tableId: '102001Table1',
          tableName: '询价信息表',
          columnProp: 'updateDate',
          headerAlign: 'center',
          align: 'center',
          columnLabel: '更新时间',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 160
        },
        {
          userId: this.$store.state.user.name,
          functionId: 102001,
          serialNumber: '102001Table1UpdateBy',
          tableId: '102001Table1',
          tableName: '询价信息表',
          columnProp: 'updateBy',
          headerAlign: 'center',
          align: 'center',
          columnLabel: '更新人',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 80
        }
      ],
      quoteLoading:false,
    }
  },
  methods:{
    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("栏位宽度保存成功！")
        }
      })
    },
    // 获取用户的bu
    getSiteAndBuByUserName() {
      let tempData = {
        username: this.$store.state.user.name,
      }
      getSiteAndBuByUserName(tempData).then(({data}) => {
        if (data.code === 0) {
          this.userBuList = data.rows
        }
      })
    },

    handleQuery(){
      this.queryForm.limit = this.pageSize
      this.queryForm.page = this.pageIndex
      this.queryForm.status = 'B'
      this.queryLoading = true
      searchInquiryDetailHeaderInfo(this.queryForm).then(({data})=>{
        if (data && data.code === 0){
          this.dataList = data.page.list
          this.pageIndex = data.page.currPage
          this.pageSize = data.page.pageSize
          this.totalPage = data.page.totalCount
        }else {
          this.$message.warning(data.msg);
        }
        this.queryLoading = false
      }).catch((error)=>{
        this.$message.error(error);
        this.queryLoading = false
      })
    },
    handleSizeChange(val){
      this.pageSize = val
      this.pageIndex = 1
      this.handleQuery();
    },
    handlePageChange(val){
      this.pageIndex = val
      this.handleQuery();
    },
    handleSelectionChange(val) {
      this.selectionList = val;
    },
    handleQuote(){
      if (this.selectionList.length === 0){
        this.$message.warning("请选择需要报价的单据");
        return;
      }
      let params = this.selectionList.map((item)=>{
        item.createBy = this.$store.state.user.name
        return item
      })
      this.quoteLoading = true
      batchSaveQuote(params).then(({data})=>{
        this.quoteLoading = false
        if (data && data.code === 0){
          this.$message.success(data.msg);
          this.handleQuery();
          this.$router.push({
            name:'quote-index',
            params:{
              ids:data.rows
            }
          })
        }else {
          this.$message.warning(data.msg);
        }
      }).catch((error)=>{
        this.quoteLoading = false
        this.$message.error(error);
      })
    },
    handleDblClick(row){
      this.$emit('dblclick',row)
    }
  },
  created() {
    this.handleQuery();
  }
}
</script>

<template>
  <div>
<!--    <el-form :model="queryForm" label-position="top" label-width="100px" style="max-width: 1100px">-->
<!--      <el-row :gutter="15">-->
<!--        <el-col :span="3">-->
<!--          <el-form-item label="申请批次号">-->
<!--            <el-input v-model="queryForm.quotationBatchNo"></el-input>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
<!--        <el-col :span="3">-->
<!--          <el-form-item label="客户编码" v-if="!isComponent">-->
<!--            <el-input v-model="queryForm.customerNo"></el-input>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
<!--        <el-col :span="3">-->
<!--          <el-form-item label="客户名称" v-if="!isComponent">-->
<!--            <el-input v-model="queryForm.customerDesc"></el-input>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
<!--        <el-col :span="3">-->
<!--          <el-form-item label="项目料号" v-if="!isComponent">-->
<!--            <el-input v-model="queryForm.partNo"></el-input>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
<!--        <el-col :span="3">-->
<!--          <el-form-item label="物料描述" v-if="!isComponent">-->
<!--            <el-input v-model="queryForm.partDesc"></el-input>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
<!--        <el-col :span="6" v-if="!isComponent">-->
<!--          <el-form-item label="要求完成日期">-->
<!--            <div style="display: flex">-->
<!--              <el-date-picker style="width: 47%" v-model="queryForm.startDate" type="date" value-format='yyyy-MM-dd' format='yyyy-MM-dd'></el-date-picker>-->
<!--              <div style="width: 6%;text-align: center">-</div>-->
<!--              <el-date-picker style="width: 47%" v-model="queryForm.endDate" type="date" value-format='yyyy-MM-dd' format='yyyy-MM-dd'></el-date-picker>-->
<!--            </div>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
<!--        <el-col :span="3" v-if="!isComponent">-->
<!--          <el-form-item label=" ">-->

<!--          </el-form-item>-->
<!--        </el-col>-->
<!--        <el-col :span="3">-->
<!--          <el-form-item label="批次序号">-->
<!--            <el-input-number :controls="false" :min="0" style="width: 100%" v-model="queryForm.quotationItemNo"></el-input-number>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
<!--        <el-col :span="3">-->
<!--          <el-form-item label="项目编码">-->
<!--            <el-input v-model="queryForm.projectNo"></el-input>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
<!--        <el-col :span="3">-->
<!--          <el-form-item label="项目名称">-->
<!--            <el-input v-model="queryForm.projectDesc"></el-input>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
<!--        <el-col :span="3">-->
<!--          <el-form-item label="报价专员" v-if="!isComponent">-->
<!--            <el-input v-model="queryForm.quoterName"></el-input>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
<!--        <el-col :span="3">-->
<!--          <el-form-item label="优先等级" v-if="!isComponent">-->
<!--            <dict-data-select v-model="queryForm.priorityLevel" clearable :use-default-value="false" dict-type="priority_Level"/>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
<!--        <el-col :span="3">-->
<!--          <el-form-item :label="'状态'">-->
<!--            <el-select v-model="queryForm.quotationStatus" style="width: 100%">-->
<!--              <el-option label="全部" value=""></el-option>-->
<!--              <el-option label="草稿" value="草稿"></el-option>-->
<!--              <el-option label="下达" value="下达"></el-option>-->
<!--            </el-select>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
<!--        <el-col :span="3">-->
<!--          <el-form-item label=" ">-->
<!--            <el-button type="primary" @click="handleQuery">查询</el-button>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
<!--      </el-row>-->
<!--    </el-form>-->
    <!-- 查询条件 -->
    <el-form :inline="true" label-position="top" :model="queryForm" @keyup.enter.native="handleQuery()">
      <el-form-item :label="'BU'">
        <el-select v-model="queryForm.bu" placeholder="请选择" clearable style="width: 120px">
          <el-option
            v-for = "i in userBuList"
            :key = "i.buNo"
            :label = "i.buDesc"
            :value = "i.buNo">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="询价单号">
        <el-input v-model="queryForm.rfqNo" clearable style="width: 120px"></el-input>
      </el-form-item>
      <el-form-item label="客户编码">
        <span style="cursor: pointer" slot="label" @click="getBaseList(509,2)"><a herf="#">客户编码</a></span>
        <el-input v-model="queryForm.customerNo" clearable style="width: 120px"></el-input>
      </el-form-item>
      <el-form-item :label="'客户名称'">
        <el-input v-model="queryForm.customerDesc" clearable style="width: 120px"></el-input>
      </el-form-item>
      <el-form-item :label="'询价日期'">
        <el-date-picker
          style="width: 120px"
          v-model="queryForm.requestStartDate"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label=" ">
        <div style="text-align: center;"><i class="el-icon-right"></i></div>
      </el-form-item>
      <el-form-item :label="' '">
        <el-date-picker
          style="width: 120px"
          v-model="queryForm.requestEndDate"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item :label="'优先等级'">
        <dict-data-select v-model="queryForm.priorityLevel" clearable style="width: 120px" :use-default-value="false"
                          dict-type="priority_Level"/>
      </el-form-item>
    </el-form>
    <el-form :inline="true" label-position="top" :model="queryForm" @keyup.enter.native="handleQuery()">
      <el-form-item label="产品编码">
        <span style="cursor: pointer" slot="label" @click="getBaseList(2005)"><a herf="#">产品编码</a></span>
        <el-input v-model="queryForm.partNo" clearable style="width: 120px"></el-input>
      </el-form-item>
      <el-form-item :label="'产品名称'">
        <el-input v-model="queryForm.partDesc" clearable style="width: 120px"></el-input>
      </el-form-item>
      <el-form-item :label="'PjM'">
        <span style="cursor: pointer" slot="label" @click="getBaseList(2004,1)"><a herf="#">PjM</a></span>
        <el-input v-model="queryForm.requesterName" clearable style="width: 120px"></el-input>
      </el-form-item>
      <el-form-item :label="'报价专员'">
        <span style="cursor: pointer" slot="label" @click="getBaseList(2002,1)"><a herf="#">报价专员</a></span>
        <el-input v-model="queryForm.quoterName" clearable style="width: 120px"></el-input>
      </el-form-item>
      <el-form-item :label="'要求报价日期'">
        <el-date-picker
          style="width: 120px"
          v-model="queryForm.requiredCompletionStartDate"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label=" ">
        <div style="text-align: center;"><i class="el-icon-right"></i></div>
      </el-form-item>
      <el-form-item :label="' '">
        <el-date-picker
          style="width: 120px"
          v-model="queryForm.requiredCompletionEndDate"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item :label="' '">
        <el-button @click="handleQuery()">查询</el-button>
        <el-button type="primary" :loading="quoteLoading" @click="handleQuote" v-if="!isComponent">报价</el-button>
        <!--        <el-button type="primary" icon="el-icon-upload" @click="handleImportQuotation()">导入</el-button>-->
        <!--        <download-excel-->
        <!--          :fields="fields()"-->
        <!--          :data="exportData"-->
        <!--          type="xls"-->
        <!--          :name="exportName"-->
        <!--          :header="exportHeader"-->
        <!--          :footer="exportFooter"-->
        <!--          :fetch="createExportData"-->
        <!--          :before-generate="startDownload"-->
        <!--          :before-finish="finishDownload"-->
        <!--          worksheet="导出信息"-->
        <!--          class="el-button el-button&#45;&#45;primary el-button&#45;&#45;medium">-->
        <!--          {{ "导出" }}-->
        <!--        </download-excel>-->
      </el-form-item>
    </el-form>
    <el-table :data="dataList" border v-loading="queryLoading" :height="height" @selection-change="handleSelectionChange" @row-dblclick="handleDblClick">
      <el-table-column type="selection" width="55" fixed="left" align="center" v-if="!isComponent"></el-table-column>
      <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">
          <div v-if="item.columnProp !== 'status' && item.columnProp !== 'priorityLevel'">
            <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>
          </div>
          <div v-else-if="item.columnProp === 'status'">
            <span v-if="!item.columnHidden">
              <span v-if="scope.row.status === 'C'">草稿</span>
              <span v-if="scope.row.status === 'B'">已下达</span>
              <span v-if="scope.row.status === 'A'">已报价</span>
            </span>
            <span v-if="item.columnImage"><img :src="scope.row[item.columnProp]"
                                               style="width: 100px; height: 80px"/></span>
          </div>
          <div v-else-if="item.columnProp === 'priorityLevel'">
            <span v-if="!item.columnHidden">
              <span v-if="scope.row.priorityLevel === ' A'">重要客户</span>
              <span v-if="scope.row.priorityLevel === ' B'">潜力客户</span>
              <span v-if="scope.row.priorityLevel === ' C'">一般客户</span>
            </span>
            <span v-if="item.columnImage"><img :src="scope.row[item.columnProp]"
                                               style="width: 100px; height: 80px"/></span>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @size-change="handleSizeChange"
                   @current-change="handlePageChange"
                   :current-page="pageIndex"
                   :page-sizes="[ 50, 100, 200, 500]"
                   :page-size="pageSize"
                   :total="totalPage"
                   layout="total,sizes, prev, pager, next, jumper">
    </el-pagination>
  </div>
</template>
<style scoped>

</style>