<template>
<div class="content
-box">
<!
-- 左侧
-树
-->
<div class="card filter left
-list">
<el
-button type="primary" class="add
-btn" @click="openDrawerType('新增数据字典',[])">新增字典</el
-button>
<el
-input v
-model="filterText" class="filterTextInput" placeholder="请输入" clearable />
<div class="list
-box">
<template v
-if="treeData.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="openDrawerType('编辑数据字典',item)" v
-if="hasBtnPermission(
'system:dataDictionary:btn
-editrype'
)
"><i class="el
-icon
-edit"></i>编辑</span>
<span @click.stop="handleDelType(item)" v
-if="hasBtnPermission(
'system:dataDictionary:btn
-deleteType'
)
"><i class="el
-icon
-delete"></i>删除</span>
</div>
</div>
</template>
</div>
</div>
<!
-- 右侧
-数据列
-->
<div class="descriptions
-box">
<div class="box
-tip card">
<el
-button type="primary" class="add
-btn" @click="openDrawer('新增字段值', [])">新增字段</el
-button>
</div>
<ProTable ref="proTable" :columns="columns" :request
-api="getTableList" :init
-param="initParam"
:data
-callback="dataCallback">
<template #operation="scope">
<el
-button type="primary" link @click="openDrawer('编辑字段值', scope.row)">编辑</el
-button>
<el
-button v
-if="scope.row.status == 'enabled'" type="primary" style="color:#FF0000" link
@click="changeStatus(scope.row)">禁用</el
-button>
<el
-button v
-if="scope.row.status == 'disabled'" type="primary" style="color:#49C625" link
@click="changeStatus(scope.row)">启用</el
-button>
<el
-button type="primary" link @click="deleteAccount(scope.row)">删除</el
-button>
</template>
</ProTable>
</div>
<!
-- 新增字典类型
-->
<addType ref="dialogAddType"/>
<!
-- 新增编辑字段
-->
<addDataDictionary ref="dialogAddDataDictionary"/>
</div>
</template>
<script setup lang="ts" name="dataDictionary">
import { ref, watch, reactive, inject, onMounted, } from "vue";
import { ElTree, FormInstance, FormRules, ElMessage, } from "element
-plus";
import { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";
import { Supplier } from "@/api/interface";
import ProTable from "@/components/ProTable/index.vue";
import addDataDictionary from "@/
views/system/dataDictionary/addDataDictionary.vue";
import addType from "@/
views/system/dataDictionary/addType.vue";
import { setValueList, addDictionaryType, addDictionaryValue } from '@/api/modules/public';
import { da } from "element
-plus/es/locale";
const hasBtnPermission: any = inject('hasBtnPermission');
const treeData = ref<any[]>([]);
const activeTypeItem = ref<Record<string, any>>({});
const filteredTreeData = ref<any[]>([]);
const filterText = ref("");
const defaultProps = {
children: "children",
label: "label"
};
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 }
);
// 左侧树
const getTableList = async (params: any) => {
const { data } = await setValueList(params);
treeData.value = data || [];
filteredTreeData.value = data || []
return { list: data || [] };
}
const dataCallback = (data: any) => {
return data;
}
const handleItemClick = (data: any) => {
activeTypeItem.value = data
console.log('data',data)
// const response = await assetClassificationInfo({ id: data.id })
}
const handleEditType = () => {
}
const handleDelType = () => {
}
// 初始化参数
const pageData = reactive({})
// ProTable 实例
const initParam = reactive({});
// 表格配置项
const proTable = ref<ProTableInstance>();
const columns = reactive<ColumnProps<Supplier.pageList>[]>([
// { prop: "realname", label: "姓名", search: { el: "input" } },
])
// 搜索过滤
const filterNode = (value: string, node: any) => {
if (!value) return true;
return node.data.label.includes(value);
};
// 新增字典类型
const dialogAddType = ref<InstanceType<typeof addType> | null>(null);
const openDrawerType = (title: string,row:any) => {
const params = {
title:title,
api: title === "新增数据字典" ? addDictionaryType : addDictionaryType,
row:row,
getTableListData:getTableList
}
dialogAddType.value?.acceptParams(params);
}
// 新增
const dialogAddDataDictionary = ref<InstanceType<typeof addDataDictionary> | null>(null);
const openDrawer = (title: string, row: any) => {
const params = {
title:title,
row:row,
is
View:false,
api: title === "新增数据字典" ? addDictionaryType : addDictionaryValue,
// getTableListData:getTableList
}
dialogAddDataDictionary.value?.acceptParams(params);
}
// 修改状态
const changeStatus = async (row: Supplier.pageList) => { }
// 删除
const deleteAccount = async (row: Supplier.pageList) => { }
</script>
<style scoped lang="scss">
@use "@/styles/treeIndex.scss";
.left
-list{
.list
-box {
height: calc(100%
- 95px);
overflow: auto;
margin-top: 10px;
}
.item {
cursor: pointer;
display: flex;
justify
-content: space
-between;
padding: 5px 10px;
border
-radius: 4px;
font
-size: 14px;
color: #606266;
&.active {
background: #e6f5f3 !important;
}
&:hover {
background: rgb(245, 247, 250);
}
span {
cursor: pointer;
margin-left: 10px;
i {
margin-right: 3px;
}
&:first
-of
-type {
color: #009688;
}
&:last
-of
-type {
color: #f56c6c;
}
}
}
}
</style>
<template>
<el
-drawer v
-model="drawerVisible" :destroy
-on
-close="true" size="550px" :title="drawerProps.title" :close
-on
-click
-modal="false">
<el
-form ref="ruleFormRef" label
-width="52px" :rules="rules" :model="typeItem">
<el
-form
-item label="编码" prop="code">
<el
-input v
-model="typeItem.code" placeholder="请填写" class="input
-width" maxlength="50" clearable />
</el
-form
-item>
<el
-form
-item label="名称" prop="name">
<el
-input v
-model="typeItem.name" placeholder="请填写" class="input
-width" maxlength="50" clearable />
</el
-form
-item>
<el
-form
-item label="备注">
<el
-input v
-model="typeItem.remark" :rows="6" type="textarea" placeholder="请填写备注"
maxlength="5000" show
-word
-limit clearable></el
-input>
</el
-form
-item>
</el
-form>
<template #footer>
<el
-button @click="drawerVisible = false">取消</el
-button>
<el
-button v
-show="!drawerProps.is
View" type="primary" @click="handleSubmit">确定</el
-button>
</template>
</el
-drawer>
</template>
<script setup lang="ts" name="addType">
import { ref, reactive } from "vue";
import { AssetClassification } from "@/api/interface";
import { ElMessage, FormInstance } from "element
-plus";
const rules = reactive({
code: [{ required: true, message: "请填写字典编码", trigger: "blur" }],
name: [{ required: true, message: "请填写字典名称", trigger: "blur" }],
})
interface typeItem {
code:'',
name:'',
id:'',
remark:'',
}
interface DrawerProps {
title: string,
api?: (params: any) => Promise<any>;
getTableListData?: () => void;
row: Partial<AssetClassification.pageList>;
}
const formData = ref<Partial<AssetClassification.pageList>>({});
const drawerVisible = ref(false);
const drawerProps = ref<DrawerProps>({
title: "",
row:{}
})
// 接收父组件传过来的参数
const acceptParams = (params: DrawerProps) => {
console.log('params',params)
typeItem.value = JSON.parse(JSON.stringify(params.row));
drawerProps.value = params;
drawerVisible.value = true;
}
// 操作
const ruleFormRef = ref<FormInstance>();
const handleSubmit = () => {
ruleFormRef.value!.validate(async valid => {
if (!valid) return;
try {
await drawerProps.value.api!(drawerProps.value.row);
ElMessage.success({ message: `操作成功！` });
drawerProps.value.getTableListData!();
drawerVisible.value = false;
} catch (error) {
console.log(error);
}
})
}
defineExpose({
acceptParams
});
</script> 优化
本文介绍了如何在uni-app的开发环境中使用Countdown组件，展示了如何设置目标日期（targetDate）和处理计时结束事件（handleCountdownFinished）。CSS样式还展示了组件在页面布局中的具体位置。
扫一扫
591
到【灌水乐园】发言
