You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
704 lines
30 KiB
704 lines
30 KiB
<template>
|
|
<div class="form">
|
|
<el-row>
|
|
<el-form :model="model"
|
|
:rules="rules"
|
|
ref="form"
|
|
enctype="multipart/form-data"
|
|
:inline="inline"
|
|
:style="{margin:'0 auto',width:formWidth,textAlign:formTextAlign}">
|
|
<template v-if="formType === 'auto'">
|
|
<el-form-item v-for="(column,i) in columns"
|
|
v-show="column.showFlag==='1' ? column.show : true"
|
|
:label="column.title"
|
|
:prop="column.key"
|
|
:label-width="(column.LabelWidth?column.LabelWidth:labelWidth) + 'px'"
|
|
:style="{display:column.block?'block':'inline-block'}"
|
|
:key="i">
|
|
<span v-if="column.type === 'span'"
|
|
:style="{width:column.itemWidth?column.itemWidth:itemWidth}">{{column.format?column.format(model[column.key]):model[column.key]}}</span>
|
|
<el-input v-else-if="column.type === 'input'"
|
|
v-show="column.showFlag==='1' ? column.show : true"
|
|
v-model="model[column.key]"
|
|
:readonly="column.readonly?column.readonly:false"
|
|
:disabled="column.disabled?column.disabled:false"
|
|
:placeholder="column.placeholder?column.placeholder:column.title"
|
|
:style="{width:column.itemWidth?column.itemWidth:itemWidth}"
|
|
clearable>
|
|
|
|
</el-input>
|
|
|
|
<!--密码输入框-->
|
|
<el-input v-if="column.type === 'password'"
|
|
type="password"
|
|
v-show="column.showFlag==='1' ? column.show : true"
|
|
v-model="model[column.key]"
|
|
:readonly="column.readonly?column.readonly:false"
|
|
:disabled="column.disabled?column.disabled:false"
|
|
:placeholder="column.placeholder?column.placeholder:column.title"
|
|
:style="{width:column.itemWidth?column.itemWidth:itemWidth}"
|
|
clearable>
|
|
<!-- <icon name="bell"
|
|
scale="20"></icon> -->
|
|
</el-input>
|
|
|
|
<!--带选择按钮输入框-->
|
|
<template v-if="column.type === 'inputSelect'"
|
|
v-show="column.showFlag==='1' ? column.show : true">
|
|
|
|
<c-tree-dialog-single :ref="'tree_'+column.key"
|
|
:style="{width:column.itemWidth?column.itemWidth:itemWidth}"
|
|
:inputModel="model[column.key]"
|
|
:placeholder="column.placeholder?column.placeholder:column.title"
|
|
:type="'primary'"
|
|
:title="column.title"
|
|
:url="column.url"
|
|
:params="column.params?column.params:((!column.params&&column.diyParams)?setDiyParams(column.key,i):{})"
|
|
:judgeParams="column.judgeParams?column.judgeParams:'1'"
|
|
:freshen='column.freshen'
|
|
:defaultExpandKeys="defaultExpandKeys"
|
|
:defaultExpandAll="column.defaultExpandAll?column.defaultExpandAll:false"
|
|
:defaultOnlyLeaf="column.defaultOnlyLeaf?column.defaultOnlyLeaf:false"
|
|
:formKey="column.key"
|
|
:defaultNodeKey="defaultNodeKey(column.key,i)"
|
|
:defaultExpandOnClickNode="column.defaultExpandOnClickNode?column.defaultExpandOnClickNode:false"
|
|
:formIndex="i"
|
|
@handleOk="handleOk"
|
|
@handleClear="handleClear">
|
|
</c-tree-dialog-single>
|
|
|
|
</template>
|
|
<!-- 带选择按钮的多选输入框 -->
|
|
<template v-if="column.type === 'inputSelectMulti'"
|
|
v-show="column.showFlag==='1' ? column.show : true">
|
|
<c-tree-dialog-check-box :ref="'multitree_'+column.key"
|
|
:style="{width:column.itemWidth?column.itemWidth:itemWidth}"
|
|
:inputModel="model[column.key]"
|
|
:handleId="model[column.keyid]"
|
|
:placeholder="column.placeholder?column.placeholder:column.title"
|
|
:type="'primary'"
|
|
:title="column.title"
|
|
:url="column.url"
|
|
:params="inputSelectMultiParams?inputSelectMultiParams:(column.params?column.params:((!column.params&&column.diyParams)?setDiyParams(column.key,i):{}))"
|
|
:freshen='column.freshen'
|
|
:defaultExpandKeys="defaultExpandKeys"
|
|
:defaultExpandAll="column.defaultExpandAll?column.defaultExpandAll:false"
|
|
:defaultOnlyLeaf="column.defaultOnlyLeaf?column.defaultOnlyLeaf:false"
|
|
:formKey="column.key"
|
|
:defaultNodeKey="defaultNodeKey(column.key,i)"
|
|
:defaultExpandOnClickNode="column.defaultExpandOnClickNode?column.defaultExpandOnClickNode:false"
|
|
:formIndex="i"
|
|
@handleSure="handleSure"
|
|
@handleDel="handleDel"
|
|
@handleClear="multihandleClear">
|
|
</c-tree-dialog-check-box>
|
|
</template>
|
|
<!--数字输入框-->
|
|
<el-input v-else-if="column.type === 'inputNum'"
|
|
v-show="column.showFlag==='1' ? column.show : true"
|
|
:label="column.title"
|
|
:disabled="column.disabled?column.disabled:false"
|
|
:readonly="column.readonly?column.readonly:false"
|
|
:placeholder="column.placeholder?column.placeholder:column.title"
|
|
v-model.number="model[column.key]"
|
|
:style="{width:column.itemWidth?column.itemWidth:itemWidth}">
|
|
</el-input>
|
|
<!--计数器-->
|
|
<el-input-number v-else-if="column.type === 'counter'"
|
|
v-show="column.showFlag==='1' ? column.show : true"
|
|
v-model="model[column.key]"
|
|
:step="column.option&&column.option.step?column.option.step:1"
|
|
:min="column.option&&column.option.min?column.option.min:0"
|
|
:max="column.option&&column.option.max?column.option.max:100"
|
|
:precision="column.option&&column.option.precision?column.option.precision:0"
|
|
:disabled="column.disabled?column.disabled:false"
|
|
:readonly="column.readonly?column.readonly:false"
|
|
:style="{width:column.itemWidth?column.itemWidth:itemWidth}" />
|
|
<!--单选按钮组-->
|
|
<el-radio-group v-else-if="column.type === 'radio'"
|
|
v-show="column.showFlag==='1' ? column.show : true"
|
|
v-model="model[column.key]"
|
|
:disabled="column.disabled?column.disabled:false"
|
|
:style="{width:column.itemWidth?column.itemWidth:itemWidth}">
|
|
<el-radio v-for="item in optionData[column.key]"
|
|
:label="item.value"
|
|
:key="item.value">
|
|
{{item.label}}
|
|
</el-radio>
|
|
</el-radio-group>
|
|
<!--多选按钮组-->
|
|
<el-checkbox-group v-else-if="column.type === 'checkbox'"
|
|
v-show="column.showFlag==='1' ? column.show : true"
|
|
v-model="model[column.key]"
|
|
:min="0"
|
|
:max="8"
|
|
:style="{width:column.itemWidth?column.itemWidth:itemWidth}">
|
|
<el-checkbox v-for="item in optionData[column.key]"
|
|
:label="item.value"
|
|
:key="item.value"
|
|
:disabled="item.disabled">{{item.label}}
|
|
</el-checkbox>
|
|
</el-checkbox-group>
|
|
<!--下拉列表-->
|
|
<el-select v-else-if="column.type === 'select'"
|
|
v-show="column.showFlag==='1' ? column.show : true"
|
|
v-model="model[column.key]"
|
|
clearable
|
|
:disabled="column.disabled?column.disabled:false"
|
|
:filterable="column.filterable?column.filterable:false"
|
|
:placeholder="column.placeholder?column.placeholder:column.title"
|
|
:style="{width:column.itemWidth?column.itemWidth:itemWidth}"
|
|
@change="handleSelectChange(model[column.key],column.key,i)">
|
|
<el-option v-for="item in optionData[column.key]"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value">
|
|
</el-option>
|
|
</el-select>
|
|
<!-- 终端管理特殊下拉列表 -->
|
|
<el-select v-else-if="column.type === 'select1'"
|
|
v-show="column.showFlag==='1' ? column.show : true"
|
|
v-model="model[column.key]"
|
|
clearable
|
|
:filterable="column.filterable?column.filterable:false"
|
|
:placeholder="column.placeholder?column.placeholder:column.title"
|
|
:style="{width:column.itemWidth?column.itemWidth:itemWidth}"
|
|
@change="handleSelectChange1(model[column.key],column.key,i)">
|
|
<el-option v-for="item in optionData[column.key]"
|
|
:key="item.id"
|
|
:label="item.dicDisp"
|
|
:value="item.id">
|
|
</el-option>
|
|
</el-select>
|
|
<!--布控级别下拉列表-->
|
|
<!-- <el-select v-else-if="column.type === 'select1'"
|
|
v-show="column.showFlag==='1' ? column.show : true"
|
|
v-model="model[column.key]"
|
|
clearable
|
|
:filterable="column.filterable?column.filterable:false"
|
|
:placeholder="column.placeholder?column.placeholder:column.title"
|
|
:style="{width:column.itemWidth?column.itemWidth:itemWidth}"
|
|
@change="handleSelectChange(model[column.key],column.key,i)">
|
|
<el-option v-for="item in optionData[column.key]"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value">
|
|
<span>{{item.label}}</span>
|
|
</el-option>
|
|
</el-select> -->
|
|
|
|
<!--多选下拉列表-->
|
|
<el-select v-else-if="column.type === 'multselect'"
|
|
v-show="column.showFlag==='1' ? column.show : true"
|
|
v-model="model[column.key]"
|
|
multiple
|
|
:placeholder="column.placeholder?column.placeholder:column.title"
|
|
:style="{width:column.itemWidth?column.itemWidth:itemWidth}">
|
|
<el-option v-for="item in optionData[column.key]"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value">
|
|
</el-option>
|
|
</el-select>
|
|
|
|
<!--下拉选择图片-->
|
|
<el-popover v-else-if="column.type === 'selectImg'"
|
|
v-show="column.showFlag==='1' ? column.show : true"
|
|
ref="popover"
|
|
placement="bottom"
|
|
style="padding:0px"
|
|
:width="column.itemWidth?column.itemWidth:itemWidth"
|
|
v-model="imgPopVisible"
|
|
trigger="click">
|
|
|
|
<div v-for="item in optionData[column.key]"
|
|
:key="item.value"
|
|
style="margin:10pxvertical-align: middle"
|
|
@click="handleSelectImg(column.key,item.value,item.label)">
|
|
<svg-icon style="width:25pxheight:25px"
|
|
:icon-class="item.label"
|
|
class-name="disabled" />
|
|
|
|
</div>
|
|
<div class="selImgDiv"
|
|
slot="reference">
|
|
|
|
<svg-icon style="width:25pxheight:25pxvertical-align: middle "
|
|
:icon-class="selImg"
|
|
class-name="disabled" />
|
|
<el-button class="selBtn"
|
|
type="text"
|
|
:icon="imgPopVisible?'el-icon-arrow-up':'el-icon-arrow-down'"></el-button>
|
|
</div>
|
|
</el-popover>
|
|
|
|
<!--switch开关-->
|
|
<el-switch v-else-if="column.type === 'switch'"
|
|
v-show="column.showFlag==='1' ? column.show : true"
|
|
v-model="model[column.key]"
|
|
active-color="#13ce66"
|
|
inactive-color="#ff4949"
|
|
:disabled="column.disabled?column.disabled:false">
|
|
</el-switch>
|
|
<!--文本域输入框-->
|
|
<el-input v-else-if="column.type === 'textarea'"
|
|
v-show="column.showFlag==='1' ? column.show : true"
|
|
type="textarea"
|
|
:autosize="{ minRows: column.option.minRows ? column.option.minRows : 2, maxRows: column.option.maxRows ? column.option.maxRows : 4}"
|
|
:rows=" column.option.rows ? column.option.rows : 3"
|
|
:disabled="column.disabled?column.disabled:false"
|
|
:readonly="column.readonly?column.readonly:false"
|
|
resize="none"
|
|
:style="{width:column.itemWidth?column.itemWidth:itemWidth}"
|
|
:placeholder="column.placeholder?column.placeholder:column.title"
|
|
v-model="model[column.key]">
|
|
</el-input>
|
|
<!--日期选择器-->
|
|
<el-date-picker v-else-if="column.type === 'date'"
|
|
v-show="column.showFlag==='1' ? column.show : true"
|
|
v-model="model[column.key]"
|
|
type="date"
|
|
format="yyyy-MM-dd"
|
|
value-format="yyyy-MM-dd"
|
|
:placeholder="column.placeholder?column.placeholder:column.title"
|
|
:disabledDate="disabledDate"
|
|
:default-value="new Date()"
|
|
:style="{width:column.itemWidth?column.itemWidth:itemWidth}">
|
|
</el-date-picker>
|
|
<!--月份选择器-->
|
|
<el-date-picker v-else-if="column.type === 'month'"
|
|
v-show="column.showFlag==='1' ? column.show : true"
|
|
v-model="model[column.key]"
|
|
type="month"
|
|
format="yyyy-MM"
|
|
value-format="yyyy-MM"
|
|
:placeholder="column.placeholder?column.placeholder:column.title"
|
|
:disabledDate="disabledDate"
|
|
:default-value="new Date()"
|
|
:style="{width:column.itemWidth?column.itemWidth:itemWidth}">
|
|
</el-date-picker>
|
|
<!--日期时间选择器-->
|
|
<el-date-picker v-else-if="column.type === 'datetime'"
|
|
v-show="column.showFlag==='1' ? column.show : true"
|
|
v-model="model[column.key]"
|
|
type="datetime"
|
|
format="yyyy-MM-dd HH:mm:ss"
|
|
value-format="yyyy-MM-dd HH:mm:ss"
|
|
:placeholder="column.placeholder?column.placeholder:column.title"
|
|
:disabledDate="disabledDate"
|
|
:default-value="new Date()"
|
|
:style="{width:column.itemWidth?column.itemWidth:itemWidth}">
|
|
</el-date-picker>
|
|
<!--时间选择器-->
|
|
<el-time-picker v-else-if="column.type === 'time'"
|
|
v-show="column.showFlag==='1' ? column.show : true"
|
|
v-model="model[column.key]"
|
|
type="time"
|
|
format="HH:mm:ss"
|
|
value-format="HH:mm:ss"
|
|
:placeholder="column.placeholder?column.placeholder:column.title"
|
|
:default-value="new Date()"
|
|
:style="{width:column.itemWidth?column.itemWidth:itemWidth}">
|
|
</el-time-picker>
|
|
<!--日期区域选择器-->
|
|
<el-date-picker v-else-if="column.type === 'daterange'"
|
|
v-show="column.showFlag==='1' ? column.show : true"
|
|
v-model="model[column.key]"
|
|
type="daterange"
|
|
range-separator="至"
|
|
start-placeholder="开始日期"
|
|
end-placeholder="结束日期"
|
|
:disabledDate="disabledDate"
|
|
:default-value="new Date()"
|
|
:value-format="column.pattern?column.pattern:'yyyy-MM-dd'"
|
|
:style="{width:column.itemWidth?column.itemWidth:itemWidth}">
|
|
</el-date-picker>
|
|
<!--日期时间区域选择器-->
|
|
<el-date-picker v-else-if="column.type === 'datetimerange'"
|
|
v-show="column.showFlag==='1' ? column.show : true"
|
|
v-model="model[column.key]"
|
|
type="datetimerange"
|
|
range-separator="至"
|
|
start-placeholder="开始日期"
|
|
end-placeholder="结束日期"
|
|
:disabledDate="disabledDate"
|
|
:default-value="new Date()"
|
|
:value-format="column.pattern?column.pattern:'yyyy-MM-dd HH:mm:ss'"
|
|
:style="{width:column.itemWidth?column.itemWidth:itemWidth}">
|
|
</el-date-picker>
|
|
|
|
<!--文件上传-->
|
|
<template v-else-if="column.type === 'file'"
|
|
v-show="column.showFlag==='1' ? column.show : true">
|
|
<c-upload :show-file-list="true"></c-upload>
|
|
</template>
|
|
<!--文件上传2-只选择不上传-->
|
|
<template v-else-if="column.type === 'file2'"
|
|
:style="{width:column.itemWidth?column.itemWidth:itemWidth}"
|
|
:placeholder="column.placeholder?column.placeholder:column.title">
|
|
<input type="file"
|
|
id="file"
|
|
@change="getFile($event)" />
|
|
<!-- <el-input type=file
|
|
:v-model="model[column.key]"></el-input> -->
|
|
</template>
|
|
<!-- 级联选择器-->
|
|
<el-cascader v-else-if="column.type === 'cascader'"
|
|
clearable
|
|
filterable
|
|
size="medium"
|
|
v-model="model[column.key]"
|
|
:placeholder="column.placeholder?column.placeholder:column.title"
|
|
:style="{width:column.itemWidth?column.itemWidth:itemWidth}"
|
|
:options="optionData[column.key]"
|
|
:show-all-levels="false">
|
|
|
|
</el-cascader>
|
|
|
|
<template v-else-if="column.type === 'id'">
|
|
|
|
</template>
|
|
</el-form-item>
|
|
</template>
|
|
<!--自定义form-->
|
|
<template v-else-if="formType === 'custom'">
|
|
<slot></slot>
|
|
</template>
|
|
</el-form>
|
|
</el-row>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
/* eslint-disable */
|
|
import CUpload from './CUpload'
|
|
import CDialog from './CDialog'
|
|
import CTree from './CTree'
|
|
import CTreeDialogSingle from './CTreeDialogSingle'
|
|
import CTreeDialogCheckBox from './CTreeDialogCheckBox'
|
|
|
|
export default {
|
|
components: { CUpload, CDialog, CTree, CTreeDialogSingle, CTreeDialogCheckBox },
|
|
data () {
|
|
return {
|
|
formData: new FormData(),
|
|
model: window.app.service.getModel(this.keyword),
|
|
rules: window.app.service.getRules(this.keyword),
|
|
visible: this.visibleDialog,
|
|
dialog: {
|
|
title: ''
|
|
},
|
|
defaultCheckedKeys: [0],
|
|
defaultExpandKeys: [0],
|
|
imageUrl: '',
|
|
|
|
imgPopVisible: false, // 选择图片下拉框的pop是否可见（暂时预设为只可能有一个选择图片下拉框）
|
|
selImg: 'table'// 默认为“table”图标
|
|
}
|
|
},
|
|
|
|
props: {
|
|
formWidth: {
|
|
type: String,
|
|
default: '860px'
|
|
},
|
|
formTextAlign: {
|
|
type: String,
|
|
default: 'left'
|
|
},
|
|
keyword: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
method: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
labelWidth: {
|
|
type: Number,
|
|
default () {
|
|
return 100
|
|
}
|
|
},
|
|
formType: {
|
|
type: String,
|
|
default () {
|
|
return 'auto'
|
|
}
|
|
},
|
|
optionData: {
|
|
type: Object,
|
|
default () {
|
|
return {}
|
|
}
|
|
},
|
|
inline: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
itemWidth: {
|
|
type: String,
|
|
default: '300px'
|
|
},
|
|
inputSelectMultiParams: {
|
|
type: Object
|
|
},
|
|
visibleDialog: {
|
|
type: Object
|
|
}
|
|
},
|
|
computed: {
|
|
disabledDate: function(date) {
|
|
return new Date() < date
|
|
},
|
|
columns: function() {
|
|
return window.app.service.getColumns(this.keyword, 'form' + this.method)
|
|
},
|
|
defaultNodeKey () {
|
|
return function(key, index) {
|
|
const keyid = this.columns[index].keyid// 获取显示值对应的存储值key
|
|
// alert(this.model[keyid])
|
|
/* if (!this.model[keyid]) {
|
|
return 0
|
|
} */
|
|
// return parseInt(this.model[keyid])
|
|
return this.model[keyid]
|
|
}
|
|
}
|
|
// 上传图片的图片部分
|
|
// imageUrl () {
|
|
// return function (key) {
|
|
// const picPath = this.model[key]
|
|
// }
|
|
// },
|
|
},
|
|
mounted () {
|
|
|
|
},
|
|
methods: {
|
|
getFile (aaa) {
|
|
// const bbb = aaa.target.files[0]
|
|
},
|
|
assign (currentData) {
|
|
if (currentData) {
|
|
// model赋值
|
|
Object.assign(this.model, currentData)
|
|
// debugger
|
|
this.columns.forEach((column, index) => {
|
|
if (column.type === 'inputSelect') { // 单独处理选择树，给选择树的输入框赋值
|
|
this.$refs['tree_' + column.key][0].setInputValue(this.model[column.key])
|
|
} else if (column.type === 'selectImg') { // 单独处理图片选择下拉框
|
|
if (this.model[column.key] === '' || this.model[column.key] === null) {
|
|
this.model[column.key] = this.optionData[column.key][0].label
|
|
}
|
|
this.selImg = this.model[column.key]
|
|
} else if (column.type === 'inputSelectMulti') { // 单独处理选择树，给多选树赋值
|
|
this.$nextTick(() => {
|
|
this.$refs['multitree_' + column.key][0].inputValue = this.model[column.key]
|
|
this.$refs['multitree_' + column.key][0].substationId = this.model[column.keyid]
|
|
})
|
|
}
|
|
})
|
|
}
|
|
},
|
|
resetForm () {
|
|
// 重置表单
|
|
this.$refs['form'].resetFields()
|
|
this.columns.forEach((column, index) => {
|
|
if (column.type === 'selectImg') { // 单独处理图片选择下拉框
|
|
this.model[column.key] = this.optionData[column.key][0].label
|
|
this.selImg = this.model[column.key]
|
|
}
|
|
if (column.type === 'inputSelectMulti') {
|
|
this.$refs['multitree_' + column.key][0].handleClear()
|
|
this.model[column.keyid] = ''
|
|
this.model[column.key] = ''
|
|
}
|
|
})
|
|
},
|
|
initForm () { // 初始化表单
|
|
// this.$refs['form'].resetFields()
|
|
// this.model = app.service.getModel(this.keyWord)
|
|
},
|
|
initForm2 () { // 初始化表单
|
|
// this.$refs['form'].resetFields()
|
|
this.model = window.app.service.getModel(this.keyWord)
|
|
},
|
|
validate (callback) {
|
|
this.$refs['form'].validate((valid, messageObj) => {
|
|
if (!valid) {
|
|
let message = ''
|
|
for (var oneObj in messageObj) {
|
|
|
|
message = message + (messageObj[oneObj])[0].message + ' \n '
|
|
}
|
|
|
|
this.$message.error(message)
|
|
|
|
} else {
|
|
if (typeof callback === 'function') callback(valid)
|
|
}
|
|
})
|
|
},
|
|
// 点击选择树的【清空】
|
|
handleClear (data, key, formIndex) {
|
|
const keyid = this.columns[formIndex].keyid// 获取显示值对应的存储值key
|
|
this.model[keyid] = ''
|
|
this.model[key] = ''
|
|
|
|
this.$nextTick(() => {
|
|
const ref = 'tree_' + key
|
|
this.$refs[ref][0].loadData(null, 0, [0], false)
|
|
})
|
|
},
|
|
multihandleClear (data, key, formIndex) {
|
|
const keyid = this.columns[formIndex].keyid// 获/* */取显示值对应的存储值key
|
|
this.model[keyid] = ''
|
|
this.model[key] = ''
|
|
// const keyid = this.columns[formIndex].keyid// 获取显示值对应的存储值key
|
|
// this.model[keyid] = ''
|
|
// this.model[key] = ''
|
|
},
|
|
// 点击选择树的【节点】/【确定】
|
|
handleOk (data, key, formIndex) {
|
|
this.model[key] = data.label// 显示值
|
|
const keyid = this.columns[formIndex].keyid// 获取显示值对应的存储值key
|
|
let id = data.id
|
|
const p = /[a-z]/i
|
|
if (p.test(data.id.substring(0, 1))) { // 判断第一位是否是字母，是的话截掉
|
|
id = data.id.substring(1)
|
|
}
|
|
this.model[keyid] = id
|
|
},
|
|
handleSure (data, key, formIndex) {
|
|
let handleName = ''
|
|
let handleNameArr = []
|
|
let handleId = ''
|
|
let handleIdArr = []
|
|
for (let i = 0; i < data.length; i++) {
|
|
handleNameArr.push(data[i].name)
|
|
handleIdArr.push(data[i].id)
|
|
}
|
|
handleName = handleNameArr.join(',')
|
|
handleId = handleIdArr.join(',')
|
|
this.model[key] = handleName
|
|
const keyid = this.columns[formIndex].keyid
|
|
this.model[keyid] = handleId
|
|
},
|
|
handleDel (data, key, formIndex) {
|
|
let handleName = ''
|
|
let handleNameArr = []
|
|
let handleId = ''
|
|
let handleIdArr = []
|
|
for (let i = 0; i < data.length; i++) {
|
|
handleNameArr.push(data[i].name)
|
|
handleIdArr.push(data[i].id)
|
|
}
|
|
handleName = handleNameArr.join(',')
|
|
handleId = handleIdArr.join(',')
|
|
this.model[key] = handleName
|
|
const keyid = this.columns[formIndex].keyid
|
|
this.model[keyid] = handleId
|
|
},
|
|
changePass (value) { // 判断渲染，true:暗文显示，false:明文显示
|
|
this.visible = !(value === 'show')
|
|
},
|
|
|
|
// 选择图片下拉框
|
|
handleSelectImg (key, value, label) {
|
|
this.selImg = label
|
|
this.model[key] = label
|
|
this.imgPopVisible = false
|
|
// this.objForm.stateUrl = label
|
|
},
|
|
|
|
// 下拉框选择事件：当下拉框数据改变时触发
|
|
handleSelectChange (model, key, index) {
|
|
// debugger
|
|
// js中设置了选择改变
|
|
if (this.columns[index].selectChange) {
|
|
this.$emit('selectChange', model, key, index)
|
|
}
|
|
},
|
|
// 终端通讯类型下拉框选择事件
|
|
handleSelectChange1 (model, key, index) {
|
|
// debugger
|
|
// js中设置了选择改变
|
|
if (this.columns[index].selectChange) {
|
|
this.$emit('selectChange1', model, key, index)
|
|
}
|
|
},
|
|
// 设置某一个属性的值
|
|
setData (key, value) {
|
|
this.model[key] = value
|
|
},
|
|
|
|
// 控制界面组件显隐
|
|
changeShow (showKeyArray, showIndexArray, showDefault, hideKeyArray, hideIndexArray) {
|
|
// debugger
|
|
for (let i = 0; i < showIndexArray.length; i++) {
|
|
// this.columns[showIndexArray[i]].showFlag = '1'
|
|
this.columns[showIndexArray[i]].show = true
|
|
if (this.columns[showIndexArray[i]].required) { // 显示的时候为必填
|
|
this.columns[showIndexArray[i]].rule[0].required = true
|
|
}
|
|
this.model[showKeyArray[i]] = showDefault[i]
|
|
}
|
|
for (let j = 0; j < hideIndexArray.length; j++) {
|
|
// this.columns[showIndexArray[j]].showFlag = '1'
|
|
this.columns[hideIndexArray[j]].show = false
|
|
if (this.columns[hideIndexArray[j]].required) { // 隐藏的时候为非必填
|
|
this.columns[hideIndexArray[j]].rule[0].required = false
|
|
}
|
|
this.model[hideKeyArray[j]] = ''
|
|
}
|
|
},
|
|
|
|
// 控制界面必填项
|
|
changeRequired (requireKeyArray, requireIndexArray, norequireKeyArray, norequireIndexArray) {
|
|
for (let i = 0; i < requireIndexArray.length; i++) {
|
|
this.columns[requireIndexArray[i]].rule[0].required = true
|
|
}
|
|
for (let j = 0; j < norequireIndexArray.length; j++) {
|
|
this.columns[norequireIndexArray[j]].rule[0].required = false
|
|
}
|
|
},
|
|
// 单选树自定义参数赋值
|
|
setDiyParams (key, index) {
|
|
const diyName = this.columns[index].diyParams.name
|
|
const diyValue = this.model[this.columns[index].diyParams.value]
|
|
if (diyValue === '' || diyValue === null) {
|
|
return {}
|
|
}
|
|
const paramsStr = '{"' + diyName + '":"' + diyValue + '"}'
|
|
const params = JSON.parse(paramsStr)
|
|
// alert(JSON.stringify(params))
|
|
return params
|
|
}
|
|
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped>
|
|
.submitForm {
|
|
text-align: right;
|
|
margin-right: 42px;
|
|
}
|
|
|
|
.selImgDiv {
|
|
width: 285px;
|
|
color: #bbb8b8;
|
|
border-radius: 4px;
|
|
border: 0.5px solid #dfdbdb;
|
|
padding-left: 16px;
|
|
}
|
|
|
|
.selBtn {
|
|
float: right;
|
|
margin-right: 10px;
|
|
border-top-left-radius: 0;
|
|
border-top-right-radius: 4px;
|
|
border-bottom-left-radius: 0;
|
|
border-bottom-right-radius: 4px;
|
|
}
|
|
</style>
|
|
|