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

<template>
  <div>
    <!-- <h2>
      <div class="squrt"></div>
      费用审核列表
    </h2> -->
    <div>
      <!-- 搜索标题 -->
      <save-form
        :inline="true"
        class="searchForm"
        ref="searchForm"
        :model.sync="searchForm"
      >
        <el-form-item>
          <el-input
            v-model.trim="searchForm.search"
            clearable
            @keyup.enter.native="
              e => {
                e.target.blur();
                $refs.searchForm.save();
                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 selects.branchs"
              :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.audit"
            filterable
            clearable
            placeholder="请选择审核人"
          >
            <el-option
              v-for="(item, index) in userList"
              :key="index"
              :label="item.auditName"
              :value="item.audit"
            ></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="search" type="primary">搜索</el-button>
          <el-button @click="reset" type="danger">重置</el-button>
          <auth
            auths="musicGroupPaymentCalender/batchAuditing"
            style="margin-left: 10px"
          >
            <el-button
              @click="typesStatus = true"
              :disabled="!selList.length > 0"
              type="primary"
              >批量审核</el-button
            >
          </auth>
        </el-form-item>
      </save-form>
      <div class="tableWrap">
        <el-table
          :data="tableList"
          :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            fixed="left"
            type="selection"
            width="55"
            :selectable="selectable"
          ></el-table-column>
          <el-table-column align="left" prop="organName" label="分部名称">
            <template slot-scope="scope">
              <copy-text>{{ scope.row.organName }}</copy-text>
            </template>
          </el-table-column>
          <el-table-column
            align="left"
            width="200px"
            prop="musicGroupName"
            label="乐团"
          >
            <template slot-scope="scope">
              <div>
                <Tooltip :content="scope.row.musicGroupName" />
                (<copy-text>{{ scope.row.musicGroupId }}</copy-text
                >)
              </div>
            </template>
          </el-table-column>
          <!-- <el-table-column
            align="left"
            width="100px"
            prop="musicGroupId"
            label="乐团编号"
          >
            <template slot-scope="scope">

            </template>
          </el-table-column> -->
          <el-table-column align="left" prop="paymentType" label="收费模式">
            <template slot-scope="scope">
              <div>
                {{ scope.row.paymentType | auditPaymentType }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            align="left"
            prop="paymentType"
            label="类型"
            width="150px"
          >
            <template slot-scope="scope">
              <div>
                <p>申请类型： {{ scope.row.paymentType | auditPaymentType }}</p>
                <p>订单类型： {{ scope.row.payUserType | payOrderType }}</p>
              </div>
            </template>
          </el-table-column>
          <!-- <el-table-column align="left" prop="payUserType" label="订单类型">
            <template slot-scope="scope">
              <div>
                {{ scope.row.payUserType | payOrderType }}
              </div>
            </template>
          </el-table-column> -->
          <!-- <el-table-column
            align="left"
            prop="addCourseTotalTime"
            label="加课总时长(分钟)"
          ></el-table-column> -->
          <el-table-column
            align="left"
            prop="originalTotalAmount"
            label="价格(元)"
          >
            <template slot-scope="scope">
              <div>
                <p>总原价：{{ scope.row.originalTotalAmount }}</p>
                <p>申请价：{{ scope.row.currentTotalAmount }}</p>
              </div>
            </template>
          </el-table-column>
          <!-- <el-table-column align="left" prop="currentTotalAmount" label="申请价格(元)">
          </el-table-column> -->
          <el-table-column align="left" prop="memo" width="100px" label="备注">
            <template slot-scope="scope">
              <overflow-text width="80px" :text="scope.row.memo" />
            </template>
          </el-table-column>
          <el-table-column
            align="left"
            prop="auditMemo"
            width="100px"
            label="审核意见"
          >
            <template slot-scope="scope">
              <overflow-text width="80px" :text="scope.row.auditMemo" />
            </template>
          </el-table-column>
          <el-table-column
            align="left"
            prop="operatorName"
            label="申请人"
            width="150px"
          >
            <template slot-scope="scope">
              <div>
                <p>
                  {{ scope.row.operatorName ? scope.row.operatorName : "--" }}
                </p>
                <p>{{ scope.row.createTime | dateForMinFormat }}</p>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            align="left"
            prop="operatorName"
            label="审核人"
            width="150px"
          >
            <template slot-scope="scope">
              <div>
                <p>{{ scope.row.auditName ? scope.row.auditName : "--" }}</p>
                <p>
                  {{
                    scope.row.auditTime
                      ? scope.row.auditTime
                      : "--" | dateForMinFormat
                  }}
                </p>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            align="left"
            prop="status"
            label="状态"
            width="100px"
          >
            <template slot-scope="scope">
              <div>
                {{ scope.row.status | auditType }}
              </div>
            </template>
          </el-table-column>
          <!-- <el-table-column align="left" prop="createTime" label="申请时间" width="140px">
            <template slot-scope="scope">
              <div>
                {{ scope.row.createTime | dateForMinFormat }}
              </div>
            </template>
          </el-table-column> -->
          <!--  -->
          <el-table-column align="left" label="操作" fixed="right">
            <template slot-scope="scope">
              <!--     'musicGroupPaymentCalender/auditListDetail/update'
                       'musicGroupPaymentCalender/auditListDetail/look' -->
              <el-button
                @click="lookDetail(scope.row)"
                type="text"
                v-if="
                  scope.row.status == 'AUDITING' &&
                    $helpers.permission(
                      'musicGroupPaymentCalender/auditListDetail/update'
                    )
                "
              >
                审核
              </el-button>
              <el-button
                @click="lookDetail(scope.row)"
                type="text"
                v-if="
                  scope.row.status != 'AUDITING' &&
                    $helpers.permission(
                      'musicGroupPaymentCalender/getDetail/look'
                    )
                "
              >
                查看
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          :total.sync="pageInfo.total"
          sync
          :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"
      v-if="typeStatus"
    >
      <review :detail="detail" @close="close" />
    </el-dialog>
    <el-dialog
      title="批量审核"
      width="700px"
      :visible.sync="typesStatus"
      v-if="typesStatus"
    >
      <audit
        :selList="selList"
        @close="typesStatus = false"
        @submited="submited"
      />
    </el-dialog>
  </div>
</template>
<script>
import pagination from "@/components/Pagination/index";
import review from "@/views/resetTeaming/modals/review.vue";
import audit from "./audit.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";
import { getCalenderUser } from "./api";
const initSearch = {
  search: null,
  paymentType: null,
  status: "AUDITING",
  organId: null,
  audit: null
};
export default {
  components: { pagination, Tooltip, review, audit },
  name: "helpCategory",
  data() {
    return {
      typesStatus: false,
      selList: [],
      paymentTypeList: auditPaymentTypeList,
      organList: [],
      statusList: auditTypeList,
      searchForm: { ...initSearch },
      tableList: [],
      userList: [],
      pageInfo: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 40, 50] // 选择限制显示条数
      },
      detail: null,
      typeStatus: false
    };
  },
  mounted() {
    this.$store.dispatch("setBranchs");
    this.getList();
    this.getCalenderList();
  },
  methods: {
    selectable(row, index) {
      return row.status == "AUDITING";
    },
    search() {
      this.pageInfo.page = 1;
      this.$refs.searchForm.save(this.searchForm);
      this.$refs.searchForm.save(this.pageInfo, "page");
      this.getList();
    },
    reset() {
      this.searchForm = { ...initSearch };
      this.search();
    },
    handleSelectionChange(arr) {
      this.selList = arr;
    },
    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;
        }
      });
    },
    async getCalenderList() {
      try {
        const res = await getCalenderUser({ type: "MUSIC" });
        this.userList = res.data;
      } catch (e) {
        console.log(e);
      }
    },

    lookDetail(row) {
      // this.detail = res.data
      this.detail = {
        id: row.id,
        musicGroupId: row.musicGroupId,
        status: row.status,
        batchNo: row.batchNo
      };
      this.typeStatus = true;
    },
    submited() {
      this.pageInfo.page = 1;
      this.getList();
    },
    close() {
      this.typeStatus = false;
      this.getList();
    }
  },
  watch: {
    typeStatus(val) {
      if (!val) {
        this.detail = null;
      }
    }
  }
};
</script>
<style lang="scss" scoped>
::v-deep .el-date-editor.el-input {
  width: 100% !important;
}
::v-deep .el-select {
  width: 100% !important;
}
::v-deep .el-table .cell {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
::v-deep .el-dialog__body {
  padding: 10px 20px;
}
.newBand {
  display: inline-block;
}
</style>