admin/src/views/desk/wbs.vue

<template>
    <hc-card>
        <template #header>
            <div class="w-400px">
                <hc-search-input v-model="searchForm.wbsName" @search="searchClick" />
            </div>
        </template>
        <template #extra>
            <el-button hc-btn type="primary" @click="addRowClick">新增</el-button>
            <el-button hc-btn type="danger" :disabled="tableCheckKeys.length <= 0" @click="batchDelClick">删除</el-button>
            <el-button hc-btn type="warning" @click="elementLibrary">元素库</el-button>
        </template>
        <hc-table
            :column="tableColumn" :datas="tableData" :loading="tableLoading" :index-style="{ width: 60 }"
            is-check :check-style="{ width: 29 }" @selection-change="tableCheckChange"
        >
            <template #wbsType="{ row }">
                <span>{{ getWbsTypeName(row.wbsType) }}</span>
            </template>
            <template #status="{ row }">
                <span>{{ row.status === 1 ? '是' : '否' }}</span>
            </template>
            <template #action="{ row }">
                <el-link type="primary" @click="editRowLib(row)">编辑wbs库</el-link>
                <el-link type="warning" @click="edutRowClick(row)">修改</el-link>
                <el-link type="danger" @click="rowDelClick(row)">删除</el-link>
            </template>
        </hc-table>
        <template #action>
            <hc-pages :pages="searchForm" @change="pageChange" />
        </template>

        <!-- 新增/修改 -->
        <hc-dialog v-model="isDataInfoShow" widths="400px" is-footer-center :title="isNullES(formModel.id) ? '新增' : '修改'" @close="dialogClose">
            <el-form ref="formRef" :model="formModel" :rules="formRules" label-position="top" label-width="auto" size="large">
                <el-form-item label="WBS名称：" prop="wbsName">
                    <el-input v-model="formModel.wbsName" clearable placeholder="请输入WBS名称" />
                </el-form-item>
                <el-form-item label="划分类型：" prop="wbsType">
                    <el-select v-model="formModel.wbsType" placeholder="选择划分类型" filterable clearable block>
                        <el-option v-for="item in wbsTypeData" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="是否启用：" prop="status">
                    <el-radio-group v-model="formModel.status">
                        <el-radio :value="1">是</el-radio>
                        <el-radio :value="0">否</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <template #footer>
                <el-button hc-btn @click="dialogClose">取消</el-button>
                <el-button hc-btn type="primary" :loading="submitLoading" @click="dialogSubmit">提交</el-button>
            </template>
        </hc-dialog>
    </hc-card>
</template>

<script setup>
import { HcDelMsg } from 'hc-vue3-ui'
import { onActivated, ref } from 'vue'
import { arrToId, deepClone, formValidate, getArrValue, getObjValue, isNullES } from 'js-fast-way'
import { getDictionaryData, reloadPage } from '~uti/tools'
import mainApi from '~api/desk/wbs'

//激活
onActivated(() => {
    getWbsTypeData()
    getTableData()
})

//获取划分类型
const wbsTypeData = ref([])
const getWbsTypeData = async () => {
    wbsTypeData.value = await getDictionaryData('wbs_type')
}
//获取划分类型名称
const getWbsTypeName = (val) => {
    if (isNullES(val)) return ''
    const data = wbsTypeData.value.find(item => {
        return Number(item.value) === Number(val)
    })
    const res = getObjValue(data)
    return res.label || ''
}

//搜索表单
const searchForm = ref({ current: 1, size: 30, total: 0 })

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

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

//表格数据
const tableData = ref([])
const tableColumn = ref([
    { key: 'wbsName', name: '名称' },
    { key: 'wbsType', name: '划分类型', width: 120, align: 'center' },
    { key: 'status', name: '是否启用', width: 100, align: 'center' },
    { key: 'createTime', name: '创建时间', width: 180, align: 'center' },
    { key: 'action', name: '操作', width: 180, align: 'center' },
])

//获取表格数据
const tableLoading = ref(false)
const getTableData = async () => {
    tableData.value = []
    tableLoading.value = true
    const { data } = await mainApi.page({
        ...searchForm.value,
        total: null,
    })
    tableLoading.value = false
    tableData.value = getArrValue(data?.records)
    searchForm.value.total = data?.total || 0
}

//表格被选择
const tableCheckKeys = ref([])
const tableCheckChange = (rows) => {
    tableCheckKeys.value = rows
}

//单个删除
const rowDelClick = (row) => {
    rowRemoveApi(row.id)
}

//批量删除
const batchDelClick = () => {
    const rows = tableCheckKeys.value
    if (rows.length <= 0) {
        window.$message.warning('请选择要删除的应用')
        return false
    }
    rowRemoveApi(arrToId(rows))
}

//删除接口
const rowRemoveApi = (ids) => {
    HcDelMsg(async (resolve) => {
        const { isRes } = await mainApi.del(ids)
        resolve() //关闭弹窗的回调
        if (!isRes) return
        window.$message.success('删除成功')
        reloadPage()
    })
}

//新增/修改弹窗
const isDataInfoShow = ref(false)
const addRowClick = () => {
    formModel.value = { status: 1 }
    isDataInfoShow.value = true
}

//修改
const edutRowClick = (row) => {
    formModel.value = deepClone(row)
    isDataInfoShow.value = true
}

//表单
const formRef = ref(null)
const formModel = ref({})
const formRules = {
    wbsName: { required: true, trigger: 'blur', message: '请输入WBS名称' },
    wbsType: { required: true, trigger: 'blur', message: '请选择划分类型' },
    status: { required: true, trigger: 'blur', message: '请选择是否启用' },
}

//提交
const submitLoading = ref(false)
const dialogSubmit = async () => {
    const isForm = await formValidate(formRef.value)
    if (!isForm) return
    submitLoading.value = true
    const { isRes } = await mainApi.submit(formModel.value)
    submitLoading.value = false
    if (!isRes) return
    window.$message.success('操作成功')
    dialogClose()
}

//关闭弹窗
const dialogClose = () => {
    isDataInfoShow.value = false
    submitLoading.value = false
    formModel.value = {}
}

//元素库
const elementLibrary = () => {

}

//编辑wbs库
const editRowLib = (row) => {

}
</script>