<template>
|
<div class="ins-duty">
|
<v-header title="值班表" :bar="bar" search @on-search="onSearch"></v-header>
|
<div class="add">
|
<button class="m_btn bgc_primary" @click="appPath('sa_ins_duty_add')">新增</button>
|
<button class="m_btn bgc_primary" @click="appMo()">下载模板</button>
|
<el-upload
|
name="file"
|
accept=".xls, .xlsx"
|
:headers="{ Authorization: Authorization }"
|
class="upload-demo"
|
:show-file-list="false"
|
:action="upl"
|
:on-success="success"
|
:on-error="error"
|
multiple
|
>
|
<el-button type="primary" class="m_btn bgc_primary">导入</el-button>
|
</el-upload>
|
|
<!-- <button class="m_btn bgc_primary" @click="down()">批量下载</button> -->
|
</div>
|
<div class="tab">
|
<v-tool-table :trs="tr" :tds="tds" first firstWidth="50px">
|
<template v-slot:first-th>
|
<div>
|
<el-checkbox @change="cheAll" v-model="alls"></el-checkbox>
|
</div>
|
</template>
|
<template v-slot:first-td="item">
|
<div>
|
<el-checkbox @change="change" v-model="item.scope.che"></el-checkbox>
|
</div>
|
</template>
|
<template v-slot:first-td="item">
|
<div>
|
<el-checkbox @change="change" v-model="item.scope.che"></el-checkbox>
|
</div>
|
</template>
|
<template v-slot:rotaPerson="{ scope }">
|
<p v-for="(person, index) in scope.newRotaPerson" :key="index">
|
<span>{{ person.name }}</span>
|
<span>{{ person.phone }}</span>
|
</p>
|
</template>
|
<template v-slot:btn="{ scope }">
|
<div class="table_flex">
|
<span @click="appPath(`sa_ins_duty_add/${scope.id}`)">编辑</span>
|
<span @click="deleteD(scope.id)">删除</span>
|
</div>
|
</template>
|
</v-tool-table>
|
</div>
|
<div class="page">
|
<v-tool-page :item="paged" @on-page="onPage"></v-tool-page>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
props: {},
|
components: {},
|
data() {
|
return {
|
Authorization: "",
|
bar: [
|
{ title: "人员", name: "rotaPerson" },
|
{ title: "电话", name: "phone" },
|
],
|
tr: [
|
{ text: "星期", val: "weekDay", width: "60px" },
|
{ text: "时间", val: "rotaDate" },
|
{ text: "值班领导", val: "leaderName" },
|
{ text: "联系电话", val: "leaderPhone" },
|
{ text: "值班人员", val: "btn", slot: "rotaPerson" },
|
// { text: "值班人员1号码", val: "a" },
|
// { text: "值班人员2", val: "a" },
|
// { text: "值班人员2号码", val: "a" },
|
// { text: "值班人员3", val: "a" },
|
// { text: "值班人员3号码", val: "a" },
|
{ text: "操作", val: "btn" },
|
],
|
tds: [],
|
patrolPerson: '',
|
searchTime: '',
|
ids: [], //选中的id集合
|
alls: false, //全选状态
|
paged: { page: 0, total: 0, r: 0, limit: 10 }, //分页
|
phone: "",
|
rotaPerson: "",
|
actionAddress: ''
|
};
|
},
|
|
watch: {},
|
|
computed: {
|
upl() {
|
return this.$js.api.http + "patrolRecord/serve/import";
|
},
|
},
|
|
created() {
|
this.Authorization = "Bearer " + demo.$session.get("token") || "";
|
this.init();
|
},
|
|
inject: ["appPath"],
|
|
methods: {
|
init() {
|
let params = {
|
communityId: 0,
|
pageNum: this.paged.page,
|
pageSize: this.paged.limit,
|
phone: this.phone,
|
rotaPerson: this.rotaPerson
|
};
|
this.$api.post('patrolRecord/pageRota', params, e => {
|
this.paged.total = e.total;
|
e.records.forEach((item, index) => {
|
const rotaPerson = item.rotaPerson ? item.rotaPerson.split(',') : [];
|
const rotaPersonPhone = item.personPhone ? item.personPhone.split(',') : [];
|
const rotaPersonName = item.personName ? item.personName.split(',') : [];
|
|
item.newRotaPerson = rotaPerson.map((d, n) => ({
|
name: rotaPersonName[n],
|
phone: rotaPersonPhone[n]
|
}));
|
item.index = index + 1;
|
this.$set(item, 'che', false)
|
});
|
this.tds = e.records;
|
console.log(this.tds);
|
})
|
},
|
|
// 监听时间选择范围
|
onSearch(v) {
|
this.phone = v.phone,
|
this.rotaPerson = v.rotaPerson,
|
this.paged.page = 1;
|
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(e) {
|
if (e.code === 200) {
|
demo.toast('导入成功');
|
} else {
|
demo.toast(e.msg);
|
}
|
this.init();
|
},
|
|
error(err) {
|
demo.toast('模板错误，请下载最新模板');
|
console.log(err);
|
},
|
|
//批量下载/下载
|
down(v) {
|
|
if (!this.ids.length) {
|
demo.toast("请勾选需要下载的内容");
|
return
|
}
|
|
let t = this
|
console.log(t.ids)
|
// this.$api.get("eldersauth/imp/templates", t.ids, (e) => {
|
// window.location.href = e;
|
// });
|
},
|
|
//下载模板
|
appMo() {
|
this.$api.get("patrolRecord/export/rota", {}, (e) => {
|
window.location.href = e;
|
});
|
},
|
|
cheAll() {
|
//全选
|
this.tds.map(item => {
|
item.che = this.alls
|
})
|
this.change()
|
},
|
|
change() {
|
//单个选择
|
this.ids = []
|
this.tds.map(item => {
|
if (item.che) {
|
this.ids.push(item.id)
|
} else {
|
this.alls = false
|
}
|
})
|
},
|
|
//删除
|
deleteD(id) {
|
this.$api.post('patrolRecord/deleteRota', [id], e => {
|
demo.toast("删除成功");
|
this.init();
|
})
|
}
|
},
|
mounted() { },
|
};
|
</script>
|
<style lang='less' scoped>
|
.upload-demo {
|
display: inline-block;
|
}
|
.ins-duty {
|
overflow-y: auto;
|
.add,
|
.tab,
|
.page {
|
margin-bottom: 10px;
|
}
|
.m_btn {
|
min-width: 80px;
|
margin-right: 10px;
|
}
|
}
|
</style>
|
