Web/hb_pqs_web
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

提交

Browse Source
This commit is contained in:
GGJ
2025-01-09 19:02:44 +08:00
commit 92e7a7a5eb
2943 changed files with 1152283 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

549
src/views/configuration/index.vue Normal file
View File

@@ -0,0 +1,549 @@
<template>
<el-row :gutter="20" style="padding: 15px">
<el-col :span="8">
<el-tag type="primary">配置页名称</el-tag>
<el-tag type="danger" style="color: red"
>注意:用户最多只能配置6个首页</el-tag
>
<div class="demo-input-suffix" style="margin-top: 15px">
设置页面名称:<el-input v-model="input" style="width: 420px"> </el-input>
</div>
<div class="demo-input-suffix" style="margin-top: 15px">
设置页面路径:<el-select
v-model="pathvalue"
placeholder="请选择首页组件路径"
style="width: 420px"
>
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
<el-tag type="primary" style="margin-top: 15px">布局版式</el-tag>
<div class="demo-input-suffix" style="margin-top: 15px; margin-left: 25%">
<el-radio-group v-model="radio" style="margin-top: 15px; width: 100px">
<el-radio :label="1">布局样式1---3+2*2模式</el-radio
><el-image
style="width: 80px; height: 80px; margin-left: 45%"
:src="layou1tsrc"
></el-image>
<el-radio :label="2">布局样式2---2*3模式</el-radio
><el-image
style="width: 80px; height: 80px; margin-left: 45%"
:src="layou2tsrc"
></el-image>
<el-radio :label="3">布局样式3---1+2*3模式</el-radio
><el-image
style="width: 80px; height: 80px; margin-left: 45%"
:src="layou3tsrc"
></el-image>
<el-radio :label="4">布局样式3---3*3模式</el-radio
><el-image
style="width: 80px; height: 80px; margin-left: 45%"
:src="layou4tsrc"
></el-image>
<el-radio :label="5">布局样式3---2+1*3模式</el-radio
><el-image
style="width: 80px; height: 80px; margin-left: 45%"
:src="layou5tsrc"
></el-image>
<el-radio :label="6">布局样式3---1+2+3模式</el-radio
><el-image
style="width: 80px; height: 80px; margin-left: 45%"
:src="layou6tsrc"
></el-image>
</el-radio-group>
</div>
</el-col>
<el-col :span="10">
<el-tag type="primary">配置合成表</el-tag>
<el-table
stripe
stripe
ref="multipleTable"
:data="layoutData"
border
style="width: 100%; margin-top: 10px"
>
<el-table-column
label="布局名称"
prop="name"
width="150"
align="center"
>
</el-table-column>
<el-table-column
text-align="center"
prop="component"
label="合成配置"
align="center"
>
</el-table-column>
</el-table>
</el-col>
<el-col :span="6">
<el-tag type="primary">组件列表</el-tag>
<el-tag type="danger" style="color: red"
>注意:请根据布局板式个数选取组件个数</el-tag
>
<el-table
stripe
stripe
ref="multipleTable"
:data="componentData"
border
style="width: 100%; margin-top: 10px"
@selection-change="handleSelectionChange"
>
<el-table-column align="center" type="selection" width="55" prop="id">
</el-table-column>
<el-table-column align="center" label="功能名称" prop="name">
</el-table-column>
<el-table-column align="center" prop="path" label="组件路径">
</el-table-column>
<el-table-column align="center" prop="pathname" label="组件名称">
</el-table-column>
</el-table>
</el-col>
<el-col :span="24" style="margin-top: 15px; text-align: center">
<el-button class="el-icon-s-tools" type="primary" @click="organizpage"
>合成首页</el-button
>
<el-button class="el-icon-check" type="primary" @click="submit"
>确认提交</el-button
>
</el-col>
</el-row>
</template>
<script>
export default {
data() {
return {
input: "",
options: [
{
value: "/home/home1",
label: "/home/home1",
},
{
value: "/home/home2",
label: "/home/home2",
},
{
value: "/home/home3",
label: "/home/home3",
},
{
value: "/home/home4",
label: "/home/home4",
},
{
value: "/home/home5",
label: "/home/home5",
},
{
value: "/home/home6",
label: "/home/home6",
},
],
pathvalue: "/home/home1",
radio: null,
componentData: [
{
id: "1",
name: "功能1组件",
path: "user-boot/uesr",
pathname: "uesr",
},
{
id: "2",
name: "功能2组件",
path: "user-boot/role",
pathname: "role",
},
{
id: "3",
name: "功能3组件",
path: "user-boot/menu",
pathname: "menu",
},
{
id: "4",
name: "功能4组件",
path: "user-boot/detp",
pathname: "detp",
},
{
id: "5",
name: "功能5组件",
path: "user-boot/aduit",
pathname: "aduit",
},
{
id: "6",
name: "功能6组件",
path: "user-boot/ppp",
pathname: "ppp",
},
{
id: "7",
name: "功能7组件",
path: "user-boot/xxxx",
pathname: "xxxx",
},
{
id: "8",
name: "功能8组件",
path: "user-boot/sss",
pathname: "sss",
},
{
id: "9",
name: "功能9组件",
path: "user-boot/lll",
pathname: "lll",
},
{
id: "10",
name: "功能10组件",
path: "user-boot/fsdf",
pathname: "fsdf",
},
{
id: "11",
name: "功能11组件",
path: "user-boot/ert",
pathname: "ert",
},
{
id: "12",
name: "功能12组件",
path: "user-boot/erter",
pathname: "erter",
},
{
id: "13",
name: "功能13组件",
path: "user-boot/jhd",
pathname: "jhd",
},
{
id: "14",
name: "功能14组件",
path: "user-boot/yyy",
pathname: "yyy",
},
{
id: "15",
name: "功能15组件",
path: "user-boot/ggg",
pathname: "ggg",
},
{
id: "16",
name: "功能16组件",
path: "user-boot/kkk",
pathname: "kkk",
},
],
layou1tsrc: require("../../assets/sybju/A.png"),
layou2tsrc: require("../../assets/sybju/B.png"),
layou3tsrc: require("../../assets/sybju/C.png"),
layou4tsrc: require("../../assets/sybju/D.png"),
layou5tsrc: require("../../assets/sybju/E.png"),
layou6tsrc: require("../../assets/sybju/G.png"),
layout: [
{
id: 1,
buju: [
{ x: 0, y: 0, w: 2, h: 6, i: "1" },
{ x: 2, y: 0, w: 2, h: 6, i: "2" },
{ x: 4, y: 0, w: 2, h: 6, i: "3" },
{ x: 0, y: 6, w: 3, h: 8, i: "4" },
{ x: 3, y: 6, w: 3, h: 8, i: "5" },
{ x: 0, y: 12, w: 3, h: 8, i: "6" },
{ x: 3, y: 12, w: 3, h: 8, i: "7" },
],
},
{
id: 2,
buju: [
{ x: 0, y: 0, w: 3, h: 6, i: "1" },
{ x: 3, y: 0, w: 3, h: 6, i: "2" },
{ x: 0, y: 6, w: 3, h: 6, i: "3" },
{ x: 3, y: 6, w: 3, h: 6, i: "4" },
{ x: 0, y: 12, w: 3, h: 6, i: "5" },
{ x: 3, y: 12, w: 3, h: 6, i: "6" },
],
},
{
id: 3,
buju: [
{ x: 0, y: 0, w: 2, h: 6, i: "1" },
{ x: 2, y: 0, w: 4, h: 6, i: "2" },
{ x: 0, y: 6, w: 2, h: 6, i: "3" },
{ x: 2, y: 6, w: 4, h: 6, i: "4" },
{ x: 0, y: 12, w: 2, h: 6, i: "5" },
{ x: 2, y: 12, w: 4, h: 6, i: "6" },
],
},
{
id: 4,
buju: [
{ x: 0, y: 0, w: 2, h: 6, i: "1" },
{ x: 2, y: 0, w: 2, h: 6, i: "2" },
{ x: 4, y: 0, w: 2, h: 6, i: "3" },
{ x: 0, y: 6, w: 2, h: 6, i: "4" },
{ x: 2, y: 6, w: 2, h: 6, i: "5" },
{ x: 4, y: 6, w: 2, h: 6, i: "6" },
{ x: 0, y: 12, w: 2, h: 6, i: "7" },
{ x: 2, y: 12, w: 2, h: 6, i: "8" },
{ x: 4, y: 12, w: 2, h: 6, i: "9" },
],
},
{
id: 5,
buju: [
{ x: 0, y: 0, w: 4, h: 6, i: "1" },
{ x: 4, y: 0, w: 2, h: 6, i: "2" },
{ x: 0, y: 6, w: 4, h: 6, i: "3" },
{ x: 4, y: 6, w: 2, h: 6, i: "4" },
{ x: 0, y: 12, w: 4, h: 6, i: "5" },
{ x: 4, y: 12, w: 2, h: 6, i: "6" },
],
},
{
id: 6,
buju: [
{ x: 0, y: 0, w: 6, h: 8, i: "1" },
{ x: 0, y: 8, w: 2, h: 7, i: "2" },
{ x: 2, y: 8, w: 4, h: 7, i: "3" },
{ x: 0, y: 15, w: 2, h: 6, i: "4" },
{ x: 2, y: 15, w: 2, h: 6, i: "5" },
{ x: 4, y: 15, w: 2, h: 6, i: "6" },
],
},
],
componentlist: [],
layoutData: [
{
id: 1,
name: "布局1---3+2*2模式",
component:
'{"x":0,"y":0,"w":2,"h":6,"i":"1"},' +
'{"x":2,"y":0,"w":2,"h":6,"i":"2"},' +
'{"x":4,"y":0,"w":2,"h":6,"i":"3"},' +
'{"x":0,"y":6,"w":3,"h":8,"i":"4"},' +
'{"x":3,"y":6,"w":3,"h":8,"i":"5"},' +
'{"x":0,"y":12,"w":3,"h":8,"i":"6"},' +
'{"x":3,"y":12,"w":3,"h":8,"i":"7"}',
},
{
id: 2,
name: "布局1---2*3模式",
component:
'{"x":0,"y":0,"w":3,"h":6,"i":"1"},' +
'{"x":3,"y":0,"w":3,"h":6,"i":"2"},' +
'{"x":0,"y":6,"w":3,"h":6,"i":"3"},' +
'{"x":3,"y":6,"w":3,"h":6,"i":"4"},' +
'{"x":0,"y":12,"w":3,"h":6,"i":"5"},' +
'{"x":3,"y":12,"w":3,"h":6,"i":"6"}',
},
{
id: 3,
name: "布局1---1+2*3模式",
component:
' {"x":0,"y":0,"w":2,"h":6,"i":"1"},' +
'{"x":2,"y":0,"w":4,"h":6,"i":"2"},' +
'{"x":0,"y":6,"w":2,"h":6,"i":"3"},' +
'{"x":2,"y":6,"w":4,"h":6,"i":"4"},' +
'{"x":0,"y":12,"w":2,"h":6,"i":"5"},' +
'{"x":2,"y":12,"w":4,"h":6,"i":"6"}',
},
{
id: 4,
name: "布局1---3*3模式",
component:
'{"x":0,"y":0,"w":2,"h":6,"i":"1"},' +
'{"x":2,"y":0,"w":2,"h":6,"i":"2"},' +
'{"x":4,"y":0,"w":2,"h":6,"i":"3"},' +
'{"x":0,"y":6,"w":2,"h":6,"i":"4"},' +
'{"x":2,"y":6,"w":2,"h":6,"i":"5"},' +
'{"x":4,"y":6,"w":2,"h":6,"i":"6"},' +
'{"x":0,"y":12,"w":2,"h":6,"i":"7"},' +
'{"x":2,"y":12,"w":2,"h":6,"i":"8"},' +
'{"x":4,"y":12,"w":2,"h":6,"i":"9"}',
},
{
id: 5,
name: "布局1---2+1*3模式",
component:
'{"x":0,"y":0,"w":4,"h":6,"i":"1"},' +
'{"x":4,"y":0,"w":2,"h":6,"i":"2"},' +
'{"x":0,"y":6,"w":4,"h":6,"i":"3"},' +
'{"x":4,"y":6,"w":2,"h":6,"i":"4"},' +
'{"x":0,"y":12,"w":4,"h":6,"i":"5"},' +
'{"x":4,"y":12,"w":2,"h":6,"i":"6"}',
},
{
id: 6,
name: "布局1---1+2+3模式",
component:
'{"x":0,"y":0,"w":6,"h":8,"i":"1"},' +
'{"x":0,"y":8,"w":2,"h":7,"i":"2"},' +
'{"x":2,"y":8,"w":4,"h":7,"i":"3"},' +
'{"x":0,"y":15,"w":2,"h":6,"i":"4"},' +
'{"x":2,"y":15,"w":2,"h":6,"i":"5"},' +
'{"x":4,"y":15,"w":2,"h":6,"i":"6"}',
},
],
formList: [],
};
},
mounted() {
this.getcomponent();
},
methods: {
//获取组件
getcomponent() {},
//合成首页
organizpage() {
if (this.input != "") {
if (this.radio != null) {
if (this.radio == 1) {
if (this.componentlist.length >= 7) {
for (var j = 0; j < this.componentlist.length; j++) {
for (var i = 0; i < this.layout[0].buju.length; i++) {
this.layout[0].buju[i].component =
this.componentlist[i].pathname;
}
}
this.formList = this.layout[0].buju;
// console.log(this.formList);
this.$message.success("合成成功，请确认提交录入数据库");
} else {
this.$message.warning(
"选取的组件个数小于布局版式个数,请根据布局板式个数选取组件个数"
);
}
} else if (this.radio == 2) {
if (this.componentlist.length >= 6) {
for (var j = 0; j < this.componentlist.length; j++) {
for (var i = 0; i < this.layout[1].buju.length; i++) {
this.layout[1].buju[i].component =
this.componentlist[i].pathname;
}
}
this.formList = this.layout[1].buju;
// console.log(this.formList);
this.$message.success("合成成功，请确认提交录入数据库");
} else {
this.$message.warning(
"选取的组件个数小于布局版式个数,请根据布局板式个数选取组件个数"
);
}
//console.log(this.layout)
} else if (this.radio == 3) {
if (this.componentlist.length >= 6) {
for (var j = 0; j < this.componentlist.length; j++) {
for (var i = 0; i < this.layout[2].buju.length; i++) {
this.layout[2].buju[i].component =
this.componentlist[i].pathname;
}
}
this.formList = this.layout[2].buju;
// console.log(this.formList);
this.$message.success("合成成功，请确认提交录入数据库");
} else {
this.$message.warning(
"选取的组件个数小于布局版式个数,请根据布局板式个数选取组件个数"
);
}
// console.log(this.layout)
} else if (this.radio == 4) {
if (this.componentlist.length >= 9) {
for (var j = 0; j < this.componentlist.length; j++) {
for (var i = 0; i < this.layout[3].buju.length; i++) {
this.layout[3].buju[i].component =
this.componentlist[i].pathname;
}
}
this.formList = this.layout[3].buju;
// console.log(this.formList);
this.$message.success("合成成功，请确认提交录入数据库");
} else {
this.$message.warning(
"选取的组件个数小于布局版式个数,请根据布局板式个数选取组件个数"
);
}
//console.log(this.layout)
} else if (this.radio == 5) {
if (this.componentlist.length >= 6) {
for (var j = 0; j < this.componentlist.length; j++) {
for (var i = 0; i < this.layout[4].buju.length; i++) {
this.layout[4].buju[i].component =
this.componentlist[i].pathname;
}
}
this.formList = this.layout[4].buju;
//console.log(this.formList);
this.$message.success("合成成功，请确认提交录入数据库");
} else {
this.$message.warning(
"选取的组件个数小于布局版式个数,请根据布局板式个数选取组件个数"
);
}
// console.log(this.layout)
} else if (this.radio == 6) {
if (this.componentlist.length >= 6) {
for (var j = 0; j < this.componentlist.length; j++) {
for (var i = 0; i < this.layout[5].buju.length; i++) {
this.layout[5].buju[i].component =
this.componentlist[i].pathname;
}
}
this.formList = this.layout[5].buju;
// console.log(this.formList);
this.$message.success("合成成功，请确认提交录入数据库");
} else {
this.$message.warning(
"选取的组件个数小于布局版式个数,请根据布局板式个数选取组件个数"
);
}
}
//console.log(this.layout)
} else {
this.$message.warning("请选择布局版式");
}
} else {
this.$message.warning("请设置页面名称");
}
},
//选取的组件集合
handleSelectionChange(val) {
this.componentlist = val;
},
//提交数据
submit() {
let formData = {
pageName: this.input,
path: this.pathvalue,
componentList: this.formList,
};
//console.log(formData);
},
},
};
</script>
<style>
.layout4 .app-container .app-container-in .app-main .app-main-in {
position: relative;
height: 100%;
overflow: hidden;
background: #f0f2f5;
}
</style>