web端核查结果页面开发。

src/components/common/BottomForm/VerificationResult.vue

@@ -1,122 +1,238 @@
 <template>
-  <!-- 核查结果弹窗 -->
+  <!-- 核查结果弹窗 fullscreen -->
   <el-dialog
+    custom-class="myMission"
+    title="核查结果"
     :visible.sync="dialogVisible"
-    :show-close="false"
-    width="1000px"
+    width="70%"
+    height="60%"
     :before-close="handleClose"
-    v-loading="initLoading"
   >
     <template slot="title">
       <div class="dialogTitle">
         <div class="dialogTitleIcon"></div>
-        现场核查事项清单
+        核查结果
       </div>
     </template>
-    <el-table
-      :data="tableData"
-      style="width: 100%; margin-bottom: 20px"
-      height="600px"
-      row-key="id"
-      border
-      default-expand-all
-      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
-    >
-      <el-table-column label="现场核查事项" prop="name" sortable> </el-table-column>
-      <el-table-column label="现场核查人员" prop="name" sortable> </el-table-column>
-      <el-table-column label="疑点定位" prop="address"> </el-table-column>
-      <el-table-column label="创建时间" prop="date" sortable> </el-table-column>
-      <el-table-column align="right">
-        <template slot="header">
-          <el-input v-model="search" size="mini" placeholder="输入关键字搜索" />
-        </template>
-        <template slot-scope="scope">
-          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
-          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
+    <!-- app-任务搜索条件 -->
+    <el-form :inline="true" ref="myTaskForm" :model="formInline">
+      <el-form-item label="任务类型">
+        <el-select size="mini" v-model="formInline.taskType" filterable placeholder="请选择" width="100%" clearable>
+          <el-option v-for="item in selectSelectDataMap.projectType" :key="item.index" :label="item.name" :value="item.index">
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="关联项目">
+        <el-select size="mini" v-model="formInline.associatedItems" placeholder="关联项目" clearable filterable>
+          <el-option
+            v-for="item in selectSelectDataMap.associatedItemsOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          >
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="已读状态">
+        <el-select size="mini" v-model="formInline.auditStatus" placeholder="已读状态" clearable>
+          <el-option label="全部" value="-1"></el-option>
+          <el-option label="已读" value="1"></el-option>
+          <el-option label="未读" value="0"></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>
+    <!-- tabsBOX -->
+    <el-tabs tab-position="top" height="calc(60vh)" v-if="tableData" :value="tabsValue">
+      <!-- item-tab -->
+      <el-tab-pane
+        v-for="item in tableData"
+        :key="item.id"
+        :label="item.c_app_title"
+        :name="item.id"
+        v-loading="tableInitLoading"
+        :lazy="true"
+      >
+        <!-- 描述列表 -->
+        <el-descriptions class="margin-top" :column="3" size="small">
+          <el-descriptions-item>
+            <template slot="label">
+              <i class="el-icon-s-opportunity"></i>
+              任务类型
+            </template>
+            <el-tag size="small">
+              {{ getSelectByIndex("projectType", item.c_task_type) }}
+            </el-tag>
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label">
+              <i class="el-icon-location-outline"></i>
+              所属街镇
+            </template>
+            {{ getSelectByIndex("associatedItems", item.c_area_code) }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label">
+              <i class="el-icon-s-management"></i>
+              已读状态
+            </template>
+            <el-tag size="small" :type="item.c_app_state == 1 ? 'success' : 'info'" disable-transitions>{{
+              item.c_app_state == 1 ? "已读" : "未读"
+            }}</el-tag>
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label">
+              <i class="el-icon-time"></i>
+              发布时间
+            </template>
+            {{ $dayjs(item.c_create_time).format("YYYY-MM-DD HH:mm:ss") }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label">
+              <i class="el-icon-tickets"></i>
+              任务描述
+            </template>
+            {{ item.c_app_content }}
+          </el-descriptions-item>
+        </el-descriptions>
+        <!-- tableBox -->
+        <el-table
+          v-if="testVIfState"
+          :data="tableDataList[item.id]"
+          style="width: 100%"
+          stripe
+          v-loading="tableInitInfoLoading"
+        >
+          <el-table-column type="index" width="50" label="序号"> </el-table-column>
+          <el-table-column label="疑点标题">
+            <template slot-scope="scope">
+              {{ scope.row.pointsJson["id"] }}
+            </template>
+          </el-table-column>
+          <el-table-column prop="c_user_id" label="任务人id"> </el-table-column>
+          <el-table-column prop="c_create_time" label="创建时间">
+            <template slot-scope="scope">
+              {{ $dayjs(scope.row.c_create_time).format("YYYY-MM-DD HH:mm:ss") }}
+            </template>
+          </el-table-column>
+          <el-table-column label="图斑编号">
+            <template slot-scope="scope">
+              {{ scope.row.pointsJson.properties["图斑编号"] }}
+            </template>
+          </el-table-column>
+          <el-table-column prop="pointsJson.properties.state" label="核查图片">
+            <template slot-scope="scope">
+              <!-- <span v-for="fileName in scope.row.pointsJson.properties.fileList" :key="fileName">
+                {{ fileName }}
+              </span> -->
+              <el-image
+                v-for="fileUrl in scope.row.pointsJson.properties.fileList"
+                :key="fileUrl"
+                style="width: 100px; height: 100px"
+                :src="fileUrl"
+                :preview-src-list="srcList(scope.row.pointsJson.properties.fileList)"
+              >
+              </el-image>
+            </template>
+          </el-table-column>
+          <el-table-column prop="pointsJson.properties.state" label="核查状态">
+            <template slot-scope="scope">
+              <el-tag
+                size="small"
+                :type="scope.row.pointsJson.properties.state == 1 ? 'success' : 'info'"
+                disable-transitions
+                >{{ scope.row.pointsJson.properties.state == 1 ? "已核查" : "未核查" }}</el-tag
+              >
+            </template>
+          </el-table-column>
+          <el-table-column label="疑点描述">
+            <template slot-scope="scope">
+              {{ scope.row.pointsJson.properties["desc"] }}
+            </template>
+          </el-table-column>
+        </el-table>
+        <Pagination
+          v-if="tableDataList[item.id] && tableDataList[item.id].paginationData"
+          :paginationData="tableDataList[item.id].paginationData"
+        />
+      </el-tab-pane>
+    </el-tabs>
+    <span slot="footer" class="dialog-footer">
+      <Pagination :paginationData="paginationData" />
+    </span>
   </el-dialog>
 </template>
 
 <script>
 /**
- * 底部菜单（核查手机）组件
+ * 底部菜单（核查结果）组件
  * @author: LiuMengxiang
- * @Date: 2023年04月04日
+ * @Date: 2023年04月01-07日
  */
+import Pagination from "../Pagination.vue";
 export default {
-  name: "verificationResult",
-  components: {},
+  name: "MyMission",
+  components: { Pagination },
   data() {
     return {
-      initLoading: true,
-      submitLoading: false,
-      selectLoading: false,
-      // 申请任务弹窗显示状态
+      tableInitLoading: false,
+      tableInitInfoLoading: false,
+      // 我的任务弹窗显示状态
       dialogVisible: false,
-      legendTree: [],
-      legendTreeOptionsLoading: true,
-      legendTreeOptions: [],
-      // 新建任务form表单
-      search: "",
-      tableData: [
-        {
-          id: 1,
-          date: "2016-05-02",
-          name: "王小虎",
-          address: "上海市普陀区金沙江路 1518 弄"
-        },
-        {
-          id: 2,
-          date: "2016-05-04",
-          name: "王小虎",
-          address: "上海市普陀区金沙江路 1517 弄"
-        },
-        {
-          id: 3,
-          date: "2016-05-01",
-          name: "王小虎",
-          address: "上海市普陀区金沙江路 1519 弄",
-          children: [
-            {
-              id: 31,
-              date: "2016-05-01",
-              name: "王小虎",
-              address: "上海市普陀区金沙江路 1519 弄"
-            },
-            {
-              id: 32,
-              date: "2016-05-01",
-              name: "王小虎",
-              address: "上海市普陀区金沙江路 1519 弄"
-            }
-          ]
-        },
-        {
-          id: 4,
-          date: "2016-05-03",
-          name: "王小虎",
-          address: "上海市普陀区金沙江路 1516 弄"
-        }
-      ],
+      //   查询条件
+      formInline: {
+        taskType: "",
+        associatedItems: "",
+        auditStatus: ""
+      },
       // 数据字典暂存对象
       selectSelectDataMap: {
         projectType: [],
         associatedItems: [],
         associatedItemsOptions: []
       },
-      streetOfOwnership_str: "",
-      taskType_str: ""
+      // 分页组件（根据后台返回结果赋值）
+      paginationData: {
+        pageSize: 5,
+        pageSizes: [5, 10, 20, 50],
+        total: 0,
+        currentPage: 1,
+        currentChange: val => {
+          this.handleCurrentChange(val);
+        },
+        handleSizeChange: val => {
+          this.handleSizeChange(val);
+        }
+      },
+      paginationDataInitValue: {
+        pageSize: 5,
+        pageSizes: [5, 10, 20, 50],
+        total: 0,
+        currentPage: 1,
+        currentChange: val => {
+          this.handleCurrentChange2(val);
+        },
+        handleSizeChange: val => {
+          this.handleSizeChange2(val);
+        }
+      },
+      // 任务类型options
+      taskTypeOptions: [],
+      // 关联项目options
+      associatedItemsOptions: [],
+      // 我的任务form表单
+      tableData: [],
+      // 我的任务二次处理对象
+      tableDataList: [],
+      // 为了页面的正常渲染，延迟显示table区域
+      testVIfState: false,
+      // 当前选中的tabs名称（任务id）
+      tabsValue: ""
     };
   },
-  created() {
-    // 首先获取数据字典中的下拉框数据
-    this.selectSelectData("0", "c_task_type", "projectType");
-    this.selectSelectData("0", "浦东新区行政区划", "associatedItems");
-    // 请求所有项目数据
-    this.getAllPorjects();
-  },
   mounted() {
     // 申请任务事件监听
     this.$bus.$off("verificationResult");
@@ -130,52 +246,24 @@ export default {
   },
   props: [],
   methods: {
-    handleEdit(index, row) {
-      console.log(index, row);
-    },
-    handleDelete(index, row) {
-      console.log(index, row);
-    },
-    // 用户切换关联项目
-    changePorject(value) {
-      // 根据项目id得到所属街道和项目类型
-      this.selectSelectDataMap.associatedItemsOptions.forEach(item => {
-        if (item.value == value) {
-          this.createTaskForm.c_area_code = item.c_area_code;
-          this.createTaskForm.c_task_type = item.c_task_type;
-        }
-      });
-      // 所属街道遍历渲染
-      this.selectSelectDataMap.projectType.forEach(item => {
-        if (item.index == this.createTaskForm.c_task_type) {
-          this.c_task_type_str = item.name;
-        }
-      });
-      // 任务类型遍历渲染
-      this.selectSelectDataMap.associatedItems.forEach(item => {
-        if (item.index == this.createTaskForm.c_area_code) {
-          this.c_area_code_str = item.name;
-        }
-      });
-
-      this.$bus.$emit("openMyTask", [this.createTaskForm.c_task_type, this.createTaskForm.c_area_code]);
+    srcList(fileList) {
+      let fileSrcList = [];
+      for (let fileName in fileList) {
+        Object.assign(fileSrcList, [fileList[fileName]]);
+      }
+      return fileSrcList;
     },
-    // 数据字典查询
-    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;
+    // 数据字典对照显示
+    getSelectByIndex(selectName, index) {
+      let slotValue = "";
+      if (this.selectSelectDataMap[selectName] && this.selectSelectDataMap[selectName].length > 0) {
+        this.selectSelectDataMap[selectName].forEach(item => {
+          if (item.index == index) {
+            slotValue = item.name;
           }
-        },
-        error => {
-          this.$message.error(error);
-          console.log(error);
-        }
-      );
+        });
+      }
+      return slotValue;
     },
     // 请求获取所有关联项目数据
     getAllPorjects() {
@@ -183,11 +271,11 @@ export default {
         this.initLoading = true;
       }
       let params = new FormData();
-      params.append("columnId", "48");
+      params.append("columnId", "29");
       params.append("states", "2,3");
       params.append("pageSize", 999);
       params.append("page", 0);
-      let sortparam = [{ field: "c_create_time", orderByType: 2 }];
+      let sortparam = [{ field: "c_create_date", orderByType: 2 }];
       params.append("orderBy", JSON.stringify(sortparam));
       this.$Post(this.urlsCollection.selectContentList, params).then(
         res => {
@@ -195,9 +283,9 @@ export default {
             let associatedItemsOptionsData = res.content.data;
             associatedItemsOptionsData.filter(item => {
               this.selectSelectDataMap.associatedItemsOptions.push({
-                label: item.c_task_name,
+                label: item.c_project_name,
                 value: item.id,
-                c_area_code: item.c_area_code,
+                c_owning_street_town: item.c_owning_street_town,
                 c_task_type: item.c_task_type
               });
             });
@@ -213,66 +301,260 @@ export default {
         }
       );
     },
+
+    // 切换条数
+    handleSizeChange(val) {
+      this.paginationData.pageSize = val;
+      this.onSubmit();
+    },
+    //   切换页
+    handleCurrentChange(val) {
+      this.paginationData.currentPage = val;
+      this.onSubmit();
+    },
+    // 切换条数2
+    handleSizeChange2(val) {
+      this.tableDataList[this.tabsValue].paginationData.pageSize = val;
+      this.getAppTaskInfo();
+    },
+    //   切换页2
+    handleCurrentChange2(val) {
+      this.tableDataList[this.tabsValue].paginationData.currentPage = val;
+      this.getAppTaskInfo();
+    },
+    // 查询事件
+    onSubmit() {
+      if (!this.tableInitLoading) {
+        this.tableInitLoading = true;
+        let params = new FormData();
+        params.append("columnId", "48");
+        params.append("pageSize", this.paginationData.pageSize);
+        params.append("page", this.paginationData.currentPage - 1);
+        let searchParam = [];
+        let param = {
+          field: "c_user_id",
+          searchType: "1",
+          content: {
+            value: localStorage.getItem("USER_ID")
+          }
+        };
+        searchParam.push(param);
+        if (this.formInline.taskType && this.formInline.taskType != 5) {
+          let param1 = {
+            field: "c_task_type",
+            searchType: "1",
+            content: {
+              value: this.formInline.taskType
+            }
+          };
+          searchParam.push(param1);
+        }
+        if (this.formInline.associatedItems) {
+          let param1 = {
+            field: "c_associated_item_ids",
+            searchType: "2",
+            content: {
+              value: this.formInline.associatedItems
+            }
+          };
+          searchParam.push(param1);
+        }
+        let param1 = {
+          field: "c_app_tag",
+          searchType: "1",
+          content: {
+            value: true
+          }
+        };
+        searchParam.push(param1);
+        if (this.formInline.auditStatus && this.formInline.auditStatus >= 0) {
+          let param2 = {
+            field: "c_app_state",
+            searchType: "1",
+            content: {
+              value: this.formInline.auditStatus
+            }
+          };
+          searchParam.push(param2);
+        }
+        params.append("states", "0,1,2,3");
+        params.append("search", JSON.stringify(searchParam));
+        let sortparam = [{ field: "c_create_time", 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) {
+              this.tableData = res.content.data;
+              this.tableInitLoading = false;
+              this.tableInitInfoLoading = true;
+              this.getAppTaskInfo();
+              this.paginationData.total = res.content.count;
+            } else {
+              this.tableData = [];
+              this.tableInitLoading = false;
+              this.$message.error(res.message);
+            }
+          },
+          error => {
+            this.tableData = [];
+            this.tableInitLoading = false;
+            this.$message.error(error);
+          }
+        );
+      }
+    },
+    // 当app任务查询结束后，根据c_task_id查询疑点信息
+    getAppTaskInfo() {
+      if (this.tableData.length > 0) {
+        this.testVIfState = false;
+        let resDataNum = 0;
+        this.tableData.forEach(item => {
+          let cTaskId = item.id;
+          let paginationData = this.paginationDataInitValue;
+          if (
+            this.tableDataList &&
+            this.tableDataList[cTaskId] != undefined &&
+            this.tableDataList[cTaskId].paginationData != undefined
+          ) {
+            paginationData = this.tableDataList[cTaskId].paginationData;
+          }
+          let params = new FormData();
+          params.append("columnId", "1537");
+          params.append("pageSize", paginationData.pageSize);
+          params.append("page", paginationData.currentPage - 1);
+
+          let searchParam = [];
+          let param = {
+            field: "c_user_id",
+            searchType: "1",
+            content: {
+              value: localStorage.getItem("USER_ID")
+            }
+          };
+          searchParam.push(param);
+          let param1 = {
+            field: "c_task_id",
+            searchType: "2",
+            content: {
+              value: cTaskId
+            }
+          };
+          searchParam.push(param1);
+          params.append("states", "0,1,2,3");
+          params.append("search", JSON.stringify(searchParam));
+          let sortparam = [{ field: "c_create_time", 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 resData = res.content.data;
+                if (resData.length > 0) {
+                  resData.forEach(resItem => {
+                    if (resItem.c_doubtful_points) {
+                      resItem.pointsJson = JSON.parse(resItem.c_doubtful_points);
+                    }
+                  });
+                }
+                this.tableDataList[cTaskId] = resData;
+                if (!this.tableDataList[cTaskId].paginationData) {
+                  this.tableDataList[cTaskId].paginationData = Object.assign({}, this.paginationDataInitValue);
+                }
+                this.tableDataList[cTaskId].paginationData.total = res.content.count;
+                resDataNum++;
+                if (resDataNum == this.tableData.length) {
+                  // 所有数据加载完成后直接显示
+                  setTimeout(() => {
+                    this.tabsValue = this.tableData[0].id;
+                    this.testVIfState = true;
+                  }, 100);
+                }
+                this.tableInitInfoLoading = false;
+              } else {
+                this.tableDataList[cTaskId] = [];
+                this.$message.error(res.message);
+              }
+            },
+            error => {
+              this.tableDataList[cTaskId] = [];
+              this.$message.error(error);
+            }
+          );
+        });
+      }
+    },
+    // 查询条件重置
+    resetForm() {
+      this.formInline = {
+        taskType: "",
+        associatedItems: "",
+        auditStatus: ""
+      };
+      this.onSubmit();
+    },
     // 当用户点击svg底座时，切换底部菜单显示隐藏状态。
     changeShowBottomMenusStatus() {
       // 打开弹窗
-      this.dialogVisible = true;
-      this.$emit("changeShowBottomMenusStatus", false);
+      if (!this.dialogVisible) {
+        this.dialogVisible = true;
+        if (this.$ifMenu("3", "")) {
+          if (this.selectSelectDataMap.projectType.length === 0) {
+            // 首先获取数据字典中的下拉框数据
+            this.selectSelectData("0", "c_task_type", "projectType");
+            this.selectSelectData("0", "浦东新区行政区划", "associatedItems");
+            // 请求所有项目数据
+            this.getAllPorjects();
+          }
+          this.onSubmit();
+          this.$emit("changeShowBottomMenusStatus", false);
+        }
+      }
+    },
+    // 数据字典查询
+    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);
+        }
+      );
     },
     // 弹窗关闭询问
     handleClose() {
       if (this.dialogVisible) {
-        this.$confirm("确认关闭？")
-          .then(_ => {
-            this.clearDialogVisible("createTaskForm");
-          })
-          .catch(_ => {});
+        this.clearDialogVisible();
       }
     },
-    // 申请任务取消
-    clearDialogVisible(formName) {
+    // 核查结果关闭
+    clearDialogVisible() {
       // 关闭弹窗
+      this.formInline = {
+        taskType: "",
+        associatedItems: "",
+        auditStatus: ""
+      };
       this.dialogVisible = false;
-      // 重置表单
-      this.$refs[formName].resetFields();
       // 修改父级菜单变量（弹窗显示状态和显示底部菜单）
-      this.$emit("changeShowBottomMenusStatus", true);
-    },
-    getLegendData(columnId, label) {
-      let layerParams = new FormData();
-      layerParams = {
-        columnId: columnId,
-        states: "0,1,2,3",
-        pageSize: 10,
-        page: 0
-      };
-      this.$Post(this.urlsCollection.selectContentList, layerParams).then(
-        res => {
-          if (res.code === 200 && res.content.data.length > 0) {
-            // 初始化时将请求到的疑点数据中是否疑点全部改为未标记，疑点，非疑点三种状态
-            let childrens = res.content.data.map(item => {
-              if (item.c_content) {
-                let conetentJson = JSON.parse(item.c_content);
-                // console.log(conetentJson.id, conetentJson.properties["图斑编号"]);
-                return {
-                  label: conetentJson.id,
-                  value: item.c_content
-                };
-              }
-            });
-            this.legendTreeOptions.push({
-              value: columnId,
-              label: label,
-              children: childrens
-            });
-          }
-        },
-        error => {
-          this.$message.error("请求错误!");
-        }
-      );
+      if (this.$ifMenu("3", "")) {
+        this.$emit("changeShowBottomMenusStatus", true);
+      }
     }
   },
   watch: {}
 };
 </script>
+<style>
+.el-descriptions__body .el-descriptions__table {
+  color: #fff;
+}
+.el-tabs__item {
+  color: #ccc;
+}
+</style>

src/components/common/BottomMenus.vue

@@ -187,7 +187,7 @@ export default {
               index: 1,
               title: "核查结果",
               bgImage: "wdrw",
-              clickEmit: "notFound"
+              clickEmit: "verificationResult"
               // verificationResult
             }
           ]