综合分析》底部菜单》申请任务、我的任务组件开发。

src/assets/global.css

@@ -1,3 +1,9 @@
+/* @borderColor: #00aaff;
+@borderColor32: #00aaff32;
+@borderColor64: #00aaff64;
+@topTitleBgLeft: #002645;
+@topTitleMinLeft: #002f56;
+@lightColor: #74ffff; */
 /* el-tree */
 .el-icon-caret-right:before {
   display: none;
@@ -100,3 +106,60 @@
 .el-popper[x-placement^="bottom"] .popper__arrow {
   border-bottom-color: rgba(47, 184, 255, 0.7);
 }
+/* el-dialog el-message-box */
+.el-dialog,
+.el-message-box {
+  border: 2px solid transparent;
+  border-image: --webkit-linear-gradient(to top, #00aaff, transparent) 1;
+  border-image: --moz-linear-gradient(to top, #00aaff, transparent) 1;
+  border-image: linear-gradient(to top, #00aaff, transparent) 1;
+  background-image: --webkit-linear-gradient(to top, #002f56, #002645);
+  background-image: --moz-linear-gradient(to top, #002f56, #002645);
+  background-image: linear-gradient(to top, #002f56, #002645);
+  box-sizing: border-box;
+}
+.el-dialog__title,.el-message-box__title {
+  color: #00aaff;
+}
+.el-form-item__label,
+.el-message-box__message {
+  color: #ffffff;
+}
+.el-input__inner,
+.el-textarea__inner {
+  background: none;
+  color: #f2f6fc;
+}
+/* el-button--default */
+.el-button--default,.el-button--default:focus {
+  background-image: --webkit-linear-gradient(to top, #303133, #606266);
+  background-image: --moz-linear-gradient(to top, #303133, #606266);
+  background-image: linear-gradient(to top, #303133, #606266);
+  color: #c0c4cc;
+}
+.el-button--default:hover {
+  background-image: --webkit-linear-gradient(to top, #606266, #909399);
+  background-image: --moz-linear-gradient(to top, #606266, #909399);
+  background-image: linear-gradient(to top, #606266, #909399);
+  color: #fff;
+}
+.el-button--primary,.el-button--primary:focus {
+  background-image: --webkit-linear-gradient(to top, #002f56, #00aaff);
+  background-image: --moz-linear-gradient(to top, #002f56, #00aaff);
+  background-image: linear-gradient(to top, #002f56, #00aaff);
+}
+.el-button--primary:hover {
+  background-image: --webkit-linear-gradient(to top, #00aaff, #1deef5);
+  background-image: --moz-linear-gradient(to top, #00aaff, #1deef5);
+  background-image: linear-gradient(to top, #00aaff, #1deef5);
+}
+/* table */
+.el-dialog__body *,tr,td,th{
+  background-color: transparent !important;
+}
+.el-table,.el-pagination__total,.el-pagination__jump{
+  color: #C0C4CC;
+}
+.el-table thead{
+  color: #FFFFFF;
+}

src/components/common/BottomForm/CreateTaskForm.vue

@@ -0,0 +1,233 @@
+<template>
+  <!-- 申请任务弹窗 -->
+  <el-dialog title="新建任务" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
+    <el-form ref="createTaskForm" :model="createTaskForm" :rules="createTaskRrules" label-width="80px">
+      <el-form-item label="任务名称" prop="taskName">
+        <el-input v-model="createTaskForm.taskName" placeholder="请输入任务名称"></el-input>
+      </el-form-item>
+      <el-form-item label="任务类型" prop="taskType">
+        <el-select v-model="createTaskForm.taskType" filterable placeholder="请选择">
+          <el-option-group v-for="group in taskTypeOptions" :key="group.label" :label="group.label">
+            <el-option v-for="item in group.options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
+          </el-option-group>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="关联项目" prop="associatedItems">
+        <el-select v-model="createTaskForm.associatedItems" filterable placeholder="请选择">
+          <el-option v-for="item in associatedItemsOptions" :key="item.value" :label="item.label" :value="item.value">
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="所属街道" prop="streetOfOwnership">
+        <el-select v-model="createTaskForm.streetOfOwnership" filterable placeholder="请选择">
+          <el-option v-for="item in streetOfOwnershipOptions" :key="item.value" :label="item.label" :value="item.value">
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="任务描述" prop="taskDescription">
+        <el-input type="textarea" v-model="createTaskForm.taskDescription"></el-input>
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="clearDialogVisible('createTaskForm')">取 消</el-button>
+      <el-button type="primary" @click="subMitDialogVisible('createTaskForm')">确 定</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+/**
+ * 底部菜单（申请任务）组件
+ * @author: LiuMengxiang
+ * @Date: 2022年11月21-25日
+ */
+export default {
+  name: "CreateTaskForm",
+  components: {},
+  data() {
+    return {
+      // 申请任务弹窗显示状态
+      dialogVisible: false,
+      // 新建任务form表单
+      createTaskForm: {
+        taskName: "",
+        taskType: "",
+        associatedItems: "",
+        streetOfOwnership: "",
+        taskDescription: ""
+      },
+      // 新建任务form表单校验
+      createTaskRrules: {
+        taskName: [
+          { required: true, message: "请输入活动名称", trigger: "blur" },
+          { min: 3, max: 20, message: "长度在 3 到 20 个字符", trigger: "blur" }
+        ],
+        taskType: { required: true, message: "请选择任务类型", trigger: "change" },
+        associatedItems: { required: true, message: "请选择关联项目", trigger: "change" },
+        streetOfOwnership: { required: true, message: "请选择所属街道", trigger: "change" },
+        taskDescription: [
+          { required: true, message: "请输入任务描述", trigger: "blur" },
+          { min: 1, max: 255, message: "长度在 1 到 255 个字符", trigger: "blur" }
+        ]
+      },
+      // 任务类型options
+      taskTypeOptions: [
+        {
+          label: "全部类型",
+          options: [
+            {
+              value: "all",
+              label: "全部类型"
+            }
+          ]
+        },
+        {
+          label: "基本类型",
+          options: [
+            {
+              value: "landResources",
+              label: "土地资源"
+            },
+            {
+              value: "ecologicalResources",
+              label: "生态资源"
+            },
+            {
+              value: "forestLandResources",
+              label: "林地资源"
+            },
+            {
+              value: "waterResources",
+              label: "水资源"
+            },
+            {
+              value: "townAreaTopic",
+              label: "镇域专题"
+            }
+          ]
+        },
+        {
+          label: "土地资源",
+          options: [
+            {
+              value: "lr_bfm",
+              label: "基本农田监控"
+            },
+            {
+              value: "lr_soclr",
+              label: "建设用地减量化监管"
+            }
+          ]
+        }
+      ],
+      // 关联项目options
+      associatedItemsOptions: [
+        {
+          value: "1",
+          label: "项目1"
+        },
+        {
+          value: "2",
+          label: "项目2"
+        }
+      ],
+      // 所属街道Options
+      streetOfOwnershipOptions: [
+        {
+          value: "0",
+          label: "全部街道"
+        },
+        {
+          value: "1",
+          label: "花木街道"
+        },
+        {
+          value: "2",
+          label: "陆家嘴街道"
+        },
+        {
+          value: "3",
+          label: "……"
+        }
+      ]
+    };
+  },
+  mounted() {
+    // 申请任务事件监听
+    this.$bus.$on("sqrw", () => {
+      this.changeShowBottomMenusStatus();
+    });
+    // 点击底部菜单SVG，且有弹窗打开时触发（弹窗关闭询问）
+    this.$bus.$on("handleClose", () => {
+      if (this.dialogVisible) {
+        this.handleClose();
+      }
+    });
+  },
+  destroy() {
+    // 当容器销毁时，需要停止监听该事件
+    this.$bus.$off("sqrw");
+  },
+  props: [],
+  methods: {
+    // 当用户点击svg底座时，切换底部菜单显示隐藏状态。
+    changeShowBottomMenusStatus() {
+      if (this.dialogVisible) {
+        this.handleClose();
+      } else {
+        // 打开弹窗
+        this.dialogVisible = !this.dialogVisible;
+        this.$emit("changeShowBottomMenusStatus", false);
+      }
+    },
+    // 弹窗关闭询问
+    handleClose() {
+      this.$confirm("确认关闭？")
+        .then(_ => {
+          this.clearDialogVisible("createTaskForm");
+        })
+        .catch(_ => {});
+    },
+    // 申请任务取消
+    clearDialogVisible(formName) {
+      // 关闭弹窗
+      this.dialogVisible = false;
+      // 重置表单
+      this.$refs[formName].resetFields();
+      // 修改父级菜单变量（弹窗显示状态和显示底部菜单）
+      this.$emit("changeShowBottomMenusStatus", true);
+    },
+    // 申请任务提交
+    subMitDialogVisible(formName) {
+      // 表单校验
+      this.$refs[formName].validate(valid => {
+        if (valid) {
+          console.log("申请任务提交表单内容：", this.createTaskForm);
+          this.$confirm("您已成功提交任务，请等待管理员审核。", "系统提示", {
+            confirmButtonText: "确定",
+            cancelButtonText: "撤回",
+            type: "success"
+          })
+            .then(() => {
+              this.$message({
+                type: "success",
+                message: "提交成功!"
+              });
+              // 检验成功后关闭弹窗
+              this.clearDialogVisible(formName);
+            })
+            .catch(() => {
+              this.$message({
+                type: "info",
+                message: "已取消提交!"
+              });
+            });
+        } else {
+          return false;
+        }
+      });
+    }
+  },
+  watch: {}
+};
+</script>

src/components/common/BottomForm/MyMission.vue

@@ -0,0 +1,266 @@
+<template>
+  <!-- 我的任务弹窗 -->
+  <el-dialog title="我的任务" :visible.sync="dialogVisible" width="80%" height="80%" :before-close="handleClose">
+    <el-form :inline="true" ref="myTaskForm" :model="formInline" class="demo-form-inline">
+      <el-form-item label="任务类型">
+        <el-select v-model="formInline.taskType" placeholder="任务类型">
+          <el-option v-for="item in taskTypeOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="关联项目">
+        <el-select v-model="formInline.associatedItems" placeholder="关联项目">
+          <el-option v-for="item in associatedItemsOptions" :key="item.value" :label="item.label" :value="item.value">
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="审计状态">
+        <el-select v-model="formInline.auditStatus" placeholder="审计状态">
+          <el-option label="已审核" value="ReviewedAndApproved"></el-option>
+          <el-option label="未审核" value="NotReviewed"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item style="float:right;">
+        <el-button type="primary" @click="onSubmit">查询</el-button>
+        <el-button @click="resetForm()">重置</el-button>
+      </el-form-item>
+    </el-form>
+    <el-table :data="tableData" style="width: 100%" stripe>
+      <el-table-column fixed prop="date" label="日期" width="150"> </el-table-column>
+      <el-table-column prop="name" label="姓名" width="120"> </el-table-column>
+      <el-table-column prop="province" label="省份" width="120"> </el-table-column>
+      <el-table-column prop="city" label="市区" width="120"> </el-table-column>
+      <el-table-column prop="address" label="地址" width="300"> </el-table-column>
+      <el-table-column prop="zip" label="邮编" width="120"> </el-table-column>
+      <el-table-column fixed="right" label="操作" width="120">
+        <template slot-scope="scope">
+          <el-button @click.native.prevent="deleteRow(scope.$index, tableData)" type="text" size="small"> 查看 </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <span slot="footer" class="dialog-footer">
+      <el-pagination
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="1"
+        :page-sizes="[10, 20, 50, 100]"
+        :page-size="10"
+        layout="total, prev, pager, next, sizes, jumper"
+        :total="400"
+      >
+      </el-pagination>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+/**
+ * 底部菜单（我的任务）组件
+ * @author: LiuMengxiang
+ * @Date: 2022年11月21-25日
+ */
+export default {
+  name: "CreateTaskForm",
+  components: {},
+  data() {
+    return {
+      // 我的任务弹窗显示状态
+      dialogVisible: false,
+      //   查询条件
+      formInline: {
+        taskType: "",
+        associatedItems: "",
+        auditStatus: ""
+      },
+      // 任务类型options
+      taskTypeOptions: [
+        {
+          label: "全部类型",
+          options: [
+            {
+              value: "all",
+              label: "全部类型"
+            }
+          ]
+        },
+        {
+          label: "基本类型",
+          options: [
+            {
+              value: "landResources",
+              label: "土地资源"
+            },
+            {
+              value: "ecologicalResources",
+              label: "生态资源"
+            },
+            {
+              value: "forestLandResources",
+              label: "林地资源"
+            },
+            {
+              value: "waterResources",
+              label: "水资源"
+            },
+            {
+              value: "townAreaTopic",
+              label: "镇域专题"
+            }
+          ]
+        },
+        {
+          label: "土地资源",
+          options: [
+            {
+              value: "lr_bfm",
+              label: "基本农田监控"
+            },
+            {
+              value: "lr_soclr",
+              label: "建设用地减量化监管"
+            }
+          ]
+        }
+      ],
+      // 关联项目options
+      associatedItemsOptions: [
+        {
+          value: "1",
+          label: "项目1"
+        },
+        {
+          value: "2",
+          label: "项目2"
+        }
+      ],
+      // 我的任务form表单
+      tableData: [
+        {
+          date: "2016-05-03",
+          name: "王小虎",
+          province: "上海",
+          city: "普陀区",
+          address: "上海市普陀区金沙江路 1518 弄",
+          zip: 200333
+        },
+        {
+          date: "2016-05-02",
+          name: "王小虎",
+          province: "上海",
+          city: "普陀区",
+          address: "上海市普陀区金沙江路 1518 弄",
+          zip: 200333
+        },
+        {
+          date: "2016-05-04",
+          name: "王小虎",
+          province: "上海",
+          city: "普陀区",
+          address: "上海市普陀区金沙江路 1518 弄",
+          zip: 200333
+        },
+        {
+          date: "2016-05-01",
+          name: "王小虎",
+          province: "上海",
+          city: "普陀区",
+          address: "上海市普陀区金沙江路 1518 弄",
+          zip: 200333
+        },
+        {
+          date: "2016-05-08",
+          name: "王小虎",
+          province: "上海",
+          city: "普陀区",
+          address: "上海市普陀区金沙江路 1518 弄",
+          zip: 200333
+        },
+        {
+          date: "2016-05-06",
+          name: "王小虎",
+          province: "上海",
+          city: "普陀区",
+          address: "上海市普陀区金沙江路 1518 弄",
+          zip: 200333
+        },
+        {
+          date: "2016-05-07",
+          name: "王小虎",
+          province: "上海",
+          city: "普陀区",
+          address: "上海市普陀区金沙江路 1518 弄",
+          zip: 200333
+        }
+      ]
+    };
+  },
+  mounted() {
+    // 我的任务事件监听
+    this.$bus.$on("wdrw", () => {
+      this.changeShowBottomMenusStatus();
+    });
+    // 点击底部菜单SVG，且有弹窗打开时触发（弹窗关闭询问）
+    this.$bus.$on("handleClose", () => {
+      if (this.dialogVisible) {
+        this.handleClose();
+      }
+    });
+  },
+  destroy() {
+    // 当容器销毁时，需要停止监听该事件
+    this.$bus.$off("wdrw");
+  },
+  props: [],
+  methods: {
+    // 切换条数
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`);
+    },
+    //   切换页
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`);
+    },
+    // 查询事件
+    onSubmit() {
+      console.log("submit!");
+    },
+    // 查询条件重置
+    resetForm() {
+      this.formInline = {
+        taskType: "",
+        associatedItems: "",
+        auditStatus: ""
+      };
+      this.onSubmit();
+    },
+    deleteRow(index, rows) {
+      rows.splice(index, 1);
+    },
+    // 当用户点击svg底座时，切换底部菜单显示隐藏状态。
+    changeShowBottomMenusStatus() {
+      if (this.dialogVisible) {
+        this.handleClose();
+      } else {
+        // 打开弹窗
+        this.dialogVisible = !this.dialogVisible;
+        this.$emit("changeShowBottomMenusStatus", false);
+      }
+    },
+    // 弹窗关闭询问
+    handleClose() {
+      this.$confirm("确认关闭？")
+        .then(_ => {
+          this.clearDialogVisible();
+        })
+        .catch(_ => {});
+    },
+    // 我的任务取消
+    clearDialogVisible() {
+      // 关闭弹窗
+      this.dialogVisible = false;
+      // 修改父级菜单变量（弹窗显示状态和显示底部菜单）
+      this.$emit("changeShowBottomMenusStatus", true);
+    }
+  },
+  watch: {}
+};
+</script>

src/components/common/BottomMenus.vue

@@ -3,14 +3,9 @@
     <!-- 底部菜单动态SVG底座 -->
     <BottomMenuSvg id="svgBox" @changeShowBottomMenusStatus="changeShowBottomMenusStatus()" />
     <!-- 申请任务弹窗 -->
-    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
-      <span>这是一段信息</span>
-      <span slot="footer" class="dialog-footer">
-        <el-button @click="dialogVisible = false">取 消</el-button>
-        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
-      </span>
-    </el-dialog>
+    <CreateTaskForm @changeShowBottomMenusStatus="changeShowBottomMenusStatus" />
     <!-- 我的任务弹窗 -->
+    <MyMission @changeShowBottomMenusStatus="changeShowBottomMenusStatus" />
     <!-- 同屏对比弹窗 -->
     <!-- 上传数据 -->
     <!-- 底部菜单主体 -->
@@ -40,7 +35,7 @@
             v-for="(subItem, subIndex) in item.subMenu"
             :key="subIndex"
           >
-            <!-- 选中状态的背景高亮 -->
+            <!-- 选中状态的背景高亮（舍弃） -->
             <!-- <div :class="ifMenuIndex(item.index, subItem.index) ? 'colBtuMenuShadow' : ''"></div> -->
             <!-- 子菜单图标的选择性渲染 -->
             <el-image class="BtuMenu_hover" :src="returnBgImage(subItem.bgImage + '-a')"></el-image>
@@ -63,13 +58,15 @@
  * @Date: 2022年11月14-18日
  */
 import BottomMenuSvg from "./BottomMenuSvg.vue";
+import CreateTaskForm from "./BottomForm/CreateTaskForm.vue";
+import MyMission from "./BottomForm/MyMission.vue";
 export default {
   name: "BottomMenus",
-  components: { BottomMenuSvg },
+  components: { BottomMenuSvg, CreateTaskForm, MyMission },
   data() {
     return {
-      // 申请任务弹窗显示状态
-      dialogVisible: false,
+      // 弹窗打开状态
+      dialogVisibleStatus: false,
       // 菜单主体显示状态（默认false）
       showBottomMenusStatus: false,
       // 底部菜单对象
@@ -79,8 +76,8 @@ export default {
           width: "164px",
           title: "任务申请",
           subMenu: [
-            { index: 0, title: "申请任务", bgImage: "sqrw",clickEmit: "sqrw" },
-            { index: 1, title: "我的任务", bgImage: "wdrw" }
+            { index: 0, title: "申请任务", bgImage: "sqrw", clickEmit: "sqrw" },
+            { index: 1, title: "我的任务", bgImage: "wdrw", clickEmit: "wdrw" }
           ]
         },
         {
@@ -111,17 +108,8 @@ export default {
       ]
     };
   },
-  mounted() {
-    // 申请任务事件监听
-    this.$bus.$on("sqrw",()=>{this.dialogVisible  = !this.dialogVisible});
-  },
-  destroy() {
-    // 当容器销毁时，需要停止监听该事件
-    this.$bus.$off("sqrw");
-  },
-  /**
-   * title: 标题（必填）
-   */
+  mounted() {},
+  destroy() {},
   props: [],
   methods: {
     // 根据菜单父级index和子菜单index，判断全局变量已选中底部菜单的index对比，返回状态。
@@ -144,17 +132,21 @@ export default {
         return "/static/images/bottomMenuIcon/" + bgImage + ".png";
       }
     },
-    // 当用户点击svg底座时，切换底部菜单显示隐藏状态。
-    changeShowBottomMenusStatus() {
-      this.showBottomMenusStatus = !this.showBottomMenusStatus;
-    },
-    // 申请任务
-    handleClose(done) {
-      this.$confirm("确认关闭？")
-        .then(_ => {
-          done();
-        })
-        .catch(_ => {});
+    // 当用户点击svg底座时，切换底部菜单显示隐藏状态。（较难理解部分，如有疑问，请联系LiuMengxiang）
+    changeShowBottomMenusStatus(state) {
+      // 如果接收对象不为空
+      if (state != undefined) {
+        // 切换底部菜单显示隐藏状态
+        this.showBottomMenusStatus = state;
+        // 并切换弹窗显示隐藏状态
+        this.dialogVisibleStatus = !state;
+      } else if (!this.showBottomMenusStatus && this.dialogVisibleStatus) {
+        // 如果底部菜单为隐藏状态且弹窗为显示状态，则为弹窗关闭询问。
+        this.$bus.$emit("handleClose");
+      } else {
+        // 否则直接切换底部菜单显示隐藏状态
+        this.showBottomMenusStatus = !this.showBottomMenusStatus;
+      }
     }
   },
   watch: {}

src/views/HomeView.vue

@@ -113,10 +113,6 @@
       <MenuCard :menuData="menus.left[9]"> </MenuCard>
       <MenuCard :menuData="menus.left[10]"> </MenuCard>
     </div>
-    <!-- 底部菜单 2 -- 疑点筛查 -->
-    <div id="leftMenusB" v-if="$ifMenu('3', '')">
-      <BottomMenus />
-    </div>
     <!-- 中部菜单列 -->
     <div id="mainMenus">
       <div id="mainMenus_topLeft" v-if="$ifMenu('1', '')">所属街道</div>
@@ -206,6 +202,10 @@
         </template>
       </MenuCard>
     </div>
+    <!-- 底部菜单 2 -- 疑点筛查 -->
+    <div id="leftMenusB" v-if="$ifMenu('3', '')">
+      <BottomMenus />
+    </div>
   </div>
 </template>
 <script>