0017
/
smart-power-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(store): 添加更新功能列表和事件列表的排序功能、调整字典和用户页面、删除无用代码 

- 在 attribute.js 中添加了 UpdateFunctionList 和 UpdateEventList 两个 action
This commit is contained in:
fhysy 2025-05-26 17:42:33 +08:00
parent a23c97c513
commit fccb5033a7
10 changed files with 938 additions and 1103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/store/modules/attribute.js
View File

@ -177,6 +177,14 @@ const attribute = {
EditEvent({ commit, state }, param) { EditEvent({ commit, state }, param) {
commit('UPDATE_EVENT', param) commit('UPDATE_EVENT', param)
}, },
// 修改 列表
UpdateFunctionList({ commit, state }, param) {
commit('SET_FUNCTION_LIST', param)
},
// 修改 列表
UpdateEventList({ commit, state }, param) {
commit('SET_EVENT_LIST', param)
},
// 删除分组 删除分组 判断分组是否有属性，有属性就不能删除 // 删除分组 删除分组 判断分组是否有属性，有属性就不能删除
DeleteGroup({ commit, state }, idx) { DeleteGroup({ commit, state }, idx) {
let groupItem = state.groupList[idx]; let groupItem = state.groupList[idx];

2
src/views/iot/device/index.vue
View File

@ -877,7 +877,7 @@ export default {
} }
], ],
deviceTag: [ deviceTag: [
{ required: true, message: "设备标签不能为空", trigger: "change" } // { required: true, message: "设备标签不能为空", trigger: "change" }
] ]
}, },
deviceTypeList: {}, deviceTypeList: {},

76
src/views/iot/device/profile/functionWrap.vue
View File

@ -333,14 +333,12 @@
</div> </div>
</template> </template>
<script> <script>
import { updateDevice, resetPssword, setSwitchControl, setFunctionControl } from "@/api/iot/device"; import { setSwitchControl, setFunctionControl } from "@/api/iot/device";
import DialogTemplate from "@/components/DialogTemplate"; import DialogTemplate from "@/components/DialogTemplate";
import DeviceAlarmConfig from "@/views/profile/DeviceAlarmConfig/DeviceAlarmConfig"; import DeviceAlarmConfig from "@/views/profile/DeviceAlarmConfig/DeviceAlarmConfig";
import DeviceTimingConfig from "@/views/profile/DeviceTimingConfig/DeviceTimingConfig"; import DeviceTimingConfig from "@/views/profile/DeviceTimingConfig/DeviceTimingConfig";
import { addCard, delCard, getCard, setCardQuery } from "@/api/iot/cardNumber"; import { addCard, delCard, getCard, setCardQuery } from "@/api/iot/cardNumber";
import MyMonacoEditor from '@/views/components/my-monaco-editor' import MyMonacoEditor from '@/views/components/my-monaco-editor'
// import JsonEditor from "@/components/JsonEditor";
// import { callFunction } from "@/api/iot/function";
export default { export default {
name: "functionWrap", name: "functionWrap",
@ -427,43 +425,6 @@ export default {
} }
return this.currentFunction.inputs.map(input => { return this.currentFunction.inputs.map(input => {
// 获取类型显示名称
let typeName = "";
// switch (input.valueType.type) {
// case "int":
// typeName = "整数";
// break;
// case "long":
// typeName = "长整数";
// break;
// case "float":
// typeName = "浮点数";
// break;
// case "double":
// typeName = "双精度浮点数";
// break;
// case "string":
// typeName = "字符串";
// break;
// case "boolean":
// typeName = "布尔值";
// break;
// case "date":
// typeName = "日期时间";
// break;
// case "enum":
// typeName = "枚举";
// break;
// case "array":
// typeName = "数组";
// break;
// case "object":
// typeName = "对象";
// break;
// default:
// typeName = input.valueType.type;
// }
return { return {
...input, ...input,
type: input.valueType.type type: input.valueType.type
@ -619,42 +580,7 @@ export default {
} else { } else {
this.$message.error("功能执行失败"); this.$message.error("功能执行失败");
} }
}); });
// 模拟API调用
// setTimeout(() => {
// this.loading = false;
//
// // 添加执行结果
// const result = {
// time: new Date().toLocaleString(),
// functionName: item.name,
// success: Math.random() > 0.2, // 模拟成功/失败
// data: JSON.stringify(processedData, null, 2)
// };
//
// this.executionResults.unshift(result);
//
// // 控制结果列表最大数量
// if (this.executionResults.length > 20) {
// this.executionResults.pop();
// }
//
// // 显示执行结果提示
// if (result.success) {
// this.$message.success("功能执行成功");
// } else {
// this.$message.error("功能执行失败");
// }
//
// // 滚动到顶部
// this.$nextTick(() => {
// if (this.$refs.resultContent) {
// this.$refs.resultContent.scrollTop = 0;
// }
// });
// }, 1000);
} }
}); });
}else{ }else{

24
src/views/profile/DeviceDetailsView/eventLog.vue
View File

@ -100,8 +100,7 @@
</template> </template>
<script> <script>
import { listDeviceEventLogList, listDeviceLogList } from "@/api/iot/device"; import { listDeviceEventLogList } from "@/api/iot/device";
import SelectTableWrap from "@/components/SelectTable/index";
import {formatDate} from "@/utils"; import {formatDate} from "@/utils";
import JsonViewer from "vue-json-viewer"; import JsonViewer from "vue-json-viewer";
import "vue-json-viewer/style.css"; import "vue-json-viewer/style.css";
@ -110,12 +109,10 @@ export default {
name: 'EventLog', name: 'EventLog',
props: ['sourceId', 'pDevcieInfo'], props: ['sourceId', 'pDevcieInfo'],
components: { components: {
SelectTableWrap,
JsonViewer JsonViewer
}, },
data() { data() {
return { return {
direction,
// 查询参数 // 查询参数
pickerValue: null, pickerValue: null,
queryParams: { queryParams: {
@ -124,7 +121,6 @@ export default {
orderType: 2, orderType: 2,
deviceId: null, deviceId: null,
deviceName: null, deviceName: null,
direction: direction[0].value,
eventType: '', eventType: '',
beginTime: null, beginTime: null,
endTime: null endTime: null
@ -201,10 +197,6 @@ export default {
resetQuery() { resetQuery() {
this.resetForm("queryForm"); this.resetForm("queryForm");
this.resetPicker(); this.resetPicker();
// if (this.eventTypeList && this.eventTypeList.length > 0) {
// this.queryParams.eventType = this.eventTypeList[0].id;
// this.activeEventObj = this.eventTypeList[0];
// }
this.handleQuery(); this.handleQuery();
}, },
resetPicker() { resetPicker() {
@ -228,20 +220,6 @@ export default {
this.queryParams = Object.assign(this.queryParams, sort); this.queryParams = Object.assign(this.queryParams, sort);
this.handleQuery(); this.handleQuery();
}, },
copyOnClick(val) {
let self = this;
this.$copyText(val).then(
function () {
self.$message({
message: "复制成功",
type: "success",
});
},
function () {
self.$message.error("复制失败");
}
);
},
openDetail(item){ openDetail(item){
let eventContent = ''; let eventContent = '';
try { try {

566
src/views/profile/attribute/eventFormModel.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="attribute-form-view"> <div class="event-form-model">
<el-dialog <el-dialog
:close-on-click-modal="false" :close-on-click-modal="false"
:modal="false" :modal="false"
@ -8,7 +8,8 @@
class="params-eldialog" class="params-eldialog"
top="5vh" top="5vh"
width="800px" width="800px"
@close="$emit('update:visible', false)"> @close="$emit('update:visible', false)"
>
<el-form <el-form
ref="form" ref="form"
:model="form" :model="form"
@ -28,7 +29,11 @@
</el-form-item> </el-form-item>
<el-form-item label="事件级别:" prop="level"> <el-form-item label="事件级别:" prop="level">
<el-select v-model="form.expands.level" placeholder="请选择事件级别" style="width: 100%"> <el-select
v-model="form.expands.level"
placeholder="请选择事件级别"
style="width: 100%"
>
<el-option <el-option
v-for="(dice, value) in eventLevel" v-for="(dice, value) in eventLevel"
:key="value" :key="value"
@ -42,7 +47,7 @@
<el-table :data="form.valueType.properties" height="300px"> <el-table :data="form.valueType.properties" height="300px">
<el-table-column align="left" label="标识" prop="id" /> <el-table-column align="left" label="标识" prop="id" />
<el-table-column align="left" label="名称" prop="name" /> <el-table-column align="left" label="名称" prop="name" />
<el-table-column align="left" label="数据类型" prop="type" > <el-table-column align="left" label="数据类型" prop="type">
<template slot-scope="scope"> <template slot-scope="scope">
<span>{{ dataTypeOption[scope.row.valueType.type] }}</span> <span>{{ dataTypeOption[scope.row.valueType.type] }}</span>
</template> </template>
@ -51,9 +56,23 @@
align="center" align="center"
class-name="small-padding fixed-width" class-name="small-padding fixed-width"
label="操作" label="操作"
width="100px" width="200px"
> >
<template slot-scope="scope"> <template slot-scope="scope">
<el-button
:disabled="scope.$index === 0"
icon="el-icon-arrow-up"
size="mini"
type="text"
@click="handleInputUp(scope.$index)"
>上移</el-button>
<el-button
:disabled="scope.$index === form.valueType.properties.length - 1"
icon="el-icon-arrow-down"
size="mini"
type="text"
@click="handleInputDown(scope.$index)"
>下移</el-button>
<el-button <el-button
icon="el-icon-edit" icon="el-icon-edit"
size="mini" size="mini"
@ -77,12 +96,13 @@
style="width: 100%;margin-top: 10px" style="width: 100%;margin-top: 10px"
type="info" type="info"
@click="addParam" @click="addParam"
>新增输出参数</el-button> >新增输出参数</el-button
>
</el-form-item> </el-form-item>
<!-- <el-form-item label="是否异步:" prop="async">--> <!-- <el-form-item label="是否异步:" prop="async">-->
<!-- <el-switch v-model="form.async"/>--> <!-- <el-switch v-model="form.async"/>-->
<!-- </el-form-item>--> <!-- </el-form-item>-->
</el-form> </el-form>
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button> <el-button type="primary" @click="submitForm">确 定</el-button>
@ -110,11 +130,19 @@
<el-input v-model="inputFormObj.form.id" placeholder="请输入标识" /> <el-input v-model="inputFormObj.form.id" placeholder="请输入标识" />
</el-form-item> </el-form-item>
<el-form-item label="参数名称:" prop="name"> <el-form-item label="参数名称:" prop="name">
<el-input v-model="inputFormObj.form.name" placeholder="请输入参数名称" /> <el-input
v-model="inputFormObj.form.name"
placeholder="请输入参数名称"
/>
</el-form-item> </el-form-item>
<el-form-item label="数据类型:" prop="type"> <el-form-item label="数据类型:" prop="type">
<el-select v-model="inputFormObj.form.valueType.type" placeholder="请选择数据类型" style="width: 100%" @change="inputDataTypeChange"> <el-select
v-model="inputFormObj.form.valueType.type"
placeholder="请选择数据类型"
style="width: 100%"
@change="inputDataTypeChange"
>
<el-option <el-option
v-for="(dice, value) in dataTypeOption" v-for="(dice, value) in dataTypeOption"
:key="value" :key="value"
@ -123,13 +151,27 @@
/> />
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item v-if="inputFormObj.form.valueType.type === 'enum'" label="枚举值:"> <el-form-item
v-if="inputFormObj.form.valueType.type === 'enum'"
label="枚举值:"
>
<div class="enum-box"> <div class="enum-box">
<div class="enum-header"> <div class="enum-header">
<el-button size="mini" type="primary" @click="addEnumItem">添加枚举项</el-button> <el-button size="mini" type="primary" @click="addEnumItem"
>添加枚举项</el-button
>
</div> </div>
<el-table :data="inputFormObj.form.valueType.elements" border style="width: 100%"> <el-table
<el-table-column align="center" label="序号" type="index" width="60"></el-table-column> :data="inputFormObj.form.valueType.elements"
border
style="width: 100%"
>
<el-table-column
align="center"
label="序号"
type="index"
width="60"
></el-table-column>
<el-table-column label="值" prop="value" width="180"> <el-table-column label="值" prop="value" width="180">
<template slot-scope="scope"> <template slot-scope="scope">
<el-input <el-input
@ -137,7 +179,12 @@
:class="{ 'is-error': scope.row.value }" :class="{ 'is-error': scope.row.value }"
placeholder="请输入值" placeholder="请输入值"
></el-input> ></el-input>
<div v-if="scope.row.value===''" class="el-form-item__error">值不能为空</div> <div
v-if="scope.row.value === ''"
class="el-form-item__error"
>
值不能为空
</div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="描述" prop="text"> <el-table-column label="描述" prop="text">
@ -147,7 +194,9 @@
:class="{ 'is-error': scope.row.text }" :class="{ 'is-error': scope.row.text }"
placeholder="请输入描述" placeholder="请输入描述"
></el-input> ></el-input>
<div v-if="scope.row.text===''" class="el-form-item__error">描述不能为空</div> <div v-if="scope.row.text === ''" class="el-form-item__error">
描述不能为空
</div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column align="center" label="操作" width="80"> <el-table-column align="center" label="操作" width="80">
@ -164,9 +213,9 @@
</el-table> </el-table>
</div> </div>
</el-form-item> </el-form-item>
<!-- <el-form-item label="是否必选:" prop="required">--> <!-- <el-form-item label="是否必选:" prop="required">-->
<!-- <el-switch v-model="inputFormObj.form.expands.required" />--> <!-- <el-switch v-model="inputFormObj.form.expands.required" />-->
<!-- </el-form-item>--> <!-- </el-form-item>-->
</el-form> </el-form>
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitInputForm">确 定</el-button> <el-button type="primary" @click="submitInputForm">确 定</el-button>
@ -176,34 +225,12 @@
</div> </div>
</template> </template>
<script> <script>
import { mapGetters, mapState } from "vuex"; import { dataTypeOption, eventLevel } from "@/basedata/physicalModel";
import JsonEditor from "./jsonEditor";
import {dataTypeOption,eventLevel} from "@/basedata/physicalModel"
// const dataTypeOption = {
// int: 'int(整数型)',
// long: 'long(长整数型)',
// float: 'float(单精度浮点型)',
// double: 'double(双精度浮点数)',
// string: 'text(字符串)',
// boolean: 'boolean(布尔型)',
// date: 'date(时间型)',
// enum: 'enum(枚举)',
// array: 'array(数组)',
// object: 'object(结构体)',
// file: 'file(文件)',
// password: 'password(密码)',
// geoPoint: 'geoPoint(地理位置)',
// };
// const eventLevel = {
// ordinary:'普通',
// warn:'警告',
// urgent:'紧急',
// }
const defaultenumForm = { const defaultenumForm = {
value: '', value: "",
text: '' text: ""
} };
const defaultForm = { const defaultForm = {
id: "", id: "",
@ -214,12 +241,10 @@ const defaultForm = {
async: false, async: false,
valueType: { valueType: {
type: "object", type: "object",
properties: [ properties: []
]
} }
}; };
const defaultInputForm = { const defaultInputForm = {
id: "", id: "",
name: "", name: "",
@ -235,23 +260,22 @@ const defaultInputForm = {
export default { export default {
name: "EventFormModel", name: "EventFormModel",
components: { JsonEditor },
props: { props: {
visible: { visible: {
type: Boolean, type: Boolean,
default: false, default: false
}, },
title: { title: {
type: String, type: String,
default: '新增', default: "新增"
}, },
row: { row: {
type: Object, type: Object,
default: () => {}, default: () => {}
}, },
tempType: { tempType: {
type: String, type: String,
default: "add", default: "add"
}, },
paramIdx: { paramIdx: {
type: Number, type: Number,
@ -262,9 +286,6 @@ export default {
default: [] default: []
} }
}, },
computed: {
...mapGetters(["groupList"]),
},
data() { data() {
return { return {
dataTypeOption, dataTypeOption,
@ -279,8 +300,7 @@ export default {
async: false, async: false,
valueType: { valueType: {
type: "object", type: "object",
properties: [ properties: []
]
} }
}, },
inputFormObj: { inputFormObj: {
@ -291,40 +311,40 @@ export default {
inputFormRules: { inputFormRules: {
id: [ id: [
{ required: true, message: "标识不能为空", trigger: "blur" }, { required: true, message: "标识不能为空", trigger: "blur" },
{ pattern: /^[a-zA-Z0-9_\-]+$/,message: '标识只能由数字、字母、下划线、中划线组成',trigger: "blur"}, {
pattern: /^[a-zA-Z0-9_\-]+$/,
message: "标识只能由数字、字母、下划线、中划线组成",
trigger: "blur"
},
{ validator: this.validateOutputId, trigger: "blur" } { validator: this.validateOutputId, trigger: "blur" }
], ],
name: [ name: [{ required: true, message: "名称不能为空", trigger: "blur" }]
{ required: true, message: "名称不能为空", trigger: "blur" }
]
}, },
// 表单校验 // 表单校验
rules: { rules: {
name: [ name: [{ required: true, message: "名称不能为空", trigger: "blur" }],
{ required: true, message: "名称不能为空", trigger: "blur" },
],
id: [ id: [
{ required: true, message: "标识不能为空", trigger: "blur" }, { required: true, message: "标识不能为空", trigger: "blur" },
{ pattern: /^[a-zA-Z0-9_\-]+$/,message: '标识只能由数字、字母、下划线、中划线组成',trigger: "blur"}, {
pattern: /^[a-zA-Z0-9_\-]+$/,
message: "标识只能由数字、字母、下划线、中划线组成",
trigger: "blur"
},
{ validator: this.validateEventId, trigger: "blur" } { validator: this.validateEventId, trigger: "blur" }
], ],
type: [ type: [{ required: true, message: "数据类型不能为空", trigger: "blur" }]
{ required: true, message: "数据类型不能为空", trigger: "blur" }, }
]
},
}; };
}, },
created() { created() {
console.log("this.paramIdx", this.paramIdx, this.tempType);
if (this.tempType === "update" && this.paramIdx >= 0) { if (this.tempType === "update" && this.paramIdx >= 0) {
this.form = JSON.parse(JSON.stringify(this.row)); this.form = JSON.parse(JSON.stringify(this.row));
} else { } else {
// 新增时初始化表单 // 新增时初始化表单
this.form = JSON.parse(JSON.stringify(defaultForm)); this.form = JSON.parse(JSON.stringify(defaultForm));
} }
}, },
watch: { watch: {
visible(val) { visible(val) {
if (val) { if (val) {
// 当弹窗打开时 // 当弹窗打开时
@ -354,10 +374,10 @@ watch: {
}); });
} }
} }
}, },
methods: { methods: {
// 自定义标识符验证规则 // 自定义标识符验证规则
validateEventId(rule, value, callback){ validateEventId(rule, value, callback) {
if (this.tempType === "update" && value === this.row.id) { if (this.tempType === "update" && value === this.row.id) {
// 如果是编辑模式且ID没有变化，直接通过验证 // 如果是编辑模式且ID没有变化，直接通过验证
callback(); callback();
@ -365,53 +385,68 @@ watch: {
} }
// 检查功能标识符是否重复 // 检查功能标识符是否重复
const isDuplicate = this.eventList && this.eventList.some(item => item.id === value); const isDuplicate =
this.eventList && this.eventList.some(item => item.id === value);
if (isDuplicate) { if (isDuplicate) {
callback(new Error('标识符已存在，请更换')); callback(new Error("标识符已存在，请更换"));
} else { } else {
callback(); callback();
} }
}, },
// 自定义输入参数标识符验证规则 // 自定义输入参数标识符验证规则
validateOutputId(rule, value, callback){ validateOutputId(rule, value, callback) {
if (this.inputFormObj.isEdit && value === this.form.valueType.properties[this.inputFormObj.index].id) { if (
this.inputFormObj.isEdit &&
value === this.form.valueType.properties[this.inputFormObj.index].id
) {
// 如果是编辑模式且ID没有变化，直接通过验证 // 如果是编辑模式且ID没有变化，直接通过验证
callback(); callback();
return; return;
} }
// 检查输入参数标识符是否重复 // 检查输入参数标识符是否重复
const isDuplicate = this.form.valueType.properties.some(item => item.id === value); const isDuplicate = this.form.valueType.properties.some(
item => item.id === value
);
if (isDuplicate) { if (isDuplicate) {
callback(new Error('参数标识符已存在，请更换')); callback(new Error("参数标识符已存在，请更换"));
} else { } else {
callback(); callback();
} }
}, },
submitForm() { submitForm() {
this.$refs["form"].validate((valid) => { this.$refs["form"].validate(valid => {
if (valid) { if (valid) {
// 额外校验输入参数 // 额外校验输入参数
if (!this.form.valueType.properties || this.form.valueType.properties.length === 0) { if (
this.$message.warning('请至少添加一个输出参数'); !this.form.valueType.properties ||
this.form.valueType.properties.length === 0
) {
this.$message.warning("请至少添加一个输出参数");
return; return;
} }
// 新增和修改操作 // 新增和修改操作
if (this.tempType === "add") { if (this.tempType === "add") {
this.$store.dispatch("AddEvent", this.form).then(() => { this.$store
.dispatch("AddEvent", this.form)
.then(() => {
this.$message.success("添加成功"); this.$message.success("添加成功");
this.$emit("ok"); this.$emit("ok");
}).catch(err => { })
.catch(err => {
this.$message.error("添加失败：" + err); this.$message.error("添加失败：" + err);
}); });
} else if (this.tempType === "update") { } else if (this.tempType === "update") {
this.$store.dispatch("EditEvent", { this.$store
.dispatch("EditEvent", {
item: this.form, item: this.form,
idx: this.paramIdx, idx: this.paramIdx
}).then(() => { })
.then(() => {
this.$message.success("修改成功"); this.$message.success("修改成功");
this.$emit("ok"); this.$emit("ok");
}).catch(err => { })
.catch(err => {
this.$message.error("修改失败：" + err); this.$message.error("修改失败：" + err);
}); });
} }
@ -420,48 +455,51 @@ watch: {
}, },
inputDataTypeChange(val) { inputDataTypeChange(val) {
// 根据选择的数据类型设置valueType的type属性 // 根据选择的数据类型设置valueType的type属性
if (val === 'int') { if (val === "int") {
this.inputFormObj.form.valueType.type = 'int'; this.inputFormObj.form.valueType.type = "int";
this.inputFormObj.form.valueType.elements = []; this.inputFormObj.form.valueType.elements = [];
} else if (val === 'long') { } else if (val === "long") {
this.inputFormObj.form.valueType.type = 'long'; this.inputFormObj.form.valueType.type = "long";
this.inputFormObj.form.valueType.elements = []; this.inputFormObj.form.valueType.elements = [];
} else if (val === 'float') { } else if (val === "float") {
this.inputFormObj.form.valueType.type = 'float'; this.inputFormObj.form.valueType.type = "float";
this.inputFormObj.form.valueType.elements = []; this.inputFormObj.form.valueType.elements = [];
} else if (val === 'double') { } else if (val === "double") {
this.inputFormObj.form.valueType.type = 'double'; this.inputFormObj.form.valueType.type = "double";
this.inputFormObj.form.valueType.elements = []; this.inputFormObj.form.valueType.elements = [];
} else if (val === 'string') { } else if (val === "string") {
this.inputFormObj.form.valueType.type = 'string'; this.inputFormObj.form.valueType.type = "string";
this.inputFormObj.form.valueType.elements = []; this.inputFormObj.form.valueType.elements = [];
} else if (val === 'boolean') { } else if (val === "boolean") {
this.inputFormObj.form.valueType.type = 'boolean'; this.inputFormObj.form.valueType.type = "boolean";
this.inputFormObj.form.valueType.elements = []; this.inputFormObj.form.valueType.elements = [];
} else if (val === 'date') { } else if (val === "date") {
this.inputFormObj.form.valueType.type = 'date'; this.inputFormObj.form.valueType.type = "date";
this.inputFormObj.form.valueType.elements = []; this.inputFormObj.form.valueType.elements = [];
} else if (val === 'enum') { } else if (val === "enum") {
this.inputFormObj.form.valueType.type = 'enum'; this.inputFormObj.form.valueType.type = "enum";
if (!this.inputFormObj.form.valueType.elements || this.inputFormObj.form.valueType.elements.length === 0) { if (
!this.inputFormObj.form.valueType.elements ||
this.inputFormObj.form.valueType.elements.length === 0
) {
this.inputFormObj.form.valueType.elements = []; this.inputFormObj.form.valueType.elements = [];
// 默认添加一个空的枚举项 // 默认添加一个空的枚举项
this.addEnumItem(); this.addEnumItem();
} }
} else if (val === 'array') { } else if (val === "array") {
this.inputFormObj.form.valueType.type = 'array'; this.inputFormObj.form.valueType.type = "array";
this.inputFormObj.form.valueType.elements = []; this.inputFormObj.form.valueType.elements = [];
} else if (val === 'object') { } else if (val === "object") {
this.inputFormObj.form.valueType.type = 'object'; this.inputFormObj.form.valueType.type = "object";
this.inputFormObj.form.valueType.elements = []; this.inputFormObj.form.valueType.elements = [];
} else if (val === 'file') { } else if (val === "file") {
this.inputFormObj.form.valueType.type = 'file'; this.inputFormObj.form.valueType.type = "file";
this.inputFormObj.form.valueType.elements = []; this.inputFormObj.form.valueType.elements = [];
} else if (val === 'password') { } else if (val === "password") {
this.inputFormObj.form.valueType.type = 'password'; this.inputFormObj.form.valueType.type = "password";
this.inputFormObj.form.valueType.elements = []; this.inputFormObj.form.valueType.elements = [];
} else if (val === 'geoPoint') { } else if (val === "geoPoint") {
this.inputFormObj.form.valueType.type = 'geoPoint'; this.inputFormObj.form.valueType.type = "geoPoint";
this.inputFormObj.form.valueType.elements = []; this.inputFormObj.form.valueType.elements = [];
} }
}, },
@ -474,10 +512,30 @@ watch: {
// 添加一个新的枚举项 // 添加一个新的枚举项
const newEnumItem = JSON.parse(JSON.stringify(defaultenumForm)); const newEnumItem = JSON.parse(JSON.stringify(defaultenumForm));
newEnumItem.value = ''; newEnumItem.value = "";
newEnumItem.text = ''; newEnumItem.text = "";
this.inputFormObj.form.valueType.elements.push(newEnumItem); this.inputFormObj.form.valueType.elements.push(newEnumItem);
}, },
removeEnumItem(index) {
this.$confirm("是否确认删除该枚举参数?", "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
})
.then(() => {
this.inputFormObj.form.valueType.elements.splice(index, 1);
this.$message({
type: "success",
message: "删除成功!"
});
})
.catch(() => {
this.$message({
type: "info",
message: "已取消删除"
});
});
},
// 修改提交方法，增加枚举项验证 // 修改提交方法，增加枚举项验证
submitInputForm() { submitInputForm() {
@ -485,18 +543,24 @@ watch: {
this.$refs.inputForm.validate(valid => { this.$refs.inputForm.validate(valid => {
if (valid) { if (valid) {
// 如果是枚举类型，确保至少有一个枚举项 // 如果是枚举类型，确保至少有一个枚举项
if (this.inputFormObj.form.valueType.type === 'enum' && if (
this.inputFormObj.form.valueType.type === "enum" &&
(!this.inputFormObj.form.valueType.elements || (!this.inputFormObj.form.valueType.elements ||
this.inputFormObj.form.valueType.elements.length === 0)) { this.inputFormObj.form.valueType.elements.length === 0)
this.$message.warning('枚举类型至少需要一个枚举项'); ) {
this.$message.warning("枚举类型至少需要一个枚举项");
return; return;
} }
// 验证枚举项的值和描述不能为空 // 验证枚举项的值和描述不能为空
if (this.inputFormObj.form.valueType.type === 'enum') { if (this.inputFormObj.form.valueType.type === "enum") {
let hasError = false; let hasError = false;
const enumValues = new Set(); const enumValues = new Set();
for (let i = 0; i < this.inputFormObj.form.valueType.elements.length; i++) { for (
let i = 0;
i < this.inputFormObj.form.valueType.elements.length;
i++
) {
const item = this.inputFormObj.form.valueType.elements[i]; const item = this.inputFormObj.form.valueType.elements[i];
let value = !item.value; let value = !item.value;
let text = !item.text; let text = !item.text;
@ -511,7 +575,7 @@ watch: {
enumValues.add(item.value); enumValues.add(item.value);
} }
if (hasError) { if (hasError) {
this.$message.warning('请完善枚举项的值和描述'); this.$message.warning("请完善枚举项的值和描述");
return; return;
} }
} }
@ -519,10 +583,16 @@ watch: {
// 如果是编辑模式 // 如果是编辑模式
if (this.inputFormObj.isEdit) { if (this.inputFormObj.isEdit) {
// 更新现有输入参数 // 更新现有输入参数
this.$set(this.form.valueType.properties, this.inputFormObj.index, this.inputFormObj.form); this.$set(
this.form.valueType.properties,
this.inputFormObj.index,
this.inputFormObj.form
);
} else { } else {
// 添加新的输入参数 // 添加新的输入参数
this.form.valueType.properties.push(JSON.parse(JSON.stringify(this.inputFormObj.form))); this.form.valueType.properties.push(
JSON.parse(JSON.stringify(this.inputFormObj.form))
);
} }
// 关闭弹窗 // 关闭弹窗
@ -534,11 +604,13 @@ watch: {
}); });
// 提示成功 // 提示成功
this.$message.success(this.inputFormObj.isEdit ? '修改成功' : '添加成功'); this.$message.success(
this.inputFormObj.isEdit ? "修改成功" : "添加成功"
);
} }
}); });
}, },
addParam(){ addParam() {
this.inputFormObj = { this.inputFormObj = {
isEdit: false, isEdit: false,
index: -1, index: -1,
@ -546,7 +618,48 @@ watch: {
}; };
this.inputParamOpen = true; this.inputParamOpen = true;
}, },
/** /**
* 上移功能
* @param {Number} index 当前功能索引
*/
handleInputUp(index) {
if (index === 0) return; // 已经是第一个，不能再上移
try {
// 交换当前项与上一项的位置
const temp = this.form.valueType.properties[index];
this.$set(this.form.valueType.properties, index, this.form.valueType.properties[index - 1]);
this.$set(this.form.valueType.properties, index - 1, temp);
this.$message({
type: 'success',
message: '上移成功!'
});
} catch (error) {
this.$message.error("操作失败：" + error);
}
},
/**
* 下移功能
* @param {Number} index 当前功能索引
*/
handleInputDown(index) {
if (index === this.form.valueType.properties.length - 1) return; // 已经是最后一个，不能再下移
try {
// 交换当前项与下一项的位置
const temp = this.form.valueType.properties[index];
this.$set(this.form.valueType.properties, index, this.form.valueType.properties[index + 1]);
this.$set(this.form.valueType.properties, index + 1, temp);
this.$message({
type: 'success',
message: '下移成功!'
});
} catch (error) {
this.$message.error("操作失败：" + error);
}
},
/**
* 修改输入参数 * 修改输入参数
* @param {Object} row 行数据 * @param {Object} row 行数据
* @param {Number} index 行索引 * @param {Number} index 行索引
@ -558,113 +671,36 @@ watch: {
form: JSON.parse(JSON.stringify(row)) form: JSON.parse(JSON.stringify(row))
}; };
this.inputParamOpen = true; this.inputParamOpen = true;
}, },
/** /**
* 删除输入参数 * 删除输入参数
* @param {Object} row 行数据 * @param {Object} row 行数据
* @param {Number} index 行索引 * @param {Number} index 行索引
*/ */
handleInputDelete(row, index) { handleInputDelete(row, index) {
this.$confirm('是否确认删除该输出参数?', '警告', { this.$confirm("是否确认删除该输出参数?", "警告", {
confirmButtonText: '确定', confirmButtonText: "确定",
cancelButtonText: '取消', cancelButtonText: "取消",
type: 'warning' type: "warning"
}).then(() => { })
.then(() => {
this.form.valueType.properties.splice(index, 1); this.form.valueType.properties.splice(index, 1);
this.$message({ this.$message({
type: 'success', type: "success",
message: '删除成功!' message: "删除成功!"
}); });
}).catch(() => { })
.catch(() => {
this.$message({ this.$message({
type: 'info', type: "info",
message: '已取消删除' message: "已取消删除"
}); });
}); });
}, inputChange() { },
inputChange() {
this.$forceUpdate(); this.$forceUpdate();
}, },
cmdChange(val) {
let newArr = this.groupList.filter((v) => {
if (v["cmdKey"] === val) {
return v["cmdType"];
}
});
this.form.funRwType = newArr[0] || this.form.funRwType;
},
getParamIten(idx) {
this.$store.dispatch("GetAttributeItem", idx).then((res) => {
console.log("GetAttributeItem",res,idx);
this.form = {show: true, sort: 100,dataFormat: {
type: null,
list: {}
}, ...JSON.parse(JSON.stringify(res))};
});
},
/** 提交验证 */
// submitForm: function () {
// this.$refs["form"].validate((valid) => {
// if (valid) {
// // 新增和修改操作
// if (this.tempType === "add") {
// this.$store.dispatch("AddEvent", this.form).then(() => {
// this.$message.success("添加成功");
// this.$emit("ok");
// }).catch(err => {
// this.$message.error("添加失败：" + err);
// });
// } else if (this.tempType === "update") {
// this.$store.dispatch("EditEvent", {
// item: this.form,
// idx: this.paramIdx,
// }).then(() => {
// this.$message.success("修改成功");
// this.$emit("ok");
// }).catch(err => {
// this.$message.error("修改失败：" + err);
// });
// }
// }
// });
// },
// 回调 ok
//数据类型值变化出发方法
funDataTypeChange(val) {
this.form.funValAcc = null;
this.form.funValidType = "";
},
addJsonObj() {
this.$refs["jsonEditors"].addHandel();
},
jsonEvent(data) {
this.form.funObj = data;
},
addEnumJsonObj() {
this.$refs["enumJsonEditors"].addHandel();
},
enumJsonEvent(data) {
this.form.dataFormat.list = data;
},
// 校验方式发生变化的方法
funValidTypeChange(val) {
this.form.funValidType = val;
this.form.funValMax = "";
this.form.funValMin = "";
this.form.funObj = "";
if (val === "ENUM") {
this.form.funObj = '{"0":""}';
}
this.$forceUpdate()
},
dataFormatTypeChange(val) {
this.form.dataFormat.type = val;
this.form.dataFormat.list = '';
if (val === "ENUM") {
this.form.dataFormat.list = '{"0":""}';
}
this.$forceUpdate()
},
// 添加一个监听输入参数弹窗关闭的方法 // 添加一个监听输入参数弹窗关闭的方法
handleInputDialogClose() { handleInputDialogClose() {
this.$nextTick(() => { this.$nextTick(() => {
@ -673,75 +709,30 @@ handleInputDelete(row, index) {
} }
}); });
} }
}, }
}; };
</script> </script>
<style lang="scss"> <style lang="scss" scoped>
.attribute-form-view { .event-form-model {
.item-title-wrap { .item-title-wrap {
font-size: 15px; font-size: 15px;
font-weight: 600; font-weight: 600;
height: 30px; height: 30px;
} }
.custom-wrap { .enum-box {
border: 1px solid #d8d7d7;
padding-top: 20px;
margin-top: 10px;
background: #f0f0f0;
padding-right: 10px;
.el-form-item {
border-bottom: 1px dashed #bdbdbd;
padding-bottom: 12px;
margin-bottom: 10px;
margin-left: 10px;
}
.el-form-item--medium .el-form-item__label {
width: 90px !important;
}
.el-form-item--medium .el-form-item__content {
margin-left: 90px !important;
}
.enumTypeDiv {
display: flex;
justify-content: flex-end;
max-height: 200px;
overflow: auto;
.enum-item {
width: 90%;
display: flex;
justify-content: space-around;
align-items: center;
}
}
.max-min-row {
width: 90%;
padding: 0;
margin-left: 5% !important;
margin-right: 0 !important;
.el-form-item {
border: 0;
margin-left: 0;
}
.el-form-item--medium .el-form-item__content {
margin-left: 0px !important;
}
}
}
.enum-box{
border: 1px solid #d8d7d7; border: 1px solid #d8d7d7;
padding: 10px; padding: 10px;
margin-bottom: 10px; margin-bottom: 10px;
.enumTypeDiv{ .enumTypeDiv {
margin-top: 10px; margin-top: 10px;
} }
.enum-header {
margin-bottom: 10px;
}
} }
.el-select { .el-select {
width: 100%; width: 100%;
} }
.el-input-number {
width: 100%;
}
.enumTypeDiv { .enumTypeDiv {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
@ -768,22 +759,13 @@ handleInputDelete(row, index) {
} }
} }
} }
.enum-box {
border: 1px solid #d8d7d7;
padding: 10px;
margin-bottom: 10px;
.enum-header {
margin-bottom: 10px;
}
}
.is-error input { .is-error input {
border-color: #F56C6C; border-color: #f56c6c;
} }
.el-form-item__error { .el-form-item__error {
color: #F56C6C; color: #f56c6c;
font-size: 12px; font-size: 12px;
line-height: 1; line-height: 1;
padding-top: 4px; padding-top: 4px;
@ -792,5 +774,3 @@ handleInputDelete(row, index) {
left: 0; left: 0;
} }
</style> </style>

239
src/views/profile/attribute/eventView.vue
View File

@ -33,9 +33,23 @@
align="center" align="center"
class-name="small-padding fixed-width" class-name="small-padding fixed-width"
label="操作" label="操作"
width="180px" width="200px"
> >
<template slot-scope="scope"> <template slot-scope="scope">
<el-button
:disabled="scope.$index === 0"
icon="el-icon-arrow-up"
size="mini"
type="text"
@click="handleMoveUp(scope.$index)"
>上移</el-button>
<el-button
:disabled="scope.$index === eventList.length - 1"
icon="el-icon-arrow-down"
size="mini"
type="text"
@click="handleMoveDown(scope.$index)"
>下移</el-button>
<el-button <el-button
icon="el-icon-edit" icon="el-icon-edit"
size="mini" size="mini"
@ -55,21 +69,13 @@
</el-table-column> </el-table-column>
</el-table> </el-table>
<pagination
v-show="total > 0"
:limit.sync="queryParams.pageSize"
:page.sync="queryParams.pageNum"
:total="total"
@pagination="getList"
/>
<event-form-model <event-form-model
ref="eventForm" ref="eventForm"
:eventList="eventList" :eventList="eventList"
:paramIdx="eventFormObj.paramIdx" :paramIdx="eventFormObj.paramIdx"
:row="eventFormObj.eventForm" :row="eventFormObj.eventForm"
:tempType="eventFormObj.modelType" :tempType="eventFormObj.modelType"
:title="eventFormObj.modelType == 'add' ? '新增' : '编辑'" :title="eventFormObj.modelType === 'add' ? '新增' : '编辑'"
:visible.sync="eventOpen" :visible.sync="eventOpen"
@ok="handleFormOk" @ok="handleFormOk"
></event-form-model> ></event-form-model>
@ -77,7 +83,6 @@
</template> </template>
<script> <script>
import JsonEditor from "./jsonEditor.vue";
import ParamsJsonWrap from "./paramsJson"; import ParamsJsonWrap from "./paramsJson";
import eventFormModel from "@/views/profile/attribute/eventFormModel"; import eventFormModel from "@/views/profile/attribute/eventFormModel";
@ -90,7 +95,6 @@ const eventLevel = {
export default { export default {
name: "EventView", name: "EventView",
components: { components: {
JsonEditor,
ParamsJsonWrap, ParamsJsonWrap,
eventFormModel eventFormModel
}, },
@ -110,42 +114,14 @@ export default {
eventOpen: false, eventOpen: false,
// 遮罩层 // 遮罩层
loading: true, loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 总条数
total: 0,
// 功能定义表格数据 // 功能定义表格数据
eventList: [], eventList: [],
// 弹出层标题 // 弹出层标题
title: "", title: "",
// 是否显示弹出层 // 是否显示弹出层
attributeopen: false, attributeopen: false,
// 查询参数
queryParams: {},
// 表单参数 // 表单参数
form: {}, form: {},
// 表单校验
rules: {
funName: [{ required: true, message: "名称不能为空", trigger: "blur" }],
funKey: [
{ required: true, message: "标识符不能为空", trigger: "blur" }
],
funDataType: [
{ required: true, message: "数据类型不能为空", trigger: "blur" }
],
funRwType: [
{ required: true, message: "传输类型不能为空", trigger: "blur" }
],
funValidType: [
{ required: true, message: "校验方式不能为空", trigger: "blur" }
]
},
baseModelId: "",
tempType: "",
eventFormObj: { eventFormObj: {
id: "", id: "",
name: "", name: "",
@ -164,26 +140,6 @@ export default {
this.getList(); this.getList();
}, },
methods: { methods: {
//数据类型值变化出发方法
funDataTypeChange(val) {
this.form.funValAcc = null;
this.form.funValidType = "";
},
addJsonObj() {
this.$refs["jsonEditors"].addHandel();
},
jsonEvent(data) {
this.form.funObj = data;
},
// 校验方式发生变化的方法
funValidTypeChange(val) {
this.form.funValMax = "";
this.form.funValMin = "";
this.form.funObj = "";
if (val === "ENUM") {
this.form.funObj = '{"0":""}';
}
},
/** 查询功能定义列表 */ /** 查询功能定义列表 */
getList() { getList() {
this.loading = true; this.loading = true;
@ -197,41 +153,6 @@ export default {
}); });
}, 50); }, 50);
}, },
setList(list) {
this.loading = true;
this.eventList = [];
setTimeout(() => {
this.eventList = list;
this.$forceUpdate();
this.loading = false;
}, 50);
},
// 取消按钮
cancel() {
this.attributeopen = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
sourceId: this.sourceId,
mainId: undefined,
funName: undefined,
funKey: undefined,
funDataType: undefined,
funValAcc: undefined,
funRwType: undefined,
funValidType: undefined,
funValMin: undefined,
funValMax: undefined,
funObj: {},
unitName: ""
};
this.resetForm("form");
},
handleParams() {
this.$emit("handleClick", { type: "param", idx: 0 });
},
/** 新增按钮操作 */ /** 新增按钮操作 */
handleAdd() { handleAdd() {
this.eventFormObj = { this.eventFormObj = {
@ -252,6 +173,55 @@ export default {
}; };
this.eventOpen = true; this.eventOpen = true;
}, },
/**
* 上移功能
* @param {Number} index 当前功能索引
*/
handleMoveUp(index) {
if (index === 0) return; // 已经是第一个，不能再上移
// 交换当前项与上一项的位置
const temp = this.eventList[index];
this.$set(this.eventList, index, this.eventList[index - 1]);
this.$set(this.eventList, index - 1, temp);
// 保存到 store
this.$store.dispatch("UpdateEventList", this.eventList).then(() => {
this.$message({
type: 'success',
message: '上移成功!'
});
}).catch(err => {
this.$message.error("操作失败：" + err);
// 恢复原状
this.getList();
});
},
/**
* 下移功能
* @param {Number} index 当前功能索引
*/
handleMoveDown(index) {
if (index === this.eventList.length - 1) return; // 已经是最后一个，不能再下移
// 交换当前项与下一项的位置
const temp = this.eventList[index];
this.$set(this.eventList, index, this.eventList[index + 1]);
this.$set(this.eventList, index + 1, temp);
// 保存到 store
this.$store.dispatch("UpdateEventList", this.eventList).then(() => {
this.$message({
type: 'success',
message: '下移成功!'
});
}).catch(err => {
this.$message.error("操作失败：" + err);
// 恢复原状
this.getList();
});
},
/** 修改按钮操作 */ /** 修改按钮操作 */
handleUpdate(row, idx) { handleUpdate(row, idx) {
@ -301,88 +271,11 @@ export default {
} }
}; };
</script> </script>
<style lang="scss"> <style lang="scss" scoped>
.product-customparams-wrap { .product-customparams-wrap {
.nl-dialog .el-dialog:not(.is-fullscreen) { .nl-dialog .el-dialog:not(.is-fullscreen) {
margin-top: 3vh !important; margin-top: 3vh !important;
} }
.eldialog-wrap {
.el-dialog__header {
border-bottom: 1px solid #bdbdbd;
}
.el-dialog__body {
padding: 0px;
}
.form-button-div {
margin-top: 20px;
height: 60px;
border-top: 1px solid #bdbdbd;
text-align: right;
width: 100%;
padding-top: 15px;
.el-button + .el-button {
margin-right: 10px;
}
.el-button {
padding-top: 8px;
}
}
.el-select {
width: 100%;
}
.el-input-number {
width: 100%;
}
.item-title-wrap {
font-size: 15px;
font-weight: 600;
height: 30px;
}
.custom-wrap {
border: 1px solid #d8d7d7;
padding-top: 20px;
background: #f0f0f0;
padding-right: 10px;
.el-form-item {
border-bottom: 1px dashed #bdbdbd;
padding-bottom: 12px;
margin-bottom: 10px;
margin-left: 10px;
}
.el-form-item--medium .el-form-item__label {
width: 90px !important;
}
.el-form-item--medium .el-form-item__content {
margin-left: 90px !important;
}
.enumTypeDiv {
display: flex;
justify-content: flex-end;
max-height: 200px;
overflow: auto;
.enum-item {
width: 90%;
display: flex;
justify-content: space-around;
align-items: center;
}
}
.max-min-row {
width: 90%;
padding: 0;
margin-left: 5% !important;
margin-right: 0 !important;
.el-form-item {
border: 0;
margin-left: 0;
}
.el-form-item--medium .el-form-item__content {
margin-left: 0px !important;
}
}
}
}
.params-eldialog { .params-eldialog {
.el-dialog__header { .el-dialog__header {
} }

543
src/views/profile/attribute/functionFormModel.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="attribute-form-view"> <div class="function-form-model">
<el-dialog <el-dialog
:close-on-click-modal="false" :close-on-click-modal="false"
:modal="false" :modal="false"
@ -8,7 +8,8 @@
class="params-eldialog" class="params-eldialog"
top="5vh" top="5vh"
width="800px" width="800px"
@close="$emit('update:visible', false)"> @close="$emit('update:visible', false)"
>
<el-form <el-form
ref="form" ref="form"
:model="form" :model="form"
@ -37,12 +38,12 @@
<el-table :data="form.inputs" height="300px"> <el-table :data="form.inputs" height="300px">
<el-table-column align="left" label="标识" prop="id" /> <el-table-column align="left" label="标识" prop="id" />
<el-table-column align="left" label="参数名称" prop="name" /> <el-table-column align="left" label="参数名称" prop="name" />
<el-table-column align="center" label="是否必选" prop="required" > <el-table-column align="center" label="是否必选" prop="required">
<template slot-scope="scope"> <template slot-scope="scope">
<span>{{ scope.row.expands.required ? '是' : '否'}}</span> <span>{{ scope.row.expands.required ? "是" : "否" }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column align="left" label="数据类型" prop="type" > <el-table-column align="left" label="数据类型" prop="type">
<template slot-scope="scope"> <template slot-scope="scope">
<span>{{ dataTypeOption[scope.row.valueType.type] }}</span> <span>{{ dataTypeOption[scope.row.valueType.type] }}</span>
</template> </template>
@ -51,9 +52,23 @@
align="center" align="center"
class-name="small-padding fixed-width" class-name="small-padding fixed-width"
label="操作" label="操作"
width="100px" width="200px"
> >
<template slot-scope="scope"> <template slot-scope="scope">
<el-button
:disabled="scope.$index === 0"
icon="el-icon-arrow-up"
size="mini"
type="text"
@click="handleInputUp(scope.$index)"
>上移</el-button>
<el-button
:disabled="scope.$index === form.inputs.length - 1"
icon="el-icon-arrow-down"
size="mini"
type="text"
@click="handleInputDown(scope.$index)"
>下移</el-button>
<el-button <el-button
icon="el-icon-edit" icon="el-icon-edit"
size="mini" size="mini"
@ -73,14 +88,16 @@
</el-table> </el-table>
<el-button <el-button
icon="el-icon-plus" icon="el-icon-plus"
plain
style="width: 100%;margin-top: 10px" style="width: 100%;margin-top: 10px"
type="info" type="info"
@click="addInputParam" @click="addInputParam"
>新增输入参数</el-button> >新增输入参数</el-button
>
</el-form-item> </el-form-item>
<el-form-item label="是否异步:" prop="async"> <el-form-item label="是否异步:" prop="async">
<el-switch v-model="form.async"/> <el-switch v-model="form.async" />
</el-form-item> </el-form-item>
</el-form> </el-form>
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
@ -109,11 +126,19 @@
<el-input v-model="inputFormObj.form.id" placeholder="请输入标识" /> <el-input v-model="inputFormObj.form.id" placeholder="请输入标识" />
</el-form-item> </el-form-item>
<el-form-item label="参数名称:" prop="name"> <el-form-item label="参数名称:" prop="name">
<el-input v-model="inputFormObj.form.name" placeholder="请输入参数名称" /> <el-input
v-model="inputFormObj.form.name"
placeholder="请输入参数名称"
/>
</el-form-item> </el-form-item>
<el-form-item label="数据类型:" prop="type"> <el-form-item label="数据类型:" prop="type">
<el-select v-model="inputFormObj.form.valueType.type" placeholder="请选择数据类型" style="width: 100%" @change="inputDataTypeChange"> <el-select
v-model="inputFormObj.form.valueType.type"
placeholder="请选择数据类型"
style="width: 100%"
@change="inputDataTypeChange"
>
<el-option <el-option
v-for="(dice, value) in dataTypeOption" v-for="(dice, value) in dataTypeOption"
:key="value" :key="value"
@ -122,13 +147,27 @@
/> />
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item v-if="inputFormObj.form.valueType.type === 'enum'" label="枚举值:"> <el-form-item
v-if="inputFormObj.form.valueType.type === 'enum'"
label="枚举值:"
>
<div class="enum-box"> <div class="enum-box">
<div class="enum-header"> <div class="enum-header">
<el-button size="mini" type="primary" @click="addEnumItem">添加枚举项</el-button> <el-button size="mini" type="primary" @click="addEnumItem"
>添加枚举项</el-button
>
</div> </div>
<el-table :data="inputFormObj.form.valueType.elements" border style="width: 100%"> <el-table
<el-table-column align="center" label="序号" type="index" width="60"></el-table-column> :data="inputFormObj.form.valueType.elements"
border
style="width: 100%"
>
<el-table-column
align="center"
label="序号"
type="index"
width="60"
></el-table-column>
<el-table-column label="值" prop="value" width="180"> <el-table-column label="值" prop="value" width="180">
<template slot-scope="scope"> <template slot-scope="scope">
<el-input <el-input
@ -136,7 +175,12 @@
:class="{ 'is-error': scope.row.value }" :class="{ 'is-error': scope.row.value }"
placeholder="请输入值" placeholder="请输入值"
></el-input> ></el-input>
<div v-if="scope.row.value===''" class="el-form-item__error">值不能为空</div> <div
v-if="scope.row.value === ''"
class="el-form-item__error"
>
值不能为空
</div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="描述" prop="text"> <el-table-column label="描述" prop="text">
@ -146,16 +190,17 @@
:class="{ 'is-error': scope.row.text }" :class="{ 'is-error': scope.row.text }"
placeholder="请输入描述" placeholder="请输入描述"
></el-input> ></el-input>
<div v-if="scope.row.text===''" class="el-form-item__error">描述不能为空</div> <div v-if="scope.row.text === ''" class="el-form-item__error">
描述不能为空
</div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column align="center" label="操作" width="80"> <el-table-column align="center" label="操作" width="80">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button <el-button
circle
icon="el-icon-delete" icon="el-icon-delete"
size="mini" style="color: red"
type="danger" type="text"
@click="removeEnumItem(scope.$index)" @click="removeEnumItem(scope.$index)"
></el-button> ></el-button>
</template> </template>
@ -175,64 +220,44 @@
</div> </div>
</template> </template>
<script> <script>
import { mapGetters, mapState } from "vuex"; import { dataTypeOption } from "@/basedata/physicalModel";
import JsonEditor from "./jsonEditor";
import {dataTypeOption} from "@/basedata/physicalModel"
// const dataTypeOption = {
// int: 'int(整数型)',
// long: 'long(长整数型)',
// float: 'float(单精度浮点型)',
// double: 'double(双精度浮点数)',
// string: 'text(字符串)',
// boolean: 'boolean(布尔型)',
// date: 'date(时间型)',
// enum: 'enum(枚举)',
// array: 'array(数组)',
// object: 'object(结构体)',
// file: 'file(文件)',
// password: 'password(密码)',
// geoPoint: 'geoPoint(地理位置)',
// };
const defaultenumForm = { const defaultenumForm = {
value: '', value: "",
text: '' text: ""
} };
const defaultInputForm = { const defaultInputForm = {
id: '', id: "",
name: '', name: "",
expands: { expands: {
required:false required: false
}, },
valueType: { valueType: {
expands: {}, expands: {},
type: 'int', type: "int",
elements: [] elements: []
} }
}; };
export default { export default {
name: "FunctionFormModel", name: "FunctionFormModel",
components: { JsonEditor },
props: { props: {
visible: { visible: {
type: Boolean, type: Boolean,
default: false, default: false
}, },
title: { title: {
type: String, type: String,
default: '新增', default: "新增"
}, },
row: { row: {
type: Object, type: Object,
default: () => {}, default: () => {}
}, },
tempType: { tempType: {
type: String, type: String,
default: "add", default: "add"
}, },
paramIdx: { paramIdx: {
type: Number, type: Number,
@ -243,20 +268,17 @@ export default {
default: [] default: []
} }
}, },
computed: {
...mapGetters(["groupList"]),
},
data() { data() {
return { return {
dataTypeOption, dataTypeOption,
inputParamOpen: false, inputParamOpen: false,
form: { form: {
id: '', id: "",
name: '', name: "",
expands: {}, expands: {},
async: false, async: false,
inputs: [], inputs: [],
output: {}, output: {}
}, },
inputFormObj: { inputFormObj: {
isEdit: false, isEdit: false,
@ -266,39 +288,40 @@ export default {
inputFormRules: { inputFormRules: {
id: [ id: [
{ required: true, message: "标识不能为空", trigger: "blur" }, { required: true, message: "标识不能为空", trigger: "blur" },
{ pattern: /^[a-zA-Z0-9_\-]+$/,message: '标识只能由数字、字母、下划线、中划线组成',trigger: "blur"}, {
pattern: /^[a-zA-Z0-9_\-]+$/,
message: "标识只能由数字、字母、下划线、中划线组成",
trigger: "blur"
},
{ validator: this.validateInputId, trigger: "blur" } { validator: this.validateInputId, trigger: "blur" }
], ],
name: [ name: [{ required: true, message: "参数名称不能为空", trigger: "blur" }]
{ required: true, message: "参数名称不能为空", trigger: "blur" }
],
}, },
// 表单校验 // 表单校验
rules: { rules: {
name: [ name: [{ required: true, message: "名称不能为空", trigger: "blur" }],
{ required: true, message: "名称不能为空", trigger: "blur" },
],
cmdKey: [{ required: true, message: "分组不能为空", trigger: "blur" }], cmdKey: [{ required: true, message: "分组不能为空", trigger: "blur" }],
id: [ id: [
{ required: true, message: "标识不能为空", trigger: "blur" }, { required: true, message: "标识不能为空", trigger: "blur" },
{ pattern: /^[a-zA-Z0-9_\-]+$/,message: '标识只能由数字、字母、下划线、中划线组成',trigger: "blur"}, {
pattern: /^[a-zA-Z0-9_\-]+$/,
message: "标识只能由数字、字母、下划线、中划线组成",
trigger: "blur"
},
{ validator: this.validateFunctionId, trigger: "blur" } { validator: this.validateFunctionId, trigger: "blur" }
], ],
type: [ type: [{ required: true, message: "数据类型不能为空", trigger: "blur" }]
{ required: true, message: "数据类型不能为空", trigger: "blur" }, }
],
},
}; };
}, },
created() { created() {
console.log("this.paramIdx", this.paramIdx, this.tempType);
if (this.tempType === "update" && this.paramIdx >= 0) { if (this.tempType === "update" && this.paramIdx >= 0) {
this.form = JSON.parse(JSON.stringify(this.row)); this.form = JSON.parse(JSON.stringify(this.row));
} else { } else {
// 新增时初始化表单 // 新增时初始化表单
this.form = { this.form = {
id: '', id: "",
name: '', name: "",
expands: {}, expands: {},
async: true, async: true,
inputs: [], inputs: [],
@ -316,8 +339,8 @@ export default {
} else { } else {
// 新增模式，重置表单数据 // 新增模式，重置表单数据
this.form = { this.form = {
id: '', id: "",
name: '', name: "",
expands: {}, expands: {},
async: true, async: true,
inputs: [], inputs: [],
@ -346,7 +369,7 @@ export default {
}, },
methods: { methods: {
// 自定义标识符验证规则 // 自定义标识符验证规则
validateFunctionId(rule, value, callback){ validateFunctionId(rule, value, callback) {
if (this.tempType === "update" && value === this.row.id) { if (this.tempType === "update" && value === this.row.id) {
// 如果是编辑模式且ID没有变化，直接通过验证 // 如果是编辑模式且ID没有变化，直接通过验证
callback(); callback();
@ -354,16 +377,20 @@ export default {
} }
// 检查功能标识符是否重复 // 检查功能标识符是否重复
const isDuplicate = this.functionList && this.functionList.some(item => item.id === value); const isDuplicate =
this.functionList && this.functionList.some(item => item.id === value);
if (isDuplicate) { if (isDuplicate) {
callback(new Error('标识符已存在，请更换')); callback(new Error("标识符已存在，请更换"));
} else { } else {
callback(); callback();
} }
}, },
// 自定义输入参数标识符验证规则 // 自定义输入参数标识符验证规则
validateInputId(rule, value, callback){ validateInputId(rule, value, callback) {
if (this.inputFormObj.isEdit && value === this.form.inputs[this.inputFormObj.index].id) { if (
this.inputFormObj.isEdit &&
value === this.form.inputs[this.inputFormObj.index].id
) {
// 如果是编辑模式且ID没有变化，直接通过验证 // 如果是编辑模式且ID没有变化，直接通过验证
callback(); callback();
return; return;
@ -372,55 +399,58 @@ export default {
// 检查输入参数标识符是否重复 // 检查输入参数标识符是否重复
const isDuplicate = this.form.inputs.some(item => item.id === value); const isDuplicate = this.form.inputs.some(item => item.id === value);
if (isDuplicate) { if (isDuplicate) {
callback(new Error('输入参数标识符已存在，请更换')); callback(new Error("输入参数标识符已存在，请更换"));
} else { } else {
callback(); callback();
} }
}, },
inputDataTypeChange(val) { inputDataTypeChange(val) {
// 根据选择的数据类型设置valueType的type属性 // 根据选择的数据类型设置valueType的type属性
if (val === 'int') { if (val === "int") {
this.inputFormObj.form.valueType.type = 'int'; this.inputFormObj.form.valueType.type = "int";
this.inputFormObj.form.valueType.elements = []; this.inputFormObj.form.valueType.elements = [];
} else if (val === 'long') { } else if (val === "long") {
this.inputFormObj.form.valueType.type = 'long'; this.inputFormObj.form.valueType.type = "long";
this.inputFormObj.form.valueType.elements = []; this.inputFormObj.form.valueType.elements = [];
} else if (val === 'float') { } else if (val === "float") {
this.inputFormObj.form.valueType.type = 'float'; this.inputFormObj.form.valueType.type = "float";
this.inputFormObj.form.valueType.elements = []; this.inputFormObj.form.valueType.elements = [];
} else if (val === 'double') { } else if (val === "double") {
this.inputFormObj.form.valueType.type = 'double'; this.inputFormObj.form.valueType.type = "double";
this.inputFormObj.form.valueType.elements = []; this.inputFormObj.form.valueType.elements = [];
} else if (val === 'string') { } else if (val === "string") {
this.inputFormObj.form.valueType.type = 'string'; this.inputFormObj.form.valueType.type = "string";
this.inputFormObj.form.valueType.elements = []; this.inputFormObj.form.valueType.elements = [];
} else if (val === 'boolean') { } else if (val === "boolean") {
this.inputFormObj.form.valueType.type = 'boolean'; this.inputFormObj.form.valueType.type = "boolean";
this.inputFormObj.form.valueType.elements = []; this.inputFormObj.form.valueType.elements = [];
} else if (val === 'date') { } else if (val === "date") {
this.inputFormObj.form.valueType.type = 'date'; this.inputFormObj.form.valueType.type = "date";
this.inputFormObj.form.valueType.elements = []; this.inputFormObj.form.valueType.elements = [];
} else if (val === 'enum') { } else if (val === "enum") {
this.inputFormObj.form.valueType.type = 'enum'; this.inputFormObj.form.valueType.type = "enum";
if (!this.inputFormObj.form.valueType.elements || this.inputFormObj.form.valueType.elements.length === 0) { if (
!this.inputFormObj.form.valueType.elements ||
this.inputFormObj.form.valueType.elements.length === 0
) {
this.inputFormObj.form.valueType.elements = []; this.inputFormObj.form.valueType.elements = [];
// 默认添加一个空的枚举项 // 默认添加一个空的枚举项
this.addEnumItem(); this.addEnumItem();
} }
} else if (val === 'array') { } else if (val === "array") {
this.inputFormObj.form.valueType.type = 'array'; this.inputFormObj.form.valueType.type = "array";
this.inputFormObj.form.valueType.elements = []; this.inputFormObj.form.valueType.elements = [];
} else if (val === 'object') { } else if (val === "object") {
this.inputFormObj.form.valueType.type = 'object'; this.inputFormObj.form.valueType.type = "object";
this.inputFormObj.form.valueType.elements = []; this.inputFormObj.form.valueType.elements = [];
} else if (val === 'file') { } else if (val === "file") {
this.inputFormObj.form.valueType.type = 'file'; this.inputFormObj.form.valueType.type = "file";
this.inputFormObj.form.valueType.elements = []; this.inputFormObj.form.valueType.elements = [];
} else if (val === 'password') { } else if (val === "password") {
this.inputFormObj.form.valueType.type = 'password'; this.inputFormObj.form.valueType.type = "password";
this.inputFormObj.form.valueType.elements = []; this.inputFormObj.form.valueType.elements = [];
} else if (val === 'geoPoint') { } else if (val === "geoPoint") {
this.inputFormObj.form.valueType.type = 'geoPoint'; this.inputFormObj.form.valueType.type = "geoPoint";
this.inputFormObj.form.valueType.elements = []; this.inputFormObj.form.valueType.elements = [];
} }
}, },
@ -433,10 +463,30 @@ export default {
// 添加一个新的枚举项 // 添加一个新的枚举项
const newEnumItem = JSON.parse(JSON.stringify(defaultenumForm)); const newEnumItem = JSON.parse(JSON.stringify(defaultenumForm));
newEnumItem.value = ''; newEnumItem.value = "";
newEnumItem.text = ''; newEnumItem.text = "";
this.inputFormObj.form.valueType.elements.push(newEnumItem); this.inputFormObj.form.valueType.elements.push(newEnumItem);
}, },
removeEnumItem(index) {
this.$confirm("是否确认删除该枚举参数?", "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
})
.then(() => {
this.inputFormObj.form.valueType.elements.splice(index, 1);
this.$message({
type: "success",
message: "删除成功!"
});
})
.catch(() => {
this.$message({
type: "info",
message: "已取消删除"
});
});
},
// 修改提交方法，增加枚举项验证 // 修改提交方法，增加枚举项验证
submitInputForm() { submitInputForm() {
@ -444,18 +494,24 @@ export default {
this.$refs.inputForm.validate(valid => { this.$refs.inputForm.validate(valid => {
if (valid) { if (valid) {
// 如果是枚举类型，确保至少有一个枚举项 // 如果是枚举类型，确保至少有一个枚举项
if (this.inputFormObj.form.valueType.type === 'enum' && if (
this.inputFormObj.form.valueType.type === "enum" &&
(!this.inputFormObj.form.valueType.elements || (!this.inputFormObj.form.valueType.elements ||
this.inputFormObj.form.valueType.elements.length === 0)) { this.inputFormObj.form.valueType.elements.length === 0)
this.$message.warning('枚举类型至少需要一个枚举项'); ) {
this.$message.warning("枚举类型至少需要一个枚举项");
return; return;
} }
// 验证枚举项的值和描述不能为空 // 验证枚举项的值和描述不能为空
if (this.inputFormObj.form.valueType.type === 'enum') { if (this.inputFormObj.form.valueType.type === "enum") {
let hasError = false; let hasError = false;
const enumValues = new Set(); const enumValues = new Set();
for (let i = 0; i < this.inputFormObj.form.valueType.elements.length; i++) { for (
let i = 0;
i < this.inputFormObj.form.valueType.elements.length;
i++
) {
const item = this.inputFormObj.form.valueType.elements[i]; const item = this.inputFormObj.form.valueType.elements[i];
let value = !item.value; let value = !item.value;
let text = !item.text; let text = !item.text;
@ -470,7 +526,7 @@ export default {
enumValues.add(item.value); enumValues.add(item.value);
} }
if (hasError) { if (hasError) {
this.$message.warning('请完善枚举项的值和描述'); this.$message.warning("请完善枚举项的值和描述");
return; return;
} }
} }
@ -478,10 +534,16 @@ export default {
// 如果是编辑模式 // 如果是编辑模式
if (this.inputFormObj.isEdit) { if (this.inputFormObj.isEdit) {
// 更新现有输入参数 // 更新现有输入参数
this.$set(this.form.inputs, this.inputFormObj.index, this.inputFormObj.form); this.$set(
this.form.inputs,
this.inputFormObj.index,
this.inputFormObj.form
);
} else { } else {
// 添加新的输入参数 // 添加新的输入参数
this.form.inputs.push(JSON.parse(JSON.stringify(this.inputFormObj.form))); this.form.inputs.push(
JSON.parse(JSON.stringify(this.inputFormObj.form))
);
} }
// 关闭弹窗 // 关闭弹窗
@ -493,11 +555,13 @@ export default {
}); });
// 提示成功 // 提示成功
this.$message.success(this.inputFormObj.isEdit ? '修改成功' : '添加成功'); this.$message.success(
this.inputFormObj.isEdit ? "修改成功" : "添加成功"
);
} }
}); });
}, },
addInputParam(){ addInputParam() {
this.inputFormObj = { this.inputFormObj = {
isEdit: false, isEdit: false,
index: -1, index: -1,
@ -505,7 +569,48 @@ export default {
}; };
this.inputParamOpen = true; this.inputParamOpen = true;
}, },
/** /**
* 上移功能
* @param {Number} index 当前功能索引
*/
handleInputUp(index) {
if (index === 0) return; // 已经是第一个，不能再上移
try {
// 交换当前项与上一项的位置
const temp = this.form.inputs[index];
this.$set(this.form.inputs, index, this.form.inputs[index - 1]);
this.$set(this.form.inputs, index - 1, temp);
this.$message({
type: 'success',
message: '上移成功!'
});
} catch (error) {
this.$message.error("操作失败：" + error);
}
},
/**
* 下移功能
* @param {Number} index 当前功能索引
*/
handleInputDown(index) {
if (index === this.form.inputs.length - 1) return; // 已经是最后一个，不能再下移
try {
// 交换当前项与下一项的位置
const temp = this.form.inputs[index];
this.$set(this.form.inputs, index, this.form.inputs[index + 1]);
this.$set(this.form.inputs, index + 1, temp);
this.$message({
type: 'success',
message: '下移成功!'
});
} catch (error) {
this.$message.error("操作失败：" + error);
}
},
/**
* 修改输入参数 * 修改输入参数
* @param {Object} row 行数据 * @param {Object} row 行数据
* @param {Number} index 行索引 * @param {Number} index 行索引
@ -517,118 +622,73 @@ export default {
form: JSON.parse(JSON.stringify(row)) form: JSON.parse(JSON.stringify(row))
}; };
this.inputParamOpen = true; this.inputParamOpen = true;
}, },
/** /**
* 删除输入参数 * 删除输入参数
* @param {Object} row 行数据 * @param {Object} row 行数据
* @param {Number} index 行索引 * @param {Number} index 行索引
*/ */
handleInputDelete(row, index) { handleInputDelete(row, index) {
this.$confirm('是否确认删除该输入参数?', '警告', { this.$confirm("是否确认删除该输入参数?", "警告", {
confirmButtonText: '确定', confirmButtonText: "确定",
cancelButtonText: '取消', cancelButtonText: "取消",
type: 'warning' type: "warning"
}).then(() => { })
.then(() => {
this.form.inputs.splice(index, 1); this.form.inputs.splice(index, 1);
this.$message({ this.$message({
type: 'success', type: "success",
message: '删除成功!' message: "删除成功!"
}); });
}).catch(() => { })
.catch(() => {
this.$message({ this.$message({
type: 'info', type: "info",
message: '已取消删除' message: "已取消删除"
}); });
}); });
}, inputChange() { },
inputChange() {
this.$forceUpdate(); this.$forceUpdate();
}, },
cmdChange(val) {
let newArr = this.groupList.filter((v) => {
if (v["cmdKey"] === val) {
return v["cmdType"];
}
});
this.form.funRwType = newArr[0] || this.form.funRwType;
},
getParamIten(idx) {
this.$store.dispatch("GetAttributeItem", idx).then((res) => {
console.log("GetAttributeItem",res,idx);
this.form = {show: true, sort: 100,dataFormat: {
type: null,
list: {}
}, ...JSON.parse(JSON.stringify(res))};
});
},
/** 提交验证 */ /** 提交验证 */
submitForm: function () { submitForm: function() {
this.$refs["form"].validate((valid) => { this.$refs["form"].validate(valid => {
if (valid) { if (valid) {
// 额外校验输入参数 // 额外校验输入参数
if (!this.form.inputs || this.form.inputs.length === 0) { if (!this.form.inputs || this.form.inputs.length === 0) {
this.$message.warning('请至少添加一个输入参数'); this.$message.warning("请至少添加一个输入参数");
return; return;
} }
// 新增和修改操作 // 新增和修改操作
if (this.tempType === "add") { if (this.tempType === "add") {
this.$store.dispatch("AddFunction", this.form).then(() => { this.$store
.dispatch("AddFunction", this.form)
.then(() => {
this.$message.success("添加成功"); this.$message.success("添加成功");
this.$emit("ok"); this.$emit("ok");
}).catch(err => { })
.catch(err => {
this.$message.error("添加失败：" + err); this.$message.error("添加失败：" + err);
}); });
} else if (this.tempType === "update") { } else if (this.tempType === "update") {
this.$store.dispatch("EditFunction", { this.$store
.dispatch("EditFunction", {
item: this.form, item: this.form,
idx: this.paramIdx, idx: this.paramIdx
}).then(() => { })
.then(() => {
this.$message.success("修改成功"); this.$message.success("修改成功");
this.$emit("ok"); this.$emit("ok");
}).catch(err => { })
.catch(err => {
this.$message.error("修改失败：" + err); this.$message.error("修改失败：" + err);
}); });
} }
} }
}); });
}, },
// 回调 ok
//数据类型值变化出发方法
funDataTypeChange(val) {
this.form.funValAcc = null;
this.form.funValidType = "";
},
addJsonObj() {
this.$refs["jsonEditors"].addHandel();
},
jsonEvent(data) {
this.form.funObj = data;
},
addEnumJsonObj() {
this.$refs["enumJsonEditors"].addHandel();
},
enumJsonEvent(data) {
this.form.dataFormat.list = data;
},
// 校验方式发生变化的方法
funValidTypeChange(val) {
this.form.funValidType = val;
this.form.funValMax = "";
this.form.funValMin = "";
this.form.funObj = "";
if (val === "ENUM") {
this.form.funObj = '{"0":""}';
}
this.$forceUpdate()
},
dataFormatTypeChange(val) {
this.form.dataFormat.type = val;
this.form.dataFormat.list = '';
if (val === "ENUM") {
this.form.dataFormat.list = '{"0":""}';
}
this.$forceUpdate()
},
// 添加一个监听输入参数弹窗关闭的方法 // 添加一个监听输入参数弹窗关闭的方法
handleInputDialogClose() { handleInputDialogClose() {
this.$nextTick(() => { this.$nextTick(() => {
@ -637,68 +697,21 @@ handleInputDelete(row, index) {
} }
}); });
} }
}, }
}; };
</script> </script>
<style lang="scss"> <style lang="scss">
.attribute-form-view { .function-form-model {
.item-title-wrap { .enum-box {
font-size: 15px;
font-weight: 600;
height: 30px;
}
.custom-wrap {
border: 1px solid #d8d7d7;
padding-top: 20px;
margin-top: 10px;
background: #f0f0f0;
padding-right: 10px;
.el-form-item {
border-bottom: 1px dashed #bdbdbd;
padding-bottom: 12px;
margin-bottom: 10px;
margin-left: 10px;
}
.el-form-item--medium .el-form-item__label {
width: 90px !important;
}
.el-form-item--medium .el-form-item__content {
margin-left: 90px !important;
}
.enumTypeDiv {
display: flex;
justify-content: flex-end;
max-height: 200px;
overflow: auto;
.enum-item {
width: 90%;
display: flex;
justify-content: space-around;
align-items: center;
}
}
.max-min-row {
width: 90%;
padding: 0;
margin-left: 5% !important;
margin-right: 0 !important;
.el-form-item {
border: 0;
margin-left: 0;
}
.el-form-item--medium .el-form-item__content {
margin-left: 0px !important;
}
}
}
.enum-box{
border: 1px solid #d8d7d7; border: 1px solid #d8d7d7;
padding: 10px; padding: 10px;
margin-bottom: 10px; margin-bottom: 10px;
.enumTypeDiv{ .enumTypeDiv {
margin-top: 10px; margin-top: 10px;
} }
.enum-header {
margin-bottom: 10px;
}
} }
.el-select { .el-select {
width: 100%; width: 100%;
@ -718,36 +731,14 @@ handleInputDelete(row, index) {
align-items: center; align-items: center;
} }
} }
.max-min-row {
width: 90%;
padding: 0;
margin-left: 5% !important;
margin-right: 0 !important;
.el-form-item {
border: 0;
margin-left: 0;
}
.el-form-item--medium .el-form-item__content {
margin-left: 0px !important;
}
}
}
.enum-box {
border: 1px solid #d8d7d7;
padding: 10px;
margin-bottom: 10px;
.enum-header {
margin-bottom: 10px;
}
} }
.is-error input { .is-error input {
border-color: #F56C6C; border-color: #f56c6c;
} }
.el-form-item__error { .el-form-item__error {
color: #F56C6C; color: #f56c6c;
font-size: 12px; font-size: 12px;
line-height: 1; line-height: 1;
padding-top: 4px; padding-top: 4px;
@ -756,5 +747,3 @@ handleInputDelete(row, index) {
left: 0; left: 0;
} }
</style> </style>

68
src/views/profile/attribute/functionView.vue
View File

@ -31,9 +31,23 @@
align="center" align="center"
class-name="small-padding fixed-width" class-name="small-padding fixed-width"
label="操作" label="操作"
width="180px" width="200px"
> >
<template slot-scope="scope"> <template slot-scope="scope">
<el-button
:disabled="scope.$index === 0"
icon="el-icon-arrow-up"
size="mini"
type="text"
@click="handleMoveUp(scope.$index)"
>上移</el-button>
<el-button
:disabled="scope.$index === functionList.length - 1"
icon="el-icon-arrow-down"
size="mini"
type="text"
@click="handleMoveDown(scope.$index)"
>下移</el-button>
<el-button <el-button
icon="el-icon-edit" icon="el-icon-edit"
size="mini" size="mini"
@ -128,7 +142,6 @@ export default {
this.functionList = []; this.functionList = [];
setTimeout(() => { setTimeout(() => {
this.$store.dispatch("GetFunctionList").then(res => { this.$store.dispatch("GetFunctionList").then(res => {
console.log("功能列表数据", res);
this.functionList = res; this.functionList = res;
this.$forceUpdate(); this.$forceUpdate();
this.loading = false; this.loading = false;
@ -186,6 +199,55 @@ export default {
}; };
this.functionOpen = true; this.functionOpen = true;
}, },
/**
* 上移功能
* @param {Number} index 当前功能索引
*/
handleMoveUp(index) {
if (index === 0) return; // 已经是第一个，不能再上移
// 交换当前项与上一项的位置
const temp = this.functionList[index];
this.$set(this.functionList, index, this.functionList[index - 1]);
this.$set(this.functionList, index - 1, temp);
// 保存到 store
this.$store.dispatch("UpdateFunctionList", this.functionList).then(() => {
this.$message({
type: 'success',
message: '上移成功!'
});
}).catch(err => {
this.$message.error("操作失败：" + err);
// 恢复原状
this.getList();
});
},
/**
* 下移功能
* @param {Number} index 当前功能索引
*/
handleMoveDown(index) {
if (index === this.functionList.length - 1) return; // 已经是最后一个，不能再下移
// 交换当前项与下一项的位置
const temp = this.functionList[index];
this.$set(this.functionList, index, this.functionList[index + 1]);
this.$set(this.functionList, index + 1, temp);
// 保存到 store
this.$store.dispatch("UpdateFunctionList", this.functionList).then(() => {
this.$message({
type: 'success',
message: '下移成功!'
});
}).catch(err => {
this.$message.error("操作失败：" + err);
// 恢复原状
this.getList();
});
},
/** 修改按钮操作 */ /** 修改按钮操作 */
handleUpdate(row, idx) { handleUpdate(row, idx) {
@ -318,8 +380,6 @@ export default {
} }
} }
.params-eldialog { .params-eldialog {
.el-dialog__header {
}
.el-dialog__body { .el-dialog__body {
height: 100%; height: 100%;
max-height: calc(100vh - 200px); max-height: calc(100vh - 200px);

79
src/views/system/dict/data.vue
View File

@ -1,10 +1,11 @@
<template> <template>
<div class="app-container"> <div class="app-container">
<el-form <el-form
:model="queryParams" v-show="showSearch"
ref="queryForm" ref="queryForm"
:inline="true" :inline="true"
v-show="showSearch" :model="queryParams"
class="main-search-card"
label-width="68px" label-width="68px"
> >
<el-form-item label="字典名称" prop="dictType"> <el-form-item label="字典名称" prop="dictType">
@ -20,14 +21,14 @@
<el-form-item label="字典标签" prop="dictLabel"> <el-form-item label="字典标签" prop="dictLabel">
<el-input <el-input
v-model="queryParams.dictLabel" v-model="queryParams.dictLabel"
placeholder="请输入字典标签"
clearable clearable
placeholder="请输入字典标签"
size="small" size="small"
@keyup.enter.native="handleQuery" @keyup.enter.native="handleQuery"
/> />
</el-form-item> </el-form-item>
<el-form-item label="状态" prop="status"> <el-form-item label="状态" prop="status">
<el-select v-model="queryParams.status" placeholder="数据状态" clearable size="small"> <el-select v-model="queryParams.status" clearable placeholder="数据状态" size="small">
<el-option <el-option
v-for="dict in statusOptions" v-for="dict in statusOptions"
:key="dict.dictValue" :key="dict.dictValue"
@ -37,20 +38,20 @@
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button> <el-button icon="el-icon-search" size="mini" type="primary" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button> <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
<div class="main-content-card">
<el-row :gutter="10" class="mb8"> <el-row :gutter="10" class="mb8">
<el-col :span="1.5"> <el-col :span="1.5">
<el-button <el-button
type="primary"
plain
icon="el-icon-plus"
size="mini"
@click="handleAdd"
v-hasPermi="['system:dict:add']" v-hasPermi="['system:dict:add']"
icon="el-icon-plus"
plain
size="mini"
type="primary"
@click="handleAdd"
>新增</el-button> >新增</el-button>
</el-col> </el-col>
<!-- <el-col :span="1.5"> <!-- <el-col :span="1.5">
@ -66,12 +67,12 @@
</el-col> --> </el-col> -->
<el-col :span="1.5"> <el-col :span="1.5">
<el-button <el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
@click="handleExport"
v-hasPermi="['system:dict:export']" v-hasPermi="['system:dict:export']"
icon="el-icon-download"
plain
size="mini"
type="warning"
@click="handleExport"
>导出</el-button> >导出</el-button>
</el-col> </el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
@ -83,43 +84,43 @@
:default-sort="{prop: 'createTime', order: 'descending'}" :default-sort="{prop: 'createTime', order: 'descending'}"
@sort-change="sortChange" @sort-change="sortChange"
> >
<el-table-column type="index" label="序号" align="center" :index="indexFormatter" width="80px"></el-table-column> <el-table-column :index="indexFormatter" align="center" label="序号" type="index" width="80px"></el-table-column>
<el-table-column label="字典标签" align="left" prop="dictLabel" /> <el-table-column align="left" label="字典标签" prop="dictLabel" />
<el-table-column label="字典键值" align="left" prop="dictValue" /> <el-table-column align="left" label="字典键值" prop="dictValue" />
<el-table-column label="字典排序" align="center" width="100" prop="dictSort" /> <el-table-column align="center" label="字典排序" prop="dictSort" width="100" />
<el-table-column <el-table-column
label="状态"
align="center"
width="100"
prop="status"
:formatter="statusFormat" :formatter="statusFormat"
align="center"
label="状态"
prop="status"
width="100"
/> />
<el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" /> <el-table-column :show-overflow-tooltip="true" align="center" label="备注" prop="remark" />
<el-table-column label="创建时间" align="center" sortable="custom" prop="createTime" width="160"> <el-table-column align="center" label="创建时间" prop="createTime" sortable="custom" width="160">
<template slot-scope="scope"> <template slot-scope="scope">
<span>{{ parseTime(scope.row.createTime) }}</span> <span>{{ parseTime(scope.row.createTime) }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column
label="操作"
align="center" align="center"
width="100px"
class-name="small-padding fixed-width" class-name="small-padding fixed-width"
label="操作"
width="100px"
> >
<template slot-scope="scope"> <template slot-scope="scope">
<el-button <el-button
v-hasPermi="['system:dict:edit']"
icon="el-icon-edit"
size="mini" size="mini"
type="text" type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)" @click="handleUpdate(scope.row)"
v-hasPermi="['system:dict:edit']"
>修改</el-button> >修改</el-button>
<el-button <el-button
v-hasPermi="['system:dict:remove']"
icon="el-icon-delete"
size="mini" size="mini"
type="text" type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)" @click="handleDelete(scope.row)"
v-hasPermi="['system:dict:remove']"
>删除</el-button> >删除</el-button>
</template> </template>
</el-table-column> </el-table-column>
@ -127,14 +128,14 @@
<pagination <pagination
v-show="total>0" v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize" :limit.sync="queryParams.pageSize"
:page.sync="queryParams.pageNum"
:total="total"
@pagination="getList" @pagination="getList"
/> />
</div>
<!-- 添加或修改参数配置对话框 --> <!-- 添加或修改参数配置对话框 -->
<el-dialog class="eldialog-wrap" :close-on-click-modal="false" :title="title" :visible.sync="open" width="500px"> <el-dialog :close-on-click-modal="false" :title="title" :visible.sync="open" class="eldialog-wrap" width="500px">
<el-form ref="form" :model="form" :rules="rules" label-width="100px"> <el-form ref="form" :model="form" :rules="rules" label-width="100px">
<el-form-item label="字典类型:"> <el-form-item label="字典类型:">
<el-input v-model="form.dictType" :disabled="true" /> <el-input v-model="form.dictType" :disabled="true" />
@ -147,10 +148,10 @@
</el-form-item> </el-form-item>
<el-form-item label="显示排序:" prop="dictSort"> <el-form-item label="显示排序:" prop="dictSort">
<el-input-number <el-input-number
style="width: 100%;"
v-model="form.dictSort" v-model="form.dictSort"
controls-position="right"
:min="0" :min="0"
controls-position="right"
style="width: 100%;"
/> />
</el-form-item> </el-form-item>
<el-form-item label="状态:" prop="status"> <el-form-item label="状态:" prop="status">
@ -163,7 +164,7 @@
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<el-form-item label="备注:" prop="remark"> <el-form-item label="备注:" prop="remark">
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input> <el-input v-model="form.remark" placeholder="请输入内容" type="textarea"></el-input>
</el-form-item> </el-form-item>
</el-form> </el-form>
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">

4
src/views/system/user/index.vue
View File

@ -1,8 +1,8 @@
<template> <template>
<div class="app-container"> <div class="app-container">
<el-row :gutter="40"> <el-row :gutter="20">
<!--部门数据--> <!--部门数据-->
<el-col :span="4" :xs="24" class="main-search-card"> <el-col :span="4" :xs="24" class="main-search-card" style="min-height: 500px">
<div class="head-container"> <div class="head-container">
<el-input <el-input
v-model="deptName" v-model="deptName"