| | |
| | | <template> |
| | | <basicContainer > |
| | | <avue-crud |
| | | :option="option" |
| | | :table-loading="pageF.loading" |
| | | :data="tableData" |
| | | :page="page" |
| | | :permission="permissionList" |
| | | :before-open="beforeOpen" |
| | | v-model="form" |
| | | ref="crudRef" |
| | | @row-update="rowUpdate" |
| | | @row-save="rowSave" |
| | | @refresh-change="refreshChange" |
| | | @row-del="rowDel" |
| | | @search-change="searchChange" |
| | | @search-reset="searchReset" |
| | | @selection-change="selectionChange" |
| | | @current-change="currentChange" |
| | | @size-change="sizeChange" |
| | | @on-load="onLoad" |
| | | > |
| | | <basicContainer> |
| | | <avue-crud :option="option" :table-loading="pageF.loading" :data="tableData" :page="page" |
| | | :permission="permissionList" :before-open="beforeOpen" v-model="form" ref="crudRef" @row-update="rowUpdate" |
| | | @row-save="rowSave" @refresh-change="refreshChange" @row-del="rowDel" @search-change="searchChange" |
| | | @search-reset="searchReset" @selection-change="selectionChange" @current-change="currentChange" |
| | | @size-change="sizeChange" @on-load="onLoad"> |
| | | <template #menu-left> |
| | | <el-button |
| | | type="success" |
| | | icon="Edit" |
| | | :disabled="pageF.single" |
| | | v-hasPermi="['cwgl:bankAccountConfig:edit']" |
| | | @click="handleUpdate">修改 |
| | | <el-button type="primary" icon="Plus" v-hasPermi="['cwgl:bankAccountConfig:add']" @click="handleAdd">新增 |
| | | </el-button> |
| | | <el-button |
| | | type="danger" |
| | | icon="Delete" |
| | | :disabled="pageF.multiple" |
| | | @click="handleDelete" |
| | | v-hasPermi="['cwgl:bankAccountConfig:remove']" |
| | | >删除 |
| | | <!-- <el-button type="success" icon="Edit" :disabled="pageF.single" v-hasPermi="['cwgl:bankAccountConfig:edit']" |
| | | @click="handleUpdate">修改 |
| | | </el-button> --> |
| | | <!-- <el-button type="danger" icon="Delete" :disabled="pageF.multiple" @click="handleDelete" |
| | | v-hasPermi="['cwgl:bankAccountConfig:remove']">删除 |
| | | </el-button> --> |
| | | <el-button type="warning" plain icon="Download" @click="handleExport" |
| | | v-hasPermi="['cwgl:bankAccountConfig:export']">导出 |
| | | </el-button> |
| | | <el-button |
| | | type="warning" |
| | | plain |
| | | icon="Download" |
| | | @click="handleExport" |
| | | v-hasPermi="['cwgl:bankAccountConfig:export']" |
| | | >导出 |
| | | </el-button> |
| | | </template> |
| | | <template #menu="{ size, row, index }"> |
| | | <el-link class="link-btn" type="primary" icon="Edit" :underline="false" plain :size="size" |
| | | @click="handleFy(row)" v-hasPermi="['cwgl:bankAccountConfig:edit']"> 编辑 |
| | | </el-link> |
| | | </template> |
| | | </avue-crud> |
| | | </basicContainer> |
| | | <bankCardCate ref="invoiceFormRef" @submit="handleFormSubmit" /> |
| | | </template> |
| | | |
| | | <script setup name="bankAccountConfig" lang="ts"> |
| | | import {BankAccountConfigI,addBankAccountConfig, delBankAccountConfig, exportBankAccountConfig, getBankAccountConfig, listBankAccountConfig, updateBankAccountConfig} from "@/api/cwgl/bankAccountConfig"; |
| | | import useCurrentInstance from "@/utils/useCurrentInstance"; |
| | | import {computed,reactive, ref, toRefs} from "vue"; |
| | | import {PagesInterface, PageQueryInterface} from "@/utils/globalInterface"; |
| | | import {usePagePlus} from "@/hooks/usePagePlus"; |
| | | import {hasPermission} from "@/utils/permissionUtils"; |
| | | import { BankAccountConfigI, addBankAccountConfig, delBankAccountConfig, exportBankAccountConfig, getBankAccountConfig, listBankAccountConfig, updateBankAccountConfig } from "@/api/cwgl/bankAccountConfig"; |
| | | import useCurrentInstance from "@/utils/useCurrentInstance"; |
| | | import { computed, reactive, ref, toRefs } from "vue"; |
| | | import { PagesInterface, PageQueryInterface } from "@/utils/globalInterface"; |
| | | import { usePagePlus } from "@/hooks/usePagePlus"; |
| | | import { hasPermission } from "@/utils/permissionUtils"; |
| | | import bankCardCate from "@/components/bankCardCate/index.vue"; |
| | | const { proxy } = useCurrentInstance(); |
| | | const crudRef = ref(); |
| | | const { |
| | | customer_type, sys_invoice_type, sys_currency, sys_account_type, sys_bank_type |
| | | } = |
| | | proxy.useDict( |
| | | 'customer_type', 'sys_invoice_type', 'sys_currency', 'sys_account_type', 'sys_bank_type' |
| | | ); |
| | | const dictFormat = (dict: any, value: any) => { |
| | | return proxy.selectDictLabel(dict, value); |
| | | } |
| | | const permissionList = computed(() => { |
| | | return { |
| | | addBtn: hasPermission(["cwgl:bankAccountConfig:add"]), |
| | | delBtn: hasPermission(["cwgl:bankAccountConfig:remove"]), |
| | | editBtn: hasPermission(["cwgl:bankAccountConfig:edit"]), |
| | | viewBtn: hasPermission(["cwgl:bankAccountConfig:query"]), |
| | | } |
| | | }) |
| | | |
| | | const { proxy } = useCurrentInstance(); |
| | | const crudRef = ref(); |
| | | |
| | | const permissionList = computed(()=>{ |
| | | return { |
| | | addBtn: hasPermission(["cwgl:bankAccountConfig:add"]), |
| | | delBtn: hasPermission(["cwgl:bankAccountConfig:remove"]), |
| | | editBtn: hasPermission(["cwgl:bankAccountConfig:edit"]), |
| | | viewBtn: hasPermission(["cwgl:bankAccountConfig:query"]), |
| | | } |
| | | }) |
| | | |
| | | const data = reactive({ |
| | | form:<BankAccountConfigI>{}, |
| | | queryParams:<BankAccountConfigI&PageQueryInterface>{}, |
| | | page: <PagesInterface>{ |
| | | pageSize: 10, |
| | | total: 0, |
| | | currentPage: 1, |
| | | const data = reactive({ |
| | | form: <BankAccountConfigI>{}, |
| | | queryParams: <BankAccountConfigI & PageQueryInterface>{}, |
| | | page: <PagesInterface>{ |
| | | pageSize: 10, |
| | | total: 0, |
| | | currentPage: 1, |
| | | }, |
| | | selectionList: [], |
| | | }) |
| | | const { queryParams, form, page, selectionList } = toRefs(data); |
| | | const option = ref({ |
| | | pageKey: 'BankAccountConfig', |
| | | rowKey: 'id', |
| | | addBtn: false, |
| | | editBtn: false, |
| | | searchSpan: 5, |
| | | labelWidth: 150, |
| | | searchLabelWidth: 120, |
| | | column: { |
| | | // id: { |
| | | // label: 'ID', |
| | | // }, |
| | | // customerId: { |
| | | // label: '客户ID', |
| | | // rules: [ |
| | | // { |
| | | // required: true, |
| | | // message: "客户ID不能为空", trigger: "blur" |
| | | // } |
| | | // ], |
| | | // }, |
| | | customerName: { |
| | | label: '客户名称', |
| | | minWidth: 120, |
| | | search: true, |
| | | rules: [ |
| | | { |
| | | required: true, |
| | | message: "客户名称不能为空", trigger: "blur" |
| | | } |
| | | ], |
| | | }, |
| | | selectionList:[], |
| | | }) |
| | | const {queryParams,form,page,selectionList} = toRefs(data); |
| | | const option = ref({ |
| | | pageKey: 'BankAccountConfig', |
| | | rowKey: 'id', |
| | | column: { |
| | | id: { |
| | | label: 'ID', |
| | | }, |
| | | customerId: { |
| | | label: '客户ID', |
| | | rules: [ |
| | | { |
| | | required: true, |
| | | message: "客户ID不能为空", trigger: "blur" } |
| | | ], }, |
| | | customerName: { |
| | | label: '客户名称', |
| | | rules: [ |
| | | { |
| | | required: true, |
| | | message: "客户名称不能为空", trigger: "blur" } |
| | | ], }, |
| | | accountNo: { |
| | | label: '账号编号', |
| | | rules: [ |
| | | { |
| | | required: true, |
| | | message: "账号编号不能为空", trigger: "blur" } |
| | | ], }, |
| | | accountName: { |
| | | label: '户名', |
| | | rules: [ |
| | | { |
| | | required: true, |
| | | message: "户名不能为空", trigger: "blur" } |
| | | ], }, |
| | | bankName: { |
| | | label: '银行名称', |
| | | rules: [ |
| | | { |
| | | required: true, |
| | | message: "银行名称不能为空", trigger: "blur" } |
| | | ], }, |
| | | branchName: { |
| | | label: '支行名称', |
| | | }, |
| | | accountType: { |
| | | label: '账号类型(corporate:对公账户;personal:个人账户;collection:收款账户;payment:付款账户)', |
| | | }, |
| | | currency: { |
| | | label: '币种', |
| | | }, |
| | | status: { |
| | | label: '状态(normal:正常;frozen:冻结;cancelled:注销;abnormal:异常)', |
| | | }, |
| | | accountNumber: { |
| | | label: '银行账号', |
| | | }, |
| | | openingDate: { |
| | | label: '开户日期', |
| | | }, |
| | | bankCode: { |
| | | label: '银行行号', |
| | | }, |
| | | remark: { |
| | | label: '备注', |
| | | type: 'textarea', minRows: 3, maxRows: 5, |
| | | }, |
| | | isDefault: { |
| | | label: '是否默认账户(0:否;1:是)', |
| | | }, |
| | | createBy: { |
| | | label: '创建人', |
| | | }, |
| | | updateBy: { |
| | | label: '更新人', |
| | | }, |
| | | createTime: { |
| | | label: '创建时间', |
| | | }, |
| | | updateTime: { |
| | | label: '更新时间', |
| | | }, |
| | | deleted: { |
| | | label: '删除标记(0:正常;1:删除)', |
| | | }, |
| | | } |
| | | }) |
| | | accountNo: { |
| | | label: '账号编号', |
| | | minWidth: 180, |
| | | search: true, |
| | | rules: [ |
| | | { |
| | | required: true, |
| | | message: "账号编号不能为空", trigger: "blur" |
| | | } |
| | | ], |
| | | }, |
| | | accountName: { |
| | | label: '户名', |
| | | minWidth: 120, |
| | | search: true, |
| | | rules: [ |
| | | { |
| | | required: true, |
| | | message: "户名不能为空", trigger: "blur" |
| | | } |
| | | ], |
| | | }, |
| | | bankName: { |
| | | label: '银行名称', |
| | | minWidth: 140, |
| | | rules: [ |
| | | { |
| | | required: true, |
| | | message: "银行名称不能为空", trigger: "blur" |
| | | } |
| | | ], |
| | | }, |
| | | branchName: { |
| | | label: '支行名称', |
| | | minWidth: 180, |
| | | }, |
| | | |
| | | const { tableData,pageF,rowSave,rowUpdate,rowDel,beforeOpen,searchChange, |
| | | searchReset,selectionChange,onLoad,currentChange,sizeChange,handleDelete,handleExport,handleUpdate,refreshChange} = usePagePlus({ |
| | | form:form, |
| | | option:option, |
| | | queryParams:queryParams, |
| | | idKey:'id', |
| | | page:page.value, |
| | | getListApi:listBankAccountConfig, |
| | | getDetailApi:getBankAccountConfig, |
| | | exportApi:exportBankAccountConfig, |
| | | deleteApi:delBankAccountConfig, |
| | | addApi:addBankAccountConfig, |
| | | updateApi:updateBankAccountConfig, |
| | | handleUpdateFunc:()=>{ |
| | | accountType: { |
| | | label: '账号类型', |
| | | search: true, |
| | | minWidth: 120, |
| | | dataType: 'string', |
| | | type: 'select', |
| | | // addDisplay: false, // 新增时不显示 |
| | | // editDisplay: false, // 修改时不显示 |
| | | viewDisplay: false, |
| | | dicUrl: '/system/dict/data/type/sys_account_type', |
| | | }, |
| | | accountTypeData: { |
| | | label: '账号类型', |
| | | minWidth: 120, |
| | | addDisplay: false, // 新增时不显示 |
| | | editDisplay: false, // 修改时不显示 |
| | | viewDisplay: true, |
| | | }, |
| | | currency: { |
| | | label: '币种', |
| | | search: true, |
| | | minWidth: 120, |
| | | dataType: 'string', |
| | | type: 'select', |
| | | // addDisplay: false, // 新增时不显示 |
| | | // editDisplay: false, // 修改时不显示 |
| | | viewDisplay: false, |
| | | dicUrl: '/system/dict/data/type/sys_currency', |
| | | }, |
| | | currencyData: { |
| | | label: '币种', |
| | | minWidth: 120, |
| | | addDisplay: false, // 新增时不显示 |
| | | editDisplay: false, // 修改时不显示 |
| | | viewDisplay: true, |
| | | |
| | | }, |
| | | status: { |
| | | label: '账户状态', |
| | | search: true, |
| | | minWidth: 120, |
| | | dataType: 'string', |
| | | type: 'select', |
| | | // addDisplay: false, // 新增时不显示 |
| | | // editDisplay: false, // 修改时不显示 |
| | | viewDisplay: false, |
| | | dicUrl: '/system/dict/data/type/sys_bank_type', |
| | | |
| | | }, |
| | | statusData: { |
| | | label: '账户状态', |
| | | minWidth: 120, |
| | | addDisplay: false, // 新增时不显示 |
| | | editDisplay: false, // 修改时不显示 |
| | | viewDisplay: true, |
| | | } |
| | | // accountNumber: { |
| | | // label: '银行账号', |
| | | // }, |
| | | // openingDate: { |
| | | // label: '开户日期', |
| | | // }, |
| | | // bankCode: { |
| | | // label: '银行行号', |
| | | // }, |
| | | // remark: { |
| | | // label: '备注', |
| | | // type: 'textarea', minRows: 3, maxRows: 5, |
| | | // }, |
| | | // isDefault: { |
| | | // label: '是否默认账户(0:否;1:是)', |
| | | // }, |
| | | // createBy: { |
| | | // label: '创建人', |
| | | // }, |
| | | // updateBy: { |
| | | // label: '更新人', |
| | | // }, |
| | | // createTime: { |
| | | // label: '创建时间', |
| | | // }, |
| | | // updateTime: { |
| | | // label: '更新时间', |
| | | // }, |
| | | // deleted: { |
| | | // label: '删除标记(0:正常;1:删除)', |
| | | // }, |
| | | } |
| | | }) |
| | | |
| | | const { tableData, pageF, rowSave, rowUpdate, rowDel, beforeOpen, searchChange, |
| | | searchReset, selectionChange, onLoad, currentChange, sizeChange, handleDelete, handleExport, handleUpdate, refreshChange } = usePagePlus({ |
| | | form: form, |
| | | option: option, |
| | | queryParams: queryParams, |
| | | idKey: 'id', |
| | | page: page.value, |
| | | getListApi: listBankAccountConfig, |
| | | getDetailApi: getBankAccountConfig, |
| | | exportApi: exportBankAccountConfig, |
| | | deleteApi: delBankAccountConfig, |
| | | addApi: addBankAccountConfig, |
| | | updateApi: updateBankAccountConfig, |
| | | handleUpdateFunc: () => { |
| | | crudRef.value.rowEdit(selectionList.value[0]); |
| | | }, |
| | | handleSelectionChangeFunc:(selection:any)=>{ |
| | | handleSelectionChangeFunc: (selection: any) => { |
| | | selectionList.value = selection; |
| | | } |
| | | }) |
| | | }, |
| | | handleEndOpenFunc: (data, obj) => { |
| | | if (data == 'view') { |
| | | nextTick(() => { |
| | | // 强制将 row 的原始数据(包含'pc') 重新灌入表单 |
| | | // 这能解决你打印信息中最后出现的 {} 置空问题 |
| | | Object.assign(form.value, obj.data); |
| | | form.value.accountTypeData = dictFormat(sys_account_type.value, form.value.accountType); |
| | | form.value.currencyData = dictFormat(sys_currency.value, form.value.currency); |
| | | form.value.statusData = dictFormat(sys_bank_type.value, form.value.status); |
| | | |
| | | }); |
| | | } |
| | | |
| | | |
| | | }, |
| | | }) |
| | | const invoiceFormRef = ref(); |
| | | const handleAdd = () => { |
| | | invoiceFormRef.value.openDialog(''); |
| | | }; |
| | | |
| | | const handleFormSubmit = (data: any) => { |
| | | if (data.id !== '') { |
| | | console.log(1); |
| | | |
| | | updateBankAccountConfig(data).then((res) => { |
| | | if (res.code == 200) { |
| | | proxy.$message.success(res.msg); |
| | | invoiceFormRef.value.handleClose(); |
| | | onLoad(page.value) |
| | | } |
| | | }); |
| | | } else { |
| | | console.log(2); |
| | | addBankAccountConfig(data).then((res) => { |
| | | if (res.code == 200) { |
| | | proxy.$message.success(res.msg); |
| | | invoiceFormRef.value.handleClose(); |
| | | onLoad(page.value) |
| | | } |
| | | }); |
| | | } |
| | | |
| | | |
| | | }; |
| | | const handleFy = (row: any) => { |
| | | getBankAccountConfig(row.id).then((res) => { |
| | | if (res.code == 200) { |
| | | invoiceFormRef.value.openDialog(res.data); |
| | | } |
| | | }); |
| | | }; |
| | | |
| | | </script> |