123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263 |
- <template>
- <div>
- <div class="all padding-20">
- <el-tabs v-model="formData.type" type="card">
- <el-tab-pane
- v-for="(item, index) in tabsOption"
- :key="index"
- :label="item.label"
- :name="item.name"
- ></el-tab-pane>
- </el-tabs>
- <el-form
- ref="formData"
- :inline="true"
- :model="formData"
- label-width="50px"
- >
- <el-form-item label="类型">
- <el-select v-model="formData.pt_id" placeholder="请选择排序">
- <el-option
- v-for="item in point_types"
- :key="item.id"
- :label="item.name"
- :value="item.id"
- ></el-option>
- </el-select>
- </el-form-item>
- </el-form>
- <div v-if="formData.type == 'waiting'">
- <el-table
- :data="list"
- style="cursor: pointer;"
- v-loading="loading"
- class="listTable"
- @row-click="openDetail"
- >
- <el-table-column label="审批标题" prop="task_name">
- <template slot-scope="scope">
- <div class="flex-box flex-v-ce">
- <userImage width="50px" height="50px" :user_name="scope.row.employee_name"></userImage>
- <div style="margin-left: 5px;">
- <span class="tableTitle" v-show="scope.row.source_type == 1" >{{ scope.row.employee_name }}的积分任务</span>
- <span class="tableTitle" v-show="scope.row.source_type == 2">{{ scope.row.employee_name }}的积分申请</span>
- <span class="tableTitle" v-show="scope.row.source_type == 3">{{ scope.row.employee_name }}的积分录入</span>
- <span class="tableTitle" v-show="scope.row.source_type == 4">{{ scope.row.employee_name }}的绩效工作</span>
- </div>
- </div>
- </template>
- </el-table-column>
- <el-table-column label="审批内容" prop="remark.rule">
- <template slot-scope="scope">
- <span class="font-flex-word" style="max-width: 200px;">{{ scope.row.remark.customize || scope.row.remark.rule}}</span>
- </template>
- </el-table-column>
- <el-table-column
- label="时间"
- prop="event_time"
- width="150"
- ></el-table-column>
- <el-table-column label="操作" prop="owner_id" width="80">
- <template slot-scope="scope">
- <el-button type="text">审批</el-button>
- </template>
- </el-table-column>
- <template slot="empty">
- <div class="nopoint_box">
- <div class="noimg noperson"></div>
- <span class="title">没有对应的数据</span>
- </div>
- </template>
- </el-table>
- </div>
- <div v-if="formData.type == 'reviewed'">
- <el-table :data="list" style="cursor: pointer;" v-loading="loading" class="listTable" @row-click="openDetail">
- <el-table-column label="审批标题" prop="task_name">
- <template slot-scope="scope">
- <div class="flex-box flex-v-ce">
- <userImage width="50px" height="50px" :user_name="scope.row.employee_name"></userImage>
- <div style="margin-left: 5px;">
- <span class="tableTitle" v-show="scope.row.source_type == 1" >{{ scope.row.employee_name }}的积分任务</span>
- <span class="tableTitle" v-show="scope.row.source_type == 2">{{ scope.row.employee_name }}的积分申请</span>
- <span class="tableTitle" v-show="scope.row.source_type == 3">{{ scope.row.employee_name }}的积分录入</span>
- <span class="tableTitle" v-show="scope.row.source_type == 4">{{ scope.row.employee_name }}的绩效工作</span>
- </div>
- </div>
- </template>
- </el-table-column>
- <el-table-column label="审批内容" prop="remark.rule">
- <template slot-scope="scope">
- <el-popover trigger="hover" placement="top" popper-class="popperSPBOX">
- <span>{{
- scope.row.remark.customize || scope.row.remark.rule
- }}</span>
- <div slot="reference" class="name-wrapper" style="width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">
- <span>{{
- scope.row.remark.customize || scope.row.remark.rule
- }}</span>
- </div>
- </el-popover>
- </template>
- </el-table-column>
- <el-table-column
- label="时间"
- prop="event_time"
- width="150"
- ></el-table-column>
- <el-table-column label="积分" prop="review_point" width="120">
- <template slot-scope="scope">
- <span v-show="scope.row.review_point < 0" class="red">{{
- scope.row.review_point
- }}</span>
- <span v-show="scope.row.review_point >= 0"
- >+{{ scope.row.review_point }}</span
- >
- </template>
- </el-table-column>
- <el-table-column label="状态" prop="status" width="80">
- <template slot-scope="scope">
- <span v-show="scope.row.status == 1" class="green"
- >审批通过</span
- >
- <span v-show="scope.row.status == 2" class="red"
- >审批驳回</span
- >
- </template>
- </el-table-column>
- <template slot="empty">
- <div class="nopoint_box">
- <div class="noimg noperson"></div>
- <span class="title">没有对应的数据</span>
- </div>
- </template>
- </el-table>
- </div>
- <center style="padding: 20px 0;">
- <el-pagination
- background
- @size-change="handleSizeChange"
- @current-change="handleCurrentChange"
- :current-page="formData.page"
- :page-sizes="[10, 20, 30, 40, 50, 100]"
- layout="total, sizes, prev, pager, next"
- :page-size="formData.page_size"
- :total="total"
- >
- </el-pagination>
- </center>
- </div>
- <examinePopup
- :title="'审核详情'"
- :id="detail_id"
- :show.sync="detailShow"
- ></examinePopup>
- </div>
- </template>
- <script>
- import examinePopup from "@/components/examinePopup.vue";
- export default {
- data() {
- return {
- formData: {
- type: "waiting",
- source_type: "0",
- pt_id: 0,
- page_size: 10,
- page: 1
- },
- total: null,
- list: null,
- loading: false,
- point_types: null,
- tabsOption: [
- { label: "待我审批", name: "waiting" },
- { label: "我已审批", name: "reviewed" }
- ],
- detailShow: false,
- detail_id: null
- };
- },
- watch: {
- "formData.type"() {
- this.formData.page = 1;
- this.list = [];
- this.getSpList();
- },
- "formData.pt_id"() {
- this.list = [];
- this.formData.page = 1
- this.getSpList();
- },
- },
- components: { examinePopup },
- mounted() {
- this.getSpList();
- this.point_types = this.getPointTypes();
- },
- methods: {
- openDetail(item) {
- this.detail_id = item.id;
- this.detailShow = true;
- },
- getTypes(){
- var arr=this.$getTyps();
- return arr.filter(function(item){
- return item.code!='JX'
- })
- },
- // 获取积分类型
- getPointTypes() {
- let point = this.getTypes();
- point.unshift({ code: "all", id: 0, name: "全部" });
- return point;
- },
- // 页码变更
- handleCurrentChange(val) {
- this.formData.page = val;
- this.getSpList();
- },
- handleSizeChange(val) {
- this.formData.page_size = val;
- this.getSpList();
- },
- getSpList() {
- let self = this;
- self.loading = true;
- let params = JSON.parse(JSON.stringify(this.formData));
- self.$axios('get',"/api/integral/review/list",params).then(res => {
- if (res.data.code == 1) {
- self.list = res.data.data.list;
- self.total = res.data.data.total;
- }
- }).finally(e => {
- self.loading = false;
- });
- }
- }
- };
- </script>
- <style lang="scss">
- .box {
- min-height: calc(100vh - 140px);
- width: 100%;
- background-color: #fff;
- padding: 20px;
- & .listTable {
- & .tableTitle {
- line-height: 50px;
- padding-left: 10px;
- }
- }
- }
- .popperSPBOX{
- max-width: calc(100vh - 400px);
- background-color: #fff;
- }
- </style>
|