<template>
|
<el-dialog
|
v-dialogDrag
|
v-loading="loading"
|
:visible.sync="visible"
|
append-to-body="true"
|
class="avue-dialog"
|
title="表格"
|
width="60%"
|
@close="closeDialog"
|
>
|
<el-form :model="form" :rules="rules" label-position="right" label-width="100px">
|
<el-row>
|
<el-col :span="12">
|
<el-form-item label="名称">
|
<el-input v-model="user" placeholder="请输入内容" size="mini"></el-input>
|
</el-form-item>
|
</el-col>
|
|
|
<el-col :span="12">
|
<el-form-item label="每页行数">
|
<el-input v-model="user" placeholder="请输入内容" size="mini"></el-input>
|
</el-form-item>
|
</el-col>
|
|
<el-col :span="24">
|
<el-form-item label="附加查询条件">
|
<el-input v-model="user" placeholder="请输入内容" size="mini"></el-input>
|
</el-form-item>
|
</el-col>
|
|
<el-col :span="12">
|
<el-form-item label="绑定表单">
|
<div style="display: flex;align-items: center;">
|
<el-select v-model="form.region" placeholder="请选择活动区域" size="mini">
|
<el-option label="区域一" value="shanghai"></el-option>
|
<el-option label="区域二" value="beijing"></el-option>
|
</el-select>
|
<el-button plain size="mini" style="margin-left: 3px" type="success">选择</el-button>
|
</div>
|
</el-form-item>
|
</el-col>
|
|
<el-col :span="12">
|
<el-form-item label="父名称">
|
<div style="display: flex;align-items: center;">
|
<el-input v-model="user" placeholder="请输入内容" size="mini"></el-input>
|
<el-checkbox v-model="checked" style="margin-left: 5px; margin-right: 5px">显示查询区域</el-checkbox>
|
<el-checkbox v-model="checked" style="margin-left: 5px;margin-right: 0px">显示文件夹</el-checkbox>
|
</div>
|
</el-form-item>
|
</el-col>
|
|
<el-col :span="12">
|
<el-form-item label="显示字段">
|
<div style="display: flex; align-items: center">
|
<div style="height: 260px; width: 160px; border: 1px solid #bdbbbb;overflow-y: auto">
|
<el-table
|
:data="showLifeTable"
|
style="width: 100%">
|
<el-table-column
|
align="center"
|
label="可使用字段"
|
prop="id">
|
</el-table-column>
|
</el-table>
|
</div>
|
<div style="margin-left: 10px; margin-right: 10px">
|
<el-button circle icon="el-icon-back" style="margin-right: 10px"></el-button>
|
<el-button circle icon="el-icon-right"></el-button>
|
</div>
|
<div style="height: 260px; width: 160px; border: 1px solid #bdbbbb;overflow-y: auto">
|
<el-table
|
:data="showRightTable"
|
style="width: 100%">
|
<el-table-column
|
align="center"
|
label="需要使用字段"
|
prop="id">
|
</el-table-column>
|
</el-table>
|
</div>
|
</div>
|
</el-form-item>
|
</el-col>
|
|
<el-col :span="12">
|
<el-form-item label="搜索字段">
|
<div style="display: flex; align-items: center">
|
<div style="height: 260px; width: 160px; border: 1px solid #bdbbbb;overflow-y: auto">
|
<el-table
|
:data="searchLifeTable"
|
style="width: 100%">
|
<el-table-column
|
align="center"
|
label="可供搜索字段"
|
prop="id">
|
</el-table-column>
|
</el-table>
|
</div>
|
<div style="margin-left: 10px; margin-right: 10px">
|
<el-button circle icon="el-icon-back" style="margin-right: 10px"></el-button>
|
<el-button circle icon="el-icon-right"></el-button>
|
</div>
|
<div style="height: 260px; width: 160px; border: 1px solid #bdbbbb;overflow-y: auto">
|
<el-table
|
:data="searchRightTable"
|
style="width: 100%">
|
<el-table-column
|
align="center"
|
label="需搜索字段"
|
prop="id">
|
</el-table-column>
|
</el-table>
|
</div>
|
</div>
|
</el-form-item>
|
</el-col>
|
|
<el-col :span="12">
|
<el-form-item label="列">
|
<el-select v-model="form.region" placeholder="请选择列" size="mini">
|
<el-option label="区域一" value="shanghai"></el-option>
|
<el-option label="区域二" value="beijing"></el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
|
<el-col :span="12">
|
<el-form-item label="宽度">
|
<div style="display: flex;align-items: center;">
|
<el-input v-model="user" placeholder="请输入内容" size="mini" style="width: 193px"></el-input>
|
<el-button plain size="mini" style="margin-left: 3px" type="success">设置</el-button>
|
</div>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-col :span="24">
|
<el-form-item label="设置列宽">
|
<div style="height: 150px; width: 100%; border: 1px solid #bdbbbb;overflow-y: auto">
|
<el-table
|
:data="columnWidthData"
|
:highlight-current-row="true"
|
border
|
stripe
|
style="width: 100%">
|
<el-table-column
|
align="center"
|
label="列名"
|
prop="id">
|
<template slot-scope="scope">
|
<el-tag size="medium">{{ scope.row.id }}</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column
|
align="center"
|
label="列宽"
|
prop="width">
|
<template slot-scope="scope">
|
<el-tag size="medium">{{ scope.row.width }}</el-tag>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</el-form-item>
|
</el-col>
|
|
<el-col :span="8">
|
<el-form-item label="查询字段">
|
<el-input v-model="user" placeholder="请输入内容" size="mini"></el-input>
|
</el-form-item>
|
</el-col>
|
|
<el-col :span="8">
|
<el-form-item label="查询次数">
|
<el-input v-model="user" placeholder="请输入内容" size="mini"></el-input>
|
</el-form-item>
|
</el-col>
|
|
<el-col :span="8">
|
<el-form-item label="查询sql">
|
<div style="display: flex;align-items: center">
|
<el-input v-model="user" placeholder="请输入内容" size="mini"></el-input>
|
<el-button plain size="mini" style="margin-left: 3px" type="success">添加</el-button>
|
<el-button plain size="mini" style="margin-left: 3px" type="danger">删除</el-button>
|
</div>
|
</el-form-item>
|
</el-col>
|
|
<el-col :span="24">
|
<el-form-item label="查询字段">
|
<div style="height: 150px; width: 100%; border: 1px solid #bdbbbb;overflow-y: auto">
|
<el-table
|
:data="columnSearchData"
|
:highlight-current-row="true"
|
border
|
stripe
|
style="width: 100%">
|
<el-table-column
|
align="center"
|
label="查询字段"
|
prop="id">
|
<template slot-scope="scope">
|
<el-tag size="medium">{{ scope.row.id }}</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column
|
align="center"
|
label="查询次数"
|
prop="name">
|
<template slot-scope="scope">
|
<el-tag size="medium">{{ scope.row.name }}</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column
|
align="center"
|
label="查询sql"
|
prop="sql">
|
<template slot-scope="scope">
|
<el-tag size="medium">{{ scope.row.sql }}</el-tag>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</el-form-item>
|
</el-col>
|
|
<el-col :span="24">
|
<el-form-item label="双击操作">
|
<el-select v-model="form.region" placeholder="请选择双击操作" size="mini">
|
<el-option label="区域一" value="shanghai"></el-option>
|
<el-option label="区域二" value="beijing"></el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
|
<el-col :span="24">
|
<el-form-item label="图片显示">
|
<div style="display: flex;align-items: center">
|
<div style="display: flex;align-items: center;width: 100%;">
|
<span>长：</span>
|
<el-input v-model="user" placeholder="请输入内容" size="mini"></el-input>
|
</div>
|
<div style="display: flex;align-items: center;width: 100%;margin-left: 30px">
|
<span>宽：</span>
|
<el-input v-model="user" placeholder="请输入内容" size="mini"></el-input>
|
</div>
|
</div>
|
</el-form-item>
|
</el-col>
|
|
<el-col :span="12">
|
<el-form-item label="字符串截取">
|
<el-input v-model="user" placeholder="请输入内容" size="mini"></el-input>
|
</el-form-item>
|
</el-col>
|
|
<el-col :span="8">
|
<el-form-item label="超链接">
|
<el-input v-model="user" placeholder="请输入内容" size="mini"></el-input>
|
</el-form-item>
|
</el-col>
|
|
<el-col :span="24">
|
<el-form-item label="查询模板">
|
<el-select v-model="form.region" placeholder="请选择查询模板" size="mini">
|
<el-option label="区域一" value="shanghai"></el-option>
|
<el-option label="区域二" value="beijing"></el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-form>
|
|
<span slot="footer" class="dialog-footer">
|
<el-button>取 消</el-button>
|
<el-button type="primary">确 定</el-button>
|
</span>
|
</el-dialog>
|
</template>
|
|
<script>
|
export default {
|
name: "tableDialog",
|
data() {
|
return {
|
columnSearchData: [
|
{
|
id: 'test',
|
name: '3',
|
sql: 'xxxxx'
|
}
|
],
|
columnWidthData: [
|
{
|
id: 'test',
|
width: '250'
|
}
|
],
|
searchLifeTable: [],
|
searchRightTable: [],
|
showRightTable: [],
|
showLifeTable: [
|
{
|
id: 'test1'
|
},
|
{
|
id: 'test2'
|
},
|
{
|
id: 'test1'
|
},
|
{
|
id: 'test2'
|
},
|
{
|
id: 'test1'
|
},
|
{
|
id: 'test2'
|
}
|
],
|
rules: {},
|
form: {},
|
loading: false,
|
visible: false
|
}
|
},
|
methods: {
|
closeDialog() {
|
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
::v-deep {
|
.el-form-item .el-select {
|
//width: 100%;
|
}
|
}
|
</style>
|
