|
|
@@ -2,26 +2,185 @@
|
|
|
<div style="height:100%">
|
|
|
<HcTabsSimple :cur="tabsKey" :datas="tabsData" @tabClick="tabsClick">
|
|
|
<template #tab-pricetype>
|
|
|
- 测试1
|
|
|
+ <HcCard actionSize="lg" scrollbar>
|
|
|
+ <div class="hc-page-layout-box">
|
|
|
+ <div :style="'width:' + leftWidth + 'px;'" class="hc-layout-left-box menu">
|
|
|
+ <div class="hc-menu-header-box">
|
|
|
+ <div class="text-xl name">预算分类</div>
|
|
|
+
|
|
|
+ <el-button _icon hc-btn size="small" type="primary" >
|
|
|
+ <HcIcon name="add" @click="openpriceEdit(1)"/>
|
|
|
+ </el-button>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="hc-menu-contents-box">
|
|
|
+ <el-scrollbar>
|
|
|
+ <HcMenuSimple :datas="menuOptions" :keys="menuKey" :props="menusProps" :menus="contextMenu" @menuTap="contextMenuClick"
|
|
|
+ @change="menuChange" />
|
|
|
+ </el-scrollbar>
|
|
|
+ </div>
|
|
|
+ <!--左右拖动-->
|
|
|
+ <div class="horizontal-drag-line" @mousedown="onmousedown"/>
|
|
|
+ <HcDialog :show="priceModal" :title="priceTitle" @close="priceModalClose">
|
|
|
+ <el-form
|
|
|
+ label-position="left"
|
|
|
+ label-width="100px"
|
|
|
+ :model="priceform"
|
|
|
+ style="max-width: 460px"
|
|
|
+ >
|
|
|
+ <el-form-item label="预算分类名称">
|
|
|
+ <el-input v-model="priceform.name" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </HcDialog>
|
|
|
+ </div>
|
|
|
+ <div class="hc-page-content-box">
|
|
|
+ <HcCard actionSize="lg" scrollbar>
|
|
|
+ <template #header>
|
|
|
+
|
|
|
+ <div class="ml-3">
|
|
|
+ 任务明细：<HcTooltip keys="tentative_device_approach_menu_add">
|
|
|
+ <el-button _icon hc-btn size="small" type="primary" @click="openEdit(1)">
|
|
|
+ <HcIcon name="add"/>
|
|
|
+ </el-button>
|
|
|
+ </HcTooltip>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <HcTable :column="tableColumn" :datas="tableData">
|
|
|
+ <template #action="{row, index}">
|
|
|
+ <el-button size="small" type="primary" @click="openEdit(2)">编辑</el-button>
|
|
|
+ <el-button size="small" type="primary" @click="delTask">删除</el-button>
|
|
|
+ </template>
|
|
|
+ </HcTable>
|
|
|
+
|
|
|
+ <HcDialog :show="editTaskModal" :title="taskTitle" @close="testModalClose">
|
|
|
+ <el-form
|
|
|
+ label-position="left"
|
|
|
+ label-width="100px"
|
|
|
+ :model="formLabelAlign"
|
|
|
+ style="max-width: 460px"
|
|
|
+ >
|
|
|
+ <el-form-item label="任务明细名称">
|
|
|
+ <el-input v-model="formLabelAlign.name" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="任务内容">
|
|
|
+ <el-input v-model="formLabelAlign.region" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="完成指标">
|
|
|
+ <el-input v-model="formLabelAlign.type" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </HcDialog>
|
|
|
+
|
|
|
+ </HcCard>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </HcCard>
|
|
|
</template>
|
|
|
<template #tab-tasktype>
|
|
|
- 测试2
|
|
|
+ <HcCard actionSize="lg" scrollbar>
|
|
|
+ <template #header>
|
|
|
+
|
|
|
+ <div class="ml-3">
|
|
|
+ 任务分类：<HcTooltip keys="tentative_device_approach_menu_add">
|
|
|
+ <el-button _icon hc-btn size="small" type="primary" @click="openTypeEdit(1)">
|
|
|
+ <HcIcon name="add"/>
|
|
|
+ </el-button>
|
|
|
+ </HcTooltip>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <HcTable :column="tasktableColumn" :datas="tasktableData">
|
|
|
+ <template #action="{row, index}">
|
|
|
+ <el-button size="small" type="primary" @click="openTypeEdit(2)">编辑</el-button>
|
|
|
+ <el-button size="small" type="primary" @click="delTasktype">删除</el-button>
|
|
|
+ </template>
|
|
|
+ </HcTable>
|
|
|
+ <HcDialog :show="tasktypeModal" :title="taskTypeTitle" @close="taskTypeModalClose">
|
|
|
+ <el-form
|
|
|
+ label-position="left"
|
|
|
+ label-width="100px"
|
|
|
+ :model="formtaskType"
|
|
|
+ style="max-width: 460px"
|
|
|
+ >
|
|
|
+ <el-form-item label="任务类型名称">
|
|
|
+ <el-input v-model="formtaskType.name" />
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="完成指标">
|
|
|
+ <el-select v-model="formtaskType.type" class="m-2" placeholder="请选择" >
|
|
|
+ <el-option
|
|
|
+ v-for="item in typeoptions"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </HcDialog>
|
|
|
+
|
|
|
+ </HcCard>
|
|
|
</template>
|
|
|
<template #tab-indicator>
|
|
|
测试3
|
|
|
</template>
|
|
|
<template #tab-price>
|
|
|
- 岗位单价
|
|
|
+ <HcCard actionSize="lg" scrollbar>
|
|
|
+ <template #header>
|
|
|
+
|
|
|
+ <div class="ml-3">
|
|
|
+ 岗位单价：<HcTooltip keys="tentative_device_approach_menu_add">
|
|
|
+ <el-button _icon hc-btn size="small" type="primary" @click="positionEdit(1)">
|
|
|
+ <HcIcon name="add"/>
|
|
|
+ </el-button>
|
|
|
+ </HcTooltip>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <HcTable :column="positiontableColumn" :datas="positiontableData">
|
|
|
+ <template #action="{row, index}">
|
|
|
+ <el-button size="small" type="primary" @click="positionEdit(2)">编辑</el-button>
|
|
|
+ <el-button size="small" type="primary" @click="delTaskposition">删除</el-button>
|
|
|
+ </template>
|
|
|
+ </HcTable>
|
|
|
+ <HcDialog :show="positonModal" :title="positonModalTitle" @close="positonModalClose">
|
|
|
+ <el-form
|
|
|
+ label-position="left"
|
|
|
+ label-width="100px"
|
|
|
+ :model="formposition"
|
|
|
+ style="max-width: 460px"
|
|
|
+ >
|
|
|
+ <el-form-item label="岗位类型名称">
|
|
|
+ <el-input v-model="formposition.name" />
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="日单价">
|
|
|
+ <el-input v-model="formposition.price" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </HcDialog>
|
|
|
+
|
|
|
+
|
|
|
+ </HcCard>
|
|
|
</template>
|
|
|
</HcTabsSimple>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
-import {ref, watch} from "vue";
|
|
|
+import {ref, watch,onMounted} from "vue";
|
|
|
import {useAppStore} from "~src/store";
|
|
|
+import {HcIsButton} from "~src/plugins/IsButtons";
|
|
|
+//渲染完成
|
|
|
+onMounted(() => {
|
|
|
+
|
|
|
+ setContextMenu()
|
|
|
+
|
|
|
+})
|
|
|
//类型处理
|
|
|
-const tabsKey = ref('internal')
|
|
|
+const tabsKey = ref('pricetype')
|
|
|
const tabsData = ref([
|
|
|
{icon: 'bar-chart-box', label: '预算分类', key: 'pricetype'},
|
|
|
{icon: 'tools', label: '任务类型', key: 'tasktype'},
|
|
|
@@ -32,6 +191,217 @@ const tabsData = ref([
|
|
|
const tabsClick = (key) => {
|
|
|
tabsKey.value = key
|
|
|
}
|
|
|
+
|
|
|
+const tableColumn = [
|
|
|
+ {key: 'name', name: '任务明细'},
|
|
|
+ {key: 'text', name: '任务内容'},
|
|
|
+ {key: 'color', name: '完成指标'},
|
|
|
+ {key: 'action', name: '操作', width: 200}
|
|
|
+]
|
|
|
+const tableData = ref([
|
|
|
+ {name: '名称1', text: '文本1', color: 'red'},
|
|
|
+ {name: '名称2', text: '文本2', color: 'blue'},
|
|
|
+ {name: '名称3', text: '文本3', color: '无'}
|
|
|
+])
|
|
|
+const positiontableColumn = [
|
|
|
+ {key: 'name', name: '岗位类型名称'},
|
|
|
+ {key: 'text', name: '日单价'},
|
|
|
+ {key: 'action', name: '操作', width: 200}
|
|
|
+]
|
|
|
+
|
|
|
+
|
|
|
+const positiontableData = ref([
|
|
|
+ {name: '名称1', text: '文本1', color: 'red'},
|
|
|
+ {name: '名称2', text: '文本2', color: 'blue'},
|
|
|
+ {name: '名称3', text: '文本3', color: '无'}
|
|
|
+])
|
|
|
+
|
|
|
+const tasktableColumn = [
|
|
|
+ {key: 'name', name: '任务类型名称'},
|
|
|
+ {key: 'text', name: '类型'},
|
|
|
+ {key: 'action', name: '操作', width: 200}
|
|
|
+]
|
|
|
+const tasktableData = ref([
|
|
|
+ {name: '名称1', text: '文本1', color: 'red'},
|
|
|
+ {name: '名称2', text: '文本2', color: 'blue'},
|
|
|
+ {name: '名称3', text: '文本3', color: '无'}
|
|
|
+])
|
|
|
+//左侧菜单
|
|
|
+const menuKey = ref('1')
|
|
|
+const menuOptions = ref([
|
|
|
+ {key: '1', label: '合同洽谈', badge: 0},
|
|
|
+ {key: '2', label: '合同洽谈', badge: 0},
|
|
|
+ {key: '3', label: '合同洽谈', badge: 0},
|
|
|
+ {key: '4', label: '合同洽谈', badge: 0},
|
|
|
+ {key: '5', label: '合同洽谈', badge: 0},
|
|
|
+]);
|
|
|
+
|
|
|
+const menuChange = (item) => {
|
|
|
+ console.log(item)
|
|
|
+ menuKey.value = item?.key
|
|
|
+}
|
|
|
+const menusProps = ref({
|
|
|
+ key: 'key',
|
|
|
+ label: 'label'
|
|
|
+})
|
|
|
+//左右拖动，改变树形结构宽度
|
|
|
+const leftWidth = ref(240);
|
|
|
+const onmousedown = () => {
|
|
|
+ const leftNum = isCollapse.value ? 142 : 272
|
|
|
+ document.onmousemove = (ve) => {
|
|
|
+ let diffVal = ve.clientX - leftNum;
|
|
|
+ if (diffVal >= 220 && diffVal <= 400) {
|
|
|
+ leftWidth.value = diffVal;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ document.onmouseup = () => {
|
|
|
+ document.onmousemove = null;
|
|
|
+ document.onmouseup = null;
|
|
|
+ }
|
|
|
+}
|
|
|
+//菜单的右键菜单
|
|
|
+const contextMenu = ref([])
|
|
|
+const setContextMenu = () => {
|
|
|
+ let newArr = [];
|
|
|
+ newArr.push({icon: 'draft', label: '编辑分类', key: "edit"})
|
|
|
+ newArr.push({icon: 'delete-bin', label: '删除分类', key: "del"})
|
|
|
+
|
|
|
+ contextMenu.value = newArr
|
|
|
+}
|
|
|
+
|
|
|
+//菜单的右键菜单被点击
|
|
|
+const contextMenuClick = ({key, item}) => {
|
|
|
+ if (key === 'edit') {
|
|
|
+ openpriceEdit(2)
|
|
|
+ menuKey.value=item?.key
|
|
|
+ } else if (key === 'del') {
|
|
|
+ window?.$messageBox?.alert('您确定要删除该预算分类信息吗? 一旦注销数据将彻底清除，请谨慎操作？', '删除提醒', {
|
|
|
+ showCancelButton: true,
|
|
|
+ confirmButtonText: '确认注销',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning',
|
|
|
+ callback: (action) => {
|
|
|
+ if (action === 'confirm') {
|
|
|
+ console.log(11111);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+}
|
|
|
+const editTaskModal=ref(false)
|
|
|
+const testModalClose=()=>{
|
|
|
+ editTaskModal.value=false
|
|
|
+}
|
|
|
+const priceTitle=ref('')
|
|
|
+const priceModal=ref(false)
|
|
|
+const openpriceEdit=(type)=>{
|
|
|
+ if(type===1){
|
|
|
+ priceTitle.value='新增分类'
|
|
|
+ }else{
|
|
|
+ priceTitle.value='编辑分类'
|
|
|
+ }
|
|
|
+
|
|
|
+ priceModal.value=true
|
|
|
+}
|
|
|
+const delTask=()=>{
|
|
|
+ window?.$messageBox?.alert('您确定要删除该任务明细吗? 一旦注销数据将彻底清除，请谨慎操作？', '删除提醒', {
|
|
|
+ showCancelButton: true,
|
|
|
+ confirmButtonText: '确认注销',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning',
|
|
|
+ callback: (action) => {
|
|
|
+ if (action === 'confirm') {
|
|
|
+ console.log(11111);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+const delTasktype=()=>{
|
|
|
+ window?.$messageBox?.alert('您确定要删除该任务分类吗? 一旦注销数据将彻底清除，请谨慎操作？', '删除提醒', {
|
|
|
+ showCancelButton: true,
|
|
|
+ confirmButtonText: '确认注销',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning',
|
|
|
+ callback: (action) => {
|
|
|
+ if (action === 'confirm') {
|
|
|
+ console.log(11111);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+const delTaskposition=()=>{
|
|
|
+ window?.$messageBox?.alert('您确定要删除该岗位单价吗? 一旦注销数据将彻底清除，请谨慎操作？', '删除提醒', {
|
|
|
+ showCancelButton: true,
|
|
|
+ confirmButtonText: '确认注销',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning',
|
|
|
+ callback: (action) => {
|
|
|
+ if (action === 'confirm') {
|
|
|
+ console.log(11111);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+const priceform=ref({})
|
|
|
+const priceModalClose=()=>{
|
|
|
+ priceModal.value=false
|
|
|
+}
|
|
|
+const openEdit=(type)=>{
|
|
|
+ if(type===1){
|
|
|
+ taskTitle.value='新增任务明细'
|
|
|
+ }else{
|
|
|
+ taskTitle.value='编辑任务明细'
|
|
|
+ }
|
|
|
+
|
|
|
+ editTaskModal.value=true
|
|
|
+}
|
|
|
+
|
|
|
+const formLabelAlign = ref({
|
|
|
+ name: '',
|
|
|
+ region: '',
|
|
|
+ type: '',
|
|
|
+})
|
|
|
+
|
|
|
+const taskTitle=ref('')
|
|
|
+const taskTypeTitle=ref('')
|
|
|
+const formtaskType=ref({})
|
|
|
+const tasktypeModal=ref(false)
|
|
|
+const taskTypeModalClose=()=>{
|
|
|
+ tasktypeModal.value=false
|
|
|
+}
|
|
|
+const openTypeEdit=(type)=>{
|
|
|
+ if(type===1){
|
|
|
+ taskTypeTitle.value='新增任务'
|
|
|
+ }else{
|
|
|
+ taskTypeTitle.value='编辑任务'
|
|
|
+ }
|
|
|
+ tasktypeModal.value=true
|
|
|
+}
|
|
|
+const typeoptions=ref([
|
|
|
+{
|
|
|
+ value: '1',
|
|
|
+ label: '固定任务',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: '2',
|
|
|
+ label: '临时任务',
|
|
|
+ },
|
|
|
+])
|
|
|
+const positonModal=ref(false)
|
|
|
+const positonModalTitle=ref('')
|
|
|
+const positonModalClose=()=>{
|
|
|
+ positonModal.value=false
|
|
|
+}
|
|
|
+const formposition=ref({})
|
|
|
+const positionEdit=(type)=>{
|
|
|
+ if(type===1){
|
|
|
+ positonModalTitle.value='新增岗位类型'
|
|
|
+ }else{
|
|
|
+ positonModalTitle.value='编辑岗位类型'
|
|
|
+ }
|
|
|
+ positonModal.value=true
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
@@ -39,5 +409,94 @@ const tabsClick = (key) => {
|
|
|
</style>
|
|
|
|
|
|
<style lang="scss">
|
|
|
-
|
|
|
+.hc-page-layout-box {
|
|
|
+ display: flex;
|
|
|
+ position: relative;
|
|
|
+ height: calc(100vh - 228px);
|
|
|
+
|
|
|
+ .hc-layout-left-box {
|
|
|
+
|
|
|
+ width: 382px;
|
|
|
+ position: relative;
|
|
|
+ background: #f1f5f8;
|
|
|
+ // background: transparent;
|
|
|
+ border-radius: 10px;
|
|
|
+ margin-right: 24px;
|
|
|
+ box-shadow: -2px 0 10px 0 rgba(32, 37, 50, 0.03), 0 10px 21px 20px rgba(32, 37, 50, 0.03);
|
|
|
+ .horizontal-drag-line {
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ top: 0;
|
|
|
+ width: 4px;
|
|
|
+ height: 100%;
|
|
|
+ user-select: none;
|
|
|
+ cursor: col-resize;
|
|
|
+ background-color: #00000000;
|
|
|
+ }
|
|
|
+ .hc-project-box {
|
|
|
+ position: relative;
|
|
|
+ padding: 15px 24px;
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-start;
|
|
|
+ border-bottom: 1px solid #E9E9E9;
|
|
|
+ .hc-project-icon-box {
|
|
|
+ font-size: 30px;
|
|
|
+ color: var(--el-color-primary);
|
|
|
+ }
|
|
|
+ .project-name-box {
|
|
|
+ flex: auto;
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ .project-alias {
|
|
|
+ color: var(--el-color-primary);
|
|
|
+ }
|
|
|
+ .project-name {
|
|
|
+ margin-top: 6px;
|
|
|
+ color: #838791;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .hc-tree-box {
|
|
|
+ position: relative;
|
|
|
+ padding: 15px 20px;
|
|
|
+ height: calc(100% - 80px);
|
|
|
+ }
|
|
|
+ .hc-tree-search-box {
|
|
|
+ position: relative;
|
|
|
+ padding: 15px 20px;
|
|
|
+ height: calc(100% - 187px);
|
|
|
+ .hc-search-tree-val {
|
|
|
+ position: relative;
|
|
|
+ margin-bottom: 24px;
|
|
|
+ }
|
|
|
+ .hc-tree-scrollbar {
|
|
|
+ position: relative;
|
|
|
+ height: calc(100% - 68px);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &.menu {
|
|
|
+ width: 240px;
|
|
|
+ .hc-menu-header-box {
|
|
|
+ position: relative;
|
|
|
+ padding: 15px 18px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ border-bottom: 1px solid #E9E9E9;
|
|
|
+ .name {
|
|
|
+ flex: auto;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .hc-menu-contents-box {
|
|
|
+ position: relative;
|
|
|
+ //padding: 15px 18px;
|
|
|
+ height: calc(100% - 60px);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .hc-page-content-box {
|
|
|
+ flex: 1;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
