qhmes/jeecgboot-vue3/src/views/xslmes/dingtalk/mesXslDingProcessTpl/MesXslDingProcessTplList.vue

<template>
  <div>
    <BasicTable @register="registerTable" :rowSelection="rowSelection">
      <template #tableTitle>
        <!--update-begin---author:GHT ---date:2026-06-04 for：【MESToDing审批配置】新增审批模板（创建草稿+打开设计器）-->
        <a-button
          type="primary"
          v-auth="'xslmes:mes_xsl_ding_process_tpl:add'"
          preIcon="ant-design:dingtalk-outlined"
          @click="handleAddNewTemplate"
        >
          新增审批模板
        </a-button>
        <!--update-end---author:GHT ---date:2026-06-04 for：【MESToDing审批配置】新增审批模板（创建草稿+打开设计器）-->
        <a-button 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" />
    <DingTplCreateModal ref="createModalRef" @success="onNewTemplateCreated" />
    <!--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 v-if="record.linkDraft" color="orange">待回填本地</a-tag>
              <a-tag v-else :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';
  import DingTplCreateModal from './components/DingTplCreateModal.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 });
  }

  const createModalRef = ref();

  function handleAddNewTemplate() {
    createModalRef.value?.open();
  }

  function onNewTemplateCreated({ record, openDesigner }: { record: Recordable; openDesigner: boolean }) {
    reload();
    if (openDesigner && record?.id) {
      designerRef.value?.open(record);
    }
  }

  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) {
    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({
        label: '创建钉钉模板',
        icon: 'ant-design:dingtalk-outlined',
        onClick: handleDesignTemplate.bind(null, record),
        auth: 'xslmes:mes_xsl_ding_process_tpl:edit',
      });
    }
    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' },
        auth: 'xslmes:mes_xsl_ding_process_tpl:delete',
      },
    );
    return actions;
  }

  // ===== 手动填表发起钉钉审批 =====
  //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 || r.linkDraft)
        .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>