YZProjectCloud/yanzhu-ui-vue3/src/components/CurrentProject/index.vue

<template>
  <div>
    <el-button type="primary" plain :icon="OfficeBuilding" @click="showProList">{{userStore.currentProId?userStore.currentProName:'所有项目'}}</el-button>
    
    <!--选择项目-->
    <el-dialog v-model="dialogVisible" title="选择切换项目" width="800">
      <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="68px">
      <el-form-item label="项目名称" prop="projectName">
        <el-input
          v-model="queryParams.projectName"
          placeholder="请输入项目名称"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        <el-button v-if="userStore.currentProId && isAdmin" type="danger" icon="CircleClose" @click="circleClose">取消选择项目</el-button>
      </el-form-item>
      </el-form>
      
      <el-table v-loading="loading" :data="projectDataList">
        <el-table-column type="index" label="序号" width="50" align="center" />
        <el-table-column prop="comName" label="所属公司" align="center" />
        <el-table-column prop="projectName" label="项目名称" align="center" />
        <!-- <el-table-column v-if="!isAdmin" label="默认项目" align="center" width="100">
          <template #default="scope">
            <el-rate :model-value="scope.$index==0?1:0" max="1" @change="changeDefault(scope.row.id)"/>
         </template>
        </el-table-column> -->
        <el-table-column prop="createTime" label="创建时间" align="center" width="120">
          <template #default="scope">
            <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template #default="scope">
          <el-button v-if="scope.row.id == userStore.currentProId" disabled link type="primary">已 选 中</el-button>
          <el-button v-if="scope.row.id != userStore.currentProId" link type="primary" icon="Switch" @click="changeDefault(scope.row.id)">切换项目</el-button>
        </template>
      </el-table-column>
      </el-table>

      <pagination
      v-show="total>0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getProjectList"
    />
    <template #footer>
        <div class="dialog-footer">
          <el-button @click="cancel">关 闭</el-button>
        </div>
      </template>
  </el-dialog>
  </div>
</template>

<script setup name="CurrentProject">
import { OfficeBuilding } from '@element-plus/icons-vue'
import { findMyProjectList } from "@/api/publics";
import { switchProject, cancelProject } from '@/api/login'
import { changeDefaultProject } from "@/api/manage/proProjectInfoUsers";

const { proxy } = getCurrentInstance();
import useUserStore from '@/store/modules/user'

const userStore = useUserStore()

const isAdmin = ref(false);
const defaultRate = ref(1);
// 显示dialog
const dialogVisible = ref(false);
const total = ref(0);
const loading = ref(true);
const projectDataList = ref([]);

const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10
  }
});

const { queryParams, form } = toRefs(data);

/** 查询项目列表 */
function getProjectList() {
  loading.value = true;
  findMyProjectList(queryParams.value).then(response => {
    projectDataList.value = response.rows;
    total.value = response.total;
    loading.value = false;
  });
}

// 取消按钮
function cancel() {
  dialogVisible.value = false;
  proxy.resetForm("queryRef");
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getProjectList();
}

/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef");
  handleQuery();
}

/** 改变默认项目 */
function changeDefault(proId) {
  if(isAdmin.value){
    switchProject(proId).then(res =>{
      if(res.code==200){
        window.location.reload();
      }
    })
  }else{
    changeDefaultProject(proId).then(response =>{
      switchProject(proId).then(res =>{
        if(res.code==200){
          window.location.reload();
        }
      })
    });
  }
}

/** 取消切换项目 */
function circleClose() {
  cancelProject().then(res =>{
    if(res.code==200){
      window.location.reload();
    }
  })
}

/** 显示项目列表 */
function showProList() {
  getProjectList();
  dialogVisible.value = true;
}

/** 初始化页面 */
function initPage() {
  let roles = userStore.roles;
  if(roles.includes("admin") || roles.includes("gsAdmin")){
    isAdmin.value = true;
  }else{
    isAdmin.value = false;
  }
}

initPage();
</script>
<style lang="scss" scope>
.el-dialog__body{
  margin-top: -30px;
  padding-bottom: 50px;
  .pagination-container{
    margin-top: 0px;
    .el-pagination{
      margin-right: 22px;
    }
  }
}
</style>