usky-web-mobile/src/pages/business/common/projectMange/list/index.vue

<template>
  <u-sticky class="shadow-default" bgColor="#fff" style="top: 0">
    <u-navbar :titleStyle="{ color: '#000' }" :autoBack="true" title="项目列表" :placeholder="true" :safeAreaInsetTop="true" bgColor="#fff">
      <template #left>
        <view class="u-navbar__content__left__item">
          <u-icon name="arrow-left" size="20" color="#000"></u-icon>
        </view>
      </template>
      <template #right>
        <view class="u-navbar__content__right__item">
          <u-icon name="plus" size="20" color="#000" @click="handleSubmit('insert')"></u-icon>
        </view>
      </template>
    </u-navbar>
    <u-tabs
      :list="tabsList"
      :current="tabsCurrent"
      @click="tabsClick"
      lineColor="#333"
      :activeStyle="{ color: '#333', fontSize: '14px' }"
      :inactiveStyle="{ color: '#909399', fontSize: '14px' }"
      :scrollable="false"
    ></u-tabs>
  </u-sticky>
  <oa-scroll
    customClass="list-container scroll-height"
    :pageSize="pageSize"
    :total="total"
    :isSticky="true"
    :customStyle="{
      //#ifdef APP-PLUS || MP-WEIXIN
      height: 'calc(100vh - 132px)',
      //#endif
      //#ifdef H5
      height: 'calc(100vh - 132px)',
      //#endif
    }"
    :refresherLoad="true"
    :refresherEnabled="true"
    :refresherDefaultStyle="'none'"
    :refresherThreshold="44"
    :lowerThreshold="44"
    :refresherBackground="'#f5f6f7'"
    @load="load"
    @refresh="refresh"
    :data-theme="'theme-' + proxy.$settingStore.themeColor.name"
  >
    <template #default>
      <view class="projectSearchBox" >
        <u-input v-model="projectTypeName" disabledColor="#fff" disabled clearable  @click="handleAction('项目类型',project_type)" placeholder="项目类型" suffixIcon="arrow-down" suffixIconStyle="color: #909399" />        
        <u-input v-model="projectName" placeholder="请输入项目名称"  clearable prefixIcon="search" size="small" />
        <!-- <u-button   type="primary" @click="selectListApi">搜索</u-button> -->
        <u-picker
          :show="actionShow"
          :columns="projectTypeList"
          title="请选择项目类型"
          keyName="label"
          visibleItemCount="6"
          :closeOnClickOverlay="true"
          @close="actionShow = false"
          @cancel="actionShow = false"
          @confirm="selectAction"
        ></u-picker>

      </view>      		
      <view class="menu-list m0">
        <view class="list-cell" style="color: #666666; line-height: 25px" v-for="(base, index) in dataList" :key="index">
          <view class="content-area-top menu-item">
            <view class="content-area-top-name" style="color: #559AFF;" @click="toProjectMange(base.id)">{{ base.projectName }} </view>
            <u-icon class="content-area-top-icon" name="more-dot-fill" size="20" color="#000" @click="moreClick(base)"></u-icon>
          </view>
          <view class="content-area-row_wrap menu-item">
            <view class="content-area-row_wrap-view"> 负责人： {{ proxy.$common.mapping("nickName", "userId", base.projectHead, userDate) }} </view>
            <view class="content-area-row_wrap-view">
              状态：
              <uni-tag :text='proxy.$common.mapping("label", "value", base.projectStatus, project_status)' :type='proxy.$common.mapping("elTagType", "value", base.projectStatus, project_status)' />
            </view>
            <view class="content-area-row_wrap-view">
              类型：
              <uni-tag :text='proxy.$common.mapping("label", "value", base.projectStatus, project_type)' :type='proxy.$common.mapping("elTagType", "value", base.projectStatus, project_type)' />
            </view>
            <view class="content-area-row_wrap-view" style="display: block">
              成员：<span>{{ proxy.$common.mapping("nickName", "userId", base.projectMember, userDate) }} </span>
            </view>
          </view>
        </view>
      </view>
    </template>
  </oa-scroll>

  <oa-tabbar :tabbarValue="2" :tabbarList="proxy.$constData.projectTabbar" :isSwitchTab="false"></oa-tabbar>

  <u-popup :show="popup.show" mode="bottom" bgColor="#fff" :round="10" @close="popup.show = false">
    <view
      :style="{
        borderTopLeftRadius: '10px',
        borderTopRightRadius: '10px',
        overflow: 'hidden',
      }"
    >
      <u-button
        class="custom-style"
        type="info"
        size="normal"
        text="加入项目"
        :customStyle="{
          height: '50px',
          color: '#3c9cff',
          borderWidth: 0,
          borderRadius: 0,
          borderBottomWidth: '1px',
        }"
        @click="handleModal('join', `确认加入名为 “ ${eventList.projectName} ” 的项目？`)"
        v-if="eventList.projectMember.indexOf(useStore.userId) == -1"
      ></u-button>
      <u-button
        class="custom-style"
        type="info"
        size="normal"
        text="退出项目"
        :customStyle="{
          height: '50px',
          color: '#f9ae3d',
          borderWidth: 0,
          borderRadius: 0,
          borderBottomWidth: '1px',
        }"
        @click="handleModal('exit', `确认退出名为 “ ${eventList.projectName} ” 的项目？`)"
        v-if="eventList.projectMember.indexOf(useStore.userId) != -1"
      ></u-button>
      <u-button
        class="custom-style"
        type="info"
        size="normal"
        text="编辑项目"
        :customStyle="{
          height: '50px',
          color: '#3c9cff',
          borderWidth: 0,
          borderRadius: 0,
          borderBottomWidth: '1px',
        }"
        @click="handleSubmit('update', eventList)"
        v-if="eventList.projectHead == useStore.userId"
      ></u-button>
      <u-button
        class="custom-style"
        type="info"
        size="normal"
        text="删除项目"
        :customStyle="{
          height: '50px',
          color: '#f56c6c',
          borderWidth: 0,
          borderRadius: 0,
          borderBottomWidth: '3px',
        }"
        @click="handleModal('delete', `确认删除名为 “ ${eventList.projectName} ” 的项目？`)"
        v-if="eventList.projectHead == useStore.userId"
      ></u-button>
      <u-button
        class="custom-style"
        type="info"
        size="normal"
        text="取消"
        :customStyle="{
          height: '50px',
          color: '#3c9cff',
          border: 'none',
          borderRadius: 0,
        }"
        @click="popup.show = false"
      ></u-button>
    </view>
  </u-popup>
  <u-modal
    :show="modal.show"
    title="操作提醒"
    :content="modal.content"
    :showCancelButton="true"
    :closeOnClickOverlay="true"
    @confirm="handleSubmit(state.modal.type, eventList)"
    @cancel="modal.show = false"
    @close="modal.show = false"
  ></u-modal>
</template>

<script setup>
/*----------------------------------依赖引入-----------------------------------*/
import { onLoad, onShow, onReady, onHide, onLaunch, onNavigationBarButtonTap, onPageScroll } from "@dcloudio/uni-app";
import { ref, reactive, computed, getCurrentInstance, toRefs, inject,watchEffect} from "vue";
/*----------------------------------接口引入-----------------------------------*/
import { projectApi } from "@/api/business/project.js";
import { dUserList } from "@/api/system/user.js";
/*----------------------------------组件引入-----------------------------------*/
/*----------------------------------store引入-----------------------------------*/
import { useStores } from "@/store/modules/index";
/*----------------------------------公共方法引入-----------------------------------*/
/*----------------------------------公共变量-----------------------------------*/
const { proxy } = getCurrentInstance();

const useStore = useStores();
const { project_type,project_status } = proxy.useDict("project_type","project_status");

/*----------------------------------变量声明-----------------------------------*/
const state = reactive({
  loading: false,
  tabsList: [
    { name: "全部", value: "" },
    { name: "我负责", value: 1 },
    { name: "我参与", value: 2 },
  ],
  tabsCurrent: 0,

  dataList: [],
  pageSize: 20,
  current: 1,
  total: 0,
  userDate: [],
  popup: {
    show: false, //弹窗显示
    content: "", //提示信息
  },
  modal: {
    type: "", //操作类型
    show: false, //弹窗显示
    content: "", //提示信息
  },
  eventList: {}, //数据存储
  projectName:'',
  projectTypeName: "", //项目类型名称
  actionShow: false,
  projectType: "", //项目类型
  projectTypeList:[[]],    
});

const { tabsList, tabsCurrent, dataList, pageSize, current, total, userDate, popup, modal, eventList,array,index,projectTypeName,actionShow,projectType,projectTypeList,projectName} = toRefs(state);


/**
 * @action弹出框点击事件
 */
 function handleAction(value,event, index, ind) {
  if (value == "项目类型") {
    state.projectTypeList[0] = event
  }

  state.actionShow = true;
}

/**
 * @action弹出框选择事件
 */
 function selectAction(e) {
   state.projectType = e.value[0].value;
   state.projectTypeName = e.value[0].label;
   state.actionShow = false;
}

/**
 * @页面初始化
 */
function init() {
  dUserList().then((res) => {
    state.userDate = res.data;
  });
  selectListApi();
}

/**
 * 操作弹框提醒
 * @param type  操作类型
 * @param content 提示内容
 */
function handleModal(type, content) {
  state.modal.show = true;
  state.modal.type = type;
  state.modal.content = content;
}

/** 确定按钮点击事件 */
function handleSubmit(type, item) {
  if (type === "insert") {
    proxy.$tab.navigateTo(`/pages/business/common/projectMange/list/addEdit`);
  } else if (type === "update") {
    proxy.$tab.navigateTo(`/pages/business/common/projectMange/list/addEdit?id=${item.id}`);
  } else if (type === "delete") {
    projectApi()
      .ProjectsDelete(item.id)
      .then(() => {
        proxy.$modal.msg("项目删除成功！");
        selectListApi();
      })
      .catch((errors) => {
        proxy.$modal.msg(errors);
      });
  } else if (type === "exit") {
    projectApi()
      .ProjectsExit(item.id)
      .then(() => {
        proxy.$modal.msg("项目退出成功！");
        selectListApi();
      })
      .catch((errors) => {
        proxy.$modal.msg(errors);
      });
  } else if (type === "join") {
    projectApi()
      .ProjectsJoin(item.id)
      .then(() => {
        proxy.$modal.msg("项目加入成功！");
        selectListApi();
      })
      .catch((errors) => {
        proxy.$modal.msg(errors);
      });
  }

  state.modal.show = false;
  state.popup.show = false;
}

/** 更多按钮点击事件 */
function moreClick(event) {
  state.popup.show = true;
  state.eventList = event;
}

/**
 * @列表查询
 * @api接口查询
 */
function selectListApi() {
  state.loading = true;

  projectApi()
    .ProjectsList({
      projectAscription: state.tabsList[state.tabsCurrent].value,
      pageNum: state.current,
      pageSize: state.pageSize,
      projectType: state.projectType,
      projectName: state.projectName,
    })
    .then((requset) => {
      state.dataList = requset.data.records;
      state.total = requset.data.total;
      state.loading = false;
    })
    .catch((err) => {
      state.loading = false;
    });
}

/**
 * @scrollView加载数据
 */
function load() {
  state.pageSize += 10;
  init();
}

/**
 * @scrollView刷新数据
 */
function refresh() {
  state.pageSize = 20;
  init();
}

/**
 * @tabs点击事件
 */
function tabsClick(e) {
  state.tabsCurrent = e.index;
  state.projectName='';
  state.projectType='';
  state.projectTypeName=''
  init();
}
/**
 * 跳转项目概览
 * @param id 项目id
 */
function toProjectMange(id) {
  proxy.$tab.navigateTo(`/pages/business/common/projectMange/overview/index?id=${id}`);
}

onReady(() => {});

onShow(() => {
  init();
  //调用系统主题颜色
  proxy.$settingStore.systemThemeColor([1]);
});

watchEffect(() => {
  selectListApi();
});

onLoad((options) => {});
</script>
<style lang="scss" scoped>
:deep(.u-modal__content) {
  font-size: 14px;
  justify-content: left;
}
</style>
<style lang="scss" scoped>
.projectSearchBox {
  margin:20px 4% ;width:92%;vertical-align:middle;
  position:relative;
  display:flex;
  :deep(.u-input--radius, .u-input--square){
      border-radius:0
    }
  
  .u-input{
   display:inline-block;background:#fff;height:34px;line-height:34px;padding:0 5px;
    .uni-input-input{
      font-size:12px!important;
    }
    :deep(.u-input__content__prefix-icon){
      position:absolute;
      right:8px;
       .uicon-search{
        font-size:16px
      }
    }
  }
  .u-input:first-child{
    flex:2;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    border-right:none;
  }
  .u-input:nth-child(2){
    flex:4;
    // width:70%;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    // border-left:none
  }
  .u-popup{
    flex:0;
  }
  .u-button{
    width:50px;
    position:absolute;
    right:0px;
    top:0;
    height:32px;
    line-height:32px;
   

  }
  
}
.list-container {
  .content-area {
    &-top {
      font-size: 16px;
      font-weight: 600;
      color: #000000;
      width: 100%;
      float: right;
      &-time {
        max-width: 70%;
        margin: auto 0;
        font-size: 14px;
        color: rgb(102, 102, 102);
      }

      &-name {
        font-size: 14px;
        max-width: 70%;
        text-align: left;
        color: #000;
      }

      &-status {
        max-width: 30%;
        margin: auto 0 auto auto;
        font-size: 12px;
        color: #ffffff;
        padding: 0 5px;
        border-radius: 20px;
        line-height: 20px;
      }

      &-icon {
        max-width: 30%;
        margin: auto 0 auto auto;
      }
    }

    &-row_wrap {
      font-size: 13px;
      flex-flow: row wrap;

      &-view {
        display: flex;
        min-width: 100%;
        > .iconfont {
          font-size: 14px;
          color: #909399;
          margin-left: 5px;
        }

        &-status {
          margin: auto 0 auto 0;
          font-size: 12px;
          font-weight: 600;
          color: #ffffff;
          padding: 0 5px;
          border-radius: 20px;
          line-height: 20px;
        }
      }
    }
  }
}
:deep(.uni-tag){
  padding:0px 2px;
  height:20px;
  line-height: 20px !important;
  border-radius: 10px;
}
</style>