姜旭之 1 year ago
parent
commit
e65f13e5e6
  1. 22
      code/src/Modules/SettleAccount/host/SettleAccount.HttpApi.Host/wwwroot/components/table/index.js
  2. 178
      code/src/Modules/SettleAccount/host/SettleAccount.HttpApi.Host/wwwroot/views/invoice/invoice_map_group.js

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

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

Loading…
Cancel
Save