liunan #10

Merged
liunan merged 47 commits from liunan into master 2024-09-13 14:43:34 +08:00
6 changed files with 252 additions and 21 deletions
Showing only changes of commit 1390f95d96 - Show all commits

View File

@ -240,7 +240,7 @@ export default {
if(!newVal){
return
}
let defaultWidth = this.range ?this.showTime?"330px":"170px" : this.showTime?"190px":"140px";
let defaultWidth = this.range ?this.showTime?"330px":"200px" : this.showTime?"190px":"150px";
this.width = defaultWidth;
},
immediate: true,

View File

@ -12,7 +12,7 @@
<ag-input
v-if="!showExtra"
class="ag_input_group"
placeholder="请输入内容"
:placeholder="$attrs.placeholder||'请输入内容'"
:disabled="$attrs.disabled||imeipopover"
v-bind="$attrs"
v-on="listeners"
@ -35,7 +35,7 @@
<template slot="reference">
<ag-input
class="ag_input_group"
placeholder="请输入内容"
:placeholder="$attrs.placeholder||'请输入内容'"
:disabled="$attrs.disabled||imeipopover"
v-bind="$attrs"
v-on="listeners"

View File

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

View File

@ -0,0 +1,228 @@
<template>
<div class="ag-MultifunctionSearch">
<ag-select
v-bind="$attrs"
v-on="listeners"
:value="values&&values[0]"
@change="onSelect"
class="ag_select_group"
:style="{ width: `${swidth}px` }"
>
</ag-select>
<ag-date-picker
class="ag_input_group"
:placeholder="$attrs.placeholder||'请选择时间'"
:disabled="$attrs.disabled"
v-bind="$attrs"
v-on="listeners"
:value="value[1]"
@change="onInputChange"
>
</ag-date-picker>
</div>
</template>
<script>
import agSelect from "../../agSelect/src/index.vue";
import agDatePicker from "../../agDatePicker/src/index.vue";
export default {
name: "agMultionDattePicker",
components: {
agSelect,
agDatePicker,
},
props: {
value: {
default: () => {
return [null, []];
},
},
options: {
type: Array,
default: () => {
return [];
},
},
},
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.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.values[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

@ -15,6 +15,7 @@ import agMutionCheckbox from './agMutionCheckbox';
import agMultifunctionSearch from './agMultifunctionSearch';
import agDatePicker from "./agDatePicker";
import agNumberRange from "./agNumberRange";
import agMultionDattePicker from "./agMultionDattePicker";
// 注册组件
@ -36,8 +37,8 @@ import agNumberRange from "./agNumberRange";
agDatePicker,
agMutionCheckbox,
agMultifunctionSearch,
agNumberRange
agNumberRange,
agMultionDattePicker
]
// 定义 install 方法,接收 Vue 作为参数(使用 use 注册插件,那么所有的组件都会被注册)
@ -60,20 +61,5 @@ import agNumberRange from "./agNumberRange";
// 导出的对象必须具有 install才能被 Vue.use() 方法安装
install,
// 以下是具体的组件列表
agInput,
agSelect,
agUpload,
agForm,
agColorPicker,
agQuery,
agTable,
agDialog,
agTabs,
agPagination,
agCol,
agRow,
agMutionCheckbox,
agMultifunctionSearch,
agDatePicker,
agNumberRange
...components
}

View File

@ -68,6 +68,13 @@
</el-select>
<el-button slot="append" icon="el-icon-search"></el-button>
</el-input> -->
<ag-multion-datte-picker size="small"
ref="ttt"
v-model="datevalues"
:showExtra="true"
:clearable="true"
:range="true"
:options="a_options" />
</div>
</template>
@ -138,6 +145,7 @@ export default {
checkvalue:[],
value: "选项1",
a_value: "59584",
datevalues:["4",["2022-12-12","2022-12-13 "]],
values: ["4",""],
options: [
{