|
@@ -1,145 +1,203 @@
|
|
|
<template>
|
|
|
- <div class="expenseManagementEdit-wrap">
|
|
|
- <a-page-header :ghost="false" @back="handleBack" class="expenseManagementEdit-back">
|
|
|
- <!-- 自定义的二级文字标题 -->
|
|
|
- <template slot="subTitle">
|
|
|
- <a id="expenseManagementEdit-back-btn" href="javascript:;" @click="handleBack">返回列表</a>
|
|
|
- </template>
|
|
|
- </a-page-header>
|
|
|
- <a-card size="small" :bordered="false" class="expenseManagementEdit-table-page-wrapper">
|
|
|
- <a-form-model
|
|
|
- id="expenseManagementEdit-form"
|
|
|
- ref="ruleForm"
|
|
|
- :model="form"
|
|
|
- :rules="rules"
|
|
|
- :label-col="formItemLayout.labelCol"
|
|
|
- :wrapper-col="formItemLayout.wrapperCol" >
|
|
|
- <a-form-model-item label="费用类型" prop="distributionType">
|
|
|
- <v-select code="DISPATCH_FASHION" id="expenseManagementEdit-distributionType" v-model="form.distributionType" allowClear placeholder="请选择费用类型" ></v-select>
|
|
|
- </a-form-model-item>
|
|
|
- <a-form-model-item label="费用金额" prop="name">
|
|
|
- <a-input-number id="expenseManagementEdit-name" v-model="form.name" :precision="0" :min="0" :max="999999" placeholder="请输入费用金额(0~999999)" allowClear style="width: 90%;" /> 元
|
|
|
- </a-form-model-item>
|
|
|
- <a-form-model-item label="结算方式" prop="distributionType">
|
|
|
- <v-select code="DISPATCH_FASHION" id="expenseManagementEdit-distributionType" v-model="form.distributionType" allowClear placeholder="请选择结算方式" ></v-select>
|
|
|
- </a-form-model-item>
|
|
|
- <a-form-model-item label="关联单号" prop="mobile">
|
|
|
- <a-input id="expenseManagementEdit-mobile" :maxLength="30" v-model="form.mobile" placeholder="请输入关联单号(最多30个字符)" allowClear />
|
|
|
- </a-form-model-item>
|
|
|
- <a-form-model-item label="备注" prop="remarks">
|
|
|
- <a-textarea id="expenseManagementEdit-remarks" :maxLength="500" v-model="form.remarks" placeholder="请输入备注(最多500个字符)" allowClear />
|
|
|
- </a-form-model-item>
|
|
|
- <a-form-model-item :wrapper-col="{ span: 12, offset: 6 }" style="text-align: center;">
|
|
|
- <a-button type="primary" @click="handleSave" id="expenseManagementEdit-btn-save" style="padding: 0 60px;margin: 0 30px;">保存</a-button>
|
|
|
- <a-button type="danger" @click="handleSubmit" id="expenseManagementEdit-btn-submit" style="padding: 0 60px;margin: 0 30px;">提交</a-button>
|
|
|
- </a-form-model-item>
|
|
|
- </a-form-model>
|
|
|
- </a-card>
|
|
|
- </div>
|
|
|
+ <div class="expenseManagementEdit-wrap">
|
|
|
+ <a-page-header :ghost="false" :back-icon="false" class="expenseManagementEdit-back">
|
|
|
+ <!-- 自定义的二级文字标题 -->
|
|
|
+ <template slot="subTitle">
|
|
|
+ <a id="expenseManagementEdit-back-btn" href="javascript:;" @click="handleBack">
|
|
|
+ <a-icon type="left"></a-icon>
|
|
|
+ 返回列表
|
|
|
+ </a>
|
|
|
+ </template>
|
|
|
+ </a-page-header>
|
|
|
+ <a-card size="small" :bordered="false" class="expenseManagementEdit-table-page-wrapper">
|
|
|
+ <a-form-model
|
|
|
+ id="expenseManagementEdit-form"
|
|
|
+ ref="ruleForm"
|
|
|
+ :model="form"
|
|
|
+ :rules="rules"
|
|
|
+ :label-col="formItemLayout.labelCol"
|
|
|
+ :wrapper-col="formItemLayout.wrapperCol">
|
|
|
+ <a-form-model-item label="费用类型" prop="costType">
|
|
|
+ <a-cascader
|
|
|
+ @change="changeCostType"
|
|
|
+ change-on-select
|
|
|
+ v-model="form.costType"
|
|
|
+ :options="costTypeList"
|
|
|
+ :fieldNames="{ label: 'name', value: 'costTypeSn', children: 'children' }"
|
|
|
+ id="productInfoList-costType"
|
|
|
+ placeholder="请选择费用类型"
|
|
|
+ allowClear
|
|
|
+ />
|
|
|
+ </a-form-model-item>
|
|
|
+ <a-form-model-item label="费用金额" prop="settleAmount">
|
|
|
+ <a-input-number
|
|
|
+ id="expenseManagementEdit-name"
|
|
|
+ v-model="form.settleAmount"
|
|
|
+ :precision="0"
|
|
|
+ :min="0"
|
|
|
+ :max="999999"
|
|
|
+ placeholder="请输入费用金额(0~999999)"
|
|
|
+ allowClear
|
|
|
+ style="width: 90%;"
|
|
|
+ />
|
|
|
+ 元
|
|
|
+ </a-form-model-item>
|
|
|
+ <a-form-model-item label="结算方式" prop="settleStyleSn">
|
|
|
+ <a-select placeholder="请选择结算方式" v-model="form.settleStyleSn" @change="settleStyleChange">
|
|
|
+ <a-select-option v-for="item in settleStyleList" :key="item.settleStyleSn" :value="item.settleStyleSn">
|
|
|
+ {{ item.name }}
|
|
|
+ </a-select-option>
|
|
|
+ </a-select>
|
|
|
+ </a-form-model-item>
|
|
|
+ <a-form-model-item label="关联单号" prop="bizNo">
|
|
|
+ <a-input id="expenseManagementEdit-bizNo" :maxLength="30" v-model="form.bizNo" placeholder="请输入关联单号(最多30个字符)" allowClear />
|
|
|
+ </a-form-model-item>
|
|
|
+ <a-form-model-item label="备注" prop="remarks">
|
|
|
+ <a-textarea id="expenseManagementEdit-remarks" :maxLength="500" v-model="form.remarks" placeholder="请输入备注(最多500个字符)" allowClear />
|
|
|
+ </a-form-model-item>
|
|
|
+ <a-form-model-item :wrapper-col="{ span: 12, offset: 6 }" style="text-align: center;">
|
|
|
+ <a-button type="primary" size="large" @click="handleSubmit" id="expenseManagementEdit-btn-save" style="margin: 0 30px;">保存</a-button>
|
|
|
+ </a-form-model-item>
|
|
|
+ </a-form-model>
|
|
|
+ </a-card>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import { STable, VSelect } from '@/components'
|
|
|
-import { custSave, custFindById } from '@/api/customer'
|
|
|
+import { settleExpenseSave, findExpenseDetail } from '@/api/settleExpense'
|
|
|
+import { costTypeAllQuery } from '@/api/costType'
|
|
|
+import { settleStyleQueryAll } from '@/api/settleStyle'
|
|
|
export default {
|
|
|
- name: 'expenseManagementEdit',
|
|
|
- components: { STable, VSelect },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- formItemLayout: {
|
|
|
- labelCol: { span: 4 },
|
|
|
- wrapperCol: { span: 16 }
|
|
|
- },
|
|
|
- form: {
|
|
|
- name: '', // 客户名称
|
|
|
- mobile: '', // 联系手机
|
|
|
- contact: '', // 联系人
|
|
|
- provinceId: undefined, // 省
|
|
|
- province: '',
|
|
|
- cityId: undefined, // 市
|
|
|
- city: '',
|
|
|
- areaId: undefined, // 区
|
|
|
- area: '',
|
|
|
- address: '', // 详细地址
|
|
|
- fax: '', // 客户传真
|
|
|
- distributionType: '', // 配送方式
|
|
|
- remarks: '', // 是否卫星仓客户
|
|
|
- custType: undefined, // 客户类型
|
|
|
- priceType: '', // 价格类型
|
|
|
- payType: '', // 支付方式
|
|
|
- paymentType: '', // 收款方式
|
|
|
- contactTel: '' // 联系电话
|
|
|
- },
|
|
|
- rules: {
|
|
|
- name: [{ required: true, message: '请输入客户名称', trigger: 'blur' }],
|
|
|
- mobile: [{ required: true, message: '请输入联系手机', trigger: 'blur' }],
|
|
|
- provinceId: [{ required: true, message: '请选择省', trigger: 'change' }],
|
|
|
- cityId: [{ required: true, message: '请选择市', trigger: 'change' }],
|
|
|
- areaId: [{ required: true, message: '请选择区/县', trigger: 'change' }],
|
|
|
- custType: [{ required: true, message: '请选择客户类型', trigger: 'change' }],
|
|
|
- priceType: [{ required: true, message: '请选择价格类型', trigger: 'change' }],
|
|
|
- payType: [{ required: true, message: '请选择支付方式', trigger: 'change' }],
|
|
|
- paymentType: [{ required: true, message: '请选择收款方式', trigger: 'change' }]
|
|
|
- },
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
- // 详情
|
|
|
- getDetail() {
|
|
|
- // custFindById({ id: this.$route.params.id }).then(res => {
|
|
|
- // if (res.status == 200) {
|
|
|
- // // this.detailsData = res.data
|
|
|
- // } else {
|
|
|
- // this.$refs.ruleForm.resetFields()
|
|
|
- // }
|
|
|
- // })
|
|
|
- },
|
|
|
- // 保存
|
|
|
- handleSubmit(e) {
|
|
|
- e.preventDefault()
|
|
|
- const _this = this
|
|
|
- this.$refs.ruleForm.validate(valid => {
|
|
|
- if (valid) {
|
|
|
- const form = _this.form
|
|
|
- form.id = this.$route.params.id ? this.$route.params.id : null
|
|
|
- console.log(form,'-----提交信息')
|
|
|
- // custSave(form).then(res => {
|
|
|
- // if (res.status == 200) {
|
|
|
- // _this.$message.success(res.message)
|
|
|
- // setTimeout(() => {
|
|
|
- // _this.$router.push({ path: '/financialManagement/expenseManagement/list' })
|
|
|
- // }, 1000)
|
|
|
- // }
|
|
|
- // })
|
|
|
- } else {
|
|
|
- console.log('error submit!!')
|
|
|
- return false
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- // 提交
|
|
|
- handleSave(){},
|
|
|
- // 返回列表
|
|
|
- handleBack() {
|
|
|
- this.$router.push({ path: '/financialManagement/expenseManagement/list' })
|
|
|
- },
|
|
|
- },
|
|
|
- beforeRouteEnter(to, from, next) {
|
|
|
- next(vm => {
|
|
|
- vm.$refs.ruleForm.resetFields()
|
|
|
- if (vm.$route.params.id) {
|
|
|
- // 编辑页
|
|
|
- vm.getDetail()
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
-};
|
|
|
+ name: 'ExpenseManagementEdit',
|
|
|
+ components: { STable, VSelect },
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ formItemLayout: {
|
|
|
+ labelCol: { span: 4 },
|
|
|
+ wrapperCol: { span: 16 }
|
|
|
+ },
|
|
|
+ costTypeList: [], // 费用类型
|
|
|
+ settleStyleList: [], // 结算方式
|
|
|
+ form: {
|
|
|
+ expensesTypeSn: '', // 费用类型
|
|
|
+ expensesTypeSn1: '', // 费用类型1
|
|
|
+ expensesTypeSn2: '', // 费用类型2
|
|
|
+ costType: [],
|
|
|
+ settleAmount: '', // 费用金额
|
|
|
+ settleStyleSn: undefined, // 结算方式
|
|
|
+ settleStyleName: '', // 结算方式名称
|
|
|
+ bizNo: '', // 关联单号
|
|
|
+ remarks: '' // 备注
|
|
|
+ },
|
|
|
+ rules: {
|
|
|
+ costType: [{ required: true, message: '请选择费用类型', trigger: 'change' }],
|
|
|
+ settleAmount: [{ required: true, message: '请输入费用金额', trigger: 'blur' }],
|
|
|
+ settleStyleSn: [{ required: true, message: '请选择结算方式', trigger: 'change' }],
|
|
|
+ bizNo: [{ required: true, message: '请输入关联单号', trigger: 'blur' }]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 获取结算方式
|
|
|
+ getSettleStyle () {
|
|
|
+ settleStyleQueryAll().then(res => {
|
|
|
+ if (res.status == 200) {
|
|
|
+ this.settleStyleList = res.data
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 选择结算方式
|
|
|
+ settleStyleChange (v) {
|
|
|
+ this.form.settleStyleName = this.settleStyleList.find(item => item.settleStyleSn == v).name
|
|
|
+ },
|
|
|
+ // 递归函数
|
|
|
+ recursionFun (data) {
|
|
|
+ if (data) {
|
|
|
+ data.map((item, index) => {
|
|
|
+ if (item.children && item.children.length == 0) {
|
|
|
+ delete item.children
|
|
|
+ } else {
|
|
|
+ this.recursionFun(item.children)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 获取费用类型数据
|
|
|
+ getCostTypeList () {
|
|
|
+ costTypeAllQuery({}).then(res => {
|
|
|
+ // 递归去除空children
|
|
|
+ this.recursionFun(res.data)
|
|
|
+ this.costTypeList = res.data
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 费用类型 change
|
|
|
+ changeCostType (val, opt) {
|
|
|
+ this.form.expensesTypeSn = val[0] ? val[0] : ''
|
|
|
+ this.form.expensesTypeSn1 = val[1] ? val[1] : ''
|
|
|
+ this.form.expensesTypeSn2 = val[2] ? val[2] : ''
|
|
|
+ },
|
|
|
+ // 详情
|
|
|
+ getDetail () {
|
|
|
+ findExpenseDetail({ id: this.$route.params.id }).then(res => {
|
|
|
+ if (res.status == 200) {
|
|
|
+ this.form = Object.assign({}, this.form, res.data)
|
|
|
+ } else {
|
|
|
+ this.$refs.ruleForm.resetFields()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 保存
|
|
|
+ handleSubmit (e) {
|
|
|
+ e.preventDefault()
|
|
|
+ const _this = this
|
|
|
+ this.$refs.ruleForm.validate(valid => {
|
|
|
+ if (valid) {
|
|
|
+ if (!this.form.expensesTypeSn2) {
|
|
|
+ this.$message.warning('费用类型未选到第三级,请修改后再提交!')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ const form = JSON.parse(JSON.stringify(_this.form))
|
|
|
+ if (this.$route.params.id) {
|
|
|
+ form.id = this.$route.params.id
|
|
|
+ }
|
|
|
+ delete form.costType
|
|
|
+ settleExpenseSave(form).then(res => {
|
|
|
+ if (res.status == 200) {
|
|
|
+ _this.$message.success(res.message)
|
|
|
+ setTimeout(() => {
|
|
|
+ _this.handleBack()
|
|
|
+ }, 1000)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 返回列表
|
|
|
+ handleBack () {
|
|
|
+ this.$router.push({ name: 'expenseManagementList' })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ beforeRouteEnter (to, from, next) {
|
|
|
+ next(vm => {
|
|
|
+ vm.$refs.ruleForm.resetFields()
|
|
|
+ if (vm.$route.params.id) {
|
|
|
+ // 编辑页
|
|
|
+ vm.getDetail()
|
|
|
+ }
|
|
|
+ vm.getCostTypeList()
|
|
|
+ vm.getSettleStyle()
|
|
|
+ })
|
|
|
+ }
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<style lang="less">
|
|
|
.expenseManagementEdit-wrap {
|
|
|
- .expenseManagementEdit-back {
|
|
|
- margin-bottom: 15px;
|
|
|
- }
|
|
|
+ .expenseManagementEdit-back {
|
|
|
+ margin-bottom: 15px;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|