lijingjia
/
ds-wms-client-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

费用模版

Browse Source
szh-new
lijingjia 6 months ago
parent fb7091dcfd
commit 1e13c0d390
1 changed files with 147 additions and 437 deletions
Show Stats Download Patch File Download Diff File

584
src/views/fee/template/components/feeField.vue
Unescape Escape View File

@ -19,324 +19,31 @@
</a-popconfirm>
</div>
</div>
<BasicTable ref="dsTable" :rowSelection="{ type: 'checkbox' }" :clickToRowSelect="false" @register="registerTable" @row-click="clickRow">
<template #bodyCell="{ column, record }">
<!-- 费用名称 -->
<a-select
v-if="column.key === 'feeName'"
v-model:value="record.feeCode"
placeholder="请选择"
@change="feeNameChange($event, record)"
>
<a-select-option
v-for="item in feeNameDict"
:value="item.code"
:key="item.id"
>
{{ item.name }}
</a-select-option>
</a-select>
<!-- 费用英文名称 -->
<a-input v-else-if="column.key === 'feeEnName'" v-model:value="record.feeEnName" placeholder="请输入" />
<!-- 结算对象类型 -->
<a-select
v-else-if="column.key === 'customerType'"
v-model:value="record.customerType"
placeholder="请选择"
@inputKeyDown="handleKeyDown"
@change="customerTypeChange($event, record)"
>
<a-select-option
v-for="item in customerTypeDict"
:value="item.value"
:key="item.value"
>
{{ item.label }}
</a-select-option>
</a-select>
<!-- 结算对象 -->
<a-select
v-else-if="column.key === 'customerName'"
v-model:value="record.customerName"
@inputKeyDown="handleKeyDown"
placeholder="请选择"
>
<a-select-option
v-for="item in companyDict"
:value="item.value"
:key="item.value"
>
{{ item.label }}
</a-select-option>
</a-select>
<!-- 标准 -->
<a-select
v-else-if="column.key === 'unit'"
v-model:value="record.unit"
@inputKeyDown="handleKeyDown"
placeholder="请选择"
>
<a-select-option
v-for="item in unitDict"
:value="item.value"
:key="item.value"
>
{{ item.label }}
</a-select-option>
</a-select>
<!-- 是否箱形 -->
<a-select
v-else-if="column.key === 'isCtn'"
v-model:value="record.isCtn"
placeholder="请选择"
>
<a-select-option :value="1">是</a-select-option>
<a-select-option :value="0">否</a-select-option>
</a-select>
<!-- 币别 -->
<a-select
v-else-if="column.key === 'currency'"
v-model:value="record.currency"
@inputKeyDown="handleKeyDown"
placeholder="请选择"
>
<a-select-option
v-for="item in currencyDict"
:value="item.codeName"
:key="item.codeName"
>
{{ item.name }}
</a-select-option>
</a-select>
<!-- 不含税单价 -->
<a-input-number
v-else-if="column.key === 'unitPrice'"
placeholder="请输入"
v-model:value="record.unitPrice"
:min="0"
:precision="2"
@blur="calcAmount(record, 'price')"
/>
<!-- 汇率 -->
<a-input-number
v-else-if="column.key === 'exchangeRate'"
placeholder="请输入"
v-model:value="record.exchangeRate"
:min="0"
:precision="2"
/>
<!-- 税率 -->
<a-input-number
v-else-if="column.key === 'taxRate'"
placeholder="请输入"
v-model:value="record.taxRate"
@blur="calcAmount(record, 'tax')"
:min="0"
:max="100"
:precision="2"
/>
<!-- 含税单价 -->
<a-input-number
v-else-if="column.key === 'taxUnitPrice'"
placeholder="请输入"
v-model:value="record.taxUnitPrice"
:min="0"
:precision="2"
@blur="calcAmount(record, 'taxPrice')"
/>
<!-- 税额 -->
<a-input-number
v-else-if="column.key === 'tax'"
placeholder="请输入"
v-model:value="record.tax"
:min="0"
:precision="2"
/>
<!-- 财务税率 -->
<a-input-number
v-else-if="column.key === 'accTaxRate'"
placeholder="请输入"
v-model:value="record.accTaxRate"
:min="0"
:precision="2"
/>
<!-- FRT -->
<a-select
v-else-if="column.key === 'feeFrt'"
v-model:value="record.feeFrt"
placeholder="请选择"
>
<a-select-option value="PP">PP</a-select-option>
<a-select-option value="CC">CC</a-select-option>
</a-select>
<!-- 是否开发票 -->
<a-switch v-else-if="column.key === 'isInvoice'" v-model:checked="record.isInvoice" checked-children="是" un-checked-children="否" />
<!-- 排序 -->
<a-input-number
v-else-if="column.key === 'orderNo'"
placeholder="请输入"
v-model:value="record.orderNo"
:min="0"
:precision="0"
/>
<!-- 备注 -->
<a-input
v-else-if="column.key === 'note'"
placeholder="请输入"
v-model:value="record.note"
/>
<!-- 费用分组 -->
<a-select
v-else-if="column.key === 'feeGroup'"
v-model:value="record.feeGroup"
placeholder="请选择"
>
<a-select-option
v-for="item in grouping"
:value="item.value"
:key="item.value"
>
{{ item.label }}
</a-select-option>
</a-select>
</template>
</BasicTable>
<hot-table ref="hotTb" :data="list" :settings="settings">
</hot-table>
</div>
</template>
<script lang="ts" setup>
import { ref, onMounted, defineProps, watch, nextTick } from 'vue'
import { ref, onMounted, defineProps, watch, nextTick, defineComponent } from 'vue'
// 下拉框数据接口
import { GetFeeCodeSelectList, GetClientListByCode, GetFeeCurrencySelectList } from '/@/api/common'
import { GetFeeTemplateDetailList, BatchDelFeeTemplateDetail } from '../api'
// 引入字典数据
import { getDictOption } from '/@/utils/dictUtil'
import { BasicTable, useTable } from '/@/components/Table'
import { useMessage } from '/@/hooks/web/useMessage'
import { HotTable, HotColumn } from '@handsontable/vue3'
import { registerAllModules } from 'handsontable/registry'
import 'handsontable/dist/handsontable.full.min.css'
defineComponent({
HotTable, HotColumn
})
registerAllModules();
const { createMessage, notification } = useMessage()
const props = defineProps({
id: {
type: String
}
})
const [registerTable, { reload, setShowPagination, getDataSource, insertTableDataRecord, deleteTableDataRecord, getPaginationRef, getSelectRows }] = useTable({
api: async (p) => {
setShowPagination(false)
if (props.id) {
const res: API.DataResult = await GetFeeTemplateDetailList(p)
return new Promise((resolve) => {
resolve({ data: [...res.data], total: res.count })
})
} else {
return new Promise((resolve) => {
resolve({ data: [] })
})
}
},
immediate: false,
beforeFetch: () => {
var currentPageInfo: any = getPaginationRef()
const postParam: API.PageRequest = {
queryCondition: '',
pageCondition: {
pageIndex: currentPageInfo.current,
pageSize: 100,
sortConditions: [],
}
}
let condition: API.ConditionItem[] = []
condition.push({
FieldName: 'TemplateId',
FieldValue: props.id,
ConditionalType: 1,
})
postParam.queryCondition = JSON.stringify(condition)
return postParam
},
columns: [
{
title: '费用名称',
dataIndex: 'feeName',
width: 120
}, {
title: '费用英文名称',
dataIndex: 'feeEnName',
width: 120
}, {
title: '结算对象类型',
dataIndex: 'customerType',
width: 140
}, {
title: '结算对象',
dataIndex: 'customerName',
width: 120
}, {
title: '标准',
dataIndex: 'unit',
width: 120
}, {
title: '是否箱形',
dataIndex: 'isCtn',
width: 120
}, {
title: '币别',
dataIndex: 'currency',
width: 120
}, {
title: '不含税单价',
dataIndex: 'unitPrice',
width: 120
}, {
title: '汇率',
dataIndex: 'exchangeRate',
width: 120
}, {
title: '税率(%)',
dataIndex: 'taxRate',
width: 120
}, {
title: '含税单价',
dataIndex: 'taxUnitPrice',
width: 120
}, {
title: '税额',
dataIndex: 'tax',
width: 120
}, {
title: '财务税率',
dataIndex: 'accTaxRate',
width: 120
}, {
title: 'FRT',
dataIndex: 'feeFrt',
width: 120
}, {
title: '是否开发票',
dataIndex: 'isInvoice',
width: 120
}, {
title: '排序',
dataIndex: 'orderNo',
width: 120
}, {
title: '核算单位',
dataIndex: 'saleOrgId',
width: 120
}, {
title: '备注',
dataIndex: 'note',
width: 120
}, {
title: '费用分组',
dataIndex: 'feeGroup',
width: 120
}
],
isTreeTable: false,
striped: true,
bordered: true,
showIndexColumn: false,
canResize: false,
})
// 费用名称字典
const feeNameDict = ref([])
// 币别字典
@ -347,133 +54,27 @@
let grouping = []
// 标准字典
let unitDict = []
const findDirectParentTd = (tdElement) => {
var current = tdElement;
while (current.parentNode) {
if (current.parentNode.tagName.toLowerCase() === 'td') {
// 发现了一个<td>的父元素，返回它
return current.parentNode;
}
current = current.parentNode; // 继续向上查找
}
// 如果没有找到<td>的父元素，返回null
return null;
}
nextTick(() => {
console.log(11111)
})
const clickRow = (r, i, e) => {
const td = findDirectParentTd(e.target)
console.log(td)
td.classList.add('active-td')
}
const dsTable = ref()
// 表格数据
const list = ref([])
// 全部勾选
const allCheck = ref(false)
// 部分勾选
const someCheck = ref(false)
// tableDom
const hotTb = ref(null)
onMounted(() => {
document.onkeydown = (event) => {
console.log(event)
const curel = document.activeElement
const td = findDirectParentTd(curel)
const tdIndex = td.cellIndex
const tr = td?.parentNode
const trIndex = tr.sectionRowIndex
const tbody = tr.parentNode
console.log(tbody)
if (event.keyCode == 39) {
event.preventDefault()
if (tdIndex + 1 == curel.parentElement.children.length) {
return
} else {
const input = td.parentElement.children[tdIndex + 1].querySelector('.ant-input')
const select = td.parentElement.children[tdIndex + 1].querySelector('.ant-select-selection-search-input')
const swit = td.parentElement.children[tdIndex + 1].querySelector('.ant-switch')
const number = td.parentElement.children[tdIndex + 1].querySelector('.ant-input-number-input')
if (input) {
input.focus()
}
if (select) {
select.focus()
}
if (swit) {
swit.focus()
}
if (number) {
number.focus()
}
}
// console.log(td.parentElement.children[tdIndex + 1].querySelector('.ant-select-selection-search-input').focus())
// curel.parentElement.children[curcellIndex + 1].focus();
} else if (event.keyCode == 37) {
event.preventDefault()
if (tdIndex == 0) {
return
} else {
const input = td.parentElement.children[tdIndex - 1].querySelector('.ant-input')
const select = td.parentElement.children[tdIndex - 1].querySelector('.ant-select-selection-search-input')
const number = td.parentElement.children[tdIndex - 1].querySelector('.ant-input-number-input')
if (input) {
input.focus()
}
if (select) {
select.focus()
}
if (number) {
number.focus()
}
// td.parentElement.children[tdIndex - 1].querySelector('.ant-input').focus()
}
} else if (event.keyCode == 40) {
if (trIndex + 1 == tbody.length) {
return
} else {
const input = tbody.children[trIndex + 1].children[tdIndex].querySelector('.ant-input')
const select = tbody.children[trIndex + 1].children[tdIndex].querySelector('.ant-select-selection-search-input')
const number = tbody.children[trIndex + 1].children[tdIndex].querySelector('.ant-input-number-input')
if (input) {
input.focus()
}
if (select) {
select.focus()
}
if (number) {
number.focus()
}
}
} else if (event.keyCode == 38) {
if (trIndex == 1) {
return
} else {
const input = tbody.children[trIndex - 1].children[tdIndex].querySelector('.ant-input')
const select = tbody.children[trIndex - 1].children[tdIndex].querySelector('.ant-select-selection-search-input')
const number = tbody.children[trIndex - 1].children[tdIndex].querySelector('.ant-input-number-input')
if (input) {
input.focus()
}
if (select) {
select.focus()
}
if (number) {
number.focus()
}
}
}
}
// 初始化方法
init()
})
watch(() => props.id,
() => {
reload()
}
)
// 页面初始化
const init = async () => {
const list = await GetFeeCodeSelectList()
feeNameDict.value = list.data
const currency = await GetFeeCurrencySelectList()
currencyDict.value = currency.data
customerTypeDict = await getDictOption('djy_cust_prop')
unitDict = await getDictOption('fee_unit')
grouping = await getDictOption('cost_grouping')
// const list = await GetFeeCodeSelectList()
// feeNameDict.value = list.data
// const currency = await GetFeeCurrencySelectList()
// currencyDict.value = currency.data
// customerTypeDict = await getDictOption('djy_cust_prop')
// unitDict = await getDictOption('fee_unit')
// grouping = await getDictOption('cost_grouping')
}
// 费用名称改变自动填写费用英文名称
const feeNameChange = (e, record) => {
@ -505,8 +106,7 @@
document.addEventListener
// 添加行
const addRow = () => {
insertTableDataRecord({
key: new Date().getTime(),
list.value.push({
feeFrt: '',
unit: '',
feeCode: '',
@ -517,11 +117,6 @@
customerName: '',
customerType: ''
})
// setTimeout(() => {
// document.addEventListener('click', function(e) {
// console.log(e.target)
// })
// }, 1000)
}
// 删除行
const deleteRow = () => {
@ -563,13 +158,128 @@
row.taxUnitPrice = row.unitPrice || 0 * (1 + Number(row.taxRate || 0 / 100))
}
}
const validate = () => {
return getDataSource()
const settings = {
height: '400',
width: '100%',
autoWrapRow: true,
autoWrapCol: true,
// 每行的高度
rowHeights: 32,
columns: [{
data: 'selected',
type: 'checkbox',
title: ' ',
width: 32,
className: "htCenter",
},{
title: '费用名称',
width: 130,
data: 'feeName',
type: 'dropdown',
// 下拉框数据，可以同步或者异步返回(异步需要process返回)
source: async (query, process) => {
const res = feeNameDict.value.length ? feeNameDict.value : (await GetFeeCodeSelectList())?.data
if (!feeNameDict.value.length) feeNameDict.value = res
const dict = res.map(res => {
return res.name
})
process(dict)
}
}, {
title: '费用英文名称',
width: 130,
data: 'feeEnName',
type: 'dropdown',
source: async (query, process) => {
const res = feeNameDict.value.length ? feeNameDict.value : (await GetFeeCodeSelectList())?.data
if (!feeNameDict.value.length) feeNameDict.value = res
const dict = res.map(res => {
return res.enName
})
process(dict)
}
}, {
title: '结算对象类型',
width: 130,
data: 'customerTypeName',
type: 'dropdown',
source: async (query, process) => {
const results = await getDictOption('djy_cust_prop')
const dict = results.map(item => {
return item.name
})
process(dict)
}
}, {
title: '结算对象',
width: 130,
data: 'customerName',
type: 'dropdown',
source: async (query, process) => {
const hot = hotTb.value.hotInstance
const row = hot.getSelected()[0][0]
const rowData = list.value[row]
if (!rowData.customerTypeName) {
notification.error({ message: '请先选择结算对象类型！', duration: 2 })
} else {
const types = await getDictOption('djy_cust_prop')
const dict = types.filter(item => {
console.log(item)
return item.name
})
}
// process(dict)
}
}],
licenseKey: 'non-commercial-and-evaluation',
afterChange(changes, source) {
// 这里定义了编辑，自动填充和拷贝数据的处理逻辑
if (source === 'edit' || source === 'Autofill.fill' || source === 'CopyPaste.paste') {
let dict = {}
changes.forEach(res => {
// 修改费用名称
if (res[1] === 'feeName') {
// 获取当前选中的字典对象数据
const item = feeNameDict.value.filter(item => {
return item.name === changes[0][3]
})
if (item) dict = item[0]
list.value[res[0]]['feeEnName'] = dict['enName']
list.value[res[0]]['feeCode'] = dict['code']
}
})
// 修改费用英文名称
if (changes[0][1] === 'feeEnName') {
}
// 修改客户类别
if (changes[0][1] === 'customerTypeName') {
getDictOption('djy_cust_prop').then(res => {
const item = res.filter(item => {
return item.name === changes[0][3]
})
if (item) dict = item[0]
list.value[changes[0][0]]['customerType'] = dict?.value
GetClientListByCode({ code: dict?.value }).then(res => {
const { data } = res
data.forEach(item => {
item['label'] = item.shortName
item['value'] = item.codeName
})
companyDict.value = data
})
})
}
// 修改结算对象
if (changes[0][1] === 'customerName') {
}
}
}
}
// 导出接口
defineExpose({
validate
})
</script>
<style lang="scss">

Write Preview
Loading…
Cancel
Save