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

<template>
    <HcCard>
        <template #header>
            <div class="w-36">
                <el-select v-model="searchForm.department" block clearable placeholder="选择部门" size="large">
                    <el-option label="研发部门" value="1"/>
                    <el-option label="业务部门" value="2"/>
                    <el-option label="人事部门" value="3"/>
                </el-select>
            </div>
            <div class="w-36 ml-2">
                <el-select v-model="searchForm.state" 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="danger" hc-btn v-if="isTableKey === 'links'">
                <HcIcon name="close-circle"/>
                <span>取消关联</span>
            </el-button>
            <el-button size="large" type="success" hc-btn @click="relevanceClick">
                <HcIcon name="link" :line="false"/>
                <span>关联任务</span>
            </el-button>
            <el-button size="large" :type="isTableKey === 'user'?'primary':'info'" :disabled="isTableKey !== 'user'" 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 isRowFooter :loading="relatedLoading" :show="relatedModal" title="关联任务" widths="62rem" @close="closeRelatedClick">
            <div class="hac-diy-dialog-body">
                <div class="hac-dialog-header">
                    <div class="w-36">
                        <el-select v-model="searchBudgetForm.department" block clearable placeholder="选择部门" size="large">
                            <el-option label="研发部门" value="1"/>
                            <el-option label="业务部门" value="2"/>
                            <el-option label="人事部门" value="3"/>
                        </el-select>
                    </div>
                    <div class="w-36 ml-2">
                        <el-select v-model="searchBudgetForm.state" 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-2">
                        <el-select v-model="searchBudgetForm.user" block clearable placeholder="选择任务人" size="large">
                            <el-option label="张三" value="1"/>
                            <el-option label="李四" value="2"/>
                        </el-select>
                    </div>
                    <div class="ml-4">
                        <el-button size="large" type="primary">
                            <HcIcon name="search-2"/>
                            <span>搜索</span>
                        </el-button>
                    </div>
                    <div class="ml-2">
                        <el-button size="large">
                            <HcIcon name="close-circle"/>
                            <span>重置</span>
                        </el-button>
                    </div>
                </div>
                <div class="hac-dialog-table">
                    <HcTable :column="tableBudgetColumn" :datas="tableBudgetData" :loading="tableBudgetLoading">
                        <template #action="{row,index}">
                            <el-button plain size="small" type="primary" @click="row.isRelated = true" v-if="!row.isRelated">
                                <HcIcon name="link" :line="false"/>
                                <span>关联</span>
                            </el-button>
                            <el-button plain size="small" type="danger" @click="row.isRelated = false" v-else>
                                <HcIcon name="link-unlink-m" :line="false"/>
                                <span>取消</span>
                            </el-button>
                        </template>
                    </HcTable>
                </div>
            </div>
            <template #leftRowFooter>
                <el-button size="large" @click="closeRelatedClick">
                    <HcIcon name="close"/>
                    <span>取消</span>
                </el-button>
                <el-button size="large" type="primary" @click="saveRelatedClick">
                    <HcIcon name="check"/>
                    <span>确认关联</span>
                </el-button>
            </template>
            <template #rightRowFooter>
                <HcPages :pages="searchBudgetForm" @change="pageBudgetChange"/>
            </template>
        </HcDialog>

        <!--变更状态-->
        <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="type" size="large">
                                <el-radio-group v-model="formModel.type" size="large">
                                    <el-radio label="1">已完成</el-radio>
                                    <el-radio label="2">延期执行</el-radio>
                                    <el-radio label="3">任务转移</el-radio>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item label="完成时间：" prop="finish_time" class="w-72" v-if="formModel.type === '1'">
                                <el-date-picker class="block" v-model="formModel.finish_time" format="YYYY-MM-DD" type="date" value-format="YYYY-MM-DD"/>
                            </el-form-item>
                            <el-form-item label="延期时间：" prop="delay_time" class="w-72" v-if="formModel.type === '2'">
                                <el-date-picker class="block" v-model="formModel.delay_time" format="YYYY-MM-DD" type="date" value-format="YYYY-MM-DD"/>
                            </el-form-item>
                            <el-form-item label="延期原因：" prop="delay_cause" v-if="formModel.type === '2'">
                                <el-input v-model="formModel.delay_cause" :autosize="{ minRows: 3, maxRows: 5 }" placeholder="请输入文字说明" type="textarea"/>
                            </el-form-item>
                            <div class="flex" v-if="formModel.type === '3'">
                                <el-form-item label="转移时间：" prop="transfer" class="w-64 mr-4">
                                    <el-date-picker class="block" v-model="formModel.transfer" format="YYYY-MM-DD" type="date" value-format="YYYY-MM-DD"/>
                                </el-form-item>
                                <el-form-item label="转移后剩余工作任务完成日期：" prop="complete" class="w-96 ml-4">
                                    <el-date-picker class="block" v-model="formModel.complete" format="YYYY-MM-DD" type="date" value-format="YYYY-MM-DD"/>
                                </el-form-item>
                            </div>
                            <el-form-item label="转移对象：" prop="type" size="large" v-if="formModel.type === '3'">
                                <el-select class="block" v-model="formModel.user" multiple filterable allow-create default-first-option :reserve-keyword="false">
                                    <el-option label="张三" value="1"/>
                                    <el-option label="李四" value="2"/>
                                    <el-option label="王五" value="3"/>
                                    <el-option label="王麻子" value="4"/>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="转移原因：" prop="textContent" v-if="formModel.type === '3'">
                                <el-input v-model="formModel.textContent" :autosize="{ minRows: 3, maxRows: 5 }" placeholder="请输入文字说明" type="textarea"/>
                            </el-form-item>
                        </el-form>
                    </HcCardItem>
                </div>
            </div>
        </HcDialog>

    </HcCard>
</template>

<script setup>
import {ref, nextTick, watch} from "vue";
import {useRouter} from 'vue-router'
import {getArrValue} from "js-fast-way"

const router = useRouter()

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

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

//监听
watch(() => [
    props.tableKey,
], ([Key]) => {
    isTableKey.value = Key
})

//搜索表单
const searchForm = ref({
    department: null, state: null, startTime: null, endTime: null,
    current: 1, size: 20, total: 0
})

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

//重置
const resetClick = () => {
    searchForm.value = {
        department: null, state: null, startTime: null, endTime: 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: 'name', name: '计划名称'},
    {key: 'key', name: '状态', width: '120', align: 'center'},
    {key: 'key1', name: '任务描述'},
    {key: 'key2', name: '完成指标'},
    {key: 'key3', name: '完成期限', width: '160', align: 'center'},
    {key: 'key4', name: '任务人', width: '120', align: 'center'},
])
const tableData = ref([
    {id: 1, name: '【任务描述】申请【任务转移】', key: '未完成', key1: 'xxxxxxxxxx', key2: 'xxxxxxxx', key3: '2022-02-01', key4: '张三'},
    {id: 2, name: '【任务描述】申请【任务转移】', key: '未完成', key1: 'xxxxxxxxxx', key2: 'xxxxxxxx', key3: '2022-02-01', key4: '张三'},
    {id: 3, name: '【任务描述】申请【任务转移】', key: '未完成', key1: 'xxxxxxxxxx', key2: 'xxxxxxxx', key3: '2022-02-01', key4: '张三'},
])
const getTableData = () => {
    //const key = isTableKey.value
}

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

//关联任务弹窗
const relatedLoading = ref(false)
const relatedModal = ref(false)

//关联任务
const relevanceClick = () => {
    relatedLoading.value = false
    relatedModal.value = true
}

//关联任务分页和搜索
const searchBudgetForm = ref({current: 1, size: 20, total: 0})
const pageBudgetChange = ({current, size}) => {
    searchBudgetForm.value.current = current
    searchBudgetForm.value.size = size
}

//关联任务表格
const tableBudgetLoading = ref(false)
const tableBudgetColumn = [
    {key: 'key', name: '任务描述'},
    {key: 'key1', name: '任务人', width: '120', align: 'center'},
    {key: 'key2', name: '任务起止日期', width: '220', align: 'center'},
    {key: 'key3', name: '状态', width: '120', align: 'center'},
    {key: 'action', name: '操作', width: '90', align: 'center'},
]
const tableBudgetData = ref([
    {id: 1, key: 'xxxxxxxxx', key1: '张三', key2: '2022-07-01~2027-04-12', key3: '未完成'},
    {id: 2, key: 'xxxxxxxxx', key1: '张三', key2: '2022-07-01~2027-04-12', key3: '未完成'},
    {id: 3, key: 'xxxxxxxxx', key1: '张三', key2: '2022-07-01~2027-04-12', key3: '未完成'},
    {id: 4, key: 'xxxxxxxxx', key1: '张三', key2: '2022-07-01~2027-04-12', key3: '未完成'},
])

//关闭关联任务弹窗
const closeRelatedClick = () => {
    relatedLoading.value = false
    relatedModal.value = false
}

//提交关联任务弹窗
const saveRelatedClick = () => {
    relatedLoading.value = false
    relatedModal.value = false
}

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

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


//变更任务状态表格
const tableStateLoading = ref(false)
const tableStateColumn = [
    {key: 'key1', name: '任务名称'},
    {key: 'key2', name: '任务描述'},
    {key: 'key3', 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({
    type: '1',
})
const formRules = {
    title: {
        required: true,
        trigger: 'blur',
        message: "请输入节点名称"
    },
}


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

//提交变更状态弹窗
const saveChangeStateClick = () => {
    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>