dy-admin-manager/src/views/auditList/index.vue

<template>
  <div class="m-container">
    <h2>
      <div class="squrt"></div>
      审核列表
    </h2>
    <div class="m-core">
      <!-- 搜索标题 -->
      <el-form :inline="true"
               class="searchForm"
               v-model.trim="searchForm">
        <el-form-item>
          <el-input v-model.trim="searchForm.search"
                    @keyup.enter.native="search"
                    placeholder="乐团名称/编号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-select class="multiple"
                     v-model.trim="searchForm.organId"
                     filterable
                     clearable
                     placeholder="请选择分部">
            <el-option v-for="(item, index) in organList"
                       :key="index"
                       :label="item.name"
                       :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select class="multiple"
                     v-model.trim="searchForm.paymentType"
                     filterable
                     clearable
                     placeholder="申请类型">
            <el-option v-for="(item, index) in paymentTypeList"
                       :key="index"
                       :label="item.label"
                       :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select class="multiple"
                     v-model.trim="searchForm.status"
                     filterable
                     clearable
                     placeholder="审核状态">
            <el-option v-for="(item, index) in statusList"
                       :key="index"
                       :label="item.label"
                       :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="getList"
                     type="danger">搜索</el-button>
        </el-form-item>
      </el-form>
      <div class="tableWrap">
        <el-table :data="tableList"
                  :header-cell-style="{ background: '#EDEEF0', color: '#444' }">
          <!-- <el-table-column type="selection" width="55"></el-table-column> -->
          <el-table-column align="center"
                           prop="organName"
                           label="分部名称"></el-table-column>
          <el-table-column align="center"
                           prop="musicGroupName"
                           label="乐团名称">
            <template slot-scope="scope">
              <div>
                <Tooltip :content="scope.row.musicGroupName" />
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center"
                           width="180px"
                           prop="musicGroupId"
                           label="乐团编号"></el-table-column>
          <el-table-column align="center"
                           prop="paymentType"
                           label="申请类型">
            <template slot-scope="scope">
              <div>
                {{ scope.row.paymentType | auditPaymentType }}
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center"
                           prop="payUserType"
                           label="订单类型">
            <template slot-scope="scope">
              <div>
                {{ scope.row.payUserType | payOrderType }}
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center"
                           prop="addCourseTotalTime"
                           label="加课总时长(分钟)"></el-table-column>
          <el-table-column align="center"
                           prop="courseOriginalPrice"
                           label="原现价(元)">
            <template slot-scope="scope">
              <div>
                {{ scope.row.courseOriginalPrice | moneyFormat }}
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center"
                           prop="courseCurrentPrice"
                           label="申请价格(元)">
            <template slot-scope="scope">
              <div>
                {{ scope.row.courseCurrentPrice | moneyFormat }}
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center"
                           prop="memo"
                           label="备注">
            <template slot-scope="scope">
              <tooltip :content="scope.row.memo" />
            </template>
          </el-table-column>
          <el-table-column align="center"
                           prop="operatorName"
                           label="申请人"></el-table-column>
          <el-table-column align="center"
                           prop="auditStatus"
                           label="状态"
                           width="100px">
            <template slot-scope="scope">
              <div>
                {{ scope.row.auditStatus | auditType }}
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center"
                           prop="createTime"
                           label="申请时间"
                           width="140px">
            <template slot-scope="scope">
              <div>
                {{ scope.row.createTime | dateForMinFormat }}
              </div>
            </template>
          </el-table-column>
          <!--  -->
          <el-table-column align="center"
                           label="操作"
                           width="100px"
                           fixed="right">
            <template slot-scope="scope">
              <el-button v-permission="'helpCenterContent/modify'"
                         @click="lookDetail(scope.row)"
                         type="text">
                            {{(scope.row.auditStatus === 'AUDITING' ? '审核' : '查看')}}
                         </el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination :total="pageInfo.total"
                    :page.sync="pageInfo.page"
                    :limit.sync="pageInfo.limit"
                    :page-sizes="pageInfo.page_size"
                    @pagination="getList" />
      </div>
    </div>
    <el-dialog title="申请详情"
               width="900px"
               :visible.sync="typeStatus"
               destroy-on-close>
      <review :detail="detail"
              @close="close" />
    </el-dialog>
  </div>
</template>
<script>
import pagination from "@/components/Pagination/index";
import review from "@/views/resetTeaming/modals/review.vue";
// import store from '@/store'
import { getAuditList, getAuditListDetail } from "@/api/auditManager";
import { getEmployeeOrgan } from "@/api/buildTeam";
import Tooltip from "@/components/Tooltip/index";
import { auditTypeList, auditPaymentTypeList } from "@/utils/searchArray";

export default {
  components: { pagination, Tooltip, review },
  name: "helpCategory",
  data () {
    return {
      paymentTypeList: auditPaymentTypeList,
      organList: [],
      statusList: auditTypeList,
      searchForm: {
        search: null,
        paymentType: null,
        status: 'AUDITING',
        organId: null,
      },
      tableList: [],

      pageInfo: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 40, 50], // 选择限制显示条数
      },
      detail: null,
      typeStatus: false,
    };
  },
  activated () {
    this.getList();
  },
  mounted () {
    getEmployeeOrgan().then((res) => {
      if (res.code == 200) {
        this.organList = res.data;
      }
    });
    this.getList();
  },
  methods: {
    getList () {
      let params = {
        page: this.pageInfo.page,
        rows: this.pageInfo.limit,
        ...this.searchForm,
      };
      getAuditList(params).then((res) => {
        let result = res.data;
        if (res.code == 200) {
          this.tableList = result.rows;
          this.pageInfo.total = result.total;
        }
      });
    },

    lookDetail (row) {
      // this.detail = res.data
      this.detail = {
        id: row.musicGroupPaymentCalenderId,
        musicGroupId: row.musicGroupId,
        status: row.auditStatus
      }
      this.typeStatus = true;
    },
    close () {
      this.typeStatus = false;
      this.getList()
    },
  },
  watch: {
    typeStatus (val) {
      if (!val) {
        this.detail = null;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.el-button--primary {
  background: #14928a;
  border-color: #14928a;
  color: #fff;
  &:hover,
  &:active,
  &:focus {
    background: #14928a;
    border-color: #14928a;
    color: #fff;
  }
}
/deep/.el-date-editor.el-input {
  width: 100% !important;
}
/deep/.el-select {
  width: 100% !important;
}
/deep/.el-table .cell {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
/deep/.el-dialog__body {
  padding: 10px 20px;
}
.newBand {
  display: inline-block;
}
</style>