update 报表管理

src/views/atomViews/ListViewWithHead.vue

@@ -300,6 +300,47 @@ export default {
               });
             });
         }
+        case "change-category": {
+          return this.$http.put(this.urls.base, data).then(({ data: res }) => {
+            if (res.code === 0) {
+              this.$message({
+                message: "修改成功",
+                type: "success",
+                duration: 1500,
+                onClose: () => {
+                  this.getList();
+                },
+              });
+            } else {
+              this.$message({
+                message: `${res.code}: ${res.msg}`,
+                type: "error",
+                duration: 1500,
+              });
+            }
+          });
+        }
+        case "preview": {
+          console.log("[PREVIEW] data", data);
+          // report preview
+          return this.$router.push({
+            name: "pms-reportPreview",
+            query: {
+              name: data,
+            },
+          });
+        }
+        case "design": {
+          console.log("[DESIGN] data", data);
+          // report design
+          return this.$router.push({
+            name: "pms-reportDesign",
+            query: {
+              name: data,
+            },
+          });
+          break;
+        }
       }
     },
 

src/views/modules/pms/reportSheet/config copy.js

@@ -0,0 +1,181 @@
+import TableOperaionComponent from "@/components/noTemplateComponents/operationComponent";
+import switchBtn from "@/components/noTemplateComponents/switchBtn";
+import request from "@/utils/request";
+import { timeFilter } from '@/utils/filters'
+
+// 报表分类小组件
+const CategoryList = {
+  name: 'CategoryList',
+  props: {
+    injectData: {
+      type: Object,
+      required: true,
+      default: () => ({})
+    }
+  },
+  data() {
+    return { list: [], calcMaxHeight, pickedId: null }
+  },
+  mounted() {
+    console.log(this.injectData)
+    if (categoryOptions.length === 0) {
+      // 获取并缓存 categoryOptions
+      axios.get('/pms/reportSheetCategory/list').then(({ data: res }) => {
+        if (res.code === 0) {
+          console.log('[CategoryList小组件]', res.data)
+          categoryOptions = res.data
+        } else {
+          categoryOptions.splice(0)
+        }
+      })
+    } else {
+      this.list = categoryOptions
+    }
+
+    this.pickedId = this.injectData[this.injectData.head.prop]
+  },
+  methods: {
+    // destroy dialog
+    handleDestroyDialog() {
+      setTimeout(() => {
+        this.addOrUpdateVisible = false
+      }, /** after dialog animated */ 200);
+    },
+    handleChange(id) {
+      this.pickedId = id
+      this.$emit('emit-data', {
+        type: 'change-category',
+        data: { id: this.injectData.id, fileName: this.injectData.fileName, name: this.injectData.name, url: this.injectData.url, categoryId: id }
+      })
+    }
+  },
+  render: function (h) {
+    const childOptions = []
+    this.injectData.head.options?.forEach(item => {
+      console.log('【报表分类】', item.value)
+      childOptions.push(h('el-option', { props: { label: item.label, value: item.value } }, null))
+    })
+    return h('el-select', { props: { value: this.pickedId }, on: { change: this.handleChange } }, childOptions)
+  }
+}
+
+export default async function () {
+  const categoryList = (await this.$http.get('/pms/reportSheetCategory/list'))?.data?.data
+
+
+  if (Array.isArray(categoryList)) {
+    console.log('category ====> ', categoryList)
+    const tableProps = [
+      { type: 'index', label: '序号' },
+      { prop: "createTime", label: "添加时间", width: 180, filter: timeFilter },
+      { prop: "fileName", label: "报表名称" },
+      { prop: "category", label: "报表分类", subcomponent: CategoryList, options: categoryList },
+      {
+        prop: "operations",
+        name: "操作",
+        fixed: "right",
+        width: 120,
+        subcomponent: TableOperaionComponent,
+        options: ["edit", { name: "delete", emitFull: true, permission: "pms:productionLine:delete" }],
+      },
+    ];
+
+    const headFormFields = [
+      {
+        prop: 'name',
+        label: "报表名称",
+        input: true,
+        default: { value: "" },
+        bind: {
+          placeholder: '请输入报表名称'
+        }
+      },
+      {
+        button: {
+          type: "primary",
+          name: "查询",
+        },
+      },
+      {
+        button: {
+          type: "primary",
+          name: "新增",
+          permission: "pms:productionLine:save"
+        },
+        bind: {
+          plain: true,
+        }
+      },
+    ];
+
+    const dialogJustFormConfigs = {
+      form: {
+        rows: [
+          [
+            {
+              input: true,
+              label: "产线名称",
+              prop: "name",
+              rules: { required: true, message: "必填项不能为空", trigger: "blur" },
+              elparams: { placeholder: "请输入产线名称" },
+            },
+            {
+              input: true,
+              label: "产线编码",
+              prop: "code",
+              rules: { required: true, message: "必填项不能为空", trigger: "blur" },
+              elparams: { placeholder: "请输入产线编码" },
+            },
+            {
+              select: true,
+              label: "所属工厂",
+              prop: "factoryId",
+              fetchData: () => this.$http.get("/pms/factory/page", { params: { limit: 999, page: 1 } }),
+              option: [],
+              rules: { required: true, message: "必填项不能为空", trigger: "change" },
+            },
+          ],
+          // [
+          // {
+          //   input: true,
+          //   label: "产线TT值",
+          //   prop: "tvalue",
+          //   rules: [
+          //     { required: true, message: "必填项不能为空", trigger: "blur" },
+          //     { type: "number", message: "数字", trigger: "blur", transform: (val) => Number(val) },
+          //   ],
+          //   elparams: { placeholder: "设定TT值（每小时下片数量）" },
+          // },
+          // ],
+          [{ textarea: true, label: "描述信息", prop: "description", elparams: { placeholder: "描述信息" } }],
+          [{ input: true, label: "备注", prop: "remark", elparams: { placeholder: "备注" } }],
+        ],
+        operations: [
+          { name: "add", label: "保存", type: "primary", permission: "pms:productionLine:save", showOnEdit: false },
+          { name: "update", label: "更新", type: "primary", permission: "pms:productionLine:update", showOnEdit: true },
+          { name: "reset", label: "重置", type: "warning", showAlways: true },
+          // { name: 'cancel', label: '取消', showAlways: true },
+        ],
+      },
+    };
+
+    return {
+      dialogConfigs: dialogJustFormConfigs,
+      tableConfig: {
+        table: null, column: tableProps
+      },
+      headFormConfigs: {
+        rules: null,
+        fields: headFormFields
+      },
+      urls: {
+        base: "/pms/reportSheet",
+        page: "/pms/reportSheet/page",
+        // subase: '/pms/blenderStepParam',
+        // subpage: '/pms/blenderStepParam/page',
+        // more...
+      }
+    }
+  }
+
+};

src/views/modules/pms/reportSheet/config.js

@@ -1,128 +1,135 @@
 import TableOperaionComponent from "@/components/noTemplateComponents/operationComponent";
 import switchBtn from "@/components/noTemplateComponents/switchBtn";
 import request from "@/utils/request";
-import { timeFilter } from '@/utils/filters'
+import { timeFilter } from "@/utils/filters";
+
+// 报表分类小组件
+const CategoryList = {
+  name: "CategoryList",
+  props: {
+    injectData: {
+      type: Object,
+      required: true,
+      default: () => ({}),
+    },
+  },
+  data() {
+    return { pickedId: null };
+  },
+  mounted() {
+    // console.log(this.injectData)
+    this.pickedId = this.injectData[this.injectData.head.prop];
+  },
+  methods: {
+    handleChange(id) {
+      this.pickedId = id;
+      this.$emit("emit-data", {
+        type: "change-category",
+        data: { id: this.injectData.id, fileName: this.injectData.fileName, name: this.injectData.name, url: this.injectData.url, category: id },
+      });
+    },
+  },
+  render: function (h) {
+    const childOptions = [];
+    this.injectData.head.options?.forEach((item) => {
+      // console.log('【报表分类】', item.value)
+      childOptions.push(h("el-option", { props: { label: item.label, value: item.value } }, null));
+    });
+    return h("el-select", { props: { value: this.pickedId }, on: { change: this.handleChange } }, childOptions);
+  },
+};
+
+export async function fetchCategoryList() {
+  const categoryList = (await this.$http.get("/pms/reportSheetCategory/list"))?.data?.data;
+  if (Array.isArray(categoryList)) {
+    return categoryList;
+  }
+}
 
 export default function () {
   const tableProps = [
-    { type: 'index', label: '序号' },
-    { prop: "createTime", label: "添加时间", filter: timeFilter },
-    { prop: "name", label: "报表名称" },
-    { prop: "code", label: "报表分类" },
-    // { prop: "factory", label: "所属工厂" },
-    // { prop: "status", label: "产线状态", subcomponent: switchBtn }, // subcomponent
-    // TODO: 2023.2.3 产线状态切换功能不生效
-    // { prop: "tvalue", label: "每小时下片数量" },
-    // { prop: "description", label: "描述" },
-    // { prop: "remark", label: "备注" },
+    { type: "index", label: "序号" },
+    { prop: "createTime", label: "添加时间", width: 180, filter: timeFilter },
+    { prop: "fileName", label: "报表名称" },
+    { prop: "category", label: "报表分类", subcomponent: CategoryList, options: [] },
     {
       prop: "operations",
       name: "操作",
       fixed: "right",
-      width: 120,
+      width: 240,
       subcomponent: TableOperaionComponent,
-      options: ["edit", { name: "delete", emitFull: true, permission: "pms:productionLine:delete" }],
+      options: [
+        { name: "preview", permission: "pms:reportSheet:preview" },
+        { name: "design", permission: "pms:reportSheet:design" },
+        "edit",
+        { name: "delete", emitFull: true, permission: "pms:reportSheet:delete" },
+      ],
     },
   ];
 
   const headFormFields = [
     {
-      prop: 'key',
-      label: "产线名称/编码",
+      prop: "name",
+      label: "报表名称",
       input: true,
       default: { value: "" },
       bind: {
-        placeholder: '请输入产线名称或编码'
-      }
-    },
-    {
-      button: {
-        type: "primary",
-        name: "查询",
+        placeholder: "请输入报表名称",
       },
     },
     {
       button: {
         type: "primary",
-        name: "新增",
-        permission: "pms:productionLine:save"
+        name: "查询",
       },
-      bind: {
-        plain: true,
-      }
     },
+    // {
+    //   button: {
+    //     type: "primary",
+    //     name: "新增",
+    //     permission: "pms:productionLine:save"
+    //   },
+    //   bind: {
+    //     plain: true,
+    //   }
+    // },
   ];
 
-  /**
-   * dialog config 有两个版本，一个适用于 DialogWithMenu 组件，另一个适用于 DialogJustForm 组件
-   * 适用于 DialogWithMenu 组件的配置示例详见 blenderStep/config.js
-   * 此为后者的配置:
-   */
   const dialogJustFormConfigs = {
     form: {
       rows: [
         [
           {
             input: true,
-            label: "产线名称",
-            prop: "name",
+            label: "报表名称",
+            prop: "fileName",
             rules: { required: true, message: "必填项不能为空", trigger: "blur" },
-            elparams: { placeholder: "请输入产线名称" },
-          },
-          {
-            input: true,
-            label: "产线编码",
-            prop: "code",
-            rules: { required: true, message: "必填项不能为空", trigger: "blur" },
-            elparams: { placeholder: "请输入产线编码" },
-          },
-          {
-            select: true,
-            label: "所属工厂",
-            prop: "factoryId",
-            fetchData: () => this.$http.get("/pms/factory/page", { params: { limit: 999, page: 1 } }),
-            option: [],
-            rules: { required: true, message: "必填项不能为空", trigger: "change" },
+            elparams: { placeholder: "请输入报表名称" },
           },
         ],
-        // [
-          // {
-          //   input: true,
-          //   label: "产线TT值",
-          //   prop: "tvalue",
-          //   rules: [
-          //     { required: true, message: "必填项不能为空", trigger: "blur" },
-          //     { type: "number", message: "数字", trigger: "blur", transform: (val) => Number(val) },
-          //   ],
-          //   elparams: { placeholder: "设定TT值（每小时下片数量）" },
-          // },
-        // ],
-        [{ textarea: true, label: "描述信息", prop: "description", elparams: { placeholder: "描述信息" } }],
-        [{ input: true, label: "备注", prop: "remark", elparams: { placeholder: "备注" } }],
       ],
       operations: [
-        { name: "add", label: "保存", type: "primary", permission: "pms:productionLine:save", showOnEdit: false },
-        { name: "update", label: "更新", type: "primary", permission: "pms:productionLine:update", showOnEdit: true },
-        { name: "reset", label: "重置", type: "warning", showAlways: true },
+        { name: "add", label: "保存", type: "primary", permission: "pms:reportSheet:save", showOnEdit: false },
+        { name: "update", label: "修改", type: "primary", permission: "pms:reportSheet:update", showOnEdit: true },
+        // { name: "reset", label: "重置", type: "warning", showAlways: true },
         // { name: 'cancel', label: '取消', showAlways: true },
       ],
     },
   };
-  // 备注：弹窗弹出的时间和网速有关......
 
   return {
     dialogConfigs: dialogJustFormConfigs,
     tableConfig: {
-      table: null, // 此处可省略，el-table 上的配置项
-      column: tableProps, // el-column-item 上的配置项
+      table: null,
+      column: tableProps,
     },
     headFormConfigs: {
-      rules: null, // 名称是由 BaseSearchForm.vue 组件固定的
-      fields: headFormFields, // 名称是由 BaseSearchForm.vue 组件固定的
+      rules: null,
+      fields: headFormFields,
     },
     urls: {
-      base: "/pms/productionLine",
-      page: "/pms/productionLine/page",
+      base: "/pms/reportSheet",
+      page: "/pms/reportSheet/page",
       // subase: '/pms/blenderStepParam',
       // subpage: '/pms/blenderStepParam/page',
       // more...

src/views/modules/pms/reportSheet/index.vue

@@ -1,31 +1,50 @@
 <template>
-	<ListViewWithHead :table-config="tableConfig" :head-config="headFormConfigs" :dialog-configs="dialogConfigs" />
+  <ListViewWithHead :table-config="tableConfig" :head-config="headFormConfigs" :dialog-configs="dialogConfigs" />
 </template>
 
 <script>
-import initConfig from './config';
-import ListViewWithHead from '@/views/atomViews/ListViewWithHead.vue';
+import initConfig, { fetchCategoryList } from "./config";
+import ListViewWithHead from "@/views/atomViews/ListViewWithHead.vue";
 
 export default {
-	name: 'ReportSheetView',
-	components: { ListViewWithHead },
-	provide() {
-		return {
-			urls: this.allUrls
-		}
-	},
-	data() {
-		const { tableConfig, headFormConfigs, urls, dialogConfigs } = initConfig.call(this);
-		return {
-			tableConfig,
-			headFormConfigs,
-			allUrls: urls,
-			dialogConfigs,
-		};
-	},
-	created() {},
-	mounted() {},
-	methods: {},
+  name: "ReportSheetView",
+  components: { ListViewWithHead },
+  provide() {
+    return {
+      urls: this.allUrls,
+    };
+  },
+  data() {
+    const { tableConfig, headFormConfigs, urls: allUrls, dialogConfigs } = initConfig.call(this);
+    return {
+      tableConfig,
+      headFormConfigs,
+      allUrls,
+      dialogConfigs,
+    };
+  },
+  created() {},
+  mounted() {
+    // initConfig.call(this).then(({ tableConfig, headFormConfigs, urls, dialogConfigs }) => {
+    //   this.tableConfig = tableConfig;
+    // 	this.headFormConfigs = headFormConfigs;
+    // 	this.allUrls = urls;
+    // 	this.dialogConfigs = dialogConfigs
+    // });
+    fetchCategoryList.call(this).then((categoryList) => {
+      console.log("[fetchCategoryList() then...]");
+      if ("column" in this.tableConfig) {
+        const categoryProp = this.tableConfig.column.find((item) => item.prop === "category");
+        this.$set(
+          categoryProp,
+          "options",
+          categoryList.map((item) => ({ label: item.name, value: item.id }))
+        );
+        console.log("[报表, 设置options成功..]", categoryProp);
+      }
+    });
+  },
+  methods: {},
 };
 </script>