diff --git a/src/assets/images/dashboard/certificate.svg b/src/assets/images/dashboard/certificate.svg new file mode 100644 index 0000000..b2164ea --- /dev/null +++ b/src/assets/images/dashboard/certificate.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/assets/images/dashboard/inventory.svg b/src/assets/images/dashboard/inventory.svg new file mode 100644 index 0000000..b8b929d --- /dev/null +++ b/src/assets/images/dashboard/inventory.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/assets/images/dashboard/product.svg b/src/assets/images/dashboard/product.svg new file mode 100644 index 0000000..43056a6 --- /dev/null +++ b/src/assets/images/dashboard/product.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/assets/styles/element-ui.scss b/src/assets/styles/element-ui.scss index f5cd191..f4e4e6c 100644 --- a/src/assets/styles/element-ui.scss +++ b/src/assets/styles/element-ui.scss @@ -165,19 +165,21 @@ // 卡片样式优化 .el-card { border-radius: $base-border-radius; - box-shadow: $base-box-shadow; + box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05); transition: $base-transition; border: none; + overflow: hidden; &:hover { - box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.1); - transform: translateY(-2px); + box-shadow: 0 6px 18px 0 rgba(0, 0, 0, 0.1); + transform: translateY(-4px); } .el-card__header { padding: 16px 20px; border-bottom: 1px solid rgba(0, 0, 0, 0.05); font-weight: 500; + background-color: rgba($blue, 0.02); } .el-card__body { @@ -185,6 +187,96 @@ } } +// 自定义卡片类 +.app-card { + border-radius: $base-border-radius; + box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05); + background-color: #fff; + transition: $base-transition; + margin-bottom: 20px; + overflow: hidden; + + &:hover { + box-shadow: 0 6px 18px 0 rgba(0, 0, 0, 0.1); + transform: translateY(-4px); + } + + .app-card__header { + padding: 16px 20px; + border-bottom: 1px solid rgba(0, 0, 0, 0.05); + font-weight: 500; + display: flex; + align-items: center; + justify-content: space-between; + background-color: rgba($blue, 0.02); + + .app-card__title { + font-size: 16px; + color: #303133; + font-weight: 500; + display: flex; + align-items: center; + + .icon { + margin-right: 8px; + color: $blue; + } + } + + .app-card__extra { + color: #909399; + } + } + + .app-card__body { + padding: 20px; + } + + .app-card__footer { + padding: 10px 20px; + border-top: 1px solid rgba(0, 0, 0, 0.05); + background-color: rgba($blue, 0.01); + } + + &.is-shadow-none { + box-shadow: none; + + &:hover { + box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05); + } + } + + &.is-hover-none { + &:hover { + transform: none; + box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05); + } + } + + &.is-border { + border: 1px solid #ebeef5; + } + + &.is-gradient-header { + .app-card__header { + background: $primary-gradient; + color: #fff; + + .app-card__title { + color: #fff; + + .icon { + color: #fff; + } + } + + .app-card__extra { + color: rgba(255, 255, 255, 0.8); + } + } + } +} + // 表单样式优化 .el-form { .el-form-item { @@ -209,6 +301,32 @@ .el-table { border-radius: $base-border-radius; overflow: hidden; + height: 500px; // 设置默认固定高度 + + // 表格容器 + .el-table__body-wrapper { + height: calc(100% - 40px); // 减去表头高度 + overflow-y: auto; + + // 自定义滚动条样式 + &::-webkit-scrollbar { + width: 8px; + height: 8px; + } + + &::-webkit-scrollbar-thumb { + background-color: rgba(144, 147, 153, 0.3); + border-radius: 4px; + + &:hover { + background-color: rgba(144, 147, 153, 0.5); + } + } + + &::-webkit-scrollbar-track { + background-color: transparent; + } + } th { background-color: $background-light; @@ -217,17 +335,123 @@ td, th { padding: 12px 0; + height: 40px; // 固定表头行高 + line-height: 1.5; + box-sizing: border-box; } .el-table__row { transition: $base-transition; + height: 40px; // 固定数据行高 &:hover { background-color: rgba($blue, 0.04); } + + // 单元格内容垂直居中 + td { + vertical-align: middle; + + // 单元格内容溢出处理 + .cell { + display: flex; + align-items: center; + height: 100%; + line-height: 1.2; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + + // 带操作按钮的单元格 + } + } } - .el-table--striped .el-table__body tr.el-table__row--striped td { - background-color: rgba($blue, 0.02); + &.el-table--striped .el-table__body tr.el-table__row--striped td { + background-color: #eef0f5 !important; + } + + // 固定列样式优化 + .el-table__fixed, .el-table__fixed-right { + height: 100% !important; + + .el-table__fixed-body-wrapper { + height: calc(100% - 40px) !important; // 减去表头高度 + } + } + + // 空数据状态 + .el-table__empty-block { + height: 100%; + min-height: 200px; + } +} + +// 提供不同高度的表格类 +.el-table--small { + height: 400px; + + .el-table__body-wrapper, + .el-table__fixed-body-wrapper { + height: calc(100% - 36px) !important; // 小型表格表头高度略小 + } +} + +.el-table--medium { + height: 500px; +} + +.el-table--large { + height: 600px; +} + +// 自定义高度类 +.el-table--h300 { height: 300px; } +.el-table--h400 { height: 400px; } +.el-table--h500 { height: 500px; } +.el-table--h600 { height: 600px; } +.el-table--h700 { height: 700px; } +.el-table--h800 { height: 800px; } + +// 自适应高度类(适应父容器高度) +.el-table--auto-height { + height: 100%; + + .el-table__body-wrapper, + .el-table__fixed-body-wrapper { + height: calc(100% - 40px) !important; } +} + +// 提供不同行高的表格类 +.el-table--row-small { + td, th, .el-table__row { + height: 40px; + } +} + +.el-table--row-medium { + td, th, .el-table__row { + height: 50px; + } +} + +.el-table--row-large { + td, th, .el-table__row { + height: 60px; + } +} + +// 自定义行高类 +.el-table--row-h30 { + td, th, .el-table__row { height: 30px; } +} +.el-table--row-h40 { + td, th, .el-table__row { height: 40px; } +} +.el-table--row-h50 { + td, th, .el-table__row { height: 50px; } +} +.el-table--row-h60 { + td, th, .el-table__row { height: 60px; } } \ No newline at end of file diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss index f890780..56527a4 100644 --- a/src/assets/styles/index.scss +++ b/src/assets/styles/index.scss @@ -4,6 +4,9 @@ @import './element-ui.scss'; @import './sidebar.scss'; @import './btn.scss'; +@import './ruoyi.scss'; +@import './list-page.scss'; +@import './tag.scss'; body { height: 100%; diff --git a/src/assets/styles/list-page.scss b/src/assets/styles/list-page.scss new file mode 100644 index 0000000..51746ef --- /dev/null +++ b/src/assets/styles/list-page.scss @@ -0,0 +1,254 @@ +/* + * 列表页面通用样式 + * 提供现代化的列表页面设计和交互体验 + */ + +/* 列表页面卡片样式 */ +.list-card { + border-radius: 8px; + box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05); + margin-bottom: 16px; + transition: all 0.3s; + + &:hover { + box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.1); + } + + .el-card__header { + padding: 16px 20px; + border-bottom: 1px solid #f0f0f0; + font-weight: 600; + font-size: 16px; + display: flex; + justify-content: space-between; + align-items: center; + } + + .el-card__body { + padding: 16px 20px; + } +} + +/* 搜索表单样式 */ +.search-form { + .el-form-item { + margin-bottom: 16px; + + .el-form-item__label { + font-weight: 500; + color: #606266; + } + + .el-input, .el-select, .el-date-editor { + width: 100%; + + .el-input__inner { + border-radius: 4px; + transition: all 0.3s; + + &:hover, &:focus { + border-color: #1890ff; + } + } + } + } +} + +/* 操作按钮组样式 */ +.action-group { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 16px; + + .left-actions, .right-actions { + display: flex; + gap: 8px; + } + + .el-button { + border-radius: 4px; + transition: all 0.3s; + + &.el-button--primary { + background-color: #1890ff; + border-color: #1890ff; + + &:hover, &:focus { + background-color: #40a9ff; + border-color: #40a9ff; + } + } + + &.el-button--success { + background-color: #52c41a; + border-color: #52c41a; + + &:hover, &:focus { + background-color: #73d13d; + border-color: #73d13d; + } + } + + &.el-button--danger { + background-color: #f5222d; + border-color: #f5222d; + + &:hover, &:focus { + background-color: #ff4d4f; + border-color: #ff4d4f; + } + } + + &.el-button--warning { + background-color: #faad14; + border-color: #faad14; + + &:hover, &:focus { + background-color: #ffc53d; + border-color: #ffc53d; + } + } + } +} + +/* 表格样式 */ +.list-table { + width: 100%; + border-radius: 4px; + overflow: hidden; + + .el-table__header-wrapper th { + background-color: #fafafa; + color: #262626; + font-weight: 600; + height: 48px; + padding: 8px 16px; + border-bottom: 1px solid #f0f0f0; + } + + .el-table__body-wrapper td { + padding: 12px 16px; + border-bottom: 1px solid #f0f0f0; + } + + .el-table__row { + transition: all 0.3s; + + &:hover { + background-color: #f5f7fa; + } + + &.current-row { + background-color: #e6f7ff; + } + } + + .el-table__empty-block { + min-height: 200px; + + .el-table__empty-text { + color: #8c8c8c; + } + } + + .operation-column { + .el-button { + padding: 4px 8px; + + & + .el-button { + margin-left: 8px; + } + } + } +} + +/* 分页样式 */ +.pagination-container { + display: flex; + justify-content: flex-end; + margin-top: 16px; + + .el-pagination { + padding: 0; + font-weight: normal; + + .btn-prev, .btn-next { + border: 1px solid #d9d9d9; + border-radius: 4px; + + &:hover { + color: #1890ff; + border-color: #1890ff; + } + } + + .el-pager li { + border: 1px solid #d9d9d9; + border-radius: 4px; + margin: 0 4px; + + &:hover { + color: #1890ff; + border-color: #1890ff; + } + + &.active { + background-color: #1890ff; + color: #fff; + border-color: #1890ff; + } + } + + .el-pagination__sizes { + margin-right: 16px; + } + } +} + +/* 响应式适配 */ +@media (max-width: 768px) { + .search-form { + .el-form-item { + width: 100%; + } + } + + .action-group { + flex-direction: column; + align-items: flex-start; + + .left-actions, .right-actions { + width: 100%; + margin-bottom: 8px; + } + } + + .list-table { + .el-table__header-wrapper th { + padding: 8px; + } + + .el-table__body-wrapper td { + padding: 8px; + } + } +} + +/* 动画效果 */ +.fade-enter-active, .fade-leave-active { + transition: opacity 0.3s; +} + +.fade-enter, .fade-leave-to { + opacity: 0; +} + +.slide-enter-active, .slide-leave-active { + transition: all 0.3s; +} + +.slide-enter, .slide-leave-to { + transform: translateY(20px); + opacity: 0; +} diff --git a/src/assets/styles/ruoyi.scss b/src/assets/styles/ruoyi.scss index 658be07..4cd0b53 100644 --- a/src/assets/styles/ruoyi.scss +++ b/src/assets/styles/ruoyi.scss @@ -136,7 +136,7 @@ } .el-table__body tr.current-row > td { - background-color: #f3d5d5; + background-color: #d7e4de; } } diff --git a/src/assets/styles/tag.scss b/src/assets/styles/tag.scss new file mode 100644 index 0000000..78a5bd6 --- /dev/null +++ b/src/assets/styles/tag.scss @@ -0,0 +1,321 @@ +/* + * 现代化标签样式 + * 提供更美观、更具表现力的标签设计 + */ + +// 基础标签样式 +.el-tag { + display: inline-flex; + align-items: center; + justify-content: center; + height: auto; + padding: 0 10px; + font-size: 16px; + line-height: 24px; + border-radius: 4px; + font-weight: 600; + white-space: nowrap; + border: none; + transition: all 0.3s; + margin-right: 8px; + + // 关闭图标样式 + .el-tag__close { + color: inherit; + opacity: 0.6; + top: 0; + right: -5px; + + &:hover { + background-color: transparent; + color: inherit; + opacity: 1; + } + } + + // 小尺寸标签 + &.el-tag--small { + height: 20px; + padding: 0 8px; + font-size: 12px; + line-height: 20px; + } + + // 迷你尺寸标签 + &.el-tag--mini { + height: 16px; + padding: 10px; + font-size: 11px; + line-height: 16px; + } + + // 中等尺寸标签 + &.el-tag--medium { + height: 28px; + padding: 0 12px; + font-size: 14px; + line-height: 28px; + } +} + +// 默认标签(灰色) +.el-tag { + background-color: #f5f5f5; + color: #666; + + &:hover { + background-color: #e8e8e8; + } +} + +// 主要标签(蓝色) +.el-tag--primary { + background-color: #e6f7ff; + color: #1890ff; + + &:hover { + background-color: #bae7ff; + } +} + +// 成功标签(绿色) +.el-tag--success { + background-color: #f6ffed; + color: #52c41a; + + &:hover { + background-color: #d9f7be; + } +} + +// 信息标签(青色) +.el-tag--info { + background-color: #f4f4f5; + color: #909399; + + &:hover { + background-color: #e9e9eb; + } +} + +// 警告标签(黄色) +.el-tag--warning { + background-color: #fffbe6; + color: #faad14; + + &:hover { + background-color: #fff1b8; + } +} + +// 危险标签(红色) +.el-tag--danger { + background-color: #fff2f0; + color: #f5222d; + + &:hover { + background-color: #ffccc7; + } +} + +// 深色主题标签 +.el-tag.el-tag--dark { + color: white; + + &.el-tag--primary { + background-color: #1890ff; + + &:hover { + background-color: #40a9ff; + } + } + + &.el-tag--success { + background-color: #52c41a; + + &:hover { + background-color: #73d13d; + } + } + + &.el-tag--info { + background-color: #909399; + + &:hover { + background-color: #a6a9ad; + } + } + + &.el-tag--warning { + background-color: #faad14; + + &:hover { + background-color: #ffc53d; + } + } + + &.el-tag--danger { + background-color: #f5222d; + + &:hover { + background-color: #ff4d4f; + } + } +} + +// 朴素标签样式 +.el-tag.el-tag--plain { + background-color: transparent; + border: 1px solid; + + &.el-tag--primary { + color: #1890ff; + border-color: #91caff; + + &:hover { + background-color: rgba(24, 144, 255, 0.05); + } + } + + &.el-tag--success { + color: #52c41a; + border-color: #b7eb8f; + + &:hover { + background-color: rgba(82, 196, 26, 0.05); + } + } + + &.el-tag--info { + color: #909399; + border-color: #d3d4d6; + + &:hover { + background-color: rgba(144, 147, 153, 0.05); + } + } + + &.el-tag--warning { + color: #faad14; + border-color: #ffe58f; + + &:hover { + background-color: rgba(250, 173, 20, 0.05); + } + } + + &.el-tag--danger { + color: #f5222d; + border-color: #ffa39e; + + &:hover { + background-color: rgba(245, 34, 45, 0.05); + } + } +} + +// 带图标的标签 +.el-tag-with-icon { + .el-icon { + margin-right: 4px; + font-size: 12px; + } +} + +// 可点击的标签 +.el-tag-clickable { + cursor: pointer; + + &:hover { + opacity: 0.85; + } + + &:active { + opacity: 0.7; + } +} + +// 圆角标签 +.el-tag-rounded { + border-radius: 16px; +} + +// 带边框的标签 +.el-tag-bordered { + border: 1px solid; + + &.el-tag--primary { + border-color: #91caff; + } + + &.el-tag--success { + border-color: #b7eb8f; + } + + &.el-tag--info { + border-color: #d3d4d6; + } + + &.el-tag--warning { + border-color: #ffe58f; + } + + &.el-tag--danger { + border-color: #ffa39e; + } +} + +// 状态标签特殊样式 +.status-tag { + padding-left: 18px; + position: relative; + + &::before { + content: ''; + position: absolute; + left: 8px; + top: 50%; + transform: translateY(-50%); + width: 6px; + height: 6px; + border-radius: 50%; + background-color: currentColor; + } +} + +// 动画效果 +.el-tag { + transition: all 0.3s; + + &.fade-enter-active, &.fade-leave-active { + transition: opacity 0.3s; + } + + &.fade-enter, &.fade-leave-to { + opacity: 0; + } +} + +// 标签组样式 +.el-tag-group { + display: inline-flex; + flex-wrap: wrap; + align-items: center; + gap: 8px; + + .el-tag { + margin-right: 0; + } +} + +// 响应式调整 +@media (max-width: 768px) { + .el-tag { + font-size: 11px; + padding: 0 8px; + + &.el-tag--medium { + padding: 0 10px; + } + } +} diff --git a/src/views/basic/product/product.vue b/src/views/basic/product/product.vue index 5c2ffc6..ba9c3a6 100644 --- a/src/views/basic/product/product.vue +++ b/src/views/basic/product/product.vue @@ -290,6 +290,7 @@ +
+

卡片组件样式展示

+

这个页面展示了系统中可用的卡片样式和组件

+ + Element UI 卡片 + + + + +
+ 基础卡片 + 操作按钮 +
+
+ 这是一个基础的 Element UI 卡片示例,展示了标准的卡片样式。 + 卡片可用于容纳文字、列表、表单等内容。 +
+
+
+ + + +
+ 数据展示卡片 +
+
+
256
+
今日访问量
+ +
+
+
+ + + +
+ 列表卡片 +
+
+
+
列表项 {{ item }}
+
这是列表项 {{ item }} 的描述信息
+
+
+
+
+
+ + 自定义卡片 + + + +
+
+
+ + 基础自定义卡片 +
+
+ 更多 +
+
+
+ 这是一个自定义卡片组件,具有更好的视觉效果和交互体验。 + 悬停时会有上浮动画和阴影加深效果。 +
+
+
+ + +
+
+
+ + 渐变标题卡片 +
+
+ 查看 +
+
+
+ 这个卡片使用了渐变色标题,更加醒目和现代化。 + 适合用于重要信息或数据的展示。 +
+
+
+ + +
+
+
+ + 带页脚的卡片 +
+
+ +
+
+
+ 这个卡片包含了页脚部分,可以放置额外的操作按钮或信息。 + 页脚与内容区域有明显的分隔。 +
+ +
+
+
+ + 卡片变体 + + + +
+
+
+ + 边框卡片 +
+
+
+ 使用边框而不是阴影来区分卡片。 +
+
+
+ + +
+
+
+ + 无阴影卡片 +
+
+
+ 没有阴影效果的简洁卡片。 +
+
+
+ + +
+
+
+ + 无悬停效果 +
+
+
+ 悬停时没有上浮效果的卡片。 +
+
+
+ + +
+
+ +
特殊效果卡片
+
+
+
+
+ + 实用卡片布局 + + + +
+
+
+ + 数据统计 +
+
+ + 今日 + 本周 + 本月 + +
+
+
+
+ +
此处放置图表组件
+
+
+
+
+ + +
+
+
+ + 快速操作 +
+
+
+ 新增数据 + 导入数据 + 导出报表 + 刷新缓存 +
+
+ +
+
+
+ + 通知公告 +
+
+ 全部 +
+
+
+
+
系统更新通知 {{ item }}
+
2023-03-0{{ item }} 10:00
+
+
+
+
+
+
+ + + + + diff --git a/src/views/examples/TagExample.vue b/src/views/examples/TagExample.vue new file mode 100644 index 0000000..a1c51b3 --- /dev/null +++ b/src/views/examples/TagExample.vue @@ -0,0 +1,241 @@ + + + + + diff --git a/src/views/index.vue b/src/views/index.vue index 7db69ba..706a018 100644 --- a/src/views/index.vue +++ b/src/views/index.vue @@ -1,210 +1,149 @@ @@ -212,41 +151,36 @@ - - diff --git a/src/views/inventory/InvProducts.vue b/src/views/inventory/InvProducts.vue index 3a1e669..d22569b 100644 --- a/src/views/inventory/InvProducts.vue +++ b/src/views/inventory/InvProducts.vue @@ -1,66 +1,77 @@ @@ -232,69 +262,64 @@ import invProductsDetail from "@/views/inventory/InvProductsDetail.vue"; import addInvRemindSetDialog from "@/views/inventory/addInvRemindSetDialog.vue"; export default { - name: "InvProducts", + name: "ModernInvProducts", + components: { + invProductsDetail, + addInvRemindSetDialog + }, data() { return { showSearch: true, + showSup: true, filterQuery: { - udiCode: null, - nameCode: null, - cpmctymc: null, - ggxh: null, - batchNo: null, - supId: null, - zczbhhzbapzbh: null, - ylqxzcrbarmc: null, - invCode: this.$store.getters.locInvCode, + invCode: "", + nameCode: "", + cpmctymc: "", + ggxh: "", + batchNo: "", + udiCode: "", + zczbhhzbapzbh: "", + ylqxzcrbarmc: "", + supId: "", page: 1, - limit: 10, + limit: 10 }, - list: [], - total: 0, invList: [], - loading: false, - deleteData: { - id: "", - status: 10, - }, - corpLoading: false, - dialogVisible: false, fromOptions: [], - showSup: true, + corpLoading: false, + total: 0, + list: [], + loading: false, detailDialogVisible: false, - inputQuery: { - cpmctymc: null, - nameCode: null, - batchNo: null, - ggxh: null, - productionDate: null, - expireDate: null, - supId: null, - deptCode: null, - invCode: null, - price:null, - }, - addInvRemindSetDialogVisible: null, - invId: null + remindSetDialogVisible: false, + detailRow: null }; }, + created() { + this.getInvList(); + this.getList(); + }, + mounted() { + this.$nextTick(() => { + if (this.$refs.inputRef) { + this.$refs.inputRef.focus(); + } + }); + }, methods: { onReset() { - this.$router.push({ - path: "", - }); this.filterQuery = { - udiCode: null, - nameCode: null, - cpmctymc: null, - ggxh: null, - batchNo: null, - supId: null, - zczbhhzbapzbh: null, - ylqxzcrbarmc: null, - invCode: this.$store.getters.locInvCode, + invCode: "", + nameCode: "", + cpmctymc: "", + ggxh: "", + batchNo: "", + udiCode: "", + zczbhhzbapzbh: "", + ylqxzcrbarmc: "", + supId: "", page: 1, - limit: 10, + limit: 10 }; this.getList(); }, @@ -305,135 +330,100 @@ export default { hideSearch() { this.showSearch = !this.showSearch; }, - handleSizeChange(val) { - this.filterQuery.limit = val; - this.getList(); - }, - handleCurrentChange(val) { - this.filterQuery.page = val; - this.getList(); + enterKey(e) { + this.onSubmit(); }, getList() { this.loading = true; - getProduct(this.filterQuery).then((res) => { + getInvProduct(this.filterQuery).then(response => { this.loading = false; - if (res.code === 20000) { - this.list = res.data.list || []; - this.total = res.data.total || 0; + if (response.code === 20000) { + this.list = response.data.list; + this.total = response.data.total; } else { - this.$message.error(res.message); - this.list = []; - this.total = 0; + this.$message.error(response.msg); } - }).catch((error) => { + }).catch(() => { this.loading = false; - this.$message.error(error.message); - this.list = []; - this.total = 0; - }) + }); }, getInvList() { - let query = { - advanceType: false, - }; - getInvListByUser(query) - .then((response) => { - this.invList = response.data || []; - this.getList(); - }) - .catch(() => { - }); + getInvListByUser().then(response => { + if (response.code === 20000) { + this.invList = response.data; + } else { + this.$message.error(response.msg); + } + }); }, findMethod(key) { - this.corpLoading = true; - this.fromOptions = []; - let params = { - key: key, - corpType: 2, - page: 1, - limit: 20 - }; - getBasicUnitMaintains(params).then((res) => { - this.corpLoading = false; - this.fromOptions = res.data.list || []; - }).catch(() => { - this.corpLoading = false; - }) + if (key) { + this.corpLoading = true; + getCorpList({ + name: key, + page: 1, + limit: 20 + }).then(response => { + this.corpLoading = false; + if (response.code === 20000) { + this.fromOptions = response.data.list; + } else { + this.$message.error(response.msg); + } + }).catch(() => { + this.corpLoading = false; + }); + } else { + this.fromOptions = []; + } }, corpChange(value) { - if (!isBlank(value)) { - this.findMethod(value); - } + this.filterQuery.supId = value; }, detailDialog(row) { + this.detailRow = row; this.detailDialogVisible = true; - this.inputQuery = { - relId: row.relIdFk, - cpmctymc: row.cpmctymc, - nameCode: row.nameCode, - batchNo: row.batchNo, - ggxh: row.ggxh, - productionDate: row.productionDate, - expireDate: row.expireDate, - supId: row.supId, - deptCode: row.deptCode, - invCode: row.invCode, - price: row.price - } }, closeDetailDialog() { this.detailDialogVisible = false; + this.detailRow = null; }, deleteDialog(id) { - this.$confirm("此操作将永久删除此库存信息,是否继续?", "提示", { + this.$confirm('是否确认删除该条库存记录?', "警告", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning" }).then(() => { - this.deleteInvProduct(id); - }).catch(() => { - }); - }, - deleteInvProduct(id) { - let params = {id: id}; - deleteInvProduct(params).then((res) => { - if (res.code === 20000) { - this.$message.success("删除成功!"); - this.getList(); - } else { - this.$message.error(res.message); - } - }).catch((error) => { - this.$message.error(error.message); + deleteInvProduct(id).then(response => { + if (response.code === 20000) { + this.$message.success("删除成功"); + this.getList(); + } else { + this.$message.error(response.msg); + } + }); }); }, invRemindSet(row) { - this.invId = row.id; - this.addInvRemindSetDialogVisible = true; + this.detailRow = row; + this.remindSetDialogVisible = true; }, closeRemindSetDialog() { - this.invId = null; - this.addInvRemindSetDialogVisible = false; - }, - }, - components: { - invProductsDetail, - addInvRemindSetDialog - }, - mounted() { - document.body.ondrop = function (event) { - event.preventDefault(); - event.stopPropagation(); - }; - }, - created() { - this.findMethod(); - this.getInvList(); - this.getList(); - }, + this.remindSetDialogVisible = false; + this.detailRow = null; + } + } }; - + diff --git a/src/views/inventory/modernInvProducts.vue b/src/views/inventory/modernInvProducts.vue new file mode 100644 index 0000000..954eaeb --- /dev/null +++ b/src/views/inventory/modernInvProducts.vue @@ -0,0 +1,428 @@ + + + + + diff --git a/src/views/myLogin.vue b/src/views/myLogin.vue index 4e0cefd..38efb4a 100644 --- a/src/views/myLogin.vue +++ b/src/views/myLogin.vue @@ -1,143 +1,118 @@ @@ -145,57 +120,60 @@ import Verify from "vue2-verify"; import axios from "axios"; import Cookies from "js-cookie"; -import {decrypt, encrypt} from "@/utils/jsencrypt"; import {getTitleConfig} from "@/api/login"; import {forceModifyPasswd, modifyPasswd} from "@/api/auth/authAdmin"; export default { data() { - let validatePwd = (rule, value, callback) => { - if (value === "") { - callback(new Error("请输入密码")); + const validatePass2 = (rule, value, callback) => { + if (value === '') { + callback(new Error('请再次输入密码')); + } else if (value !== this.passwordFormData.newPassword) { + callback(new Error('两次输入密码不一致!')); } else { callback(); } }; + return { - ruleForm: { - userName: "", - pwd: "", - checked: true, - verificationCode: false, - }, + title: "", + subTitle: "", + hospName: "", loginForm: { username: "", password: "", - rememberMe: false, - verificationCode: false, - code: "", - uuid: "", }, rules: { - userName: [ - {required: true, message: "请输入登录名", trigger: "blur"}, - ], - pwd: [{validator: validatePwd, trigger: "blur"}], + username: [{ required: true, message: "请输入账号", trigger: "blur" }], + password: [{ required: true, message: "请输入密码", trigger: "blur" }], }, - isShowPwd: false, // 是否显示密码 - loading: false, // 登录loading - showDialog: false, // 显示dialog - redirect: null, // 回调地址 - hospName: "", - title: "福建省XXX医院", - subTitle: "医院UDI管理系统", + loading: false, + isShowPwd: false, + redirect: undefined, passwordFormVisible: false, passwordFormData: { oldPassword: "", newPassword: "", confirmPassword: "", + token: "", }, + passwordFormDataRules: { + oldPassword: [ + { required: true, message: "请输入旧密码", trigger: "blur" }, + ], + newPassword: [ + { required: true, message: "请输入新密码", trigger: "blur" }, + { min: 6, message: "密码长度不能小于6位", trigger: "blur" }, + ], + confirmPassword: [ + { required: true, message: "请确认密码", trigger: "blur" }, + { validator: validatePass2, trigger: "blur" } + ], + }, + otherQuery: {}, }; }, methods: { - // 滑块验证 verifyAlert(text) { if (text === "success") { this.loginForm.verificationCode = true; @@ -203,152 +181,87 @@ export default { this.loginForm.verificationCode = false; } }, - /* // handleLogin() { - // if (!this.ruleForm.verificationCode) { - // this.$message({ - // message: '请进行验证', - // center: true, - // type: 'warning' - // }); - // return; - // } - // this.$refs["ruleForm"].validate((valid) => { - // if (valid) { - // this.loading = true; - // this.$store - // .dispatch("loginName", this.ruleForm) - // .then((response) => { - // this.loading = false; - // if (response.code !== 20000) { - // console.log("--code = " + response.code); - // this.ruleForm.verificationCode = false; - // this.$refs.checkV.refresh(); - // this.$message.error(response.message); - // return; - // } - // let path = "/"; - // if (this.redirect) { - // path = this.redirect; - // } - // console.log("path = " + path); - // this.$router.push({ - // path: "../main", - // }); - // // window.location.replace(path); - // // this.showDialog = true - // }) - // .catch(() => { - // this.ruleForm.verificationCode = false; - // this.$refs.checkV.refresh(); - // this.loading = false; - // }); - // } else { - // return false; - // } - // }); - // }, */ - getCookie() { const username = Cookies.get("username"); const password = Cookies.get("password"); - // const rememberMe = Cookies.get('rememberMe') - this.loginForm = { - username: username === undefined ? this.loginForm.username : username, - password: - password === undefined ? this.loginForm.password : decrypt(password), - // rememberMe: rememberMe === undefined ? false : Boolean(rememberMe) - }; + if (username && password) { + this.loginForm.username = username; + this.loginForm.password = password; + } }, handleLogin() { - this.$refs.ruleForm.validate((valid) => { + if (!this.loginForm.verificationCode) { + this.$message({ + message: "请完成滑块验证", + type: "warning", + center: true, + }); + return; + } + + this.$refs.loginForm.validate((valid) => { if (valid) { - if (this.loginForm.verificationCode) { - this.loading = true; - if (this.loginForm.rememberMe) { - Cookies.set("username", this.loginForm.username, {expires: 30}); - Cookies.set("password", encrypt(this.loginForm.password), { - expires: 30, - }); - } else { - Cookies.remove("username"); - Cookies.remove("password"); - } - this.$store - .dispatch("Login", this.loginForm) - .then((res) => { - if (res.data.needChangePwd == true) { - this.$confirm('系统检测到您的密码长时间未修改,为保证您的账号安全建议立即修改密码?', '提示', { - confirmButtonText: '立即修改', - cancelButtonText: '忽略', - type: 'warning' - }).then(() => { - this.passwordFormVisible = true; - this.passwordFormData = { - oldPassword: "", - newPassword: "", - confirmPassword: "", - }; - }).catch(() => { - this.$router - .push({path: this.redirect || "/"}) - .catch((res) => { - }); - }); - + this.loading = true; + this.$store + .dispatch("Login", this.loginForm) + .then((res) => { + this.loading = false; + if (res.code === 20000) { + if (res.data.needModifyPassword) { + this.passwordFormVisible = true; + this.passwordFormData.token = res.data.token; } else { - this.$router - .push({path: this.redirect || "/"}) - .catch((res) => { - }); - } - }) - .catch((res) => { - this.loading = false; - this.$message.error(res); - if (this.captchaEnabled) { - this.getCode(); + this.$router.push({path: this.redirect || "/"}); } - }); - } else { - this.$message({ - message: "请向右滑动完成验证", - type: "warning", + } else { + this.$message.error(res.msg); + this.$refs.checkV.refresh(); + } + }) + .catch(() => { + this.loading = false; + this.$refs.checkV.refresh(); }); - } + } else { + return false; } }); }, getTitleConfig() { - getTitleConfig().then(res => { - this.title = res.data.title; - this.subTitle = res.data.subTitle; + getTitleConfig().then((response) => { + this.title = response.data.title; + this.subTitle = response.data.subTitle; }); }, passwdSubmit() { - if (this.passwordFormData.newPassword != this.passwordFormData.confirmPassword) { - this.$message.error("新密码与确认密码不一致!!!!"); - return - } - if (this.passwordFormData.passWord == this.passwordFormData.newPassword) { - this.$message.error("旧密码与新密码不能相同!!!!"); - return - } - this.loading = true; - forceModifyPasswd(this.passwordFormData).then((response) => { - if (response.code === 20000) { - this.loading = false; - this.$confirm('密码重置成功,请点击确定重新登录', '提示', { - confirmButtonText: '确定', - cancelButtonText: '取消', - type: 'warning' - }).then(() => { - this.$store.dispatch('LogOut').then(() => { - location.href = process.env.VUE_APP_CONTEXT_PATH; - }) - }).catch(() => { + this.$refs.passwordFormData.validate((valid) => { + if (!valid) { + return false; + } + + const data = { + oldPassword: this.passwordFormData.oldPassword, + newPassword: this.passwordFormData.newPassword, + }; + + if (this.passwordFormData.token) { + data.token = this.passwordFormData.token; + forceModifyPasswd(data).then((response) => { + if (response.code === 200) { + this.passwordFormVisible = false; + this.$router.push({path: this.redirect || "/"}); + } else { + this.$message.error(response.message); + } }); } else { - this.$message.error(response.message); + modifyPasswd(data).then((response) => { + if (response.code === 200) { + this.passwordFormVisible = false; + } else { + this.$message.error(response.message); + } + }); } }); }, @@ -373,129 +286,231 @@ export default { }; - diff --git a/src/views/purchase/purApply/modernPurApply.vue b/src/views/purchase/purApply/modernPurApply.vue new file mode 100644 index 0000000..6ab74cf --- /dev/null +++ b/src/views/purchase/purApply/modernPurApply.vue @@ -0,0 +1,423 @@ + + + + +