web_sh_audit/src/components/common/BottomForm/MyMission.vue

<template>
  <!-- 我的任务弹窗 fullscreen -->
  <el-dialog
    custom-class="myMission"
    title="我的任务"
    :visible.sync="dialogVisible"
    width="70%"
    height="60%"
    :before-close="handleClose"
  >
    <template slot="title">
      <div class="dialogTitle">
        <div class="dialogTitleIcon"></div>
        我的任务
      </div>
    </template>
    <el-form :inline="true" ref="myTaskForm" :model="formInline">
      <el-form-item label="任务类型">
        <el-select 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="2,3"></el-option>
          <el-option label="未审核" value="0,1"></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%"
      height="calc(80vh - 400px)"
      stripe
      @row-click="ToView"
      v-loading="tableInitLoading"
    >
      <el-table-column type="index" width="50"> </el-table-column>
      <!-- <el-table-column prop="c_task_id" label="任务编号"> </el-table-column> -->
      <el-table-column prop="c_task_name" label="任务名称"> </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 prop="state" label="状态">
        <template slot-scope="scope">
          <el-tag :type="scope.row.state >= 2 ? 'success' : 'info'" disable-transitions>{{
            scope.row.state >= 2 ? "已审核" : "未审核"
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="c_task_type" label="任务类型">
        <template slot-scope="scope">
          {{ getSelectByIndex("projectType", scope.row.c_task_type) }}
        </template>
      </el-table-column>
      <el-table-column prop="c_area_code" label="所属街镇">
        <template slot-scope="scope">
          {{ getSelectByIndex("associatedItems", scope.row.c_area_code) }}
        </template></el-table-column
      >
    </el-table>
    <span slot="footer" class="dialog-footer">
      <Pagination :paginationData="paginationData" />
    </span>
  </el-dialog>
</template>

<script>
/**
 * 底部菜单（我的任务）组件
 * @author: LiuMengxiang
 * @Date: 2022年11月21-25日
 */
import Pagination from "../Pagination.vue";
export default {
  name: "MyMission",
  components: { Pagination },
  data() {
    return {
      tableInitLoading: false,
      // 我的任务弹窗显示状态
      dialogVisible: false,
      //   查询条件
      formInline: {
        taskType: "",
        associatedItems: "",
        auditStatus: ""
      },
      // 数据字典暂存对象
      selectSelectDataMap: {
        projectType: [],
        associatedItems: [],
        associatedItemsOptions: []
      },
      // 分页组件（根据后台返回结果赋值）
      paginationData: {
        pageSize: 5,
        pageSizes: [5, 10, 20, 50],
        total: 0,
        currentPage: 1,
        currentChange: val => {
          this.handleCurrentChange(val);
        },
        handleSizeChange: val => {
          this.handleSizeChange(val);
        }
      },
      // 任务类型options
      taskTypeOptions: [],
      // 关联项目options
      associatedItemsOptions: [],
      // 我的任务form表单
      tableData: []
    };
  },
  created() {
    // 我的任务事件监听
    this.$bus.$off("wdrw");
    this.$bus.$on("wdrw", () => {
      this.changeShowBottomMenusStatus();
    });
  },
  destroy() {
    // 当容器销毁时，需要停止监听该事件
    this.$bus.$off("wdrw");
  },
  props: [],
  methods: {
    // 数据字典对照显示
    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;
          }
        });
      }
      return slotValue;
    },
    // 请求获取所有关联项目数据
    getAllPorjects() {
      if (!this.initLoading) {
        this.initLoading = true;
      }
      let params = new FormData();
      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 }];
      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);
        }
      );
    },

    // 切换条数
    handleSizeChange(val) {
      this.paginationData.pageSize = val;
      this.onSubmit();
    },
    //   切换页
    handleCurrentChange(val) {
      this.paginationData.currentPage = val;
      this.onSubmit();
    },
    // 查询事件
    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) {
          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);
        }
        if (this.formInline.auditStatus) {
          params.append("states", this.formInline.auditStatus);
        } else {
          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.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);
          }
        );
      }
    },
    // 查询条件重置
    resetForm() {
      this.formInline = {
        taskType: "",
        associatedItems: "",
        auditStatus: ""
      };
      this.onSubmit();
    },
    // 单击table item
    ToView(val) {
      if(val.state >= 2){
        // 调用全局事件总线中的指定事件
        this.$bus.$emit("openMyTask",[val.c_task_type,val.c_area_code]);
        this.handleClose();
      }
    },
    // 当用户点击svg底座时，切换底部菜单显示隐藏状态。
    changeShowBottomMenusStatus() {
      // 打开弹窗
      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.clearDialogVisible();
        // this.$confirm("确认关闭？")
        //   .then(_ => {
        //     this.clearDialogVisible();
        //   })
        //   .catch(_ => {});
      }
    },
    // 我的任务取消
    clearDialogVisible() {
      // 关闭弹窗
      this.dialogVisible = false;
      // 修改父级菜单变量（弹窗显示状态和显示底部菜单）
      if (this.$ifMenu("3", "")) {
        this.$emit("changeShowBottomMenusStatus", true);
      }
    }
  },
  watch: {}
};
</script>