计划管理、指定计划页面

src/styles/index.scss

@@ -136,3 +136,21 @@ html, body, #app {
         margin-left: 32px;
     }
 }
+
+.el-card__header .hc-card-header-box .hc-card-header {
+    position: relative;
+    .el-form {
+        white-space: nowrap;
+        overflow: auto;
+        .el-form-item {
+            margin-bottom: 0;
+            margin-right: 24px;
+            .el-form-item__content .el-form-item__error {
+                display: none;
+            }
+            &:last-child {
+                margin-right: 0;
+            }
+        }
+    }
+}

src/views/program/edit-info.vue

@@ -1,10 +1,321 @@
 <template>
-    <HcCard>
-        等待开发
+    <HcCard idRef="program-index-info-card">
+        <template #header>
+            <el-form ref="formRef" inline :model="formModel" :rules="formRules">
+                <el-form-item label="计划类型：" prop="key1" size="large">
+                    <el-radio-group v-model="formModel.key1">
+                        <el-radio label="1">年度计划</el-radio>
+                        <el-radio label="2">月度计划</el-radio>
+                        <el-radio label="3">临时计划</el-radio>
+                        <el-radio label="4">周计划</el-radio>
+                    </el-radio-group>
+                </el-form-item>
+                <el-form-item label="计划部门：" prop="key2" class="w-52">
+                    <el-select v-model="formModel.key2" block clearable placeholder="计划部门">
+                        <el-option v-for="item in department" :label="item.name" :value="item.key"/>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="计划名称：" prop="key3" class="w-72">
+                    <el-input v-model="formModel.key3" placeholder="请输入计划名称" />
+                </el-form-item>
+                <el-form-item label="计划日期：" prop="key4" class="w-80">
+                    <HcDatePicker :dates="betweenTime" clearable @change="betweenTimeUpdate"/>
+                </el-form-item>
+            </el-form>
+        </template>
+        <template #extra>
+            <el-button type="primary" @click="addTableData">
+                <HcIcon name="add"/>
+                <span>新增</span>
+            </el-button>
+        </template>
+
+        <HcTable :column="tableColumn" :datas="tableData">
+            <template #key1="{row,index}">
+                <el-select v-model="row.key1" placeholder="任务类型" v-if="row.isEditMode">
+                    <el-option label="行政资源" value="1"/>
+                    <el-option label="产品-设计原型" value="2"/>
+                </el-select>
+                <div v-else>{{row.key1}}</div>
+            </template>
+            <template #key2="{row,index}">
+                <el-input v-model="row.key2" v-if="row.isEditMode"/>
+                <div v-else>{{row.key2}}</div>
+            </template>
+            <template #key3="{row,index}">
+                <el-input v-model="row.key3" v-if="row.isEditMode"/>
+                <div v-else>{{row.key3}}</div>
+            </template>
+            <template #key4="{row,index}">
+                <HcDatePicker :dates="betweenTime" clearable @change="betweenTimeUpdate" v-if="row.isEditMode"/>
+                <div v-else>{{row.key4}}</div>
+            </template>
+            <template #key5="{row,index}">
+                <el-input v-model="row.key5" v-if="row.isEditMode" disabled/>
+                <div v-else>{{row.key5}}</div>
+            </template>
+            <template #key6="{row,index}">
+                <el-select v-model="row.key6" placeholder="关联项目" v-if="row.isEditMode">
+                    <el-option label="奉建路" value="1"/>
+                    <el-option label="宝北路" value="2"/>
+                </el-select>
+                <div v-else>{{row.key6}}</div>
+            </template>
+            <template #key7="{row,index}">
+                <div class="text-blue text-hover" @click="relevanceClick(row)">关联</div>
+                <div class="text-green text-hover" v-if="false">已关联</div>
+            </template>
+            <template #key8="{row,index}">
+                <el-select v-model="row.key8" placeholder="项目环节" v-if="row.isEditMode">
+                    <el-option label="商机-演示沟通" value="1"/>
+                    <el-option label="商机-成本核算及报价" value="2"/>
+                </el-select>
+                <div v-else>{{row.key8}}</div>
+            </template>
+            <template #key9="{row,index}">
+                <el-select v-model="row.key9" placeholder="任务人" v-if="row.isEditMode">
+                    <el-option label="张三" value="1"/>
+                    <el-option label="李四" value="2"/>
+                </el-select>
+                <div v-else>{{row.key9}}</div>
+            </template>
+            <template #key10="{row,index}">
+                <el-select v-model="row.key10" placeholder="任务人" v-if="row.isEditMode">
+                    <el-option label="张三" value="1"/>
+                    <el-option label="李四" value="2"/>
+                </el-select>
+                <div v-else>{{row.key10}}</div>
+            </template>
+            <template #key11="{row,index}">
+                <el-select v-model="row.key11" placeholder="任务人" v-if="row.isEditMode">
+                    <el-option label="张三" value="1"/>
+                    <el-option label="李四" value="2"/>
+                </el-select>
+                <div v-else>{{row.key11}}</div>
+            </template>
+            <template #action="{row,index}">
+                <el-button size="small" type="primary" @click="row.isEditMode = false" v-if="row.isEditMode">
+                    <HcIcon name="check"/>
+                    <span>完成</span>
+                </el-button>
+                <el-button size="small" type="primary" @click="row.isEditMode = true" v-else>
+                    <HcIcon name="edit"/>
+                    <span>编辑</span>
+                </el-button>
+                <el-button size="small" type="danger" @click="delTableData(row,index)">
+                    <HcIcon name="delete-bin"/>
+                    <span>删除</span>
+                </el-button>
+            </template>
+        </HcTable>
+
+        <template #action>
+            <div class="hac-program-card-action">
+                <div class="hac-action-tip text-red">
+                    提示：如果计划还未制定完整，则可以点击暂存按钮进行保存，如果点击提交按钮，则计划会同步提交到上级领导和人事处，
+                    提交之后的数据不可再进行修改和删除，只能进行任务废除处理！
+                </div>
+                <div class="hac-action-btn">
+                    <el-button size="large" type="info" hc-btn>
+                        <HcIcon name="save"/>
+                        <span>暂存内容</span>
+                    </el-button>
+                    <el-button size="large" type="primary" hc-btn @click="commitProgram">
+                        <HcIcon name="check-double"/>
+                        <span>提交保存</span>
+                    </el-button>
+                </div>
+            </div>
+        </template>
+
+        <!--关联预算-->
+        <HcDialog isToBody isTable isRowFooter :loading="relatedLoading" :show="relatedModal" title="关联项目成本预算" widths="62rem">
+            <HcTable :isIndex="false" :column="tableBudgetColumn" :datas="tableBudgetData" :loading="tableBudgetLoading">
+                <template #action="{row,index}">
+                    <el-button plain size="small" type="primary" @click="row.isRelated = true" v-if="!row.isRelated">
+                        <HcIcon name="link" :line="false"/>
+                        <span>关联</span>
+                    </el-button>
+                    <el-button plain size="small" type="danger" @click="row.isRelated = false" v-else>
+                        <HcIcon name="link-unlink-m" :line="false"/>
+                        <span>取消</span>
+                    </el-button>
+                </template>
+            </HcTable>
+            <template #leftRowFooter>
+                <el-button size="large" @click="closeRelatedClick">
+                    <HcIcon name="close"/>
+                    <span>取消</span>
+                </el-button>
+                <el-button size="large" type="primary" @click="saveRelatedClick">
+                    <HcIcon name="check"/>
+                    <span>确认关联</span>
+                </el-button>
+            </template>
+            <template #rightRowFooter>
+                <HcPages :pages="searchBudgetForm" @change="pageBudgetChange"/>
+            </template>
+        </HcDialog>
+
+
     </HcCard>
 </template>
 
 <script setup>
 import {ref} from "vue";
+import {delMessage} from "~uti/tools";
+
+//选择部门
+const department = ref([
+    {name: '研发部门', key: '1'},
+    {name: '业务部门', key: '2'},
+    {name: '人事部门', key: '3'},
+])
+
+//顶部表单数据
+const formRef = ref(null)
+const formModel = ref({key1: '', key2: '', key3: ''})
+const formRules = {
+    key2: {
+        required: true,
+        trigger: 'blur',
+        message: "请选择计划部门"
+    },
+    key3: {
+        required: true,
+        trigger: 'blur',
+        message: "请输入计划名称"
+    },
+    key4: {
+        required: true,
+        trigger: 'blur',
+        message: "请选择计划日期"
+    }
+}
+
+//日期时间被选择
+const betweenTime = ref(null)
+const betweenTimeUpdate = ({arr, query}) => {
+    betweenTime.value = arr
+    //formModel.value.betweenTime = query
+}
+
+//计划表
+const tableColumn = [
+    {key: 'key1', name: '任务类型', width: '200'},
+    {key: 'key2', name: '任务描述', width: '200'},
+    {key: 'key3', name: '完成指标', width: '200'},
+    {key: 'key4', name: '起止日期', width: '260'},
+    {key: 'key5', name: '总工作日', width: '140'},
+    {key: 'key6', name: '关联项目', width: '160'},
+    {key: 'key7', name: '关联预算', width: '160', align: 'center'},
+    {key: 'key8', name: '项目环节', width: '200'},
+    {key: 'key9', name: '任务人', width: '140'},
+    {key: 'key10', name: '协助人员', width: '140'},
+    {key: 'key11', name: '部门负责人', width: '140'},
+    {key: 'action', name: '操作', width: '160', align: 'center', fixed: 'right'},
+]
+const tableData = ref([
+    {id: 1, key1: '', key2: '', key3: '', key4: '33', key5: '44', key6: '', key7: '22', isEditMode: true},
+])
+
+//新增工资预算表格
+const addTableData = () => {
+    tableData.value.unshift({isEditMode: true})
+}
+
+//删除工资预算表格
+const delTableData = (row,index) => {
+    delMessage(() => {
+        if (!row.id)  {
+            tableData.value.splice(index, 1)
+        }
+    })
+}
 
+//关联预算弹窗
+const relatedLoading = ref(false)
+const relatedModal = ref(false)
+
+//关联预算
+const relevanceClick = (row) => {
+    relatedLoading.value = false
+    relatedModal.value = true
+}
+
+//预算分页和搜索
+const searchBudgetForm = ref({current: 1, size: 20, total: 0})
+const pageBudgetChange = ({current, size}) => {
+    searchBudgetForm.value.current = current
+    searchBudgetForm.value.size = size
+}
+
+//预算表格
+const tableBudgetLoading = ref(false)
+const tableBudgetColumn = [
+    {key: 'key', name: '项目环节', width: '160', align: 'center'},
+    {key: 'key1', name: '预算类型', width: '100', align: 'center'},
+    {key: 'key2', name: '任务明细', width: '160', align: 'center'},
+    {key: 'key3', name: '预算金额', width: '120', align: 'center'},
+    {key: 'key4', name: '任务完成标准'},
+    {key: 'key5', name: '投入人员数量', width: '120', align: 'center'},
+    {key: 'action', name: '操作', width: '90', align: 'center'},
+]
+const tableBudgetData = ref([
+    {id: 1, key: 'xxx', key1: 'xxx', key2: 'xxx', key3: 'xxx', key4: 'xxx', key5: 'xxx'},
+    {id: 2, key: 'xxx', key1: 'xxx', key2: 'xxx', key3: 'xxx', key4: 'xxx', key5: 'xxx'},
+    {id: 3, key: 'xxx', key1: 'xxx', key2: 'xxx', key3: 'xxx', key4: 'xxx', key5: 'xxx'},
+    {id: 4, key: 'xxx', key1: 'xxx', key2: 'xxx', key3: 'xxx', key4: 'xxx', key5: 'xxx'},
+])
+
+//关闭关联预算弹窗
+const closeRelatedClick = () => {
+    relatedLoading.value = false
+    relatedModal.value = false
+}
+
+//提交关联预算弹窗
+const saveRelatedClick = () => {
+    relatedLoading.value = false
+    relatedModal.value = false
+}
+
+
+//提交计划
+const commitProgram = () => {
+    window?.$messageBox?.alert('请核对清楚计划内容！一旦提交，将无法进行自由修改计划内容', '提交提醒', {
+        showCancelButton: true,
+        confirmButtonText: '确认提交',
+        cancelButtonText: '取消',
+        type: 'info',
+        callback: (action) => {
+            if (action === 'confirm') {
+                console.log('111')
+            }
+        }
+    })
+}
 </script>
+
+<style lang="scss" scoped>
+.hac-program-card-action {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    .hac-action-tip {
+        position: relative;
+        font-size: 14px;
+        margin-right: 30px;
+        flex: 1;
+    }
+    .hac-action-btn {
+        position: relative;
+        margin-left: 60px;
+    }
+}
+</style>
+
+<style lang="scss">
+
+</style>

src/views/program/index.vue

@@ -1,10 +1,161 @@
 <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>
+        <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>
+            </template>
+        </HcTable>
+
+        <template #action>
+            <HcPages :pages="searchForm" @change="pageChange"/>
+        </template>
     </HcCard>
 </template>
 
 <script setup>
 import {ref} from "vue";
+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()
+    }
+}
+
+//搜索
+const searchClick = () => {
+    searchForm.value.current = 1;
+    getTableData()
+}
+
+//重置搜索表单
+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'},
+]
+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 addRowClick = () => {
+    router.push({
+        name: 'program-index-info'
+    })
+}
 
+//编辑预算
+const editRowClick = (row) => {
+    router.push({
+        name: 'program-index-info',
+        query: {
+            id: row.id
+        }
+    })
+}
 </script>

src/views/project/budget-form.vue

@@ -1,23 +1,21 @@
 <template>
     <HcCard>
         <template #header>
-            <div class="hac-budget-form-card-header">
-                <el-form ref="formRef" inline :model="formModel" :rules="formRules">
-                    <el-form-item label="关联项目" prop="key1">
-                        <el-select v-model="formModel.key1" block clearable placeholder="项目名称">
-                            <el-option v-for="item in projectName" :label="item.name" :value="item.key"/>
-                        </el-select>
-                    </el-form-item>
-                    <el-form-item label="预算制订人" prop="key2">
-                        <el-input v-model="formModel.key2" placeholder="预算制订人" />
-                    </el-form-item>
-                    <el-form-item label="预算总额" prop="key3">
-                        <el-input v-model="formModel.key3" placeholder="预算总额" disabled>
-                            <template #append>元</template>
-                        </el-input>
-                    </el-form-item>
-                </el-form>
-            </div>
+            <el-form ref="formRef" inline :model="formModel" :rules="formRules">
+                <el-form-item label="关联项目" prop="key1">
+                    <el-select v-model="formModel.key1" block clearable placeholder="项目名称">
+                        <el-option v-for="item in projectName" :label="item.name" :value="item.key"/>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="预算制订人" prop="key2">
+                    <el-input v-model="formModel.key2" placeholder="预算制订人" />
+                </el-form-item>
+                <el-form-item label="预算总额" prop="key3">
+                    <el-input v-model="formModel.key3" placeholder="预算总额" disabled>
+                        <template #append>元</template>
+                    </el-input>
+                </el-form-item>
+            </el-form>
         </template>
         <template #extra>
             <el-button type="primary" hc-btn @click="addTableData">
@@ -235,10 +233,5 @@ const delTableData = (row,index) => {
 </style>
 
 <style lang="scss">
-.hac-budget-form-card-header {
-    .el-form--inline .el-form-item {
-        margin-right: 16px;
-        margin-bottom: 16px;
-    }
-}
+
 </style>