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 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> <template>
<a-modal <!-- <a-modal
title="新增客户信息" title="新增客户信息"
:width="1100" :width="1100"
:visible="visible" :visible="visible"
:confirmLoading="confirmLoading" :confirmLoading="confirmLoading"
@ok="handleSubmit" @ok="handleSubmit"
@cancel="handleCancel" @cancel="handleCancel"
> > -->
<a-spin :spinning="confirmLoading"> <!-- <a-spin :spinning="confirmLoading"> -->
<a-form :form="form"> <a-form :form="form" class="CsForm">
<a-row> <a-row type="flex" justify="end">
<a-col :span="8"> <a-col :span="1">
<a-form-item label="简称" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback> <a-button type="primary" @click="handleSubmit">
<a-input 保存
placeholder="请输入简称" </a-button>
v-decorator="['shortName', { rules: [{ required: true, message: '请输入简称！' }] }]" </a-col>
/> </a-row>
</a-form-item> <a-row>
</a-col> <p class="CsFormTitle"><span>基本信息</span></p>
<a-col :span="8"> <a-col :span="6">
<a-form-item label="全称" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback> <a-form-item label="助记码" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
<a-input <a-input
placeholder="请输入全称" placeholder="请输入助记码"
v-decorator="['fullName', { rules: [{ required: true, message: '请输入全称！' }] }]" v-decorator="['codeName', { rules: [{ required: true, message: '请输入助记码！' }] }]"
/> />
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :span="8"> <a-col :span="6">
<a-form-item label="负责人" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback> <a-form-item label="简称" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
<a-input <a-input
placeholder="请输入负责人" placeholder="请输入简称"
v-decorator="['chief', { rules: [{ required: true, message: '请输入负责人！' }] }]" v-decorator="['shortName', { rules: [{ required: true, message: '请输入简称！' }] }]"
/> />
</a-form-item> </a-form-item>
</a-col> </a-col>
</a-row> <a-col :span="6">
<a-row> <a-form-item label="全称" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
<a-col :span="8"> <a-input
<a-form-item label="电话" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback> placeholder="请输入全称"
<a-input v-decorator="['fullName', { rules: [{ required: true, message: '请输入全称！' }] }]"
placeholder="请输入电话" />
v-decorator="['tel', { rules: [{ required: true, message: '请输入电话！' }] }]" </a-form-item>
/> </a-col>
</a-form-item> <a-col :span="6">
</a-col> <a-form-item label="负责人" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
<a-col :span="8"> <a-input
<a-form-item label="邮箱" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback> placeholder="请输入负责人"
<a-input v-decorator="['chief', { rules: [{ required: true, message: '请输入负责人！' }] }]"
placeholder="请输入邮箱" />
v-decorator="['email', { rules: [{ required: true, message: '请输入邮箱！' }] }]" </a-form-item>
/> </a-col>
</a-form-item> </a-row>
</a-col> <a-row>
<a-col :span="8"> <a-col :span="6">
<a-form-item label="QQ" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback> <a-form-item label="电话" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
<a-input <a-input
placeholder="请输入QQ" placeholder="请输入电话"
v-decorator="['qq', { rules: [{ required: true, message: '请输入QQ！' }] }]" v-decorator="['tel', { rules: [{ required: true, message: '请输入电话！' }] }]"
/> />
</a-form-item> </a-form-item>
</a-col> </a-col>
</a-row> <a-col :span="6">
<a-row> <a-form-item label="邮箱" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
<a-col :span="8"> <a-input
<a-form-item label="网址" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback> placeholder="请输入邮箱"
<a-input v-decorator="['email', { rules: [{ required: true, message: '请输入邮箱！' }] }]"
placeholder="请输入网址" />
v-decorator="['webUrl', { rules: [{ required: true, message: '请输入网址！' }] }]" </a-form-item>
/> </a-col>
</a-form-item> <a-col :span="6">
</a-col> <a-form-item label="QQ" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
<a-col :span="8"> <a-input
<a-form-item label="省份" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback> placeholder="请输入QQ"
<a-input v-decorator="['qq', { rules: [{ required: true, message: '请输入QQ！' }] }]"
placeholder="请输入省份" />
v-decorator="['province', { rules: [{ required: true, message: '请输入省份！' }] }]" </a-form-item>
/> </a-col>
</a-form-item> <a-col :span="6">
</a-col> <a-form-item label="网址" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
<a-col :span="8"> <a-input
<a-form-item label="城市" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback> placeholder="请输入网址"
<a-input v-decorator="['webUrl', { rules: [{ required: true, message: '请输入网址！' }] }]"
placeholder="请输入城市" />
v-decorator="['city', { rules: [{ required: true, message: '请输入城市！' }] }]" </a-form-item>
/> </a-col>
</a-form-item> </a-row>
</a-col> <a-row>
</a-row> <a-col :span="6">
<a-row> <a-form-item label="省份" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
<a-col :span="8"> <a-input
<a-form-item label="地址" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback> placeholder="请输入省份"
<a-input v-decorator="['province', { rules: [{ required: true, message: '请输入省份！' }] }]"
placeholder="请输入地址" />
v-decorator="['addr', { rules: [{ required: true, message: '请输入地址！' }] }]" </a-form-item>
/> </a-col>
</a-form-item> <a-col :span="6">
</a-col> <a-form-item label="城市" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
<a-col :span="8"> <a-input
<a-form-item label="英文全名" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback> placeholder="请输入城市"
<a-input v-decorator="['city', { rules: [{ required: true, message: '请输入城市！' }] }]"
placeholder="请输入英文全名" />
v-decorator="['fullNameEN', { rules: [{ required: true, message: '请输入英文全名！' }] }]" </a-form-item>
/> </a-col>
</a-form-item> <a-col :span="12">
</a-col> <a-form-item label="地址" :labelCol="labelCol2" :wrapperCol="wrapperCol2" has-feedback>
<a-col :span="8"> <a-input
<a-form-item label="英文地址" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback> placeholder="请输入地址"
<a-input v-decorator="['addr', { rules: [{ required: true, message: '请输入地址！' }] }]"
placeholder="请输入英文地址" />
v-decorator="['addrEN', { rules: [{ required: true, message: '请输入英文地址！' }] }]" </a-form-item>
/> </a-col>
</a-form-item> </a-row>
</a-col> <a-row>
</a-row> <a-col :span="12">
<a-row> <a-form-item label="英文全名" :labelCol="labelCol2" :wrapperCol="wrapperCol2" has-feedback>
<a-col :span="8"> <a-input
<a-form-item label="发票抬头" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback> placeholder="请输入英文全名"
<a-input v-decorator="['fullNameEN', { rules: [{ required: true, message: '请输入英文全名！' }] }]"
placeholder="请输入发票抬头" />
v-decorator="['invTitle', { rules: [{ required: true, message: '请输入发票抬头！' }] }]" </a-form-item>
/> </a-col>
</a-form-item> <a-col :span="12">
</a-col> <a-form-item label="英文地址" :labelCol="labelCol2" :wrapperCol="wrapperCol2" has-feedback>
<a-col :span="8"> <a-input
<a-form-item label="纳税人识别号" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback> placeholder="请输入英文地址"
<a-input v-decorator="['addrEN', { rules: [{ required: true, message: '请输入英文地址！' }] }]"
placeholder="请输入纳税人识别号" />
v-decorator="['taxNO', { rules: [{ required: true, message: '请输入纳税人识别号！' }] }]" </a-form-item>
/> </a-col>
</a-form-item> </a-row>
</a-col> <p class="CsFormTitle"><span>联系人信息</span></p>
<a-col :span="8"> <vxe-toolbar>
<a-form-item label="发票地址电话" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback> <template #buttons>
<a-input <vxe-button icon="vxe-icon-square-plus" @click="insertEvent()">新增</vxe-button>
placeholder="请输入发票地址电话" <vxe-button @click="removeCheckboxRow()">删除选中</vxe-button>
v-decorator="['invAddrTel', { rules: [{ required: true, message: '请输入发票地址电话！' }] }]" </template>
/> </vxe-toolbar>
</a-form-item> <vxe-table
</a-col> ref="xTable"
</a-row> border
<a-row> resizable
<a-col :span="8"> show-overflow
<a-form-item label="人民币开户行" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback> :data="ContactsData"
<a-input :edit-config="{ trigger: 'click', mode: 'cell' }"
placeholder="请输入人民币开户行" >
v-decorator="['rmbBank', { rules: [{ required: true, message: '请输入人民币开户行！' }] }]" <vxe-column type="checkbox" width="60"></vxe-column>
/> <vxe-column type="seq" width="60"></vxe-column>
</a-form-item> <vxe-column field="roleName" title="角色" :edit-render="{}">
</a-col> <template #edit="{ row }">
<a-col :span="8"> <vxe-input v-model="row.roleName" type="text" placeholder="请输入角色"></vxe-input>
<a-form-item label="人民币账号" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback> </template>
<a-input </vxe-column>
placeholder="请输入人民币账号" <vxe-column field="name" title="姓名" :edit-render="{}">
v-decorator="['rmbAccount', { rules: [{ required: true, message: '请输入人民币账号！' }] }]" <template #edit="{ row }">
/> <vxe-input v-model="row.name" type="text" placeholder="请输入姓名"></vxe-input>
</a-form-item> </template>
</a-col> </vxe-column>
</a-row> <vxe-column field="email" title="邮箱" :edit-render="{}">
<a-row> <template #edit="{ row }">
<a-col :span="8"> <vxe-input v-model="row.email" type="text" placeholder="请输入邮箱"></vxe-input>
<a-form-item label="美元开户行" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback> </template>
<a-input </vxe-column>
placeholder="请输入美元开户行" <vxe-column field="tel" title="电话" :edit-render="{}">
v-decorator="['usdBank', { rules: [{ required: true, message: '请输入美元开户行！' }] }]" <template #edit="{ row }">
/> <vxe-input v-model="row.tel" type="text" placeholder="请输入电话"></vxe-input>
</a-form-item> </template>
</a-col> </vxe-column>
<a-col :span="8"> <vxe-column field="qq" title="QQ" :edit-render="{}">
<a-form-item label="美元账号" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback> <template #edit="{ row }">
<a-input <vxe-input v-model="row.qq" type="text" placeholder="请输入QQ" transfer></vxe-input>
placeholder="请输入美元账号" </template>
v-decorator="['usdAccount', { rules: [{ required: true, message: '请输入美元账号！' }] }]" </vxe-column>
/> <vxe-column field="remark" title="备注" :edit-render="{}">
</a-form-item> <template #edit="{ row }">
</a-col> <vxe-input v-model="row.remark" type="text" placeholder="请输入备注" transfer></vxe-input>
</a-row> </template>
</a-form> </vxe-column>
</a-spin> </vxe-table>
</a-modal> <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> </template>
<script> <script>
@ -186,21 +251,80 @@ import { DjyCustomerAdd } from '@/api/modular/main/CustomerInformationManagement
export default { export default {
data() { data() {
return { return {
sexList: [
{ label: '', value: '' },
{ label: '男', value: '1' },
{ label: '女', value: '0' }
],
labelCol: { labelCol: {
xs: { span: 24 }, xs: { span: 24 },
sm: { span: 7 } sm: { span: 6 }
}, },
wrapperCol: { labelCol2: {
xs: { span: 24 },
sm: { span: 3 }
},
labelCol3: {
xs: { span: 24 }, 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: [], typeData: [],
visible: false, visible: false,
confirmLoading: false, confirmLoading: false,
form: this.$form.createForm(this) form: this.$form.createForm(this),
ContactsData: []
} }
}, },
methods: { 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) { add(record) {
this.visible = true this.visible = true
@ -238,13 +362,12 @@ export default {
values[key] = JSON.stringify(values[key]) values[key] = JSON.stringify(values[key])
} }
} }
DjyCustomerAdd(values) DjyCustomerAdd({ ...values, contacts: this.ContactsData })
.then(res => { .then(res => {
if (res.success) { if (res.success) {
this.$message.success('新增成功') this.$message.success('新增成功')
this.confirmLoading = false this.confirmLoading = false
this.$emit('ok', values) this.$emit('ok', values)
this.handleCancel()
} else { } else {
this.$message.error('新增失败') // + res.message this.$message.error('新增失败') // + res.message
} }
@ -264,3 +387,16 @@ export default {
} }
} }
</script> </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> <template>
<a-modal <!-- <a-modal
title="编辑客户信息" title="新增客户信息"
:width="1100" :width="1100"
:visible="visible" :visible="visible"
:confirmLoading="confirmLoading" :confirmLoading="confirmLoading"
@ok="handleSubmit" @ok="handleSubmit"
@cancel="handleCancel" @cancel="handleCancel"
> > -->
<a-spin :spinning="confirmLoading"> <!-- <a-spin :spinning="confirmLoading"> -->
<a-form :form="form"> <a-form :form="form" class="CsForm">
<a-row> <a-row type="flex" justify="end">
<a-col :span="8"> <a-col :span="1">
<a-form-item label="简称" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback> <a-button type="primary" @click="handleSubmit">
<a-input 保存
placeholder="请输入简称" </a-button>
v-decorator="['shortName', { rules: [{ required: true, message: '请输入简称！' }] }]" </a-col>
/> </a-row>
</a-form-item> <a-row>
</a-col> <p class="CsFormTitle"><span>基本信息</span></p>
<a-col :span="8"> <a-col :span="6">
<a-form-item label="全称" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback> <a-form-item label="助记码" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
<a-input <a-input
placeholder="请输入全称" placeholder="请输入助记码"
v-decorator="['fullName', { rules: [{ required: true, message: '请输入全称！' }] }]" v-decorator="['codeName', { rules: [{ required: true, message: '请输入助记码！' }] }]"
/> />
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :span="8"> <a-col :span="6">
<a-form-item label="负责人" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback> <a-form-item label="简称" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
<a-input <a-input
placeholder="请输入负责人" placeholder="请输入简称"
v-decorator="['chief', { rules: [{ required: true, message: '请输入负责人！' }] }]" v-decorator="['shortName', { rules: [{ required: true, message: '请输入简称！' }] }]"
/> />
</a-form-item> </a-form-item>
</a-col> </a-col>
</a-row> <a-col :span="6">
<a-row> <a-form-item label="全称" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
<a-col :span="8"> <a-input
<a-form-item label="电话" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback> placeholder="请输入全称"
<a-input v-decorator="['fullName', { rules: [{ required: true, message: '请输入全称！' }] }]"
placeholder="请输入电话" />
v-decorator="['tel', { rules: [{ required: true, message: '请输入电话！' }] }]" </a-form-item>
/> </a-col>
</a-form-item> <a-col :span="6">
</a-col> <a-form-item label="负责人" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
<a-col :span="8"> <a-input
<a-form-item label="邮箱" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback> placeholder="请输入负责人"
<a-input v-decorator="['chief', { rules: [{ required: true, message: '请输入负责人！' }] }]"
placeholder="请输入邮箱" />
v-decorator="['email', { rules: [{ required: true, message: '请输入邮箱！' }] }]" </a-form-item>
/> </a-col>
</a-form-item> </a-row>
</a-col> <a-row>
<a-col :span="8"> <a-col :span="6">
<a-form-item label="QQ" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback> <a-form-item label="电话" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
<a-input <a-input
placeholder="请输入QQ" placeholder="请输入电话"
v-decorator="['qq', { rules: [{ required: true, message: '请输入QQ！' }] }]" v-decorator="['tel', { rules: [{ required: true, message: '请输入电话！' }] }]"
/> />
</a-form-item> </a-form-item>
</a-col> </a-col>
</a-row> <a-col :span="6">
<a-row> <a-form-item label="邮箱" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
<a-col :span="8"> <a-input
<a-form-item label="网址" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback> placeholder="请输入邮箱"
<a-input v-decorator="['email', { rules: [{ required: true, message: '请输入邮箱！' }] }]"
placeholder="请输入网址" />
v-decorator="['webUrl', { rules: [{ required: true, message: '请输入网址！' }] }]" </a-form-item>
/> </a-col>
</a-form-item> <a-col :span="6">
</a-col> <a-form-item label="QQ" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
<a-col :span="8"> <a-input
<a-form-item label="省份" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback> placeholder="请输入QQ"
<a-input v-decorator="['qq', { rules: [{ required: true, message: '请输入QQ！' }] }]"
placeholder="请输入省份" />
v-decorator="['province', { rules: [{ required: true, message: '请输入省份！' }] }]" </a-form-item>
/> </a-col>
</a-form-item> <a-col :span="6">
</a-col> <a-form-item label="网址" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
<a-col :span="8"> <a-input
<a-form-item label="城市" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback> placeholder="请输入网址"
<a-input v-decorator="['webUrl', { rules: [{ required: true, message: '请输入网址！' }] }]"
placeholder="请输入城市" />
v-decorator="['city', { rules: [{ required: true, message: '请输入城市！' }] }]" </a-form-item>
/> </a-col>
</a-form-item> </a-row>
</a-col> <a-row>
</a-row> <a-col :span="6">
<a-row> <a-form-item label="省份" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
<a-col :span="8"> <a-input
<a-form-item label="地址" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback> placeholder="请输入省份"
<a-input v-decorator="['province', { rules: [{ required: true, message: '请输入省份！' }] }]"
placeholder="请输入地址" />
v-decorator="['addr', { rules: [{ required: true, message: '请输入地址！' }] }]" </a-form-item>
/> </a-col>
</a-form-item> <a-col :span="6">
</a-col> <a-form-item label="城市" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
<a-col :span="8"> <a-input
<a-form-item label="英文全名" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback> placeholder="请输入城市"
<a-input v-decorator="['city', { rules: [{ required: true, message: '请输入城市！' }] }]"
placeholder="请输入英文全名" />
v-decorator="['fullNameEN', { rules: [{ required: true, message: '请输入英文全名！' }] }]" </a-form-item>
/> </a-col>
</a-form-item> <a-col :span="12">
</a-col> <a-form-item label="地址" :labelCol="labelCol2" :wrapperCol="wrapperCol2" has-feedback>
<a-col :span="8"> <a-input
<a-form-item label="英文地址" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback> placeholder="请输入地址"
<a-input v-decorator="['addr', { rules: [{ required: true, message: '请输入地址！' }] }]"
placeholder="请输入英文地址" />
v-decorator="['addrEN', { rules: [{ required: true, message: '请输入英文地址！' }] }]" </a-form-item>
/> </a-col>
</a-form-item> </a-row>
</a-col> <a-row>
</a-row> <a-col :span="12">
<a-row> <a-form-item label="英文全名" :labelCol="labelCol2" :wrapperCol="wrapperCol2" has-feedback>
<a-col :span="8"> <a-input
<a-form-item label="发票抬头" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback> placeholder="请输入英文全名"
<a-input v-decorator="['fullNameEN', { rules: [{ required: true, message: '请输入英文全名！' }] }]"
placeholder="请输入发票抬头" />
v-decorator="['invTitle', { rules: [{ required: true, message: '请输入发票抬头！' }] }]" </a-form-item>
/> </a-col>
</a-form-item> <a-col :span="12">
</a-col> <a-form-item label="英文地址" :labelCol="labelCol2" :wrapperCol="wrapperCol2" has-feedback>
<a-col :span="8"> <a-input
<a-form-item label="纳税人识别号" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback> placeholder="请输入英文地址"
<a-input v-decorator="['addrEN', { rules: [{ required: true, message: '请输入英文地址！' }] }]"
placeholder="请输入纳税人识别号" />
v-decorator="['taxNO', { rules: [{ required: true, message: '请输入纳税人识别号！' }] }]" </a-form-item>
/> </a-col>
</a-form-item> </a-row>
</a-col> <p class="CsFormTitle"><span>联系人信息</span></p>
<a-col :span="8"> <vxe-toolbar>
<a-form-item label="发票地址电话" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback> <template #buttons>
<a-input <vxe-button icon="vxe-icon-square-plus" @click="insertEvent()">新增</vxe-button>
placeholder="请输入发票地址电话" <vxe-button @click="removeCheckboxRow()">删除选中</vxe-button>
v-decorator="['invAddrTel', { rules: [{ required: true, message: '请输入发票地址电话！' }] }]" </template>
/> </vxe-toolbar>
</a-form-item> <vxe-table
</a-col> ref="xTable"
</a-row> border
<a-row> resizable
<a-col :span="8"> show-overflow
<a-form-item label="人民币开户行" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback> :data="ContactsData"
<a-input :edit-config="{ trigger: 'click', mode: 'cell' }"
placeholder="请输入人民币开户行" >
v-decorator="['rmbBank', { rules: [{ required: true, message: '请输入人民币开户行！' }] }]" <vxe-column type="checkbox" width="60"></vxe-column>
/> <vxe-column type="seq" width="60"></vxe-column>
</a-form-item> <vxe-column field="roleName" title="角色" :edit-render="{}">
</a-col> <template #edit="{ row }">
<a-col :span="8"> <vxe-input v-model="row.roleName" type="text" placeholder="请输入角色"></vxe-input>
<a-form-item label="人民币账号" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback> </template>
<a-input </vxe-column>
placeholder="请输入人民币账号" <vxe-column field="name" title="姓名" :edit-render="{}">
v-decorator="['rmbAccount', { rules: [{ required: true, message: '请输入人民币账号！' }] }]" <template #edit="{ row }">
/> <vxe-input v-model="row.name" type="text" placeholder="请输入姓名"></vxe-input>
</a-form-item> </template>
</a-col> </vxe-column>
</a-row> <vxe-column field="email" title="邮箱" :edit-render="{}">
<a-row> <template #edit="{ row }">
<a-col :span="8"> <vxe-input v-model="row.email" type="text" placeholder="请输入邮箱"></vxe-input>
<a-form-item label="美元开户行" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback> </template>
<a-input </vxe-column>
placeholder="请输入美元开户行" <vxe-column field="tel" title="电话" :edit-render="{}">
v-decorator="['usdBank', { rules: [{ required: true, message: '请输入美元开户行！' }] }]" <template #edit="{ row }">
/> <vxe-input v-model="row.tel" type="text" placeholder="请输入电话"></vxe-input>
</a-form-item> </template>
</a-col> </vxe-column>
<a-col :span="8"> <vxe-column field="qq" title="QQ" :edit-render="{}">
<a-form-item label="美元账号" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback> <template #edit="{ row }">
<a-input <vxe-input v-model="row.qq" type="text" placeholder="请输入QQ" transfer></vxe-input>
placeholder="请输入美元账号" </template>
v-decorator="['usdAccount', { rules: [{ required: true, message: '请输入美元账号！' }] }]" </vxe-column>
/> <vxe-column field="remark" title="备注" :edit-render="{}">
</a-form-item> <template #edit="{ row }">
</a-col> <vxe-input v-model="row.remark" type="text" placeholder="请输入备注" transfer></vxe-input>
</a-row> </template>
</a-form> </vxe-column>
</a-spin> </vxe-table>
</a-modal> <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> </template>
<script> <script>
import { DjyCustomerEdit } from '@/api/modular/main/CustomerInformationManagement' import { DjyCustomerEdit, DjyCustomerDetail } from '@/api/modular/main/CustomerInformationManagement'
export default { export default {
props: ['RowData'],
data() { data() {
return { return {
sexList: [
{ label: '', value: '' },
{ label: '男', value: '1' },
{ label: '女', value: '0' }
],
labelCol: { labelCol: {
xs: { span: 24 }, xs: { span: 24 },
sm: { span: 7 } sm: { span: 6 }
}, },
wrapperCol: { labelCol2: {
xs: { span: 24 },
sm: { span: 3 }
},
labelCol3: {
xs: { span: 24 }, 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: [], typeData: [],
visible: false, visible: false,
confirmLoading: 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: { 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) { add(record) {
console.log(record)
this.visible = true this.visible = true
const typeOption = this.$options this.typeData = [
this.typeData = typeOption.filters['dictData']('edi_type') {
setTimeout(() => { code: 10,
this.form.setFieldsValue({ name: '收货人'
addr: record.addr, },
addrEN: record.addrEN, {
chief: record.chief, code: 20,
city: record.city, name: '发货人'
createdTime: record.createdTime, },
createdUserId: record.createdUserId, {
createdUserName: record.createdUserName, code: 30,
email: record.email, name: '通知人'
fullName: record.fullName, },
fullNameEN: record.fullNameEN, {
id: record.id, code: 40,
invAddrTel: record.invAddrTel, name: '第二通知人'
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() { handleSubmit() {
const { const {
form: { validateFields } form: { validateFields }
} = this } = this
this.confirmLoading = true this.confirmLoading = true
validateFields((errors, values) => { validateFields((errors, values) => {
console.log(errors, values)
if (!errors) { if (!errors) {
for (const key in values) { for (const key in values) {
console.log(key, 1)
if (typeof values[key] === 'object' && !(values[key] === null)) { if (typeof values[key] === 'object' && !(values[key] === null)) {
values[key] = JSON.stringify(values[key]) values[key] = JSON.stringify(values[key])
} }
} }
console.log(this.form, values.id) DjyCustomerEdit({ ...this.Data, ...values, contacts: this.ContactsData })
DjyCustomerEdit(values)
.then(res => { .then(res => {
if (res.success) { if (res.success) {
this.$message.success('编辑成功') this.$message.success('新增成功')
this.confirmLoading = false this.confirmLoading = false
this.$emit('ok', values) this.$emit('ok', values)
this.handleCancel()
} else { } else {
this.$message.error('编辑失败') // + res.message this.$message.error('新增失败') // + res.message
} }
}) })
.finally(res => { .finally(res => {
@ -278,3 +402,16 @@ export default {
} }
} }
</script> </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> <template>
<div> <div class="CsMain">
<a-card :bordered="false" :bodyStyle="tstyle"> <a-tabs class="CsMainTable" v-model="activeKey" hide-add type="editable-card" @edit="onEdit">
<div <a-tab-pane v-for="pane in panes" :key="pane.key" :tab="pane.title" :closable="pane.key == 0 ? false : true">
class="table-page-search-wrapper" <div v-show="pane.title == '客户信息'">
v-if="hasPerm('BookingTemplate:page')" <a-card :bordered="false" :bodyStyle="tstyle">
:class="advanced ? 'Open' : 'Close'" <div
> class="table-page-search-wrapper"
<a-form layout="inline"> v-if="hasPerm('BookingTemplate:page')"
<a-row :gutter="48"> :class="advanced ? 'Open' : 'Close'"
<a-col :md="18"> >
<a-row :gutter="48"> <a-form layout="inline">
<a-col :md="8" :sm="24" v-for="item in ColumnsQuery" :key="`${item.dataIndex}1`" v-show="item.checked"> <a-row :gutter="48">
<a-form-item :label="item.title"> <a-col :md="18">
<a-input v-model="queryParam[item.dataIndex]" allow-clear :placeholder="`请输入${item.title}`" /> <a-row :gutter="48">
</a-form-item> <a-col
</a-col> :md="8"
</a-row> :sm="24"
</a-col> v-for="item in ColumnsQuery"
<a-col :md="4" :sm="24"> :key="`${item.dataIndex}1`"
<span class="table-page-search-submitButtons"> v-show="item.checked"
<a-button type="primary" @click="FnGetData">查询</a-button> >
<a-button style="margin-left: 8px" @click="init">重置</a-button> <a-form-item :label="item.title">
<a v-if="ColumnsQueryL > 3" @click="toggleAdvanced" style="margin-left: 8px"> <a-input
{{ advanced ? '收起' : '展开' }} v-model="queryParam[item.dataIndex]"
<a-icon :type="advanced ? 'up' : 'down'" /> allow-clear
</a> :placeholder="`请输入${item.title}`"
</span> />
</a-col> </a-form-item>
<a-col :md="2" :sm="24" class="SetFlex"> </a-col>
<a-popover placement="bottom" v-model="setVisible" trigger="click"> </a-row>
<template #content> </a-col>
<columnSetting :columns="ColumnsQuery" @columnChange="columnChange"></columnSetting> <a-col :md="4" :sm="24">
</template> <span class="table-page-search-submitButtons">
<span class="tab-btn"> <a-icon type="setting" :style="{ fontSize: '16px' }" /> 设置 </span> <a-button type="primary" @click="FnGetData">查询</a-button>
</a-popover> <a-button style="margin-left: 8px" @click="init">重置</a-button>
</a-col> <a v-if="ColumnsQueryL > 3" @click="toggleAdvanced" style="margin-left: 8px">
</a-row> {{ advanced ? '收起' : '展开' }}
</a-form> <a-icon :type="advanced ? 'up' : 'down'" />
</div> </a>
</a-card> </span>
<a-card :bordered="false"> </a-col>
<vxe-toolbar> <a-col :md="2" :sm="24" class="SetFlex">
<template #buttons> <a-popover placement="bottom" v-model="setVisible" trigger="click">
<a-button type="primary" icon="plus" @click="$refs.addForm.add()"> <template #content>
新增客户 <columnSetting :columns="ColumnsQuery" @columnChange="columnChange"></columnSetting>
</a-button> </template>
</template> <span class="tab-btn"> <a-icon type="setting" :style="{ fontSize: '16px' }" /> 设置 </span>
<template #tools> </a-popover>
<div class="right"> </a-col>
<a-popover placement="bottom" v-model="setVisible1" trigger="click"> </a-row>
<template #content> </a-form>
<columnSetting :columns="TableColumns" @columnChange="columnChange1"></columnSetting> </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> </template>
<span class="tab-btn"> <a-icon type="setting" :style="{ fontSize: '16px' }" /> 设置 </span> </vxe-toolbar>
</a-popover> <vxe-table
</div> @cell-dblclick="cellDBLClickEvent"
</template> :data="loadData"
</vxe-toolbar> border
<vxe-table :data="loadData" border :loading="loading" empty-text="没有更多数据了！" v-if="!TableType"> :loading="loading"
<vxe-column type="seq" width="40" fixed="left"></vxe-column> empty-text="没有更多数据了！"
<vxe-column v-if="!TableType"
v-for="item in TableColumns" >
:key="`${item.dataIndex}3`" <vxe-column type="seq" width="40" fixed="left"></vxe-column>
:field="item.dataIndex" <vxe-column
:min-width="item.width" v-for="item in TableColumns"
:title="item.title" :key="`${item.dataIndex}3`"
:align="item.align" :field="item.dataIndex"
v-if="item.checked" :min-width="item.width"
></vxe-column> :title="item.title"
<vxe-column title="操作" fixed="right" width="200" align="center"> :align="item.align"
<template #default="{ row }"> v-if="item.checked"
<vxe-button type="text" @click="$refs.editForm.edit(row)">编辑</vxe-button> ></vxe-column>
<vxe-button type="text" @click="DjyCustomerDelete(row)">删除</vxe-button> <vxe-column title="操作" fixed="right" width="200" align="center">
</template> <template #default="{ row }">
</vxe-column> <vxe-button type="text" @click="TabsEdit(row)">编辑</vxe-button>
</vxe-table> <a-popconfirm
<vxe-pager title="请确认删除?"
:loading="loading" ok-text="是"
:current-page="queryParam.currentPage" cancel-text="否"
:page-size="queryParam.pageSize" @confirm="
:total="queryParam.totalResult" e => {
:layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']" confirm(e, row)
@page-change="handlePageChange" }
> "
</vxe-pager> >
<add-form ref="addForm" @ok="handleOk" /> <vxe-button type="text">删除</vxe-button>
<edit-form ref="editForm" @ok="handleOk" /> </a-popconfirm>
</a-card> </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> </div>
</template> </template>
<script> <script>
@ -100,6 +136,12 @@ import addForm from './addForm.vue'
import editForm from './editForm.vue' import editForm from './editForm.vue'
import columnSetting from '@/components/tableColumnSetting' import columnSetting from '@/components/tableColumnSetting'
const columns = [ const columns = [
{
title: '助记码',
align: 'center',
width: '90',
dataIndex: 'codeName'
},
{ {
title: '简称', title: '简称',
align: 'center', align: 'center',
@ -222,7 +264,13 @@ export default {
columnSetting columnSetting
}, },
data() { data() {
const panes = [
{ title: '客户信息', key: 0 }
// { title: 'Tab 2', content: 'Content of Tab 2', key: '2' }
]
return { return {
activeKey: 0,
panes,
// 高级搜索 展开/关闭 // 高级搜索 展开/关闭
TableType: false, TableType: false,
advanced: false, advanced: false,
@ -247,6 +295,56 @@ export default {
this.init() this.init()
}, },
methods: { 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) { columnChange(data) {
this.ColumnsQuery = [...data] this.ColumnsQuery = [...data]
let Data = [] let Data = []
@ -379,6 +477,9 @@ export default {
const obj = JSON.parse(JSON.stringify(this.queryParam)) const obj = JSON.parse(JSON.stringify(this.queryParam))
return obj return obj
}, },
confirm(e, data) {
this.DjyCustomerDelete(data)
},
DjyCustomerDelete(record) { DjyCustomerDelete(record) {
DjyCustomerDelete(record).then(res => { DjyCustomerDelete(record).then(res => {
if (res.success) { if (res.success) {
@ -413,4 +514,15 @@ button {
display: flex; display: flex;
justify-content: flex-end; 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> </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"> <vxe-column title="操作" fixed="right" width="200" align="center">
<template #default="{ row }"> <template #default="{ row }">
<vxe-button type="text" @click="$refs.editForm.edit(row)">编辑</vxe-button> <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> </template>
</vxe-column> </vxe-column>
</vxe-table> </vxe-table>
@ -232,6 +243,9 @@ export default {
const obj = JSON.parse(JSON.stringify(this.queryParam)) const obj = JSON.parse(JSON.stringify(this.queryParam))
return obj return obj
}, },
confirm(e, data) {
this.DjyEdiSettingDelete(data)
},
DjyEdiSettingDelete(record) { DjyEdiSettingDelete(record) {
DjyEdiSettingDelete(record).then(res => { DjyEdiSettingDelete(record).then(res => {
if (res.success) { if (res.success) {

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

@ -1,6 +1,6 @@
<template> <template>
<a-modal <a-modal
title="新增客户信息" title="新增订舱打印模板"
:width="1100" :width="1100"
:visible="visible" :visible="visible"
:confirmLoading="confirmLoading" :confirmLoading="confirmLoading"
@ -12,30 +12,49 @@
<a-row> <a-row>
<a-col :span="8"> <a-col :span="8">
<a-form-item label="类型名称" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback> <a-form-item label="类型名称" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
<a-input <!-- <a-input
placeholder="请输入类型名称" placeholder="请输入类型名称"
v-decorator="['typeName', { rules: [{ required: true, message: '请输入类型名称！' }] }]" 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-form-item>
</a-col> </a-col>
<a-col :span="8"> <a-col :span="8">
<a-form-item label="租户名称" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback> <a-form-item label="租户名称" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
<a-input <!-- <a-input
placeholder="请输入租户名称" placeholder="请输入租户名称"
v-decorator="['tenantName', { rules: [{ required: true, message: '请输入租户名称！' }] }]" 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-form-item>
</a-col> </a-col>
<a-col :span="8"> <a-col :span="8">
<a-upload <a-form-item>
name="file" <a-upload
:file-list="fileList" name="file"
@change="handleChange" :file-list="fileList"
:customRequest="customRequest" @change="handleChange"
:multiple="false" :customRequest="customRequest"
> :multiple="false"
<a-button> <a-icon type="upload" /> 文件上传 </a-button> :style="{ marginTop: '4px' }"
</a-upload> >
<a-button> <a-icon type="upload" /> 文件上传 </a-button>
</a-upload>
</a-form-item>
</a-col> </a-col>
</a-row> </a-row>
</a-form> </a-form>
@ -44,11 +63,14 @@
</template> </template>
<script> <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 { export default {
data() { data() {
return { return {
TypeData: [],
SysTenantData: [],
file: {}, file: {},
fileList: [], fileList: [],
labelCol: { labelCol: {
@ -59,12 +81,21 @@ export default {
xs: { span: 24 }, xs: { span: 24 },
sm: { span: 15 } sm: { span: 15 }
}, },
typeData: [],
visible: false, visible: false,
confirmLoading: false, confirmLoading: false,
form: this.$form.createForm(this) 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: { methods: {
customRequest(data) { customRequest(data) {
this.file = data.file this.file = data.file
@ -75,24 +106,6 @@ export default {
// 初始化方法 // 初始化方法
add(record) { add(record) {
this.visible = true 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]) 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 }) BookingPrintTemplateAdd({ file: this.file, data: values })
.then(res => { .then(res => {
if (res.success) { if (res.success) {
@ -119,8 +137,12 @@ export default {
} else { } else {
this.$message.error('新增失败') // + res.message this.$message.error('新增失败') // + res.message
} }
this.file = {}
this.fileList = []
}) })
.finally(res => { .finally(res => {
this.file = {}
this.fileList = []
this.confirmLoading = false this.confirmLoading = false
}) })
} else { } else {

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

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

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

@ -19,12 +19,6 @@
</a-col> </a-col>
<a-col :md="4" :sm="24"> <a-col :md="4" :sm="24">
<span class="table-page-search-submitButtons"> <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 type="primary" @click="FnGetData">查询</a-button>
<a-button style="margin-left: 8px" @click="init">重置</a-button> <a-button style="margin-left: 8px" @click="init">重置</a-button>
<!-- <a @click="toggleAdvanced" style="margin-left: 8px"> <!-- <a @click="toggleAdvanced" style="margin-left: 8px">
@ -77,7 +71,18 @@
<vxe-column title="操作" fixed="right" width="200" align="center"> <vxe-column title="操作" fixed="right" width="200" align="center">
<template #default="{ row }"> <template #default="{ row }">
<vxe-button type="text" @click="$refs.editForm.edit(row)">编辑</vxe-button> <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> </template>
</vxe-column> </vxe-column>
</vxe-table> </vxe-table>
@ -279,6 +284,9 @@ export default {
const obj = JSON.parse(JSON.stringify(this.queryParam)) const obj = JSON.parse(JSON.stringify(this.queryParam))
return obj return obj
}, },
confirm(e, data) {
this.BookingPrintTemplateDelete(data)
},
BookingPrintTemplateDelete(record) { BookingPrintTemplateDelete(record) {
BookingPrintTemplateDelete(record).then(res => { BookingPrintTemplateDelete(record).then(res => {
if (res.success) { if (res.success) {

Write Preview
Loading…
Cancel
Save