<template>
|
<el-dialog
|
v-model="visible"
|
title="选择工艺路线配置"
|
width="1000px"
|
:close-on-click-modal="false"
|
@close="handleClose"
|
>
|
<el-row :gutter="20">
|
<el-col :span="10">
|
<div style="font-weight: 600; margin-bottom: 8px;">配置</div>
|
<el-select
|
v-model="selectedConfigId"
|
filterable
|
clearable
|
placeholder="请选择工艺路线配置"
|
style="width: 100%;"
|
@change="handleConfigChange"
|
>
|
<el-option
|
v-for="cfg in configList"
|
:key="cfg.configId"
|
:label="cfg.configName"
|
:value="cfg.configId"
|
/>
|
</el-select>
|
|
<el-divider style="margin: 16px 0;" />
|
|
<div style="font-weight: 600; margin-bottom: 8px;">步骤预览</div>
|
<div style="font-size: 12px; color: #909399; margin-bottom: 6px;">
|
根据所选配置展示流程图
|
</div>
|
</el-col>
|
|
<el-col :span="14">
|
<div class="process-diagram">
|
<div v-if="steps.length === 0" class="process-diagram-empty">暂无步骤</div>
|
<div
|
v-for="(step, idx) in steps"
|
:key="String(step.processId) + '_' + idx"
|
class="process-diagram-segment"
|
>
|
<div class="process-diagram-node">
|
<div class="process-diagram-index">{{ idx + 1 }}</div>
|
<div class="process-diagram-name">{{ step.processName }}</div>
|
</div>
|
<div v-if="idx < steps.length - 1" class="process-diagram-arrow">→</div>
|
</div>
|
</div>
|
<div v-if="selectedConfigId === null" style="margin-top: 10px; font-size: 12px; color: #909399;">
|
请先选择一条已维护好的工艺路线
|
</div>
|
</el-col>
|
</el-row>
|
|
<template #footer>
|
<div class="dialog-footer">
|
<el-button @click="handleClose">取消</el-button>
|
<el-button type="primary" :loading="saving" @click="confirmSelect">
|
确定
|
</el-button>
|
</div>
|
</template>
|
</el-dialog>
|
</template>
|
|
<script setup>
|
import { computed, getCurrentInstance, ref, watch } from "vue";
|
import { salesProcessFlowConfigList, salesProcessFlowConfigGetById } from "@/api/salesManagement/salesProcessFlowConfig.js";
|
|
const emit = defineEmits(["update:visible", "confirm"]);
|
|
const props = defineProps({
|
visible: { type: Boolean, default: false },
|
defaultConfigId: { type: [Number, String, null], default: null },
|
});
|
|
const { proxy } = getCurrentInstance();
|
|
const visible = computed({
|
get() {
|
return props.visible;
|
},
|
set(v) {
|
emit("update:visible", v);
|
},
|
});
|
|
const configList = ref([]);
|
const selectedConfigId = ref(null);
|
const steps = ref([]);
|
const saving = ref(false);
|
|
const normalizeStepsFromApi = (list) => {
|
if (!Array.isArray(list)) return [];
|
return list.map((s, idx) => ({
|
stepId: s.stepId ?? s.id ?? null,
|
processId: s.processId ?? s.process_id ?? s.id ?? null,
|
processName: s.processName ?? s.process_name ?? s.name ?? "",
|
sortNo: s.sortNo ?? idx + 1,
|
}));
|
};
|
|
const fetchConfigList = async () => {
|
const res = await salesProcessFlowConfigList();
|
const list = res?.data ?? res?.records ?? res ?? [];
|
configList.value = Array.isArray(list) ? list : [];
|
};
|
|
const fetchConfigDetail = async (id) => {
|
if (!id) {
|
steps.value = [];
|
return;
|
}
|
const res = await salesProcessFlowConfigGetById(id);
|
const detail = res?.data ?? res ?? {};
|
steps.value = normalizeStepsFromApi(detail?.steps ?? []);
|
};
|
|
const initDefault = async () => {
|
await fetchConfigList();
|
selectedConfigId.value = props.defaultConfigId ?? null;
|
await fetchConfigDetail(selectedConfigId.value);
|
};
|
|
watch(
|
() => props.visible,
|
async (v) => {
|
if (v) {
|
try {
|
await initDefault();
|
} catch {
|
proxy?.$modal?.msgError?.("获取工艺路线配置失败");
|
}
|
}
|
}
|
);
|
|
const handleConfigChange = async () => {
|
await fetchConfigDetail(selectedConfigId.value);
|
};
|
|
const handleClose = () => {
|
emit("update:visible", false);
|
saving.value = false;
|
};
|
|
const confirmSelect = async () => {
|
if (saving.value) return;
|
if (selectedConfigId.value === null || selectedConfigId.value === undefined || selectedConfigId.value === "") {
|
proxy?.$modal?.msgWarning?.("请选择工艺路线配置");
|
return;
|
}
|
saving.value = true;
|
try {
|
emit("confirm", selectedConfigId.value);
|
handleClose();
|
} catch (e) {
|
proxy?.$modal?.msgError?.("确认失败，请稍后重试");
|
} finally {
|
saving.value = false;
|
}
|
};
|
</script>
|
|
<style scoped>
|
.process-diagram {
|
display: flex;
|
align-items: center;
|
gap: 0;
|
flex-wrap: nowrap;
|
overflow-x: auto;
|
padding: 10px 0;
|
}
|
|
.process-diagram-segment {
|
display: flex;
|
align-items: center;
|
}
|
|
.process-diagram-node {
|
width: 160px;
|
min-width: 160px;
|
height: 78px;
|
border: 1px solid #ebeef5;
|
border-radius: 10px;
|
background: #fff;
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
padding: 10px 12px;
|
margin-right: 10px;
|
box-sizing: border-box;
|
}
|
|
.process-diagram-index {
|
font-size: 12px;
|
color: #909399;
|
margin-bottom: 4px;
|
}
|
|
.process-diagram-name {
|
font-size: 14px;
|
font-weight: 600;
|
color: #303133;
|
white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
}
|
|
.process-diagram-arrow {
|
font-size: 18px;
|
color: #909399;
|
margin-right: 14px;
|
margin-left: -6px;
|
}
|
|
.process-diagram-empty {
|
width: 100%;
|
text-align: center;
|
padding: 40px 0;
|
color: #909399;
|
border: 1px dashed #ebeef5;
|
border-radius: 8px;
|
}
|
|
.dialog-footer {
|
display: flex;
|
justify-content: flex-end;
|
gap: 10px;
|
}
|
</style>
|
