ccl_plm-vue/src/views/modules/project/projectPart/searchProjectPart.vue

<template>
  <div class="mod-config">
    <el-form :inline="true" label-position="top" label-width="100px" style="margin-top: 0px;">
      <el-form-item :label="'项目编号'">
        <el-input v-model="searchData.projectId" style="width: 160px"></el-input>
      </el-form-item>
      <el-form-item label="物料编码">
        <el-input v-model="searchData.testPartNo" style="width: 160px"></el-input>
      </el-form-item>
      <el-form-item label=" ">
        <el-button @click="search()" type="primary" style="margin-left: 2px;margin-top:0px">查询</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--primary el-button--medium">
          {{ '导出' }}
        </download-excel>
      </el-form-item>
    </el-form>
    <el-table
      :height="height"
      :data="dataList1"
      border
      ref="mainTable"
      @row-click="changeData"
      highlight-current-row
      v-loading="dataListLoading"
      style="width: 100%;">
      <el-table-column
        v-for="(item,index) in columnList1" :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="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[20, 50, 100, 1000]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>
    <el-tabs style="font-size: 12px;min-height: 330px" class="customer-tab" v-model="activeName"  type="border-card"  @tab-click="tabClick">
      <el-tab-pane label="项目信息" name="project">
        <el-form label-position="top" style="margin-top: 0px; margin-left: 0px;">
          <el-row :gutter="20">
            <el-col :span="5"><div class="grid-content bg-purple">
              <el-form-item :label="'项目号'">
                <el-input v-model="projectData.projectId" readonly  ></el-input>
              </el-form-item>
            </div></el-col>
            <el-col :span="5"><div class="grid-content bg-purple">
              <el-form-item :label="'项目类型'">
                <el-input v-model="projectData.projectType" readonly  ></el-input>
              </el-form-item>
            </div></el-col>
            <el-col :span="5"><div class="grid-content bg-purple">
              <el-form-item :label="'项目来源'">
                <el-input v-model="projectData.projectSourceDesc" readonly  ></el-input>
              </el-form-item>
            </div></el-col>
            <el-col :span="5"><div class="grid-content bg-purple">
              <el-form-item :label="'优先级'">
                <el-input v-model="projectData.priorityDesc" readonly></el-input>
              </el-form-item>
            </div></el-col>
            <el-col :span="4"><div class="grid-content bg-purple">
              <el-form-item :label="'需求日期'">
                <el-input v-model="projectData.needDate" readonly  ></el-input>
              </el-form-item>
            </div></el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="5"><div class="grid-content bg-purple">
              <el-form-item :label="'BU'">
                <el-input v-model="projectData.buDesc" readonly style="" ></el-input>
              </el-form-item>
            </div></el-col>
            <el-col :span="5"><div class="grid-content bg-purple">
              <el-form-item :label="'项目名称'">
                <el-input v-model="projectData.projectName" readonly style="" ></el-input>
              </el-form-item>
            </div></el-col>
            <el-col :span="14"><div class="grid-content bg-purple">
              <el-form-item :label="'项目描述'">
                <el-input v-model="projectData.projectDesc" readonly style="" ></el-input>
              </el-form-item>
            </div></el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="8"><div class="grid-content bg-purple">
              <el-form-item :label="'项目经理'">
                <el-input v-model="projectData.projectManagerName" readonly style="" ></el-input>
              </el-form-item>
            </div></el-col>
            <el-col :span="8"><div class="grid-content bg-purple">
              <el-form-item :label="'项目责任人'">
                <el-input v-model="projectData.projectOwnerName" readonly style="" ></el-input>
              </el-form-item>
            </div></el-col>
            <el-col :span="8"><div class="grid-content bg-purple">
              <el-form-item :label="'项目权限'">
                <el-input v-model="projectData.userRoleName" readonly style="" ></el-input>
              </el-form-item>
            </div></el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="24"><div class="grid-content bg-purple">
              <el-form-item :label="'客户应用/要求'">
                <el-input v-model="projectData.customerRemark" readonly style="" ></el-input>
              </el-form-item>
            </div></el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="24"><div class="grid-content bg-purple">
              <el-form-item :label="'其他特殊要求'">
                <el-input v-model="projectData.remark" readonly style="" ></el-input>
              </el-form-item>
            </div></el-col>
          </el-row>
        </el-form>

      </el-tab-pane>
      <el-tab-pane label="询价信息" name="projectQuotation">
        <projectQuotation ref="projectQuotation"  ></projectQuotation>
      </el-tab-pane>
      <el-tab-pane label="报价信息" name="quotationHeader">
        <project-part-quote :part="currentRow"></project-part-quote>
      </el-tab-pane>
      <el-tab-pane label="打样信息" name="sample">
        <sample ref="sample"  ></sample>
      </el-tab-pane>
      <el-tab-pane label="测试记录" name="test">
        <test ref="test"  ></test>
      </el-tab-pane>
      <el-tab-pane label="刀模申请" name="purchase">

      </el-tab-pane>
      <el-tab-pane label="技术参数卡" name="technicalSpecification">
        <technicalSpecification ref="technicalSpecification"  ></technicalSpecification>
      </el-tab-pane>
    </el-tabs>


    <Chooselist ref="baseList"  @getBaseData="getBaseData"></Chooselist>
  </div>
</template>

<script>
  import {projectInfoPartSearch,
    projectInfoSearch,
  } from "@/api/project/project.js"
  import Chooselist from '@/views/modules/common/Chooselist'
  import projectQuotation from "../projectInfo/com_project_puotation.vue";/*組件*/
  import technicalSpecification from "./com_projectPart_technicalSpecification";
  import sample from "../projectInfo/com_project_sample";
  import test from "../projectInfo/com_project_test";
  import quotationHeader from "../projectInfo/com_project_info_quotation";
  import ProjectPartQuote from "./projectPartQuote.vue";
    export default {
      components: {
        ProjectPartQuote,
        Chooselist,
        technicalSpecification,
        projectQuotation,
        sample,
        test,
        quotationHeader,
      },
      name: "searchProjectPart",
      data() {
        return{
          currentRow:{},
          activeName: 'project',
          tagNo:'',
          tagNo2:'',
          pageIndex: 1,
          pageSize: 100,
          totalPage: 0,
          height: 200,
          dataListLoading: false,
          // 导出 start
          exportData: [],
          exportName: "项目物料清单" + this.dayjs().format('YYYYMMDDHHmmss'),
          exportHeader: ["项目物料清单"],
          exportFooter: [],
          exportList:[],
          // 导出 start
          dataList1:[],
          columnList1:[
            {
              userId: this.$store.state.user.name,
              functionId: 101002002,
              serialNumber: '101002002Table1TestPartNo',
              tableId: "101002002Table1",
              tableName: "项目物料",
              columnProp: "testPartNo",
              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: 101002002,
              serialNumber: '101002002Table1PartDesc',
              tableId: "101002002Table1",
              tableName: "项目物料",
              columnProp: "partDesc",
              headerAlign: "center",
              align: "left",
              columnLabel: "物料描述",
              columnHidden: false,
              columnImage: false,
              columnSortable: false,
              sortLv: 0,
              status: true,
              fixed: '',
              columnWidth: 200
            },{
              userId: this.$store.state.user.name,
              functionId: 101002002,
              serialNumber: '101002002Table1PartType',
              tableId: "101002002Table1",
              tableName: "项目物料",
              columnProp: "projectId",
              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: 101002002,
              serialNumber: '101002002Table1PartType',
              tableId: "101002002Table1",
              tableName: "项目物料",
              columnProp: "partType",
              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: 101002002,
              serialNumber: '101002002Table1PartTypeDesc',
              tableId: "101002002Table1",
              tableName: "项目物料",
              columnProp: "partTypeDesc",
              headerAlign: "center",
              align: "left",
              columnLabel: "产品大类名称",
              columnHidden: false,
              columnImage: false,
              columnSortable: false,
              sortLv: 0,
              status: true,
              fixed: '',
              columnWidth: 200
            },{
              userId: this.$store.state.user.name,
              functionId: 101002002,
              serialNumber: '101002002Table1CodeNo',
              tableId: "101002002Table1",
              tableName: "项目物料",
              columnProp: "codeNo",
              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: 101002002,
              serialNumber: '101002002Table1CodeDesc',
              tableId: "101002002Table1",
              tableName: "项目物料",
              columnProp: "codeDesc",
              headerAlign: "center",
              align: "left",
              columnLabel: "属性模板名称",
              columnHidden: false,
              columnImage: false,
              columnSortable: false,
              sortLv: 0,
              status: true,
              fixed: '',
              columnWidth: 150
            },{
              userId: this.$store.state.user.name,
              functionId: 101002002,
              serialNumber: '101002002Table1Remark',
              tableId: "101002002Table1",
              tableName: "项目物料",
              columnProp: "remark",
              headerAlign: "center",
              align: "left",
              columnLabel: "备注",
              columnHidden: false,
              columnImage: false,
              columnSortable: false,
              sortLv: 0,
              status: true,
              fixed: '',
              columnWidth: 120
            },{
              userId: this.$store.state.user.name,
              functionId: 101002002,
              serialNumber: '101002002Table1CreateDate',
              tableId: "101002002Table1",
              tableName: "项目物料",
              columnProp: "createDate",
              headerAlign: "center",
              align: "left",
              columnLabel: "创建时间",
              columnHidden: false,
              columnImage: false,
              columnSortable: false,
              sortLv: 0,
              status: true,
              fixed: '',
              columnWidth: 120
            },{
              userId: this.$store.state.user.name,
              functionId: 101002002,
              serialNumber: '101002002Table1CreateBy',
              tableId: "101002002Table1",
              tableName: "项目物料",
              columnProp: "createBy",
              headerAlign: "center",
              align: "left",
              columnLabel: "创建人",
              columnHidden: false,
              columnImage: false,
              columnSortable: false,
              sortLv: 0,
              status: true,
              fixed: '',
              columnWidth: 80
            },{
              userId: this.$store.state.user.name,
              functionId: 101002002,
              serialNumber: '101002002Table1UpdateDate',
              tableId: "101002002Table1",
              tableName: "项目物料",
              columnProp: "updateDate",
              headerAlign: "center",
              align: "left",
              columnLabel: "上次修改日期",
              columnHidden: false,
              columnImage: false,
              columnSortable: false,
              sortLv: 0,
              status: true,
              fixed: '',
              columnWidth: 120
            },{
              userId: this.$store.state.user.name,
              functionId: 101002002,
              serialNumber: '101002002Table1UpdateBy',
              tableId: "101002002Table1",
              tableName: "项目物料",
              columnProp: "updateBy",
              headerAlign: "center",
              align: "left",
              columnLabel: "修改人",
              columnHidden: false,
              columnImage: false,
              columnSortable: false,
              sortLv: 0,
              status: true,
              fixed: '',
              columnWidth: 80
            },
          ],
          searchData:{
            page: 1,
            limit: 100,
            site:this.$store.state.user.site,
            projectId:'',
            testPartNo:'',
            userName:this.$store.state.user.name,
          },
          projectData: {
            id: 0,
            site:this.$store.state.user.site,
            projectLevel:'',
            projectId:'',
            projectTypeDb:'',
            projectType:'',
            customerName:'',
            customerId:'',
            projectName:'',
            projectDesc:'',
            needDate:'',
            priority:'',
            projectSource:'',
            priorityDesc:'',
            projectSourceDesc:'',
            projectManagerName:'',
            projectOwnerName:'',
            customerRemark:'',
            remark:'',
            userRoleName:'',
            buDesc:'',
            buNo:'',
          },
        }
      },
      mounted() {
        this.$nextTick(() => {
          this.height = window.innerHeight - 520;
        })
      },
      methods: {
        // 获取基础数据列表S
        getBaseList(val, type) {
          this.tagNo = val
          this.tagNo2 = type
          this.$nextTick(() => {
            let strVal = ''
            if (val === 1010) {
              if (type == 1) {
                strVal = this.searchData.projectType
              }
            }
            this.$refs.baseList.init(val, strVal)
          })
        },
        /* 列表方法的回调 */
        getBaseData(val) {
          if (this.tagNo === 1010) {
            if (this.tagNo2 == 1) {
              this.searchData.projectType = val.Base_desc
            }
          }
        },
        //导出excel
        async createExportData() {
          this.searchData.limit = -1
          this.searchData.page = 1
          await projectInfoSearch(this.searchData).then(({data}) => {
            this.exportList= data.page.list;
          })

          return this.exportList;
        },
        startDownload() {
          //  this.exportData = this.dataList

        },
        finishDownload() {

        },
        fields() {
          let json = "{"
          this.columnList1.forEach((item, index) => {
            if (index == this.columnList1.length - 1) {
              json += "\"" + item.columnLabel + "\"" + ":" + "\"" + item.columnProp + "\""
            } else {
              json += "\"" + item.columnLabel + "\"" + ":" + "\"" + item.columnProp + "\"" + ","
            }
          })
          json += "}"
          let s = eval("(" + json + ")")

          return s
        },
        //导出excel
        async createExportData2() {

          return this.contactList;
        },
        startDownload2() {
          //  this.exportData = this.dataList

        },
        finishDownload2() {

        },
        fields2() {
          let json = "{"
          this.columnList2.forEach((item, index) => {
            if (index == this.columnList2.length - 1) {
              json += "\"" + item.columnLabel + "\"" + ":" + "\"" + item.columnProp + "\""
            } else {
              json += "\"" + item.columnLabel + "\"" + ":" + "\"" + item.columnProp + "\"" + ","
            }
          })
          json += "}"
          let s = eval("(" + json + ")")

          return s
        },
        // 导出 end
        // 每页数
        sizeChangeHandle (val) {
          this.pageSize = val
          this.pageIndex = 1
          this.search()
        },
        // 当前页
        currentChangeHandle (val) {
          this.pageIndex = val
          this.search()
        },
        //单击切换订单
        changeData(row) {
          this.currentRow = JSON.parse(JSON.stringify(row));
          let inData= {
            site:row.site,
            projectId:row.projectId,
            page: 1,
            limit: 10,
          }
          projectInfoSearch(inData).then(({data}) => {
            if (data.code == 0) {
              if(data.page.list.length>0){
               this.projectData=data.page.list[0]
              }
            }
            this.dataListLoading = false
          })
          this.refreshCurrentTabTable()
        },
        search () {
          this.searchData.limit = this.pageSize
          this.searchData.page = this.pageIndex
          projectInfoPartSearch(this.searchData).then(({data}) => {
            if (data.code == 0) {
              this.dataList1 = data.page.list
              this.pageIndex = data.page.currPage
              this.pageSize = data.page.pageSize
              this.totalPage = data.page.totalCount
              if(this.dataList1.length>0){
                this.$refs.mainTable.setCurrentRow(this.dataList1[0]);
                this.changeData(this.dataList1[0])
              }
            }
            this.dataListLoading = false
          })
        },
        tabClick (tab, event) {
          // 刷新列表数据
          this.refreshCurrentTabTable()
        },
        // 刷新页签的table数据
        refreshCurrentTabTable () {
          if (this.activeName === 'technicalSpecification') {
            this.refreshTable('technicalSpecification');
          }
          if (this.activeName === 'projectQuotation') {
            this.refreshTable('projectQuotation');
          }
          if (this.activeName == 'quotationHeader') {
            this.refreshTable('quotationHeader');
          }
          if (this.activeName == 'sample') {
            this.refreshTable('sample');
          }
          if (this.activeName == 'test') {
            this.refreshTable('test');
          }
        },
        refreshTable(type){
          let inData={
            site: this.currentRow.site,
            testPartNo: this.currentRow.testPartNo,
            page: 1,
            limit: 1000
          }
          if(type==='technicalSpecification'){
            this.$refs.technicalSpecification.init(inData)
          }
          if(type==='projectQuotation'){
            this.$refs.projectQuotation.init(inData)
          }
          // if(type==='quotationHeader'){
          //   this.$refs.quotationHeader.init(inData)
          // }
          if(type==='sample'){
            this.$refs.sample.init(inData)
          }
          if(type==='test'){
            this.$refs.test.init(inData)
          }
        },
      }
    }
</script>

<style scoped>

</style>