wilson
/
xujiecloud-vue
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

折叠

master
han\hanst 1 day ago
parent
da73243fa7
commit
abe340d329
1 changed files with 367 additions and 184 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 551
      src/views/modules/sampleTracking/projectProofTracking.vue

551
src/views/modules/sampleTracking/projectProofTracking.vue
View File

@ -1,172 +1,37 @@
<template> <template>
<div class="mod-config"> <div class="mod-config">
<el-form :inline="true" :model="searchData" label-position="top" class="search-form">
<el-form-item label="BU">
<el-select v-model="searchData.buNo" filterable placeholder="请选择" style="width: 80px" @change="handleSearchBuChange">
<el-option
v-for="item in userBuList"
:key="`searchBu_${item.buNo}`"
:label="item.buDesc"
:value="normalizeBuNo(item.buNo, searchData.site)"
/>
</el-select>
</el-form-item>
<el-form-item label="项目编码">
<el-input v-model="searchData.projectNo" clearable placeholder="请输入项目编码" style="width: 120px" />
</el-form-item>
<el-form-item label="项目描述">
<el-input v-model="searchData.projectDesc" clearable placeholder="请输入项目描述" style="width: 160px" />
</el-form-item>
<el-form-item label="项目物料">
<el-input v-model="searchData.testPartNo" clearable placeholder="请输入项目物料" style="width: 120px" />
</el-form-item>
<el-form-item label="料号描述">
<el-input v-model="searchData.partDesc" clearable placeholder="请输入料号描述" style="width: 160px" />
</el-form-item>
<el-form-item v-if="isRfidBuNo(searchData.buNo)" label="分类">
<el-select v-model="searchData.dryWetType" clearable placeholder="全部" style="width: 100px">
<el-option v-for="item in dryWetTypeList" :key="`searchDryWet_${item}`" :label="item" :value="item" />
</el-select>
</el-form-item>
<el-form-item label="客户名称">
<el-select
v-model="searchData.customerNo"
filterable
clearable
remote
reserve-keyword
placeholder="请输入客户名称"
style="width: 120px"
:remote-method="handleSearchCustomerRemote"
:loading="searchCustomerOptionLoading"
@visible-change="handleSearchCustomerVisibleChange"
>
<el-option
v-for="item in searchCustomerOptions"
:key="`searchCustomer_${item.customerNo}`"
:label="getSearchCustomerOptionLabel(item)"
:value="item.customerNo"
/>
</el-select>
</el-form-item>
<el-form-item label="打样单号">
<el-input v-model="searchData.proofingNo" clearable placeholder="请输入打样单号" style="width: 120px" />
</el-form-item>
<el-form-item label="Sample making Year">
<el-select v-model="searchData.sampleMakingYear" clearable placeholder="全部" style="width: 110px">
<el-option
v-for="year in sampleMakingYearOptions"
:key="`searchSampleMakingYear_${year}`"
:label="year"
:value="year"
/>
</el-select>
</el-form-item>
<el-form-item label="Sample making Month">
<el-select v-model="searchData.sampleMakingMonth" clearable placeholder="全部" style="width: 90px">
<el-option
v-for="month in sampleMakingMonthOptions"
:key="`searchSampleMakingMonth_${month}`"
:label="month"
:value="month"
/>
</el-select>
</el-form-item>
<el-form-item label="PM inquery time">
<el-date-picker
v-model="searchData.pmInqueryTimeStart"
type="date"
value-format="yyyy-MM-dd"
placeholder="开始"
style="width: 120px"
/>
<span> - </span>
<el-date-picker
v-model="searchData.pmInqueryTimeEnd"
type="date"
value-format="yyyy-MM-dd"
placeholder="结束"
style="width: 120px"
/>
</el-form-item>
<el-form-item label="区域">
<el-select v-model="searchData.cProjectRegion" clearable placeholder="全部" style="width: 110px">
<el-option
v-for="i in cProjectRegionList"
:key="`searchRegion_${i.cProjectRegion}`"
:label="i.cProjectRegion"
:value="i.cProjectRegion"
/>
</el-select>
</el-form-item>
<el-form-item label="Engineer">
<el-select v-model="searchData.engineer" filterable clearable placeholder="全部" style="width: 130px">
<el-option
v-for="item in searchEngineerOptions"
:key="`searchEngineer_${item.value}`"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item label="PM/Sales">
<el-select v-model="searchData.projectManager" filterable clearable placeholder="全部" style="width: 130px">
<el-option
v-for="item in searchProjectManagerOptions"
:key="`searchProjectManager_${item.value}`"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item label="PIC">
<el-select v-model="searchData.pic" filterable clearable placeholder="全部" style="width: 130px">
<el-option
v-for="item in searchPicOptions"
:key="`searchPic_${item.value}`"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item label="项目/物料同步">
<el-select v-model="searchData.projectPartSyncFlag" clearable placeholder="全部" style="width: 120px">
<el-option label="已同步" value="Y" />
<el-option label="未同步" value="N" />
</el-select>
</el-form-item>
<el-form-item label="打样单同步">
<el-select v-model="searchData.proofSyncFlag" clearable placeholder="全部" style="width: 120px">
<el-option label="已同步" value="Y" />
<el-option label="未同步" value="N" />
</el-select>
</el-form-item>
<el-form-item label="Importance">
<el-select v-model="searchData.importance" clearable placeholder="全部" style="width: 90px">
<el-option label="✓" value="Y" />
<el-option label="X" value="N" />
</el-select>
</el-form-item>
<el-form-item label="打样状态">
<el-select
class="search-proofing-status-select"
v-model="searchData.proofingStatusList"
multiple
clearable
placeholder="全部"
style="width: 180px"
>
<el-option label="草稿" value="草稿" />
<el-option label="进行中" value="进行中" />
<el-option label="打样完成" value="打样完成" />
</el-select>
<el-button type="primary" @click="getDataList('Y')">查询</el-button>
<el-button @click="resetSearch">重置</el-button>
<el-button type="success" :loading="exportLoading" @click="exportTrackingData">导出</el-button>
</el-form-item>
<el-form-item class="button-group-col">
<el-row :gutter="8" type="flex" class="button-row" >
<el-button type="primary" @click="openOneKeyDialog">一键创建</el-button>
<div class="search-section">
<div class="search-toolbar">
<div class="search-bu-field">
<span class="search-bu-label">BU</span>
<el-select
class="search-bu-select"
v-model="searchData.buNo"
filterable
placeholder="请选择"
@change="handleSearchBuChange">
<el-option
v-for="item in userBuList"
:key="`searchBu_${item.buNo}`"
:label="item.buDesc"
:value="normalizeBuNo(item.buNo, searchData.site)"
/>
</el-select>
</div>
<el-button
type="text"
class="search-collapse-label"
:aria-expanded="searchExpanded ? 'true' : 'false'"
@click="toggleSearchExpand">
<i class="el-icon-search"></i>
<span>筛选条件</span>
<i :class="searchExpanded ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
</el-button>
<div class="search-header-actions">
<el-button type="primary" @click="getDataList('Y')">查询</el-button>
<el-button @click="resetSearch">重置</el-button>
<el-button type="success" :loading="exportLoading" @click="exportTrackingData">导出</el-button>
<el-button type="primary" @click="openOneKeyDialog">一键创建</el-button>
<el-button type="warning" @click="openCreateProofDialog()">新增打样</el-button> <el-button type="warning" @click="openCreateProofDialog()">新增打样</el-button>
<el-button type="success" plain :loading="syncBatchNpiLoading" @click="syncBatchProjectPartToNpi()">同步项目物料到NPI</el-button> <el-button type="success" plain :loading="syncBatchNpiLoading" @click="syncBatchProjectPartToNpi()">同步项目物料到NPI</el-button>
<el-button type="success" plain :loading="syncBatchProofLoading" @click="syncBatchProofToNpi()">同步打样到NPI</el-button> <el-button type="success" plain :loading="syncBatchProofLoading" @click="syncBatchProofToNpi()">同步打样到NPI</el-button>
@ -188,16 +53,168 @@
</template> </template>
<i class="el-icon-question default-process-tip-icon"></i> <i class="el-icon-question default-process-tip-icon"></i>
</el-tooltip> </el-tooltip>
</el-row>
</el-form-item>
</el-form>
</div>
</div>
<el-form v-show="searchExpanded" :inline="true" :model="searchData" label-position="top" class="search-form">
<el-form-item label="项目编码">
<el-input v-model="searchData.projectNo" clearable placeholder="请输入项目编码" style="width: 120px" />
</el-form-item>
<el-form-item label="项目描述">
<el-input v-model="searchData.projectDesc" clearable placeholder="请输入项目描述" style="width: 160px" />
</el-form-item>
<el-form-item label="项目物料">
<el-input v-model="searchData.testPartNo" clearable placeholder="请输入项目物料" style="width: 120px" />
</el-form-item>
<el-form-item label="料号描述">
<el-input v-model="searchData.partDesc" clearable placeholder="请输入料号描述" style="width: 160px" />
</el-form-item>
<el-form-item v-if="isRfidBuNo(searchData.buNo)" label="分类">
<el-select v-model="searchData.dryWetType" clearable placeholder="全部" style="width: 100px">
<el-option v-for="item in dryWetTypeList" :key="`searchDryWet_${item}`" :label="item" :value="item" />
</el-select>
</el-form-item>
<el-form-item label="客户名称">
<el-select
v-model="searchData.customerNo"
filterable
clearable
remote
reserve-keyword
placeholder="请输入客户名称"
style="width: 120px"
:remote-method="handleSearchCustomerRemote"
:loading="searchCustomerOptionLoading"
@visible-change="handleSearchCustomerVisibleChange"
>
<el-option
v-for="item in searchCustomerOptions"
:key="`searchCustomer_${item.customerNo}`"
:label="getSearchCustomerOptionLabel(item)"
:value="item.customerNo"
/>
</el-select>
</el-form-item>
<el-form-item label="打样单号">
<el-input v-model="searchData.proofingNo" clearable placeholder="请输入打样单号" style="width: 120px" />
</el-form-item>
<el-form-item label="Sample making Year">
<el-select v-model="searchData.sampleMakingYear" clearable placeholder="全部" style="width: 110px">
<el-option
v-for="year in sampleMakingYearOptions"
:key="`searchSampleMakingYear_${year}`"
:label="year"
:value="year"
/>
</el-select>
</el-form-item>
<el-form-item label="Sample making Month">
<el-select v-model="searchData.sampleMakingMonth" clearable placeholder="全部" style="width: 90px">
<el-option
v-for="month in sampleMakingMonthOptions"
:key="`searchSampleMakingMonth_${month}`"
:label="month"
:value="month"
/>
</el-select>
</el-form-item>
<el-form-item label="PM inquery time">
<el-date-picker
v-model="searchData.pmInqueryTimeStart"
type="date"
value-format="yyyy-MM-dd"
placeholder="开始"
style="width: 120px"
/>
<span> - </span>
<el-date-picker
v-model="searchData.pmInqueryTimeEnd"
type="date"
value-format="yyyy-MM-dd"
placeholder="结束"
style="width: 120px"
/>
</el-form-item>
<el-form-item label="区域">
<el-select v-model="searchData.cProjectRegion" clearable placeholder="全部" style="width: 110px">
<el-option
v-for="i in cProjectRegionList"
:key="`searchRegion_${i.cProjectRegion}`"
:label="i.cProjectRegion"
:value="i.cProjectRegion"
/>
</el-select>
</el-form-item>
<el-form-item label="Engineer">
<el-select v-model="searchData.engineer" filterable clearable placeholder="全部" style="width: 130px">
<el-option
v-for="item in searchEngineerOptions"
:key="`searchEngineer_${item.value}`"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item label="PM/Sales">
<el-select v-model="searchData.projectManager" filterable clearable placeholder="全部" style="width: 130px">
<el-option
v-for="item in searchProjectManagerOptions"
:key="`searchProjectManager_${item.value}`"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item label="PIC">
<el-select v-model="searchData.pic" filterable clearable placeholder="全部" style="width: 130px">
<el-option
v-for="item in searchPicOptions"
:key="`searchPic_${item.value}`"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item label="项目/物料同步">
<el-select v-model="searchData.projectPartSyncFlag" clearable placeholder="全部" style="width: 120px">
<el-option label="已同步" value="Y" />
<el-option label="未同步" value="N" />
</el-select>
</el-form-item>
<el-form-item label="打样单同步">
<el-select v-model="searchData.proofSyncFlag" clearable placeholder="全部" style="width: 120px">
<el-option label="已同步" value="Y" />
<el-option label="未同步" value="N" />
</el-select>
</el-form-item>
<el-form-item label="Importance">
<el-select v-model="searchData.importance" clearable placeholder="全部" style="width: 90px">
<el-option label="✓" value="Y" />
<el-option label="X" value="N" />
</el-select>
</el-form-item>
<el-form-item label="打样状态">
<el-select
class="search-proofing-status-select"
v-model="searchData.proofingStatusList"
multiple
clearable
placeholder="全部"
style="width: 180px"
>
<el-option label="草稿" value="草稿" />
<el-option label="进行中" value="进行中" />
<el-option label="打样完成" value="打样完成" />
</el-select>
</el-form-item>
</el-form>
</div>
<el-table <el-table
ref="trackingTable" ref="trackingTable"
:data="dataList" :data="dataList"
border class="data-table"
border class="data-table proof-tracking-table"
stripe highlight-current-row stripe highlight-current-row
height="670"
:height="trackingTableHeight"
v-loading="dataListLoading" v-loading="dataListLoading"
@sort-change="handleTrackingTableSortChange" @sort-change="handleTrackingTableSortChange"
@filter-change="handleTrackingTableFilterChange" @filter-change="handleTrackingTableFilterChange"
@ -371,6 +388,7 @@
</el-table> </el-table>
<el-pagination <el-pagination
ref="trackingPagination"
@size-change="sizeChangeHandle" @size-change="sizeChangeHandle"
@current-change="currentChangeHandle" @current-change="currentChangeHandle"
:current-page="pageIndex" :current-page="pageIndex"
@ -1638,6 +1656,10 @@ export default {
}, },
data () { data () {
return { return {
// 默认折叠，使用即时显隐避免宽表在折叠动画中反复重排。
searchExpanded: false,
trackingTableHeight: 670,
trackingTableHeightUpdateToken: 0,
searchData: { searchData: {
site: this.$store.state.user.site, site: this.$store.state.user.site,
userName: this.$store.state.user.name, userName: this.$store.state.user.name,
@ -1852,7 +1874,13 @@ export default {
} }
} }
}, },
mounted () {
this.bindTrackingTableResize()
this.scheduleTrackingTableHeightUpdate()
},
activated () { activated () {
this.bindTrackingTableResize()
this.scheduleTrackingTableHeightUpdate()
this.loadUserBuList().then(() => { this.loadUserBuList().then(() => {
return Promise.all([ return Promise.all([
this.queryProcessColumns(), this.queryProcessColumns(),
@ -1865,8 +1893,23 @@ export default {
}) })
}, },
deactivated () { deactivated () {
this.unbindTrackingTableResize()
this.destroyDefaultProcessConfigSortable() this.destroyDefaultProcessConfigSortable()
}, },
beforeDestroy () {
this.unbindTrackingTableResize()
},
watch: {
searchExpanded () {
this.scheduleTrackingTableHeightUpdate()
},
'searchData.buNo' () {
// RFID 分类筛选的显隐会改变展开后的搜索区高度。
if (this.searchExpanded) {
this.scheduleTrackingTableHeightUpdate()
}
}
},
computed: { computed: {
visibleTrackingColumns () { visibleTrackingColumns () {
// 列表只渲染“当前生效列”：有用户动态列时用用户配置，否则用代码默认列。 // 列表只渲染“当前生效列”：有用户动态列时用用户配置，否则用代码默认列。
@ -3633,6 +3676,58 @@ export default {
} }
}) })
}, },
bindTrackingTableResize () {
if (this._onTrackingTableResize) {
return
}
this._onTrackingTableResize = () => {
this.scheduleTrackingTableHeightUpdate()
}
window.addEventListener('resize', this._onTrackingTableResize)
},
unbindTrackingTableResize () {
if (this._onTrackingTableResize) {
window.removeEventListener('resize', this._onTrackingTableResize)
this._onTrackingTableResize = null
}
this.trackingTableHeightUpdateToken += 1
},
toggleSearchExpand () {
this.searchExpanded = !this.searchExpanded
},
scheduleTrackingTableHeightUpdate () {
const token = ++this.trackingTableHeightUpdateToken
this.$nextTick(() => {
if (token !== this.trackingTableHeightUpdateToken) {
return
}
this.updateTrackingTableHeight()
})
},
updateTrackingTableHeight () {
const tableRef = this.$refs.trackingTable
const tableEl = tableRef && tableRef.$el ? tableRef.$el : null
if (!tableEl || typeof tableEl.getBoundingClientRect !== 'function') {
return
}
const tableRect = tableEl.getBoundingClientRect()
// keep-alive 页签隐藏时不使用零尺寸覆盖正常布局。
if (!tableRect.width) {
return
}
const tableTop = tableRect.top
const paginationRef = this.$refs.trackingPagination
const paginationEl = paginationRef && paginationRef.$el ? paginationRef.$el : null
const paginationHeight = paginationEl ? paginationEl.offsetHeight : 32
const paginationMargin = 12
// 卡片 padding 5px + 页签内容区 padding 5px，再留 6px，一次算准高度，避免二次收缩触发表格重排。
const bottomReserve = 16
const nextHeight = Math.max(240, Math.floor(window.innerHeight - tableTop - paginationHeight - paginationMargin - bottomReserve))
if (this.trackingTableHeight === nextHeight) {
return
}
this.trackingTableHeight = nextHeight
},
handleBuProcessCodesChange (row) { handleBuProcessCodesChange (row) {
if (!row) { if (!row) {
return return
@ -6368,6 +6463,10 @@ export default {
return '' return ''
} }
const packageDate = this.getTrackingPackageDate(row) const packageDate = this.getTrackingPackageDate(row)
// 尚未生成打样单且 Delivery&Package 有值时，才显示准备阶段。
if (this.isBlankValue(row.proofingNo) && packageDate) {
return 'trialPrepare'
}
const baseline = this.formatDate(row.baseline) const baseline = this.formatDate(row.baseline)
// 缺少 package 或 baseline 时无法判定延期，保持空状态由文案函数显示 '-'。 // 缺少 package 或 baseline 时无法判定延期，保持空状态由文案函数显示 '-'。
if (!packageDate || !baseline) { if (!packageDate || !baseline) {
@ -6393,10 +6492,13 @@ export default {
return this.isProofingFinishedForTrackingStatus(row) return this.isProofingFinishedForTrackingStatus(row)
}, },
getTrackingStatusText (row) { getTrackingStatusText (row) {
const statusType = this.getTrackingStatusType(row)
if (statusType === 'trialPrepare') {
return 'Trial prepare'
}
if (this.isProofingFinishedForTrackingStatus(row)) { if (this.isProofingFinishedForTrackingStatus(row)) {
return 'Complete' return 'Complete'
} }
const statusType = this.getTrackingStatusType(row)
if (!statusType) { if (!statusType) {
return '-' return '-'
} }
@ -6404,10 +6506,13 @@ export default {
return `${statusPrefix}-${this.getFirstPendingProcessLabel(row)}` return `${statusPrefix}-${this.getFirstPendingProcessLabel(row)}`
}, },
getTrackingStatusClass (row) { getTrackingStatusClass (row) {
const statusType = this.getTrackingStatusType(row)
if (statusType === 'trialPrepare') {
return 'tracking-status tracking-status--delay'
}
if (this.isProofingFinishedForTrackingStatus(row)) { if (this.isProofingFinishedForTrackingStatus(row)) {
return 'tracking-status tracking-status--complete' return 'tracking-status tracking-status--complete'
} }
const statusType = this.getTrackingStatusType(row)
if (statusType === 'onSchedule') { if (statusType === 'onSchedule') {
return 'tracking-status tracking-status--on-schedule' return 'tracking-status tracking-status--on-schedule'
} }
@ -6456,6 +6561,27 @@ export default {
</script> </script>
<style > <style >
/* 仅打样跟踪主表使用深灰色网格，不覆盖其他页面或弹窗中的表格。 */
.el-table.proof-tracking-table.el-table--border {
border-color: #808080;
}
.el-table.proof-tracking-table th,
.el-table.proof-tracking-table td {
border-right: 1px solid #808080;
border-bottom: 1px solid #808080;
}
.el-table.proof-tracking-table::before,
.el-table.proof-tracking-table.el-table--border::after,
.el-table.proof-tracking-table .el-table__fixed::before,
.el-table.proof-tracking-table .el-table__fixed-right::before {
background-color: #808080;
}
.el-table.proof-tracking-table .el-table__fixed-right-patch {
border-bottom: 1px solid #808080;
}
.el-table.el-table--medium.data-table th, .el-table.el-table--medium.data-table th,
.el-table.data-table th { .el-table.data-table th {
height: 26px; height: 26px;
@ -6477,6 +6603,73 @@ export default {
.search-form { .search-form {
margin-bottom: 0; margin-bottom: 0;
padding-top: 8px;
}
.mod-config .search-toolbar {
display: flex;
align-items: center;
min-width: 0;
flex-wrap: wrap;
padding: 0 8px 0 0;
border-bottom: 1px solid #ebeef5;
}
.mod-config .search-bu-field {
display: flex;
align-items: center;
flex: 0 0 auto;
height: 24px;
line-height: 24px;
margin-right: 16px;
}
.mod-config .search-bu-label {
display: inline-flex;
align-items: center;
height: 24px;
line-height: 24px;
margin-right: 8px;
padding: 0;
font-size: 12px;
font-weight: 400;
color: #606266;
}
.mod-config .search-bu-select {
width: 80px;
}
.mod-config .search-bu-select .el-input__inner {
height: 24px;
line-height: 24px;
}
.mod-config .search-collapse-label {
display: flex;
align-items: center;
flex: 0 0 auto;
margin-right: 8px;
cursor: pointer;
user-select: none;
font-size: 13px;
color: #303133;
font-weight: 500;
}
.mod-config .search-collapse-label span {
margin-left: 8px;
font-weight: 500;
}
.mod-config .search-header-actions {
display: flex;
align-items: center;
flex-wrap: wrap;
margin-left: 0;
margin-right: 8px;
min-width: 0;
row-gap: 6px;
} }
.search-proofing-status-select .el-select__tags { .search-proofing-status-select .el-select__tags {
@ -6490,16 +6683,6 @@ export default {
flex-wrap: nowrap; flex-wrap: nowrap;
} }
.button-group-col {
width: 100%;
margin-top: 16px;
}
.button-row {
width: 100%;
flex-wrap: wrap;
}
.bu-process-config-dialog .bu-process-order-list { .bu-process-config-dialog .bu-process-order-list {
display: grid; display: grid;
grid-template-columns: repeat(3, minmax(220px, 1fr)); grid-template-columns: repeat(3, minmax(220px, 1fr));

Write Preview
Loading…
Cancel
Save