任务审批修改

src/views/home/components/TaskTable.vue

@@ -1,44 +1,46 @@
 <template>
     <HcCard>
         <template #header>
-            <div class="w-36 mr-4" v-if="isTableKey !== '1'">
+            <div v-if="isTableKey !== '1'" class="w-36 mr-4">
                 <el-select v-model="searchForm.selectStatus" block clearable placeholder="选择审批状态" size="large">
-                    <el-option v-for="item in reportTypes" :label="item.name" :value="item.key"/>
+                    <el-option v-for="item in reportTypes" :label="item.name" :value="item.key" />
                 </el-select>
             </div>
             <div class="w-36 mr-4">
                 <el-select v-model="searchForm.taskType" block clearable placeholder="选择上报类型" size="large">
-                    <el-option v-for="item in reportings" :label="item.dictName" :value="item.dictValue"/>
+                    <el-option v-for="item in reportings" :label="item.dictName" :value="item.dictValue" />
                 </el-select>
             </div>
             <div class="w-36">
-                <el-date-picker class="block" v-model="searchForm.startTime" type="month" value-format="YYYY-MM" placeholder="开始日期" clearable size="large"/>
+                <el-date-picker v-model="searchForm.startTime" class="block" type="month" value-format="YYYY-MM" placeholder="开始日期" clearable size="large" />
+            </div>
+            <div class="mx-2">
+                ~
             </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"/>
+                <el-date-picker v-model="searchForm.endTime" class="block" 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"/>
+                    <HcIcon name="search-2" />
                     <span>搜索</span>
                 </el-button>
             </div>
             <div class="ml-2">
                 <el-button size="large" @click="resetClick">
-                    <HcIcon name="close-circle"/>
+                    <HcIcon name="close-circle" />
                     <span>重置</span>
                 </el-button>
             </div>
         </template>
-        <HcTable indexName="编号" :column="tableColumn" :datas="tableData" :loading="tableLoading">
-            <template #taskName="{row}">
-                <span class="text-blue text-hover" @click="rowNameClick(row)">{{row.taskName}}</span>
+        <HcTable index-name="编号" :column="tableColumn" :datas="tableData" :loading="tableLoading">
+            <template #taskName="{ row }">
+                <span class="text-blue text-hover" @click="rowNameClick(row)">{{ row.taskName }}</span>
             </template>
-            <template #status="{row}">
-                <span class="text-orange" v-if="row.status === 0">未上报</span>
-                <span class="text-orange" v-if="row.status === 1">待审批</span>
-                <span class="text-green" v-if="row.status === 2">已审批</span>
+            <template #status="{ row }">
+                <span v-if="row.status === 0" class="text-orange">未上报</span>
+                <span v-if="row.status === 1" class="text-orange">待审批</span>
+                <span v-if="row.status === 2" class="text-green">已审批</span>
                 <template v-if="row.status === 3">
                     <el-popover placement="top-start" title="驳回原因" :width="200" :hide-after="0" :content="row?.rejectDesc">
                         <template #reference>
@@ -49,35 +51,35 @@
             </template>
         </HcTable>
         <template #action>
-            <HcPages :pages="searchForm" @change="pageChange"/>
+            <HcPages :pages="searchForm" @change="pageChange" />
         </template>
     </HcCard>
 </template>
 
 <script setup>
-import {ref, nextTick, watch,onMounted,onActivated} from "vue";
-import {useRouter} from 'vue-router'
-import {getArrValue} from "js-fast-way"
-import taskApi from '~api/home/task.js';
-import {getDictInfo} from "~api/other";
-
-const router = useRouter()
+import { nextTick, onActivated, onMounted, ref, watch } from 'vue'
+import { useRouter } from 'vue-router'
+import { getArrValue } from 'js-fast-way'
+import taskApi from '~api/home/task.js'
+import { getDictInfo } from '~api/other'
 
 //参数
 const props = defineProps({
     tableKey: {
         type: String,
-        default: ''
-    }
+        default: '',
+    },
 })
 
+const router = useRouter()
+
 //变量
-const isTableKey = ref(props.tableKey);
+const isTableKey = ref(props.tableKey)
 const reportTypes = ref([
-    {name: '未上报', key: 0},
-    {name: '待审批', key: 1},
-    {name: '已审批', key: 2},
-    {name: '已驳回', key: 3},
+    { name: '未上报', key: 0 },
+    { name: '待审批', key: 1 },
+    { name: '已审批', key: 2 },
+    { name: '已驳回', key: 3 },
 ])
 
 
@@ -94,34 +96,33 @@ watch(() => [
 })
 //选择上报类型
 const reportings = ref([
-    {name: '任务审批', key: 1},
-    {name: '采购审批', key: 2},
-    {name: '用车审批', key: 3},
-    {name: '报销审批', key: 4},
-    {name: '借款审批', key: 5},
+    { name: '任务审批', key: 1 },
+    { name: '采购审批', key: 2 },
+    { name: '用车审批', key: 3 },
+    { name: '报销审批', key: 4 },
+    { name: '借款审批', key: 5 },
 ])
 //获取上报类型
-const getReporting=async()=>{
-    const { error, code, data,msg } = await getDictInfo(
-     'report_type'
+const getReporting = async ()=>{
+    const { error, code, data, msg } = await getDictInfo(
+     'report_type',
     )
     if (!error && code === 200) {
         reportings.value = getArrValue(data)
-    } 
-    else {
-        reportings.value =[]
+    } else {
+        reportings.value = []
        
     }
 }
 //搜索表单
 const searchForm = ref({
-    selectStatus: null, startTime: null, endTime: null, reporting: null,selectType:parseInt(isTableKey.value),
-    current: 1, size: 20, total: 0
+    selectStatus: null, startTime: null, endTime: null, reporting: null, selectType:parseInt(isTableKey.value),
+    current: 1, size: 20, total: 0,
 })
 
 //搜索
 const searchClick = () => {
-    searchForm.value.current = 1;
+    searchForm.value.current = 1
     console.log(searchForm.value)
     getTableData()
 }
@@ -129,14 +130,14 @@ const searchClick = () => {
 //重置
 const resetClick = () => {
     searchForm.value = {
-        selectStatus: null, startTime: null, endTime: null,selectType:parseInt(isTableKey.value),
-        current: 1, size: 20, total: 0
+        selectStatus: null, startTime: null, endTime: null, selectType:parseInt(isTableKey.value),
+        current: 1, size: 20, total: 0,
     }
     getTableData()
 }
 
 //分页被点击
-const pageChange = ({current, size}) => {
+const pageChange = ({ current, size }) => {
     searchForm.value.current = current
     searchForm.value.size = size
     getTableData()
@@ -145,19 +146,20 @@ const pageChange = ({current, size}) => {
 //获取数据
 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: 'reportTypeName', name: '上报类型', width: '120', align: 'center'},
-    {key: 'status', name: '审核状态', width: '100', align: 'center'},
-    {key: 'reportUserName', name: '上报人', width: '120', align: 'center'},
-    {key: 'auditUserNames', name: '审核人', width: '120', align: 'center'},
+    { key: 'taskName', name: '任务名称' },
+    { key: 'reportDate', name: '上报日期', width: '160', align: 'center' },
+    { key: 'auditDate', name: '审核日期', width: '160', align: 'center' },
+    { key: 'reportTypeName', name: '上报类型', width: '120', align: 'center' },
+    { key: 'status', name: '审核状态', width: '100', align: 'center' },
+    { key: 'reportUserName', name: '上报人', width: '120', align: 'center' },
+    { key: 'auditUserNames', name: '审核人', width: '120', align: 'center' },
 ])
 const tableData = ref([])
-const getTableData = async() => {
-    //const key = isTableKey.value
+const getTableData = async () => {
+    const key = Number(isTableKey.value)
+    searchForm.value.selectType = key
     tableLoading.value = true
-    const {error, code, data} = await taskApi.getPage(searchForm.value)
+    const { error, code, data } = await taskApi.getPage(searchForm.value)
     //判断状态
     tableLoading.value = false
     if (!error && code === 200) {
@@ -177,7 +179,7 @@ const rowNameClick = (row) => {
             type: row?.reportTypeName,
             tabsKey:isTableKey.value,
           
-        }
+        },
     })
 }
 </script>

src/views/home/task/task.vue

@@ -1,38 +1,37 @@
 <template>
     <HcTabsSimple :cur="tabsKey" :datas="tabsData" @tabClick="tabsClick">
         <template #tab-1>
-            <TaskTable :tableKey="tabsKey" v-if="tabsKey === '1'"/>
+            <TaskTable :table-key="tabsKey" />
         </template>
         <template #tab-2>
-            <TaskTable :tableKey="tabsKey" v-if="tabsKey === '2'"/>
+            <TaskTable :table-key="tabsKey" />
         </template>
         <template #tab-3>
-            <TaskTable :tableKey="tabsKey" v-if="tabsKey === '3'"/>
+            <TaskTable :table-key="tabsKey" />
         </template>
         <template #tab-4>
-            <TaskTable :tableKey="tabsKey" v-if="tabsKey === '4'"/>
+            <TaskTable :table-key="tabsKey" />
         </template>
     </HcTabsSimple>
 </template>
 
 <script setup>
-import {ref, watch} from "vue";
-import TaskTable from "../components/TaskTable.vue";
+import { ref, watch } from 'vue'
+import TaskTable from '../components/TaskTable.vue'
 
 
 //选项卡
 const tabsKey = ref('1')
 const tabsData = ref([
-    {icon: 'time', label: '待办任务', key: '1'},
-    {icon: 'calendar-check', label: '已办任务', key: '2'},
-    {icon: 'user-shared', label: '我发起的任务', key: '3'},
-    {icon: 'user-received', label: '抄送给我的', key: '4'},
+    { icon: 'time', label: '待办任务', key: '1' },
+    { icon: 'calendar-check', label: '已办任务', key: '2' },
+    { icon: 'user-shared', label: '我发起的任务', key: '3' },
+    { icon: 'user-received', label: '抄送给我的', key: '4' },
 ])
 
 const tabsClick = (key) => {
     tabsKey.value = key
 }
-
 </script>
 
 <style lang="scss" scoped>