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.id" :label="item.name" :value="item.id" />
                </el-select>
            </div>
            <div class="ml-3 w-32">
                <el-select v-model="searchForm.sendUser" placeholder="发送人" clearable multiple block @change="getTableData">
                    <el-option v-for="item in postList" :key="item.batch" :label="item.name" :value="item.id" />
                </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 type="primary" @click="editRow(row)">编辑</el-link>
                <el-link type="success">查看</el-link>
                <el-link type="warning">删除</el-link>
            </template>
        </hc-table>

        <template #action>
            <HcPages :pages="searchForm" @change="pageChange" />
        </template>
        <fromDrawer v-model="isShowForm" :type="typeVal" :data-id="dataId" />
    </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'

onMounted(()=>{
        getTableData()
})
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([
    { id: 1, name: '张三' },
    { id: 2, name: '李四' },

])
const postList = ref([
    { id: 1, name: '张三' },
    { id: 2, name: '李四' },

])

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

}
const searchClick = ()=>{

}
const tableColumn = [
    { key: 'fileInType', name: '填写类型' },
    { key: 'planTime', name: '计划时间' },
    { key: 'statusValue', name: '状态' },
    { key: 'createUser', name: '编写人' },
    { key: 'createTime', name: '创建时间' },
    { key: 'sendUser', name: '发送人员' },
    { key: 'action', name: '操作', width:150 },
]
const tableData = ref([
    { name: '名称1', text: '文本1', key3: '已计划' },
    { name: '名称2', text: '文本2', key3: '计划中' },
    { name: '名称3', text: '文本3', key3: '协同中-甲方' },
])
//分页被点击
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 isShowForm = ref(false)
const typeVal = ref('')
const createMonthPlan = (type)=>{
     dataId.value = ''
    isShowForm.value = true
    typeVal.value = type
}
const dataId = ref(null)
const editRow = (row)=>{
    isShowForm.value = true
    typeVal.value = row.fileInType
    dataId.value = row.id
}
</script>