详情

康鲁杰

14 小时以前 ada17365b68c274a23546ca7ef875884a9a1ac73

详情

 ruoyi-ui/apps/web-antd/src/views/tool/template/index.vue

@@ -12,6 +12,7 @@
      </template>
      <template #action="{ row }">
        <Space>
          <ghost-button v-if="showAction('query')" @click="handleQuery(row)">详情</ghost-button>
          <ghost-button v-if="showAction('edit')" @click="handleEdit(row)">编辑</ghost-button>
          <Popconfirm v-if="showAction('delete')" :get-popup-container="getVxePopupContainer" placement="left" title="确认删除？" @confirm="handleDelete(row)">
            <ghost-button danger @click.stop="">删除</ghost-button>
@@ -20,6 +21,16 @@
      </template>
    </BasicTable>
    <TemplateDrawer ref="templateModalRef" @reload="tableApi.query()" />
    <a-modal v-model:open="detailModalVisible" title="详情" :footer="null" width="600px">
      <a-descriptions bordered column="1">
        <a-descriptions-item v-for="item in formDataFields" :key="item.key" :label="formFieldTitleMap[item.key] || item.key">
          <span>{{ item.value }}</span>
        </a-descriptions-item>
        <a-descriptions-item label="创建时间">
          <span>{{ createTime }}</span>
        </a-descriptions-item>
      </a-descriptions>
    </a-modal>
  </Page>
  <Fallback v-else description="未指定 pageId，无法访问此页面" status="403" />
</template>
@@ -36,7 +47,7 @@
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { columns as baseColumns, querySchema } from './data';
import TemplateDrawer from './template-drawer.vue';
import { templateList, templateRemove } from '#/api/tool/template';
import { templateList, templateRemove, templateInfo } from '#/api/tool/template';
import { pageInfo } from '#/api/tool/page-designer';

const route = useRoute();
@@ -44,6 +55,10 @@
const pageId = ref<string | number>('');
const pageDesignDetail = ref<any>(null); // 页面设计详情
const loading = ref(true); // 加载中
const detailModalVisible = ref(false);
const detailRecord = ref({});
const formDataFields = ref([]);
const createTime = ref('');

// 动态columns
const dynamicColumns = ref([
@@ -198,16 +213,16 @@
  }
}

const formOptions: VbenFormProps = {
  commonConfig: {
    labelWidth: 80,
    componentProps: {
      allowClear: true,
    },
  },
  schema: querySchema(),
  wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
};
// const formOptions: VbenFormProps = {
//   commonConfig: {
//     labelWidth: 80,
//     componentProps: {
//       allowClear: true,
//     },
//   },
//   schema: querySchema(),
//   wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
// };

const gridOptions = ref<VxeGridProps>({
  columns: dynamicColumns.value,
@@ -273,7 +288,7 @@
});

const [BasicTable, tableApi] = useVbenVxeGrid({
  formOptions,
  // formOptions,
  gridOptions: computed(() => ({
    ...gridOptions.value,
    columns: dynamicColumns.value
@@ -334,21 +349,28 @@
  }
}

function handleGenerate(row) {
async function handleQuery(row) {
  try {
    generateModalRef.value.open(row);
  } catch (error) {
    console.error('打开生成页面失败:', error);
    const detail = await templateInfo(row.id);
    detailRecord.value = detail || {};
    createTime.value = detail.createTime || '';
    // 解析 formData
    let fields = [];
    if (detail.formData) {
      try {
        const data = JSON.parse(detail.formData);
        fields = Object.entries(data).map(([key, value]) => ({ key, value }));
      } catch (e) {
        fields = [];
  }
}

function handlePreview(row) {
  try {
    // 打开预览窗口
    const url = `/tool/template/preview/${row.id}`;
    window.open(url, '_blank');
  } catch (error) {
    console.error('打开预览失败:', error);
    formDataFields.value = fields;
    detailModalVisible.value = true;
  } catch (e) {
    detailRecord.value = {};
    formDataFields.value = [];
    createTime.value = '';
    detailModalVisible.value = true;
  }
}

@@ -371,6 +393,19 @@
    return false;
  }
});

const formFieldTitleMap = computed(() => {
  try {
    if (pageDesignDetail.value && pageDesignDetail.value.formJson) {
      const arr = JSON.parse(pageDesignDetail.value.formJson);
      return arr.reduce((map, item) => {
        map[item.field] = item.title || item.field;
        return map;
      }, {});
    }
  } catch (e) {}
  return {};
});
</script>

<style scoped>
@@ -384,7 +419,7 @@

/* 确保表格容器高度稳定 */
:deep(.vxe-table--main-wrapper) {
  height: 600px !important;
  height: 690px !important;
}

/* 确保分页器位置固定 */