|
|
@@ -1,250 +1,258 @@
|
|
|
<template>
|
|
|
- <div >
|
|
|
- <BasicTable @register="registerTable" :rowSelection="rowSelection">
|
|
|
- <template #tableTitle>
|
|
|
- <a-button preIcon="ant-design:plus-outlined" type="primary" @click="handleAdd">新增</a-button>
|
|
|
- </template>
|
|
|
- <template #action="{ record }">
|
|
|
- <a class="table-action-link" @click="handleEdit(record)">编辑</a>
|
|
|
- <a-popconfirm
|
|
|
- title="确定删除?"
|
|
|
- @confirm="handleDelete(record)"
|
|
|
- >
|
|
|
- <a class="table-action-link">删除</a>
|
|
|
- </a-popconfirm>
|
|
|
- <a class="table-action-link" @click="handleDownLoad(record)">下载</a>
|
|
|
- <a class="table-action-link" @click="handleHisrecord(record)">历史记录</a>
|
|
|
- <slot name="action" v-bind="{ record }"></slot>
|
|
|
- </template>
|
|
|
- <template #bodyCell="{ column, record }">
|
|
|
- <slot name="filterCell" v-bind="{ column, record }"></slot>
|
|
|
- </template>
|
|
|
- </BasicTable>
|
|
|
- <DeviceModal :editID="editID" :reportId="reportId" :reportLogHis="reportLogHis" :fileType="fileType" @register="registerModal" :addOredit="addOredit" @saveOrUpdate="saveOrUpdate" />
|
|
|
-
|
|
|
-
|
|
|
- </div>
|
|
|
- </template>
|
|
|
-
|
|
|
- <script lang="ts" setup>
|
|
|
- //ts语法
|
|
|
- import { ref, reactive, toRaw, defineExpose, watch } from 'vue';
|
|
|
- import { BasicTable, } from '/@/components/Table';
|
|
|
- import { useModal } from '/@/components/Modal';
|
|
|
- import DeviceModal from './DeviceModal.vue';
|
|
|
- import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
|
|
|
- import { useListPage } from '/@/hooks/system/useListPage';
|
|
|
-
|
|
|
- const props = defineProps({
|
|
|
- //下载文件接口
|
|
|
- downLoad: {
|
|
|
- type: Function,
|
|
|
- required: true,
|
|
|
- },
|
|
|
- columns: {
|
|
|
- type: Array,
|
|
|
- // required: true,
|
|
|
- default: () => [],
|
|
|
- },
|
|
|
- searchFormSchema: {
|
|
|
- type: Array,
|
|
|
- default: () => [],
|
|
|
- },
|
|
|
- list: {
|
|
|
- type: Function,
|
|
|
- required: true,
|
|
|
- },
|
|
|
- deleteById: {
|
|
|
- type: Function,
|
|
|
- required: true,
|
|
|
- },
|
|
|
- batchDelete: {
|
|
|
- type: Function,
|
|
|
- },
|
|
|
-
|
|
|
-
|
|
|
- designScope: {
|
|
|
- type: String,
|
|
|
- },
|
|
|
- title: {
|
|
|
- type: String,
|
|
|
- },
|
|
|
- });
|
|
|
-
|
|
|
+ <div>
|
|
|
+ <BasicTable @register="registerTable" :rowSelection="rowSelection">
|
|
|
+ <template #tableTitle >
|
|
|
+ <a-button v-if="isReportFan" preIcon="ant-design:plus-outlined" type="primary" @click="handleAdd">新增</a-button>
|
|
|
+ </template>
|
|
|
+ <template #action="{ record }">
|
|
|
+ <a class="table-action-link" @click="handleEdit(record)">编辑</a>
|
|
|
+ <a-popconfirm v-if="isReportFan" title="确定删除?" @confirm="handleDelete(record)">
|
|
|
+ <a class="table-action-link">删除</a>
|
|
|
+ </a-popconfirm>
|
|
|
+ <a class="table-action-link" @click="handleDownLoad(record)">导出</a>
|
|
|
+ <a v-if="isReportFan" class="table-action-link" @click="handleHisrecord(record)"> 历史记录</a>
|
|
|
+ <slot name="action" v-bind="{ record }"></slot>
|
|
|
+ </template>
|
|
|
+ <template #bodyCell="{ column, record }">
|
|
|
+ <slot name="filterCell" v-bind="{ column, record }"></slot>
|
|
|
+ </template>
|
|
|
+ </BasicTable>
|
|
|
+ <DeviceModal :editID="editID" :reportId="reportId" :reportLogHis="reportLogHis" :fileType="fileType"
|
|
|
+ @register="registerModal" :addOredit="addOredit" @saveOrUpdate="saveOrUpdate" />
|
|
|
+
|
|
|
+
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script lang="ts" setup>
|
|
|
+//ts语法
|
|
|
+import { ref, reactive, toRaw, defineExpose, watch } from 'vue';
|
|
|
+import { BasicTable, } from '/@/components/Table';
|
|
|
+import { useModal } from '/@/components/Modal';
|
|
|
+import DeviceModal from './DeviceModal.vue';
|
|
|
+import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
|
|
|
+import { useListPage } from '/@/hooks/system/useListPage';
|
|
|
+
|
|
|
+const props = defineProps({
|
|
|
+ //是否显示新增，删除按钮
|
|
|
+ isReportFan: {
|
|
|
+ type: Boolean,
|
|
|
+ default: () => {
|
|
|
+ return true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //下载文件接口
|
|
|
+ downLoad: {
|
|
|
+ type: Function,
|
|
|
+ required: true,
|
|
|
+ },
|
|
|
+ columns: {
|
|
|
+ type: Array,
|
|
|
+ // required: true,
|
|
|
+ default: () => [],
|
|
|
+ },
|
|
|
+ searchFormSchema: {
|
|
|
+ type: Array,
|
|
|
+ default: () => [],
|
|
|
+ },
|
|
|
+ list: {
|
|
|
+ type: Function,
|
|
|
+ required: true,
|
|
|
+ },
|
|
|
+ deleteById: {
|
|
|
+ type: Function,
|
|
|
+ required: true,
|
|
|
+ },
|
|
|
+ batchDelete: {
|
|
|
+ type: Function,
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+ designScope: {
|
|
|
+ type: String,
|
|
|
+ },
|
|
|
+ title: {
|
|
|
+ type: String,
|
|
|
+ },
|
|
|
+});
|
|
|
+
|
|
|
//区分打开编辑或新增弹窗
|
|
|
-let addOredit=ref('')
|
|
|
+let addOredit = ref('')
|
|
|
//文件ID
|
|
|
-let editID = ref(0);
|
|
|
+let editID = ref(0);
|
|
|
let fileType = ref(''); //文件类型
|
|
|
-let reportLogHis=ref('')//是否为报表记录编辑
|
|
|
-let reportId=ref('')//历史记录列表传参
|
|
|
-
|
|
|
- const emit = defineEmits(['saveAdd']);
|
|
|
-
|
|
|
- const record = reactive({});
|
|
|
-
|
|
|
- const [registerModal, { openModal, closeModal }] = useModal();
|
|
|
-
|
|
|
- const columnList = getTableHeaderColumns('');
|
|
|
-
|
|
|
- // 列表页面公共参数、方法
|
|
|
- const { prefixCls, tableContext, onExportXls, onImportXls, doRequest } = useListPage({
|
|
|
- designScope: props.designScope,
|
|
|
- tableProps: {
|
|
|
- title: props.title,
|
|
|
- api: props.list,
|
|
|
- columns: props.columns.length > 0 ? (props.columns as any[]) : columnList,
|
|
|
- showTableSetting: false,
|
|
|
- // size: 'small',
|
|
|
- // bordered: false,
|
|
|
- formConfig: {
|
|
|
- showAdvancedButton: true,
|
|
|
- // labelWidth: 100,
|
|
|
- labelAlign: 'left',
|
|
|
- labelCol: {
|
|
|
- xs: 24,
|
|
|
- sm: 24,
|
|
|
- md: 24,
|
|
|
- lg: 9,
|
|
|
- xl: 7,
|
|
|
- xxl: 5,
|
|
|
- },
|
|
|
- schemas: props.searchFormSchema as any[],
|
|
|
- },
|
|
|
- useSearchForm: props.searchFormSchema.length > 0 ? true : false,
|
|
|
- striped: true,
|
|
|
- actionColumn: {
|
|
|
- width: 180,
|
|
|
- },
|
|
|
- beforeFetch: (params) => {
|
|
|
- return Object.assign(params, { column: 'createTime',});
|
|
|
+let reportLogHis = ref('')//是否为报表记录编辑
|
|
|
+let reportId = ref('')//历史记录列表传参
|
|
|
+
|
|
|
+const emit = defineEmits(['saveAdd']);
|
|
|
+
|
|
|
+const record = reactive({});
|
|
|
+
|
|
|
+const [registerModal, { openModal, closeModal }] = useModal();
|
|
|
+
|
|
|
+const columnList = getTableHeaderColumns('');
|
|
|
+
|
|
|
+// 列表页面公共参数、方法
|
|
|
+const { prefixCls, tableContext, onExportXls, onImportXls, doRequest } = useListPage({
|
|
|
+ designScope: props.designScope,
|
|
|
+ tableProps: {
|
|
|
+ title: props.title,
|
|
|
+ api: props.list,
|
|
|
+ columns: props.columns.length > 0 ? (props.columns as any[]) : columnList,
|
|
|
+ showTableSetting: false,
|
|
|
+ // size: 'small',
|
|
|
+ // bordered: false,
|
|
|
+ formConfig: {
|
|
|
+ showAdvancedButton: true,
|
|
|
+ // labelWidth: 100,
|
|
|
+ labelAlign: 'left',
|
|
|
+ labelCol: {
|
|
|
+ xs: 24,
|
|
|
+ sm: 24,
|
|
|
+ md: 24,
|
|
|
+ lg: 9,
|
|
|
+ xl: 7,
|
|
|
+ xxl: 5,
|
|
|
},
|
|
|
+ schemas: props.searchFormSchema as any[],
|
|
|
},
|
|
|
- });
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- //注册table数据
|
|
|
- const [registerTable, { reload, getForm }, { rowSelection, selectedRowKeys }] = tableContext;
|
|
|
-
|
|
|
-
|
|
|
- /**
|
|
|
- * 新增事件
|
|
|
- */
|
|
|
- function handleAdd() {
|
|
|
- addOredit.value='add'
|
|
|
- for (let key in record) {
|
|
|
- delete record[key];
|
|
|
- }
|
|
|
- openModal(true);
|
|
|
-
|
|
|
- }
|
|
|
+ useSearchForm: props.searchFormSchema.length > 0 ? true : false,
|
|
|
+ striped: true,
|
|
|
+ actionColumn: {
|
|
|
+ width: 180,
|
|
|
+ },
|
|
|
+ beforeFetch: (params) => {
|
|
|
+ return Object.assign(params, { column: 'createTime', });
|
|
|
+ },
|
|
|
+ },
|
|
|
+});
|
|
|
|
|
|
- //新增保存
|
|
|
- function saveOrUpdate(param){
|
|
|
- console.log(param,'新增参数----------')
|
|
|
- emit('saveAdd',param)
|
|
|
- }
|
|
|
-
|
|
|
- /**
|
|
|
- * 编辑事件
|
|
|
- */
|
|
|
- function handleEdit(data) {
|
|
|
- addOredit.value='edit'
|
|
|
- reportLogHis.value=''
|
|
|
- Object.assign(record, toRaw(data));
|
|
|
- let index = record.fileName.indexOf('.');
|
|
|
- fileType.value = record.fileName.substring(index + 1);
|
|
|
- editID.value = record.id;
|
|
|
- console.log(editID.value, '编辑文件ID');
|
|
|
- openModal(true, {
|
|
|
- record,
|
|
|
- });
|
|
|
+
|
|
|
+
|
|
|
+//注册table数据
|
|
|
+const [registerTable, { reload, getForm }, { rowSelection, selectedRowKeys }] = tableContext;
|
|
|
+
|
|
|
+
|
|
|
+/**
|
|
|
+ * 新增事件
|
|
|
+ */
|
|
|
+function handleAdd() {
|
|
|
+ addOredit.value = 'add'
|
|
|
+ for (let key in record) {
|
|
|
+ delete record[key];
|
|
|
}
|
|
|
-
|
|
|
- /**
|
|
|
- * 删除事件
|
|
|
- */
|
|
|
- async function handleDelete(record) {
|
|
|
- await props.deleteById({ id: record.id }, reload);
|
|
|
+ openModal(true);
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+//新增保存
|
|
|
+function saveOrUpdate(param) {
|
|
|
+ console.log(param, '新增参数----------')
|
|
|
+ emit('saveAdd', param)
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * 编辑事件
|
|
|
+ */
|
|
|
+function handleEdit(data) {
|
|
|
+ addOredit.value = 'edit'
|
|
|
+ reportLogHis.value = ''
|
|
|
+ Object.assign(record, toRaw(data));
|
|
|
+ let index = record.fileName.indexOf('.');
|
|
|
+ fileType.value = record.fileName.substring(index + 1);
|
|
|
+ editID.value = record.id;
|
|
|
+ console.log(editID.value, '编辑文件ID');
|
|
|
+ openModal(true, {
|
|
|
+ record,
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * 删除事件
|
|
|
+ */
|
|
|
+async function handleDelete(record) {
|
|
|
+ await props.deleteById({ id: record.id }, reload);
|
|
|
+}
|
|
|
+
|
|
|
+// 历史记录
|
|
|
+function handleHisrecord(data) {
|
|
|
+ addOredit.value = 'hisRecord'
|
|
|
+ Object.assign(record, toRaw(data));
|
|
|
+ reportId.value = record.id
|
|
|
+ console.log(reportId.value, '历史记录列表传参---00000000')
|
|
|
+ openModal(true, {
|
|
|
+ record,
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+//下载文件
|
|
|
+function handleDownLoad(record) {
|
|
|
+ console.log(record, '下载');
|
|
|
+ props.downLoad({ id: record.id }).then((res) => {
|
|
|
+ console.log(res, '文件下载成功');
|
|
|
+ let filename = `${record.fileName}`;
|
|
|
+ downFilePublic(res, filename);
|
|
|
+ });
|
|
|
+}
|
|
|
+// 下载公用方法
|
|
|
+function downFilePublic(content, fileName) {
|
|
|
+ const blob = new Blob([content], { type: 'application/xlsx;charset=UTF-8' }); // 构造一个blob对象来处理数据
|
|
|
+ // 对于<a>标签，只有 Firefox 和 Chrome（内核） 支持 download 属性
|
|
|
+ // IE10以上支持blob但是依然不支持download
|
|
|
+ if ('download' in document.createElement('a')) {
|
|
|
+ // 支持a标签download的浏览器
|
|
|
+ const link = document.createElement('a'); // 创建a标签
|
|
|
+ link.download = fileName; // a标签添加属性
|
|
|
+ link.style.display = 'none';
|
|
|
+ link.href = URL.createObjectURL(blob);
|
|
|
+ document.body.appendChild(link);
|
|
|
+ link.click(); // 执行下载
|
|
|
+ URL.revokeObjectURL(link.href); // 释放url
|
|
|
+ document.body.removeChild(link); // 释放标签
|
|
|
+ } else {
|
|
|
+ // 其他浏览器
|
|
|
+ navigator.msSaveBlob(blob, fileName);
|
|
|
}
|
|
|
+}
|
|
|
|
|
|
- // 历史记录
|
|
|
- function handleHisrecord(data){
|
|
|
- addOredit.value='hisRecord'
|
|
|
- Object.assign(record, toRaw(data));
|
|
|
- reportId.value=record.id
|
|
|
- console.log( reportId.value,'历史记录列表传参---00000000')
|
|
|
- openModal(true, {
|
|
|
- record,
|
|
|
- });
|
|
|
+defineExpose({
|
|
|
+ doRequest, onExportXls, onImportXls, reload, getForm
|
|
|
+});
|
|
|
+
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="less">
|
|
|
+@ventSpace: zxm;
|
|
|
+@vent-table-no-hover: #00bfff10;
|
|
|
+
|
|
|
+:deep(.@{ventSpace}-table-cell-row-hover) {
|
|
|
+ background: #264d8833 !important;
|
|
|
+}
|
|
|
+
|
|
|
+:deep(.@{ventSpace}-table-row-selected) {
|
|
|
+ background: #268bc522 !important;
|
|
|
+}
|
|
|
+
|
|
|
+:deep(.@{ventSpace}-table-tbody > tr > td) {
|
|
|
+ background-color: #0dc3ff05;
|
|
|
+}
|
|
|
+
|
|
|
+:deep(.jeecg-basic-table-row__striped) {
|
|
|
+ td {
|
|
|
+ background-color: @vent-table-no-hover !important;
|
|
|
}
|
|
|
+}
|
|
|
|
|
|
+:deep(.@{ventSpace}-select-dropdown) {
|
|
|
|
|
|
- //下载文件
|
|
|
- function handleDownLoad(record) {
|
|
|
- console.log(record, '下载');
|
|
|
- props.downLoad({ id: record.id }).then((res) => {
|
|
|
- console.log(res, '文件下载成功');
|
|
|
- let filename = `${record.fileName}`;
|
|
|
- downFilePublic(res, filename);
|
|
|
- });
|
|
|
+ .@{ventSpace}-select-item-option-selected,
|
|
|
+ .@{ventSpace}-select-item-option-active {
|
|
|
+ background-color: #ffffff33 !important;
|
|
|
}
|
|
|
- // 下载公用方法
|
|
|
- function downFilePublic(content, fileName) {
|
|
|
- const blob = new Blob([content], { type: 'application/xlsx;charset=UTF-8' }); // 构造一个blob对象来处理数据
|
|
|
- // 对于<a>标签，只有 Firefox 和 Chrome（内核） 支持 download 属性
|
|
|
- // IE10以上支持blob但是依然不支持download
|
|
|
- if ('download' in document.createElement('a')) {
|
|
|
- // 支持a标签download的浏览器
|
|
|
- const link = document.createElement('a'); // 创建a标签
|
|
|
- link.download = fileName; // a标签添加属性
|
|
|
- link.style.display = 'none';
|
|
|
- link.href = URL.createObjectURL(blob);
|
|
|
- document.body.appendChild(link);
|
|
|
- link.click(); // 执行下载
|
|
|
- URL.revokeObjectURL(link.href); // 释放url
|
|
|
- document.body.removeChild(link); // 释放标签
|
|
|
- } else {
|
|
|
- // 其他浏览器
|
|
|
- navigator.msSaveBlob(blob, fileName);
|
|
|
- }
|
|
|
+
|
|
|
+ .@{ventSpace}-select-item:hover {
|
|
|
+ background-color: #ffffff33 !important;
|
|
|
}
|
|
|
-
|
|
|
- defineExpose({
|
|
|
- doRequest, onExportXls, onImportXls, reload, getForm
|
|
|
- });
|
|
|
-
|
|
|
- </script>
|
|
|
-
|
|
|
- <style scoped lang="less">
|
|
|
- @ventSpace: zxm;
|
|
|
- @vent-table-no-hover: #00bfff10;
|
|
|
-
|
|
|
- :deep(.@{ventSpace}-table-cell-row-hover) {
|
|
|
- background: #264d8833 !important;
|
|
|
- }
|
|
|
- :deep(.@{ventSpace}-table-row-selected) {
|
|
|
- background: #268bc522 !important;
|
|
|
- }
|
|
|
-
|
|
|
- :deep(.@{ventSpace}-table-tbody > tr > td) {
|
|
|
- background-color: #0dc3ff05;
|
|
|
- }
|
|
|
- :deep(.jeecg-basic-table-row__striped) {
|
|
|
- td {
|
|
|
- background-color: @vent-table-no-hover !important;
|
|
|
- }
|
|
|
- }
|
|
|
- :deep(.@{ventSpace}-select-dropdown) {
|
|
|
- .@{ventSpace}-select-item-option-selected,
|
|
|
- .@{ventSpace}-select-item-option-active {
|
|
|
- background-color: #ffffff33 !important;
|
|
|
- }
|
|
|
-
|
|
|
- .@{ventSpace}-select-item:hover {
|
|
|
- background-color: #ffffff33 !important;
|
|
|
- }
|
|
|
- }
|
|
|
- </style>
|
|
|
-
|
|
|
+}
|
|
|
+</style>
|
