|
|
@@ -0,0 +1,140 @@
|
|
|
+<template>
|
|
|
+ <HcCard>
|
|
|
+ <template #header>
|
|
|
+ <div class="w-36">
|
|
|
+ <el-select v-model="searchForm.reportType" block clearable placeholder="选择审批类型" size="large">
|
|
|
+ <el-option v-for="item in reportTypes" :label="item.name" :value="item.key"/>
|
|
|
+ </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>
|
|
|
+ <HcTable indexName="编号" :column="tableColumn" :datas="tableData" :loading="tableLoading">
|
|
|
+ <template #taskName="{row}">
|
|
|
+ <span class="text-hover" @click="rowNameClick(row)">{{row.taskName}}</span>
|
|
|
+ </template>
|
|
|
+ <template #auditStatus="{row}">
|
|
|
+ <span class="text-green" v-if="row.auditStatus === '1'">已审核</span>
|
|
|
+ <span class="text-orange" v-if="row.auditStatus === '2'">待审批</span>
|
|
|
+ <span class="text-red" v-if="row.auditStatus === '3'">已驳回</span>
|
|
|
+ </template>
|
|
|
+ </HcTable>
|
|
|
+ <template #action>
|
|
|
+ <HcPages :pages="searchForm" @change="pageChange"/>
|
|
|
+ </template>
|
|
|
+ </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);
|
|
|
+const reportTypes = ref([
|
|
|
+ {name: '所有', key: '0'},
|
|
|
+ {name: '已审批', key: '1'},
|
|
|
+ {name: '待审批', key: '2'},
|
|
|
+ {name: '已驳回', key: '3'},
|
|
|
+])
|
|
|
+
|
|
|
+//监听
|
|
|
+watch(() => [
|
|
|
+ props.tableKey,
|
|
|
+], ([Key]) => {
|
|
|
+ isTableKey.value = Key
|
|
|
+})
|
|
|
+
|
|
|
+//搜索表单
|
|
|
+const searchForm = ref({
|
|
|
+ reportType: 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 = {
|
|
|
+ reportType: 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: 'taskName', name: '任务名称'},
|
|
|
+ {key: 'reportDate', name: '上报日期', width: '160', align: 'center'},
|
|
|
+ {key: 'auditDate', name: '审核日期', width: '160', align: 'center'},
|
|
|
+ {key: 'reportType', name: '上报类型', width: '120', align: 'center'},
|
|
|
+ {key: 'auditStatus', name: '审核状态', width: '100', align: 'center'},
|
|
|
+ {key: 'informant', name: '上报人', width: '120', align: 'center'},
|
|
|
+ {key: 'auditor', name: '审核人', width: '120', align: 'center'},
|
|
|
+])
|
|
|
+const tableData = ref([
|
|
|
+ {id: 1, taskName: '【任务描述】申请【任务转移】', reportDate: '2022-02-01', auditDate: '2022-02-01', reportType: '转移任务', auditStatus: '1', informant: '张三', auditor: '李四'},
|
|
|
+ {id: 2, taskName: '【任务描述】申请【任务转移】', reportDate: '2022-02-01', auditDate: '2022-02-01', reportType: '转移任务', auditStatus: '2', informant: '张三', auditor: '李四'},
|
|
|
+ {id: 3, taskName: '【任务描述】申请【任务转移】', reportDate: '2022-02-01', auditDate: '2022-02-01', reportType: '转移任务', auditStatus: '3', informant: '张三', auditor: '李四'},
|
|
|
+ {id: 4, taskName: '【任务描述】申请【任务转移】', reportDate: '2022-02-01', auditDate: '2022-02-01', reportType: '转移任务', auditStatus: '1', informant: '张三', auditor: '李四'},
|
|
|
+ {id: 5, taskName: '【任务描述】申请【任务转移】', reportDate: '2022-02-01', auditDate: '2022-02-01', reportType: '转移任务', auditStatus: '1', informant: '张三', auditor: '李四'},
|
|
|
+ {id: 6, taskName: '【任务描述】申请【任务转移】', reportDate: '2022-02-01', auditDate: '2022-02-01', reportType: '转移任务', auditStatus: '1', informant: '张三', auditor: '李四'},
|
|
|
+])
|
|
|
+const getTableData = () => {
|
|
|
+ //const key = isTableKey.value
|
|
|
+}
|
|
|
+
|
|
|
+//任务名称被点击
|
|
|
+const rowNameClick = (row) => {
|
|
|
+ router.push({
|
|
|
+ name: 'home-task-details', query: {
|
|
|
+ id: row.id,
|
|
|
+ type: isTableKey.value
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+
|
|
|
+</style>
|
