题库维护。刷题软件数据后台
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 
ss-tiku-manage-web/src/views/UAVClue/CluePool/index.vue

205 lines
6.3 KiB

<template>
<div>
<el-form :model="searchForm" inline @submit.prevent>
<el-form-item>
<el-input v-model="searchForm.name" placeholder="输入姓名" @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item>
<el-input v-model="searchForm.phone" placeholder="输入手机号" @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item>
<el-input
v-model="searchForm.city"
placeholder="输入城市或地址"
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleQuery"> 搜索 </el-button>
</el-form-item>
</el-form>
<el-table
v-loading="loading"
:data="tableList"
highlight-current-row
max-height="calc(100vh - 320px)"
>
<el-table-column type="index" width="55" align="center" />
<el-table-column label="姓名" prop="name" />
<el-table-column label="手机号" prop="phone" />
<el-table-column label="城市" prop="city" />
<el-table-column label="意向机构" prop="schoolName" />
<el-table-column label="咨询类型" prop="typeName" />
<el-table-column label="咨询日期" prop="createTime" />
<el-table-column label="预期开课时间" prop="studyTime" :formatter="dateFormatter" />
<el-table-column label="诉求" prop="otherRequirement" />
<el-table-column label="客服备注" prop="remark" />
<el-table-column label="报名状态" prop="status">
<template #default="{ row }">
<el-tag v-if="row.status == 1" type="primary">未报名</el-tag>
<el-tag v-else-if="row.status == 2" type="success">报名成功</el-tag>
<el-tag v-else-if="row.status == 3" type="info">已失效</el-tag>
</template>
</el-table-column>
<!-- <el-table-column label="绑定机构" prop="bindSchoolName" /> -->
<el-table-column label="操作" align="center" width="140">
<template #default="{ row }">
<el-button
type="primary"
link
@click="handleEdit(row)"
v-hasPermi="['UAVClue:CluePool:edit']"
>
修改
</el-button>
</template>
</el-table-column>
</el-table>
<pagination
style="margin-bottom: 0"
v-show="total > 0"
:total="total"
v-model:page="searchForm.pageNo"
v-model:limit="searchForm.pageSize"
@pagination="getList"
/>
<Dialog v-model="showDialog" title="修改线索" style="width: 800px">
<el-form ref="dialogFormRef" :model="form" :rules="rules" label-width="100px">
<el-row>
<el-col :span="12">
<el-form-item label="姓名" prop="name">
<el-input v-model="form.name" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="手机号" prop="phone">
<el-input v-model="form.phone" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="城市" prop="city">
<el-input v-model="form.city" placeholder="请输入城市或地址" />
</el-form-item>
</el-col>
<el-col :span="12" :offset="0">
<el-form-item label="咨询类型" prop="typeName">
<el-input v-model="form.typeName" placeholder="请输入" clearable />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="意向机构" prop="schoolName">
<el-input v-model="form.schoolName" placeholder="请输入" clearable />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24" :offset="0">
<el-form-item label="诉求" prop="need">
<el-input type="textarea" v-model="form.need" placeholder="请输入诉求" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12" :offset="0">
<el-form-item label="报名状态" prop="status">
<el-radio-group v-model="form.status">
<el-radio :label="1" :value="1">未报名</el-radio>
<el-radio :label="2" :value="2">已报名</el-radio>
<el-radio :label="3" :value="3">已失效</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24" :offset="0">
<el-form-item label="备注" prop="remark">
<el-input
type="textarea"
v-model="form.remark"
placeholder="请输入备注"
:autosize="{ minRows: 5, maxRows: 10 }"
/>
</el-form-item>
</el-col>
</el-row>
</el-form>
<template #footer>
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="showDialog = false">取 消</el-button>
</template>
</Dialog>
</div>
</template>
<script setup name="CluePool">
import * as api from '@/api/uav/clue'
import { removeNullField } from '@/utils'
import { dateFormatter } from '@/utils/formatTime'
const loading = ref(false)
const total = ref(0)
const tableList = ref([])
const searchForm = ref({
name: '',
phone: '',
city: '',
pageNo: 1,
pageSize: 50
})
onMounted(() => {
handleQuery()
})
function handleQuery() {
searchForm.value.pageNo = 1
getList()
}
function getList() {
loading.value = true
try {
api.searchClue(removeNullField(searchForm.value)).then((data) => {
tableList.value = data.list
total.value = data.total
})
} finally {
loading.value = false
}
}
const form = ref({})
const showDialog = ref(false)
const rules = {
name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
phone: [{ required: true, message: '请输入手机号', trigger: 'blur' }]
}
const dialogFormRef = ref()
function handleEdit(row) {
form.value = row
showDialog.value = true
}
const submitForm = async () => {
if (!dialogFormRef.value) return
const valid = await dialogFormRef.value.validate()
if (!valid) return
message.success('修改成功')
getList()
showDialog.value = false
}
</script>
<style lang="scss" scoped></style>