cloud-web-corejs 1.1.0-dev.6 → 1.1.0-dev.61

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

@@ -5,7 +5,7 @@
       size="mini"
       label-position="left"
       label-width="120px"
-      class="setting-form"
+      class="setting-form form-settings-panel"
       @submit.native.prevent
     >
       <el-collapse v-model="formActiveCollapseNames" class="setting-collapse">
@@ -16,7 +16,10 @@
           <el-form-item class="form-item-label-top" :label="i18nt('数据库表')">
             <el-input type="text" v-model="formConfig.entity"></el-input>
           </el-form-item>
-          <el-form-item class="form-item-label-top" :label="i18nt('数据保存脚本编码')">
+          <el-form-item
+            class="form-item-label-top"
+            :label="i18nt('数据保存脚本编码')"
+          >
             <el-input
               type="text"
               v-model="formConfig.saveScriptCode"
@@ -54,12 +57,28 @@
               {{ i18nt("designer.setting.addCss") }}
             </el-button>
           </el-form-item>
+          <el-form-item
+            v-if="formConfig.layoutType === 'PC'"
+            class="form-item-label-top"
+            label="业务弹框作用域"
+          >
+            <el-radio-group v-model="dialogScopeValue">
+              <el-radio label="global">全局</el-radio>
+              <el-radio label="page">当前页面</el-radio>
+            </el-radio-group>
+            <div style="line-height: 1.6; color: #909399; font-size: 12px">
+              列表和详情模板需分别设置。当前页面模式只遮挡表单内容，顶部页签和左侧菜单仍可操作。
+            </div>
+          </el-form-item>
         </el-collapse-item>
         <el-collapse-item name="2" title="详情表单信息">
           <el-form-item :label="i18nt('加载详情数据')">
             <el-switch v-model="formConfig.isLoadEntity"></el-switch>
           </el-form-item>
-          <el-form-item class="form-item-label-top" :label="i18nt('详情数据脚本编码')">
+          <el-form-item
+            class="form-item-label-top"
+            :label="i18nt('详情数据脚本编码')"
+          >
             <el-input
               type="text"
               v-model="formConfig.formScriptCode"
@@ -86,7 +105,10 @@
               <i class="el-icon-edit"></i>
             </a>
           </el-form-item>
-          <el-form-item class="form-item-label-top" :label="i18nt('查看页面表单编码')">
+          <el-form-item
+            class="form-item-label-top"
+            :label="i18nt('查看页面表单编码')"
+          >
             <el-input
               class="search-input"
               max="200"
@@ -108,7 +130,10 @@
           <el-form-item :label="i18nt('查看页面表单名称')">
             {{ formConfig.editFormName }}
           </el-form-item>
-          <el-form-item class="form-item-label-top" :label="i18nt('新增页面表单编码')">
+          <el-form-item
+            class="form-item-label-top"
+            :label="i18nt('新增页面表单编码')"
+          >
             <el-input
               class="search-input"
               max="200"
@@ -202,12 +227,27 @@
               @change="changeWfEnabled"
             ></el-switch>
           </el-form-item>
-          <el-form-item class="form-item-label-top" :label="i18nt('默认流程单据类型名称')">
+          <el-form-item
+            class="form-item-label-top"
+            :label="i18nt('默认流程单据类型名称')"
+          >
             <el-input
               type="text"
               v-model="designer.vueInstance.reportTemplate.objTypeName"
             ></el-input>
           </el-form-item>
+          <el-form-item v-if="formConfig.wfEnabled" label="隐藏流程信息的角色">
+            <el-input
+              :value="formConfig.wfInfoHiddenRoleCodes"
+              @input="$set(formConfig, 'wfInfoHiddenRoleCodes', $event)"
+              placeholder="角色编码，多个用英文逗号分隔"
+              clearable
+            />
+            <div style="line-height: 1.6; color: #909399; font-size: 12px">
+              当前公司角色命中任意编码时，隐藏流程信息及审批入口，保留启动流程按钮；脚本可调用
+              this.setWfInfoHidden(true/false)。
+            </div>
+          </el-form-item>
           <el-form-item>
             <span slot="label"
               >流程主题
@@ -340,7 +380,10 @@
           </el-form-item>
 
           <div class="wf-group-title">高级</div>
-          <el-form-item class="form-item-label-top" :label="i18nt('引用流程的表单编码')">
+          <el-form-item
+            class="form-item-label-top"
+            :label="i18nt('引用流程的表单编码')"
+          >
             <el-input
               type="text"
               v-model="designer.vueInstance.reportTemplate.fromWfFormCode"
@@ -359,14 +402,25 @@
         </el-collapse-item>
         <el-collapse-item name="4" title="列表标签页信息（仅列表表单生效）">
           <el-form-item label-width="0">
-            <span style="color:rgba(0,0,0,0.45); font-size: 12px; line-height: 1.6;display:block;">
-              本组配置只从「查询列表页」所用的表单读取，在详情/编辑表单里设置不会生效
-            </span>
+            <el-tooltip placement="left" popper-class="xform-setting-help">
+              <span slot="content">
+                本组配置只从「查询列表页」所用的表单读取，在详情/编辑表单里设置不会生效
+              </span>
+              <span
+                >适用范围<i
+                  class="el-icon-info setting-help-icon"
+                  tabindex="0"
+                ></i
+              ></span>
+            </el-tooltip>
           </el-form-item>
           <el-form-item :label="i18nt('列表启用详情多标签')">
             <el-switch v-model="formConfig.multiTabEnabled"></el-switch>
           </el-form-item>
-          <el-form-item class="form-item-label-top" :label="i18nt('标签名称字段')">
+          <el-form-item
+            class="form-item-label-top"
+            :label="i18nt('标签名称字段')"
+          >
             <el-input
               type="text"
               v-model="formConfig.multiTabLabelField"
@@ -379,21 +433,45 @@
           >
             <el-switch v-model="formConfig.addTabEnabled"></el-switch>
             <span style="margin-left: 8px; color: #999; font-size: 12px">
-              开启后新增打开独立可关闭页签，需配置「标签名称字段」
+              <el-tooltip
+                content="开启后新增打开独立可关闭页签，需配置标签名称字段。"
+                placement="left"
+                popper-class="xform-setting-help"
+              >
+                <i
+                  class="el-icon-info setting-help-icon"
+                  tabindex="0"
+                  aria-label="新增页签说明"
+                ></i>
+              </el-tooltip>
             </span>
           </el-form-item>
-          <el-form-item :label="i18nt('流程启动后行为')" class="form-item-label-top">
+          <el-form-item class="stacked-setting submit-behavior-setting">
+            <span slot="label"
+              >{{ i18nt("流程启动后行为") }}
+              <el-tooltip
+                content="详情页保存并提交、直接启动流程成功后的行为，不填默认刷新当前页签。"
+                placement="left"
+                popper-class="xform-setting-help"
+              >
+                <i
+                  class="el-icon-info setting-help-icon"
+                  tabindex="0"
+                  aria-label="流程启动后行为说明"
+                ></i>
+              </el-tooltip>
+            </span>
             <el-radio-group v-model="formConfig.submitBehavior">
               <el-radio label="closeToList">关闭页签并回列表刷新</el-radio>
               <el-radio label="refreshCurrent">刷新当前页签</el-radio>
             </el-radio-group>
-            <div style="color: #999; font-size: 12px; line-height: 1.6">
-              详情页「保存并提交」「直接启动流程」成功后的行为，不填默认「刷新当前页签」
-            </div>
           </el-form-item>
         </el-collapse-item>
         <el-collapse-item name="5" title="其他标签页信息">
-          <el-form-item class="form-item-label-top" :label="i18nt('自定义列表标签名称')">
+          <el-form-item
+            class="form-item-label-top"
+            :label="i18nt('自定义列表标签名称')"
+          >
             <el-input
               type="text"
               v-model="formConfig.customListTabLabel"
@@ -406,11 +484,14 @@
           <el-form-item :label="i18nt('隐藏常规标签')">
             <el-switch v-model="formConfig.hideNormalTab"></el-switch>
           </el-form-item>
-          <el-form-item :label="i18nt('其他标签页配置')" class="form-item-label-top" label-width="0">
+          <el-form-item
+            :label="i18nt('其他标签页配置')"
+            class="stacked-setting other-tabs-setting"
+          >
             <div>
               <draggable
                 tag="ul"
-                class="draggable-box"
+                class="other-tabs-list"
                 :list="formConfig.otherTabList"
                 v-bind="{
                   group: 'optionsGroup',
@@ -459,7 +540,10 @@
             >
             </el-input>
           </el-form-item>
-          <el-form-item class="form-item-label-top" :label="i18nt('数据唯一标识')">
+          <el-form-item
+            class="form-item-label-top"
+            :label="i18nt('数据唯一标识')"
+          >
             <el-input
               class="search-input"
               max="200"
@@ -1255,6 +1339,14 @@ $\{wf.starterName\}提交的$\{pm_product_project.product_code\}$\{pm_product_pr
     });
   },
   computed: {
+    dialogScopeValue: {
+      get() {
+        return this.formConfig.dialogScope === "page" ? "page" : "global";
+      },
+      set(value) {
+        this.$set(this.formConfig, "dialogScope", value);
+      },
+    },
     // formDialog/formDrawer 底部操作按钮配置（存 formConfig，随模板保存）
     actionButtons() {
       return this.formConfig.actionButtons || [];
@@ -1714,7 +1806,7 @@ $\{wf.starterName\}提交的$\{pm_product_project.product_code\}$\{pm_product_pr
 
 <style lang="scss" scoped>
 .setting-form {
-  ::v-deep .el-form-item{
+  ::v-deep .el-form-item {
     .el-form-item__label {
       font-size: 13px;
       //text-overflow: ellipsis;
@@ -1724,11 +1816,20 @@ $\{wf.starterName\}提交的$\{pm_product_project.product_code\}$\{pm_product_pr
     &.el-form-item--mini.el-form-item {
       margin-bottom: 6px;
     }
-    &.el-form-item-second{
-      .el-form-item__label{
-        padding-left:4px;
-        &:before{content:"";width:5px;height:2px;background:#FF4D4F;display:inline-block;margin-right:4px;}
-        span{flex:1}
+    &.el-form-item-second {
+      .el-form-item__label {
+        padding-left: 4px;
+        &:before {
+          content: "";
+          width: 5px;
+          height: 2px;
+          background: #ff4d4f;
+          display: inline-block;
+          margin-right: 4px;
+        }
+        span {
+          flex: 1;
+        }
       }
     }
   }
@@ -1760,24 +1861,33 @@ $\{wf.starterName\}提交的$\{pm_product_project.product_code\}$\{pm_product_pr
   margin: 16px 0 8px;
   padding-left: 8px;
   //border-left: 3px solid #0073E5;
-  color: rgba(0,0,0,.65);
+  color: rgba(0, 0, 0, 0.65);
   font-size: 13px;
   font-weight: 600;
   line-height: 1.3;
-  background: rgba(0,0,0,0.04);
+  background: rgba(0, 0, 0, 0.04);
   padding: 4px 0 4px 8px;
   &:first-child {
     margin-top: 0;
   }
-  ~ .el-form-item{
-    .el-form-item__label{
-      padding-left:4px;
-      &:before{content:"";width:5px;height:2px;background:#0073e5;display:inline-block;margin-right:4px;}
-      span{flex:1}
+  ~ .el-form-item {
+    .el-form-item__label {
+      padding-left: 4px;
+      &:before {
+        content: "";
+        width: 5px;
+        height: 2px;
+        background: #0073e5;
+        display: inline-block;
+        margin-right: 4px;
+      }
+      span {
+        flex: 1;
+      }
     }
-    &.form-item-label-red{
-      .el-form-item__label:before{
-        background:#FF4D4F
+    &.form-item-label-red {
+      .el-form-item__label:before {
+        background: #ff4d4f;
       }
     }
   }
@@ -1792,3 +1902,126 @@ $\{wf.starterName\}提交的$\{pm_product_project.product_code\}$\{pm_product_pr
   word-break: break-all;
 }
 </style>
+
+<style lang="scss">
+.form-settings-panel.setting-form {
+  .el-form-item {
+    min-width: 0;
+  }
+  .el-form-item > .el-form-item__label {
+    flex-shrink: 0;
+    white-space: normal !important;
+    overflow-wrap: anywhere;
+    line-height: 20px;
+    text-align: left;
+  }
+  .el-form-item > .el-form-item__content {
+    min-width: 0;
+    line-height: 28px;
+  }
+  .el-form-item__content > .el-input,
+  .el-form-item__content > .el-select,
+  .el-form-item__content > .el-textarea {
+    width: 100% !important;
+    min-width: 0;
+  }
+  .el-form-item__content > .el-select {
+    width: calc(100% - 28px) !important;
+  }
+  .el-form-item__content > a {
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .el-radio {
+    margin: 0 12px 4px 0;
+    white-space: normal;
+    line-height: 22px;
+  }
+  .el-collapse-item__header {
+    height: auto;
+    min-height: 42px;
+    line-height: 22px;
+    padding: 8px 0;
+  }
+  .el-collapse-item__arrow {
+    flex-shrink: 0;
+  }
+  .el-form-item.stacked-setting {
+    display: block !important;
+    > .el-form-item__label {
+      float: none;
+      display: block !important;
+      width: 100% !important;
+      padding: 0 0 8px;
+    }
+    > .el-form-item__content {
+      margin-left: 0 !important;
+      width: 100%;
+    }
+  }
+  .submit-behavior-setting .el-radio-group {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+  .submit-behavior-setting .el-radio {
+    display: flex;
+    align-items: baseline;
+    margin: 0;
+  }
+  .other-tabs-list {
+    padding: 0;
+    margin: 0;
+    width: 100%;
+  }
+  .other-tabs-list > li {
+    display: grid;
+    grid-template-columns: 18px minmax(0, 1fr) 28px;
+    align-items: center;
+    gap: 8px;
+    padding: 10px 8px;
+    margin-bottom: 10px;
+    list-style: none;
+    background: #f5f7fa;
+    border-radius: 4px;
+  }
+  .other-tabs-list > li > .el-input {
+    grid-column: 2;
+    width: 100% !important;
+    min-width: 0;
+    margin: 0;
+  }
+  .other-tabs-list .drag-option {
+    grid-column: 1;
+    grid-row: 1 / 3;
+    cursor: move;
+    color: #909399;
+  }
+  .other-tabs-list .col-delete-button {
+    grid-column: 3;
+    grid-row: 1 / 3;
+    margin: 0;
+    padding: 6px;
+  }
+  .tree-options-error {
+    overflow-wrap: anywhere;
+    margin-bottom: 8px;
+  }
+}
+.setting-help-icon {
+  margin-left: 8px;
+  color: #909399;
+  cursor: help;
+  font-size: 14px;
+}
+.setting-help-icon:hover,
+.setting-help-icon:focus {
+  color: #409eff;
+}
+.el-tooltip__popper.xform-setting-help {
+  max-width: 300px;
+  line-height: 1.7;
+  overflow-wrap: anywhere;
+}
+</style>