cloud-web-corejs 1.1.0-dev.27 → 1.1.0-dev.28

package/src/views/demo/bizTab/simple/detail.vue

@@ -0,0 +1,407 @@
+<template>
+  <div class="detail-wrap">
+    <!--
+      结构约定（即便本 demo 不接流程也照着写，将来加流程不用改结构）：
+      wfUtil 把「流程信息」面板挂到 .el-form .d-cont、侧边导航挂到 .el-form .slide-wrap，
+      所以 el-form 必须包住 baseTabs。
+      :disabled="billDisabled" 一绑，表单里的字段就整片自动禁用（本 demo 无流程，恒为 false）。
+    -->
+    <el-form ref="editForm" :model="billModel" :disabled="billDisabled">
+      <!-- 这层空 el-form 用来隔断 disabled 注入，头部按钮不受单据只读态影响 -->
+      <el-form>
+        <div class="d-header clearfix">
+          <div class="fl">
+            <i class="el-icon-info" />
+            {{ isAdd ? $t1("新增单据") : $t1("单据") + " " + (billModel.sn || "") }}
+          </div>
+          <!-- 上一单/下一单、重置、保存：显隐与禁用都由组件统一处理 -->
+          <biz-bill-actions :detail="_self">
+            <!-- 业务自己的按钮往默认插槽放 -->
+            <el-button
+              v-if="!isAdd"
+              type="primary"
+              plain
+              class="button-sty"
+              icon="el-icon-document-copy"
+              :disabled="billSaving"
+              @click="copyToNew"
+              >{{ $t1("复制新增") }}</el-button
+            >
+          </biz-bill-actions>
+        </div>
+      </el-form>
+
+      <baseTabs>
+        <baseTabPane :label="$t1('基本信息')">
+          <template #default>
+            <table class="table-detail">
+              <tbody>
+                <tr>
+                  <th>{{ $t1("单号") }}</th>
+                  <td>{{ billModel.sn || $t1("保存后自动生成") }}</td>
+                  <th>{{ $t1("状态") }}</th>
+                  <td>
+                    <div :class="statusInfo.cls">{{ statusInfo.label }}</div>
+                  </td>
+                </tr>
+                <tr>
+                  <th><em class="f-red">*</em>{{ $t1("名称") }}</th>
+                  <td>
+                    <el-form-item
+                      prop="name"
+                      :rules="[
+                        {
+                          required: true,
+                          message: $t1('名称不能为空'),
+                          trigger: ['blur', 'change'],
+                        },
+                      ]"
+                    >
+                      <el-input v-model="billModel.name" clearable />
+                    </el-form-item>
+                  </td>
+                  <th>{{ $t1("负责人") }}</th>
+                  <td>
+                    <el-form-item prop="owner">
+                      <el-input v-model="billModel.owner" clearable />
+                    </el-form-item>
+                  </td>
+                </tr>
+                <tr>
+                  <th>{{ $t1("金额") }}</th>
+                  <td>
+                    <el-form-item prop="amount">
+                      <base-input-number v-model="billModel.amount" />
+                    </el-form-item>
+                  </td>
+                  <th>{{ $t1("备注") }}</th>
+                  <td>
+                    <el-form-item prop="remark">
+                      <el-input v-model="billModel.remark" clearable />
+                    </el-form-item>
+                  </td>
+                </tr>
+                <tr>
+                  <!-- 表头多选必填：el-form-item 上写 required 校不出来（空数组会被 async-validator
+                       放行），靠 validateBillData() 里的 checkBillRequired + type:"multi" -->
+                  <th><em class="f-red">*</em>{{ $t1("适用区域") }}</th>
+                  <td>
+                    <el-form-item prop="areas">
+                      <el-select v-model="billModel.areas" multiple clearable>
+                        <el-option
+                          v-for="item in AREAS"
+                          :key="item"
+                          :label="item"
+                          :value="item"
+                        />
+                      </el-select>
+                    </el-form-item>
+                  </td>
+                  <!-- 表头附件必填：同理，靠 type:"attachment" -->
+                  <th><em class="f-red">*</em>{{ $t1("附件") }}</th>
+                  <td colspan="3">
+                    <el-form-item prop="attachments">
+                      <baseUpload
+                        accept="file"
+                        multi="true"
+                        :file.sync="billModel.attachments"
+                      ></baseUpload>
+                    </el-form-item>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </template>
+        </baseTabPane>
+
+        <baseTabPane :label="$t1('明细')">
+          <template #default>
+            <div class="clearfix screen-btns">
+              <div class="fl">
+                <vxe-button
+                  status="primary"
+                  type="text"
+                  plain
+                  class="button-sty"
+                  icon="el-icon-plus"
+                  @click="addItem"
+                  >{{ $t1("增行") }}</vxe-button
+                >
+                <vxe-button
+                  status="danger"
+                  type="text"
+                  plain
+                  class="button-sty"
+                  icon="el-icon-delete"
+                  @click="removeItems"
+                  >{{ $t1("删行") }}</vxe-button
+                >
+              </div>
+            </div>
+            <vxe-table ref="itemTable" :data="billModel.items" border height="260" size="small">
+              <vxe-column type="checkbox" width="48" />
+              <!--
+                单元格里的必填要两样东西才看得见：
+                ① 表头星号自己加（element 的 * 是 el-form-item 按 label 渲染的，表格里没有 label）；
+                ② 单元格套 el-form-item + 指向 model 的真实 prop 路径（items.0.qty），
+                   element 才会加 is-error 让输入框标红 —— 裸着写 el-input 永远不会红。
+                错误文案在窄单元格里放不下，所以 show-message 关掉，具体哪行哪个字段
+                由 validateBillData() 的提示说明；可靠性也在那边（屏外行没有 form-item）。
+              -->
+              <vxe-column field="itemCode" :title="$t1('物料编码')" width="140">
+                <template #header>
+                  <span><em class="f-red">*</em>{{ $t1("物料编码") }}</span>
+                </template>
+                <template #default="{ row, rowIndex }">
+                  <el-form-item
+                    :prop="`items.${rowIndex}.itemCode`"
+                    :rules="[{ required: true, trigger: ['blur', 'change'] }]"
+                    :show-message="false"
+                  >
+                    <el-input v-model="row.itemCode" size="small" />
+                  </el-form-item>
+                </template>
+              </vxe-column>
+              <vxe-column field="itemName" :title="$t1('物料名称')" min-width="160">
+                <template #default="{ row }">
+                  <el-input v-model="row.itemName" size="small" />
+                </template>
+              </vxe-column>
+              <vxe-column field="qty" :title="$t1('数量')" width="120">
+                <template #header>
+                  <span><em class="f-red">*</em>{{ $t1("数量") }}</span>
+                </template>
+                <template #default="{ row, rowIndex }">
+                  <el-form-item
+                    :prop="`items.${rowIndex}.qty`"
+                    :rules="[{ required: true, trigger: ['blur', 'change'] }]"
+                    :show-message="false"
+                  >
+                    <base-input-number v-model="row.qty" />
+                  </el-form-item>
+                </template>
+              </vxe-column>
+              <vxe-column field="price" :title="$t1('单价')" width="120">
+                <template #default="{ row }">
+                  <base-input-number v-model="row.price" />
+                </template>
+              </vxe-column>
+              <!-- 行内多选 / 行内附件的必填也一样：行内 form-item 只覆盖已渲染的行，
+                   靠 validateBillData() 里的 checkRowsRequired 按 fullData 兜 -->
+              <vxe-column field="areas" :title="$t1('适用区域')" width="200">
+                <template #header>
+                  <span><em class="f-red">*</em>{{ $t1("适用区域") }}</span>
+                </template>
+                <template #default="{ row }">
+                  <!-- 多选的必填不写 form-item 的 rules：空数组会被 async-validator 放行，
+                       写了也不会红也不会拦，一律交给 validateBillData() 的 type:"multi" -->
+                  <el-select v-model="row.areas" multiple size="small" clearable>
+                    <el-option
+                      v-for="item in AREAS"
+                      :key="item"
+                      :label="item"
+                      :value="item"
+                    />
+                  </el-select>
+                </template>
+              </vxe-column>
+              <vxe-column field="files" :title="$t1('附件')" min-width="220">
+                <template #header>
+                  <span><em class="f-red">*</em>{{ $t1("附件") }}</span>
+                </template>
+                <template #default="{ row }">
+                  <baseUpload accept="file" multi="true" :file.sync="row.files"></baseUpload>
+                </template>
+              </vxe-column>
+            </vxe-table>
+          </template>
+        </baseTabPane>
+      </baseTabs>
+    </el-form>
+  </div>
+</template>
+
+<script>
+/**
+ * demo A 详情：不走 $http，所以整个覆盖了 loadBill()。
+ *
+ * 混入 bizBillDetailMixin 后本文件只关心业务：
+ *   billOptions / loadBill(或 buildLoadRequest) / applyBillData / saveBill
+ * 页签升编辑态、标题同步、翻单、关页签拦截都由 mixin + 宿主完成。
+ */
+import { bizBillDetailMixin } from "@base/components/bizTab";
+import BizBillActions from "@base/components/bizTab/BizBillActions.vue";
+import { getOne, save, STATUS_MAP } from "./billApi";
+
+// 多选选项（demo 用）
+const AREAS = ["华东", "华南", "华北", "西南"];
+
+export default {
+  name: "demoBizTabSimpleDetail",
+  components: { BizBillActions },
+  mixins: [bizBillDetailMixin],
+  data() {
+    return {
+      AREAS,
+      billModel: this.getDefaultModel(),
+      // 脏数据判定用的初始快照
+      billSnapshot: null,
+    };
+  },
+  computed: {
+    billOptions() {
+      return {
+        titleField: "sn",
+        wfEnabled: false, // 本 demo 不接流程，流程相关按钮全部不出
+      };
+    },
+    statusInfo() {
+      return STATUS_MAP[this.billModel.status] || { label: "-", cls: "" };
+    },
+  },
+  mounted() {
+    this.loadBill();
+  },
+  methods: {
+    getDefaultModel() {
+      return {
+        id: null,
+        sn: null,
+        name: null,
+        status: 0,
+        owner: null,
+        amount: null,
+        remark: null,
+        areas: [], // 表头多选
+        attachments: [], // 表头附件
+        items: [],
+      };
+    },
+
+    /**
+     * 数据级校验：附件、多选、子表至少一行、行内附件/多选 —— 这几类
+     * el-form-item 的 required 都兜不住（空数组被 async-validator 放行；
+     * 子表超 20 行开虚拟滚动，屏外行的 form-item 压根不存在）。
+     */
+    validateBillData() {
+      return (
+        this.checkBillRequired([
+          { field: "areas", label: this.$t1("适用区域"), type: "multi" },
+          { field: "attachments", label: this.$t1("附件"), type: "attachment" },
+        ])
+        || this.checkRowsRequired({
+          label: this.$t1("明细"),
+          rows: this.$refs.itemTable
+            ? this.$refs.itemTable.getTableData().fullData
+            : this.billModel.items,
+          minRows: 1,
+          fields: [
+            { field: "itemCode", label: this.$t1("物料编码") },
+            { field: "qty", label: this.$t1("数量") },
+            { field: "areas", label: this.$t1("适用区域"), type: "multi" },
+            { field: "files", label: this.$t1("附件"), type: "attachment" },
+          ],
+        })
+      );
+    },
+
+    // ===== 取数：不走 $http 就整个覆盖 loadBill（默认实现是拿 buildLoadRequest 去 _getBillInfo） =====
+    loadBill() {
+      if (this.isAdd) {
+        this.applyBillData(null);
+        return Promise.resolve();
+      }
+      return getOne(this.dataId).then((objx) => this.applyBillData(objx));
+    },
+    applyBillData(objx) {
+      this.billModel = objx
+        ? Object.assign(this.getDefaultModel(), objx)
+        : this.getDefaultModel();
+      if (!Array.isArray(this.billModel.items)) this.billModel.items = [];
+      this.billModel.items.forEach((row) => {
+        if (!Array.isArray(row.areas)) row.areas = [];
+        if (!Array.isArray(row.files)) row.files = [];
+      });
+      this.takeSnapshot();
+    },
+
+    // ===== 保存：返回单号（新增返回新单号），取消/失败返回 null =====
+    saveBill(options) {
+      let opts = options || {};
+      let done = () =>
+        save(this.billModel).then((res) => {
+          // 后台回填的单号/状态等要写回模型，页签标题就是从 titleField 取的
+          this.billModel = Object.assign({}, this.billModel, res);
+          this.takeSnapshot();
+          if (opts.successMsg !== false) {
+            this.$message({
+              message: this.$t1("保存成功"),
+              type: "success",
+              duration: 500,
+            });
+          }
+          return res.id;
+        });
+      if (opts.confirm === false) return done();
+      return this.$baseConfirm(this.$t1("您确定要保存吗？")).then(done, () => null);
+    },
+
+    // ===== 关页签拦截：实现了它，宿主关页签时就问它脏没脏 =====
+    isBillDirty() {
+      return JSON.stringify(this.billModel) !== this.billSnapshot;
+    },
+    takeSnapshot() {
+      this.billSnapshot = JSON.stringify(this.billModel);
+    },
+
+    // ===== 业务按钮 =====
+    copyToNew() {
+      let host = this.bizTabHost;
+      if (!host) return;
+      let tabName = host.openAdd();
+      if (!tabName) return;
+      // 等新页签的详情挂载完，把当前单据内容灌进去（去掉主键与单号）
+      this.$nextTick(() => {
+        setTimeout(() => {
+          let tab = host.getTab(tabName);
+          let detail = host.getDetail(tab);
+          if (!detail) return;
+          let copy = JSON.parse(JSON.stringify(this.billModel));
+          copy.id = null;
+          copy.sn = null;
+          copy.status = 0;
+          copy.createDate = null;
+          (copy.items || []).forEach((item) => {
+            item.id = null;
+          });
+          detail.applyBillData(copy);
+          detail.billModel.id = null;
+          detail.billSnapshot = null; // 复制来的内容算「未保存」，关页签时要拦一下
+        }, 300);
+      });
+    },
+    addItem() {
+      this.billModel.items.push({
+        id: null,
+        itemCode: null,
+        itemName: null,
+        qty: null,
+        price: null,
+        areas: [],
+        files: [],
+      });
+    },
+    removeItems() {
+      let table = this.$refs.itemTable;
+      let records = table ? table.getCheckboxRecords() : [];
+      if (!records.length) {
+        this.$message.warning(this.$t1("请先勾选要删除的明细"));
+        return;
+      }
+      this.billModel.items = this.billModel.items.filter(
+        (row) => records.indexOf(row) < 0
+      );
+    },
+  },
+};
+</script>

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

@@ -0,0 +1,217 @@
+<template>
+  <biz-tab-list-page
+    ref="bizTab"
+    v-model="activeTab"
+    :listLabel="$t1('列表')"
+    titleField="sn"
+    :addTitle="$t1('新增')"
+    :maxTabs="6"
+    @refresh-list="loadList"
+    @tab-removed="onTabRemoved"
+  >
+    <!-- ===== 列表页签 ===== -->
+    <template #list>
+      <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
+          >
+          <vxe-button
+            type="text"
+            status="primary"
+            plain
+            class="button-sty"
+            icon="el-icon-question"
+            @click="showTip = true"
+            >{{ $t1("这个 demo 在演示什么") }}</vxe-button
+          >
+        </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="loadList"
+            >{{ $t1("搜索") }}</vxe-button
+          >
+        </div>
+      </div>
+      <vxe-form class="screen-box" title-width="80px" title-align="right" :data="formData">
+        <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="name">
+          <template v-slot>
+            <el-input v-model="formData.name" 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>
+              <el-option
+                v-for="(item, key) in STATUS_MAP"
+                :key="key"
+                :label="item.label"
+                :value="key"
+              />
+            </el-select>
+          </template>
+        </vxe-form-item>
+      </vxe-form>
+      <vxe-table
+        ref="table"
+        :data="rows"
+        :loading="listLoading"
+        border
+        height="auto"
+        size="small"
+      >
+        <vxe-column field="sn" :title="$t1('单号')" width="140">
+          <template #default="{ row, rowIndex }">
+            <a href="javascript:void(0);" class="a-link" @click="openDetail(row, rowIndex)">
+              {{ row.sn }}
+            </a>
+          </template>
+        </vxe-column>
+        <vxe-column field="name" :title="$t1('名称')" min-width="180" />
+        <vxe-column field="status" :title="$t1('状态')" width="100">
+          <template #default="{ row }">
+            <div :class="getStatus(row).cls">{{ getStatus(row).label }}</div>
+          </template>
+        </vxe-column>
+        <vxe-column field="owner" :title="$t1('负责人')" width="100" />
+        <vxe-column field="amount" :title="$t1('金额')" width="100" align="right" />
+        <vxe-column field="remark" :title="$t1('备注')" min-width="160" />
+        <vxe-column field="createDate" :title="$t1('创建时间')" width="160" />
+        <vxe-column :title="''" width="47" fixed="right">
+          <template #default="{ 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-column>
+      </vxe-table>
+    </template>
+
+    <!-- ===== 详情页签（新增/查看共用同一个组件） ===== -->
+    <template #detail="{ tab }">
+      <bill-detail :tab="tab" />
+    </template>
+
+    <!-- ===== 页签之外：各类弹框挂这里（默认插槽） ===== -->
+    <el-dialog
+      :title="$t1('这个 demo 在演示什么')"
+      :visible.sync="showTip"
+      width="520px"
+      custom-class="dialog-style"
+      append-to-body
+    >
+      <ul class="demo-tip">
+        <li>{{ $t1("新增、查看详情都开独立页签；同一单据不重复开，新增可连开多个") }}</li>
+        <li>{{ $t1("新增页保存后就地升为编辑态（页签标题换成单号），不重新取数、不闪") }}</li>
+        <li>{{ $t1("详情里改了内容没保存，关页签会拦一下（isBillDirty 钩子）") }}</li>
+        <li>{{ $t1("详情头部「上一单/下一单」按列表当时的顺序翻单") }}</li>
+        <li>{{ $t1("关掉页签或手动切回列表，列表都会自动刷新") }}</li>
+        <li>{{ $t1("本 demo 不接流程、不打后台，数据在 billApi.js 里") }}</li>
+      </ul>
+    </el-dialog>
+  </biz-tab-list-page>
+</template>
+
+<script>
+/**
+ * demo A：手写接口版（前端 mock，无流程）。
+ *
+ * 不依赖任何后台前置条件，clone 下来就能跑，可以当手写单据页面的模板抄。
+ * 数据源集中在 ./billApi.js，换真实接口只改那一个文件。
+ * 要看「保存并提交流程 / 通过自动保存 / 提交后关页签」，看 demo B：../bill/list.vue
+ *
+ * 菜单/路由：@base/views/demo/bizTab/simple/list（本地已在 router/modules/customer.js 注册）
+ */
+import BizTabListPage from "@base/components/bizTab/BizTabListPage.vue";
+import billDetail from "./detail.vue";
+import { getPage, STATUS_MAP } from "./billApi";
+
+export default {
+  name: "demo_bizTab_simple:list",
+  components: { BizTabListPage, billDetail },
+  data() {
+    return {
+      STATUS_MAP,
+      activeTab: "second",
+      formData: {},
+      rows: [],
+      listLoading: false,
+      showTip: false,
+    };
+  },
+  mounted() {
+    this.loadList();
+  },
+  methods: {
+    loadList() {
+      this.listLoading = true;
+      return getPage(this.formData)
+        .then((rows) => {
+          this.rows = rows || [];
+        })
+        .finally(() => {
+          this.listLoading = false;
+        });
+    },
+    resetEvent() {
+      this.formData = {};
+      this.loadList();
+    },
+    getStatus(row) {
+      return STATUS_MAP[row.status] || { label: "", cls: "" };
+    },
+    // 新增页签也传快照：保存成功后新单会被插到序列首位，翻单按钮随即可用
+    openAdd() {
+      this.$refs.bizTab.openAdd(null, { navRows: this.rows });
+    },
+    // 把当前列表顺序和行下标一起传进去，详情头部就有「上一单/下一单」
+    openDetail(row, rowIndex) {
+      this.$refs.bizTab.openDetail(row, null, {
+        navRows: this.rows,
+        navIndex: rowIndex,
+      });
+    },
+    onTabRemoved(tabName) {
+      // 列表刷新由组件在「回到列表页签」时统一收口，这里只是演示事件可用
+      console.log("[demo] 页签已关闭:", tabName);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.demo-tip {
+  padding-left: 18px;
+  line-height: 26px;
+}
+</style>