cloud-web-corejs 1.1.0-dev.30 → 1.1.0-dev.31

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

@@ -1,407 +0,0 @@
-<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

@@ -1,217 +0,0 @@
-<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>