JSL_OrganizeInternalOAWeb/src/views/WorkLoadPage/I_Responsible.vue

<template>

    <a-breadcrumb>
        <a-breadcrumb-item>我负责的</a-breadcrumb-item>
        <!-- <a-breadcrumb-item><a href="">Application Center</a></a-breadcrumb-item>
        <a-breadcrumb-item><a href="">Application List</a></a-breadcrumb-item>
        <a-breadcrumb-item>An Application</a-breadcrumb-item> -->
    </a-breadcrumb>
    <div class="flex flex-row justify-between">
        <div>
            <!-- 第一个是 全部 所以独立出来 -->
            <a-checkable-tag
            v-model:checked="tagAll"
            @change="checked => handleClickAll(checked)"
            >
            全部
            </a-checkable-tag>
            <a-checkable-tag
            v-for="(tag, index) in tagsData"
            :key="tag.id"
            v-model:checked="selectTags[index]"
            @change="checked => handleChange(tag, checked)"
            >
            {{ tag.name }}
            </a-checkable-tag>
        </div>
        <div>
            <a-checkbox-group v-model:value="projStatus" :options="['进行中','已完成']" />
        </div>
    </div>
    <div>
        <a-card hoverable style="width: 240px">
          <template #cover>
            <img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />
          </template>
          <a-card-meta title="Europe Street beat">
            <template #description>www.instagram.com</template>
          </a-card-meta>
        </a-card>

    </div>
    <a-tooltip title="添加" class="fixed bottom-0 right-0 m-16">
      <!-- 这里显示错位 只好用flex  -->
        <a-button
         size="large"
         class="bg-sky-300 flex flex-row items-center justify-center"
         shape="circle"
         @click="open = true"
         >
         <template #icon>
          <PlusOutlined class=""/>
        </template>
        </a-button>
        <a-modal v-model:open="open" title="添加项目" @ok="handleOk">
          <a-form
            :label-col="labelCol"
            :wrapper-col="wrapperCol"
            layout="horizontal"
            style="max-width: 600px"
          >
            <a-form-item label="项目名称">
              <a-input v-model:value="addForm.name"/>
            </a-form-item>
            <a-form-item label="周期" v-model:value="addForm.cycle">
              <a-input />
            </a-form-item>   
            <a-form-item label="工作量">
              <a-input />
            </a-form-item>          
            <a-form-item label="状态">
              <a-select
                ref="select"
                v-model:value="value1"
                style="width: 120px"
                @focus="focus"
                @change="handleChange"
              >
                <a-select-option value="jack">Jack</a-select-option>
                <a-select-option value="lucy">Lucy</a-select-option>
                <a-select-option value="disabled" disabled>Disabled</a-select-option>
                <a-select-option value="Yiminghe">yiminghe</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="项目描述">
              <a-textarea v-model:value="value" placeholder="Basic usage" :rows="4" />
            </a-form-item>
            <a-form-item label="上传文档">
              <a-upload
                :default-file-list="defaultFileList"
                :customRequest="customRequest"
                :showUploadList="false"
              >
                <a-button icon="upload">Upload</a-button>
              </a-upload>
            </a-form-item>

        
          </a-form>
          <template #footer>
              <a-button key="back" @click="handleCancel">取消</a-button>
              <a-button key="submit" type="primary" @click="handleAdd">新增</a-button>
              <a-button key="submit" type="primary" @click="handleAddPublish">新增并发布</a-button>
            </template>
        </a-modal>
    </a-tooltip>
</template>
<script setup lang="ts">
import { reactive, ref ,computed,onMounted} from 'vue';
import { h } from 'vue';
import { SearchOutlined,StarOutlined,PlusOutlined } from '@ant-design/icons-vue';

import request from '@/js/request';

const tagsData = ref([]);
const selectTags = ref([false, false, false, false]);

const projStatus = ref();
const tagAll=ref(true)

const token = window.localStorage.getItem('token')

const projList=ref([])

const addForm=ref({
  name:'',
  cycle:'',
  workload:'',
  status:'',
  description:'',
  file:''
})


//当选中全部时，其他的都不选中
const handleClickAll=(checked)=>{
  if(checked){
    selectTags.value.forEach((item,index)=>{
      selectTags.value[index]=false
    })
    // 发送获取全部数据的请求
    request.projectGet(token).then(res=>{
      console.log(res.data.data)
    })
  }

}
// 当选中其他的时候， 全部 不选中
const handleChange = (tag, checked) => {
  if(checked){
    tagAll.value=false
  }
  else{
    let flag=true
    selectTags.value.forEach((item,index)=>{
      if(item){
        flag=false
      }
    })
    if(flag){
      tagAll.value=true
    }
  }
};



// 有关新增
const handleAdd=()=>{
  console.log('新增')

}





// 当组件挂载时 请求tag数据
onMounted(
  ()=>{
  
    // 设置标签
    request.getTagsProjectList(token).then(res=>{
      console.log(res.data.data)
      tagsData.value=res.data.data
    })
    // 默认获取全部数据
    request.projectGet(token).then(res=>{
      console.log(res)

    })
  }
)
</script>