钉钉审批功能完善、混炼示方新增是否附加料
This commit is contained in:
geht
@@ -31,7 +31,14 @@ export const saveBind = (data: {
|
||||
}) => defHttp.post({ url: `${BASE}/save`, data });
|
||||
|
||||
export const deleteBind = (id: string) =>
|
||||
defHttp.delete({ url: `${BASE}/delete`, params: { id } });
|
||||
defHttp.delete({ url: `${BASE}/delete`, params: { id } }, { joinParamsToUrl: true });
|
||||
|
||||
/** 批量解析绑定字段取值（字典/表字典显示文本） */
|
||||
export const resolveFieldValues = (data: {
|
||||
bizCode: string;
|
||||
rowData: Record<string, any>;
|
||||
items: { mapKey: string; bizField: string; valueMode: string }[];
|
||||
}) => defHttp.post<Record<string, any>>({ url: `${BASE}/resolveFieldValues`, data });
|
||||
|
||||
/** 复用现有接口：拉取钉钉模板表单字段（含 dingFields） */
|
||||
export const getTemplateDetail = (id: string) =>
|
||||
|
||||
@@ -0,0 +1,73 @@
|
||||
/** 审批模板绑定字段取值：原值 / 显示文本 */
|
||||
|
||||
export type ValueMode = 'raw' | 'text';
|
||||
|
||||
export interface FieldTranslateMeta {
|
||||
fieldKey: string;
|
||||
label?: string;
|
||||
translateKind?: string;
|
||||
dictCode?: string;
|
||||
dictTable?: string;
|
||||
dictText?: string;
|
||||
dictCodeField?: string;
|
||||
}
|
||||
|
||||
export const VALUE_MODE_OPTIONS = [
|
||||
{ label: '原值(ID/Code)', value: 'raw' as ValueMode },
|
||||
{ label: '显示文本', value: 'text' as ValueMode },
|
||||
];
|
||||
|
||||
const DD_SELECT_TYPES = new Set([
|
||||
'DDSelectField',
|
||||
'DDMultiSelectField',
|
||||
'DepartmentField',
|
||||
'InnerContactField',
|
||||
]);
|
||||
|
||||
export function isTranslatableMeta(meta?: FieldTranslateMeta | null): boolean {
|
||||
return !!meta?.translateKind && meta.translateKind !== 'NONE';
|
||||
}
|
||||
|
||||
export function getNestedValue(obj: any, path: string): any {
|
||||
if (!obj || !path) return undefined;
|
||||
return path.split('.').reduce((acc: any, k: string) => acc?.[k], obj);
|
||||
}
|
||||
|
||||
export function getDictTextFromRow(rowData: any, bizField: string): any {
|
||||
if (!rowData || !bizField) return undefined;
|
||||
const parts = bizField.split('.');
|
||||
if (parts.length === 1) {
|
||||
return rowData[`${parts[0]}_dictText`];
|
||||
}
|
||||
const parentPath = parts.slice(0, -1).join('.');
|
||||
const leaf = parts[parts.length - 1];
|
||||
const parent = getNestedValue(rowData, parentPath);
|
||||
if (parent && typeof parent === 'object') {
|
||||
return parent[`${leaf}_dictText`];
|
||||
}
|
||||
return undefined;
|
||||
}
|
||||
|
||||
/** 前端本地解析（优先 _dictText） */
|
||||
export function resolveFieldValueLocal(
|
||||
rowData: any,
|
||||
bizField: string,
|
||||
valueMode: ValueMode = 'raw',
|
||||
): any {
|
||||
const raw = getNestedValue(rowData, bizField);
|
||||
if (valueMode !== 'text') return raw;
|
||||
const textVal = getDictTextFromRow(rowData, bizField);
|
||||
if (textVal !== undefined && textVal !== null && textVal !== '') {
|
||||
return textVal;
|
||||
}
|
||||
return raw;
|
||||
}
|
||||
|
||||
/** 绑定页默认取值方式：下拉类控件用原值，其余字典字段用显示文本 */
|
||||
export function defaultValueMode(
|
||||
componentName: string,
|
||||
meta?: FieldTranslateMeta | null,
|
||||
): ValueMode {
|
||||
if (!isTranslatableMeta(meta)) return 'raw';
|
||||
return DD_SELECT_TYPES.has(componentName) ? 'raw' : 'text';
|
||||
}
|
||||
@@ -138,7 +138,7 @@
|
||||
type="info"
|
||||
show-icon
|
||||
style="margin-bottom:16px"
|
||||
message="绑定说明：将钉钉审批模板的表单控件与实体字段一一对应，系统自动发起审批时会从业务数据中读取字段值填入表单。TextNote 说明文字类控件无需绑定。明细表（TableField）需先指定对应的业务明细集合，再绑定各列字段。"
|
||||
message="绑定说明：将钉钉审批模板的表单控件与实体字段一一对应。带 @Dict 或表字典的字段可配置「原值/显示文本」：下拉类控件建议原值，文本类控件建议显示文本。明细表需先指定业务明细集合再绑定各列。"
|
||||
/>
|
||||
|
||||
<!-- ① 主表字段 -->
|
||||
@@ -169,8 +169,19 @@
|
||||
option-filter-prop="label"
|
||||
allow-clear
|
||||
size="small"
|
||||
@change="() => onMainBizFieldChange(record)"
|
||||
/>
|
||||
</template>
|
||||
<template v-if="column.key === 'valueMode'">
|
||||
<a-select
|
||||
v-if="record.bizField && isTranslatableMainField(record.bizField)"
|
||||
v-model:value="record.valueMode"
|
||||
style="width:100%"
|
||||
:options="VALUE_MODE_OPTIONS"
|
||||
size="small"
|
||||
/>
|
||||
<span v-else class="dtb-value-mode-hint">—</span>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
</div>
|
||||
@@ -229,8 +240,19 @@
|
||||
option-filter-prop="label"
|
||||
allow-clear
|
||||
size="small"
|
||||
@change="() => onDetailBizFieldChange(record, tf.componentId)"
|
||||
/>
|
||||
</template>
|
||||
<template v-if="column.key === 'valueMode'">
|
||||
<a-select
|
||||
v-if="record.bizField && isTranslatableDetailField(record.bizField, tf.componentId)"
|
||||
v-model:value="record.valueMode"
|
||||
style="width:100%"
|
||||
:options="VALUE_MODE_OPTIONS"
|
||||
size="small"
|
||||
/>
|
||||
<span v-else class="dtb-value-mode-hint">—</span>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
<a-empty v-else description="该明细表无子控件" class="dtb-empty-sm" />
|
||||
@@ -288,6 +310,13 @@
|
||||
import { ref, computed, reactive, onMounted } from 'vue';
|
||||
import { useMessage } from '/@/hooks/web/useMessage';
|
||||
import * as Api from './dingTplBind.api';
|
||||
import {
|
||||
type FieldTranslateMeta,
|
||||
type ValueMode,
|
||||
VALUE_MODE_OPTIONS,
|
||||
defaultValueMode,
|
||||
isTranslatableMeta,
|
||||
} from './dingTplFieldValue';
|
||||
|
||||
const { createMessage } = useMessage();
|
||||
|
||||
@@ -317,6 +346,7 @@
|
||||
componentName: string;
|
||||
parentId?: string;
|
||||
bizField?: string;
|
||||
valueMode?: ValueMode;
|
||||
children?: FieldRow[]; // 仅 TableField 使用
|
||||
}
|
||||
|
||||
@@ -349,14 +379,14 @@
|
||||
const mainFieldRows = ref<FieldRow[]>([]);
|
||||
const tableFieldRows = ref<FieldRow[]>([]);
|
||||
|
||||
const bizFields = ref<{ fieldKey: string; label: string }[]>([]);
|
||||
const bizFields = ref<FieldTranslateMeta[]>([]);
|
||||
const bizFieldsLoading = ref(false);
|
||||
|
||||
const detailSlots = ref<DetailSlot[]>([]);
|
||||
const detailSlotsLoading = ref(false);
|
||||
|
||||
// key = tableField's componentId, value = loaded detail field options
|
||||
const detailFieldsMap = reactive<Record<string, { fieldKey: string; label: string }[]>>({});
|
||||
const detailFieldsMap = reactive<Record<string, FieldTranslateMeta[]>>({});
|
||||
const detailFieldsLoadingMap = reactive<Record<string, boolean>>({});
|
||||
|
||||
const saving = ref(false);
|
||||
@@ -404,15 +434,17 @@
|
||||
// ══ 表格列定义 ══
|
||||
|
||||
const mainColumns = [
|
||||
{ title: '控件类型', key: 'componentType', width: 140 },
|
||||
{ title: '钉钉字段名', dataIndex: 'componentLabel', width: 160 },
|
||||
{ title: '控件类型', key: 'componentType', width: 130 },
|
||||
{ title: '钉钉字段名', dataIndex: 'componentLabel', width: 140 },
|
||||
{ title: '绑定实体字段', key: 'bizField' },
|
||||
{ title: '取值方式', key: 'valueMode', width: 140 },
|
||||
];
|
||||
|
||||
const detailColumns = [
|
||||
{ title: '控件类型', key: 'componentType', width: 140 },
|
||||
{ title: '字段名', dataIndex: 'componentLabel', width: 160 },
|
||||
{ title: '控件类型', key: 'componentType', width: 130 },
|
||||
{ title: '字段名', dataIndex: 'componentLabel', width: 140 },
|
||||
{ title: '绑定明细字段', key: 'bizField' },
|
||||
{ title: '取值方式', key: 'valueMode', width: 140 },
|
||||
];
|
||||
|
||||
// ══ 菜单树操作 ══
|
||||
@@ -482,7 +514,7 @@
|
||||
bizFieldsLoading.value = true;
|
||||
try {
|
||||
const list = await Api.getBizFields(bizCode);
|
||||
bizFields.value = (list || []) as { fieldKey: string; label: string }[];
|
||||
bizFields.value = (list || []) as FieldTranslateMeta[];
|
||||
} catch {
|
||||
bizFields.value = [];
|
||||
} finally {
|
||||
@@ -551,6 +583,11 @@
|
||||
}
|
||||
}
|
||||
|
||||
interface SavedMappingEntry {
|
||||
bizField?: string;
|
||||
valueMode?: ValueMode;
|
||||
}
|
||||
|
||||
/** 从 dingFields 构建 mainFieldRows / tableFieldRows */
|
||||
function buildFieldRows(fields: DingField[], savedMappingJson: string | null) {
|
||||
const savedMap = parseSavedMapping(savedMappingJson);
|
||||
@@ -563,30 +600,46 @@
|
||||
const cid = f.id || f.label;
|
||||
|
||||
if (f.componentName === 'TableField') {
|
||||
const saved = savedMap.get(cid);
|
||||
const tfRow: FieldRow = {
|
||||
componentId: cid,
|
||||
componentLabel: f.label,
|
||||
componentName: f.componentName,
|
||||
bizField: savedMap.get(cid),
|
||||
bizField: saved?.bizField,
|
||||
children: (f.children || []).map((child) => {
|
||||
const childCid = `${cid}.${child.id || child.label}`;
|
||||
return {
|
||||
const childSaved = savedMap.get(childCid);
|
||||
const row: FieldRow = {
|
||||
componentId: childCid,
|
||||
componentLabel: child.label,
|
||||
componentName: child.componentName,
|
||||
parentId: cid,
|
||||
bizField: savedMap.get(childCid),
|
||||
} as FieldRow;
|
||||
bizField: childSaved?.bizField,
|
||||
valueMode: childSaved?.valueMode,
|
||||
};
|
||||
if (row.bizField && !row.valueMode) {
|
||||
row.valueMode = defaultValueMode(
|
||||
row.componentName,
|
||||
findDetailFieldMeta(row.bizField, cid),
|
||||
);
|
||||
}
|
||||
return row;
|
||||
}),
|
||||
};
|
||||
tables.push(tfRow);
|
||||
} else {
|
||||
mains.push({
|
||||
const saved = savedMap.get(cid);
|
||||
const row: FieldRow = {
|
||||
componentId: cid,
|
||||
componentLabel: f.label,
|
||||
componentName: f.componentName,
|
||||
bizField: savedMap.get(cid),
|
||||
});
|
||||
bizField: saved?.bizField,
|
||||
valueMode: saved?.valueMode,
|
||||
};
|
||||
if (row.bizField && !row.valueMode) {
|
||||
row.valueMode = defaultValueMode(row.componentName, findMainFieldMeta(row.bizField));
|
||||
}
|
||||
mains.push(row);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -594,14 +647,23 @@
|
||||
tableFieldRows.value = tables;
|
||||
}
|
||||
|
||||
/** 解析已保存的 fieldMappingJson → Map<componentId, bizField> */
|
||||
function parseSavedMapping(json: string | null): Map<string, string | undefined> {
|
||||
const m = new Map<string, string | undefined>();
|
||||
/** 解析已保存的 fieldMappingJson */
|
||||
function parseSavedMapping(json: string | null): Map<string, SavedMappingEntry> {
|
||||
const m = new Map<string, SavedMappingEntry>();
|
||||
if (!json) return m;
|
||||
try {
|
||||
const arr = JSON.parse(json) as { componentId: string; bizField?: string }[];
|
||||
const arr = JSON.parse(json) as {
|
||||
componentId: string;
|
||||
bizField?: string;
|
||||
valueMode?: ValueMode;
|
||||
}[];
|
||||
for (const item of arr) {
|
||||
if (item.componentId) m.set(item.componentId, item.bizField || undefined);
|
||||
if (item.componentId) {
|
||||
m.set(item.componentId, {
|
||||
bizField: item.bizField || undefined,
|
||||
valueMode: item.valueMode,
|
||||
});
|
||||
}
|
||||
}
|
||||
} catch {
|
||||
/* 解析失败忽略 */
|
||||
@@ -638,7 +700,7 @@
|
||||
detailFieldsLoadingMap[tableComponentId] = true;
|
||||
try {
|
||||
const list = await Api.getDetailFields(selectedBizCode.value, slotName, kind);
|
||||
detailFieldsMap[tableComponentId] = (list || []) as { fieldKey: string; label: string }[];
|
||||
detailFieldsMap[tableComponentId] = (list || []) as FieldTranslateMeta[];
|
||||
} catch {
|
||||
detailFieldsMap[tableComponentId] = [];
|
||||
} finally {
|
||||
@@ -653,6 +715,43 @@
|
||||
}));
|
||||
}
|
||||
|
||||
function findMainFieldMeta(fieldKey?: string): FieldTranslateMeta | undefined {
|
||||
if (!fieldKey) return undefined;
|
||||
return bizFields.value.find((f) => f.fieldKey === fieldKey);
|
||||
}
|
||||
|
||||
function findDetailFieldMeta(fieldKey?: string, tableId?: string): FieldTranslateMeta | undefined {
|
||||
if (!fieldKey || !tableId) return undefined;
|
||||
return (detailFieldsMap[tableId] || []).find((f) => f.fieldKey === fieldKey);
|
||||
}
|
||||
|
||||
function isTranslatableMainField(fieldKey?: string): boolean {
|
||||
return isTranslatableMeta(findMainFieldMeta(fieldKey));
|
||||
}
|
||||
|
||||
function isTranslatableDetailField(fieldKey?: string, tableId?: string): boolean {
|
||||
return isTranslatableMeta(findDetailFieldMeta(fieldKey, tableId));
|
||||
}
|
||||
|
||||
function onMainBizFieldChange(record: FieldRow) {
|
||||
if (!record.bizField) {
|
||||
record.valueMode = undefined;
|
||||
return;
|
||||
}
|
||||
record.valueMode = defaultValueMode(record.componentName, findMainFieldMeta(record.bizField));
|
||||
}
|
||||
|
||||
function onDetailBizFieldChange(record: FieldRow, tableId: string) {
|
||||
if (!record.bizField) {
|
||||
record.valueMode = undefined;
|
||||
return;
|
||||
}
|
||||
record.valueMode = defaultValueMode(
|
||||
record.componentName,
|
||||
findDetailFieldMeta(record.bizField, tableId),
|
||||
);
|
||||
}
|
||||
|
||||
// ══ 自动匹配 ══
|
||||
|
||||
function autoMatchFields() {
|
||||
@@ -727,15 +826,20 @@
|
||||
componentName: string;
|
||||
parentId?: string;
|
||||
bizField?: string;
|
||||
valueMode?: ValueMode;
|
||||
}[] = [];
|
||||
|
||||
for (const row of mainFieldRows.value) {
|
||||
items.push({
|
||||
const item: (typeof items)[0] = {
|
||||
componentId: row.componentId,
|
||||
componentLabel: row.componentLabel,
|
||||
componentName: row.componentName,
|
||||
bizField: row.bizField || '',
|
||||
});
|
||||
};
|
||||
if (row.bizField && isTranslatableMainField(row.bizField) && row.valueMode) {
|
||||
item.valueMode = row.valueMode;
|
||||
}
|
||||
items.push(item);
|
||||
}
|
||||
|
||||
for (const tf of tableFieldRows.value) {
|
||||
@@ -746,13 +850,21 @@
|
||||
bizField: tf.bizField || '',
|
||||
});
|
||||
for (const child of tf.children || []) {
|
||||
items.push({
|
||||
const childItem: (typeof items)[0] = {
|
||||
componentId: child.componentId,
|
||||
componentLabel: child.componentLabel,
|
||||
componentName: child.componentName,
|
||||
parentId: tf.componentId,
|
||||
bizField: child.bizField || '',
|
||||
});
|
||||
};
|
||||
if (
|
||||
child.bizField &&
|
||||
isTranslatableDetailField(child.bizField, tf.componentId) &&
|
||||
child.valueMode
|
||||
) {
|
||||
childItem.valueMode = child.valueMode;
|
||||
}
|
||||
items.push(childItem);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1063,7 +1175,12 @@
|
||||
}
|
||||
|
||||
.dtb-bind-table {
|
||||
margin-bottom: 4px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.dtb-value-mode-hint {
|
||||
color: #bbb;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.dtb-bind-table :deep(.ant-table-cell) {
|
||||
|
||||
@@ -22,6 +22,7 @@ enum Api {
|
||||
bindFlow = '/xslmes/mesXslDingProcessTpl/bindFlow',
|
||||
approvalFlowList = '/xslmes/approvalFlow/list',
|
||||
previewFlowApprovers = '/xslmes/mesXslDingProcessTpl/previewFlowApprovers',
|
||||
toggleStatus = '/xslmes/mesXslDingProcessTpl/toggleStatus',
|
||||
}
|
||||
|
||||
export const getExportUrl = Api.exportXls;
|
||||
@@ -45,7 +46,7 @@ export const batchDelete = (params, handleSuccess) => {
|
||||
};
|
||||
|
||||
export const saveOrUpdate = (params, isUpdate) =>
|
||||
defHttp.post({ url: isUpdate ? Api.edit : Api.save, params }, { successMessageMode: 'none' });
|
||||
defHttp.post({ url: isUpdate ? Api.edit : Api.save, params }, { successMessageMode: isUpdate ? 'message' : 'none' });
|
||||
|
||||
/** 新增审批模板草稿（返回含 id 的完整记录） */
|
||||
export const addNewTemplate = (params) =>
|
||||
@@ -81,3 +82,7 @@ export const getApprovalFlowList = (params?) =>
|
||||
|
||||
export const previewFlowApprovers = (flowId: string) =>
|
||||
defHttp.get({ url: Api.previewFlowApprovers, params: { flowId } }, { successMessageMode: 'none' });
|
||||
|
||||
/** 切换模板启用/停用（停用后绑定的业务页不再显示钉钉审批按钮） */
|
||||
export const toggleTplStatus = (id: string) =>
|
||||
defHttp.post({ url: Api.toggleStatus, params: { id } }, { joinParamsToUrl: true });
|
||||
|
||||
@@ -105,6 +105,10 @@
|
||||
<DingApprovalLaunchModal ref="launchModalRef" @success="handleLaunchSuccess" />
|
||||
<!--update-end---author:GHT ---date:2026-06-03 for：【MESToDing审批配置】手动填表发起钉钉审批-->
|
||||
|
||||
<!--update-begin---author:GHT ---date:20260610 for：【MESToDing审批配置】操作列绑定审批流程-->
|
||||
<BindApprovalFlowModal ref="bindFlowModalRef" @success="handleSuccess" />
|
||||
<!--update-end---author:GHT ---date:20260610 for：【MESToDing审批配置】操作列绑定审批流程-->
|
||||
|
||||
<!--update-begin---author:GHT ---date:2026-06-03 for：【MESToDing审批配置】钉钉同步结果弹窗-->
|
||||
<a-modal
|
||||
v-model:open="syncVisible"
|
||||
@@ -154,8 +158,11 @@
|
||||
//update-begin---author:GHT ---date:2026-06-03 for：【MESToDing审批配置】手动填表发起钉钉审批
|
||||
import DingApprovalLaunchModal from './components/DingApprovalLaunchModal.vue';
|
||||
//update-end---author:GHT ---date:2026-06-03 for：【MESToDing审批配置】手动填表发起钉钉审批
|
||||
//update-begin---author:GHT ---date:20260610 for：【MESToDing审批配置】操作列绑定审批流程
|
||||
import BindApprovalFlowModal from './components/BindApprovalFlowModal.vue';
|
||||
//update-end---author:GHT ---date:20260610 for：【MESToDing审批配置】操作列绑定审批流程
|
||||
import { columns, searchFormSchema, superQuerySchema } from './MesXslDingProcessTpl.data';
|
||||
import { list, deleteOne, batchDelete, getImportUrl, getExportUrl, syncFromDingtalk, batchImport, getTemplateDetail } from './MesXslDingProcessTpl.api';
|
||||
import { list, deleteOne, batchDelete, getImportUrl, getExportUrl, syncFromDingtalk, batchImport, getTemplateDetail, toggleTplStatus } from './MesXslDingProcessTpl.api';
|
||||
|
||||
const { createMessage } = useMessage();
|
||||
const queryParam = reactive<any>({});
|
||||
@@ -167,6 +174,9 @@
|
||||
api: list,
|
||||
columns,
|
||||
canResize: true,
|
||||
//update-begin---author:GHT ---date:2026-06-10 for：【钉钉审批模板】操作列加宽避免按钮挤压-----------
|
||||
scroll: { x: 1700 },
|
||||
//update-end---author:GHT ---date:2026-06-10 for：【钉钉审批模板】操作列加宽避免按钮挤压-----------
|
||||
formConfig: {
|
||||
schemas: searchFormSchema,
|
||||
autoSubmitOnEnter: true,
|
||||
@@ -175,7 +185,9 @@
|
||||
actionColumn: {
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
width: 220,
|
||||
//update-begin---author:GHT ---date:2026-06-10 for：【钉钉审批模板】操作列加宽避免按钮挤压-----------
|
||||
width: 540,
|
||||
//update-end---author:GHT ---date:2026-06-10 for：【钉钉审批模板】操作列加宽避免按钮挤压-----------
|
||||
fixed: 'right',
|
||||
slots: { customRender: 'action' },
|
||||
},
|
||||
@@ -230,27 +242,72 @@
|
||||
(selectedRowKeys.value = []) && reload();
|
||||
}
|
||||
|
||||
function isTplEnabled(record: Recordable) {
|
||||
return record.status === '1' || record.status === 1;
|
||||
}
|
||||
|
||||
async function handleToggleStatus(record: Recordable) {
|
||||
try {
|
||||
const msg = await toggleTplStatus(record.id);
|
||||
createMessage.success(typeof msg === 'string' ? msg : isTplEnabled(record) ? '已停用' : '已启用');
|
||||
reload();
|
||||
} catch (e: any) {
|
||||
createMessage.error(e?.message || '操作失败');
|
||||
}
|
||||
}
|
||||
|
||||
function getTableAction(record) {
|
||||
const enabled = isTplEnabled(record);
|
||||
return [
|
||||
{ label: '编辑', onClick: handleEdit.bind(null, record), auth: 'xslmes:mes_xsl_ding_process_tpl:edit' },
|
||||
//update-begin---author:GHT ---date:2026-06-03 for：【MESToDing审批配置】操作列新增发起审批按钮
|
||||
//update-begin---author:GHT ---date:20260610 for：【钉钉审批模板】操作列停用/启用-----------
|
||||
{
|
||||
label: '发起审批',
|
||||
label: enabled ? '停用' : '启用',
|
||||
color: enabled ? 'warning' : 'success',
|
||||
auth: 'xslmes:mes_xsl_ding_process_tpl:edit',
|
||||
popConfirm: {
|
||||
title: enabled
|
||||
? '停用后，已绑定该模板的业务页面将不再显示「钉钉审批」按钮，确认停用？'
|
||||
: '确认启用该审批模板？启用后业务页将恢复显示钉钉审批按钮。',
|
||||
confirm: handleToggleStatus.bind(null, record),
|
||||
placement: 'topLeft',
|
||||
},
|
||||
},
|
||||
//update-end---author:GHT ---date:20260610 for：【钉钉审批模板】操作列停用/启用-----------
|
||||
//update-begin---author:GHT ---date:20260610 for：【MESToDing审批配置】操作列绑定审批流程
|
||||
{
|
||||
label: '绑定审批流程',
|
||||
icon: 'ant-design:apartment-outlined',
|
||||
auth: 'xslmes:mes_xsl_ding_process_tpl:edit',
|
||||
onClick: handleBindApprovalFlow.bind(null, record),
|
||||
},
|
||||
//update-end---author:GHT ---date:20260610 for：【MESToDing审批配置】操作列绑定审批流程
|
||||
//update-begin---author:GHT ---date:2026-06-10 for：【MESToDing审批配置】设计模板移至操作列、发起审批改名为测试审批
|
||||
{
|
||||
label: '设计模板',
|
||||
icon: 'ant-design:layout-outlined',
|
||||
auth: 'xslmes:mes_xsl_ding_process_tpl:edit',
|
||||
onClick: handleDesignTemplate.bind(null, record),
|
||||
},
|
||||
{
|
||||
label: '测试审批',
|
||||
icon: 'ant-design:send-outlined',
|
||||
color: 'success',
|
||||
disabled: !record.processCode,
|
||||
tooltip: record.processCode ? '手动填表后发起钉钉审批' : '请先配置 processCode',
|
||||
disabled: !enabled || !record.processCode,
|
||||
tooltip: !enabled
|
||||
? '模板已停用'
|
||||
: record.processCode
|
||||
? '手动填表后测试发起钉钉审批'
|
||||
: '请先配置 processCode',
|
||||
onClick: handleLaunchApproval.bind(null, record),
|
||||
},
|
||||
//update-end---author:GHT ---date:2026-06-03 for：【MESToDing审批配置】操作列新增发起审批按钮
|
||||
//update-end---author:GHT ---date:2026-06-10 for：【MESToDing审批配置】设计模板移至操作列、发起审批改名为测试审批
|
||||
];
|
||||
}
|
||||
|
||||
function getDropDownAction(record) {
|
||||
const actions: any[] = [
|
||||
{ label: '详情', onClick: handleDetail.bind(null, record) },
|
||||
//update-begin---author:GHT ---date:2026-06-03 for：【MESToDing审批配置】新增设计模板入口
|
||||
{ label: '设计模板', onClick: handleDesignTemplate.bind(null, record), icon: 'ant-design:layout-outlined' },
|
||||
];
|
||||
if (!record.processCode) {
|
||||
actions.push({
|
||||
@@ -262,7 +319,6 @@
|
||||
}
|
||||
actions.push(
|
||||
{ label: '查看钉钉字段', onClick: handleShowDingSchema.bind(null, record), icon: 'ant-design:dingtalk-outlined' },
|
||||
//update-end---author:GHT ---date:2026-06-03 for：【MESToDing审批配置】新增设计模板入口
|
||||
{
|
||||
label: '删除',
|
||||
popConfirm: { title: '是否确认删除', confirm: handleDelete.bind(null, record), placement: 'topLeft' },
|
||||
@@ -272,11 +328,24 @@
|
||||
return actions;
|
||||
}
|
||||
|
||||
// ===== 绑定审批流程 =====
|
||||
//update-begin---author:GHT ---date:20260610 for：【MESToDing审批配置】操作列绑定审批流程
|
||||
const bindFlowModalRef = ref();
|
||||
|
||||
function handleBindApprovalFlow(record: Recordable) {
|
||||
bindFlowModalRef.value?.open(record);
|
||||
}
|
||||
//update-end---author:GHT ---date:20260610 for：【MESToDing审批配置】操作列绑定审批流程
|
||||
|
||||
// ===== 手动填表发起钉钉审批 =====
|
||||
//update-begin---author:GHT ---date:2026-06-03 for：【MESToDing审批配置】手动填表发起钉钉审批
|
||||
const launchModalRef = ref();
|
||||
|
||||
function handleLaunchApproval(record: Recordable) {
|
||||
if (!isTplEnabled(record)) {
|
||||
createMessage.warning('该模板已停用，请先启用后再发起审批');
|
||||
return;
|
||||
}
|
||||
if (!record.processCode) {
|
||||
createMessage.warning('该模板尚未配置 processCode，请先完成模板配置');
|
||||
return;
|
||||
|
||||
@@ -0,0 +1,433 @@
|
||||
<!--
|
||||
钉钉审批模板 - 绑定 MES 审批流弹窗
|
||||
@author GHT
|
||||
@date 2026-06-10 for：【MESToDing审批配置】操作列绑定审批流程
|
||||
-->
|
||||
<template>
|
||||
<a-modal
|
||||
v-model:open="visible"
|
||||
title="绑定审批流程"
|
||||
width="660px"
|
||||
wrap-class-name="baf-modal-wrap"
|
||||
:body-style="{ padding: '8px 28px 20px' }"
|
||||
:confirm-loading="submitting"
|
||||
ok-text="确认绑定"
|
||||
cancel-text="取消"
|
||||
destroy-on-close
|
||||
@ok="handleSubmit"
|
||||
@cancel="handleClose"
|
||||
>
|
||||
<a-spin :spinning="loading">
|
||||
<div class="baf-body">
|
||||
<div v-if="tplRecord" class="baf-info-card">
|
||||
<a-descriptions :column="1" bordered size="small" class="baf-descriptions">
|
||||
<a-descriptions-item label="模板名称">{{ tplRecord.tplName || '—' }}</a-descriptions-item>
|
||||
<a-descriptions-item label="processCode">
|
||||
<a-typography-text v-if="tplRecord.processCode" code copyable>{{ tplRecord.processCode }}</a-typography-text>
|
||||
<a-tag v-else color="orange">未创建</a-tag>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="当前绑定">
|
||||
<span v-if="currentFlowName" class="baf-bound-name">{{ currentFlowName }}</span>
|
||||
<span v-else class="baf-unbound">未绑定</span>
|
||||
</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</div>
|
||||
|
||||
<div class="baf-section">
|
||||
<a-form layout="vertical" class="baf-form">
|
||||
<a-form-item label="选择审批流程" required>
|
||||
<div class="baf-select-row">
|
||||
<a-select
|
||||
v-model:value="selectedFlowId"
|
||||
class="baf-flow-select"
|
||||
placeholder="请选择 MES 审批流"
|
||||
:loading="flowLoading"
|
||||
:options="flowSelectOptions"
|
||||
show-search
|
||||
:filter-option="filterFlowOption"
|
||||
allow-clear
|
||||
@change="handleFlowChange"
|
||||
>
|
||||
<template #option="{ label, status, remark, bizTableName }">
|
||||
<div class="baf-opt-item">
|
||||
<span class="baf-opt-name">{{ label }}</span>
|
||||
<span class="baf-opt-meta">
|
||||
<span v-if="bizTableName" class="baf-opt-remark">{{ bizTableName }}</span>
|
||||
<span v-if="remark" class="baf-opt-remark">{{ remark }}</span>
|
||||
<a-tag
|
||||
:color="status === '1' ? 'green' : status === '2' ? 'default' : 'orange'"
|
||||
class="baf-opt-tag"
|
||||
>
|
||||
{{ status === '1' ? '已发布' : status === '2' ? '已停用' : '草稿' }}
|
||||
</a-tag>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
</a-select>
|
||||
<a-button v-if="selectedFlowId" type="link" class="baf-design-btn" @click="handleDesignFlow">设计</a-button>
|
||||
</div>
|
||||
<div class="baf-hint">发起钉钉审批时，将按所选审批流解析各节点审批人</div>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</div>
|
||||
|
||||
<div v-if="selectedFlowId" class="baf-preview-card">
|
||||
<div class="baf-preview-title">
|
||||
审批节点预览
|
||||
<a-spin :spinning="previewLoading" size="small" />
|
||||
</div>
|
||||
<div v-if="!previewLoading && approverPreview.length === 0" class="baf-preview-empty">
|
||||
该审批流暂无审批人节点，请先在流程设计器中配置
|
||||
</div>
|
||||
<div v-else class="baf-preview-list">
|
||||
<div v-for="(node, ni) in approverPreview" :key="node.nodeId || ni" class="baf-preview-node">
|
||||
<a-tag :color="node.nodeType === 'cc' ? 'blue' : 'orange'" class="baf-node-tag">
|
||||
{{ node.nodeType === 'cc' ? '抄送' : '审批' }}
|
||||
</a-tag>
|
||||
<span class="baf-preview-name">{{ node.nodeName }}</span>
|
||||
<span v-if="node.users?.length" class="baf-preview-users">
|
||||
{{ node.users.map((u) => u.realname || u.username).join('、') }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<a-alert
|
||||
v-if="selectedFlowStatus && selectedFlowStatus !== '1'"
|
||||
type="warning"
|
||||
show-icon
|
||||
class="baf-warn-alert"
|
||||
message="所选审批流尚未发布，发起审批前请先发布流程"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</a-spin>
|
||||
|
||||
<FlowDesign @register="registerFlowDesign" @success="handleDesignSuccess" />
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, computed } from 'vue';
|
||||
import { useMessage } from '/@/hooks/web/useMessage';
|
||||
import { useModal } from '/@/components/Modal';
|
||||
import { bindApprovalFlow, getApprovalFlowList, previewFlowApprovers } from '../MesXslDingProcessTpl.api';
|
||||
import FlowDesign from '/@/views/approval/flow/components/FlowDesign.vue';
|
||||
|
||||
const emit = defineEmits(['success']);
|
||||
const { createMessage } = useMessage();
|
||||
|
||||
const visible = ref(false);
|
||||
const loading = ref(false);
|
||||
const submitting = ref(false);
|
||||
const tplRecord = ref<Recordable | null>(null);
|
||||
|
||||
const flowLoading = ref(false);
|
||||
const flowList = ref<any[]>([]);
|
||||
const selectedFlowId = ref('');
|
||||
const previewLoading = ref(false);
|
||||
const approverPreview = ref<any[]>([]);
|
||||
|
||||
const [registerFlowDesign, { openModal: openFlowDesign }] = useModal();
|
||||
|
||||
const flowSelectOptions = computed(() =>
|
||||
flowList.value.map((f) => ({
|
||||
value: f.id,
|
||||
label: f.flowName,
|
||||
status: f.status,
|
||||
remark: f.remark || '',
|
||||
bizTableName: f.bizTableName || '',
|
||||
})),
|
||||
);
|
||||
|
||||
const currentFlowName = computed(() => {
|
||||
if (!tplRecord.value?.flowId) return '';
|
||||
const flow = flowList.value.find((f) => f.id === tplRecord.value?.flowId);
|
||||
return flow?.flowName || tplRecord.value?.flowId;
|
||||
});
|
||||
|
||||
const selectedFlowStatus = computed(() => {
|
||||
if (!selectedFlowId.value) return '';
|
||||
return flowList.value.find((f) => f.id === selectedFlowId.value)?.status || '';
|
||||
});
|
||||
|
||||
function filterFlowOption(input: string, option: any) {
|
||||
return (option?.label ?? '').toLowerCase().includes(input.toLowerCase());
|
||||
}
|
||||
|
||||
function resetState() {
|
||||
selectedFlowId.value = '';
|
||||
approverPreview.value = [];
|
||||
tplRecord.value = null;
|
||||
}
|
||||
|
||||
async function open(record: Recordable) {
|
||||
resetState();
|
||||
tplRecord.value = record;
|
||||
visible.value = true;
|
||||
loading.value = true;
|
||||
try {
|
||||
await loadFlowList();
|
||||
if (record.flowId) {
|
||||
selectedFlowId.value = record.flowId;
|
||||
await loadPreview(record.flowId);
|
||||
}
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
function handleClose() {
|
||||
visible.value = false;
|
||||
}
|
||||
|
||||
async function loadFlowList() {
|
||||
flowLoading.value = true;
|
||||
try {
|
||||
const res = await getApprovalFlowList({ pageSize: 500 });
|
||||
flowList.value = res?.records || res || [];
|
||||
} catch {
|
||||
flowList.value = [];
|
||||
} finally {
|
||||
flowLoading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function handleFlowChange() {
|
||||
approverPreview.value = [];
|
||||
if (selectedFlowId.value) {
|
||||
await loadPreview(selectedFlowId.value);
|
||||
}
|
||||
}
|
||||
|
||||
async function loadPreview(flowId: string) {
|
||||
previewLoading.value = true;
|
||||
try {
|
||||
const res = await previewFlowApprovers(flowId);
|
||||
approverPreview.value = Array.isArray(res) ? res : [];
|
||||
} catch {
|
||||
approverPreview.value = [];
|
||||
} finally {
|
||||
previewLoading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
function handleDesignFlow() {
|
||||
const flow = flowList.value.find((f) => f.id === selectedFlowId.value);
|
||||
if (flow) {
|
||||
openFlowDesign(true, { record: flow, readonly: false });
|
||||
}
|
||||
}
|
||||
|
||||
async function handleDesignSuccess() {
|
||||
if (selectedFlowId.value) {
|
||||
await loadPreview(selectedFlowId.value);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleSubmit() {
|
||||
if (!tplRecord.value?.id) {
|
||||
createMessage.warning('模板信息无效');
|
||||
return;
|
||||
}
|
||||
if (!selectedFlowId.value) {
|
||||
createMessage.warning('请选择要绑定的审批流程');
|
||||
return;
|
||||
}
|
||||
submitting.value = true;
|
||||
try {
|
||||
await bindApprovalFlow({ id: tplRecord.value.id, flowId: selectedFlowId.value });
|
||||
createMessage.success('审批流程绑定成功');
|
||||
visible.value = false;
|
||||
emit('success');
|
||||
} catch (e: any) {
|
||||
createMessage.error(e?.message || '绑定失败');
|
||||
} finally {
|
||||
submitting.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
defineExpose({ open });
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.baf-body {
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.baf-info-card {
|
||||
margin-bottom: 20px;
|
||||
|
||||
:deep(.baf-descriptions) {
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
|
||||
.ant-descriptions-item-label {
|
||||
width: 110px;
|
||||
background: #fafafa;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.ant-descriptions-item-content {
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.baf-bound-name {
|
||||
color: #1677ff;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.baf-unbound {
|
||||
color: #bbb;
|
||||
}
|
||||
|
||||
.baf-section {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.baf-form {
|
||||
:deep(.ant-form-item) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
:deep(.ant-form-item-label > label) {
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.baf-select-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.baf-flow-select {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.baf-design-btn {
|
||||
flex-shrink: 0;
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
.baf-hint {
|
||||
margin-top: 8px;
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
line-height: 1.6;
|
||||
padding-left: 2px;
|
||||
}
|
||||
|
||||
.baf-opt-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.baf-opt-name {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.baf-opt-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.baf-opt-remark {
|
||||
font-size: 11px;
|
||||
color: #999;
|
||||
max-width: 120px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.baf-opt-tag {
|
||||
margin: 0;
|
||||
font-size: 11px;
|
||||
line-height: 16px;
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
.baf-preview-card {
|
||||
margin-top: 20px;
|
||||
padding: 14px 16px;
|
||||
background: #fafafa;
|
||||
border: 1px solid #f0f0f0;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.baf-preview-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.baf-preview-empty {
|
||||
color: #bbb;
|
||||
font-size: 12px;
|
||||
padding: 8px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.baf-preview-list {
|
||||
background: #fff;
|
||||
border: 1px solid #f0f0f0;
|
||||
border-radius: 6px;
|
||||
padding: 4px 12px;
|
||||
}
|
||||
|
||||
.baf-preview-node {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
padding: 10px 0;
|
||||
border-bottom: 1px dashed #f0f0f0;
|
||||
font-size: 13px;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
.baf-node-tag {
|
||||
margin: 0;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.baf-preview-name {
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.baf-preview-users {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.baf-warn-alert {
|
||||
margin-top: 12px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="less">
|
||||
.baf-modal-wrap {
|
||||
.ant-modal-footer {
|
||||
padding: 12px 28px 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -676,6 +676,9 @@
|
||||
try {
|
||||
const detail = await getTemplateDetail(record.id);
|
||||
tplData.value = detail;
|
||||
if (detail?.dingNameSynced) {
|
||||
createMessage.info('已从钉钉同步最新模板名称');
|
||||
}
|
||||
|
||||
if (detail?.dingFields?.length) {
|
||||
// 以钉钉最新 schema 为准（保证结构与钉钉同步）
|
||||
|
||||
Reference in New Issue
Block a user