opms_frontend/src/views/collection/index.vue

<!--
 * @Author: liuzhenlin 461480418@qq.ocm
 * @Date: 2023-01-10 13:40:41
 * @LastEditors: wanglj
 * @LastEditTime: 2023-03-22 11:26:48
 * @Description: file content
 * @FilePath: \opms_frontend\src\views\collection\index.vue
-->
<template>
  <div class="collection-manage">
    <vab-query-form>
      <vab-query-form-top-panel>
        <el-form :inline="true" label-width="0px" :model="queryForm" @submit.native.prevent>
          <el-form-item prop="contractCode">
            <el-input
              v-model="queryForm.contractCode"
              clearable
              placeholder="合同编号"
              @keyup.enter.native="queryData" />
          </el-form-item>
          <el-form-item prop="custId">
            <el-input
              v-model="queryForm.custName"
              class="customer-input"
              clearable
              placeholder="客户名称"
              @keyup.enter.native="queryData" />
          </el-form-item>
          <el-form-item prop="custId">
            <el-select v-model="queryForm.approStatus" class="status-select" clearable placeholder="审核状态">
              <el-option v-for="item in approStatusOption" :key="item.id" :label="item.label" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item prop="inchargeName">
            <el-input
              v-model="queryForm.inchargeName"
              clearable
              placeholder="销售工程师"
              @keyup.enter.native="queryData" />
          </el-form-item>
          <el-form-item prop="custProvince">
            <el-select
              v-model="queryForm.custProvince"
              class="compact-select"
              clearable
              placeholder="所在省"
              value-key="id">
              <el-option v-for="item in provinceOptions" :key="item.id" :label="item.distName" :value="item" />
            </el-select>
          </el-form-item>
          <el-form-item prop="custCity">
            <el-select
              v-model="queryForm.custCity"
              class="compact-select"
              clearable
              placeholder="所在市"
              value-key="id">
              <el-option
                v-for="item in queryForm.custProvince ? queryForm.custProvince.children : []"
                :key="item.id"
                clearable
                :label="item.distName"
                :value="item" />
            </el-select>
          </el-form-item>
          <el-form-item prop="filterDate">
            <el-date-picker
              v-model="queryForm.filterDate"
              end-placeholder="回款结束时间"
              range-separator="至"
              start-placeholder="回款开始时间"
              style="width: 100%"
              type="daterange"
              value-format="yyyy-MM-dd" />
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-search" type="primary" @click="queryData">查询</el-button>
          </el-form-item>
        </el-form>
      </vab-query-form-top-panel>
      <vab-query-form-left-panel :span="12">
        <!-- <el-button icon="el-icon-plus" size="mini" type="primary" @click="handleEdit()">新建</el-button>
        <el-button icon="el-icon-delete" type="danger" @click="handleDelete()">删除</el-button> -->
      </vab-query-form-left-panel>
      <vab-query-form-right-panel :span="12">
        <table-tool :columns="columns" :show-columns.sync="showColumns" table-type="collectionTable" />
      </vab-query-form-right-panel>
    </vab-query-form>
    <el-table
      ref="table"
      v-loading="listLoading"
      border
      :data="list"
      :height="height"
      @selection-change="setSelectRows">
      <el-table-column align="center" show-overflow-tooltip type="selection" />
      <el-table-column
        v-for="(item, index) in showColumns"
        :key="index"
        align="center"
        :label="item.label"
        :min-width="item.width"
        :prop="item.prop"
        show-overflow-tooltip
        :sortable="item.sortable">
        <template #default="{ row }">
          <el-button v-if="item.prop === 'custName'" class="link-button" type="text" @click="handleCustDetail(row)">
            {{ row.custName }}
          </el-button>
          <el-button
            v-else-if="item.prop === 'contractCode'"
            class="link-button"
            type="text"
            @click="handleContractDetail(row)">
            {{ row.contractCode }}
          </el-button>
          <span v-else-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 == 'updatedTime'">{{ parseTime(row.updatedTime, '{y}-{m}-{d}') }}</span>
          <span v-else-if="item.prop == 'createdTime'">{{ parseTime(row.createdTime, '{y}-{m}-{d}') }}</span>
          <span v-else-if="item.prop == 'contractAmount'">{{ formatPrice(row.contractAmount) }}</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-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column> -->
    </el-table>
    <el-pagination
      background
      :current-page="queryForm.pageNum"
      :layout="layout"
      :page-size="queryForm.pageSize"
      :total="total"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange" />
  </div>
</template>

<script>
  import to from 'await-to-js'
  import collectionApi from '@/api/contract/collection'
  import TableTool from '@/components/table/TableTool'
  import api from '@/api/customer'
  export default {
    name: 'Collection',
    components: {
      TableTool,
    },
    data() {
      return {
        height: this.$baseTableHeight(2),
        approStatusOption: [
          { id: '10', label: '未回款' },
          { id: '20', label: '已回款' },
        ],
        listLoading: false,
        layout: 'total, sizes, prev, pager, next, jumper',
        list: [],
        total: 0,
        queryForm: {
          pageNum: 1,
          pageSize: 10,
          contractCode: '', // 合同编号
          contractName: '', //合同名称
          custName: '', // 客户名称  ()
          inchargeName: '', // 负责人(销售工程师)
          custProvinceId: 0,
          custProvince: null,
          custCityId: 0,
          custCity: null,
          filterDate: [],
          nboName: '', //项目名称
          approStatus: '', //审批状态
        },
        provinceOptions: [],
        collectionTypeOption: [], //回款方式
        selectRows: [], //选择的表格数据
        industryOptions: [], //客户行业
        // 自定义列表
        showColumns: [],
        columns: [
          {
            label: '合同编号',
            width: '160px',
            prop: 'contractCode',
            sortable: false,
            disableCheck: false,
          },
          {
            label: '客户名称',
            width: '280px',
            prop: 'custName',
            sortable: false,
            disableCheck: false,
          },
          {
            label: '合同金额',
            width: '120px',
            prop: 'contractAmount',
            sortable: false,
            disableCheck: false,
          },
          {
            label: '回款方式',
            width: '100px',
            prop: 'collectionType',
            sortable: false,
            disableCheck: false,
          },
          {
            label: '回款金额',
            width: '120px',
            prop: 'collectionAmount',
            sortable: false,
            disableCheck: false,
          },
          {
            label: '审核状态',
            width: '100px',
            prop: 'approStatus',
            sortable: false,
            disableCheck: false,
          },
          {
            label: '备注',
            width: 'auto',
            prop: 'remark',
            sortable: false,
            disableCheck: false,
          },
          {
            label: '回款时间',
            width: '100px',
            prop: 'collectionDatetime',
            sortable: false,
            disableCheck: false,
          },
          {
            label: '销售工程师',
            width: '100px',
            prop: 'inchargeName',
            sortable: false,
            disableCheck: false,
          },
          {
            label: '所在省',
            width: '200px',
            prop: 'custProvince',
            sortable: false,
            disableCheck: false,
          },
          {
            label: '所在市',
            width: '100px',
            prop: 'custCity',
            sortable: false,
            disableCheck: false,
          },
          {
            label: '更新时间',
            width: '100px',
            prop: 'updatedTime',
            sortable: false,
            disableCheck: false,
          },
          {
            label: '创建时间',
            width: '100px',
            prop: 'createdTime',
            sortable: false,
            disableCheck: false,
          },
          {
            label: '创建人',
            width: '100px',
            prop: 'createdName',
            sortable: false,
            disableCheck: false,
          },
        ],
      }
    },
    watch: {
      showColumns: function () {
        this.$nextTick(() => this.$refs.table.doLayout())
      },
    },
    activated() {
      this.queryData()
    },
    async mounted() {
      await this.getOptions()
      let date1 = new Date()
      let date2 = new Date()
      date1 = date1.setDate(date1.getDate() - 30)
      date2 = date2.setDate(date2.getDate() + 30)
      this.queryForm.filterDate = [this.parseTime(date1, '{y}-{m}-{d}'), this.parseTime(date2, '{y}-{m}-{d}')]
      console.info(this.queryForm.filterDate)
      this.queryData()
    },
    methods: {
      async getOptions() {
        await Promise.all([api.getProvinceDetail(), this.getDicts('collection_type')])
          .then(([province, collectionType]) => {
            this.provinceOptions = province.data.list || []
            this.collectionTypeOption = collectionType.data.values || []
          })
          .catch((err) => console.log(err))
      },
      async queryData() {
        this.listLoading = true
        const params = { ...this.queryForm }
        params.custProvinceId = params.custProvince ? params.custProvince.id : 0
        params.custCityId = params.custCity ? params.custCity.id : 0
        if (this.queryForm.filterDate && this.queryForm.filterDate.length === 2) {
          params.collectionDatetimeStart = this.queryForm.filterDate[0]
          params.collectionDatetimeEnd = this.queryForm.filterDate[1]
        }
        const [err, res] = await to(collectionApi.getList(params))
        if (err) return (this.listLoading = false)
        this.list = res.data.list || []
        this.total = res.data.total
        this.listLoading = false
        this.$nextTick(() => this.$refs.table.doLayout())
      },
      reset() {
        this.queryForm = {
          pageNum: 1,
          pageSize: 10,
          custCode: '', // 客户编码
          custName: '', //客户名称
          inchargeName: '', // 负责人(销售工程师)
          custIndustry: '', // 客户行业  ()
          custLevel: '', //客户级别
        }
        this.queryData()
      },
      handleSizeChange(val) {
        this.queryForm.pageSize = val
        this.queryData()
      },
      handleCurrentChange(val) {
        this.queryForm.pageNum = val
        this.queryData()
      },
      setSelectRows(val) {
        this.selectRows = val.map((item) => item.id)
      },
      // 客户详情
      handleCustDetail(row) {
        this.$router.push({
          path: '/customer/detail',
          query: {
            id: row.custId,
          },
        })
      },
      // 合同详情
      handleContractDetail(row) {
        this.$router.push({
          path: '/contract/detail',
          query: {
            id: row.contractId,
          },
        })
      },
      // 合同删除
      handleDelete(row = null) {
        let ids = row ? [row.id] : this.selectRows
        if (!ids[0]) {
          return
        }
        this.$confirm('确认删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(async () => {
            const [err, res] = await to(collectionApi.delCollection({ id: ids }))
            if (err) return
            if (res.code == 200) {
              this.$message({
                type: 'success',
                message: '删除成功!',
              })
              this.queryData()
            }
          })
          .catch(() => {})
      },
    },
  }
</script>

<style lang="scss" scoped>
  $base: '.collection-manage';
  #{$base} {
    height: calc(100vh - 60px - 12px * 2 - 40px);
    padding: 12px;
    background: #fff;
    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), border 0s, color 0.1s, font-size 0s;
  }

  .customer-input {
    width: 240px;
  }

  .status-select {
    width: 110px;
  }

  .compact-select {
    width: 90px;
  }
</style>