|
@@ -1,67 +1,63 @@
|
|
<template>
|
|
<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>
|
|
<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>
|
|
</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>
|
|
- <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>
|
|
- <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>
|
|
- <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>
|
|
<template #action="{row,index}">
|
|
<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>
|
|
</template>
|
|
</HcTable>
|
|
</HcTable>
|
|
-
|
|
|
|
<template #action>
|
|
<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>
|
|
</template>
|
|
</HcCard>
|
|
</HcCard>
|
|
</template>
|
|
</template>
|
|
@@ -72,90 +68,82 @@ import {useRouter} from 'vue-router'
|
|
|
|
|
|
const router = useRouter()
|
|
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 = [
|
|
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([
|
|
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>
|
|
</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>
|