erqi-web/src/views/system/dept/detail.vue

<template>
  <el-form class="detail-form" ref="form" :model="model" label-width="auto" :rules="rules" label-suffix="：">
    <template v-for="(item, index) in items">
      <el-form-item v-if="!item.show || (item.show && item.show())" :key="index" :label="item.label" :prop="item.prop"
        :style="`grid-column-start: span ${item.width || '1'};`">
        <el-input v-if="item.type === 'input'" v-model="model[item.prop]" />
        <el-input v-if="item.type === 'password'" type="password" v-model="model[item.prop]" show-password />
        <el-input v-if="item.type === 'textarea'" autosize v-model="model[item.prop]" :rows="item.rows || 2" type="textarea" />
        <el-input-number v-if="item.type === 'number'" v-model="model[item.prop]" controls-position="right" :min="0"
          style="width: 100%;" />

        <el-select v-if="item.type === 'select'" v-model="model[item.prop]" :clearable="item.clearable">
          <el-option v-for="(opt, index) in item.options" :key="index" :label="opt.label" :value="opt.value">
          </el-option>
        </el-select>

        <el-tree-select v-if="item.type === 'treeselect'" v-model="model[item.prop]" :data="tree"
          :props="{ value: 'deptId', label: 'deptName', children: 'children' }" value-key="deptId" placeholder="选择上级部门"
          check-strictly :render-after-expand="false" />

        <el-radio-group v-if="item.type === 'radiobutton'" v-model="model[item.prop]">
          <el-radio-button v-for="(opt, index) in item.options" :key="index" :label="opt.label" :value="opt.value" />
        </el-radio-group>

        <el-radio-group v-if="item.type === 'radio'" v-model="model[item.prop]">
          <el-radio v-for="(opt, index) in item.options" :key="index" :label="opt.label" :value="opt.value" />
        </el-radio-group>

        <el-tree v-if="item.type === 'tree'" class="tree-border" :data="areaOptions" show-checkbox ref="areaRef"
          node-key="areaCode" accordion empty-text="加载中，请稍候"
          :props="{ label: 'areaName', children: 'childArea' }"></el-tree>

      </el-form-item>
    </template>
  </el-form>
  <div class="button-wrapper">
    <el-button type="primary" @click="validate">提交</el-button>
    <el-button @click="$emit('close')">取消</el-button>
  </div>
</template>
<script setup>
import { ref, reactive, nextTick } from 'vue'
import { ElMessage } from 'element-plus'
import { addDept, updateDept, getAreaTree } from '@/api/system'

const emit = defineEmits([ 'close' ])
const props = defineProps({
  data: {
    default() {
      return {}
    },
    required: false,
    type: Object
  },
  type: {
    default: '',
    required: false,
    type: String
  },
  tree: {
    default: () => [],
    required: false,
    type: Array
  }
})

const form = ref(null)
const areaRef = ref(null)
const areaOptions = ref([])

const model = reactive({
  deptName: '',
  parentId: undefined,
  leader: '',
  phone: '',
  email: '',
  areaCodes: '',
  orderNum: ''
})

const items = [
  {
    label: '部门名称',
    prop: 'deptName',
    type: 'input'
  },
  {
    label: '上级部门',
    prop: 'parentId',
    type: 'treeselect',
    show: () => {
      return model.parentId !== 0
    }
  },
  {
    label: '数据来源',
    prop: 'areaCodes',
    type: 'tree'
  },
  {
    label: '负责人',
    prop: 'leader',
    type: 'input'
  },
  {
    label: '联系电话',
    prop: 'phone',
    type: 'input'
  },
  {
    label: '邮箱',
    prop: 'email',
    type: 'input'
  },
  {
    label: '排序',
    prop: 'orderNum',
    type: 'number'
  }
]

const rules = {
  deptName: [ { required: true, message: '部门名称 未填写', trigger: 'blur' } ],
  parentId: [ { required: true, message: '上级部门 未选择', trigger: 'change' } ]
}

/**
 * 获取所有选中节点数据
 * */
const getAllCheckedKeys = () => {
  // 目前被选中的节点
  let checkedKeys = areaRef.value[0].getCheckedKeys()
  // 半选中的节点
  let halfCheckedKeys = areaRef.value[0].getHalfCheckedKeys()
  checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys)
  return checkedKeys.join(',')
}

/**
 * 初始化赋值
 */
const initData = () => {
  getAreaTree({ id: 331000 }).then(res => {
    areaOptions.value = res.data
    if (props.data.areaCodes && props.type !== 'add') {
      props.data.areaCodes.split(',').forEach(item => {
        nextTick(() => {
          areaRef.value[0].setChecked(item, true, false)
        })
      })
    }
  })
  if (props.type !== 'add') {
    Object.keys(model).forEach((key) => {
      model[key] = props.data[key]
    })
  }
}

/**
 * 表单校验
 */
const validate = () => {
  model.areaCodes = getAllCheckedKeys()
  form.value.validate().then((valid) => {
    if (valid) {
      submit()
    }
  })
}

/**
 * 表单校验
 */
const submit = () => {
  if (props.type === 'add') {
    addDept(model).then(() => {
      ElMessage.success('提交成功！')
      emit('close', true)
    })
  } else {
    updateDept({ ...model, deptId: props.data.deptId }).then(() => {
      ElMessage.success('提交成功！')
      emit('close', true)
    })
  }
}

initData()

</script>

<style lang="scss" scoped>
.detail-form {
  max-height: 500px;
  overflow: auto;

  .tree-border {
    width: 100%;
    border: 1px solid #e5e6e7;
    border-radius: 4px;
  }
}

.button-wrapper {
  width: 100%;
  margin-top: 20px;
  display: flex;
  justify-content: center;
  gap: 20px;
}
</style>