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 request from '@/utils/request'
import moment from "moment/moment";
import {defaultModalSize} from "@/settings";
import { getToken } from '@/utils/auth'
export default {
  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 {
      // 脚本注入控制的modal弹窗
      defaultModalSize,
      zIndex: PopupManager.nextZIndex(),
      isShowModal: false,
      modalRender: () => {},

      action: process.env.VUE_APP_BASE_API,
      form: {},

      jointlySignLog: [], // 所有会签log记录
      shortcuts: [
        {
          text: "一年前",
          onClick(picker) {
            picker.$emit(
              "pick",
              moment().subtract(1, "years").toDate()
            );
          },
        },
        {
          text: "一季度前",
          onClick(picker) {
            picker.$emit(
              "pick",
              moment().subtract(3, "months").toDate()
            );
          },
        },
        {
          text: "一月前",
          onClick(picker) {
            picker.$emit(
              "pick",
              moment().subtract(1, "months").toDate()
            );
          },
        },
        {
          text: "一周前",
          onClick(picker) {
            picker.$emit(
              "pick",
              moment().subtract(1, "weeks").toDate()
            );
          },
        },
        {
          text: "今天",
          onClick(picker) {
            picker.$emit("pick", new Date());
          },
        },
        {
          text: "一周后",
          onClick(picker) {
            picker.$emit("pick", moment().add(1, "weeks").toDate());
          },
        },
        {
          text: "一月后",
          onClick(picker) {
            picker.$emit("pick", moment().add(1, "months").toDate());
          },
        },
        {
          text: "一季度后",
          onClick(picker) {
            picker.$emit("pick", moment().add(3, "months").toDate());
          },
        },
        {
          text: "一年后",
          onClick(picker) {
            picker.$emit("pick", moment().add(1, "years").toDate());
          },
        },
      ],
      flows: {},
    };
  },
  methods: {
    getToken,
    request,
    async validate() {
      const $elForm = this.$refs['elForm']
      if ($elForm) {
        await this.$refs['elForm'].validate()
      }
      let subFormName = this.fields.filter(i => i.type === 'relation').map(i => i.name)
      for (let i = 0;i < subFormName.length;i++) {
        if (this.device === 'desktop') {
          let $subForm = this.$refs[`subForm-${subFormName[i]}`]
          if ($subForm) {
            const errMap = await this.$refs[`subForm-${subFormName[i]}`].validate(true)
            if (errMap) {
              throw new Error(errMap)
            }
          }
        } else {
          if (this.form[subFormName[i]] instanceof Array) {
            for (let j = 0;j < this.form[subFormName[i]].length;j++) {
              let $subForm = this.$refs[`elSubForm-${subFormName[i]}${j}`]
              if ($subForm) {
                await $subForm.validate()
              }
            }
          }
        }
      }
    },
  },
  computed: {},
  watch: {
    originalForm(newVal) {
      this.form = deepCopy(newVal)
      // let copyForm = deepCopy(newVal);
      // for (let key in copyForm) {
      //   Object.defineProperty(this.form, key, {
      //     value: copyForm[key],
      //     enumerable: true,
      //     writable: this.writeable.indexOf(this.fields.find(field => field.name === key)?.id) !== -1,
      //     configurable: true
      //   })
      // }
    },
    scriptContent(newVal) {
      if (newVal) {
        try {
          new Function(newVal).bind(this)();
        } catch (err) {
          console.error(err);
        }
      }
    },
    isShowModal(newVal) {
      if (newVal) {
        this.zIndex = PopupManager.nextZIndex();
      } else {
        this.modalRender = () => {}
      }
    },
    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 || field.type === "label",
      _writeable: this.writeable.indexOf(field.id) !== -1,
    }));
    if (this.needFlowTitle) {
      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", {
      class: `form-${this.device}`
    },[
      h(
        "el-form",
        {
          ref: "elForm",
          class: "form",
          props: {
            size: this.device === 'mobile' ? 'medium' : '',
            model: this.form,
            "label-position": "right",
            "label-width": this.device === 'mobile' ? "80px" : "130px",
            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: defaultModalSize.height,
            width: defaultModalSize.width,
            resize: true,
            transfer: true,
            "show-zoom": true,
            "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 {
}
::v-deep .el-radio, .el-radio__input {
  line-height: 1.5;
}
.form-mobile {
  .form {
    grid-template-columns: repeat(1, 1fr);
    box-shadow: 0 8px 12px #ebedf0;
    background: #fff;
  }
  ::v-deep .el-form-item {
    border: none;
    position: relative;
    &::after {
      content: '';
      height: 1px;
      background: #ebedf0;
      position: absolute;
      width: 90%;
      left: 5%;
      bottom: -0.5px;
    }
  }
  ::v-deep .el-form-item:nth-child(1) {
    border-radius: 6px 6px 0 0;
  }
  ::v-deep .el-form-item:nth-last-child(1) {
    border-radius: 0 0 6px 6px;
  }
}
</style>
<style lang="scss">
.form-mobile {
  .el-input__inner {
    border: none;
  }
  .el-date-picker.has-sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0!important;
    width: 100vw !important;
    height: 100vh !important;
    margin-top: 0 !important;
  }
  .el-picker-panel__body-wrapper {
    height: calc(100% - 39px);
    display: flex;
    flex-direction: column;
  }
  .el-picker-panel__sidebar {
    flex: 1;
  }
  .el-picker-panel__body {
    flex: 0;
    margin-left: 0 !important;
  }
  .el-date-picker .el-picker-panel__content {
    width: calc(100% - 30px);
  }
}
</style>