first commit
This commit is contained in:
@@ -0,0 +1,46 @@
|
||||
const flowMixins = {
|
||||
created() {
|
||||
this.$nextTick(async ()=>{
|
||||
await httpVueLoader("/components/plugins/Guava.vue?v=" + new Date().getTime())()
|
||||
this.checkFlowTask();
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
checkFlowTask() {
|
||||
const taskId = GetQueryString("taskId")
|
||||
if (!taskId) return
|
||||
|
||||
// 如果是开始任务，用户自己处理（编辑、删除、撤销等等）
|
||||
const taskKey = GetQueryString("taskKey")
|
||||
if (taskKey === 'startTask') return;
|
||||
|
||||
// 增加loading动画
|
||||
const loading = this.$loading({
|
||||
lock: true,
|
||||
text: 'Loading',
|
||||
spinner: 'el-icon-loading',
|
||||
background: 'rgba(0, 0, 0, 0.7)'
|
||||
});
|
||||
|
||||
console.log(this.$refs)
|
||||
console.log(this.$refs.guava)
|
||||
|
||||
// this.oepnAudit({})
|
||||
//
|
||||
//
|
||||
// this.$axios.post(location.pathname + '/queryTask', {taskId}).then(res => {
|
||||
// if (res.code === 0) {
|
||||
// // 延迟1.5秒 显示loading动画 解决Guava异步加载 获取不到实例的问题
|
||||
// setTimeout(() => {
|
||||
// if (res.data.taskState === 10) {
|
||||
// this.openAudit(res.data);
|
||||
// } else {
|
||||
// this.openView(res.data);
|
||||
// }
|
||||
// loading.close();
|
||||
// }, 1500)
|
||||
// }
|
||||
// })
|
||||
},
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,122 @@
|
||||
const initTableMixins = {
|
||||
data() {
|
||||
return {
|
||||
pageDataUrl: "",
|
||||
submitLoading: false,
|
||||
searchMore: false,
|
||||
tableSize: "",
|
||||
tableKey: "",
|
||||
formData: {},
|
||||
formRules: {},
|
||||
formLoading: false,
|
||||
tableLoading: false,
|
||||
tableData: [],
|
||||
tableColumns: [],
|
||||
pageForm: {
|
||||
searchName: "",
|
||||
searchKeyword: "",
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
totalCount: 0,
|
||||
pageOrderName: "",
|
||||
pageOrderBy: "",
|
||||
audit: false
|
||||
},
|
||||
guavaIndex: "index",
|
||||
unionGroups: [],
|
||||
threeUnits: [],
|
||||
|
||||
dialogFormVisible: false,
|
||||
|
||||
viewData: {},
|
||||
viewDialogVisible: false,
|
||||
|
||||
_approvalInitialized: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
dropdownCommand({ action, value }) {
|
||||
if (action) action(value)
|
||||
},
|
||||
columnChange(val) {
|
||||
this.tableLoading = true
|
||||
this.tableColumns = val
|
||||
this.tableLoading = false
|
||||
},
|
||||
tableSizeChange(size) {
|
||||
this.tableSize = size
|
||||
},
|
||||
indexMethod(index) {
|
||||
return index + (this.pageForm.pageNumber - 1) * this.pageForm.pageSize + 1
|
||||
},
|
||||
doSearch() {
|
||||
this.tableKey = new Date().getTime()
|
||||
this.pageForm.pageNumber = 1
|
||||
this.pageData()
|
||||
},
|
||||
pageOrder(column) {
|
||||
this.pageForm.pageOrderName = column.prop
|
||||
this.pageForm.pageOrderBy = column.order
|
||||
this.pageData()
|
||||
},
|
||||
pageNumberChange(val) {
|
||||
this.pageForm.pageNumber = val
|
||||
this.pageData()
|
||||
},
|
||||
pageSizeChange(val) {
|
||||
this.pageForm.pageSize = val
|
||||
this.pageData()
|
||||
},
|
||||
pageData(data = null) {
|
||||
const address = this.pageDataUrl ? this.pageDataUrl : loc() + "/pageData"
|
||||
this.tableLoading = true
|
||||
this.$axios.post(address, data ? data : this.pageForm).then((res) => {
|
||||
this.tableLoading = false
|
||||
if (res.code === 0) {
|
||||
this.tableData = res.data.list
|
||||
this.pageForm.totalCount = res.data.totalCount
|
||||
}
|
||||
})
|
||||
},
|
||||
notifySuccess(msg) {
|
||||
this.$notify({
|
||||
title: "成功",
|
||||
message: msg,
|
||||
type: "success"
|
||||
})
|
||||
},
|
||||
notifyWarning(msg) {
|
||||
this.$notify({
|
||||
title: "警告",
|
||||
message: msg,
|
||||
type: "warning"
|
||||
})
|
||||
},
|
||||
notifyError(msg) {
|
||||
this.$notify.error({
|
||||
title: "错误",
|
||||
message: msg
|
||||
})
|
||||
},
|
||||
initApprovalFromUrl() {
|
||||
if (this._approvalInitialized) return;
|
||||
|
||||
if (!this.pageForm) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 从 URL 读取 approval 参数（适用于独立页面）
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const approvalParam = urlParams.get('tab');
|
||||
|
||||
if (approvalParam !== null) {
|
||||
this.$set(this.pageForm, 'approval', approvalParam === 'done')
|
||||
this.$set(this.pageForm, 'isAudit', approvalParam === 'done')
|
||||
this._approvalInitialized = true;
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.initApprovalFromUrl();
|
||||
},
|
||||
}
|
||||
@@ -0,0 +1,210 @@
|
||||
const styleUtil = {
|
||||
// 为元素及其所有子元素添加scoped属性
|
||||
addScopedAttribute(el, scopedId, vm) {
|
||||
if (!el || !el.setAttribute) return;
|
||||
|
||||
// 跳过Vue组件实例 但是不跳过自己 也就是排除子组件
|
||||
if (el.__vue__ && el.__vue__ !== vm) return;
|
||||
|
||||
// 添加scoped属性到当前元素
|
||||
el.setAttribute(scopedId, '')
|
||||
|
||||
// 只处理普通DOM元素，不处理Vue组件
|
||||
// const children = el.children || el.childNodes;
|
||||
// for (let i = 0; i < children.length; i++) {
|
||||
// const child = children[i];
|
||||
// // 检查是否为普通DOM元素（非Vue组件）
|
||||
// if (child.nodeType === 1 && !child.__vue__) {
|
||||
// styleUtil.addScopedAttribute(child, scopedId, vm);
|
||||
// }
|
||||
// }
|
||||
|
||||
// 查找本组件的子元素 但是排除掉VUE组件 使用TreeWalker优化遍历性能
|
||||
const walker = document.createTreeWalker(
|
||||
el,
|
||||
NodeFilter.SHOW_ELEMENT,
|
||||
{
|
||||
acceptNode(node) {
|
||||
// 排除子Vue组件
|
||||
return node.__vue__ && node !== el
|
||||
? NodeFilter.FILTER_REJECT
|
||||
: NodeFilter.FILTER_ACCEPT;
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
let node;
|
||||
while (node = walker.nextNode()) {
|
||||
if (node !== el) {
|
||||
node.setAttribute(scopedId, '');
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// 移除元素及其所有子元素的scoped属性
|
||||
removeScopedAttribute(el, scopedId) {
|
||||
if (!el || !el.removeAttribute) return;
|
||||
|
||||
// 使用querySelectorAll批量处理
|
||||
const elements = el.querySelectorAll(`[${scopedId}]`);
|
||||
elements.forEach(element => element.removeAttribute(scopedId));
|
||||
|
||||
// 处理根元素
|
||||
el.removeAttribute(scopedId);
|
||||
},
|
||||
|
||||
// 为CSS规则添加作用域属性
|
||||
scopeCss(css, scopedId) {
|
||||
// 使用正则表达式匹配CSS选择器和规则块
|
||||
// 这种方法可以确保我们只处理选择器部分，而不会影响CSS属性值
|
||||
return css.replace(/([^{]+)({[^}]*})/g, (match, selectors, rules) => {
|
||||
// 处理选择器部分
|
||||
const processedSelectors = selectors.split(',')
|
||||
.map(selector => {
|
||||
selector = selector.trim();
|
||||
|
||||
// 处理深度选择器
|
||||
if (selector.includes('::v-deep')) {
|
||||
return selector.replace('::v-deep', `[${scopedId}]`);
|
||||
}
|
||||
if(selector.includes("/deep/")){
|
||||
return selector.replace('/deep/', `[${scopedId}]`);
|
||||
}
|
||||
|
||||
|
||||
// 处理媒体查询等特殊情况
|
||||
if (selector.includes('@') || selector.startsWith('@')) {
|
||||
return selector;
|
||||
}
|
||||
|
||||
// 普通选择器
|
||||
return `${selector}[${scopedId}]`;
|
||||
})
|
||||
.join(', ');
|
||||
|
||||
// 返回处理后的选择器和原始规则块
|
||||
return processedSelectors + rules;
|
||||
});
|
||||
},
|
||||
}
|
||||
|
||||
// 异步DOM观察器
|
||||
const asyncStyleHandler = {
|
||||
observers: new Map(),
|
||||
|
||||
// 为组件设置观察器
|
||||
setupObserver(vm, scopedId) {
|
||||
if (!vm.$el) return;
|
||||
|
||||
// 清除现有观察器
|
||||
this.disconnectObserver(vm._uid);
|
||||
|
||||
// 创建新的MutationObserver
|
||||
const observer = new MutationObserver((mutations) => {
|
||||
let shouldProcess = false;
|
||||
|
||||
for (const mutation of mutations) {
|
||||
if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
|
||||
shouldProcess = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if (shouldProcess) {
|
||||
// 防抖处理
|
||||
clearTimeout(vm._styleDebounce);
|
||||
vm._styleDebounce = setTimeout(() => {
|
||||
styleUtil.addScopedAttribute(vm.$el, scopedId, vm);
|
||||
}, 0);
|
||||
}
|
||||
});
|
||||
|
||||
// 开始观察
|
||||
observer.observe(vm.$el, {
|
||||
childList: true,
|
||||
subtree: true
|
||||
});
|
||||
|
||||
// 存储观察器引用
|
||||
this.observers.set(vm._uid, observer);
|
||||
},
|
||||
|
||||
// 断开观察器
|
||||
disconnectObserver(uid) {
|
||||
if (this.observers.has(uid)) {
|
||||
this.observers.get(uid).disconnect();
|
||||
this.observers.delete(uid);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
Vue.mixin({
|
||||
mounted() {
|
||||
if (!this.$options.style) return;
|
||||
|
||||
try {
|
||||
const styleId = `style-${this._uid}`;
|
||||
const scopedId = `data-v-${this._uid}`;
|
||||
|
||||
// 检查样式是否已存在
|
||||
if (document.getElementById(styleId)) {
|
||||
console.warn(`Style with id ${styleId} already exists`);
|
||||
return;
|
||||
}
|
||||
|
||||
const style = document.createElement("style");
|
||||
style.id = styleId;
|
||||
|
||||
// 添加作用域属性
|
||||
if (this.$el) {
|
||||
styleUtil.addScopedAttribute(this.$el, scopedId, this);
|
||||
}
|
||||
|
||||
// 处理CSS
|
||||
let css = typeof this.$options.style === "function"
|
||||
? this.$options.style.call(this)
|
||||
: this.$options.style;
|
||||
|
||||
if (!css || typeof css !== 'string') {
|
||||
console.warn('Invalid style content');
|
||||
return;
|
||||
}
|
||||
|
||||
css = styleUtil.scopeCss(css, scopedId);
|
||||
style.textContent = css;
|
||||
document.head.appendChild(style);
|
||||
|
||||
this._scopedId = scopedId;
|
||||
this._styleId = styleId;
|
||||
|
||||
// 设置异步DOM观察器
|
||||
asyncStyleHandler.setupObserver(this, scopedId);
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error applying scoped styles:', error);
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
beforeDestroy() {
|
||||
try {
|
||||
// 清理作用域属性
|
||||
if (this._scopedId && this.$el) {
|
||||
styleUtil.removeScopedAttribute(this.$el, this._scopedId);
|
||||
}
|
||||
|
||||
// 移除样式标签
|
||||
if (this._styleId) {
|
||||
const style = document.getElementById(this._styleId);
|
||||
if (style && style.parentNode) {
|
||||
style.parentNode.removeChild(style);
|
||||
}
|
||||
}
|
||||
|
||||
// 断开观察器
|
||||
asyncStyleHandler.disconnectObserver(this._uid);
|
||||
} catch (error) {
|
||||
console.error('Error cleaning up scoped styles:', error);
|
||||
}
|
||||
}
|
||||
})
|
||||
Reference in New Issue
Block a user