优化项目资料收集

public/version.json

@@ -1,3 +1,3 @@
 {
-  "value": "20240403151011"
+  "value": "20240403162403"
 }

src/views/project/modules/gist-list.vue

@@ -4,8 +4,8 @@
             :column="tableColumn" :datas="tableData" :index-style="{ width: 60 }" is-check :check-style="{ fixed: true, width: 29 }"
             class="hc-project-list-table" @selection-change="tableCheckChange"
         >
-            <template #key1="{ row }">
-                <el-link type="primary" @click="rowNameClick(row)">{{ row.key1 }}</el-link>
+            <template #key2="{ row }">
+                <el-link type="primary" @click="rowNameClick(row)">{{ row.key2 }}</el-link>
             </template>
             <template #action="{ row }">
                 <el-link v-if="isAdminAuth" type="warning" @click="completion(row)">工作完成情况</el-link>
@@ -16,131 +16,103 @@
         </hc-table>
         <!-- 查看详情 -->
         <hc-drawer v-model="isDrawer" to-id="hc-main-box" is-close>
-            <hc-card class="hc-project-list-drawer">
+            <hc-card class="hc-project-list-drawer" is-action-btn>
                 <template #header>
                     <div class="flex-1 text-center text-[24px] font-bold">工作要点详情</div>
                 </template>
-                <hc-info-table>
-                    <tr>
-                        <hc-info-table-td is-title width="10%" center>项目阶段</hc-info-table-td>
-                        <hc-info-table-td center width="90%">
-                            <span class="text-[18px] font-bold">紧盯重大项目，推动交通投资稳进增效</span>
-                        </hc-info-table-td>
-                    </tr>
-                    <tr>
-                        <hc-info-table-td is-title width="10%" center>目标任务</hc-info-table-td>
-                        <hc-info-table-td center width="90%">充分发挥投资的关键作用</hc-info-table-td>
-                    </tr>
-                    <tr>
-                        <hc-info-table-td is-title width="10%" center>工作内容</hc-info-table-td>
-                        <hc-info-table-td center width="90%">2024年，市交通运输委完成投资1155亿元，其中铁路计划完成投资480亿元、公路计划完成投资565亿元（高速公路建设计划投资428亿元、高速公路养护计划投资8.5亿元、普通公路建设及养护工程力争完成投资110亿元、公交及枢纽场站计划投资8.5亿元）、水运计划投资39亿元、民航计划投资70亿元、邮政计划投资1.3亿元、公交车辆购置更新等其他计划投资10亿元。</hc-info-table-td>
-                    </tr>
-                    <tr>
-                        <hc-info-table-td is-title width="10%" center>责任单位</hc-info-table-td>
-                        <hc-info-table-td center width="90%">市交通运输委</hc-info-table-td>
-                    </tr>
-                </hc-info-table>
-                <div class="hc-project-list-drawer-year">
-                    <el-scrollbar>
-                        <div class="relative p-2 pt-6">
-                            <hc-card-item class="year-detail">
-                                <template #header>
-                                    <div class="flex-1 text-center text-[14px]">
-                                        <HcDropdown v-model="yearKey" :datas="yearData" />
-                                    </div>
-                                </template>
-                                <div class="hc-gist-info-table bb-0">
-                                    <div class="title left">年度工作完成情况</div>
-                                    <div class="content">这里是内容区域</div>
-                                </div>
-                                <div class="hc-flex">
-                                    <div class="hc-gist-info-table bb-0 flex-1">
-                                        <div class="title">上半年</div>
-                                        <div class="content">这里是内容区域</div>
-                                    </div>
-                                    <div class="hc-gist-info-table bl-0 bb-0 flex-1">
-                                        <div class="title">下半年</div>
-                                        <div class="content">这里是内容区域</div>
-                                    </div>
-                                </div>
-                                <hc-info-table>
-                                    <tr>
-                                        <hc-info-table-td is-title width="10%" center>一季度</hc-info-table-td>
-                                        <hc-info-table-td center width="90%">xxxxx</hc-info-table-td>
-                                    </tr>
-                                    <tr>
-                                        <hc-info-table-td is-title width="10%" center>二季度</hc-info-table-td>
-                                        <hc-info-table-td center width="90%">xxxxx</hc-info-table-td>
-                                    </tr>
-                                    <tr>
-                                        <hc-info-table-td is-title width="10%" center>三季度</hc-info-table-td>
-                                        <hc-info-table-td center width="90%">xxxxx</hc-info-table-td>
-                                    </tr>
-                                    <tr>
-                                        <hc-info-table-td is-title width="10%" center>四季度</hc-info-table-td>
-                                        <hc-info-table-td center width="90%">xxxxx</hc-info-table-td>
-                                    </tr>
-                                </hc-info-table>
-                            </hc-card-item>
-                        </div>
-                    </el-scrollbar>
+                <div class="hc-project-list-flex">
+                    <div class="hc-project-list-info-table">
+                        <hc-info-table>
+                            <tr>
+                                <hc-info-table-td is-title width="10%" center>项目阶段</hc-info-table-td>
+                                <hc-info-table-td center width="40%">紧盯重大项目，推动交通投资稳进增效</hc-info-table-td>
+                                <hc-info-table-td is-title width="10%" center>目标任务</hc-info-table-td>
+                                <hc-info-table-td center width="40%">充分发挥投资的关键作用</hc-info-table-td>
+                            </tr>
+                        </hc-info-table>
+                        <hc-info-table class="mt-[-1px]">
+                            <tr>
+                                <hc-info-table-td is-title width="10%" center>工作内容</hc-info-table-td>
+                                <hc-info-table-td center width="90%">2024年，市交通运输委完成投资1155亿元，其中铁路计划完成投资480亿元、公路计划完成投资565亿元（高速公路建设计划投资428亿元、高速公路养护计划投资8.5亿元、普通公路建设及养护工程力争完成投资110亿元、公交及枢纽场站计划投资8.5亿元）、水运计划投资39亿元、民航计划投资70亿元、邮政计划投资1.3亿元、公交车辆购置更新等其他计划投资10亿元。</hc-info-table-td>
+                            </tr>
+                            <tr v-if="isDrawerType === 'view'">
+                                <hc-info-table-td is-title width="10%" center>责任单位</hc-info-table-td>
+                                <hc-info-table-td center width="90%">市交通运输委</hc-info-table-td>
+                            </tr>
+                        </hc-info-table>
+                    </div>
+                    <div class="hc-project-list-drawer-year">
+                        <hc-body scrollbar padding="0">
+                            <div class="relative p-2 pt-6">
+                                <hc-card-item class="year-detail" :class="isDrawerType === 'edit' ? 'edit' : ''">
+                                    <template #header>
+                                        <div class="flex-1 text-center text-[14px]">
+                                            <HcDropdown v-model="yearKey" :datas="yearData" />
+                                        </div>
+                                    </template>
+                                    <el-table :data="tableYearData" border class="w-full">
+                                        <el-table-column prop="month" class-name="line" width="120" align="center">
+                                            <template #header>
+                                                <div class="hc-table-th-line">
+                                                    <span class="left">月份</span>
+                                                    <span class="right">完成情况</span>
+                                                </div>
+                                            </template>
+                                        </el-table-column>
+                                        <el-table-column prop="key1" label="进展情况" align="center">
+                                            <template #default="{ row }">
+                                                <hc-body v-if="isDrawerType === 'edit'">
+                                                    <hc-table-input v-model="row.key1" type="textarea" resize="none" />
+                                                </hc-body>
+                                                <span v-else>{{ row.key1 }}</span>
+                                            </template>
+                                        </el-table-column>
+                                        <el-table-column prop="key2" label="累计进展情况" align="center">
+                                            <template #default="{ row }">
+                                                <hc-body v-if="isDrawerType === 'edit'">
+                                                    <hc-table-input v-model="row.key2" type="textarea" resize="none" />
+                                                </hc-body>
+                                                <span v-else>{{ row.key2 }}</span>
+                                            </template>
+                                        </el-table-column>
+                                    </el-table>
+                                    <hc-info-table class="mt-[-1px]">
+                                        <tr>
+                                            <hc-info-table-td is-title width="10%" center>存在问题</hc-info-table-td>
+                                            <hc-info-table-td center width="40%">
+                                                <span v-if="isDrawerType === 'view'">{{ testValue }}</span>
+                                                <el-input v-else v-model="testValue" type="textarea" resize="none" />
+                                            </hc-info-table-td>
+                                            <hc-info-table-td is-title width="10%" center>工作建议</hc-info-table-td>
+                                            <hc-info-table-td center width="40%">
+                                                <span v-if="isDrawerType === 'view'">{{ testValue }}</span>
+                                                <el-input v-else v-model="testValue" type="textarea" resize="none" />
+                                            </hc-info-table-td>
+                                        </tr>
+                                        <tr>
+                                            <hc-info-table-td is-title width="10%" center>填报单位</hc-info-table-td>
+                                            <hc-info-table-td center width="40%">
+                                                <span v-if="isDrawerType === 'view'">{{ testValue }}</span>
+                                                <el-input v-else v-model="testValue" />
+                                            </hc-info-table-td>
+                                            <hc-info-table-td is-title width="10%" center>联系人及联系方式</hc-info-table-td>
+                                            <hc-info-table-td center width="40%">
+                                                <span v-if="isDrawerType === 'view'">{{ testValue }}</span>
+                                                <el-input v-else v-model="testValue" />
+                                            </hc-info-table-td>
+                                        </tr>
+                                    </hc-info-table>
+                                </hc-card-item>
+                            </div>
+                        </hc-body>
+                    </div>
                 </div>
+                <template v-if="isDrawerType === 'edit'" #action>
+                    <el-button type="info" @click="isDrawer = false">取消</el-button>
+                    <el-button type="warning" @click="saveCompletionClick">保存</el-button>
+                </template>
             </hc-card>
         </hc-drawer>
-
-        <!-- 工作完成情况 -->
-        <hc-dialog v-model="isCompletionShow" widths="44rem" title="工作完成情况" @close="modalCompletionClose">
-            <el-form ref="caseFormRef" :model="caseForm" :rules="caseFormRules" label-position="top" label-width="auto">
-                <el-row :gutter="20">
-                    <el-col :span="8">
-                        <el-form-item label="选择年份：" prop="key1">
-                            <el-select v-model="caseForm.key1" placeholder="选择年份">
-                                <el-option label="2022年" value="2022" />
-                                <el-option label="2023年" value="2023" />
-                                <el-option label="2024年" value="2024" />
-                            </el-select>
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="8">
-                        <el-form-item label="选择填报方式：" prop="key2">
-                            <el-select v-model="caseForm.key2" placeholder="选择填报方式">
-                                <el-option label="按季度填报" value="1" />
-                                <el-option label="按半年填报" value="2" />
-                                <el-option label="按一年填报" value="3" />
-                            </el-select>
-                        </el-form-item>
-                    </el-col>
-                    <el-col v-if="caseForm.key2 === '1'" :span="8">
-                        <el-form-item label="选择时间：" prop="key3">
-                            <el-select v-model="caseForm.key3" placeholder="选择时间">
-                                <el-option label="一季度" value="1" />
-                                <el-option label="二季度" value="2" />
-                                <el-option label="三季度" value="3" />
-                                <el-option label="四季度" value="4" />
-                                <el-option label="整年" value="5" />
-                            </el-select>
-                        </el-form-item>
-                    </el-col>
-                    <el-col v-if="caseForm.key2 === '2'" :span="8">
-                        <el-form-item label="选择时间：" prop="key4">
-                            <el-select v-model="caseForm.key4" placeholder="选择时间">
-                                <el-option label="上半年" value="1" />
-                                <el-option label="下半年" value="2" />
-                            </el-select>
-                        </el-form-item>
-                    </el-col>
-                </el-row>
-                <el-form-item label="工作完成情况：" prop="key5">
-                    <el-input v-model="caseForm.key5" placeholder="请输入工作完成情况" :rows="10" clearable type="textarea" />
-                </el-form-item>
-            </el-form>
-            <template #footer>
-                <div class="dialog-footer">
-                    <el-button size="large" @click="modalCompletionClose">取消</el-button>
-                    <el-button :loading="completionLoding" type="primary" @click="saveCompletionClick">保存</el-button>
-                </div>
-            </template>
-        </hc-dialog>
     </div>
 </template>
 
@@ -173,33 +145,60 @@ onMounted(() => {
     }, 200)
 })
 
+//生成月份表头
+const setTableColumn = () => {
+    let newArr = []
+    for (let i = 0; i < 12; i++) {
+        newArr.push({
+            name: `${i + 1}月`,
+            children: [
+                { key: `key-${i + 1}-a`, name: '进展情况', width: 120 },
+                { key: `key-${i + 1}-b`, name: '累计进展情况', width: 120 },
+            ],
+        })
+    }
+    return newArr
+}
+
 //表头
-const tableColumn = ref([
-   { key: 'key1', name: '目标任务' },
-   { key: 'key2', name: '工作内容' },
-   {
-       name: '2024年',
-       children: [
-           { key: 'key3', name: '整年' },
-           { key: 'key4', name: '上半年' },
-           { key: 'key5', name: '下半年' },
-           { key: 'key6', name: '第一季度' },
-           { key: 'key7', name: '第二季度' },
-           { key: 'key8', name: '第三季度' },
-           { key: 'key9', name: '第四季度' },
-       ],
-   },
-    { key: 'key10', name: '责任单位' },
+const tableColumn = [
+    { key: 'key1', name: '项目阶段' },
+    { key: 'key2', name: '目标任务' },
+    { key: 'key3', name: '工作内容' },
+    { key: 'key4', name: '责任单位' },
+    {
+        name: '2024年',
+        children: [
+            ...setTableColumn(),
+            {
+                name: '存在问题',
+                key: 'key60',
+            },
+            {
+                name: '工作建议',
+                key: 'key61',
+            },
+            {
+                name: '填报单位',
+                key: 'key62',
+            },
+            {
+                name: '联系人及联系方式',
+                key: 'key63',
+                width: 140,
+            },
+        ],
+    },
     { key: 'action', name: '操作', width: isAdminAuth.value ? 220 : 100, fixed:'right', align: 'center' },
-])
+]
 
 //表格数据
 const tableData = ref([
-   { id: 1, key1: '名称1', key2: '-', key3: '-' },
-   { id: 2, key1: '名称2', key2: '-', key3: '-' },
-   { id: 3, key1: '名称3', key2: '-', key3: '-' },
-   { id: 4, key1: '名称4', key2: '-', key3: '-' },
-   { id: 5, key1: '名称5', key2: '-', key3: '-' },
+   { id: 1, key1: '-', key2: '名称1', key3: '-' },
+   { id: 2, key1: '-', key2: '名称2', key3: '-' },
+   { id: 3, key1: '-', key2: '名称3', key3: '-' },
+   { id: 4, key1: '-', key2: '名称4', key3: '-' },
+   { id: 5, key1: '-', key2: '名称5', key3: '-' },
 ])
 
 //表格被选择
@@ -215,58 +214,40 @@ const rowNameClick = (row) => {
 }
 
 //工作完成情况
-const isCompletionShow = ref(false)
+const tableYearData = ref([
+    { month: '1月', key1: '', key2: '' },
+    { month: '2月', key1: '', key2: '' },
+    { month: '3月', key1: '', key2: '' },
+    { month: '4月', key1: '', key2: '' },
+    { month: '5月', key1: '', key2: '' },
+    { month: '6月', key1: '', key2: '' },
+    { month: '7月', key1: '', key2: '' },
+    { month: '8月', key1: '', key2: '' },
+    { month: '9月', key1: '', key2: '' },
+    { month: '10月', key1: '', key2: '' },
+    { month: '11月', key1: '', key2: '' },
+    { month: '12月', key1: '', key2: '' },
+])
+const testValue = ref('')
+
+//工作完成情况
 const completion = (row) => {
-    isCompletionShow.value = true
+    isDrawerType.value = 'edit'
+    isDrawer.value = true
     emit('completion', row)
 }
 
-//工作完成情况表单
-const caseFormRef = ref(null)
-const caseForm = ref({})
-const caseFormRules = {
-    key1: {
-        required: true,
-        message: '请选择年份',
-        trigger: 'change',
-    },
-    key2: {
-        required: true,
-        message: '请选择填报方式',
-        trigger: 'change',
-    },
-    key3: {
-        required: true,
-        message: '请选择时间',
-        trigger: 'change',
-    },
-    key4: {
-        required: true,
-        message: '请选择时间',
-        trigger: 'change',
-    },
-    key5: {
-        required: true,
-        message: '请填写工作完成情况',
-        trigger: 'blur',
-    },
-}
-
 //保存工作完成情况
-const completionLoding = ref(false)
 const saveCompletionClick = () => {
-    isCompletionShow.value = false
+    isDrawer.value = false
+    isDrawerType.value = ''
 }
 
-//工作完成情况弹窗 关闭
-const modalCompletionClose = () => {
-    isCompletionShow.value = false
-}
-
-
 //查看
 const isDrawer = ref(false)
+const isDrawerType = ref('view')
 const examine = (row) => {
+    isDrawerType.value = 'view'
     isDrawer.value = true
     emit('examine', row)
 }
@@ -318,25 +299,20 @@ defineExpose({
 </script>
 
 <style lang="scss">
-.hc-project-list-drawer-year {
+.hc-project-list-flex {
     position: relative;
-    border: 1px solid #dddddd;
-    border-top: 0;
-    height: calc(100% - 170px);
-    &.detail {
-        height: calc(100% - 34px);
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    .hc-project-list-info-table {
+        flex-shrink: 0;
     }
-    .year-detail {
-        padding: 14px;
-        background: #f7f7f7;
-        border-radius: 5px;
-        .hc-card-item-header {
-            border-bottom: 1px solid #ecebeb;
-            padding-bottom: 10px;
-            .item-header {
-                justify-content: center;
-            }
-        }
+    .hc-project-list-drawer-year {
+        position: relative;
+        border: 1px solid #dddddd;
+        border-top: 0;
+        flex: 1;
+        flex-basis: auto;
         .el-table {
             --el-table-border-color: #dcdcdc;
             --el-table-header-text-color: #101010;
@@ -378,6 +354,9 @@ defineExpose({
                 }
             }
         }
+        &.edit .el-table--enable-row-transition .el-table__body td.el-table__cell {
+            height: 60px;
+        }
         .el-table .el-table__cell .cell {
             .hc-new-main-body_content {
                 padding: 4px !important;
@@ -394,32 +373,4 @@ defineExpose({
         }
     }
 }
-.hc-gist-info-table {
-    position: relative;
-    border: 1px solid #dddddd;
-    .title {
-        position: relative;
-        padding: 10px;
-        font-size: 14px;
-        background: #f9f9f9;
-        text-align: center;
-        border-bottom: 1px solid #dddddd;
-        &.left {
-            text-align: left;
-        }
-    }
-    .content {
-        background: white;
-        padding: 10px;
-        font-size: 14px;
-        min-height: 120px;
-        overflow: auto;
-    }
-    &.bb-0 {
-        border-bottom: 0;
-    }
-    &.bl-0 {
-        border-left: 0;
-    }
-}
 </style>