<template>
<div class="content
-box">
<div class="card filter">
<
el-button type="primary" class="add
-btn" @click="openDrawer('add', '新增非标准资产', [])">新增非标准资产</
el-button>
<
el-input v
-mod
el="filterText" class="filterTextInput" placeholder="请输入" clearable />
<div class="list
-box">
<template v
-if="filteredTreeData.length">
<div :class="['item', { active: activeTypeItem.id === item.id }]" v
-for="item in filteredTreeData"
:key="item.id" @click="handleItemClick(item)">
<div>{{item.name}}</div>
<div class="right
-opearte">
<span @click.stop="openDrawer('edit','编辑数据字典', item)"><i class="
el-icon
-edit"></i>编辑</span>
<span @click.stop="handleD
elType(item)"><i class="
el-icon
-d
elete"></i>删除</span>
</div>
</div>
</template>
</div>
</div>
<div class="descriptions
-box">
<div style="height:100%;width:100%" v
-if="Object.keys(activeTypeItem).length">
<div class="box
-tip card">
<
el-button type="primary" class="add
-btn" @click="openDrawer('childAdd', '新增字段', [])">新增字段</
el-button>
</div>
<div class="
table-main card" style="height: calc(100%
- 65px);">
<div class="
table-header">
<div v
-if="toolButton" class="header
-button
-ri">
<slot name="toolButton">
<
el-button :icon="Refresh" circle @click="refreshData" />
<
el-button :icon="Operation" circle @click="openColSetting" />
</slot>
</div>
</div>
<
el-table :data="
tableData" border style="width: 100%" :header
-c
ell
-style="{ background: '#f5f7fa', color: '#606266', textAlign: 'center' }">
<
el-table-column prop="fi
eldName" lab
el="字段名称" align="center"/>
<
el-table-column prop="isRequire" lab
el="必填项" align="center" />
<
el-table-column prop="sort" lab
el="排序" align="center"/>
<
el-table-column prop="status" lab
el="状态" align="center">
<template #default="scope">
<
ElTag :type="scope.row.status == 1 ? 'success' : 'danger'">{{scope.row.status == 1 ? '启用' :'禁用'}}</
ElTag>
</template>
</
el-table-column>
<
el-table-column lab
el="操作" align="center">
<template #default="scope">
<
el-button type="primary" link @click="openDrawer('childEdit','编辑字段', scope.row)">编辑</
el-button>
<
el-button v
-if="scope.row.status == '1'" type="primary" style="color:#FF0000" link
@click="changeStatus(scope.row,0)">禁用</
el-button>
<
el-button v
-if="scope.row.status == '0'" type="primary" style="color:#49C625" link
@click="changeStatus(scope.row,1)">启用</
el-button>
<
el-button type="primary" link @click="d
eleteAccount(scope.row)">删除</
el-button>
</template>
</
el-table-column>
<!
-- 无数据
-->
<template #empty>
<div class="
table-empty">
<slot name="empty">
<img src="@/assets/images/notData.png" alt="notData" />
<div>暂无数据</div>
</slot>
</div>
</template>
</
el-table>
<Pagination v
-if="
tableData.length > 0" :pageable="pagination" :handle
-size
-change="handleSizeChange"
:handle
-current
-change="handleCurrentChange" />
</div>
</div>
<div class="card empty" v
-else>
<
el-empty description="请先选择非标准资产"></
el-empty>
</div>
</div>
<!
-- 新增非标准字段
-->
<addNewFi
elds ref="dialogAddNewFi
elds" />
<!
-- 列设置
-->
<ColSetting v
-if="toolButton" ref="colRef" v
-mod
el:col
-setting="colSetting" />
</div>
</template>
<script setup lang="ts" name="standardProductFi
eldManage">
import { ref, reactive,onMounted ,watch} from "vue";
import {
ElTree,
ElTable, FormInstance, FormRules,
ElMessage,
ElTag } from "
element
-plus";
import { Supplier } from "@/api/interface";
import Pagination from "@/components/Pro
Table/components/Pagination.vue";
import { Pro
TableInstance, ColumnProps,TypeProps } from "@/components/Pro
Table/interface";
import { Refresh, Operation, Search } from "@
element
-plus/icons
-vue";
import ColSetting from "@/components/Pro
Table/components/ColSetting.vue";
import addNewFi
elds from "@/views/
system/standardProductFi
eldManage/addNewFi
elds.vue";
import { nonstandardList, editNonstandard, editNonstandardClild, d
eleteNonstandard ,nonstandardClildList,statusNonstandardClild,d
eleteNonstandardClild} from '@/api/modules/public';
import { da } from "
element
-plus/es/locale";
import { useHandleData } from "@/hooks/useHandleData";
// 初始化参数
const treeData = ref<any[]>([]);
const filteredTreeData = ref<any[]>([]);
const activeTypeItem = ref<Record<string, any>>({});
const filterText = ref("");
const toolButton = ref(true)
// 右侧
表格数据
const
tableData = ref<any[]>([]);
const pagination = ref({
pageNum: 1,
pageSize: 10,
total: 0,
});
watch(
() => filterText.value,
(val) => {
if (!val) {
filteredTreeData.value = treeData.value;
}
else {
const keyword = val.toLowerCase();
filteredTreeData.value = treeData.value.filter(item =>
item.name?.toLowerCase().includes(keyword)
);
}
},
{ immediate: true }
);
onMounted(async () => {
getTre
eList()
})
// 左侧树、
const getTre
eList = async () => {
const data = await nonstandardList({});
treeData.value = data || [];
filteredTreeData.value = data || []
// 编辑数据后，右侧数据更新
if (Object.keys(activeTypeItem.value).length > 0) {
get
TableList()
}
}
// 点击左侧，更新右侧列表
const handleItemClick = async (data: any) => {
activeTypeItem.value = data;
get
TableList()
}
const handleSizeChange = (size) => {
pagination.value.pageSize = size;
get
TableList();
};
const handleCurrentChange = (currentPage) => {
pagination.value.pageNum = currentPage;
get
TableList();
}
// 刷新
const refreshData = () => {
pagination.value.pageNum = 1
get
TableList();
}
// 接收 columns 并设置为响应式
const
tableColumns = reactive<ColumnProps[]>(treeData.value);
// column 列类型
const columnTypes: TypeProps[] = ["s
election", "radio", "index", "
expand", "sort"];
const colRef = ref();
const colSetting = treeData.value!.filter(item => {
console.log('item',
tableData)
const { type, prop, isShow } = item;
return !columnTypes.includes(type!) && prop !== "operation" && isShow;
});
const openColSetting = () => {
console.log('23',
tableData)
colRef.value.openColSetting();
}
// 调用列表接口
const get
TableList = async () => {
const formData = {
assetNonStandardId: activeTypeItem.value.id,
pageNum: pagination.value.pageNum,
pageSize: pagination.value.pageSize,
};
const { code, msg, data } = await nonstandardClildList(formData)
if(code == 0) {
tableData.value = data.dataList;
pagination.value.total = data.totalCount;
}
else {
ElMessage.error(msg);
}
}
//
表格配置项
const columns = reactive<ColumnProps<Supplier.pag
eList>[]>([
{
prop: "fi
eldName",
lab
el: "单位名称",
},
])
// 新增，编辑
const dialogAddNewFi
elds = ref<InstanceType<typeof addNewFi
elds> | null>(null);
const openDrawer = async (type: string, title: string, row: any) => {
console.log('activeTypeItem.value',activeTypeItem.value)
const params = {
type: type,
title: title,
isView: false,
row: {...row},
activeTypeItem:{...activeTypeItem.value},
api: type == 'add' || type == 'edit' ? editNonstandard : editNonstandardClild,
get
TableListData: getTre
eList
}
dialogAddNewFi
elds.value?.acceptParams(params);
}
// 删除资产
const handleD
elType = async (params) => {
await useHandleData(d
eleteNonstandard, { id: params.id }, `确认删除`);
getTre
eList()
}
// 修改状态
const changeStatus = async (row: Supplier.pag
eList,type:string) => {
await useHandleData(statusNonstandardClild, { id: row.id, status: type }, `确定${type == 1 ? '启用' : '禁用'}`);
getTre
eList();
}
// 删除
const d
eleteAccount = async (row: Supplier.pag
eList) => {
await useHandleData(d
eleteNonstandardClild, { id: row.id }, `确认删除`);
getTre
eList()
}
</script>
<style scoped lang="scss">
@use "@/styles/treeIndex.scss";
.list
-box {
height: calc(100%
- 95px);
margin
-top: 10px;
overflow: auto;
}
.item {
display: flex;
justify
-content:
space-between;
padding: 5px 10px;
font
-size: 14px;
color: #606266;
cursor: pointer;
border
-radius: 4px;
&.active {
background: #e6f5f3 !important;
}
&:hover {
background: rgb(245 247 250);
}
span {
margin
-left: 10px;
cursor: pointer;
i {
margin
-right: 3px;
}
&:first
-of
-type {
color: #009688;
}
&:last
-of
-type {
color: #f56c6c;
}
}
}
.empty {
width: 100%;
height: 100%;
.
el-empty {
transform: translate(0, 50%);
}
}
// .
el-tables{
// height: calc(100%
- 65px);
// }
.bindUserRight_bottom{
display: flex;
justify
-content: flex
-end;
margin
-top: 20px;
}
</style><template>
<!
-- 列设置
-->
<
el-drawer v
-mod
el="drawerVisible" title="列设置" size="450px" :close
-on
-click
-modal="false">
<div class="
table-main">
<
el-table :data="colSetting" :border="true" row
-key="prop" default
-expand-all
:tree
-props="{ children: '_children' }">
<
el-table-column prop="lab
el" align="center" lab
el="列名" />
<
el-table-column v
-slot="scope" prop="isShow" align="center" lab
el="显示">
<
el-switch v
-mod
el="scope.row.isShow"></
el-switch>
</
el-table-column>
<
el-table-column v
-slot="scope" prop="sor
table" align="center" lab
el="排序">
<
el-switch v
-mod
el="scope.row.sor
table"></
el-switch>
</
el-table-column>
<template #empty>
<div class="
table-empty">
<img src="@/assets/images/notData.png" alt="notData" />
<div>暂无可配置列</div>
</div>
</template>
</
el-table>
</div>
</
el-drawer>
</template>
<script setup lang="ts" name="ColSetting">
import { ref } from "vue";
import { ColumnProps } from "@/components/Pro
Table/interface";
defineProps<{ colSetting: ColumnProps[] }>();
const drawerVisible = ref<boolean>(false);
const openColSetting = () => {
drawerVisible.value = true;
};
defineExpose({
openColSetting
});
</script>
<style scoped lang="scss">
.cursor
-move {
cursor: move;
}
</style>
点击openColSetting，打开ColSetting列设置，传递
table表头列给ColSetting弹窗界面，如何把表头传到子界面
本文介绍如何使用SQL命令查看Oracle数据库中各表空间的数据文件信息及其总空间大小，并演示了如何为system表空间增加数据文件的方法。
扫一扫
817
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
