<template>
|
<div class="box-content">
|
<v-header
|
:title="titleName + '管理'"
|
search
|
:bar="bar"
|
@on-search="onSearch"
|
></v-header>
|
<div class="add fl-sb">
|
<el-button type="primary" size="small" @click.stop="clickHandle('add')"
|
>新增</el-button
|
>
|
</div>
|
<div class="tab">
|
<el-table :data="tableList" border ref="multipleTable" size="mini">
|
<el-table-column label="序号" align="center" width="50" type="index">
|
</el-table-column>
|
<el-table-column label="网格员名称" align="center">
|
<template slot-scope="scope">
|
{{ scope.row.name || "-" }}
|
</template>
|
</el-table-column>
|
<el-table-column label="联系电话" align="center">
|
<template slot-scope="scope">
|
{{ scope.row.phone || "-" }}
|
</template>
|
</el-table-column>
|
<!-- <el-table-column label="所属社区" align="center">
|
<template slot-scope="scope">
|
{{ scope.row.ncommunityName || "-" }}
|
</template>
|
</el-table-column> -->
|
<el-table-column label="操作" align="center" fixed="right" width="150">
|
<template slot-scope="scope">
|
<el-button
|
size="small"
|
type="text"
|
style="padding: 0"
|
@click="clickHandle('edit', scope.row)"
|
>编辑</el-button
|
>
|
<el-button
|
@click="clickHandle('delete', scope.row)"
|
size="small"
|
type="text"
|
style="padding: 0"
|
>删除</el-button
|
>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
<v-tool-page :item="paged" @on-page="onPage"></v-tool-page>
|
<!-- 新增弹框 -->
|
<el-dialog
|
:title="dialogTitle"
|
:visible.sync="dialogVisible"
|
width="50%"
|
:before-close="handleCloseData"
|
append-to-body
|
>
|
<div>
|
<el-form
|
:model="form"
|
:rules="rules"
|
label-position="right"
|
ref="ruleForm"
|
label-width="150px"
|
class="demo-ruleForm"
|
>
|
<el-form-item :label="titleName + '名称'" prop="name">
|
<el-input
|
class="input-width"
|
placeholder="请输入"
|
size="small"
|
v-model.trim="form.name"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="联系电话" prop="phone">
|
<el-input
|
class="input-width"
|
placeholder="请输入"
|
size="small"
|
v-model.trim="form.phone"
|
></el-input>
|
</el-form-item>
|
<!-- <el-form-item label="请选择社区" prop="communityId">
|
<el-select
|
class="input-width"
|
v-model="form.communityId"
|
clearable
|
placeholder="请选择社区"
|
>
|
<el-option
|
v-for="item in communityList"
|
:key="item.communityId"
|
:label="item.name"
|
:value="item.communityId"
|
>
|
</el-option>
|
</el-select>
|
</el-form-item> -->
|
</el-form>
|
<div class="fl-cen">
|
<el-button size="small" @click="handleCloseData">取 消</el-button>
|
<el-button
|
size="small"
|
type="primary"
|
:loading="btnloading"
|
@click="submitHandle"
|
>确 定</el-button
|
>
|
</div>
|
</div>
|
</el-dialog>
|
<!-- 查看详情 -->
|
</div>
|
</template>
|
|
<script>
|
import { mapState } from "vuex";
|
import { objCopyPro, dateTime } from "../../utils/common";
|
export default {
|
data() {
|
return {
|
titleName: "网格员",
|
dialogVisible: false,
|
dialogTitle: "新增",
|
bar: [
|
{ title: "网格员名称", name: "name" },
|
{ title: "联系电话", name: "phone" },
|
// {
|
// title: "所属小区",
|
// name: "communityId",
|
// type: "select",
|
// list: [],
|
// },
|
],
|
tableList: [],
|
paged: { page: 0, total: 0, r: 0, limit: 10 },
|
search: {},
|
btnloading: false,
|
form: {
|
phone: "",
|
name: "",
|
communityId: "",
|
}, // 表单
|
rules: {
|
name: [
|
{
|
required: true,
|
message: "请输入网格员名称",
|
trigger: "blur",
|
},
|
],
|
phone: [
|
{
|
required: true,
|
message: "请输入联系电话",
|
trigger: "blur",
|
},
|
],
|
}, // 表单验证
|
communityList: [],
|
};
|
},
|
computed: {
|
...mapState({ vuex_page: "pageReset" }),
|
},
|
watch: {
|
vuex_page: {
|
handler(n) {
|
if (n.page === this.$route.path) {
|
this.paged.page = 1;
|
this.getTable();
|
}
|
},
|
deep: true,
|
},
|
},
|
mounted() {
|
this.getCommunityList();
|
},
|
methods: {
|
getCommunityList() {
|
const ARR_COMMUNITY_LIST = [];
|
this.$api.get("communityactivity/community/list", {}, (e) => {
|
this.communityList = e;
|
e.forEach((item) => {
|
ARR_COMMUNITY_LIST.push({
|
label: item.name,
|
value: item.communityId,
|
});
|
});
|
this.bar[2].list = ARR_COMMUNITY_LIST;
|
});
|
},
|
reTime(t) {
|
return dateTime(t);
|
},
|
onSearch(v) {
|
this.search = demo.copy(v);
|
this.paged.page = 1;
|
this.getTable();
|
},
|
// 分页点击
|
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.getTable();
|
},
|
// 获取数据
|
getTable() {
|
let v = demo.copy(
|
Object.assign(this.search, {
|
page: this.paged.page,
|
size: this.paged.limit,
|
})
|
);
|
this.$api.post("comActEasyPhotoMember/queryAll", v, (e) => {
|
this.paged.total = e.total;
|
this.paged.r++;
|
this.tableList = e.records || [];
|
});
|
},
|
clickHandle(type, row) {
|
switch (type) {
|
case "add": {
|
this.dialogTitle = "新增";
|
this.dialogVisible = true;
|
break;
|
}
|
case "edit": {
|
this.$api.get("comActEasyPhotoMember/" + row.id, {}, (e) => {
|
e.communityId += "";
|
this.form = objCopyPro(this.form, e);
|
this.dialogTitle = "编辑";
|
this.dialogVisible = true;
|
});
|
break;
|
}
|
case "delete": {
|
this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning",
|
}).then(() => {
|
this.$api.get("comActEasyPhotoMember/del", { id: row.id }, () => {
|
demo.toast("删除成功");
|
this.getTable();
|
});
|
});
|
break;
|
}
|
default: {
|
break;
|
}
|
}
|
},
|
submitHandle() {
|
this.$refs["ruleForm"].validate((val) => {
|
if (val) {
|
if (this.dialogTitle === "新增") {
|
this.$api.post("comActEasyPhotoMember", this.form, () => {
|
demo.toast("新增成功");
|
this.handleCloseData();
|
this.getTable();
|
});
|
} else if (this.dialogTitle === "编辑") {
|
this.$api.post("comActEasyPhotoMember/update", this.form, () => {
|
demo.toast("编辑成功");
|
this.handleCloseData();
|
this.getTable();
|
});
|
}
|
}
|
});
|
},
|
handleCloseData() {
|
this.$refs["ruleForm"].resetFields(); // 重置表单
|
this.form = {
|
phone: "",
|
name: "",
|
communityId: "",
|
};
|
this.dialogVisible = false;
|
},
|
},
|
};
|
</script>
|
<style>
|
.el-table .cell {
|
font-size: 14px;
|
color: #444;
|
}
|
.el-dialog {
|
width: 800px !important;
|
}
|
</style>
|
<style lang='less' scoped>
|
.box-content {
|
overflow-y: auto;
|
.tab,
|
.add {
|
margin-bottom: 10px;
|
}
|
}
|
.input-width {
|
width: 250px;
|
}
|
.textarea-width {
|
width: 350px;
|
}
|
.uopload-text {
|
width: 100px;
|
height: 100px;
|
border: 1px dashed #999;
|
}
|
.label-text {
|
width: 120px;
|
text-align: right;
|
}
|
.content-text {
|
width: 400px;
|
}
|
.l-15 {
|
line-height: 1.5;
|
}
|
.goods-box {
|
width: 400px;
|
}
|
</style>
|
