Browse Source

HL-5962整理供应商发货申请中的操作列,增加“更多”按钮,如备注中的截图

hella_online_20240913
yufei_wang 3 months ago
parent
commit
a64a3d981f
  1. 3
      src/components/XButton/index.ts
  2. 135
      src/components/XButton/src/ButtonBaseMore.vue
  3. 2
      src/views/wms/purchasereceiptManage/supplierdeliver/supplierdeliverRequestMain/index.vue
  4. 2
      src/views/wms/purchasereceiptManage/supplierdeliver/supplierdeliverRequestMain/supplierdeliverRequestMain.data.ts

3
src/components/XButton/index.ts

@ -1,5 +1,6 @@
import XButton from './src/XButton.vue' import XButton from './src/XButton.vue'
import XTextButton from './src/XTextButton.vue' import XTextButton from './src/XTextButton.vue'
import ButtonBase from './src/ButtonBase.vue' import ButtonBase from './src/ButtonBase.vue'
import ButtonBaseMore from './src/ButtonBaseMore.vue'
export { XButton, XTextButton, ButtonBase } export { XButton, XTextButton, ButtonBase, ButtonBaseMore }

135
src/components/XButton/src/ButtonBaseMore.vue

@ -0,0 +1,135 @@
<template>
<div v-for="(item, index) in getButtonList" :key="index" class="btn-div">
<el-button
v-show="!item.hide"
:type="item.type"
:color="item.color"
:link="item.link ? item.link : false"
:disabled="item.disabled"
v-hasPermi="[item.hasPermi] || []"
v-if="item.name != 'set'"
@click.stop="buttonBaseClick(item.name, item, $event)"
>
<Icon v-if="item.icon" :icon="item.icon" class="mr-1px" />
<span :style="{width:item.width+'px'||'auto'}" :class="[item.width?'ellipsis':'']">{{ item.label }}</span>
</el-button>
</div>
<el-dropdown placement="top-start" v-if="showList().length>3">
<el-button link class="more"> 更多 </el-button>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item v-for="(item, index) in getMoreList" :key="index+3" class="btn-div">
<el-button
v-show="!item.hide"
:type="item.type"
:color="item.color"
:link="item.link ? item.link : false"
:disabled="item.disabled"
v-hasPermi="[item.hasPermi] || []"
v-if="item.name != 'set'"
@click.stop="buttonBaseClick(item.name, item, $event)"
>
<Icon v-if="item.icon" :icon="item.icon" class="mr-1px" />
<span :style="{width:item.width+'px'||'auto'}" :class="[item.width?'ellipsis':'']">{{ item.label }}</span>
</el-button>
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
<slot></slot>
</template>
<script setup>
import { Plus } from '@element-plus/icons-vue'
import { clearButtonBlurHandle } from '@/utils/index'
import rowDrop from '@/components/rowDrop/index.vue'
import { CACHE_KEY, useCache } from '@/hooks/web/useCache'
const { wsCache } = useCache()
const props = defineProps({
Butttondata: {
type: Array,
default: () => {
return []
}
},
allSchemas: {
type: Object,
default: null
},
detailAllSchemas: {
type: Object,
default: null
},
})
const showList = ()=>{
const all_permission = '*:*:*'
const permissions = wsCache.get(CACHE_KEY.USER).permissions
let list = JSON.parse(JSON.stringify(props.Butttondata))
let showList = list.filter(item=>{
if(item.hide){
return false
}
const permissionFlag = [item.hasPermi]
return permissions.some((permission) => {
return all_permission === permission || permissionFlag.includes(permission)
})
})
return showList
}
const getMoreList = computed(()=>{
let list = showList()
return list.slice(3)
})
const getButtonList = computed(()=>{
let list = showList()
if(list.length>3){
console.log('list===',list)
return list.slice(0, 3)
}
return list
})
//
const emit = defineEmits(['buttonBaseClick', 'updataTableColumns'])
let timer = ref(null)
const buttonBaseClick = (val, item, $event) => {
clearButtonBlurHandle($event) //el-button
emit('buttonBaseClick', val, item, $event)
}
onUnmounted(() => {
if(timer.value){
console.log('清空timer',timer.value)
clearTimeout(timer.value)
timer.value = null
}
})
const popoverVisible = ref(false)
//
const closeRowDrop = () => {
popoverVisible.value = false
}
defineExpose({
popoverVisible
})
//
const updataTableColumns = (val) => {
emit('updataTableColumns', val)
}
</script>
<style scoped lang="scss">
.btn-div{
display: inline;
::v-deep(.el-button){
margin: 0px 5px;
}
::v-deep(.el-button.is-link){
margin: 0px;
}
}
</style>

2
src/views/wms/purchasereceiptManage/supplierdeliver/supplierdeliverRequestMain/index.vue

@ -55,7 +55,7 @@
</el-button> </el-button>
</template> </template>
<template #action="{ row, $index }"> <template #action="{ row, $index }">
<ButtonBase <ButtonBaseMore
:Butttondata="butttondata(row, $index)" :Butttondata="butttondata(row, $index)"
@button-base-click="buttonTableClick($event, row)" @button-base-click="buttonTableClick($event, row)"
/> />

2
src/views/wms/purchasereceiptManage/supplierdeliver/supplierdeliverRequestMain/supplierdeliverRequestMain.data.ts

@ -591,7 +591,7 @@ export const SupplierdeliverRequestMain = useCrudSchemas(reactive<CrudSchema[]>(
isDetail: false, isDetail: false,
isForm: false, isForm: false,
table: { table: {
width: 450, width: 320,
fixed: 'right' fixed: 'right'
}, },
} }

Loading…
Cancel
Save