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

<template>
  <span>
    <template v-if="element.type == 'input'">
      <el-input
        v-model="element.options.defaultValue"
        :style="{width: isTable ? '100%' : element.options.width}"
        :placeholder="element.options.placeholder"
        :disabled="elementDisabled"
        :show-password="element.options.showPassword"
        :maxlength="element.options.maxlength"
        :show-word-limit="element.options.showWordLimit"
        v-bind="{...element.options.customProps, ...extendProps}"
      ></el-input>
    </template>

    <template v-if="element.type == 'textarea'">
      <el-input type="textarea" :rows="element.options.rows"
        v-model="element.options.defaultValue"
        :style="{width: isTable ? '100%' : element.options.width}"
        :disabled="elementDisabled"
        :placeholder="element.options.placeholder"
        :maxlength="element.options.maxlength"
        :show-word-limit="element.options.showWordLimit"
        :autosize="element.options.autosize"
        v-bind="{...element.options.customProps, ...extendProps}"
      ></el-input>
    </template>

    <template v-if="element.type == 'number'">
      <el-input-number
        v-model="element.options.defaultValue"
        :disabled="elementDisabled"
        :controls-position="element.options.controlsPosition"
        :precision="element.options.precision"
        :controls="element.options.controls"
        :style="{width: isTable ? '100%' : element.options.width}"
        v-bind="{...element.options.customProps, ...extendProps}"
      ></el-input-number>
    </template>

    <template v-if="element.type == 'radio'">
      <el-radio-group v-model="element.options.defaultValue"
        :style="{width: isTable ? '100%' : element.options.width}"
        :disabled="elementDisabled"
        v-bind="{...element.options.customProps, ...extendProps}"
      >
        <el-radio
          :style="{display: element.options.inline ? 'inline-block' : 'block'}"
          :label="item.value" v-for="(item, index) in element.options.options" :key="item.value + index"
        >
          {{element.options.showLabel ? item.label : item.value}}
        </el-radio>
      </el-radio-group>
    </template>

    <template v-if="element.type == 'checkbox'">
      <el-checkbox-group v-model="element.options.defaultValue"
        :style="{width: isTable ? '100%' : element.options.width}"
        :disabled="elementDisabled"
        v-bind="{...element.options.customProps, ...extendProps}"
      >
        <el-checkbox
          :style="{display: element.options.inline ? 'inline-block' : 'block'}"
          :label="item.value" v-for="(item, index) in element.options.options" :key="item.value + index"
        >
          {{element.options.showLabel ? item.label : item.value}}
        </el-checkbox>
      </el-checkbox-group>
    </template>

    <template v-if="element.type == 'time'">
      <el-time-picker
        :key="elementKey"
        :default-value="element.options.defaultValue"
        v-model="element.options.defaultValue"
        :is-range="element.options.isRange"
        :placeholder="element.options.placeholder"
        :start-placeholder="element.options.startPlaceholder"
        :end-placeholder="element.options.endPlaceholder"
        :readonly="element.options.readonly"
        :disabled="elementDisabled"
        :editable="element.options.editable"
        :clearable="element.options.clearable"
        :style="{width: isTable ? '100%' : element.options.width}"
        :value-format="element.options.format"
        v-bind="{...element.options.customProps, ...extendProps}"
      >
      </el-time-picker>
    </template>

    <template v-if="element.type == 'date'">
      <el-date-picker
        :key="elementKey"
        v-model="element.options.defaultValue"
        :type="element.options.type"
        :is-range="element.options.isRange"
        :placeholder="element.options.placeholder"
        :start-placeholder="element.options.startPlaceholder"
        :end-placeholder="element.options.endPlaceholder"
        :readonly="element.options.readonly"
        :disabled="elementDisabled"
        :editable="element.options.editable"
        :clearable="element.options.clearable"
        :value-format="element.options.timestamp ? 'timestamp' : element.options.format"
        :format="element.options.format"
        :style="{width: isTable ? '100%' : element.options.width}"
        v-bind="{...element.options.customProps, ...extendProps}"
      >
      </el-date-picker>
    </template>
<!--    <template v-if="element.type == 'takeLeaveDate'">-->

<!--      <el-date-picker-->
<!--        :key="elementKey"-->
<!--        v-model="element['components'][0].options.defaultValue"-->
<!--        :type="element['components'][0].options.type"-->
<!--        :is-range="element['components'][0].options.isRange"-->
<!--        :placeholder="element['components'][0].options.placeholder"-->
<!--        :start-placeholder="element['components'][0].options.startPlaceholder"-->
<!--        :end-placeholder="element['components'][0].options.endPlaceholder"-->
<!--        :readonly="element['components'][0].options.readonly"-->
<!--        :disabled="elementDisabled"-->
<!--        :editable="element['components'][0].options.editable"-->
<!--        :clearable="element['components'][0].options.clearable"-->
<!--        :value-format="element['components'][0].options.timestamp ? 'timestamp' : element['components'][0].options.format"-->
<!--        :format="element['components'][0].options.format"-->
<!--        :style="{width: isTable ? '100%' : element['components'][0].options.width}"-->
<!--        v-bind="{...element['components'][0].options.customProps, ...extendProps}"-->
<!--      >-->
<!--      </el-date-picker>-->
<!--       <el-date-picker-->
<!--         :key="elementKey"-->
<!--         v-model="element.options.defaultValue"-->
<!--         :type="element.options.type"-->
<!--         :is-range="element.options.isRange"-->
<!--         :placeholder="element.options.placeholder"-->
<!--         :start-placeholder="element.options.startPlaceholder"-->
<!--         :end-placeholder="element.options.endPlaceholder"-->
<!--         :readonly="element.options.readonly"-->
<!--         :disabled="elementDisabled"-->
<!--         :editable="element.options.editable"-->
<!--         :clearable="element.options.clearable"-->
<!--         :value-format="element.options.timestamp ? 'timestamp' : element.options.format"-->
<!--         :format="element.options.format"-->
<!--         :style="{width: isTable ? '100%' : element.options.width}"-->
<!--         v-bind="{...element.options.customProps, ...extendProps}"-->
<!--       >-->
<!--      </el-date-picker>-->
<!--       <el-input type="textarea" :rows="element.options.rows"-->
<!--                 v-model="element.options.defaultValue"-->
<!--                 :style="{width: isTable ? '100%' : element.options.width}"-->
<!--                 :disabled="elementDisabled"-->
<!--                 :placeholder="element.options.placeholder"-->
<!--                 :maxlength="element.options.maxlength"-->
<!--                 :show-word-limit="element.options.showWordLimit"-->
<!--                 :autosize="element.options.autosize"-->
<!--                 v-bind="{...element.options.customProps, ...extendProps}"-->
<!--       ></el-input>-->
<!--    </template>-->

    <template v-if="element.type == 'rate'">
      <el-rate v-model="element.options.defaultValue"
        :max="element.options.max"
        :disabled="elementDisabled"
        :allow-half="element.options.allowHalf"
        :show-score="element.options.showScore"
        :style="{width: isTable ? '100%' : element.options.width, display: 'inline-block'}"
        v-bind="{...element.options.customProps, ...extendProps}"
      ></el-rate>
    </template>

    <template v-if="element.type == 'color'">
      <el-color-picker
        v-model="element.options.defaultValue"
        :disabled="elementDisabled"
        :show-alpha="element.options.showAlpha"
        v-bind="{...element.options.customProps, ...extendProps}"
      ></el-color-picker>
    </template>

    <template v-if="element.type == 'select'">
      <el-select
        v-model="element.options.defaultValue"
        :disabled="elementDisabled"
        :multiple="element.options.multiple"
        :clearable="element.options.clearable"
        :placeholder="element.options.placeholder"
        :style="{width: isTable ? '100%' : element.options.width}"
        v-bind="{...element.options.customProps, ...extendProps}"
      >
        <el-option v-for="item in element.options.options" :key="item.value" :value="item.value" :label="element.options.showLabel?item.label:item.value"></el-option>
      </el-select>
    </template>
 <template v-if="element.type == 'deptSelect'">
      <el-select
        v-model="element.options.defaultValue"
        :disabled="elementDisabled"
        :multiple="element.options.multiple"
        :clearable="element.options.clearable"
        :placeholder="element.options.placeholder"
        :style="{width: isTable ? '100%' : element.options.width}"
        v-bind="{...element.options.customProps, ...extendProps}"
      >
        <el-option v-for="item in element.options.options" :key="item.value" :value="item.value" :label="element.options.showLabel?item.label:item.value"></el-option>
      </el-select>
    </template>
     <template v-if="element.type == 'userSelect'">
      <el-select
        v-model="element.options.defaultValue"
        :disabled="elementDisabled"
        :multiple="element.options.multiple"
        :clearable="element.options.clearable"
        :placeholder="element.options.placeholder"
        :style="{width: isTable ? '100%' : element.options.width}"
        v-bind="{...element.options.customProps, ...extendProps}"
      >
        <el-option v-for="item in element.options.options" :key="item.value" :value="item.value" :label="element.options.showLabel?item.label:item.value"></el-option>
      </el-select>
    </template>
    <template v-if="element.type=='switch'">
      <el-switch
        v-model="element.options.defaultValue"
        :disabled="elementDisabled"
        :style="{width: isTable ? '100%' : element.options.width}"
        v-bind="{...element.options.customProps, ...extendProps}"
      >
      </el-switch>
    </template>

    <template v-if="element.type=='slider'">
      <el-slider
        v-model="element.options.defaultValue"
        :min="element.options.min"
        :max="element.options.max"
        :disabled="elementDisabled"
        :step="element.options.step"
        :show-input="element.options.showInput"
        :range="element.options.range"
        :style="{width: isTable ? '100%' : element.options.width}"
        v-bind="{...element.options.customProps, ...extendProps}"
      ></el-slider>
    </template>

    <template v-if="element.type=='imgupload'">
      <fm-upload
        v-model="element.options.defaultValue"
        :disabled="elementDisabled"
        :style="{'width': isTable ? '100%' : element.options.width}"
        :width="element.options.size.width"
        :height="element.options.size.height"
        token="xxx"
        domain="xxx"
      >

      </fm-upload>
    </template>

    <template v-if="element.type == 'cascader'">
      <el-cascader
        v-model="element.options.defaultValue"
        :disabled="elementDisabled"
        :clearable="element.options.clearable"
        :placeholder="element.options.placeholder"
        :style="{width: isTable ? '100%' : element.options.width}"
        :options="element.options.remote ? [] : element.options.options"
        :props="{multiple: element.options.multiple, checkStrictly: element.options.checkStrictly}"
        v-bind="{...element.options.customProps, ...extendProps}"
      >

      </el-cascader>
    </template>
    <template v-if="element.type == 'deptAndUserCascader'">
      <el-cascader
        v-model="element.options.defaultValue"
        :disabled="elementDisabled"
        :clearable="element.options.clearable"
        :placeholder="element.options.placeholder"
        :style="{width: isTable ? '100%' : element.options.width}"
        :options="element.options.remote ? [] : element.options.options"
        :props="{multiple: element.options.multiple, checkStrictly: element.options.checkStrictly}"
        v-bind="{...element.options.customProps, ...extendProps}"
      >

      </el-cascader>
    </template>
    <template v-if="element.type == 'deptCascader'">
      <el-cascader
        v-model="element.options.defaultValue"
        :disabled="elementDisabled"
        :clearable="element.options.clearable"
        :placeholder="element.options.placeholder"
        :style="{width: isTable ? '100%' : element.options.width}"
        :options="element.options.remote ? [] : element.options.options"
        :props="{multiple: element.options.multiple, checkStrictly: element.options.checkStrictly}"
        v-bind="{...element.options.customProps, ...extendProps}"
      >

      </el-cascader>
    </template>

    <template v-if="element.type == 'editor'">
      <vue-editor
        v-model="element.options.defaultValue"
        :style="{width: isTable ? '100%' : element.options.width, cursor: elementDisabled ? 'no-drop' : '', backgroundColor: elementDisabled ? '#F5F7FA' : ''}"
        :editor-toolbar="element.options.customToolbar"
        class="fm-editor"
        :disabled="elementDisabled"
      >
      </vue-editor>
    </template>

    <template v-if="element.type=='blank'">
      <div style="height: 50px;color: #999;background: #eee;line-height:50px;text-align:center;">{{element.model}}</div>

    </template>

    <template v-if="element.type == 'component'">
      <component :style="{width: isTable ? '100%' : element.options.width}" :is="`component-${element.key}`" :key="key" v-model="element.options.defaultValue"></component>
    </template>

    <template v-if="element.type == 'custom'">
      <component
        :is="element.el"
        v-model="element.options.defaultValue"
        :width="element.options.width"
        :height="element.options.height"
        :placeholder="element.options.placeholder"
        :readonly="element.options.readonly"
        :disabled="elementDisabled"
        :editable="element.options.editable"
        :clearable="element.options.clearable"
        v-bind="{...element.options.customProps, ...extendProps}"
      ></component>
    </template>

    <template v-if="element.type == 'text'">
      <span :style="{'width': isTable ? '100%' : (element.options.width || '100%'), display: 'inline-block'}">{{element.options.defaultValue}}</span>
    </template>

    <template v-if="element.type == 'html'">
      <span :style="{'width': isTable ? '100%' : (element.options.width || '100%'), display: 'inline-block'}" v-html="element.options.defaultValue"></span>
    </template>

    <template v-if="element.type == 'fileupload'">
      <el-upload
        action="https://jsonplaceholder.typicode.com/posts/"
        :style="{width: isTable ? '100%' : element.options.width}"
        :disabled="elementDisabled"
        :limit="element.options.limit"
      >
        <el-button size="small" type="primary">{{$t('fm.actions.upload')}}</el-button>
      </el-upload>
    </template>

    <template v-if="element.type == 'button'">
      <el-button
        :disabled="elementDisabled"
        :type="element.options.buttonType"
        :plain="element.options.buttonPlain"
        :round="element.options.buttonRound"
        :circle="element.options.buttonCircle"
        :style="{width: element.options.width}"
        v-bind="{...element.options.customProps, ...extendProps}"
      >
        {{element.options.buttonName}}
      </el-button>
    </template>

    <template v-if="element.type == 'link'">
      <el-link
        :disabled="elementDisabled"
        :type="element.options.linkType"
        :underline="element.options.underline"
        v-bind="{...element.options.customProps, ...extendProps}"
      >
        {{element.options.linkName}}
      </el-link>
    </template>

    <template v-if="element.type == 'steps'">
      <el-steps
        :active="element.options.defaultValue"
        :space="element.options.space"
        :direction="element.options.direction"
        :process-status="element.options.processStatus"
        :finish-status="element.options.finishStatus"
        :align-center="element.options.alignCenter"
        :simple="element.options.simple"
        :style="{'line-height': 'normal'}"
        v-bind="{...element.options.customProps, ...extendProps}"
      >
        <el-step :title="item.title" :description="item.description" v-for="(item, index) in element.options.steps" :key="index"></el-step>
      </el-steps>
    </template>

    <template v-if="element.type == 'pagination'">
      <el-pagination
        :current-page.sync="element.options.defaultValue"
        :page-size="element.options.pageSize"
        :pager-count="element.options.pagerCount"
        :disabled="elementDisabled"
        :background="element.options.background"
        layout="total, prev, pager, next"
        :total="element.options.total"
        v-bind="{...element.options.customProps, ...extendProps}"
      />
    </template>

    <template v-if="element.type == 'transfer'">
      <el-transfer
        :value="element.options.defaultValue"
        :data="element.options.data"
        :filterable="element.options.filterable"
        :titles="element.options.titles"
        :style="{'width': isTable ? '100%' : element.options.width}"
        v-bind="{...element.options.customProps, ...extendProps}"
      ></el-transfer>
    </template>
  </span>
</template>

<script>
import FmUpload from './Upload'
import Vue from 'vue'
import {executeExpression, isExpression, extractExpression} from '../util/expression'

export default {
  components: {
    FmUpload
  },
  props: ['element', 'isTable'],
  data () {
    return {
      key: Math.random().toString(36).slice(-8),
      elementKey: Math.random().toString(36).slice(-8)
    }
  },
  computed: {
    elementDisabled () {
      if (isExpression(this.element.options.disabled)) {
        return true
      }

      return this.element.options.disabled
    },
    extendProps () {
      let obj = {}

      this.element.options.extendProps && Object.keys(this.element.options.extendProps).forEach(key => {
        let value = this.element.options.extendProps[key]

        if (!isExpression(value)) {
          obj[key] = value
        } else {
          obj[key] = executeExpression(extractExpression(value), this.currentOptions, this.formContext)
        }
      })

      return obj
    },
  },
  created () {
    console.log('---***', this.element)
    if (this.element.type == 'component') {
      Vue.component(`component-${this.element.key}`, {
        template: `<span>${this.element.options.template}</span>`,
        props: ['dataModel', 'formState']
      })
    }
  },
  watch: {
    'element.options.template': function (val) {
      Vue.component(`component-${this.element.key}`, {
        template: `<span>${val}</span>`,
        props: ['dataModel', 'formState']
      })

      this.key = Math.random().toString(36).slice(-8)
    },
    'element.options.defaultValue': function (val) {
      console.log(val)
      this.elementKey = Math.random().toString(36).slice(-8)

    }
  }
}
</script>