feat(businessHanding): add filterable

This commit is contained in:
ywk 2025-04-07 16:19:06 +08:00
parent 433827060b
commit b15fea10b5
1 changed files with 101 additions and 102 deletions

View File

@ -7,8 +7,8 @@
<el-col :span="4"> <el-col :span="4">
<el-form-item :label="'业务名称'" prop="type"> <el-form-item :label="'业务名称'" prop="type">
<el-autocomplete <el-autocomplete
class="inline-input"
v-model="queryParams.typeName" v-model="queryParams.typeName"
class="inline-input"
:fetch-suggestions="querySearch" :fetch-suggestions="querySearch"
placeholder="请输入内容或选择" placeholder="请输入内容或选择"
@select="handleSelect" @select="handleSelect"
@ -21,11 +21,9 @@
</el-col> </el-col>
<el-col :span="4"> <el-col :span="4">
<el-button class="my_search" @click="getHandelWorkList()"> <el-button class="my_search" @click="getHandelWorkList()">
{{ '搜索' }}</el-button {{ '搜索' }}</el-button>
>
<el-button class="my_reset" @click="reChongzhi"> <el-button class="my_reset" @click="reChongzhi">
{{ '重置' }}</el-button {{ '重置' }}</el-button>
>
</el-col> </el-col>
</el-row> </el-row>
</el-form> </el-form>
@ -36,14 +34,14 @@
<el-button class="thebtn1" @click="adddate()">{{ <el-button class="thebtn1" @click="adddate()">{{
'添加' '添加'
}}</el-button> }}</el-button>
<el-button @click="handleExport" class="thebtn2"> {{ '导出' }}</el-button> <el-button class="thebtn2" @click="handleExport"> {{ '导出' }}</el-button>
</div> </div>
</div> </div>
<div class="maintable"> <div class="maintable">
<el-table <el-table
ref="table1" ref="table1"
height="700px"
v-loading="loading" v-loading="loading"
height="700px"
style="width: 100%" style="width: 100%"
:header-cell-style="{ background: '#EEEEEE' }" :header-cell-style="{ background: '#EEEEEE' }"
:row-class-name="tableRowClassName" :row-class-name="tableRowClassName"
@ -163,6 +161,7 @@
v-model="form.type" v-model="form.type"
clearable clearable
:placeholder="'请选择'" :placeholder="'请选择'"
filterable
> >
<el-option <el-option
v-for="item in approbalBusinessList" v-for="item in approbalBusinessList"
@ -223,7 +222,7 @@
circle circle
icon="el-icon-plus" icon="el-icon-plus"
@click="addList(i)" @click="addList(i)"
/></el-col> /></el-col>
</el-form> </el-form>
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
<el-button class="cancels" @click="handleClose">{{ <el-button class="cancels" @click="handleClose">{{
@ -238,7 +237,7 @@
</template> </template>
<script> <script>
import topBar from "@/components/topBar"; import topBar from '@/components/topBar'
import { import {
getApprobalBusiness, getApprobalBusiness,
getPubEnumsAccount, getPubEnumsAccount,
@ -246,203 +245,203 @@ import {
deletHandelWork, deletHandelWork,
getOneHandelWorkList, getOneHandelWorkList,
saveHandleWork, saveHandleWork,
updateHandleWork, updateHandleWork
} from "@/api/businesshandling"; } from '@/api/businesshandling'
export default { export default {
name: "Ywblsxf", name: 'Ywblsxf',
components: { components: {
topBar, topBar
}, },
data() { data() {
return { return {
moren: "ywblsxf", moren: 'ywblsxf',
topList: [ topList: [
{ {
name: '业务办理手续费', name: '业务办理手续费',
path: "ywblsxf", path: 'ywblsxf'
}, }
], ],
tableData: [], tableData: [],
loading:false, loading: false,
multipleSelection: [], multipleSelection: [],
total: 0, total: 0,
queryParams: { queryParams: {
pageNum: 1, pageNum: 1,
pageSize: 50, pageSize: 50,
type: "", // type: '' //
}, },
updateShow: false, updateShow: false,
addOrEdit: "", // true false addOrEdit: '', // true false
updateTitle: "", updateTitle: '',
form: { form: {
type: "", // type: '', //
// handleCount: "", // // handleCount: "", //
pkAccount: "", // pkAccount: '', //
serviceChargeDetailsList: [ serviceChargeDetailsList: [
{ {
quantity: "", quantity: '',
cost: "", cost: ''
}, }
], ]
}, },
rules: { rules: {
type: [ type: [
{ {
required: true, required: true,
message: '请选择业务', message: '请选择业务',
trigger: "change", trigger: 'change'
}, }
], ],
pkAccount: [ pkAccount: [
{ {
required: true, required: true,
message: '请选择币种', message: '请选择币种',
trigger: "change", trigger: 'change'
}, }
], ]
}, },
approbalBusinessList: [], approbalBusinessList: [],
pubEnumsAccountList: [], pubEnumsAccountList: []
}; }
}, },
created() { created() {
this.getHandelWorkList(); this.getHandelWorkList()
this.getApprobalBusiness(); this.getApprobalBusiness()
this.getPubEnumsAccount(); this.getPubEnumsAccount()
}, },
methods: { methods: {
// //
querySearch(queryString, cb) { querySearch(queryString, cb) {
var restaurants = this.approbalBusinessList; var restaurants = this.approbalBusinessList
var results = queryString var results = queryString
? restaurants.filter(this.createFilter(queryString)) ? restaurants.filter(this.createFilter(queryString))
: restaurants; : restaurants
// callback // callback
cb(results); cb(results)
}, },
createFilter(queryString) { createFilter(queryString) {
return (restaurant) => { return (restaurant) => {
return ( return (
restaurant.label.toLowerCase().indexOf(queryString.toLowerCase()) === restaurant.label.toLowerCase().indexOf(queryString.toLowerCase()) ===
0 0
); )
}; }
}, },
handleSelect(item) { handleSelect(item) {
this.queryParams.type = item.value; this.queryParams.type = item.value
this.queryParams.typeName = item.label this.queryParams.typeName = item.label
}, },
changeQuantity(item, i) { changeQuantity(item, i) {
item.quantity = i + 1; item.quantity = i + 1
}, },
addList(i) { addList(i) {
this.form.serviceChargeDetailsList.push({ this.form.serviceChargeDetailsList.push({
quantity: "", quantity: '',
cost: "", cost: ''
}); })
}, },
getApprobalBusiness() { getApprobalBusiness() {
// //
getApprobalBusiness().then((res) => { getApprobalBusiness().then((res) => {
this.approbalBusinessList = res.data; this.approbalBusinessList = res.data
}); })
}, },
getPubEnumsAccount() { getPubEnumsAccount() {
// //
getPubEnumsAccount().then((res) => { getPubEnumsAccount().then((res) => {
this.pubEnumsAccountList = res.rows; this.pubEnumsAccountList = res.rows
}); })
}, },
// //
onSubmit(formName) { onSubmit(formName) {
this.$refs[formName].validate((valid) => { this.$refs[formName].validate((valid) => {
if (valid) { if (valid) {
let url = ""; let url = ''
if (this.addOrEdit == true) { if (this.addOrEdit == true) {
url = saveHandleWork; url = saveHandleWork
} else { } else {
url = updateHandleWork; url = updateHandleWork
} }
url(this.form).then((res) => { url(this.form).then((res) => {
if (res.code == 200) { if (res.code == 200) {
this.updateShow = false; this.updateShow = false
this.$message({ this.$message({
message: res.msg, message: res.msg,
type: "success", type: 'success'
}); })
this.getHandelWorkList(); this.getHandelWorkList()
} }
}); })
} }
}); })
}, },
// //
reChongzhi() { reChongzhi() {
this.queryParams.type = ""; this.queryParams.type = ''
this.queryParams.typeName = "" this.queryParams.typeName = ''
this.getHandelWorkList(); this.getHandelWorkList()
}, },
// //
adddate() { adddate() {
this.updateShow = true; this.updateShow = true
this.updateTitle = '添加'; this.updateTitle = '添加'
this.addOrEdit = true; this.addOrEdit = true
this.form.pkId = null; this.form.pkId = null
this.form = { this.form = {
type: "", // type: '', //
// handleCount: "", // // handleCount: "", //
pkAccount: "", // pkAccount: '', //
serviceChargeDetailsList: [ serviceChargeDetailsList: [
{ {
quantity: "", quantity: '',
cost: "", cost: ''
}, }
], ]
}; }
}, },
// //
update(row) { update(row) {
this.updateTitle = '修改'; this.updateTitle = '修改'
this.updateShow = true; this.updateShow = true
this.addOrEdit = false; this.addOrEdit = false
getOneHandelWorkList(row.pkId).then((res) => { getOneHandelWorkList(row.pkId).then((res) => {
this.form = res.data; this.form = res.data
}); })
}, },
// //
deleteRow(row) { deleteRow(row) {
this.$confirm('确认删除?', '提示', { this.$confirm('确认删除?', '提示', {
confirmButtonText: '确定', confirmButtonText: '确定',
cancelButtonText: '取消', cancelButtonText: '取消',
type: "warning", type: 'warning'
}).then(() => { }).then(() => {
deletHandelWork(row.pkId).then((res) => { deletHandelWork(row.pkId).then((res) => {
if (res.code == 200) { if (res.code == 200) {
this.$message({ this.$message({
message: res.msg, message: res.msg,
type: "success", type: 'success'
}); })
this.getHandelWorkList(); this.getHandelWorkList()
} }
}); })
}); })
}, },
// //
getHandelWorkList() { getHandelWorkList() {
this.loading = true this.loading = true
getHandelWorkList(this.queryParams).then((res) => { getHandelWorkList(this.queryParams).then((res) => {
this.tableData = res.rows; this.tableData = res.rows
this.total = res.total; this.total = res.total
this.loading = false this.loading = false
}); })
}, },
/** 导出按钮操作 */ /** 导出按钮操作 */
handleExport() { handleExport() {
this.$confirm( '是否确认导出所有数据项?', '警告', { this.$confirm('是否确认导出所有数据项?', '警告', {
confirmButtonText: '确定', confirmButtonText: '确定',
cancelButtonText: '取消', cancelButtonText: '取消',
type: 'warning', type: 'warning'
}).then((_) => { }).then((_) => {
this.download( this.download(
'system/manage/service-charge/export', 'system/manage/service-charge/export',
@ -452,23 +451,23 @@ export default {
}) })
}, },
handleClose() { handleClose() {
this.updateShow = false; this.updateShow = false
this.$refs["form"].clearValidate(); this.$refs['form'].clearValidate()
this.$refs["form"].resetFields(); this.$refs['form'].resetFields()
}, },
handleSelectionChange(val) { handleSelectionChange(val) {
this.multipleSelection = val; this.multipleSelection = val
}, },
tableRowClassName({ row, rowIndex }) { tableRowClassName({ row, rowIndex }) {
if (rowIndex % 2 == 1) { if (rowIndex % 2 == 1) {
return "warning-row"; return 'warning-row'
} else if (rowIndex % 2 == 0) { } else if (rowIndex % 2 == 0) {
return "success-row"; return 'success-row'
} }
return ""; return ''
}, }
}, }
}; }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>