参数配置修改

src/views/system/parameter.vue

@@ -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>