opms_frontend/src/views/contract/components/DetailsCollection.vue

<!--
 * @Author: liuzl 461480418@qq.com
 * @Date: 2023-01-09 13:54:40
 * @LastEditors: liuzhenlin
 * @LastEditTime: 2023-01-10 14:39:40
 * @Description: file content
 * @FilePath: \订单全流程管理系统\src\views\contract\components\DetailsCollection.vue
-->
<template>
  <div class="collection-container">
    <!-- 回款计划 -->
    <div class="collection-plan mb10">
      <el-row class="mb10">
        <el-col class="text-right" :span="24">
          <el-button
            v-permissions="['contract:detail:collectionPlan:add']"
            icon="el-icon-plus"
            size="mini"
            type="primary"
            @click="$refs.collectionPlan.init()">
            新建回款计划
          </el-button>
        </el-col>
      </el-row>
      <el-table border :data="collectionPlanData" height="calc(100% - 50px)">
        <el-table-column
          v-for="(item, index) in planColumns"
          :key="index"
          align="center"
          :label="item.label"
          :min-width="item.width"
          :prop="item.prop"
          show-overflow-tooltip>
          <template #default="{ row }">
            <span v-if="item.prop == 'contractStatus'">
              {{ row.contractStatus == '10' ? '待回款' : row.contractStatus == '20' ? '部分回款' : '全部回款' }}
            </span>
            <span v-else-if="item.prop == 'planDatetime'">
              {{ parseTime(row.planDatetime, '{y}-{m}-{d}') }}
            </span>
            <span v-else-if="item.prop == 'planScale'">
              {{ row.planScale + '%' }}
            </span>
            <span v-else-if="item.prop == 'planAmount'">{{ formatPrice(row.planAmount) }}</span>
            <span v-else>{{ row[item.prop] }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" fixed="right" label="操作" width="120px">
          <template slot-scope="scope">
            <el-button
              v-permissions="['contract:detail:collection:add']"
              :disabled="scope.row.contractStatus == '30'"
              type="text"
              @click="$refs.collection.init(scope.row.id)">
              回款
            </el-button>
            <el-button
              v-permissions="['contract:detail:collectionPlan:edit']"
              type="text"
              @click="$refs.collectionPlan.init(scope.row.id)">
              编辑
            </el-button>
            <el-button
              v-permissions="['contract:detail:collectionPlan:delete']"
              type="text"
              @click="handleDel(scope.row, 'plan')">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 回款 -->
    <div class="collection">
      <el-row class="mb10">
        <el-col class="text-right" :span="24">
          <el-button
            v-permissions="['contract:detail:collection:add']"
            icon="el-icon-plus"
            size="mini"
            type="primary"
            @click="$refs.collection.init()">
            新建回款
          </el-button>
        </el-col>
      </el-row>
      <el-table border :data="collectionData" height="calc(100% - 50px)">
        <el-table-column
          v-for="(item, index) in collectionColumns"
          :key="index"
          align="center"
          :label="item.label"
          :min-width="item.width"
          :prop="item.prop"
          show-overflow-tooltip>
          <template #default="{ row }">
            <span v-if="item.prop == 'collectionType'">
              {{ selectDictLabel(collectionTypeOption, row.collectionType) }}
            </span>
            <span v-else-if="item.prop == 'approStatus'">
              {{ row.approStatus == '10' ? '未回款' : '已回款' }}
            </span>
            <span v-else-if="item.prop == 'collectionDatetime'">
              {{ parseTime(row.collectionDatetime, '{y}-{m}-{d}') }}
            </span>
            <span v-else-if="item.prop == 'collectionAmount'">{{ formatPrice(row.collectionAmount) }}</span>
            <span v-else>{{ row[item.prop] }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 新增编辑回款计划 -->
    <edit-plan ref="collectionPlan" :details="details" @collectionPlanSave="getCollectionPlaneList()" />
    <!-- 新增编辑回款合同 -->
    <edit-collection
      ref="collection"
      :collection-type-data="collectionTypeOption"
      :details="details"
      @collectionSave="collectionSave()" />
  </div>
</template>

<script>
  import collectionApi from '@/api/contract/collection'
  import collectionPlanApi from '@/api/contract/collectionPlan'
  import EditPlan from '@/views/contract/components/EditPlan'
  import EditCollection from './EditCollection'
  import to from 'await-to-js'

  export default {
    name: 'DetailsCollection',
    components: {
      EditPlan,
      EditCollection,
    },
    props: {
      details: {
        type: Object,
        default: () => {},
      },
    },
    data() {
      return {
        collectionData: [], //回款数据
        collectionPlanData: [], //回款计划数据
        planColumns: [
          {
            label: '客户名称',
            width: '280px',
            prop: 'custName',
          },
          {
            label: '合同编号',
            width: '160px',
            prop: 'contractCode',
          },
          {
            label: '计划回款金额',
            width: '120px',
            prop: 'planAmount',
          },
          {
            label: '回款状态',
            width: '100px',
            prop: 'contractStatus',
          },
          {
            label: '计划回款日期',
            width: '120px',
            prop: 'planDatetime',
          },
          {
            label: '计划回款比例',
            width: '100px',
            prop: 'planScale',
          },
          {
            label: '回款条件',
            width: '120px',
            prop: 'planCondition',
          },
          {
            label: '备注',
            width: 'auto',
            prop: 'remark',
          },
        ],
        collectionColumns: [
          {
            label: '客户名称',
            width: '280px',
            prop: 'custName',
          },
          {
            label: '合同编号',
            width: '160px',
            prop: 'contractCode',
          },
          {
            label: '回款金额',
            width: '120px',
            prop: 'collectionAmount',
          },
          {
            label: '回款方式',
            width: '100px',
            prop: 'collectionType',
          },
          {
            label: '审核状态',
            width: '100px',
            prop: 'approStatus',
          },
          {
            label: '回款日期',
            width: '120px',
            prop: 'collectionDatetime',
          },
          {
            label: '备注',
            width: 'auto',
            prop: 'remark',
          },
        ],
        collectionTypeOption: [], //,回款方式
      }
    },

    async mounted() {
      await this.getOptions()
      this.getCollectionList()
      this.getCollectionPlaneList()
    },

    methods: {
      async getOptions() {
        await Promise.all([this.getDicts('collection_type')])
          .then(([collectionType]) => {
            this.collectionTypeOption = collectionType.data.values || []
          })
          .catch((err) => console.log(err))
      },
      // 获取回款和回款计划列表
      async getCollectionList() {
        let params = { contractId: this.details.id, pageNum: 0 }
        const [err, res] = await to(collectionApi.getList(params))
        if (err) return
        this.collectionData = res.data.list
      },
      async getCollectionPlaneList() {
        let params = { contractId: this.details.id, pageNum: 0 }
        const [err, res] = await to(collectionPlanApi.getList(params))
        if (err) return
        this.collectionPlanData = res.data.list
      },
      collectionSave() {
        this.getCollectionList()
        this.getCollectionPlaneList()
      },
      // 删除回款计划
      handleDel(row, type) {
        this.$confirm('确认删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(async () => {
            // 回款计划
            if (type == 'plan') {
              const [err, res] = await to(collectionPlanApi.delCollectionPlan({ id: [row.id] }))
              if (err) return
              if (res.code == 200) {
                this.$message({
                  type: 'success',
                  message: '删除成功!',
                })
                this.getCollectionPlaneList()
              }
            } else {
              // 回款
              const [err, res] = await to(collectionPlanApi.delCollectionPlan({ id: [row.id] }))
              if (err) return
              if (res.code == 200) {
                this.$message({
                  type: 'success',
                  message: '删除成功!',
                })
                this.queryData()
              }
            }
          })
          .catch(() => {})
      },
    },
  }
</script>

<style lang="scss" scoped>
  .collection-container {
    .mb10 {
      margin-bottom: 10px;
    }

    height: 100%;

    .collection-plan,
    .collection {
      height: 50%;

      .el-row {
        height: 30px;
      }
    }

    .text-right {
      text-align: right;
    }
  }
</style>