05c1bc4bf8c84f43aeccf23cef3a3839a804a01e.svn-base 38 KB

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