任务申请页面：关联项目同步获取全流程管理页面数据，所属街道和任务类型联动获取。

src/components/common/BottomForm/CreateTaskForm.vue

@@ -5,6 +5,7 @@
     :show-close="false"
     width="400px"
     :before-close="handleClose"
+    v-loading="initLoading"
   >
     <template slot="title">
       <div class="dialogTitle">
@@ -12,65 +13,25 @@
         新建任务
       </div>
     </template>
-    <el-form
-      ref="createTaskForm"
-      :model="createTaskForm"
-      :rules="createTaskRrules"
-      label-width="80px"
-    >
+    <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="streetOfOwnership">
-        <el-select
-          v-model="createTaskForm.streetOfOwnership"
-          filterable
-          placeholder="请选择"
-          width="100%"
-        >
-          <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="taskType">
-        <el-select
-          v-model="createTaskForm.taskType"
-          filterable
-          placeholder="请选择"
-          width="100%"
-        >
-          <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-input v-model="createTaskForm.taskName" placeholder="请输入任务名称"></el-input>
       </el-form-item>
       <el-form-item label="关联项目" prop="associatedItems">
+        <!-- 远程搜索功能
+          remote
+          :remote-method="remoteMethod" -->
         <el-select
           v-model="createTaskForm.associatedItems"
           filterable
+          :loading="selectLoading"
+          @change="changePorject"
           placeholder="请选择"
           width="100%"
+          clearable
         >
           <el-option
-            v-for="item in associatedItemsOptions"
+            v-for="item in selectSelectDataMap.associatedItemsOptions"
             :key="item.value"
             :label="item.label"
             :value="item.value"
@@ -78,6 +39,12 @@
           </el-option>
         </el-select>
       </el-form-item>
+      <el-form-item label="所属街道" prop="streetOfOwnership">
+        <el-input v-model="_streetOfOwnership_str" disabled placeholder="请选择关联项目，自动填入"></el-input>
+      </el-form-item>
+      <el-form-item label="任务类型" prop="taskType">
+        <el-input v-model="_taskType_str" disabled placeholder="请选择关联项目，自动填入"></el-input>
+      </el-form-item>
 
       <el-form-item label="任务描述" prop="taskDescription">
         <el-input
@@ -91,9 +58,7 @@
     </el-form>
     <span slot="footer" class="dialog-footer">
       <el-button @click="clearDialogVisible('createTaskForm')">取 消</el-button>
-      <el-button type="primary" @click="subMitDialogVisible('createTaskForm')"
-        >确 定</el-button
-      >
+      <el-button type="primary" @click="subMitDialogVisible('createTaskForm')">确 定</el-button>
     </span>
   </el-dialog>
 </template>
@@ -110,6 +75,8 @@ export default {
   components: {},
   data() {
     return {
+      initLoading: true,
+      selectLoading: false,
       // 申请任务弹窗显示状态
       dialogVisible: false,
       // 新建任务form表单
@@ -117,8 +84,8 @@ export default {
         taskName: "",
         taskType: "",
         associatedItems: "",
-        streetOfOwnership: "全部",
-        taskDescription: "",
+        streetOfOwnership: "",
+        taskDescription: ""
       },
       // 新建任务form表单校验
       createTaskRrules: {
@@ -128,23 +95,23 @@ export default {
             min: 3,
             max: 20,
             message: "长度在 3 到 20 个字符",
-            trigger: "blur",
-          },
+            trigger: "blur"
+          }
         ],
         taskType: {
           required: true,
           message: "请选择任务类型",
-          trigger: "change",
+          trigger: "change"
         },
         associatedItems: {
           required: true,
           message: "请选择关联项目",
-          trigger: "change",
+          trigger: "change"
         },
         streetOfOwnership: {
           required: true,
           message: "请选择所属街道",
-          trigger: "change",
+          trigger: "change"
         },
         taskDescription: [
           { required: false, message: "请输入任务描述", trigger: "blur" },
@@ -152,100 +119,29 @@ export default {
             min: 1,
             max: 255,
             message: "长度在 1 到 255 个字符",
-            trigger: "blur",
-          },
-        ],
+            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: "……",
-        // },
-      ],
+      // 数据字典暂存对象
+      selectSelectDataMap: {
+        projectType: [],
+        associatedItems: [],
+        associatedItemsOptions: []
+      },
+      _streetOfOwnership_str: "",
+      _taskType_str: "",
+      // 关联下拉框
+      pageSize: 10,
+      page: 1
     };
   },
   created() {
-    // 街道下拉框
-    for (let key in street) {
-      this.streetOfOwnershipOptions.push({
-        value: street[key],
-        label: street[key],
-      });
-    }
+    // 首先获取数据字典中的下拉框数据
+    this.selectSelectData("0", "审计类别", "projectType");
+    this.selectSelectData("0", "浦东新区行政区划", "associatedItems");
+    // 请求所有项目数据
+    this.getAllPorjects();
   },
   mounted() {
     // 申请任务事件监听
@@ -259,6 +155,93 @@ export default {
   },
   props: [],
   methods: {
+    // 用户切换关联项目
+    changePorject(value) {
+      // 根据项目id得到所属街道和项目类型
+      this.selectSelectDataMap.associatedItemsOptions.forEach(item => {
+        if (item.value == value) {
+          this.createTaskForm.streetOfOwnership = item.c_owning_street_town;
+          this.createTaskForm.taskType = item.c_task_type;
+        }
+      });
+      // 所属街道遍历渲染
+      this.selectSelectDataMap.projectType.forEach(item=>{
+        if(item.index == this.createTaskForm.taskType){
+          this._taskType_str = item.name;
+        }
+      })
+      // 任务类型遍历渲染
+      this.selectSelectDataMap.associatedItems.forEach(item=>{
+        if(item.index == this.createTaskForm.streetOfOwnership){
+          this._streetOfOwnership_str = item.name;
+        }
+      })
+    },
+    // 数据字典查询
+    selectSelectData(type, cName, keyName) {
+      let params = new FormData();
+      params.append("type", type);
+      params.append("cName", cName);
+      this.$Post(this.urlsCollection.selectByCNameAType, params).then(
+        res => {
+          if (res.code === 200 && res.content.length > 0) {
+            this.selectSelectDataMap[keyName] = res.content;
+          }
+        },
+        error => {
+          this.$message.error(error);
+          console.log(error);
+        }
+      );
+    },
+    // 请求获取所有关联项目数据
+    getAllPorjects() {
+      if (!this.initLoading) {
+        this.initLoading = true;
+      }
+      let params = new FormData();
+      params.append("columnId", "60");
+      params.append("states", "3");
+      params.append("pageSize", this.pageSize);
+      params.append("page", this.currentPage - 1);
+      let sortparam = [{ field: "c_create_date", orderByType: 2 }];
+      params.append("orderBy", JSON.stringify(sortparam));
+      this.$Post(this.urlsCollection.selectContentList, params).then(
+        res => {
+          if (res.code === 200 && res.content.data.length > 0) {
+            let associatedItemsOptionsData = res.content.data;
+            associatedItemsOptionsData.filter(item => {
+              this.selectSelectDataMap.associatedItemsOptions.push({
+                label: item.c_project_name,
+                value: item.id,
+                c_owning_street_town: item.c_owning_street_town,
+                c_task_type: item.c_task_type
+              });
+            });
+            this.initLoading = false;
+          } else {
+            this.initLoading = false;
+            this.$message.error(res.message);
+          }
+        },
+        error => {
+          this.initLoading = false;
+          this.$message.error(error);
+        }
+      );
+    },
+    remoteMethod(query) {
+      if (query !== "") {
+        this.selectLoading = true;
+        setTimeout(() => {
+          // 开始动态请求服务器数据并赋值给options对象
+          this.selectLoading = false;
+          this.selectSelectDataMap.associatedItemsOptions = [];
+        }, 200);
+      } else {
+        this.selectSelectDataMap.associatedItemsOptions = [];
+      }
+    },
     // 当用户点击svg底座时，切换底部菜单显示隐藏状态。
     changeShowBottomMenusStatus() {
       // 打开弹窗
@@ -269,10 +252,10 @@ export default {
     handleClose() {
       if (this.dialogVisible) {
         this.$confirm("确认关闭？")
-          .then((_) => {
+          .then(_ => {
             this.clearDialogVisible("createTaskForm");
           })
-          .catch((_) => {});
+          .catch(_ => {});
       }
     },
     // 申请任务取消
@@ -287,18 +270,18 @@ export default {
     // 申请任务提交
     subMitDialogVisible(formName) {
       // 表单校验
-      this.$refs[formName].validate((valid) => {
+      this.$refs[formName].validate(valid => {
         if (valid) {
           console.log("申请任务提交表单内容：", this.createTaskForm);
           this.$confirm("您已成功提交任务，请等待管理员审核。", "系统提示", {
             confirmButtonText: "确定",
             cancelButtonText: "撤回",
-            type: "success",
+            type: "success"
           })
             .then(() => {
               this.$message({
                 type: "success",
-                message: "提交成功!",
+                message: "提交成功!"
               });
               // 检验成功后关闭弹窗
               this.clearDialogVisible(formName);
@@ -306,15 +289,15 @@ export default {
             .catch(() => {
               this.$message({
                 type: "info",
-                message: "已撤回提交!",
+                message: "已撤回提交!"
               });
             });
         } else {
           return false;
         }
       });
-    },
+    }
   },
-  watch: {},
+  watch: {}
 };
 </script>

src/components/common/BottomForm/MyMission.vue

@@ -79,10 +79,9 @@ export default {
       },
       // 分页组件（根据后台返回结果赋值）
       paginationData: {
-        pageSize: 0,
-        pagerCount: 5,
+        pageSize: 5,
         pageSizes: [5, 10, 20, 50],
-        total: 200,
+        total: 0,
         currentPage: 1,
         currentChange: val => {
           this.handleCurrentChange(val);

src/components/common/WholeProcessManagement.vue

@@ -218,6 +218,9 @@ export default {
             this.tableData = res.content.data;
             this.tableInitLoading = false;
             this.paginationData.total = res.content.count;
+          } else {
+            this.initLoading = false;
+            this.$message.error(res.message);
           }
         },
         error => {