|
|
@@ -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>
|
