saber/src/views/digital/signer.vue

<template>
    <basic-container>
        <el-row :gutter="20" class="h100p">
                <el-col :span="5" class="h100p">
                    <div class="grid-content1">
                        <el-radio-group v-model="tabPosition" @input="getRoleData"  size="small">
                            <el-radio-button label="1">施工</el-radio-button>
                            <el-radio-button label="2">监理</el-radio-button>
                            <el-radio-button label="3">业主</el-radio-button>
                          
                        </el-radio-group>

                        <div class="flex" style="margin-top: 10px">
                            <el-input
                           size="small"
                            placeholder="请输入岗位名称"
                            clearable
                            @clear="clearInput"
                            v-model="postText"
                            >
                            </el-input>
                            <el-button  class="mg-l-10" @click="searchPost" type="primary" size="small"
                            >搜索</el-button
                            >
                            
                        </div>
                        <div class="post-list">
                                <el-scrollbar style="margin-top: 20px; height: 100%" v-loading="roleListLoading">
                                    <ul
                                            class="contextmenu"
                                            >
                                                <li v-for="item in roleData" :key="item"  
                                                 :class="{'selected': selectedItem === item}"
                                                @click="positionClick($event,item)">
                                                 
                                                    <span>{{item.roleName}}</span>
                                                </li>
                                    </ul>
                                </el-scrollbar>
                         </div>
                    </div>
                   
                </el-col>
                <el-col :span="19" class="h100p">
                    <div class="grid-content2 ">
                        <div class="header-btn">
                           
                            <el-button type="primary" size="small" @click="addEleClick">新增</el-button>
                            <el-button type="info" size="small" @click="editEleClick" :disabled="checkedList.length<1">编辑</el-button>
                            <el-button type="success" size="small"  @click="openClick(row,1)" :loading="openLoading">启用</el-button>
                            <el-button type="warning" size="small"  @click="openClick(row,0)" :loading="closeLoading">停用</el-button>
                            <el-button type="danger" size="small" @click="rowDel(row)" :loading="removeLoad">删除</el-button>
                        </div>
                        <div class="table-box">
                            <el-table
                            height="600"
                                v-loading="tableLoading"
                                ref="multipleTable"
                                :data="tableData"
                                tooltip-effect="dark"
                                style="width: 100%"
                                @selection-change="handleSelectionChange">
                              
                                <el-table-column
                                    type="selection"
                                    width="55">
                                </el-table-column>
                                <el-table-column
                                 label="序号"
                                type="index"
                                width="50">
                                </el-table-column>
                                <el-table-column
                                label="电签元素名称"
                                prop="eName"
                              >
                                </el-table-column>
                                <el-table-column
                                prop="elementTypeName"
                                label="字符类型"
                               >
                        
                                </el-table-column>
                                <el-table-column
                              
                                label="元素来源"
                               >
                               <template slot-scope="scope">
                                <el-link type="warning" @click="eleCheck(scope.row,scope.$index,1)">查看</el-link>
                               </template>
                                </el-table-column>
                                <el-table-column
                              
                                label="绑定岗位"
                               >
                               <template slot-scope="scope">
                                <el-link type="warning" @click="selectPost(scope.row,scope.$index,1)">查看</el-link>
                               </template>
                                </el-table-column>
                                <el-table-column
                                    prop="status"
                                    label="状态"
                                    width="100"
                                    >
                                    <template slot-scope="scope">
                                        <i class="el-icon-success" style="font-size: 20px;color:#67C23A" v-if="scope.row.status==1"></i>
                                        <i class="el-icon-error" style="font-size: 20px;color:red" v-else></i>
                                    </template>
                                    </el-table-column>
                            </el-table>
                        </div>
                        <div class="pagination-page">
                            <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="currentPage"
                            :page-sizes="[10, 20, 30, 40,50]"
                            :page-size="pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="total">
                         </el-pagination>
                        </div>
                    </div>
                </el-col>
              
        </el-row>

        <el-dialog
        class="dialog-footer-center"
            append-to-body
            :title="addDialogVisibleTitle"
            :visible.sync="addDialogVisible"
            width="80%"
            :before-close="handleAddClose">
           <div>
            <el-table 
                                :data="tableData1"
                                style="width: 100%"
                                max-height="600"
                              >
                              
                                <el-table-column
                                label="电签元素名称"
                              >
                                <template slot-scope="scope">
                                 
                                    <el-select v-model="scope.row.eName" placeholder="请选择元素或搜索"   filterable   size="small" @change="changeEleType($event,scope.row)">
                                        <el-option
                                        v-for="item in eleOptions"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                        </el-option>
                                    </el-select>
                                </template>
                                </el-table-column>
                                <el-table-column
                                prop="name"
                                label="字符类型"
                               >
                               <template slot-scope="scope">
                                    <el-select
                                    v-model="scope.row.elementType"
                                    disabled
                                    size="small"
                                    placeholder="请选择"
                                    >
                                    <el-option
                                        v-for="item in dataTypeList"
                                        :key="item.id"
                                        :label="item.dictValue"
                                        :value="item.dictKey"
                                    ></el-option>
                                    </el-select>
                                </template>
                                </el-table-column>
                                <el-table-column
                                prop="address"
                                label="元素来源"
                               >
                               <template slot-scope="scope">
                                <el-link type="warning" @click="eleCheck(scope.row,scope.$index)">请选择</el-link>
                               </template>
                                </el-table-column>
                                <el-table-column
                                prop="address"
                                label="绑定岗位"
                               >   <template slot-scope="scope">
                                <el-link type="warning" :underline="true" @click="selectPost(scope.row,scope.$index)">请选择</el-link>
                               </template>
                                </el-table-column>
                                <el-table-column
                                    prop="tag"
                                    label="操作"
                                    width="100"
                                    >
                                    <template slot-scope="scope">
                                    <el-button type="text" @click="handleAdd(scope.row,scope.$index)">
                                        <i class="el-icon-circle-plus-outline" style="font-size: 20px;color:#67C23A"></i>
                                    </el-button>
                                    <el-button type="text" @click="handleDelete(scope.row,scope.$index)">
                                        <i class="el-icon-remove-outline" style="font-size: 20px;color:red"></i>
                                    </el-button>
                                </template>
                                    </el-table-column>
                            </el-table>
           </div>
            <span slot="footer" class="dialog-footer">
              
                <el-button type="primary" @click="saveBatch" :loading="saveBatchLoading">保存并生效</el-button>
            </span>
            </el-dialog>
            <!-- 选择元素来源 -->
            <el-dialog
             class="dialog-footer-center"
            append-to-body
                title="元素来源"
                :visible.sync="sourceDialogVisible"
                width="50%"
                :close="handleSourceClose">
                <div>
                    <p class="tip-text" v-if="!isEleView" >
                        提示：配置之后会把所有元素表该元素字段都自动配置电签岗位对应关系。
                    </p>
                   <div class="source-radio-group">
                    <el-radio-group v-model="selectedSourceOption" :disabled="isEleView">
                        <el-radio :label="0">适配所有元素表</el-radio>
                        <el-radio :label="1">部分元素表</el-radio>
                    </el-radio-group>
                   </div>
                 <!-- 并行显示的下拉框 -->
                        <div v-if="selectedSourceOption === 1&&!isEleView" class="dropdown-container">
                            <el-select 
                                v-model="elementCategorySelect" 
                                placeholder="请选择表分类" 
                                style="flex: 1; margin-right: 10px;"
                                 clearable @change="changeSelect" 
                                 
                                  >
                                <el-option
                                    v-for="item in elementCategoryOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                            <el-select 
                                v-loading="loadingList"
                                v-model="elementTableNameSelect" 
                                placeholder="请输入元素表名称进行模糊检索" 
                                style="flex: 1;" 
                                filterable clearable multiple
                                class="custom-multi-select"
                             
                              
                                 >
                                <el-option
                                    v-for="item in elementTableOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </div>
                        <div v-if="selectedSourceOption === 1&&!isEleView" class="element-list-container">
                            <el-scrollbar>
                                <ul class="element-checkbox-list">
                                    <li v-for="(item, index) in elementList" :key="item.value" class="element-item">
                                        <el-checkbox v-model="item.checked" @change="changeEleClick($event,item)">{{ item.label }}</el-checkbox>
                                    </li>
                                </ul>
                            </el-scrollbar>
                        </div>
                        <el-table
                    max-height="600px"
                        v-loading="elementLoading"
                            v-if="selectedSourceOption === 1&&isEleView"
                            :data="elementList1"
                            border
                            style="width: 100%;margin-top: 20px;"
                             :header-cell-style="{ background: '#A0B7E2', color: 'black' }"
                            >
                            <el-table-column
                            prop="name"
                            label="元素表名称"
                            align="center"
                           >
                            </el-table-column>
                         
                          
                        </el-table>
                </div>
                <span slot="footer" class="dialog-footer" v-if="!isEleView">
                  
                    <el-button type="primary" @click="confirmSourceSelection">确 定</el-button>
                </span>
            </el-dialog>
            <!-- 绑定岗位弹窗 -->
            <el-dialog
             class="dialog-footer-center"
                append-to-body
                title="绑定岗位"
                :visible.sync="bindPostDialogVisible"
                width="50%"
                :before-close="handleBindPostClose">
                <div class="bind-post-content">
                    <!-- 参建方分类 + 岗位名称下拉框 -->
                    <div class="dropdown-pair" v-if="!isPosView">
                        <el-select v-model="partyCategorySelect" placeholder="请选择参建方分类" style="flex: 1; margin-right: 10px;"  @change="changePositionName">
                            <el-option
                                v-for="item in partyCategoryOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                        <el-select v-model="positionNameSelect" filterable multiple  placeholder="请输入岗位名称进行模糊检索" class="custom-multi-select" style="flex: 1;"   v-loading="positionNameLoading">

                            <el-option
                                v-for="item in positionNameOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </div>

                    <!-- 岗位列表 -->
                    <div class="position-list-container" v-if="!isPosView">
                        <el-scrollbar > <!-- 18行 * 30px = 540px -->
                            <ul class="position-checkbox-list">
                                <li v-for="(item, index) in positionList" :key="index" class="position-item">
                                    <el-checkbox v-model="item.checked"  @change="changePosClick($event,item)">{{ item.label }}</el-checkbox>
                                </li>
                            </ul>
                        </el-scrollbar>
                    </div>
                    <el-table
                        v-loading="bindPosLoading"
                        v-if="isPosView"
                        :data="positionList1"
                        border
                        max-height="600px"
                          :header-cell-style="{ background: '#A0B7E2', color: 'black' }"
                        style="width: 100%;margin-top: 20px;">
                     
                        <el-table-column
                        prop="type"
                        label="所属方"
                         align="center"
                       >
                        </el-table-column>
                        <el-table-column
                        prop="name"
                        label="岗位名称"
                         align="center"
                       >
                        </el-table-column>
                      
                    </el-table>
                </div>
                <span slot="footer" class="dialog-footer"  v-if="!isPosView">
                  
                    <el-button type="primary" @click="confirmBindPostSelection">确 定</el-button>
                </span>
            </el-dialog>
    </basic-container>
</template>

<script>
  import {getRoleList,getListPage,getElementList,getTableTypeList,getTableList,queryAllRoleList,submitEle,elementDetail,roleDetail,removeEle,updateStatusEle} from "@/api/sigital/signer.js";
  import { getDictionary } from "@/api/system/dict";

    export default {
        data() {
            return {
                tabPosition: '1',
                postText: '',
                roleData:[],
                roleListLoading:false,
                multipleTable:null,
                tableData: [],
                tableLoading: false,

                selectedItem: {
                    id: '',
                },
                removeLoad:false,
                openLoading:false,
                closeLoading:false,

                currentPage: 1,
                pageSize: 10,
                total: 0,

                addDialogVisible: false,
                addDialogVisibleTitle: '新增电签配置信息',
                saveBatchLoading: false,
                checkedList: [],
                tableData1: [{}],
                eleOptions: [
                  
                ],
                dataTypeList: [],
                sourceDialogVisible: false, // 控制弹窗显示
                isEleView: true, // 是否查看
                eleCheckRow: {},
                eleIndex: 0,
                selectedSourceOption: 1, // 默认选中 "适配所有元素表"
                elementCategorySelect: '', // 元素分类表分类选中值
                loadingList: false,
                elementTableNameSelect: [], // 元素表名称筛选选中值
                elementCategoryOptions: [
                   
                ],
                elementTableOptions: [
               
                ],
                allElementTableOptions: [],

                elementList:[],
                elementList1:[],
                elementLoading: false,

                bindPostDialogVisible: false,
                bindPosLoading: false,
                partyCategorySelect: '', // 参建方分类选中值
                positionNameSelect: [], // 岗位名称选中值
                partyCategoryOptions: [
                    { value: '1', label: '施工方' },
                    { value: '2', label: '监理方' },
                    { value: '3', label: '业主方' }
                ],
                positionNameOptions: [],
                allPositionNameOptions  : [],
                positionNameLoading: false,

                positionList: [],
                positionList1:[],
                isPosView: true, //
                //  是否查看
                selectedPostRow: {},
                selectedPostIndex: 0,

            }
        },
        watch: {
            elementTableNameSelect(newVal) {
                if (newVal) {
                    let arr=[]; 
                    this.allElementTableOptions.forEach(item => {
                        newVal.forEach(tableName => {
                            if (item.value === tableName) {
                              arr.push(item)
                            }
                        });
                    });
                
                    // 更新 elementList 并自动选中对应的项
                    this.elementList = arr.map(element => ({
                        ...element,
                        checked: true // 自动选中
                    }))
                 
                }
            },
            positionNameSelect(newVal) {
             
                
                if (newVal) {
                    let arr=[]; 
             
                    this.allPositionNameOptions.forEach(item => {
                        newVal.forEach(roleName => {
                            if (item.value === roleName) {
                              arr.push(item)
                            }
                        });
                    });
                
                    // 更新 elementList 并自动选中对应的项
                    this.positionList = arr.map(element => ({
                        ...element,
                        checked: true // 自动选中
                    }))
                 
                }
            },
        
        
    

        },
        methods: {
            clearInput() {
                this.postText = ''
                this.getRoleData();
            },
            searchPost() {
              this.getRoleData();
            },
            handleSelectionChange(val) {
                this.checkedList=val
            },
            //获取岗位列表
            getRoleData() {
                this.roleListLoading = true;
                this.selectedItem = {};

                getRoleList({
                    type: this.tabPosition,
                    roleName: this.postText
                }).then(res => {
                    console.log(res,'res');
                    
                    this.roleListLoading = false;
                    if (res.data.code == 200) {
                        this.roleListLoading = false;
                        this.roleData = res.data.data;
                    }else{
                        this.roleData = [];
                    }
                })
                  this.getTableData();
            },
            positionClick(event, item){
                this.selectedItem = item; 
                this.getTableData();
                
            },
            getTableData() {
       
                
                this.$refs.multipleTable.clearSelection();
                this.tableLoading = true;
                getListPage({
                    size: this.pageSize,
                    current: this.currentPage,
                    keyword: '',
                    roleId: this.selectedItem.roleId||'',
                    type: this.tabPosition
                }).then(res => {
                    this.tableLoading = false;
                    if (res.data.code == 200) {
                       
                        this.tableData = res.data.data['records'];
                        this.total = res.data.data['total'];
                    }else{
                        this.tableData = [];
                    }
                })
            },
            handleSizeChange(val) {
                this.pageSize = val;
                this.getTableData();
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                this.getTableData();
            },
            addEleClick() {
                this.addDialogVisible = true;
                this.addDialogVisibleTitle = '新增电签配置信息';
                this.tableData1=[{}]
            },
            editEleClick(row) {
                
                this.addDialogVisible = true;
                this.addDialogVisibleTitle = '编辑电签配置信息';
              this.tableData1 = JSON.parse(JSON.stringify(this.checkedList));
                console.log( this.tableData1,' this.tableData1');
                this.isPosView=false
                this.isEleView=false
                
            },
            //启用
            openClick(row,type){
                if (this.checkedList.length == 0) {
                    this.$message({
                        type: "warning",
                        message: "请选择需要操作的数据",
                    });
                    return;
                }
                if(type==1){
                    this.openLoading=true;
                }else{
                    this.closeLoading=true;
                }
                let ids = '';
                if (this.checkedList.length > 0) {
                    ids = this.checkedList.map(item => item.id).join(',');
                }
                updateStatusEle({
                    ids: ids,
                    status: type
                })                
                .then(res => {
                    if(res.data.code==200){
                        this.$message({
                            type: 'success',
                            message: '操作成功!'
                        });
                        this.getTableData();
                    }else{
                        this.$message({
                            type: 'error',
                            message: res.data.msg
                        });
                    }
                }).finally(() => {
                    if(type==1){
                        this.openLoading=false;
                    }else{
                        this.closeLoading=false;
                    }
                });
            },
            

            handleAddClose(){
                this.addDialogVisible = false;
            },
            getEleOptions(){
                getElementList().then(res => {
                    if (res.data.code == 200) {
                        this.eleOptions = res.data.data.map(item => ({
                            value: item.id,
                            label: item.ename,
                            etype: item.etype,
                        }));
                    }else{
                        this.eleOptions = [];

                    }
                });
            },
           
            getDataTypelist() {
                if (this.dataTypeList.length > 1) {
                    return;
                }
                getDictionary({
                    code: "data_type",
                }).then((res) => {
                    res.data.data.forEach((element) => {
                    element.dictKey = Number(element.dictKey);
                    });
                    this.dataTypeList = res.data.data;
                });
            },
            handleAdd(row,index) {
                this.tableData1.splice(index + 1, 0, {});
             

                // 新增操作的逻辑
            },
            handleDelete(row,index) {
                console.log('删除', row);
                if(this.tableData1.length==1&&this.addDialogVisibleTitle=='新增电签配置信息'){
                    this.$message({
                        type: "warning",
                        message: "请至少保留一条数据",
                    });
                    return;
                }
                if(this.addDialogVisibleTitle=='新增电签配置信息'){
                     this.tableData1.splice(index, 1);
                }else{
                    let _that = this;
                    let ids = row.id;
                    this.$confirm("删除后，项目级表单电签信息将同步删除，请确认是否删除", "提示", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning",
                    })
                        .then(() => {
                        _that.remove({ ids });
                         _that.tableData1.splice(index, 1);
                        })
                        .catch(() => {
                        this.$message({
                            type: "info",
                            message: "已取消删除",
                        });
                        })
                }
              
                // 删除操作的逻辑
            },
            rowDel() {
                let ids=''
                if (this.checkedList.length == 0) {
                    this.$message({
                        type: "warning",
                        message: "请选择需要删除的数据",
                    });
                    return;
                }
                if (this.checkedList.length > 0) {
                    ids = this.checkedList.map(item => item.id).join(',');
                }
                let _that = this;
                this.$confirm("删除后，项目级表单电签信息将同步删除，请确认是否删除", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                })
                    .then(() => {
                    _that.remove({ ids });
                     
                    })
                    .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除",
                    });
                    })
            },
            async remove(ids) {
                this.removeLoad = true;
                removeEle(ids).then(res => {
                    console.log(res,'res');
                    
                    this.removeLoad = false;
                    if (res.data.code == 200) {
                        this.$message({
                            type: "success",
                            message: "删除成功!",
                        });
                        this.getTableData();
                        this.getRoleData();
                    }
                }).finally(() => {
                    this.removeLoad = false;
                });
            },
            changeEleType(value,row) {
                const selectedItem = this.eleOptions.find(item => item.value === value);
                    if (selectedItem && selectedItem.etype != null) {
                        row.elementType = selectedItem.etype; // 假设接口返回的 eleOptions 中有 etype 字段
                        row.eName=selectedItem.label;
                        row.elementId=selectedItem.value;
                    }        

              
            },
            //选择元素来源
            eleCheck(row,index,type) {
               
                this.getAllElements()
                this.eleCheckRow=row;
                this.eleIndex=index;
                if(type===1){
                    this.isEleView = true;
                    this.getEleDetail(row.id)
                    this.selectedSourceOption=row.tableType
                }else{
                    this.isEleView = false;
                 
                    this.selectedSourceOption=row.tableType
                    
                   if(row.id){
                    this.getEleDetail(row.id,1)
                        getTableList({
                            tableType:''
                        }).then(res => {
                    
                            if (res.data.code == 200) {
                                this.elementTableOptions = res.data.data.map(item => ({
                                    value: item.id,
                                    label: item.tabChName
                                }));
                                // this.elementTableNameSelect=row.tableIds
                                let arr=[];
                                this.elementList.forEach(item => {
                                    arr.push(item.value)
                                    // item.checked = false;
                                });
                                this.elementTableNameSelect=arr

                            }else{  
                                this.elementTableOptions = [];
                                this.elementTableNameSelect=[]
                            }
                        });

                   }else{
               
                 
                    this.elementCategorySelect=row.eleType
                    this.changeSelect(row.eleType)
                    this.elementTableNameSelect=row.tableIds


                    
                   }
                   
                    this.getElementCategoryOptions();
                   
                }
                this.sourceDialogVisible = true;
           
           
          
            },
            //查看详情
            getEleDetail(id,type){
                this.elementLoading = true;
                elementDetail({
                   id
                }).then(res => {
                   
                    this.elementLoading = false;
                    if (res.data.code == 200) {
                        if(type==1){
                            // this.elementList = res.data.data;
                            this.elementList = res.data.data.map(item => ({
                            value: item.id,
                            label: item.name,
                            checked: true
                          
                        }));
                            console.log( this.elementList,' this.elementList');
                            
                                
                        }else{
                            this.elementList1 = res.data.data;
                        }
                      
                    }else{
                        this.elementList1 = [];
                        this.elementList = [];
                    }
                })
            },
            getPosDetail(id){
            this.bindPosLoading = true;
                roleDetail({
                   id
                }).then(res => {
                    this.bindPosLoading = false;
                   
                    
                    if (res.data.code == 200) {
                        this.positionList1 = res.data.data;
                        this.positionList = res.data.data;
                        this.positionNameSelect=res.data.data.map(item => item.id)
                        
                        this.positionList.map(item => {
                            item.label = item.name;
                            item.value = item.id;
                            item.checked = true
                          });
                       
                    }else{
                        this.positionList1 = [];
                        this.positionList = [];
                    }
                })
            },
                //获取元素表分类
            
           getElementCategoryOptions(){
         
                getTableTypeList().then(res => {
                    if (res.data.code == 200) {
                        this.elementCategoryOptions = res.data.data.map(item => ({
                            value: item.dictKey,
                            label: item.dictValue,
                            id:item.id
                        }));
                    }else{  this.elementCategoryOptions = [];}
                });
            },
            changeSelect(){
              this.getElementTableOptions();
            },
            getAllElements(){ 
                getTableList({
                    tableType:''
                }).then(res => {
            
                    if (res.data.code == 200) {
                        this.allElementTableOptions = res.data.data.map(item => ({
                            value: item.id,
                            label: item.tabChName
                        }));
                    }else{  this.allElementTableOptions = [];}
                });
            },
            //获取元素表List
            getElementTableOptions(){
                this.loadingList = true;
                getTableList({
                    tableType:this.elementCategorySelect
                }).then(res => {
                    this.loadingList = false;
                    if (res.data.code == 200) {
                        this.elementTableOptions = res.data.data.map(item => ({
                            value: item.id,
                            label: item.tabChName
                        }));
                        this.slec
                    }else{  this.elementTableOptions = [];}
                });
            },
                    // 弹窗关闭时的回调
            handleSourceClose(done) {
                this.sourceDialogVisible = false;
              
              
                done();
            },
            changeEleClick(value,item) {
                if(!value){
                    this.elementTableNameSelect.forEach((ele,index)=>{
                       if(ele == item.value){
                        this.elementTableNameSelect.splice(index,1);
                       }
                    })
                    
                }
            },
            changePosClick(value,item) {
                if(!value){
                    this.positionNameSelect.forEach((ele,index)=>{
                       if(ele == item.value){
                        this.positionNameSelect.splice(index,1);
                       }
                    })
                    
                }
            },
            quitClose() {
                this.sourceDialogVisible = false;
                this.selectedSourceOption = 1;
                this.elementTableNameSelect = [];
                this.elementList  = [];
                this.elementCategorySelect = '';
            },
            positionClose() {
                this.bindPostDialogVisible = false;
                this.partyCategorySelect=''
                this.positionNameSelect = [];
                this.positionList  = [];
                this.partyCategorySelect = '';
            },
            // 确认按钮点击事件
            confirmSourceSelection() {
         
                if(this.selectedSourceOption!==0&&this.selectedSourceOption!==1){
                    this.$message({
                        type: 'warning',
                        message: '请选择元素来源!'
                    });
                    return
                }
                
                if (this.selectedSourceOption === 0) {
                    // 处理适配所有元素表的逻辑
                    console.log("适配所有元素表");
                    // this.eleCheckRow.tableType = 1;
                    this.tableData1.forEach((item, index) => {
                        if (item.id === this.eleCheckRow.id) {
                            this.tableData1[index].tableType = 0;
                        }
                    })
              
               
                    
                } else {
                    // 处理适配部分元素表的逻辑
                    
                    
                    this.tableData1.forEach((item, index) => {
                        if (index==this.eleIndex) {
                            this.tableData1[index].tableType = 1;
                        }
                    })
                    if (this.elementTableNameSelect&&this.elementTableNameSelect.length > 0) {
                        this.tableData1.forEach((item, index) => {
                            if (index==this.eleIndex) {
                                this.tableData1[index].tableIds = this.elementTableNameSelect
                                this.tableData1[index].eleType = this.elementCategorySelect;
                            }
                        });
                    }else{
                        this.tableData1.forEach((item, index) => {
                            if (index==this.eleIndex) {
                                this.tableData1[index].tableIds ='';
                                this.tableData1[index].eleType=''
                                this.elementList1 = [];
                                this.elementList = [];
                            }
                        });
                    }
                   
                 
                    
                   
                }
                
                // 关闭弹窗
                this.sourceDialogVisible = false;
            },
            // 打开绑定岗位弹窗
            selectPost(row,index,type) {
                this.selectedPostIndex=index;
                this.getAllPositionNameOptions();
                this.positionNameOptions=this.allPositionNameOptions;
                if(type===1){
                    this.isPosView=true
                  
                    if(row.id){
                        this.getPosDetail(row.id)
                    }
                }else{
                    if(row.id){
                        this.getPosDetail(row.id)
                        
                        
                    }
                    this.isPosView=false
                    this.partyCategorySelect='1'
                    this.getPositionList();
                    this.selectedPostRow = row;
               
                    
                    // this.positionNameSelect=arr
                    if(!row.id&&row.roleIds&&row.roleIds.length>0){
                            this.positionNameSelect = row.roleIds;
                            this.partyCategorySelect=row.partyCategory
                        }else{
                            this.positionNameSelect = [];
                            this.partyCategorySelect = '';
                            this.positionList  = [];
                        }
                       
                 }
                this.bindPostDialogVisible = true;
              
            },
            changePositionName() {
                this.getPositionList();
            },
            getAllPositionNameOptions() {
                queryAllRoleList({
                    type:''
                }).then(res => {
                    if (res.data.code == 200) {
                        this.allPositionNameOptions = res.data.data.map(item => ({
                            value: item.id,
                            label: item.roleName
                        }));
                    }else{  this.allPositionNameOptions = [];}
                });
            },
            // 获取岗位列表
            getPositionList() {
                this.positionNameLoading = true;
                queryAllRoleList({
                    type:this.partyCategorySelect
                }).then(res => {
                    this.positionNameLoading = false;
                    if (res.data.code == 200) {
                        this.positionNameOptions = res.data.data.map(item => ({
                            value: item.id,
                            label: item.roleName
                        }));
                    }else{  this.positionNameOptions = [];}
                });
            },


            // 弹窗关闭回调
            handleBindPostClose(done) {
                this.bindPostDialogVisible = false;
                done();
            },

            // 确认选择岗位
            confirmBindPostSelection() {
                if(this.positionNameSelect.length==0){
                    this.$message.error('请选择岗位')
                    return
                }
                if (this.positionNameSelect.length > 0) {
                        // this.selectedPostRow.roleIds = this.positionNameSelect.join(',');
                        this.tableData1.forEach((item, index) => {
                            if (this.selectedPostIndex == index) {
                                this.tableData1[index].roleIds =this.positionNameSelect
                                this.tableData1[index].partyCategory =this.partyCategorySelect
                            }
                        });
                    }else{
                        // this.selectedPostRow.roleIds = '';
                        this.tableData1.forEach((item, index) => {
                            if (this.selectedPostIndex == index) {
                                this.tableData1[index].roleIds =[]
                                this.tableData1[index].partyCategory = ''
                            }
                        });
                    }
                    console.log(this.tableData1,'this.tableData1');
                this.bindPostDialogVisible = false;
            },
            saveBatch(){
                console.log(this.tableData1,'this.tableData1');
                if(this.tableData1.length==0){
                    this.$message.error('请选择数据')
                    return
                }
                this.saveBatchLoading = true;
                submitEle(
                    this.tableData1
                    ).then((res) => {
                    if(res.data.code==200){
                        this.$message.success(res.data.msg)
                        this.getTableData();
                        this.getRoleData();
                        this.addDialogVisible=false
                    }else{
                        this.$message.error(res.data.msg)
                    }
                    }).finally(() => {
                        this.saveBatchLoading = false;
                    });
            }
    
        },
        mounted() {
            this.getRoleData();
            this.getTableData();
            this.getEleOptions();
            this.getDataTypelist();
        },
        components: {}
    }
</script>
<style lang="scss" scoped>
.h100p{
    height: 100%;
}
  .grid-content1{
        height: 100%;
        border-right: 1px solid #D6D6D6;
        padding-right: 10px;
        .post-list{
            margin-top: -18px;
            height: calc(100% - 110px);
            // border: 1px solid red;
        }

        
        .contextmenu {
        padding: 4px 0;  /* 添加适当的内边距 */
        // min-width: 120px;
        }

        .contextmenu ul {
        list-style: none;  /* 移除小圆点 */
        padding: 0;
        margin: 0;
        // min-width: 80px;
        background: #fff;
        border: 1px solid #e4e7ed;
        border-radius: 4px;
        box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
        }


        .contextmenu li {
        padding: 8px 16px;
        line-height: 22px;
        display: flex;
        align-items: center;
        cursor: pointer;
        transition: all 0.3s;
                &.selected {
                background-color: #409eff;
                color: white;
                span {
                    color: white;
                }
            }
        }


        .contextmenu li i {
        margin-right: 8px;
        font-size: 16px;
        }


        .contextmenu li span {
        font-size: 14px;
        color: #606266;
        }


        .contextmenu li:hover,
        .contextmenu li.active {
        background-color: #f5f7fa;
        color: #409eff;
        }


        .contextmenu li.divider {
        height: 1px;
        background-color: #e4e7ed;
        margin: 4px 0;
        padding: 0;
        }
       
    }
.grid-content2{
    height: 100%;
    display: flex;
    flex-direction: column;
    .header-btn{
        margin-top: 10px;
        text-align: right;
   }
   .table-box {
        flex: 1;
        overflow: hidden;
        
        .el-table {
            height: 100% !important;
        }
    }
}
.tip-text {
margin-top: -30px;
    color: red;
  
}
.source-radio-group{
    margin-top: 20px;
    text-align: center;
}
.dropdown-container {
    display: flex;
    margin-top: 20px;
}
.element-list-container {
    margin-top: 20px;
    height: 300px;
    overflow-y: auto
}

.element-checkbox-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.element-item {
    line-height: 30px;
    padding-left: 10px;
}

.bind-post-content {
    padding-bottom: 20px;
}

.dropdown-pair {
    display: flex;
    margin-bottom: 20px;
}

.position-list-container {
    // border: 1px solid #e4e7ed;
    border-radius: 4px;
    padding: 10px;
    height: 300px;
    overflow-y: auto;
}

.position-checkbox-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.position-item {
    line-height: 30px;
    padding-left: 10px;
}
.limit-height-select .el-select-dropdown__wrap {
    max-height: 30px !important;
    overflow-y: auto !important;
}
</style>
<style lang="scss" >
/* 限制已选标签容器高度并启用滚动 */
.custom-multi-select .el-select__tags {
  max-height: 60px; /* 控制高度 */
  overflow-y: auto;  /* 启用滚动 */
  white-space: normal; /* 允许换行（可选） */
}

/* 调整折叠标签的显示样式 */
.custom-multi-select .el-tag {
  margin: 2px 4px 2px 0;
}

/* 可选：隐藏原生滚动条（更美观） */
.custom-multi-select .el-select__tags::-webkit-scrollbar {
  width: 0;
}
.dialog-footer-center {
    .el-dialog__footer {
      text-align: center;
    }
}
.pagination-page{
    text-align: center;
    margin-top: 10px;
}
</style>