hac/src/views/task/plan/components/TaskTable.vue

<template>
    <HcCard>
        <template #header>
            <div class="w-36">
                <el-select v-model="searchForm.deptId" block clearable placeholder="选择部门" size="large">
                    <el-option v-for="item in department" :label="item.deptName" :value="item.id"/>
                </el-select>
            </div>
            <div class="w-36 ml-2">
                <el-select v-model="searchForm.taskStatus" block clearable placeholder="选择计划状态" size="large">
                    <el-option label="未完成" value="1"/>
                    <el-option label="已完成" value="2"/>
                    <el-option label="逾期完成" value="3"/>
                    <el-option label="逾期未完成" value="4"/>
                </el-select>
            </div>
            <div class="w-36 ml-4">
                <el-date-picker class="block" v-model="searchForm.startTime" type="month" value-format="YYYY-MM" placeholder="开始日期" clearable size="large"/>
            </div>
            <div class="mx-2">~</div>
            <div class="w-36">
                <el-date-picker class="block" v-model="searchForm.endTime" type="month" value-format="YYYY-MM" placeholder="结束日期" clearable size="large"/>
            </div>
            <div class="ml-4">
                <el-button size="large" type="primary" @click="searchClick">
                    <HcIcon name="search-2"/>
                    <span>搜索</span>
                </el-button>
            </div>
            <div class="ml-2">
                <el-button size="large" @click="resetClick">
                    <HcIcon name="close-circle"/>
                    <span>重置</span>
                </el-button>
            </div>
        </template>
        <template #extra>
            <el-button size="large" :type="isTableKey === 1?'primary':'info'" :disabled="isTableKey !== 1" hc-btn @click="showChangeState">
                <HcIcon name="edit-circle"/>
                <span>变更状态</span>
            </el-button>
        </template>
        <HcTable :column="tableColumn" :isCheck="isTableKey !== 'all'" :datas="tableData" :loading="tableLoading" @selection-change="tableSelectionChange"/>
        <template #action>
            <HcPages :pages="searchForm" @change="pageChange"/>
        </template>

        <!--变更状态-->
        <HcDialog bgColor="#ffffff" isToBody isTable :loading="changeStateLoading" :show="changeStateModal" title="变更任务状态" widths="62rem"
                  @close="closeChangeStateClick" @save="saveChangeStateClick">
            <div class="hac-change-state-dialog-body">
                <div class="hac-dialog-table">
                    <HcTable :isIndex="false" :column="tableStateColumn" :datas="tableStateData" :loading="tableStateLoading"/>
                </div>
                <div class="hac-dialog-form">
                    <HcCardItem scrollbar>
                        <el-form ref="formRef" :model="formModel" :rules="formRules" label-width="">
                            <el-form-item label="变更类别：" prop="updateType" size="large">
                                <el-radio-group v-model="formModel.updateType" size="large">
                                    <el-radio :label="1">已完成</el-radio>
                                    <el-radio :label="2" class="ml-8">任务转移</el-radio>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item label="完成时间：" prop="completionTime" class="w-72" v-if="formModel.updateType === 1">
                                <el-date-picker class="block" v-model="formModel.completionTime" format="YYYY-MM-DD HH:mm:ss" type="date" value-format="YYYY-MM-DD HH:mm:ss"/>
                            </el-form-item>
                            <template v-if="formModel.updateType === 2">
                                <el-form-item label="转移时间：" prop="transfer" class="w-72">
                                    <el-date-picker class="block" v-model="formModel.completionTime" format="YYYY-MM-DD HH:mm:ss" type="date" value-format="YYYY-MM-DD HH:mm:ss"/>
                                </el-form-item>
                                <el-form-item label="转移对象：" prop="type" size="large">
                                    <el-select class="block" v-model="formModel.transferObject"  filterable allow-create default-first-option :reserve-keyword="false">
                                        <el-option v-for="item in userList" :label="item.name" :value="item.id"/>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="转移原因：" prop="textContent">
                                    <el-input v-model="formModel.transferReason" :autosize="{ minRows: 3, maxRows: 5 }" placeholder="请输入文字说明" type="textarea"/>
                                </el-form-item>
                            </template>
                        </el-form>
                    </HcCardItem>
                </div>
            </div>
        </HcDialog>

    </HcCard>
</template>

<script setup>
import {ref, nextTick, watch,onMounted,onActivated} from "vue";
import {useRouter} from 'vue-router'
import {getArrValue,getObjValue,formValidate,arrToId} from "js-fast-way"
import planApi from '~api/task/plan.js';
import { getdepartmentList,getuserList} from "~api/other";
import {useAppStore} from "~src/store";
const useAppState = useAppStore();

const router = useRouter()
onActivated(()=>{
    getTableData()
    getDepartmentDict()
    getUserDict()
})
const department=ref([])
//获取部门列表
const getDepartmentDict=async()=>{
    const {error, code, data} = await getdepartmentList({deptType:2})
    if (!error && code === 200) {
        department.value = getArrValue(data)

    } else {
        department.value = []

    }
}
//获取所有员工
const userList=ref([])
const getUserDict=async()=>{
    const {error, code, data} = await getuserList({tenantId:useAppState.tenantId})
    if (!error && code === 200) {
        userList.value = getArrValue(data)

    } else {
        userList.value = []

    }
}
//参数
const props = defineProps({
    tableKey: {
        type: Number,
        default: 1
    }
})

//变量
const isTableKey = ref(props.tableKey);

//监听
watch(() => [
    props.tableKey,
], ([Key]) => {
    console.log(Key,'key');
    isTableKey.value = Key
    searchForm.value.selectType=Key
    getTableData()
   
})

//搜索表单
const searchForm = ref({
    deptId: null, selectType:isTableKey.value, planStartTime: null, planEndTime: null,taskStatus:null,
    current: 1, size: 20, total: 0
})

//搜索
const searchClick = () => {
    searchForm.value.current = 1;
    getTableData()
}

//重置
const resetClick = () => {
    searchForm.value = {
        deptId: null, selectType:isTableKey.value, planStartTime: null, planEndTime: null,taskStatus:null,
        current: 1, size: 20, total: 0
    }
}

//分页被点击
const pageChange = ({current, size}) => {
    searchForm.value.current = current
    searchForm.value.size = size
    getTableData()
}

//获取数据
const tableLoading = ref(false)
const tableColumn = ref([
    {key: 'projectName', name: '任务所属项目'},
    {key: 'statusName', name: '状态', width: '120', align: 'center'},
    {key: 'taskDesc', name: '任务描述'},
    {key: 'planTarget', name: '完成指标'},
    {key: 'startAndEndDate', name: '计划起止日期', width: '220', align: 'center'},
    {key: 'taskUserName', name: '任务人', width: '120', align: 'center'},
])
const tableData = ref([])
const getTableData = async() => {
    //const key = isTableKey.value
    tableLoading.value = true
    const {error, code, data} = await planApi.getPage(searchForm.value)
    tableLoading.value = false
    if (!error && code === 200) {
        tableData.value = getArrValue(data['records'])
        searchForm.value.total = data['total'] || 0
    } else {
        tableData.value = []
        searchForm.value.total = 0
    }
}

//表格选择
const tableRows = ref([])
const tableSelectionChange = (rows) => {
    tableRows.value = rows
}

//变更状态的弹窗
const changeStateLoading = ref(false)
const changeStateModal = ref(false)

//显示变更状态的弹窗
const showChangeState = () => {
    changeStateLoading.value = false
    changeStateModal.value = true
    formModel.value={}
    tableStateData.value=tableRows.value
}


//变更任务状态表格
const tableStateLoading = ref(false)
const tableStateColumn = [
    {key: 'planName', name: '任务名称'},
    {key: 'taskDesc', name: '任务描述'},
    {key: 'statusName', name: '状态', width: '120', align: 'center'},
]
const tableStateData = ref([
    {id: 1, key1: 'xxxxxxxxx', key2: 'xxxxxxxxx',  key3: '未完成'},
    {id: 2, key1: 'xxxxxxxxx', key2: 'xxxxxxxxx',  key3: '未完成'},
    {id: 3, key1: 'xxxxxxxxx', key2: 'xxxxxxxxx',  key3: '未完成'},
    {id: 4, key1: 'xxxxxxxxx', key2: 'xxxxxxxxx',  key3: '未完成'},
    {id: 5, key1: 'xxxxxxxxx', key2: 'xxxxxxxxx',  key3: '未完成'},
])


//任务操作数据
const formRef = ref(null)
const formModel = ref({
    updateType: '1',
})
const formRules = {
    updateType: {
        required: true,
        trigger: 'blur',
        message: "请选择变更类别"
    },
}


//关闭变更状态弹窗
const closeChangeStateClick = () => {
    changeStateLoading.value = false
    changeStateModal.value = false
}

//提交变更状态弹窗

const saveChangeStateClick = async() => {
    console.log(formModel.value,'formModel');
    const res = await formValidate(formRef.value)
    const ids = arrToId(tableRows.value, 'id')
    formModel.value.taskIds=ids
    if(res){
        changeStateLoading.value=true
        const {error, code, data,msg} = await planApi.submit( formModel.value)
        changeStateLoading.value=false
        if (!error && code === 200) {
            window.$message.success(msg)
            getTableData()
        } else{
            window.$message.warning(msg)
        }
    }
    changeStateLoading.value = false
    changeStateModal.value = false
}
</script>

<style lang="scss" scoped>
.hac-change-state-dialog-body {
    position: relative;
    height: 100%;
    .hac-dialog-table {
        position: relative;
        height: 40%;
    }
    .hac-dialog-form {
        position: relative;
        height: 60%;
        padding-top: 20px;
    }
}
</style>

<style lang="scss">
.hac-change-state-dialog-body .hac-dialog-form .hc-card-item-box {
    background: #f7f7f8;
}
</style>