|
|
@@ -0,0 +1,304 @@
|
|
|
+<!--
|
|
|
+ * @Author: liuzhenlin 461480418@qq.ocm
|
|
|
+ * @Date: 2023-01-10 13:40:41
|
|
|
+ * @LastEditors: liuzhenlin
|
|
|
+ * @LastEditTime: 2023-01-10 14:02:36
|
|
|
+ * @Description: file content
|
|
|
+ * @FilePath: \订单全流程管理系统\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" clearable placeholder="客户名称" @keyup.enter.native="queryData" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="custId">
|
|
|
+ <el-select v-model="queryForm.approStatus" 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>
|
|
|
+ <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 :check-list.sync="checkList" :columns="columns" />
|
|
|
+ </vab-query-form-right-panel>
|
|
|
+ </vab-query-form>
|
|
|
+ <el-table
|
|
|
+ v-loading="listLoading"
|
|
|
+ border
|
|
|
+ :data="list"
|
|
|
+ height="calc(100vh - 290px)"
|
|
|
+ @selection-change="setSelectRows">
|
|
|
+ <el-table-column align="center" show-overflow-tooltip type="selection" />
|
|
|
+ <el-table-column
|
|
|
+ v-for="(item, index) in finallyColumns"
|
|
|
+ :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'">
|
|
|
+ {{ collectionTypeOption.filter((item) => item.key == row.collectionType)[0].value || '-' }}
|
|
|
+ </span>
|
|
|
+ <span v-else-if="item.prop == 'approStatus'">{{ row.approStatus == '10' ? '未回款' : '已回款' }}</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'
|
|
|
+ export default {
|
|
|
+ name: 'OpenSea',
|
|
|
+ components: {
|
|
|
+ TableTool,
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ 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: '', // 客户名称 ()
|
|
|
+ nboName: '', //项目名称
|
|
|
+ approStatus: '', //审批状态
|
|
|
+ },
|
|
|
+ collectionTypeOption: [], //回款方式
|
|
|
+ selectRows: [], //选择的表格数据
|
|
|
+ industryOptions: [], //客户行业
|
|
|
+ // 自定义列表
|
|
|
+ checkList: [],
|
|
|
+ columns: [
|
|
|
+ {
|
|
|
+ label: '合同编号',
|
|
|
+ width: 'auto',
|
|
|
+ prop: 'contractCode',
|
|
|
+ sortable: false,
|
|
|
+ disableCheck: false,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '客户名称',
|
|
|
+ width: 'auto',
|
|
|
+ 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: '100px',
|
|
|
+ prop: 'remark',
|
|
|
+ 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,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ finallyColumns() {
|
|
|
+ return this.columns.filter((item) => this.checkList.includes(item.label))
|
|
|
+ },
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.getOptions()
|
|
|
+ this.queryData()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getOptions() {
|
|
|
+ Promise.all([this.getDicts('collection_type')])
|
|
|
+ .then(([collectionType]) => {
|
|
|
+ this.collectionTypeOption = collectionType.data.values || []
|
|
|
+ })
|
|
|
+ .catch((err) => console.log(err))
|
|
|
+ },
|
|
|
+ async queryData() {
|
|
|
+ this.listLoading = true
|
|
|
+ const params = { ...this.queryForm }
|
|
|
+ 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
|
|
|
+ },
|
|
|
+ reset() {
|
|
|
+ this.queryForm = {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ custCode: '', // 客户编码
|
|
|
+ custName: '', //客户名称
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+</style>
|