master
parent
20dc0f4048
commit
6ac094725e
|
|
@ -0,0 +1,42 @@
|
||||||
|
#app {
|
||||||
|
.el-button {
|
||||||
|
/*--el-button-text-color oklch(72% .19 231.6) !important;
|
||||||
|
--el-button-bg-color oklch(0.96 0.03 224.26) !important;
|
||||||
|
--el-button-border-color: oklch(0.96 0.03 224.26) !important;
|
||||||
|
|
||||||
|
--el-button-hover-text-color: oklch(72% .19 231.6) !important;
|
||||||
|
--el-button-hover-bg-color: oklch(0.96 0.03 224.26) !important;
|
||||||
|
--el-button-hover-border-color: oklch(0.96 0.03 224.26) !important;*/
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-button--default {
|
||||||
|
--el-button-text-color #5D87FF !important;
|
||||||
|
--el-button-bg-color #FFFFFF !important;
|
||||||
|
--el-button-border-color: #5D87FF !important;
|
||||||
|
|
||||||
|
--el-button-hover-text-color #5D87FF !important;
|
||||||
|
--el-button-hover-bg-color #EEF3FF !important;
|
||||||
|
--el-button-hover-border-color: #5D87FF !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-button--primary {
|
||||||
|
--el-button-text-color #FFFFFF !important;
|
||||||
|
--el-button-bg-color #5D87FF !important;
|
||||||
|
--el-button-border-color: #5D87FF !important;
|
||||||
|
|
||||||
|
--el-button-hover-text-color: #FFFFFF !important;
|
||||||
|
--el-button-hover-bg-color: #8DABFF !important;
|
||||||
|
--el-button-hover-border-color: #8DABFF !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-button--danger {
|
||||||
|
--el-button-text-color #FFFFFF !important;
|
||||||
|
--el-button-bg-color rgb(255, 130, 132) !important;
|
||||||
|
--el-button-border-color: rgb(255, 130, 132) !important;
|
||||||
|
|
||||||
|
--el-button-hover-text-color: #FFFFFF !important;
|
||||||
|
--el-button-hover-bg-color: rgb(255, 130, 132) !important;
|
||||||
|
--el-button-hover-border-color: rgb(255, 130, 132) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
@ -1,43 +1,8 @@
|
||||||
|
@import "root.styl"
|
||||||
|
@import "button.styl"
|
||||||
|
@import "menu.styl"
|
||||||
// 优化 Element Plus 组件库默认样式
|
// 优化 Element Plus 组件库默认样式
|
||||||
|
|
||||||
:root {
|
|
||||||
--custom-radius: 9px;
|
|
||||||
// 系统主色
|
|
||||||
--main-color: #1C6EFF;
|
|
||||||
--el-color-white: white !important;
|
|
||||||
--el-color-black: white !important;
|
|
||||||
--el-color-primary: #1C6EFF !important;
|
|
||||||
--el-button-hover-bg-color: #458FFF !important;
|
|
||||||
--el-button-hover-border-color: #458FFF !important;
|
|
||||||
--el-color-primary-light-3: #458FFF !important;
|
|
||||||
--el-color-danger: #CF171D !important;
|
|
||||||
--el-menu-text-color: #29343D !important;
|
|
||||||
--el-menu-hover-text-color: #29343D !important;
|
|
||||||
--el-menu-bg-color: #FFFFFF !important;
|
|
||||||
--el-menu-hover-bg-color: rgb(204, 204, 204) !important;
|
|
||||||
--el-menu-level: 0;
|
|
||||||
// 输入框边框颜色
|
|
||||||
// --el-border-color: #E4E4E7 !important; // DCDFE6
|
|
||||||
// 按钮粗度
|
|
||||||
--el-font-weight-primary: 400 !important;
|
|
||||||
|
|
||||||
--el-component-custom-height: 32px !important;
|
|
||||||
|
|
||||||
--el-component-size: var(--el-component-custom-height) !important;
|
|
||||||
|
|
||||||
// 边框、按钮圆角...
|
|
||||||
--el-border-radius-base: calc(var(--custom-radius) / 3 + 2px) !important;
|
|
||||||
|
|
||||||
--el-border-radius-small: calc(var(--custom-radius) / 3 + 4px) !important;
|
|
||||||
--el-messagebox-border-radius: calc(var(--custom-radius) / 3 + 4px) !important;
|
|
||||||
--el-popover-border-radius: calc(var(--custom-radius) / 3 + 4px) !important;
|
|
||||||
|
|
||||||
.region .el-radio-button__original-radio:checked + .el-radio-button__inner {
|
|
||||||
color: var(--theme-color) !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// -------------------------------- 修改 el-size=default 组件默认高度 start --------------------------------
|
// -------------------------------- 修改 el-size=default 组件默认高度 start --------------------------------
|
||||||
// 修改 el-button 高度
|
// 修改 el-button 高度
|
||||||
.el-button--default {
|
.el-button--default {
|
||||||
|
|
@ -96,7 +61,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-dialog {
|
.el-dialog {
|
||||||
height 90% !important
|
//height 90% !important
|
||||||
margin 0 !important
|
margin 0 !important
|
||||||
box-sizing border-box !important
|
box-sizing border-box !important
|
||||||
}
|
}
|
||||||
|
|
@ -113,3 +78,44 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.el-input-number {
|
||||||
|
width 100% !important
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-form-item.is-required:not(.is-no-asterisk).asterisk-left > .el-form-item__label-wrap > .el-form-item__label:before, .el-form-item.is-required:not(.is-no-asterisk).asterisk-left > .el-form-item__label:before {
|
||||||
|
position: absolute;
|
||||||
|
top calc(50% - 16px)
|
||||||
|
left 0
|
||||||
|
width 7px !important;
|
||||||
|
text-align: center !important;
|
||||||
|
margin: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-form-item__label {
|
||||||
|
text-align-last: justify;
|
||||||
|
display: inline-block !important;
|
||||||
|
position: relative;
|
||||||
|
padding 0 12px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-form-item.is-error {
|
||||||
|
.a-uploader {
|
||||||
|
.el-upload {
|
||||||
|
&.el-upload--text,
|
||||||
|
&.el-upload--picture,
|
||||||
|
&.el-upload--picture-card {
|
||||||
|
border-color: var(--el-color-danger);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-upload-list__item.is-success:focus .el-upload-list__item-status-label {
|
||||||
|
display: inline-flex !important;
|
||||||
|
opacity: 1 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-upload-list__item.is-success:hover .el-upload-list__item-status-label {
|
||||||
|
display none !important;
|
||||||
|
opacity 0 !important;
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,40 @@
|
||||||
|
#app {
|
||||||
|
.el-menu-item.is-active {
|
||||||
|
background-color #EEF3FF !important
|
||||||
|
color #5D87FF !important
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-menu-item {
|
||||||
|
position relative !important
|
||||||
|
transition: background-color, color .3s ease-in-out !important;
|
||||||
|
border-radius 4px !important
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
width: 4px;
|
||||||
|
height: 0;
|
||||||
|
background-color: #1C6EFF;
|
||||||
|
transition height 0.3s ease-in-out
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-sub-menu__title,
|
||||||
|
.el-menu-item {
|
||||||
|
height: 42px !important;
|
||||||
|
line-height: 42px !important;
|
||||||
|
margin-left: 8px !important;
|
||||||
|
margin-right: 8px !important;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: #F2F4F5 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,21 @@
|
||||||
|
#app {
|
||||||
|
--custom-radius: 9px;
|
||||||
|
--main-color: #5D87FF;
|
||||||
|
--el-color-primary: #5D87FF !important;
|
||||||
|
--el-color-danger: oklch(73% .15 25.3) !important;
|
||||||
|
|
||||||
|
--el-menu-level: 0;
|
||||||
|
--el-font-weight-primary: 400 !important;
|
||||||
|
|
||||||
|
--el-component-custom-height: 32px !important;
|
||||||
|
|
||||||
|
--el-component-size: var(--el-component-custom-height) !important;
|
||||||
|
|
||||||
|
--el-border-radius-base: 4px !important;
|
||||||
|
|
||||||
|
--el-messagebox-border-radius: 8px !important;
|
||||||
|
|
||||||
|
.region .el-radio-button__original-radio:checked + .el-radio-button__inner {
|
||||||
|
color: var(--theme-color) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,29 +1,34 @@
|
||||||
export class MoveHandle {
|
import Strings from '@/common/utils/strings.ts'
|
||||||
public id: string
|
|
||||||
public container: {
|
class MoveHandle {
|
||||||
|
private static MoveHandles = new Map<string, MoveHandle>()
|
||||||
|
|
||||||
|
private readonly id: string
|
||||||
|
private disabled: boolean
|
||||||
|
private container: {
|
||||||
el?: HTMLElement;
|
el?: HTMLElement;
|
||||||
width: number;
|
width: number;
|
||||||
height: number;
|
height: number;
|
||||||
x: number;
|
x: number;
|
||||||
y: number;
|
y: number;
|
||||||
}
|
}
|
||||||
public widget: {
|
private widget: {
|
||||||
el?: HTMLElement;
|
el?: HTMLElement;
|
||||||
width: number;
|
width: number;
|
||||||
height: number;
|
height: number;
|
||||||
x: number;
|
x: number;
|
||||||
y: number;
|
y: number;
|
||||||
}
|
}
|
||||||
public triggerArea?: HTMLElement
|
private triggerArea?: HTMLElement
|
||||||
public startPoint: {
|
private startPoint: {
|
||||||
x: number;
|
x: number;
|
||||||
y: number;
|
y: number;
|
||||||
}
|
}
|
||||||
public offset: {
|
private offset: {
|
||||||
x: number;
|
x: number;
|
||||||
y: number;
|
y: number;
|
||||||
}
|
}
|
||||||
public dragging: boolean
|
private dragging: boolean
|
||||||
|
|
||||||
constructor(id: string, container?: HTMLElement, widget?: HTMLElement, triggerArea?: HTMLElement) {
|
constructor(id: string, container?: HTMLElement, widget?: HTMLElement, triggerArea?: HTMLElement) {
|
||||||
this.id = id
|
this.id = id
|
||||||
|
|
@ -32,14 +37,31 @@ export class MoveHandle {
|
||||||
this.startPoint = {x: 0, y: 0}
|
this.startPoint = {x: 0, y: 0}
|
||||||
this.offset = {x: 0, y: 0}
|
this.offset = {x: 0, y: 0}
|
||||||
this.dragging = false
|
this.dragging = false
|
||||||
|
this.disabled = true
|
||||||
this.setContainer(container)
|
this.setContainer(container)
|
||||||
.setWidget(widget)
|
.setWidget(widget)
|
||||||
.setTriggerArea(triggerArea)
|
.setTriggerArea(triggerArea)
|
||||||
MoveHandles.set(this.id, this)
|
MoveHandle.MoveHandles.set(this.id, this)
|
||||||
}
|
}
|
||||||
|
|
||||||
setContainer(el?: HTMLElement) {
|
public static of(id: string, container?: HTMLElement, widget?: HTMLElement, triggerArea?: HTMLElement) {
|
||||||
if (MoveHandleIns === this) return this
|
if (Strings.isBlank(id)) throw new Error('Id 不能为空')
|
||||||
|
return MoveHandle.MoveHandles.get(id) ?? new MoveHandle(id, container, widget, triggerArea)
|
||||||
|
}
|
||||||
|
|
||||||
|
public handleEvent(e: Event) {
|
||||||
|
if (this.disabled) return
|
||||||
|
if (e.type === 'mousedown') {
|
||||||
|
this.handlerMousedown(e)
|
||||||
|
} else if (e.type === 'mouseup') {
|
||||||
|
this.handlerMouseup()
|
||||||
|
} else if (e.type === 'mousemove') {
|
||||||
|
this.handlerMove(e)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
public setContainer(el?: HTMLElement) {
|
||||||
|
if (!this.disabled) throw new Error('不能在启用状态下设置容器')
|
||||||
this.container.el = el
|
this.container.el = el
|
||||||
if (el != null) {
|
if (el != null) {
|
||||||
const containerRect = el.getBoundingClientRect()
|
const containerRect = el.getBoundingClientRect()
|
||||||
|
|
@ -51,8 +73,8 @@ export class MoveHandle {
|
||||||
return this
|
return this
|
||||||
}
|
}
|
||||||
|
|
||||||
setWidget(el?: HTMLElement) {
|
public setWidget(el?: HTMLElement) {
|
||||||
if (MoveHandleIns === this) return this
|
if (!this.disabled) throw new Error('不能在启用状态下设置组件')
|
||||||
this.widget.el = el
|
this.widget.el = el
|
||||||
if (el != null) {
|
if (el != null) {
|
||||||
const widgetRect = el.getBoundingClientRect()
|
const widgetRect = el.getBoundingClientRect()
|
||||||
|
|
@ -64,55 +86,84 @@ export class MoveHandle {
|
||||||
return this
|
return this
|
||||||
}
|
}
|
||||||
|
|
||||||
setTriggerArea(el?: HTMLElement) {
|
public setTriggerArea(el?: HTMLElement) {
|
||||||
if (MoveHandleIns === this) return this
|
if (!this.disabled) throw new Error('不能在启用状态下设置触发区域')
|
||||||
this.triggerArea?.removeEventListener('mousedown', handlerMousedown)
|
this.triggerArea?.removeEventListener('mousedown', this)
|
||||||
el?.addEventListener('mousedown', handlerMousedown)
|
el?.addEventListener('mousedown', this)
|
||||||
this.triggerArea = el
|
this.triggerArea = el
|
||||||
return this
|
return this
|
||||||
}
|
}
|
||||||
|
|
||||||
destroy() {
|
public destroy() {
|
||||||
MoveHandles.delete(this.id)
|
MoveHandle.MoveHandles.delete(this.id)
|
||||||
this.disable()
|
this.disable()
|
||||||
this.setContainer()
|
this.setContainer()
|
||||||
.setWidget()
|
.setWidget()
|
||||||
.setTriggerArea()
|
.setTriggerArea()
|
||||||
}
|
}
|
||||||
|
|
||||||
enable() {
|
public enable() {
|
||||||
if (this.container.el == null
|
if (this.container.el == null
|
||||||
|| this.widget.el == null
|
|| this.widget.el == null
|
||||||
|| this.triggerArea == null) {
|
|| this.triggerArea == null) {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
MoveHandleIns = this
|
this.disabled = false
|
||||||
}
|
}
|
||||||
|
|
||||||
disable() {
|
public disable() {
|
||||||
if (MoveHandleIns === this) MoveHandleIns = null
|
this.disabled = true
|
||||||
return this
|
return this
|
||||||
}
|
}
|
||||||
|
|
||||||
|
private handlerMove(e: Event) {
|
||||||
|
if (!this.dragging
|
||||||
|
|| this.widget.el == null
|
||||||
|
) return
|
||||||
|
const mouseEvent = e as MouseEvent
|
||||||
|
|
||||||
|
let dx = mouseEvent.clientX - this.startPoint.x
|
||||||
|
let dy = mouseEvent.clientY - this.startPoint.y
|
||||||
|
// 左右边界
|
||||||
|
if (dx < 0) {
|
||||||
|
const min_dx = this.container.x - this.widget.x
|
||||||
|
dx = Math.max(dx, min_dx)
|
||||||
|
} else {
|
||||||
|
const max_dx = (this.container.x + this.container.width) - (this.widget.x + this.widget.width)
|
||||||
|
dx = Math.min(dx, max_dx)
|
||||||
|
}
|
||||||
|
// 上下边界
|
||||||
|
if (dy < 0) {
|
||||||
|
const min_dy = this.container.y - this.widget.y
|
||||||
|
dy = Math.max(dy, min_dy)
|
||||||
|
} else {
|
||||||
|
const max_dy = (this.container.y + this.container.height) - (this.widget.y + this.widget.height)
|
||||||
|
dy = Math.min(dy, max_dy)
|
||||||
|
}
|
||||||
|
let newOffsetX = this.offset.x + dx
|
||||||
|
let newOffsetY = this.offset.y + dy
|
||||||
|
this.widget.el.style.transform = `translate(${newOffsetX}px, ${newOffsetY}px)`
|
||||||
}
|
}
|
||||||
|
|
||||||
let MoveHandleIns: MoveHandle | null = null
|
private handlerMouseup() {
|
||||||
|
this.dragging = false
|
||||||
|
document.removeEventListener('mousemove', this)
|
||||||
|
document.removeEventListener('mouseup', this)
|
||||||
|
}
|
||||||
|
|
||||||
const MoveHandles: Map<string, MoveHandle> = new Map()
|
private handlerMousedown(e: Event) {
|
||||||
|
if (this.container.el == null
|
||||||
function handlerMousedown(e: Event) {
|
|| this.widget.el == null
|
||||||
if (MoveHandleIns == null
|
|
||||||
|| MoveHandleIns.container.el == null
|
|
||||||
|| MoveHandleIns.widget.el == null
|
|
||||||
) return
|
) return
|
||||||
const mouseEvent = e as MouseEvent
|
const mouseEvent = e as MouseEvent
|
||||||
mouseEvent.preventDefault()
|
mouseEvent.preventDefault()
|
||||||
mouseEvent.stopPropagation()
|
mouseEvent.stopPropagation()
|
||||||
|
|
||||||
MoveHandleIns.dragging = true
|
this.dragging = true
|
||||||
MoveHandleIns.startPoint.x = mouseEvent.clientX
|
this.startPoint.x = mouseEvent.clientX
|
||||||
MoveHandleIns.startPoint.y = mouseEvent.clientY
|
this.startPoint.y = mouseEvent.clientY
|
||||||
|
|
||||||
const transform = window.getComputedStyle(MoveHandleIns.widget.el).transform
|
const transform = window.getComputedStyle(this.widget.el).transform
|
||||||
let translateX = 0
|
let translateX = 0
|
||||||
let translateY = 0
|
let translateY = 0
|
||||||
|
|
||||||
|
|
@ -121,64 +172,26 @@ function handlerMousedown(e: Event) {
|
||||||
translateX = matrix.e
|
translateX = matrix.e
|
||||||
translateY = matrix.f
|
translateY = matrix.f
|
||||||
} else {
|
} else {
|
||||||
MoveHandleIns.widget.el.style.transform = 'translate(0, 0)'
|
this.widget.el.style.transform = 'translate(0, 0)'
|
||||||
}
|
}
|
||||||
|
|
||||||
MoveHandleIns.offset.x = translateX
|
this.offset.x = translateX
|
||||||
MoveHandleIns.offset.y = translateY
|
this.offset.y = translateY
|
||||||
|
|
||||||
const containerRect = MoveHandleIns.container.el.getBoundingClientRect()
|
const containerRect = this.container.el.getBoundingClientRect()
|
||||||
const widgetRect = MoveHandleIns.widget.el.getBoundingClientRect()
|
const widgetRect = this.widget.el.getBoundingClientRect()
|
||||||
MoveHandleIns.container.width = containerRect.width
|
this.container.width = containerRect.width
|
||||||
MoveHandleIns.container.height = containerRect.height
|
this.container.height = containerRect.height
|
||||||
MoveHandleIns.container.x = containerRect.x
|
this.container.x = containerRect.x
|
||||||
MoveHandleIns.container.y = containerRect.y
|
this.container.y = containerRect.y
|
||||||
|
|
||||||
MoveHandleIns.widget.width = widgetRect.width
|
this.widget.width = widgetRect.width
|
||||||
MoveHandleIns.widget.height = widgetRect.height
|
this.widget.height = widgetRect.height
|
||||||
MoveHandleIns.widget.x = widgetRect.x
|
this.widget.x = widgetRect.x
|
||||||
MoveHandleIns.widget.y = widgetRect.y
|
this.widget.y = widgetRect.y
|
||||||
document.addEventListener('mouseup', handlerMouseup)
|
document.addEventListener('mouseup', this)
|
||||||
document.addEventListener('mousemove', handlerMove)
|
document.addEventListener('mousemove', this)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function handlerMove(e: Event) {
|
export default MoveHandle.of
|
||||||
if (MoveHandleIns == null
|
|
||||||
|| !MoveHandleIns.dragging
|
|
||||||
|| MoveHandleIns.widget.el == null
|
|
||||||
) return
|
|
||||||
const mouseEvent = e as MouseEvent
|
|
||||||
|
|
||||||
let dx = mouseEvent.clientX - MoveHandleIns.startPoint.x
|
|
||||||
let dy = mouseEvent.clientY - MoveHandleIns.startPoint.y
|
|
||||||
// 左右边界
|
|
||||||
if (dx < 0) {
|
|
||||||
const min_dx = MoveHandleIns.container.x - MoveHandleIns.widget.x
|
|
||||||
dx = Math.max(dx, min_dx)
|
|
||||||
} else {
|
|
||||||
const max_dx = (MoveHandleIns.container.x + MoveHandleIns.container.width) - (MoveHandleIns.widget.x + MoveHandleIns.widget.width)
|
|
||||||
dx = Math.min(dx, max_dx)
|
|
||||||
}
|
|
||||||
// 上下边界
|
|
||||||
if (dy < 0) {
|
|
||||||
const min_dy = MoveHandleIns.container.y - MoveHandleIns.widget.y
|
|
||||||
dy = Math.max(dy, min_dy)
|
|
||||||
} else {
|
|
||||||
const max_dy = (MoveHandleIns.container.y + MoveHandleIns.container.height) - (MoveHandleIns.widget.y + MoveHandleIns.widget.height)
|
|
||||||
dy = Math.min(dy, max_dy)
|
|
||||||
}
|
|
||||||
let newOffsetX = MoveHandleIns.offset.x + dx
|
|
||||||
let newOffsetY = MoveHandleIns.offset.y + dy
|
|
||||||
MoveHandleIns.widget.el.style.transform = `translate(${newOffsetX}px, ${newOffsetY}px)`
|
|
||||||
}
|
|
||||||
|
|
||||||
function handlerMouseup() {
|
|
||||||
if (MoveHandleIns == null) return
|
|
||||||
MoveHandleIns.dragging = false
|
|
||||||
document.removeEventListener('mousemove', handlerMove)
|
|
||||||
document.removeEventListener('mouseup', handlerMouseup)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function (id: string, container?: HTMLElement, widget?: HTMLElement, triggerArea?: HTMLElement) {
|
|
||||||
return MoveHandles.get(id) ?? new MoveHandle(id, container, widget, triggerArea)
|
|
||||||
}
|
|
||||||
|
|
|
||||||
|
|
@ -6,12 +6,16 @@ const props = withDefaults(defineProps<{
|
||||||
show: boolean
|
show: boolean
|
||||||
title: string
|
title: string
|
||||||
closeOnSuccess?: boolean
|
closeOnSuccess?: boolean
|
||||||
maxHeight?: string
|
width?: string
|
||||||
|
closeBtnText?: string
|
||||||
|
submitBtnText?: string
|
||||||
closed?: () => void
|
closed?: () => void
|
||||||
submitHandler: () => Promise<any>
|
submitHandler: () => Promise<any>
|
||||||
}>(), {
|
}>(), {
|
||||||
maxHeight: '90%',
|
width: 'fit-content',
|
||||||
closeOnSuccess: true,
|
closeOnSuccess: true,
|
||||||
|
closeBtnText: '关闭',
|
||||||
|
submitBtnText: '提交',
|
||||||
closed() {
|
closed() {
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|
@ -82,7 +86,7 @@ onUnmounted(() => {
|
||||||
:title="title"
|
:title="title"
|
||||||
class="draggable-dialog"
|
class="draggable-dialog"
|
||||||
destroy-on-close
|
destroy-on-close
|
||||||
width="fit-content" @close="closed"
|
:width="width" @close="closed"
|
||||||
@closed="closedHandler"
|
@closed="closedHandler"
|
||||||
@opened="openedHandler"
|
@opened="openedHandler"
|
||||||
@update:model-value="showDialog = $event"
|
@update:model-value="showDialog = $event"
|
||||||
|
|
@ -91,8 +95,8 @@ onUnmounted(() => {
|
||||||
<slot/>
|
<slot/>
|
||||||
</ElScrollbar>
|
</ElScrollbar>
|
||||||
<template #footer>
|
<template #footer>
|
||||||
<ElButton @click="showDialog = false">关闭</ElButton>
|
<ElButton @click="showDialog = false">{{ closeBtnText }}</ElButton>
|
||||||
<ElButton :loading="submiting" type="primary" @click="submit">提交</ElButton>
|
<ElButton :loading="submiting" type="primary" @click="submit">{{ submitBtnText }}</ElButton>
|
||||||
</template>
|
</template>
|
||||||
</ElDialog>
|
</ElDialog>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -155,7 +155,7 @@ const displayData = computed(() => {
|
||||||
<template #dropdown>
|
<template #dropdown>
|
||||||
<div class="drop-table-content">
|
<div class="drop-table-content">
|
||||||
<ElForm inline @submit.prevent="paging">
|
<ElForm inline @submit.prevent="paging">
|
||||||
<slot name="search_form">
|
<slot :searchForm="searchForm" name="searchForm">
|
||||||
<ElFormItem>
|
<ElFormItem>
|
||||||
<ElInput
|
<ElInput
|
||||||
v-model="searchForm.keywords"
|
v-model="searchForm.keywords"
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,76 @@
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import Times from '@/common/utils/times.ts'
|
||||||
|
|
||||||
|
const props = withDefaults(
|
||||||
|
defineProps<{
|
||||||
|
changeHandler?: () => void
|
||||||
|
modelValue: [ string | undefined, string | undefined ] | undefined | null
|
||||||
|
}>(),
|
||||||
|
{
|
||||||
|
changeHandler: () => {
|
||||||
|
},
|
||||||
|
},
|
||||||
|
)
|
||||||
|
|
||||||
|
const emits = defineEmits([ 'update:modelValue' ])
|
||||||
|
const times = computed({
|
||||||
|
get: () => (props.modelValue == null || props.modelValue.length !== 2 || props.modelValue[0] == null || props.modelValue[1] == null) ? null : [ Times.parse(props.modelValue[0]).toJSDate(), Times.parse(props.modelValue[1]).toJSDate() ],
|
||||||
|
set: (val) => {
|
||||||
|
emits('update:modelValue', val == null ? [ undefined, undefined ] : val.map((item) => item == null ? null : Times.format(item)))
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
const createTimeDefaultTime: [ Date, Date ] = [
|
||||||
|
Times.toDate(Times.beginOfDay()),
|
||||||
|
Times.toDate(Times.endOfDay()),
|
||||||
|
]
|
||||||
|
const shortcuts = [
|
||||||
|
{
|
||||||
|
text: '今天',
|
||||||
|
value: () => [ Times.toDate(Times.beginOfDay()), Times.toDate(Times.endOfDay()) ],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '昨天',
|
||||||
|
value: () => {
|
||||||
|
const time = Times.now().minus({day: 1})
|
||||||
|
return [ Times.toDate(Times.beginOfDay(time)), Times.toDate(Times.endOfDay(time)) ]
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '本周',
|
||||||
|
value: () => {
|
||||||
|
return [ Times.toDate(Times.beginOfWeek()), Times.toDate(Times.endOfWeek()) ]
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '本月',
|
||||||
|
value: () => {
|
||||||
|
return [ Times.toDate(Times.beginOfMonth()), Times.toDate(Times.endOfMonth()) ]
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '今年',
|
||||||
|
value: () => {
|
||||||
|
return [ Times.toDate(Times.beginOfYear()), Times.toDate(Times.endOfYear()) ]
|
||||||
|
},
|
||||||
|
},
|
||||||
|
]
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<ElDatePicker
|
||||||
|
v-model="times"
|
||||||
|
:default-time="createTimeDefaultTime"
|
||||||
|
:shortcuts="shortcuts"
|
||||||
|
clearable
|
||||||
|
end-placeholder="结束时间"
|
||||||
|
start-placeholder="开始时间"
|
||||||
|
type="datetimerange"
|
||||||
|
@change="changeHandler"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="stylus" scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -467,8 +467,8 @@ onMounted(doSearch)
|
||||||
:deep(.el-button--default) {
|
:deep(.el-button--default) {
|
||||||
width 32px
|
width 32px
|
||||||
color #4D5875
|
color #4D5875
|
||||||
background-color #E6EAEB8B
|
background-color #F1F4F4
|
||||||
border-color #E6EAEB8B
|
border-color #F1F4F4
|
||||||
margin 0
|
margin 0
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
|
|
@ -541,6 +541,19 @@ onMounted(doSearch)
|
||||||
padding: 8px;
|
padding: 8px;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
//#ebf0ff
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-button--default).icon-btn {
|
||||||
|
color oklch(72% .19 231.6)
|
||||||
|
background-color oklch(0.96 0.03 224.26)
|
||||||
|
border-color oklch(0.96 0.03 224.26)
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-button--danger).icon-btn {
|
||||||
|
color oklch(73% .15 25.3)
|
||||||
|
background-color oklch(0.96 0.02 22.09)
|
||||||
|
border-color oklch(0.96 0.02 22.09)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -17,11 +17,15 @@ const props = withDefaults(defineProps<{
|
||||||
limit?: number
|
limit?: number
|
||||||
uploadProps?: Partial<Omit<UploadProps, 'httpRequest' | 'crossorigin' | 'multiple'
|
uploadProps?: Partial<Omit<UploadProps, 'httpRequest' | 'crossorigin' | 'multiple'
|
||||||
| 'data' | 'action' | 'headers' | 'limit' | 'onError'
|
| 'data' | 'action' | 'headers' | 'limit' | 'onError'
|
||||||
| 'onRemove' | 'onSuccess' | 'onPreview' | 'fileList' | 'beforeUpload' | 'beforeRemove' | 'onChange' | 'onProgress' | 'name'>>
|
| 'onRemove' | 'onSuccess' | 'onPreview' | 'fileList' | 'beforeUpload' | 'beforeRemove' | 'onChange' | 'onProgress' | 'name' | 'drag'>>
|
||||||
}>(), {
|
}>(), {
|
||||||
limit: 1,
|
limit: 1,
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
uploadProps: {},
|
uploadProps: {
|
||||||
|
// @ts-ignore
|
||||||
|
listType: 'picture-card',
|
||||||
|
accept: 'image/*',
|
||||||
|
},
|
||||||
})
|
})
|
||||||
|
|
||||||
const multiple = computed(() => props.limit > 1)
|
const multiple = computed(() => props.limit > 1)
|
||||||
|
|
@ -35,6 +39,10 @@ const uploadUrl = serverBaseUrl + '/oss/upload'
|
||||||
|
|
||||||
const filesList = ref<UploadUserFile[]>([])
|
const filesList = ref<UploadUserFile[]>([])
|
||||||
|
|
||||||
|
const showUploadBtnDisplay = computed(() => {
|
||||||
|
return multiple.value || filesList.value.length === 0 ? 'inline-flex' : 'none'
|
||||||
|
})
|
||||||
|
|
||||||
function uploadSuccHandler(response: R<string>, _: UploadFile, uploadFiles: UploadFiles) {
|
function uploadSuccHandler(response: R<string>, _: UploadFile, uploadFiles: UploadFiles) {
|
||||||
if (props.limit === 1) {
|
if (props.limit === 1) {
|
||||||
emit('update:file', response.data)
|
emit('update:file', response.data)
|
||||||
|
|
@ -85,10 +93,10 @@ defineExpose({
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
<ElTooltip :disabled="showUploadBtnDisplay==='none'" content="点击或拖拽文件到此处" placement="top">
|
||||||
<ElUpload
|
<ElUpload
|
||||||
v-model:file-list="filesList"
|
v-model:file-list="filesList"
|
||||||
:action="uploadUrl"
|
:action="uploadUrl"
|
||||||
|
|
@ -96,24 +104,24 @@ defineExpose({
|
||||||
:limit="limit"
|
:limit="limit"
|
||||||
:multiple="multiple"
|
:multiple="multiple"
|
||||||
:on-error="uploadFailHandler"
|
:on-error="uploadFailHandler"
|
||||||
|
:on-preview="handlePictureCardPreview"
|
||||||
:on-remove="rmFileHandler"
|
:on-remove="rmFileHandler"
|
||||||
:on-success="uploadSuccHandler"
|
:on-success="uploadSuccHandler"
|
||||||
:on-preview="handlePictureCardPreview"
|
|
||||||
class="a-uploader"
|
class="a-uploader"
|
||||||
|
drag
|
||||||
v-bind="uploadProps">
|
v-bind="uploadProps">
|
||||||
<slot>
|
<slot>
|
||||||
<ElIcon class="default-icon">
|
<ElIcon class="default-icon">
|
||||||
<ElIconPlus/>
|
<ElIconPlus/>
|
||||||
</ElIcon>
|
</ElIcon>
|
||||||
</slot>
|
</slot>
|
||||||
<template #tip>
|
|
||||||
<slot name="tip"/>
|
|
||||||
</template>
|
|
||||||
</ElUpload>
|
</ElUpload>
|
||||||
|
</ElTooltip>
|
||||||
<ElImageViewer
|
<ElImageViewer
|
||||||
v-if="showPreview"
|
v-if="showPreview"
|
||||||
:url-list="previewList"
|
:url-list="previewList"
|
||||||
show-progress
|
show-progress
|
||||||
|
teleported
|
||||||
style="position: absolute"
|
style="position: absolute"
|
||||||
@close="showPreview = false"
|
@close="showPreview = false"
|
||||||
/>
|
/>
|
||||||
|
|
@ -121,10 +129,59 @@ defineExpose({
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
.a-uploader {
|
.a-uploader {
|
||||||
|
width: 148px;
|
||||||
|
height: 148px;
|
||||||
|
|
||||||
:deep(.el-upload) {
|
:deep(.el-upload) {
|
||||||
background-color white
|
background-color white
|
||||||
|
|
||||||
|
&.el-upload--text,
|
||||||
|
&.el-upload--picture,
|
||||||
|
&.el-upload--picture-card {
|
||||||
|
display v-bind(showUploadBtnDisplay)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&.el-upload--text,
|
||||||
|
&.el-upload--picture {
|
||||||
|
align-items: center;
|
||||||
|
border: 1px dashed var(--el-border-color-darker)
|
||||||
|
border-radius: 6px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
cursor: pointer;
|
||||||
|
height: var(--el-upload-picture-card-size);
|
||||||
|
justify-content: center;
|
||||||
|
vertical-align: top;
|
||||||
|
width: var(--el-upload-picture-card-size);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border-color: var(--el-color-primary);
|
||||||
|
color: var(--el-color-primary);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-upload-list) {
|
||||||
|
margin 0
|
||||||
|
|
||||||
|
.el-upload-list__item.is-success {
|
||||||
|
margin 0
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-icon--close-tip) {
|
||||||
|
display none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-upload-list--picture) {
|
||||||
|
.el-upload-list__item-info {
|
||||||
|
flex: 1;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
:deep(.el-upload-dragger) {
|
:deep(.el-upload-dragger) {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
|
||||||
|
|
@ -120,6 +120,7 @@ function handleCommand(command: 'closeCurrent' | 'closeOther' | 'closeAll') {
|
||||||
background-color white
|
background-color white
|
||||||
border-radius 5px
|
border-radius 5px
|
||||||
text-wrap: nowrap;
|
text-wrap: nowrap;
|
||||||
|
color #7987A1
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
content ''
|
content ''
|
||||||
|
|
@ -161,6 +162,7 @@ function handleCommand(command: 'closeCurrent' | 'closeOther' | 'closeAll') {
|
||||||
height 14px !important
|
height 14px !important
|
||||||
line-height 14px
|
line-height 14px
|
||||||
border-radius 50%
|
border-radius 50%
|
||||||
|
color #7987A1
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color var(--el-color-danger)
|
color var(--el-color-danger)
|
||||||
|
|
|
||||||
|
|
@ -60,42 +60,6 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
:global(.el-menu-item):global(.is-active) {
|
|
||||||
background-color #E8F4FF !important
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
:global(.el-menu-item) {
|
|
||||||
position relative !important
|
|
||||||
transition: background-color, color .3s ease-in-out !important;
|
|
||||||
border-radius 4px !important
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
width: 4px;
|
|
||||||
height: 0;
|
|
||||||
background-color: #1C6EFF;
|
|
||||||
transition height 0.3s ease-in-out
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
:global(.el-sub-menu__title),
|
|
||||||
:global(.el-menu-item) {
|
|
||||||
height: 42px !important;
|
|
||||||
line-height: 42px !important;
|
|
||||||
margin-left: 8px !important;
|
|
||||||
margin-right: 8px !important;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: #F2F4F5 !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.a-icon {
|
.a-icon {
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
|
|
|
||||||
|
|
@ -3,6 +3,7 @@
|
||||||
ref="formPage"
|
ref="formPage"
|
||||||
:action-column="actionColumn"
|
:action-column="actionColumn"
|
||||||
:left-tools="leftTools"
|
:left-tools="leftTools"
|
||||||
|
:default-search-form="{createTimes:[undefined,undefined]}"
|
||||||
:paging="paging">
|
:paging="paging">
|
||||||
<template #searchFormItem="{ searchForm }">
|
<template #searchFormItem="{ searchForm }">
|
||||||
<ElFormItem label="业务类型">
|
<ElFormItem label="业务类型">
|
||||||
|
|
@ -14,16 +15,7 @@
|
||||||
<ElInput v-model="searchForm.categoryName" clearable placeholder="分类名称" @clear="research"/>
|
<ElInput v-model="searchForm.categoryName" clearable placeholder="分类名称" @clear="research"/>
|
||||||
</ElFormItem>
|
</ElFormItem>
|
||||||
<ElFormItem label="创建时间">
|
<ElFormItem label="创建时间">
|
||||||
<ElDatePicker
|
<ADtPicker v-model="searchForm.createTimes" :change-handler="research"/>
|
||||||
v-model="searchForm.createTimes"
|
|
||||||
:default-time="createTimeDefaultTime"
|
|
||||||
:shortcuts="shortcuts"
|
|
||||||
clearable
|
|
||||||
end-placeholder="结束时间"
|
|
||||||
start-placeholder="开始时间"
|
|
||||||
type="datetimerange"
|
|
||||||
@change="research"
|
|
||||||
/>
|
|
||||||
</ElFormItem>
|
</ElFormItem>
|
||||||
</template>
|
</template>
|
||||||
<template #simpleSearchFormItem="{ searchForm }">
|
<template #simpleSearchFormItem="{ searchForm }">
|
||||||
|
|
@ -59,14 +51,10 @@ import FormPage, {
|
||||||
type ActionColumnType,
|
type ActionColumnType,
|
||||||
type ToolType,
|
type ToolType,
|
||||||
} from '@/components/page/FormPage.vue'
|
} from '@/components/page/FormPage.vue'
|
||||||
import Times from '@/common/utils/times.ts'
|
import ADtPicker from '@/components/a-dt-picker/ADtPicker.vue'
|
||||||
|
|
||||||
const goodsCategoryFormIns = useTemplateRef<InstanceType<typeof GoodsCategoryForm>>('goodsCategoryForm')
|
const goodsCategoryFormIns = useTemplateRef<InstanceType<typeof GoodsCategoryForm>>('goodsCategoryForm')
|
||||||
const formPageIns = useTemplateRef<ComponentExposed<typeof FormPage>>('formPage')
|
const formPageIns = useTemplateRef<ComponentExposed<typeof FormPage>>('formPage')
|
||||||
const createTimeDefaultTime: [ Date, Date ] = [
|
|
||||||
Times.toDate(Times.beginOfDay()),
|
|
||||||
Times.toDate(Times.endOfDay()),
|
|
||||||
]
|
|
||||||
const bizList = [
|
const bizList = [
|
||||||
{
|
{
|
||||||
value: 'ZaiShengPin',
|
value: 'ZaiShengPin',
|
||||||
|
|
@ -82,37 +70,6 @@ const bizList = [
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
|
|
||||||
const shortcuts = [
|
|
||||||
{
|
|
||||||
text: '今天',
|
|
||||||
value: () => [ Times.toDate(Times.beginOfDay()), Times.toDate(Times.endOfDay()) ],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
text: '昨天',
|
|
||||||
value: () => {
|
|
||||||
const time = Times.now().minus({day: 1})
|
|
||||||
return [ Times.toDate(Times.beginOfDay(time)), Times.toDate(Times.endOfDay(time)) ]
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
text: '本周',
|
|
||||||
value: () => {
|
|
||||||
return [ Times.toDate(Times.beginOfWeek()), Times.toDate(Times.endOfWeek()) ]
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
text: '本月',
|
|
||||||
value: () => {
|
|
||||||
return [ Times.toDate(Times.beginOfMonth()), Times.toDate(Times.endOfMonth()) ]
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
text: '今年',
|
|
||||||
value: () => {
|
|
||||||
return [ Times.toDate(Times.beginOfYear()), Times.toDate(Times.endOfYear()) ]
|
|
||||||
},
|
|
||||||
},
|
|
||||||
]
|
|
||||||
const leftTools: ToolType[] = [
|
const leftTools: ToolType[] = [
|
||||||
{
|
{
|
||||||
icon: 'Plus',
|
icon: 'Plus',
|
||||||
|
|
@ -158,8 +115,8 @@ function paging(param: GoodsCategoryTypes.SearchGoodsCategoryParam) {
|
||||||
return GoodsCategoryApi.paging({
|
return GoodsCategoryApi.paging({
|
||||||
bizType: param.bizType,
|
bizType: param.bizType,
|
||||||
categoryName: param.categoryName,
|
categoryName: param.categoryName,
|
||||||
createTimeStart: param.createTimes?.[0] ? Times.format(param.createTimes[0]) : undefined,
|
createTimeStart: param.createTimes?.[0],
|
||||||
createTimeEnd: param.createTimes?.[1] ? Times.format(param.createTimes[1]) : undefined,
|
createTimeEnd: param.createTimes?.[1],
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -3,39 +3,24 @@
|
||||||
v-model:show="showDialog"
|
v-model:show="showDialog"
|
||||||
:closed="dialogCloseHandler"
|
:closed="dialogCloseHandler"
|
||||||
:submit-handler="submitHandler"
|
:submit-handler="submitHandler"
|
||||||
title="产品分类"
|
:title="status === 'add' ? '新建产品分类' : '修改产品分类'"
|
||||||
>
|
>
|
||||||
<ElForm :model="formData" :rules="rules" ref="goodsCategoryForm" class="form-panel" label-width="auto">
|
<ElForm ref="goodsCategoryForm" :model="formData" :rules="rules" class="form-panel" label-width="80px">
|
||||||
<ElFormItem label-width="90" label="业务类型" prop="bizType">
|
<ElFormItem label="图片" prop="picture">
|
||||||
<!-- <ElInput /> -->
|
<Uploader ref="uploader" v-model:file="formData.picture"/>
|
||||||
<!-- :biz_type,ZaiShengPin-再生品、HuiShouPin-回收品、QiTa其他" -->
|
|
||||||
|
|
||||||
<el-select v-model="formData.bizType" :disabled="status === 'view'" placeholder="业务类型" style="width: 240px">
|
|
||||||
<el-option v-for="item in bizList" :key="item.value" :label="item.label" :value="item.value"/>
|
|
||||||
</el-select>
|
|
||||||
</ElFormItem>
|
</ElFormItem>
|
||||||
|
<ElFormItem label="业务类型" prop="bizType">
|
||||||
<ElFormItem label-width="90" label="分类名称" prop="categoryName">
|
<ElSelect v-model="formData.bizType" :disabled="status === 'view'" placeholder="业务类型">
|
||||||
|
<ElOption v-for="item in bizList" :key="item.value" :label="item.label" :value="item.value"/>
|
||||||
|
</ElSelect>
|
||||||
|
</ElFormItem>
|
||||||
|
<ElFormItem label="分类名称" prop="categoryName">
|
||||||
<ElInput v-model="formData.categoryName" :disabled="status === 'view'" placeholder="分类名称"/>
|
<ElInput v-model="formData.categoryName" :disabled="status === 'view'" placeholder="分类名称"/>
|
||||||
</ElFormItem>
|
</ElFormItem>
|
||||||
<ElFormItem label-width="90" label="图片" prop="picture">
|
<ElFormItem label="排序" prop="sort">
|
||||||
<Uploader
|
<ElInputNumber v-model="formData.sort" :disabled="status === 'view'" :min="0" placeholder="排序"/>
|
||||||
ref="uploader"
|
|
||||||
v-model:file="formData.picture"
|
|
||||||
:upload-props="{
|
|
||||||
accept: 'image/*',
|
|
||||||
listType:'picture-card',
|
|
||||||
drag:false
|
|
||||||
}"/>
|
|
||||||
</ElFormItem>
|
|
||||||
<ElFormItem label-width="90" label="排序" prop="sort">
|
|
||||||
<ElInput v-model="formData.sort" :disabled="status === 'view'" placeholder="排序"/>
|
|
||||||
</ElFormItem>
|
</ElFormItem>
|
||||||
</ElForm>
|
</ElForm>
|
||||||
<template #footer>
|
|
||||||
<ElButton @click="showDialog = false">{{ status === 'view' ? '关闭' : '取消' }}</ElButton>
|
|
||||||
<ElButton v-if="status !== 'view'" :loading="submiting" type="primary" @click="submitHandler">提交</ElButton>
|
|
||||||
</template>
|
|
||||||
</ADialog>
|
</ADialog>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -81,13 +66,8 @@ const formData = Utils.resetAble(reactive<any>({}))
|
||||||
const rules = reactive<FormRules<GoodsCategoryTypes.SearchGoodsCategoryResult>>({
|
const rules = reactive<FormRules<GoodsCategoryTypes.SearchGoodsCategoryResult>>({
|
||||||
bizType: [ {required: true, message: '请填写业务类型', trigger: 'blur'} ],
|
bizType: [ {required: true, message: '请填写业务类型', trigger: 'blur'} ],
|
||||||
categoryName: [ {required: true, message: '请填写分类名称', trigger: 'blur'} ],
|
categoryName: [ {required: true, message: '请填写分类名称', trigger: 'blur'} ],
|
||||||
picture: [ {required: true, message: '请填写图片', trigger: 'blur'} ],
|
picture: [ {required: true, message: '请上传图片', trigger: 'blur'} ],
|
||||||
sort: [ {required: true, message: '请填写排序', trigger: 'blur'} ],
|
sort: [ {required: true, message: '请填写排序', trigger: 'blur'} ],
|
||||||
creatorId: [ {required: true, message: '请填写创建人 Id;sys_user.id', trigger: 'blur'} ],
|
|
||||||
modifierId: [ {required: true, message: '请填写修改人 Id;sys_user.id', trigger: 'blur'} ],
|
|
||||||
createTime: [ {required: true, message: '请填写创建时间', trigger: 'blur'} ],
|
|
||||||
modifyTime: [ {required: true, message: '请填写修改时间', trigger: 'blur'} ],
|
|
||||||
deleted: [ {required: true, message: '请填写是否删除; 0-->未删除、1-->已删除', trigger: 'blur'} ],
|
|
||||||
})
|
})
|
||||||
|
|
||||||
function dialogCloseHandler() {
|
function dialogCloseHandler() {
|
||||||
|
|
@ -140,5 +120,27 @@ defineExpose({
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
.form-panel {
|
.form-panel {
|
||||||
padding 20px
|
padding 20px
|
||||||
|
display: grid;
|
||||||
|
gap: 0 30px;
|
||||||
|
|
||||||
|
grid-template-areas: "picture bizType" \
|
||||||
|
"picture categoryName" \
|
||||||
|
"picture sort";
|
||||||
|
|
||||||
|
for val, ii in (picture bizType categoryName sort) {
|
||||||
|
:deep(.el-form-item) {
|
||||||
|
&:nth-child({ii+1}) {
|
||||||
|
align-items: start;
|
||||||
|
grid-area: val
|
||||||
|
if ii == 0 {
|
||||||
|
max-width 300px
|
||||||
|
.el-form-item__content {
|
||||||
|
justify-content center
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -8,7 +8,7 @@ declare global {
|
||||||
// 分类名称
|
// 分类名称
|
||||||
categoryName?: string
|
categoryName?: string
|
||||||
// 创建时间范围
|
// 创建时间范围
|
||||||
createTimes?: [ Date, Date ]
|
createTimes?: [ string | undefined, string | undefined ]
|
||||||
// 修改时间
|
// 修改时间
|
||||||
createTimeStart?: string
|
createTimeStart?: string
|
||||||
// 是否删除; 0-->未删除、1-->已删除
|
// 是否删除; 0-->未删除、1-->已删除
|
||||||
|
|
|
||||||
|
|
@ -3,32 +3,32 @@
|
||||||
ref="formPage"
|
ref="formPage"
|
||||||
:action-column="actionColumn"
|
:action-column="actionColumn"
|
||||||
:left-tools="leftTools"
|
:left-tools="leftTools"
|
||||||
|
:default-search-form="{createTimes:[undefined,undefined]}"
|
||||||
:paging="paging">
|
:paging="paging">
|
||||||
<template #searchFormItem="{ searchForm }">
|
<template #searchFormItem="{ searchForm }">
|
||||||
<ElFormItem label="商品编码">
|
<ElFormItem label="产品分类">
|
||||||
<ElInput v-model="searchForm.sn" placeholder="商品编码"/>
|
<ADropTable v-model="searchForm.goodsCategoryId as string" :columns="dropTableColumns" :loader="dropTableLoader" display-field="categoryName"/>
|
||||||
|
</ElFormItem>
|
||||||
|
<ElFormItem label="产品编码">
|
||||||
|
<ElInput v-model="searchForm.sn" placeholder="产品编码"/>
|
||||||
</ElFormItem>
|
</ElFormItem>
|
||||||
<ElFormItem label="产品名称">
|
<ElFormItem label="产品名称">
|
||||||
<ElInput v-model="searchForm.goodsName" placeholder="产品名称"/>
|
<ElInput v-model="searchForm.goodsName" placeholder="产品名称"/>
|
||||||
</ElFormItem>
|
</ElFormItem>
|
||||||
<ElFormItem label="规格">
|
|
||||||
<ElInput v-model="searchForm.specParams" placeholder="规格"/>
|
|
||||||
</ElFormItem>
|
|
||||||
<ElFormItem label="计量单位">
|
|
||||||
<ElInput v-model="searchForm.unit" placeholder="计量单位"/>
|
|
||||||
</ElFormItem>
|
|
||||||
<ElFormItem label="备注">
|
|
||||||
<ElInput v-model="searchForm.memo" placeholder="备注"/>
|
|
||||||
</ElFormItem>
|
|
||||||
<ElFormItem label="创建时间">
|
<ElFormItem label="创建时间">
|
||||||
<ElInput v-model="searchForm.createTime" placeholder="创建时间"/>
|
<ADtPicker v-model="searchForm.createTimes" :change-handler="research"/>
|
||||||
</ElFormItem>
|
</ElFormItem>
|
||||||
<ElFormItem label="修改时间">
|
</template>
|
||||||
<ElInput v-model="searchForm.modifyTime" placeholder="修改时间"/>
|
<template #simpleSearchFormItem="{ searchForm }">
|
||||||
|
<ElFormItem label="产品编码">
|
||||||
|
<ElInput v-model="searchForm.sn" placeholder="产品编码"/>
|
||||||
|
</ElFormItem>
|
||||||
|
<ElFormItem label="产品名称">
|
||||||
|
<ElInput v-model="searchForm.goodsName" placeholder="产品名称"/>
|
||||||
</ElFormItem>
|
</ElFormItem>
|
||||||
</template>
|
</template>
|
||||||
<template #columns>
|
<template #columns>
|
||||||
<ElTableColumn label="商品编码" prop="sn"/>
|
<ElTableColumn label="产品编码" prop="sn"/>
|
||||||
<ElTableColumn label="图片" width="100">
|
<ElTableColumn label="图片" width="100">
|
||||||
<template #default="{ row }">
|
<template #default="{ row }">
|
||||||
<el-image :preview-src-list="[AppApi.fileUrl(row.picture)]" :src="AppApi.fileUrl(row.picture)" preview-teleported show-progress style="width: 32px; height: 32px"/>
|
<el-image :preview-src-list="[AppApi.fileUrl(row.picture)]" :src="AppApi.fileUrl(row.picture)" preview-teleported show-progress style="width: 32px; height: 32px"/>
|
||||||
|
|
@ -58,6 +58,9 @@ import FormPage, {
|
||||||
type ToolType,
|
type ToolType,
|
||||||
} from '@/components/page/FormPage.vue'
|
} from '@/components/page/FormPage.vue'
|
||||||
import type { ComponentExposed } from 'vue-component-type-helpers'
|
import type { ComponentExposed } from 'vue-component-type-helpers'
|
||||||
|
import ADropTable from '@/components/a-drop-table/ADropTable.vue'
|
||||||
|
import GoodsCategoryApi from '@/pages/gds/goods-category/goods-category-api.ts'
|
||||||
|
import ADtPicker from '@/components/a-dt-picker/ADtPicker.vue'
|
||||||
|
|
||||||
const goodsFormIns = useTemplateRef<InstanceType<typeof GoodsForm>>('goodsForm')
|
const goodsFormIns = useTemplateRef<InstanceType<typeof GoodsForm>>('goodsForm')
|
||||||
const formPageIns = useTemplateRef<ComponentExposed<typeof FormPage>>('formPage')
|
const formPageIns = useTemplateRef<ComponentExposed<typeof FormPage>>('formPage')
|
||||||
|
|
@ -66,6 +69,20 @@ function editSuccHandler() {
|
||||||
formPageIns.value?.doSearch()
|
formPageIns.value?.doSearch()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const dropTableColumns = [
|
||||||
|
{
|
||||||
|
label: '业务类型',
|
||||||
|
prop: 'bizTypeTxt',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '分类名称',
|
||||||
|
prop: 'categoryName',
|
||||||
|
},
|
||||||
|
]
|
||||||
|
const dropTableLoader = (param: GoodsCategoryTypes.SearchGoodsCategoryParam) => {
|
||||||
|
return GoodsCategoryApi.paging(param).then(res => res.data)
|
||||||
|
}
|
||||||
|
|
||||||
const actionColumn = reactive<ActionColumnType<GoodsTypes.SearchGoodsResult>>({
|
const actionColumn = reactive<ActionColumnType<GoodsTypes.SearchGoodsResult>>({
|
||||||
tableActions: [
|
tableActions: [
|
||||||
{
|
{
|
||||||
|
|
@ -103,8 +120,16 @@ const leftTools: ToolType[] = [
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
|
|
||||||
|
function research() {
|
||||||
|
formPageIns.value?.doSearch()
|
||||||
|
}
|
||||||
|
|
||||||
function paging(param: GoodsTypes.SearchGoodsParam) {
|
function paging(param: GoodsTypes.SearchGoodsParam) {
|
||||||
return GoodsApi.paging(param)
|
return GoodsApi.paging({
|
||||||
|
...param,
|
||||||
|
createTimeStart: param.createTimes[0],
|
||||||
|
createTimeEnd: param.createTimes[1],
|
||||||
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
function enableGoodsHandler(enable: boolean, id: string) {
|
function enableGoodsHandler(enable: boolean, id: string) {
|
||||||
|
|
|
||||||
|
|
@ -3,25 +3,10 @@
|
||||||
v-model:show="showDialog"
|
v-model:show="showDialog"
|
||||||
:closed="dialogCloseHandler"
|
:closed="dialogCloseHandler"
|
||||||
:submit-handler="submitHandler"
|
:submit-handler="submitHandler"
|
||||||
title="产品信息"
|
:title="status === 'add' ? '新建产品' : '修改产品'"
|
||||||
>
|
>
|
||||||
<ElForm :model="formData" :rules="rules" ref="goodsForm" class="form-panel" label-width="auto">
|
<ElForm ref="goodsForm" :model="formData" :rules="rules" class="form-panel" label-width="80px">
|
||||||
<ElFormItem label-width="90" label="产品类型" prop="goodsCategoryId">
|
<ElFormItem label="图片" prop="picture">
|
||||||
<!-- <ElInput v-model="formData.goodsCategoryId" :disabled="status === 'view'" placeholder="产品类型 Id" /> -->
|
|
||||||
<el-select v-model="formData.goodsCategoryId" :disabled="status === 'view'" placeholder="产品类型" filterable remote reserve-keyword remote-show-suffix :remote-method="remoteMethod" :loading="loading" style="width: 240px">
|
|
||||||
<el-option v-for="item in category" :key="item.id" :label="item.categoryName" :value="item.id"/>
|
|
||||||
</el-select>
|
|
||||||
</ElFormItem>
|
|
||||||
<ElFormItem label-width="90" label="商品编码" prop="sn">
|
|
||||||
<ElInput v-model="formData.sn" :disabled="status === 'view'" placeholder="商品编码"/>
|
|
||||||
</ElFormItem>
|
|
||||||
<ElFormItem label-width="90" label="产品名称" prop="goodsName">
|
|
||||||
<ElInput v-model="formData.goodsName" :disabled="status === 'view'" placeholder="产品名称"/>
|
|
||||||
</ElFormItem>
|
|
||||||
<ElFormItem label-width="90" label="规格" prop="specParams">
|
|
||||||
<ElInput v-model="formData.specParams" :disabled="status === 'view'" placeholder="规格"/>
|
|
||||||
</ElFormItem>
|
|
||||||
<ElFormItem label-width="90" label="图片" prop="picture">
|
|
||||||
<Uploader
|
<Uploader
|
||||||
ref="uploader"
|
ref="uploader"
|
||||||
v-model:file="formData.picture"
|
v-model:file="formData.picture"
|
||||||
|
|
@ -30,34 +15,29 @@
|
||||||
listType:'picture-card'
|
listType:'picture-card'
|
||||||
}"/>
|
}"/>
|
||||||
</ElFormItem>
|
</ElFormItem>
|
||||||
<ElFormItem label-width="90" label="计量单位" prop="unit">
|
<ElFormItem v-if="status !== 'add'" label="产品编码" prop="sn">
|
||||||
<ADict v-model="formData.unit" :disabled="status === 'view'" dict-key="unit" placeholder="计量单位" style="width: 240px"/>
|
<ElInput v-model="formData.sn" placeholder="产品编码" readonly/>
|
||||||
</ElFormItem>
|
</ElFormItem>
|
||||||
<ElFormItem label-width="90" label="排序" prop="sort">
|
<ElFormItem label="产品分类" prop="goodsCategoryId">
|
||||||
<ElInput v-model="formData.sort" :disabled="status === 'view'" placeholder="请输入排序"/>
|
<ADropTable v-model="formData.goodsCategoryId as string" :columns="dropTableColumns" :loader="dropTableLoader" display-field="categoryName"/>
|
||||||
</ElFormItem>
|
</ElFormItem>
|
||||||
<ElFormItem label-width="90" label="备注" prop="memo">
|
<ElFormItem label="产品名称" prop="goodsName">
|
||||||
<ElInput v-model="formData.memo" :disabled="status === 'view'" placeholder="请输入备注"/>
|
<ElInput v-model="formData.goodsName" :disabled="status === 'view'" placeholder="产品名称"/>
|
||||||
</ElFormItem>
|
</ElFormItem>
|
||||||
<ElFormItem label-width="90" label="是否可用" prop="canuse">
|
<ElFormItem label="规格" prop="specParams">
|
||||||
|
<ElInput v-model="formData.specParams" :disabled="status === 'view'" placeholder="规格"/>
|
||||||
|
</ElFormItem>
|
||||||
|
<ElFormItem label="排序" prop="sort">
|
||||||
|
<ElInputNumber v-model="formData.sort" :disabled="status === 'view'" placeholder="请输入排序"/>
|
||||||
|
</ElFormItem>
|
||||||
|
<ElFormItem label="计量单位" prop="unit">
|
||||||
|
<ADict v-model="formData.unit" :disabled="status === 'view'" dict-key="unit" placeholder="计量单位"/>
|
||||||
|
</ElFormItem>
|
||||||
|
<ElFormItem label="是否可用" prop="canuse">
|
||||||
<el-switch v-model="formData.canuse" :disabled="status === 'view'"/>
|
<el-switch v-model="formData.canuse" :disabled="status === 'view'"/>
|
||||||
</ElFormItem>
|
</ElFormItem>
|
||||||
|
<ElFormItem label="备注" prop="memo">
|
||||||
|
<ElInput v-model="formData.memo" :disabled="status === 'view'" placeholder="请输入备注"/>
|
||||||
<ElFormItem label="商品编码" label-width="90" prop="sn">
|
|
||||||
<ElInput v-model="formData.sn" :disabled="status === 'view'" placeholder="商品编码"/>
|
|
||||||
</ElFormItem>
|
|
||||||
<ElFormItem label="商品编码" label-width="90" prop="sn">
|
|
||||||
<ElInput v-model="formData.sn" :disabled="status === 'view'" placeholder="商品编码"/>
|
|
||||||
</ElFormItem>
|
|
||||||
<ElFormItem label="商品编码" label-width="90" prop="sn">
|
|
||||||
<ElInput v-model="formData.sn" :disabled="status === 'view'" placeholder="商品编码"/>
|
|
||||||
</ElFormItem>
|
|
||||||
<ElFormItem label="商品编码" label-width="90" prop="sn">
|
|
||||||
<ElInput v-model="formData.sn" :disabled="status === 'view'" placeholder="商品编码"/>
|
|
||||||
</ElFormItem>
|
|
||||||
<ElFormItem label="商品编码" label-width="90" prop="sn">
|
|
||||||
<ElInput v-model="formData.sn" :disabled="status === 'view'" placeholder="商品编码"/>
|
|
||||||
</ElFormItem>
|
</ElFormItem>
|
||||||
</ElForm>
|
</ElForm>
|
||||||
</ADialog>
|
</ADialog>
|
||||||
|
|
@ -75,9 +55,9 @@ import {
|
||||||
} from 'element-plus'
|
} from 'element-plus'
|
||||||
import Uploader from '@/components/uploader/Uploader.vue'
|
import Uploader from '@/components/uploader/Uploader.vue'
|
||||||
import GoodsCategoryApi from '@/pages/gds/goods-category/goods-category-api.ts'
|
import GoodsCategoryApi from '@/pages/gds/goods-category/goods-category-api.ts'
|
||||||
import DictApi from '@/pages/sys/dict/dict-api.ts'
|
|
||||||
import ADict from '@/components/a-dict/ADict.vue'
|
import ADict from '@/components/a-dict/ADict.vue'
|
||||||
import ADialog from '@/components/a-dialog/ADialog.vue'
|
import ADialog from '@/components/a-dialog/ADialog.vue'
|
||||||
|
import ADropTable from '@/components/a-drop-table/ADropTable.vue'
|
||||||
|
|
||||||
|
|
||||||
const emits = defineEmits([ 'editSucc' ])
|
const emits = defineEmits([ 'editSucc' ])
|
||||||
|
|
@ -89,13 +69,26 @@ const uploaderIns = useTemplateRef<InstanceType<typeof Uploader>>('uploader')
|
||||||
const formData = Utils.resetAble(reactive<GoodsTypes.SearchGoodsResult>({canuse: true}))
|
const formData = Utils.resetAble(reactive<GoodsTypes.SearchGoodsResult>({canuse: true}))
|
||||||
const rules = reactive<FormRules<GoodsTypes.SearchGoodsResult>>({
|
const rules = reactive<FormRules<GoodsTypes.SearchGoodsResult>>({
|
||||||
goodsCategoryId: [ {required: true, message: '请填写产品类型', trigger: 'blur'} ],
|
goodsCategoryId: [ {required: true, message: '请填写产品类型', trigger: 'blur'} ],
|
||||||
sn: [ {required: true, message: '请填写商品编码', trigger: 'blur'} ],
|
sn: [ {required: true, message: '请填写产品编码', trigger: 'blur'} ],
|
||||||
goodsName: [ {required: true, message: '请填写产品名称', trigger: 'blur'} ],
|
goodsName: [ {required: true, message: '请填写产品名称', trigger: 'blur'} ],
|
||||||
specParams: [ {required: true, message: '请填写规格', trigger: 'blur'} ],
|
specParams: [ {required: true, message: '请填写规格', trigger: 'blur'} ],
|
||||||
picture: [ {required: true, message: '请填写图片', trigger: 'blur'} ],
|
picture: [ {required: true, message: '请填写图片', trigger: 'blur'} ],
|
||||||
unit: [ {required: true, message: '请填写计量单位', trigger: 'blur'} ],
|
unit: [ {required: true, message: '请填写计量单位', trigger: 'blur'} ],
|
||||||
sort: [ {required: true, message: '请填写排序', trigger: 'blur'} ],
|
sort: [ {required: true, message: '请填写排序', trigger: 'blur'} ],
|
||||||
})
|
})
|
||||||
|
const dropTableColumns = [
|
||||||
|
{
|
||||||
|
label: '业务类型',
|
||||||
|
prop: 'bizTypeTxt',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '分类名称',
|
||||||
|
prop: 'categoryName',
|
||||||
|
},
|
||||||
|
]
|
||||||
|
const dropTableLoader = (param: GoodsCategoryTypes.SearchGoodsCategoryParam) => {
|
||||||
|
return GoodsCategoryApi.paging(param).then(res => res.data)
|
||||||
|
}
|
||||||
|
|
||||||
function dialogCloseHandler() {
|
function dialogCloseHandler() {
|
||||||
formData.$reset()
|
formData.$reset()
|
||||||
|
|
@ -118,25 +111,6 @@ function submitHandler() {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const category = ref<GoodsCategoryTypes.SearchGoodsCategoryResult[]>([])
|
|
||||||
const loading = ref(false)
|
|
||||||
const remoteMethod = (query: string) => {
|
|
||||||
loading.value = true
|
|
||||||
GoodsCategoryApi.paging({size: 50, categoryName: query || undefined}).then((res) => {
|
|
||||||
category.value = res.data.records
|
|
||||||
loading.value = false
|
|
||||||
})
|
|
||||||
}
|
|
||||||
const unitList = ref<DictItemTypes.SearchDictItemResult[]>([])
|
|
||||||
const getOpt = () => {
|
|
||||||
let searchForm = {
|
|
||||||
dictKey: 'unit',
|
|
||||||
}
|
|
||||||
DictApi.obtainDictData(searchForm).then((res) => {
|
|
||||||
unitList.value = res.data
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
defineExpose({
|
defineExpose({
|
||||||
open(data: GoodsTypes.SearchGoodsResult = {}) {
|
open(data: GoodsTypes.SearchGoodsResult = {}) {
|
||||||
showDialog.value = true
|
showDialog.value = true
|
||||||
|
|
@ -150,7 +124,6 @@ defineExpose({
|
||||||
status.value = 'add'
|
status.value = 'add'
|
||||||
formData.$reset(data)
|
formData.$reset(data)
|
||||||
}
|
}
|
||||||
getOpt()
|
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -158,5 +131,28 @@ defineExpose({
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
.form-panel {
|
.form-panel {
|
||||||
padding 20px
|
padding 20px
|
||||||
|
display: grid;
|
||||||
|
gap: 0 30px;
|
||||||
|
grid-template-areas: "picture ." \
|
||||||
|
"picture ." \
|
||||||
|
"picture .";
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
|
||||||
|
:deep(.el-form-item) {
|
||||||
|
&:first-child {
|
||||||
|
align-items: start;
|
||||||
|
grid-area: picture
|
||||||
|
max-width 300px
|
||||||
|
|
||||||
|
.el-form-item__content {
|
||||||
|
justify-content center
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-child:nth-child(2n+1) {
|
||||||
|
grid-column: span 2;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -3,42 +3,15 @@ export {}
|
||||||
declare global {
|
declare global {
|
||||||
namespace GoodsTypes {
|
namespace GoodsTypes {
|
||||||
interface SearchGoodsParam extends G.PageParam {
|
interface SearchGoodsParam extends G.PageParam {
|
||||||
// Id
|
|
||||||
id?: string
|
|
||||||
// 产品类型 Id
|
// 产品类型 Id
|
||||||
goodsCategoryId?: string
|
goodsCategoryId?: string
|
||||||
// 商品编码
|
// 产品编码
|
||||||
sn?: string
|
sn?: string
|
||||||
// 产品名称
|
// 产品名称
|
||||||
goodsName?: string
|
goodsName?: string
|
||||||
// 规格
|
createTimes: [ string | undefined, string | undefined ]
|
||||||
specParams?: string
|
createTimeStart?: string
|
||||||
// 图片
|
createTimeEnd?: string
|
||||||
picture?: string
|
|
||||||
// 计量单位;字典代码:unit
|
|
||||||
unit?: string
|
|
||||||
// 是否为成品;0-->否、1-->是
|
|
||||||
fg?: boolean
|
|
||||||
// 是否为半成品;0-->否、1-->是
|
|
||||||
sfg?: boolean
|
|
||||||
// 是否为原料;0-->否、1-->是
|
|
||||||
rg?: boolean
|
|
||||||
// 排序
|
|
||||||
sort?: number
|
|
||||||
// 是否可用;0-->否、1-->是
|
|
||||||
canuse?: boolean
|
|
||||||
// 备注
|
|
||||||
memo?: string
|
|
||||||
// 创建人 Id;sys_user.id
|
|
||||||
creatorId?: string
|
|
||||||
// 修改人 Id;sys_user.id
|
|
||||||
modifierId?: string
|
|
||||||
// 创建时间
|
|
||||||
createTime?: string
|
|
||||||
// 修改时间
|
|
||||||
modifyTime?: string
|
|
||||||
// 是否删除; 0-->未删除、1-->已删除
|
|
||||||
deleted?: boolean
|
|
||||||
}
|
}
|
||||||
|
|
||||||
interface SearchGoodsResult {
|
interface SearchGoodsResult {
|
||||||
|
|
@ -46,7 +19,7 @@ declare global {
|
||||||
id?: string
|
id?: string
|
||||||
// 产品类型 Id
|
// 产品类型 Id
|
||||||
goodsCategoryId?: string
|
goodsCategoryId?: string
|
||||||
// 商品编码
|
// 产品编码
|
||||||
sn?: string
|
sn?: string
|
||||||
// 产品名称
|
// 产品名称
|
||||||
goodsName?: string
|
goodsName?: string
|
||||||
|
|
@ -85,7 +58,7 @@ declare global {
|
||||||
id?: string
|
id?: string
|
||||||
// 产品类型 Id
|
// 产品类型 Id
|
||||||
goodsCategoryId?: string
|
goodsCategoryId?: string
|
||||||
// 商品编码
|
// 产品编码
|
||||||
sn?: string
|
sn?: string
|
||||||
// 产品名称
|
// 产品名称
|
||||||
goodsName?: string
|
goodsName?: string
|
||||||
|
|
@ -124,7 +97,7 @@ declare global {
|
||||||
id?: string
|
id?: string
|
||||||
// 产品类型 Id
|
// 产品类型 Id
|
||||||
goodsCategoryId?: string
|
goodsCategoryId?: string
|
||||||
// 商品编码
|
// 产品编码
|
||||||
sn?: string
|
sn?: string
|
||||||
// 产品名称
|
// 产品名称
|
||||||
goodsName?: string
|
goodsName?: string
|
||||||
|
|
|
||||||
|
|
@ -80,7 +80,7 @@ const rules = reactive<FormRules<CraftTypes.SearchCraftResult>>({
|
||||||
})
|
})
|
||||||
const dropTableColumns = [
|
const dropTableColumns = [
|
||||||
{
|
{
|
||||||
label: '商品编码',
|
label: '产品编码',
|
||||||
prop: 'sn',
|
prop: 'sn',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
@ -90,7 +90,6 @@ const dropTableColumns = [
|
||||||
]
|
]
|
||||||
const dropTableLoader = (param: GoodsTypes.SearchGoodsParam) => {
|
const dropTableLoader = (param: GoodsTypes.SearchGoodsParam) => {
|
||||||
return GoodsApi.paging(param).then(res => res.data)
|
return GoodsApi.paging(param).then(res => res.data)
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function dialogCloseHandler() {
|
function dialogCloseHandler() {
|
||||||
|
|
|
||||||
|
|
@ -86,7 +86,7 @@
|
||||||
<el-table-column type="expand">
|
<el-table-column type="expand">
|
||||||
<template #default="props">
|
<template #default="props">
|
||||||
<ElTable :data="props.row.children" header-row-class-name="table-header" :border="true" cell-class-name="table-cell" class="table-list">
|
<ElTable :data="props.row.children" header-row-class-name="table-header" :border="true" cell-class-name="table-cell" class="table-list">
|
||||||
<ElTableColumn label="商品名称" prop="goodsName" />
|
<ElTableColumn label="产品名称" prop="goodsName"/>
|
||||||
<ElTableColumn label="清运状态" prop="transStatus" />
|
<ElTableColumn label="清运状态" prop="transStatus" />
|
||||||
<ElTableColumn label="订单状态" prop="orderStatus" />
|
<ElTableColumn label="订单状态" prop="orderStatus" />
|
||||||
<ElTableColumn label="清运公司" prop="transOrgId" />
|
<ElTableColumn label="清运公司" prop="transOrgId" />
|
||||||
|
|
@ -148,13 +148,13 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import OrderApi from "@/pages/order/book-order/order-api.ts";
|
import OrderApi from '@/pages/order/book-order/order-api.ts'
|
||||||
import OrderForm from "@/pages/order/book-order/OrderForm.vue";
|
import OrderForm from '@/pages/order/book-order/OrderForm.vue'
|
||||||
import Page from "@/components/page/Page.vue";
|
import Page from '@/components/page/Page.vue'
|
||||||
import { elIcons } from "@/common/element/element.ts";
|
import { elIcons } from '@/common/element/element.ts'
|
||||||
import Utils from "@/common/utils";
|
import Utils from '@/common/utils'
|
||||||
import OrgApi from "@/pages/cst/org/org-api.ts";
|
import OrgApi from '@/pages/cst/org/org-api.ts'
|
||||||
import ASelect from "@/components/a-select/ASelect.vue";
|
import ASelect from '@/components/a-select/ASelect.vue'
|
||||||
|
|
||||||
const totalCount = ref(0);
|
const totalCount = ref(0);
|
||||||
const tableData = Utils.resetAble(reactive<OrderTypes.SearchOrderResult[]>([]));
|
const tableData = Utils.resetAble(reactive<OrderTypes.SearchOrderResult[]>([]));
|
||||||
|
|
|
||||||
|
|
@ -41,7 +41,7 @@
|
||||||
<ElTableColumn label="采购单单号" prop="orderSn" width="170px"/>
|
<ElTableColumn label="采购单单号" prop="orderSn" width="170px"/>
|
||||||
<ElTableColumn label="分类名称" prop="goodsCategoryName"/>
|
<ElTableColumn label="分类名称" prop="goodsCategoryName"/>
|
||||||
<ElTableColumn label="产品名称" prop="goodsName"/>
|
<ElTableColumn label="产品名称" prop="goodsName"/>
|
||||||
<ElTableColumn label="商品编码" prop="goodSn" width="100px"/>
|
<ElTableColumn label="产品编码" prop="goodSn" width="100px"/>
|
||||||
<ElTableColumn label="数量" prop="quantity"/>
|
<ElTableColumn label="数量" prop="quantity"/>
|
||||||
<ElTableColumn label="计量单位" prop="unit"/>
|
<ElTableColumn label="计量单位" prop="unit"/>
|
||||||
<ElTableColumn label="备注" prop="memo"/>
|
<ElTableColumn label="备注" prop="memo"/>
|
||||||
|
|
|
||||||
|
|
@ -40,7 +40,7 @@
|
||||||
<ElDescriptionsItem label="产品名称" prop="goodsName">
|
<ElDescriptionsItem label="产品名称" prop="goodsName">
|
||||||
{{ detailData.goodsName }}
|
{{ detailData.goodsName }}
|
||||||
</ElDescriptionsItem>
|
</ElDescriptionsItem>
|
||||||
<ElDescriptionsItem label="商品编码" prop="goodSn">
|
<ElDescriptionsItem label="产品编码" prop="goodSn">
|
||||||
{{ detailData.goodSn }}
|
{{ detailData.goodSn }}
|
||||||
</ElDescriptionsItem>
|
</ElDescriptionsItem>
|
||||||
<ElDescriptionsItem label="数量" prop="quantity">
|
<ElDescriptionsItem label="数量" prop="quantity">
|
||||||
|
|
|
||||||
|
|
@ -45,8 +45,8 @@
|
||||||
<ElFormItem label-width="90" label="产品名称" prop="goodsName">
|
<ElFormItem label-width="90" label="产品名称" prop="goodsName">
|
||||||
<ElInput v-model="formData.goodsName" readonly :disabled="status === 'view'" placeholder="产品名称" />
|
<ElInput v-model="formData.goodsName" readonly :disabled="status === 'view'" placeholder="产品名称" />
|
||||||
</ElFormItem>
|
</ElFormItem>
|
||||||
<!-- <ElFormItem label-width="90" label="商品编码" prop="goodSn">
|
<!-- <ElFormItem label-width="90" label="产品编码" prop="goodSn">
|
||||||
<ElInput v-model="formData.goodSn" readonly :disabled="status === 'view'" placeholder="商品编码" />
|
<ElInput v-model="formData.goodSn" readonly :disabled="status === 'view'" placeholder="产品编码" />
|
||||||
</ElFormItem> -->
|
</ElFormItem> -->
|
||||||
<ElFormItem label-width="90" label="数量" prop="quantity">
|
<ElFormItem label-width="90" label="数量" prop="quantity">
|
||||||
<ElInput v-model="formData.quantity" readonly :disabled="status === 'view'" placeholder="数量" />
|
<ElInput v-model="formData.quantity" readonly :disabled="status === 'view'" placeholder="数量" />
|
||||||
|
|
@ -66,15 +66,19 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import InOrderApi from "@/pages/wh/in-order/in-order-api.ts";
|
import InOrderApi from '@/pages/wh/in-order/in-order-api.ts'
|
||||||
import Strings from "@/common/utils/strings.ts";
|
import Strings from '@/common/utils/strings.ts'
|
||||||
import FormUtil from "@/common/utils/formUtil.ts";
|
import FormUtil from '@/common/utils/formUtil.ts'
|
||||||
import Utils from "@/common/utils";
|
import Utils from '@/common/utils'
|
||||||
import { ElMessage, type FormInstance, type FormRules } from "element-plus";
|
import {
|
||||||
import ASelect from "@/components/a-select/ASelect.vue";
|
ElMessage,
|
||||||
import UserApi from "@/pages/sys/user/user-api.ts";
|
type FormInstance,
|
||||||
import WarehouseApi from "@/pages/wh/warehouse/warehouse-api.ts";
|
type FormRules,
|
||||||
import PurchaseOrderApi from "@/pages/wh/purchase-order/purchase-order-api.ts";
|
} from 'element-plus'
|
||||||
|
import ASelect from '@/components/a-select/ASelect.vue'
|
||||||
|
import UserApi from '@/pages/sys/user/user-api.ts'
|
||||||
|
import WarehouseApi from '@/pages/wh/warehouse/warehouse-api.ts'
|
||||||
|
import PurchaseOrderApi from '@/pages/wh/purchase-order/purchase-order-api.ts'
|
||||||
|
|
||||||
const emits = defineEmits(["editSucc"]);
|
const emits = defineEmits(["editSucc"]);
|
||||||
const showDialog = ref(false);
|
const showDialog = ref(false);
|
||||||
|
|
@ -97,7 +101,7 @@ const rules = reactive<FormRules<InOrderTypes.SearchInOrderResult>>({
|
||||||
goodsCategoryName: [{ required: true, message: "请填写分类名称", trigger: "blur" }],
|
goodsCategoryName: [{ required: true, message: "请填写分类名称", trigger: "blur" }],
|
||||||
goodsId: [{ required: true, message: "请填写产品 Id", trigger: "blur" }],
|
goodsId: [{ required: true, message: "请填写产品 Id", trigger: "blur" }],
|
||||||
goodsName: [{ required: true, message: "请填写产品名称", trigger: "blur" }],
|
goodsName: [{ required: true, message: "请填写产品名称", trigger: "blur" }],
|
||||||
goodSn: [{ required: true, message: "请填写商品编码", trigger: "blur" }],
|
goodSn: [ {required: true, message: '请填写产品编码', trigger: 'blur'} ],
|
||||||
quantity: [{ required: true, message: "请填写数量", trigger: "blur" }],
|
quantity: [{ required: true, message: "请填写数量", trigger: "blur" }],
|
||||||
unit: [{ required: true, message: "请填写计量单位;字典代码:unit", trigger: "blur" }],
|
unit: [{ required: true, message: "请填写计量单位;字典代码:unit", trigger: "blur" }],
|
||||||
memo: [{ required: true, message: "请填写备注", trigger: "blur" }],
|
memo: [{ required: true, message: "请填写备注", trigger: "blur" }],
|
||||||
|
|
|
||||||
|
|
@ -27,7 +27,7 @@ declare global {
|
||||||
goodsId?: string
|
goodsId?: string
|
||||||
// 产品名称
|
// 产品名称
|
||||||
goodsName?: string
|
goodsName?: string
|
||||||
// 商品编码
|
// 产品编码
|
||||||
goodSn?: string
|
goodSn?: string
|
||||||
// 数量
|
// 数量
|
||||||
quantity?: number
|
quantity?: number
|
||||||
|
|
@ -72,7 +72,7 @@ declare global {
|
||||||
goodsId?: string
|
goodsId?: string
|
||||||
// 产品名称
|
// 产品名称
|
||||||
goodsName?: string
|
goodsName?: string
|
||||||
// 商品编码
|
// 产品编码
|
||||||
goodSn?: string
|
goodSn?: string
|
||||||
// 数量
|
// 数量
|
||||||
quantity?: number
|
quantity?: number
|
||||||
|
|
@ -117,7 +117,7 @@ declare global {
|
||||||
goodsId?: string
|
goodsId?: string
|
||||||
// 产品名称
|
// 产品名称
|
||||||
goodsName?: string
|
goodsName?: string
|
||||||
// 商品编码
|
// 产品编码
|
||||||
goodSn?: string
|
goodSn?: string
|
||||||
// 数量
|
// 数量
|
||||||
quantity?: number
|
quantity?: number
|
||||||
|
|
@ -162,7 +162,7 @@ declare global {
|
||||||
goodsId?: string
|
goodsId?: string
|
||||||
// 产品名称
|
// 产品名称
|
||||||
goodsName?: string
|
goodsName?: string
|
||||||
// 商品编码
|
// 产品编码
|
||||||
goodSn?: string
|
goodSn?: string
|
||||||
// 数量
|
// 数量
|
||||||
quantity?: number
|
quantity?: number
|
||||||
|
|
|
||||||
|
|
@ -41,8 +41,8 @@
|
||||||
<ElFormItem label="产品名称">
|
<ElFormItem label="产品名称">
|
||||||
<ElInput v-model="searchForm.goodsName" placeholder="产品名称"/>
|
<ElInput v-model="searchForm.goodsName" placeholder="产品名称"/>
|
||||||
</ElFormItem>
|
</ElFormItem>
|
||||||
<ElFormItem label="商品编码">
|
<ElFormItem label="产品编码">
|
||||||
<ElInput v-model="searchForm.goodSn" placeholder="商品编码"/>
|
<ElInput v-model="searchForm.goodSn" placeholder="产品编码"/>
|
||||||
</ElFormItem>
|
</ElFormItem>
|
||||||
<ElFormItem label="数量">
|
<ElFormItem label="数量">
|
||||||
<ElInput v-model="searchForm.quantity" placeholder="数量"/>
|
<ElInput v-model="searchForm.quantity" placeholder="数量"/>
|
||||||
|
|
@ -80,7 +80,7 @@
|
||||||
<ElTableColumn label="销售单号" prop="orderSn" width="140px"/>
|
<ElTableColumn label="销售单号" prop="orderSn" width="140px"/>
|
||||||
<ElTableColumn label="分类名称" prop="goodsCategoryName"/>
|
<ElTableColumn label="分类名称" prop="goodsCategoryName"/>
|
||||||
<ElTableColumn label="产品名称" prop="goodsName"/>
|
<ElTableColumn label="产品名称" prop="goodsName"/>
|
||||||
<ElTableColumn label="商品编码" prop="goodSn" width="100px"/>
|
<ElTableColumn label="产品编码" prop="goodSn" width="100px"/>
|
||||||
<ElTableColumn label="数量" prop="quantity"/>
|
<ElTableColumn label="数量" prop="quantity"/>
|
||||||
<ElTableColumn label="计量单位" prop="unit"/>
|
<ElTableColumn label="计量单位" prop="unit"/>
|
||||||
<ElTableColumn label="备注" prop="memo"/>
|
<ElTableColumn label="备注" prop="memo"/>
|
||||||
|
|
|
||||||
|
|
@ -40,7 +40,7 @@
|
||||||
<ElDescriptionsItem label="产品名称" prop="goodsName">
|
<ElDescriptionsItem label="产品名称" prop="goodsName">
|
||||||
{{ detailData.goodsName }}
|
{{ detailData.goodsName }}
|
||||||
</ElDescriptionsItem>
|
</ElDescriptionsItem>
|
||||||
<ElDescriptionsItem label="商品编码" prop="goodSn">
|
<ElDescriptionsItem label="产品编码" prop="goodSn">
|
||||||
{{ detailData.goodSn }}
|
{{ detailData.goodSn }}
|
||||||
</ElDescriptionsItem>
|
</ElDescriptionsItem>
|
||||||
<ElDescriptionsItem label="数量" prop="quantity">
|
<ElDescriptionsItem label="数量" prop="quantity">
|
||||||
|
|
|
||||||
|
|
@ -41,8 +41,8 @@
|
||||||
<ElFormItem label-width="90" label="产品名称" prop="goodsName">
|
<ElFormItem label-width="90" label="产品名称" prop="goodsName">
|
||||||
<ElInput v-model="formData.goodsName" :disabled="status === 'view'" placeholder="产品名称" />
|
<ElInput v-model="formData.goodsName" :disabled="status === 'view'" placeholder="产品名称" />
|
||||||
</ElFormItem>
|
</ElFormItem>
|
||||||
<ElFormItem label-width="90" label="商品编码" prop="goodSn">
|
<ElFormItem label="产品编码" label-width="90" prop="goodSn">
|
||||||
<ElInput v-model="formData.goodSn" :disabled="status === 'view'" placeholder="商品编码" />
|
<ElInput v-model="formData.goodSn" :disabled="status === 'view'" placeholder="产品编码"/>
|
||||||
</ElFormItem>
|
</ElFormItem>
|
||||||
<ElFormItem label-width="90" label="数量" prop="quantity">
|
<ElFormItem label-width="90" label="数量" prop="quantity">
|
||||||
<ElInput v-model="formData.quantity" :disabled="status === 'view'" placeholder="数量" />
|
<ElInput v-model="formData.quantity" :disabled="status === 'view'" placeholder="数量" />
|
||||||
|
|
@ -62,15 +62,19 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import OutOrderApi from "@/pages/wh/out-order/out-order-api.ts";
|
import OutOrderApi from '@/pages/wh/out-order/out-order-api.ts'
|
||||||
import Strings from "@/common/utils/strings.ts";
|
import Strings from '@/common/utils/strings.ts'
|
||||||
import FormUtil from "@/common/utils/formUtil.ts";
|
import FormUtil from '@/common/utils/formUtil.ts'
|
||||||
import Utils from "@/common/utils";
|
import Utils from '@/common/utils'
|
||||||
import { ElMessage, type FormInstance, type FormRules } from "element-plus";
|
import {
|
||||||
import SalesOrderApi from "@/pages/wh/sales-order/sales-order-api.ts";
|
ElMessage,
|
||||||
import WarehouseApi from "@/pages/wh/warehouse/warehouse-api.ts";
|
type FormInstance,
|
||||||
import ASelect from "@/components/a-select/ASelect.vue";
|
type FormRules,
|
||||||
import UserApi from "@/pages/sys/user/user-api.ts";
|
} from 'element-plus'
|
||||||
|
import SalesOrderApi from '@/pages/wh/sales-order/sales-order-api.ts'
|
||||||
|
import WarehouseApi from '@/pages/wh/warehouse/warehouse-api.ts'
|
||||||
|
import ASelect from '@/components/a-select/ASelect.vue'
|
||||||
|
import UserApi from '@/pages/sys/user/user-api.ts'
|
||||||
|
|
||||||
const userColumn = [
|
const userColumn = [
|
||||||
{
|
{
|
||||||
|
|
@ -152,7 +156,7 @@ const rules = reactive<FormRules<OutOrderTypes.SearchOutOrderResult>>({
|
||||||
goodsCategoryName: [{ required: true, message: "请填写分类名称", trigger: "blur" }],
|
goodsCategoryName: [{ required: true, message: "请填写分类名称", trigger: "blur" }],
|
||||||
goodsId: [{ required: true, message: "请填写产品 Id", trigger: "blur" }],
|
goodsId: [{ required: true, message: "请填写产品 Id", trigger: "blur" }],
|
||||||
goodsName: [{ required: true, message: "请填写产品名称", trigger: "blur" }],
|
goodsName: [{ required: true, message: "请填写产品名称", trigger: "blur" }],
|
||||||
goodSn: [{ required: true, message: "请填写商品编码", trigger: "blur" }],
|
goodSn: [ {required: true, message: '请填写产品编码', trigger: 'blur'} ],
|
||||||
quantity: [{ required: true, message: "请填写数量", trigger: "blur" }],
|
quantity: [{ required: true, message: "请填写数量", trigger: "blur" }],
|
||||||
unit: [{ required: true, message: "请填写计量单位;字典代码:unit", trigger: "blur" }],
|
unit: [{ required: true, message: "请填写计量单位;字典代码:unit", trigger: "blur" }],
|
||||||
memo: [{ required: true, message: "请填写备注", trigger: "blur" }],
|
memo: [{ required: true, message: "请填写备注", trigger: "blur" }],
|
||||||
|
|
|
||||||
|
|
@ -27,7 +27,7 @@ declare global {
|
||||||
goodsId?: string
|
goodsId?: string
|
||||||
// 产品名称
|
// 产品名称
|
||||||
goodsName?: string
|
goodsName?: string
|
||||||
// 商品编码
|
// 产品编码
|
||||||
goodSn?: string
|
goodSn?: string
|
||||||
// 数量
|
// 数量
|
||||||
quantity?: number
|
quantity?: number
|
||||||
|
|
@ -72,7 +72,7 @@ declare global {
|
||||||
goodsId?: string
|
goodsId?: string
|
||||||
// 产品名称
|
// 产品名称
|
||||||
goodsName?: string
|
goodsName?: string
|
||||||
// 商品编码
|
// 产品编码
|
||||||
goodSn?: string
|
goodSn?: string
|
||||||
// 数量
|
// 数量
|
||||||
quantity?: number
|
quantity?: number
|
||||||
|
|
@ -117,7 +117,7 @@ declare global {
|
||||||
goodsId?: string
|
goodsId?: string
|
||||||
// 产品名称
|
// 产品名称
|
||||||
goodsName?: string
|
goodsName?: string
|
||||||
// 商品编码
|
// 产品编码
|
||||||
goodSn?: string
|
goodSn?: string
|
||||||
// 数量
|
// 数量
|
||||||
quantity?: number
|
quantity?: number
|
||||||
|
|
@ -162,7 +162,7 @@ declare global {
|
||||||
goodsId?: string
|
goodsId?: string
|
||||||
// 产品名称
|
// 产品名称
|
||||||
goodsName?: string
|
goodsName?: string
|
||||||
// 商品编码
|
// 产品编码
|
||||||
goodSn?: string
|
goodSn?: string
|
||||||
// 数量
|
// 数量
|
||||||
quantity?: number
|
quantity?: number
|
||||||
|
|
|
||||||
|
|
@ -34,8 +34,8 @@
|
||||||
<ElFormItem label="产品名称">
|
<ElFormItem label="产品名称">
|
||||||
<ElInput v-model="searchForm.goodsName" placeholder="产品名称"/>
|
<ElInput v-model="searchForm.goodsName" placeholder="产品名称"/>
|
||||||
</ElFormItem>
|
</ElFormItem>
|
||||||
<ElFormItem label="商品编码">
|
<ElFormItem label="产品编码">
|
||||||
<ElInput v-model="searchForm.goodSn" placeholder="商品编码"/>
|
<ElInput v-model="searchForm.goodSn" placeholder="产品编码"/>
|
||||||
</ElFormItem>
|
</ElFormItem>
|
||||||
<ElFormItem label="数量">
|
<ElFormItem label="数量">
|
||||||
<ElInput v-model="searchForm.quantity" placeholder="数量"/>
|
<ElInput v-model="searchForm.quantity" placeholder="数量"/>
|
||||||
|
|
@ -48,7 +48,7 @@
|
||||||
<ElTableColumn label="到货日期" prop="arrivalDate"/>
|
<ElTableColumn label="到货日期" prop="arrivalDate"/>
|
||||||
<ElTableColumn label="分类名称" prop="goodsCategoryName"/>
|
<ElTableColumn label="分类名称" prop="goodsCategoryName"/>
|
||||||
<ElTableColumn label="产品名称" prop="goodsName"/>
|
<ElTableColumn label="产品名称" prop="goodsName"/>
|
||||||
<ElTableColumn label="商品编码" prop="goodSn"/>
|
<ElTableColumn label="产品编码" prop="goodSn"/>
|
||||||
<ElTableColumn label="数量" prop="quantity"/>
|
<ElTableColumn label="数量" prop="quantity"/>
|
||||||
<ElTableColumn label="计量单位" prop="unit"/>
|
<ElTableColumn label="计量单位" prop="unit"/>
|
||||||
<ElTableColumn label="总金额(元)" prop="totalMoney"/>
|
<ElTableColumn label="总金额(元)" prop="totalMoney"/>
|
||||||
|
|
|
||||||
|
|
@ -34,7 +34,7 @@
|
||||||
<ElDescriptionsItem label="产品名称" prop="goodsName">
|
<ElDescriptionsItem label="产品名称" prop="goodsName">
|
||||||
{{ detailData.goodsName }}
|
{{ detailData.goodsName }}
|
||||||
</ElDescriptionsItem>
|
</ElDescriptionsItem>
|
||||||
<ElDescriptionsItem label="商品编码" prop="goodSn">
|
<ElDescriptionsItem label="产品编码" prop="goodSn">
|
||||||
{{ detailData.goodSn }}
|
{{ detailData.goodSn }}
|
||||||
</ElDescriptionsItem>
|
</ElDescriptionsItem>
|
||||||
<ElDescriptionsItem label="数量" prop="quantity">
|
<ElDescriptionsItem label="数量" prop="quantity">
|
||||||
|
|
|
||||||
|
|
@ -37,8 +37,8 @@
|
||||||
<ASelect labelKey="goodsName" v-model="formData.goodsId" :tableColumn="goodColumn" @change="goodsChange" :api="GoodsApi.paging" :disabled="status === 'view'" placeholder="选择产品" />
|
<ASelect labelKey="goodsName" v-model="formData.goodsId" :tableColumn="goodColumn" @change="goodsChange" :api="GoodsApi.paging" :disabled="status === 'view'" placeholder="选择产品" />
|
||||||
</ElFormItem>
|
</ElFormItem>
|
||||||
|
|
||||||
<!-- <ElFormItem label-width="90" label="商品编码" prop="goodSn">
|
<!-- <ElFormItem label-width="90" label="产品编码" prop="goodSn">
|
||||||
<ElInput v-model="formData.goodSn" :disabled="status === 'view'" placeholder="商品编码" />
|
<ElInput v-model="formData.goodSn" :disabled="status === 'view'" placeholder="产品编码" />
|
||||||
</ElFormItem> -->
|
</ElFormItem> -->
|
||||||
<ElFormItem label-width="90" label="数量" prop="quantity">
|
<ElFormItem label-width="90" label="数量" prop="quantity">
|
||||||
<ElInput v-model="formData.quantity" :disabled="status === 'view'" placeholder="数量" />
|
<ElInput v-model="formData.quantity" :disabled="status === 'view'" placeholder="数量" />
|
||||||
|
|
@ -61,15 +61,19 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import PurchaseOrderApi from "@/pages/wh/purchase-order/purchase-order-api.ts";
|
import PurchaseOrderApi from '@/pages/wh/purchase-order/purchase-order-api.ts'
|
||||||
import Strings from "@/common/utils/strings.ts";
|
import Strings from '@/common/utils/strings.ts'
|
||||||
import FormUtil from "@/common/utils/formUtil.ts";
|
import FormUtil from '@/common/utils/formUtil.ts'
|
||||||
import Utils from "@/common/utils";
|
import Utils from '@/common/utils'
|
||||||
import { ElMessage, type FormInstance, type FormRules } from "element-plus";
|
import {
|
||||||
|
ElMessage,
|
||||||
|
type FormInstance,
|
||||||
|
type FormRules,
|
||||||
|
} from 'element-plus'
|
||||||
// import GoodsCategoryApi from '@/pages/gds/goods-category/goods-category-api.ts'
|
// import GoodsCategoryApi from '@/pages/gds/goods-category/goods-category-api.ts'
|
||||||
import CustomerApi from "@/pages/cst/customer/customer-api.ts";
|
import CustomerApi from '@/pages/cst/customer/customer-api.ts'
|
||||||
import GoodsApi from "@/pages/gds/goods/goods-api.ts";
|
import GoodsApi from '@/pages/gds/goods/goods-api.ts'
|
||||||
import ASelect from "@/components/a-select/ASelect.vue";
|
import ASelect from '@/components/a-select/ASelect.vue'
|
||||||
|
|
||||||
const emits = defineEmits(["editSucc"]);
|
const emits = defineEmits(["editSucc"]);
|
||||||
const showDialog = ref(false);
|
const showDialog = ref(false);
|
||||||
|
|
@ -89,7 +93,7 @@ const rules = reactive<FormRules<PurchaseOrderTypes.SearchPurchaseOrderResult>>(
|
||||||
goodsCategoryName: [{ required: true, message: "请填写分类名称", trigger: "blur" }],
|
goodsCategoryName: [{ required: true, message: "请填写分类名称", trigger: "blur" }],
|
||||||
goodsId: [{ required: true, message: "请填写产品", trigger: "blur" }],
|
goodsId: [{ required: true, message: "请填写产品", trigger: "blur" }],
|
||||||
goodsName: [{ required: true, message: "请填写产品名称", trigger: "blur" }],
|
goodsName: [{ required: true, message: "请填写产品名称", trigger: "blur" }],
|
||||||
goodSn: [{ required: true, message: "请填写商品编码", trigger: "blur" }],
|
goodSn: [ {required: true, message: '请填写产品编码', trigger: 'blur'} ],
|
||||||
quantity: [{ required: true, message: "请填写数量", trigger: "blur" }],
|
quantity: [{ required: true, message: "请填写数量", trigger: "blur" }],
|
||||||
unit: [{ required: true, message: "请填写计量单位", trigger: "blur" }],
|
unit: [{ required: true, message: "请填写计量单位", trigger: "blur" }],
|
||||||
totalMoney: [{ required: true, message: "请填写总金额;单位:元", trigger: "blur" }],
|
totalMoney: [{ required: true, message: "请填写总金额;单位:元", trigger: "blur" }],
|
||||||
|
|
|
||||||
|
|
@ -23,7 +23,7 @@ declare global {
|
||||||
goodsId?: string
|
goodsId?: string
|
||||||
// 产品名称
|
// 产品名称
|
||||||
goodsName?: string
|
goodsName?: string
|
||||||
// 商品编码
|
// 产品编码
|
||||||
goodSn?: string
|
goodSn?: string
|
||||||
// 数量
|
// 数量
|
||||||
quantity?: number
|
quantity?: number
|
||||||
|
|
@ -66,7 +66,7 @@ declare global {
|
||||||
goodsId?: string
|
goodsId?: string
|
||||||
// 产品名称
|
// 产品名称
|
||||||
goodsName?: string
|
goodsName?: string
|
||||||
// 商品编码
|
// 产品编码
|
||||||
goodSn?: string
|
goodSn?: string
|
||||||
// 数量
|
// 数量
|
||||||
quantity?: number
|
quantity?: number
|
||||||
|
|
@ -109,7 +109,7 @@ declare global {
|
||||||
goodsId?: string
|
goodsId?: string
|
||||||
// 产品名称
|
// 产品名称
|
||||||
goodsName?: string
|
goodsName?: string
|
||||||
// 商品编码
|
// 产品编码
|
||||||
goodSn?: string
|
goodSn?: string
|
||||||
// 数量
|
// 数量
|
||||||
quantity?: number
|
quantity?: number
|
||||||
|
|
@ -152,7 +152,7 @@ declare global {
|
||||||
goodsId?: string
|
goodsId?: string
|
||||||
// 产品名称
|
// 产品名称
|
||||||
goodsName?: string
|
goodsName?: string
|
||||||
// 商品编码
|
// 产品编码
|
||||||
goodSn?: string
|
goodSn?: string
|
||||||
// 数量
|
// 数量
|
||||||
quantity?: number
|
quantity?: number
|
||||||
|
|
|
||||||
|
|
@ -39,8 +39,8 @@
|
||||||
<ElFormItem label="产品名称">
|
<ElFormItem label="产品名称">
|
||||||
<ElInput v-model="searchForm.goodsName" placeholder="产品名称"/>
|
<ElInput v-model="searchForm.goodsName" placeholder="产品名称"/>
|
||||||
</ElFormItem>
|
</ElFormItem>
|
||||||
<ElFormItem label="商品编码">
|
<ElFormItem label="产品编码">
|
||||||
<ElInput v-model="searchForm.goodSn" placeholder="商品编码"/>
|
<ElInput v-model="searchForm.goodSn" placeholder="产品编码"/>
|
||||||
</ElFormItem>
|
</ElFormItem>
|
||||||
<ElFormItem label="数量">
|
<ElFormItem label="数量">
|
||||||
<ElInput v-model="searchForm.quantity" placeholder="数量"/>
|
<ElInput v-model="searchForm.quantity" placeholder="数量"/>
|
||||||
|
|
@ -78,7 +78,7 @@
|
||||||
<ElTableColumn label="分类名称" prop="goodsCategoryName"/>
|
<ElTableColumn label="分类名称" prop="goodsCategoryName"/>
|
||||||
<!-- <ElTableColumn label="产品" prop="goodsId" /> -->
|
<!-- <ElTableColumn label="产品" prop="goodsId" /> -->
|
||||||
<ElTableColumn label="产品名称" prop="goodsName"/>
|
<ElTableColumn label="产品名称" prop="goodsName"/>
|
||||||
<ElTableColumn label="商品编码" prop="goodSn" width="100"/>
|
<ElTableColumn label="产品编码" prop="goodSn" width="100"/>
|
||||||
<ElTableColumn label="数量" prop="quantity"/>
|
<ElTableColumn label="数量" prop="quantity"/>
|
||||||
<!-- <ElTableColumn label="计量单位" prop="unit" /> -->
|
<!-- <ElTableColumn label="计量单位" prop="unit" /> -->
|
||||||
<ElTableColumn label="总金额" prop="totalMoney"/>
|
<ElTableColumn label="总金额" prop="totalMoney"/>
|
||||||
|
|
|
||||||
|
|
@ -34,7 +34,7 @@
|
||||||
<ElDescriptionsItem label="产品名称" prop="goodsName">
|
<ElDescriptionsItem label="产品名称" prop="goodsName">
|
||||||
{{ detailData.goodsName }}
|
{{ detailData.goodsName }}
|
||||||
</ElDescriptionsItem>
|
</ElDescriptionsItem>
|
||||||
<ElDescriptionsItem label="商品编码" prop="goodSn">
|
<ElDescriptionsItem label="产品编码" prop="goodSn">
|
||||||
{{ detailData.goodSn }}
|
{{ detailData.goodSn }}
|
||||||
</ElDescriptionsItem>
|
</ElDescriptionsItem>
|
||||||
<ElDescriptionsItem label="数量" prop="quantity">
|
<ElDescriptionsItem label="数量" prop="quantity">
|
||||||
|
|
|
||||||
|
|
@ -37,8 +37,8 @@
|
||||||
<ASelect labelKey="goodsName" v-model="formData.goodsId" :tableColumn="goodColumn" @change="goodsChange" :api="GoodsApi.paging" :disabled="status === 'view'" placeholder="选择产品" />
|
<ASelect labelKey="goodsName" v-model="formData.goodsId" :tableColumn="goodColumn" @change="goodsChange" :api="GoodsApi.paging" :disabled="status === 'view'" placeholder="选择产品" />
|
||||||
<!-- <ElInput v-model="formData.goodsId" :disabled="status === 'view'" placeholder="产品 Id" /> -->
|
<!-- <ElInput v-model="formData.goodsId" :disabled="status === 'view'" placeholder="产品 Id" /> -->
|
||||||
</ElFormItem>
|
</ElFormItem>
|
||||||
<ElFormItem label-width="90" label="商品编码" prop="goodSn">
|
<ElFormItem label="产品编码" label-width="90" prop="goodSn">
|
||||||
<ElInput v-model="formData.goodSn" :disabled="status === 'view'" placeholder="商品编码" />
|
<ElInput v-model="formData.goodSn" :disabled="status === 'view'" placeholder="产品编码"/>
|
||||||
</ElFormItem>
|
</ElFormItem>
|
||||||
<ElFormItem label-width="90" label="数量" prop="quantity">
|
<ElFormItem label-width="90" label="数量" prop="quantity">
|
||||||
<ElInput v-model="formData.quantity" :disabled="status === 'view'" placeholder="数量" />
|
<ElInput v-model="formData.quantity" :disabled="status === 'view'" placeholder="数量" />
|
||||||
|
|
@ -67,14 +67,18 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import SalesOrderApi from "@/pages/wh/sales-order/sales-order-api.ts";
|
import SalesOrderApi from '@/pages/wh/sales-order/sales-order-api.ts'
|
||||||
import Strings from "@/common/utils/strings.ts";
|
import Strings from '@/common/utils/strings.ts'
|
||||||
import FormUtil from "@/common/utils/formUtil.ts";
|
import FormUtil from '@/common/utils/formUtil.ts'
|
||||||
import Utils from "@/common/utils";
|
import Utils from '@/common/utils'
|
||||||
import { ElMessage, type FormInstance, type FormRules } from "element-plus";
|
import {
|
||||||
import CustomerApi from "@/pages/cst/customer/customer-api.ts";
|
ElMessage,
|
||||||
import GoodsApi from "@/pages/gds/goods/goods-api.ts";
|
type FormInstance,
|
||||||
import ASelect from "@/components/a-select/ASelect.vue";
|
type FormRules,
|
||||||
|
} from 'element-plus'
|
||||||
|
import CustomerApi from '@/pages/cst/customer/customer-api.ts'
|
||||||
|
import GoodsApi from '@/pages/gds/goods/goods-api.ts'
|
||||||
|
import ASelect from '@/components/a-select/ASelect.vue'
|
||||||
|
|
||||||
const emits = defineEmits(["editSucc"]);
|
const emits = defineEmits(["editSucc"]);
|
||||||
const showDialog = ref(false);
|
const showDialog = ref(false);
|
||||||
|
|
@ -95,7 +99,7 @@ const rules = reactive<FormRules<SalesOrderTypes.SearchSalesOrderResult>>({
|
||||||
goodsCategoryName: [{ required: true, message: "请填写分类名称", trigger: "blur" }],
|
goodsCategoryName: [{ required: true, message: "请填写分类名称", trigger: "blur" }],
|
||||||
goodsId: [{ required: true, message: "请填写产品 Id", trigger: "blur" }],
|
goodsId: [{ required: true, message: "请填写产品 Id", trigger: "blur" }],
|
||||||
goodsName: [{ required: true, message: "请填写产品名称", trigger: "blur" }],
|
goodsName: [{ required: true, message: "请填写产品名称", trigger: "blur" }],
|
||||||
goodSn: [{ required: true, message: "请填写商品编码", trigger: "blur" }],
|
goodSn: [ {required: true, message: '请填写产品编码', trigger: 'blur'} ],
|
||||||
quantity: [{ required: true, message: "请填写数量", trigger: "blur" }],
|
quantity: [{ required: true, message: "请填写数量", trigger: "blur" }],
|
||||||
unit: [{ required: true, message: "请填写计量单位;字典代码:unit", trigger: "blur" }],
|
unit: [{ required: true, message: "请填写计量单位;字典代码:unit", trigger: "blur" }],
|
||||||
totalMoney: [{ required: true, message: "请填写总金额;单位:元", trigger: "blur" }],
|
totalMoney: [{ required: true, message: "请填写总金额;单位:元", trigger: "blur" }],
|
||||||
|
|
|
||||||
|
|
@ -23,7 +23,7 @@ declare global {
|
||||||
goodsId?: string
|
goodsId?: string
|
||||||
// 产品名称
|
// 产品名称
|
||||||
goodsName?: string
|
goodsName?: string
|
||||||
// 商品编码
|
// 产品编码
|
||||||
goodSn?: string
|
goodSn?: string
|
||||||
// 数量
|
// 数量
|
||||||
quantity?: number
|
quantity?: number
|
||||||
|
|
@ -66,7 +66,7 @@ declare global {
|
||||||
goodsId?: string
|
goodsId?: string
|
||||||
// 产品名称
|
// 产品名称
|
||||||
goodsName?: string
|
goodsName?: string
|
||||||
// 商品编码
|
// 产品编码
|
||||||
goodSn?: string
|
goodSn?: string
|
||||||
// 数量
|
// 数量
|
||||||
quantity?: number
|
quantity?: number
|
||||||
|
|
@ -109,7 +109,7 @@ declare global {
|
||||||
goodsId?: string
|
goodsId?: string
|
||||||
// 产品名称
|
// 产品名称
|
||||||
goodsName?: string
|
goodsName?: string
|
||||||
// 商品编码
|
// 产品编码
|
||||||
goodSn?: string
|
goodSn?: string
|
||||||
// 数量
|
// 数量
|
||||||
quantity?: number
|
quantity?: number
|
||||||
|
|
@ -152,7 +152,7 @@ declare global {
|
||||||
goodsId?: string
|
goodsId?: string
|
||||||
// 产品名称
|
// 产品名称
|
||||||
goodsName?: string
|
goodsName?: string
|
||||||
// 商品编码
|
// 产品编码
|
||||||
goodSn?: string
|
goodSn?: string
|
||||||
// 数量
|
// 数量
|
||||||
quantity?: number
|
quantity?: number
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue