huasan-manage/src/views/project-management/index.vue

<template>
  <div>
    <el-card class="content">
      <!-- 标题区域 -->
      <el-row class="card_title">项目管理</el-row>

      <!-- 筛选区域 -->
      <el-row :gutter="25" class="card_search">
        <el-col :span="4">
          姓名:
          <el-input
            style="width: 180px"
            placeholder="请输入姓名"
            clearable
            v-model="searchName"
          ></el-input>
        </el-col>

        <el-col :span="4">
          单位名称:
          <el-input
            style="width: 150px"
            placeholder="请输入单位名称"
            clearable
            v-model="searchAddress"
          ></el-input>
        </el-col>

        <el-col :span="4">
          所属行业:
          <el-select
            style="width: 150px"
            clearable
            v-model="searchIndustry"
            placeholder="请选择所属行业"
          >
            <el-option
              v-for="(item, index) in industryOptions"
              :key="index"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-col>

        <el-col :span="4">
          状态:
          <el-select
            style="width: 150px"
            clearable
            v-model="searchType"
            placeholder="请选择状态"
          >
            <el-option
              v-for="(item, index) in typeOptions"
              :key="index"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-col>

        <el-col :span="4">
          提交时间:
          <el-date-picker
            style="width: 150px"
            type="date"
            placeholder="请选择提交时间"
            value-format="YYYY-MM-DD"
            v-model="searchTime"
          />
        </el-col>

        <el-col :span="4">
          <el-button type="primary" @click="getData">
            <el-icon><Search /></el-icon>
            <span> 查询</span>
          </el-button>

          <el-button type="success" @click="handleReset">
            <el-icon><Refresh /></el-icon>
            <span> 重置</span>
          </el-button>
        </el-col>
      </el-row>

      <!-- 导出表单按钮区域 -->
      <el-row class="card_button">
        <el-button type="primary" @click="hanleExportForm">
          <el-icon><Download /></el-icon>
          <span> 导出表单</span>
        </el-button>
      </el-row>

      <!-- 表格区域 -->
      <el-table
        stripe
        height="481"
        ref="multipleTable"
        :data="tableData"
        style="width: 100%"
        :header-cell-style="{ backgroundColor: '#F0F3F7' }"
        @select="handleChooseList"
        @select-all="handleChooseList"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column width="100" align="center" prop="name" label="姓名" />
        <el-table-column
          width="150"
          align="center"
          prop="phone"
          label="手机号码"
        />
        <el-table-column
          width="200"
          align="center"
          show-overflow-tooltip
          prop="company"
          label="单位名称"
        />
        <el-table-column
          width="200"
          align="center"
          show-overflow-tooltip
          prop="customerName"
          label="客户名称"
        />
        <el-table-column
          width="150"
          align="center"
          show-overflow-tooltip
          prop="entryName"
          label="项目名称"
        />
        <el-table-column
          width="120"
          align="center"
          show-overflow-tooltip
          prop="projectAmount"
          label="项目金额"
        />
        <el-table-column
          width="110"
          align="center"
          prop="tenderTime"
          label="预计投标时间"
        />
        <el-table-column
          width="100"
          align="center"
          prop="trade"
          label="所属行业"
        />

        <el-table-column width="200" align="center" label="产品类型">
          <template #default="{ row }">
            <el-tag
              style="margin: 0 5px 5px 0"
              v-for="(item, index) in row.product.split(',')"
              :key="index"
            >
              {{ item }}
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column width="80" align="center" label="状态">
          <template #default="{ row }">
            <div class="blue" v-if="row.status == 1">进行中</div>
            <div class="red" v-else>已关闭</div>
          </template>
        </el-table-column>
        <el-table-column
          width="200"
          align="center"
          show-overflow-tooltip
          prop="content"
          label="项目基本情况"
        />
        <el-table-column
          width="200"
          align="center"
          prop="reportingTime"
          label="提交时间"
        />
        <el-table-column fixed="right" width="250" align="center" label="操作">
          <template #default="{ row }">
            <el-button type="success" plain @click="handleCheckDetail(row)">
              详情
            </el-button>
            <el-button
              :disabled="row.status == 0"
              type="warning"
              plain
              @click="handleClose(row)"
            >
              关闭
            </el-button>
            <el-button
              v-if="store.getters.userInfo.adminType == 1"
              type="danger"
              plain
              @click="handleDelete(row)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页器区域 -->
      <el-row class="card_pagination">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[8, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-row>
    </el-card>

    <!-- 详情弹窗区域 -->
    <el-dialog
      v-model="dialogVisible"
      title="详情"
      width="40%"
      top="5vh"
      :close-on-click-modal="false"
    >
      <div class="dialog_box">
        <div class="dialog_item">
          <span>姓名：</span>
          {{ dialogInfo.name }}
        </div>
        <div class="dialog_item">
          <span>手机号码：</span>
          {{ dialogInfo.phone }}
        </div>
        <div class="dialog_item">
          <span>单位名称：</span>
          {{ dialogInfo.company }}
        </div>
        <div class="dialog_item">
          <span>客户名称：</span>
          {{ dialogInfo.customerName }}
        </div>
        <div class="dialog_item">
          <span>项目名称：</span>
          {{ dialogInfo.entryName }}
        </div>
        <div class="dialog_item">
          <span>预计投标时间：</span>
          {{ dialogInfo.tenderTime }}
        </div>
        <div class="dialog_item">
          <span>所属行业：</span>
          {{ dialogInfo.trade }}
        </div>
        <div class="dialog_item">
          <span>产品类型：</span>
          <el-tag
            style="margin: 0 5px 5px 0"
            v-for="(item, index) in dialogInfo.product.split(',')"
            :key="index"
          >
            {{ item }}
          </el-tag>
        </div>
        <div class="dialog_item">
          <span>状态：</span>
          <span class="blue" v-if="dialogInfo.status == 1">进行中</span>
          <span class="red" v-else>已关闭</span>
        </div>
        <div class="dialog_item">
          <span>提交时间：</span>
          {{ dialogInfo.reportingTime }}
        </div>
        <div class="dialog_item">
          <span>项目基本情况：</span>
          <div>
            {{ dialogInfo.content }}
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { useStore } from 'vuex'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  getProjectList,
  deleteProjectList,
  closeProjectList
} from '@/api/project'

onMounted(() => {
  getData()
})

// 所属行业选择框数组
const industryOptions = [
  '政府',
  '教育',
  '医疗',
  '企业',
  '公检法',
  '交通',
  '分销&SMB',
  '其他'
]

// 状态选择框数组
const typeOptions = [
  {
    label: '进行中',
    value: 1
  },
  {
    label: '已关闭',
    value: 0
  }
]

// 获取项目管理列表
const getData = async () => {
  const res = await getProjectList({
    name: searchName.value,
    company: searchAddress.value,
    trade: searchIndustry.value,
    status: searchType.value,
    reportingTime: searchTime.value,
    currPage: currentPage.value,
    pageSize: pageSize.value
  })
  // console.log(res)
  tableData.value = res.list
  total.value = res.totalCount
  currentPage.value = res.currPage
}

// 筛选区域绑定数据
const searchName = ref('')
const searchAddress = ref('')
const searchIndustry = ref('')
const searchType = ref('')
const searchTime = ref('')
// 表单元素DOM标识
const multipleTable = ref(null)
// 仓库
const store = useStore()
// 勾选的数据id
const downIds = ref([])
// 控制详情弹窗显示隐藏
const dialogVisible = ref(false)
// 控制详情弹窗数据
const dialogInfo = ref({})
// 一共多少条
const total = ref(0)
// 分页器当前页
const currentPage = ref(1)
// 每页条数
const pageSize = ref(8)
// 表格数据
const tableData = ref([])

// 点击勾选框回调
const handleChooseList = (list) => {
  downIds.value = []
  if (list.length !== 0) {
    list.forEach((item) => {
      downIds.value.push(item.id)
    })
  }
}
// 导出表单按钮回调
const hanleExportForm = () => {
  const id = downIds.value.join(',')
  ElMessageBox.confirm('确定导出表单吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      window.location.href = `/reporting/informationReporting/download?name=${searchName.value}&trade=${searchIndustry.value}&company=${searchAddress.value}&reportingTime=${searchTime.value}&status=${searchType.value}&ids=${id}`
      multipleTable.value.clearSelection()
    })
    .catch(() => {
      ElMessage.info('取消')
      multipleTable.value.clearSelection()
    })
  downIds.value = []
}
// 点击详情按钮回调
const handleCheckDetail = (row) => {
  dialogInfo.value = {}
  dialogVisible.value = true
  dialogInfo.value = row
}
// 点击关闭按钮回调
const handleClose = (row) => {
  ElMessageBox.confirm(`确定关闭 ${row.entryName} 吗？`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      const res = await closeProjectList({
        name: store.getters.userInfo.name,
        id: store.getters.userInfo.id,
        itemId: row.id
      })
      // console.log(res)
      if (res == null) {
        ElMessage.success('关闭成功')
        getData()
      }
    })
    .catch(() => {
      ElMessage.info('已取消')
    })
}
// 点击删除按钮回调
const handleDelete = (row) => {
  ElMessageBox.confirm(`确定删除 ${row.entryName} 吗？`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      const res = await deleteProjectList({
        name: store.getters.userInfo.name,
        id: store.getters.userInfo.id,
        ids: [row.id]
      })
      // console.log(res)
      if (res == null) {
        ElMessage.success('删除成功')
        getData()
      }
    })
    .catch(() => {
      ElMessage.info('已取消')
    })
}
// 改变每页条数回调
const handleSizeChange = (val) => {
  pageSize.value = val
  getData()
}
// 改变当前页回调
const handleCurrentChange = (val) => {
  currentPage.value = val
  getData()
}
// 重置按钮回调
const handleReset = () => {
  searchName.value = ''
  searchAddress.value = ''
  searchIndustry.value = ''
  searchType.value = ''
  searchTime.value = ''
  getData()
}
</script>

<style lang="scss" scoped>
.content {
  width: 1650px;
  height: 782px;

  ::v-deep .el-card__body {
    padding: 0 27px;
  }

  .card_title {
    line-height: 58px;
    font-size: 17px;
    font-weight: bold;
    border-bottom: 2px solid #d9d9d9;
  }
  .card_search {
    line-height: 85px;
    font-size: 13px;
    font-weight: bold;
  }
  .card_button {
    height: 53px;
  }

  .blue {
    color: #1e7dfb;
  }

  .red {
    color: #f56c6c;
  }

  .card_pagination {
    float: right;
    line-height: 96px;
  }
}

.dialog_box {
  height: 630px;
  .dialog_item {
    margin-bottom: 10px;
    height: 35px;
    color: #4d4d4d;
    font-size: 15px;
    .blue {
      color: #1e7dfb;
    }

    .red {
      color: #f56c6c;
    }
    span {
      font-weight: bold;
    }

    div {
      height: 160px;
      margin-top: 10px;
      overflow-y: auto;
    }
  }
}

::v-deep .el-button--primary {
  background-color: #0061ff;
}

::v-deep .el-dialog__header {
  margin: 0;
  font-weight: bold;
  background-color: #edf1f5;
}

::v-deep
  .el-table--striped
  .el-table__body
  tr.el-table__row--striped.el-table__row--striped.el-table__row--striped
  td {
  background-color: #f0f3f7;
}
</style>