web_sh_audit/src/components/common/WholeProcessManagement.vue

<template>
  <!-- 全流程管理列表组件 -->
  <div id="WholeProcessManagement">
    <el-form :inline="true" ref="myTaskForm" :model="formInline" style="padding: 10px">
      <el-form-item label="项目类型">
        <el-select size="mini" v-model="formInline.c_task_type" placeholder="项目类型" clearable filterable>
          <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.c_owning_street_town" placeholder="所属街镇" clearable filterable>
          <el-option
            v-for="item in selectSelectDataMap['associatedItems']"
            :key="item.index"
            :label="item.name"
            :value="item.index"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="年份">
        <el-date-picker size="mini" v-model="formInline.c_create_date" value-format="yyyy" type="year" placeholder="选择年">
        </el-date-picker>
      </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
      v-loading="tableInitLoading"
      :data="tableData"
      style="width: calc(100% - 20px); padding: 0 10px"
      height="calc(80vh - 400px)"
      stripe
      :row-class-name="tableRowClassName"
      @row-click="rowClick"
    >
      <el-table-column type="index" width="50"> </el-table-column>
      <el-table-column prop="c_project_id" label="项目编号"> </el-table-column>
      <el-table-column prop="c_project_name" label="项目名称"> </el-table-column>
      <el-table-column prop="c_task_type_str" label="项目类型"> </el-table-column>
      <el-table-column prop="c_owning_street_town_str" label="所属街镇"> </el-table-column>
      <el-table-column prop="c_create_date" label="创建时间">
        <template slot-scope="scope">
          {{ $dayjs(scope.row.c_create_date).format("YYYY-MM-DD HH:mm:ss") }}
        </template>
      </el-table-column>
      <el-table-column prop="c_year" label="年份"> </el-table-column>
    </el-table>
    <div id="WholeProcessManagement-footer">
      <Pagination :paginationData="paginationData" />
    </div>
    <!-- 全流程管理流程组件 -->
    <StepsMyBox
      id="stepsBox"
      :clickData="clickData"
      v-show="StepsMyBoxShowState"
      @hideStepsMyBoxState="StepsMyBoxShowState = false"
    />
  </div>
</template>
<script>
/**
 * 头部菜单（全流程管理列表）组件
 * @author: LiuMengxiang
 * @Date: 2022年11月21-25日
 */
import StepsMyBox from "./StepsMyBox.vue";
import Pagination from "@/components/common/Pagination.vue";
export default {
  name: "WholeProcessManagement",
  components: { StepsMyBox, Pagination },
  data() {
    return {
      tableInitLoading: true,
      // 数据字典暂存对象
      selectSelectDataMap: {
        projectType: [],
        associatedItems: []
      },
      StepsMyBoxShowState: false,
      //   查询条件
      formInline: {
        c_task_type: "",
        c_owning_street_town: "",
        c_create_date: ""
      },
      // 我的任务form表单
      tableData: [],
      paginationData: {
        pageSize: 10,
        currentPage: 1,
        pageSizes: [10, 20, 50],
        total: 0,
        currentChange: val => {
          this.handleCurrentChange(val);
        },
        handleSizeChange: val => {
          this.handleSizeChange(val);
        }
      },
      clickData: {}
    };
  },
  props: {},
  mounted() {
    // 首先获取数据字典中的下拉框数据
    this.selectSelectData("0", "c_task_type", "projectType");
    this.selectSelectData("0", "浦东新区行政区划", "associatedItems");
    this.onSubmit();
  },
  watch: {},
  methods: {
    // 数据字典查询
    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);
        }
      );
    },
    // 数据字典对照显示
    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;
    },
    // 切换条数
    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", "60");
      params.append("states", "2,3");
      params.append("pageSize", this.paginationData.pageSize);
      params.append("page", this.paginationData.currentPage - 1);
      let searchParam = [];
      if (this.formInline.c_task_type) {
        let param1 = {
          field: "c_task_type",
          searchType: "1",
          content: {
            value: this.formInline.c_task_type
          }
        };
        searchParam.push(param1);
      }
      if (this.formInline.c_owning_street_town) {
        let param1 = {
          field: "c_owning_street_town",
          searchType: "1",
          content: {
            value: this.formInline.c_owning_street_town
          }
        };
        searchParam.push(param1);
      }
      if (this.formInline.c_create_date) {
        let param1 = {
          field: "c_year",
          searchType: "1",
          content: {
            value: this.formInline.c_create_date - 0
          }
        };
        searchParam.push(param1);
      }
      params.append("search", JSON.stringify(searchParam));
      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) {
            this.tableData = res.content.data;
            if (this.tableData.length > 0) {
              this.tableData.forEach(item => {
                item.c_task_type_str = this.getSelectByIndex("projectType", item.c_task_type);
                item.c_owning_street_town_str = this.getSelectByIndex("associatedItems", item.c_owning_street_town);
              });
            }
            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 = {
        c_task_type: "",
        c_owning_street_town: "",
        c_create_date: ""
      };
      this.onSubmit();
    },
    // 给每一行row的数据对象里添加index属性
    tableRowClassName({ row, rowIndex }) {
      row.index = rowIndex;
    },
    // 用户单击某行时触发操作
    rowClick(row, column, event) {
      // console.log(row,column,event);
      this.ToView(row.index);
    },
    // 查看
    ToView(index) {
      this.StepsMyBoxShowState = true;
      this.clickData = this.tableData[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;
  &-footer {
    width: 99%;
    margin: 0 auto;
    height: 10%;
    position: absolute;
    bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
}
</style>