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 @@ ...@@ -20,254 +20,250 @@
> >
<el-row> <el-row>
<template v-for="(item, index) in formDataSet"> <template v-for="(item, index) in formDataSet">
<el-col <!-- <el-col
v-if="!item.hidden" v-if="!item.hidden"
:span="item.spanCount ? item.spanCount : countLine" :span="item.spanCount ? item.spanCount : countLine"
:key="item.prop" :key="item.prop"
:class="item.class" :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" <el-button
:label="item.label ? `${item.label}:` : ''" v-if="item.operation"
:label-width="item.labelWidth" class="operBtn"
:prop="item.prop" :type="item.operation.type ? item.operation.type : 'text'"
:rules="item.rules" :autofocus="item.autofocus"
:class="item.className" @click="item.operation.func ? item.operation.func(form) : {}"
:style="item.style" >
{{
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 <el-tooltip
v-if="item.tips" v-if="item.tips"
effect="dark" effect="dark"
:content="item.tips" :content="item.tips"
placement="top" placement="top"
slot="label" 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-input>
</el-tooltip>
<!-- 输入框 input --> <!-- 数字输入框 -->
<el-input <div v-if="item.type === 'number'" style="display: inline-table">
v-if="item.type === 'input'" <el-input-number
:type="item.inputType ? item.inputType : ''" :min="item.min"
:maxlength="item.maxlength" :max="item.max"
:minlength="item.minlength"
:placeholder="item.placeholder"
clearable clearable
:precision="item.precision"
:controls="item.controls || false"
:disabled="item.disabled" :disabled="item.disabled"
v-model="form[item.prop]" v-model="form[item.prop]"
:placeholder="item.placeholder"
@input="item.func ? item.func($event) : {}" @input="item.func ? item.func($event) : {}"
:resize="item.resize" style="display: table-cell"
:rows="item.rows" ></el-input-number>
:autosize="item.autosize" <span
v-if="item.append"
class="el-input-group__append"
style="line-height: 28px"
>{{ item.append }}</span
> >
<span </div>
:slot="item.slot ? item.slot : 'append'" <!-- 模糊查询输入 -->
v-if="item.unit" <el-autocomplete
>{{ item.unit }}</span v-else-if="item.type === 'autocomplete'"
> popper-class="my-autocomplete"
</el-input> 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 <el-select
v-if="item.type === 'number'" v-else-if="item.type === 'select'"
style="display: inline-table" :multiple="item.multiple"
> :disabled="item.disabled"
<el-input-number v-model="form[item.prop]"
:min="item.min" :placeholder="item.placeholder ? item.placeholder : '请选择'"
:max="item.max" :filterable="item.filterable ? false : true"
clearable clearable
:precision="item.precision" :value-key="item.key ? item.key : 'value'"
:controls="item.controls || false" @change="item.func ? item.func($event) : {}"
:disabled="item.disabled" >
v-model="form[item.prop]" <el-option
:placeholder="item.placeholder" v-for="(opt, optIndex) in item.opts"
@input="item.func ? item.func($event) : {}" :key="optIndex"
style="display: table-cell" :label="opt.label"
></el-input-number> :value="item.isSelect ? opt.selectValue : opt.value"
<span :disabled="opt.disabled"
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
> >
<template slot-scope="{ item }"> <span style="float: left">{{ opt.label }}</span>
<div class="name"> <span style="float: right; color: #8492a6; font-size: 10px">{{
{{ item.value }} opt.description
<span v-if="item.specification" }}</span>
>({{ item.specification }})</span </el-option>
> </el-select>
</div>
<span class="description">{{ item.description }}</span>
</template>
</el-autocomplete>
<!-- 选择器 --> <!-- 模糊查询选择 -->
<el-select <el-select
v-else-if="item.type === 'select'" v-else-if="item.type === 'remote'"
:multiple="item.multiple" v-model="form[item.prop]"
:disabled="item.disabled" filterable
v-model="form[item.prop]" remote
:placeholder="item.placeholder ? item.placeholder : '请选择'" reserve-keyword
:filterable="item.filterable ? false : true" :multiple="item.multiple ? true : false"
clearable :placeholder="item.placeholder"
:value-key="item.key ? item.key : 'value'" :remote-method="item.remoteFunc"
@change="item.func ? item.func($event) : {}" v-el-select-loadmore="loadmore"
> @change="item.func ? item.func($event) : {}"
<el-option >
v-for="(opt, optIndex) in item.opts" <el-option
:key="optIndex" v-for="(opt, optIndex) in item.opts"
:label="opt.label" :key="optIndex"
:value="item.isSelect ? opt.selectValue : opt.value" :label="opt.label"
:disabled="opt.disabled" :value="item.isSelect ? opt.selectValue : opt.value"
> ></el-option>
<span style="float: left">{{ opt.label }}</span> </el-select>
<span
style="float: right; color: #8492a6; font-size: 10px"
>{{ opt.description }}</span
>
</el-option>
</el-select>
<!-- 模糊查询选择 --> <!-- 日期 -->
<el-select <el-date-picker
v-else-if="item.type === 'remote'" v-else-if="item.type === 'date'"
v-model="form[item.prop]" v-model="form[item.prop]"
filterable :type="item.dateType ? item.dateType : 'date'"
remote :placeholder="item.placeholder"
reserve-keyword :picker-options="item.options"
:multiple="item.multiple ? true : false" :format="item.format"
:placeholder="item.placeholder" :value-format="item.valueFormat"
:remote-method="item.remoteFunc" @change="item.func ? item.func($event) : {}"
v-el-select-loadmore="loadmore" ></el-date-picker>
@change="item.func ? item.func($event) : {}" <!-- 时间 -->
> <el-time-picker
<el-option v-else-if="item.type === 'time'"
v-for="(opt, optIndex) in item.opts" :format="item.format"
:key="optIndex" :value-format="item.valueFormat"
:label="opt.label" v-model="form[item.prop]"
:value="item.isSelect ? opt.selectValue : opt.value" :picker-options="item.options"
></el-option> @change="item.func ? item.func($event) : {}"
</el-select> ></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 <el-radio
v-else-if="item.type === 'date'" :class="item.class"
v-model="form[item.prop]" v-else-if="item.type === 'radio'"
:type="item.dateType ? item.dateType : 'date'" v-model="form[item.prop]"
:placeholder="item.placeholder" v-for="(opt, optIndex) in item.opts"
:picker-options="item.options" :key="optIndex"
:format="item.format" :label="opt.value"
:value-format="item.valueFormat" @change="item.func ? item.func($event) : {}"
@change="item.func ? item.func($event) : {}" >{{ opt.label }}</el-radio
></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 <el-checkbox-group
:class="item.class" v-else-if="item.type === 'checkbox'"
v-else-if="item.type === 'radio'" v-model="form[item.prop]"
v-model="form[item.prop]" >
<el-checkbox
v-for="(opt, optIndex) in item.opts" v-for="(opt, optIndex) in item.opts"
:key="optIndex" :key="optIndex"
:label="opt.value" :label="opt.label"
@change="item.func ? item.func($event) : {}" ></el-checkbox>
>{{ opt.label }}</el-radio </el-checkbox-group>
>
<!-- 多选框 -->
<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>
<!-- 级联 --> <!-- 级联 -->
<el-cascader <el-cascader
v-else-if="item.type === 'cascader'" v-else-if="item.type === 'cascader'"
:options="item.list" :options="item.list"
v-model="form[item.prop]" v-model="form[item.prop]"
:clearable="true" :clearable="true"
:filterable="true" :filterable="true"
></el-cascader> ></el-cascader>
<!-- 树形 --> <!-- 树形 -->
<el-tree <el-tree
v-else-if="item.type === 'tree'" v-else-if="item.type === 'tree'"
ref="tree" ref="tree"
:data="treeList" :data="treeList"
show-checkbox show-checkbox
:node-key="item.nodeKey || 'id'" :node-key="item.nodeKey || 'id'"
:props="item.props || defaultProps" :props="item.props || defaultProps"
></el-tree> ></el-tree>
<!-- 导入文件 --> <!-- 导入文件 -->
<template v-else-if="item.type === 'import'"> <template v-else-if="item.type === 'import'">
<div class="import-container" @click="handleImport"> <div class="import-container" @click="handleImport">
<span v-if="form[item.prop]">{{ form[item.prop] }}</span> <span v-if="form[item.prop]">{{ form[item.prop] }}</span>
<span v-else class="wait">{{ item.placeholder }}</span> <span v-else class="wait">{{ item.placeholder }}</span>
<i class="el-icon-upload"></i> <i class="el-icon-upload"></i>
</div> </div>
<input <input
ref="fileInput" ref="fileInput"
type="file" type="file"
class="import-file" class="import-file"
:accept="item.accept" :accept="item.accept"
@change="handleFileChange($event)" @change="handleFileChange($event)"
/> />
</template> </template>
<span v-else-if="item.type === 'text'">{{ <span v-else-if="item.type === 'text'">{{
form[item.prop] form[item.prop]
}}</span> }}</span>
</el-form-item> </el-form-item>
</el-col> <!-- </el-col> -->
</template> </template>
</el-row> </el-row>
</el-form> </el-form>
...@@ -571,4 +567,8 @@ export default { ...@@ -571,4 +567,8 @@ export default {
.el-autocomplete { .el-autocomplete {
width: 100%; width: 100%;
} }
.el-row {
display: flex;
flex-wrap: wrap;
}
</style> </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