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

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

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