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

feat:添加应用字段配置

parent f9b967a9
......@@ -287,10 +287,12 @@ export default {
this.siteVisible = true;
},
filterItems(appThemeName) {
return (
this.categoryList.find((v) => v.id == appThemeName)?.categoryName ||
"--"
);
let arr = this.categoryList.find((v) => v.id == appThemeName);
if (arr.length) {
return arr.categoryName;
} else {
return "--";
}
},
},
};
......
......@@ -140,6 +140,36 @@
<a-icon type="upload" /> 点击上传
</a-button>
</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>
</div>
......@@ -167,6 +197,8 @@
<script>
import YQuillEditor from "@/components/YQuillEditor.vue";
import { saveDataset } from "@/services/market";
import { request } from "@/utils/request";
import local from "@/utils/local";
export default {
components: {
YQuillEditor,
......@@ -185,7 +217,9 @@ export default {
},
data() {
return {
siteId: local.getLocal("siteId"),
api: process.env.VUE_APP_API_BASE_URL + "/",
pageSizeOptions: ["10", "30", "50", "100", "200"],
labelCol: {
span: 2,
},
......@@ -198,6 +232,12 @@ export default {
},
isopen: false,
year: null,
selectedLeftRowKeys: [],
current: 1,
size: 10,
total: 0,
tableList: [],
columns: [],
};
},
computed: {
......@@ -236,7 +276,7 @@ export default {
onAdd(appTemplate) {
Object.assign(this.form, this.$options.data().form);
this.form.id && this.$delete(this.form, "id");
this.form.appInfoFieldList = appTemplate.map((v) => {
this.form.appInfoFieldList = appTemplate.map(async (v) => {
if (v.id) {
delete v.id;
}
......@@ -247,6 +287,9 @@ export default {
if (v.fieldType == "checkbox") {
v.checkbox = [];
}
if (v.fieldType == "table") {
await this.getData(v.serviceApi);
}
return v;
});
this.form.appId = this.$route.query.id;
......@@ -308,6 +351,22 @@ export default {
row.fieldValue = this.$moment(value).format("YYYY");
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>
......
<template>
<div>
<a-modal :width="600" v-model="Visible" title="新增数据字段">
<a-modal :width="750" v-model="Visible" title="新增数据字段">
<a-form-model
:model="form"
ref="form"
......@@ -29,17 +29,87 @@
</a-select-option>
</a-select>
</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
v-if="isNeedConfig"
label="数据配置"
class="data-config"
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 }"
v-model="form.fieldTypeValue"
placeholder='请输入JSON格式数据配置,如{"0":"否","1":"是"}'
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 label="数据类型" prop="dataType">
<a-radio-group v-model="form.dataType">
......@@ -123,6 +193,10 @@ const fieldTypeItem = [
value: "select",
label: "下拉选择框",
},
{
value: "table",
label: "表格",
},
{
value: "upload",
label: "文件上传",
......@@ -142,27 +216,39 @@ export default {
},
data() {
// 校验JSON
const checkJSON = (rule, value, callback) => {
if (!value) {
callback(new Error("请输入数据配置"));
} else {
try {
let Obj = JSON.parse(value);
let isjson =
Object.prototype.toString.call(Obj).toLowerCase() ==
"[object object]" && Object.keys(Obj).length;
if (isjson) {
callback();
} else {
callback(new Error("请输入JSON对象格式"));
}
} catch (err) {
callback(new Error("输入的JSON数据格式有误"));
}
}
};
// const checkJSON = (rule, value, callback) => {
// if (!value) {
// callback(new Error("请输入数据配置"));
// } else {
// try {
// let Obj = JSON.parse(value);
// let isjson =
// Object.prototype.toString.call(Obj).toLowerCase() ==
// "[object object]" && Object.keys(Obj).length;
// if (isjson) {
// callback();
// } else {
// callback(new Error("请输入JSON对象格式"));
// }
// } catch (err) {
// callback(new Error("输入的JSON数据格式有误"));
// }
// }
// };
return {
fieldTypeItem,
fieldType: [
{
key: "",
value: "",
},
],
apiParams: [
{
key: "",
value: "",
},
],
form: {
appId: "", // 应用id
fieldCode: "", // 字段编码
......@@ -175,6 +261,8 @@ export default {
fieldOrderNo: 99, // 排序号
fieldTypeValue: "", // 字段类型值
defaultValue: "", // 字段默认值
serviceApi: "", // 动态数据接口
serviceApiParams: "", // 动态数据参数配置
remark: "", //
},
rules: {
......@@ -193,8 +281,8 @@ export default {
isList: [
{ required: true, message: "请选择是否列表显示", trigger: "change" },
],
fieldTypeValue: [
{ required: true, validator: checkJSON, trigger: "blur" },
serviceApi: [
{ required: true, message: "请输入数据接口地址", trigger: "blur" },
],
},
};
......@@ -212,7 +300,8 @@ export default {
return (
this.form.fieldType == "radio" ||
this.form.fieldType == "checkbox" ||
this.form.fieldType == "select"
this.form.fieldType == "select" ||
this.form.fieldType == "table"
);
},
},
......@@ -220,7 +309,11 @@ export default {
handleOk() {
this.$refs.form.validate(async (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;
if (code === 1) {
this.$message.success(msg);
......@@ -231,7 +324,19 @@ export default {
});
},
handleCancel() {
this.$refs.form.resetFields();
this.$refs.form.clearValidate();
this.fieldType = [
{
key: "",
value: "",
},
];
this.apiParams = [
{
key: "",
value: "",
},
];
this.Visible = false;
},
// 新增
......@@ -242,12 +347,68 @@ export default {
},
// 编辑
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 };
},
// 添加数据配置行数
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) {
if (!(val == "radio" || val == "checkbox" || val == "select")) {
if (
!(val == "radio" || val == "checkbox" || val == "select") ||
!(val == "table")
) {
this.form.fieldTypeValue = "";
this.form.serviceApi = "";
this.fieldType = [
{
key: "",
value: "",
},
];
}
},
},
......@@ -259,4 +420,18 @@ export default {
max-height: 600px;
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>
\ No newline at end of file
const anim_data = {
export const anim_data = {
domArr: [
// 杂乱的正方形
{
......@@ -953,8 +953,8 @@ const anim_data = {
[
0.6,
{
translate3d: { x: 0, y: 0, z: 10 },
scale: 0.8,
translate3d: { x: 0, y: 380, z: 10 },
scale: 0.3,
},
],
[
......@@ -991,8 +991,8 @@ const anim_data = {
[
0.6,
{
translate3d: { x: 0, y: 0, z: 10 },
scale: 0.8,
translate3d: { x: 0, y: 350, z: 10 },
scale: 0.3,
},
],
[
......@@ -1004,136 +1004,9 @@ const anim_data = {
],
]),
},
],
menusArr: [
// 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: "",
backgroundColorStr: "",
......@@ -1150,14 +1023,14 @@ const anim_data = {
[1, 1],
]),
transform: {
translate3d: { x: 0, y: 80, z: 10 },
translate3d: { x: 430, y: 112, z: 10 },
scale: 0,
},
transformAnimMap: new Map([
[
0.1,
{
translate3d: { x: 0, y: 80, z: 10 },
translate3d: { x: 430, y: 112, z: 10 },
scale: 0,
},
],
......@@ -1307,135 +1180,6 @@ const anim_data = {
]),
},
// 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: "",
backgroundColorStr: "",
......@@ -1611,9 +1355,9 @@ const anim_data = {
],
};
// 特效管理
class EffectManager {
constructor(data = anim_data) {
data.domArr.forEach((item) => {
export class EffectManager {
constructor(data = anim_data.domArr) {
data.forEach((item) => {
const entity = new Entity();
// 添加形状组件
......@@ -1930,4 +1674,3 @@ class RollEventComp {
// });
}
}
export default EffectManager;
......@@ -78,6 +78,9 @@ html{
z-index: 10;
} */
.e-icon{
background: #000;
}
.e-icon a {
display: flex;
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