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