front / ningxia-credit-web · Files

<template>
  <div>
    <el-dialog :title="props.title" v-model="state.openDialog" width="1000px" append-to-body destroy-on-close @close="handleClose(false)">
      <el-form ref="queryForm" :model="state.queryParams" :rules="queryRules" label-position="right" label-width="80px">
        <template v-if="props.entryType !== 3">
          <el-row :gutter="10">
            <el-col :span="12">
              <el-form-item label="姓名" prop="userName">
                <el-input v-model.trim="state.queryParams.userName" placeholder="请输入姓名" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="手机号码" prop="phone">
                <el-input v-model.trim="state.queryParams.phone" placeholder="请输入手机号码" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="公司" prop="orgId">
                <el-select v-model="state.queryParams.orgId">
                  <el-option v-if="state.deptList.length > 0" v-for="item in state.deptList" :label="item.name" :value="item.id"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="邮箱" prop="mail">
                <el-input v-model.trim="state.queryParams.mail" placeholder="请输入邮箱" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="账号信息" prop="loginName">
                <template v-if="props.entryType === 1">
                  <el-input v-model.trim="state.queryParams.loginName" placeholder="请输入账号信息" clearable></el-input>
                </template>
                <template v-else>
                  {{state.queryParams.loginName}}
                </template>
              </el-form-item>
            </el-col>
            <el-col :span="12" v-if="props.entryType === 1">
              <el-form-item label="密码" prop="password">
                <el-input v-model.trim="state.queryParams.password" placeholder="请输入密码" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="状态" prop="dataStatus">
                <el-radio-group v-model="state.queryParams.dataStatus">
                  <el-radio v-for="dict in dict.entrustTypeList" :label="dict.dictLabel" :value="dict.dictValue"></el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="下单审核" prop="dataStatus">
                <el-radio-group v-model="state.queryParams.needaudit">
                  <el-radio v-for="dict in dict.needauditList" :label="dict.dictLabel" :value="dict.dictValue"></el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-col :span="24">
          <el-form-item label="角色" prop="roles">
            <el-table :data="state.tableList" style="width: 100%" @selection-change="handleSelectionChange" border class="own_table" max-height="400px" ref="tableListRef">
              <el-table-column type="selection" width="55" align="center" />
              <el-table-column v-for="(table, index) in state.tableColumns" :key="'table'+index" :label="table.label" :prop="table.prop" :min-width="table.width">
                <template #default="scope">
                  <template v-if="table.limitLength">
                    {{scope.row[table.prop].substring(0, table.limitLength)}}
                  </template>
                </template>
              </el-table-column>
            </el-table>
          </el-form-item>
        </el-col>
        </template>
        <template v-else>
          <el-row>
            <el-col :span="12">
              <el-form-item label="密码" prop="password">
                <el-input v-model.trim="state.queryParams.password" placeholder="请输入密码" clearable></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </template>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleClose(false)">取消</el-button>
          <el-button type="primary" @click="handleSubmit('isSubmit')" :loading="state['isSubmit']">确定</el-button>
        </span>
      </template>

    </el-dialog>
  </div>
</template>

<script setup lang="ts">
  import * as api from '../../interface/api.ts'
  import { loginMain } from '../../store'
  import { storeToRefs } from 'pinia';
  let loginAct = loginMain()
  let { getStoreToken, getUserInfo } = storeToRefs(loginAct)

  let queryForm = ref<FormInstance>()
  const emit = defineEmits(["handleClose"]);

  let props = defineProps({
    title: {
      default: "",
      type: String
    },
    open: {
      default: false,
      type: Boolean
    },
    openName: {
      type: String,
      required: true,
      default: ""
    },
    entryType: {
      type: Number,
      default: 1,
    },
    userInfo: {
      type: Object
    }
  })

  let state = reactive( {
    openDialog: false,
    // 选中数组
    ids: [],
    // 非单个禁用
    single: true,
    // 非多个禁用
    multiple: true,
    tableList: [],
    // { "regStatus": "存续", "estiblishTime": "1995-12-25 00:00:00.0", "regCapital": "120000万人民币", "companyType": 1, "matchType": "公司名称匹配", "type": 1, "legalPersonName": "王晓秋", "regNumber": "310115400033897", "creditCode": "913101156073392545", "name": "联合汽车电子有限公司", "id": 466517252, "orgNumber": "60733925-4", "base": "上海" }
    total: 0,
    queryParams: {
      id: "",
      userName: "",
      phone: "",
      orgId: "",
      mail: "",
      loginName: "",
      password: "",
      dataStatus: "0",
      roles: [],
      needaudit: "Y"
    },
    tableColumns: [
      {
        label: "功能模块",
        prop: "roleName"
      },{
        label: "功能描述",
        prop: "remark",
      }
    ],
    deptList: [],
  })

  let dict = reactive({
    entrustTypeList: [{dictLabel: '有效', dictValue: "0"}, {dictLabel: '无效', dictValue: "1"}],
    needauditList: [{dictLabel: '是', dictValue: "Y"}, {dictLabel: '否', dictValue: "N"}],
  })

  let queryRules = reactive<FormRules>({
    userName: [
      { required: true, message: "姓名不能为空", trigger: ["blur","change"] }
    ],
    password: [
      { required: true, message: "密码不能为空", trigger: ["blur","change"] }
    ],
    roles: [
      { required: true, type:'array', message: "角色不能为空", trigger: ["blur","change"] }
    ]
  })

  let handleClose = (isRefresh: boolean) => {
    emit('handleClose', props.openName, false, isRefresh)
  }

  let handleSelectionChange = (selection: Array<any>) => {
    state.queryParams.roles = selection.map((item: Object) => item.roleId)
    // state.single = selection.length !== 1
    // state.multiple = !selection.length
  }

  const tableListRef = ref(null)

  let getList = () => {
    let url = props.entryType === 1 ? '/web/frontRole/list' : '/web/frontUser/queryUser'
    let params = props.entryType === 1 ? {} : {id: props.userInfo.id}
    api.getData(params, url).then((res: Object)=> {
      if (props.entryType === 1) {
        state.tableList = res.data.rows
      }
      if (props.entryType === 2) {
        state.tableList = res.data.roles
        // state.deptList = []
        nextTick(()=> {
          state.tableList.forEach(item=> {
            if (item.flag) {
              if (tableListRef.value) {
                state.queryParams.roles = item.id
                tableListRef.value.toggleRowSelection(item, true)
              }
            }
          })
          // state.deptList.push(res.data.frontUser.dept)
          state.queryParams.loginName = res.data.frontUser.loginName
          state.queryParams.phone = res.data.frontUser.phone
          state.queryParams.orgId = parseInt(res.data.frontUser.orgId)
          state.queryParams.mail = res.data.frontUser.mail
          state.queryParams.userName = res.data.frontUser.userName
          state.queryParams.dataStatus = res.data.frontUser.dataStatus
          state.queryParams.id = res.data.frontUser.id
        })
      }
      if (props.entryType === 3) {
        state.queryParams.id = res.data.frontUser.id
        state.queryParams.loginName = res.data.frontUser.loginName
      }
    }).finally(()=> {
    })
  }

  let getTreeDept = () => {
    api.getInfoList({}, '/web/frontDept/treeData').then((res: any)=> {
      state.deptList = res.data.rows
    })
  }

  let handleSubmit = (isSubmit: boolean) => {
    queryForm.value.validate((valid: boolean, fields: Object)=> {
      if (valid) {
        state[isSubmit] = true
        if (props.entryType == 2) {
          delete state.queryParams.password
        }
        state.queryParams.webRoles = state.queryParams.roles.join(",")
        delete state.queryParams.roles
        let url = ""
        if (props.entryType === 1) {
          url = '/web/frontUser/addUser'
        } else if (props.entryType === 2) {
          url = '/web/frontUser/updateUser'
        } else {
          url = '/web/frontUser/resetPwd'
        }
        api.submitData(state.queryParams, url).then((res: any)=> {
          let msg = ""
          if (props.entryType === 1) {
            msg = "新增成功"
          } else if (props.entryType === 2) {
            msg = "修改成功"
          } else {
            msg = "重置密码成功"
          }
          ElMessage.success(msg)
          handleClose(true)
        }).finally(()=> {
          state[isSubmit] = false
        })
      }
    })
  }

  let reset = () => {
    state.queryParams.userName = ""
    state.queryParams.phone = ""
    state.queryParams.orgId = ""
    state.queryParams.mail = ""
    state.queryParams.loginName = ""
    state.queryParams.password = ""
    state.queryParams.dataStatus = "0"
    state.queryParams.roles = []
    state.queryParams.needaudit = "Y"
  }

  watchEffect(()=> {
    state.openDialog = props.open
    if (props.open) {
      reset()
      getList()
      getTreeDept()
    }
  })
</script>

<style scoped>

</style>