supply-front/src/views/deposit_home/refund_list.vue

<template>
  <div style="width: 100%; height: 100%">
    <template-page
      v-show="showSurrender == 0"
      ref="pageRef"
      :operation="operation()"
      :optionsEvensGroup="optionsEvensGroup"
      :getList="getList"
      :exportList="exportList"
      :tableAttributes="tableAttributes"
      :tableEvents="tableEvents"
      :columnParsing="columnParsing"
    >
    </template-page>
    <div class="app-container" v-if="showSurrender == 1">
      <refund-list-detail
        :detail-id="detailId"
        @updateList="updateList"
        @setShowPage="
          val => {
            $refs.pageRef.refreshList()
            showSurrender = val
          }
        "
      />
    </div>
    <div class="app-container" v-else-if="showSurrender == 2">
      <refund-replenish
        :detail-id="detailId"
        @updateList="updateList"
        @setShowPage="
          val => {
            $refs.pageRef.refreshList()
            showSurrender = val
          }
        "
      />
    </div>
    <div class="app-container" v-else-if="showSurrender == 3">
      <refund-reexamine
        :detail-id="detailId"
        @updateList="updateList"
        @setShowPage="
          val => {
            $refs.pageRef.refreshList()
            showSurrender = val
          }
        "
      />
    </div>
    <examine-dialog :is-show.sync="isShowExamineDialog" :examine-form.sync="examineForm" />
  </div>
</template>

<script>
import {
  examineData,
  getDepositManageList,
  getDepositManageDate,
  getDepositManagExport,
  secondRefund,
  getDepositCountList
} from '@/api/engin_deposit/refund_list'
import { downloadFiles, handleImport } from '@/utils/util'
import ExamineDialog from '@/components/Common/examine-dialog'
import RefundListDetail from './components/refund_list-detail.vue'
import RefundReplenish from './components/refund_replenish.vue'
import RefundReexamine from './components/refund_reexamine.vue'
import TemplatePage from '@/components/template/template-page-1.vue'
import { depositManageHomeList, depositManageHomeListExport } from '@/api/deposit_list_v2.js'
export default {
  components: {
    RefundListDetail,
    ExamineDialog,
    RefundReplenish,
    RefundReexamine,
    TemplatePage
  },
  data() {
    return {
      importFileList: [],
      enginOrderType: 'HOME', // 列表类型
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页数量
      listTotal: 0, // 列表总数
      dataList: [], // 列表数据
      screenForm: {
        confirmName: '', // 审核人
        createName: '', // 创建人
        customerKeyword: '', // 客户编码/客户名称
        endDeliverTime: '', // 发货申请日期-结束
        enginOrderNo: '', // 工程订单编号
        enginOrderType: 'HOME', // 工程订单类型
        examineStatus: '', // 状态
        refEnginRecordNo: '', // 登录单号
        refProjectName: '', // 项目名称
        refUseUnit: '', // 使用单位
        startDeliverTime: '', // 发货申请日期-开始
        startSubmitTime: '',
        startConfirmTime: '',
        isRefundDeposit: null,
        startInstallTime: '',
        endConfirmTime: '',
        endInstallTime: '',
        specification: '',
        refFactoryNo: '',
        factoryNo: '',
        specialNo: '',
        refRegionWork: '',
        endSubmitTime: '',
        refTradeCategory: '',
        startAcceptTime: '',
        endAcceptTime: '',
        geLiInerNote: '',
        startFactoryNo: '',
        endFactoryNo: '',
        settlementStatus: '',
        mailFactoryStatus: '',
        endOrderDate: '',
        startOrderDate: '',
        dataStates: [],
        startInstallTime: '',
        endInstallTime: '',
        startSettlementDate: '',
        endSettlementDate: '',
        endMailFactoryDate: '',
        startMailFactoryDate: ''
      }, // 搜索表单
      refundDepositArr: [
        {
          label: '是',
          value: true
        },
        {
          label: '否',
          value: false
        }
      ],
      isCollapse: true,
      examineStatusArr: [
        {
          label: '保存',
          value: 'SAVE'
        },
        {
          label: '待审核',
          value: 'WAIT'
        },
        {
          label: '通过',
          value: 'OK'
        },
        {
          label: '不通过',
          value: 'FAIL'
        },
        {
          label: '关闭',
          value: 'CLOSE'
        }
      ],
      dataStatesArr: [
        {
          label: '正常',
          value: 'NORMAL'
        },
        {
          label: '补充',
          value: 'AMEND'
        },
        {
          label: '待复核',
          value: 'WAIT_REVIEW'
        },
        {
          label: '复核',
          value: 'REVIEW'
        }
      ],
      listLoading: false, // 列表加载loading
      examine: '',
      showSurrender: 0,
      detailId: '',
      selectData: [],
      mailFactoryStatus: '',
      settlementStatus: '',
      isShowExamineDialog: false,
      examineForm: {
        status: 'OK',
        remark: ''
      },
      numSum: {
        totalC: 0,
        amountC: 0
      },
      // 表格属性
      tableAttributes: {
        // 启用勾选列
        selectColumn: true
      },
      // 表格事件
      tableEvents: {
        'selection-change': this.selectionChange
      },
      recordSelected: []
    }
  },
  computed: {
    optionsEvensGroup() {
      return [
        [
          [
            {
              name: '',
              isRole: !this.$checkBtnRole('examine', this.$route.meta.roles),
              render: () => {
                return (
                  <el-popconfirm
                    title="批量审核吗？"
                    onOnConfirm={() => {
                      this.batchExamine()
                    }}
                  >
                    <span slot="reference">批量审核工程机已审单据</span>
                  </el-popconfirm>
                )
              }
            }
          ]
        ],
        [
          [
            {
              name: '',
              render: () => {
                return (
                  <el-upload
                    action=""
                    http-request={this.handleImport}
                    file-list={this.importFileList}
                    show-file-list={false}
                  >
                    <span>导入</span>
                  </el-upload>
                )
              }
            }
          ]
        ]
      ]
    },
    isCustomer() {
      return this.$store.getters.customerId && this.$store.getters.customerNumber
    }
  },
  methods: {
    // 列表请求函数
    getList: depositManageHomeList,
    // 列表导出函数
    exportList: depositManageHomeListExport,
    // 表格列解析渲染数据更改
    columnParsing(item, defaultData) {
      return defaultData
    },
    // 监听勾选变化
    selectionChange(data) {
      this.selectData = data
    },
    operation() {
      return (h, { row, index, column }) => {
        return (
          <div class="operation-btns">
            {row.examineStatus == '待审核' && this.$checkBtnRole('examine', this.$route.meta.roles) ? (
              <el-button
                type="text"
                class="textColor"
                onClick={() => {
                  this.examineFn(row.depositManageId)
                }}
              >
                审批
              </el-button>
            ) : null}
            {row.dataState == '待复核' &&
            row.examineStatus == '审核通过' &&
            this.$checkBtnRole('examine', this.$route.meta.roles) ? (
              <el-button
                type="text"
                class="textColor"
                onClick={() => {
                  this.reexamineClick(row.depositManageId)
                }}
              >
                复核
              </el-button>
            ) : null}

            {row.examineStatus == '保存' ||
            row.examineStatus == '审核通过' ||
            row.examineStatus == '审核不通过' ||
            row.dataState == '待复核' ||
            row.dataState == '复核' ||
            row.dataState == '补充' ? (
              <el-button
                type="text"
                class="textColor"
                onClick={() => {
                  this.infoFn(row.depositManageId)
                }}
              >
                详情
              </el-button>
            ) : null}
            {row.examineStatus == '审核通过' && !row.isRefundDeposit ? (
              <el-popconfirm
                style="margin-left: 10px"
                title="二次退押吗？"
                onConfirm={() => {
                  this.secondRefund(row)
                }}
              >
                <el-button slot="reference" type="text" size="mini">
                  二次退押{' '}
                </el-button>
              </el-popconfirm>
            ) : null}
          </div>
        )
      }
    },
    // ------------------------------------
    replenishClick(id) {
      this.detailId = id
      this.showSurrender = 2
    },
    reexamineClick(id) {
      this.detailId = id
      this.showSurrender = 3
    },
    // 同步资料日期
    async syncDateFn() {
      await getDepositManageDate()
      this.$message.success('同步资料日期成功')
    },
    // 导入
    async handleImport(param) {
      const file = param.file
      const formData = new FormData()
      formData.append('file', file)
      const result = await handleImport('deposit-manage/import', formData)
      console.log(result)
      this.importFileList = []
      if (result.code == 200) {
        this.$message.success('导入成功')
        this.$refs.pageRef.refreshList()
      } else {
        this.$message.error(result.message)
      }
    },
    // 打开 批量审批
    batchExamine() {
      if (this.selectData.length) {
        this.submitExamineForm()
        // this.isShowExamineDialog = true;
        return
      }
      this.$errorMsg('请选择')
    },
    // 提交 批量审批
    submitExamineForm() {
      let ids = this.selectData.map(item => {
        return item.depositManageId
      })
      ids = [...new Set(ids)]
      examineData({
        ids: ids.join(',')
        // examineStatus: this.examineForm.status,
        // examineRemark: this.examineForm.remark,
        // serviceId: ''
      }).then(res => {
        this.isShowExamineDialog = false
        this.$successMsg('修改成功')
        this.$refs.pageRef.refreshList()
      })
    },
    // 审批后更新列表数据
    updateList() {
      this.$refs.pageRef.refreshList()
    },
    // 二次退押
    secondRefund(row) {
      delete row.sums1
      delete row.sums2
      secondRefund(row).then(res => {
        this.$successMsg('二次退押成功')
        this.$refs.pageRef.refreshList()
      })
    },
    // 导出
    exportFn() {
      const params = {
        ...this.screenForm,
        orderType: 'HOME',
        examine: this.examine
      }
      downloadFiles('deposit-manage/export', params)
    },
    // 详情
    infoFn(id) {
      this.detailId = id
      this.showSurrender = 1
    },
    examineFn(id) {
      this.detailId = id
      this.showSurrender = 1
    }
  }
}
</script>

<style lang="scss" scoped>
.dateStyle {
  width: 100%;
}

.import-btn {
  margin-left: 10px;
  display: inline-block;
}

.fanwei {
  display: flex;

  span {
    margin: 0 20px;
    line-height: 28px;
  }
}

.ulStyle {
  list-style: none;
  margin: 0;
  padding: 10px 0;
  background-color: #ffffff;
  z-index: 1;
}

.title {
  display: inline-block;
  font-weight: 700;
  margin-right: 20px;
}

.num {
  padding-left: 6px;
  font-weight: 400;
}
</style>