cloud-web-corejs 1.0.280 → 1.1.0-dev.10

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

@@ -0,0 +1,661 @@
+<template>
+  <div class="detail-wrap">
+    <!-- el-form 必须包住 baseTabs（流程面板挂 .el-form .d-cont、导航挂 .slide-wrap）。
+         :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">
+            <el-button
+              v-if="canInvalid"
+              type="danger"
+              class="button-sty"
+              icon="el-icon-document-delete"
+              :disabled="billSaving || billSubmitting"
+              @click="invalidBill"
+              >{{ $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><em class="f-red">*</em>{{ $t1("阶梯价名称") }}</th>
+                  <td>
+                    <el-form-item
+                      prop="ladderName"
+                      :rules="[
+                        {
+                          required: true,
+                          message: $t1('阶梯价名称不能为空'),
+                          trigger: 'blur',
+                        },
+                      ]"
+                    >
+                      <el-input
+                        v-model="billModel.ladderName"
+                        clearable
+                      />
+                    </el-form-item>
+                  </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="startDate"
+                      :rules="[
+                        {
+                          required: true,
+                          message: $t1('请选择开始时间'),
+                          trigger: ['blur', 'change'],
+                        },
+                      ]"
+                    >
+                      <el-date-picker
+                        size="small"
+                        v-model="billModel.startDate"
+                        type="date"
+                        :placeholder="$t1('选择日期')"
+                        value-format="yyyy-MM-dd"
+                        :picker-options="$baseStartPickerOptions(billModel.endDate)"
+                        clearable
+                      />
+                    </el-form-item>
+                  </td>
+                  <th><em class="f-red">*</em>{{ $t1("结束时间") }}</th>
+                  <td>
+                    <el-form-item
+                      prop="endDate"
+                      :rules="[
+                        {
+                          required: true,
+                          message: $t1('请选择结束时间'),
+                          trigger: ['blur', 'change'],
+                        },
+                      ]"
+                    >
+                      <el-date-picker
+                        size="small"
+                        v-model="billModel.endDate"
+                        type="date"
+                        :placeholder="$t1('选择日期')"
+                        value-format="yyyy-MM-dd"
+                        :picker-options="$baseEndPickerOptions(billModel.startDate)"
+                        clearable
+                      />
+                    </el-form-item>
+                  </td>
+                  <th>{{ $t1("备注") }}</th>
+                  <td>
+                    <!-- 「流程中也能改的字段」示例：外层 el-form 整片禁用后，单个字段传
+                         :disabled="false" 是压不回来的（element 的 inputDisabled 是 OR），
+                         必须套一层 el-form 隔断注入，再用 fieldDisabled 决定它自己禁不禁。
+                         放开哪些字段配在 billOptions.wfEditableFields 里。
+                         ref="extraForm" + :model 一定要带上：el-form-item 只向最近的 form 注册，
+                         外层 editForm 不认识这个字段，mixin 的 validateBill() 靠 extraForm
+                         把它一起校验，否则这里写的 rules 是空转的。 -->
+                    <el-form ref="extraForm" :model="billModel">
+                      <el-form-item prop="memo">
+                        <el-input
+                          v-model="billModel.memo"
+                          :disabled="fieldDisabled('memo')"
+                          clearable
+                        />
+                      </el-form-item>
+                    </el-form>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </template>
+        </baseTabPane>
+
+        <baseTabPane :label="$t1('机构明细')">
+          <template #button>
+            <el-button
+              v-if="!billDisabled"
+              class="button-sty"
+              icon="el-icon-search"
+              @click="showSaleOrgDialog = true"
+              >{{ $t1("选择机构") }}</el-button
+            >
+          </template>
+          <template #default>
+            <vxe-grid
+              ref="saleOrgGrid"
+              :data="billModel.saleOrgItemDTOs"
+              v-bind="saleOrgOption"
+              @resizable-change="$vxeTableUtil.onColumnWitchChange"
+              @custom="$vxeTableUtil.customHandle"
+            ></vxe-grid>
+          </template>
+        </baseTabPane>
+
+        <baseTabPane :label="$t1('产品明细')">
+          <template #button>
+            <!-- 这张表流程中也放开，所以按钮的显隐跟着 fieldDisabled 而不是整片只读 -->
+            <el-button
+              v-if="!fieldDisabled('productItemDTOs')"
+              class="button-sty"
+              icon="el-icon-plus"
+              @click="addProductRow"
+              >{{ $t1("增行") }}</el-button
+            >
+          </template>
+          <template #default>
+            <!-- 「流程中放开整张子表」的写法：把 grid 整个包进内层 el-form，
+                 外层的整片 disabled 就进不来了（Form 是 provide elForm: this）。
+                 代价是这张表的行内 form-item 全部注册到内层 form，外层 editForm 不再认识它们，
+                 所以 ref 必须以 extraForm 开头 —— mixin 的 getExtraForms() 按前缀收集，
+                 validateBill() 会把它一起校验（同名 ref 会互相覆盖，所以这里叫 extraFormProduct）。
+                 单元格自己用 fieldDisabled('productItemDTOs') 决定禁不禁。 -->
+            <el-form ref="extraFormProduct" :model="billModel">
+              <vxe-grid
+                ref="productGrid"
+                :data="billModel.productItemDTOs"
+                v-bind="productOption"
+                @resizable-change="$vxeTableUtil.onColumnWitchChange"
+                @custom="$vxeTableUtil.customHandle"
+              ></vxe-grid>
+            </el-form>
+          </template>
+        </baseTabPane>
+
+        <baseTabPane :label="$t1('附件')">
+          <template #default>
+            <table class="table-detail">
+              <tbody>
+                <tr>
+                  <th><em class="f-red">*</em>{{ $t1("阶梯价凭证") }}</th>
+                  <td colspan="7">
+                    <!-- 附件必填校不出来是常见坑：async-validator 的 required 对空数组放行，
+                         所以在 validateBillData() 里用 checkBillRequired 的 attachment 类型兜 -->
+                    <baseUpload
+                      accept="file"
+                      multi="true"
+                      :file.sync="billModel.attachmentDTOs"
+                    ></baseUpload>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </template>
+        </baseTabPane>
+
+        <baseTabPane :label="$t1('操作日志')">
+          <template #default>
+            <oplogTable ref="oplogTable" :parent-target="_self"></oplogTable>
+          </template>
+        </baseTabPane>
+      </baseTabs>
+    </el-form>
+
+    <sale-org-dialog
+      v-if="showSaleOrgDialog"
+      :visiable.sync="showSaleOrgDialog"
+      multi="true"
+      @confirm="confirmInsertSaleOrg"
+    />
+  </div>
+</template>
+
+<script>
+/**
+ * demo C 单据详情：自定义控制器 + 流程，写法对齐 views/pmd/price/ladderPrice/edit.vue
+ * （也就是 std 项目里那些手写页面的标准写法）。
+ *
+ * 与 demo B 的差别只在这三个钩子里的请求：
+ *   buildLoadRequest → /ladderPrice/get
+ *   saveBill         → /ladderPrice/save 或 /update（整个模型直接当 body）
+ *   子表             → /ladderPrice/findLadderPriceProductItems 等独立接口
+ * 流程、页签、翻单的用法与 demo B 一模一样。
+ */
+import { bizBillDetailMixin } from "@base/components/bizTab";
+import { requiredHeader } from "@base/components/bizTab/billTableUtil";
+import BizBillActions from "@base/components/bizTab/BizBillActions.vue";
+import saleOrgDialog from "@base/views/user/sale_org/dialog.vue";
+import { BILL, STATUS_MAP } from "./billConfig";
+
+export default {
+  name: "demoBizTabWfDetail",
+  components: { BizBillActions, saleOrgDialog },
+  mixins: [bizBillDetailMixin],
+  data() {
+    return {
+      billModel: this.getDefaultModel(),
+      saleOrgOption: {},
+      productOption: {},
+      showSaleOrgDialog: false,
+    };
+  },
+  computed: {
+    billOptions() {
+      return {
+        prefix: BILL.prefix, // 流程服务名从这里推导（/pmd → pmd）
+        wfCode: BILL.wfCode,
+        titleField: BILL.titleField,
+        wfEnabled: true,
+        saveSubmitEnabled: true,
+        wfStartBindSave: true,
+        wfAgreeBindSave: true,
+        // 流程中（节点不允许改单据时）仍放开「备注」和整张「产品明细」；按节点区分就写成
+        // { "2": ["memo", "amount"], "*": ["memo"] }，key 是 wfInfo.taskStep
+        wfEditableFields: ["memo", "productItemDTOs"],
+      };
+    },
+    statusInfo() {
+      return STATUS_MAP[this.billModel.status] || { label: "-", cls: "" };
+    },
+    canInvalid() {
+      return (
+        !this.isAdd
+        && (this.billModel.status === 0 || this.billModel.status === 2)
+      );
+    },
+  },
+  mounted() {
+    this.loadBill();
+    this.initSaleOrgTable();
+    this.initProductTable();
+  },
+  methods: {
+    getDefaultModel() {
+      return {
+        id: null,
+        sn: null,
+        status: 0,
+        ladderName: null,
+        startDate: null,
+        endDate: null,
+        memo: null,
+        saleOrgItemDTOs: [],
+        customerItemDTOs: [], // demo 不维护，但要原样带回，避免整单保存把它清掉
+        productItemDTOs: [],
+        attachmentDTOs: [],
+      };
+    },
+
+    // ===== bizBillDetailMixin 要求实现的业务钩子 =====
+    buildLoadRequest(dataId) {
+      return {
+        url: BILL.urls.get,
+        method: "post",
+        data: { id: dataId },
+      };
+    },
+    applyBillData(objx) {
+      if (!objx) {
+        this.billModel = this.getDefaultModel();
+        return;
+      }
+      // 主表接口不回子表，子表各有自己的接口；先占位再异步填
+      this.billModel = Object.assign(this.getDefaultModel(), objx, {
+        saleOrgItemDTOs: [],
+        productItemDTOs: [],
+      });
+      this.loadSubTables();
+      this.initOplog();
+    },
+    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)
+        );
+      });
+    },
+    /**
+     * 数据级校验：子表必填只靠行内 el-form-item 是不够的——表格是 scrollY gt:20 的虚拟滚动，
+     * 屏幕外的行没渲染、form-item 不存在，外层 form 校验不到。所以这里按数据再兜一遍。
+     * 返回错误文案即中止保存/提交。
+     */
+    validateBillData() {
+      return (
+        // 表头：附件必填（集合型字段，el-form-item 的 required 对空数组是放行的）
+        this.checkBillRequired([
+          { field: "attachmentDTOs", label: this.$t1("阶梯价凭证"), type: "attachment" },
+        ])
+        // 子表：至少一行 + 逐行必填（fullData，不受虚拟滚动影响）
+        || this.checkRowsRequired({
+          label: this.$t1("机构明细"),
+          rows: this.getGridRows("saleOrgGrid", "saleOrgItemDTOs"),
+        })
+        || this.checkRowsRequired({
+          label: this.$t1("产品明细"),
+          rows: this.getGridRows("productGrid", "productItemDTOs"),
+          fields: [
+            { field: "productVonderCode", label: this.$t1("产品编码") },
+            { field: "ladderPrice", label: this.$t1("阶梯价") },
+            { field: "minQuantity", label: this.$t1("起始数量") },
+            { field: "maxQuantity", label: this.$t1("截止数量") },
+            // 自定义规则用 check，返回文案即不通过（前缀"第 N 行"会自动带上）
+            {
+              field: "maxQuantity",
+              check: (val, row) =>
+                Number(row.minQuantity) > Number(val)
+                  ? this.$t1("「起始数量」不能大于「截止数量」")
+                  : null,
+            },
+          ],
+        })
+      );
+    },
+    // 覆盖默认判据，叠加单据状态：mixin 默认只看流程（没启动就能改）。
+    // billDisabled（字段自动禁用）和「重置/保存」的显隐都以它为准。
+    canEditBill() {
+      if (this.hasWf) return !!(this.wfInfo && this.wfInfo.toModify);
+      return this.isAdd || this.billModel.status === 0;
+    },
+    // 已作废/审核中的单据不许再提交流程
+    canStartWf() {
+      return this.billModel.status === 0 || this.billModel.status == null;
+    },
+
+    // ===== 业务内部 =====
+    postSave(opts, resolve) {
+      let isEdit = !this.isAdd;
+      // 行内编辑过的子表以表格数据为准（vxe 行对象与模型同引用，这里只是保险）
+      let data = {
+        ...this.billModel,
+        saleOrgItemDTOs: this.getGridRows("saleOrgGrid", "saleOrgItemDTOs"),
+        productItemDTOs: this.getGridRows("productGrid", "productItemDTOs"),
+      };
+      this.$http({
+        url: isEdit ? BILL.urls.update : BILL.urls.save,
+        method: "post",
+        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),
+      });
+    },
+    getGridRows(ref, field) {
+      let grid = this.$refs[ref];
+      return grid ? grid.getTableData().fullData : this.billModel[field];
+    },
+    loadSubTables() {
+      let dataId = this.dataId;
+      if (!dataId) return;
+      this.$http({
+        url: BILL.urls.saleOrgItems,
+        method: "post",
+        data: { id: dataId },
+        modalStrictly: true,
+        success: (res) => {
+          this.billModel.saleOrgItemDTOs = (res && res.objx) || [];
+        },
+      });
+      this.$http({
+        url: BILL.urls.productItems,
+        method: "post",
+        data: { id: dataId },
+        modalStrictly: true,
+        success: (res) => {
+          this.billModel.productItemDTOs = (res && res.objx) || [];
+        },
+      });
+      this.$http({
+        url: BILL.urls.attachments,
+        method: "post",
+        data: { id: dataId },
+        modalStrictly: true,
+        success: (res) => {
+          this.billModel.attachmentDTOs = (res && res.objx) || [];
+        },
+      });
+    },
+    initOplog() {
+      let sn = this.billModel.sn;
+      let oplog = this.$refs.oplogTable;
+      if (!oplog || !sn) return;
+      oplog.initData({
+        url: BILL.urls.userLog,
+        param() {
+          return { businessCode: sn };
+        },
+      });
+    },
+    invalidBill() {
+      this.$baseConfirm(this.$t1("您确定要作废吗？")).then(() => {
+        this.$http({
+          url: BILL.urls.updateStatus,
+          method: "post",
+          data: { id: this.dataId, status: 3 },
+          isLoading: true,
+          success: (res) => {
+            this.$message({
+              message: res.content,
+              type: "success",
+              duration: 500,
+              onClose: () => this.reloadDetail(),
+            });
+          },
+        });
+      });
+    },
+    confirmInsertSaleOrg(rows) {
+      if (!rows || !rows.length) return;
+      let list = this.billModel.saleOrgItemDTOs || [];
+      let exists = {};
+      list.forEach((item) => {
+        exists[item.saleOrgId] = true;
+      });
+      let adds = [];
+      rows.forEach((row) => {
+        if (exists[row.id]) return;
+        adds.push({ saleOrgId: row.id, saleOrgName: row.name, status: 0 });
+      });
+      if (!adds.length) {
+        this.$message.warning(this.$t1("所选机构都已在明细中"));
+        return;
+      }
+      this.billModel.saleOrgItemDTOs = list.concat(adds);
+    },
+    addProductRow() {
+      this.billModel.productItemDTOs.push({
+        productVonderCode: null,
+        productName: null,
+        standardPrice: null,
+        ladderPrice: null,
+        minQuantity: 1,
+        maxQuantity: 99999999,
+      });
+    },
+    initSaleOrgTable() {
+      this.$vxeTableUtil
+        .initVxeTable({
+          vue: this,
+          tableRef: "saleOrgGrid",
+          tableName: "demo-bizTab-wf-saleOrg",
+          columns: [
+            { type: "checkbox", fixed: "left", width: 48, resizable: false },
+            { title: this.$t1("机构名称"), field: "saleOrgName", minWidth: 200 },
+            {
+              width: 47,
+              fixed: "right",
+              title: "",
+              sortable: false,
+              slots: {
+                default: ({ rowIndex }) => {
+                  if (this.billDisabled) return [];
+                  return [this.renderDeleteLink("saleOrgItemDTOs", rowIndex)];
+                },
+              },
+            },
+          ],
+        })
+        .then((opts) => {
+          this.saleOrgOption = opts;
+        });
+    },
+    initProductTable() {
+      // 这张表整个包在内层 el-form(extraFormProduct) 里，行内 form-item 注册的是内层 form；
+      // 禁用判据也不能用 billDisabled(整片只读)，要用 fieldDisabled——流程中它在白名单里就还能改。
+      let editCell = (row, field, index, required) => {
+        if (this.fieldDisabled("productItemDTOs")) return [row[field]];
+        // 字段名是变量，所以不用 JSX 的 v-model 语法糖，直接写它展开后的样子。
+        // baseInputNumber 是 el-input-number 的透传壳（v-bind $attrs / v-on $listeners）
+        let input = (
+          <base-input-number
+            value={row[field]}
+            onInput={(val) => {
+              row[field] = val;
+            }}
+          />
+        );
+        if (!required) return [input];
+        return [
+          <el-form-item
+            prop={"productItemDTOs." + index + "." + field}
+            rules={[{ required: true, trigger: ["blur", "change"] }]}
+          >
+            {input}
+          </el-form-item>,
+        ];
+      };
+      this.$vxeTableUtil
+        .initVxeTable({
+          vue: this,
+          tableRef: "productGrid",
+          tableName: "demo-bizTab-wf-product",
+          columns: [
+            { type: "checkbox", fixed: "left", width: 48, resizable: false },
+            {
+              title: this.$t1("产品编码"),
+              field: "productVonderCode",
+              width: 160,
+              slots: {
+                header: requiredHeader(this.$t1("产品编码")),
+                default: ({ row, rowIndex }) => {
+                  if (this.fieldDisabled("productItemDTOs")) return [row.productVonderCode];
+                  return [
+                    <el-form-item
+                      prop={"productItemDTOs." + rowIndex + ".productVonderCode"}
+                      rules={[{ required: true, trigger: ["blur", "change"] }]}
+                    >
+                      <el-input v-model={row.productVonderCode} size="small" clearable />
+                    </el-form-item>,
+                  ];
+                },
+              },
+            },
+            {
+              title: this.$t1("产品名称"),
+              field: "productName",
+              minWidth: 180,
+              slots: {
+                default: ({ row }) => {
+                  if (this.fieldDisabled("productItemDTOs")) return [row.productName];
+                  return [<el-input v-model={row.productName} size="small" clearable />];
+                },
+              },
+            },
+            {
+              title: this.$t1("阶梯价"),
+              field: "ladderPrice",
+              width: 140,
+              slots: {
+                header: requiredHeader(this.$t1("阶梯价")),
+                default: ({ row, rowIndex }) =>
+                  editCell(row, "ladderPrice", rowIndex, true),
+              },
+            },
+            {
+              title: this.$t1("起始数量"),
+              field: "minQuantity",
+              width: 140,
+              slots: {
+                header: requiredHeader(this.$t1("起始数量")),
+                default: ({ row, rowIndex }) =>
+                  editCell(row, "minQuantity", rowIndex, true),
+              },
+            },
+            {
+              title: this.$t1("截止数量"),
+              field: "maxQuantity",
+              width: 140,
+              slots: {
+                header: requiredHeader(this.$t1("截止数量")),
+                default: ({ row, rowIndex }) =>
+                  editCell(row, "maxQuantity", rowIndex, true),
+              },
+            },
+            {
+              width: 47,
+              fixed: "right",
+              title: "",
+              sortable: false,
+              slots: {
+                default: ({ rowIndex }) => {
+                  if (this.fieldDisabled("productItemDTOs")) return [];
+                  return [this.renderDeleteLink("productItemDTOs", rowIndex)];
+                },
+              },
+            },
+          ],
+        })
+        .then((opts) => {
+          this.productOption = opts;
+        });
+    },
+    renderDeleteLink(field, rowIndex) {
+      return (
+        <a
+          href="javascript:void(0);"
+          class="a-link"
+          onclick={(e) => {
+            e.stopPropagation();
+            this.billModel[field].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>
+      );
+    },
+  },
+};
+</script>