Skip to content

A
agcs2.0-web
Commit ebd48e90 authored by miaojiale's avatar miaojiale
Browse files
Options

修改样式问题

parent 682da225
Hide whitespace changes
Inline Side-by-side
Showing with 222 additions and 222 deletions
src/components/DialogComponents/Form.vue
View file @ ebd48e90
......@@ -20,254 +20,250 @@
>
<el-row>
<template v-for="(item, index) in formDataSet">
<el-col
<!-- <el-col
v-if="!item.hidden"
:span="item.spanCount ? item.spanCount : countLine"
:key="item.prop"
:class="item.class"
> -->
<el-form-item
:key="index"
:label="item.label ? `${item.label}:` : ''"
:label-width="item.labelWidth"
:prop="item.prop"
:rules="item.rules"
:class="item.className"
:style="item.style"
>
<el-form-item
:key="index"
:label="item.label ? `${item.label}:` : ''"
:label-width="item.labelWidth"
:prop="item.prop"
:rules="item.rules"
:class="item.className"
:style="item.style"
<!-- 按钮控制 -->
<el-button
v-if="item.operation"
class="operBtn"
:type="item.operation.type ? item.operation.type : 'text'"
:autofocus="item.autofocus"
@click="item.operation.func ? item.operation.func(form) : {}"
>
{{
item.operation.text ? item.operation.text : "新增"
}}</el-button
>
<!-- 按钮控制 -->
<el-button
v-if="item.operation"
class="operBtn"
:type="item.operation.type ? item.operation.type : 'text'"
:autofocus="item.autofocus"
@click="item.operation.func ? item.operation.func(form) : {}"
>
{{
item.operation.text ? item.operation.text : "新增"
}}</el-button
>
<!-- 提示 -->
<el-tooltip
v-if="item.tips"
effect="dark"
:content="item.tips"
placement="top"
slot="label"
<!-- 提示 -->
<el-tooltip
v-if="item.tips"
effect="dark"
:content="item.tips"
placement="top"
slot="label"
>
<span :style="item.tipsStyle">{{ item.label }}：</span>
</el-tooltip>
<!-- 输入框 input -->
<el-input
v-if="item.type === 'input'"
:type="item.inputType ? item.inputType : ''"
:maxlength="item.maxlength"
:minlength="item.minlength"
:placeholder="item.placeholder"
clearable
:disabled="item.disabled"
v-model="form[item.prop]"
@input="item.func ? item.func($event) : {}"
:resize="item.resize"
:rows="item.rows"
:autosize="item.autosize"
>
<span
:slot="item.slot ? item.slot : 'append'"
v-if="item.unit"
>{{ item.unit }}</span
>
<span :style="item.tipsStyle">{{ item.label }}：</span>
</el-tooltip>
</el-input>
<!-- 输入框 input -->
<el-input
v-if="item.type === 'input'"
:type="item.inputType ? item.inputType : ''"
:maxlength="item.maxlength"
:minlength="item.minlength"
:placeholder="item.placeholder"
<!-- 数字输入框 -->
<div v-if="item.type === 'number'" style="display: inline-table">
<el-input-number
:min="item.min"
:max="item.max"
clearable
:precision="item.precision"
:controls="item.controls || false"
:disabled="item.disabled"
v-model="form[item.prop]"
:placeholder="item.placeholder"
@input="item.func ? item.func($event) : {}"
:resize="item.resize"
:rows="item.rows"
:autosize="item.autosize"
style="display: table-cell"
></el-input-number>
<span
v-if="item.append"
class="el-input-group__append"
style="line-height: 28px"
>{{ item.append }}</span
>
<span
:slot="item.slot ? item.slot : 'append'"
v-if="item.unit"
>{{ item.unit }}</span
>
</el-input>
</div>
<!-- 模糊查询输入 -->
<el-autocomplete
v-else-if="item.type === 'autocomplete'"
popper-class="my-autocomplete"
v-model="form[item.prop]"
:fetch-suggestions="item.func"
:placeholder="item.placeholder"
@select="item.selectfun"
clearable
>
<template slot-scope="{ item }">
<div class="name">
{{ item.value }}
<span v-if="item.specification"
>({{ item.specification }})</span
>
</div>
<span class="description">{{ item.description }}</span>
</template>
</el-autocomplete>
<!-- 数字输入框 -->
<div
v-if="item.type === 'number'"
style="display: inline-table"
>
<el-input-number
:min="item.min"
:max="item.max"
clearable
:precision="item.precision"
:controls="item.controls || false"
:disabled="item.disabled"
v-model="form[item.prop]"
:placeholder="item.placeholder"
@input="item.func ? item.func($event) : {}"
style="display: table-cell"
></el-input-number>
<span
v-if="item.append"
class="el-input-group__append"
style="line-height: 28px"
>{{ item.append }}</span
>
</div>
<!-- 模糊查询输入 -->
<el-autocomplete
v-else-if="item.type === 'autocomplete'"
popper-class="my-autocomplete"
v-model="form[item.prop]"
:fetch-suggestions="item.func"
:placeholder="item.placeholder"
@select="item.selectfun"
clearable
<!-- 选择器 -->
<el-select
v-else-if="item.type === 'select'"
:multiple="item.multiple"
:disabled="item.disabled"
v-model="form[item.prop]"
:placeholder="item.placeholder ? item.placeholder : '请选择'"
:filterable="item.filterable ? false : true"
clearable
:value-key="item.key ? item.key : 'value'"
@change="item.func ? item.func($event) : {}"
>
<el-option
v-for="(opt, optIndex) in item.opts"
:key="optIndex"
:label="opt.label"
:value="item.isSelect ? opt.selectValue : opt.value"
:disabled="opt.disabled"
>
<template slot-scope="{ item }">
<div class="name">
{{ item.value }}
<span v-if="item.specification"
>({{ item.specification }})</span
>
</div>
<span class="description">{{ item.description }}</span>
</template>
</el-autocomplete>
<span style="float: left">{{ opt.label }}</span>
<span style="float: right; color: #8492a6; font-size: 10px">{{
opt.description
}}</span>
</el-option>
</el-select>
<!-- 选择器 -->
<el-select
v-else-if="item.type === 'select'"
:multiple="item.multiple"
:disabled="item.disabled"
v-model="form[item.prop]"
:placeholder="item.placeholder ? item.placeholder : '请选择'"
:filterable="item.filterable ? false : true"
clearable
:value-key="item.key ? item.key : 'value'"
@change="item.func ? item.func($event) : {}"
>
<el-option
v-for="(opt, optIndex) in item.opts"
:key="optIndex"
:label="opt.label"
:value="item.isSelect ? opt.selectValue : opt.value"
:disabled="opt.disabled"
>
<span style="float: left">{{ opt.label }}</span>
<span
style="float: right; color: #8492a6; font-size: 10px"
>{{ opt.description }}</span
>
</el-option>
</el-select>
<!-- 模糊查询选择 -->
<el-select
v-else-if="item.type === 'remote'"
v-model="form[item.prop]"
filterable
remote
reserve-keyword
:multiple="item.multiple ? true : false"
:placeholder="item.placeholder"
:remote-method="item.remoteFunc"
v-el-select-loadmore="loadmore"
@change="item.func ? item.func($event) : {}"
>
<el-option
v-for="(opt, optIndex) in item.opts"
:key="optIndex"
:label="opt.label"
:value="item.isSelect ? opt.selectValue : opt.value"
></el-option>
</el-select>
<!-- 模糊查询选择 -->
<el-select
v-else-if="item.type === 'remote'"
v-model="form[item.prop]"
filterable
remote
reserve-keyword
:multiple="item.multiple ? true : false"
:placeholder="item.placeholder"
:remote-method="item.remoteFunc"
v-el-select-loadmore="loadmore"
@change="item.func ? item.func($event) : {}"
>
<el-option
v-for="(opt, optIndex) in item.opts"
:key="optIndex"
:label="opt.label"
:value="item.isSelect ? opt.selectValue : opt.value"
></el-option>
</el-select>
<!-- 日期 -->
<el-date-picker
v-else-if="item.type === 'date'"
v-model="form[item.prop]"
:type="item.dateType ? item.dateType : 'date'"
:placeholder="item.placeholder"
:picker-options="item.options"
:format="item.format"
:value-format="item.valueFormat"
@change="item.func ? item.func($event) : {}"
></el-date-picker>
<!-- 时间 -->
<el-time-picker
v-else-if="item.type === 'time'"
:format="item.format"
:value-format="item.valueFormat"
v-model="form[item.prop]"
:picker-options="item.options"
@change="item.func ? item.func($event) : {}"
></el-time-picker>
<!-- 开关 -->
<el-switch
v-else-if="item.type === 'switch'"
:disabled="item.disabled"
:active-value="item.activeValue || 1"
:inactive-value="item.inactiveValue || 0"
v-model="form[item.prop]"
>
</el-switch>
<!-- 日期 -->
<el-date-picker
v-else-if="item.type === 'date'"
v-model="form[item.prop]"
:type="item.dateType ? item.dateType : 'date'"
:placeholder="item.placeholder"
:picker-options="item.options"
:format="item.format"
:value-format="item.valueFormat"
@change="item.func ? item.func($event) : {}"
></el-date-picker>
<!-- 时间 -->
<el-time-picker
v-else-if="item.type === 'time'"
:format="item.format"
:value-format="item.valueFormat"
v-model="form[item.prop]"
:picker-options="item.options"
@change="item.func ? item.func($event) : {}"
></el-time-picker>
<!-- 开关 -->
<el-switch
v-else-if="item.type === 'switch'"
:disabled="item.disabled"
:active-value="item.activeValue || 1"
:inactive-value="item.inactiveValue || 0"
v-model="form[item.prop]"
>
</el-switch>
<!-- 单选框 -->
<el-radio
:class="item.class"
v-else-if="item.type === 'radio'"
v-model="form[item.prop]"
v-for="(opt, optIndex) in item.opts"
:key="optIndex"
:label="opt.value"
@change="item.func ? item.func($event) : {}"
>{{ opt.label }}</el-radio
>
<!-- 单选框 -->
<el-radio
:class="item.class"
v-else-if="item.type === 'radio'"
v-model="form[item.prop]"
<!-- 多选框 -->
<el-checkbox-group
v-else-if="item.type === 'checkbox'"
v-model="form[item.prop]"
>
<el-checkbox
v-for="(opt, optIndex) in item.opts"
:key="optIndex"
:label="opt.value"
@change="item.func ? item.func($event) : {}"
>{{ opt.label }}</el-radio
>
<!-- 多选框 -->
<el-checkbox-group
v-else-if="item.type === 'checkbox'"
v-model="form[item.prop]"
>
<el-checkbox
v-for="(opt, optIndex) in item.opts"
:key="optIndex"
:label="opt.label"
></el-checkbox>
</el-checkbox-group>
:label="opt.label"
></el-checkbox>
</el-checkbox-group>
<!-- 级联 -->
<el-cascader
v-else-if="item.type === 'cascader'"
:options="item.list"
v-model="form[item.prop]"
:clearable="true"
:filterable="true"
></el-cascader>
<!-- 级联 -->
<el-cascader
v-else-if="item.type === 'cascader'"
:options="item.list"
v-model="form[item.prop]"
:clearable="true"
:filterable="true"
></el-cascader>
<!-- 树形 -->
<el-tree
v-else-if="item.type === 'tree'"
ref="tree"
:data="treeList"
show-checkbox
:node-key="item.nodeKey || 'id'"
:props="item.props || defaultProps"
></el-tree>
<!-- 树形 -->
<el-tree
v-else-if="item.type === 'tree'"
ref="tree"
:data="treeList"
show-checkbox
:node-key="item.nodeKey || 'id'"
:props="item.props || defaultProps"
></el-tree>
<!-- 导入文件 -->
<template v-else-if="item.type === 'import'">
<div class="import-container" @click="handleImport">
<span v-if="form[item.prop]">{{ form[item.prop] }}</span>
<span v-else class="wait">{{ item.placeholder }}</span>
<i class="el-icon-upload"></i>
</div>
<input
ref="fileInput"
type="file"
class="import-file"
:accept="item.accept"
@change="handleFileChange($event)"
/>
</template>
<!-- 导入文件 -->
<template v-else-if="item.type === 'import'">
<div class="import-container" @click="handleImport">
<span v-if="form[item.prop]">{{ form[item.prop] }}</span>
<span v-else class="wait">{{ item.placeholder }}</span>
<i class="el-icon-upload"></i>
</div>
<input
ref="fileInput"
type="file"
class="import-file"
:accept="item.accept"
@change="handleFileChange($event)"
/>
</template>
<span v-else-if="item.type === 'text'">{{
form[item.prop]
}}</span>
</el-form-item>
</el-col>
<span v-else-if="item.type === 'text'">{{
form[item.prop]
}}</span>
</el-form-item>
<!-- </el-col> -->
</template>
</el-row>
</el-form>
......@@ -571,4 +567,8 @@ export default {
.el-autocomplete {
width: 100%;
}
.el-row {
display: flex;
flex-wrap: wrap;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment