tenant-Platform/src/views/operationManagement/modules/addTeam.vue

<template>
  <div class="addTeam">
    <el-form ref="AddTeamRef" :model="teamForm" :rules="teamRules" label-width="100">
      <el-form-item label="团队名称" prop="name">
        <el-input v-model="teamForm.name" placeholder="请输入团队名称"></el-input>
      </el-form-item>
      <el-form-item label="所属机构" prop="deptId">
        <el-cascader
          clearable
          v-model="teamForm.deptId"
          :options="option"
          :props="cascaderProps"
          style="width: 100%"
          placeholder="选择机构"
          @change="deptIdChange"
        ></el-cascader>
      </el-form-item>
      <el-form-item label="管理人" prop="managerId">
        <el-select v-model="teamForm.managerId" placeholder="选择管理人">
          <el-option v-for="item in userList" :key="item.id" :value="item.id" :label="item.name"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="管理人工号" prop="managerId">
        <el-input disabled v-model="teamForm.managerId"></el-input>
      </el-form-item>
      <el-form-item label="描述" prop="describeInformation">
        <el-input type="textarea" maxlength="500" placeholder="请输入" v-model="teamForm.describeInformation"></el-input>
      </el-form-item>
      <div style="display: flex; justify-content: flex-end">
        <el-button class="border-[#0083FF] color-[#0083FF]" plain @click="onSubmit(AddTeamRef, 0)">取消</el-button>
        <el-button type="primary" @click="onSubmit(AddTeamRef, 1)">确定</el-button>
      </div>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { ref, defineEmits, onMounted, defineProps, defineExpose } from 'vue'
import type { FormRules, FormInstance } from 'element-plus'
import type { AddTeamProps } from '@/api/modules/team.ts'
import { ElMessage } from "element-plus";
import api from "@/api";

interface EditDataProps extends AddTeamProps {
  id: string
}

let emits = defineEmits(['closeDialog'])

// 表单
const AddTeamRef = ref<FormInstance>()
let teamForm = ref<AddTeamProps>({
  name: '',
  deptId: [],
  managerId: '',
  describeInformation: '',
  attribute: 1
})


let teamRules = ref<FormRules>({
  name: [
    { required: true, trigger: "blur", message: "请填写团队名称" }
  ],
  deptId: [
    { required: true, trigger: "change", message: "请选择机构" }
  ],
  managerId: [
    { required: true, trigger: "change", message: "请选择管理人" }
  ]
})

// 编辑初始化数据
let isEdit = ref(false)
const initEdit = (data, bool, type) => {
  isEdit.value = bool
  teamForm.value = data
  teamForm.value.attribute = type
  institutionList()
  getUser(data.deptId)
}

// 机构
let option = ref([])
const cascaderProps = {
  value: 'id',
  label: 'name',
  children: 'children',
  checkStrictly: true,
}
// 获取机构数据
const institutionList = () => {
  api.institutionApi.institutionList({ name: '', system: '' }).then(res => {
    if(res?.code == 200) {
      option.value = res.data
    } else {
      ElMessage({
        message: res.msg,
        type: 'warning'
      })
    }
  })
}
const deptIdChange = (e) => {
  let id = e?e[e.length - 1]: ''
  getUser(id)
}

// 管理人
let userList = ref([])
const getUser = (id) => {
  api.operationApi.getUser({
    id: id,
    typeAttr:2,
  }).then(res => {
    if(res?.code == 200) {
      userList.value = res.data
    } else {
      ElMessage({
        message: res.msg,
        type: 'warning'
      })
    }
  })
}

// 提交/取消
const onSubmit = async (AddTeamRef: FormInstance, type) => {
  if(!AddTeamRef) {
    emits('closeDialog', '取消')
    isEdit.value = false
    AddTeamRef.resetFields()
    return
  }
  if(type) {
    await AddTeamRef.validate((valid) => {
      if(valid) {
        let formData = {...teamForm.value}
        if(typeof teamForm.value.deptId == 'string') {
          teamForm.value.deptId = [teamForm.value.deptId]
        }
        formData.deptId = teamForm.value.deptId[teamForm.value.deptId.length - 1]
        formData.systemCode = localStorage.getItem('login_system')
        if(isEdit.value) {
          api.teamApi.updateTeam(formData).then(res => {
            if(res.code == 200) {
              ElMessage({
                message: res.data.msg,
                type: 'success'
              })
            } else {
              ElMessage({
                message: res.data.msg,
                type: 'warning'
              })
            }
            emits('closeDialog', '确认')
            isEdit.value = false
            AddTeamRef.resetFields()
          })
        } else {
          api.teamApi.addTeam(formData).then(res => {
            if(res.code == 200) {
              ElMessage({
                message: res.msg,
                type: 'success'
              })
            } else {
              ElMessage({
                message: res.msg,
                type: 'warning'
              })
            }
            emits('closeDialog', '确认')
            isEdit.value = false
            AddTeamRef.resetFields()
          })
        }
      } else {
        ElMessage({
          message: '请正确填写相关信息！',
          type: 'warning'
        })
      }
    })
  } else {
    emits('closeDialog', '取消')
    isEdit.value = false
    AddTeamRef.resetFields()
  }
}

onMounted(() => {
  institutionList()
})

defineExpose({
  initEdit,
  teamForm
})

</script>

<style scoped lang="scss">

</style>