当前位置:   article > 正文

VUE传统方式开发下的 Element UI + RequreJS单页应用_vue request.js 中使用element

vue request.js 中使用element

后端开发人员很少接触node.js,因为要花很多精力去学,不易上手,这里用RequreJS来简单代替WebPack吧,用它来记录JS库的路径,依赖关系,按需动态加载,这样一个前端工程化的架构也就初步形成了。

首先说一说RequreJS的基本用法,使用RequreJS需要两个文件,一个是JS库本身,一个是它的配置文件,下图我是这样放置的

RequreJS的配置文件我就叫 require.data.main.js了,里面记录了JS库的路径和依赖关系,这些路径全都是相对于require.data.main.js这个文件的相对路径,这点一定要注意,例如下图

  1. require.config({
  2. map: {
  3. '*': {
  4. css: '../lib/css'
  5. }
  6. },
  7. paths: {
  8. /*公用组件***************************************************************************************/
  9. LinqJS: ['linq.min'],
  10. PhotoUpload: ['photoUpload'],
  11. SelectPage: ['v-selectpage'],
  12. VueExtend: ['vue-extend-func'],
  13. /*公用业务逻辑组件*******************************************************************************/
  14. //组织机构分配用户
  15. OrganizationUserComponent: ['../Pages/Users/OrganizationUserComponent'],
  16. //选择用户组件
  17. UserSelectComponent: ['../Pages/Users/UserSelectComponent'],
  18. //客户订单转为生产订单
  19. OrderTransferProduct: ['../Pages/Orders/OrderTransferProduct'],
  20. //选择油罐
  21. ChooseOiltank: ['../Pages/Orders/ChooseOilTank'],
  22. //订单配方流程图
  23. OrderRecipeFlow: ['../Pages/Orders/OrderRecipeFlow'],
  24. //生产订单模板
  25. OrderProductTemplate: ['../Pages/Orders/OrderProductTemplate'],
  26. },
  27. shim: {
  28. PhotoUpload: ['css!photoUpload.css'],
  29. SelectPage: ['css!v-selectpage.css'],
  30. OrderTransferProduct: {
  31. deps: ["SelectPage", "ChooseOiltank","OrderRecipeFlow"],
  32. },
  33. ChooseOiltank: {
  34. deps: ["SelectPage"],
  35. },
  36. OrderProductTemplate: {
  37. deps: ["LinqJS"],
  38. },
  39. }
  40. });

注意这一行 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组件可以这么写,

  1. require(['UserSelectComponent'], function () {
  2. that.userSelectShow = true;
  3. });

上面的 UserSelectComponent 是在 require.data.main.js 这个RequreJS配置文件中早就注册好的组件别名。所以把上面的这一套连起来看,也就知道怎么用了,Vue组件的用法这里不详细写了,下面写一下如何动态的加载组件,下例是一个典型的左边导航树,右边浏览页的结构,传统的做法是iframe里面套上不同的页面,缺点不用我多说,加载慢,跨页调用等等,很多不好的地方。

上图每个Tab页都是个动态加载出来的Vue组件,所有的东西都是在同一个页面,没有跳转,加载速度和体验比iframe不止好一点点,下面给出主要代码,后端接口的代码就不贴了,因为没什么意义

导航树的界面

  1. @{
  2. ViewBag.Title = "Index";
  3. Layout = "~/Views/Shared/_Layout.cshtml";
  4. }
  5. <div id="app" oncontextmenu="self.event.returnValue=false">
  6. <el-container>
  7. <el-aside id="op" width="auto">
  8. <el-row>
  9. <el-col :span="24">
  10. <button v-on:click="collapseStatus" style="border:0px;background-color: white;">
  11. <i :class="collapseIcon" style="font-size: 20px;border:0px;"></i>
  12. </button>
  13. </el-col>
  14. </el-row>
  15. <el-row>
  16. <el-col :span="24">
  17. <el-menu class="el-menu-vertical" :collapse="!isCollapse">
  18. <el-row gutter="1" v-show="isCollapse">
  19. <el-col :span="24">
  20. <div @@contextmenu="rightClick" @@click="menuVisible=false">
  21. <el-input placeholder="输入关键字进行过滤"
  22. v-model="filterText" clearable>
  23. </el-input>
  24. <el-tree class="filter-tree" ref="tree" node-key="id" :expand-on-click-node="false" default-expand-all :data="treeData"
  25. :props="props" :filter-node-method="filterNode"
  26. @@node-click="addTab"
  27. @@node-contextmenu="rightClick">
  28. </el-tree>
  29. </div>
  30. </el-col>
  31. </el-row>
  32. </el-menu>
  33. </el-col>
  34. </el-row>
  35. </el-aside>
  36. <el-main v-resize="onResize">
  37. <el-container>
  38. <el-tabs v-if="editableTabs.length > 0" v-model="editableTabsValue" type="border-card" closable @@tab-remove="removeTab">
  39. <el-tab-pane v-for="(item, index) in editableTabs"
  40. :key="item.name"
  41. :label="item.title"
  42. :name="item.name">
  43. <keep-alive>
  44. <component :is="item.content" :organization-Id="item.id" ref="tabsRef"></component>
  45. </keep-alive>
  46. </el-tab-pane>
  47. </el-tabs>
  48. </el-container>
  49. </el-main>
  50. </el-container>
  51. <div v-show="menuVisible">
  52. <ul id="menu" class="el-dropdown-menu el-popper"
  53. style="width: 190.1px; top: 41px; left: 420px; z-index: 9999;">
  54. <li class="el-dropdown-menu__item" v-on:click="onAddNode()">
  55. <i class="el-icon-plus" style="color: #E6A23C"></i>
  56. <span>创建</span>
  57. </li>
  58. <li class="el-dropdown-menu__item el-dropdown-menu__item--divided" v-on:click="onRenameNode()" v-if="treeData.length > 0">
  59. <i class="el-icon-edit" style="color: #E6A23C"></i>
  60. <span>重命名</span>
  61. </li>
  62. <li class="el-dropdown-menu__item el-dropdown-menu__item--divided" v-on:click=" onRemoveNode()" v-if="treeData.length > 0">
  63. <i class="el-icon-delete-solid" style="color: #ea6f5a"></i>
  64. <span>删除</span>
  65. </li>
  66. </ul>
  67. </div>
  68. </div>
  69. <script src="~/Scripts/Component/vuex.js"></script>
  70. <script src="~/Scripts/lib/lodash.min.js"></script>
  71. <script src="~/Scripts/lib/ResizeSensor.min.js"></script>
  72. <script src="~/Scripts/lib/Vueresize.js?v=20190712152543"></script>
  73. <script type="text/javascript" data-main="/Scripts/Component/require.data.main.js" src="/Scripts/lib/require.js"></script>
  74. <script src="~/Scripts/Pages/Users/Organization.js?v=20190712152543"></script>
  75. <style scoped>
  76. .el-icon-tools {
  77. background: url('../icon/tools.png') center no-repeat;
  78. background-size: cover;
  79. }
  80. .el-icon-tools:before {
  81. content: "替";
  82. font-size: 16px;
  83. visibility: hidden;
  84. }
  85. .el-icon-consumables {
  86. background: url('../icon/consumables.png') center no-repeat;
  87. background-size: cover;
  88. }
  89. .el-icon-consumables:before {
  90. content: "替";
  91. font-size: 16px;
  92. visibility: hidden;
  93. }
  94. .el-icon-types {
  95. background: url('../icon/types.jpg') center no-repeat;
  96. background-size: cover;
  97. }
  98. .el-icon-types:before {
  99. content: "替";
  100. font-size: 16px;
  101. visibility: hidden;
  102. }
  103. .el-icon-inventory {
  104. background: url('../icon/inventory.png') center no-repeat;
  105. background-size: cover;
  106. }
  107. .el-icon-inventory:before {
  108. content: "替";
  109. font-size: 16px;
  110. visibility: hidden;
  111. }
  112. .el-icon-machines {
  113. background: url('../icon/machines.png') center no-repeat;
  114. background-size: cover;
  115. }
  116. .el-icon-machines:before {
  117. content: "替";
  118. font-size: 16px;
  119. visibility: hidden;
  120. }
  121. .el-icon-custom {
  122. background: url('../icon/custom.png') center no-repeat;
  123. background-size: cover;
  124. }
  125. .el-icon-custom:before {
  126. content: "替";
  127. font-size: 16px;
  128. visibility: hidden;
  129. }
  130. .el-icon-workorders {
  131. background: url('../icon/workorders.png') center no-repeat;
  132. background-size: cover;
  133. }
  134. .el-icon-workorders:before {
  135. content: "替";
  136. font-size: 16px;
  137. visibility: hidden;
  138. }
  139. .el-icon-workorders-created {
  140. background: url('../icon/workordercreated.png') center no-repeat;
  141. background-size: cover;
  142. }
  143. .el-icon-workorders-created:before {
  144. content: "替";
  145. font-size: 16px;
  146. visibility: hidden;
  147. }
  148. .el-icon-workorders-confirmed {
  149. background: url('../icon/workorderconfirmed.png') center no-repeat;
  150. background-size: cover;
  151. }
  152. .el-icon-workorders-confirmed:before {
  153. content: "替";
  154. font-size: 16px;
  155. visibility: hidden;
  156. }
  157. .el-icon-workorders-processing {
  158. background: url('../icon/workorderprocessing.png') center no-repeat;
  159. background-size: cover;
  160. }
  161. .el-icon-workorders-processing:before {
  162. content: "替";
  163. font-size: 16px;
  164. visibility: hidden;
  165. }
  166. .el-icon-workorders-audit {
  167. background: url('../icon/workorderaudit.png') center no-repeat;
  168. background-size: cover;
  169. }
  170. .el-icon-workorders-audit:before {
  171. content: "替";
  172. font-size: 16px;
  173. visibility: hidden;
  174. }
  175. .el-icon-workorders-completed {
  176. background: url('../icon/workordercompleted.png') center no-repeat;
  177. background-size: cover;
  178. }
  179. .el-icon-workorders-completed:before {
  180. content: "替";
  181. font-size: 16px;
  182. visibility: hidden;
  183. }
  184. .el-icon-workorders-feedback {
  185. background: url('../icon/feedback.png') center no-repeat;
  186. background-size: cover;
  187. }
  188. .el-icon-workorders-feedback:before {
  189. content: "替";
  190. font-size: 16px;
  191. visibility: hidden;
  192. }
  193. .el-icon-workorders-feedbackdefect {
  194. background: url('../icon/feedbackdefect.png') center no-repeat;
  195. background-size: cover;
  196. }
  197. .el-icon-workorders-feedbackdefect:before {
  198. content: "替";
  199. font-size: 16px;
  200. visibility: hidden;
  201. }
  202. .el-icon-workorders-feedbackresult {
  203. background: url('../icon/feedbackresult.png') center no-repeat;
  204. background-size: cover;
  205. }
  206. .el-icon-workorders-feedbackresult:before {
  207. content: "替";
  208. font-size: 16px;
  209. visibility: hidden;
  210. }
  211. .el-menu-vertical:not(.el-menu--collapse) {
  212. width: auto;
  213. height: auto;
  214. font-size: 16px;
  215. color: #1790ff;
  216. padding: 5px;
  217. }
  218. .el-aside {
  219. background-color: white;
  220. border-radius: 5px;
  221. padding: 1px;
  222. }
  223. .el-menu--collapse {
  224. color: #1790ff;
  225. width: 20px;
  226. padding: 0px;
  227. }
  228. el-menu-vertical el-menu {
  229. height: 100%
  230. }
  231. .el-input el-input--small el-input--suffix {
  232. padding: 5px;
  233. }
  234. .el-breadcrumb__inner {
  235. color: #1790ff;
  236. }
  237. .el-header {
  238. padding: 20px,0px,20px,0px;
  239. }
  240. .el-aside {
  241. border: 1px solid #ccc;
  242. border-right: none;
  243. }
  244. .el-main {
  245. border: 1px solid #ccc;
  246. padding: 10px;
  247. border-radius: 5px;
  248. }
  249. .inner-el-main {
  250. border: 1px;
  251. padding: 0px;
  252. }
  253. li:hover {
  254. background-color: #1790ff;
  255. color: white;
  256. }
  257. li {
  258. font-size: 15px
  259. }
  260. html, body, #app, .el-container {
  261. /*设置内部填充为0,几个布局元素之间没有间距*/
  262. padding: 0px;
  263. /*外部间距也是如此设置*/
  264. margin: 0px;
  265. /*统一设置高度为100%*/
  266. height: 100%;
  267. }
  268. div.popContainer {
  269. position: fixed;
  270. top: 0;
  271. left: 0;
  272. right: 0;
  273. bottom: 0;
  274. background: rgba(0,0,0,0);
  275. }
  276. img {
  277. width: 30px;
  278. height: 30px;
  279. position: absolute;
  280. top: 50%;
  281. left: 50%;
  282. margin-top: -15px; /* 高度的一半 */
  283. margin-left: -15px; /* 宽度的一半 */
  284. }
  285. .el-tabs__nav {
  286. height: 35px;
  287. font-size: 12px;
  288. line-height: 35px;
  289. }
  290. .el-tabs__item {
  291. font-size: 12px;
  292. line-height: 35px;
  293. }
  294. .el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
  295. font-size: 12px;
  296. height: 35px;
  297. }
  298. </style>

最重要的是这个部分

  1. <keep-alive>
  2. <component :is="item.content" :organization-Id="item.id" ref="tabsRef"></component>
  3. </keep-alive>

 component : is = xxx 这是Vue里面动态加载组件的标记,keep-alive 则表示缓存这个组件,具体用法可以百度了,这里篇幅有限,不展开写了

  1. const store = new Vuex.Store({
  2. state: {
  3. showUserSelect: false
  4. },
  5. })
  6. var minWidth = 0;
  7. var app;
  8. Vue.prototype.$ELEMENT.size = "small";
  9. $(document).ready(function () {
  10. app = new Vue({
  11. el: "#app",
  12. directives: {
  13. resize: Vueresize, //注册v-resize指令
  14. },
  15. store, //把 store 对象提供给 “store” 选项,这可以把 store 的实例注入所有的子组件
  16. data: {
  17. editableTabsValue: '',
  18. editableTabs: [],
  19. showUserSelect: false,
  20. collapseIcon: 'el-icon-s-fold',
  21. isCollapse: true,
  22. treeData: [],
  23. treeSelectNode: null,
  24. filterText: '',
  25. props: {
  26. label: 'label',
  27. children: 'children'
  28. },
  29. menuVisible: false,
  30. },
  31. watch: {
  32. isCollapse(val) {
  33. app.collapseIcon = val == true ? 'el-icon-s-fold' : 'el-icon-s-unfold';
  34. },
  35. filterText(val) {
  36. app.$refs.tree.filter(val);
  37. },
  38. editableTabsValue(val) {
  39. let tabs = this.editableTabs;
  40. var activeInde = 0;
  41. let activeName = val;
  42. tabs.forEach((tab, index) => {
  43. if (tab.name === activeName) {
  44. activeInde = index;
  45. }
  46. });
  47. this.$nextTick(() => {
  48. var elMain = $('.el-main')[0];
  49. if (elMain.scrollWidth > elMain.clientWidth || elMain.scrollHeight > elMain.clientHeight) {
  50. app.$refs.tabsRef[activeInde].$el.style.width = elMain.clientWidth - 30 + "px";
  51. }
  52. });
  53. }
  54. },
  55. mounted() {
  56. this.$nextTick(() => {
  57. app.loadTreeData();
  58. });
  59. },
  60. methods: {
  61. onSelectUser() {
  62. require(['UserSelectComponent'], function () {
  63. app.$store.state.showUserSelect = true;
  64. });
  65. },
  66. loadTreeData() {
  67. let loading = app.$loading();
  68. $.ajax({
  69. type: "POST",
  70. url: "/Organization/LoadTree",
  71. success: function (data) {
  72. if (data.Success) {
  73. app.treeData = data.Data;
  74. }
  75. loading.close();
  76. }, error() {
  77. app.$message.error("请求失败!");
  78. loading.close();
  79. }
  80. });
  81. },
  82. rightClick(event, data, node, self) {
  83. this.menuVisible = false
  84. if (node) { app.treeSelectNode = node }
  85. var menu = document.querySelector('#menu')
  86. menu.style.left = event.clientX + 'px'
  87. menu.style.top = event.clientY - 10 + 'px'
  88. document.addEventListener('click', this.foo)
  89. this.menuVisible = true
  90. },
  91. foo() { // 取消鼠标监听事件 菜单栏
  92. this.menuVisible = false
  93. document.removeEventListener('click', this.foo) // 要及时关掉监听
  94. },
  95. collapseStatus() {
  96. this.collapseBtnClick = this.isCollapse;
  97. this.isCollapse = !this.isCollapse;
  98. let tabs = this.editableTabs;
  99. var activeInde = 0;
  100. let activeName = this.editableTabsValue;
  101. tabs.forEach((tab, index) => {
  102. if (tab.name === activeName) {
  103. activeInde = index;
  104. }
  105. });
  106. this.$nextTick(() => {
  107. var elMain = $('.el-main')[0];
  108. if (elMain.scrollWidth > elMain.clientWidth || elMain.scrollHeight > elMain.clientHeight) {
  109. app.$refs.tabsRef[activeInde].$el.style.width = elMain.clientWidth - 30 + "px";
  110. }
  111. });
  112. },
  113. //节点过滤
  114. filterNode(value, data) {
  115. if (!value) return true;
  116. return data.label.indexOf(value) !== -1;
  117. },
  118. //添加节点
  119. onAddNode() {
  120. app.$prompt('请输入组织机构名称', '添加组织机构', {
  121. confirmButtonText: '确定',
  122. cancelButtonText: '取消',
  123. inputValue: ''
  124. }).then(({ value }) => {
  125. if (value.length == 0) {
  126. return;
  127. }
  128. var parent_id = 0;
  129. if (app.treeSelectNode &&
  130. app.treeSelectNode.data &&
  131. app.treeSelectNode.data.id) {
  132. parent_id = app.treeSelectNode.data.id
  133. }
  134. var cloneObj = {
  135. "id": "",
  136. "label": value,
  137. "name": value,
  138. "parent_id": parent_id,
  139. };
  140. $.ajax({
  141. type: "POST",
  142. url: "/Organization/NewModel",
  143. data: JSON.stringify(cloneObj),
  144. success: function (data) {
  145. if (data.Success) {
  146. var newChild = data.Data;
  147. if (!newChild.children) {
  148. app.$set(newChild, 'children', []);
  149. }
  150. app.$nextTick(() => {
  151. if (app.treeSelectNode &&
  152. app.treeSelectNode.data &&
  153. !app.treeSelectNode.data.children) {
  154. app.$set(app.treeSelectNode.data, 'children', []);
  155. }
  156. if (app.treeData.length == 0) {
  157. app.treeData.push(cloneObj);
  158. }
  159. else {
  160. cloneObj.id = newChild.id;
  161. app.treeSelectNode.data.children.push(cloneObj);
  162. }
  163. app.$message({
  164. type: 'success',
  165. message: '创建成功!'
  166. });
  167. });
  168. }
  169. else
  170. app.$message.error("创建失败!");
  171. }, error() {
  172. app.$message.error("创建失败!");
  173. }
  174. });
  175. });
  176. },
  177. //删除节点
  178. onRemoveNode() {
  179. if (app.treeSelectNode.data.children &&
  180. app.treeSelectNode.data.children.length &&
  181. app.treeSelectNode.data.children.length > 0) {
  182. app.$message.error("请先删除所有子节点!");
  183. return;
  184. }
  185. app.$confirm("是否删除此节点?", "提示", {
  186. confirmButtonText: "确认",
  187. cancelButtonText: "取消",
  188. type: "warning"
  189. }).then(() => {
  190. var ids = [];
  191. ids.push(app.treeSelectNode.data.id);
  192. $.ajax({
  193. type: "POST",
  194. url: "/Organization/DeleteModel",
  195. data: JSON.stringify({ ids: ids }),
  196. success: function (data) {
  197. if (data.Success) {
  198. var treeNode = app.treeSelectNode;
  199. var treeData = app.treeSelectNode.data;
  200. const parent = treeNode.parent;
  201. const children = parent.data.children || parent.data;
  202. const index = children.findIndex(d => d.id === treeData.id);
  203. children.splice(index, 1);
  204. app.$message({
  205. type: 'success',
  206. message: '删除成功!'
  207. });
  208. }
  209. }, error() {
  210. app.$message.error("重命名失败!");
  211. }
  212. });
  213. }).catch(() => {
  214. return false;
  215. })
  216. },
  217. //重命名
  218. onRenameNode() {
  219. app.$prompt('请输入名称', '重命名', {
  220. confirmButtonText: '确定',
  221. cancelButtonText: '取消',
  222. inputValue: Object.assign(app.treeSelectNode.data.label)
  223. }).then(({ value }) => {
  224. if (value.length == 0) {
  225. return;
  226. }
  227. var cloneObj = Object.assign(app.treeSelectNode.data);
  228. cloneObj.label = value;
  229. cloneObj.name = value;
  230. $.ajax({
  231. type: "POST",
  232. url: "/Organization/UpdateModel",
  233. data: JSON.stringify(cloneObj),
  234. success: function (data) {
  235. app.treeSelectNode.data.label = value;
  236. if (data.Success) {
  237. app.$message({
  238. type: 'success',
  239. message: '重命名完成'
  240. });
  241. }
  242. }, error() {
  243. app.$message.error("重命名失败!");
  244. }
  245. });
  246. }).catch(() => {
  247. return false;
  248. })
  249. },
  250. addTab(data, node, self) {
  251. require(['LinqJS', 'OrganizationUserComponent'], function () {
  252. app.treeSelectNode = node;
  253. let newTabName = app.treeSelectNode.data.label;
  254. if (app.editableTabs.length > 0) {
  255. var isExsit = Enumerable.From(app.editableTabs).Any(p => p.name == app.treeSelectNode.data.label);
  256. if (isExsit) {
  257. app.editableTabsValue = newTabName;
  258. return;
  259. }
  260. }
  261. app.editableTabs.push({
  262. id: node.data.id,
  263. title: newTabName,
  264. name: newTabName,
  265. content: 'organization-user'
  266. });
  267. app.editableTabsValue = newTabName;
  268. });
  269. },
  270. removeTab(targetName) {
  271. let tabs = this.editableTabs;
  272. let activeName = this.editableTabsValue;
  273. if (activeName === targetName) {
  274. tabs.forEach((tab, index) => {
  275. if (tab.name === targetName) {
  276. let nextTab = tabs[index + 1] || tabs[index - 1];
  277. if (nextTab) {
  278. activeName = nextTab.name;
  279. }
  280. }
  281. });
  282. }
  283. this.editableTabsValue = activeName;
  284. this.editableTabs = tabs.filter(tab => tab.name !== targetName);
  285. },
  286. //树导航折叠的时候触发resize修改tab页的宽度
  287. onResize(obj) {
  288. this.$nextTick(() => {
  289. if (app.$refs.tabsRef) {
  290. for (i = 0; i < app.$refs.tabsRef.length; i++) {
  291. if (obj.scrollWidth > obj.clientWidth || obj.scrollHeight > obj.clientHeight) {
  292. var scrollWidth = obj.scrollWidth - obj.clientWidth;
  293. app.$refs.tabsRef[i].$el.style.width = obj.scrollWidth - scrollWidth - 30 + "px";
  294. }
  295. else {
  296. if (minWidth > obj.scrollWidth && minWidth == 0) {
  297. minWidth = obj.scrollWidth
  298. app.$refs.tabsRef[i].$el.style.width = obj.scrollWidth - 10 + "px";
  299. }
  300. else {
  301. app.$refs.tabsRef[i].$el.style.width = obj.scrollWidth - 50 + "px";
  302. }
  303. }
  304. }
  305. }
  306. });
  307. }
  308. }
  309. })
  310. })

上面就是左边的导航树及主要界面,下面给出Tab页里的组件,这个实例就比较完整了

  1. Vue.component('organization-user', {
  2. template: `<div class="organUserWrapper">
  3. <div class="nav-bar" style="padding: 4px">
  4. <el-row :gutter="4">
  5. <el-col :span="12">
  6. <el-button-group>
  7. <el-button size="small" type="primary" icon="el-icon-plus" v-on:click="onSelectUser">
  8. 添 加
  9. </el-button>
  10. <el-button size="small" type="danger" icon="el-icon-delete" v-on:click="onDelete">
  11. 移 除
  12. </el-button>
  13. <el-button size="small" icon="el-icon-search" v-on:click="onSearch">
  14. 查 询
  15. </el-button>
  16. </el-button-group>
  17. </el-col>
  18. <el-col :span="12">
  19. <el-input size="small" v-model="search.field_value" placeholder="请输入内容" style="width: 100%; float: right" clearable v-on:clear="clearSearchValue">
  20. <el-select v-model="search.field_name" size="small" slot="prepend" placeholder="请选择" style="min-width: 100px" clearable v-on:clear="clearSearchText">
  21. <el-option label="用户账号" value="c.user_name"></el-option>
  22. <el-option label="用户名称" value="c.full_name"></el-option>
  23. </el-select>
  24. <el-button slot="thisend" type="Success" icon="el-icon-search" v-on:click="onSearch()">查询</el-button>
  25. </el-input>
  26. </el-col>
  27. </el-row>
  28. </div>
  29. <div>
  30. <el-row>
  31. <el-col :span="24">
  32. <el-table size="small" ref="multipleTable" v-on:select="handleSelectedRow" v-on:select-all="handleSelectedAllRow" border :data="table.data" :height="table.height">
  33. <el-table-column label="选择" fixed="left" type="selection" width="40px" class="selection" prop='id'></el-table-column>
  34. <template>
  35. <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>
  36. </template>
  37. </el-table>
  38. </el-col>
  39. <el-col :span="24" class="remove">
  40. <el-pagination v-on:size-change="onPageSizeChange" v-on:current-change="onPageCurrentChange"
  41. :current-page.sync="GridPageRequest.PageIndex" :page-sizes="[20, 50, 100, 200]"
  42. :page-size="GridPageRequest.PageSize" layout="sizes, prev, pager, next, total" :total="table.count">
  43. </el-pagination>
  44. </el-col>
  45. </el-row>
  46. </div>
  47. <user-select :show="userSelectShow" :multiple="true" @close="CloseUserSelect" @callback="afterUserSelect"></user-select>
  48. </div>`,
  49. props: {
  50. organizationId: {
  51. type: String
  52. },
  53. },
  54. data() {
  55. return {
  56. radio: '',
  57. userSelectShow: false,
  58. //表头
  59. headerGroup: [
  60. { label: 'id', prop: 'id', show: false, width: "160px" },
  61. { label: '组织机构', prop: 'organization_name', show: true, width: "160px" },
  62. { label: '用户账号', prop: 'user_name', show: true, width: "160px" },
  63. { label: '用户名称', prop: 'full_name', show: true, width: "auto" }
  64. ],
  65. //搜索
  66. search: {
  67. field_name: null,
  68. field_value: null
  69. },
  70. //表格
  71. table: {
  72. height: "300px",
  73. data: [],
  74. count: 0
  75. },
  76. //分页
  77. GridPageRequest: {
  78. PageSize: 20,
  79. PageIndex: 0,
  80. PageTotal: 0,
  81. Filter: []
  82. },
  83. selectedRows: [],
  84. BusinessModel: {
  85. width: "100px",
  86. show: false,
  87. title: "新增",
  88. model: {
  89. id: "",
  90. user_name: "",
  91. password: "",
  92. full_name: "",
  93. validate_status: "",
  94. createby: "",
  95. create_time: "",
  96. updateby: "",
  97. update_time: "",
  98. remarks: "",
  99. Items: [] //明细
  100. },
  101. tag: { //公共资源
  102. validate_status: {
  103. 1001: "启用",
  104. 1002: "禁用"
  105. }
  106. }
  107. }
  108. }
  109. },
  110. mounted() {
  111. var that = this;
  112. this.$nextTick(() => {
  113. that.getTableData();
  114. let resize = window.onresize = function () {
  115. that.table.height = $(window).height() - 150 + "px";
  116. };
  117. resize();
  118. });
  119. },
  120. methods: {
  121. //选择行
  122. handleSelectedRow(selection, row) {
  123. if (selection && selection.length > 0) {
  124. this.selectedRows = selection;
  125. } else {
  126. this.selectedRows = [];
  127. }
  128. },
  129. //全选
  130. handleSelectedAllRow(selection) {
  131. this.selectedRows = selection;
  132. },
  133. //选择用户的事件
  134. onDelete() {
  135. var that = this;
  136. var ids = this.selectedRows.map((o) => o.id);
  137. if (ids.length == 0) {
  138. this.$message.error("请选择用户!");
  139. return;
  140. }
  141. var ids = this.selectedRows.map((o) => o.id);
  142. this.$confirm('是否确认操作所选择的行?', "删除", {
  143. confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning'
  144. }).then(() => {
  145. $.ajax({
  146. type: "POST",
  147. url: "/OrganizationUser/DeleteModel",
  148. data: JSON.stringify({ "ids": ids }),
  149. datatype: "json",
  150. success: function (data) {
  151. //绑定数据
  152. if (data.Success) {
  153. that.$message({ message: '操作成功!', type: 'success' });
  154. that.onSearch();
  155. }
  156. },
  157. error() {
  158. that.$message.error("操作失败!");
  159. }
  160. });
  161. }).catch(() => {
  162. this.$message({
  163. type: 'info',
  164. message: '已取消'
  165. });
  166. });
  167. },
  168. //搜索
  169. onSearch() {
  170. this.search = this.search;
  171. this.GridPageRequest.Filter = [];
  172. if (this.search.field_name &&
  173. this.search.field_name.length > 0 &&
  174. this.search.field_value &&
  175. this.search.field_value.length > 0) {
  176. this.GridPageRequest.Filter.push({ "Operator": "and", "Where": this.search.field_name + " like " + "'%" + this.search.field_value + "%'" });
  177. }
  178. this.getTableData();
  179. },
  180. //请求表格数据
  181. getTableData() {
  182. this.GridPageRequest.Filter.push({ "Operator": "and", "Where": "b.id =" + "'" + this.organizationId + "'" });
  183. let loading = this.$loading();
  184. var that = this;
  185. $.ajax({
  186. type: "POST",
  187. url: "/OrganizationUser/LoadPageData",
  188. data: JSON.stringify(Object.assign(that.GridPageRequest)),
  189. success: function (data) {
  190. if (data.Success) {
  191. that.table.data = data.Data;
  192. that.table.count = data.TotalRows;
  193. }
  194. loading.close();
  195. }, error() {
  196. that.$message.error("请求失败!");
  197. loading.close();
  198. }
  199. });
  200. },
  201. //修改分页大小
  202. onPageSizeChange(now) {
  203. this.GridPageRequest.PageSize = now;
  204. this.getTableData();
  205. },
  206. //修改分页页数
  207. onPageCurrentChange(now) {
  208. this.GridPageRequest.PageIndex = now;
  209. this.getTableData();
  210. },
  211. clearSearchText() {
  212. this.search.field_name = "";
  213. this.GridPageRequest.Filter = [];
  214. },
  215. clearSearchValue() {
  216. this.search.field_value = "";
  217. this.GridPageRequest.Filter = [];
  218. },
  219. onSelectUser() {
  220. var that = this;
  221. require(['UserSelectComponent'], function () {
  222. that.userSelectShow = true;
  223. });
  224. },
  225. CloseUserSelect() {
  226. this.userSelectShow = false;
  227. },
  228. afterUserSelect(ids) {
  229. var that = this;
  230. $.ajax({
  231. type: "POST",
  232. url: "/OrganizationUser/NewModels",
  233. data: JSON.stringify({ organizationId: that.organizationId, userIds: ids }),
  234. success: function (data) {
  235. if (data.Success) {
  236. that.getTableData();
  237. that.$message({
  238. type: 'success',
  239. message: '操作完成!'
  240. });
  241. }
  242. }, error() {
  243. that.$message.error("操作完成!");
  244. }
  245. });
  246. }
  247. }
  248. });

 

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/笔触狂放9/article/detail/227709
推荐阅读
相关标签
  

闽ICP备14008679号