111

src/views/desk/wbs.vue

@@ -2,12 +2,12 @@
     <hc-card>
         <template #header>
             <div class="w-400px">
-                <hc-search-input v-model="searchForm.queryValue" @search="searchClick" />
+                <hc-search-input v-model="searchForm.wbsName" @search="searchClick" />
             </div>
         </template>
         <template #extra>
-            <el-button hc-btn type="primary">新增</el-button>
-            <el-button hc-btn type="danger">删除</el-button>
+            <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">元素库</el-button>
         </template>
         <hc-table
@@ -22,20 +22,45 @@
             </template>
             <template #action="{ row }">
                 <el-link type="primary">编辑wbs库</el-link>
-                <el-link type="warning">修改</el-link>
-                <el-link type="danger">删除</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 { getArrValue, getObjValue, isNullES } from 'js-fast-way'
-import { getDictionaryData } from '~uti/tools'
+import { arrToId, deepClone, formValidate, getArrValue, getObjValue, isNullES } from 'js-fast-way'
+import { getDictionaryData, reloadPage } from '~uti/tools'
 import mainApi from '~api/desk/wbs'
 
 //激活
@@ -104,8 +129,72 @@ const tableCheckKeys = ref([])
 const tableCheckChange = (rows) => {
     tableCheckKeys.value = rows
 }
-</script>
 
-<style scoped lang="scss">
+//单个删除
+const rowDelClick = (row) => {
+    rowRemoveApi(row.id)
+}
+
+//批量删除
+const batchDelClick = () => {
+    const rows = tableCheckKeys.value
+    if (rows.length <= 0) {
+        window.$message.warning('请选择要删除的应用')
+        return false
+    }
+    rowRemoveApi(arrToId(rows))
+}
 
-</style>
+//删除接口
+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 = {}
+}
+</script>