115 lines
3.1 KiB
Vue
115 lines
3.1 KiB
Vue
<template>
|
|
<section class="AiLibTable">
|
|
<ai-search-bar>
|
|
<template v-if="$scopedSlots.left" #left>
|
|
<slot name="left"/>
|
|
</template>
|
|
<template #right>
|
|
<slot v-if="$scopedSlots.right" name="right"/>
|
|
<el-input v-else placeholder="搜索应用名称" size="small" v-model="search[searchKey]" @change="page.current=1,getTableData()" clearable/>
|
|
</template>
|
|
</ai-search-bar>
|
|
<ai-table :tableData="tableData" :total="page.total" :current.sync="page.current" :colConfigs="columns"
|
|
:size.sync="page.size" border @getList="getTableData" tableSize="mini" height="430px">
|
|
<el-table-column slot="chb" width="100px">
|
|
<template slot-scope="{row}">
|
|
<el-checkbox v-model="row.checked" @change="handleCheck(row)"/>
|
|
</template>
|
|
</el-table-column>
|
|
</ai-table>
|
|
</section>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "AiLibTable",
|
|
model: {
|
|
prop: "value",
|
|
event: "change"
|
|
},
|
|
props: {
|
|
value: {default: null},
|
|
instance: Function,
|
|
dict: Object,
|
|
permissions: Function,
|
|
action: {default: "/node/wechatapps/list"},
|
|
colConfigs: {
|
|
default: () => [
|
|
{prop: 'label', label: "应用名称"},
|
|
{prop: 'project', label: "项目/框架"},
|
|
{prop: 'name', label: "模块名"},
|
|
]
|
|
},
|
|
nodeKey: {default: "id"},
|
|
searchKey: {default: "name"},
|
|
multiple: Boolean
|
|
},
|
|
data() {
|
|
return {
|
|
page: {total: 0, current: 1, size: 10},
|
|
search: {},
|
|
tableData: [],
|
|
}
|
|
},
|
|
computed: {
|
|
columns() {
|
|
return [
|
|
{slot: "chb"}, ...this.colConfigs
|
|
]
|
|
},
|
|
selected() {
|
|
return [this.value].flat().filter(e => !!e) || []
|
|
}
|
|
},
|
|
watch: {
|
|
action(v) {
|
|
v && (this.page.current = 1, this.getTableData())
|
|
},
|
|
},
|
|
methods: {
|
|
getTableData() {
|
|
let {page, search, action, nodeKey} = this
|
|
this.instance?.post(action, null, {
|
|
params: {...page, ...search}
|
|
}).then(res => {
|
|
if (res?.data) {
|
|
const list = res.data.records || res.data || []
|
|
list.map(e => {
|
|
if (/\/project\//.test(e.libPath)) {
|
|
e.project = e.libPath.replace(/.*project\/([^\/]+)\/.+/, '$1')
|
|
} else if (/\/core\//.test(e.libPath)) {
|
|
e.project = "core"
|
|
} else e.project = "standard"
|
|
})
|
|
this.tableData = list.map(e => ({...e, checked: this.selected.includes(e[nodeKey])}))
|
|
this.page.total = res.data.total
|
|
}
|
|
})
|
|
},
|
|
handleCheck(row) {
|
|
const {nodeKey} = this
|
|
if (this.multiple) {
|
|
let selected = this.$copy(this.selected)
|
|
if (row.checked) {
|
|
selected.push(row[nodeKey])
|
|
} else {
|
|
selected = selected.filter(e => e != row[nodeKey])
|
|
}
|
|
this.$emit("change", selected)
|
|
} else {
|
|
this.$emit("change", row.checked ? row[nodeKey] : '')
|
|
}
|
|
}
|
|
},
|
|
created() {
|
|
this.$set(this.search, this.searchKey, "")
|
|
this.getTableData()
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.AiLibTable {
|
|
}
|
|
</style>
|