liunan #10

Merged
liunan merged 47 commits from liunan into master 2024-09-13 14:43:34 +08:00
9 changed files with 579 additions and 343 deletions
Showing only changes of commit 578004cdb7 - Show all commits

View File

@ -37,7 +37,7 @@
</agColorPicker> </agColorPicker>
<el-transfer :data="item.data" v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-transfer'" size="small"></el-transfer> <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/> <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/> <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-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"/> <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 agUpload from './../../agUpload/src/index.vue';
import agColorPicker from './../../agColorPicker/src/index.vue'; import agColorPicker from './../../agColorPicker/src/index.vue';
import agNumberRange from './../../agNumberRange/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 agQuery from './../../agQuery/src/index.vue';
import agMultionDatePicker from '../../agMultionDatePicker'; import agMultionDatePicker from '../../agMultionDatePicker';
@ -82,7 +82,7 @@ export default{
agUpload:agUpload, agUpload:agUpload,
agColorPicker, agColorPicker,
agNumberRange, agNumberRange,
agMultifunctionSearch, agMultionInput,
agQuery agQuery
}, },
props:{ props:{
@ -161,14 +161,20 @@ export default{
display: flex; display: flex;
align-items: stretch; align-items: stretch;
} }
.flexcenter{
display: flex;
align-items: stretch;
}
::v-deep{ ::v-deep{
.el-form--inline{ .el-form--inline{
.el-form-item{ .el-form-item{
display:flex; display:flex;
} }
.el-form-item__content{ .el-form-item__content{
display:flex;
flex:1; flex:1;
width:100%; width:100%;
margin-left:0;
} }
} }
.el-form-item{ .el-form-item{
@ -177,7 +183,9 @@ export default{
} }
.el-form-item__content{ .el-form-item__content{
flex:1; flex:1;
display:flex;
width:100%; width:100%;
margin-left:0!important;
} }
} }
</style> </style>

View File

@ -1,9 +0,0 @@
import agMultifunctionSearch from './src'
// 为组件提供 install 安装方法,供按需引入
agMultifunctionSearch.install = function (Vue) {
Vue.component(agMultifunctionSearch.name, agMultifunctionSearch)
}
// 导出组件
export default agMultifunctionSearch

View File

@ -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>

View File

@ -0,0 +1,9 @@
import agMultionInput from './src'
// 为组件提供 install 安装方法,供按需引入
agMultionInput.install = function (Vue) {
Vue.component(agMultionInput.name, agMultionInput)
}
// 导出组件
export default agMultionInput

View File

@ -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>

View File

@ -0,0 +1,9 @@
import agSearch from './src';
// 为组件提供 install 安装方法,供按需引入
agSearch.install = function (Vue) {
Vue.component(agSearch.name, agSearch);
}
// 导出组件
export default agSearch;

View File

@ -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>

View File

@ -12,11 +12,11 @@
import agRow from './agRow'; import agRow from './agRow';
import agCol from './agCol'; import agCol from './agCol';
import agMutionCheckbox from './agMutionCheckbox'; import agMutionCheckbox from './agMutionCheckbox';
import agMultifunctionSearch from './agMultifunctionSearch'; import agSearch from './agSearch';
import agDatePicker from "./agDatePicker"; import agDatePicker from "./agDatePicker";
import agNumberRange from "./agNumberRange"; import agNumberRange from "./agNumberRange";
import agMultionDatePicker from "./agMultionDatePicker"; import agMultionDatePicker from "./agMultionDatePicker";
import agMultionInput from "./agMultionInput";
// 注册组件 // 注册组件
@ -36,9 +36,10 @@ import agMultionDatePicker from "./agMultionDatePicker";
agRow, agRow,
agDatePicker, agDatePicker,
agMutionCheckbox, agMutionCheckbox,
agMultifunctionSearch, agSearch,
agNumberRange, agNumberRange,
agMultionDatePicker agMultionDatePicker,
agMultionInput
] ]
// 定义 install 方法,接收 Vue 作为参数(使用 use 注册插件,那么所有的组件都会被注册) // 定义 install 方法,接收 Vue 作为参数(使用 use 注册插件,那么所有的组件都会被注册)

View File

@ -28,7 +28,7 @@
</el-form-item> </el-form-item>
</el-form> </el-form>
<ag-multifunction-search <ag-multion-input
size="small" size="small"
ref="ttt" ref="ttt"
v-model="values" v-model="values"
@ -38,7 +38,7 @@
@change="onInputinput" @change="onInputinput"
@blur="onblur" @blur="onblur"
> >
</ag-multifunction-search> </ag-multion-input>
<ag-color-picker size="small" v-model="colorvalue"/> <ag-color-picker size="small" v-model="colorvalue"/>
<agQuery :inputs="inputs" @onSearch="onSearch"/> <agQuery :inputs="inputs" @onSearch="onSearch"/>
<agTable :columns="columns" :data="tabledata" :currentPage="2" :pageSize="100" :total="500" > <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"> <agUpload @onUpload="onUpload" isDrap dragmove multiple :limit="5" @onError="onError" :maxSize="1024*1024" :value="filelist">
<div slot="tip">只能上传jpg/png文件且不超过500kb</div> <div slot="tip">只能上传jpg/png文件且不超过500kb</div>
</agUpload> </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-form>
<ag-mution-checkbox :datas="checklist" @onSearch="onCheckSearch" v-model="checkvalue"> </ag-mution-checkbox> <ag-mution-checkbox :datas="checklist" @onSearch="onCheckSearch" v-model="checkvalue"> </ag-mution-checkbox>
<!-- <el-input agMultionCheckbox <!-- <el-input agMultionCheckbox
size="small" size="small"
placeholder="请输入内容" placeholder="请输入内容"
@ -75,6 +76,7 @@
:clearable="true" :clearable="true"
:range="true" :range="true"
:options="a_options" /> :options="a_options" />
<ag-search :data="searchdatas" v-model="searchvalue" @onRest="onRest" @onSearch="onSearch"/>
</div> </div>
</template> </template>
@ -373,40 +375,24 @@ export default {
], ],
filelist:['https://git.aiguoai.com/assets/img/logo.svg'], filelist:['https://git.aiguoai.com/assets/img/logo.svg'],
formdata:[ 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:"订单编号",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:12,type:"ag-input-number",enName:'imei',value:'43543',placeholder:'请输入IMEI/机器编号',size:'small',clearable:true,max:10,min:2,step:2,show:true}, {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-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-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:{ formvalue:{
order_sn:"11", order_sn:"11",
imei:'', imei:'',
@ -462,6 +448,9 @@ export default {
handleSizeChange() {}, handleSizeChange() {},
handleCurrentChange() {}, handleCurrentChange() {},
handleClose() {}, handleClose() {},
onRest(val){
console.log(val,"onRest")
}
}, },
}; };
</script> </script>