mirror of
https://gitee.com/niucloud-team/niucloud.git
synced 2026-01-26 12:38:10 +00:00
476 lines
18 KiB
TypeScript
476 lines
18 KiB
TypeScript
import { defineStore } from 'pinia'
|
||
import { t } from '@/lang'
|
||
import { toRaw } from 'vue'
|
||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||
import { cloneDeep } from 'lodash-es'
|
||
|
||
const useDiyStore = defineStore('diy', {
|
||
state: () => {
|
||
return {
|
||
id: 0,
|
||
load: false, // 加载状态
|
||
currentIndex: -99, // 当前正在编辑的组件下标
|
||
currentComponent: 'edit-page', // 当前正在编辑的组件名称
|
||
pageMode: 'diy',
|
||
editTab: 'content',// 编辑页面
|
||
pageTitle: '', // 页面名称（用于后台展示）
|
||
name: '', // 页面标识
|
||
type: '', // 页面模板
|
||
typeName: '', // 页面模板名称
|
||
templateName: '', // 页面模板标识
|
||
isDefault: 0, // 是否默认页面
|
||
predefineColors: [
|
||
'#F4391c',
|
||
'#ff4500',
|
||
'#ff8c00',
|
||
'#FFD009',
|
||
'#ffd700',
|
||
'#19C650',
|
||
'#90ee90',
|
||
'#00ced1',
|
||
'#1e90ff',
|
||
'#c71585',
|
||
'#FF407E',
|
||
'#CFAF70',
|
||
'#A253FF',
|
||
'rgba(255, 69, 0, 0.68)',
|
||
'rgb(255, 120, 0)',
|
||
'hsl(181, 100%, 37%)',
|
||
'hsla(209, 100%, 56%, 0.73)',
|
||
'#c7158577'
|
||
],
|
||
components: <any>[], // 组件集合
|
||
position: ['top_fixed', 'right_fixed', 'bottom_fixed', 'left_fixed', 'fixed'],
|
||
global: {
|
||
title: "页面", // 页面标题（用于前台展示）
|
||
|
||
pageStartBgColor: "", // 页面背景颜色（开始）
|
||
pageEndBgColor: "", // 页面背景颜色（结束）
|
||
pageGradientAngle: 'to bottom', // 渐变角度，从上到下（to bottom）、从左到右（to right）
|
||
bgUrl: '', // 页面背景图片
|
||
bgHeightScale: 0, // 页面背景高度比例，单位%，0为高度自适应
|
||
imgWidth: '', // 页面背景图片宽度
|
||
imgHeight: '', // 页面背景图片高度
|
||
|
||
// 顶部导航栏
|
||
topStatusBar: {
|
||
isShow: true, // 是否显示
|
||
bgColor: "#ffffff", // 头部背景颜色
|
||
rollBgColor: "#ffffff", // 滚动时，头部背景颜色
|
||
style: 'style-1', // 导航栏风格样式（style-1：文字，style-2：图片+文字，style-3：图片+搜索，style-4：定位）
|
||
styleName: '风格1',
|
||
textColor: "#333333", // 文字颜色
|
||
rollTextColor: "#333333", // 滚动时，头部文字颜色
|
||
textAlign: 'center', // 文字对齐方式
|
||
inputPlaceholder: '请输入搜索关键词',
|
||
imgUrl: '', // 图片
|
||
link: { // 跳转链接
|
||
name: ""
|
||
}
|
||
},
|
||
|
||
bottomTabBarSwitch: true, // 底部导航开关
|
||
|
||
// 弹框 count：不弹出 -1，首次弹出 1，每次弹出 0
|
||
popWindow: {
|
||
imgUrl: "",
|
||
imgWidth: '',
|
||
imgHeight: '',
|
||
count: -1,
|
||
show: 0,
|
||
link: {
|
||
name: ""
|
||
},
|
||
},
|
||
|
||
// 公共模板属性，所有组件都继承，无需重复定义，组件内部根据业务自行调用
|
||
template: {
|
||
textColor: "#303133", // 文字颜色
|
||
pageStartBgColor: "", // 组件底部背景颜色（开始）
|
||
pageEndBgColor: "", // 组件底部背景颜色（结束）
|
||
pageGradientAngle: 'to bottom', // 渐变角度，从上到下（to bottom）、从左到右（to right）
|
||
|
||
componentBgUrl: '', // 组件背景图片
|
||
componentBgAlpha: 2, // 组件背景图片的透明度，0~10
|
||
componentStartBgColor: '', // 组件背景颜色（开始）
|
||
componentEndBgColor: '', // 组件背景颜色（结束）
|
||
componentGradientAngle: 'to bottom', // 渐变角度，从上到下（to bottom）、从左到右（to right）
|
||
topRounded: 0, // 组件上圆角
|
||
bottomRounded: 0, // 组件下圆角
|
||
|
||
elementBgColor: '', // 元素背景颜色
|
||
topElementRounded: 0, // 元素上圆角
|
||
bottomElementRounded: 0, // 元素下圆角
|
||
|
||
margin: {
|
||
top: 0, // 上边距
|
||
bottom: 0, // 下边距
|
||
both: 0, // 左右边距
|
||
}
|
||
}
|
||
|
||
},
|
||
// 组件集合
|
||
value: <any>[]
|
||
}
|
||
},
|
||
getters: {
|
||
editComponent: (state) => {
|
||
if (state.currentIndex == -99) {
|
||
return state.global;
|
||
} else {
|
||
return state.value[state.currentIndex];
|
||
}
|
||
},
|
||
},
|
||
actions: {
|
||
// 初始化数据
|
||
init() {
|
||
this.global = {
|
||
title: "页面", // 页面标题
|
||
|
||
pageStartBgColor: "", // 页面背景颜色（开始）
|
||
pageEndBgColor: "", // 页面背景颜色（结束）
|
||
pageGradientAngle: 'to bottom', // 渐变角度，从上到下（to bottom）、从左到右（to right）
|
||
bgUrl: '', // 页面背景图片
|
||
bgHeightScale: 100, // 页面背景高度比例，单位%
|
||
imgWidth: '', // 页面背景图片宽度
|
||
imgHeight: '', // 页面背景图片高度
|
||
|
||
// 顶部导航栏
|
||
topStatusBar: {
|
||
isShow: true, // 是否显示
|
||
bgColor: "#ffffff", // 头部背景颜色
|
||
rollBgColor: "#ffffff", // 滚动时，头部背景颜色
|
||
style: 'style-1', // 导航栏风格样式（style-1：文字，style-2：图片+文字，style-3：图片+搜索，style-4：定位）
|
||
styleName: '风格1',
|
||
textColor: "#333333", // 文字颜色
|
||
rollTextColor: "#333333", // 滚动时，头部文字颜色
|
||
textAlign: 'center', // 文字对齐方式
|
||
inputPlaceholder: '请输入搜索关键词',
|
||
imgUrl: '', // 图片
|
||
link: { // 跳转链接
|
||
name: ""
|
||
}
|
||
},
|
||
|
||
bottomTabBarSwitch: true, // 底部导航开关
|
||
|
||
// 弹框 count：不弹出 -1，首次弹出 1，每次弹出 0
|
||
popWindow: {
|
||
imgUrl: "",
|
||
imgWidth: '',
|
||
imgHeight: '',
|
||
count: -1,
|
||
show: 0,
|
||
link: {
|
||
name: ""
|
||
},
|
||
},
|
||
|
||
// 公共模板属性，所有组件都继承，无需重复定义，组件内部根据业务自行调用
|
||
template: {
|
||
textColor: "#303133", // 文字颜色
|
||
pageStartBgColor: "", // 组件底部背景颜色（开始）
|
||
pageEndBgColor: "", // 组件底部背景颜色（结束）
|
||
pageGradientAngle: 'to bottom', // 渐变角度，从上到下（to bottom）、从左到右（to right）
|
||
|
||
componentBgUrl: '', // 组件背景图片
|
||
componentBgAlpha: 2, // 组件背景图片的透明度
|
||
componentStartBgColor: '', // 组件背景颜色（开始）
|
||
componentEndBgColor: '', // 组件背景颜色（结束）
|
||
componentGradientAngle: 'to bottom', // 渐变角度，从上到下（to bottom）、从左到右（to right）
|
||
topRounded: 0, // 组件上圆角
|
||
bottomRounded: 0, // 组件下圆角
|
||
|
||
elementBgColor: '', // 元素背景颜色
|
||
topElementRounded: 0, // 元素上圆角
|
||
bottomElementRounded: 0, // 元素下圆角
|
||
|
||
margin: {
|
||
top: 0, // 上边距
|
||
bottom: 0, // 下边距
|
||
both: 0, // 左右边距
|
||
}
|
||
}
|
||
|
||
};
|
||
this.value = [];
|
||
},
|
||
// 添加组件
|
||
addComponent(key: string, data: any) {
|
||
// 加载完才能添加组件
|
||
if (!this.load) return;
|
||
|
||
// 删除不用的字段
|
||
let component = cloneDeep(data);
|
||
|
||
component.id = this.generateRandom();
|
||
component.componentName = key;
|
||
component.componentTitle = component.title;
|
||
component.ignore = []; // 忽略公共属性
|
||
|
||
Object.assign(component, component.value);
|
||
delete component.title;
|
||
delete component.value;
|
||
delete component.type;
|
||
delete component.icon;
|
||
|
||
// 默认继承全局属性
|
||
let template = cloneDeep(this.global.template);
|
||
Object.assign(component, template);
|
||
|
||
if (component.template) {
|
||
// 按照组件初始的属性覆盖默认值
|
||
Object.assign(component, component.template);
|
||
delete component.template;
|
||
}
|
||
|
||
if (!this.checkComponentIsAdd(component)) {
|
||
// 组件最多只能添加n个
|
||
ElMessage({
|
||
type: 'warning',
|
||
message: `${ component.componentTitle }${ t('componentCanOnlyAdd') }${ component.uses }${ t('piece') }`,
|
||
});
|
||
return;
|
||
}
|
||
|
||
// 置顶组件，只能在第一个位置中添加
|
||
if (component.position && this.position.indexOf(component.position) != -1) {
|
||
|
||
this.currentIndex = 0;
|
||
// 指定位置添加组件
|
||
this.value.splice(0, 0, component);
|
||
|
||
} else if (this.currentIndex === -99) {
|
||
|
||
this.value.push(component);
|
||
// 添加组件后（不是编辑调用的），选择最后一个
|
||
this.currentIndex = this.value.length - 1;
|
||
|
||
} else {
|
||
|
||
// 指定位置添加组件
|
||
this.value.splice(++this.currentIndex, 0, component);
|
||
|
||
}
|
||
|
||
this.currentComponent = component.path;
|
||
},
|
||
generateRandom(len: number = 5) {
|
||
return Number(Math.random().toString().substr(3, len) + Date.now()).toString(36);
|
||
},
|
||
// 将数据发送到uniapp
|
||
postMessage() {
|
||
var diyData = JSON.stringify({
|
||
pageMode: this.pageMode,
|
||
currentIndex: this.currentIndex,
|
||
global: toRaw(this.global),
|
||
value: toRaw(this.value)
|
||
});
|
||
window.previewIframe.contentWindow.postMessage(diyData, '*');
|
||
},
|
||
// 选中正在编辑的组件
|
||
changeCurrentIndex(index: number, component: any = null) {
|
||
this.currentIndex = index;
|
||
if (this.currentIndex == -99) {
|
||
this.currentComponent = 'edit-page';
|
||
} else if (component) {
|
||
this.currentComponent = component.path;
|
||
}
|
||
},
|
||
// 删除组件
|
||
delComponent() {
|
||
if (this.currentIndex == -99) return;
|
||
|
||
ElMessageBox.confirm(
|
||
t('delComponentTips'),
|
||
t('warning'),
|
||
{
|
||
confirmButtonText: t('confirm'),
|
||
cancelButtonText: t('cancel'),
|
||
type: 'warning',
|
||
autofocus: false
|
||
}
|
||
).then(() => {
|
||
this.value.splice(this.currentIndex, 1);
|
||
|
||
// 如果组件全部删除，则选中页面设置
|
||
if (this.value.length === 0) {
|
||
this.currentIndex = -99;
|
||
}
|
||
|
||
// 如果当前选中的组件不存在，则选择上一个
|
||
if (this.currentIndex === this.value.length) {
|
||
this.currentIndex--;
|
||
}
|
||
let component = cloneDeep(this.value[this.currentIndex]);
|
||
|
||
this.changeCurrentIndex(this.currentIndex, component)
|
||
|
||
}).catch(() => {
|
||
})
|
||
|
||
},
|
||
// 上移组件
|
||
moveUpComponent() {
|
||
var temp = cloneDeep(this.value[this.currentIndex]); // 当前选中组件
|
||
let prevIndex = this.currentIndex - 1;
|
||
var temp2 = cloneDeep(this.value[prevIndex]); // 上个组件
|
||
|
||
if ((this.currentIndex - 1) < 0 || temp2.position && this.position.indexOf(temp2.position) != -1) return; // 从0开始
|
||
|
||
temp.id = this.generateRandom(); // 更新id，刷新组件数据
|
||
temp2.id = this.generateRandom(); // 更新id，刷新组件数据
|
||
|
||
if (temp.position && this.position.indexOf(temp.position) != -1) {
|
||
ElMessage({
|
||
type: 'warning',
|
||
message: `${ t('componentNotMoved') }`,
|
||
});
|
||
return;
|
||
}
|
||
|
||
this.value[this.currentIndex] = temp2;
|
||
this.value[prevIndex] = temp;
|
||
|
||
this.changeCurrentIndex(prevIndex, temp);
|
||
},
|
||
// 下移组件
|
||
moveDownComponent() {
|
||
if (this.currentIndex < -1 || (this.currentIndex + 1) >= this.value.length) return; // 最后一个不能下移
|
||
|
||
var nextIndex = this.currentIndex + 1;
|
||
|
||
var temp = cloneDeep(this.value[this.currentIndex]); // 当前选中组件
|
||
temp.id = this.generateRandom(); // 更新id，刷新组件数据
|
||
|
||
var temp2 = cloneDeep(this.value[nextIndex]); // 下个组件
|
||
temp2.id = this.generateRandom(); // 更新id，刷新组件数据
|
||
|
||
if (temp.position && this.position.indexOf(temp.position) != -1) {
|
||
ElMessage({
|
||
type: 'warning',
|
||
message: `${ t('componentNotMoved') }`,
|
||
});
|
||
return;
|
||
}
|
||
|
||
this.value[this.currentIndex] = temp2;
|
||
this.value[nextIndex] = temp;
|
||
|
||
this.changeCurrentIndex(nextIndex, temp);
|
||
|
||
},
|
||
// 复制组件
|
||
copyComponent() {
|
||
if (this.currentIndex < 0) return; // 从0开始
|
||
|
||
let component = cloneDeep(this.value[this.currentIndex]); // 当前选中组件
|
||
component.id = this.generateRandom(); // 更新id，刷新组件数据
|
||
|
||
if (!this.checkComponentIsAdd(component)) {
|
||
ElMessage({
|
||
type: 'warning',
|
||
message: `${ t('notCopy') }，${ component.componentTitle }${ t('componentCanOnlyAdd') }${ component.uses }${ t('piece') }`,
|
||
});
|
||
return;
|
||
}
|
||
|
||
if (component.position && this.position.indexOf(component.position) != -1) {
|
||
ElMessage({
|
||
type: 'warning',
|
||
message: `${ t('notCopy') }，${ component.componentTitle }${ t('componentCanOnlyAdd') }1${ t('piece') }`,
|
||
});
|
||
return;
|
||
}
|
||
|
||
var index = this.currentIndex + 1;
|
||
this.value.splice(index, 0, component);
|
||
|
||
this.changeCurrentIndex(index, component);
|
||
|
||
},
|
||
// 检测组件是否允许添加，true：允许 false：不允许
|
||
checkComponentIsAdd(component: any) {
|
||
|
||
//为0时不处理
|
||
if (component.uses === 0) return true;
|
||
|
||
var count = 0;
|
||
|
||
//遍历已添加的自定义组件，检测是否超出数量
|
||
for (var i in this.value) if (this.value[i].componentName === component.componentName) count++;
|
||
|
||
if (count >= component.uses) return false;
|
||
else return true;
|
||
},
|
||
// 重置当前组件数据
|
||
resetComponent() {
|
||
if (this.currentIndex < 0) return; // 从0开始
|
||
|
||
ElMessageBox.confirm(
|
||
t('resetComponentTips'),
|
||
t('warning'),
|
||
{
|
||
confirmButtonText: t('confirm'),
|
||
cancelButtonText: t('cancel'),
|
||
type: 'warning',
|
||
autofocus: false
|
||
}
|
||
).then(() => {
|
||
// 重置当前选中的组件数据
|
||
for (let i = 0; i < this.components.length; i++) {
|
||
if (this.components[i].componentName == this.editComponent.componentName) {
|
||
Object.assign(this.editComponent, this.components[i]);
|
||
break;
|
||
}
|
||
}
|
||
|
||
}).catch(() => {
|
||
})
|
||
|
||
},
|
||
// 组件验证
|
||
verify() {
|
||
if (this.pageTitle === "") {
|
||
ElMessage({
|
||
message: t('diyPageTitlePlaceholder'),
|
||
type: 'warning'
|
||
})
|
||
this.changeCurrentIndex(-99);
|
||
return false;
|
||
}
|
||
|
||
// if (this.global.title === "") {
|
||
// ElMessage({
|
||
// message: t('diyTitlePlaceholder'),
|
||
// type: 'warning'
|
||
// })
|
||
// this.changeCurrentIndex(-99);
|
||
// return false;
|
||
// }
|
||
|
||
for (var i = 0; i < this.value.length; i++) {
|
||
try {
|
||
if (this.value[i].verify) {
|
||
var res = this.value[i].verify(i);
|
||
if (!res.code) {
|
||
this.changeCurrentIndex(i, this.value[i])
|
||
ElMessage({
|
||
message: res.message,
|
||
type: 'warning'
|
||
})
|
||
return false;
|
||
}
|
||
}
|
||
} catch (e) {
|
||
console.log("verify Error:", e, i, this.value[i]);
|
||
}
|
||
}
|
||
return true;
|
||
}
|
||
}
|
||
})
|
||
|
||
export default useDiyStore |