qiaopengfei #8

Merged
qiaopengfei merged 2 commits from qiaopengfei into master 2024-07-15 10:32:54 +08:00
9 changed files with 463 additions and 212 deletions
Showing only changes of commit e5e98d54ab - Show all commits

View File

@ -3,7 +3,7 @@ import App from '../src/App.vue'
//基于element组件封装引入element组件库 //基于element组件封装引入element组件库
import { Input, Select, Option, OptionGroup, DatePicker, Tabs, TabPane, Pagination, Dialog, Button } from 'element-ui'; import { Input, Select, Option, OptionGroup, DatePicker, Tabs, TabPane, Pagination, Dialog, Button, Form, FormItem, Popover } from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css'; import 'element-ui/lib/theme-chalk/index.css';
import '../src/styles/element-variables.scss'//element 组件样式文件 import '../src/styles/element-variables.scss'//element 组件样式文件
@ -17,6 +17,9 @@ Vue.use(TabPane);
Vue.use(Pagination) Vue.use(Pagination)
Vue.use(Dialog) Vue.use(Dialog)
Vue.use(Button) Vue.use(Button)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Popover)
// 导入组件库 // 导入组件库
import erp_element_ui from '../packages' import erp_element_ui from '../packages'

View File

@ -1,18 +0,0 @@
<template>
<div>
<h1>主组件</h1>
</div>
</template>
<script>
export default {
components: {},
data() {
return {};
},
methods: {},
};
</script>
<style scoped lang='scss'>
</style>

View File

@ -5,7 +5,7 @@
clear-icon="ag-icon-clear" clear-icon="ag-icon-clear"
v-model="dateArr" v-model="dateArr"
v-bind="attrs" v-bind="attrs"
v-on="inputListeners" v-on="Listeners"
@mouseenter.native="mousetrue = true" @mouseenter.native="mousetrue = true"
@mouseleave.native="mousetrue = false" @mouseleave.native="mousetrue = false"
/> />
@ -21,29 +21,25 @@ export default {
name: "agDatePicker", name: "agDatePicker",
props: { props: {
value: { value: {
type: Array, default: "",
default: () => [null, null],
}, },
}, },
data() { data() {
return { return {
width: "160px", width: "160px",
dateArr: [null, null], dateArr: "",
date_picker: false, date_picker: false,
mousetrue: true, mousetrue: true,
}; };
}, },
computed: { computed: {
attrs() { attrs() {
return { let config = {};
size: "small", if (this.$attrs.type === "daterange" || !this.$attrs.type) {
type: "daterange", config = {
format: "yyyy/MM/dd",
"value-format": "yyyy-MM-dd",
"start-placeholder": "开始日期", "start-placeholder": "开始日期",
"end-placeholder": "结束日期", "end-placeholder": "结束日期",
"range-separator": "-", "range-separator": "-",
"picker-options": { "picker-options": {
disabledDate(time) { disabledDate(time) {
return ( return (
@ -108,21 +104,85 @@ export default {
}, },
], ],
}, // }, //
};
} else {
config = {
align: "right",
placeholder: "选择日期",
"picker-options": {
disabledDate(time) {
return time.getTime() > Date.now();
},
shortcuts: [
{
text: "近一周",
onClick(picker) {
const date = new Date();
date.setTime(date.getTime() - 7 * 24 * 60 * 60 * 1000);
picker.$emit("pick", date);
},
},
{
text: "近一个月",
onClick(picker) {
const date = new Date();
date.setMonth(date.getMonth() - 1);
picker.$emit("pick", date);
},
},
{
text: "近三个月",
onClick(picker) {
const date = new Date();
date.setMonth(date.getMonth() - 3);
picker.$emit("pick", date);
},
},
{
text: "近六个月",
onClick(picker) {
const date = new Date();
date.setMonth(date.getMonth() - 6);
picker.$emit("pick", date);
},
},
{
text: "近一年",
onClick(picker) {
const date = new Date();
date.setFullYear(date.getFullYear() - 1);
picker.$emit("pick", date);
},
},
],
},
};
}
return {
size: "small",
type: "daterange",
format: "yyyy-MM-dd",
"value-format": "yyyy-MM-dd",
...config,
...this.$attrs, ...this.$attrs,
}; };
}, },
// //
inputListeners() { Listeners() {
return Object.assign({}, this.$listeners, { return Object.assign({}, this.$listeners, {
input: (value) => { input: (value) => {
let date1 = ""; if (this.attrs.type === "daterange") {
let date2 = "";
if (!isEmpty(value) && value.length === 2 && value[0] && value[1]) { if (!isEmpty(value) && value.length === 2 && value[0] && value[1]) {
date1 = `${value[0]} 00:00:00`; this.$emit("input", [
date2 = `${value[1]} 23:59:59`; `${value[0]} 00:00:00`,
`${value[1]} 23:59:59`,
]);
} else {
this.$emit("input", []);
}
} else {
this.$emit("input", value);
} }
this.$emit("input", [date1, date2]);
}, },
}); });
}, },
@ -135,34 +195,35 @@ export default {
watch: { watch: {
value: { value: {
handler(newVal) { handler(newVal) {
if (this.attrs.type === "daterange") {
if (!Array.isArray(newVal)) { if (!Array.isArray(newVal)) {
throw new Error("agDatePicker date请传入数组"); throw new Error("agDatePicker date请传入数组");
} }
let [date1, date2] = newVal; const [date1, date2] = newVal.slice(0, 2);
if (!this.dateArr) {
this.dateArr = [date1 || "", date2 || ""]; this.dateArr = [date1 || "", date2 || ""];
return; } else {
this.dateArr = newVal;
} }
this.$set(this.dateArr, 0, date1 || "");
this.$set(this.dateArr, 1, date2 || "");
}, },
immediate: true, immediate: true,
deep: true,
}, },
dateArr: { dateArr: {
handler(newVal) { handler(newVal) {
if ( let defaultWidth = this.attrs.type === "daterange" ? "170px" : "140px";
if (this.attrs.type === "daterange") {
this.date_picker =
newVal && newVal &&
newVal.length > 0 && newVal.length > 0 &&
newVal.some( newVal.some((item) => item != null && item !== "");
(item) => item !== null && item !== undefined && item !== "" this.width =
) newVal &&
) { newVal.length > 0 &&
this.width = "190px"; newVal.some((item) => item != null && item !== "")
this.date_picker = true; ? "205px"
: defaultWidth;
} else { } else {
this.width = "160px"; this.width = defaultWidth;
this.date_picker = false; this.date_picker = !!newVal; // 使newVal
} }
}, },
immediate: true, immediate: true,
@ -188,31 +249,29 @@ export default {
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
.el-input__icon.el-range__close-icon { .el-input__icon,
.ag-icon-prefix-show,
.ag-iconfont,
.ag-icon-clear {
position: absolute; position: absolute;
width: 16px; width: 16px !important;
font-size: 16px; font-size: 16px;
margin-left: -5px; margin-left: -5px;
line-height: 30px; line-height: 1 !important;
right: 8px; right: 6px;
top: 0; top: 1px;
z-index: 1; z-index: 1;
} }
.el-input__prefix {
position: absolute;
left: 98%;
}
.ag-icon-clear { .ag-icon-clear {
&:before { &:before {
content: "\e6db"; content: "\e6db";
} }
} }
.ag-icon-prefix-show { .ag-icon-prefix-show {
width: 16px;
font-size: 16px;
margin-left: -5px;
line-height: 38px;
position: absolute;
right: 8px;
top: 1px;
&:before { &:before {
content: "\e78e"; content: "\e78e";
} }

View File

@ -2,7 +2,7 @@
<el-input <el-input
class="ag_input" class="ag_input"
:style="{ width }" :style="{ width }"
v-on="inputListeners" v-on="Listeners"
v-bind="attrs" v-bind="attrs"
> >
<slot name="append" slot="append" /> <slot name="append" slot="append" />
@ -26,7 +26,7 @@ export default {
}, },
toUpperCase: { toUpperCase: {
type: Boolean, type: Boolean,
default: true, default: false,
}, },
}, },
computed: { computed: {
@ -38,7 +38,7 @@ export default {
}; };
}, },
// //
inputListeners() { Listeners() {
return Object.assign( return Object.assign(
{}, {},
// //
@ -70,23 +70,8 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
::v-deep { ::v-deep {
.el-input__suffix {
// @include sjf;
.el-input__suffix-inner {
.el-input__icon { .el-input__icon {
font-size: 12px; font-size: 16px !important;
width: 14px;
height: 14px;
line-height: 14px;
// @include cj1;
right: 5px;
&:hover {
border-radius: 50%;
color: #c0c4cc;
background: #ecedee;
}
}
}
} }
.el-icon-circle-close:before { .el-icon-circle-close:before {
content: "\e6db"; content: "\e6db";

View File

@ -0,0 +1,164 @@
<template>
<div class="ag-MultifunctionSearch">
<ag-input
class="ag_input_group"
placeholder="请输入内容"
:value="value[1]"
v-bind="config.input"
v-on="Listeners.input"
>
<ag-select
slot="prepend"
:clearable="false"
placeholder="请选择"
:value="value[0]"
v-bind="config.select"
v-on="Listeners.select"
class="ag_select_group"
>
<template slot="prefix">
{{
(config.select.options.find((e) => e.value == value[0]) || {}).label
}}
</template>
</ag-select>
<i slot="append" class="el-icon-search">999</i>
</ag-input>
</div>
</template>
<script>
import agSelect from "../../agSelect/src/index.vue";
import agInput from "../../agInput/src/index.vue";
export default {
name: "agMultifunctionSearch",
components: {
agSelect,
agInput,
},
props: {
value: {
type: Array,
default: () => {
return [null, null];
},
},
},
data() {
return {
values: [null, null],
};
},
computed: {
config() {
const input_config = this.getAfterAgo(this.$attrs, "after_");
const input = {
...this.$attrs,
...input_config,
};
const select_configs = this.getAfterAgo(this.$attrs, "ago_");
const select = {
...this.$attrs,
...select_configs,
};
console.log(input, select);
return {
input,
select,
};
},
Listeners() {
const new_listeners = Object.assign({}, this.$listeners, {
after_input: (value) => {
this.$emit("input", [value, this.value[1] ? this.value[1] : ""]);
},
ago_input: (value) => {
this.$emit("input", [this.value[0] ? this.value[0] : "", value]);
},
});
const select = this.getAfterAgo(new_listeners, "after_");
const input = this.getAfterAgo(new_listeners, "ago_");
return {
select,
input,
};
},
},
watch: {
value: {
handler(newVal) {
if (!Array.isArray(newVal)) {
throw new Error("agDatePicker data请传入数组");
}
},
immediate: true,
},
},
methods: {
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 scoped lang='scss'>
::v-deep {
.el-input-group__prepend {
background-color: #fff;
border: none !important;
}
.el-input__suffix {
z-index: 99;
transition: none !important;
}
.el-input__inner {
position: relative;
left: 0;
border: 1px solid #dcdfe6 !important;
padding: 0 5px 0 15px !important;
&:hover {
position: relative;
z-index: 20 !important;
border: 1px solid #c0c4cc !important;
}
&:focus {
position: relative;
z-index: 20 !important;
border: 1px solid #1890ff !important;
}
}
}
::v-deep .ag_select_group {
min-width: 90px;
max-width: 140px;
color: #606266;
text-align: start;
.el-input__prefix {
position: relative;
left: 0;
padding: 0 5px 0 15px;
box-sizing: border-box;
color: #606266;
visibility: hidden;
}
.el-input__inner {
border-radius: 4px 0 0 4px;
z-index: 1;
}
}
::v-deep .el-select {
margin: 0 -21px !important;
box-sizing: border-box;
}
</style>

View File

@ -49,7 +49,7 @@ export default {
// //
width: { width: {
type: [Number, String], type: [Number, String],
default: "50", default: "60",
}, },
size: { size: {
type: String, type: String,
@ -63,9 +63,6 @@ export default {
// //
endValue: "", endValue: "",
}; };
},
comments: {
}, },
watch: { watch: {
value(newValue) { value(newValue) {
@ -115,4 +112,8 @@ export default {
</script> </script>
<style scoped> <style scoped>
.separator {
margin: 0 5px;
color: #c0c4cc;
}
</style> </style>

View File

@ -3,7 +3,7 @@
class="ag_select" class="ag_select"
:style="{ width }" :style="{ width }"
v-bind="attrs" v-bind="attrs"
v-on="inputListeners" v-on="$listeners"
> >
<slot /> <slot />
<slot name="prefix" slot="prefix" /> <slot name="prefix" slot="prefix" />
@ -39,37 +39,11 @@ export default {
attrs() { attrs() {
return { return {
size: "small", size: "small",
remote: true,
clearable: true, clearable: true,
filterable: true, filterable: true,
...this.$attrs, ...this.$attrs,
}; };
}, },
//
inputListeners() {
return Object.assign(
{},
//
this.$listeners,
//
//
{
// `v-model`
input: (value) => {
this.$emit("input", this.toUpperCase ? value.toUpperCase() : value);
},
blur: (e) => {
let value = e.target.value
.trim()
.replace(/\s/g, (match) =>
match.charCodeAt(0) === 12288 ? String.fromCharCode(32) : match
);
//
this.$emit("input", value);
},
}
);
},
}, },
methods: {}, methods: {},
}; };
@ -77,24 +51,8 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
::v-deep { ::v-deep {
.el-date-editor--daterange.el-input__inner {
width: none;
}
.el-input__suffix {
.el-input__suffix-inner {
.el-input__icon { .el-input__icon {
font-size: 12px; font-size: 16px !important;
width: 14px;
height: 14px;
line-height: 14px;
right: 5px;
&:hover {
border-radius: 50%;
color: #c0c4cc;
background: #ecedee;
}
}
}
} }
.el-icon-circle-close:before { .el-icon-circle-close:before {
content: "\e6db"; content: "\e6db";

View File

@ -2,10 +2,38 @@
<div> <div>
<el-button type="success" @click="abb = true">点击打开 Dialog</el-button> <el-button type="success" @click="abb = true">点击打开 Dialog</el-button>
<ag-dialog :visible.sync="abb"> </ag-dialog> <ag-dialog :visible.sync="abb"> </ag-dialog>
<ag-datePicker :value="values"> </ag-datePicker> <ag-datePicker v-model="value" type="date" @change="change">
<ag-input :visible.sync="abb"> </ag-input> </ag-datePicker>
<ag-select :visible.sync="abb" :options="a_options" v-model="value"> <ag-input value="value"> </ag-input>
<ag-select :options="a_options" v-model="value">
<!-- <template slot="prefix">
{{
(a_options.find((e) => e.value == value) || {}).label
}}
</template> -->
</ag-select> </ag-select>
<ag-NumberRange v-model="values"> </ag-NumberRange>
<ag-MultifunctionSearch
size="small"
ref="ttt"
v-model="values"
:after_clearable="true"
:ago_options="a_options"
>
</ag-MultifunctionSearch>
<!-- <el-input
size="small"
placeholder="请输入内容"
v-model="value"
class="input-with-select"
>
<el-select v-model="a_value" slot="prepend" size="small" placeholder="请选择">
<el-option label="餐厅名" value="1"></el-option>
<el-option label="订单号" value="2"></el-option>
<el-option label="用户电话" value="3"></el-option>
</el-select>
<el-button slot="append" icon="el-icon-search"></el-button>
</el-input> -->
</div> </div>
</template> </template>
@ -14,12 +42,22 @@ import agDialog from "../packages/agDialog/src/index.vue";
import agDatePicker from "../packages/agDatePicker/src/index.vue"; import agDatePicker from "../packages/agDatePicker/src/index.vue";
import agInput from "../packages/agInput/src/index.vue"; import agInput from "../packages/agInput/src/index.vue";
import agSelect from "../packages/agSelect/src/index.vue"; import agSelect from "../packages/agSelect/src/index.vue";
import agNumberRange from "../packages/agNumberRange/src/index.vue";
import agMultifunctionSearch from "../packages/agMultifunctionSearch/src/index.vue";
export default { export default {
components: { agDialog, agDatePicker, agInput, agSelect }, components: {
agDialog,
agDatePicker,
agInput,
agSelect,
agNumberRange,
agMultifunctionSearch,
},
data() { data() {
return { return {
value: "", value: "选项1",
values: [], a_value: "59584",
values: ['选项1',999],
options: [ options: [
{ {
label: "热门城市", label: "热门城市",
@ -146,14 +184,75 @@ export default {
}, },
{ {
value: "选项5", value: "选项5",
label: "北京烤鸭", label: "IMEI/机器编号",
},
],
select: "",
input: "",
queryTerm: [
{
label: "IMEI/机器编号",
type: "ag-MultifunctionSearch",
value: "imei",
input: "",
placeholder: "请输入imei",
size: "small ",
clearable: true,
show: true,
change: () => {},
options: [],
},
{
label: "质检码",
type: "ag-MultifunctionSearch",
value: "business_id",
placeholder: "请输入imei",
size: "small ",
clearable: true,
show: true,
options: [],
},
{
lable: "入库时间",
type: "el-date-picker",
enName: "time",
TimeType: "daterange",
clearable: true,
startplaceholder: "开始日期",
endplaceholder: "结束日期",
rangeseparator: "至",
format: "timestamp",
placeholder: "请选择日期",
filterable: true,
display: false,
show: true,
size: "small",
focus: () => {},
blur: () => {},
handleChange: () => {},
}, },
], ],
}; };
}, },
watch: {
values: {
handler(val) {
console.log(val, 238);
},
deep: true,
immediate: true,
},
},
methods: { methods: {
handleClick() { change() {
console.log(1111); console.log(this.values, "48484");
},
submit() {
this.$refs.ttt.values;
},
changes(val) {
console.log(val);
console.log(999);
}, },
handleSizeChange() {}, handleSizeChange() {},
handleCurrentChange() {}, handleCurrentChange() {},