cloud-web-corejs 1.0.54-dev.78 → 1.0.54-dev.781

package/src/components/formDialog/index.vue

@@ -0,0 +1,724 @@
+<template>
+  <el-dialog
+    :title="title"
+    :visible.sync="showWrap"
+    :width="width"
+    :close-on-click-modal="false"
+    :append-to-body="true"
+    :custom-class="xformMode ? 'dialog-style list-dialog' : 'dialog-style'"
+    v-el-drag-dialog
+    @close="handleClose"
+    @closed="handleClosed"
+  >
+    <!-- xform 整表模式：按 formCode/formJson 渲染已配置的 xform 表单 -->
+    <div
+      v-if="xformMode"
+      class="cont"
+      v-loading="xformLoading"
+      :style="xformReady ? '' : 'min-height: 120px'"
+    >
+      <v-form-render
+        v-if="xformReady"
+        ref="vFormRef"
+        :form-json="xformJson"
+        :form-data="xformFormData"
+        :option-data="xformOptionData"
+        :global-dsv="xformGlobalDsv"
+        :report-template="xformTemplate"
+        :dynamic-creation="true"
+        @hook:mounted="handleXformMounted"
+      />
+    </div>
+    <el-form
+      v-else
+      ref="form"
+      :model="model"
+      :rules="mergedRules"
+      :label-width="labelWidth"
+      :disabled="readonly"
+      @submit.native.prevent
+    >
+      <el-row :gutter="16">
+        <el-col
+          v-for="field in visibleFields"
+          :key="field.prop"
+          :span="field.span || 24"
+        >
+          <el-form-item :label="field.label" :prop="field.prop">
+            <field-render
+              v-if="field.render"
+              :field="field"
+              :form-model="model"
+            />
+            <el-input
+              v-else-if="!field.type || field.type === 'input'"
+              v-model="model[field.prop]"
+              v-bind="controlProps(field)"
+            />
+            <el-input
+              v-else-if="field.type === 'textarea'"
+              v-model="model[field.prop]"
+              v-bind="controlProps(field)"
+            />
+            <el-input
+              v-else-if="field.type === 'search'"
+              class="search-input"
+              v-model="model[field.prop]"
+              v-el-readonly="searchReadonly(field)"
+              v-bind="controlProps(field)"
+              @clear="handleSearchClear(field)"
+            >
+              <i
+                slot="suffix"
+                class="el-input__icon el-icon-search"
+                @click="handleSearch(field)"
+              ></i>
+            </el-input>
+            <base-input-number
+              v-else-if="field.type === 'number'"
+              v-model="model[field.prop]"
+              style="width: 100%"
+              v-bind="controlProps(field)"
+            />
+            <el-select
+              v-else-if="field.type === 'select'"
+              v-model="model[field.prop]"
+              style="width: 100%"
+              :loading="optionsLoadingMap[field.prop]"
+              v-bind="controlProps(field)"
+            >
+              <el-option
+                v-for="opt in getOptions(field)"
+                :key="opt.value"
+                :label="opt.label"
+                :value="opt.value"
+              />
+            </el-select>
+            <el-date-picker
+              v-else-if="
+                field.type === 'date'
+                  || field.type === 'datetime'
+                  || field.type === 'daterange'
+              "
+              v-model="model[field.prop]"
+              style="width: 100%"
+              v-bind="controlProps(field)"
+            />
+            <el-switch
+              v-else-if="field.type === 'switch'"
+              v-model="model[field.prop]"
+              v-bind="controlProps(field)"
+            />
+            <el-radio-group
+              v-else-if="field.type === 'radio'"
+              v-model="model[field.prop]"
+              v-bind="controlProps(field)"
+            >
+              <el-radio
+                v-for="opt in getOptions(field)"
+                :key="opt.value"
+                :label="opt.value"
+                >{{ opt.label }}</el-radio
+              >
+            </el-radio-group>
+            <el-checkbox-group
+              v-else-if="field.type === 'checkbox'"
+              v-model="model[field.prop]"
+              v-bind="controlProps(field)"
+            >
+              <el-checkbox
+                v-for="opt in getOptions(field)"
+                :key="opt.value"
+                :label="opt.value"
+                >{{ opt.label }}</el-checkbox
+              >
+            </el-checkbox-group>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <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>
+      <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>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { openComponentDialog } from "@base/utils/componentDialog";
+
+// 自定义渲染逃生口：field.render(h, formModel, field) 返回 VNode
+const FieldRender = {
+  functional: true,
+  props: {
+    field: { type: Object, required: true },
+    formModel: { type: Object, required: true },
+  },
+  render(h, ctx) {
+    return ctx.props.field.render(h, ctx.props.formModel, ctx.props.field);
+  },
+};
+
+export default {
+  name: "formDialog",
+  components: {
+    FieldRender,
+    // xform 渲染器按需加载（独立 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 {
+      title: "",
+      width: "600px",
+      labelWidth: "100px",
+      fields: [],
+      model: {},
+      rules: {},
+      readonly: false,
+      showWrap: false,
+      confirmLoading: false,
+      // 词汇/脚本编码等远程数据源取回的下拉选项，按 field.prop 存放
+      remoteOptionsMap: {},
+      optionsLoadingMap: {},
+      // xform 整表模式（formCode/formJson 二选一触发）
+      xformMode: false,
+      xformLoading: false,
+      xformReady: false,
+      xformJson: null,
+      xformFormData: {},
+      xformOptionData: {},
+      xformGlobalDsv: {},
+      xformTemplate: null,
+    };
+  },
+  computed: {
+    // 显隐联动：visible 为函数时按 model 动态计算，隐藏字段不渲染也不参与校验
+    visibleFields() {
+      return this.fields.filter((field) =>
+        typeof field.visible === "function"
+          ? !!field.visible(this.model)
+          : field.visible !== false
+      );
+    },
+    mergedRules() {
+      const rules = {};
+      this.fields.forEach((field) => {
+        const list = [];
+        if (field.required) {
+          list.push({
+            required: true,
+            message: `${field.label}${this.$t2(
+              "不能为空",
+              "system.validate.notEmpty"
+            )}`,
+            trigger: ["blur", "change"],
+          });
+        }
+        if (field.rules) {
+          list.push(...[].concat(field.rules));
+        }
+        if (list.length) {
+          rules[field.prop] = list;
+        }
+      });
+      Object.keys(this.rules || {}).forEach((prop) => {
+        rules[prop] = (rules[prop] || []).concat(this.rules[prop]);
+      });
+      return rules;
+    },
+  },
+  watch: {
+    // 联动入口：深度监听 model，diff 出变化字段后派发 onChange / dependsOn 级联
+    model: {
+      deep: true,
+      handler() {
+        this.handleModelChange();
+      },
+    },
+  },
+  methods: {
+    open(options = {}) {
+      if (options.formCode || options.formJson) {
+        return this.openXform(options);
+      }
+      const { fields = [], model = {} } = options;
+      const formModel = { ...model };
+      fields.forEach((field) => {
+        if (field.prop in formModel) return;
+        formModel[field.prop] = this.defaultFieldValue(field);
+      });
+
+      this.title = options.title || "";
+      this.width = options.width || "600px";
+      this.labelWidth = options.labelWidth || "100px";
+      this.fields = fields;
+      this.model = formModel;
+      this.rules = options.rules || {};
+      this.readonly = options.readonly === true;
+      this._beforeConfirm = options.beforeConfirm;
+      this._settled = false;
+      this._prevModel = this.$baseLodash.cloneDeep(formModel);
+      this.showWrap = true;
+      this.loadRemoteOptions();
+
+      return new Promise((resolve) => {
+        this._resolve = resolve;
+      });
+    },
+    // xform 整表模式：加载模板后由 VFormRender 渲染，确认走 xform 校验并返回表单数据
+    openXform(options) {
+      this.xformMode = true;
+      this.title = options.title || "";
+      this.width = options.width || "1000px";
+      this.readonly = options.readonly === true;
+      this._beforeConfirm = options.beforeConfirm;
+      this._onReady = options.onReady;
+      this._settled = false;
+      this.xformFormData = options.model || options.formData || {};
+      this.xformOptionData = options.optionData || {};
+      this.xformGlobalDsv = options.globalDsv || {};
+      this.showWrap = true;
+
+      if (options.formJson) {
+        this.initXformJson(options.formJson, options.formCode);
+      } else {
+        this.loadXformTemplate(options.formCode);
+      }
+      return new Promise((resolve) => {
+        this._resolve = resolve;
+      });
+    },
+    // 与 vform/render.vue 同链路：formTemplate/getByFormCode 取模板 JSON
+    loadXformTemplate(formCode) {
+      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)
+            : {};
+          this.xformTemplate = template;
+          if (!this.title) {
+            this.title = template.name || template.formName || "";
+          }
+          this.initXformJson(formJson, formCode);
+        },
+      });
+    },
+    initXformJson(formJson, formCode) {
+      if (!formJson || !formJson.formConfig) {
+        this.$message.error(
+          `${this.$t2("表单模板不存在或内容为空", "system.message.formTemplateEmpty")}: ${formCode || ""}`
+        );
+        return;
+      }
+      this.xformJson = formJson;
+      this.xformReady = true;
+    },
+    // VFormRender 为异步组件，挂载时机不确定，用 hook:mounted 收口
+    handleXformMounted() {
+      const formRef = this.$refs.vFormRef;
+      if (!formRef) return;
+      if (this.readonly) {
+        formRef.setReadMode(true);
+      }
+      if (typeof this._onReady === "function") {
+        this._onReady(formRef, this);
+      }
+    },
+    handleXformConfirm() {
+      const formRef = this.$refs.vFormRef;
+      if (!formRef) return;
+      // validateForm 自带失败提示与滚动定位；通过后 getFormData(false) 直取数据
+      formRef.validateForm((valid) => {
+        if (!valid) return;
+        this.confirmWithData(this.$baseLodash.cloneDeep(formRef.getFormData(false)));
+      });
+    },
+    defaultFieldValue(field) {
+      if (field.type === "checkbox" || field.type === "daterange") return [];
+      if (field.type === "switch") return false;
+      return null;
+    },
+    evalFieldFlag(value) {
+      return typeof value === "function" ? !!value(this.model) : value;
+    },
+    getOptions(field) {
+      // 选项来源优先级：远程结果 > options 函数（可依赖 model 做级联）> 静态数组
+      const source
+        = this.remoteOptionsMap[field.prop]
+        || (typeof field.options === "function"
+          ? field.options(this.model)
+          : field.options)
+        || [];
+      return source.map((opt) =>
+        opt !== null && typeof opt === "object"
+          ? opt
+          : { label: String(opt), value: opt }
+      );
+    },
+    // 联动派发：对比上次快照，逐字段触发 onChange，并处理 dependsOn 级联
+    handleModelChange() {
+      const prev = this._prevModel || {};
+      const current = this.model;
+      const keys = new Set([...Object.keys(current), ...Object.keys(prev)]);
+      const changedKeys = [];
+      keys.forEach((key) => {
+        if (!this.$baseLodash.isEqual(current[key], prev[key])) {
+          changedKeys.push(key);
+        }
+      });
+      if (!changedKeys.length) return;
+      this._prevModel = this.$baseLodash.cloneDeep(current);
+
+      changedKeys.forEach((key) => {
+        const field = this.fields.find((item) => item.prop === key);
+        if (field && typeof field.onChange === "function") {
+          field.onChange(current[key], current, field, this);
+        }
+        // dependsOn：依赖字段变化时清空自身值并刷新远程选项
+        this.fields.forEach((item) => {
+          if (Array.isArray(item.dependsOn) && item.dependsOn.includes(key)) {
+            if (
+              !this.$baseLodash.isEqual(
+                current[item.prop],
+                this.defaultFieldValue(item)
+              )
+            ) {
+              this.$set(this.model, item.prop, this.defaultFieldValue(item));
+            }
+            this.reloadFieldOptions(item.prop);
+          }
+        });
+      });
+    },
+    // 供 onChange 回调使用：手动覆盖某字段选项
+    setFieldOptions(prop, options) {
+      this.$set(this.remoteOptionsMap, prop, options || []);
+    },
+    // 供 onChange 回调使用：按最新 model 重新拉取词汇/脚本选项
+    reloadFieldOptions(prop) {
+      const field = this.fields.find((item) => item.prop === prop);
+      if (!field) return;
+      if (field.dictCode) {
+        this.fetchDictOptions(field);
+      } else if (field.scriptCode) {
+        this.fetchScriptOptions(field);
+      }
+    },
+    loadRemoteOptions() {
+      this.remoteOptionsMap = {};
+      this.optionsLoadingMap = {};
+      this.fields.forEach((field) => {
+        if (field.dictCode) {
+          this.fetchDictOptions(field);
+        } else if (field.scriptCode) {
+          this.fetchScriptOptions(field);
+        }
+      });
+    },
+    // 词汇：/user/common_attribute/listItems，显示 value、取值 sn（与 xform 约定一致）
+    fetchDictOptions(field) {
+      this.$set(this.optionsLoadingMap, field.prop, true);
+      this.$getBaseDicts({
+        code: field.dictCode,
+        data:
+          typeof field.dictData === "function"
+            ? field.dictData(this.model)
+            : field.dictData,
+        success: ({ dicts }) => {
+          this.$set(this.optionsLoadingMap, field.prop, false);
+          this.$set(
+            this.remoteOptionsMap,
+            field.prop,
+            dicts.map((item) => ({ label: item.value, value: item.sn }))
+          );
+        },
+      });
+    },
+    // 脚本编码："formCode/scriptCode"，先取服务名再请求 bd_api 脚本接口
+    fetchScriptOptions(field) {
+      const parts = String(field.scriptCode)
+        .split("/")
+        .filter((item) => item);
+      if (parts.length < 2) {
+        console.warn(
+          `[formDialog] scriptCode 需为 "formCode/scriptCode" 格式：${field.scriptCode}`
+        );
+        return;
+      }
+      const [formCode, scriptCode] = parts;
+      this.$set(this.optionsLoadingMap, field.prop, true);
+      this.$http({
+        aes: true,
+        url: USER_PREFIX + "/formScript/getServiceName",
+        method: "post",
+        data: { formCode, scriptCode },
+        isLoading: false,
+        success: (res) => {
+          const serviceName = res.objx;
+          if (!serviceName) {
+            this.$set(this.optionsLoadingMap, field.prop, false);
+            this.$baseAlert("服务名不存在");
+            return;
+          }
+          this.$http({
+            url: `/${serviceName}/bd_api/${formCode}/${scriptCode}`,
+            method: "post",
+            data: {
+              ...(typeof field.scriptData === "function"
+                ? field.scriptData(this.model)
+                : field.scriptData),
+            },
+            isLoading: false,
+            success: (res2) => {
+              this.$set(this.optionsLoadingMap, field.prop, false);
+              let options;
+              if (typeof field.parseOptions === "function") {
+                options = field.parseOptions(res2) || [];
+              } else {
+                const objx = res2.objx;
+                const rows = Array.isArray(objx)
+                  ? objx
+                  : (objx && objx.records) || [];
+                const labelField = field.labelField || "label";
+                const valueField = field.valueField || "value";
+                options = rows.map((row) => ({
+                  label: row[labelField],
+                  value: row[valueField],
+                  row,
+                }));
+              }
+              this.$set(this.remoteOptionsMap, field.prop, options);
+            },
+          });
+        },
+      });
+    },
+    // 搜索框默认禁止手输（值由选择回填），传 props: { editable: true } 可放开
+    searchReadonly(field) {
+      return !(field.props && field.props.editable === true);
+    },
+    handleSearch(field) {
+      if (this.readonly || this.evalFieldFlag(field.disabled)) return;
+      if (typeof field.onSearch === "function") {
+        field.onSearch(this.model, field);
+      } else if (field.searchComponent) {
+        this.openSearchComponent(field);
+      } else if (field.searchDialog) {
+        this.openXformSearchDialog(field);
+      }
+    },
+    // 方式2：按路径打开自定义 Vue 弹框组件，组件 $emit("confirm", rows) 回写
+    openSearchComponent(field) {
+      const cfg = field.searchComponent;
+      const events = cfg.events || {};
+      openComponentDialog(
+        {
+          wrapper: false,
+          ...cfg,
+          events: {
+            ...events,
+            confirm: (...args) => {
+              if (typeof events.confirm === "function") {
+                events.confirm(...args);
+              }
+              this.applySearchResult(field, args[0], cfg);
+            },
+          },
+        },
+        this
+      );
+    },
+    // 方式3：打开 xform 搜索弹框（searchFormDialog，按 formCode 渲染目标表单的数据表格）
+    openXformSearchDialog(field) {
+      const cfg = field.searchDialog;
+      const { layoutType, fieldMap, onConfirm, showField, ...option } = cfg;
+      openComponentDialog(
+        {
+          componentPath:
+            "components/xform/form-designer/form-widget/dialog/searchFormDialog.vue",
+          wrapper: false,
+          // searchFormDialog 在 xform 环境外运行需要注入 getFormConfig
+          provide: {
+            getFormConfig: () => ({ layoutType: layoutType || "PC" }),
+          },
+          props: {
+            option: {
+              multiple: false,
+              ...option,
+              rows:
+                typeof cfg.rows === "function" ? cfg.rows(this.model) : cfg.rows,
+              confirm: (rows, formRef, dialogVm) => {
+                if (typeof cfg.confirm === "function") {
+                  return cfg.confirm(rows, formRef, dialogVm);
+                }
+                this.applySearchResult(field, rows, cfg);
+              },
+            },
+          },
+        },
+        this
+      );
+    },
+    // 选中结果回写 model：onConfirm 完全自定义 > fieldMap 逐字段映射 > 默认回写本字段
+    applySearchResult(field, rows, cfg) {
+      const list = Array.isArray(rows) ? rows : rows ? [rows] : [];
+      if (typeof cfg.onConfirm === "function") {
+        cfg.onConfirm(this.model, list, field);
+        return;
+      }
+      if (!list.length) return;
+      const row = list[0];
+      if (cfg.fieldMap) {
+        Object.keys(cfg.fieldMap).forEach((modelKey) => {
+          const source = cfg.fieldMap[modelKey];
+          this.$set(
+            this.model,
+            modelKey,
+            typeof source === "function" ? source(row, list) : row[source]
+          );
+        });
+      } else {
+        this.$set(this.model, field.prop, row[cfg.showField || field.prop]);
+      }
+    },
+    handleSearchClear(field) {
+      if (this.readonly || this.evalFieldFlag(field.disabled)) return;
+      if (typeof field.onClear === "function") {
+        field.onClear(this.model, field);
+      } else {
+        this.model[field.prop] = null;
+      }
+    },
+    controlProps(field) {
+      const defaults = {
+        placeholder: field.placeholder,
+        disabled: this.evalFieldFlag(field.disabled),
+        clearable: true,
+      };
+      switch (field.type) {
+        case "textarea":
+          Object.assign(defaults, { type: "textarea", rows: 3 });
+          break;
+        case "search":
+          // 搜索框与 xform vabsearch 同款样式：suffix 搜索图标 + clearable；
+          // 只读用 v-el-readonly（原生 readonly，不影响清除图标），不走 readonly prop
+          defaults.clearable = field.clearable !== false;
+          break;
+        case "number":
+          // baseInputNumber：scale 控制小数位（v-limit-number），negative 放开负号输入
+          Object.assign(defaults, {
+            scale: field.scale != null ? field.scale : 2,
+            negative: field.negative,
+            controls: false,
+          });
+          break;
+        case "date":
+          Object.assign(defaults, { type: "date", valueFormat: "yyyy-MM-dd" });
+          break;
+        case "datetime":
+          Object.assign(defaults, {
+            type: "datetime",
+            valueFormat: "yyyy-MM-dd HH:mm:ss",
+          });
+          break;
+        case "daterange":
+          Object.assign(defaults, {
+            type: "daterange",
+            valueFormat: "yyyy-MM-dd",
+          });
+          break;
+      }
+      const merged = { ...defaults, ...field.props };
+      if (field.type === "search") {
+        // editable 只用于 searchReadonly 判断，不透传给 el-input
+        delete merged.editable;
+      }
+      return merged;
+    },
+    settle(value) {
+      if (this._settled) return;
+      this._settled = true;
+      if (this._resolve) {
+        this._resolve(value);
+      }
+    },
+    handleConfirm() {
+      if (this.xformMode) {
+        this.handleXformConfirm();
+        return;
+      }
+      this.$refs.form.validate((valid) => {
+        if (!valid) return;
+        this.confirmWithData({ ...this.model });
+      });
+    },
+    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;
+      }
+    },
+    handleClose() {
+      // 取消/右上角关闭：resolve(null)；确认路径已先 settle，此处不生效
+      this.settle(null);
+    },
+    handleClosed() {
+      this.$destroy();
+      if (this.$el && this.$el.parentNode) {
+        this.$el.parentNode.removeChild(this.$el);
+      }
+    },
+  },
+};
+</script>
+
+<style></style>