发票重开页面组件开发

1 year ago · dd652ab54c
2 changed files with 141 additions and 59 deletions
--- a/code/src/Modules/SettleAccount/host/SettleAccount.HttpApi.Host/wwwroot/components/table/index.js
+++ b/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,
--- a/code/src/Modules/SettleAccount/host/SettleAccount.HttpApi.Host/wwwroot/views/invoice/invoice_map_group.js
+++ b/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,
    };
  },
 };