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 {
background-color: #f7f8fa;
padding: var(--hl-padding);
span{
span {
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;
}
}
}

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

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

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

@ -1,12 +1,16 @@
<template>
<ContentWrap>
<el-card class="hl-card">
<template #header>
<span>客户信息</span>
</template>
<ContentWrap class="borderxx">
<!-- 搜索工作栏 -->
<el-form
class="-mb-15px"
:model="queryParams"
ref="queryFormRef"
:inline="true"
label-width="68px"
label-width="108px"
>
<el-form-item label="客户编码" prop="code">
<el-input
@ -42,7 +46,7 @@
</el-select>
</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
type="primary"
@ -65,7 +69,7 @@
<!-- 列表 -->
<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="brief" />
<el-table-column label="客户全称" align="center" prop="name" />
@ -92,7 +96,7 @@
align="center"
prop="createTime"
:formatter="dateFormatter"
width="180px"
width="220"
/>
<!-- <el-table-column label="修改人" align="center" prop="updater" />
<el-table-column
@ -130,6 +134,7 @@
/>
</ContentWrap>
</el-card>
<!-- 表单弹窗：添加/修改 -->
<CustomerForm ref="formRef" @success="getList" />
</template>
@ -224,4 +229,4 @@ onMounted(async () => {
await getList()
userList.value = await UserApi.getSimpleUserList()
})
</script>
</script>

Write Preview
Loading…
Cancel
Save