Skip to content

S
so-manage-ui
Commit 47340c01 authored by 张俊's avatar 张俊
Browse files
Options

Merge branch 'dev' of https://cloud.wodcloud.com/git/smart-operation/so-manage-ui into dev

parents 85b0c4af 2239de58
Hide whitespace changes
Inline Side-by-side
Showing with 518 additions and 759 deletions
src/components/login-by-account.vue
View file @ 47340c01
...@@ -120,9 +120,7 @@ const login = () => { ...@@ -120,9 +120,7 @@ const login = () => {
ElMessage.error(data.data); ElMessage.error(data.data);
} }
}) })
.catch((error) => { .catch((error) => {});
console.log(error);
});
}; };
const getUserInfo = () => { const getUserInfo = () => {
return axios.get(`/v1/api/user/getUserInfo`); return axios.get(`/v1/api/user/getUserInfo`);
......
src/page/main/authority/organization/directory-form.vue
View file @ 47340c01
...@@ -77,7 +77,7 @@ const treeProps = { ...@@ -77,7 +77,7 @@ const treeProps = {
disabled: "disabled", disabled: "disabled",
}; };
const getOrgTree = () => { const getOrgTree = () => {
axios.get(`/apaas/system/v5/org/tree`).then((res) => { axios.get(`/v1/api/org/tree`).then((res) => {
if (res.data.code == 200) { if (res.data.code == 200) {
const orgDataTemp = res.data.data || []; const orgDataTemp = res.data.data || [];
orgDataTemp.shift(); orgDataTemp.shift();
......
src/page/main/authority/organization/index.vue
View file @ 47340c01
...@@ -22,29 +22,19 @@ ...@@ -22,29 +22,19 @@
</span> </span>
<span> 基本信息 </span> <span> 基本信息 </span>
</span> </span>
<span class="can_click_text detail_btn" v-if="selectTreeDataType === 1" @click="toOrgDetail">
查看详情
<bg-icon style="font-size: 8px; color: #95a3ca; vertical-align: middle" icon="#bg-ic-arrow-right" />
</span>
</div> </div>
<bg-info class="info_box" v-if="selectTreeDataType === 1" :data="baseInfo"></bg-info> <bg-info class="info_box" :data="baseInfo"></bg-info>
<bg-info class="info_box" v-if="selectTreeDataType === 2" :data="baseInfo2"></bg-info>
</div> </div>
<div class="main_container bgc_white"> <div class="main_container bgc_white">
<bg-filter-group @search="changeSearch" v-model="filter.key_word" placeholder="请输入关键字"> <bg-filter-group @search="changeSearch" v-model="filter.key_word" placeholder="请输入关键字">
<template v-slot:left_action> <template v-slot:left_action>
<div class="apaas_button"> <div class="title">
<el-button type="primary" @click="addAccount"> <span class="icon_box">
<bg-icon style="font-size: 12px; color: #fff; margin-right: 8px" icon="#bg-ic-add"></bg-icon> <span class="step_icon">
{{ selectTreeDataType === 1 ? "新增组织管理员" : "新增平台用户" }} <bg-icon icon="#bg-ic-file"></bg-icon>
</el-button> </span>
<el-button @click="deleteBatch"> 批量删除 </el-button> <span> 用户列表 </span>
<el-button @click="resetPsd"> 重置密码 </el-button> </span>
<span class="header_info"
>已选择<span style="color: #202531; font-weight: bold">{{ selected.length }}</span
>项</span
>
<span class="header_info can_click_text" @click="clearSelected">清空</span>
</div> </div>
</template> </template>
<template v-slot:filter_group> <template v-slot:filter_group>
...@@ -68,42 +58,9 @@ ...@@ -68,42 +58,9 @@
</template> </template>
</bg-filter-group> </bg-filter-group>
<div class="table_container apaas_scroll"> <div class="table_container apaas_scroll">
<bg-table <bg-table ref="dataTable" :headers="headers" :rows="tableRows" :isIndex="true" :stripe="true">
ref="dataTable"
:headers="headers"
:rows="tableRows"
:isIndex="true"
canEdit
canEditFlag="canSelect"
:stripe="true"
:select="true"
@selectAc="selectRows">
<template v-slot:system_account="{ row }">
<span @click="goDetail(row)" class="can_click_text">
{{ row.system_account }}
</span>
</template>
<template v-slot:state="{ row }">
<bg-switch
@click="stateChange(row)"
:labels="['否', '是']"
:values="[0, 1]"
v-model="row.state"
:disabled="row.is_admin == 4"></bg-switch>
</template>
<template v-slot:action="{ row }"> <template v-slot:action="{ row }">
<bg-table-btn :disabled="row.is_admin == 4" @click="editAccount(row)" class="can_click_text"> <bg-table-btn @click="goDetail(row)" class="can_click_text"> 详情 </bg-table-btn>
编辑
</bg-table-btn>
<bg-table-btn
:disabled="row.is_admin == 4 && userInfo.is_admin !== 4"
@click="editPsdAccount(row)"
class="can_click_text">
修改密码
</bg-table-btn>
<bg-table-btn :disabled="row.is_admin == 4" @click="deleteAccount(row)" class="can_click_text">
删除
</bg-table-btn>
</template> </template>
</bg-table> </bg-table>
<div class="pagination_box"> <div class="pagination_box">
...@@ -163,172 +120,49 @@ ...@@ -163,172 +120,49 @@
</span> </span>
</template> </template>
</el-dialog> </el-dialog>
<el-dialog v-model="deleteRowFlag" title="删除" width="520px" :before-close="handleCloseRowDelete">
<div class="warning_info">
<bg-icon
style="font-size: 12px; color: #a9b1c7; margin-right: 8px; vertical-align: baseline"
icon="#bg-ic-circle-tips"></bg-icon>
您正在对 <span class="danger_info">{{ selectedRow.system_account }}</span
>做删除操作。
</div>
<template #footer>
<span class="dialog-footer">
<el-button @click="handleCloseRowDelete">取消</el-button>
<el-button type="primary" @click="deleteRowConfirm">确定</el-button>
</span>
</template>
</el-dialog>
<el-dialog v-model="editFlag" title="修改密码" width="520px" :before-close="handleCloseEdit">
<div class="warning_info">
<bg-icon
style="font-size: 12px; color: #a9b1c7; margin-right: 8px; vertical-align: baseline"
icon="#bg-ic-circle-tips"></bg-icon>
您正在对 <span class="danger_info">{{ selectedRow.system_account }}</span
>做修改密码操作，修改后旧密码将无法登录。
</div>
<div>
<el-form
:label-position="'right'"
label-width="120px"
:model="passwordForm"
:rules="passwordFormRules"
ref="passwordRef"
style="max-width: 80%">
<el-form-item label="新密码" prop="password">
<el-input
v-model="passwordForm.password"
:type="password_eye ? 'text' : 'password'"
placeholder="请输入密码">
<template #suffix>
<bg-icon @click="password_eye = !password_eye" class="icon_eye" icon="#bg-ic-eye"></bg-icon>
</template>
</el-input>
</el-form-item>
<el-form-item label="确认新密码" prop="confirm_password">
<el-input
v-model="passwordForm.confirm_password"
:type="confirm_eye ? 'text' : 'password'"
placeholder="请确认新密码">
<template #suffix>
<bg-icon @click="confirm_eye = !confirm_eye" class="icon_eye" icon="#bg-ic-eye"></bg-icon>
</template>
</el-input>
</el-form-item>
</el-form>
</div>
<template #footer>
<span class="dialog-footer">
<el-button @click="handleCloseEdit">取消</el-button>
<el-button type="primary" @click="editConfirm">确定</el-button>
</span>
</template>
</el-dialog>
<el-dialog v-model="deleteFlag" title="删除" width="520px" :before-close="handleCloseDelete">
<div class="warning_info">
<bg-icon
style="font-size: 12px; color: #a9b1c7; mdeleteconfirmargin-right: 8px; vertical-align: baseline"
icon="#bg-ic-circle-tips"></bg-icon>
您正在对 <span class="danger_info">{{ selectedName.join("、") }}</span
>做删除操作。
</div>
<template #footer>
<span class="dialog-footer">
<el-button @click="handleCloseDelete">取消</el-button>
<el-button type="primary" @click="deleteConfirm">确定</el-button>
</span>
</template>
</el-dialog>
<el-dialog v-model="resetFlag" title="重置密码" width="520px" :before-close="handleCloseReset">
<div class="warning_info">
<bg-icon
style="font-size: 12px; color: #a9b1c7; margin-right: 8px; vertical-align: baseline"
icon="#bg-ic-circle-tips"></bg-icon>
您正在对 <span class="danger_info">{{ selectedName.join("、") }}</span
>做重置密码操作。
</div>
<div>重置密码为123456，是否继续？</div>
<template #footer>
<span class="dialog-footer">
<el-button @click="handleCloseReset">取消</el-button>
<el-button type="primary" @click="resetConfirm">确定</el-button>
</span>
</template>
</el-dialog>
</div> </div>
</template> </template>
<script setup> <script setup>
import { Search } from "@element-plus/icons-vue"; import { Search } from "@element-plus/icons-vue";
import { computed, onBeforeMount, nextTick, reactive, ref, toRefs } from "@vue/runtime-core"; import { onBeforeMount, nextTick, reactive, ref } from "@vue/runtime-core";
import { useRouter } from "vue-router"; import { useRouter } from "vue-router";
import tree from "./tree.vue"; import tree from "./tree.vue";
import directoryForm from "./directory-form.vue"; import directoryForm from "./directory-form.vue";
import orgForm from "./org-form.vue"; import orgForm from "./org-form.vue";
import CryptoJS from "crypto-js";
import { downloadFileFormatNew } from "@/services/helper"; import { downloadFileFormatNew } from "@/services/helper";
import store from "@/store";
import axios from "@/request/http.js"; import axios from "@/request/http.js";
import { ElMessage } from "element-plus"; import { ElMessage } from "element-plus";
import bgBreadcrumb from "@/components/bg-breadcrumb.vue"; import bgBreadcrumb from "@/components/bg-breadcrumb.vue";
const dataTable = ref(null); const dataTable = ref(null);
const toOrgDetail = () => {
router.push({
path: "/authority/organization/org-detail",
query: {
id: selectOrgNode.value.organization_id,
},
});
};
const baseInfo = reactive([ const baseInfo = reactive([
{
name: "组织类型",
value: "",
nameWidth: 130,
},
{
name: "组织代码",
value: "",
nameWidth: 130,
},
{ {
name: "组织名称", name: "组织名称",
value: "", value: "",
callback: toOrgDetail,
nameWidth: 130, nameWidth: 130,
}, },
{ {
name: "创建时间", name: "组织代码",
value: "",
nameWidth: 130,
},
{
name: "组织管理员数量",
value: "",
nameWidth: 130,
},
{
name: "业务系统数量",
value: "", value: "",
nameWidth: 130, nameWidth: 130,
}, },
]);
const baseInfo2 = reactive([
{ {
name: "组织名称", name: "组织描述",
value: "", value: "",
nameWidth: 130, nameWidth: 130,
}, },
{ {
name: "组织代码", name: "用户数量",
value: "", value: "",
nameWidth: 130, nameWidth: 130,
}, },
{ {
name: "用户数", name: "创建时间",
value: "", value: "",
nameWidth: 130, nameWidth: 130,
full: true,
}, },
]); ]);
const headers = reactive([ const headers = reactive([
...@@ -352,11 +186,6 @@ const headers = reactive([ ...@@ -352,11 +186,6 @@ const headers = reactive([
prop: "created_time", prop: "created_time",
minWidth: 200, minWidth: 200,
}, },
{
label: "是否启用",
prop: "state",
width: 80,
},
{ {
label: "操作", label: "操作",
prop: "action", prop: "action",
...@@ -393,57 +222,8 @@ const filter = reactive({ ...@@ -393,57 +222,8 @@ const filter = reactive({
page: 1, page: 1,
limit: 10, limit: 10,
}); });
const deleteFlag = ref(false);
const deleteRowFlag = ref(false);
const resetFlag = ref(false);
const selectedRow = ref({});
const selected = ref([]);
const selectedName = ref([]);
const editFlag = ref(false);
const password_eye = ref(false);
const confirm_eye = ref(false);
const passwordRef = ref(null);
const passwordForm = reactive({
password: "",
confirm_password: "",
});
const search = ref("");
const userInfo = computed(() => {
return store.state.userInfo;
});
const validatePass = (rule, value, callback) => {
if (value !== passwordForm.password) {
callback(new Error("密码输入不一致"));
} else {
callback();
}
};
const passwordFormRules = reactive({
password: [
{ required: true, message: "请输入密码", trigger: "blur" },
{ min: 8, message: "密码长度不得低于8位", trigger: "blur" },
],
confirm_password: [
{ required: true, message: "请确认密码", trigger: "blur" },
{ validator: validatePass, trigger: "blur" },
],
});
const addAccount = () => { const search = ref("");
if (selectTreeDataType.value === 1) {
router.push({
path: "/authority/organization/org-user",
query: {
orgId: selectOrgNode.value.organization_id,
},
});
} else {
router.push({
path: "/authority/organization/platform-user",
});
}
};
const changeSize = (size) => { const changeSize = (size) => {
filter.limit = size; filter.limit = size;
...@@ -492,7 +272,7 @@ const getDirectoryFromData = (data) => { ...@@ -492,7 +272,7 @@ const getDirectoryFromData = (data) => {
name: data.name, name: data.name,
data_type: 0, data_type: 0,
}; };
axios.post(`/apaas/system/v5/org/add`, params).then((res) => { axios.post(`/v1/api/org/add`, params).then((res) => {
if (res.data.code == 200) { if (res.data.code == 200) {
ElMessage.success(res.data.msg); ElMessage.success(res.data.msg);
orgTree.value.getOrgTree(res.data.data.id); orgTree.value.getOrgTree(res.data.data.id);
...@@ -506,7 +286,7 @@ const getDirectoryFromData = (data) => { ...@@ -506,7 +286,7 @@ const getDirectoryFromData = (data) => {
name: data.name, name: data.name,
data_type: 0, data_type: 0,
}; };
axios.put(`/apaas/system/v5/org/${actionTreeData.value.id}`, params).then((res) => { axios.put(`/v1/api/org/${actionTreeData.value.id}`, params).then((res) => {
if (res.data.code == 200) { if (res.data.code == 200) {
ElMessage.success(res.data.msg); ElMessage.success(res.data.msg);
orgTree.value.getOrgTree(actionTreeData.value.id); orgTree.value.getOrgTree(actionTreeData.value.id);
...@@ -536,11 +316,9 @@ const getOrgFormData = (data) => { ...@@ -536,11 +316,9 @@ const getOrgFormData = (data) => {
name: data.name, name: data.name,
organization_code: data.organization_code, organization_code: data.organization_code,
description: data.description, description: data.description,
attachment:
data.attachment && data.attachment.length > 0 ? data.attachment.map((item) => item.url).join(",") : "",
data_type: 1, data_type: 1,
}; };
axios.post(`/apaas/system/v5/org/add`, params).then((res) => { axios.post(`/v1/api/org/add`, params).then((res) => {
if (res.data.code == 200) { if (res.data.code == 200) {
ElMessage.success(res.data.msg); ElMessage.success(res.data.msg);
orgTree.value.getOrgTree(res.data.data.id); orgTree.value.getOrgTree(res.data.data.id);
...@@ -555,11 +333,9 @@ const getOrgFormData = (data) => { ...@@ -555,11 +333,9 @@ const getOrgFormData = (data) => {
name: data.name, name: data.name,
organization_code: data.organization_code, organization_code: data.organization_code,
description: data.description, description: data.description,
attachment:
data.attachment && data.attachment.length > 0 ? data.attachment.map((item) => item.url).join(",") : "",
data_type: 1, data_type: 1,
}; };
axios.put(`/apaas/system/v5/org/${actionTreeData.value.id}`, params).then((res) => { axios.put(`/v1/api/org/${actionTreeData.value.id}`, params).then((res) => {
if (res.data.code == 200) { if (res.data.code == 200) {
ElMessage.success(res.data.msg); ElMessage.success(res.data.msg);
orgTree.value.getOrgTree(actionTreeData.value.id); orgTree.value.getOrgTree(actionTreeData.value.id);
...@@ -577,7 +353,7 @@ const handleCloseDelNode = () => { ...@@ -577,7 +353,7 @@ const handleCloseDelNode = () => {
//删除目录/组织 //删除目录/组织
const confirmDelNode = () => { const confirmDelNode = () => {
axios.delete(`/apaas/system/v5/org/${actionTreeData.value.id}`).then((res) => { axios.delete(`/v1/api/org/${actionTreeData.value.id}`).then((res) => {
if (res.data.code == 200) { if (res.data.code == 200) {
ElMessage.success(res.data.msg); ElMessage.success(res.data.msg);
orgTree.value.getOrgTree(actionTreeData.value.id === selectTreeData.value.id ? null : selectTreeData.value.id); orgTree.value.getOrgTree(actionTreeData.value.id === selectTreeData.value.id ? null : selectTreeData.value.id);
...@@ -589,7 +365,7 @@ const confirmDelNode = () => { ...@@ -589,7 +365,7 @@ const confirmDelNode = () => {
}; };
const moveOrg = (params) => { const moveOrg = (params) => {
axios.put(`/apaas/system/v5/org/sort`, params).then((res) => { axios.put(`/v1/api/org/sort`, params).then((res) => {
if (res.data.code == 200) { if (res.data.code == 200) {
ElMessage.success(res.data.msg); ElMessage.success(res.data.msg);
orgTree.value.getOrgTree(selectTreeData.value.id); orgTree.value.getOrgTree(selectTreeData.value.id);
...@@ -615,9 +391,6 @@ const treeAction = (data) => { ...@@ -615,9 +391,6 @@ const treeAction = (data) => {
level: data.data.value.p_organization_id ? false : true, level: data.data.value.p_organization_id ? false : true,
organization_code: data.data.value.organization_code, organization_code: data.data.value.organization_code,
description: data.data.value.description, description: data.data.value.description,
attachment: data.data.value.attachment.split(",").map((i) => {
return { name: downloadFileFormatNew(i), url: i };
}),
}); });
} else if (data.action === "create") { } else if (data.action === "create") {
orgFormRef.value.setForm({ p_organization_id: data.data.value.organization_id }); orgFormRef.value.setForm({ p_organization_id: data.data.value.organization_id });
...@@ -662,39 +435,23 @@ const getTableRows = () => { ...@@ -662,39 +435,23 @@ const getTableRows = () => {
let params = { let params = {
...filter, ...filter,
organization_id: selectTreeData.value.organization_id, organization_id: selectTreeData.value.organization_id,
data_type: selectTreeData.value.data_type,
}; };
axios axios
.get(`/apaas/system/v5/org/detail`, { .get(`/v1/api/org/detail`, {
params, params,
}) })
.then((res) => { .then((res) => {
if (res.data.code == 200) { if (res.data.code == 200) {
tableRows.value = (res.data.data.org_users.data || []).map((item) => { tableRows.value = ((res.data.data && res.data.data.org_users.data) || []).map((item) => {
item.system_role = item.system_role ? item.system_role.join("、") : "-"; item.system_role = item.system_role ? item.system_role.join("、") : "-";
return item; return item;
}); });
tableRows.value.forEach((e) => { tableTotal.value = (res.data.data && res.data.data.org_users.total) || 0;
if (e.is_admin == 4 && userInfo.value.is_admin != 4) { baseInfo[0].value = (res.data.data && res.data.data.org_info.name) || "";
e.canSelect = 1; baseInfo[1].value = (res.data.data && res.data.data.org_info.organization_code) || "";
} else { baseInfo[2].value = (res.data.data && res.data.data.org_info.description) || "";
e.canSelect = 0; baseInfo[3].value = (res.data.data && res.data.data.org_info.platform_users_number) || "";
} baseInfo[4].value = (res.data.data && res.data.data.org_info.created_time) || "";
});
tableTotal.value = res.data.data.org_users.total;
if (params.data_type === 1) {
baseInfo[0].value = res.data.data.org_info.organization_type;
baseInfo[1].value = res.data.data.org_info.organization_code;
baseInfo[2].value = res.data.data.org_info.name;
baseInfo[3].value = res.data.data.org_info.created_time;
baseInfo[4].value = res.data.data.org_info.org_admin_number;
baseInfo[5].value = res.data.data.org_info.business_system_number;
} else {
baseInfo2[0].value = res.data.data.org_info.name;
baseInfo2[1].value = res.data.data.org_info.organization_code;
baseInfo2[2].value = res.data.data.org_info.platform_users_number;
}
console.log(baseInfo);
} else { } else {
ElMessage.error(res.data.data); ElMessage.error(res.data.data);
} }
...@@ -713,157 +470,6 @@ const goDetail = (params) => { ...@@ -713,157 +470,6 @@ const goDetail = (params) => {
}, },
}); });
}; };
const stateChange = (row) => {
if (row.is_admin == 4) {
return;
}
const state = row.state.toString();
axios.post(`/apaas/system/v5/user/state/${row.id}/${state}`).then((res) => {
if (res.data.code == 200) {
ElMessage.success(res.data.msg);
getTableRows();
} else {
ElMessage.error(res.data.data);
row.state = row.state == 0 ? 1 : 0;
}
});
};
const editPsdAccount = (data) => {
selectedRow.value = data;
editFlag.value = true;
};
const handleCloseEdit = () => {
if (!passwordRef) return;
passwordRef.value.resetFields();
editFlag.value = false;
};
const editConfirm = () => {
if (!passwordRef) return;
passwordRef.value.validate((valid, fields) => {
if (valid) {
axios
.post(`/apaas/system/v5/user/editpwd`, {
id: selectedRow.value.id,
password: CryptoJS.AES.encrypt(passwordForm.password, "swuE9cmCZQwrkYRV").toString(),
})
.then((res) => {
if (res.data.code == 200) {
ElMessage.success(res.data.msg);
} else {
ElMessage.error(res.data.data);
}
handleCloseEdit();
});
}
});
};
const deleteAccount = (data) => {
if (data.state === 0) {
selectedRow.value = data;
deleteRowFlag.value = true;
} else {
ElMessage.error("当前状态已启用，不可删除！");
}
};
const handleCloseRowDelete = () => {
deleteRowFlag.value = false;
};
const deleteRowConfirm = () => {
axios.delete(`/apaas/system/v5/user/delete`, { data: { ids: [selectedRow.value.id] } }).then((res) => {
if (res.data.code == 200) {
ElMessage.success(res.data.msg);
getTableRows();
} else {
ElMessage.error(res.data.data);
}
handleCloseRowDelete();
});
};
const editAccount = (data) => {
if (selectTreeDataType.value === 1) {
router.push({
path: "/authority/organization/org-user/edit",
query: {
id: data.id,
orgId: selectOrgNode.value.organization_id,
},
});
} else {
router.push({
path: "/authority/organization/platform-user/edit",
query: {
id: data.id,
},
});
}
};
const handleCloseDelete = () => {
deleteFlag.value = false;
};
const deleteConfirm = () => {
const ids = selected.value.map((item) => item.id);
axios.delete(`/apaas/system/v5/user/delete`, { data: { ids: ids } }).then((res) => {
if (res.data.code == 200) {
ElMessage.success(res.data.msg);
getTableRows();
} else {
ElMessage.error(res.data.data);
}
handleCloseDelete();
});
};
const deleteBatch = () => {
if (selectedName.value.length > 0) {
deleteFlag.value = true;
} else {
ElMessage.error("请先选择需要操作的数据!");
}
};
const handleCloseReset = () => {
resetFlag.value = false;
};
const resetPsd = () => {
if (selectedName.value.length > 0) {
resetFlag.value = true;
} else {
ElMessage.error("请先选择需要操作的数据!");
}
};
const resetConfirm = () => {
const ids = selected.value.map((item) => item.id);
axios.post(`/apaas/system/v5/user/resetpwd`, { ids: ids }).then((res) => {
if (res.data.code == 200) {
ElMessage.success(res.data.msg);
getTableRows();
} else {
ElMessage.error(res.data.data);
}
handleCloseReset();
});
};
const selectRows = (data) => {
selected.value = data.selection;
selectedName.value = data.selection.map((item) => item.system_account);
};
const clearSelected = () => {
dataTable.value.clearTable();
};
onBeforeMount(() => {}); onBeforeMount(() => {});
</script> </script>
......
src/page/main/authority/organization/org-detail/index.vue
View file @ 47340c01
...@@ -149,7 +149,7 @@ const formatFile = (url) => { ...@@ -149,7 +149,7 @@ const formatFile = (url) => {
const getDetail = () => { const getDetail = () => {
axios axios
.get(`/apaas/system/v5/org/detail?organization_id=${route.query.id}&key_word=&state=&limit=&page=&data_type=1`) .get(`/v1/api/org/detail?organization_id=${route.query.id}&key_word=&state=&limit=&page=&data_type=1`)
.then((res) => { .then((res) => {
if (res.data.code == 200) { if (res.data.code == 200) {
const detail = res.data.data.org_info; const detail = res.data.data.org_info;
......
src/page/main/authority/organization/org-form.vue
View file @ 47340c01
...@@ -22,16 +22,6 @@ ...@@ -22,16 +22,6 @@
<el-form-item label="组织介绍" prop="description"> <el-form-item label="组织介绍" prop="description">
<el-input type="textarea" :rows="3" v-model="orgForm.description" maxlength="300" show-word-limit /> <el-input type="textarea" :rows="3" v-model="orgForm.description" maxlength="300" show-word-limit />
</el-form-item> </el-form-item>
<el-form-item label="组织附件" prop="logo">
<bg-upload
v-model="orgForm.attachment"
customTips
:limit="3"
:fileTypes="['zip', 'rar', 'doc', 'docx', 'xlsx', 'xls', 'png', 'jpg']"
:otherInfo="'最多可上传三个附件，可上传zip，rar，doc，docx，xlsx，xls，png，jpg，可上传营业执照和相关协议文件等'">
<span>将文件拖到此处，或 点击上传</span>
</bg-upload>
</el-form-item>
</el-form> </el-form>
</template> </template>
...@@ -51,7 +41,6 @@ const orgForm = reactive({ ...@@ -51,7 +41,6 @@ const orgForm = reactive({
name: "", name: "",
organization_code: "", organization_code: "",
description: "", description: "",
attachment: [],
}); });
const checkCode = (rule, value, callback) => { const checkCode = (rule, value, callback) => {
...@@ -115,7 +104,7 @@ const treeProps = { ...@@ -115,7 +104,7 @@ const treeProps = {
disabled: "disabled", disabled: "disabled",
}; };
const getOrgTree = () => { const getOrgTree = () => {
axios.get(`/apaas/system/v5/org/tree`).then((res) => { axios.get(`/v1/api/org/tree`).then((res) => {
if (res.data.code == 200) { if (res.data.code == 200) {
const orgDataTemp = res.data.data || []; const orgDataTemp = res.data.data || [];
orgDataTemp.shift(); orgDataTemp.shift();
......
src/page/main/authority/organization/org-user/org-account-form.vue
View file @ 47340c01
...@@ -198,7 +198,7 @@ const treeProps = { ...@@ -198,7 +198,7 @@ const treeProps = {
value: "organization_id", value: "organization_id",
}; };
const getOrgTree = () => { const getOrgTree = () => {
axios.get(`/apaas/system/v5/org/tree`).then((res) => { axios.get(`/v1/api/org/tree`).then((res) => {
if (res.data.code == 200) { if (res.data.code == 200) {
orgData.value = res.data.data || []; orgData.value = res.data.data || [];
} else { } else {
......
src/page/main/authority/organization/platform-user/index.vue
View file @ 47340c01
...@@ -211,7 +211,7 @@ const cancel = () => { ...@@ -211,7 +211,7 @@ const cancel = () => {
}; };
const getOrgTree = () => { const getOrgTree = () => {
axios.get(`/apaas/system/v5/org/tree`).then((res) => { axios.get(`/v1/api/org/tree`).then((res) => {
if (res.data.code == 200) { if (res.data.code == 200) {
orgId.value = res.data.data[0].organization_id; orgId.value = res.data.data[0].organization_id;
} else { } else {
......
src/page/main/authority/organization/tree.vue
View file @ 47340c01
...@@ -20,10 +20,7 @@ ...@@ -20,10 +20,7 @@
@click.stop="showAction($event, data, node)"> @click.stop="showAction($event, data, node)">
<bg-icon class="tree-more" icon="#bg-ic-s-more"></bg-icon> <bg-icon class="tree-more" icon="#bg-ic-s-more"></bg-icon>
</span> </span>
<span <span v-else class="tree-action-box" @click.stop="showAction($event, data, node)">
v-else
class="tree-action-box"
@click.stop="showAction($event, data, node)">
<bg-icon class="tree-more" icon="#bg-ic-s-more"></bg-icon> <bg-icon class="tree-more" icon="#bg-ic-s-more"></bg-icon>
</span> </span>
</div> </div>
...@@ -141,8 +138,8 @@ ...@@ -141,8 +138,8 @@
</template> </template>
<script setup> <script setup>
import { reactive, toRefs, ref, computed, onBeforeMount, onBeforeUnmount, watch, nextTick } from "vue"; import { ref, onBeforeMount, onBeforeUnmount, nextTick } from "vue";
import { useRoute, useRouter } from "vue-router"; import { useRoute } from "vue-router";
import axios from "@/request/http.js"; import axios from "@/request/http.js";
import { ElMessage } from "element-plus"; import { ElMessage } from "element-plus";
const route = useRoute(); const route = useRoute();
...@@ -174,10 +171,9 @@ const defaultProps = { ...@@ -174,10 +171,9 @@ const defaultProps = {
}; };
const getOrgTree = (data) => { const getOrgTree = (data) => {
axios.get(`/apaas/system/v5/org/tree`).then((res) => { axios.get(`/v1/api/org/tree`).then((res) => {
if (res.data.code == 200) { if (res.data.code == 200) {
orgData.value = res.data.data || []; orgData.value = res.data.data || [];
console.log(route.query.id);
if (route.query.id) { if (route.query.id) {
searchItem(orgData.value, route.query.id); searchItem(orgData.value, route.query.id);
data = selectNodeObj.value; data = selectNodeObj.value;
......
src/page/main/forewarning/indicator-config/edit/index.vue
View file @ 47340c01
...@@ -29,7 +29,9 @@ const add_form = ref(null); ...@@ -29,7 +29,9 @@ const add_form = ref(null);
const SaveSubmit = async () => { const SaveSubmit = async () => {
let res = await add_form.value.Submit(); let res = await add_form.value.Submit();
if (!res) return; if (!res) return;
Save(res, { id, class_id }); Save(res, { id, class_id }, () => {
Cancle();
});
}; };
const Cancle = () => { const Cancle = () => {
router.go(-1); router.go(-1);
...@@ -43,7 +45,6 @@ const getInfoData = () => { ...@@ -43,7 +45,6 @@ const getInfoData = () => {
}) })
.then((res) => { .then((res) => {
if (res.data.code == 200) { if (res.data.code == 200) {
console.log(res.data.data);
let res_d = res.data.data; let res_d = res.data.data;
infoData.value = { infoData.value = {
name: res_d.metric_name, name: res_d.metric_name,
......
src/page/main/forewarning/indicator-config/modules/add-form.vue
View file @ 47340c01
...@@ -11,96 +11,13 @@ ...@@ -11,96 +11,13 @@
</div> </div>
</el-form-item> </el-form-item>
<el-form-item label="预警范围" prop=""> <el-form-item label="预警范围" prop="">
<el-form <warningScope
:model="state.form.warningScopeRows" :indicator_expression="state.form.indicator_expression"
ref="table_form_ref" ref="table_form_ref"
:rules="state.tableRules" :warningScopeRows="warningScopeRows" />
label-width="0"
style="width: 100%">
<el-table
:data="state.form.warningScopeRows"
stripe
border
empty-text="请输入表达式，根据表达式$...$自动生成表格">
<el-table-column
v-for="header in warningScopeHeaders"
:prop="header.prop"
:key="header.prop"
:label="header.label"
:width="header.width">
<template #default="{ $index }">
<div v-if="header.prop == 'indicator_tag'">
<el-form-item
:prop="`[${$index}].input_indicator_tag`"
:rules="state.tableRules.input_indicator_tag">
<div class="indictor-tag">
<el-popover popper-class="cascader-operation" placement="bottom-start">
<template #reference>
<el-input
v-model="state.form.warningScopeRows[$index].input_indicator_tag"
placeholder="请选择指标标签"
@input="getDataTree"></el-input>
</template>
<div class="is-loading" v-show="isLoading">
<el-icon>
<Loading />
</el-icon>
<span>加载中</span>
</div>
<el-cascader-panel
v-show="!isLoading"
:options="dataTree"
:props="indicator_tag_props"
@change="(val) => handleChange(val, $index)" />
</el-popover>
</div>
</el-form-item>
</div>
<div v-else-if="header.prop == 'cname'">
<el-form-item :prop="`[${$index}].cname`" :rules="state.tableRules.cname">
<el-input
style="flex: 1"
v-model="state.form.warningScopeRows[$index].cname"
:maxlength="20"
show-word-limit
placeholder="请输入中文名称">
</el-input>
</el-form-item>
</div>
<div v-else-if="header.prop == 'is_required'">
<el-form-item :prop="`[${$index}].is_required`" :rules="state.tableRules.is_required">
<el-select
v-model="state.form.warningScopeRows[$index].is_required"
placeholder="请选择"
style="flex: 1">
<el-option v-for="(value, key) in tableSelOptions" :key="key" :label="value" :value="key">
</el-option>
</el-select>
</el-form-item>
</div>
<div v-else-if="header.prop == 'is_linkage'">
<el-form-item :prop="`[${$index}].is_linkage`" :rules="state.tableRules.is_linkage">
<el-select
v-model="state.form.warningScopeRows[$index].is_linkage"
placeholder="请选择"
style="flex: 1">
<el-option v-for="(value, key) in tableSelOptions" :key="key" :label="value" :value="key">
</el-option>
</el-select>
</el-form-item>
</div>
</template>
</el-table-column>
</el-table>
</el-form>
</el-form-item> </el-form-item>
<el-form-item label="预警规则类型" prop="rule_type"> <el-form-item label="预警规则类型" prop="rule_type">
<el-select <el-select style="flex: 1" v-model="state.form.rule_type" placeholder="请选择" filterable>
style="flex: 1"
v-model="state.form.rule_type"
placeholder="请选择"
filterable
@change="changeRuleType">
<el-option v-for="(value, key) in ruleTypeOptions" :key="key" :label="value" :value="key"> </el-option> <el-option v-for="(value, key) in ruleTypeOptions" :key="key" :label="value" :value="key"> </el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
...@@ -137,28 +54,36 @@ ...@@ -137,28 +54,36 @@
</template> </template>
<script setup> <script setup>
import { reactive, ref, shallowReactive, computed, nextTick, watch } from "vue"; import { reactive, ref, computed, watch, onMounted } from "vue";
import gapTitle from "@/components/gap-title.vue"; import gapTitle from "@/components/gap-title.vue";
import ManualDistributionForm from "@/components/manual-distribution/form.vue"; import ManualDistributionForm from "@/components/manual-distribution/form.vue";
import { MAX_DAY, ONLY_INPUT_NUM } from "@/components/env.js"; import { MAX_DAY, ONLY_INPUT_NUM } from "@/components/env.js";
import { ElMessage } from "element-plus";
import axios from "@/request/http.js";
import warningScope from "./warning-scope.vue";
const props = defineProps({ const props = defineProps({
row: { row: {
type: Object, type: Object,
default: null, default: null,
}, },
}); });
const tableSelOptions = ["否", "是"]; // 预警规则类型下拉
const ruleTypeOptions = { const ruleTypeOptions = ref({});
empty: "空", const getRuleTypeOptions = () => {
"9f1e6170-65e8-4e14-9c17-6a7b87a900a7": "百分比范围", ruleTypeOptions.value = {
2: "毫秒范围", empty: "空",
3: "秒范围", 1: "百分比范围",
4: "个范围", 2: "毫秒范围",
5: "温度范围", 3: "秒范围",
4: "个范围",
5: "温度范围",
};
}; };
// 当前是否是编辑
const isEdit = computed(() => !!props.row); const isEdit = computed(() => !!props.row);
const history = computed(() => props.row?.manual_distribution_form || null); // 获取旧数据
const typrFormData = computed(() => props.row?.type_com_ref || null); const warningScopeRows = computed(() => props.row?.warningScopeRows || []);
// 持续时间单位
const unitOptions = { const unitOptions = {
s: { label: "秒", max: MAX_DAY * 24 * 3600 }, s: { label: "秒", max: MAX_DAY * 24 * 3600 },
m: { label: "分钟", max: MAX_DAY * 24 * 60 }, m: { label: "分钟", max: MAX_DAY * 24 * 60 },
...@@ -172,7 +97,6 @@ const state = reactive({ ...@@ -172,7 +97,6 @@ const state = reactive({
time: 10, time: 10,
unit: "s", unit: "s",
inspection_cycle: 1, inspection_cycle: 1,
warningScopeRows: [],
state: 1, state: 1,
}, },
rules: { rules: {
...@@ -180,124 +104,8 @@ const state = reactive({ ...@@ -180,124 +104,8 @@ const state = reactive({
indicator_expression: [{ required: true, message: "请输入指标表达式", trigger: "blur" }], indicator_expression: [{ required: true, message: "请输入指标表达式", trigger: "blur" }],
time: [{ required: true, message: "请输入持续时间", trigger: "blur" }], time: [{ required: true, message: "请输入持续时间", trigger: "blur" }],
}, },
tableRules: {
input_indicator_tag: [{ required: true, message: "请选择", trigger: "blur" }],
cname: [{ required: true, message: "请输入", trigger: "blur" }],
},
}); });
const warningScopeHeaders = [ // 当预警持续输入限制
{
prop: "key",
label: "变量名称",
width: 100,
},
{
prop: "indicator_tag",
label: "指标标签",
},
{
prop: "cname",
label: "中文名称",
},
{
prop: "is_required",
label: "是否必填",
width: 150,
},
{
prop: "is_linkage",
label: "是否联动",
width: 150,
},
];
const dataTree = ref([]);
const isLoading = ref(false);
const getDataTree = () => {
isLoading.value = true;
setTimeout(() => {
const res = {
code: 200,
msg: "OK",
data: [
{
name: "http_requests_total",
children: [
{
name: "instance",
value: "localhost:2023",
},
{
name: "job",
value: "prometheus",
},
{
name: "method",
value: "GET",
},
],
},
{
name: "system_monitor_counter",
children: [
{
name: "instance",
value: "localhost:2023",
},
{
name: "job",
value: "prometheus",
},
{
name: "system_id",
value: "YW230177",
},
{
name: "user_id",
value: "xc-admin",
},
],
},
],
};
dataTree.value = res.data;
isLoading.value = false;
}, 2000);
};
const handleChange = async (val, index) => {
state.form.warningScopeRows[index].indicator_scope = val[0];
state.form.warningScopeRows[index].input_indicator_tag = val[1];
state.form.warningScopeRows[index].indicator_tag = val[1];
};
const indicator_tag_props = {
value: "name",
label: "name",
};
const tableCreateKeys = ref([]);
watch(
() => state.form.indicator_expression,
(n) => {
tableCreateKeys.value = n?.match(/\$(.+?)\$/g) || [];
let arr = [];
tableCreateKeys.value.forEach((e) => {
let i = state.form.warningScopeRows.findIndex((el) => el.key == e);
arr.push(
i != -1
? state.form.warningScopeRows[i]
: {
key: e,
input_indicator_tag: "",
indicator_scope: "",
indicator_tag: "",
cname: "",
is_required: 1,
is_linkage: 0,
}
);
});
state.form.warningScopeRows = arr;
}
);
const inputNum = () => { const inputNum = () => {
state.form.time = state.form.time.replace(/[^\d]/g, ""); state.form.time = state.form.time.replace(/[^\d]/g, "");
let time = +state.form.time; let time = +state.form.time;
...@@ -306,40 +114,31 @@ const inputNum = () => { ...@@ -306,40 +114,31 @@ const inputNum = () => {
state.form.time = max; state.form.time = max;
} }
}; };
// 检查周期下拉数据
const inspectionCycleOptions = ref([1, 3, 5, 10, 20]); const inspectionCycleOptions = ref([1, 3, 5, 10, 20]);
// form表单元素
const form_ref = ref(null); const form_ref = ref(null);
// table的form表单元素
const table_form_ref = ref(null); const table_form_ref = ref(null);
// 提交调用
const Submit = async () => { const Submit = async () => {
let form_valid = await new Promise((resolve, reject) => { let form_valid = await new Promise((resolve, reject) => {
form_ref.value.validate((res) => resolve(res)); form_ref.value.validate((res) => resolve(res));
}); });
let table_form_valid = await new Promise((resolve, reject) => { let table_form_valid = await table_form_ref.value.Submit();
table_form_ref.value.validate((res) => resolve(res));
});
if (form_valid && table_form_valid) { if (form_valid && table_form_valid) {
return { return {
...state.form, ...state.form,
...table_form_ref.value?.form,
}; };
} }
return; return;
}; };
const changeRuleType = () => {}; // 监听是否是编辑，是则插入原数据
watch( watch(
() => props.row, () => props.row,
async (n) => { async (n) => {
if (!n) return; if (!n) return;
state.form.warningScopeRows =
n.warningScopeRows?.map((e) => {
return {
key: e.key,
input_indicator_tag: e.input_indicator_tag,
indicator_scope: e.indicator_scope,
indicator_tag: e.indicator_tag,
cname: e.cname,
is_required: e.is_required || 1,
is_linkage: e.is_linkage || 0,
};
}) || [];
state.form.name = n.name; state.form.name = n.name;
state.form.rule_type = n.rule_type || "empty"; state.form.rule_type = n.rule_type || "empty";
state.form.inspection_cycle = n.inspection_cycle || 1; state.form.inspection_cycle = n.inspection_cycle || 1;
...@@ -350,6 +149,10 @@ watch( ...@@ -350,6 +149,10 @@ watch(
}, },
{ deep: true, immediate: true } { deep: true, immediate: true }
); );
// 获取第一级指标范围列表
onMounted(() => {
getRuleTypeOptions();
});
defineExpose({ defineExpose({
Submit, Submit,
}); });
...@@ -385,6 +188,7 @@ defineExpose({ ...@@ -385,6 +188,7 @@ defineExpose({
} }
.no-el-label { .no-el-label {
:deep(.el-form-item__content) { :deep(.el-form-item__content) {
margin-left: 0 !important;
.el-select { .el-select {
width: 80px; width: 80px;
} }
...@@ -403,21 +207,6 @@ defineExpose({ ...@@ -403,21 +207,6 @@ defineExpose({
} }
} }
} }
.no-el-label {
:deep(.el-form-item__content) {
margin-left: 0 !important;
}
}
.manual-distribution-form {
:deep(.el-form-item) {
&:not(:last-child) {
margin-bottom: 18px;
}
}
}
.indictor-tag {
width: 100%;
}
</style> </style>
<style lang="scss"> <style lang="scss">
.el-form-item { .el-form-item {
...@@ -430,40 +219,4 @@ defineExpose({ ...@@ -430,40 +219,4 @@ defineExpose({
min-height: 34px; min-height: 34px;
} }
} }
.cascader-operation {
width: auto !important;
padding: 0 !important;
min-width: 180px !important;
position: relative;
min-height: 204px;
.is-loading {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
svg {
animation: rotate 3s linear infinite;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
}
.el-scrollbar {
border-radius: 0;
}
.el-cascader-panel {
border: 0 !important;
box-shadow: none !important;
}
}
</style> </style>
src/page/main/forewarning/indicator-config/modules/interface.js
View file @ 47340c01
...@@ -2,7 +2,7 @@ import { ElMessage } from "element-plus"; ...@@ -2,7 +2,7 @@ import { ElMessage } from "element-plus";
import axios from "@/request/http.js"; import axios from "@/request/http.js";
const setParams = (res, { id, class_id }) => { const setParams = (res, { id, class_id }) => {
let params = { let params = {
class_id, class_id: +class_id,
metric_name: res.name, metric_name: res.name,
expr: res.indicator_expression, expr: res.indicator_expression,
alert_range: res.warningScopeRows.map((e) => { alert_range: res.warningScopeRows.map((e) => {
......
src/page/main/forewarning/indicator-config/modules/warning-scope.vue 0 → 100644
View file @ 47340c01
<template>
<el-form :model="state.form.warningScopeRows" ref="form_ref" :rules="tableRules" label-width="0" style="width: 100%">
<el-table :data="state.form.warningScopeRows" stripe border empty-text="请输入表达式，根据表达式$...$自动生成表格">
<el-table-column
v-for="header in warningScopeHeaders"
:prop="header.prop"
:key="header.prop"
:label="header.label"
:width="header.width">
<template #default="{ $index }">
<div v-if="header.prop == 'indicator_tag'">
<el-form-item :prop="`[${$index}].input_indicator_tag`" :rules="tableRules.input_indicator_tag">
<div class="indictor-tag">
<el-popover
:visible="state.form.warningScopeRows[$index].visible"
popper-class="cascader-operation"
placement="bottom-start">
<template #reference>
<el-input
v-model="state.form.warningScopeRows[$index].input_indicator_tag"
placeholder="请选择指标标签"
:ref="
(i_el) => {
inputRef[$index] = i_el;
}
"
@blur="blurInput($index)"
@focus="inputLabel($index, false)"
@input="inputLabel($index, true)"></el-input>
</template>
<div class="filter-first-tree-lists">
<ul class="bg-scroll" v-show="dataTree($index).length > 0">
<li
v-for="data in dataTree($index)"
:key="data"
:class="{ active: state.form.warningScopeRows[$index].indicator_scope == data.label }">
<div class="first-label-main" @click="chooseTreeFirst($index, data)">
<div class="tree-label">{{ data.label }}</div>
<div class="tree-icon">
<bg-icon
style="font-size: 16px; color: #404a62"
class="is-loading"
:class="{ 'loading-show': data.isLoading }"
icon="#bg-ic-loading"></bg-icon>
<bg-icon style="font-size: 14px; color: #404a62" icon="#bg-ic-arrow-right"></bg-icon>
</div>
</div>
</li>
</ul>
<ul v-show="dataTree($index).length == 0">
<li class="no-data">未查询到相关指标范围数据</li>
</ul>
<ul class="bg-scroll" v-show="state.form.warningScopeRows[$index].lastOptions?.length > 0">
<li
v-for="child in state.form.warningScopeRows[$index].lastOptions"
:key="child"
@click="chooseTreeLast(child, $index, false)"
:class="{ active: state.form.warningScopeRows[$index].indicator_tag == child }">
{{ child }}
</li>
</ul>
</div>
</el-popover>
</div>
</el-form-item>
</div>
<div v-else-if="header.prop == 'cname'">
<el-form-item :prop="`[${$index}].cname`" :rules="tableRules.cname">
<el-input
style="flex: 1"
v-model="state.form.warningScopeRows[$index].cname"
:maxlength="20"
show-word-limit
placeholder="请输入中文名称">
</el-input>
</el-form-item>
</div>
<div v-else-if="header.prop == 'is_required'">
<el-form-item :prop="`[${$index}].is_required`" :rules="tableRules.is_required">
<el-select v-model="state.form.warningScopeRows[$index].is_required" placeholder="请选择" style="flex: 1">
<el-option v-for="(value, key) in tableSelOptions" :key="key" :label="value" :value="key"> </el-option>
</el-select>
</el-form-item>
</div>
<div v-else-if="header.prop == 'is_linkage'">
<el-form-item :prop="`[${$index}].is_linkage`" :rules="tableRules.is_linkage">
<el-select v-model="state.form.warningScopeRows[$index].is_linkage" placeholder="请选择" style="flex: 1">
<el-option v-for="(value, key) in tableSelOptions" :key="key" :label="value" :value="key"> </el-option>
</el-select>
</el-form-item>
</div>
</template>
</el-table-column>
</el-table>
</el-form>
</template>
<script setup>
import { reactive, watch, nextTick, computed, ref, onMounted } from "vue";
import { ElMessage } from "element-plus";
import axios from "@/request/http.js";
const props = defineProps({
indicator_expression: {
type: String,
default: "",
},
warningScopeRows: {
type: Array,
default: () => [],
},
});
// 是否是必填和是否联动下拉数据
const tableSelOptions = ["否", "是"];
// 表格表头
const warningScopeHeaders = [
{
prop: "key",
label: "变量名称",
width: 100,
},
{
prop: "indicator_tag",
label: "指标标签",
},
{
prop: "cname",
label: "中文名称",
},
{
prop: "is_required",
label: "是否必填",
width: 150,
},
{
prop: "is_linkage",
label: "是否联动",
width: 150,
},
];
// 表单数据
const state = reactive({
form: {
warningScopeRows: [],
},
});
// 表单验证
const tableRules = {
input_indicator_tag: [{ required: true, message: "请输入", trigger: "blur" }],
cname: [{ required: true, message: "请输入", trigger: "blur" }],
};
// 获取到的第一级指标范围基础数据集合
const dataTreeDefault = ref([]);
// 是否是输入触发
const isInput = ref(false);
// 当前操作的表格下标
const activeIndex = ref(-1);
// 指标输入框元素集合
const inputRef = ref([]);
// 下拉数据处理
const dataTree = computed(() => {
return (index) => {
const { firstOptions, input_indicator_tag, oldQuery } = state.form.warningScopeRows[index];
let query = isInput.value ? input_indicator_tag : oldQuery;
if (!query) return firstOptions;
let arr = firstOptions.filter((e) => e.label.includes(query));
if (arr == "") {
state.form.warningScopeRows[index].lastOptions = [];
state.form.warningScopeRows[index].indicator_scope = "";
}
return arr;
};
});
// 监听父组件传过来的指标表达式
watch(
() => props.indicator_expression,
async (n) => {
await nextTick();
let tableCreateKeys = n?.match(/\$(.+?)\$/g) || [];
let arr = [];
tableCreateKeys.forEach((e) => {
let i = state.form.warningScopeRows.findIndex((el) => el.key == e);
if (i >= 0) {
arr[i] = state.form.warningScopeRows[i];
} else {
arr.push({
key: e,
input_indicator_tag: "",
indicator_scope: "",
indicator_tag: "",
oldQuery: "",
firstOptions: dataTreeDefault.value,
lastOptions: [],
cname: "",
visible: false,
is_required: 1,
is_linkage: 0,
});
}
});
state.form.warningScopeRows = arr;
}
);
// 监听编辑的原数据，并显示
watch(
() => props.warningScopeRows,
(n) => {
state.form.warningScopeRows =
n?.map((e) => {
return {
key: e.key,
input_indicator_tag: e.input_indicator_tag,
indicator_scope: e.indicator_scope,
indicator_tag: e.indicator_tag,
firstOptions: dataTreeDefault.value,
lastOptions: [],
oldQuery: "",
visible: false,
cname: e.cname,
is_required: e.is_required,
is_linkage: e.is_linkage,
};
}) || [];
},
{
deep: true,
immediate: true,
}
);
// 选择第一级，获取第二级数据
const chooseTreeFirst = (index, data) => {
inputRef.value[index].focus();
state.form.warningScopeRows[activeIndex.value].indicator_tag = "";
state.form.warningScopeRows[index].indicator_scope = data.label;
data.isLoading = true;
state.form.warningScopeRows[index].lastOptions = [];
const params = {
label_name: data.label,
};
axios
.get("/v1/api/prometheus", { params })
.then((res) => {
if (res.data.code == 200) {
state.form.warningScopeRows[index].lastOptions = res.data.data?.list || [];
} else {
ElMessage.error(res.data.msg);
}
})
.finally(() => {
data.isLoading = false;
});
};
// 获取第一级数据
const getDataTreeLevelFirst = () => {
axios.get("/v1/api/prometheus").then((res) => {
if (res.data.code == 200) {
dataTreeDefault.value =
res.data.data.list.map((e) => {
return {
label: e,
isLoading: false,
};
}) || [];
} else {
ElMessage.error(res.data.msg);
}
});
};
let timer = null;
// 输入模糊查询数据
const inputLabel = (index, type) => {
state.form.warningScopeRows[index].visible = true;
activeIndex.value = index;
isInput.value = type;
if (state.form.warningScopeRows[index].input_indicator_tag == "") {
state.form.warningScopeRows[index].lastOptions = [];
}
// 用户输入节流
timer && clearTimeout(timer);
timer = setTimeout(() => {
if (type) {
state.form.warningScopeRows[index].oldQuery = state.form.warningScopeRows[index].input_indicator_tag;
state.form.warningScopeRows[index].indicator_scope = "";
state.form.warningScopeRows[index].indicator_tag = "";
state.form.warningScopeRows[index].lastOptions = [];
}
}, 200);
};
// 失去焦点是隐藏popper
const blurInput = (index) => {
state.form.warningScopeRows[index].visible = false;
};
// 选择范围中的属性
const chooseTreeLast = (last, index, type) => {
isInput.value = type;
state.form.warningScopeRows[activeIndex.value].input_indicator_tag = last;
state.form.warningScopeRows[activeIndex.value].indicator_tag = last;
};
// form表单元素
const form_ref = ref(null);
// 提交操作调用
const Submit = async () => {
let form_valid = await new Promise((resolve, reject) => {
form_ref.value.validate((res) => resolve(res));
});
let isFull = true;
try {
state.form.warningScopeRows.forEach((e, i) => {
if (e.indicator_scope == "" || e.indicator_tag == "") {
throw new Error(`第${i}条数据的指标没有选择！`);
}
});
} catch (e) {
if (e) {
ElMessage.error(e);
isFull = false;
}
}
return form_valid && isFull;
};
// 获取第一级指标范围列表
onMounted(() => {
getDataTreeLevelFirst();
});
defineExpose({
Submit,
form: state.form,
form_ref,
});
</script>
<style lang="scss" scoped>
.indictor-tag {
width: 100%;
}
</style>
<style lang="scss">
.cascader-operation {
width: auto !important;
padding: 0 !important;
min-width: 180px !important;
position: relative;
min-height: 204px;
.el-scrollbar {
border-radius: 0;
}
.filter-first-tree-lists {
height: 240px;
display: flex;
ul {
min-width: 180px;
height: 100%;
&:not(:first-child) {
border-left: 1px solid #ddd;
}
li {
padding-left: 20px;
line-height: 34px;
max-width: 400px;
word-break: break-all;
transition: all 300ms;
&:hover {
background-color: #f1f1f1;
}
cursor: pointer;
&.active {
font-weight: bold;
background-color: #f1f1f1;
}
}
}
.first-label-main {
padding-right: 48px;
position: relative;
.tree-label {
width: 100%;
}
.tree-icon {
width: 40px;
height: 100%;
position: absolute;
right: 0;
top: 0;
display: flex;
align-items: center;
svg {
width: 20px;
}
.is-loading {
animation: rotate 3s linear infinite;
opacity: 0;
&.loading-show {
opacity: 1;
}
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
}
}
.no-data {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: gray;
box-sizing: border-box;
padding: 0 20px;
}
}
}
</style>
src/page/main/forewarning/list/index.vue
View file @ 47340c01
...@@ -155,26 +155,24 @@ ...@@ -155,26 +155,24 @@
v-model="closeWarningDialog" v-model="closeWarningDialog"
width="400px" width="400px"
:before-close="cancelCloseWarningDialog"> :before-close="cancelCloseWarningDialog">
<div style="padding-top: 20px"> <el-form ref="closeForm" :model="closeFormData" :rules="closeRules" label-width="80px" class="bg_form">
<el-form ref="closeForm" :model="closeFormData" :rules="closeRules" label-width="80px" class="bg_form"> <el-form-item label="关闭备注" prop="close_notes">
<el-form-item label="关闭备注" prop="close_notes"> <el-input
<el-input v-model="closeFormData.close_notes"
v-model="closeFormData.close_notes" type="textarea"
type="textarea" :autosize="{ minRows: 2 }"
:autosize="{ minRows: 2 }" show-word-limit
show-word-limit maxlength="30"
maxlength="30" resize="vertical"
resize="vertical" placeholder="请输入内容"></el-input>
placeholder="请输入内容"></el-input> </el-form-item>
</el-form-item> <el-form-item label="" class="no-el-label" prop="close_remind" style="margin-bottom: 0px">
<el-form-item label="" class="no-el-label" prop="close_remind" style="margin-bottom: 0px"> <el-checkbox v-model="closeFormData.close_remind">
<el-checkbox v-model="closeFormData.close_remind"> <div>三天内将不再自动推送该告警信息给处置人员，</div>
<div>三天内将不再自动推送该告警信息给处置人员，</div> <div>可手动推送，但告警数据依然会出现</div>
<div>可手动推送，但告警数据依然会出现</div> </el-checkbox>
</el-checkbox> </el-form-item>
</el-form-item> </el-form>
</el-form>
</div>
<template v-slot:footer> <template v-slot:footer>
<div class="apaas_button"> <div class="apaas_button">
<el-button type="default" @click="cancelCloseWarningDialog">取消</el-button> <el-button type="default" @click="cancelCloseWarningDialog">取消</el-button>
......
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