@{
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>
