index.vue 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253
  1. <script>
  2. import { REFER } from "./api/index";
  3. export default {
  4. name: "PopoverTreeSelect",
  5. props: {
  6. // v-model
  7. value: {
  8. type: [Array, String],
  9. require: true,
  10. },
  11. // 参照类型 ,对应后端
  12. referName: {
  13. type: String,
  14. require: true,
  15. },
  16. // 作为 value 唯一标识的键名,绑定值
  17. valueKey: {
  18. type: String,
  19. dafault: () => {
  20. return "code";
  21. },
  22. },
  23. // 默认查询参数
  24. queryParams: {
  25. type: Function,
  26. default: () => {},
  27. },
  28. // 需映射源数据
  29. source: {
  30. type: Object,
  31. default: () => ({}),
  32. },
  33. // 参照内外映射
  34. dataMapping: {
  35. type: Object,
  36. default: () => ({}),
  37. },
  38. },
  39. components: {},
  40. data() {
  41. return {
  42. size: "mini",
  43. width: "50%",
  44. visible: false,
  45. loading: false,
  46. model: {
  47. search: "",
  48. isPage: false,
  49. },
  50. data: [],
  51. selectData: [],
  52. defaultProps: {
  53. label: "name",
  54. children: "children",
  55. },
  56. };
  57. },
  58. computed: {
  59. innerValue: {
  60. get() {
  61. return this.value;
  62. },
  63. set(value) {
  64. this.$emit("input", value);
  65. },
  66. },
  67. },
  68. watch: {
  69. innerValue: {
  70. handler: function (newValue) {
  71. if (!newValue) {
  72. const {
  73. $props: { source, dataMapping },
  74. } = this;
  75. for (let key in dataMapping) {
  76. source[key] = undefined;
  77. }
  78. this.$emit("update:source", source);
  79. }
  80. },
  81. },
  82. // "model.search": {
  83. // handler: function (newValue) {
  84. // this.$refs.tree.filter(newValue);
  85. // },
  86. // },
  87. },
  88. methods: {
  89. // open dialog
  90. async open() {
  91. this.visible = true;
  92. await this.useReset();
  93. },
  94. // hide dialog
  95. async hide() {
  96. this.visible = false;
  97. },
  98. // fetch list
  99. async fetchList(prop) {
  100. try {
  101. this.loading = true;
  102. const { referName: type, source, queryParams } = this.$props;
  103. const { code, rows } = await REFER({
  104. ...prop,
  105. ...queryParams(source),
  106. type: type,
  107. });
  108. if (code === 200) {
  109. this.data = rows;
  110. }
  111. } catch (err) {
  112. // catch
  113. console.error(err);
  114. } finally {
  115. // finally
  116. this.loading = false;
  117. }
  118. },
  119. // reset list
  120. async useReset() {
  121. this.data = [];
  122. this.model.search = null;
  123. await this.fetchList(this.model);
  124. },
  125. // query list
  126. async useQuery(value) {
  127. await this.$refs.tree.filter(value);
  128. // await this.fetchList(this.model);
  129. },
  130. // auto
  131. async useAutocomplete(prop, cb) {
  132. if (prop) {
  133. this.model.search = prop;
  134. await this.fetchList(this.model);
  135. await cb(this.data);
  136. } else {
  137. cb([]);
  138. }
  139. },
  140. // select
  141. useSelect(prop) {
  142. this.selectData = [prop];
  143. },
  144. // filter
  145. useTreeFilter(value, data) {
  146. if (!value) return true;
  147. return data.name.indexOf(value) !== -1;
  148. },
  149. // confirm
  150. useConfirm(prop) {
  151. this.hide();
  152. const {
  153. $props: { source, valueKey, dataMapping },
  154. } = this;
  155. for (let key in dataMapping) {
  156. source[key] = prop[0][dataMapping[key]];
  157. }
  158. this.innerValue = prop[0][valueKey];
  159. this.$emit("update:source", source);
  160. this.$emit("change", prop, this.$props);
  161. },
  162. },
  163. created() {},
  164. mounted() {},
  165. destroyed() {},
  166. };
  167. </script>
  168. <template>
  169. <div class="popover-tree-select">
  170. <el-autocomplete
  171. v-bind="$attrs"
  172. v-model="innerValue"
  173. :value-key="valueKey"
  174. :fetch-suggestions="useAutocomplete"
  175. @select="useConfirm"
  176. style="width: 100%"
  177. >
  178. <i class="el-icon-search" slot="suffix" @click="open"> </i>
  179. <template slot-scope="{ item }">
  180. <p
  181. style="
  182. text-overflow: ellipsis;
  183. overflow: hidden;
  184. line-height: 15px;
  185. margin: 5px 0;
  186. "
  187. >
  188. {{ item.name }}
  189. </p>
  190. <p
  191. style="
  192. font-size: 12px;
  193. color: #b4b4b4;
  194. line-height: 15px;
  195. margin: 5px 0;
  196. "
  197. >
  198. {{ item.code }}
  199. </p>
  200. </template>
  201. </el-autocomplete>
  202. <el-dialog
  203. :width="width"
  204. :show-close="false"
  205. :visible.sync="visible"
  206. :close-on-click-modal="false"
  207. :close-on-press-escape="false"
  208. append-to-body
  209. >
  210. <div slot="footer">
  211. <el-button
  212. type="primary"
  213. :size="$attrs.size"
  214. :loading="loading"
  215. @click="useConfirm(selectData)"
  216. >确 认</el-button
  217. >
  218. <el-button :size="$attrs.size" :loading="loading" @click="hide"
  219. >取 消</el-button
  220. >
  221. </div>
  222. <el-form
  223. v-loading="loading"
  224. :size="size"
  225. :inline="true"
  226. :model="model"
  227. @submit.native.prevent
  228. >
  229. <el-form-item prop="search">
  230. <el-input v-model="model.search" @change="useQuery"> </el-input>
  231. </el-form-item>
  232. <el-form-item>
  233. <el-button icon="el-icon-refresh" @click="useReset"></el-button>
  234. </el-form-item>
  235. <el-tree
  236. v-loading="loading"
  237. :data="data"
  238. :props="defaultProps"
  239. :filter-node-method="useTreeFilter"
  240. ref="tree"
  241. accordion
  242. node-key="id"
  243. @node-click="useSelect"
  244. >
  245. </el-tree>
  246. </el-form>
  247. </el-dialog>
  248. </div>
  249. </template>
  250. <style scoped></style>