lc_finance/web/src/view/projectManage/projectList/projectList.vue

<template>
  <div>
    <el-row>
      <el-col :span="4">
        <el-form-item label="项目名称">
          <el-input
            v-model="filterProjects.name"
            placeholder="请输入项目名称"
          />
        </el-form-item>
      </el-col>
      <el-col
        :span="4"
        :offset="1"
      >
        <el-form-item label="立项时间">
          <el-date-picker
            v-model="filterProjects.time"
            type="month"
            placeholder="请选择立项时间"
            format="YYYY-MM"
            value-format="YYYY-MM"
          />
        </el-form-item>
      </el-col>
      <el-col
        :span="4"
        :offset="1"
      >
        <el-form-item label="项目状态">
          <el-select
            v-model="currentlyState"
            @change="changeState"
          >
            <el-option
              v-for="item in stateList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col
        :span="5"
        style="margin-left: 40px"
      >
        <el-row justify="space-around">
          <el-button
            type="primary"
            :icon="Search"
            @click="queryProject"
          >查询
          </el-button>
          <el-button
            type="primary"
            :icon="DocumentCopy"
            @click="queryProject"
          >立项
          </el-button>
          <el-button
            type="primary"
            :icon="RefreshLeft"
            @click="listData(initialCondition)"
          >重置
          </el-button>
        </el-row>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="23">
        <el-row justify="space-between">
          <el-col :span="5">
            <div
              class="bg-white h-24"
              style="box-shadow: -7px 0 7px #e5e5e5"
            >
              <el-row
                style="height: 40%"
                align="middle"
              >
                <el-col :offset="2">
                  <el-text
                    style="font-family: 黑体;"
                  >项目总数
                  </el-text>
                </el-col>
              </el-row>
              <el-row
                style="height: 60%"
                align="middle"
              >
                <el-col :offset="2">
                  <span class="dataStyle">{{ screenData.totalProject }}</span>
                </el-col>
              </el-row>
            </div>
          </el-col>
          <el-col :span="5">
            <div
              class="bg-white h-24"
              style="box-shadow: -7px 0 7px #e5e5e5"
            >
              <el-row
                style="height: 40%"
                align="middle"
              >
                <el-col :offset="2">
                  <el-text
                    style="font-family: 黑体;"
                  >执行中项目
                  </el-text>
                </el-col>
              </el-row>
              <el-row
                style="height: 60%"
                align="middle"
              >
                <el-col :offset="2">
                  <span class="dataStyle">{{ screenData.unCompleteProject }}</span>
                </el-col>
              </el-row>
            </div>
          </el-col>
          <el-col :span="5">
            <div
              class="bg-white h-24"
              style="box-shadow: -7px 0 7px #e5e5e5"
            >
              <el-row
                style="height: 40%"
                align="middle"
              >
                <el-col :offset="2">
                  <el-text
                    style="font-family: 黑体;"
                  >已完成项目
                  </el-text>
                </el-col>
              </el-row>
              <el-row
                style="height: 60%"
                align="middle"
              >
                <el-col :offset="2">
                  <span class="dataStyle">{{ screenData.completeProject }}</span>
                </el-col>
              </el-row>
            </div>
          </el-col>
          <el-col :span="5">
            <div
              class="bg-white h-24"
              style="box-shadow: -7px 0 7px #e5e5e5"
            >
              <el-row
                style="height: 40%"
                align="middle"
              >
                <el-col :offset="2">
                  <el-text
                    style="font-family: 黑体;"
                  >项目总金额
                  </el-text>
                </el-col>
              </el-row>
              <el-row
                style="height: 60%"
                align="middle"
              >
                <el-col :offset="2">
                  <span class="dataStyle">{{ screenData.sum }}元</span>
                </el-col>
              </el-row>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <el-form>
      <el-row style="margin-top: 20px;">
        <el-col
          :span="23"
        >
          <el-table
            :data="projectListData"
            height="580"
            stripe
          >
            <el-table-column
              prop="code"
              label="项目编码"
              align="center"
            />
            <el-table-column
              prop="name"
              label="项目名称"
              align="center"
            />
            <el-table-column
              prop="principal"
              label="项目负责人"
              align="center"
            />
            <el-table-column
              prop="price"
              label="项目金额"
              align="center"
            />
            <el-table-column
              prop="CreatedAt"
              label="立项日期"
              align="center"
            />
            <el-table-column
              prop="state"
              label="状态"
              align="center"
            />
            <el-table-column
              label="项目操作"
              align="center"
            >
              <template #default="scope">
                <el-button
                  @click="projectEdit(scope.$index, scope.row)"
                >
                  详情
                </el-button>
                <el-button
                  type="danger"
                  @click="projectDelete(scope.$index, scope.row)"
                >
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </el-form>
    <el-row>
      <el-col
        :span="23"
        style="display: flex;justify-content: end"
      >
        <el-pagination
          :page-size="10"
          background
          layout="prev, pager, next"
          :total="listTotal"
          @change="changePage"
        />
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { DocumentCopy, RefreshLeft, Search } from '@element-plus/icons-vue'
import { getProjectList, projectDataScreen, deleteProject } from '@/api/project'
import { reactive, ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

defineOptions({
  name: 'ProjectList'
})
const screenData = reactive({})
const projectListData = reactive([])
const listTotal = ref(0)
const stateList = [
  { label: '立项', value: 1 },
  { label: '施工', value: 2 },
  { label: '收款', value: 3 },
  { label: '完成', value: 4 },
  { label: '失效', value: 5 },
]
const initialCondition = {
  pageInfo: {
    page: 1,
    pageSize: 10
  },
  name: '',
  time: '',
  state: 0
}
const filterProjects = reactive({
  pageInfo: {
    page: 1,
    pageSize: 10
  },
  name: '',
  time: '',
  state: 0
}
)

const currentlyState = ref('')
const changeState = (value) => {
  filterProjects.state = value
  stateList.forEach(item => {
    if (value === item.value) {
      currentlyState.value = item.label
    }
  })
}
const projectEdit = (index, row) => {
}
const projectDelete = (index, row) => {
  ElMessageBox.confirm(
    '确定要删除该项目吗?',
    '项目删除',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      deleteProject(row.code).then(res => {
        if (res.code === 0) {
          ElMessage({
            type: 'success',
            message: '删除成功',
          })
          listData(initialCondition)
          dataScreen()
        } else {
          ElMessage({
            type: 'error',
            message: res.msg,
          })
        }
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })
}
onMounted(() => {
  // 项目数据总览
  dataScreen()
  // 获取项目列表
  listData(initialCondition)
})
const listData = (condition) => {
  projectListData.length = 0
  getProjectList(condition).then(res => {
    if (res.code === 0 && res.data.total > 0) {
      const list = res.data.list
      list.forEach(item => {
        item.CreatedAt = formatDate(item.CreatedAt)
        item.state = projectState(item.state)
      })
      projectListData.push(...list)
      listTotal.value = res.data.total
    }
  })
}
const dataScreen = () => {
  projectDataScreen().then(res => {
    const obj = res.data
    Object.keys(obj).forEach(key => {
      screenData[key] = obj[key]
    })
  })
}
const formatDate = (dateString, locale = 'en-US', timezone = 'Asia/Shanghai') => {
  // 使用 Date 构造函数解析日期字符串
  const date = new Date(dateString)

  // 检查日期是否有效
  if (isNaN(date.getTime())) {
    throw new Error('Invalid date string')
  }

  // 使用 Date 对象的年份、月份和日期来构建新的日期字符串
  // 注意：JavaScript 中的月份是从 0 开始的，所以我们需要加 1
  const formattedDate = `${date.getFullYear()}-${('0' + (date.getMonth() + 1)).slice(-2)}-${('0' + date.getDate()).slice(-2)}`

  return formattedDate
}
const projectState = (state) => {
  const obj = {
    1: '立项',
    2: '施工',
    3: '收款',
    4: '完成',
    5: '失效'
  }
  return obj[state]
}
const queryProject = () => {
  listData(filterProjects)
}
const changePage = (value) => {
  console.log(value)
}
</script>

<style scoped lang="less">
.dataStyle {
  font-size: 25px;
  font-weight: 500;
}
</style>