Skip to content

T
test_git

uuai / test_git

通知 1
Star 0
Fork 0
T
test_git

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 f67788ce 编写于 作者: W wuyb@phxg.cn
浏览文件
操作

vue3

上级 3e7a5c27
隐藏空白更改
内联 并排
Showing with 556 addition and 1 deletion
vite-demo/src/hook/useModal.js
浏览文件 @ f67788ce
......@@ -31,7 +31,6 @@ export function useSelectSearch() {
function selectFilterOption(input, option) {
return option.componentOptions.children[0].text.toLowerCase().includes(input.toLowerCase());
}
return {
selectFilterOption
}
......
vite-demo/src/hook/useTableMdal.js 0 → 100644
浏览文件 @ f67788ce
/**
*
* useTable 表格查询，分页， 删除
* @modalMixin 弹窗新增，修改，详情
*/
import {ref, reactive} from 'vue'
// import { postAction, putAction, deleteAction, httpAction } from 'api/commonApi/index';
let postAction, putAction, deleteAction, httpAction;
let filterObjByKey, parseDate, getMoment, formatObjDate, getTreeKeys;
// import { filterObjByKey, parseDate, getMoment, formatObjDate, getTreeKeys } from 'utils/util';
export function useLayout() {
// 布局
let layout = reactive({
labelCol: {
span: 4
},
wrapperCol: {
span: 16
},
})
return {
layout
}
}
export function usePaging() {
// 分页参数
let ipagination = reactive({
current: 1,
pageSize: 10,
pageSizeOptions: ['5', '10', '20', '30'],
showTotal: (total, range) => {
return range[0] + '-' + range[1] + ' 共' + total + '条';
},
showQuickJumper: true,
showSizeChanger: true,
total: 0
})
return {
ipagination
}
}
export function useTable() {
// 字符串转日期
const getMoment = (dateStr) => {
return getMoment(dateStr)
}
// 查询
const searchQuery = () => {
ipagination.current = 1;
loadData();
}
// 重置
const searchReset = () => {
this.queryParam = {};
this.subQueryParam = {};
this.loadData();
}
// 数据查询
const loadData = () => {
if (!this.url || !(this.url.list || this.url.dataAll)) {
console.warn('请设置url.list或url.dataAll属性!');
return
}
const data = this.getQueryParams(); // 查询条件
this.tableLoading = true;
/**
* get 请求
*/
if (this.url.dataAll) { // 数据和表格总数一起请求
httpAction(this.url.dataAll, data).then((res) => { // 列表数据
if (res.code === 200) {
this.dataSource = res.data.rows;
this.ipagination.total = Number(res.data.count);
console.log(this.dataSource)
}
this.tableLoading = false;
}).catch(error => {
console.error(error);
this.tableLoading = false;
})
} else { // 数据和表格总数分开请求请求
httpAction(this.url.list, data).then((res) => { // 列表数据
if (res.code === 200) {
this.dataSource = res.data;
console.log(this.dataSource)
}
this.tableLoading = false;
}).catch(error => {
console.error(error);
this.tableLoading = false;
})
httpAction(this.url.count, data).then((res) => { // 列表长度
if (res.code === 200) {
this.ipagination.total = res.data.count;
}
}).catch(error => {
console.error(error);
})
}
}
// 获取查询条件
const getQueryParams = () => {
const params = Object.assign({}, this.queryParam, this.subQueryParam);
Object.keys(params).forEach(key => {
if (typeof params[key] === 'string') { // 去字符串两侧空格
params[key] = params[key].trim();
}
})
params.page = this.ipagination.current - 1;
params.size = this.ipagination.pageSize;
return params;
}
// 查询条件折叠
const handleToggleSearch = () => {
this.toggleSearchStatus = !this.toggleSearchStatus;
// 已折叠状态 清除折叠区域表单数据
if (!this.toggleSearchStatus) {
this.subQueryParam = {};
}
}
// 表格行选择
const onSelectChange = (selectedRowKeys, selectionRows) => {
console.log(selectedRowKeys, selectionRows)
this.selectedRowKeys = selectedRowKeys;
this.selectionRows = selectionRows;
}
// 清除行选择
const onClearSelected = () => {
this.selectedRowKeys = [];
this.selectionRows = [];
}
// 新增
const handleAdd = () => {
this.modalData = {};
this.modalTitle = '新增';
this.modalType = 'add';
this.openModal();
}
/**
* 修改
* @param rowData Object 行数据
* @param keys Array 根据keys过滤rowData，防止form组件报警告
*/
const handleEdit = (rowData, id, keys) => {
console.log(rowData, id, keys);
if (!keys) {
console.error('keys不能为空！')
return;
}
this.editId = id;
this.modalData = filterObjByKey(rowData, keys);
this.modalTitle = '修改';
this.modalType = 'edit';
this.openModal();
}
/**
* 查看详情
* @param rowData Object 行数据
* @param keys Array 根据keys过滤rowData，防止form组件报警告
*/
const handleDetail = (rowData, keys) => {
if (!keys) {
console.error('keys不能为空！')
return;
}
this.modalData = filterObjByKey(rowData, keys);
this.modalTitle = '详情';
this.modalType = 'detail';
this.openModal();
}
const openModal = () => {
this.showModal = true;
}
// 批量删除
const batchDel = () => {
if (!this.url.delete) {
this.$message.error('请设置url.delete属性!');
console.error('请设置url.delete属性!');
return
}
if (this.selectedRowKeys.length <= 0) {
this.$message.warning('请选择一条记录！');
return;
}
const ids = {idList: []};
for (let i = 0; i < this.selectedRowKeys.length; i++) {
ids.idList.push({key: this.selectedRowKeys[i]});
}
this.deleteFn(ids, `确认要删除选中的这${this.selectedRowKeys.length}条数据吗？`);
}
// 单条删除
const handleDelete = (id) => {
console.log('this.url.delete', this.url, this.url.delete);
if (!this.url.delete) {
this.$message.error('请设置url.delete属性! ===');
console.error('请设置url.delete属性!');
return
}
this.tableLoading = true;
const ids = {
idList: [
{key: id}
]
};
deleteAction(this.url.delete, ids).then((res) => {
if (res.code === 203) {
this.modalFormOk();
this.onClearSelected();
}
this.tableLoading = false;
}).catch(error => {
console.error(error);
this.tableLoading = false;
})
}
const deleteFn = (ids, tip) => {
// 开发逻辑提示
if (!this.url.delete) {
this.$message.error('请设置url.delete属性!');
console.error('请设置url.delete属性!');
return;
}
this.$confirm({
title: '确认删除',
content: tip,
centered: true,
onOk: () => {
this.tableLoading = true;
deleteAction(this.url.delete, ids).then((res) => {
if (res.code === 203) {
this.modalFormOk();
this.onClearSelected();
}
this.tableLoading = false;
}).catch(error => {
console.error(error);
this.tableLoading = false;
})
}
});
}
const modalFormOk = () => {
// 新增/修改 成功时，重载列表
this.loadData();
}
// 排序 分页
const handleTableChange = (pagination, filters, sorter) => {
this.ipagination = pagination;
this.loadData();
}
if (this.isInitTable) {
this.loadData();
}
return {
isInitTable: true, // 是否初始化表格
// 查询条件
queryParam: {},
// 折叠区域查询条件
subQueryParam: {},
// 数据源
dataSource: [],
// 表格加载状态
tableLoading: false,
// table选中keys
selectedRowKeys: [],
// table选中records
selectionRows: [],
// 查询折叠
toggleSearchStatus: false,
// 弹窗
showModal: false, // 弹窗显示
modalTitle: '', // 弹窗名称
modalType: '', // 弹窗类型 add：新增 edit：修改 detail: 查看详情
modalData: {}, // 弹窗回填数据 修改和详情
editId: '' // 修改Id
};
};
export const modalMixin = {
props: {
title: {
type: String,
default: ''
},
type: {
type: String,
default: 'add' // add：新增 edit：修改 detail: 查看详情
},
show: {
type: Boolean,
default: false
},
data: {
type: Object,
default() {
return {}
}
}
},
data() {
return {
// 弹窗设置
drawerWidth: 700,
// 布局
labelCol: {
xs: {span: 24},
sm: {span: 6}
},
wrapperCol: {
xs: {span: 24},
sm: {span: 16}
},
confirmLoading: false,
form: this.$form.createForm(this)
}
},
computed: {
disableSubmit: {
get() {
if (this.type === 'detail') {
return true;
}
return false;
},
set() {
}// 查看详情，禁用所有表单
}
},
methods: {
// 回填数据
backfillData() {
this.resetScreenSize();
// 回填数据
this.$nextTick().finally(() => {
this.form.resetFields();
// 日期处理
if (this.type !== 'add') {
this.data = parseDate(this.data);
setTimeout(() => {
this.form.setFieldsValue(this.data);
})
}
});
},
handleOk(otherValues = {}, path, dateFormat = 'YYYY-MM-DD') {
this.confirmLoading = true;
// 触发表单验证
this.form.validateFields((err, values) => {
if (!err) {
let formData = Object.assign(values, otherValues);
formData = formatObjDate(formData, dateFormat);
Object.keys(formData).forEach(item => { // 清空字符串前后空格
if (typeof formData[item] === 'string') {
formData[item] = formData[item].trim();
}
})
let axios;
if (this.type === 'edit') { // 修改
if (!this.url.edit) {
this.$message.error('请设置url.edit属性!');
console.error('请设置url.edit属性!');
return;
}
axios = putAction(`${this.url.edit}/${path}`, formData);
} else { // 新增
if (!this.url.add) {
this.$message.error('请设置url.add属性!');
console.error('请设置url.add属性!');
return;
}
axios = postAction(this.url.add, formData);
}
axios.then((res) => {
if (res.code === 201 || res.code === 202) {
this.$emit('ok');
this.close();
}
}).catch(err => {
console.error(err);
}).finally(() => {
this.confirmLoading = false;
});
} else {
this.confirmLoading = false;
}
})
},
close() {
this.confirmLoading = false;
this.disableSubmit = false;
this.$emit('close');
this.$emit('update:show', false);
},
// 根据屏幕变化,设置抽屉尺寸
resetScreenSize() {
const screenWidth = document.body.clientWidth;
if (screenWidth < 500) {
this.drawerWidth = screenWidth;
} else {
this.drawerWidth = 700;
}
},
// 下拉框搜索过滤
selectFilterOption(input, option) {
return option.componentOptions.children[0].text.toLowerCase().includes(input.toLowerCase());
}
}
};
export const treeMixin = {
data() {
return {
isInitTree: true,
treeLoading: true, // 刷新树
defaultTreeUrl: 'ArchivesApi/common/getAreaRoomTree?root=0&leaf=2', // 默认tree_url
searchData: '', // 树搜索框绑定value
multiTab: 0, // 页签高度
treeData: [], // tree数据
searchValue: '', // 树搜索条件
allTreeKeys: {}, // 树key集合
dataList: [], // 树key和id
currSelected: {}, // 选中结点的属性
selectedKeys: [], // 设置选中的树节点的key
checkedKeys: [], // 选中复选框的树节点
checkStrictly: true, // 父子节点选中状态不再关联
iExpandedKeys: [], // 展开指定的树节点
autoExpandParent: true, // 是否自动展开父节点
rowTreeData: {} // 选中树节点数据
}
},
methods: {
// tree搜索
onSearchChange(e) {
const value = e.target.value.trim();
let iExpandedKeys = []
if (value !== '') {
iExpandedKeys = this.dataList.map(item => {
if (item.title.indexOf(value) > -1) {
return this.getParentKey(item.id, this.treeData);
}
return null;
}).filter((item, i, self) => {
return item && self.indexOf(item) === i
});
}
Object.assign(this, {
iExpandedKeys,
searchValue: value,
autoExpandParent: true
})
},
// 获取父级key
getParentKey(id, tree) { // 树的父id
let parentKey;
for (let i = 0; i < tree.length; i++) {
const node = tree[i];
if (node.children) {
if (node.children.some(item => item.id === id)) {
parentKey = node.id;
} else if (this.getParentKey(id, node.children)) {
parentKey = this.getParentKey(id, node.children);
}
}
}
return parentKey;
},
// 重置
emptyCurrForm() {
this.currSelected = {};
this.selectedKeys = [];
},
// 选择树 -选中tree子节点需要特定重写
onSelect(selectedKeys, e) {
// 点击树子节点，图谱出现
if (e.node.dataRef.children.length === 0) {
this.emptyCurrForm(); // 重置
console.log(selectedKeys, e);
}
},
onExpand(expandedKeys) { // 展开/收起节点时触发
this.iExpandedKeys = expandedKeys; // 指点展开的节点
this.autoExpandParent = false; // 合并父节点
},
// 获取tree节点数据
getTreeData(url) {
this.emptyCurrForm(); // 重置
httpAction(url).then(res => {
// title id children
if (res.code === 200 && res.status === 1) {
console.log('tree', res);
const treeData = (data) => { // 将isleaf转化成Boolean如果是false则删除
data.forEach(item => {
item.key = item.key ? item.key : item.id; // 若是原tree无key，创建key
if (item.isLeaf === 'false') {
delete item.isLeaf
} else {
item.isLeaf = true
}
item.scopedSlots = {title: 'title'};
if (item.children && item.children.length > 0) {
treeData(item.children);
}
});
}
treeData(res.data); // 将isleaf转化成Boolean
this.treeData = res.data
// 获取树的id集合
this.allTreeKeys = getTreeKeys(this.treeData);
const generateList = data => {
for (let i = 0; i < data.length; i++) {
const node = data[i];
const id = node.id;
this.dataList.push({id, title: node.title});
if (node.children) {
generateList(node.children);
}
}
};
generateList(res.data);
}
}).finally(() => {
this.treeLoading = false;
})
}
},
mounted() {
if (this.isInitTree) {
this.getTreeData(this.defaultTreeUrl);
}
}
}
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或