工艺任务新增问题修改

dev-scheduling
zhangdi 2 weeks ago
parent 454613a321
commit 059f15ac99
  1. 296
      src/components/jh-select/index.vue
  2. 3
      src/views/logisticsManagement/siteBasic.vue
  3. 54
      src/views/processManagement/components/addTestDialog.vue

@ -0,0 +1,296 @@
<template>
<el-select
ref="selectRef"
v-model="localValue"
:placeholder="placeholder"
:disabled="disabled"
filterable
clearable
:filter-method="handleSearch"
@visible-change="handleVisibleChange"
@clear="handleClear"
@change="handleChange"
class="paged-select"
:teleported="false"
:popper-options="{
modifiers: [{ name: 'eventListeners', options: { scroll: false, resize: false } }],
}"
>
<el-option
v-for="item in optionList"
:key="item[valueKey]"
:label="item[labelKey]"
:value="item[valueKey]"
/>
<el-option v-if="loading && hasMore" label="加载中..." disabled />
<el-option v-if="!hasMore && optionList.length" label="没有更多了~" disabled />
</el-select>
</template>
<script>
import axios from 'axios';
export default {
name: 'DynamicPagedSelect',
props: {
value: [String, Number],
apiUrl: { type: String, required: true },
apiMethod: { type: String, default: 'get' },
params: { type: Object, default: () => ({}) },
listKey: { type: String, required: true },
totalKey: { type: String, required: true },
labelKey: { type: String, required: true },
valueKey: { type: String, required: true },
searchKey: { type: String, default: 'keyword' },
pageSize: { type: Number, default: 10 },
placeholder: String,
disabled: Boolean,
debounceTime: { type: Number, default: 500 },
echoApi: { type: String, default: '' },
echoMethod: { type: String, default: 'get' },
},
data() {
return {
localValue: this.value,
optionList: [],
pageNum: 1,
loading: false,
hasMore: true,
searchText: '',
scrollEl: null,
dropdownVisible: false,
bindTimer: null,
total: 0,
};
},
watch: {
value(val) {
this.localValue = val;
this.initEcho();
},
localValue(val) {
this.$emit('input', val);
},
optionList() {
if (this.dropdownVisible && this.optionList.length > 0) {
this.$nextTick(() => {
this.bindScroll();
});
}
},
},
mounted() {
this.debounceSearch = this.debounce(this.fetchData, this.debounceTime);
this.initEcho();
},
beforeUnmount() {
this.cleanup();
},
methods: {
debounce(func, wait) {
let timeout = null;
return (...args) => {
clearTimeout(timeout);
timeout = setTimeout(() => func.apply(this, args), wait);
};
},
cleanup() {
if (this.scrollEl) {
this.scrollEl.removeEventListener('scroll', this.handleScroll);
this.scrollEl = null;
}
if (this.bindTimer) {
clearTimeout(this.bindTimer);
this.bindTimer = null;
}
},
findScrollContainer() {
const selectRef = this.$refs.selectRef;
if (!selectRef) return null;
const popper = selectRef.popperRef?.$el || selectRef.popperRef;
if (!popper) return null;
const wrap = popper.querySelector('.el-scrollbar__wrap');
if (wrap) return wrap;
const altWrap = popper.querySelector('.el-select-dropdown__wrap');
return altWrap || null;
},
bindScroll() {
this.cleanup();
const tryBind = (attempt = 1) => {
if (!this.dropdownVisible) return;
const scrollEl = this.findScrollContainer();
if (scrollEl) {
this.scrollEl = scrollEl;
scrollEl.addEventListener('scroll', this.handleScroll, { passive: true });
} else if (attempt < 5) {
this.bindTimer = setTimeout(() => tryBind(attempt + 1), 100 * attempt);
}
};
tryBind();
},
handleScroll(e) {
const { scrollTop, scrollHeight, clientHeight } = e.target;
const threshold = scrollHeight - clientHeight - 10;
if (this.loading || !this.hasMore) return;
if (scrollTop >= threshold) {
this.loadMore();
}
},
handleVisibleChange(visible) {
this.dropdownVisible = visible;
if (visible) {
this.reset();
this.fetchData().then(() => {
this.bindScroll();
});
} else {
this.cleanup();
}
},
handleSearch(val) {
this.searchText = val;
this.reset();
this.debounceSearch();
},
loadMore() {
if (this.loading || !this.hasMore) return;
this.pageNum++;
this.fetchData();
},
handleClear() {
this.localValue = '';
this.reset();
this.$emit('clear');
},
// item
handleChange(val) {
console.log('选中值:', val);
//
let selectedItem = this.optionList.find(item => item[this.valueKey] === val);
console.log('从列表找到:', selectedItem);
//
if (!selectedItem && this.echoApi) {
console.log('列表未找到,通过接口获取');
this.getEchoData(val).then(item => {
console.log('接口返回:', item);
this.$emit('change', val, item);
});
} else {
//
this.$nextTick(() => {
this.$emit('change', val, selectedItem);
});
}
},
//
async getEchoData(val) {
try {
const params = { [this.valueKey]: val };
let res;
if (this.echoMethod.toLowerCase() === 'post') {
res = await axios.post(this.echoApi, params);
} else {
res = await axios.get(this.echoApi, { params });
}
return res.data.data || {};
} catch (e) {
console.error('获取选中项详情失败', e);
return null;
}
},
async initEcho() {
const val = this.localValue;
if (!val || !this.echoApi) return;
const has = this.optionList.some(item => item[this.valueKey] === val);
if (has) return;
const info = await this.getEchoData(val);
if (info[this.labelKey] && info[this.valueKey]) {
const exist = this.optionList.some(i => i[this.valueKey] === info[this.valueKey]);
if (!exist) this.optionList.unshift(info);
}
},
async fetchData() {
this.loading = true;
try {
const sendData = {
pageNum: this.pageNum,
pageSize: this.pageSize,
[this.searchKey]: this.searchText,
...this.params,
};
let res;
if (this.apiMethod.toLowerCase() === 'post') {
res = await axios.post(this.apiUrl, sendData);
} else {
res = await axios.get(this.apiUrl, { params: sendData });
}
const data = res.data.data || {};
const list = data[this.listKey] || [];
const total = data[this.totalKey] || 0;
this.total = total;
if (this.pageNum === 1) {
this.optionList = list;
} else {
this.optionList = this.optionList.concat(list);
}
this.hasMore = this.optionList.length < total;
this.$nextTick(() => {
this.bindScroll();
});
} catch (e) {
console.error('请求失败', e);
} finally {
this.loading = false;
}
},
reset() {
this.pageNum = 1;
this.optionList = [];
this.hasMore = true;
this.total = 0;
this.cleanup();
},
},
};
</script>
<style>
.paged-select.el-select-dropdown.el-popper {
height: 200px !important;
overflow: hidden !important;
}
.paged-select.el-select-dropdown .el-scrollbar__wrap {
height: 200px !important;
overflow-y: auto !important;
overflow-x: hidden !important;
}
</style>

@ -316,7 +316,7 @@ export default {
searchChange(params, done) { searchChange(params, done) {
this.query = params; this.query = params;
this.page.currentPage = 1; this.page.currentPage = 1;
this.onLoad(this.page, params); this.onLoad(this.page, this.query);
done(); done();
}, },
selectionChange(list) { selectionChange(list) {
@ -348,6 +348,7 @@ export default {
onLoad(page, params = {}) { onLoad(page, params = {}) {
this.loading = true; this.loading = true;
this.data = [];
getStationList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then( getStationList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(
res => { res => {
this.data = res.data.data.records; this.data = res.data.data.records;

@ -10,7 +10,7 @@
<el-row :gutter="24"> <el-row :gutter="24">
<el-col :span="12"> <el-col :span="12">
<el-form-item label="零件号:" prop="partId"> <el-form-item label="零件号:" prop="partId">
<el-select <!-- <el-select
v-model="ruleForm.partId" v-model="ruleForm.partId"
placeholder="请输入" placeholder="请输入"
@change="partChange" @change="partChange"
@ -23,7 +23,21 @@
:label="item.partCode" :label="item.partCode"
:value="item.id" :value="item.id"
/> />
</el-select> </el-select> -->
<jhSelect
v-model="ruleForm.partId"
placeholder="请搜索选择"
api-url="/blade-desk/dsPart/listNew"
api-method="get"
list-key="records"
total-key="total"
label-key="partCode"
value-key="id"
search-key="partCode"
:debounce-time="500"
@clear="handleClear"
@change="partChange"
/>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
@ -71,6 +85,7 @@
<script> <script>
import { getPartList, getVersion, saveTask } from '@/api/processManagement/taskProcessing'; import { getPartList, getVersion, saveTask } from '@/api/processManagement/taskProcessing';
import { getRoleUserList } from '@/api/processManagement/taskDispatch'; import { getRoleUserList } from '@/api/processManagement/taskDispatch';
import jhSelect from '@/components/jh-select/index.vue';
export default { export default {
props: { props: {
showDialog: { showDialog: {
@ -78,6 +93,7 @@ export default {
default: false, default: false,
}, },
}, },
components: { jhSelect },
data() { data() {
return { return {
partList: [], partList: [],
@ -94,6 +110,7 @@ export default {
getPartOptions: [], // getPartOptions: [], //
versionOptions: [], // versionOptions: [], //
craftManOptions: [], // craftManOptions: [], //
selectedPart: {}, //
}; };
}, },
mounted() { mounted() {
@ -104,8 +121,7 @@ export default {
methods: { methods: {
getRoleUserList() { getRoleUserList() {
getRoleUserList({ current: 1, size: 99999 }).then(res => { getRoleUserList({ current: 1, size: 99999 }).then(res => {
this.craftManOptions = res.data.data this.craftManOptions = res.data.data;
;
}); });
}, },
getPartList() { getPartList() {
@ -113,7 +129,9 @@ export default {
this.getPartOptions = response.data.data; this.getPartOptions = response.data.data;
}); });
}, },
partChange() { partChange(value, item) {
this.selectedPart = item;
console.log(value, item, 999999);
getVersion({ partId: this.ruleForm.partId }).then(res => { getVersion({ partId: this.ruleForm.partId }).then(res => {
this.versionOptions = res.data.data; this.versionOptions = res.data.data;
}); });
@ -122,15 +140,17 @@ export default {
this.$refs.ruleFormRef.validate(valid => { this.$refs.ruleFormRef.validate(valid => {
if (valid) { if (valid) {
// code // code
let part = this.getPartOptions.find(item => item.id === this.ruleForm.partId); // let part = this.getPartOptions.find(item => item.id === this.ruleForm.partId);
console.log(8888, part); // console.log(8888, part);
// this.ruleForm.partCode = part.partCode; // this.ruleForm.partCode = part.partCode;
saveTask({ ...this.ruleForm, partCode: part.partCode, partName: part.partName }).then( saveTask({
res => { ...this.ruleForm,
partCode: this.selectedPart.partCode,
partName: this.selectedPart.partName,
}).then(res => {
this.$message.success('新增成功'); this.$message.success('新增成功');
this.closeDialog(); this.closeDialog();
} });
);
} }
}); });
}, },
@ -141,4 +161,14 @@ export default {
}, },
}; };
</script> </script>
<style lang="scss" scoped></style> <style lang="scss" scoped>
:deep(.el-select-dropdown) {
height: 200px !important;
overflow: hidden !important;
}
:deep(.el-select-dropdown .el-scrollbar__wrap) {
height: 300px !important;
overflow-y: auto !important;
overflow-x: hidden !important;
}
</style>

Loading…
Cancel
Save