后端开发人员很少接触node.js,因为要花很多精力去学,不易上手,这里用RequreJS来简单代替WebPack吧,用它来记录JS库的路径,依赖关系,按需动态加载,这样一个前端工程化的架构也就初步形成了。
首先说一说RequreJS的基本用法,使用RequreJS需要两个文件,一个是JS库本身,一个是它的配置文件,下图我是这样放置的
RequreJS的配置文件我就叫 require.data.main.js了,里面记录了JS库的路径和依赖关系,这些路径全都是相对于require.data.main.js这个文件的相对路径,这点一定要注意,例如下图
require.config({
map: {
'*': {
css: '../lib/css'
}
},
paths: {
/*公用组件***************************************************************************************/
LinqJS: ['linq.min'],
PhotoUpload: ['photoUpload'],
SelectPage: ['v-selectpage'],
VueExtend: ['vue-extend-func'],
/*公用业务逻辑组件*******************************************************************************/
//组织机构分配用户
OrganizationUserComponent: ['../Pages/Users/OrganizationUserComponent'],
//选择用户组件
UserSelectComponent: ['../Pages/Users/UserSelectComponent'],
//客户订单转为生产订单
OrderTransferProduct: ['../Pages/Orders/OrderTransferProduct'],
//选择油罐
ChooseOiltank: ['../Pages/Orders/ChooseOilTank'],
//订单配方流程图
OrderRecipeFlow: ['../Pages/Orders/OrderRecipeFlow'],
//生产订单模板
OrderProductTemplate: ['../Pages/Orders/OrderProductTemplate'],
},
shim: {
PhotoUpload: ['css!photoUpload.css'],
SelectPage: ['css!v-selectpage.css'],
OrderTransferProduct: {
deps: ["SelectPage", "ChooseOiltank","OrderRecipeFlow"],
},
ChooseOiltank: {
deps: ["SelectPage"],
},
OrderProductTemplate: {
deps: ["LinqJS"],
},
}
});
注意这一行 css: '../lib/css',这里使用了一个RequreJS的插件,用来动态加载css的库,shim 下则记录了JS库依赖的其他库或css文件,上面的路径上JS文件全都不用写.js文件后缀名,写了反而会报404找不到的错误,RequreJS配置文件的用法比较简单,这里就不写那么详细了
在使用RequreJS库的地方要这样引用
<script type="text/javascript" data-main="/Scripts/Component/require.data.main.js" src="/Scripts/lib/require.js"></script>
跟一般JS文件引用不同的是 data-main 上面要写上配置文件的路径,这样一来就可以使用RequreJS来按需动态加载JS文件了
比如说,有一个导航树,点击以后动态的加载一个Vue组件可以这么写,
require(['UserSelectComponent'], function () {
that.userSelectShow = true;
});
上面的 UserSelectComponent 是在 require.data.main.js 这个RequreJS配置文件中早就注册好的组件别名。所以把上面的这一套连起来看,也就知道怎么用了,Vue组件的用法这里不详细写了,下面写一下如何动态的加载组件,下例是一个典型的左边导航树,右边浏览页的结构,传统的做法是iframe里面套上不同的页面,缺点不用我多说,加载慢,跨页调用等等,很多不好的地方。
上图每个Tab页都是个动态加载出来的Vue组件,所有的东西都是在同一个页面,没有跳转,加载速度和体验比iframe不止好一点点,下面给出主要代码,后端接口的代码就不贴了,因为没什么意义
导航树的界面
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<div id="app" oncontextmenu="self.event.returnValue=false">
<el-container>
<el-aside id="op" width="auto">
<el-row>
<el-col :span="24">
<button v-on:click="collapseStatus" style="border:0px;background-color: white;">
<i :class="collapseIcon" style="font-size: 20px;border:0px;"></i>
</button>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-menu class="el-menu-vertical" :collapse="!isCollapse">
<el-row gutter="1" v-show="isCollapse">
<el-col :span="24">
<div @@contextmenu="rightClick" @@click="menuVisible=false">
<el-input placeholder="输入关键字进行过滤"
v-model="filterText" clearable>
</el-input>
<el-tree class="filter-tree" ref="tree" node-key="id" :expand-on-click-node="false" default-expand-all :data="treeData"
:props="props" :filter-node-method="filterNode"
@@node-click="addTab"
@@node-contextmenu="rightClick">
</el-tree>
</div>
</el-col>
</el-row>
</el-menu>
</el-col>
</el-row>
</el-aside>
<el-main v-resize="onResize">
<el-container>
<el-tabs v-if="editableTabs.length > 0" v-model="editableTabsValue" type="border-card" closable @@tab-remove="removeTab">
<el-tab-pane v-for="(item, index) in editableTabs"
:key="item.name"
:label="item.title"
:name="item.name">
<keep-alive>
<component :is="item.content" :organization-Id="item.id" ref="tabsRef"></component>
</keep-alive>
</el-tab-pane>
</el-tabs>
</el-container>
</el-main>
</el-container>
<div v-show="menuVisible">
<ul id="menu" class="el-dropdown-menu el-popper"
style="width: 190.1px; top: 41px; left: 420px; z-index: 9999;">
<li class="el-dropdown-menu__item" v-on:click="onAddNode()">
<i class="el-icon-plus" style="color: #E6A23C"></i>
<span>创建</span>
</li>
<li class="el-dropdown-menu__item el-dropdown-menu__item--divided" v-on:click="onRenameNode()" v-if="treeData.length > 0">
<i class="el-icon-edit" style="color: #E6A23C"></i>
<span>重命名</span>
</li>
<li class="el-dropdown-menu__item el-dropdown-menu__item--divided" v-on:click=" onRemoveNode()" v-if="treeData.length > 0">
<i class="el-icon-delete-solid" style="color: #ea6f5a"></i>
<span>删除</span>
</li>
</ul>
</div>
</div>
<script src="~/Scripts/Component/vuex.js"></script>
<script src="~/Scripts/lib/lodash.min.js"></script>
<script src="~/Scripts/lib/ResizeSensor.min.js"></script>
<script src="~/Scripts/lib/Vueresize.js?v=20190712152543"></script>
<script type="text/javascript" data-main="/Scripts/Component/require.data.main.js" src="/Scripts/lib/require.js"></script>
<script src="~/Scripts/Pages/Users/Organization.js?v=20190712152543"></script>
<style scoped>
.el-icon-tools {
background: url('../icon/tools.png') center no-repeat;
background-size: cover;
}
.el-icon-tools:before {
content: "替";
font-size: 16px;
visibility: hidden;
}
.el-icon-consumables {
background: url('../icon/consumables.png') center no-repeat;
background-size: cover;
}
.el-icon-consumables:before {
content: "替";
font-size: 16px;
visibility: hidden;
}
.el-icon-types {
background: url('../icon/types.jpg') center no-repeat;
background-size: cover;
}
.el-icon-types:before {
content: "替";
font-size: 16px;
visibility: hidden;
}
.el-icon-inventory {
background: url('../icon/inventory.png') center no-repeat;
background-size: cover;
}
.el-icon-inventory:before {
content: "替";
font-size: 16px;
visibility: hidden;
}
.el-icon-machines {
background: url('../icon/machines.png') center no-repeat;
background-size: cover;
}
.el-icon-machines:before {
content: "替";
font-size: 16px;
visibility: hidden;
}
.el-icon-custom {
background: url('../icon/custom.png') center no-repeat;
background-size: cover;
}
.el-icon-custom:before {
content: "替";
font-size: 16px;
visibility: hidden;
}
.el-icon-workorders {
background: url('../icon/workorders.png') center no-repeat;
background-size: cover;
}
.el-icon-workorders:before {
content: "替";
font-size: 16px;
visibility: hidden;
}
.el-icon-workorders-created {
background: url('../icon/workordercreated.png') center no-repeat;
background-size: cover;
}
.el-icon-workorders-created:before {
content: "替";
font-size: 16px;
visibility: hidden;
}
.el-icon-workorders-confirmed {
background: url('../icon/workorderconfirmed.png') center no-repeat;
background-size: cover;
}
.el-icon-workorders-confirmed:before {
content: "替";
font-size: 16px;
visibility: hidden;
}
.el-icon-workorders-processing {
background: url('../icon/workorderprocessing.png') center no-repeat;
background-size: cover;
}
.el-icon-workorders-processing:before {
content: "替";
font-size: 16px;
visibility: hidden;
}
.el-icon-workorders-audit {
background: url('../icon/workorderaudit.png') center no-repeat;
background-size: cover;
}
.el-icon-workorders-audit:before {
content: "替";
font-size: 16px;
visibility: hidden;
}
.el-icon-workorders-completed {
background: url('../icon/workordercompleted.png') center no-repeat;
background-size: cover;
}
.el-icon-workorders-completed:before {
content: "替";
font-size: 16px;
visibility: hidden;
}
.el-icon-workorders-feedback {
background: url('../icon/feedback.png') center no-repeat;
background-size: cover;
}
.el-icon-workorders-feedback:before {
content: "替";
font-size: 16px;
visibility: hidden;
}
.el-icon-workorders-feedbackdefect {
background: url('../icon/feedbackdefect.png') center no-repeat;
background-size: cover;
}
.el-icon-workorders-feedbackdefect:before {
content: "替";
font-size: 16px;
visibility: hidden;
}
.el-icon-workorders-feedbackresult {
background: url('../icon/feedbackresult.png') center no-repeat;
background-size: cover;
}
.el-icon-workorders-feedbackresult:before {
content: "替";
font-size: 16px;
visibility: hidden;
}
.el-menu-vertical:not(.el-menu--collapse) {
width: auto;
height: auto;
font-size: 16px;
color: #1790ff;
padding: 5px;
}
.el-aside {
background-color: white;
border-radius: 5px;
padding: 1px;
}
.el-menu--collapse {
color: #1790ff;
width: 20px;
padding: 0px;
}
el-menu-vertical el-menu {
height: 100%
}
.el-input el-input--small el-input--suffix {
padding: 5px;
}
.el-breadcrumb__inner {
color: #1790ff;
}
.el-header {
padding: 20px,0px,20px,0px;
}
.el-aside {
border: 1px solid #ccc;
border-right: none;
}
.el-main {
border: 1px solid #ccc;
padding: 10px;
border-radius: 5px;
}
.inner-el-main {
border: 1px;
padding: 0px;
}
li:hover {
background-color: #1790ff;
color: white;
}
li {
font-size: 15px
}
html, body, #app, .el-container {
/*设置内部填充为0,几个布局元素之间没有间距*/
padding: 0px;
/*外部间距也是如此设置*/
margin: 0px;
/*统一设置高度为100%*/
height: 100%;
}
div.popContainer {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0);
}
img {
width: 30px;
height: 30px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -15px; /* 高度的一半 */
margin-left: -15px; /* 宽度的一半 */
}
.el-tabs__nav {
height: 35px;
font-size: 12px;
line-height: 35px;
}
.el-tabs__item {
font-size: 12px;
line-height: 35px;
}
.el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
font-size: 12px;
height: 35px;
}
</style>
最重要的是这个部分
<keep-alive>
<component :is="item.content" :organization-Id="item.id" ref="tabsRef"></component>
</keep-alive>
component : is = xxx 这是Vue里面动态加载组件的标记,keep-alive 则表示缓存这个组件,具体用法可以百度了,这里篇幅有限,不展开写了
const store = new Vuex.Store({
state: {
showUserSelect: false
},
})
var minWidth = 0;
var app;
Vue.prototype.$ELEMENT.size = "small";
$(document).ready(function () {
app = new Vue({
el: "#app",
directives: {
resize: Vueresize, //注册v-resize指令
},
store, //把 store 对象提供给 “store” 选项,这可以把 store 的实例注入所有的子组件
data: {
editableTabsValue: '',
editableTabs: [],
showUserSelect: false,
collapseIcon: 'el-icon-s-fold',
isCollapse: true,
treeData: [],
treeSelectNode: null,
filterText: '',
props: {
label: 'label',
children: 'children'
},
menuVisible: false,
},
watch: {
isCollapse(val) {
app.collapseIcon = val == true ? 'el-icon-s-fold' : 'el-icon-s-unfold';
},
filterText(val) {
app.$refs.tree.filter(val);
},
editableTabsValue(val) {
let tabs = this.editableTabs;
var activeInde = 0;
let activeName = val;
tabs.forEach((tab, index) => {
if (tab.name === activeName) {
activeInde = index;
}
});
this.$nextTick(() => {
var elMain = $('.el-main')[0];
if (elMain.scrollWidth > elMain.clientWidth || elMain.scrollHeight > elMain.clientHeight) {
app.$refs.tabsRef[activeInde].$el.style.width = elMain.clientWidth - 30 + "px";
}
});
}
},
mounted() {
this.$nextTick(() => {
app.loadTreeData();
});
},
methods: {
onSelectUser() {
require(['UserSelectComponent'], function () {
app.$store.state.showUserSelect = true;
});
},
loadTreeData() {
let loading = app.$loading();
$.ajax({
type: "POST",
url: "/Organization/LoadTree",
success: function (data) {
if (data.Success) {
app.treeData = data.Data;
}
loading.close();
}, error() {
app.$message.error("请求失败!");
loading.close();
}
});
},
rightClick(event, data, node, self) {
this.menuVisible = false
if (node) { app.treeSelectNode = node }
var menu = document.querySelector('#menu')
menu.style.left = event.clientX + 'px'
menu.style.top = event.clientY - 10 + 'px'
document.addEventListener('click', this.foo)
this.menuVisible = true
},
foo() { // 取消鼠标监听事件 菜单栏
this.menuVisible = false
document.removeEventListener('click', this.foo) // 要及时关掉监听
},
collapseStatus() {
this.collapseBtnClick = this.isCollapse;
this.isCollapse = !this.isCollapse;
let tabs = this.editableTabs;
var activeInde = 0;
let activeName = this.editableTabsValue;
tabs.forEach((tab, index) => {
if (tab.name === activeName) {
activeInde = index;
}
});
this.$nextTick(() => {
var elMain = $('.el-main')[0];
if (elMain.scrollWidth > elMain.clientWidth || elMain.scrollHeight > elMain.clientHeight) {
app.$refs.tabsRef[activeInde].$el.style.width = elMain.clientWidth - 30 + "px";
}
});
},
//节点过滤
filterNode(value, data) {
if (!value) return true;
return data.label.indexOf(value) !== -1;
},
//添加节点
onAddNode() {
app.$prompt('请输入组织机构名称', '添加组织机构', {
confirmButtonText: '确定',
cancelButtonText: '取消',
inputValue: ''
}).then(({ value }) => {
if (value.length == 0) {
return;
}
var parent_id = 0;
if (app.treeSelectNode &&
app.treeSelectNode.data &&
app.treeSelectNode.data.id) {
parent_id = app.treeSelectNode.data.id
}
var cloneObj = {
"id": "",
"label": value,
"name": value,
"parent_id": parent_id,
};
$.ajax({
type: "POST",
url: "/Organization/NewModel",
data: JSON.stringify(cloneObj),
success: function (data) {
if (data.Success) {
var newChild = data.Data;
if (!newChild.children) {
app.$set(newChild, 'children', []);
}
app.$nextTick(() => {
if (app.treeSelectNode &&
app.treeSelectNode.data &&
!app.treeSelectNode.data.children) {
app.$set(app.treeSelectNode.data, 'children', []);
}
if (app.treeData.length == 0) {
app.treeData.push(cloneObj);
}
else {
cloneObj.id = newChild.id;
app.treeSelectNode.data.children.push(cloneObj);
}
app.$message({
type: 'success',
message: '创建成功!'
});
});
}
else
app.$message.error("创建失败!");
}, error() {
app.$message.error("创建失败!");
}
});
});
},
//删除节点
onRemoveNode() {
if (app.treeSelectNode.data.children &&
app.treeSelectNode.data.children.length &&
app.treeSelectNode.data.children.length > 0) {
app.$message.error("请先删除所有子节点!");
return;
}
app.$confirm("是否删除此节点?", "提示", {
confirmButtonText: "确认",
cancelButtonText: "取消",
type: "warning"
}).then(() => {
var ids = [];
ids.push(app.treeSelectNode.data.id);
$.ajax({
type: "POST",
url: "/Organization/DeleteModel",
data: JSON.stringify({ ids: ids }),
success: function (data) {
if (data.Success) {
var treeNode = app.treeSelectNode;
var treeData = app.treeSelectNode.data;
const parent = treeNode.parent;
const children = parent.data.children || parent.data;
const index = children.findIndex(d => d.id === treeData.id);
children.splice(index, 1);
app.$message({
type: 'success',
message: '删除成功!'
});
}
}, error() {
app.$message.error("重命名失败!");
}
});
}).catch(() => {
return false;
})
},
//重命名
onRenameNode() {
app.$prompt('请输入名称', '重命名', {
confirmButtonText: '确定',
cancelButtonText: '取消',
inputValue: Object.assign(app.treeSelectNode.data.label)
}).then(({ value }) => {
if (value.length == 0) {
return;
}
var cloneObj = Object.assign(app.treeSelectNode.data);
cloneObj.label = value;
cloneObj.name = value;
$.ajax({
type: "POST",
url: "/Organization/UpdateModel",
data: JSON.stringify(cloneObj),
success: function (data) {
app.treeSelectNode.data.label = value;
if (data.Success) {
app.$message({
type: 'success',
message: '重命名完成'
});
}
}, error() {
app.$message.error("重命名失败!");
}
});
}).catch(() => {
return false;
})
},
addTab(data, node, self) {
require(['LinqJS', 'OrganizationUserComponent'], function () {
app.treeSelectNode = node;
let newTabName = app.treeSelectNode.data.label;
if (app.editableTabs.length > 0) {
var isExsit = Enumerable.From(app.editableTabs).Any(p => p.name == app.treeSelectNode.data.label);
if (isExsit) {
app.editableTabsValue = newTabName;
return;
}
}
app.editableTabs.push({
id: node.data.id,
title: newTabName,
name: newTabName,
content: 'organization-user'
});
app.editableTabsValue = newTabName;
});
},
removeTab(targetName) {
let tabs = this.editableTabs;
let activeName = this.editableTabsValue;
if (activeName === targetName) {
tabs.forEach((tab, index) => {
if (tab.name === targetName) {
let nextTab = tabs[index + 1] || tabs[index - 1];
if (nextTab) {
activeName = nextTab.name;
}
}
});
}
this.editableTabsValue = activeName;
this.editableTabs = tabs.filter(tab => tab.name !== targetName);
},
//树导航折叠的时候触发resize修改tab页的宽度
onResize(obj) {
this.$nextTick(() => {
if (app.$refs.tabsRef) {
for (i = 0; i < app.$refs.tabsRef.length; i++) {
if (obj.scrollWidth > obj.clientWidth || obj.scrollHeight > obj.clientHeight) {
var scrollWidth = obj.scrollWidth - obj.clientWidth;
app.$refs.tabsRef[i].$el.style.width = obj.scrollWidth - scrollWidth - 30 + "px";
}
else {
if (minWidth > obj.scrollWidth && minWidth == 0) {
minWidth = obj.scrollWidth
app.$refs.tabsRef[i].$el.style.width = obj.scrollWidth - 10 + "px";
}
else {
app.$refs.tabsRef[i].$el.style.width = obj.scrollWidth - 50 + "px";
}
}
}
}
});
}
}
})
})
上面就是左边的导航树及主要界面,下面给出Tab页里的组件,这个实例就比较完整了
Vue.component('organization-user', {
template: `<div class="organUserWrapper">
<div class="nav-bar" style="padding: 4px">
<el-row :gutter="4">
<el-col :span="12">
<el-button-group>
<el-button size="small" type="primary" icon="el-icon-plus" v-on:click="onSelectUser">
添 加
</el-button>
<el-button size="small" type="danger" icon="el-icon-delete" v-on:click="onDelete">
移 除
</el-button>
<el-button size="small" icon="el-icon-search" v-on:click="onSearch">
查 询
</el-button>
</el-button-group>
</el-col>
<el-col :span="12">
<el-input size="small" v-model="search.field_value" placeholder="请输入内容" style="width: 100%; float: right" clearable v-on:clear="clearSearchValue">
<el-select v-model="search.field_name" size="small" slot="prepend" placeholder="请选择" style="min-width: 100px" clearable v-on:clear="clearSearchText">
<el-option label="用户账号" value="c.user_name"></el-option>
<el-option label="用户名称" value="c.full_name"></el-option>
</el-select>
<el-button slot="thisend" type="Success" icon="el-icon-search" v-on:click="onSearch()">查询</el-button>
</el-input>
</el-col>
</el-row>
</div>
<div>
<el-row>
<el-col :span="24">
<el-table size="small" ref="multipleTable" v-on:select="handleSelectedRow" v-on:select-all="handleSelectedAllRow" border :data="table.data" :height="table.height">
<el-table-column label="选择" fixed="left" type="selection" width="40px" class="selection" prop='id'></el-table-column>
<template>
<el-table-column v-for="item in headerGroup" :key="item.label" v-if="item.show" :label="item.label" :prop="item.prop" :width="item.width"></el-table-column>
</template>
</el-table>
</el-col>
<el-col :span="24" class="remove">
<el-pagination v-on:size-change="onPageSizeChange" v-on:current-change="onPageCurrentChange"
:current-page.sync="GridPageRequest.PageIndex" :page-sizes="[20, 50, 100, 200]"
:page-size="GridPageRequest.PageSize" layout="sizes, prev, pager, next, total" :total="table.count">
</el-pagination>
</el-col>
</el-row>
</div>
<user-select :show="userSelectShow" :multiple="true" @close="CloseUserSelect" @callback="afterUserSelect"></user-select>
</div>`,
props: {
organizationId: {
type: String
},
},
data() {
return {
radio: '',
userSelectShow: false,
//表头
headerGroup: [
{ label: 'id', prop: 'id', show: false, width: "160px" },
{ label: '组织机构', prop: 'organization_name', show: true, width: "160px" },
{ label: '用户账号', prop: 'user_name', show: true, width: "160px" },
{ label: '用户名称', prop: 'full_name', show: true, width: "auto" }
],
//搜索
search: {
field_name: null,
field_value: null
},
//表格
table: {
height: "300px",
data: [],
count: 0
},
//分页
GridPageRequest: {
PageSize: 20,
PageIndex: 0,
PageTotal: 0,
Filter: []
},
selectedRows: [],
BusinessModel: {
width: "100px",
show: false,
title: "新增",
model: {
id: "",
user_name: "",
password: "",
full_name: "",
validate_status: "",
createby: "",
create_time: "",
updateby: "",
update_time: "",
remarks: "",
Items: [] //明细
},
tag: { //公共资源
validate_status: {
1001: "启用",
1002: "禁用"
}
}
}
}
},
mounted() {
var that = this;
this.$nextTick(() => {
that.getTableData();
let resize = window.onresize = function () {
that.table.height = $(window).height() - 150 + "px";
};
resize();
});
},
methods: {
//选择行
handleSelectedRow(selection, row) {
if (selection && selection.length > 0) {
this.selectedRows = selection;
} else {
this.selectedRows = [];
}
},
//全选
handleSelectedAllRow(selection) {
this.selectedRows = selection;
},
//选择用户的事件
onDelete() {
var that = this;
var ids = this.selectedRows.map((o) => o.id);
if (ids.length == 0) {
this.$message.error("请选择用户!");
return;
}
var ids = this.selectedRows.map((o) => o.id);
this.$confirm('是否确认操作所选择的行?', "删除", {
confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning'
}).then(() => {
$.ajax({
type: "POST",
url: "/OrganizationUser/DeleteModel",
data: JSON.stringify({ "ids": ids }),
datatype: "json",
success: function (data) {
//绑定数据
if (data.Success) {
that.$message({ message: '操作成功!', type: 'success' });
that.onSearch();
}
},
error() {
that.$message.error("操作失败!");
}
});
}).catch(() => {
this.$message({
type: 'info',
message: '已取消'
});
});
},
//搜索
onSearch() {
this.search = this.search;
this.GridPageRequest.Filter = [];
if (this.search.field_name &&
this.search.field_name.length > 0 &&
this.search.field_value &&
this.search.field_value.length > 0) {
this.GridPageRequest.Filter.push({ "Operator": "and", "Where": this.search.field_name + " like " + "'%" + this.search.field_value + "%'" });
}
this.getTableData();
},
//请求表格数据
getTableData() {
this.GridPageRequest.Filter.push({ "Operator": "and", "Where": "b.id =" + "'" + this.organizationId + "'" });
let loading = this.$loading();
var that = this;
$.ajax({
type: "POST",
url: "/OrganizationUser/LoadPageData",
data: JSON.stringify(Object.assign(that.GridPageRequest)),
success: function (data) {
if (data.Success) {
that.table.data = data.Data;
that.table.count = data.TotalRows;
}
loading.close();
}, error() {
that.$message.error("请求失败!");
loading.close();
}
});
},
//修改分页大小
onPageSizeChange(now) {
this.GridPageRequest.PageSize = now;
this.getTableData();
},
//修改分页页数
onPageCurrentChange(now) {
this.GridPageRequest.PageIndex = now;
this.getTableData();
},
clearSearchText() {
this.search.field_name = "";
this.GridPageRequest.Filter = [];
},
clearSearchValue() {
this.search.field_value = "";
this.GridPageRequest.Filter = [];
},
onSelectUser() {
var that = this;
require(['UserSelectComponent'], function () {
that.userSelectShow = true;
});
},
CloseUserSelect() {
this.userSelectShow = false;
},
afterUserSelect(ids) {
var that = this;
$.ajax({
type: "POST",
url: "/OrganizationUser/NewModels",
data: JSON.stringify({ organizationId: that.organizationId, userIds: ids }),
success: function (data) {
if (data.Success) {
that.getTableData();
that.$message({
type: 'success',
message: '操作完成!'
});
}
}, error() {
that.$message.error("操作完成!");
}
});
}
}
});