1. 数据管理（报告配置，报表配置）添加模板，编辑模板弹窗，添加，编辑，删除等功能；2. 服务管理路由修改

src/api/data/template.js

@@ -1,4 +1,4 @@
-import { get, post, put } from "@/utils/requestMethod";
+import { get, post, put, del } from "@/utils/requestMethod";
 
 /**
  * 获取报表列表
@@ -16,35 +16,27 @@ const getTableTemplateList = (
   template_name = "",
   template_format = ""
 ) => {
-  return get(`/data/template_list?page=${page}&page_size=${page_size}&template_type=${template_type}&templat_name=${templat_name}&template_format=${template_format}`);
+  return get(`/data/template_list?page=${page}&page_size=${page_size}&template_type=${template_type}&template_name=${template_name}&template_format=${template_format}`);
 };
 
 /**
- * 添加报表模板
- * @param {*} options 
+ * 添加报表报告模板
+ * @param {*} options
  */
-const addTableTemplate = (options) =>{
-  let params = new FormData()
-  params.append("template_type",0)
-  options.templatName!=="" && params.append("template_name",options.templatName)
-  options.templateFormat!=="" && params.append("template_format",options.templateFormat)
-  options.intro!=="" && params.append("introduction",options.intro)
-  return post("/data/template",params)
-}
-
-/**
- * 添加报告模板
- * @param {*} options 
- */
-const addReportTemplate = (options) =>{
-  let params = new FormData()
-  params.append("template_type",0)
-  options.templatName!=="" && params.append("template_name",options.templatName)
-  options.templateFormat!=="" && params.append("template_format",options.templateFormat)
-  options.reportType !=="" && params.append("report_type",options.reportType)
-  options.intro!=="" && params.append("introduction",options.intro)
-  return post("/data/template",params)
-}
+const addReportTemplate = (options) => {
+  let params = new FormData();
+  params.append("template_type", options.templateType);
+  options.templateName !== "" &&
+    params.append("template_name", options.templateName);
+  options.templateFormat !== "" &&
+    params.append("template_format", options.templateFormat);
+  options.introduction !== "" &&
+    params.append("introduction", options.introduction);
+  if (options.templateType === 1 && options.reportType !== "") {
+    params.append("report_type", options.reportType);
+  }
+  return post("/data/template", params);
+};
 
 /**
  * 获取报告列表
@@ -68,4 +60,55 @@ const getReportTemplateList = (
   );
 };
 
-export { getTableTemplateList, getReportTemplateList };
+/**
+ * 删除单个模板
+ * @param {*} id
+ * @returns
+ */
+const deleteSingleTemplate = (id) => {
+  let params = new FormData();
+  params.append("template_id", id);
+  return del("/data/template", params);
+};
+
+/**
+ * 修改模板
+ * @param {*} options
+ */
+const modifySingleTemplate = (options) => {
+  let params = new FormData();
+  params.append("template_type", options.templateType);
+  options.id !== "" && params.append("template_id", options.id);
+  options.templateName !== "" &&
+    params.append("template_name", options.templateName);
+  options.templateFormat !== "" &&
+    params.append("template_format", options.templateFormat);
+  options.introduction !== "" &&
+    params.append("introduction", options.introduction);
+  // options.file !== "" &&
+  // params.append("template_file", options.file);
+  if (options.templateType === 1 && options.reportType !== "") {
+    params.append("report_type", options.reportType);
+  }
+  return put("/data/template", params);
+};
+
+/**
+ * 删除多个模板
+ * @param {*} templateIds
+ */
+const deleteMultipleTemplates = (templateIds) => {
+  let params = new FormData();
+  params.append("template_ids", templateIds);
+  return del("/data/batch_delete_template", params);
+};
+
+export {
+  // addReportTemplate,
+  addReportTemplate,
+  getTableTemplateList,
+  getReportTemplateList,
+  modifySingleTemplate,
+  deleteSingleTemplate,
+  deleteMultipleTemplates,
+};

src/components/pagination/index.vue

@@ -1,16 +1,16 @@
 <template>
-    <el-pagination
-      background
-      layout="total, prev, pager, next, sizes, jumper"
-      :page-size="paginationData.pageSize"
-      :page-sizes="paginationData.pageSizes"
-      :pager-count="paginationData.pagerCount"
-      :total="paginationData.total"
-      :current-page="paginationData.currentPage"
-      @current-change="paginationData.currentChange"
-      @size-change="paginationData.handleSizeChange"
-    ></el-pagination>
-  </template>
+  <el-pagination
+    background
+    layout="total, prev, pager, next, sizes, jumper"
+    :page-size="paginationData.pageSize"
+    :page-sizes="paginationData.pageSizes"
+    :pager-count="paginationData.pagerCount"
+    :total="paginationData.total"
+    :current-page="paginationData.currentPage"
+    @current-change="paginationData.currentChange"
+    @size-change="paginationData.handleSizeChange"
+  ></el-pagination>
+</template>
 
 <script>
 /**
@@ -25,7 +25,7 @@
 export default {
   name: "page",
   props: ["paginationData"],
-  methods: {}
+  methods: {},
 };
 </script>
 
@@ -34,11 +34,11 @@ export default {
   position: absolute;
   width: 200px;
   top: 10px;
-  right: 350px;
+  right: 400px;
 
   /deep/.el-pager li:not(.disabled).active {
-    background-color: #2EA8E6 ;
-}
+    background-color: #2ea8e6;
+  }
 
   /deep/.el-pagination__jump {
     margin-left: 0;
@@ -54,7 +54,7 @@ export default {
 
   /deep/ .el-pager li {
     border-radius: 5px;
-    background: rgba(99, 165, 164, 0.1) ;
+    background: rgba(99, 165, 164, 0.1);
   }
 }
 </style>

src/main.js

@@ -21,4 +21,8 @@ new Vue({
   router,
   store,
   render: (h) => h(App),
+  // 全局事件总线
+  beforeCreate() {
+    Vue.prototype.$bus = this;
+  },
 }).$mount("#app");

src/router/index.js

@@ -130,27 +130,27 @@ const routes = [
         path: 'service',
         name: 'service',
         meta: { requrieAuth: true },
-        component: () => import('../views/servicesManagement/index.vue'),
-        children: [
-          {
-            path: 'all',
-            name: 'allServices',
-            meta: { requrieAuth: true },
-            component: () => import('../views/servicesManagement/allServices.vue'),
-          },
-          {
-            path: 'installed',
-            name: 'installed',
-            meta: { requrieAuth: true },
-            component: () => import('../views/servicesManagement/allServices.vue'),
-          },
-          {
-            path: 'uninstall',
-            name: 'uninstall',
-            meta: { requrieAuth: true },
-            component: () => import('../views/servicesManagement/allServices.vue'),
-          }
-        ]
+        component: () => import('../views/servicesManagement/allServices.vue'),
+        // children: [
+        //   {
+        //     path: 'all',
+        //     name: 'allServices',
+        //     meta: { requrieAuth: true },
+        //     component: () => import('../views/servicesManagement/allServices.vue'),
+        //   },
+        //   {
+        //     path: 'installed',
+        //     name: 'installed',
+        //     meta: { requrieAuth: true },
+        //     component: () => import('../views/servicesManagement/allServices.vue'),
+        //   },
+        //   {
+        //     path: 'uninstall',
+        //     name: 'uninstall',
+        //     meta: { requrieAuth: true },
+        //     component: () => import('../views/servicesManagement/allServices.vue'),
+        //   }
+        // ]
       },
       {
         path: 'security',

src/utils/requestMethod.js

@@ -42,13 +42,14 @@ function post(url, data) {
 
 function put(url, data) {
   return new Promise((resolve, reject) => {
-    service({
+    request({
       method: "PUT",
       url,
       data: data,
       headers: {
         token: user.state.token,
-        "Content-Type": "application/json;",
+        "Content-Type": "multipart/form-data;",
+        // "Content-Type": "application/json;",
       },
     })
       .then((res) => {
@@ -68,7 +69,8 @@ function del(url, data) {
       data: data,
       headers: {
         token: user.state.token,
-        "Content-Type": "application/json;",
+        "Content-Type": "multipart/form-data;",
+        // "Content-Type": "application/json;",
       },
     })
       .then((res) => {
@@ -103,5 +105,6 @@ function delform(url, data) {
 export {
   get,
   post,
-  put
+  put,
+  del
 }

src/views/dataManagement/reportConfig.vue

@@ -1,5 +1,11 @@
 <template>
   <div class="container">
+    <templatePopup
+      ref="popupRef"
+      :templateTitle="templateTitle"
+      :templateType="templateType"
+      @confirmEvent="confirmEvent"
+    />
     <div class="header">
       <el-form label-width="120px">
         <div style="display: flex; padding: 10px">
@@ -42,8 +48,8 @@
     <div class="content">
       <div class="content-inner-top">
         <div class="info">模板列表</div>
-        <el-button class="add-btn">添加模板</el-button>
-        <el-button class="delete-btn">批量删除</el-button>
+        <el-button class="add-btn" @click="addTemplate">添加模板</el-button>
+        <el-button class="delete-btn" @click="batchDelete">批量删除</el-button>
       </div>
       <el-table
         ref="multipleTable"
@@ -70,13 +76,15 @@
               size="mini"
               type="text"
               style="color: #2ea8e6"
-              >查看</el-button
+              @click="downloadTemplate(scope.row.templateUrl)"
+              ><a :href="scope.row.templateUrl" download>点击下载</a></el-button
             >
             <el-button
               v-show="scope.row.templateName == null ? false : true"
               size="mini"
               type="text"
               style="color: #2ea8e6"
+              @click="editTemplate(scope.row)"
               >编辑</el-button
             >
             <el-button
@@ -84,6 +92,7 @@
               size="mini"
               type="text"
               style="color: #2ea8e6"
+              @click="deleteTemplate(scope.row)"
               >删除</el-button
             >
           </template>
@@ -97,14 +106,22 @@
 </template>
 
 <script>
-import checkbox from "@/components/Checkbox/index";
 import page from "@/components/pagination/index";
+import templatePopup from "@/views/dataManagement/templatePopup";
+import {
+  addReportTemplate,
+  getReportTemplateList,
+  modifySingleTemplate,
+  deleteSingleTemplate,
+  deleteMultipleTemplates,
+} from "@/api/data/template";
+
 export default {
-  components: { checkbox, page },
+  components: { page, templatePopup },
   data() {
     return {
-      input: "",
-      show: true,
+      templateTitle: "",
+      templateType: "报告",
       form: {
         templateName: "",
         templateFormat: "",
@@ -146,29 +163,7 @@ export default {
           label: "月度报告",
         },
       ],
-      tableData: [
-        {
-          templateName: "模板1",
-          templateFormat: "txt",
-          createUser: "test",
-          createTime: "2023-01-01 00:00",
-          alterTime: "2023-01-01 00:00",
-        },
-        {
-          templateName: "模板1",
-          templateFormat: "txt",
-          createUser: "test",
-          createTime: "2023-01-01 00:00",
-          alterTime: "2023-01-01 00:00",
-        },
-        {
-          templateName: "模板1",
-          templateFormat: "txt",
-          createUser: "test",
-          createTime: "2023-01-01 00:00",
-          alterTime: "2023-01-01 00:00",
-        },
-      ],
+      tableData: [],
       defaultProps: {
         children: "children",
         label: "label",
@@ -207,8 +202,41 @@ export default {
       if (!value) return true;
       return data.label.indexOf(value) !== -1;
     },
-    getTableData(val) {},
-    handleSizeChange(val) {},
+    downloadTemplate(url) {
+      console.log(url, "url");
+    },
+    getTableData(val) {
+      this.tableData = [];
+      getReportTemplateList(
+        val,
+        this.currentPageSize,
+        1,
+        this.form.templateName,
+        this.form.templateFormat,
+        this.form.reportType
+      ).then((res) => {
+        if (res.data.code === 0 && res.data.data.length > 0) {
+          this.paginationData.total = res.data.total;
+          this.tableData = res.data.data.map((v) => {
+            return {
+              id: v.id,
+              templateName: v.name,
+              templateFormat: v.format,
+              reportType: v.report_type || "--",
+              createUser: v.creator,
+              createTime: v.create_time,
+              alterTime: v.update_time,
+              templateUrl: v.template_url,
+              introduction: v.introduction,
+            };
+          });
+        }
+      });
+    },
+    handleSizeChange(val) {
+      this.currentPageSize = val;
+      this.getTableData(this.currentPage);
+    },
     handleSelectionChange(val) {
       this.multipleSelection = val;
     },
@@ -221,6 +249,89 @@ export default {
     searchEvent() {
       this.getTableData(this.currentPage);
     },
+    addTemplate() {
+      this.templateTitle = "添加模板";
+      this.$refs.popupRef.dialogVisible = true;
+      this.$refs.popupRef.formData.name = "";
+      this.$refs.popupRef.formData.format = "Excel";
+      this.$refs.popupRef.formData.introduction = "";
+      this.$refs.popupRef.formData.reportType = "";
+      this.$refs.popupRef.formData.templateType = 1;
+    },
+    batchDelete() {
+      if (this.multipleSelection.length > 0) {
+        let arr = this.multipleSelection.map((v) => {
+          return v.id;
+        });
+        deleteMultipleTemplates(JSON.stringify(arr)).then((res) => {
+          if (res.data.code === 0) {
+            this.$message.success("选中模板已删除!");
+            this.getTableData(1);
+          }
+        });
+      } else {
+        this.$message.info("暂无需要删除的模板");
+      }
+    },
+    editTemplate(data) {
+      this.templateTitle = "编辑模板";
+      this.$refs.popupRef.dialogVisible = true;
+      this.$refs.popupRef.formData.id = data.id;
+      this.$refs.popupRef.formData.templateType = 1;
+      this.$refs.popupRef.formData.name = data.templateName;
+      this.$refs.popupRef.formData.format = data.templateFormat;
+      this.$refs.popupRef.formData.introduction = data.introduction;
+    },
+    deleteTemplate(data) {
+      deleteSingleTemplate(data.id).then((res) => {
+        if (res.data.code === 0) {
+          this.$message.success("模板已删除!");
+          this.getTableData(1);
+        }
+      });
+    },
+    confirmEvent(data) {
+      console.log(data, "传回的模板参数");
+      if (this.templateTitle === "添加模板") {
+        let options = {
+          templateName: data.name,
+          templateFormat: data.format,
+          introduction: data.introduction,
+          reportType: data.reportType,
+          templateType: 1,
+        };
+        addReportTemplate(options).then((res) => {
+          if (res.data.code === -1) {
+            this.$message.info("模板已存在，请修改重新添加!");
+          }
+          if (res.data.code === 0) {
+            this.$message.success("模板添加成功!");
+            this.$refs.popupRef.dialogVisible = false;
+            this.getTableData(1);
+          }
+        });
+      }
+      if (this.templateTitle === "编辑模板") {
+        let options = {
+          id:data.id,
+          templateName: data.name,
+          templateFormat: data.format,
+          introduction: data.introduction,
+          reportType: data.reportType,
+          templateType: 1,
+        };
+        modifySingleTemplate(options).then((res) => {
+          if (res.data.code === -1) {
+            this.$message.info("模板修改失败!");
+          }
+          if (res.data.code === 0) {
+            this.$message.success("模板修改成功!");
+            this.$refs.popupRef.dialogVisible = false;
+            this.getTableData(1);
+          }
+        });
+      }
+    },
   },
 };
 </script>

src/views/dataManagement/statementConfig.vue

@@ -1,5 +1,11 @@
 <template>
   <div class="container">
+    <templatePopup
+      ref="popupRef"
+      :templateTitle="templateTitle"
+      :templateType="templateType"
+      @confirmEvent="confirmEvent"
+    />
     <div class="header">
       <el-form label-width="120px">
         <div style="display: flex; padding: 10px">
@@ -32,8 +38,8 @@
     <div class="content">
       <div class="content-inner-top">
         <div class="info">模板列表</div>
-        <el-button class="add-btn">添加模板</el-button>
-        <el-button class="delete-btn">批量删除</el-button>
+        <el-button class="add-btn" @click="addTemplate">添加模板</el-button>
+        <el-button class="delete-btn" @click="batchDelete">批量删除</el-button>
       </div>
       <el-table
         ref="multipleTable"
@@ -42,6 +48,7 @@
         :header-cell-style="{ textAlign: 'center' }"
         :cell-style="{ textAlign: 'center' }"
         style="width: 100%"
+        :height="400"
         @selection-change="handleSelectionChange"
       >
         <el-table-column type="selection" width="50"> </el-table-column>
@@ -66,6 +73,7 @@
               size="mini"
               type="text"
               style="color: #2ea8e6"
+              @click="editTemplate(scope.row)"
               >编辑</el-button
             >
             <el-button
@@ -73,6 +81,7 @@
               size="mini"
               type="text"
               style="color: #2ea8e6"
+              @click="deleteTemplate(scope.row)"
               >删除</el-button
             >
           </template>
@@ -86,42 +95,26 @@
 </template>
 
 <script>
-import checkbox from "@/components/Checkbox/index";
 import page from "@/components/pagination/index";
+import templatePopup from "@/views/dataManagement/templatePopup";
+import {
+  addReportTemplate,
+  getTableTemplateList,
+  modifySingleTemplate,
+  deleteSingleTemplate,
+  deleteMultipleTemplates,
+} from "@/api/data/template";
 export default {
-  components: { checkbox, page },
+  components: { page, templatePopup },
   data() {
     return {
-      total: 0,
-      input: "",
-      show: true,
+      templateTitle: "",
+      templateType: "报表",
       form: {
         templateName: "",
         templateForm: "",
       },
-      tableData: [
-        {
-          templateName: "模板1",
-          templateForm: "txt",
-          createUser: "test",
-          createTime: "2023-01-01 00:00",
-          alterTime: "2023-01-01 00:00",
-        },
-        {
-          templateName: "模板1",
-          templateForm: "txt",
-          createUser: "test",
-          createTime: "2023-01-01 00:00",
-          alterTime: "2023-01-01 00:00",
-        },
-        {
-          templateName: "模板1",
-          templateForm: "txt",
-          createUser: "test",
-          createTime: "2023-01-01 00:00",
-          alterTime: "2023-01-01 00:00",
-        },
-      ],
+      tableData: [],
       temFormatOptions: [
         {
           value: "",
@@ -168,12 +161,46 @@ export default {
       this.$refs.search.filter(val);
     },
   },
+  mounted() {
+    this.initData();
+  },
   methods: {
     initData() {
       this.getTableData(1);
     },
-    getTableData(val) {},
-    handleSizeChange(val) {},
+    getTableData(val) {
+      this.tableData = [];
+      getTableTemplateList(
+        val,
+        this.currentPageSize,
+        0,
+        this.form.templateName,
+        this.form.templateForm
+      ).then((res) => {
+        if (res.data.code === 0 && res.data.data.length > 0) {
+          this.paginationData.total = res.data.total;
+          this.tableData = res.data.data.map((v) => {
+            return {
+              id: v.id,
+              templateName: v.name,
+              templateForm: v.format,
+              createUser: v.creator,
+              createTime: v.create_time,
+              alterTime: v.update_time,
+              templateUrl: v.template_url,
+              introduction: v.introduction,
+            };
+          });
+        }
+      });
+    },
+    downloadTemplate(url) {
+      console.log(url);
+    },
+    handleSizeChange(val) {
+      this.currentPageSize = val;
+      this.getTableData(this.currentPage);
+    },
     handleSelectionChange(val) {
       this.multipleSelection = val;
     },
@@ -189,6 +216,88 @@ export default {
     searchEvent() {
       this.getTableData(this.currentPage);
     },
+    addTemplate() {
+      this.templateTitle = "添加模板";
+      this.$refs.popupRef.dialogVisible = true;
+      this.$refs.popupRef.formData.name = "";
+      this.$refs.popupRef.formData.format = "Excel";
+      this.$refs.popupRef.formData.introduction = "";
+      this.$refs.popupRef.formData.templateType = 0;
+    },
+    batchDelete() {
+      if (this.multipleSelection.length > 0) {
+        let arr = this.multipleSelection.map((v) => {
+          return v.id;
+        });
+        deleteMultipleTemplates(JSON.stringify(arr)).then((res) => {
+          if (res.data.code === 0) {
+            this.$message.success("选中模板已删除!");
+            this.getTableData(1);
+          }
+        });
+      } else {
+        this.$message.info("暂无需要删除的模板");
+      }
+    },
+    editTemplate(data) {
+      this.templateTitle = "编辑模板";
+      this.$refs.popupRef.dialogVisible = true;
+      this.$refs.popupRef.formData.id = data.id;
+      this.$refs.popupRef.formData.templateType = 0;
+      this.$refs.popupRef.formData.name = data.templateName;
+      this.$refs.popupRef.formData.format = data.templateForm;
+      data.introduction == "null"
+        ? (this.$refs.popupRef.formData.introduction = "")
+        : (this.$refs.popupRef.formData.introduction = data.introduction);
+    },
+    deleteTemplate(data) {
+      deleteSingleTemplate(data.id).then((res) => {
+        if (res.data.code === 0) {
+          this.$message.success("模板已删除!");
+          this.getTableData(1);
+        }
+      });
+    },
+    confirmEvent(data) {
+      console.log(data, "传回的模板参数");
+      if (this.templateTitle === "添加模板") {
+        let options = {
+          templateName: data.name,
+          templateFormat: data.format,
+          introduction: data.introduction,
+          templateType: 0,
+        };
+        addReportTemplate(options).then((res) => {
+          if (res.data.code === -1) {
+            this.$message.info("模板已存在，请修改重新添加!");
+          }
+          if (res.data.code === 0) {
+            this.$message.success("模板添加成功!");
+            this.$refs.popupRef.dialogVisible = false;
+            this.getTableData(1);
+          }
+        });
+      }
+      if (this.templateTitle === "编辑模板") {
+        let options = {
+          id: data.id,
+          templateName: data.name,
+          templateFormat: data.format,
+          introduction: data.introduction,
+          templateType: 0,
+        };
+        modifySingleTemplate(options).then((res) => {
+          if (res.data.code === -1) {
+            this.$message.info("模板修改失败");
+          }
+          if (res.data.code === 0) {
+            this.$message.success("模板添加成功!");
+            this.$refs.popupRef.dialogVisible = false;
+            this.getTableData(1);
+          }
+        });
+      }
+    },
   },
 };
 </script>

src/views/dataManagement/templatePopup.vue

@@ -0,0 +1,242 @@
+<template>
+  <el-dialog
+    class="mydialog"
+    :title="templateTitle"
+    :visible.sync="dialogVisible"
+    width="500px"
+    height="60%"
+    center
+  >
+    <div class="dialog-container">
+      <div class="dialog-container-item">
+        <div class="left-box">{{ templateType }}模板名称：</div>
+        <div class="right-box">
+          <el-input style="width: 300px" v-model="formData.name"></el-input>
+        </div>
+      </div>
+      <div class="dialog-container-item">
+        <div class="left-box">{{ templateType }}模板格式：</div>
+        <div class="right-box">
+          <el-select placeholder="请选择报表模板格式" v-model="formData.format">
+            <el-option
+              v-for="item in temFormatOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            ></el-option>
+          </el-select>
+        </div>
+      </div>
+      <div class="dialog-container-item" v-if="templateType === '报告'">
+        <div class="left-box">{{ templateType }}模板类型</div>
+        <div class="right-box">
+          <el-select
+            placeholder="请选择报表模板格式"
+            v-model="formData.reportType"
+          >
+            <el-option
+              v-for="item in reportTypeOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            ></el-option>
+          </el-select>
+        </div>
+      </div>
+      <div class="dialog-container-info">
+        <div class="left-box">{{ templateType }}模板简介：</div>
+        <div class="right-box">
+          <el-input
+            style="width: 300px"
+            type="textarea"
+            v-model="formData.introduction"
+          ></el-input>
+        </div>
+      </div>
+      <div class="dialog-container-upload">
+        <div class="left-box">{{ templateType }}模板上传：</div>
+        <div class="right-box">
+          <el-upload
+            class="upload-demo"
+            action="https://jsonplaceholder.typicode.com/posts/"
+            :on-success="handleSuccess"
+            :before-upload="beforeUpload"
+            :accept="'.doc,.docx,.xls,.xlsx,.pdf'"
+          >
+            <el-button slot="trigger"
+              ><i class="el-icon-upload"></i> 请将文件拖拽或点击上传</el-button
+            >
+            <div slot="tip" class="el-upload__tip" style="width: 220px">
+              仅支持 .doc / .docx / .xls / .xlsx / .pdf 格式的文件
+            </div>
+          </el-upload>
+        </div>
+      </div>
+      <div class="dialog-container-bottom">
+        <el-button class="reset-btn" @click="resetEvent">重置</el-button>
+        <el-button class="search-btn" @click="searchEvent">确认</el-button>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+<script>
+/**
+ * 添加，编辑模板弹窗 -- 报表配置，报告配置
+ */
+export default {
+  name: "templatePopup",
+  props: {
+    templateTitle: {
+      type: String,
+      default: "",
+    },
+    templateType: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return {
+      dialogVisible: false,
+      formData: {
+        name: "",
+        format: "Excel",
+        introduction: "",
+        id: "",
+        reportType: "",
+        templateType: 0,
+      },
+      temFormatOptions: [
+        {
+          value: "Word",
+          label: "Word",
+        },
+        {
+          value: "Excel",
+          label: "Excel",
+        },
+        {
+          value: "PDF",
+          label: "PDF",
+        },
+      ],
+      reportTypeOptions: [
+        {
+          value: "",
+          label: "未知",
+        },
+        {
+          value: "年度报告",
+          label: "年度报告",
+        },
+        {
+          value: "季度报告",
+          label: "季度报告",
+        },
+        {
+          value: "月度报告",
+          label: "月度报告",
+        },
+      ],
+    };
+  },
+  methods: {
+    resetEvent() {
+      this.formData.name = "";
+      this.formData.format = "Excel";
+      this.formData.introduction = "";
+      this.formData.reportType = "";
+    },
+    searchEvent() {
+      this.$emit("confirmEvent", this.formData);
+    },
+    beforeUpload(file) {
+      const isAllowedSize = file.size / 1024 / 1024 < 10; // 限制文件大小小于10MB
+      const isAllowedType = [".doc", ".docx", ".xls", ".xlsx", ".pdf"].includes(
+        file.name
+          .substring(file.name.lastIndexOf("."), file.name.length)
+          .toLowerCase()
+      ); // 限制文件格式
+      if (!isAllowedSize) {
+        this.$message.error("文件大小超过限制");
+        return false;
+      }
+      if (!isAllowedType) {
+        this.$message.error("文件格式不支持");
+        return false;
+      }
+      return true;
+    },
+    handleSuccess(response, file, fileList) {
+      console.log(response); // 上传成功后返回的数据
+      console.log(file); // 上传的文件信息
+      console.log(fileList); // 上传的所有文件信息
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+/deep/.el-dialog__header {
+  padding: 20px 20px 16px;
+  border-bottom: 1px solid #f2f2f2;
+  text-align: left;
+  font-size: 16px;
+  font-weight: 600;
+  color: #333;
+}
+/deep/.el-dialog__body {
+  .dialog-container {
+    &-item,
+    &-upload,
+    &-info {
+      margin: 0 auto;
+      width: 90%;
+      margin-bottom: 20px;
+      display: flex;
+      align-items: center;
+      .left-box {
+        height: 100%;
+        width: 30%;
+        font-size: 14px;
+        line-height: 27px;
+      }
+      .right-box {
+        height: 100%;
+        width: 30%;
+      }
+    }
+    &-item {
+      height: 40px;
+    }
+    &-info {
+      height: 60px;
+    }
+    &-upload {
+      height: 100px;
+    }
+    &-bottom {
+      margin: 0 auto;
+      width: 60%;
+      height: 40px;
+      display: flex;
+      align-items: center;
+      justify-content: space-around;
+      .reset-btn,
+      .search-btn {
+        height: 30px;
+        width: 90px;
+        color: #fff;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .reset-btn {
+        background-color: #b3b3b3;
+      }
+      .search-btn {
+        background-color: #2ea8e6;
+      }
+    }
+  }
+}
+</style>

src/views/servicesManagement/allServices.vue

@@ -1,189 +1,242 @@
 <template>
-    <div class="content">
-        <el-input class="search" v-model="input" placeholder="请输入" suffix-icon="el-icon-search"></el-input>
-        <el-table ref="multipleTable" border :data="tableData" tooltip-effect="dark" :show-header="false"
-            :header-cell-style="{ textAlign: 'center' }" :cell-style="{ textAlign: 'center' }" style="width: 95%"
-            @selection-change="handleSelectionChange">
-            <el-table-column type="selection" width="50">
-            </el-table-column>
-            <el-table-column prop="photo">
-                <template slot-scope="scope">
-                    <el-image :src="scope.row.photo" style="width: 40px; height: 40px;"
-                        :preview-src-list="[scope.row.photo]"></el-image>
-                </template>
-            </el-table-column>
-            <el-table-column prop="introduction">
-                <template slot-scope="scope">
-                    <el-descriptions :title="scope.row.name">
-                        <el-descriptions-item label="功能简介">{{ scope.row.introduction }}</el-descriptions-item>
-                    </el-descriptions>
-                </template>
-            </el-table-column>
-            <el-table-column prop="updatetime">
-                <template slot-scope="scope">
-                    <el-form label-position="right" label-width="100px" v-model="form">
-                        <el-form-item label="版本号：">
-                            <el-select v-model="form.version">
-                                <el-option value="v1.0"></el-option>
-                            </el-select>
-                        </el-form-item>
-                        <el-form-item label="更新时间：">
-                            <span style="margin-right: 110px;">{{ scope.row.updatetime }}</span>
-                        </el-form-item>
-                    </el-form>
-                </template>
-            </el-table-column>
-            <el-table-column prop="operation">
-                <template slot-scope="scope">
-                    <el-button style="width: 80px; height: 40px;"
-                        :type="scope.row.status == '1' ? 'primary' : scope.row.status == '2' ? 'info' : 'danger'">
-                        {{ scope.row.status == '1' ? '安装' : scope.row.status == '2' ? '未配置' : '卸载' }}
-                    </el-button>
-                </template>
-            </el-table-column>
-        </el-table>
-        <div class="bottom">
-            <div>
-                <checkbox class="checkbox" :total="total"></checkbox>
-                <el-button class="check-cancel" size="mini" type="text" @click="cancleChecked">取消</el-button>
-            </div>
-            <div class="bottom_button" v-show="show">
-                <el-button class="delete" type="text">批量删除</el-button>
-                <el-divider direction="vertical"></el-divider>
-                <el-button class="disabled" type="text">批量激活</el-button>
-                <el-divider direction="vertical"></el-divider>
-                <el-button class="export" type="text">导出数据</el-button>
-            </div>
-            <page></page>
-        </div>
+  <div class="content">
+    <el-input
+      class="search"
+      v-model="input"
+      placeholder="请输入"
+      suffix-icon="el-icon-search"
+    ></el-input>
+    <el-table
+      ref="multipleTable"
+      border
+      :data="tableData"
+      tooltip-effect="dark"
+      :show-header="false"
+      :header-cell-style="{ textAlign: 'center' }"
+      :cell-style="{ textAlign: 'center' }"
+      style="width: 95%"
+      @selection-change="handleSelectionChange"
+    >
+      <el-table-column type="selection" width="50"> </el-table-column>
+      <el-table-column prop="photo">
+        <template slot-scope="scope">
+          <el-image
+            :src="scope.row.photo"
+            style="width: 40px; height: 40px"
+            :preview-src-list="[scope.row.photo]"
+          ></el-image>
+        </template>
+      </el-table-column>
+      <el-table-column prop="introduction">
+        <template slot-scope="scope">
+          <el-descriptions :title="scope.row.name">
+            <el-descriptions-item label="功能简介">{{
+              scope.row.introduction
+            }}</el-descriptions-item>
+          </el-descriptions>
+        </template>
+      </el-table-column>
+      <el-table-column prop="updatetime">
+        <template slot-scope="scope">
+          <el-form label-position="right" label-width="100px" v-model="form">
+            <el-form-item label="版本号：">
+              <el-select v-model="form.version">
+                <el-option value="v1.0"></el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="更新时间：">
+              <span style="margin-right: 110px">{{
+                scope.row.updatetime
+              }}</span>
+            </el-form-item>
+          </el-form>
+        </template>
+      </el-table-column>
+      <el-table-column prop="operation">
+        <template slot-scope="scope">
+          <el-button
+            style="width: 80px; height: 40px"
+            :type="
+              scope.row.status == '1'
+                ? 'primary'
+                : scope.row.status == '2'
+                ? 'info'
+                : 'danger'
+            "
+          >
+            {{
+              scope.row.status == "1"
+                ? "安装"
+                : scope.row.status == "2"
+                ? "未配置"
+                : "卸载"
+            }}
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="bottom">
+      <!-- <div>
+        <checkbox class="checkbox" :total="total"></checkbox>
+        <el-button
+          class="check-cancel"
+          size="mini"
+          type="text"
+          @click="cancleChecked"
+          >取消</el-button
+        >
+      </div>
+      <div class="bottom_button" v-show="show">
+        <el-button class="delete" type="text">批量删除</el-button>
+        <el-divider direction="vertical"></el-divider>
+        <el-button class="disabled" type="text">批量激活</el-button>
+        <el-divider direction="vertical"></el-divider>
+        <el-button class="export" type="text">导出数据</el-button>
+      </div> -->
+      <page :paginationData="paginationData"></page>
     </div>
+  </div>
 </template>
 
-<script >
-import checkbox from '@/components/Checkbox/index'
-import page from '@/components/pagination/index'
+<script>
+import checkbox from "@/components/Checkbox/index";
+import page from "@/components/pagination/index";
 export default {
-    components: { checkbox, page },
-    data() {
-        return {
-            input: '',
-            show: true,
-            total: 0,
-            form: {},
-            tableData: [
-                {
-                    photo: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
-                    updatetime: '2023-01-01 00:00',
-                    name: '海康威视软件包',
-                    introduction: 'xxxxxxxxxxxxx',
-                    status: '1'
-                },
-                {
-                    photo: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
-                    updatetime: '2023-01-01 00:00',
-                    name: '海康威视软件包',
-                    introduction: 'xxxxxxxxxxxxx',
-                    status: '2'
-                },
-                {
-                    photo: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
-                    updatetime: '2023-01-01 00:00',
-                    name: '海康威视软件包',
-                    introduction: 'xxxxxxxxxxxxx',
-                    status: '3'
-                },
-            ]
-        }
-    },
-    methods: {
-        handleSelectionChange() {
-            //
+  components: { checkbox, page },
+  data() {
+    return {
+      input: "",
+      show: true,
+      form: {},
+      tableData: [
+        {
+          photo:
+            "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
+          updatetime: "2023-01-01 00:00",
+          name: "海康威视软件包",
+          introduction: "xxxxxxxxxxxxx",
+          status: "1",
         },
-        cancleChecked() {
-            //
-        }
-    }
+        {
+          photo:
+            "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
+          updatetime: "2023-01-01 00:00",
+          name: "海康威视软件包",
+          introduction: "xxxxxxxxxxxxx",
+          status: "2",
+        },
+        {
+          photo:
+            "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
+          updatetime: "2023-01-01 00:00",
+          name: "海康威视软件包",
+          introduction: "xxxxxxxxxxxxx",
+          status: "3",
+        },
+      ],
+      paginationData: {
+        pageSize: 10,
+        pagerCount: 5,
+        currentPage: 1,
+        pageSizes: [5, 10, 20, 30],
+        total: 30,
+        currentChange: (val) => {
+          this.getTableData(val);
+        },
+        handleSizeChange: (val) => {
+          this.handleSizeChange(val);
+        },
+      },
+    };
+  },
+  methods: {
+    handleSelectionChange() {
+      //
+    },
+    getTableData(val) {},
+    handleSizeChange(val) {},
+  },
 };
 </script>
 <style lang="less" scoped>
 .content {
-    position: relative;
-    height: 100%;
-    background-color: #ffffff;
+  position: relative;
+  height: 100%;
+  background-color: #ffffff;
 }
 
 .el-table {
-    top: 100px;
-    margin-left: 2.5%;
+  top: 100px;
+  margin-left: 2.5%;
 }
 
 .el-form-item {
-    margin-bottom: 0 !important;
+  margin-bottom: 0 !important;
 }
 
 /deep/.el-form-item__label {
-    padding: 0;
+  padding: 0;
 }
 
 /deep/.el-form-item__content {
-    margin-right: 8px;
+  margin-right: 8px;
 }
 
 .bottom {
+  position: absolute;
+  left: 20px;
+  right: 16px;
+  bottom: 20px;
+  height: 50px;
+  line-height: 20px;
+  background-color: rgba(255, 255, 255, 1);
+  text-align: center;
+
+  .checkbox {
     position: absolute;
-    left: 20px;
-    right: 16px;
-    bottom: 20px;
-    height: 50px;
-    line-height: 20px;
-    background-color: rgba(255, 255, 255, 1);
+    left: 29px;
+    top: 15px;
+    font-size: 14px;
+  }
+
+  .check-cancel {
+    position: absolute;
+    // line-height: 20px;
+    font-size: 14px;
     text-align: center;
+    left: 140px;
+    top: 10px;
+  }
 
-    .checkbox {
-        position: absolute;
-        left: 29px;
-        top: 15px;
-        font-size: 14px;
-    }
+  .bottom_button {
+    position: absolute;
+    left: 200px;
+    margin-top: 15px;
 
-    .check-cancel {
-        position: absolute;
-        // line-height: 20px;
-        font-size: 14px;
-        text-align: center;
-        left: 140px;
-        top: 10px;
+    .delete {
+      font-size: 14px;
+      text-align: center;
+      padding: 1px;
     }
 
-    .bottom_button {
-        position: absolute;
-        left: 200px;
-        margin-top: 15px;
-
-        .delete {
-            font-size: 14px;
-            text-align: center;
-            padding: 1px;
-        }
-
-        .disabled {
-            font-size: 14px;
-            text-align: center;
-            padding: 1px;
-        }
+    .disabled {
+      font-size: 14px;
+      text-align: center;
+      padding: 1px;
+    }
 
-        .export {
-            font-size: 14px;
-            text-align: center;
-            padding: 1px;
-        }
+    .export {
+      font-size: 14px;
+      text-align: center;
+      padding: 1px;
     }
+  }
 }
 
 .search {
-    position: absolute;
-    width: 300px;
-    top: 20px;
-    right: 2.5%;
+  position: absolute;
+  width: 300px;
+  top: 20px;
+  right: 2.5%;
 }
-</style>
+</style>

src/views/servicesManagement/index.vue

@@ -1,197 +0,0 @@
-<template>
-    <div style="height: 100%;">
-        <router-view></router-view>
-    </div>
-</template>
-
-<script>
-import checkbox from "@/components/Checkbox/index";
-import page from "@/components/pagination/index";
-export default {
-  components: { checkbox, page },
-  data() {
-    return {
-      input: "",
-      show: true,
-      total: 0,
-      form: {},
-      tableData: [
-        {
-          photo:
-            "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
-          updatetime: "2023-01-01 00:00",
-          name: "海康威视软件包",
-          introduction: "xxxxxxxxxxxxx",
-          status: "1",
-        },
-        {
-          photo:
-            "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
-          updatetime: "2023-01-01 00:00",
-          name: "海康威视软件包",
-          introduction: "xxxxxxxxxxxxx",
-          status: "2",
-        },
-        {
-          photo:
-            "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
-          updatetime: "2023-01-01 00:00",
-          name: "海康威视软件包",
-          introduction: "xxxxxxxxxxxxx",
-          status: "3",
-        },
-      ],
-      paginationData: {
-        pageSize: 10,
-        pagerCount: 5,
-        currentPage: 1,
-        pageSizes: [5, 10, 20, 30],
-        total: 30,
-        currentChange: (val) => {
-          this.getTableData(val);
-        },
-        handleSizeChange: (val) => {
-          this.handleSizeChange(val);
-        },
-      },
-    };
-  },
-  methods: {
-    handleSelectionChange() {
-      //
-    },
-    getTableData(val) {},
-    handleSizeChange(val) {},
-  },
-};
-</script>
-<style lang="less" scoped>
-.content {
-  top: 77px;
-  position: absolute;
-  left: 218px;
-  right: 16px;
-  height: -webkit-fill-available;
-  margin-bottom: 20px;
-  background-color: #ffffff;
-}
-
-.el-table {
-  top: 100px;
-  margin-left: 2.5%;
-  border: 1px solid #f0f2f2;
-  font-size: 0.95rem;
-  font-family: PingFang SC;
-  font-weight: 500;
-  color: #b2b2b2;
-  background: rgba(255, 255, 255, 0.8);
-  /deep/th {
-    background: #f7fbff;
-  }
-  /deep/.el-checkbox {
-    color: #b2b2b2;
-    .el-checkbox__input.is-checked + .el-checkbox__label {
-      color: #2ea8e6;
-    }
-
-    .el-checkbox__input.is-checked .el-checkbox__inner::after {
-      width: 70%;
-      height: 70%;
-      background: #2ea8e6;
-      border-radius: 0;
-      transform: rotate(0deg) scaleY(1);
-      position: static;
-      // border: 1px solid #8DD9FF;
-    }
-
-    .el-checkbox__inner {
-      border: 1px solid #8dd9ff;
-      background: rgba(0, 170, 255, 0);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      position: static;
-      &::after {
-        transition: 0ms;
-      }
-    }
-
-    .el-checkbox__label {
-      padding-left: 0;
-      font-size: 15px;
-      position: absolute;
-      top: 1px;
-      left: 25px;
-    }
-  }
-}
-
-.el-form-item {
-  margin-bottom: 0 !important;
-}
-
-/deep/.el-form-item__label {
-  padding: 0;
-}
-
-/deep/.el-form-item__content {
-  margin-right: 8px;
-}
-
-.bottom {
-  position: absolute;
-  left: 20px;
-  right: 16px;
-  bottom: 20px;
-  height: 50px;
-  line-height: 20px;
-  background-color: rgba(255, 255, 255, 1);
-  text-align: center;
-
-  .checkbox {
-    position: absolute;
-    left: 29px;
-    top: 15px;
-    font-size: 14px;
-  }
-
-  .check-cancel {
-    position: absolute;
-    // line-height: 20px;
-    font-size: 14px;
-    text-align: center;
-    left: 140px;
-    top: 10px;
-  }
-
-  .bottom_button {
-    position: absolute;
-    left: 200px;
-    margin-top: 15px;
-
-    .delete {
-      font-size: 14px;
-      text-align: center;
-      padding: 1px;
-    }
-
-    .disabled {
-      font-size: 14px;
-      text-align: center;
-      padding: 1px;
-    }
-
-    .export {
-      font-size: 14px;
-      text-align: center;
-      padding: 1px;
-    }
-  }
-}
-.search {
-  position: absolute;
-  width: 300px;
-  top: 20px;
-  right: 2.5%;
-}
-</style>