548 lines
21 KiB
Vue
548 lines
21 KiB
Vue
<script setup lang="ts">
|
||
import { ref, computed, h, onMounted } from 'vue';
|
||
import { useAppStore } from '@/store/modules/app';
|
||
import { Icon } from '@iconify/vue'
|
||
import { useThemeStore } from '@/store/modules/theme';
|
||
import { useRouter } from 'vue-router';
|
||
import { NButton, NPopconfirm, NTag } from 'naive-ui';
|
||
|
||
const router = useRouter();
|
||
const appStore = useAppStore();
|
||
const themeStore = useThemeStore();
|
||
const gap = computed(() => (appStore.isMobile ? 0 : 16));
|
||
|
||
const loading = ref<boolean>(false);
|
||
const btnLoading = ref<boolean>(false);
|
||
const currentType = ref<string>('add');
|
||
const readonly = computed(() => currentType.value === "view");
|
||
const formRef = ref<any>(null);
|
||
const currentTemplate = ref<{ id: number, category: string | null, level: string | null, timeLimit: string | null, steps: any[] }>({
|
||
id: 0,
|
||
category: null,
|
||
level: null,
|
||
timeLimit: null,
|
||
steps: [],
|
||
});
|
||
const rules = ref({
|
||
category: { required: true, message: '变更类别不能为空', trigger: ['blur'] },
|
||
level: { required: true, message: '变更等级不能为空', trigger: ['blur'] },
|
||
timeLimit: { required: true, message: '变更时效不能为空', trigger: ['blur'] },
|
||
step: { required: true, message: '审批步骤不能为空', trigger: ['blur'] }
|
||
})
|
||
const templateModal = ref<boolean>(false);
|
||
|
||
const categoryOptions = ref([
|
||
{
|
||
label: '工艺',
|
||
value: '工艺'
|
||
},
|
||
{
|
||
label: '设备',
|
||
value: '设备'
|
||
},
|
||
{
|
||
label: '管理',
|
||
value: '管理'
|
||
}
|
||
])
|
||
|
||
const levelOptions = ref([
|
||
{
|
||
label: '一般',
|
||
value: '一般'
|
||
},
|
||
{
|
||
label: '重要',
|
||
value: '重要'
|
||
},
|
||
])
|
||
|
||
const timeLimitOptions = ref([
|
||
{
|
||
label: '永久',
|
||
value: '永久'
|
||
},
|
||
{
|
||
label: '临时',
|
||
value: '临时'
|
||
},
|
||
])
|
||
const SPECIALTIES = ref<{ label: string, value: string }[]>([
|
||
{ label: '工艺', value: 'process' },
|
||
{ label: '设备', value: 'equipment' },
|
||
{ label: '仪表', value: 'instrument' },
|
||
{ label: '电气', value: 'electrical' },
|
||
{ label: '安全', value: 'safety' },
|
||
{ label: '质量', value: 'quality' }
|
||
]);
|
||
|
||
const pagination = ref<{ page: number, pageSize: number, pageCount: number }>({
|
||
page: 1,
|
||
pageSize: 20,
|
||
pageCount: 0,
|
||
})
|
||
const columns = ref([
|
||
{
|
||
title: '序号',
|
||
key: 'index',
|
||
width: 6,
|
||
align: 'center',
|
||
render: (row: any, index: number) => {
|
||
return h('span', {}, { default: () => (pagination.value.page - 1) * pagination.value.pageSize + index + 1 })
|
||
}
|
||
},
|
||
{
|
||
title: '变更类别',
|
||
key: 'category',
|
||
width: 8,
|
||
align: 'center',
|
||
render: (row: any, index: number) => {
|
||
return h(NTag, {
|
||
size: 'small',
|
||
type: 'default'
|
||
}, { default: () => `${row.category}` })
|
||
}
|
||
},
|
||
{
|
||
title: '变更等级',
|
||
key: 'level',
|
||
width: 8,
|
||
align: 'center',
|
||
render: (row: any, index: number) => {
|
||
return h(NTag, {
|
||
size: 'small',
|
||
type: `${row.level==='重要'?'error':'default'}`
|
||
}, { default: () => `${row.level}` })
|
||
}
|
||
},
|
||
{
|
||
title: '变更时效',
|
||
key: 'timeLimit',
|
||
width: 8,
|
||
align: 'center',
|
||
render: (row: any, index: number) => {
|
||
return h(NTag, {
|
||
size: 'small',
|
||
type: `${row.timeLimit==='临时'?'warning':'info'}`
|
||
}, { default: () => `${row.timeLimit}` })
|
||
}
|
||
},
|
||
{
|
||
title: '审批步骤',
|
||
key: 'step',
|
||
width: 44,
|
||
align: 'center',
|
||
render: (row: any) => {
|
||
const stepNames = row.steps?.map((step: any) => step.name) || [];
|
||
const text = stepNames.join(' → ');
|
||
return h('p', { class: 'text-left text-xs' }, text || '');
|
||
}
|
||
},
|
||
{
|
||
title: '操作',
|
||
key: 'action',
|
||
width: 12,
|
||
align: 'center',
|
||
fixed: 'right',
|
||
render: (row: any) => {
|
||
return h('div', { class: 'flex items-center justify-center gap-3' }, {
|
||
default: () => [
|
||
h(NButton, {
|
||
text: true,
|
||
size: 'tiny',
|
||
type: 'primary',
|
||
onClick: () => handleView(row)
|
||
}, {
|
||
// 渲染按钮文本
|
||
default: () => '查看'
|
||
}),
|
||
h(NButton, {
|
||
text: true,
|
||
size: 'tiny',
|
||
type: 'primary',
|
||
onClick: () => handleEdit(row)
|
||
}, {
|
||
// 渲染按钮文本
|
||
default: () => '编辑'
|
||
}),
|
||
h(NPopconfirm, {
|
||
// 组件 Props
|
||
positiveText: '确定',
|
||
negativeText: '取消',
|
||
onPositiveClick: () => {
|
||
handleDelete(row)
|
||
},
|
||
// 可选：自定义确认/取消按钮的样式
|
||
positiveButtonProps: { size: 'tiny', type: 'primary' },
|
||
negativeButtonProps: { size: 'tiny' }
|
||
}, {
|
||
// 插槽 (Slots)
|
||
trigger: () => h(NButton,
|
||
{
|
||
text: true,
|
||
size: 'tiny',
|
||
type: 'error',
|
||
},
|
||
{
|
||
default: () => '删除' // 按钮文字
|
||
}
|
||
),
|
||
default: () => '确定要删除吗？' // 弹出框的提示内容
|
||
}),
|
||
]
|
||
})
|
||
}
|
||
},
|
||
])
|
||
const list = ref<{ id: number, category: string, level: string, timeLimit: string, steps: any[] }[]>([])
|
||
|
||
// 获取列表
|
||
const getList = async () => {
|
||
loading.value = true;
|
||
setTimeout(() => {
|
||
loading.value = false;
|
||
list.value = [
|
||
{id:1,category:'工艺',level:'重要',timeLimit:'临时',steps: [
|
||
{
|
||
id:101,
|
||
name:'部门审核',
|
||
countersign: false,
|
||
members: [{person:'测试人员01',specialty:'',countersign:false}]
|
||
},
|
||
{
|
||
id:102,
|
||
name:'专业审批',
|
||
countersign: false,
|
||
members: [{person:'测试人员02',specialty:'',countersign:false}]
|
||
},
|
||
{id: 103,
|
||
name: "部门负责人批准",
|
||
countersign: false,
|
||
members: [ {person:'测试人员03',specialty:'',countersign:false}]
|
||
}
|
||
]},
|
||
{id:2,category:'设备',level:'一般',timeLimit:'临时',steps:[
|
||
|
||
]},
|
||
{id:3,category:'管理',level:'重要',timeLimit:'永久',steps:[
|
||
|
||
]},
|
||
{id:4,category:'工艺',level:'重要',timeLimit:'临时',steps:[
|
||
|
||
]},
|
||
|
||
]
|
||
}, 1000)
|
||
}
|
||
|
||
// 打开添加模板弹框
|
||
const addTemplate = () => {
|
||
currentType.value = 'add';
|
||
currentTemplate.value = {
|
||
id: 0,
|
||
category: null,
|
||
level: null,
|
||
timeLimit: null,
|
||
steps: [],
|
||
};
|
||
templateModal.value = true;
|
||
}
|
||
// 查看模板
|
||
const handleView = (row: any) => {
|
||
currentType.value = 'view';
|
||
currentTemplate.value = {
|
||
id: row.id,
|
||
category: row.category,
|
||
level: row.level,
|
||
timeLimit: row.timeLimit,
|
||
steps: row.steps,
|
||
};
|
||
templateModal.value = true;
|
||
}
|
||
// 编辑角色
|
||
const handleEdit = (row: any) => {
|
||
currentType.value = 'edit';
|
||
currentTemplate.value = {
|
||
id: row.id,
|
||
category: row.category,
|
||
level: row.level,
|
||
timeLimit: row.timeLimit,
|
||
steps: row.steps,
|
||
};
|
||
templateModal.value = true;
|
||
}
|
||
// 删除角色
|
||
const handleDelete = (row: any) => {
|
||
loading.value = true;
|
||
setTimeout(() => {
|
||
loading.value = false;
|
||
list.value = list.value.filter((item: any) => item.id !== row.id);
|
||
window.$message?.success('删除成功')
|
||
}, 1000)
|
||
}
|
||
// 保存角色
|
||
const saveRole = async (e: MouseEvent) => {
|
||
e.preventDefault()
|
||
formRef.value?.validate((errors: any) => {
|
||
if (!errors) {
|
||
btnLoading.value = true;
|
||
setTimeout(() => {
|
||
// 新增
|
||
if(currentType.value === 'add'){
|
||
list.value.push({
|
||
id:list.value.length+1,
|
||
category:currentTemplate.value?.category as string,
|
||
level:currentTemplate.value?.level as string,
|
||
timeLimit:currentTemplate.value?.timeLimit as string,
|
||
steps:currentTemplate.value?.steps as any[]
|
||
})
|
||
}
|
||
// 编辑
|
||
if(currentType.value === 'edit'){
|
||
const target = list.value.find((item:any) => item.id === currentTemplate.value.id);
|
||
if (target) {
|
||
target.category = currentTemplate.value?.category as string;
|
||
target.level = currentTemplate.value?.level as string;
|
||
target.timeLimit = currentTemplate.value?.timeLimit as string;
|
||
target.steps = currentTemplate.value?.steps as any[];
|
||
}
|
||
}
|
||
window.$message?.success('操作成功')
|
||
btnLoading.value = false;
|
||
templateModal.value = false;
|
||
}, 1000)
|
||
}
|
||
})
|
||
}
|
||
// 会签步骤：一个模板最多一步；只有会签步骤能选专业。
|
||
// 勾选/取消后，所有非会签步骤的人员专业与「必须会签」标记一并清空
|
||
const setStepCountersign = (target: any, v: boolean) => {
|
||
currentTemplate.value.steps.forEach((s:any) => {
|
||
s.countersign = s === target ? v : false;
|
||
if (!s.countersign) s.members.forEach((m:any) => { m.specialty = ""; m.countersign = false; });
|
||
});
|
||
}
|
||
// 当前打开人员选择器的步骤（步骤行「＋」按钮切换）
|
||
const pickerStepId = ref<number | null>(null);
|
||
const pick = ref<string | null>(null);
|
||
const togglePicker = (s: any) => {
|
||
pickerStepId.value = pickerStepId.value === s.id ? null : s.id;
|
||
pick.value = null;
|
||
}
|
||
const addMember = (s: any, v: string | null) => {
|
||
if (v && !s.members.some((m:any) => m.person === v)) s.members.push({ person: v, specialty: "", countersign: false });
|
||
pick.value = null;
|
||
pickerStepId.value = null;
|
||
}
|
||
const delMember = (s: any, p: string) => {
|
||
s.members = s.members.filter((m:any) => m.person !== p);
|
||
}
|
||
const removeStep = (idx: number) => {
|
||
currentTemplate.value.steps.splice(idx, 1);
|
||
}
|
||
let sid = 100;
|
||
const mkStep = (name: string, extra: Partial<any> = {}): any => ({ id: ++sid, name, countersign: false, members: [], ...extra });
|
||
const addStepAfter = (idx: number) => {
|
||
currentTemplate.value.steps.splice(idx + 1, 0, mkStep(""));
|
||
}
|
||
const ORG_TREE = [
|
||
{
|
||
id: "factory", name: "演示工厂", short: "YS", leaf: false, sort: 0,
|
||
children: [
|
||
{
|
||
id: "scb", name: "生产部", short: "SCB", leaf: false, sort: 0,
|
||
children: [
|
||
{ id: "cj1", name: "测试车间一", short: "CJ1", leaf: true, sort: 0 },
|
||
{ id: "cj2", name: "测试车间二", short: "CJ2", leaf: true, sort: 1 },
|
||
{ id: "cj3", name: "测试车间三", short: "CJ3", leaf: true, sort: 2 },
|
||
],
|
||
},
|
||
{
|
||
id: "ahb", name: "安环部", short: "AHB", leaf: false, sort: 1,
|
||
children: [
|
||
{ id: "aqk", name: "安全科", short: "AQK", leaf: true, sort: 0 },
|
||
{ id: "hbk", name: "环保科", short: "HBK", leaf: true, sort: 1 },
|
||
],
|
||
},
|
||
{
|
||
id: "sbb", name: "设备部", short: "SBB", leaf: false, sort: 2,
|
||
children: [
|
||
{ id: "sbk", name: "设备科", short: "SBK", leaf: true, sort: 0 },
|
||
],
|
||
},
|
||
{
|
||
id: "zlb", name: "质量部", short: "ZLB", leaf: false, sort: 3,
|
||
children: [
|
||
{ id: "zjk", name: "质检科", short: "ZJK", leaf: true, sort: 0 },
|
||
],
|
||
},
|
||
],
|
||
},
|
||
];
|
||
const LEVEL2_ORGS = ORG_TREE[0]?.children ?? [];
|
||
const ORG_MEMBERS = [
|
||
{ id: 1, name: "测试人员01", dept: "测试车间一", gender: "男", phone: "13800000001", email: "test01@demo.com", account: "TEST001", role: "操作人员", scope: ["factory"], enabled: true },
|
||
{ id: 2, name: "测试人员02", dept: "测试车间二", gender: "女", phone: "13800000002", email: "test02@demo.com", account: "TEST002", role: "班长", scope: ["factory"], enabled: true },
|
||
{ id: 3, name: "测试人员03", dept: "测试车间三", gender: "男", phone: "13800000003", email: "test03@demo.com", account: "TEST003", role: "车间主任", scope: ["factory"], enabled: true },
|
||
{ id: 4, name: "测试人员04", dept: "安全科", gender: "女", phone: "13800000004", email: "test04@demo.com", account: "TEST004", role: "安全工程师", scope: ["factory"], enabled: true },
|
||
{ id: 5, name: "测试人员05", dept: "环保科", gender: "男", phone: "13800000005", email: "test05@demo.com", account: "TEST005", role: "环保专员", scope: ["factory"], enabled: true },
|
||
{ id: 6, name: "测试人员06", dept: "设备科", gender: "男", phone: "13800000006", email: "test06@demo.com", account: "TEST006", role: "设备工程师", scope: ["factory"], enabled: true },
|
||
{ id: 7, name: "测试人员07", dept: "质检科", gender: "女", phone: "13800000007", email: "test07@demo.com", account: "TEST007", role: "质量工程师", scope: ["factory"], enabled: true },
|
||
];
|
||
function orgSubtreeNames(n: any): string[] {
|
||
return [n.name, ...(n.children ?? []).flatMap(orgSubtreeNames)];
|
||
}
|
||
// 预设人员：级联选项（第二层组织 → 组织下可选成员，已选成员不再出现，空组织不展示）
|
||
const peopleOpts = (s: any) =>
|
||
LEVEL2_ORGS.map((o) => ({
|
||
label: o.name,
|
||
value: o.id,
|
||
children: ORG_MEMBERS
|
||
.filter((m) => m.enabled && orgSubtreeNames(o).includes(m.dept) && !s.members.some((x) => x.person === m.name))
|
||
.map((m) => ({ label: m.name, value: m.name })),
|
||
})).filter((o) => o.children.length > 0);
|
||
|
||
onMounted(() => {
|
||
getList()
|
||
})
|
||
</script>
|
||
|
||
<template>
|
||
<NSpace vertical :size="16">
|
||
<!-- 角色管理 -->
|
||
<NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
|
||
<div class="border mb-3 py-2 px-3" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
|
||
<NGrid :x-gap="gap" :y-gap="16" responsive="screen" item-responsive>
|
||
<NGi span="24 s:12 m:12">
|
||
<div class="h-100% flex items-center gap-2">
|
||
<Icon icon="carbon:flow-connection" class="size-18px" :style="{ color: themeStore.themeColor }" />
|
||
<p class="text-[16px] font-600">审批模板管理</p>
|
||
</div>
|
||
</NGi>
|
||
<NGi span="24 s:12 m:12" class="flex items-center justify-end gap-12px">
|
||
<NButton type="primary" size="small" @click="addTemplate">
|
||
<Icon icon="ic:round-plus" class="size-16px" />
|
||
添加模板
|
||
</NButton>
|
||
</NGi>
|
||
</NGrid>
|
||
</div>
|
||
<div class="scroll">
|
||
<NDataTable
|
||
size="small"
|
||
:loading="loading"
|
||
:single-line="false"
|
||
:columns="columns"
|
||
:data="list"
|
||
:pagination="pagination"
|
||
max-height="calc(100vh - 290px)"
|
||
:scroll-x="820"
|
||
/>
|
||
</div>
|
||
<!-- 新增/编辑/查看弹框 -->
|
||
<NModal
|
||
v-model:show="templateModal"
|
||
preset="card"
|
||
:title="currentType === 'add' ? '新增模板' : currentType === 'edit' ? '编辑模板':'查看模板'"
|
||
:auto-focus="false"
|
||
:style="{ width: '800px', height: 'auto' }"
|
||
:segmented="{ content: true, footer: true }"
|
||
>
|
||
<template #default>
|
||
<NForm class="w-full" ref="formRef" :model="currentTemplate" :rules="rules" label-placement="left" label-width="auto">
|
||
<NGrid :cols="24" :x-gap="24">
|
||
<NFormItemGi :span="8" label="变更类别" path="category">
|
||
<NSelect
|
||
v-model:value="currentTemplate.category"
|
||
:options="categoryOptions"
|
||
:disabled="readonly"
|
||
placeholder="请选择"
|
||
/>
|
||
</NFormItemGi>
|
||
<NFormItemGi :span="8" label="变更等级" path="level">
|
||
<NSelect
|
||
v-model:value="currentTemplate.level"
|
||
:options="levelOptions"
|
||
:disabled="readonly"
|
||
placeholder="请选择"
|
||
/>
|
||
</NFormItemGi>
|
||
<NFormItemGi :span="8" label="变更时效" path="timeLimit">
|
||
<NSelect
|
||
v-model:value="currentTemplate.timeLimit"
|
||
:options="timeLimitOptions"
|
||
:disabled="readonly"
|
||
placeholder="请选择"
|
||
/>
|
||
</NFormItemGi>
|
||
</NGrid>
|
||
<!-- 审批步骤 -->
|
||
<div class="flex flex-col gap-3 mb-3">
|
||
<div v-for="(s, idx) in currentTemplate.steps" :key="s.id" class="rounded-lg border border-slate-100 bg-slate-50/40 p-3">
|
||
<div class="flex flex-wrap items-center gap-2">
|
||
<span class="w-7 shrink-0 text-center text-xs text-slate-400">{{ idx + 1 }}</span>
|
||
<NInput v-model:value="s.name" maxlength="12" :disabled="readonly" placeholder="步骤名称（如：部门审核）" class="!w-48 text-sm" />
|
||
<NCheckbox :checked="s.countersign" :disabled="readonly" size="small" @update:checked="(v) => setStepCountersign(s, v)">
|
||
<span class="text-xs text-slate-500">专业会签步骤</span>
|
||
</NCheckbox>
|
||
<NButton v-if="!readonly" ghost type="primary" size="tiny" @click="togglePicker(s)" title="添加预设人员" class="ml-auto">
|
||
<Icon icon="ic:round-plus" class="size-16px" />
|
||
</NButton>
|
||
<NButton v-if="!readonly" text type="error" @click="removeStep(idx)" title="删除该步骤">
|
||
<Icon icon="iconamoon:trash" class="size-16px" />
|
||
</NButton>
|
||
</div>
|
||
<!-- 预设人员：人员必选；仅会签步骤可选择专业（必选），且人员可勾选「必须进行专业会签」 -->
|
||
<div class="mt-2 flex gap-2 pl-10">
|
||
<span class="shrink-0 text-xs leading-7 text-slate-400">预设人员:</span>
|
||
<div class="min-w-0 flex-1 space-y-1.5">
|
||
<div v-for="m in s.members" :key="m.person" class="flex min-h-7 flex-wrap items-center gap-2">
|
||
<span class="w-20 shrink-0 truncate text-xs font-medium text-slate-700">{{ m.person }}</span>
|
||
<template v-if="s.countersign">
|
||
<span class="text-xs text-slate-400"><span class="mr-0.5 text-red-500">*</span>专业:</span>
|
||
<NSelect :value="m.specialty || null" clearable size="small" placeholder="请选择专业" class="w-28"
|
||
:options="SPECIALTIES"
|
||
@update:value="(v) => m.specialty = v ?? ''"
|
||
/>
|
||
<NCheckbox :checked="m.countersign" size="small"
|
||
@update:checked="(v) => m.countersign = v"
|
||
>
|
||
<span class="text-xs text-slate-500">必须参与会签</span>
|
||
</NCheckbox>
|
||
</template>
|
||
<NButton v-if="!readonly" text type="error" @click="delMember(s, m.person)" title="删除该人员">
|
||
<Icon icon="iconamoon:trash" class="size-16px" />
|
||
</NButton>
|
||
</div>
|
||
<p v-if="s.countersign && s.members.length" class="text-[11px] leading-5 text-slate-400">
|
||
必须参与会签：勾选的人员必须参与专业会签，未勾选的人员为可选会签（按需参加）
|
||
</p>
|
||
<NCascader v-if="!readonly && pickerStepId === s.id" :value="pick" :options="peopleOpts(s)"
|
||
placeholder="请选择人员" size="small" check-strategy="child" :show-path="false" expand-trigger="click"
|
||
class="w-56" @update:value="(v) => addMember(s, v == null ? null : String(v))" />
|
||
<span v-if="readonly && s.members.length === 0" class="text-xs leading-7 text-slate-300">未预设</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<NButton v-if="!readonly" size="small" ghost dashed class="text-xs" @click="addStepAfter(currentTemplate.steps.length - 1)"><Icon icon="ic:round-plus" class="size-14px" />添加审批步骤</NButton>
|
||
</NForm>
|
||
</template>
|
||
<template #footer>
|
||
<div v-if="!readonly" class="flex justify-end gap-[10px]">
|
||
<NButton @click="templateModal = false">取消</NButton>
|
||
<NButton type="primary" :loading="btnLoading" @click="saveRole">确定</NButton>
|
||
</div>
|
||
</template>
|
||
</NModal>
|
||
</NCard>
|
||
</NSpace>
|
||
</template>
|
||
|
||
<style scoped lang="scss">
|
||
.scroll {
|
||
height: calc(100vh - 205px);
|
||
overflow-y: auto;
|
||
}
|
||
</style>
|