Organization.vue 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208
  1. <template>
  2. <a-card class="organization-wrap" :bordered="false">
  3. <!-- 新建 -->
  4. <div class="table-operator"><a-button id="organization-add" type="primary" icon="plus" @click="addOrg()" v-hasPermission="'B_basicSettings_organization_add'">添加最高级</a-button></div>
  5. <!-- 表格列表 -->
  6. <s-table
  7. class="s-table"
  8. ref="table"
  9. size="default"
  10. rowKey="id"
  11. :showPagination="false"
  12. :columns="columns"
  13. :data="loadData"
  14. bordered>
  15. <!-- 操作 -->
  16. <template slot="action" slot-scope="text, record">
  17. <a-button
  18. v-if="record.parentIdPaths.split(',').length < 5"
  19. type="link"
  20. size="small"
  21. icon="plus"
  22. class="btn-add-s"
  23. id="organization-addSubItem"
  24. @click="addOrg(text)"
  25. v-hasPermission="'B_basicSettings_organization_add_child'">添加子级</a-button>
  26. <a-button
  27. type="link"
  28. size="small"
  29. icon="edit"
  30. class="btn-edit-s"
  31. id="organization-edit"
  32. @click="editOrg(text)"
  33. v-hasPermission="'B_basicSettings_organization_edit'">编辑</a-button>
  34. <a-button
  35. type="link"
  36. size="small"
  37. icon="delete"
  38. class="btn-del-s"
  39. id="organization-del"
  40. @click="delOrg(text)"
  41. v-hasPermission="'B_basicSettings_organization_del'">删除</a-button>
  42. </template>
  43. </s-table>
  44. <!-- 添加子级 -->
  45. <a-modal
  46. class="organization-modal"
  47. :title="title"
  48. :visible="visible"
  49. :footer="null"
  50. :closable="true"
  51. @cancel="onCancel"
  52. width="600px">
  53. <!-- 表单 -->
  54. <a-form-model ref="ruleForm" :model="form" :rules="rules">
  55. <a-form-model-item label="网点名称" prop="name">
  56. <a-input v-model.trim="form.name" id="organization-itemName" :maxLength="30" placeholder="请输入组织机构名称,30个字以内" />
  57. </a-form-model-item>
  58. <a-form-model-item class="btn-cont">
  59. <a-button type="primary" id="organization-save" @click="onSubmit">保存</a-button>
  60. <a-button class="cancel" id="organization-cancel" @click="onCancel">取消</a-button>
  61. </a-form-model-item>
  62. </a-form-model>
  63. </a-modal>
  64. </a-card>
  65. </template>
  66. <script>
  67. import { STable, VSelect } from '@/components'
  68. import { findOrgTree, saveAtorg, delAtorg } from '@/api/atorg.js'
  69. export default {
  70. components: { STable, VSelect },
  71. data () {
  72. return {
  73. columns: [
  74. { title: '组织机构名称', dataIndex: 'name', width: '100', align: 'left' },
  75. { title: '创建时间', dataIndex: 'createDate', width: '100', align: 'center' },
  76. { title: '操作', scopedSlots: { customRender: 'action' }, width: '265', align: 'center' }
  77. ],
  78. // 加载数据方法 必须为 Promise 对象
  79. loadData: parameter => {
  80. return findOrgTree().then(res => {
  81. // 递归去除空children
  82. this.recursionFun(res.data)
  83. return res.data
  84. })
  85. },
  86. title: '新增', // 对话框标题
  87. visible: false, // 对话框是否可见
  88. form: { // 新增编辑 组织机构
  89. name: ''
  90. },
  91. rules: { // 表单校验规则
  92. name: [{ required: true, message: '请输入组织机构名称', trigger: 'blur' }]
  93. },
  94. nowId: '', // 当前操作的数据id
  95. nowPid: '' // 当前操作的数据上级id
  96. }
  97. },
  98. methods: {
  99. // 添加子级
  100. addOrg (item) {
  101. this.nowId = ''
  102. this.form.name = ''
  103. if (item) { // 子级
  104. this.nowPid = item.id
  105. } else { // 最高级
  106. this.nowPid = ''
  107. }
  108. this.title = '新增'
  109. this.visible = true
  110. },
  111. // 编辑
  112. editOrg (item) {
  113. this.nowId = item.id
  114. this.nowPid = item.pid
  115. this.title = '编辑'
  116. this.form.name = item.name
  117. this.visible = true
  118. },
  119. // 保存
  120. onSubmit () {
  121. const _this = this
  122. _this.$refs.ruleForm.validate(valid => {
  123. if (valid) {
  124. const formData = JSON.parse(JSON.stringify(_this.form))
  125. formData.id = _this.nowId
  126. formData.pid = _this.nowPid
  127. saveAtorg(formData).then(res => {
  128. if (res.status == 200) {
  129. _this.$message.success(res.message)
  130. _this.$refs.table.refresh(true)
  131. _this.visible = false
  132. }
  133. })
  134. } else {
  135. return false
  136. }
  137. })
  138. },
  139. // 关闭对话框
  140. onCancel () {
  141. this.$refs.ruleForm.resetFields()
  142. this.visible = false
  143. },
  144. // 删除
  145. delOrg (item) {
  146. const _this = this
  147. _this.nowId = item.id
  148. _this.$confirm({
  149. title: '提示',
  150. content: '删除后原数据不可恢复,是否删除?',
  151. onOk () {
  152. delAtorg({ id: _this.nowId }).then(res => {
  153. if (res.status == 200) {
  154. _this.$message.success(res.message)
  155. _this.$refs.table.refresh()
  156. }
  157. })
  158. }
  159. })
  160. },
  161. // 递归函数
  162. recursionFun (data) {
  163. if (data) {
  164. data.map(item => {
  165. if (item.children && item.children.length == 0) {
  166. delete item.children
  167. } else {
  168. this.recursionFun(item.children)
  169. }
  170. })
  171. }
  172. }
  173. }
  174. }
  175. </script>
  176. <style lang="less">
  177. .organization-wrap{
  178. // 表格
  179. .s-table{
  180. .btn-edit-s{
  181. color: #1891ff;
  182. margin: 0 5px;
  183. }
  184. .btn-del-s{
  185. color: #ff4d4f;
  186. }
  187. .btn-edit-s.ant-btn:focus:not(.ant-btn-primary):not(.ant-btn-danger), .btn-edit-s.ant-btn:hover:not(.ant-btn-primary):not(.ant-btn-danger){
  188. color: #1891ff;
  189. border-color: #1891ff;
  190. }
  191. .btn-del-s.ant-btn:focus:not(.ant-btn-primary):not(.ant-btn-danger), .btn-del-s.ant-btn:hover:not(.ant-btn-primary):not(.ant-btn-danger){
  192. color: #ff4d4f;
  193. border-color: #ff4d4f;
  194. }
  195. }
  196. }
  197. // 弹框
  198. .organization-modal{
  199. .btn-cont{
  200. text-align: center;
  201. .cancel {
  202. margin-left: 50px;
  203. }
  204. }
  205. }
  206. </style>