c7617311e16f16ddc38d6aefabb7f956af062e48.svn-base 36 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918
  1. <template>
  2. <div class="app-container">
  3. <div class="operation">
  4. <el-button class="success" @click="handleCreate">新增</el-button>
  5. <el-button class="danger" @click="handleDelete">删除</el-button>
  6. </div>
  7. <div class="search">
  8. <el-input v-model="table.getdataListParm.parammaps.rolename" placeholder="角色名称" style="width: 180px;" class="filter-item" clearable />
  9. <el-input v-model="table.getdataListParm.parammaps.createmp" placeholder="创建人" style="width: 180px;" class="filter-item" clearable />
  10. <el-select v-model="table.getdataListParm.parammaps.enable" placeholder="是否启用" class="filter-item" style="width: 120px;" clearable>
  11. <el-option v-for="item in enableList" :key="item.id" :label="item.name" :value="item.id" />
  12. </el-select>
  13. <el-date-picker ref="inputDatetime" v-model="table.getdataListParm.parammaps.inputDatetime" class="inputDatetime filter-item" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" style="width: 250px;" />
  14. <el-button class="successBorder" @click="handleSearch">查询</el-button>
  15. <el-button class="successBorder" @click="handleRefresh">重置</el-button>
  16. </div>
  17. <div class="table">
  18. <el-table
  19. :key="table.tableKey"
  20. v-loading="table.listLoading"
  21. element-loading-text="给我一点时间"
  22. :data="table.list"
  23. border
  24. fit
  25. highlight-current-row
  26. style="width: 100%;"
  27. :row-style="rowStyle"
  28. :cell-style="cellStyle"
  29. class="elTable table-fixed"
  30. @selection-change="handleSelectionChange"
  31. >
  32. <el-table-column type="selection" align="center" width="50" />
  33. <el-table-column label="序号" align="center" type="index" width="50px">
  34. <template slot-scope="scope">
  35. <span>{{ scope.$index + (table.pageNum-1) * table.pageSize + 1 }}</span>
  36. </template>
  37. </el-table-column>
  38. <el-table-column label="角色名称" min-width="130px" align="center">
  39. <template slot-scope="scope">
  40. <span v-if="scope.row.NoEdit">{{ scope.row.rolename }}</span>
  41. <el-input v-if="scope.row.Edit" v-model="scope.row.rolename" type="textarea" :autosize="{ minRows: 1.3, maxRows: 4}" maxlength="32" style="width:95%;padding:10px 0;" />
  42. </template>
  43. </el-table-column>
  44. <el-table-column label="备注" min-width="130px" align="center">
  45. <template slot-scope="scope">
  46. <span v-if="scope.row.NoEdit">{{ scope.row.remark }}</span>
  47. <el-input v-if="scope.row.Edit" v-model="scope.row.remark" type="textarea" :autosize="{ minRows: 1.3, maxRows: 4}" maxlength="32" style="width:95%;padding:10px 0;" />
  48. </template>
  49. </el-table-column>
  50. <el-table-column label="创建时间" min-width="150px" align="center">
  51. <template slot-scope="scope">
  52. <span>{{ scope.row.createdtime }}</span>
  53. </template>
  54. </el-table-column>
  55. <el-table-column label="创建人" min-width="150px" align="center">
  56. <template slot-scope="scope">
  57. <span>{{ scope.row.createmp }}</span>
  58. </template>
  59. </el-table-column>
  60. <el-table-column label="是否启用" min-width="110px" align="center">
  61. <template slot-scope="scope">
  62. <el-switch v-model="scope.row.enable" :disabled="scope.row.NoEdit==true" active-color="#13ce66" inactive-color="#ff4949" :active-value="1" :inactive-value="0" @change="handleEnableChange(scope.$index, scope.row)" />
  63. </template>
  64. </el-table-column>
  65. <el-table-column label="操作" align="center" width="250" class-name="small-padding fixed-width" fixed="right">
  66. <template slot-scope="{row}">
  67. <!-- 页面权限 -->
  68. <el-button class="miniSuccess" @click="handleRole(row)">页面权限</el-button>
  69. <!-- 新增 -->
  70. <el-button v-if="row.isCreate" class="miniSuccess" :disabled="isokDisable" @click="createData(row)">保存</el-button>
  71. <el-button v-if="row.isCreate" class="minCancel" @click="createCancel(row)">取消</el-button>
  72. <!-- 编辑 -->
  73. <el-button v-if="row.isUpdate" class="miniSuccess" @click="handleUpdate(row)">编辑</el-button>
  74. <el-button v-if="row.isUpdate" class="miniDanger" @click="handleRowDelete(row)">删除</el-button>
  75. <!-- 编辑保存 -->
  76. <el-button v-if="row.isUpdateSave" class="miniSuccess" :disabled="isokDisable" @click="updateData(row)">保存</el-button>
  77. <el-button v-if="row.isUpdateSave" class="minCancel" @click="updateCancel(row)">取消</el-button>
  78. </template>
  79. </el-table-column>
  80. </el-table>
  81. <pagination v-show="table.total>=0" :total="table.total" :page.sync="table.getdataListParm.offset" :limit.sync="table.getdataListParm.pagecount" @pagination="getList" />
  82. </div>
  83. <el-dialog :title="textMap[role.dialogStatus]" :visible.sync="role.dialogFormVisible" :close-on-click-modal="false" width="70%">
  84. <div class="role-details inside-base">
  85. <div class="inside-base-main clearfix">
  86. <div class="inside-base-cont">
  87. <div class="role-cont clearfix">
  88. <div>
  89. <el-table
  90. ref="table"
  91. :data="tableData"
  92. style="width: 100%;margin-bottom: 20px;"
  93. row-key="id"
  94. border
  95. :indent="10"
  96. :select-on-indeterminate="true"
  97. :default-expand-all="false"
  98. show-checkbox
  99. :checked-keys="defaultCheckedKeys"
  100. :tree-props="{children: 'childList', hasChildren: 'hasChildren'}"
  101. >
  102. <el-table-column prop="name" label="页面" />
  103. <el-table-column label="查看" :render-header="renderSeeHeader">
  104. <template slot-scope="scope">
  105. <el-checkbox v-model="scope.row.fnCheck.seebutton" :indeterminate="scope.row.indeterminate.seebutton" label="查看" @change="fnCheckEv(scope, 'seebutton')" />
  106. <!-- <el-checkbox v-model="scope.row.fnCheck.seebutton" label="查看" @change="fnCheckEv(scope, 'seebutton')" /> -->
  107. </template>
  108. </el-table-column>
  109. <el-table-column label="编辑" :render-header="renderEditHeader">
  110. <template slot-scope="scope">
  111. <el-checkbox v-model="scope.row.fnCheck.editbutton" :indeterminate="scope.row.indeterminate.editbutton" label="编辑" @change="fnCheckEv(scope, 'editbutton')" />
  112. <!-- <el-checkbox v-model="scope.row.fnCheck.editbutton" label="编辑" @change="fnCheckEv(scope, 'editbutton')" /> -->
  113. </template>
  114. </el-table-column>
  115. </el-table>
  116. </div>
  117. </div>
  118. </div>
  119. </div>
  120. </div>
  121. <div slot="footer" class="dialog-footer" style="right:30px;position:absolute;bottom:5px">
  122. <el-button @click="role.dialogFormVisible = false; ">关闭</el-button>
  123. <el-button v-if="role.dialogStatus==='role'" type="success" :disabled="isokDisable" @click="roleData()">确认</el-button>
  124. </div>
  125. </el-dialog>
  126. </div>
  127. </template>
  128. <script>
  129. import { GetDataByName, PostDataByName, failproccess, transData, ExecDataByConfig } from '@/api/common'
  130. import Cookies from 'js-cookie'
  131. import { parseTime } from '@/utils/index.js'
  132. import { MessageBox } from 'element-ui'
  133. import Pagination from '@/components/Pagination'
  134. export default {
  135. name: 'Role',
  136. components: { Pagination },
  137. data() {
  138. return {
  139. enableList: [{ id: 1, name: '是' }, { id: 0, name: '否' }], // 是否启用
  140. table: {
  141. getdataListParm: {
  142. name: 'getRoleList',
  143. page: 1,
  144. offset: 1,
  145. pagecount: 10,
  146. returntype: 'Map',
  147. parammaps: {
  148. pastureid: Cookies.get('pastureid'),
  149. rolename: '',
  150. createmp: '',
  151. enable: '',
  152. starTime: '',
  153. stopTime: '',
  154. inputDatetime: ''
  155. }
  156. },
  157. tableKey: 0,
  158. list: [],
  159. total: 0,
  160. listLoading: true,
  161. temp: {}
  162. },
  163. requestParam: {},
  164. selectList: [],
  165. role: {
  166. dialogFormVisible: false,
  167. dialogStatus: '',
  168. temp: {}
  169. },
  170. // parentType: [],
  171. getRecuListParm: {
  172. name: 'getMenuByRole',
  173. parammaps: {
  174. pastureid: Cookies.get('pastureid')
  175. }
  176. },
  177. tableData: [],
  178. defaultCheckedKeys: [],
  179. // tableData: [
  180. // {
  181. // id: 1, page: '配方计划', pageCheck: false,
  182. // fnList: ['查看', '编辑'],
  183. // fnCheck: { see: false, edit: false },
  184. // childList: [
  185. // { p_id: 1, id: 31, page: '配方模板', pageCheck: false, fnList: ['查看', '编辑'], fnCheck: { see: false, edit: false }},
  186. // { p_id: 1, id: 32, page: '栏舍配方', pageCheck: false, fnList: ['查看', '编辑'], fnCheck: { see: false, edit: false }}
  187. // ]
  188. // }, {
  189. // id: 2, page: '栏舍生产', pageCheck: false,
  190. // fnList: ['查看', '编辑'],
  191. // fnCheck: { see: false, edit: false },
  192. // childList: [
  193. // { p_id: 2, id: 33, page: '栏舍产奶量', pageCheck: false, fnList: ['查看', '编辑'], fnCheck: { see: false, edit: false }},
  194. // { p_id: 2, id: 34, page: '栏舍剩料量', pageCheck: false, fnList: ['查看', '编辑'], fnCheck: { see: false, edit: false }}
  195. // ]
  196. // }
  197. // ],
  198. isokDisable: false,
  199. textMap: {
  200. role: '权限管理'
  201. },
  202. rowStyle: { maxHeight: 50 + 'px', height: 45 + 'px' },
  203. cellStyle: { padding: 0 + 'px' }
  204. }
  205. },
  206. created() {
  207. this.getList()
  208. },
  209. methods: {
  210. getList() {
  211. this.table.listLoading = true
  212. GetDataByName(this.table.getdataListParm).then(response => {
  213. console.log('table数据', response.data.list)
  214. if (response.data.list !== null) {
  215. for (let i = 0; i < response.data.list.length; i++) {
  216. this.$set(response.data.list[i], 'Edit', false) // 编辑
  217. this.$set(response.data.list[i], 'NoEdit', true) // 不可编辑/输入
  218. this.$set(response.data.list[i], 'isCreate', false) // 新增操作
  219. this.$set(response.data.list[i], 'isUpdate', true) // 编辑操作
  220. this.$set(response.data.list[i], 'isUpdateSave', false) // 编辑保存
  221. }
  222. this.table.list = response.data.list
  223. this.table.pageNum = response.data.pageNum
  224. this.table.pageSize = response.data.pageSize
  225. this.table.total = response.data.total
  226. } else {
  227. this.table.list = []
  228. }
  229. setTimeout(() => {
  230. this.table.listLoading = false
  231. }, 100)
  232. })
  233. },
  234. handleEnableChange() {
  235. console.log('点击了是否启用')
  236. },
  237. handleConfirmStartChange() {
  238. console.log('点击了确认开始')
  239. },
  240. handleSearch() {
  241. console.log('点击了查询')
  242. if (this.table.getdataListParm.parammaps.inputDatetime !== '' && this.table.getdataListParm.parammaps.inputDatetime !== null) {
  243. this.table.getdataListParm.parammaps.startTime = parseTime(this.table.getdataListParm.parammaps.inputDatetime[0], '{y}-{m}-{d}')
  244. this.table.getdataListParm.parammaps.stopTime = parseTime(this.table.getdataListParm.parammaps.inputDatetime[1], '{y}-{m}-{d}')
  245. } else {
  246. this.table.getdataListParm.parammaps.inputDatetime = ''
  247. this.table.getdataListParm.parammaps.startTime = ''
  248. this.table.getdataListParm.parammaps.stopTime = ''
  249. }
  250. this.table.getdataListParm.offset = 1
  251. this.getList()
  252. },
  253. handleRefresh() {
  254. console.log('点击了重置')
  255. this.table.getdataListParm.parammaps.rolename = ''
  256. this.table.getdataListParm.parammaps.createmp = ''
  257. this.table.getdataListParm.parammaps.enable = ''
  258. this.table.getdataListParm.parammaps.startTime = ''
  259. this.table.getdataListParm.parammaps.stopTime = ''
  260. this.table.getdataListParm.parammaps.inputDatetime = ''
  261. this.table.getdataListParm.offset = 1
  262. this.getList()
  263. },
  264. handleCreate() {
  265. console.log('点击了新增')
  266. // 编辑true/不可编辑false
  267. // 新增操true,编辑false,编辑保存false
  268. for (let i = 0; i < this.table.list.length; i++) {
  269. if (this.table.list[i].Edit == true) {
  270. this.$message({ type: 'error', message: '当前内容未保存,请点击取消或保存继续进行操作', duration: 2000 })
  271. return false
  272. }
  273. }
  274. this.table.list.unshift({ 'myId': (new Date()).valueOf(), 'Edit': true, 'NoEdit': false, 'isCreate': true, 'isUpdate': false, 'isUpdateSave': false, 'enable': 1, 'confirmStart': 1, 'createdtime': parseTime(new Date(), '{y}-{m}-{d}'), 'createmp': Cookies.get('employename'), 'rolename': '' })
  275. },
  276. createData(row) {
  277. console.log('点击了新增保存', row)
  278. this.table.temp.pastureid = Cookies.get('pastureid')
  279. this.table.temp.empname = row.empname
  280. this.table.temp.rolename = row.rolename
  281. this.table.temp.enable = row.enable
  282. this.table.temp.remark = row.remark
  283. this.table.temp.createmp = row.createmp
  284. // 检验角色名称/角色是否为空
  285. if (this.table.temp.rolename == '') {
  286. this.$message({ type: 'error', message: '角色名称不能为空', duration: 2000 })
  287. return false
  288. }
  289. this.isokDisable = true
  290. setTimeout(() => {
  291. this.isokDisable = false
  292. }, 1000)
  293. this.requestParam.name = 'createRole'
  294. this.requestParam.parammaps = this.table.temp
  295. PostDataByName(this.requestParam).then(response => {
  296. console.log('新增保存发送参数', this.requestParam)
  297. if (response.msg !== 'fail') {
  298. this.$notify({ title: '成功', message: '保存成功', type: 'success', duration: 2000 })
  299. this.getList()
  300. } else {
  301. failproccess(response, this.$notify)
  302. }
  303. })
  304. },
  305. createCancel(row) {
  306. console.log('点击了新增取消')
  307. for (let i = 0; i < this.table.list.length; i++) {
  308. if (row.myId === this.table.list[i].myId) {
  309. var listIndex = this.table.list.indexOf(this.table.list[i])
  310. }
  311. if (listIndex > -1) {
  312. this.table.list.splice(listIndex, 1)
  313. return
  314. }
  315. }
  316. },
  317. handleUpdate(row) {
  318. console.log('点击了编辑')
  319. for (let i = 0; i < this.table.list.length; i++) {
  320. if (this.table.list[i].Edit == true) {
  321. this.$message({ type: 'error', message: '当前内容未保存,请点击取消或保存继续进行操作', duration: 2000 })
  322. return false
  323. }
  324. }
  325. // 编辑true,不可编辑false
  326. row.Edit = true
  327. row.NoEdit = false
  328. // 新增false,编辑false,编辑保存true
  329. row.isCreate = false
  330. row.isUpdate = false
  331. row.isUpdateSave = true
  332. },
  333. updateData(row) {
  334. console.log('点击了编辑保存', row)
  335. this.table.temp.pastureid = Cookies.get('pastureid')
  336. this.table.temp.id = row.id
  337. this.table.temp.empname = row.empname
  338. this.table.temp.rolename = row.rolename
  339. this.table.temp.enable = row.enable
  340. this.table.temp.remark = row.remark
  341. // 检验角色名称/角色是否为空
  342. if (this.table.temp.rolename == '') {
  343. this.$message({ type: 'error', message: '角色名称不能为空', duration: 2000 })
  344. return false
  345. }
  346. this.isokDisable = true
  347. setTimeout(() => {
  348. this.isokDisable = false
  349. }, 1000)
  350. this.requestParam.name = 'updateRole'
  351. this.requestParam.parammaps = this.table.temp
  352. PostDataByName(this.requestParam).then(response => {
  353. console.log('新增保存发送参数', this.requestParam)
  354. if (response.msg !== 'fail') {
  355. this.$notify({ title: '成功', message: '保存成功', type: 'success', duration: 2000 })
  356. this.getList()
  357. } else {
  358. failproccess(response, this.$notify)
  359. }
  360. })
  361. },
  362. updateCancel(row) {
  363. console.log('点击了编辑取消')
  364. // 编辑false,不可编辑true
  365. row.Edit = false
  366. row.NoEdit = true
  367. // 新增false,编辑true,编辑保存false
  368. row.isCreate = false
  369. row.isUpdate = true
  370. row.isUpdateSave = false
  371. },
  372. handleRowDelete(row) {
  373. console.log('点击了行内删除')
  374. MessageBox.confirm('是否确认删除此信息?', {
  375. confirmButtonText: '确认', cancelButtonText: '取消', type: 'warning'
  376. }).then(() => {
  377. console.log(this.selectList)
  378. this.selectList = []
  379. this.requestParam = {}
  380. this.requestParam.common = { 'returnmap': '0' }
  381. this.requestParam.data = []
  382. this.requestParam.data[0] = { 'name': 'checkroleuser', 'type': 'v', 'parammaps': {
  383. 'pastureid': row.pastureid,
  384. 'roleid': row.id
  385. }}
  386. this.requestParam.data[1] = { 'name': 'deleteRole', 'type': 'e', 'parammaps': {
  387. 'pastureid': row.pastureid,
  388. 'id': row.id
  389. }}
  390. ExecDataByConfig(this.requestParam).then(response => {
  391. console.log('删除保存发送参数', this.requestParam)
  392. if (response.msg === 'fail') {
  393. this.$notify({ title: '删除失败', message: response.data, type: 'warning', duration: 2000 })
  394. } else {
  395. this.$notify({ title: '', message: '删除成功', type: 'success', duration: 2000 })
  396. this.getList()
  397. }
  398. })
  399. }).catch(() => {
  400. this.$message({ type: 'info', message: '已取消删除' })
  401. })
  402. },
  403. handleSelectionChange(val) {
  404. console.log('勾选数据', val)
  405. this.selectList = val
  406. },
  407. handleDelete() {
  408. console.log('点击了删除')
  409. if (this.selectList.length == 0) {
  410. this.$message({ type: 'error', message: '请选择角色信息', duration: 2000 })
  411. } else {
  412. MessageBox.confirm('是否确认删除此信息?', {
  413. confirmButtonText: '确认', cancelButtonText: '取消', type: 'warning'
  414. }).then(() => {
  415. console.log(this.selectList)
  416. this.requestParam.common = { 'returnmap': '0' }
  417. this.requestParam.data = []
  418. for (let i = 0; i < this.selectList.length; i++) {
  419. this.requestParam.data[i] = { 'name': 'checkroleuser', 'type': 'v', 'parammaps': {
  420. 'pastureid': this.selectList[i].pastureid,
  421. 'roleid': this.selectList[i].id
  422. }}
  423. }
  424. this.requestParam.data[this.selectList.length] = { 'name': 'insertSpotList', 'resultmaps': { 'list': this.selectList }}
  425. this.requestParam.data[this.selectList.length].children = []
  426. this.requestParam.data[this.selectList.length].children[0] = { 'name': 'deleteRole', 'type': 'e', 'parammaps': {
  427. 'pastureid': '@insertSpotList.pastureid',
  428. 'id': '@insertSpotList.id'
  429. }}
  430. ExecDataByConfig(this.requestParam).then(response => {
  431. console.log('删除保存发送参数', this.requestParam)
  432. if (response.msg === 'fail') {
  433. this.$notify({ title: '删除失败', message: response.data, type: 'warning', duration: 2000 })
  434. } else {
  435. this.$notify({ title: '', message: '删除成功', type: 'success', duration: 2000 })
  436. this.getList()
  437. }
  438. })
  439. })
  440. }
  441. },
  442. handleRole(row) {
  443. this.role.temp = Object.assign({}, row)
  444. console.log('点击了行内页面权限')
  445. this.role.dialogStatus = 'role'
  446. this.role.dialogFormVisible = true
  447. this.getRecuListParm.parammaps.roleid = row.id
  448. this.getRoleList()
  449. },
  450. getRoleList() {
  451. GetDataByName(this.getRecuListParm).then(response => {
  452. if (response.data.list !== null) {
  453. this.tableData = transData(response.data.list, 'id', 'pid', 'children')
  454. console.log(this.tableData)
  455. this.tableData.forEach((item, i) => {
  456. item.childList = item.children
  457. this.$set(item, 'fnCheck', {})
  458. this.$set(item, 'indeterminate', { 'seebutton': false, 'editbutton': false })
  459. if (item.seebutton == 1) { this.$set(item.fnCheck, 'seebutton', true) } else { this.$set(item.fnCheck, 'seebutton', false) }
  460. if (item.editbutton == 1) { this.$set(item.fnCheck, 'editbutton', true) } else { this.$set(item.fnCheck, 'editbutton', false) }
  461. if (item.childList !== undefined && item.childList.length > 0) {
  462. item.childList.forEach((item, i) => {
  463. this.$set(item, 'fnCheck', {})
  464. this.$set(item, 'indeterminate', { 'seebutton': false, 'editbutton': false })
  465. if (item.seebutton == 1) { this.$set(item.fnCheck, 'seebutton', true) } else { this.$set(item.fnCheck, 'seebutton', false) }
  466. if (item.editbutton == 1) { this.$set(item.fnCheck, 'editbutton', true) } else { this.$set(item.fnCheck, 'editbutton', false) }
  467. })
  468. }
  469. })
  470. console.log(this.tableData)
  471. }
  472. })
  473. },
  474. // 查找父级函数
  475. getParent(data2, nodeId2) {
  476. var arrRes = []
  477. if (data2.length === 0) {
  478. if (nodeId2) {
  479. arrRes.push(data2)
  480. }
  481. return arrRes
  482. }
  483. const rev = (data, nodeId) => {
  484. for (var i = 0, length = data.length; i < length; i++) {
  485. const node = data[i]
  486. if (node.id === nodeId) {
  487. arrRes.push(node)
  488. rev(data2, node.pid)
  489. break
  490. } else {
  491. if (node.childList) {
  492. rev(node.childList, nodeId)
  493. }
  494. }
  495. }
  496. return arrRes
  497. }
  498. arrRes = rev(data2, nodeId2)
  499. return arrRes
  500. },
  501. /**
  502. * 功能选择
  503. */
  504. // 子选框事件
  505. fnCheckEv(scope, type) {
  506. // 如果有子项,则子项的选框选择跟当前一致
  507. if (scope.row.childList) {
  508. console.log(scope.row)
  509. this.handleFnAll(scope.row, scope.row.fnCheck[type], scope.row.indeterminate[type], type)
  510. }
  511. // 查找父级选框
  512. this.getParent(this.tableData, scope.row.id).forEach((item, i) => {
  513. // console.log(item)
  514. if (type == 'seebutton') {
  515. if (!item.childList) {
  516. console.log(item)
  517. item.fnCheck[type] = scope.row.fnCheck[type]
  518. } else {
  519. let num = 0
  520. item.childList.forEach((item, i) => {
  521. if (item.fnCheck[type] === true) {
  522. num += 1
  523. }
  524. })
  525. console.log(num)
  526. console.log(item.childList.length)
  527. if (num === item.childList.length) {
  528. console.log(item)
  529. item.fnCheck[type] = true
  530. item.indeterminate[type] = false
  531. } else {
  532. console.log(item)
  533. item.fnCheck[type] = false
  534. item.fnCheck['editbutton'] = false
  535. const childListArr = []
  536. const childEditListArr = []
  537. for (let i = 0; i < item.childList.length; i++) {
  538. childListArr.push(item.childList[i].fnCheck[type])
  539. console.log(item.childList[i].fnCheck['editbutton'])
  540. childEditListArr.push(item.childList[i].fnCheck['editbutton'])
  541. }
  542. // childListArr.includes(true)
  543. if (childListArr.includes(true)) {
  544. item.indeterminate[type] = true
  545. item.fnCheck['editbutton'] = false
  546. console.log(childEditListArr)
  547. item.indeterminate['editbutton'] = true
  548. console.log(item)
  549. if (item.childList.length > 0) {
  550. item.childList.forEach((item, i) => {
  551. if (item.fnCheck['editbutton'] === false) {
  552. item.fnCheck['editbutton'] = false
  553. } else {
  554. item.fnCheck['editbutton'] = item.fnCheck[type]
  555. }
  556. })
  557. }
  558. } else {
  559. item.indeterminate[type] = false
  560. item.indeterminate['editbutton'] = false
  561. if (item.childList.length > 0) {
  562. item.childList.forEach((item, i) => {
  563. item.fnCheck['editbutton'] = item.fnCheck[type]
  564. })
  565. }
  566. }
  567. }
  568. }
  569. } else if (type == 'editbutton') {
  570. if (!item.childList) {
  571. item.fnCheck[type] = scope.row.fnCheck[type]
  572. } else {
  573. let num = 0
  574. item.childList.forEach((item, i) => {
  575. if (item.fnCheck[type] === true) {
  576. num += 1
  577. }
  578. })
  579. if (num === item.childList.length) {
  580. item.fnCheck[type] = true
  581. item.fnCheck['seebutton'] = true
  582. item.indeterminate[type] = false
  583. item.indeterminate['seebutton'] = false
  584. item.childList.forEach((item, i) => { // 编辑时,选中编辑的同时,选中查看
  585. console.log(item)
  586. if (item.fnCheck['seebutton'] === false) { // 查看未选中时,选中编辑可控制查看
  587. item.fnCheck['seebutton'] = item.fnCheck['editbutton']
  588. }
  589. })
  590. console.log(item)
  591. } else {
  592. console.log(item)
  593. item.fnCheck[type] = false
  594. console.log(item.fnCheck['seebutton'])
  595. if (item.fnCheck['seebutton'] === false) { // 查看未选中时,选中编辑可控制查看
  596. item.fnCheck['seebutton'] = false
  597. }
  598. const childListArr = []
  599. for (let i = 0; i < item.childList.length; i++) {
  600. childListArr.push(item.childList[i].fnCheck[type])
  601. }
  602. childListArr.includes(true)
  603. if (childListArr.includes(true)) {
  604. if (item.fnCheck['seebutton'] === false) {
  605. item.indeterminate['seebutton'] = true
  606. }
  607. item.indeterminate[type] = true
  608. } else {
  609. if (item.fnCheck['seebutton'] === false) {
  610. item.indeterminate['seebutton'] = false
  611. }
  612. item.indeterminate[type] = false
  613. }
  614. // item.indeterminate[type] = true
  615. item.childList.forEach((item, i) => { // 编辑时,选中编辑的同时,选中查看
  616. if (item.fnCheck['seebutton'] === false) {
  617. item.fnCheck['seebutton'] = item.fnCheck['editbutton']
  618. }
  619. })
  620. console.log(item)
  621. }
  622. }
  623. }
  624. })
  625. },
  626. handleFnAll(row, fnCheck, indeterminate, type) {
  627. console.log(row, fnCheck, indeterminate, type)
  628. row.fnCheck[type] = fnCheck
  629. if (row.childList) {
  630. const that = this
  631. row.childList.forEach((element, i) => {
  632. row.indeterminate[type] = false
  633. console.log(fnCheck, indeterminate)
  634. // console.log(element, row.childList[i], fnCheck, indeterminate, type)
  635. that.handleFnAll(row.childList[i], fnCheck, indeterminate, type)
  636. })
  637. }
  638. },
  639. /**
  640. * 权限选择
  641. */
  642. // 权限:全部、自己
  643. // 子选框事件
  644. dataCheckEv(scope, type) {
  645. console.log(scope)
  646. const temp = scope.row.dataCheck[type]
  647. console.log(scope, type)
  648. for (const x in scope.row.dataCheck) {
  649. scope.row.dataCheck[x] = false
  650. }
  651. scope.row.dataCheck[type] = temp
  652. // 如果有子项,则子项的选框选择跟当前一致
  653. if (scope.row.childList) {
  654. this.handleDataAll(scope.row, scope.row.dataCheck[type], type)
  655. }
  656. // 查找父级选框
  657. this.getParent(this.tableData, scope.row.id).forEach((item, i) => {
  658. for (const x in item.dataCheck) {
  659. item.dataCheck[x] = false
  660. }
  661. if (!item.childList) {
  662. item.dataCheck[type] = temp
  663. } else {
  664. var num = 0
  665. item.childList.forEach((item, i) => {
  666. if (item.dataCheck[type] === true) {
  667. num += 1
  668. }
  669. })
  670. if (num === item.childList.length) {
  671. item.dataCheck[type] = true
  672. } else {
  673. item.dataCheck[type] = false
  674. }
  675. }
  676. })
  677. },
  678. handleDataAll(row, dataCheck, type) {
  679. for (const x in row.dataCheck) {
  680. row.dataCheck[x] = false
  681. }
  682. row.dataCheck[type] = dataCheck
  683. if (row.childList) {
  684. console.log(row, dataCheck, type)
  685. const that = this
  686. row.childList.forEach((element, i) => {
  687. that.handleDataAll(row.childList[i], dataCheck, type)
  688. })
  689. } else {
  690. console.log(row, dataCheck, type)
  691. }
  692. },
  693. renderSeeHeader(h, { column }) {
  694. return h(
  695. 'div',
  696. [
  697. h('span', column.label),
  698. h('el-checkbox', {
  699. style: 'display:inline-flex;margin-left:5px;',
  700. on: {
  701. change: ($event, column) => this.selectSee($event, column, 'see') // 选中事件 $event, column,这里$event=true,column是input的dom当在select里打印的时候
  702. }
  703. })
  704. ],
  705. )
  706. },
  707. renderEditHeader(h, { column }) {
  708. return h(
  709. 'div',
  710. [
  711. h('span', column.label),
  712. h('el-checkbox', {
  713. style: 'display:inline-flex;margin-left:5px;',
  714. on: {
  715. change: ($event, column) => this.selectEdit($event, column, 'edit') // 选中事件 $event, column,这里$event=true,column是input的dom当在select里打印的时候
  716. }
  717. })
  718. ],
  719. )
  720. },
  721. selectSee(obj, $event = this.targetEv, title) {
  722. const _this = this
  723. if ($event) {
  724. this.targetEv = $event // 这里是获取当前点击的input的dom元素赋值给this.targetEv,方便提交后初始化使用
  725. }
  726. if (obj === true) {
  727. this.flag = false
  728. } else {
  729. this.flag = true
  730. }
  731. this.targetEv.target.checked = obj
  732. this.targetEv.target.parentNode.className = obj ? 'el-checkbox__input is-checked' : 'el-checkbox__input'
  733. _this.tableData.forEach((item, index) => {
  734. _this.$set(_this.tableData[index], 'check', obj.toString())
  735. if (title === 'see') {
  736. if (obj === true) {
  737. item.fnCheck['seebutton'] = true
  738. if (item.childList.length > 0) {
  739. item.childList.forEach((item, index) => {
  740. item.fnCheck['seebutton'] = true
  741. })
  742. }
  743. } else {
  744. item.fnCheck['seebutton'] = false
  745. if (item.childList.length > 0) {
  746. item.childList.forEach((item, index) => {
  747. item.fnCheck['seebutton'] = false
  748. })
  749. }
  750. }
  751. }
  752. })
  753. },
  754. selectEdit(obj, $event = this.targetEv, title) {
  755. const _this = this
  756. if ($event) {
  757. this.targetEv = $event // 这里是获取当前点击的input的dom元素赋值给this.targetEv,方便提交后初始化使用
  758. }
  759. console.log('进来就错了', obj)
  760. if (obj === true) {
  761. this.flag = false
  762. } else {
  763. this.flag = true
  764. }
  765. this.targetEv.target.checked = obj
  766. this.targetEv.target.parentNode.className = obj ? 'el-checkbox__input is-checked' : 'el-checkbox__input'
  767. _this.tableData.forEach((item, index) => {
  768. _this.$set(_this.tableData[index], 'check', obj.toString())
  769. if (title === 'edit') {
  770. if (obj === true) {
  771. item.fnCheck['editbutton'] = true
  772. if (item.fnCheck['seebutton'] === false) {
  773. item.fnCheck['seebutton'] = true
  774. }
  775. if (item.childList.length > 0) {
  776. item.childList.forEach((item, index) => {
  777. item.fnCheck['editbutton'] = true
  778. if (item.fnCheck['seebutton'] === false) {
  779. item.fnCheck['seebutton'] = true
  780. }
  781. })
  782. }
  783. } else {
  784. item.fnCheck['editbutton'] = false
  785. if (item.childList.length > 0) {
  786. item.childList.forEach((item, index) => {
  787. item.fnCheck['editbutton'] = false
  788. })
  789. }
  790. }
  791. }
  792. })
  793. },
  794. roleData(row) {
  795. console.log('点击了权限确认', this.tableData)
  796. // console.log('点击了权限确认', JSON.stringify(this.tableData))
  797. const dataAll = []
  798. const dataArr = []
  799. const dataArr2 = []
  800. this.tableData.forEach((item, index) => {
  801. if (item.fnCheck.seebutton === true) { item.seebutton = 1 } else { item.seebutton = 0 }
  802. if (item.fnCheck.editbutton === true) { item.editbutton = 1 } else { item.editbutton = 0 }
  803. if (item.childList.length > 0) {
  804. item.childList.forEach((item, index) => {
  805. if (item.fnCheck.seebutton === true) { item.seebutton = 1 } else { item.seebutton = 0 }
  806. if (item.fnCheck.editbutton === true) { item.editbutton = 1 } else { item.editbutton = 0 }
  807. dataArr2.push({ 'menuid': item.menu_id, 'seebutton': item.seebutton, 'editbutton': item.editbutton })
  808. })
  809. }
  810. dataArr.push({ 'menuid': item.menu_id, 'seebutton': item.seebutton, 'editbutton': item.editbutton })
  811. })
  812. dataArr.forEach((item, index) => {
  813. dataAll.push({ 'menuid': item.menuid, 'seebutton': item.seebutton, 'editbutton': item.editbutton })
  814. })
  815. dataArr2.forEach((item, index) => {
  816. dataAll.push({ 'menuid': item.menuid, 'seebutton': item.seebutton, 'editbutton': item.editbutton })
  817. })
  818. this.requestParam.common = { 'returnmap': '0' }
  819. this.requestParam.data = []
  820. this.requestParam.data[0] = { 'name': 'insertSpotList', 'resultmaps': { 'list': dataAll }}
  821. this.requestParam.data[0].children = []
  822. this.requestParam.data[0].children[0] = { 'name': 'insertRolemenu', 'type': 'e', 'parammaps': {
  823. pastureid: this.role.temp.pastureid,
  824. roleid: this.role.temp.id,
  825. menuid: '@insertSpotList.menuid',
  826. seebutton: '@insertSpotList.seebutton',
  827. editbutton: '@insertSpotList.editbutton'
  828. }}
  829. ExecDataByConfig(this.requestParam).then(response => {
  830. console.log('权限菜单保存发送参数', this.requestParam)
  831. if (response.msg === 'fail') {
  832. this.$notify({ title: '保存失败', message: response.data, type: 'warning', duration: 2000 })
  833. } else {
  834. this.$notify({ title: '', message: '保存成功', type: 'success', duration: 2000 })
  835. this.role.dialogFormVisible = false
  836. this.getList()
  837. }
  838. })
  839. }
  840. }
  841. }
  842. </script>
  843. <style lang="scss" scoped>
  844. .search{margin-top:10px;}
  845. .table{margin-top:10px;}
  846. .inside-base {
  847. position: relative;
  848. }
  849. .inside-base-main {
  850. width: 100%;
  851. background: #ffffff;
  852. box-shadow: 0px 0px 10px 0px rgba(231,232,238,1);
  853. border-radius: 4px;
  854. margin-bottom: 30px;
  855. }
  856. // 中间内容
  857. .inside-base-cont {
  858. margin: 0 20px;
  859. }
  860. .role-cont {
  861. position: relative;
  862. font-size: 16px;
  863. color: #333333;
  864. line-height: 40px;
  865. > span {
  866. width: 90px;
  867. height: 40px;
  868. text-align: right;
  869. float: left;
  870. margin-right: 10px;
  871. margin-bottom: 20px;
  872. }
  873. > div {
  874. position: relative;
  875. width: 100%;
  876. float: left;
  877. margin-bottom: 20px;
  878. >>> .el-input__inner {
  879. width: 320px;
  880. }
  881. }
  882. }
  883. .check-page-all {
  884. position: absolute;
  885. top: 13px;
  886. left: 11px;
  887. z-index: 99;
  888. }
  889. /* element-ui css */
  890. .inside-base {
  891. >>> .el-input__inner {
  892. font-size: 16px;
  893. color: #333333;
  894. }
  895. }
  896. </style>