133 lines
3.2 KiB
Vue
133 lines
3.2 KiB
Vue
|
<template>
|
||
|
|
<BasicDrawer v-bind="$attrs" @register="registerDrawer" title="字典列表" width="800px">
|
||
|
|
<BasicTable @register="registerTable" :rowClassName="getRowClassName">
|
||
|
|
<template #tableTitle>
|
||
|
|
<a-button type="primary" @click="handleCreate"> 新增</a-button>
|
||
|
|
</template>
|
||
|
|
<template #action="{ record }">
|
||
|
|
<TableAction :actions="getTableAction(record)"/>
|
||
|
|
</template>
|
||
|
|
</BasicTable>
|
||
|
|
</BasicDrawer>
|
||
|
|
<DictItemModal @register="registerModal" @success="reload" :dictId="dictId"/>
|
||
|
|
</template>
|
||
|
|
<script lang="ts" setup>
|
||
|
|
import {ref,unref} from 'vue';
|
||
|
|
import {BasicDrawer, useDrawerInner} from '/src/components/Drawer';
|
||
|
|
import {BasicTable, useTable, TableAction} from '/src/components/Table';
|
||
|
|
import {useModal} from '/src/components/Modal';
|
||
|
|
import { useDesign } from '/@/hooks/web/useDesign'
|
||
|
|
import DictItemModal from './DictItemModal.vue';
|
||
|
|
import {dictItemColumns, dictItemSearchFormSchema} from '../dict.data';
|
||
|
|
import {itemList,deleteItem} from '../dict.api';
|
||
|
|
import { ColEx } from '/@/components/Form/src/types';
|
||
|
|
|
||
|
|
const { prefixCls } = useDesign('row-invalid');
|
||
|
|
const dictId = ref('');
|
||
|
|
//字典配置model
|
||
|
|
const [registerModal, {openModal}] = useModal();
|
||
|
|
const [registerDrawer] = useDrawerInner(async (data) => {
|
||
|
|
dictId.value = data.id
|
||
|
|
setProps({searchInfo:{dictId:unref(dictId)}});
|
||
|
|
reload()
|
||
|
|
});
|
||
|
|
// 自适应列配置
|
||
|
|
const adaptiveColProps: Partial<ColEx> = {
|
||
|
|
xs: 24, // <576px
|
||
|
|
sm: 24, // ≥576px
|
||
|
|
md: 24, // ≥768px
|
||
|
|
lg: 12, // ≥992px
|
||
|
|
xl: 12, // ≥1200px
|
||
|
|
xxl: 8, // ≥1600px
|
||
|
|
}
|
||
|
|
const [registerTable, {reload,setProps}] = useTable({
|
||
|
|
api: itemList,
|
||
|
|
columns: dictItemColumns,
|
||
|
|
formConfig: {
|
||
|
|
baseColProps: adaptiveColProps,
|
||
|
|
labelAlign:"right",
|
||
|
|
labelCol: {
|
||
|
|
offset:1,
|
||
|
|
xs: 24,
|
||
|
|
sm: 24,
|
||
|
|
md: 24,
|
||
|
|
lg: 9,
|
||
|
|
xl: 7,
|
||
|
|
xxl: 4,
|
||
|
|
},
|
||
|
|
wrapperCol: {},
|
||
|
|
schemas: dictItemSearchFormSchema,
|
||
|
|
autoSubmitOnEnter:true,
|
||
|
|
},
|
||
|
|
striped: true,
|
||
|
|
useSearchForm: true,
|
||
|
|
bordered: true,
|
||
|
|
showIndexColumn: false,
|
||
|
|
canResize: false,
|
||
|
|
immediate: false,
|
||
|
|
actionColumn: {
|
||
|
|
width: 100,
|
||
|
|
title: '操作',
|
||
|
|
dataIndex: 'action',
|
||
|
|
slots: {customRender: 'action'},
|
||
|
|
fixed: undefined,
|
||
|
|
},
|
||
|
|
});
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 新增
|
||
|
|
*/
|
||
|
|
function handleCreate() {
|
||
|
|
openModal(true, {
|
||
|
|
isUpdate: false,
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 编辑
|
||
|
|
*/
|
||
|
|
function handleEdit(record) {
|
||
|
|
openModal(true, {
|
||
|
|
record,
|
||
|
|
isUpdate: true,
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 删除
|
||
|
|
*/
|
||
|
|
async function handleDelete(record) {
|
||
|
|
await deleteItem({id: record.id}, reload);
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 操作栏
|
||
|
|
*/
|
||
|
|
function getTableAction(record) {
|
||
|
|
return [
|
||
|
|
{
|
||
|
|
label: '编辑',
|
||
|
|
onClick: handleEdit.bind(null, record),
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: '删除',
|
||
|
|
popConfirm: {
|
||
|
|
title: '是否确认删除',
|
||
|
|
confirm: handleDelete.bind(null, record),
|
||
|
|
},
|
||
|
|
}
|
||
|
|
];
|
||
|
|
}
|
||
|
|
function getRowClassName(record){
|
||
|
|
return record.status==0?prefixCls:'';
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<style scoped lang="less">
|
||
|
|
@prefix-cls: ~'@{namespace}-row-invalid';
|
||
|
|
|
||
|
|
::v-deep(.@{prefix-cls}) {
|
||
|
|
background: #f4f4f4;
|
||
|
|
color: #bababa;
|
||
|
|
}
|
||
|
|
</style>
|