228 lines
8.8 KiB
Vue
228 lines
8.8 KiB
Vue
<template>
|
|
<div class="page-card manager-exec-intent">
|
|
<div class="breadcrumb">首页 / 执行意向</div>
|
|
|
|
<!-- ========== 筛选区 ========== -->
|
|
<el-form inline :model="q" class="filter-form">
|
|
<el-form-item label="项目编号"><el-input v-model="q.projectNo" placeholder="输入项目编号" clearable /></el-form-item>
|
|
<el-form-item label="项目名称"><el-input v-model="q.projectName" placeholder="输入项目名称" clearable /></el-form-item>
|
|
<el-form-item label="姓名"><el-input v-model="q.name" placeholder="输入姓名" clearable /></el-form-item>
|
|
<el-form-item label="工作单位"><el-input v-model="q.workUnit" placeholder="输入工作单位" clearable /></el-form-item>
|
|
<el-form-item label="手机号"><el-input v-model="q.phone" placeholder="输入手机号" clearable /></el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" @click="load">查询</el-button>
|
|
<el-button @click="reset">重置</el-button>
|
|
<el-button type="success" @click="doExport">导出</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
|
|
<!-- ========== 表格 ========== -->
|
|
<GrTable :data="rows" v-loading="loading" stripe border
|
|
:main-cols="['projectNo', 'projectName']"
|
|
>
|
|
<el-table-column type="index" label="#" width="50" />
|
|
<el-table-column prop="projectNo" label="意向项目编号" width="140" />
|
|
<el-table-column prop="projectName" label="意向项目名称" min-width="180" show-overflow-tooltip />
|
|
<el-table-column prop="name" label="姓名" width="100" />
|
|
<el-table-column prop="workUnit" label="工作单位" min-width="180" show-overflow-tooltip />
|
|
<el-table-column prop="department" label="部门" width="120" />
|
|
<el-table-column prop="position" label="职务" width="100" />
|
|
<el-table-column prop="phone" label="手机号" width="130" />
|
|
<el-table-column label="账号状态" width="100" align="center">
|
|
<template #default="{ row }">
|
|
<el-tag :type="row.userId ? 'success' : 'warning'">{{ row.userId ? '存在' : '不存在' }}</el-tag>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column v-if="false" label="审核状态" width="100" align="center">
|
|
<template #default="{ row }">
|
|
<el-tag :type="statusTagType(row.intentStatus)">{{ row.intentStatus || '待审核' }}</el-tag>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="createTime" label="创建时间" width="170" />
|
|
<el-table-column v-if="false" label="操作" width="220" align="center" fixed="right">
|
|
<template #default="{ row }">
|
|
<el-link :underline="false" v-if="row.intentStatus !== '已通过'" type="primary" @click="changeStatus(row, '已通过')">通过</el-link>
|
|
<el-link :underline="false" v-if="row.intentStatus !== '已拒绝'" type="danger" @click="changeStatus(row, '已拒绝')">拒绝</el-link>
|
|
<el-link :underline="false" v-if="row.intentStatus !== '待审核'" type="warning" @click="changeStatus(row, '待审核')">重置</el-link>
|
|
<el-link :underline="false" type="danger" @click="removeOne(row)">删除</el-link>
|
|
</template>
|
|
</el-table-column>
|
|
</GrTable>
|
|
<div class="pager">
|
|
<el-pagination v-model:current-page="page.pageNum" v-model:page-size="page.pageSize" :total="page.total" :page-sizes="[10,20,50]" layout="total, sizes, prev, pager, next, jumper" @current-change="load" @size-change="load" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, reactive, onMounted } from 'vue'
|
|
import GrTable from '@/components/GrTable.vue'
|
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
|
import {
|
|
listPublicityExecutionIntent,
|
|
updatePublicityExecutionIntent,
|
|
deletePublicityExecutionIntent,
|
|
exportPublicityExecutionIntent
|
|
} from '@/api/public'
|
|
|
|
const q = ref({ projectNo: '', projectName: '', name: '', workUnit: '', phone: '' })
|
|
const rows = ref([])
|
|
const loading = ref(false)
|
|
const page = reactive({ pageNum: 1, pageSize: 20, total: 0 })
|
|
|
|
async function load() {
|
|
loading.value = true
|
|
try {
|
|
const { data } = await listPublicityExecutionIntent({ ...q.value, pageNum: page.pageNum, pageSize: page.pageSize })
|
|
rows.value = data?.rows || []
|
|
page.total = data?.total || 0
|
|
} catch {
|
|
rows.value = []; page.total = 0
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
function reset() {
|
|
q.value = { projectNo: '', projectName: '', name: '', workUnit: '', phone: '' }
|
|
page.pageNum = 1
|
|
load()
|
|
}
|
|
|
|
function statusTagType(s) {
|
|
if (s === '已通过') return 'success'
|
|
if (s === '已拒绝') return 'danger'
|
|
return 'warning'
|
|
}
|
|
|
|
async function changeStatus(row, status) {
|
|
try {
|
|
await updatePublicityExecutionIntent({ intentId: row.intentId, intentStatus: status }, { __silentError: true })
|
|
ElMessage.success(`已${status === '已通过' ? '通过' : status === '已拒绝' ? '拒绝' : '重置'}`)
|
|
load()
|
|
} catch (e) {
|
|
ElMessage.error(e?.msg || '状态变更失败')
|
|
}
|
|
}
|
|
|
|
async function removeOne(row) {
|
|
try {
|
|
await ElMessageBox.confirm(`确认删除 ${row.name} 的执行意向?`, '提示', { type: 'warning' })
|
|
} catch { return }
|
|
try {
|
|
await deletePublicityExecutionIntent([row.intentId])
|
|
ElMessage.success('已删除')
|
|
load()
|
|
} catch (e) {
|
|
ElMessage.error(e?.msg || '删除失败')
|
|
}
|
|
}
|
|
|
|
// 后端导出 .xlsx (按当前筛选条件全量下载)
|
|
async function doExport() {
|
|
try {
|
|
const res = await exportPublicityExecutionIntent({ ...q.value })
|
|
const blob = new Blob([res.data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' })
|
|
const url = URL.createObjectURL(blob)
|
|
const a = document.createElement('a')
|
|
a.href = url
|
|
a.download = `执行意向_${new Date().toISOString().slice(0, 10)}.xlsx`
|
|
document.body.appendChild(a); a.click(); document.body.removeChild(a)
|
|
URL.revokeObjectURL(url)
|
|
ElMessage.success('导出成功')
|
|
} catch (e) {
|
|
ElMessage.error(e?.msg || e?.message || '导出失败')
|
|
}
|
|
}
|
|
|
|
onMounted(load)
|
|
</script>
|
|
|
|
<style scoped>
|
|
.manager-exec-intent { padding: 16px; }
|
|
.breadcrumb { font-size: 13px; color: #8c8c8c; margin-bottom: 12px; }
|
|
.pager { display: flex; justify-content: flex-end; align-items: center; margin-top: 12px; }
|
|
|
|
/* ========================================
|
|
移动端适配 (≤768px)
|
|
- 卡片 padding 收窄
|
|
- 工具栏横向滚动 (6 个按钮铺不下, 用 overflow-x)
|
|
- filter-form: 保持 label 左 + input 右横向布局
|
|
- 表格字号收紧
|
|
======================================== */
|
|
@media (max-width: 768px) {
|
|
/* 卡片 padding */
|
|
.page-card { padding: 12px !important; border-radius: 4px !important; }
|
|
.breadcrumb { font-size: 12px !important; margin-bottom: 8px !important; }
|
|
|
|
/* 工具栏: 横向滚动 (按钮多时不换行) */
|
|
.toolbar {
|
|
flex-wrap: nowrap !important;
|
|
overflow-x: auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
padding-bottom: 6px;
|
|
margin-bottom: 8px !important;
|
|
scrollbar-width: thin;
|
|
}
|
|
.toolbar::-webkit-scrollbar { height: 4px; }
|
|
.toolbar::-webkit-scrollbar-thumb { background: var(--brand-slate-200); border-radius: 2px; }
|
|
.toolbar :deep(.action-btn),
|
|
.toolbar :deep(.el-button) {
|
|
flex-shrink: 0;
|
|
font-size: 12px !important;
|
|
padding: 0 10px !important;
|
|
height: 30px !important;
|
|
}
|
|
|
|
/* filter-form: label 与输入框横向 (label 左, input 右) */
|
|
.filter-form {
|
|
display: flex !important;
|
|
flex-direction: column !important;
|
|
align-items: stretch !important;
|
|
gap: 10px !important;
|
|
}
|
|
.filter-form :deep(.el-form-item) {
|
|
display: flex !important;
|
|
align-items: center !important;
|
|
margin-right: 0 !important;
|
|
margin-bottom: 0 !important;
|
|
}
|
|
.filter-form :deep(.el-form-item__label) {
|
|
float: none !important;
|
|
width: auto !important;
|
|
min-width: 80px !important;
|
|
text-align: right !important;
|
|
padding: 0 8px 0 0 !important;
|
|
font-size: 13px !important;
|
|
color: var(--el-text-color-regular) !important;
|
|
line-height: 32px !important;
|
|
height: 32px !important;
|
|
}
|
|
.filter-form :deep(.el-form-item__content) {
|
|
margin-left: 0 !important;
|
|
line-height: 32px !important;
|
|
flex: 1 !important;
|
|
min-width: 0 !important;
|
|
}
|
|
|
|
/* 强制所有控件全宽, 覆盖 inline 260px / 140px / 120px */
|
|
.filter-form :deep(.el-select),
|
|
.filter-form :deep(.el-input),
|
|
.filter-form :deep(.el-date-editor),
|
|
.filter-form :deep(.el-button),
|
|
.filter-form :deep(.el-cascader) {
|
|
width: 100% !important;
|
|
min-width: 0 !important;
|
|
margin-left: 0 !important;
|
|
margin-right: 0 !important;
|
|
display: block !important;
|
|
}
|
|
.filter-form :deep(.el-button + .el-button) {
|
|
margin-top: 8px !important;
|
|
}
|
|
|
|
/* 表格字号收紧 */
|
|
:deep(.el-table) { font-size: 12px !important; }
|
|
}
|
|
</style>
|