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

<script>
import { deepCopy } from "@/utils";
import formBuilder from "@/utils/formBuilder";
import { PopupManager } from "element-ui/lib/utils/popup";
import { getToken } from "@/utils/auth";
import request from '@/utils/request'

export default {
  props: {
    flows: {
      type: Array,
      default: () => [],
    },
    isFirstNode: {
      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,
    },
    fileList: {
      type: Object,
      default: () => ({}),
      required: true,
    },
    scriptContent: String,
    rules: {
      type: Object,
      default: () => ({}),
    },
    subRules: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      zIndex: PopupManager.nextZIndex(),
      isShowModal: false,
      modalRender: () => {},

      action: process.env.VUE_APP_BASE_API,
      form: {},
      file: {},
    };
  },
  methods: {
    request,
    async validate() {
      return await this.$refs["elForm"].validate();
    }
  },
  computed: {},
  watch: {
    info(newVal) {
      let keys = newVal.map((i) => i.name);
      keys.forEach((key) => {
        this.form[key] = "";
      });
    },
    originalForm(newVal) {
      this.form = deepCopy(newVal);
    },
    fileList: {
      handler: function (newVal) {
        this.file = deepCopy(newVal);
      },
      immediate: true,
      deep: true,
    },
    scriptContent(newVal) {
      if (newVal) {
        try {
          new Function(newVal).bind(this)();
        } catch (err) {
          console.error(err);
        }
      }
    },
    isShowModal(newVal) {
      if (newVal) {
        this.zIndex = PopupManager.nextZIndex();
      }
    },
  },
  render(h) {
    const authFields = this.fields.map((field) => ({
      ...field,
      _readable:
        this.readable.indexOf(field.id) !== -1 || field.type === "label",
      _writeable: this.writeable.indexOf(field.id) !== -1,
    }));
    authFields.unshift({
      name: "flow_title",
      label: "工作名称",
      type: "text",
      gs_x: 0,
      gs_y: 0,
      gs_width: 12,
      gs_height: 1,
      label_show: 1,
      _readable: !this.isFirstNode,
      _writeable: this.isFirstNode,
    });
    return h("div", [
      h(
        "el-form",
        {
          ref: "elForm",
          class: "form",
          props: {
            model: this.form,
            "label-position": "right",
            "label-width": "120px",
            rules: this.rules,
            "inline-message": true,
          },
        },
        authFields.map((field) => formBuilder.bind(this)(this.device, field, h))
      ),
      // 用于编写脚本中弹窗
      h(
        "vxe-modal",
        {
          props: {
            zIndex: this.zIndex,
            value: this.isShowModal,
            height: 640,
            width: 860,
            "esc-closable": true,
          },
          on: {
            input: (e) => {
              this.isShowModal = e;
            },
          },
        },
        [this.modalRender.bind(this)(h)]
      ),
    ]);
  },
  created() {},
};
</script>

<style scoped lang="scss">
.form {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}
::v-deep .el-form-item {
  border: 1px solid #dee2e6;
  padding: 8px 12px;
  margin: -1px 0 0 -1px;
}
::v-deep .el-form-item__content {
}
</style>