软件工程应用于实践：AJ-Report项目源码分析（3）

最新推荐文章于 2024-09-20 19:53:34 发布

qq_51460830

最新推荐文章于 2024-09-20 19:53:34 发布

阅读量404

点赞数

文章标签： vue.js 前端 css

本文链接：https://blog.csdn.net/qq_51460830/article/details/122031007

版权

本文深入分析了AJ-Report项目的前端代码，特别是report-uisrcviews eport eportindex.vue组件。内容涵盖菜单标题、输入框样式、查询条件、操作按钮布局、表格列定义、报表编码逻辑以及样式定义。此外，还详细解释了状态与删除标记的字典映射，颜色风格配置，并讨论了报表略缩图生成以及弹窗表单的修改和交互过程，包括预览、设计和分享功能。

摘要由CSDN通过智能技术生成

2021SC@SDUSC

本次分析的是report-ui\src\views\report\report中index.vue中的代码：

 return {
      visibleForShareDialog: false,
      reportCodeForShareDialog: "",
      reportNameForShareDialog: "",
      crudOption: {
        title: "报表管理",
        labelWidth: "120px",
        queryFormFields: [
          {
            inputType: "input",
            label: "报表名称",
            field: "reportName"
          },
          {
            inputType: "input",
            label: "报表编码",
            field: "reportCode"
          }
        ],
        buttons: {
          query: {
            api: reportList,
            permission: "reportManage:query",
            sort: 'update_time',
            order: 'DESC'
          },
          queryByPrimarykey: {
            api: reportDetail,
            permission: "reportManage:detail"
          },
          add: {
            api: reportAdd,
            permission: "reportManage:insert"
          },
          delete: {
            api: reportDeleteBatch,
            permission: "reportManage:delete"
          },
          edit: {
            api: reportUpdate,
            permission: "reportManage:update"
          },
          customButton: {
            operationWidth: "150px"