重写时间选择组件, 增加了新的依赖

package.json

@@ -30,11 +30,12 @@
         "autoprefixer": "^10.4.14",
         "codemirror": "^6.0.1",
         "postcss": "^8.4.21",
-        "sass": "^1.59.2",
+        "sass": "^1.59.3",
         "tailwindcss": "3.1.8",
         "unplugin-auto-import": "^0.15.1",
         "unplugin-vue-components": "^0.24.1",
         "vite": "^4.1.4",
+        "z-element-plus": "^1.0.2",
         "z-vfonts": "^0.0.1"
     }
 }

src/components/AppConfig/index.vue

@@ -1,16 +1,13 @@
 <template>
-    <el-config-provider :locale="zhCn">
-        <slot></slot>
-    </el-config-provider>
+    <slot></slot>
 </template>
 
 <script setup>
-import { ElMessage, ElLoading, ElNotification,ElMessageBox } from 'element-plus'
-import zhCn from 'element-plus/es/locale/lang/zh-cn'
+import {ElMessage, ElLoading, ElNotification, ElMessageBox} from 'element-plus'
 import {HcLog} from '~uti/tools'
 
 // 将ui的函数挂载在windows对象上
-function registerElTools () {
+function registerElTools() {
     window['$loading'] = ElLoading;
     window['$messageBox'] = ElMessageBox;
     window['$message'] = ElMessage;

src/components/plugins/table-form/hc-date-picker-1.vue

@@ -0,0 +1,102 @@
+<template>
+    <el-date-picker :id="keyname"
+                    v-model="modelValues"
+                    :clearable="clearable"
+                    :disabled="disabled"
+                    :format="format"
+                    :keyname="keyname"
+                    :placeholder="placeholder"
+                    :readonly="readonly"
+                    :value-format="valueFormat"
+                    style="width: 100%;height: 100%;"
+                    type="date"
+                    @change="timePickerChange"
+                    @keydown.shift.up="keyupShiftUp"
+                    @keydown.shift.down="keyupShiftDown"
+                    @keydown.shift.left="keyupShiftLeft"
+                    @keydown.shift.right="keyupShiftRight"></el-date-picker>
+</template>
+
+<script>
+export default {
+    inheritAttrs: false,
+}
+</script>
+
+<script setup>
+import {ref, watch} from 'vue'
+import {ElDatePicker} from 'z-element-plus'
+import 'dayjs/locale/zh-cn'
+
+const props = defineProps({
+    modelValue: {
+        type: [Date, String, Number, Array]
+    },
+    format: {
+        type: String,
+        default: 'YYYY:MM:DD'
+    },
+    valueFormat: {
+        type: String,
+        default: 'YYYY年MM月DD日'
+    },
+    keyname: {
+        type: String,
+        default: ''
+    },
+    readonly: {
+        type: Boolean,
+        default: false
+    },
+    disabled: {
+        type: Boolean,
+        default: false
+    },
+    clearable: {
+        type: Boolean,
+        default: true
+    },
+    placeholder: {
+        type: String,
+        default: ''
+    },
+})
+
+//变量
+const modelValues = ref(props.modelValue)
+
+//监听
+watch(() => [
+    props.modelValue,
+], ([val]) => {
+    modelValues.value = val
+})
+
+//事件
+const emit = defineEmits(['update:modelValue', 'change', 'keydowns'])
+
+const timePickerChange = (val) => {
+    emit('update:modelValue', val)
+    emit('change', val)
+}
+
+//向上
+const keyupShiftUp = (e) => {
+    emit('keydowns', {type: 'up', name: {target: {id: props.keyname}}, key: props.keyname, e});
+}
+
+//向下
+const keyupShiftDown = (e) => {
+    emit('keydowns', {type: 'down', name: {target: {id: props.keyname}}, key: props.keyname, e});
+}
+
+//向左
+const keyupShiftLeft = (e) => {
+    emit('keydowns', {type: 'left', name: {target: {id: props.keyname}}, key: props.keyname, e});
+}
+
+//向右
+const keyupShiftRight = (e) => {
+    emit('keydowns', {type: 'right', name: {target: {id: props.keyname}}, key: props.keyname, e});
+}
+</script>

src/components/plugins/table-form/hc-form-checkbox-group.vue

@@ -1,15 +1,17 @@
 <template>
-    <div class="ui-checkbox-group" :class="ui">
+    <div :class="ui" class="ui-checkbox-group">
         <template v-for="item in checkboxDatas" :key="item.key">
-            <el-checkbox :checked="item.checked" size="large" @change="onCheckboxChange($event, item)">{{item.name}}</el-checkbox>
+            <el-checkbox :checked="item.checked" size="large" @change="onCheckboxChange($event, item)">{{ item.name }}
+            </el-checkbox>
         </template>
     </div>
 </template>
 
 <script setup>
 import {ref, nextTick, watch} from 'vue'
-import { ElCheckbox } from 'element-plus'
-import { isNullAll, deepClone, getIndex } from "vue-utils-plus"
+import {ElCheckbox} from 'element-plus'
+import {isNullAll, deepClone, getIndex} from "vue-utils-plus"
+
 const props = defineProps({
     ui: {
         type: String,
@@ -24,11 +26,11 @@ const props = defineProps({
         default: () => ([])
     },
     val: {
-        type: [String,Number],
+        type: [String, Number],
         default: ''
     },
     keyname: {
-        type: [String,Number],
+        type: [String, Number],
         default: ''
     },
 })
@@ -87,7 +89,7 @@ const getCheckedValue = () => {
     for (let i = 0; i < datas.length; i++) {
         if (datas[i].checked) {
             const key = String(datas[i].key)
-            valString = valString ? `${valString},${key}`: key
+            valString = valString ? `${valString},${key}` : key
         }
     }
     //事件返回

src/components/plugins/table-form/hc-time-picker.vue

@@ -1,66 +1,19 @@
 <template>
-    <el-popover :disabled="disabled" :width="180" popper-class="is-pure el-picker__popper" trigger="click">
-        <template #reference>
-            <div
-                class="hc-date-time-input el-input el-input--prefix el-input--suffix el-date-editor el-date-editor--time"
-                @keydown.shift.up="keyupShiftUp"
-                @keydown.shift.down="keyupShiftDown"
-                @keydown.shift.left="keyupShiftLeft"
-                @keydown.shift.right="keyupShiftRight">
-                <div :class="isFocus?'is-focus':''" class="el-input__wrapper">
-                    <span class="el-input__prefix">
-                        <span class="el-input__prefix-inner">
-                            <HcIcon class="el-icon el-input__icon" name="time"/>
-                        </span>
-                    </span>
-                    <input :id="keyname" ref="timePickerRef" :disabled="disabled" :name="keyname"
-                           :placeholder="placeholder" :readonly="readonly"
-                           :value="modelValues" autocomplete="off" class="el-input__inner" type="text"
-                           @blur="timePickerBlur"
-                           @focus="timePickerFocus">
-                    <span v-if="clearable" v-show="modelValues" class="el-input__suffix">
-                        <span class="el-input__suffix-inner">
-                            <HcIcon class="el-icon el-input__icon" name="close-circle"/>
-                        </span>
-                    </span>
-                </div>
-            </div>
-        </template>
-        <div class="el-time-panel">
-            <div class="el-time-panel__content has-seconds">
-                <div class="el-time-spinner has-seconds">
-                    <el-scrollbar class="el-time-spinner__wrapper">
-                        <ul class="el-scrollbar__view el-time-spinner__list">
-                            <li class="el-time-spinner__item">00</li>
-                            <li class="el-time-spinner__item">01</li>
-                            <li class="el-time-spinner__item is-active">02</li>
-                            <li class="el-time-spinner__item">02</li>
-                        </ul>
-                    </el-scrollbar>
-                    <el-scrollbar class="el-time-spinner__wrapper">
-                        <ul class="el-scrollbar__view el-time-spinner__list">
-                            <li class="el-time-spinner__item">00</li>
-                            <li class="el-time-spinner__item">01</li>
-                            <li class="el-time-spinner__item is-active">02</li>
-                            <li class="el-time-spinner__item">02</li>
-                        </ul>
-                    </el-scrollbar>
-                    <el-scrollbar class="el-time-spinner__wrapper">
-                        <ul class="el-scrollbar__view el-time-spinner__list">
-                            <li class="el-time-spinner__item">00</li>
-                            <li class="el-time-spinner__item">01</li>
-                            <li class="el-time-spinner__item is-active">02</li>
-                            <li class="el-time-spinner__item">02</li>
-                        </ul>
-                    </el-scrollbar>
-                </div>
-            </div>
-            <div class="el-time-panel__footer">
-                <button class="el-time-panel__btn cancel" type="button">取消</button>
-                <button class="el-time-panel__btn confirm" type="button">确定</button>
-            </div>
-        </div>
-    </el-popover>
+    <el-time-picker :id="keyname"
+                    v-model="modelValues"
+                    :clearable="clearable"
+                    :disabled="disabled"
+                    :format="format"
+                    :keyname="keyname"
+                    :placeholder="placeholder"
+                    :readonly="readonly"
+                    :value-format="valueFormat"
+                    style="width: 100%;height: 100%;"
+                    @change="timePickerChange"
+                    @keydown.shift.up="keyupShiftUp"
+                    @keydown.shift.down="keyupShiftDown"
+                    @keydown.shift.left="keyupShiftLeft"
+                    @keydown.shift.right="keyupShiftRight"></el-time-picker>
 </template>
 
 <script>
@@ -71,17 +24,21 @@ export default {
 
 <script setup>
 import {ref, watch} from 'vue'
-import HcIcon from "~src/global/components/hc-icon/index.vue"
+import {ElTimePicker} from 'z-element-plus'
+import 'dayjs/locale/zh-cn'
 
 const props = defineProps({
     modelValue: {
-        type: [String, Number],
-        default: 1
+        type: [Date, String, Number, Array]
     },
     format: {
         type: String,
         default: 'HH:mm:ss'
     },
+    valueFormat: {
+        type: String,
+        default: 'HH:mm:ss'
+    },
     keyname: {
         type: String,
         default: ''
@@ -102,18 +59,10 @@ const props = defineProps({
         type: String,
         default: ''
     },
-    onKeydown: {
-        type: [Array],
-        default: () => {
-            return []
-        }
-    },
 })
 
 //变量
 const modelValues = ref(props.modelValue)
-const timePickerRef = ref(null)
-const isFocus = ref(false)
 
 //监听
 watch(() => [
@@ -123,51 +72,30 @@ watch(() => [
 })
 
 //事件
-const emit = defineEmits(['update:modelValue', 'change', 'blur', 'focus', 'visible-change',])
-//@keyDowns='dateKeydown'
+const emit = defineEmits(['update:modelValue', 'change', 'keydowns'])
 
 const timePickerChange = (val) => {
-    console.log(val)
     emit('update:modelValue', val)
     emit('change', val)
 }
 
-//失去焦点
-const timePickerBlur = (e) => {
-    isFocus.value = false
-    emit('blur', e)
-}
-
-//获取焦点
-const timePickerFocus = (e) => {
-    isFocus.value = true
-    emit('focus', e)
-}
-
 //向上
 const keyupShiftUp = (e) => {
-    console.log(e)
+    emit('keydowns', {type: 'up', name: {target: {id: props.keyname}}, key: props.keyname, e});
 }
 
 //向下
 const keyupShiftDown = (e) => {
-    console.log(e)
+    emit('keydowns', {type: 'down', name: {target: {id: props.keyname}}, key: props.keyname, e});
 }
 
 //向左
 const keyupShiftLeft = (e) => {
-    console.log(e)
+    emit('keydowns', {type: 'left', name: {target: {id: props.keyname}}, key: props.keyname, e});
 }
 
 //向右
 const keyupShiftRight = (e) => {
-    console.log(e)
+    emit('keydowns', {type: 'right', name: {target: {id: props.keyname}}, key: props.keyname, e});
 }
 </script>
-
-<style lang="scss" scoped>
-.hc-date-time-input {
-    height: 100%;
-    width: 100%;
-}
-</style>

src/global/components/hc-context-menu/index.vue

@@ -1,11 +1,11 @@
 <template>
-    <div class="hc-context-menu-box" :class="ui" :id="uuid" v-click-outside="onClickOutside">
+    <div :id="uuid" v-click-outside="onClickOutside" :class="ui" class="hc-context-menu-box">
         <template v-for="item in menus">
             <div class="hc-context-menu-item" @click.stop="optionClicked(item)">
-                <slot :name='item.key' :item="item" v-if="item.isSlot"/>
+                <slot v-if="item.isSlot" :item="item" :name='item.key'/>
                 <template v-else>
-                    <HcIcon :name="item.icon" class="menu-item-icon" v-if="item.icon"/>
-                    <span class="menu-item-name">{{item.label}}</span>
+                    <HcIcon v-if="item.icon" :name="item.icon" class="menu-item-icon"/>
+                    <span class="menu-item-name">{{ item.label }}</span>
                 </template>
             </div>
         </template>
@@ -40,12 +40,12 @@ watch(() => [
 })
 
 //加载完成
-nextTick(()=>{
+nextTick(() => {
     setIsSlots(props.datas)
 })
 
 //渲染完成
-onMounted(()=>{
+onMounted(() => {
     document.body.addEventListener('keyup', onEscKeyRelease);
 })
 

src/global/components/hc-date-picker/index.vue

@@ -1,9 +1,13 @@
 <template>
-    <el-date-picker class="hc-date-picker" v-model="betweenDate" :type="isType" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :clearable="isClearable" :value-format="isFormat" @change="betweenDateUpdate"/>
+    <el-date-picker v-model="betweenDate" :clearable="isClearable" :type="isType" :value-format="isFormat"
+                    class="hc-date-picker" end-placeholder="结束日期" range-separator="至"
+                    start-placeholder="开始日期" @change="betweenDateUpdate"/>
 </template>
 
 <script setup>
-import { ref,watch } from "vue";
+import {ref, watch} from "vue";
+import {ElDatePicker} from 'element-plus'
+
 const props = defineProps({
     dates: {
         type: Array,
@@ -35,7 +39,7 @@ watch(() => [
     props.type,
     props.format,
     props.clearable,
-], ([dates,type,format,clearable]) => {
+], ([dates, type, format, clearable]) => {
     betweenDate.value = dates
     isType.value = type
     isFormat.value = format

src/global/components/hc-uploads/index.vue

@@ -1,17 +1,19 @@
 <template>
-    <div class="hc-uploads-box" v-loading="spinShow">
-        <el-upload ref="uploadRef" v-model:file-list="fileListData" :action="api + action" :headers="getTokenHeader()" :data="uploadData" :limit="limit" :accept="accept"
-                   list-type="picture-card" :multiple="limit > 1"  :disabled="uploadDisabled" :on-preview="uploadPreview"
-                   :on-success="uploadSuccess" :on-exceed="uploadExceed" :on-error="uploadError"
-                   :before-upload="beforeUpload" :on-progress="uploadprogress" :on-remove="uploadRemove">
-            <HcIcon name="add" class="hc-upload-icon"/>
+    <div v-loading="spinShow" class="hc-uploads-box">
+        <el-upload ref="uploadRef" v-model:file-list="fileListData" :accept="accept" :action="api + action"
+                   :before-upload="beforeUpload" :data="uploadData" :disabled="uploadDisabled"
+                   :headers="getTokenHeader()" :limit="limit" :multiple="limit > 1" :on-error="uploadError"
+                   :on-exceed="uploadExceed" :on-preview="uploadPreview" :on-progress="uploadprogress"
+                   :on-remove="uploadRemove" :on-success="uploadSuccess" list-type="picture-card">
+            <HcIcon class="hc-upload-icon" name="add"/>
         </el-upload>
-        <el-image-viewer v-if="showViewer" :initial-index="initialIndex" :url-list="previewFileList" @close="showViewerClose"/>
+        <el-image-viewer v-if="showViewer" :initial-index="initialIndex" :url-list="previewFileList"
+                         @close="showViewerClose"/>
     </div>
 </template>
 
 <script setup>
-import {ref,watch,onMounted} from "vue";
+import {ref, watch, onMounted} from "vue";
 import {getTokenHeader} from '~src/api/request/header';
 import {getIndex, getObjValue, getObjNullValue, isSize} from "vue-utils-plus"
 import {genFileId} from "element-plus";
@@ -67,7 +69,7 @@ watch(() => [
 })
 
 //渲染完成
-onMounted(()=> {
+onMounted(() => {
     beforeFileNum.value = 0
     finishFileNum.value = 0
     errorFileNum.value = 0
@@ -85,7 +87,7 @@ const spinShow = ref(false)
 const beforeFileNum = ref(0)
 const beforeUpload = async (file) => {
     if (isSize(file?.size, props.size)) {
-        beforeFileNum.value ++;
+        beforeFileNum.value++;
         spinShow.value = true
         return true;
     } else {
@@ -115,8 +117,8 @@ const uploadprogress = () => {
 
 //上传完成
 const finishFileNum = ref(0)
-const uploadSuccess = (response,uploadFile,uploadFiles) => {
-    finishFileNum.value ++;
+const uploadSuccess = (response, uploadFile, uploadFiles) => {
+    finishFileNum.value++;
     if (beforeFileNum.value === finishFileNum.value) {
         let fileList = getUploadFileList(uploadFiles)
         uploadClearFiles()
@@ -128,7 +130,7 @@ const uploadSuccess = (response,uploadFile,uploadFiles) => {
 //上传失败
 const errorFileNum = ref(0)
 const uploadError = () => {
-    errorFileNum.value ++;
+    errorFileNum.value++;
     window?.$message?.error('上传失败');
     const num = finishFileNum.value + errorFileNum.value;
     if (beforeFileNum.value === num) {
@@ -149,7 +151,7 @@ const uploadClearFiles = () => {
 
 //获取文件URL
 const getUploadFileList = (fileListArr) => {
-    let fileArr = [], fileList = fileListArr ??[];
+    let fileArr = [], fileList = fileListArr ?? [];
     fileList.forEach(item => {
         if (getObjNullValue(item?.response)) {
             const data = getObjValue(item?.response?.data)
@@ -166,7 +168,6 @@ const getUploadFileList = (fileListArr) => {
 }
 
 
-
 //预览
 const showViewer = ref(false)
 const initialIndex = ref(-1)

src/layout/modules/TopMenuBar.vue

@@ -76,6 +76,7 @@ const barItemIndex = ref(0);
 const menusData = ref([
     {label: '关闭当前', key: "close"},
     {label: '关闭所有', key: "all"},
+    {label: '关闭其它', key: "other"},
 ]);
 const barMenuContextMenu = (event, item, index) => {
     event.preventDefault();
@@ -93,6 +94,10 @@ const handleMenuSelect = ({key}) => {
         setStoreData('bar-menu-datas', [])
         useAppState.menuBarShow = false;
         router.push({name: 'home-index'});
+    } else if (key === 'other') {
+        const {key} = barRoutes.value
+        barMenuData.value = barMenuData.value.filter(item => item.key === key)
+        setStoreData('bar-menu-datas', barMenuData.value)
     }
 }
 

src/main.js

@@ -1,17 +1,19 @@
 import "./styles/app/tailwind.scss"
 //主要
-import { createApp } from 'vue'
+import {createApp} from 'vue'
 import setupPinia from "./store/init"
-import router,{ setupRouter } from './router'
+import router, {setupRouter} from './router'
 import App from './App.vue'
 
 //饿了么UI
 import ElementPlus from 'element-plus'
+import zhCn from 'element-plus/es/locale/lang/zh-cn'
 import 'element-plus/dist/index.css'
 import 'element-plus/theme-chalk/dark/css-vars.css'
+import 'dayjs/locale/zh-cn'
 
 //挂载全局
-import { setupComponents } from './global/index'
+import {setupComponents} from './global/index'
 
 //导入其它样式
 import "./styles/font/index.scss"
@@ -26,7 +28,9 @@ async function bootstrap() {
     setupComponents(app);       // 组件注册全局
     await setupRouter(app);     // 挂载路由
     await router.isReady();     // 路由准备就绪后挂载APP实例
-    app.use(ElementPlus)        //饿了么UI框架
+    app.use(ElementPlus, {
+        locale: zhCn,
+    })  //饿了么UI框架
     app.mount('#app');
 }
 

src/plugins/HTableForm.js

@@ -4,12 +4,13 @@ import {toParse, isArray} from "vue-utils-plus";
 import HcTableFormUpload from "~com/plugins/table-form/hc-form-upload.vue"
 import HcFormSelectSearch from "~com/plugins/table-form/hc-form-select-search.vue"
 import HcFormCheckboxGroup from "~com/plugins/table-form/hc-form-checkbox-group.vue"
-//import ElTimePicker from "~com/plugins/table-form/hc-time-picker.vue"
+import ElTimePicker from "~com/plugins/table-form/hc-time-picker.vue"
+import ElDatePicker from "~com/plugins/table-form/hc-date-picker-1.vue"
 
 import {
-    ElButton, ElTooltip, ElInput, ElDatePicker, ElUpload,
+    ElButton, ElTooltip, ElInput, ElUpload,
     ElInputNumber, ElSelect, ElOption, ElRadioGroup,
-    ElRadio, ElCheckbox, ElCheckboxGroup, ElTimePicker
+    ElRadio, ElCheckbox, ElCheckboxGroup
 } from 'element-plus'
 
 const components = {
@@ -106,6 +107,10 @@ export default class HTableForm {
                 keyupShiftRight(event) {
                     _this.setKeyupData(event, 'right', keys)
                 },
+                //日期时间框键盘事件
+                dateKeydown({type, name}) {
+                    _this.setKeyupData(name, type, keys)
+                },
             }
         })
         app.mount(appId)
@@ -237,12 +242,6 @@ export default class HTableForm {
     static setElementFocus(keyId) {
         if (keyId) {
             document.getElementById(keyId).focus();
-            /*try {
-                console.log('focus', keyId)
-                document.getElementById(keyId).focus();
-            } catch (e) {
-                console.log(e)
-            }*/
         }
     }
 }