🎈 perf: 处理一些细节问题
This commit is contained in:
@@ -12,15 +12,15 @@
|
||||
>
|
||||
<!-- 下拉选项:循环制造规范列表 -->
|
||||
<el-option
|
||||
v-for="item in mSpecList"
|
||||
:key="item.specId"
|
||||
:label="item.specName"
|
||||
:value="item.specId"
|
||||
v-for="item in pSpecList"
|
||||
:key="item.groupId"
|
||||
:label="item.groupName"
|
||||
:value="item.groupId"
|
||||
/>
|
||||
|
||||
<!-- 无数据提示 -->
|
||||
<el-option
|
||||
v-if="mSpecList.length === 0 && !loading"
|
||||
v-if="pSpecList.length === 0 && !loading"
|
||||
value=""
|
||||
disabled
|
||||
>
|
||||
@@ -30,7 +30,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listManufacturingSpec } from '@/api/work/manufacturingSpec'
|
||||
import { listProductSpecGroup } from '@/api/work/productSpecGroup'
|
||||
import { debounce } from '@/utils' // 防抖:避免频繁触发接口请求
|
||||
|
||||
export default {
|
||||
@@ -44,7 +44,7 @@ export default {
|
||||
// 可选:允许外部自定义搜索参数的字段名(增强组件复用性)
|
||||
searchKey: {
|
||||
type: String,
|
||||
default: 'specName' // 默认为“规范名称”搜索(对应接口的mSpecName参数)
|
||||
default: 'groupName' // 默认为“规范名称”搜索(对应接口的mSpecName参数)
|
||||
},
|
||||
// 可选:每页加载数量(外部可配置)
|
||||
pageSize: {
|
||||
@@ -54,7 +54,7 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
mSpecList: [], // 制造规范列表数据
|
||||
pSpecList: [], // 制造规范列表数据
|
||||
loading: false, // 远程请求加载状态
|
||||
queryParams: {
|
||||
// 搜索参数:默认用specName(可通过searchKey自定义)
|
||||
@@ -109,14 +109,14 @@ export default {
|
||||
// 5. 获取制造规范列表(远程接口请求)
|
||||
getList() {
|
||||
this.loading = true // 开始加载:显示加载动画
|
||||
listManufacturingSpec(this.queryParams)
|
||||
listProductSpecGroup(this.queryParams)
|
||||
.then(res => {
|
||||
// 接口成功:赋值列表数据(兼容res.rows或res.data.rows,避免接口返回格式差异)
|
||||
this.mSpecList = res.rows || res.data?.rows || []
|
||||
this.pSpecList = res.rows || res.data?.rows || []
|
||||
})
|
||||
.catch(() => {
|
||||
// 接口失败:清空列表,避免旧数据残留
|
||||
this.mSpecList = []
|
||||
this.pSpecList = []
|
||||
this.$message.error('获取制造规范列表失败,请重试') // 错误提示(优化用户体验)
|
||||
})
|
||||
.finally(() => {
|
||||
@@ -125,9 +125,9 @@ export default {
|
||||
},
|
||||
|
||||
// 6. 选择变化时触发(返回完整订单项,方便父组件使用)
|
||||
handleSelectChange(mSpecId) {
|
||||
handleSelectChange(pSpecId) {
|
||||
// 根据选中的ID,找到对应的完整制造规范对象
|
||||
const selectedItem = this.mSpecList.find(item => item.specId === mSpecId)
|
||||
const selectedItem = this.pSpecList.find(item => item.groupId === pSpecId)
|
||||
// 触发change事件:返回完整项(父组件可通过@change接收)
|
||||
this.$emit('change', selectedItem)
|
||||
// 可选:触发input事件后,额外触发change事件(符合常规组件使用习惯)
|
||||
|
||||
@@ -53,7 +53,9 @@ export default {
|
||||
return;
|
||||
}
|
||||
// 处理数据,兼容多种字段名,保证任务名唯一
|
||||
const taskData = this.tasks.map((item, idx) => {
|
||||
|
||||
const taskData = this.tasks
|
||||
.map((item, idx) => {
|
||||
const name = (item.taskName || item.planName || item.remark || item.productName || item.name || `任务${idx+1}`) + (item.productName ? `-${item.productName}` : '');
|
||||
const start = item.startDate || item.start_time || item.start || item.start_date;
|
||||
const end = item.endDate || item.end_time || item.end || item.end_date;
|
||||
@@ -72,7 +74,10 @@ export default {
|
||||
startDate: start,
|
||||
endDate: end
|
||||
};
|
||||
});
|
||||
})
|
||||
// 确保三个字段都存在:startDate,endDate,name
|
||||
.filter(item => item.startDate && item.endDate && item.name);
|
||||
|
||||
// 先全部用 getColor 分配基础色
|
||||
taskData.forEach((item, idx) => {
|
||||
item._color = getColor(item.lineId, item.orderId, idx);
|
||||
|
||||
@@ -44,11 +44,18 @@
|
||||
|
||||
<el-table v-loading="loading" :data="productSpecList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="主键" align="center" prop="specId" v-if="false"/>
|
||||
<el-table-column label="所属产品规范组ID" align="center" prop="groupId" />
|
||||
<el-table-column label="规范名称" align="center" prop="specKey" />
|
||||
<el-table-column label="规范名称" align="center" prop="specKey">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.specKey }}</span>
|
||||
<span v-if="scope.row.remark">
|
||||
<el-tooltip :content="scope.row.remark" placement="top">
|
||||
<i class="el-icon-info"></i>
|
||||
</el-tooltip>
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="规范值" align="center" prop="specValue" />
|
||||
<el-table-column label="备注" align="center" prop="remark" />
|
||||
<!-- <el-table-column label="备注" align="center" prop="remark" /> -->
|
||||
<el-table-column label="操作" v-if="!readonly" align="center" class-name="small-padding fixed-width">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
|
||||
@@ -135,8 +135,10 @@ export default {
|
||||
this.$refs.detailForm.validate(valid => {
|
||||
if (!valid) return;
|
||||
if (this.detailForm.dateRange && this.detailForm.dateRange.length === 2) {
|
||||
this.detailForm.startDate = this.detailForm.dateRange[0].replace(' ', "T") + '.000Z';
|
||||
this.detailForm.endDate = this.detailForm.dateRange[1].replace(' ', "T") + '.000Z';
|
||||
// const startDate = this.parseTime(this.detailForm.dateRange[0], '{y}-{m}-{d}T{h}:{i}:{s}') + '.000Z';
|
||||
// const endDate = this.parseTime(this.detailForm.dateRange[1], '{y}-{m}-{d}T{h}:{i}:{s}') + '.000Z';
|
||||
this.detailForm.startDate = this.detailForm.dateRange[0];
|
||||
this.detailForm.endDate = this.detailForm.dateRange[1];
|
||||
} else {
|
||||
this.detailForm.startDate = '';
|
||||
this.detailForm.endDate = '';
|
||||
|
||||
@@ -35,7 +35,7 @@
|
||||
<el-select placeholder="请选择产品规范" @change="handleChangeSpec" style="width: 100%;">
|
||||
<el-option v-for="item in productSpecList.filter(item => item.productId != this.form.productId)" :key="item.groupId" :label="item.groupName" :value="item.groupId" />
|
||||
<template #empty>
|
||||
<el-button type="primary" @click="handleAddSpec">新增产品规范</el-button>
|
||||
<el-button @click="handleAddSpec" style="width: 100%;">新增产品规范</el-button>
|
||||
</template>
|
||||
</el-select>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user