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
          size="mini"
          v-model="formInline.taskType"
          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="关联项目">
        <el-select
          size="mini"
          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
          size="mini"
          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%"
      height="calc(80vh - 400px)"
      stripe
      @click="ToView"
    >
      <el-table-column type="index" width="50"> </el-table-column>
      <el-table-column prop="taskId" label="任务编号"> </el-table-column>
      <el-table-column prop="taskName" label="任务名称"> </el-table-column>
      <el-table-column prop="createDate" label="创建时间"> </el-table-column>
      <el-table-column prop="state" label="状态">
        <template slot-scope="scope">
          <el-tag
            :type="scope.row.state === '已审核' ? 'success' : 'info'"
            disable-transitions
            >{{ scope.row.state }}</el-tag
          >
        </template>
      </el-table-column>
      <el-table-column prop="taskType" label="任务类型"> </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: "CreateTaskForm",
  components: { Pagination },
  data() {
    return {
      // 我的任务弹窗显示状态
      dialogVisible: false,
      //   查询条件
      formInline: {
        taskType: "",
        associatedItems: "",
        auditStatus: "",
      },
      // 分页组件（根据后台返回结果赋值）
      paginationData: {
        pageSize: 0,
        pagerCount: 5,
        pageSizes: [5, 10, 20, 50],
        total: 200,
        currentPage: 1,
        currentChange: (val) => {
          this.handleCurrentChange(val);
        },
        handleSizeChange: (val) => {
          this.handleSizeChange(val);
        },
      },
      // 任务类型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: [
        {
          createDate: "2016-05-03",
          taskName: "任务名称",
          taskId: "任务编号",
          state: "已审核",
          taskType: "土地资源",
        },
        {
          createDate: "2016-05-03",
          taskName: "任务名称",
          taskId: "任务编号",
          state: "未审核",
          taskType: "土地资源",
        },
        {
          createDate: "2016-05-03",
          taskName: "任务名称",
          taskId: "任务编号",
          state: "已审核",
          taskType: "土地资源",
        },
        {
          createDate: "2016-05-03",
          taskName: "任务名称",
          taskId: "任务编号",
          state: "已审核",
          taskType: "土地资源",
        },
        {
          createDate: "2016-05-03",
          taskName: "任务名称",
          taskId: "任务编号",
          state: "已审核",
          taskType: "土地资源",
        },
      ],
    };
  },
  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} 条`);
      this.onSubmit();
    },
    //   切换页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.paginationData.currentPage = val;
      this.onSubmit();
    },
    // 查询事件
    onSubmit() {
      console.log("submit!");
    },
    // 查询条件重置
    resetForm() {
      this.formInline = {
        taskType: "",
        associatedItems: "",
        auditStatus: "",
      };
      this.onSubmit();
    },
    // 单击table item
    ToView(val) {
      console.log(val, "click MyMission table item");
    },
    // 当用户点击svg底座时，切换底部菜单显示隐藏状态。
    changeShowBottomMenusStatus() {
      if (this.dialogVisible) {
        this.handleClose();
      } else {
        // 打开弹窗
        this.dialogVisible = !this.dialogVisible;
        this.$emit("changeShowBottomMenusStatus", false);
      }
    },
    // 弹窗关闭询问
    handleClose() {
      if (this.dialogVisible) {
        this.$confirm("确认关闭？")
          .then((_) => {
            this.clearDialogVisible();
          })
          .catch((_) => {});
      }
    },
    // 我的任务取消
    clearDialogVisible() {
      // 关闭弹窗
      this.dialogVisible = false;
      // 修改父级菜单变量（弹窗显示状态和显示底部菜单）
      this.$emit("changeShowBottomMenusStatus", true);
    },
  },
  watch: {},
};
</script>