salary
qsh
5 months ago
parent
013a93e668
commit
44e45349c2
@ -0,0 +1,21 @@ |
||||
import request from '@/config/axios' |
||||
|
||||
// 查询（精简)列表
|
||||
export const getDeliveryList = async (params) => { |
||||
return await request.get({ url: '/admin-api/crm/sign-send/list', params }) |
||||
} |
||||
|
||||
// 查询（精简)列表
|
||||
export const getDeliveryPage = async (params) => { |
||||
return await request.get({ url: '/admin-api/crm/sign-send/page', params }) |
||||
} |
||||
|
||||
// 新增
|
||||
export const createDelivery = async (data) => { |
||||
return await request.post({ url: '/admin-api/crm/sign-send/create', data }) |
||||
} |
||||
|
||||
// 查询详情
|
||||
export const getDeliveryDetail = async (params) => { |
||||
return await request.get({ url: '/admin-api/crm/sign-send/get', params }) |
||||
} |
||||
@ -0,0 +1,175 @@ |
||||
<template> |
||||
<div> |
||||
<el-form :model="searchForm" label-width="0" inline> |
||||
<el-form-item> |
||||
<el-input v-model="searchForm.signId" placeholder="成交单号" clearable /> |
||||
</el-form-item> |
||||
<el-form-item> |
||||
<el-input v-model="searchForm.name" placeholder="线索名称" clearable /> |
||||
</el-form-item> |
||||
<el-form-item> |
||||
<el-select v-model="searchForm.signUser" placeholder="登记人" clearable filterable> |
||||
<el-option |
||||
v-for="item in userOptions" |
||||
:key="item.id" |
||||
:label="item.nickname" |
||||
:value="item.id" |
||||
/> |
||||
</el-select> |
||||
</el-form-item> |
||||
<el-form-item> |
||||
<el-date-picker |
||||
v-model="searchForm.dealDate" |
||||
type="daterange" |
||||
format="YYYY-MM-DD" |
||||
value-format="YYYY-MM-DD" |
||||
range-separator="-" |
||||
start-placeholder="登记日期" |
||||
end-placeholder="登记日期" |
||||
/> |
||||
</el-form-item> |
||||
<el-form-item> |
||||
<el-select |
||||
v-model="searchForm.signProduct" |
||||
placeholder="选择成交产品" |
||||
filterable |
||||
@change="searchForm.specsId = undefined" |
||||
> |
||||
<el-option |
||||
v-for="item in prodOptions" |
||||
:key="item.productId" |
||||
:label="item.productName" |
||||
:value="item.productId" |
||||
/> |
||||
</el-select> |
||||
</el-form-item> |
||||
<el-form-item> |
||||
<el-select |
||||
v-model="searchForm.specsId" |
||||
placeholder="选择规格" |
||||
filterable |
||||
:disabled="!searchForm.signProduct" |
||||
> |
||||
<el-option |
||||
v-for="item in specsOptions(searchForm.signProduct)" |
||||
:key="item.specsId" |
||||
:label="item.specsName" |
||||
:value="item.specsId" |
||||
/> |
||||
</el-select> |
||||
</el-form-item> |
||||
<el-form-item> |
||||
<el-button @click="handleSearch">查询</el-button> |
||||
<el-button @click="handleReset">重置</el-button> |
||||
</el-form-item> |
||||
</el-form> |
||||
|
||||
<el-table v-loading="loading" :data="tableList" border> |
||||
<el-table-column prop="signId" label="成交单号" min-width="150px" /> |
||||
<el-table-column prop="name" label="线索名称" min-width="200px" /> |
||||
<el-table-column prop="phone" label="联系方式" min-width="150px" /> |
||||
<el-table-column prop="signUserName" label="登记人" min-width="90" /> |
||||
<el-table-column prop="dealDate" label="登记时间" min-width="150px" /> |
||||
<el-table-column prop="" label="成交产品" min-width="150px" /> |
||||
<el-table-column prop="" label="产品规格" min-width="150px" /> |
||||
<el-table-column prop="" label="发货时间" min-width="150px" /> |
||||
<el-table-column prop="" label="发货仓库" min-width="100px" /> |
||||
<el-table-column prop="" label="备注" min-width="100px" /> |
||||
<el-table-column label="操作" width="150px" fixed="right"> |
||||
<template #default="{ row }"> |
||||
<el-button type="primary" style="padding: 0" text @click="handleDetail(row.id)"> |
||||
详情 |
||||
</el-button> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
<Pagination |
||||
v-model:limit="searchForm.pageSize" |
||||
v-model:page="searchForm.pageNo" |
||||
:total="total" |
||||
@pagination="getList" |
||||
/> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup name="Delivery"> |
||||
import { getSimpleUserList as getUserOption } from '@/api/system/user' |
||||
import { getSimpleProductList } from '@/api/mall/product' |
||||
// const message = useMessage() // 消息弹窗 |
||||
|
||||
const searchForm = ref({ |
||||
signId: undefined, |
||||
name: undefined, |
||||
dealDate: [], |
||||
signUser: undefined, |
||||
pageNo: 1, |
||||
pageSize: 20 |
||||
}) |
||||
|
||||
const userOptions = ref([]) |
||||
|
||||
const tableList = ref([]) |
||||
const total = ref(0) |
||||
|
||||
function handleSearch() { |
||||
searchForm.value.pageNo = 1 |
||||
getList() |
||||
} |
||||
|
||||
function handleReset() { |
||||
searchForm.value = { |
||||
signId: undefined, |
||||
name: undefined, |
||||
dealDate: [], |
||||
signUser: undefined, |
||||
pageNo: 1, |
||||
pageSize: 20 |
||||
} |
||||
} |
||||
|
||||
const loading = ref(false) |
||||
async function getList() { |
||||
loading.value = true |
||||
try { |
||||
tableList.value = [] |
||||
// const data = await FeebackApi.getPaymentPage(searchForm.value) |
||||
// tableList.value = data.list |
||||
// total.value = data.total |
||||
} finally { |
||||
loading.value = false |
||||
} |
||||
} |
||||
|
||||
function handleDetail(id) { |
||||
console.log(id) |
||||
} |
||||
|
||||
const prodOptions = ref([]) |
||||
|
||||
const specsOptions = computed({ |
||||
get() { |
||||
return (prodId) => { |
||||
if (prodId) { |
||||
return prodOptions.value.find((it) => it.productId == prodId).productSpecList |
||||
} |
||||
return [] |
||||
} |
||||
} |
||||
}) |
||||
function getOptions() { |
||||
getUserOption().then((data) => { |
||||
userOptions.value = data |
||||
}) |
||||
// 产品 |
||||
getSimpleProductList().then((data) => { |
||||
prodOptions.value = data |
||||
}) |
||||
} |
||||
|
||||
onMounted(() => { |
||||
getOptions() |
||||
handleSearch() |
||||
}) |
||||
</script> |
||||
|
||||
<style lang="scss" scoped></style> |
||||
@ -0,0 +1,83 @@ |
||||
<template> |
||||
<el-dialog title="发货" v-model="show" width="600px"> |
||||
<el-form :model="form" ref="formRef" :rules="rules" label-width="80px"> |
||||
<el-form-item label="发货仓库" prop="warehouseId"> |
||||
<el-select v-model="form.warehouseId" placeholder="选择仓库" filterable> |
||||
<el-option |
||||
v-for="item in warehouseOptions" |
||||
:key="item.warehouseId" |
||||
:label="item.warehouseName" |
||||
:value="item.warehouseId" |
||||
/> |
||||
</el-select> |
||||
</el-form-item> |
||||
<el-form-item label="备注"> |
||||
<Editor v-model:modelValue="form.remark" /> |
||||
</el-form-item> |
||||
</el-form> |
||||
<template #footer> |
||||
<span> |
||||
<el-button @click="show = false">取 消</el-button> |
||||
<el-button :disabled="formLoading" type="primary" @click="onSubmit">确 定</el-button> |
||||
</span> |
||||
</template> |
||||
</el-dialog> |
||||
</template> |
||||
|
||||
<script setup name="DialogDelivery"> |
||||
import { getSimpleWarehouseList } from '@/api/mall/warehouse' |
||||
import { createDelivery } from '@/api/clue/delivery' |
||||
|
||||
const warehouseOptions = ref([]) |
||||
function getOptions() { |
||||
getSimpleWarehouseList().then((data) => { |
||||
warehouseOptions.value = data |
||||
}) |
||||
} |
||||
|
||||
const show = ref(false) |
||||
function open(id) { |
||||
show.value = true |
||||
resetForm(id) |
||||
} |
||||
defineExpose({ |
||||
open |
||||
}) |
||||
|
||||
const form = ref({}) |
||||
const rules = ref({ |
||||
warehouseId: { required: true, message: '仓库不可为空', trigger: 'change' } |
||||
}) |
||||
function resetForm(id) { |
||||
form.value = { |
||||
signId: id, |
||||
warehouseId: undefined, |
||||
remark: undefined |
||||
} |
||||
} |
||||
|
||||
const emit = defineEmits(['success']) |
||||
const formLoading = ref(false) |
||||
async function onSubmit() { |
||||
// 校验表单 |
||||
if (!formRef.value) return |
||||
const valid = await formRef.value.validate() |
||||
if (!valid) return |
||||
// 提交请求 |
||||
formLoading.value = true |
||||
try { |
||||
await createDelivery(form.value) |
||||
message.success('发货成功！') |
||||
show.value = false |
||||
emit('success') |
||||
} finally { |
||||
formLoading.value = false |
||||
} |
||||
} |
||||
|
||||
onMounted(() => { |
||||
getOptions() |
||||
}) |
||||
</script> |
||||
|
||||
<style lang="scss" scoped></style> |
||||
@ -0,0 +1,117 @@ |
||||
<template> |
||||
<el-dialog title="额外支出" v-model="show" width="800px"> |
||||
<el-button |
||||
class="mb-5px" |
||||
type="primary" |
||||
size="small" |
||||
@click=" |
||||
form.extraPay.push({ |
||||
extraPayType: undefined, |
||||
extraPayMoney: 0, |
||||
dictType: 'extra_pay_type' |
||||
}) |
||||
" |
||||
> |
||||
添加额外支出 |
||||
</el-button> |
||||
<el-table :data="form.extraPay" border size="small"> |
||||
<el-table-column type="index" width="50" /> |
||||
<el-table-column prop="extraPayType" label="费用类型" width="200px"> |
||||
<template #default="{ row }"> |
||||
<el-select v-model="row.extraPayType" size="small" placeholder="其他费用类型" filterable> |
||||
<el-option |
||||
v-for="item in extraPayOptions" |
||||
:key="item.value" |
||||
:label="item.label" |
||||
:value="item.value" |
||||
/> |
||||
</el-select> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="extraPayMoney" label="费用金额" width="180px"> |
||||
<template #default="{ row }"> |
||||
<el-input-number v-model="row.extraPayMoney" size="small" :controls="false" /> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="remark" label="备注"> |
||||
<template #default="{ row }"> |
||||
<el-input v-model="row.remark" size="small" placeholder="备注信息" /> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="操作" width="60px"> |
||||
<template #default="{ row, $index }"> |
||||
<Icon |
||||
icon="ep:remove-filled" |
||||
class="text-red-500" |
||||
:disabled="row.id" |
||||
@click="handleRemove('extraPay', $index)" |
||||
/> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
|
||||
<template #footer> |
||||
<span> |
||||
<el-button @click="show = false">取 消</el-button> |
||||
<el-button :disabled="formLoading" type="primary" @click="onSubmit">确 定</el-button> |
||||
</span> |
||||
</template> |
||||
</el-dialog> |
||||
</template> |
||||
|
||||
<script setup name="DialogExtraPay"> |
||||
import { signAddPay } from '@/api/clue/sign' |
||||
import { getDictOptions } from '@/utils/dict' |
||||
|
||||
const extraPayOptions = getDictOptions('extra_pay_type') |
||||
const message = useMessage() // 消息弹窗 |
||||
|
||||
const show = ref(false) |
||||
function open(id) { |
||||
show.value = true |
||||
resetForm(id) |
||||
} |
||||
defineExpose({ |
||||
open |
||||
}) |
||||
|
||||
const form = ref({}) |
||||
function resetForm(id) { |
||||
form.value = { |
||||
signId: id, |
||||
extraPay: [] |
||||
} |
||||
} |
||||
|
||||
const formLoading = ref(false) |
||||
async function onSubmit() { |
||||
// 校验表单 |
||||
if (form.value.extraPay.length) { |
||||
if (form.value.extraPay.some((it) => !it.extraPayType || it.extraPayMoney == null)) { |
||||
message.info('请想额外支出信息填写完整！') |
||||
return |
||||
} |
||||
} else { |
||||
message.info('请添加额外支出') |
||||
return |
||||
} |
||||
// 提交请求 |
||||
formLoading.value = true |
||||
try { |
||||
const params = { |
||||
signId: form.value.id, |
||||
extraPay: form.value.extraPay.filter((it) => !it.id) |
||||
} |
||||
await signAddPay(params) |
||||
message.success('添加额外支出成功！') |
||||
} finally { |
||||
formLoading.value = false |
||||
} |
||||
} |
||||
|
||||
function handleRemove(type, index) { |
||||
form.value[type].splice(index, 1) |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped></style> |
||||
@ -0,0 +1,313 @@ |
||||
<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.signProduct" |
||||
placeholder="选择成交产品" |
||||
filterable |
||||
@change="searchForm.specsId = undefined" |
||||
> |
||||
<el-option |
||||
v-for="item in prodOptions" |
||||
:key="item.productId" |
||||
:label="item.productName" |
||||
:value="item.productId" |
||||
/> |
||||
</el-select> |
||||
</el-form-item> |
||||
<el-form-item style="margin-bottom: 10px"> |
||||
<el-select |
||||
v-model="searchForm.specsId" |
||||
placeholder="选择规格" |
||||
filterable |
||||
:disabled="!searchForm.signProduct" |
||||
> |
||||
<el-option |
||||
v-for="item in specsOptions(searchForm.signProduct)" |
||||
:key="item.specsId" |
||||
:label="item.specsName" |
||||
:value="item.specsId" |
||||
/> |
||||
</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" |
||||
> |
||||
<el-table-column type="expand"> |
||||
<template #default="{ row }"> |
||||
<div class="p-10px flex justify-center"> |
||||
<el-table :data="row.signProducts" stripe style="width: 900px"> |
||||
<el-table-column prop="productName" label="成交产品" /> |
||||
<el-table-column prop="specsName" label="产品规格" /> |
||||
<el-table-column prop="signNum" label="成交数量" /> |
||||
<el-table-column prop="" label="发货仓库" /> |
||||
<el-table-column label="操作" width="100px"> |
||||
<template #default="scope"> |
||||
<el-button |
||||
type="primary" |
||||
class="mr-10px" |
||||
link |
||||
style="padding: 0; margin-left: 0" |
||||
v-hasPermi="['clue:order:send']" |
||||
@click="handleDelivery(scope.row)" |
||||
> |
||||
发货 |
||||
</el-button> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
</div> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column |
||||
v-for="item in allSchemas.tableColumns" |
||||
:key="item.field" |
||||
:prop="item.field" |
||||
:label="item.label" |
||||
min-width="120px" |
||||
/> |
||||
<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 == false" |
||||
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" /> |
||||
<DialogDelivery ref="deliveryDialog" @success="getTableList" /> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup name="ClueOrderList"> |
||||
import { getSimpleFieldList } from '@/api/clue/orderField' |
||||
import * as SignApi from '@/api/clue/sign' |
||||
import { getSimpleUserList as getUserOption } from '@/api/system/user' |
||||
import { getSimpleProductList } from '@/api/mall/product' |
||||
|
||||
import DialogOrder from './DialogOrder.vue' |
||||
import DialogFeeback from './DialogFeeback.vue' |
||||
import DialogAfterSale from './DialogAfterSale.vue' |
||||
import DialogExtraFee from './DialogExtraPay.vue' |
||||
import DialogDelivery from './DialogDelivery.vue' |
||||
|
||||
import { removeNullField } from '@/utils' |
||||
|
||||
const message = useMessage() // 消息弹窗 |
||||
|
||||
const allSchemas = ref({}) |
||||
|
||||
const orderDetailDialog = ref() |
||||
const searchRef = ref() |
||||
const prodOptions = ref([]) |
||||
|
||||
const specsOptions = computed({ |
||||
get() { |
||||
return (prodId) => { |
||||
if (prodId) { |
||||
return prodOptions.value.find((it) => it.productId == prodId).productSpecList |
||||
} |
||||
return [] |
||||
} |
||||
} |
||||
}) |
||||
|
||||
const searchForm = ref({ |
||||
signProduct: undefined |
||||
}) |
||||
|
||||
const tableObject = ref({ |
||||
tableList: [], |
||||
loading: false, |
||||
total: 1, |
||||
pageSize: 20, |
||||
currentPage: 1 |
||||
}) |
||||
|
||||
function resetQuery() { |
||||
searchForm.value = { |
||||
signProduct: undefined |
||||
} |
||||
searchRef.value.reset() |
||||
tableObject.value.currentPage = 1 |
||||
getTableList() |
||||
} |
||||
// 查询 |
||||
async function getTableList() { |
||||
// 查询 |
||||
tableObject.value.loading = true |
||||
try { |
||||
const queryParams = await searchRef.value.getFormModel() |
||||
const params = { |
||||
...queryParams, |
||||
...searchForm.value, |
||||
pageNo: tableObject.value.currentPage, |
||||
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 (elem.field == 'createUser') { |
||||
elem.search.options = userOptions.value |
||||
} |
||||
}) |
||||
allSchemas.value = useCrudSchemas(data).allSchemas |
||||
} finally { |
||||
loading.value = false |
||||
nextTick(() => { |
||||
getTableList() |
||||
}) |
||||
} |
||||
} |
||||
|
||||
// 详情 |
||||
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) |
||||
} |
||||
|
||||
// 取消登记 |
||||
async function cancelDeal(row) { |
||||
try { |
||||
// 二次确认 |
||||
await message.confirm('是否确认取消登记该线索？') |
||||
// 发起删除 |
||||
await SignApi.cancelDeal(row.signId) |
||||
message.success('取消登记成功！') |
||||
// 刷新列表 |
||||
await getTableList() |
||||
} catch (err) { |
||||
console.log(err) |
||||
} |
||||
} |
||||
|
||||
const extraFeeDialog = ref() |
||||
function handleAddFee(row) { |
||||
extraFeeDialog.value.open(row.signId) |
||||
} |
||||
|
||||
function getOptions() { |
||||
// 产品 |
||||
getSimpleProductList().then((data) => { |
||||
prodOptions.value = data |
||||
}) |
||||
} |
||||
const deliveryDialog = ref() |
||||
function handleDelivery(row) { |
||||
deliveryDialog.value.open(row.signId) |
||||
} |
||||
|
||||
const userOptions = ref([]) |
||||
onMounted(() => { |
||||
getUserOption().then((data) => { |
||||
userOptions.value = data |
||||
getCurdSchemas() |
||||
}) |
||||
getOptions() |
||||
}) |
||||
</script> |
||||
|
||||
<style lang="scss" scoped></style> |
||||
@ -0,0 +1,107 @@ |
||||
<template> |
||||
<Dialog :title="dialogTitle" v-model="dialogVisible" width="800px"> |
||||
<el-form |
||||
ref="formRef" |
||||
v-loading="formLoading" |
||||
:model="formData" |
||||
:rules="formRules" |
||||
label-width="80px" |
||||
> |
||||
<el-form-item label="费用项" prop="label"> |
||||
<el-input v-model="formData.label" placeholder="请输入费用项" /> |
||||
</el-form-item> |
||||
<el-form-item label="排序" prop="sort"> |
||||
<el-input v-model="formData.sort" placeholder="请输入排序" type="number" :min="0" /> |
||||
</el-form-item> |
||||
<el-form-item label="备注" prop="remark"> |
||||
<el-input |
||||
type="textarea" |
||||
v-model="formData.remark" |
||||
placeholder="请输入备注" |
||||
:autosize="{ minRows: 4, maxRows: 8 }" |
||||
/> |
||||
</el-form-item> |
||||
</el-form> |
||||
<template #footer> |
||||
<el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button> |
||||
<el-button @click="dialogVisible = false">取 消</el-button> |
||||
</template> |
||||
</Dialog> |
||||
</template> |
||||
<script name="DialogOtherPay" setup> |
||||
import * as dictApi from '@/api/system/dict/dict.data' |
||||
const { t } = useI18n() // 国际化 |
||||
const message = useMessage() // 消息弹窗 |
||||
|
||||
const dialogVisible = ref(false) // 弹窗的是否展示 |
||||
const dialogTitle = ref('') // 弹窗的标题 |
||||
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用 |
||||
const formType = ref('') // 表单的类型：create - 新增；update - 修改 |
||||
const formData = ref({ |
||||
label: '', |
||||
sort: 1, |
||||
remark: '' |
||||
}) |
||||
const formRules = reactive({ |
||||
label: [{ required: true, message: '费用项不能为空', trigger: 'blur' }] |
||||
}) |
||||
const formRef = ref() // 表单 Ref |
||||
|
||||
/** 打开弹窗 */ |
||||
const open = async (type, id) => { |
||||
dialogVisible.value = true |
||||
dialogTitle.value = type == 'update' ? '修改费用项' : '新增费用项' |
||||
formType.value = type |
||||
resetForm() |
||||
// 修改时，设置数据 |
||||
if (id) { |
||||
formLoading.value = true |
||||
try { |
||||
formData.value = await dictApi.getDictData(id) |
||||
} finally { |
||||
formLoading.value = false |
||||
} |
||||
} |
||||
} |
||||
defineExpose({ open }) // 提供 open 方法，用于打开弹窗 |
||||
|
||||
/** 提交表单 */ |
||||
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调 |
||||
const submitForm = async () => { |
||||
// 校验表单 |
||||
if (!formRef.value) return |
||||
const valid = await formRef.value.validate() |
||||
if (!valid) return |
||||
// 提交请求 |
||||
formLoading.value = true |
||||
try { |
||||
if (!formData.value.value) { |
||||
formData.value.value = formData.value.label |
||||
} |
||||
if (formType.value === 'create') { |
||||
await dictApi.createDictData(formData.value) |
||||
message.success(t('common.createSuccess')) |
||||
} else { |
||||
await dictApi.updateDictData(formData.value) |
||||
message.success(t('common.updateSuccess')) |
||||
} |
||||
dialogVisible.value = false |
||||
// 发送操作成功的事件 |
||||
emit('success') |
||||
} finally { |
||||
formLoading.value = false |
||||
} |
||||
} |
||||
|
||||
/** 重置表单 */ |
||||
const resetForm = () => { |
||||
formData.value = { |
||||
label: '', |
||||
sort: 1, |
||||
status: 0, |
||||
dictType: 'other_pay_type', |
||||
remark: '' |
||||
} |
||||
formRef.value?.resetFields() |
||||
} |
||||
</script> |
||||
@ -0,0 +1,126 @@ |
||||
<template> |
||||
<div> |
||||
<el-form ref="queryForm" :model="searchForm" label-width="0" inline> |
||||
<el-form-item> |
||||
<el-input |
||||
v-model="searchForm.name" |
||||
placeholder="请输入名称" |
||||
clearable |
||||
@keyup.enter="handleQuery" |
||||
/> |
||||
</el-form-item> |
||||
<el-form-item> |
||||
<el-button @click="handleQuery">搜索</el-button> |
||||
<el-button @click="resetQuery">重置</el-button> |
||||
<el-button type="primary" @click="openForm('create', null)">新增</el-button> |
||||
</el-form-item> |
||||
</el-form> |
||||
<el-table v-loading="loading" :data="tableList"> |
||||
<el-table-column prop="label" label="费用项" /> |
||||
<el-table-column prop="sort" label="排序" width="100px" /> |
||||
<el-table-column prop="remark" label="备注" /> |
||||
<el-table-column |
||||
label="创建时间" |
||||
prop="createTime" |
||||
width="180px" |
||||
:formatter="dateFormatter" |
||||
/> |
||||
<el-table-column label="操作"> |
||||
<template #default="scope"> |
||||
<el-button |
||||
type="primary" |
||||
:disabled="!scope.row.editable" |
||||
text |
||||
@click="openForm('update', scope.row.id)" |
||||
> |
||||
修改 |
||||
</el-button> |
||||
<el-button |
||||
type="danger" |
||||
:disabled="!scope.row.editable" |
||||
text |
||||
@click="handleDelete(scope.row.id)" |
||||
> |
||||
删除 |
||||
</el-button> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
<Pagination |
||||
v-model:limit="searchForm.pageSize" |
||||
v-model:page="searchForm.pageNo" |
||||
:total="total" |
||||
@pagination="getList" |
||||
/> |
||||
|
||||
<DialogOtherPay ref="otherOayDialog" @success="handleQuery" /> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup name="OtherPayType"> |
||||
import { dateFormatter } from '@/utils/formatTime' |
||||
import DialogOtherPay from './DialogOtherPay.vue' |
||||
import * as dictApi from '@/api/system/dict/dict.data' |
||||
|
||||
const { t } = useI18n() // 国际化 |
||||
const message = useMessage() // 消息弹窗 |
||||
|
||||
const searchForm = ref({ |
||||
label: '', |
||||
pageSize: 20, |
||||
pageNo: 1, |
||||
dictType: 'other_pay_type' |
||||
}) |
||||
|
||||
const total = ref(0) |
||||
const otherOayDialog = ref() |
||||
const tableList = ref([]) |
||||
const loading = ref(false) |
||||
|
||||
function handleQuery() { |
||||
searchForm.value.pageNo = 1 |
||||
getList() |
||||
} |
||||
function resetQuery() { |
||||
searchForm.value = { |
||||
label: '', |
||||
pageSize: 20, |
||||
pageNo: 1, |
||||
dictType: 'other_pay_type' |
||||
} |
||||
getList() |
||||
} |
||||
|
||||
async function getList() { |
||||
loading.value = true |
||||
try { |
||||
const data = await dictApi.getDictDataPage(searchForm.value) |
||||
tableList.value = data.list |
||||
total.value = data.total |
||||
} finally { |
||||
loading.value = false |
||||
} |
||||
} |
||||
|
||||
function openForm(type, id) { |
||||
otherOayDialog.value.open(type, id) |
||||
} |
||||
|
||||
async function handleDelete(id) { |
||||
try { |
||||
// 删除的二次确认 |
||||
await message.delConfirm() |
||||
// 发起删除 |
||||
await dictApi.deleteDictData(id) |
||||
message.success(t('common.delSuccess')) |
||||
// 刷新列表 |
||||
await getList() |
||||
} catch {} |
||||
} |
||||
|
||||
onMounted(() => { |
||||
handleQuery() |
||||
}) |
||||
</script> |
||||
|
||||
<style lang="scss" scoped></style> |
||||
Loading…
Reference in new issue