web_sh_audit/src/components/common/WholeProcessManagement.vue

<template>
  <!-- 全流程管理列表组件 -->
  <div id="WholeProcessManagement">
    <el-form :inline="true" ref="myTaskForm" :model="formInline" class="demo-form-inline" style="padding: 10px;">
      <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: calc(100% - 20px);padding:0 10px;" height="calc(80vh - 400px)" stripe>
      <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-column fixed="right" label="操作">
        <template slot-scope="scope">
          <el-button size="mini" icon="el-icon-search" @click="ToView(scope.$index, tableData)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="padding: 10px;">
      <el-pagination
        style="float: right"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="1"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="10"
        layout="total, prev, pager, next, sizes, jumper"
        :total="400"
      >
      </el-pagination>
    </div>
    <!-- 全流程管理流程组件 -->
    <StepsMyBox id="stepsBox" v-show="StepsMyBoxShowState" @hideStepsMyBoxState="StepsMyBoxShowState = false"/>
  </div>
</template>
<script>
/**
 * 头部菜单（全流程管理列表）组件
 * @author: LiuMengxiang
 * @Date: 2022年11月21-25日
 */
import StepsMyBox from "./StepsMyBox.vue";
export default {
  name: "WholeProcessManagement",
  components: {StepsMyBox},
  data() {
    return {
      StepsMyBoxShowState: 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: [
        {
          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: "土地资源"
        }
      ]
    };
  },
  props: {},
  mounted() {},
  watch: {},
  methods: {
    // 切换条数
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    //   切换页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    // 查询事件
    onSubmit() {
      console.log("submit!");
    },
    // 查询条件重置
    resetForm() {
      this.formInline = {
        taskType: "",
        associatedItems: "",
        auditStatus: ""
      };
      this.onSubmit();
    },
    // 查看
    ToView(index, rows) {
      this.StepsMyBoxShowState = true;
      console.log(rows, index);
    }
  }
};
</script>
<style lang="less" scoped>
#WholeProcessManagement {
  position: absolute;
  display: flex;
  background: #00274d;
  z-index: 999;
  margin-top: 60px;
  width: 100%;
  height: calc(100% - 60px);
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -khtml-user-select: none;
  user-select: none;
  overflow: hidden;
  flex-direction: column;
}
</style>