参数设置页面修改

src/views/system/components/tab-approve.vue

@@ -0,0 +1,223 @@
+<template>
+    <HcCard>
+        <div class="hc-page-layout-box system-parameter">
+            <HcCardItem ui="hac-card-item w-60 mr-5">
+                <template #header>
+                    <span class="mr-2">审批类型:</span>
+                 
+                </template>
+                <div> <span class="mt-2">预算一级科目:</span></div>
+                <div class="hc-layout-left-box menu mt-3">
+                    <div class="hc-menu-contents-box">
+                        <el-scrollbar>
+                            <HcMenuSimple :datas="menuOptions" :keys="menuKey" :props="menusProps"
+                                          @change="menuChange"/>
+                        </el-scrollbar>
+                    </div>
+
+                </div>
+            </HcCardItem>
+
+            <div class="hc-page-content-box">
+                <HcCardItem ui="hac-card-item" actionSize="lg">
+                    <template #header>
+                        <span class="mr-2">流程设置:</span>
+                    </template>
+                    <div class="approve-box">
+                        <el-checkbox-group v-model="checkList"  @change="handleCheckedApproveChange">
+                            <el-checkbox  v-for="item in checkData" :key="item" :label="item.name"  />
+                        </el-checkbox-group>
+                       <HcTable :column="tableColumn" :datas="tableData" ui="hc-test-drop-table" isRowDrop isSort @row-drop="rowDropTap" @row-sort="rowSortTap" :indexName="'顺序'" class="mt-4"/>
+                    </div>
+                
+                    <div class="approve-box mt-4">
+                        <el-checkbox-group v-model="checkList1" @change="handleCheckedApproveChange1">
+                            <el-checkbox  v-for="item in checkData" :key="item" :label="item.name"  />
+                  
+                        </el-checkbox-group>
+                       <HcTable :column="tableColumn1" :datas="tableData1" ui="hc-test-drop-table" isRowDrop isSort @row-drop="rowDropTap" @row-sort="rowSortTap" :indexName="'顺序'" class="mt-4"/>
+                    </div>
+             
+                   
+                  
+              
+         
+                </HcCardItem>
+            </div>
+        </div>
+      
+    </HcCard>
+</template>
+
+<script setup>
+import {onMounted, ref, watch} from "vue";
+
+const props = defineProps({
+    cur: {
+        type: [String,Number],
+        default: ''
+    },
+})
+
+const tabsKey = ref(props.cur)
+const checkList = ref(['部门经理'])
+const checkList1 = ref(['人事'])
+//监听
+watch(() => [
+    props.cur,
+    checkList,
+    checkList1
+], ([key,list,list1]) => {
+    tabsKey.value = key
+    handleCheckedApproveChange(list.value)
+    handleCheckedApproveChange1(list1.value)
+})
+
+onMounted(() => {
+
+})
+
+//左侧菜单
+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 tableColumn = [
+    {key: 'name', name: '审批岗位',align:'center'},
+  
+]
+const tableData = ref([
+
+])
+const tableData1 = ref([
+
+])
+const handleCheckedApproveChange=(val)=>{
+    console.log(val,'val');
+    let  tabarr=[]
+    val.forEach((ele)=>{
+        tabarr.push({name:ele})
+    })
+    tableData.value=tabarr
+} 
+const handleCheckedApproveChange1=(val)=>{
+    let  tabarr=[]
+    val.forEach((ele)=>{
+        tabarr.push({name:ele})
+    })
+    tableData1.value=tabarr
+} 
+const tableColumn1 = [
+    {key: 'name', name: '抄送信息',align:'center'},
+  
+]
+
+const checkData = ref([
+    {name: '部门经理', },
+    {name: '财务', },
+    {name: '人事',},
+    {name: '出纳',},
+    {name: '审批', },
+
+])
+
+// 行拖拽
+const rowDropTap = (rows) => {
+    tableData.value = rows
+}
+
+// 点击排序
+const rowSortTap = (rows) => {
+    tableData.value = rows
+}
+
+</script>
+
+<style scoped lang="scss">
+.hc-page-layout-box.system-parameter {
+    display: flex;
+    position: relative;
+    // height: calc(100vh - 228px);
+    .hc-layout-left-box.menu {
+        width: 100%;
+        height: 100%;
+        position: relative;
+        background: inherit;
+        margin-right: auto;
+        border-radius: 0;
+        box-shadow: none;
+        .hc-menu-contents-box {
+            position: relative;
+            padding: 0;
+            height: 100%;
+            // height: calc(100% - 60px);
+        }
+        .hc-menu-simple-box {
+            padding: 0;
+            .item-box {
+                box-shadow: none;
+                padding: 8px 10px;
+                border-radius: 4px;
+                background: var(--el-color-primary-light-8);
+                .label-box {
+                    color: #8c8c8c;
+                }
+                .menu-icon {
+                    margin-left: 20px;
+                    background: inherit;
+                    .menu-popover-icon {
+                        color: #8c8c8c;
+                        .hc-icon-i {
+                            font-size: 20px;
+                            line-height: initial;
+                        }
+                    }
+                }
+            }
+            .item-box.active {
+                background: var(--el-color-primary-light-5);
+                .label-box {
+                    color: white;
+                }
+                .menu-icon .menu-popover-icon {
+                    color: white;
+                }
+            }
+        }
+        .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-page-content-box {
+        flex: 1;
+        position: relative;
+    }
+}
+.approve-box{
+    border: 1px dashed rgb(187, 187, 187);
+    padding: 20px;
+}
+</style>

src/views/system/components/tab-cost.vue

@@ -0,0 +1,284 @@
+<template>
+    <HcCard>
+        <div class="hc-page-layout-box system-parameter">
+            <HcCardItem ui="hac-card-item w-60 mr-5">
+                <template #header>
+                    <span class="mr-2">成本预算分类:</span>
+                    <el-button _icon hc-btn size="small" type="primary" @click="openpriceEdit(1)">
+                        <HcIcon name="add"/>
+                    </el-button>
+                </template>
+                <div> <span class="mt-2">预算一级科目:</span></div>
+                <div class="hc-layout-left-box menu mt-3">
+                    <div class="hc-menu-contents-box">
+                        <el-scrollbar>
+                            <HcMenuSimple :datas="menuOptions" :keys="menuKey" :props="menusProps"
+                                          :menus="contextMenu" @menuTap="contextMenuClick"
+                                          @change="menuChange"/>
+                        </el-scrollbar>
+                    </div>
+
+                    <!--预算分类新增编辑弹窗-->
+                    <HcDialog bgColor="#ffffff" widths="22rem" isToBody :show="priceModal" :title="priceTitle" @close="priceModalClose">
+                        <el-form :model="priceform" label-position="top" label-width="auto" size="large">
+                            <el-form-item label="预算一级科目名称:">
+                                <el-input v-model="priceform.name"/>
+                            </el-form-item>
+                        </el-form>
+                    </HcDialog>
+                </div>
+            </HcCardItem>
+
+            <div class="hc-page-content-box">
+                <HcCardItem ui="hac-card-item" actionSize="lg">
+                    <template #header>
+                        <span class="mr-2">预算二级科目:</span>
+                        <el-button _icon hc-btn size="small" type="primary" @click="openEdit(1)">
+                            <HcIcon name="add"/>
+                        </el-button>
+                    </template>
+                    <HcTable :column="tableColumn" :datas="tableData"  :isIndex="false">
+                        <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 bgColor="#ffffff" widths="24rem" isToBody :show="editTaskModal" :title="taskTitle" @close="testModalClose">
+                        <el-form label-position="top" label-width="auto" :model="formLabelAlign" size="large">
+                            <el-form-item label="预算二级科目名称:">
+                                <el-input v-model="formLabelAlign.name"/>
+                            </el-form-item>
+                        </el-form>
+                    </HcDialog>
+
+                </HcCardItem>
+            </div>
+        </div>
+        <template #action>
+            <HcPages :pages="searchForm" @change="pageChange"/>
+        </template>
+    </HcCard>
+</template>
+
+<script setup>
+import {onMounted, ref, watch} from "vue";
+
+const props = defineProps({
+    cur: {
+        type: [String,Number],
+        default: ''
+    },
+})
+
+const tabsKey = ref(props.cur)
+
+//监听
+watch(() => [
+    props.cur,
+], ([key]) => {
+    tabsKey.value = key
+    console.log(key)
+})
+
+onMounted(() => {
+    setContextMenu()
+})
+
+//左侧菜单
+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 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 priceTitle = ref('')
+const priceModal = ref(false)
+const openpriceEdit = (type) => {
+    if (type === 1) {
+        priceTitle.value = '新增分类'
+    } else {
+        priceTitle.value = '编辑分类'
+    }
+
+    priceModal.value = true
+}
+
+const priceform = ref({})
+const priceModalClose = () => {
+    priceModal.value = false
+}
+
+const taskTitle = ref('')
+const openEdit = (type) => {
+    if (type === 1) {
+        taskTitle.value = '新增'
+    } else {
+        taskTitle.value = '编辑'
+    }
+
+    editTaskModal.value = true
+}
+
+
+const editTaskModal = ref(false)
+const testModalClose = () => {
+    editTaskModal.value = false
+}
+
+const delTask = () => {
+    window?.$messageBox?.alert('您确定要删除该预算科目吗? 一旦注销数据将彻底清除，请谨慎操作？', '删除提醒', {
+        showCancelButton: true,
+        confirmButtonText: '确认注销',
+        cancelButtonText: '取消',
+        type: 'warning',
+        callback: (action) => {
+            if (action === 'confirm') {
+                console.log(11111);
+            }
+        }
+    })
+}
+
+const tableColumn = [
+    {key: 'name', name: '预算二级科目',align:'center'},
+    // {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 formLabelAlign = ref({
+    name: '',
+    region: '',
+    type: '',
+})
+
+const searchForm = ref({
+    postType: '', name: '',
+    current: 1, size: 20, total: 0
+})
+//分页被点击
+const pageChange = ({current, size}) => {
+    searchForm.value.current = current
+    searchForm.value.size = size
+}
+</script>
+
+<style lang="scss">
+.hc-page-layout-box.system-parameter {
+    display: flex;
+    position: relative;
+    // height: calc(100vh - 228px);
+    .hc-layout-left-box.menu {
+        width: 100%;
+        height: 100%;
+        position: relative;
+        background: inherit;
+        margin-right: auto;
+        border-radius: 0;
+        box-shadow: none;
+        .hc-menu-contents-box {
+            position: relative;
+            padding: 0;
+            height: 100%;
+            // height: calc(100% - 60px);
+        }
+        .hc-menu-simple-box {
+            padding: 0;
+            .item-box {
+                box-shadow: none;
+                padding: 8px 10px;
+                border-radius: 4px;
+                background: var(--el-color-primary-light-8);
+                .label-box {
+                    color: #8c8c8c;
+                }
+                .menu-icon {
+                    margin-left: 20px;
+                    background: inherit;
+                    .menu-popover-icon {
+                        color: #8c8c8c;
+                        .hc-icon-i {
+                            font-size: 20px;
+                            line-height: initial;
+                        }
+                    }
+                }
+            }
+            .item-box.active {
+                background: var(--el-color-primary-light-5);
+                .label-box {
+                    color: white;
+                }
+                .menu-icon .menu-popover-icon {
+                    color: white;
+                }
+            }
+        }
+        .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-page-content-box {
+        flex: 1;
+        position: relative;
+    }
+}
+</style>
+

src/views/system/components/tab-price.vue

@@ -1,13 +1,5 @@
 <template>
     <HcCard>
-        <!-- <template #extra>
-            <div style="float: right;">
-                <el-button size="large" type="primary">
-                    <HcIcon name="save"/>
-                    <span>保存</span>
-                </el-button>
-            </div>
-        </template> -->
         <template #header>
             <span class="mr-2">岗位单价:</span>
             <el-button _icon hc-btn size="small" type="primary" @click="positionEdit(1)">

src/views/system/components/tab-pricetype.vue

@@ -3,12 +3,13 @@
         <div class="hc-page-layout-box system-parameter">
             <HcCardItem ui="hac-card-item w-60 mr-5">
                 <template #header>
-                    <span class="mr-2">预算分类:</span>
+                    <span class="mr-2">财务预算分类:</span>
                     <el-button _icon hc-btn size="small" type="primary" @click="openpriceEdit(1)">
                         <HcIcon name="add"/>
                     </el-button>
                 </template>
-                <div class="hc-layout-left-box menu">
+                <div> <span class="mt-2">预算一级科目:</span></div>
+                <div class="hc-layout-left-box menu mt-3">
                     <div class="hc-menu-contents-box">
                         <el-scrollbar>
                             <HcMenuSimple :datas="menuOptions" :keys="menuKey" :props="menusProps"
@@ -20,7 +21,7 @@
                     <!--预算分类新增编辑弹窗-->
                     <HcDialog bgColor="#ffffff" widths="22rem" isToBody :show="priceModal" :title="priceTitle" @close="priceModalClose">
                         <el-form :model="priceform" label-position="top" label-width="auto" size="large">
-                            <el-form-item label="预算分类名称:">
+                            <el-form-item label="预算一级科目名称:">
                                 <el-input v-model="priceform.name"/>
                             </el-form-item>
                         </el-form>
@@ -31,12 +32,12 @@
             <div class="hc-page-content-box">
                 <HcCardItem ui="hac-card-item" actionSize="lg">
                     <template #header>
-                        <span class="mr-2">任务明细:</span>
+                        <span class="mr-2">预算二级科目:</span>
                         <el-button _icon hc-btn size="small" type="primary" @click="openEdit(1)">
                             <HcIcon name="add"/>
                         </el-button>
                     </template>
-                    <HcTable :column="tableColumn" :datas="tableData">
+                    <HcTable :column="tableColumn" :datas="tableData"  :isIndex="false">
                         <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>
@@ -46,15 +47,9 @@
                     <!--任务明细弹窗-->
                     <HcDialog bgColor="#ffffff" widths="24rem" isToBody :show="editTaskModal" :title="taskTitle" @close="testModalClose">
                         <el-form label-position="top" label-width="auto" :model="formLabelAlign" size="large">
-                            <el-form-item label="任务明细名称:">
+                            <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>
 
@@ -160,9 +155,9 @@ const priceModalClose = () => {
 const taskTitle = ref('')
 const openEdit = (type) => {
     if (type === 1) {
-        taskTitle.value = '新增任务明细'
+        taskTitle.value = '新增'
     } else {
-        taskTitle.value = '编辑任务明细'
+        taskTitle.value = '编辑'
     }
 
     editTaskModal.value = true
@@ -175,7 +170,7 @@ const testModalClose = () => {
 }
 
 const delTask = () => {
-    window?.$messageBox?.alert('您确定要删除该任务明细吗? 一旦注销数据将彻底清除，请谨慎操作？', '删除提醒', {
+    window?.$messageBox?.alert('您确定要删除该预算科目吗? 一旦注销数据将彻底清除，请谨慎操作？', '删除提醒', {
         showCancelButton: true,
         confirmButtonText: '确认注销',
         cancelButtonText: '取消',
@@ -189,9 +184,9 @@ const delTask = () => {
 }
 
 const tableColumn = [
-    {key: 'name', name: '任务明细'},
-    {key: 'text', name: '任务内容'},
-    {key: 'color', name: '完成指标'},
+    {key: 'name', name: '预算二级科目',align:'center'},
+    // {key: 'text', name: '任务内容'},
+    // {key: 'color', name: '完成指标'},
     {key: 'action', name: '操作', width: 200}
 ]
 const tableData = ref([

src/views/system/components/tab-reimbursement.vue

@@ -0,0 +1,107 @@
+<template>
+    <HcCard>
+        <template #header>
+            <span class="mr-2">报销类型:</span>
+            <el-button _icon hc-btn size="small" type="primary" @click="positionEdit(1)">
+                <HcIcon name="add"/>
+            </el-button>
+        </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>
+        <template #action>
+            <HcPages :pages="searchForm" @change="pageChange"></HcPages>
+        </template>
+        <HcDialog bgColor="#ffffff" isToBody widths="24rem" :show="positonModal" :title="positonModalTitle" @close="positonModalClose">
+            <el-form label-position="top" label-width="auto" :model="formposition" size="large">
+                <el-form-item label="报销类型名称:">
+                    <el-input v-model="formposition.name"/>
+                </el-form-item>
+        
+            </el-form>
+        </HcDialog>
+    </HcCard>
+</template>
+
+<script setup>
+import {ref, watch} from "vue";
+
+const props = defineProps({
+    cur: {
+        type: [String,Number],
+        default: ''
+    },
+})
+
+const tabsKey = ref(props.cur)
+
+//监听
+watch(() => [
+    props.cur,
+], ([key]) => {
+    tabsKey.value = key
+    console.log(key)
+})
+
+
+const searchForm = ref({
+    postType: '', name: '',
+    current: 1, size: 20, total: 0
+})
+//分页被点击
+const pageChange = ({current, size}) => {
+    searchForm.value.current = current
+    searchForm.value.size = size
+}
+
+const positiontableColumn = [
+    {key: 'name', 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 positonModal = ref(false)
+const positonModalTitle = ref('')
+
+const positionEdit = (type) => {
+    if (type === 1) {
+        positonModalTitle.value = '新增报销类型'
+    } else {
+        positonModalTitle.value = '编辑报销类型'
+    }
+    positonModal.value = true
+}
+
+const positonModalClose = () => {
+    positonModal.value = false
+}
+
+const formposition = ref({})
+
+const delTaskposition = () => {
+    window?.$messageBox?.alert('您确定要删除该岗位单价吗? 一旦注销数据将彻底清除，请谨慎操作？', '删除提醒', {
+        showCancelButton: true,
+        confirmButtonText: '确认注销',
+        cancelButtonText: '取消',
+        type: 'warning',
+        callback: (action) => {
+            if (action === 'confirm') {
+                console.log(11111);
+            }
+        }
+    })
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>

src/views/system/components/tab-tasktype.vue

@@ -30,7 +30,7 @@
                 <el-form-item label="任务类型名称">
                     <el-input v-model="formtaskType.name"/>
                 </el-form-item>
-                <el-form-item label="完成指标">
+                <el-form-item label="类型">
                     <el-select v-model="formtaskType.type" class="block" placeholder="请选择">
                         <el-option v-for="item in typeoptions" :key="item.value" :label="item.label" :value="item.value"/>
                     </el-select>

src/views/system/parameter.vue

@@ -12,6 +12,15 @@
         <template #tab-price>
             <TabPrice :cur="tabsKey"/>
         </template>
+        <template #tab-reimbursement>
+            <TabReimbursement :cur="tabsKey"/>
+        </template>
+        <template #tab-cost>
+            <TabCost :cur="tabsKey"/>
+        </template>
+        <template #tab-approve>
+            <TabApprove :cur="tabsKey"/>
+        </template>
     </HcTabsSimple>
 </template>
 
@@ -20,14 +29,20 @@ import {ref, watch, onMounted} from "vue";
 import TabPriceType from "./components/tab-pricetype.vue";
 import TabTaskType from "./components/tab-tasktype.vue";
 import TabPrice from "./components/tab-price.vue";
+import TabReimbursement from "./components/tab-reimbursement.vue";
+import TabCost from "./components/tab-cost.vue";
+import TabApprove from "./components/tab-approve.vue";
 
 //类型处理
 const tabsKey = ref('pricetype')
 const tabsData = ref([
-    {icon: 'bar-chart-box', label: '预算分类', key: 'pricetype'},
-    {icon: 'tools', label: '任务类型', key: 'tasktype'},
-    {icon: 'sun-cloudy', label: '指标依据', key: 'indicator'},
-    {icon: 'sun-cloudy', label: '岗位单价', key: 'price'},
+    {icon: 'bar-chart-box', label: '财务费用字典', key: 'pricetype'},
+    {icon: 'tools', label: '任务类型字典', key: 'tasktype'},
+    {icon: 'sun-cloudy', label: '岗位类型字典', key: 'price'},
+    {icon: 'sun-cloudy', label: '报销类型字典', key: 'reimbursement'},
+    {icon: 'sun-cloudy', label: '成本测算类型', key: 'cost'},
+    {icon: 'sun-cloudy', label: '审批流程', key: 'approve'},
+   
 ])
 
 const tabsClick = (key) => {