重构

src/renderer/src/views/project/data.vue

@@ -3,7 +3,7 @@
         <template #extra>
             <el-button type="primary" class="mr-10px" @click="addRowClick">项目新增</el-button>
             <el-button type="warning" class="mr-10px">导入</el-button>
-            <el-button type="danger" :disabled="tableCheckKeys.length <= 0">批量删除</el-button>
+            <el-button type="danger" :disabled="tableCheckKeys.length <= 0" @click="batchDelClick">批量删除</el-button>
         </template>
         <hc-table
             :column="tableColumn" :datas="tableData" :index-style="{ width: 60 }" :loading="tableLoading"
@@ -13,9 +13,9 @@
                 <el-link type="primary" @click="editRowClick(row)">{{ row.name }}</el-link>
             </template>
             <template #action="{ row }">
-                <el-link type="warning">收益数据</el-link>
-                <el-link type="primary">查看</el-link>
-                <el-link type="danger">删除</el-link>
+                <el-link type="warning" @click="rowEarningsClick(row)">收益数据</el-link>
+                <el-link type="primary" @click="rowViewClick(row)">查看</el-link>
+                <el-link type="danger" @click="rowDelClick(row)">删除</el-link>
             </template>
         </hc-table>
         <template #action>
@@ -25,10 +25,62 @@
 
     <!--新增、编辑-->
     <HcAddAndEdit v-model="isAddAndEditShow" :data="addAndEditForm" @close="addAndEditClose" @finish="addAndEditSubmit"/>
+
+    <!--查看-->
+    <HcAddAndEdit v-model="isViewShow" :data="rowInfo" disabled @close="viewClose">
+        <hc-card-item ui="hc-project-data-view-info">
+            <div class="hc-flex-center mb-24px">
+                <el-select v-model="selectYear" class="select-year" placeholder="选择年份" @change="changeYear">
+                    <el-option v-for="(item) in yearOptions" :key="item.value" :label="item.label" :value="item.value" />
+                </el-select>
+            </div>
+            <el-form :model="rowInfo" label-width="auto">
+                <el-form-item label="通行费用：">
+                    <el-input v-model="rowInfo.key20" placeholder="请输入通行费用" clearable disabled/>
+                </el-form-item>
+                <el-form-item label="广告费用：">
+                    <el-input v-model="rowInfo.key21" placeholder="请输入广告费用" clearable disabled/>
+                </el-form-item>
+                <el-form-item label="服务区费用：">
+                    <el-input v-model="rowInfo.key22" placeholder="请输入服务区费用" clearable disabled/>
+                </el-form-item>
+            </el-form>
+        </hc-card-item>
+    </HcAddAndEdit>
+
+    <!--查看收益数据-->
+    <hc-dialog v-model="isEarningsShow" widths="40rem" title="收益录入" is-footer-center @close="dialogEarningsClose">
+        <el-form ref="formRef" :model="formModel" :rules="formRules" label-width="auto">
+            <el-form-item label="项目名称：">
+                <el-input v-model="formModel.name" placeholder="请输入项目名称" clearable disabled/>
+            </el-form-item>
+            <hc-card-item ui="hc-project-data-view-info">
+                <div class="hc-flex-center mb-24px">
+                    <el-select v-model="selectYear" class="select-year" placeholder="选择年份" @change="changeYear">
+                        <el-option v-for="(item) in yearOptions" :key="item.value" :label="item.label" :value="item.value" />
+                    </el-select>
+                </div>
+                <el-form-item label="通行费用：">
+                    <el-input v-model="formModel.key20" placeholder="请输入通行费用" clearable/>
+                </el-form-item>
+                <el-form-item label="广告费用：">
+                    <el-input v-model="formModel.key21" placeholder="请输入广告费用" clearable/>
+                </el-form-item>
+                <el-form-item label="服务区费用：">
+                    <el-input v-model="formModel.key22" placeholder="请输入服务区费用" clearable/>
+                </el-form-item>
+            </hc-card-item>
+        </el-form>
+        <template #footer>
+            <el-button hc-btn @click="dialogEarningsClose">取消</el-button>
+            <el-button hc-btn type="primary" :loading="submitEarningsLoading" @click="dialogEarningsSubmit">保存</el-button>
+        </template>
+    </hc-dialog>
 </template>
 
 <script setup>
 import {nextTick, onMounted, ref} from 'vue'
+import {HcDelMsg} from "hc-vue3-ui";
 import HcAddAndEdit from './data/addAndEdit.vue'
 
 //渲染完成
@@ -109,8 +161,78 @@ const addAndEditClose = () => {
     isAddAndEditShow.value = false
     addAndEditForm.value = {}
 }
-</script>
 
-<style scoped lang="scss">
+//选择年份
+const selectYear = ref(null)
+const yearOptions = [{value: '2022', label: '2022年'}]
+const changeYear = (val) => {
+    console.log(val)
+}
+
+//查看数据
+const isViewShow = ref(false)
+const rowInfo = ref({})
+const rowViewClick = async (data) => {
+    rowInfo.value = data
+    await nextTick()
+    isViewShow.value = true
+}
+
+//关闭查看
+const viewClose = () => {
+    isViewShow.value = false
+    rowInfo.value = {}
+}
+
+//批量删除
+const batchDelClick = () => {
+    HcDelMsg(async (resolve) => {
+        console.log('删除中...')
+        setTimeout(() => {
+            resolve() //关闭弹窗的回调
+        }, 3000)
+    })
+}
+
+//删除
+const rowDelClick = (row) => {
+    HcDelMsg(async (resolve) => {
+        console.log('删除中...')
+        setTimeout(() => {
+            resolve() //关闭弹窗的回调
+        }, 3000)
+    })
+}
+
+//收益数据
+const isEarningsShow = ref(false)
+const formModel = ref({})
+const formRules = ref({})
+const rowEarningsClick = async (row) => {
+    formModel.value = row
+    await nextTick()
+    isEarningsShow.value = true
+}
 
+//收益录入
+const submitEarningsLoading = ref(false)
+const dialogEarningsSubmit = () => {
+    dialogEarningsClose()
+}
+
+//关闭收益数据
+const dialogEarningsClose = () => {
+    isEarningsShow.value = false
+    formModel.value = {}
+}
+</script>
+
+<style lang="scss">
+.hc-card-item-box.hc-project-data-view-info {
+    background: #f9f9f9;
+    border-radius: 5px;
+    .select-year {
+        width: 100px;
+    }
+}
 </style>

src/renderer/src/views/project/data/addAndEdit.vue

@@ -1,45 +1,45 @@
 <template>
-    <hc-dialog v-model="isShow" widths="40rem" :title="`项目${formModel.id?'编辑':'新增'}`" is-footer-center @close="dialogClose">
+    <hc-dialog v-model="isShow" widths="40rem" :title="`${disabled?'查看项目':'项目'+formModel.id?'编辑':'新增'}`" :footer="!disabled" is-footer-center @close="dialogClose">
         <el-form ref="formRef" :model="formModel" :rules="formRules" label-width="auto">
             <el-row :gutter="20">
                 <el-col :span="24">
                     <el-form-item label="项目名称：" prop="name">
-                        <el-input v-model="formModel.name" placeholder="请输入项目名称" clearable/>
+                        <el-input v-model="formModel.name" placeholder="请输入项目名称" clearable :disabled="disabled"/>
                     </el-form-item>
                 </el-col>
                 <el-col :span="12">
                     <el-form-item label="运营时间：">
-                        <el-date-picker v-model="formModel.time1" class="block" format="YYYY-MM-DD" type="date" value-format="YYYY-MM-DD" />
+                        <el-date-picker v-model="formModel.time1" class="block" format="YYYY-MM-DD" type="date" value-format="YYYY-MM-DD"  :disabled="disabled"/>
                     </el-form-item>
                 </el-col>
                 <el-col :span="12">
                     <el-form-item label="收费时间：">
-                        <el-date-picker v-model="formModel.time2" class="block" format="YYYY-MM-DD" type="date" value-format="YYYY-MM-DD" />
+                        <el-date-picker v-model="formModel.time2" class="block" format="YYYY-MM-DD" type="date" value-format="YYYY-MM-DD"  :disabled="disabled"/>
                     </el-form-item>
                 </el-col>
                 <el-col :span="12">
                     <el-form-item label="初始成本：">
-                        <el-input v-model="formModel.key10" placeholder="请输入初始成本" clearable/>
+                        <el-input v-model="formModel.key10" placeholder="请输入初始成本" clearable :disabled="disabled"/>
                     </el-form-item>
                 </el-col>
                 <el-col :span="12">
                     <el-form-item label="人工成本：">
-                        <el-input v-model="formModel.key11" placeholder="请输入人工成本" clearable/>
+                        <el-input v-model="formModel.key11" placeholder="请输入人工成本" clearable :disabled="disabled"/>
                     </el-form-item>
                 </el-col>
                 <el-col :span="12">
                     <el-form-item label="管理成本：">
-                        <el-input v-model="formModel.key12" placeholder="请输入管理成本" clearable/>
+                        <el-input v-model="formModel.key12" placeholder="请输入管理成本" clearable :disabled="disabled"/>
                     </el-form-item>
                 </el-col>
                 <el-col :span="12">
                     <el-form-item label="养护成本：">
-                        <el-input v-model="formModel.key13" placeholder="请输入人工成本" clearable/>
+                        <el-input v-model="formModel.key13" placeholder="请输入人工成本" clearable :disabled="disabled"/>
                     </el-form-item>
                 </el-col>
                 <el-col :span="12">
                     <el-form-item label="大修成本：">
-                        <el-input v-model="formModel.key14" placeholder="请输入大修成本" clearable/>
+                        <el-input v-model="formModel.key14" placeholder="请输入大修成本" clearable :disabled="disabled"/>
                     </el-form-item>
                 </el-col>
             </el-row>
@@ -61,6 +61,10 @@ const props = defineProps({
         type: Object,
         default: () => ({}),
     },
+    disabled: {
+        type: Boolean,
+        default: false,
+    }
 })
 
 //事件