<!
-- 📚📚📚 Pro
-Table 文档
: https
://juejin
.cn/post/7166068828202336263
-->
<template>
<!
-- 查询表单
-->
<SearchForm
v
-show="isShowSearch"
:search="_search"
:reset="_reset"
:columns="searchColumns"
:search
-param="searchParam"
:search
-col="searchCol"
/>
<!
-- 表格主体
-->
<div class="card table
-main">
<!
-- 表格头部 操作按钮
-->
<div class="table
-header">
<div class="header
-button
-lf">
<slot name="tableHeader"
:selected
-list="selectedList"
:selected
-list
-ids="selectedListIds"
:is
-selected="isSelected" />
</div>
<div v
-if="toolButton" class="header
-button
-ri">
<slot name="toolButton">
<el
-button v
-if="showToolButton
('refresh'
)"
:icon="Refresh" circle @click="refresh
Data" />
<el
-button v
-if="showToolButton
('setting'
) && columns
.length"
:icon="Operation" circle @click="openColSetting" />
<el
-button
v
-if="showToolButton
('search'
) && searchColumns?
.length"
:icon="Search"
circle
@click="isShowSearch = !isShowSearch"
/>
</slot>
</div>
</div>
<!
-- 表格上方的提示信息
-->
<div v
-if="tableTipsFlag">
<slot name="tableTips"></slot>
</div>
<!
-- 表格主体
-->
<el
-table
ref="tableRef"
v
-bind="$attrs"
:data="processTable
Data"
:border="border"
:row
-key="rowKey"
@selection
-change="selectionChange"
>
<!
-- 默认插槽
-->
<slot />
<template v
-for="item in tableColumns"
:key="item">
<!
-- selection || radio || index || expand || sort
-->
<el
-table
-column v
-if="item
.type && columnTypes
.includes
(item
.type
)" v
-bind="item"
:align="item
.align ?? 'center'"
:reserve
-selection="item
.type == 'selection'"
:selectable="item
.isSelectable">
<template #default="scope">
<!
-- expand
-->
<template v
-if="item
.type == 'expand'">
<component
:is="item
.render" v
-bind="scope" v
-if="item
.render" />
<slot v
-else
:name="item
.type" v
-bind="scope" />
</template>
<!
-- radio
-->
<el
-radio v
-if="item
.type == 'radio'" v
-model="radio"
:label="scope
.row[rowKey]">
<!
-- <i></i>
-->
</el
-radio>
<!
-- sort
-->
<el
-tag v
-if="item
.type == 'sort'" class="move">
<el
-icon> <DCaret /></el
-icon>
</el
-tag>
</template>
</el
-table
-column>
<!
-- other
-->
<TableColumn v
-if="!item
.type && item
.prop && item
.isShow"
:column="item">
<template v
-for="slot in Object
.keys
($slots
)" #[slot]="scope">
<slot
:name="slot" v
-bind="scope" />
</template>
</TableColumn>
</template>
<!
-- 插入表格最后一行之后的插槽
-->
<template #append>
<slot name="append" />
</template>
<!
-- 无数据
-->
<template #empty>
<div class="table
-empty">
<slot name="empty">
<img src="@/assets/images/not
Data.png" alt="not
Data" />
<div>暂无数据</div>
</slot>
</div>
</template>
</el
-table>
<!
-- 分页组件
-->
<slot name="pagination">
<Pagination
v
-if="pagination"
:pageable="pageable"
:handle
-size
-change="handleSizeChange"
:handle
-current
-change="handleCurrentChange"
/>
</slot>
</div>
<!
-- 列设置
-->
<ColSetting v
-if="toolButton" ref="colRef" v
-model
:col
-setting="colSetting" />
</template>
<script setup lang="ts" name="ProTable">
import { ref, watch, provide, onMounted, unref, computed, reactive } from "vue";
import { ElTable } from "element
-plus";
import { useTable } from "@/hooks/useTable";
import { useSelection } from "@/hooks/useSelection";
import { BreakPoint } from "@/components/Grid/interface";
import { ColumnProps, TypeProps } from "@/components/ProTable/interface";
import { Refresh, Operation, Search } from "@element
-plus/icons
-vue";
import { handleProp } from "@/utils";
import SearchForm from "@/components/SearchForm/index
.vue";
import Pagination from "
./components/Pagination
.vue";
import ColSetting from "
./components/ColSetting
.vue";
import TableColumn from "
./components/TableColumn
.vue";
import Sortable from "sortablejs";
export interface ProTableProps {
columns
: ColumnProps[]; // 列配置项 ==> 必传
data?
: any[]; // 静态 table
data 数据，若存在则不会使用 requestApi 返回的
data ==> 非必传
requestApi?
: (params
: any
) => Promise<any>; // 请求表格数据的 api ==> 非必传
requestAuto?
: boolean; // 是否自动执行请求 api ==> 非必传（默认为true）
requestError?
: (params
: any
) => void; // 表格 api 请求错误监听 ==> 非必传
dataCallback?
: (data: any
) => any; // 返回数据的回调函数，可以对数据进行处理 ==> 非必传
title?
: string; // 表格标题 ==> 非必传
pagination?
: boolean; // 是否需要分页组件 ==> 非必传（默认为true）
initParam?
: any; // 初始化请求参数 ==> 非必传（默认为{}）
border?
: boolean; // 是否带有纵向边框 ==> 非必传（默认为true）
toolButton?
: ("refresh" | "setting" | "search"
)[] | boolean; // 是否显示表格功能按钮 ==> 非必传（默认为true）
rowKey?
: string; // 行数据的 Key，用来优化 Table 的渲染，当表格数据多选时，所指定的 id ==> 非必传（默认为 id）
searchCol?
: number | Record<BreakPoint, number>; // 表格搜索项 每列占比配置 ==> 非必传 { xs
: 1, sm
: 2, md
: 2, lg
: 3, xl
: 4 }
tableTipsFlag?
: boolean; // 表格上方的提示信息 ==> 非必传 （默认为false）
}
// 接受父组件参数，配置默认值
const props = withDefaults
(defineProps<ProTableProps>
(), {
columns
: () => [],
requestAuto
: true,
pagination
: true,
initParam
: {},
border
: true,
toolButton
: true,
rowKey
: "id",
searchCol
: () =>
({ xs
: 1, sm
: 3, md
: 3, lg
: 4, xl
: 5 }
),
tableTipsFlag
: false
}
);
// table 实例
const tableRef = ref<InstanceType<type
of ElTable>>
();
// column 列类型
const columnTypes
: TypeProps[] = ["selection", "radio", "index", "expand", "sort"];
// 是否显示搜索模块
const isShowSearch = ref
(true
);
// 控制 ToolButton 显示
const showToolButton =
(key
: "refresh" | "setting" | "search"
) => {
return Array
.isArray
(props
.toolButton
) ? props
.toolButton
.includes
(key
) : props
.toolButton;
};
// 单选值
const radio = ref
(""
);
// 表格多选 Hooks
const { selectionChange, selectedList, selectedListIds, isSelected } = useSelection
(props
.rowKey
);
// 表格操作 Hooks
const { table
Data, pageable, searchParam, searchInitParam, getTableList, search, reset, handleSizeChange, handleCurrentChange } =
useTable
(props
.requestApi, props
.initParam, props
.pagination, props
.dataCallback, props
.requestError, tableRef
);
// 清空选中数据列表
const clearSelection =
() => tableRef
.value!
.clearSelection
();
// 初始化表格数据 && 拖拽排序
onMounted
(() => {
dragSort
();
props
.requestAuto && getTableList
();
props
.data &&
(pageable
.value.total = props
.data.length
);
}
);
// 处理表格数据
const processTable
Data = computed
(() => {
if
(!props
.data) return table
Data.value;
if
(!props
.pagination
) return props
.data;
return props
.data.slice
(
(pageable
.value.pageNum
- 1
) * pageable
.value.pageSize,
pageable
.value.pageSize * pageable
.value.pageNum
);
}
);
// 监听页面 initParam 改化，重新获取表格数据
watch
(() => props
.initParam,
() => {
// 将初始化initParam参数赋值给表单
searchParam
.value = {
...searchParam
.value,
...props
.initParam,
};
getTableList
()
}, { deep
: true }
);
// 接收 columns 并设置为响应式
const tableColumns = reactive<ColumnProps[]>
(props
.columns
);
// 扁平化 columns
const flatColumns = computed
(() => flatColumnsFunc
(tableColumns
));
// 定义 enumMap 存储 enum 值（避免异步请求无法格式化单元格内容 || 无法填充搜索下拉选择）
const enumMap = ref
(new Map<string, { [key
: string]
: any }[]>
());
const setEnumMap = async
({ prop, enum
: enum
Value }
: ColumnProps
) => {
if
(!enum
Value) return;
// 如果当前 enumMap 存在相同的值 return
if
(enumMap
.value.has
(prop!
) &&
(type
of enum
Value === "function" || enumMap
.value.get
(prop!
) === enum
Value)) return;
// 当前 enum 为静态数据，则直接存储到 enumMap
if
(type
of enum
Value !== "function"
) return enumMap
.value.set
(prop!, unref
(enum
Value!
));
// 为了防止接口执行慢，而存储慢，导致重复请求，所以预先存储为[]，接口返回后再二次存储
enumMap
.value.set
(prop!, []
);
// 当前 enum 为后台数据需要请求数据，则调用该请求接口，并存储到 enumMap
const {
data } = await enum
Value();
enumMap
.value.set
(prop!,
data);
};
const refresh
Data =
() => {
pageable
.value.pageNum = 1;
getTableList
();
};
// 注入 enumMap
provide
("enumMap", enumMap
);
// 扁平化 columns 的方法
const flatColumnsFunc =
(columns
: ColumnProps[], flatArr
: ColumnProps[] = []
) => {
columns
.forEach
(async col => {
if
(col
._children?
.length
) flatArr
.push
(...flatColumnsFunc
(col
._children
));
flatArr
.push
(col
);
// column 添加默认 isShow && isFilterEnum 属性值
col
.isShow = col
.isShow ?? true;
col
.isFilterEnum = col
.isFilterEnum ?? true;
// 设置 enumMap
await setEnumMap
(col
);
}
);
return flatArr
.filter
(item => !item
._children?
.length
);
};
// 过滤需要搜索的配置项 && 排序
const searchColumns = computed
(() => {
return flatColumns
.value
?
.filter
(item => item
.search?
.el || item
.search?
.render
)
.sort
((a, b
) => a
.search!
.order!
- b
.search!
.order!
);
}
);
// 设置 搜索表单默认排序 && 搜索表单项的默认值
searchColumns
.value?
.forEach
((column, index
) => {
column
.search!
.order = column
.search?
.order ?? index + 2;
const key = column
.search?
.key ?? handleProp
(column
.prop!
);
const default
Value = column
.search?
.default
Value;
if
(default
Value !== undefined && default
Value !== null
) {
searchInitParam
.value[key] = default
Value;
searchParam
.value[key] = default
Value;
}
}
);
// 列设置 ==> 需要过滤掉不需要设置的列
const colRef = ref
();
const colSetting = tableColumns!
.filter
(item => {
const { type, prop, isShow } = item;
return !columnTypes
.includes
(type!
) && prop !== "operation" && isShow;
}
);
const openColSetting =
() => colRef
.value.openColSetting
();
// 定义 emit 事件
const emit = defineEmits<{
search
: [];
reset
: [];
dargSort
: [{ newIndex?
: number; oldIndex?
: number }];
}>
();
const _search =
() => {
search
();
emit
("search"
);
};
const _reset =
() => {
reset
();
emit
("reset"
);
};
// 拖拽排序
const dragSort =
() => {
const tbody = document
.querySelector
("
.el
-table__body
-wrapper tbody"
) as HTMLElement;
Sortable
.create
(tbody, {
handle
: "
.move",
animation
: 300,
onEnd
({ newIndex, oldIndex }
) {
const [removedItem] = processTable
Data.value.splice
(oldIndex!, 1
);
processTable
Data.value.splice
(newIndex!, 0, removedItem
);
emit
("dargSort", { newIndex, oldIndex }
);
}
}
);
};
// 暴露给父组件的参数和方法
(外部需要什么，都可以从这里暴露出去
)
defineExpose
({
element
: tableRef,
table
Data: processTable
Data,
radio,
pageable,
searchParam,
searchInitParam,
getTableList,
search,
reset,
handleSizeChange,
handleCurrentChange,
clearSelection,
enumMap,
isSelected,
selectedList,
selectedListIds,
refresh
Data: getTableList // 暴露刷新方法
}
);
</script>
import { ref, computed } from "vue";
/**
* @description 表格多选数据操作
* @param {String} rowKey 当表格可以多选时，所指定的 id
* */
export const useSelection =
(rowKey
: string = "id"
) => {
const isSelected = ref<boolean>
(false
);
const selectedList = ref<{ [key
: string]
: any }[]>
([]
);
// 当前选中的所有 ids 数组
const selectedListIds = computed
((): string[] => {
let ids
: string[] = [];
selectedList
.value.forEach
(item => ids
.push
(item[rowKey]
));
return ids;
}
);
/**
* @description 多选操作
* @param {Array} rowArr 当前选择的所有数据
* @return void
*/
const selectionChange =
(rowArr
: { [key
: string]
: any }[]
) => {
rowArr
.length ?
(isSelected
.value = true
) : (isSelected
.value = false
);
selectedList
.value = rowArr;
};
return {
isSelected,
selectedList,
selectedListIds,
selectionChange
};
};
<template>
<div class="table
-box">
<ProTable ref="proTable"
:columns="columns"
:request
-api="getTableList"
:data-callback="
dataCallback">
<!
-- 表格 header 按钮
-->
<template #tableHeader="scope">
<el
-button type="primary" v
-if="hasBtnPermission
('asset
:inventory
:save'
)" @click="addNew
Data('新增资产','add',{}
)">新增资产</el
-button>
<el
-button type="primary" v
-if="hasBtnPermission
('asset
:inventory
:update'
)" @click="batcEdit
(scope
.selectedListIds
)">批量编辑</el
-button>
<el
-button type="primary" v
-if="hasBtnPermission
('asset
:inventory
:delete'
)" @click="batchDelete
(scope
.selectedListIds
)">批量删除</el
-button>
<el
-dropdown style="margin
-left
: 10px" v
-if="hasBtnPermission
('asset
:inventory
:download
Data'
)" @command="batchExport">
<el
-button type="primary">
批量导出<i class="el
-icon
-arrow
-down el
-icon
--right"></i>
</el
-button>
<template #dropdown>
<el
-dropdown
-menu>
<el
-dropdown
-item command="1">导出所选数据</el
-dropdown
-item>
<el
-dropdown
-item command="2">导出全部</el
-dropdown
-item>
</el
-dropdown
-menu>
</template>
</el
-dropdown>
<el
-button type="primary" @click="openTagPrint
(scope
.selectedListIds
)" v
-if="hasBtnPermission
('asset
:inventory
:printMark'
)" style="margin
-left
: 10px">打印资产标签</el
-button>
</template>
<el
-table
-column type="selection" width="55"></el
-table
-column>
<!
-- 图片
-->
<el
-table
-column prop="imageUrl" label="图片" minWidth="100px" class
-name="is
-center">
<template #default="{ row }">
<div class="more_imgs" v
-if="row
.imageUrlList && row
.imageUrlList
.length > 0">
<viewer
:images="row
.imageUrlList">
<span class="viewImage" v
-for="
(itemImg, index
) in row
.imageUrlList"
:key="index">
<img v
-if="itemImg"
:src="itemImg" style="width
: 100%; height
: 100%" />
</span>
</viewer>
</div>
</template>
</el
-table
-column>
<template #expand="scope">
{{ scope
.row }}
</template>
<template #operation="scope" v
-if="hasBtnPermission
('asset
:inventory
:update'
)" >
<el
-button type="primary" link @click="edit
Data('编辑资产','edit', scope
.row
)">编辑</el
-button>
</template>
</ProTable>
<!
-- 选择新增资产类型
-->
<div class="new
-Dialog-type" v
-if="
dialogFormVisible">
<el
-dialog
v
-model="
dialogFormVisible"
title="选择资产类型"
width="450"
draggable
>
<el
-form ref="ruleFormRef"
:model="form"
:rules="rules" label
-width="93px">
<el
-form
-item label="类型" prop="type">
<el
-select v
-model="form
.type" placeholder="请选择">
<el
-option v
-for="item in assetType"
:key="item
.value"
:label="item
.label"
:value="item
.value"></el
-option>
</el
-select>
</el
-form
-item>
<el
-form
-item label="非标准资产" v
-if="form
.type === 2" prop="nonStandardAssetsId">
<el
-select v
-model="form
.nonStandardAssetsId" placeholder="请选择">
<el
-option v
-for="item in nonstandard
Data"
:key="item
.id"
:label="item
.name"
:value="item
.id"
:disabled="item
.status == 0" ></el
-option>
</el
-select>
</el
-form
-item>
</el
-form>
<template #footer>
<div class="
dialog-footer">
<el
-button @click="close
Dialog">取消</el
-button>
<el
-button type="primary" @click="nextTips
('新增资产','add',{}
)">下一步</el
-button>
</div>
</template>
</el
-dialog>
</div>
<!
-- 编辑，批量编辑，新增组件
-->
<addAsset ref="addAssetRef" @previous
-step="handlePreviousStep"/>
<!
-- 详情公共组件
-->
<assetInfo ref="assetInfoRef"></assetInfo>
</div>
</template>
<script setup lang="tsx" name="assetInventory">
import { ref, reactive, inject, onMounted,nextTick } from "vue";
import ProTable from "@/components/ProTable/index
.vue";
import { assetList
Data ,queryGroupList,addAssetList,deleteAssetList,assetListDown,editBatchAssetList,assetListInfo,editAssetList} from "@/api/modules/assetAllocation";
import { ProTableInstance } from "@/components/ProTable/interface";
import { setTree
Data,formatToTree } from "@/utils/tools";
import { assetClassificationList,getPositionList,set
ValueClildList,nonstandardList,getOrgSubjectList,getInstitution } from '@/api/modules/public';
import { getUserDepartment } from "@/api/modules/user";
import { assetListType,assetType,markStatusType } from "@/utils/dict";
import { da, fa, pa } from "element
-plus/es/locale";
import addAsset from "
./mode/addAsset
.vue";
import assetInfo from "
./mode/assetInfo
.vue";
import { useHandle
Data } from "@/hooks/useHandle
Data";
import { ElMessage, FormInstance } from "element
-plus";
import { printAssetMark } from "@/api/modules/assetAllocation";
import moment from "moment";
const hasBtnPermission
: any = inject
('hasBtnPermission'
);
// ProTable 实例
const proTable = ref<ProTableInstance>
();
// 子界面需要用到的设置值
const configuration = reactive
({
assetCategory
: [], // 资产分类
positionList
: [], // 存放地点
departmentList
: [], // 使用部门
sourceList
: [], // 资产来源
nonstandardList
: [], // 非标准资产
unitList
:[], // 计量单位
institutionalEntity
:[], //机构主体
assentityList
:[], // 主体
assinstitutional
:[],//机构
}
)
const selectedIds = ref<string[]>
([]
); // 在组件顶部定义
// 非标准资产
const nonstandard
Data = ref
([]
);
const assentityList = ref
([]
)
const assinstitutional = ref
([]
)
// 资产类型弹窗
const
dialogFormVisible = ref
(false
)
const form = reactive
({
type
:'',
nonStandardAssetsId
:''
}
)
const rules = reactive
({
type
: [{ required
: true, message
: "请选择资产类型", trigger
: ["blur", "change"] }],
nonStandardAssetsId
: [{ required
: true, message
: "请选择非标准资产", trigger
: ["blur", "change"] }],
}
)
const getTableList =
(params
: any
) => {
if
(params
.purchaseDate
) {
params
.purchaseDateStart = params
.purchaseDate[0] + ' 00
:00
:00';
params
.purchaseDateEnd= params
.purchaseDate[1] + ' 23
:59
:59';
delete params
.purchaseDate;
}
if
(params
.maintenanceExpirationDate
) {
params
.maintenanceExpirationDateStart = params
.maintenanceExpirationDate[0] + ' 00
:00
:00';
params
.maintenanceExpirationDateEnd = params
.maintenanceExpirationDate[1] + ' 23
:59
:59';
delete params
.maintenanceExpirationDate;
}
if
(params
.useUserName
Data) {
params
.useUserNameList = params
.useUserName
Data.split
('\n'
);
delete params
.useUserName
Data
}
if
(params
.assetCode
Data) {
params
.assetCodeList = params
.assetCode
Data.split
('\n'
);
delete params
.assetCode
Data
}
return assetList
Data(params
)
}
const refreshTable =
() => {
proTable
.value!
.pageable
.pageNum = 1;
proTable
.value?
.refresh
Data();
// 清除表格勾选项
if
(proTable
.value) {
proTable
.value.clearSelection
();
}
};
const
dataCallback =
(data: any
) => {
const
dataList =
data?
.dataList || [];
const processedList =
dataList
.map
(item => {
try {
return {
...item,
imageUrlList
: type
of item?
.imageUrl === 'string' ? item
.imageUrl
.split
(','
) : [],
purchaseDate
: item
.purchaseDate ? item
.purchaseDate
.split
(" "
)[0]
: ''
};
} catch
(error
) {
return {
...item, imageUrlList
: [] };
}
}
);
return {
list
: processedList,
total
: data?
.totalCount,
pageNum
: data?
.page,
pageSize
: data?
.pageSize
};
};
// 查询计量单位
const getUnitList = async
() => {
const response = await set
ValueClildList
({dictCode
: 'UNIT_MEASUREMENT'}
);
const
data = response
.data || [];
configuration
.unitList =
data
}
// 查询机构主体
const getOrgSubjectList
Data = async
() => {
// 机构
const responseAss = await getInstitution
({ id
: 'ASS_INSTITUTIONAL' }
);
const
data = responseAss
.data || [];
if
(data &&
data.length > 0
) {
configuration
.assinstitutional =
data
assinstitutional
.value =
data
}
// 主体
const response = await getInstitution
({ id
: '
OFFICIAL_SEAL_ORG' }
);
const
data1 = response
.data || [];
if
(data1 &&
data1
.length > 0
) {
configuration
.assentityList =
data1
assentityList
.value =
data1
}
// 机构主体（二和一接口），用来把主体，机构以及部门三者关联起来，单独调用上面接口，主要是为了排序好看，无语子
......
const res = await getOrgSubjectList
({}
);
const
data2 = res
.data || [];
if
(data &&
data.length > 0
) {
configuration
.institutionalEntity =
data2
}
}
const formatToDepTree =
(arr, pid = 0
) =>{
let result = [];
for
(let i = 0; i < arr
.length; i++
) {
if
(arr[i]
.pid === pid
) {
arr[i]
.label = arr[i]
.name
let children = formatToDepTree
(arr, arr[i]
.workOADepartmentId
);
if
(children
.length > 0
) {
arr[i]
.children = children;
}
result
.push
(arr[i]
);
}
}
return result;
}
// 表格配置项
const columns = reactive
([
{
prop
: "assetStatus",
label
: "资产状态",
fixed
: "left",
minWidth
:100 ,
enum
: assetListType,
search
: { el
: "select", props
: { filterable
: true } },
render
: scope => {
if
(scope
.row
.assetStatus == '1'
) {
return
(
<span style="color
: #49c625">空闲</span>
);
} else if
(scope
.row
.assetStatus == '2'
) {
return
(
<span style="color
: #ff7f00">在用</span>
);
} else if
(scope
.row
.assetStatus == '3'
) {
return
(
<span style="color
: #1890ff">已处置</span>
);
}
}
},
{
prop
: "markStatus",
label
: "资产标记",
isShow
:false,
enum
:markStatusType,
search
: { el
: "select", props
: { filterable
: true } },
fieldNames
: { label
: "label",
value: "
value" }
},
{ prop
: "markTagsName",
label
: "资产标记",
fixed
: "left",
minWidth
:100 ,
render
: scope => {
if
(scope
.row
.markTags == '0'
) {
return
(
<span style="color
: #49c625">派发待领用</span>
);
} else if
(scope
.row
.markTags == '1'
) {
return
(
<span style="color
: #ff7f00">领用审批中</span>
);
} else if
(scope
.row
.markTags == '2'
) {
return
(
<span style="color
: #ff7f00">退还审批中</span>
);
} else if
(scope
.row
.markTags == '3'
) {
return
(
<span style="color
: #ff7f00">借用审批中</span>
);
} else if
(scope
.row
.markTags == '4'
) {
return
(
<span style="color
: #1890ff">借用</span>
);
} else if
(scope
.row
.markTags == '5'
) {
return
(
<span style="color
: #ff7f00">调拨审批中</span>
);
} else if
(scope
.row
.markTags == '6'
) {
return
(
<span style="color
: #ff7f00">维修审批中</span>
);
} else if
(scope
.row
.markTags == '7'
) {
return
(
<span style="color
: #ff7f00">处置审批中</span>
);
} else if
(scope
.row
.markTags == '8'
) {
return
(
<span style="color
: #ff0000">待处理</span>
);
} else if
(scope
.row
.markTags == '9'
) {
return
(
<span style="color
: #ff7f00">归还审批中</span>
);
}
}
},
{ prop
: "assetCode
Data",
label
: "资产编码",
isShow
:false,
search
: { el
: "input", type
: 'textarea', placeholder
: '多个编码请换行' } ,
minWidth
:100,
},
{
prop
: "assetCode",
label
: "资产编码",
fixed
: "left",
minWidth
:100,
render
: (scope
) => {
return
(
<span style="color
: #49c625" onClick={
() => handleAssetCodeClick
(scope
.row
)}>
{scope
.row
.assetCode}
</span>
);
}
},
{ prop
: "assetName", label
: "资产名称", fixed
: "left", search
: { el
: "input" },minWidth
:100 },
{
prop
: "assetCategoryName",
label
: "资产分类",
minWidth
:100 ,
},
{
prop
: "assetCategoryIdList",
label
: "资产分类",
isShow
:false,
enum
: async
() => {
// 获取资产分类数据，扁平数据
const {
data } = await assetClassificationList
({}
);
const tree
Data = formatToTree
(data);
configuration
.assetCategory = tree
Data;
return {
data: tree
Data }
},
fieldNames
: { label
: "categoryName",
value: "id" },
search
: {
el
: "tree
-select", props
: {
filterable
: true,
multiple
: true,
checkStrictly
: true, // 允许选择父节点
nodeKey
: "id", // 每个节点的唯一标识字段
props
: {
label
: "label",
value: "id",
children
: "children"
}
}
},
},
{
prop
: "nonStandardAssetsId",
label
: "资产类型",
minWidth
:100 ,
isShow
:false,
},
{ prop
: "type", label
: "资产类型", minWidth
:100 ,enum
: assetType, search
: { el
: "select", props
: { filterable
: true } },},
{ prop
: "useUserName", label
: "使用人" },
{ prop
: "useUserName
Data", label
: "使用人", isShow
:false, search
: { el
: "input", type
: 'textarea', placeholder
: '多个使用人请换行' } },
{
prop
: "useOrgIdList",
label
: "使用机构",
search
: { el
: "select", props
: {
filterable
: true,
multiple
: true}},
minWidth
:100 ,
enum
: assinstitutional,
isShow
:false,
fieldNames
: { label
: "name",
value: "detailCode" },
},
{ prop
: "useOrgName",
label
: "使用机构",
minWidth
:100 ,
},
{ prop
: "useSubjectId",
label
: "使用主体",
search
: { el
: "select" } ,
minWidth
:100 ,
enum
: assentityList,
isShow
:false,
fieldNames
: { label
: "remarks",
value: "detailCode" },
},
{ prop
: "useSubjectName",
label
: "使用主体",
minWidth
:100 ,
},
{ prop
: "useDepartmentId",
label
: "使用部门",
minWidth
:100 ,
enum
: async
() => {
// 获取部门数据
const {
data } = await getUserDepartment
();
data.forEach
(item => {
item
.pid = item
.extMap
.parentWorkOADepartmentId
item
.workOADepartmentId = item
.value
item
.id = item
.value
item
.name = item
.label
}
)
const tree
Data = formatToDepTree
(data);
configuration
.departmentList = tree
Data
return {
data: tree
Data }
},
fieldNames
: { label
: "label",
value: "
value" },
search
: {
el
: "tree
-select",
props
: {
filterable
: true,
multiple
: true,
checkStrictly
: true, // 允许选择父节点
nodeKey
: "
value", // 每个节点的唯一标识字段
props
: {
label
: "label",
value: "
value",
children
: "children"
}
}
}
},
{
prop
: "useDepartmentName",
label
: "使用部门",
isShow
:false,
minWidth
:100 ,
},
{
prop
: "storageLocationIdList",
label
: "存放地点",
minWidth
:100 ,
isShow
:false,
enum
: async
() => {
// 获取存放地点
const {
data } = await getPositionList
({ pageNum
: 1, pageSize
: 9999 }
);
const deepCopy = JSON
.parse
(JSON
.stringify
(data['
dataList']
));
configuration
.positionList = deepCopy;
return {
data: data['
dataList'] };
},
fieldNames
: { label
: "position",
value: "id" },
search
: { el
: "select", props
: { filterable
: true , multiple
: true} },
},
{
prop
: "storageLocationName",
label
: "存放地点",
minWidth
:100 ,
},
{ prop
: "adminName", label
: "管理员", search
: { el
: "input" } },
{ prop
: "affiliatedInstitutionName", label
: "所属机构",minWidth
:100 },
{ prop
: "affiliatedInstitutionIdList", label
: "所属机构", isShow
:false, search
: { el
: "select" , props
: { filterable
: true , multiple
: true}},minWidth
:100 ,enum
: assinstitutional,
fieldNames
: { label
: "name",
value: "detailCode" }, },
{ prop
: "affiliatedSubjectName", label
: "所属主体",minWidth
:100 },
{ prop
: "affiliatedSubjectId", label
: "所属主体", isShow
:false, search
: { el
: "select" },minWidth
:100,enum
: assentityList,
fieldNames
: { label
: "remarks",
value: "detailCode" } },
{
prop
: "assetSourceTypeList",
label
: "资产来源",
isShow
:false,
enum
: async
() => {
// 获取资产来源
const
data = await set
ValueClildList
({dictCode
:'SOURCE_ASSETS'}
);
configuration
.sourceList =
data['
data']
return {
data: data['
data'] }
},
fieldNames
: { label
: "itemLabel",
value: "item
Value" },
search
: { el
: "select", props
: { filterable
: true , multiple
: true}},
},
{
prop
: "sourceCode",
label
: "资产来源",
minWidth
:100 ,
},
{ prop
: "brand", label
: "品牌", search
: { el
: "input" }, },
{ prop
: "specificationModel", label
: "规格型号", search
: { el
: "input" },minWidth
:100 },
{ prop
: "serialNumber", label
: "序列号", search
: { el
: "input" } },
{ prop
: "measurementUnit", label
: "计量单位",minWidth
:100 },
{ prop
: "remarks", label
: "备注",search
: { el
: "input" } },
{
prop
: "supplierName", label
: "供应商", search
: { el
: "input" },
},
{ prop
: "inBoundNo", label
: "入库单号",minWidth
:100 },
{
prop
: "nonStandardAssetsId",
label
: "非标准资产",
enum
: async
() => {
// 获取非标准资产
const
data = await nonstandardList
({}
);
nonstandard
Data.value =
data
configuration
.nonstandardList =
data
return {
data: data }
},
isShow
: false,
fieldNames
: { label
: "name",
value: "id" },
search
: { el
: "select", props
: { filterable
: true } },
},
{
prop
: "purchaseDate",
label
: "购入日期",
minWidth
:148 ,
search
: {
el
: "date
-picker",
span
: 2,
props
: { type
: "date
range",
valueFormat
: "YYYY
-MM
-DD" },
},
},
{
prop
: "maintenanceExpirationDate",
label
: "维保到期日期",
isShow
: false,
search
: {
el
: "date
-picker",
span
: 2,
props
: { type
: "date
range",
valueFormat
: "YYYY
-MM
-DD" },
},
},
{ prop
: "operation", label
: "操作",fixed
: "right", isShow
: true, sortable
: false }
]
)
// 批量导出
const batchExport = async
(command
: any
) => {
try {
const selectedIds = proTable
.value?
.selectedListIds || [];
// 验证选择（如果command不是2，则需要选择数据）
if
(command != 2 && selectedIds
.length === 0
) {
ElMessage
.error
({ message
: `请选择要操作的数据` }
);
return;
}
const params = {
idList
: command === 2 ? []
: selectedIds // command=2表示导出全部
};
// 1
. 获取文件数据（确保response是Blob或ArrayBuffer）
const response = await assetListDown
(params
);
// 2
. 检查响应数据是否有效
if
(!response
) {
ElMessage
.error
("导出失败：未获取到文件数据"
);
return;
}
// 3
. 创建Blob对象（明确指定MIME类型）
const blob = new Blob
([response], {
type
: "application/vnd
.openxmlformats
-officedocument
.spreadsheetml
.sheet;charset=utf
-8"
}
);
// 4
. 创建下载链接
const url = window
.URL
.createObjectURL
(blob
);
const link = document
.createElement
("a"
);
link
.href = url;
link
.download = `资产清单_${new Date
().toLocaleDateString
()}
.xlsx`; // 添加日期避免重复
// 5
. 触发下载
document
.body
.appendChild
(link
);
link
.click
();
// 6
. 清理
setTime
out(() => {
document
.body
.removeChild
(link
);
window
.URL
.revokeObjectURL
(url
);
}, 100
);
} catch
(error
) {
console
.error
("导出失败
:", error
);
}
};
// 批量删除
const batchDelete = async
(ids
: string[]
) => {
if
(ids && ids
.length === 0
) {
ElMessage
.error
({ message
: `请选择要操作的数据` }
);
return
}
await useHandle
Data(deleteAssetList, { idList
: ids }, `确认删除`
);
refreshTable
()
}
// 批量编辑
const batcEdit = async
(ids
: string[]
) => {
if
(ids && ids
.length === 0
) {
ElMessage
.error
({ message
: `请选择要操作的数据` }
);
return;
}
// 从表格中获取当前所有选中的行数据
const selectedRows = proTable
.value?
.selectedList || [];
const types = selectedRows
.map
(row => row
.type
);
const uniqueTypes = [
...new Set
(types
)];
if
(uniqueTypes
.length > 1
) {
ElMessage
.warning("只能选择相同类型的资产进行批量编辑"
);
return;
}
selectedIds
.value = ids;
editBatch
Data('批量编辑', 'batchEdit', {}
);
}
// 打印标签
const openTagPrint = async
(ids
: string[]
) => {
if
(ids && ids
.length === 0
) {
ElMessage
.error
({ message
: `请选择要操作的数据` }
);
return
}
const
data = await printAssetMark
({ idList
: ids }
);
if
(data.code == 0
) {
ElMessage
.success
({ message
: data.msg }
);
refreshTable
()
} else {
ElMessage
.error
({ message
: data.msg }
);
}
}
const close
Dialog =
() => {
dialogFormVisible
.value = false
// 清除表格勾选项
if
(proTable
.value) {
proTable
.value.clearSelection
();
}
}
// 子组件的上一步操作
const handlePreviousStep =
() => {
dialogFormVisible
.value = true; // 重新打开对话框
// if
( Type
.value == 'batchEdit'
) {}
// 回显之前选择的数据（form 已在 openDrawer 时保存）
nextTick
(() => {
ruleFormRef
.value?
.clearValidate
(); // 清除校验状态
}
);
proTable
.value!
.setCheckedRows
(proTable
.value?
.selectedList
);
// console
.log
('proTable
.value',proTable
.value?
.selectedList
)
// proTable
.value!
.toggleRowSelection
(proTable
.value?
.selectedList[0]
)
// rows
.forEach
((row
) => {
// multipleTableRef
.value!
.toggleRowSelection
(
// row,
// undefined,
// ignoreSelectable
//
)
// }
)
};
const Title = ref
(""
);
const Type = ref
('add'
)
const Row = ref
({}
)
// 新增
const addNew
Data =
(title
: string,type
:string, row
: any = {}
) => {
Title
.value = title
Type
.value = type
Row
.value = row
// 清空表单值
form
.type = '';
form
.nonStandardAssetsId = '';
// 重置表单校验状态
nextTick
(() => {
ruleFormRef
.value?
.resetFields
();
}
);
dialogFormVisible
.value = true
}
// 编辑
const edit
Data = async
(title
: string,type
:string, row
: any = {}
) => {
const {code ,
data ,msg} = await assetListInfo
({ id
: row
.id }
);
if
(code == 0
) {
form
.type = row
.type
form
.nonStandardAssetsId = ''
let list
Data = [
data]
Title
.value = title
Type
.value = type
Row
.value = list
Data
openDrawer
()
} else {
ElMessage
.error
(msg
);
}
}
// 批量编辑
const editBatch
Data =
(title
: string,type
:string, row
: any = {}
) => {
Title
.value = title
Type
.value = type
Row
.value = row
// 清空表单值
form
.type = '';
form
.nonStandardAssetsId = '';
// 重置表单校验状态
nextTick
(() => {
ruleFormRef
.value?
.resetFields
();
}
);
dialogFormVisible
.value = true
}
// 查看详情
const assetInfoRef = ref<InstanceType<type
of addAsset> | null>
(null
);
const handleAssetCodeClick = async
(row
: any
) => {
const params = {
row
:{
...row},
api
:deleteAssetList,
configuration
:configuration,
refreshTable
: () => {
proTable
.value!
.pageable
.pageNum = 1;
proTable
.value?
.refresh
Data();
}
}
assetInfoRef
.value?
.acceptParams
(params
)
}
// 下一步
const nextTips =
() => {
ruleFormRef
.value!
.validate
(async valid => {
if
(!valid
) return;
try {
openDrawer
()
} catch
(error
) {
console
.log
(error
);
}
}
)
}
// 新增/编辑
const ruleFormRef = ref<FormInstance>
();
const addAssetRef = ref<InstanceType<type
of addAsset> | null>
(null
);
const open
Dialog =
() => {
// 清空表单值
form
.type = '';
form
.nonStandardAssetsId = '';
// 重置表单校验状态
nextTick
(() => {
ruleFormRef
.value?
.resetFields
();
}
);
dialogFormVisible
.value = true
}
const openDrawer =
() => {
if
(Type
.value === 'add'
) {
dialogFormVisible
.value = false
const params = {
title
:Title
.value,
type
:Type
.value,
row
:{
...Row
.value},
form
:{
...form},
configuration
:configuration,
isView
:false,
api
: addAssetList,
refreshTable
: () => {
proTable
.value!
.pageable
.pageNum = 1;
proTable
.value?
.refresh
Data();
}
}
addAssetRef
.value?
.acceptParams
(params
)
} else if
(Type
.value === 'edit'
){
const params = {
title
:Title
.value,
type
:Type
.value,
configuration
:configuration,
isView
:false,
row
:{},
form
:{
...form},
infoRow
:{
...Row
.value},
api
: editAssetList,
refreshTable
: () => {
proTable
.value!
.pageable
.pageNum = 1;
proTable
.value?
.refresh
Data();
}
}
addAssetRef
.value?
.acceptParams
(params
)
} else {
dialogFormVisible
.value = false
const params = {
title
:Title
.value,
type
:Type
.value,
configuration
:configuration,
isView
:false,
form
:{
...form},
row
:{selectedIds
:selectedIds
.value},
api
: editBatchAssetList,
refreshTable
: () => {
proTable
.value!
.pageable
.pageNum = 1;
proTable
.value?
.refresh
Data();
}
}
addAssetRef
.value?
.acceptParams
(params
)
}
}
onMounted
(() => {
getUnitList
();
getOrgSubjectList
Data();
}
)
</script>
<style lang="scss" scoped>
.more_imgs{
div {
display
: inline
-flex;
}
.viewImage{
width
: 25px;
height
: 25px;
cursor
: pointer;
}
}
/* 或仅针对特定列 */
.el
-table
.el
-table__header th
.is
-center
.cell {
text
-align
: center;
}
/* 确保选择列可见 */
::v
-deep
.el
-table__fixed
-left {
.el
-table__cell
.is
-hidden > * {
visibility
: visible !important;
}
.el
-checkbox {
display
: inline
-block;
}
}
</style>点击handlePreviousStep后，回显勾选的数据
本文探讨了Visual Studio中当复选框值超出预设范围(0,1,2)时产生的警告信息“Warning:dialogdatacheckboxvalue(%d)outofrange.”，并详细介绍了如何通过初始化变量解决此问题。此外还提供了调试技巧，包括使用TRACE宏和在特定函数处设置断点的方法。
扫一扫
7605
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
