shuili_manager/jwtech-admin-page/src/views/projectStatistics/projectStatisticsMsg/index.vue

<template>
  <div class="app-container">
    <!-- 面包屑 -->
    <el-breadcrumb separator="/" style="margin-bottom: 20px">
      <el-breadcrumb-item
        v-for="(item, index) in routeList"
        :key="item + index"
        :to="{ path: item.path }"
        >{{ item.routeName }}</el-breadcrumb-item
      >
    </el-breadcrumb>

    <el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      v-show="showSearch"
      label-width="68px"
    >
      <el-form-item label="项目类型" prop="projectType">
        <el-cascader
          v-model="queryParams.data.projectType"
          :options="projectTypeoptions"
          :props="projectTypeOptionProps"
          @change="handleQuery"
          placeholder="请选择项目类型"
          clearable
          size="small"
          style="width: 100%"
        ></el-cascader>
        <!-- <el-select
          v-model="queryParams.data.projectType"
          placeholder="请选择项目类型"
          @change="handleQuery"
          clearable
          size="small"
          :popper-append-to-body="false"
        >
          <el-option-group
            v-for="(group, index) in projectTypeoptions"
            :key="group.label"
            :label="group.label"
          >
            <el-option
              v-for="dict in group.options"
              :key="dict.dictValue + dict.dictLabel"
              :label="dict.dictLabel"
              :value="index + dict.dictValue"
            >
            </el-option>
          </el-option-group>
        </el-select> -->
      </el-form-item>
      <el-form-item label="项目名称" prop="projectName">
        <el-input
          v-model="queryParams.data.projectName"
          placeholder="请输入项目名称"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        >
          <el-button
            type="primary"
            slot="append"
            icon="el-icon-search"
            size="small"
            @click="handleQuery"
          ></el-button>
        </el-input>
      </el-form-item>

      <el-form-item>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="infoList">
      <!-- <el-table-column type="selection" width="55" align="center" fixed /> -->
      <el-table-column
        label="序号"
        type="index"
        width="50"
        align="center"
        fixed
      />

      <el-table-column
        label="项目名称"
        align="center"
        prop="projectName"
        min-width="120"
      />
      <el-table-column
        label="项目类型"
        align="center"
        prop="projectType"
        :formatter="projectTypeFormat"
        min-width="120"
      />
      <el-table-column
        label="行政区划"
        align="center"
        prop="adcd"
        min-width="120"
        :formatter="$formatAdcd"
      />

      <!-- <el-table-column
        label="时间"
        align="center"
        prop="updateTime"
        min-width="180"
      >
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.updateTime, "{y}-{m}-{d}") }}</span>
        </template>
      </el-table-column> -->
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
        min-width="180"
        fixed="right"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-view"
            @click="viewInfo(scope.row)"
            >查看</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>
<script>
import { listProjectProgressBy } from "@/api/projectStatistics/progress";
export default {
  data() {
    return {
      // 面包屑，路由信息
      routeList: [
        {
          path: "/projectStatistics/projectStatisticsMsg",
          routeName: "项目验收统计",
        },
      ],
      infoList: [],
      loading: true,
      // 显示搜索条件
      showSearch: true,
      total: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        ids: null,
        data: {
          projectType: "ms,1",
        },
        // 排序方式
        params: {
          // 按哪个字段排序
          orderBy: "create_time",
          // desc降序，升序asc
          sortBy: "desc",
        },
      },
      projectTypeOptionProps: {
        emitPath: false,
        checkStrictly: true, //选择任意一级
      },
      // 重大项目字典
      zd_projectTypeOptions: [],
      // 面上项目字典
      ms_projectTypeOptions: [],
    };
  },
  computed: {
    projectTypeoptions() {
      // let op = [
      //   {
      //     label: "重大项目",
      //     options: this.zd_projectTypeOptions,
      //   },
      //   {
      //     label: "面上项目",
      //     options: this.ms_projectTypeOptions,
      //   },
      // ];
      let op = [
        {
          label: "重大项目",
          value: "zd, ",
          children: this.zd_projectTypeOptions.map((item) => {
            return {
              label: item.dictLabel,
              value: "zd," + item.dictValue,
            };
          }),
        },
        {
          label: "面上项目",
          value: "ms, ",
          children: this.ms_projectTypeOptions.map((item) => {
            return {
              label: item.dictLabel,
              value: "ms," + item.dictValue,
            };
          }),
        },
      ];
      // console.log(3333, op);
      return op;
    },
  },
  created() {
    this.getList();
    this.getDicts("major_project").then((response) => {
      this.zd_projectTypeOptions = response.data;
    });
    this.getDicts("general_project").then((response) => {
      this.ms_projectTypeOptions = response.data;
    });
  },
  methods: {
    getList() {
      this.loading = true;
      listProjectProgressBy(this.queryParams).then((res) => {
        this.infoList = res.records;
        // console.log(77777, res);
        this.loading = false;
      });
    },
    // 查看信息
    viewInfo(row) {
      // this.proMsg = row;
      // console.log("proMsg", row);
      // this.viewOpen = true;
      this.routeList[0].routeName = row.projectName;
      this.routeList.push({
        path: "/projectStatistics/projectProcess",
        routeName: row.proCode,
        isEdit: true,
      });

      // 存储面包屑信息
      this.$store.commit("setRouteList", JSON.stringify(this.routeList));
      // 存储专题项目基础信息
      // this.$store.commit("setBaseFormData", JSON.stringify(response.data));
      // 跳转到选项卡页面
      this.$router.push({
        // path: "/project/special/options",
        path: "/projectStatistics/projectProcess?baseDataId=" + row.id,
      });
    },
    // 项目类型字典翻译
    projectTypeFormat(row, column) {
      if (row.isMajor == "zd") {
        return this.selectDictLabel(
          this.zd_projectTypeOptions,
          row.projectType
        );
      } else if (row.isMajor == "ms") {
        return this.selectDictLabel(
          this.ms_projectTypeOptions,
          row.projectType
        );
      }
    },
    // 查询表单重置
    resetQueryForm() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        data: {},
        // 排序方式
        params: {
          // 按哪个字段排序
          orderBy: "create_time",
          // desc降序，升序asc
          sortBy: "desc",
        },
      };
      this.resetForm("queryForm");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetQueryForm();
      this.handleQuery();
    },
  },
};
</script>