|
|
@@ -5,254 +5,254 @@
|
|
|
@Date: 2021-05-20 13:33
|
|
|
-->
|
|
|
<template>
|
|
|
- <dg-row :gutter="10" class="func-wapper">
|
|
|
- <dg-col :span="10">
|
|
|
- <dg-card shadow="never" is-more>
|
|
|
- <template slot="header">
|
|
|
- <div class="func-wapper__title">
|
|
|
- <span>功能资源信息</span>
|
|
|
- <dg-button type="primary" icon="el-icon-circle-plus-outline" @click="handleAddSource"
|
|
|
- >新增根功能</dg-button
|
|
|
- >
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <menu-tree
|
|
|
- :isNeedRightMenu="true"
|
|
|
- apiName="menuTree"
|
|
|
- :reportForm="{ appId: app.id }"
|
|
|
- @handleGetNode="handleGetNode"
|
|
|
- @selectOperaOptions="selectOperaOptions"
|
|
|
- :key="timer"
|
|
|
- ref="myMenuTree"
|
|
|
- ></menu-tree>
|
|
|
- </dg-card>
|
|
|
- </dg-col>
|
|
|
- <dg-col :span="14">
|
|
|
- <dg-card shadow="never" header="功能详细信息">
|
|
|
- <div v-show="isShowForm">
|
|
|
- <el-form ref="form" label-position="right" :model="form" label-width="150px" :rules="rules">
|
|
|
- <el-form-item label="功能编号：" prop="code">
|
|
|
- <el-input v-model="form.code" placeholder=""></el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="功能名称：" prop="name">
|
|
|
- <el-input v-model="form.name" placeholder=""></el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="上级功能：" prop="parentId">
|
|
|
- <dg-tree-drop
|
|
|
- ref="tree"
|
|
|
- icon-class="el-icon-folder-opened"
|
|
|
- icon-leaf="el-icon-document"
|
|
|
- v-model="form.parentId"
|
|
|
- :props="parentTreeProps"
|
|
|
- :data="treeData"
|
|
|
- :placeholder="form.isRoot?'':'请选择'"
|
|
|
- :disabled="form.isRoot"
|
|
|
- clearable
|
|
|
- filterable
|
|
|
- style="width: 100%"
|
|
|
- >
|
|
|
- </dg-tree-drop
|
|
|
- ></el-form-item>
|
|
|
- <el-form-item label="所属应用：" prop="appName">
|
|
|
- <el-input v-model="form.appName" placeholder="" disabled></el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="设计安全隐私类别：" prop="designSecureType">
|
|
|
- <dg-select
|
|
|
- v-model="form.designSecureType"
|
|
|
- placeholder=""
|
|
|
- enum="SecurityPrivacyEnum"
|
|
|
- ></dg-select>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="在用状态：" prop="isActive">
|
|
|
- <dg-select enum="AppFunStatusEnum" v-model="form.isActive"></dg-select>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="功能使用场景代码：" prop="functionUsageScenarios">
|
|
|
- <el-input v-model="form.functionUsageScenarios" placeholder=""></el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="功能说明：" prop="remark">
|
|
|
- <el-input v-model="form.remark" placeholder="" type="textarea" :rows="3"></el-input>
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
- <div class="func-wapper__btn-save">
|
|
|
- <dg-button type="primary" @click="handleSave">保存</dg-button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </dg-card>
|
|
|
- </dg-col>
|
|
|
- </dg-row>
|
|
|
+ <dg-row :gutter="10" class="func-wapper">
|
|
|
+ <dg-col :span="10">
|
|
|
+ <dg-card shadow="never" is-more>
|
|
|
+ <template slot="header">
|
|
|
+ <div class="func-wapper__title">
|
|
|
+ <span>功能资源信息</span>
|
|
|
+ <dg-button type="primary" @click="handleAddSource">新增根功能</dg-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <menu-tree
|
|
|
+ :isNeedRightMenu="true"
|
|
|
+ apiName="menuTree"
|
|
|
+ :reportForm="{ appId: app.id }"
|
|
|
+ @handleGetNode="handleGetNode"
|
|
|
+ @selectOperaOptions="selectOperaOptions"
|
|
|
+ :key="timer"
|
|
|
+ ref="myMenuTree"
|
|
|
+ ></menu-tree>
|
|
|
+ </dg-card>
|
|
|
+ </dg-col>
|
|
|
+ <dg-col :span="14">
|
|
|
+ <dg-card shadow="never" header="功能详细信息">
|
|
|
+ <div style="height: 550px">
|
|
|
+ <div v-show="isShowForm">
|
|
|
+ <el-form ref="form" label-position="right" :model="form" label-width="150px" :rules="rules">
|
|
|
+ <el-form-item label="功能编号：" prop="code">
|
|
|
+ <el-input v-model="form.code" placeholder=""></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="功能名称：" prop="name">
|
|
|
+ <el-input v-model="form.name" placeholder=""></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="上级功能：" prop="parentId">
|
|
|
+ <dg-tree-drop
|
|
|
+ ref="tree"
|
|
|
+ icon-class="el-icon-folder-opened"
|
|
|
+ icon-leaf="el-icon-document"
|
|
|
+ v-model="form.parentId"
|
|
|
+ :props="parentTreeProps"
|
|
|
+ :data="treeData"
|
|
|
+ :placeholder="form.isRoot ? '' : '请选择'"
|
|
|
+ :disabled="form.isRoot"
|
|
|
+ clearable
|
|
|
+ filterable
|
|
|
+ style="width: 100%"
|
|
|
+ >
|
|
|
+ </dg-tree-drop
|
|
|
+ ></el-form-item>
|
|
|
+ <el-form-item label="所属应用：" prop="appName">
|
|
|
+ <el-input v-model="form.appName" placeholder="" disabled></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="设计安全隐私类别：" prop="designSecureType">
|
|
|
+ <dg-select v-model="form.designSecureType" placeholder="" enum="SecurityPrivacyEnum"></dg-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="在用状态：" prop="isActive">
|
|
|
+ <dg-select enum="AppFunStatusEnum" v-model="form.isActive"></dg-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="功能使用场景代码：" prop="functionUsageScenarios">
|
|
|
+ <el-input v-model="form.functionUsageScenarios" placeholder=""></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="功能说明：" prop="remark">
|
|
|
+ <el-input v-model="form.remark" placeholder="" type="textarea" :rows="3"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <div class="func-wapper__btn-save">
|
|
|
+ <dg-button type="primary" @click="handleSave">保存</dg-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </dg-card>
|
|
|
+ </dg-col>
|
|
|
+ <!-- <dg-button v-footer @click="handleClose">取消</dg-button> -->
|
|
|
+ </dg-row>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import MenuTree from "@/pages/common/menu-tree";
|
|
|
-import * as commonApi from "@/api/common";
|
|
|
-import * as Api from "@/api/func-resource";
|
|
|
+import MenuTree from '@/pages/common/menu-tree';
|
|
|
+import * as commonApi from '@/api/common';
|
|
|
+import * as Api from '@/api/func-resource';
|
|
|
export default {
|
|
|
- name: "",
|
|
|
- components: { MenuTree },
|
|
|
- // 接收父节点的参数
|
|
|
- props: {
|
|
|
- app: Object
|
|
|
+ name: '',
|
|
|
+ components: { MenuTree },
|
|
|
+ // 接收父节点的参数
|
|
|
+ props: {
|
|
|
+ app: Object
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ treeData(newV, OldV) {
|
|
|
+ if (newV && newV.length > 0) {
|
|
|
+ this.isShowForm = true;
|
|
|
+ } else {
|
|
|
+ this.isShowForm = false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ isShowForm: false,
|
|
|
+ treeData: [],
|
|
|
+ parentTreeProps: {
|
|
|
+ value: 'code',
|
|
|
+ label: 'name',
|
|
|
+ children: 'children'
|
|
|
+ },
|
|
|
+ form: {
|
|
|
+ appId: this.app.id,
|
|
|
+ appName: this.app.applyName,
|
|
|
+ code: '',
|
|
|
+ designSecureType: '',
|
|
|
+ functionUsageScenarios: '',
|
|
|
+ isActive: '',
|
|
|
+ name: '',
|
|
|
+ parentId: '',
|
|
|
+ remark: ''
|
|
|
+ },
|
|
|
+ rules: {
|
|
|
+ code: [{ required: true, message: '请输入功能编号', trigger: 'change' }],
|
|
|
+ name: [{ required: true, message: '请输入功能名称', trigger: 'change' }],
|
|
|
+ isActive: [{ required: true, message: '请选择在用状态', trigger: 'change' }],
|
|
|
+ appName: [{ required: true, message: '请选择应用', trigger: 'change' }]
|
|
|
+ },
|
|
|
+ timer: null,
|
|
|
+ type: null
|
|
|
+ };
|
|
|
+ },
|
|
|
+ // 方法
|
|
|
+ methods: {
|
|
|
+ handleClose() {
|
|
|
+ this.$emit("close");
|
|
|
},
|
|
|
- watch: {
|
|
|
- treeData(newV, OldV) {
|
|
|
- if (newV && newV.length > 0) {
|
|
|
- this.isShowForm = true;
|
|
|
- } else {
|
|
|
- this.isShowForm = false;
|
|
|
- }
|
|
|
- }
|
|
|
+ changeRuleTrigger(type) {
|
|
|
+ for (const key in this.rules) {
|
|
|
+ this.rules[key][0].trigger = type;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleGetNode(data) {
|
|
|
+ Api.detail(data.id).then((res) => {
|
|
|
+ this.form = res.data.content;
|
|
|
+ });
|
|
|
},
|
|
|
- data() {
|
|
|
- return {
|
|
|
- isShowForm: false,
|
|
|
- treeData: [],
|
|
|
- parentTreeProps: {
|
|
|
- value: "code",
|
|
|
- label: "name",
|
|
|
- children: "children"
|
|
|
- },
|
|
|
- form: {
|
|
|
- appId: this.app.id,
|
|
|
- appName: this.app.applyName,
|
|
|
- code: "",
|
|
|
- designSecureType: "",
|
|
|
- functionUsageScenarios: "",
|
|
|
- isActive: "",
|
|
|
- name: "",
|
|
|
- parentId: "",
|
|
|
- remark: ""
|
|
|
- },
|
|
|
- rules: {
|
|
|
- code: [{ required: true, message: "请输入功能编号", trigger: "change" }],
|
|
|
- name: [{ required: true, message: "请输入功能名称", trigger: "change" }],
|
|
|
- isActive: [{ required: true, message: "请选择在用状态", trigger: "change" }],
|
|
|
- appName: [{ required: true, message: "请选择应用", trigger: "change" }]
|
|
|
- },
|
|
|
- timer: null,
|
|
|
- type: null
|
|
|
+ selectOperaOptions({ type, nodedata, node }) {
|
|
|
+ this.type = type;
|
|
|
+ if (type === 'add') {
|
|
|
+ this.changeRuleTrigger('blur');
|
|
|
+ this.form = {
|
|
|
+ appId: this.app.id,
|
|
|
+ appName: this.app.applyName,
|
|
|
+ code: '',
|
|
|
+ designSecureType: '',
|
|
|
+ functionUsageScenarios: '',
|
|
|
+ isActive: '',
|
|
|
+ name: '',
|
|
|
+ parentId: nodedata.code || '',
|
|
|
+ remark: ''
|
|
|
};
|
|
|
+ } else if (type === 'delete') {
|
|
|
+ this.handleDel(nodedata.id);
|
|
|
+ }
|
|
|
},
|
|
|
- // 方法
|
|
|
- methods: {
|
|
|
- changeRuleTrigger(type) {
|
|
|
- for (const key in this.rules) {
|
|
|
- this.rules[key][0].trigger = type;
|
|
|
- }
|
|
|
- },
|
|
|
- handleGetNode(data) {
|
|
|
- Api.detail(data.id).then((res) => {
|
|
|
- this.form = res.data.content;
|
|
|
- });
|
|
|
- },
|
|
|
- selectOperaOptions({ type, nodedata, node }) {
|
|
|
- this.type = type;
|
|
|
- if (type === "add") {
|
|
|
- this.changeRuleTrigger("blur");
|
|
|
- this.form = {
|
|
|
- appId: this.app.id,
|
|
|
- appName: this.app.applyName,
|
|
|
- code: "",
|
|
|
- designSecureType: "",
|
|
|
- functionUsageScenarios: "",
|
|
|
- isActive: "",
|
|
|
- name: "",
|
|
|
- parentId: nodedata.code || "",
|
|
|
- remark: ""
|
|
|
- };
|
|
|
- } else if (type === "delete") {
|
|
|
- this.handleDel(nodedata.id);
|
|
|
+ // 新增
|
|
|
+ handleAddSource() {
|
|
|
+ this.isShowForm = true;
|
|
|
+ this.changeRuleTrigger('blur');
|
|
|
+ this.form = {
|
|
|
+ isRoot: true,
|
|
|
+ appId: this.app.id,
|
|
|
+ appName: this.app.applyName,
|
|
|
+ code: '',
|
|
|
+ designSecureType: '',
|
|
|
+ functionUsageScenarios: '',
|
|
|
+ isActive: '',
|
|
|
+ name: '',
|
|
|
+ parentId: '',
|
|
|
+ remark: ''
|
|
|
+ };
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 获取功能树
|
|
|
+ */
|
|
|
+ getFuncTree() {
|
|
|
+ commonApi.menuTree({ appId: this.app.id }).then((res) => {
|
|
|
+ this.treeData = res;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 刪除节点
|
|
|
+ handleDel(id) {
|
|
|
+ this.$confirm('删除功能将会删除该功能及其下级资源，确认删除？', '提示', {}).then(() => {
|
|
|
+ Api.del(id)
|
|
|
+ .then((res) => {
|
|
|
+ this.$refs.myMenuTree.remove();
|
|
|
+ this.timer = new Date().getTime(); // 刷新树组件
|
|
|
+ this.getFuncTree();
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ this.$message.error('删除失败！');
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ handleSave() {
|
|
|
+ // type=null 修改 type=add 新增 type=addRootSource新增根资源
|
|
|
+ this.changeRuleTrigger('change');
|
|
|
+ return new Promise((resolve) => {
|
|
|
+ this.$refs.form.validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ const { code, parentId } = this.form;
|
|
|
+ if (code == parentId) {
|
|
|
+ this.$message.error('上级资源不能是自己！');
|
|
|
+ return;
|
|
|
}
|
|
|
- },
|
|
|
- // 新增
|
|
|
- handleAddSource() {
|
|
|
- this.isShowForm = true;
|
|
|
- this.changeRuleTrigger("blur");
|
|
|
- this.form = {
|
|
|
- isRoot: true,
|
|
|
- appId: this.app.id,
|
|
|
- appName: this.app.applyName,
|
|
|
- code: "",
|
|
|
- designSecureType: "",
|
|
|
- functionUsageScenarios: "",
|
|
|
- isActive: "",
|
|
|
- name: "",
|
|
|
- parentId: "",
|
|
|
- remark: ""
|
|
|
- };
|
|
|
- },
|
|
|
- /**
|
|
|
- * 获取功能树
|
|
|
- */
|
|
|
- getFuncTree() {
|
|
|
- commonApi.menuTree({ appId: this.app.id }).then((res) => {
|
|
|
- this.treeData = res;
|
|
|
- });
|
|
|
- },
|
|
|
- // 刪除节点
|
|
|
- handleDel(id) {
|
|
|
- this.$confirm("删除功能将会删除该功能及其下级资源，确认删除？", "提示", {}).then(() => {
|
|
|
- Api.del(id)
|
|
|
- .then((res) => {
|
|
|
- this.$refs.myMenuTree.remove();
|
|
|
- this.timer = new Date().getTime(); // 刷新树组件
|
|
|
- this.getFuncTree();
|
|
|
- })
|
|
|
- .catch((err) => {
|
|
|
- this.$message.error("删除失败！");
|
|
|
- });
|
|
|
- });
|
|
|
- },
|
|
|
- handleSave() {
|
|
|
- // type=null 修改 type=add 新增 type=addRootSource新增根资源
|
|
|
- this.changeRuleTrigger("change");
|
|
|
- return new Promise((resolve) => {
|
|
|
- this.$refs.form.validate((valid) => {
|
|
|
- if (valid) {
|
|
|
- const { code, parentId } = this.form;
|
|
|
- if (code == parentId) {
|
|
|
- this.$message.error("上级资源不能是自己！");
|
|
|
- return;
|
|
|
- }
|
|
|
|
|
|
- const data= {...this.form} ;
|
|
|
- delete data.isRoot;
|
|
|
+ const data = { ...this.form };
|
|
|
+ delete data.isRoot;
|
|
|
|
|
|
- const api = this.form.id ? "update" : "save";
|
|
|
- Api[api](data)
|
|
|
- .then((res) => {
|
|
|
- this.$message.success("保存成功!");
|
|
|
- this.timer = new Date().getTime(); // 刷新树组件
|
|
|
- this.getFuncTree();
|
|
|
- this.$refs.form.resetFields();
|
|
|
- resolve("成功");
|
|
|
- })
|
|
|
- .catch((error) => {
|
|
|
- this.$message.error(error);
|
|
|
- });
|
|
|
- }
|
|
|
- });
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
- created() {
|
|
|
- this.getFuncTree();
|
|
|
+ const api = this.form.id ? 'update' : 'save';
|
|
|
+ Api[api](data)
|
|
|
+ .then((res) => {
|
|
|
+ this.$message.success('保存成功!');
|
|
|
+ this.timer = new Date().getTime(); // 刷新树组件
|
|
|
+ this.getFuncTree();
|
|
|
+ this.$refs.form.resetFields();
|
|
|
+ resolve('成功');
|
|
|
+ })
|
|
|
+ .catch((error) => {
|
|
|
+ this.$message.error(error);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
}
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.getFuncTree();
|
|
|
+ }
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scope>
|
|
|
.func-wapper {
|
|
|
- .warning-text {
|
|
|
- margin-top: 60px;
|
|
|
- color: #3598dc;
|
|
|
- }
|
|
|
- &__title {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- }
|
|
|
- &__btn-save {
|
|
|
- text-align: right;
|
|
|
- }
|
|
|
+ .warning-text {
|
|
|
+ margin-top: 60px;
|
|
|
+ color: #3598dc;
|
|
|
+ }
|
|
|
+ &__title {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+ &__btn-save {
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
林倩