<template>
|
<div>
|
<v-header
|
title="便民服务分类"
|
search
|
:bar="bar"
|
@on-search="onSearch"
|
></v-header>
|
<div class="but">
|
<el-button @click="add()" size="small" type="primary">新增</el-button>
|
</div>
|
<div>
|
<v-tool-table :trs="trs" :tds="tds">
|
<template v-slot:btn="{ scope }">
|
<el-button type="text" @click="edit(scope)">编辑</el-button>
|
<el-button type="text" @click="clear(scope.id)">删除</el-button>
|
</template>
|
</v-tool-table>
|
</div>
|
<v-tool-page :item="paged" @on-page="onPage"></v-tool-page>
|
<!---->
|
<el-dialog
|
:title="title"
|
:modal="false"
|
destroy-on-close
|
:close-on-click-modal="false"
|
:visible.sync="centerDialogVisible"
|
width="600px"
|
center
|
>
|
<div class="dialog-box">
|
<el-form ref="form" label-width="100px">
|
<el-form-item label="服务名称">
|
<el-input v-model="os.serviceName" placeholder="请输入"></el-input>
|
</el-form-item>
|
<el-form-item label="价格">
|
<el-input v-model="os.servicePrice" placeholder="请输入"></el-input>
|
</el-form-item>
|
<el-form-item label="分类">
|
<el-select v-model="os.categoryId" placeholder="请选择">
|
<el-option
|
v-for="item in options"
|
:label="item.name"
|
:key="'a-' + item.id"
|
:value="item.id"
|
/>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="服务描述">
|
<el-input v-model="os.serviceDesc" placeholder="请输入"></el-input>
|
</el-form-item>
|
<el-form-item label="所属商家">
|
<el-select v-model="os.businessId" placeholder="请选择">
|
<el-option
|
v-for="item in options1"
|
:label="item.name"
|
:key="'b-' + item.id"
|
:value="item.id"
|
/>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="备注">
|
<el-input
|
v-model="os.remark"
|
type="textarea"
|
placeholder="请输入"
|
></el-input>
|
</el-form-item>
|
</el-form>
|
</div>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="centerDialogVisible = false">取 消</el-button>
|
<el-button type="primary" @click="sub()">确 定</el-button>
|
</span>
|
</el-dialog>
|
</div>
|
</template>
|
<script>
|
export default {
|
props: [],
|
components: {},
|
data() {
|
return {
|
Authorization: "",
|
title: "新增",
|
editType: 1, //1新增 2 编辑
|
centerDialogVisible: false,
|
bar: [{ title: "服务名称", name: "serviceName", value: "" }],
|
ba: {},
|
os: {
|
serviceName: "",
|
servicePrice: "",
|
categoryId: "",
|
serviceDesc: "",
|
businessId: "",
|
remark: ""
|
},
|
trs: [
|
{ text: "服务名称", val: "serviceName" },
|
{ text: "服务价格（元）", val: "servicePrice", width: "" },
|
{ text: "服务分类", val: "categoryName" },
|
{ text: "服务描述", val: "serviceDesc" },
|
{ text: "商家名称", val: "businessName" },
|
{ text: "创建时间", val: "createAt" },
|
{ text: "操作", val: "btn" }
|
],
|
options: [], //分类
|
options1: [], //商家
|
tds: [],
|
paged: { page: 0, total: 10, r: 0, limit: 10 }
|
};
|
},
|
created() {
|
this.init();
|
this.categoryAll();
|
this.businessPage();
|
},
|
mounted() {
|
this.Authorization = "Bearer " + demo.$session.get("token") || "";
|
},
|
methods: {
|
clear(id) {
|
//删除
|
let t = this;
|
t.$js.model("删除便民服务", "是否删除便民服务", res => {
|
if (res) {
|
t.$api.del("convenient/serve/delete?id=" + id, {}, e => {
|
demo.toast("删除成功");
|
t.init();
|
});
|
}
|
});
|
},
|
add() {
|
//新增弹出层
|
|
this.editType = 1;
|
for (let i in this.os) {
|
this.os[i] = "";
|
}
|
this.centerDialogVisible = true;
|
},
|
edit(scope) {
|
//编辑
|
console.log(scope);
|
this.editType = 2;
|
this.os.id = scope.id;
|
this.os.serviceName = scope.serviceName;
|
this.os.servicePrice = scope.servicePrice;
|
this.os.categoryId = scope.categoryId;
|
this.os.serviceDesc = scope.serviceDesc;
|
this.os.businessId = scope.businessId;
|
this.os.remark = scope.remark;
|
|
this.centerDialogVisible = true;
|
},
|
sub() {
|
//新增
|
if (this.editType == 1) {
|
//新增
|
this.$api.post("convenient/serve/add", this.os, e => {
|
this.init();
|
this.centerDialogVisible = false;
|
});
|
} else {
|
//编辑
|
this.$api.put("convenient/serve/put", this.os, e => {
|
this.init();
|
this.centerDialogVisible = false;
|
});
|
}
|
},
|
businessPage() {
|
// 分页查询便民分类
|
// this.$api.post('convenient/category/pagee',{},e=>{
|
// console.log(e)
|
// this.options1 = e.records
|
// })
|
},
|
categoryAll() {
|
// 查询便民服务所有分类，下拉框
|
this.$api.post("convenient/category/all", "", e => {
|
this.options = e;
|
});
|
},
|
init() {
|
Object.assign(this.paged, this.ba);
|
this.$api.post("convenient/category/page", this.paged, e => {
|
console.log(e);
|
this.tds = e.records;
|
this.paged.total = e.total;
|
});
|
},
|
onSearch(e) {
|
// console.log(e)
|
this.ba = e;
|
this.init();
|
},
|
onPage(v) {
|
//分页
|
if (v.page === this.paged.page && v.page && !v.reset) {
|
return 0;
|
}
|
this.paged.page = v.page;
|
this.paged.limit = v.limit;
|
this.init();
|
},
|
success() {},
|
error() {}
|
},
|
watch: {},
|
computed: {}
|
};
|
</script>
|
<style scoped>
|
.but {
|
padding-bottom: 20px;
|
display: flex;
|
}
|
.upload-box {
|
margin: 0 16px;
|
}
|
</style>
|
