liunan #10
|
|
@ -37,7 +37,7 @@
|
|||
</agColorPicker>
|
||||
<el-transfer :data="item.data" v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-transfer'" size="small"></el-transfer>
|
||||
<agNumberRange v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-numberRange'" size="small" clearable/>
|
||||
<agMultifunctionSearch v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-multifunction-search'" size="small" clearable/>
|
||||
<ag-multion-input v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-multion-input'" size="small" clearable/>
|
||||
<agQuery v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-query'" size="small" clearable/>
|
||||
<ag-mution-checkbox :datas="item.datas" v-bind="item" :placeholder="item.placeholder" v-model="formValue[item.enName]" v-if="item.type=='ag-mution-checkbox'" size="small"> </ag-mution-checkbox>
|
||||
<ag-multion-date-picker v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-multion-datte-picker'" size="small"/>
|
||||
|
|
@ -65,7 +65,7 @@ import agCol from './../../agCol/src/index.vue';
|
|||
import agUpload from './../../agUpload/src/index.vue';
|
||||
import agColorPicker from './../../agColorPicker/src/index.vue';
|
||||
import agNumberRange from './../../agNumberRange/src/index.vue';
|
||||
import agMultifunctionSearch from './../../agMultifunctionSearch/src/index.vue';
|
||||
import agMultionInput from './../../agMultionInput/src/index.vue';
|
||||
import agQuery from './../../agQuery/src/index.vue';
|
||||
import agMultionDatePicker from '../../agMultionDatePicker';
|
||||
|
||||
|
|
@ -82,7 +82,7 @@ export default{
|
|||
agUpload:agUpload,
|
||||
agColorPicker,
|
||||
agNumberRange,
|
||||
agMultifunctionSearch,
|
||||
agMultionInput,
|
||||
agQuery
|
||||
},
|
||||
props:{
|
||||
|
|
@ -161,14 +161,20 @@ export default{
|
|||
display: flex;
|
||||
align-items: stretch;
|
||||
}
|
||||
.flexcenter{
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
}
|
||||
::v-deep{
|
||||
.el-form--inline{
|
||||
.el-form-item{
|
||||
display:flex;
|
||||
}
|
||||
.el-form-item__content{
|
||||
display:flex;
|
||||
flex:1;
|
||||
width:100%;
|
||||
margin-left:0;
|
||||
}
|
||||
}
|
||||
.el-form-item{
|
||||
|
|
@ -177,7 +183,9 @@ export default{
|
|||
}
|
||||
.el-form-item__content{
|
||||
flex:1;
|
||||
display:flex;
|
||||
width:100%;
|
||||
margin-left:0!important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,9 +0,0 @@
|
|||
import agMultifunctionSearch from './src'
|
||||
|
||||
// 为组件提供 install 安装方法，供按需引入
|
||||
agMultifunctionSearch.install = function (Vue) {
|
||||
Vue.component(agMultifunctionSearch.name, agMultifunctionSearch)
|
||||
}
|
||||
|
||||
// 导出组件
|
||||
export default agMultifunctionSearch
|
||||
|
|
@ -1,293 +0,0 @@
|
|||
<template>
|
||||
<div class="ag-MultifunctionSearch">
|
||||
<ag-select
|
||||
v-bind="$attrs"
|
||||
v-on="listeners"
|
||||
:options="$attrs.options||[]"
|
||||
:value="value&&value[0]"
|
||||
@change="onSelect"
|
||||
class="ag_select_group"
|
||||
:style="{ width: `${swidth}px` }"
|
||||
>
|
||||
</ag-select>
|
||||
<ag-input
|
||||
v-if="!showExtra"
|
||||
class="ag_input_group"
|
||||
:placeholder="$attrs.placeholder||'请输入内容'"
|
||||
:disabled="$attrs.disabled||imeipopover"
|
||||
v-bind="$attrs"
|
||||
v-on="listeners"
|
||||
:value="value[1]"
|
||||
@input="onInputChange"
|
||||
|
||||
>
|
||||
<template slot="prefix" >
|
||||
|
||||
</template>
|
||||
</ag-input>
|
||||
<el-popover
|
||||
v-if="showExtra"
|
||||
placement="bottom"
|
||||
trigger="manual"
|
||||
ref="popover"
|
||||
popper-class="popperOptions"
|
||||
v-model="imeipopover"
|
||||
>
|
||||
<template slot="reference">
|
||||
<ag-input
|
||||
class="ag_input_group"
|
||||
:placeholder="$attrs.placeholder||'请输入内容'"
|
||||
:disabled="$attrs.disabled||imeipopover"
|
||||
v-bind="$attrs"
|
||||
v-on="listeners"
|
||||
:value="value&&value[1]"
|
||||
@input="onInputChange"
|
||||
>
|
||||
<template slot="suffix" v-if="showExtra">
|
||||
<i
|
||||
class="iconfont icon-icon-piliangcaozuo imeiicondefault"
|
||||
:class="imeipopover && 'imeiiconActive'"
|
||||
style="font-size: 12px;"
|
||||
@click.prevent="imeiiconClick"
|
||||
></i>
|
||||
</template>
|
||||
</ag-input>
|
||||
</template>
|
||||
<el-input
|
||||
type="textarea"
|
||||
:rows="12"
|
||||
:value="value&&value[1]"
|
||||
placeholder="一行一项，最多支持200行"
|
||||
resize="none"
|
||||
border="none"
|
||||
class="textareainput"
|
||||
@input="onInputChange"
|
||||
/>
|
||||
<divider class="divider"></divider>
|
||||
<div class="btnbox">
|
||||
<div>
|
||||
<el-button size="mini" @click="imeiclose"
|
||||
>关闭</el-button
|
||||
>
|
||||
</div>
|
||||
<div>
|
||||
<el-button size="mini" @click="cleartext"
|
||||
>清空</el-button
|
||||
>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="primary"
|
||||
plain
|
||||
@click="search"
|
||||
>查询</el-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</el-popover>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import agSelect from "../../agSelect/src/index.vue";
|
||||
import agInput from "../../agInput/src/index.vue";
|
||||
import {Divider} from "element-ui";
|
||||
|
||||
export default {
|
||||
name: "agMultifunctionSearch",
|
||||
components: {
|
||||
agSelect,
|
||||
agInput,
|
||||
Divider
|
||||
},
|
||||
props: {
|
||||
value: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return [null, ''];
|
||||
},
|
||||
},
|
||||
showExtra: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
values: [null, ""],
|
||||
swidth:90,
|
||||
inputValue:"",
|
||||
selectvalue:"",
|
||||
imeipopover:false,
|
||||
listeners:{}
|
||||
};
|
||||
},
|
||||
model: {
|
||||
prop: 'value', // 明确指定 prop 为 'value'
|
||||
event: 'change' // 自定义事件名，用于更新 value
|
||||
},
|
||||
watch: {
|
||||
value: {
|
||||
handler(newVal) {
|
||||
if (!Array.isArray(newVal)) {
|
||||
throw new Error("请传入数组");
|
||||
}
|
||||
let newselectValue=newVal[0];
|
||||
const find=this.$attrs.options&&this.$attrs.options.find((f)=>f.value==newselectValue);
|
||||
if(find){
|
||||
let fontwidth=this.getStringWidth(find.label);
|
||||
this.swidth=fontwidth>165?165:fontwidth;
|
||||
}
|
||||
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
mounted(){
|
||||
let newlist=Object.assign({},this.$listeners);
|
||||
delete newlist.change;
|
||||
delete newlist.input;
|
||||
this.listeners=newlist;
|
||||
},
|
||||
methods: {
|
||||
onSelect(value){
|
||||
if(this.$listeners.change){
|
||||
this.$emit("change", [value, this.value[1]||""]);
|
||||
}
|
||||
|
||||
},
|
||||
onInputChange(val){
|
||||
if(this.$listeners.change){
|
||||
this.$emit("change", [this.value[0] ||"",val]);
|
||||
}
|
||||
},
|
||||
getStringWidth(text) {
|
||||
let font = "13px";
|
||||
// 创建一个隐藏的元素
|
||||
let element = document.createElement('span');
|
||||
element.style.visibility = 'hidden';
|
||||
element.style.whiteSpace = 'nowrap';
|
||||
element.style.font = font; // 设置字体样式
|
||||
element.textContent = text;
|
||||
// 将元素添加到文档中
|
||||
document.body.appendChild(element);
|
||||
// 获取元素的宽度
|
||||
let width = element.offsetWidth;
|
||||
// 移除元素
|
||||
document.body.removeChild(element);
|
||||
return width+50;
|
||||
},
|
||||
imeiiconClick(){
|
||||
this.imeipopover=!this.imeipopover;
|
||||
},
|
||||
|
||||
imeiclose(){
|
||||
this.imeipopover=false;
|
||||
},
|
||||
cleartext(){
|
||||
this.value[1]="";
|
||||
this.$set(this.value,1,"");
|
||||
},
|
||||
search(){
|
||||
this.imeipopover=false;
|
||||
if(this.$listeners.onSrarch){
|
||||
this.$emit("onSrarch", this.value);
|
||||
}
|
||||
|
||||
},
|
||||
getAfterAgo(attr, prefix) {
|
||||
const config = {};
|
||||
for (const key in attr) {
|
||||
if (attr.hasOwnProperty(key) && key.startsWith(prefix)) {
|
||||
const newKey = key.substring(prefix.length);
|
||||
config[newKey] = attr[key];
|
||||
}
|
||||
}
|
||||
return config;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.popperOptions {
|
||||
min-width: 200px !important;
|
||||
padding: 0px !important;
|
||||
}
|
||||
|
||||
</style>
|
||||
<style scoped lang='scss'>
|
||||
.ag-MultifunctionSearch {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.imeiicondefault {
|
||||
padding: 5px;
|
||||
border-radius: 4px;
|
||||
background: #f0f2f5;
|
||||
cursor: pointer;
|
||||
}
|
||||
.imeiiconActive {
|
||||
cursor: pointer;
|
||||
color: #409eff;
|
||||
background: #e9f1fc;
|
||||
}
|
||||
.divider {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.btnbox {
|
||||
padding: 5px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
::v-deep{
|
||||
|
||||
.ag_select_group{
|
||||
.el-input__inner{
|
||||
border:1px solid #e5e5e5;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
outline:none;
|
||||
&:focus{
|
||||
border-color:#e5e5e5;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ag_input_group{
|
||||
.el-input__inner{
|
||||
border:1px solid #e5e5e5;
|
||||
border-bottom-left-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
border-left:none;
|
||||
outline:none;
|
||||
&:focus{
|
||||
border-color:#e5e5e5;
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-select{
|
||||
.el-input{
|
||||
&.is-focus{
|
||||
.el-input__inner{
|
||||
border-color:#e5e5e5;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover{
|
||||
.el-input__inner{
|
||||
border-color:#e5e5e5;
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-textarea__inner{
|
||||
border:none;
|
||||
}
|
||||
.el-input__suffix-inner{
|
||||
height:100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
import agMultionInput from './src'
|
||||
|
||||
// 为组件提供 install 安装方法，供按需引入
|
||||
agMultionInput.install = function (Vue) {
|
||||
Vue.component(agMultionInput.name, agMultionInput)
|
||||
}
|
||||
|
||||
// 导出组件
|
||||
export default agMultionInput
|
||||
|
|
@ -0,0 +1,293 @@
|
|||
<template>
|
||||
<div class="ag-MultifunctionSearch">
|
||||
<ag-select
|
||||
v-bind="$attrs"
|
||||
v-on="listeners"
|
||||
:options="$attrs.options||[]"
|
||||
:value="value&&value[0]"
|
||||
@change="onSelect"
|
||||
class="ag_select_group"
|
||||
:style="{ width: `${swidth}px` }"
|
||||
>
|
||||
</ag-select>
|
||||
<ag-input
|
||||
v-if="!showExtra"
|
||||
class="ag_input_group"
|
||||
:placeholder="$attrs.placeholder||'请输入内容'"
|
||||
:disabled="$attrs.disabled||imeipopover"
|
||||
v-bind="$attrs"
|
||||
v-on="listeners"
|
||||
:value="value[1]"
|
||||
@input="onInputChange"
|
||||
|
||||
>
|
||||
<template slot="prefix" >
|
||||
|
||||
</template>
|
||||
</ag-input>
|
||||
<el-popover
|
||||
v-if="showExtra"
|
||||
placement="bottom"
|
||||
trigger="manual"
|
||||
ref="popover"
|
||||
popper-class="popperOptions"
|
||||
v-model="imeipopover"
|
||||
>
|
||||
<template slot="reference">
|
||||
<ag-input
|
||||
class="ag_input_group"
|
||||
:placeholder="$attrs.placeholder||'请输入内容'"
|
||||
:disabled="$attrs.disabled||imeipopover"
|
||||
v-bind="$attrs"
|
||||
v-on="listeners"
|
||||
:value="value&&value[1]"
|
||||
@input="onInputChange"
|
||||
>
|
||||
<template slot="suffix" v-if="showExtra">
|
||||
<i
|
||||
class="iconfont icon-icon-piliangcaozuo imeiicondefault"
|
||||
:class="imeipopover && 'imeiiconActive'"
|
||||
style="font-size: 12px;"
|
||||
@click.prevent="imeiiconClick"
|
||||
></i>
|
||||
</template>
|
||||
</ag-input>
|
||||
</template>
|
||||
<el-input
|
||||
type="textarea"
|
||||
:rows="12"
|
||||
:value="value&&value[1]"
|
||||
placeholder="一行一项，最多支持200行"
|
||||
resize="none"
|
||||
border="none"
|
||||
class="textareainput"
|
||||
@input="onInputChange"
|
||||
/>
|
||||
<divider class="divider"></divider>
|
||||
<div class="btnbox">
|
||||
<div>
|
||||
<el-button size="mini" @click="imeiclose"
|
||||
>关闭</el-button
|
||||
>
|
||||
</div>
|
||||
<div>
|
||||
<el-button size="mini" @click="cleartext"
|
||||
>清空</el-button
|
||||
>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="primary"
|
||||
plain
|
||||
@click="search"
|
||||
>查询</el-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</el-popover>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import agSelect from "../../agSelect/src/index.vue";
|
||||
import agInput from "../../agInput/src/index.vue";
|
||||
import {Divider} from "element-ui";
|
||||
|
||||
export default {
|
||||
name: "agMultionInput",
|
||||
components: {
|
||||
agSelect,
|
||||
agInput,
|
||||
Divider
|
||||
},
|
||||
props: {
|
||||
value: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return [null, ''];
|
||||
},
|
||||
},
|
||||
showExtra: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
values: [null, ""],
|
||||
swidth:120,
|
||||
inputValue:"",
|
||||
selectvalue:"",
|
||||
imeipopover:false,
|
||||
listeners:{}
|
||||
};
|
||||
},
|
||||
model: {
|
||||
prop: 'value', // 明确指定 prop 为 'value'
|
||||
event: 'change' // 自定义事件名，用于更新 value
|
||||
},
|
||||
watch: {
|
||||
value: {
|
||||
handler(newVal) {
|
||||
if (!Array.isArray(newVal)) {
|
||||
throw new Error("请传入数组");
|
||||
}
|
||||
let newselectValue=newVal[0];
|
||||
const find=this.$attrs.options&&this.$attrs.options.find((f)=>f.value==newselectValue);
|
||||
if(find){
|
||||
let fontwidth=this.getStringWidth(find.label);
|
||||
this.swidth=fontwidth>165?165:fontwidth;
|
||||
}
|
||||
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
mounted(){
|
||||
let newlist=Object.assign({},this.$listeners);
|
||||
delete newlist.change;
|
||||
delete newlist.input;
|
||||
this.listeners=newlist;
|
||||
},
|
||||
methods: {
|
||||
onSelect(value){
|
||||
if(this.$listeners.change){
|
||||
this.$emit("change", [value, this.value[1]||""]);
|
||||
}
|
||||
|
||||
},
|
||||
onInputChange(val){
|
||||
if(this.$listeners.change){
|
||||
this.$emit("change", [this.value[0] ||"",val]);
|
||||
}
|
||||
},
|
||||
getStringWidth(text) {
|
||||
let font = "13px";
|
||||
// 创建一个隐藏的元素
|
||||
let element = document.createElement('span');
|
||||
element.style.visibility = 'hidden';
|
||||
element.style.whiteSpace = 'nowrap';
|
||||
element.style.font = font; // 设置字体样式
|
||||
element.textContent = text;
|
||||
// 将元素添加到文档中
|
||||
document.body.appendChild(element);
|
||||
// 获取元素的宽度
|
||||
let width = element.offsetWidth;
|
||||
// 移除元素
|
||||
document.body.removeChild(element);
|
||||
return width+50;
|
||||
},
|
||||
imeiiconClick(){
|
||||
this.imeipopover=!this.imeipopover;
|
||||
},
|
||||
|
||||
imeiclose(){
|
||||
this.imeipopover=false;
|
||||
},
|
||||
cleartext(){
|
||||
this.value[1]="";
|
||||
this.$set(this.value,1,"");
|
||||
},
|
||||
search(){
|
||||
this.imeipopover=false;
|
||||
if(this.$listeners.onSrarch){
|
||||
this.$emit("onSrarch", this.value);
|
||||
}
|
||||
|
||||
},
|
||||
getAfterAgo(attr, prefix) {
|
||||
const config = {};
|
||||
for (const key in attr) {
|
||||
if (attr.hasOwnProperty(key) && key.startsWith(prefix)) {
|
||||
const newKey = key.substring(prefix.length);
|
||||
config[newKey] = attr[key];
|
||||
}
|
||||
}
|
||||
return config;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.popperOptions {
|
||||
min-width: 200px !important;
|
||||
padding: 0px !important;
|
||||
}
|
||||
|
||||
</style>
|
||||
<style scoped lang='scss'>
|
||||
.ag-MultifunctionSearch {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.imeiicondefault {
|
||||
padding: 5px;
|
||||
border-radius: 4px;
|
||||
background: #f0f2f5;
|
||||
cursor: pointer;
|
||||
}
|
||||
.imeiiconActive {
|
||||
cursor: pointer;
|
||||
color: #409eff;
|
||||
background: #e9f1fc;
|
||||
}
|
||||
.divider {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.btnbox {
|
||||
padding: 5px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
::v-deep{
|
||||
|
||||
.ag_select_group{
|
||||
.el-input__inner{
|
||||
border:1px solid #e5e5e5;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
outline:none;
|
||||
&:focus{
|
||||
border-color:#e5e5e5;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ag_input_group{
|
||||
.el-input__inner{
|
||||
border:1px solid #e5e5e5;
|
||||
border-bottom-left-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
border-left:none;
|
||||
outline:none;
|
||||
&:focus{
|
||||
border-color:#e5e5e5;
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-select{
|
||||
.el-input{
|
||||
&.is-focus{
|
||||
.el-input__inner{
|
||||
border-color:#e5e5e5;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover{
|
||||
.el-input__inner{
|
||||
border-color:#e5e5e5;
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-textarea__inner{
|
||||
border:none;
|
||||
}
|
||||
.el-input__suffix-inner{
|
||||
height:100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
import agSearch from './src';
|
||||
|
||||
// 为组件提供 install 安装方法，供按需引入
|
||||
agSearch.install = function (Vue) {
|
||||
Vue.component(agSearch.name, agSearch);
|
||||
}
|
||||
|
||||
// 导出组件
|
||||
export default agSearch;
|
||||
|
|
@ -0,0 +1,229 @@
|
|||
<template>
|
||||
<el-form v-bind="$attrs" v-on="$listeners" :model="formValue" ref="formref">
|
||||
<ag-row class="searchbox">
|
||||
<ag-col v-for="item,index in data" :key="index" :span="item.span||24">
|
||||
<el-form-item :prop="item.enName" >
|
||||
<slot :name="item.soltName" v-if="item.soltName" :row="item"/>
|
||||
<div class="contentbox" v-else>
|
||||
<ag-input v-model="formValue[item.enName]" type="textarea" v-bind="item" v-if="item.type=='ag-textarea'" size="small" clearable></ag-input>
|
||||
<ag-input v-model="formValue[item.enName]" v-bind="item" v-if="item.type=='ag-input'" size="small" clearable></ag-input>
|
||||
<ag-date-picker v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-date-picker'" size="small" clearable/>
|
||||
<ag-select v-model="formValue[item.enName]" v-bind="item" v-if="item.type=='ag-select'" size="small" clearable/>
|
||||
<el-radio-group v-model="formValue[item.enName]" v-bind="item" v-if="item.type=='ag-radio'&&formValue[item.enName]" size="small" clearable>
|
||||
<el-radio :label="it.value" v-for="it,index in item.options" :key="index">{{it.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
<el-checkbox-group v-bind="item" v-if="item.type=='ag-checkbox'&&formValue[item.enName]" v-model="formValue[item.enName]" size="small" clearable>
|
||||
<el-checkbox v-for="it,index in item.options" :label="it.value" :key="index">{{it.label}}</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
<el-input-number v-model="formValue[item.enName]" v-bind="item" v-if="item.type=='ag-input-number'" clearable></el-input-number>
|
||||
<el-cascader v-model="formValue[item.enName]" v-bind="item" size="small" v-if="item.type=='ag-cascader'" clearable :style="{width:'100%'}"></el-cascader>
|
||||
<el-switch
|
||||
v-model="formValue[item.enName]"
|
||||
v-bind="item" size="small" v-if="item.type=='ag-switch'&&formValue[item.enName]" >
|
||||
</el-switch>
|
||||
<el-slider v-model="formValue[item.enName]"
|
||||
v-bind="item" size="small" v-if="item.type=='ag-slider'"></el-slider>
|
||||
<el-time-select
|
||||
:style="{width:'100%'}"
|
||||
clearable
|
||||
v-model="formValue[item.enName]"
|
||||
v-bind="item" size="small"
|
||||
v-if="item.type=='ag-time-select'"
|
||||
:picker-options="item.options">
|
||||
</el-time-select>
|
||||
<ag-upload v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-upload'" clear isPre></ag-upload>
|
||||
<el-rate v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-rate'" size="small"></el-rate>
|
||||
<agColorPicker v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-color-picker'" size="small">
|
||||
</agColorPicker>
|
||||
<el-transfer :data="item.data" v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-transfer'" size="small"></el-transfer>
|
||||
<agNumberRange v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-numberRange'" size="small" clearable/>
|
||||
<ag-multion-input v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-multion-input'" size="small" clearable/>
|
||||
<agQuery v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-query'" size="small" clearable/>
|
||||
<ag-mution-checkbox :datas="item.datas" v-bind="item" :placeholder="item.placeholder" v-model="formValue[item.enName]" v-if="item.type=='ag-mution-checkbox'" size="small"> </ag-mution-checkbox>
|
||||
<ag-multion-date-picker v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-multion-datte-picker'" size="small"/>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</ag-col>
|
||||
<ag-col :span="4">
|
||||
<el-button @click="onSubmit" type="primary" size="small" class="submitbtn">
|
||||
{{submittitle||'查询'}}
|
||||
</el-button>
|
||||
<el-button @click="onRest" size="small" class="submitbtn">
|
||||
重置
|
||||
</el-button>
|
||||
</ag-col>
|
||||
</ag-row>
|
||||
</el-form>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
|
||||
import agInput from './../../agInput/src/index.vue';
|
||||
import agDatePicker from './../../agDatePicker/src/index.vue';
|
||||
import agSelect from './../../agSelect/src/index.vue';
|
||||
import agRow from './../../agRow/src/index.vue';
|
||||
import agCol from './../../agCol/src/index.vue';
|
||||
import agUpload from './../../agUpload/src/index.vue';
|
||||
import agColorPicker from './../../agColorPicker/src/index.vue';
|
||||
import agNumberRange from './../../agNumberRange/src/index.vue';
|
||||
import agMultionInput from './../../agMultionInput/src/index.vue';
|
||||
import agQuery from './../../agQuery/src/index.vue';
|
||||
import agMultionDatePicker from '../../agMultionDatePicker';
|
||||
|
||||
|
||||
export default{
|
||||
name:"agSearch",
|
||||
components:{
|
||||
agMultionDatePicker,
|
||||
agInput:agInput,
|
||||
agDatePicker,
|
||||
agSelect,
|
||||
agRow,
|
||||
agCol,
|
||||
agUpload:agUpload,
|
||||
agColorPicker,
|
||||
agNumberRange,
|
||||
agMultionInput,
|
||||
agQuery
|
||||
},
|
||||
props:{
|
||||
submittitle:{
|
||||
type:String,
|
||||
default:'查询'
|
||||
},
|
||||
data:{
|
||||
type:Array,
|
||||
default(){
|
||||
return []
|
||||
}
|
||||
},
|
||||
span:{
|
||||
type:Number,
|
||||
default:24
|
||||
},
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
formValue:{
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
model:{
|
||||
prop:'value',
|
||||
event:{
|
||||
'onSubmit':'submit',
|
||||
'onRest':'rest'
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
this.formValue=this.$attrs.value;
|
||||
setTimeout(()=>{
|
||||
this.$refs.formref.clearValidate();
|
||||
},1);
|
||||
if(this.$refs.formref){
|
||||
for(const key in this.$refs.formref){
|
||||
if(!this[key]&&key!='value'){
|
||||
this[key]=this.$refs.formref[key];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
watch:{
|
||||
value(val){
|
||||
this.formValue = val;
|
||||
setTimeout(()=>{
|
||||
this.$refs.formref.clearValidate();
|
||||
},1);
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
onSubmit(){
|
||||
if(this.$listeners.onSearch){
|
||||
this.$emit('onSearch',this.formValue);
|
||||
}
|
||||
},
|
||||
onRest(){
|
||||
Object.keys(this.formValue).map((key,index)=>{
|
||||
let itemvalue=Object.values(this.formValue)[index];
|
||||
if(typeof(itemvalue)=="string"||typeof(itemvalue)=="number"){
|
||||
this.formValue[key]=null;
|
||||
}else{
|
||||
this.formValue[key]=[];
|
||||
}
|
||||
});
|
||||
setTimeout(()=>{
|
||||
this.$refs.formref.clearValidate();
|
||||
},1);
|
||||
if(this.$listeners.onRest){
|
||||
this.$emit('onRest',this.formValue);
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.searchbox{
|
||||
align-items: center;
|
||||
}
|
||||
.footerbox{
|
||||
margin-top:12px;
|
||||
display:flex;
|
||||
justify-content:center;
|
||||
.submitbtn{
|
||||
width:200px;
|
||||
}
|
||||
}
|
||||
.el-form--inline{
|
||||
.el-form-item{
|
||||
display:flex;
|
||||
}
|
||||
.el-form-item__content{
|
||||
flex:1;
|
||||
width:100%;
|
||||
}
|
||||
}
|
||||
.contentbox{
|
||||
width:100%;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
}
|
||||
.flexcenter{
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
}
|
||||
::v-deep{
|
||||
.el-form--inline{
|
||||
.el-form-item{
|
||||
display:flex;
|
||||
align-items: center;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
.el-form-item__content{
|
||||
display:flex;
|
||||
flex:1;
|
||||
width:100%;
|
||||
margin-left:0;
|
||||
align-items: center;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
}
|
||||
.el-form-item{
|
||||
width:100%;
|
||||
margin-bottom: 0px;
|
||||
line-height:1;
|
||||
}
|
||||
.el-form-item__content{
|
||||
flex:1;
|
||||
display:flex;
|
||||
width:100%;
|
||||
align-items: center;
|
||||
margin-left:0!important;
|
||||
margin-bottom: 0px;
|
||||
line-height:1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -12,11 +12,11 @@
|
|||
import agRow from './agRow';
|
||||
import agCol from './agCol';
|
||||
import agMutionCheckbox from './agMutionCheckbox';
|
||||
import agMultifunctionSearch from './agMultifunctionSearch';
|
||||
import agSearch from './agSearch';
|
||||
import agDatePicker from "./agDatePicker";
|
||||
import agNumberRange from "./agNumberRange";
|
||||
import agMultionDatePicker from "./agMultionDatePicker";
|
||||
|
||||
import agMultionInput from "./agMultionInput";
|
||||
|
||||
// 注册组件
|
||||
|
||||
|
|
@ -36,9 +36,10 @@ import agMultionDatePicker from "./agMultionDatePicker";
|
|||
agRow,
|
||||
agDatePicker,
|
||||
agMutionCheckbox,
|
||||
agMultifunctionSearch,
|
||||
agSearch,
|
||||
agNumberRange,
|
||||
agMultionDatePicker
|
||||
agMultionDatePicker,
|
||||
agMultionInput
|
||||
]
|
||||
|
||||
// 定义 install 方法，接收 Vue 作为参数（使用 use 注册插件，那么所有的组件都会被注册）
|
||||
|
|
|
|||
57
src/App.vue
57
src/App.vue
|
|
@ -28,7 +28,7 @@
|
|||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<ag-multifunction-search
|
||||
<ag-multion-input
|
||||
size="small"
|
||||
ref="ttt"
|
||||
v-model="values"
|
||||
|
|
@ -38,7 +38,7 @@
|
|||
@change="onInputinput"
|
||||
@blur="onblur"
|
||||
>
|
||||
</ag-multifunction-search>
|
||||
</ag-multion-input>
|
||||
<ag-color-picker size="small" v-model="colorvalue"/>
|
||||
<agQuery :inputs="inputs" @onSearch="onSearch"/>
|
||||
<agTable :columns="columns" :data="tabledata" :currentPage="2" :pageSize="100" :total="500" >
|
||||
|
|
@ -52,9 +52,10 @@
|
|||
<agUpload @onUpload="onUpload" isDrap dragmove multiple :limit="5" @onError="onError" :maxSize="1024*1024" :value="filelist">
|
||||
<div slot="tip">只能上传jpg/png文件，且不超过500kb</div>
|
||||
</agUpload>
|
||||
<ag-form :data="formdata" label-width="120px" label-position="right" v-model="formvalue">
|
||||
<ag-form :data="formdata" label-width="120px" label-position="left" v-model="formvalue">
|
||||
</ag-form>
|
||||
<ag-mution-checkbox :datas="checklist" @onSearch="onCheckSearch" v-model="checkvalue"> </ag-mution-checkbox>
|
||||
|
||||
<!-- <el-input agMultionCheckbox
|
||||
size="small"
|
||||
placeholder="请输入内容"
|
||||
|
|
@ -75,6 +76,7 @@
|
|||
:clearable="true"
|
||||
:range="true"
|
||||
:options="a_options" />
|
||||
<ag-search :data="searchdatas" v-model="searchvalue" @onRest="onRest" @onSearch="onSearch"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -373,40 +375,24 @@ export default {
|
|||
],
|
||||
filelist:['https://git.aiguoai.com/assets/img/logo.svg'],
|
||||
formdata:[
|
||||
{label:"订单编号",span:12,type:"ag-input",enName:'order_sn',value:'656',placeholder:'请输入洗碗机',size:'small',clearable:true,show:true,value:false,required:true,options:[{label:"是",value:'1'},{label:"否",value:'2'}]},
|
||||
{label:"IMEI/机器编号",span:12,type:"ag-input-number",enName:'imei',value:'43543',placeholder:'请输入IMEI/机器编号',size:'small',clearable:true,max:10,min:2,step:2,show:true},
|
||||
{label:"订单编号",span:10,type:"ag-input",enName:'order_sn',placeholder:'请输入洗碗机',size:'small',clearable:true,show:true,value:false,required:true,options:[{label:"是",value:'1'},{label:"否",value:'2'}]},
|
||||
{label:"IMEI/机器编号",span:10,type:"ag-input-number",enName:'imei',labelWidth:'120px',placeholder:'请输入IMEI/机器编号',size:'small',clearable:true,max:10,min:2,step:2,show:true},
|
||||
{label:"质检码",span:12,type:"ag-rate",value:'',enName:'ser_sn',placeholder:'请输入质检码',size:'small',clearable:true,show:true,options:[{value:'1',label:'112'},{value:'2',label:'2223'}]},
|
||||
{label:"质检时间",span:12,type:"ag-multifunction-search",enName:'time',showAlpha:true,size:'small',colorFormat:'hsv',show:true},
|
||||
{label:"头像",span:12,type:"ag-mution-checkbox",enName:'avatar',datas:[
|
||||
{
|
||||
label:"分类",
|
||||
value:"class",
|
||||
},
|
||||
{
|
||||
label:"品牌",
|
||||
value:"brand",
|
||||
placeholder:"请输入品牌"
|
||||
},
|
||||
{
|
||||
label:"型号",
|
||||
elem:'el-select',
|
||||
value:"model",
|
||||
options: []
|
||||
},
|
||||
{
|
||||
label:"颜色",
|
||||
elem:'el-select',
|
||||
value:"color",
|
||||
options:[]
|
||||
},
|
||||
{
|
||||
label:"容量",
|
||||
elem:'el-select',
|
||||
value:"capacity",
|
||||
options:[]
|
||||
}
|
||||
],placeholder:'请输入质检码',size:'small',clearable:true,show:true,limit:4,multiple:true},
|
||||
|
||||
],
|
||||
searchdatas:[
|
||||
{label:"IMEI",span:4,type:"ag-input",enName:'order_sn',placeholder:'请输入洗碗机',size:'small',clearable:true,show:true,value:false,required:true,options:[{label:"是",value:'1'},{label:"否",value:'2'}]},
|
||||
{label:"订单编号",span:4,type:"ag-input-number",enName:'imei',labelWidth:'120px',placeholder:'请输入IMEI/机器编号',size:'small',clearable:true,max:10,min:2,step:2,show:true},
|
||||
{label:"质检码",span:4,type:"ag-rate",value:'',enName:'ser_sn',placeholder:'请输入质检码',size:'small',clearable:true,show:true,},
|
||||
{label:"质检时间",span:6,type:"ag-multion-input",enName:'time',showAlpha:true,size:'small',colorFormat:'hsv',options:[{value:'1',label:'112'},{value:'2',label:'2223'}],show:true},
|
||||
],
|
||||
searchvalue:{
|
||||
order_sn:"11",
|
||||
imei:'',
|
||||
ser_sn:2,
|
||||
timer:['1','2']
|
||||
},
|
||||
formvalue:{
|
||||
order_sn:"11",
|
||||
imei:'',
|
||||
|
|
@ -462,6 +448,9 @@ export default {
|
|||
handleSizeChange() {},
|
||||
handleCurrentChange() {},
|
||||
handleClose() {},
|
||||
onRest(val){
|
||||
console.log(val,"onRest")
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue