cascader.vue 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428
  1. <template>
  2. <div tabindex="0" @blur="selectClihide()" style="display: inline-block;position: relative;">
  3. <div :class="disabled ? 'disabledTrue' : 'disabledFalse'" @mouseenter="moveIonDiv" @mouseleave="outIonDiv">
  4. <div :style="`width:${selectWidth}px;height:${selectHeight}px`" :class="classDiv ? 'select selectDiv' : 'select'" @click.stop="selectCli" :ref="disabled ? '' : 'selectDiv'">
  5. <div :style="'line-height: '+selectHeight+'px;font-size: '+selectFontSize+'px;'" :class="(selectName == $t('defaultText.pleaseChoose') || selectName == $t('qing-xuan-ze-bu-men') || selectName == $t('other.allDepartments')) ? 'selecttex selecttexXuan' : 'selecttex'">
  6. <ww-open-data type='departmentName' :openid='selectName'></ww-open-data>
  7. <!-- {{selectName}} -->
  8. </div>
  9. <i :class=" move ? 'el-icon-arrow-down iostu iostuHover' : 'el-icon-arrow-down iostu'" v-if="!moveIon"></i>
  10. <i v-if="moveIon" class="el-icon-circle-close iostu" @click.stop="clearDelete"></i>
  11. </div>
  12. </div>
  13. <transition name="el-zoom-in-top">
  14. <div v-show="show" style="position: relative;z-index: 99;">
  15. <div class="transitionBox">
  16. <ul class="transitionBoxUl">
  17. <li :class="transitionBoxLiIdx == index ? 'liHover' : ''" v-for="(item, index) in options" :key="index" @mouseover="liMouseOver(index, item)" @click.stop="liClist(item)">
  18. <span :class="item.children ? 'idxspan' : ''" v-if="!radios">
  19. <!-- {{item.label}} -->
  20. <ww-open-data type='departmentName' :openid='item.label'></ww-open-data>
  21. </span>
  22. <span v-if="radios" style="margin-left: -15px">
  23. <el-radio v-model="optionsOId" :label="item.value">
  24. <span class="idxspan" style="margin-left: -10px">
  25. <!-- {{item.label}} -->
  26. <ww-open-data type='departmentName' :openid='item.label'></ww-open-data>
  27. </span>
  28. </el-radio>
  29. </span>
  30. <i class="el-icon-arrow-right" v-if="item.children"></i>
  31. </li>
  32. </ul>
  33. </div>
  34. <div v-for="(item, index) in options" :key="index">
  35. <div v-if="item.children" style="position: absolute;left: 200px;top: 6px">
  36. <cascaderOption :subject="item.children" :radios="radios" v-show="transitionBoxLiIdx == index" @cascaderOptionClick="cascaderOptionClick"></cascaderOption>
  37. </div>
  38. </div>
  39. </div>
  40. </transition>
  41. </div>
  42. </template>
  43. <script>
  44. // 引入里面的
  45. import cascaderOption from "@/components/cascaderOption.vue"
  46. export default {
  47. components: {
  48. cascaderOption
  49. },
  50. props: {
  51. subject:{
  52. type: Array
  53. },
  54. size: {
  55. type: String,
  56. },
  57. subjectId: {
  58. type: [String, Number]
  59. },
  60. // 是否为单选
  61. radios: {
  62. type: Boolean,
  63. default: false
  64. },
  65. // 当前页面用到的第几个
  66. distinction: {
  67. type: String,
  68. default: '1',
  69. },
  70. // 真对填写日报单独处理
  71. idx: {
  72. type: String
  73. },
  74. flg: {
  75. type: Boolean,
  76. default: false, // 默认值,不是填写日报
  77. },
  78. // 剩下统一索引
  79. index: {
  80. type: String
  81. },
  82. // 是否禁用
  83. disabled: {
  84. type: Boolean,
  85. default: false
  86. },
  87. // 是否可清空
  88. clearable: {
  89. type: Boolean,
  90. default: false
  91. },
  92. // 是否可搜索
  93. filterable: {
  94. type: Boolean,
  95. default: false
  96. },
  97. // 其他数据
  98. other: {
  99. type: [String, Number, Boolean],
  100. default: false
  101. },
  102. // 宽度
  103. widthStr: {
  104. type: String,
  105. default: false
  106. },
  107. // 默认文字
  108. selectNameChuan: {
  109. type: String
  110. },
  111. },
  112. data() {
  113. return {
  114. selectWidth: '150',
  115. selectHeight: '28',
  116. selectFontSize: '12',
  117. show: false, // 下拉框
  118. options: [], // 列表数据
  119. transitionBoxLiIdx: '-1', // hover 背景色
  120. selectName: this.$t('defaultText.pleaseChoose'), // 显示的文字
  121. classDiv: false, // 获得焦点样式
  122. optionsOId: '', // 选中人的id
  123. dailyListObj: null, // 填写日报的数据
  124. dailyListIndex: null, // 日报点的索引
  125. move: false,
  126. moveIon: false,
  127. hoverValIdx: '-1', // 鼠标移入的值
  128. hoverList: [],
  129. radioVal: ''
  130. };
  131. },
  132. computed: {},
  133. watch: {
  134. subject: {
  135. handler(newValue, oldValue) {
  136. this.options = newValue
  137. console.log(this.options, '我收到的数据')
  138. if(newValue) {
  139. }
  140. },
  141. },
  142. // 日报点的索引, 真对填写的日报
  143. idx: {
  144. handler(newValue, oldValue) {
  145. console.log(newValue, oldValue)
  146. this.dailyListIndex = newValue
  147. },
  148. },
  149. subjectId: {
  150. handler(newValue, oldValue) {
  151. console.log(newValue, oldValue)
  152. this.optionsOId = newValue
  153. if(this.optionsOId && this.optionsOId.length != 0) {
  154. this.traverseArr(this.options, this.optionsOId)
  155. } else {
  156. this.selectName = this.$t('defaultText.pleaseChoose')
  157. }
  158. },
  159. },
  160. widthStr: {
  161. handler(newValue, oldValue) {
  162. this.selectWidth = newValue
  163. },
  164. }
  165. },
  166. created() {
  167. console.log(this.size)
  168. if(this.size == 'mini') {
  169. this.selectWidth = '150'
  170. this.selectHeight = '28'
  171. } else if(this.size == 'small') {
  172. this.selectWidth = '191'
  173. this.selectHeight = '32'
  174. } else if(this.size == 'medium') {
  175. this.selectWidth = '205'
  176. this.selectHeight = '40'
  177. this.selectFontSize = '14'
  178. }
  179. if(this.widthStr) {
  180. this.selectWidth = this.widthStr
  181. }
  182. },
  183. mounted() {
  184. if(this.selectNameChuan) {
  185. this.selectName = this.selectNameChuan
  186. }
  187. if(this.subject) {
  188. this.options = JSON.parse(JSON.stringify(this.subject))
  189. console.log(this.options, '我收到的数据')
  190. }
  191. if(this.subjectId) {
  192. this.optionsOId = JSON.parse(JSON.stringify(this.subjectId))
  193. for(let i in this.options) {
  194. if(this.options[i].id == this.optionsOId || this.options[i].auditorId == this.optionsOId) {
  195. this.selectName = this.options[i].name || this.options[i].auditorName
  196. }
  197. }
  198. }
  199. this.dailyListIndex = this.idx
  200. console.log(this.selectWidth, this.selectHeight)
  201. // this.moveIon = JSON.parse(JSON.stringify(this.clearable))
  202. },
  203. methods: {
  204. // 循环取值
  205. traverseArr(arr, idd){
  206. console.log(arr, idd, '传过来的值')
  207. let id = idd[0]
  208. if(arr) {
  209. for(var i in arr) {
  210. if(arr[i].value == id) {
  211. this.selectName = arr[i].label
  212. return
  213. }
  214. if(arr[i].children) {
  215. this.traverseArr(arr[i].children, idd)
  216. }
  217. }
  218. }
  219. },
  220. selectCli() {
  221. if(!this.disabled) {
  222. this.$refs.selectDiv.focus()
  223. this.classDiv = !this.classDiv
  224. this.show = !this.show
  225. this.move = !this.move
  226. }
  227. },
  228. selectClihide() {
  229. if(this.classDiv) {
  230. let that = this
  231. setTimeout(function () {
  232. that.transitionBoxLiIdx = ''
  233. that.show = !that.show
  234. that.classDiv = false
  235. that.move = false
  236. }, 100)
  237. }
  238. },
  239. liMouseOver(index, item) {
  240. this.transitionBoxLiIdx = index
  241. if(item.children) {
  242. this.hoverList = []
  243. this.hoverList = item.children
  244. this.$forceUpdate()
  245. } else {
  246. this.hoverList = []
  247. }
  248. },
  249. // 点击
  250. liClist(item) {
  251. console.log('我被你点击了')
  252. if(!item.children) {
  253. this.selectName = item.label
  254. let obj = {
  255. id: item.value,
  256. distinction: this.distinction
  257. }
  258. this.$emit('vueCasader', obj)
  259. }
  260. if(this.radios) {
  261. this.selectName = item.label
  262. let obj = {
  263. id: item.value,
  264. distinction: this.distinction,
  265. item: item
  266. }
  267. this.$emit('vueCasader', obj)
  268. } else {
  269. this.transitionBoxLiIdx = ''
  270. this.show = !this.show
  271. this.classDiv = false
  272. this.move = false
  273. }
  274. },
  275. // 接受子组件传过来的值
  276. cascaderOptionClick(item) {
  277. this.liClist(item)
  278. },
  279. moveIonDiv() {
  280. console.log(this.selectName)
  281. if(this.clearable) {
  282. if(this.selectName != this.$t('defaultText.pleaseChoose')) {
  283. this.moveIon = true
  284. }
  285. }
  286. },
  287. outIonDiv() {
  288. if(this.clearable) {
  289. this.moveIon = false
  290. }
  291. },
  292. clearDelete() {
  293. this.selectName = this.$t('defaultText.pleaseChoose')
  294. let obj = {
  295. label: this.$t('defaultText.pleaseChoose'),
  296. value: ''
  297. }
  298. this.show = false
  299. this.classDiv = false
  300. this.move = false
  301. this.liClist(obj)
  302. }
  303. },
  304. triggerOption(){
  305. },
  306. choose(item,value){
  307. },
  308. };
  309. </script>
  310. <style scoped lang="scss">
  311. .selectDiv {
  312. border-color: #409EFF !important;
  313. }
  314. .disabledTrue {
  315. background: #F5F7FA !important;
  316. border-radius: 4px;
  317. cursor: not-allowed !important;
  318. position: relative;
  319. }
  320. .disabledFalse .select {
  321. background: #FFF;
  322. border-radius: 4px;
  323. }
  324. .select {
  325. -webkit-appearance: none;
  326. // background-color: #FFF;
  327. background-image: none;
  328. border-radius: 4px;
  329. border: 1px solid #DCDFE6;
  330. -webkit-box-sizing: border-box;
  331. box-sizing: border-box;
  332. color: #606266;
  333. display: inline-block;
  334. font-size: inherit;
  335. height: 40px;
  336. line-height: 40px;
  337. outline: 0;
  338. padding: 0 15px;
  339. -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
  340. transition: border-color .2s cubic-bezier(.645,.045,.355,1);
  341. width: 100%;
  342. position: relative;
  343. cursor: pointer;
  344. }
  345. .selecttex {
  346. height: 28px;
  347. line-height: 28px;
  348. text-overflow: ellipsis;
  349. font-size: 12px;
  350. }
  351. .iostu {
  352. position: absolute;
  353. top: 50%;
  354. margin-top: -4px;
  355. right: 8px;
  356. color: #C0C4CC;
  357. transition: All 0.2s ease-in-out;
  358. }
  359. .iostuHover {
  360. transform: rotate(-180deg);
  361. }
  362. .transitionBox {
  363. background: #FFF;
  364. position: absolute;
  365. min-width: 200px;
  366. border-radius: 2em;
  367. border: 1px solid #E4E7ED;
  368. border-radius: 4px;
  369. background-color: #FFF;
  370. box-sizing: border-box;
  371. margin: 5px 0;
  372. // box-shadow: 0 2px 12px #dfdfdf;
  373. height: 274px;
  374. overflow: auto;
  375. z-index: 500 !important;
  376. }
  377. .transitionBoxUl {
  378. list-style: none;
  379. padding: 6px 0;
  380. margin: 0;
  381. -webkit-box-sizing: border-box;
  382. box-sizing: border-box;
  383. }
  384. .transitionBoxUl li {
  385. font-size: 14px;
  386. padding: 0 20px;
  387. // position: relative;
  388. white-space: nowrap;
  389. overflow: hidden;
  390. text-overflow: ellipsis;
  391. color: #606266;
  392. height: 34px;
  393. line-height: 34px;
  394. -webkit-box-sizing: border-box;
  395. box-sizing: border-box;
  396. cursor: pointer;
  397. display: flex;
  398. align-items: center;
  399. }
  400. .liHover {
  401. background-color: #F5F7FA;
  402. // color: #409eff !important;
  403. }
  404. .liHover .idxspan {
  405. color: #409eff !important;
  406. font-weight: 700;
  407. }
  408. .transitionBoxUl span {
  409. flex: 1;
  410. width: 110px;
  411. width: 20px;
  412. padding: 0 10px;
  413. white-space: nowrap;
  414. overflow: hidden;
  415. text-overflow: ellipsis;
  416. }
  417. .selecttexXuan {
  418. color: #C0C4CC;;
  419. }
  420. </style>