Update operationModel.vue

src/views/platformManager/productManger/operationModel.vue

@@ -1,57 +1,76 @@
 <template>
   <div>
-    <el-form :model="productForm" ref="productForm" >
+    <el-form :model="productForm" ref="productForm">
       <el-alert
-          title="产品信息"
-          type="info"
-          :closable="false"
-          style="margin-bottom: 20px"
-        ></el-alert>
+        title="产品信息"
+        type="info"
+        :closable="false"
+        style="margin-bottom: 20px"
+      ></el-alert>
       <el-form-item
         label="产品名称"
         prop="name"
         :label-width="formLabelWidth"
         :rules="[{ required: true, message: '产品名称', trigger: 'blur' }]"
       >
-        <el-input clearable placeholder="请输入产品名称" v-model="productForm.name" />
+        <el-input
+          clearable
+          placeholder="请输入产品名称"
+          v-model="productForm.name"
+        />
       </el-form-item>
       <el-form-item
         label="产品描述"
         prop="remark"
         :label-width="formLabelWidth"
       >
-        <el-input clearable type="textarea" placeholder="请输入产品描述" v-model="productForm.remark" />
+        <el-input
+          clearable
+          type="textarea"
+          placeholder="请输入产品描述"
+          v-model="productForm.remark"
+        />
       </el-form-item>
       <el-alert
-          title="产品权限"
-          type="info"
-          :closable="false"
-          style="margin-bottom: 20px"
-        ></el-alert>
+        title="产品权限"
+        type="info"
+        :closable="false"
+        style="margin-bottom: 20px"
+      ></el-alert>
       <el-form-item label="搜索" style="margin-bottom: 0;">
-        <el-input style="width:210px"
-                  v-model.trim="seachRoleValue" clearable></el-input>
-        <el-button style="margin-left: 10px"
-                    type="danger"
-                    @click="seachRoles">搜索</el-button>
+        <el-input
+          style="width:210px"
+          v-model.trim="seachRoleValue"
+          clearable
+        ></el-input>
+        <el-button style="margin-left: 10px" type="danger" @click="seachRoles"
+          >搜索</el-button
+        >
         <!-- <el-button type="primary"
                     @click="onReSetRole">重置</el-button> -->
       </el-form-item>
-      <el-form-item style="max-height: 300px;overflow: hidden;overflow-y: auto;">
-        <el-checkbox :indeterminate="isIndeterminate"
-                      @change="onCheckAll"
-                      v-model.trim="checkAll">全选</el-checkbox>
+      <el-form-item
+        style="max-height: 300px;overflow: hidden;overflow-y: auto;"
+      >
+        <el-checkbox
+          :indeterminate="isIndeterminate"
+          @change="onCheckAll"
+          v-model.trim="checkAll"
+          >全选</el-checkbox
+        >
 
-        <el-tree :data="data"
-                  show-checkbox
-                  node-key="id"
-                  @check="onTreeCheck"
-                  :filter-node-method="filterNode"
-                  ref="tree"
-                  accordion
-                  highlight-current
-                  :default-checked-keys="result.menuIds"
-                  :props="defaultProps">
+        <el-tree
+          :data="data"
+          show-checkbox
+          node-key="id"
+          @check="onTreeCheck"
+          :filter-node-method="filterNode"
+          ref="tree"
+          accordion
+          highlight-current
+          :default-checked-keys="result.menuIds"
+          :props="defaultProps"
+        >
           <div slot-scope="{ node, data }">
             {{ node.label }}
             <!-- <el-tag v-if="data.type == 1"
@@ -63,8 +82,8 @@
   </div>
 </template>
 <script>
-import { platformProductUpdate,platformProductAdd } from "./api";
-import { getSilder } from '@/api/silder'
+import { platformProductUpdate, platformProductAdd } from "./api";
+import { getSilder } from "@/api/silder";
 export default {
   props: ["activeRow", "pageType"],
   data() {
@@ -73,156 +92,161 @@ export default {
         // menuId: "",
         name: "",
         remark: "",
-        id: null,
+        id: null
       },
       menuId: [], // 存修改时设置的编号
       formLabelWidth: "80px",
       isIndeterminate: false,
       data: [],
       defaultProps: {
-        children: 'children',
-        label: 'label'
+        children: "children",
+        label: "label"
       },
       result: {
         roleName: null,
-        roleDesc: null,
+        roleDesc: null
       },
       checkAll: false,
       splice: [],
       silderList: [],
       allChildIds: [], // 所有子编号
       slideCount: 0,
-      seachRoleValue: '', //权限搜索字段
-      filterIds: [4794, 4743, 3266, 3268, 3306, 3307, 3309, 3784, 4627]
+      seachRoleValue: "", //权限搜索字段
+      filterIds: [4794, 4743, 3306, 3307, 3309, 4627]
+      // filterIds: [4794, 4743, 3266, 3268, 3306, 3307, 3309, 3784, 4627]
       // 4229 公用权限
     };
   },
   mounted() {
-    const activeRow = this.activeRow
-    if(activeRow) {
+    const activeRow = this.activeRow;
+    if (activeRow) {
       this.productForm = {
         name: activeRow.name,
         remark: activeRow.remark,
-        id: activeRow.id,
-      }
-      this.menuId = activeRow.menuId ? activeRow.menuId.split(',').map(res => Number(res)) : []
+        id: activeRow.id
+      };
+      this.menuId = activeRow.menuId
+        ? activeRow.menuId.split(",").map(res => Number(res))
+        : [];
     }
 
-    if(this.pageType == 'create') {
+    if (this.pageType == "create") {
       this.$refs.tree.setCheckedKeys([4229]);
     }
 
-    this.lookSilder()
+    this.lookSilder();
   },
   methods: {
     async submitInfo(str) {
-      let tempIds = this.$refs.tree.getCheckedKeys()
-      let halfIds = this.$refs.tree.getHalfCheckedKeys()
-      let allIds = [...tempIds, ...halfIds]
-      this.$refs.productForm.validate(async (_) => {
+      let tempIds = this.$refs.tree.getCheckedKeys();
+      let halfIds = this.$refs.tree.getHalfCheckedKeys();
+      let allIds = [...tempIds, ...halfIds];
+      this.$refs.productForm.validate(async _ => {
         if (_) {
           if (str == "update") {
             try {
               const res = await platformProductUpdate({
                 name: this.productForm.name,
                 remark: this.productForm.remark,
-                menuId: allIds.join(','),
+                menuId: allIds.join(","),
                 id: this.productForm.id
               });
-                this.$message.success("修改成功");
-                this.$emit('close')
+              this.$message.success("修改成功");
+              this.$emit("close");
             } catch {}
-          }else if(str == "create"){
+          } else if (str == "create") {
             try {
               const res = await platformProductAdd({
                 name: this.productForm.name,
                 remark: this.productForm.remark,
-                menuId: allIds.join(',')
+                menuId: allIds.join(",")
               });
-                this.$message.success("新建成功");
-                this.$emit('close')
+              this.$message.success("新建成功");
+              this.$emit("close");
             } catch {}
           }
         }
       });
-
     },
-    async lookSilder () {
-      let silderList = await getSilder({ hid: 0 })
-      let tempData = []
+    async lookSilder() {
+      let silderList = await getSilder({ hid: 0 });
+      let tempData = [];
       if (silderList.code == 200) {
-        const silderData = silderList.data || []
-        let silderItem = []
-        silderData.forEach(item => { // 去掉公用权限
+        const silderData = silderList.data || [];
+        let silderItem = [];
+        silderData.forEach(item => {
+          // 去掉公用权限
           // if(item.permission != "publicAuthority") {
-            silderItem.push(item)
+          silderItem.push(item);
           // }
-        })
+        });
 
-        this.silderList = silderItem
+        this.silderList = silderItem;
 
-        tempData = this.setTableData(silderItem)
-        console.log(tempData)
-        this.data = tempData
+        tempData = this.setTableData(silderItem);
+        console.log(tempData);
+        this.data = tempData;
       }
-      if (this.pageType == 'update') {
-        let roleData = {}
+      if (this.pageType == "update") {
+        let roleData = {};
         // 是否是全部选中
-        this.checkAll = this.menuId.length >= this.slideCount
+        this.checkAll = this.menuId.length >= this.slideCount;
         // 是否是半选
-        this.isIndeterminate = this.menuId.length > 0 && this.menuId.length < this.slideCount
-        let tSplice = this.getParent(this.menuId, tempData)
-        roleData.menuIds = tSplice
-        this.result = roleData
+        this.isIndeterminate =
+          this.menuId.length > 0 && this.menuId.length < this.slideCount;
+        let tSplice = this.getParent(this.menuId, tempData);
+        roleData.menuIds = tSplice;
+        this.result = roleData;
       } else {
-        this.onReSet()
+        this.onReSet();
       }
     },
-    onTreeCheck () {
-      let checkTree = this.$refs.tree.getCheckedKeys()
-      this.checkAll = checkTree.length >= this.slideCount
-      this.isIndeterminate = checkTree.length > 0 && checkTree.length < this.slideCount
+    onTreeCheck() {
+      let checkTree = this.$refs.tree.getCheckedKeys();
+      this.checkAll = checkTree.length >= this.slideCount;
+      this.isIndeterminate =
+        checkTree.length > 0 && checkTree.length < this.slideCount;
     },
-    onCheckAll (val) {
+    onCheckAll(val) {
       if (val) {
         // 先去掉半选
-        this.isIndeterminate = false
-        this.$refs.tree.setCheckedNodes(this.data)
+        this.isIndeterminate = false;
+        this.$refs.tree.setCheckedNodes(this.data);
       } else {
-        this.$refs.tree.setCheckedNodes([])
+        this.$refs.tree.setCheckedNodes([]);
       }
     },
 
     //递归获取到所有的为子级的ID
-    getParent (checkIds, data) {
-      let removeIds = JSON.parse(JSON.stringify(checkIds))
-      this.getAllChildIds(data)
-      let tempAllChildIds = this.allChildIds
+    getParent(checkIds, data) {
+      let removeIds = JSON.parse(JSON.stringify(checkIds));
+      this.getAllChildIds(data);
+      let tempAllChildIds = this.allChildIds;
       for (let i = checkIds.length; i > 0; i--) {
         if (!tempAllChildIds.includes(checkIds[i - 1])) {
-          removeIds.splice(i - 1, 1)
+          removeIds.splice(i - 1, 1);
         }
       }
-      return removeIds
+      return removeIds;
     },
-    getAllChildIds (data) {
+    getAllChildIds(data) {
       // 获取所有最子集编号
-      let child = this.allChildIds
-      let tempList = []
+      let child = this.allChildIds;
+      let tempList = [];
       data.forEach((item, index) => {
-        let temp = []
+        let temp = [];
         if (item.children && item.children.length > 0) {
-          temp = this.getAllChildIds(item.children)
+          temp = this.getAllChildIds(item.children);
         } else {
-          child.push(item.id)
+          child.push(item.id);
         }
-      })
+      });
     },
-    setTableData (result) {
-      let list = []
+    setTableData(result) {
+      let list = [];
       list = result.map(res => {
-        if(!this.filterIds.includes(res.id)) {
-          let tempList = {}
+        if (!this.filterIds.includes(res.id)) {
+          let tempList = {};
           tempList = {
             id: res.id,
             name: res.name,
@@ -232,51 +256,51 @@ export default {
             permission: res.permission,
             icon: res.icon,
             parentId: res.parentId
-          }
-          this.slideCount++
+          };
+          this.slideCount++;
           if (res.sysMenus && res.sysMenus.length > 0) {
-            tempList.children = this.setTableData(res.sysMenus)
+            tempList.children = this.setTableData(res.sysMenus);
           }
-          return tempList
+          return tempList;
         }
-        return null
-      })
-      let tempList = []
+        return null;
+      });
+      let tempList = [];
       list.forEach(item => {
-        if(item) {
-          tempList.push(item)
+        if (item) {
+          tempList.push(item);
         }
-      })
-      return tempList
+      });
+      return tempList;
     },
-    onReSet () {
-      this.$refs.tree.setCheckedNodes([])
+    onReSet() {
+      this.$refs.tree.setCheckedNodes([]);
       this.result = {
         roleName: null,
-        roleDesc: null,
-      }
-      this.isIndeterminate = false
-      this.checkAll = false
+        roleDesc: null
+      };
+      this.isIndeterminate = false;
+      this.checkAll = false;
     },
-    onCancel () {
-      this.$store.dispatch('delVisitedViews', this.$route)
+    onCancel() {
+      this.$store.dispatch("delVisitedViews", this.$route);
       this.$router.push({
-        path: '/parameter/adminManager',
+        path: "/parameter/adminManager",
         query: {
           page: this.$route.query.page
         }
-      })
+      });
     },
-    seachRoles () {
-       this.$refs.tree.filter(this.seachRoleValue);
+    seachRoles() {
+      this.$refs.tree.filter(this.seachRoleValue);
     },
     filterNode(value, data) {
       if (!value) return true;
       return data.label.indexOf(value) !== -1;
     },
-    onReSetRole () {
-      this.seachRoleValue = ''
-      this.data = this.setTableData(this.silderList)
+    onReSetRole() {
+      this.seachRoleValue = "";
+      this.data = this.setTableData(this.silderList);
     }
   }
 };
@@ -287,4 +311,4 @@ export default {
     margin-right: 4px;
   }
 }
-</style>
+</style>