epmet-work-pc-chengyang/src/views/modules/workSys/role/roleForm.vue

<template>
  <div class="epidemic-form">
    <div class="dialog-h-content scroll-h">

      <el-form ref="ref_form"
               :inline="true"
               :model="formData"
               :rules="dataRule"
               :disabled="formType==='detail'"
               class="form">

        <el-form-item label="角色名称"
                      prop="name"
                      label-width="150px"
                      style="display: block">
          <el-input class="item_width_2"
                    placeholder="请输入角色名称"
                    clearable
                    v-model="formData.name">
          </el-input>

        </el-form-item>

        <el-form-item label="备注"
                      prop="remark"
                      label-width="150px"
                      style="display: block">
          <el-input class="item_width_1"
                    type="textarea"
                    maxlength="500"
                    show-word-limit
                    :autosize="{ minRows: 5, maxRows: 10 }"
                    clearable
                    placeholder="请输入备注"
                    v-model="formData.remark"></el-input>
        </el-form-item>

        <el-form-item label="管理平台菜单"
                      prop="content"
                      label-width="150px"
                      style="display: block">
          <el-tree class="item_width_1"
                   :data="menuList"
                   :props="{ label: 'name', children: 'children' }"
                   node-key="id"
                   :default-expanded-keys="['000']"
                   ref="menuListTree"
                   accordion
                   show-checkbox>
          </el-tree>
        </el-form-item>
        <el-form-item label="可视化平台菜单"
                      prop="content"
                      label-width="150px"
                      style="display: block">
          <el-tree class="item_width_1 item_border"
                   :data="menuListShuju"
                   :props="{ label: 'name', children: 'children' }"
                   node-key="id"
                   :default-expanded-keys="['000']"
                   ref="menuListShujuTree"
                   accordion
                   show-checkbox>
          </el-tree>
        </el-form-item>

      </el-form>
    </div>

    <div class="form_div_btn">
      <el-button size="small"
                 @click="handleCancle">取 消</el-button>
      <el-button v-if="formType != 'detail'"
                 size="small"
                 type="primary"
                 :disabled="btnDisable"
                 @click="handleComfirm">确 定</el-button>
    </div>

  </div>
</template>

<script>

import { Loading } from 'element-ui' // 引入Loading服务
import { requestPost, requestGet } from '@/js/dai/request'

let loading // 加载动画
export default {
  data () {
    return {
      formType: 'add', //表单操作类型 add新增，edit编辑，detail详情

      btnDisable: false,

      roleId: '',
      menuList: [],
      menuListShuju: [],
      formData: {
        id: '',
        name: '',
        remark: '',//备注
        menuIdList: [],
        customerId: ''
      },



    }
  },
  components: {},
  async mounted () {


  },

  methods: {

    async initForm (type, roleId) {
      this.startLoading()
      this.customerId = localStorage.getItem("customerId");
      this.formData.customerId = this.customerId
      //获取菜单
      await this.getMenuList()
      await this.getMenuShujuList()

      this.$refs.menuListTree.setCheckedKeys([])
      this.$refs.menuListShujuTree.setCheckedKeys([])

      this.formType = type

      if (roleId) {
        this.roleId = roleId
        this.formData.id = roleId
        this.loadFormData()
      }

      this.endLoading()


    },


    async getMenuList () {
      const url = "/gov/access/menu/nav"

      let params = {}

      const { data, code, msg } = await requestGet(url, params)

      if (code === 0) {
        this.menuList = [
          {
            id: '000',
            name: '全部菜单',
            children: [...data]
          }
        ]
        // this.menuList = data

      } else {
        this.$message.error(msg)
      }

    },
    async getMenuShujuList () {
      const url = "/gov/access/menu/nav"

      let params = {
        tableName: 'data_menu'
      }


      const { data, code, msg } = await requestGet(url, params)

      if (code === 0) {
        this.menuListShuju = [
          {
            id: '000',
            name: '全部菜单',
            children: [...data]
          }
        ]
        // this.menuListShuju = data

      } else {
        this.$message.error(msg)
      }

    },

    async loadFormData () {

      // const url = 'http://yapi.elinkservice.cn/mock/245/epmetuser/icNat/detail'
      const url = '/gov/access/govrole/' + this.roleId
      let params = {

      }
      const { data, code, msg } = await requestGet(url, params)
      if (code === 0) {
        this.formData = data

        this.formData.menuIdList.forEach(item => {
          this.$refs.menuListTree.setChecked(item, true)

        })
        this.formData.menuIdList.forEach(item => {
          this.$refs.menuListShujuTree.setChecked(item, true)
        })
        this.formData.customerId = this.customerId

      } else {
        this.$message.error(msg)
      }
    },

    handleComfirm () {
      this.$refs['ref_form'].validate((valid, messageObj) => {
        if (!valid) {
          app.util.validateRule(messageObj)

        } else {
          this.addNat()
        }

      })
    },

    async addNat () {


      this.formData.menuIdList = []
      this.formData.menuIdList = [
        ...this.$refs.menuListTree.getCheckedKeys(),
        ...this.$refs.menuListTree.getHalfCheckedKeys(),
        ...this.$refs.menuListShujuTree.getCheckedKeys(),
        ...this.$refs.menuListShujuTree.getHalfCheckedKeys()
      ]
      this.formData.menuIdList = this.formData.menuIdList.filter(item => item !== '000')

      console.log('menuAll', this.formData)

      // return false
      this.btnDisable = true
      setTimeout(() => {
        this.btnDisable = false
      }, 5000)

      let url = ''
      if (this.formType === 'add') {
        url = '/gov/access/govrole/save'

        this.formData.roleId = ''

      } else {
        url = '/gov/access/govrole/edit'

      }


      const { data, code, msg } = await requestPost(url, this.formData)

      if (code === 0) {
        this.$message({
          type: 'success',
          message: '操作成功'
        })
        this.resetData()
        this.$emit('dialogOk')
        this.btnDisable = false

      } else {
        this.btnDisable = false
        this.$message.error(msg)
      }

    },

    handleCancle () {
      this.resetData()
      this.$emit('dialogCancle')

    },

    resetData () {

      this.roleId = ''

      this.formData = {
        id: '',
        name: '',
        remark: '',//备注
        menuIdList: [],
        customerId: ''

      }
      this.$refs['ref_form'].resetFields()
    },
    // 开启加载动画
    startLoading () {
      loading = Loading.service({
        lock: true, // 是否锁定
        text: '正在加载……', // 加载中需要显示的文字
        background: 'rgba(0,0,0,.7)' // 背景颜色
      })
    },
    // 结束加载动画
    endLoading () {
      // clearTimeout(timer);
      if (loading) {
        loading.close()
      }
    }
  },
  computed: {
    dataRule () {
      return {
        name: [
          { required: true, message: '角色名称不能为空', trigger: 'change' }
        ],


      }
    },

  },
  props: {


  }
}
</script>


<style lang="scss" scoped >
@import "@/assets/scss/modules/management/epidemic.scss";

.item_border {
  border: 1px;
  border-radius: 50%;
}
</style>

<style lang='scss'>
// 隐藏上传按钮
.hide .el-upload--picture-card {
  display: none;
}
// 添加/删除文件时去掉动画过渡
.el-upload-list__item {
  transition: none !important;
}
</style>