Skip to content

Commit

Permalink
add 高级查询 , 去掉gen-f拖拽key重置问题
Browse files Browse the repository at this point in the history
  • Loading branch information
@BoBoooooo
BoBoooooo committed Nov 17, 2018
1 parent bbf0bc3 commit f918530
Show file tree
Hide file tree
Showing 7 changed files with 142 additions and 73 deletions.
9 changes: 4 additions & 5 deletions src/components/FormDesigner/Container.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,12 @@

<div class="config-tab2" :class="{active: configTab=='formcontainer'}" @click="handleConfigSelect('formcontainer')">表单设计</div>
<div class="config-tab2" :class="{active: configTab=='listcontainer'}" @click="handleConfigSelect('listcontainer')">列表设计</div>
<span style="" v-if="selectform!==''">正在制作:{{selectform}}表</span>

<div style="float:right">
<span style="margin-left:20px;" v-if="selectform!==''">正在制作:{{selectform}}</span>
<el-button style="border:none" type="text" size="medium" @click="save" icon="el-icon-star-on
">保存</el-button>
<el-button style="border:none;" @click="openmodal" type="text" size="medium" icon="el-icon-info" >选择表</el-button>
<!-- <el-button type="text" size="medium" @click="handleGoGithub">GitHub</el-button> -->
<el-button type="text" size="medium" icon="el-icon-view" @click="handlePreview">预览</el-button>
<el-button type="text" size="medium" icon="el-icon-tickets" @click="handleGenerateJson">生成JSON</el-button>
</div>
Expand Down Expand Up @@ -140,14 +140,13 @@
<el-aside class="widget-config-container" style="width:30%;">
<el-container>
<el-header height="45px">
<div class="config-tab" :class="{active: configTab=='widget'}" @click="handleConfigSelect('widget')">字段属性</div>
<div class="config-tab" :class="{active: configTab=='widget'||configTab=='formcontainer'}" @click="handleConfigSelect('widget')">字段属性</div>
<div class="config-tab" :class="{active: configTab=='form'}" @click="handleConfigSelect('form')">表单属性</div>

</el-header>
<el-main class="config-content">
<widget-config v-show="configTab=='widget'" :data="widgetFormSelect"></widget-config>
<widget-config v-show="configTab=='widget'||configTab=='formcontainer'" :data="widgetFormSelect"></widget-config>
<form-config v-show="configTab=='form'" :data="widgetForm.config"></form-config>

</el-main>
</el-container>

Expand Down
12 changes: 5 additions & 7 deletions src/components/FormDesigner/ListConfig.vue
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@

<template>


<div id="listconfig_container" style="width:100%">
<draggable v-model="config.columnList" :options = "{animation:500}">
<transition-group>
Expand All @@ -21,13 +19,13 @@
<el-input v-model="item.label" class="inline" placeholder="输入列标题"></el-input>


<el-button @click.prevent="removeDomain(item)" circle icon="el-icon-minus" class="inline_button"></el-button>
<el-button @click.prevent="removeItem(item)" type="mini" icon="el-icon-minus" circle class="inline_button"></el-button>

</div>
</transition-group>
</draggable>

<el-button style="margin:0 auto;display:block;margin-top:10px" @click="addDomain" circle icon="el-icon-plus"></el-button>
<el-button style="margin:0 auto;display:block;margin-top:10px" type="mini" @click="addItem" circle icon="el-icon-plus"></el-button>

</div>
</template>
Expand Down Expand Up @@ -61,13 +59,13 @@ export default {
}
},
methods: {
removeDomain(item) {
var index = this.allList.includes(item);
removeItem(item) {
var index = this.allList.indexOf(item);
if (index) {
this.allList.splice(index, 1);
}
},
addDomain() {
addItem() {
this.allList.push({
label: "",
key: ""
Expand Down
44 changes: 22 additions & 22 deletions src/components/FormDesigner/WidgetForm.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,17 +110,17 @@ export default {
//为拖拽到容器的元素添加唯一 key
const key = Date.parse(new Date()) + '_' + Math.ceil(Math.random() * 99999)
this.$set(this.data.list, newIndex, {
...this.data.list[newIndex],
options: {
...this.data.list[newIndex].options,
remoteFunc: 'func_' + key
},
key,
// 绑定键值
model: this.data.list[newIndex].type + '_' + key,
rules: []
})
// this.$set(this.data.list, newIndex, {
// ...this.data.list[newIndex],
// options: {
// ...this.data.list[newIndex].options,
// remoteFunc: 'func_' + key
// },
// key,
// // 绑定键值
// model: this.data.list[newIndex].type + '_' + key,
// rules: []
// })
if (this.data.list[newIndex].type === 'radio' || this.data.list[newIndex].type === 'checkbox') {
this.$set(this.data.list, newIndex, {
Expand Down Expand Up @@ -164,17 +164,17 @@ export default {
const key = Date.parse(new Date()) + '_' + Math.ceil(Math.random() * 99999)
this.$set(row.columns[colIndex].list, newIndex, {
...row.columns[colIndex].list[newIndex],
options: {
...row.columns[colIndex].list[newIndex].options,
remoteFunc: 'func_' + key
},
key,
// 绑定键值
model: row.columns[colIndex].list[newIndex].type + '_' + key,
rules: []
})
// this.$set(row.columns[colIndex].list, newIndex, {
// ...row.columns[colIndex].list[newIndex],
// options: {
// ...row.columns[colIndex].list[newIndex].options,
// remoteFunc: 'func_' + key
// },
// key,
// // 绑定键值
// model: row.columns[colIndex].list[newIndex].type + '_' + key,
// rules: []
// })
if (row.columns[colIndex].list[newIndex].type === 'radio' || row.columns[colIndex].list[newIndex].type === 'checkbox') {
this.$set(row.columns[colIndex].list, newIndex, {
Expand Down
5 changes: 4 additions & 1 deletion src/components/FormDesigner/styles/index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,6 +90,9 @@ $primary-background-color: #ecf5ff;
span{
display: inline-block;
vertical-align: middle;
text-overflow: ellipsis;
overflow: hidden;

}
}
}
Expand Down Expand Up @@ -233,7 +236,7 @@ $primary-background-color: #ecf5ff;
height: 45px;
line-height: 45px;
display: inline-block;
width: 32%;
width: 49%;
text-align: center;
font-size: 14px;
font-weight: 500;
Expand Down
4 changes: 4 additions & 0 deletions src/styles/element-ui.scss
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
//覆盖一些element-ui样式

.el-input__inner{ //去掉border-radius
border-radius: 0px;
}
.el-breadcrumb__inner, .el-breadcrumb__inner a{
font-weight: 400!important;
}
Expand All @@ -17,6 +20,7 @@
display: none;
}


.cell {
.el-tag {
margin-right: 0px;
Expand Down
4 changes: 3 additions & 1 deletion src/styles/index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,9 @@ body {
text-rendering: optimizeLegibility;
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
}

input{
border-radius: 0px;
}
label {
font-weight: 700;
}
Expand Down
137 changes: 100 additions & 37 deletions src/views/Archive/person_edit.vue
View file
Original file line number Diff line number Diff line change
@@ -1,29 +1,59 @@
<template>
<div class="app-container" id="person">

<div v-show="buttonVisible=='el-icon-arrow-up'" class="searchContainer">
<el-row v-for="(item,index) in searchArr" :key="index" style="margin-top:2px">
<el-col :span="6">
<el-select v-model="item.SearchKey" placeholder="请选择查询项" >
<el-option v-for="(subitem,index) in jsonData.config.columnList" :label="subitem.label" :value="subitem.key" :key="index"></el-option>
</el-select>
</el-col>
<el-col :span="6">

<el-select v-model="item.SearchType" placeholder="请选择查询条件" >
<el-option v-for="(subitem,index) in SearchType" :label="subitem.label" :value="subitem.key" :key="index"></el-option>
</el-select>
</el-col>

<el-col :span="10">
<el-input placeholder="请输入查询内容" v-model="item.SearchValue" >

</el-input>

</el-col>


<el-col :span="2">
<el-button style="margin:5px 0px 0px 10px;padding:10px" type="danger" @click="removeItem" circle icon="el-icon-minus"></el-button>

</el-col>



</el-row>
<el-button style="margin:0 auto;display:block;margin-top:10px" type="primary" @click="addItem" circle icon="el-icon-plus"></el-button>

</div>

<el-row style="margin-bottom:10px">
<el-col :span="2">

<el-button type="success" @click="New()" icon="el-icon-plus" ></el-button>

</el-col>
<el-col :span="22">
<el-select v-model="listQuery.SearchKey" placeholder="请选择" style="float:left;width:20%">
<el-select v-model="listQuery.SearchKey" placeholder="请选择" style="float:left;width:20%;border-bottom-right-radius:0px;border-top-right-radius:0px; ">
<el-option v-for="(item,index) in jsonData.config.columnList" :label="item.label" :value="item.key" :key="index"></el-option>

</el-select>
<el-input ref="test_input" @keyup.enter.native="Refresh" placeholder="请输入" v-model="listQuery.SearchValue" style="float:left;width:80%">
<el-input ref="test_input" @keyup.enter.native="Refresh" placeholder="请输入" v-model="listQuery.SearchValue" style="float:left;width:80%;border-bottom-left-radius:0px;border-top-left-radius:0px; ">

<el-button slot="append" icon="el-icon-search" v-on:click="Refresh"></el-button>
<el-button slot="append" icon="el-icon-refresh" v-on:click="ClearOption"></el-button>

<!-- <el-button slot="append" class="buttonVisible" :icon="buttonVisible" @click="changeVisible" >
<el-select v-show="buttonVisible=='el-icon-arrow-up'" class="buttonVisible_select" v-model="listQuery.SearchKey" placeholder="请选择" style="float:left;width:20%">
<el-option v-for="(item,index) in jsonData.config.columnList" :label="item.label" :value="item.value" :key="index"></el-option>
</el-select>
<el-input ref="test_input" placeholder="请输入" v-model="listQuery.SearchValue" style="float:left;width:80%">
</el-input>
</el-button> -->
<el-button slot="append" class="buttonVisible" :icon="buttonVisible" @click="changeVisible" >

</el-button>
</el-input>
</el-col>
</el-row>
Expand Down Expand Up @@ -108,6 +138,38 @@ export default {
SearchKey: "",
SearchValue: ""
},
SearchType:[
{
label:"等于",
key:"="
},
{
label:"不等于",
key:"<>"
},
{
label:"大于",
key:">"
},
{
label:"大于等于",
key:">="
},
{
label:"小于",
key:"<"
},
{
label:"小于等于",
key:"<="
}
],
searchArr: [
{
SearchKey: "",
SearchValue: ""
}
],
uploadParams: {
Param: {
MasterID: ""
Expand Down Expand Up @@ -142,15 +204,6 @@ export default {
});
},
mounted() {
document.addEventListener("click", e => {
// console.log(e.target);
// console.log(this.$refs.test_input.$el);
if (!this.$refs.test_input.$el.contains(e.target)) {
//
}
});
},
methods: {
changeVisible() {
if (this.buttonVisible == "el-icon-arrow-down")
Expand Down Expand Up @@ -194,11 +247,9 @@ export default {
this.uploadParams.Param.MasterID = "";
this.filelist = null;
this.dialogFormVisible = true;
this.$nextTick(()=>{
this.Clear = true; //表单重新初始化
})
this.$nextTick(() => {
this.Clear = true; //表单重新初始化
});
},
Delete(id) {
this.$confirm("确认删除?", "提示", {
Expand All @@ -213,15 +264,14 @@ export default {
},
Edit(id) {
this.dialogStatus = "update"
this.dialogStatus = "update";
this.temp_obj.id = id;
GetUsersDetail(id).then(response => {
this.temp_obj = response.data;
this.uploadParams.Param.MasterID = id;
this.dialogFormVisible = true;
this.Clear = false
this.Clear = false;
});
},
Expand Down Expand Up @@ -273,22 +323,35 @@ export default {
type: "warning"
});
});
},
removeItem(item) {
var index = this.searchArr.indexOf(item);
if (index) {
this.searchArr.splice(index, 1);
}
},
addItem() {
this.searchArr.push({
SearchKey: "",
SearchValue: "",
SearchType: ""
});
}
}
};
</script>

<style lang="scss" scoped>
.buttonVisible {
position: relative;
min-height: 50px;
height: auto;
.buttonVisible_select {
.searchContainer {
position: absolute;
top: 100px;
width:500px;
z-index:10;
right: 0;
top: 60px;
left: 20px;
padding: 10px;
min-height: 100px;
z-index: 10;
right: 20px;
background-color: rgba(0,0,0,.5);
}
}
</style>

0 comments on commit f918530

Please sign in to comment.