<template>
|
<div class="active-basic">
|
<div class="common-form">字段信息</div>
|
<el-form-item label="字段管理" prop="tableData">
|
<el-button icon="el-icon-plus" @click="addField">添加字段</el-button>
|
<div class="pt16">
|
<div class="d-a-c border-t border-l border-r">
|
<div style="width: 40px;" class="d-c-c border-r">排序</div>
|
<div style="min-width: 200px;" class="flex-1 d-c-c border-r">名称</div>
|
<div style="width: 200px;" class="d-c-c border-r">类型</div>
|
<div style="min-width: 200px;" class="flex-1 d-c-c border-r">备选值(以英文逗号隔开)</div>
|
<div style="width: 40px;" class="d-c-c border-r">必填</div>
|
<div style="width: 200px;" class="d-c-c border-r">验证类型</div>
|
<div style="width: 80px;" class="d-c-c">操作</div>
|
</div>
|
<draggable class="wrapper border-b" v-model="form.tableData">
|
<transition-group>
|
<div v-for="(item, index) in form.tableData" :key="item" class="d-a-c border-t border-l border-r">
|
<div class="icon iconfont icon-tuodong d-c-c p6 border-r" style="width: 40px;"></div>
|
<div style="min-width: 200px;" class="flex-1 p6 border-r d-c-c">
|
<el-input type="text" v-model="item.name"></el-input>
|
</div>
|
<div style="width: 200px;" class="d-c-c p6 border-r">
|
<el-select v-model="item.type" placeholder="请选择">
|
<el-option v-for="(fitem, findex) in fields" :key="findex" :label="fitem.name" :value="fitem.type">
|
</el-option>
|
</el-select>
|
</div>
|
<div style="min-width: 200px;" class="flex-1 p6 d-c-c border-r">
|
<el-input type="text" v-model="item.select_value"
|
:disabled="item.type !='radio' && item.type !='radio-group' && item.type !='select'">
|
</el-input>
|
</div>
|
<div style="width: 40px;" class="d-c-c p6 border-r">
|
<el-checkbox v-model="item.is_required"></el-checkbox>
|
</div>
|
<div style="width: 200px;" class="d-c-c p6 border-r">
|
<el-select v-model="item.rule" placeholder="请选择">
|
<el-option v-for="(ritem, rindex) in rules" :key="rindex" :label="ritem.name" :value="ritem.type">
|
</el-option>
|
</el-select>
|
</div>
|
<div style="width: 80px;" class="d-c-c p6">
|
<el-button type="text" size="small" @click.stop="deleteItem(index)">删除</el-button>
|
</div>
|
</div>
|
</transition-group>
|
</draggable>
|
<!--<el-table size="mini" :data="form.tableData" border style="width: 100%;">
|
<el-table-column label="排序" width="80">
|
<template slot-scope="scope">
|
<el-button type="text" size="small">拖动排序</el-button>
|
</template>
|
</el-table-column>
|
</transition-group>
|
</draggable>
|
<el-table-column label="字段名称">
|
<template slot-scope="scope">
|
<el-input type="text" v-model="scope.row.name"></el-input>
|
</template>
|
</el-table-column>
|
<el-table-column label="字段类型">
|
<template slot-scope="scope">
|
<el-select v-model="scope.row.type" placeholder="请选择">
|
<el-option v-for="(item, index) in fields" :key="index" :label="item.name" :value="item.type">
|
</el-option>
|
</el-select>
|
</template>
|
</el-table-column>
|
<el-table-column label="备选值(以英文逗号隔开)" width="200">
|
<template slot-scope="scope">
|
<el-input type="text" v-model="scope.row.product_name"
|
:disabled="scope.row.type !='radio' && scope.row.type !='radio-group' && scope.row.type !='select'">
|
</el-input>
|
</template>
|
</el-table-column>
|
<el-table-column label="是否必填">
|
<template slot-scope="scope">
|
<el-checkbox v-model="scope.row.is_required"></el-checkbox>
|
</template>
|
</el-table-column>
|
<el-table-column label="验证类型">
|
<template slot-scope="scope">
|
<el-select v-model="scope.row.rule" placeholder="请选择">
|
<el-option v-for="(item, index) in rules" :key="index" :label="item.name" :value="item.type">
|
</el-option>
|
</el-select>
|
</template>
|
</el-table-column>
|
<el-table-column fixed="right" label="操作" width="50">
|
<template slot-scope="scope">
|
<el-button type="text" size="small">删除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>-->
|
</div>
|
</el-form-item>
|
</div>
|
</template>
|
|
<script>
|
import draggable from 'vuedraggable';
|
export default {
|
components: {
|
draggable
|
},
|
props: {
|
form: Object
|
},
|
data() {
|
return {
|
fields: [{
|
name: '单行文本',
|
type: 'text'
|
},
|
{
|
name: '多行文本',
|
type: 'textarea'
|
},
|
{
|
name: '单选',
|
type: 'radio'
|
},
|
{
|
name: '多选',
|
type: 'radio-group'
|
},
|
{
|
name: '下拉框',
|
type: 'select'
|
},
|
{
|
name: '图片',
|
type: 'image'
|
},
|
{
|
name: '地区选择',
|
type: 'area'
|
},
|
{
|
name: '时间选择',
|
type: 'time'
|
}
|
],
|
rules: [{
|
name: '不验证',
|
type: 'no'
|
},
|
{
|
name: '数字',
|
type: 'number'
|
},
|
{
|
name: '手机号码',
|
type: 'mobile'
|
},
|
{
|
name: '座机或手机号码',
|
type: 'phone'
|
},
|
{
|
name: '电子邮箱',
|
type: 'email'
|
},
|
{
|
name: '身份证',
|
type: 'idcard'
|
}
|
]
|
};
|
},
|
methods: {
|
addField() {
|
this.form.tableData.push({
|
name: '',
|
type: 'text',
|
is_required: true,
|
rule: 'no'
|
});
|
},
|
deleteItem(index){
|
this.form.tableData.splice(index, 1);
|
},
|
}
|
};
|
</script>
|
|
<style>
|
.mb8{
|
margin-bottom: 8px;
|
}
|
.p6{
|
padding: 6px;
|
}
|
</style>
|
