sgxt_web/src/components/inputCom/inputUser.vue

<template>
  <el-input :style="{ width: inputWidth }" class="mosty-select" readonly v-model="inputName" :disabled="props.disabled" clearable
    @click="xgfClick" @clear="clear">
    <!-- <template #append>
      <el-button title="" class='cursor' :disabled="props.disabled" @click="xgfClick">选择</el-button>
    </template> -->
  </el-input>
  <!-- 相关方 -->
  <ChooseUser id="most-user" v-model="isShowDialog" :Single="props.Single" :deptId="props.deptId" :data="userData"
    @choosedUsers="userChange"></ChooseUser>
</template>

<script setup>

import ChooseUser from "@/components/ChooseList/ChooseUser/index.vue";
import { ref, defineProps, defineEmits, onMounted, watch, defineExpose, computed } from 'vue'
const props = defineProps({
  dataList: {
    type: Array,
    default: () => ([])
  },
  disabled: {
    type: Boolean,
    default: false
  },
  // relatedid: {
  //     type: String,
  //     default: ''
  // },
  /** 是否单选 默认多选 */
  Single: {
    type: Boolean,
    default: true
  },
  ids: {
    type: String,
    default: ''
  },
  cName: {
    type: String,
    default: ''
  },
  stlyrylx: {
    type: String,
    default: '01'
  },
  /** 父级部门 (即只选该部门下的单位),
   * 如果没有"deptId"会只能选当前登录人的部门，（但是：登录人是安全科可以选所有部门） */
  deptId: {
    type: String,
  },
  // xgflx: {
  // 	type: String,
  // 	default: '09,10,15'
  // },
  /** 输入框宽度 */
  width: [String, Number]
})
const emit = defineEmits(['change', 'update:ids', 'update:cName', 'clear'])

const isShowDialog = ref(false)
const xgfMan = ref('')
const xgfRyId = ref('')
const inputName = ref('')
const inputWidth = computed(() => {
  if (props.width) {
    if (typeof props.width === 'string') {
      if (props.width.includes('px')) return props.width
      if (!isNaN(Number(props.width))) return props.width + 'px'
      return props.width
    } else if (typeof props.width === 'number') {
      return `${props.width}px`
    }
  }
})
const userChange = (val) => {
  val = Array.isArray(val) ? val : []
  val = val.filter(item => {
    return !!item
  })
  const cName = val.map(item => {
    // if (item.mobile) {
    //   return item.userName + '（' + item.mobile + '）'
    // } else {
    // }
    return item.userName
  }).toString();
  const ids = val.map(item => {
    return item.id
  }).toString();
  emit('update:ids', ids || '')
  emit('update:cName', cName || '')
  emit('change', val || {})
}

const xgfClick = () => {
  if (props.disabled) return
  isShowDialog.value = true
}
const clear = () => {
  // xgfMan.value = ''
  // xgfRyId.value = ''
  emit('update:ids', '')
  emit('update:cName', '')
  emit('change', {})
}
const closeDialog = (val) => {
  isShowDialog.value = val
}
// 数组回显
const userData = computed(() => {
  if (!props.ids || !props.ids.length) return []
  if (props.Single) return props.ids
  if (typeof props.ids === 'string') return props.ids.split(',')
  return []
})
// input回显
watch(() => props.cName, (val) => {

  inputName.value = val
}, { immediate: true })
onMounted(() => {
  // console.log('2332===', props.xgflx);
});
defineExpose({
  clear
});
</script>

<style scoped lang="scss">
.mosty-select {
  width: 374px;
}

::v-deep .el-form {
  margin-top: 0;
  margin-bottom: 10px;
}

// ::v-deep #xgfandzzjgry .el-button + .el-button{
// 	margin-left: 10px;
// }</style>
::v-depp .treeBox {
margin-top: 10px;
}

<style></style>