for_client/src/views/systemService/plan.vue

<template>
    <hc-card id="node-card-plan">
        <template #header>
            <div class="w-32">
                <el-select v-model="searchForm.fileInType" clearable block placeholder="填写类型" @change="getTableData">
                    <el-option v-for="item in fillType" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey" />
                </el-select>
            </div>
            <div class="ml-3 w-64">
                <HcDatePicker :dates="betweenTime" clearable @change="betweenTimeUpdate" />
            </div>
            <div class="ml-3 w-32">
                <el-select v-model="searchForm.status" clearable block placeholder="状态 " @change="getTableData">
                    <el-option v-for="item in tasksStatus" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey" />
                </el-select>
            </div>
            <div class="ml-3 w-32">
                <el-select v-model="searchForm.createUser" clearable block placeholder="编写人" @change="getTableData">
                    <el-option v-for="item in preparedList" :key="item.userId" :label="item.userName" :value="item.userId" />
                </el-select>
            </div>
            <div class="ml-3 w-32">
                <el-select v-model="searchForm.sendUser" placeholder="发送人" clearable block @change="getTableData">
                    <el-option v-for="item in postList" :key="item.userId" :label="item.userName" :value="item.userId" />
                </el-select>
            </div>
        </template>
        <template #extra>
            <el-button type="primary" @click="createMonthPlan(1)">
                <HcIcon name="add" />
                <span>创建月度服务计划</span>
            </el-button>
            <el-button type="primary" @click="createMonthPlan(2)">
                <HcIcon name="add" />
                <span>服务完成确认单</span>
            </el-button>
        </template>
    

        <hc-table :column="tableColumn" :datas="tableData" :loading="tableLoad ">
            <template #fileInType="{ row }">
                <span>{{ row.fileInType === 1 ? '月度服务计划' : '服务完成确认单' }}</span>
            </template>
            
            <template #statusValue="{ row }">
                <el-tag
                    v-if="row?.statusValue"
                    :type="`${row.statusValue === '已计划' ? 'success' : row.statusValue === '计划中' ? 'info' : 'warning'}`" class="mx-1" effect="dark"
                >
                    {{ row.statusValue }}
                </el-tag>
            </template>
            <template #action="{ row }">
                <el-link v-if="row.status !== 4" type="primary" @click="editRow(row)">编辑</el-link>
                <el-link v-if="row.status !== 1 " type="success" @click="viewPlan(row)">查看</el-link>
                <el-link v-if="row.status === 1 " v-del-com:[handleDelete]="row" type="warning">删除</el-link>
            </template>
        </hc-table>

        <template #action>
            <HcPages :pages="searchForm" @change="pageChange" />
        </template>
        <fromDrawer v-model="isShowForm" :type="typeVal" :data-id="dataId" @close="closeDrawer" />
    </hc-card>
</template>

<script setup>
import { nextTick, onMounted, ref } from 'vue'
import fromDrawer from './fromDrawer.vue'
import dataApi from '~api/systemService/service'
import { useAppStore } from '~src/store'
import { arrToId, getArrValue } from 'js-fast-way'
import { toPdfPage } from '~uti/btn-auth'

onMounted(()=>{
        getTableData()
        getPreparedList()
})
const store = useAppStore()
const projectId = ref(store.getProjectId)
const contractId = ref(store.getContractId)
//搜索表单
const searchForm = ref({
    key1: null, ke2: null, key3: null, key4: null, startTimeValue: null, endTimeValue: null,
    current: 1, size: 20, total: 0,
})
const fillType = ref([
    { dictKey: '1', dictValue: '月度服务计划' },
    { dictKey: '2', dictValue: '服务完成确认单' },
])
const tasksStatus = ref([
    { dictKey: '1', dictValue: '计划中' },
    { dictKey: '2', dictValue: '确认中-甲方' },
    { dictKey: '3', dictValue: '反馈中-系统' },
    { dictKey: '4', dictValue: '已计划' },
])
const preparedList = ref([
  

])
const postList = ref([

])

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

}

const tableColumn = [
    { key: 'fileInType', name: '填写类型' },
    { key: 'planTime', name: '计划时间' },
    { key: 'statusValue', name: '状态' },
    { key: 'writeUserName', name: '编写人' },
    { key: 'createTime', name: '创建时间' },
    { key: 'sendUserName', name: '发送人员' },
    { key: 'action', name: '操作', width:150 },
]
const tableData = ref([

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

const tableLoad = ref(false)
const getTableData = async () => {
    tableLoad.value = true
    const { error, code, data } = await dataApi.getPage({
        projectId: projectId.value,
        contractId: contractId.value,
        ...searchForm.value,
       
    
    })
    //处理数据
    tableLoad.value = false
    if (!error && code === 200) {
        tableData.value = getArrValue(data['records'])
      
    } else {
        tableData.value = []
      
    }
}
//获取发送人
const getPreparedList = async (id) => {
    const { error, code, data } = await dataApi.getSendUserAndWriteUser({
        projectId: projectId.value,
        contractId: contractId.value,
       
       
    })
    //判断状态
    if (!error && code === 200) {
        preparedList.value = getArrValue(data['writeUser'])
        postList.value = getArrValue(data['sendUser'])

    } else {
        preparedList.value = []
         postList.value = []
    }
}
const isShowForm = ref(false)
const typeVal = ref('')
const createMonthPlan = (type)=>{
     dataId.value = ''
    isShowForm.value = true
    typeVal.value = type
}
const closeDrawer = ()=>{
    isShowForm.value = false
        getTableData()
        getPreparedList()
}
const dataId = ref(null)
const editRow = (row)=>{
    isShowForm.value = true
    typeVal.value = row.fileInType
    dataId.value = row.id
}
const viewPlan = (row)=>{
     const { pdfUrl } = row
           if (pdfUrl) {
        toPdfPage(pdfUrl)

       } else {
        window?.$message?.error('暂无预览文件')
       
       }
}
const handleDelete = async ({ item }, resolve) => {
    await delData(item.id)
    resolve()
}
//删除请求
const delData = async (id) => {
    const { error, code, msg, data } = await dataApi.remove({
     ids:id,
       
    }, false)
    //判断状态
    if (!error && code === 200) {
        window?.$message?.success(msg)
      
        getTableData()
    } else {
        window?.$message?.error(msg)
    }
}
</script>