Browse Source

框体界面

dev
常熟吴彦祖 20 hours ago
parent
commit
1d528c0b76
  1. 116
      src/views/modules/factory/partAttribute.vue
  2. 25
      src/views/modules/haianWarehouse/warehouse/interfaceCallLog54.vue
  3. 28
      src/views/modules/warehouse/interfaceCallLog.vue
  4. 28
      src/views/modules/warehouse/sysErrorLog.vue

116
src/views/modules/factory/partAttribute.vue

@ -2,6 +2,15 @@
<div class="mod-config">
<!-- 查询条件 -->
<el-form :inline="true" label-position="top" class="query-form">
<!-- 子工厂仅展示当前工厂配置的全部子site,空值查询全部;加载时禁用避免选择旧选项 - rqrq -->
<el-form-item label="子工厂">
<el-select v-model="queryForm.subSite" :placeholder="$t('factory.common.all')"
filterable clearable :loading="subSiteLoading" :disabled="subSiteLoading || dataListLoading"
style="width: 160px;">
<el-option :label="$t('factory.common.all')" value=""></el-option>
<el-option v-for="subSite in subSiteOptions" :key="subSite" :label="subSite" :value="subSite"></el-option>
</el-select>
</el-form-item>
<el-form-item :label="$t('factory.partAttribute.partNo')">
<el-input
v-model="queryForm.partNo"
@ -32,7 +41,7 @@
</el-select>
</el-form-item>
<el-form-item style="margin-top: 20px;">
<el-button @click="getDataList()" :loading="dataListLoading" :disabled="dataListLoading" type="primary" icon="el-icon-search">{{ $t('factory.common.search') }}</el-button>
<el-button @click="searchDataList()" :loading="dataListLoading" :disabled="dataListLoading" type="primary" icon="el-icon-search">{{ $t('factory.common.search') }}</el-button>
<el-button @click="resetQuery()" :disabled="dataListLoading" type="default" icon="el-icon-refresh">{{ $t('factory.common.reset') }}</el-button>
<el-button
@ -146,12 +155,15 @@
<script>
import { getPartAttributeList, deletePartAttribute, batchDeletePartAttribute } from '@/api/factory/partAttribute'
import { getSubSiteList } from '@/api/base/site'
import AddOrUpdate from './partAttribute-add-or-update'
export default {
data () {
return {
queryForm: {
// 空值查询当前工厂全部子site,选中后由后端校验归属并精确过滤 - rqrq
subSite: '',
partNo: '',
isInWh: '',
isRobotPick: '',
@ -162,6 +174,13 @@ export default {
pageSize: 20,
totalPage: 0,
dataListLoading: false,
// 记录查询工厂及请求序号,切换工厂时清空子工厂并丢弃旧响应,防止跨工厂结果残留 - rqrq
querySite: '',
listSequence: 0,
subSiteSequence: 0,
subSiteOptions: [],
subSiteLoading: false,
subSiteReady: false,
dataListSelections: [],
addOrUpdateVisible: false,
tableHeight: 500
@ -170,12 +189,26 @@ export default {
components: {
AddOrUpdate
},
computed: {
// 当前工厂作为显式请求参数来源,切换时重新加载所属子工厂与列表 - rqrq
currentSite () {
return String(this.$store.state.user.site || '').trim()
}
},
watch: {
// 工厂变化立即失效旧筛选与请求,避免缓存页面继续展示旧工厂物料 - rqrq
currentSite () {
this.initializeQuery()
}
},
activated () {
this.getDataList()
// 缓存页面恢复时按当前工厂初始化,加载中由查询方法阻止重复请求 - rqrq
this.initializeQuery()
this.calculateTableHeight()
},
mounted () {
this.getDataList()
// 首次进入先设置当前工厂,再加载下拉与物料列表 - rqrq
this.initializeQuery()
this.calculateTableHeight()
window.addEventListener('resize', this.calculateTableHeight)
},
@ -183,6 +216,72 @@ export default {
window.removeEventListener('resize', this.calculateTableHeight)
},
methods: {
// 当前工厂改变时清除旧选项与列表;同工厂复用已加载下拉,失败可通过再次查询重试 - rqrq
initializeQuery () {
if (this.querySite !== this.currentSite) {
this.querySite = this.currentSite
this.queryForm.subSite = ''
this.pageIndex = 1
this.subSiteOptions = []
this.subSiteReady = false
this.subSiteSequence++
this.listSequence++
this.subSiteLoading = false
this.dataListLoading = false
this.dataList = []
this.totalPage = 0
this.dataListSelections = []
}
if (this.querySite && !this.subSiteReady && !this.subSiteLoading) this.loadSubSites()
this.getDataList()
},
// 按显式当前工厂逐页加载完整子site并去重;业务失败提示、网络失败报错,旧响应不写回当前选项 - rqrq
async loadSubSites () {
if (this.subSiteLoading || !this.querySite) return
const site = this.querySite
const sequence = ++this.subSiteSequence
this.subSiteLoading = true
try {
let page = 1
let loadedCount = 0
let totalCount = 0
const options = []
do {
const { data } = await getSubSiteList({ siteId: site, page, size: 200 })
if (sequence !== this.subSiteSequence || site !== this.currentSite) return
if (!data || data.code !== 0 || !data.page) {
this.$alert((data && data.msg) || '查询子工厂失败,请重新查询', this.$t('factory.common.tip'))
return
}
const rows = data.page.list || []
totalCount = Number(data.page.totalCount) || 0
if (!rows.length && loadedCount < totalCount) {
this.$alert('子工厂列表已变化,请重新查询', this.$t('factory.common.tip'))
return
}
rows.forEach(row => {
const subSite = String(row.subSiteId || '').trim()
if (String(row.siteId || '').trim() === site && subSite && !options.includes(subSite)) options.push(subSite)
})
loadedCount += rows.length
page++
} while (loadedCount < totalCount)
this.subSiteOptions = options
this.subSiteReady = true
} catch (error) {
if (sequence === this.subSiteSequence && site === this.currentSite) this.$message.error('查询子工厂失败,请重新查询')
} finally {
if (sequence === this.subSiteSequence) this.subSiteLoading = false
}
},
// 条件查询从第一页开始,防止选择子工厂后沿用旧页码而误认为没有物料 - rqrq
searchDataList () {
if (this.dataListLoading) return
this.pageIndex = 1
this.initializeQuery()
},
// 计算表格高度
calculateTableHeight () {
this.$nextTick(() => {
@ -203,6 +302,8 @@ export default {
return
}
this.dataListLoading = true
// 请求序号与显式工厂共同隔离切厂前响应,旧请求不能覆盖新工厂列表或复位其加载状态 - rqrq
const sequence = ++this.listSequence
const params = {
page: this.pageIndex,
size: this.pageSize,
@ -211,6 +312,7 @@ export default {
}
getPartAttributeList(params).then(({ data }) => {
if (sequence !== this.listSequence || site !== this.currentSite) return
if (data && data.code === 0) {
this.dataList = data.page.list || []
this.totalPage = data.page.totalCount || 0
@ -220,24 +322,26 @@ export default {
this.$alert((data && data.msg) || this.$t('factory.common.queryFailed'), this.$t('factory.common.tip'))
}
}).catch(() => {
if (sequence !== this.listSequence || site !== this.currentSite) return
this.dataList = []
this.totalPage = 0
this.$message.error(this.$t('factory.common.queryFailed'))
}).finally(() => {
this.dataListLoading = false
if (sequence === this.listSequence) this.dataListLoading = false
})
},
// 重置查询条件
// 重置子工厂及其他筛选并回到第一页,恢复当前工厂全部资料查询 - rqrq
resetQuery () {
this.queryForm = {
subSite: '',
partNo: '',
isInWh: '',
isRobotPick: '',
isCommonlyUsed: ''
}
this.pageIndex = 1
this.getDataList()
this.initializeQuery()
},
// 每页数

25
src/views/modules/haianWarehouse/warehouse/interfaceCallLog54.vue

@ -433,18 +433,33 @@ export default {
margin-bottom: 20px;
}
/* 详情卡片按列分配固定高度,标题与内容共同受卡片边界约束,避免底部被裁剪 - rqrq */
.fixed-height-card {
display: flex;
flex-direction: column;
height: 380px;
}
.detail-form {
height: 320px;
overflow-y: auto;
/* 保留标题完整高度,长内容只在卡片正文中滚动 - rqrq */
.fixed-height-card /deep/ .el-card__header {
flex-shrink: 0;
}
/* 正文占用标题下方剩余空间,允许收缩以容纳内边距,防止滚动区超出外框 - rqrq */
.fixed-height-card /deep/ .el-card__body {
display: flex;
flex: 1;
min-height: 0;
min-width: 0;
}
/* 表单和接口数据在正文可用高度内滚动,保证长请求与响应内容的末行可见 - rqrq */
.detail-form,
.detail-content-area {
height: 320px;
overflow-y: auto;
flex: 1;
min-height: 0;
min-width: 0;
overflow: auto;
}
.json-pre {

28
src/views/modules/warehouse/interfaceCallLog.vue

@ -551,21 +551,33 @@ export default {
margin-bottom: 20px;
}
/* 固定高度卡片 - rqrq */
/* 详情卡片按列分配固定高度,标题与内容共同受卡片边界约束,避免底部被裁剪 - rqrq */
.fixed-height-card {
display: flex;
flex-direction: column;
height: 380px;
}
/* 详情表单样式 - rqrq */
.detail-form {
height: 320px;
overflow-y: auto;
/* 保留标题完整高度,长内容只在卡片正文中滚动 - rqrq */
.fixed-height-card /deep/ .el-card__header {
flex-shrink: 0;
}
/* 详情内容区域 - rqrq */
/* 正文占用标题下方剩余空间,允许收缩以容纳内边距,防止滚动区超出外框 - rqrq */
.fixed-height-card /deep/ .el-card__body {
display: flex;
flex: 1;
min-height: 0;
min-width: 0;
}
/* 表单和接口数据在正文可用高度内滚动,保证长请求与响应内容的末行可见 - rqrq */
.detail-form,
.detail-content-area {
height: 320px;
overflow-y: auto;
flex: 1;
min-height: 0;
min-width: 0;
overflow: auto;
}
/* JSON展示样式 - rqrq */

28
src/views/modules/warehouse/sysErrorLog.vue

@ -638,21 +638,33 @@ export default {
margin-bottom: 20px;
}
/* 固定高度卡片 - rqrq */
/* 详情卡片按列分配固定高度,标题与内容共同受卡片边界约束,避免底部被裁剪 - rqrq */
.fixed-height-card {
display: flex;
flex-direction: column;
height: 300px;
}
/* 详情表单样式 - rqrq */
.detail-form {
height: 320px;
overflow-y: auto;
/* 保留标题完整高度,长内容只在卡片正文中滚动 - rqrq */
.fixed-height-card /deep/ .el-card__header {
flex-shrink: 0;
}
/* 详情内容区域 - rqrq */
/* 正文占用标题下方剩余空间,允许收缩以容纳内边距,防止滚动区超出外框 - rqrq */
.fixed-height-card /deep/ .el-card__body {
display: flex;
flex: 1;
min-height: 0;
min-width: 0;
}
/* 表单和日志内容在正文可用高度内滚动,保证长入参与错误详情的末行可见 - rqrq */
.detail-form,
.detail-content-area {
height: 320px;
overflow-y: auto;
flex: 1;
min-height: 0;
min-width: 0;
overflow: auto;
}
/* JSON展示样式 - rqrq */

Loading…
Cancel
Save