cloud-web-corejs 1.0.281 → 1.1.0-dev.11

package/src/components/xform/form-designer/form-widget/dialog/formDialog.vue

@@ -1,365 +1,365 @@
-<template>
-  <el-dialog
-    :visible.sync="showDialog"
-    v-el-drag-dialog
-    v-el-dialog-center
-    v-bind="dialogConfig"
-    @close="close"
-  >
-    <!-- host:"list" —— 承载列表宿主页（自带「常规(详情)/列表」页签），行点击进详情等行为与整页一致。
-         list.vue 根节点自带 #containt，本分支不再套 id，避免嵌套重复。 -->
-    <div
-      class="cont designer-view fd-list-host"
-      v-bind="bodyConfig"
-      v-if="listHost"
-    >
-      <list-view-host :formCode="listFormCode" :param="dialogParam" />
-    </div>
-    <div class="cont designer-view" v-bind="bodyConfig" id="containt" v-else>
-      <v-form-render
-        :form-json.sync="formJson"
-        :form-data="formData"
-        :option-data="optionData"
-        ref="vFormRef"
-        :reportTemplate.sync="formTemplate"
-        :conditionParam.sync="conditionParam"
-        :formInsData.sync="formInsData"
-        v-if="showRender"
-        visible-key="showRender"
-        :parent-target="_self"
-        @reload="reload"
-        v-bind="formConfig"
-        :param="dialogParam"
-        :dataTableOption="dialogDataTableOption"
-        class="data-table_height"
-        @hook:mounted="handleFormMounted"
-      />
-    </div>
-    <span
-      slot="footer"
-      class="dialog-footer"
-      v-if="option.showFooter !== false"
-      v-bind="option.footerConfig"
-    >
-      <el-button type="primary" plain class="button-sty" @click="close">
-        <i class="el-icon-close el-icon"></i>
-        {{ $t2("取 消", "system.button.cancel2") }}
-      </el-button>
-      <!-- 模板配了 formConfig.actionButtons 时，用配置按钮替代「确定」（取消保持不变） -->
-      <template v-if="visibleFooterButtons">
-        <el-button
-          v-for="btn in visibleFooterButtons"
-          :key="btn.code"
-          :type="btn.type || 'primary'"
-          :plain="btn.plain === true"
-          class="button-sty"
-          :loading="!!btnLoadingMap[btn.code]"
-          @click="handleActionButton(btn)"
-        >
-          <i v-if="btn.icon" :class="[btn.icon, 'el-icon']"></i>
-          {{ btnLabel(btn) }}
-        </el-button>
-      </template>
-      <el-button
-        v-else-if="confirmButtonVisible"
-        type="primary"
-        @click="dialogSubmit"
-        class="button-sty"
-      >
-        <i class="el-icon-check el-icon"></i>
-        {{ $t2("确 定", "system.button.confirm2") }}
-      </el-button>
-    </span>
-  </el-dialog>
-</template>
-
-<script>
-import VFormRender from "../../../../../components/xform/form-render/index.vue";
-import {
-  resolveActionButtons,
-  hasButtonPermission,
-  isButtonVisible,
-  runActionButton,
-} from "@base/components/formDialog/actionButtons";
-
-export default {
-  components: {
-    VFormRender,
-    // 列表宿主页（x-tabs：常规/列表/其他页签/多标签编辑），仅 host:"list" 时加载
-    ListViewHost: () =>
-      import(
-        /* webpackChunkName: "form-list-host" */ "@base/views/user/form/view/list.vue"
-      ),
-  },
-  props: {
-    visiable: Boolean,
-    option: Object,
-  },
-  mixins: [],
-  inject: ["getFormConfig"],
-
-  mounted() {},
-  data() {
-    var that = this;
-    return {
-      showFormField: "_tt",
-      showDialog: true,
-      falseValue: false,
-      selectMulti: true,
-
-      formJson: {},
-      formData: {},
-      optionData: {},
-      showRender: false,
-      formTemplate: {},
-      /*      formCode: null,*/
-      layoutType: null,
-      conditionParam: null,
-      formInsData: null,
-      $grid: null,
-      currentLayoutType: null,
-      dataId: null,
-      formConfig: {},
-      confirmButtonVisible: true,
-      // 模板 formConfig.actionButtons（权限过滤后）；为空则底部保持默认「确定」
-      customButtons: null,
-      btnLoadingMap: {},
-      formRefMounted: false,
-    };
-  },
-  computed: {
-    formCode() {
-      return this.option.formCode;
-    },
-    dialogParam() {
-      return this.option?.param;
-    },
-    /**
-     * option.queryParam：强制合并进目标表单查询表格的请求参数
-     * （data-table 从 formRef.$attrs.dataTableOption.queryParam 读取，优先级高于表单自身查询条件）。
-     * 与 param 不是一回事：param 只是透传给模板脚本用的打开参数，不参与请求。
-     */
-    dialogDataTableOption() {
-      return this.option?.queryParam
-        ? { queryParam: this.option.queryParam }
-        : undefined;
-    },
-    // host:"list" —— 用列表宿主页承载（带「常规/列表」页签），而非直接渲染单个表单
-    listHost() {
-      return this.option?.host === "list";
-    },
-    listFormCode() {
-      return this.option?.formCode;
-    },
-    /* formConfig() {
-      return this.option?.formConfig;
-    }, */
-    dialogConfig() {
-      let customClass = "dialog-style list-dialog dialog-checkbox pd_0";
-      if (this.option.dialogConfig?.customClass) {
-        customClass = customClass + " " + this.option.dialogConfig.customClass;
-      }
-      let config = {
-        title: this.formTemplate.formName,
-        appendToBody: true,
-        modalAppendToBody: true,
-        closeOnClickModal: false,
-        modal: false,
-        width: "1200px",
-        fullscreen: this.option.fullscreen,
-      };
-      config = Object.assign({}, config, this.option.dialogConfig, {
-        customClass,
-      });
-      config.title = this.$t1(config.title);
-      return config;
-    },
-    // 自定义按钮渲染列表：权限已在 initCustomButtons 过滤，此处按 visible 脚本过滤
-    visibleFooterButtons() {
-      if (!this.customButtons || !this.customButtons.length) return null;
-      this.formRefMounted; // eslint-disable-line no-unused-expressions
-      let buttons = this.customButtons.filter((btn) =>
-        isButtonVisible(btn, this.$refs.vFormRef)
-      );
-      return buttons.length ? buttons : null;
-    },
-    bodyConfig() {
-      let config = {};
-      let classStr = this.currentLayoutType;
-      if (this.option.bodyConfig?.class) {
-        classStr = classStr + " " + this.option.bodyConfig.class;
-      }
-      if (this.option.showFooter == false) {
-        classStr = classStr + " nfootBtn";
-      }
-      config = Object.assign({}, config, this.option.bodyConfig, {
-        class: classStr,
-      });
-      return config;
-    },
-  },
-  created() {
-    /*let dataId = this.option?.formConfig?.dataId??null
-    delete this.option?.formConfig?.dataId
-    this.dataId = dataId;*/
-    this.formConfig = this.option?.formConfig || {};
-
-    let currentFormConfig = this.getFormConfig();
-    this.currentLayoutType = currentFormConfig.layoutType;
-
-    this.selectMulti = this.option.multiple ?? true;
-    // 列表宿主页自己会加载模板；仅在未指定标题时补取一次模板名做弹框标题
-    if (this.listHost && this.option.dialogConfig?.title) return;
-    this.getReportTemplate();
-  },
-  methods: {
-    reload(e, option) {
-      let updateParam = option?.updateParam || {};
-      if (this.formConfig) Object.assign(this.formConfig, updateParam);
-      this.showRender = false;
-      return this.getReportTemplate();
-    },
-    async getReportTemplate(callback) {
-      let param = {
-        objTypeCode: this.$attrs.objTypeCode,
-        objId: this.$attrs.objId,
-        taskId: this.$attrs.taskId,
-      };
-      this.conditionParam = param;
-      let url, data;
-      url = USER_PREFIX + `/formTemplate/getByFormCode`;
-      data = { stringOne: this.formCode };
-
-      let that = this;
-      return this.$http({
-        url: url,
-        method: `post`,
-        data: data,
-        isLoading: true,
-        loadingTarget: document.body,
-        modalStrictly: true,
-        success: (res) => {
-          let formTemplate = res.objx || {};
-          this.formTemplate = formTemplate;
-          // 列表宿主模式：只借模板名做标题，渲染与按钮均由宿主页自己负责
-          if (this.listHost) return;
-          this.formJson = formTemplate.formViewContent
-            ? JSON.parse(formTemplate.formViewContent)
-            : {};
-          this.layoutType = this.formJson.formConfig.layoutType;
-          let formConfig = this.formJson.formConfig;
-          if (formConfig.searchDialogUniqueField) {
-            this.fieldKey = formConfig.searchDialogUniqueField;
-          }
-          this.initCustomButtons(formConfig);
-
-          this.showRender = true;
-        },
-      });
-    },
-    // 模板 actionButtons：option.buttons 可覆盖；权限 formCode:authName 在此一次性过滤
-    initCustomButtons(formConfig) {
-      let buttons = resolveActionButtons(this.option?.buttons, formConfig);
-      this.customButtons = buttons
-        ? buttons.filter((btn) => hasButtonPermission(btn, this.formCode, this))
-        : null;
-    },
-    handleFormMounted() {
-      this.formRefMounted = true;
-    },
-    btnLabel(btn) {
-      return this.$t1 ? this.$t1(btn.label) : btn.label;
-    },
-    /**
-     * 自定义按钮点击：校验 → onClick 脚本 → done/closeAfter 收口。
-     * 收口时优先回调 option.onAction(payload, formRef, vm)；
-     * 未提供则仅按 closeAfter 关闭（按钮自身脚本即业务处理，不再走 option.confirm）。
-     */
-    handleActionButton(btn) {
-      let formRef = this.$refs.vFormRef;
-      if (!formRef || this.btnLoadingMap[btn.code]) return;
-      this.$set(this.btnLoadingMap, btn.code, true);
-      let clearLoading = () => this.$set(this.btnLoadingMap, btn.code, false);
-      runActionButton(btn, {
-        formRef,
-        host: this,
-        getSelection: () => [],
-        onSettle: (payload, close) => {
-          if (typeof this.option.onAction === "function") {
-            this.option.onAction(payload, formRef, this);
-          }
-          if (close) this.close();
-        },
-      }).then(clearLoading, clearLoading);
-    },
-    close() {
-      let formRef = this.$refs.vFormRef;
-      this.showDialog = false;
-      this.$emit("update:visiable", false);
-      this.option.close && this.option.close(formRef, this);
-    },
-    dialogSubmit() {
-      let formRef = this.$refs.vFormRef;
-      if (this.option.confirm) {
-        if (this.option.confirm(formRef, this) !== false) {
-          this.close();
-        }
-      } else {
-        this.close();
-      }
-    },
-    setConfirmButtonHidden(val) {
-      this.confirmButtonVisible = val || false;
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-::v-deep .H5 .h5-fixed-bottom-btns {
-  bottom: 95px;
-}
-
-.list-dialog {
-  .el-dialog__body {
-    height: calc(100% - 42px);
-    // host:"list"：.cont 已有确定高度，把它传给 list.vue 根节点 #containt，
-    // .tab-box 自身是 height:100%，父链没高度页签内容区会塌成一条
-    .cont.fd-list-host {
-      padding: 0;
-      ::v-deep > #containt {
-        height: 100%;
-      }
-    }
-    .cont {
-      height: calc(100vh - 210px);
-
-      &.nfootBtn {
-        height: calc(100vh - 158px);
-      }
-      &#containt {
-        padding: 0;
-        ::v-deep .grid-container {
-          outline: none;
-          &.detail-wrap .d-cont {
-            //height: calc(100vh - 150px);
-            .title .field-wrapper {
-              display: inline-block !important;
-            }
-          }
-        }
-      }
-    }
-  }
-
-  &.is-fullscreen .el-dialog__body {
-    .cont {
-      height: calc(100vh - 110px);
-
-      &.nfootBtn {
-        height: calc(100vh - var(--xform-dialog-body-offset, 58px));
-      }
-    }
-  }
-}
-</style>
+<template>
+  <el-dialog
+    :visible.sync="showDialog"
+    v-el-drag-dialog
+    v-el-dialog-center
+    v-bind="dialogConfig"
+    @close="close"
+  >
+    <!-- host:"list" —— 承载列表宿主页（自带「常规(详情)/列表」页签），行点击进详情等行为与整页一致。
+         list.vue 根节点自带 #containt，本分支不再套 id，避免嵌套重复。 -->
+    <div
+      class="cont designer-view fd-list-host"
+      v-bind="bodyConfig"
+      v-if="listHost"
+    >
+      <list-view-host :formCode="listFormCode" :param="dialogParam" />
+    </div>
+    <div class="cont designer-view" v-bind="bodyConfig" id="containt" v-else>
+      <v-form-render
+        :form-json.sync="formJson"
+        :form-data="formData"
+        :option-data="optionData"
+        ref="vFormRef"
+        :reportTemplate.sync="formTemplate"
+        :conditionParam.sync="conditionParam"
+        :formInsData.sync="formInsData"
+        v-if="showRender"
+        visible-key="showRender"
+        :parent-target="_self"
+        @reload="reload"
+        v-bind="formConfig"
+        :param="dialogParam"
+        :dataTableOption="dialogDataTableOption"
+        class="data-table_height"
+        @hook:mounted="handleFormMounted"
+      />
+    </div>
+    <span
+      slot="footer"
+      class="dialog-footer"
+      v-if="option.showFooter !== false"
+      v-bind="option.footerConfig"
+    >
+      <el-button type="primary" plain class="button-sty" @click="close">
+        <i class="el-icon-close el-icon"></i>
+        {{ $t2("取 消", "system.button.cancel2") }}
+      </el-button>
+      <!-- 模板配了 formConfig.actionButtons 时，用配置按钮替代「确定」（取消保持不变） -->
+      <template v-if="visibleFooterButtons">
+        <el-button
+          v-for="btn in visibleFooterButtons"
+          :key="btn.code"
+          :type="btn.type || 'primary'"
+          :plain="btn.plain === true"
+          class="button-sty"
+          :loading="!!btnLoadingMap[btn.code]"
+          @click="handleActionButton(btn)"
+        >
+          <i v-if="btn.icon" :class="[btn.icon, 'el-icon']"></i>
+          {{ btnLabel(btn) }}
+        </el-button>
+      </template>
+      <el-button
+        v-else-if="confirmButtonVisible"
+        type="primary"
+        @click="dialogSubmit"
+        class="button-sty"
+      >
+        <i class="el-icon-check el-icon"></i>
+        {{ $t2("确 定", "system.button.confirm2") }}
+      </el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import VFormRender from "../../../../../components/xform/form-render/index.vue";
+import {
+  resolveActionButtons,
+  hasButtonPermission,
+  isButtonVisible,
+  runActionButton,
+} from "@base/components/formDialog/actionButtons";
+
+export default {
+  components: {
+    VFormRender,
+    // 列表宿主页（x-tabs：常规/列表/其他页签/多标签编辑），仅 host:"list" 时加载
+    ListViewHost: () =>
+      import(
+        /* webpackChunkName: "form-list-host" */ "@base/views/user/form/view/list.vue"
+      ),
+  },
+  props: {
+    visiable: Boolean,
+    option: Object,
+  },
+  mixins: [],
+  inject: ["getFormConfig"],
+
+  mounted() {},
+  data() {
+    var that = this;
+    return {
+      showFormField: "_tt",
+      showDialog: true,
+      falseValue: false,
+      selectMulti: true,
+
+      formJson: {},
+      formData: {},
+      optionData: {},
+      showRender: false,
+      formTemplate: {},
+      /*      formCode: null,*/
+      layoutType: null,
+      conditionParam: null,
+      formInsData: null,
+      $grid: null,
+      currentLayoutType: null,
+      dataId: null,
+      formConfig: {},
+      confirmButtonVisible: true,
+      // 模板 formConfig.actionButtons（权限过滤后）；为空则底部保持默认「确定」
+      customButtons: null,
+      btnLoadingMap: {},
+      formRefMounted: false,
+    };
+  },
+  computed: {
+    formCode() {
+      return this.option.formCode;
+    },
+    dialogParam() {
+      return this.option?.param;
+    },
+    /**
+     * option.queryParam：强制合并进目标表单查询表格的请求参数
+     * （data-table 从 formRef.$attrs.dataTableOption.queryParam 读取，优先级高于表单自身查询条件）。
+     * 与 param 不是一回事：param 只是透传给模板脚本用的打开参数，不参与请求。
+     */
+    dialogDataTableOption() {
+      return this.option?.queryParam
+        ? { queryParam: this.option.queryParam }
+        : undefined;
+    },
+    // host:"list" —— 用列表宿主页承载（带「常规/列表」页签），而非直接渲染单个表单
+    listHost() {
+      return this.option?.host === "list";
+    },
+    listFormCode() {
+      return this.option?.formCode;
+    },
+    /* formConfig() {
+      return this.option?.formConfig;
+    }, */
+    dialogConfig() {
+      let customClass = "dialog-style list-dialog dialog-checkbox pd_0";
+      if (this.option.dialogConfig?.customClass) {
+        customClass = customClass + " " + this.option.dialogConfig.customClass;
+      }
+      let config = {
+        title: this.formTemplate.formName,
+        appendToBody: true,
+        modalAppendToBody: true,
+        closeOnClickModal: false,
+        modal: false,
+        width: "1200px",
+        fullscreen: this.option.fullscreen,
+      };
+      config = Object.assign({}, config, this.option.dialogConfig, {
+        customClass,
+      });
+      config.title = this.$t1(config.title);
+      return config;
+    },
+    // 自定义按钮渲染列表：权限已在 initCustomButtons 过滤，此处按 visible 脚本过滤
+    visibleFooterButtons() {
+      if (!this.customButtons || !this.customButtons.length) return null;
+      this.formRefMounted; // eslint-disable-line no-unused-expressions
+      let buttons = this.customButtons.filter((btn) =>
+        isButtonVisible(btn, this.$refs.vFormRef)
+      );
+      return buttons.length ? buttons : null;
+    },
+    bodyConfig() {
+      let config = {};
+      let classStr = this.currentLayoutType;
+      if (this.option.bodyConfig?.class) {
+        classStr = classStr + " " + this.option.bodyConfig.class;
+      }
+      if (this.option.showFooter == false) {
+        classStr = classStr + " nfootBtn";
+      }
+      config = Object.assign({}, config, this.option.bodyConfig, {
+        class: classStr,
+      });
+      return config;
+    },
+  },
+  created() {
+    /*let dataId = this.option?.formConfig?.dataId??null
+    delete this.option?.formConfig?.dataId
+    this.dataId = dataId;*/
+    this.formConfig = this.option?.formConfig || {};
+
+    let currentFormConfig = this.getFormConfig();
+    this.currentLayoutType = currentFormConfig.layoutType;
+
+    this.selectMulti = this.option.multiple ?? true;
+    // 列表宿主页自己会加载模板；仅在未指定标题时补取一次模板名做弹框标题
+    if (this.listHost && this.option.dialogConfig?.title) return;
+    this.getReportTemplate();
+  },
+  methods: {
+    reload(e, option) {
+      let updateParam = option?.updateParam || {};
+      if (this.formConfig) Object.assign(this.formConfig, updateParam);
+      this.showRender = false;
+      return this.getReportTemplate();
+    },
+    async getReportTemplate(callback) {
+      let param = {
+        objTypeCode: this.$attrs.objTypeCode,
+        objId: this.$attrs.objId,
+        taskId: this.$attrs.taskId,
+      };
+      this.conditionParam = param;
+      let url, data;
+      url = USER_PREFIX + `/formTemplate/getByFormCode`;
+      data = { stringOne: this.formCode };
+
+      let that = this;
+      return this.$http({
+        url: url,
+        method: `post`,
+        data: data,
+        isLoading: true,
+        loadingTarget: document.body,
+        modalStrictly: true,
+        success: (res) => {
+          let formTemplate = res.objx || {};
+          this.formTemplate = formTemplate;
+          // 列表宿主模式：只借模板名做标题，渲染与按钮均由宿主页自己负责
+          if (this.listHost) return;
+          this.formJson = formTemplate.formViewContent
+            ? JSON.parse(formTemplate.formViewContent)
+            : {};
+          this.layoutType = this.formJson.formConfig.layoutType;
+          let formConfig = this.formJson.formConfig;
+          if (formConfig.searchDialogUniqueField) {
+            this.fieldKey = formConfig.searchDialogUniqueField;
+          }
+          this.initCustomButtons(formConfig);
+
+          this.showRender = true;
+        },
+      });
+    },
+    // 模板 actionButtons：option.buttons 可覆盖；权限 formCode:authName 在此一次性过滤
+    initCustomButtons(formConfig) {
+      let buttons = resolveActionButtons(this.option?.buttons, formConfig);
+      this.customButtons = buttons
+        ? buttons.filter((btn) => hasButtonPermission(btn, this.formCode, this))
+        : null;
+    },
+    handleFormMounted() {
+      this.formRefMounted = true;
+    },
+    btnLabel(btn) {
+      return this.$t1 ? this.$t1(btn.label) : btn.label;
+    },
+    /**
+     * 自定义按钮点击：校验 → onClick 脚本 → done/closeAfter 收口。
+     * 收口时优先回调 option.onAction(payload, formRef, vm)；
+     * 未提供则仅按 closeAfter 关闭（按钮自身脚本即业务处理，不再走 option.confirm）。
+     */
+    handleActionButton(btn) {
+      let formRef = this.$refs.vFormRef;
+      if (!formRef || this.btnLoadingMap[btn.code]) return;
+      this.$set(this.btnLoadingMap, btn.code, true);
+      let clearLoading = () => this.$set(this.btnLoadingMap, btn.code, false);
+      runActionButton(btn, {
+        formRef,
+        host: this,
+        getSelection: () => [],
+        onSettle: (payload, close) => {
+          if (typeof this.option.onAction === "function") {
+            this.option.onAction(payload, formRef, this);
+          }
+          if (close) this.close();
+        },
+      }).then(clearLoading, clearLoading);
+    },
+    close() {
+      let formRef = this.$refs.vFormRef;
+      this.showDialog = false;
+      this.$emit("update:visiable", false);
+      this.option.close && this.option.close(formRef, this);
+    },
+    dialogSubmit() {
+      let formRef = this.$refs.vFormRef;
+      if (this.option.confirm) {
+        if (this.option.confirm(formRef, this) !== false) {
+          this.close();
+        }
+      } else {
+        this.close();
+      }
+    },
+    setConfirmButtonHidden(val) {
+      this.confirmButtonVisible = val || false;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+/* 原 ::v-deep .H5 .h5-fixed-bottom-btns{bottom:95px} 已删：本文件从未把 H5 类
+   绑到任何元素上（layoutType 只存在 data 里），该选择器从来没生效过。
+   H5 底栏已改为流内布局（styles/h5.scss 块 G），自然贴弹框底部，无需此补丁。 */
+
+.list-dialog {
+  .el-dialog__body {
+    height: calc(100% - 42px);
+    // host:"list"：.cont 已有确定高度，把它传给 list.vue 根节点 #containt，
+    // .tab-box 自身是 height:100%，父链没高度页签内容区会塌成一条
+    .cont.fd-list-host {
+      padding: 0;
+      ::v-deep > #containt {
+        height: 100%;
+      }
+    }
+    .cont {
+      height: calc(100vh - 210px);
+
+      &.nfootBtn {
+        height: calc(100vh - 158px);
+      }
+      &#containt {
+        padding: 0;
+        ::v-deep .grid-container {
+          outline: none;
+          &.detail-wrap .d-cont {
+            //height: calc(100vh - 150px);
+            .title .field-wrapper {
+              display: inline-block !important;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  &.is-fullscreen .el-dialog__body {
+    .cont {
+      height: calc(100vh - 110px);
+
+      &.nfootBtn {
+        height: calc(100vh - var(--xform-dialog-body-offset, 58px));
+      }
+    }
+  }
+}
+</style>