|
|
@@ -0,0 +1,283 @@
|
|
|
+<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>
|
