计划管理

src/views/yingji/home.vue

@@ -17,13 +17,13 @@
               placeholder="请选择年份"
             />
           </el-form-item>
-          <el-form-item label="月份:" prop="plannedMouth">
+          <el-form-item label="月份:" prop="plannedMonth">
             <el-select
-              v-model="queryParams.plannedMouth"
+              v-model="plannedMonth"
               multiple
               collapse-tags
               style="margin-left: 20px"
-              placeholder="请选择"
+              placeholder="请选择月份"
               @change="multipleChange"
             >
               <el-option
@@ -132,6 +132,19 @@
       append-to-body
       class="tables-dialog"
     >
+      <el-form
+        :model="queryParams"
+        ref="queryForm"
+        size="small"
+        :inline="true"
+        style="display: flex; flex-direction: row-reverse"
+      >
+        <el-form-item class="btn-group">
+          <el-button class="btn-export" size="small">
+            <i class="el-icon-devops" /><span>导出excel</span>
+          </el-button>
+        </el-form-item>
+      </el-form>
       <div class="tables">
         <el-table
           :data="tableInfoData"
@@ -178,8 +191,9 @@ export default {
     return {
       queryParams: {
         plannedYear: null,
-        plannedMouth: null,
+        plannedMonth: null,
       },
+      plannedMonth: "",
       options: [
         {
           value: "1",
@@ -266,8 +280,8 @@ export default {
   mounted() {},
   methods: {
     multipleChange(e) {
-      // console.log(e.join(','));
+      console.log(e.join(","));
-      this.queryParams.plannedMouth = e.join(",");
+      this.queryParams.plannedMonth = e.join(",");
     },
     handleQuery() {},
     resetQuery() {},
@@ -284,7 +298,7 @@ export default {
       console.log(row);
       this.isDialogShow = true;
       this.tableInfoData = row.children;
-      this.title = row.district + "执法计划";
+      this.title = "2023年" + row.district + " 计划企业数：1000家";
     },
     active(e) {
       this.activeIndex = e;

src/views/yingji/planManage.vue

@@ -17,20 +17,30 @@
         v-show="showSearch"
       >
         <el-form-item label="年份" prop="plannedYear">
-          <el-input
+          <el-date-picker
             v-model="queryParams.plannedYear"
+            type="year"
+            size="mini"
+            value-format="yyyy"
             placeholder="请选择年份"
-            clearable
-            @keyup.enter.native="handleQuery"
           />
         </el-form-item>
         <el-form-item label="月份" prop="plannedMonth">
-          <el-input
+          <el-select
-            v-model="queryParams.plannedMonth"
+            v-model="plannedMonth"
+            multiple
+            collapse-tags
+            style="margin-left: 20px"
             placeholder="请选择月份"
-            clearable
+            @change="multipleChange"
-            @keyup.enter.native="handleQuery"
+          >
-          />
+            <el-option
+              v-for="item in options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
         </el-form-item>
         <el-form-item label="企业名称" prop="enterpriseName">
           <el-input
@@ -41,12 +51,7 @@
           />
         </el-form-item>
         <el-form-item label="行政区划" prop="district">
-          <el-input
+          <executive @quhua="quhua" @quhuadizhi="quhuadizhi" ref="executive" />
-            v-model="queryParams.district"
-            placeholder="请选择行政区划"
-            clearable
-            @keyup.enter.native="handleQuery"
-          />
         </el-form-item>
         <el-form-item label="执法层级" prop="lawHierarchy">
           <el-input
@@ -173,12 +178,65 @@ import {
   updateEnterprise,
 } from "@/api/yingji/enterprise";
 import AddDialog from "@/views/components/AddDialog/index.vue";
+import executive from "./echarts/executive.vue";
+
 import { mapState } from "vuex";
 
 export default {
-  components: { AddDialog },
+  components: { AddDialog, executive },
   data() {
     return {
+      options: [
+        {
+          value: "1",
+          label: "1月",
+        },
+        {
+          value: "2",
+          label: "2月",
+        },
+        {
+          value: "3",
+          label: "3月",
+        },
+        {
+          value: "4",
+          label: "4月",
+        },
+        {
+          value: "5",
+          label: "5月",
+        },
+        {
+          value: "6",
+          label: "6月",
+        },
+        {
+          value: "7",
+          label: "7月",
+        },
+        {
+          value: "8",
+          label: "8月",
+        },
+        {
+          value: "9",
+          label: "9月",
+        },
+        {
+          value: "10",
+          label: "10月",
+        },
+        {
+          value: "11",
+          label: "11月",
+        },
+        {
+          value: "12",
+          label: "12月",
+        },
+      ],
+      plannedMonth: null,
       // 遮罩层
       loading: true,
       // 选中数组
@@ -227,6 +285,14 @@ export default {
     };
   },
   methods: {
+    // 行政区划
+    quhua(e) {
+      this.queryParams.district = e;
+    },
+    multipleChange(e) {
+      console.log(e.join(","));
+      this.queryParams.plannedMonth = e.join(",");
+    },
     // 关闭对话框刷新页面
     closeAddDialog() {
       this.getList();
@@ -283,6 +349,7 @@ export default {
     /** 重置按钮操作 */
     resetQuery() {
       this.resetForm("queryForm");
+      this.$refs.executive.onClear();
       this.handleQuery();
     },
     /** 新增按钮操作 */
@@ -324,7 +391,7 @@ export default {
     handleDelete(row) {
       const ids = row.id;
       this.$modal
-        .confirm('是否确认删除计划企业的数据项？')
+        .confirm("是否确认删除计划企业的数据项？")
         .then(function () {
           return delEnterprise(ids);
         })