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

<script>
import { deepCopy } from "@/utils"
import formBuilder from '@/utils/formBuilder'
export default {
  props: {
    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: () => ({})
    }
  },
  data() {
    return {
      form: {},
      file: {},
    }
  },
  methods: {
    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)
        }
      }
    }
  },
  render(h) {
    const authFields = this.fields.map(field => ({
      ...field,
      _readable: this.readable.indexOf(field.id) !== -1,
      _writeable: this.writeable.indexOf(field.id) !== -1,
    }))
    return h('el-form', {
      ref: 'elForm',
      class: 'form',
      props: {
        model: this.form,
        'label-position': 'right',
        'label-width': '80px',
        rules: this.rules,
        'inline-message': true
      }
    },authFields.map(field => formBuilder.bind(this)(this.device, field, h)))
  },
  created() {}
}
</script>

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