From e5e98d54abe8128ccaf73805243c633fff8c8f8d Mon Sep 17 00:00:00 2001
From: qiaopengfei <2646186879@qq.com>
Date: Sat, 13 Jul 2024 18:10:18 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E5=A4=9A=E5=8A=9F=E8=83=BD=E8=BE=93?=
=?UTF-8?q?=E5=85=A5=E6=A1=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
examples/main.js | 5 +-
packages/MultifunctionSearch/src/index.vue | 18 --
packages/agDatePicker/src/index.vue | 289 +++++++++++-------
packages/agInput/src/index.vue | 25 +-
.../index.js | 0
packages/agMultifunctionSearch/src/index.vue | 164 ++++++++++
packages/agNumberRange/src/index.vue | 9 +-
packages/agSelect/src/index.vue | 48 +--
src/App.vue | 117 ++++++-
9 files changed, 463 insertions(+), 212 deletions(-)
delete mode 100644 packages/MultifunctionSearch/src/index.vue
rename packages/{MultifunctionSearch => agMultifunctionSearch}/index.js (100%)
create mode 100644 packages/agMultifunctionSearch/src/index.vue
diff --git a/examples/main.js b/examples/main.js
index f320530..a1c7378 100644
--- a/examples/main.js
+++ b/examples/main.js
@@ -3,7 +3,7 @@ import App from '../src/App.vue'
//基于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 '../src/styles/element-variables.scss'//element 组件样式文件
@@ -17,6 +17,9 @@ Vue.use(TabPane);
Vue.use(Pagination)
Vue.use(Dialog)
Vue.use(Button)
+Vue.use(Form)
+Vue.use(FormItem)
+Vue.use(Popover)
// 导入组件库
import erp_element_ui from '../packages'
diff --git a/packages/MultifunctionSearch/src/index.vue b/packages/MultifunctionSearch/src/index.vue
deleted file mode 100644
index 23736a3..0000000
--- a/packages/MultifunctionSearch/src/index.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-
-
-
主组件
-
-
-
-
-
-
\ No newline at end of file
diff --git a/packages/agDatePicker/src/index.vue b/packages/agDatePicker/src/index.vue
index a472963..6b13ac5 100644
--- a/packages/agDatePicker/src/index.vue
+++ b/packages/agDatePicker/src/index.vue
@@ -5,7 +5,7 @@
clear-icon="ag-icon-clear"
v-model="dateArr"
v-bind="attrs"
- v-on="inputListeners"
+ v-on="Listeners"
@mouseenter.native="mousetrue = true"
@mouseleave.native="mousetrue = false"
/>
@@ -21,108 +21,168 @@ export default {
name: "agDatePicker",
props: {
value: {
- type: Array,
- default: () => [null, null],
+ default: "",
},
},
data() {
return {
width: "160px",
- dateArr: [null, null],
+ dateArr: "",
date_picker: false,
mousetrue: true,
};
},
computed: {
attrs() {
+ let config = {};
+ if (this.$attrs.type === "daterange" || !this.$attrs.type) {
+ config = {
+ "start-placeholder": "开始日期",
+ "end-placeholder": "结束日期",
+ "range-separator": "-",
+ "picker-options": {
+ disabledDate(time) {
+ return (
+ time.getTime() >
+ new Date(new Date().toLocaleDateString()).getTime() +
+ 24 * 60 * 60 * 1000 -
+ 1
+ );
+ },
+ shortcuts: [
+ {
+ text: "本月",
+ onClick(picker) {
+ const end =
+ new Date(new Date().toLocaleDateString()).getTime() +
+ 24 * 60 * 60 * 1000 -
+ 1;
+ const time = new Date();
+ time.setDate(1);
+ time.setHours(0);
+ time.setSeconds(0);
+ time.setMinutes(0);
+ var start = time.getTime();
+ picker.$emit("pick", [start, end]);
+ },
+ },
+ {
+ text: "近一个月",
+ onClick(picker) {
+ const end = new Date();
+ const start = new Date();
+ start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+ picker.$emit("pick", [start, end]);
+ },
+ },
+ {
+ text: "近三个月",
+ onClick(picker) {
+ const end = new Date();
+ const start = new Date();
+ start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+ picker.$emit("pick", [start, end]);
+ },
+ },
+ {
+ text: "近六个月",
+ onClick(picker) {
+ const end = new Date();
+ const start = new Date();
+ start.setTime(start.getTime() - 3600 * 1000 * 24 * 180);
+ picker.$emit("pick", [start, end]);
+ },
+ },
+ {
+ text: "最近一年",
+ onClick(picker) {
+ const end = new Date();
+ const start = new Date();
+ start.setTime(start.getTime() - 3600 * 1000 * 24 * 360);
+ picker.$emit("pick", [start, end]);
+ },
+ },
+ ],
+ }, //多选日期
+ };
+ } 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",
+ format: "yyyy-MM-dd",
"value-format": "yyyy-MM-dd",
- "start-placeholder": "开始日期",
- "end-placeholder": "结束日期",
- "range-separator": "-",
-
- "picker-options": {
- disabledDate(time) {
- return (
- time.getTime() >
- new Date(new Date().toLocaleDateString()).getTime() +
- 24 * 60 * 60 * 1000 -
- 1
- );
- },
- shortcuts: [
- {
- text: "本月",
- onClick(picker) {
- const end =
- new Date(new Date().toLocaleDateString()).getTime() +
- 24 * 60 * 60 * 1000 -
- 1;
- const time = new Date();
- time.setDate(1);
- time.setHours(0);
- time.setSeconds(0);
- time.setMinutes(0);
- var start = time.getTime();
- picker.$emit("pick", [start, end]);
- },
- },
- {
- text: "近一个月",
- onClick(picker) {
- const end = new Date();
- const start = new Date();
- start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
- picker.$emit("pick", [start, end]);
- },
- },
- {
- text: "近三个月",
- onClick(picker) {
- const end = new Date();
- const start = new Date();
- start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
- picker.$emit("pick", [start, end]);
- },
- },
- {
- text: "近六个月",
- onClick(picker) {
- const end = new Date();
- const start = new Date();
- start.setTime(start.getTime() - 3600 * 1000 * 24 * 180);
- picker.$emit("pick", [start, end]);
- },
- },
- {
- text: "最近一年",
- onClick(picker) {
- const end = new Date();
- const start = new Date();
- start.setTime(start.getTime() - 3600 * 1000 * 24 * 360);
- picker.$emit("pick", [start, end]);
- },
- },
- ],
- }, //多选日期
+ ...config,
...this.$attrs,
};
},
// 所有父级事件
- inputListeners() {
+ Listeners() {
return Object.assign({}, this.$listeners, {
input: (value) => {
- let date1 = "";
- let date2 = "";
-
- if (!isEmpty(value) && value.length === 2 && value[0] && value[1]) {
- date1 = `${value[0]} 00:00:00`;
- date2 = `${value[1]} 23:59:59`;
+ if (this.attrs.type === "daterange") {
+ if (!isEmpty(value) && value.length === 2 && value[0] && value[1]) {
+ this.$emit("input", [
+ `${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: {
value: {
handler(newVal) {
- if (!Array.isArray(newVal)) {
- throw new Error("agDatePicker date请传入数组");
- }
- let [date1, date2] = newVal;
- if (!this.dateArr) {
+ if (this.attrs.type === "daterange") {
+ if (!Array.isArray(newVal)) {
+ throw new Error("agDatePicker date请传入数组");
+ }
+ const [date1, date2] = newVal.slice(0, 2);
this.dateArr = [date1 || "", date2 || ""];
- return;
+ } else {
+ this.dateArr = newVal;
}
- this.$set(this.dateArr, 0, date1 || "");
- this.$set(this.dateArr, 1, date2 || "");
},
immediate: true,
- deep: true,
},
dateArr: {
handler(newVal) {
- if (
- newVal &&
- newVal.length > 0 &&
- newVal.some(
- (item) => item !== null && item !== undefined && item !== ""
- )
- ) {
- this.width = "190px";
- this.date_picker = true;
+ let defaultWidth = this.attrs.type === "daterange" ? "170px" : "140px";
+ if (this.attrs.type === "daterange") {
+ this.date_picker =
+ newVal &&
+ newVal.length > 0 &&
+ newVal.some((item) => item != null && item !== "");
+ this.width =
+ newVal &&
+ newVal.length > 0 &&
+ newVal.some((item) => item != null && item !== "")
+ ? "205px"
+ : defaultWidth;
} else {
- this.width = "160px";
- this.date_picker = false;
+ this.width = defaultWidth;
+ this.date_picker = !!newVal; // 使用逻辑非操作来转换newVal为布尔值
}
},
immediate: true,
@@ -188,31 +249,29 @@ export default {
-webkit-font-smoothing: antialiased;
-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;
- width: 16px;
+ width: 16px !important;
font-size: 16px;
margin-left: -5px;
- line-height: 30px;
- right: 8px;
- top: 0;
+ line-height: 1 !important;
+ right: 6px;
+ top: 1px;
z-index: 1;
}
-
+ .el-input__prefix {
+ position: absolute;
+ left: 98%;
+ }
.ag-icon-clear {
&:before {
content: "\e6db";
}
}
-
.ag-icon-prefix-show {
- width: 16px;
- font-size: 16px;
- margin-left: -5px;
- line-height: 38px;
- position: absolute;
- right: 8px;
- top: 1px;
&:before {
content: "\e78e";
}
diff --git a/packages/agInput/src/index.vue b/packages/agInput/src/index.vue
index c71136b..b9cb145 100644
--- a/packages/agInput/src/index.vue
+++ b/packages/agInput/src/index.vue
@@ -2,7 +2,7 @@
@@ -26,7 +26,7 @@ export default {
},
toUpperCase: {
type: Boolean,
- default: true,
+ default: false,
},
},
computed: {
@@ -38,7 +38,7 @@ export default {
};
},
// 所有父级事件
- inputListeners() {
+ Listeners() {
return Object.assign(
{},
// 我们从父级添加所有的监听器
@@ -70,23 +70,8 @@ export default {
\ No newline at end of file
diff --git a/packages/agNumberRange/src/index.vue b/packages/agNumberRange/src/index.vue
index 902dcec..b348be6 100644
--- a/packages/agNumberRange/src/index.vue
+++ b/packages/agNumberRange/src/index.vue
@@ -49,7 +49,7 @@ export default {
// 输入框宽度
width: {
type: [Number, String],
- default: "50",
+ default: "60",
},
size: {
type: String,
@@ -63,9 +63,6 @@ export default {
// 结束数值
endValue: "",
};
- },
- comments: {
-
},
watch: {
value(newValue) {
@@ -115,4 +112,8 @@ export default {
diff --git a/packages/agSelect/src/index.vue b/packages/agSelect/src/index.vue
index 9390444..d692b69 100644
--- a/packages/agSelect/src/index.vue
+++ b/packages/agSelect/src/index.vue
@@ -3,7 +3,7 @@
class="ag_select"
:style="{ width }"
v-bind="attrs"
- v-on="inputListeners"
+ v-on="$listeners"
>
@@ -39,37 +39,11 @@ export default {
attrs() {
return {
size: "small",
- remote: true,
clearable: true,
filterable: true,
...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: {},
};
@@ -77,24 +51,8 @@ export default {
\ No newline at end of file
diff --git a/packages/agMultifunctionSearch/index.js b/packages/agMultifunctionSearch/index.js
index 67277fc..373c9a0 100644
--- a/packages/agMultifunctionSearch/index.js
+++ b/packages/agMultifunctionSearch/index.js
@@ -1,9 +1,9 @@
-// import pedestal from './src'
+import agMultifunctionSearch from './src'
-// // 为组件提供 install 安装方法,供按需引入
-// pedestal.install = function (Vue) {
-// Vue.component(pedestal.name, pedestal)
-// }
+// 为组件提供 install 安装方法,供按需引入
+agMultifunctionSearch.install = function (Vue) {
+ Vue.component(agMultifunctionSearch.name, agMultifunctionSearch)
+}
-// // 导出组件
-// export default pedestal
+// 导出组件
+export default agMultifunctionSearch
diff --git a/packages/agMultifunctionSearch/src/index.vue b/packages/agMultifunctionSearch/src/index.vue
index 679a3b5..10492d5 100644
--- a/packages/agMultifunctionSearch/src/index.vue
+++ b/packages/agMultifunctionSearch/src/index.vue
@@ -1,5 +1,20 @@
+
+
+ {{
+ (config.select.options.find((e) => e.value == value[0]) || {}).label
+ }}
+
+
-
-
- {{
- (config.select.options.find((e) => e.value == value[0]) || {}).label
- }}
-
-
- 999
@@ -111,54 +110,8 @@ export default {
\ No newline at end of file
diff --git a/src/App.vue b/src/App.vue
index f1af486..d31a627 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -13,6 +13,24 @@
-->
+
+
+
+
+
+
+
{
+ for (const key in value) {
+ if (!value[key]) {
+ alert("错误");
+ callback();
+ }
+ }
+
+ // if (value === "") {
+ // callback(new Error("请输入密码"));
+ // } else {
+ // if (this.ruleForm.checkPass !== "") {
+ // this.$refs.ruleForm.validateField("checkPass");
+ // }
+ // }
+ };
return {
+ ruleForm: {
+ pass: [],
+ },
+ rules: {
+ pass: [{ validator: validatePass, trigger: "blur" }],
+ },
value: "选项1",
a_value: "59584",
- values: ['选项1',999],
+ values: ["选项1", 999],
options: [
{
label: "热门城市",
--
2.25.1