lijingjia
/
ds-wms-client-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

表格按钮组组件

Browse Source
frame
lijingjia 1 day ago
parent 5f31229449
commit 5ffdf6f284
7 changed files with 133 additions and 13 deletions
Show Stats Download Patch File Download Diff File

1
src/components/Table/src/BasicTable.vue
Unescape Escape View File

@ -571,7 +571,6 @@ export default defineComponent({
display: flex;
justify-content: space-between;
align-items: center;
padding-left: 10px;
}
.ant-pagination {
text-align: right;

115
src/components/TableButton/index.vue
Unescape Escape View File

@ -0,0 +1,115 @@
<!--
* @Desc: 列表页面表格操作按钮组
* @Author: lijj
* @Date: 2024-11-22 09:13:29
-->
<template>
<div :class="prefixCls">
<!-- 新增 -->
<a-tooltip placement="top" :mouseEnterDelay="0.5">
<template #title>
<span>{{ t('common.addText') }}</span>
</template>
<span v-if="btnKeys.includes('add') && !checkPermissions(show.add)" :class="`${prefixCls}-svg-btn`" @click="add">
<svg t="1732239931995" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14776" width="200" height="200"><path d="M832 1024H192c-108.8 0-192-89.6-192-192V192c0-108.8 89.6-192 192-192h640c108.8 0 192 89.6 192 192v640c0 102.4-89.6 192-192 192z" fill="#469FA6" p-id="14777"></path><path d="M780.8 588.8H236.8c-25.6 0-51.2-19.2-51.2-51.2v-64c0-25.6 19.2-51.2 51.2-51.2h556.8c25.6 0 51.2 19.2 51.2 51.2v70.4c-6.4 19.2-38.4 44.8-64 44.8z" fill="#FFFFFF" p-id="14778"></path><path d="M422.4 780.8V236.8c0-25.6 19.2-51.2 51.2-51.2h70.4c25.6 0 51.2 19.2 51.2 51.2v556.8c0 25.6-19.2 51.2-51.2 51.2H473.6c-32-6.4-51.2-38.4-51.2-64z" fill="#FFFFFF" p-id="14779"></path></svg>
</span>
</a-tooltip>
<!-- 复制 -->
<a-tooltip placement="top" :mouseEnterDelay="0.5">
<template #title>
<span>{{ t('common.copyText') }}</span>
</template>
<span v-if="btnKeys.includes('copy') && !checkPermissions(show.copy)" :class="`${prefixCls}-svg-btn`" @click="copy">
<svg t="1732241194906" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="16430" width="200" height="200"><path d="M140.8 108.8h505.6c89.6 0 140.8 44.8 140.8 140.8v633.6c0 89.6-44.8 140.8-140.8 140.8H140.8C44.8 1017.6 0 972.8 0 876.8V243.2c0-89.6 44.8-134.4 140.8-134.4z" fill="#45ABFF" p-id="16431"></path><path d="M403.2 0h480c96 0 140.8 44.8 140.8 140.8v633.6c0 89.6-44.8 140.8-140.8 140.8H403.2c-89.6 0-140.8-44.8-140.8-140.8V140.8C268.8 44.8 313.6 0 403.2 0z" fill="#45ABFF" p-id="16432"></path><path d="M646.4 108.8H268.8c-6.4 12.8-6.4 25.6-6.4 38.4V768c0 83.2 64 147.2 140.8 147.2h384c0-12.8 6.4-25.6 6.4-38.4V249.6c-6.4-76.8-70.4-140.8-147.2-140.8z" fill="#216DE8" p-id="16433"></path><path d="M556.8 582.4H192c-25.6 0-44.8-19.2-44.8-44.8 0-25.6 19.2-44.8 44.8-44.8h364.8c25.6 0 44.8 19.2 44.8 44.8s-19.2 44.8-44.8 44.8zM556.8 800H192c-25.6 0-44.8-19.2-44.8-44.8 0-25.6 19.2-44.8 44.8-44.8h364.8c25.6 0 44.8 19.2 44.8 44.8s-19.2 44.8-44.8 44.8zM556.8 371.2H192c-25.6 0-44.8-19.2-44.8-44.8s19.2-44.8 44.8-44.8h364.8c25.6 0 44.8 19.2 44.8 44.8 0 25.6-19.2 44.8-44.8 44.8z" fill="#FFFFFF" p-id="16434"></path></svg>
</span>
</a-tooltip>
<!-- 删除 -->
<a-tooltip placement="top" :mouseEnterDelay="0.5">
<template #title>
<span>{{ t('common.delText') }}</span>
</template>
<a-popconfirm
title="确定删除当前选中数据？"
ok-text="是"
cancel-text="否"
@confirm="del"
>
<span v-if="btnKeys.includes('del') && !checkPermissions(show.del)" :class="`${prefixCls}-svg-btn`">
<svg t="1732240833320" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15643" width="200" height="200"><path d="M832 1024H192c-108.8 0-192-89.6-192-192V192c0-108.8 89.6-192 192-192h640c108.8 0 192 89.6 192 192v640c0 102.4-89.6 192-192 192z" fill="#C73035" p-id="15644"></path><path d="M646.4 761.6L256 371.2c-19.2-19.2-19.2-51.2 0-70.4l44.8-44.8c19.2-19.2 51.2-25.6 70.4 0l396.8 396.8c19.2 19.2 25.6 51.2 0 70.4l-51.2 44.8c-19.2 12.8-51.2 12.8-70.4-6.4z" fill="#FFFFFF" p-id="15645"></path><path d="M256 646.4L646.4 256c19.2-19.2 51.2-25.6 70.4 0l51.2 44.8c19.2 19.2 25.6 51.2 0 70.4L371.2 768c-19.2 19.2-51.2 25.6-70.4 0l-51.2-51.2c-12.8-25.6-12.8-57.6 6.4-70.4z" fill="#FFFFFF" p-id="15646"></path></svg>
</span>
</a-popconfirm>
</a-tooltip>
<!-- 其他 -->
<slot></slot>
</div>
</template>
<script lang="ts" setup name="TableButton">
import { useDesign } from '/@/hooks/web/useDesign'
import { useI18n } from '/@/hooks/web/useI18n'
import { checkPermissions } from '/@/hooks/Permissions/index'
const { prefixCls } = useDesign('ds-table-button')
const { t } = useI18n()
const props = defineProps({
// 默认显示的按钮(新增、删除)
show: {
type: Object,
default: { add: null, del: null }
}
})
const btnKeys = Object.keys(props.show)
const emits = defineEmits(['add', 'del', 'copy'])
// 新建
const add = () => {
emits('add')
}
// 删除
const del = () => {
emits('del')
}
// 复制
const copy = () => {
emits('copy')
}
</script>
<style lang="less">
@prefix-cls: ~'@{namespace}-ds-table-button';
.@{prefix-cls} {
height: 32px;
padding-top: 3px;
&-svg-btn {
background: #F0F2F5;
display: inline-block;
width: 26px;
height: 26px;
border-radius: 4px;
margin-right: 8px;
cursor: pointer;
}
.iconfont {
background: #F0F2F5;
border-radius: 4px;
margin-right: 8px;
padding: 7px;
cursor: pointer;
position: relative;
top: -8.2px;
color: #121826;
}
.iconfont::before {
color: @primary-color;
margin-right: 3px;
font-size: 14px;
}
&-svg-btn:hover, .iconfont:hover {
box-shadow: 0px 2px 4px #cad1db;
}
svg {
width: 16px;
height: 16px;
margin: 5px;
}
}
</style>

3
src/components/registerGlobComp.ts
Unescape Escape View File

@ -5,6 +5,7 @@ import VXETable from 'vxe-table'
import ConfigForm from './ConfigForm/index.vue'
import ActionBar from './ActionBar/index.vue'
import ImportExcel from './importExcel/index.vue'
import TableButton from './TableButton/index.vue'
import 'vxe-table/lib/style.css'
import {
// Need
@ -57,7 +58,7 @@ import {
Timeline
} from 'ant-design-vue'
const compList = [AntButton.Group, Icon, ConfigForm, ActionBar, ImportExcel]
const compList = [AntButton.Group, Icon, ConfigForm, ActionBar, ImportExcel, TableButton]
export function registerGlobComp(app: App) {
compList.forEach((comp) => {

4
src/layouts/default/setting/SettingDrawer.tsx
Unescape Escape View File

@ -380,7 +380,7 @@ export default defineComponent({
>
{unref(getShowDarkModeToggle) && <Divider>{() => t('layout.setting.sysTheme')}</Divider>}
{unref(getShowDarkModeToggle) && <AppDarkModeToggle class="mx-auto" />}
<Divider>{() => t('layout.setting.sysTheme')}</Divider>
{/* <Divider>{() => t('layout.setting.sysTheme')}</Divider>
{renderMainTheme()}
<Divider>{() => t('layout.setting.headerTheme')}</Divider>
{renderHeaderTheme()}
@ -391,7 +391,7 @@ export default defineComponent({
<Divider>{() => t('layout.setting.interfaceDisplay')}</Divider>
{renderContent()}
<Divider>{() => t('layout.setting.animation')}</Divider>
{renderTransition()}
{renderTransition()} */}
<Divider />
<SettingFooter />
</BasicDrawer>

1
src/locales/lang/en/common.ts
Unescape Escape View File

@ -15,6 +15,7 @@ export default {
editText: 'Edit',
searchText: 'Search',
queryText: 'Search',
copyText: 'Copy',
inputText: 'Please enter',
chooseText: 'Please choose',

6
src/locales/lang/zh-CN/common.ts
Unescape Escape View File

@ -1,3 +1,8 @@
/*
* @Desc:
* @Author: lijj
* @Date: 2024-08-27 08:44:10
*/
export default {
okText: '确认',
closeText: '关闭',
@ -10,6 +15,7 @@ export default {
editText: '编辑',
searchText: '搜索',
queryText: '查询',
copyText: '复制',
inputText: '请输入',
chooseText: '请选择',

16
src/views/baseinfo/goodstype/index.vue
Unescape Escape View File

@ -2,6 +2,13 @@
<div class="p20">
<BasicTable class="ds-table" @register="registerTable" @row-dbClick="handleAudit">
<template #tableTitle>
<TableButton
:show="{ add: 'op:goodstype:add', del: 'op:goodstype:del' }"
@add="handleCreate"
@del="handleDel"
>
<span v-if="!checkPermissions('op:goodstype:import')" class="iconfont icon-piliangdaochu-danse" @click="importFlow">批量导入</span>
</TableButton>
<span>
<a-button
type="link"
@ -22,15 +29,6 @@
删除
</a-button>
</a-popconfirm>
<Divider type="vertical" />
<a-button
type="link"
@click="importFlow"
:disabled="checkPermissions('op:goodstype:import')"
>
<span class="iconfont icon-xiazai"></span>
导入商品类型
</a-button>
</span>
</template>
<template #toolbar></template>

Write Preview
Loading…
Cancel
Save