yunxi
/
mes-heli
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 6 Wiki Activity

【基础信息】客户信息列表及新增编辑弹出层

Browse Source
master
qiuhongwu 10 months ago
parent b8b007692d
commit a436f48d31
3 changed files with 96 additions and 59 deletions
Show Stats Download Patch File Download Diff File

34
mes-ui/mes-ui-admin-vue3/src/styles/cus.scss
Unescape View File

@ -21,7 +21,7 @@
.el-card__header { .el-card__header {
background-color: #f7f8fa; background-color: #f7f8fa;
padding: var(--hl-padding); padding: var(--hl-padding);
span{ span {
font-size: 20px !important; font-size: 20px !important;
} }
} }
@ -68,3 +68,35 @@
} }
} }
} }
.hl-card-info {
box-shadow: none !important;
border: none !important;
.el-card__header {
padding: 16px 0px;
background-color: inherit;
.hl-card-info-icona {
top: 10px;
width: 5px;
height: 24px;
float: left;
background-color: #005efe;
}
.hl-card-info-text {
margin-left: 10px;
}
}
.el-card__body {
padding: 15px 0px;
.el-row {
margin: 10px;
}
}
}

88
mes-ui/mes-ui-admin-vue3/src/views/heli/customer/CustomerForm.vue
Unescape View File

@ -1,9 +1,9 @@
<template> <template>
<Dialog :title="dialogTitle" v-model="dialogVisible" :width="1500"> <Dialog :title="dialogTitle" v-model="dialogVisible" :width="1400">
<el-form ref="formRef" :model="formData" :rules="formRules" label-width="100px" v-loading="formLoading"> <el-form ref="formRef" :model="formData" :rules="formRules" label-width="120px" v-loading="formLoading">
<el-card class="xy-card-info"> <el-card class="hl-card-info">
<template #header> <template #header>
<div class="xy-card-info-icona"></div><span class="xy-card-info-text">基础信息</span> <div class="hl-card-info-icona"></div><span class="hl-card-info-text">基础信息</span>
</template> </template>
<template #default> <template #default>
<el-row> <el-row>
@ -19,7 +19,7 @@
<el-col :span="8"> <el-col :span="8">
<el-row> <el-row>
<el-col :span="24"> <el-col :span="24">
<el-form-item prop="code" label="客户编码" > <el-form-item prop="code" label="客户编码">
<el-input v-model="formData.code" disabled /> <el-input v-model="formData.code" disabled />
</el-form-item> </el-form-item>
</el-col> </el-col>
@ -35,8 +35,7 @@
<el-col :span="24"> <el-col :span="24">
<el-form-item prop="level" label="客户级别"> <el-form-item prop="level" label="客户级别">
<el-select v-model="formData.level" clearable class="!w-400px"> <el-select v-model="formData.level" clearable class="!w-400px">
<el-option v-for="dict in getIntDictOptions(DICT_TYPE.HELI_CUSTOMER_LEVEL)" :key="dict.value" <el-option v-for="dict in getIntDictOptions(DICT_TYPE.HELI_CUSTOMER_LEVEL)" :key="dict.value" :label="dict.label" :value="dict.value" />
:label="dict.label" :value="dict.value" />
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
@ -82,29 +81,29 @@
</template> </template>
</el-card> </el-card>
<el-card class="xy-card-info"> <el-card class="hl-card-info">
<template #header> <template #header>
<div class="xy-card-info-icona"></div><span class="xy-card-info-text">联系方式</span> <div class="hl-card-info-icona"></div><span class="hl-card-info-text">联系方式</span>
</template> </template>
<template #default> <template #default>
<el-row> <el-row>
<el-col :span="5"> <el-col :span="6">
<el-row> <el-row>
<el-col :span="20"> <el-col>
<el-form-item label="联系人姓名1" prop="contact1Name"> <el-form-item label="联系人姓名1" prop="contact1Name">
<el-input v-model="formData.contact1Name" /> <el-input v-model="formData.contact1Name" />
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-row> <el-row>
<el-col :span="20"> <el-col>
<el-form-item label="联系人姓名2" prop="contact2Name"> <el-form-item label="联系人姓名2" prop="contact2Name">
<el-input v-model="formData.contact2Name" /> <el-input v-model="formData.contact2Name" />
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-row> <el-row>
<el-col :span="20"> <el-col>
<el-form-item label="联系人姓名3" prop="contact3Name"> <el-form-item label="联系人姓名3" prop="contact3Name">
<el-input v-model="formData.contact3Name" /> <el-input v-model="formData.contact3Name" />
</el-form-item> </el-form-item>
@ -113,23 +112,23 @@
</el-col> </el-col>
<el-col :span="5"> <el-col :span="6">
<el-row> <el-row>
<el-col :span="20"> <el-col>
<el-form-item label="岗位" prop="contact1Post"> <el-form-item label="岗位" prop="contact1Post">
<el-input v-model="formData.contact1Post" /> <el-input v-model="formData.contact1Post" />
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-row> <el-row>
<el-col :span="20"> <el-col>
<el-form-item label="岗位" prop="contact2Post"> <el-form-item label="岗位" prop="contact2Post">
<el-input v-model="formData.contact2Post" /> <el-input v-model="formData.contact2Post" />
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-row> <el-row>
<el-col :span="20"> <el-col>
<el-form-item label="岗位" prop="contact3Post"> <el-form-item label="岗位" prop="contact3Post">
<el-input v-model="formData.contact3Post" /> <el-input v-model="formData.contact3Post" />
</el-form-item> </el-form-item>
@ -137,23 +136,23 @@
</el-row> </el-row>
</el-col> </el-col>
<el-col :span="5"> <el-col :span="6">
<el-row> <el-row>
<el-col :span="20"> <el-col>
<el-form-item label="联系方法" prop="contact1Method"> <el-form-item label="联系方法" prop="contact1Method">
<el-input v-model="formData.contact1Method" /> <el-input v-model="formData.contact1Method" />
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-row> <el-row>
<el-col :span="20"> <el-col>
<el-form-item label="联系方法" prop="contact2Method"> <el-form-item label="联系方法" prop="contact2Method">
<el-input v-model="formData.contact2Method" /> <el-input v-model="formData.contact2Method" />
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-row> <el-row>
<el-col :span="20"> <el-col>
<el-form-item label="联系方法" prop="contact3Method"> <el-form-item label="联系方法" prop="contact3Method">
<el-input v-model="formData.contact3Method" /> <el-input v-model="formData.contact3Method" />
</el-form-item> </el-form-item>
@ -161,23 +160,23 @@
</el-row> </el-row>
</el-col> </el-col>
<el-col :span="5"> <el-col :span="6">
<el-row> <el-row>
<el-col :span="20"> <el-col>
<el-form-item label="邮箱" prop="contact1Email"> <el-form-item label="邮箱" prop="contact1Email">
<el-input v-model="formData.contact1Email" /> <el-input v-model="formData.contact1Email" />
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-row> <el-row>
<el-col :span="20"> <el-col>
<el-form-item label="邮箱" prop="contact2Email"> <el-form-item label="邮箱" prop="contact2Email">
<el-input v-model="formData.contact2Email" /> <el-input v-model="formData.contact2Email" />
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-row> <el-row>
<el-col :span="20"> <el-col>
<el-form-item label="邮箱" prop="contact3Email"> <el-form-item label="邮箱" prop="contact3Email">
<el-input v-model="formData.contact3Email" /> <el-input v-model="formData.contact3Email" />
</el-form-item> </el-form-item>
@ -217,9 +216,9 @@
</template> </template>
</el-card> </el-card>
<el-card class="xy-card-info"> <el-card class="hl-card-info">
<template #header> <template #header>
<div class="xy-card-info-icona"></div><span class="xy-card-info-text">财务信息</span> <div class="hl-card-info-icona"></div><span class="hl-card-info-text">财务信息</span>
</template> </template>
<template #default> <template #default>
<el-row> <el-row>
@ -274,8 +273,11 @@
</el-form> </el-form>
<template #footer> <template #footer>
<div class="text-center">
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button> <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
<el-button @click="dialogVisible = false">取 消</el-button> <el-button @click="dialogVisible = false">取 消</el-button>
</div>
</template> </template>
</Dialog> </Dialog>
@ -323,12 +325,12 @@ const formData = ref({
accountName: undefined, accountName: undefined,
bankNo: undefined, bankNo: undefined,
bankAddress: undefined, bankAddress: undefined,
taxNo: undefined, taxNo: undefined
}) })
const formRules = reactive({ const formRules = reactive({
// code: [{ required: true, message: '客户编码不能为空', trigger: 'blur' }], // code: [{ required: true, message: '客户编码不能为空', trigger: 'blur' }],
brief: [{ required: true, message: '客户简称不能为空', trigger: 'blur' }], brief: [{ required: true, message: '客户简称不能为空', trigger: 'blur' }],
name: [{ required: true, message: '客户全称不能为空', trigger: 'blur' }], name: [{ required: true, message: '客户全称不能为空', trigger: 'blur' }]
// status: [{ required: true, message: '状态,1 表示正常，2 表示禁用不能为空', trigger: 'blur' }], // status: [{ required: true, message: '状态,1 表示正常，2 表示禁用不能为空', trigger: 'blur' }],
}) })
const formRef = ref() // 表单 Ref const formRef = ref() // 表单 Ref
@ -336,16 +338,15 @@ const formRef = ref() // 表单 Ref
const userList = ref<UserApi.UserVO[]>([]) // 用户列表 const userList = ref<UserApi.UserVO[]>([]) // 用户列表
/** 打开弹窗 */ /** 打开弹窗 */
const open = async (type: string, id?: number) => { const open = async (type: string, id?: number) => {
userList.value = await UserApi.getSimpleUserList() userList.value = await UserApi.getSimpleUserList()
userList.value.forEach(element => { userList.value.forEach((element) => {
element.value = element.id element.value = element.id
element.label = element.id+element.nickname element.label = element.id + element.nickname
}); })
dialogVisible.value = true dialogVisible.value = true
dialogTitle.value = type === "create" ? "新增客户信息" : "编辑客户信息"//t('action.' + type) dialogTitle.value = type === 'create' ? '新增客户信息' : '编辑客户信息' //t('action.' + type)
formType.value = type formType.value = type
resetForm() resetForm()
// 修改时，设置数据 // 修改时，设置数据
@ -353,9 +354,8 @@ const open = async (type: string, id?: number) => {
formLoading.value = true formLoading.value = true
try { try {
formData.value = await CustomerApi.getCustomer(id) formData.value = await CustomerApi.getCustomer(id)
formData.value.status = formData.value.status === 1 ?ref(true):ref(false) formData.value.status = formData.value.status === 1 ? ref(true) : ref(false)
} finally { } finally {
formLoading.value = false formLoading.value = false
} }
} else { } else {
@ -373,7 +373,7 @@ const submitForm = async () => {
formLoading.value = true formLoading.value = true
try { try {
const data = formData.value as unknown as CustomerApi.CustomerVO const data = formData.value as unknown as CustomerApi.CustomerVO
data.status = data.status == true ?1 :2 data.status = data.status == true ? 1 : 2
if (formType.value === 'create') { if (formType.value === 'create') {
await CustomerApi.createCustomer(data) await CustomerApi.createCustomer(data)
message.success(t('common.createSuccess')) message.success(t('common.createSuccess'))
@ -416,21 +416,21 @@ const resetForm = () => {
contact3Email: undefined, contact3Email: undefined,
contact3Addr: undefined, contact3Addr: undefined,
status: undefined, status: undefined,
logo: undefined, logo: undefined
} }
formRef.value?.resetFields() formRef.value?.resetFields()
} }
</script> </script>
<style lang="scss"> <style lang="scss">
.xy-table thead { .hl-table thead {
color: #1D2129; color: #1d2129;
} }
.xy-table thead th.el-table__cell { .hl-table thead th.el-table__cell {
background-color: #F7F8FA; background-color: #f7f8fa;
} }
.xy-table.is-scrolling-left th.el-table-fixed-column--left { .hl-table.is-scrolling-left th.el-table-fixed-column--left {
background-color: #F7F8FA; background-color: #f7f8fa;
} }
</style> </style>

15
mes-ui/mes-ui-admin-vue3/src/views/heli/customer/index.vue
Unescape View File

@ -1,12 +1,16 @@
<template> <template>
<ContentWrap> <el-card class="hl-card">
<template #header>
<span>客户信息</span>
</template>
<ContentWrap class="borderxx">
<!-- 搜索工作栏 --> <!-- 搜索工作栏 -->
<el-form <el-form
class="-mb-15px" class="-mb-15px"
:model="queryParams" :model="queryParams"
ref="queryFormRef" ref="queryFormRef"
:inline="true" :inline="true"
label-width="68px" label-width="108px"
> >
<el-form-item label="客户编码" prop="code"> <el-form-item label="客户编码" prop="code">
<el-input <el-input
@ -42,7 +46,7 @@
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button> <el-button @click="handleQuery" type="primary"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button> <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
<el-button <el-button
type="primary" type="primary"
@ -65,7 +69,7 @@
<!-- 列表 --> <!-- 列表 -->
<ContentWrap> <ContentWrap>
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true"> <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true" class="hl-table">
<el-table-column label="客户编码" align="center" prop="code" /> <el-table-column label="客户编码" align="center" prop="code" />
<el-table-column label="客户简称" align="center" prop="brief" /> <el-table-column label="客户简称" align="center" prop="brief" />
<el-table-column label="客户全称" align="center" prop="name" /> <el-table-column label="客户全称" align="center" prop="name" />
@ -92,7 +96,7 @@
align="center" align="center"
prop="createTime" prop="createTime"
:formatter="dateFormatter" :formatter="dateFormatter"
width="180px" width="220"
/> />
<!-- <el-table-column label="修改人" align="center" prop="updater" /> <!-- <el-table-column label="修改人" align="center" prop="updater" />
<el-table-column <el-table-column
@ -130,6 +134,7 @@
/> />
</ContentWrap> </ContentWrap>
</el-card>
<!-- 表单弹窗：添加/修改 --> <!-- 表单弹窗：添加/修改 -->
<CustomerForm ref="formRef" @success="getList" /> <CustomerForm ref="formRef" @success="getList" />
</template> </template>

Write Preview
Loading…
Cancel
Save