great_service/src/views/priceConfigurationUilt/dialog/bindTeamBoxNew.vue

<!--
 * @Description: 新增/编辑弹框
 * @Author: Sugar.
 * @Date: 2023-11-24 13:55:00
 * @LastEditors: gcz
 * @LastEditTime: 2025-03-24 11:07:37
 * @FilePath: \great_webui\src\views\priceConfigurationUilt\dialog\bindTeamBoxNew.vue
 * @Copyright: Copyright (c) 2016~2023 by Sugar., All Rights Reserved.
-->
<template>
    <el-dialog
      :title="title"
      :visible.sync="open"
      width="900px"
      append-to-body
      :close-on-click-modal="false"
      @close="cancel"
    >
      <div class="dialog" style="padding: 0">
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button
              type="primary"
              plain
              icon="el-icon-plus"
              size="mini"
              @click="handleAdd"
            >添加</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="120px">
              <el-form-item label="团队名称" label-width="70px">
                <el-input
                  v-model="queryParams.teamName"
                  placeholder="请输入团队名称"
                  clearable
                  style="width: 240px;"
                  @keyup.enter.native="getList"
                />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="getList">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery1">重置</el-button>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
        <el-table ref="tables" v-loading="tabLoading" :data="dataList" border>
          <el-table-column label="序号" align="center" type="index" width="50"></el-table-column>
          <el-table-column label="团队名称" align="center" prop="teamName" />
          <!-- <el-table-column label="团队类型" align="center" prop="type">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.team_type" :value="scope.row.type"/>
            </template>
          </el-table-column> -->
          <!-- <el-table-column label="负责人" align="center" prop="contact" /> -->
          <el-table-column label="操作" align="center" width="80px" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                @click="handleDelete(scope.row)"
              >移除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
  
      <el-dialog
        title="团队选择"
        :visible.sync="selectionOpen"
        width="600px"
        append-to-body
        :close-on-click-modal="false"
        @close="selectionCancel"
      >
        <div class="dialog" style="padding: 0">
          <div>
            <el-form :model="queryParamsS" ref="queryForm" size="small" :inline="true" label-width="120px">
              <el-form-item label="团队名称" label-width="70px">
                <el-input
                  v-model="queryParamsS.name"
                  placeholder="请输入团队名称"
                  clearable
                  style="width: 240px;"
                  @keyup.enter.native="handleQuery"
                />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
              </el-form-item>
            </el-form>
          </div>
          <el-table ref="tablesS" row-key="id" v-loading="selectionTabLoading" :data="selectionDataList" border @selection-change="handleSelectionChange">
            <el-table-column type="selection" reserve-selection width="50" align="center" />
            <el-table-column label="序号" align="center" type="index" width="50"></el-table-column>
            <el-table-column label="团队名称" align="center" prop="name" />
            <el-table-column label="团队类型" align="center" prop="type">
              <template slot-scope="scope">
                <dict-tag :options="dict.type.team_type" :value="scope.row.type"/>
              </template>
            </el-table-column>
            <el-table-column label="负责人" align="center" prop="contact" />
          </el-table>
          <pagination
            v-show="selectionTabTotal>0"
            :total="selectionTabTotal"
            :page.sync="selectQueryParams.pageNum"
            :limit.sync="selectQueryParams.pageSize"
            @pagination="getSelectList"
          />
        </div>
        <span slot="footer" class="dialog-footer">
        <el-button @click="selectionCancel">取消</el-button>
        <el-button
          type="primary"
          @click="submitForm"
          :disabled="selectList.length==0"
          v-loading.fullscreen.lock="loading"
          element-loading-text="提交中..."
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)"
        >
          <span v-if="loading">提交中...</span>
          <span v-else>确认(已选{{ selectList.length }})</span>
        </el-button>
      </span>
      </el-dialog>
  
      <span slot="footer" class="dialog-footer">
        <el-button  type="primary"  @click="cancel">确认</el-button>
      </span>
    </el-dialog>
  </template>
  
  <script>
  import { bindTeamApi,getTeamList,removeTeamApi,getSelectById,allTeamList } from "@/api/priceConfiguration/index";
  import Editor from "@/components/Editor";
  import { getToken } from "@/utils/auth";
  import { updateStatus } from '@/api/team/teamMr'
  export default {
    name: "bindTeamBoxNew",
    components: {
      Editor,
    },
    props: {
      dict: {
        type: Object,
        default: () => [],
      },
    },
    data() {
      return {
        title: "团队绑定",
        model: "EDIT",
        open: false,
        loading: false,
        tabLoading: false,
        selectionTabLoading: false,
        dataList: [],
        selectionDataList: [],
        total: 0,
        selectionTabTotal: 0,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          // type: 1,
        },
        selectQueryParams: {
          pageNum: 1,
          pageSize: 10,
          // type: 2,
        },
        selectList: [],
        selectionOpen: false,
        onwObj: {},
        queryParamsS: {},
        form: {
          id: undefined,
          teamIdList: []
        }
      };
    },
    methods: {
      /**
       * 打开弹框
       * @date 2023-11-22
       * @param {any} obj
       * @returns {any}
       */
      async openDialog(title, obj) {
        this.open = true;
        this.title = "团队绑定";
        this.queryParams = {
          pageNum: 1,
          pageSize: 10,
          type: 1,
        }
        this.onwObj = obj;
        this.getList();
      },
      handleAdd() {
        this.selectList = []
        this.queryParamsS = {}
        this.getSelectList();
        this.selectionOpen = true
        this.$nextTick(()=>{
          this.$refs.tablesS.clearSelection()
        })
      },
      /**  获取详情 */
    async getSelectByIdFun(obj) {
      try {
        let res = await getSelectById({
          id: obj.id
        })
        if(res.code == 200){
          // 已绑定的团队列表
          

        }
      } catch (error) {      
      }
    },
      /** 查询列表 */
      getList(obj) {
        this.tabLoading = true;
        this.queryParams.id = this.onwObj.id
        getTeamList({...this.queryParams})
          .then(response => {
              this.dataList = response.rows;
              this.total = response.total;
              this.tabLoading = false;
            }
          ).catch(() => {
          this.tabLoading = false;
        });
      },
      /** 查询列表 */
      getSelectList(obj) {
        this.selectionTabLoading = true;
        allTeamList({...this.selectQueryParams,...this.queryParamsS})
          .then(response => {
              this.selectionDataList = response.data.rows;
              this.selectionTabTotal = response.data.total;
              this.selectionTabLoading = false;
            }
          ).catch(() => {
          this.selectionTabLoading = false;
        });
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.selectList = selection;
      },
      /**
       * 保存
       * @date 2023-11-22
       * @returns {any}
       */
      async submitForm() {
        try {
          if(this.selectList.length <= 0) {
            this.$message.error("请勾选团队!");
            return false
          }
          this.loading = true;
          
          // 先获取已绑定的团队
          const selectRes = await getSelectById({
            id: this.onwObj.id
          });
          
          let existingTeamIds = [];
          if (selectRes.code === 200 && selectRes.data.teamList) {
            existingTeamIds = selectRes.data.teamList.map(item => item.teamId);
          }
          
          // 新选择的团队ID
          let newTeamIds = this.selectList.map(item => item.id);
          
          // 合并并去重
          let teamIdList = [...new Set([...existingTeamIds, ...newTeamIds])];

          const { code } = await bindTeamApi({
            id: this.onwObj.id,
            teamIdList: teamIdList
          });
          if (code === 200) {
            this.$message.success("操作成功!");
            this.getList();
            this.selectionOpen = false;
          }
        } catch (error) {
          console.error('绑定团队失败:', error);
          this.$message.error("操作失败!");
        } finally {
          this.loading = false;
        }
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        this.$confirm('是否确认移除数据团队名称为"' + row.teamName + '"的数据项？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          removeTeamApi({ 
            id: this.onwObj.id, 
            teamIdList: [row.teamId]
          }).then((res) => {
            if (res.code == 200) {
              this.$message({
                type: 'success',
                message: '操作成功!'
              });
              this.getList();
            }
          });
        }).catch(() => {});
      },
      /**
       * 重置
       * @date 2023-11-22
       * @returns {any}
       */
      reset() {
  
      },
      /**
       * 关闭弹框
       * @date 2023-11-22
       * @returns {any}
       */
      cancel() {
        this.open = false;
      },
      selectionCancel() {
        this.selectionOpen = false;
      },
  
      handleQuery() {
        this.getSelectList()
      },
      resetQuery() {
        this.queryParamsS = {}
        this.getSelectList()
      },
      resetQuery1() {
        this.queryParams.teamName = null
        this.getList()
      }
    },
  };
  </script>
  
  <style lang="scss" scoped>
  .dialog {
    padding: 0 30px;
    max-height: 65vh;
    min-height: 65vh;
    overflow: hidden;
    overflow-y: auto;
  }
  .dialog {
    padding: 0 30px;
    .upload-btn {
      width: 100px;
      height: 100px;
      background-color: #fbfdff;
      border: dashed 1px #c0ccda;
      border-radius: 5px;
      i {
        font-size: 30px;
        margin-top: 20px;
      }
      &-text {
        margin-top: -10px;
      }
    }
    .avatar {
      cursor: pointer;
    }
  }
  </style>