Commit f1574186 authored by “yiyousong”'s avatar “yiyousong”

feat:添加应用字段配置

parent f9b967a9
...@@ -287,10 +287,12 @@ export default { ...@@ -287,10 +287,12 @@ export default {
this.siteVisible = true; this.siteVisible = true;
}, },
filterItems(appThemeName) { filterItems(appThemeName) {
return ( let arr = this.categoryList.find((v) => v.id == appThemeName);
this.categoryList.find((v) => v.id == appThemeName)?.categoryName || if (arr.length) {
"--" return arr.categoryName;
); } else {
return "--";
}
}, },
}, },
}; };
......
...@@ -140,6 +140,36 @@ ...@@ -140,6 +140,36 @@
<a-icon type="upload" /> 点击上传 <a-icon type="upload" /> 点击上传
</a-button> </a-button>
</a-upload> </a-upload>
<!-- 表格 -->
<a-table
bordered
v-else-if="v.fieldType == 'table'"
size="small"
:scroll="{ y: 550 }"
:pagination="{
showTotal: (total) => `共 ${total} 条`,
current: current,
total: total,
pageSize: size,
showSizeChanger: true,
showQuickJumper: true,
pageSizeOptions: pageSizeOptions,
}"
:columns="columns"
:data-source="tableList"
:row-selection="{
selectedRowKeys: selectedLeftRowKeys,
onChange: onSelectChange,
}"
@change="changeTable"
:rowKey="(record) => record.id"
>
<template slot="num" slot-scope="text, record, index">
<span>
{{ (current - 1) * size + index + 1 }}
</span>
</template>
</a-table>
</a-form-model-item> </a-form-model-item>
</a-form-model> </a-form-model>
</div> </div>
...@@ -167,6 +197,8 @@ ...@@ -167,6 +197,8 @@
<script> <script>
import YQuillEditor from "@/components/YQuillEditor.vue"; import YQuillEditor from "@/components/YQuillEditor.vue";
import { saveDataset } from "@/services/market"; import { saveDataset } from "@/services/market";
import { request } from "@/utils/request";
import local from "@/utils/local";
export default { export default {
components: { components: {
YQuillEditor, YQuillEditor,
...@@ -185,7 +217,9 @@ export default { ...@@ -185,7 +217,9 @@ export default {
}, },
data() { data() {
return { return {
siteId: local.getLocal("siteId"),
api: process.env.VUE_APP_API_BASE_URL + "/", api: process.env.VUE_APP_API_BASE_URL + "/",
pageSizeOptions: ["10", "30", "50", "100", "200"],
labelCol: { labelCol: {
span: 2, span: 2,
}, },
...@@ -198,6 +232,12 @@ export default { ...@@ -198,6 +232,12 @@ export default {
}, },
isopen: false, isopen: false,
year: null, year: null,
selectedLeftRowKeys: [],
current: 1,
size: 10,
total: 0,
tableList: [],
columns: [],
}; };
}, },
computed: { computed: {
...@@ -236,7 +276,7 @@ export default { ...@@ -236,7 +276,7 @@ export default {
onAdd(appTemplate) { onAdd(appTemplate) {
Object.assign(this.form, this.$options.data().form); Object.assign(this.form, this.$options.data().form);
this.form.id && this.$delete(this.form, "id"); this.form.id && this.$delete(this.form, "id");
this.form.appInfoFieldList = appTemplate.map((v) => { this.form.appInfoFieldList = appTemplate.map(async (v) => {
if (v.id) { if (v.id) {
delete v.id; delete v.id;
} }
...@@ -247,6 +287,9 @@ export default { ...@@ -247,6 +287,9 @@ export default {
if (v.fieldType == "checkbox") { if (v.fieldType == "checkbox") {
v.checkbox = []; v.checkbox = [];
} }
if (v.fieldType == "table") {
await this.getData(v.serviceApi);
}
return v; return v;
}); });
this.form.appId = this.$route.query.id; this.form.appId = this.$route.query.id;
...@@ -308,6 +351,22 @@ export default { ...@@ -308,6 +351,22 @@ export default {
row.fieldValue = this.$moment(value).format("YYYY"); row.fieldValue = this.$moment(value).format("YYYY");
this.isopen = false; this.isopen = false;
}, },
onSelectChange(keys, rows) {
this.selectedLeftRowKeys = keys;
console.log(rows);
},
// 获取数据函数
async getData(url, data) {
let res = await request(this.api + url, "post", {
size: this.size,
page: this.current,
siteId: this.siteId,
...data,
});
if (res.data.code == 1) {
console.log(res.data.data);
}
},
}, },
}; };
</script> </script>
......
<template> <template>
<div> <div>
<a-modal :width="600" v-model="Visible" title="新增数据字段"> <a-modal :width="750" v-model="Visible" title="新增数据字段">
<a-form-model <a-form-model
:model="form" :model="form"
ref="form" ref="form"
...@@ -29,17 +29,87 @@ ...@@ -29,17 +29,87 @@
</a-select-option> </a-select-option>
</a-select> </a-select>
</a-form-model-item> </a-form-model-item>
<a-form-model-item
v-if="form.fieldType == 'table'"
label="数据接口"
prop="serviceApi"
>
<a-input
v-model="form.serviceApi"
placeholder="请输入接口地址,示例:/app/dataset/save"
/>
</a-form-model-item>
<a-form-model-item <a-form-model-item
v-if="isNeedConfig" v-if="isNeedConfig"
label="数据配置" label="数据配置"
class="data-config"
prop="fieldTypeValue" prop="fieldTypeValue"
> >
<a-textarea <div class="item" v-for="(v, i) in fieldType" :key="i">
<a-space>
<div>
<a-space>
<span>键:</span>
<a-input v-model="v.key" placeholder="请输入键名" />
</a-space>
</div>
<div>
<a-space>
<span>值:</span>
<a-input v-model="v.value" placeholder="请输入值" />
</a-space>
</div>
<a-button type="primary" @click="insertion(i)"
><a-icon type="plus"
/></a-button>
<a-button type="danger" @click="delrow(i)"
><a-icon type="minus"
/></a-button>
</a-space>
</div>
<!-- <a-textarea
:autoSize="{ minRows: 3, maxRows: 3 }" :autoSize="{ minRows: 3, maxRows: 3 }"
v-model="form.fieldTypeValue" v-model="form.fieldTypeValue"
placeholder='请输入JSON格式数据配置,如{"0":"否","1":"是"}' placeholder='请输入JSON格式数据配置,如{"0":"否","1":"是"}'
allow-clear allow-clear
/> /> -->
</a-form-model-item>
<a-form-model-item
v-if="form.fieldType == 'table'"
label="参数映射"
class="data-config"
prop="serviceApiParams"
>
<div class="item" v-for="(v, i) in apiParams" :key="i">
<a-space>
<div>
<a-space>
<span>键名:</span>
<a-input v-model="v.key" placeholder="请输入键名" />
</a-space>
</div>
<div>
<a-space>
<span>映射:</span>
<a-input v-model="v.value" placeholder="请输入映射字段编码" />
</a-space>
</div>
<a-button type="primary" @click="insertion(i, 'params')"
><a-icon type="plus"
/></a-button>
<a-button type="danger" @click="delrow(i, 'params')"
><a-icon type="minus"
/></a-button>
</a-space>
</div>
<!-- <a-textarea
:autoSize="{ minRows: 3, maxRows: 3 }"
v-model="form.fieldTypeValue"
placeholder='请输入JSON格式数据配置,如{"0":"否","1":"是"}'
allow-clear
/> -->
</a-form-model-item> </a-form-model-item>
<a-form-model-item label="数据类型" prop="dataType"> <a-form-model-item label="数据类型" prop="dataType">
<a-radio-group v-model="form.dataType"> <a-radio-group v-model="form.dataType">
...@@ -123,6 +193,10 @@ const fieldTypeItem = [ ...@@ -123,6 +193,10 @@ const fieldTypeItem = [
value: "select", value: "select",
label: "下拉选择框", label: "下拉选择框",
}, },
{
value: "table",
label: "表格",
},
{ {
value: "upload", value: "upload",
label: "文件上传", label: "文件上传",
...@@ -142,27 +216,39 @@ export default { ...@@ -142,27 +216,39 @@ export default {
}, },
data() { data() {
// 校验JSON // 校验JSON
const checkJSON = (rule, value, callback) => { // const checkJSON = (rule, value, callback) => {
if (!value) { // if (!value) {
callback(new Error("请输入数据配置")); // callback(new Error("请输入数据配置"));
} else { // } else {
try { // try {
let Obj = JSON.parse(value); // let Obj = JSON.parse(value);
let isjson = // let isjson =
Object.prototype.toString.call(Obj).toLowerCase() == // Object.prototype.toString.call(Obj).toLowerCase() ==
"[object object]" && Object.keys(Obj).length; // "[object object]" && Object.keys(Obj).length;
if (isjson) { // if (isjson) {
callback(); // callback();
} else { // } else {
callback(new Error("请输入JSON对象格式")); // callback(new Error("请输入JSON对象格式"));
} // }
} catch (err) { // } catch (err) {
callback(new Error("输入的JSON数据格式有误")); // callback(new Error("输入的JSON数据格式有误"));
} // }
} // }
}; // };
return { return {
fieldTypeItem, fieldTypeItem,
fieldType: [
{
key: "",
value: "",
},
],
apiParams: [
{
key: "",
value: "",
},
],
form: { form: {
appId: "", // 应用id appId: "", // 应用id
fieldCode: "", // 字段编码 fieldCode: "", // 字段编码
...@@ -175,6 +261,8 @@ export default { ...@@ -175,6 +261,8 @@ export default {
fieldOrderNo: 99, // 排序号 fieldOrderNo: 99, // 排序号
fieldTypeValue: "", // 字段类型值 fieldTypeValue: "", // 字段类型值
defaultValue: "", // 字段默认值 defaultValue: "", // 字段默认值
serviceApi: "", // 动态数据接口
serviceApiParams: "", // 动态数据参数配置
remark: "", // remark: "", //
}, },
rules: { rules: {
...@@ -193,8 +281,8 @@ export default { ...@@ -193,8 +281,8 @@ export default {
isList: [ isList: [
{ required: true, message: "请选择是否列表显示", trigger: "change" }, { required: true, message: "请选择是否列表显示", trigger: "change" },
], ],
fieldTypeValue: [ serviceApi: [
{ required: true, validator: checkJSON, trigger: "blur" }, { required: true, message: "请输入数据接口地址", trigger: "blur" },
], ],
}, },
}; };
...@@ -212,7 +300,8 @@ export default { ...@@ -212,7 +300,8 @@ export default {
return ( return (
this.form.fieldType == "radio" || this.form.fieldType == "radio" ||
this.form.fieldType == "checkbox" || this.form.fieldType == "checkbox" ||
this.form.fieldType == "select" this.form.fieldType == "select" ||
this.form.fieldType == "table"
); );
}, },
}, },
...@@ -220,7 +309,11 @@ export default { ...@@ -220,7 +309,11 @@ export default {
handleOk() { handleOk() {
this.$refs.form.validate(async (valid) => { this.$refs.form.validate(async (valid) => {
if (valid) { if (valid) {
let res = await saveTemplete(this.form); let res = await saveTemplete({
...this.form,
fieldTypeValue: JSON.stringify(this.fieldType),
serviceApiParams: JSON.stringify(this.apiParams),
});
let { code, msg } = res.data; let { code, msg } = res.data;
if (code === 1) { if (code === 1) {
this.$message.success(msg); this.$message.success(msg);
...@@ -231,7 +324,19 @@ export default { ...@@ -231,7 +324,19 @@ export default {
}); });
}, },
handleCancel() { handleCancel() {
this.$refs.form.resetFields(); this.$refs.form.clearValidate();
this.fieldType = [
{
key: "",
value: "",
},
];
this.apiParams = [
{
key: "",
value: "",
},
];
this.Visible = false; this.Visible = false;
}, },
// 新增 // 新增
...@@ -242,12 +347,68 @@ export default { ...@@ -242,12 +347,68 @@ export default {
}, },
// 编辑 // 编辑
onEdit(data) { onEdit(data) {
if (data.fieldTypeValue) {
this.fieldType = JSON.parse(data.fieldTypeValue);
} else {
this.fieldType = [
{
key: "",
value: "",
},
];
}
if (data.serviceApiParams) {
this.apiParams = JSON.parse(data.serviceApiParams);
} else {
this.apiParams = [
{
key: "",
value: "",
},
];
}
this.form = { ...data }; this.form = { ...data };
}, },
// 添加数据配置行数
insertion(index, type) {
let obj = {
key: "",
value: "",
};
if (type == "params") {
this.apiParams.splice(index + 1, 0, obj);
} else {
this.fieldType.splice(index + 1, 0, obj);
}
},
// 删除数据配置行数
delrow(index, type) {
if (type == "params") {
if (this.apiParams.length == 1) {
return;
}
this.apiParams.splice(index, 1);
} else {
if (this.fieldType.length == 1) {
return;
}
this.fieldType.splice(index, 1);
}
},
// 切换字段类型 // 切换字段类型
changeFieldType(val) { changeFieldType(val) {
if (!(val == "radio" || val == "checkbox" || val == "select")) { if (
!(val == "radio" || val == "checkbox" || val == "select") ||
!(val == "table")
) {
this.form.fieldTypeValue = ""; this.form.fieldTypeValue = "";
this.form.serviceApi = "";
this.fieldType = [
{
key: "",
value: "",
},
];
} }
}, },
}, },
...@@ -259,4 +420,18 @@ export default { ...@@ -259,4 +420,18 @@ export default {
max-height: 600px; max-height: 600px;
overflow-y: auto; overflow-y: auto;
} }
.data-config {
align-items: flex-start !important;
.item {
width: 100%;
}
/deep/ .ant-space {
width: 100%;
justify-content: space-between;
}
/deep/.ant-form-item-children {
flex-direction: column !important;
}
}
</style> </style>
\ No newline at end of file
const anim_data = { export const anim_data = {
domArr: [ domArr: [
// 杂乱的正方形 // 杂乱的正方形
{ {
...@@ -953,8 +953,8 @@ const anim_data = { ...@@ -953,8 +953,8 @@ const anim_data = {
[ [
0.6, 0.6,
{ {
translate3d: { x: 0, y: 0, z: 10 }, translate3d: { x: 0, y: 380, z: 10 },
scale: 0.8, scale: 0.3,
}, },
], ],
[ [
...@@ -991,8 +991,8 @@ const anim_data = { ...@@ -991,8 +991,8 @@ const anim_data = {
[ [
0.6, 0.6,
{ {
translate3d: { x: 0, y: 0, z: 10 }, translate3d: { x: 0, y: 350, z: 10 },
scale: 0.8, scale: 0.3,
}, },
], ],
[ [
...@@ -1004,136 +1004,9 @@ const anim_data = { ...@@ -1004,136 +1004,9 @@ const anim_data = {
], ],
]), ]),
}, },
],
menusArr: [
// e-icon 上行 // e-icon 上行
{
widthStr: "",
backgroundColorStr: "",
backgroundImageStr: "",
topStr: "",
rightStr: "",
bottomStr: "",
leftStr: "",
className: "e-icon",
parentClassName: "e-icon-box",
opacity: 0,
opacityAnimMap: new Map([
[0.1, 0], // [帧,值]
[1, 1],
]),
transform: {
translate3d: { x: 450, y: 80, z: 10 },
scale: 0,
},
transformAnimMap: new Map([
[
0.1,
{
translate3d: { x: 450, y: 80, z: 10 },
scale: 0,
},
],
[
0.1,
{
translate3d: { x: 450, y: 100, z: 10 },
scale: 0.5,
},
],
[
1,
{
translate3d: { x: 0, y: 0, z: 10 },
scale: 1,
},
],
]),
},
{
widthStr: "",
backgroundColorStr: "",
backgroundImageStr: "",
topStr: "",
rightStr: "",
bottomStr: "",
leftStr: "",
className: "e-icon",
parentClassName: "e-icon-box",
opacity: 0,
opacityAnimMap: new Map([
[0.3, 0], // [帧,值]
[1, 1],
]),
transform: {
translate3d: { x: 300, y: 80, z: 10 },
scale: 0,
},
transformAnimMap: new Map([
[
0.1,
{
translate3d: { x: 300, y: 80, z: 10 },
scale: 0,
},
],
[
0.3,
{
translate3d: { x: 300, y: 100, z: 10 },
scale: 0.5,
},
],
[
1,
{
translate3d: { x: 0, y: 0, z: 10 },
scale: 1,
},
],
]),
},
{
widthStr: "",
backgroundColorStr: "",
backgroundImageStr: "",
topStr: "",
rightStr: "",
bottomStr: "",
leftStr: "",
className: "e-icon",
parentClassName: "e-icon-box",
opacity: 0,
opacityAnimMap: new Map([
[0.5, 0], // [帧,值]
[1, 1],
]),
transform: {
translate3d: { x: 150, y: 80, z: 10 },
scale: 0,
},
transformAnimMap: new Map([
[
0.1,
{
translate3d: { x: 150, y: 80, z: 10 },
scale: 0,
},
],
[
0.5,
{
translate3d: { x: 150, y: 100, z: 10 },
scale: 0.5,
},
],
[
1,
{
translate3d: { x: 0, y: 0, z: 10 },
scale: 1,
},
],
]),
},
{ {
widthStr: "", widthStr: "",
backgroundColorStr: "", backgroundColorStr: "",
...@@ -1150,14 +1023,14 @@ const anim_data = { ...@@ -1150,14 +1023,14 @@ const anim_data = {
[1, 1], [1, 1],
]), ]),
transform: { transform: {
translate3d: { x: 0, y: 80, z: 10 }, translate3d: { x: 430, y: 112, z: 10 },
scale: 0, scale: 0,
}, },
transformAnimMap: new Map([ transformAnimMap: new Map([
[ [
0.1, 0.1,
{ {
translate3d: { x: 0, y: 80, z: 10 }, translate3d: { x: 430, y: 112, z: 10 },
scale: 0, scale: 0,
}, },
], ],
...@@ -1307,135 +1180,6 @@ const anim_data = { ...@@ -1307,135 +1180,6 @@ const anim_data = {
]), ]),
}, },
// e-icon 下行 // e-icon 下行
{
widthStr: "",
backgroundColorStr: "",
backgroundImageStr: "",
topStr: "",
rightStr: "",
bottomStr: "",
leftStr: "",
className: "e-icon",
parentClassName: "e-icon-box",
opacity: 0,
opacityAnimMap: new Map([
[0.1, 0], // [帧,值]
[1, 1],
]),
transform: {
translate3d: { x: 450, y: -80, z: 10 },
scale: 0,
},
transformAnimMap: new Map([
[
0.1,
{
translate3d: { x: 450, y: -80, z: 10 },
scale: 0,
},
],
[
0.1,
{
translate3d: { x: 450, y: -100, z: 10 },
scale: 0.5,
},
],
[
1,
{
translate3d: { x: 0, y: 0, z: 10 },
scale: 1,
},
],
]),
},
{
widthStr: "",
backgroundColorStr: "",
backgroundImageStr: "",
topStr: "",
rightStr: "",
bottomStr: "",
leftStr: "",
className: "e-icon",
parentClassName: "e-icon-box",
opacity: 0,
opacityAnimMap: new Map([
[0.3, 0], // [帧,值]
[1, 1],
]),
transform: {
translate3d: { x: 300, y: -80, z: 10 },
scale: 0,
},
transformAnimMap: new Map([
[
0.1,
{
translate3d: { x: 300, y: -80, z: 10 },
scale: 0,
},
],
[
0.3,
{
translate3d: { x: 300, y: -100, z: 10 },
scale: 0.5,
},
],
[
1,
{
translate3d: { x: 0, y: 0, z: 10 },
scale: 1,
},
],
]),
},
{
widthStr: "",
backgroundColorStr: "",
backgroundImageStr: "",
topStr: "",
rightStr: "",
bottomStr: "",
leftStr: "",
className: "e-icon",
parentClassName: "e-icon-box",
opacity: 0,
opacityAnimMap: new Map([
[0.5, 0], // [帧,值]
[1, 1],
]),
transform: {
translate3d: { x: 150, y: -80, z: 10 },
scale: 0,
},
transformAnimMap: new Map([
[
0.1,
{
translate3d: { x: 150, y: -80, z: 10 },
scale: 0,
},
],
[
0.5,
{
translate3d: { x: 150, y: -100, z: 10 },
scale: 0.5,
},
],
[
1,
{
translate3d: { x: 0, y: 0, z: 10 },
scale: 1,
},
],
]),
},
{ {
widthStr: "", widthStr: "",
backgroundColorStr: "", backgroundColorStr: "",
...@@ -1611,9 +1355,9 @@ const anim_data = { ...@@ -1611,9 +1355,9 @@ const anim_data = {
], ],
}; };
// 特效管理 // 特效管理
class EffectManager { export class EffectManager {
constructor(data = anim_data) { constructor(data = anim_data.domArr) {
data.domArr.forEach((item) => { data.forEach((item) => {
const entity = new Entity(); const entity = new Entity();
// 添加形状组件 // 添加形状组件
...@@ -1930,4 +1674,3 @@ class RollEventComp { ...@@ -1930,4 +1674,3 @@ class RollEventComp {
// }); // });
} }
} }
export default EffectManager;
...@@ -78,6 +78,9 @@ html{ ...@@ -78,6 +78,9 @@ html{
z-index: 10; z-index: 10;
} */ } */
.e-icon{
background: #000;
}
.e-icon a { .e-icon a {
display: flex; display: flex;
width: 100%; width: 100%;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment