Browse Source

更新年度经营预算、以及组件库依赖

ZaiZai 2 years ago
parent
commit
c368dcd02b
5 changed files with 146 additions and 186 deletions
  1. 1 1
      package.json
  2. 13 0
      src/styles/index.scss
  3. 113 125
      src/views/program/project/form.vue
  4. 15 55
      src/views/program/project/index.vue
  5. 4 5
      yarn.lock

+ 1 - 1
package.json

@@ -13,7 +13,7 @@
         "dayjs": "^1.11.8",
         "echarts": "^5.4.2",
         "element-plus": "2.3.6",
-        "hc-vue3-ui": "^1.3.1",
+        "hc-vue3-ui": "^1.3.2",
         "js-base64": "^3.7.5",
         "js-cookie": "^3.0.5",
         "js-fast-way": "^0.1.0",

+ 13 - 0
src/styles/index.scss

@@ -237,3 +237,16 @@ html, body, #app {
     top: -4px;
     right: 0;
 }
+
+//表格右边悬浮的样式
+.hc-table-ref-box .el-table__body-wrapper tr td {
+    &.el-table-fixed-column--right {
+        background: #ebeef0 !important;
+        border-color: #d6d6d6;
+    }
+    .cell {
+        .el-button + .el-button {
+            margin-left: 20px;
+        }
+    }
+}

+ 113 - 125
src/views/program/project/form.vue

@@ -1,67 +1,63 @@
 <template>
-    <HcCard>
-        <template #header>
-            <div class="w-36">
-                <el-select v-model="searchForm.planType" block clearable placeholder="计划类型" size="large">
-                    <el-option v-for="item in planType" :label="item.name" :value="item.key"/>
-                </el-select>
-            </div>
-            <div class="w-36 ml-2">
-                <el-select v-model="searchForm.department" block clearable placeholder="选择部门" size="large">
-                    <el-option v-for="item in department" :label="item.name" :value="item.key"/>
-                </el-select>
-            </div>
-            <div class="w-36 ml-4">
-                <el-date-picker class="block" v-model="searchForm.startTime" type="month" value-format="YYYY-MM" placeholder="开始日期" clearable size="large"/>
-            </div>
-            <div class="mx-2">~</div>
-            <div class="w-36">
-                <el-date-picker class="block" v-model="searchForm.endTime" type="month" value-format="YYYY-MM" placeholder="结束日期" clearable size="large"/>
-            </div>
-            <div class="w-40 ml-2">
-                <el-input v-model="searchForm.queryValue" clearable placeholder="请输入计划名称" @keyup="keyUpEvent" size="large"/>
-            </div>
-            <div class="ml-4">
-                <el-button size="large" type="primary" @click="searchClick">
-                    <HcIcon name="search-2"/>
-                    <span>搜索</span>
-                </el-button>
-            </div>
-            <div class="ml-2">
-                <el-button size="large" @click="resetClick">
-                    <HcIcon name="close-circle"/>
-                    <span>重置</span>
-                </el-button>
-            </div>
-        </template>
+    <HcCard actionUi="text-center" title="焦作至唐河高速公路方城至唐河段">
         <template #extra>
-            <el-button size="large" type="primary" hc-btn @click="addRowClick">
-                <HcIcon name="add"/>
-                <span>新增计划</span>
-            </el-button>
+            <HcNewSwitch :datas="tabTab" :keys="tabKey" @change="tabChange" :round="false"/>
         </template>
-
-        <HcTable :isIndex="false" :column="tableColumn" :datas="tableData" :loading="tableLoading">
-            <template #key1="{row}">
-                <span class="text-blue">{{row.key1}}</span>
+        <template #search>
+            <div class="hc-program-project-form-radio-group">
+                <el-radio-group v-model="radioType" size="large">
+                    <el-radio-button label="key1">市场部</el-radio-button>
+                    <el-radio-button label="key2">实施部</el-radio-button>
+                    <el-radio-button label="key3">研发部</el-radio-button>
+                    <el-radio-button label="key4">维护部</el-radio-button>
+                    <el-radio-button label="key5">管理支出</el-radio-button>
+                    <el-radio-button label="key6">外包劳务</el-radio-button>
+                </el-radio-group>
+            </div>
+        </template>
+        <HcTable :isIndex="false" :column="tableColumn" :datas="tableData" :row-style="tableRowStyle">
+            <template #key4="{row,index}">
+                <el-select v-model="row.key4" v-if="row.isEdit">
+                    <el-option label="选项1" value="选项1"/>
+                    <el-option label="选项2" value="选项2"/>
+                </el-select>
+                <span v-else>{{row.key4}}</span>
             </template>
-            <template #key4="{row}">
-                <span>{{row.key4}}条</span>
+            <template #key5="{row,index}">
+                <el-input v-model="row.key5" v-if="row.isEdit"/>
+                <span v-else>{{row.key5}}</span>
             </template>
-            <template #key5="{row}">
-                <span>{{row.key5}}条</span>
+            <template #key6="{row,index}">
+                <el-input v-model="row.key6" v-if="row.isEdit"/>
+                <span v-else>{{row.key6}}</span>
             </template>
-            <template #key6="{row}">
-                <span>{{row.key6}}条</span>
+            <template #key7="{row,index}">
+                <HcDatePicker :dates="betweenTime" @change="betweenTimeUpdate" v-if="row.isEdit"/>
+                <span v-else>{{row.key7}}</span>
+            </template>
+            <template #key8="{row,index}">
+                <el-input v-model="row.key8" v-if="row.isEdit"/>
+                <span v-else>{{row.key8}}</span>
+            </template>
+            <template #key9="{row,index}">
+                <el-input v-model="row.key9" v-if="row.isEdit"/>
+                <span v-else>{{row.key9}}</span>
             </template>
             <template #action="{row,index}">
-                <el-button plain size="small" type="primary" @click="editRowClick(row)">编辑</el-button>
-                <el-button plain size="small" type="danger">删除</el-button>
+                <el-button size="small" type="success" v-if="row.isEdit" @click="row.isEdit = false">保存</el-button>
+                <el-button size="small" type="primary" v-else @click="row.isEdit = true">编辑</el-button>
+                <el-button size="small" type="danger">分解子计划</el-button>
             </template>
         </HcTable>
-
         <template #action>
-            <HcPages :pages="searchForm" @change="pageChange"/>
+            <el-button size="large" type="info" hc-btn @click="goBackClick">
+                <HcIcon name="arrow-go-back"/>
+                <span>取消并返回</span>
+            </el-button>
+            <el-button size="large" type="primary" hc-btn>
+                <HcIcon name="check-double"/>
+                <span>提交保存</span>
+            </el-button>
         </template>
     </HcCard>
 </template>
@@ -72,90 +68,82 @@ import {useRouter} from 'vue-router'
 
 const router = useRouter()
 
-//计划类型
-const planType = ref([
-    {name: '临时计划', key: '1'},
-    {name: '月度计划', key: '2'},
-    {name: '年度计划', key: '3'},
-])
-
-//选择部门
-const department = ref([
-    {name: '研发部门', key: '1'},
-    {name: '业务部门', key: '2'},
-    {name: '人事部门', key: '3'},
-])
-
-//搜索表单
-const searchForm = ref({
-    planType: null, startTime: null, endTime: null, department: null, queryValue: '',
-    current: 1, size: 20, total: 0
-})
-
-//搜索框回车
-const keyUpEvent = (event) => {
-    if (event.key === "Enter") {
-        searchForm.value.current = 1;
-        getTableData()
-    }
+//类型tab数据和相关处理
+const tabKey = ref('construction')
+const tabTab = ref([
+    {key: 'construction', name: '施工单位成本'},
+    {key: 'supervision', name: '监理单位成本'},
+    {key: 'build', name: '建设单位成本'}
+]);
+const tabChange = ({key}) => {
+    tabKey.value = key
 }
 
-//搜索
-const searchClick = () => {
-    searchForm.value.current = 1;
-    getTableData()
-}
+const radioType = ref('key1')
 
-//重置搜索表单
-const resetClick = () => {
-    searchForm.value = {current: 1, size: 20, total: 0}
-}
-
-//分页被点击
-const pageChange = ({current, size}) => {
-    searchForm.value.current = current
-    searchForm.value.size = size
-    getTableData()
-}
 
-//获取数据
-const tableLoading = ref(false)
+//表格
 const tableColumn = [
-    {key: 'key', name: '编号', width: '90', align: 'center'},
-    {key: 'key1', name: '计划名称'},
-    {key: 'key2', name: '计划类型', width: '120', align: 'center'},
-    {key: 'key3', name: '计划起止日期', width: '220', align: 'center'},
-    {key: 'key4', name: '计划数量', width: '120', align: 'center'},
-    {key: 'key5', name: '已完成计划', width: '120', align: 'center'},
-    {key: 'key6', name: '未完成计划', width: '100', align: 'center'},
-    {key: 'key8', name: '计划制定人', width: '100', align: 'center'},
-    {key: 'action', name: '操作', width: '130', align: 'center'},
+    {key: 'key1', name: '项目环节', width: '160', align: 'center'},
+    {key: 'key2', name: '预算类型', width: '160', align: 'center'},
+    {key: 'key3', name: '任务明细', width: '160', align: 'center'},
+    {key: 'key4', name: '任务类型', width: '160',  align: 'center'},
+    {key: 'key5', name: '任务描述', minWidth: '200',  align: 'center', isTooltip: true},
+    {key: 'key6', name: '完成指标', minWidth: '200', align: 'center', isTooltip: true},
+    {key: 'key7', name: '计划起止日期', width: '280', align: 'center'},
+    {key: 'key8', name: '预计工作量(小数/整数/天)', width: '160', align: 'center'},
+    {key: 'key9', name: '投入岗位类型(日单价)', width: '160', align: 'center'},
+    {key: 'key10', name: '投入人员数量', width: '160', align: 'center'},
+    {key: 'action', name: '操作', width: '180', align: 'center', fixed: 'right'},
 ]
 const tableData = ref([
-    {id: 1, key: 'JH-01', key1: '2023年5月度计划', key2: '临时计划', key3: '2022-07-01~2027-04-12', key4: '36', key5: '30', key6: '6', key8: '张三'},
-    {id: 2, key: 'JH-01', key1: '2023年5月度计划', key2: '临时计划', key3: '2022-07-01~2027-04-12', key4: '36', key5: '30', key6: '6', key8: '张三'},
-    {id: 3, key: 'JH-01', key1: '2023年5月度计划', key2: '临时计划', key3: '2022-07-01~2027-04-12', key4: '36', key5: '30', key6: '6', key8: '张三'},
-    {id: 4, key: 'JH-01', key1: '2023年5月度计划', key2: '临时计划', key3: '2022-07-01~2027-04-12', key4: '36', key5: '30', key6: '6', key8: '张三'},
+    {id: 1, key1: 'xx', key2: 'xx', key3: 'xx', key4: 'xx', key5: 'xx', key6: 'xx', key7: 'xx', key8: 'xx', key9: 'xx', key10: 'xx'},
+    {id: 2, key1: 'xx', key2: 'xx', key3: 'xx', key4: 'xx', key5: 'xx', key6: 'xx', key7: 'xx', key8: 'xx', key9: 'xx', key10: 'xx'},
+    {id: 3, key1: 'xx', key2: 'xx', key3: 'xx', key4: 'xx', key5: 'xx', key6: 'xx', key7: 'xx', key8: 'xx', key9: 'xx', key10: 'xx'},
+    {id: 4, key1: 'xx', key2: 'xx', key3: 'xx', key4: 'xx', key5: 'xx', key6: 'xx', key7: 'xx', key8: 'xx', key9: 'xx', key10: 'xx'},
+    {id: 5, key1: 'xx', key2: 'xx', key3: 'xx', key4: 'xx', key5: 'xx', key6: 'xx', key7: 'xx', key8: 'xx', key9: 'xx', key10: 'xx'},
+    {id: 6, key1: 'xx', key2: 'xx', key3: 'xx', key4: 'xx', key5: 'xx', key6: 'xx', key7: 'xx', key8: 'xx', key9: 'xx', key10: 'xx'},
 ])
 
-const getTableData = () => {
-
+//表格行样式
+const tableRowStyle = ({row, rowIndex}) => {
+    if (row.id === 2) {
+        return {
+            'background-color': '#E99D42',
+            '--el-fill-color-lighter': '#E99D42',
+            '--el-table-row-hover-bg-color': '#E99D42'
+        }
+    } else if (row.id === 4 || row.id === 5) {
+        return {
+            'background-color': '#7e9559',
+            '--el-fill-color-lighter': '#7e9559',
+            '--el-table-row-hover-bg-color': '#7e9559'
+        }
+    }
 }
 
-//新增计划
-const addRowClick = () => {
-    router.push({
-        name: 'program-index-info'
-    })
+//日期时间被选择
+const betweenTime = ref(null)
+const betweenTimeUpdate = ({arr, query}) => {
+    betweenTime.value = arr
 }
 
-//编辑预算
-const editRowClick = (row) => {
-    router.push({
-        name: 'program-index-info',
-        query: {
-            id: row.id
-        }
-    })
+
+//取消并返回
+const goBackClick = () => {
+    router.back()
 }
 </script>
+
+<style lang="scss">
+.hc-program-project-form-radio-group {
+    position: relative;
+    width: 100%;
+    .el-radio-group, .el-radio-group .el-radio-button .el-radio-button__inner {
+        width: 100%;
+    }
+    .el-radio-group .el-radio-button {
+        flex: 1;
+    }
+}
+</style>

+ 15 - 55
src/views/program/project/index.vue

@@ -2,24 +2,17 @@
     <HcCard>
         <template #header>
             <div class="w-36">
-                <el-select v-model="searchForm.planType" block clearable placeholder="计划类型" size="large">
+                <el-select v-model="searchForm.planType" block clearable placeholder="项目类型" size="large">
                     <el-option v-for="item in planType" :label="item.name" :value="item.key"/>
                 </el-select>
             </div>
             <div class="w-36 ml-2">
-                <el-select v-model="searchForm.department" block clearable placeholder="选择部门" size="large">
+                <el-select v-model="searchForm.department" block clearable placeholder="服务类型" size="large">
                     <el-option v-for="item in department" :label="item.name" :value="item.key"/>
                 </el-select>
             </div>
-            <div class="w-36 ml-4">
-                <el-date-picker class="block" v-model="searchForm.startTime" type="month" value-format="YYYY-MM" placeholder="开始日期" clearable size="large"/>
-            </div>
-            <div class="mx-2">~</div>
-            <div class="w-36">
-                <el-date-picker class="block" v-model="searchForm.endTime" type="month" value-format="YYYY-MM" placeholder="结束日期" clearable size="large"/>
-            </div>
-            <div class="w-40 ml-2">
-                <el-input v-model="searchForm.queryValue" clearable placeholder="请输入计划名称" @keyup="keyUpEvent" size="large"/>
+            <div class="w-56 ml-2">
+                <el-input v-model="searchForm.queryValue" clearable placeholder="请输入项目名称查询" @keyup="keyUpEvent" size="large"/>
             </div>
             <div class="ml-4">
                 <el-button size="large" type="primary" @click="searchClick">
@@ -34,32 +27,11 @@
                 </el-button>
             </div>
         </template>
-        <template #extra>
-            <el-button size="large" type="primary" hc-btn @click="addRowClick">
-                <HcIcon name="add"/>
-                <span>新增计划</span>
-            </el-button>
-        </template>
-
         <HcTable :isIndex="false" :column="tableColumn" :datas="tableData" :loading="tableLoading">
             <template #key1="{row}">
-                <span class="text-blue">{{row.key1}}</span>
-            </template>
-            <template #key4="{row}">
-                <span>{{row.key4}}条</span>
-            </template>
-            <template #key5="{row}">
-                <span>{{row.key5}}条</span>
-            </template>
-            <template #key6="{row}">
-                <span>{{row.key6}}条</span>
-            </template>
-            <template #action="{row,index}">
-                <el-button plain size="small" type="primary" @click="editRowClick(row)">编辑</el-button>
-                <el-button plain size="small" type="danger">删除</el-button>
+                <span class="text-blue" @click="rowNameClick(row)">{{row.key1}}</span>
             </template>
         </HcTable>
-
         <template #action>
             <HcPages :pages="searchForm" @change="pageChange"/>
         </template>
@@ -121,38 +93,26 @@ const pageChange = ({current, size}) => {
 //获取数据
 const tableLoading = ref(false)
 const tableColumn = [
-    {key: 'key', name: '编号', width: '90', align: 'center'},
-    {key: 'key1', name: '计划名称'},
-    {key: 'key2', name: '计划类型', width: '120', align: 'center'},
-    {key: 'key3', name: '计划起止日期', width: '220', align: 'center'},
-    {key: 'key4', name: '计划数量', width: '120', align: 'center'},
-    {key: 'key5', name: '已完成计划', width: '120', align: 'center'},
-    {key: 'key6', name: '未完成计划', width: '100', align: 'center'},
-    {key: 'key8', name: '计划制定人', width: '100', align: 'center'},
-    {key: 'action', name: '操作', width: '130', align: 'center'},
+    {key: 'key', name: '项目编号', width: '100'},
+    {key: 'key1', name: '项目名称'},
+    {key: 'key2', name: '项目类型'},
+    {key: 'key3', name: '项目服务类型'},
+    {key: 'key4', name: '项目进程'},
 ]
 const tableData = ref([
-    {id: 1, key: 'JH-01', key1: '2023年5月度计划', key2: '临时计划', key3: '2022-07-01~2027-04-12', key4: '36', key5: '30', key6: '6', key8: '张三'},
-    {id: 2, key: 'JH-01', key1: '2023年5月度计划', key2: '临时计划', key3: '2022-07-01~2027-04-12', key4: '36', key5: '30', key6: '6', key8: '张三'},
-    {id: 3, key: 'JH-01', key1: '2023年5月度计划', key2: '临时计划', key3: '2022-07-01~2027-04-12', key4: '36', key5: '30', key6: '6', key8: '张三'},
-    {id: 4, key: 'JH-01', key1: '2023年5月度计划', key2: '临时计划', key3: '2022-07-01~2027-04-12', key4: '36', key5: '30', key6: '6', key8: '张三'},
+    {id: 1, key: 'JH-01', key1: '2023年5月度计划', key2: '高速公路', key3: '软件合同', key4: '产品-研发'},
+    {id: 2, key: 'JH-01', key1: '2023年5月度计划', key2: '高速公路', key3: '软件合同', key4: '产品-研发'},
+    {id: 3, key: 'JH-01', key1: '2023年5月度计划', key2: '高速公路', key3: '软件合同', key4: '产品-研发'},
 ])
 
 const getTableData = () => {
 
 }
 
-//新增计划
-const addRowClick = () => {
-    router.push({
-        name: 'program-index-info'
-    })
-}
-
 //编辑预算
-const editRowClick = (row) => {
+const rowNameClick = (row) => {
     router.push({
-        name: 'program-index-info',
+        name: 'program-project-form',
         query: {
             id: row.id
         }

+ 4 - 5
yarn.lock

@@ -816,17 +816,16 @@ has@^1.0.3:
   dependencies:
     function-bind "^1.1.1"
 
-hc-vue3-ui@^1.3.1:
-  version "1.3.1"
-  resolved "http://47.110.251.215:9000/hc-vue3-ui/-/hc-vue3-ui-1.3.1.tgz#9c7a221c20e44cdc0e24e30286375e2589302e56"
-  integrity sha512-a/VR5sdCzGAlFCcWaC7moCoBzu8YxsIOVKce9ycH+wkyznPP/xWhfcKOMBhf/rrRWO0Yyci7Rfne/1+5pnhMzw==
+hc-vue3-ui@^1.3.2:
+  version "1.3.2"
+  resolved "http://47.110.251.215:9000/hc-vue3-ui/-/hc-vue3-ui-1.3.2.tgz#dcdad3501a397a94497fb09088b7bfb6bdf9cfd0"
+  integrity sha512-wfi/UQpg0gtDEweTQlVt4Hck0rI8raW/yqqRsv/gagqhPINctp0CdJ3Pzdx6RyiX6l8mhV4oDUaJvU6Jm/XlSg==
   dependencies:
     axios "^1.4.0"
     dayjs "^1.11.8"
     element-plus "^2.3.6"
     js-fast-way "^0.1.0"
     js-md5 "^0.7.3"
-    remixicon "^3.3.0"
     simple-uploader.js "^0.6.0"
     sortablejs "^1.15.0"
     vue "^3.3.4"