spfm-market-front/src/pages/main/achievements/recall.vue

<template>
  <div class="container" style="margin: 15px 0 0 0">
    <fullscreen
      :fullscreen.sync="fullscreen"
      class="container-box"
      style="margin: 0 !important; padding: 0 !important"
    >
      <div class="titbox">
        <h2>绩效回复</h2>
        <div>
          <i class="el-icon-refresh" @click="iconCli(1)"></i>
          <i class="el-icon-full-screen" @click="iconCli(2)"></i>
          <!--                    <i class="el-icon-folder-opened"></i>-->
          <!--                    <i class="el-icon-view"></i>-->
          <!--                    <i class="el-icon-more"></i>-->
        </div>
      </div>
      <div class="search">
        <mySearch :searchList="searchList" @searchInfo="searchInfo"></mySearch>
      </div>

      <div class="tabbox">
        <el-table
          height="calc(100% - 40px)"
          v-loading="loading"
          class="com-table"
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          size="small"
          border
          style="width: 100%"
        >
          <el-table-column
            align="center"
            prop="tabName"
            label="绩效模板名称"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="kpiTitle"
            show-overflow-tooltip
            label="绩效标题"
          >
          </el-table-column>
          <!-- <el-table-column
            align="center"
            prop="sendTime"
            show-overflow-tooltip
            label="派发时间"
          >
          </el-table-column> -->
          <el-table-column
            align="center"
            prop="sendName"
            show-overflow-tooltip
            label="派发人"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="receiveName"
            show-overflow-tooltip
            label="接收人"
          >
          </el-table-column>
          <!-- <el-table-column
            align="center"
            prop="requiredTime"
            show-overflow-tooltip
            label="要求回复时间"
          >
          </el-table-column> -->
          <el-table-column
            align="center"
            prop="stsDesc"
            show-overflow-tooltip
            label="任务状态"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="opTime"
            show-overflow-tooltip
            label="回复时间"
          >
          </el-table-column>
          <!-- <el-table-column
            align="center"
            prop="overTimeDesc"
            show-overflow-tooltip
            label="是否超时回复"
          >
          </el-table-column> -->
          <el-table-column
            align="center"
            width="120"
            prop="sts"
            label="开启编辑"
          >
            <template slot-scope="scope">
              <el-switch
                @click.native="
                  chenck(scope.row.id, scope.row.sts, scope.row.stsDesc)
                "
                v-model="scope.row.sts"
                active-text="开"
                inactive-text="关"
                active-value="0"
                inactive-value="1"
              >
              </el-switch>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          class="pageBox"
          @current-change="currchange"
          layout="prev, pager, next"
          background
          :total="total"
        >
        </el-pagination>
      </div>
    </fullscreen>
  </div>
</template>
<script>
import mySearch from "../../../components/search";

export default {
  components: {
    mySearch,
  },
  data() {
    return {
      loginNo: JSON.parse(sessionStorage.userInfo).loginNo,
      fullscreen: false,
      total: 0,
      pageSize: 1,
      tableData: [],
      searchList: [
        // {
        //   type: "input",
        //   tit: "预算名称",
        //   value: "",
        //   width: "100%",
        //   options: [],
        // },
        {
          type: "sel",
          tit: "回复状态",
          value: "",
          width: "100%",
          options: [
            { dataCode: "0", dataName: "待回复" },
            { dataCode: "1", dataName: "已回复" },
          ],
        },
      ],
      params: {
        woNo: "",
        sts: "",
      },
      loading: false,
      fileList: [],
      fileName: "",
    };
  },
  methods: {
    chenck(id, sts, stsDesc) {
      this.$http({
        url: "/market/kpidept/update",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: { id: id, sts: sts, stsDesc: sts == 0 ? "未回复" : "已回复" },
      }).then((res) => {
        if (res.data.result == 0) {
          this.$message({
            message: "操作成功",
            type: "success",
          });
          this.getList(this.params, this.pageSize);
        }
      });
    },
    //搜索数据
    searchInfo(v) {
      // this.params = {};
      // v[0] ? (this.params.tabName = v[0]) : "";
      // v[1] ? (this.params.sts = v[1]) : "";
        v[0] ? (this.params.sts = v[0]) : "";
      this.getList(this.params, this.pageSize);
    },
    //获取列表
    getList(v, n) {

      this.loading = true;
      this.pageSize = n;
      this.$http({
        url: "/market/kpidept/queryPage",
        method: "post",
        headers: {
          "Content-Type": "application/json",
          page: '{"pageNo":"' + n + '","pageSize":"10"}',
        },
        data: v,
      }).then((res) => {
        this.loading = false;
        this.tableData = res.data.data;
        this.total = res.data.totalRecord;
      });
    },
    //功能栏
    iconCli(v) {
      if (v === 1) {
        this.getList(this.params, this.pageSize);
      }
      if (v === 2) {
        this.fullscreen = !this.fullscreen;
      }
    },
    // 分页
    currchange(v) {
      this.pageSize = v;
      this.getList(this.params, this.pageSize);
    },
  },
  mounted() {
    if (JSON.stringify(this.$route.query) != "{}") {
      this.params.woNo = this.$route.query.id;
    }
    this.getList(this.params, this.pageSize);
  },
  watch: {
    $route() {
      this.getList(this.params, this.pageSize);
    },
  },
};
</script>
<style scoped>
.el-upload-list {
  float: right;
}
.el-input__suffix {
  cursor: pointer;
}
.container .el-upload {
  width: auto !important;
}
</style>
<style scoped lang="scss">
.btn-default {
  display: inline;
  margin-left: 10px;
}
.titbox {
  margin-bottom: 20px;
  div {
    float: right;

    i {
      font-size: 22px;
      margin-left: 20px;
      cursor: pointer;
    }
  }
}
.tabbox {
  margin-top: 15px;
}

.pageBox {
  text-align: right;
  margin-top: 10px;
}
</style>