123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326 |
- <template>
- <el-form-item :label="widget.name" :prop="widget.model">
- <template v-if="widget.type == 'input'" >
- <el-input
- v-if="widget.options.dataType == 'number' || widget.options.dataType == 'integer' || widget.options.dataType == 'float'"
- type="number"
- v-model.number="dataModel"
- :placeholder="widget.options.placeholder"
- :style="{width: widget.options.width}"
- :disabled="widget.options.disabled"
- ></el-input>
- <el-input
- v-else
- type="text"
- v-model="dataModel"
- :disabled="widget.options.disabled"
- :placeholder="widget.options.placeholder"
- :style="{width: widget.options.width}"
- :maxlength="widget.options.maxlength"
- :show-word-limit="widget.options.showWordLimit"
- ></el-input>
- </template>
- <template v-if="widget.type == 'textarea'">
- <el-input type="textarea" :rows="5"
- v-model="dataModel"
- :disabled="widget.options.disabled"
- :placeholder="widget.options.placeholder"
- :style="{width: widget.options.width}"
- :maxlength="widget.options.maxlength"
- :show-word-limit="widget.options.showWordLimit"
- ></el-input>
- </template>
- <template v-if="widget.type == 'number'">
- <el-input-number
- v-model="dataModel"
- :style="{width: widget.options.width}"
- :step="widget.options.step"
- controls-position="right"
- :disabled="widget.options.disabled"
- :min="widget.options.min"
- :max="widget.options.max"
- ></el-input-number>
- </template>
- <template v-if="widget.type == 'radio'">
- <el-radio-group v-model="dataModel"
- :style="{width: widget.options.width}"
- :disabled="widget.options.disabled"
- >
- <el-radio
- :style="{display: widget.options.inline ? 'inline-block' : 'block'}"
- :label="item.value" v-for="(item, index) in (widget.options.remote ? widget.options.remoteOptions : widget.options.options)" :key="index"
- >
- <template v-if="widget.options.remote">{{item.label}}</template>
- <template v-else>{{widget.options.showLabel ? item.label : item.value}}</template>
- </el-radio>
- </el-radio-group>
- </template>
- <template v-if="widget.type == 'checkbox'">
- <el-checkbox-group v-model="dataModel"
- :style="{width: widget.options.width}"
- :disabled="widget.options.disabled"
- >
- <el-checkbox
- :style="{display: widget.options.inline ? 'inline-block' : 'block'}"
- :label="item.value" v-for="(item, index) in (widget.options.remote ? widget.options.remoteOptions : widget.options.options)" :key="index"
- >
- <template v-if="widget.options.remote">{{item.label}}</template>
- <template v-else>{{widget.options.showLabel ? item.label : item.value}}</template>
- </el-checkbox>
- </el-checkbox-group>
- </template>
- <template v-if="widget.type == 'time'">
- <el-time-picker
- v-model="dataModel"
- :is-range="widget.options.isRange"
- :placeholder="widget.options.placeholder"
- :start-placeholder="widget.options.startPlaceholder"
- :end-placeholder="widget.options.endPlaceholder"
- :readonly="widget.options.readonly"
- :disabled="widget.options.disabled"
- :editable="widget.options.editable"
- :clearable="widget.options.clearable"
- :arrowControl="widget.options.arrowControl"
- :value-format="widget.options.format"
- :style="{width: widget.options.width}"
- >
- </el-time-picker>
- </template>
- <template v-if="widget.type=='date'">
- <el-date-picker
- v-model="dataModel"
- :type="widget.options.type"
- :placeholder="widget.options.placeholder"
- :start-placeholder="widget.options.startPlaceholder"
- :end-placeholder="widget.options.endPlaceholder"
- :readonly="widget.options.readonly"
- :disabled="widget.options.disabled"
- :editable="widget.options.editable"
- :clearable="widget.options.clearable"
- :value-format="widget.options.timestamp ? 'timestamp' : widget.options.format"
- :format="widget.options.format"
- :style="{width: widget.options.width}"
- >
- </el-date-picker>
- </template>
- <template v-if="widget.type =='rate'">
- <el-rate v-model="dataModel"
- :max="widget.options.max"
- :disabled="widget.options.disabled"
- :allow-half="widget.options.allowHalf"
- ></el-rate>
- </template>
- <template v-if="widget.type == 'color'">
- <el-color-picker
- v-model="dataModel"
- :disabled="widget.options.disabled"
- :show-alpha="widget.options.showAlpha"
- ></el-color-picker>
- </template>
- <template v-if="widget.type == 'select'">
- <el-select
- v-model="dataModel"
- :disabled="widget.options.disabled"
- :multiple="widget.options.multiple"
- :clearable="widget.options.clearable"
- :placeholder="widget.options.placeholder"
- :style="{width: widget.options.width}"
- :filterable="widget.options.filterable"
- >
- <el-option v-for="item in (widget.options.remote ? widget.options.remoteOptions : widget.options.options)" :key="item.value" :value="item.value" :label="widget.options.showLabel || widget.options.remote?item.label:item.value"></el-option>
- </el-select>
- </template>
- <template v-if="widget.type=='switch'">
- <el-switch
- v-model="dataModel"
- :disabled="widget.options.disabled"
- >
- </el-switch>
- </template>
- <template v-if="widget.type=='slider'">
- <el-slider
- v-model="dataModel"
- :min="widget.options.min"
- :max="widget.options.max"
- :disabled="widget.options.disabled"
- :step="widget.options.step"
- :show-input="widget.options.showInput"
- :range="widget.options.range"
- :style="{width: widget.options.width}"
- ></el-slider>
- </template>
- <template v-if="widget.type=='dynamicTable'">
- <el-table :data="models[widget.model]" style="width: 100%" class="u-dynamic-table" stripe border>
- <el-table-column
- v-for="item in widget.options.tableColumns"
- :key="item.prop"
- :fixed="item.fixed"
- align="center"
- :prop="item.prop"
- :min-width="item.minWidth"
- :width="item.width"
- :show-overflow-tooltip="item.tooltip"
- :resizable="item.resizable"
- :label="item.label"
- >
- <template slot-scope="scope">
- <el-form-item :prop="[widget.model]+ '.'+scope.$index+ '.'+item.prop">
- <el-input v-model="scope.row[item.prop]" placeholder="请输入" />
- </el-form-item>
- </template>
- </el-table-column>
- </el-table>
- <div class="btn" @click="handleAddTableRow"><i class="el-icon-plus"></i>新增</div>
- </template>
- <template v-if="widget.type=='imgupload'">
- <fm-upload
- v-model="dataModel"
- :disabled="widget.options.disabled"
- :style="{'width': widget.options.width}"
- :width="widget.options.size.width"
- :height="widget.options.size.height"
- :token="widget.options.token"
- :domain="widget.options.domain"
- :multiple="widget.options.multiple"
- :length="widget.options.length"
- :is-qiniu="widget.options.isQiniu"
- :is-delete="widget.options.isDelete"
- :min="widget.options.min"
- :is-edit="widget.options.isEdit"
- :action="widget.options.action"
- >
- </fm-upload>
- </template>
- <template v-if="widget.type == 'editor'">
- <vue-editor
- v-model="dataModel"
- :style="{width: widget.options.width}"
- >
- </vue-editor>
- </template>
- <template v-if="widget.type == 'cascader'">
- <el-cascader
- v-model="dataModel"
- :disabled="widget.options.disabled"
- :clearable="widget.options.clearable"
- :placeholder="widget.options.placeholder"
- :style="{width: widget.options.width}"
- :options="widget.options.remoteOptions"
- >
- </el-cascader>
- </template>
- <template v-if="widget.type == 'text'">
- <span>{{dataModel}}</span>
- </template>
- </el-form-item>
- </template>
- <script>
- import FmUpload from './Upload'
- export default {
- props: ['widget', 'models', 'rules', 'remote'],
- components: {
- FmUpload
- },
- data () {
- return {
- dataModel: this.models[this.widget.model]
- }
- },
- created () {
- if (this.widget.options.remote && this.remote[this.widget.options.remoteFunc]) {
- this.remote[this.widget.options.remoteFunc]((data) => {
- this.widget.options.remoteOptions = data.map(item => {
- return {
- value: item[this.widget.options.props.value],
- label: item[this.widget.options.props.label],
- children: item[this.widget.options.props.children]
- }
- })
- })
- }
- if (this.widget.type === 'imgupload' && this.widget.options.isQiniu) {
- this.remote[this.widget.options.tokenFunc]((data) => {
- this.widget.options.token = data
- })
- }
- },
- methods: {
- handleAddTableRow(){
- if(this.widget.type === 'dynamicTable'){
- console.log(this.widget)
- var arr = this.widget.options.tableColumns.reduce((p, c) => Object.assign(p, { [c.prop]: '' }), {})
- console.log(arr)
- this.models[this.widget.model].push(arr)
- // console.log(this.widget.options.tableData)
- }
- }
- },
- watch: {
- dataModel: {
- deep: true,
- handler (val) {
- // val和this.dataModel当前改变的数据值;this.widget创建的组件的json代码;this.widget.model = key
- // this.models数据值存放位置
- this.models[this.widget.model] = val
- this.$emit('update:models', {
- ...this.models,
- [this.widget.model]: val
- })
- this.$emit('input-change', val, this.widget.model)
- // console.log(this.dataModel, this.models)
- // console.log(val, this.widget)
- }
- },
- models: {
- deep: true,
- handler (val) {
- // console.log(val, val[this.widget.model])
- this.dataModel = val[this.widget.model]
- // console.log(this.dataModel)
- }
- }
- }
- }
- </script>
- <style lang="less">
- .u-dynamic-table{
- .el-table__cell{
- padding: 0;
- .cell{
- padding-left: 0 !important;
- padding-right: 0 !important;
- }
- }
- // 当加入校验时需要判断设置
- .el-form-item{
- margin-bottom: 0;
- }
- .el-input__inner{
- border: none;
- }
- }
- </style>
|