123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208 |
- <template>
- <a-card class="organization-wrap" :bordered="false">
- <!-- 新建 -->
- <div class="table-operator"><a-button id="organization-add" type="primary" icon="plus" @click="addOrg()" v-hasPermission="'B_basicSettings_organization_add'">添加最高级</a-button></div>
- <!-- 表格列表 -->
- <s-table
- class="s-table"
- ref="table"
- size="default"
- rowKey="id"
- :showPagination="false"
- :columns="columns"
- :data="loadData"
- bordered>
- <!-- 操作 -->
- <template slot="action" slot-scope="text, record">
- <a-button
- v-if="record.parentIdPaths.split(',').length < 5"
- type="link"
- size="small"
- icon="plus"
- class="btn-add-s"
- id="organization-addSubItem"
- @click="addOrg(text)"
- v-hasPermission="'B_basicSettings_organization_add_child'">添加子级</a-button>
- <a-button
- type="link"
- size="small"
- icon="edit"
- class="btn-edit-s"
- id="organization-edit"
- @click="editOrg(text)"
- v-hasPermission="'B_basicSettings_organization_edit'">编辑</a-button>
- <a-button
- type="link"
- size="small"
- icon="delete"
- class="btn-del-s"
- id="organization-del"
- @click="delOrg(text)"
- v-hasPermission="'B_basicSettings_organization_del'">删除</a-button>
- </template>
- </s-table>
- <!-- 添加子级 -->
- <a-modal
- class="organization-modal"
- :title="title"
- :visible="visible"
- :footer="null"
- :closable="true"
- @cancel="onCancel"
- width="600px">
- <!-- 表单 -->
- <a-form-model ref="ruleForm" :model="form" :rules="rules">
- <a-form-model-item label="网点名称" prop="name">
- <a-input v-model.trim="form.name" id="organization-itemName" :maxLength="30" placeholder="请输入组织机构名称,30个字以内" />
- </a-form-model-item>
- <a-form-model-item class="btn-cont">
- <a-button type="primary" id="organization-save" @click="onSubmit">保存</a-button>
- <a-button class="cancel" id="organization-cancel" @click="onCancel">取消</a-button>
- </a-form-model-item>
- </a-form-model>
- </a-modal>
- </a-card>
- </template>
- <script>
- import { STable, VSelect } from '@/components'
- import { findOrgTree, saveAtorg, delAtorg } from '@/api/atorg.js'
- export default {
- components: { STable, VSelect },
- data () {
- return {
- columns: [
- { title: '组织机构名称', dataIndex: 'name', width: '100', align: 'left' },
- { title: '创建时间', dataIndex: 'createDate', width: '100', align: 'center' },
- { title: '操作', scopedSlots: { customRender: 'action' }, width: '265', align: 'center' }
- ],
- // 加载数据方法 必须为 Promise 对象
- loadData: parameter => {
- return findOrgTree().then(res => {
- // 递归去除空children
- this.recursionFun(res.data)
- return res.data
- })
- },
- title: '新增', // 对话框标题
- visible: false, // 对话框是否可见
- form: { // 新增编辑 组织机构
- name: ''
- },
- rules: { // 表单校验规则
- name: [{ required: true, message: '请输入组织机构名称', trigger: 'blur' }]
- },
- nowId: '', // 当前操作的数据id
- nowPid: '' // 当前操作的数据上级id
- }
- },
- methods: {
- // 添加子级
- addOrg (item) {
- this.nowId = ''
- this.form.name = ''
- if (item) { // 子级
- this.nowPid = item.id
- } else { // 最高级
- this.nowPid = ''
- }
- this.title = '新增'
- this.visible = true
- },
- // 编辑
- editOrg (item) {
- this.nowId = item.id
- this.nowPid = item.pid
- this.title = '编辑'
- this.form.name = item.name
- this.visible = true
- },
- // 保存
- onSubmit () {
- const _this = this
- _this.$refs.ruleForm.validate(valid => {
- if (valid) {
- const formData = JSON.parse(JSON.stringify(_this.form))
- formData.id = _this.nowId
- formData.pid = _this.nowPid
- saveAtorg(formData).then(res => {
- if (res.status == 200) {
- _this.$message.success(res.message)
- _this.$refs.table.refresh(true)
- _this.visible = false
- }
- })
- } else {
- return false
- }
- })
- },
- // 关闭对话框
- onCancel () {
- this.$refs.ruleForm.resetFields()
- this.visible = false
- },
- // 删除
- delOrg (item) {
- const _this = this
- _this.nowId = item.id
- _this.$confirm({
- title: '提示',
- content: '删除后原数据不可恢复,是否删除?',
- onOk () {
- delAtorg({ id: _this.nowId }).then(res => {
- if (res.status == 200) {
- _this.$message.success(res.message)
- _this.$refs.table.refresh()
- }
- })
- }
- })
- },
- // 递归函数
- recursionFun (data) {
- if (data) {
- data.map(item => {
- if (item.children && item.children.length == 0) {
- delete item.children
- } else {
- this.recursionFun(item.children)
- }
- })
- }
- }
- }
- }
- </script>
- <style lang="less">
- .organization-wrap{
- // 表格
- .s-table{
- .btn-edit-s{
- color: #1891ff;
- margin: 0 5px;
- }
- .btn-del-s{
- color: #ff4d4f;
- }
- .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){
- color: #1891ff;
- border-color: #1891ff;
- }
- .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){
- color: #ff4d4f;
- border-color: #ff4d4f;
- }
- }
- }
- // 弹框
- .organization-modal{
- .btn-cont{
- text-align: center;
- .cancel {
- margin-left: 50px;
- }
- }
- }
- </style>
|