qtsk-vue3 0.0.8 → 0.0.10

package/package/component.js

@@ -1,130 +1,35 @@
-/* import McLink from './components/link'
-import McBreadcrumb from './components/breadcrumb'
-import McButton from './components/button'
-import McCheckbox from './components/checkbox'
-import McCheckboxGroup from './components/checkbox-group'
-import McRadio from './components/radio'
-import McRadioGroup from './components/radio-group'
-import McProgress from './components/progress'
-import McInput from './components/input'
-import McSlide from './components/slide'
-import McSwitch from './components/switch'
-import McTab from './components/tab'
-import McTextarea from './components/textarea'
-import McTree from './components/tree'
-import McCity from './components/city'
-import McCityPicker from './components/city-picker'
-import McAddress from './components/address'
-import McFuzzySearch from './components/fuzzy-search'
-import McTip from './components/tip'
-import McPopup from './components/popup'
-import McTable from './components/table'
-import McTableColumn from './components/table-column'
-import McPagination from './components/pagination'
-import McForm from './components/form'
-import McFormItem from './components/form-item'
-import McSelect from './components/select'
-import McSelectOption from './components/select-option'
-import McDatePicker from './components/date-picker'
-import McMonthPicker from './components/month-picker'
-import McDropdown from './components/dropdown'
-import McImport from './components/import'
-// import McNotification from './components/notification'
-import McCollapse from './components/collapse'
-import McCollapseItem from './components/collapse-item'
-import McCollapseTransition from './components/collapse-transition'
-import McUpload from './components/upload'
-import McDepartmentTree from './components/department-tree'
-import McDepartmentPicker from './components/department-picker'
-import McPermissionTree from './components/permission-tree'
-import McLabel from './components/label'
-import McJobFuncPicker from './components/job-func'
-import McAmountRange from './components/amount-range'
-
-// 新版table控件 支持除jsx外的调用方式
-import {McTableV2,McTableV2Column} from './components/tableV2'
-
-export default [
-    McLink,
-    McBreadcrumb,
-    McButton,
-    McCheckbox,
-    McCheckboxGroup,
-    McRadio,
-    McRadioGroup,
-    McProgress,
-    McInput,
-    McSlide,
-    McSwitch,
-    McTab,
-    McTextarea,
-    McTree,
-    McCity,
-    McCityPicker,
-    McAddress,
-    McFuzzySearch,
-    McTip,
-    McPopup,
-    McTable,
-    McTableColumn,
-    McPagination,
-    McForm,
-    McFormItem,
-    McSelect,
-    McSelectOption,
-    McDatePicker,
-    McMonthPicker,
-    McDropdown,
-    McImport,
-    // McNotification,
-    McCollapse,
-    McCollapseItem,
-    McCollapseTransition,
-    McUpload,
-    McDepartmentTree,
-    McDepartmentPicker,
-    McPermissionTree,
-    McLabel,
-    McJobFuncPicker,
-
-    // new version table package
-    McTableV2,
-    McTableV2Column,
-
-    McAmountRange,
-]
- */
-
-import QTButton from './components/QTButton/index.vue'
-import QTContainer from './components/QTContainer/index.vue'
-import QTMenu from './components/QTMenu/index.vue'
-import QTIcons from './components/QTIcons/index.vue'
-import QTInput from './components/QTInput/index.vue'
-import QTSelect from './components/QTSelect/index.vue'
-import QTTable from './components/QTTable/index.vue'
-import QTSwitch from './components/QTSwitch/index.vue'
-import QTPagination from './components/QTPagination/index.vue'
-import QTDatePicker from './components/QTDatePicker/index.vue'
-import QTTree from './components/QTTree/index.vue'
-import QTDialog from './components/QTDialog/index.vue'
-import QTForm from './components/QTForm/index.vue'
-import QTFormItem from './components/QTFormItem/index.vue'
+import CommonButton from './components/Button/index.vue'
+import Container from './components/Container/index.vue'
+import Menu from './components/Menu/index.vue'
+import Icons from './components/Icons/index.vue'
+import Input from './components/Input/index.vue'
+import Select from './components/Select/index.vue'
+import Table from './components/Table/index.vue'
+import Switch from './components/Switch/index.vue'
+import Pagination from './components/Pagination/index.vue'
+import DatePicker from './components/DatePicker/index.vue'
+import Tree from './components/Tree/index.vue'
+import Dialog from './components/Dialog/index.vue'
+import Form from './components/Form/index.vue'
+import FormItem from './components/FormItem/index.vue'
+import Empty from './components/Empty/index.vue'
 
 const components = 
     [
-        QTButton, 
-        QTContainer,
-        QTMenu, 
-        QTIcons, 
-        QTInput, 
-        QTSelect, 
-        QTTable, 
-        QTSwitch, 
-        QTPagination, 
-        QTDatePicker, 
-        QTTree, 
-        QTDialog,
-        QTForm,
-        QTFormItem
+        CommonButton, 
+        Container,
+        Menu, 
+        Icons, 
+        Input, 
+        Select, 
+        Table, 
+        Switch, 
+        Pagination, 
+        DatePicker, 
+        Tree, 
+        Dialog,
+        Form,
+        FormItem,
+        Empty
     ]
 export default components

package/package/components/{QTButton → Button}/index.vue

@@ -1,6 +1,6 @@
 <template>
-    <div :class="[type === 'default' ? 'defaultClass' : 'normalClass']">
-      <el-button :type="type" :color="color" :link="link">
+    <div class="normalClass">
+      <el-button :type="type" :color="color" :link="link" :loading="loading">
         <slot>按钮</slot>
       </el-button>
     </div>
@@ -11,35 +11,32 @@ import { ElButton} from 'element-plus'
 import '../../style/root.css'
 
 defineOptions({
-  name: 'QTButton',
+  name: 'CommonButton',
 })
-const props = defineProps({
+defineProps({
   type:{
     type: String,
     default: 'default', //可选数值有， primary/default
   },
   color: {
     type: String,
-    default: '#4d4398'
+    default: ''
   },
   link: {
     type: Boolean,
     default: false
+  },
+  loading: {
+    type: Boolean,
+    default: false
   }
 })
 //根据不同的类型，自定义按钮颜色
-const color = props.type === 'primary' ? props.color : ''
+// const color = props.type === 'primary' ? props.color : ''
 </script>
 
 <style lang="less" scoped>
 .normalClass{
   margin: 0 10px;
 }
-.defaultClass{
-  margin: 0 10px;
-  :deep(.el-button){
-    color: var(--qt-main-color)!important;
-    border-color: var(--qt-main-color)!important;
-  }
-}
 </style>

package/package/components/{QTContainer → Container}/index.vue

@@ -25,7 +25,7 @@
 <script setup>
 import { ElContainer, ElHeader, ElAside, ElMain } from 'element-plus'
 defineOptions({
-    name: 'QTContainer'
+    name: 'Container'
 })
 </script>
 
@@ -38,6 +38,7 @@ defineOptions({
         .el-header{
             display: flex;
             align-items: center;
+            justify-content: space-between;
             height: 60px;
         }
         .el-aside, .el-main{

package/package/components/{QTDatePicker → DatePicker}/index.vue

@@ -1,6 +1,6 @@
 <template>
   <el-config-provider :locale="zhCn">
-    <el-date-picker v-model="modelValue" type="date" :placeholder="placeholder" :format="format" :value-format="format"/>
+    <el-date-picker style="width: 100%;" v-model="modelValue" type="date" :placeholder="placeholder" :format="format" :value-format="format"/>
   </el-config-provider>
 </template>
 
@@ -9,7 +9,7 @@ import { ElDatePicker, ElConfigProvider } from 'element-plus'
 import zhCn from 'element-plus/es/locale/lang/zh-cn'
 
 defineOptions({
-  name: 'QTDatePicker',
+  name: 'DatePicker',
 })
 
 const props = defineProps({
@@ -23,7 +23,8 @@ const props = defineProps({
   },
 })
 
-const modelValue = defineModel('modelValue', { type: Boolean })
+const modelValue = defineModel('modelValue', { type: String })
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+</style>

package/package/components/{QTDialog → Dialog}/index.vue

@@ -18,7 +18,7 @@
 import { ElDialog, ElButton } from 'element-plus'
 
 defineOptions({
-  name: 'QTDialog',
+  name: 'Dialog',
 })
 
 defineProps({
@@ -38,14 +38,14 @@ defineProps({
 })
 
 let modelValue = defineModel('modelValue', {type: Boolean})
-
+let emits = defineEmits(['confirm'])
 // 点击取消
 const handleCancel = () => {
   modelValue.value = false
 }
 // 点击确认
 const handleConfirm = () => {
-  modelValue.value = false
+  emits('confirm')
 }
 </script>
 

package/package/components/Empty/index.vue

@@ -0,0 +1,20 @@
+<template>
+     <el-empty :description="description" />
+</template>
+
+<script setup>
+import { ElEmpty} from 'element-plus'
+
+defineOptions({
+  name: 'Empty',
+})
+defineProps({
+  description:{
+    type: String,
+    default: '敬请期待',
+  }
+})
+</script>
+
+<style lang="less" scoped>
+</style>

package/package/components/{QTForm → Form}/index.vue

@@ -13,16 +13,17 @@
 </template>
 
 <script setup>
+import { ref } from 'vue'
 import { ElForm } from 'element-plus'
 
 defineOptions({
-  name: 'QTForm',
+  name: 'Form',
 })
 
 defineProps({
   rules: {
-    type: Array,
-    default: () => ([])
+    type: Object,
+    default: () => ({})
   },
   inline: {
     type: Boolean,
@@ -31,6 +32,17 @@ defineProps({
 })
 
 let formData = defineModel('formData', {type: Object})
+let ruleFormRef = ref(null)
+
+const resetForm = () => {
+  if (!ruleFormRef.value) return
+  ruleFormRef.value.resetFields()
+}
+
+defineExpose({
+  resetForm,
+  ruleFormRef
+})
 
 </script>
 

package/package/components/{QTFormItem → FormItem}/index.vue

@@ -8,7 +8,7 @@
 import { ElFormItem } from 'element-plus'
 
 defineOptions({
-  name: 'QTFormItem',
+  name: 'FormItem',
 })
 
 defineProps({

package/package/components/{QTIcons → Icons}/index.vue

@@ -10,7 +10,7 @@ import { computed } from 'vue'
 import * as Icons from '@element-plus/icons-vue';
 
 defineOptions({
-    name: 'QTIcons'
+    name: 'Icons'
 })
 const props = defineProps({
     type: {

package/package/components/{QTInput → Input}/index.vue

@@ -1,5 +1,14 @@
 <template>
-    <ElInput :type="type" :placeholder="placeholder" v-model="inputValue" v-bind="$attrs"/>
+    <ElInput :type="type" :placeholder="placeholder" v-model="inputValue" v-bind="$attrs">
+        <template #prepend v-if="$slots.prepend">
+            <!-- 前缀 -->
+            <slot name="prepend" />
+        </template>
+        <template #append v-if="$slots.append">
+            <!-- 后缀 -->
+            <slot name="append" />
+        </template>
+    </ElInput>
 </template>
 
 <script setup>
@@ -7,7 +16,7 @@ import {ElInput} from 'element-plus'
 import '../../style/root.css'
 
 defineOptions({
-    name: 'QTInput'
+    name: 'Input'
 })
 defineProps({
     type: {
@@ -24,6 +33,6 @@ const inputValue = defineModel('modelValue', {default: '',type: [String, Number]
 
 <style lang="less" scoped>
 :deep(.el-textarea__inner:focus), :deep(.el-input__wrapper.is-focus){
-    box-shadow: 0 0 0 1px var(--qt-main-color) inset;
+    box-shadow: 0 0 0 1px var(--main-color) inset;
 }
 </style>

package/package/components/{QTMenu → Menu}/index.vue

@@ -3,15 +3,15 @@
         <el-menu class="el-menu-vertical-demo" router :collapse="isCollapse" :default-active="activeMenu"
             @open="handleOpen" @close="handleClose">
             <el-menu-item :index="menu.path" v-for="(menu, index) in menus" :key="index">
-                <QTIcons :type="menu.icon"></QTIcons>
+                <Icons :type="menu.icon"></Icons>
                 <template #title>
                     <span>{{ menu.name }}</span>
                 </template>
             </el-menu-item>
         </el-menu>
         <div class="menu_btn">
-            <QTIcons v-if="isCollapse"  @click="isCollapse = false" :type="'DArrowRight'"></QTIcons>
-            <QTIcons v-else  @click="isCollapse = true" :type="'DArrowLeft'"></QTIcons>
+            <Icons v-if="isCollapse"  @click="isCollapse = false" :type="'DArrowRight'"></Icons>
+            <Icons v-else  @click="isCollapse = true" :type="'DArrowLeft'"></Icons>
         </div>
     </div>
 </template>
@@ -19,10 +19,10 @@
 <script setup>
 import { ref } from 'vue'
 import { ElMenu, ElMenuItem } from 'element-plus'
-import QTIcons from '../QTIcons/index.vue'
+import Icons from '../Icons/index.vue'
 
 defineOptions({
-    name: 'QTMenu'
+    name: 'Menu'
 })
 defineProps({
     menus: {
@@ -59,8 +59,8 @@ const handleClose = (key, keyPath) => {
         }
 
         .is-active {
-            color: var(--qt-main-color);
-            background-color: var(--qt-background-color);
+            color: var(--main-color);
+            background-color: var(--main-background-color);
         }
     }
 

package/package/components/{QTMessage → Message}/index.js

@@ -1,9 +1,9 @@
 /** 
-* QTMessage 消息提示包含四种类型： error(错误)， success(成功)， warning(警告)， info(信息)
+* Message 消息提示包含四种类型： error(错误)， success(成功)， warning(警告)， info(信息)
 */
 import { ElMessage, ElMessageBox } from 'element-plus'
 
-export const QTMessage = {
+export const Message = {
     error: (message) => {
         ElMessage.error(message)
     },
@@ -24,4 +24,4 @@ export const QTMessage = {
     }
 }
 
-export const QTMessageBox = ElMessageBox
+export const MessageBox = ElMessageBox

package/package/components/{QTPagination → Pagination}/index.vue

@@ -13,7 +13,7 @@ import { ElPagination, ElConfigProvider } from 'element-plus'
 import zhCn from 'element-plus/es/locale/lang/zh-cn'
 
 defineOptions({
-  name: 'QTPagination',
+  name: 'Pagination',
 })
 defineProps({
   total: {

package/package/components/{QTSelect → Select}/index.vue

@@ -1,5 +1,11 @@
 <template>
-    <el-select v-model="selectValue" :placeholder="placeholder" v-bind="$attrs" :teleported="false">
+    <el-select
+        v-model="selectValue" 
+        :placeholder="placeholder" 
+        v-bind="$attrs" 
+        :teleported="false" 
+        clearable
+    >
         <el-option v-for="item in options" :key="item[valueName]" :label="item[keyName]" :value="item[valueName]" />
     </el-select>
 </template>
@@ -9,7 +15,7 @@ import { ElSelect, ElOption } from 'element-plus'
 import '../../style/root.css'
 
 defineOptions({
-    name: 'QTSelect'
+    name: 'Select'
 })
 defineProps({
     placeholder: {

package/package/components/{QTSwitch → Switch}/index.vue

@@ -6,7 +6,7 @@
 import { ElSwitch } from 'element-plus'
 
 defineOptions({
-  name: 'QTSwitch',
+  name: 'Switch',
 })
 
 const props = defineProps({

package/package/components/{QTTable → Table}/index.vue

@@ -7,14 +7,15 @@
         :width="column.width"
         :fixed="column.fixed"
         :key="index"
+        :show-overflow-tooltip="column.width?true:false"
       >
         <template #default="scope">
-          <div v-if="column.key!=='operations'">
+          <template v-if="column.key!=='operations'">
             {{ scope.row[column.key] }}
-          </div>
-          <div v-else>
+          </template>
+          <template v-else>
              <slot name="operations" :data="scope.row" :index="scope.$index"/>
-          </div>
+          </template>
         </template>
       </el-table-column>
       <template #empty>
@@ -28,7 +29,7 @@
 <script setup>
 import { ElTable, ElTableColumn, ElEmpty } from 'element-plus'
 defineOptions({
-  name: 'QTTable',
+  name: 'Table',
 })
 defineProps({
   data: {

package/package/components/{QTTree → Tree}/index.vue

@@ -1,14 +1,15 @@
 <template>
   <el-tree 
     ref="treeRef"
-    style="max-width: 600px" 
+    style="max-width: 600px;padding-top: 4px;" 
     :data="data" 
     :props="defaultProps" 
     :show-checkbox="showCheckBox" 
     default-expand-all
     :node-key="nodeKey"
     :expand-on-click-node="false"
-    @node-click="handleNodeClick" 
+    @node-click="handleNodeClick"
+    @check-change="checkChange"
   />
 </template>
 
@@ -17,8 +18,10 @@ import { ref } from 'vue'
 import { ElTree } from 'element-plus'
 
 const treeRef = ref(null)
+const modelValue = defineModel('modelValue', { type: Array })
+
 defineOptions({
-  name: 'QTTree',
+  name: 'Tree',
 })
 
 defineProps({
@@ -50,6 +53,12 @@ const defaultProps = {
 const getCheckedKeys = () => {
   console.log(treeRef.value.getCheckedKeys(false))
 }
+
+//当复选框被点击的时候触发, 用于获取所有的选中数据
+const checkChange = () => {
+  modelValue.value = treeRef.value.getCheckedKeys(false)
+}
+
 defineExpose({
   getCheckedKeys
 })

package/package/index.backup.js

@@ -1,4 +1,6 @@
 import Components from './component'
+import { Message, MessageBox } from './components/Message'
+
 const makeInstaller = (components = [], directives = []) => {
     const apps = []
     const install = (app, opts) => {
@@ -15,6 +17,6 @@ const makeInstaller = (components = [], directives = []) => {
 
 const install = makeInstaller(Components)
 
-export { install, install as default }
+export { Message, MessageBox, install, install as default }
 
-console.info('%c====== Editing in local package ======', 'font-size:16px;color:green;')
+console.info('%c====== Editing in local package ======', 'font-size:16px;color:pink;')

package/package/index.js

@@ -1,5 +1,5 @@
 import Components from './component'
-import { QTMessage, QTMessageBox } from './components/QTMessage'
+import { Message, MessageBox } from './components/Message'
 
 const makeInstaller = (components = [], directives = []) => {
     const apps = []
@@ -17,6 +17,6 @@ const makeInstaller = (components = [], directives = []) => {
 
 const install = makeInstaller(Components)
 
-export { QTMessage, QTMessageBox, install, install as default }
+export { Message, MessageBox, install, install as default }
 
-console.info('%c====== Editing in local package ======', 'font-size:16px;color:green;')
+console.info('%c====== Editing in local package ======', 'font-size:16px;color:pink;')

package/package/style/root.css

@@ -1,5 +1,5 @@
 /* 标准化样式定义 */
 :root{
-    --qt-main-color: #4d4398;
-    --qt-background-color: #e0edff;
-}
+    --main-color: #4d4398;
+    --main-background-color: #e0edff
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "qtsk-vue3",
-  "version": "0.0.8",
+  "version": "0.0.10",
   "description": "vue3版组件库",
   "main": "./package/index.js",
   "scripts": {