162 lines
4.0 KiB
Vue
162 lines
4.0 KiB
Vue
<template>
|
|
<el-dialog
|
|
:title="title"
|
|
:visible.sync="visible"
|
|
width="800px"
|
|
append-to-body
|
|
:close-on-click-modal="false"
|
|
destroy-on-close
|
|
>
|
|
<div>
|
|
<el-input
|
|
v-model="searchKeyword"
|
|
placeholder="请输入服务名称搜索"
|
|
clearable
|
|
prefix-icon="el-icon-search"
|
|
style="width: 300px; margin-bottom: 10px;"
|
|
@keyup.enter.native="handleSearch"
|
|
@clear="handleSearch"
|
|
>
|
|
<el-button slot="append" icon="el-icon-search" @click="handleSearch">搜索</el-button>
|
|
</el-input>
|
|
<el-table
|
|
ref="serviceTable"
|
|
:data="serviceList"
|
|
@select="handleSelectionChange"
|
|
@select-all="handleSelectionChange"
|
|
height="400"
|
|
border
|
|
v-loading="loading"
|
|
>
|
|
<el-table-column type="selection" width="55" align="center" />
|
|
<el-table-column label="服务ID" prop="id" width="80" align="center" />
|
|
<el-table-column label="服务名称" prop="title" align="center" />
|
|
</el-table>
|
|
<el-pagination
|
|
@size-change="handleSizeChange"
|
|
@current-change="handleCurrentChange"
|
|
:current-page.sync="pageNum"
|
|
:page-sizes="[10, 20, 30, 50]"
|
|
:page-size.sync="pageSize"
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|
:total="total"
|
|
style="margin-top: 10px;"
|
|
/>
|
|
</div>
|
|
<div slot="footer" class="dialog-footer">
|
|
<el-button @click="closeDialog">取 消</el-button>
|
|
<el-button type="primary" @click="confirmSelection">确 定</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
</template>
|
|
|
|
<script>
|
|
import { listServiceGoods } from '@/api/system/ServiceGoods'
|
|
export default {
|
|
name: 'ServiceGoodsSelectDialog',
|
|
props: {
|
|
value: {
|
|
type: [Array, String],
|
|
default: () => []
|
|
},
|
|
visible: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
title: {
|
|
type: String,
|
|
default: '选择服务项目'
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
searchKeyword: '',
|
|
serviceList: [],
|
|
loading: false,
|
|
pageNum: 1,
|
|
pageSize: 10,
|
|
total: 0,
|
|
tempSelected: []
|
|
}
|
|
},
|
|
watch: {
|
|
visible(val) {
|
|
if (val) {
|
|
this.tempSelected = Array.isArray(this.value) ? [...this.value] : (this.value ? JSON.parse(this.value) : [])
|
|
this.getList()
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
getList() {
|
|
this.loading = true
|
|
listServiceGoods({ pageNum: this.pageNum, pageSize: this.pageSize, title: this.searchKeyword }).then(res => {
|
|
this.serviceList = res.rows || []
|
|
this.total = res.total || 0
|
|
this.$nextTick(() => {
|
|
if (this.$refs.serviceTable) {
|
|
this.$refs.serviceTable.clearSelection()
|
|
const selectedIds = (this.tempSelected || []).map(String)
|
|
this.serviceList.forEach(row => {
|
|
if (selectedIds.includes(String(row.id))) {
|
|
this.$refs.serviceTable.toggleRowSelection(row, true)
|
|
}
|
|
})
|
|
}
|
|
})
|
|
this.loading = false
|
|
}).catch(() => {
|
|
this.loading = false
|
|
})
|
|
},
|
|
handleSearch() {
|
|
this.pageNum = 1
|
|
this.getList()
|
|
},
|
|
handleSizeChange(val) {
|
|
this.pageSize = val
|
|
this.getList()
|
|
},
|
|
handleCurrentChange(val) {
|
|
this.pageNum = val
|
|
this.getList()
|
|
},
|
|
handleSelectionChange(selection) {
|
|
this.tempSelected = selection.map(item => String(item.id))
|
|
},
|
|
confirmSelection() {
|
|
this.$emit('input', JSON.stringify(this.tempSelected))
|
|
this.$emit('update:visible', false)
|
|
},
|
|
closeDialog() {
|
|
this.$emit('update:visible', false)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.service-tag-content {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
max-width: 200px;
|
|
overflow: hidden;
|
|
padding: 0 4px;
|
|
}
|
|
.service-title {
|
|
font-weight: 500;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
max-width: 100px;
|
|
}
|
|
.service-id {
|
|
color: #909399;
|
|
font-size: 12px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
max-width: 90px;
|
|
}
|
|
</style> |