item-management-web/src/views/finance/fine.vue

<template>
  <div class="app-container organization-index">
    <div class="title-container">
      <breadcrumb id="breadcrumb-container" class="breadcrumb-container" />
    </div>
    <el-tabs v-model="activeName" @tab-click="handleClick" type="border-card" style="margin-top: 10px;">
      <el-tab-pane v-if="!personalLeader" label="资产业务" name="ASSET_BUSINESS">
        <y-page-list-layout :page-list="pageData" :page-para="queryDTO" :get-page-list="page">
          <template slot="left">
            <el-input v-model="queryDTO.keyWord" placeholder="关键字(项⽬编号或产品号)" clearable style="width: 300px;float: left;"></el-input>
            <el-input v-model="queryDTO.invoiceNo" placeholder="发票号" clearable style="margin-left: 20px;width: 150px;float: left;"></el-input>
            <el-input v-model="queryDTO.clientManagerName" placeholder="客户经理" clearable style="margin-left: 20px;width: 150px;float: left;"></el-input>
            <el-select v-model="queryDTO.status" filterable placeholder="是否确认" clearable style="margin-left: 20px;width: 150px;float: left;">
              <el-option label="已确认" value="true"></el-option>
              <el-option label="未确认" value="false"></el-option>
            </el-select>
            <el-date-picker
              v-model="findDate"
              type="daterange"
              align="center"
              unlink-panels
              range-separator="至"
              start-placeholder="罚款⽇期（开始）"
              end-placeholder="罚款⽇期（结束）"
              :picker-options="pickerOptions"
              value-format="yyyy-MM-dd"
              style="margin-left: 20px;width: 300px;float: left;"
            ></el-date-picker>
            <el-button class="filter-item" style="margin-left:20px;float: left;" type="primary" @click="page()" round>搜索</el-button>
            <el-button class="filter-item" style="float: left;" round type="success" @click="resetSearch()">重置</el-button>
            <el-button class="filter-item" style="float: left;" round type="warning" @click="fineListExport()">导出</el-button>
            <PermissionButton menu-code="_views_finance_fine_confirm_batch" class="filter-item" style="float: left;" round type="danger" @click="batchConfirmFineAmount()" />
          </template>
          <parentTable ref="table" v-loading="listLoading" :data="pageData.records" :selectionChange="handleSelectionChange" slot="table" style="width: 100%;">
            <el-table-column type="selection" align="center" width="40"></el-table-column>
            <el-table-column label="项⽬编号" align="center" width="120">
              <template slot-scope="{row}">
                <span>{{ row.orderId }}</span>
              </template>
            </el-table-column>
            <el-table-column label="项⽬名称" align="center" width="150" show-overflow-tooltip>
              <template slot-scope="{row}">
                <span>{{ row.orderName}}</span>
              </template>
            </el-table-column>
            <el-table-column label="产品号" align="center" width="250">
              <template slot-scope="{row}">
                <span>{{ row.productionNo}}</span>
              </template>
            </el-table-column>
            <el-table-column label="产品类型" align="center">
              <template slot-scope="{row}">
                <span>{{ row.productionType }}</span>
              </template>
            </el-table-column>
            <el-table-column label="发票号" align="center" width="150">
              <template slot-scope="{row}">
                <span>{{ row.invoiceNo?row.invoiceNo:'未开票' }}</span>
              </template>
            </el-table-column>
            <el-table-column label="罚款⾦额" align="center">
              <template slot-scope="{row}">
                <span style="color: #dca550; font-weight: bold;">{{ row.fineAmount }}</span>
              </template>
            </el-table-column>
            <el-table-column label="实际罚款⾦额" align="center" width="120">
              <template slot-scope="{row}">
                <span style="color: red; font-weight: bold;">{{ row.realFineAmount !== null ? row.realFineAmount:'待确认' }}</span>
              </template>
            </el-table-column>
            <el-table-column label="客户经理" align="center">
              <template slot-scope="{row}">
                <span>{{ row.clientManagerName}}</span>
              </template>
            </el-table-column>
            <el-table-column label="是否确认" align="center">
              <template slot-scope="{row}">
                <span>{{ row.status ? '已确认' : '待确认' }}</span>
              </template>
            </el-table-column>
            <el-table-column label="罚款⽇期" align="center" width="130">
              <template slot-scope="{row}">
                <span>{{ row.punishDate }}</span>
              </template>
            </el-table-column>
            <el-table-column label="客户经理情况说明" align="center" width="250" show-overflow-tooltip>
              <template slot-scope="{row}">
                <span>{{ row.explain }}</span>
              </template>
            </el-table-column>
            <el-table-column label="应收⾦额" align="center">
              <template slot-scope="{row}">
                <span>{{ row.shouldAmount }}</span>
              </template>
            </el-table-column>
            <el-table-column label="标准收费" align="center">
              <template slot-scope="{row}">
                <span>{{ row.standardAmount }}</span>
              </template>
            </el-table-column>
            <el-table-column label="超期天数" align="center">
              <template slot-scope="{row}">
                <span>{{ row.overdueDay}}</span>
              </template>
            </el-table-column>
            <el-table-column label="客户名称" align="center">
              <template slot-scope="{row}">
                <span>{{ row.customerName }}</span>
              </template>
            </el-table-column>
            <el-table-column label="业务来源" align="center">
              <template slot-scope="{row}">
                <span>{{ row.customerSubName }}</span>
              </template>
            </el-table-column>
            <el-table-column label="委托方" align="center">
              <template slot-scope="{row}">
                <span>{{ row.bailor}}</span>
              </template>
            </el-table-column>

            <el-table-column label="操作" align="center" width="160" fixed="right">
              <template slot-scope="{row}">
                <PermissionButton menu-code="_views_finance_fine_explain" class-name="filter-item" name type="text" @click="openExplain(row)" />
                <PermissionButton menu-code="_views_finance_fine_confirm" class-name="filter-item" name type="text" @click="confirmFineAmount(row.id)" />
                <PermissionButton menu-code="_views_finance_fine_edit_amount" class-name="filter-item" name type="text" @click="openEditFineAmount(row)" />
              </template>
            </el-table-column>
          </parentTable>
        </y-page-list-layout>
      </el-tab-pane>
      <el-tab-pane v-if="!personalLeader" label="大中型业务" name="MAJOR_BUSINESS">
        <y-page-list-layout :page-list="pageData" :page-para="queryDTO" :get-page-list="page">
          <template slot="left">
            <el-input v-model="queryDTO.keyWord" placeholder="关键字(项⽬编号或产品号)" clearable style="width: 300px;float: left;"></el-input>
            <el-input v-model="queryDTO.invoiceNo" placeholder="发票号" clearable style="margin-left: 20px;width: 150px;float: left;"></el-input>
            <el-input v-model="queryDTO.clientManagerName" placeholder="客户经理" clearable style="margin-left: 20px;width: 150px;float: left;"></el-input>
            <el-select v-model="queryDTO.status" filterable placeholder="是否确认" clearable style="margin-left: 20px;width: 150px;float: left;">
              <el-option label="已确认" value="true"></el-option>
              <el-option label="未确认" value="false"></el-option>
            </el-select>
            <el-date-picker
              v-model="findDate"
              type="daterange"
              align="center"
              unlink-panels
              range-separator="至"
              start-placeholder="罚款⽇期（开始）"
              end-placeholder="罚款⽇期（结束）"
              :picker-options="pickerOptions"
              value-format="yyyy-MM-dd"
              style="margin-left: 20px;width: 300px;float: left;"
            ></el-date-picker>
            <el-button class="filter-item" style="margin-left:20px;float: left;" type="primary" @click="page()" round>搜索</el-button>
            <el-button class="filter-item" style="float: left;" round type="success" @click="resetSearch()">重置</el-button>
            <el-button class="filter-item" style="float: left;" round type="warning" @click="fineListExport()">导出</el-button>
            <PermissionButton menu-code="_views_finance_fine_confirm_batch" class="filter-item" style="float: left;" round type="danger" @click="batchConfirmFineAmount()" />
          </template>
          <parentTable ref="table" v-loading="listLoading" :data="pageData.records" :selectionChange="handleSelectionChange" slot="table" style="width: 100%;">
            <el-table-column type="selection" align="center" width="40"></el-table-column>
            <el-table-column label="项⽬编号" align="center" width="120">
              <template slot-scope="{row}">
                <span>{{ row.orderId }}</span>
              </template>
            </el-table-column>
            <el-table-column label="项⽬名称" align="center" width="150" show-overflow-tooltip>
              <template slot-scope="{row}">
                <span>{{ row.orderName}}</span>
              </template>
            </el-table-column>
            <el-table-column label="产品号" align="center" width="250">
              <template slot-scope="{row}">
                <span>{{ row.productionNo}}</span>
              </template>
            </el-table-column>
            <el-table-column label="产品类型" align="center">
              <template slot-scope="{row}">
                <span>{{ row.productionType }}</span>
              </template>
            </el-table-column>
            <el-table-column label="发票号" align="center" width="150">
              <template slot-scope="{row}">
                <span>{{ row.invoiceNo?row.invoiceNo:'未开票' }}</span>
              </template>
            </el-table-column>
            <el-table-column label="罚款⾦额" align="center">
              <template slot-scope="{row}">
                <span style="color: #dca550; font-weight: bold;">{{ row.fineAmount }}</span>
              </template>
            </el-table-column>
            <el-table-column label="实际罚款⾦额" align="center" width="120">
              <template slot-scope="{row}">
                <span style="color: red; font-weight: bold;">{{ row.realFineAmount !== null ? row.realFineAmount:'待确认' }}</span>
              </template>
            </el-table-column>
            <el-table-column label="客户经理" align="center">
              <template slot-scope="{row}">
                <span>{{ row.clientManagerName}}</span>
              </template>
            </el-table-column>
            <el-table-column label="是否确认" align="center">
              <template slot-scope="{row}">
                <span>{{ row.status ? '已确认' : '待确认' }}</span>
              </template>
            </el-table-column>
            <el-table-column label="罚款⽇期" align="center" width="130">
              <template slot-scope="{row}">
                <span>{{ row.punishDate }}</span>
              </template>
            </el-table-column>
            <el-table-column label="客户经理情况说明" align="center" width="250" show-overflow-tooltip>
              <template slot-scope="{row}">
                <span>{{ row.explain }}</span>
              </template>
            </el-table-column>
            <el-table-column label="应收⾦额" align="center">
              <template slot-scope="{row}">
                <span>{{ row.shouldAmount }}</span>
              </template>
            </el-table-column>
            <el-table-column label="标准收费" align="center">
              <template slot-scope="{row}">
                <span>{{ row.standardAmount }}</span>
              </template>
            </el-table-column>
            <el-table-column label="超期天数" align="center">
              <template slot-scope="{row}">
                <span>{{ row.overdueDay}}</span>
              </template>
            </el-table-column>
            <el-table-column label="客户名称" align="center">
              <template slot-scope="{row}">
                <span>{{ row.customerName }}</span>
              </template>
            </el-table-column>
            <el-table-column label="业务来源" align="center">
              <template slot-scope="{row}">
                <span>{{ row.customerSubName }}</span>
              </template>
            </el-table-column>
            <el-table-column label="委托方" align="center">
              <template slot-scope="{row}">
                <span>{{ row.bailor}}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="160" fixed="right">
              <template slot-scope="{row}">
                <PermissionButton menu-code="_views_finance_fine_explain" class-name="filter-item" name type="text" @click="openExplain(row)" />
                <PermissionButton menu-code="_views_finance_fine_confirm" class-name="filter-item" name type="text" @click="confirmFineAmount(row.id)" />
                <PermissionButton menu-code="_views_finance_fine_edit_amount" class-name="filter-item" name type="text" @click="openEditFineAmount(row)" />
              </template>
            </el-table-column>
          </parentTable>
        </y-page-list-layout>
      </el-tab-pane>
      <el-tab-pane label="个贷业务" name="PERSONAL_BUSINESS">
        <y-page-list-layout :page-list="pageData" :page-para="queryDTO" :get-page-list="page">
          <template slot="left">
            <el-input v-model="queryDTO.keyWord" placeholder="关键字(项⽬编号)" clearable style="width: 300px;float: left;"></el-input>
            <el-input v-model="queryDTO.invoiceNo" placeholder="发票号" clearable style="margin-left: 20px;width: 150px;float: left;"></el-input>
            <el-input v-model="queryDTO.clientManagerName" placeholder="客户经理" clearable style="margin-left: 20px;width: 150px;float: left;"></el-input>
            <el-select v-model="queryDTO.status" filterable placeholder="是否确认" clearable style="margin-left: 20px;width: 150px;float: left;">
              <el-option label="已确认" value="true"></el-option>
              <el-option label="未确认" value="false"></el-option>
            </el-select>
            <el-date-picker
              v-model="findDate"
              type="daterange"
              align="center"
              unlink-panels
              range-separator="至"
              start-placeholder="罚款⽇期（开始）"
              end-placeholder="罚款⽇期（结束）"
              :picker-options="pickerOptions"
              value-format="yyyy-MM-dd"
              style="margin-left: 20px;width: 300px;float: left;"
            ></el-date-picker>
            <el-button class="filter-item" style="margin-left:20px;float: left;" type="primary" @click="page()" round>搜索</el-button>
            <el-button class="filter-item" style="float: left;" round type="success" @click="resetSearch()">重置</el-button>
            <el-button class="filter-item" style="float: left;" round type="warning" @click="fineListExport()">导出</el-button>
            <PermissionButton menu-code="_views_finance_fine_confirm_batch" class="filter-item" style="float: left;" round type="danger" @click="batchConfirmFineAmount()" />
          </template>
          <parentTable ref="table" v-loading="listLoading" :data="pageData.records" :selectionChange="handleSelectionChange" slot="table" style="width: 100%;">
            <el-table-column type="selection" align="center" width="40"></el-table-column>
            <el-table-column label="项⽬编号" align="center" width="120">
              <template slot-scope="{row}">
                <span>{{ row.orderId }}</span>
              </template>
            </el-table-column>
            <el-table-column label="项⽬名称" align="center" width="450" show-overflow-tooltip>
              <template slot-scope="{row}">
                <span>{{ row.orderName}}</span>
              </template>
            </el-table-column>
            <el-table-column label="产品类型" align="center">
              <template slot-scope="{row}">
                <span>{{ row.productionType }}</span>
              </template>
            </el-table-column>
            <el-table-column label="发票号" align="center" width="150">
              <template slot-scope="{row}">
                <span>{{ row.invoiceNo?row.invoiceNo:'未开票' }}</span>
              </template>
            </el-table-column>
            <el-table-column label="罚款⾦额" align="center">
              <template slot-scope="{row}">
                <span style="color: #dca550; font-weight: bold;">{{ row.fineAmount }}</span>
              </template>
            </el-table-column>
            <el-table-column label="实际罚款⾦额" align="center" width="120">
              <template slot-scope="{row}">
                <span style="color: red; font-weight: bold;">{{ row.realFineAmount !== null ? row.realFineAmount:'待确认' }}</span>
              </template>
            </el-table-column>
            <el-table-column label="客户经理" align="center">
              <template slot-scope="{row}">
                <span>{{ row.clientManagerName}}</span>
              </template>
            </el-table-column>
            <el-table-column label="是否确认" align="center">
              <template slot-scope="{row}">
                <span>{{ row.status ? '已确认' : '待确认' }}</span>
              </template>
            </el-table-column>
            <el-table-column label="罚款⽇期" align="center" width="130">
              <template slot-scope="{row}">
                <span>{{ row.punishDate }}</span>
              </template>
            </el-table-column>
            <el-table-column label="客户经理情况说明" align="center" width="250" show-overflow-tooltip>
              <template slot-scope="{row}">
                <span>{{ row.explain }}</span>
              </template>
            </el-table-column>
            <el-table-column label="应收⾦额" align="center">
              <template slot-scope="{row}">
                <span>{{ row.shouldAmount }}</span>
              </template>
            </el-table-column>
            <el-table-column label="标准收费" align="center">
              <template slot-scope="{row}">
                <span>{{ row.standardAmount }}</span>
              </template>
            </el-table-column>
            <el-table-column label="超期天数" align="center">
              <template slot-scope="{row}">
                <span>{{ row.overdueDay}}</span>
              </template>
            </el-table-column>
            <el-table-column label="客户名称" align="center">
              <template slot-scope="{row}">
                <span>{{ row.customerName }}</span>
              </template>
            </el-table-column>
            <el-table-column label="业务来源" align="center">
              <template slot-scope="{row}">
                <span>{{ row.customerSubName }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="160" fixed="right">
              <template slot-scope="{row}">
                <PermissionButton menu-code="_views_finance_fine_explain" class-name="filter-item" name type="text" @click="openExplain(row)" />
                <PermissionButton menu-code="_views_finance_fine_confirm" class-name="filter-item" name type="text" @click="confirmFineAmount(row.id)" />
                <PermissionButton menu-code="_views_finance_fine_edit_amount" class-name="filter-item" name type="text" @click="openEditFineAmount(row)" />
              </template>
            </el-table-column>
          </parentTable>
        </y-page-list-layout>
      </el-tab-pane>
    </el-tabs>
    <el-dialog title="情况说明" :visible.sync="explainVisible" width="40%">
      <el-form :model="updateFineForm">
        <el-form-item label="情况说明：">
          <el-input v-model="updateFineForm.explain" type="textarea" :rows="5"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="explainVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateFine(updateFineForm)">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="修改罚款金额" :visible.sync="editFineAmountVisible" width="40%">
      <el-form :model="updateFineForm">
        <el-form-item label="情况说明：">
          <el-input v-model="updateFineForm.explain" type="textarea" :rows="5" disabled></el-input>
        </el-form-item>
        <el-form-item label="罚款金额：">
          <el-input v-model="updateFineForm.fineAmount" type="number"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editFineAmountVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateFine(updateFineForm)">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import Breadcrumb from '@/components/Breadcrumb';
import YPageListLayout from '@/components/YPageListLayout';
import { mapGetters } from 'vuex';

export default {
  name: 'fine',
  components: {
    Breadcrumb,
    YPageListLayout,
  },

  computed: {
    ...mapGetters([
      'userInfo'
    ]),
  },
  watch:{
      userInfo: {
      immediate: true, // immediate选项可以开启首次赋值监听
      deep: true,
      handler(newv) {
        if (newv) {
          const postList = newv.postList.map(item => item.name)
          const marketPosts = ['部门经理']
          postList.forEach(element => {
            if (marketPosts.includes(element)) {
                this.personalLeader = true;
                this.activeName = 'PERSONAL_BUSINESS'
            }
          });
        }

      }
      },
    },
  data() {
    return {
      activeName: 'ASSET_BUSINESS',
      listLoading: false,
      explainVisible: false,
      editFineAmountVisible: false,
      personalLeader:false,
      findDate: null,
      // 分页查询条件
      queryDTO: {
        page: 1,
        size: 10,
        businessType: 'ASSET_BUSINESS',
        keyWord: null,
        invoiceNo: null,
        clientManagerName: null,
        status: null,
        startPunishDate: null,
        endPunishDate: null,
      },
      pageData: { records: [] },
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            },
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            },
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            },
          },
        ],
      },
      updateFineForm: {
        id: null,
        explain: null,
        fineAmount: null,
      },
      batchConfirmFineIds: [],
    };
  },
  created() {
    this.page();
  },
  methods: {
    handleClick() {
      this.queryDTO = {
        page: 1,
        size: 10,
        businessType: this.activeName,
        keyWord: null,
        invoiceNo: null,
        clientManagerName: null,
        status: null,
        startPunishDate: null,
        endPunishDate: null,
      };
      this.page();
    },
    // 重置条件
    resetSearch() {
      this.findDate = null;
      this.queryDTO = {
        page: 1,
        size: 10,
        businessType: this.activeName,
        keyWord: null,
        invoiceNo: null,
        clientManagerName: null,
        status: null,
        startPunishDate: null,
        endPunishDate: null,
      };
      this.page();
    },
    // 查询罚款记录
    page() {
      this.listLoading = true;
      if (this.findDate) {
        this.queryDTO.startPunishDate = this.findDate[0] + ' 00:00:00';
        this.queryDTO.endPunishDate = this.findDate[1] + ' 23:59:59';
      }
      this.$api.financeFine.page(this.queryDTO).then((res) => {
        this.pageData = res.data;
        this.listLoading = false;
      });
    },
    fineListExport() {
      this.$utils.exportUtil('/financeFine/export', this.queryDTO, '导出');
    },
    // 打开情况说明dialog
    openExplain(row) {
      this.explainVisible = true;
      this.updateFineForm.id = row.id;
      this.updateFineForm.explain = row.explain;
    },
    // 打开修改罚款金额dialog
    openEditFineAmount(row) {
      this.editFineAmountVisible = true;
      this.updateFineForm.id = row.id;
      this.updateFineForm.explain = row.explain;
      this.updateFineForm.fineAmount = row.fineAmount;
    },
    // 更新罚款记录
    updateFine(financeFine) {
      this.$api.financeFine.update(financeFine).then((res) => {
        if (res.code === 200 && res.data) {
          this.$notify({
            title: '成功',
            message: '请求成功！',
            type: 'success',
            duration: 3000,
          });
          // 判断开的哪一个dialog并关闭
          if (this.explainVisible) {
            this.explainVisible = false;
          }
          if (this.editFineAmountVisible) {
            this.editFineAmountVisible = false;
          }
          this.page();
        }
      });
    },
    // 确认罚款金额
    confirmFineAmount(id) {
      this.$api.financeFine.confirm(id).then((res) => {
        if (res.code === 200 && res.data) {
          this.$notify({
            title: '成功',
            message: '请求成功！',
            type: 'success',
            duration: 3000,
          });
          this.page();
        }
      });
    },
    // 多选触发
    handleSelectionChange(selection) {
      this.batchConfirmFineIds = selection.map((item) => item.id);
    },
    // 批量确认罚款金额
    batchConfirmFineAmount() {
      if (this.batchConfirmFineIds && this.batchConfirmFineIds.length > 0) {
        this.$confirm('请仔细确认要进行批量操作的数据, 是否继续?', '警告', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          this.$api.financeFine.batchConfirm(this.batchConfirmFineIds).then((res) => {
            if (res.code === 200 && res.data) {
              this.$notify({
                title: '成功',
                message: '批量请求成功！',
                type: 'success',
                duration: 3000,
              });
              this.page();
            }
          });
        });
      } else {
        this.$notify({
          title: '警告',
          message: '请至少选择一条罚款记录！',
          type: 'warning',
          duration: 3000,
        });
      }
    },
  },
};
</script>
<style scoped lang="scss"></style>