forked from qiushanhe/dm-manage-web
dev-zcx
qsh
2 years ago
parent
9800001876
commit
155f9009fc
@ -0,0 +1,274 @@ |
|||||||
|
<template> |
||||||
|
<div class="app-container"> |
||||||
|
<!-- 搜索插件 --> |
||||||
|
<SearchForm v-show="showSearch" ref="SearchForm" :user-options="userOptions" :source-options="sourceOptions" @search="_getTableList" /> |
||||||
|
<el-row :gutter="10" class="mb8"> |
||||||
|
<el-col :span="1.5"> |
||||||
|
<el-button v-hasPermi="['zs:clue:add']" icon="el-icon-plus" type="primary" @click="handleAddandUpdate(undefined)">新增</el-button> |
||||||
|
<el-button v-hasPermi="['zs:clue:import']" icon="el-icon-upload" type="warning" @click="handleImport(false)">导入</el-button> |
||||||
|
<el-button v-hasPermi="['zs:clue:import']" icon="el-icon-upload" type="warning" @click="handleImport(true)">一点通导入</el-button> |
||||||
|
<el-button v-hasPermi="['zs:clue:export']" icon="el-icon-download" type="warning" @click="handleExport">导出</el-button> |
||||||
|
<el-button v-hasPermi="['zs:clue:edit']" icon="el-icon-edit" type="primary" :disabled="multiple" @click="handleBatChUpdate()">批量修改</el-button> |
||||||
|
<el-button type="primary" @click="handlePublicClue">公海</el-button> |
||||||
|
</el-col> |
||||||
|
<right-toolbar :show-search.sync="showSearch" :columns="columns" @queryTable="_getTableList" /> |
||||||
|
</el-row> |
||||||
|
<!-- 表格数据 --> |
||||||
|
<el-table v-loading="loading" :data="tableList" @select="handleSelectionChange"> |
||||||
|
<el-table-column type="selection" width="50" align="center" /> |
||||||
|
<template v-for="item in columns"> |
||||||
|
<el-table-column v-if="item.visible" :key="item.prop" :label="item.label" align="center" :width="item.width" :prop="item.prop" :show-overflow-tooltip="item.overflow" /> |
||||||
|
</template> |
||||||
|
<el-table-column label="意向状态" prop="intentionState" sortable fixed="right" min-width="100"> |
||||||
|
<template slot-scope="{ row }"> |
||||||
|
<el-tag effect="dark" style="border: none" :color="tagColorMap[row.intentionState]">{{ row.intentionState }}</el-tag> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column label="操作" fixed="right" align="center" min-width="200"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<el-button v-hasPermi="['zs:clue:edit']" type="text" @click.native.stop="handleAddandUpdate(scope.row)">编辑</el-button> |
||||||
|
<el-button v-if="scope.row.state" v-hasPermi="['zs:clue:sign']" type="text" style="color: #26a69a" @click.native.stop="handleSign(scope.row)">已登记</el-button> |
||||||
|
<el-button v-if="!scope.row.state" v-hasPermi="['zs:clue:sign']" type="text" @click.native.stop="handleSign(scope.row)">未登记</el-button> |
||||||
|
<el-button v-hasPermi="['zs:clue:remove']" type="text" icon="el-icon-delete" @click.native.stop="handleDelete(scope.row)">删除</el-button> |
||||||
|
<el-button v-if="!scope.row.state" v-hasPermi="['zs:clue:discard']" type="text" icon="el-icon-delete" @click.native.stop="handleDiscard(scope.row)">释放</el-button> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
</el-table> |
||||||
|
<pagination :total="total" :page.sync="searchForm.pageNum" :limit.sync="searchForm.pageSize" :page-sizes="[10, 20, 30, 50, 100]" @pagination="_getTableList" /> |
||||||
|
|
||||||
|
<!-- 新增、修改 --> |
||||||
|
<!-- <ClueForm v-if="dialog.addAndUpdateVisible" ref="addAndUpdateForm" :dialog-visible="dialog.addAndUpdateVisible" :options="options" @refreshDataList="_getTableList" /> --> |
||||||
|
<!-- 批量修改 --> |
||||||
|
<BatchUpdateDialog v-if="dialog.batchUpdateVisible" ref="batchUpdateDialogForm" :dialog-visible="dialog.batchUpdateVisible" :options="options" @refreshDataList="_getTableList" /> |
||||||
|
<!-- 公海 --> |
||||||
|
<PublicDialog v-if="dialog.publicVisible" ref="publicDialogForm" :dialog-visible="dialog.publicVisible" @refreshDataList="_getTableList" /> |
||||||
|
<!-- 上传 --> |
||||||
|
<UploadDialog v-if="dialog.uploadVisible" ref="uploadDialogForm" :dialog-visible="dialog.uploadVisible" @refreshDataList="_getTableList" /> |
||||||
|
<!-- 登记弹框 --> |
||||||
|
<SignFormDialog ref="signDialogForm" :clue-info="clueInfo" /> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<script> |
||||||
|
import SearchForm from './components/SearchForm.vue'; |
||||||
|
import BatchUpdateDialog from './components/BatchUpdateDialog.vue'; |
||||||
|
import PublicDialog from './components/PublicDialog.vue'; |
||||||
|
import UploadDialog from './components/UploadDialog.vue'; |
||||||
|
import SignFormDialog from '../sign/components/SignFormDialog.vue'; |
||||||
|
|
||||||
|
import { defaultColumns } from './columns.js'; |
||||||
|
import { getClueList, deleteClue, getClueCountBadge, discardClue, getSign } from '@/api/zs/clue'; |
||||||
|
import empApi from '@/api/system/employee'; |
||||||
|
|
||||||
|
export default { |
||||||
|
name: 'Clue', |
||||||
|
components: { |
||||||
|
SearchForm, BatchUpdateDialog, PublicDialog, UploadDialog, SignFormDialog |
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
// 遮罩层 |
||||||
|
loading: false, |
||||||
|
// 显示搜索条件 |
||||||
|
showSearch: true, |
||||||
|
searchForm: { |
||||||
|
pageNum: 1, |
||||||
|
pageSize: 10 |
||||||
|
}, |
||||||
|
tableList: [], |
||||||
|
total: 0, |
||||||
|
columns: [], |
||||||
|
ids: [], |
||||||
|
// 非单个禁用 |
||||||
|
single: true, |
||||||
|
// 非多个禁用 |
||||||
|
multiple: true, |
||||||
|
expireCount: 0, |
||||||
|
|
||||||
|
dialog: { |
||||||
|
batchUpdateVisible: false, |
||||||
|
publicVisible: false, |
||||||
|
uploadVisible: false, |
||||||
|
addAndUpdateVisible: false, |
||||||
|
signVisible: false |
||||||
|
}, |
||||||
|
userOptions2: [], |
||||||
|
userOptions: [], |
||||||
|
sourceOptions: [], |
||||||
|
tagColorMap: { |
||||||
|
A高意向: '#ff7043', |
||||||
|
B中意向: '#26a69a', |
||||||
|
C无意向: '#5c6bc0', |
||||||
|
D未知意向: '#ef5350', |
||||||
|
报名成功: '#ffa726', |
||||||
|
报名他校: '#afaeb0', |
||||||
|
无效线索: '#afaeb0' |
||||||
|
}, |
||||||
|
options: undefined, |
||||||
|
clueInfo: undefined |
||||||
|
}; |
||||||
|
}, |
||||||
|
created() { |
||||||
|
const str = localStorage.getItem(`${this.$route.name}-table-columns`); |
||||||
|
this.columns = str ? JSON.parse(str) : defaultColumns; |
||||||
|
this._getClueCountBadge(); |
||||||
|
this.getEmployee(); |
||||||
|
// 线索来源 |
||||||
|
this.getDicts('dm_source').then((response) => { |
||||||
|
this.sourceOptions = response.data; |
||||||
|
}); |
||||||
|
// 意向状态 |
||||||
|
this.getDicts('dm_intention_state').then((response) => { |
||||||
|
this.intentionOptions = response.data; |
||||||
|
}); |
||||||
|
this._getTableList(); |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
// 分页查询表格数据 |
||||||
|
_getTableList() { |
||||||
|
this.loading = true; |
||||||
|
const params = { ...this.searchForm }; |
||||||
|
getClueList(params).then((response) => { |
||||||
|
this.tableList = response.rows; |
||||||
|
this.total = response.total; |
||||||
|
this.loading = false; |
||||||
|
}); |
||||||
|
}, |
||||||
|
// 获取已过期线索数 |
||||||
|
async _getClueCountBadge() { |
||||||
|
const resp = await getClueCountBadge(); |
||||||
|
if (resp.code === 200) { |
||||||
|
this.expireCount = resp.data; |
||||||
|
} |
||||||
|
}, |
||||||
|
// 新增或修改 |
||||||
|
handleAddandUpdate(info) { |
||||||
|
this.$router.push('/zs/clue-form/index/' + (info ? info.clueId : 0)); |
||||||
|
}, |
||||||
|
// 批量修改 |
||||||
|
handleBatChUpdate() { |
||||||
|
this.options = { |
||||||
|
userOptions: this.userOptions |
||||||
|
}; |
||||||
|
this.getEmployee2(); |
||||||
|
this.dialog.batchUpdateVisible = true; |
||||||
|
const item = { |
||||||
|
clueIds: this.ids |
||||||
|
}; |
||||||
|
this.$nextTick(() => { |
||||||
|
this.$refs.batchUpdateDialogForm.init(item); |
||||||
|
}); |
||||||
|
}, |
||||||
|
// 多选框选中数据 |
||||||
|
handleSelectionChange(selection) { |
||||||
|
this.ids = selection.map((item) => item.clueId); |
||||||
|
this.single = selection.length !== 1; |
||||||
|
this.multiple = !selection.length; |
||||||
|
}, |
||||||
|
// 释放线索操作 |
||||||
|
handleDiscard(item) { |
||||||
|
discardClue(item).then((resp) => { |
||||||
|
if (resp && resp.code === 200) { |
||||||
|
this.$message.success('释放成功'); |
||||||
|
this._getTableList(); |
||||||
|
} |
||||||
|
}); |
||||||
|
}, |
||||||
|
// 删除 |
||||||
|
handleDelete(item) { |
||||||
|
this.$confirm('是否确认删除该条线索（“' + item.name + '/' + item.phone + '”）?', '警告', { |
||||||
|
confirmButtonText: '确定', |
||||||
|
cancelButtonText: '取消', |
||||||
|
type: 'warning' |
||||||
|
}) |
||||||
|
.then((res) => { |
||||||
|
deleteClue({ clueId: item.clueId }).then((resp) => { |
||||||
|
if (resp.code === 200) { |
||||||
|
this.$message.success('删除成功'); |
||||||
|
this._getTableList(); |
||||||
|
} |
||||||
|
}); |
||||||
|
}) |
||||||
|
.catch(function () { }); |
||||||
|
}, |
||||||
|
// 登记 |
||||||
|
// 导入 |
||||||
|
handleImport(ydtData) { |
||||||
|
this.dialog.uploadVisible = true; |
||||||
|
this.$nextTick(() => { |
||||||
|
this.$refs.uploadDialogForm.init(ydtData); |
||||||
|
}); |
||||||
|
}, |
||||||
|
/** 导出按钮操作 */ |
||||||
|
handleExport() { |
||||||
|
this.$confirm('是否确认导出所有学员信息项?', '警告', { |
||||||
|
confirmButtonText: '确定', |
||||||
|
cancelButtonText: '取消', |
||||||
|
type: 'warning' |
||||||
|
}).then(async () => { |
||||||
|
const tempForm = this.$refs.SearchForm?.searchForm || {}; |
||||||
|
this.download('zs/clue/export', tempForm, `线索信息_${new Date().getTime()}.xlsx`); |
||||||
|
}); |
||||||
|
}, |
||||||
|
// 公海按钮点击时间 |
||||||
|
handlePublicClue() { |
||||||
|
this.dialog.publicVisible = true; |
||||||
|
this.$nextTick(() => { |
||||||
|
this.$refs.publicDialogForm.init(); |
||||||
|
}); |
||||||
|
}, |
||||||
|
getEmployee() { |
||||||
|
empApi.getEmployee().then((resp) => { |
||||||
|
if (resp.code === 200) { |
||||||
|
this.userOptions = resp.data; |
||||||
|
} |
||||||
|
}); |
||||||
|
}, |
||||||
|
// 查询不能接收线索的员工 |
||||||
|
getEmployee2() { |
||||||
|
empApi.getEmployee().then((resp) => { |
||||||
|
if (resp.code === 200) { |
||||||
|
this.userOptions2 = resp.data; |
||||||
|
this.userOptions2 = this.userOptions2.filter((item) => { |
||||||
|
return item.accept; |
||||||
|
}); |
||||||
|
} |
||||||
|
}); |
||||||
|
}, |
||||||
|
// 登记成交 |
||||||
|
async handleSign(item) { |
||||||
|
// 根据clueId查询登记信息 |
||||||
|
let signInfo = {}; |
||||||
|
this.clueInfo = item; |
||||||
|
const resp = await getSign({ clueId: item.clueId }); |
||||||
|
if (resp.code == 200) { |
||||||
|
signInfo = { ...resp.data }; |
||||||
|
} |
||||||
|
this.$nextTick(() => { |
||||||
|
this.$refs.signDialogForm.init(signInfo); |
||||||
|
}); |
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
</script> |
||||||
|
<style scoped> |
||||||
|
.drawer-form__footer { |
||||||
|
border-top: 1px solid rgba(69, 74, 91, 0.1); |
||||||
|
position: absolute; |
||||||
|
bottom: 0; |
||||||
|
left: 0; |
||||||
|
right: 0; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
height: 50px; |
||||||
|
line-height: 50px; |
||||||
|
z-index: 2; |
||||||
|
background: #fff; |
||||||
|
} |
||||||
|
|
||||||
|
.footer_button { |
||||||
|
width: 49%; |
||||||
|
margin: auto; |
||||||
|
} |
||||||
|
</style> |
||||||
|
|
||||||
Loading…
Reference in new issue