cz-hjjc-oa/src/views/flow/MobileForm.vue

<script>
import formBuilder from '@/utils/formBuilder'
import moment from "moment/moment";
import MobileMultipleSelect from "@/components/MobileMultipleSelect/index.vue";
import {deepCopy} from "@/utils";
import {PopupManager} from "element-ui/lib/utils/popup";
import request from '@/utils/request'
import {getToken} from '@/utils/auth'
import { evaluateFieldLinkage } from "@/utils/fieldLinkage";
export default {
  components: {
    MobileMultipleSelect
  },
  props: {
    config: {
      type: Object
    },
    isFirstNode: {
      type: Boolean,
      default: true
    },
    needFlowTitle: {
      type: Boolean,
      default: true
    },
    readable: {
      type: Array,
      default: () => [],
      required: true
    },
    writeable: {
      type: Array,
      default: () => [],
      required: true
    },
    originalForm: {
      type: Object,
      default: () => ({}),
      required: true
    },
    subForm: {
      type: Map,
      default: () => new Map()
    },
    device: {
      type: String,
      default: 'desktop',
      required: true
    },
    fields: {
      type: Array,
      default: () => [],
      required: true
    },
    scriptContent: String,
    rules: {
      type: Object,
      default: () => ({}),
    },
    subRules: {
      type: Object,
      default: () => ({}),
    },
    logs: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      isShowModal: false,
      modalRender: () => {},
      zIndex: PopupManager.nextZIndex(),

      jointlySignLog: [], // 所有会签log记录
      form: {},
      // fill_flow_title 自动填充 watcher（监听组件内部 form，而不是父组件）
      _unwatchFillFlowTitle: null,
      file: {
        ggg: []
      },
      flows: {},
      showControl: {},
      vanCalendarOption: {
        isShow: false,
        forFormName: "",
        originalObj: ""
      },
      vanTimePickerOption: {
        isShow: false,
        forFormName: "",
        originalObj: ""
      },
      vanPopupOption: {
        isShow: false,
        forFormName: "",
        columns: [],
        originalObj: ""
      },
      multipleSelectOption: {
        isShow: false,
        forFormName: "",
        columns: [],
        originalObj: "",
        multipleLimit: 50,
        options: {
          label: 'name',
          value: 'id'
        }
      }
    }
  },
  methods: {
    setupFillFlowTitleWatcher() {
      try {
        if (typeof this._unwatchFillFlowTitle === "function") {
          this._unwatchFillFlowTitle();
        }
      } catch (e) {
        // ignore
      }
      this._unwatchFillFlowTitle = null;

      // 只在新建流程时生效（有 flow_id 代表待办/编辑/详情）
      if (this.$route?.query?.flow_id) return;

      const list = Array.isArray(this.fields) ? this.fields : [];
      const allowedTypes = new Set(["text", "textarea", "select"]);
      const fillField = list.find((f) => Number(f?.fill_flow_title) === 1 && allowedTypes.has(f?.type) && f?.name);
      if (!fillField) return;

      const fieldName = fillField.name;
      this._unwatchFillFlowTitle = this.$watch(
        () => (this.form ? this.form[fieldName] : undefined),
        (newVal) => {
          // 保留 isFirstNode 判断
          if (!this.isFirstNode || this.$route?.query?.flow_id) return;
          const parseMultiValue = (raw) => {
            if (raw === null || raw === undefined) return [];
            if (Array.isArray(raw)) return raw.map((v) => String(v).trim()).filter(Boolean);
            const s = String(raw).trim();
            if (!s) return [];
            const parts = s.includes("|") ? s.split("|") : (s.includes(",") ? s.split(",") : [s]);
            return parts.map((v) => String(v).trim()).filter(Boolean);
          };
          const getOptionLabelFromSelectionModelItems = (field, value) => {
            const items = field?.selection_model_items;
            if (!Array.isArray(items) || items.length === 0) return null;
            const v = String(value);
            const hit = items.find((it) => String(it?.id ?? it?.value ?? it?.key ?? "") === v) || null;
            if (!hit) return null;
            return hit?.name ?? hit?.label ?? hit?.title ?? (hit?.id !== undefined ? String(hit.id) : null);
          };
          const getOptionLabelFromStub = (field, value) => {
            const stub = field?.stub;
            if (!stub) return null;
            const lines = String(stub).split(/\\r?\\n/).map((s) => s.trim()).filter(Boolean);
            const v = String(value);
            return lines.find((line) => line === v) || null;
          };
          const formatSelectFillValue = (field, rawValue) => {
            const values = parseMultiValue(rawValue);
            if (values.length === 0) return "";
            if (values.length > 1) {
              return `${field.label || field.name} - ${values.join("、")}`;
            }
            const value = values[0];
            const optionLabel =
              getOptionLabelFromSelectionModelItems(field, value) ||
              getOptionLabelFromStub(field, value) ||
              value;
            return `${optionLabel} - ${value}`;
          };

          let v = "";
          if (fillField.type === "select") {
            v = formatSelectFillValue(fillField, newVal);
          } else {
            v = newVal === null || newVal === undefined ? "" : String(newVal).trim();
          }
          if (!v) return;
          this.$set(this.form, "flow_title", v);
        },
        { immediate: true }
      );
    },
    // 给自定义脚本注册的事件监听加保护，避免脚本内部抛错导致页面整体报错
    installSafeEventListenerGuard() {
      if (window.__oa_safe_listener_guard_installed) return;
      window.__oa_safe_listener_guard_installed = true;

      const map = new WeakMap();
      const origAdd = EventTarget && EventTarget.prototype && EventTarget.prototype.addEventListener;
      const origRemove = EventTarget && EventTarget.prototype && EventTarget.prototype.removeEventListener;
      if (!origAdd || !origRemove) return;

      EventTarget.prototype.addEventListener = function (type, listener, options) {
        if (typeof listener === "function") {
          let wrapped = map.get(listener);
          if (!wrapped) {
            wrapped = function (...args) {
              try {
                return listener.apply(this, args);
              } catch (e) {
                console.error("[OA Custom Script] event listener error:", e);
              }
            };
            map.set(listener, wrapped);
          }
          return origAdd.call(this, type, wrapped, options);
        }
        return origAdd.call(this, type, listener, options);
      };

      EventTarget.prototype.removeEventListener = function (type, listener, options) {
        if (typeof listener === "function") {
          const wrapped = map.get(listener);
          return origRemove.call(this, type, wrapped || listener, options);
        }
        return origRemove.call(this, type, listener, options);
      };
    },
    request,
    getToken,
    async validate() {
      const $vanForm = this.$refs['vanForm']
      if ($vanForm) {
        const res = await $vanForm.validate()
      }
      let subFormName = this.fields.filter(i => i.type === 'relation').map(i => i.name)
      for (let i = 0;i < subFormName.length;i++) {
        const $subVanForm = this.$refs[`subVanForm-${i}`]
        if ($subVanForm) {
          await $subVanForm.validate()
        }
      }
    },
  },
  computed: {
    linkage() {
      return evaluateFieldLinkage({
        fields: this.fields,
        form: this.form,
        writeable: this.writeable,
      });
    },
  },
  watch: {
    info(newVal) {
      let keys = newVal.map(i => i.name)
      keys.forEach(key => {
        this.form[key] = ''
      })
    },
    originalForm(newVal) {
      this.form = deepCopy(newVal)
      this.$nextTick(() => this.setupFillFlowTitleWatcher());
    },
    fields: {
      handler() {
        this.$nextTick(() => this.setupFillFlowTitleWatcher());
      },
      deep: true
    },
    scriptContent(newVal) {
      if(newVal) {
        try {
          // 使用 $nextTick 确保 DOM 已经渲染完成
          this.$nextTick(() => {
            try {
              this.installSafeEventListenerGuard();
              new Function(newVal).bind(this)();
            } catch (err) {
              console.error('脚本执行错误:', err);
              // 不阻止页面正常使用，只记录错误
            }
          });
        } catch (err) {
          console.error('脚本编译错误:', err);
        }
      }
    },
    isShowModal(newVal) {
      if(newVal) {
        this.zIndex = PopupManager.nextZIndex()
      }
    },
    logs: {
      handler: function (newVal) {
        if (newVal && newVal instanceof Array && newVal.length > 0) {
          this.jointlySignLog = newVal.filter(log => {
            try {
              JSON.parse(log.data)
              return log.is_jointly_sign && /custom_field_id/g.test(log.data)
            } catch (e) {
              return false
            }
          })
        } else {
          this.jointlySignLog = []
        }
      },
      immediate: true
    }
  },
  render(h) {
    const authFields = this.fields.map(field => ({
      ...field,
      _readable: this.readable.indexOf(field.id) !== -1,
      _writeable: this.writeable.indexOf(field.id) !== -1,
      _linkageDisabled: this.linkage.disabledFieldIds.has(Number(field.id)),
    }))
    const subFields = Array.from(this.subForm).map(i => i[1]?.customModel?.fields).filter(i => i).flat()
    if (this.needFlowTitle) {
      authFields.unshift({
        name: "flow_title",
        label: "工作名称",
        type: "text",
        label_show: 1,
        _readable: !this.isFirstNode,
        _writeable: this.isFirstNode,
      });
    }
    return h('div',[
      h('van-form',{
        ref: 'vanForm',
        props: {
          'validate-first': true,
          'scroll-to-error': true
        }
      },authFields.map(field => formBuilder.bind(this)(this.device, field, h))),
      //calendar
      (authFields.findIndex(i => i.type === 'date') !== -1 || subFields.findIndex(i => i.type === 'date')) ?
        h('van-calendar',{
          ref: `vanCalendar`,
          props: {
            position: 'bottom',
            value: this.vanCalendarOption.isShow,
            'min-date': this.$moment().subtract('years',10).toDate(),
            'max-date': this.$moment().add('years',10).toDate(),
          },
          on: {
            input: e => {
              this.$set(this.vanCalendarOption,'isShow',e)
              this.$set(this.vanCalendarOption,'isShow',false)
            },
            confirm: date => {
              if(typeof this.vanCalendarOption.originalObj === 'object') {
                this.$set(this.vanCalendarOption.originalObj,this.vanCalendarOption.forFormName,moment(date).format('YYYY-MM-DD'))
              } else {
                this.$set(this.form,this.vanCalendarOption.forFormName,moment(date).format('YYYY-MM-DD'))
              }
              this.$set(this.vanCalendarOption,'isShow',false)
            }
          }
        }) : '',
      //datetimepicker
      (authFields.findIndex(i => i.type === 'datetime') !== -1 || subFields.findIndex(i => i.type === 'datetime') !== -1) ?
        h('van-popup',{
          props: {
            value: this.vanTimePickerOption.isShow,
            position: 'bottom',
          },
          on: {
            input: e => {
              this.$set(this.vanTimePickerOption,'isShow',e)
            },
          }
        },[
          h('van-datetime-picker',{
            props: {
              type: 'datetime',
              title: '选择时间'
            },
            on: {
              confirm: time => {
                if(typeof this.vanTimePickerOption.originalObj === 'object') {
                  this.$set(this.vanTimePickerOption.originalObj,this.vanTimePickerOption.forFormName,moment(time).format('YYYY-MM-DD HH:mm:ss'))
                } else {
                  this.$set(this.form,this.vanTimePickerOption.forFormName,moment(time).format('YYYY-MM-DD HH:mm:ss'))
                }
                this.$set(this.vanTimePickerOption,'isShow',false)
              },
              cancel: _ => {
                this.$set(this.vanTimePickerOption,'isShow',false)
              }
            }
          })
        ]) : '',
      //popup
      (authFields.findIndex(i => i.type === 'select') !== -1 || subFields.findIndex(i => i.type === 'select') !== -1) ?
        h('van-popup',{
          props: {
            value: this.vanPopupOption.isShow,
            position: 'bottom',
          },
          on: {
            input: e => {
              this.$set(this.vanPopupOption,'isShow',e)
            },
          }
        },[
          h('van-picker',{
            props: {
              'show-toolbar': true,
              columns: this.vanPopupOption.columns,
              'value-key': typeof this.vanPopupOption.columns[0] === 'object' ? 'name' : 'yext'
            },
            on: {
              confirm: value => {
                if(typeof this.vanPopupOption.originalObj === 'object') {
                  this.$set(this.vanPopupOption.originalObj,this.vanPopupOption.forFormName,typeof value === 'object' ? value['id'] : value)
                } else {
                  this.$set(this.form,this.vanPopupOption.forFormName,typeof value === 'object' ? value['id'] : value)
                }
                this.$set(this.vanPopupOption,'isShow',false)
              },
              cancel: _ => {
                this.$set(this.vanPopupOption,'isShow',false)
              }
            }
          })
        ]) : '',
      // 多选
      (authFields.findIndex(i => ['relation-flow','choice','choices'].indexOf(i.type) !== -1) !== -1 || subFields.findIndex(i => ['relation-flow','choice','choices'].indexOf(i.type) !== -1) !== -1) ?
        h('van-popup',{
          props: {
            value: this.multipleSelectOption.isShow,
            position: 'bottom',
          },
          on: {
            input: e => {
              this.$set(this.multipleSelectOption,'isShow',e)
            },
          }
        },[
          h(MobileMultipleSelect,{
            props: {
              selectDataOpts: this.multipleSelectOption.columns,
              multipleLimit: this.multipleSelectOption.multipleLimit,
              options: this.multipleSelectOption.options,
              outputType: this.multipleSelectOption.outputType,
            },
            on: {
              confirm: value => {
                if(typeof this.multipleSelectOption.originalObj === 'object') {
                  console.log(this.multipleSelectOption.originalObj)
                  this.$set(this.multipleSelectOption.originalObj,this.multipleSelectOption.forFormName,value)
                } else {
                  this.$set(this.form,this.multipleSelectOption.forFormName,value)
                }
                this.$set(this.multipleSelectOption,'isShow',false)
              },
              cancel: _ => {
                this.$set(this.multipleSelectOption,'isShow',false)
              }
            }
          })
        ]) : '',

      // 用于编写脚本中弹窗
      h('vxe-modal',{
        props: {
          zIndex: this.zIndex,
          value: this.isShowModal,
          fullscreen: true,
          transfer: true
        },
        on: {
          input: e => {
            this.isShowModal = e
          }
        }
      }, [
        this.modalRender.bind(this)(h)
      ])
    ])
  }
}
</script>

<style scoped lang="scss">
</style>