wangfukang
1 month ago
3 changed files with 346 additions and 0 deletions
@ -0,0 +1,322 @@ |
|||
<style lang="less"> |
|||
@import "@/styles/table-common.less"; |
|||
</style> |
|||
<template> |
|||
<div class="search"> |
|||
<Row class="operation"> |
|||
<Button @click="add" type="primary" icon="md-add">新增</Button> |
|||
<Button @click="delAll" icon="md-trash">批量删除</Button> |
|||
<Button @click="getDataList" icon="md-refresh">刷新</Button> |
|||
<Input |
|||
v-model="searchForm.title" |
|||
suffix="ios-search" |
|||
@on-change="getDataList" |
|||
placeholder="输入协议标题搜索" |
|||
clearable |
|||
style="width: 250px" |
|||
/> |
|||
</Row> |
|||
<Alert show-icon> |
|||
已选择 |
|||
<span class="select-count">{{ selectList.length }}</span> 项 |
|||
<a class="select-clear" @click="clearSelectAll">清空</a> |
|||
</Alert> |
|||
<Table |
|||
:loading="loading" |
|||
border |
|||
:columns="columns" |
|||
:data="data" |
|||
ref="table" |
|||
sortable="custom" |
|||
@on-sort-change="changeSort" |
|||
@on-selection-change="changeSelect" |
|||
></Table> |
|||
<Row type="flex" justify="end" class="page"> |
|||
<Page |
|||
:current="searchForm.pageNumber" |
|||
:total="total" |
|||
:page-size="searchForm.pageSize" |
|||
@on-change="changePage" |
|||
@on-page-size-change="changePageSize" |
|||
:page-size-opts="[10, 20, 50]" |
|||
size="small" |
|||
show-total |
|||
show-elevator |
|||
show-sizer |
|||
></Page> |
|||
</Row> |
|||
|
|||
<Modal |
|||
:title="modalTitle" |
|||
v-model="modalVisible" |
|||
:mask-closable="false" |
|||
:width="900" |
|||
> |
|||
<Form ref="form" :model="form" label-position="top" :rules="formValidate"> |
|||
<FormItem label="标题" prop="title"> |
|||
<Input v-model="form.title" maxlength="80" show-word-limit placeholder="请输入协议标题" /> |
|||
</FormItem> |
|||
<FormItem label="内容" prop="content"> |
|||
<editor v-model="form.content" height="250"></editor> |
|||
</FormItem> |
|||
</Form> |
|||
<div slot="footer"> |
|||
<Button type="text" @click="handleCancel">取消</Button> |
|||
<Button type="primary" :loading="submitLoading" @click="handleSubmit">提交</Button> |
|||
</div> |
|||
</Modal> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { |
|||
getAgreementSettingData, |
|||
addAgreementSetting, |
|||
editAgreementSetting, |
|||
deleteAgreementSetting, |
|||
} from "@/api/index"; |
|||
import editor from "@/views/my-components/hiver/editor"; |
|||
|
|||
export default { |
|||
name: "protocol-setting", |
|||
components: { |
|||
editor, |
|||
}, |
|||
data() { |
|||
return { |
|||
loading: true, |
|||
searchForm: { |
|||
title: "", |
|||
pageNumber: 1, |
|||
pageSize: 10, |
|||
sort: "sortOrder", |
|||
order: "asc", |
|||
}, |
|||
modalType: 0, |
|||
modalVisible: false, |
|||
modalTitle: "", |
|||
form: { |
|||
title: "", |
|||
content: "", |
|||
}, |
|||
formValidate: { |
|||
title: [{ required: true, message: "请输入标题", trigger: "blur" }], |
|||
content: [{ required: true, message: "请输入内容", trigger: "change" }], |
|||
}, |
|||
submitLoading: false, |
|||
selectList: [], |
|||
columns: [ |
|||
{ |
|||
type: "selection", |
|||
width: 60, |
|||
align: "center", |
|||
}, |
|||
{ |
|||
type: "index", |
|||
width: 60, |
|||
align: "center", |
|||
}, |
|||
{ |
|||
title: "标题", |
|||
key: "title", |
|||
minWidth: 260, |
|||
sortable: true, |
|||
}, |
|||
{ |
|||
title: "创建时间", |
|||
key: "createTime", |
|||
sortable: true, |
|||
width: 190, |
|||
}, |
|||
{ |
|||
title: "更新时间", |
|||
key: "updateTime", |
|||
sortable: true, |
|||
width: 190, |
|||
}, |
|||
{ |
|||
title: "操作", |
|||
key: "action", |
|||
align: "center", |
|||
width: 180, |
|||
fixed: "right", |
|||
render: (h, params) => { |
|||
return h("div", [ |
|||
h( |
|||
"a", |
|||
{ |
|||
on: { |
|||
click: () => { |
|||
this.edit(params.row); |
|||
}, |
|||
}, |
|||
}, |
|||
"编辑" |
|||
), |
|||
h("Divider", { |
|||
props: { |
|||
type: "vertical", |
|||
}, |
|||
}), |
|||
h( |
|||
"a", |
|||
{ |
|||
on: { |
|||
click: () => { |
|||
this.remove(params.row); |
|||
}, |
|||
}, |
|||
}, |
|||
"删除" |
|||
), |
|||
]); |
|||
}, |
|||
}, |
|||
], |
|||
data: [], |
|||
total: 0, |
|||
}; |
|||
}, |
|||
methods: { |
|||
init() { |
|||
this.getDataList(); |
|||
}, |
|||
changePage(v) { |
|||
this.searchForm.pageNumber = v; |
|||
this.getDataList(); |
|||
this.clearSelectAll(); |
|||
}, |
|||
changePageSize(v) { |
|||
this.searchForm.pageSize = v; |
|||
this.getDataList(); |
|||
}, |
|||
changeSort(e) { |
|||
this.searchForm.sort = e.key; |
|||
this.searchForm.order = e.order; |
|||
if (e.order == "normal") { |
|||
this.searchForm.order = ""; |
|||
} |
|||
this.getDataList(); |
|||
}, |
|||
getDataList() { |
|||
this.loading = true; |
|||
getAgreementSettingData(this.searchForm).then((res) => { |
|||
this.loading = false; |
|||
if (res.success) { |
|||
const result = res.result || {}; |
|||
this.data = result.content || result.records || []; |
|||
this.total = result.totalElements || result.total || 0; |
|||
} |
|||
}).catch(() => { |
|||
this.loading = false; |
|||
}); |
|||
}, |
|||
handleCancel() { |
|||
this.modalVisible = false; |
|||
}, |
|||
handleSubmit() { |
|||
this.$refs.form.validate((valid) => { |
|||
if (!valid) { |
|||
return; |
|||
} |
|||
this.submitLoading = true; |
|||
const request = this.modalType == 0 ? addAgreementSetting : editAgreementSetting; |
|||
const params = Object.assign({}, this.form); |
|||
if (this.modalType == 0) { |
|||
delete params.id; |
|||
} |
|||
request(params).then((res) => { |
|||
this.submitLoading = false; |
|||
if (res.success) { |
|||
this.$Message.success("操作成功"); |
|||
this.getDataList(); |
|||
this.modalVisible = false; |
|||
} |
|||
}).catch(() => { |
|||
this.submitLoading = false; |
|||
}); |
|||
}); |
|||
}, |
|||
add() { |
|||
this.modalType = 0; |
|||
this.modalTitle = "新增协议"; |
|||
this.form = { |
|||
title: "", |
|||
content: "", |
|||
}; |
|||
this.$nextTick(() => { |
|||
this.$refs.form && this.$refs.form.resetFields(); |
|||
}); |
|||
this.modalVisible = true; |
|||
}, |
|||
edit(v) { |
|||
this.modalType = 1; |
|||
this.modalTitle = "编辑协议"; |
|||
const data = JSON.parse(JSON.stringify(v)); |
|||
Object.keys(data).forEach((key) => { |
|||
if (data[key] == null) { |
|||
data[key] = ""; |
|||
} |
|||
}); |
|||
this.form = data; |
|||
this.$nextTick(() => { |
|||
this.$refs.form && this.$refs.form.resetFields(); |
|||
this.form = data; |
|||
}); |
|||
this.modalVisible = true; |
|||
}, |
|||
remove(v) { |
|||
this.$Modal.confirm({ |
|||
title: "确认删除", |
|||
content: "您确认要删除 " + v.title + " ?", |
|||
loading: true, |
|||
onOk: () => { |
|||
deleteAgreementSetting({ ids: v.id }).then((res) => { |
|||
this.$Modal.remove(); |
|||
if (res.success) { |
|||
this.clearSelectAll(); |
|||
this.$Message.success("操作成功"); |
|||
this.getDataList(); |
|||
} |
|||
}); |
|||
}, |
|||
}); |
|||
}, |
|||
clearSelectAll() { |
|||
this.$refs.table && this.$refs.table.selectAll(false); |
|||
}, |
|||
changeSelect(e) { |
|||
this.selectList = e; |
|||
}, |
|||
delAll() { |
|||
if (this.selectList.length <= 0) { |
|||
this.$Message.warning("您还未选择要删除的数据"); |
|||
return; |
|||
} |
|||
this.$Modal.confirm({ |
|||
title: "确认删除", |
|||
content: "您确认要删除所选的 " + this.selectList.length + " 条数据?", |
|||
loading: true, |
|||
onOk: () => { |
|||
let ids = ""; |
|||
this.selectList.forEach(function (e) { |
|||
ids += e.id + ","; |
|||
}); |
|||
ids = ids.substring(0, ids.length - 1); |
|||
deleteAgreementSetting({ ids: ids }).then((res) => { |
|||
this.$Modal.remove(); |
|||
if (res.success) { |
|||
this.$Message.success("操作成功"); |
|||
this.clearSelectAll(); |
|||
this.getDataList(); |
|||
} |
|||
}); |
|||
}, |
|||
}); |
|||
}, |
|||
}, |
|||
mounted() { |
|||
this.init(); |
|||
}, |
|||
}; |
|||
</script> |
|||
Loading…
Reference in new issue