373c88ee35c1d6c7e53d18331c85314919bbf7d6.svn-base 37 KB

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