wuweihua
399 lines
15 KiB
Vue
399 lines
15 KiB
Vue
<template>
|
||
<div class="app-container">
|
||
<el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
|
||
<el-form-item label="关键词" prop="keywords">
|
||
<el-input
|
||
v-model="queryParams.keywords"
|
||
type="textarea"
|
||
:autosize="{ minRows: 1, maxRows: 4 }"
|
||
placeholder="客户编码/客户名称/对外代码，一行一个，模糊查询（多行为或者关系）"
|
||
clearable
|
||
style="width: 340px;"
|
||
@keyup.enter.ctrl="handleQuery"
|
||
/>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="启用状态" prop="isEnable">
|
||
<el-select
|
||
v-model="queryParams.isEnable"
|
||
placeholder="请选择启用状态"
|
||
clearable
|
||
@change="handleQuery"
|
||
>
|
||
<el-option
|
||
label="正常"
|
||
:value="0"
|
||
/>
|
||
<el-option
|
||
label="停用"
|
||
:value="1"
|
||
/>
|
||
</el-select>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="业务员" prop="salesUserId">
|
||
<user-select
|
||
v-model="queryParams.salesUserId"
|
||
value-field="userName"
|
||
placeholder="工号/姓名搜索"
|
||
@change="handleQuery"
|
||
/>
|
||
</el-form-item>
|
||
|
||
|
||
|
||
<el-form-item label="结算员" prop="settlementUserId">
|
||
<user-select v-model="queryParams.settlementUserId" placeholder="请选择结算员" @change="handleQuery" />
|
||
</el-form-item>
|
||
<el-form-item label="客服" prop="serviceUserId">
|
||
<user-select v-model="queryParams.serviceUserId" placeholder="请选择客服" @change="handleQuery" />
|
||
</el-form-item>
|
||
|
||
<el-form-item>
|
||
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
|
||
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
|
||
<el-row :gutter="10" class="mb8">
|
||
<el-col :span="1.5">
|
||
<el-button
|
||
type="primary"
|
||
plain
|
||
icon="Plus"
|
||
@click="handleAdd"
|
||
v-hasPermi="['customersupplier:customerinfo:add']"
|
||
>新增</el-button>
|
||
</el-col>
|
||
<el-col :span="1.5">
|
||
<el-button
|
||
type="warning"
|
||
plain
|
||
icon="Edit"
|
||
:disabled="single"
|
||
@click="handleUpdate"
|
||
v-hasPermi="['customersupplier:customerinfo:edit']"
|
||
>修改</el-button>
|
||
</el-col>
|
||
<el-col :span="1.5">
|
||
<el-button
|
||
type="success"
|
||
plain
|
||
icon="Edit"
|
||
:disabled="single"
|
||
@click="handleCustomerMoney"
|
||
|
||
>客户余额</el-button>
|
||
</el-col>
|
||
<el-col :span="1.5">
|
||
<el-button
|
||
type="info"
|
||
plain
|
||
icon="Document"
|
||
:disabled="single"
|
||
@click="handleViewLog()"
|
||
v-hasPermi="['customersupplier:customerinfo:query']"
|
||
>日志</el-button>
|
||
</el-col>
|
||
<el-col :span="1.5">
|
||
<el-button
|
||
type="danger"
|
||
plain
|
||
icon="Delete"
|
||
:disabled="multiple"
|
||
@click="handleDelete"
|
||
v-hasPermi="['customersupplier:customerinfo:remove']"
|
||
>删除</el-button>
|
||
</el-col>
|
||
<el-col :span="1.5">
|
||
<el-button
|
||
type="warning"
|
||
plain
|
||
icon="Download"
|
||
@click="handleExport"
|
||
v-hasPermi="['customersupplier:customerinfo:export']"
|
||
>导出</el-button>
|
||
</el-col>
|
||
|
||
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
|
||
<column-settings :columns="columnDefs" :visible-map="colVisible" @toggle="toggleColumn" @reset="resetColumns" />
|
||
</el-row>
|
||
|
||
<el-table v-loading="loading" border :data="customerList" @selection-change="handleSelectionChange">
|
||
<el-table-column type="selection" width="55" align="center" fixed="left" />
|
||
<!-- <el-table-column label="客户ID" align="center" prop="customerId" />-->
|
||
<el-table-column v-if="isColVisible('customerCode')" label="客户编码" width="100" align="center" prop="customerCode" />
|
||
<el-table-column v-if="isColVisible('customerName')" label="客户名称" width="300" align="center" prop="customerName" :show-overflow-tooltip="true" />
|
||
<el-table-column v-if="isColVisible('customerCodeDw')" label="对外代码" align="center" prop="customerCodeDw" />
|
||
<el-table-column v-if="isColVisible('creditCode')" label="统一社会信用代码" width="200" align="center" prop="creditCode" />
|
||
<el-table-column v-if="isColVisible('customerType')" label="业务类型" align="center" prop="customerType">
|
||
<template #default="scope">
|
||
<dict-tag :options="customer_type" :value="scope.row.customerType" />
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column v-if="isColVisible('isEnable')" label="启用状态" align="center" prop="isEnable">
|
||
<template #default="scope">
|
||
<dict-tag :options="sys_normal_disable" :value="scope.row.isEnable" />
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column v-if="isColVisible('salesUserId')" label="业务员" align="center" prop="salesUserId">
|
||
<template #default="scope">{{ scope.row.salesUserNickName || scope.row.salesUser || scope.row.salesUserId }}</template>
|
||
</el-table-column>
|
||
|
||
<!-- <el-table-column v-if="isColVisible('ed')" label="资金额度" align="center" prop="ed" />-->
|
||
<el-table-column v-if="isColVisible('zq')" label="回款账期" align="center" prop="zq" />
|
||
<el-table-column v-if="isColVisible('settlementUserId')" label="结算员" align="center" prop="settlementUserId">
|
||
<template #default="scope"><user-name :user-id="scope.row.settlementUserId" /></template>
|
||
</el-table-column>
|
||
<el-table-column v-if="isColVisible('serviceUserId')" label="客服" align="center" prop="serviceUserId">
|
||
<template #default="scope"><user-name :user-id="scope.row.serviceUserId" /></template>
|
||
</el-table-column>
|
||
<el-table-column v-if="isColVisible('settlementType')" label="结算方式" align="center" prop="settlementType">
|
||
<template #default="scope">
|
||
<dict-tag :options="settlement_type" :value="scope.row.settlementType" />
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column v-if="isColVisible('tempEd')" label="临时额度" align="center" prop="tempEd" />
|
||
<el-table-column v-if="isColVisible('accountBalance')" label="账户余额(CNY)" align="center" prop="accountBalance" width="130">
|
||
<template #default="scope">{{ formatBalance(scope.row.accountBalance) }}</template>
|
||
</el-table-column>
|
||
<el-table-column v-if="isColVisible('weightThreshold')" label="重量阈值" align="center" prop="weightThreshold" />
|
||
<el-table-column v-if="isColVisible('throwRatio')" label="抛比" align="center" prop="throwRatio" />
|
||
<el-table-column v-if="isColVisible('creditEd')" label="信用额度" align="center" prop="creditEd">
|
||
<template #default="scope">
|
||
<span v-if="Number(scope.row.creditEd) < 0" style="color: var(--el-color-danger); font-weight: 600;"
|
||
title="信用额度异常（如临时额度到期失效），请核查客户额度">
|
||
{{ scope.row.creditEd }}
|
||
</span>
|
||
<span v-else>{{ scope.row.creditEd }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column v-if="isColVisible('productCodes')" label="绑定产品" align="center" prop="productCodes" min-width="180">
|
||
<template #default="scope">
|
||
<span v-if="productNames(scope.row.productCodes)" :title="productNames(scope.row.productCodes)">
|
||
{{ productNames(scope.row.productCodes) }}
|
||
</span>
|
||
<span v-else>-</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column v-if="isColVisible('remark')" label="备注说明" align="center" prop="remark" :show-overflow-tooltip="true" />
|
||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="290" fixed="right">
|
||
<template #default="scope">
|
||
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['customersupplier:customerinfo:edit']">修改</el-button>
|
||
<!-- <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['customersupplier:customerinfo:remove']">删除</el-button>-->
|
||
<el-button link type="primary" icon="Wallet" @click="handleCustomerMoney(scope.row)">客户余额</el-button>
|
||
<el-button link type="primary" icon="Document" @click="handleViewLog(scope.row)" v-hasPermi="['customersupplier:customerinfo:query']">日志</el-button>
|
||
</template>
|
||
|
||
</el-table-column>
|
||
</el-table>
|
||
|
||
<pagination
|
||
v-show="total>0"
|
||
:total="total"
|
||
v-model:page="queryParams.pageNum"
|
||
v-model:limit="queryParams.pageSize"
|
||
@pagination="getList"
|
||
/>
|
||
|
||
<!-- 客户业务操作日志弹窗 -->
|
||
<customer-log-dialog
|
||
v-model="logOpen"
|
||
:customer-id="logCustomer.customerId"
|
||
:customer-name="logCustomer.customerName"
|
||
:customer-code="logCustomer.customerCode"
|
||
/>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup name="Customer">
|
||
import { listCustomer, delCustomer } from "@/api/customersuppliermanagement/customerinfo/customer.js"
|
||
import { useProducts, parseProductCodes } from '@/components/ProductSelect/useProducts'
|
||
import CustomerLogDialog from './components/CustomerLogDialog.vue'
|
||
import { useColumnSettings } from '@/utils/columnSettings'
|
||
|
||
const { proxy } = getCurrentInstance()
|
||
|
||
/** 可自定义列（默认全部可见；选择列固定、操作列固定右侧不参与设置） */
|
||
const columnDefs = [
|
||
{ key: 'customerCode', label: '客户编码' },
|
||
{ key: 'customerName', label: '客户名称' },
|
||
{ key: 'customerCodeDw', label: '对外代码' },
|
||
{ key: 'creditCode', label: '统一社会信用代码' },
|
||
{ key: 'customerType', label: '业务类型' },
|
||
{ key: 'isEnable', label: '启用状态' },
|
||
{ key: 'salesUserId', label: '业务员' },
|
||
// { key: 'ed', label: '资金额度' },
|
||
{ key: 'zq', label: '回款账期' },
|
||
{ key: 'settlementUserId', label: '结算员' },
|
||
{ key: 'serviceUserId', label: '客服' },
|
||
{ key: 'settlementType', label: '结算方式' },
|
||
{ key: 'tempEd', label: '临时额度' },
|
||
{ key: 'accountBalance', label: '账户余额(CNY)' },
|
||
{ key: 'weightThreshold', label: '重量阈值' },
|
||
{ key: 'throwRatio', label: '抛比' },
|
||
{ key: 'creditEd', label: '信用额度' },
|
||
{ key: 'productCodes', label: '绑定产品' },
|
||
{ key: 'remark', label: '备注说明' }
|
||
]
|
||
const { colVisible, isColVisible, toggleColumn, resetColumns } = useColumnSettings('customer-info-list', columnDefs)
|
||
|
||
const customerList = ref([])
|
||
const loading = ref(true)
|
||
const showSearch = ref(true)
|
||
const ids = ref([])
|
||
const single = ref(true)
|
||
const multiple = ref(true)
|
||
const total = ref(0)
|
||
|
||
const { sys_normal_disable, settlement_type, customer_type } = useDict("sys_normal_disable", "settlement_type", "customer_type")
|
||
|
||
/** 绑定产品代码串 -> 产品名称展示（产品代码+名称；查不到的产品回显原代码） */
|
||
const { ensureProducts, getProductLabel } = useProducts()
|
||
function productNames(productCodes) {
|
||
return parseProductCodes(productCodes).map(code => getProductLabel(code)).join('，')
|
||
}
|
||
ensureProducts()
|
||
|
||
/** 格式化余额（数据源 customer_account 余额表） */
|
||
function formatBalance(val) {
|
||
const num = Number(val)
|
||
return isNaN(num) ? '0.00' : num.toFixed(2)
|
||
}
|
||
|
||
const data = reactive({
|
||
queryParams: {
|
||
pageNum: 1,
|
||
pageSize: 10,
|
||
keywords: undefined,
|
||
creditCode: undefined,
|
||
customerType: undefined,
|
||
isEnable: undefined,
|
||
salesUserId: undefined,
|
||
salesUser: undefined,
|
||
ed: undefined,
|
||
zq: undefined,
|
||
settlementUserId: undefined,
|
||
settlementUser: undefined,
|
||
serviceUserId: undefined,
|
||
serviceUser: undefined,
|
||
settlementType: undefined,
|
||
tempEd: undefined,
|
||
accountBalance: undefined,
|
||
foreignCurrencyBalance: undefined,
|
||
weightThreshold: undefined,
|
||
throwRatio: undefined,
|
||
creditEd: undefined,
|
||
productCodes: undefined,
|
||
}
|
||
})
|
||
|
||
const { queryParams } = toRefs(data)
|
||
|
||
/** 查询客户主列表 */
|
||
function getList() {
|
||
loading.value = true
|
||
listCustomer(queryParams.value).then(response => {
|
||
customerList.value = response.rows
|
||
total.value = response.total
|
||
loading.value = false
|
||
})
|
||
}
|
||
|
||
/** 搜索按钮操作 */
|
||
function handleQuery() {
|
||
queryParams.value.pageNum = 1
|
||
getList()
|
||
}
|
||
|
||
/** 重置按钮操作 */
|
||
function resetQuery() {
|
||
proxy.resetForm("queryRef")
|
||
handleQuery()
|
||
}
|
||
|
||
/** 多选框选中数据 */
|
||
const selectedRows = ref([])
|
||
function handleSelectionChange(selection) {
|
||
ids.value = selection.map(item => item.customerId)
|
||
selectedRows.value = selection
|
||
single.value = selection.length != 1
|
||
multiple.value = !selection.length
|
||
}
|
||
|
||
/** 新增：跳转客户编辑页（页签式，无 customerId） */
|
||
function handleAdd() {
|
||
proxy.$router.push({ path: '/customersupplier/customer-edit/index' })
|
||
}
|
||
|
||
/** 修改：跳转客户编辑页（操作列传 row；工具栏按钮取勾选行） */
|
||
function handleUpdate(row) {
|
||
const target = (row && row.customerId) ? row : selectedRows.value[0]
|
||
if (!target || !target.customerId) {
|
||
proxy.$modal.msgWarning("请先勾选一个客户")
|
||
return
|
||
}
|
||
proxy.$router.push({
|
||
path: '/customersupplier/customer-edit/index',
|
||
query: {
|
||
customerId: target.customerId,
|
||
customerName: target.customerName,
|
||
customerCode: target.customerCode
|
||
}
|
||
})
|
||
}
|
||
|
||
/** 删除按钮操作 */
|
||
function handleDelete(row) {
|
||
const _customerIds = row.customerId || ids.value
|
||
proxy.$modal.confirm('是否确认删除客户编号为"' + _customerIds + '"的数据项？').then(function() {
|
||
return delCustomer(_customerIds)
|
||
}).then(() => {
|
||
getList()
|
||
proxy.$modal.msgSuccess("删除成功")
|
||
}).catch(() => {})
|
||
}
|
||
|
||
/** 跳转客户余额页面（操作列传 row；工具栏按钮不传参时取勾选行） */
|
||
function handleCustomerMoney(row) {
|
||
const target = (row && row.customerId) ? row : selectedRows.value[0]
|
||
if (!target || !target.customerId) {
|
||
proxy.$modal.msgWarning("请先勾选一个客户")
|
||
return
|
||
}
|
||
proxy.$router.push({
|
||
path: '/customersupplier/customer-money/index',
|
||
query: {
|
||
customerId: target.customerId,
|
||
customerName: target.customerName,
|
||
customerCode: target.customerCode
|
||
}
|
||
})
|
||
}
|
||
|
||
|
||
/** 导出按钮操作 */
|
||
function handleExport() {
|
||
proxy.download('/customersupplier/customerinfo/export', {
|
||
...queryParams.value
|
||
}, `customer_${new Date().getTime()}.xlsx`)
|
||
}
|
||
|
||
/** ========== 客户业务操作日志 ========== */
|
||
const logOpen = ref(false)
|
||
const logCustomer = ref({})
|
||
|
||
/** 打开业务日志弹窗（操作列传 row；工具栏按钮取勾选行） */
|
||
function handleViewLog(row) {
|
||
const target = (row && row.customerId) ? row : selectedRows.value[0]
|
||
if (!target || !target.customerId) {
|
||
proxy.$modal.msgWarning("请先勾选一个客户")
|
||
return
|
||
}
|
||
logCustomer.value = { customerId: target.customerId, customerName: target.customerName, customerCode: target.customerCode }
|
||
logOpen.value = true
|
||
}
|
||
|
||
getList()
|
||
</script>
|