基础资料完善

main
HUOJIN\92525 2025-03-26 15:26:52 +08:00
parent 1131f19726
commit cac5d3d2f0
7 changed files with 665 additions and 4 deletions

View File

@ -0,0 +1,55 @@
/**
* api
*
* @Author:
* @Date: 2025-03-25 10:42:33
* @Copyright
*/
import {postRequest, getRequest} from '/@/lib/axios';
export const customerApi = {
/**
* @author
*/
queryPage: (param: object) => {
return postRequest('/customer/queryPage', param);
},
/**
* @author
*/
add: (param: object) => {
return postRequest('/customer/add', param);
},
/**
* @author
*/
update: (param: object) => {
return postRequest('/customer/update', param);
},
/**
* @author
*/
delete: (customerId: number) => {
return getRequest('/customer/delete', {customerId});
},
/**
* @author
*/
batchDelete: (idList: number[]) => {
return postRequest('/customer/batchDelete', idList);
},
/**
* @author hj
*/
queryCustomer: (param: object) => {
return postRequest('/customer/queryCustomer',param);
},
};

View File

@ -0,0 +1,11 @@
/**
*
*
* @Author:
* @Date: 2025-03-25 10:42:33
* @Copyright
*/
export default {
};

View File

@ -40,6 +40,7 @@ export const TABLE_ID_CONST = {
ITEM:businessBASEInitTableId+3,//商品
STOCK:businessBASEInitTableId+4,//容器
ADDRESS:businessBASEInitTableId+5,//地址
CUSTOMER:businessBASEInitTableId+6,//客户
}
},

View File

@ -82,16 +82,16 @@ watch(
function handleChange(value: any) {
let selectedLocations: any[] | any;
let selectedAreas: any[] | any;
if (Array.isArray(value)) {
//
selectedLocations = value.map((id) => areas.value.find((item: any) => item.areaId === id)).filter(Boolean);
selectedAreas = value.map((id) => areas.value.find((item: any) => item.areaId === id)).filter(Boolean);
} else {
//
selectedLocations = areas.value.find((item: any) => item.areaId === value);
selectedAreas = areas.value.find((item: any) => item.areaId === value);
}
emit('update:value', value);
emit('change', selectedLocations);
emit('change', selectedAreas);
}

View File

@ -0,0 +1,183 @@
<!--
* 客户管理
*
* @Author: 霍锦
* @Date: 2025-03-25 10:42:33
* @Copyright 友仓
-->
<template>
<a-modal
:title="form.customerId ? '编辑客户' : '添加客户'"
:width="600"
:open="visibleFlag"
@cancel="onClose"
:maskClosable="false"
:destroyOnClose="true"
>
<a-form ref="formRef" :model="form" :rules="rules">
<a-row>
<a-col :span="12">
<a-form-item label="代码" name="customerCode">
<a-input style="width: 100%" v-model:value="form.customerCode" placeholder="客户代码" disabled/>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="名称" name="customerName">
<a-input style="width: 100%" v-model:value="form.customerName" placeholder="客户名称"
@input="generateCustomerCode"/>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="24">
<a-col :span="12">
<a-form-item label="联系人" name="person">
<a-input style="width: 100%" v-model:value="form.person" placeholder="联系人"/>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="电话" name="telephone">
<a-input style="width: 100%" v-model:value="form.telephone" placeholder="电话"/>
</a-form-item>
</a-col>
</a-row>
<a-row>
<a-col :span="24">
<a-form-item label="地址" name="address">
<a-textarea
v-model:value="form.address"
style="width: 100%; height: 100px"
placeholder="地址"
/>
</a-form-item>
</a-col>
</a-row>
<a-row>
<a-col :span="24">
<a-form-item label="是否启用" name="disabledFlag">
<a-switch
v-model:checked="form.disabledFlag"
checked-children="启用"
un-checked-children="禁用"
/>
</a-form-item>
</a-col>
</a-row>
</a-form>
<template #footer>
<a-space>
<a-button @click="onClose"></a-button>
<a-button type="primary" @click="onSubmit"></a-button>
</a-space>
</template>
</a-modal>
</template>
<script setup lang="ts">
import {reactive, ref, nextTick} from 'vue';
import _ from 'lodash';
import pinyin from 'pinyin';
import {message} from 'ant-design-vue';
import {SmartLoading} from '/@/components/framework/smart-loading';
import {customerApi} from '/@/api/business/base/customer/customer-api';
import {smartSentry} from '/@/lib/smart-sentry';
// ------------------------ ------------------------
const emits = defineEmits(['reloadList']);
// ------------------------ ------------------------
//
const visibleFlag = ref(false);
function show(rowData: object) {
Object.assign(form, formDefault);
if (rowData && !_.isEmpty(rowData)) {
Object.assign(form, rowData);
}
visibleFlag.value = true;
nextTick(() => {
formRef.value.clearValidate();
});
}
function onClose() {
Object.assign(form, formDefault);
visibleFlag.value = false;
}
// ------------------------ ------------------------
// ref
const formRef = ref();
const formDefault = {
customerId: undefined, //id
customerCode: undefined, //
customerName: undefined, //
person: undefined, //
telephone: undefined, //
address: undefined, //
disabledFlag: true //
};
let form = reactive({...formDefault});
const rules = {
customerId: [{required: true, message: '客户id 必填'}],
customerCode: [{required: true, message: '客户代码 必填'}],
customerName: [{required: true, message: '客户名称 必填'}],
createTime: [{required: true, message: '创建时间 必填'}],
createUserId: [{required: true, message: '创建人ID 必填'}],
createUserName: [{required: true, message: '创建人 必填'}],
updateTime: [{required: true, message: '更新时间 必填'}],
};
//
function generateCustomerCode() {
form.customerCode = form.customerName
? pinyin(form.customerName, {style: pinyin.STYLE_FIRST_LETTER})
.map((item: string []) => item[0].toUpperCase())
.join('')
: undefined;
}
//
async function onSubmit() {
try {
await formRef.value.validateFields();
save();
} catch (err) {
message.error('参数验证错误,请仔细填写表单数据!');
}
}
// API
async function save() {
SmartLoading.show();
try {
if (form.customerId) {
await customerApi.update(form);
} else {
await customerApi.add(form);
}
message.success('操作成功');
emits('reloadList');
onClose();
} catch (err) {
smartSentry.captureError(err);
} finally {
SmartLoading.hide();
}
}
defineExpose({
show,
});
</script>

View File

@ -0,0 +1,315 @@
<!--
* 客户管理
*
* @Author: 霍锦
* @Date: 2025-03-25 10:42:33
* @Copyright 友仓
-->
<template>
<!---------- 查询表单form begin ----------->
<a-form class="smart-query-form">
<a-row class="smart-query-form-row">
<a-form-item label="客户" class="smart-query-form-item">
<CustomerSelect v-model:value="queryForm.customerId" :disabled-flag="true" @change="changeCustomerSelect"/>
</a-form-item>
<a-form-item label="是否启用" class="smart-query-form-item">
<a-select style="width: 200px" v-model:value="queryForm.disabledFlag" allowClear placeholder="请选择">
<a-select-option :value="true">启用</a-select-option>
<a-select-option :value="false">禁用</a-select-option>
</a-select>
</a-form-item>
<a-form-item class="smart-query-form-item">
<a-button type="primary" @click="onSearch" class="smart-margin-left10">
<template #icon>
<SearchOutlined/>
</template>
查询
</a-button>
<a-button @click="resetQuery" class="smart-margin-left10">
<template #icon>
<ReloadOutlined/>
</template>
重置
</a-button>
</a-form-item>
</a-row>
</a-form>
<!---------- 查询表单form end ----------->
<a-card size="small" :bordered="false" :hoverable="true">
<!---------- 表格操作行 begin ----------->
<a-row class="smart-table-btn-block">
<div class="smart-table-operate-block">
<a-button @click="showForm" type="primary" v-privilege="'customer:add'">
<template #icon>
<PlusOutlined/>
</template>
新建
</a-button>
<a-button @click="confirmBatchDelete" type="primary" danger v-privilege="'customer:batchDelete'"
:disabled="selectedRowKeyList.length == 0">
<template #icon>
<DeleteOutlined/>
</template>
批量删除
</a-button>
</div>
<div class="smart-table-setting-block">
<TableOperator v-model="columns" :tableId="TABLE_ID_CONST.BUSINESS.BASE.CUSTOMER" :refresh="queryData"/>
</div>
</a-row>
<!---------- 表格操作行 end ----------->
<!---------- 表格 begin ----------->
<a-table
size="small"
:dataSource="tableData"
:columns="columns"
rowKey="customerId"
bordered
:loading="tableLoading"
:pagination="false"
:row-selection="{ selectedRowKeys: selectedRowKeyList, onChange: onSelectChange }"
>
<template #bodyCell="{ text, record, column }">
<template v-if="column.dataIndex === 'disabledFlag'">
<a-tag :color="text ? 'processing' : 'error'">{{ text ? '启用' : '禁用' }}</a-tag>
</template>
<template v-if="column.dataIndex === 'action'">
<div class="smart-table-operate">
<a-button @click="showForm(record)" type="link" v-privilege="'customer:update'">
<template #icon>
<EditOutlined/>
</template>
编辑
</a-button>
<a-button @click="onDelete(record)" danger type="link" v-privilege="'customer:delete'">
<template #icon>
<DeleteOutlined/>
</template>
删除
</a-button>
</div>
</template>
</template>
</a-table>
<!---------- 表格 end ----------->
<div class="smart-query-table-page">
<a-pagination
showSizeChanger
showQuickJumper
show-less-items
:pageSizeOptions="PAGE_SIZE_OPTIONS"
:defaultPageSize="queryForm.pageSize"
v-model:current="queryForm.pageNum"
v-model:pageSize="queryForm.pageSize"
:total="total"
@change="queryData"
@showSizeChange="queryData"
:show-total="(total:number) => `共${total}条`"
/>
</div>
<CustomerForm ref="formRef" @reloadList="queryData"/>
</a-card>
</template>
<script setup lang="ts">
import {reactive, ref, onMounted} from 'vue';
import {message, Modal} from 'ant-design-vue';
import {SmartLoading} from '/@/components/framework/smart-loading';
import {customerApi} from '/@/api/business/base/customer/customer-api';
import {PAGE_SIZE_OPTIONS} from '/@/constants/common-const';
import {smartSentry} from '/@/lib/smart-sentry';
import TableOperator from '/@/components/support/table-operator/index.vue';
import CustomerForm from '/@/views/business/base/customer/customer-form.vue';
import {TABLE_ID_CONST} from "/@/constants/support/table-id-const";
import CustomerSelect from "/@/views/business/base/customer/customer-select.vue";
// ---------------------------- ----------------------------
const columns = ref([
{
title: '客户id',
dataIndex: 'customerId',
ellipsis: true,
},
{
title: '客户代码',
dataIndex: 'customerCode',
ellipsis: true,
},
{
title: '客户名称',
dataIndex: 'customerName',
ellipsis: true,
},
{
title: '联系人',
dataIndex: 'person',
ellipsis: true,
},
{
title: '电话',
dataIndex: 'telephone',
ellipsis: true,
},
{
title: '地址',
dataIndex: 'address',
ellipsis: true,
},
{
title: '是否启用',
dataIndex: 'disabledFlag',
ellipsis: true,
},
{
title: '创建时间',
dataIndex: 'createTime',
ellipsis: true,
},
{
title: '操作',
dataIndex: 'action',
fixed: 'right',
width: 140,
},
]);
// ---------------------------- ----------------------------
const queryFormState = {
customerId: undefined, //
disabledFlag: undefined,//
pageNum: 1,
pageSize: 10,
};
// form
const queryForm = reactive({...queryFormState});
// loading
const tableLoading = ref(false);
//
const tableData = ref([]);
//
const total = ref(0);
//
function resetQuery() {
let pageSize = queryForm.pageSize;
Object.assign(queryForm, queryFormState);
queryForm.pageSize = pageSize;
queryData();
}
//
function onSearch() {
queryForm.pageNum = 1;
queryData();
}
//
function changeCustomerSelect(selectValue: any) {
if (selectValue) {
queryForm.customerId = selectValue.customerId;
}
}
//
async function queryData() {
tableLoading.value = true;
try {
let queryResult = await customerApi.queryPage(queryForm);
tableData.value = queryResult.data.list;
total.value = queryResult.data.total;
} catch (e) {
smartSentry.captureError(e);
} finally {
tableLoading.value = false;
}
}
onMounted(queryData);
// ---------------------------- / ----------------------------
const formRef = ref();
function showForm(data: object) {
formRef.value.show(data);
}
// ---------------------------- ----------------------------
//
function onDelete(data: object) {
Modal.confirm({
title: '提示',
content: '确定要删除选吗?',
okText: '删除',
okType: 'danger',
onOk() {
requestDelete(data);
},
cancelText: '取消',
onCancel() {
},
});
}
//
async function requestDelete(data: any) {
SmartLoading.show();
try {
await customerApi.delete(data.customerId);
message.success('删除成功');
await queryData();
} catch (e) {
smartSentry.captureError(e);
} finally {
SmartLoading.hide();
}
}
// ---------------------------- ----------------------------
//
const selectedRowKeyList = ref([]);
function onSelectChange(selectedRowKeys: any) {
selectedRowKeyList.value = selectedRowKeys;
}
//
function confirmBatchDelete() {
Modal.confirm({
title: '提示',
content: '确定要批量删除这些数据吗?',
okText: '删除',
okType: 'danger',
onOk() {
requestBatchDelete();
},
cancelText: '取消',
onCancel() {
},
});
}
//
async function requestBatchDelete() {
try {
SmartLoading.show();
await customerApi.batchDelete(selectedRowKeyList.value);
message.success('删除成功');
queryData();
} catch (e) {
smartSentry.captureError(e);
} finally {
SmartLoading.hide();
}
}
</script>

View File

@ -0,0 +1,96 @@
<!--
* 库区 下拉选择框
*
*
-->
<template>
<a-select
v-model:value="selectValue"
:style="`width: ${width}`"
:placeholder="props.placeholder"
:showSearch="true"
:allowClear="true"
:size="size"
@change="handleChange"
:disabled="disabled"
:mode="multiple ? 'multiple' : ''"
optionFilterProp="label"
>
<a-select-option v-for="customer in customers" :key="customer.customerId" :label="customer.customerName">
{{ customer.customerName }}
</a-select-option>
</a-select>
</template>
<script setup lang="ts">
import {onMounted, ref, watch} from 'vue';
import {customerApi} from "/@/api/business/base/customer/customer-api";
const props = defineProps({
value: [Number, String, Object, Array],
width: {
type: String,
default: '200px',
},
placeholder: {
type: String,
default: '请选择',
},
size: {
type: String,
default: 'default',
},
disabled: {
type: Boolean,
default: false,
},
multiple: {
type: Boolean,
default: false,
},
disabledFlag: {
type: Boolean,
default: null,
}
});
const customers = ref([]);
async function queryData() {
let res = await customerApi.queryCustomer({
disabledFlag: props.disabledFlag
});
customers.value = res.data;
}
const emit = defineEmits(['update:value', 'change']);
const selectValue = ref(props.value);
// value
watch(
() => props.value,
(newValue) => {
selectValue.value = newValue;
}
);
function handleChange(value: any) {
let selectedCustomers: any[] | any;
if (Array.isArray(value)) {
//
selectedCustomers = value.map((id) => customers.value.find((item: any) => item.customerId === id)).filter(Boolean);
} else {
//
selectedCustomers = customers.value.find((item: any) => item.customerId === value);
}
emit('update:value', value);
emit('change', selectedCustomers);
}
onMounted(queryData);
</script>