项目管理

src/components/search-input/search-input.vue

@@ -1,12 +1,22 @@
 <template>
     <div class="hc-search-input-box">
-        <el-input v-model="queryValue" class="w-60" clearable :placeholder="placeholder" @keyup="keyUpEvent" />
+        <el-input v-model="queryValue" :class="ui" clearable :placeholder="placeholder" @keyup="keyUpEvent">
+            <template v-if="isSlotPrepend" #prepend>
+                <slot name="prepend" />
+            </template>
+        </el-input>
         <el-button type="primary" @click="searchClick">{{ text }}</el-button>
     </div>
 </template>
 
 <script setup>
+import { useSlots } from 'vue'
+
 defineProps({
+    ui: {
+        type: String,
+        default: '',
+    },
     placeholder: {
         type: String,
         default: '请输入关键词检索',
@@ -29,6 +39,10 @@ const queryValue = defineModel('modelValue', {
     default: '',
 })
 
+//判断<slot>是否有传值
+const slots = useSlots()
+const isSlotPrepend = !!slots['prepend']
+
 //回车搜索
 const keyUpEvent = (e) => {
     if (e.key === 'Enter') {
@@ -45,8 +59,12 @@ const searchClick = () => {
 <style lang="scss">
 .hc-search-input-box {
     position: relative;
+    width: 100%;
     display: flex;
     align-items: center;
+    .el-input-group__prepend {
+        background-color: var(--el-fill-color-blank);
+    }
     .el-input__wrapper {
         border-top-right-radius: 0;
         border-bottom-right-radius: 0;

src/views/project/list.vue

@@ -21,8 +21,13 @@
         <template #action>
             <hc-pages :pages="searchForm" @change="pageChange" />
         </template>
+
         <!-- 查看项目信息 -->
-        <InfoDialog v-model="isProjectInfoDialog" :ids="projectInfoId" @change="projectInfoChange" />
+        <InfoDialog v-model="isProjectInfoDialog" :ids="projectInfoId" @change="projectInfoChange" @check="projectInfoCheck" @close="projectInfoClose" />
+
+        <!-- wbs树管理 -->
+        <HcWbsTree v-model="isWbsTreeDrawer" :type="wbsTreeType" :info="wbsTreeInfo" @change="wbsTreeChange" @close="wbsTreeClose" />
+
         <!-- 创建或编辑项目信息 -->
         <hc-new-drawer v-model="isProjectDrawer" is-close to-id="hc-project-list">
             创建或编辑项目信息
@@ -32,8 +37,9 @@
 
 <script setup>
 import { nextTick, onActivated, ref } from 'vue'
-import { getArrValue } from 'js-fast-way'
+import { getArrValue, getObjValue } from 'js-fast-way'
 import InfoDialog from './modules/list/info-dialog.vue'
+import HcWbsTree from './modules/list/wbs-tree.vue'
 import mainApi from '~api/project/project'
 
 defineOptions({
@@ -112,6 +118,47 @@ const projectClick = (id) => {
 const projectInfoChange = () => {
     searchClick()
 }
+//关闭项目信息
+const projectInfoClose = () => {
+    projectInfoId.value = ''
+    isProjectInfoDialog.value = false
+}
+
+//wbs树管理
+const isWbsTreeDrawer = ref(false)
+const wbsTreeType = ref('')
+const wbsTreeInfo = ref({})
+const wbsTreeChange = () => {
+    searchClick()
+}
+//关闭wbs树关联
+const wbsTreeClose = () => {
+    isWbsTreeDrawer.value = false
+    wbsTreeType.value = ''
+    wbsTreeInfo.value = {}
+}
+
+//功能事件回调
+const projectInfoCheck = ({ type, info, item }) => {
+    //measure, lar, test, wbsTree, logTree, editProject, addContract, editContract, wbsContract
+    //计量管理，征拆划分，实验划分，WBS树管理，日志树管理，编辑项目，创建合同段，编辑合同段信息，分配WBS
+    const wbsArr = ['wbsTree', 'test', 'measure', 'logTree', 'lar']
+    const index = wbsArr.indexOf(type)
+    if (index !== -1) {
+        wbsTreeInfo.value = getObjValue(info)
+        wbsTreeType.value = (index + 1) + ''
+        isWbsTreeDrawer.value = true
+    } else if (type === 'editProject') {
+        console.log('编辑项目')
+    } else if (type === 'addContract') {
+        console.log('创建合同段')
+    } else if (type === 'editContract') {
+        console.log('创建合同段')
+    } else if (type === 'wbsContract') {
+        console.log('分配WBS')
+    }
+    //console.log(type, info, item)
+}
 
 //创建项目或修改项目
 const isProjectDrawer = ref(false)

src/views/project/modules/list/info-dialog.vue

@@ -63,12 +63,12 @@ import contractApi from '~api/project/contract'
 const props = defineProps({
     ids: {
         type: [String, Number],
-        default: () => '',
+        default: '',
     },
 })
 
 //事件
-const emit = defineEmits(['change', 'check'])
+const emit = defineEmits(['change', 'check', 'close'])
 
 //双向绑定
 // eslint-disable-next-line no-undef
@@ -80,7 +80,7 @@ const isShow = defineModel('modelValue', {
 const projectId = ref(props.ids)
 watch(() => props.ids, (id) => {
     projectId.value = id
-}, { immediate: true, deep: true })
+}, { deep: true })
 
 //监听显示
 watch(isShow, (val) => {
@@ -89,6 +89,7 @@ watch(isShow, (val) => {
     } else {
         projectInfo.value = {}
         projectId.value = ''
+        emit('close')
     }
 })
 
@@ -114,6 +115,7 @@ const dialogClose = () => {
     projectId.value = ''
     projectInfo.value = {}
     isShow.value = false
+    emit('close')
 }
 
 //删除项目
@@ -191,7 +193,6 @@ const toCheck = (type, item = {}) => {
     }
     .hc-contract-list-card {
         border-radius: 4px;
-        margin-right: 14px;
         margin-bottom: 14px;
         cursor: pointer;
         padding: 8px 14px;

src/views/project/modules/list/wbs-tree.vue

@@ -0,0 +1,158 @@
+<template>
+    <hc-new-drawer v-model="isShow" is-close to-id="hc-project-list">
+        <div class="hc-project-wbs-tree flex">
+            <div class="header hc-flex">
+                <div class="name flex-1">{{ typeLable }} - {{ projectInfo.projectName }}</div>
+                <div class="hc-flex">
+                    <el-button hc-btn type="success">数据同步</el-button>
+                    <el-button hc-btn type="primary">表单设置</el-button>
+                    <el-button hc-btn type="danger">节点参数</el-button>
+                    <el-button hc-btn color="#626aef">独立表单库</el-button>
+                    <el-button hc-btn type="warning">归档文件时间</el-button>
+                </div>
+            </div>
+            <div class="body">
+                <hc-body split padding="8px">
+                    <template #left>
+                        <hc-new-card title="工程节点信息">
+                            <template #search>
+                                <hc-search-input v-model="searchTree.queryValue" @search="searchTreeClick">
+                                    <template #prepend>
+                                        <el-select v-model="searchTree.type" placeholder="类型" class="w-[75px]">
+                                            <el-option label="节点" value="1" />
+                                            <el-option label="表名" value="2" />
+                                        </el-select>
+                                    </template>
+                                </hc-search-input>
+                            </template>
+                            工程节点信息
+                        </hc-new-card>
+                    </template>
+                    <div class="body-top">
+                        <hc-body padding="0px">
+                            <hc-new-card title="节点信息">
+                                节点信息
+                            </hc-new-card>
+                        </hc-body>
+                    </div>
+                    <div class="body-content">
+                        <hc-body padding="0px">
+                            <hc-new-card title="当前项目信息表">
+                                当前项目信息表
+                            </hc-new-card>
+                        </hc-body>
+                    </div>
+                </hc-body>
+            </div>
+        </div>
+    </hc-new-drawer>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue'
+import { delMessage } from 'hc-vue3-ui'
+import { deepClone, getArrValue, getObjValue, isNullES } from 'js-fast-way'
+import mainApi from '~api/project/project'
+import contractApi from '~api/project/contract'
+
+const props = defineProps({
+    type: {
+        type: [String, Number],
+        default: '1',
+    },
+    info: {
+        type: Object,
+        default: () => ({}),
+    },
+})
+
+//事件
+const emit = defineEmits(['change', 'close'])
+
+//双向绑定
+// eslint-disable-next-line no-undef
+const isShow = defineModel('modelValue', {
+    default: false,
+})
+
+//监听数据
+const isType = ref(props.type)
+const projectInfo = ref(props.info)
+watch(() => [
+    props.type,
+    props.info,
+], ([type, info]) => {
+    isType.value = type
+    projectInfo.value = info
+}, { deep: true })
+
+//监听显示
+watch(isShow, (val) => {
+    if (val) {
+        getProjectData()
+    } else {
+        projectInfo.value = {}
+        isType.value = ''
+        emit('close')
+    }
+})
+
+//获取项目信息
+const typeLable = ref('')
+const getProjectData = () => {
+    const type = isType.value ?? 1
+    const wbsArr = ['WBS树管理', '实验划分', '计量管理', '日志树管理', '征拆划分']
+    typeLable.value = wbsArr[Number(type) - 1]
+    console.log('type: ', type)
+    console.log('info: ', projectInfo.value)
+}
+
+//树节点搜索
+const searchTree = ref({ queryValue: '', type: '1' })
+const searchTreeClick = () => {
+
+}
+</script>
+
+<style scoped lang="scss">
+.hc-project-wbs-tree {
+    position: relative;
+    background: #ececec;
+    border-radius: 4px;
+    height: 100%;
+    flex-direction: column;
+    overflow: hidden;
+    .header {
+        color: white;
+        background: #54565A;
+        padding: 10px 14px;
+        flex-shrink: 0;
+        .name {
+            white-space:nowrap;
+            overflow:hidden;
+            text-overflow:ellipsis;
+        }
+    }
+    .body {
+        flex: 1;
+        flex-basis: auto;
+        position: relative;
+    }
+}
+</style>
+
+<style lang="scss">
+.hc-project-wbs-tree .body .hc-page-split-content {
+    display: flex;
+    flex-direction: column;
+    .body-top {
+        position: relative;
+        flex: 1;
+    }
+    .body-content {
+        position: relative;
+        margin-top: 10px;
+        flex: 4;
+    }
+}
+</style>