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