更新

src/layout/modules/MenuBar.vue

@@ -1,6 +1,6 @@
 <template>
     <el-menu :collapse="isCollapse" :default-active="curKey" class="hc-aside-menu" unique-opened>
-        <MenuItem :collapse="isCollapse" :cur="curKey" :datas="datas" @change="MenuClick"/>
+        <MenuItem :collapse="isCollapse" :datas="datas" @change="MenuClick"/>
     </el-menu>
 </template>
 

src/layout/modules/MenuItem.vue

@@ -1,6 +1,6 @@
 <template>
     <template v-for="item in datas">
-        <el-sub-menu :index="item?.code" :popper-offset="0" :popper-class="'aside-menu-popper ' + curKey" v-if="item?.children && item?.children.length > 0">
+        <el-sub-menu :index="item?.code" :popper-offset="0" popper-class="aside-menu-popper" v-if="item?.children && item?.children.length > 0">
             <template #title>
                 <div class="hc-aside-menu-item">
                     <div class="menu---item">
@@ -11,7 +11,7 @@
                 </div>
                 <HcIcon name="arrow-down-s" ui="el-icon el-sub-menu__icon-arrow"/>
             </template>
-            <MenuItem :datas="item?.children" :cur="curKey" @change="MenuClick"/>
+            <MenuItem :datas="item?.children" @change="MenuClick"/>
         </el-sub-menu>
         <el-menu-item :index="item?.code" v-else @click="MenuClick(item)">
             <div class="hc-aside-menu-item">

src/router/menus.js

@@ -38,13 +38,13 @@ export default [
             },
             {
                 source: 'home-3',
-                name: '项目报销',
-                code: 'project-reimburse',
+                name: '成本测算',
+                code: 'project-cost',
             },
             {
                 source: 'home-3',
-                name: '项目预算',
-                code: 'project-budget',
+                name: '合同回款更新',
+                code: 'project-contract',
             },
         ]
     },

src/router/modules/base.js

@@ -19,30 +19,34 @@ export default [
         meta: {title: '门户'},
         component: Layout,
         children: [
+            //首页统计
             {
                 path: '/home/index',
                 name: 'home-index',
                 meta: {title: '普通权限'},
-                component: () => import('~src/views/home/index.vue')
+                component: () => import('~src/views/home/index/index.vue')
             },
             {
                 path: '/home/admin',
                 name: 'home-admin',
                 meta: {title: '领导权限'},
-                component: () => import('~src/views/home/admin.vue')
+                component: () => import('~src/views/home/index/admin.vue')
             },
+            //审批管理
             {
                 path: '/home/task',
                 name: 'home-task',
                 meta: {title: '审批管理'},
-                component: () => import('~src/views/home/task.vue')
+                component: () => import('~src/views/home/task/task.vue')
             },
             {
                 path: '/home/task-details',
                 name: 'home-task-details',
-                meta: {title: '任务详情', noMenuBar: true},
-                component: () => import('~src/views/home/task-details.vue')
+                meta: {title: '任务详情'}, //, noMenuBar: true
+                component: () => import('~src/views/home/task/task-details.vue')
             },
+
+            //待定
             {
                 path: '/home/budget',
                 name: 'home-budget',
@@ -70,35 +74,56 @@ export default [
         meta: {title: '项目管理'},
         component: Layout,
         children: [
+            //项目列表
             {
                 path: '/project/index',
                 name: 'project-index',
                 meta: {title: '项目列表'},
-                component: () => import('~src/views/project/index.vue')
+                component: () => import('~src/views/project/list/index.vue')
             },
             {
                 path: '/project/list-info',
                 name: 'project-list-info',
                 meta: {title: '项目信息'},
-                component: () => import('~src/views/project/list-info.vue')
+                component: () => import('~src/views/project/list/list-info.vue')
+            },
+            //成本测算
+            {
+                path: '/project/cost',
+                name: 'project-cost',
+                meta: {title: '成本测算'},
+                component: () => import('~src/views/project/cost/index.vue')
+            },
+            {
+                path: '/project/cost/form',
+                name: 'project-cost-form',
+                meta: {title: '成本测算', text: '新增编辑'},
+                component: () => import('~src/views/project/cost/form.vue')
+            },
+            {
+                path: '/project/cost-data',
+                name: 'project-cost-data',
+                meta: {title: '成本测算预览'},
+                component: () => import('~src/views/project/cost/data.vue')
             },
+            //项目合同
             {
-                path: '/project/reimburse',
-                name: 'project-reimburse',
-                meta: {title: '项目报销'},
-                component: () => import('~src/views/project/reimburse.vue')
+                path: '/project/contract',
+                name: 'project-contract',
+                meta: {title: '项目合同'},
+                component: () => import('~src/views/project/contract/index.vue')
             },
             {
-                path: '/project/budget',
-                name: 'project-budget',
-                meta: {title: '项目预算'},
-                component: () => import('~src/views/project/budget.vue')
+                path: '/project/contract/form',
+                name: 'project-contract-form',
+                meta: {title: '项目合同信息'},
+                component: () => import('~src/views/project/contract/form.vue')
             },
             {
-                path: '/project/budget-form',
-                name: 'project-budget-form',
-                meta: {title: '项目预算信息'},
-                component: () => import('~src/views/project/budget-form.vue')
+                path: '/project/contract/update',
+                name: 'project-contract-update',
+                meta: {title: '合同回款更新'},
+                component: () => import('~src/views/project/contract/update.vue')
             },
         ],
     },

src/router/modules/token.js

@@ -10,9 +10,12 @@ export default [
     'home-budget-chart',
     'project-index',
     'project-list-info',
-    'project-reimburse',
-    'project-budget',
-    'project-budget-form',
+    'project-cost',
+    'project-cost-form',
+    'project-cost-data',
+    'project-contract',
+    'project-contract-form',
+    'project-contract-update',
     'program-index',
     'program-index-info',
     'program-task',

src/styles/index.scss

@@ -216,3 +216,17 @@ html, body, #app {
         margin-left: 20px;
     }
 }
+
+//卡片左上角的文本返回样式
+.hc-card-header-back {
+    position: relative;
+    margin-right: 24px;
+    cursor: pointer;
+    transition: color 0.2s;
+    span {
+        margin-left: 5px;
+    }
+    &:hover {
+        color: var(--el-color-primary-dark-2);
+    }
+}

src/views/home/task-details.vue → src/views/home/task/task-details.vue

@@ -129,7 +129,7 @@
 </template>
 
 <script setup>
-import {onMounted, ref} from "vue";
+import {onActivated, ref} from "vue";
 import {useRouter, useRoute} from 'vue-router'
 
 //初始变量
@@ -141,7 +141,7 @@ const dataId = ref(useRoutes?.query?.id ?? '')
 const authType = ref(false)
 
 //缓存页面被激活时
-onMounted(() => {
+onActivated(() => {
     tabsKey.value = useRoutes?.query?.tabKey ?? ''
     dataType.value = useRoutes?.query?.type ?? ''
     dataId.value = useRoutes?.query?.id ?? ''

src/views/home/task.vue → src/views/home/task/task.vue

@@ -17,7 +17,7 @@
 
 <script setup>
 import {ref, watch} from "vue";
-import TaskTable from "./components/TaskTable.vue";
+import TaskTable from "../components/TaskTable.vue";
 
 //选项卡
 const tabsKey = ref('to-do')

src/views/project/contract/update.vue

@@ -0,0 +1,237 @@
+<template>
+    <HcCard>
+        <template #header>
+            <el-form ref="formRef" inline :model="formModel" :rules="formRules">
+                <el-form-item label="关联项目" prop="key1">
+                    <el-select v-model="formModel.key1" block clearable placeholder="项目名称">
+                        <el-option v-for="item in projectName" :label="item.name" :value="item.key"/>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="预算制订人" prop="key2">
+                    <el-input v-model="formModel.key2" placeholder="预算制订人" />
+                </el-form-item>
+                <el-form-item label="预算总额" prop="key3">
+                    <el-input v-model="formModel.key3" placeholder="预算总额" disabled>
+                        <template #append>元</template>
+                    </el-input>
+                </el-form-item>
+            </el-form>
+        </template>
+        <template #extra>
+            <el-button type="primary" hc-btn @click="addTableData">
+                <HcIcon name="add"/>
+                <span>新增预算</span>
+            </el-button>
+        </template>
+        <HcTable :isIndex="false" :column="tableColumn" :datas="tableData">
+            <template #key1="{row,index}">
+                <el-select v-model="row.key1" placeholder="项目进程" v-if="row.isEditMode">
+                    <el-option v-for="item in projectProcess" :label="item.name" :value="item.key"/>
+                </el-select>
+                <div v-else>{{row.key1}}</div>
+            </template>
+            <template #key2="{row,index}">
+                <el-select v-model="row.key2" placeholder="预算类型" v-if="row.isEditMode">
+                    <el-option v-for="item in budgetType" :label="item.name" :value="item.key"/>
+                </el-select>
+                <div v-else>{{row.key2}}</div>
+            </template>
+            <template #key3="{row,index}">
+                <el-select v-model="row.key3" placeholder="任务明细" v-if="row.isEditMode">
+                    <el-option v-for="item in taskDetail" :label="item.name" :value="item.key"/>
+                </el-select>
+                <div v-else>{{row.key3}}</div>
+            </template>
+            <template #key4="{row,index}">
+                <el-input v-model="row.key4" v-if="row.isEditMode"/>
+                <div v-else>{{row.key4}}</div>
+            </template>
+            <template #key5="{row,index}">
+                <el-input v-model="row.key5" v-if="row.isEditMode"/>
+                <div v-else>{{row.key5}}</div>
+            </template>
+            <template #key6="{row,index}">
+                <el-select v-model="row.key6" v-if="row.isEditMode">
+                    <el-option label="维护" value="1"/>
+                    <el-option label="业务" value="2"/>
+                </el-select>
+                <div v-else>{{row.key6}}</div>
+            </template>
+            <template #key7="{row,index}">
+                <el-input v-model="row.key7" v-if="row.isEditMode" disabled/>
+                <div v-else>{{row.key7}}</div>
+            </template>
+            <template #key8="{row,index}">
+                <el-input v-model="row.key8" v-if="row.isEditMode"/>
+                <div v-else>{{row.key8}}</div>
+            </template>
+            <template #key9="{row,index}">
+                <el-input v-model="row.key9" v-if="row.isEditMode"/>
+                <div v-else>{{row.key9}}</div>
+            </template>
+            <template #key10="{row,index}">
+                <el-input v-model="row.key10" v-if="row.isEditMode"/>
+                <div v-else>{{row.key10}}</div>
+            </template>
+            <template #key11="{row,index}">
+                <el-input v-model="row.key11" v-if="row.isEditMode" disabled/>
+                <div v-else>{{row.key11}}</div>
+            </template>
+            <template #key12="{row,index}">
+                <el-input v-model="row.key12" v-if="row.isEditMode"/>
+                <div v-else>{{row.key12}}</div>
+            </template>
+            <template #key13="{row,index}">
+                <el-input v-model="row.key13" v-if="row.isEditMode" disabled/>
+                <div v-else>{{row.key13}}</div>
+            </template>
+            <template #key14="{row,index}">
+                <el-input v-model="row.key14" v-if="row.isEditMode"/>
+                <div v-else>{{row.key14}}</div>
+            </template>
+            <template #action="{row,index}">
+                <el-button size="small" type="primary" @click="row.isEditMode = false" v-if="row.isEditMode">
+                    <HcIcon name="check"/>
+                    <span>完成</span>
+                </el-button>
+                <el-button size="small" type="primary" @click="row.isEditMode = true" v-else>
+                    <HcIcon name="edit"/>
+                    <span>编辑</span>
+                </el-button>
+                <el-button size="small" type="danger" @click="delTableData(row,index)">
+                    <HcIcon name="delete-bin"/>
+                    <span>删除</span>
+                </el-button>
+            </template>
+        </HcTable>
+    </HcCard>
+</template>
+
+<script setup>
+import {onActivated, ref} from "vue";
+import {useRouter, useRoute} from 'vue-router'
+import {delMessage} from "~uti/tools";
+
+//初始变量
+const router = useRouter()
+const useRoutes = useRoute()
+const dataId = ref(useRoutes?.query?.id ?? '')
+
+//缓存页面被激活时
+onActivated(() => {
+    dataId.value = useRoutes?.query?.id ?? ''
+    console.log(useRoutes.query)
+})
+
+//项目名称
+const projectName = ref([
+    {name: '陈油路', key: '陈油路'},
+    {name: '奉建路', key: '奉建路'}
+])
+
+//项目进程
+const projectProcess = ref([
+    {name: '商机-演示沟通', key: '1'},
+    {name: '商机-成本核算及报价', key: '2'},
+    {name: '合同-服务范围洽谈', key: '3'},
+    {name: '产品-研发', key: '4'},
+    {name: '产品-配置', key: '5'},
+    {name: '产品-测试', key: '6'},
+    {name: '产品-交付', key: '7'},
+    {name: '实施-系统培训', key: '8'},
+    {name: '实施-现场服务', key: '9'},
+    {name: '实施-合同回款', key: '10'},
+    {name: '项目验收', key: '11'},
+])
+
+//预算类型
+const budgetType = ref([
+    {name: '合同签订阶段', key: '1'},
+    {name: '项目注册阶段', key: '2'},
+    {name: '项目准备阶段', key: '3'},
+    {name: '项目研发阶段', key: '4'},
+    {name: '项目配置阶段', key: '5'},
+    {name: '项目测试阶段', key: '6'},
+    {name: '项目培训阶段', key: '7'},
+    {name: '项目编辑阶段', key: '8'},
+    {name: '资料编辑阶段', key: '9'},
+    {name: '过程服务阶段', key: '10'},
+    {name: '交工阶段', key: '11'},
+    {name: '资料收集阶段', key: '12'},
+    {name: '竣工编辑阶段', key: '13'},
+    {name: '档案验收阶段', key: '14'},
+    {name: '档案移交阶段', key: '15'},
+    {name: '耗材', key: '16'},
+])
+
+//任务明细
+const taskDetail = ref([
+    {name: '审核图纸', key: '1'},
+    {name: '风险评估', key: '2'},
+    {name: '合同报价', key: '3'},
+    {name: '合同洽谈及签订', key: '4'},
+    {name: '项目注册', key: '5'},
+    {name: '数据配置', key: '6'},
+    {name: '项目WBS划分', key: '7'},
+])
+
+//顶部表单数据
+const formRef = ref(null)
+const formModel = ref({key1: '', key2: '', key3: ''})
+const formRules = {
+    key1: {
+        required: true,
+        trigger: 'blur',
+        message: "请选择关联项目"
+    },
+    key2: {
+        required: true,
+        trigger: 'blur',
+        message: "请输入预算制订人"
+    }
+}
+
+//工资预算表格
+const tableColumn = [
+    {key: 'key1', name: '项目环节', width: '200'},
+    {key: 'key2', name: '预算类型', width: '200'},
+    {key: 'key3', name: '任务明细', width: '200'},
+    {key: 'key4', name: '预计工作日(小数/整数/天)', width: '160'},
+    {key: 'key5', name: '投入人员数量', width: '140'},
+    {key: 'key6', name: '人日单价', width: '140'},
+    {key: 'key7', name: '预计人工成本', width: '160'},
+    {key: 'key8', name: '预计差旅费(元)', width: '160'},
+    {key: 'key9', name: '外包单价', width: '140'},
+    {key: 'key10', name: '外包数量', width: '140'},
+    {key: 'key11', name: '外包金额', width: '140'},
+    {key: 'key12', name: '其他', width: '140'},
+    {key: 'key13', name: '预算金额', width: '120'},
+    {key: 'key14', name: '测算备注', width: '200'},
+    {key: 'action', name: '操作', width: '160', align: 'center', fixed: 'right'},
+]
+const tableData = ref([
+    {id: 1, key1: '', key2: '', key3: '', key4: '33', key5: '44', key6: '', key7: '22', isEditMode: false},
+])
+
+//新增工资预算表格
+const addTableData = () => {
+    tableData.value.unshift({isEditMode: true})
+}
+
+//删除工资预算表格
+const delTableData = (row,index) => {
+    delMessage(() => {
+        if (!row.id)  {
+            tableData.value.splice(index, 1)
+        }
+    })
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>
+
+<style lang="scss">
+
+</style>

src/views/project/cost/data.vue

@@ -0,0 +1,121 @@
+<template>
+    <HcCard>
+        <template #header>
+            <div class="hc-card-header-back" @click="goBackClick">
+                <HcIcon name="arrow-go-back"/>
+                <span>返回</span>
+            </div>
+            <span class="mr-2">这里是显示项目名称：总成本为</span>
+            <span class="text-red text-xl">812983</span>
+            <span class="ml-2">元</span>
+        </template>
+        <template #extra>
+            <div class="w-44">
+                <el-select block clearable placeholder="费用支出所属分类" size="large">
+                    <el-option v-for="item in projectType" :label="item.name" :value="item.key"/>
+                </el-select>
+            </div>
+            <div class="w-40 ml-2">
+                <el-select block clearable placeholder="请选择参建方" size="large">
+                    <el-option v-for="item in projectType" :label="item.name" :value="item.key"/>
+                </el-select>
+            </div>
+        </template>
+        <div class="hc-table-ref-box no-border hc-project-cost-data">
+            <el-table :data="tableData" border
+                      :header-cell-style="tableHeaderCellStyle"
+                      :cell-style="tableCellStyle"
+                      style="width: 100%; height: 100%"
+            >
+                <el-table-column prop="key1" label="费用分类" align="center"/>
+                <el-table-column prop="key2" label="项目环节" align="center"/>
+                <el-table-column prop="key3" label="预算类型" align="center"/>
+                <el-table-column prop="key4" label="任务明细" align="center"/>
+                <el-table-column prop="key5" label="预计工作量(小数/整数)" align="center"/>
+                <el-table-column prop="key6" label="投入岗位类型(日单价)" align="center">
+                    <template #default="{ row }">
+                        <div style="background: #00CCFF">{{ row.key6 }}</div>
+                    </template>
+                </el-table-column>
+                <el-table-column prop="key7" label="投入人员数量" align="center"/>
+                <el-table-column prop="key8" label="预计人工成本(元)" align="center">
+                    <template #default="{ row }">
+                        <div style="background: #fe6e22">{{ row.key8 }}</div>
+                    </template>
+                </el-table-column>
+                <el-table-column prop="key9" label="预计差旅费(元)" align="center"/>
+                <el-table-column prop="key10" label="外包单价" align="center"/>
+                <el-table-column prop="key11" label="外包数量" align="center"/>
+                <el-table-column prop="key12" label="外包金额" align="center"/>
+                <el-table-column prop="key13" label="其他预算金额" align="center"/>
+                <el-table-column prop="key14" label="总预算金额" align="center">
+                    <template #default="{ row }">
+                        <div style="background: #fe6e22">{{ row.key14 }}</div>
+                    </template>
+                </el-table-column>
+                <el-table-column prop="key15" label="测算备注" align="center"/>
+            </el-table>
+        </div>
+    </HcCard>
+</template>
+
+<script setup>
+import {onActivated, ref} from "vue";
+import {useRouter, useRoute} from 'vue-router'
+//初始变量
+const router = useRouter()
+const useRoutes = useRoute()
+const dataId = ref(useRoutes?.query?.id ?? '')
+
+//缓存页面被激活时
+onActivated(() => {
+    dataId.value = useRoutes?.query?.id ?? ''
+    console.log(useRoutes.query)
+})
+
+const projectType = ref([
+    {key: '1', name: '选项1'},
+    {key: '2', name: '选项2'},
+])
+
+//表格数据
+const tableData = ref([
+    {id: '1', key1: '选项1', key2: 'xxxx'},
+    {id: '2', key1: '选项2', key2: 'xxxx'},
+    {id: '3', key1: '选项3', key2: 'xxxx'},
+])
+
+//自定义表头样式
+const tableHeaderCellStyle = ({column}) => {
+    if (column.property === 'key6' || column.property === 'key14') {
+        return {backgroundColor: 'rgba(233, 157, 66, 0.23)', color: '#101010'}
+    } else if (column.property === 'key8') {
+        return {backgroundColor: 'rgba(147, 210, 243, 0.23)', color: '#101010'}
+    } else {
+        return {backgroundColor: 'rgba(73, 128, 248, 0.23)', color: '#101010'}
+    }
+}
+
+//自定义列的样式
+const tableCellStyle = ({column}) => {
+    if (column.property === 'key6' || column.property === 'key14') {
+        return {backgroundColor: 'rgba(233, 157, 66, 0.23)'}
+    } else if (column.property === 'key8') {
+        return {backgroundColor: 'rgba(147, 210, 243, 0.23)'}
+    } else {
+        return {}
+    }
+}
+
+
+//取消并返回
+const goBackClick = () => {
+    router.back()
+}
+</script>
+
+<style lang="scss">
+.hc-project-cost-data .el-table {
+    --el-table-border-color: #b7b7b7;
+}
+</style>

src/views/project/cost/form.vue

@@ -0,0 +1,229 @@
+<template>
+    <HcTabsSimple :cur="tabsKey" :datas="tabsData" @tabClick="tabsClick">
+        <template #tab-base>
+            <HcCard scrollbar actionUi="text-center">
+                <div class="hc-card-form-center">
+                    <el-form ref="formBaseRef" :model="formBaseModel" :rules="formBaseRules" label-width="auto" size="large">
+                        <el-form-item label="项目名称：" prop="key">
+                            <el-select v-model="formBaseModel.key" block placeholder="项目名称">
+                                <el-option v-for="item in projectName" :label="item.name" :value="item.key"/>
+                            </el-select>
+                        </el-form-item>
+                        <el-form-item label="成本测算总金额：">
+                            <el-input v-model="formBaseModel.key1" disabled/>
+                        </el-form-item>
+                        <el-form-item label="研发部成本总金额：">
+                            <el-input v-model="formBaseModel.key1" disabled/>
+                        </el-form-item>
+                        <el-form-item label="业务部成本总金额：">
+                            <el-input v-model="formBaseModel.key1" disabled/>
+                        </el-form-item>
+                        <el-form-item label="市场部成本总金额：">
+                            <el-input v-model="formBaseModel.key1" disabled/>
+                        </el-form-item>
+                        <el-form-item label="维护部成本总金额：">
+                            <el-input v-model="formBaseModel.key1" disabled/>
+                        </el-form-item>
+                        <el-form-item label="外包劳务成本总金额：">
+                            <el-input v-model="formBaseModel.key1" disabled/>
+                        </el-form-item>
+                        <el-form-item label="管理费成本总金额：">
+                            <el-input v-model="formBaseModel.key1" disabled/>
+                        </el-form-item>
+                    </el-form>
+                </div>
+                <template #action>
+                    <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>
+            </HcCard>
+        </template>
+        <template #tab-table>
+            <HcCard actionUi="text-center" :title="formBaseModel.key">
+                <template #extra>
+                    <HcNewSwitch :datas="tabTab" :keys="tabKey" @change="tabChange" :round="false"/>
+                </template>
+                <HcTable :isIndex="false" :column="tableColumn" :datas="tableData">
+                    <template #key1="{row,index}">
+                        <el-select v-model="row.key1">
+                            <el-option label="选项1" value="选项1"/>
+                            <el-option label="选项2" value="选项2"/>
+                        </el-select>
+                    </template>
+                    <template #key2="{row,index}">
+                        <el-select v-model="row.key2">
+                            <el-option label="选项1" value="选项1"/>
+                            <el-option label="选项2" value="选项2"/>
+                        </el-select>
+                    </template>
+                    <template #key3="{row,index}">
+                        <el-select v-model="row.key3">
+                            <el-option label="选项1" value="选项1"/>
+                            <el-option label="选项2" value="选项2"/>
+                        </el-select>
+                    </template>
+                    <template #key4="{row,index}">
+                        <el-select v-model="row.key4">
+                            <el-option label="选项1" value="选项1"/>
+                            <el-option label="选项2" value="选项2"/>
+                        </el-select>
+                    </template>
+                    <template #key5="{row,index}">
+                        <el-input v-model="row.key5"/>
+                    </template>
+                    <template #key6="{row,index}">
+                        <el-select v-model="row.key6">
+                            <el-option label="选项1" value="选项1"/>
+                            <el-option label="选项2" value="选项2"/>
+                        </el-select>
+                    </template>
+                    <template #key7="{row,index}">
+                        <el-input v-model="row.key7"/>
+                    </template>
+                    <template #key8="{row,index}">
+                        <el-input v-model="row.key8" disabled/>
+                    </template>
+                    <template #key9="{row,index}">
+                        <el-input v-model="row.key9"/>
+                    </template>
+                    <template #key10="{row,index}">
+                        <el-input v-model="row.key10"/>
+                    </template>
+                    <template #key11="{row,index}">
+                        <el-input v-model="row.key11" disabled/>
+                    </template>
+                    <template #key12="{row,index}">
+                        <el-input v-model="row.key12"/>
+                    </template>
+                    <template #key13="{row,index}">
+                        <el-input v-model="row.key13"/>
+                    </template>
+                    <template #key14="{row,index}">
+                        <el-input v-model="row.key14" disabled/>
+                    </template>
+                    <template #key15="{row,index}">
+                        <el-input v-model="row.key15"/>
+                    </template>
+                    <template #action="{row,index}">
+                        <el-button size="small" type="primary">
+                            <HcIcon name="add"/>
+                            <span>新增</span>
+                        </el-button>
+                        <el-button size="small" type="danger">
+                            <HcIcon name="delete-bin"/>
+                            <span>删除</span>
+                        </el-button>
+                    </template>
+                </HcTable>
+                <template #action>
+                    <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>
+            </HcCard>
+        </template>
+    </HcTabsSimple>
+</template>
+
+<script setup>
+import {onActivated, ref} from "vue";
+import {useRouter, useRoute} from 'vue-router'
+//初始变量
+const router = useRouter()
+const useRoutes = useRoute()
+const dataId = ref(useRoutes?.query?.id ?? '')
+
+//缓存页面被激活时
+onActivated(() => {
+    dataId.value = useRoutes?.query?.id ?? ''
+    console.log(useRoutes.query)
+})
+
+//选项卡
+const tabsKey = ref('table')
+const tabsData = ref([
+    {icon: 'file-list-3', label: '基础信息', key: 'base'},
+    {icon: 'file-list-2', label: '成本测算', key: 'table'},
+])
+const tabsClick = (key) => {
+    tabsKey.value = key
+}
+
+//项目名称
+const projectName = ref([
+    {name: '陈油路', key: '陈油路'},
+    {name: '奉建路', key: '奉建路'}
+])
+
+//任务操作数据
+const formBaseRef = ref(null)
+const formBaseModel = ref({})
+const formBaseRules = {
+    key: {
+        required: true,
+        trigger: 'blur',
+        message: "请选择项目名称"
+    },
+}
+
+//类型tab数据和相关处理
+const tabKey = ref('construction')
+const tabTab = ref([
+    {key: 'construction', name: '施工单位成本'},
+    {key: 'supervision', name: '监理单位成本'},
+    {key: 'build', name: '建设单位成本'}
+]);
+const tabChange = ({key}) => {
+    tabKey.value = key
+}
+
+
+//成本测算表格
+const tableColumn = [
+    {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: '预计工作量(小数/整数)', width: '160',  align: 'center'},
+    {key: 'key6', name: '投入岗位类型(日单价)', width: '160', align: 'center'},
+    {key: 'key7', name: '投入人员数量', width: '160', align: 'center'},
+    {key: 'key8', name: '预计人工成本(元)', width: '160', align: 'center'},
+    {key: 'key9', name: '预计差旅费(元)', width: '160', align: 'center'},
+    {key: 'key10', name: '外包单价', width: '160', align: 'center'},
+    {key: 'key11', name: '外包数量', width: '160', align: 'center'},
+    {key: 'key12', name: '外包金额', width: '160', align: 'center'},
+    {key: 'key13', name: '其他预算金额', width: '160', align: 'center'},
+    {key: 'key14', name: '总预算金额', width: '160', align: 'center'},
+    {key: 'key15', name: '测算备注', width: '160', align: 'center'},
+    {key: 'action', name: '操作', width: '160', align: 'center', fixed: 'right'},
+]
+const tableData = ref([
+    {id: 1}, {id: 2}, {id: 3}, {id: 4},
+])
+
+
+//取消并返回
+const goBackClick = () => {
+    router.back()
+}
+</script>
+
+<style lang="scss" scoped>
+.hc-card-form-center {
+    position: relative;
+    width: 80%;
+    margin-left: 10%;
+    margin-top: 10%;
+}
+</style>

src/views/project/index.vue → src/views/project/list/index.vue

@@ -7,13 +7,13 @@
                 </el-select>
             </div>
             <div class="w-40 ml-2">
-                <el-select v-model="searchForm.contractType" block clearable placeholder="合同类型" size="large">
+                <el-select v-model="searchForm.contractType" block clearable placeholder="服务类型" size="large">
                     <el-option v-for="item in contractType" :label="item.name" :value="item.key"/>
                 </el-select>
             </div>
-            <div class="w-48 ml-2">
-                <el-select v-model="searchForm.projectProcess" block clearable placeholder="项目进程" size="large">
-                    <el-option v-for="item in projectProcess" :label="item.name" :value="item.key"/>
+            <div class="w-36 ml-2">
+                <el-select v-model="searchForm.projectUser" block clearable placeholder="实施负责人" size="large">
+                    <el-option v-for="item in projectUser" :label="item.name" :value="item.key"/>
                 </el-select>
             </div>
             <div class="w-36 ml-2">
@@ -21,8 +21,8 @@
                     <el-option v-for="item in annuals" :label="item.name" :value="item.key"/>
                 </el-select>
             </div>
-            <div class="w-40 ml-2">
-                <el-input v-model="searchForm.queryValue" clearable placeholder="请输入关键词" @keyup="keyUpEvent" size="large"/>
+            <div class="w-48 ml-2">
+                <el-input v-model="searchForm.queryValue" clearable placeholder="请输入项目名称进行查询" @keyup="keyUpEvent" size="large"/>
             </div>
             <div class="ml-4">
                 <el-button type="primary" @click="searchClick" size="large">
@@ -83,19 +83,10 @@ const contractType = ref([
     {name: '数字化扫描+软件', key: '5'},
 ])
 
-//项目进程
-const projectProcess = ref([
-    {name: '商机-演示沟通', key: '1'},
-    {name: '商机-成本核算及报价', key: '2'},
-    {name: '合同-服务范围洽谈', key: '3'},
-    {name: '产品-研发', key: '4'},
-    {name: '产品-配置', key: '5'},
-    {name: '产品-测试', key: '6'},
-    {name: '产品-交付', key: '7'},
-    {name: '实施-系统培训', key: '8'},
-    {name: '实施-现场服务', key: '9'},
-    {name: '实施-合同回款', key: '10'},
-    {name: '项目验收', key: '11'},
+//实施负责人
+const projectUser = ref([
+    {name: '张三', key: '1'},
+    {name: '李四', key: '2'},
 ])
 
 //年度数据
@@ -107,7 +98,7 @@ const annuals = ref([
 
 //搜索表单
 const searchForm = ref({
-    projectType: null, contractType: null, projectProcess: null, date: null, queryValue: '',
+    projectType: null, contractType: null, projectUser: null, date: null, queryValue: '',
     current: 1, size: 20, total: 0
 })
 
@@ -141,16 +132,16 @@ const pageChange = ({current, size}) => {
 //获取数据
 const tableLoading = ref(false)
 const tableColumn = [
-    {key: 'key', name: '编号', width: '90', align: 'center'},
-    {key: 'key1', name: '项目名称'},
-    {key: 'key2', name: '项目进程', width: '160', align: 'center'},
-    {key: 'key3', name: '项目开始日期', width: '160', align: 'center'},
+    {key: 'key', name: '编号', width: '100', align: 'center'},
+    {key: 'key1', name: '项目名称', width: '260'},
+    {key: 'key2', name: '客户单位', width: '200', align: 'center'},
     {key: 'key4', name: '项目类型', width: '140', align: 'center'},
-    {key: 'key5', name: '合同类型', width: '140', align: 'center'},
+    {key: 'key5', name: '服务类型', width: '140', align: 'center'},
     {key: 'key6', name: '合同额(W)', width: '100', align: 'center'},
-    {key: 'key8', name: '负责人', width: '100', align: 'center'},
-    {key: 'key7', name: '合同起止日期', width: '220', align: 'center'},
-    {key: 'action', name: '操作', width: '130', align: 'center'},
+    {key: 'key8', name: '项目负责人', width: '100', align: 'center'},
+    {key: 'key8', name: '实施负责人', width: '100', align: 'center'},
+    {key: 'key7', name: '项目起止日期', width: '220', align: 'center'},
+    {key: 'action', name: '操作', width: '130', align: 'center', fixed: 'right'},
 ]
 const tableData = ref([
     {id: 1, key: 'GS-01', key1: '焦作至唐河高速公路方城至唐河段', key2: '研发-配置', key3: '2022-07-01', key4: '高速公路', key5: '软件合同', key6: '40', key8: '张三', key7: '2022-07-01 ~ 2022-04-01'},

src/views/project/list-info.vue → src/views/project/list/list-info.vue

@@ -9,45 +9,57 @@
                                 <el-form-item label="项目名称：" prop="key">
                                     <el-input v-model="formModel.key"/>
                                 </el-form-item>
+                                <el-form-item label="建设单位：" prop="key">
+                                    <el-input v-model="formModel.key"/>
+                                </el-form-item>
                                 <el-form-item label="项目类型：" prop="key1">
-                                    <el-select v-model="formModel.key1" block clearable placeholder="项目类型" size="large">
+                                    <el-select v-model="formModel.key1" block clearable placeholder="项目类型">
                                         <el-option v-for="item in projectType" :label="item.name" :value="item.key"/>
                                     </el-select>
                                 </el-form-item>
-                                <el-form-item label="开始时间：" prop="key2">
-                                    <el-date-picker class="block" v-model="formModel.key2" format="YYYY-MM-DD" type="date" value-format="YYYY-MM-DD"/>
-                                </el-form-item>
                                 <el-form-item label="项目进程：" prop="key3">
-                                    <el-select v-model="formModel.key3" block disabled="disabled" placeholder="项目进程" size="large">
+                                    <el-select v-model="formModel.key3" block disabled="disabled" placeholder="项目进程">
                                         <el-option v-for="item in projectProcess" :label="item.name" :value="item.key"/>
                                     </el-select>
                                 </el-form-item>
-                            </HcCardItem>
-                        </div>
-                        <div class="project-form-bottom">
-                            <HcCardItem title="合同信息">
-                                <el-form-item label="负责人：" prop="key8">
-                                    <el-input v-model="formModel.key8"/>
+                                <el-form-item label="服务类型：" prop="key1">
+                                    <el-select v-model="formModel.key1" block clearable placeholder="项目服务类型">
+                                        <el-option v-for="item in projectType" :label="item.name" :value="item.key"/>
+                                    </el-select>
                                 </el-form-item>
                                 <el-form-item label="起止日期：">
-                                    <HcDatePicker :dates="betweenTime" clearable @change="betweenTimeUpdate"/>
-                                </el-form-item>
-                                <el-form-item label="合同类型：">
-                                    <el-select v-model="formModel.key5" block clearable placeholder="合同类型" size="large">
-                                        <el-option v-for="item in contractType" :label="item.name" :value="item.key"/>
-                                    </el-select>
+                                    <HcDatePicker :dates="betweenTime" clearable @change="betweenTimeUpdate" size="large" disabled="disabled"/>
                                 </el-form-item>
                                 <el-form-item label="合同额：">
-                                    <el-input v-model="formModel.key6"/>
+                                    <el-input v-model="formModel.key6" disabled="disabled"/>
                                 </el-form-item>
                                 <el-form-item label="已回款：">
-                                    <el-input v-model="formModel.key7"/>
+                                    <el-input v-model="formModel.key7" disabled="disabled"/>
+                                </el-form-item>
+                                <el-form-item label="未回款：">
+                                    <el-input v-model="formModel.key7" disabled="disabled"/>
                                 </el-form-item>
-                                <el-form-item label="上传合同：" v-if="dataType !== 'view'">
-                                    <FormItemUpload v-model="formModel.key9"/>
+                                <el-form-item label="已支出：">
+                                    <el-input v-model="formModel.key7" disabled="disabled"/>
                                 </el-form-item>
-                                <el-form-item label="上传合同：" v-else>
-                                    <div class="form-item-div">xxxxx.pdf</div>
+                            </HcCardItem>
+                        </div>
+                        <div class="project-form-bottom">
+                            <HcCardItem title="联系人信息">
+                                <el-form-item label="项目负责人：">
+                                    <el-select v-model="formModel.key5" block clearable placeholder="项目负责人" size="large">
+                                        <el-option v-for="item in contractType" :label="item.name" :value="item.key"/>
+                                    </el-select>
+                                </el-form-item>
+                                <el-form-item label="实施负责人：">
+                                    <el-select v-model="formModel.key5" block clearable placeholder="实施负责人" size="large">
+                                        <el-option v-for="item in contractType" :label="item.name" :value="item.key"/>
+                                    </el-select>
+                                </el-form-item>
+                                <el-form-item label="维护负责人：">
+                                    <el-select v-model="formModel.key5" block clearable placeholder="维护负责人" size="large">
+                                        <el-option v-for="item in contractType" :label="item.name" :value="item.key"/>
+                                    </el-select>
                                 </el-form-item>
                             </HcCardItem>
                         </div>

src/views/project/reimburse.vue

@@ -1,299 +0,0 @@
-<template>
-    <HcCard>
-        <template #header>
-            <div class="w-36">
-                <el-select v-model="searchForm.projectType" block clearable placeholder="项目类型" size="large">
-                    <el-option v-for="item in projectType" :label="item.name" :value="item.key"/>
-                </el-select>
-            </div>
-            <div class="w-40 ml-2">
-                <el-select v-model="searchForm.user" block clearable placeholder="报销人" size="large">
-                    <el-option v-for="item in users" :label="item.name" :value="item.key"/>
-                </el-select>
-            </div>
-            <div class="w-52 ml-2">
-                <el-select v-model="searchForm.project" block clearable placeholder="项目名称" size="large">
-                    <el-option v-for="item in projectName" :label="item.name" :value="item.key"/>
-                </el-select>
-            </div>
-            <div class="ml-4">
-                <el-button type="primary" @click="searchClick" size="large">
-                    <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>
-        <template #extra>
-            <el-button size="large" type="primary" hc-btn @click="addRowClick">
-                <HcIcon name="add"/>
-                <span>新增报销记录</span>
-            </el-button>
-        </template>
-
-        <HcTable :isIndex="false" :column="tableColumn" :datas="tableData" :loading="tableLoading">
-            <template #key1="{row}">
-                <span class="text-blue">{{row.key1}}</span>
-            </template>
-            <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>
-            </template>
-        </HcTable>
-
-        <template #action>
-            <HcPages :pages="searchForm" @change="pageChange"/>
-        </template>
-
-        <!--报销记录-->
-        <HcDialog bgColor="#ffffff" isToBody :loading="recordLoading" :show="recordModal" title="报销记录" widths="500px" @close="closeRecordClick" @save="saveRecordClick">
-            <el-form ref="formRecordRef" :model="formRecordModel" :rules="formRecordRules" label-width="auto" size="large">
-                <el-form-item label="报销类型" prop="key1">
-                    <el-select v-model="formRecordModel.key1" block clearable placeholder="报销类型" size="large">
-                        <el-option v-for="item in reimburseType" :label="item.name" :value="item.key"/>
-                    </el-select>
-                </el-form-item>
-                <el-form-item label="关联项目" prop="key2">
-                    <el-select v-model="formRecordModel.key2" block clearable placeholder="项目名称" size="large">
-                        <el-option v-for="item in projectName" :label="item.name" :value="item.key"/>
-                    </el-select>
-                </el-form-item>
-                <el-form-item label="关联预算" prop="key3">
-                    <el-button size="default" type="primary" @click="associatedBudgetClick">
-                        <HcIcon name="add"/>
-                        <span>关联预算</span>
-                    </el-button>
-                </el-form-item>
-                <el-form-item label="费用金额" prop="key4">
-                    <el-input v-model="formRecordModel.key4" placeholder="请输入费用金额">
-                        <template #append>元</template>
-                    </el-input>
-                </el-form-item>
-            </el-form>
-        </HcDialog>
-
-        <!--关联预算-->
-        <HcDialog bgColor="#ffffff" isToBody isTable isRowFooter :loading="relatedLoading" :show="relatedModal" title="关联预算" widths="62rem">
-            <HcTable :isIndex="false" :column="tableBudgetColumn" :datas="tableBudgetData" :loading="tableBudgetLoading">
-                <template #action="{row,index}">
-                    <el-button plain size="small" type="primary" @click="row.isRelated = true" v-if="!row.isRelated">
-                        <HcIcon name="link" :line="false"/>
-                        <span>关联</span>
-                    </el-button>
-                    <el-button plain size="small" type="danger" @click="row.isRelated = false" v-else>
-                        <HcIcon name="link-unlink-m" :line="false"/>
-                        <span>取消</span>
-                    </el-button>
-                </template>
-            </HcTable>
-            <template #leftRowFooter>
-                <el-button size="large" @click="closeRelatedClick">
-                    <HcIcon name="close"/>
-                    <span>取消</span>
-                </el-button>
-                <el-button size="large" type="primary" @click="saveRelatedClick">
-                    <HcIcon name="check"/>
-                    <span>确认关联</span>
-                </el-button>
-            </template>
-            <template #rightRowFooter>
-                <HcPages :pages="searchBudgetForm" @change="pageBudgetChange"/>
-            </template>
-        </HcDialog>
-
-    </HcCard>
-</template>
-
-<script setup>
-import {ref} from "vue";
-
-//项目类型
-const projectType = ref([
-    {name: '二级路', key: '二级路'},
-    {name: '国道', key: '国道'},
-    {name: '水利水电', key: '水利水电'},
-    {name: '市政', key: '市政'},
-])
-
-//报销人
-const users = ref([
-    {name: '张三', key: '张三'},
-    {name: '李四', key: '李四'}
-])
-
-//项目名称
-const projectName = ref([
-    {name: '陈油路', key: '陈油路'},
-    {name: '奉建路', key: '奉建路'}
-])
-
-//报销类型
-const reimburseType = ref([
-    {name: '业务招待费', key: '1'},
-    {name: '审计费', key: '2'},
-    {name: '招聘费', key: '3'},
-    {name: '水电费', key: '4'},
-    {name: '税金', key: '5'},
-    {name: '房租', key: '6'},
-    {name: '运杂费', key: '7'},
-    {name: '办公费', key: '8'},
-    {name: '检测费', key: '9'},
-    {name: '设备采购费', key: '10'},
-    {name: '设备维护费', key: '11'},
-    {name: '物业垃圾费', key: '12'},
-    {name: '通讯费', key: '13'},
-    {name: '出差补助', key: '14'},
-    {name: '住宿费', key: '15'},
-    {name: '培训费', key: '16'},
-    {name: '公司车辆使用费', key: '17'},
-    {name: '金融手续费', key: '18'},
-    {name: '交通费', key: '19'},
-    {name: '五险一金', key: '20'},
-    {name: '工资', key: '21'},
-    {name: '项目合作劳务费', key: '22'},
-    {name: '福利费', key: '23'},
-    {name: '技术服务费', key: '24'},
-    {name: '商务佣金', key: '25'},
-    {name: '礼品费', key: '26'},
-])
-
-//搜索表单
-const searchForm = ref({
-    projectType: null, user: null, project: null,
-    current: 1, size: 20, total: 0
-})
-
-//搜索
-const searchClick = () => {
-    searchForm.value.current = 1;
-    getTableData()
-}
-
-//重置搜索表单
-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 = [
-    {key: 'key', name: '报销编号', width: '90', align: 'center'},
-    {key: 'key1', name: '报销类型', width: '180', align: 'center'},
-    {key: 'key2', name: '报销项目'},
-    {key: 'key3', name: '项目进程', width: '180', align: 'center'},
-    {key: 'key4', name: '报销金额', width: '160', align: 'center'},
-    {key: 'key5', name: '报销人', width: '140', align: 'center'},
-    {key: 'key6', name: '报销时间', width: '160', align: 'center'},
-    {key: 'action', name: '操作', width: '130', align: 'center'},
-]
-const tableData = ref([
-    {id: 1, key: 'BX-01', key1: '差旅费', key2: '奉建路', key3: '商机', key4: '6667', key5: '张三', key6: '2022-02-22'},
-    {id: 2, key: 'BX-01', key1: '差旅费', key2: '奉建路', key3: '商机', key4: '6667', key5: '张三', key6: '2022-02-22'},
-    {id: 3, key: 'BX-01', key1: '差旅费', key2: '奉建路', key3: '商机', key4: '6667', key5: '张三', key6: '2022-02-22'},
-])
-
-const getTableData = () => {
-
-}
-
-//报销记录弹窗
-const recordLoading = ref(false)
-const recordModal = ref(false)
-
-//编辑报销记录
-const editRowClick = (row) => {
-    recordLoading.value = false
-    recordModal.value = true
-}
-
-//新增报销记录
-const addRowClick = () => {
-    recordLoading.value = false
-    recordModal.value = true
-}
-
-//报销记录表单
-const formRecordRef = ref(null)
-const formRecordModel = ref({})
-const formRecordRules = {}
-
-//关闭报销记录
-const closeRecordClick = () => {
-    recordLoading.value = false
-    recordModal.value = false
-}
-
-//提交保存报销记录
-const saveRecordClick = () => {
-    recordLoading.value = false
-    recordModal.value = false
-}
-
-//关联预算弹窗
-const relatedLoading = ref(false)
-const relatedModal = ref(false)
-
-//展开关联预算弹窗
-const associatedBudgetClick = () => {
-    relatedLoading.value = false
-    relatedModal.value = true
-}
-
-//预算分页和搜索
-const searchBudgetForm = ref({current: 1, size: 20, total: 0})
-const pageBudgetChange = ({current, size}) => {
-    searchBudgetForm.value.current = current
-    searchBudgetForm.value.size = size
-}
-
-//预算表格
-const tableBudgetLoading = ref(false)
-const tableBudgetColumn = [
-    {key: 'key', name: '项目环节', width: '160', align: 'center'},
-    {key: 'key1', name: '预算类型', width: '100', align: 'center'},
-    {key: 'key2', name: '任务明细', width: '160', align: 'center'},
-    {key: 'key3', name: '预算金额', width: '120', align: 'center'},
-    {key: 'key4', name: '任务完成标准'},
-    {key: 'key5', name: '投入人员数量', width: '120', align: 'center'},
-    {key: 'action', name: '操作', width: '90', align: 'center'},
-]
-const tableBudgetData = ref([
-    {id: 1, key: 'xxx', key1: 'xxx', key2: 'xxx', key3: 'xxx', key4: 'xxx', key5: 'xxx'},
-    {id: 2, key: 'xxx', key1: 'xxx', key2: 'xxx', key3: 'xxx', key4: 'xxx', key5: 'xxx'},
-    {id: 3, key: 'xxx', key1: 'xxx', key2: 'xxx', key3: 'xxx', key4: 'xxx', key5: 'xxx'},
-    {id: 4, key: 'xxx', key1: 'xxx', key2: 'xxx', key3: 'xxx', key4: 'xxx', key5: 'xxx'},
-])
-
-
-//关闭报销记录
-const closeRelatedClick = () => {
-    relatedLoading.value = false
-    relatedModal.value = false
-}
-
-//提交保存报销记录
-const saveRelatedClick = () => {
-    relatedLoading.value = false
-    relatedModal.value = false
-}
-</script>
-
-<style lang="scss" scoped>
-
-</style>
-
-<style lang="scss">
-
-</style>