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