发票重开页面组件开发

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">
+    <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>
-      </template>
+        <div class="cell" v-else-if="!item.hidden">{{row[item.dataKey]}}</div>
+      </div>
     </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,

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>
-      <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-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%">
+    <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>`,
   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) {
-      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 = {
       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,
     };
   },
 };