| | |
| | | <template> |
| | | <div class="app-container"> |
| | | <div class="operate-button"> |
| | | <div style="margin-bottom: 15px;"> |
| | | <PageHeader content="工艺路线项目"> |
| | | <template #right-button> |
| | | <el-button |
| | | type="primary" |
| | | @click="isShowProductSelectDialog = true" |
| | | @click="isShowProcessSelectDialog = true" |
| | | > |
| | | 选择产品 |
| | | 选择工序 |
| | | </el-button> |
| | | <el-button type="primary" @click="handleSubmit">确认</el-button> |
| | | </div> |
| | | |
| | | <el-switch |
| | | v-model="isTable" |
| | | inline-prompt |
| | | active-text="表格" |
| | | inactive-text="列表" |
| | | @change="handleViewChange" |
| | | /> |
| | | </div> |
| | | <el-switch |
| | | v-model="isTable" |
| | | inline-prompt |
| | | active-text="表格" |
| | | inactive-text="列表" |
| | | @change="handleViewChange" |
| | | style="margin-left: 10px;" |
| | | /> |
| | | </template> |
| | | </PageHeader> |
| | | <el-table |
| | | v-if="isTable" |
| | | ref="multipleTable" |
| | |
| | | |
| | | <template #default="scope" v-else> |
| | | <template v-if="item.prop === 'processId'"> |
| | | <el-select |
| | | v-model="scope.row[item.prop]" |
| | | style="width: 100%;" |
| | | @mousedown.stop |
| | | > |
| | | <el-option |
| | | v-for="process in processOptions" |
| | | :key="process.id" |
| | | :label="process.name" |
| | | :value="process.id" |
| | | /> |
| | | </el-select> |
| | | {{ getProcessName(scope.row.processId) || '-' }} |
| | | </template> |
| | | <template v-else> |
| | | {{ scope.row[item.prop] || '-' }} |
| | |
| | | v-model="item.processId" |
| | | style="width: 100%;" |
| | | @mousedown.stop |
| | | :disabled="true" |
| | | > |
| | | <el-option |
| | | v-for="process in processOptions" |
| | |
| | | :value="process.id" |
| | | /> |
| | | </el-select> |
| | | <el-button |
| | | type="primary" |
| | | size="small" |
| | | style="margin-top: 8px; width: 100%;" |
| | | @click.stop="handleSelectProductForRow(item)" |
| | | > |
| | | 选择产品 |
| | | </el-button> |
| | | </div> |
| | | <template #footer> |
| | | <div class="step-card-footer"> |
| | |
| | | </div> |
| | | </div> |
| | | |
| | | <!-- 工序选择对话框 --> |
| | | <el-dialog |
| | | v-model="isShowProcessSelectDialog" |
| | | title="选择工序" |
| | | width="400px" |
| | | > |
| | | <el-select |
| | | v-model="selectedProcessId" |
| | | placeholder="请选择工序(可多选)" |
| | | style="width: 100%" |
| | | multiple |
| | | collapse-tags |
| | | collapse-tags-tooltip |
| | | > |
| | | <el-option |
| | | v-for="process in processOptions" |
| | | :key="process.id" |
| | | :label="process.name" |
| | | :value="process.id" |
| | | /> |
| | | </el-select> |
| | | <template #footer> |
| | | <el-button @click="isShowProcessSelectDialog = false">取消</el-button> |
| | | <el-button type="primary" @click="handleSelectProcess">确定</el-button> |
| | | </template> |
| | | </el-dialog> |
| | | |
| | | <!-- 产品选择对话框 --> |
| | | <ProductSelectDialog |
| | | v-model="isShowProductSelectDialog" |
| | | @confirm="handelSelectProducts" |
| | | @confirm="handleSelectProductForCurrentRow" |
| | | single |
| | | /> |
| | | </div> |
| | | </template> |
| | |
| | | const processOptions = ref([]); |
| | | const tableLoading = ref(false); |
| | | const isShowProductSelectDialog = ref(false); |
| | | const isShowProcessSelectDialog = ref(false); |
| | | const selectedProcessId = ref([]); |
| | | const currentSelectRow = ref(null); |
| | | const routeItems = ref([]); |
| | | let tableSortable = null; |
| | | let stepsSortable = null; |
| | |
| | | |
| | | |
| | | const tableColumn = ref([ |
| | | { label: "工序名称", prop: "processId", width: 200 }, |
| | | { label: "产品名称", prop: "productName"}, |
| | | { label: "规格名称", prop: "model" }, |
| | | { label: "单位", prop: "unit" }, |
| | | { label: "工序名称", prop: "processId", width: 200 }, |
| | | { |
| | | dataType: "action", |
| | | label: "操作", |
| | | align: "center", |
| | | fixed: "right", |
| | | width: 100, |
| | | width: 180, |
| | | operation: [ |
| | | { |
| | | name: "选择产品", |
| | | type: "primary", |
| | | link: true, |
| | | clickFun: (row) => { |
| | | currentSelectRow.value = row; |
| | | isShowProductSelectDialog.value = true; |
| | | } |
| | | }, |
| | | { |
| | | name: "删除", |
| | | type: "danger", |
| | |
| | | } |
| | | ]); |
| | | |
| | | // 根据工序ID获取工序名称 |
| | | const getProcessName = (processId) => { |
| | | if (!processId) return ''; |
| | | const process = processOptions.value.find(p => p.id === processId); |
| | | return process ? process.name : ''; |
| | | }; |
| | | |
| | | const removeItem = (index) => { |
| | | routeItems.value.splice(index, 1); |
| | | nextTick(() => initSortable()); |
| | |
| | | } |
| | | }; |
| | | |
| | | const handelSelectProducts = (products) => { |
| | | destroySortable(); |
| | | |
| | | const newData = products.map(({ id, ...product }) => ({ |
| | | ...product, |
| | | productModelId: id, |
| | | // 选择工序 - 新增多条记录 |
| | | const handleSelectProcess = () => { |
| | | if (!selectedProcessId.value || selectedProcessId.value.length === 0) { |
| | | proxy?.$modal?.msgWarning("请选择工序"); |
| | | return; |
| | | } |
| | | |
| | | // 为每个选中的工序创建一条记录 |
| | | const newItems = selectedProcessId.value.map(processId => ({ |
| | | processId: processId, |
| | | productName: "", |
| | | model: "", |
| | | unit: "", |
| | | productModelId: undefined, |
| | | routeId: routeId.value, |
| | | id: `${Date.now()}-${Math.random().toString(36).slice(2)}`, |
| | | processId: undefined |
| | | id: `${Date.now()}-${Math.random().toString(36).slice(2)}-${processId}`, |
| | | })); |
| | | |
| | | console.log('选择产品前数组:', routeItems.value); |
| | | routeItems.value.push(...newData); |
| | | routeItems.value = [...routeItems.value]; |
| | | console.log('选择产品后数组:', routeItems.value); |
| | | |
| | | |
| | | routeItems.value.push(...newItems); |
| | | |
| | | // 延迟初始化,确保DOM完全渲染 |
| | | nextTick(() => { |
| | | // 强制重新渲染组件 |
| | | if (proxy?.$forceUpdate) { |
| | | proxy.$forceUpdate(); |
| | | } |
| | | |
| | | const temp = [...routeItems.value]; |
| | | routeItems.value = []; |
| | | nextTick(() => { |
| | | routeItems.value = temp; |
| | | initSortable(); |
| | | }); |
| | | initSortable(); |
| | | }); |
| | | |
| | | isShowProcessSelectDialog.value = false; |
| | | selectedProcessId.value = []; |
| | | }; |
| | | |
| | | // 为指定行选择产品 |
| | | const handleSelectProductForRow = (row) => { |
| | | currentSelectRow.value = row; |
| | | isShowProductSelectDialog.value = true; |
| | | }; |
| | | |
| | | // 处理当前行的产品选择 |
| | | const handleSelectProductForCurrentRow = (products) => { |
| | | if (products && products.length > 0 && currentSelectRow.value) { |
| | | const product = products[0]; |
| | | // 更新当前行的产品信息 |
| | | currentSelectRow.value.productName = product.productName; |
| | | currentSelectRow.value.model = product.model; |
| | | currentSelectRow.value.unit = product.unit || ""; |
| | | currentSelectRow.value.productModelId = product.id; |
| | | isShowProductSelectDialog.value = false; |
| | | currentSelectRow.value = null; |
| | | } |
| | | }; |
| | | |
| | | const findProcessRouteItems = () => { |
| | |
| | | padding: 0 !important; |
| | | } |
| | | |
| | | .operate-button { |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: space-between; |
| | | } |
| | | |
| | | /* 修改:自定义步骤条容器样式 */ |
| | | .custom-steps { |