kd-aiot-frontend-wt/lib/vue-form-making-v1/src/components/FormConfig.vue

<template>
<el-scrollbar style="height: 100%;">
  <div class="form-config-container">
    <el-form label-position="top" size="small">
      <el-form-item label="UI">
        <el-radio-group v-model="data.ui">
          <el-radio-button label="element">Element</el-radio-button>
          <el-radio-button label="antd">Ant Design</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item :label="$t('fm.config.form.width')" >
        <el-input v-model="data.width" clearable :disabled="isMobile()"></el-input>
      </el-form-item>
      <el-form-item :label="$t('fm.config.form.labelPosition.title')">
        <el-radio-group v-model="data.labelPosition" :key="data.labelPosition">
          <el-radio-button label="left">{{$t('fm.config.form.labelPosition.left')}}</el-radio-button>
          <el-radio-button label="right">{{$t('fm.config.form.labelPosition.right')}}</el-radio-button>
          <el-radio-button label="top">{{$t('fm.config.form.labelPosition.top')}}</el-radio-button>
        </el-radio-group>
      </el-form-item>
      
        
      <el-form-item :label="$t('fm.config.form.labelWidth')">
        <el-input-number v-model="data.labelWidth" :min="0" :max="200" :step="10"></el-input-number>
      </el-form-item>
      <!-- <el-form-item :label="$t('fm.config.widget.labelWidth')" v-if="Object.keys(data.options).indexOf('labelWidth')>=0 && !data.options.tableColumn">
        <el-checkbox v-model="data.options.isLabelWidth" style="margin-right: 5px;">{{$t('fm.config.widget.custom')}}</el-checkbox>
        <el-input-number v-model="data.options.labelWidth" :disabled="!data.options.isLabelWidth" :min="0" :max="99999" :step="10"></el-input-number>
      </el-form-item> -->
      <el-form-item :label="$t('fm.config.form.labelSuffix')">
        <el-switch v-model="data.labelSuffix"></el-switch>
      </el-form-item>

      <el-form-item :label="$t('fm.config.form.size')">
        <el-radio-group v-model="data.size" v-if="data.ui == 'element'">
          <el-radio-button label="large">large</el-radio-button>
          <el-radio-button label="default">small</el-radio-button>
          <el-radio-button label="small">mini</el-radio-button>
        </el-radio-group>
        <el-radio-group v-model="data.size" v-if="data.ui == 'antd'">
          <el-radio-button label="large">large</el-radio-button>
          <el-radio-button label="default">default</el-radio-button>
          <el-radio-button label="small">small</el-radio-button>
        </el-radio-group>
      </el-form-item>

      <el-form-item :label="$t('fm.config.form.styleSheets')">
        <el-button style="width: 100%;" @click="handleSetStyleSheets">{{$t('fm.config.widget.setting')}}</el-button>
      </el-form-item>

      <el-form-item :label="$t('fm.config.form.customClass')" >
        <el-select
          style="width: 100%;"
          v-model="customClassArray"
          multiple
          filterable
          allow-create
          default-first-option>
          <el-option
            v-for="item in sheets"
            :key="item"
            :label="item"
            :value="item">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item :label="$t('fm.datasource.name')">
        <el-button style="width: 100%;" @click="handleSetDatasource">{{$t('fm.config.widget.setting')}}</el-button>
      </el-form-item>

      <el-form-item :label="$t('fm.eventscript.name')">
        <el-button style="width: 100%;" @click="handleSetScript">{{$t('fm.config.widget.setting')}}</el-button>
      </el-form-item>
    </el-form>

    <code-dialog ref="styleDialog" mode="css" :title="$t('fm.config.form.styleSheets')" help="https://form.making.link/docs/manual/custom-style.html#%E8%A1%A8%E5%8D%95%E6%A0%B7%E5%BC%8F%E8%A1%A8" @on-confirm="handlestyleSheetsConfirm"></code-dialog>

    <datasource-dialog ref="dataSourceDialog" @dialog-close="handleDataSourceClose"></datasource-dialog>

    <event-script-dialog ref="eventScriptDialog" @dialog-close="handleEventScriptClose" @dialog-confirm="handleEventConfirm"></event-script-dialog>
  </div>
</el-scrollbar>
</template>

<script>
import CodeEditor from '../components/CodeEditor'
import CodeDialog from './CodeDialog'
import DatasourceDialog from './DataSource/dialog'
import EventScriptDialog from './EventPanel/dialog'
import { splitStyleSheets } from '../util'
import { EventBus } from '../util/event-bus.js'
import { Message } from 'element-ui'

export default {
  components: {
    CodeEditor,
    CodeDialog,
    DatasourceDialog,
    EventScriptDialog
  },
  props: ['data', 'sheets', 'formKey'],
  data () {
    return {
      customClassArray: this.data && this.data.customClass ? this.data.customClass.split(' ').filter(item => item) : []
    }
  },
  inject: ['isMobile'],
  methods: {
    handleSetStyleSheets () {
      let sheets = document.styleSheets[0]

      if (sheets.insertRule) {
        this.$refs.styleDialog.open(this.data.styleSheets || '')
      } else {
        Message.warning(this.$t('fm.message.notSupport'))
      }
    },

    handlestyleSheetsConfirm (value) {

      this.data.styleSheets = value

      this.$refs.styleDialog.close()

      var arr = splitStyleSheets(value)

      this.$emit('on-style-update', arr)

      this.$nextTick(() => {
        EventBus.$emit('on-history-add-' + this.formKey)
      })
    },

    handleSetDatasource () {
      this.data.dataSource = this.data.dataSource || []

      this.$refs.dataSourceDialog.open(this.data.dataSource)
    },
    handleDataSourceClose (list) {
      this.data.dataSource = list

      this.$emit('on-datasource-update', list)

      this.$nextTick(() => {
        EventBus.$emit('on-history-add-' + this.formKey)
      })
    },

    handleSetScript () {
      this.data.eventScript = this.data.eventScript || []

      this.$refs.eventScriptDialog.open(this.data.eventScript)
    },

    editClass () {
      this.handleSetStyleSheets()
    },

    editDatasource (datasource) {
      this.data.dataSource = this.data.dataSource || []
      this.$refs.dataSourceDialog.open(this.data.dataSource, datasource)
      
    },

    editScript (eventName, eventKey) {
      this.data.eventScript = this.data.eventScript || []

      this.$refs.eventScriptDialog.open(this.data.eventScript, eventName, eventKey)
    },

    handleEventScriptClose (list) {
      this.data.eventScript = list

      this.$emit('on-eventscript-update', list)

      this.$nextTick(() => {
        EventBus.$emit('on-history-add-' + this.formKey)
      })
    },

    handleEventConfirm (eventObj) {
      this.$emit('on-eventscript-confirm', eventObj)

      this.$nextTick(() => {
        EventBus.$emit('on-history-add-' + this.formKey)
      })
    }
  },
  watch: {
    'data.customClass': function(val) {
      this.customClassArray = this.data && this.data.customClass ? this.data.customClass.split(' ').filter(item => item) : []
    },
    customClassArray (val) {
      this.data.customClass = val.join(' ')
    }
  }
}
</script>