新增钉钉审批模板配置功能，包括相关实体、控制器、服务及接口的实现，支持审批模板的增删改查及从钉钉同步模板，增强了系统的审批流管理能力。
This commit is contained in:
geht
@@ -0,0 +1,346 @@
|
||||
<template>
|
||||
<div>
|
||||
<BasicTable @register="registerTable" :rowSelection="rowSelection">
|
||||
<template #tableTitle>
|
||||
<a-button type="primary" v-auth="'xslmes:mes_xsl_ding_process_tpl:add'" preIcon="ant-design:plus-outlined" @click="handleAdd">
|
||||
新增
|
||||
</a-button>
|
||||
<a-button type="primary" v-auth="'xslmes:mes_xsl_ding_process_tpl:exportXls'" preIcon="ant-design:export-outlined" @click="onExportXls">
|
||||
导出
|
||||
</a-button>
|
||||
<j-upload-button type="primary" v-auth="'xslmes:mes_xsl_ding_process_tpl:importExcel'" preIcon="ant-design:import-outlined" @click="onImportXls">
|
||||
导入
|
||||
</j-upload-button>
|
||||
<!--update-begin---author:GHT ---date:2026-06-03 for：【MESToDing审批配置】从钉钉同步按钮-->
|
||||
<a-button preIcon="ant-design:sync-outlined" :loading="syncLoading" @click="handleSyncFromDingtalk">
|
||||
从钉钉同步
|
||||
</a-button>
|
||||
<!--update-end---author:GHT ---date:2026-06-03 for：【MESToDing审批配置】从钉钉同步按钮-->
|
||||
<a-dropdown v-if="selectedRowKeys.length > 0">
|
||||
<template #overlay>
|
||||
<a-menu>
|
||||
<a-menu-item key="1" @click="batchHandleDelete">
|
||||
<Icon icon="ant-design:delete-outlined" />
|
||||
删除
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
<a-button v-auth="'xslmes:mes_xsl_ding_process_tpl:deleteBatch'">
|
||||
批量操作
|
||||
<Icon icon="mdi:chevron-down" />
|
||||
</a-button>
|
||||
</a-dropdown>
|
||||
<super-query :config="superQueryConfig" @search="handleSuperQuery" />
|
||||
</template>
|
||||
<template #action="{ record }">
|
||||
<TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)" />
|
||||
</template>
|
||||
</BasicTable>
|
||||
|
||||
<MesXslDingProcessTplModal @register="registerModal" @success="handleSuccess" />
|
||||
|
||||
<!--update-begin---author:GHT ---date:2026-06-03 for：【MESToDing审批配置】钉钉字段详情弹窗（只读）-->
|
||||
<a-modal
|
||||
v-model:open="schemaVisible"
|
||||
title="钉钉模板字段详情"
|
||||
width="720px"
|
||||
:footer="null"
|
||||
destroy-on-close
|
||||
@cancel="schemaVisible = false"
|
||||
>
|
||||
<a-spin :spinning="schemaLoading">
|
||||
<template v-if="schemaData">
|
||||
<a-descriptions :column="2" bordered size="small" style="margin-bottom:14px">
|
||||
<a-descriptions-item label="模板名称">{{ schemaData.tplName }}</a-descriptions-item>
|
||||
<a-descriptions-item label="业务类型">{{ schemaData.bizType || '—' }}</a-descriptions-item>
|
||||
<a-descriptions-item label="processCode" :span="2">
|
||||
<a-typography-text v-if="schemaData.processCode" code copyable>{{ schemaData.processCode }}</a-typography-text>
|
||||
<a-tag v-else color="orange">未创建</a-tag>
|
||||
</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
<a-alert v-if="schemaData.schemaError" type="warning" :message="schemaData.schemaError" show-icon style="margin-bottom:12px" />
|
||||
<template v-if="schemaData.dingFields?.length">
|
||||
<div style="font-weight:600;margin-bottom:8px">
|
||||
钉钉表单字段
|
||||
<a-tag color="blue" style="margin-left:6px;font-weight:400">{{ schemaData.dingFields.length }} 个</a-tag>
|
||||
</div>
|
||||
<a-table
|
||||
:dataSource="schemaData.dingFields"
|
||||
:columns="dingFieldColumns"
|
||||
:pagination="false"
|
||||
size="small"
|
||||
:rowKey="(_, i) => i"
|
||||
:scroll="{ y: 300 }"
|
||||
/>
|
||||
</template>
|
||||
<div v-else-if="!schemaData.schemaError" style="color:#999;text-align:center;padding:20px">
|
||||
未从钉钉获取到字段（模板可能无 processCode 或字段为空）
|
||||
</div>
|
||||
<a-collapse style="margin-top:14px" :bordered="false">
|
||||
<a-collapse-panel key="json" header="原始 JSON 数据" style="background:#fafafa">
|
||||
<pre style="font-size:12px;margin:0;max-height:200px;overflow:auto;white-space:pre-wrap;word-break:break-all">{{ JSON.stringify(schemaData, null, 2) }}</pre>
|
||||
</a-collapse-panel>
|
||||
</a-collapse>
|
||||
</template>
|
||||
</a-spin>
|
||||
</a-modal>
|
||||
<!--update-end---author:GHT ---date:2026-06-03 for：【MESToDing审批配置】钉钉字段详情弹窗（只读）-->
|
||||
|
||||
<!--update-begin---author:GHT ---date:2026-06-03 for：【MESToDing审批配置】表单设计器-->
|
||||
<DingTplDesigner ref="designerRef" @success="handleSuccess" />
|
||||
<!--update-end---author:GHT ---date:2026-06-03 for：【MESToDing审批配置】表单设计器-->
|
||||
|
||||
<!--update-begin---author:GHT ---date:2026-06-03 for：【MESToDing审批配置】手动填表发起钉钉审批-->
|
||||
<DingApprovalLaunchModal ref="launchModalRef" @success="handleLaunchSuccess" />
|
||||
<!--update-end---author:GHT ---date:2026-06-03 for：【MESToDing审批配置】手动填表发起钉钉审批-->
|
||||
|
||||
<!--update-begin---author:GHT ---date:2026-06-03 for：【MESToDing审批配置】钉钉同步结果弹窗-->
|
||||
<a-modal
|
||||
v-model:open="syncVisible"
|
||||
title="从钉钉同步审批模板"
|
||||
width="780px"
|
||||
:confirmLoading="importLoading"
|
||||
okText="导入选中"
|
||||
cancelText="取消"
|
||||
@ok="handleBatchImport"
|
||||
@cancel="syncVisible = false"
|
||||
>
|
||||
<a-spin :spinning="syncLoading">
|
||||
<a-alert v-if="syncList.length === 0 && !syncLoading" message="未获取到钉钉审批模板，请确认钉钉配置及账号绑定" type="warning" show-icon style="margin-bottom:12px" />
|
||||
<a-table
|
||||
v-if="syncList.length > 0"
|
||||
:dataSource="syncList"
|
||||
:columns="syncColumns"
|
||||
:rowSelection="{ type: 'checkbox', selectedRowKeys: syncSelectedKeys, onChange: onSyncSelectChange }"
|
||||
:rowKey="(r) => r.processCode"
|
||||
:pagination="false"
|
||||
size="small"
|
||||
:scroll="{ y: 380 }"
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.dataIndex === 'imported'">
|
||||
<a-tag :color="record.imported ? 'green' : 'default'">{{ record.imported ? '已导入' : '未导入' }}</a-tag>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
</a-spin>
|
||||
</a-modal>
|
||||
<!--update-end---author:GHT ---date:2026-06-03 for：【MESToDing审批配置】钉钉同步结果弹窗-->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" name="xslmes-mesXslDingProcessTpl" setup>
|
||||
import { ref, reactive } from 'vue';
|
||||
import { BasicTable, TableAction } from '/@/components/Table';
|
||||
import { useModal } from '/@/components/Modal';
|
||||
import { useListPage } from '/@/hooks/system/useListPage';
|
||||
import { useMessage } from '/@/hooks/web/useMessage';
|
||||
import Icon from '/@/components/Icon';
|
||||
import MesXslDingProcessTplModal from './components/MesXslDingProcessTplModal.vue';
|
||||
import DingTplDesigner from './components/DingTplDesigner.vue';
|
||||
//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审批配置】手动填表发起钉钉审批
|
||||
import { columns, searchFormSchema, superQuerySchema } from './MesXslDingProcessTpl.data';
|
||||
import { list, deleteOne, batchDelete, getImportUrl, getExportUrl, syncFromDingtalk, batchImport, getTemplateDetail } from './MesXslDingProcessTpl.api';
|
||||
|
||||
const { createMessage } = useMessage();
|
||||
const queryParam = reactive<any>({});
|
||||
const [registerModal, { openModal }] = useModal();
|
||||
|
||||
const { tableContext, onExportXls, onImportXls } = useListPage({
|
||||
tableProps: {
|
||||
title: '钉钉审批模板配置',
|
||||
api: list,
|
||||
columns,
|
||||
canResize: true,
|
||||
formConfig: {
|
||||
schemas: searchFormSchema,
|
||||
autoSubmitOnEnter: true,
|
||||
showAdvancedButton: true,
|
||||
},
|
||||
actionColumn: {
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
width: 220,
|
||||
fixed: 'right',
|
||||
slots: { customRender: 'action' },
|
||||
},
|
||||
beforeFetch: (params) => Object.assign(params, queryParam),
|
||||
},
|
||||
exportConfig: { name: '钉钉审批模板配置', url: getExportUrl, params: queryParam },
|
||||
importConfig: { url: getImportUrl, success: handleSuccess },
|
||||
});
|
||||
|
||||
const [registerTable, { reload }, { rowSelection, selectedRowKeys }] = tableContext;
|
||||
const superQueryConfig = reactive(superQuerySchema);
|
||||
|
||||
function handleSuperQuery(params) {
|
||||
Object.keys(params).forEach((k) => (queryParam[k] = params[k]));
|
||||
reload();
|
||||
}
|
||||
|
||||
function handleAdd() {
|
||||
openModal(true, { isUpdate: false, showFooter: true });
|
||||
}
|
||||
|
||||
function handleEdit(record: Recordable) {
|
||||
openModal(true, { record, isUpdate: true, showFooter: true });
|
||||
}
|
||||
|
||||
function handleDetail(record: Recordable) {
|
||||
openModal(true, { record, isUpdate: true, showFooter: false });
|
||||
}
|
||||
|
||||
async function handleDelete(record) {
|
||||
await deleteOne({ id: record.id }, handleSuccess);
|
||||
}
|
||||
|
||||
async function batchHandleDelete() {
|
||||
await batchDelete({ ids: selectedRowKeys.value }, handleSuccess);
|
||||
}
|
||||
|
||||
function handleSuccess() {
|
||||
(selectedRowKeys.value = []) && reload();
|
||||
}
|
||||
|
||||
function getTableAction(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审批配置】操作列新增发起审批按钮
|
||||
{
|
||||
label: '发起审批',
|
||||
icon: 'ant-design:send-outlined',
|
||||
color: 'success',
|
||||
disabled: !record.processCode,
|
||||
tooltip: record.processCode ? '手动填表后发起钉钉审批' : '请先配置 processCode',
|
||||
onClick: handleLaunchApproval.bind(null, record),
|
||||
},
|
||||
//update-end---author:GHT ---date:2026-06-03 for：【MESToDing审批配置】操作列新增发起审批按钮
|
||||
];
|
||||
}
|
||||
|
||||
function getDropDownAction(record) {
|
||||
return [
|
||||
{ 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' },
|
||||
{ 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' },
|
||||
auth: 'xslmes:mes_xsl_ding_process_tpl:delete',
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
// ===== 手动填表发起钉钉审批 =====
|
||||
//update-begin---author:GHT ---date:2026-06-03 for：【MESToDing审批配置】手动填表发起钉钉审批
|
||||
const launchModalRef = ref();
|
||||
|
||||
function handleLaunchApproval(record: Recordable) {
|
||||
if (!record.processCode) {
|
||||
createMessage.warning('该模板尚未配置 processCode，请先完成模板配置');
|
||||
return;
|
||||
}
|
||||
launchModalRef.value?.open(record);
|
||||
}
|
||||
|
||||
function handleLaunchSuccess() {
|
||||
// 发起成功后可按需刷新列表（本期无需刷新，审批实例不在此列表）
|
||||
}
|
||||
//update-end---author:GHT ---date:2026-06-03 for：【MESToDing审批配置】手动填表发起钉钉审批
|
||||
|
||||
// ===== 表单设计器 =====
|
||||
const designerRef = ref();
|
||||
|
||||
function handleDesignTemplate(record: Recordable) {
|
||||
designerRef.value?.open(record);
|
||||
}
|
||||
|
||||
// ===== 钉钉字段详情（只读 schema 查看器）=====
|
||||
const schemaVisible = ref(false);
|
||||
const schemaLoading = ref(false);
|
||||
const schemaData = ref<any>(null);
|
||||
|
||||
const dingFieldColumns = [
|
||||
{ title: '控件标题（钉钉字段名）', dataIndex: 'label' },
|
||||
{ title: '控件类型', dataIndex: 'componentName', width: 160 },
|
||||
{ title: '必填', dataIndex: 'required', width: 70 },
|
||||
];
|
||||
|
||||
async function handleShowDingSchema(record: Recordable) {
|
||||
schemaVisible.value = true;
|
||||
schemaLoading.value = true;
|
||||
schemaData.value = null;
|
||||
try {
|
||||
schemaData.value = await getTemplateDetail(record.id);
|
||||
} catch (e: any) {
|
||||
createMessage.error(e?.message || '获取模板字段失败');
|
||||
schemaVisible.value = false;
|
||||
} finally {
|
||||
schemaLoading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
// ===== 从钉钉同步 =====
|
||||
const syncVisible = ref(false);
|
||||
const syncLoading = ref(false);
|
||||
const importLoading = ref(false);
|
||||
const syncList = ref<any[]>([]);
|
||||
const syncSelectedKeys = ref<string[]>([]);
|
||||
|
||||
const syncColumns = [
|
||||
{ title: '模板名称', dataIndex: 'name', width: 200 },
|
||||
{ title: 'processCode', dataIndex: 'processCode', width: 300 },
|
||||
{ title: '描述', dataIndex: 'description', ellipsis: true },
|
||||
{ title: '状态', dataIndex: 'imported', width: 90 },
|
||||
];
|
||||
|
||||
async function handleSyncFromDingtalk() {
|
||||
syncVisible.value = true;
|
||||
syncLoading.value = true;
|
||||
syncList.value = [];
|
||||
syncSelectedKeys.value = [];
|
||||
try {
|
||||
const data = await syncFromDingtalk();
|
||||
syncList.value = data || [];
|
||||
syncSelectedKeys.value = (syncList.value as any[]).filter((r) => !r.imported).map((r) => r.processCode);
|
||||
} catch (e: any) {
|
||||
createMessage.error(e?.message || '从钉钉同步失败');
|
||||
syncVisible.value = false;
|
||||
} finally {
|
||||
syncLoading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
function onSyncSelectChange(keys: string[]) {
|
||||
syncSelectedKeys.value = keys;
|
||||
}
|
||||
|
||||
async function handleBatchImport() {
|
||||
if (syncSelectedKeys.value.length === 0) {
|
||||
createMessage.warning('请勾选要导入的模板');
|
||||
return;
|
||||
}
|
||||
const selected = syncList.value.filter((r) => syncSelectedKeys.value.includes(r.processCode));
|
||||
importLoading.value = true;
|
||||
try {
|
||||
const msg = await batchImport(selected);
|
||||
createMessage.success(typeof msg === 'string' ? msg : '导入成功');
|
||||
syncVisible.value = false;
|
||||
reload();
|
||||
} catch (e: any) {
|
||||
createMessage.error(e?.message || '批量导入失败');
|
||||
} finally {
|
||||
importLoading.value = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
:deep(.ant-picker-range) {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user