Browse Source

发票重开页面组件开发

master
wanggang 1 year ago
parent
commit
dd652ab54c
  1. 14
      code/src/Modules/SettleAccount/host/SettleAccount.HttpApi.Host/wwwroot/components/table/index.js
  2. 156
      code/src/Modules/SettleAccount/host/SettleAccount.HttpApi.Host/wwwroot/views/invoice/invoice_map_group.js

14
code/src/Modules/SettleAccount/host/SettleAccount.HttpApi.Host/wwwroot/components/table/index.js

@ -17,15 +17,13 @@ export default {
<div class="cell" v-else-if="!item.hidden">{{item.title}}</div>
</div>
</div>
<div v-for="(row,index) in model" class="row">
<template v-for="(val,key) in row">
<div v-for="(row,index) in data" class="row">
<div class="cell el-table__cell" v-for="item in columns">
<div class="cell" style="text-align:center;" v-if="item.input==='selection'">
<input class="el-checkbox__input row" type="checkbox" :value="index" />
<input class="el-checkbox__input row" type="checkbox" :value="index" @click="checkClick" />
</div>
<div class="cell" v-else-if="!item.hidden">{{row[item.dataKey]}}</div>
</div>
</template>
</div>
</div>`,
styles: html`<style>
@ -63,15 +61,21 @@ export default {
if (checkAll.value) {
Array.from(tableRef.value.querySelectorAll("input.row:not(:checked)")).forEach((o) => (o.checked = true));
} else {
Array.from(tableRef.value.querySelectorAll("input.row:checked)")).forEach((o) => (o.checked = false));
Array.from(tableRef.value.querySelectorAll("input.row:checked")).forEach((o) => (o.checked = false));
}
const checkdCount = Array.from(tableRef.value.querySelectorAll("input.row:checked")).length;
checkAllIndeterminate.value = checkdCount > 0 && checkdCount < props.data.length;
};
const checkClick = () => {
const checkdCount = Array.from(tableRef.value.querySelectorAll("input.row:checked")).length;
checkAllIndeterminate.value = checkdCount > 0 && checkdCount < props.data.length;
checkAll.value = checkdCount == props.data.length;
};
return {
model,
tableRef,
checkAll,
checkClick,
checkAllIndeterminate,
checkAllClick,
getSelection,

156
code/src/Modules/SettleAccount/host/SettleAccount.HttpApi.Host/wwwroot/views/invoice/invoice_map_group.js

@ -1,18 +1,19 @@
import AppList from "../../../components/list/index.js";
import AppForm from "../../../components/form/index.js";
import html from "html";
import { reactive, ref } from "vue";
import { reactive, ref, nextTick } from "vue";
import useConfig from "../../../models/invoice/invoice_map_group.js";
import request from "../../../request/index.js";
import AppTable from "../../components/table/index.js";
import { ElMessageBox } from "element-plus";
import { post } from "../../../request/index.js";
import { schemaToModel } from "html";
import { delay } from "../../../utils/index.js";
export default {
components: { AppList, AppForm, AppTable },
template: html`<app-list :config="config" @command="onCommand" />
<el-drawer v-model="drawer" destroy-on-close size="50%" class="page-drawer">
<el-drawer v-model="drawer" destroy-on-close size="50%" class="page-drawer" :close-on-click-modal="false">
<template #header> <span class="el-dialog__title"> 结算明细 </span> </template>
<el-row style="height:calc(100vh - 160px);" v-loading="loading">
<el-col>
@ -49,38 +50,53 @@ export default {
</span>
</template>
</el-drawer>
<el-dialog class="re-open" v-model="dialogVisible" align-center destroy-on-close style="width:50%;height:50%">
<el-dialog
class="re-open"
v-model="dialogVisible"
:close-on-click-modal="false"
align-center
destroy-on-close
style="width:50%;height:80%"
>
<template #header>发票重开</template>
<el-steps :active="setupRef" align-center style="height:60px;">
<el-step title="调整明细列表" />
<el-step title="发票明细对比" />
<el-step title="发票预览" />
</el-steps>
<div v-show="setupRef===1" style="height:100%;">
<el-row style="padding:14px 0;height:60px;">
<el-col>
<el-button type="primary" @click="addAdj">新建</el-button>
<el-button type="primary" @click="importAdj">导入</el-button>
<el-button type="primary" @click="showAddAdjDialog">新建</el-button>
<el-button type="primary" @click="showImportAdjDialog">导入</el-button>
<el-button type="primary" @click="deleteAdj">删除</el-button>
</el-col>
</el-row>
<el-scrollbar>
<el-scrollbar ref="scrollRef">
<el-row style="height:100%;">
<el-col style="height:calc(100% - 180px);">
<app-table ref="adjListRef" :data="adjList" :columns="columns5" />
</el-col>
</el-row>
</el-scrollbar>
</div>
<template #footer>
<span class="dialog-footer">
<el-button type="primary" @click="setupRef-=1" v-if="setupRef>1">上一步</el-button>
</span>
<span class="dialog-footer">
<el-button type="primary" @click="setupRef+=1" v-if="setupRef<3">下一步</el-button>
<el-button type="primary" @click="submitReOpen" v-if="setupRef==3">确定</el-button>
<el-button type="primary" @click="submitReOpen" v-if="setupRef===3">确定</el-button>
</span>
</template>
</el-dialog>
<el-dialog v-model="addDialogVisible" align-center destroy-on-close style="width:380px;height:480px;">
<el-dialog
v-model="addDialogVisible"
align-center
destroy-on-close
:close-on-click-modal="false"
style="width:380px;height:480px;"
>
<template #header>添加调整明细</template>
<el-scrollbar>
<el-row>
@ -91,36 +107,45 @@ export default {
:schema="adjSchema"
v-model="adjModel"
:hideButton="true"
:close-on-click-modal="false"
inline
@submit=""
/>
</el-col>
</el-row>
</el-scrollbar>
<template #footer>
<span class="dialog-footer">
<el-button type="primary" @click="submitAdj">确定</el-button>
<el-button type="primary" @click="addAdj">确定</el-button>
</span>
</template>
</el-dialog>
<el-dialog v-model="importDialogVisible" align-center destroy-on-close style="width:50%;height:50%">
<app-form>
<div>
<el-form-item :label="$t('文件')" label-width="80px">
<el-upload
ref="uploadRef"
class="upload"
drag
accept=".xlsx"
:auto-upload="false"
:on-change="handleChange"
<el-dialog
style="width:380px;height:480px;"
align-center
destroy-on-close
:close-on-click-modal="false"
v-model="importDialogVisible"
>
<el-icon class="el-icon--upload"><ep-upload-filled /></el-icon>
</el-upload>
</el-form-item>
</div>
<el-button type="primary" @click="openImportHandler" style="margin-left: 10px;">确定</el-button>
</app-form>
<template #header>导入调整明细</template>
<el-scrollbar>
<el-row v-loading="loading">
<el-col>
<app-form
ref="importAdjFromRef"
v-if="importDialogVisible&&importAdjModel"
:schema="importAdjSchema"
v-model="importAdjModel"
:hideButton="true"
inline
/>
</el-col>
</el-row>
</el-scrollbar>
<template #footer>
<span class="dialog-footer">
<el-button type="primary" :disabled="loading" @click="importAdj">确定</el-button>
</span>
</template>
</el-dialog>`,
styles: html` <style>
.page-drawer .el-tab-pane {
@ -146,11 +171,6 @@ export default {
</style>`,
setup() {
const fileList = ref([]);
// const load = async () => {};
// const editFormModel = ref(null);
// const editFormMode = ref(null);
// const defaultImportModel = config.import?.schema ? schemaToModel(config.import.schema) : {};
// const importModel = ref(defaultImportModel);
const openImportHandler = async () => {
const url = "settleaccount/vmi/excel-to-json";
const method = "POST";
@ -306,11 +326,12 @@ export default {
});
//
const setupRef = ref(1);
const scrollRef = ref(null);
const adjListRef = ref(null);
const adjList = ref([]);
const showSetupDialog = () => {
adjList.value = [];
for (let i = 0; i < 100; i++) {
for (let i = 0; i < 10; i++) {
adjList.value.push({ invBillNum: i });
}
setupRef.value = 1;
@ -318,8 +339,15 @@ export default {
};
const deleteAdj = () => {
const list = adjListRef.value.getSelection();
list.forEach((o) => adjList.value.splice(o, 1));
if (list.length > 0) {
for (let i = 0; i < list.length; i++) {
adjList.value.splice(list[i] - i, 1);
}
nextTick(() => {
adjListRef.value.clearSelection();
scrollRef.value.update();
});
}
};
const adjSchema = {
type: "object",
@ -361,24 +389,69 @@ export default {
const defaultAdjModel = schemaToModel(adjSchema);
const adjModel = ref(Object.assign({}, defaultAdjModel));
const addAdjFormRef = ref(null);
const addAdj = () => {
const showAddAdjDialog = () => {
adjModel.value = Object.assign({}, defaultAdjModel);
addDialogVisible.value = true;
};
const submitAdj = async () => {
const addAdj = async () => {
try {
const valid = await addAdjFormRef.value.validate();
if (valid) {
adjList.value.unshift(JSON.parse(JSON.stringify(adjModel.value)));
adjList.value.unshift(adjModel.value);
addDialogVisible.value = false;
}
} catch (error) {
console.log(error);
}
};
const importAdj = async () => {
const importAdjFromRef = ref(null);
const importAdjSchema = {
type: "object",
properties: {
files: {
title: "文件",
type: "array",
multiple: true,
input: "file",
accept: ".xlsx",
default: [],
limit: 1,
size: 100 * 1024 * 1024,
rules: [
{
required: true,
trigger: "change",
},
],
},
},
};
const defaultImportAdjModel = schemaToModel(importAdjSchema);
const importAdjModel = ref(defaultImportAdjModel);
const showImportAdjDialog = async () => {
importAdjModel.value = Object.assign({}, defaultImportAdjModel);
importDialogVisible.value = true;
};
const importAdj = async () => {
try {
const valid = await importAdjFromRef.value.validate();
if (valid) {
loading.value = true;
const url = "settleaccount/vmi/excel-to-json";
const formData = new FormData();
formData.append("files", importAdjModel.value.files[0].raw);
const result = await request(url, formData);
if (!result.errors) {
adjList.value = result.data;
importDialogVisible.value = false;
}
}
} catch (error) {
console.log(error);
} finally {
loading.value = false;
}
};
return {
config,
onCommand,
@ -402,12 +475,17 @@ export default {
adjList,
adjListRef,
deleteAdj,
showAddAdjDialog,
addAdj,
submitAdj,
addAdjFormRef,
importAdjFromRef,
adjSchema,
adjModel,
showImportAdjDialog,
importAdjModel,
importAdjSchema,
importAdj,
scrollRef,
};
},
};

Loading…
Cancel
Save