莳松crm管理系统
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-crm-manage-web/src/views/Clue/Order/Comp/OrderList.vue

344 lines
9.2 KiB

<template>
<div>
<!-- 搜索工作栏 -->
<div>
<el-form
:model="searchForm"
ref="moreSearchRef"
inline
label-width="0"
style="display: inline"
>
<el-form-item style="margin-bottom: 10px">
<el-select
v-model="searchForm.signSchool"
placeholder="选择驾校"
filterable
clearable
@change="changeSchool"
>
<el-option
v-for="item in schoolOptions"
:key="item.schoolId"
:label="item.schoolName"
:value="item.schoolId"
/>
</el-select>
</el-form-item>
<el-form-item style="margin-bottom: 10px">
<el-select
v-model="searchForm.signPlace"
placeholder="选择场地"
filterable
clearable
:disabled="!searchForm.signSchool"
@change="changePlace"
>
<el-option
v-for="item in placeOptions"
:key="item.placeId"
:label="item.name"
:value="item.placeId"
/>
</el-select>
</el-form-item>
<el-form-item style="margin-bottom: 10px">
<el-select
v-model="searchForm.signClass"
:disabled="!searchForm.signPlace"
placeholder="选择班型"
filterable
clearable
>
<el-option
v-for="item in classOptions"
:key="item.typeId"
:label="item.typeName"
:value="item.typeId"
/>
</el-select>
</el-form-item>
</el-form>
<Search
v-if="!loading"
ref="searchRef"
:schema="allSchemas.searchSchema"
inlineBlock
labelWidth="0"
>
<template #actionMore>
<el-button @click="getTableList" v-hasPermi="['clue:order:search']"> 搜索 </el-button>
<el-button @click="resetQuery" v-hasPermi="['clue:order:reset']"> 重置 </el-button>
</template>
</Search>
</div>
<!-- 列表 -->
<SSTable
v-if="!loading"
class="mt-10px"
v-model:tableObject="tableObject"
:tableColumns="allSchemas.tableColumns"
@get-list="getTableList"
@get-checked-columns="getCheckedColumns"
>
<el-table-column
v-for="item in showColumns"
:key="item.field"
:prop="item.field"
:label="item.label"
min-width="120px"
>
<template #default="{ row }">
<div v-if="item.field == 'remark' || item.form?.component == 'Editor'">
<el-popover placement="top" width="500px" trigger="click" v-if="row[item.field]">
<template #reference>
<el-button type="primary" style="padding: 0" text>点击查看</el-button>
</template>
<div v-dompurify-html="row[item.field]"></div>
</el-popover>
</div>
<span v-else-if="item.form?.component == 'DatePicker'">
{{ formatDate(row[item.field]) }}
</span>
<span v-else>{{ row[item.field] }}</span>
</template>
</el-table-column>
<el-table-column label="操作" width="240px" fixed="right">
<template #default="scope">
<el-button
type="primary"
class="mr-10px"
link
style="padding: 0; margin-left: 0"
v-hasPermi="['clue:order:detail']"
@click="handleDetail(scope.row)"
>
详情
</el-button>
<el-button
type="primary"
class="mr-10px"
link
style="padding: 0; margin-left: 0"
v-hasPermi="['clue:order:after-sale']"
@click="sellAfter(scope.row)"
>
售后
</el-button>
<el-button
type="primary"
class="mr-10px"
link
style="padding: 0; margin-left: 0"
v-if="scope.row.isPayoff == '未结清'"
v-hasPermi="['clue:order:return']"
@click="feeBack(scope.row)"
>
回款
</el-button>
<el-button
type="primary"
class="mr-10px"
link
style="padding: 0; margin-left: 0"
v-hasPermi="['clue:order:add-fee']"
@click="handleAddFee(scope.row)"
>
添加支出
</el-button>
<el-button
type="primary"
class="mr-10px"
link
style="padding: 0; margin-left: 0"
v-hasPermi="['clue:pool:enroll']"
@click="cancelDeal(scope.row)"
>
取消登记
</el-button>
</template>
</el-table-column>
</SSTable>
<!-- 详情 -->
<DialogOrder ref="orderDetailDialog" />
<DialogFeeback ref="feedbackDialog" />
<DialogAfterSale ref="afterSaleDialog" />
<DialogExtraFee ref="extraFeeDialog" />
</div>
</template>
<script setup name="ClueOrderList">
import { getSimpleFieldList } from '@/api/clue/orderField'
import * as SignApi from '@/api/clue/sign'
import { getSimpleUserList as getUserOption, getAllUserList } from '@/api/system/user'
import { getPlaceList } from '@/api/school/place'
import { getClassTypeList } from '@/api/school/class'
import DialogOrder from './DialogOrder.vue'
import DialogFeeback from './DialogFeeback.vue'
import DialogAfterSale from './DialogAfterSale.vue'
import DialogExtraFee from './DialogExtraPay.vue'
import { removeNullField } from '@/utils'
import { formatDate } from '@/utils/formatTime'
const userOptions = ref([])
const allUserOptions = ref([])
onMounted(() => {
getOptions()
})
const message = useMessage() // 消息弹窗
const allSchemas = ref({})
const orderDetailDialog = ref()
const searchRef = ref()
const schoolOptions = ref([])
const allPlaceOptions = ref([])
const searchForm = ref({
signSchool: undefined,
signPlace: undefined,
signClass: undefined,
signProduct: undefined
})
const tableObject = ref({
tableList: [],
loading: false,
total: 1,
pageSize: 20,
pageNo: 1
})
const placeOptions = computed(() => {
return allPlaceOptions.value.filter((it) => it.schoolId == searchForm.value.signSchool)
})
function resetQuery() {
searchForm.value = {
signSchool: undefined,
signPlace: undefined,
signClass: undefined,
signProduct: undefined
}
searchRef.value.reset()
tableObject.value.pageNo = 1
getTableList()
}
// 查询
async function getTableList() {
// 查询
tableObject.value.loading = true
try {
const queryParams = await searchRef.value.getFormModel()
const params = {
...queryParams,
...searchForm.value,
pageNo: tableObject.value.pageNo,
pageSize: tableObject.value.pageSize
}
const data = await SignApi.getSignPage(removeNullField(params))
tableObject.value.tableList = data.list.map((it) => ({ ...it, ...it.diyParams }))
tableObject.value.total = data.total
} finally {
tableObject.value.loading = false
}
}
const loading = ref(true)
async function getCurdSchemas() {
loading.value = true
try {
const data = await getSimpleFieldList()
data.forEach((elem) => {
if (['createUser'].includes(elem.field)) {
elem.search.options = userOptions.value
} else if (['convertPeople', 'receiver'].includes(elem.field)) {
elem.search.options = allUserOptions.value
}
})
allSchemas.value = useCrudSchemas(data).allSchemas
} finally {
loading.value = false
nextTick(() => {
getTableList()
})
}
}
const showColumns = ref([])
// 初始化表格
function getCheckedColumns(list) {
showColumns.value = list && list.length ? list : allSchemas.value.tableColumns
}
// 详情
function handleDetail(row) {
orderDetailDialog.value.open(row.clueId, row.signId)
}
const feedbackDialog = ref()
const afterSaleDialog = ref()
// 售后
function sellAfter(row) {
afterSaleDialog.value.open(row.signId)
}
// 回款
function feeBack(row) {
feedbackDialog.value.open(row.signId)
}
const extraFeeDialog = ref()
function handleAddFee(row) {
extraFeeDialog.value.open(row.signId)
}
// 取消登记
async function cancelDeal(row) {
try {
// 二次确认
await message.confirm('是否确认取消登记该线索?')
// 发起删除
await SignApi.cancelDeal(row.signId)
message.success('取消登记成功!')
// 刷新列表
await getTableList()
} catch (err) {
console.log(err)
}
}
function changeSchool() {
searchForm.value.signPlace = undefined
searchForm.value.signClass = undefined
}
function changePlace() {
searchForm.value.signClass = undefined
getClassTypeOptions()
}
const classOptions = ref([])
async function getClassTypeOptions() {
const data = await getClassTypeList({ placeId: searchForm.value.signPlace, status: 0 })
classOptions.value = data
}
async function getOptions() {
// 驾校
getPlaceList({ placeStatus: 0, schoolStatus: 0, isSearchSchool: true }).then((data) => {
schoolOptions.value = data.schoolList
allPlaceOptions.value = data.placeList
})
userOptions.value = await getUserOption()
allUserOptions.value = await getAllUserList()
getCurdSchemas()
}
</script>
<style lang="scss" scoped></style>