wms-vue/src/views/modules/sys/user-add-or-update.vue

<template>
  <div class="user-add-or-update">
    <el-dialog
      width="530px"
      :title="!dataForm.id ?  buttons.add :buttons.edit"
      :close-on-click-modal="false"
      :visible.sync="visible">
      <!-- 取消    :rules="dataRule"-->
      <el-form :inline="true" :model="dataForm" label-position="top" ref="dataForm"
               @keyup.enter.native="dataFormSubmit()"
               label-width="80px">
        <el-form>
          <el-form-item :label="buttons.username||'用户账号'" prop="userName">
            <el-input v-model="dataForm.userName" style="width: 150px;" placeholder="登录帐号"></el-input>
          </el-form-item>
          <el-form-item :label="buttons.password||'密码'" prop="password" :class="{ 'is-required': !dataForm.id }">
            <el-input v-model="dataForm.password" style="width: 150px;" type="password" ></el-input>
          </el-form-item>
          <el-form-item :label="buttons.comfirmPassword||'确认密码'" prop="comfirmPassword" :class="{ 'is-required': !dataForm.id }">
            <el-input v-model="dataForm.comfirmPassword" style="width: 150px;" type="password"
                      ></el-input>
          </el-form-item>
        </el-form>
        <el-form>
          <el-form-item :label="buttons.userDisplay||'用户名'" prop="email">
            <el-input v-model="dataForm.userDisplay" style="width: 150px;" ></el-input>
          </el-form-item>
          <el-form-item :label="buttons.domainAccount||'域控账号'" prop="domainAccount">
            <el-input v-model="dataForm.domainAccount" style="width: 150px;" placeholder="域控账号"></el-input>
          </el-form-item>
          <el-form-item :label="buttons.email||'邮箱'" prop="email">
            <el-input v-model="dataForm.email" style="width: 150px;" ></el-input>
          </el-form-item>
          <el-form-item :label="buttons.mobile||'手机号'" prop="mobile">
            <el-input v-model="dataForm.mobile" style="width: 150px;" placeholder="手机号"></el-input>
          </el-form-item>
          <el-form-item :label="buttons.language||'语言'" prop="languageDefault">
            <el-select filterable v-model="dataForm.languageDefault" clearable style="width: 150px;">
              <el-option :label="item.languageName" :value="item.languageCode" v-for="(item,index) in languageList "
                         :key="index"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <el-form>
          <el-form-item :label="buttons.site||'工厂'" size="mini" prop="siteList">
            <el-checkbox-group v-model="dataForm.siteList">
              <el-checkbox v-for="site in siteOptions" :key="site.key" :label="site.key">{{
                  site.label
                }}
              </el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-form>
        <el-form>
          <el-form-item label="角色" size="mini" prop="roleIdList">
            <el-checkbox-group v-model="dataForm.roleIdList">
              <el-checkbox v-for="role in roleList" :key="role.roleId" :label="role.roleId">{{
                  role.roleName
                }}
              </el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-form>
        <el-form>
          <el-form-item label="状态" size="mini" prop="status">
            <el-radio-group v-model="dataForm.status">
              <el-radio :label="0">{{buttons.disable||'禁用'}}</el-radio>
              <el-radio :label="1">{{buttons.normal||'正常'}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </el-form>
      <span slot="footer" class="dialog-footer">
         <el-button type="primary" @click="dataFormSubmit()">{{buttons.submit||'确定'}}</el-button>
         <el-button @click="visible = false">{{buttons.close||'取消'}}</el-button>
    </span>
    </el-dialog>

    <Chooselist ref="baseList"  @getBaseData="getBaseData"></Chooselist>
  </div>

</template>

<script>
  import Chooselist from '@/views/modules/common/Chooselist'
import {searchSysLanguage} from "@/api/sysLanguage.js"
import {getUserAccessSiteList, saveUserAccessSiteList, getUserAuthorizedSites} from "@/api/factory/accessSite.js"
  import {
    searchFunctionButtonList,
  } from "@/api/sysLanguage.js"
export default {
  components: {
    Chooselist
  },
  data() {
    return {
      tagNo:'',
      visible: false,
      roleList: [],
      factorys: [],
      languageList: [],
      siteOptions: [], // 工厂选项列表
      dataForm: {
        id: 0,
        userName: '',
        password: '',
        comfirmPassword: '',
        languageDefault: 'cn',
        salt: '',
        email: '',
        mobile: '',
        roleIdList: [],
        status: 1,
        site: '', // 保持兼容性
        siteList: [], // 多选工厂列表
        userDisplay: '',
        domainAccount: ''
      },
      buttons: {
        add: '添加',
        edit: '编辑',
        username: '用户账号',
        userDisplay: '用户名',
        domainAccount: '域控账号',
        email: '邮箱',
        mobile: '手机号',
        status: '状态',
        disable: '禁用',
        normal: '正常',
        password:'密码',
        comfirmPassword:'确认密码',
        submit: '确定',
        close: '取消',
        site: '工厂',
        language: '语言',
      },
    }
  },
  methods: {
    getFunctionButtonList() {
      let queryButton = {
        functionId: this.$route.meta.menuId,
        tableId: '*',
        languageCode: this.$i18n.locale,
        objectType: 'button'
      }
      searchFunctionButtonList(queryButton).then(({data}) => {
        if (data.code == 0 && data.data) {
          this.buttons = data.data
        }
      })
    },
    getBaseData(val){
      if (this.tagNo === 93){
        this.dataForm.site = val.SiteID
      }
    },
    // 获取基础数据列表
    getBaseList(val){
      this.tagNo = val
      this.$nextTick(() => {
        let strVal = "";
        if (val === 93){
          strVal = this.dataForm.site
        }
        this.$refs.baseList.init(val,strVal)
      })
    },
    // 获取多语言列表
    getLanguageList() {
      let queryLanguage = { languageCode: this.$i18n.locale}
      searchSysLanguage(queryLanguage).then(({data}) => {
        this.languageList = data.rows
      })
    },


    init(id) {
      this.dataForm.id = id || 0

      // 如果是新增模式，清空表单数据
      if (!this.dataForm.id) {
        this.dataForm = {
          id: 0,
          userName: '',
          password: '',
          comfirmPassword: '',
          languageDefault: 'cn',
          salt: '',
          email: '',
          mobile: '',
          roleIdList: [],
          status: 1,
          site: '',
          siteList: [],
          userDisplay: '',
          domainAccount: ''
        }
      }

      // this.factoryList();
      this.getLanguageList();
      this.getSiteOptions(); // 获取工厂选项
      this.$http({
        url: this.$http.adornUrl('/sys/role/select'),
        method: 'get',
        params: this.$http.adornParams()
      }).then(({data}) => {
        this.roleList = data && data.code === 0 ? data.list : []
      }).then(() => {
        this.visible = true
        this.$nextTick(() => {
          this.$refs['dataForm'].resetFields()
        })
      }).then(() => {
        if (this.dataForm.id) {
          // 编辑模式：加载用户数据
          this.$http({
            url: this.$http.adornUrl(`/sys/user/info/${this.dataForm.id}`),
            method: 'get',
            params: this.$http.adornParams()
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.dataForm.userName = data.user.username
              this.dataForm.salt = data.user.salt
              this.dataForm.email = data.user.email
              this.dataForm.mobile = data.user.mobile
              this.dataForm.roleIdList = data.user.roleIdList
              this.dataForm.status = data.user.status
              this.dataForm.languageDefault = data.user.languageDefault
              this.dataForm.site = data.user.site.toString()
              this.dataForm.userDisplay = data.user.userDisplay
              this.dataForm.domainAccount = data.user.domainAccount
              // 获取用户工厂权限
              this.getUserSiteAccess(data.user.username)
            }
          })
        }
      })
    },
    // 表单提交
    dataFormSubmit() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
            // 保存用户信息和工厂授权（在一个事务中）
            this.$http({
              url: this.$http.adornUrl(`/sys/user/${!this.dataForm.id ? 'save' : 'update'}`),
              method: 'post',
              data: this.$http.adornData({
                'userId': this.dataForm.id || undefined,
                'username': this.dataForm.userName,
                'password': this.dataForm.password,
                'salt': this.dataForm.salt,
                'email': this.dataForm.email,
                'mobile': this.dataForm.mobile,
                'status': this.dataForm.status,
                'roleIdList': this.dataForm.roleIdList,
                'languageDefault': this.dataForm.languageDefault,
                'site': this.dataForm.site,
                'userDisplay': this.dataForm.userDisplay,
                'domainAccount': this.dataForm.domainAccount,
                'siteList': this.dataForm.siteList || [] // 添加工厂授权列表
              })
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.$message.success('操作成功')
                this.visible = false
                this.$emit('refreshDataList')
              } else {
                let msg = data.msg.split('<br>')[0]
                this.$message.error( this.$t(`${msg}`))
              }
            })
        }
      })
    },
    // 获取工厂选项列表
    getSiteOptions() {
      // 使用site接口获取工厂列表
      this.$http({
        url: this.$http.adornUrl('/site/list'),
        method: 'post',
        data: this.$http.adornData({
          active: 'Y' // 只获取激活的工厂
        })
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.siteOptions = data.dataList || []
        }
      }).catch(() => {
        this.$message.error('获取工厂列表失败')
      })
    },
    // 获取用户工厂权限
    getUserSiteAccess(username) {
      if (!username) return
      getUserAuthorizedSites({ userName: username }).then(({data}) => {
        if (data && data.code === 0) {
          // 数据结构: [{siteCode: 'F001', siteName: '工厂A'}, ...]
          this.dataForm.siteList = data.data ? data.data.map(item => item.siteCode) : []
        }
      }).catch(() => {
        this.$message.error('获取用户工厂权限失败')
      })
    }
  },
  created() {
    this.getFunctionButtonList()
  }
}
</script>
<style lang="scss" scoped>

</style>