cloud-web-corejs 1.0.54-dev.786 → 1.0.54-dev.787

package/src/components/xform/form-designer/setting-panel/action-button-config-dialog.vue

@@ -0,0 +1,241 @@
+<template>
+  <el-dialog
+    title="操作按钮配置"
+    :visible.sync="dialogVisible"
+    custom-class="dialog-style list-dialog"
+    :show-close="true"
+    append-to-body
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    :destroy-on-close="true"
+    width="560px"
+    v-dialog-drag
+    @close="handleClose"
+  >
+    <div class="cont">
+      <el-form label-width="130px" class="action-button-config-form">
+        <el-form-item label="按钮标识(code)">
+          <el-input
+            v-model="model.code"
+            class="all-width"
+            placeholder="必填，resolve 时用于区分按钮"
+            clearable
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="按钮文字">
+          <el-input v-model="model.label" class="all-width" clearable></el-input>
+        </el-form-item>
+        <el-form-item label="按钮类型">
+          <el-select v-model="model.type" class="all-width" clearable>
+            <el-option
+              v-for="item in typeOptions"
+              :key="item"
+              :label="item"
+              :value="item"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="朴素按钮(plain)">
+          <el-switch v-model="model.plain"></el-switch>
+        </el-form-item>
+        <el-form-item label="图标(icon)">
+          <el-input
+            v-model="model.icon"
+            class="all-width"
+            placeholder="如 el-icon-check"
+            clearable
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="权限唯一名称">
+          <el-input
+            v-model="model.authName"
+            class="all-width"
+            placeholder="留空则不校验权限（默认放行）"
+            clearable
+          >
+            <el-tooltip
+              slot="suffix"
+              :enterable="false"
+              effect="dark"
+              content="随机生成"
+              placement="top"
+            >
+              <i
+                class="el-input__icon el-icon-refresh-right"
+                @click="createRandomAuthName"
+              ></i>
+            </el-tooltip>
+          </el-input>
+        </el-form-item>
+        <el-form-item label="权限编码" v-if="authCode">
+          <div class="auth-code-text">
+            <el-tooltip effect="light" content="复制">
+              <a
+                class="a-link"
+                style="color: unset"
+                @click="copyAuthCode(authCode, $event)"
+              >
+                <span
+                  ><i
+                    class="el-icon-copy-document"
+                    style="margin-right: 2px"
+                  ></i
+                  >{{ authCode }}</span
+                >
+              </a>
+            </el-tooltip>
+          </div>
+        </el-form-item>
+        <el-form-item label="点击前校验表单">
+          <el-switch v-model="model.needValidate"></el-switch>
+        </el-form-item>
+        <el-form-item label="执行成功后关闭">
+          <el-switch v-model="model.closeAfter"></el-switch>
+        </el-form-item>
+        <el-form-item label="显隐条件脚本">
+          <a
+            href="javascript:void(0);"
+            class="a-link link-oneLind"
+            @click="editButtonScript('visible', visibleParams)"
+          >
+            <span>{{ model.visible }}</span>
+            <i class="el-icon-edit"></i>
+          </a>
+        </el-form-item>
+        <el-form-item label="点击事件脚本">
+          <a
+            href="javascript:void(0);"
+            class="a-link link-oneLind"
+            @click="editButtonScript('onClick', clickParams)"
+          >
+            <span>{{ model.onClick }}</span>
+            <i class="el-icon-edit"></i>
+          </a>
+        </el-form-item>
+      </el-form>
+    </div>
+    <div slot="footer" class="dialog-footer">
+      <el-button class="button-sty" icon="el-icon-close" @click="handleClose">
+        {{ i18nt("designer.hint.cancel") }}
+      </el-button>
+      <el-button
+        type="primary"
+        class="button-sty"
+        icon="el-icon-check"
+        @click="handleConfirm"
+      >
+        {{ i18nt("designer.hint.confirm") }}
+      </el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import i18n from "../../../../components/xform/utils/i18n";
+import eventMixin from "./property-editor/event-handler/eventMixin";
+import { generateId } from "../../../../components/xform/utils/util";
+import Clipboard from "clipboard";
+
+export default {
+  name: "action-button-config-dialog",
+  mixins: [i18n, eventMixin],
+  props: {
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+    // 编辑中的按钮对象（父级传克隆副本，确认时整体回传）
+    button: {
+      type: Object,
+      required: true,
+    },
+    formCode: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return {
+      // 本地编辑副本：不直改 prop，确认时整体回传
+      model: { ...this.button },
+      typeOptions: ["primary", "success", "warning", "danger", "info", "text"],
+      // 脚本注入参数与 actionButtons.js 执行时一致
+      clickParams: ["formData", "dialog", "done", "selection"],
+      visibleParams: ["button"],
+    };
+  },
+  computed: {
+    dialogVisible: {
+      get() {
+        return this.visible;
+      },
+      set(val) {
+        this.$emit("update:visible", val);
+      },
+    },
+    authCode() {
+      if (!this.model.authName || !this.formCode) {
+        return "";
+      }
+      return this.formCode + ":" + this.model.authName;
+    },
+  },
+  methods: {
+    createRandomAuthName() {
+      this.$set(this.model, "authName", "actionBtn" + generateId());
+      this.$message.success("生成成功");
+    },
+    editButtonScript(field, params) {
+      this.editEventHandler(field, params, {
+        customCode: () => this.model[field] || "",
+        callback: (code) => {
+          this.$set(this.model, field, code);
+        },
+      });
+    },
+    copyAuthCode(content, clickEvent) {
+      const clipboard = new Clipboard(clickEvent.target, {
+        text: () => content,
+      });
+      clipboard.on("success", () => {
+        this.$message.success("复制成功");
+        clipboard.destroy();
+      });
+      clipboard.on("error", () => {
+        this.$message.error("复制失败");
+        clipboard.destroy();
+      });
+      clipboard.onClick(clickEvent);
+    },
+    handleClose() {
+      this.dialogVisible = false;
+    },
+    handleConfirm() {
+      if (!this.model.code) {
+        this.$message.error("按钮标识(code)不能为空");
+        return;
+      }
+      this.$emit("confirm", { ...this.model });
+      this.dialogVisible = false;
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.action-button-config-form {
+  ::v-deep .el-form-item {
+    margin-bottom: 12px;
+  }
+  ::v-deep .el-form-item__label {
+    line-height: 28px;
+  }
+  ::v-deep .el-form-item__content {
+    line-height: 28px;
+  }
+  .auth-code-text {
+    word-break: break-all;
+    line-height: 1.5;
+  }
+}
+</style>

package/src/components/xform/form-designer/setting-panel/form-setting.vue

@@ -139,6 +139,55 @@
             </span>
           </el-form-item>
         </el-collapse-item>
+        <el-collapse-item name="actionButtons" title="操作按钮">
+          <!-- formDialog/formDrawer 按 formCode 打开时的底部按钮（formConfig.actionButtons），
+               未配置则回退默认取消/确定；权限编码 = formCode:authName（禁用清单机制，默认放行） -->
+          <el-form-item label-width="0">
+            <draggable
+              tag="ul"
+              class="draggable-box"
+              v-if="actionButtons.length"
+              :list="actionButtons"
+              v-bind="{ group: 'actionBtnGroup', ghostClass: 'ghost', handle: '.drag-option' }"
+            >
+              <li
+                v-for="(btn, btnIdx) in actionButtons"
+                :key="btnIdx"
+                class="col-item action-button-item"
+              >
+                <i class="el-icon-s-operation drag-option"></i>
+                <span class="action-button-label">{{
+                  btn.label || btn.code
+                }}</span>
+                <el-button
+                  circle
+                  plain
+                  size="mini"
+                  icon="el-icon-edit"
+                  @click="editActionButton(btnIdx)"
+                ></el-button>
+                <el-button
+                  circle
+                  plain
+                  size="mini"
+                  type="danger"
+                  icon="el-icon-minus"
+                  @click="removeActionButton(btnIdx)"
+                ></el-button>
+              </li>
+            </draggable>
+            <div>
+              <el-button
+                type="text"
+                icon="el-icon-circle-plus-outline"
+                class="add-option"
+                @click="addActionButton"
+              >
+                {{ i18nt("添加按钮") }}
+              </el-button>
+            </div>
+          </el-form-item>
+        </el-collapse-item>
         <el-collapse-item name="3" title="流程信息">
           <el-form-item :label="i18nt('启用流程')">
             <el-switch
@@ -955,6 +1004,14 @@
       @confirm="confirmBdCompanyEnvDialog2"
       :multi="false"
     />
+
+    <actionButtonConfigDialog
+      v-if="showActionButtonDialog && currentActionButton"
+      :visible.sync="showActionButtonDialog"
+      :button="currentActionButton"
+      :form-code="currentFormCode"
+      @confirm="confirmActionButton"
+    />
   </div>
 </template>
 
@@ -970,6 +1027,7 @@ import wfObjConfigDialog from "./wfObjConfigDialog.vue";
 import bdCompanyEnvDialog from "@base/views/bd/setting/bd_company_env/dialog";
 import Draggable from "vuedraggable";
 import formDynamicFieldSetting from "./form-dynamicField-setting.vue";
+import actionButtonConfigDialog from "./action-button-config-dialog.vue";
 
 export default {
   name: "form-setting",
@@ -980,6 +1038,7 @@ export default {
     bdCompanyEnvDialog,
     Draggable,
     formDynamicFieldSetting,
+    actionButtonConfigDialog,
   },
   props: {
     designer: Object,
@@ -1056,6 +1115,10 @@ export default {
       showBdCompanyEnvDialog1: false,
       showBdCompanyEnvDialog2: false,
 
+      showActionButtonDialog: false,
+      currentActionButton: null,
+      currentActionButtonIndex: -1,
+
       globalConfigParams: ["dataId", "formCode"],
 
       tip1: `流程主题表达式设置说明。
@@ -1104,6 +1167,19 @@ $\{wf.starterName\}提交的$\{pm_product_project.product_code\}$\{pm_product_pr
       this.designer.emitEvent("form-css-updated", deepClone(this.cssClassList));
     });
   },
+  computed: {
+    // formDialog/formDrawer 底部操作按钮配置（存 formConfig，随模板保存）
+    actionButtons() {
+      return this.formConfig.actionButtons || [];
+    },
+    currentFormCode() {
+      const reportTemplate =
+        this.designer && this.designer.vueInstance
+          ? this.designer.vueInstance.reportTemplate
+          : null;
+      return (reportTemplate && reportTemplate.formCode) || "";
+    },
+  },
   mounted() {
     /* SettingPanel和FormWidget为兄弟组件, 在FormWidget加载formConfig时，
          此处SettingPanel可能无法获取到formConfig.cssCode, 故加个延时函数！ */
@@ -1116,6 +1192,46 @@ $\{wf.starterName\}提交的$\{pm_product_project.product_code\}$\{pm_product_pr
     this.getListByObjTypeCode();
   },
   methods: {
+    ensureActionButtons() {
+      if (!Array.isArray(this.formConfig.actionButtons)) {
+        this.$set(this.formConfig, "actionButtons", []);
+      }
+      return this.formConfig.actionButtons;
+    },
+    addActionButton() {
+      this.currentActionButtonIndex = -1;
+      this.currentActionButton = {
+        code: "",
+        label: "",
+        type: "primary",
+        plain: false,
+        icon: "",
+        authName: "",
+        needValidate: false,
+        closeAfter: true,
+        visible: "",
+        onClick: "",
+      };
+      this.showActionButtonDialog = true;
+    },
+    editActionButton(index) {
+      this.currentActionButtonIndex = index;
+      this.currentActionButton = deepClone(this.formConfig.actionButtons[index]);
+      this.showActionButtonDialog = true;
+    },
+    removeActionButton(index) {
+      this.formConfig.actionButtons.splice(index, 1);
+    },
+    confirmActionButton(btn) {
+      const list = this.ensureActionButtons();
+      if (this.currentActionButtonIndex > -1) {
+        this.$set(list, this.currentActionButtonIndex, btn);
+      } else {
+        list.push(btn);
+      }
+      this.currentActionButton = null;
+      this.currentActionButtonIndex = -1;
+    },
     showEventCollapse() {
       if (this.designerConfig["eventCollapse"] === undefined) {
         return true;

package/src/components/xform/form-designer/setting-panel/property-editor/container-detail/detail-editor.vue

@@ -6,6 +6,12 @@
     <el-form-item :label="i18nt('隐藏导航')">
       <el-switch v-model="optionModel.hideNav"></el-switch>
     </el-form-item>
+    <el-form-item :label="i18nt('隐藏标题栏')">
+      <el-switch v-model="optionModel.hideHeader"></el-switch>
+      <span style="margin-left: 8px; color: #999; font-size: 12px">
+        整条标题栏不渲染（含标题、翻单/流程按钮及拖入的按钮控件）
+      </span>
+    </el-form-item>
     <el-form-item :label="i18nt('designer.setting.colsOfGrid')"></el-form-item>
     <el-form-item label-width="0">
       <draggable tag="ul" class="draggable-box" :list="selectedWidget.panes"

package/src/components/xform/form-designer/widget-panel/widgetsConfig.js

@@ -445,6 +445,7 @@ export const containers = [
       label: "单据详情",
       detailContainer: true,
       hideNav: false,
+      hideHeader: false,
       // colHeight: null,
       customClass: "",
       wfEnabled: false,