1

src/views/backStageManage/application/vision/components/dialog/addFunctionDialog.vue

@@ -0,0 +1,61 @@
+<template>
+  <div>
+    <el-dialog title="添加功能" :visible.sync="visible" width="500px" :before-close="close">
+        <addFunctionForm ref="addFunctionForm" :form="form"></addFunctionForm>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="close">取 消</el-button>
+        <el-button type="primary" @click="submit" :loading="btnLoading">确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import addFunctionForm from '../form/function.vue'
+export default {
+  components: {
+    addFunctionForm
+  },
+  props: {},
+  data() {
+    return {
+        visible:false,
+        form:{},
+        btnLoading:false,
+    };
+  },
+  watch: {},
+  computed: {},
+  created() {},
+  mounted() {},
+  methods: {
+    open(form){
+        this.form = form
+        this.visible = true
+    },
+    close(){
+        this.form = {}
+        this.visible = false
+    },
+    async submit(){
+        this.btnLoading = true
+        var sign = await this.$refs.addFunctionForm.validate()
+        if(!sign){
+            this.btnLoading = false
+            return
+        }
+        this.$api.addFunction(this.form).then(response=>{
+            if(response.code == 200){
+                this.$emit('getNewFunction',response.data)
+                this.btnLoading = false
+                this.close()
+            }
+        }).catch(error=>{
+            this.btnLoading = false
+        })
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+</style>

src/views/backStageManage/application/vision/components/form/function.vue

@@ -0,0 +1,73 @@
+<template>
+  <div>
+    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" label-position="left">
+      <el-form-item label="所属功能" prop="function">
+        <el-input v-model="ruleForm.last" placeholder="所属功能" :disabled="true"></el-input>
+      </el-form-item>
+      <el-form-item label="所属应用" prop="apply">
+        <el-input v-model="ruleForm.applyName" placeholder="所属应用" :disabled="true"></el-input>
+      </el-form-item>
+      <el-form-item label="功能名称" prop="name">
+        <el-input v-model="ruleForm.name" placeholder="请输入功能名称"></el-input>
+      </el-form-item>
+      <el-form-item label="功能标识" prop="sign">
+        <el-input type="textarea" v-model="ruleForm.sign" placeholder="请输入功能标识"></el-input>
+      </el-form-item>
+      <el-form-item label="是否可选" prop="ismore">
+         <el-radio-group v-model="ruleForm.functionType">
+            <el-radio :label="1">是</el-radio>
+            <el-radio :label="0">否</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="功能描述" prop="describe">
+        <el-input v-model="ruleForm.describe" placeholder="请输入" type="textarea" maxlength="100" show-word-limit></el-input>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+export default {
+  components: {},
+  props: {
+    form:{
+        type:Object,
+        default:()=>{
+            return {}
+        }
+    }
+  },
+  data() {
+    return {
+        ruleForm:this.form,
+        rules: {
+            name: [{ required: true, message: '请输入功能名称', trigger: 'blur' },],
+            apply: [{ required: true, message: '请选择所属应用', trigger: 'change' },],
+            sign: [{ required: true, message: '请输入功能标识', trigger: 'blur' },],
+        },
+    };
+  },
+  watch: {
+    form(){
+        this.ruleForm = this.form
+    }
+  },
+  computed: {},
+  created() {},
+  mounted() {},
+  methods: {
+    async validate(){
+        await this.$refs.ruleForm.validate((valid) => {
+            if (valid) {
+                return true
+            }
+            else {
+                return false;
+            }
+        })
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+</style>

src/views/backStageManage/application/vision/components/functionTable.vue

@@ -21,26 +21,25 @@
                 </template>
             </el-table-column>
             <el-table-column prop="name" label="功能名称" align="" show-overflow-tooltip></el-table-column>
-            <el-table-column label="所属应用" align="center" show-overflow-tooltip>
+            <!-- <el-table-column label="所属应用" align="center" show-overflow-tooltip>
                 <template slot-scope="scope">
                     <span >{{tableData.applyName}}</span>
                     </template>
-            </el-table-column>
+            </el-table-column> -->
             <el-table-column prop="describe" label="功能描述" align="center" show-overflow-tooltip></el-table-column>
-            <el-table-column prop="sign" label="路径" align="center" show-overflow-tooltip></el-table-column>
-            <el-table-column label="是否可选" align="center" show-overflow-tooltip>
+            <!-- <el-table-column prop="sign" label="路径" align="center" show-overflow-tooltip></el-table-column> -->
+            <!-- <el-table-column label="是否可选" align="center" show-overflow-tooltip>
                 <template slot-scope="scope">
                     <span >{{scope.row.functionType==1?'是':'否'}}</span>
                     </template>
-            </el-table-column>
+            </el-table-column> -->
             <slot name="column"></slot>
         </el-table>
-        
     </div>
 </template>
 
 <script>
-import treeChecked from './treeChecked';
+import treeChecked from './mixins/treeChecked';
 export default {
     components: {},
     mixins:[treeChecked],
@@ -80,47 +79,11 @@ export default {
     computed: {},
     created() {},
     mounted() {
-        // this.getList()
     },
     methods: {
         getCheckList(){
             return this.checkList
         },
-        getList() {
-            if(!this.queryParams.apply){
-                return false
-            }
-            this.loading = true
-            this.$api.queryFunctionList(this.queryParams).then(response => {
-                this.tableData = response.data
-                var a = response.data.children
-                for(var j = 0;j<a.length;j++){
-                    function l(data){
-                        if(data.hasOwnProperty('children')){
-                            for(var i = 0;i<data.children.length;i++){
-                            
-                                if(data.hasOwnProperty('last')){
-                                    data.children[i].last=data.last+'/'+data.name
-                                }else{
-                                    data.children[i].last=data.name
-                                }
-                                l(data.children[i])
-                            }
-                        }
-                    }
-                    l(a[j])
-                }
-                this.total=response.pageColumn.total
-                this.loading = false
-            }).catch(error => {
-                this.loading = true
-            })
-        },
-        //切换分页
-        handleCurrentChange(val){
-            this.queryParams.current = val
-            this.getList()
-        }
     },
 };
 </script>

src/views/backStageManage/application/vision/components/mixins/functionData.js

@@ -0,0 +1,30 @@
+
+import addFunctionDialog from "../dialog/addFunctionDialog.vue"
+
+export default{
+    components:{
+        addFunctionDialog
+    },
+    data() {
+        return {
+            addType:'',
+            originFunction:null
+        }
+    },
+    methods: {
+        addFunction(type,form={}){
+            this.addType = type
+            this.originFunction = form
+            var ruleForm = {
+                apply:form.apply,
+                applyName:this.tableData.applyName,
+                sign:form.sign,
+                function: form.id || 0,
+                functionType:1,
+                last:form.path == 0?form.name:(row.last+'/'+form.name)
+            }
+            this.$refs.addFunctionDialog.open(ruleForm)
+        },
+        getNewFunction(value){},
+    },
+}

src/views/backStageManage/application/vision/components/mixins/treeChecked.js

@@ -0,0 +1,124 @@
+export default{
+    methods: {
+        changeCheck(checked,row){
+            let that = this;
+            if(checked){
+                that.$set(row,'isSelect',1)
+            }else{
+                that.$set(row,'isSelect',2)
+            }
+            
+            function selectAllChildrens(data) {
+                data.forEach((item) => {
+                    if(checked){
+                        that.$set(item,'isSelect',1)
+                        that.checkList.push(item.id)  
+                    }else{
+                        let index = that.checkList.findIndex(i =>{
+                            return i == item.id
+                        })
+                        if(index !=-1 ){
+                            that.$set(item,'isSelect',2)
+                            that.checkList.splice(index,1)
+                        }
+                    }
+                    
+                  if (item.children && item.children.length) {
+                    selectAllChildrens(item.children);
+                  }
+                });
+            }
+    
+            function getSelectStatus(selectStatuaArr, data) {
+                data.forEach((childrenItem) => {
+                    selectStatuaArr.push(childrenItem.isSelect)
+                    if (childrenItem.children && childrenItem.children.length) {
+                        getSelectStatus(selectStatuaArr, childrenItem.children);
+                    }
+                });
+                return selectStatuaArr;
+            }
+            function getLevelStatus(row) {
+                //如果当前节点的parantId =0 并且有子节点，则为1
+                //如果当前节点的parantId !=0 并且子节点没有子节点 则为3
+                if (row.parentId == 0) {
+                    if (row.children && row.children.length) {
+                        return 1;
+                    }else{
+                        return 4;
+                    }
+                } else {
+                    if (!row.children || !row.children.length) {
+                        return 3;
+                    } else {
+                        return 2;
+                    }
+                }
+            }
+            let result = {};
+            //获取明确的节点
+            function getExplicitNode(data,parentId) {
+                for(var i = 0;i<data.length;i++){
+                    var item = data[i]
+                    if(item.id == parentId) {
+                        result = item;
+                        return result;
+                    }
+                    if(item.children && item.children.length) {
+                        getExplicitNode(item.children,parentId);
+                    }
+                }
+                return {}
+            }
+            function operateLastLeve(row) {
+                //操作的是子节点  1、获取父节点  2、判断子节点选中个数，如果全部选中则父节点设为选中状态，如果都不选中，则为不选中状态，如果部分选择，则设为不明确状态
+                let selectStatuaArr = [];
+                let item = getExplicitNode(that.tableData.children,row.parentId);
+                selectStatuaArr = getSelectStatus(selectStatuaArr, item.children);
+                if (
+                    selectStatuaArr.every((selectItem) => {
+                        return 1 == selectItem || selectItem === undefined;
+                    })
+                ) {
+                    that.$set(item,'isSelect',1)
+                } else if (
+                    selectStatuaArr.every((selectItem) => {
+                    return 2 == selectItem;
+                    })
+                ) {
+                    that.$set(item,'isSelect',2)
+                    let index = that.checkList.findIndex(i =>{
+                        return i == item.id
+                    })
+                    if(index != -1){
+                        that.checkList.splice(index,1)
+                    }
+                } else {
+                    that.$set(item,'isSelect','')
+                }
+                //则还有父级
+                if(item.parentId!=0) {
+                    operateLastLeve(item)
+                }
+            }
+            //判断操作的是子级点复选框还是父级点复选框，如果是父级点，则控制子级点的全选和不全选
+      
+            // 1、只是父级 2、既是子集，又是父级 3、只是子级
+            let levelSataus = getLevelStatus(row);
+            if (levelSataus == 1) {
+              selectAllChildrens(row.children);
+            } else if (levelSataus == 2) {
+              selectAllChildrens(row.children);
+              operateLastLeve(row);
+            } else if(levelSataus == 3) {
+              operateLastLeve(row);
+            }
+        },
+        rowClassNameFun({ row }) {
+            if (row.isSelect ==='') {
+              return "indeterminate";
+            }
+          },
+      
+    },
+}

src/views/backStageManage/application/vision/components/versionForm.vue

@@ -22,7 +22,10 @@
         </el-form>
         <div style="border:1px solid white;padding:10px;margin:10px 0;border-radius:8px;">
             <div style="height: 500px;" >
-                <p>选择功能：</p>
+                <p style="display:flex;align-items:center;justify-content:space-between">
+                    选择功能：
+                    <el-button type="primary" size="small" @click="addFunction(1,this.form)">添加功能</el-button>
+                </p>
                 <funTable ref="functionTable" :applyId="form.applyId" :tableData="tableData" :loading="loading" :checkFunctions="checkFunctions">
                     <template slot="column">
                         <el-table-column label="授权代码" align="center">
@@ -35,6 +38,13 @@
                                 <el-input v-if="!scope.row.children || scope.row.children == 0" type="textarea" :value="getCode(scope.row.id,'code1')" @change="(val)=>setCodeList_code(scope.row.id,val,'code2')"></el-input>
                             </template>
                         </el-table-column>
+                        <el-table-column label="操作" align="center" width="100px">
+                            <template slot-scope="scope">
+                                <div>
+                                    <el-button type="text" size="small" @click="addFunction(2,scope.row)">新增子功能</el-button>
+                                </div>
+                            </template>
+                        </el-table-column>
                     </template>
                 </funTable>
             </div>
@@ -44,12 +54,14 @@
             <el-button type="primary" size="small" :loading="btnLoading" @click="submitForm">提 交</el-button>
             <el-button size="small"  @click="resetForm">重 置</el-button>
         </div>
+
+        <addFunctionDialog ref="addFunctionDialog" @getNewFunction="getNewFunction"></addFunctionDialog>
     </div>
 </template>
 
 <script>
 import funTable from './functionTable.vue';
-
+import functionData from './mixins/functionData';
 const currentForm = {
     id:null,
     versionName:null,
@@ -63,6 +75,7 @@ export default {
     components: {
         funTable
     },
+    mixins:[functionData],
     props: {
         versionId:"",
         model:{