UNION_NJUST/target/classes/static/components/syr/syrtable.vue

<template>
  <div>
    <el-card shadow="never">
      <div class="btn-group tool-button mt5">
        <el-input v-model="pageForm.xmmc" placeholder="请输入项目名称查询" style="width: 250px;"></el-input>
      </div>
      <div class="btn-group tool-button mt5">
        <el-input v-model="pageForm.searchKeyword" placeholder="请输入内容" @keyup.enter.native="doSearch">
          <el-select slot="prepend" v-model="pageForm.searchName" placeholder="查询类型"
                     style="width: 120px;">
            <el-option label="申报人姓名" value="u.username"></el-option>
            <el-option label="申报人工号" value="u.loginname"></el-option>
          </el-select>
        </el-input>
      </div>


      <div v-show="!hasNotghdwUrl.includes(request)" class="btn-group tool-button mt5">
        <el-select v-model="pageForm.unionid" clearable filterable placeholder="请选择部门工会" @change="getUnitList()">
          <el-option
              v-for="item in unionList"
              :key="item.id"
              :label="item.unionname"
              :value="item.id">
          </el-option>
        </el-select>
        <el-select v-model="pageForm.unitid" clearable filterable placeholder="请选择单位">
          <el-option
              v-for="item in unitList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
          </el-option>
        </el-select>
      </div>


      <slot name="search-group">
        <!--不同页面的查询条件自定义-->
      </slot>
      <div class="btn-group tool-button mt5">
        <el-button icon="el-icon-search" type="primary" @click="doSearch"></el-button>
      </div>
      <div v-if="!isshow" class="pull-right offscreen-right mt5">
        <el-radio-group v-model="pageForm.isAudit" class="mr10" @change="doSearch">
          <el-radio-button :label="null">全部</el-radio-button>
          <el-radio-button :label="true">已{{ auditval }}</el-radio-button>
          <el-radio-button :label="false">未{{ auditval }}</el-radio-button>
        </el-radio-group>
        <slot name="right"></slot>


        <!--          <el-button  v-if="request==='/platfotm/syr/info/zqtb/pageData'"size="medium" @click="doDeleteUsers"><i class="ti-plus"></i> 一键提醒</el-button>-->
      </div>
    </el-card>
    <el-card class="mt10" shadow="never">
      <el-table :data="data" @sort-change='pageOrder'>
        <el-table-column align="center" header-align="center" label="序号" type="index">
          <template scope="scope">
            <span>{{ scope.$index + (pageForm.pageNumber - 1) * pageForm.pageSize + 1 }} </span></template>
        </el-table-column>
        <el-table-column label="项目名称" prop="xmmc" show-overflow-tooltip width="400"></el-table-column>
        <el-table-column v-if="request==='/platfotm/syr/info/zqtb/pageData'" label="中期检查截止时间" prop="zqtbjzsj"
                         width="200"></el-table-column>
        <el-table-column label="申报人" prop="username"></el-table-column>
        <el-table-column label="性别" prop="sex" width="100"></el-table-column>
        <el-table-column label="申报单位" prop="dwname" show-overflow-tooltip width="150"></el-table-column>
        <el-table-column label="职务职称" prop="zwzc" width="100"></el-table-column>
        <el-table-column label="状态" prop="statename" sortable width="200"></el-table-column>
        <el-table-column label="申报日期" prop="sbrq" sortable width="100"></el-table-column>
        <slot name="operation"></slot>
      </el-table>
      <el-row class="el-pagination-container">
        <el-pagination
            :current-page="pageForm.pageNumber"
            :page-size="pageForm.pageSize"
            :total="pageForm.totalCount"
            layout="total, prev, pager, next, jumper"
            @current-change="pageNumberChange">
        </el-pagination>
      </el-row>
    </el-card>
  </div>
</template>

<script>
module.exports = {
  data() {
    return {
      selection: [],
      hasNotghdwUrl: ['/platfotm/syr/info/jtsq/pageData', '/platfotm/syr/info/mykt/pageData', '/platfotm/syr/info/zqtb/pageData'],
      data: [],
      unionList: [],
      unitList: [],
      pageForm: {
        isAudit: false,
        pageNumber: 1,
        pageSize: 10,
        totalCount: 0,
        pageOrderName: '',
        pageOrderBy: '',
        searchName: 'u.username',
        searchKeyword: '',
        xmmc: '',
        unitid: '',
        unionio: ''
      }
    }
  },
  props: {
    smm: {
      type: 'Object',
      default: () => {
        return {
          status: '',
          request: '',
          rowsel: false,
        }
      }
    },
    request: {
      type: String
    },
    auditval: {
      type: String
    },
    isshow: {
      type: Boolean
    }
  },
  methods: {
    async pageData() {
      const {data} = await POST(base + this.request, this.pageForm, true)
      this.data = data.list
      this.pageForm.totalCount = data.totalCount
    },
    pageOrder(column) {
      this.pageForm.pageOrderName = column.prop
      this.pageForm.pageOrderBy = column.order
      this.pageData()
    },
    pageNumberChange(val) {
      this.pageForm.pageNumber = val
      this.pageData()
    },
    doSearch() {
      this.pageForm.pageNumber = 1
      this.pageData()
    },
    async getUnitList() {
      this.pageForm.unitid = ''
      this.unitList = await getUnit(this.pageForm.unionid)
    }
  },
  watch: {
    smm: {
      handler(o) {
        let that = this
        if (o.status === 'table') {
          that.pageData()
        }
      },
      deep: true,
      immediate: true
    }
  },
  async created() {
    this.pageData()
    this.unionList = await getUnion()
  }
}
</script>

<style scoped>

</style>