cloud-web-corejs 1.0.54-dev.798 → 1.0.54-dev.799

package/src/views/demo/bizTab/bill/list.vue

@@ -0,0 +1,288 @@
+<template>
+  <biz-tab-list-page
+    ref="bizTab"
+    :listLabel="$t1('列表')"
+    :titleField="BILL.titleField"
+    :addTitle="$t1('新增')"
+    :behavior="tabBehavior"
+    @refresh-list="searchEvent"
+  >
+    <!-- ===== 列表页签 ===== -->
+    <template #list>
+      <vxe-grid
+        ref="table-m1"
+        v-bind="vxeOption"
+        @resizable-change="$vxeTableUtil.onColumnWitchChange"
+        @custom="$vxeTableUtil.customHandle"
+      >
+        <template #form>
+          <div class="clearfix screen-btns">
+            <div class="fl">
+              <vxe-button
+                status="primary"
+                type="text"
+                plain
+                class="button-sty"
+                icon="el-icon-plus"
+                @click="openAdd"
+                >{{ $t1("新增") }}</vxe-button
+              >
+              <!-- demo 用：现场切换「提交/审批完成后」的页签行为，方便两种效果都看一遍 -->
+              <el-switch
+                v-model="closeAfterWf"
+                class="behavior-switch"
+                :active-text="$t1('提交/通过后关闭页签回列表')"
+              ></el-switch>
+            </div>
+            <div class="fr">
+              <vxe-button
+                icon="el-icon-brush"
+                class="button-sty"
+                type="text"
+                status="primary"
+                plain
+                @click="resetEvent"
+                >{{ $t1("刷新") }}</vxe-button
+              >
+              <vxe-button
+                status="warning"
+                icon="el-icon-search"
+                class="button-sty"
+                @click="searchEvent"
+                >{{ $t1("搜索") }}</vxe-button
+              >
+            </div>
+          </div>
+          <vxe-form
+            ref="form"
+            class="screen-box"
+            title-width="92px"
+            title-align="right"
+            :data="formData"
+            @submit="searchEvent"
+            @reset="resetEvent"
+          >
+            <vxe-form-item :title="$t1('变更单号') + ':'" field="sn">
+              <template v-slot>
+                <el-input v-model="formData.sn" size="small" clearable />
+              </template>
+            </vxe-form-item>
+            <vxe-form-item :title="$t1('变更原因') + ':'" field="remark">
+              <template v-slot>
+                <el-input v-model="formData.remark" size="small" clearable />
+              </template>
+            </vxe-form-item>
+            <vxe-form-item :title="$t1('状态') + ':'" field="status">
+              <template v-slot>
+                <el-select
+                  v-model="formData.status"
+                  size="small"
+                  clearable
+                  @clear="formData.status = null"
+                >
+                  <el-option
+                    v-for="(item, key) in STATUS_MAP"
+                    :key="key"
+                    :label="item.label"
+                    :value="key"
+                  ></el-option>
+                </el-select>
+              </template>
+            </vxe-form-item>
+          </vxe-form>
+        </template>
+
+        <template #sn="{ row, rowIndex }">
+          <a href="javascript:void(0);" class="a-link" @click="openDetail(row, rowIndex)">
+            {{ row.sn }}
+          </a>
+        </template>
+        <template #status="{ row }">
+          <div :class="getStatus(row).cls">{{ getStatus(row).label }}</div>
+        </template>
+        <template #operate="{ row, rowIndex }">
+          <a href="javascript:void(0);" class="a-link" @click="openDetail(row, rowIndex)">
+            <el-tooltip
+              :enterable="false"
+              effect="dark"
+              :content="$t1('查看')"
+              placement="top"
+              popper-class="tooltip-skin"
+              ><i class="el-icon-view"
+            /></el-tooltip>
+          </a>
+        </template>
+      </vxe-grid>
+    </template>
+
+    <!-- ===== 详情页签（新增/查看共用同一个组件） ===== -->
+    <template #detail="{ tab }">
+      <bill-detail :tab="tab" />
+    </template>
+  </biz-tab-list-page>
+</template>
+
+<script>
+/**
+ * demo B：真实单据 + 真实流程。
+ *
+ * 覆盖场景：
+ *   1. 新增、查看详情都开独立页签，同一单据不重复开
+ *   2. 新增页上直接「保存并提交流程」
+ *   3. 提交流程 / 审批通过后按配置关页签回列表刷新（用工具栏开关现场切换）
+ *   4. 审批点「通过」自动保存单据（见 detail.vue 的 wfAgreeBindSave）
+ *   5. 详情头部「上一单/下一单」按列表当时的顺序翻单
+ *
+ * 后台前置条件见 ./billConfig.js 顶部注释；不想吃前置条件看 ../simple/list.vue。
+ * 菜单/路由：@base/views/demo/bizTab/bill/list（本地已在 router/modules/customer.js 注册）
+ */
+import BizTabListPage from "@base/components/bizTab/BizTabListPage.vue";
+import billDetail from "./detail.vue";
+import { BILL, STATUS_MAP } from "./billConfig";
+
+export default {
+  name: "demo_bizTab_bill:list",
+  components: { BizTabListPage, billDetail },
+  data() {
+    return {
+      BILL,
+      STATUS_MAP,
+      vxeOption: {},
+      formData: {},
+      closeAfterWf: false,
+    };
+  },
+  computed: {
+    /**
+     * 页签行为配置：默认全部「刷新当前页签」；打开开关后，提交流程和审批通过
+     * 改成「关页签 → 回列表 → 刷新列表」。驳回/中断这类还没走完的动作仍留在当前页。
+     */
+    tabBehavior() {
+      if (!this.closeAfterWf) return "refreshCurrent";
+      return {
+        submit: "closeToList",
+        agree: "closeToList",
+        default: "refreshCurrent",
+      };
+    },
+  },
+  mounted() {
+    this.initTableList();
+  },
+  methods: {
+    searchEvent() {
+      this.$refs["table-m1"].commitProxy("reload");
+    },
+    resetEvent() {
+      this.formData = {};
+      this.$refs["table-m1"].commitProxy("reload");
+    },
+    getStatus(row) {
+      return STATUS_MAP[row.status] || { label: "", cls: "" };
+    },
+    // 新增页签也传快照：保存成功后新单会被插到序列首位，翻单按钮随即可用
+    openAdd() {
+      this.$refs.bizTab.openAdd(null, { navRows: this.getListRows() });
+    },
+    // 把当前列表顺序和行下标一起传进去，详情头部就有「上一单/下一单」
+    openDetail(row, rowIndex) {
+      this.$refs.bizTab.openDetail(row, null, {
+        navRows: this.getListRows(),
+        navIndex: rowIndex != null ? rowIndex : -1,
+      });
+    },
+    getListRows() {
+      let grid = this.$refs["table-m1"];
+      return grid ? grid.getTableData().fullData : null;
+    },
+    initTableList() {
+      let tableOption = {
+        vue: this,
+        tableRef: "table-m1",
+        tableName: "demo-bizTab-bill-list-m1",
+        path: BILL.prefix + `/bd_api/${BILL.listFormCode}/getPage`,
+        param: () => {
+          return {
+            ...this.formData,
+            type: BILL.type,
+          };
+        },
+        paramHandle: (queryParam) => {
+          return {
+            fixeData: {},
+            formCode: BILL.listFormCode,
+            taBm: BILL.taBm,
+            data: {
+              ...queryParam,
+            },
+          };
+        },
+        columns: [
+          { type: "checkbox", width: 48, resizable: false, fixed: "left" },
+          {
+            title: this.$t1("变更单号"),
+            field: "sn",
+            width: 160,
+            sortable: false,
+            filterType: false,
+            fixed: "left",
+            slots: { default: "sn" },
+          },
+          {
+            title: this.$t1("状态"),
+            field: "status",
+            width: 100,
+            sortable: false,
+            filterType: false,
+            slots: { default: "status" },
+          },
+          {
+            title: this.$t1("产品编码"),
+            field: "itemcodes",
+            width: 180,
+            sortable: false,
+            filterType: false,
+          },
+          {
+            title: this.$t1("变更原因"),
+            field: "remark",
+            minWidth: 180,
+            sortable: false,
+            filterType: false,
+          },
+          {
+            title: this.$t1("创建人"),
+            field: "_createBy",
+            width: 120,
+            sortable: false,
+            filterType: false,
+          },
+          {
+            title: this.$t1("创建时间"),
+            field: "create_date",
+            width: 160,
+            sortable: false,
+            filterType: false,
+          },
+          {
+            title: "",
+            width: 47,
+            fixed: "right",
+            sortable: false,
+            slots: { default: "operate" },
+          },
+        ],
+      };
+      this.$vxeTableUtil.initVxeTable(tableOption).then((opts) => {
+        this.vxeOption = opts;
+      });
+    },
+  },
+};
+</script>
+
+<style scoped>
+.behavior-switch {
+  margin-left: 16px;
+}
+</style>

package/src/views/demo/bizTab/bill/productDialog.vue

@@ -0,0 +1,176 @@
+<template>
+  <el-dialog
+    :title="$t1('产品列表')"
+    :append-to-body="true"
+    :modal-append-to-body="true"
+    :close-on-click-modal="falseValue"
+    :visible.sync="showDialog"
+    :modal="falseValue"
+    custom-class="dialog-style list-dialog"
+    width="1200px"
+    @close="dialogClose"
+    v-el-drag-dialog
+    v-el-dialog-center
+  >
+    <div class="cont" style="height: 450px">
+      <vxe-grid
+        class="is-pointer"
+        ref="table-m1"
+        v-bind="vxeOption"
+        @resizable-change="$vxeTableUtil.onColumnWitchChange"
+        @custom="$vxeTableUtil.customHandle"
+        @checkbox-change="addDataTable"
+        @checkbox-all="checkAll"
+        @cell-dblclick="checkWithSubmit"
+      >
+        <template #form>
+          <div class="clearfix screen-btns">
+            <div class="fr">
+              <vxe-button
+                icon="el-icon-brush"
+                class="button-sty"
+                type="text"
+                status="primary"
+                plain
+                @click="resetEvent"
+                >{{ $t1("刷新") }}</vxe-button
+              >
+              <vxe-button
+                status="warning"
+                icon="el-icon-search"
+                class="button-sty"
+                @click="searchEvent"
+                >{{ $t1("搜索") }}</vxe-button
+              >
+            </div>
+          </div>
+          <vxe-form
+            class="screen-box"
+            title-width="92px"
+            title-align="right"
+            :data="formData"
+            @submit="searchEvent"
+            @reset="resetEvent"
+          >
+            <vxe-form-item :title="$t1('产品编码') + ':'" field="itemcode">
+              <template v-slot>
+                <el-input v-model="formData.itemcode" size="small" clearable />
+              </template>
+            </vxe-form-item>
+            <vxe-button type="submit" v-show="false" @click="searchEvent"></vxe-button>
+          </vxe-form>
+        </template>
+      </vxe-grid>
+    </div>
+    <label id="labBtn" class="transverse">
+      <div class="icon">
+        <i class="el-icon-more"></i>
+        <i class="el-icon-more"></i>
+      </div>
+    </label>
+    <div class="multipleChoice">
+      <el-tooltip :enterable="false" effect="dark" :content="$t1('全部删除')" placement="top">
+        <a class="allDel icon-quanbushanchu" @click="clearChecked()"></a>
+      </el-tooltip>
+      <div class="list">
+        <div class="item" v-for="(checkRow, index) in checkRows" :key="index">
+          <p>{{ checkRow.itemdesc }}</p>
+          <a class="el-icon-close" @click="clearTable1Select(index)"></a>
+        </div>
+      </div>
+    </div>
+    <span slot="footer" class="dialog-footer">
+      <el-button type="primary" plain class="button-sty" @click="dialogClose">
+        <i class="el-icon-close el-icon"></i>
+        {{ $t1("取 消") }}
+      </el-button>
+      <el-button type="primary" class="button-sty" @click="dialogPrimary">
+        <i class="el-icon-check el-icon"></i>
+        {{ $t1("确 定") }}
+      </el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+/**
+ * 产品选择弹框，走的是同一个 formCode 下的 findItemPage 脚本
+ * （与 stdxx 的 pmd/product/product_change/productItemDialog.vue 同源）。
+ * 选择类弹框的勾选态/回填/双击确认这些都在 selectDialogMixins 里，本文件只配表格。
+ */
+import { selectDialogMixins } from "@base/mixins/selectDialog/index.js";
+import { BILL } from "./billConfig";
+
+export default {
+  name: "demoBizTabProductDialog",
+  props: ["visiable", "multi", "param", "allowSelected"],
+  mixins: [selectDialogMixins],
+  data() {
+    return {
+      showDialog: true,
+      falseValue: false,
+      selectMulti: true,
+      formData: {},
+      vxeOption: {},
+    };
+  },
+  created() {
+    this.initSetting();
+  },
+  mounted() {
+    this.initTableM1();
+  },
+  methods: {
+    initTableM1() {
+      let tableOption = {
+        vue: this,
+        tableRef: "table-m1",
+        tableName: "demo-bizTab-productDialog-m1",
+        path: BILL.prefix + `/bd_api/${BILL.formCode}/findItemPage`,
+        param: () => {
+          return {
+            ...this.formData,
+            ...this.param,
+          };
+        },
+        columns: [
+          { type: "checkbox", width: 48, resizable: false, fixed: "left" },
+          {
+            title: this.$t1("产品描述"),
+            field: "itemdesc",
+            width: 350,
+            sortable: false,
+            filterType: false,
+            fixed: "left",
+          },
+          {
+            title: this.$t1("产品编码"),
+            field: "itemcode",
+            width: 150,
+            sortable: false,
+            filterType: false,
+          },
+          {
+            title: this.$t1("产品分类名称"),
+            field: "category_name",
+            width: 150,
+            sortable: false,
+            filterType: false,
+          },
+          { title: "", width: 47, fixed: "right", sortable: false },
+        ],
+        config: {
+          checkboxConfig: {
+            checkStrictly: true,
+            showHeader: this.selectMulti,
+            trigger: "row",
+          },
+        },
+      };
+      this.$vxeTableUtil.initVxeTable(tableOption).then((opts) => {
+        this.vxeOption = opts;
+      });
+    },
+  },
+};
+</script>

package/src/views/demo/bizTab/simple/billApi.js

@@ -0,0 +1,123 @@
+/**
+ * demo A 的「接口适配层」——整个 demo 只有这个文件碰数据源。
+ *
+ * 这里是一份进程内 mock：不打后台、不依赖任何表单模板或流程配置，clone 下来就能跑，
+ * 目的是把 bizTab 的页签链路（新增/详情/翻单/脏数据拦截/保存后升编辑态）演示清楚。
+ *
+ * 换成真实后台时只改本文件，list.vue / detail.vue 一行都不用动：
+ *   getPage → this.$http({ url: XX_PREFIX + "/demo_bill/listPage", ... })
+ *   getOne  → this.$http({ url: XX_PREFIX + "/demo_bill/get", data: { id } })
+ *   save    → this.$http({ url: XX_PREFIX + (id ? "/demo_bill/update" : "/demo_bill/save") })
+ * 也就是 std 那些手写页面（如 basic/stock/stock_check）的写法。
+ */
+
+// 假延时，让 loading / 重挂载的时序和真实请求一致，不然页签切换看不出效果
+const LATENCY = 200;
+
+export const STATUS_MAP = {
+  0: { label: "草稿", cls: "list-tag warning" },
+  1: { label: "已提交", cls: "list-tag" },
+  2: { label: "已完成", cls: "list-tag success" },
+};
+
+let seq = 3;
+// 主表 + 子表都放在一起，模拟「整单读写」
+let store = [
+  {
+    id: 1,
+    sn: "DEMO-0001",
+    name: "华南区物料补货",
+    status: 0,
+    owner: "张三",
+    amount: 1200,
+    remark: "月度常规补货",
+    createDate: "2026-08-01 09:12:00",
+    items: [
+      { id: 11, itemCode: "M-001", itemName: "包装膜", qty: 200, price: 3 },
+      { id: 12, itemCode: "M-002", itemName: "标签纸", qty: 300, price: 2 },
+    ],
+  },
+  {
+    id: 2,
+    sn: "DEMO-0002",
+    name: "华东区样品申请",
+    status: 1,
+    owner: "李四",
+    amount: 860,
+    remark: "客户送样",
+    createDate: "2026-08-03 14:20:00",
+    items: [{ id: 21, itemCode: "M-003", itemName: "试剂盒", qty: 20, price: 43 }],
+  },
+  {
+    id: 3,
+    sn: "DEMO-0003",
+    name: "西北区促销物料",
+    status: 2,
+    owner: "王五",
+    amount: 4300,
+    remark: "",
+    createDate: "2026-08-05 10:00:00",
+    items: [],
+  },
+];
+
+function clone(val) {
+  return val == null ? val : JSON.parse(JSON.stringify(val));
+}
+
+function delay(val) {
+  return new Promise((resolve) => setTimeout(() => resolve(clone(val)), LATENCY));
+}
+
+/** 列表分页（demo 只做条件过滤，不分页） */
+export function getPage(query) {
+  let q = query || {};
+  let rows = store.filter((row) => {
+    if (q.sn && String(row.sn).indexOf(q.sn) < 0) return false;
+    if (q.name && String(row.name).indexOf(q.name) < 0) return false;
+    if (q.status != null && q.status !== "" && row.status !== Number(q.status)) {
+      return false;
+    }
+    return true;
+  });
+  return delay(rows);
+}
+
+/** 单据详情（含子表） */
+export function getOne(id) {
+  return delay(store.find((row) => String(row.id) === String(id)) || null);
+}
+
+/** 保存：无 id 为新增，返回新单号；有 id 为更新，返回原单号 */
+export function save(bill) {
+  let data = clone(bill) || {};
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      if (data.id == null || data.id === "") {
+        seq += 1;
+        data.id = seq;
+        data.sn = "DEMO-" + String(seq).padStart(4, "0");
+        data.status = 0;
+        data.createDate = formatNow();
+        store.push(data);
+      } else {
+        let index = store.findIndex((row) => String(row.id) === String(data.id));
+        if (index < 0) {
+          store.push(data);
+        } else {
+          store.splice(index, 1, data);
+        }
+      }
+      resolve(clone(data));
+    }, LATENCY);
+  });
+}
+
+function formatNow() {
+  let d = new Date();
+  let pad = (n) => String(n).padStart(2, "0");
+  return (
+    `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} `
+    + `${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`
+  );
+}