From 2c7524df9cfb35e1f402ad9281650d35e481836a Mon Sep 17 00:00:00 2001
From: lideqin <694785430@qq.com>
Date: Fri, 16 Aug 2024 09:11:24 +0800
Subject: [PATCH] =?UTF-8?q?[update]=20=E6=A0=91=E5=BD=A2=E5=BC=B9=E6=A1=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/customField/AddForm.vue        |  41 +-
 .../selection/TreeDataSelectModal.vue         | 531 ++++++++++++++++++
 .../selection/TreeDataSelection.vue           | 145 +++++
 3 files changed, 703 insertions(+), 14 deletions(-)
 create mode 100644 src/components/selection/TreeDataSelectModal.vue
 create mode 100644 src/components/selection/TreeDataSelection.vue

diff --git a/src/components/customField/AddForm.vue b/src/components/customField/AddForm.vue
index 20657bc4..6a4cd736 100644
--- a/src/components/customField/AddForm.vue
+++ b/src/components/customField/AddForm.vue
@@ -134,16 +134,24 @@
                                :label-in-value="false"
                                :placeholder="$t('pleaseSelect')+item.dbFieldTxt" />
                 <!--16、树形弹框选择-->
-                <tree-selection v-else-if="item.fieldShowType === FieldType.TREE_MODAL_SELECT.value"
-                                :placeholder="$t('pleaseSelect')+item.dbFieldTxt"
-                                v-model="formInline[item.dbFieldName]"
-                                @nameChange="treeSelectNameChange"
-                                :filedName="item.dbFieldName"
-                                type="checkbox"
-                                :options-href="item.fieldHref"
-                                :nameStr="formInline[item.dbFieldName + '_dictText']"
-                                :dict-id="item.dictId"
-                                :disabled="disabled || disabledFieldList.includes(item.dbFieldName)" />
+<!--                <tree-selection v-else-if="item.fieldShowType === FieldType.TREE_MODAL_SELECT.value"-->
+<!--                                :placeholder="$t('pleaseSelect')+item.dbFieldTxt"-->
+<!--                                v-model="formInline[item.dbFieldName]"-->
+<!--                                @nameChange="treeSelectNameChange"-->
+<!--                                :filedName="item.dbFieldName"-->
+<!--                                type="checkbox"-->
+<!--                                :options-href="item.fieldHref"-->
+<!--                                :nameStr="formInline[item.dbFieldName + '_dictText']"-->
+<!--                                :dict-id="item.dictId"-->
+<!--                                :disabled="disabled || disabledFieldList.includes(item.dbFieldName)" />-->
+                <tree-data-selection v-else-if="item.fieldShowType === FieldType.TREE_MODAL_SELECT.value"
+                                     :placeholder="$t('pleaseSelect')+item.dbFieldTxt"
+                                     v-model="formInline[item.dbFieldName]"
+                                     :fieldName="item.dbFieldName"
+                                     :nameStr="formInline[item.dbFieldName + '_dictText']"
+                                     @nameChange="treeDataSelectNameChange"
+                                     :optionsHref="item.treeFirstHref"
+                                     :dict-id="item.dictId"/>
               </a-form-model-item>
             </div>
           </template>
@@ -174,10 +182,11 @@ import JMultipleDatePicker from '../JMultipleDatePicker'
 import UserSelection from '../selection/UserSelection'
 import { getAction } from '../../api/manage.js'
 import { ajaxGetDictItems, getDictByCode, getFormDictTreeList } from '../../api/api.js'
-import TreeSelection from '../selection/TreeSelection'
+// import TreeSelection from '../selection/TreeSelection'
 import { getStandardGradeClassification } from '../../api/enterpriseStandardLibraryApi'
 import STreeSelect from '../STreeSelect'
-import { getDomesticStandardDetail } from '../../api/standardRegulationLibraryApi';
+import { getDomesticStandardDetail } from '../../api/standardRegulationLibraryApi'
+import TreeDataSelection from '../selection/TreeDataSelection'
 
 // 本系统限制可以上传的文件格式
 const CAN_UPLOAD_FILE_TYPE = 'pdf,docx,doc,xlsx,xls,ppt,pptx,rar,zip,jpg,jpeg,png,avi,wmv,mov,rm,mp4,cad'
@@ -193,8 +202,9 @@ export default {
     JDictSelectTag,
     JMultiSelectTag,
     UploadFile,
-    TreeSelection,
-    STreeSelect
+    // TreeSelection,
+    STreeSelect,
+    TreeDataSelection
   },
   props: {
     url: {
@@ -859,6 +869,9 @@ export default {
     treeSelectNameChange (value, fieldName) {
       this.formInline[fieldName + '_dictText'] = value
     },
+    treeDataSelectNameChange (value, fieldName) {
+      this.formInline[fieldName + '_dictText'] = value
+    },
     submit () {
       this.$refs.ruleForm.validate(valid => {
         if (valid) {
diff --git a/src/components/selection/TreeDataSelectModal.vue b/src/components/selection/TreeDataSelectModal.vue
new file mode 100644
index 00000000..1b81f658
--- /dev/null
+++ b/src/components/selection/TreeDataSelectModal.vue
@@ -0,0 +1,531 @@
+<template>
+  <j-modal
+    :title="$t('userSelect.select')"
+    :width="width"
+    :visible="visible"
+    switchFullscreen
+    :maskClosable="false"
+    :confirmLoading="confirmLoading"
+    @ok="handleOk"
+    @cancel="handleCancel">
+
+    <div class="modal-content">
+      <a-spin :spinning="topLoading">
+        <a-input-search style="margin-bottom: 1px" :placeholder="$t('pleaseEnter') + $t('treeSelection.primaryNodeName')" @search="onSearch" />
+        <a-tree
+          ref="tree"
+          :checkable="checkable"
+          :checkStrictly="true"
+          :replaceFields="replaceFields"
+          :class="treeScreenClass"
+          :treeData="treeData"
+          :autoExpandParent="autoExpandParent"
+          @check="onCheck"
+          @select="onSelect"
+          @expand="onExpand"
+          @load="onLoad"
+          :loadData="loadData"
+          :expandedKeys="expandedKeys"
+          :checkedKeys="checkedKeys"
+          :loadedKeys="loadedKeys"
+          :selectedKeys.sync="selectedKeys">
+
+          <template slot="title" slot-scope="{dataRef}">
+          <span v-if="searchValue && dataRef[replaceFields.title].indexOf(searchValue) > -1">
+            <span style="color: #f50">{{ dataRef[replaceFields.title] }}</span>
+          </span>
+            <span v-else>{{ dataRef[replaceFields.title] }}</span>
+          </template>
+        </a-tree>
+      </a-spin>
+    </div>
+
+    <p class="modal-content-title">{{ $t('treeSelection.selectedData') }}</p>
+    <a-spin :spinning="bottomLoading">
+      <div v-if="dataSourceRight && dataSourceRight.length > 0" class="name-content">
+        <div v-for="(item, index) in dataSourceRight" :key="item[replaceFields.key]" class="name-div">
+          {{ item[replaceFields.title] }}
+          <a-icon type="close" @click="handleDelete(item, index)" />
+        </div>
+      </div>
+      <a-empty v-else />
+    </a-spin>
+
+    <!--底部父子关联操作和确认取消按钮-->
+    <template slot="footer" v-if="treeOpera && checkable">
+      <div class="drawer-bootom-button">
+        <a-dropdown style="float: left" :trigger="['click']" placement="topCenter">
+          <a-menu slot="overlay">
+            <a-menu-item key="1" @click="switchCheckStrictly(2)">{{ $t('parentChildConnection') }}</a-menu-item>
+            <a-menu-item key="2" @click="switchCheckStrictly(1)">{{ $t('cancelConnection') }}</a-menu-item>
+          </a-menu>
+          <a-button>
+            {{ treeOperationText }} <a-icon type="up" />
+          </a-button>
+        </a-dropdown>
+<!--        <a-button style="float: left" @click="switchCheckStrictly(parentChildRelate ? 1 : 2)">{{ treeOperationText }}</a-button>-->
+        <a-button @click="handleCancel" type="primary" style="margin-right: 0.8rem">{{ $t('close') }}</a-button>
+        <a-button @click="handleOk" type="primary" >{{ $t('confirm') }}</a-button>
+      </div>
+    </template>
+  </j-modal>
+</template>
+
+<script>
+import { getAction, postAction } from '../../api/manage'
+
+export default {
+  name: 'TreeDataSelectModal',
+  props: {
+    value: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    checkable: { // 是否多选
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    // 是否校验必选
+    checkRequired: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    // 获取数据的接口
+    optionsHref: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    // 标签库的限制，只能选第三级
+    isTagLibraryRestriction: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    dictId: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    treeOpera: { // 是否可以切换父子关联
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  },
+  computed: {
+    treeScreenClass () {
+      return {
+        'my-dept-select-tree': true,
+        fullscreen: this.fullscreen
+      }
+    },
+    treeOperationText () {
+      return this.parentChildRelate ? this.$t('parentChildConnection') : this.$t('cancelConnection')
+    }
+  },
+  watch: {
+    // 是否只能选第三级
+    isTagLibraryRestriction (val) {
+      if (val) {
+        this.setOnlySelectThreeLevel(this.treeData)
+      }
+    },
+    value (val) {
+      if (val) {
+        this.checkedKeys = val.split(',')
+      }
+    },
+    optionsHref: {
+      immediate: true,
+      handler (val) {
+        console.log('-------------optionsHref', val)
+        if (val === '/laws/standard/partName/queryFirstList') {
+          // 是涉及系统/部件
+          this.replaceFields = { children: 'childPartNameList', title: 'name', key: 'code' }
+          this.lazyLoadHref = '/laws/standard/partName/getChild'
+          this.searchFieldName = 'nodeName'
+          this.lazyLoadPidFieldName = 'parentCode'
+        } else { // 标签库
+          this.replaceFields = { children: 'childrenList', title: 'itemText', key: 'itemValue' }
+          this.lazyLoadHref = '/laws/dictTree/getChild'
+          this.searchFieldName = 'nodeName'
+          this.lazyLoadPidFieldName = 'dictItemId'
+        }
+      }
+    }
+  },
+  created () {
+    // if (this.treeOpera) {
+    //   this.switchCheckStrictly(1)
+    // }
+  },
+  data () {
+    return {
+      width: 800,
+      visible: false,
+      confirmLoading: false,
+      topLoading: false,
+      bottomLoading: false,
+      parentChildRelate: true, // 父子节点是否关联
+      autoExpandParent: false, // 是否自动展开父节点
+      treeData: [],
+      expandedKeys: [],
+      checkedKeys: [],
+      checkedRows: [],
+      selectedKeys: [],
+      loadedKeys: [],
+      searchValue: '', // 查询框内容
+      replaceFields: {},
+      dataSourceRight: [],
+      lazyLoadHref: '', // 懒加载接口
+      searchFieldName: '', // 查询传的字段名
+      lazyLoadPidFieldName: '' // 懒加载传父级的字段名
+    }
+  },
+  methods: {
+    show () {
+      this.visible = true
+      this.treeData = []
+      this.checkedRows = []
+      this.checkedKeys = []
+      this.loadedKeys = []
+      this.selectedKeys = []
+      this.dataSourceRight = []
+      this.searchValue = ''
+      this.getTreeData()
+      if (this.value) {
+        if (this.checkable) {
+          this.checkedKeys = this.value.split(',')
+        } else {
+          this.selectedKeys = this.value.split(',')
+        }
+        // 初始化选中数据列表
+        this.getSelectedList(this.value)
+      }
+      this.$forceUpdate()
+    },
+    onCheck (checkedKeys, info) {
+      console.log('----------onCheck', checkedKeys)
+      console.log('----------info.checked', info.checked)
+      console.log('----------info.node', info.node.dataRef)
+      if (this.checkable) {
+        // 是多选
+        if (this.parentChildRelate) {
+          // 是父子关联
+          if (info.checked) {
+            // 是选中数据了
+            let childrenList = []
+            if (info.node.dataRef[this.replaceFields.children]) {
+              // 有子节点获取子节点数据
+              childrenList = info.node.dataRef[this.replaceFields.children].map(item => item[this.replaceFields.key])
+            }
+            this.checkedKeys = [...this.checkedKeys, ...checkedKeys.checked, ...childrenList]
+          } else {
+            // 是取消选中了，把当前和子节点都取消选中
+            let currAndChildNode = []
+            if (info.node.dataRef[this.replaceFields.children]) {
+              // 有子节点获取子节点数据
+              const childrenNode = info.node.dataRef[this.replaceFields.children].map(item => item[this.replaceFields.key])
+              currAndChildNode = [...childrenNode, info.node.dataRef[this.replaceFields.key]]
+            } else {
+              currAndChildNode = [info.node.dataRef[this.replaceFields.key]]
+            }
+            this.checkedKeys = this.checkedKeys.filter(item => !currAndChildNode.includes(item))
+          }
+          // 处理下方显示已选数据
+          if (info.checked) {
+            console.log('------------增加了数据')
+            // 说明是增加了数据,把点击的数据和子数据追加进去
+            for (const key of checkedKeys.checked) {
+              // 当前选中没在选中列表中的加进去
+              if (!this.dataSourceRight.find(item => item[this.replaceFields.key] === key)) {
+                // 右侧不存在，追加到右侧表格
+                this.dataSourceRight.push(info.node.dataRef)
+              }
+            }
+            if (info.node.dataRef[this.replaceFields.children]) {
+              // 有子集追加
+              for (const keyItem of info.node.dataRef[this.replaceFields.children]) {
+                // 当前选中的子集没在列表中的加进去
+                if (!this.dataSourceRight.find(item => item[this.replaceFields.key] === keyItem[this.replaceFields.key])) {
+                  // 右侧不存在，追加到右侧表格
+                  this.dataSourceRight.push(keyItem)
+                }
+              }
+            }
+          } else {
+            console.log('----------删除了数据')
+            // 说明是删除了数据
+            if (this.checkedKeys && this.checkedKeys.length > 0) {
+              // 还有选中数据，从dataSourceRight里面找到点击的数据和他的子数据清空
+              for (let i = 0; i < this.dataSourceRight.length; i++) {
+                if (!this.checkedKeys.find(item => item === this.dataSourceRight[i][this.replaceFields.key])) {
+                  // 表格选中中没有找到这一条数据，说明已经被删了
+                  this.dataSourceRight.splice(i, 1)
+                  i--
+                }
+              }
+            } else {
+              // 已经没有选中数据了，直接清空展示数据
+              this.dataSourceRight = []
+            }
+          }
+        } else {
+          // 不是父子关联
+          console.log('-----------checkedKeys', this.checkedKeys, checkedKeys)
+          if (info.checked) {
+            // 是选中数据了
+            this.checkedKeys = [...this.checkedKeys, ...checkedKeys.checked]
+          } else {
+            // 是取消选中了
+            this.checkedKeys = this.checkedKeys.filter(item => item !== info.node.dataRef[this.replaceFields.key])
+          }
+          // 处理下方显示已选数据
+          if (info.checked) {
+            console.log('------------不父子关联增加了数据')
+            // 说明是增加了数据,把点击的数据追加进去
+            for (const key of checkedKeys.checked) {
+              // 当前选中没在选中列表中的加进去
+              if (!this.dataSourceRight.find(item => item[this.replaceFields.key] === key)) {
+                // 右侧不存在，追加到右侧表格
+                this.dataSourceRight.push(info.node.dataRef)
+              }
+            }
+          } else {
+            console.log('----------不父子关联删除了数据')
+            // 说明是删除了数据
+            if (this.checkedKeys && this.checkedKeys.length > 0) {
+              // 还有选中数据，从dataSourceRight里面找到点击的数据和他的子数据清空
+              for (let i = 0; i < this.dataSourceRight.length; i++) {
+                if (!this.checkedKeys.find(item => item === this.dataSourceRight[i][this.replaceFields.key])) {
+                  // 表格选中中没有找到这一条数据，说明已经被删了
+                  this.dataSourceRight.splice(i, 1)
+                  i--
+                }
+              }
+            } else {
+              // 已经没有选中数据了，直接清空展示数据
+              this.dataSourceRight = []
+            }
+          }
+        }
+      }
+    },
+    onSelect (selectedKeys, info) {
+      // 取消关联的情况下才走onSelect的逻辑
+      if (!this.parentChildRelate) {
+        if (selectedKeys && selectedKeys.length > 0) {
+          // 说明是选中了数据
+          this.selectedKeys = [...selectedKeys]
+          this.dataSourceRight = [info.node.dataRef]
+        } else {
+          // 没有数据，直接清空
+          this.selectedKeys = []
+          this.dataSourceRight = []
+        }
+      }
+    },
+    onLoad (loadedKeys) {
+      this.loadedKeys = loadedKeys
+    },
+    onExpand (expandedKeys) {
+      console.log('========expandedKeys', expandedKeys)
+      this.expandedKeys = expandedKeys
+    },
+    // 异步加载
+    async loadData (node) {
+      console.log('-------------loadData', node)
+      if (node.dataRef.children) {
+        return
+      }
+      this.topLoading = true
+      const params = {}
+      if (this.optionsHref !== '/laws/standard/partName/queryFirstList') {
+        // 不是涉及系统部件
+        params.dictId = this.dictId
+      }
+      // 查询条件的名称
+      if (this.searchValue) {
+        params[this.searchFieldName] = this.searchValue
+      }
+      // 父节点id
+      if (this.optionsHref === '/laws/standard/partName/queryFirstList') {
+        // 是涉及系统部件
+        params[this.lazyLoadPidFieldName] = node.dataRef.code
+      } else {
+        params[this.lazyLoadPidFieldName] = node.dataRef.id
+      }
+      await getAction(this.lazyLoadHref, params).then(res => {
+        if (res.success) {
+          node.dataRef[this.replaceFields.children] = res.result.record || res.result
+        }
+      }).finally(() => {
+        this.topLoading = false
+      })
+    },
+    handleCancel () {
+      this.visible = false
+    },
+    close () {
+      this.visible = false
+      this.checkedKeys = []
+      this.expandedKeys = []
+      this.loadedKeys = []
+      this.dataSourceRight = []
+      this.treeData = []
+      this.searchValue = ''
+    },
+    onSearch (value) {
+      this.searchValue = value
+      // this.autoExpandParent = true
+      this.getTreeData()
+      this.expandedKeys = []
+      this.loadedKeys = []
+      this.$forceUpdate()
+    },
+    // 设置树只能选第三级
+    setOnlySelectThreeLevel (treeData) {
+      for (const item of treeData) {
+        item.disabled = item.level + '' !== '3'
+        item.disableCheckbox = item.level + '' !== '3'
+        if (item.childPartNameList && item.childPartNameList.length > 0) {
+          this.setOnlySelectThreeLevel(item.childPartNameList)
+        }
+      }
+    },
+    // 切换父子关联
+    switchCheckStrictly (v) {
+      if (v === 1) {
+        // 取消父子关联
+        this.parentChildRelate = false
+      } else if (v === 2) {
+        // 增加父子关联
+        this.parentChildRelate = true
+      }
+    },
+    getTreeData () {
+      this.topLoading = true
+      const params = {}
+      if (this.optionsHref !== '/laws/standard/partName/queryFirstList') {
+        // 不是涉及系统部件
+        params.dictId = this.dictId
+      }
+      // 查询条件的名称
+      if (this.searchValue) {
+        params[this.searchFieldName] = this.searchValue
+      }
+      getAction(this.optionsHref, params).then(res => {
+        if (res.success) {
+          this.treeData = res.result.records || res.result
+        }
+      }).finally(() => {
+        this.topLoading = false
+      })
+    },
+    // 已选数据列表的删除
+    handleDelete (record, index) {
+      this.dataSourceRight.splice(index, 1)
+      if (this.checkable) {
+        // 多选从checkedKeys里面筛选出去
+        this.checkedKeys = this.checkedKeys.filter(item => item !== record[this.replaceFields.key])
+      } else {
+        // 单选从selectedKeys里面筛选出去
+        this.selectedKeys = this.selectedKeys.filter(item => item !== record[this.replaceFields.key])
+      }
+    },
+    handleOk () {
+      if (this.checkRequired && (!this.checkedKeys || this.checkedKeys.length === 0)) {
+        this.$message.warning(this.$t('selectLeastOne'))
+        return
+      }
+      this.$emit('nameChange', this.dataSourceRight.map(item => item[this.replaceFields.title]).join(','))
+      this.$emit('change', this.dataSourceRight.map(item => item[this.replaceFields.key]).join(','))
+      this.$emit('listChange', this.dataSourceRight)
+      this.close()
+    },
+    getSelectedList (codes) {
+      this.bottomLoading = true
+      const params = {
+        selectNodeCodes: codes,
+        dictId: this.dictId
+      }
+      let url
+      // 涉及系统/部件
+      if (this.optionsHref === '/laws/standard/partName/queryFirstList') {
+        url = '/laws/standard/partName/echo'
+      } else { // 标签库
+        url = '/laws/dictTree/echo'
+      }
+      if (!url) {
+        return
+      }
+      postAction(url, params).then(res => {
+        if (res.success) {
+          this.dataSourceRight = JSON.parse(JSON.stringify(res.result))
+        }
+      }).finally(() => {
+        this.bottomLoading = false
+      })
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+/deep/ .ant-modal-content {
+  padding-bottom: 18px;
+}
+.my-dept-select-tree{
+  height:350px;
+
+  &.fullscreen{
+    height: calc(100vh - 250px);
+  }
+  overflow-y: scroll;
+}
+
+.modal-content-title {
+  color: #1D2129;
+  font-weight: 500;
+  margin-right: 12px;
+  margin-bottom: 0;
+  margin-top: 16px;
+}
+
+.drawer-bootom-button {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  border-top: 1px solid #e8e8e8;
+  padding: 10px 16px;
+  text-align: right;
+  left: 0;
+  background: #fff;
+  border-radius: 0 0 2px 2px;
+}
+
+.name-content {
+  display: flex;
+  flex-wrap: wrap;
+  max-height: 200px;
+  overflow-y: auto;
+  .name-div {
+    width: auto;
+    padding: 5px 16px;
+    margin-right: 12px;
+    margin-top: 8px;
+    background: rgba(0, 100, 250, 0.08);
+    border-radius: 4px 4px 4px 4px;
+    opacity: 1;
+    color: @primary-color;
+    white-space: nowrap;
+    /deep/ .anticon {
+      margin-left: 4px;
+    }
+  }
+}
+</style>
diff --git a/src/components/selection/TreeDataSelection.vue b/src/components/selection/TreeDataSelection.vue
new file mode 100644
index 00000000..bca415a6
--- /dev/null
+++ b/src/components/selection/TreeDataSelection.vue
@@ -0,0 +1,145 @@
+<template>
+  <div class="components-input-demo-presuffix">
+    <div class="user-organ-wrap">
+      <a-input class="user-input" @click="openModal" :placeholder="placeholder" v-model="nameStr" :title="nameStr" readOnly>
+        <a-icon v-if="nameStr" slot="suffix" type="close-circle" @click="handleEmpty" title="清空"/>
+      </a-input>
+      <a-button type="primary" class="button-box" @click="openModal" :disabled="disabled" v-if="showBtn && !disabled">
+        {{ $t('select') }}
+      </a-button>
+    </div>
+
+    <tree-data-select-modal
+      ref="selectModal"
+      :checkable="checkable"
+      :value="value"
+      :dict-id="dictId"
+      v-bind="$attrs"
+      :options-href="optionsHref"
+      @change="handleChange"
+      @nameChange="nameChange"
+      @listChange="listChange"/>
+  </div>
+</template>
+
+<script>
+import TreeDataSelectModal from './TreeDataSelectModal'
+
+export default {
+  name: 'TreeDataSelection',
+  components: { TreeDataSelectModal },
+  props: {
+    checkable: { // 是否多选
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    value: {
+      type: String,
+      required: false
+    },
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    // 获取数据的接口
+    optionsHref: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    // 名称字符串
+    nameStr: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    fieldName: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    dictId: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    showBtn: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    placeholder: {
+      type: String,
+      default: ''
+    }
+  },
+  watch: {
+    nameStr: {
+      immediate: true,
+      handler (val) {
+        console.log('----------nameStr', val)
+      }
+    }
+  },
+  data () {
+    return {
+      visible: false,
+      confirmLoading: false
+    }
+  },
+  methods: {
+    openModal () {
+      this.$refs.selectModal.show()
+    },
+    handleChange (value) {
+      this.$emit('change', value, this.fieldName)
+    },
+    nameChange (value) {
+      this.$emit('nameChange', value, this.fieldName)
+    },
+    listChange (value) {
+      this.$emit('listChange', value, this.fieldName)
+    },
+    handleEmpty () {
+      if (this.disabled) {
+        return
+      }
+      this.handleChange('')
+      this.nameChange('')
+      this.listChange([])
+    }
+  },
+  model: {
+    prop: 'value',
+    event: 'change'
+  }
+}
+</script>
+
+<style scoped lang="less">
+.user-organ-wrap {
+  width: 100%;
+  position: relative;
+  display: flex;
+  align-items: center;
+  //height: 39.98px;
+
+  .user-input {
+    resize: none;
+    width: calc(100% - 70px);
+  }
+
+  // 因为需要加title，所以不能把鼠标事件去掉
+  /deep/ .ant-input-disabled {
+    background: #fff;
+    color: rgba(0, 0, 0, 0.65);
+    cursor: default;
+  }
+
+  .button-box {
+    margin-left: 5px;
+  }
+}
+</style>