index.vue 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400
  1. <template>
  2. <div class="manage-root organize-manage">
  3. <Header />
  4. <div class="manage-root-contain">
  5. <nav-menu class="manage-root-contain-left" :activeMenuIndex="activeMenuIndex"></nav-menu>
  6. <div class="manage-root-contain-right personnel-manage-right">
  7. <breadcrumb :breadcrumbList="breadcrumbList" class="breadcrumb-box"></breadcrumb>
  8. <div class="personal-inner">
  9. <div class="common-title-box">
  10. <h3>机构列表</h3>
  11. <div class="btn-box">
  12. <el-button type="primary" size="small" @click="handleEdit">创建机构</el-button>
  13. </div>
  14. </div>
  15. <div class="search-box">
  16. <div class="search-item">
  17. <label>机构名称</label>
  18. <el-input
  19. placeholder="输入搜索内容"
  20. v-model="searchInput">
  21. <i slot="suffix" class="el-input__icon el-icon-search" @click="getList" style="cursor: pointer;"></i>
  22. </el-input>
  23. </div>
  24. <div class="search-item">
  25. <label>机构类型</label>
  26. <el-select v-model="searchType" @change="getList" placeholder="请选择">
  27. <el-option
  28. v-for="item in $orgTypeAll"
  29. :key="item.type"
  30. :label="item.type_name"
  31. :value="item.type">
  32. </el-option>
  33. </el-select>
  34. </div>
  35. <div class="search-item">
  36. <label>状态</label>
  37. <el-select v-model="searchStatus" @change="getList" placeholder="请选择">
  38. <el-option
  39. v-for="item in searchStatusList"
  40. :key="item.value"
  41. :label="item.label"
  42. :value="item.value">
  43. </el-option>
  44. </el-select>
  45. </div>
  46. <div class="search-item">
  47. <label>所在地区</label>
  48. <el-cascader
  49. size="medium"
  50. :options="provinceAndCityData"
  51. v-model="searchArea"
  52. @change="getList">
  53. </el-cascader>
  54. </div>
  55. <div class="search-item">
  56. <label>创建人</label>
  57. <el-select v-model="searchCreator" @change="getList" placeholder="请选择">
  58. <el-option
  59. v-for="item in searchCreatorList"
  60. :key="item.value"
  61. :label="item.label"
  62. :value="item.value">
  63. </el-option>
  64. </el-select>
  65. </div>
  66. </div>
  67. <el-table
  68. class="search-table"
  69. :data="tableData"
  70. style="width: 100%"
  71. :max-height="tableHeight">
  72. <el-table-column
  73. prop="name"
  74. label="机构名称"
  75. sortable
  76. min-width="268">
  77. </el-table-column>
  78. <el-table-column
  79. prop="type_name"
  80. label="机构类型"
  81. width="112">
  82. </el-table-column>
  83. <el-table-column
  84. prop="person_count"
  85. label="成员数"
  86. width="85">
  87. </el-table-column>
  88. <el-table-column
  89. prop="status"
  90. label="状态"
  91. width="80" >
  92. <template slot-scope="scope">
  93. <div class="status-box">
  94. <span :style="{background:statusList[scope.row.status].bg}"></span>
  95. <b :style="{color:statusList[scope.row.status].color}">{{statusList[scope.row.status].text}}</b>
  96. </div>
  97. </template>
  98. </el-table-column>
  99. <el-table-column
  100. prop="city_name"
  101. label="所在地区"
  102. width="132" >
  103. </el-table-column>
  104. <el-table-column
  105. prop="creator_name"
  106. label="创建人"
  107. min-width="88">
  108. </el-table-column>
  109. <el-table-column
  110. prop="manager_name"
  111. label="管理员"
  112. width="88">
  113. </el-table-column>
  114. <el-table-column
  115. prop="create_time"
  116. label="创建时间"
  117. sortable
  118. width="165">
  119. </el-table-column>
  120. <el-table-column
  121. prop="effective_date_end"
  122. label="到期时间"
  123. sortable
  124. width="165">
  125. </el-table-column>
  126. <el-table-column
  127. fixed="right"
  128. label="操作"
  129. width="220">
  130. <template slot-scope="scope">
  131. <el-button
  132. @click.native.prevent="handleEdit(scope.row)"
  133. type="text"
  134. size="small"
  135. class="primary-btn">
  136. 信息
  137. </el-button>
  138. <el-button
  139. @click.native.prevent="handlePerson(scope.row)"
  140. type="text"
  141. size="small"
  142. class="primary-btn">
  143. 人员管理
  144. </el-button>
  145. <el-button
  146. @click.native.prevent="handleUp(scope.row, scope.$index)"
  147. type="text"
  148. size="small"
  149. class="primary-btn"
  150. v-if="scope.row.status===0">
  151. 开启
  152. </el-button>
  153. <el-button
  154. @click.native.prevent="handleUp(scope.row, scope.$index)"
  155. type="text"
  156. size="small"
  157. class="red-btn"
  158. v-else-if="scope.row.status===1">
  159. 停用
  160. </el-button>
  161. </template>
  162. </el-table-column>
  163. </el-table>
  164. <el-pagination
  165. background
  166. @size-change="handleSizeChange"
  167. @current-change="handleCurrentChange"
  168. :current-page="pageNumber"
  169. :page-sizes="[10, 20, 30, 40]"
  170. :page-size="pageSize"
  171. layout="total, prev, pager, next, sizes, jumper"
  172. :total="tableData.length">
  173. </el-pagination>
  174. </div>
  175. </div>
  176. </div>
  177. </div>
  178. </template>
  179. <script>
  180. //这里可以导入其它文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)
  181. //例如:import 《组件名称》from ‘《组件路径》';
  182. import Header from "../../components/Header.vue";
  183. import NavMenu from "../../components/NavMenu.vue"
  184. import Breadcrumb from '../../components/Breadcrumb.vue';
  185. import { getLogin } from "@/api/ajax";
  186. import {
  187. provinceAndCityData
  188. } from "element-china-area-data";
  189. export default {
  190. //import引入的组件需要注入到对象中才能使用
  191. components: { Header, NavMenu, Breadcrumb },
  192. props: {},
  193. data() {
  194. //这里存放数据
  195. return {
  196. provinceAndCityData,
  197. activeMenuIndex: "organize_manage",
  198. breadcrumbList:[
  199. {
  200. icon:'school-line',
  201. url:'',
  202. text:''
  203. },
  204. {
  205. icon:'',
  206. url:'',
  207. text:'机构管理'
  208. }
  209. ],
  210. searchInput: '',
  211. searchType: -1,
  212. searchStatus: -1,
  213. searchCreator: '',
  214. searchArea:"",
  215. searchStatusList:[
  216. {
  217. value:-1,
  218. label:'全部'
  219. },
  220. {
  221. value:1,
  222. label:'正常'
  223. },
  224. {
  225. value:0,
  226. label:'停用'
  227. }
  228. ],
  229. statusList:{
  230. '1':{
  231. text:'正常',
  232. bg:'#165DFF',
  233. color:''
  234. },
  235. '0':{
  236. text:'停用',
  237. bg:'#F53F3F',
  238. color:'#F53F3F'
  239. }
  240. },
  241. searchCreatorList:[
  242. {
  243. value:'',
  244. label:'全部'
  245. },
  246. {
  247. value:'1',
  248. label:'张三'
  249. },
  250. {
  251. value:'0',
  252. label:'李四'
  253. }
  254. ],
  255. tableData:[],
  256. pageSize: window.localStorage.getItem('pageSize')?Number(window.localStorage.getItem('pageSize')):10,
  257. pageNumber: window.localStorage.getItem('pageNumber')?Number(window.localStorage.getItem('pageNumber')):1,
  258. tableHeight: "" // 表格高度
  259. }
  260. },
  261. //计算属性 类似于data概念
  262. computed: {
  263. },
  264. //监控data中数据变化
  265. watch: {},
  266. //方法集合
  267. methods: {
  268. // 查询列表
  269. getList(){
  270. let MethodName = "/OrgServer/Manager/PageQuery/PageQueryOrgList";
  271. let data = {
  272. name: this.searchInput.trim(),
  273. type: this.searchType,
  274. status: this.searchStatus,
  275. area_id: this.searchArea,
  276. creator_id: this.searchCreator,
  277. page_capacity:this.pageSize,
  278. cur_page:this.pageNumber
  279. }
  280. getLogin(MethodName, data)
  281. .then((res) => {
  282. if(res.status===1){
  283. this.tableData = res.org_list
  284. this.total_count = res.total_count
  285. }
  286. })
  287. .catch(() => {
  288. this.loading = false
  289. });
  290. },
  291. // 创建机构或者编辑信息
  292. handleEdit(row){
  293. // 根据登录用户判断当前用户是不是超管 在table里加上disabled
  294. // 点击时记录页码和每页条数
  295. window.localStorage.setItem('pageSize',this.pageSize)
  296. window.localStorage.setItem('pageNumber',this.pageNumber)
  297. this.$router.push({
  298. path: "/createOrganize",
  299. query: {
  300. id: row?row.id:''
  301. },
  302. });
  303. },
  304. // 人员管理
  305. handlePerson(row){
  306. window.localStorage.setItem('pageSize',this.pageSize)
  307. window.localStorage.setItem('pageNumber',this.pageNumber)
  308. this.$router.push({
  309. path: "/peopleList",
  310. query: {
  311. id: row?row.id:''
  312. },
  313. });
  314. },
  315. // 停用 启用
  316. handleUp(row, index) {
  317. let Mname = "/OrgServer/Manager/OrgManager/EnableOrg";
  318. let updataData = JSON.parse(JSON.stringify(row));
  319. let data = {
  320. id: row.id
  321. };
  322. if (row.status === 0) {
  323. // 下架状态
  324. data.is_enable = "true";
  325. updataData.status = 1;
  326. } else if (row.status === 1) {
  327. data.is_enable = "false";
  328. updataData.status = 0;
  329. }
  330. getLogin(Mname, data).then(res => {
  331. this.$message.success("操作成功");
  332. this.$set(this.tableData, index, updataData);
  333. });
  334. },
  335. handleSizeChange(val) {
  336. this.pageSize = val
  337. this.pageNumber = 1
  338. this.getList()
  339. },
  340. handleCurrentChange(val) {
  341. this.pageNumber = val
  342. this.getList()
  343. },
  344. //计算table高度(动态设置table高度)
  345. getTableHeight() {
  346. let tableH = 370; //距离页面下方的高度
  347. let tableHeightDetil = window.innerHeight - tableH;
  348. if (tableHeightDetil <= 300) {
  349. this.tableHeight = 300;
  350. } else {
  351. this.tableHeight = window.innerHeight - tableH;
  352. }
  353. },
  354. },
  355. //生命周期 - 创建完成(可以访问当前this实例)
  356. created() {
  357. this.getTableHeight();
  358. this.getList()
  359. },
  360. //生命周期 - 挂载完成(可以访问DOM元素)
  361. mounted() {
  362. },
  363. //生命周期-创建之前
  364. beforeCreated() { },
  365. //生命周期-挂载之前
  366. beforeMount() { },
  367. //生命周期-更新之前
  368. beforUpdate() { },
  369. //生命周期-更新之后
  370. updated() { },
  371. //生命周期-销毁之前
  372. beforeDestory() { },
  373. //生命周期-销毁完成
  374. destoryed() { },
  375. //如果页面有keep-alive缓存功能,这个函数会触发
  376. activated() { }
  377. }
  378. </script>
  379. <style lang="scss" scoped>
  380. /* @import url(); 引入css类 */
  381. </style>
  382. <style lang="scss">
  383. .organize-manage{
  384. .el-cascader{
  385. width: 160px;
  386. height: 32px;
  387. line-height: 32px;
  388. .el-input{
  389. width: 100%;
  390. height: 32px;
  391. }
  392. }
  393. }
  394. </style>