feat: 增加转会商续报功能

src/components/inputCom/inputUser.vue

@@ -0,0 +1,147 @@
+<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>