Files
temu-plugin/src/view/lables/Template.vue
2024-10-28 22:10:07 +08:00

152 lines
4.0 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<ai-list class="Template">
<ai-title
slot="title"
title="模板管理"
isShowBottomBorder>
</ai-title>
<template slot="content">
<ai-search-bar>
<template #left>
<div class="search-item">
<label>SKU</label>
<el-input
v-model="search.productSkuId"
style="width: 250px"
size="small"
clearable
placeholder="请输入SKU"
suffix-icon="iconfont iconSearch">
</el-input>
</div>
<div class="search-item">
<label>SKC</label>
<el-input
v-model="search.productSkcId"
style="width: 250px"
size="small"
placeholder="请输入SKC"
clearable
suffix-icon="iconfont iconSearch">
</el-input>
</div>
<div class="search-item">
<label>模板名称</label>
<el-input
v-model="search.name"
style="width: 250px"
size="small"
placeholder="请输入模板名称"
clearable
suffix-icon="iconfont iconSearch">
</el-input>
</div>
<el-button style="margin-left: 10px;" @click="getList" size="small" :loading="isLoading">查询</el-button>
<el-button type="primary" size="small" @click="toAdd('')">添加</el-button>
</template>
</ai-search-bar>
<ai-table
:tableData="tableData"
:col-configs="colConfigs"
:total="total"
:current.sync="search.current"
:size.sync="search.size"
style="margin-top: 8px;"
@getList="getList"
:loading="isLoading">
<el-table-column slot="options" label="操作" align="center" fixed="right" width="220px">
<template v-slot="{ row }">
<div class="table-options">
<el-button type="text" @click="toAddSku(row.id)">管理SKU</el-button>
<el-button type="text" @click="toAdd(row.id)">编辑</el-button>
<el-button type="text" @click="remove(row.id)">删除</el-button>
</div>
</template>
</el-table-column>
</ai-table>
</template>
</ai-list>
</template>
<script>
export default {
name: 'PringTemplate',
data () {
return {
colConfigs: [
{ prop: 'name', label: '模板名称', align: 'left' },
{ prop: 'skuTotal', label: '绑定SKU数量', align: 'center' },
{ prop: 'createTime', label: '创建时间', align: 'center' },
],
isLoading: false,
tableData: [],
total: 0,
search: {
current: 1,
size: 10,
name: '',
productSkuId: '',
productSkcId: ''
}
}
},
created () {
this.getList()
},
methods: {
toAdd (id = '') {
this.$router.push(`/addLabelsTemplate?id=${id}`)
},
toAddSku (id) {
this.$router.push(`/skuManage?id=${id}`)
},
getList () {
this.isLoading = true
this.$http.post('/api/template/getPage', null, {
params: {
...this.search
}
}).then(res => {
if (res.code === 0) {
this.tableData = res.data.records
this.total = res.data.total
}
this.isLoading = false
})
},
remove (id) {
this.$confirm('确定删除该模板?', '温馨提示', {
type: 'warning'
}).then(() => {
this.$http.post(`/api/template/removeById?id=${id}`).then(res => {
if (res.code == 0) {
this.$message.success('删除成功')
this.getList()
}
})
})
},
onConfirm () {
}
}
}
</script>
<style scoped lang="scss">
.Template {
.search-item {
margin-bottom: 0;
}
}
</style>