laws-sinotruk-client/src/views/businessSupport/dataCenter/modules/AddNodeModal.vue

<template>
  <a-modal
    class="add-menus"
    :title="title"
    :width="600"
    :visible="visible"
    :confirm-loading="confirmLoading"
    @cancel="handleCancelMenuRight"
    @ok="hideModalMenuRight"
  >
    <a-form-model
      class="split-click-right-form"
      ref="ruleForm"
      :model="form"
      :rules="rules"
    >
      <a-row :gutter="24">
        <a-col :span="24">
          <div class="box-title-text">
            <div class="title-text">
              <span class="required">*</span>
              <span class="title-text-text"
                    :title="$t('treeRight.folderName')">{{$t('treeRight.folderName')}}</span>
            </div>
            <a-form-model-item prop="folderName" style='width: 72%'>
              <a-input
                v-model.trim="form.folderName"
                style='width: 130%'
                class="box-input add-input"
                maxLength="100"
                :placeholder="$t('pleaseEnter')+$t('treeRight.folderName')"/>
            </a-form-model-item>
          </div>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="24">
          <div class="box-title-text">
            <div class="title-text">
                          <span class="title-text-text"
                                :title="$t('treeRight.administrativePrivileges')">{{$t('treeRight.administrativePrivileges')}}</span>
            </div>
            <a-form-model-item class="itemModel-multi" prop="authManageIdsName">
              <a-select
                mode="multiple"
                v-model="form.authManageIdsName"
                :placeholder="$t('pleaseSelect')+$t('treeRight.administrativePrivileges')"
                :filter-option="false"
                :not-found-content="null"
                allowClear
                @search="personSearch"
              >
                <a-select-option v-for="item in personList" :key="item.id" :value="item.id">
                  {{ item.realname }}
                </a-select-option>
                <template slot="notFoundContent">
                  <a-empty></a-empty>
                </template>
              </a-select>
            </a-form-model-item>
          </div>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="24">
          <div class="box-title-text">
            <div class="title-text">
                          <span class="title-text-text"
                                :title="$t('treeRight.checkPermissions')">{{$t('treeRight.checkPermissions')}}</span>
            </div>
            <a-form-model-item class="itemModel-multi" prop="authViewIdsName">
              <a-select
                mode="multiple"
                v-model="form.authViewIds"
                :placeholder="$t('pleaseSelect')+$t('treeRight.administrativePrivileges')"
                :filter-option="false"
                :not-found-content="null"
                allowClear
                @search="personSearch"
              >
                <a-select-option v-for="item in personList" :key="item.id" :value="item.id">
                  {{ item.realname }}
                </a-select-option>
                <template slot="notFoundContent">
                  <a-empty></a-empty>
                </template>
              </a-select>
            </a-form-model-item>
          </div>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="24">
          <div class="box-title-text">
            <div class="title-text">
              <span class="Required">*</span>
              <span class="title-text-text"
                    :title="$t('treeRight.folderOrder')">{{$t('treeRight.folderOrder')}}</span>
            </div>
            <a-form-model-item class="itemModel" prop="orderId">
              <a-input-number v-model.trim="form.orderId" :min="1" :max="9999" class="box-input add-input"
                              :placeholder="$t('pleaseEnter')+$t('treeRight.folderOrder')" :formatter="limitNumber"
                              :parser="limitNumber"/>
            </a-form-model-item>
          </div>
        </a-col>
      </a-row>
    </a-form-model>
  </a-modal>
</template>

<script>
import { getUserList } from '@/api/api'
import { postAction, putAction } from '@/api/manage'

export default {
  name: 'AddNodeModal',
  data () {
    return {
      title: this.$t('add'),
      visible: false,
      confirmLoading: false,
      form: {},
      rules: {
        folderName: [
          { required: true, message: this.$t('pleaseEnter') + this.$t('treeRight.folderName'), trigger: 'blur' }
        ],
        // authManageIdsName: [
        //   { required: true, message: this.$t('pleaseSelect') + this.$t('treeRight.administrativePrivileges'), trigger: 'change' },
        // ],
        // authViewIdsName: [
        //   { required: true, message: this.$t('pleaseSelect') + this.$t('treeRight.checkPermissions'), trigger: 'change' },
        // ],
        orderId: [
          { required: true, message: this.$t('pleaseEnter') + this.$t('treeRight.folderOrder'), trigger: 'blur' }
        ]
      },
      personList: [],
      isEdit: false
    }
  },
  methods: {
    open (isEdit, form) {
      this.visible = true
      this.isEdit = true
      this.form = Object.assign({}, form)
    },
    personSearch (value) {
      getUserList({ pageNo: 1, pageSize: 20, realname: '*' + value + '*' }).then(res => {
        if (res.success) {
          this.personList = res.result.records || []
        }
      })
    },
    // 取消文件夹的新增或编辑
    handleCancelMenuRight () {
      this.visible = false
      this.$refs.ruleForm.clearValidate()
    },
    // 增加文件夹确定
    hideModalMenuRight () {
      if (this.confirmLoading) {
        return
      }
      if (!this.isEdit) {
        const params = {
          ...this.form
        }
        this.$refs.ruleForm.validate(valid => {
          if (valid) {
            this.confirmLoading = true
            postAction(`extRepo/extRepoFolder/add`, params).then(res => {
              if (res.success) {
                this.$message.success(res.message)
                this.form = {}
              } else {
                this.$message.warning(res.message)
              }
            }).finally(() => {
              this.confirmLoading = false
              this.visible = false
            })
          }
        })
      } else {
        const params = {
          ...this.form
        }
        putAction(`extRepo/extRepoFolder/edit`, params).then(res => {
          if (res.success) {
            this.$message.success(res.message)
            this.form = {}
            this.loadMenuData()
          } else {
            this.$message.warning(res.message)
          }
        }).finally(() => {
          this.confirmLoading = false
          this.visible = false
        })
      }
    },
  }
}
</script>

<style scoped>

</style>