for_client/src/views/tasks/sign-admin.vue

<template>
    <div class="hc-layout-box">
        <HcCard :scrollbar="false" actionSize="lg">
            <template #header>
                <div class="w-32">
                    <el-select v-model="searchForm.tasks" block clearable placeholder="电签任务人" size="large">
                        <el-option v-for="item in tasksData" :label="item.dictValue" :value="item.dictKey"/>
                    </el-select>
                </div>
                <div class="w-32 ml-3">
                    <el-select v-model="searchForm.contract" block clearable placeholder="合同段" size="large"
                               @change="ContractIdChange">
                        <el-option v-for="item in contractList" :label="item.name" :value="item.id"/>
                    </el-select>
                </div>
                <div class="w-32 ml-3">
                    <el-select v-model="searchForm.status" block clearable placeholder="电签状态" size="large">
                        <el-option v-for="item in statusData" :label="item.dictValue" :value="item.dictKey"/>
                    </el-select>
                </div>
                <div class="w-64 ml-3">
                    <HcDatePicker :dates="betweenTime" clearable size="large" @change="betweenTimeUpdate"/>
                </div>
                <div class="w-56 ml-3">
                    <el-input v-model="searchForm.queryValue" block clearable placeholder="请输入名称关键词检索"
                              size="large" @keyup="keyUpEvent"/>
                </div>
                <div class="ml-2">
                    <el-button size="large" type="primary" @click="searchClick">
                        <HcIcon name="search-2"/>
                        <span>搜索</span>
                    </el-button>
                </div>
            </template>
            <template #extra>
                <HcTooltip keys="tasks_sign_key_renewal">
                    <el-button hc-btn type="primary">
                        <HcIcon name="restart"/>
                        <span>一键重签</span>
                    </el-button>
                </HcTooltip>
            </template>
            <HcTable ref="tableListRef" :column="tableListColumn" :datas="tableData" :loading="tableLoading" isCheck
                     @selection-change="tableSelectionChange"/>
            <template #action>
                <HcPages :pages="searchForm" @change="pageChange"/>
            </template>
        </HcCard>
    </div>
</template>

<script setup>
import {ref, onMounted} from "vue";
import {useAppStore} from "~src/store";
import {getObjValue, getArrValue} from "js-fast-way"

//变量
const useAppState = useAppStore()
const projectId = ref(useAppState.getProjectId);
const contractId = ref(useAppState.getContractId);
const projectInfo = ref(useAppState.getProjectInfo);

//渲染完成
onMounted(() => {
    const project = getObjValue(projectInfo.value)
    contractList.value = getArrValue(project['contractInfoList'])
    getTableData()
})

const tasksData = ref([])
const statusData = ref([])

//合同段
const contractList = ref([])
const ContractIdChange = () => {

}

//日期时间被选择
const betweenTime = ref(null)
const betweenTimeUpdate = ({val, arr}) => {
    betweenTime.value = arr
    searchForm.value.startTime = val['start']
    searchForm.value.endTime = val['end']
}

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

//回车搜索
const keyUpEvent = (e) => {
    if (e.key === "Enter") {
        searchForm.value.current = 1;
        getTableData()
    }
}

//重新搜索数据
const searchClick = () => {
    searchForm.value.current = 1
    getTableData()
}

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

//获取数据
const tableLoading = ref(false)
const tableListData = ref([])
const getTableData = async () => {

}

//多选
const tableListRef = ref(null)
const tableCheckedKeys = ref([]);
const tableSelectionChange = (rows) => {
    tableCheckedKeys.value = rows.filter((item) => {
        return (item ?? '') !== '';
    })
}
const tableListColumn = ref([
    {key: 'name', name: '流程名称'},
    {key: 'date', name: '任务状态'},
    {key: 'status', name: '电签状态'},
    {key: 'batch', name: '审批时间'},
    {key: 'person', name: '电签失败原因'},
    {key: 'tesk', name: '上报人'},
    {key: 'tesk1', name: '电签任务人'}
])
const tableData = ref([
    {
        num: 1,
        name: "test1",
        date: "已审批-电签失败",
        status: "电签失败",
        batch: "2022-05-16 13:35",
        person: "xxxxx原因",
        tesk: "李四",
        tesk1: '张三'
    },
    {
        num: 2,
        name: "test2",
        date: "已审批-电签中",
        status: "电签中",
        batch: "2022-05-16 13:35",
        person: "xxxxx原因",
        tesk: "李四",
        tesk1: '张三'
    },
    {
        num: 3,
        name: "test3",
        date: "已审批完成",
        status: "电签完成",
        batch: "2022-05-16 13:35",
        person: "xxxxx原因",
        tesk: "李四",
        tesk1: '张三'
    },
    {
        num: 4,
        name: "test4",
        date: "已审批-电签中",
        status: "等待电签",
        batch: "2022-05-16 13:35",
        person: "xxxxx原因",
        tesk: "李四",
        tesk1: '张三'
    },
    {
        num: 5,
        name: "test5",
        date: "xxxxxxxxxx",
        status: "xxxx",
        batch: "2022-05-16 13:35",
        person: "xxxxx原因",
        tesk: "李四",
        tesk1: '张三'
    },
    {
        num: 6,
        name: "test6",
        date: "xxxxxxxxxx",
        status: "xxxxxx",
        batch: "2022-05-16 13:35",
        person: "xxxxx原因",
        tesk: "李四",
        tesk1: '张三'
    },
]);
</script>

<style lang="scss" scoped>
.hc-layout-box {
    position: relative;
    height: 100%;
}
</style>