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

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

@@ -0,0 +1,436 @@
+<template>
+  <div class="detail-wrap">
+    <!--
+      结构约定：wfUtil 默认把「流程信息」面板挂到 .el-form .d-cont，把侧边导航挂到
+      .el-form .slide-wrap，「修改单据」按钮塞进 .el-form .d-header > .fr，
+      所以 el-form 必须包住 baseTabs。
+      :disabled="billDisabled" 一绑，表单里的字段就整片自动禁用，不用逐个绑。
+    -->
+    <el-form ref="editForm" :model="billModel" :disabled="billDisabled">
+      <!-- 这层空 el-form 用来隔断 disabled 注入（element 的 Form 是 provide elForm: this，
+           嵌套一层就把外层 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" />
+        </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>
+                  <th>{{ $t1("变更类型") }}</th>
+                  <td>
+                    <el-form-item prop="type">
+                      <el-select
+                        v-model="billModel.type"
+                        :placeholder="$t1('请选择')"
+                        clearable
+                      >
+                        <el-option :label="$t1('产品变更')" :value="0" />
+                        <el-option :label="$t1('零件变更')" :value="1" />
+                      </el-select>
+                    </el-form-item>
+                  </td>
+                </tr>
+                <tr>
+                  <th><em class="f-red">*</em>{{ $t1("变更原因") }}</th>
+                  <td colspan="5">
+                    <el-form-item
+                      prop="remark"
+                      :rules="[
+                        {
+                          required: true,
+                          message: $t1('变更原因不能为空'),
+                          trigger: ['blur', 'change'],
+                        },
+                      ]"
+                    >
+                      <el-input
+                        type="textarea"
+                        :rows="1"
+                        v-model="billModel.remark"
+                        clearable
+                      />
+                    </el-form-item>
+                  </td>
+                </tr>
+                <tr v-if="!isAdd">
+                  <th>{{ $t1("创建人") }}</th>
+                  <td>{{ billModel._createBy }}</td>
+                  <th>{{ $t1("创建时间") }}</th>
+                  <td>{{ billModel.create_date }}</td>
+                  <th>{{ $t1("更新时间") }}</th>
+                  <td>{{ billModel.modify_date }}</td>
+                </tr>
+              </tbody>
+            </table>
+          </template>
+        </baseTabPane>
+
+        <baseTabPane :label="$t1('变更明细')">
+          <!-- 子表可增删，新增的单据才存得下去（只读态不放按钮） -->
+          <template #button>
+            <el-button
+              v-if="!billDisabled"
+              class="button-sty"
+              icon="el-icon-plus"
+              @click="showProductDialog = true"
+              >{{ $t1("选择产品") }}</el-button
+            >
+          </template>
+          <template #default>
+            <vxe-grid
+              ref="itemGrid"
+              :data="itemRows"
+              v-bind="itemOption"
+              @resizable-change="$vxeTableUtil.onColumnWitchChange"
+              @custom="$vxeTableUtil.customHandle"
+            ></vxe-grid>
+          </template>
+        </baseTabPane>
+      </baseTabs>
+    </el-form>
+
+    <product-dialog
+      v-if="showProductDialog"
+      :visiable.sync="showProductDialog"
+      multi="true"
+      @confirm="confirmInsertProduct"
+    />
+  </div>
+</template>
+
+<script>
+/**
+ * demo B 单据详情：formCode + 通用 bd_api（脚本 getOne / getList / saveUpdate / findItemPage）。
+ * 请求写法照 stdxx 的 views/pmd/product/product_change/edit.vue 逐条搬，那边能跑这边就能跑。
+ *
+ * 混入 bizBillDetailMixin 后，本文件只写四件业务的事：
+ *   billOptions / buildLoadRequest / applyBillData / saveBill
+ * 保存并提交、提交后关页签、通过自动保存、翻单都由 mixin + 宿主负责。
+ *
+ * 这里没实现 isBillDirty()：关页签时退回内置判断——只拦「还没存过的新增页签」。
+ * 想按实际改动拦，参考 ../simple/detail.vue 的快照对比写法。
+ */
+import { bizBillDetailMixin } from "@base/components/bizTab";
+import {
+  requiredHeader,
+  buildRowProp,
+} from "@base/components/bizTab/billTableUtil";
+import BizBillActions from "@base/components/bizTab/BizBillActions.vue";
+import productDialog from "./productDialog.vue";
+import { BILL, STATUS_MAP } from "./billConfig";
+
+export default {
+  name: "demoBizTabBillDetail",
+  components: { BizBillActions, productDialog },
+  mixins: [bizBillDetailMixin],
+  data() {
+    return {
+      billModel: this.getDefaultModel(),
+      itemOption: {},
+      showProductDialog: false,
+    };
+  },
+  computed: {
+    billOptions() {
+      return {
+        prefix: BILL.prefix,
+        formCode: BILL.formCode,
+        taBm: BILL.taBm,
+        wfCode: BILL.wfCode,
+        titleField: BILL.titleField,
+        wfEnabled: true,
+        saveSubmitEnabled: true, // 新增页显示「保存并提交流程」
+        wfStartBindSave: true, // 点「提交流程」先校验并自动保存
+        wfAgreeBindSave: true, // 审批点「通过」自动保存单据
+      };
+    },
+    statusInfo() {
+      return STATUS_MAP[this.billModel.status] || { label: "-", cls: "" };
+    },
+    /**
+     * 子表数据放在 billModel[taBm] 里（和 stdxx 原页面一致），不单独挂一个 data 字段——
+     * 因为单元格里 el-form-item 的 prop 路径必须在 editForm 的 model 下真实可达，
+     * 挂在模型外面的话 element 会 warn「please transfer a valid prop path」且校验不生效。
+     */
+    itemRows() {
+      return this.billModel[BILL.itemTaBm] || [];
+    },
+  },
+  mounted() {
+    this.loadBill();
+    this.initItemTable();
+  },
+  methods: {
+    getDefaultModel() {
+      return {
+        id: null,
+        sn: null,
+        status: 0,
+        type: BILL.type,
+        remark: null,
+        _createBy: null,
+        create_date: null,
+        modify_date: null,
+        // 子表也放模型里，行内 form-item 的 prop 路径才可达（如 pcp_item_change_item.2.xxx）
+        [BILL.itemTaBm]: [],
+      };
+    },
+    setItemRows(rows) {
+      this.$set(this.billModel, BILL.itemTaBm, rows || []);
+    },
+
+    // ===== bizBillDetailMixin 要求实现的业务钩子 =====
+    buildLoadRequest(dataId) {
+      return {
+        url: BILL.prefix + `/bd_api/${BILL.formCode}/getOne`,
+        method: "post",
+        data: {
+          fixeData: {},
+          formCode: BILL.formCode,
+          taBm: BILL.taBm,
+          data: { id: dataId },
+        },
+      };
+    },
+    applyBillData(objx) {
+      if (!objx) {
+        this.billModel = this.getDefaultModel();
+        this.setItemRows([]);
+        return;
+      }
+      // getOne 不回子表，子表走 getList；先保住默认的空数组，别被 objx 覆盖掉
+      this.billModel = Object.assign(this.getDefaultModel(), objx, {
+        [BILL.itemTaBm]: [],
+      });
+      this.loadItems();
+    },
+    saveBill(options) {
+      let opts = options || {};
+      return new Promise((resolve) => {
+        let done = () => this.postSave(opts, resolve);
+        if (opts.confirm === false) {
+          done();
+          return;
+        }
+        this.$baseConfirm(this.$t1("您确定要保存吗？")).then(done, () =>
+          resolve(null)
+        );
+      });
+    },
+    // 数据级校验：子表是 scrollY gt:20 的虚拟滚动，屏外行的行内 form-item 不存在、校验不到，
+    // 所以按数据兜一遍（本单子表只有「变更后描述」可改）
+    validateBillData() {
+      return this.checkRowsRequired({
+        label: this.$t1("变更明细"),
+        rows: this.$refs.itemGrid
+          ? this.$refs.itemGrid.getTableData().fullData
+          : this.itemRows,
+        fields: [
+          { field: "change_itemdesc", label: this.$t1("变更后描述") },
+        ],
+      });
+    },
+    // 覆盖默认判据，叠加单据状态：mixin 默认只看流程（没启动就能改）。
+    // billDisabled（字段自动禁用）和「重置/保存」的显隐都以它为准。
+    canEditBill() {
+      if (this.hasWf) return !!(this.wfInfo && this.wfInfo.toModify);
+      return this.isAdd || this.billModel.status === 0;
+    },
+    // 已审核/审核中的单据不许再提交流程（mixin 默认放开，这里按状态卡住）
+    canStartWf() {
+      return this.billModel.status === 0 || this.billModel.status == null;
+    },
+
+    // ===== 业务内部 =====
+    postSave(opts, resolve) {
+      // 整表提交：data 里带哪几张表，后台就按哪几张表落库。
+      // 主表对象里不能再夹带子表数组和审计字段（照 stdxx 原页面的处理）。
+      let main = { ...this.billModel };
+      delete main._createBy;
+      delete main._modifyBy;
+      delete main[BILL.itemTaBm];
+      let itemRows = this.$refs.itemGrid
+        ? this.$refs.itemGrid.getTableData().fullData
+        : this.itemRows;
+      let data = {};
+      data[BILL.taBm] = main;
+      data[BILL.itemTaBm] = itemRows;
+      this.$http({
+        url: BILL.prefix + `/bd_api/${BILL.formCode}/saveUpdate`,
+        method: "post",
+        data: {
+          fixeData: {},
+          formCode: BILL.formCode,
+          taBm: BILL.taBm,
+          data: data,
+        },
+        isLoading: true,
+        success: (res) => {
+          // 新增返回新单号；更新时后台可能不回 objx，退回当前单号
+          let dataId = res && res.objx ? res.objx : this.dataId;
+          if (opts.successMsg !== false) {
+            this.$message({
+              message: res.content,
+              type: "success",
+              duration: 500,
+            });
+          }
+          resolve(dataId);
+        },
+        fail: () => resolve(null),
+        error: () => resolve(null),
+      });
+    },
+    loadItems() {
+      if (this.isAdd) return;
+      this.$http({
+        url: BILL.prefix + `/bd_api/${BILL.formCode}/getList`,
+        method: "post",
+        data: {
+          fixeData: {},
+          formCode: BILL.formCode,
+          taBm: BILL.itemTaBm,
+          data: { id: this.dataId },
+        },
+        success: (res) => {
+          this.setItemRows((res && res.objx) || []);
+        },
+      });
+    },
+    confirmInsertProduct(rows) {
+      if (!rows || !rows.length) return;
+      let exists = {};
+      this.itemRows.forEach((row) => {
+        exists[row.itemcode] = true;
+      });
+      let adds = [];
+      rows.forEach((row) => {
+        if (exists[row.itemcode]) return;
+        adds.push({
+          id: null,
+          itemcode: row.itemcode,
+          f_ref_itemdesc: row.itemdesc,
+          f_ref_category_name: row.category_name,
+          change_itemdesc: row.itemdesc,
+        });
+      });
+      if (!adds.length) {
+        this.$message.warning(this.$t1("所选产品都已在明细中"));
+        return;
+      }
+      this.setItemRows(this.itemRows.concat(adds));
+    },
+    initItemTable() {
+      let tableOption = {
+        vue: this,
+        tableRef: "itemGrid",
+        tableName: "demo-bizTab-bill-item",
+        columns: [
+          { type: "checkbox", fixed: "left", width: 48, resizable: false },
+          {
+            title: this.$t1("产品分类名称"),
+            field: "f_ref_category_name",
+            width: 200,
+            sortable: false,
+            filterType: false,
+          },
+          {
+            title: this.$t1("产品编码"),
+            field: "itemcode",
+            width: 150,
+            sortable: false,
+            filterType: false,
+          },
+          {
+            title: this.$t1("产品名称"),
+            field: "f_ref_itemdesc",
+            width: 220,
+            sortable: false,
+            filterType: false,
+          },
+          {
+            title: this.$t1("变更后描述"),
+            field: "change_itemdesc",
+            minWidth: 220,
+            sortable: false,
+            filterType: false,
+            slots: {
+              // 表头星号要自己加：element 的 * 是 el-form-item 按 label 渲染的，表格里没有 label
+              header: requiredHeader(this.$t1("变更后描述")),
+              default: ({ row, rowIndex }) => {
+                if (this.billDisabled) return [row.change_itemdesc];
+                // 必须套 el-form-item + 指向 model 的真实 prop 路径，element 才会加 is-error（红框）；
+                // 裸着写 el-input 永远不会标红。show-message 关掉是因为单元格容不下错误文案，
+                // 具体是哪行哪个字段由 validateBillData() 的提示说明。
+                return [
+                  <el-form-item
+                    prop={buildRowProp(BILL.itemTaBm, rowIndex, "change_itemdesc")}
+                    rules={[{ required: true, trigger: ["blur", "change"] }]}
+                    show-message={false}
+                  >
+                    <el-input v-model={row.change_itemdesc} size="small" clearable />
+                  </el-form-item>,
+                ];
+              },
+            },
+          },
+          {
+            width: 47,
+            fixed: "right",
+            title: "",
+            sortable: false,
+            slots: {
+              default: ({ rowIndex }) => {
+                if (this.billDisabled) return [];
+                return [
+                  <a
+                    href="javascript:void(0);"
+                    class="a-link"
+                    onclick={(e) => {
+                      e.stopPropagation();
+                      this.itemRows.splice(rowIndex, 1);
+                    }}
+                  >
+                    <el-tooltip
+                      enterable={false}
+                      effect="dark"
+                      content={this.$t1("删除")}
+                      placement="top"
+                      popper-class="tooltip-skin"
+                    >
+                      <i class="el-icon-delete" />
+                    </el-tooltip>
+                  </a>,
+                ];
+              },
+            },
+          },
+        ],
+      };
+      this.$vxeTableUtil.initVxeTable(tableOption).then((opts) => {
+        this.itemOption = opts;
+      });
+    },
+  },
+};
+</script>