whm
/
BookingHeChuanFront
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

客户信息管理

Browse Source
dev
张同海 2 years ago
parent d33de5398c
commit 745c35bedd
9 changed files with 1256 additions and 530 deletions
Show Stats Download Patch File Download Diff File

8
src/api/modular/main/CustomerInformationManagement.js
Unescape Escape View File

@ -75,3 +75,11 @@ export function DjyUserConfigAdd(parameter) {
data: parameter
})
}
// 获取客户
export function DjyCustomerDetail(parameter) {
return axios({
url: '/DjyCustomer/detail',
method: 'get',
params: parameter
})
}

494
src/views/main/Customer/addForm.vue
Unescape Escape View File

@ -1,183 +1,248 @@
<template>
<a-modal
<!-- <a-modal
title="新增客户信息"
:width="1100"
:visible="visible"
:confirmLoading="confirmLoading"
@ok="handleSubmit"
@cancel="handleCancel"
>
<a-spin :spinning="confirmLoading">
<a-form :form="form">
<a-row>
<a-col :span="8">
<a-form-item label="简称" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
<a-input
placeholder="请输入简称"
v-decorator="['shortName', { rules: [{ required: true, message: '请输入简称！' }] }]"
/>
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="全称" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
<a-input
placeholder="请输入全称"
v-decorator="['fullName', { rules: [{ required: true, message: '请输入全称！' }] }]"
/>
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="负责人" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
<a-input
placeholder="请输入负责人"
v-decorator="['chief', { rules: [{ required: true, message: '请输入负责人！' }] }]"
/>
</a-form-item>
</a-col>
</a-row>
<a-row>
<a-col :span="8">
<a-form-item label="电话" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
<a-input
placeholder="请输入电话"
v-decorator="['tel', { rules: [{ required: true, message: '请输入电话！' }] }]"
/>
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="邮箱" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
<a-input
placeholder="请输入邮箱"
v-decorator="['email', { rules: [{ required: true, message: '请输入邮箱！' }] }]"
/>
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="QQ" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
<a-input
placeholder="请输入QQ"
v-decorator="['qq', { rules: [{ required: true, message: '请输入QQ！' }] }]"
/>
</a-form-item>
</a-col>
</a-row>
<a-row>
<a-col :span="8">
<a-form-item label="网址" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
<a-input
placeholder="请输入网址"
v-decorator="['webUrl', { rules: [{ required: true, message: '请输入网址！' }] }]"
/>
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="省份" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
<a-input
placeholder="请输入省份"
v-decorator="['province', { rules: [{ required: true, message: '请输入省份！' }] }]"
/>
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="城市" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
<a-input
placeholder="请输入城市"
v-decorator="['city', { rules: [{ required: true, message: '请输入城市！' }] }]"
/>
</a-form-item>
</a-col>
</a-row>
<a-row>
<a-col :span="8">
<a-form-item label="地址" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
<a-input
placeholder="请输入地址"
v-decorator="['addr', { rules: [{ required: true, message: '请输入地址！' }] }]"
/>
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="英文全名" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
<a-input
placeholder="请输入英文全名"
v-decorator="['fullNameEN', { rules: [{ required: true, message: '请输入英文全名！' }] }]"
/>
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="英文地址" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
<a-input
placeholder="请输入英文地址"
v-decorator="['addrEN', { rules: [{ required: true, message: '请输入英文地址！' }] }]"
/>
</a-form-item>
</a-col>
</a-row>
<a-row>
<a-col :span="8">
<a-form-item label="发票抬头" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
<a-input
placeholder="请输入发票抬头"
v-decorator="['invTitle', { rules: [{ required: true, message: '请输入发票抬头！' }] }]"
/>
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="纳税人识别号" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
<a-input
placeholder="请输入纳税人识别号"
v-decorator="['taxNO', { rules: [{ required: true, message: '请输入纳税人识别号！' }] }]"
/>
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="发票地址电话" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
<a-input
placeholder="请输入发票地址电话"
v-decorator="['invAddrTel', { rules: [{ required: true, message: '请输入发票地址电话！' }] }]"
/>
</a-form-item>
</a-col>
</a-row>
<a-row>
<a-col :span="8">
<a-form-item label="人民币开户行" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
<a-input
placeholder="请输入人民币开户行"
v-decorator="['rmbBank', { rules: [{ required: true, message: '请输入人民币开户行！' }] }]"
/>
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="人民币账号" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
<a-input
placeholder="请输入人民币账号"
v-decorator="['rmbAccount', { rules: [{ required: true, message: '请输入人民币账号！' }] }]"
/>
</a-form-item>
</a-col>
</a-row>
<a-row>
<a-col :span="8">
<a-form-item label="美元开户行" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
<a-input
placeholder="请输入美元开户行"
v-decorator="['usdBank', { rules: [{ required: true, message: '请输入美元开户行！' }] }]"
/>
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="美元账号" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
<a-input
placeholder="请输入美元账号"
v-decorator="['usdAccount', { rules: [{ required: true, message: '请输入美元账号！' }] }]"
/>
</a-form-item>
</a-col>
</a-row>
</a-form>
</a-spin>
</a-modal>
> -->
<!-- <a-spin :spinning="confirmLoading"> -->
<a-form :form="form" class="CsForm">
<a-row type="flex" justify="end">
<a-col :span="1">
<a-button type="primary" @click="handleSubmit">
保存
</a-button>
</a-col>
</a-row>
<a-row>
<p class="CsFormTitle"><span>基本信息</span></p>
<a-col :span="6">
<a-form-item label="助记码" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
<a-input
placeholder="请输入助记码"
v-decorator="['codeName', { rules: [{ required: true, message: '请输入助记码！' }] }]"
/>
</a-form-item>
</a-col>
<a-col :span="6">
<a-form-item label="简称" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
<a-input
placeholder="请输入简称"
v-decorator="['shortName', { rules: [{ required: true, message: '请输入简称！' }] }]"
/>
</a-form-item>
</a-col>
<a-col :span="6">
<a-form-item label="全称" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
<a-input
placeholder="请输入全称"
v-decorator="['fullName', { rules: [{ required: true, message: '请输入全称！' }] }]"
/>
</a-form-item>
</a-col>
<a-col :span="6">
<a-form-item label="负责人" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
<a-input
placeholder="请输入负责人"
v-decorator="['chief', { rules: [{ required: true, message: '请输入负责人！' }] }]"
/>
</a-form-item>
</a-col>
</a-row>
<a-row>
<a-col :span="6">
<a-form-item label="电话" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
<a-input
placeholder="请输入电话"
v-decorator="['tel', { rules: [{ required: true, message: '请输入电话！' }] }]"
/>
</a-form-item>
</a-col>
<a-col :span="6">
<a-form-item label="邮箱" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
<a-input
placeholder="请输入邮箱"
v-decorator="['email', { rules: [{ required: true, message: '请输入邮箱！' }] }]"
/>
</a-form-item>
</a-col>
<a-col :span="6">
<a-form-item label="QQ" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
<a-input
placeholder="请输入QQ"
v-decorator="['qq', { rules: [{ required: true, message: '请输入QQ！' }] }]"
/>
</a-form-item>
</a-col>
<a-col :span="6">
<a-form-item label="网址" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
<a-input
placeholder="请输入网址"
v-decorator="['webUrl', { rules: [{ required: true, message: '请输入网址！' }] }]"
/>
</a-form-item>
</a-col>
</a-row>
<a-row>
<a-col :span="6">
<a-form-item label="省份" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
<a-input
placeholder="请输入省份"
v-decorator="['province', { rules: [{ required: true, message: '请输入省份！' }] }]"
/>
</a-form-item>
</a-col>
<a-col :span="6">
<a-form-item label="城市" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
<a-input
placeholder="请输入城市"
v-decorator="['city', { rules: [{ required: true, message: '请输入城市！' }] }]"
/>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="地址" :labelCol="labelCol2" :wrapperCol="wrapperCol2" has-feedback>
<a-input
placeholder="请输入地址"
v-decorator="['addr', { rules: [{ required: true, message: '请输入地址！' }] }]"
/>
</a-form-item>
</a-col>
</a-row>
<a-row>
<a-col :span="12">
<a-form-item label="英文全名" :labelCol="labelCol2" :wrapperCol="wrapperCol2" has-feedback>
<a-input
placeholder="请输入英文全名"
v-decorator="['fullNameEN', { rules: [{ required: true, message: '请输入英文全名！' }] }]"
/>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="英文地址" :labelCol="labelCol2" :wrapperCol="wrapperCol2" has-feedback>
<a-input
placeholder="请输入英文地址"
v-decorator="['addrEN', { rules: [{ required: true, message: '请输入英文地址！' }] }]"
/>
</a-form-item>
</a-col>
</a-row>
<p class="CsFormTitle"><span>联系人信息</span></p>
<vxe-toolbar>
<template #buttons>
<vxe-button icon="vxe-icon-square-plus" @click="insertEvent()">新增</vxe-button>
<vxe-button @click="removeCheckboxRow()">删除选中</vxe-button>
</template>
</vxe-toolbar>
<vxe-table
ref="xTable"
border
resizable
show-overflow
:data="ContactsData"
:edit-config="{ trigger: 'click', mode: 'cell' }"
>
<vxe-column type="checkbox" width="60"></vxe-column>
<vxe-column type="seq" width="60"></vxe-column>
<vxe-column field="roleName" title="角色" :edit-render="{}">
<template #edit="{ row }">
<vxe-input v-model="row.roleName" type="text" placeholder="请输入角色"></vxe-input>
</template>
</vxe-column>
<vxe-column field="name" title="姓名" :edit-render="{}">
<template #edit="{ row }">
<vxe-input v-model="row.name" type="text" placeholder="请输入姓名"></vxe-input>
</template>
</vxe-column>
<vxe-column field="email" title="邮箱" :edit-render="{}">
<template #edit="{ row }">
<vxe-input v-model="row.email" type="text" placeholder="请输入邮箱"></vxe-input>
</template>
</vxe-column>
<vxe-column field="tel" title="电话" :edit-render="{}">
<template #edit="{ row }">
<vxe-input v-model="row.tel" type="text" placeholder="请输入电话"></vxe-input>
</template>
</vxe-column>
<vxe-column field="qq" title="QQ" :edit-render="{}">
<template #edit="{ row }">
<vxe-input v-model="row.qq" type="text" placeholder="请输入QQ" transfer></vxe-input>
</template>
</vxe-column>
<vxe-column field="remark" title="备注" :edit-render="{}">
<template #edit="{ row }">
<vxe-input v-model="row.remark" type="text" placeholder="请输入备注" transfer></vxe-input>
</template>
</vxe-column>
</vxe-table>
<p class="CsFormTitle" :style="{ marginTop: '10px' }"><span>财务信息</span></p>
<a-row>
<a-col :span="12">
<a-form-item label="发票抬头" :labelCol="labelCol2" :wrapperCol="wrapperCol2" has-feedback>
<a-input
placeholder="请输入发票抬头"
v-decorator="['invTitle', { rules: [{ required: true, message: '请输入发票抬头！' }] }]"
/>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="纳税人识别号" :labelCol="labelCol2" :wrapperCol="wrapperCol2" has-feedback>
<a-input
placeholder="请输入纳税人识别号"
v-decorator="['taxNO', { rules: [{ required: true, message: '请输入纳税人识别号！' }] }]"
/>
</a-form-item>
</a-col>
<a-col :span="18">
<a-form-item label="发票地址电话" :labelCol="labelCol3" :wrapperCol="wrapperCol3" has-feedback>
<a-input
placeholder="请输入发票地址电话"
v-decorator="['invAddrTel', { rules: [{ required: true, message: '请输入发票地址电话！' }] }]"
/>
</a-form-item>
</a-col>
</a-row>
<a-row>
<a-col :span="12">
<a-form-item label="人民币开户行" :labelCol="labelCol2" :wrapperCol="wrapperCol2" has-feedback>
<a-input
placeholder="请输入人民币开户行"
v-decorator="['rmbBank', { rules: [{ required: true, message: '请输入人民币开户行！' }] }]"
/>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="人民币账号" :labelCol="labelCol2" :wrapperCol="wrapperCol2" has-feedback>
<a-input
placeholder="请输入人民币账号"
v-decorator="['rmbAccount', { rules: [{ required: true, message: '请输入人民币账号！' }] }]"
/>
</a-form-item>
</a-col>
</a-row>
<a-row>
<a-col :span="12">
<a-form-item label="美元开户行" :labelCol="labelCol2" :wrapperCol="wrapperCol2" has-feedback>
<a-input
placeholder="请输入美元开户行"
v-decorator="['usdBank', { rules: [{ required: true, message: '请输入美元开户行！' }] }]"
/>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="美元账号" :labelCol="labelCol2" :wrapperCol="wrapperCol2" has-feedback>
<a-input
placeholder="请输入美元账号"
v-decorator="['usdAccount', { rules: [{ required: true, message: '请输入美元账号！' }] }]"
/>
</a-form-item>
</a-col>
</a-row>
</a-form>
<!-- </a-spin>
</a-modal> -->
</template>
<script>
@ -186,21 +251,80 @@ import { DjyCustomerAdd } from '@/api/modular/main/CustomerInformationManagement
export default {
data() {
return {
sexList: [
{ label: '', value: '' },
{ label: '男', value: '1' },
{ label: '女', value: '0' }
],
labelCol: {
xs: { span: 24 },
sm: { span: 7 }
sm: { span: 6 }
},
wrapperCol: {
labelCol2: {
xs: { span: 24 },
sm: { span: 3 }
},
labelCol3: {
xs: { span: 24 },
sm: { span: 15 }
sm: { span: 2 }
},
wrapperCol: {
xs: { span: 25 },
sm: { span: 16 }
},
wrapperCol2: {
xs: { span: 25 },
sm: { span: 20 }
},
wrapperCol3: {
xs: { span: 25 },
sm: { span: 22 }
},
typeData: [],
visible: false,
confirmLoading: false,
form: this.$form.createForm(this)
form: this.$form.createForm(this),
ContactsData: []
}
},
methods: {
removeCheckboxRow() {
console.log(this.$refs.xTable.selection)
this.$refs.xTable.selection.forEach(item => {
this.ContactsData.forEach((item2, index2) => {
if (item.WebKey == item2.WebKey) {
this.ContactsData.splice(index2, 1)
}
})
})
},
insertEvent() {
this.ContactsData.push({
WebKey: this.ContactsData.length ? this.ContactsData[this.ContactsData.length - 1].WebKey + 1 : 1,
roleName: '',
name: '',
tel: '',
email: '',
qq: '',
remark: ''
})
console.log(this.ContactsData)
},
formatSex(value) {
if (value === '1') {
return '男'
}
if (value === '0') {
return '女'
}
return ''
},
formatMultiSex(values) {
if (values) {
return values.map(val => this.formatSex(val)).join(',')
}
return ''
},
// 初始化方法
add(record) {
this.visible = true
@ -238,13 +362,12 @@ export default {
values[key] = JSON.stringify(values[key])
}
}
DjyCustomerAdd(values)
DjyCustomerAdd({ ...values, contacts: this.ContactsData })
.then(res => {
if (res.success) {
this.$message.success('新增成功')
this.confirmLoading = false
this.$emit('ok', values)
this.handleCancel()
} else {
this.$message.error('新增失败') // + res.message
}
@ -264,3 +387,16 @@ export default {
}
}
</script>
<style scoped>
.CsForm {
background: #fff;
padding: 25px;
}
.CsFormTitle {
border-bottom: 1px solid #c9c9c9;
}
.CsFormTitle > span {
padding: 0.25rem 0.5rem 0 0.5rem;
/* border: 1px solid #c9c9c9; */
}
</style>

289
src/views/main/Customer/editForm copy.vue
Unescape Escape View File

@ -0,0 +1,289 @@
<template>
<a-modal
title="编辑客户信息"
:width="1100"
:visible="visible"
:confirmLoading="confirmLoading"
@ok="handleSubmit"
@cancel="handleCancel"
>
<a-spin :spinning="confirmLoading">
<a-form :form="form">
<a-row>
<a-col :span="8">
<a-form-item label="助记码" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
<a-input
placeholder="请输入助记码"
v-decorator="['codeName', { rules: [{ required: true, message: '请输入助记码！' }] }]"
/>
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="简称" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
<a-input
placeholder="请输入简称"
v-decorator="['shortName', { rules: [{ required: true, message: '请输入简称！' }] }]"
/>
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="全称" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
<a-input
placeholder="请输入全称"
v-decorator="['fullName', { rules: [{ required: true, message: '请输入全称！' }] }]"
/>
</a-form-item>
</a-col>
</a-row>
<a-row>
<a-col :span="8">
<a-form-item label="负责人" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
<a-input
placeholder="请输入负责人"
v-decorator="['chief', { rules: [{ required: true, message: '请输入负责人！' }] }]"
/>
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="电话" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
<a-input
placeholder="请输入电话"
v-decorator="['tel', { rules: [{ required: true, message: '请输入电话！' }] }]"
/>
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="邮箱" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
<a-input
placeholder="请输入邮箱"
v-decorator="['email', { rules: [{ required: true, message: '请输入邮箱！' }] }]"
/>
</a-form-item>
</a-col>
</a-row>
<a-row>
<a-col :span="8">
<a-form-item label="QQ" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
<a-input
placeholder="请输入QQ"
v-decorator="['qq', { rules: [{ required: true, message: '请输入QQ！' }] }]"
/>
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="网址" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
<a-input
placeholder="请输入网址"
v-decorator="['webUrl', { rules: [{ required: true, message: '请输入网址！' }] }]"
/>
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="省份" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
<a-input
placeholder="请输入省份"
v-decorator="['province', { rules: [{ required: true, message: '请输入省份！' }] }]"
/>
</a-form-item>
</a-col>
</a-row>
<a-row>
<a-col :span="8">
<a-form-item label="城市" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
<a-input
placeholder="请输入城市"
v-decorator="['city', { rules: [{ required: true, message: '请输入城市！' }] }]"
/>
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="地址" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
<a-input
placeholder="请输入地址"
v-decorator="['addr', { rules: [{ required: true, message: '请输入地址！' }] }]"
/>
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="英文全名" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
<a-input
placeholder="请输入英文全名"
v-decorator="['fullNameEN', { rules: [{ required: true, message: '请输入英文全名！' }] }]"
/>
</a-form-item>
</a-col>
</a-row>
<a-row>
<a-col :span="8">
<a-form-item label="英文地址" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
<a-input
placeholder="请输入英文地址"
v-decorator="['addrEN', { rules: [{ required: true, message: '请输入英文地址！' }] }]"
/>
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="发票抬头" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
<a-input
placeholder="请输入发票抬头"
v-decorator="['invTitle', { rules: [{ required: true, message: '请输入发票抬头！' }] }]"
/>
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="纳税人识别号" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
<a-input
placeholder="请输入纳税人识别号"
v-decorator="['taxNO', { rules: [{ required: true, message: '请输入纳税人识别号！' }] }]"
/>
</a-form-item>
</a-col>
</a-row>
<a-row>
<a-col :span="8">
<a-form-item label="发票地址电话" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
<a-input
placeholder="请输入发票地址电话"
v-decorator="['invAddrTel', { rules: [{ required: true, message: '请输入发票地址电话！' }] }]"
/>
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="人民币开户行" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
<a-input
placeholder="请输入人民币开户行"
v-decorator="['rmbBank', { rules: [{ required: true, message: '请输入人民币开户行！' }] }]"
/>
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="人民币账号" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
<a-input
placeholder="请输入人民币账号"
v-decorator="['rmbAccount', { rules: [{ required: true, message: '请输入人民币账号！' }] }]"
/>
</a-form-item>
</a-col>
</a-row>
<a-row>
<a-col :span="8">
<a-form-item label="美元开户行" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
<a-input
placeholder="请输入美元开户行"
v-decorator="['usdBank', { rules: [{ required: true, message: '请输入美元开户行！' }] }]"
/>
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="美元账号" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
<a-input
placeholder="请输入美元账号"
v-decorator="['usdAccount', { rules: [{ required: true, message: '请输入美元账号！' }] }]"
/>
</a-form-item>
</a-col>
</a-row>
</a-form>
</a-spin>
</a-modal>
</template>
<script>
import { DjyCustomerEdit } from '@/api/modular/main/CustomerInformationManagement'
export default {
data() {
return {
labelCol: {
xs: { span: 24 },
sm: { span: 7 }
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 15 }
},
typeData: [],
visible: false,
confirmLoading: false,
form: this.$form.createForm(this)
}
},
methods: {
// 初始化方法
edit(record) {
console.log(record)
this.visible = true
const typeOption = this.$options
this.typeData = typeOption.filters['dictData']('edi_type')
setTimeout(() => {
this.form.setFieldsValue({
codeName: record.codeName,
addr: record.addr,
addrEN: record.addrEN,
chief: record.chief,
city: record.city,
createdTime: record.createdTime,
createdUserId: record.createdUserId,
createdUserName: record.createdUserName,
email: record.email,
fullName: record.fullName,
fullNameEN: record.fullNameEN,
id: record.id,
invAddrTel: record.invAddrTel,
invTitle: record.invTitle,
isDeleted: record.isDeleted,
province: record.province,
qq: record.qq,
rmbAccount: record.rmbAccount,
rmbBank: record.rmbBank,
shortName: record.shortName,
taxNO: record.taxNO,
tel: record.tel,
tenantId: record.tenantId,
usdAccount: record.usdAccount,
usdBank: record.usdBank,
webUrl: record.webUrl
})
console.log(this.form.getFieldsValue())
}, 100)
},
handleSubmit() {
const {
form: { validateFields }
} = this
this.confirmLoading = true
validateFields((errors, values) => {
console.log(errors, values)
if (!errors) {
for (const key in values) {
console.log(key, 1)
if (typeof values[key] === 'object' && !(values[key] === null)) {
values[key] = JSON.stringify(values[key])
}
}
console.log(this.form, values.id)
DjyCustomerEdit(values)
.then(res => {
if (res.success) {
this.$message.success('编辑成功')
this.confirmLoading = false
this.$emit('ok', values)
this.handleCancel()
} else {
this.$message.error('编辑失败') // + res.message
}
})
.finally(res => {
this.confirmLoading = false
})
} else {
this.confirmLoading = false
}
})
},
handleCancel() {
this.form.resetFields()
this.visible = false
}
}
}
</script>

577
src/views/main/Customer/editForm.vue
Unescape Escape View File

@ -1,266 +1,390 @@
<template>
<a-modal
title="编辑客户信息"
<!-- <a-modal
title="新增客户信息"
:width="1100"
:visible="visible"
:confirmLoading="confirmLoading"
@ok="handleSubmit"
@cancel="handleCancel"
>
<a-spin :spinning="confirmLoading">
<a-form :form="form">
<a-row>
<a-col :span="8">
<a-form-item label="简称" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
<a-input
placeholder="请输入简称"
v-decorator="['shortName', { rules: [{ required: true, message: '请输入简称！' }] }]"
/>
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="全称" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
<a-input
placeholder="请输入全称"
v-decorator="['fullName', { rules: [{ required: true, message: '请输入全称！' }] }]"
/>
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="负责人" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
<a-input
placeholder="请输入负责人"
v-decorator="['chief', { rules: [{ required: true, message: '请输入负责人！' }] }]"
/>
</a-form-item>
</a-col>
</a-row>
<a-row>
<a-col :span="8">
<a-form-item label="电话" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
<a-input
placeholder="请输入电话"
v-decorator="['tel', { rules: [{ required: true, message: '请输入电话！' }] }]"
/>
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="邮箱" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
<a-input
placeholder="请输入邮箱"
v-decorator="['email', { rules: [{ required: true, message: '请输入邮箱！' }] }]"
/>
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="QQ" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
<a-input
placeholder="请输入QQ"
v-decorator="['qq', { rules: [{ required: true, message: '请输入QQ！' }] }]"
/>
</a-form-item>
</a-col>
</a-row>
<a-row>
<a-col :span="8">
<a-form-item label="网址" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
<a-input
placeholder="请输入网址"
v-decorator="['webUrl', { rules: [{ required: true, message: '请输入网址！' }] }]"
/>
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="省份" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
<a-input
placeholder="请输入省份"
v-decorator="['province', { rules: [{ required: true, message: '请输入省份！' }] }]"
/>
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="城市" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
<a-input
placeholder="请输入城市"
v-decorator="['city', { rules: [{ required: true, message: '请输入城市！' }] }]"
/>
</a-form-item>
</a-col>
</a-row>
<a-row>
<a-col :span="8">
<a-form-item label="地址" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
<a-input
placeholder="请输入地址"
v-decorator="['addr', { rules: [{ required: true, message: '请输入地址！' }] }]"
/>
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="英文全名" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
<a-input
placeholder="请输入英文全名"
v-decorator="['fullNameEN', { rules: [{ required: true, message: '请输入英文全名！' }] }]"
/>
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="英文地址" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
<a-input
placeholder="请输入英文地址"
v-decorator="['addrEN', { rules: [{ required: true, message: '请输入英文地址！' }] }]"
/>
</a-form-item>
</a-col>
</a-row>
<a-row>
<a-col :span="8">
<a-form-item label="发票抬头" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
<a-input
placeholder="请输入发票抬头"
v-decorator="['invTitle', { rules: [{ required: true, message: '请输入发票抬头！' }] }]"
/>
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="纳税人识别号" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
<a-input
placeholder="请输入纳税人识别号"
v-decorator="['taxNO', { rules: [{ required: true, message: '请输入纳税人识别号！' }] }]"
/>
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="发票地址电话" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
<a-input
placeholder="请输入发票地址电话"
v-decorator="['invAddrTel', { rules: [{ required: true, message: '请输入发票地址电话！' }] }]"
/>
</a-form-item>
</a-col>
</a-row>
<a-row>
<a-col :span="8">
<a-form-item label="人民币开户行" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
<a-input
placeholder="请输入人民币开户行"
v-decorator="['rmbBank', { rules: [{ required: true, message: '请输入人民币开户行！' }] }]"
/>
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="人民币账号" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
<a-input
placeholder="请输入人民币账号"
v-decorator="['rmbAccount', { rules: [{ required: true, message: '请输入人民币账号！' }] }]"
/>
</a-form-item>
</a-col>
</a-row>
<a-row>
<a-col :span="8">
<a-form-item label="美元开户行" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
<a-input
placeholder="请输入美元开户行"
v-decorator="['usdBank', { rules: [{ required: true, message: '请输入美元开户行！' }] }]"
/>
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="美元账号" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
<a-input
placeholder="请输入美元账号"
v-decorator="['usdAccount', { rules: [{ required: true, message: '请输入美元账号！' }] }]"
/>
</a-form-item>
</a-col>
</a-row>
</a-form>
</a-spin>
</a-modal>
> -->
<!-- <a-spin :spinning="confirmLoading"> -->
<a-form :form="form" class="CsForm">
<a-row type="flex" justify="end">
<a-col :span="1">
<a-button type="primary" @click="handleSubmit">
保存
</a-button>
</a-col>
</a-row>
<a-row>
<p class="CsFormTitle"><span>基本信息</span></p>
<a-col :span="6">
<a-form-item label="助记码" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
<a-input
placeholder="请输入助记码"
v-decorator="['codeName', { rules: [{ required: true, message: '请输入助记码！' }] }]"
/>
</a-form-item>
</a-col>
<a-col :span="6">
<a-form-item label="简称" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
<a-input
placeholder="请输入简称"
v-decorator="['shortName', { rules: [{ required: true, message: '请输入简称！' }] }]"
/>
</a-form-item>
</a-col>
<a-col :span="6">
<a-form-item label="全称" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
<a-input
placeholder="请输入全称"
v-decorator="['fullName', { rules: [{ required: true, message: '请输入全称！' }] }]"
/>
</a-form-item>
</a-col>
<a-col :span="6">
<a-form-item label="负责人" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
<a-input
placeholder="请输入负责人"
v-decorator="['chief', { rules: [{ required: true, message: '请输入负责人！' }] }]"
/>
</a-form-item>
</a-col>
</a-row>
<a-row>
<a-col :span="6">
<a-form-item label="电话" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
<a-input
placeholder="请输入电话"
v-decorator="['tel', { rules: [{ required: true, message: '请输入电话！' }] }]"
/>
</a-form-item>
</a-col>
<a-col :span="6">
<a-form-item label="邮箱" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
<a-input
placeholder="请输入邮箱"
v-decorator="['email', { rules: [{ required: true, message: '请输入邮箱！' }] }]"
/>
</a-form-item>
</a-col>
<a-col :span="6">
<a-form-item label="QQ" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
<a-input
placeholder="请输入QQ"
v-decorator="['qq', { rules: [{ required: true, message: '请输入QQ！' }] }]"
/>
</a-form-item>
</a-col>
<a-col :span="6">
<a-form-item label="网址" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
<a-input
placeholder="请输入网址"
v-decorator="['webUrl', { rules: [{ required: true, message: '请输入网址！' }] }]"
/>
</a-form-item>
</a-col>
</a-row>
<a-row>
<a-col :span="6">
<a-form-item label="省份" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
<a-input
placeholder="请输入省份"
v-decorator="['province', { rules: [{ required: true, message: '请输入省份！' }] }]"
/>
</a-form-item>
</a-col>
<a-col :span="6">
<a-form-item label="城市" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
<a-input
placeholder="请输入城市"
v-decorator="['city', { rules: [{ required: true, message: '请输入城市！' }] }]"
/>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="地址" :labelCol="labelCol2" :wrapperCol="wrapperCol2" has-feedback>
<a-input
placeholder="请输入地址"
v-decorator="['addr', { rules: [{ required: true, message: '请输入地址！' }] }]"
/>
</a-form-item>
</a-col>
</a-row>
<a-row>
<a-col :span="12">
<a-form-item label="英文全名" :labelCol="labelCol2" :wrapperCol="wrapperCol2" has-feedback>
<a-input
placeholder="请输入英文全名"
v-decorator="['fullNameEN', { rules: [{ required: true, message: '请输入英文全名！' }] }]"
/>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="英文地址" :labelCol="labelCol2" :wrapperCol="wrapperCol2" has-feedback>
<a-input
placeholder="请输入英文地址"
v-decorator="['addrEN', { rules: [{ required: true, message: '请输入英文地址！' }] }]"
/>
</a-form-item>
</a-col>
</a-row>
<p class="CsFormTitle"><span>联系人信息</span></p>
<vxe-toolbar>
<template #buttons>
<vxe-button icon="vxe-icon-square-plus" @click="insertEvent()">新增</vxe-button>
<vxe-button @click="removeCheckboxRow()">删除选中</vxe-button>
</template>
</vxe-toolbar>
<vxe-table
ref="xTable"
border
resizable
show-overflow
:data="ContactsData"
:edit-config="{ trigger: 'click', mode: 'cell' }"
>
<vxe-column type="checkbox" width="60"></vxe-column>
<vxe-column type="seq" width="60"></vxe-column>
<vxe-column field="roleName" title="角色" :edit-render="{}">
<template #edit="{ row }">
<vxe-input v-model="row.roleName" type="text" placeholder="请输入角色"></vxe-input>
</template>
</vxe-column>
<vxe-column field="name" title="姓名" :edit-render="{}">
<template #edit="{ row }">
<vxe-input v-model="row.name" type="text" placeholder="请输入姓名"></vxe-input>
</template>
</vxe-column>
<vxe-column field="email" title="邮箱" :edit-render="{}">
<template #edit="{ row }">
<vxe-input v-model="row.email" type="text" placeholder="请输入邮箱"></vxe-input>
</template>
</vxe-column>
<vxe-column field="tel" title="电话" :edit-render="{}">
<template #edit="{ row }">
<vxe-input v-model="row.tel" type="text" placeholder="请输入电话"></vxe-input>
</template>
</vxe-column>
<vxe-column field="qq" title="QQ" :edit-render="{}">
<template #edit="{ row }">
<vxe-input v-model="row.qq" type="text" placeholder="请输入QQ" transfer></vxe-input>
</template>
</vxe-column>
<vxe-column field="remark" title="备注" :edit-render="{}">
<template #edit="{ row }">
<vxe-input v-model="row.remark" type="text" placeholder="请输入备注" transfer></vxe-input>
</template>
</vxe-column>
</vxe-table>
<p class="CsFormTitle" :style="{ marginTop: '10px' }"><span>财务信息</span></p>
<a-row>
<a-col :span="12">
<a-form-item label="发票抬头" :labelCol="labelCol2" :wrapperCol="wrapperCol2" has-feedback>
<a-input
placeholder="请输入发票抬头"
v-decorator="['invTitle', { rules: [{ required: true, message: '请输入发票抬头！' }] }]"
/>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="纳税人识别号" :labelCol="labelCol2" :wrapperCol="wrapperCol2" has-feedback>
<a-input
placeholder="请输入纳税人识别号"
v-decorator="['taxNO', { rules: [{ required: true, message: '请输入纳税人识别号！' }] }]"
/>
</a-form-item>
</a-col>
<a-col :span="18">
<a-form-item label="发票地址电话" :labelCol="labelCol3" :wrapperCol="wrapperCol3" has-feedback>
<a-input
placeholder="请输入发票地址电话"
v-decorator="['invAddrTel', { rules: [{ required: true, message: '请输入发票地址电话！' }] }]"
/>
</a-form-item>
</a-col>
</a-row>
<a-row>
<a-col :span="12">
<a-form-item label="人民币开户行" :labelCol="labelCol2" :wrapperCol="wrapperCol2" has-feedback>
<a-input
placeholder="请输入人民币开户行"
v-decorator="['rmbBank', { rules: [{ required: true, message: '请输入人民币开户行！' }] }]"
/>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="人民币账号" :labelCol="labelCol2" :wrapperCol="wrapperCol2" has-feedback>
<a-input
placeholder="请输入人民币账号"
v-decorator="['rmbAccount', { rules: [{ required: true, message: '请输入人民币账号！' }] }]"
/>
</a-form-item>
</a-col>
</a-row>
<a-row>
<a-col :span="12">
<a-form-item label="美元开户行" :labelCol="labelCol2" :wrapperCol="wrapperCol2" has-feedback>
<a-input
placeholder="请输入美元开户行"
v-decorator="['usdBank', { rules: [{ required: true, message: '请输入美元开户行！' }] }]"
/>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="美元账号" :labelCol="labelCol2" :wrapperCol="wrapperCol2" has-feedback>
<a-input
placeholder="请输入美元账号"
v-decorator="['usdAccount', { rules: [{ required: true, message: '请输入美元账号！' }] }]"
/>
</a-form-item>
</a-col>
</a-row>
</a-form>
<!-- </a-spin>
</a-modal> -->
</template>
<script>
import { DjyCustomerEdit } from '@/api/modular/main/CustomerInformationManagement'
import { DjyCustomerEdit, DjyCustomerDetail } from '@/api/modular/main/CustomerInformationManagement'
export default {
props: ['RowData'],
data() {
return {
sexList: [
{ label: '', value: '' },
{ label: '男', value: '1' },
{ label: '女', value: '0' }
],
labelCol: {
xs: { span: 24 },
sm: { span: 7 }
sm: { span: 6 }
},
wrapperCol: {
labelCol2: {
xs: { span: 24 },
sm: { span: 3 }
},
labelCol3: {
xs: { span: 24 },
sm: { span: 15 }
sm: { span: 2 }
},
wrapperCol: {
xs: { span: 25 },
sm: { span: 16 }
},
wrapperCol2: {
xs: { span: 25 },
sm: { span: 20 }
},
wrapperCol3: {
xs: { span: 25 },
sm: { span: 22 }
},
typeData: [],
visible: false,
confirmLoading: false,
form: this.$form.createForm(this)
form: this.$form.createForm(this),
ContactsData: [],
Data: {}
}
},
mounted() {
DjyCustomerDetail({ id: this.RowData.id }).then(res => {
this.Data = res.data
this.form.setFieldsValue({
...res.data
})
res.data.contacts.forEach((item, index) => {
console.log(index)
item.WebKey = index
this.ContactsData.push(item)
})
})
},
methods: {
removeCheckboxRow() {
console.log(this.$refs.xTable.selection)
this.$refs.xTable.selection.forEach(item => {
this.ContactsData.forEach((item2, index2) => {
if (item.WebKey == item2.WebKey) {
this.ContactsData.splice(index2, 1)
}
})
})
},
insertEvent() {
this.ContactsData.push({
WebKey: this.ContactsData.length ? this.ContactsData[this.ContactsData.length - 1].WebKey + 1 : 1,
roleName: '',
name: '',
tel: '',
email: '',
qq: '',
remark: ''
})
console.log(this.ContactsData)
},
formatSex(value) {
if (value === '1') {
return '男'
}
if (value === '0') {
return '女'
}
return ''
},
formatMultiSex(values) {
if (values) {
return values.map(val => this.formatSex(val)).join(',')
}
return ''
},
// 初始化方法
edit(record) {
console.log(record)
add(record) {
this.visible = true
const typeOption = this.$options
this.typeData = typeOption.filters['dictData']('edi_type')
setTimeout(() => {
this.form.setFieldsValue({
addr: record.addr,
addrEN: record.addrEN,
chief: record.chief,
city: record.city,
createdTime: record.createdTime,
createdUserId: record.createdUserId,
createdUserName: record.createdUserName,
email: record.email,
fullName: record.fullName,
fullNameEN: record.fullNameEN,
id: record.id,
invAddrTel: record.invAddrTel,
invTitle: record.invTitle,
isDeleted: record.isDeleted,
province: record.province,
qq: record.qq,
rmbAccount: record.rmbAccount,
rmbBank: record.rmbBank,
shortName: record.shortName,
taxNO: record.taxNO,
tel: record.tel,
tenantId: record.tenantId,
usdAccount: record.usdAccount,
usdBank: record.usdBank,
webUrl: record.webUrl
})
console.log(this.form.getFieldsValue())
}, 100)
this.typeData = [
{
code: 10,
name: '收货人'
},
{
code: 20,
name: '发货人'
},
{
code: 30,
name: '通知人'
},
{
code: 40,
name: '第二通知人'
}
]
},
/**
* 提交表单
*/
handleSubmit() {
const {
form: { validateFields }
} = this
this.confirmLoading = true
validateFields((errors, values) => {
console.log(errors, values)
if (!errors) {
for (const key in values) {
console.log(key, 1)
if (typeof values[key] === 'object' && !(values[key] === null)) {
values[key] = JSON.stringify(values[key])
}
}
console.log(this.form, values.id)
DjyCustomerEdit(values)
DjyCustomerEdit({ ...this.Data, ...values, contacts: this.ContactsData })
.then(res => {
if (res.success) {
this.$message.success('编辑成功')
this.$message.success('新增成功')
this.confirmLoading = false
this.$emit('ok', values)
this.handleCancel()
} else {
this.$message.error('编辑失败') // + res.message
this.$message.error('新增失败') // + res.message
}
})
.finally(res => {
@ -278,3 +402,16 @@ export default {
}
}
</script>
<style scoped>
.CsForm {
background: #fff;
padding: 25px;
}
.CsFormTitle {
border-bottom: 1px solid #c9c9c9;
}
.CsFormTitle > span {
padding: 0.25rem 0.5rem 0 0.5rem;
/* border: 1px solid #c9c9c9; */
}
</style>

286
src/views/main/Customer/index.vue
Unescape Escape View File

@ -1,92 +1,128 @@
<template>
<div>
<a-card :bordered="false" :bodyStyle="tstyle">
<div
class="table-page-search-wrapper"
v-if="hasPerm('BookingTemplate:page')"
:class="advanced ? 'Open' : 'Close'"
>
<a-form layout="inline">
<a-row :gutter="48">
<a-col :md="18">
<a-row :gutter="48">
<a-col :md="8" :sm="24" v-for="item in ColumnsQuery" :key="`${item.dataIndex}1`" v-show="item.checked">
<a-form-item :label="item.title">
<a-input v-model="queryParam[item.dataIndex]" allow-clear :placeholder="`请输入${item.title}`" />
</a-form-item>
</a-col>
</a-row>
</a-col>
<a-col :md="4" :sm="24">
<span class="table-page-search-submitButtons">
<a-button type="primary" @click="FnGetData">查询</a-button>
<a-button style="margin-left: 8px" @click="init">重置</a-button>
<a v-if="ColumnsQueryL > 3" @click="toggleAdvanced" style="margin-left: 8px">
{{ advanced ? '收起' : '展开' }}
<a-icon :type="advanced ? 'up' : 'down'" />
</a>
</span>
</a-col>
<a-col :md="2" :sm="24" class="SetFlex">
<a-popover placement="bottom" v-model="setVisible" trigger="click">
<template #content>
<columnSetting :columns="ColumnsQuery" @columnChange="columnChange"></columnSetting>
</template>
<span class="tab-btn"> <a-icon type="setting" :style="{ fontSize: '16px' }" /> 设置 </span>
</a-popover>
</a-col>
</a-row>
</a-form>
</div>
</a-card>
<a-card :bordered="false">
<vxe-toolbar>
<template #buttons>
<a-button type="primary" icon="plus" @click="$refs.addForm.add()">
新增客户
</a-button>
</template>
<template #tools>
<div class="right">
<a-popover placement="bottom" v-model="setVisible1" trigger="click">
<template #content>
<columnSetting :columns="TableColumns" @columnChange="columnChange1"></columnSetting>
<div class="CsMain">
<a-tabs class="CsMainTable" v-model="activeKey" hide-add type="editable-card" @edit="onEdit">
<a-tab-pane v-for="pane in panes" :key="pane.key" :tab="pane.title" :closable="pane.key == 0 ? false : true">
<div v-show="pane.title == '客户信息'">
<a-card :bordered="false" :bodyStyle="tstyle">
<div
class="table-page-search-wrapper"
v-if="hasPerm('BookingTemplate:page')"
:class="advanced ? 'Open' : 'Close'"
>
<a-form layout="inline">
<a-row :gutter="48">
<a-col :md="18">
<a-row :gutter="48">
<a-col
:md="8"
:sm="24"
v-for="item in ColumnsQuery"
:key="`${item.dataIndex}1`"
v-show="item.checked"
>
<a-form-item :label="item.title">
<a-input
v-model="queryParam[item.dataIndex]"
allow-clear
:placeholder="`请输入${item.title}`"
/>
</a-form-item>
</a-col>
</a-row>
</a-col>
<a-col :md="4" :sm="24">
<span class="table-page-search-submitButtons">
<a-button type="primary" @click="FnGetData">查询</a-button>
<a-button style="margin-left: 8px" @click="init">重置</a-button>
<a v-if="ColumnsQueryL > 3" @click="toggleAdvanced" style="margin-left: 8px">
{{ advanced ? '收起' : '展开' }}
<a-icon :type="advanced ? 'up' : 'down'" />
</a>
</span>
</a-col>
<a-col :md="2" :sm="24" class="SetFlex">
<a-popover placement="bottom" v-model="setVisible" trigger="click">
<template #content>
<columnSetting :columns="ColumnsQuery" @columnChange="columnChange"></columnSetting>
</template>
<span class="tab-btn"> <a-icon type="setting" :style="{ fontSize: '16px' }" /> 设置 </span>
</a-popover>
</a-col>
</a-row>
</a-form>
</div>
</a-card>
<a-card :bordered="false">
<vxe-toolbar>
<template #buttons>
<!-- <a-button type="primary" icon="plus" @click="$refs.addForm.add()"> -->
<a-button type="primary" icon="plus" @click="TabsAdd">
新增客户
</a-button>
</template>
<template #tools>
<div class="right">
<a-popover placement="bottom" v-model="setVisible1" trigger="click">
<template #content>
<columnSetting :columns="TableColumns" @columnChange="columnChange1"></columnSetting>
</template>
<span class="tab-btn"> <a-icon type="setting" :style="{ fontSize: '16px' }" /> 设置 </span>
</a-popover>
</div>
</template>
<span class="tab-btn"> <a-icon type="setting" :style="{ fontSize: '16px' }" /> 设置 </span>
</a-popover>
</div>
</template>
</vxe-toolbar>
<vxe-table :data="loadData" border :loading="loading" empty-text="没有更多数据了！" v-if="!TableType">
<vxe-column type="seq" width="40" fixed="left"></vxe-column>
<vxe-column
v-for="item in TableColumns"
:key="`${item.dataIndex}3`"
:field="item.dataIndex"
:min-width="item.width"
:title="item.title"
:align="item.align"
v-if="item.checked"
></vxe-column>
<vxe-column title="操作" fixed="right" width="200" align="center">
<template #default="{ row }">
<vxe-button type="text" @click="$refs.editForm.edit(row)">编辑</vxe-button>
<vxe-button type="text" @click="DjyCustomerDelete(row)">删除</vxe-button>
</template>
</vxe-column>
</vxe-table>
<vxe-pager
:loading="loading"
:current-page="queryParam.currentPage"
:page-size="queryParam.pageSize"
:total="queryParam.totalResult"
:layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
@page-change="handlePageChange"
>
</vxe-pager>
<add-form ref="addForm" @ok="handleOk" />
<edit-form ref="editForm" @ok="handleOk" />
</a-card>
</vxe-toolbar>
<vxe-table
@cell-dblclick="cellDBLClickEvent"
:data="loadData"
border
:loading="loading"
empty-text="没有更多数据了！"
v-if="!TableType"
>
<vxe-column type="seq" width="40" fixed="left"></vxe-column>
<vxe-column
v-for="item in TableColumns"
:key="`${item.dataIndex}3`"
:field="item.dataIndex"
:min-width="item.width"
:title="item.title"
:align="item.align"
v-if="item.checked"
></vxe-column>
<vxe-column title="操作" fixed="right" width="200" align="center">
<template #default="{ row }">
<vxe-button type="text" @click="TabsEdit(row)">编辑</vxe-button>
<a-popconfirm
title="请确认删除?"
ok-text="是"
cancel-text="否"
@confirm="
e => {
confirm(e, row)
}
"
>
<vxe-button type="text">删除</vxe-button>
</a-popconfirm>
</template>
</vxe-column>
</vxe-table>
<vxe-pager
:loading="loading"
:current-page="queryParam.currentPage"
:page-size="queryParam.pageSize"
:total="queryParam.totalResult"
:layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
@page-change="handlePageChange"
>
</vxe-pager>
</a-card>
</div>
<add-form ref="addForm" v-show="pane.title == '新增客户'" @ok="handleOk" />
<edit-form ref="editForm" v-show="pane.title == '编辑信息'" :RowData="pane.row" @ok="handleOk" />
<!-- <addForm ></addForm> -->
</a-tab-pane>
</a-tabs>
</div>
</template>
<script>
@ -100,6 +136,12 @@ import addForm from './addForm.vue'
import editForm from './editForm.vue'
import columnSetting from '@/components/tableColumnSetting'
const columns = [
{
title: '助记码',
align: 'center',
width: '90',
dataIndex: 'codeName'
},
{
title: '简称',
align: 'center',
@ -222,7 +264,13 @@ export default {
columnSetting
},
data() {
const panes = [
{ title: '客户信息', key: 0 }
// { title: 'Tab 2', content: 'Content of Tab 2', key: '2' }
]
return {
activeKey: 0,
panes,
// 高级搜索 展开/关闭
TableType: false,
advanced: false,
@ -247,6 +295,56 @@ export default {
this.init()
},
methods: {
cellDBLClickEvent({ row }) {
this.TabsEdit(row)
},
onEdit(targetKey, action) {
console.log(targetKey, action)
this[action](targetKey)
},
remove(targetKey) {
let activeKey = this.activeKey
let lastIndex
this.panes.forEach((pane, i) => {
if (pane.key === targetKey) {
if (i) {
activeKey = this.panes[i - 1].key
} else {
activeKey = 0
}
}
})
const panes = this.panes.filter(pane => pane.key !== targetKey)
// if (panes.length && activeKey === targetKey) {
// if (lastIndex >= 0) {
// activeKey = panes[lastIndex].key
// } else {
// activeKey = panes[0].key
// }
// }
console.log(panes, activeKey)
this.panes = panes
this.activeKey = activeKey
},
TabsEdit(row) {
// this.$refs.editForm[0].edit(row)
let activeKey = this.panes.length + 1
this.panes.push({
title: '编辑信息',
key: activeKey,
row: row
})
this.activeKey = activeKey
},
TabsAdd() {
let activeKey = this.panes.length + 1
this.panes.push({
title: '新增客户',
key: activeKey
})
this.activeKey = activeKey
},
columnChange(data) {
this.ColumnsQuery = [...data]
let Data = []
@ -379,6 +477,9 @@ export default {
const obj = JSON.parse(JSON.stringify(this.queryParam))
return obj
},
confirm(e, data) {
this.DjyCustomerDelete(data)
},
DjyCustomerDelete(record) {
DjyCustomerDelete(record).then(res => {
if (res.success) {
@ -413,4 +514,15 @@ button {
display: flex;
justify-content: flex-end;
}
.CsMain {
margin-top: -24px;
margin-left: -9px;
width: 100% !important;
}
.CsMainTable {
width: 100%;
}
.CsMainTable > .ant-tabs-bar {
margin-bottom: 1px !important;
}
</style>

16
src/views/main/EDI/index.vue
Unescape Escape View File

@ -52,7 +52,18 @@
<vxe-column title="操作" fixed="right" width="200" align="center">
<template #default="{ row }">
<vxe-button type="text" @click="$refs.editForm.edit(row)">编辑</vxe-button>
<vxe-button type="text" @click="DjyEdiSettingDelete(row)">删除</vxe-button>
<a-popconfirm
title="请确认删除?"
ok-text="是"
cancel-text="否"
@confirm="
e => {
confirm(e, row)
}
"
>
<vxe-button type="text">删除</vxe-button>
</a-popconfirm>
</template>
</vxe-column>
</vxe-table>
@ -232,6 +243,9 @@ export default {
const obj = JSON.parse(JSON.stringify(this.queryParam))
return obj
},
confirm(e, data) {
this.DjyEdiSettingDelete(data)
},
DjyEdiSettingDelete(record) {
DjyEdiSettingDelete(record).then(res => {
if (res.success) {

92
src/views/main/Printing/addForm.vue
Unescape Escape View File

@ -1,6 +1,6 @@
<template>
<a-modal
title="新增客户信息"
title="新增订舱打印模板"
:width="1100"
:visible="visible"
:confirmLoading="confirmLoading"
@ -12,30 +12,49 @@
<a-row>
<a-col :span="8">
<a-form-item label="类型名称" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
<a-input
<!-- <a-input
placeholder="请输入类型名称"
v-decorator="['typeName', { rules: [{ required: true, message: '请输入类型名称！' }] }]"
/>
/> -->
<a-select
placeholder="请输入类型名称"
v-decorator="['typeName', { rules: [{ required: true, message: '请输入类型名称！' }] }]"
>
<a-select-option v-for="item in TypeData" :key="item.id" :value="item.value">
{{ item.value }}
</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="租户名称" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
<a-input
<!-- <a-input
placeholder="请输入租户名称"
v-decorator="['tenantName', { rules: [{ required: true, message: '请输入租户名称！' }] }]"
/>
/> -->
<a-select
placeholder="请输入租户名称"
v-decorator="['tenantName', { rules: [{ required: true, message: '请输入租户名称！' }] }]"
>
<a-select-option v-for="item in SysTenantData" :key="item.id" :value="item.name">
{{ item.name }}
</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :span="8">
<a-upload
name="file"
:file-list="fileList"
@change="handleChange"
:customRequest="customRequest"
:multiple="false"
>
<a-button> <a-icon type="upload" /> 文件上传 </a-button>
</a-upload>
<a-form-item>
<a-upload
name="file"
:file-list="fileList"
@change="handleChange"
:customRequest="customRequest"
:multiple="false"
:style="{ marginTop: '4px' }"
>
<a-button> <a-icon type="upload" /> 文件上传 </a-button>
</a-upload>
</a-form-item>
</a-col>
</a-row>
</a-form>
@ -44,11 +63,14 @@
</template>
<script>
import { BookingPrintTemplateAdd } from '@/api/modular/main/bookingprinttemplate'
import { BookingPrintTemplateAdd, SysTenantPage } from '@/api/modular/main/bookingprinttemplate'
import { sysDictDataPage } from '@/api/modular/system/dictDataManage'
// booking_template_type
export default {
data() {
return {
TypeData: [],
SysTenantData: [],
file: {},
fileList: [],
labelCol: {
@ -59,12 +81,21 @@ export default {
xs: { span: 24 },
sm: { span: 15 }
},
typeData: [],
visible: false,
confirmLoading: false,
form: this.$form.createForm(this)
}
},
mounted() {
SysTenantPage().then(res => {
console.log(res.data)
this.SysTenantData = res.data.rows
})
sysDictDataPage({ pageNo: 1, pageSize: 999, typeId: '348569545515077' }).then(res => {
this.TypeData = res.data.rows
console.log(this.TypeData, 11111)
})
},
methods: {
customRequest(data) {
this.file = data.file
@ -75,24 +106,6 @@ export default {
// 初始化方法
add(record) {
this.visible = true
this.typeData = [
{
code: 10,
name: '收货人'
},
{
code: 20,
name: '发货人'
},
{
code: 30,
name: '通知人'
},
{
code: 40,
name: '第二通知人'
}
]
},
/**
* 提交表单
@ -109,6 +122,11 @@ export default {
values[key] = JSON.stringify(values[key])
}
}
this.SysTenantData.forEach(item => {
if (values.tenantName == item.tenantName) {
values.tenantId = item.tenantId
}
})
BookingPrintTemplateAdd({ file: this.file, data: values })
.then(res => {
if (res.success) {
@ -119,8 +137,12 @@ export default {
} else {
this.$message.error('新增失败') // + res.message
}
this.file = {}
this.fileList = []
})
.finally(res => {
this.file = {}
this.fileList = []
this.confirmLoading = false
})
} else {

2
src/views/main/Printing/editForm.vue
Unescape Escape View File

@ -1,6 +1,6 @@
<template>
<a-modal
title="编辑客户信息"
title="编辑订舱打印模板"
:width="1100"
:visible="visible"
:confirmLoading="confirmLoading"

22
src/views/main/Printing/index.vue
Unescape Escape View File

@ -19,12 +19,6 @@
</a-col>
<a-col :md="4" :sm="24">
<span class="table-page-search-submitButtons">
<a-popover placement="bottom" v-model="setVisible" trigger="click">
<template #content>
<columnSetting :columns="ColumnsQuery" @columnChange="columnChange"></columnSetting>
</template>
<span class="tab-btn"> <a-icon type="setting" :style="{ fontSize: '16px' }" /> 设置 </span>
</a-popover>
<a-button type="primary" @click="FnGetData">查询</a-button>
<a-button style="margin-left: 8px" @click="init">重置</a-button>
<!-- <a @click="toggleAdvanced" style="margin-left: 8px">
@ -77,7 +71,18 @@
<vxe-column title="操作" fixed="right" width="200" align="center">
<template #default="{ row }">
<vxe-button type="text" @click="$refs.editForm.edit(row)">编辑</vxe-button>
<vxe-button type="text" @click="BookingPrintTemplateDelete(row)">删除</vxe-button>
<a-popconfirm
title="请确认删除?"
ok-text="是"
cancel-text="否"
@confirm="
e => {
confirm(e, row)
}
"
>
<vxe-button type="text">删除</vxe-button>
</a-popconfirm>
</template>
</vxe-column>
</vxe-table>
@ -279,6 +284,9 @@ export default {
const obj = JSON.parse(JSON.stringify(this.queryParam))
return obj
},
confirm(e, data) {
this.BookingPrintTemplateDelete(data)
},
BookingPrintTemplateDelete(record) {
BookingPrintTemplateDelete(record).then(res => {
if (res.success) {

Write Preview
Loading…
Cancel
Save