@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script src="~/Scripts/vue.js"></script>
<link href="~/Content/Iview/iview.css" rel="stylesheet" />
<script src="~/Scripts/IView/iview.min.js"></script>
<script src="~/Scripts/axios.min.js"></script>
<script src="~/Scripts/vee-validate2/vee-validate.js"></script>
<link href="~/Content/Iview/iview.css" rel="stylesheet" />
<script src="~/Scripts/IView/iview.min.js"></script>
<script src="~/Scripts/axios.min.js"></script>
<script src="~/Scripts/vee-validate2/vee-validate.js"></script>
@*<script src="https://cdn.jsdelivr.net/vee-validate/2.0.0-rc.3/vee-validate.min.js"></script>*@
<style scoped>
.paging {
float: right;
margin-top: 10px;
}
input.invalid {
border-color: red;
}
border-color: red;
}
.errorColor {
color: red;
}
</style>
</head>
<body>
<div>
</div>
color: red;
}
</style>
</head>
<body>
<div>
</div>
<div id="app1">
{{ message }}
</div>
<div id="app2" >
<input type="text" v-model="params.FName" placeholder="输入关键字查询" />
<button v-on:click="queryData">查询</button>
@*<p v-for="item in data">
{{item.userName}}
</p>*@
{{item.userName}}
</p>*@
<template>
<i-table border v-bind:loading="page.loading" v-bind:columns="historyColumns" v-bind:data="data"></i-table>
<Page ref="pages" placement="top" size="small"
show-total show-sizer
:current="params.offset" :page-size="params.limit"
:total="page.totalCount" :class="paging"
:show-elevator="true"
@*注意这里的page-size-opts绑定，不支持省略v-bind绑定*@
v-bind:page-size-opts="page.arrPageSize"
@@on-change="changePage" @@on-page-size-change='handlePageSize'>
</Page>
show-total show-sizer
:current="params.offset" :page-size="params.limit"
:total="page.totalCount" :class="paging"
:show-elevator="true"
@*注意这里的page-size-opts绑定，不支持省略v-bind绑定*@
v-bind:page-size-opts="page.arrPageSize"
@@on-change="changePage" @@on-page-size-change='handlePageSize'>
</Page>
</template>
<form novalidate>
<template>
@*<Button v-on:click="modelDialogOk.modal = true">用户添加</Button>*@
@*添加数据弹层*@
<Modal v-model="modelDialogOk.modal"
title="二开用户添加"
@@on-ok="ok" v-bind:loading="modelDialogOk.loading"
@@on-cancel="cancel">
<content>
<p>ID:{{user.ID}}</p>
<Modal v-model="modelDialogOk.modal"
title="二开用户添加"
@@on-ok="ok" v-bind:loading="modelDialogOk.loading"
@@on-cancel="cancel">
<content>
<p>ID:{{user.ID}}</p>
<p>账号/姓名：{{user.userName}}</p>
<div>
权限：<Select name="writeRight" v-model="model_right" >
<option value="" key="">请选择</option>
<Option v-for="item in rightData" v-bind:value="item.writeRight" v-bind:key="item.writeRight">{{ item.writeRight }}</Option>
</Select>
</div>
<br />
<div v-bind:class="modelDialogOk.errorColor">{{errorMsg}}</div>
</content>
</Modal>
权限：<Select name="writeRight" v-model="model_right" >
<option value="" key="">请选择</option>
<Option v-for="item in rightData" v-bind:value="item.writeRight" v-bind:key="item.writeRight">{{ item.writeRight }}</Option>
</Select>
</div>
<br />
<div v-bind:class="modelDialogOk.errorColor">{{errorMsg}}</div>
</content>
</Modal>
@*删除提醒*@
<Modal v-model="modelDialogDelete.modal"
title="确定删除二开账户吗?"
@@on-ok="del" v-bind:loading="modelDialogDelete.loading"
@@on-cancel="cancel">
<content>
<p>ID:{{user.ID}}</p>
<p>账号/姓名:{{user.userName}}</p>
</content>
</Modal>
</template>
</form>
<Modal v-model="modelDialogDelete.modal"
title="确定删除二开账户吗?"
@@on-ok="del" v-bind:loading="modelDialogDelete.loading"
@@on-cancel="cancel">
<content>
<p>ID:{{user.ID}}</p>
<p>账号/姓名:{{user.userName}}</p>
</content>
</Modal>
</template>
</form>
</div>
<script>
var vm1 = new Vue({
el: '#app1',
data: {
message: '用户列表：'
}
});
el: '#app1',
data: {
message: '用户列表：'
}
});
var vm2=new Vue({
el: '#app2',
data: {
//csss类
paging: "paging",
//数据
data: [],
rightData: [],
model_right: '',
historyColumns: [
{
title: 'ID',
key: 'ID'
},
{
title: '用户',
key: 'userName',
render: (h, params) => {
return h('div', [
h('Icon', {
props: {
type: 'person'
}
}),
h('strong', params.row.userName)
]);
}
},
{
title: "权限组",
key: "writeRight"
},
{
title: 'Action',
key: 'action',
width: 180,
align: 'center',
render: (h, params) => {
return h('div', [
h('Button', {
props: {
type: 'primary',
size: 'small'
},
attrs: {
//根据内容设置添加按钮是否可用
disabled: vm2.data[params.index].writeRight.indexOf("不存在")> -1 ? false : true
},
style: {
marginRight: '5px'
},
on: {
click: () => {
vm2.showAddData(params.index)
}
}
}, '添加'),
h('Button', {
props: {
type: 'success',
size: 'small'
},
attrs: {
//根据内容设置添加按钮是否可用
disabled: vm2.data[params.index].writeRight.indexOf("不存在") == -1 ? false : true
},
style: {
marginRight: '5px'
},
on: {
click: () => {
vm2.editData(params.index)
}
}
}, '编辑'),
h('Button', {
props: {
type: 'error',
size: 'small'
},
attrs: {
//根据内容设置添加按钮是否可用
disabled: vm2.data[params.index].writeRight.indexOf("不存在") == -1 ? false : true
},
on: {
click: () => {
vm2.showDelete(params.index)
}
}
}, '删除')
]);
}
}
el: '#app2',
data: {
//csss类
paging: "paging",
//数据
data: [],
rightData: [],
model_right: '',
historyColumns: [
{
title: 'ID',
key: 'ID'
},
{
title: '用户',
key: 'userName',
render: (h, params) => {
return h('div', [
h('Icon', {
props: {
type: 'person'
}
}),
h('strong', params.row.userName)
]);
}
},
{
title: "权限组",
key: "writeRight"
},
{
title: 'Action',
key: 'action',
width: 180,
align: 'center',
render: (h, params) => {
return h('div', [
h('Button', {
props: {
type: 'primary',
size: 'small'
},
attrs: {
//根据内容设置添加按钮是否可用
disabled: vm2.data[params.index].writeRight.indexOf("不存在")> -1 ? false : true
},
style: {
marginRight: '5px'
},
on: {
click: () => {
vm2.showAddData(params.index)
}
}
}, '添加'),
h('Button', {
props: {
type: 'success',
size: 'small'
},
attrs: {
//根据内容设置添加按钮是否可用
disabled: vm2.data[params.index].writeRight.indexOf("不存在") == -1 ? false : true
},
style: {
marginRight: '5px'
},
on: {
click: () => {
vm2.editData(params.index)
}
}
}, '编辑'),
h('Button', {
props: {
type: 'error',
size: 'small'
},
attrs: {
//根据内容设置添加按钮是否可用
disabled: vm2.data[params.index].writeRight.indexOf("不存在") == -1 ? false : true
},
on: {
click: () => {
vm2.showDelete(params.index)
}
}
}, '删除')
]);
}
}
],
page:{
//分页数
arrPageSize: [10, 20, 30, 40,50,100],
////分页大小
//pageSize: 10,
// //当前页面
//pageCurrent: 1,
page:{
//分页数
arrPageSize: [10, 20, 30, 40,50,100],
////分页大小
//pageSize: 10,
// //当前页面
//pageCurrent: 1,
//总分页数
pageCount: 1,
//总数
totalCount: 80,
//表格是否加载中
loading:false
},
params: {
//需要跳转的页面，pageCurrent
offset: 1,
//页大小
limit: 10,
//关键字查询
FName: ""
},
user: {
ID: "",
userName: "",
index: 0, //只是表格行序号，与用户表对象没联系，用户删除后台数据前同时删除表格当前行数据
isEdit:false
},
errorMsg:"",
modelDialogOk: {
modal: false,
loading:true,
errorColor: "errorColor"
},
modelDialogDelete: {
modal: false,
loading: true,
errorColor: "errorColor"
},
},
beforCreate() {
},
created() {
this.getRight();
this.queryData();
},
watch: {
FName: function (val) {
this.params.FName = val;
}
},
methods: {
//从二开用户表获取权限
getRight() {
axios.post("/Sys/ExUser/GetRight", this.params).then((res) => {
this.rightData = res.data;
})
},
pageCount: 1,
//总数
totalCount: 80,
//表格是否加载中
loading:false
},
params: {
//需要跳转的页面，pageCurrent
offset: 1,
//页大小
limit: 10,
//关键字查询
FName: ""
},
user: {
ID: "",
userName: "",
index: 0, //只是表格行序号，与用户表对象没联系，用户删除后台数据前同时删除表格当前行数据
isEdit:false
},
errorMsg:"",
modelDialogOk: {
modal: false,
loading:true,
errorColor: "errorColor"
},
modelDialogDelete: {
modal: false,
loading: true,
errorColor: "errorColor"
},
},
beforCreate() {
},
created() {
this.getRight();
this.queryData();
},
watch: {
FName: function (val) {
this.params.FName = val;
}
},
methods: {
//从二开用户表获取权限
getRight() {
axios.post("/Sys/ExUser/GetRight", this.params).then((res) => {
this.rightData = res.data;
})
},
//查询表数据
queryData() {
this.page.loading = true;
axios.post("/Sys/ExUser/GetK3Users", this.params).then((res) => {
this.data = res.data.data;
this.page.totalCount = res.data.total;
var a = this.page.totalCount % 10;
this.page.pageCount = a == 0 ? parseInt(this.page.totalCount / 10) : parseInt(this.page.totalCount / 10) + 1;
})
this.page.loading = false;
},
changePage(index) {
this.params.offset = index;
// this.page.pageCurrent = index;
this.queryData();
},
handlePageSize(value) {
this.params.limit = value;
// this.page.pageSize = value
this.queryData();
},
queryData() {
this.page.loading = true;
axios.post("/Sys/ExUser/GetK3Users", this.params).then((res) => {
this.data = res.data.data;
this.page.totalCount = res.data.total;
var a = this.page.totalCount % 10;
this.page.pageCount = a == 0 ? parseInt(this.page.totalCount / 10) : parseInt(this.page.totalCount / 10) + 1;
})
this.page.loading = false;
},
changePage(index) {
this.params.offset = index;
// this.page.pageCurrent = index;
this.queryData();
},
handlePageSize(value) {
this.params.limit = value;
// this.page.pageSize = value
this.queryData();
},
showAddData(index) {
this.user.index = index;
this.model_right = ""; //权限默认选项
this.modelDialogOk.modal = true; //弹层
this.user.ID=this.data[index].ID;
this.user.userName = this.data[index].userName;
this.user.isEdit = false;
//this.$Modal.info({
// title: 'User Info',
// content: `ID：${this.data[index].ID}<br>姓名&账号：${this.data[index].userName}`
//});
},
editData(index) {
this.user.index = index;
this.model_right = this.data[index].writeRight; //权限默认选项
this.modelDialogOk.modal = true; //弹层
this.user.ID = this.data[index].ID;
this.user.userName = this.data[index].userName;
this.user.isEdit = true;
},
removeData(index) {
this.data.splice(index, 1);
},
this.user.index = index;
this.model_right = ""; //权限默认选项
this.modelDialogOk.modal = true; //弹层
this.user.ID=this.data[index].ID;
this.user.userName = this.data[index].userName;
this.user.isEdit = false;
//this.$Modal.info({
// title: 'User Info',
// content: `ID：${this.data[index].ID}<br>姓名&账号：${this.data[index].userName}`
//});
},
editData(index) {
this.user.index = index;
this.model_right = this.data[index].writeRight; //权限默认选项
this.modelDialogOk.modal = true; //弹层
this.user.ID = this.data[index].ID;
this.user.userName = this.data[index].userName;
this.user.isEdit = true;
},
removeData(index) {
this.data.splice(index, 1);
},
changeLoading(){
this.modelDialogOk.loading = false;
this.$nextTick(() => {
this.modelDialogOk.loading = true;
});
},
showDelete(index) {
this.model_right = ""; //权限默认选项
this.modelDialogDelete.modal = true; //弹层
this.modelDialogOk.loading = false;
this.$nextTick(() => {
this.modelDialogOk.loading = true;
});
},
showDelete(index) {
this.model_right = ""; //权限默认选项
this.modelDialogDelete.modal = true; //弹层
this.user.ID = this.data[index].ID;
this.user.userName = this.data[index].userName;
this.user.index = index;
this.user.isEdit = false;
},
ok () {
if (this.model_right == "") {
this.errorMsg = "数据不完整";
return this.changeLoading();
}
else {
var status = 200;
var msg = "添加数据成功";
this.user.userName = this.data[index].userName;
this.user.index = index;
this.user.isEdit = false;
},
ok () {
if (this.model_right == "") {
this.errorMsg = "数据不完整";
return this.changeLoading();
}
else {
var status = 200;
var msg = "添加数据成功";
var url = "/Sys/ExUser/Add";
if (this.user.isEdit) {
url = "/Sys/ExUser/Edit";
msg = "修改数据成功";
}
url = "/Sys/ExUser/Edit";
msg = "修改数据成功";
}
axios.post(url, {
fname: this.user.userName,
writeRight: this.model_right
}).then((res) => {
status = res.data.Status;
msg = res.data.msg;
fname: this.user.userName,
writeRight: this.model_right
}).then((res) => {
status = res.data.Status;
msg = res.data.msg;
if (status == 200) { this.data[this.user.index].writeRight = this.model_right; }
});
});
this.$Message.info(msg);
setTimeout(() => {
this.changeLoading();
this.modelDialogOk.modal = false;
}, 1000);
return false;
}
},
del() {
var status = 200;
var msg = "删除数据成功";
axios.post("/Sys/ExUser/Delete", {
fname: this.user.userName
}).then((res) => {
status = res.data.Status;
msg = res.data.msg;
});
setTimeout(() => {
this.changeLoading();
this.modelDialogOk.modal = false;
}, 1000);
return false;
}
},
del() {
var status = 200;
var msg = "删除数据成功";
axios.post("/Sys/ExUser/Delete", {
fname: this.user.userName
}).then((res) => {
status = res.data.Status;
msg = res.data.msg;
});
this.$Message.info(msg);
setTimeout(() => {
this.modelDialogDelete.modal = false;
}, 1000);
setTimeout(() => {
this.modelDialogDelete.modal = false;
}, 1000);
if (status == 200) { this.data.splice(this.user.index, 1); }
},
cancel () {
this.$Message.info('Clicked cancel');
},
}
},
cancel () {
this.$Message.info('Clicked cancel');
},
}
});
</script>
</body>
</html>
