销售结算
This commit is contained in:
‘huanghaiixia’
193
src/components/common/measureListModal.vue
Normal file
193
src/components/common/measureListModal.vue
Normal file
@ -0,0 +1,193 @@
|
||||
<template>
|
||||
<div>
|
||||
<BasicModal v-bind="$attrs" @register="registerModal" width="60%" :title="getTitle" @ok="handleSubmit"
|
||||
@visible-change="handleVisibleChange" >
|
||||
<div class="box">
|
||||
<a-checkbox class="checkItem" v-model:checked="checked" @change="checkChange">仅显示未结算</a-checkbox>
|
||||
<BasicTable @register="registerTable" class="measureListModal">
|
||||
<template #bodyCell="{ column, record, index }">
|
||||
<template v-if="column.dataIndex === 'settledSign'">
|
||||
{{ Number(record.settledSign) == 1 ? '已结算': '未结算' }}
|
||||
</template>
|
||||
</template>
|
||||
<template v-if="column.dataIndex === 'file'">
|
||||
<div v-for="item in (record.lngFileUploadList )" class="fileCSS">
|
||||
<a @click="handleDownload(item)">{{item.fileOrg}}</a>
|
||||
</div>
|
||||
</template>
|
||||
</BasicTable>
|
||||
</div>
|
||||
</BasicModal>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, computed, unref, nextTick, watch } from 'vue';
|
||||
import { BasicModal, useModalInner, useModal } from '/@/components/Modal';
|
||||
import { BasicForm, useForm } from '/@/components/Form/index';
|
||||
import { BasicTable, useTable, FormSchema, BasicColumn, TableAction } from '/@/components/Table';
|
||||
import { useMessage } from '/@/hooks/web/useMessage';
|
||||
import { useI18n } from '/@/hooks/web/useI18n';
|
||||
import { getLngPngSettleHdrPageAdd} from '/@/api/dayPlan/PngSettleHdr';
|
||||
import { parseDownloadUrl} from '/@/api/system/file';
|
||||
import { downloadByUrl } from '/@/utils/file/download';
|
||||
import { DataFormat, FormatOption, DATE_FORMAT, FormatType } from '/@/utils/dataFormat';
|
||||
|
||||
const { t } = useI18n();
|
||||
const checked = ref(false)
|
||||
const codeFormSchema: FormSchema[] = [
|
||||
{
|
||||
field: 'datePlan',
|
||||
label: '计划日期',
|
||||
component: 'RangePicker',
|
||||
componentProps: {
|
||||
format: 'YYYY-MM-DD',
|
||||
style: { width: '100%' },
|
||||
getPopupContainer: () => document.body,
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const columns: BasicColumn[] = [
|
||||
{ dataIndex: 'datePlan', title: '计划日期', align: 'left', width: 100},
|
||||
{ dataIndex: 'dateMea', title: '计量日期', align: 'left',width: 100},
|
||||
{ dataIndex: 'cuSname', title: '客户', align: 'left', },
|
||||
{ dataIndex: 'pointDelyName', title: '下载点', align: 'left',},
|
||||
{ dataIndex: 'comName', title: '交易主体', align: 'left',},
|
||||
{ dataIndex: 'qtyMeaGj', title: '完成量(吉焦)', align: 'left',width: 120},
|
||||
{ dataIndex: 'qtyMeaM3', title: '完成量(方)', align: 'left',width: 120},
|
||||
{ dataIndex: 'rateM3Gj', title: '比值(方/吉焦)', align: 'left',width: 120},
|
||||
{ dataIndex: 'ksName', title: '销售合同', align: 'left',},
|
||||
{ dataIndex: 'file', title: '附件', align: 'left',},
|
||||
{ dataIndex: 'settledSign', title: '已结算', align: 'left',width: 100},
|
||||
];
|
||||
|
||||
const emit = defineEmits(['success', 'register']);
|
||||
|
||||
const { notification } = useMessage();
|
||||
const isUpdate = ref(true);
|
||||
const rowId = ref('');
|
||||
const selectedKeys = ref<string[]>([]);
|
||||
const selectedValues = ref([]);
|
||||
const props = defineProps({
|
||||
selectType: { type: String, default: 'checkbox' },
|
||||
|
||||
});
|
||||
const tableData = ref([])
|
||||
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
|
||||
|
||||
setModalProps({ confirmLoading: false });
|
||||
|
||||
isUpdate.value = !!data?.isUpdate;
|
||||
});
|
||||
|
||||
const [registerTable, { getDataSource, setTableData, updateTableDataRecord, reload }] = useTable({
|
||||
title: t('待结算记录'),
|
||||
api: getLngPngSettleHdrPageAdd,
|
||||
columns,
|
||||
|
||||
bordered: true,
|
||||
pagination: true,
|
||||
canResize: false,
|
||||
formConfig: {
|
||||
labelCol:{span: 12},
|
||||
schemas: codeFormSchema,
|
||||
fieldMapToTime: [['datePlan', ['startDate', 'endDate'], 'YYYY-MM-DD']],
|
||||
showResetButton: true,
|
||||
},
|
||||
immediate: false, // 设置为不立即调用
|
||||
beforeFetch: (params) => {
|
||||
return { ...params,page:params.limit};
|
||||
},
|
||||
afterFetch: (res) => {
|
||||
tableData.value = res || []
|
||||
},
|
||||
rowSelection: {
|
||||
type: props.selectType,
|
||||
onChange: onSelectChange
|
||||
},
|
||||
});
|
||||
watch(
|
||||
() => tableData.value,
|
||||
(val) => {
|
||||
if (val) {
|
||||
let arr = DataFormat.format(val, [
|
||||
FormatOption.createQty('qtyMeaGj'),
|
||||
FormatOption.createQty('qtyMeaM3'),
|
||||
]);
|
||||
if (arr.length) {
|
||||
setTableData(arr)
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
deep: true,
|
||||
}
|
||||
);
|
||||
const handleVisibleChange = (visible: boolean) => {
|
||||
if (visible) {
|
||||
nextTick(() => {
|
||||
reload();
|
||||
});
|
||||
}
|
||||
};
|
||||
const checkChange = (val) => {
|
||||
reload({ searchInfo: { settledSign: checked.value ? 0 : null } });
|
||||
}
|
||||
const handleDownload = (info) => {
|
||||
const url = parseDownloadUrl(info.response ? info.response.data.fileUrl : info.fileUrl);
|
||||
const fileName = info.response ? info.response.data.fileOrg : info.fileOrg;
|
||||
downloadByUrl({ url, fileName: fileName});
|
||||
};
|
||||
function onSelectChange(rowKeys: string[], e) {
|
||||
selectedKeys.value = rowKeys;
|
||||
selectedValues.value = e
|
||||
}
|
||||
const getTitle = computed(() => (!unref(isUpdate) ? t('待结算记录') : t('')));
|
||||
|
||||
async function handleSubmit() {
|
||||
if (!selectedValues.value.length) {
|
||||
notification.warning({
|
||||
message: t('提示'),
|
||||
description: t('请选择数据')
|
||||
});
|
||||
return
|
||||
}
|
||||
closeModal();
|
||||
emit('success', selectedValues.value);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
<style >
|
||||
.measureListModal .basicCol{
|
||||
position: inherit !important;
|
||||
top: 0;
|
||||
}
|
||||
.measureListModal .ant-col-8 {
|
||||
width: 450px !important;
|
||||
max-width: 450px !important;;
|
||||
}
|
||||
</style>
|
||||
<style lang="less" scoped>
|
||||
.box {
|
||||
position: relative;
|
||||
}
|
||||
.checkItem {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
left: 17px;
|
||||
z-index: 104;
|
||||
}
|
||||
.fileCSS a{
|
||||
width: 100%;
|
||||
white-space: normal;
|
||||
word-wrap: break-word;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
</style>
|
||||
92
src/components/common/priceComposeListModal.vue
Normal file
92
src/components/common/priceComposeListModal.vue
Normal file
@ -0,0 +1,92 @@
|
||||
<template>
|
||||
<div>
|
||||
<BasicModal v-bind="$attrs" @register="registerModal" width="60%" :title="getTitle" @ok="handleSubmit">
|
||||
<a-table :columns="columns" :data-source="tableData" :scroll="{x: 300}" :pagination="false">
|
||||
<template #bodyCell="{ column, record, index }">
|
||||
<template v-if="column.dataIndex === 'qtySettleGj'">
|
||||
<a-input-number v-model:value="record.qtySettleGj" :min="0" :precision="3" @change="numChange('qtySettleGj', record, index)" style="width: 100%" />
|
||||
</template>
|
||||
<template v-if="column.dataIndex === 'qtySettleM3'">
|
||||
<a-input-number v-model:value="record.qtySettleM3" :min="0" :precision="3" @change="numChange('qtySettleM3', record, index)" style="width: 100%" />
|
||||
</template>
|
||||
<template v-if="column.dataIndex === 'priceM3'">
|
||||
<a-input-number v-model:value="record.priceM3" :min="0" :precision="4" @change="numChange('priceM3', record, index)" style="width: 100%" />
|
||||
</template>
|
||||
<template v-if="column.dataIndex === 'priceGj'">
|
||||
<a-input-number v-model:value="record.priceGj" :min="0" :precision="4" @change="numChange('priceGj', record, index)" style="width: 100%" />
|
||||
</template>
|
||||
<template v-if="column.dataIndex === 'amount'">
|
||||
<a-input-number v-model:value="record.amount" :min="0" :precision="2" @change="numChange('amount', record, index)" style="width: 100%" />
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
</BasicModal>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, computed, unref, nextTick } from 'vue';
|
||||
import { BasicModal, useModalInner, useModal } from '/@/components/Modal';
|
||||
import { useMessage } from '/@/hooks/web/useMessage';
|
||||
import { useI18n } from '/@/hooks/web/useI18n';
|
||||
|
||||
const { t } = useI18n();
|
||||
const tableData = ref([
|
||||
{priceDesc: '基础量300000方'},
|
||||
{priceDesc: '增量'}
|
||||
])
|
||||
const curRecord = ref({})
|
||||
const columns= [
|
||||
{ title: t('序号'), dataIndex: 'index', key: 'index', customRender: (column) => `${column.index + 1}` ,width: 80},
|
||||
{ title: t('价格描述'), dataIndex: 'priceDesc', width:130},
|
||||
{ title: t('数量(吉焦)'), dataIndex: 'qtySettleGj', width: 120},
|
||||
{ title: t('数量(方)'), dataIndex: 'qtySettleM3', width: 120},
|
||||
{ title: t('价格(元/方)'), dataIndex: 'priceM3', width: 120},
|
||||
{ title: t('价格(元/吉焦)'), dataIndex: 'priceGj', width: 120},
|
||||
{ title: t('金额(元)'), dataIndex: 'amount', width: 120},
|
||||
];
|
||||
|
||||
const emit = defineEmits(['success', 'register']);
|
||||
|
||||
const { notification } = useMessage();
|
||||
const isUpdate = ref(true);
|
||||
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
|
||||
|
||||
setModalProps({ confirmLoading: false });
|
||||
curRecord.value = data.record || {}
|
||||
isUpdate.value = !!data?.isUpdate;
|
||||
});
|
||||
|
||||
const getTitle = computed(() => (!unref(isUpdate) ? t('价格组成') : t('')));
|
||||
const numChange = (k, record, idx) => {
|
||||
if (curRecord.value.uomCode == 'M3') {
|
||||
if (k=='amount') {
|
||||
return
|
||||
}
|
||||
record.amount = ((Number(record.qtySettleM3) || 0) * (Number(record.priceM3) || 0)).toFixed(2)
|
||||
}
|
||||
if (curRecord.value.uomCode == 'GJ') {
|
||||
if (k=='amount') {
|
||||
return
|
||||
}
|
||||
record.amount = ((Number(record.qtySettleGj) || 0) * (Number(record.priceGj) || 0)).toFixed(2)
|
||||
}
|
||||
// if (curRecord.value.uomCode == 'TON') {
|
||||
|
||||
// }
|
||||
}
|
||||
async function handleSubmit() {
|
||||
closeModal();
|
||||
emit('success', tableData.value, curRecord.value);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
<style >
|
||||
</style>
|
||||
<style lang="less" scoped>
|
||||
</style>
|
||||
Reference in New Issue
Block a user