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">
            <el-checkbox-group v-model="selectedSiteIds" @change="handleSiteSelectionChange">
              <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-item :label="''" size="mini" prop="siteList" class="site-auth-form-item">
            <div v-if="selectedSiteIds.length > 0" class="site-auth-panel">
              <div v-if="getSubSiteOptions(siteId).length > 0" v-for="siteId in selectedSiteIds" :key="siteId" class="site-auth-group">
                <div class="site-auth-group__header">
                  <span class="site-auth-group__title">{{ getSiteDisplayName(siteId) }}</span>
                </div>
                <el-checkbox-group
                  class="site-auth-subsite-group"
                  v-model="subSiteCheckedMap[siteId]"
                  @change="handleSubSiteSelectionChange(siteId)">
                  <el-checkbox
                    v-for="subSite in getSubSiteOptions(siteId)"
                    :key="siteId + '_' + subSite.subSiteId"
                    :label="subSite.subSiteId"
                    class="site-auth-subsite-item">
                    {{ subSite.subSiteId }}
                  </el-checkbox>
                </el-checkbox-group>
              </div>
            </div>
          </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 { getActiveSubSiteOptions, getUserAuthorizedSiteAccess } from '@/api/factory/accessSite.js'
  import { searchFunctionButtonList, searchSysLanguage } from '@/api/sysLanguage.js'
  export default {
  components: {
    Chooselist
  },
  data() {
    return {
      tagNo:'',
      visible: false,
      roleList: [],
      factorys: [],
      languageList: [],
      siteOptions: [], // 工厂选项列表
      selectedSiteIds: [], // 选中的父site
      subSiteOptionsMap: {}, // 子site选项映射，key=siteId
      subSiteCheckedMap: {}, // 已选子site映射，key=siteId
      dataForm: {
        id: 0,
        userName: '',
        password: '',
        comfirmPassword: '',
        languageDefault: 'cn',
        salt: '',
        email: '',
        mobile: '',
        roleIdList: [],
        status: 1,
        site: '', // 保持兼容性
        siteList: [], // 父site编码列表（兼容旧接口）
        siteAccessList: [], // 工厂+子site授权结构（新接口）
        userDisplay: '',
        domainAccount: ''
      },
        buttons: {
        add: this.$t('sys.common.add'), edit: this.$t('sys.common.edit'), username: this.$t('sys.user.account'), userDisplay: this.$t('sys.user.userName'),
        domainAccount: this.$t('sys.user.domainAccount'), email: this.$t('sys.user.email'), mobile: this.$t('sys.user.mobile'), status: this.$t('sys.user.status'),
        disable: this.$t('sys.user.disabled'), normal: this.$t('sys.user.normal'), password: this.$t('sys.user.password'), comfirmPassword: this.$t('sys.user.confirmPassword'),
        submit: this.$t('sys.common.confirm'), close: this.$t('sys.common.cancel'), site: this.$t('sys.user.factory'), subSite: this.$t('sys.user.subSite'), language: this.$t('sys.user.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: [],
          siteAccessList: [],
          userDisplay: '',
          domainAccount: ''
        }
      }
      this.selectedSiteIds = []
      this.subSiteOptionsMap = {}
      this.subSiteCheckedMap = {}

      // 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() {
      const needSubSiteSelect = this.selectedSiteIds.find(siteId => {
        return this.getSubSiteOptions(siteId).length > 0 && (!this.subSiteCheckedMap[siteId] || this.subSiteCheckedMap[siteId].length === 0)
      })
      if (needSubSiteSelect) {
        this.$message.warning(this.$t('sys.user.selectSubSiteFirst') || '请选择子site')
        return
      }
      this.buildSiteAccessData()
      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 || [], // 兼容旧接口
                'siteAccessList': this.dataForm.siteAccessList || [] // 工厂+子site授权结构
              })
            }).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() {
      getActiveSubSiteOptions({}).then(({data}) => {
        if (data && data.code === 0) {
          const rows = data.data || []
          const siteOptionMap = {}
          const subSiteOptionMap = {}

          rows.forEach(item => {
            const siteId = item.siteId
            if (!siteId) {
              return
            }

            if (!siteOptionMap[siteId]) {
              siteOptionMap[siteId] = {
                key: siteId,
                label: item.siteName || siteId
              }
            }

            if (item.subSiteId) {
              if (!subSiteOptionMap[siteId]) {
                subSiteOptionMap[siteId] = []
              }
              if (!subSiteOptionMap[siteId].some(subSite => subSite.subSiteId === item.subSiteId)) {
                subSiteOptionMap[siteId].push({
                  subSiteId: item.subSiteId
                })
              }
            }
          })

          this.siteOptions = Object.values(siteOptionMap)
          this.subSiteOptionsMap = subSiteOptionMap
        }
      }).catch(() => {
        this.$message.error('获取工厂子site列表失败')
      })
    },
    // 获取工厂显示名称
    getSiteDisplayName(siteId) {
      const site = this.siteOptions.find(item => item.key === siteId)
      return site ? `${site.label}` : siteId
    },
    // 获取指定工厂的子site列表
    getSubSiteOptions(siteId) {
      return this.subSiteOptionsMap[siteId] || []
    },
    // 选择父site后联动子site
    handleSiteSelectionChange() {
      const selectedSet = new Set(this.selectedSiteIds)
      Object.keys(this.subSiteCheckedMap).forEach(siteId => {
        if (!selectedSet.has(siteId)) {
          this.$delete(this.subSiteCheckedMap, siteId)
        }
      })
      this.selectedSiteIds.forEach(siteId => {
        if (!this.subSiteCheckedMap[siteId]) {
          // 新勾选父site时，默认勾选该site下全部子site
          const defaultCheckedSubSites = this.getSubSiteOptions(siteId)
            .map(subSite => subSite.subSiteId)
            .filter(Boolean)
          this.$set(this.subSiteCheckedMap, siteId, defaultCheckedSubSites)
        }
      })
      this.buildSiteAccessData()
    },
    // 选择子site后同步授权结构
    handleSubSiteSelectionChange(siteId) {
      const checkedList = this.subSiteCheckedMap[siteId] || []
      this.$set(this.subSiteCheckedMap, siteId, Array.from(new Set(checkedList)))
      this.buildSiteAccessData()
    },
    // 组装提交给后端的授权结构
    buildSiteAccessData() {
      const siteAccessList = []
      const siteList = []
      this.selectedSiteIds.forEach(siteId => {
        const subSiteOptions = this.getSubSiteOptions(siteId)
        const checkedList = this.subSiteCheckedMap[siteId] || []
        if (subSiteOptions.length === 0) {
          siteAccessList.push({
            userId: this.dataForm.userName,
            site: siteId,
            subSiteId: ''
          })
          siteList.push(siteId)
          return
        }
        checkedList.forEach(subSiteId => {
          if (!subSiteId) {
            return
          }
          siteAccessList.push({
            userId: this.dataForm.userName,
            site: siteId,
            subSiteId: subSiteId
          })
          siteList.push(siteId)
        })
      })
      this.dataForm.siteAccessList = siteAccessList
      this.dataForm.siteList = Array.from(new Set(siteList))
      // 用户主站点仍保持兼容：默认取第一个父site
      if (!this.dataForm.site && this.dataForm.siteList.length > 0) {
        this.dataForm.site = this.dataForm.siteList[0]
      }
    },
    // 获取用户工厂权限
    getUserSiteAccess(username) {
      if (!username) return
      getUserAuthorizedSiteAccess({ userName: username }).then(({data}) => {
        if (data && data.code === 0) {
          const accessRows = data.data || []
          const selectedSiteIds = []
          const checkedMap = {}

          accessRows.forEach(item => {
            let siteId = item.siteId || item.siteCode || ''
            if (!siteId) {
              return
            }
            const subSiteId = item.subSiteId || ''

            if (!checkedMap[siteId]) {
              checkedMap[siteId] = []
              selectedSiteIds.push(siteId)
            }
            if (subSiteId && checkedMap[siteId].indexOf(subSiteId) === -1) {
              checkedMap[siteId].push(subSiteId)
            }
          })

          this.selectedSiteIds = selectedSiteIds
          this.subSiteCheckedMap = {}
          selectedSiteIds.forEach(siteId => {
            this.$set(this.subSiteCheckedMap, siteId, checkedMap[siteId] || [])
          })
          this.buildSiteAccessData()
        }
      }).catch(() => {
        this.$message.error('获取用户工厂权限失败')
      })
    }
  },
  created() {
    //this.getFunctionButtonList()
  }
}
</script>
<style lang="scss" scoped>
.site-auth-form-item {
  width: 100%;
}

.site-auth-panel {
  max-height: 200px;
  overflow-y: auto;
  padding-right: 4px;
}

.site-auth-placeholder {
  color: #909399;
  line-height: 20px;
  padding: 8px 10px;
  border: 1px dashed #dcdfe6;
  border-radius: 4px;
  background: #fafafa;
}

.site-auth-group {
  margin-bottom: 10px;
  padding: 8px 10px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  background: #fff;
}

.site-auth-group:last-child {
  margin-bottom: 0;
}

.site-auth-group__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.site-auth-group__title {
  color: #303133;
  font-weight: 500;
  line-height: 20px;
}

.site-auth-group__meta {
  color: #909399;
  font-size: 12px;
  line-height: 20px;
}

.site-auth-empty-subsite {
  display: flex;
  align-items: center;
  color: #e6a23c;
  line-height: 20px;
  padding: 6px 8px;
  border: 1px solid #faecd8;
  border-radius: 4px;
  background: #fdf6ec;
}

.site-auth-empty-subsite .el-icon-info {
  margin-right: 6px;
  font-size: 14px;
}

.site-auth-subsite-group {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: -6px;
}

.site-auth-subsite-item {
  margin-right: 16px;
  margin-bottom: 6px;
}
</style>