更新部门月度计划预算、以及更新依赖

package.json

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

src/views/program/section/form.vue

@@ -1,68 +1,74 @@
 <template>
-    <HcCard>
+    <HcCard actionUi="text-center">
         <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>
+            <HcNewSwitch :datas="tabTab" :keys="tabKey" @change="tabChange" :round="false"/>
         </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 #key9="{row}">
+                <el-select v-model="row.key9" size="small">
+                    <el-option label="选项1" value="选项1"/>
+                    <el-option label="选项2" value="选项2"/>
+                </el-select>
             </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="primary" @click="openPlanModalShow(row)">开启</el-button>
+                <el-button size="small" type="danger" @click="pausePlanModalShow(row)">暂停</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 @click="saveClick">
+                <HcIcon name="check-double"/>
+                <span>提交保存</span>
+            </el-button>
         </template>
+
+        <!--开启计划-->
+        <HcDialog bgColor="#ffffff" isToBody title="开启计划" widths="40rem" saveText="保存"
+                  :show="openPlanModal" @close="openPlanCloseClick" @save="openPlanSaveClick"
+        >
+            <HcListItem title="原计划起止日期：" content="2023-02-23~2023-02-28"/>
+            <HcListItem title="中途暂停计划起止日期：" content="2023-02-23~2023-02-28"/>
+            <HcListItem title="中途开启计划起止日期：" isCenter>
+                <HcDatePicker :dates="betweenTime" @change="betweenTimeUpdate"/>
+            </HcListItem>
+            <HcListItem title="原计划起止工时(天)：" isCenter>
+                <span class="text-red text-xl">6</span>
+            </HcListItem>
+            <HcListItem title="原计划截止暂停阶段起止工时(天)：" isCenter>
+                <span class="text-red text-xl">6</span>
+            </HcListItem>
+            <HcListItem title="中途暂停之后开启计划起止工时(天)：" isCenter>
+                <span class="text-red text-xl">6</span>
+            </HcListItem>
+            <div class="mt-8">
+                <el-alert type="warning" title="提示：" description="该计划暂停之后开启的工时加上暂停前的工时已经超出原计划工时，是否安排不合理，请从新安排！" :closable="false"/>
+            </div>
+        </HcDialog>
+
+        <!--暂停计划-->
+        <HcDialog bgColor="#ffffff" isToBody title="暂停计划" widths="40rem" saveText="保存"
+                  :show="pausePlanModal" @close="pausePlanCloseClick" @save="pausePlanSaveClick"
+        >
+            <HcListItem title="原计划起止日期：" content="2023-02-23~2023-02-28"/>
+            <HcListItem title="中途暂停计划日期：" isCenter>
+                <el-date-picker type="date" class="block" value-format="YYYY-MM-DD"/>
+            </HcListItem>
+            <HcListItem title="中途开启计划起止日期：" content="2023-02-23~2023-02-28"/>
+            <HcListItem title="原计划起止工时(天)：" isCenter>
+                <span class="text-red text-xl">6</span>
+            </HcListItem>
+            <HcListItem title="原计划截止暂停阶段起止工时(天)：" isCenter>
+                <span class="text-red text-xl">6</span>
+            </HcListItem>
+            <HcListItem title="中途暂停之后开启计划起止工时(天)：" isCenter>
+                <span class="text-red text-xl">6</span>
+            </HcListItem>
+        </HcDialog>
+
     </HcCard>
 </template>
 
@@ -72,90 +78,87 @@ import {useRouter} from 'vue-router'
 
 const router = useRouter()
 
-//计划类型
-const planType = ref([
-    {name: '临时计划', key: '1'},
-    {name: '月度计划', key: '2'},
-    {name: '年度计划', key: '3'},
-])
+//类型tab数据和相关处理
+const tabKey = ref('key1')
+const tabTab = ref([
+    {key: 'key1', name: '市场部月度预算'},
+    {key: 'key2', name: '研发部月度预算'},
+    {key: 'key3', name: '实施部月度预算'},
+    {key: 'key4', name: '维护部月度预算'},
+    {key: 'key5', name: '人事行政(财务)部月度预算'},
+]);
+const tabChange = ({key}) => {
+    tabKey.value = key
+}
+
 
-//选择部门
-const department = ref([
-    {name: '研发部门', key: '1'},
-    {name: '业务部门', key: '2'},
-    {name: '人事部门', key: '3'},
+//获取数据
+const tableLoading = ref(false)
+const tableColumn = [
+    {key: 'key1', name: '所属项目', minWidth: '160'},
+    {key: 'key2', name: '项目环节', width: '160', align: 'center'},
+    {key: 'key3', name: '预算类型', width: '160', align: 'center'},
+    {key: 'key4', name: '任务明细', width: '160', align: 'center'},
+    {key: 'key5', name: '任务类型', width: '160', align: 'center'},
+    {key: 'key6', name: '任务描述', minWidth: '160', isTooltip: true},
+    {key: 'key8', name: '完成指标', width: '160', align: 'center'},
+    {key: 'key9', name: '任务人', width: '160', align: 'center'},
+    {key: 'key10', name: '计划起止日期', width: '220', align: 'center'},
+    {key: 'key11', name: '预计差旅费(元)', width: '180', align: 'center'},
+    {key: 'key12', name: '状态', width: '100', align: 'center'},
+    {key: 'action', name: '操作', width: '160', align: 'center', fixed: 'right'},
+]
+const tableData = ref([
+    {id: 1, key1: 'xxx', key2: 'xxx', key3: 'xx', key4: 'xx', key5: 'xx', key6: 'xx', key10: '2022-07-01~2027-04-12'},
+    {id: 2, key1: 'xxx', key2: 'xxx', key3: 'xx', key4: 'xx', key5: 'xx', key6: 'xx', key10: '2022-07-01~2027-04-12'},
+    {id: 3, key1: 'xxx', key2: 'xxx', key3: 'xx', key4: 'xx', key5: 'xx', key6: 'xx', key10: '2022-07-01~2027-04-12'},
+    {id: 4, key1: 'xxx', key2: 'xxx', key3: 'xx', key4: 'xx', key5: 'xx', key6: 'xx', key10: '2022-07-01~2027-04-12'},
 ])
 
-//搜索表单
-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()
-    }
+const getTableData = () => {
+
 }
 
-//搜索
-const searchClick = () => {
-    searchForm.value.current = 1;
-    getTableData()
+//开启计划
+const openPlanModal = ref(false)
+const openPlanModalShow = (row) => {
+    openPlanModal.value = true
 }
+const openPlanCloseClick = () => {
+    openPlanModal.value = false
+}
+const openPlanSaveClick = () => {
 
-//重置搜索表单
-const resetClick = () => {
-    searchForm.value = {current: 1, size: 20, total: 0}
 }
 
-//分页被点击
-const pageChange = ({current, size}) => {
-    searchForm.value.current = current
-    searchForm.value.size = size
-    getTableData()
+//日期时间被选择
+const betweenTime = ref(null)
+const betweenTimeUpdate = ({arr, query}) => {
+    betweenTime.value = arr
 }
 
-//获取数据
-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'},
-]
-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: '张三'},
-])
 
-const getTableData = () => {
 
+//暂停计划
+const pausePlanModal = ref(false)
+const pausePlanModalShow = (row) => {
+    pausePlanModal.value = true
 }
+const pausePlanCloseClick = () => {
+    pausePlanModal.value = false
+}
+const pausePlanSaveClick = () => {
 
-//新增计划
-const addRowClick = () => {
-    router.push({
-        name: 'program-index-info'
-    })
 }
 
-//编辑预算
-const editRowClick = (row) => {
-    router.push({
-        name: 'program-index-info',
-        query: {
-            id: row.id
-        }
-    })
+
+//返回
+const goBackClick = () => {
+    router.back()
+}
+
+//提交保存
+const saveClick = () => {
+
 }
 </script>

src/views/program/section/index.vue

@@ -155,10 +155,13 @@ const monthCloseClick = () => {
 }
 //确认下一步
 const monthSaveClick = () => {
-
+    monthModal.value = false
+    router.push({
+        name: 'program-section-form',
+        query: formMonthModel.value
+    })
 }
 
-
 //编辑预算
 const editRowClick = (row) => {
     router.push({

yarn.lock

@@ -811,10 +811,10 @@ has@^1.0.3:
   dependencies:
     function-bind "^1.1.1"
 
-hc-vue3-ui@^1.3.4:
-  version "1.3.4"
-  resolved "http://47.110.251.215:9000/hc-vue3-ui/-/hc-vue3-ui-1.3.4.tgz#326fc43f904fda0504d794b3eb6555ae4e753370"
-  integrity sha512-G4RborwWYZ9cEzzwznQvARNvUUHK9pMeW1vjhauyNqHKtWh6AyfHFtj+AG3xcfC38p1rf1zaOU75hBqtaPLAkw==
+hc-vue3-ui@^1.3.5:
+  version "1.3.5"
+  resolved "http://47.110.251.215:9000/hc-vue3-ui/-/hc-vue3-ui-1.3.5.tgz#eb6c428b1149f5971c59c75f0d255888ed669c6b"
+  integrity sha512-UB+VPb80kos0cZIsx5KDIq8B5r8/la4Zis2ZxZmK7C4zsgvjy+Ver7rCjoIN2Hcjwe6KHXk11Si/s3LVGzEaVg==
   dependencies:
     axios "^1.4.0"
     dayjs "^1.11.8"