162 lines
3.9 KiB
Vue
162 lines
3.9 KiB
Vue
<template>
|
|
<el-dialog
|
|
v-model="visible"
|
|
:title="type === 'I' ? '新增规则': '编辑规则'"
|
|
width="30%"
|
|
:before-close="closeDialog"
|
|
>
|
|
<el-form
|
|
:model="addForm"
|
|
label-width="100px"
|
|
:rules="rules"
|
|
ref="ruleFormRef"
|
|
>
|
|
<el-form-item label="规则标题:" prop="name">
|
|
<el-input
|
|
v-model="addForm.name"
|
|
placeholder="请输入规则标题"
|
|
clearable
|
|
:disabled="type === 'I' ? false: true"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="规则描述:" prop="description">
|
|
<el-input
|
|
v-model="addForm.description"
|
|
placeholder="请输入规则描述"
|
|
clearable
|
|
/>
|
|
</el-form-item>
|
|
</el-form>
|
|
<template #footer>
|
|
<span class="dialog-footer">
|
|
<el-button @click="closeDialog">取消</el-button>
|
|
<el-button type="primary" @click="saveFormData"> 保存 </el-button>
|
|
</span>
|
|
</template>
|
|
</el-dialog>
|
|
</template>
|
|
<script>
|
|
import { onMounted, reactive, ref, toRefs, computed, nextTick } from "vue";
|
|
import infoApi from "@/api/infoApi.js";
|
|
import { ElMessage, ElMessageBox } from "element-plus";
|
|
import { rule_info, response} from '../proto/data/pd'
|
|
export default {
|
|
props: ["formData", "dialogVisible", "type"],
|
|
emits: ["dialogClose", "dialogSuccess"],
|
|
setup(props, ctx) {
|
|
const ruleFormRef = ref(null);
|
|
const state = reactive({
|
|
addForm: {},
|
|
rules: {
|
|
name: [
|
|
{ required: true, message: "请输入规则标题", trigger: "blur" }
|
|
],
|
|
description: [
|
|
{ required: true, message: "请输入规则描述", trigger: "blur" }
|
|
]
|
|
},
|
|
});
|
|
const visible = computed(() => {
|
|
return props.dialogVisible;
|
|
});
|
|
const type = computed(() => {
|
|
return props.type;
|
|
});
|
|
onMounted(() => {
|
|
// state.addForm = props.formData;
|
|
});
|
|
|
|
const closeDialog = () => {
|
|
ctx.emit("dialogClose");
|
|
};
|
|
|
|
const importData = () => {};
|
|
|
|
const exoportData = () => {};
|
|
|
|
|
|
const saveFormData = () => {
|
|
ruleFormRef.value.validate(async (valid) => {
|
|
if (valid) {
|
|
const req_databuf = rule_info.encode(state.addForm).finish();
|
|
// 截取有效长度
|
|
const req_data = req_databuf.slice(0, req_databuf.length);
|
|
const res = props.type === 'I' ? await infoApi.addRules(req_data) : await infoApi.editRule(req_data);
|
|
console.log(555, res)
|
|
const ret = response.decode(new Uint8Array(res));
|
|
if (ret.code == 0) {
|
|
// 获取数据
|
|
console.log(new TextDecoder().decode(ret.data));
|
|
ElMessage.success(new TextDecoder().decode(ret.data) || "请求成功");
|
|
// 关闭弹框
|
|
ctx.emit("dialogSuccess");
|
|
} else {
|
|
console.log(res);
|
|
}
|
|
} else {
|
|
console.log("error submit!");
|
|
}
|
|
});
|
|
};
|
|
return {
|
|
...toRefs(state),
|
|
visible,
|
|
type,
|
|
closeDialog,
|
|
importData,
|
|
exoportData,
|
|
saveFormData,
|
|
ruleFormRef
|
|
};
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.title-div {
|
|
height: 40px;
|
|
line-height: 40px;
|
|
display: flex;
|
|
|
|
> div {
|
|
width: 15%;
|
|
span {
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
}
|
|
.tree-div {
|
|
height: 780px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
.tree {
|
|
width: 20%;
|
|
border: 1px solid #f2f2f2;
|
|
height: 100%;
|
|
padding: 10px;
|
|
}
|
|
.table {
|
|
height: 100%;
|
|
width: 79%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
.point-table {
|
|
border: 1px solid #f2f2f2;
|
|
padding: 10px;
|
|
}
|
|
.propertie-table {
|
|
padding: 10px;
|
|
border: 1px solid #f2f2f2;
|
|
}
|
|
}
|
|
.custom-tree-node {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
.add-icon {
|
|
padding-right: 15px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|