设置共享弹窗

src/lang/modules/ETATables/En.js

@@ -121,6 +121,19 @@ export default {
     rules_unit: "Unit cannot be empty",
     date_sequence_cannot_msg: "The date sequence cannot be empty",
     numerical_sequence_cannot_msg: "The numerical sequence cannot be empty",
+
+    table_my:'My Table',
+    table_share:'Shared Table',
+    share_btn:'Share Settings',
+    cancel_share_btn:'Cancel Sharing',
+    share_user_btn:'Select User',
+    share_success_msg:'Set Successful',
+    cancel_share_success_msg:'Cancellation Successful',
+    share_set_user:'Select Sharing User',
+    shart_user:'Sharing User',
+    share_check_text:'Viewable',
+    share_edit_text:'Editable',
+    share_set_hint:'Please select shared user permissions',
   },
 
   ETableChildren: {

src/lang/modules/ETATables/Zh.js

@@ -121,6 +121,19 @@ export default {
     rules_unit: "单位不能为空",
     date_sequence_cannot_msg: "日期序列不能为空",
     numerical_sequence_cannot_msg: "数值序列不能为空",
+
+    table_my:'我的表格',
+    table_share:'共享表格',
+    share_btn:'设置共享',
+    cancel_share_btn:'取消共享',
+    share_user_btn:'选择用户',
+    share_success_msg:'设置共享成功',
+    cancel_share_success_msg:'取消共享成功',
+    share_set_user:'设置共享用户',
+    shart_user:'共享用户',
+    share_check_text:'可查看权限',
+    share_edit_text:'可编辑权限',
+    share_set_hint:'未选择用户,请检查',
   },
 
   ETableChildren: {

src/views/datasheet_manage/customAnalysis/components/shareTableDia.vue

@@ -0,0 +1,233 @@
+<template>
+    <!--  表格设置共享-->
+    <div class="share-table-dialog">
+        <el-dialog
+            :visible.sync="isOpenDialog"
+            :close-on-click-modal="false"
+            :modal-append-to-body='false'
+            :title="$t('CustomAnalysisPage.share_set_user')"
+            @close="$emit('close')"
+            width="760px"
+        >
+            <div class="container">
+                <div class="share-right-box" v-for="(item,index) in [$t('CustomAnalysisPage.share_check_text'),$t('CustomAnalysisPage.share_edit_text')]" :key="index">
+                    <div class="item-header">
+                        <span @click="shareDataList[index].isExpand=!shareDataList[index].isExpand">
+                            <i :class="shareDataList[index].isExpand?'el-icon-caret-bottom':'el-icon-caret-right'"></i>
+                            {{ item }}
+                        </span>
+                    </div>
+                    <div class="select-wrap" v-show="shareDataList[index].isExpand">
+                        <div class="select-box">
+                            <span>{{$t('CustomAnalysisPage.shart_user')}}</span>
+                            <el-cascader
+                                :ref="`user_select_${index}`"
+                                v-model="shareDataList[index].selectList"
+                                :options="shareDataList[index].userList"
+                                :show-all-levels="false"
+                                filterable
+                                :props="{
+                                    value:'NodeId',
+                                    label:'NodeName',
+                                    children:'Children',
+                                    emitPath: false,
+                                    multiple: true
+                                }"
+                                collapse-tags
+                                @change="selectListChange(index)"
+                            >
+                            </el-cascader>
+                        </div>
+                        <div class="list-box">
+                            <div class="list-item" v-for="item in shareDataList[index].selectShowList" :key="item.userId">
+                                {{ item.label }}
+                                <span class="close-btn">
+                                    <i class="el-icon-error"></i>
+                                </span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="dia-bot" slot="footer" style="text-align:center;">
+                <el-button type="primary" style="margin-right:20px" @click="saveHandle">{{$t('Dialog.confirm_save_btn')}}</el-button>
+                <el-button type="primary" plain @click="$emit('close')">{{$t('Dialog.cancel_btn')}}</el-button>
+            </div>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+import { departInterence } from "@/api/api.js";
+export default {
+    props:{
+        isOpenDialog:{
+            type:Boolean,
+            default:false
+        },
+        tableInfo:{ //table的标识 sheetId?
+            type:Object
+        }
+    },
+    watch:{
+        async isOpenDialog(newval){
+            if(newval){
+                await this.getUserList()
+                this.getTableInfo()
+            }
+        }
+    },
+    data() {
+        return {
+            shareDataList:[
+                {
+                    isExpand:true,
+                    selectList:[],//选择的用户id 
+                    selectShowList:[],//选择的用户
+                    userList:[],//用户列表
+                },//可查看
+                {
+                    isExpand:true,
+                    selectList:[]
+                },//可编辑
+            ],
+            userList:[],
+
+        };
+    },
+    methods: {
+        async getUserList(){
+            await departInterence.getSystemUser({
+                KeyWord: ''
+            }).then(res => {
+                if(res.Ret !== 200) return 
+                this.userList = res.Data||[]
+                //去掉Children为空的属性,非用户的叶子节点禁止选中
+                this.formatTreeData({Children:this.userList})
+                this.shareDataList[0].userList = _.cloneDeep(this.userList)
+                this.shareDataList[1].userList = _.cloneDeep(this.userList)
+            })
+        },
+        //遍历树形结构,处理children
+        formatTreeData(tree){
+            function dfs(node) {
+                if (Array.isArray(node.Children)) {
+                    for (let child of node.Children) {
+                        dfs(child); // 递归调用 DFS 函数处理子节点
+                    }
+                    if(node.Children.length===0) delete node.Children
+                }
+                //若为叶子节点,且不为用户,禁止选中
+                if(!node.Children||!Array.isArray(node.Children)){
+                    if(node.NodeType!==3) node.disabled = true
+                }
+            }
+            dfs(tree); 
+        },
+        //将指定节点设置为disabled
+        setListDisabled(arr,nodes){
+            function dfs(node){
+                if (Array.isArray(node.Children)) {
+                    for (let child of node.Children) {
+                        dfs(child); // 递归调用 DFS 函数处理子节点
+                    }
+                }
+                if(arr.includes(node.NodeId)){
+                    node.disabled = true
+                }
+            }
+            dfs({Children:nodes})
+        },
+        //获取表格权限列表
+        getTableInfo(){
+            this.shareDataList[0].selectList = [36558]
+            this.shareDataList[1].selectList = [27]
+            //接口获取
+            //设置选中状态
+            this.selectListChange(0)
+            this.selectListChange(1)
+        },
+        //筛选框选中变化
+        selectListChange(index){
+            //nextTick获取最新的选中状态
+            this.$nextTick(()=>{
+                const nodes = this.$refs[`user_select_${index}`][0].getCheckedNodes(true)
+                this.shareDataList[index].selectShowList = nodes.map(i=>{
+                    return {
+                        label:i.label,
+                        userId:i.value
+                    }
+                })
+                //将另一个筛选框对应用户置为禁止选中
+                const otherIndex = index===0?1:0
+                //先清除上次选中
+                this.shareDataList[otherIndex].userList = _.cloneDeep(this.userList)
+                this.setListDisabled(nodes.map(i=>i.value),this.shareDataList[otherIndex].userList)
+            })
+        },
+        saveHandle(){
+            //两个都没选,提示
+            const {selectList:checkList=[]} = this.shareDataList[0]
+            const {selectList:editList=[]} = this.shareDataList[1]
+            if(!checkList.length&&!editList.length){
+                return this.$message.warning(/* '未选择用户,请检查' */ this.$t('CustomAnalysisPage.share_set_hint'))
+            }
+        },
+    },
+};
+</script>
+
+<style lang="scss">
+.share-table-dialog{
+    .el-icon-caret-right:before{
+        content: "\E791" !important;
+    }
+    .el-cascader .el-input{
+        width:100%;
+    }
+}
+</style>
+<style scoped lang="scss">
+.share-table-dialog{
+    .container{
+        margin-left:25px;
+        .share-right-box{
+            margin-bottom:20px;
+            .item-header{
+                cursor:pointer;
+            }
+            .select-wrap{
+                .select-box{
+                    margin-top:10px;
+                    span{
+                        display:inline-block;
+                        width:80px;
+                        text-align:right;
+                        margin-right:15px;
+                    }
+                }
+                .list-box{
+                    margin-top:10px;
+                    margin-left:95px;
+                    display:flex;
+                    gap:15px;
+                    .list-item{
+                        cursor:pointer;
+                        display:flex;
+                        align-items:center;
+                        padding:5px;
+                        background-color:#D9D9D9;
+                        border-radius:4px;
+                        .close-btn{
+                            margin-left:5px;
+                            &:hover{
+
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+</style>

src/views/datasheet_manage/customAnalysis/list.vue

@@ -19,7 +19,7 @@
             v-if="permissionBtn.checkPermissionBtn(permissionBtn.etaTablePermission.etaTable_analysis_upload)"
           >{{$t('CustomAnalysisPage.up_file_btn')}}</el-button>
           <input type="file" @change="fileSelected" id="file"  style="display: none;">
-          
+          <!-- 只看我的 -->
           <el-checkbox v-model="isShowMe"  @change="() => { getTreeData();getPublicList() }">{{$t('Chart.only_see_mine')}}</el-checkbox>
         </div>
         <div class="search-cont">
@@ -54,6 +54,16 @@
             </el-option>
           </el-select>
         </div>
+        <ul class="left-tab">
+          <li
+            :class="['tab', { act: classify_tab === index }]"
+            v-for="(tab, index) in [$t('CustomAnalysisPage.table_my'), $t('CustomAnalysisPage.table_share')]"
+            :key="tab"
+            @click="changeTab(index)"
+          >
+            {{ tab }}
+          </li>
+        </ul>
         <div class="tree-cont">
           <el-tree
             ref="treeRef"
@@ -113,14 +123,14 @@
                   alt=""
                   style="width: 14px; height: 14px; margin-right: 8px"
                 />
-                 <!-- 添加子 -->
-								<img
-									src="~@/assets/img/set_m/add.png"
-									alt=""
-									style="width: 14px; height: 14px; margin-right: 8px"
-									@click.stop="addNode(node,data)"
-									v-if="!data.ExcelInfoId&&isSheetBtnShow('classifyOpt_edit')&&node.level<3"
-								/>
+                 <!-- 目录操作：添加/编辑/删除 -->
+                <img
+                    src="~@/assets/img/set_m/add.png"
+                    alt=""
+                    style="width: 14px; height: 14px; margin-right: 8px"
+                    @click.stop="addNode(node,data)"
+                    v-if="!data.ExcelInfoId&&isSheetBtnShow('classifyOpt_edit')&&node.level<3"
+                />
                 <img
                   src="~@/assets/img/set_m/edit.png"
                   alt=""
@@ -136,6 +146,28 @@
                   @click.stop="removeNode(node, data)"
                   v-if="!data.ExcelInfoId&&isSheetBtnShow('classifyOpt_delete')"
                 />
+                <!-- 表格操作：共享/取消共享 -->
+                <span v-if="data.ExcelInfoId">
+                    <el-dropdown @command="handleShareCommand">
+                        <i class="el-icon-share" style="color:#5cb6ff;"></i>
+                        <el-dropdown-menu slot="dropdown">
+                            <!-- 表格为已共享，有取消共享按钮 -->
+                            <el-dropdown-item v-if="classify_tab===1||data.isShare===1"
+                                :command="{key:'cancel',item:data}"
+                                class="treenode-dropdown-item"
+                                :class="data.isShare===0?'treenode-dropdown-item-act':''" 
+                            >
+                                {{$t('CustomAnalysisPage.cancel_share_btn')}}
+                            </el-dropdown-item>
+                            <el-dropdown-item :command="{key:'share',item:data}"
+                                class="treenode-dropdown-item"
+                                :class="data.isShare===1?'treenode-dropdown-item-act':''" 
+                            >
+                                {{classify_tab?$t('CustomAnalysisPage.share_user_btn'):$t('CustomAnalysisPage.share_btn')}}
+                            </el-dropdown-item>
+                        </el-dropdown-menu>
+                    </el-dropdown>
+                </span>
               </span>
             </span>
           </el-tree>
@@ -331,6 +363,11 @@
         >
       </div>
     </m-dialog>
+    <!-- 设置共享弹窗 -->
+    <shareTableDia
+        :isOpenDialog="isShowShareDia"
+        @close="isShowShareDia=false"
+    />
   </div>
 </template>
 
@@ -339,12 +376,13 @@ import * as sheetInterface from "@/api/modules/sheetApi.js";
 import leftMixin from "../mixins/classifyMixin";
 import mDialog from "@/components/mDialog.vue";
 import classifyDia from "../components/sheetClassifyDia.vue";
+import shareTableDia from "./components/shareTableDia"
 import Sheet from "../components/SheetExcel.vue";
 import { getSheetImage } from "../common/option";
 import sheetListWrap from "../components/sheetListWrap.vue"
 export default {
   name: "",
-  components: { mDialog, classifyDia, Sheet, sheetListWrap },
+  components: { mDialog, classifyDia, Sheet, sheetListWrap, shareTableDia },
   mixins: [leftMixin],
   computed: {
     downExcelFileUrl() {
@@ -432,6 +470,9 @@ export default {
       isEdbReFreshLoading: false,//指标刷新
       // 内容是否更新
       hasChange:false,
+
+      classify_tab:0,//tab栏选中的项
+      isShowShareDia:false,
     };
   },
   watch: {
@@ -480,7 +521,17 @@ export default {
     },
   },
   methods: {
-
+    //切换表格tab
+    changeTab(index){
+        this.classify_tab = index
+    },
+    //表格 设置共享/取消共享
+    handleShareCommand(command){
+        if(command.key==='share'){
+            this.currentTable = command.item
+            this.isShowShareDia = true
+        }
+    },
     /* 获取表格分类 */
     getTreeData(params = null) {
       sheetInterface.classifyList({Source: this.sourceMap[this.$route.path],IsShowMe: this.isShowMe}).then((res) => {
@@ -1019,7 +1070,25 @@ $normal-font: 14px;
       .search-cont {
         padding: 0 20px;
       }
-
+      .left-tab {
+        display: flex;
+        align-items: center;
+        padding: 20px 20px 0;
+        .tab {
+          cursor: pointer;
+          font-size: 16px;
+          border-bottom: 2px solid transparent;
+          margin-right: 40px;
+          padding-bottom: 5px;
+          &.act {
+            color: #409eff;
+            border-color: #409eff;
+          }
+          &:hover {
+            color: #409eff;
+          }
+        }
+      }
       .tree-cont {
         padding: 30px 20px;
         max-height: calc(100vh - 280px);