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

package/src/components/formDrawer/drawer.vue

@@ -0,0 +1,719 @@
+<template>
+  <el-drawer
+    v-bind="drawerConfig"
+    :visible.sync="showWrap"
+    @close="handleClose"
+    @closed="handleClosed"
+  >
+    <div class="fd-wrap">
+      <div
+        class="fd-cont"
+        v-loading="xformLoading"
+        :class="{ 'fd-cont--plain': plain, 'fd-cont--fill': fillHeight }"
+      >
+        <!--
+          designer-view + #containt 是全站渲染态样式挂载的两个钩子
+          （style.scss 的 `#containt .detail-wrap{...}` 与 `.preview-dialog,.designer-view{...}` 两大块），
+          render.vue / xform formDialog 都套了这层。抽屉不套就会丢：
+          详情头右侧按钮的 inline-block（会竖排换行）、.d-item 右侧 112px 的导航占位
+          （导航会盖住数据表格）、.detail-wrap 的 position:relative（导航挂到 el-drawer 上被裁掉）、
+          模块边框内边距。
+        -->
+        <!-- host:"list" —— 承载列表宿主页（自带「常规(详情)/列表」页签），行点击进详情、
+             多标签编辑等行为与整页一致。list.vue 根节点自带 #containt，此处只补 designer-view，
+             避免与下面的包裹层撞 id。抽屉只作视口，不接管其按钮。 -->
+        <div class="designer-view fd-list-host" v-if="listHost">
+          <list-view-host
+            ref="listHostRef"
+            :formCode="listFormCode"
+            :param="drawerParam"
+          />
+        </div>
+        <div id="containt" class="designer-view" v-else>
+          <v-form-render
+            v-if="showRender"
+            ref="vFormRef"
+            :class="fillHeight ? 'data-table_height' : ''"
+            :form-json="formJson"
+            :form-data="formData"
+            :option-data="optionData"
+            :global-dsv="globalDsv"
+            :report-template="formTemplate"
+            :data-id="dataId"
+            :conditionParam.sync="conditionParam"
+            :param="drawerParam"
+            :dataTableOption="selectMode ? dataTableOption : undefined"
+            :plain-detail-mode="plain"
+            :parent-target="_self"
+            visible-key="showRender"
+            @reload="reload"
+            @hook:mounted="handleXformMounted"
+          />
+        </div>
+      </div>
+      <!-- select 多选：已选清单条 -->
+      <div class="fd-checked" v-if="selectMode && selectMulti && showRender">
+        <el-tooltip
+          :enterable="false"
+          effect="dark"
+          :content="$t1('全部删除')"
+          placement="top"
+        >
+          <a class="allDel icon-quanbushanchu" @click="clearChecked()"></a>
+        </el-tooltip>
+        <div class="list">
+          <div
+            class="item"
+            v-for="(checkRow, index) in checkRows"
+            :key="'c' + index"
+          >
+            <p>{{ checkRow[showFormField] }}</p>
+            <a class="el-icon-close" @click="clearTable1Select(index)"></a>
+          </div>
+        </div>
+      </div>
+      <div class="fd-footer dialog-footer" v-if="showFooter">
+        <span class="fl tips" v-if="selectMode && !selectMulti">{{
+          $t1("注：双击确认选择（单选）")
+        }}</span>
+        <template v-if="readonly">
+          <el-button type="primary" class="button-sty" @click="showWrap = false"
+            ><i class="el-icon-close el-icon"></i
+            >{{ $t2("关 闭", "system.button.close2") }}</el-button
+          >
+        </template>
+        <!-- 自定义按钮（formConfig.actionButtons / options.buttons）：固定取消 + 配置按钮 -->
+        <template v-else-if="visibleFooterButtons">
+          <el-button
+            type="primary"
+            plain
+            class="button-sty"
+            @click="showWrap = false"
+            ><i class="el-icon-close el-icon"></i
+            >{{ $t2("取 消", "system.button.cancel2") }}</el-button
+          >
+          <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>
+        <template v-else>
+          <el-button
+            type="primary"
+            plain
+            class="button-sty"
+            @click="showWrap = false"
+            ><i class="el-icon-close el-icon"></i
+            >{{ $t2("取 消", "system.button.cancel2") }}</el-button
+          >
+          <el-button
+            type="primary"
+            class="button-sty"
+            :loading="confirmLoading"
+            @click="handleConfirm"
+            ><i class="el-icon-check el-icon"></i
+            >{{ $t2("确 定", "system.button.confirm2") }}</el-button
+          >
+        </template>
+      </div>
+    </div>
+  </el-drawer>
+</template>
+
+<script>
+import {
+  resolveActionButtons,
+  hasButtonPermission,
+  isButtonVisible,
+  runActionButton,
+} from "../formDialog/actionButtons";
+import { traverseAllWidgetsNew } from "../xform/utils/util";
+
+export default {
+  name: "formCodeDrawer",
+  components: {
+    // 列表宿主页（x-tabs：常规/列表/其他页签/多标签编辑），仅 host:"list" 时加载
+    ListViewHost: () =>
+      import(
+        /* webpackChunkName: "form-list-host" */ "@base/views/user/form/view/list.vue"
+      ),
+    // xform 渲染器按需加载（与 formDialog 共享同一 chunk），加载前先注册 xform 扩展控件
+    VFormRender: () =>
+      import("@base/components/xform/extension/extension-loader").then(
+        (ext) => {
+          ext.loadExtension();
+          return import("@base/components/xform/form-render/index.vue");
+        }
+      ),
+  },
+  data() {
+    return {
+      // open() 传入的完整 options（响应式，drawerConfig 等依赖它）
+      openOptions: {},
+      title: "",
+      showWrap: false,
+      showRender: false,
+      xformLoading: false,
+      confirmLoading: false,
+      readonly: false,
+      plain: false,
+      showFooter: true,
+      formJson: {},
+      formData: {},
+      optionData: {},
+      globalDsv: {},
+      formTemplate: {},
+      // 详情单据 id：xform 的 loadDefaultEntityData 依赖它（entity && dataId && scriptCode 才加载）
+      dataId: null,
+      conditionParam: null,
+      // select 模式（查询表格选择）
+      selectMode: false,
+      selectMulti: true,
+      checkRows: [],
+      fieldKey: "id",
+      showFormField: "_tt",
+      // 自定义按钮
+      customButtons: null,
+      btnLoadingMap: {},
+      formRefMounted: false,
+      // PC 专用（不支持 H5）：选择行为注入 data-table
+      dataTableOption: null,
+      $grid: null,
+    };
+  },
+  computed: {
+    drawerConfig() {
+      let customClass = "drawer-style list-drawer form-code-drawer";
+      const opt = this.openOptions || {};
+      if (this.plain) customClass += " form-code-drawer--plain";
+      if (opt.customClass) customClass += " " + opt.customClass;
+      const config = {
+        title: this.$t1 ? this.$t1(this.title) : this.title,
+        // 列表宿主页里还要能进详情，默认给宽一点
+        size: opt.size || (this.listHost ? "85%" : "62%"),
+        direction: opt.direction || "rtl",
+        appendToBody: true,
+        wrapperClosable: false,
+        ...opt.drawerConfig,
+        customClass,
+      };
+      return config;
+    },
+    drawerParam() {
+      return (this.openOptions && this.openOptions.param) || undefined;
+    },
+    // host:"list" —— 用列表宿主页承载（带「常规/列表」页签），而非直接渲染单个表单
+    listHost() {
+      return (this.openOptions || {}).host === "list";
+    },
+    listFormCode() {
+      return (this.openOptions || {}).formCode;
+    },
+    /**
+     * 列表型模板（顶层唯一控件是查询表格）时撑满抽屉高度。
+     * 查询表格的 vxe-grid 用 height="auto"，是按父元素实测高度算的，
+     * 父链（渲染器根 div → el-form）没有确定高度就会塌成一小块。
+     * 弹框里靠全局 .dialog-style .el-dialog__body .data-table_height 兜住，
+     * 抽屉不在该选择器下，需要本组件自己给这条链补高度。
+     * options.fillHeight 可强制开/关。
+     */
+    fillHeight() {
+      const opt = this.openOptions || {};
+      if (typeof opt.fillHeight === "boolean") return opt.fillHeight;
+      // 列表宿主页（页签 + 内部表格）必须撑满，否则页签内容区塌陷
+      if (this.listHost) return true;
+      const list = (this.formJson && this.formJson.widgetList) || [];
+      return (
+        list.length === 1
+        && list[0].type === "data-table"
+        && (list[0].options || {}).isQueryTable === true
+      );
+    },
+    // 自定义按钮渲染列表：权限已在 initCustomButtons 过滤，此处按 visible 脚本过滤
+    visibleFooterButtons() {
+      if (!this.customButtons || !this.customButtons.length) return null;
+      this.formRefMounted; // eslint-disable-line no-unused-expressions
+      const buttons = this.customButtons.filter((btn) =>
+        isButtonVisible(btn, this.$refs.vFormRef)
+      );
+      return buttons.length ? buttons : null;
+    },
+  },
+  methods: {
+    /**
+     * 打开抽屉。options 见 formDialog/README.md「$formDrawer」一节。
+     * resolve：默认按钮下 select 模式返回选中行数组、表单模式返回表单数据；
+     * 自定义按钮返回 {action, data}；取消/关闭返回 null。
+     */
+    open(options = {}) {
+      this.openOptions = options;
+      this.title = options.title || "";
+      this.readonly = options.readonly === true;
+      this.plain = options.plain === true;
+      // 列表宿主页自带按钮区，抽屉底部默认不占地方（显式传 showFooter:true 才出）
+      this.showFooter = this.listHost
+        ? options.showFooter === true
+        : options.showFooter !== false;
+      this.formData = options.model || options.formData || {};
+      this.dataId = options.dataId != null ? options.dataId : null;
+      this.optionData = options.optionData || {};
+      this.globalDsv = options.globalDsv || {};
+      this.conditionParam = options.conditionParam || {};
+      this._beforeConfirm = options.beforeConfirm;
+      this._onReady = options.onReady;
+      this._callerButtons = Array.isArray(options.buttons)
+        ? options.buttons
+        : null;
+      this._settled = false;
+
+      const select = options.select;
+      this.selectMode = !!select;
+      if (select) {
+        this.selectMulti = select.multiple !== false;
+        this.checkRows = this.$baseLodash.cloneDeep(select.rows || []);
+        if (select.fieldKey) this.fieldKey = select.fieldKey;
+        this._selectOption = select;
+        this.initDataTableOption(select);
+      }
+
+      this.showWrap = true;
+      if (this.listHost) {
+        // 列表宿主页自己会加载模板；这里只在未指定标题时补取一次模板名，避免重复请求
+        if (!this.title) this.loadTemplate(options.formCode, true);
+      } else {
+        this.loadTemplate(options.formCode);
+      }
+      return new Promise((resolve) => {
+        this._resolve = resolve;
+      });
+    },
+    // 选择行为注入 data-table（搬自 searchFormDialog，仅 PC 分支）
+    initDataTableOption(select) {
+      this.dataTableOption = {
+        class: "is-pointer",
+        queryFormDialog: true,
+        queryParam: select.queryParam || undefined,
+        onCheckboxChange: (param) => this.addDataTable(param),
+        onCheckboxAll: (param) => this.checkAll(param),
+        onCellDblclick: (param) => this.checkWithSubmit(param),
+        // 数据刷新后回勾已选行
+        callback: () => {
+          if (this.checkRows.length) {
+            const $grid = this.getGrid();
+            const datas = $grid.getTableData().tableData;
+            const fieldKey = this.fieldKey;
+            this.checkRows.forEach((checkRow) => {
+              const row = datas.find(
+                (item) => item[fieldKey] == checkRow[fieldKey]
+              );
+              if (row) $grid.setCheckboxRow(row, true);
+            });
+          }
+        },
+        otherConfig: {
+          onFilter: () => {
+            this.checkRows = [];
+          },
+        },
+        config: {
+          checkboxConfig: {
+            checkStrictly: true,
+            showHeader: this.selectMulti,
+            trigger: "row",
+          },
+        },
+      };
+    },
+    reload() {
+      this.showRender = false;
+      return this.loadTemplate(this.openOptions && this.openOptions.formCode);
+    },
+    /**
+     * 与 formDialog xform 模式同链路：formTemplate/getByFormCode 取模板 JSON。
+     * @param {Boolean} titleOnly host:"list" 时只借模板名做抽屉标题，
+     *   渲染与按钮都由列表宿主页自己负责，不在此处初始化。
+     */
+    loadTemplate(formCode, titleOnly) {
+      if (!formCode) {
+        this.$message.error("formCode 不能为空");
+        return;
+      }
+      this.xformLoading = true;
+      this.$http({
+        aes: true,
+        url: USER_PREFIX + "/formTemplate/getByFormCode",
+        method: "post",
+        data: { stringOne: formCode },
+        isLoading: false,
+        success: (res) => {
+          this.xformLoading = false;
+          const template = res.objx || {};
+          const formJson = template.formViewContent
+            ? JSON.parse(template.formViewContent)
+            : {};
+          if (!formJson || !formJson.formConfig) {
+            this.$message.error(
+              `${this.$t2(
+                "表单模板不存在或内容为空",
+                "system.message.formTemplateEmpty"
+              )}: ${formCode || ""}`
+            );
+            return;
+          }
+          this.formTemplate = template;
+          if (!this.title) {
+            this.title = template.formName || template.name || "";
+          }
+          if (titleOnly) return;
+          this.formJson = formJson;
+          const formConfig = formJson.formConfig;
+          if (this.selectMode && !this._selectOption.fieldKey) {
+            this.fieldKey = formConfig.searchDialogUniqueField || this.fieldKey;
+          }
+          if (this.selectMode) {
+            this.initShowFormField();
+          }
+          this.initCustomButtons(formConfig, formCode);
+          this.showRender = true;
+        },
+      });
+    },
+    // 自定义按钮：调用方 buttons 覆盖模板 actionButtons；权限（formCode:authName）一次性过滤
+    initCustomButtons(formConfig, formCode) {
+      const buttons = resolveActionButtons(this._callerButtons, formConfig);
+      this.customButtons = buttons
+        ? buttons.filter((btn) => hasButtonPermission(btn, formCode, this))
+        : null;
+    },
+    handleXformMounted() {
+      const formRef = this.$refs.vFormRef;
+      if (!formRef) return;
+      if (this.readonly) {
+        formRef.setReadMode(true);
+      }
+      this.formRefMounted = true;
+      if (typeof this._onReady === "function") {
+        this._onReady(formRef, this);
+      }
+    },
+    btnLabel(btn) {
+      return this.$t1 ? this.$t1(btn.label) : btn.label;
+    },
+    handleActionButton(btn) {
+      const formRef = this.$refs.vFormRef;
+      if (!formRef || this.btnLoadingMap[btn.code]) return;
+      this.$set(this.btnLoadingMap, btn.code, true);
+      const clearLoading = () => this.$set(this.btnLoadingMap, btn.code, false);
+      runActionButton(btn, {
+        formRef,
+        host: this,
+        getSelection: () => this.checkRows,
+        onSettle: (payload, close) => {
+          this.settle(payload);
+          if (close) this.showWrap = false;
+        },
+      }).then(clearLoading, clearLoading);
+    },
+    // 默认确定：select 模式返回选中行；表单模式走 xform 校验返回表单数据
+    handleConfirm() {
+      if (this.selectMode) {
+        const rows = this.checkRows;
+        const select = this._selectOption || {};
+        if (typeof select.onConfirm === "function") {
+          if (select.onConfirm(rows, this.$refs.vFormRef, this) === false) {
+            return;
+          }
+        }
+        this.settle(rows);
+        this.showWrap = false;
+        return;
+      }
+      const formRef = this.$refs.vFormRef;
+      if (!formRef) return;
+      formRef.validateForm((valid) => {
+        if (!valid) return;
+        this.confirmWithData(
+          this.$baseLodash.cloneDeep(formRef.getFormData(false))
+        );
+      });
+    },
+    confirmWithData(data) {
+      if (typeof this._beforeConfirm === "function") {
+        this.confirmLoading = true;
+        Promise.resolve()
+          .then(() => this._beforeConfirm(data))
+          .then(() => {
+            this.confirmLoading = false;
+            this.settle(data);
+            this.showWrap = false;
+          })
+          .catch(() => {
+            // beforeConfirm 失败时不关闭，由调用方自行提示错误
+            this.confirmLoading = false;
+          });
+      } else {
+        this.settle(data);
+        this.showWrap = false;
+      }
+    },
+    /* ------- select 模式表格操作（搬自 searchFormDialog，仅 PC） ------- */
+    getDataTableWidget() {
+      let result = null;
+      traverseAllWidgetsNew(this.formJson.widgetList, (widget) => {
+        if (!result && widget.type == "data-table") {
+          result = widget;
+        }
+      });
+      return result;
+    },
+    getGrid() {
+      if (!this.$grid) {
+        const dataTableWidget = this.getDataTableWidget();
+        this.$grid = this.$refs.vFormRef
+          .getWidgetRef(dataTableWidget.options.name)
+          .getGridTable();
+      }
+      return this.$grid;
+    },
+    initShowFormField() {
+      const showFormField
+        = this.formJson.formConfig.searchDialogNameField || null;
+      if (!showFormField) {
+        const dataTableWidget = this.getDataTableWidget();
+        if (dataTableWidget) {
+          const column = (dataTableWidget.options.tableColumns || []).find(
+            (col) => !!col.prop
+          );
+          if (column) this.showFormField = column.prop;
+        }
+      } else {
+        this.showFormField = showFormField;
+      }
+    },
+    addDataTable(obj) {
+      const fieldKey = this.fieldKey;
+      const row = obj.row;
+      const $table1 = obj.$table;
+      if (this.selectMulti) {
+        const rows = this.checkRows;
+        if (obj.checked) {
+          const flag = rows.some((item) => row[fieldKey] == item[fieldKey]);
+          if (!flag) rows.push(obj.row);
+        } else {
+          const rowid = obj.row[fieldKey];
+          const delIndex = rows.findIndex(
+            (item) => item[fieldKey] == rowid
+          );
+          if (delIndex > -1) rows.splice(delIndex, 1);
+        }
+      } else {
+        $table1.clearCheckboxRow();
+        $table1.setCheckboxRow(obj.row, true);
+        this.checkRows = [obj.row];
+      }
+      if (obj.checked) {
+        const aRows = $table1.getTableData().visibleData;
+        const cRows = $table1.getCheckboxRecords();
+        $table1.setAllCheckboxRow(aRows.length == cRows.length);
+      } else {
+        $table1.setAllCheckboxRow(false);
+      }
+    },
+    checkAll(res) {
+      const fieldKey = this.fieldKey;
+      const $grid = res.$grid;
+      const allRows = $grid.getTableData().visibleData;
+      $grid.setCheckboxRow(allRows, res.checked);
+      allRows.forEach((lineData) => {
+        const rowid = lineData[fieldKey];
+        const exist = this.checkRows.find((item) => item[fieldKey] == rowid);
+        if (res.checked) {
+          if (!exist) this.checkRows.push(lineData);
+        } else if (exist) {
+          const delIndex = this.checkRows.findIndex(
+            (item) => item[fieldKey] == rowid
+          );
+          if (delIndex > -1) this.checkRows.splice(delIndex, 1);
+        }
+      });
+    },
+    clearTable1Select(index) {
+      const fieldKey = this.fieldKey;
+      const row = this.checkRows[index];
+      const rowid = row[fieldKey];
+      const $grid1 = this.getGrid();
+      const rows = $grid1.getTableData().visibleData;
+      const row2 = this.findTreeRowById(rows, rowid);
+      if (this.selectMulti) {
+        if (row2) $grid1.setCheckboxRow(row2, false);
+      } else {
+        $grid1.clearCheckboxRow();
+      }
+      this.checkRows.splice(index, 1);
+      if (row2) $grid1.setAllCheckboxRow(false);
+    },
+    clearChecked() {
+      const $grid1 = this.getGrid();
+      $grid1.clearCheckboxRow();
+      this.checkRows = [];
+    },
+    findTreeRowById(rows, rowid) {
+      const fieldKey = this.fieldKey;
+      for (let i = 0; i < rows.length; i++) {
+        const row = rows[i];
+        if (row[fieldKey] == rowid) return row;
+        if (row.children) {
+          const mRow = this.findTreeRowById(row.children, rowid);
+          if (mRow) return mRow;
+        }
+      }
+      return null;
+    },
+    // 单选双击直接确认
+    checkWithSubmit(obj) {
+      if (this.selectMode && !this.selectMulti) {
+        const $grid1 = obj.$table || this.getGrid();
+        const rows = $grid1.getCheckboxRecords(true);
+        if (rows && rows.length) {
+          this.handleConfirm();
+        }
+      }
+    },
+    /* ------- 生命周期收口（同 formDialog） ------- */
+    settle(value) {
+      if (this._settled) return;
+      this._settled = true;
+      if (this._resolve) {
+        this._resolve(value);
+      }
+    },
+    handleClose() {
+      // 取消/右上角关闭：resolve(null)；确认路径已先 settle，此处不生效
+      this.settle(null);
+    },
+    handleClosed() {
+      this.$destroy();
+      if (this.$el && this.$el.parentNode) {
+        this.$el.parentNode.removeChild(this.$el);
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.fd-wrap {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+
+  .fd-cont {
+    flex: 1;
+    min-height: 0;
+    overflow: auto;
+    padding: 0 12px;
+
+    ::v-deep .grid-height {
+      height: 100% !important;
+    }
+
+    // 页面里靠 `#app #containt.designer-view` 抹掉这层白底投影，
+    // 抽屉是 appendToBody 挂在 #app 外面的，得自己抹
+    #containt.designer-view {
+      background: none;
+      box-shadow: none;
+    }
+
+    // 容器（detail-wrap/栅格/h5-card）的 1px dashed 是设计器里的辅助线，
+    // 渲染态不该出现。全局只在 .dialog-style 弹框体和 tabs 内容区里清掉了
+    // （style.scss 的两处 .designer-view .grid-container{outline:none}），
+    // 抽屉不在这两个上下文下，需要自己清。
+    ::v-deep .grid-container {
+      outline: none;
+    }
+
+    // 列表宿主页(host:"list")：把高度沿 designer-view → #containt(list.vue 根) 传下去。
+    // .tab-box 自身已是 height:100%，但父链没高度时页签内容区会塌成一条。
+    .fd-list-host {
+      height: 100%;
+
+      ::v-deep #containt {
+        height: 100%;
+      }
+    }
+
+    // 列表型模板：把确定高度一路传到 vxe-grid 的父元素，表格才能铺满抽屉
+    &.fd-cont--fill {
+      overflow: hidden;
+
+      ::v-deep .data-table_height {
+        height: 100%;
+
+        > .render-form {
+          height: 100%;
+        }
+      }
+    }
+  }
+
+  .fd-checked {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    padding: 4px 12px;
+    border-top: 1px solid #ebeef5;
+    overflow: hidden;
+
+    .allDel {
+      flex-shrink: 0;
+      margin-right: 8px;
+      cursor: pointer;
+    }
+
+    .list {
+      flex: 1;
+      display: flex;
+      overflow-x: auto;
+      white-space: nowrap;
+
+      .item {
+        display: inline-flex;
+        align-items: center;
+        margin-right: 8px;
+        padding: 0 6px;
+        background: #f4f6fa;
+        border-radius: 2px;
+
+        p {
+          margin: 0 4px 0 0;
+        }
+
+        a {
+          cursor: pointer;
+        }
+      }
+    }
+  }
+
+  .fd-footer {
+    flex-shrink: 0;
+    text-align: right;
+    padding: 10px 16px;
+    border-top: 1px solid #ebeef5;
+
+    .tips {
+      line-height: 28px;
+      color: #909399;
+      font-size: 12px;
+    }
+  }
+}
+</style>