index.vue 8.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346
  1. <script>
  2. import { REFER } from "./api/index";
  3. import deepCopy from "@gby/deep-copy";
  4. export default {
  5. name: "PopoverTreeSelect",
  6. props: {
  7. // 参照类型 ,对应后端
  8. type: {
  9. type: String,
  10. require: true,
  11. },
  12. // v-model
  13. value: {
  14. type: [Array, String],
  15. require: true,
  16. },
  17. // 参照弹窗标题
  18. title: {
  19. type: String,
  20. default: "TITLE",
  21. },
  22. // 作为 value 唯一标识的键名,绑定值
  23. valueKey: {
  24. type: String,
  25. default: "code",
  26. },
  27. // 默认查询参数
  28. queryParams: {
  29. type: Function,
  30. default: () => {},
  31. },
  32. // 组件大小
  33. size: {
  34. type: String,
  35. default: "mini",
  36. },
  37. // 提示
  38. placeholder: {
  39. type: String,
  40. default: "",
  41. },
  42. // 是否可读
  43. readonly: {
  44. type: Boolean,
  45. default: false,
  46. },
  47. // 是否禁止
  48. disabled: {
  49. type: Boolean,
  50. default: false,
  51. },
  52. // 是否清除
  53. clearable: {
  54. type: Boolean,
  55. default: false,
  56. },
  57. // 是否多选
  58. multiple: {
  59. type: Boolean,
  60. default: false,
  61. },
  62. // 需映射源数据
  63. source: Object,
  64. // 参照内外映射
  65. dataMapping: Object,
  66. },
  67. components: {},
  68. data() {
  69. return {
  70. width: "50%",
  71. visible: false,
  72. loading: false,
  73. params: {
  74. search: "",
  75. isPage: true,
  76. },
  77. data: [],
  78. selectData: [],
  79. lastSelectData: [],
  80. defaultProps: {
  81. label: "name",
  82. children: "children",
  83. },
  84. };
  85. },
  86. computed: {
  87. innerValue() {
  88. const { value, multiple } = this.$props;
  89. return multiple ? "" : value;
  90. },
  91. TableColumnTemp() {
  92. const { type } = this.$props;
  93. const documents = require(`./components/${type}`).default;
  94. return documents.filter((document) => document.key);
  95. },
  96. },
  97. watch: {
  98. "$props.value": {
  99. handler: function (newProp) {
  100. if (!newProp) this.lastSelectData = [];
  101. },
  102. immediate: true,
  103. },
  104. },
  105. methods: {
  106. //
  107. emitChange(prop) {
  108. const { type, source, multiple } = this.$props;
  109. this.$emit("change", multiple ? prop : prop[0], source, type);
  110. },
  111. // open dialog
  112. async open() {
  113. this.visible = true;
  114. await this.useReset();
  115. },
  116. // hide dialog
  117. async hide() {
  118. this.visible = false;
  119. },
  120. // fetch list
  121. async fetchList(prop) {
  122. try {
  123. this.loading = true;
  124. const { code, rows } = await REFER(prop);
  125. if (code === 200) {
  126. this.data = rows;
  127. }
  128. } catch (err) {
  129. // catch
  130. console.error(err);
  131. } finally {
  132. // finally
  133. this.loading = false;
  134. }
  135. },
  136. // reset list
  137. async useReset() {
  138. const { type, source, queryParams } = this.$props;
  139. this.model = {
  140. type,
  141. search: "",
  142. ...this.model,
  143. ...queryParams(source),
  144. };
  145. await this.fetchList(this.model);
  146. },
  147. // query list
  148. async useQuery() {
  149. await this.fetchList(this.model);
  150. },
  151. // cancel
  152. useCancel(prop) {
  153. const { multiple } = this.$props;
  154. this.useUpdate(multiple ? prop : prop[0]);
  155. this.hide();
  156. },
  157. // confirm
  158. useConfirm(prop) {
  159. const { multiple } = this.$props;
  160. this.useUpdate(multiple ? prop : prop[0]);
  161. this.emitChange(this.selectData);
  162. this.lastSelectData = deepCopy(this.selectData);
  163. this.hide();
  164. },
  165. // delete tag
  166. useDelete(prop) {
  167. this.selectData.splice(prop, 1);
  168. this.useUpdate(this.selectData);
  169. this.emitChange(this.selectData);
  170. this.lastSelectData = deepCopy(this.selectData);
  171. },
  172. // update
  173. useUpdate(prop) {
  174. const { source, multiple, valueKey, dataMapping, type } = this.$props;
  175. // update data mapping
  176. if (multiple) {
  177. const vModel = prop.map((item) => item[valueKey]);
  178. this.$emit("input", vModel);
  179. } else {
  180. const vModel = prop[valueKey];
  181. this.$emit("input", vModel);
  182. for (let key in dataMapping) {
  183. source[key] = prop[dataMapping[key]];
  184. }
  185. this.$emit("update:source", source);
  186. }
  187. },
  188. // click select row data
  189. onceSelect(prop) {
  190. if (prop) this.selectData = [prop];
  191. },
  192. // double click select row data and confirm
  193. doubleSelect(prop) {
  194. this.useConfirm([prop]);
  195. },
  196. // multiple select row data
  197. selectionChange(prop, data) {
  198. if (prop) {
  199. this.selectData.push(data);
  200. } else {
  201. const { code } = data;
  202. const index = this.selectData.findIndex((item) => item.code === code);
  203. this.selectData.splice(index, 1);
  204. }
  205. },
  206. },
  207. created() {},
  208. mounted() {},
  209. destroyed() {},
  210. };
  211. </script>
  212. <template>
  213. <div class="popover-tree-select">
  214. <el-input
  215. v-model="innerValue"
  216. :size="size"
  217. :disabled="disabled"
  218. :readonly="readonly"
  219. :clearable="clearable"
  220. :placeholder="placeholder"
  221. >
  222. <el-button
  223. :disabled="disabled"
  224. slot="append"
  225. icon="el-icon-search"
  226. @click="open"
  227. ></el-button>
  228. </el-input>
  229. <el-dialog
  230. :title="`${title}(${multiple ? '多选' : '单选'})`"
  231. :width="width"
  232. :visible.sync="visible"
  233. :close-on-click-modal="false"
  234. :close-on-press-escape="false"
  235. append-to-body
  236. @close="hide"
  237. >
  238. <el-form
  239. v-loading="loading"
  240. :size="size"
  241. :inline="true"
  242. :model="params"
  243. @submit.native.prevent
  244. >
  245. <el-form-item prop="search">
  246. <el-input
  247. v-model="params.search"
  248. @keydown.enter="useQuery"
  249. @change="useQuery"
  250. >
  251. </el-input>
  252. </el-form-item>
  253. <el-form-item>
  254. <el-button icon="el-icon-refresh" @click="useReset"></el-button>
  255. </el-form-item>
  256. </el-form>
  257. <el-tree
  258. v-if="multiple"
  259. :data="data"
  260. :props="defaultProps"
  261. accordion
  262. node-key="id"
  263. >
  264. <div slot-scope="{ node, data }">
  265. <el-checkbox
  266. v-model="data.checked"
  267. @click.native.stop
  268. @change="selectionChange($event, data)"
  269. style="margin: 0 5px 0 0"
  270. >
  271. </el-checkbox>
  272. <span> {{ data.name }}</span>
  273. </div>
  274. </el-tree>
  275. <el-radio-group v-else v-model="radio" style="width: 100%">
  276. <el-tree
  277. v-loading="loading"
  278. :data="data"
  279. :props="defaultProps"
  280. accordion
  281. node-key="id"
  282. >
  283. <div slot-scope="{ node, data }">
  284. <el-radio
  285. :label="data.code"
  286. @click.native.stop="onceSelect(data)"
  287. @dblclick.native.stop="doubleSelect(data)"
  288. style="margin: 0 5px 0 0"
  289. >
  290. {{ data.name }}
  291. </el-radio>
  292. </div>
  293. </el-tree>
  294. </el-radio-group>
  295. <div style="margin-top: 20px; text-align: right">
  296. <el-button :size="size" @click="visible = false">取 消</el-button>
  297. <el-button :size="size" type="primary" @click="useConfirm(selectData)"
  298. >确 定</el-button
  299. >
  300. </div>
  301. </el-dialog>
  302. <div
  303. style="
  304. position: absolute;
  305. left: 10px;
  306. top: 50%;
  307. transform: translateY(-50%);
  308. padding-right: 30px;
  309. overflow: hidden;
  310. "
  311. >
  312. <div v-if="multiple && lastSelectData.length">
  313. <el-popover
  314. :offset="-10"
  315. :width="width"
  316. :visible-arrow="false"
  317. title=""
  318. content=""
  319. trigger="click"
  320. placement="bottom-start"
  321. >
  322. <el-tag slot="reference" :size="size" style="margin-right: 10px">
  323. + {{ lastSelectData.length }}
  324. </el-tag>
  325. <el-tag
  326. v-for="(tag, index) in lastSelectData"
  327. :size="size"
  328. hit
  329. closable
  330. :style="{
  331. display: 'flex',
  332. justifyContent: 'space-between',
  333. alignItems: 'center',
  334. margin: lastSelectData.length - 1 === index ? '0' : '0 0 5px 0',
  335. }"
  336. @close="useDelete(index)"
  337. >
  338. {{ tag.name }}
  339. </el-tag>
  340. </el-popover>
  341. </div>
  342. </div>
  343. </div>
  344. </template>
  345. <style scoped></style>