<template>
|
<a-card :bordered="false">
|
<!-- 操作按钮区域 -->
|
<div class="table-operator">
|
<a-button @click="handleAdd" type="primary" preIcon="ant-design:plus">新增</a-button>
|
<!-- <a-button type="primary" preIcon="ant-design:download" @click="handleExportExcel('单表原生列表')">导出</a-button>-->
|
<!-- <j-upload-button type="primary" preIcon="ant-design:import-outlined" @click="handleImportExcel">导入</j-upload-button>-->
|
<a-dropdown v-if="selectedRowKeys.length > 0">
|
<template #overlay>
|
<a-menu>
|
<a-menu-item key="1" @click="batchDel">
|
<Icon icon="ant-design:delete-outlined"></Icon>
|
删除
|
</a-menu-item>
|
</a-menu>
|
</template>
|
<a-button
|
>批量操作
|
<Icon icon="mdi:chevron-down"></Icon>
|
</a-button>
|
</a-dropdown>
|
</div>
|
|
<!-- table区域-begin -->
|
<div>
|
<div class="ant-alert ant-alert-info" style="margin-bottom: 16px">
|
<i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a
|
>项
|
<a style="margin-left: 24px" @click="onClearSelected">清空</a>
|
</div>
|
|
<a-table
|
ref="table"
|
size="middle"
|
:scroll="{ x: true }"
|
bordered
|
rowKey="id"
|
class="j-table-force-nowrap"
|
:columns="columns"
|
:dataSource="dataSource"
|
:pagination="ipagination"
|
:loading="loading"
|
:rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
|
@change="handleTableChange"
|
>
|
<template slot="htmlSlot" slot-scope="text">
|
<div v-html="text"></div>
|
</template>
|
<template #imgSlot="{ text, record }">
|
<span v-if="!text" style="font-size: 12px; font-style: italic">无图片</span>
|
<img v-else :src="getImgView(text)" :preview="record.id" alt="" class="anty-img-wrap" />
|
</template>
|
<template #pcaSlot="{ text }">
|
<div>{{ getAreaTextByCode(text) }}</div>
|
</template>
|
<template #fileSlot="{ text }">
|
<span v-if="!text" style="font-size: 12px; font-style: italic">无文件</span>
|
<a-button v-else :ghost="true" type="primary" preIcon="ant-design:download" size="small" @click="downloadFile(text)"> 下载 </a-button>
|
</template>
|
|
<template #action="{ text, record }">
|
<a @click="handleEdit(record)">编辑</a>
|
<a-divider type="vertical" />
|
<a-dropdown>
|
<a class="ant-dropdown-link">更多 <a-icon type="down" /></a>
|
<template #overlay>
|
<a-menu class="antd-more">
|
<a-menu-item>
|
<a @click="handleDetail(record)">详情</a>
|
</a-menu-item>
|
<a-menu-item>
|
<Popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
|
<a>删除</a>
|
</Popconfirm>
|
</a-menu-item>
|
</a-menu>
|
</template>
|
</a-dropdown>
|
</template>
|
</a-table>
|
</div>
|
<OneNativeModal ref="oneProtogenesisModal" @ok="handleSuccess"></OneNativeModal>
|
</a-card>
|
</template>
|
|
<script lang="ts" setup>
|
import '../less/TableExpand.less';
|
import { onMounted, ref, reactive } from 'vue';
|
import { defHttp } from '/@/utils/http/axios';
|
import { useMessage } from '/@/hooks/web/useMessage';
|
import { filterMultiDictText } from '/@/utils/dict/JDictSelectUtil.js';
|
import { getAreaTextByCode } from '/@/components/Form/src/utils/Area';
|
import OneNativeModal from './components/OneNativeModal.vue';
|
import { Modal, Popconfirm } from 'ant-design-vue';
|
import { JSelectUserByDept, JDictSelectTag, JSelectDept, JSearchSelect } from '/@/components/Form';
|
import { filterObj, getFileAccessHttpUrl } from '/@/utils/common/compUtils';
|
import { loadCategoryData } from '/@/api/common/api';
|
import { getToken } from '/@/utils/auth';
|
import { useMethods } from '/@/hooks/system/useMethods';
|
import { downloadFile } from '/@/utils/common/renderUtils';
|
import { initDictOptions } from '/@/utils/dict';
|
|
const { handleExportXls, handleImportXls } = useMethods();
|
const modalVisible = ref<boolean>(false);
|
const queryParam = ref<any>({});
|
const loading = ref<boolean>(false);
|
const dictOptions = ref<any>([]);
|
const oneProtogenesisModal = ref();
|
const tokenHeader = { 'X-Access-Token': getToken() };
|
//表头
|
const columns = ref<any>([
|
{
|
title: '文本',
|
align: 'center',
|
dataIndex: 'name',
|
},
|
{
|
title: '字典下拉',
|
align: 'center',
|
dataIndex: 'xiala',
|
customRender: ({ text }) => (text ? filterMultiDictText(dictOptions.value['xiala'], text) : ''),
|
},
|
{
|
title: '字典单选',
|
align: 'center',
|
dataIndex: 'danxuan',
|
customRender: ({ text }) => (text ? filterMultiDictText(dictOptions.value['danxuan'], text) : ''),
|
},
|
{
|
title: '字典多选',
|
align: 'center',
|
dataIndex: 'duoxuan',
|
customRender: ({ text }) => (text ? filterMultiDictText(dictOptions.value['duoxuan'], text) : ''),
|
},
|
{
|
title: '开关',
|
align: 'center',
|
dataIndex: 'kaiguan',
|
customRender: ({ text }) => (text ? filterMultiDictText(dictOptions.value['kaiguan'], text) : ''),
|
},
|
{
|
title: '日期',
|
align: 'center',
|
dataIndex: 'riqi',
|
customRender: function ({ text }) {
|
return !text ? '' : text.length > 10 ? text.substr(0, 10) : text;
|
},
|
},
|
{
|
title: '年月日时分秒',
|
align: 'center',
|
dataIndex: 'nyrsfm',
|
},
|
{
|
title: '时间',
|
align: 'center',
|
dataIndex: 'shijian',
|
},
|
{
|
title: '文件',
|
align: 'center',
|
dataIndex: 'wenjian',
|
slots: { customRender: 'fileSlot' },
|
},
|
{
|
title: '图片',
|
align: 'center',
|
dataIndex: 'tupian',
|
slots: { customRender: 'imgSlot' },
|
},
|
{
|
title: '操作',
|
dataIndex: 'action',
|
align: 'center',
|
fixed: 'right',
|
width: 147,
|
slots: { customRender: 'action' },
|
},
|
]);
|
|
const Api = reactive<any>({
|
list: '/test/jeecgDemo/oneNative/list',
|
delete: '/test/jeecgDemo/oneNative/delete',
|
exportXls: '/test/jeecgDemo/oneNative/exportXls',
|
importExcel: 'test/jeecgDemo/oneNative/importExcel',
|
});
|
|
const dataSource = ref<any>([]);
|
const toggleSearchStatus = ref<boolean>(false);
|
const ipagination = ref<any>({
|
current: 1,
|
pageSize: 10,
|
pageSizeOptions: ['10', '20', '30'],
|
showTotal: (total, range) => {
|
return range[0] + '-' + range[1] + ' 共' + total + '条';
|
},
|
showQuickJumper: true,
|
showSizeChanger: true,
|
total: 0,
|
});
|
|
const selectedRowKeys = ref<any>([]);
|
const selectionRows = ref<any>([]);
|
const iSorter = ref<any>({ column: 'createTime', order: 'desc' });
|
const iFilters = ref<any>({});
|
const { createMessage } = useMessage();
|
|
/**
|
* 复选框选中事件
|
* @param rowKeys
|
* @param rows
|
*/
|
function onSelectChange(rowKeys, rows) {
|
selectedRowKeys.value = rowKeys;
|
selectionRows.value = rows;
|
}
|
|
/**
|
* 表格改变事件
|
*/
|
function handleTableChange({ pagination, filters, sorter }) {
|
ipagination.value = pagination;
|
iSorter.value = sorter;
|
iFilters.value = { ...filters };
|
}
|
|
/**
|
* 新增
|
*/
|
function handleAdd() {
|
oneProtogenesisModal.value.disableSubmit = false;
|
oneProtogenesisModal.value.add();
|
}
|
|
/**
|
* 清除选中行
|
*/
|
function onClearSelected() {
|
selectedRowKeys.value = [];
|
selectionRows.value = [];
|
}
|
|
/**
|
* 批量删除
|
*/
|
function batchDel() {
|
Modal.confirm({
|
title: '确认删除',
|
content: '是否删除选中数据',
|
okText: '确认',
|
cancelText: '取消',
|
onOk: () => {
|
defHttp.delete({ url: Api.delete, data: { ids: selectedRowKeys.value } }, { joinParamsToUrl: true }).then(() => {
|
handleSuccess();
|
});
|
},
|
});
|
}
|
|
/**
|
* 导出excel
|
*/
|
function handleExportExcel(title) {
|
let paramsForm = getQueryParams();
|
if (selectedRowKeys.value && selectedRowKeys.value.length > 0) {
|
paramsForm['selections'] = selectedRowKeys.join(',');
|
}
|
handleExportXls(title, Api.exportXls, filterObj(paramsForm));
|
}
|
|
/**
|
* 导入excel
|
*/
|
function handleImportExcel(file) {
|
handleImportXls(file, Api.importExcel, '').then(() => {
|
handleSuccess();
|
});
|
}
|
|
/**
|
* 获取查询参数
|
*/
|
function getQueryParams() {
|
let params = Object.assign(queryParam.value, iSorter.value, iFilters.value);
|
params.field = getQueryField();
|
params.pageNo = ipagination.value.current;
|
params.pageSize = ipagination.value.pageSize;
|
return filterObj(params);
|
}
|
|
/**
|
* 字段权限控制
|
*/
|
function getQueryField() {
|
let str = 'id,';
|
columns.value.forEach(function (value) {
|
str += ',' + value.dataIndex;
|
});
|
return str;
|
}
|
|
/**
|
* 初始化数据
|
*/
|
function loadData(arg?) {
|
if (arg === 1) {
|
ipagination.value.current = 1;
|
}
|
loading.value = true;
|
let params = getQueryParams();
|
defHttp
|
.get({ url: Api.list, params }, { isTransformResponse: false })
|
.then((res) => {
|
if (res.success) {
|
dataSource.value = res.result.records;
|
if (res.result && res.result.total) {
|
ipagination.value.total = res.result.total;
|
} else {
|
ipagination.value.total = 0;
|
}
|
} else {
|
createMessage.warning(res.message);
|
}
|
})
|
.finally(() => {
|
loading.value = false;
|
});
|
}
|
|
//查询
|
function searchQuery() {
|
loadData(1);
|
selectedRowKeys.value = [];
|
selectionRows.value = [];
|
}
|
|
/**
|
* 查询区域展开关闭
|
*/
|
function handleToggleSearch() {
|
toggleSearchStatus.value = !toggleSearchStatus.value;
|
}
|
|
/**
|
* 重置按钮
|
*/
|
function searchReset() {
|
queryParam.value = {};
|
loadData(1);
|
}
|
|
/**
|
* 获取预览图片
|
*/
|
function getImgView(text) {
|
if (text && text.indexOf(',') > 0) {
|
text = text.substring(0, text.indexOf(','));
|
}
|
return getFileAccessHttpUrl(text);
|
}
|
|
/**
|
* 编辑
|
* @param record
|
*/
|
function handleEdit(record) {
|
oneProtogenesisModal.value.disableSubmit = false;
|
oneProtogenesisModal.value.edit(record);
|
}
|
|
/**
|
* 详情
|
* @param record
|
*/
|
function handleDetail(record) {
|
oneProtogenesisModal.value.disableSubmit = true;
|
oneProtogenesisModal.value.edit(record);
|
}
|
|
/**
|
* 删除
|
* @param id
|
*/
|
function handleDelete(id) {
|
defHttp.delete({ url: Api.delete, data: { ids: id } }, { joinParamsToUrl: true }).then((res) => {
|
handleSuccess();
|
});
|
}
|
|
/**
|
* 初始化字典选项
|
*/
|
async function initDictConfig() {
|
dictOptions.value['flzds'] = await loadCategoryData({ code: 'B01' });
|
dictOptions.value['xiala'] = await initDictOptions('sex');
|
dictOptions.value['danxuan'] = await initDictOptions('sex');
|
dictOptions.value['duoxuan'] = await initDictOptions('urgent_level');
|
}
|
|
/**
|
* 保存表单后回调事件
|
*/
|
function handleSuccess() {
|
selectedRowKeys.value = [];
|
selectionRows.value = [];
|
loadData(1);
|
}
|
onMounted(() => {
|
dictOptions.value['kaiguan'] = [
|
{ text: '是', value: '1' },
|
{ text: '否', value: '2' },
|
];
|
//初始加载页面
|
loadData();
|
//初始化字典选项
|
initDictConfig();
|
});
|
</script>
|
